feat(ui): V2-3 (Teil 2) — das UI haengt am Ereignis-Strom, Taktgeber raus

WAS: EventStreamProvider haelt EINE SSE-Verbindung fuer die ganze
Anwendung. Dashboard, Log-Kasten, Log-Seite, Laufwerksliste und
Worker-Liste beziehen ihren Zustand daraus. Sieben von neun setInterval
sind weg.

GEMESSEN AN DEN TAKTGEBERN, je offenem Tab:
  Dashboard      5 Endpunkte / 4 s   75/min  ->  0
  Log-Kasten     2 Endpunkte / 5 s   24/min  ->  0
  Laufwerke      1 Endpunkt  / 5 s   12/min  ->  0
  Log-Seite      1 Endpunkt  /10 s    6/min  ->  0 (+1 Abruf beim Oeffnen)
  Worker-Liste   1 Endpunkt  /15 s    4/min  ->  0 (+1 Abruf beim Oeffnen)
                                     ------
                                     121/min ->  ~2 einmalige Abrufe

Zwei Taktgeber bleiben bewusst: FirstRunWizard (laeuft nur VOR der
Einrichtung) und RipTargetModal (nur solange der Dialog offen ist).

DIE REGEL IST UMGEZOGEN, NICHT VERSCHWUNDEN: Ein Abriss ist keine
Aussage ueber die Welt. Der Provider BEHAELT bei einem Fehler den letzten
Stand und setzt nur `verbunden` auf false; es wird nie eine Liste geleert.
Jede Komponente uebernimmt einen Wert nur, wenn er wirklich da ist —
`devices === null` heisst "konnte nicht nachsehen", nicht "keine
Laufwerke". Das war der Fehler hinter "wird oft neu geladen".

EIN PLACEBO WENIGER: Oben rechts stand ein fest verdrahtetes "ONLINE" mit
pulsierendem Punkt — es leuchtete gruen, auch wenn die API tot war. Jetzt
zeigt es LIVE oder VERBINDUNG WEG, und im Tooltip steht, wann die letzte
Meldung kam.

DER SERVER SCHIEBT JETZT AUCH DEN SERVER-ZUSTAND: Neuer Ereignistyp
system.status (Hardware, Worker, Ablageziele) im 15-Sekunden-Takt des
Waechters — EINMAL im Server statt 15/min je Tab. Nur mitgeschickte
Schluessel werden uebernommen; ein fehlender heisst "behalte deinen Stand".

DAZU EIN FORMATFEHLER GEFUNDEN UND BEHOBEN: /logs bildet ts -> timestamp
ab, mein Snapshot lieferte die rohe DB-Zeile. Das UI haette "Invalid Date"
gezeigt — und zwar NUR im Live-Betrieb, nicht beim manuellen Neuladen.
Jetzt gibt es _log_zeile() einmal, benutzt von beiden.

UND EINEN ZWEITEN: system_lesen lief per asyncio.get_event_loop() in einem
Worker-Thread — dort ist das NICHT die laufende Schleife. Die Coroutine
waere nie gelaufen. Die Schleife wird jetzt im Startup festgehalten.

GEMESSEN: ruff sauber, 378 Tests + 3 uebersprungen, `npm run build`
durch (1650 Module). Der Live-Beweis steht noch aus — er kommt mit dem
Deploy.

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

docker/ui/src/App.tsx

@@ -6,10 +6,45 @@ import LogsPage from './pages/Logs'
 import AnleitungPage from './pages/Anleitung'
 import FirstRunWizard from './components/FirstRunWizard'
 import { api } from './lib/api'
+import { EventStreamProvider, useStrom } from './lib/useEventStream'
 
 type Page = 'dashboard' | 'anleitung' | 'logs' | 'settings'
 
-export default function App() {
+/**
+ * Zeigt, ob der Live-Strom steht.
+ *
+ * Hier stand bis V2-3 ein fest verdrahtetes „ONLINE" mit pulsierendem Punkt —
+ * es leuchtete auch dann gruen, wenn die API tot war. Genau die Sorte
+ * Placebo-Anzeige, die in Etappe 19 schon einmal aufgeraeumt wurde
+ * („Fortschritt log, Auswurf tat nichts, Encoder wurden behauptet statt
+ * gemessen"). Jetzt sagt sie die Wahrheit.
+ */
+function VerbindungsAnzeige() {
+  const { verbunden, zuletzt } = useStrom()
+  if (verbunden) {
+    return (
+      <div className="flex items-center gap-2 text-xs font-mono text-emerald-400 bg-emerald-500/10 px-3 py-1.5 rounded-xl border border-emerald-500/20">
+        <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+        <span>LIVE</span>
+      </div>
+    )
+  }
+  return (
+    <div
+      className="flex items-center gap-2 text-xs font-mono text-amber-400 bg-amber-500/10 px-3 py-1.5 rounded-xl border border-amber-500/30"
+      title={
+        zuletzt
+          ? `Letzte Meldung um ${zuletzt.toLocaleTimeString()}. Die Anzeige zeigt diesen Stand, bis die Verbindung zurueck ist.`
+          : 'Noch keine Verbindung zum Server.'
+      }
+    >
+      <span className="w-2 h-2 rounded-full bg-amber-400" />
+      <span>VERBINDUNG WEG</span>
+    </div>
+  )
+}
+
+function AppInhalt() {
   const [currentPage, setCurrentPage] = useState<Page>('dashboard')
   // First-Run: solange der Einrichtungs-Assistent nicht abgeschlossen ist, zeigen wir
   // ihn statt des Dashboards. null = /setup noch nicht geprüft (kein Aufblitzen).
@@ -69,10 +104,7 @@ export default function App() {
             })}
           </nav>
 
-          <div className="flex items-center gap-2 text-xs font-mono text-emerald-400 bg-emerald-500/10 px-3 py-1.5 rounded-xl border border-emerald-500/20">
-            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-            <span>ONLINE</span>
-          </div>
+          <VerbindungsAnzeige />
         </div>
       </header>
 
@@ -86,3 +118,14 @@ export default function App() {
     </div>
   )
 }
+
+export default function App() {
+  // Der Provider haelt GENAU EINE SSE-Verbindung fuer die ganze Anwendung.
+  // Ein Hook je Komponente waere eine Verbindung je Komponente — also das
+  // alte Problem in neuer Form.
+  return (
+    <EventStreamProvider>
+      <AppInhalt />
+    </EventStreamProvider>
+  )
+}