umbau(boxwart): neue Oberflaeche im Cockpit-Stil (Richtung A), Werkzeuge angehoben

Drei Seiten statt zehn: Start, Updates, Modelle — am PC mit Kopfnavigation, am Handy
mit Leiste unten. Umsetzung von Mockup A („Cockpit“), vom User am 23.09. gewaehlt.

- Start: Hauptwarnleuchte + 8 Warnlampen, Rundinstrumente mit Live-Werten aus dem
  Strom (Speicher, Temperatur, Platte) und Laufzeit-Zaehlwerk, Checkliste der
  Waechter-Hinweise mit ihren Knoepfen, Flugplan (heute gelaufen / geplant), Radar-Kasten.
- Updates: Bausteine mit „Laeuft → Neu“ und Zusammenfassung, laufende Auftraege,
  Verlauf der Sonntagslaeufe (neu: GET /api/updates/verlauf), Sicherungen samt
  Zurueckspielen mit Rueckfrage.
- Modelle: Speicherbalken, Rollen Hirn/Coder/Dritte Rolle, wer die Modelle nutzt
  (7 Tage + 24 h je Stunde), Modell-Radar, weitere Eintraege, Modelle selbst suchen.
- Schubladen: Dienste mit Protokoll und Neustart, Einstellungen (HF-Zugang), Hermes-Link.
- Werkzeuge: Vite 8, React 19.3 mit React Compiler 1.0 (Babel), vitest 5, Tailwind 4.3,
  shadcn 4 (Radix) fuer Dialog/Schublade/Knopf, Schriften Barlow/Barlow Condensed/
  JetBrains Mono. Entfernt: recharts, cmdk, Kraftgraph, zustand, Inter, Space Grotesk.
- Startbuendel 115 KB gzip (Budget 140); Updates/Modelle/Schubladen laden bei Bedarf.
- 16 Oberflaechen-Tests (Instrument-Bogen, Hauptleuchte, Zeitformate, Versionen).

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

frontend/src/components/cockpit/Zaehlwerk.tsx

@@ -0,0 +1,30 @@
+import { laufzeit } from "@/lib/zeit"
+
+function Ziffer({ z }: { z: string }) {
+  return (
+    <span className="ziffern inline-flex h-14 w-[38px] items-center justify-center rounded-md border border-[#2a3036] bg-[#0b0d0f] text-[32px] font-medium">
+      {z}
+    </span>
+  )
+}
+
+/** Laufzeit als mechanisches Zählwerk: TT T  SS H. */
+export function Zaehlwerk({ sekunden }: { sekunden: number | null | undefined }) {
+  const lz = laufzeit(sekunden)
+  const tage = String(Math.min(lz?.[0] ?? 0, 99)).padStart(2, "0")
+  const std = String(lz?.[1] ?? 0).padStart(2, "0")
+  const text = lz ? `Laufzeit ohne Neustart: ${lz[0]} Tage, ${lz[1]} Stunden` : "Laufzeit unbekannt"
+  return (
+    <figure className="m-0 flex min-w-0 flex-col items-center justify-end gap-1">
+      <div aria-label={text} role="img" className="flex h-[150px] max-w-full items-center gap-1.5 pb-5">
+        <Ziffer z={lz ? tage[0] : "–"} />
+        <Ziffer z={lz ? tage[1] : "–"} />
+        <span className="schild mr-2 ml-0.5 text-lg font-bold text-text-3">T</span>
+        <Ziffer z={lz ? std[0] : "–"} />
+        <Ziffer z={lz ? std[1] : "–"} />
+        <span className="schild ml-0.5 text-lg font-bold text-text-3">H</span>
+      </div>
+      <figcaption className="schild text-[15px] text-text-3">Ohne Neustart</figcaption>
+    </figure>
+  )
+}