claude-code-templates 1.10.0 → 1.11.0

package/README.md

@@ -76,6 +76,10 @@ npx claude-code-templates
 ```bash
 # Launch real-time analytics dashboard
 npx claude-code-templates --analytics
+
+# Launch chats/conversations dashboard (opens directly to conversations)
+npx claude-code-templates --chats
+npx claude-code-templates --agents
 ```
 
 ### Health Check
@@ -128,6 +132,8 @@ npx create-claude-config     # Create-style command
 | `-y, --yes` | Skip prompts and use defaults | `--yes` |
 | `--dry-run` | Show what would be installed | `--dry-run` |
 | `--analytics` | Launch real-time analytics dashboard | `--analytics` |
+| `--chats` | Launch chats/conversations dashboard | `--chats` |
+| `--agents` | Launch agents dashboard (alias for chats) | `--agents` |
 | `--health-check` | Run comprehensive system validation | `--health-check` |
 | `--health` | Run system health check (alias) | `--health` |
 | `--check` | Run system validation (alias) | `--check` |

package/bin/create-claude-config.js

@@ -45,6 +45,7 @@ program
   .option('--hook-stats, --hooks-stats', 'analyze existing automation hooks and offer optimization')
   .option('--mcp-stats, --mcps-stats', 'analyze existing MCP server configurations and offer optimization')
   .option('--analytics', 'launch real-time Claude Code analytics dashboard')
+  .option('--chats, --agents', 'launch Claude Code chats/agents dashboard (opens directly to conversations)')
   .option('--health-check, --health, --check, --verify', 'run comprehensive health check to verify Claude Code setup')
   .action(async (options) => {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "CLI tool to setup Claude Code configurations with framework-specific commands, automation hooks and MCP Servers for your projects",
   "main": "src/index.js",
   "bin": {
@@ -31,7 +31,7 @@
     "dev:link": "npm link",
     "dev:unlink": "npm unlink -g claude-code-templates",
     "pretest:commands": "npm run dev:link",
-    "prepublishOnly": "echo 'Skipping tests for Health Check release'",
+    "prepublishOnly": "echo 'Skipping tests for emergency publish'",
     "analytics:start": "node src/analytics.js",
     "analytics:test": "npm run test:analytics"
   },

package/src/analytics/core/ConversationAnalyzer.js

@@ -93,7 +93,7 @@ class ConversationAnalyzer {
       };
 
       const jsonlFiles = await findJsonlFiles(this.claudeDir);
-      console.log(chalk.blue(`Found ${jsonlFiles.length} conversation files`));
+      // Loading conversation files quietly for better UX
 
       for (const filePath of jsonlFiles) {
         const stats = await this.getFileStats(filePath);
@@ -216,26 +216,96 @@ class ConversationAnalyzer {
       return await this.dataCache.getParsedConversation(filepath);
     }
     
-    // Fallback to direct parsing
+    // Fallback to direct parsing with tool correlation
     const content = await fs.readFile(filepath, 'utf8');
-    return content.trim().split('\n')
-      .filter(line => line.trim())
-      .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,
-            };
+    const lines = content.trim().split('\n').filter(line => line.trim());
+    
+    return this.parseAndCorrelateToolMessages(lines);
+  }
+
+  /**
+   * Parse JSONL lines and correlate tool_use with tool_result
+   * @param {Array} lines - JSONL lines
+   * @returns {Array} Parsed and correlated messages
+   */
+  parseAndCorrelateToolMessages(lines) {
+    const entries = [];
+    const toolUseMap = new Map();
+    
+    // First pass: parse all entries and map tool_use entries
+    for (const line of lines) {
+      try {
+        const item = JSON.parse(line);
+        if (item.message && (item.type === 'assistant' || item.type === 'user')) {
+          entries.push(item);
+          
+          // Track tool_use entries by their ID
+          if (item.type === 'assistant' && item.message.content) {
+            const toolUseBlock = Array.isArray(item.message.content) 
+              ? item.message.content.find(c => c.type === 'tool_use')
+              : (item.message.content.type === 'tool_use' ? item.message.content : null);
+            
+            if (toolUseBlock && toolUseBlock.id) {
+              toolUseMap.set(toolUseBlock.id, item);
+            }
           }
-        } catch {}
-        return null;
-      })
-      .filter(Boolean);
+        }
+      } catch (error) {
+        // Skip invalid JSONL lines
+      }
+    }
+    
+    // Second pass: correlate tool_result with tool_use and filter out standalone tool_result entries
+    const processedMessages = [];
+    
+    for (const item of entries) {
+      if (item.type === 'user' && item.message.content) {
+        // Check if this is a tool_result entry
+        const toolResultBlock = Array.isArray(item.message.content)
+          ? item.message.content.find(c => c.type === 'tool_result')
+          : (item.message.content.type === 'tool_result' ? item.message.content : null);
+        
+        if (toolResultBlock && toolResultBlock.tool_use_id) {
+          // This is a tool_result - attach it to the corresponding tool_use
+          // console.log(`🔍 ConversationAnalyzer: Found tool_result for ${toolResultBlock.tool_use_id}, content: "${toolResultBlock.content}"`);
+          const toolUseEntry = toolUseMap.get(toolResultBlock.tool_use_id);
+          // console.log(`🔍 ConversationAnalyzer: toolUseEntry found: ${!!toolUseEntry}`);
+          if (toolUseEntry) {
+            // Attach tool result to the tool use entry
+            if (!toolUseEntry.toolResults) {
+              toolUseEntry.toolResults = [];
+            }
+            toolUseEntry.toolResults.push(toolResultBlock);
+            // console.log(`✅ ConversationAnalyzer: Attached tool result to ${toolResultBlock.tool_use_id}, content length: ${toolResultBlock.content?.length || 0}`);
+            // Don't add this tool_result as a separate message
+            continue;
+          } else {
+            // console.log(`❌ ConversationAnalyzer: No tool_use found for ${toolResultBlock.tool_use_id}`);
+          }
+        }
+      }
+      
+      // Convert to our standard format
+      if (item.toolResults) {
+        // console.log(`ConversationAnalyzer: Processing item with ${item.toolResults.length} tool results`);
+      }
+      const parsed = {
+        id: item.message.id || item.uuid || null,
+        role: item.message.role || (item.type === 'assistant' ? 'assistant' : 'user'),
+        timestamp: new Date(item.timestamp),
+        content: item.message.content,
+        model: item.message.model || null,
+        usage: item.message.usage || null,
+        toolResults: item.toolResults || null, // Include attached tool results
+        isCompactSummary: item.isCompactSummary || false, // Preserve compact summary flag
+        uuid: item.uuid || null, // Include UUID for message identification
+        type: item.type || null // Include type field
+      };
+      
+      processedMessages.push(parsed);
+    }
+    
+    return processedMessages;
   }
 
   /**
@@ -576,7 +646,8 @@ class ConversationAnalyzer {
     const totalFileSize = conversations.reduce((sum, conv) => sum + conv.fileSize, 0);
 
     // Calculate real Claude sessions (5-hour periods)
-    const claudeSessions = await this.calculateClaudeSessions(conversations);
+    const claudeSessionsResult = await this.calculateClaudeSessions(conversations);
+    const claudeSessions = claudeSessionsResult?.total || 0;
 
     return {
       totalConversations,
@@ -585,8 +656,11 @@ class ConversationAnalyzer {
       activeProjects,
       avgTokensPerConversation,
       totalFileSize: this.formatBytes(totalFileSize),
+      dataSize: this.formatBytes(totalFileSize), // Alias for original dashboard compatibility
       lastActivity: conversations.length > 0 ? conversations[0].lastModified : null,
       claudeSessions,
+      claudeSessionsDetail: claudeSessions > 0 ? `${claudeSessions} session${claudeSessions > 1 ? 's' : ''}` : 'no sessions',
+      claudeSessionsFullData: claudeSessionsResult, // Keep full session data for detailed analysis
     };
   }
 

package/src/analytics/core/FileWatcher.js

@@ -11,6 +11,8 @@ class FileWatcher {
     this.watchers = [];
     this.intervals = [];
     this.isActive = false;
+    this.fileActivity = new Map(); // Track file activity for typing detection
+    this.typingTimeout = new Map(); // Track typing timeouts
   }
 
   /**
@@ -20,13 +22,14 @@ class FileWatcher {
    * @param {Function} processRefreshCallback - Callback to refresh process data
    * @param {Object} dataCache - DataCache instance for invalidation
    */
-  setupFileWatchers(claudeDir, dataRefreshCallback, processRefreshCallback, dataCache = null) {
+  setupFileWatchers(claudeDir, dataRefreshCallback, processRefreshCallback, dataCache = null, conversationChangeCallback = null) {
     console.log(chalk.blue('👀 Setting up file watchers for real-time updates...'));
 
     this.claudeDir = claudeDir;
     this.dataRefreshCallback = dataRefreshCallback;
     this.processRefreshCallback = processRefreshCallback;
     this.dataCache = dataCache;
+    this.conversationChangeCallback = conversationChangeCallback;
 
     this.setupConversationWatcher();
     this.setupProjectWatcher();
@@ -47,21 +50,28 @@ class FileWatcher {
     });
 
     conversationWatcher.on('change', async (filePath) => {
-      console.log(chalk.yellow('🔄 Conversation file changed, updating data...'));
+      
+      // Extract conversation ID from file path
+      const conversationId = this.extractConversationId(filePath);
+      
+      // Enhanced file activity detection for typing
+      await this.handleFileActivity(conversationId, filePath);
       
       // Invalidate cache for the changed file
       if (this.dataCache && filePath) {
         this.dataCache.invalidateFile(filePath);
       }
       
+      // Notify specific conversation change if callback exists
+      if (this.conversationChangeCallback && conversationId) {
+        await this.conversationChangeCallback(conversationId, filePath);
+      }
+      
       await this.triggerDataRefresh();
-      console.log(chalk.green('✅ Data updated'));
     });
 
     conversationWatcher.on('add', async () => {
-      console.log(chalk.yellow('📝 New conversation file detected...'));
       await this.triggerDataRefresh();
-      console.log(chalk.green('✅ Data updated'));
     });
 
     this.watchers.push(conversationWatcher);
@@ -78,15 +88,11 @@ class FileWatcher {
     });
 
     projectWatcher.on('addDir', async () => {
-      console.log(chalk.yellow('📁 New project directory detected...'));
       await this.triggerDataRefresh();
-      console.log(chalk.green('✅ Data updated'));
     });
 
     projectWatcher.on('change', async () => {
-      console.log(chalk.yellow('📁 Project directory changed...'));
       await this.triggerDataRefresh();
-      console.log(chalk.green('✅ Data updated'));
     });
 
     this.watchers.push(projectWatcher);
@@ -98,7 +104,6 @@ class FileWatcher {
   setupPeriodicRefresh() {
     // Periodic refresh to catch any missed changes (reduced frequency)
     const dataRefreshInterval = setInterval(async () => {
-      console.log(chalk.blue('⏱️  Periodic data refresh...'));
       await this.triggerDataRefresh();
     }, 120000); // Every 2 minutes (reduced from 30 seconds)
 
@@ -114,6 +119,137 @@ class FileWatcher {
     this.intervals.push(processRefreshInterval);
   }
 
+  /**
+   * Extract conversation ID from file path
+   * @param {string} filePath - Path to the conversation file
+   * @returns {string|null} Conversation ID or null if not found
+   */
+  extractConversationId(filePath) {
+    try {
+      // Handle different path formats:
+      // /Users/user/.claude/projects/PROJECT_NAME/conversation.jsonl -> PROJECT_NAME
+      // /Users/user/.claude/CONVERSATION_ID.jsonl -> CONVERSATION_ID
+      
+      const pathParts = filePath.split(path.sep);
+      const fileName = pathParts[pathParts.length - 1];
+      
+      if (fileName === 'conversation.jsonl') {
+        // Project-based conversation
+        const projectName = pathParts[pathParts.length - 2];
+        return projectName;
+      } else if (fileName.endsWith('.jsonl')) {
+        // Direct conversation file
+        return fileName.replace('.jsonl', '');
+      }
+      
+      return null;
+    } catch (error) {
+      console.error(chalk.red('Error extracting conversation ID:'), error);
+      return null;
+    }
+  }
+
+  /**
+   * Handle file activity for typing detection
+   * @param {string} conversationId - Conversation ID
+   * @param {string} filePath - File path that changed
+   */
+  async handleFileActivity(conversationId, filePath) {
+    if (!conversationId) return;
+
+    const fs = require('fs');
+    try {
+      // Get file stats
+      const stats = fs.statSync(filePath);
+      const now = Date.now();
+      const fileSize = stats.size;
+      const mtime = stats.mtime.getTime();
+
+      // Get previous activity
+      const previousActivity = this.fileActivity.get(conversationId) || {
+        lastSize: 0,
+        lastMtime: 0,
+        lastMessageCheck: 0
+      };
+
+      // Check if this is just a file touch/modification without significant content change
+      const sizeChanged = fileSize !== previousActivity.lastSize;
+      const timeChanged = mtime !== previousActivity.lastMtime;
+      const timeSinceLastCheck = now - previousActivity.lastMessageCheck;
+
+      // Update activity tracking
+      this.fileActivity.set(conversationId, {
+        lastSize: fileSize,
+        lastMtime: mtime,
+        lastMessageCheck: now
+      });
+
+      // If file changed but we haven't checked for complete messages recently
+      if ((sizeChanged || timeChanged) && timeSinceLastCheck > 1000) {
+        // Clear any existing typing timeout
+        const existingTimeout = this.typingTimeout.get(conversationId);
+        if (existingTimeout) {
+          clearTimeout(existingTimeout);
+        }
+
+        // Set a timeout to detect if this is typing activity
+        const typingTimeout = setTimeout(async () => {
+          // After delay, check if a complete message was added
+          await this.checkForTypingActivity(conversationId, filePath);
+        }, 2000); // Wait 2 seconds to see if a complete message appears
+
+        this.typingTimeout.set(conversationId, typingTimeout);
+      }
+    } catch (error) {
+      console.error(chalk.red(`Error handling file activity for ${conversationId}:`), error);
+    }
+  }
+
+  /**
+   * Check if file activity indicates user typing
+   * @param {string} conversationId - Conversation ID
+   * @param {string} filePath - File path to check
+   */
+  async checkForTypingActivity(conversationId, filePath) {
+    try {
+      // Parse the conversation to see if new complete messages were added
+      const ConversationAnalyzer = require('./ConversationAnalyzer');
+      const analyzer = new ConversationAnalyzer();
+      const messages = await analyzer.getParsedConversation(filePath);
+
+      if (messages && messages.length > 0) {
+        const lastMessage = messages[messages.length - 1];
+        const lastMessageTime = new Date(lastMessage.timestamp).getTime();
+        const now = Date.now();
+        const messageAge = now - lastMessageTime;
+
+        // If the last message is very recent (< 5 seconds), it's probably a new complete message
+        // If it's older, the file activity might indicate typing
+        if (messageAge > 5000 && lastMessage.role === 'assistant') {
+          // File activity after assistant message suggests user is typing
+          
+          // Send typing notification if we have access to notification manager
+          if (this.notificationManager) {
+            this.notificationManager.notifyConversationStateChange(conversationId, 'User typing...', {
+              detectionMethod: 'file_activity',
+              timestamp: new Date().toISOString()
+            });
+          }
+        }
+      }
+    } catch (error) {
+      console.error(chalk.red(`Error checking typing activity for ${conversationId}:`), error);
+    }
+  }
+
+  /**
+   * Set notification manager for state notifications
+   * @param {Object} notificationManager - NotificationManager instance
+   */
+  setNotificationManager(notificationManager) {
+    this.notificationManager = notificationManager;
+  }
+
   /**
    * Trigger data refresh with error handling
    */
@@ -274,7 +410,6 @@ class FileWatcher {
    * Force immediate refresh
    */
   async forceRefresh() {
-    console.log(chalk.cyan('🔄 Force refreshing data...'));
     await this.triggerDataRefresh();
     if (this.processRefreshCallback) {
       await this.processRefreshCallback();

package/src/analytics/data/DataCache.js

@@ -119,28 +119,12 @@ class DataCache {
       return cached.messages;
     }
     
-    // Cache miss - parse conversation
+    // Cache miss - parse conversation with tool correlation
     this.metrics.misses++;
     const content = await this.getFileContent(filepath);
+    const lines = content.trim().split('\n').filter(line => line.trim());
     
-    const messages = content.trim().split('\n')
-      .filter(line => line.trim())
-      .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);
+    const messages = this.parseAndCorrelateToolMessages(lines);
     
     this.caches.parsedConversations.set(filepath, {
       messages,
@@ -150,6 +134,127 @@ class DataCache {
     return messages;
   }
 
+  /**
+   * Parse JSONL lines and correlate tool_use with tool_result
+   * @param {Array} lines - JSONL lines
+   * @returns {Array} Parsed and correlated messages
+   */
+  parseAndCorrelateToolMessages(lines) {
+    const entries = [];
+    const toolUseMap = new Map();
+    
+    // First pass: parse all entries and map tool_use entries
+    for (const line of lines) {
+      try {
+        const item = JSON.parse(line);
+        if (item.message && (item.type === 'assistant' || item.type === 'user')) {
+          entries.push(item);
+          
+          // Track tool_use entries by their ID
+          if (item.type === 'assistant' && item.message.content) {
+            const toolUseBlock = Array.isArray(item.message.content) 
+              ? item.message.content.find(c => c.type === 'tool_use')
+              : (item.message.content.type === 'tool_use' ? item.message.content : null);
+            
+            if (toolUseBlock && toolUseBlock.id) {
+              toolUseMap.set(toolUseBlock.id, item);
+              if (toolUseBlock.id === 'toolu_01D8RMQYDySWAscQCC6pfDWf') {
+                // Debug: Specific tool_use mapped for debugging
+              }
+            }
+          }
+        }
+      } catch (error) {
+        // Skip invalid JSONL lines
+      }
+    }
+    
+    // Second pass: correlate tool_result with tool_use (first process ALL tool_results)
+    for (const item of entries) {
+      if (item.type === 'user' && item.message.content) {
+        // Check if this is a tool_result entry
+        const toolResultBlock = Array.isArray(item.message.content)
+          ? item.message.content.find(c => c.type === 'tool_result')
+          : (item.message.content.type === 'tool_result' ? item.message.content : null);
+        
+        if (toolResultBlock && toolResultBlock.tool_use_id) {
+          // This is a tool_result - attach it to the corresponding tool_use
+          const toolUseEntry = toolUseMap.get(toolResultBlock.tool_use_id);
+          if (toolUseEntry) {
+            // Enhance tool result with additional metadata
+            const enhancedToolResult = {
+              ...toolResultBlock,
+              // Include additional metadata from toolUseResult if available
+              ...(item.toolUseResult && {
+                stdout: item.toolUseResult.stdout,
+                stderr: item.toolUseResult.stderr,
+                interrupted: item.toolUseResult.interrupted,
+                isImage: item.toolUseResult.isImage,
+                returnCodeInterpretation: item.toolUseResult.returnCodeInterpretation
+              })
+            };
+            
+            // Attach tool result to the tool use entry
+            if (!toolUseEntry.toolResults) {
+              toolUseEntry.toolResults = [];
+            }
+            toolUseEntry.toolResults.push(enhancedToolResult);
+            // console.log: Tool result attached successfully
+          }
+        }
+      }
+    }
+    
+    // Third pass: process messages and filter out standalone tool_result entries
+    const processedMessages = [];
+    
+    for (const item of entries) {
+      if (item.type === 'user' && item.message.content) {
+        // Check if this is a tool_result entry (skip it as we've already processed it)
+        const toolResultBlock = Array.isArray(item.message.content)
+          ? item.message.content.find(c => c.type === 'tool_result')
+          : (item.message.content.type === 'tool_result' ? item.message.content : null);
+        
+        if (toolResultBlock && toolResultBlock.tool_use_id) {
+          // Skip standalone tool_result entries - they've been attached to their tool_use
+          continue;
+        }
+      }
+      
+      // Convert to our standard format
+      if (item.toolResults) {
+        // console.log: Processing item with tool results
+      }
+      
+      // Debug specific item we're looking for
+      if (item.message && item.message.content && Array.isArray(item.message.content)) {
+        const toolUseBlock = item.message.content.find(c => c.type === 'tool_use' && c.id === 'toolu_01D8RMQYDySWAscQCC6pfDWf');
+        if (toolUseBlock) {
+          // Debug: Processing tool_use item
+        }
+      }
+      const parsed = {
+        id: item.message.id || item.uuid || null,
+        role: item.message.role || (item.type === 'assistant' ? 'assistant' : 'user'),
+        timestamp: new Date(item.timestamp),
+        content: item.message.content,
+        model: item.message.model || null,
+        usage: item.message.usage || null,
+        toolResults: item.toolResults || null, // Include attached tool results (populated during correlation)
+        isCompactSummary: item.isCompactSummary || false, // Preserve compact summary flag
+        uuid: item.uuid || null, // Include UUID for message identification
+        type: item.type || null // Include type field
+      };
+      
+      // Debug log for our specific tool_use
+      // Debug: Final message processing completed
+      
+      processedMessages.push(parsed);
+    }
+    
+    return processedMessages;
+  }
+
   /**
    * Get file stats with caching
    * @param {string} filepath - Path to file

package/src/analytics/notifications/NotificationManager.js

@@ -104,6 +104,43 @@ class NotificationManager {
     console.log(chalk.green(`📊 Data refreshed (source: ${source})`));
   }
 
+  /**
+   * Send new message notification for real-time updates
+   * @param {string} conversationId - Conversation ID
+   * @param {Object} message - New message object
+   * @param {Object} metadata - Additional metadata
+   */
+  notifyNewMessage(conversationId, message, metadata = {}) {
+    const notification = {
+      type: 'new_message',
+      conversationId,
+      message,
+      metadata,
+      timestamp: new Date().toISOString(),
+      id: this.generateNotificationId()
+    };
+
+    // Don't throttle new message notifications - they should be immediate
+    this.addToHistory(notification);
+
+    // Send via WebSocket to conversation_updates channel
+    if (this.webSocketServer) {
+      this.webSocketServer.broadcast({
+        type: 'new_message',
+        data: {
+          conversationId,
+          message,
+          metadata
+        }
+      }, 'conversation_updates');
+    }
+
+    // Send to local subscribers
+    this.notifySubscribers('new_message', notification);
+
+    console.log(chalk.blue(`📨 New message notification sent for conversation ${conversationId}`));
+  }
+
   /**
    * Send system status notification
    * @param {Object} status - System status

package/src/analytics/notifications/WebSocketServer.js

@@ -281,7 +281,7 @@ class WebSocketServer {
     });
 
     if (sentCount > 0) {
-      console.log(chalk.green(`📢 Broadcasted ${message.type} to ${sentCount} clients${channel ? ` on channel ${channel}` : ''}`));
+      //console.log(chalk.green(`📢 Broadcasted ${message.type} to ${sentCount} clients${channel ? ` on channel ${channel}` : ''}`));
     }
 
     // Queue message if no clients connected

package/src/analytics-web/FRONT_ARCHITECTURE.md

@@ -0,0 +1,46 @@
+# Analytics Web Architecture
+
+## Current Architecture (Active)
+
+### Main Components:
+- **App.js** - Main application orchestrator with sidebar navigation
+- **Sidebar.js** - Navigation sidebar component
+- **DashboardPage.js** - Dashboard page with metrics and charts
+- **AgentsPage.js** - Agents/conversations page
+
+### Services:
+- **WebSocketService.js** - Real-time communication
+- **DataService.js** - API data fetching and caching
+- **StateService.js** - Application state management
+
+### Layout Structure:
+```
+App.js
+├── Sidebar.js (navigation)
+└── Page Components
+    ├── DashboardPage.js
+    └── AgentsPage.js
+```
+
+## Deprecated Architecture (Removed)
+
+### Deprecated Files:
+- **main.js** → `main.js.deprecated` - Old initialization system
+- **Dashboard.js** → `Dashboard.js.deprecated` - Old monolithic dashboard
+
+### Reason for Deprecation:
+The old architecture used a single Dashboard.js component without navigation, while the new architecture uses App.js with proper routing and a sidebar navigation system.
+
+## WebSocket Integration
+
+The WebSocket system is fully functional and provides real-time updates for:
+- Conversation state changes
+- Data refresh events
+- System status updates
+
+## Loading State Fix
+
+Fixed issue where loading states weren't clearing properly by:
+1. Reordering DOM rendering before setting loading states
+2. Adding proper error handling and fallback mechanisms
+3. Ensuring `setLoading(false)` is called in finally blocks