claude-flow 2.0.0-alpha.61 → 2.0.0-alpha.63

package/src/ui/console/js/terminal-emulator.js

@@ -13,38 +13,49 @@ export class TerminalEmulator {
     this.maxOutputLines = 1000;
     this.currentPrompt = 'claude-flow>';
     this.isLocked = false;
-    
+
     // Command suggestions
     this.commands = [
-      'help', 'clear', 'status', 'connect', 'disconnect',
-      'claude-flow', 'swarm', 'init', 'config', 'memory',
-      'tools', 'agents', 'benchmark', 'sparc'
+      'help',
+      'clear',
+      'status',
+      'connect',
+      'disconnect',
+      'claude-flow',
+      'swarm',
+      'init',
+      'config',
+      'memory',
+      'tools',
+      'agents',
+      'benchmark',
+      'sparc',
     ];
-    
+
     // ANSI color codes mapping
     this.ansiColors = {
-      '30': '#000000', // Black
-      '31': '#ff5555', // Red
-      '32': '#50fa7b', // Green
-      '33': '#f1fa8c', // Yellow
-      '34': '#bd93f9', // Blue
-      '35': '#ff79c6', // Magenta
-      '36': '#8be9fd', // Cyan
-      '37': '#f8f8f2', // White
-      '90': '#6272a4', // Bright Black (Gray)
-      '91': '#ff6e6e', // Bright Red
-      '92': '#69ff94', // Bright Green
-      '93': '#ffffa5', // Bright Yellow
-      '94': '#d6acff', // Bright Blue
-      '95': '#ff92df', // Bright Magenta
-      '96': '#a4ffff', // Bright Cyan
-      '97': '#ffffff'  // Bright White
+      30: '#000000', // Black
+      31: '#ff5555', // Red
+      32: '#50fa7b', // Green
+      33: '#f1fa8c', // Yellow
+      34: '#bd93f9', // Blue
+      35: '#ff79c6', // Magenta
+      36: '#8be9fd', // Cyan
+      37: '#f8f8f2', // White
+      90: '#6272a4', // Bright Black (Gray)
+      91: '#ff6e6e', // Bright Red
+      92: '#69ff94', // Bright Green
+      93: '#ffffa5', // Bright Yellow
+      94: '#d6acff', // Bright Blue
+      95: '#ff92df', // Bright Magenta
+      96: '#a4ffff', // Bright Cyan
+      97: '#ffffff', // Bright White
     };
-    
+
     this.setupInputHandlers();
     this.setupScrollBehavior();
   }
-  
+
   /**
    * Write output to terminal
    */
@@ -55,49 +66,49 @@ export class TerminalEmulator {
     this.scrollToBottom();
     return entry;
   }
-  
+
   /**
    * Write line to terminal
    */
   writeLine(content, type = 'output', timestamp = true) {
     return this.write(content + '\n', type, timestamp);
   }
-  
+
   /**
    * Write command to terminal
    */
   writeCommand(command) {
     return this.write(`${this.currentPrompt} ${command}`, 'command', true);
   }
-  
+
   /**
    * Write error message
    */
   writeError(message) {
     return this.writeLine(`Error: ${message}`, 'error');
   }
-  
+
   /**
    * Write success message
    */
   writeSuccess(message) {
     return this.writeLine(message, 'success');
   }
-  
+
   /**
    * Write warning message
    */
   writeWarning(message) {
     return this.writeLine(`Warning: ${message}`, 'warning');
   }
-  
+
   /**
    * Write info message
    */
   writeInfo(message) {
     return this.writeLine(message, 'info');
   }
-  
+
   /**
    * Write raw HTML content
    */
@@ -105,17 +116,17 @@ export class TerminalEmulator {
     const entry = document.createElement('div');
     entry.className = 'output-entry';
     entry.innerHTML = html;
-    
+
     if (type) {
       entry.classList.add(`output-${type}`);
     }
-    
+
     this.outputElement.appendChild(entry);
     this.limitOutputLines();
     this.scrollToBottom();
     return entry;
   }
-  
+
   /**
    * Clear terminal output
    */
@@ -123,7 +134,7 @@ export class TerminalEmulator {
     this.outputElement.innerHTML = '';
     this.showWelcomeMessage();
   }
-  
+
   /**
    * Show welcome message
    */
@@ -150,7 +161,7 @@ export class TerminalEmulator {
     `;
     this.outputElement.appendChild(welcome);
   }
-  
+
   /**
    * Set prompt text
    */
@@ -161,14 +172,14 @@ export class TerminalEmulator {
       promptElement.textContent = prompt;
     }
   }
-  
+
   /**
    * Lock/unlock input
    */
   setLocked(locked) {
     this.isLocked = locked;
     this.inputElement.disabled = locked;
-    
+
     if (locked) {
       this.inputElement.placeholder = 'Processing...';
     } else {
@@ -176,7 +187,7 @@ export class TerminalEmulator {
       this.inputElement.focus();
     }
   }
-  
+
   /**
    * Focus input
    */
@@ -185,49 +196,49 @@ export class TerminalEmulator {
       this.inputElement.focus();
     }
   }
-  
+
   /**
    * Get current input value
    */
   getInput() {
     return this.inputElement.value;
   }
-  
+
   /**
    * Set input value
    */
   setInput(value) {
     this.inputElement.value = value;
   }
-  
+
   /**
    * Clear input
    */
   clearInput() {
     this.inputElement.value = '';
   }
-  
+
   /**
    * Add command to history
    */
   addToHistory(command) {
     if (command.trim() && this.history[this.history.length - 1] !== command) {
       this.history.push(command);
-      
+
       if (this.history.length > this.maxHistorySize) {
         this.history.shift();
       }
     }
-    
+
     this.historyIndex = -1;
   }
-  
+
   /**
    * Navigate command history
    */
   navigateHistory(direction) {
     if (this.history.length === 0) return;
-    
+
     if (direction === 'up') {
       if (this.historyIndex === -1) {
         this.historyIndex = this.history.length - 1;
@@ -241,24 +252,24 @@ export class TerminalEmulator {
         this.historyIndex = -1;
       }
     }
-    
+
     if (this.historyIndex === -1) {
       this.setInput('');
     } else {
       this.setInput(this.history[this.historyIndex]);
     }
   }
-  
+
   /**
    * Create output entry element
    */
   createOutputEntry(content, type, timestamp) {
     const entry = document.createElement('div');
     entry.className = 'output-entry';
-    
+
     const line = document.createElement('div');
     line.className = 'output-line';
-    
+
     // Add timestamp if enabled
     if (timestamp && this.shouldShowTimestamp()) {
       const timeElement = document.createElement('span');
@@ -266,46 +277,48 @@ export class TerminalEmulator {
       timeElement.textContent = this.formatTimestamp(new Date());
       line.appendChild(timeElement);
     }
-    
+
     // Add content
     const contentElement = document.createElement('span');
     contentElement.className = `output-content ${type}`;
-    
+
     // Process ANSI codes if present
     if (typeof content === 'string' && content.includes('\x1b[')) {
       contentElement.innerHTML = this.processAnsiCodes(content);
     } else {
       contentElement.textContent = content;
     }
-    
+
     line.appendChild(contentElement);
     entry.appendChild(line);
-    
+
     return entry;
   }
-  
+
   /**
    * Process ANSI escape codes
    */
   processAnsiCodes(text) {
     // Simple ANSI processing - convert color codes to HTML
-    return text
-      .replace(/\x1b\[(\d+)m/g, (match, code) => {
-        if (code === '0' || code === '00') {
-          return '</span>'; // Reset
-        }
-        
-        const color = this.ansiColors[code];
-        if (color) {
-          return `<span style="color: ${color}">`;
-        }
-        
-        return '';
-      })
-      .replace(/\x1b\[[\d;]*m/g, '') // Remove other ANSI codes
-      + '</span>'; // Ensure we close any open spans
+    return (
+      text
+        .replace(/\x1b\[(\d+)m/g, (match, code) => {
+          if (code === '0' || code === '00') {
+            return '</span>'; // Reset
+          }
+
+          const color = this.ansiColors[code];
+          if (color) {
+            return `<span style="color: ${color}">`;
+          }
+
+          return '';
+        })
+        .replace(/\x1b\[[\d;]*m/g, '') + // Remove other ANSI codes
+      '</span>'
+    ); // Ensure we close any open spans
   }
-  
+
   /**
    * Format timestamp
    */
@@ -314,10 +327,10 @@ export class TerminalEmulator {
       hour12: false,
       hour: '2-digit',
       minute: '2-digit',
-      second: '2-digit'
+      second: '2-digit',
     });
   }
-  
+
   /**
    * Check if timestamps should be shown
    */
@@ -325,13 +338,13 @@ export class TerminalEmulator {
     const showTimestamps = localStorage.getItem('console_show_timestamps');
     return showTimestamps !== 'false';
   }
-  
+
   /**
    * Limit output lines
    */
   limitOutputLines() {
     const entries = this.outputElement.querySelectorAll('.output-entry');
-    
+
     if (entries.length > this.maxOutputLines) {
       const excessCount = entries.length - this.maxOutputLines;
       for (let i = 0; i < excessCount; i++) {
@@ -341,7 +354,7 @@ export class TerminalEmulator {
       }
     }
   }
-  
+
   /**
    * Scroll to bottom
    */
@@ -350,14 +363,14 @@ export class TerminalEmulator {
       if (smooth) {
         this.outputElement.scrollTo({
           top: this.outputElement.scrollHeight,
-          behavior: 'smooth'
+          behavior: 'smooth',
         });
       } else {
         this.outputElement.scrollTop = this.outputElement.scrollHeight;
       }
     }
   }
-  
+
   /**
    * Check if auto-scroll is enabled
    */
@@ -365,7 +378,7 @@ export class TerminalEmulator {
     const autoScroll = localStorage.getItem('console_auto_scroll');
     return autoScroll !== 'false';
   }
-  
+
   /**
    * Setup input event handlers
    */
@@ -375,35 +388,35 @@ export class TerminalEmulator {
         event.preventDefault();
         return;
       }
-      
+
       switch (event.key) {
         case 'Enter':
           event.preventDefault();
           this.handleEnter();
           break;
-          
+
         case 'ArrowUp':
           event.preventDefault();
           this.navigateHistory('up');
           break;
-          
+
         case 'ArrowDown':
           event.preventDefault();
           this.navigateHistory('down');
           break;
-          
+
         case 'Tab':
           event.preventDefault();
           this.handleTab();
           break;
-          
+
         case 'l':
           if (event.ctrlKey) {
             event.preventDefault();
             this.clear();
           }
           break;
-          
+
         case 'c':
           if (event.ctrlKey) {
             event.preventDefault();
@@ -412,44 +425,44 @@ export class TerminalEmulator {
           break;
       }
     });
-    
+
     this.inputElement.addEventListener('input', () => {
       if (!this.isLocked) {
         this.handleInput();
       }
     });
   }
-  
+
   /**
    * Handle Enter key
    */
   handleEnter() {
     const command = this.getInput().trim();
-    
+
     if (command) {
       this.addToHistory(command);
       this.writeCommand(command);
       this.clearInput();
-      
+
       // Emit command event
       this.emit('command', command);
     }
   }
-  
+
   /**
    * Handle Tab key (autocomplete)
    */
   handleTab() {
     const input = this.getInput();
-    const matches = this.commands.filter(cmd => cmd.startsWith(input));
-    
+    const matches = this.commands.filter((cmd) => cmd.startsWith(input));
+
     if (matches.length === 1) {
       this.setInput(matches[0] + ' ');
     } else if (matches.length > 1) {
       this.writeLine(`Available commands: ${matches.join(', ')}`, 'info');
     }
   }
-  
+
   /**
    * Handle input changes
    */
@@ -457,7 +470,7 @@ export class TerminalEmulator {
     // Could be used for live suggestions in the future
     this.emit('input_change', this.getInput());
   }
-  
+
   /**
    * Handle Ctrl+C interrupt
    */
@@ -466,7 +479,7 @@ export class TerminalEmulator {
     this.clearInput();
     this.emit('interrupt');
   }
-  
+
   /**
    * Setup scroll behavior
    */
@@ -474,25 +487,25 @@ export class TerminalEmulator {
     let isUserScrolling = false;
     let scrollTimeout;
     let lastScrollTop = 0;
-    
+
     this.outputElement.addEventListener('scroll', () => {
       const currentScrollTop = this.outputElement.scrollTop;
       const maxScrollTop = this.outputElement.scrollHeight - this.outputElement.clientHeight;
-      
+
       // Check if user scrolled up (away from bottom)
       if (currentScrollTop < lastScrollTop && currentScrollTop < maxScrollTop - 10) {
         isUserScrolling = true;
-        
+
         // Show scroll indicator if not already visible
         this.showScrollIndicator();
-        
+
         clearTimeout(scrollTimeout);
         // Don't auto-resume scrolling for 3 seconds after user scrolls up
         scrollTimeout = setTimeout(() => {
           // Only resume auto-scroll if user is back near the bottom
           const newScrollTop = this.outputElement.scrollTop;
           const newMaxScrollTop = this.outputElement.scrollHeight - this.outputElement.clientHeight;
-          
+
           if (newScrollTop >= newMaxScrollTop - 50) {
             isUserScrolling = false;
             this.hideScrollIndicator();
@@ -505,16 +518,16 @@ export class TerminalEmulator {
         this.hideScrollIndicator();
         clearTimeout(scrollTimeout);
       }
-      
+
       lastScrollTop = currentScrollTop;
     });
-    
+
     // Override shouldAutoScroll to check user scrolling
     const originalShouldAutoScroll = this.shouldAutoScroll;
     this.shouldAutoScroll = () => {
       return originalShouldAutoScroll.call(this) && !isUserScrolling;
     };
-    
+
     // Store reference for manual scroll control
     this.isUserScrolling = () => isUserScrolling;
     this.resumeAutoScroll = () => {
@@ -529,7 +542,7 @@ export class TerminalEmulator {
    */
   showScrollIndicator() {
     let indicator = document.getElementById('scrollIndicator');
-    
+
     if (!indicator) {
       indicator = document.createElement('div');
       indicator.id = 'scrollIndicator';
@@ -540,7 +553,7 @@ export class TerminalEmulator {
           ↓ Resume
         </button>
       `;
-      
+
       // Position it relative to the console container
       const consoleContainer = this.outputElement.closest('.console-container');
       if (consoleContainer) {
@@ -549,7 +562,7 @@ export class TerminalEmulator {
         document.body.appendChild(indicator);
       }
     }
-    
+
     indicator.style.display = 'flex';
   }
 
@@ -562,28 +575,28 @@ export class TerminalEmulator {
       indicator.style.display = 'none';
     }
   }
-  
+
   /**
    * Stream text output with typing effect
    */
   async streamText(text, delay = 10) {
     const entry = this.createOutputEntry('', 'output', true);
     this.outputElement.appendChild(entry);
-    
+
     const contentElement = entry.querySelector('.output-content');
-    
+
     for (let i = 0; i < text.length; i++) {
       contentElement.textContent += text[i];
       this.scrollToBottom();
-      
+
       if (delay > 0) {
-        await new Promise(resolve => setTimeout(resolve, delay));
+        await new Promise((resolve) => setTimeout(resolve, delay));
       }
     }
-    
+
     return entry;
   }
-  
+
   /**
    * Add event listener
    */
@@ -591,14 +604,14 @@ export class TerminalEmulator {
     if (!this.eventListeners) {
       this.eventListeners = new Map();
     }
-    
+
     if (!this.eventListeners.has(event)) {
       this.eventListeners.set(event, []);
     }
-    
+
     this.eventListeners.get(event).push(callback);
   }
-  
+
   /**
    * Emit event
    */
@@ -606,8 +619,8 @@ export class TerminalEmulator {
     if (!this.eventListeners || !this.eventListeners.has(event)) {
       return;
     }
-    
-    this.eventListeners.get(event).forEach(callback => {
+
+    this.eventListeners.get(event).forEach((callback) => {
       try {
         callback(data);
       } catch (error) {
@@ -615,7 +628,7 @@ export class TerminalEmulator {
       }
     });
   }
-  
+
   /**
    * Set maximum output lines
    */
@@ -623,44 +636,48 @@ export class TerminalEmulator {
     this.maxOutputLines = Math.max(100, Math.min(10000, maxLines));
     this.limitOutputLines();
   }
-  
+
   /**
    * Get terminal statistics
    */
   getStats() {
     const entries = this.outputElement.querySelectorAll('.output-entry');
-    
+
     return {
       totalLines: entries.length,
       historySize: this.history.length,
       isLocked: this.isLocked,
-      currentPrompt: this.currentPrompt
+      currentPrompt: this.currentPrompt,
     };
   }
-  
+
   /**
    * Export terminal history
    */
   exportHistory() {
     const entries = Array.from(this.outputElement.querySelectorAll('.output-entry'));
-    
-    return entries.map(entry => {
+
+    return entries.map((entry) => {
       const timestamp = entry.querySelector('.output-timestamp')?.textContent || '';
       const content = entry.querySelector('.output-content')?.textContent || '';
-      const type = entry.querySelector('.output-content')?.className.split(' ').find(c => c.startsWith('output-')) || '';
-      
+      const type =
+        entry
+          .querySelector('.output-content')
+          ?.className.split(' ')
+          .find((c) => c.startsWith('output-')) || '';
+
       return { timestamp, content, type };
     });
   }
-  
+
   /**
    * Import terminal history
    */
   importHistory(history) {
     this.clear();
-    
+
     history.forEach(({ timestamp, content, type }) => {
       this.write(content, type.replace('output-', ''), false);
     });
   }
-}
+}