From 1181478d7d048753dfa5a2094ec87e37c6833510 Mon Sep 17 00:00:00 2001
From: fds2610-bot <felix-bot@schepmann.de>
Date: Wed, 2 Sep 2026 15:58:15 +0200
Subject: [PATCH] Systemkacheln zeigen Haken bzw. X statt zweier gleicher LEDs

Jede Kachel trug zwei Rack-Balken mit je einer LED. Beide LEDs hingen an
derselben Statusklasse der Kachelgruppe und zeigten damit immer dasselbe -
zwei gruene Punkte pro Server ohne zusaetzliche Aussage.

Stattdessen jetzt ein Symbol pro Kachel: gruener Haken bei "ok", rotes X
bei "error" (mehr kennt SystemRepository::STATUSES nicht). Gezeichnet als
Pfad statt als Textglyphe, damit eine fehlende Schriftart auf dem
Wandmonitor keine leere Kachel ergibt, und ueber die volle Kachelflaeche
skaliert - seit Issue #73 steht der Servername im Tooltip, die Flaeche ist
also frei.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011GQ56Rs4sxgwwBjowtThpr
---
 html/css/office.css      | 19 +++++++++----------
 html/js/office-render.js | 31 +++++++++++++++++++++++--------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/html/css/office.css b/html/css/office.css
index 13bbd29..c34b835 100644
--- a/html/css/office.css
+++ b/html/css/office.css
@@ -264,20 +264,19 @@ header.office-header h1 {
   fill: #1e293b;
 }
 
-.system-tile-bar {
-  fill: #334155;
+.system-tile-mark {
+  fill: none;
+  stroke: #64748b;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.system-tile-led {
-  fill: #64748b;
+.status-ok .system-tile-mark {
+  stroke: #4ade80;
 }
 
-.status-ok .system-tile-led {
-  fill: #4ade80;
-}
-
-.status-error .system-tile-led {
-  fill: #f87171;
+.status-error .system-tile-mark {
+  stroke: #f87171;
 }
 
 .monitor-placeholder-text {
diff --git a/html/js/office-render.js b/html/js/office-render.js
index 782b11c..0308abe 100644
--- a/html/js/office-render.js
+++ b/html/js/office-render.js
@@ -384,6 +384,28 @@ function renderEventMonitor(frame, events) {
   return g;
 }
 
+// Statussymbol einer System-Kachel: gruener Haken bei "ok", rotes X bei "error" (die einzigen
+// beiden Werte, die SystemRepository::STATUSES kennt). Gezeichnet als Pfad und nicht als
+// Textglyphe - auf dem Wandmonitor faellt eine fehlende Schriftart sonst als leere Kachel auf.
+// Das Symbol fuellt die Kachel bis auf einen schmalen Rand aus; alle Masse haengen an der
+// Kantenlaenge, damit es jede Kachelgroesse mitgeht.
+function renderSystemStatusMark(status, tileX, tileY, tileSize) {
+  const pad = 4;
+  const size = tileSize - pad * 2;
+  const strokeWidth = Math.max(3, size * 0.16);
+  const bx = tileX + pad;
+  const by = tileY + pad;
+  // Die Endpunkte liegen um eine halbe Strichbreite innen, sonst ragen die runden Enden ueber
+  // die Flaeche hinaus.
+  const lo = strokeWidth / 2;
+  const hi = size - strokeWidth / 2;
+  const d =
+    status === "error"
+      ? `M ${bx + lo} ${by + lo} L ${bx + hi} ${by + hi} M ${bx + hi} ${by + lo} L ${bx + lo} ${by + hi}`
+      : `M ${bx + lo} ${by + size * 0.55} L ${bx + size * 0.38} ${by + hi} L ${bx + hi} ${by + lo}`;
+  return el("path", { d, class: "system-tile-mark", "stroke-width": strokeWidth });
+}
+
 function renderSystemMonitor(frame, systems, onConfigClick) {
   const tiles = buildSystemTiles(systems);
   const g = el("g", { class: "monitor monitor-systems" });
@@ -422,14 +444,7 @@ function renderSystemMonitor(frame, systems, onConfigClick) {
     tileGroup.appendChild(
       el("rect", { x: tileX, y: tileY, width: tileSize, height: tileSize, rx: 6, class: "system-tile-bg" })
     );
-    tileGroup.appendChild(
-      el("rect", { x: tileX + 10, y: tileY + 10, width: tileSize - 20, height: 14, rx: 2, class: "system-tile-bar" })
-    );
-    tileGroup.appendChild(
-      el("rect", { x: tileX + 10, y: tileY + 30, width: tileSize - 20, height: 14, rx: 2, class: "system-tile-bar" })
-    );
-    tileGroup.appendChild(el("circle", { cx: tileX + 18, cy: tileY + 17, r: 3, class: "system-tile-led" }));
-    tileGroup.appendChild(el("circle", { cx: tileX + 18, cy: tileY + 37, r: 3, class: "system-tile-led" }));
+    tileGroup.appendChild(renderSystemStatusMark(system.status, tileX, tileY, tileSize));
     g.appendChild(tileGroup);
   });