claude-code-templates 1.11.0 → 1.12.0

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

@@ -37,6 +37,10 @@ class AgentsPage {
     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
     
@@ -68,6 +72,7 @@ class AgentsPage {
       this.stateService.setLoading(true);
       await this.render();
       await this.initializeComponents();
+      await this.loadAgentsData();
       await this.loadConversationsData();
       this.isInitialized = true;
     } catch (error) {
@@ -546,39 +551,6 @@ class AgentsPage {
     }, 5000);
   }
 
-  /**
-   * Test console interaction functionality (for development)
-   */
-  testConsoleInteraction() {
-    // Test choice-based interaction (like your example)
-    const testChoiceInteraction = {
-      id: 'test-choice-' + Date.now(),
-      type: 'choice',
-      tool: 'Search',
-      description: 'Search(pattern: "(?:Yes|No|yes|no)(?:,\\s*and\\s*don\'t\\s*ask\\s*again)?", path: "../../../../../../../.claude/projects/-Users-danipower-Proyectos-Github-claude-code-templates", include: "*.jsonl")',
-      prompt: 'Do you want to proceed?',
-      options: [
-        'Yes',
-        'Yes, and add /Users/danipower/.claude/projects/-Users-danipower-Proyectos-Github-claude-code-templates as a working directory for this session',
-        'No, and tell Claude what to do differently'
-      ]
-    };
-
-    // Test text input interaction
-    const testTextInteraction = {
-      id: 'test-text-' + Date.now(),
-      type: 'text',
-      tool: 'Console Input',
-      description: 'Claude Code is requesting text input from the console.',
-      prompt: 'Please provide your input:'
-    };
-
-    // Randomly choose which type to test, or ask user
-    const testType = Math.random() > 0.5 ? testChoiceInteraction : testTextInteraction;
-    
-    console.log('🧪 Testing console interaction:', testType);
-    this.showConsoleInteraction(testType);
-  }
   
   /**
    * Update conversation state elements in the DOM
@@ -663,6 +635,36 @@ class AgentsPage {
           </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>
@@ -715,162 +717,2210 @@ class AgentsPage {
           </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>
+        <!-- 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();
+  }
+
+  /**
+   * 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>
           
-          <!-- 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 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="messages-actions">
-                <button class="action-btn-small" id="export-conversation" title="Export conversation">
-                  <span class="btn-icon-small">📁</span>
-                  Export
-                </button>
+              <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="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 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>
-            
-            <!-- 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 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 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 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);
+  }
 
-    this.bindEvents();
-    this.setupInfiniteScroll();
+  /**
+   * 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;
   }
 
   /**
-   * Initialize child components
+   * Close agent modal
    */
-  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>
-        `;
-      }
+  closeAgentModal() {
+    const modal = document.getElementById('agent-modal-overlay');
+    if (modal) {
+      modal.remove();
+    }
+    if (this.modalKeydownHandler) {
+      document.removeEventListener('keydown', this.modalKeydownHandler);
+      this.modalKeydownHandler = null;
     }
   }
 
   /**
-   * Bind event listeners
+   * Show agents loading state
+   * @param {boolean} show - Whether to show loading
    */
-  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());
+  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';
+    }
+  }
 
-    // Error retry
-    const retryBtn = this.container.querySelector('#retry-load');
-    if (retryBtn) {
-      retryBtn.addEventListener('click', () => this.loadConversationsData());
+  /**
+   * 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'; 
     }
+  }
 
-    // Clear filters
-    const clearFiltersBtn = this.container.querySelector('#clear-filters');
-    if (clearFiltersBtn) {
-      clearFiltersBtn.addEventListener('click', () => this.clearAllFilters());
+  /**
+   * Hide agents empty state
+   */
+  hideAgentsEmpty() {
+    const empty = this.container.querySelector('#agents-empty');
+    if (empty) {
+      empty.style.display = 'none';
     }
+  }
 
-    // Test console interaction
-    const testConsoleBtn = this.container.querySelector('#test-console-interaction');
-    if (testConsoleBtn) {
-      testConsoleBtn.addEventListener('click', () => this.testConsoleInteraction());
+  /**
+   * 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
+    );
   }
-  
+
   /**
-   * Setup infinite scroll for conversations list
+   * Show project agents modal
+   * @param {string} conversationId - Conversation ID
    */
-  setupInfiniteScroll() {
-    const conversationsContainer = this.container.querySelector('#conversations-list');
-    if (!conversationsContainer) return;
+  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>
+    `;
     
-    conversationsContainer.addEventListener('scroll', () => {
-      const { scrollTop, scrollHeight, clientHeight } = conversationsContainer;
-      const threshold = 100; // Load more when 100px from bottom
-      
-      if (scrollHeight - scrollTop - clientHeight < threshold) {
-        this.loadMoreConversations();
+    // 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);
   }
-  
+
   /**
-   * Update loading indicator
-   * @param {boolean} isLoading - Whether to show loading indicator
+   * Close project agents modal
    */
-  updateLoadingIndicator(isLoading) {
-    const loadingIndicator = this.container.querySelector('#load-more-indicator');
-    if (loadingIndicator) {
-      loadingIndicator.style.display = isLoading ? 'flex' : 'none';
+  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 = '';
+        }
+      }
     }
   }
 
@@ -973,6 +3023,10 @@ class AgentsPage {
    */
   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
@@ -1005,12 +3059,21 @@ class AgentsPage {
       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}">
+        <div class="sidebar-conversation-item" data-id="${conv.id}" ${agentColor ? `data-agent-color="${agentColor}"` : ''}>
           <div class="sidebar-conversation-header">
-            <div class="sidebar-conversation-title">
+            <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>
@@ -1025,6 +3088,13 @@ class AgentsPage {
           <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('');
@@ -1056,11 +3126,25 @@ class AgentsPage {
     // Click on sidebar conversation item to select and view
     const conversationItems = this.container.querySelectorAll('.sidebar-conversation-item');
     conversationItems.forEach(item => {
-      item.addEventListener('click', () => {
+      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);
+      });
+    });
   }
 
   /**
@@ -1103,7 +3187,22 @@ class AgentsPage {
       const metaElement = this.container.querySelector('#selected-conversation-meta');
       
       if (titleElement) {
-        titleElement.textContent = conversation.title || `Chat ${conversation.id.slice(-8)}`;
+        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) {
@@ -1305,10 +3404,29 @@ class AgentsPage {
     // Update dot class with enhanced styling
     stateDot.className = `state-dot ${stateInfo.class}`;
     
-    // Update text with icon and description
+    // 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">${stateInfo.text}</span>
-      <span class="state-text-description">${stateInfo.description}</span>
+      <span class="state-text-main">${stateTextContent}</span>
+      <span class="state-text-description">${stateDescriptionContent}</span>
     `;
     
     // Add tooltip for additional context
@@ -1902,6 +4020,85 @@ class AgentsPage {
     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
@@ -2454,6 +4651,18 @@ class AgentsPage {
    * @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') || [];