mindforge-cc 11.9.2 → 11.9.3

package/bin/dashboard/frontend/index.html

@@ -154,17 +154,17 @@
       <div class="logo-text">MindForge <span style="color:var(--muted); font-weight:400">Dash</span></div>
       <div id="project-name" class="badge">PROJ: UNSET</div>
     </div>
-    <div id="connection-status" class="badge badge-live">● Connected</div>
+    <div id="connection-status" class="badge">● Connecting…</div>
   </header>
 
   <nav>
-    <button class="tab active" onclick="showPage('activity')">Activity</button>
-    <button class="tab" onclick="showPage('metrics')">Metrics</button>
-    <button class="tab" onclick="showPage('approvals')">Approvals</button>
-    <button class="tab" onclick="showPage('temporal')">Temporal</button>
-    <button class="tab" onclick="showPage('revops')">RevOps</button>
-    <button class="tab" onclick="showPage('memory')">Memory</button>
-    <button class="tab" onclick="showPage('team')">Team</button>
+    <button class="tab active" data-page="activity">Activity</button>
+    <button class="tab" data-page="metrics">Metrics</button>
+    <button class="tab" data-page="approvals">Approvals</button>
+    <button class="tab" data-page="temporal">Temporal</button>
+    <button class="tab" data-page="revops">RevOps</button>
+    <button class="tab" data-page="memory">Memory</button>
+    <button class="tab" data-page="team">Team</button>
   </nav>
 
   <main>
@@ -179,7 +179,7 @@
       <div class="card">
         <div class="card-header">
           <div class="card-title">Live Audit Feed</div>
-          <div style="font-size:10px; color:var(--muted)">SSE STREAMING ACTIVE</div>
+          <div style="font-size:10px; color:var(--muted)">SSE: connecting…</div>
         </div>
         <div id="audit-feed"></div>
       </div>
@@ -224,7 +224,7 @@
         </div>
         <div class="card-body">
           <div style="margin-bottom: 24px;">
-            <input type="range" id="temporal-slider" style="width:100%; height:8px; accent-color:var(--accent);" min="0" max="0" step="1" oninput="onSliderChange(this.value)">
+            <input type="range" id="temporal-slider" style="width:100%; height:8px; accent-color:var(--accent);" min="0" max="0" step="1">
             <div style="display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-mono); font-size:10px; color:var(--muted)">
               <span id="slider-start">Past</span>
               <span id="slider-current">Select Snapshot</span>
@@ -247,7 +247,7 @@
                   <label style="display:block; font-size:11px; margin-bottom:8px; color:var(--muted); text-transform:uppercase;">Steering Instruction:</label>
                   <textarea id="steering-input" class="confirm-input" style="height:120px; resize:none;" placeholder="e.g. 'Rewind to step 2 and ignore the legacy auth module...'"></textarea>
                 </div>
-                <button id="inject-btn" class="btn btn-approve" style="width:100%; justify-content:center;" onclick="injectHindsight()" disabled>Rewind & Inject Fix</button>
+                <button id="inject-btn" class="btn btn-approve" style="width:100%; justify-content:center;" data-action="inject-hindsight" disabled>Rewind & Inject Fix</button>
               </div>
             </div>
           </div>
@@ -364,405 +364,12 @@
         <input type="text" id="confirm-input" class="confirm-input" placeholder="e.g. 1.1-auth_fix">
       </div>
       <div style="display:flex; gap:12px; justify-content:flex-end;">
-        <button class="btn" style="background:var(--border)" onclick="closeConfirm()">Cancel</button>
+        <button class="btn" style="background:var(--border)" data-action="close-confirm">Cancel</button>
         <button id="confirm-btn" class="btn btn-approve">Proceed</button>
       </div>
     </div>
   </div>
 
-  <script>
-    // ── State ─────────────────────────────────────────────────────────────────
-    let currentApprovals = [];
-    let state = { costs: [], quality: [] };
-    let currentTier3Approval = null;
-
-    function showPage(id) {
-      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
-      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-      document.getElementById(id).classList.add('active');
-      const tab = Array.from(document.querySelectorAll('.tab')).find(t => t.innerText.toLowerCase() === id.toLowerCase());
-      if (tab) tab.classList.add('active');
-      
-      if (id === 'metrics') drawCharts();
-    }
-
-    function escapeHtml(str) {
-      if (!str) return '';
-      return String(str).replace(/[&<>"']/g, m => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[m]));
-    }
-
-    // ── WebSocket / SSE ───────────────────────────────────────────────────────
-    const es = new EventSource('/events');
-    const feed = document.getElementById('audit-feed');
-
-    es.onopen = () => {
-      const el = document.getElementById('connection-status');
-      el.textContent = '● Connected';
-      el.style.color = 'var(--green)';
-      refreshData();
-    };
-
-    es.onerror = () => {
-      const el = document.getElementById('connection-status');
-      el.textContent = '● Disconnected';
-      el.style.color = 'var(--red)';
-    };
-
-    es.addEventListener('status:update', (e) => {
-      const data = JSON.parse(e.data);
-      updateStatusUI(data);
-    });
-
-    es.addEventListener('audit:new', (e) => {
-      const data = JSON.parse(e.data);
-      appendAuditEvent(data);
-    });
-
-    es.addEventListener('approval:new', (e) => {
-      const data = JSON.parse(e.data);
-      refreshApprovals();
-    });
-
-    // ── API Interactions ──────────────────────────────────────────────────────
-    async function refreshData() {
-      try {
-        const res = await fetch('/api/metrics');
-        const data = await res.json();
-        state = data;
-        updateMetricsUI(data);
-        refreshCosts();
-        refreshApprovals();
-        refreshMemory();
-        refreshTeam();
-        refreshRevOps();
-        if (document.getElementById('temporal').classList.contains('active')) {
-            refreshTemporal();
-        }
-      } catch(e) { console.error('Refresh fail', e); }
-    }
-
-    async function refreshRevOps() {
-      try {
-        const res = await fetch('/api/revops/overview');
-        const data = await res.json();
-        if (data.success) {
-            updateRevOpsUI(data);
-        }
-      } catch(e) {}
-    }
-
-    let temporalHistory = [];
-    async function refreshTemporal() {
-      try {
-        const res = await fetch('/api/temporal/history');
-        const data = await res.json();
-        temporalHistory = data;
-        renderTemporalTimeline();
-      } catch(e) {}
-    }
-
-    async function refreshApprovals() {
-      try {
-        const res = await fetch('/api/approvals');
-        const data = await res.json();
-        currentApprovals = data;
-        renderApprovals();
-      } catch(e) {}
-    }
-
-    async function refreshMemory() {
-      try {
-        const res = await fetch('/api/memory');
-        const data = await res.json();
-        document.getElementById('memory-map').innerHTML = `<pre>${escapeHtml(JSON.stringify(data.graph || {}, null, 2))}</pre>`;
-        document.getElementById('memory-stats-list').innerHTML = `<div class="stat-value">${data.count || 0} <span class="stat-unit">Items Indexed</span></div>`;
-      } catch(e) {}
-    }
-
-    async function refreshTeam() {
-      try {
-        const res = await fetch('/api/team');
-        const data = await res.json();
-        renderTeam(data);
-      } catch(e) {}
-    }
-
-    async function decide(id, decision) {
-      const approval = currentApprovals.find(a => a.id === id);
-      if (!approval) return;
-
-      if (decision === 'approve' && approval.tier === 3) {
-        currentTier3Approval = approval;
-        const expected = `${approval.phase}-${approval.plan}`;
-        document.getElementById('confirm-title').innerText = 'Critical Tier 3 Approval';
-        document.getElementById('confirm-desc').innerText = `Danger: You are approving a sensitive change (Phase ${approval.phase}, Plan ${approval.plan}). This requires manual confirmation.`;
-        document.getElementById('tier3-input-group').style.display = 'block';
-        document.getElementById('confirm-input').value = '';
-        document.getElementById('confirm-overlay').style.display = 'flex';
-        document.getElementById('confirm-btn').onclick = () => submitDecision(id, decision, document.getElementById('confirm-input').value);
-        return;
-      }
-
-      submitDecision(id, decision);
-    }
-
-    async function submitDecision(id, decision, confirmationId = null) {
-      try {
-        const res = await fetch(`/api/approve/${id}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            decision,
-            comment: 'Decided via Dashboard',
-            approver: 'admin-dash',
-            confirmation_id: confirmationId
-          })
-        });
-        const result = await res.json();
-        if (!result.success) alert(result.error);
-        closeConfirm();
-        refreshApprovals();
-      } catch(e) { alert('Action failed'); }
-    }
-
-    function closeConfirm() {
-      document.getElementById('confirm-overlay').style.display = 'none';
-    }
-
-    // ── UI Rendering ──────────────────────────────────────────────────────────
-    function updateStatusUI(data) {
-      document.getElementById('project-name').textContent = `PROJ: ${data.project_name || 'UNSET'}`;
-      document.getElementById('stat-phase').textContent = data.phase || '0';
-      document.getElementById('stat-status').textContent = (data.auto_status || 'IDLE').toUpperCase();
-      document.getElementById('stat-tasks').textContent = `${data.tasks_completed || 0}/${data.tasks_total || 0}`;
-      document.getElementById('stat-elapsed').textContent = data.elapsed_ms ? (data.elapsed_ms / 1000).toFixed(1) + 's' : '0s';
-    }
-
-    function updateMetricsUI(data) {
-      // /api/metrics returns { sessions, avg_quality, avg_cost_usd, ... } — see
-      // bin/dashboard/metrics-aggregator.js getMetrics(). It has never returned
-      // `costs` or `quality`, so these tiles used to render "$0.0000" and "NaN".
-      document.getElementById('stat-avg-quality').textContent = (data.avg_quality ?? 0).toFixed(1);
-    }
-
-    // Cumulative spend comes from the usage ledger via /api/costs (already wired
-    // in bin/dashboard/api-router.js but never fetched until now).
-    async function refreshCosts() {
-      try {
-        const res = await fetch('/api/costs?window=7');
-        // sendServerError returns a well-formed JSON body, so res.json() would
-        // SUCCEED on a 500 and `total_usd ?? 0` would render "$0.00" — an outage
-        // and genuine zero spend look identical under the "Cost (7d)" label.
-        if (!res.ok) throw new Error(`/api/costs ${res.status}`);
-        const data = await res.json();
-        document.getElementById('stat-total-cost').textContent = `${(data.total_usd ?? 0).toFixed(2)}`;
-      } catch (e) { console.error('Cost refresh failed', e); }
-    }
-
-    function appendAuditEvent(data) {
-      const div = document.createElement('div');
-      div.className = `event type-${data.event}`;
-      const time = new Date(data.timestamp).toLocaleTimeString([], { hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit' });
-      div.innerHTML = `<span class="event-time">${time}</span><span class="event-type type-${data.event}">${data.event}</span><span class="event-msg">${escapeHtml(data.message || data.task || '')}</span>`;
-      feed.prepend(div);
-      if (feed.children.length > 200) feed.lastChild.remove();
-    }
-
-    function renderApprovals() {
-      const list = document.getElementById('approval-list');
-      if (currentApprovals.length === 0) {
-        list.innerHTML = '<div style="text-align:center; padding: 40px; color:var(--muted)">No pending approvals</div>';
-        return;
-      }
-
-      list.innerHTML = currentApprovals.map(a => `
-        <div class="card approval-card">
-          <div class="card-body">
-            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;">
-              <div>
-                <span class="tier-badge tier-${a.tier}">Tier ${a.tier}</span>
-                <span style="font-weight:700">Phase ${a.phase} | ${a.plan}</span>
-              </div>
-              <div style="font-size:11px; color:var(--muted)">Expires: ${new Date(a.expires_at).toLocaleTimeString()}</div>
-            </div>
-            <p style="margin-bottom:16px; font-size:12px; line-height:1.4">${escapeHtml(a.summary || 'No summary provided')}</p>
-            <div style="display:flex; gap:12px;">
-              <button class="btn btn-approve" onclick="decide('${a.id}', 'approve')">Approve Selection</button>
-              <button class="btn btn-reject" onclick="decide('${a.id}', 'reject')">Reject</button>
-            </div>
-          </div>
-        </div>
-      `).join('');
-    }
-
-    function renderTeam(data) {
-      const list = document.getElementById('team-activity-list');
-      if (!data || data.length === 0) {
-        list.innerHTML = '<div style="text-align:center; padding: 40px; color:var(--muted)">No recent team activity</div>';
-        return;
-      }
-      list.innerHTML = data.map(ev => `
-        <div class="activity-row">
-          <div class="avatar">${(ev.user || '?').charAt(0).toUpperCase()}</div>
-          <div class="activity-info">
-            <div><span class="activity-user">${escapeHtml(ev.user)}</span> <span class="activity-action">${escapeHtml(ev.action)}</span></div>
-            <div class="activity-time">${new Date(ev.timestamp).toLocaleString()}</div>
-          </div>
-        </div>
-      `).join('');
-    }
-
-    // ── Simple Charts Implementation ──────────────────────────────────────────
-    function drawCharts() {
-      drawCanvasChart('chart-costs', state.costs?.map(c => c.cost) || [], varColor('--accent'));
-      drawCanvasChart('chart-quality', state.quality?.map(q => q.score) || [], varColor('--green'), 100);
-    }
-
-    function varColor(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
-
-    function drawCanvasChart(id, data, color, maxVal = null) {
-      const canvas = document.getElementById(id);
-      if (!canvas) return;
-      const ctx = canvas.getContext('2d');
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = canvas.offsetWidth * dpr;
-      canvas.height = canvas.offsetHeight * dpr;
-      ctx.scale(dpr, dpr);
-
-      const w = canvas.offsetWidth;
-      const h = canvas.offsetHeight;
-      ctx.clearRect(0,0,w,h);
-      
-      if (data.length < 2) return;
-      
-      const max = maxVal || Math.max(...data) * 1.2 || 1;
-      const step = w / (data.length - 1);
-      
-      ctx.beginPath();
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 2;
-      ctx.lineJoin = 'round';
-      
-      data.forEach((val, i) => {
-        const x = i * step;
-        const y = h - (val / max) * h;
-        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
-      });
-      ctx.stroke();
-
-      // Area fill
-      ctx.lineTo(w, h); ctx.lineTo(0, h); ctx.closePath();
-      ctx.fillStyle = color.replace(')', ', 0.1)').replace('rgb', 'rgba');
-      ctx.fill();
-    }
-
-    // ── Temporal Steering Logic ────────────────────────────────────────────────
-    function renderTemporalTimeline() {
-      const slider = document.getElementById('temporal-slider');
-      const count = document.getElementById('timeline-count');
-      
-      if (temporalHistory.length === 0) {
-        slider.max = 0;
-        count.textContent = '0 Snapshots';
-        return;
-      }
-
-      slider.max = temporalHistory.length - 1;
-      count.textContent = `${temporalHistory.length} Snapshots`;
-      
-      // Default to latest if not touching
-      if (slider.value == 0 && temporalHistory.length > 0) {
-          onSliderChange(temporalHistory.length - 1);
-          slider.value = temporalHistory.length - 1;
-      }
-    }
-
-    let selectedSnapshot = null;
-    async function onSliderChange(index) {
-      const snap = temporalHistory[temporalHistory.length - 1 - index]; // reversed for chronological range
-      if (!snap) return;
-
-      selectedSnapshot = snap;
-      document.getElementById('slider-current').textContent = `Point: ${snap.id.slice(0, 8)} (${new Date(snap.timestamp).toLocaleTimeString()})`;
-      document.getElementById('inject-btn').disabled = false;
-
-      // Fetch sample audit file for this snapshot
-      try {
-        const res = await fetch(`/api/temporal/snapshot/${snap.id}/AUDIT.jsonl`);
-        const content = await res.text();
-        document.getElementById('snapshot-viewer').textContent = content || 'No audit log available for this point.';
-      } catch(e) {
-        document.getElementById('snapshot-viewer').textContent = 'Failed to load snapshot details.';
-      }
-    }
-
-    async function injectHindsight() {
-      if (!selectedSnapshot) return;
-      const instruction = document.getElementById('steering-input').value;
-      if (!instruction) {
-          alert('Please provide a steering instruction for the hindsight injection.');
-          return;
-      }
-
-      const btn = document.getElementById('inject-btn');
-      btn.disabled = true;
-      btn.textContent = 'Injecting Steering Vector...';
-
-      try {
-        const res = await fetch('/api/temporal/inject', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            auditId: selectedSnapshot.id,
-            fixDescription: instruction
-          })
-        });
-        const result = await res.json();
-        if (result.success) {
-            alert('Hindsight Injection Successful. Agent state rolled back and awaiting re-optimization.');
-            showPage('activity');
-        } else {
-            alert('Injection failed: ' + result.error);
-        }
-      } catch(e) {
-          alert('Failed to connect to temporal engine.');
-      } finally {
-          btn.disabled = false;
-          btn.textContent = 'Rewind & Inject Fix';
-      }
-    }
-
-    // ── RevOps Logic ─────────────────────────────────────────────────────────
-    function updateRevOpsUI(data) {
-        const { roi, velocity, debt } = data;
-        
-        document.getElementById('rev-roi').textContent = `${roi.roi_percentage}%`;
-        document.getElementById('rev-net').textContent = `$${roi.net_value}`;
-        document.getElementById('rev-velocity').innerHTML = `${velocity.avg_seconds_per_task} <span class="stat-unit">sec/task</span>`;
-        document.getElementById('rev-eta').textContent = `ETA: ${velocity.eta}`;
-        document.getElementById('rev-health').textContent = debt.security_health_score;
-        
-        const healthStatus = document.getElementById('rev-health-status');
-        healthStatus.textContent = `STATUS: ${debt.governance_status.toUpperCase()}`;
-        healthStatus.style.background = debt.security_health_score > 80 ? 'rgba(63, 185, 80, 0.15)' : 'rgba(248, 81, 73, 0.15)';
-        healthStatus.style.color = debt.security_health_score > 80 ? 'var(--green)' : 'var(--red)';
-
-        document.getElementById('roi-hours').textContent = `${roi.hours_saved}h`;
-        document.getElementById('roi-gross').textContent = `$${roi.gross_value}`;
-        document.getElementById('roi-burn').textContent = `$${roi.token_cost}`;
-        document.getElementById('roi-total-pct').textContent = `${roi.roi_percentage}%`;
-
-        document.getElementById('debt-critical').textContent = debt.critical_findings;
-        document.getElementById('debt-tier3').textContent = debt.tier3_approvals;
-        const riskBadge = document.getElementById('debt-risk');
-        riskBadge.textContent = debt.debt_level.toUpperCase();
-        riskBadge.className = `badge ${debt.debt_level === 'Minimal' ? 'badge-live' : ''}`;
-        if (debt.debt_level !== 'Minimal') riskBadge.style.color = 'var(--yellow)';
-    }
-
-    window.onresize = drawCharts;
-    setInterval(refreshData, 10000); // More frequent refresh for live dashboard
-    showPage('activity');
-  </script>
+  <script src="app.js" defer></script>
 </body>
 </html>

package/bin/dashboard/metrics-aggregator.js

@@ -183,36 +183,60 @@ function getMetrics() {
 }
 
 // ── Approvals ─────────────────────────────────────────────────────────────────
+/**
+ * Read the approval records that actually exist, with their verified integrity.
+ *
+ * This replaces a read path that could never return anything. It filtered
+ * `f.startsWith('APPROVAL-')` while the only producer — bin/governance/approve.js — writes
+ * `approval-<id>.json` in lower case, and String.prototype.startsWith is case-sensitive on every
+ * platform (macOS's case-insensitive filesystem affects fs.open, not this comparison). It then
+ * categorised on a `status` field no producer has ever written, so any record that HAD been
+ * found would have fallen into `pending` regardless of what it said.
+ *
+ * The categories are now derived from verification rather than from a self-declared status:
+ * a record either verifies against the release being built, or it is stale, or it is corrupt.
+ * There is deliberately no `pending` category — nothing in MindForge creates a pending approval
+ * REQUEST; approve.js records an already-made decision. A category with no producer is exactly
+ * the kind of empty promise this pass exists to remove.
+ *
+ * Returns an ARRAY, because the previous object shape was also incompatible with its only
+ * consumer: the dashboard did `currentApprovals.length` and `.map()` on it, which on an object
+ * yields undefined and then a TypeError.
+ */
 function getApprovals() {
   const paths = getPaths();
-  if (!fs.existsSync(paths.approvals)) return { pending: [], approved: [], rejected: [], expired: [] };
+  if (!fs.existsSync(paths.approvals)) return [];
 
-  const now   = Date.now();
+  const { verifyRecord } = require('../governance/approval-record');
+  let currentVersion = null;
+  try {
+    currentVersion = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'package.json'), 'utf8')).version;
+  } catch { /* version binding is skipped if the manifest is unreadable */ }
+
+  const now = Date.now();
   const files = fs.readdirSync(paths.approvals)
-    .filter(f => f.startsWith('APPROVAL-') && f.endsWith('.json'))
+    .filter(f => f.endsWith('.json'))
     .sort();
 
-  const pending  = [];
-  const approved = [];
-  const rejected = [];
-  const expired  = [];
-
+  const out = [];
   for (const f of files) {
-    try {
-      const data    = JSON.parse(fs.readFileSync(path.join(paths.approvals, f), 'utf8'));
-      const expiry  = data.expires_at ? new Date(data.expires_at).getTime() : Infinity;
-      const hoursRemaining = expiry === Infinity ? null : (expiry - now) / 3_600_000;
-
-      const enriched = { ...data, hours_remaining: hoursRemaining };
-
-      if (data.status === 'approved')        approved.push(enriched);
-      else if (data.status === 'rejected')   rejected.push(enriched);
-      else if (expiry < now)                 expired.push({ ...enriched, status: 'expired' });
-      else                                   pending.push(enriched);
-    } catch { /* skip corrupt files */ }
+    let data;
+    try { data = JSON.parse(fs.readFileSync(path.join(paths.approvals, f), 'utf8')); }
+    catch (e) {
+      out.push({ file: f, state: 'corrupt', problems: [`not valid JSON: ${e.message}`] });
+      continue;
+    }
+    const v = verifyRecord(data, { currentVersion, now: new Date(now) });
+    const expiry = data.expires_at ? new Date(data.expires_at).getTime() : null;
+    out.push({
+      ...data,
+      file: f,
+      state: v.ok ? 'valid' : (v.stale ? 'stale' : 'corrupt'),
+      problems: v.problems,
+      hours_remaining: expiry === null ? null : (expiry - now) / 3_600_000,
+    });
   }
-
-  return { pending, approved, rejected, expired };
+  return out;
 }
 
 // ── Team activity ─────────────────────────────────────────────────────────────