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

package/src/ui/web-ui/components/ComponentLibrary.js

@@ -58,34 +58,42 @@ export class ComponentLibrary {
   createToolPanel(config) {
     const panel = document.createElement('div');
     panel.className = 'claude-tool-panel';
-    
+
     const header = document.createElement('div');
     header.className = 'claude-tool-panel-header';
-    
+
     const title = document.createElement('h3');
     title.textContent = config.title;
     title.className = 'claude-tool-panel-title';
-    
+
     const subtitle = document.createElement('p');
     subtitle.textContent = config.description;
     subtitle.className = 'claude-tool-panel-subtitle';
-    
+
     header.appendChild(title);
     header.appendChild(subtitle);
-    
+
     const content = document.createElement('div');
     content.className = 'claude-tool-panel-content';
-    
+
     panel.appendChild(header);
     panel.appendChild(content);
-    
+
     return {
       element: panel,
       content,
-      setTitle: (newTitle) => { title.textContent = newTitle; },
-      setDescription: (newDesc) => { subtitle.textContent = newDesc; },
-      clear: () => { content.innerHTML = ''; },
-      append: (element) => { content.appendChild(element); }
+      setTitle: (newTitle) => {
+        title.textContent = newTitle;
+      },
+      setDescription: (newDesc) => {
+        subtitle.textContent = newDesc;
+      },
+      clear: () => {
+        content.innerHTML = '';
+      },
+      append: (element) => {
+        content.appendChild(element);
+      },
     };
   }
 
@@ -95,29 +103,31 @@ export class ComponentLibrary {
   createMetricsChart(config) {
     const container = document.createElement('div');
     container.className = 'claude-metrics-chart';
-    
+
     const title = document.createElement('h4');
     title.textContent = config.title;
     title.className = 'claude-chart-title';
-    
+
     const canvas = document.createElement('canvas');
     canvas.width = config.width || 400;
     canvas.height = config.height || 200;
     canvas.className = 'claude-chart-canvas';
-    
+
     const legend = document.createElement('div');
     legend.className = 'claude-chart-legend';
-    
+
     container.appendChild(title);
     container.appendChild(canvas);
     container.appendChild(legend);
-    
+
     return {
       element: container,
       canvas,
       updateData: (data) => this.updateChart(canvas, data, config),
-      setTitle: (newTitle) => { title.textContent = newTitle; },
-      addLegendItem: (label, color) => this.addLegendItem(legend, label, color)
+      setTitle: (newTitle) => {
+        title.textContent = newTitle;
+      },
+      addLegendItem: (label, color) => this.addLegendItem(legend, label, color),
     };
   }
 
@@ -128,30 +138,35 @@ export class ComponentLibrary {
     const overlay = document.createElement('div');
     overlay.className = 'claude-command-palette-overlay';
     overlay.style.display = 'none';
-    
+
     const palette = document.createElement('div');
     palette.className = 'claude-command-palette';
-    
+
     const input = document.createElement('input');
     input.type = 'text';
     input.placeholder = 'Type a command...';
     input.className = 'claude-command-input';
-    
+
     const results = document.createElement('div');
     results.className = 'claude-command-results';
-    
+
     palette.appendChild(input);
     palette.appendChild(results);
     overlay.appendChild(palette);
-    
+
     return {
       element: overlay,
       input,
       results,
-      show: () => { overlay.style.display = 'flex'; input.focus(); },
-      hide: () => { overlay.style.display = 'none'; },
+      show: () => {
+        overlay.style.display = 'flex';
+        input.focus();
+      },
+      hide: () => {
+        overlay.style.display = 'none';
+      },
       updateResults: (commands) => this.updateCommandResults(results, commands),
-      onCommand: null // Set by user
+      onCommand: null, // Set by user
     };
   }
 
@@ -161,34 +176,36 @@ export class ComponentLibrary {
   createProgressBar(config) {
     const container = document.createElement('div');
     container.className = 'claude-progress-container';
-    
+
     const label = document.createElement('div');
     label.className = 'claude-progress-label';
     label.textContent = config.label || 'Progress';
-    
+
     const bar = document.createElement('div');
     bar.className = 'claude-progress-bar';
-    
+
     const fill = document.createElement('div');
     fill.className = 'claude-progress-fill';
     fill.style.width = '0%';
-    
+
     const text = document.createElement('div');
     text.className = 'claude-progress-text';
     text.textContent = '0%';
-    
+
     bar.appendChild(fill);
     bar.appendChild(text);
     container.appendChild(label);
     container.appendChild(bar);
-    
+
     return {
       element: container,
       setProgress: (percent) => {
         fill.style.width = `${percent}%`;
         text.textContent = `${Math.round(percent)}%`;
       },
-      setLabel: (newLabel) => { label.textContent = newLabel; }
+      setLabel: (newLabel) => {
+        label.textContent = newLabel;
+      },
     };
   }
 
@@ -199,13 +216,15 @@ export class ComponentLibrary {
     const badge = document.createElement('span');
     badge.className = `claude-status-badge claude-status-${status}`;
     badge.textContent = text || status;
-    
+
     return {
       element: badge,
       setStatus: (newStatus) => {
         badge.className = `claude-status-badge claude-status-${newStatus}`;
       },
-      setText: (newText) => { badge.textContent = newText; }
+      setText: (newText) => {
+        badge.textContent = newText;
+      },
     };
   }
 
@@ -215,22 +234,28 @@ export class ComponentLibrary {
   createLoadingSpinner(config = {}) {
     const container = document.createElement('div');
     container.className = 'claude-loading-container';
-    
+
     const spinner = document.createElement('div');
     spinner.className = 'claude-loading-spinner';
-    
+
     const message = document.createElement('div');
     message.className = 'claude-loading-message';
     message.textContent = config.message || 'Loading...';
-    
+
     container.appendChild(spinner);
     container.appendChild(message);
-    
+
     return {
       element: container,
-      setMessage: (newMessage) => { message.textContent = newMessage; },
-      show: () => { container.style.display = 'flex'; },
-      hide: () => { container.style.display = 'none'; }
+      setMessage: (newMessage) => {
+        message.textContent = newMessage;
+      },
+      show: () => {
+        container.style.display = 'flex';
+      },
+      hide: () => {
+        container.style.display = 'none';
+      },
     };
   }
 
@@ -240,28 +265,30 @@ export class ComponentLibrary {
   createErrorMessage(message, details = null) {
     const container = document.createElement('div');
     container.className = 'claude-error-message';
-    
+
     const icon = document.createElement('span');
     icon.textContent = '❌';
     icon.className = 'claude-error-icon';
-    
+
     const text = document.createElement('div');
     text.className = 'claude-error-text';
     text.textContent = message;
-    
+
     container.appendChild(icon);
     container.appendChild(text);
-    
+
     if (details) {
       const detailsEl = document.createElement('div');
       detailsEl.className = 'claude-error-details';
       detailsEl.textContent = details;
       container.appendChild(detailsEl);
     }
-    
+
     return {
       element: container,
-      setMessage: (newMessage) => { text.textContent = newMessage; },
+      setMessage: (newMessage) => {
+        text.textContent = newMessage;
+      },
       setDetails: (newDetails) => {
         if (newDetails) {
           if (!container.querySelector('.claude-error-details')) {
@@ -271,7 +298,7 @@ export class ComponentLibrary {
           }
           container.querySelector('.claude-error-details').textContent = newDetails;
         }
-      }
+      },
     };
   }
 
@@ -281,21 +308,23 @@ export class ComponentLibrary {
   createSuccessMessage(message) {
     const container = document.createElement('div');
     container.className = 'claude-success-message';
-    
+
     const icon = document.createElement('span');
     icon.textContent = '✅';
     icon.className = 'claude-success-icon';
-    
+
     const text = document.createElement('div');
     text.className = 'claude-success-text';
     text.textContent = message;
-    
+
     container.appendChild(icon);
     container.appendChild(text);
-    
+
     return {
       element: container,
-      setMessage: (newMessage) => { text.textContent = newMessage; }
+      setMessage: (newMessage) => {
+        text.textContent = newMessage;
+      },
     };
   }
 
@@ -305,24 +334,32 @@ export class ComponentLibrary {
   createInfoPanel(config) {
     const panel = document.createElement('div');
     panel.className = 'claude-info-panel';
-    
+
     const header = document.createElement('div');
     header.className = 'claude-info-header';
     header.textContent = config.title;
-    
+
     const content = document.createElement('div');
     content.className = 'claude-info-content';
-    
+
     panel.appendChild(header);
     panel.appendChild(content);
-    
+
     return {
       element: panel,
       content,
-      setTitle: (title) => { header.textContent = title; },
-      setContent: (html) => { content.innerHTML = html; },
-      append: (element) => { content.appendChild(element); },
-      clear: () => { content.innerHTML = ''; }
+      setTitle: (title) => {
+        header.textContent = title;
+      },
+      setContent: (html) => {
+        content.innerHTML = html;
+      },
+      append: (element) => {
+        content.appendChild(element);
+      },
+      clear: () => {
+        content.innerHTML = '';
+      },
     };
   }
 
@@ -333,22 +370,22 @@ export class ComponentLibrary {
     const button = document.createElement('button');
     button.className = `claude-action-button claude-button-${config.type || 'primary'}`;
     button.textContent = config.text;
-    
+
     if (config.icon) {
       const icon = document.createElement('span');
       icon.textContent = config.icon;
       icon.className = 'claude-button-icon';
       button.insertBefore(icon, button.firstChild);
     }
-    
+
     if (config.onclick) {
       button.addEventListener('click', config.onclick);
     }
-    
+
     return {
       element: button,
-      setText: (text) => { 
-        button.textContent = text; 
+      setText: (text) => {
+        button.textContent = text;
         if (config.icon) {
           const icon = document.createElement('span');
           icon.textContent = config.icon;
@@ -356,7 +393,9 @@ export class ComponentLibrary {
           button.insertBefore(icon, button.firstChild);
         }
       },
-      setDisabled: (disabled) => { button.disabled = disabled; },
+      setDisabled: (disabled) => {
+        button.disabled = disabled;
+      },
       setLoading: (loading) => {
         if (loading) {
           button.classList.add('claude-button-loading');
@@ -365,7 +404,7 @@ export class ComponentLibrary {
           button.classList.remove('claude-button-loading');
           button.disabled = false;
         }
-      }
+      },
     };
   }
 
@@ -375,42 +414,42 @@ export class ComponentLibrary {
   createToolGrid(tools, onToolClick) {
     const grid = document.createElement('div');
     grid.className = 'claude-tool-grid';
-    
-    tools.forEach(tool => {
+
+    tools.forEach((tool) => {
       const card = document.createElement('div');
       card.className = 'claude-tool-card';
-      
+
       const icon = document.createElement('div');
       icon.className = 'claude-tool-icon';
       icon.textContent = tool.icon || '🔧';
-      
+
       const name = document.createElement('div');
       name.className = 'claude-tool-name';
       name.textContent = tool.name;
-      
+
       const desc = document.createElement('div');
       desc.className = 'claude-tool-description';
       desc.textContent = tool.description;
-      
+
       card.appendChild(icon);
       card.appendChild(name);
       card.appendChild(desc);
-      
+
       card.addEventListener('click', () => onToolClick(tool));
-      
+
       grid.appendChild(card);
     });
-    
+
     return {
       element: grid,
       updateTools: (newTools) => {
         grid.innerHTML = '';
-        newTools.forEach(tool => {
+        newTools.forEach((tool) => {
           // Recreate cards with new tools
           const card = this.createToolCard(tool, onToolClick);
           grid.appendChild(card);
         });
-      }
+      },
     };
   }
 
@@ -420,32 +459,38 @@ export class ComponentLibrary {
   createStatsCard(config) {
     const card = document.createElement('div');
     card.className = 'claude-stats-card';
-    
+
     const icon = document.createElement('div');
     icon.className = 'claude-stats-icon';
     icon.textContent = config.icon;
-    
+
     const content = document.createElement('div');
     content.className = 'claude-stats-content';
-    
+
     const value = document.createElement('div');
     value.className = 'claude-stats-value';
     value.textContent = config.value;
-    
+
     const label = document.createElement('div');
     label.className = 'claude-stats-label';
     label.textContent = config.label;
-    
+
     content.appendChild(value);
     content.appendChild(label);
     card.appendChild(icon);
     card.appendChild(content);
-    
+
     return {
       element: card,
-      setValue: (newValue) => { value.textContent = newValue; },
-      setLabel: (newLabel) => { label.textContent = newLabel; },
-      setIcon: (newIcon) => { icon.textContent = newIcon; }
+      setValue: (newValue) => {
+        value.textContent = newValue;
+      },
+      setLabel: (newLabel) => {
+        label.textContent = newLabel;
+      },
+      setIcon: (newIcon) => {
+        icon.textContent = newIcon;
+      },
     };
   }
 
@@ -455,42 +500,46 @@ export class ComponentLibrary {
   createTabContainer(tabs) {
     const container = document.createElement('div');
     container.className = 'claude-tab-container';
-    
+
     const tabList = document.createElement('div');
     tabList.className = 'claude-tab-list';
-    
+
     const tabContent = document.createElement('div');
     tabContent.className = 'claude-tab-content';
-    
+
     let activeTab = 0;
-    
+
     tabs.forEach((tab, index) => {
       const tabButton = document.createElement('button');
       tabButton.className = `claude-tab-button ${index === 0 ? 'active' : ''}`;
       tabButton.textContent = tab.label;
-      
+
       const tabPane = document.createElement('div');
       tabPane.className = `claude-tab-pane ${index === 0 ? 'active' : ''}`;
       tabPane.innerHTML = tab.content;
-      
+
       tabButton.addEventListener('click', () => {
         // Remove active class from all tabs
-        tabList.querySelectorAll('.claude-tab-button').forEach(btn => btn.classList.remove('active'));
-        tabContent.querySelectorAll('.claude-tab-pane').forEach(pane => pane.classList.remove('active'));
-        
+        tabList
+          .querySelectorAll('.claude-tab-button')
+          .forEach((btn) => btn.classList.remove('active'));
+        tabContent
+          .querySelectorAll('.claude-tab-pane')
+          .forEach((pane) => pane.classList.remove('active'));
+
         // Add active class to clicked tab
         tabButton.classList.add('active');
         tabPane.classList.add('active');
         activeTab = index;
       });
-      
+
       tabList.appendChild(tabButton);
       tabContent.appendChild(tabPane);
     });
-    
+
     container.appendChild(tabList);
     container.appendChild(tabContent);
-    
+
     return {
       element: container,
       setActiveTab: (index) => {
@@ -501,7 +550,7 @@ export class ComponentLibrary {
       getActiveTab: () => activeTab,
       addTab: (tab) => {
         // Implementation for adding new tabs dynamically
-      }
+      },
     };
   }
 
@@ -920,7 +969,7 @@ export class ComponentLibrary {
         color: #fff;
       }
     `;
-    
+
     document.head.appendChild(styles);
   }
 
@@ -930,13 +979,13 @@ export class ComponentLibrary {
   updateChart(canvas, data, config) {
     const ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    
+
     // Simple chart implementation
     // In a real implementation, you'd use Chart.js or similar
     const padding = 40;
-    const chartWidth = canvas.width - (padding * 2);
-    const chartHeight = canvas.height - (padding * 2);
-    
+    const chartWidth = canvas.width - padding * 2;
+    const chartHeight = canvas.height - padding * 2;
+
     if (config.type === 'line') {
       this.drawLineChart(ctx, data, padding, chartWidth, chartHeight);
     } else if (config.type === 'bar') {
@@ -949,25 +998,25 @@ export class ComponentLibrary {
    */
   drawLineChart(ctx, data, padding, width, height) {
     if (!data || data.length === 0) return;
-    
-    const maxValue = Math.max(...data.map(d => d.value));
+
+    const maxValue = Math.max(...data.map((d) => d.value));
     const stepX = width / (data.length - 1);
-    
+
     ctx.strokeStyle = '#00d4ff';
     ctx.lineWidth = 2;
     ctx.beginPath();
-    
+
     data.forEach((point, index) => {
-      const x = padding + (index * stepX);
-      const y = padding + height - (point.value / maxValue * height);
-      
+      const x = padding + index * stepX;
+      const y = padding + height - (point.value / maxValue) * height;
+
       if (index === 0) {
         ctx.moveTo(x, y);
       } else {
         ctx.lineTo(x, y);
       }
     });
-    
+
     ctx.stroke();
   }
 
@@ -976,18 +1025,18 @@ export class ComponentLibrary {
    */
   drawBarChart(ctx, data, padding, width, height) {
     if (!data || data.length === 0) return;
-    
-    const maxValue = Math.max(...data.map(d => d.value));
-    const barWidth = width / data.length * 0.8;
-    const barSpacing = width / data.length * 0.2;
-    
+
+    const maxValue = Math.max(...data.map((d) => d.value));
+    const barWidth = (width / data.length) * 0.8;
+    const barSpacing = (width / data.length) * 0.2;
+
     ctx.fillStyle = '#00d4ff';
-    
+
     data.forEach((point, index) => {
-      const x = padding + (index * (barWidth + barSpacing));
+      const x = padding + index * (barWidth + barSpacing);
       const barHeight = (point.value / maxValue) * height;
       const y = padding + height - barHeight;
-      
+
       ctx.fillRect(x, y, barWidth, barHeight);
     });
   }
@@ -1002,4 +1051,4 @@ export class ComponentLibrary {
   }
 }
 
-export default ComponentLibrary;
+export default ComponentLibrary;