Refactor: Hero-Banner (3 relevanteste Karten) + Top-Akzent konsistent

- Token-Durchsatz nutzte bg-gradient-to-b statt bg-card/45 und verlor dadurch den
  gradient-Top-Akzent + Hover-Lift (index.css greift nur bei bg-card/45). Zurueck auf
  Standard-Kartenstil -> konsistent mit allen Karten.
- Zentrale: System-Status, Token-Durchsatz und Aktive Modelle als gleich-prominenter
  Hero-Banner (3 Spalten) oben; Rest gruppiert darunter (Stack-Status: Rollen + Dienste,
  Betrieb & Wissen: Updates + Hermes + Gedaechtnis).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-06-27 17:02:59 +02:00
parent ec9488d94e
commit 89cdc60b6e
6 changed files with 68 additions and 71 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -7,8 +7,8 @@
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-CauIIHdl.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-wQ2PPr04.css">
<script type="module" crossorigin src="/assets/index-iQ69359J.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B3BExjP9.css">
</head>
<body>
<div id="root"></div>
@@ -36,7 +36,7 @@ export function TokenPerformanceCard() {
const curRate = last ? Math.round(last.prompt + last.completion) : 0
return (
<div className="rounded-2xl border border-border/60 bg-gradient-to-b from-card/55 to-background/30 backdrop-blur-md p-5 shadow-lg shadow-black/20">
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 shadow-lg shadow-black/15">
<div className="mb-3 flex items-start justify-between gap-3">
<div>
<div className="flex items-center gap-2">
+9 -12
View File
@@ -21,26 +21,23 @@ export function DashboardView() {
<p className="text-sm text-muted-foreground">Aktueller Status von System, Modellen und Agent.</p>
</div>
{/* 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>
{/* Hero-Banner — die 3 relevantesten, gleich prominent */}
<div className="grid items-stretch gap-6 lg:grid-cols-3">
<SystemStatusCard />
<TokenPerformanceCard />
<ActiveModelsCard />
</div>
{/* Zone 2 — Stack-Status */}
{/* Stack-Status */}
<section>
<ZoneLabel>Stack-Status</ZoneLabel>
<div className="grid gap-6 md:grid-cols-3">
<ActiveModelsCard />
<div className="grid gap-6 md:grid-cols-2">
<RolesCard />
<ServicesCard />
</div>
</section>
{/* Zone 3 — Betrieb & Wissen */}
{/* Betrieb & Wissen */}
<section>
<ZoneLabel>Betrieb &amp; Wissen</ZoneLabel>
<div className="grid gap-6 md:grid-cols-3">