crewswarm 0.8.1-beta

package/apps/dashboard/src/tabs/engines-tab.js

@@ -0,0 +1,175 @@
+/**
+ * Engines tab — extracted from app.js
+ * Deps: getJSON, postJSON, escHtml (from core/)
+ */
+
+import { getJSON, postJSON } from '../core/api.js';
+import { escHtml } from '../core/dom.js';
+
+export const ENGINE_ICONS = {
+  opencode:       `<svg viewBox="0 0 24 30" width="20" height="24" fill="#38bdf8"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`,
+  cursor:         `<svg viewBox="0 0 24 24" width="20" height="20" fill="#818cf8"><path d="M4 4l8 16 3-7 7-3L4 4z"/></svg>`,
+  claude:         `<svg viewBox="0 0 24 24" width="20" height="20" fill="#d4a853"><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>`,
+  codex:          `<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><circle cx="12" cy="12" r="10" stroke="#a78bfa" stroke-width="1.5"/><path d="M8 12l3 3 5-5" stroke="#a78bfa" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  "docker-sandbox": `<svg viewBox="0 0 24 24" width="20" height="20" fill="#2496ed"><path d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.186.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.186.185.186m-2.943 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.157a.185.185 0 00-.185.185v1.887c0 .102.083.186.185.186m8.763 2.714h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"/></svg>`,
+};
+
+export function showEngines(helpers) {
+  helpers.hideAllViews();
+  document.getElementById('enginesView').classList.add('active');
+  helpers.setNavActive('navEngines');
+  loadEngines();
+}
+
+// Make toggleEngineGlobal available globally for onclick
+if (typeof window !== 'undefined') {
+  window.toggleEngineGlobal = toggleEngineGlobal;
+}
+
+export function toggleImportEngine() {
+  const f = document.getElementById('importEngineForm');
+  if (f) f.style.display = f.style.display === 'none' ? 'block' : 'none';
+}
+
+export async function importEngineFromUrl() {
+  const inp = document.getElementById('importEngineUrl');
+  const status = document.getElementById('importEngineStatus');
+  const url = inp?.value?.trim();
+  if (!url || !status) return;
+  status.textContent = 'Importing…'; status.style.color = 'var(--text-3)';
+  try {
+    const d = await postJSON('/api/engines/import', { url });
+    if (d.ok) {
+      status.textContent = `✓ Imported ${d.label}`; status.style.color = 'var(--green)';
+      inp.value = '';
+      loadEngines();
+    } else {
+      status.textContent = 'Error: ' + (d.error || 'unknown'); status.style.color = 'var(--red,#f87171)';
+    }
+  } catch(e) {
+    status.textContent = 'Error: ' + e.message; status.style.color = 'var(--red,#f87171)';
+  }
+}
+
+export async function deleteEngine(id) {
+  if (!confirm(`Remove engine "${id}"?`)) return;
+  await fetch(`/api/engines/${encodeURIComponent(id)}`, { method: 'DELETE' });
+  loadEngines();
+}
+
+export async function loadEngines() {
+  const grid = document.getElementById('enginesGrid');
+  if (!grid) return;
+  grid.innerHTML = '<div style="color:var(--text-3);font-size:13px;padding:8px;">Loading…</div>';
+  try {
+    const { engines = [] } = await getJSON('/api/engines');
+    if (!engines.length) {
+      grid.innerHTML = '<div style="color:var(--text-3);font-size:13px;padding:8px;">No engines found.</div>';
+      return;
+    }
+    grid.innerHTML = '';
+    for (const eng of engines) {
+      const card = document.createElement('div');
+      card.className = 'card';
+      card.style.cssText = 'display:flex;flex-direction:column;gap:10px;';
+      const iconHtml = ENGINE_ICONS[eng.icon || eng.id] || `<span style="font-size:20px;">⚙️</span>`;
+      const statusDot = eng.ready ? '🟢' : eng.installed ? '🟡' : '⚫';
+      const statusLabel = eng.ready ? 'Ready'
+        : eng.installed && eng.requiresAuth ? 'Installed — run auth to activate'
+        : eng.installed ? 'Installed — missing env vars'
+        : 'Not installed';
+      const statusColor = eng.ready ? 'var(--green)' : eng.installed ? 'var(--yellow,#fbbf24)' : 'var(--text-3)';
+      const traitsHtml = (eng.traits || []).map(t =>
+        `<li style="font-size:11px;color:var(--text-3);list-style:none;padding:2px 0;">▸ ${escHtml(t)}</li>`
+      ).join('');
+      const missingHtml = eng.missingEnv?.length
+        ? `<div style="font-size:11px;color:var(--yellow,#fbbf24);margin-top:4px;">Missing env: ${eng.missingEnv.map(e => `<code style="background:var(--bg-1);padding:1px 3px;border-radius:3px;">${escHtml(e)}</code>`).join(', ')}</div>`
+        : '';
+      const installHtml = !eng.installed
+        ? `<div style="margin-top:6px;"><div style="font-size:11px;color:var(--text-3);margin-bottom:4px;">Install:</div>
+           <code style="font-size:11px;background:var(--bg-1);padding:4px 8px;border-radius:4px;display:block;word-break:break-all;">${escHtml(eng.installCmd || '')}</code>
+           ${eng.installUrl ? `<a href="${escHtml(eng.installUrl)}" target="_blank" style="font-size:11px;color:var(--accent);margin-top:4px;display:inline-block;">↗ Install guide</a>` : ''}
+          </div>` : '';
+      const authHtml = eng.authMethods?.length
+        ? `<div style="margin-top:8px;border-top:1px solid var(--border);padding-top:10px;">
+            <div style="font-size:11px;font-weight:600;color:var(--text-2);margin-bottom:8px;display:flex;align-items:center;gap:6px;">
+              <span style="font-size:13px;">🔑</span> Auth setup
+              ${eng.authNote ? `<span style="font-weight:400;color:var(--text-3);">— ${escHtml(eng.authNote)}</span>` : ''}
+            </div>
+            ${eng.authMethods.map((m, i) => `
+              <div style="margin-bottom:10px;">
+                <div style="font-size:11px;font-weight:600;color:var(--text-2);margin-bottom:4px;">${escHtml(m.label)}</div>
+                <div style="position:relative;display:flex;align-items:stretch;gap:0;">
+                  <code style="flex:1;font-size:11px;background:var(--bg-1);padding:6px 8px;border-radius:4px 0 0 4px;display:block;word-break:break-all;border:1px solid var(--border);border-right:none;">${escHtml(m.cmd)}</code>
+                  <button onclick="navigator.clipboard.writeText(${escHtml(JSON.stringify(m.cmd))}).then(()=>{this.textContent='\u2713';setTimeout(()=>this.textContent='Copy',1200)})" style="font-size:10px;padding:0 8px;border-radius:0 4px 4px 0;border:1px solid var(--border);background:var(--bg-card2);color:var(--text-2);cursor:pointer;white-space:nowrap;flex-shrink:0;">Copy</button>
+                </div>
+                ${m.note ? `<div style="font-size:10px;color:var(--text-3);margin-top:3px;">${escHtml(m.note)}</div>` : ''}
+              </div>
+            `).join('')}
+          </div>`
+        : (eng.authNote ? `<div style="font-size:11px;color:var(--text-3);margin-top:6px;">🔑 ${escHtml(eng.authNote)}</div>` : '');
+      const bestForHtml = eng.bestFor?.length
+        ? `<div style="font-size:11px;color:var(--text-3);">Best for: ${eng.bestFor.map(a => `<code style="background:var(--bg-1);padding:1px 3px;border-radius:3px;">${escHtml(a)}</code>`).join(' ')}</div>`
+        : '';
+      const deleteBtn = eng.source === 'user'
+        ? `<button onclick="deleteEngine('${escHtml(eng.id)}')" style="font-size:11px;padding:4px 8px;border-radius:5px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-3);">Remove</button>`
+        : '';
+      
+      // Global enable/disable toggle (only show if engine has envToggle and is ready)
+      const toggleHtml = eng.envToggle && eng.ready
+        ? `<label style="display:flex;align-items:center;gap:8px;cursor:pointer;margin-top:10px;padding:8px;background:var(--surface-2);border-radius:6px;border:1px solid var(--border);">
+             <input type="checkbox" id="toggle-${eng.id}" ${eng.enabled ? 'checked' : ''} onchange="toggleEngineGlobal('${eng.id}')" style="width:14px;height:14px;cursor:pointer;" />
+             <span style="font-size:12px;font-weight:600;color:var(--text-1);">Enable Globally</span>
+             <span style="font-size:11px;color:var(--text-3);">Sets ${escHtml(eng.envToggle)}</span>
+           </label>`
+        : '';
+      
+      card.innerHTML = `
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
+          <div style="display:flex;align-items:center;gap:10px;">
+            ${iconHtml}
+            <div>
+              <div style="font-weight:700;font-size:14px;">${escHtml(eng.label)}</div>
+              <div style="font-size:11px;color:${statusColor};">${statusDot} ${escHtml(statusLabel)}</div>
+            </div>
+          </div>
+          <div style="display:flex;gap:6px;align-items:center;">
+            ${eng.docsUrl ? `<a href="${escHtml(eng.docsUrl)}" target="_blank" class="btn-ghost" style="font-size:11px;padding:4px 8px;text-decoration:none;">Docs ↗</a>` : ''}
+            ${deleteBtn}
+          </div>
+        </div>
+        <div style="font-size:12px;color:var(--text-2);line-height:1.5;">${escHtml(eng.description || '')}</div>
+        ${missingHtml}
+        ${installHtml}
+        <ul style="margin:0;padding:0;">${traitsHtml}</ul>
+        ${bestForHtml}
+        ${toggleHtml}
+        ${authHtml}
+      `;
+      grid.appendChild(card);
+    }
+  } catch(e) {
+    grid.innerHTML = `<div style="color:var(--red,#f87171);font-size:13px;">Error: ${escHtml(e.message)}</div>`;
+  }
+}
+
+export async function toggleEngineGlobal(engineId) {
+  const checkbox = document.getElementById(`toggle-${engineId}`);
+  const enabled = checkbox?.checked ?? false;
+  try {
+    await postJSON('/api/engines/toggle', { engineId, enabled });
+    const status = enabled ? 'enabled' : 'disabled';
+    console.log(`Engine ${engineId} ${status} globally`);
+    // Show notification (assuming showNotification is available globally)
+    if (window.showNotification) {
+      window.showNotification(`${engineId} ${status} globally`);
+    }
+  } catch(e) {
+    console.error('Toggle failed:', e);
+    // Revert checkbox on error
+    if (checkbox) checkbox.checked = !enabled;
+    if (window.showNotification) {
+      window.showNotification(`Toggle failed: ${e.message}`, true);
+    }
+  }
+}

package/apps/dashboard/src/tabs/memory-tab.js

@@ -0,0 +1,182 @@
+/**
+ * Memory tab — shared memory visualization and management
+ */
+
+import { getJSON, postJSON } from '../core/api.js';
+import { showNotification } from '../core/dom.js';
+
+let _state = null;
+
+export function initMemoryTab(state) {
+  _state = state;
+}
+
+export async function showMemory() {
+  // Note: View activation is handled by showMemoryView() in app.js via hideAllViews() + classList.add('active')
+  // Just load the data here
+  await loadMemoryStats();
+}
+
+export async function loadMemoryStats() {
+  try {
+    const data = await getJSON('/api/memory/stats');
+    
+    // Update fact stats
+    const factStatsEl = document.getElementById('memoryFactStats');
+    if (factStatsEl && data.agentMemory) {
+      const stats = data.agentMemory;
+      factStatsEl.innerHTML = `
+        Total facts: <strong>${stats.totalFacts || 0}</strong><br>
+        Critical facts: <strong>${stats.criticalFacts || 0}</strong><br>
+        Providers: ${stats.providers?.join(', ') || 'none'}<br>
+        ${stats.oldestFact ? `Oldest: ${new Date(stats.oldestFact).toLocaleDateString()}<br>` : ''}
+        ${stats.newestFact ? `Newest: ${new Date(stats.newestFact).toLocaleDateString()}` : ''}
+      `;
+    }
+    
+    // Update keeper stats
+    const keeperStatsEl = document.getElementById('memoryKeeperStats');
+    if (keeperStatsEl && data.agentKeeper) {
+      const stats = data.agentKeeper;
+      keeperStatsEl.innerHTML = `
+        Total entries: <strong>${stats.entries || 0}</strong><br>
+        Storage: <strong>${stats.bytes ? (stats.bytes / 1024).toFixed(1) + 'KB' : '0KB'}</strong><br>
+        ${stats.byTier ? `By tier: ${Object.entries(stats.byTier).map(([k,v]) => `${k}=${v}`).join(', ')}<br>` : ''}
+        ${stats.byAgent ? `By agent: ${Object.entries(stats.byAgent).map(([k,v]) => `${k}=${v}`).join(', ')}` : ''}
+      `;
+    }
+    
+    // Update storage info
+    const storageInfoEl = document.getElementById('memoryStorageInfo');
+    if (storageInfoEl) {
+      storageInfoEl.innerHTML = `
+        Location: <code style="font-size:11px;background:var(--bg-2);padding:2px 6px;border-radius:3px;">${data.storageDir || 'N/A'}</code><br>
+        Status: <strong style="color:var(--green);">${data.available ? '✅ Active' : '⚠️ Unavailable'}</strong><br>
+        <span style="font-size:10px;color:var(--text-3);">Set CREW_MEMORY_DIR to customize location</span>
+      `;
+    }
+  } catch (err) {
+    showNotification(`Failed to load memory stats: ${err.message}`, 'error');
+    console.error('[memory] Stats load failed:', err);
+  }
+}
+
+export async function searchMemory() {
+  const queryEl = document.getElementById('memorySearchQuery');
+  if (!queryEl) return;
+  
+  const query = queryEl.value.trim();
+  if (!query) {
+    showNotification('Enter a search query', 'error');
+    return;
+  }
+  
+  const resultsEl = document.getElementById('memorySearchResults');
+  if (!resultsEl) return;
+  
+  resultsEl.style.display = 'block';
+  resultsEl.innerHTML = '<div style="padding:12px;color:var(--text-2);">Searching...</div>';
+  
+  try {
+    const data = await postJSON('/api/memory/search', { query, maxResults: 20 });
+    
+    if (!data.hits || data.hits.length === 0) {
+      resultsEl.innerHTML = '<div style="padding:12px;color:var(--text-2);">No results found</div>';
+      return;
+    }
+    
+    const html = data.hits.map(hit => {
+      const sourceColor = hit.source === 'agentkeeper' ? 'var(--blue)' : 
+                         hit.source === 'agent-memory' ? 'var(--green)' : 'var(--purple)';
+      const preview = hit.text.length > 300 ? hit.text.slice(0, 300) + '...' : hit.text;
+      
+      return `
+        <div style="padding:12px;border-left:3px solid ${sourceColor};background:var(--bg-2);border-radius:6px;margin-bottom:8px;">
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+            <span style="font-size:10px;font-weight:600;color:${sourceColor};text-transform:uppercase;">${hit.source}</span>
+            <span style="font-size:11px;font-weight:600;color:var(--text-1);flex:1;">${escapeHtml(hit.title)}</span>
+            <span style="font-size:10px;color:var(--text-3);font-family:monospace;">score: ${hit.score.toFixed(3)}</span>
+          </div>
+          <div style="font-size:11px;color:var(--text-2);line-height:1.5;white-space:pre-wrap;">${escapeHtml(preview)}</div>
+          ${hit.metadata ? `<div style="font-size:10px;color:var(--text-3);margin-top:6px;">${JSON.stringify(hit.metadata)}</div>` : ''}
+        </div>
+      `;
+    }).join('');
+    
+    resultsEl.innerHTML = `
+      <div style="padding:8px 0;font-size:12px;color:var(--text-2);">
+        Found <strong>${data.hits.length}</strong> result(s) for "<strong>${escapeHtml(query)}</strong>"
+      </div>
+      ${html}
+    `;
+  } catch (err) {
+    resultsEl.innerHTML = `<div style="padding:12px;color:var(--red);">Search failed: ${escapeHtml(err.message)}</div>`;
+    showNotification(`Memory search failed: ${err.message}`, 'error');
+  }
+}
+
+export async function migrateMemory() {
+  const resultEl = document.getElementById('memoryActionResult');
+  if (!resultEl) return;
+  
+  resultEl.style.display = 'block';
+  resultEl.innerHTML = '<div style="color:var(--text-2);">Migrating brain.md entries to shared memory...</div>';
+  
+  try {
+    const data = await postJSON('/api/memory/migrate', {});
+    
+    if (data.ok) {
+      resultEl.innerHTML = `
+        <div style="color:var(--green);">✅ Migration complete</div>
+        <div style="margin-top:6px;font-size:11px;">
+          Imported: ${data.imported}, Skipped: ${data.skipped}, Errors: ${data.errors}
+        </div>
+      `;
+      showNotification('Brain.md migrated successfully', 'success');
+      await loadMemoryStats();
+    } else {
+      resultEl.innerHTML = `<div style="color:var(--red);">❌ Migration failed: ${escapeHtml(data.error || 'unknown error')}</div>`;
+      showNotification(`Migration failed: ${data.error}`, 'error');
+    }
+  } catch (err) {
+    resultEl.innerHTML = `<div style="color:var(--red);">❌ Migration failed: ${escapeHtml(err.message)}</div>`;
+    showNotification(`Migration failed: ${err.message}`, 'error');
+  }
+}
+
+export async function compactMemory() {
+  const resultEl = document.getElementById('memoryActionResult');
+  if (!resultEl) return;
+  
+  resultEl.style.display = 'block';
+  resultEl.innerHTML = '<div style="color:var(--text-2);">Compacting AgentKeeper store...</div>';
+  
+  try {
+    const data = await postJSON('/api/memory/compact', {});
+    
+    if (data.entriesBefore !== undefined) {
+      const bytesFreedKB = (data.bytesFreed / 1024).toFixed(1);
+      resultEl.innerHTML = `
+        <div style="color:var(--green);">✅ Compaction complete</div>
+        <div style="margin-top:6px;font-size:11px;">
+          Entries: ${data.entriesBefore} → ${data.entriesAfter}<br>
+          Space freed: ${bytesFreedKB}KB
+        </div>
+      `;
+      showNotification('AgentKeeper compacted successfully', 'success');
+      await loadMemoryStats();
+    } else {
+      resultEl.innerHTML = `<div style="color:var(--red);">❌ Compaction failed: ${escapeHtml(data.error || 'unknown error')}</div>`;
+      showNotification(`Compaction failed: ${data.error}`, 'error');
+    }
+  } catch (err) {
+    resultEl.innerHTML = `<div style="color:var(--red);">❌ Compaction failed: ${escapeHtml(err.message)}</div>`;
+    showNotification(`Compaction failed: ${err.message}`, 'error');
+  }
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}