agentgui 1.0.728 → 1.0.730

package/static/js/tools-manager-ui.js

@@ -0,0 +1,119 @@
+(function() {
+  window.toolsManagerUI = {
+    getStatusColor: function(tool) {
+      var ms = window.toolInstallMachineAPI ? window.toolInstallMachineAPI.getState(tool.id) : null;
+      if (ms === 'installing' || ms === 'updating') return '#3b82f6';
+      if (ms === 'needs_update') return '#f59e0b';
+      if (ms === 'installed') return '#10b981';
+      if (ms === 'failed') return '#ef4444';
+      if (tool.status === 'installing' || tool.status === 'updating') return '#3b82f6';
+      if (tool.status === 'needs_update' || (tool.status === 'installed' && tool.hasUpdate)) return '#f59e0b';
+      if (tool.status === 'installed') return '#10b981';
+      if (tool.status === 'failed') return '#ef4444';
+      return '#6b7280';
+    },
+
+    getStatusText: function(tool) {
+      var ms = window.toolInstallMachineAPI ? window.toolInstallMachineAPI.getState(tool.id) : null;
+      if (ms === 'installing') return 'Installing...';
+      if (ms === 'updating') return 'Updating...';
+      if (ms === 'needs_update') return 'Update available';
+      if (ms === 'installed') return tool.hasUpdate ? 'Update available' : 'Up-to-date';
+      if (ms === 'failed') return 'Installation failed';
+      if (tool.status === 'installing') return 'Installing...';
+      if (tool.status === 'updating') return 'Updating...';
+      if (tool.status === 'needs_update') return 'Update available';
+      if (tool.status === 'installed') return tool.hasUpdate ? 'Update available' : 'Up-to-date';
+      if (tool.status === 'failed') return 'Installation failed';
+      return 'Not installed';
+    },
+
+    getStatusClass: function(tool) {
+      var ms = window.toolInstallMachineAPI ? window.toolInstallMachineAPI.getState(tool.id) : null;
+      if (ms === 'installing' || ms === 'updating') return 'installing';
+      if (ms === 'needs_update') return 'updating';
+      if (ms === 'installed') return 'installed';
+      if (ms === 'failed') return 'failed';
+      if (tool.status === 'installing' || tool.status === 'updating') return 'installing';
+      if (tool.status === 'needs_update' || (tool.status === 'installed' && tool.hasUpdate)) return 'updating';
+      if (tool.status === 'installed') return 'installed';
+      if (tool.status === 'failed') return 'failed';
+      return 'not-installed';
+    },
+
+    renderToolCard: function(tool, isRefreshing) {
+      var ui = window.toolsManagerUI;
+      var statusClass = ui.getStatusClass(tool);
+      var ms = window.toolInstallMachineAPI ? window.toolInstallMachineAPI.getState(tool.id) : null;
+      var isInstalling = ms === 'installing' || ms === 'updating';
+      var snap = window.__toolInstallMachines && window.__toolInstallMachines.get(tool.id) ? window.__toolInstallMachines.get(tool.id).getSnapshot() : null;
+      var progress = snap ? snap.context.progress : 0;
+      var locked = window.toolInstallMachineAPI ? window.toolInstallMachineAPI.isLocked(tool.id) : false;
+      var canInstall = ms === 'idle' || ms === 'failed' || tool.status === 'not_installed' || tool.status === 'failed';
+      var canUpdate = ms === 'needs_update' || tool.hasUpdate || tool.status === 'needs_update';
+      var iv = (snap && snap.context.installedVersion) || tool.installedVersion;
+      var pv = (snap && snap.context.publishedVersion) || tool.publishedVersion;
+      var versionInfo = '';
+      if (iv || pv) {
+        versionInfo = '<div class="tool-versions">';
+        if (iv) versionInfo += '<span class="tool-version-item">v' + ui.esc(iv) + '</span>';
+        if (pv && iv !== pv) versionInfo += '<span class="tool-version-item">(v' + ui.esc(pv) + ' available)</span>';
+        versionInfo += '</div>';
+      }
+      return '<div class="tool-item">' +
+        '<div style="display: flex; flex-direction: column; gap: 0.3rem;">' +
+        '<div class="tool-header"><span class="tool-name">' + ui.esc(tool.name || tool.id) + '</span></div>' +
+        '<div class="tool-status-indicator ' + statusClass + '"><span class="tool-status-dot"></span><span>' + ui.getStatusText(tool) + '</span></div>' +
+        versionInfo +
+        (isInstalling && progress !== undefined ? '<div class="tool-progress-container"><div class="tool-progress-bar"><div class="tool-progress-fill" style="width:' + Math.min(progress, 100) + '%"></div></div></div>' : '') +
+        (tool.error_message ? '<div class="tool-error-message">Error: ' + ui.esc(tool.error_message.substring(0, 40)) + '</div>' : '') +
+        '</div>' +
+        '<div class="tool-actions">' +
+        (canInstall ? '<button class="tool-btn tool-btn-primary" onclick="window.toolsManager.install(\'' + tool.id + '\')" ' + (locked ? 'disabled' : '') + '>Install</button>' :
+          canUpdate ? '<button class="tool-btn tool-btn-primary" onclick="window.toolsManager.update(\'' + tool.id + '\')" ' + (locked ? 'disabled' : '') + '>Update</button>' :
+          '<button class="tool-btn tool-btn-secondary" onclick="window.toolsManager.refresh()" ' + (isRefreshing ? 'disabled' : '') + '>&#10003;</button>') +
+        '</div></div>';
+    },
+
+    esc: function(s) {
+      var d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
+    },
+
+    updateVoiceSelector: function(voices) {
+      var voiceSelector = document.getElementById('toolsVoiceSelector');
+      if (!voiceSelector || !voices || !Array.isArray(voices)) return;
+      var currentValue = voiceSelector.value || localStorage.getItem('toolsVoice') || 'default';
+      voiceSelector.innerHTML = '';
+      var builtIn = voices.filter(function(v) { return !v.isCustom; });
+      var custom = voices.filter(function(v) { return v.isCustom; });
+      if (builtIn.length) {
+        var grp1 = document.createElement('optgroup');
+        grp1.label = 'Built-in Voices';
+        builtIn.forEach(function(voice) {
+          var opt = document.createElement('option');
+          opt.value = voice.id;
+          var parts = [];
+          if (voice.gender && voice.gender !== 'custom') parts.push(voice.gender);
+          if (voice.accent && voice.accent !== 'custom') parts.push(voice.accent);
+          opt.textContent = voice.name + (parts.length ? ' (' + parts.join(', ') + ')' : '');
+          grp1.appendChild(opt);
+        });
+        voiceSelector.appendChild(grp1);
+      }
+      if (custom.length) {
+        var grp2 = document.createElement('optgroup');
+        grp2.label = 'Custom Voices';
+        custom.forEach(function(voice) {
+          var opt = document.createElement('option');
+          opt.value = voice.id;
+          opt.textContent = voice.name;
+          grp2.appendChild(opt);
+        });
+        voiceSelector.appendChild(grp2);
+      }
+      if (voiceSelector.querySelector('option[value="' + currentValue + '"]')) voiceSelector.value = currentValue;
+    }
+  };
+})();