Dashboard: Claude API Status-Bar

- Zeigt Anthropic API Status aus status.claude.com an
- Nur sichtbar bei aktiven Incidents (minor/major/critical)
- Farbcodierte Indikatoren (gelb=warning, rot=danger)
- Stille Fehlerbehandlung bei nicht erreichbarem Status-Endpoint

wwwroot/css/dashboard.css

@@ -1,3 +1,49 @@
+/* Status Bar */
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--badge-spacing);
+  padding: var(--box-padding);
+  margin-block: var(--badge-spacing) var(--box-spacing);
+  border-radius: var(--border-radius);
+}
+
+.status-bar[hidden] {
+  display: none;
+}
+
+.status-indicator {
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-bar.status-none .status-indicator {
+  background: var(--secondary);
+}
+
+.status-bar.status-minor .status-indicator {
+  background: var(--warning);
+}
+
+.status-bar.status-major .status-indicator,
+.status-bar.status-critical .status-indicator {
+  background: var(--dangerous);
+}
+
+.status-bar.status-minor,
+.status-bar.status-major,
+.status-bar.status-critical {
+  background: rgb(from var(--warning) r g b / .1);
+}
+
+.status-bar.status-major,
+.status-bar.status-critical {
+  background: rgb(from var(--dangerous) r g b / .1);
+}
+
 .dashboard .page-content {
   padding: var(--page-padding);
 }

wwwroot/index.html

@@ -45,6 +45,10 @@
 
 <template id="tpl-dashboard">
   <div class="page dashboard">
+    <div id="claudeStatusBar" class="status-bar" hidden>
+      <span class="status-indicator"></span>
+      <span class="status-text"></span>
+    </div>
     <header>
       <button class="back-btn icon-btn" disabled></button>
       <h1 class="dashboard-title">// gott</h1>

wwwroot/js/pages/dashboard.js

@@ -2,6 +2,9 @@
 
 registerPage('dashboard', {
   async init() {
+    // Claude Status laden
+    loadClaudeStatus();
+
     // Einstellungen-Link
     document.getElementById('dashboardSettingsLink').addEventListener('click', (e) => {
       e.preventDefault();
@@ -209,6 +212,29 @@ registerPage('dashboard', {
   }
 });
 
+async function loadClaudeStatus() {
+  const statusBar = document.getElementById('claudeStatusBar');
+  if (!statusBar) return;
+
+  try {
+    const res = await fetch('https://status.claude.com/api/v2/status.json');
+    if (!res.ok) return;
+    const data = await res.json();
+
+    const indicator = data.status?.indicator || 'none';
+    const description = data.status?.description || '';
+
+    // Nur anzeigen wenn es kein "none" ist (alles OK)
+    if (indicator === 'none') return;
+
+    statusBar.classList.add(`status-${indicator}`);
+    statusBar.querySelector('.status-text').textContent = description;
+    statusBar.hidden = false;
+  } catch {
+    // Status-Abruf fehlgeschlagen – still ignorieren
+  }
+}
+
 function closeAllCardMenus() {
   document.querySelectorAll('.card-menu-dropdown').forEach(d => d.hidden = true);
 }