From a846228e396d7aead5823e71866bbbd53a360799 Mon Sep 17 00:00:00 2001
From: jbergner <jbergner@send.nrw>
Date: Sun, 26 Apr 2026 10:54:44 +0200
Subject: [PATCH] UI-Update

---
 main.go | 597 +++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 356 insertions(+), 241 deletions(-)

diff --git a/main.go b/main.go
index dc7e96c..3ffaa2a 100644
--- a/main.go
+++ b/main.go
@@ -38,18 +38,21 @@ const uiTemplates = `
   <title>{{.Title}}</title>
   <style>
     :root {
-  --bg: #0f172a;
-  --bg-soft: #111827;
-  --panel: #ffffff;
-  --panel-soft: #f8fafc;
-  --text: #0f172a;
-  --muted: #64748b;
-  --border: #e5e7eb;
-  --primary: #2563eb;
-  --danger: #dc2626;
-  --success: #16a34a;
-  --warning: #d97706;
-  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
+  --bg: #f4f6f8;
+  --surface: #ffffff;
+  --surface-muted: #f8fafc;
+  --surface-nav: #101828;
+  --text: #101828;
+  --muted: #667085;
+  --border: #d0d5dd;
+  --border-soft: #eaecf0;
+  --primary: #175cd3;
+  --primary-hover: #1849a9;
+  --danger: #b42318;
+  --success: #067647;
+  --warning: #b54708;
+  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
+  --radius: 6px;
 }
 
 * {
@@ -57,219 +60,375 @@ const uiTemplates = `
 }
 
 body {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+  font-family: "Segoe UI", Roboto, Arial, sans-serif;
   margin: 0;
-  background: #f1f5f9;
+  background: var(--bg);
   color: var(--text);
-}
-
-header {
-  background: linear-gradient(135deg, #0f172a, #111827);
-  color: white;
-  padding: 18px 28px;
-  box-shadow: var(--shadow);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-header strong {
-  font-size: 18px;
-  letter-spacing: .3px;
-}
-
-nav {
-  margin-top: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-nav a {
-  color: #dbeafe;
-  background: rgba(255,255,255,.08);
-  padding: 7px 11px;
-  border-radius: 999px;
-  text-decoration: none;
   font-size: 14px;
 }
 
-nav a:hover {
-  background: rgba(255,255,255,.16);
+/* Header */
+
+header {
+  background: var(--surface-nav);
+  color: #ffffff;
+  padding: 0;
+  border-bottom: 1px solid #1d2939;
+  position: sticky;
+  top: 0;
+  z-index: 20;
 }
 
+header > div {
+  padding: 14px 28px 10px;
+  border-bottom: 1px solid rgba(255,255,255,.08);
+}
+
+header strong {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: .2px;
+}
+
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  padding: 0 20px;
+}
+
+nav a {
+  color: #d0d5dd;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 12px 12px;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  border-radius: 0;
+}
+
+nav a:hover {
+  color: #ffffff;
+  background: rgba(255,255,255,.04);
+  border-bottom-color: #98a2b3;
+}
+
+/* Layout */
+
 main {
-  padding: 28px;
-  max-width: 1800px;
+  padding: 24px 28px;
+  max-width: 1920px;
   margin: 0 auto;
 }
 
 h1 {
-  margin: 0 0 8px;
-  font-size: 30px;
+  margin: 0 0 6px;
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -.02em;
 }
 
 h2 {
-  margin-top: 28px;
-  font-size: 22px;
+  margin: 28px 0 12px;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 .muted {
   color: var(--muted);
 }
 
+/* Cards */
+
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 12px;
 }
 
 .card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  padding: 18px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
+  padding: 14px 16px;
   box-shadow: var(--shadow);
   overflow-wrap: anywhere;
   word-break: break-word;
 }
 
 .card strong {
-  font-size: 24px;
+  font-size: 22px;
+  font-weight: 600;
 }
 
+/* Forms */
+
+.filters {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+  background: var(--surface);
+  padding: 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-soft);
+  box-shadow: var(--shadow);
+}
+
+label {
+  display: block;
+  font-size: 12px;
+  color: #344054;
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: #ffffff;
+  color: var(--text);
+  font-size: 14px;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 2px solid rgba(23, 92, 211, .18);
+  border-color: var(--primary);
+}
+
+button {
+  padding: 8px 12px;
+  background: var(--primary);
+  color: #ffffff;
+  border: 1px solid var(--primary);
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+button:hover {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+button.danger {
+  background: var(--danger);
+  border-color: var(--danger);
+}
+
+button.success {
+  background: var(--success);
+  border-color: var(--success);
+}
+
+/* Quick filters - Enterprise Style */
+
+.quickfilters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 12px 0 18px;
+}
+
+.quickfilters a {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 7px 10px;
+  box-shadow: none;
+  font-size: 13px;
+  color: #344054;
+  font-weight: 500;
+}
+
+.quickfilters a:hover {
+  background: #f9fafb;
+  border-color: #98a2b3;
+  color: #101828;
+}
+
+/* Tables */
+
 .table-wrap {
   width: 100%;
   overflow-x: auto;
-  border-radius: 18px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-soft);
+  background: #ffffff;
   box-shadow: var(--shadow);
-  border: 1px solid var(--border);
-  background: white;
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
-  background: white;
+  background: #ffffff;
   table-layout: auto;
 }
 
-th, td {
+th,
+td {
   text-align: left;
-  padding: 11px 12px;
-  border-bottom: 1px solid var(--border);
+  padding: 9px 11px;
+  border-bottom: 1px solid var(--border-soft);
   vertical-align: top;
-  max-width: 520px;
+  max-width: 560px;
   overflow-wrap: anywhere;
   word-break: break-word;
+  line-height: 1.35;
 }
 
 th {
-  background: var(--panel-soft);
-  color: #334155;
-  font-size: 12px;
+  background: #f9fafb;
+  color: #475467;
+  font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .04em;
   position: static;
   z-index: auto;
 }
 
-tr:hover td {
-  background: #f8fafc;
+tbody tr:hover td {
+  background: #f9fafb;
 }
 
-.filters {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-  gap: 12px;
-  margin: 18px 0;
-  background: white;
-  padding: 16px;
-  border-radius: 18px;
-  border: 1px solid var(--border);
-  box-shadow: var(--shadow);
-}
+/* Badges */
 
-.quickfilters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 12px 0 18px;
-}
-
-.quickfilters a {
-  background: white;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 7px 12px;
-  box-shadow: var(--shadow);
-  font-size: 13px;
-}
-
-.checkline {
-  display: flex;
+.badge {
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
+  border-radius: 4px;
+  padding: 3px 7px;
   font-size: 12px;
-  color: #475569;
+  font-weight: 600;
+  white-space: nowrap;
+  border: 1px solid transparent;
 }
 
-.checkline input {
-  width: auto;
+.sev-critical {
+  background: #fef3f2;
+  color: #912018;
+  border-color: #fecdca;
 }
 
-.quickfilters a:hover {
-  background: #eff6ff;
+.sev-high {
+  background: #fff4ed;
+  color: #9c2a10;
+  border-color: #ffd6ae;
 }
 
-label {
-  display: block;
+.sev-medium {
+  background: #fffaeb;
+  color: #93370d;
+  border-color: #fedf89;
+}
+
+.sev-low {
+  background: #ecfdf3;
+  color: #05603a;
+  border-color: #abefc6;
+}
+
+.sev-info {
+  background: #eff8ff;
+  color: #175cd3;
+  border-color: #b2ddff;
+}
+
+.status-open {
+  background: #eff8ff;
+  color: #175cd3;
+  border-color: #b2ddff;
+}
+
+.status-acknowledged {
+  background: #f4f3ff;
+  color: #5925dc;
+  border-color: #d9d6fe;
+}
+
+.status-investigating {
+  background: #fffaeb;
+  color: #93370d;
+  border-color: #fedf89;
+}
+
+.status-plausible {
+  background: #f0f9ff;
+  color: #026aa2;
+  border-color: #b9e6fe;
+}
+
+.status-legitimate {
+  background: #ecfdf3;
+  color: #05603a;
+  border-color: #abefc6;
+}
+
+.status-false_positive {
+  background: #f2f4f7;
+  color: #344054;
+  border-color: #d0d5dd;
+}
+
+.status-resolved {
+  background: #f0fdfa;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
+.status-suppressed {
+  background: #f2f4f7;
+  color: #475467;
+  border-color: #d0d5dd;
+}
+
+.status-confirmed_incident {
+  background: #fef3f2;
+  color: #912018;
+  border-color: #fecdca;
+}
+
+/* Utility */
+
+.wrap {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.mono {
+  font-family: Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 12px;
-  color: #475569;
-  margin-bottom: 5px;
-  font-weight: 600;
 }
 
-input, select, textarea {
-  width: 100%;
-  padding: 9px 10px;
-  border: 1px solid #cbd5e1;
-  border-radius: 10px;
-  background: white;
-  color: #0f172a;
-}
-
-button {
-  padding: 9px 13px;
-  background: var(--primary);
-  color: white;
-  border: 0;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-button:hover {
-  filter: brightness(.95);
-}
-
-button.danger {
-  background: var(--danger);
-}
-
-button.success {
-  background: var(--success);
+.note {
+  margin-top: 8px;
+  color: #344054;
+  font-size: 13px;
+  padding: 8px 10px;
+  background: #f9fafb;
+  border-left: 3px solid #98a2b3;
+  border-radius: 0 var(--radius) var(--radius) 0;
 }
 
 pre {
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: anywhere;
-  background: #020617;
-  color: #e5e7eb;
-  padding: 18px;
-  border-radius: 18px;
+  background: #101828;
+  color: #f2f4f7;
+  padding: 16px;
+  border-radius: var(--radius);
   overflow-x: auto;
+  border: 1px solid #344054;
 }
 
 a {
@@ -278,94 +437,8 @@ a {
   font-weight: 500;
 }
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  padding: 4px 9px;
-  font-size: 12px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.sev-critical {
-  background: #450a0a;
-  color: #fee2e2;
-}
-
-.sev-high {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.sev-medium {
-  background: #ffedd5;
-  color: #9a3412;
-}
-
-.sev-low {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.sev-info {
-  background: #dbeafe;
-  color: #1e40af;
-}
-
-.status-open {
-  background: #e0f2fe;
-  color: #075985;
-}
-
-.status-acknowledged {
-  background: #ede9fe;
-  color: #5b21b6;
-}
-
-.status-investigating {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.status-legitimate {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.status-false_positive {
-  background: #e5e7eb;
-  color: #374151;
-}
-
-.status-resolved {
-  background: #ccfbf1;
-  color: #115e59;
-}
-
-.status-suppressed {
-  background: #f3f4f6;
-  color: #4b5563;
-}
-
-.wrap {
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-.mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 13px;
-}
-
-.note {
-  margin-top: 8px;
-  color: #475569;
-  font-size: 13px;
-  padding: 8px;
-  background: #f8fafc;
-  border-left: 3px solid #94a3b8;
-  border-radius: 8px;
+a:hover {
+  text-decoration: underline;
 }
 
 .mini-form {
@@ -379,13 +452,55 @@ a {
   display: inline;
 }
 
+.checkline {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #475467;
+}
+
+.checkline input {
+  width: auto;
+}
+
+/* Agent status aliases */
+
+.badge-on {
+  background: #ecfdf3;
+  color: #05603a;
+  border-color: #abefc6;
+}
+
+.badge-off {
+  background: #fef3f2;
+  color: #912018;
+  border-color: #fecdca;
+}
+
+.badge-muted {
+  background: #f2f4f7;
+  color: #344054;
+  border-color: #d0d5dd;
+}
+
+/* Responsive */
+
 @media (max-width: 900px) {
   main {
     padding: 16px;
   }
 
-  th {
-    position: static;
+  header > div {
+    padding: 12px 16px 8px;
+  }
+
+  nav {
+    padding: 0 10px;
+  }
+
+  nav a {
+    padding: 10px 8px;
   }
 
   .card strong {
@@ -396,13 +511,13 @@ a {
 </head>
 <body>
 <header>
-  <div><strong>SIEM-lite</strong></div>
+  <div><strong>SIEM-lite Security Operations</strong></div>
   <nav>
-    <a href="/ui">Dashboard</a>
-	<a href="/ui/soc">SOC</a>
-	<a href="/ui/agents">Agents</a>
-	<a href="/ui/rules">Rules</a>
-	<a href="/ui/baseline">Baseline</a>
+    <a href="/ui/soc">SOC</a>
+    <a href="/ui">Overview</a>
+    <a href="/ui/agents">Agents</a>
+    <a href="/ui/rules">Rules</a>
+    <a href="/ui/baseline">Baseline</a>
     <a href="/ui/detections">Detections</a>
     <a href="/ui/events">Events</a>
     <a href="/metrics">Metrics</a>