claude-code-templates 1.16.1 → 1.17.1

package/src/analytics-web/components/AgentsPage.js

@@ -1,4761 +0,0 @@
-/**
- * AgentsPage - Dedicated page for managing and viewing agent conversations
- * Handles conversation display, filtering, and detailed analysis
- */
-class AgentsPage {
-  constructor(container, services) {
-    this.container = container;
-    this.dataService = services.data;
-    this.stateService = services.state;
-    
-    this.components = {};
-    this.filters = {
-      status: 'all',
-      timeRange: '7d',
-      search: ''
-    };
-    this.isInitialized = false;
-    
-    // Initialize header component
-    this.headerComponent = null;
-    
-    // Pagination state for conversations
-    this.pagination = {
-      currentPage: 0,
-      limit: 10,
-      hasMore: true,
-      isLoading: false
-    };
-    
-    // Pagination state for messages
-    this.messagesPagination = {
-      currentPage: 0,
-      limit: 10,
-      hasMore: true,
-      isLoading: false,
-      conversationId: null
-    };
-    
-    // Loaded conversations cache
-    this.loadedConversations = [];
-    this.loadedMessages = new Map(); // Cache messages by conversation ID (now stores paginated data)
-    
-    // Agent data
-    this.agents = [];
-    this.selectedAgentId = null;
-    
-    // State transition tracking for enhanced user experience
-    this.lastMessageTime = new Map(); // Track when last message was received per conversation
-    
-    // Initialize tool display component
-    this.toolDisplay = new ToolDisplay();
-    
-    // Subscribe to state changes
-    this.unsubscribe = this.stateService.subscribe(this.handleStateChange.bind(this));
-    
-    // Subscribe to DataService events for real-time updates
-    this.dataService.addEventListener((type, data) => {
-      if (type === 'new_message') {
-        console.log('🔄 WebSocket: New message received', { conversationId: data.conversationId });
-        this.handleNewMessage(data.conversationId, data.message, data.metadata);
-      } else if (type === 'console_interaction') {
-        console.log('🔄 WebSocket: Console interaction request received', data);
-        this.showConsoleInteraction(data);
-      }
-    });
-  }
-
-  /**
-   * Initialize the agents page
-   */
-  async initialize() {
-    if (this.isInitialized) return;
-    
-    try {
-      this.stateService.setLoading(true);
-      await this.render();
-      await this.initializeComponents();
-      await this.loadAgentsData();
-      await this.loadConversationsData();
-      this.isInitialized = true;
-    } catch (error) {
-      console.error('Error initializing agents page:', error);
-      this.stateService.setError(error);
-    } finally {
-      this.stateService.setLoading(false);
-    }
-  }
-
-  /**
-   * Handle state changes from StateService (WebSocket updates)
-   * @param {Object} state - New state
-   * @param {string} action - Action that caused the change
-   */
-  handleStateChange(state, action) {
-    switch (action) {
-      case 'update_conversations':
-        // Don't replace loaded conversations, just update states
-        break;
-      case 'update_conversation_states':
-        console.log('🔄 WebSocket: Conversation states updated', { count: Object.keys(state.conversationStates?.activeStates || state.conversationStates || {}).length });
-        
-        // Handle both direct states object and nested structure
-        const activeStates = state.conversationStates?.activeStates || state.conversationStates || {};
-        
-        this.updateConversationStates(activeStates);
-        break;
-      case 'set_loading':
-        this.updateLoadingState(state.isLoading);
-        break;
-      case 'set_error':
-        this.updateErrorState(state.error);
-        break;
-      case 'conversation_state_change':
-        this.handleConversationStateChange(state);
-        break;
-      case 'data_refresh':
-        // On real-time data refresh, update conversation states but keep pagination
-        this.updateConversationStatesOnly();
-        break;
-      case 'new_message':
-        // Handle new message in real-time
-        this.handleNewMessage(state.conversationId, state.message, state.metadata);
-        break;
-    }
-  }
-  
-  /**
-   * Handle new message received via WebSocket
-   * @param {string} conversationId - Conversation ID that received new message
-   * @param {Object} message - New message object
-   * @param {Object} metadata - Additional metadata
-   */
-  handleNewMessage(conversationId, message, metadata) {
-    // Log essential message info for debugging
-    console.log('🔄 WebSocket: Processing new message', {
-      conversationId,
-      role: message?.role,
-      hasTools: Array.isArray(message?.content) ? message.content.some(b => b.type === 'tool_use') : false,
-      hasToolResults: !!message?.toolResults
-    });
-
-    // Always update the message cache for this conversation
-    const existingMessages = this.loadedMessages.get(conversationId) || [];
-    
-    
-    // Track message timing for better state transitions
-    const now = Date.now();
-    this.lastMessageTime.set(conversationId, now);
-    
-    // IMMEDIATE STATE TRANSITION based on message appearance
-    if (this.selectedConversationId === conversationId) {
-      if (message?.role === 'user') {
-        // User message just appeared - Claude immediately starts working
-        console.log('⚡ User message detected - Claude starting work immediately');
-        this.updateStateBanner(conversationId, 'Claude Code working...');
-      } else if (message?.role === 'assistant') {
-        // Assistant message appeared - analyze for specific state
-        const intelligentState = this.analyzeMessageForState(message, existingMessages);
-        console.log(`🤖 Assistant message detected - state: ${intelligentState}`);
-        this.updateStateBanner(conversationId, intelligentState);
-        
-        // No additional timeout needed - state is determined by message content
-      }
-    }
-    
-    // Check if we already have this message (avoid duplicates)
-    const messageExists = existingMessages.some(msg => 
-      msg.id === message.id || 
-      (msg.timestamp === message.timestamp && msg.role === message.role)
-    );
-    
-    if (!messageExists) {
-      // Add new message to the end
-      const updatedMessages = [...existingMessages, message];
-      this.loadedMessages.set(conversationId, updatedMessages);
-      
-      // Refresh only the conversation states to show updated status/timestamp
-      // Don't do full reload as it can interfere with message cache
-      this.updateConversationStatesOnly();
-      
-      // If this conversation is currently selected, update the messages view
-      if (this.selectedConversationId === conversationId) {
-        // Re-render messages with new message
-        this.renderCachedMessages(updatedMessages, false);
-        
-        // Auto-scroll to new message
-        this.scrollToBottom();
-      }
-      
-      // Show notification
-      this.showNewMessageNotification(message, metadata);
-    }
-  }
-
-  /**
-   * Update only conversation states without affecting pagination
-   */
-  async updateConversationStatesOnly() {
-    try {
-      const statesData = await this.dataService.getConversationStates();
-      const activeStates = statesData?.activeStates || {};
-      
-      // Update StateService with fresh states
-      this.stateService.updateConversationStates(activeStates);
-      
-      // Update states in already loaded conversations
-      this.updateConversationStateElements(activeStates);
-      
-      // Update banner if we have a selected conversation
-      if (this.selectedConversationId && activeStates[this.selectedConversationId]) {
-        this.updateStateBanner(this.selectedConversationId, activeStates[this.selectedConversationId]);
-      }
-      
-    } catch (error) {
-      console.error('Error updating conversation states:', error);
-    }
-  }
-
-  /**
-   * Analyze a message to determine intelligent conversation state
-   * @param {Object} message - The message to analyze
-   * @param {Array} existingMessages - Previous messages in conversation
-   * @returns {string} Intelligent state description
-   */
-  analyzeMessageForState(message, existingMessages = []) {
-    const role = message?.role;
-    const content = message?.content;
-    const hasToolResults = !!message?.toolResults && message.toolResults.length > 0;
-    const messageTime = new Date(message?.timestamp || Date.now());
-    const now = new Date();
-    const messageAge = (now - messageTime) / 1000; // seconds
-    
-    if (role === 'assistant') {
-      // Analyze assistant messages with enhanced logic
-      if (Array.isArray(content)) {
-        const hasToolUse = content.some(block => block.type === 'tool_use');
-        const hasText = content.some(block => block.type === 'text');
-        const textBlocks = content.filter(block => block.type === 'text');
-        const toolUseBlocks = content.filter(block => block.type === 'tool_use');
-        
-        // Enhanced tool execution detection with immediate response
-        if (hasToolUse) {
-          const toolNames = toolUseBlocks.map(tool => tool.name).join(', ');
-          
-          if (!hasToolResults) {
-            // Tool just sent - immediate execution state
-            console.log(`🔧 Tools detected: ${toolNames} - showing execution state`);
-            
-            if (toolNames.includes('bash') || toolNames.includes('edit') || toolNames.includes('write') || toolNames.includes('multiedit')) {
-              return 'Executing tools...';
-            } else if (toolNames.includes('read') || toolNames.includes('grep') || toolNames.includes('glob') || toolNames.includes('task')) {
-              return 'Analyzing code...';
-            } else if (toolNames.includes('webfetch') || toolNames.includes('websearch')) {
-              return 'Fetching data...';
-            }
-            return 'Awaiting tool response...';
-          } else {
-            // Has tool results - Claude is processing them
-            console.log(`📊 Tools completed: ${toolNames} - analyzing results`);
-            return 'Analyzing results...';
-          }
-        }
-        
-        // Enhanced text analysis
-        if (hasText) {
-          const textContent = textBlocks.map(block => block.text).join(' ').toLowerCase();
-          
-          // Working indicators
-          if (textContent.includes('let me') || 
-              textContent.includes('i\'ll') ||
-              textContent.includes('i will') ||
-              textContent.includes('i\'m going to') ||
-              textContent.includes('let\'s') ||
-              textContent.includes('first, i\'ll') ||
-              textContent.includes('now i\'ll')) {
-            return 'Claude Code working...';
-          }
-          
-          // Analysis indicators
-          if (textContent.includes('analyzing') ||
-              textContent.includes('examining') ||
-              textContent.includes('looking at') ||
-              textContent.includes('reviewing')) {
-            return 'Analyzing code...';
-          }
-          
-          // Completion indicators
-          if (textContent.includes('completed') ||
-              textContent.includes('finished') ||
-              textContent.includes('done') ||
-              textContent.includes('successfully')) {
-            return 'Task completed';
-          }
-          
-          // User input needed - enhanced detection
-          if (textContent.endsWith('?') || 
-              textContent.includes('what would you like') ||
-              textContent.includes('how can i help') ||
-              textContent.includes('would you like me to') ||
-              textContent.includes('should i') ||
-              textContent.includes('do you want') ||
-              textContent.includes('let me know') ||
-              textContent.includes('please let me know') ||
-              textContent.includes('what do you think') ||
-              textContent.includes('any questions')) {
-            return 'Waiting for your response';
-          }
-          
-          // Error/problem indicators
-          if (textContent.includes('error') ||
-              textContent.includes('failed') ||
-              textContent.includes('problem') ||
-              textContent.includes('issue')) {
-            return 'Encountered issue';
-          }
-        }
-      }
-      
-      // Recent assistant message suggests waiting for user
-      if (messageAge < 300) { // Extended to 5 minutes
-        return 'Waiting for your response';
-      }
-      
-      // Default for older assistant messages
-      return 'Idle';
-      
-    } else if (role === 'user') {
-      // User just sent a message - Claude should be processing
-      if (messageAge < 10) {
-        return 'Claude Code working...';
-      } else if (messageAge < 60) {
-        return 'Awaiting response...';
-      }
-      
-      // Older user messages suggest Claude might be working on something complex
-      return 'Processing request...';
-    }
-    
-    // Enhanced timing analysis
-    const lastMessage = existingMessages[existingMessages.length - 1];
-    if (lastMessage) {
-      const timeSinceLastMessage = Date.now() - new Date(lastMessage.timestamp).getTime();
-      
-      if (timeSinceLastMessage < 30000) { // Less than 30 seconds
-        return lastMessage.role === 'user' ? 'Claude Code working...' : 'Recently active';
-      } else if (timeSinceLastMessage < 180000) { // Less than 3 minutes
-        return 'Idle';
-      } else if (timeSinceLastMessage < 1800000) { // Less than 30 minutes
-        return 'Waiting for your response';
-      }
-    }
-    
-    return 'Inactive';
-  }
-  
-
-  /**
-   * Show console interaction panel for Yes/No prompts
-   * @param {Object} interactionData - Interaction data from Claude Code
-   */
-  showConsoleInteraction(interactionData) {
-    const panel = this.container.querySelector('#console-interaction-panel');
-    const description = this.container.querySelector('#interaction-description');
-    const prompt = this.container.querySelector('#interaction-prompt');
-    const choices = this.container.querySelector('#interaction-choices');
-    const textInput = this.container.querySelector('#interaction-text-input');
-    
-    // Show the panel
-    panel.style.display = 'block';
-    
-    // Set up the interaction content
-    if (interactionData.description) {
-      description.innerHTML = `
-        <div class="tool-action">
-          <strong>${interactionData.tool || 'Action'}:</strong>
-          <div class="tool-details">${interactionData.description}</div>
-        </div>
-      `;
-    }
-    
-    if (interactionData.prompt) {
-      prompt.textContent = interactionData.prompt;
-    }
-    
-    // Handle different interaction types
-    if (interactionData.type === 'choice' && interactionData.options) {
-      // Show multiple choice options
-      choices.style.display = 'block';
-      textInput.style.display = 'none';
-      
-      const choicesHtml = interactionData.options.map((option, index) => `
-        <label class="interaction-choice">
-          <input type="radio" name="console-choice" value="${index}" ${index === 0 ? 'checked' : ''}>
-          <span class="choice-number">${index + 1}.</span>
-          <span class="choice-text">${option}</span>
-        </label>
-      `).join('');
-      
-      choices.innerHTML = choicesHtml;
-      
-    } else if (interactionData.type === 'text') {
-      // Show text input
-      choices.style.display = 'none';
-      textInput.style.display = 'block';
-      
-      const textarea = this.container.querySelector('#console-text-input');
-      textarea.focus();
-    }
-    
-    // Store interaction data for submission
-    this.currentInteraction = interactionData;
-    
-    // Bind event listeners
-    this.bindInteractionEvents();
-  }
-
-  /**
-   * Hide console interaction panel
-   */
-  hideConsoleInteraction() {
-    const panel = this.container.querySelector('#console-interaction-panel');
-    panel.style.display = 'none';
-    this.currentInteraction = null;
-  }
-
-  /**
-   * Bind event listeners for console interaction
-   */
-  bindInteractionEvents() {
-    const submitBtn = this.container.querySelector('#interaction-submit');
-    const cancelBtn = this.container.querySelector('#interaction-cancel');
-    
-    // Remove existing listeners
-    submitBtn.replaceWith(submitBtn.cloneNode(true));
-    cancelBtn.replaceWith(cancelBtn.cloneNode(true));
-    
-    // Get fresh references
-    const newSubmitBtn = this.container.querySelector('#interaction-submit');
-    const newCancelBtn = this.container.querySelector('#interaction-cancel');
-    
-    newSubmitBtn.addEventListener('click', () => this.handleInteractionSubmit());
-    newCancelBtn.addEventListener('click', () => this.handleInteractionCancel());
-    
-    // Handle Enter key for text input
-    const textarea = this.container.querySelector('#console-text-input');
-    if (textarea) {
-      textarea.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' && e.ctrlKey) {
-          this.handleInteractionSubmit();
-        }
-      });
-    }
-  }
-
-  /**
-   * Handle interaction submission
-   */
-  async handleInteractionSubmit() {
-    if (!this.currentInteraction) return;
-    
-    let response;
-    
-    if (this.currentInteraction.type === 'choice') {
-      const selectedChoice = this.container.querySelector('input[name="console-choice"]:checked');
-      if (selectedChoice) {
-        response = {
-          type: 'choice',
-          value: parseInt(selectedChoice.value),
-          text: this.currentInteraction.options[selectedChoice.value]
-        };
-      }
-    } else if (this.currentInteraction.type === 'text') {
-      const textarea = this.container.querySelector('#console-text-input');
-      response = {
-        type: 'text',
-        value: textarea.value.trim()
-      };
-    }
-    
-    if (response) {
-      // Send response via WebSocket
-      try {
-        await this.sendConsoleResponse(this.currentInteraction.id, response);
-        console.log('🔄 WebSocket: Console interaction response sent', { id: this.currentInteraction.id, response });
-        this.hideConsoleInteraction();
-      } catch (error) {
-        console.error('Error sending console response:', error);
-        // Show error in UI
-        this.showInteractionError('Failed to send response. Please try again.');
-      }
-    }
-  }
-
-  /**
-   * Handle interaction cancellation
-   */
-  async handleInteractionCancel() {
-    if (!this.currentInteraction) return;
-    
-    try {
-      await this.sendConsoleResponse(this.currentInteraction.id, { type: 'cancel' });
-      console.log('🔄 WebSocket: Console interaction cancelled', { id: this.currentInteraction.id });
-      this.hideConsoleInteraction();
-    } catch (error) {
-      console.error('Error cancelling console interaction:', error);
-      this.hideConsoleInteraction(); // Hide anyway on cancel
-    }
-  }
-
-  /**
-   * Send console response via WebSocket
-   * @param {string} interactionId - Interaction ID
-   * @param {Object} response - Response data
-   */
-  async sendConsoleResponse(interactionId, response) {
-    // Send through DataService which will route to WebSocket
-    if (this.dataService && this.dataService.webSocketService) {
-      this.dataService.webSocketService.send({
-        type: 'console_response',
-        data: {
-          interactionId,
-          response
-        }
-      });
-    } else {
-      throw new Error('WebSocket service not available');
-    }
-  }
-
-  /**
-   * Show error in interaction panel
-   * @param {string} message - Error message
-   */
-  showInteractionError(message) {
-    const panel = this.container.querySelector('#console-interaction-panel');
-    const existingError = panel.querySelector('.interaction-error');
-    
-    if (existingError) {
-      existingError.remove();
-    }
-    
-    const errorDiv = document.createElement('div');
-    errorDiv.className = 'interaction-error';
-    errorDiv.textContent = message;
-    
-    const content = panel.querySelector('.interaction-content');
-    content.insertBefore(errorDiv, content.querySelector('.interaction-actions'));
-    
-    // Remove error after 5 seconds
-    setTimeout(() => {
-      if (errorDiv.parentNode) {
-        errorDiv.remove();
-      }
-    }, 5000);
-  }
-
-  
-  /**
-   * Update conversation state elements in the DOM
-   * @param {Object} activeStates - Active conversation states
-   */
-  updateConversationStateElements(activeStates) {
-    const conversationItems = this.container.querySelectorAll('.sidebar-conversation-item');
-    
-    conversationItems.forEach(item => {
-      const conversationId = item.dataset.id;
-      const state = activeStates[conversationId] || 'unknown';
-      const stateClass = this.getStateClass(state);
-      const stateLabel = this.getStateLabel(state);
-      
-      // Update status dot
-      const statusDot = item.querySelector('.status-dot');
-      if (statusDot) {
-        statusDot.className = `status-dot ${stateClass}`;
-      }
-      
-      // Update status badge
-      const statusBadge = item.querySelector('.sidebar-conversation-badge');
-      if (statusBadge) {
-        statusBadge.className = `sidebar-conversation-badge ${stateClass}`;
-        statusBadge.textContent = stateLabel;
-      }
-    });
-  }
-
-  /**
-   * Render the agents page structure
-   */
-  async render() {
-    this.container.innerHTML = `
-      <div class="agents-page">
-        <!-- Page Header (will be replaced by HeaderComponent) -->
-        <div id="agents-header-container"></div>
-
-        <!-- Filters Section -->
-        <div class="conversations-filters">
-          <div class="filters-row">
-            <div class="filter-group">
-              <label class="filter-label">Status:</label>
-              <select class="filter-select" id="status-filter">
-                <option value="all">All</option>
-                <option value="active">Active</option>
-                <option value="inactive">Inactive</option>
-              </select>
-            </div>
-            
-            <div class="filter-group">
-              <label class="filter-label">Time Range:</label>
-              <select class="filter-select" id="time-filter">
-                <option value="1h">Last Hour</option>
-                <option value="24h">Last 24 Hours</option>
-                <option value="7d" selected>Last 7 Days</option>
-                <option value="30d">Last 30 Days</option>
-              </select>
-            </div>
-            
-            <div class="filter-group search-group">
-              <label class="filter-label">Search:</label>
-              <div class="search-input-container">
-                <input type="text" class="filter-input search-input" id="search-filter" placeholder="Search conversations, projects, or messages...">
-                <button class="search-clear" id="clear-search" title="Clear search">×</button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Agents Section -->
-        <div class="agents-section">
-          <div class="agents-header">
-            <h4>Available Agents</h4>
-            <div class="agents-info">
-              <span class="agents-count" id="agents-count">0 agents</span>
-              <button class="refresh-agents-btn" id="refresh-agents" title="Refresh agents">
-                <span class="btn-icon">🔄</span>
-              </button>
-            </div>
-          </div>
-          
-          <div class="agents-list" id="agents-list">
-            <!-- Agent items will be rendered here -->
-          </div>
-          
-          <!-- Loading state for agents -->
-          <div class="agents-loading" id="agents-loading" style="display: none;">
-            <div class="loading-spinner"></div>
-            <span class="loading-text">Loading agents...</span>
-          </div>
-          
-          <!-- Empty state for agents -->
-          <div class="agents-empty" id="agents-empty" style="display: none;">
-            <div class="empty-icon">🤖</div>
-            <p>No agents found</p>
-            <small>Create agents in your .claude/agents directory to see them here</small>
-          </div>
-        </div>
-
-        <!-- Loading State -->
-        <div class="loading-state" id="conversations-loading" style="display: none;">
-          <div class="loading-spinner"></div>
-          <span class="loading-text">Loading conversations...</span>
-        </div>
-
-        <!-- Error State -->
-        <div class="error-state" id="conversations-error" style="display: none;">
-          <div class="error-content">
-            <span class="error-icon">⚠️</span>
-            <span class="error-message"></span>
-            <button class="error-retry" id="retry-load">Retry</button>
-          </div>
-        </div>
-
-        <!-- Console Interaction Panel (Hidden by default) -->
-        <div id="console-interaction-panel" class="console-interaction-panel" style="display: none;">
-          <div class="interaction-header">
-            <div class="interaction-title">
-              <span class="interaction-icon">⚡</span>
-              <span class="interaction-text">Claude Code needs your input</span>
-            </div>
-            <button class="interaction-close" onclick="this.hideConsoleInteraction()">&times;</button>
-          </div>
-          
-          <div class="interaction-content">
-            <div id="interaction-description" class="interaction-description">
-              <!-- Tool description will be inserted here -->
-            </div>
-            
-            <div id="interaction-prompt" class="interaction-prompt">
-              Do you want to proceed?
-            </div>
-            
-            <!-- Multi-choice options -->
-            <div id="interaction-choices" class="interaction-choices" style="display: none;">
-              <!-- Radio button choices will be inserted here -->
-            </div>
-            
-            <!-- Text input area -->
-            <div id="interaction-text-input" class="interaction-text-input" style="display: none;">
-              <label for="console-text-input">Your response:</label>
-              <textarea id="console-text-input" placeholder="Type your response here..." rows="4"></textarea>
-            </div>
-            
-            <div class="interaction-actions">
-              <button id="interaction-submit" class="interaction-btn primary">Submit</button>
-              <button id="interaction-cancel" class="interaction-btn secondary">Cancel</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Two Column Layout -->
-        <div class="conversations-layout">
-          <!-- Left Sidebar: Conversations List -->
-          <div class="conversations-sidebar">
-            <div class="sidebar-header">
-              <h3>Chats</h3>
-              <span class="conversation-count" id="sidebar-count">0</span>
-            </div>
-            <div class="conversations-list" id="conversations-list">
-              <!-- Conversation items will be rendered here -->
-            </div>
-            
-            <!-- Load More Indicator -->
-            <div class="load-more-indicator" id="load-more-indicator" style="display: none;">
-              <div class="loading-spinner"></div>
-              <span class="loading-text">Loading more conversations...</span>
-            </div>
-          </div>
-          
-          <!-- Right Panel: Messages Detail -->
-          <div class="messages-panel">
-            <div class="messages-header" id="messages-header">
-              <div class="selected-conversation-info">
-                <h3 id="selected-conversation-title">Select a chat</h3>
-                <div class="selected-conversation-meta" id="selected-conversation-meta"></div>
-              </div>
-              <div class="messages-actions">
-                <button class="action-btn-small" id="export-conversation" title="Export conversation">
-                  <span class="btn-icon-small">📁</span>
-                  Export
-                </button>
-              </div>
-            </div>
-            
-            <div class="messages-content" id="messages-content">
-              <div class="no-conversation-selected">
-                <div class="no-selection-icon">💬</div>
-                <h4>No conversation selected</h4>
-                <p>Choose a conversation from the sidebar to view its messages</p>
-              </div>
-            </div>
-            
-            <!-- Conversation State Banner -->
-            <div class="conversation-state-banner" id="conversation-state-banner" style="display: none;">
-              <div class="state-indicator">
-                <span class="state-dot" id="state-dot"></span>
-                <span class="state-text" id="state-text">Ready</span>
-              </div>
-              <div class="state-timestamp" id="state-timestamp"></div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Empty State -->
-        <div class="empty-state" id="empty-state" style="display: none;">
-          <div class="empty-content">
-            <span class="empty-icon">💬</span>
-            <h3>No conversations found</h3>
-            <p>No agent conversations match your current filters.</p>
-            <button class="empty-action" id="clear-filters">Clear Filters</button>
-          </div>
-        </div>
-      </div>
-    `;
-
-    this.bindEvents();
-    this.setupInfiniteScroll();
-    this.initializeHeaderComponent();
-  }
-
-  /**
-   * Initialize the header component
-   */
-  initializeHeaderComponent() {
-    const headerContainer = this.container.querySelector('#agents-header-container');
-    if (headerContainer && typeof HeaderComponent !== 'undefined') {
-      this.headerComponent = new HeaderComponent(headerContainer, {
-        title: 'Claude Code Chats',
-        subtitle: 'Monitor and analyze Claude Code agent interactions in real-time',
-        version: 'v1.13.2', // Fallback version
-        showVersionBadge: true,
-        showLastUpdate: true,
-        showThemeSwitch: true,
-        showGitHubLink: true,
-        dataService: this.dataService // Pass DataService for dynamic version loading
-      });
-      
-      this.headerComponent.render();
-    }
-  }
-
-  /**
-   * Initialize child components
-   */
-  async initializeComponents() {
-    // Initialize ConversationTable for detailed view if available
-    const tableContainer = this.container.querySelector('#conversations-table');
-    if (tableContainer && typeof ConversationTable !== 'undefined') {
-      try {
-        this.components.conversationTable = new ConversationTable(
-          tableContainer,
-          this.dataService,
-          this.stateService
-        );
-        await this.components.conversationTable.initialize();
-      } catch (error) {
-        console.warn('ConversationTable initialization failed:', error);
-        // Show fallback content
-        tableContainer.innerHTML = `
-          <div class="conversation-table-placeholder">
-            <p>Detailed table view not available</p>
-          </div>
-        `;
-      }
-    }
-  }
-
-  /**
-   * Bind event listeners
-   */
-  bindEvents() {
-    // Filter controls
-    const statusFilter = this.container.querySelector('#status-filter');
-    statusFilter.addEventListener('change', (e) => this.updateFilter('status', e.target.value));
-
-    const timeFilter = this.container.querySelector('#time-filter');
-    timeFilter.addEventListener('change', (e) => this.updateFilter('timeRange', e.target.value));
-
-    const searchInput = this.container.querySelector('#search-filter');
-    searchInput.addEventListener('input', (e) => this.updateFilter('search', e.target.value));
-
-    const clearSearch = this.container.querySelector('#clear-search');
-    clearSearch.addEventListener('click', () => this.clearSearch());
-
-    // Error retry
-    const retryBtn = this.container.querySelector('#retry-load');
-    if (retryBtn) {
-      retryBtn.addEventListener('click', () => this.loadConversationsData());
-    }
-
-    // Clear filters
-    const clearFiltersBtn = this.container.querySelector('#clear-filters');
-    if (clearFiltersBtn) {
-      clearFiltersBtn.addEventListener('click', () => this.clearAllFilters());
-    }
-
-
-    // Refresh agents
-    const refreshAgentsBtn = this.container.querySelector('#refresh-agents');
-    if (refreshAgentsBtn) {
-      refreshAgentsBtn.addEventListener('click', () => this.refreshAgents());
-    }
-  }
-  
-  /**
-   * Setup infinite scroll for conversations list
-   */
-  setupInfiniteScroll() {
-    const conversationsContainer = this.container.querySelector('#conversations-list');
-    if (!conversationsContainer) return;
-    
-    conversationsContainer.addEventListener('scroll', () => {
-      const { scrollTop, scrollHeight, clientHeight } = conversationsContainer;
-      const threshold = 100; // Load more when 100px from bottom
-      
-      if (scrollHeight - scrollTop - clientHeight < threshold) {
-        this.loadMoreConversations();
-      }
-    });
-  }
-  
-  /**
-   * Update loading indicator
-   * @param {boolean} isLoading - Whether to show loading indicator
-   */
-  updateLoadingIndicator(isLoading) {
-    const loadingIndicator = this.container.querySelector('#load-more-indicator');
-    if (loadingIndicator) {
-      loadingIndicator.style.display = isLoading ? 'flex' : 'none';
-    }
-  }
-
-  /**
-   * Load agents data from API
-   */
-  async loadAgentsData() {
-    try {
-      this.showAgentsLoading(true);
-      
-      const agentsData = await this.dataService.cachedFetch('/api/agents');
-      
-      if (agentsData && agentsData.agents) {
-        this.agents = agentsData.agents;
-        this.renderAgents();
-      } else {
-        this.showAgentsEmpty();
-      }
-      
-    } catch (error) {
-      console.error('Error loading agents data:', error);
-      this.showAgentsEmpty();
-    } finally {
-      this.showAgentsLoading(false);
-    }
-  }
-
-  /**
-   * Render global agents in the agents list (user-level only)
-   */
-  renderAgents() {
-    const agentsList = this.container.querySelector('#agents-list');
-    const agentsCount = this.container.querySelector('#agents-count');
-    
-    if (!agentsList || !agentsCount) return;
-    
-    // Filter only global/user agents for main section
-    const globalAgents = this.agents.filter(agent => agent.level === 'user');
-    
-    if (globalAgents.length === 0) {
-      this.showAgentsEmpty();
-      return;
-    }
-    
-    // Update count for global agents only
-    agentsCount.textContent = `${globalAgents.length} global agent${globalAgents.length !== 1 ? 's' : ''}`;
-    
-    // Render global agent items (compact rectangles)
-    const agentsHTML = globalAgents.map(agent => {
-      const levelBadge = agent.level === 'project' ? 'P' : 'U';
-      
-      return `
-        <div class="agent-item" data-agent-id="${agent.name}">
-          <div class="agent-dot" style="background-color: ${agent.color}"></div>
-          <span class="agent-name">${agent.name}</span>
-          <span class="agent-level-badge ${agent.level}" title="${agent.level === 'project' ? 'Project Agent' : 'User Agent'}">${levelBadge}</span>
-        </div>
-      `;
-    }).join('');
-    
-    agentsList.innerHTML = agentsHTML;
-    
-    // Hide empty state and show list
-    this.hideAgentsEmpty();
-    agentsList.style.display = 'block';
-    
-    // Bind agent events
-    this.bindAgentEvents();
-  }
-
-  /**
-   * Bind events for agent items
-   */
-  bindAgentEvents() {
-    const agentItems = this.container.querySelectorAll('.agent-item');
-    
-    agentItems.forEach(item => {
-      item.addEventListener('click', () => {
-        const agentId = item.dataset.agentId;
-        this.selectAgent(agentId);
-      });
-    });
-  }
-
-  /**
-   * Select an agent (opens modal with details)
-   * @param {string} agentId - Agent ID
-   */
-  selectAgent(agentId) {
-    const agent = this.agents.find(a => a.name === agentId);
-    if (agent) {
-      this.openAgentModal(agent);
-    }
-  }
-
-  /**
-   * Open agent details modal
-   * @param {Object} agent - Agent object
-   */
-  openAgentModal(agent) {
-    // If this is a specific tool, open the custom tool modal
-    if (agent.isToolDetails) {
-      this.openToolModal(agent);
-      return;
-    }
-
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal">
-          <div class="agent-modal-header">
-            <div class="agent-modal-title">
-              <div class="agent-title-main">
-                <div class="agent-dot" style="background-color: ${agent.color}"></div>
-                <div class="agent-title-info">
-                  <h3>${agent.name}</h3>
-                  <div class="agent-subtitle">
-                    <span class="agent-level-badge ${agent.level}">${agent.level === 'project' ? 'Project Agent' : 'User Agent'}</span>
-                    ${agent.projectName ? `<span class="agent-project-name">• ${agent.projectName}</span>` : ''}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-          </div>
-          
-          <div class="agent-modal-content">
-            <div class="agent-info-section">
-              <h4>Description</h4>
-              <p>${agent.description}</p>
-            </div>
-            
-            ${agent.projectName ? `
-              <div class="agent-info-section">
-                <h4>Project</h4>
-                <p>${agent.projectName}</p>
-              </div>
-            ` : ''}
-            
-            <div class="agent-info-section">
-              <h4>Tools Access</h4>
-              <p>${agent.tools && agent.tools.length > 0 
-                ? `Has access to: ${agent.tools.join(', ')}` 
-                : 'Has access to all available tools'}</p>
-            </div>
-            
-            <div class="agent-info-section">
-              <h4>System Prompt</h4>
-              <div class="agent-system-prompt">${agent.systemPrompt ? agent.systemPrompt.replace(/\n/g, '<br>') : 'No system prompt available'}</div>
-            </div>
-            
-            <div class="agent-usage-tips">
-              <h4>💡 How to Use This Agent</h4>
-              <div class="usage-tips-content">
-                <p><strong>To invoke this agent explicitly:</strong></p>
-                <code class="usage-example">Use the ${agent.name} agent to [describe your request]</code>
-                
-                <p><strong>Alternative ways to invoke:</strong></p>
-                <ul>
-                  <li><code>Ask the ${agent.name} agent to [task]</code></li>
-                  <li><code>Have the ${agent.name} agent [action]</code></li>
-                  <li><code>Let the ${agent.name} agent handle [request]</code></li>
-                </ul>
-                
-                <p><strong>Best practices:</strong></p>
-                <ul>
-                  <li>Be specific about what you want the agent to do</li>
-                  <li>Provide context when needed</li>
-                  <li>The agent will automatically use appropriate tools</li>
-                </ul>
-              </div>
-            </div>
-            
-            <div class="agent-metadata">
-              <small><strong>File:</strong> ${agent.filePath}</small><br>
-              <small><strong>Last modified:</strong> ${new Date(agent.lastModified).toLocaleString()}</small>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close - store reference for cleanup
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-  }
-
-  /**
-   * Open tool-specific modal for any tool
-   * @param {Object} toolData - Tool data object
-   */
-  openToolModal(toolData) {
-    switch (toolData.name) {
-      case 'Read':
-        this.openReadToolModal(toolData);
-        break;
-      case 'Edit':
-        this.openEditToolModal(toolData);
-        break;
-      case 'Write':
-        this.openWriteToolModal(toolData);
-        break;
-      case 'Bash':
-        this.openBashToolModal(toolData);
-        break;
-      case 'Glob':
-        this.openGlobToolModal(toolData);
-        break;
-      case 'Grep':
-        this.openGrepToolModal(toolData);
-        break;
-      case 'TodoWrite':
-        this.openTodoWriteToolModal(toolData);
-        break;
-      default:
-        // Fallback to generic agent modal for unknown tools
-        this.openAgentModal({...toolData, isToolDetails: false});
-        break;
-    }
-  }
-
-  /**
-   * Open Read tool specific modal
-   * @param {Object} readToolData - Read tool data
-   */
-  openReadToolModal(readToolData) {
-    const input = readToolData.input || {};
-    const filePath = input.file_path || 'Unknown file';
-    const fileName = filePath.split('/').pop() || 'Unknown';
-    const fileExtension = fileName.includes('.') ? fileName.split('.').pop().toLowerCase() : 'txt';
-    const offset = input.offset;
-    const limit = input.limit;
-    const toolId = readToolData.id || 'unknown';
-    
-    // Analyze file context for project
-    const isConfigFile = ['json', 'yml', 'yaml', 'toml', 'ini', 'conf', 'config'].includes(fileExtension);
-    const isDocFile = ['md', 'txt', 'rst', 'adoc'].includes(fileExtension);
-    const isCodeFile = ['js', 'ts', 'py', 'go', 'rs', 'java', 'cpp', 'c', 'h', 'css', 'html', 'jsx', 'tsx'].includes(fileExtension);
-    const isProjectRoot = fileName.toLowerCase().includes('claude') || fileName.toLowerCase().includes('readme') || fileName.toLowerCase().includes('package');
-    const isTestFile = fileName.toLowerCase().includes('test') || fileName.toLowerCase().includes('spec');
-    
-    let fileCategory = '';
-    let filePurpose = '';
-    let contextIcon = '📄';
-    
-    if (isProjectRoot) {
-      fileCategory = 'Project Documentation';
-      filePurpose = 'Understanding project structure and setup';
-      contextIcon = '📋';
-    } else if (fileName.toLowerCase().includes('claude')) {
-      fileCategory = 'Claude Configuration';
-      filePurpose = 'Reading project instructions for AI assistant';
-      contextIcon = '🤖';
-    } else if (isConfigFile) {
-      fileCategory = 'Configuration File';
-      filePurpose = 'Understanding project settings and dependencies';
-      contextIcon = '⚙️';
-    } else if (isDocFile) {
-      fileCategory = 'Documentation';
-      filePurpose = 'Reading project documentation or specifications';
-      contextIcon = '📚';
-    } else if (isTestFile) {
-      fileCategory = 'Test File';
-      filePurpose = 'Analyzing test cases and specifications';
-      contextIcon = '🧪';
-    } else if (isCodeFile) {
-      fileCategory = 'Source Code';
-      filePurpose = 'Analyzing implementation and logic';
-      contextIcon = '💻';
-    } else {
-      fileCategory = 'Project File';
-      filePurpose = 'Reading project-related content';
-      contextIcon = '📄';
-    }
-    
-    // Get directory context
-    const pathParts = filePath.split('/');
-    const projectContext = pathParts.includes('claude-code-templates') ? 'Claude Code Templates Project' : 'Current Project';
-    const relativeDir = pathParts.slice(-3, -1).join('/') || 'root';
-    
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal read-tool-modal">
-          <div class="agent-modal-header">
-            <div class="agent-modal-title">
-              <div class="agent-title-main">
-                <div class="tool-icon read-tool">
-                  <span style="font-size: 20px;">${contextIcon}</span>
-                </div>
-                <div class="agent-title-info">
-                  <h3>File Read: ${fileName}</h3>
-                  <div class="agent-subtitle">
-                    <span class="tool-type-badge">${fileCategory}</span>
-                    <span class="tool-id-badge">ID: ${toolId.slice(-8)}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-          </div>
-          
-          <div class="agent-modal-content">
-            <div class="raw-parameters-section primary-section">
-              <h4>🔧 Tool Parameters</h4>
-              <div class="raw-params-container">
-                <pre class="raw-params-json">${JSON.stringify(input, null, 2)}</pre>
-              </div>
-              <div class="params-summary">
-                <span class="param-chip">Tool ID: ${toolId.slice(-8)}</span>
-                <span class="param-chip">File: ${fileName}</span>
-                ${offset ? `<span class="param-chip">From line: ${offset}</span>` : ''}
-                ${limit ? `<span class="param-chip">Lines: ${limit}</span>` : '<span class="param-chip">Complete file</span>'}
-              </div>
-            </div>
-
-            <div class="read-operation-section">
-              <h4>📖 Read Operation Details</h4>
-              <div class="operation-details">
-                <div class="operation-item">
-                  <span class="operation-label">Full Path:</span>
-                  <code class="operation-value">${filePath}</code>
-                </div>
-                ${offset ? `
-                  <div class="operation-item">
-                    <span class="operation-label">Starting Line:</span>
-                    <code class="operation-value">${offset}</code>
-                  </div>
-                ` : `
-                  <div class="operation-item">
-                    <span class="operation-label">Read Scope:</span>
-                    <code class="operation-value">From beginning</code>
-                  </div>
-                `}
-                ${limit ? `
-                  <div class="operation-item">
-                    <span class="operation-label">Lines Read:</span>
-                    <code class="operation-value">${limit} lines</code>
-                  </div>
-                ` : `
-                  <div class="operation-item">
-                    <span class="operation-label">Read Scope:</span>
-                    <code class="operation-value">Complete file</code>
-                  </div>
-                `}
-                <div class="operation-item">
-                  <span class="operation-label">Tool ID:</span>
-                  <code class="operation-value">${toolId}</code>
-                </div>
-              </div>
-            </div>
-
-
-            <div class="file-insights-section">
-              <h4>📊 File Insights</h4>
-              <div class="insights-grid">
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">${contextIcon}</span>
-                    <span class="insight-title">File Classification</span>
-                  </div>
-                  <div class="insight-content">${fileCategory}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">📍</span>
-                    <span class="insight-title">Location Context</span>
-                  </div>
-                  <div class="insight-content">${relativeDir}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">🎯</span>
-                    <span class="insight-title">Read Strategy</span>
-                  </div>
-                  <div class="insight-content">${offset && limit ? `Partial read (${limit} lines from ${offset})` : limit ? `Limited read (${limit} lines)` : offset ? `From line ${offset}` : 'Complete file'}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">🚀</span>
-                    <span class="insight-title">Project Impact</span>
-                  </div>
-                  <div class="insight-content">${filePurpose}</div>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close - store reference for cleanup
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-  }
-
-  /**
-   * Open Edit tool specific modal
-   * @param {Object} editToolData - Edit tool data
-   */
-  openEditToolModal(editToolData) {
-    const input = editToolData.input || {};
-    const filePath = input.file_path || 'Unknown file';
-    const fileName = filePath.split('/').pop() || 'Unknown';
-    const oldString = input.old_string || '';
-    const newString = input.new_string || '';
-    const replaceAll = input.replace_all || false;
-    const toolId = editToolData.id || 'unknown';
-    
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal edit-tool-modal">
-          <div class="agent-modal-header">
-            <div class="agent-modal-title">
-              <div class="agent-title-main">
-                <div class="tool-icon edit-tool">
-                  <span style="font-size: 20px;">✏️</span>
-                </div>
-                <div class="agent-title-info">
-                  <h3>File Edit: ${fileName}</h3>
-                  <div class="agent-subtitle">
-                    <span class="tool-type-badge">File Modification</span>
-                    <span class="tool-id-badge">ID: ${toolId.slice(-8)}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-          </div>
-          
-          <div class="agent-modal-content">
-            <div class="raw-parameters-section primary-section">
-              <h4>🔧 Tool Parameters</h4>
-              <div class="raw-params-container">
-                <pre class="raw-params-json">${JSON.stringify(input, null, 2)}</pre>
-              </div>
-              <div class="params-summary">
-                <span class="param-chip">Tool ID: ${toolId.slice(-8)}</span>
-                <span class="param-chip">File: ${fileName}</span>
-                <span class="param-chip">Replace All: ${replaceAll ? 'Yes' : 'No'}</span>
-                <span class="param-chip">Change Size: ${oldString.length} → ${newString.length} chars</span>
-              </div>
-            </div>
-
-            <div class="edit-changes-section">
-              <div class="diff-header-section">
-                <h4>📝 Edit Diff</h4>
-                <div class="diff-mode-toggle">
-                  <button class="diff-mode-btn active" data-mode="lines" onclick="window.switchDiffMode('lines', this)">
-                    <span>📋</span> By Lines
-                  </button>
-                  <button class="diff-mode-btn" data-mode="compact" onclick="window.switchDiffMode('compact', this)">
-                    <span>🔍</span> Smart Diff
-                  </button>
-                </div>
-              </div>
-              <div class="diff-container" id="diff-container">
-                ${this.generateDiffView(oldString, newString, 'lines')}
-              </div>
-            </div>
-
-
-            <div class="file-insights-section">
-              <h4>📊 Edit Insights</h4>
-              <div class="insights-grid">
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">📄</span>
-                    <span class="insight-title">Target File</span>
-                  </div>
-                  <div class="insight-content">${fileName}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">📏</span>
-                    <span class="insight-title">Content Change</span>
-                  </div>
-                  <div class="insight-content">${oldString.length > newString.length ? 'Reduced' : oldString.length < newString.length ? 'Expanded' : 'Same'} (${newString.length - oldString.length > 0 ? '+' : ''}${newString.length - oldString.length} chars)</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">🔄</span>
-                    <span class="insight-title">Replace Mode</span>
-                  </div>
-                  <div class="insight-content">${replaceAll ? 'All Occurrences' : 'First Occurrence'}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">🎯</span>
-                    <span class="insight-title">Edit Type</span>
-                  </div>
-                  <div class="insight-content">${oldString.length === 0 ? 'Addition' : newString.length === 0 ? 'Deletion' : 'Modification'}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-    
-    // Store the tool data for mode switching
-    window.currentEditData = { oldString, newString };
-    
-    // Add global function for diff mode switching
-    const self = this;
-    window.switchDiffMode = function(mode, button) {
-      // Update button states
-      document.querySelectorAll('.diff-mode-btn').forEach(btn => btn.classList.remove('active'));
-      button.classList.add('active');
-      
-      // Update diff content
-      const container = document.getElementById('diff-container');
-      if (container && window.currentEditData) {
-        container.innerHTML = self.generateDiffView(
-          window.currentEditData.oldString, 
-          window.currentEditData.newString, 
-          mode
-        );
-      }
-    };
-  }
-
-  /**
-   * Generate diff view for edit changes
-   * @param {string} oldText - Original text
-   * @param {string} newText - New text
-   * @param {string} mode - 'lines' or 'compact'
-   * @returns {string} HTML diff view
-   */
-  generateDiffView(oldText, newText, mode = 'lines') {
-    if (mode === 'compact') {
-      return this.generateSmartDiff(oldText, newText);
-    }
-    
-    // Split text into lines for better diff visualization
-    const oldLines = oldText.split('\n');
-    const newLines = newText.split('\n');
-    
-    // Limit lines for display (show first 20 lines max)
-    const maxLines = 20;
-    const oldDisplay = oldLines.slice(0, maxLines);
-    const newDisplay = newLines.slice(0, maxLines);
-    const oldTruncated = oldLines.length > maxLines;
-    const newTruncated = newLines.length > maxLines;
-    
-    let diffHtml = '<div class="diff-editor">';
-    
-    // Header with file info
-    diffHtml += `
-      <div class="diff-header">
-        <span class="diff-stats">-${oldLines.length} lines, +${newLines.length} lines</span>
-      </div>
-    `;
-    
-    // Old text (removed lines)
-    if (oldDisplay.length > 0) {
-      diffHtml += '<div class="diff-section removed">';
-      oldDisplay.forEach((line) => {
-        diffHtml += `
-          <div class="diff-line removed-line">
-            <span class="line-prefix">-</span>
-            <span class="line-content">${this.escapeHtml(line) || ' '}</span>
-          </div>
-        `;
-      });
-      if (oldTruncated) {
-        diffHtml += `
-          <div class="diff-line truncated">
-            <span class="line-prefix"></span>
-            <span class="line-content">... ${oldLines.length - maxLines} more lines ...</span>
-          </div>
-        `;
-      }
-      diffHtml += '</div>';
-    }
-    
-    // New text (added lines)
-    if (newDisplay.length > 0) {
-      diffHtml += '<div class="diff-section added">';
-      newDisplay.forEach((line) => {
-        diffHtml += `
-          <div class="diff-line added-line">
-            <span class="line-prefix">+</span>
-            <span class="line-content">${this.escapeHtml(line) || ' '}</span>
-          </div>
-        `;
-      });
-      if (newTruncated) {
-        diffHtml += `
-          <div class="diff-line truncated">
-            <span class="line-prefix"></span>
-            <span class="line-content">... ${newLines.length - maxLines} more lines ...</span>
-          </div>
-        `;
-      }
-      diffHtml += '</div>';
-    }
-    
-    diffHtml += '</div>';
-    
-    return diffHtml;
-  }
-
-  /**
-   * Generate smart diff that shows only changed sections
-   * @param {string} oldText - Original text
-   * @param {string} newText - New text
-   * @returns {string} HTML smart diff view
-   */
-  generateSmartDiff(oldText, newText) {
-    const oldLines = oldText.split('\n');
-    const newLines = newText.split('\n');
-    
-    // Find differences using simple line-by-line comparison
-    const changes = this.findLineChanges(oldLines, newLines);
-    
-    let diffHtml = '<div class="diff-editor smart-diff">';
-    
-    // Header with file info
-    diffHtml += `
-      <div class="diff-header">
-        <span class="diff-stats">Smart diff showing ${changes.length} change block${changes.length !== 1 ? 's' : ''}</span>
-      </div>
-    `;
-    
-    if (changes.length === 0) {
-      diffHtml += `
-        <div class="no-changes">
-          <span class="no-changes-text">No line-level changes detected (whitespace or formatting only)</span>
-        </div>
-      `;
-    } else {
-      changes.forEach((change, index) => {
-        diffHtml += `<div class="change-block" data-change-index="${index}">`;
-        
-        // Show removed lines
-        if (change.removed.length > 0) {
-          change.removed.forEach(line => {
-            diffHtml += `
-              <div class="diff-line removed-line smart">
-                <span class="line-prefix">-</span>
-                <span class="line-content">${this.escapeHtml(line) || ' '}</span>
-              </div>
-            `;
-          });
-        }
-        
-        // Show added lines
-        if (change.added.length > 0) {
-          change.added.forEach(line => {
-            diffHtml += `
-              <div class="diff-line added-line smart">
-                <span class="line-prefix">+</span>
-                <span class="line-content">${this.escapeHtml(line) || ' '}</span>
-              </div>
-            `;
-          });
-        }
-        
-        diffHtml += '</div>';
-        
-        // Add separator between change blocks (except for the last one)
-        if (index < changes.length - 1) {
-          diffHtml += '<div class="change-separator">⋯</div>';
-        }
-      });
-    }
-    
-    diffHtml += '</div>';
-    
-    return diffHtml;
-  }
-
-  /**
-   * Find line changes between old and new text
-   * @param {string[]} oldLines - Original lines
-   * @param {string[]} newLines - New lines
-   * @returns {Array} Array of change blocks
-   */
-  findLineChanges(oldLines, newLines) {
-    const changes = [];
-    
-    // Simple approach: if texts are different, show both
-    // This can be enhanced with more sophisticated diff algorithms
-    if (oldLines.join('\n') !== newLines.join('\n')) {
-      // For now, treat as one big change block
-      // This could be enhanced to find actual line-by-line differences
-      changes.push({
-        removed: oldLines.slice(0, 10), // Limit to first 10 lines
-        added: newLines.slice(0, 10)    // Limit to first 10 lines
-      });
-    }
-    
-    return changes;
-  }
-
-  /**
-   * Open Write tool specific modal
-   * @param {Object} writeToolData - Write tool data
-   */
-  openWriteToolModal(writeToolData) {
-    const input = writeToolData.input || {};
-    const filePath = input.file_path || 'Unknown file';
-    const fileName = filePath.split('/').pop() || 'Unknown';
-    const fileExtension = fileName.includes('.') ? fileName.split('.').pop().toLowerCase() : 'txt';
-    const content = input.content || '';
-    const toolId = writeToolData.id || 'unknown';
-    
-    // Analyze file context
-    const isConfigFile = ['json', 'yml', 'yaml', 'toml', 'ini', 'conf', 'config'].includes(fileExtension);
-    const isDocFile = ['md', 'txt', 'rst', 'adoc'].includes(fileExtension);
-    const isCodeFile = ['js', 'ts', 'py', 'go', 'rs', 'java', 'cpp', 'c', 'h', 'css', 'html', 'jsx', 'tsx'].includes(fileExtension);
-    const isProjectRoot = fileName.toLowerCase().includes('claude') || fileName.toLowerCase().includes('readme') || fileName.toLowerCase().includes('package');
-    
-    let fileCategory = '';
-    let contextIcon = '📝';
-    
-    if (isProjectRoot) {
-      fileCategory = 'Project Documentation';
-      contextIcon = '📋';
-    } else if (fileName.toLowerCase().includes('claude')) {
-      fileCategory = 'Claude Configuration';
-      contextIcon = '🤖';
-    } else if (isConfigFile) {
-      fileCategory = 'Configuration File';
-      contextIcon = '⚙️';
-    } else if (isDocFile) {
-      fileCategory = 'Documentation';
-      contextIcon = '📚';
-    } else if (isCodeFile) {
-      fileCategory = 'Source Code';
-      contextIcon = '💻';
-    } else {
-      fileCategory = 'Project File';
-      contextIcon = '📝';
-    }
-    
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal write-tool-modal">
-          <div class="agent-modal-header">
-            <div class="agent-modal-title">
-              <div class="agent-title-main">
-                <div class="tool-icon write-tool">
-                  <span style="font-size: 20px;">${contextIcon}</span>
-                </div>
-                <div class="agent-title-info">
-                  <h3>File Creation: ${fileName}</h3>
-                  <div class="agent-subtitle">
-                    <span class="tool-type-badge">${fileCategory}</span>
-                    <span class="tool-id-badge">ID: ${toolId.slice(-8)}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-          </div>
-          
-          <div class="agent-modal-content">
-            <div class="raw-parameters-section primary-section">
-              <h4>🔧 Tool Parameters</h4>
-              <div class="raw-params-container">
-                <pre class="raw-params-json">${JSON.stringify(input, null, 2)}</pre>
-              </div>
-              <div class="params-summary">
-                <span class="param-chip">Tool ID: ${toolId.slice(-8)}</span>
-                <span class="param-chip">File: ${fileName}</span>
-                <span class="param-chip">Size: ${content.length} characters</span>
-                <span class="param-chip">Type: ${fileExtension.toUpperCase()}</span>
-              </div>
-            </div>
-
-            <div class="file-content-section">
-              <div class="content-header-section">
-                <h4>📄 File Content Preview</h4>
-                <div class="content-stats">
-                  <span class="content-stat">${content.split('\\n').length} lines</span>
-                  <span class="content-stat">${content.length} chars</span>
-                  <span class="content-stat">${Math.round(content.length / 1024 * 100) / 100} KB</span>
-                </div>
-              </div>
-              <div class="content-preview-container">
-                <pre class="content-preview">${this.escapeHtml(content.substring(0, 1000))}${content.length > 1000 ? '\\n\\n... [truncated, showing first 1000 characters]' : ''}</pre>
-              </div>
-            </div>
-
-
-            <div class="file-insights-section">
-              <h4>📊 Creation Insights</h4>
-              <div class="insights-grid">
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">${contextIcon}</span>
-                    <span class="insight-title">File Type</span>
-                  </div>
-                  <div class="insight-content">${fileCategory}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">📏</span>
-                    <span class="insight-title">Content Size</span>
-                  </div>
-                  <div class="insight-content">${content.length} characters</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">📊</span>
-                    <span class="insight-title">Structure</span>
-                  </div>
-                  <div class="insight-content">${content.split('\\n').length} lines</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">🚀</span>
-                    <span class="insight-title">Purpose</span>
-                  </div>
-                  <div class="insight-content">${content.length === 0 ? 'Empty file' : content.length < 100 ? 'Simple file' : content.length < 1000 ? 'Medium file' : 'Large file'}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-  }
-
-  /**
-   * Open Glob tool specific modal
-   * @param {Object} globToolData - Glob tool data
-   */
-  openGlobToolModal(globToolData) {
-    console.log('🔍 Opening Glob tool modal with data:', globToolData);
-    
-    if (!globToolData || !globToolData.input) {
-      console.warn('⚠️ Glob tool data missing or invalid');
-      return;
-    }
-
-    // Extract Glob parameters
-    const pattern = globToolData.input.pattern || '';
-    const searchPath = globToolData.input.path || '(current directory)';
-    
-    // Categorize glob pattern
-    let patternType = 'General';
-    let patternDescription = 'File pattern search';
-    
-    if (pattern.includes('**')) {
-      patternType = 'Recursive';
-      patternDescription = 'Deep directory search with recursive matching';
-    } else if (pattern.includes('*')) {
-      patternType = 'Wildcard';
-      patternDescription = 'Basic wildcard pattern matching';
-    } else if (pattern.includes('.')) {
-      patternType = 'Extension';
-      patternDescription = 'File extension filtering';
-    } else if (pattern.includes('/')) {
-      patternType = 'Path-based';
-      patternDescription = 'Directory structure pattern';
-    }
-
-    // Detect pattern specifics
-    const isJavaScript = pattern.includes('.js') || pattern.includes('.ts') || pattern.includes('.jsx') || pattern.includes('.tsx');
-    const isStyles = pattern.includes('.css') || pattern.includes('.scss') || pattern.includes('.sass');
-    const isMarkdown = pattern.includes('.md') || pattern.includes('.mdx');
-    const isConfig = pattern.includes('config') || pattern.includes('.json') || pattern.includes('.yml') || pattern.includes('.yaml');
-    
-    let projectContext = '';
-    if (isJavaScript) projectContext = 'JavaScript/TypeScript files';
-    else if (isStyles) projectContext = 'Stylesheet files';
-    else if (isMarkdown) projectContext = 'Documentation files';
-    else if (isConfig) projectContext = 'Configuration files';
-    else projectContext = 'General file search';
-
-    const modalContent = `
-      <div class="agent-modal-header">
-        <div class="agent-modal-title">
-          <div class="agent-title-main">
-            <div class="tool-icon glob-tool">
-              <span style="font-size: 20px;">🔍</span>
-            </div>
-            <div class="agent-title-info">
-              <h3>Glob Pattern: ${this.escapeHtml(pattern)}</h3>
-              <div class="agent-subtitle">
-                <span class="tool-type-badge">${patternType}</span>
-                <span class="tool-id-badge">ID: ${globToolData.id ? globToolData.id.slice(-8) : 'unknown'}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-      </div>
-      
-      <div class="agent-modal-content">
-        <!-- Primary Section: Tool Parameters -->
-        <div class="raw-parameters-section primary-section">
-          <h4>🔧 Tool Parameters</h4>
-          <div class="raw-params-container">
-            <pre class="raw-params-json">${this.escapeHtml(JSON.stringify(globToolData.input, null, 2))}</pre>
-          </div>
-        </div>
-
-        <!-- Pattern Analysis -->
-        <div class="glob-pattern-section">
-          <h4>🎯 Pattern Analysis</h4>
-          <div class="tool-details-grid">
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Search Pattern:</span>
-              <span class="tool-detail-value pattern-display">${this.escapeHtml(pattern)}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Pattern Type:</span>
-              <span class="tool-detail-value">${patternType}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Description:</span>
-              <span class="tool-detail-value">${patternDescription}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Search Location:</span>
-              <span class="tool-detail-value">${this.escapeHtml(searchPath)}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Target Files:</span>
-              <span class="tool-detail-value">${projectContext}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Pattern Breakdown -->
-        <div class="glob-components-section">
-          <h4>🧩 Pattern Components</h4>
-          <div class="pattern-breakdown">
-            ${this.analyzeGlobPattern(pattern)}
-          </div>
-        </div>
-
-        <!-- File Discovery Insights -->
-        <div class="glob-insights-section">
-          <h4>📊 Discovery Insights</h4>
-          <div class="tool-insights">
-            <div class="insight-item">
-              <span class="insight-label">Scope:</span>
-              <span class="insight-value">${pattern.includes('**') ? 'Recursive (all subdirectories)' : 'Current level only'}</span>
-            </div>
-            <div class="insight-item">
-              <span class="insight-label">Efficiency:</span>
-              <span class="insight-value">${pattern.length > 20 ? 'Complex pattern (slower)' : 'Simple pattern (fast)'}</span>
-            </div>
-            <div class="insight-item">
-              <span class="insight-label">Match Strategy:</span>
-              <span class="insight-value">${pattern.includes('*') ? 'Wildcard matching' : 'Exact pattern'}</span>
-            </div>
-            <div class="insight-item">
-              <span class="insight-label">File Context:</span>
-              <span class="insight-value">${projectContext}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal glob-tool-modal">
-          ${modalContent}
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close - store reference for cleanup
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-  }
-
-  /**
-   * Analyze glob pattern components
-   * @param {string} pattern - Glob pattern to analyze
-   * @returns {string} HTML breakdown of pattern
-   */
-  analyzeGlobPattern(pattern) {
-    if (!pattern) return '<span class="pattern-empty">No pattern specified</span>';
-    
-    const components = [];
-    const parts = pattern.split('/');
-    
-    parts.forEach((part, index) => {
-      let description = '';
-      let type = 'literal';
-      
-      if (part === '**') {
-        description = 'Recursive directory wildcard (matches any nested path)';
-        type = 'recursive';
-      } else if (part.includes('*')) {
-        if (part === '*') {
-          description = 'Match any single directory or filename';
-          type = 'wildcard';
-        } else if (part.startsWith('*.')) {
-          description = `Match files with ${part.substring(2)} extension`;
-          type = 'extension';
-        } else {
-          description = 'Partial wildcard match';
-          type = 'partial-wildcard';
-        }
-      } else if (part.includes('?')) {
-        description = 'Single character wildcard';
-        type = 'char-wildcard';
-      } else if (part.includes('[') && part.includes(']')) {
-        description = 'Character class match';
-        type = 'char-class';
-      } else if (part) {
-        description = 'Literal directory/filename';
-        type = 'literal';
-      }
-      
-      if (part) {
-        components.push(`
-          <div class="pattern-component ${type}">
-            <code class="pattern-part">${this.escapeHtml(part)}</code>
-            <span class="pattern-desc">${description}</span>
-          </div>
-        `);
-      }
-    });
-    
-    return components.length > 0 ? components.join('') : '<span class="pattern-empty">Empty pattern</span>';
-  }
-
-  /**
-   * Open Grep tool specific modal
-   * @param {Object} grepToolData - Grep tool data
-   */
-  openGrepToolModal(grepToolData) {
-    console.log('🔍 Opening Grep tool modal with data:', grepToolData);
-    
-    if (!grepToolData || !grepToolData.input) {
-      console.warn('⚠️ Grep tool data missing or invalid');
-      return;
-    }
-
-    // Extract Grep parameters
-    const pattern = grepToolData.input.pattern || '';
-    const searchPath = grepToolData.input.path || '(current directory)';
-    const outputMode = grepToolData.input.output_mode || 'files_with_matches';
-    const glob = grepToolData.input.glob || '';
-    const type = grepToolData.input.type || '';
-    const caseInsensitive = grepToolData.input['-i'] || false;
-    const contextBefore = grepToolData.input['-B'] || 0;
-    const contextAfter = grepToolData.input['-A'] || 0;
-    const contextAround = grepToolData.input['-C'] || 0;
-    const showLineNumbers = grepToolData.input['-n'] || false;
-    const multiline = grepToolData.input.multiline || false;
-    
-    // Analyze search pattern
-    let patternType = 'Literal';
-    let patternComplexity = 'Simple';
-    let searchScope = 'Text content';
-    
-    // Detect regex patterns
-    if (pattern.includes('.*') || pattern.includes('.+') || pattern.includes('\\w') || pattern.includes('\\d')) {
-      patternType = 'Regular Expression';
-      patternComplexity = 'Complex';
-    } else if (pattern.includes('*') || pattern.includes('?') || pattern.includes('[') || pattern.includes(']')) {
-      patternType = 'Wildcard Pattern';
-      patternComplexity = 'Moderate';
-    }
-    
-    // Detect specific search types
-    if (pattern.includes('function') || pattern.includes('class') || pattern.includes('import')) {
-      searchScope = 'Code structure';
-    } else if (pattern.includes('TODO') || pattern.includes('FIXME') || pattern.includes('NOTE')) {
-      searchScope = 'Code comments';
-    } else if (pattern.includes('error') || pattern.includes('Error') || pattern.includes('exception')) {
-      searchScope = 'Error handling';
-    } else if (pattern.includes('test') || pattern.includes('spec') || pattern.includes('describe')) {
-      searchScope = 'Test code';
-    }
-    
-    // File type analysis
-    let fileContext = 'All files';
-    if (type) {
-      switch (type) {
-        case 'js': fileContext = 'JavaScript files'; break;
-        case 'ts': fileContext = 'TypeScript files'; break;
-        case 'py': fileContext = 'Python files'; break;
-        case 'go': fileContext = 'Go files'; break;
-        case 'rust': fileContext = 'Rust files'; break;
-        case 'java': fileContext = 'Java files'; break;
-        case 'css': fileContext = 'CSS files'; break;
-        case 'html': fileContext = 'HTML files'; break;
-        case 'md': fileContext = 'Markdown files'; break;
-        default: fileContext = `${type} files`; break;
-      }
-    } else if (glob) {
-      if (glob.includes('*.js') || glob.includes('*.ts')) fileContext = 'JavaScript/TypeScript files';
-      else if (glob.includes('*.py')) fileContext = 'Python files';
-      else if (glob.includes('*.md')) fileContext = 'Documentation files';
-      else if (glob.includes('*.css') || glob.includes('*.scss')) fileContext = 'Stylesheet files';
-      else fileContext = `Files matching "${glob}"`;
-    }
-
-    const modalContent = `
-      <div class="agent-modal-header">
-        <div class="agent-modal-title">
-          <div class="agent-title-main">
-            <div class="tool-icon grep-tool">
-              <span style="font-size: 20px;">🔍</span>
-            </div>
-            <div class="agent-title-info">
-              <h3>Grep Search: ${this.escapeHtml(pattern)}</h3>
-              <div class="agent-subtitle">
-                <span class="tool-type-badge">${patternType}</span>
-                <span class="tool-id-badge">ID: ${grepToolData.id ? grepToolData.id.slice(-8) : 'unknown'}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-      </div>
-      
-      <div class="agent-modal-content">
-        <!-- Primary Section: Tool Parameters -->
-        <div class="raw-parameters-section primary-section">
-          <h4>🔧 Tool Parameters</h4>
-          <div class="raw-params-container">
-            <pre class="raw-params-json">${this.escapeHtml(JSON.stringify(grepToolData.input, null, 2))}</pre>
-          </div>
-        </div>
-
-        <!-- Search Configuration -->
-        <div class="grep-config-section">
-          <h4>🎯 Search Configuration</h4>
-          <div class="tool-details-grid">
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Search Pattern:</span>
-              <span class="tool-detail-value search-pattern">${this.escapeHtml(pattern)}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Pattern Type:</span>
-              <span class="tool-detail-value">${patternType}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Complexity:</span>
-              <span class="tool-detail-value">${patternComplexity}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Search Location:</span>
-              <span class="tool-detail-value">${this.escapeHtml(searchPath)}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Target Files:</span>
-              <span class="tool-detail-value">${fileContext}</span>
-            </div>
-            <div class="tool-detail-item">
-              <span class="tool-detail-label">Output Mode:</span>
-              <span class="tool-detail-value">${outputMode.replace('_', ' ')}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Search Options -->
-        <div class="grep-options-section">
-          <h4>⚙️ Search Options</h4>
-          <div class="search-options">
-            ${this.generateGrepOptionsDisplay(grepToolData.input)}
-          </div>
-        </div>
-
-        <!-- Pattern Analysis -->
-        <div class="grep-pattern-section">
-          <h4>🧩 Pattern Analysis</h4>
-          <div class="pattern-analysis">
-            ${this.analyzeGrepPattern(pattern)}
-          </div>
-        </div>
-
-        <!-- Search Insights -->
-        <div class="grep-insights-section">
-          <h4>📊 Search Insights</h4>
-          <div class="tool-insights">
-            <div class="insight-item">
-              <span class="insight-label">Search Scope:</span>
-              <span class="insight-value">${searchScope}</span>
-            </div>
-            <div class="insight-item">
-              <span class="insight-label">Case Sensitivity:</span>
-              <span class="insight-value">${caseInsensitive ? 'Case insensitive' : 'Case sensitive'}</span>
-            </div>
-            <div class="insight-item">
-              <span class="insight-label">Multiline Mode:</span>
-              <span class="insight-value">${multiline ? 'Enabled (cross-line patterns)' : 'Disabled (single-line only)'}</span>
-            </div>
-            <div class="insight-item">
-              <span class="insight-label">Context Lines:</span>
-              <span class="insight-value">${contextAround > 0 ? `${contextAround} lines around` : contextBefore > 0 || contextAfter > 0 ? `${contextBefore} before, ${contextAfter} after` : 'None'}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal grep-tool-modal">
-          ${modalContent}
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close - store reference for cleanup
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-  }
-
-  /**
-   * Generate Grep options display
-   * @param {Object} input - Grep input parameters
-   * @returns {string} HTML for options display
-   */
-  generateGrepOptionsDisplay(input) {
-    const options = [];
-    
-    if (input['-i']) options.push({ name: 'Case Insensitive (-i)', status: 'enabled', desc: 'Ignore case when matching' });
-    if (input['-n']) options.push({ name: 'Line Numbers (-n)', status: 'enabled', desc: 'Show line numbers in output' });
-    if (input.multiline) options.push({ name: 'Multiline Mode', status: 'enabled', desc: 'Allow patterns to span multiple lines' });
-    if (input['-A']) options.push({ name: `After Context (-A ${input['-A']})`, status: 'enabled', desc: `Show ${input['-A']} lines after matches` });
-    if (input['-B']) options.push({ name: `Before Context (-B ${input['-B']})`, status: 'enabled', desc: `Show ${input['-B']} lines before matches` });
-    if (input['-C']) options.push({ name: `Around Context (-C ${input['-C']})`, status: 'enabled', desc: `Show ${input['-C']} lines around matches` });
-    if (input.glob) options.push({ name: `File Filter (--glob)`, status: 'enabled', desc: `Only search files matching "${input.glob}"` });
-    if (input.type) options.push({ name: `File Type (--type)`, status: 'enabled', desc: `Only search ${input.type} files` });
-    if (input.head_limit) options.push({ name: `Result Limit`, status: 'enabled', desc: `Limit to first ${input.head_limit} results` });
-    
-    if (options.length === 0) {
-      return '<div class="no-options">Using default search options</div>';
-    }
-    
-    return options.map(option => `
-      <div class="search-option ${option.status}">
-        <div class="option-header">
-          <span class="option-name">${option.name}</span>
-          <span class="option-status ${option.status}">${option.status}</span>
-        </div>
-        <div class="option-desc">${option.desc}</div>
-      </div>
-    `).join('');
-  }
-
-  /**
-   * Analyze grep pattern components
-   * @param {string} pattern - Grep pattern to analyze
-   * @returns {string} HTML breakdown of pattern
-   */
-  analyzeGrepPattern(pattern) {
-    if (!pattern) return '<div class="pattern-empty">No pattern specified</div>';
-    
-    const analysis = [];
-    
-    // Detect regex components
-    if (pattern.includes('.*')) {
-      analysis.push({ component: '.*', desc: 'Match any characters (zero or more)', type: 'regex' });
-    }
-    if (pattern.includes('.+')) {
-      analysis.push({ component: '.+', desc: 'Match any characters (one or more)', type: 'regex' });
-    }
-    if (pattern.includes('\\w')) {
-      analysis.push({ component: '\\w', desc: 'Match word characters (letters, digits, underscore)', type: 'regex' });
-    }
-    if (pattern.includes('\\d')) {
-      analysis.push({ component: '\\d', desc: 'Match digit characters (0-9)', type: 'regex' });
-    }
-    if (pattern.includes('\\s')) {
-      analysis.push({ component: '\\s', desc: 'Match whitespace characters', type: 'regex' });
-    }
-    if (pattern.includes('^')) {
-      analysis.push({ component: '^', desc: 'Match start of line', type: 'anchor' });
-    }
-    if (pattern.includes('$')) {
-      analysis.push({ component: '$', desc: 'Match end of line', type: 'anchor' });
-    }
-    if (pattern.includes('|')) {
-      analysis.push({ component: '|', desc: 'Logical OR (alternative patterns)', type: 'operator' });
-    }
-    
-    // Detect character classes
-    const charClassMatch = pattern.match(/\[([^\]]+)\]/g);
-    if (charClassMatch) {
-      charClassMatch.forEach(match => {
-        analysis.push({ component: match, desc: `Match any character in the set: ${match}`, type: 'charclass' });
-      });
-    }
-    
-    // Detect groups
-    const groupMatch = pattern.match(/\(([^)]+)\)/g);
-    if (groupMatch) {
-      groupMatch.forEach(match => {
-        analysis.push({ component: match, desc: `Capture group: ${match}`, type: 'group' });
-      });
-    }
-    
-    if (analysis.length === 0) {
-      return '<div class="pattern-simple">Simple literal text search</div>';
-    }
-    
-    return analysis.map(item => `
-      <div class="pattern-component ${item.type}">
-        <code class="pattern-part">${this.escapeHtml(item.component)}</code>
-        <span class="pattern-desc">${item.desc}</span>
-      </div>
-    `).join('');
-  }
-
-  /**
-   * Open TodoWrite tool specific modal
-   * @param {Object} todoToolData - TodoWrite tool data
-   */
-  openTodoWriteToolModal(todoToolData) {
-    console.log('📝 Opening TodoWrite tool modal with data:', todoToolData);
-    
-    if (!todoToolData || !todoToolData.input) {
-      console.warn('⚠️ TodoWrite tool data missing or invalid');
-      return;
-    }
-
-    // Extract TodoWrite parameters
-    const todos = todoToolData.input.todos || [];
-    const todoCount = todos.length;
-    
-    // Analyze todos
-    const statusCounts = {
-      pending: 0,
-      in_progress: 0,
-      completed: 0
-    };
-    
-    const priorityCounts = {
-      high: 0,
-      medium: 0,
-      low: 0
-    };
-    
-    todos.forEach(todo => {
-      if (statusCounts.hasOwnProperty(todo.status)) {
-        statusCounts[todo.status]++;
-      }
-      if (priorityCounts.hasOwnProperty(todo.priority)) {
-        priorityCounts[todo.priority]++;
-      }
-    });
-    
-    // Calculate completion rate
-    const completionRate = todoCount > 0 ? Math.round((statusCounts.completed / todoCount) * 100) : 0;
-    
-    // Find longest and shortest todos
-    const todoLengths = todos.map(todo => todo.content.length);
-    const avgLength = todoLengths.length > 0 ? Math.round(todoLengths.reduce((a, b) => a + b, 0) / todoLengths.length) : 0;
-
-    const modalContent = `
-      <div class="agent-modal-header">
-        <div class="agent-modal-title">
-          <div class="agent-title-main">
-            <div class="tool-icon todo-tool">
-              <span style="font-size: 20px;">📝</span>
-            </div>
-            <div class="agent-title-info">
-              <h3>Todo Management: ${todoCount} tasks</h3>
-              <div class="agent-subtitle">
-                <span class="tool-type-badge">${completionRate}% Complete</span>
-                <span class="tool-id-badge">ID: ${todoToolData.id ? todoToolData.id.slice(-8) : 'unknown'}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-      </div>
-      
-      <div class="agent-modal-content">
-        <!-- Primary Section: Tool Parameters -->
-        <div class="raw-parameters-section primary-section">
-          <h4>🔧 Tool Parameters</h4>
-          <div class="raw-params-container">
-            <pre class="raw-params-json">${this.escapeHtml(JSON.stringify(todoToolData.input, null, 2))}</pre>
-          </div>
-        </div>
-
-        <!-- Todo Summary -->
-        <div class="todo-summary-section">
-          <h4>📊 Todo Summary</h4>
-          <div class="todo-summary">
-            <div class="summary-stats">
-              <div class="stat-item">
-                <span class="stat-number">${todoCount}</span>
-                <span class="stat-label">Total Todos</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-number">${completionRate}%</span>
-                <span class="stat-label">Completion Rate</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-number">${avgLength}</span>
-                <span class="stat-label">Avg Length</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Status Breakdown -->
-        <div class="todo-status-section">
-          <h4>📈 Status Breakdown</h4>
-          <div class="status-breakdown">
-            <div class="status-item pending">
-              <div class="status-info">
-                <span class="status-name">Pending</span>
-                <span class="status-count">${statusCounts.pending}</span>
-              </div>
-              <div class="status-bar">
-                <div class="status-fill" style="width: ${todoCount > 0 ? (statusCounts.pending / todoCount) * 100 : 0}%"></div>
-              </div>
-            </div>
-            <div class="status-item in-progress">
-              <div class="status-info">
-                <span class="status-name">In Progress</span>
-                <span class="status-count">${statusCounts.in_progress}</span>
-              </div>
-              <div class="status-bar">
-                <div class="status-fill" style="width: ${todoCount > 0 ? (statusCounts.in_progress / todoCount) * 100 : 0}%"></div>
-              </div>
-            </div>
-            <div class="status-item completed">
-              <div class="status-info">
-                <span class="status-name">Completed</span>
-                <span class="status-count">${statusCounts.completed}</span>
-              </div>
-              <div class="status-bar">
-                <div class="status-fill" style="width: ${todoCount > 0 ? (statusCounts.completed / todoCount) * 100 : 0}%"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Priority Distribution -->
-        <div class="todo-priority-section">
-          <h4>🎯 Priority Distribution</h4>
-          <div class="priority-distribution">
-            <div class="priority-item high">
-              <span class="priority-label">High Priority</span>
-              <span class="priority-count">${priorityCounts.high}</span>
-            </div>
-            <div class="priority-item medium">
-              <span class="priority-label">Medium Priority</span>
-              <span class="priority-count">${priorityCounts.medium}</span>
-            </div>
-            <div class="priority-item low">
-              <span class="priority-label">Low Priority</span>
-              <span class="priority-count">${priorityCounts.low}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Todo Items -->
-        <div class="todo-items-section">
-          <h4>📋 Todo Items</h4>
-          <div class="todo-items">
-            ${this.generateTodoItemsDisplay(todos)}
-          </div>
-        </div>
-      </div>
-    `;
-
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal todo-tool-modal">
-          ${modalContent}
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close - store reference for cleanup
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-  }
-
-  /**
-   * Generate todo items display
-   * @param {Array} todos - Array of todo items
-   * @returns {string} HTML for todo items
-   */
-  generateTodoItemsDisplay(todos) {
-    if (!todos || todos.length === 0) {
-      return '<div class="no-todos">No todos found</div>';
-    }
-    
-    return todos.map((todo, index) => `
-      <div class="todo-item ${todo.status} ${todo.priority}">
-        <div class="todo-header">
-          <span class="todo-index">#${index + 1}</span>
-          <span class="todo-status ${todo.status}">${todo.status.replace('_', ' ')}</span>
-          <span class="todo-priority ${todo.priority}">${todo.priority}</span>
-        </div>
-        <div class="todo-content">${this.escapeHtml(todo.content)}</div>
-        <div class="todo-meta">
-          <span class="todo-id">ID: ${todo.id}</span>
-          <span class="todo-length">${todo.content.length} chars</span>
-        </div>
-      </div>
-    `).join('');
-  }
-
-  /**
-   * Open Bash tool specific modal
-   * @param {Object} bashToolData - Bash tool data
-   */
-  openBashToolModal(bashToolData) {
-    const input = bashToolData.input || {};
-    const command = input.command || 'Unknown command';
-    const description = input.description || '';
-    const timeout = input.timeout || 120000; // Default 2 minutes
-    const toolId = bashToolData.id || 'unknown';
-    
-    // Analyze command type
-    const isGitCommand = command.startsWith('git ');
-    const isNpmCommand = command.startsWith('npm ') || command.startsWith('yarn ') || command.startsWith('pnpm ');
-    const isFileCommand = command.includes('ls') || command.includes('cat') || command.includes('find') || command.includes('grep');
-    const isBuildCommand = command.includes('build') || command.includes('compile') || command.includes('make');
-    const isTestCommand = command.includes('test') || command.includes('jest') || command.includes('mocha');
-    const isSystemCommand = command.includes('ps') || command.includes('kill') || command.includes('sudo');
-    
-    let commandCategory = '';
-    let contextIcon = '⚡';
-    
-    if (isGitCommand) {
-      commandCategory = 'Git Operation';
-      contextIcon = '🔧';
-    } else if (isNpmCommand) {
-      commandCategory = 'Package Management';
-      contextIcon = '📦';
-    } else if (isBuildCommand) {
-      commandCategory = 'Build Process';
-      contextIcon = '🔨';
-    } else if (isTestCommand) {
-      commandCategory = 'Testing';
-      contextIcon = '🧪';
-    } else if (isFileCommand) {
-      commandCategory = 'File Operations';
-      contextIcon = '📁';
-    } else if (isSystemCommand) {
-      commandCategory = 'System Command';
-      contextIcon = '🖥️';
-    } else {
-      commandCategory = 'Shell Command';
-      contextIcon = '⚡';
-    }
-    
-    // Parse command for better display
-    const commandParts = command.split(' ');
-    const mainCommand = commandParts[0] || '';
-    const args = commandParts.slice(1).join(' ') || '';
-    
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="agent-modal-overlay">
-        <div class="agent-modal bash-tool-modal">
-          <div class="agent-modal-header">
-            <div class="agent-modal-title">
-              <div class="agent-title-main">
-                <div class="tool-icon bash-tool">
-                  <span style="font-size: 20px;">${contextIcon}</span>
-                </div>
-                <div class="agent-title-info">
-                  <h3>Command: ${mainCommand}</h3>
-                  <div class="agent-subtitle">
-                    <span class="tool-type-badge">${commandCategory}</span>
-                    <span class="tool-id-badge">ID: ${toolId.slice(-8)}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button class="agent-modal-close" id="agent-modal-close">&times;</button>
-          </div>
-          
-          <div class="agent-modal-content">
-            <div class="raw-parameters-section primary-section">
-              <h4>🔧 Tool Parameters</h4>
-              <div class="raw-params-container">
-                <pre class="raw-params-json">${JSON.stringify(input, null, 2)}</pre>
-              </div>
-              <div class="params-summary">
-                <span class="param-chip">Tool ID: ${toolId.slice(-8)}</span>
-                <span class="param-chip">Command: ${mainCommand}</span>
-                <span class="param-chip">Timeout: ${timeout/1000}s</span>
-                ${description ? `<span class="param-chip">Described: Yes</span>` : `<span class="param-chip">Described: No</span>`}
-              </div>
-            </div>
-
-            <div class="command-execution-section">
-              <div class="command-header-section">
-                <h4>💻 Command Execution</h4>
-                <div class="command-stats">
-                  <span class="command-stat">${commandParts.length} parts</span>
-                  <span class="command-stat">${command.length} chars</span>
-                  <span class="command-stat">${timeout/1000}s timeout</span>
-                </div>
-              </div>
-              <div class="command-display-container">
-                <div class="command-line">
-                  <span class="command-prompt">$</span>
-                  <span class="command-text">${this.escapeHtml(command)}</span>
-                </div>
-                ${description ? `
-                  <div class="command-description">
-                    <span class="description-label">Description:</span>
-                    <span class="description-text">${this.escapeHtml(description)}</span>
-                  </div>
-                ` : ''}
-              </div>
-            </div>
-
-            <div class="command-analysis-section">
-              <h4>🔍 Command Analysis</h4>
-              <div class="analysis-grid">
-                <div class="analysis-item">
-                  <span class="analysis-label">Main Command:</span>
-                  <code class="analysis-value">${this.escapeHtml(mainCommand)}</code>
-                </div>
-                ${args ? `
-                  <div class="analysis-item">
-                    <span class="analysis-label">Arguments:</span>
-                    <code class="analysis-value">${this.escapeHtml(args)}</code>
-                  </div>
-                ` : ''}
-                <div class="analysis-item">
-                  <span class="analysis-label">Category:</span>
-                  <code class="analysis-value">${commandCategory}</code>
-                </div>
-                <div class="analysis-item">
-                  <span class="analysis-label">Timeout:</span>
-                  <code class="analysis-value">${timeout === 120000 ? 'Default (2min)' : `${timeout/1000}s`}</code>
-                </div>
-              </div>
-            </div>
-
-            <div class="file-insights-section">
-              <h4>📊 Execution Insights</h4>
-              <div class="insights-grid">
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">${contextIcon}</span>
-                    <span class="insight-title">Command Type</span>
-                  </div>
-                  <div class="insight-content">${commandCategory}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">⏱️</span>
-                    <span class="insight-title">Timeout</span>
-                  </div>
-                  <div class="insight-content">${timeout/1000} seconds</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">📝</span>
-                    <span class="insight-title">Complexity</span>
-                  </div>
-                  <div class="insight-content">${commandParts.length < 3 ? 'Simple' : commandParts.length < 6 ? 'Medium' : 'Complex'}</div>
-                </div>
-                <div class="insight-card">
-                  <div class="insight-header">
-                    <span class="insight-icon">🎯</span>
-                    <span class="insight-title">Documentation</span>
-                  </div>
-                  <div class="insight-content">${description ? 'Documented' : 'No description'}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('agent-modal-close').addEventListener('click', () => this.closeAgentModal());
-    document.getElementById('agent-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'agent-modal-overlay') {
-        this.closeAgentModal();
-      }
-    });
-    
-    // ESC key to close
-    this.modalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeAgentModal();
-      }
-    };
-    document.addEventListener('keydown', this.modalKeydownHandler);
-  }
-
-  /**
-   * Escape HTML to prevent XSS
-   * @param {string} text - Text to escape
-   * @returns {string} Escaped text
-   */
-  escapeHtml(text) {
-    if (typeof text !== 'string') return String(text);
-    
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
-  /**
-   * Close agent modal
-   */
-  closeAgentModal() {
-    const modal = document.getElementById('agent-modal-overlay');
-    if (modal) {
-      modal.remove();
-    }
-    if (this.modalKeydownHandler) {
-      document.removeEventListener('keydown', this.modalKeydownHandler);
-      this.modalKeydownHandler = null;
-    }
-  }
-
-  /**
-   * Show agents loading state
-   * @param {boolean} show - Whether to show loading
-   */
-  showAgentsLoading(show) {
-    const loading = this.container.querySelector('#agents-loading');
-    const list = this.container.querySelector('#agents-list');
-    
-    if (loading && list) {
-      loading.style.display = show ? 'flex' : 'none';
-      list.style.display = show ? 'none' : 'block';
-    }
-  }
-
-  /**
-   * Show agents empty state
-   */
-  showAgentsEmpty() {
-    const empty = this.container.querySelector('#agents-empty');
-    const list = this.container.querySelector('#agents-list');
-    const count = this.container.querySelector('#agents-count');
-    
-    if (empty && list && count) {
-      empty.style.display = 'flex';
-      list.style.display = 'none';
-      count.textContent = '0 agents'; 
-    }
-  }
-
-  /**
-   * Hide agents empty state
-   */
-  hideAgentsEmpty() {
-    const empty = this.container.querySelector('#agents-empty');
-    if (empty) {
-      empty.style.display = 'none';
-    }
-  }
-
-  /**
-   * Get project-specific agents for a conversation
-   * @param {string} conversationId - Conversation ID
-   * @returns {Array} Array of project agents for this conversation
-   */
-  getAgentsForConversation(conversationId) {
-    const conversations = this.stateService.getStateProperty('conversations') || [];
-    const conversation = conversations.find(conv => conv.id === conversationId);
-    
-    if (!conversation || !conversation.project) {
-      // Return empty array if no project (global agents are shown in main section)
-      return [];
-    }
-    
-    const projectName = conversation.project;
-    
-    // Return only project agents for this specific project
-    return this.agents.filter(agent => 
-      agent.level === 'project' && agent.projectName === projectName
-    );
-  }
-
-  /**
-   * Show project agents modal
-   * @param {string} conversationId - Conversation ID
-   */
-  showProjectAgents(conversationId) {
-    const conversations = this.stateService.getStateProperty('conversations') || [];
-    const conversation = conversations.find(conv => conv.id === conversationId);
-    const projectAgents = this.getAgentsForConversation(conversationId);
-    
-    const projectName = conversation?.project || 'Unknown Project';
-    const chatTitle = conversation?.title || `Chat ${conversationId.slice(-8)}`;
-    
-    const modalHTML = `
-      <div class="agent-modal-overlay" id="project-agents-modal-overlay">
-        <div class="agent-modal project-agents-modal">
-          <div class="agent-modal-header">
-            <div class="agent-modal-title">
-              <div class="agent-title-main">
-                <div class="project-icon">📁</div>
-                <div class="agent-title-info">
-                  <h3>Project Agents</h3>
-                  <div class="agent-subtitle">
-                    <span class="project-info">${chatTitle}</span>
-                    <span class="agent-project-name">• ${projectName}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button class="agent-modal-close" id="project-agents-modal-close">&times;</button>
-          </div>
-          
-          <div class="agent-modal-content">
-            ${projectAgents.length === 0 ? `
-              <div class="no-agents-message">
-                <div class="no-agents-icon">🤖</div>
-                <h4>No project agents</h4>
-                <p>This project doesn't have any specific agents configured.</p>
-                <p>Create agents in your project's <code>.claude/agents/</code> directory to see them here.</p>
-                <p><strong>Note:</strong> Global agents are available in the main agents section.</p>
-              </div>
-            ` : `
-              <div class="project-agents-grid">
-                ${projectAgents.map(agent => `
-                  <div class="project-agent-card" data-agent-id="${agent.name}">
-                    <div class="project-agent-header">
-                      <div class="agent-dot" style="background-color: ${agent.color}"></div>
-                      <div class="project-agent-info">
-                        <h4>${agent.name}</h4>
-                        <span class="agent-level-badge ${agent.level}">${agent.level === 'project' ? 'Project' : 'User'}</span>
-                      </div>
-                    </div>
-                    <div class="project-agent-description">
-                      ${this.truncateText(agent.description, 100)}
-                    </div>
-                    <div class="project-agent-footer">
-                      <span class="project-agent-tools">${agent.tools && agent.tools.length > 0 ? `${agent.tools.length} tools` : 'All tools'}</span>
-                      <button class="project-agent-details-btn" data-agent-id="${agent.name}">Details</button>
-                    </div>
-                  </div>
-                `).join('')}
-              </div>
-              
-              <div class="usage-instruction">
-                <h4>💡 How to use these agents</h4>
-                <p>In your conversation, mention any agent by name:</p>
-                <div class="usage-examples">
-                  ${projectAgents.slice(0, 3).map(agent => 
-                    `<code class="usage-example">Use the ${agent.name} agent to help with this task</code>`
-                  ).join('')}
-                </div>
-              </div>
-            `}
-          </div>
-        </div>
-      </div>
-    `;
-    
-    // Add modal to DOM
-    document.body.insertAdjacentHTML('beforeend', modalHTML);
-    
-    // Bind close events
-    document.getElementById('project-agents-modal-close').addEventListener('click', () => this.closeProjectAgentsModal());
-    document.getElementById('project-agents-modal-overlay').addEventListener('click', (e) => {
-      if (e.target.id === 'project-agents-modal-overlay') {
-        this.closeProjectAgentsModal();
-      }
-    });
-    
-    // Bind agent detail buttons
-    const detailButtons = document.querySelectorAll('.project-agent-details-btn');
-    detailButtons.forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const agentId = btn.dataset.agentId;
-        const agent = this.agents.find(a => a.name === agentId);
-        if (agent) {
-          this.closeProjectAgentsModal();
-          this.openAgentModal(agent);
-        }
-      });
-    });
-    
-    // ESC key to close
-    this.projectModalKeydownHandler = (e) => {
-      if (e.key === 'Escape') {
-        this.closeProjectAgentsModal();
-      }
-    };
-    document.addEventListener('keydown', this.projectModalKeydownHandler);
-  }
-
-  /**
-   * Close project agents modal
-   */
-  closeProjectAgentsModal() {
-    const modal = document.getElementById('project-agents-modal-overlay');
-    if (modal) {
-      modal.remove();
-    }
-    if (this.projectModalKeydownHandler) {
-      document.removeEventListener('keydown', this.projectModalKeydownHandler);
-      this.projectModalKeydownHandler = null;
-    }
-  }
-
-  /**
-   * Refresh agents data
-   */
-  async refreshAgents() {
-    const refreshBtn = this.container.querySelector('#refresh-agents');
-    if (refreshBtn) {
-      refreshBtn.disabled = true;
-      const iconElement = refreshBtn.querySelector('.btn-icon');
-      if (iconElement) {
-        iconElement.style.animation = 'spin 1s linear infinite';
-      }
-    }
-
-    try {
-      // Just reload agents data without clearing cache
-      await this.loadAgentsData();
-    } catch (error) {
-      console.error('Error refreshing agents:', error);
-    } finally {
-      if (refreshBtn) {
-        refreshBtn.disabled = false;
-        const iconElement = refreshBtn.querySelector('.btn-icon');
-        if (iconElement) {
-          iconElement.style.animation = '';
-        }
-      }
-    }
-  }
-
-  /**
-   * Load initial conversations data using paginated API
-   */
-  async loadConversationsData() {
-    try {
-      
-      // Reset pagination state
-      this.pagination = {
-        currentPage: 0,
-        limit: 10,
-        hasMore: true,
-        isLoading: false
-      };
-      this.loadedConversations = [];
-      this.loadedMessages.clear(); // Clear message cache too
-      
-      // Clear the list container
-      const listContainer = this.container.querySelector('#conversations-list');
-      if (listContainer) {
-        listContainer.innerHTML = '';
-      }
-      
-      // Hide empty state initially
-      this.hideEmptyState();
-      
-      // Load first page and states
-      await this.loadMoreConversations();
-      
-      
-    } catch (error) {
-      console.error('Error loading conversations data:', error);
-      this.stateService.setError('Failed to load conversations data');
-    }
-  }
-  
-  /**
-   * Load more conversations (pagination)
-   */
-  async loadMoreConversations() {
-    if (this.pagination.isLoading || !this.pagination.hasMore) {
-      return;
-    }
-    
-    try {
-      
-      this.pagination.isLoading = true;
-      this.updateLoadingIndicator(true);
-      
-      const [conversationsData, statesData] = await Promise.all([
-        this.dataService.getConversationsPaginated(this.pagination.currentPage, this.pagination.limit),
-        this.dataService.getConversationStates()
-      ]);
-      
-      
-      // Update pagination info
-      this.pagination.hasMore = conversationsData.pagination.hasMore;
-      this.pagination.currentPage = conversationsData.pagination.page + 1;
-      this.pagination.totalCount = conversationsData.pagination.totalCount;
-      
-      // Get only NEW conversations for this page
-      const newConversations = conversationsData.conversations;
-      
-      // Add new conversations to loaded list
-      this.loadedConversations.push(...newConversations);
-      
-      
-      // Extract activeStates from the response structure
-      const activeStates = statesData?.activeStates || {};
-      
-      // Update state with correct format
-      this.stateService.updateConversations(this.loadedConversations);
-      this.stateService.updateConversationStates(activeStates);
-      
-      
-      // For initial load (page 0), replace content. For subsequent loads, append
-      const isInitialLoad = conversationsData.pagination.page === 0;
-      this.renderConversationsList(
-        isInitialLoad ? this.loadedConversations : newConversations, 
-        activeStates, 
-        !isInitialLoad
-      );
-      
-    } catch (error) {
-      console.error('Error loading more conversations:', error);
-      this.stateService.setError('Failed to load more conversations');
-    } finally {
-      this.pagination.isLoading = false;
-      this.updateLoadingIndicator(false);
-    }
-  }
-
-  /**
-   * Render conversations list
-   * @param {Array} conversations - Conversations data
-   * @param {Object} states - Conversation states
-   * @param {boolean} append - Whether to append or replace content
-   */
-  renderConversationsList(conversations, states, append = false) {
-    const listContainer = this.container.querySelector('#conversations-list');
-    if (!listContainer) {
-      console.warn('conversations-list element not found in AgentsPage - component may not be active');
-      return;
-    }
-    const filteredConversations = this.filterConversations(conversations, states);
-    
-    // Calculate count based on filters
-    let countToShow;
-    const hasActiveFilters = this.hasActiveFilters();
-    
-    if (!hasActiveFilters && this.pagination && this.pagination.totalCount) {
-      // No filters active, show total count from server
-      countToShow = this.pagination.totalCount;
-    } else {
-      // Filters active, count filtered loaded conversations  
-      const conversationsToCount = this.loadedConversations && this.loadedConversations.length > 0 
-        ? this.loadedConversations 
-        : conversations;
-      const allFilteredConversations = this.filterConversations(conversationsToCount, states);
-      countToShow = allFilteredConversations.length;
-    }
-    
-    this.updateResultsCount(countToShow, hasActiveFilters);
-    this.updateClearFiltersButton();
-    
-    if (filteredConversations.length === 0 && !append) {
-      this.showEmptyState();
-      return;
-    }
-    
-    this.hideEmptyState();
-    
-    const conversationHTML = filteredConversations.map(conv => {
-      const state = states[conv.id] || 'unknown';
-      const stateClass = this.getStateClass(state);
-      
-      // Check for agent usage
-      const agentColor = this.getAgentColorForConversation(conv.id);
-      const agentName = this.getAgentNameForConversation(conv.id);
-      
-      // Generate title with agent indicator
-      const titleColor = agentColor ? `style="color: ${agentColor}; border-left: 3px solid ${agentColor}; padding-left: 8px;"` : '';
-      const agentIndicator = agentName ? `<span class="agent-indicator-small" style="background-color: ${agentColor}" title="Using ${agentName} agent">🤖</span>` : '';
-      
-      return `
-        <div class="sidebar-conversation-item" data-id="${conv.id}" ${agentColor ? `data-agent-color="${agentColor}"` : ''}>
-          <div class="sidebar-conversation-header">
-            <div class="sidebar-conversation-title" ${titleColor}>
-              <span class="status-dot ${stateClass}"></span>
-              <h4 class="sidebar-conversation-name">${conv.title || `Chat ${conv.id.slice(-8)}`}</h4>
-              ${agentIndicator}
-            </div>
-            <span class="sidebar-conversation-badge ${stateClass}">${this.getStateLabel(state)}</span>
-          </div>
-          
-          <div class="sidebar-conversation-meta">
-            <span class="sidebar-meta-item">
-              <span class="sidebar-meta-icon">📁</span>
-              ${this.truncateText(conv.project || 'Unknown', 12)}
-            </span>
-          </div>
-          
-          <div class="sidebar-conversation-preview">
-            <p class="sidebar-preview-text">${this.getSimpleConversationPreview(conv)}</p>
-          </div>
-          
-          <div class="sidebar-conversation-actions">
-            <button class="conversation-agents-btn" data-conversation-id="${conv.id}" title="View available agents for this project">
-              <span class="agents-icon">🤖</span>
-              <span class="agents-text">Agents</span>
-            </button>
-          </div>
-        </div>
-      `;
-    }).join('');
-    
-    if (append) {
-      listContainer.insertAdjacentHTML('beforeend', conversationHTML);
-    } else {
-      listContainer.innerHTML = conversationHTML;
-    }
-    
-    // Bind card actions
-    this.bindListActions();
-  }
-
-  /**
-   * Bind list action events
-   */
-  bindListActions() {
-    // Export conversation button
-    const exportBtn = this.container.querySelector('#export-conversation');
-    if (exportBtn) {
-      exportBtn.addEventListener('click', () => {
-        if (this.selectedConversationId) {
-          this.exportSingleConversation(this.selectedConversationId);
-        }
-      });
-    }
-
-    // Click on sidebar conversation item to select and view
-    const conversationItems = this.container.querySelectorAll('.sidebar-conversation-item');
-    conversationItems.forEach(item => {
-      item.addEventListener('click', (e) => {
-        // Don't select conversation if clicking on agents button
-        if (e.target.closest('.conversation-agents-btn')) {
-          return;
-        }
-        const conversationId = item.dataset.id;
-        this.selectConversation(conversationId);
-      });
-    });
-
-    // Bind agents button clicks
-    const agentsButtons = this.container.querySelectorAll('.conversation-agents-btn');
-    agentsButtons.forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const conversationId = btn.dataset.conversationId;
-        this.showProjectAgents(conversationId);
-      });
-    });
-  }
-
-  /**
-   * Select and display a conversation
-   * @param {string} conversationId - Conversation ID
-   */
-  async selectConversation(conversationId) {
-    // Update selected conversation state
-    this.selectedConversationId = conversationId;
-    
-    // Update UI to show selection
-    this.updateSelectedConversation();
-    
-    // Load and display conversation messages
-    await this.loadConversationMessages(conversationId);
-  }
-  
-  /**
-   * Update selected conversation in sidebar
-   */
-  updateSelectedConversation() {
-    // Remove previous selection
-    const previousSelected = this.container.querySelector('.sidebar-conversation-item.selected');
-    if (previousSelected) {
-      previousSelected.classList.remove('selected');
-    }
-    
-    // Add selection to current item
-    const currentItem = this.container.querySelector(`[data-id="${this.selectedConversationId}"]`);
-    if (currentItem) {
-      currentItem.classList.add('selected');
-    }
-    
-    // Update header with conversation info
-    const conversations = this.stateService.getStateProperty('conversations') || [];
-    const conversation = conversations.find(conv => conv.id === this.selectedConversationId);
-    
-    if (conversation) {
-      const titleElement = this.container.querySelector('#selected-conversation-title');
-      const metaElement = this.container.querySelector('#selected-conversation-meta');
-      
-      if (titleElement) {
-        const baseTitle = conversation.title || `Chat ${conversation.id.slice(-8)}`;
-        const agentName = this.getAgentNameForConversation(conversation.id);
-        const agentColor = this.getAgentColorForConversation(conversation.id);
-        
-        if (agentName && agentColor) {
-          titleElement.innerHTML = `
-            <span style="color: ${agentColor}; border-left: 3px solid ${agentColor}; padding-left: 8px;">
-              ${baseTitle}
-            </span>
-            <span class="agent-badge" style="background-color: ${agentColor};" title="Using ${agentName} agent">
-              🤖 ${agentName}
-            </span>
-          `;
-        } else {
-          titleElement.textContent = baseTitle;
-        }
-      }
-      
-      if (metaElement) {
-        const messageCount = conversation.messageCount || 0;
-        const lastActivity = this.formatRelativeTime(new Date(conversation.lastModified));
-        metaElement.innerHTML = `
-          <span class="meta-item">
-            <span class="meta-icon">📁</span>
-            ${conversation.project || 'Unknown Project'}
-          </span>
-          <span class="meta-item">
-            <span class="meta-icon">💬</span>
-            ${messageCount} message${messageCount !== 1 ? 's' : ''}
-          </span>
-          <span class="meta-item">
-            <span class="meta-icon">🕒</span>
-            ${lastActivity}
-          </span>
-        `;
-      }
-    }
-    
-    // Show and update the state banner
-    this.showStateBanner(this.selectedConversationId);
-  }
-  
-  /**
-   * Load and display conversation messages (with caching)
-   * @param {string} conversationId - Conversation ID
-   */
-  async loadConversationMessages(conversationId) {
-    // Reset pagination for new conversation
-    this.messagesPagination = {
-      currentPage: 0,
-      limit: 10,
-      hasMore: true,
-      isLoading: false,
-      conversationId: conversationId
-    };
-    
-    // Clear cached messages for this conversation
-    this.loadedMessages.delete(conversationId);
-    
-    // Load first page of messages
-    await this.loadMoreMessages(conversationId, true);
-  }
-
-  /**
-   * Show and update conversation state banner
-   * @param {string} conversationId - Conversation ID
-   */
-  showStateBanner(conversationId) {
-    const banner = this.container.querySelector('#conversation-state-banner');
-    if (!banner) return;
-    
-    // Show the banner
-    banner.style.display = 'flex';
-    
-    // Get current state from WebSocket or cache
-    const conversationStates = this.stateService.getStateProperty('conversationStates') || {};
-    const currentState = conversationStates[conversationId] || 'unknown';
-    
-    
-    // If we don't have the state yet, try to fetch it after a short delay
-    if (currentState === 'unknown') {
-      setTimeout(() => {
-        this.fetchConversationState(conversationId);
-      }, 100);
-    }
-    
-    // Update banner with current state
-    this.updateStateBanner(conversationId, currentState);
-  }
-
-  /**
-   * Update conversation state banner
-   * @param {string} conversationId - Conversation ID  
-   * @param {string} state - Current conversation state
-   */
-  updateStateBanner(conversationId, state) {
-    const banner = this.container.querySelector('#conversation-state-banner');
-    const stateDot = this.container.querySelector('#state-dot');
-    const stateText = this.container.querySelector('#state-text');
-    const stateTimestamp = this.container.querySelector('#state-timestamp');
-    
-    
-    if (!banner || !stateDot || !stateText || !stateTimestamp) {
-      return;
-    }
-    
-    // Map states to user-friendly messages with enhanced descriptions
-    const stateMessages = {
-      'Claude Code working...': {
-        text: '🤖 Claude is thinking and working...',
-        description: 'Claude is processing your request',
-        class: 'status-working',
-        icon: '🧠'
-      },
-      'Awaiting tool response...': {
-        text: '⚡ Waiting for tool execution...',
-        description: 'Claude is waiting for tool results',
-        class: 'status-tool-pending',
-        icon: '🔧'
-      },
-      'Executing tools...': {
-        text: '🔧 Executing tools...',
-        description: 'Claude is running system tools',
-        class: 'status-tool-executing',
-        icon: '⚡'
-      },
-      'Analyzing results...': {
-        text: '📊 Analyzing tool results...',
-        description: 'Claude is processing tool outputs',
-        class: 'status-analyzing',
-        icon: '🔍'
-      },
-      'Analyzing code...': {
-        text: '🔍 Analyzing code...',
-        description: 'Claude is examining code or files',
-        class: 'status-analyzing',
-        icon: '📝'
-      },
-      'Fetching data...': {
-        text: '🌐 Fetching data...',
-        description: 'Claude is retrieving web content or external data',
-        class: 'status-fetching',
-        icon: '📶'
-      },
-      'Task completed': {
-        text: '✅ Task completed',
-        description: 'Claude has finished the requested task',
-        class: 'status-completed',
-        icon: '✨'
-      },
-      'Processing request...': {
-        text: '⚙️ Processing request...',
-        description: 'Claude is working on a complex request',
-        class: 'status-processing',
-        icon: '🔄'
-      },
-      'Encountered issue': {
-        text: '⚠️ Encountered issue',
-        description: 'Claude found an error or problem',
-        class: 'status-error',
-        icon: '🚟'
-      },
-      'Awaiting user input...': {
-        text: '💬 Awaiting your input',
-        description: 'Claude needs your response to continue',
-        class: 'status-waiting',
-        icon: '💭'
-      },
-      'Waiting for your response': {
-        text: '💬 Waiting for your response',
-        description: 'Claude is ready for your next message',
-        class: 'status-waiting-response',
-        icon: '📝'
-      },
-      'Awaiting response...': {
-        text: '⏳ Awaiting Claude response',
-        description: 'Waiting for Claude to respond',
-        class: 'status-waiting',
-        icon: '🤔'
-      },
-      'Recently active': {
-        text: '🟢 Recently active',
-        description: 'Conversation was active recently',
-        class: 'status-active',
-        icon: '✨'
-      },
-      'Idle': {
-        text: '😴 Conversation idle',
-        description: 'No recent activity',
-        class: 'status-idle',
-        icon: '💤'
-      },
-      'Inactive': {
-        text: '⚪ Inactive',
-        description: 'Conversation has been inactive',
-        class: 'status-idle',
-        icon: '⏸️'
-      },
-      'Old': {
-        text: '📚 Archived conversation',
-        description: 'No recent activity in this conversation',
-        class: 'status-idle',
-        icon: '📁'
-      },
-      'unknown': {
-        text: '🔄 Loading conversation state...',
-        description: 'Determining conversation status',
-        class: 'status-loading',
-        icon: '⏳'
-      }
-    };
-    
-    const stateInfo = stateMessages[state] || stateMessages['unknown'];
-    
-    // Update dot class with enhanced styling
-    stateDot.className = `state-dot ${stateInfo.class}`;
-    
-    // Check for agent usage
-    const agentName = this.getAgentNameForConversation(conversationId);
-    const agentColor = this.getAgentColorForConversation(conversationId);
-    
-    // Update text with icon, description, and agent info
-    let stateTextContent = stateInfo.text;
-    let stateDescriptionContent = stateInfo.description;
-    
-    // If an agent is detected and state indicates work, update the message
-    if (agentName && (stateInfo.class.includes('working') || stateInfo.class.includes('executing') || stateInfo.class.includes('analyzing'))) {
-      stateTextContent = `🤖 ${agentName} agent working...`;
-      stateDescriptionContent = `The ${agentName} agent is processing your request`;
-      
-      // Apply agent color to the dot
-      if (agentColor) {
-        stateDot.style.backgroundColor = agentColor;
-        stateDot.style.borderColor = agentColor;
-      }
-    }
-    
-    stateText.innerHTML = `
-      <span class="state-text-main">${stateTextContent}</span>
-      <span class="state-text-description">${stateDescriptionContent}</span>
-    `;
-    
-    // Add tooltip for additional context
-    stateText.title = stateInfo.description;
-    
-    // Update timestamp with more context
-    const now = new Date();
-    const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-    stateTimestamp.innerHTML = `
-      <span class="timestamp-label">Last updated:</span>
-      <span class="timestamp-value">${timeString}</span>
-    `;
-    
-    // Add pulsing animation for active states
-    if (stateInfo.class.includes('working') || stateInfo.class.includes('executing') || stateInfo.class.includes('analyzing')) {
-      stateDot.classList.add('pulse-animation');
-      setTimeout(() => stateDot.classList.remove('pulse-animation'), 3000);
-    }
-    
-  }
-
-  /**
-   * Fetch conversation state from API
-   * @param {string} conversationId - Conversation ID
-   */
-  async fetchConversationState(conversationId) {
-    try {
-      const stateData = await this.dataService.getConversationStates();
-      
-      if (stateData && stateData.activeStates && stateData.activeStates[conversationId]) {
-        const state = stateData.activeStates[conversationId];
-        
-        // Update the StateService with the new data
-        this.stateService.updateConversationStates(stateData.activeStates);
-        
-        // Update the banner with the real state
-        this.updateStateBanner(conversationId, state);
-      } else {
-        // Keep showing unknown for now
-      }
-    } catch (error) {
-      console.error('Error fetching conversation state:', error);
-    }
-  }
-
-  /**
-   * Hide conversation state banner
-   */
-  hideStateBanner() {
-    const banner = this.container.querySelector('#conversation-state-banner');
-    if (banner) {
-      banner.style.display = 'none';
-    }
-  }
-
-  /**
-   * Auto-scroll to bottom of messages
-   */
-  scrollToBottom() {
-    const messagesContent = this.container.querySelector('#messages-content');
-    if (messagesContent) {
-      messagesContent.scrollTop = messagesContent.scrollHeight;
-    }
-  }
-
-  /**
-   * Show notification for new message
-   * @param {Object} message - New message object
-   * @param {Object} metadata - Message metadata
-   */
-  showNewMessageNotification(message, metadata) {
-    // Update banner if it's showing to reflect new activity
-    if (this.selectedConversationId) {
-      const banner = this.container.querySelector('#conversation-state-banner');
-      if (banner && banner.style.display !== 'none') {
-        // Temporarily highlight the banner to show activity
-        banner.style.backgroundColor = 'rgba(213, 116, 85, 0.1)';
-        setTimeout(() => {
-          banner.style.backgroundColor = '';
-        }, 1000);
-      }
-    }
-    
-    // Could add visual indicator for new message (pulse, notification badge, etc.)
-  }
-
-  /**
-   * Load more messages (for infinite scroll)
-   * @param {string} conversationId - Conversation ID
-   * @param {boolean} isInitialLoad - Whether this is the initial load
-   */
-  async loadMoreMessages(conversationId, isInitialLoad = false) {
-    const messagesContent = this.container.querySelector('#messages-content');
-    if (!messagesContent) return;
-    
-    // Prevent concurrent loading
-    if (this.messagesPagination.isLoading || !this.messagesPagination.hasMore) {
-      return;
-    }
-    
-    // Ensure we're loading for the correct conversation
-    if (this.messagesPagination.conversationId !== conversationId) {
-      return;
-    }
-    
-    try {
-      this.messagesPagination.isLoading = true;
-      
-      if (isInitialLoad) {
-        // Show loading state for initial load
-        messagesContent.innerHTML = `
-          <div class="messages-loading">
-            <div class="loading-spinner"></div>
-            <span>Loading messages...</span>
-          </div>
-        `;
-      } else {
-        // Show loading indicator at top for infinite scroll
-        this.showMessagesLoadingIndicator(true);
-      }
-      
-      // Fetch paginated messages from the server
-      const messagesData = await this.dataService.cachedFetch(
-        `/api/conversations/${conversationId}/messages?page=${this.messagesPagination.currentPage}&limit=${this.messagesPagination.limit}`
-      );
-      
-      if (messagesData && messagesData.messages) {
-        // Update pagination state - handle both paginated and non-paginated responses
-        if (messagesData.pagination) {
-          // Paginated response
-          this.messagesPagination.hasMore = messagesData.pagination.hasMore;
-          this.messagesPagination.currentPage = messagesData.pagination.page + 1;
-        } else {
-          // Non-paginated response (fallback) - treat as complete data
-          this.messagesPagination.hasMore = false;
-          this.messagesPagination.currentPage = 1;
-        }
-        
-        // Get existing messages or initialize
-        let existingMessages = this.loadedMessages.get(conversationId) || [];
-        
-        if (isInitialLoad) {
-          // For initial load, replace all messages
-          existingMessages = messagesData.messages;
-        } else {
-          // For infinite scroll, prepend older messages (they come in chronological order)
-          existingMessages = [...messagesData.messages, ...existingMessages];
-        }
-        
-        // Cache the combined messages
-        this.loadedMessages.set(conversationId, existingMessages);
-        
-        // Render messages
-        this.renderCachedMessages(existingMessages, !isInitialLoad);
-        
-        // Setup scroll listener for infinite scroll (only on initial load)
-        if (isInitialLoad) {
-          this.setupMessagesScrollListener(conversationId);
-        }
-        
-        
-      } else if (isInitialLoad) {
-        messagesContent.innerHTML = `
-          <div class="no-messages-found">
-            <div class="no-messages-icon">💭</div>
-            <h4>No messages found</h4>
-            <p>This conversation has no messages or they could not be loaded.</p>
-          </div>
-        `;
-      }
-      
-    } catch (error) {
-      console.error('Error loading messages:', error);
-      
-      if (isInitialLoad) {
-        messagesContent.innerHTML = `
-          <div class="messages-error">
-            <span class="error-icon">⚠️</span>
-            <span>Failed to load messages</span>
-            <button class="retry-messages" data-conversation-id="${conversationId}">Retry</button>
-          </div>
-        `;
-        
-        // Bind retry button event
-        const retryBtn = messagesContent.querySelector('.retry-messages');
-        if (retryBtn) {
-          retryBtn.addEventListener('click', () => {
-            this.loadConversationMessages(conversationId);
-          });
-        }
-      }
-    } finally {
-      this.messagesPagination.isLoading = false;
-      if (!isInitialLoad) {
-        this.showMessagesLoadingIndicator(false);
-      }
-    }
-  }
-  
-  /**
-   * Render cached messages
-   * @param {Array} messages - Array of messages
-   * @param {boolean} prepend - Whether to prepend messages (for infinite scroll)
-   */
-  renderCachedMessages(messages, prepend = false) {
-    
-    
-    const messagesContent = this.container.querySelector('#messages-content');
-    if (!messagesContent) {
-      console.warn(`⚠️ messages-content element not found!`);
-      return;
-    }
-    
-    // Store messages globally for tool result lookup
-    if (typeof window !== 'undefined') {
-      window.currentMessages = messages;
-    }
-    
-    const messageHTML = `
-      <div class="messages-loading-indicator" style="display: none;">
-        <div class="loading-spinner small"></div>
-        <span>Loading older messages...</span>
-      </div>
-      <div class="messages-list">
-        ${messages.map(msg => this.renderMessage(msg)).join('')}
-      </div>
-    `;
-    
-    if (prepend) {
-      // For infinite scroll, we need to maintain scroll position
-      const oldScrollHeight = messagesContent.scrollHeight;
-      
-      // Update content
-      messagesContent.innerHTML = messageHTML;
-      
-      // Restore scroll position relative to the bottom
-      const newScrollHeight = messagesContent.scrollHeight;
-      const scrollDifference = newScrollHeight - oldScrollHeight;
-      messagesContent.scrollTop += scrollDifference;
-    } else {
-      // Initial load - just replace content and scroll to bottom
-      messagesContent.innerHTML = messageHTML;
-      
-      // Scroll to bottom for new conversation load
-      setTimeout(() => {
-        messagesContent.scrollTop = messagesContent.scrollHeight;
-      }, 100);
-    }
-    
-    // Bind tool display events
-    this.toolDisplay.bindEvents(messagesContent);
-  }
-
-  /**
-   * Show/hide messages loading indicator
-   * @param {boolean} show - Whether to show the indicator
-   */
-  showMessagesLoadingIndicator(show) {
-    const messagesContent = this.container.querySelector('#messages-content');
-    if (!messagesContent) return;
-    
-    const indicator = messagesContent.querySelector('.messages-loading-indicator');
-    if (indicator) {
-      indicator.style.display = show ? 'flex' : 'none';
-    }
-  }
-
-  /**
-   * Setup scroll listener for infinite scroll in messages
-   * @param {string} conversationId - Current conversation ID
-   */
-  setupMessagesScrollListener(conversationId) {
-    const messagesContent = this.container.querySelector('#messages-content');
-    if (!messagesContent) return;
-    
-    // Remove existing listener if any
-    if (this.messagesScrollListener) {
-      messagesContent.removeEventListener('scroll', this.messagesScrollListener);
-    }
-    
-    // Create new listener
-    this.messagesScrollListener = () => {
-      // Check if we've scrolled near the top (for loading older messages)
-      const scrollTop = messagesContent.scrollTop;
-      const threshold = 100; // pixels from top
-      
-      if (scrollTop <= threshold && this.messagesPagination.hasMore && !this.messagesPagination.isLoading) {
-        this.loadMoreMessages(conversationId, false);
-      }
-    };
-    
-    // Add listener
-    messagesContent.addEventListener('scroll', this.messagesScrollListener);
-  }
-  
-  /**
-   * Render a single message with terminal-style formatting
-   * @param {Object} message - Message object
-   * @returns {string} HTML string
-   */
-  renderMessage(message) {
-    const timestamp = this.formatRelativeTime(new Date(message.timestamp));
-    const fullTimestamp = new Date(message.timestamp).toLocaleString();
-    // Compact summaries should be displayed as assistant messages even if marked as 'user'
-    const isUser = message.role === 'user' && !message.isCompactSummary;
-    
-    
-    // Detect if message contains tools
-    const hasTools = Array.isArray(message.content) && 
-                    message.content.some(block => block.type === 'tool_use');
-    const toolCount = hasTools ? 
-                     message.content.filter(block => block.type === 'tool_use').length : 0;
-    
-    // Terminal-style prompt
-    const prompt = isUser ? '>' : '#';
-    const roleLabel = isUser ? 'user' : 'claude';
-    
-    // Get message ID (short version for display)
-    const messageId = message.id ? message.id.slice(-8) : 'unknown';
-    
-    return `
-      <div class="terminal-message ${isUser ? 'user' : 'assistant'}" data-message-id="${message.id || ''}">
-        <div class="message-container">
-          <div class="message-prompt">
-            <span class="prompt-char">${prompt}</span>
-            <div class="message-metadata">
-              <span class="timestamp" title="${fullTimestamp}">${timestamp}</span>
-              <span class="role-label">${roleLabel}</span>
-              <span class="message-id" title="Message ID: ${message.id || 'unknown'}">[${messageId}]</span>
-              ${message.usage ? `
-                <span class="tokens">
-                  ${message.usage.input_tokens > 0 ? `i:${message.usage.input_tokens}` : ''}
-                  ${message.usage.output_tokens > 0 ? `o:${message.usage.output_tokens}` : ''}
-                  ${message.usage.cache_read_input_tokens > 0 ? `c:${message.usage.cache_read_input_tokens}` : ''}
-                </span>
-              ` : ''}
-              ${hasTools ? `<span class="tool-count">[${toolCount}t]</span>` : ''}
-              ${message.model ? `<span class="model">[${message.model.replace('claude-', '').replace('-20250514', '')}]</span>` : ''}
-            </div>
-          </div>
-          <div class="message-body">
-            ${this.formatMessageContent(message.content, message)}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  
-  /**
-   * Format message content with support for text and tool calls
-   * @param {string|Array} content - Message content
-   * @returns {string} Formatted HTML
-   */
-  formatMessageContent(content, message = null) {
-    let result = '';
-    
-    // Handle different content formats
-    if (Array.isArray(content)) {
-      // Assistant messages with content blocks
-      content.forEach((block, index) => {
-        if (block.type === 'text') {
-          result += this.formatTextContent(block.text);
-        } else if (block.type === 'tool_use') {
-          // Log only tool rendering for debugging
-          console.log('🔧 WebSocket: Rendering tool', { name: block.name, hasResults: !!message?.toolResults });
-          result += this.toolDisplay.renderToolUse(block, message?.toolResults);
-        } else if (block.type === 'tool_result') {
-          result += this.toolDisplay.renderToolResult(block);
-        }
-      });
-    } else if (typeof content === 'string' && content.trim() !== '') {
-      // User messages with plain text - check for special patterns
-      if (content.includes('Tool Result') && content.length > 1000) {
-        // This is likely a large tool result that should be handled specially
-        result += this.formatLargeToolResult(content);
-      } else {
-        // Check if this is a confirmation response "[ok]" or similar
-        const enhancedContent = this.enhanceConfirmationMessage(content, message);
-        result = this.formatTextContent(enhancedContent);
-      }
-    } else if (content && typeof content === 'object') {
-      // Handle edge cases where content might be an object
-      result = this.formatTextContent(JSON.stringify(content, null, 2));
-    }
-    
-    return result || '<em class="empty-content">No displayable content available</em>';
-  }
-  
-  /**
-   * Format regular text content with enhanced Markdown support
-   * @param {string} text - Text content
-   * @returns {string} Formatted HTML
-   */
-  /**
-   * Apply markdown formatting to HTML-escaped text
-   * @param {string} escapedText - HTML-escaped text to format
-   * @returns {string} Formatted text with markdown styling
-   */
-  applyMarkdownFormatting(escapedText) {
-    let formattedText = escapedText;
-    
-    // 1. Code blocks (must be first to avoid conflicts)
-    formattedText = formattedText
-      .replace(/```(\w+)?\n([\s\S]*?)```/g, '<pre class="code-block" data-language="$1"><code>$2</code></pre>');
-    
-    // 2. Headers (h1-h6)
-    formattedText = formattedText
-      .replace(/^### (.*$)/gm, '<h3 class="markdown-h3">$1</h3>')
-      .replace(/^## (.*$)/gm, '<h2 class="markdown-h2">$1</h2>')
-      .replace(/^# (.*$)/gm, '<h1 class="markdown-h1">$1</h1>')
-      .replace(/^#### (.*$)/gm, '<h4 class="markdown-h4">$1</h4>')
-      .replace(/^##### (.*$)/gm, '<h5 class="markdown-h5">$1</h5>')
-      .replace(/^###### (.*$)/gm, '<h6 class="markdown-h6">$1</h6>');
-    
-    // 3. Bold and italic text
-    formattedText = formattedText
-      .replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em class="markdown-bold-italic">$1</em></strong>')
-      .replace(/\*\*(.*?)\*\*/g, '<strong class="markdown-bold">$1</strong>')
-      .replace(/\*(.*?)\*/g, '<em class="markdown-italic">$1</em>')
-      .replace(/\_\_\_(.*?)\_\_\_/g, '<strong><em class="markdown-bold-italic">$1</em></strong>')
-      .replace(/\_\_(.*?)\_\_/g, '<strong class="markdown-bold">$1</strong>')
-      .replace(/\_(.*?)\_/g, '<em class="markdown-italic">$1</em>');
-    
-    // 4. Strikethrough
-    formattedText = formattedText
-      .replace(/~~(.*?)~~/g, '<del class="markdown-strikethrough">$1</del>');
-    
-    // 5. Links
-    formattedText = formattedText
-      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="markdown-link" target="_blank" rel="noopener noreferrer">$1</a>');
-    
-    // 6. Inline code (after other formatting to avoid conflicts)
-    formattedText = formattedText
-      .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
-    
-    // 7. Lists (unordered)
-    formattedText = formattedText
-      .replace(/^[\s]*[\*\-\+][\s]+(.*)$/gm, '<li class="markdown-list-item">$1</li>');
-    
-    // 8. Lists (ordered)
-    formattedText = formattedText
-      .replace(/^[\s]*\d+\.[\s]+(.*)$/gm, '<li class="markdown-ordered-item">$1</li>');
-    
-    // 9. Wrap consecutive list items in ul/ol tags
-    formattedText = formattedText
-      .replace(/(<li class="markdown-list-item">.*<\/li>)/gs, (match) => {
-        return '<ul class="markdown-list">' + match + '</ul>';
-      })
-      .replace(/(<li class="markdown-ordered-item">.*<\/li>)/gs, (match) => {
-        return '<ol class="markdown-ordered-list">' + match + '</ol>';
-      });
-    
-    // 10. Blockquotes
-    formattedText = formattedText
-      .replace(/^&gt;[\s]*(.*)$/gm, '<blockquote class="markdown-blockquote">$1</blockquote>');
-    
-    // 11. Horizontal rules
-    formattedText = formattedText
-      .replace(/^[\s]*---[\s]*$/gm, '<hr class="markdown-hr">')
-      .replace(/^[\s]*\*\*\*[\s]*$/gm, '<hr class="markdown-hr">');
-    
-    // 12. Line breaks (last to avoid conflicts)
-    formattedText = formattedText
-      .replace(/\n\n/g, '</p><p class="markdown-paragraph">')
-      .replace(/\n/g, '<br>');
-    
-    // 13. Wrap in paragraph if not already wrapped
-    if (!formattedText.includes('<p') && !formattedText.includes('<h') && 
-        !formattedText.includes('<ul') && !formattedText.includes('<ol') && 
-        !formattedText.includes('<blockquote')) {
-      formattedText = '<p class="markdown-paragraph">' + formattedText + '</p>';
-    }
-    
-    return formattedText;
-  }
-
-  formatTextContent(text) {
-    if (!text || text.trim() === '') return '';
-    
-    // Escape HTML to prevent XSS
-    const escapeHtml = (str) => {
-      const div = document.createElement('div');
-      div.textContent = str;
-      return div.innerHTML;
-    };
-    
-    // Check if text is too long and needs truncation
-    const lines = text.split('\n');
-    const maxVisibleLines = 20; // Increased from 5 to 20 for better visibility
-    
-    if (lines.length > maxVisibleLines) {
-      const visibleLines = lines.slice(0, maxVisibleLines);
-      const hiddenLinesCount = lines.length - maxVisibleLines;
-      const contentId = 'text_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-      
-      // Store full content for modal
-      if (typeof window !== 'undefined') {
-        window.storedContent = window.storedContent || {};
-        window.storedContent[contentId] = text;
-      }
-      
-      const previewText = escapeHtml(visibleLines.join('\n'));
-      const showMoreButton = `<button class="show-results-btn text-expand-btn" data-content-id="${contentId}">Show +${hiddenLinesCount} lines</button>`;
-      
-      // Apply markdown formatting to preview
-      let formattedPreview = this.applyMarkdownFormatting(previewText);
-      
-      return `<div class="text-content-preview">${formattedPreview}<div class="text-expand-section"><span class="continuation">… +${hiddenLinesCount} lines hidden</span> ${showMoreButton}</div></div>`;
-    }
-    
-    // For non-truncated content, apply full formatting
-    let formattedText = escapeHtml(text);
-    formattedText = this.applyMarkdownFormatting(formattedText);
-    
-    return formattedText;
-  }
-
-  /**
-   * Format large tool result content safely
-   * @param {string} content - Large tool result content
-   * @returns {string} Safe formatted content
-   */
-  formatLargeToolResult(content) {
-    // Extract tool result ID if present
-    const toolIdMatch = content.match(/Tool Result\s+([A-Za-z0-9]+)/);
-    const toolId = toolIdMatch ? toolIdMatch[1] : 'unknown';
-    
-    const escapeHtml = (str) => {
-      const div = document.createElement('div');
-      div.textContent = str;
-      return div.innerHTML;
-    };
-    
-    const preview = content.length > 80 
-      ? escapeHtml(content.substring(0, 80)) + '...' 
-      : escapeHtml(content);
-    
-    return `
-      <div class="terminal-tool tool-result large">
-        <span class="tool-prompt">></span>
-        <span class="tool-status">[LARGE]</span>
-        <span class="tool-id">[${toolId}]</span>
-        <span class="tool-output">${content.length}b: ${preview}</span>
-      </div>
-    `;
-  }
-
-  /**
-   * Enhance confirmation messages like "[ok]" with context information
-   * @param {string} content - Original message content
-   * @param {Object} message - Full message object with metadata
-   * @returns {string} Enhanced message content
-   */
-  enhanceConfirmationMessage(content, message) {
-    const trimmedContent = content.trim();
-    
-    // Detect simple confirmation patterns
-    const confirmationPatterns = [
-      /^\[ok\]$/i,
-      /^ok$/i,
-      /^yes$/i,
-      /^\[yes\]$/i,
-      /^y$/i,
-      /^\[y\]$/i,
-      /^1$/,  // Choice selection
-      /^2$/,
-      /^3$/
-    ];
-    
-    const isConfirmation = confirmationPatterns.some(pattern => pattern.test(trimmedContent));
-    
-    if (isConfirmation && message) {
-      // Try to extract context from the message timestamp
-      const messageTime = message.timestamp ? new Date(message.timestamp).toLocaleTimeString() : 'unknown time';
-      
-      // Enhanced display for confirmation messages
-      return `${content} <span class="confirmation-context">(User confirmation at ${messageTime})</span>`;
-    }
-    
-    // For other potential confirmation-like messages, check if they seem like choices
-    if (/^[1-9]$/.test(trimmedContent)) {
-      return `${content} <span class="confirmation-context">(Menu selection)</span>`;
-    }
-    
-    // Check for common CLI responses
-    if (/^(continue|proceed|accept|confirm|done)$/i.test(trimmedContent)) {
-      return `${content} <span class="confirmation-context">(User command)</span>`;
-    }
-    
-    return content;
-  }
-
-  /**
-   * Detect which agent is being used in a conversation
-   * @param {string} conversationId - Conversation ID
-   * @returns {Object|null} Agent info or null if no agent detected
-   */
-  detectAgentInConversation(conversationId) {
-    const messages = this.loadedMessages.get(conversationId) || [];
-    
-    // Look for agent indicators in recent messages
-    for (let i = messages.length - 1; i >= Math.max(0, messages.length - 10); i--) {
-      const message = messages[i];
-      
-      if (message.role === 'assistant' && message.content) {
-        let contentText = '';
-        
-        // Extract text content from message
-        if (Array.isArray(message.content)) {
-          contentText = message.content
-            .filter(block => block.type === 'text')
-            .map(block => block.text)
-            .join(' ');
-        } else if (typeof message.content === 'string') {
-          contentText = message.content;
-        }
-        
-        // Check for agent usage patterns
-        const agentPatterns = [
-          /use(?:s|d)?\s+the\s+([a-zA-Z0-9\-_]+)\s+(?:sub\s+)?agent/i,
-          /([a-zA-Z0-9\-_]+)\s+agent\s+(?:to|for|will)/i,
-          /delegat(?:e|ing)\s+(?:to|task|this)\s+(?:the\s+)?([a-zA-Z0-9\-_]+)\s+agent/i,
-          /invok(?:e|ing)\s+(?:the\s+)?([a-zA-Z0-9\-_]+)\s+agent/i
-        ];
-        
-        for (const pattern of agentPatterns) {
-          const match = contentText.match(pattern);
-          if (match) {
-            const detectedAgentName = match[1].toLowerCase();
-            
-            // Find matching agent from our loaded agents
-            const agent = this.agents.find(a => 
-              a.name.toLowerCase() === detectedAgentName ||
-              a.name.toLowerCase().replace(/-/g, '') === detectedAgentName.replace(/-/g, '')
-            );
-            
-            if (agent) {
-              return {
-                agent,
-                detectedAt: message.timestamp,
-                confidence: 'high'
-              };
-            }
-          }
-        }
-      }
-    }
-    
-    return null;
-  }
-
-  /**
-   * Get agent color for conversation
-   * @param {string} conversationId - Conversation ID
-   * @returns {string|null} Agent color or null
-   */
-  getAgentColorForConversation(conversationId) {
-    const agentInfo = this.detectAgentInConversation(conversationId);
-    return agentInfo ? agentInfo.agent.color : null;
-  }
-
-  /**
-   * Get agent name for conversation
-   * @param {string} conversationId - Conversation ID
-   * @returns {string|null} Agent name or null
-   */
-  getAgentNameForConversation(conversationId) {
-    const agentInfo = this.detectAgentInConversation(conversationId);
-    return agentInfo ? agentInfo.agent.name : null;
-  }
-
-  /**
-   * Format relative time
-   * @param {Date} date - Date to format
-   * @returns {string} Relative time string
-   */
-  formatRelativeTime(date) {
-    const now = new Date();
-    const diffMs = now - date;
-    const diffSecs = Math.floor(diffMs / 1000);
-    const diffMins = Math.floor(diffSecs / 60);
-    const diffHours = Math.floor(diffMins / 60);
-    const diffDays = Math.floor(diffHours / 24);
-
-    if (diffSecs < 60) return 'Just now';
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
-    return date.toLocaleDateString();
-  }
-
-  /**
-   * Update clear filters button visibility
-   */
-  updateClearFiltersButton() {
-    const clearBtn = this.container.querySelector('#clear-filters');
-    if (!clearBtn) return; // Guard against null when AgentsPage isn't rendered
-    
-    const hasActiveFilters = this.filters.status !== 'all' || 
-                           this.filters.timeRange !== '7d' || 
-                           this.filters.search !== '';
-    clearBtn.style.display = hasActiveFilters ? 'inline-block' : 'none';
-  }
-
-  /**
-   * Handle list action
-   * @param {string} action - Action type
-   * @param {string} conversationId - Conversation ID
-   */
-  handleListAction(action, conversationId) {
-    switch (action) {
-      case 'view':
-        this.viewConversation(conversationId);
-        break;
-    }
-  }
-
-  /**
-   * Filter conversations based on current filters
-   * @param {Array} conversations - All conversations
-   * @param {Object} states - Conversation states
-   * @returns {Array} Filtered conversations
-   */
-  filterConversations(conversations, states) {
-    let filtered = conversations;
-    
-    // Filter by status
-    if (this.filters.status !== 'all') {
-      filtered = filtered.filter(conv => {
-        const state = states[conv.id] || 'unknown';
-        const category = this.getStateCategory(state);
-        return category === this.filters.status;
-      });
-    }
-    
-    // Filter by time range
-    const timeRange = this.getTimeRangeMs(this.filters.timeRange);
-    if (timeRange > 0) {
-      const cutoff = Date.now() - timeRange;
-      filtered = filtered.filter(conv => {
-        const lastModified = new Date(conv.lastModified).getTime();
-        return lastModified >= cutoff;
-      });
-    }
-    
-    // Filter by search
-    if (this.filters.search) {
-      const searchLower = this.filters.search.toLowerCase();
-      filtered = filtered.filter(conv => {
-        return (conv.title || '').toLowerCase().includes(searchLower) ||
-               (conv.project || '').toLowerCase().includes(searchLower) ||
-               (conv.lastMessage || '').toLowerCase().includes(searchLower);
-      });
-    }
-    
-    return filtered;
-  }
-
-  /**
-   * Get time range in milliseconds
-   * @param {string} range - Time range string
-   * @returns {number} Milliseconds
-   */
-  getTimeRangeMs(range) {
-    const ranges = {
-      '1h': 60 * 60 * 1000,
-      '24h': 24 * 60 * 60 * 1000,
-      '7d': 7 * 24 * 60 * 60 * 1000,
-      '30d': 30 * 24 * 60 * 60 * 1000
-    };
-    return ranges[range] || 0;
-  }
-
-  /**
-   * Get state category for filtering
-   * @param {string} state - Detailed conversation state
-   * @returns {string} Category: 'active' or 'inactive'
-   */
-  getStateCategory(state) {
-    // Active states - conversation is currently being used or recently active
-    const activeStates = [
-      'Claude Code working...',
-      'Awaiting user input...',
-      'User typing...',
-      'Awaiting response...',
-      'Recently active'
-    ];
-    
-    // Inactive states - conversation is idle or old
-    const inactiveStates = [
-      'Idle',
-      'Inactive',
-      'Old',
-      'unknown'
-    ];
-    
-    if (activeStates.includes(state)) {
-      return 'active';
-    } else if (inactiveStates.includes(state)) {
-      return 'inactive';
-    } else {
-      // Default for any unknown states
-      return 'inactive';
-    }
-  }
-
-  /**
-   * Get simple conversation preview text (avoids repeating metadata)
-   * @param {Object} conv - Conversation object
-   * @returns {string} Preview text
-   */
-  getSimpleConversationPreview(conv) {
-    // If we have a last message, show it (this is the most useful info)
-    if (conv.lastMessage && conv.lastMessage.trim()) {
-      const lastMsg = conv.lastMessage.trim();
-      
-      // Check if last message is a simple confirmation and try to make it more descriptive
-      if (this.isSimpleConfirmation(lastMsg)) {
-        const messageCount = conv.messageCount || 0;
-        const lastActivity = conv.lastModified ? this.formatRelativeTime(new Date(conv.lastModified)) : 'recently';
-        return `User confirmed action • ${messageCount} messages • ${lastActivity}`;
-      }
-      
-      // Check if it's a tool-related message
-      if (lastMsg.includes('Tool Result') || lastMsg.includes('[Tool:')) {
-        return `Tool execution completed • ${this.truncateText(lastMsg, 60)}`;
-      }
-      
-      return this.truncateText(lastMsg, 80);
-    }
-    
-    // For empty conversations, show descriptive text
-    const messageCount = conv.messageCount || 0;
-    if (messageCount === 0) {
-      return 'Empty conversation - click to start chatting';
-    }
-    
-    // For conversations without lastMessage but with messages, show informative text
-    const lastActivity = conv.lastModified ? this.formatRelativeTime(new Date(conv.lastModified)) : 'unknown';
-    return `${messageCount} messages • Last activity ${lastActivity}`;
-  }
-  
-  /**
-   * Check if a message is a simple confirmation
-   * @param {string} message - Message content
-   * @returns {boolean} True if it's a simple confirmation
-   */
-  isSimpleConfirmation(message) {
-    const trimmed = message.trim();
-    const confirmationPatterns = [
-      /^\[ok\]$/i,
-      /^ok$/i,
-      /^yes$/i,
-      /^\[yes\]$/i,
-      /^y$/i,
-      /^\[y\]$/i,
-      /^[1-9]$/,  // Choice selection
-      /^(continue|proceed|accept|confirm|done)$/i
-    ];
-    
-    return confirmationPatterns.some(pattern => pattern.test(trimmed));
-  }
-
-  /**
-   * Get conversation preview text (legacy method - still used in other places)
-   * @param {Object} conv - Conversation object
-   * @param {string} state - Conversation state
-   * @returns {string} Preview text
-   */
-  getConversationPreview(conv, state) {
-    // If we have a last message, show it
-    if (conv.lastMessage && conv.lastMessage.trim()) {
-      return this.truncateText(conv.lastMessage, 60);
-    }
-    
-    // Otherwise, show conversation info based on state and metadata
-    const messageCount = conv.messageCount || 0;
-    
-    if (messageCount === 0) {
-      return `Empty conversation • Project: ${conv.project || 'Unknown'}`;
-    }
-    
-    // Show state-based preview
-    if (state === 'Claude Code working...') {
-      return `Claude is working • ${messageCount} messages`;
-    } else if (state === 'Awaiting user input...') {
-      return `Waiting for your input • ${messageCount} messages`;
-    } else if (state === 'User typing...') {
-      return `Ready for your message • ${messageCount} messages`;
-    } else if (state === 'Recently active') {
-      return `Recently active • ${messageCount} messages`;
-    } else {
-      return `${messageCount} messages • Last active ${this.formatRelativeTime(new Date(conv.lastModified))}`;
-    }
-  }
-
-  /**
-   * Get state CSS class
-   * @param {string} state - Conversation state
-   * @returns {string} CSS class
-   */
-  getStateClass(state) {
-    const stateClasses = {
-      'Claude Code working...': 'status-active',
-      'Awaiting user input...': 'status-waiting',
-      'User typing...': 'status-typing',
-      'Awaiting response...': 'status-pending',
-      'Recently active': 'status-recent',
-      'Idle': 'status-idle',
-      'Inactive': 'status-inactive',
-      'Old': 'status-old',
-      'unknown': 'status-unknown'
-    };
-    return stateClasses[state] || 'status-unknown';
-  }
-
-  /**
-   * Get state label
-   * @param {string} state - Conversation state
-   * @returns {string} Human readable label
-   */
-  getStateLabel(state) {
-    const stateLabels = {
-      'Claude Code working...': 'Working',
-      'Awaiting user input...': 'Awaiting input',
-      'User typing...': 'Typing',
-      'Awaiting response...': 'Awaiting response',
-      'Recently active': 'Recent',
-      'Idle': 'Idle',
-      'Inactive': 'Inactive',
-      'Old': 'Old',
-      'unknown': 'Unknown'
-    };
-    return stateLabels[state] || state;
-  }
-
-  /**
-   * Truncate text to specified length
-   * @param {string} text - Text to truncate
-   * @param {number} maxLength - Maximum length
-   * @returns {string} Truncated text
-   */
-  truncateText(text, maxLength) {
-    if (!text || text.length <= maxLength) return text;
-    return text.substring(0, maxLength - 3) + '...';
-  }
-
-  /**
-   * Update filter
-   * @param {string} filterName - Filter name
-   * @param {string} value - Filter value
-   */
-  updateFilter(filterName, value) {
-    this.filters[filterName] = value;
-    // When filters change, restart from beginning
-    this.refreshFromBeginning();
-  }
-
-  /**
-   * Clear search
-   */
-  clearSearch() {
-    const searchInput = this.container.querySelector('#search-filter');
-    if (!searchInput) return; // Guard against null when AgentsPage isn't rendered
-    
-    searchInput.value = '';
-    this.updateFilter('search', '');
-  }
-
-  /**
-   * Clear all filters
-   */
-  clearAllFilters() {
-    this.filters = {
-      status: 'all',
-      timeRange: '7d',
-      search: ''
-    };
-    
-    // Reset UI
-    const statusFilter = this.container.querySelector('#status-filter');
-    const timeFilter = this.container.querySelector('#time-filter');
-    const searchFilter = this.container.querySelector('#search-filter');
-    
-    if (statusFilter) statusFilter.value = 'all';
-    if (timeFilter) timeFilter.value = '7d';
-    if (searchFilter) searchFilter.value = '';
-    
-    // Restart from beginning when clearing filters
-    this.refreshFromBeginning();
-  }
-
-  /**
-   * Refresh conversations display
-   */
-  refreshConversationsDisplay() {
-    const conversations = this.stateService.getStateProperty('conversations') || [];
-    const statesData = this.stateService.getStateProperty('conversationStates') || {};
-    // Extract activeStates from the stored state data
-    const activeStates = statesData?.activeStates || {};
-    this.renderConversationsList(conversations, activeStates);
-  }
-  
-  /**
-   * Refresh from beginning - resets pagination
-   */
-  async refreshFromBeginning() {
-    // Clear cache
-    this.loadedConversations = [];
-    this.loadedMessages.clear();
-    
-    // Reset pagination
-    this.pagination = {
-      currentPage: 0,
-      limit: 10,
-      hasMore: true,
-      isLoading: false
-    };
-    
-    // Clear list and reload
-    const listContainer = this.container.querySelector('#conversations-list');
-    if (listContainer) {
-      listContainer.innerHTML = '';
-    }
-    
-    await this.loadConversationsData();
-  }
-
-  /**
-   * Refresh conversations data
-   */
-  async refreshConversations() {
-    const refreshBtn = this.container.querySelector('#refresh-conversations');
-    if (!refreshBtn) return; // Guard against null when AgentsPage isn't rendered
-    
-    refreshBtn.disabled = true;
-    const iconElement = refreshBtn.querySelector('.btn-icon');
-    if (iconElement) {
-      iconElement.style.animation = 'spin 1s linear infinite';
-    }
-
-    try {
-      // Clear both server and client cache to force fresh data
-      await this.dataService.clearServerCache('conversations');
-      await this.loadConversationsData();
-    } catch (error) {
-      console.error('Error refreshing conversations:', error);
-      this.stateService.setError('Failed to refresh conversations');
-    } finally {
-      refreshBtn.disabled = false;
-      if (iconElement) {
-        iconElement.style.animation = '';
-      }
-    }
-  }
-
-  /**
-   * Check if there are active filters
-   * @returns {boolean} True if filters are active
-   */
-  hasActiveFilters() {
-    const searchInput = this.container.querySelector('#conversation-search');
-    const searchTerm = searchInput ? searchInput.value.trim().toLowerCase() : '';
-    
-    // Check if search filter is active
-    if (searchTerm) {
-      return true;
-    }
-    
-    // Check if state filters are active
-    const filterButtons = this.container.querySelectorAll('.filter-btn');
-    const activeFilters = Array.from(filterButtons).filter(btn => 
-      btn.classList.contains('active') && btn.getAttribute('data-state') !== 'all'
-    );
-    
-    return activeFilters.length > 0;
-  }
-
-  /**
-   * Update results count
-   * @param {number} count - Number of results
-   * @param {boolean} hasActiveFilters - Whether filters are active
-   */
-  updateResultsCount(count, hasActiveFilters = false) {
-    // Update main results count
-    const resultsCount = this.container.querySelector('#results-count');
-    if (resultsCount) {
-      let countText = `${count} conversation${count !== 1 ? 's' : ''} found`;
-      if (hasActiveFilters && this.pagination && this.pagination.totalCount && count < this.pagination.totalCount) {
-        countText += ` (filtered from ${this.pagination.totalCount})`;
-      }
-      resultsCount.textContent = countText;
-    }
-    
-    // Update sidebar count
-    const sidebarCount = this.container.querySelector('#sidebar-count');
-    if (sidebarCount) {
-      sidebarCount.textContent = count;
-    }
-  }
-
-  /**
-   * Show empty state
-   */
-  showEmptyState() {
-    const conversationsList = this.container.querySelector('#conversations-list');
-    const emptyState = this.container.querySelector('#empty-state');
-    if (!conversationsList || !emptyState) return; // Guard against null when AgentsPage isn't rendered
-    
-    conversationsList.style.display = 'none';
-    emptyState.style.display = 'flex';
-  }
-
-  /**
-   * Hide empty state
-   */
-  hideEmptyState() {
-    const conversationsList = this.container.querySelector('#conversations-list');
-    const emptyState = this.container.querySelector('#empty-state');
-    if (!conversationsList || !emptyState) return; // Guard against null when AgentsPage isn't rendered
-    
-    conversationsList.style.display = 'block';
-    emptyState.style.display = 'none';
-  }
-
-  /**
-   * Toggle between grid and table view
-   * @param {string} view - View type ('grid' or 'table')
-   */
-  toggleView(view) {
-    const toggleBtns = this.container.querySelectorAll('.toggle-btn');
-    toggleBtns.forEach(btn => {
-      btn.classList.toggle('active', btn.dataset.view === view);
-    });
-
-    const gridElement = this.container.querySelector('#conversations-grid');
-    const tableSection = this.container.querySelector('.conversations-table-section');
-    
-    if (!gridElement || !tableSection) return; // Guard against null when AgentsPage isn't rendered
-    
-    const gridSection = gridElement.parentNode;
-
-    if (view === 'table') {
-      gridSection.style.display = 'none';
-      tableSection.style.display = 'block';
-    } else {
-      gridSection.style.display = 'block';
-      tableSection.style.display = 'none';
-    }
-  }
-
-  /**
-   * View conversation details
-   * @param {string} conversationId - Conversation ID
-   */
-  viewConversation(conversationId) {
-    // This would open a detailed conversation view
-    // Implementation would show conversation details modal or navigate to detail page
-  }
-
-  /**
-   * Export single conversation
-   * @param {string} conversationId - Conversation ID
-   */
-  exportSingleConversation(conversationId) {
-    const conversations = this.stateService.getStateProperty('conversations') || [];
-    const conversation = conversations.find(conv => conv.id === conversationId);
-    
-    if (conversation) {
-      const dataStr = JSON.stringify(conversation, null, 2);
-      const dataBlob = new Blob([dataStr], { type: 'application/json' });
-      const url = URL.createObjectURL(dataBlob);
-      
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = `conversation-${conversationId}-${new Date().toISOString().split('T')[0]}.json`;
-      link.click();
-      
-      URL.revokeObjectURL(url);
-    }
-  }
-
-  /**
-   * Export all conversations
-   */
-  exportConversations() {
-    const conversations = this.stateService.getStateProperty('conversations') || [];
-    const states = this.stateService.getStateProperty('conversationStates') || {};
-    const filteredConversations = this.filterConversations(conversations, states);
-    
-    const dataStr = JSON.stringify({
-      conversations: filteredConversations,
-      states: states,
-      exportDate: new Date().toISOString(),
-      filters: this.filters
-    }, null, 2);
-    
-    const dataBlob = new Blob([dataStr], { type: 'application/json' });
-    const url = URL.createObjectURL(dataBlob);
-    
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `claude-conversations-${new Date().toISOString().split('T')[0]}.json`;
-    link.click();
-    
-    URL.revokeObjectURL(url);
-  }
-
-  /**
-   * Update conversations display
-   * @param {Array} conversations - Conversations data
-   */
-  updateConversationsDisplay(conversations) {
-    const statesData = this.stateService.getStateProperty('conversationStates') || {};
-    const activeStates = statesData?.activeStates || {};
-    this.renderConversationsList(conversations, activeStates);
-  }
-
-  /**
-   * Update conversation states
-   * @param {Object} activeStates - Active conversation states (direct object, not nested)
-   */
-  updateConversationStates(activeStates) {
-    if (!this.isInitialized) {
-      console.warn('AgentsPage: updateConversationStates called before initialization');
-      return;
-    }
-    
-    // Check if we're still on the agents page by verifying our key element exists
-    const conversationsContainer = this.container.querySelector('#conversations-list');
-    if (!conversationsContainer) {
-      console.log('AgentsPage: Not on agents page, skipping conversation states update');
-      return;
-    }
-    
-    const conversations = this.stateService.getStateProperty('conversations') || [];
-    
-    
-    // Re-render conversation list with new states
-    this.renderConversationsList(conversations, activeStates || {});
-    
-    // Update banner if we have a selected conversation
-    if (this.selectedConversationId && activeStates && activeStates[this.selectedConversationId]) {
-      this.updateStateBanner(this.selectedConversationId, activeStates[this.selectedConversationId]);
-    }
-  }
-
-  /**
-   * Handle conversation state change
-   * @param {Object} _state - New state (unused but required by interface)
-   */
-  handleConversationStateChange(_state) {
-    this.refreshConversationsDisplay();
-  }
-
-  /**
-   * Update loading state
-   * @param {boolean} isLoading - Loading state
-   */
-  updateLoadingState(isLoading) {
-    const loadingState = this.container.querySelector('#conversations-loading');
-    if (loadingState) {
-      loadingState.style.display = isLoading ? 'flex' : 'none';
-    }
-  }
-
-  /**
-   * Update error state
-   * @param {Error|string} error - Error object or message
-   */
-  updateErrorState(error) {
-    const errorState = this.container.querySelector('#conversations-error');
-    const errorMessage = this.container.querySelector('.error-message');
-    
-    if (errorState && errorMessage) {
-      if (error) {
-        errorMessage.textContent = error.message || error;
-        errorState.style.display = 'flex';
-      } else {
-        errorState.style.display = 'none';
-      }
-    }
-  }
-
-  /**
-   * Destroy agents page
-   */
-  destroy() {
-    // Cleanup header component
-    if (this.headerComponent) {
-      this.headerComponent.destroy();
-      this.headerComponent = null;
-    }
-    
-    // Cleanup components
-    Object.values(this.components).forEach(component => {
-      if (component.destroy) {
-        component.destroy();
-      }
-    });
-    
-    // Cleanup scroll listeners
-    const messagesContent = this.container.querySelector('#messages-content');
-    if (messagesContent && this.messagesScrollListener) {
-      messagesContent.removeEventListener('scroll', this.messagesScrollListener);
-    }
-    
-    // Unsubscribe from state changes
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-    
-    this.isInitialized = false;
-  }
-}
-
-// Export for module use
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = AgentsPage;
-}