sdlc-agent-4-enterprise-server 1.0.0

package/src/viewer/browser.js

@@ -0,0 +1,82 @@
+/* Browser Tab — Advanced entry browsing with filters, pagination, sort */
+let browserEntries = [];
+let browserOffset = 0;
+const BROWSER_PAGE_SIZE = 20;
+let browserHasMore = true;
+
+async function loadBrowserEntries(reset) {
+  if (reset) { browserOffset = 0; browserEntries = []; browserHasMore = true; }
+  const tier = document.getElementById('br-tier')?.value || '';
+  const type = document.getElementById('br-type')?.value || '';
+  const sort = document.getElementById('br-sort')?.value || 'created_at';
+  const search = document.getElementById('br-search')?.value || '';
+
+  let url;
+  if (search) {
+    url = API + '/search?q=' + encodeURIComponent(search) + '&limit=' + BROWSER_PAGE_SIZE;
+    if (tier) url += '&tier=' + tier;
+  } else {
+    url = API + '/entries?limit=' + BROWSER_PAGE_SIZE + '&offset=' + browserOffset + '&sort=' + sort;
+    if (tier) url += '&tier=' + tier;
+    if (type) url += '&type=' + type;
+  }
+
+  try {
+    const r = await fetch(url);
+    const data = await r.json();
+    if (reset) browserEntries = data;
+    else browserEntries = browserEntries.concat(data);
+    browserHasMore = data.length >= BROWSER_PAGE_SIZE;
+    browserOffset += data.length;
+    renderBrowserList();
+  } catch (e) { console.error('[browser]', e); }
+}
+
+function renderBrowserList() {
+  const el = document.getElementById('br-list');
+  if (!el) return;
+  el.innerHTML = browserEntries.map(e =>
+    '<div class="entry-item" onclick="showBrowserDetail(' + e.id + ')">' +
+    '<div style="display:flex;justify-content:space-between;align-items:center">' +
+    '<span class="entry-type" style="color:' + nodeColor(e.type) + '">' + e.type + '</span>' +
+    '<span class="badge badge-' + e.tier + '">' + e.tier + '</span></div>' +
+    '<div class="entry-summary">' + esc(e.summary) + '</div>' +
+    '<div class="entry-meta">ID:' + e.id + ' | Access:' + e.accessCount +
+    ' | Conf:' + (e.confidence || 1).toFixed(2) +
+    (e.source ? ' | ' + esc(e.source).substring(0, 30) : '') + '</div></div>'
+  ).join('') || '<div style="padding:12px;opacity:.5;font-size:.7rem">No entries found</div>';
+
+  const loadMore = document.getElementById('br-load-more');
+  if (loadMore) loadMore.style.display = browserHasMore ? 'block' : 'none';
+}
+
+async function showBrowserDetail(id) {
+  const panel = document.getElementById('br-detail');
+  panel.style.display = 'block';
+  try {
+    const r = await fetch(API + '/entries/' + id);
+    const e = await r.json();
+    panel.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">' +
+      '<b style="font-size:.75rem">Entry #' + e.id + '</b>' +
+      '<div style="display:flex;align-items:center;gap:6px">' +
+      '<button class="btn-review" aria-label="Mark entry ' + e.id + ' as reviewed" onclick="markReviewed(' + e.id + ',this,\'detail\')">Mark Reviewed</button>' +
+      '<span onclick="closeBrowserDetail()" style="cursor:pointer;opacity:.6">\u2715</span></div></div>' +
+      renderEntryDetail(e);
+  } catch (err) { panel.innerHTML = '<div style="color:#f87171">Error loading entry</div>'; }
+}
+
+function closeBrowserDetail() {
+  document.getElementById('br-detail').style.display = 'none';
+}
+
+function browserLoadMore() {
+  loadBrowserEntries(false);
+}
+
+function browserSearch(ev) {
+  if (ev.key === 'Enter') loadBrowserEntries(true);
+}
+
+function browserFilterChange() {
+  loadBrowserEntries(true);
+}

package/src/viewer/dashboard.js

@@ -0,0 +1,193 @@
+/** Dashboard page logic — health gauge, metrics, recommendations, trends. */
+
+async function load() {
+  try {
+    var basePath = window.__MCP_BASE || '';
+    const r = await fetch(basePath + '/api/kb/dashboard');
+    const d = await r.json();
+    renderGauge(d.health_score || 0);
+    renderMetrics(d);
+    renderRecs(d.recommendations || []);
+    renderTrends(d.trends || {});
+  } catch (e) { console.error(e); }
+}
+
+function renderGauge(score) {
+  const el = document.getElementById('gauge');
+  const pct = score / 100;
+  const color = score >= 70 ? '#22c55e' : score >= 40 ? '#f59e0b' : '#ef4444';
+  el.innerHTML = `<circle cx="60" cy="60" r="50" fill="none" stroke="#334155" stroke-width="10"/>
+    <circle cx="60" cy="60" r="50" fill="none" stroke="${color}" stroke-width="10"
+      stroke-dasharray="${pct * 314} 314" stroke-linecap="round"
+      transform="rotate(-135 60 60)"/>
+    <text x="60" y="65" text-anchor="middle" fill="#e2e8f0"
+      font-size="20" font-weight="700">${score}</text>`;
+  document.getElementById('health-label').textContent =
+    score >= 70 ? 'Healthy' : score >= 40 ? 'Needs Attention' : 'Critical';
+}
+
+function renderMetrics(d) {
+  const m = document.getElementById('metrics');
+  const items = [
+    { label: 'Total Entries', val: d.total_entries || 0, sub: 'All KB entries' },
+    { label: 'Quality Avg', val: (d.quality_avg || 0).toFixed(1), sub: 'Score 0-100' },
+    { label: 'Stale', val: d.stale_count || 0, sub: 'Needs review' },
+    { label: 'Unowned', val: d.unowned_count || 0, sub: 'No owner assigned' }
+  ];
+  m.innerHTML = items.map(i => `<div class="card"><h3>${i.label}</h3>
+    <div class="val">${i.val}</div><div class="sub">${i.sub}</div></div>`).join('');
+}
+
+function renderRecs(recs) {
+  const el = document.getElementById('recs');
+  // Handle both array and {recommendations: [...]} format
+  if (recs && !Array.isArray(recs)) recs = recs.recommendations || [];
+  if (!recs) recs = [];
+  el.innerHTML = recs.map(r => {
+    const msg = r.message || r.action || String(r);
+    return `<li class="${r.priority || 'low'}">${msg}</li>`;
+  }).join('');
+  if (!recs.length) el.innerHTML = '<li class="low">No recommendations</li>';
+}
+
+function renderTrends(trends) {
+  drawMini('chart-search', trends.search_volume || [], 'Search Volume', '#38bdf8');
+  drawMini('chart-ingest', trends.ingest_volume || [], 'Ingest Volume', '#a78bfa');
+}
+
+function drawMini(id, data, label, color) {
+  const c = document.getElementById(id);
+  const ctx = c.getContext('2d');
+  ctx.fillStyle = '#1e293b'; ctx.fillRect(0, 0, 300, 140);
+  ctx.fillStyle = '#94a3b8'; ctx.font = '11px system-ui'; ctx.fillText(label, 8, 16);
+  if (!data.length) return;
+  const max = Math.max(...data.map(d => d.count || d), 1);
+  const w = 280 / data.length;
+  data.forEach((d, i) => {
+    const v = d.count || d;
+    const h = (v / max) * 100;
+    ctx.fillStyle = color; ctx.globalAlpha = 0.8;
+    ctx.fillRect(10 + i * w, 130 - h, w - 2, h);
+  });
+  ctx.globalAlpha = 1;
+}
+
+async function loadReminders() {
+  try {
+    var basePath = window.__MCP_BASE || '';
+    const r = await fetch(basePath + '/api/kb/reminders');
+    const data = await r.json();
+    const items = Array.isArray(data) ? data : (data.reminders || data.entries || []);
+    const el = document.getElementById('reminders');
+    if (!items.length) {
+      el.innerHTML = '<tr><td colspan="5" style="padding:.4rem;font-size:.75rem;opacity:.6">No due reviews</td></tr>';
+      return;
+    }
+    el.innerHTML = items.slice(0, 10).map(e => {
+      const id = e.id || e.entry_id || '';
+      const last = e.last_reviewed_at || e.last_reviewed || 'Never';
+      const days = e.days_overdue || e.overdue_days || '—';
+      return `<tr><td style="padding:.4rem;border-bottom:1px solid #1e293b">${id}</td>`
+        + `<td style="padding:.4rem;border-bottom:1px solid #1e293b">${esc(e.summary || '')}</td>`
+        + `<td style="padding:.4rem;border-bottom:1px solid #1e293b">${last}</td>`
+        + `<td style="padding:.4rem;border-bottom:1px solid #1e293b;color:#f59e0b">${days}d</td>`
+        + `<td style="padding:.4rem;border-bottom:1px solid #1e293b"><button class="btn-review" aria-label="Mark entry ${id} as reviewed" onclick="markReviewed(${id},this,'dashboard')">Mark Reviewed</button></td></tr>`;
+    }).join('');
+  } catch (e) { console.error(e); }
+}
+
+async function markReviewed(entryId, buttonEl, context) {
+  buttonEl.disabled = true;
+  var originalHTML = buttonEl.innerHTML;
+  buttonEl.innerHTML = '<span class="spinner"></span>';
+
+  try {
+    var basePath = window.__MCP_BASE || '';
+    var r = await fetch(basePath + '/api/kb/entries/' + entryId + '/review', {
+      method: 'POST'
+    });
+
+    if (!r.ok) {
+      var msg = r.status === 404 ? 'Entry not found'
+        : r.status === 503 ? 'Service unavailable — please try again later'
+        : 'Error: ' + r.status;
+      showToast(msg, 'error');
+      buttonEl.disabled = false;
+      buttonEl.innerHTML = originalHTML;
+      return;
+    }
+
+    showToast('Entry #' + entryId + ' marked as reviewed', 'success');
+
+    if (context === 'dashboard') {
+      var row = buttonEl.closest('tr');
+      row.style.transition = 'opacity 300ms ease-out';
+      row.style.opacity = '0';
+      setTimeout(function() {
+        row.remove();
+        var tbody = document.getElementById('reminders');
+        if (!tbody.children.length) {
+          tbody.innerHTML = '<tr><td colspan="5" style="padding:.4rem;font-size:.75rem;opacity:.6">No due reviews</td></tr>';
+        }
+        decrementStaleCount();
+      }, 300);
+    } else {
+      var badge = document.createElement('span');
+      badge.textContent = 'Reviewed \u2713';
+      badge.className = 'review-badge';
+      buttonEl.replaceWith(badge);
+    }
+  } catch (err) {
+    showToast('Network error — please try again', 'error');
+    buttonEl.disabled = false;
+    buttonEl.innerHTML = originalHTML;
+  }
+}
+
+function showToast(message, type) {
+  var container = document.getElementById('toast-container');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'toast-container';
+    container.setAttribute('role', 'alert');
+    container.setAttribute('aria-live', 'polite');
+    container.style.cssText = 'position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;';
+    document.body.appendChild(container);
+  }
+
+  var toast = document.createElement('div');
+  toast.className = 'toast toast-' + type;
+  toast.innerHTML = '<span>' + esc(message) + '</span><span style="cursor:pointer;margin-left:8px;opacity:.7" onclick="this.parentElement.remove()">\u2715</span>';
+  toast.style.cssText = 'min-width:250px;max-width:350px;padding:.75rem 1rem;border-radius:.5rem;font-size:.75rem;'
+    + 'box-shadow:0 4px 12px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:space-between;'
+    + 'opacity:0;transition:opacity 200ms;'
+    + (type === 'success'
+      ? 'background:#166534;color:#bbf7d0;border-left:4px solid #22c55e;'
+      : 'background:#7f1d1d;color:#fecaca;border-left:4px solid #ef4444;');
+
+  container.prepend(toast);
+  requestAnimationFrame(function() { toast.style.opacity = '1'; });
+
+  var timeout = type === 'success' ? 3000 : 5000;
+  setTimeout(function() {
+    toast.style.opacity = '0';
+    setTimeout(function() { toast.remove(); }, 200);
+  }, timeout);
+}
+
+function decrementStaleCount() {
+  var cards = document.querySelectorAll('#metrics .card');
+  cards.forEach(function(card) {
+    var label = card.querySelector('h3');
+    if (label && label.textContent.trim() === 'Stale') {
+      var val = card.querySelector('.val');
+      var current = parseInt(val.textContent) || 0;
+      if (current > 0) val.textContent = current - 1;
+    }
+  });
+}
+
+function esc(s) { return (s || '').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+
+load();
+loadReminders();

package/src/viewer/graph.js

@@ -0,0 +1,249 @@
+/* Graph Tab — 3D Force-directed Knowledge Graph */
+const COLORS = {
+  CONTEXT: '#38bdf8', DECISION: '#f472b6', ERROR_PATTERN: '#fb923c',
+  ARCHITECTURE: '#a78bfa', REQUIREMENT: '#34d399', PROCEDURE: '#facc15',
+  LESSON_LEARNED: '#f87171', CODE_ENTITY: '#e2e8f0', API_DESIGN: '#2dd4bf',
+};
+
+function nodeColor(t) { return COLORS[t] || '#38bdf8'; }
+function nodeSize(e) {
+  if (e.type === 'CODE_ENTITY') return 3;
+  if (e.tier === 'PROCEDURAL') return 6;
+  if (e.tier === 'SEMANTIC') return 5;
+  return 4;
+}
+
+let graph3d = null, allNodes = [], selectedId = null;
+
+async function initGraph() {
+  const el = document.getElementById('graph3d');
+  if (!el) return;
+  try {
+    const r = await fetch(API + '/graph/data?limit=5000');
+    const d = await r.json();
+    allNodes = d.nodes.map(n => ({
+      id: n.id, name: n.summary, type: n.type, tier: n.tier, source: n.source || ''
+    }));
+    const links = d.edges.map(e => ({ source: e.source, target: e.target }));
+    graph3d = ForceGraph3D()(el)
+      .graphData({ nodes: allNodes, links })
+      .nodeColor(n => nodeColor(n.type)).nodeVal(n => nodeSize(n))
+      .nodeLabel(n => '[' + n.type + '] ' + n.name).nodeOpacity(0.9)
+      .linkColor(() => 'rgba(100,150,200,0.35)').linkWidth(1.2)
+      .linkDirectionalParticles(1).linkDirectionalParticleWidth(1.2)
+      .backgroundColor('#0f172a')
+      .width(el.clientWidth).height(el.clientHeight)
+      .onNodeClick(n => selectGraphNode(n));
+    // Resize graph when container changes
+    const wrap = document.getElementById('graph-wrap');
+    new ResizeObserver(() => {
+      if (graph3d) graph3d.width(wrap.clientWidth).height(wrap.clientHeight);
+    }).observe(wrap);
+    populateClusters();
+    // Start minimap (second 3D graph instance)
+    setTimeout(() => { startMinimapLoop(); }, 3000);
+  } catch (e) { console.error('[graph]', e); }
+}
+
+function selectGraphNode(n) {
+  selectedId = n.id;
+  graph3d.nodeColor(nd => nd.id === selectedId ? '#ffffff' : nodeColor(nd.type));
+  graph3d.nodeVal(nd => nd.id === selectedId ? 10 : nodeSize(nd));
+  graph3d.linkWidth(lk => {
+    const s = lk.source.id || lk.source, t = lk.target.id || lk.target;
+    return (s === selectedId || t === selectedId) ? 4 : 1.2;
+  });
+  graph3d.linkColor(lk => {
+    const s = lk.source.id || lk.source, t = lk.target.id || lk.target;
+    return (s === selectedId || t === selectedId) ? '#ffffff' : 'rgba(100,150,200,0.35)';
+  });
+  if (graph3d) graph3d.cameraPosition(
+    { x: n.x + 100, y: n.y + 80, z: n.z + 100 },
+    { x: n.x, y: n.y, z: n.z }, 800
+  );
+  loadNodeDetail(n.id);
+}
+
+async function loadNodeDetail(id) {
+  try {
+    const r = await fetch(API + '/entries/' + id);
+    const e = await r.json();
+    const nb = await fetch(API + '/graph/' + id + '/neighbors');
+    const neighbors = await nb.json();
+    const panel = document.getElementById('graph-node-detail');
+    panel.innerHTML = renderEntryDetail(e) +
+      (neighbors.length ? '<div style="font-size:.65rem;margin:.4rem 0;opacity:.7">Connected (' +
+        neighbors.length + '):</div>' + neighbors.slice(0, 10).map(nb =>
+          '<div class="entry-item" onclick="focusEntry(' + nb.id + ')"><span class="entry-type" style="color:' +
+          nodeColor(nb.type) + '">' + nb.type + '</span><div class="entry-summary">' +
+          esc(nb.summary) + '</div></div>'
+        ).join('') : '');
+  } catch (e) { console.error(e); }
+}
+
+function focusEntry(id) {
+  if (!graph3d) return;
+  const n = graph3d.graphData().nodes.find(x => x.id === id);
+  if (n) selectGraphNode(n);
+  else loadNodeDetail(id);
+}
+
+/* --- Minimap: Second 3D graph instance fully synced with main graph --- */
+let minimapGraph = null;
+
+function startMinimapLoop() {
+  const el = document.getElementById('minimap-graph');
+  if (!el || !graph3d) return;
+
+  const data = graph3d.graphData();
+
+  // Create second 3D force-graph instance as minimap
+  minimapGraph = ForceGraph3D()(el)
+    .graphData({
+      nodes: data.nodes.map(n => ({ ...n, fx: n.x, fy: n.y, fz: n.z })),
+      links: data.links.map(l => ({
+        source: typeof l.source === 'object' ? l.source.id : l.source,
+        target: typeof l.target === 'object' ? l.target.id : l.target
+      }))
+    })
+    .nodeColor(n => nodeColor(n.type))
+    .nodeVal(n => nodeSize(n) * 0.5)
+    .nodeOpacity(0.85)
+    .nodeLabel(() => '')
+    .linkColor(() => 'rgba(100,150,200,0.2)')
+    .linkWidth(0.4)
+    .linkDirectionalParticles(0)
+    .backgroundColor('#0f172a')
+    .width(200).height(160)
+    .showNavInfo(false)
+    .enableNodeDrag(false)
+    .enableNavigationControls(true);
+
+  // Disable physics in minimap — positions come from main graph
+  minimapGraph.d3Force('charge', null);
+  minimapGraph.d3Force('link', null);
+  minimapGraph.d3Force('center', null);
+  minimapGraph.cooldownTicks(0);
+  minimapGraph.cooldownTime(0);
+  minimapGraph.warmupTicks(0);
+
+  // Bidirectional camera sync between main graph and minimap
+  let syncSource = 'main'; // tracks which graph is being interacted with
+  const mainContainer = document.getElementById('graph3d');
+
+  // Detect user interaction on minimap
+  el.addEventListener('mousedown', () => { syncSource = 'minimap'; });
+  el.addEventListener('wheel', () => { syncSource = 'minimap'; });
+  el.addEventListener('mouseup', () => { setTimeout(() => { syncSource = 'main'; }, 100); });
+  el.addEventListener('mouseleave', () => { setTimeout(() => { syncSource = 'main'; }, 100); });
+
+  // Detect user interaction on main graph
+  if (mainContainer) {
+    mainContainer.addEventListener('mousedown', () => { syncSource = 'main'; });
+    mainContainer.addEventListener('wheel', () => { syncSource = 'main'; });
+  }
+
+  // Continuous bidirectional camera sync using Three.js camera matrix
+  function syncCamera() {
+    if (!graph3d || !minimapGraph) { requestAnimationFrame(syncCamera); return; }
+    try {
+      if (syncSource === 'main') {
+        // Main → Minimap: copy Three.js camera matrix directly
+        const srcCam = graph3d.camera();
+        const dstCam = minimapGraph.camera();
+        if (srcCam && dstCam) {
+          dstCam.position.copy(srcCam.position);
+          dstCam.quaternion.copy(srcCam.quaternion);
+          dstCam.up.copy(srcCam.up);
+          // Also sync orbit controls target
+          const srcCtrl = graph3d.controls();
+          const dstCtrl = minimapGraph.controls();
+          if (srcCtrl && dstCtrl && srcCtrl.target && dstCtrl.target) {
+            dstCtrl.target.copy(srcCtrl.target);
+            dstCtrl.update();
+          }
+        }
+      } else {
+        // Minimap → Main: copy Three.js camera matrix directly
+        const srcCam = minimapGraph.camera();
+        const dstCam = graph3d.camera();
+        if (srcCam && dstCam) {
+          dstCam.position.copy(srcCam.position);
+          dstCam.quaternion.copy(srcCam.quaternion);
+          dstCam.up.copy(srcCam.up);
+          const srcCtrl = minimapGraph.controls();
+          const dstCtrl = graph3d.controls();
+          if (srcCtrl && dstCtrl && srcCtrl.target && dstCtrl.target) {
+            dstCtrl.target.copy(srcCtrl.target);
+            dstCtrl.update();
+          }
+        }
+      }
+    } catch (e) { /* ignore */ }
+    requestAnimationFrame(syncCamera);
+  }
+  requestAnimationFrame(syncCamera);
+
+  // Sync node positions from main graph -> minimap every 2s
+  setInterval(() => {
+    if (!graph3d || !minimapGraph) return;
+    const mainNodes = graph3d.graphData().nodes;
+    const mmData = minimapGraph.graphData();
+    const posMap = {};
+    mainNodes.forEach(n => { posMap[n.id] = { x: n.x, y: n.y, z: n.z }; });
+    let changed = false;
+    mmData.nodes.forEach(n => {
+      const p = posMap[n.id];
+      if (p && (n.x !== p.x || n.y !== p.y || n.z !== p.z)) {
+        n.x = p.x; n.y = p.y; n.z = p.z;
+        n.fx = p.x; n.fy = p.y; n.fz = p.z;
+        changed = true;
+      }
+    });
+    if (changed) minimapGraph.graphData(mmData);
+  }, 2000);
+
+  // Detect data changes (new nodes added/removed)
+  setInterval(() => {
+    if (!graph3d || !minimapGraph) return;
+    const mainNodes = graph3d.graphData().nodes;
+    const mmNodes = minimapGraph.graphData().nodes;
+    if (mainNodes.length !== mmNodes.length) {
+      const mainData = graph3d.graphData();
+      minimapGraph.graphData({
+        nodes: mainData.nodes.map(n => ({ ...n, fx: n.x, fy: n.y, fz: n.z })),
+        links: mainData.links.map(l => ({
+          source: typeof l.source === 'object' ? l.source.id : l.source,
+          target: typeof l.target === 'object' ? l.target.id : l.target
+        }))
+      });
+    }
+  }, 5000);
+
+  // Click on minimap node -> navigate main graph to that node
+  minimapGraph.onNodeClick(n => {
+    if (!graph3d) return;
+    const mainNode = graph3d.graphData().nodes.find(x => x.id === n.id);
+    if (mainNode) selectGraphNode(mainNode);
+  });
+}
+
+function populateClusters() {
+  const s = new Set();
+  allNodes.forEach(n => { if (n.source) { const p = n.source.split('/').slice(0, 2).join('/'); if (p) s.add(p); } });
+  const sel = document.getElementById('cs');
+  if (!sel) return;
+  Array.from(s).sort().forEach(v => { const o = document.createElement('option'); o.value = v; o.textContent = v; sel.appendChild(o); });
+}
+
+function graphFit() { if (graph3d) graph3d.zoomToFit(400); }
+function graphReset() { if (graph3d) graph3d.cameraPosition({ x: 0, y: 0, z: 500 }, { x: 0, y: 0, z: 0 }, 800); }
+function graphJumpCluster(val) {
+  if (!graph3d || !val) return;
+  const ns = graph3d.graphData().nodes.filter(n => n.source && n.source.startsWith(val));
+  if (!ns.length) return;
+  const cx = ns.reduce((s, n) => s + n.x, 0) / ns.length;
+  const cy = ns.reduce((s, n) => s + n.y, 0) / ns.length;
+  const cz = ns.reduce((s, n) => s + n.z, 0) / ns.length;
+  graph3d.cameraPosition({ x: cx + 120, y: cy + 80, z: cz + 120 }, { x: cx, y: cy, z: cz }, 800);
+}