From 7bac2952c54f5b9a5bd5ed9ba2e1c7b1368f6a7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dieter=20Schl=C3=BCter?= <dieter.schlueter@linix.de>
Date: Sun, 21 Jun 2026 00:32:52 +0200
Subject: [PATCH] =?UTF-8?q?polish(admin):=20=C3=9Cbersicht-Kacheln=20klick?=
 =?UTF-8?q?bar=20+=20Notfall-Signal,=20Notfall-Text=20umbricht?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Übersicht: Kacheln (Nutzer/Anfragen/Notfälle/LLM) springen per Klick in den Bereich;
  Notfall-Kachel wird rot mit "ansehen", wenn Ereignisse vorliegen, sonst "keine".
- Notfall-Tabelle: Textausschnitt umbricht statt abzuschneiden -> auf Mobil lesbar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/web/app.js     | 26 ++++++++++++++++----------
 app/web/index.html |  2 +-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/web/app.js b/app/web/app.js
index 483d548..1fbd409 100644
--- a/app/web/app.js
+++ b/app/web/app.js
@@ -776,22 +776,28 @@ async function loadOverview() {
   const gpu = (llm && llm.gpus && llm.gpus.length)
     ? llm.gpus.map((g) => `GPU ${g.index}: ${g.percent}%`).join(" · ") : "—";
 
-  const stat = (label, value, sub) => `
-    <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4">
+  const hasEmergencies = typeof emCount === "number" && emCount > 0;
+  // Kachel; mit data-jump wird sie anklickbar (springt in den Bereich).
+  const stat = (label, value, sub, opts = {}) => `
+    <${opts.jump ? `button data-jump="${opts.jump}"` : "div"}
+      class="ov-stat text-left bg-white dark:bg-slate-800 rounded-xl border ${opts.border || "border-slate-200 dark:border-slate-700"} p-4 ${opts.jump ? "hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors" : ""}">
       <p class="text-xs text-slate-500 dark:text-slate-400">${escHtml(label)}</p>
-      <p class="text-2xl font-semibold mt-1">${escHtml(value)}</p>
+      <p class="text-2xl font-semibold mt-1 ${opts.accent || ""}">${escHtml(value)}</p>
       ${sub ? `<p class="text-xs text-slate-400 mt-0.5 truncate">${escHtml(sub)}</p>` : ""}
-    </div>`;
+    </${opts.jump ? "button" : "div"}>`;
 
   const jump = (to, label) =>
     `<button class="ov-jump text-sm rounded-lg border border-slate-300 dark:border-slate-600 px-3 py-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors" data-jump="${to}">${escHtml(label)}</button>`;
 
   c.innerHTML = `
     <div class="grid grid-cols-2 gap-3">
-      ${stat("Nutzer", userCount)}
-      ${stat("Anfragen gesamt", reqTotal)}
-      ${stat("Notfälle", emCount, (typeof emCount === "number" && emCount > 0) ? "protokolliert" : "")}
-      ${stat("LLM-Backend", backend, llm ? llm.model : "")}
+      ${stat("Nutzer", userCount, "", { jump: "users" })}
+      ${stat("Anfragen gesamt", reqTotal, "", { jump: "system" })}
+      ${stat("Notfälle", emCount, hasEmergencies ? "ansehen" : "keine",
+             { jump: "emergency",
+               accent: hasEmergencies ? "text-red-600 dark:text-red-400" : "",
+               border: hasEmergencies ? "border-red-300 dark:border-red-800" : "" })}
+      ${stat("LLM-Backend", backend, llm ? llm.model : "", { jump: "system" })}
     </div>
     <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-4">
       <h4 class="font-semibold text-sm mb-2">GPU-Auslastung</h4>
@@ -800,7 +806,7 @@ async function loadOverview() {
     <div class="flex flex-wrap gap-2">
       ${jump("users", "→ Nutzer")} ${jump("system", "→ System")} ${jump("emergency", "→ Notfälle")}
     </div>`;
-  c.querySelectorAll(".ov-jump").forEach((b) =>
+  c.querySelectorAll(".ov-jump, .ov-stat[data-jump]").forEach((b) =>
     b.addEventListener("click", () => switchAdminTab(b.dataset.jump)));
 }
 
@@ -1086,7 +1092,7 @@ async function loadEmergencyEvents() {
               <td class="px-4 py-2.5">
                 <span class="rounded-full bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 text-xs px-2.5 py-0.5 font-medium">${escHtml(ev.category)}</span>
               </td>
-              <td class="px-4 py-2.5 text-xs text-slate-600 dark:text-slate-300 max-w-xs truncate">${escHtml(ev.snippet)}</td>
+              <td class="px-4 py-2.5 text-xs text-slate-600 dark:text-slate-300 max-w-[16rem] break-words">${escHtml(ev.snippet)}</td>
             </tr>`).join("")}
         </tbody>
       </table>
diff --git a/app/web/index.html b/app/web/index.html
index 2916416..18f2b28 100644
--- a/app/web/index.html
+++ b/app/web/index.html
@@ -318,6 +318,6 @@
     <div id="status" class="w-full max-w-3xl mx-auto mt-1 min-h-[1rem] text-xs text-slate-500 dark:text-slate-400"></div>
   </footer>
 
-  <script src="/app.js?v=37"></script>
+  <script src="/app.js?v=38"></script>
 </body>
 </html>