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

package/src/ui/console/js/memory-interface.js

@@ -4,35 +4,35 @@
  */
 
 class MemoryInterface {
-    constructor() {
-        this.container = null;
-        this.currentNamespace = 'global';
-        this.memoryData = new Map();
-        this.searchFilters = {};
-        this.analytics = {
-            usage: new Map(),
-            history: [],
-            patterns: new Map()
-        };
-        this.backupManager = new BackupManager();
-        this.syncManager = new SyncManager();
-        this.compressionManager = new CompressionManager();
-        this.visualizer = new MemoryVisualizer();
-        
-        this.init();
-    }
-
-    init() {
-        this.createInterface();
-        this.setupEventListeners();
-        this.startMonitoring();
-        this.loadMemoryData();
-    }
-
-    createInterface() {
-        this.container = document.createElement('div');
-        this.container.className = 'memory-interface';
-        this.container.innerHTML = `
+  constructor() {
+    this.container = null;
+    this.currentNamespace = 'global';
+    this.memoryData = new Map();
+    this.searchFilters = {};
+    this.analytics = {
+      usage: new Map(),
+      history: [],
+      patterns: new Map(),
+    };
+    this.backupManager = new BackupManager();
+    this.syncManager = new SyncManager();
+    this.compressionManager = new CompressionManager();
+    this.visualizer = new MemoryVisualizer();
+
+    this.init();
+  }
+
+  init() {
+    this.createInterface();
+    this.setupEventListeners();
+    this.startMonitoring();
+    this.loadMemoryData();
+  }
+
+  createInterface() {
+    this.container = document.createElement('div');
+    this.container.className = 'memory-interface';
+    this.container.innerHTML = `
             <div class="memory-header">
                 <h2>Memory Management Interface</h2>
                 <div class="memory-controls">
@@ -241,91 +241,123 @@ class MemoryInterface {
                 </div>
             </div>
         `;
-    }
-
-    setupEventListeners() {
-        // Header controls
-        this.container.querySelector('.btn-refresh').addEventListener('click', () => this.refresh());
-        this.container.querySelector('.btn-backup').addEventListener('click', () => this.createBackup());
-        this.container.querySelector('.btn-compress').addEventListener('click', () => this.optimizeMemory());
-        this.container.querySelector('.btn-sync').addEventListener('click', () => this.showSyncStatus());
-
-        // Namespace controls
-        this.container.querySelector('.btn-add-namespace').addEventListener('click', () => this.addNamespace());
-        this.container.querySelector('.namespace-search-input').addEventListener('input', (e) => this.searchNamespaces(e.target.value));
-
-        // Editor controls
-        this.container.querySelector('.btn-add-key').addEventListener('click', () => this.addKey());
-        this.container.querySelector('.btn-bulk-edit').addEventListener('click', () => this.bulkEdit());
-        this.container.querySelector('.btn-export').addEventListener('click', () => this.exportMemory());
-
-        // Search controls
-        this.container.querySelector('.key-search-input').addEventListener('input', (e) => this.searchKeys(e.target.value));
-        this.container.querySelector('.type-filter').addEventListener('change', (e) => this.filterByType(e.target.value));
-
-        // Analytics controls
-        this.container.querySelector('.analytics-timeframe').addEventListener('change', (e) => this.updateAnalytics(e.target.value));
-
-        // Search interface
-        this.container.querySelector('.btn-add-filter').addEventListener('click', () => this.addSearchFilter());
-        this.container.querySelector('.btn-saved-searches').addEventListener('click', () => this.showSavedSearches());
-
-        // Backup controls
-        this.container.querySelector('.btn-create-backup').addEventListener('click', () => this.createBackup());
-        this.container.querySelector('.btn-restore-backup').addEventListener('click', () => this.restoreBackup());
-        this.container.querySelector('.btn-import-backup').addEventListener('click', () => this.importBackup());
-
-        // Modal controls
-        this.container.querySelector('.btn-close-modal').addEventListener('click', () => this.closeModal());
-        this.container.querySelector('.modal-overlay').addEventListener('click', (e) => {
-            if (e.target === this.container.querySelector('.modal-overlay')) {
-                this.closeModal();
-            }
-        });
-
-        // Form submission
-        this.container.querySelector('#key-editor-form').addEventListener('submit', (e) => this.saveKeyValue(e));
-    }
-
-    async loadMemoryData() {
-        try {
-            // Load memory data from Claude Flow's memory system
-            const response = await fetch('/api/memory/list');
-            const data = await response.json();
-            
-            this.memoryData = new Map(Object.entries(data));
-            this.updateNamespaceTree();
-            this.updateKeyValueList();
-            this.updateAnalytics();
-        } catch (error) {
-            console.error('Failed to load memory data:', error);
-            this.showError('Failed to load memory data');
-        }
-    }
-
-    updateNamespaceTree() {
-        const container = this.container.querySelector('.namespace-tree-container');
-        const namespaces = this.getNamespaces();
-        
-        container.innerHTML = this.renderNamespaceTree(namespaces);
-        
-        // Add click handlers for namespace items
-        container.querySelectorAll('.namespace-item').forEach(item => {
-            item.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this.selectNamespace(item.dataset.namespace);
-            });
-        });
-    }
-
-    renderNamespaceTree(namespaces, parent = '', level = 0) {
-        let html = '';
-        
-        for (const [namespace, data] of namespaces) {
-            const fullPath = parent ? `${parent}.${namespace}` : namespace;
-            const hasChildren = data.children && data.children.size > 0;
-            
-            html += `
+  }
+
+  setupEventListeners() {
+    // Header controls
+    this.container.querySelector('.btn-refresh').addEventListener('click', () => this.refresh());
+    this.container
+      .querySelector('.btn-backup')
+      .addEventListener('click', () => this.createBackup());
+    this.container
+      .querySelector('.btn-compress')
+      .addEventListener('click', () => this.optimizeMemory());
+    this.container
+      .querySelector('.btn-sync')
+      .addEventListener('click', () => this.showSyncStatus());
+
+    // Namespace controls
+    this.container
+      .querySelector('.btn-add-namespace')
+      .addEventListener('click', () => this.addNamespace());
+    this.container
+      .querySelector('.namespace-search-input')
+      .addEventListener('input', (e) => this.searchNamespaces(e.target.value));
+
+    // Editor controls
+    this.container.querySelector('.btn-add-key').addEventListener('click', () => this.addKey());
+    this.container.querySelector('.btn-bulk-edit').addEventListener('click', () => this.bulkEdit());
+    this.container
+      .querySelector('.btn-export')
+      .addEventListener('click', () => this.exportMemory());
+
+    // Search controls
+    this.container
+      .querySelector('.key-search-input')
+      .addEventListener('input', (e) => this.searchKeys(e.target.value));
+    this.container
+      .querySelector('.type-filter')
+      .addEventListener('change', (e) => this.filterByType(e.target.value));
+
+    // Analytics controls
+    this.container
+      .querySelector('.analytics-timeframe')
+      .addEventListener('change', (e) => this.updateAnalytics(e.target.value));
+
+    // Search interface
+    this.container
+      .querySelector('.btn-add-filter')
+      .addEventListener('click', () => this.addSearchFilter());
+    this.container
+      .querySelector('.btn-saved-searches')
+      .addEventListener('click', () => this.showSavedSearches());
+
+    // Backup controls
+    this.container
+      .querySelector('.btn-create-backup')
+      .addEventListener('click', () => this.createBackup());
+    this.container
+      .querySelector('.btn-restore-backup')
+      .addEventListener('click', () => this.restoreBackup());
+    this.container
+      .querySelector('.btn-import-backup')
+      .addEventListener('click', () => this.importBackup());
+
+    // Modal controls
+    this.container
+      .querySelector('.btn-close-modal')
+      .addEventListener('click', () => this.closeModal());
+    this.container.querySelector('.modal-overlay').addEventListener('click', (e) => {
+      if (e.target === this.container.querySelector('.modal-overlay')) {
+        this.closeModal();
+      }
+    });
+
+    // Form submission
+    this.container
+      .querySelector('#key-editor-form')
+      .addEventListener('submit', (e) => this.saveKeyValue(e));
+  }
+
+  async loadMemoryData() {
+    try {
+      // Load memory data from Claude Flow's memory system
+      const response = await fetch('/api/memory/list');
+      const data = await response.json();
+
+      this.memoryData = new Map(Object.entries(data));
+      this.updateNamespaceTree();
+      this.updateKeyValueList();
+      this.updateAnalytics();
+    } catch (error) {
+      console.error('Failed to load memory data:', error);
+      this.showError('Failed to load memory data');
+    }
+  }
+
+  updateNamespaceTree() {
+    const container = this.container.querySelector('.namespace-tree-container');
+    const namespaces = this.getNamespaces();
+
+    container.innerHTML = this.renderNamespaceTree(namespaces);
+
+    // Add click handlers for namespace items
+    container.querySelectorAll('.namespace-item').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.selectNamespace(item.dataset.namespace);
+      });
+    });
+  }
+
+  renderNamespaceTree(namespaces, parent = '', level = 0) {
+    let html = '';
+
+    for (const [namespace, data] of namespaces) {
+      const fullPath = parent ? `${parent}.${namespace}` : namespace;
+      const hasChildren = data.children && data.children.size > 0;
+
+      html += `
                 <div class="namespace-item ${this.currentNamespace === fullPath ? 'active' : ''}" 
                      data-namespace="${fullPath}" 
                      style="padding-left: ${level * 20}px">
@@ -336,35 +368,41 @@ class MemoryInterface {
                     </div>
                 </div>
             `;
-            
-            if (hasChildren) {
-                html += this.renderNamespaceTree(data.children, fullPath, level + 1);
-            }
-        }
-        
-        return html;
-    }
 
-    updateKeyValueList() {
-        const container = this.container.querySelector('.key-value-list');
-        const keys = this.getKeysForNamespace(this.currentNamespace);
-        
-        container.innerHTML = keys.map(key => this.renderKeyValueItem(key)).join('');
-        
-        // Add event listeners for key-value items
-        container.querySelectorAll('.key-value-item').forEach(item => {
-            item.querySelector('.btn-edit').addEventListener('click', () => this.editKey(item.dataset.key));
-            item.querySelector('.btn-delete').addEventListener('click', () => this.deleteKey(item.dataset.key));
-            item.querySelector('.btn-copy').addEventListener('click', () => this.copyKey(item.dataset.key));
-        });
+      if (hasChildren) {
+        html += this.renderNamespaceTree(data.children, fullPath, level + 1);
+      }
     }
 
-    renderKeyValueItem(key) {
-        const value = this.memoryData.get(key);
-        const type = this.getValueType(value);
-        const displayValue = this.formatValueForDisplay(value, type);
-        
-        return `
+    return html;
+  }
+
+  updateKeyValueList() {
+    const container = this.container.querySelector('.key-value-list');
+    const keys = this.getKeysForNamespace(this.currentNamespace);
+
+    container.innerHTML = keys.map((key) => this.renderKeyValueItem(key)).join('');
+
+    // Add event listeners for key-value items
+    container.querySelectorAll('.key-value-item').forEach((item) => {
+      item
+        .querySelector('.btn-edit')
+        .addEventListener('click', () => this.editKey(item.dataset.key));
+      item
+        .querySelector('.btn-delete')
+        .addEventListener('click', () => this.deleteKey(item.dataset.key));
+      item
+        .querySelector('.btn-copy')
+        .addEventListener('click', () => this.copyKey(item.dataset.key));
+    });
+  }
+
+  renderKeyValueItem(key) {
+    const value = this.memoryData.get(key);
+    const type = this.getValueType(value);
+    const displayValue = this.formatValueForDisplay(value, type);
+
+    return `
             <div class="key-value-item" data-key="${key}">
                 <div class="key-info">
                     <span class="key-name">${key}</span>
@@ -386,538 +424,538 @@ class MemoryInterface {
                 </div>
             </div>
         `;
-    }
-
-    getNamespaces() {
-        const namespaces = new Map();
-        
-        for (const [key, value] of this.memoryData) {
-            const parts = key.split('.');
-            let current = namespaces;
-            let path = '';
-            
-            for (let i = 0; i < parts.length - 1; i++) {
-                const part = parts[i];
-                path = path ? `${path}.${part}` : part;
-                
-                if (!current.has(part)) {
-                    current.set(part, {
-                        count: 0,
-                        children: new Map()
-                    });
-                }
-                
-                current = current.get(part).children;
-            }
-            
-            // Count the final key
-            const finalPart = parts[parts.length - 1];
-            if (!current.has(finalPart)) {
-                current.set(finalPart, { count: 0, children: new Map() });
-            }
-            current.get(finalPart).count++;
-        }
-        
-        return namespaces;
-    }
-
-    getKeysForNamespace(namespace) {
-        const keys = [];
-        const prefix = namespace === 'global' ? '' : `${namespace}.`;
-        
-        for (const [key, value] of this.memoryData) {
-            if (namespace === 'global' || key.startsWith(prefix)) {
-                keys.push(key);
-            }
-        }
-        
-        return keys.sort();
-    }
-
-    getValueType(value) {
-        if (value === null) return 'null';
-        if (value === undefined) return 'undefined';
-        if (Array.isArray(value)) return 'array';
-        return typeof value;
-    }
-
-    formatValueForDisplay(value, type) {
-        switch (type) {
-            case 'string':
-                return value.length > 50 ? `${value.substring(0, 50)}...` : value;
-            case 'object':
-                return JSON.stringify(value).substring(0, 100) + '...';
-            case 'array':
-                return `[${value.length} items]`;
-            default:
-                return String(value);
-        }
-    }
-
-    updateAnalytics(timeframe = '24h') {
-        const stats = this.calculateStats(timeframe);
-        
-        // Update stat cards
-        this.container.querySelector('#total-keys').textContent = stats.totalKeys;
-        this.container.querySelector('#memory-usage').textContent = stats.memoryUsage;
-        this.container.querySelector('#compression-rate').textContent = stats.compressionRate;
-        this.container.querySelector('#access-frequency').textContent = stats.accessFrequency;
-        
-        // Update charts
-        this.visualizer.updateUsageChart(stats.usageData);
-        this.visualizer.updatePatternChart(stats.patternData);
-    }
-
-    calculateStats(timeframe) {
-        const now = Date.now();
-        const timeframes = {
-            '1h': 60 * 60 * 1000,
-            '24h': 24 * 60 * 60 * 1000,
-            '7d': 7 * 24 * 60 * 60 * 1000,
-            '30d': 30 * 24 * 60 * 60 * 1000
-        };
-        
-        const cutoff = now - timeframes[timeframe];
-        
-        return {
-            totalKeys: this.memoryData.size,
-            memoryUsage: this.calculateMemoryUsage(),
-            compressionRate: this.compressionManager.getCompressionRate(),
-            accessFrequency: this.calculateAccessFrequency(cutoff),
-            usageData: this.getUsageData(cutoff),
-            patternData: this.getPatternData(cutoff)
-        };
-    }
-
-    calculateMemoryUsage() {
-        let totalSize = 0;
-        for (const [key, value] of this.memoryData) {
-            totalSize += this.getObjectSize(key) + this.getObjectSize(value);
-        }
-        return this.formatBytes(totalSize);
-    }
-
-    getObjectSize(obj) {
-        let size = 0;
-        if (typeof obj === 'string') {
-            size = obj.length * 2; // UTF-16
-        } else if (typeof obj === 'number') {
-            size = 8; // 64-bit float
-        } else if (typeof obj === 'boolean') {
-            size = 1;
-        } else if (obj === null || obj === undefined) {
-            size = 0;
-        } else {
-            size = JSON.stringify(obj).length * 2;
-        }
-        return size;
-    }
-
-    formatBytes(bytes) {
-        if (bytes === 0) return '0 B';
-        const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    }
-
-    calculateAccessFrequency(cutoff) {
-        const recentAccess = this.analytics.history.filter(entry => entry.timestamp > cutoff);
-        const frequency = recentAccess.length / ((Date.now() - cutoff) / 60000); // per minute
-        return frequency.toFixed(2);
-    }
-
-    getUsageData(cutoff) {
-        // Return usage data for charts
-        return this.analytics.history
-            .filter(entry => entry.timestamp > cutoff)
-            .map(entry => ({
-                timestamp: entry.timestamp,
-                operations: entry.operations || 0,
-                memory: entry.memory || 0
-            }));
-    }
-
-    getPatternData(cutoff) {
-        // Return pattern data for charts
-        const patterns = new Map();
-        
-        for (const [key, value] of this.analytics.patterns) {
-            if (value.lastAccess > cutoff) {
-                patterns.set(key, value);
-            }
-        }
-        
-        return Array.from(patterns.entries());
-    }
-
-    // Event handlers
-    async selectNamespace(namespace) {
-        this.currentNamespace = namespace;
-        this.updateKeyValueList();
-        
-        // Update active state
-        this.container.querySelectorAll('.namespace-item').forEach(item => {
-            item.classList.toggle('active', item.dataset.namespace === namespace);
-        });
-        
-        await this.notifyCoordination(`Selected namespace: ${namespace}`);
-    }
-
-    async addNamespace() {
-        const name = prompt('Enter namespace name:');
-        if (name) {
-            // Create a placeholder key to establish the namespace
-            const key = `${name}.placeholder`;
-            await this.setMemoryValue(key, 'Namespace placeholder');
-            await this.loadMemoryData();
-            await this.notifyCoordination(`Added namespace: ${name}`);
-        }
-    }
-
-    async addKey() {
-        this.openModal('key-editor-modal');
-        this.container.querySelector('#edit-key').value = '';
-        this.container.querySelector('#edit-value').value = '';
-        this.container.querySelector('#edit-type').value = 'string';
-        this.container.querySelector('#edit-namespace').value = this.currentNamespace;
-    }
+  }
 
-    async editKey(key) {
-        const value = this.memoryData.get(key);
-        const type = this.getValueType(value);
-        
-        this.openModal('key-editor-modal');
-        this.container.querySelector('#edit-key').value = key;
-        this.container.querySelector('#edit-value').value = JSON.stringify(value, null, 2);
-        this.container.querySelector('#edit-type').value = type;
-        this.container.querySelector('#edit-namespace').value = this.getNamespaceFromKey(key);
-    }
+  getNamespaces() {
+    const namespaces = new Map();
 
-    async deleteKey(key) {
-        if (confirm(`Are you sure you want to delete "${key}"?`)) {
-            await this.deleteMemoryValue(key);
-            await this.loadMemoryData();
-            await this.notifyCoordination(`Deleted key: ${key}`);
-        }
-    }
+    for (const [key, value] of this.memoryData) {
+      const parts = key.split('.');
+      let current = namespaces;
+      let path = '';
 
-    async copyKey(key) {
-        const value = this.memoryData.get(key);
-        const text = JSON.stringify({ [key]: value }, null, 2);
-        
-        try {
-            await navigator.clipboard.writeText(text);
-            this.showSuccess('Key copied to clipboard');
-        } catch (error) {
-            console.error('Failed to copy to clipboard:', error);
-            this.showError('Failed to copy to clipboard');
-        }
-    }
+      for (let i = 0; i < parts.length - 1; i++) {
+        const part = parts[i];
+        path = path ? `${path}.${part}` : part;
 
-    async saveKeyValue(e) {
-        e.preventDefault();
-        
-        const key = this.container.querySelector('#edit-key').value;
-        const type = this.container.querySelector('#edit-type').value;
-        const valueText = this.container.querySelector('#edit-value').value;
-        
-        try {
-            let value;
-            
-            switch (type) {
-                case 'string':
-                    value = valueText;
-                    break;
-                case 'number':
-                    value = parseFloat(valueText);
-                    break;
-                case 'boolean':
-                    value = valueText.toLowerCase() === 'true';
-                    break;
-                case 'object':
-                case 'array':
-                    value = JSON.parse(valueText);
-                    break;
-                default:
-                    value = valueText;
-            }
-            
-            await this.setMemoryValue(key, value);
-            await this.loadMemoryData();
-            this.closeModal();
-            await this.notifyCoordination(`Saved key: ${key}`);
-        } catch (error) {
-            console.error('Failed to save key-value:', error);
-            this.showError('Failed to save key-value pair');
+        if (!current.has(part)) {
+          current.set(part, {
+            count: 0,
+            children: new Map(),
+          });
         }
-    }
 
-    async createBackup() {
-        try {
-            const backup = await this.backupManager.createBackup(this.memoryData);
-            this.showSuccess(`Backup created: ${backup.id}`);
-            await this.notifyCoordination(`Created backup: ${backup.id}`);
-        } catch (error) {
-            console.error('Failed to create backup:', error);
-            this.showError('Failed to create backup');
-        }
-    }
+        current = current.get(part).children;
+      }
+
+      // Count the final key
+      const finalPart = parts[parts.length - 1];
+      if (!current.has(finalPart)) {
+        current.set(finalPart, { count: 0, children: new Map() });
+      }
+      current.get(finalPart).count++;
+    }
+
+    return namespaces;
+  }
+
+  getKeysForNamespace(namespace) {
+    const keys = [];
+    const prefix = namespace === 'global' ? '' : `${namespace}.`;
+
+    for (const [key, value] of this.memoryData) {
+      if (namespace === 'global' || key.startsWith(prefix)) {
+        keys.push(key);
+      }
+    }
+
+    return keys.sort();
+  }
+
+  getValueType(value) {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (Array.isArray(value)) return 'array';
+    return typeof value;
+  }
+
+  formatValueForDisplay(value, type) {
+    switch (type) {
+      case 'string':
+        return value.length > 50 ? `${value.substring(0, 50)}...` : value;
+      case 'object':
+        return JSON.stringify(value).substring(0, 100) + '...';
+      case 'array':
+        return `[${value.length} items]`;
+      default:
+        return String(value);
+    }
+  }
+
+  updateAnalytics(timeframe = '24h') {
+    const stats = this.calculateStats(timeframe);
+
+    // Update stat cards
+    this.container.querySelector('#total-keys').textContent = stats.totalKeys;
+    this.container.querySelector('#memory-usage').textContent = stats.memoryUsage;
+    this.container.querySelector('#compression-rate').textContent = stats.compressionRate;
+    this.container.querySelector('#access-frequency').textContent = stats.accessFrequency;
+
+    // Update charts
+    this.visualizer.updateUsageChart(stats.usageData);
+    this.visualizer.updatePatternChart(stats.patternData);
+  }
+
+  calculateStats(timeframe) {
+    const now = Date.now();
+    const timeframes = {
+      '1h': 60 * 60 * 1000,
+      '24h': 24 * 60 * 60 * 1000,
+      '7d': 7 * 24 * 60 * 60 * 1000,
+      '30d': 30 * 24 * 60 * 60 * 1000,
+    };
+
+    const cutoff = now - timeframes[timeframe];
+
+    return {
+      totalKeys: this.memoryData.size,
+      memoryUsage: this.calculateMemoryUsage(),
+      compressionRate: this.compressionManager.getCompressionRate(),
+      accessFrequency: this.calculateAccessFrequency(cutoff),
+      usageData: this.getUsageData(cutoff),
+      patternData: this.getPatternData(cutoff),
+    };
+  }
+
+  calculateMemoryUsage() {
+    let totalSize = 0;
+    for (const [key, value] of this.memoryData) {
+      totalSize += this.getObjectSize(key) + this.getObjectSize(value);
+    }
+    return this.formatBytes(totalSize);
+  }
+
+  getObjectSize(obj) {
+    let size = 0;
+    if (typeof obj === 'string') {
+      size = obj.length * 2; // UTF-16
+    } else if (typeof obj === 'number') {
+      size = 8; // 64-bit float
+    } else if (typeof obj === 'boolean') {
+      size = 1;
+    } else if (obj === null || obj === undefined) {
+      size = 0;
+    } else {
+      size = JSON.stringify(obj).length * 2;
+    }
+    return size;
+  }
+
+  formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+
+  calculateAccessFrequency(cutoff) {
+    const recentAccess = this.analytics.history.filter((entry) => entry.timestamp > cutoff);
+    const frequency = recentAccess.length / ((Date.now() - cutoff) / 60000); // per minute
+    return frequency.toFixed(2);
+  }
+
+  getUsageData(cutoff) {
+    // Return usage data for charts
+    return this.analytics.history
+      .filter((entry) => entry.timestamp > cutoff)
+      .map((entry) => ({
+        timestamp: entry.timestamp,
+        operations: entry.operations || 0,
+        memory: entry.memory || 0,
+      }));
+  }
+
+  getPatternData(cutoff) {
+    // Return pattern data for charts
+    const patterns = new Map();
+
+    for (const [key, value] of this.analytics.patterns) {
+      if (value.lastAccess > cutoff) {
+        patterns.set(key, value);
+      }
+    }
+
+    return Array.from(patterns.entries());
+  }
+
+  // Event handlers
+  async selectNamespace(namespace) {
+    this.currentNamespace = namespace;
+    this.updateKeyValueList();
+
+    // Update active state
+    this.container.querySelectorAll('.namespace-item').forEach((item) => {
+      item.classList.toggle('active', item.dataset.namespace === namespace);
+    });
+
+    await this.notifyCoordination(`Selected namespace: ${namespace}`);
+  }
+
+  async addNamespace() {
+    const name = prompt('Enter namespace name:');
+    if (name) {
+      // Create a placeholder key to establish the namespace
+      const key = `${name}.placeholder`;
+      await this.setMemoryValue(key, 'Namespace placeholder');
+      await this.loadMemoryData();
+      await this.notifyCoordination(`Added namespace: ${name}`);
+    }
+  }
+
+  async addKey() {
+    this.openModal('key-editor-modal');
+    this.container.querySelector('#edit-key').value = '';
+    this.container.querySelector('#edit-value').value = '';
+    this.container.querySelector('#edit-type').value = 'string';
+    this.container.querySelector('#edit-namespace').value = this.currentNamespace;
+  }
+
+  async editKey(key) {
+    const value = this.memoryData.get(key);
+    const type = this.getValueType(value);
+
+    this.openModal('key-editor-modal');
+    this.container.querySelector('#edit-key').value = key;
+    this.container.querySelector('#edit-value').value = JSON.stringify(value, null, 2);
+    this.container.querySelector('#edit-type').value = type;
+    this.container.querySelector('#edit-namespace').value = this.getNamespaceFromKey(key);
+  }
+
+  async deleteKey(key) {
+    if (confirm(`Are you sure you want to delete "${key}"?`)) {
+      await this.deleteMemoryValue(key);
+      await this.loadMemoryData();
+      await this.notifyCoordination(`Deleted key: ${key}`);
+    }
+  }
+
+  async copyKey(key) {
+    const value = this.memoryData.get(key);
+    const text = JSON.stringify({ [key]: value }, null, 2);
+
+    try {
+      await navigator.clipboard.writeText(text);
+      this.showSuccess('Key copied to clipboard');
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      this.showError('Failed to copy to clipboard');
+    }
+  }
+
+  async saveKeyValue(e) {
+    e.preventDefault();
+
+    const key = this.container.querySelector('#edit-key').value;
+    const type = this.container.querySelector('#edit-type').value;
+    const valueText = this.container.querySelector('#edit-value').value;
+
+    try {
+      let value;
+
+      switch (type) {
+        case 'string':
+          value = valueText;
+          break;
+        case 'number':
+          value = parseFloat(valueText);
+          break;
+        case 'boolean':
+          value = valueText.toLowerCase() === 'true';
+          break;
+        case 'object':
+        case 'array':
+          value = JSON.parse(valueText);
+          break;
+        default:
+          value = valueText;
+      }
+
+      await this.setMemoryValue(key, value);
+      await this.loadMemoryData();
+      this.closeModal();
+      await this.notifyCoordination(`Saved key: ${key}`);
+    } catch (error) {
+      console.error('Failed to save key-value:', error);
+      this.showError('Failed to save key-value pair');
+    }
+  }
+
+  async createBackup() {
+    try {
+      const backup = await this.backupManager.createBackup(this.memoryData);
+      this.showSuccess(`Backup created: ${backup.id}`);
+      await this.notifyCoordination(`Created backup: ${backup.id}`);
+    } catch (error) {
+      console.error('Failed to create backup:', error);
+      this.showError('Failed to create backup');
+    }
+  }
+
+  async optimizeMemory() {
+    try {
+      const result = await this.compressionManager.optimize(this.memoryData);
+      this.showSuccess(`Memory optimized: ${result.savedBytes} bytes saved`);
+      await this.loadMemoryData();
+      await this.notifyCoordination(`Optimized memory: ${result.savedBytes} bytes saved`);
+    } catch (error) {
+      console.error('Failed to optimize memory:', error);
+      this.showError('Failed to optimize memory');
+    }
+  }
+
+  async refresh() {
+    await this.loadMemoryData();
+    this.showSuccess('Memory data refreshed');
+  }
+
+  // Helper methods
+  openModal(modalId) {
+    this.container.querySelector('#modal-overlay').style.display = 'flex';
+    this.container.querySelector(`#${modalId}`).style.display = 'block';
+  }
+
+  closeModal() {
+    this.container.querySelector('#modal-overlay').style.display = 'none';
+    this.container.querySelectorAll('.modal').forEach((modal) => {
+      modal.style.display = 'none';
+    });
+  }
+
+  getNamespaceFromKey(key) {
+    const parts = key.split('.');
+    return parts.length > 1 ? parts.slice(0, -1).join('.') : 'global';
+  }
+
+  async setMemoryValue(key, value) {
+    const response = await fetch('/api/memory/set', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key, value }),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to set memory value');
+    }
+  }
+
+  async deleteMemoryValue(key) {
+    const response = await fetch('/api/memory/delete', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ key }),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to delete memory value');
+    }
+  }
+
+  showSuccess(message) {
+    // Implementation for success notification
+    console.log('Success:', message);
+  }
+
+  showError(message) {
+    // Implementation for error notification
+    console.error('Error:', message);
+  }
+
+  async notifyCoordination(message) {
+    try {
+      await fetch('/api/coordination/notify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message, timestamp: Date.now() }),
+      });
+    } catch (error) {
+      console.error('Failed to notify coordination:', error);
+    }
+  }
+
+  startMonitoring() {
+    // Start real-time monitoring
+    setInterval(() => {
+      this.updateAnalytics();
+    }, 30000); // Update every 30 seconds
+  }
+
+  render() {
+    return this.container;
+  }
+}
 
-    async optimizeMemory() {
-        try {
-            const result = await this.compressionManager.optimize(this.memoryData);
-            this.showSuccess(`Memory optimized: ${result.savedBytes} bytes saved`);
-            await this.loadMemoryData();
-            await this.notifyCoordination(`Optimized memory: ${result.savedBytes} bytes saved`);
-        } catch (error) {
-            console.error('Failed to optimize memory:', error);
-            this.showError('Failed to optimize memory');
-        }
-    }
+// Supporting classes
+class BackupManager {
+  constructor() {
+    this.backups = new Map();
+  }
+
+  async createBackup(memoryData) {
+    const id = `backup_${Date.now()}`;
+    const backup = {
+      id,
+      timestamp: Date.now(),
+      data: new Map(memoryData),
+      size: this.calculateBackupSize(memoryData),
+    };
+
+    this.backups.set(id, backup);
+    return backup;
+  }
+
+  async restoreBackup(backupId) {
+    const backup = this.backups.get(backupId);
+    if (!backup) {
+      throw new Error('Backup not found');
+    }
+
+    return backup.data;
+  }
+
+  calculateBackupSize(memoryData) {
+    return JSON.stringify(Array.from(memoryData.entries())).length;
+  }
+}
 
-    async refresh() {
-        await this.loadMemoryData();
-        this.showSuccess('Memory data refreshed');
-    }
+class SyncManager {
+  constructor() {
+    this.syncStatus = 'idle';
+    this.lastSync = null;
+  }
+
+  async sync() {
+    this.syncStatus = 'syncing';
+
+    try {
+      // Implement sync logic here
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      this.lastSync = Date.now();
+      this.syncStatus = 'synchronized';
+    } catch (error) {
+      this.syncStatus = 'error';
+      throw error;
+    }
+  }
+
+  getStatus() {
+    return {
+      status: this.syncStatus,
+      lastSync: this.lastSync,
+    };
+  }
+}
 
-    // Helper methods
-    openModal(modalId) {
-        this.container.querySelector('#modal-overlay').style.display = 'flex';
-        this.container.querySelector(`#${modalId}`).style.display = 'block';
-    }
+class CompressionManager {
+  constructor() {
+    this.compressionRate = 0;
+  }
 
-    closeModal() {
-        this.container.querySelector('#modal-overlay').style.display = 'none';
-        this.container.querySelectorAll('.modal').forEach(modal => {
-            modal.style.display = 'none';
-        });
-    }
+  async optimize(memoryData) {
+    // Implement compression logic
+    const originalSize = this.calculateSize(memoryData);
 
-    getNamespaceFromKey(key) {
-        const parts = key.split('.');
-        return parts.length > 1 ? parts.slice(0, -1).join('.') : 'global';
-    }
+    // Simulate compression
+    await new Promise((resolve) => setTimeout(resolve, 500));
 
-    async setMemoryValue(key, value) {
-        const response = await fetch('/api/memory/set', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ key, value })
-        });
-        
-        if (!response.ok) {
-            throw new Error('Failed to set memory value');
-        }
-    }
+    const compressedSize = originalSize * 0.7; // 30% compression
+    const savedBytes = originalSize - compressedSize;
 
-    async deleteMemoryValue(key) {
-        const response = await fetch('/api/memory/delete', {
-            method: 'DELETE',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ key })
-        });
-        
-        if (!response.ok) {
-            throw new Error('Failed to delete memory value');
-        }
-    }
+    this.compressionRate = (savedBytes / originalSize) * 100;
 
-    showSuccess(message) {
-        // Implementation for success notification
-        console.log('Success:', message);
-    }
+    return {
+      savedBytes: Math.floor(savedBytes),
+      compressionRate: this.compressionRate,
+    };
+  }
 
-    showError(message) {
-        // Implementation for error notification
-        console.error('Error:', message);
-    }
+  getCompressionRate() {
+    return `${this.compressionRate.toFixed(1)}%`;
+  }
 
-    async notifyCoordination(message) {
-        try {
-            await fetch('/api/coordination/notify', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message, timestamp: Date.now() })
-            });
-        } catch (error) {
-            console.error('Failed to notify coordination:', error);
-        }
-    }
+  calculateSize(memoryData) {
+    return JSON.stringify(Array.from(memoryData.entries())).length;
+  }
+}
 
-    startMonitoring() {
-        // Start real-time monitoring
-        setInterval(() => {
-            this.updateAnalytics();
-        }, 30000); // Update every 30 seconds
-    }
+class MemoryVisualizer {
+  constructor() {
+    this.usageChart = null;
+    this.patternChart = null;
+  }
 
-    render() {
-        return this.container;
-    }
-}
+  updateUsageChart(data) {
+    const canvas = document.getElementById('usage-chart');
+    if (!canvas) return;
 
-// Supporting classes
-class BackupManager {
-    constructor() {
-        this.backups = new Map();
-    }
+    const ctx = canvas.getContext('2d');
 
-    async createBackup(memoryData) {
-        const id = `backup_${Date.now()}`;
-        const backup = {
-            id,
-            timestamp: Date.now(),
-            data: new Map(memoryData),
-            size: this.calculateBackupSize(memoryData)
-        };
-        
-        this.backups.set(id, backup);
-        return backup;
-    }
+    // Simple chart implementation
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    async restoreBackup(backupId) {
-        const backup = this.backups.get(backupId);
-        if (!backup) {
-            throw new Error('Backup not found');
-        }
-        
-        return backup.data;
-    }
+    // Draw usage data
+    if (data.length > 0) {
+      ctx.beginPath();
+      ctx.strokeStyle = '#007bff';
+      ctx.lineWidth = 2;
 
-    calculateBackupSize(memoryData) {
-        return JSON.stringify(Array.from(memoryData.entries())).length;
-    }
-}
+      const width = canvas.width;
+      const height = canvas.height;
+      const stepX = width / (data.length - 1);
+      const maxValue = Math.max(...data.map((d) => d.operations));
 
-class SyncManager {
-    constructor() {
-        this.syncStatus = 'idle';
-        this.lastSync = null;
-    }
+      data.forEach((point, index) => {
+        const x = index * stepX;
+        const y = height - (point.operations / maxValue) * height;
 
-    async sync() {
-        this.syncStatus = 'syncing';
-        
-        try {
-            // Implement sync logic here
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            this.lastSync = Date.now();
-            this.syncStatus = 'synchronized';
-        } catch (error) {
-            this.syncStatus = 'error';
-            throw error;
+        if (index === 0) {
+          ctx.moveTo(x, y);
+        } else {
+          ctx.lineTo(x, y);
         }
-    }
+      });
 
-    getStatus() {
-        return {
-            status: this.syncStatus,
-            lastSync: this.lastSync
-        };
+      ctx.stroke();
     }
-}
+  }
 
-class CompressionManager {
-    constructor() {
-        this.compressionRate = 0;
-    }
+  updatePatternChart(data) {
+    const canvas = document.getElementById('pattern-chart');
+    if (!canvas) return;
 
-    async optimize(memoryData) {
-        // Implement compression logic
-        const originalSize = this.calculateSize(memoryData);
-        
-        // Simulate compression
-        await new Promise(resolve => setTimeout(resolve, 500));
-        
-        const compressedSize = originalSize * 0.7; // 30% compression
-        const savedBytes = originalSize - compressedSize;
-        
-        this.compressionRate = (savedBytes / originalSize) * 100;
-        
-        return {
-            savedBytes: Math.floor(savedBytes),
-            compressionRate: this.compressionRate
-        };
-    }
-
-    getCompressionRate() {
-        return `${this.compressionRate.toFixed(1)}%`;
-    }
+    const ctx = canvas.getContext('2d');
 
-    calculateSize(memoryData) {
-        return JSON.stringify(Array.from(memoryData.entries())).length;
-    }
-}
+    // Simple pattern chart implementation
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-class MemoryVisualizer {
-    constructor() {
-        this.usageChart = null;
-        this.patternChart = null;
-    }
+    // Draw pattern data as bars
+    if (data.length > 0) {
+      const width = canvas.width;
+      const height = canvas.height;
+      const barWidth = width / data.length;
+      const maxValue = Math.max(...data.map((d) => d[1].count || 0));
 
-    updateUsageChart(data) {
-        const canvas = document.getElementById('usage-chart');
-        if (!canvas) return;
-        
-        const ctx = canvas.getContext('2d');
-        
-        // Simple chart implementation
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
-        // Draw usage data
-        if (data.length > 0) {
-            ctx.beginPath();
-            ctx.strokeStyle = '#007bff';
-            ctx.lineWidth = 2;
-            
-            const width = canvas.width;
-            const height = canvas.height;
-            const stepX = width / (data.length - 1);
-            const maxValue = Math.max(...data.map(d => d.operations));
-            
-            data.forEach((point, index) => {
-                const x = index * stepX;
-                const y = height - (point.operations / maxValue) * height;
-                
-                if (index === 0) {
-                    ctx.moveTo(x, y);
-                } else {
-                    ctx.lineTo(x, y);
-                }
-            });
-            
-            ctx.stroke();
-        }
-    }
+      data.forEach((pattern, index) => {
+        const barHeight = ((pattern[1].count || 0) / maxValue) * height;
+        const x = index * barWidth;
+        const y = height - barHeight;
 
-    updatePatternChart(data) {
-        const canvas = document.getElementById('pattern-chart');
-        if (!canvas) return;
-        
-        const ctx = canvas.getContext('2d');
-        
-        // Simple pattern chart implementation
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
-        // Draw pattern data as bars
-        if (data.length > 0) {
-            const width = canvas.width;
-            const height = canvas.height;
-            const barWidth = width / data.length;
-            const maxValue = Math.max(...data.map(d => d[1].count || 0));
-            
-            data.forEach((pattern, index) => {
-                const barHeight = (pattern[1].count || 0) / maxValue * height;
-                const x = index * barWidth;
-                const y = height - barHeight;
-                
-                ctx.fillStyle = '#28a745';
-                ctx.fillRect(x, y, barWidth - 2, barHeight);
-            });
-        }
+        ctx.fillStyle = '#28a745';
+        ctx.fillRect(x, y, barWidth - 2, barHeight);
+      });
     }
+  }
 }
 
 // Export for use in other modules
-window.MemoryInterface = MemoryInterface;
+window.MemoryInterface = MemoryInterface;