reflectt-node 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reflectt-node",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Coordinate your AI agent team. Shared tasks, memory, reflections, and presence. Self-host for free.",
   "main": "dist/index.js",
   "type": "module",

package/public/dashboard.js

@@ -2219,6 +2219,70 @@ async function batchApproveHighConfidence() {
   } catch (e) { console.error('Batch approve failed:', e); }
 }
 
+// ---- Agent Action Approval Queue (review_requested events from agent runs) ----
+let agentApprovalData = null;
+
+async function loadAgentApprovals() {
+  try {
+    const res = await fetch(BASE + '/approval-queue?category=review');
+    agentApprovalData = await res.json();
+    renderAgentApprovals();
+  } catch (e) {
+    const body = document.getElementById('agent-approval-body');
+    if (body) body.innerHTML = '<div class="empty">Failed to load agent approvals</div>';
+  }
+}
+
+function renderAgentApprovals() {
+  const body = document.getElementById('agent-approval-body');
+  const count = document.getElementById('agent-approval-count');
+  if (!body) return;
+
+  const items = (agentApprovalData && agentApprovalData.items) ? agentApprovalData.items : [];
+  if (count) count.textContent = items.length > 0 ? items.length + ' pending' : '';
+
+  if (items.length === 0) {
+    body.innerHTML = '<div class="empty" style="text-align:center;padding:20px;color:var(--text-dim)">✓ No pending agent approvals.</div>';
+    return;
+  }
+
+  let html = '';
+  items.forEach(function(item) {
+    const urgencyColor = item.urgency === 'critical' ? '#ef4444' : item.urgency === 'high' ? '#f59e0b' : 'var(--text-dim)';
+    const title = (item.title || item.event && item.event.payload && item.event.payload.action_required || 'Agent action pending').substring(0, 80);
+    const desc = item.description || (item.event && item.event.payload && item.event.payload.description) || '';
+    const agentId = item.agentId || '?';
+    const runId = item.runId || '';
+    html += '<div class="approval-card" style="border-left:3px solid ' + urgencyColor + '">';
+    html += '<div class="approval-header">';
+    html += '<span style="color:' + urgencyColor + '">⚡</span> ';
+    html += '<span class="approval-title">' + esc(title) + '</span>';
+    html += '<span class="assignee-tag" style="margin-left:8px">@' + esc(agentId) + '</span>';
+    if (item.urgency) html += '<span style="font-size:10px;color:' + urgencyColor + ';margin-left:6px">' + esc(item.urgency) + '</span>';
+    html += '</div>';
+    if (desc) html += '<div class="approval-meta" style="font-size:12px;margin-top:4px">' + esc(desc.substring(0, 120)) + '</div>';
+    if (runId) html += '<div class="approval-meta" style="font-size:10px;color:var(--text-dim)">Run: ' + esc(runId) + '</div>';
+    html += '<div class="approval-actions">';
+    html += '<button class="btn-reject" onclick="decideAgentApproval(\'' + esc(item.id) + '\',\'reject\')">✗ Reject</button>';
+    html += '<button class="btn-approve" onclick="decideAgentApproval(\'' + esc(item.id) + '\',\'approve\')">✓ Approve</button>';
+    html += '</div>';
+    html += '</div>';
+  });
+
+  body.innerHTML = html;
+}
+
+async function decideAgentApproval(eventId, decision) {
+  try {
+    await fetch(BASE + '/approval-queue/' + encodeURIComponent(eventId) + '/decide', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ decision: decision, actor: 'dashboard' })
+    });
+    await loadAgentApprovals();
+  } catch (e) { console.error('Agent approval decision failed:', e); }
+}
+
 // ---- Routing Policy Editor ----
 function toggleRoutingPolicy() {
   routingPolicyVisible = !routingPolicyVisible;
@@ -2394,7 +2458,7 @@ async function refresh() {
   if (refreshCount === 1 || forceFull) await refreshAgentRegistry();
   await loadTasks(forceFull);
   renderReviewQueue();
-  await Promise.all([loadPresence(), loadChat(forceFull), loadActivity(forceFull), loadResearch(), loadSharedArtifacts(), loadHealth(), loadReleaseStatus(forceFull), loadBuildInfo(), loadRuntimeTruthCard(), loadApprovalQueue(), loadFeedback(), loadPauseStatus(), loadIntensityControl(), loadPolls()]);
+  await Promise.all([loadPresence(), loadChat(forceFull), loadActivity(forceFull), loadResearch(), loadSharedArtifacts(), loadHealth(), loadReleaseStatus(forceFull), loadBuildInfo(), loadRuntimeTruthCard(), loadApprovalQueue(), loadAgentApprovals(), loadFeedback(), loadPauseStatus(), loadIntensityControl(), loadPolls()]);
   await renderPromotionSSOT();
 }
 

package/public/docs.md

@@ -878,6 +878,10 @@ Set via `reflectionNudge` in policy config:
 | GET | `/usage/caps` | List active spend caps with current utilization status. |
 | POST | `/usage/caps` | Create spend cap. Body: `{ scope: "global"\|"agent"\|"team", scope_id?, period: "daily"\|"weekly"\|"monthly", limit_usd, action: "warn"\|"throttle"\|"block" }`. |
 | DELETE | `/usage/caps/:id` | Delete a spend cap. |
+| GET | `/agents/:agentId/spend` | Get current spend totals for a specific agent. Returns `{ agentId, totalCost, inputTokens, outputTokens, periodStart }`. |
+| POST | `/agents/:agentId/enforce-cost` | Trigger cost enforcement check for agent. Evaluates active caps and applies configured action (warn/throttle/block). Body: `{}`. |
+| POST | `/usage/record` | Record a single usage event. Body: `{ agentId, inputTokens, outputTokens, cost?, model?, taskId? }`. |
+| POST | `/usage/purge` | Purge old usage records. Body: `{ maxAgeDays? }` (default 90). |
 | GET | `/usage/routing-suggestions` | Smart routing savings suggestions (which low-stakes categories could use cheaper models). Query: `since`. |
 | GET | `/costs` | Cost dashboard — aggregated spend for COO/PM monitoring. Query: `days` (1–90, default 7). Returns: `daily_by_model` (spend per model per day), `daily_totals` (per-day rolled-up for threshold alerting), `avg_cost_by_lane` (avg cost per closed task by `qa_bundle.lane`, 30-day floor), `avg_cost_by_agent` (avg cost per closed task per agent + `top_model`, 30-day floor), `top_tasks_by_cost` (top 20 most expensive tasks in window), `summary` (total tokens + cost), `lane_agent_window_days` (actual window used for lane/agent averages). |
 

package/public/presence-loop-demo.html

@@ -0,0 +1,473 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Presence Loop — Live Demo</title>
+<style>
+  :root {
+    --bg: #0a0a0f;
+    --surface: #13131a;
+    --border: #1e1e2e;
+    --text: #e2e2f0;
+    --text-dim: #6b6b8a;
+    --accent: #7c3aed;
+    --accent-glow: rgba(124,58,237,0.15);
+    --green: #10b981;
+    --amber: #f59e0b;
+    --red: #ef4444;
+    --blue: #3b82f6;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 20px; }
+
+  /* ── Ambient state ── */
+  #ambient {
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    transition: opacity 0.8s ease;
+  }
+  .pulse-ring {
+    width: 80px; height: 80px; border-radius: 50%;
+    border: 2px solid var(--accent);
+    animation: pulse 3s ease-in-out infinite;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .pulse-ring::after {
+    content: ''; display: block;
+    width: 20px; height: 20px; border-radius: 50%;
+    background: var(--accent); opacity: 0.6;
+    animation: pulse-inner 3s ease-in-out infinite;
+  }
+  @keyframes pulse {
+    0%,100% { transform: scale(1); opacity: 0.6; }
+    50% { transform: scale(1.1); opacity: 1; }
+  }
+  @keyframes pulse-inner {
+    0%,100% { transform: scale(1); }
+    50% { transform: scale(1.3); }
+  }
+  .ambient-label { margin-top: 20px; font-size: 13px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }
+  .ambient-agent { margin-top: 8px; font-size: 11px; color: var(--text-dim); opacity: 0.6; }
+
+  /* ── Session surface ── */
+  #session {
+    width: 100%; max-width: 680px;
+    opacity: 0; transform: translateY(20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+    pointer-events: none;
+  }
+  #session.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
+
+  .session-header {
+    display: flex; align-items: center; gap: 12px;
+    padding: 16px 20px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px 12px 0 0;
+  }
+  .agent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: blink 2s ease-in-out infinite; }
+  @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+  .session-title { font-weight: 600; font-size: 15px; flex: 1; }
+  .session-state { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
+
+  .run-stream {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-top: none;
+    padding: 16px 20px;
+    min-height: 120px;
+    max-height: 240px;
+    overflow-y: auto;
+    font-size: 13px;
+    line-height: 1.7;
+  }
+  .run-line { padding: 2px 0; color: var(--text-dim); }
+  .run-line.active { color: var(--text); }
+  .run-line .ts { color: var(--accent); opacity: 0.5; margin-right: 8px; font-size: 11px; }
+
+  /* ── Approval surface ── */
+  #approval-surface {
+    background: var(--surface);
+    border: 1px solid var(--amber);
+    border-top: none;
+    padding: 20px;
+    transition: all 0.4s ease;
+  }
+  #approval-surface.hidden { display: none; }
+  .approval-header-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
+  .approval-icon { font-size: 24px; }
+  .approval-title { font-size: 15px; font-weight: 600; }
+  .approval-desc { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
+  .urgency-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; background: var(--amber); color: #000; margin-left: 8px; }
+  .approval-actions { display: flex; gap: 12px; margin-top: 16px; }
+  .btn-approve {
+    flex: 1; padding: 12px; border-radius: 8px;
+    background: var(--green); color: #000; border: none;
+    font-weight: 700; font-size: 14px; cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-approve:hover { opacity: 0.85; }
+  .btn-reject {
+    padding: 12px 20px; border-radius: 8px;
+    background: none; color: var(--red); border: 1px solid var(--red);
+    font-weight: 600; font-size: 14px; cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-reject:hover { opacity: 0.7; }
+  .btn-approve:disabled, .btn-reject:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  /* ── Result ── */
+  #result-surface {
+    background: var(--surface);
+    border: 1px solid var(--green);
+    border-top: none;
+    padding: 20px;
+    display: none;
+  }
+  #result-surface.visible { display: block; }
+  .result-header { color: var(--green); font-weight: 600; margin-bottom: 8px; }
+  .result-body { font-size: 13px; color: var(--text-dim); }
+
+  /* ── Collapse / footer ── */
+  .session-footer {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-top: none;
+    border-radius: 0 0 12px 12px;
+    padding: 10px 20px;
+    display: flex; align-items: center; justify-content: space-between;
+    font-size: 12px; color: var(--text-dim);
+  }
+  .btn-collapse {
+    background: none; border: 1px solid var(--border); color: var(--text-dim);
+    padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 11px;
+  }
+  .btn-collapse:hover { border-color: var(--accent); color: var(--text); }
+
+  /* ── Loop controls ── */
+  #controls {
+    margin-top: 40px; width: 100%; max-width: 680px;
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 12px; padding: 20px;
+  }
+  .controls-title { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
+  .btn-start {
+    width: 100%; padding: 14px; border-radius: 8px;
+    background: var(--accent); color: #fff; border: none;
+    font-weight: 700; font-size: 15px; cursor: pointer;
+    transition: opacity 0.2s;
+  }
+  .btn-start:hover { opacity: 0.85; }
+  .btn-start:disabled { opacity: 0.4; cursor: not-allowed; }
+  .status-line { margin-top: 12px; font-size: 12px; color: var(--text-dim); text-align: center; min-height: 20px; }
+
+  /* ── Step indicators ── */
+  .steps { display: flex; gap: 8px; margin-top: 16px; }
+  .step {
+    flex: 1; padding: 8px 4px; border-radius: 6px;
+    border: 1px solid var(--border); text-align: center;
+    font-size: 10px; color: var(--text-dim); transition: all 0.3s;
+  }
+  .step.active { border-color: var(--accent); background: var(--accent-glow); color: var(--text); }
+  .step.done { border-color: var(--green); color: var(--green); }
+
+  #log { margin-top: 8px; font-size: 11px; color: var(--text-dim); max-height: 60px; overflow-y: auto; }
+</style>
+</head>
+<body>
+
+<!-- Ambient state -->
+<div id="ambient">
+  <div class="pulse-ring"></div>
+  <div class="ambient-label">Ambient</div>
+  <div class="ambient-agent">kai · ready</div>
+</div>
+
+<!-- Session surface (hidden until run starts) -->
+<div id="session">
+  <div class="session-header">
+    <div class="agent-dot" id="agent-dot"></div>
+    <div class="session-title" id="session-title">Agent run in progress</div>
+    <div class="session-state" id="session-state">working</div>
+  </div>
+  <div class="run-stream" id="run-stream">
+    <div class="run-line" style="color:var(--text-dim)">Waiting for run...</div>
+  </div>
+  <div id="approval-surface" class="hidden">
+    <div class="approval-header-row">
+      <div class="approval-icon">⚡</div>
+      <div>
+        <div class="approval-title" id="approval-title">Action requires approval <span class="urgency-badge" id="urgency-badge">critical</span></div>
+        <div class="approval-desc" id="approval-desc">Agent is requesting your decision to continue.</div>
+      </div>
+    </div>
+    <div class="approval-actions">
+      <button class="btn-reject" id="btn-reject" onclick="decide('reject')">✗ Reject</button>
+      <button class="btn-approve" id="btn-approve" onclick="decide('approve')">✓ Approve</button>
+    </div>
+  </div>
+  <div id="result-surface">
+    <div class="result-header">✓ Approved — result</div>
+    <div class="result-body" id="result-body">Run completed successfully.</div>
+  </div>
+  <div class="session-footer">
+    <span id="run-id-label" style="font-family:monospace"></span>
+    <button class="btn-collapse" onclick="collapse()">Collapse to ambient</button>
+  </div>
+</div>
+
+<!-- Controls -->
+<div id="controls">
+  <div class="controls-title">Presence Loop — Live Demo</div>
+  <button class="btn-start" id="btn-start" onclick="startLoop()">▶ Start Loop</button>
+  <div class="steps">
+    <div class="step" id="step-0">Ambient</div>
+    <div class="step" id="step-1">Run</div>
+    <div class="step" id="step-2">Approval</div>
+    <div class="step" id="step-3">Result</div>
+    <div class="step" id="step-4">Collapse</div>
+  </div>
+  <div class="status-line" id="status-line">Click Start to run the loop end-to-end</div>
+  <div id="log"></div>
+</div>
+
+<script>
+const BASE = window.location.origin;
+let currentRunId = null;
+let currentApprovalId = null;
+let sseSource = null;
+
+function log(msg) {
+  const el = document.getElementById('log');
+  el.innerHTML = msg;
+}
+
+function setStatus(msg) {
+  document.getElementById('status-line').textContent = msg;
+}
+
+function setStep(n) {
+  for (let i = 0; i <= 4; i++) {
+    const el = document.getElementById('step-' + i);
+    el.className = 'step' + (i < n ? ' done' : i === n ? ' active' : '');
+  }
+}
+
+function addStreamLine(text, active) {
+  const stream = document.getElementById('run-stream');
+  const line = document.createElement('div');
+  line.className = 'run-line' + (active ? ' active' : '');
+  const ts = new Date().toLocaleTimeString('en-US', {hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit'});
+  line.innerHTML = '<span class="ts">' + ts + '</span>' + text;
+  if (stream.firstChild && stream.firstChild.textContent.includes('Waiting')) {
+    stream.innerHTML = '';
+  }
+  stream.appendChild(line);
+  stream.scrollTop = stream.scrollHeight;
+}
+
+async function startLoop() {
+  document.getElementById('btn-start').disabled = true;
+  document.getElementById('ambient').style.opacity = '0';
+  document.getElementById('ambient').style.pointerEvents = 'none';
+
+  setStep(0);
+  setStatus('Starting run...');
+
+  // Step 1: Create run
+  try {
+    const res = await fetch(BASE + '/agents/kai/runs', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({objective: 'Presence loop demo: ambient → run → approve → result → collapse'})
+    });
+    const run = await res.json();
+    currentRunId = run.id;
+    if (!currentRunId) throw new Error('No run ID returned: ' + JSON.stringify(run));
+  } catch(e) {
+    setStatus('Failed to create run: ' + e.message);
+    document.getElementById('btn-start').disabled = false;
+    document.getElementById('ambient').style.opacity = '1';
+    document.getElementById('ambient').style.pointerEvents = 'all';
+    return;
+  }
+
+  document.getElementById('run-id-label').textContent = currentRunId;
+  document.getElementById('session').classList.add('visible');
+  document.getElementById('session-title').textContent = 'Presence loop demo';
+  document.getElementById('session-state').textContent = 'working';
+  setStep(1);
+  setStatus('Run started — streaming events...');
+  addStreamLine('Run created: ' + currentRunId, true);
+
+  // Subscribe to SSE stream
+  if (sseSource) { sseSource.close(); }
+  sseSource = new EventSource(BASE + '/agents/kai/stream');
+  sseSource.onmessage = function(e) {
+    try {
+      const evt = JSON.parse(e.data);
+      if (evt.eventType === 'review_requested' && evt.runId === currentRunId) {
+        showApproval(evt);
+      } else if ((evt.eventType === 'review_approved' || evt.eventType === 'review_rejected') && evt.runId === currentRunId) {
+        handleDecisionEvent(evt);
+      }
+    } catch(_) {}
+  };
+
+  // Step 2: Post a step event, then request approval
+  await delay(600);
+  addStreamLine('Analyzing task requirements...', true);
+  await delay(700);
+  addStreamLine('Preparing deployment payload...', true);
+  await delay(500);
+
+  // Post review_requested
+  try {
+    const res = await fetch(BASE + '/agents/kai/events', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({
+        eventType: 'review_requested',
+        runId: currentRunId,
+        payload: {
+          title: 'Deploy presence loop update to production',
+          action_required: 'Approve deployment to proceed',
+          urgency: 'high',
+          owner: 'kai',
+          description: 'Ready to deploy. This will update the live node. Approve to continue, reject to cancel.',
+          rationale: {
+            choice: 'Requesting human gate before production deploy',
+            considered: ['auto-deploy', 'defer'],
+            constraint: 'Production changes require explicit approval'
+          }
+        }
+      })
+    });
+    const evt = await res.json();
+    currentApprovalId = evt.id;
+    addStreamLine('⚡ Approval requested — waiting for human decision', true);
+    setStep(2);
+    setStatus('Waiting for your approval...');
+    showApproval({
+      id: currentApprovalId,
+      payload: {
+        title: 'Deploy presence loop update to production',
+        description: 'Ready to deploy. This will update the live node. Approve to continue, reject to cancel.',
+        urgency: 'high'
+      }
+    });
+  } catch(e) {
+    addStreamLine('Failed to post approval request: ' + e.message, false);
+    setStatus('Error: ' + e.message);
+  }
+}
+
+function showApproval(evt) {
+  const payload = evt.payload || {};
+  document.getElementById('approval-title').innerHTML =
+    (payload.title || 'Action requires approval') +
+    ' <span class="urgency-badge">' + (payload.urgency || 'high') + '</span>';
+  document.getElementById('approval-desc').textContent =
+    payload.description || payload.action_required || 'Agent is requesting your decision.';
+  document.getElementById('approval-surface').classList.remove('hidden');
+  document.getElementById('session-state').textContent = 'waiting for approval';
+  if (!currentApprovalId && evt.id) currentApprovalId = evt.id;
+}
+
+async function decide(decision) {
+  if (!currentApprovalId) { setStatus('No approval event ID — run the loop first'); return; }
+  document.getElementById('btn-approve').disabled = true;
+  document.getElementById('btn-reject').disabled = true;
+  setStatus('Submitting decision...');
+
+  try {
+    const res = await fetch(BASE + '/approval-queue/' + encodeURIComponent(currentApprovalId) + '/decide', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ decision: decision, actor: 'human' })
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Decision failed');
+
+    document.getElementById('approval-surface').classList.add('hidden');
+
+    if (decision === 'approve') {
+      addStreamLine('✓ Approved by human — continuing...', true);
+      await delay(400);
+      addStreamLine('Deploying update...', true);
+      await delay(600);
+      addStreamLine('Deploy complete. Node healthy.', true);
+      showResult('Deployment approved and complete. Node confirmed healthy at /health.');
+      setStep(3);
+      setStatus('Approved — result visible');
+    } else {
+      addStreamLine('✗ Rejected — run cancelled', false);
+      showResult('Run rejected by human. No changes deployed.');
+      document.getElementById('result-surface').style.borderColor = 'var(--red)';
+      document.querySelector('#result-surface .result-header').style.color = 'var(--red)';
+      document.querySelector('#result-surface .result-header').textContent = '✗ Rejected';
+      setStep(3);
+      setStatus('Rejected — run cancelled');
+    }
+  } catch(e) {
+    setStatus('Decision error: ' + e.message);
+    document.getElementById('btn-approve').disabled = false;
+    document.getElementById('btn-reject').disabled = false;
+  }
+}
+
+function handleDecisionEvent(evt) {
+  // SSE confirmation — already handled by direct button flow
+}
+
+function showResult(text) {
+  document.getElementById('result-body').textContent = text;
+  document.getElementById('result-surface').classList.add('visible');
+  document.getElementById('session-state').textContent = 'complete';
+  const dot = document.getElementById('agent-dot');
+  dot.style.background = 'var(--green)';
+  dot.style.animation = 'none';
+}
+
+function collapse() {
+  setStep(4);
+  setStatus('Collapsing to ambient...');
+  const session = document.getElementById('session');
+  session.style.opacity = '0';
+  session.style.transform = 'translateY(20px)';
+
+  setTimeout(function() {
+    session.classList.remove('visible');
+    session.style.opacity = '';
+    session.style.transform = '';
+
+    // Reset for next run
+    document.getElementById('run-stream').innerHTML = '<div class="run-line" style="color:var(--text-dim)">Waiting for run...</div>';
+    document.getElementById('approval-surface').classList.add('hidden');
+    document.getElementById('result-surface').classList.remove('visible');
+    document.getElementById('result-surface').style.borderColor = '';
+    document.querySelector('#result-surface .result-header').style.color = '';
+    document.querySelector('#result-surface .result-header').textContent = '✓ Approved — result';
+    document.getElementById('btn-approve').disabled = false;
+    document.getElementById('btn-reject').disabled = false;
+    document.getElementById('session-state').textContent = 'working';
+    const dot = document.getElementById('agent-dot');
+    dot.style.background = '';
+    dot.style.animation = '';
+    currentRunId = null;
+    currentApprovalId = null;
+    if (sseSource) { sseSource.close(); sseSource = null; }
+
+    document.getElementById('ambient').style.opacity = '1';
+    document.getElementById('ambient').style.pointerEvents = 'all';
+    document.getElementById('btn-start').disabled = false;
+    setStep(0);
+    setStatus('Back to ambient. Loop complete. ✓');
+  }, 800);
+}
+
+function delay(ms) { return new Promise(function(r) { setTimeout(r, ms); }); }
+</script>
+</body>
+</html>