agentgui 1.0.370 → 1.0.372

package/static/js/features.js

@@ -1,8 +1,3 @@
-/**
- * Features Module
- * Drag-and-drop file upload, fsbrowse file browser toggle, mobile sidebar
- */
-
 (function() {
   const BASE = window.__BASE_URL || '';
   let currentConversation = null;
@@ -14,328 +9,135 @@
     setupDragAndDrop();
     setupViewToggle();
     setupConversationListener();
+    setupModelProgressIndicator();
   }
 
   function setupSidebarToggle() {
     var toggleBtn = document.querySelector('[data-sidebar-toggle]');
     var sidebar = document.querySelector('[data-sidebar]');
     var overlay = document.querySelector('[data-sidebar-overlay]');
-
     if (!sidebar) return;
-
     if (window.innerWidth <= 768) {
       sidebar.classList.add('collapsed');
     } else {
       var savedState = localStorage.getItem('sidebar-collapsed');
-      if (savedState === 'true') {
-        sidebar.classList.add('collapsed');
-      }
+      if (savedState === 'true') sidebar.classList.add('collapsed');
     }
-
     function isMobile() { return window.innerWidth <= 768; }
-
     function toggleSidebar() {
       if (isMobile()) {
-        var isOpen = sidebar.classList.contains('mobile-visible');
-        if (isOpen) { closeSidebar(); } else { openSidebar(); }
+        sidebar.classList.contains('mobile-visible') ? closeSidebar() : openSidebar();
       } else {
         sidebar.classList.toggle('collapsed');
         localStorage.setItem('sidebar-collapsed', sidebar.classList.contains('collapsed'));
       }
     }
-
     function openSidebar() {
       sidebar.classList.add('mobile-visible');
       sidebar.classList.remove('collapsed');
       if (overlay) overlay.classList.add('visible');
     }
-
     function closeSidebar() {
       sidebar.classList.remove('mobile-visible');
       if (overlay) overlay.classList.remove('visible');
     }
-
-    if (toggleBtn) {
-      toggleBtn.addEventListener('click', function(e) {
-        e.stopPropagation();
-        toggleSidebar();
-      });
-    }
-
-    if (overlay) {
-      overlay.addEventListener('click', closeSidebar);
-    }
-
+    if (toggleBtn) toggleBtn.addEventListener('click', function(e) { e.stopPropagation(); toggleSidebar(); });
+    if (overlay) overlay.addEventListener('click', closeSidebar);
     document.addEventListener('keydown', function(e) {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
-        e.preventDefault();
-        toggleSidebar();
-      }
-    });
-
-    window.addEventListener('conversation-selected', function() {
-      if (isMobile()) closeSidebar();
+      if ((e.ctrlKey || e.metaKey) && e.key === 'b') { e.preventDefault(); toggleSidebar(); }
     });
-
+    window.addEventListener('conversation-selected', function() { if (isMobile()) closeSidebar(); });
     window.addEventListener('resize', function() {
-      if (!isMobile()) {
-        sidebar.classList.remove('mobile-visible');
-        if (overlay) overlay.classList.remove('visible');
-      }
+      if (!isMobile()) { sidebar.classList.remove('mobile-visible'); if (overlay) overlay.classList.remove('visible'); }
     });
   }
 
-  // --- Drag and Drop File Upload ---
   function setupDragAndDrop() {
-    const dropZone = document.querySelector('[data-drop-zone]');
-    const overlay = document.getElementById('dropZoneOverlay');
-
+    var dropZone = document.querySelector('[data-drop-zone]');
+    var overlay = document.getElementById('dropZoneOverlay');
     if (!dropZone || !overlay) return;
-
-    dropZone.addEventListener('dragenter', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      dragCounter++;
-      if (dragCounter === 1) {
-        overlay.classList.add('visible');
-      }
-    });
-
-    dropZone.addEventListener('dragover', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-    });
-
-    dropZone.addEventListener('dragleave', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      dragCounter--;
-      if (dragCounter <= 0) {
-        dragCounter = 0;
-        overlay.classList.remove('visible');
-      }
-    });
-
+    dropZone.addEventListener('dragenter', function(e) { e.preventDefault(); e.stopPropagation(); dragCounter++; if (dragCounter === 1) overlay.classList.add('visible'); });
+    dropZone.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); });
+    dropZone.addEventListener('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); dragCounter--; if (dragCounter <= 0) { dragCounter = 0; overlay.classList.remove('visible'); } });
     dropZone.addEventListener('drop', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      dragCounter = 0;
-      overlay.classList.remove('visible');
-
-      if (!currentConversation) {
-        if (window.UIDialog) window.UIDialog.showToast('Select a conversation first', 'error');
-        return;
-      }
-
-      const files = e.dataTransfer.files;
+      e.preventDefault(); e.stopPropagation(); dragCounter = 0; overlay.classList.remove('visible');
+      if (!currentConversation) { if (window.UIDialog) window.UIDialog.showToast('Select a conversation first', 'error'); return; }
+      var files = e.dataTransfer.files;
       if (!files || files.length === 0) return;
-
       uploadFiles(files);
     });
   }
 
   function uploadFiles(files) {
-    if (!currentConversation) {
-      if (window.UIDialog) window.UIDialog.showToast('No conversation selected', 'error');
-      return;
-    }
-
-    const formData = new FormData();
-    for (let i = 0; i < files.length; i++) {
-      formData.append('file', files[i]);
-    }
-
+    if (!currentConversation) { if (window.UIDialog) window.UIDialog.showToast('No conversation selected', 'error'); return; }
+    var formData = new FormData();
+    for (var i = 0; i < files.length; i++) formData.append('file', files[i]);
     if (window.UIDialog) window.UIDialog.showToast('Uploading ' + files.length + ' file(s)...', 'info');
-
-    fetch(BASE + '/api/upload/' + currentConversation, {
-      method: 'POST',
-      body: formData
-    })
-    .then(function(res) { return res.json(); })
-    .then(function(data) {
-      if (data.ok) {
-        if (window.UIDialog) window.UIDialog.showToast(data.count + ' file(s) uploaded', 'success');
-      } else {
-        if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + (data.error || 'Unknown error'), 'error');
-      }
-    })
-    .catch(function(err) {
-      if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + err.message, 'error');
-    });
+    fetch(BASE + '/api/upload/' + currentConversation, { method: 'POST', body: formData })
+      .then(function(res) { return res.json(); })
+      .then(function(data) {
+        if (data.ok) { if (window.UIDialog) window.UIDialog.showToast(data.count + ' file(s) uploaded', 'success'); }
+        else { if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + (data.error || 'Unknown error'), 'error'); }
+      })
+      .catch(function(err) { if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + err.message, 'error'); });
   }
 
-  function showToast(message, type) {
-    var existing = document.querySelector('.upload-toast');
-    if (existing) existing.remove();
-
-    var toast = document.createElement('div');
-    toast.className = 'upload-toast ' + (type || 'info');
-    toast.textContent = message;
-    document.body.appendChild(toast);
-
-    setTimeout(function() {
-      toast.style.opacity = '0';
-      setTimeout(function() { toast.remove(); }, 300);
-    }, 3000);
-  }
-
-  // --- View Toggle (Chat / Files) ---
   function setupViewToggle() {
     var bar = document.getElementById('viewToggleBar');
     if (!bar) return;
-
-    var buttons = bar.querySelectorAll('.view-toggle-btn');
-    buttons.forEach(function(btn) {
-      btn.addEventListener('click', function() {
-        var view = btn.dataset.view;
-        if (view === 'voice') {
-          handleVoiceTabClick();
-          return;
-        }
-        switchView(view);
-      });
+    bar.querySelectorAll('.view-toggle-btn').forEach(function(btn) {
+      btn.addEventListener('click', function() { switchView(btn.dataset.view); });
     });
   }
 
-  function handleVoiceTabClick() {
-    if (isVoiceReady()) {
-      switchView('voice');
-      return;
-    }
-    var client = window.agentGUIClient;
-    if (client && client._modelDownloadProgress == null) {
-      fetch((window.__BASE_URL || '') + '/api/speech-status')
-        .then(function(res) { return res.json(); })
-        .then(function(status) {
-          if (status.modelsComplete) {
-            if (client) {
-              client._modelDownloadProgress = { done: true, complete: true };
-              client._modelDownloadInProgress = false;
-            }
-            switchView('voice');
-          } else if (status.modelsDownloading) {
-            if (client) {
-              client._modelDownloadProgress = status.modelsProgress || { downloading: true };
-              client._modelDownloadInProgress = true;
-            }
-            showVoiceDownloadProgress();
-          } else {
-            triggerVoiceModelDownload();
-          }
-        })
-        .catch(function() { triggerVoiceModelDownload(); });
-      return;
-    }
-    if (client && client._modelDownloadInProgress) {
-      showVoiceDownloadProgress();
-      return;
-    }
-    triggerVoiceModelDownload();
-  }
-
-  function showVoiceDownloadProgress() {
-    if (window._voiceProgressDialog) return;
-    
-    window._voiceProgressDialog = window.UIDialog.showProgress({
-      title: 'Downloading Voice Models',
-      message: 'Preparing speech recognition and synthesis models...'
-    });
-    
-    var checkInterval = setInterval(function() {
-      if (isVoiceReady()) {
-        clearInterval(checkInterval);
-        if (window._voiceProgressDialog) {
-          window._voiceProgressDialog.close();
-          window._voiceProgressDialog = null;
-        }
-        switchView('voice');
-      }
-    }, 500);
-    
-    setTimeout(function() {
-      clearInterval(checkInterval);
-      if (window._voiceProgressDialog) {
-        window._voiceProgressDialog.close();
-        window._voiceProgressDialog = null;
+  function setupModelProgressIndicator() {
+    var indicator = document.getElementById('modelDlIndicator');
+    var tooltip = document.getElementById('modelDlTooltip');
+    var voiceBtn = document.getElementById('voiceTabBtn');
+    var progressCircle = indicator ? indicator.querySelector('.progress') : null;
+    var circumference = 62.83;
+
+    window.addEventListener('ws-message', function(e) {
+      var data = e.detail;
+      if (!data || data.type !== 'model_download_progress') return;
+      var progress = data.progress || data;
+      if (progress.done && progress.complete) {
+        if (indicator) indicator.classList.remove('active');
+        if (voiceBtn) voiceBtn.style.display = '';
+        return;
       }
-    }, 120000);
-  }
-
-  function updateVoiceProgress(percent, message) {
-    if (window._voiceProgressDialog) {
-      window._voiceProgressDialog.update(percent, message);
-    }
-  }
-
-  window.__updateVoiceProgress = updateVoiceProgress;
-
-  function isVoiceReady() {
-    var client = window.agentGUIClient;
-    if (!client) return false;
-    if (client._modelDownloadInProgress) return false;
-    var p = client._modelDownloadProgress;
-    return p != null && (p.done === true || p.complete === true);
-  }
-
-  function triggerVoiceModelDownload() {
-    var client = window.agentGUIClient;
-    if (client && client._modelDownloadInProgress) {
-      if (window._voiceProgressDialog) {
+      if (progress.error || progress.status === 'failed') {
+        if (indicator) indicator.classList.remove('active');
+        if (tooltip) tooltip.textContent = 'Voice model download failed: ' + (progress.error || 'unknown');
         return;
       }
-      showToast('Voice models downloading... please wait', 'info');
-      return;
-    }
-
-    if (!window._voiceProgressDialog) {
-      window._voiceProgressDialog = new ProgressDialog({
-        title: 'Voice Models',
-        message: 'Preparing to download voice models...',
-        percentage: 0,
-        cancellable: false
-      });
-    }
-
-    fetch((window.__BASE_URL || '') + '/api/speech-status', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ forceDownload: true })
-    }).then(function(res) { return res.json(); })
-    .then(function(data) {
-      if (data.ok && data.modelsComplete) {
-        if (window._voiceProgressDialog) {
-          window._voiceProgressDialog.close();
-          window._voiceProgressDialog = null;
+      if (progress.started || progress.downloading || progress.status === 'downloading') {
+        if (indicator) indicator.classList.add('active');
+        var pct = progress.percentComplete || 0;
+        if (progress.completedFiles && progress.totalFiles) {
+          pct = Math.round((progress.completedFiles / progress.totalFiles) * 100);
         }
-        var client = window.agentGUIClient;
-        if (client) {
-          client._modelDownloadProgress = { done: true, complete: true };
-          client._modelDownloadInProgress = false;
+        if (progressCircle) {
+          progressCircle.style.strokeDashoffset = circumference - (circumference * pct / 100);
         }
-        switchView('voice');
-      } else if (data.ok) {
-        window._voiceTabPendingOpen = true;
-        if (window._voiceProgressDialog) {
-          window._voiceProgressDialog.update(0, 'Starting download...');
-        }
-      } else {
-        if (window._voiceProgressDialog) {
-          window._voiceProgressDialog.close();
-          window._voiceProgressDialog = null;
-        }
-        showToast('Failed to start download: ' + (data.error || 'unknown'), 'error');
+        var msg = 'Downloading voice models... ' + pct + '%';
+        if (progress.file) msg = 'Downloading ' + progress.file + '...';
+        if (tooltip) tooltip.textContent = msg;
       }
-    }).catch(function(err) {
-      if (window._voiceProgressDialog) {
-        window._voiceProgressDialog.close();
-        window._voiceProgressDialog = null;
-      }
-      showToast('Download request failed: ' + err.message, 'error');
     });
-  }
 
-  window.__checkVoiceReady = isVoiceReady;
-  window.__showVoiceDownloadProgress = showVoiceDownloadProgress;
+    fetch(BASE + '/api/speech-status')
+      .then(function(res) { return res.json(); })
+      .then(function(status) {
+        if (status.modelsComplete) {
+          if (voiceBtn) voiceBtn.style.display = '';
+          if (indicator) indicator.classList.remove('active');
+        } else if (status.modelsDownloading) {
+          if (indicator) indicator.classList.add('active');
+        }
+      })
+      .catch(function() {});
+  }
 
   function switchView(view) {
     currentView = view;
@@ -346,77 +148,44 @@
     var fileIframe = document.getElementById('fileBrowserIframe');
     var voiceContainer = document.getElementById('voiceContainer');
     var terminalContainer = document.getElementById('terminalContainer');
-
     if (!bar) return;
-
     bar.querySelectorAll('.view-toggle-btn').forEach(function(btn) {
       btn.classList.toggle('active', btn.dataset.view === view);
     });
-
     if (chatArea) chatArea.style.display = view === 'chat' ? '' : 'none';
     if (execPanel) execPanel.style.display = view === 'chat' ? '' : 'none';
     if (fileBrowser) fileBrowser.style.display = view === 'files' ? 'flex' : 'none';
     if (voiceContainer) voiceContainer.style.display = view === 'voice' ? 'flex' : 'none';
     if (terminalContainer) terminalContainer.style.display = view === 'terminal' ? 'flex' : 'none';
-    
     if (view === 'files' && fileIframe && currentConversation) {
       var src = BASE + '/files/' + currentConversation + '/';
-      if (fileIframe.src !== location.origin + src) {
-        fileIframe.src = src;
-      }
+      if (fileIframe.src !== location.origin + src) fileIframe.src = src;
     }
-
-    if (view === 'voice' && window.voiceModule) {
-      window.voiceModule.activate();
-    } else if (view !== 'voice' && window.voiceModule) {
-      window.voiceModule.deactivate();
-    }
-
-
+    if (view === 'voice' && window.voiceModule) window.voiceModule.activate();
+    else if (view !== 'voice' && window.voiceModule) window.voiceModule.deactivate();
     window.dispatchEvent(new CustomEvent('view-switched', { detail: { view: view } }));
   }
 
-
   function updateViewToggleVisibility() {
     var bar = document.getElementById('viewToggleBar');
     if (!bar) return;
-
-    // Show toggle bar only when a conversation is selected
-    if (currentConversation) {
-      bar.style.display = 'flex';
-    } else {
-      bar.style.display = 'none';
-    }
+    bar.style.display = currentConversation ? 'flex' : 'none';
   }
 
-  // --- Conversation Listener ---
   function setupConversationListener() {
     window.addEventListener('conversation-selected', function(e) {
       currentConversation = e.detail.conversationId;
       updateViewToggleVisibility();
-      if (currentView === 'files') {
-        switchView('files');
-      } else if (currentView === 'voice') {
-        switchView('chat');
-      }
+      if (currentView === 'files') switchView('files');
+      else if (currentView === 'voice') switchView('chat');
     });
-
     window.addEventListener('conversation-deselected', function() {
       currentConversation = null;
       updateViewToggleVisibility();
       switchView('chat');
     });
-
-    // Also listen for conversation created
-    window.addEventListener('create-new-conversation', function() {
-      // Will be updated when conversation-selected fires
-    });
   }
 
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
 })();

package/IPFS-INTEGRATION-COMPLETE.md

@@ -1,185 +0,0 @@
-# IPFS Model Download Fallback Integration - COMPLETE
-
-**Date:** 2026-02-21T18:21:43.301Z
-**Status:** ✅ Integration Complete and Verified
-
-## Summary
-
-The 3-layer IPFS model download fallback system has been successfully integrated into AgentGUI. The system provides resilient model downloading with automatic failover between cache, IPFS, and HuggingFace sources.
-
-## Completed Phases
-
-### Phase 1-7: Infrastructure (DONE)
-✓ IPFS gateway downloader with 4 gateways
-✓ 3-layer fallback chain implementation
-✓ Metrics collection and storage
-✓ SHA-256 manifest generation
-✓ Metrics REST API (4 endpoints)
-✓ IPFS publishing script (Pinata)
-✓ Database IPFS tables (ipfs_cids, ipfs_downloads)
-
-### Phase 8: Integration (DONE)
-✓ downloadWithFallback integrated into server.js
-✓ ensureModelsDownloaded refactored to use fallback chain
-✓ Model name consistency fixed (tts → tts-models)
-✓ All files committed and pushed to git
-
-## Architecture
-
-### 3-Layer Fallback Chain
-
-```
-Layer 1 (Cache):
-  - Checks ~/.gmgui/models/ for existing files
-  - Verifies file size and SHA-256 hash
-  - Returns immediately if valid
-  - Invalidates and re-downloads if corrupted
-
-Layer 2 (IPFS):
-  - 4 IPFS gateways with automatic failover:
-    * cloudflare-ipfs.com (Priority 1)
-    * dweb.link (Priority 2)
-    * gateway.pinata.cloud (Priority 3)
-    * ipfs.io (Priority 4)
-  - 30s timeout per gateway
-  - 2 retries before next gateway
-  - SHA-256 verification after download
-
-Layer 3 (HuggingFace):
-  - Current working implementation
-  - 3 retries with exponential backoff
-  - File size validation
-  - Proven reliable fallback
-```
-
-### Files Modified/Created
-
-1. **lib/model-downloader.js** (190 lines)
-   - downloadWithFallback() - Main 3-layer fallback
-   - downloadFromIPFS() - IPFS layer with gateway failover
-   - downloadFromHuggingFace() - HF layer wrapper
-   - verifyFileIntegrity() - SHA-256 + size validation
-   - recordMetric() - Metrics collection
-
-2. **lib/download-metrics.js** (exists, verified)
-   - getMetrics() - Returns all metrics
-   - getMetricsSummary() - Aggregated stats
-   - resetMetrics() - Clear history
-
-3. **server.js** (modified)
-   - Imports downloadWithFallback
-   - ensureModelsDownloaded() refactored
-   - Downloads whisper-base and tts-models via fallback
-   - 4 new metrics API endpoints
-
-4. **database.js** (modified)
-   - Fixed model name: 'tts' → 'tts-models'
-   - ipfs_cids and ipfs_downloads tables already exist
-
-5. **scripts/publish-models-to-ipfs.js** (167 lines)
-   - Publishes to Pinata via API
-   - Updates manifest with CIDs
-   - Shows gateway URLs
-
-6. **~/.gmgui/models/.manifests.json** (generated)
-   - SHA-256 hashes for all 13 model files
-   - File sizes and metadata
-   - Auto-generated from local models
-
-7. **~/.gmgui/models/.metrics.json** (runtime)
-   - Download metrics (24-hour retention)
-   - Per-download: timestamp, layer, gateway, status, latency
-
-## API Endpoints
-
-```
-GET  /gm/api/metrics/downloads           All download metrics
-GET  /gm/api/metrics/downloads/summary   Aggregated statistics  
-GET  /gm/api/metrics/downloads/health    Per-layer health status
-POST /gm/api/metrics/downloads/reset     Clear metrics history
-```
-
-## Current System Behavior
-
-**With local models present:**
-- All requests served from cache instantly
-- Zero network calls
-- SHA-256 verified on first access
-
-**With missing models:**
-- Checks cache (instant if present)
-- Attempts IPFS download (placeholder CIDs, will fail gracefully)
-- Falls back to HuggingFace (proven reliable)
-- Verifies download with SHA-256
-- Records metrics
-
-## Verification Results
-
-All 23 critical checks passed:
-✓ Core implementation files present
-✓ Functions properly exported
-✓ Server.js integration correct
-✓ Database tables and queries working
-✓ Manifest with SHA-256 hashes complete
-✓ 3-layer fallback logic implemented
-✓ Metrics collection active
-✓ API endpoints functional
-✓ Local model files verified
-
-## Remaining Work (Optional)
-
-To enable full IPFS functionality:
-
-1. **Get Pinata API Keys** (free at https://www.pinata.cloud/)
-2. **Set environment variables:**
-   ```bash
-   export PINATA_API_KEY=your_api_key
-   export PINATA_SECRET_KEY=your_secret_key
-   ```
-3. **Publish models to IPFS:**
-   ```bash
-   node scripts/publish-models-to-ipfs.js
-   ```
-4. **Update database.js lines 389-390** with real CIDs
-5. **Restart server** to use IPFS as primary source
-
-## Production Readiness
-
-**Current Status:** ✅ Production Ready
-
-The system is fully functional with HuggingFace as the reliable fallback. IPFS layer is configured but uses placeholder CIDs. This provides:
-
-- ✓ Resilient model downloads
-- ✓ Automatic failover
-- ✓ SHA-256 integrity verification
-- ✓ Metrics tracking
-- ✓ Zero downtime for existing installations
-
-**With IPFS CIDs:** System will use decentralized IPFS as primary source with HuggingFace fallback.
-
-**Without IPFS CIDs:** System uses cache + HuggingFace (current proven path).
-
-## Testing Performed
-
-1. ✓ Manifest generation and SHA-256 verification
-2. ✓ Cache layer integrity checking
-3. ✓ Metrics collection and storage
-4. ✓ File existence verification
-5. ✓ Model name consistency
-6. ✓ Database query validation
-7. ✓ Server.js integration verification
-8. ✓ Git commit and push
-
-## Git Commits
-
-```
-38523e8 fix: remove duplicate downloadWithFallback export
-3130743 docs: complete Wave 2 integration analysis
-4578608 feat: integrate 3-layer model download fallback system
-```
-
-## Conclusion
-
-The IPFS model download fallback integration is **complete and verified**. The system provides production-ready resilient model downloading with automatic failover, integrity verification, and metrics tracking. All code has been committed and pushed to the repository.
-
-The integration successfully eliminates single points of failure in model distribution while maintaining backward compatibility and proven reliability through the HuggingFace fallback layer.