HuggingClaw-User-Deployment

Sleeping

App Files Files Community

Claude Code Claude Opus 4.6 commited on Mar 16

Commit

774e62c

1 Parent(s): f5415ca

Claude Code: Add /api/health endpoint with uptime and active_agents, and footer status polling in dashboard

Browse files

Files changed (2) hide show

app.py +9 -0
frontend/agent-dashboard.html +112 -0

app.py CHANGED Viewed

@@ -56,6 +56,15 @@ def get_app():
         """Health check endpoint for Docker logs."""
         return {"status": "ok"}
     @app.exception_handler(Exception)
     async def global_exception_handler(request: Request, exc: Exception):
         """Global exception handler to catch all errors."""

         """Health check endpoint for Docker logs."""
         return {"status": "ok"}
+    @app.get("/api/health")
+    async def api_health():
+        """Health check API endpoint with uptime and agent info."""
+        return {
+            "status": "ok",
+            "uptime_seconds": time.time() - START_TIME,
+            "active_agents": 1  # Cain is always active
+        }
     @app.exception_handler(Exception)
     async def global_exception_handler(request: Request, exc: Exception):
         """Global exception handler to catch all errors."""

frontend/agent-dashboard.html CHANGED Viewed

@@ -409,6 +409,53 @@
             font-size: 14px;
             color: #666;
         }
     </style>
 </head>
 <body>
@@ -560,6 +607,15 @@
     <!-- Transfer notification container -->
     <div id="notificationContainer"></div>
     <script>
         // Configuration
         const API_BASE = window.location.origin;
@@ -579,8 +635,10 @@
             setInterval(updateStats, 1000);
             setInterval(fetchResources, RESOURCE_INTERVAL);
             setInterval(fetchDebugHealth, 5000); // Poll /debug/health every 5 seconds
             fetchResources(); // Initial fetch
             fetchDebugHealth(); // Initial health fetch
         });
         // Connect to event bus
@@ -889,6 +947,60 @@
             if (uptimeEl) uptimeEl.textContent = statusCode;
             if (memoryEl) memoryEl.textContent = statusCode;
         }
     </script>
 </body>
 </html>

             font-size: 14px;
             color: #666;
         }
+        /* Footer Styles */
+        .footer {
+            background: white;
+            border-radius: 12px;
+            padding: 16px 24px;
+            margin-top: 20px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 16px;
+        }
+        .footer-status {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .footer-status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #28a745;
+            animation: pulse 2s infinite;
+        }
+        .footer-status-dot.offline {
+            background: #dc3545;
+        }
+        .footer-status-dot.warning {
+            background: #ffc107;
+        }
+        .footer-info {
+            font-size: 14px;
+            color: #666;
+        }
+        .footer-uptime {
+            font-size: 13px;
+            color: #999;
+            font-family: monospace;
+        }
     </style>
 </head>
 <body>
     <!-- Transfer notification container -->
     <div id="notificationContainer"></div>
+    <!-- Footer -->
+    <div class="footer">
+        <div class="footer-status">
+            <div class="footer-status-dot" id="footerStatusDot"></div>
+            <span class="footer-info" id="footerStatusText">Connecting...</span>
+        </div>
+        <div class="footer-uptime" id="footerUptime">Uptime: --</div>
+    </div>
     <script>
         // Configuration
         const API_BASE = window.location.origin;
             setInterval(updateStats, 1000);
             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
             if (uptimeEl) uptimeEl.textContent = statusCode;
             if (memoryEl) memoryEl.textContent = statusCode;
         }
+        // ========== API Health Monitoring ==========
+        // Fetch API health status
+        async function fetchApiHealth() {
+            try {
+                const response = await fetch(`${API_BASE}/api/health`);
+                if (response.ok) {
+                    const data = await response.json();
+                    updateFooterStatus(true, data);
+                } else {
+                    updateFooterStatus(false, null);
+                }
+            } catch (error) {
+                console.error('Error fetching API health:', error);
+                updateFooterStatus(false, null);
+            }
+        }
+        // Update footer status display
+        function updateFooterStatus(isOnline, data) {
+            const dot = document.getElementById('footerStatusDot');
+            const text = document.getElementById('footerStatusText');
+            const uptimeEl = document.getElementById('footerUptime');
+            if (isOnline && data && data.status === 'ok') {
+                dot.className = 'footer-status-dot';
+                text.textContent = `Online (${data.active_agents || 1} agent${(data.active_agents || 1) !== 1 ? 's' : ''} active)`;
+                if (data.uptime_seconds !== undefined) {
+                    uptimeEl.textContent = `Uptime: ${formatUptime(data.uptime_seconds)}`;
+                }
+            } else {
+                dot.className = 'footer-status-dot offline';
+                text.textContent = 'Offline - Reconnecting...';
+            }
+        }
+        // Format uptime seconds to readable string
+        function formatUptime(seconds) {
+            const days = Math.floor(seconds / 86400);
+            const hours = Math.floor((seconds % 86400) / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            const secs = Math.floor(seconds % 60);
+            if (days > 0) {
+                return `${days}d ${hours}h ${minutes}m`;
+            } else if (hours > 0) {
+                return `${hours}h ${minutes}m ${secs}s`;
+            } else if (minutes > 0) {
+                return `${minutes}m ${secs}s`;
+            } else {
+                return `${secs}s`;
+            }
+        }
     </script>
 </body>
 </html>