HuggingClaw-User-Deployment

Sleeping

Claude Code Claude Opus 4.6 commited on Mar 17

Commit

059331e

1 Parent(s): 91954c3

Claude Code: Add Cain state polling to agent dashboard

- Add /api/state polling every 2 seconds
- Display Cain's health with visual indicator (green/yellow/red dot)
- Show current stage, state, and detail information
- Add last updated timestamp

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

Files changed (1) hide show

frontend/agent-dashboard.html +185 -0

frontend/agent-dashboard.html CHANGED Viewed

@@ -456,6 +456,95 @@
             color: #999;
             font-family: monospace;
         }
     </style>
 </head>
 <body>
@@ -477,6 +566,33 @@
                     <span>Last update: <strong id="lastUpdate">Never</strong></span>
                 </div>
             </div>
         </div>
         <!-- Main Content -->
@@ -636,9 +752,11 @@
             setInterval(fetchResources, RESOURCE_INTERVAL);
             setInterval(fetchDebugHealth, 5000); // Poll /debug/health every 5 seconds
             setInterval(fetchApiHealth, 3000); // Poll /api/health every 3 seconds
             fetchResources(); // Initial fetch
             fetchDebugHealth(); // Initial health fetch
             fetchApiHealth(); // Initial API health fetch
         });
         // Connect to event bus
@@ -1001,6 +1119,73 @@
                 return `${secs}s`;
             }
         }
     </script>
 </body>
 </html>

             color: #999;
             font-family: monospace;
         }
+        /* Cain State Status */
+        .cain-state-panel {
+            background: white;
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 16px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .cain-state-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+        .cain-state-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #333;
+        }
+        .cain-health-dot {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        .cain-health-dot.healthy {
+            background: #28a745;
+            box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
+        }
+        .cain-health-dot.degraded {
+            background: #ffc107;
+            box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
+        }
+        .cain-health-dot.unhealthy {
+            background: #dc3545;
+            box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
+        }
+        .cain-state-info {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 12px;
+        }
+        .cain-state-item {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 12px;
+        }
+        .cain-state-label {
+            font-size: 11px;
+            color: #666;
+            text-transform: uppercase;
+            margin-bottom: 4px;
+        }
+        .cain-state-value {
+            font-size: 14px;
+            font-weight: bold;
+            color: #333;
+        }
+        .cain-state-value.stage {
+            color: #667eea;
+        }
+        .cain-state-value.state {
+            color: #388e3c;
+        }
+        .cain-state-value.detail {
+            color: #666;
+            font-weight: normal;
+        }
+        .cain-last-updated {
+            font-size: 11px;
+            color: #999;
+            margin-top: 8px;
+            text-align: right;
+        }
     </style>
 </head>
 <body>
                     <span>Last update: <strong id="lastUpdate">Never</strong></span>
                 </div>
             </div>
+            <!-- Cain State Panel -->
+            <div class="cain-state-panel">
+                <div class="cain-state-header">
+                    <div class="cain-health-dot" id="cainHealthDot"></div>
+                    <span class="cain-state-title">Cain Status</span>
+                </div>
+                <div class="cain-state-info">
+                    <div class="cain-state-item">
+                        <div class="cain-state-label">Health</div>
+                        <div class="cain-state-value" id="cainHealth">Checking...</div>
+                    </div>
+                    <div class="cain-state-item">
+                        <div class="cain-state-label">Stage</div>
+                        <div class="cain-state-value stage" id="cainStage">-</div>
+                    </div>
+                    <div class="cain-state-item">
+                        <div class="cain-state-label">State</div>
+                        <div class="cain-state-value state" id="cainState">-</div>
+                    </div>
+                    <div class="cain-state-item">
+                        <div class="cain-state-label">Detail</div>
+                        <div class="cain-state-value detail" id="cainDetail">-</div>
+                    </div>
+                </div>
+                <div class="cain-last-updated" id="cainLastUpdated">Last updated: Never</div>
+            </div>
         </div>
         <!-- Main Content -->
             setInterval(fetchResources, RESOURCE_INTERVAL);
             setInterval(fetchDebugHealth, 5000); // Poll /debug/health every 5 seconds
             setInterval(fetchApiHealth, 3000); // Poll /api/health every 3 seconds
+            setInterval(fetchCainState, 2000); // Poll /api/state every 2 seconds
             fetchResources(); // Initial fetch
             fetchDebugHealth(); // Initial health fetch
             fetchApiHealth(); // Initial API health fetch
+            fetchCainState(); // Initial state fetch
         });
         // Connect to event bus
                 return `${secs}s`;
             }
         }
+        // ========== Cain State Monitoring ==========
+        // Fetch Cain state from /api/state
+        async function fetchCainState() {
+            try {
+                const response = await fetch(`${API_BASE}/api/state`);
+                if (response.ok) {
+                    const data = await response.json();
+                    updateCainState(data);
+                } else {
+                    console.error('Failed to fetch Cain state:', response.status, response.statusText);
+                    setCainStateError('API Error');
+                }
+            } catch (error) {
+                console.error('Error fetching Cain state:', error);
+                setCainStateError('Network Error');
+            }
+        }
+        // Update Cain state display
+        function updateCainState(data) {
+            const healthDot = document.getElementById('cainHealthDot');
+            const healthEl = document.getElementById('cainHealth');
+            const stageEl = document.getElementById('cainStage');
+            const stateEl = document.getElementById('cainState');
+            const detailEl = document.getElementById('cainDetail');
+            const lastUpdatedEl = document.getElementById('cainLastUpdated');
+            // Update health indicator
+            const health = (data.health || 'unknown').toLowerCase();
+            healthDot.className = 'cain-health-dot';
+            if (health === 'healthy' || health === 'ok' || health === 'good') {
+                healthDot.classList.add('healthy');
+                healthEl.textContent = 'Healthy';
+                healthEl.style.color = '#28a745';
+            } else if (health === 'degraded' || health === 'warning' || health === 'fair') {
+                healthDot.classList.add('degraded');
+                healthEl.textContent = 'Degraded';
+                healthEl.style.color = '#f57c00';
+            } else {
+                healthDot.classList.add('unhealthy');
+                healthEl.textContent = health === 'unknown' ? 'Unknown' : 'Unhealthy';
+                healthEl.style.color = health === 'unknown' ? '#999' : '#dc3545';
+            }
+            // Update stage, state, and detail
+            stageEl.textContent = data.stage || data.current_stage || '-';
+            stateEl.textContent = data.state || 'idle';
+            detailEl.textContent = data.detail || data.message || 'No details';
+            // Update last updated timestamp
+            const now = new Date();
+            lastUpdatedEl.textContent = `Last updated: ${now.toLocaleTimeString()}`;
+        }
+        // Set error state for Cain state
+        function setCainStateError(errorMsg) {
+            const healthDot = document.getElementById('cainHealthDot');
+            const healthEl = document.getElementById('cainHealth');
+            const lastUpdatedEl = document.getElementById('cainLastUpdated');
+            healthDot.className = 'cain-health-dot unhealthy';
+            healthEl.textContent = 'Error';
+            healthEl.style.color = '#dc3545';
+            lastUpdatedEl.textContent = `Error: ${errorMsg} (${new Date().toLocaleTimeString()})`;
+        }
     </script>
 </body>
 </html>