claude-flow 2.0.0-alpha.60 → 2.0.0-alpha.62

package/src/ui/console/js/settings.js

@@ -8,43 +8,43 @@ export class SettingsManager {
     this.settings = this.loadSettings();
     this.settingsPanel = null;
     this.isVisible = false;
-    
+
     // Default settings
     this.defaults = {
       // Connection settings
       serverUrl: 'ws://localhost:3000/ws',
       authToken: '',
       autoConnect: true,
-      
+
       // Appearance settings
       theme: 'dark',
       fontSize: 14,
       lineHeight: 1.4,
       fontFamily: 'JetBrains Mono',
-      
+
       // Behavior settings
       autoScroll: true,
       showTimestamps: true,
       enableSounds: false,
       maxLines: 1000,
-      
+
       // Claude Flow settings
       defaultMode: 'coder',
       swarmStrategy: 'development',
       coordinationMode: 'centralized',
-      
+
       // Advanced settings
       reconnectAttempts: 5,
       heartbeatInterval: 30000,
-      commandTimeout: 30000
+      commandTimeout: 30000,
     };
-    
+
     // Merge defaults with loaded settings
     this.settings = { ...this.defaults, ...this.settings };
-    
+
     this.setupEventListeners();
   }
-  
+
   /**
    * Initialize settings panel
    */
@@ -53,7 +53,7 @@ export class SettingsManager {
     this.setupSettingsPanel();
     this.applySettings();
   }
-  
+
   /**
    * Setup settings panel event listeners
    */
@@ -63,28 +63,30 @@ export class SettingsManager {
     if (settingsToggle) {
       settingsToggle.addEventListener('click', () => this.toggle());
     }
-    
+
     // Close button
     const closeButton = document.getElementById('closeSettings');
     if (closeButton) {
       closeButton.addEventListener('click', () => this.hide());
     }
-    
+
     // Settings form elements
     this.setupFormElements();
-    
+
     // Action buttons
     this.setupActionButtons();
-    
+
     // Click outside to close
     document.addEventListener('click', (event) => {
-      if (this.isVisible && 
-          !this.settingsPanel.contains(event.target) && 
-          !document.getElementById('settingsToggle').contains(event.target)) {
+      if (
+        this.isVisible &&
+        !this.settingsPanel.contains(event.target) &&
+        !document.getElementById('settingsToggle').contains(event.target)
+      ) {
         this.hide();
       }
     });
-    
+
     // ESC key to close
     document.addEventListener('keydown', (event) => {
       if (event.key === 'Escape' && this.isVisible) {
@@ -92,7 +94,7 @@ export class SettingsManager {
       }
     });
   }
-  
+
   /**
    * Setup form element listeners
    */
@@ -100,66 +102,66 @@ export class SettingsManager {
     // Connection settings
     this.bindSetting('serverUrl', 'input');
     this.bindSetting('authToken', 'input');
-    
+
     // Appearance settings
     this.bindSetting('fontSize', 'change', (value) => {
       this.applyFontSize(parseInt(value));
     });
-    
+
     this.bindSetting('theme', 'change', (value) => {
       this.applyTheme(value);
     });
-    
+
     this.bindSetting('lineHeight', 'change', (value) => {
       this.applyLineHeight(parseFloat(value));
     });
-    
+
     // Behavior settings
     this.bindSetting('autoScroll', 'change', (value) => {
       localStorage.setItem('console_auto_scroll', value);
     });
-    
+
     this.bindSetting('showTimestamps', 'change', (value) => {
       localStorage.setItem('console_show_timestamps', value);
     });
-    
+
     this.bindSetting('enableSounds', 'change');
-    
+
     this.bindSetting('maxLines', 'input', (value) => {
       const maxLines = parseInt(value);
       if (maxLines >= 100 && maxLines <= 10000) {
         this.emit('max_lines_changed', maxLines);
       }
     });
-    
+
     // Claude Flow settings
     this.bindSetting('defaultMode', 'change');
     this.bindSetting('swarmStrategy', 'change');
     this.bindSetting('coordinationMode', 'change');
   }
-  
+
   /**
    * Setup action buttons
    */
   setupActionButtons() {
     const connectButton = document.getElementById('connectButton');
     const disconnectButton = document.getElementById('disconnectButton');
-    
+
     if (connectButton) {
       connectButton.addEventListener('click', () => {
         this.emit('connect_requested', {
           url: this.get('serverUrl'),
-          token: this.get('authToken')
+          token: this.get('authToken'),
         });
       });
     }
-    
+
     if (disconnectButton) {
       disconnectButton.addEventListener('click', () => {
         this.emit('disconnect_requested');
       });
     }
-    
+
     // Add reset button
     const resetButton = document.createElement('button');
     resetButton.className = 'reset-settings';
@@ -169,20 +171,20 @@ export class SettingsManager {
         this.resetToDefaults();
       }
     });
-    
+
     const settingsContent = document.querySelector('.settings-content');
     if (settingsContent) {
       settingsContent.appendChild(resetButton);
     }
   }
-  
+
   /**
    * Bind setting to form element
    */
   bindSetting(settingName, eventType, callback) {
     const element = document.getElementById(settingName);
     if (!element) return;
-    
+
     // Set initial value
     const value = this.get(settingName);
     if (element.type === 'checkbox') {
@@ -190,11 +192,11 @@ export class SettingsManager {
     } else {
       element.value = value;
     }
-    
+
     // Listen for changes
     element.addEventListener(eventType, (event) => {
       let newValue;
-      
+
       if (element.type === 'checkbox') {
         newValue = element.checked;
       } else if (element.type === 'number') {
@@ -202,15 +204,15 @@ export class SettingsManager {
       } else {
         newValue = element.value;
       }
-      
+
       this.set(settingName, newValue);
-      
+
       if (callback) {
         callback(newValue);
       }
     });
   }
-  
+
   /**
    * Show settings panel
    */
@@ -218,7 +220,7 @@ export class SettingsManager {
     if (this.settingsPanel) {
       this.settingsPanel.classList.add('visible');
       this.isVisible = true;
-      
+
       // Focus first input
       const firstInput = this.settingsPanel.querySelector('input, select');
       if (firstInput) {
@@ -226,7 +228,7 @@ export class SettingsManager {
       }
     }
   }
-  
+
   /**
    * Hide settings panel
    */
@@ -236,7 +238,7 @@ export class SettingsManager {
       this.isVisible = false;
     }
   }
-  
+
   /**
    * Toggle settings panel
    */
@@ -247,14 +249,14 @@ export class SettingsManager {
       this.show();
     }
   }
-  
+
   /**
    * Get setting value
    */
   get(key) {
     return this.settings[key];
   }
-  
+
   /**
    * Set setting value
    */
@@ -263,14 +265,14 @@ export class SettingsManager {
     this.saveSettings();
     this.emit('setting_changed', { key, value });
   }
-  
+
   /**
    * Get all settings
    */
   getAll() {
     return { ...this.settings };
   }
-  
+
   /**
    * Set multiple settings
    */
@@ -280,7 +282,7 @@ export class SettingsManager {
     this.updateFormElements();
     this.applySettings();
   }
-  
+
   /**
    * Reset to default settings
    */
@@ -291,7 +293,7 @@ export class SettingsManager {
     this.applySettings();
     this.emit('settings_reset');
   }
-  
+
   /**
    * Load settings from localStorage
    */
@@ -304,7 +306,7 @@ export class SettingsManager {
       return {};
     }
   }
-  
+
   /**
    * Save settings to localStorage
    */
@@ -315,7 +317,7 @@ export class SettingsManager {
       console.error('Failed to save settings:', error);
     }
   }
-  
+
   /**
    * Apply all settings to the UI
    */
@@ -323,12 +325,12 @@ export class SettingsManager {
     this.applyTheme(this.get('theme'));
     this.applyFontSize(this.get('fontSize'));
     this.applyLineHeight(this.get('lineHeight'));
-    
+
     // Set individual localStorage items for terminal
     localStorage.setItem('console_auto_scroll', this.get('autoScroll'));
     localStorage.setItem('console_show_timestamps', this.get('showTimestamps'));
   }
-  
+
   /**
    * Apply theme
    */
@@ -336,26 +338,26 @@ export class SettingsManager {
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('console_theme', theme);
   }
-  
+
   /**
    * Apply font size
    */
   applyFontSize(fontSize) {
     document.documentElement.style.setProperty('--font-size-base', `${fontSize}px`);
   }
-  
+
   /**
    * Apply line height
    */
   applyLineHeight(lineHeight) {
     document.documentElement.style.setProperty('--line-height', lineHeight);
   }
-  
+
   /**
    * Update form elements with current settings
    */
   updateFormElements() {
-    Object.keys(this.settings).forEach(key => {
+    Object.keys(this.settings).forEach((key) => {
       const element = document.getElementById(key);
       if (element) {
         if (element.type === 'checkbox') {
@@ -366,7 +368,7 @@ export class SettingsManager {
       }
     });
   }
-  
+
   /**
    * Export settings
    */
@@ -374,13 +376,13 @@ export class SettingsManager {
     const exportData = {
       timestamp: new Date().toISOString(),
       version: '1.0.0',
-      settings: this.getAll()
+      settings: this.getAll(),
     };
-    
+
     const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-      type: 'application/json'
+      type: 'application/json',
     });
-    
+
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
@@ -390,7 +392,7 @@ export class SettingsManager {
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   }
-  
+
   /**
    * Import settings
    */
@@ -398,7 +400,7 @@ export class SettingsManager {
     try {
       const text = await file.text();
       const data = JSON.parse(text);
-      
+
       if (data.settings) {
         this.setAll(data.settings);
         return true;
@@ -410,7 +412,7 @@ export class SettingsManager {
       return false;
     }
   }
-  
+
   /**
    * Validate setting value
    */
@@ -420,25 +422,38 @@ export class SettingsManager {
       lineHeight: (v) => v >= 1.0 && v <= 2.0,
       maxLines: (v) => v >= 100 && v <= 10000,
       theme: (v) => ['dark', 'light', 'classic', 'matrix'].includes(v),
-      defaultMode: (v) => ['coder', 'architect', 'analyst', 'researcher', 'reviewer', 
-                          'tester', 'debugger', 'documenter', 'optimizer', 'designer'].includes(v),
-      swarmStrategy: (v) => ['development', 'research', 'analysis', 'testing', 
-                           'optimization', 'maintenance'].includes(v),
-      coordinationMode: (v) => ['centralized', 'hierarchical', 'distributed', 
-                              'mesh', 'hybrid'].includes(v)
+      defaultMode: (v) =>
+        [
+          'coder',
+          'architect',
+          'analyst',
+          'researcher',
+          'reviewer',
+          'tester',
+          'debugger',
+          'documenter',
+          'optimizer',
+          'designer',
+        ].includes(v),
+      swarmStrategy: (v) =>
+        ['development', 'research', 'analysis', 'testing', 'optimization', 'maintenance'].includes(
+          v,
+        ),
+      coordinationMode: (v) =>
+        ['centralized', 'hierarchical', 'distributed', 'mesh', 'hybrid'].includes(v),
     };
-    
+
     const validator = validators[key];
     return validator ? validator(value) : true;
   }
-  
+
   /**
    * Update connection status in settings
    */
   updateConnectionStatus(status) {
     const connectButton = document.getElementById('connectButton');
     const disconnectButton = document.getElementById('disconnectButton');
-    
+
     if (connectButton && disconnectButton) {
       if (status.connected) {
         connectButton.disabled = true;
@@ -448,50 +463,56 @@ export class SettingsManager {
         disconnectButton.disabled = true;
       }
     }
-    
+
     // Update connection info if it exists
     this.updateConnectionInfo(status);
   }
-  
+
   /**
    * Update connection info display
    */
   updateConnectionInfo(status) {
     let infoElement = document.getElementById('connectionInfo');
-    
+
     if (!infoElement) {
       infoElement = document.createElement('div');
       infoElement.id = 'connectionInfo';
       infoElement.className = 'connection-info';
-      
+
       const connectionSection = document.querySelector('.setting-group');
       if (connectionSection) {
         connectionSection.appendChild(infoElement);
       }
     }
-    
-    const statusClass = status.connected ? 'connected' : 
-                       status.connecting ? 'connecting' : 'disconnected';
-    
+
+    const statusClass = status.connected
+      ? 'connected'
+      : status.connecting
+        ? 'connecting'
+        : 'disconnected';
+
     infoElement.className = `connection-info ${statusClass}`;
-    
-    const title = status.connected ? 'Connected' : 
-                 status.connecting ? 'Connecting...' : 'Disconnected';
-    
-    const details = status.connected 
+
+    const title = status.connected
+      ? 'Connected'
+      : status.connecting
+        ? 'Connecting...'
+        : 'Disconnected';
+
+    const details = status.connected
       ? `Connected to ${status.url}\nPending requests: ${status.pendingRequests}\nQueued messages: ${status.queuedMessages}`
-      : status.connecting 
+      : status.connecting
         ? `Attempting to connect to ${status.url}`
-        : status.reconnectAttempts > 0 
+        : status.reconnectAttempts > 0
           ? `Disconnected. Reconnect attempts: ${status.reconnectAttempts}`
           : 'Not connected';
-    
+
     infoElement.innerHTML = `
       <div class="connection-info-title">${title}</div>
       <div class="connection-info-details">${details}</div>
     `;
   }
-  
+
   /**
    * Setup event listeners
    */
@@ -505,13 +526,13 @@ export class SettingsManager {
         }
       });
     }
-    
+
     // Listen for font size changes from browser zoom
     window.addEventListener('resize', () => {
       this.applyFontSize(this.get('fontSize'));
     });
   }
-  
+
   /**
    * Event emitter functionality
    */
@@ -519,14 +540,14 @@ export class SettingsManager {
     if (!this.eventListeners) {
       this.eventListeners = new Map();
     }
-    
+
     if (!this.eventListeners.has(event)) {
       this.eventListeners.set(event, []);
     }
-    
+
     this.eventListeners.get(event).push(callback);
   }
-  
+
   /**
    * Emit event
    */
@@ -534,8 +555,8 @@ export class SettingsManager {
     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) {
@@ -543,7 +564,7 @@ export class SettingsManager {
       }
     });
   }
-  
+
   /**
    * Get Claude Flow configuration
    */
@@ -551,10 +572,10 @@ export class SettingsManager {
     return {
       defaultMode: this.get('defaultMode'),
       swarmStrategy: this.get('swarmStrategy'),
-      coordinationMode: this.get('coordinationMode')
+      coordinationMode: this.get('coordinationMode'),
     };
   }
-  
+
   /**
    * Get connection configuration
    */
@@ -565,7 +586,7 @@ export class SettingsManager {
       autoConnect: this.get('autoConnect'),
       reconnectAttempts: this.get('reconnectAttempts'),
       heartbeatInterval: this.get('heartbeatInterval'),
-      commandTimeout: this.get('commandTimeout')
+      commandTimeout: this.get('commandTimeout'),
     };
   }
-}
+}