closed-loop-cli 1.0.0

package/src/dashboard/public/index.js

@@ -0,0 +1,1059 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Tab Switching Logic
+  const tabButtons = document.querySelectorAll('.tab-btn');
+  const tabContents = document.querySelectorAll('.tab-content');
+
+  tabButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const targetTab = btn.getAttribute('data-tab');
+      
+      // Update active nav button
+      tabButtons.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      // Update active content panel
+      tabContents.forEach(content => {
+        if (content.id === targetTab) {
+          content.classList.add('active');
+        } else {
+          content.classList.remove('active');
+        }
+      });
+    });
+  });
+
+  // Auto Scroll logs toggler
+  let autoScroll = true;
+  const btnScroll = document.getElementById('btn-autoscroll');
+  btnScroll.addEventListener('click', () => {
+    autoScroll = !autoScroll;
+    btnScroll.classList.toggle('active', autoScroll);
+  });
+
+  // State Fetching and UI Rendering
+  async function fetchState() {
+    try {
+      const res = await fetch('/api/state');
+      if (!res.ok) throw new Error('Network error');
+      const state = await res.json();
+      renderState(state);
+    } catch (err) {
+      console.error('Error fetching state:', err);
+      document.getElementById('status-dot').className = 'dot err animate-pulse';
+      document.getElementById('status-text').innerText = 'CONNECTION ERROR';
+    }
+  }
+
+  function renderState(state) {
+    // 1. Status Indicator
+    const statusDot = document.getElementById('status-dot');
+    const statusText = document.getElementById('status-text');
+    const status = state.status || 'idle';
+    
+    statusText.innerText = status.replace('_', ' ').toUpperCase();
+    
+    let dotClass = 'dot ';
+    if (status === 'idle') dotClass += 'idle';
+    else if (status === 'cooldown') dotClass += 'warn animate-pulse';
+    else if (status === 'error') dotClass += 'err animate-pulse';
+    else dotClass += 'active animate-pulse'; // reflecting, refactoring, evaluating, committing, rolling_back
+    
+    statusDot.className = dotClass;
+
+    // 2. Metric Cards
+    // Cycle
+    const maxCyclesText = state.maxCycles === 0 ? 'Infinite' : state.maxCycles;
+    document.getElementById('metric-cycle').innerText = `${state.currentCycle} / ${maxCyclesText}`;
+    
+    // Tokens
+    const tokens = state.tokensUsed || { input: 0, output: 0, total: 0 };
+    const budget = state.tokenBudget || 500000;
+    document.getElementById('metric-tokens').innerText = tokens.total.toLocaleString();
+    document.getElementById('tokens-detail').innerText = `${tokens.input.toLocaleString()} in / ${tokens.output.toLocaleString()} out`;
+    document.getElementById('tokens-limit').innerText = `Limit: ${budget.toLocaleString()}`;
+    
+    const pct = Math.min((tokens.total / budget) * 100, 100);
+    document.getElementById('tokens-progress').style.width = `${pct}%`;
+
+    // Last Refactor Status
+    const refactorResult = state.lastRefactorResult;
+    const refactorStatusMetric = document.getElementById('metric-refactor-status');
+    const refactorTargetMetric = document.getElementById('metric-refactor-target');
+    
+    if (refactorResult) {
+      refactorStatusMetric.innerText = refactorResult.success ? 'Success ✅' : 'Failed ❌';
+      refactorStatusMetric.className = refactorResult.success ? 'metric-value font-md text-bright' : 'metric-value font-md text-dim';
+      refactorTargetMetric.innerText = refactorResult.targetFile;
+    } else {
+      refactorStatusMetric.innerText = 'No Runs';
+      refactorTargetMetric.innerText = 'Waiting for cycle...';
+    }
+
+    // Last sync update time
+    const lastUpdate = state.lastUpdated ? new Date(state.lastUpdated) : new Date();
+    document.getElementById('metric-sync').innerText = lastUpdate.toLocaleTimeString();
+
+    // 3. Active Task Section
+    const activeSection = document.getElementById('active-task-section');
+    const activeText = document.getElementById('active-task-text');
+    if (status !== 'idle' && status !== 'cooldown' && state.currentTask) {
+      activeSection.classList.remove('hidden');
+      activeText.innerText = state.currentTask;
+    } else {
+      activeSection.classList.add('hidden');
+    }
+
+    // 4. Tab: Overview Panel Details
+    const refactorEmpty = document.getElementById('refactor-empty');
+    const refactorDetails = document.getElementById('refactor-details');
+    if (refactorResult) {
+      refactorEmpty.classList.add('hidden');
+      refactorDetails.classList.remove('hidden');
+      
+      document.getElementById('refactor-file').innerText = refactorResult.targetFile;
+      document.getElementById('refactor-goal').innerText = state.lastRefactorProposal ? state.lastRefactorProposal.refactorGoal : '-';
+      
+      const badge = document.getElementById('refactor-success');
+      badge.innerText = refactorResult.success ? 'PASSED' : 'REJECTED';
+      badge.className = refactorResult.success ? 'value badge success' : 'value badge failed';
+      
+      document.getElementById('refactor-message').innerText = refactorResult.message || '-';
+      document.getElementById('refactor-time').innerText = new Date(refactorResult.time).toLocaleString();
+    } else {
+      refactorEmpty.classList.remove('hidden');
+      refactorDetails.classList.add('hidden');
+    }
+
+    // Tab: Overview System Metrics Summary
+    let metrics = refactorResult?.metrics;
+    if (metrics) {
+      document.getElementById('overview-gdi').innerText = metrics.goalDriftIndex.toFixed(3);
+      document.getElementById('overview-gdi').className = metrics.goalDriftIndex > 0.440 ? 'value text-dim' : 'value text-bright';
+      
+      document.getElementById('overview-cps').innerText = metrics.constraintPreservationScore.toFixed(2);
+      document.getElementById('overview-cps').className = metrics.constraintPreservationScore < 1.0 ? 'value text-dim' : 'value text-bright';
+      
+      document.getElementById('overview-risk').innerText = `${(metrics.regressionRisk * 100).toFixed(1)}%`;
+      document.getElementById('overview-risk').className = metrics.regressionRisk > 0.80 ? 'value text-dim' : 'value text-bright';
+    } else {
+      document.getElementById('overview-gdi').innerText = '-';
+      document.getElementById('overview-cps').innerText = '-';
+      document.getElementById('overview-risk').innerText = '-';
+    }
+
+    const lastPromptOpt = state.lastPromptOptimization;
+    if (lastPromptOpt) {
+      document.getElementById('overview-prompt').innerText = lastPromptOpt.approved ? 'Approved ✅' : 'Rejected ❌';
+      document.getElementById('overview-prompt-detail').innerText = `Candidate: ${lastPromptOpt.candidateScore.toFixed(1)} vs Base: ${lastPromptOpt.baselineScore.toFixed(1)}`;
+    } else {
+      document.getElementById('overview-prompt').innerText = '-';
+      document.getElementById('overview-prompt-detail').innerText = '-';
+    }
+
+    // 5. Tab: SAHOO Metrics
+    if (metrics) {
+      // Set drift values
+      document.getElementById('drift-val-semantic').innerText = metrics.semanticDrift.toFixed(3);
+      document.getElementById('drift-progress-semantic').style.width = `${metrics.semanticDrift * 100}%`;
+      
+      document.getElementById('drift-val-lexical').innerText = metrics.lexicalDrift.toFixed(3);
+      document.getElementById('drift-progress-lexical').style.width = `${metrics.lexicalDrift * 100}%`;
+      
+      document.getElementById('drift-val-structural').innerText = metrics.structuralDrift.toFixed(3);
+      document.getElementById('drift-progress-structural').style.width = `${metrics.structuralDrift * 100}%`;
+      
+      document.getElementById('drift-val-distributional').innerText = metrics.distributionalDrift.toFixed(3);
+      document.getElementById('drift-progress-distributional').style.width = `${metrics.distributionalDrift * 100}%`;
+
+      // Set halting rules checks
+      const ruleGdi = document.getElementById('rule-status-gdi');
+      if (metrics.goalDriftIndex <= 0.440) {
+        ruleGdi.innerText = 'PASS';
+        ruleGdi.className = 'rule-badge pass';
+      } else {
+        ruleGdi.innerText = 'HALTED';
+        ruleGdi.className = 'rule-badge fail';
+      }
+
+      const ruleCps = document.getElementById('rule-status-cps');
+      if (metrics.constraintPreservationScore === 1.0) {
+        ruleCps.innerText = 'PASS';
+        ruleCps.className = 'rule-badge pass';
+      } else {
+        ruleCps.innerText = 'HALTED';
+        ruleCps.className = 'rule-badge fail';
+      }
+
+      const ruleRisk = document.getElementById('rule-status-risk');
+      if (metrics.regressionRisk <= 0.80) {
+        ruleRisk.innerText = 'PASS';
+        ruleRisk.className = 'rule-badge pass';
+      } else {
+        ruleRisk.innerText = 'HALTED';
+        ruleRisk.className = 'rule-badge fail';
+      }
+    } else {
+      document.querySelectorAll('.drift-bar-item .bar-inner').forEach(bar => bar.style.width = '0%');
+      document.querySelectorAll('.drift-bar-item .value-badge').forEach(badge => badge.innerText = '-');
+      document.querySelectorAll('.rule-badge').forEach(badge => {
+        badge.innerText = '-';
+        badge.className = 'rule-badge';
+      });
+    }
+
+    // 6. Tab: Prompt Details
+    const promptEmpty = document.getElementById('prompt-empty');
+    const promptDetails = document.getElementById('prompt-details');
+    if (lastPromptOpt) {
+      promptEmpty.classList.add('hidden');
+      promptDetails.classList.remove('hidden');
+      
+      document.getElementById('prompt-val-baseline').innerText = lastPromptOpt.baselineScore.toFixed(2);
+      document.getElementById('prompt-val-candidate').innerText = lastPromptOpt.candidateScore.toFixed(2);
+      
+      const outcomeVal = document.getElementById('prompt-val-outcome');
+      const outcomeCard = document.getElementById('prompt-card-result');
+      if (lastPromptOpt.approved) {
+        outcomeVal.innerText = 'APPROVED';
+        outcomeCard.className = 'score-card glass approved text-bright';
+      } else {
+        outcomeVal.innerText = lastPromptOpt.success ? 'REJECTED' : 'FAILED';
+        outcomeCard.className = 'score-card glass rejected text-dim';
+      }
+      document.getElementById('prompt-time').innerText = new Date(lastPromptOpt.time).toLocaleString();
+    } else {
+      promptEmpty.classList.remove('hidden');
+      promptDetails.classList.add('hidden');
+    }
+
+    // 7. Render History Timeline
+    const timeline = document.getElementById('evolution-timeline');
+    const history = state.history || [];
+    if (history.length > 0) {
+      timeline.innerHTML = '';
+      // Show latest at the top
+      [...history].reverse().forEach(item => {
+        const div = document.createElement('div');
+        div.className = `timeline-item ${item.success ? 'success' : 'failed'}`;
+        
+        const card = document.createElement('div');
+        card.className = 'timeline-card';
+        
+        const content = document.createElement('div');
+        content.className = 'content';
+        
+        const title = document.createElement('span');
+        title.className = 'title';
+        title.innerText = `Cycle ${item.cycle}: ${item.description}`;
+        
+        const desc = document.createElement('span');
+        desc.className = 'desc';
+        desc.innerText = item.details || '';
+        
+        content.appendChild(title);
+        content.appendChild(desc);
+        
+        const meta = document.createElement('div');
+        meta.className = 'meta';
+        
+        const time = document.createElement('span');
+        time.className = 'time';
+        time.innerText = new Date(item.time).toLocaleTimeString();
+        
+        const type = document.createElement('span');
+        type.className = 'type';
+        type.innerText = item.type === 'refactor' ? 'REFACTOR' : 'PROMPT';
+        
+        meta.appendChild(time);
+        meta.appendChild(type);
+        
+        card.appendChild(content);
+        card.appendChild(meta);
+        div.appendChild(card);
+        timeline.appendChild(div);
+      });
+    } else {
+      timeline.innerHTML = '<div class="timeline-empty">Waiting for evolution cycles to commit...</div>';
+    }
+    
+    // 8. Render DGM Archive Tree (from state.archive — legacy)
+    // Note: DGM-enhanced archive is rendered by fetchDGMArchive() separately
+    if (!window._dgmArchiveLoaded) {
+      renderArchive(state.archive);
+    }
+
+    // 9. Update DGM Fitness metric card
+    const fitnessCurrent = state.currentFitness ?? 0;
+    const fitnessBest = state.bestFitness ?? 0;
+    const dgmPop = state.dgmPopulationSize ?? 0;
+    const fitnessEl = document.getElementById('metric-fitness');
+    const fitnessProgressEl = document.getElementById('fitness-progress');
+    const fitnessDetailEl = document.getElementById('fitness-detail');
+    const fitnessBestEl = document.getElementById('fitness-best');
+    if (fitnessEl) {
+      fitnessEl.innerText = fitnessCurrent > 0 ? `${(fitnessCurrent * 100).toFixed(1)}%` : '-';
+      if (fitnessProgressEl) fitnessProgressEl.style.width = `${fitnessCurrent * 100}%`;
+      if (fitnessDetailEl) fitnessDetailEl.innerText = `Population: ${dgmPop} nodes`;
+      if (fitnessBestEl) fitnessBestEl.innerText = fitnessBest > 0 ? `Best: ${(fitnessBest * 100).toFixed(1)}%` : 'Best: -';
+    }
+  }
+
+  function renderArchive(archive) {
+    const emptyEl = document.getElementById('archive-empty');
+    const containerEl = document.getElementById('archive-tree');
+    if (!archive || archive.length === 0) {
+      emptyEl.classList.remove('hidden');
+      containerEl.classList.add('hidden');
+      return;
+    }
+    emptyEl.classList.add('hidden');
+    containerEl.classList.remove('hidden');
+    
+    // Clear and redraw
+    containerEl.innerHTML = '';
+    
+    const treeList = document.createElement('div');
+    treeList.className = 'archive-nodes-list';
+    
+    archive.forEach((node, idx) => {
+      const card = document.createElement('div');
+      card.className = 'archive-node-card glass';
+      card.id = `archive-node-${idx}`;
+      
+      // Node Header: Title, Cycle, Commit Hash
+      const nodeHeader = document.createElement('div');
+      nodeHeader.className = 'archive-node-header flex-between';
+      
+      const titleWrapper = document.createElement('div');
+      titleWrapper.className = 'title-wrapper';
+      const nodeTitle = document.createElement('h4');
+      nodeTitle.className = 'node-title';
+      nodeTitle.innerText = `Generation Node #${idx + 1}`;
+      const cycleSpan = document.createElement('span');
+      cycleSpan.className = 'node-cycle-badge';
+      cycleSpan.innerText = `Cycle ${node.cycle}`;
+      titleWrapper.appendChild(nodeTitle);
+      titleWrapper.appendChild(cycleSpan);
+      
+      const rightWrapper = document.createElement('div');
+      rightWrapper.className = 'right-wrapper flex-center';
+      
+      const timeSpan = document.createElement('span');
+      timeSpan.className = 'node-time-stamp';
+      timeSpan.innerText = new Date(node.timestamp).toLocaleTimeString();
+      
+      const hashSpan = document.createElement('span');
+      hashSpan.className = 'node-hash-badge';
+      hashSpan.innerText = node.commitHash.substring(0, 8);
+      hashSpan.title = node.commitHash;
+      
+      rightWrapper.appendChild(timeSpan);
+      rightWrapper.appendChild(hashSpan);
+      
+      nodeHeader.appendChild(titleWrapper);
+      nodeHeader.appendChild(rightWrapper);
+      card.appendChild(nodeHeader);
+      
+      // Task Description
+      const taskP = document.createElement('p');
+      taskP.className = 'node-task-desc';
+      taskP.innerHTML = `<span class="label">Evolution Goal:</span> ${node.task}`;
+      card.appendChild(taskP);
+      
+      // Metrics
+      if (node.metrics) {
+        const metricsContainer = document.createElement('div');
+        metricsContainer.className = 'node-metrics-container';
+        
+        // Primary metrics: GDI, CPS, Regression Risk
+        const primaryMetrics = document.createElement('div');
+        primaryMetrics.className = 'primary-metrics-row flex-between';
+        
+        // GDI Metric Card (threshold is 0.440)
+        const gdiCard = document.createElement('div');
+        gdiCard.className = 'metric-mini-card';
+        const gdiValue = node.metrics.goalDriftIndex;
+        const gdiStatus = gdiValue > 0.40 ? 'warn' : 'good';
+        gdiCard.innerHTML = `
+          <div class="metric-label">Goal Drift Index</div>
+          <div class="metric-value ${gdiStatus}">${gdiValue.toFixed(3)}</div>
+          <div class="metric-bar-bg"><div class="metric-bar ${gdiStatus}" style="width: ${Math.min((gdiValue / 0.44) * 100, 100)}%"></div></div>
+        `;
+        
+        // CPS Metric Card (threshold is 1.0)
+        const cpsCard = document.createElement('div');
+        cpsCard.className = 'metric-mini-card';
+        const cpsValue = node.metrics.constraintPreservationScore;
+        const cpsStatus = cpsValue === 1.0 ? 'good' : 'bad';
+        cpsCard.innerHTML = `
+          <div class="metric-label">Constraint Preservation</div>
+          <div class="metric-value ${cpsStatus}">${(cpsValue * 100).toFixed(0)}%</div>
+          <div class="metric-bar-bg"><div class="metric-bar ${cpsStatus}" style="width: ${cpsValue * 100}%"></div></div>
+        `;
+        
+        // Regression Risk Card (threshold is 0.80)
+        const riskCard = document.createElement('div');
+        riskCard.className = 'metric-mini-card';
+        const riskValue = node.metrics.regressionRisk;
+        const riskStatus = riskValue > 0.70 ? 'bad' : riskValue > 0.40 ? 'warn' : 'good';
+        riskCard.innerHTML = `
+          <div class="metric-label">Regression Risk</div>
+          <div class="metric-value ${riskStatus}">${(riskValue * 100).toFixed(0)}%</div>
+          <div class="metric-bar-bg"><div class="metric-bar ${riskStatus}" style="width: ${riskValue * 100}%"></div></div>
+        `;
+        
+        primaryMetrics.appendChild(gdiCard);
+        primaryMetrics.appendChild(cpsCard);
+        primaryMetrics.appendChild(riskCard);
+        metricsContainer.appendChild(primaryMetrics);
+        
+        // Detailed metrics breakdown toggle
+        const toggleBtn = document.createElement('button');
+        toggleBtn.className = 'drift-breakdown-toggle';
+        toggleBtn.innerText = 'Show Drift Breakdown ▼';
+        
+        const breakdownDiv = document.createElement('div');
+        breakdownDiv.className = 'drift-breakdown-panel hidden';
+        breakdownDiv.innerHTML = `
+          <div class="breakdown-grid">
+            <div class="breakdown-item flex-between">
+              <span class="breakdown-label">Semantic Drift:</span>
+              <span class="breakdown-value">${(node.metrics.semanticDrift * 100).toFixed(1)}%</span>
+            </div>
+            <div class="breakdown-item flex-between">
+              <span class="breakdown-label">Lexical Drift:</span>
+              <span class="breakdown-value">${(node.metrics.lexicalDrift * 100).toFixed(1)}%</span>
+            </div>
+            <div class="breakdown-item flex-between">
+              <span class="breakdown-label">Structural Drift:</span>
+              <span class="breakdown-value">${(node.metrics.structuralDrift * 100).toFixed(1)}%</span>
+            </div>
+            <div class="breakdown-item flex-between">
+              <span class="breakdown-label">Distributional Drift:</span>
+              <span class="breakdown-value">${(node.metrics.distributionalDrift * 100).toFixed(1)}%</span>
+            </div>
+          </div>
+        `;
+        
+        toggleBtn.addEventListener('click', () => {
+          const isHidden = breakdownDiv.classList.contains('hidden');
+          if (isHidden) {
+            breakdownDiv.classList.remove('hidden');
+            toggleBtn.innerText = 'Hide Drift Breakdown ▲';
+          } else {
+            breakdownDiv.classList.add('hidden');
+            toggleBtn.innerText = 'Show Drift Breakdown ▼';
+          }
+        });
+        
+        metricsContainer.appendChild(toggleBtn);
+        metricsContainer.appendChild(breakdownDiv);
+        card.appendChild(metricsContainer);
+      }
+      
+      treeList.appendChild(card);
+      
+      // Connecting line to next node
+      if (idx < archive.length - 1) {
+        const connector = document.createElement('div');
+        connector.className = 'tree-connector-line';
+        
+        const dot = document.createElement('div');
+        dot.className = 'tree-connector-dot';
+        connector.appendChild(dot);
+        
+        treeList.appendChild(connector);
+      }
+    });
+    
+    containerEl.appendChild(treeList);
+  }
+
+
+  // Logs fetching
+  async function fetchLogs() {
+    try {
+      const res = await fetch('/api/logs');
+      if (!res.ok) throw new Error();
+      const logs = await res.text();
+      const logArea = document.getElementById('console-output');
+      
+      // Clear escape characters and color symbols if present for terminal rendering
+      const cleanedLogs = logs.replace(/\x1b\[\d+m/g, '');
+      logArea.innerText = cleanedLogs;
+      
+      if (autoScroll) {
+        logArea.scrollTop = logArea.scrollHeight;
+      }
+    } catch (e) {
+      document.getElementById('console-output').innerText = 'Unable to fetch logs from workspace.';
+    }
+  }
+
+  // Learnings fetching & markdown rendering
+  async function fetchLearnings() {
+    try {
+      const res = await fetch('/api/learnings');
+      if (!res.ok) throw new Error();
+      const md = await res.text();
+      renderLearnings(md);
+    } catch (e) {
+      document.getElementById('learnings-registry').innerText = 'Learnings.md not found or unreachable.';
+    }
+  }
+
+  function renderLearnings(md) {
+    const container = document.getElementById('learnings-registry');
+    
+    // Tiny parser to render headings, links, lists cleanly without a heavy library
+    const lines = md.split('\n');
+    let html = '';
+    let inList = false;
+
+    lines.forEach(line => {
+      const trimmed = line.trim();
+      
+      // Header matching
+      if (trimmed.startsWith('###')) {
+        if (inList) { html += '</ul>'; inList = false; }
+        html += `<h3>${trimmed.replace(/^###\s*/, '')}</h3>`;
+      } else if (trimmed.startsWith('##')) {
+        if (inList) { html += '</ul>'; inList = false; }
+        html += `<h2>${trimmed.replace(/^##\s*/, '')}</h2>`;
+      } else if (trimmed.startsWith('#')) {
+        if (inList) { html += '</ul>'; inList = false; }
+        html += `<h1>${trimmed.replace(/^#\s*/, '')}</h1>`;
+      } else if (trimmed.startsWith('-') || trimmed.startsWith('*')) {
+        // Unordered lists
+        if (!inList) { html += '<ul>'; inList = true; }
+        
+        // Match bold elements
+        let content = trimmed.replace(/^[-*]\s*/, '');
+        content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        content = content.replace(/`(.*?)`/g, '<code>$1</code>');
+        html += `<li>${content}</li>`;
+      } else if (trimmed === '---') {
+        if (inList) { html += '</ul>'; inList = false; }
+        html += '<hr style="border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 1rem 0;">';
+      } else {
+        if (trimmed === '') return;
+        if (inList) { html += '</ul>'; inList = false; }
+        
+        let content = trimmed;
+        content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        content = content.replace(/`(.*?)`/g, '<code>$1</code>');
+        html += `<p style="margin-bottom: 0.5rem; color: var(--text-dim);">${content}</p>`;
+      }
+    });
+
+    if (inList) html += '</ul>';
+    container.innerHTML = html;
+  }
+
+  // Skills fetching
+  async function fetchSkills() {
+    try {
+      const res = await fetch('/api/skills');
+      if (!res.ok) throw new Error();
+      const skills = await res.json();
+      renderSkills(skills);
+    } catch (e) {
+      document.getElementById('skills-list').innerHTML = '<div class="empty-state">Unable to fetch skills from workspace.</div>';
+    }
+  }
+
+  function renderSkills(skills) {
+    const container = document.getElementById('skills-list');
+    if (!skills || skills.length === 0) {
+      container.innerHTML = '<div class="empty-state">No registered skills yet. Playbooks will be listed here as the agent evolves.</div>';
+      return;
+    }
+
+    container.innerHTML = '';
+    skills.forEach(skill => {
+      const card = document.createElement('div');
+      card.className = 'skill-card';
+
+      // Header
+      const header = document.createElement('div');
+      header.className = 'skill-header';
+      
+      const title = document.createElement('h3');
+      title.className = 'skill-title';
+      title.innerText = skill.title || 'Untitled Skill';
+      
+      const id = document.createElement('span');
+      id.className = 'skill-id';
+      id.innerText = skill.id || '';
+      
+      header.appendChild(title);
+      header.appendChild(id);
+      card.appendChild(header);
+
+      // Description
+      const desc = document.createElement('p');
+      desc.className = 'skill-desc';
+      desc.innerText = skill.description || 'No description provided.';
+      card.appendChild(desc);
+
+      // Files Modified
+      if (skill.filesModified && skill.filesModified.length > 0) {
+        const filesDiv = document.createElement('div');
+        filesDiv.className = 'skill-files';
+        
+        const label = document.createElement('span');
+        label.className = 'skill-files-label';
+        label.innerText = 'Files Modified:';
+        filesDiv.appendChild(label);
+        
+        const list = document.createElement('div');
+        list.className = 'skill-files-list';
+        skill.filesModified.forEach(file => {
+          const badge = document.createElement('span');
+          badge.className = 'skill-file-badge';
+          badge.innerText = file;
+          list.appendChild(badge);
+        });
+        filesDiv.appendChild(list);
+        card.appendChild(filesDiv);
+      }
+
+      // Recipe / Steps
+      if (skill.recipe) {
+        const recipeDiv = document.createElement('div');
+        recipeDiv.className = 'skill-recipe';
+        
+        const label = document.createElement('span');
+        label.className = 'skill-recipe-label';
+        label.innerText = 'Evolution Playbook Recipe:';
+        recipeDiv.appendChild(label);
+        
+        const stepsDiv = document.createElement('div');
+        stepsDiv.className = 'skill-recipe-steps';
+        
+        const rawRecipe = skill.recipe;
+        // Split by step markers like "1. ", "2. "
+        const steps = rawRecipe.split(/(?=\b\d+\.\s)/g).map(s => s.trim()).filter(Boolean);
+        
+        if (steps.length > 0) {
+          steps.forEach(stepText => {
+            const stepItem = document.createElement('div');
+            stepItem.className = 'skill-recipe-step-item';
+            
+            const match = stepText.match(/^(\d+)\.\s*(.*)/);
+            if (match) {
+              stepItem.setAttribute('data-step', match[1] + '.');
+              stepItem.innerText = match[2];
+            } else {
+              stepItem.innerText = stepText;
+            }
+            stepsDiv.appendChild(stepItem);
+          });
+        } else {
+          const stepItem = document.createElement('div');
+          stepItem.innerText = rawRecipe;
+          stepsDiv.appendChild(stepItem);
+        }
+        
+        recipeDiv.appendChild(stepsDiv);
+        card.appendChild(recipeDiv);
+      }
+
+      container.appendChild(card);
+    });
+  }
+
+  // Live Research Logs Fetching & Rendering
+  async function fetchResearch() {
+    try {
+      const res = await fetch('/api/research');
+      if (!res.ok) throw new Error();
+      const sessions = await res.json();
+      renderResearch(sessions);
+    } catch (e) {
+      console.error('Error fetching research logs:', e);
+    }
+  }
+
+  function renderResearch(sessions) {
+    const emptyEl = document.getElementById('research-empty');
+    const containerEl = document.getElementById('research-sessions');
+    
+    if (!sessions || sessions.length === 0) {
+      emptyEl.classList.remove('hidden');
+      containerEl.classList.add('hidden');
+      return;
+    }
+    
+    emptyEl.classList.add('hidden');
+    containerEl.classList.remove('hidden');
+    
+    containerEl.innerHTML = '';
+    
+    [...sessions].reverse().forEach(session => {
+      const sessionDiv = document.createElement('div');
+      sessionDiv.className = `research-session-card glass ${session.status}`;
+      
+      const header = document.createElement('div');
+      header.className = 'session-header flex-between';
+      
+      const title = document.createElement('h3');
+      title.innerText = `Task: ${session.task}`;
+      
+      const meta = document.createElement('div');
+      meta.className = 'session-meta';
+      
+      const timeSpan = document.createElement('span');
+      timeSpan.className = 'time-meta';
+      timeSpan.innerText = new Date(session.startedAt).toLocaleString();
+      
+      const effortBadge = document.createElement('span');
+      effortBadge.className = `badge effort-${session.effort}`;
+      effortBadge.innerText = session.effort.toUpperCase();
+      
+      const statusBadge = document.createElement('span');
+      statusBadge.className = `badge status-${session.status}`;
+      statusBadge.innerText = session.status.toUpperCase();
+      
+      meta.appendChild(timeSpan);
+      meta.appendChild(effortBadge);
+      meta.appendChild(statusBadge);
+      
+      header.appendChild(title);
+      header.appendChild(meta);
+      sessionDiv.appendChild(header);
+      
+      const decisionsList = document.createElement('div');
+      decisionsList.className = 'decisions-list';
+      
+      session.decisions.forEach(decision => {
+        const item = document.createElement('div');
+        item.className = `decision-item-node ${decision.result}`;
+        
+        const nodeDot = document.createElement('div');
+        nodeDot.className = 'node-dot';
+        
+        const content = document.createElement('div');
+        content.className = 'node-content';
+        
+        const nodeHeader = document.createElement('div');
+        nodeHeader.className = 'node-header flex-between';
+        
+        const phaseSpan = document.createElement('span');
+        phaseSpan.className = 'phase';
+        phaseSpan.innerText = decision.phase;
+        
+        const timeSpanNode = document.createElement('span');
+        timeSpanNode.className = 'time';
+        timeSpanNode.innerText = new Date(decision.timestamp).toLocaleTimeString();
+        
+        nodeHeader.appendChild(phaseSpan);
+        nodeHeader.appendChild(timeSpanNode);
+        
+        const actionText = document.createElement('p');
+        actionText.className = 'action';
+        actionText.innerText = decision.action;
+        
+        content.appendChild(nodeHeader);
+        content.appendChild(actionText);
+        
+        if (decision.details) {
+          const detailsPre = document.createElement('pre');
+          detailsPre.className = 'details';
+          detailsPre.innerText = decision.details;
+          content.appendChild(detailsPre);
+        }
+        
+        item.appendChild(nodeDot);
+        item.appendChild(content);
+        decisionsList.appendChild(item);
+      });
+      
+      sessionDiv.appendChild(decisionsList);
+      containerEl.appendChild(sessionDiv);
+    });
+  }
+
+  // DGM Archive Fetching
+  async function fetchDGMArchive() {
+    try {
+      const res = await fetch('/api/dgm-archive');
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      if (data && Array.isArray(data.entries) && data.entries.length > 0) {
+        window._dgmArchiveLoaded = true;
+        renderDGMArchive(data.entries);
+      }
+    } catch (e) {
+      // silently ignore — DGM may not have run yet
+    }
+  }
+
+  function renderDGMArchive(entries) {
+    const emptyEl = document.getElementById('archive-empty');
+    const containerEl = document.getElementById('archive-tree');
+    if (!entries || entries.length === 0) {
+      emptyEl.classList.remove('hidden');
+      containerEl.classList.add('hidden');
+      return;
+    }
+    emptyEl.classList.add('hidden');
+    containerEl.classList.remove('hidden');
+    containerEl.innerHTML = '';
+
+    const treeList = document.createElement('div');
+    treeList.className = 'archive-nodes-list';
+
+    entries.forEach((entry, idx) => {
+      const card = document.createElement('div');
+      card.className = 'archive-node-card glass';
+
+      const header = document.createElement('div');
+      header.className = 'archive-node-header flex-between';
+
+      const titleWrapper = document.createElement('div');
+      titleWrapper.className = 'title-wrapper';
+      const nodeTitle = document.createElement('h4');
+      nodeTitle.className = 'node-title';
+      nodeTitle.innerText = `DGM Node #${idx + 1} — ${entry.mutationStrategy || 'baseline'}`;
+      const idSpan = document.createElement('span');
+      idSpan.className = 'node-cycle-badge';
+      idSpan.innerText = entry.id || '';
+      titleWrapper.appendChild(nodeTitle);
+      titleWrapper.appendChild(idSpan);
+
+      const rightWrapper = document.createElement('div');
+      rightWrapper.className = 'right-wrapper flex-center';
+
+      const timeSpan = document.createElement('span');
+      timeSpan.className = 'node-time-stamp';
+      timeSpan.innerText = new Date(entry.timestamp).toLocaleString();
+
+      const hashSpan = document.createElement('span');
+      hashSpan.className = 'node-hash-badge';
+      hashSpan.innerText = entry.commitHash ? entry.commitHash.substring(0, 8) : '?';
+      hashSpan.title = entry.commitHash || '';
+
+      rightWrapper.appendChild(timeSpan);
+      rightWrapper.appendChild(hashSpan);
+      header.appendChild(titleWrapper);
+      header.appendChild(rightWrapper);
+      card.appendChild(header);
+
+      // Fitness bar
+      const fitnessDiv = document.createElement('div');
+      fitnessDiv.className = 'node-fitness-bar';
+      const fitnessVal = (entry.fitness || 0) * 100;
+      const fitnessColor = fitnessVal >= 90 ? '#00ff88' : fitnessVal >= 70 ? '#00d4aa' : '#f59e0b';
+      fitnessDiv.innerHTML = `
+        <div class="fitness-bar-label flex-between">
+          <span>Fitness (Test Pass Rate)</span>
+          <span style="color: ${fitnessColor}; font-weight: 600">${fitnessVal.toFixed(1)}%</span>
+        </div>
+        <div class="bar-outer">
+          <div class="bar-inner" style="width:${fitnessVal}%; background: linear-gradient(90deg, #00d4aa, ${fitnessColor})"></div>
+        </div>
+      `;
+      card.appendChild(fitnessDiv);
+
+      // Task
+      const taskP = document.createElement('p');
+      taskP.className = 'node-task-desc';
+      taskP.innerHTML = `<span class="label">Task:</span> ${entry.task}`;
+      card.appendChild(taskP);
+
+      // Metadata
+      if (entry.metadata && entry.metadata.totalTests > 0) {
+        const metaDiv = document.createElement('div');
+        metaDiv.className = 'node-task-desc';
+        metaDiv.innerHTML = `<span class="label">Tests:</span> ${entry.metadata.passCount}/${entry.metadata.totalTests} passed`;
+        card.appendChild(metaDiv);
+      }
+
+      treeList.appendChild(card);
+
+      if (idx < entries.length - 1) {
+        const connector = document.createElement('div');
+        connector.className = 'tree-connector-line';
+        const dot = document.createElement('div');
+        dot.className = 'tree-connector-dot';
+        connector.appendChild(dot);
+        treeList.appendChild(connector);
+      }
+    });
+
+    containerEl.appendChild(treeList);
+  }
+
+  // OpenHands Event Stream Fetching & Rendering
+  async function fetchEventStream() {
+    try {
+      const res = await fetch('/api/event-stream');
+      if (!res.ok) throw new Error();
+      const events = await res.json();
+      renderEventStream(events);
+    } catch (e) {
+      console.error('Error fetching event stream:', e);
+    }
+  }
+
+  function renderEventStream(events) {
+    const container = document.getElementById('event-stream-list');
+    if (!container) return;
+    if (!events || events.length === 0) {
+      container.innerHTML = '<div class="empty-state">No events recorded in the stream yet.</div>';
+      return;
+    }
+
+    container.innerHTML = '';
+    
+    // Show events
+    events.forEach(evt => {
+      const div = document.createElement('div');
+      div.className = `event-item ${evt.source}`;
+      div.style.marginBottom = '0.75rem';
+      div.style.padding = '0.5rem 0.75rem';
+      div.style.borderRadius = '4px';
+      div.style.borderLeft = '4px solid';
+      
+      const colors = {
+        user: { border: '#10b981', bg: 'rgba(16,185,129,0.1)' },
+        agent: { border: '#06b6d4', bg: 'rgba(6,182,212,0.1)' },
+        environment: { border: '#f59e0b', bg: 'rgba(245,158,11,0.1)' },
+        system: { border: '#ec4899', bg: 'rgba(236,72,153,0.1)' }
+      };
+
+      const style = colors[evt.source] || { border: '#9ca3af', bg: 'rgba(156,163,175,0.1)' };
+      div.style.borderLeftColor = style.border;
+      div.style.backgroundColor = style.bg;
+
+      const timeSpan = document.createElement('span');
+      timeSpan.style.color = '#6b7280';
+      timeSpan.style.fontSize = '0.75rem';
+      timeSpan.style.marginRight = '0.5rem';
+      timeSpan.innerText = new Date(evt.timestamp).toLocaleTimeString();
+
+      const sourceBadge = document.createElement('strong');
+      sourceBadge.style.color = style.border;
+      sourceBadge.style.marginRight = '0.5rem';
+      sourceBadge.innerText = evt.source.toUpperCase();
+
+      const typeBadge = document.createElement('span');
+      typeBadge.style.color = '#9ca3af';
+      typeBadge.style.fontSize = '0.75rem';
+      typeBadge.style.marginRight = '0.5rem';
+      typeBadge.innerText = `[${evt.type.toUpperCase()}]`;
+
+      const nameSpan = document.createElement('span');
+      nameSpan.style.fontWeight = 'bold';
+      nameSpan.style.color = '#f3f4f6';
+      nameSpan.innerText = `${evt.name}: `;
+
+      const contentSpan = document.createElement('span');
+      contentSpan.style.color = '#d1d5db';
+      contentSpan.innerText = evt.content;
+
+      div.appendChild(timeSpan);
+      div.appendChild(sourceBadge);
+      div.appendChild(typeBadge);
+      div.appendChild(nameSpan);
+      div.appendChild(contentSpan);
+
+      container.appendChild(div);
+    });
+
+    container.scrollTop = container.scrollHeight;
+  }
+
+  // Microagents Fetching & Rendering
+  async function fetchMicroagents() {
+    try {
+      const res = await fetch('/api/microagents');
+      if (!res.ok) throw new Error();
+      const agents = await res.json();
+      renderMicroagents(agents);
+    } catch (e) {
+      console.error('Error fetching microagents:', e);
+    }
+  }
+
+  function renderMicroagents(agents) {
+    const container = document.getElementById('microagents-list');
+    if (!container) return;
+    if (!agents || agents.length === 0) {
+      container.innerHTML = '<div class="empty-state">No microagents found in registry.</div>';
+      return;
+    }
+
+    container.innerHTML = '';
+    agents.forEach(agent => {
+      const card = document.createElement('div');
+      card.className = 'microagent-card glass';
+      card.style.padding = '1.25rem';
+      card.style.borderRadius = '8px';
+      card.style.border = '1px solid rgba(255,255,255,0.05)';
+      card.style.background = 'rgba(255,255,255,0.02)';
+
+      const title = document.createElement('h3');
+      title.style.margin = '0 0 0.5rem 0';
+      title.style.color = '#fff';
+      title.innerText = agent.name;
+
+      const trigger = document.createElement('div');
+      trigger.style.fontSize = '0.8rem';
+      trigger.style.color = '#10b981';
+      trigger.style.marginBottom = '0.5rem';
+      trigger.innerHTML = `<span style="color:#6b7280">Trigger Regex:</span> <code>${agent.trigger}</code>`;
+
+      const desc = document.createElement('p');
+      desc.style.margin = '0 0 1rem 0';
+      desc.style.fontSize = '0.9rem';
+      desc.style.color = '#d1d5db';
+      desc.innerText = agent.description;
+
+      const instTitle = document.createElement('strong');
+      instTitle.style.display = 'block';
+      instTitle.style.fontSize = '0.8rem';
+      instTitle.style.color = '#6b7280';
+      instTitle.style.marginBottom = '0.25rem';
+      instTitle.innerText = 'Instructions:';
+
+      const instructions = document.createElement('pre');
+      instructions.style.margin = '0';
+      instructions.style.fontSize = '0.8rem';
+      instructions.style.color = '#9ca3af';
+      instructions.style.whiteSpace = 'pre-wrap';
+      instructions.style.background = 'rgba(0,0,0,0.15)';
+      instructions.style.padding = '0.5rem';
+      instructions.style.borderRadius = '4px';
+      instructions.innerText = agent.instructions;
+
+      card.appendChild(title);
+      card.appendChild(trigger);
+      card.appendChild(desc);
+      card.appendChild(instTitle);
+      card.appendChild(instructions);
+
+      container.appendChild(card);
+    });
+  }
+
+  // Initial and Periodic Updates
+  fetchState();
+  fetchLogs();
+  fetchLearnings();
+  fetchSkills();
+  fetchResearch();
+  fetchDGMArchive();
+  fetchEventStream();
+  fetchMicroagents();
+
+  setInterval(fetchState, 2000);
+  setInterval(fetchLogs, 3000);
+  setInterval(fetchLearnings, 10000); // Learnings update less frequently
+  setInterval(fetchSkills, 10000);    // Skills update less frequently
+  setInterval(fetchResearch, 3000);
+  setInterval(fetchDGMArchive, 5000);
+  setInterval(fetchEventStream, 2000);
+  setInterval(fetchMicroagents, 10000);
+});