Claude Code: Add fixed status indicator to dashboard header

- Add #status-indicator element with fixed positioning (top-right)
- Style with monospace font, padding, border-radius
- Update indicator text/color based on health: HEALTHY (green), UNHEALTHY (red)
- Initial state shows "CONNECTING..."

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

frontend/agent-dashboard.html

@@ -43,6 +43,27 @@
             font-size: 14px;
         }
 
+        #status-indicator {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background-color: #333;
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 12px;
+            z-index: 1000;
+        }
+
+        #status-indicator.healthy {
+            background-color: #28a745;
+        }
+
+        #status-indicator.unhealthy {
+            background-color: #dc3545;
+        }
+
         .status-bar {
             display: flex;
             gap: 20px;
@@ -551,6 +572,7 @@
     <div class="dashboard-container">
         <!-- Header -->
         <div class="header">
+            <div id="status-indicator">CONNECTING...</div>
             <h1>Agent Thoughts Dashboard</h1>
             <div class="subtitle">Real-time visualization of agent cognitive processes</div>
 
@@ -1178,6 +1200,7 @@
             const stateEl = document.getElementById('cainState');
             const detailEl = document.getElementById('cainDetail');
             const lastUpdatedEl = document.getElementById('cainLastUpdated');
+            const statusIndicator = document.getElementById('status-indicator');
 
             // Extract verified values from API response
             const apiStage = data.stage || data.current_stage || 'UNKNOWN';
@@ -1191,14 +1214,29 @@
                 healthDot.classList.add('healthy');
                 healthEl.textContent = 'Healthy';
                 healthEl.style.color = '#28a745';
+                // Update status indicator
+                if (statusIndicator) {
+                    statusIndicator.textContent = 'HEALTHY';
+                    statusIndicator.className = 'healthy';
+                }
             } else if (health === 'degraded' || health === 'warning' || health === 'fair') {
                 healthDot.classList.add('degraded');
                 healthEl.textContent = 'Degraded';
                 healthEl.style.color = '#f57c00';
+                // Update status indicator
+                if (statusIndicator) {
+                    statusIndicator.textContent = 'DEGRADED';
+                    statusIndicator.className = '';
+                }
             } else {
                 healthDot.classList.add('unhealthy');
                 healthEl.textContent = health === 'unknown' ? 'Unknown' : 'Unhealthy';
                 healthEl.style.color = health === 'unknown' ? '#999' : '#dc3545';
+                // Update status indicator
+                if (statusIndicator) {
+                    statusIndicator.textContent = health === 'unknown' ? 'UNKNOWN' : 'UNHEALTHY';
+                    statusIndicator.className = health === 'unknown' ? '' : 'unhealthy';
+                }
             }
 
             // Update stage, state, and detail