From 81714b1f4c6cfe7ab618427a561083ce0f60a840 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Tue, 3 Mar 2026 05:53:39 +0100
Subject: [PATCH] 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     | 46 +++++++++++++++++++++++++++++++++++
 wwwroot/index.html            |  4 +++
 wwwroot/js/pages/dashboard.js | 26 ++++++++++++++++++++
 3 files changed, 76 insertions(+)

diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css
index c8e4bd8..9afe910 100644
--- a/wwwroot/css/dashboard.css
+++ b/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);
 }
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 636cae9..2229aac 100644
--- a/wwwroot/index.html
+++ b/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>
diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js
index 6302df6..1a7d463 100644
--- a/wwwroot/js/pages/dashboard.js
+++ b/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);
 }