From 5c94881608a30cd8ef6b96e287b4b8080ba66f98 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 16 Apr 2026 13:35:33 +0200
Subject: [PATCH] style: add compact view CSS classes for runtime dashboard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pages/AgentHealth/AgentHealth.module.css  | 140 +++++++++++++++++-
 1 file changed, 139 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 603d6794..5f0a9283 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -13,7 +13,7 @@
 /* Stat strip */
 .statStrip {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, 1fr) auto;
   gap: 10px;
   margin-bottom: 16px;
 }
@@ -93,6 +93,14 @@
   margin-bottom: 20px;
 }
 
+/* Compact view grid */
+.compactGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
 /* Group meta row */
 .groupMeta {
   display: flex;
@@ -250,3 +258,133 @@
   border-bottom: 1px solid var(--border-subtle);
 }
 
+/* Compact app card */
+.compactCard {
+  background: color-mix(in srgb, var(--card-accent) 8%, var(--bg-raised));
+  border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
+  border-left: 3px solid var(--card-accent);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.compactCard:hover {
+  background: color-mix(in srgb, var(--card-accent) 12%, var(--bg-raised));
+}
+
+.compactCardSuccess { --card-accent: var(--success); }
+.compactCardWarning { --card-accent: var(--warning); }
+.compactCardError   { --card-accent: var(--error); }
+
+.compactCardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.compactCardName {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.compactCardChevron {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.compactCardMeta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+}
+
+.compactCardLive {
+  font-weight: 600;
+  color: var(--card-accent);
+}
+
+.compactCardHeartbeat {
+  color: var(--text-muted);
+}
+
+.compactCardHeartbeatWarn {
+  color: var(--card-accent);
+}
+
+/* Expanded card inside compact grid */
+.compactGridExpanded {
+  grid-column: span 2;
+}
+
+/* Expand/collapse animation wrapper */
+.expandWrapper {
+  overflow: hidden;
+  transition: max-height 200ms ease, opacity 150ms ease;
+}
+
+.expandWrapperCollapsed {
+  max-height: 0;
+  opacity: 0;
+}
+
+.expandWrapperExpanded {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+/* View mode toggle */
+.viewToggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.viewToggleBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.viewToggleBtn:hover {
+  color: var(--text-primary);
+}
+
+.viewToggleBtnActive {
+  background: var(--running);
+  border-color: var(--running);
+  color: #fff;
+}
+
+/* Collapse button in expanded GroupCard header */
+.collapseBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+}
+
+.collapseBtn:hover {
+  color: var(--text-primary);
+}
+