Refactor: Diagnose-Tab in Zentrale gemerged + Zentrale neu strukturiert

Diagnose war groesstenteils Dublette (Metriken/Temps schon in Zentrale; Logs/Restart/
Updates im Pflege-Drawer). Tab entfernt, zwei einzigartige Teile umverteilt.

- Zentrale neu in 3 Zonen: Live-Telemetrie (System-Status + Token-Durchsatz nebeneinander
  statt gestapelt), Stack-Status (Aktive Modelle / Rollen / Dienste), Betrieb & Wissen
  (Updates / Hermes / Gedaechtnis).
- Neue ServicesCard (Dienste-Health aus Diagnose) auf der Zentrale.
- TokenStatsCard ('Effizienz & Ersparnis') in TokenPerformanceCard gemerged (Input/Output
  + gespart) -> eine Karte weniger, keine Dublette.
- Backup/Snapshot in den System-Wartung-Drawer verschoben.
- nav.ts/App.tsx: 'system'-View entfernt (6 statt 7 Tabs); SystemView.tsx geloescht.

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

frontend/src/views/DashboardView.tsx

@@ -4,13 +4,16 @@ import { UpdatesCard } from "@/components/dashboard/UpdatesCard"
 import { AgentStatusCard } from "@/components/dashboard/AgentStatusCard"
 import { RolesCard } from "@/components/dashboard/RolesCard"
 import { MemoryInputCard } from "@/components/dashboard/MemoryInputCard"
-import { TokenStatsCard } from "@/components/dashboard/TokenStatsCard"
 import { TokenPerformanceCard } from "@/components/dashboard/TokenPerformanceCard"
+import { ServicesCard } from "@/components/dashboard/ServicesCard"
+
+function ZoneLabel({ children }: { children: React.ReactNode }) {
+  return <p className="mb-2 ml-0.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">{children}</p>
+}
 
 export function DashboardView() {
   return (
-    <div className="space-y-6">
-      {/* Title */}
+    <div className="space-y-7">
       <div>
         <h1 className="text-2xl font-space font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent">
           Zentrale
@@ -18,25 +21,34 @@ export function DashboardView() {
         <p className="text-sm text-muted-foreground">Aktueller Status von System, Modellen und Agent.</p>
       </div>
 
-      {/* Live: aktuell geladene/arbeitende Modelle */}
-      <ActiveModelsCard />
+      {/* Zone 1 — Live-Telemetrie: beide Charts nebeneinander */}
+      <section>
+        <ZoneLabel>Live-Telemetrie</ZoneLabel>
+        <div className="grid gap-6 lg:grid-cols-2">
+          <SystemStatusCard />
+          <TokenPerformanceCard />
+        </div>
+      </section>
 
-      {/* Top Grid: System stats & Updates */}
-      <div className="grid gap-6 md:grid-cols-3">
-        <SystemStatusCard />
-        <UpdatesCard />
-      </div>
+      {/* Zone 2 — Stack-Status */}
+      <section>
+        <ZoneLabel>Stack-Status</ZoneLabel>
+        <div className="grid gap-6 md:grid-cols-3">
+          <ActiveModelsCard />
+          <RolesCard />
+          <ServicesCard />
+        </div>
+      </section>
 
-      {/* Live-Durchsatz (Performance) */}
-      <TokenPerformanceCard />
-
-      {/* Bottom Grid: Agent, Roles, Memory & Token Stats */}
-      <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
-        <AgentStatusCard />
-        <RolesCard />
-        <MemoryInputCard />
-        <TokenStatsCard />
-      </div>
+      {/* Zone 3 — Betrieb & Wissen */}
+      <section>
+        <ZoneLabel>Betrieb &amp; Wissen</ZoneLabel>
+        <div className="grid gap-6 md:grid-cols-3">
+          <UpdatesCard />
+          <AgentStatusCard />
+          <MemoryInputCard />
+        </div>
+      </section>
     </div>
   )
 }