Claude Code: Add API debug block to agent dashboard - inject verified runtime health data (stage/state/health) directly into DOM to resolve Silent Cain issue

frontend/agent-dashboard.html

@@ -592,6 +592,13 @@
                     </div>
                 </div>
                 <div class="cain-last-updated" id="cainLastUpdated">Last updated: Never</div>
+                <!-- API Debug Block - Verified Runtime Health Data -->
+                <div id="api-debug" style="margin-top: 12px; padding: 10px; background: #f8f9fa; border-radius: 6px; font-size: 11px; font-family: monospace; border: 1px solid #e0e0e0;">
+                    <div style="color: #666; margin-bottom: 4px;">API Ground Truth:</div>
+                    <div id="debug-stage" style="color: #667eea;">stage: <span>-</span></div>
+                    <div id="debug-state" style="color: #28a745;">state: <span>-</span></div>
+                    <div id="debug-health" style="color: #6c757d;">health: <span>-</span></div>
+                </div>
             </div>
         </div>
 
@@ -1177,8 +1184,13 @@
             const detailEl = document.getElementById('cainDetail');
             const lastUpdatedEl = document.getElementById('cainLastUpdated');
 
+            // Extract verified values from API response
+            const apiStage = data.stage || data.current_stage || 'UNKNOWN';
+            const apiState = data.state || 'idle';
+            const apiHealth = data.health || 'unknown';
+
             // Update health indicator
-            const health = (data.health || 'unknown').toLowerCase();
+            const health = apiHealth.toLowerCase();
             healthDot.className = 'cain-health-dot';
             if (health === 'healthy' || health === 'ok' || health === 'good') {
                 healthDot.classList.add('healthy');
@@ -1195,10 +1207,18 @@
             }
 
             // Update stage, state, and detail
-            stageEl.textContent = data.stage || data.current_stage || '-';
-            stateEl.textContent = data.state || 'idle';
+            stageEl.textContent = apiStage;
+            stateEl.textContent = apiState;
             detailEl.textContent = data.detail || data.message || 'No details';
 
+            // Update API Debug Block with verified ground truth
+            const debugStage = document.getElementById('debug-stage');
+            const debugState = document.getElementById('debug-state');
+            const debugHealth = document.getElementById('debug-health');
+            if (debugStage) debugStage.querySelector('span').textContent = apiStage;
+            if (debugState) debugState.querySelector('span').textContent = apiState;
+            if (debugHealth) debugHealth.querySelector('span').textContent = apiHealth;
+
             // Update last updated timestamp
             const now = new Date();
             lastUpdatedEl.textContent = `Last updated: ${now.toLocaleTimeString()}`;