@agenticmail/enterprise 0.5.197 → 0.5.199

package/dashboards/html/src/pages/skill-connections.js

@@ -1,293 +0,0 @@
-/**
- * Skill Connections page - Manage connections between skills and agents
- */
-function renderSkillConnections() {
-  return `
-    <div class="page-title">Skill Connections</div>
-    
-    <div class="stat-grid">
-      <div class="stat-card">
-        <div class="stat-label">Active Connections</div>
-        <div class="stat-value">156</div>
-        <div class="stat-change" style="color: var(--success)">+8 this week</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Skill Networks</div>
-        <div class="stat-value">23</div>
-        <div class="stat-change" style="color: var(--success)">+2 new</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Cross-Agent Skills</div>
-        <div class="stat-value">47</div>
-        <div class="stat-change" style="color: var(--text-muted)">Shared skills</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Connection Health</div>
-        <div class="stat-value" style="color: var(--success)">98%</div>
-        <div class="stat-change" style="color: var(--success)">Excellent</div>
-      </div>
-    </div>
-
-    <div style="display: flex; gap: 16px; margin-bottom: 24px; align-items: center;">
-      <input class="input" placeholder="Search connections..." style="flex: 1;">
-      <select class="input" style="width: auto;">
-        <option>All Agents</option>
-        <option>Alice</option>
-        <option>Bob</option>
-        <option>Charlie</option>
-        <option>Diana</option>
-      </select>
-      <select class="input" style="width: auto;">
-        <option>All Skills</option>
-        <option>Email Processing</option>
-        <option>Data Analysis</option>
-        <option>Customer Support</option>
-        <option>API Integration</option>
-      </select>
-      <button class="btn btn-primary">
-        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-          <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
-        </svg>
-        Create Connection
-      </button>
-    </div>
-
-    <div class="card">
-      <div class="card-header">
-        <h3>Connection Map</h3>
-        <div>
-          <button class="btn btn-secondary">View Network</button>
-          <button class="btn btn-secondary" style="margin-left: 8px;">Export</button>
-        </div>
-      </div>
-      <div class="card-body">
-        <div style="background: var(--bg-tertiary); border-radius: var(--radius); padding: 40px; text-align: center; margin-bottom: 24px;">
-          <div style="font-size: 14px; color: var(--text-muted); margin-bottom: 16px;">
-            Interactive skill connection visualization would be displayed here
-          </div>
-          <button class="btn btn-secondary">Launch Network Viewer</button>
-        </div>
-        
-        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;">
-          <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center;">
-            <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin: 0 auto 12px;">A</div>
-            <div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Alice</div>
-            <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 12px;">Customer Support Agent</div>
-            <div style="font-size: 12px;">
-              <span class="badge badge-primary" style="margin-right: 4px;">Email</span>
-              <span class="badge badge-success" style="margin-right: 4px;">Chat</span>
-              <span class="badge badge-info">Analytics</span>
-            </div>
-          </div>
-          
-          <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center;">
-            <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin: 0 auto 12px;">B</div>
-            <div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Bob</div>
-            <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 12px;">Data Analyst</div>
-            <div style="font-size: 12px;">
-              <span class="badge badge-info" style="margin-right: 4px;">Analytics</span>
-              <span class="badge badge-warning" style="margin-right: 4px;">Reports</span>
-              <span class="badge badge-primary">API</span>
-            </div>
-          </div>
-          
-          <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center;">
-            <div style="width: 48px; height: 48px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; margin: 0 auto 12px;">C</div>
-            <div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Charlie</div>
-            <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 12px;">Integration Specialist</div>
-            <div style="font-size: 12px;">
-              <span class="badge badge-primary" style="margin-right: 4px;">API</span>
-              <span class="badge badge-danger" style="margin-right: 4px;">Security</span>
-              <span class="badge badge-info">Webhooks</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card" style="margin-top: 24px;">
-      <div class="card-header">
-        <h3>Active Connections</h3>
-        <div>
-          <button class="btn btn-secondary">
-            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-              <path d="M3 14.25V1.75a.75.75 0 0 1 1.5 0v12.5a.75.75 0 0 1-1.5 0zM8.5 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75zM13 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75z"/>
-            </svg>
-            Filter
-          </button>
-        </div>
-      </div>
-      <div class="card-body">
-        <div style="overflow-x: auto;">
-          <table>
-            <thead>
-              <tr>
-                <th>Connection</th>
-                <th>Skill</th>
-                <th>Type</th>
-                <th>Usage</th>
-                <th>Status</th>
-                <th>Last Used</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <div style="display: flex; align-items: center; gap: 8px;">
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">A</div>
-                    <span>Alice</span>
-                    <svg width="12" height="12" fill="currentColor" style="color: var(--text-muted);">
-                      <path d="M4.5 1a.5.5 0 0 1 .5.5V6h5.5a.5.5 0 0 1 0 1H5v4.5a.5.5 0 0 1-1 0V7H.5a.5.5 0 0 1 0-1H4V1.5a.5.5 0 0 1 .5-.5z"/>
-                    </svg>
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">B</div>
-                    <span>Bob</span>
-                  </div>
-                </td>
-                <td>
-                  <div>
-                    <div style="font-weight: 600;">Data Analytics</div>
-                    <div style="font-size: 11px; color: var(--text-muted);">Shared analytics processing</div>
-                  </div>
-                </td>
-                <td><span class="badge badge-primary">Bidirectional</span></td>
-                <td>
-                  <div style="font-size: 13px; font-weight: 600;">847</div>
-                  <div style="font-size: 11px; color: var(--text-muted);">calls</div>
-                </td>
-                <td><span class="badge badge-success">Active</span></td>
-                <td>5 mins ago</td>
-                <td>
-                  <button class="btn btn-sm btn-secondary" style="margin-right: 4px;">Configure</button>
-                  <button class="btn btn-sm btn-danger">Disconnect</button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div style="display: flex; align-items: center; gap: 8px;">
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">B</div>
-                    <span>Bob</span>
-                    <svg width="12" height="12" fill="currentColor" style="color: var(--text-muted);">
-                      <path d="M4.5 1a.5.5 0 0 1 .5.5V6h5.5a.5.5 0 0 1 0 1H5v4.5a.5.5 0 0 1-1 0V7H.5a.5.5 0 0 1 0-1H4V1.5a.5.5 0 0 1 .5-.5z"/>
-                    </svg>
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">C</div>
-                    <span>Charlie</span>
-                  </div>
-                </td>
-                <td>
-                  <div>
-                    <div style="font-weight: 600;">API Integration</div>
-                    <div style="font-size: 11px; color: var(--text-muted);">External service connections</div>
-                  </div>
-                </td>
-                <td><span class="badge badge-info">Unidirectional</span></td>
-                <td>
-                  <div style="font-size: 13px; font-weight: 600;">234</div>
-                  <div style="font-size: 11px; color: var(--text-muted);">calls</div>
-                </td>
-                <td><span class="badge badge-success">Active</span></td>
-                <td>12 mins ago</td>
-                <td>
-                  <button class="btn btn-sm btn-secondary" style="margin-right: 4px;">Configure</button>
-                  <button class="btn btn-sm btn-danger">Disconnect</button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div style="display: flex; align-items: center; gap: 8px;">
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">A</div>
-                    <span>Alice</span>
-                    <svg width="12" height="12" fill="currentColor" style="color: var(--text-muted);">
-                      <path d="M4.5 1a.5.5 0 0 1 .5.5V6h5.5a.5.5 0 0 1 0 1H5v4.5a.5.5 0 0 1-1 0V7H.5a.5.5 0 0 1 0-1H4V1.5a.5.5 0 0 1 .5-.5z"/>
-                    </svg>
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">C</div>
-                    <span>Charlie</span>
-                  </div>
-                </td>
-                <td>
-                  <div>
-                    <div style="font-weight: 600;">Security Scanning</div>
-                    <div style="font-size: 11px; color: var(--text-muted);">Email security validation</div>
-                  </div>
-                </td>
-                <td><span class="badge badge-warning">On-demand</span></td>
-                <td>
-                  <div style="font-size: 13px; font-weight: 600;">56</div>
-                  <div style="font-size: 11px; color: var(--text-muted);">calls</div>
-                </td>
-                <td><span class="badge badge-success">Active</span></td>
-                <td>1 hour ago</td>
-                <td>
-                  <button class="btn btn-sm btn-secondary" style="margin-right: 4px;">Configure</button>
-                  <button class="btn btn-sm btn-danger">Disconnect</button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div style="display: flex; align-items: center; gap: 8px;">
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--info-soft); color: var(--info); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">D</div>
-                    <span>Diana</span>
-                    <svg width="12" height="12" fill="currentColor" style="color: var(--text-muted);">
-                      <path d="M4.5 1a.5.5 0 0 1 .5.5V6h5.5a.5.5 0 0 1 0 1H5v4.5a.5.5 0 0 1-1 0V7H.5a.5.5 0 0 1 0-1H4V1.5a.5.5 0 0 1 .5-.5z"/>
-                    </svg>
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">A</div>
-                    <span>Alice</span>
-                  </div>
-                </td>
-                <td>
-                  <div>
-                    <div style="font-weight: 600;">Template Generation</div>
-                    <div style="font-size: 11px; color: var(--text-muted);">Dynamic email templates</div>
-                  </div>
-                </td>
-                <td><span class="badge badge-primary">Bidirectional</span></td>
-                <td>
-                  <div style="font-size: 13px; font-weight: 600;">123</div>
-                  <div style="font-size: 11px; color: var(--text-muted);">calls</div>
-                </td>
-                <td><span class="badge badge-warning">Idle</span></td>
-                <td>2 hours ago</td>
-                <td>
-                  <button class="btn btn-sm btn-secondary" style="margin-right: 4px;">Configure</button>
-                  <button class="btn btn-sm btn-danger">Disconnect</button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <div style="display: flex; align-items: center; gap: 8px;">
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">C</div>
-                    <span>Charlie</span>
-                    <svg width="12" height="12" fill="currentColor" style="color: var(--text-muted);">
-                      <path d="M4.5 1a.5.5 0 0 1 .5.5V6h5.5a.5.5 0 0 1 0 1H5v4.5a.5.5 0 0 1-1 0V7H.5a.5.5 0 0 1 0-1H4V1.5a.5.5 0 0 1 .5-.5z"/>
-                    </svg>
-                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--info-soft); color: var(--info); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">D</div>
-                    <span>Diana</span>
-                  </div>
-                </td>
-                <td>
-                  <div>
-                    <div style="font-weight: 600;">Webhook Processing</div>
-                    <div style="font-size: 11px; color: var(--text-muted);">Real-time event handling</div>
-                  </div>
-                </td>
-                <td><span class="badge badge-info">Unidirectional</span></td>
-                <td>
-                  <div style="font-size: 13px; font-weight: 600;">445</div>
-                  <div style="font-size: 11px; color: var(--text-muted);">calls</div>
-                </td>
-                <td><span class="badge badge-danger">Error</span></td>
-                <td>3 hours ago</td>
-                <td>
-                  <button class="btn btn-sm btn-secondary" style="margin-right: 4px;">Debug</button>
-                  <button class="btn btn-sm btn-danger">Disconnect</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-export { renderSkillConnections };

package/dashboards/html/src/pages/skills.js

@@ -1,114 +0,0 @@
-// Skills page — builtin catalog + installed community skills
-
-import { api } from '../api.js';
-import { esc } from '../utils/escape.js';
-import { toast } from '../utils/toast.js';
-import { renderTable } from '../components/table.js';
-
-export function loadSkills() {
-  var el = document.getElementById('page-content');
-  el.innerHTML = '<div><h2 class="page-title">Skills</h2><p class="page-desc">Builtin capabilities and community skill extensions</p></div>' +
-    '<div class="card"><h3>Builtin Skills</h3><div class="page-desc">Loading...</div></div>' +
-    '<div class="card"><h3>Installed Community Skills</h3><div class="page-desc">Loading...</div></div>';
-
-  var cards = el.querySelectorAll('.card');
-
-  // Load builtin skills by category
-  api('/engine/skills/by-category').then(function(d) {
-    var categories = d.categories || d || {};
-    var entries = typeof categories === 'object' && !Array.isArray(categories) ? Object.entries(categories) : [];
-
-    if (entries.length === 0) {
-      cards[0].innerHTML = '<h3>Builtin Skills</h3><div class="empty"><div class="empty-icon">&#9889;</div>No builtin skills found.</div>';
-      return;
-    }
-
-    var html = '<h3>Builtin Skills</h3>';
-    entries.forEach(function(entry) {
-      var catName = entry[0];
-      var skills = Array.isArray(entry[1]) ? entry[1] : [];
-      var skillCards = skills.map(function(s) {
-        return '<div style="border:1px solid var(--border);border-radius:8px;padding:14px;background:var(--bg)">' +
-          '<div style="font-weight:600;font-size:14px;margin-bottom:4px">' + esc(s.name || s.id || '-') + '</div>' +
-          '<div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.4">' + esc(s.description || '') + '</div>' +
-          (s.version ? '<span style="font-size:11px;color:var(--text-muted)">v' + esc(s.version) + '</span>' : '') +
-          '</div>';
-      }).join('');
-
-      html += '<div style="margin-bottom:20px">' +
-        '<h4 style="font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px">' + esc(catName) + '</h4>' +
-        '<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:12px">' + skillCards + '</div>' +
-        '</div>';
-    });
-
-    cards[0].innerHTML = html;
-  }).catch(function() {
-    cards[0].innerHTML = '<h3>Builtin Skills</h3><div class="empty"><div class="empty-icon">&#9889;</div>No builtin skills found.</div>';
-  });
-
-  // Load installed community skills
-  api('/engine/community/installed?orgId=default').then(function(d) {
-    var installed = d.skills || (Array.isArray(d) ? d : []);
-
-    if (installed.length === 0) {
-      cards[1].innerHTML = '<h3>Installed Community Skills</h3><div class="empty"><div class="empty-icon">&#128230;</div>No community skills installed.</div>';
-      return;
-    }
-
-    var rows = installed.map(function(s) {
-      var isEnabled = s.enabled !== false && s.status !== 'disabled';
-      var toggleBtn = isEnabled
-        ? '<button class="btn btn-sm" data-disable-skill="' + s.id + '">Disable</button>'
-        : '<button class="btn btn-sm btn-primary" data-enable-skill="' + s.id + '">Enable</button>';
-      var uninstallBtn = '<button class="btn btn-sm btn-danger" data-uninstall-skill="' + s.id + '">Uninstall</button>';
-
-      return '<tr>' +
-        '<td style="font-weight:600">' + esc(s.name || s.id || '-') + '</td>' +
-        '<td style="color:var(--text-muted);font-size:12px">' + esc(s.version || '-') + '</td>' +
-        '<td>' + (isEnabled ? '<span class="badge badge-success">enabled</span>' : '<span class="badge badge-danger">disabled</span>') + '</td>' +
-        '<td>' + toggleBtn + ' ' + uninstallBtn + '</td>' +
-        '</tr>';
-    }).join('');
-
-    cards[1].innerHTML = '<h3>Installed Community Skills (' + installed.length + ')</h3>' + renderTable(['Name', 'Version', 'Status', 'Actions'], rows);
-
-    el.querySelectorAll('[data-enable-skill]').forEach(function(btn) {
-      btn.onclick = function() {
-        enableSkill(btn.getAttribute('data-enable-skill'));
-      };
-    });
-
-    el.querySelectorAll('[data-disable-skill]').forEach(function(btn) {
-      btn.onclick = function() {
-        disableSkill(btn.getAttribute('data-disable-skill'));
-      };
-    });
-
-    el.querySelectorAll('[data-uninstall-skill]').forEach(function(btn) {
-      btn.onclick = function() {
-        uninstallSkill(btn.getAttribute('data-uninstall-skill'));
-      };
-    });
-  }).catch(function() {
-    cards[1].innerHTML = '<h3>Installed Community Skills</h3><div class="empty"><div class="empty-icon">&#128230;</div>No community skills installed.</div>';
-  });
-}
-
-function enableSkill(id) {
-  api('/engine/community/skills/' + id + '/enable', { method: 'PUT', body: {} })
-    .then(function() { toast('Skill enabled', 'success'); loadSkills(); })
-    .catch(function(err) { toast(err.message, 'error'); });
-}
-
-function disableSkill(id) {
-  api('/engine/community/skills/' + id + '/disable', { method: 'PUT', body: {} })
-    .then(function() { toast('Skill disabled', 'success'); loadSkills(); })
-    .catch(function(err) { toast(err.message, 'error'); });
-}
-
-function uninstallSkill(id) {
-  if (!confirm('Uninstall this skill?')) return;
-  api('/engine/community/skills/' + id + '/uninstall', { method: 'DELETE' })
-    .then(function() { toast('Skill uninstalled', 'success'); loadSkills(); })
-    .catch(function(err) { toast(err.message, 'error'); });
-}

package/dashboards/html/src/pages/users.js

@@ -1,62 +0,0 @@
-// Users page — list, create modal
-
-import { api } from '../api.js';
-import { esc } from '../utils/escape.js';
-import { toast } from '../utils/toast.js';
-import { openModal, closeModal } from '../components/modal.js';
-import { renderTable } from '../components/table.js';
-
-export function loadUsers() {
-  var el = document.getElementById('page-content');
-  el.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px"><div><h2 class="page-title">Users</h2><p class="page-desc" style="margin:0">Manage team members</p></div><button class="btn btn-primary" style="width:auto" id="btn-new-user">+ New User</button></div><div class="card"><div class="page-desc">Loading...</div></div>';
-
-  document.getElementById('btn-new-user').onclick = function() {
-    openModal('modal-user');
-  };
-
-  api('/users').then(function(d) {
-    var users = d.users || [];
-    if (users.length === 0) {
-      el.querySelector('.card').innerHTML = '<div class="empty"><div class="empty-icon">\ud83d\udc65</div>No users yet</div>';
-      return;
-    }
-    var rows = users.map(function(u) {
-      return '<tr><td style="font-weight:600">' + esc(u.name) + '</td><td style="color:var(--text-dim)">' + esc(u.email) + '</td><td><span class="badge badge-' + u.role + '">' + u.role + '</span></td><td style="color:var(--text-muted);font-size:12px">' + (u.lastLoginAt ? new Date(u.lastLoginAt).toLocaleString() : 'Never') + '</td></tr>';
-    }).join('');
-    el.querySelector('.card').innerHTML = renderTable(['Name', 'Email', 'Role', 'Last Login'], rows);
-  });
-}
-
-export function initUserModal() {
-  var form = document.querySelector('#modal-user form');
-  if (form) {
-    form.onsubmit = function(e) {
-      createUser(e);
-    };
-  }
-  var cancelBtn = document.querySelector('#modal-user .btn[type="button"]');
-  if (cancelBtn) {
-    cancelBtn.onclick = function() {
-      closeModal('modal-user');
-    };
-  }
-}
-
-function createUser(e) {
-  e.preventDefault();
-  api('/users', {
-    method: 'POST',
-    body: {
-      name: document.getElementById('new-user-name').value,
-      email: document.getElementById('new-user-email').value,
-      role: document.getElementById('new-user-role').value,
-      password: document.getElementById('new-user-password').value,
-    },
-  })
-    .then(function() {
-      toast('User created!', 'success');
-      closeModal('modal-user');
-      loadUsers();
-    })
-    .catch(function(err) { toast(err.message, 'error'); });
-}

package/dashboards/html/src/pages/vault.js

@@ -1,105 +0,0 @@
-// Vault page — encrypted secrets management
-
-import { api } from '../api.js';
-import { esc } from '../utils/escape.js';
-import { toast } from '../utils/toast.js';
-import { renderTable } from '../components/table.js';
-
-var CATEGORIES = ['deploy', 'cloud_storage', 'api_key', 'skill_credential', 'custom'];
-
-function categoryBadge(category) {
-  var colors = {
-    deploy: 'primary',
-    cloud_storage: 'info',
-    api_key: 'warning',
-    skill_credential: 'success',
-    custom: 'default',
-  };
-  return '<span class="badge badge-' + (colors[category] || 'default') + '">' + esc(category || 'custom') + '</span>';
-}
-
-export function loadVault() {
-  var el = document.getElementById('page-content');
-
-  var categoryOptions = CATEGORIES.map(function(c) {
-    return '<option value="' + esc(c) + '">' + esc(c.replace(/_/g, ' ')) + '</option>';
-  }).join('');
-
-  el.innerHTML = '<div><h2 class="page-title">Vault</h2><p class="page-desc">Encrypted secrets management</p></div>' +
-    '<div class="card"><h3>Add Secret</h3>' +
-    '<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end">' +
-    '<div class="form-group" style="flex:1;min-width:160px"><label class="form-label">Secret Name</label><input class="input" id="vault-name" placeholder="e.g. OPENAI_API_KEY" required></div>' +
-    '<div class="form-group" style="flex:1;min-width:160px"><label class="form-label">Secret Value</label><input class="input" type="password" id="vault-value" placeholder="Enter secret value" required></div>' +
-    '<div class="form-group" style="min-width:140px"><label class="form-label">Category</label><select class="input" id="vault-category">' + categoryOptions + '</select></div>' +
-    '<div class="form-group"><button class="btn btn-primary" style="width:auto" id="btn-add-secret">Add Secret</button></div>' +
-    '</div></div>' +
-    '<div class="card"><h3>Stored Secrets</h3><div class="page-desc">Loading...</div></div>';
-
-  document.getElementById('btn-add-secret').onclick = function() {
-    addSecret();
-  };
-
-  var cards = el.querySelectorAll('.card');
-
-  api('/engine/vault/secrets?orgId=default').then(function(d) {
-    var secrets = d.secrets || [];
-    if (secrets.length === 0) {
-      cards[1].innerHTML = '<h3>Stored Secrets</h3><div class="empty"><div class="empty-icon">&#128274;</div>No secrets stored yet. Add one above.</div>';
-      return;
-    }
-    var rows = secrets.map(function(s) {
-      return '<tr>' +
-        '<td style="font-weight:600">' + esc(s.name || '-') + '</td>' +
-        '<td>' + categoryBadge(s.category) + '</td>' +
-        '<td style="color:var(--text-muted);font-size:12px">' + esc(s.createdBy || s.created_by || '-') + '</td>' +
-        '<td style="color:var(--text-muted);font-size:12px">' + (s.created_at || s.createdAt ? new Date(s.created_at || s.createdAt).toLocaleDateString() : '-') + '</td>' +
-        '<td>' +
-        '<button class="btn btn-sm" data-rotate-secret="' + s.id + '">Rotate</button> ' +
-        '<button class="btn btn-sm btn-danger" data-delete-secret="' + s.id + '">Delete</button>' +
-        '</td></tr>';
-    }).join('');
-    cards[1].innerHTML = '<h3>Stored Secrets (' + secrets.length + ')</h3>' + renderTable(['Name', 'Category', 'Created By', 'Created', 'Actions'], rows);
-
-    el.querySelectorAll('[data-delete-secret]').forEach(function(btn) {
-      btn.onclick = function() {
-        deleteSecret(btn.getAttribute('data-delete-secret'));
-      };
-    });
-
-    el.querySelectorAll('[data-rotate-secret]').forEach(function(btn) {
-      btn.onclick = function() {
-        rotateSecret(btn.getAttribute('data-rotate-secret'));
-      };
-    });
-  }).catch(function() {
-    cards[1].innerHTML = '<h3>Stored Secrets</h3><div class="empty"><div class="empty-icon">&#128274;</div>No secrets stored yet.</div>';
-  });
-}
-
-function addSecret() {
-  var name = document.getElementById('vault-name').value.trim();
-  var value = document.getElementById('vault-value').value;
-  var category = document.getElementById('vault-category').value;
-  if (!name || !value) return toast('Name and value are required', 'error');
-
-  api('/engine/vault/secrets', {
-    method: 'POST',
-    body: { name: name, value: value, category: category, orgId: 'default' },
-  })
-    .then(function() { toast('Secret added', 'success'); loadVault(); })
-    .catch(function(err) { toast(err.message, 'error'); });
-}
-
-function deleteSecret(id) {
-  if (!confirm('Delete this secret?')) return;
-  api('/engine/vault/secrets/' + id, { method: 'DELETE' })
-    .then(function() { toast('Secret deleted', 'success'); loadVault(); })
-    .catch(function(err) { toast(err.message, 'error'); });
-}
-
-function rotateSecret(id) {
-  if (!confirm('Rotate encryption for this secret?')) return;
-  api('/engine/vault/secrets/' + id + '/rotate', { method: 'POST', body: {} })
-    .then(function() { toast('Secret encryption rotated', 'success'); loadVault(); })
-    .catch(function(err) { toast(err.message, 'error'); });
-}