HuggingClaw-Cain

Sleeping

Claude Code Claude Opus 4.6 commited on Mar 17

Commit

50b0ecc

1 Parent(s): fcece3a

Claude Code: Add diagnostic heartbeat panel to agent dashboard

Inject simple HTML status panel that polls /status every 5 seconds and
displays brain_pid and health fields. Uses vanilla JS fetch() API with
auto-stop polling if DOM element is removed. Styled with pixel-art border
to match existing theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Files changed (1) hide show

frontend/agent-dashboard.html +173 -0

frontend/agent-dashboard.html CHANGED Viewed

@@ -566,6 +566,102 @@
             margin-top: 8px;
             text-align: right;
         }
     </style>
 </head>
 <body>
@@ -622,6 +718,24 @@
                     <div id="debug-health" style="color: #6c757d;">health: <span>-</span></div>
                 </div>
             </div>
         </div>
         <!-- Main Content -->
@@ -780,6 +894,64 @@
         let eventCount = 0;
         let lastResources = { adam: 100, eve: 100 };
         // Initialize with error boundary
         document.addEventListener('DOMContentLoaded', () => {
             try {
@@ -790,6 +962,7 @@
                 setInterval(fetchDebugHealth, 5000);
                 setInterval(fetchApiHealth, 3000);
                 setInterval(fetchCainState, 2000);
                 fetchResources();
                 fetchDebugHealth();
                 fetchApiHealth();

             margin-top: 8px;
             text-align: right;
         }
+        /* Diagnostic Heartbeat Panel - Pixel Art Border */
+        .diagnostic-heartbeat {
+            background: white;
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 16px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            position: relative;
+            border: 3px solid #333;
+            image-rendering: pixelated;
+        }
+        .diagnostic-heartbeat::before {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            right: -3px;
+            bottom: -3px;
+            border: 3px solid #667eea;
+            border-radius: 12px;
+            z-index: -1;
+            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+        }
+        .diagnostic-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 12px;
+            font-size: 14px;
+            font-weight: bold;
+            color: #333;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .heartbeat-indicator {
+            width: 12px;
+            height: 12px;
+            background: #28a745;
+            border-radius: 2px;
+            animation: heartbeat-pulse 1s infinite;
+        }
+        @keyframes heartbeat-pulse {
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.2); opacity: 0.8; }
+        }
+        .diagnostic-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+        }
+        .diagnostic-item {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        .diagnostic-label {
+            color: #666;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .diagnostic-value {
+            color: #333;
+            font-weight: bold;
+            background: #f8f9fa;
+            padding: 6px 8px;
+            border-radius: 4px;
+            border: 1px solid #e0e0e0;
+        }
+        .diagnostic-value.loading {
+            color: #999;
+        }
+        .diagnostic-value.healthy {
+            color: #28a745;
+            background: #e8f5e9;
+            border-color: #c8e6c9;
+        }
+        .diagnostic-value.unhealthy {
+            color: #dc3545;
+            background: #ffebee;
+            border-color: #ffcdd2;
+        }
     </style>
 </head>
 <body>
                     <div id="debug-health" style="color: #6c757d;">health: <span>-</span></div>
                 </div>
             </div>
+            <!-- Diagnostic Heartbeat Panel -->
+            <div class="diagnostic-heartbeat" id="diagnosticHeartbeat">
+                <div class="diagnostic-header">
+                    <div class="heartbeat-indicator"></div>
+                    <span>System Heartbeat</span>
+                </div>
+                <div class="diagnostic-grid">
+                    <div class="diagnostic-item">
+                        <div class="diagnostic-label">Brain PID</div>
+                        <div class="diagnostic-value loading" id="brainPid">Loading...</div>
+                    </div>
+                    <div class="diagnostic-item">
+                        <div class="diagnostic-label">Health</div>
+                        <div class="diagnostic-value loading" id="brainHealth">Loading...</div>
+                    </div>
+                </div>
+            </div>
         </div>
         <!-- Main Content -->
         let eventCount = 0;
         let lastResources = { adam: 100, eve: 100 };
+        // ========== Diagnostic Heartbeat Monitoring ==========
+        let diagnosticInterval = null;
+        async function fetchDiagnosticHeartbeat() {
+            const panel = document.getElementById('diagnosticHeartbeat');
+            if (!panel) {
+                // Auto-stop polling if DOM element is removed
+                if (diagnosticInterval) {
+                    clearInterval(diagnosticInterval);
+                    diagnosticInterval = null;
+                }
+                return;
+            }
+            try {
+                const response = await fetch(`${CONFIG.apiBase}/status`);
+                if (response.ok) {
+                    const data = await response.json();
+                    updateDiagnosticHeartbeat(data);
+                } else {
+                    console.warn('Diagnostic heartbeat endpoint returned:', response.status);
+                }
+            } catch (error) {
+                console.error('Error fetching diagnostic heartbeat:', error);
+            }
+        }
+        function updateDiagnosticHeartbeat(data) {
+            const brainPidEl = document.getElementById('brainPid');
+            const brainHealthEl = document.getElementById('brainHealth');
+            if (brainPidEl) {
+                brainPidEl.textContent = data.brain_pid || 'N/A';
+                brainPidEl.classList.remove('loading');
+            }
+            if (brainHealthEl) {
+                const health = data.health || 'unknown';
+                brainHealthEl.textContent = health;
+                brainHealthEl.classList.remove('loading');
+                brainHealthEl.classList.remove('healthy', 'unhealthy');
+                if (health === 'healthy' || health === 'ok') {
+                    brainHealthEl.classList.add('healthy');
+                } else if (health === 'unhealthy' || health === 'error') {
+                    brainHealthEl.classList.add('unhealthy');
+                }
+            }
+        }
+        // Initialize diagnostic heartbeat polling
+        function startDiagnosticHeartbeat() {
+            // Initial fetch
+            fetchDiagnosticHeartbeat();
+            // Poll every 5 seconds
+            diagnosticInterval = setInterval(fetchDiagnosticHeartbeat, 5000);
+        }
         // Initialize with error boundary
         document.addEventListener('DOMContentLoaded', () => {
             try {
                 setInterval(fetchDebugHealth, 5000);
                 setInterval(fetchApiHealth, 3000);
                 setInterval(fetchCainState, 2000);
+                startDiagnosticHeartbeat();
                 fetchResources();
                 fetchDebugHealth();
                 fetchApiHealth();