sdlc-agent-4-enterprise-server 1.0.0

package/src/viewer/session-timeline.js

@@ -0,0 +1,112 @@
+/* Session Timeline — task grouping + duration badges + event cards */
+
+/** Render timeline with task groups. */
+function renderTimeline() {
+  const bar = document.getElementById('timeline-bar');
+  const total = replayEvents.length || 1;
+  bar.style.width = ((replayIdx + 1) / total * 100) + '%';
+  document.getElementById('timeline-pos').textContent =
+    (replayIdx + 1) + '/' + replayEvents.length;
+}
+
+/** Render event detail panel with task grouping. */
+function renderEventDetail() {
+  const el = document.getElementById('timeline-events');
+  if (!replayEvents.length) {
+    el.innerHTML = '<div style="opacity:.5;font-size:.7rem">No events</div>';
+    return;
+  }
+  const listEl = el.querySelector('#replay-list');
+  if (!listEl) {
+    el.innerHTML = '<div id="replay-detail" style="margin-bottom:8px"></div>' +
+      '<div id="replay-list" style="max-height:400px;overflow-y:auto">' +
+      buildGroupedList() + '</div>';
+  }
+  updateDetailCard();
+  highlightActiveRow();
+}
+
+/** Build event list HTML grouped by taskId. */
+function buildGroupedList() {
+  const groups = groupByTask(replayEvents);
+  let html = '';
+  for (const group of groups) {
+    if (group.taskId) {
+      html += '<div class="task-group" style="margin:4px 0;border-left:2px solid #a78bfa;padding-left:4px">' +
+        '<div style="font-size:.6rem;color:#a78bfa;margin-bottom:2px">⚡ ' + group.taskId + '</div>';
+    }
+    for (const ev of group.events) {
+      html += buildEventRow(ev);
+    }
+    if (group.taskId) html += '</div>';
+  }
+  return html;
+}
+
+/** Group events by taskId, preserving order. */
+function groupByTask(events) {
+  const groups = [];
+  let current = { taskId: events[0]?.taskId || null, events: [] };
+  for (const ev of events) {
+    const tid = ev.taskId || null;
+    if (tid !== current.taskId) {
+      if (current.events.length) groups.push(current);
+      current = { taskId: tid, events: [] };
+    }
+    current.events.push(ev);
+  }
+  if (current.events.length) groups.push(current);
+  return groups;
+}
+
+/** Build a single event row with duration badge. */
+function buildEventRow(ev) {
+  const idx = replayEvents.indexOf(ev);
+  const dur = ev.durationMs ? formatDurationBadge(ev.durationMs) : '';
+  const tool = ev.toolName ? '<span style="font-size:.55rem;color:#94a3b8"> ' + ev.toolName + '</span>' : '';
+  return '<div class="entry-item replay-row" data-idx="' + idx + '" ' +
+    'style="padding:4px 6px;cursor:pointer" onclick="replayJump(' + idx + ')">' +
+    '<span style="font-size:.6rem;color:' + opColor(ev.operation) + '">' + ev.operation + '</span>' +
+    tool + dur +
+    '<span style="font-size:.55rem;opacity:.5;float:right">' + (idx + 1) + '</span></div>';
+}
+
+/** Format duration as colored badge. */
+function formatDurationBadge(ms) {
+  const color = ms > 1000 ? '#f87171' : ms > 200 ? '#facc15' : '#34d399';
+  const text = ms > 1000 ? (ms / 1000).toFixed(1) + 's' : ms + 'ms';
+  return ' <span style="font-size:.5rem;background:' + color + '20;color:' + color +
+    ';padding:1px 3px;border-radius:2px">' + text + '</span>';
+}
+
+/** Update the detail card for current event. */
+function updateDetailCard() {
+  const cur = replayEvents[replayIdx];
+  const detailEl = document.getElementById('replay-detail');
+  if (!detailEl || !cur) return;
+  const args = cur.arguments ? '<details style="margin-top:4px"><summary style="font-size:.6rem;cursor:pointer;color:#94a3b8">Arguments</summary>' +
+    '<pre style="font-size:.55rem;white-space:pre-wrap;max-height:100px;overflow-y:auto;background:#0f172a;padding:4px;border-radius:3px;margin-top:2px">' +
+    esc(cur.arguments).substring(0, 500) + '</pre></details>' : '';
+  const result = cur.resultSummary ? '<div style="font-size:.65rem;color:#34d399;margin-top:4px">→ ' + esc(cur.resultSummary).substring(0, 150) + '</div>' : '';
+  detailEl.innerHTML = '<div style="background:#1e293b;padding:8px;border-radius:4px;border-left:3px solid #38bdf8">' +
+    '<div style="display:flex;justify-content:space-between;margin-bottom:4px">' +
+    '<b style="color:' + opColor(cur.operation) + ';font-size:.75rem">' + cur.operation + '</b>' +
+    '<span style="font-size:.6rem;opacity:.6">' + formatTime(cur.createdAt) + '</span></div>' +
+    (cur.toolName ? '<div style="font-size:.65rem;color:#38bdf8;margin-bottom:2px">🔧 ' + cur.toolName + '</div>' : '') +
+    (cur.durationMs ? '<div style="font-size:.65rem;opacity:.7">⏱ ' + cur.durationMs + 'ms</div>' : '') +
+    (cur.details ? '<div style="font-size:.7rem;margin:4px 0;line-height:1.4;word-break:break-all">' + esc(cur.details) + '</div>' : '') +
+    result + args +
+    (cur.entryId ? '<div style="font-size:.65rem;opacity:.7;margin-top:4px">Entry #' + cur.entryId + ' <a style="color:#38bdf8;cursor:pointer" onclick="loadEventEntry(' + cur.entryId + ')">[view]</a></div>' : '') +
+    '</div>';
+}
+
+/** Highlight active row without rebuilding list. */
+function highlightActiveRow() {
+  const el = document.getElementById('timeline-events');
+  const rows = el.querySelectorAll('.replay-row');
+  rows.forEach((row, i) => {
+    row.style.background = i === replayIdx ? '#1e3a5f' : '';
+  });
+  const activeRow = rows[replayIdx];
+  if (activeRow) activeRow.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+}

package/src/viewer/sessions.js

@@ -0,0 +1,84 @@
+/* Sessions Tab — Session list + orchestration (delegates to timeline/playback/export) */
+let sessionsData = [];
+let replayEvents = [];
+let replayIdx = 0;
+let replayTimer = null;
+let replayPlaying = false;
+
+/** Load sessions from API with filters. */
+async function loadSessions() {
+  const agent = document.getElementById('sess-agent')?.value || '';
+  const status = document.getElementById('sess-status')?.value || '';
+  let url = API + '/sessions?limit=50';
+  if (agent) url += '&agent=' + encodeURIComponent(agent);
+  if (status) url += '&status=' + status;
+  try {
+    const r = await fetch(url);
+    sessionsData = await r.json();
+    renderSessionList();
+  } catch (e) { console.error('[sessions]', e); }
+}
+
+/** Render session list with duration + task count badges. */
+function renderSessionList() {
+  const el = document.getElementById('sess-list');
+  if (!el) return;
+  el.innerHTML = sessionsData.map(s => {
+    const dur = s.totalDurationMs ? formatDurationShort(s.totalDurationMs) : (s.endedAt ? timeDiff(s.startedAt, s.endedAt) : 'active');
+    const tasks = s.taskCount ? '<span style="font-size:.55rem;opacity:.6"> | ' + s.taskCount + ' tasks</span>' : '';
+    return '<div class="entry-item" onclick="viewSession(\'' + s.id + '\')">' +
+      '<div style="display:flex;justify-content:space-between;align-items:center">' +
+      '<span class="entry-type" style="color:#38bdf8">' + (s.agentName || 'unknown') + '</span>' +
+      '<span class="badge badge-' + (s.status === 'active' ? 'WORKING' : 'SEMANTIC') + '">' + s.status + '</span></div>' +
+      '<div class="entry-summary">' + formatTime(s.startedAt) + ' — ' + dur + tasks + '</div>' +
+      '<div class="entry-meta">' + s.observationCount + ' observations</div></div>';
+  }).join('') || '<div style="padding:12px;opacity:.5;font-size:.7rem">No sessions found</div>';
+}
+
+/** Open session detail and load events. */
+async function viewSession(sessionId) {
+  document.getElementById('sess-detail').style.display = 'flex';
+  document.getElementById('sess-detail-id').textContent = sessionId;
+  document.getElementById('timeline-events').innerHTML = '';
+  try {
+    const r = await fetch(API + '/sessions/' + sessionId + '/events');
+    replayEvents = await r.json();
+    replayIdx = 0;
+    renderTimeline();
+    renderEventDetail();
+  } catch (e) { console.error('[session-events]', e); }
+}
+
+/** Format duration for session list. */
+function formatDurationShort(ms) {
+  if (ms < 1000) return ms + 'ms';
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return sec + 's';
+  return Math.floor(sec / 60) + 'm ' + (sec % 60) + 's';
+}
+
+/** Color map for operation types. */
+function opColor(op) {
+  const map = { INGEST: '#34d399', SEARCH: '#38bdf8', DELETE: '#f87171',
+    SESSION_START: '#facc15', SESSION_END: '#94a3b8', CONSOLIDATE: '#a78bfa',
+    INGEST_FILE: '#34d399', TOOL_CALL: '#2dd4bf', SYNC_CODE: '#a78bfa',
+    INGEST_FILE_SKIP: '#94a3b8', INGEST_FILE_HTTP: '#34d399' };
+  return map[op] || '#e2e8f0';
+}
+
+/** Load and display a linked knowledge entry. */
+async function loadEventEntry(entryId) {
+  try {
+    const r = await fetch(API + '/entries/' + entryId);
+    const e = await r.json();
+    const el = document.getElementById('timeline-events');
+    const detail = '<div style="background:#0f172a;padding:8px;border-radius:4px;margin:8px 0;border:1px solid #475569">' +
+      '<div style="display:flex;justify-content:space-between;margin-bottom:4px">' +
+      '<b style="color:' + nodeColor(e.type) + ';font-size:.7rem">[' + e.type + '] #' + e.id + '</b>' +
+      '<span style="font-size:.6rem;opacity:.6">' + e.tier + '</span></div>' +
+      '<div style="font-size:.7rem;margin:4px 0">' + esc(e.summary) + '</div>' +
+      (e.content ? '<pre style="font-size:.55rem;white-space:pre-wrap;max-height:150px;overflow-y:auto;background:#1e293b;padding:6px;border-radius:3px;margin-top:4px">' + esc(e.content).substring(0, 500) + '</pre>' : '') +
+      '</div>';
+    el.insertAdjacentHTML('afterbegin', detail);
+  } catch (e) { console.error('[entry]', e); }
+}

package/src/viewer/stream.js

@@ -0,0 +1,109 @@
+/* Stream Tab — Live Operations Stream via audit log polling */
+let streamEvents = [];
+let streamLastId = 0;
+let streamPaused = false;
+let streamTimer = null;
+let streamSortAsc = false;
+const STREAM_MAX = 100;
+const STREAM_INTERVAL = 3000;
+
+function startStream() {
+  if (streamTimer) return;
+  streamTimer = setInterval(pollStream, STREAM_INTERVAL);
+  pollStream();
+}
+
+function stopStream() {
+  if (streamTimer) { clearInterval(streamTimer); streamTimer = null; }
+}
+
+async function pollStream() {
+  if (streamPaused) return;
+  try {
+    const url = API + '/audit?limit=20' + (streamLastId ? '&after_id=' + streamLastId : '') + '&exclude=SESSION_START,SESSION_END';
+    const r = await fetch(url);
+    const data = await r.json();
+    if (!data.length) return;
+
+    const newEvents = data.filter(e => e.id > streamLastId);
+    if (!newEvents.length) return;
+
+    streamLastId = Math.max(...newEvents.map(e => e.id));
+    streamEvents = newEvents.reverse().concat(streamEvents).slice(0, STREAM_MAX);
+    renderStream();
+    flashIndicator();
+  } catch (e) { console.error('[stream]', e); }
+}
+
+function renderStream() {
+  const el = document.getElementById('stream-list');
+  if (!el) return;
+  const sorted = streamSortAsc ? [...streamEvents].reverse() : streamEvents;
+  el.innerHTML = sorted.map((e, i) =>
+    '<div class="stream-item" onclick="showStreamDetail(' + i + ')" style="cursor:pointer">' +
+    '<div class="stream-time">' + formatTime(e.createdAt || '') + '</div>' +
+    '<div style="display:flex;gap:6px;align-items:center">' +
+    '<span class="entry-type" style="color:' + opColor(e.operation) + '">' + e.operation + '</span>' +
+    (e.sessionId ? '<span class="entry-meta">session:' + e.sessionId.substring(0, 8) + '</span>' : '') +
+    '</div>' +
+    (e.details ? '<div class="entry-summary">' + esc(e.details) + '</div>' : '') +
+    (e.entryId ? '<div class="entry-meta">Entry #' + e.entryId + '</div>' : '') +
+    '</div>'
+  ).join('') || '<div style="padding:12px;opacity:.5;font-size:.7rem">Waiting for operations...</div>';
+
+  if (!streamPaused) el.scrollTop = 0;
+}
+
+function showStreamDetail(idx) {
+  const sorted = streamSortAsc ? [...streamEvents].reverse() : streamEvents;
+  const e = sorted[idx];
+  if (!e) return;
+  const panel = document.getElementById('stream-detail');
+  const content = document.getElementById('stream-detail-content');
+  panel.style.display = 'block';
+  content.innerHTML =
+    '<div style="margin-bottom:8px"><span class="entry-type" style="color:' + opColor(e.operation) + ';font-size:.8rem">' + e.operation + '</span></div>' +
+    '<div style="font-size:.65rem;opacity:.7;margin-bottom:6px">' + formatTime(e.createdAt) + '</div>' +
+    '<div style="font-size:.65rem;margin-bottom:6px">ID: ' + e.id + '</div>' +
+    (e.sessionId ? '<div style="font-size:.65rem;margin-bottom:6px">Session: ' + e.sessionId + '</div>' : '') +
+    (e.entryId ? '<div style="font-size:.65rem;margin-bottom:6px">Entry: #' + e.entryId + '</div>' : '') +
+    (e.details ? '<div style="margin-top:8px;font-size:.65rem;font-weight:600">Details:</div><pre style="font-size:.6rem;white-space:pre-wrap;background:#0f172a;padding:8px;border-radius:4px;margin-top:4px;max-height:300px;overflow-y:auto">' + esc(e.details) + '</pre>' : '<div style="opacity:.5;font-size:.65rem;margin-top:8px">No details</div>');
+}
+
+function closeStreamDetail() {
+  document.getElementById('stream-detail').style.display = 'none';
+}
+
+function opColor(op) {
+  const map = { INGEST: '#34d399', INGEST_FILE: '#34d399', SEARCH: '#38bdf8',
+    DELETE: '#f87171', ACCESS: '#facc15', SESSION_START: '#a78bfa',
+    SESSION_END: '#94a3b8', CONSOLIDATE: '#fb923c', SYNC_CODE: '#f472b6',
+    TOOL_CALL: '#38bdf8' };
+  return map[op] || '#e2e8f0';
+}
+
+function toggleStreamPause() {
+  streamPaused = !streamPaused;
+  const btn = document.getElementById('stream-pause-btn');
+  if (btn) btn.textContent = streamPaused ? '▶ Resume' : '⏸ Pause';
+}
+
+function toggleStreamSort() {
+  streamSortAsc = !streamSortAsc;
+  const btn = document.getElementById('stream-sort-btn');
+  if (btn) btn.textContent = streamSortAsc ? '↓ Newest first' : '↑ Oldest first';
+  renderStream();
+}
+
+function flashIndicator() {
+  const dot = document.getElementById('stream-indicator');
+  if (!dot) return;
+  dot.classList.add('flash');
+  setTimeout(() => dot.classList.remove('flash'), 600);
+}
+
+function clearStream() {
+  streamEvents = [];
+  streamLastId = 0;
+  renderStream();
+}

package/src/viewer/tags.js

@@ -0,0 +1,101 @@
+/** Tags page logic — tag cloud, taxonomy tree, search by tag. */
+var basePath = window.__MCP_BASE || '';
+
+async function loadPopular() {
+  try {
+    const r = await fetch(basePath + '/api/kb/tags/popular?limit=30');
+    const tags = await r.json();
+    const el = document.getElementById('cloud');
+    const max = Math.max(...tags.map(t => t.usage_count || 1), 1);
+    el.innerHTML = tags.map(t => {
+      const size = 0.65 + ((t.usage_count || 1) / max) * 0.8;
+      const hue = ((t.tag || '').charCodeAt(0) * 37) % 360;
+      return `<span class="tag" style="font-size:${size}rem;`
+        + `background:hsla(${hue},60%,40%,0.3);color:hsl(${hue},70%,75%)" `
+        + `onclick="searchTag('${esc(t.tag)}')">${esc(t.tag)}`
+        + `<small style="opacity:.6;margin-left:.2rem">${t.usage_count || 0}</small></span>`;
+    }).join('');
+  } catch (e) { console.error(e); }
+}
+
+async function loadTaxonomy() {
+  try {
+    const r = await fetch(basePath + '/api/kb/tags');
+    const data = await r.json();
+    const el = document.getElementById('tree');
+    if (Array.isArray(data) && data.length) {
+      el.innerHTML = '<ul>' + data.map(t => renderNode(t)).join('') + '</ul>';
+    } else if (data.categories) {
+      el.innerHTML = '<ul>' + Object.entries(data.categories).map(([k, v]) =>
+        `<li class="parent">${esc(k)}<ul>${v.map(c =>
+          `<li onclick="searchTag('${esc(c)}')" style="cursor:pointer">${esc(c)}</li>`
+        ).join('')}</ul></li>`).join('') + '</ul>';
+    } else {
+      el.innerHTML = '<p style="font-size:.75rem;opacity:.6">No taxonomy data</p>';
+    }
+  } catch (e) { console.error(e); }
+}
+
+function renderNode(node) {
+  const children = node.children || [];
+  return `<li class="${children.length ? 'parent' : ''}" `
+    + `onclick="searchTag('${esc(node.tag || node.name || '')}')" style="cursor:pointer">`
+    + `${esc(node.tag || node.name || 'unknown')}`
+    + (children.length ? '<ul>' + children.map(c => renderNode(c)).join('') + '</ul>' : '')
+    + '</li>';
+}
+
+async function searchTag(tag) {
+  document.getElementById('search-tag').value = tag;
+  try {
+    const r = await fetch(basePath + '/api/kb/tags/popular?limit=50');
+    const all = await r.json();
+    const match = all.find(t => t.tag === tag);
+    const el = document.getElementById('results');
+    if (match && match.entries) {
+      el.innerHTML = match.entries.map(e => `<div class="entry">`
+        + `<span class="type">${e.type || 'CONTEXT'}</span> `
+        + `${esc(e.summary || '')}</div>`).join('');
+    } else {
+      const sr = await fetch(basePath + '/api/memory/search?q=' + encodeURIComponent(tag));
+      const entries = await sr.json();
+      el.innerHTML = entries.slice(0, 10).map(e => `<div class="entry">`
+        + `<span class="type">${e.type || 'CONTEXT'}</span> `
+        + `${esc(e.summary || '')}</div>`).join('') || '<p style="font-size:.75rem">No entries found</p>';
+    }
+  } catch (e) { console.error(e); }
+}
+
+let _acTimer = null;
+document.getElementById('search-tag').addEventListener('keyup', function(ev) {
+  if (ev.key === 'Enter' && this.value) { searchTag(this.value); hideAC(); return; }
+  debounceAC(this.value);
+});
+
+function debounceAC(q) {
+  clearTimeout(_acTimer);
+  if (!q || q.length < 2) { hideAC(); return; }
+  _acTimer = setTimeout(() => fetchAC(q), 200);
+}
+
+async function fetchAC(q) {
+  try {
+    const r = await fetch(basePath + '/api/kb/suggestions?q=' + encodeURIComponent(q) + '&limit=8');
+    const items = await r.json();
+    const el = document.getElementById('ac-list');
+    if (!items.length) { hideAC(); return; }
+    el.innerHTML = items.map(i => {
+      const label = i.summary || i.tag || i.query || String(i);
+      return `<div class="ac-item" onclick="pickAC('${esc(label)}')">${esc(label)}</div>`;
+    }).join('');
+    el.classList.add('show');
+  } catch (e) { hideAC(); }
+}
+
+function pickAC(val) { document.getElementById('search-tag').value = val; hideAC(); searchTag(val); }
+function hideAC() { document.getElementById('ac-list').classList.remove('show'); }
+document.addEventListener('click', function(ev) { if (!ev.target.closest('.ac-wrap')) hideAC(); });
+function esc(s) { return (s || '').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+
+loadPopular();
+loadTaxonomy();

package/src/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['**/__tests__/**/*.test.ts'],
+  },
+});

package/src/vitest.ksa252.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['webview/__tests__/**/*.test.ts'],
+    testTimeout: 10000,
+  },
+});