From 671a9a59cd39387d25708b67ab6bade9d7a40e01 Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Fri, 10 Apr 2026 02:37:38 +0400
Subject: [PATCH] fix: groups

---
 apps/status/src/static/app.css | 21 ++++++++++++---------
 apps/status/src/views/page.ejs | 27 +++++++++++++++++++++++++--
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/apps/status/src/static/app.css b/apps/status/src/static/app.css
index ad05f78..cb621e4 100644
--- a/apps/status/src/static/app.css
+++ b/apps/status/src/static/app.css
@@ -44,23 +44,26 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
 .overall { padding: 1rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 1rem; margin: 1.5rem 0 2rem; display: flex; align-items: center; gap: 0.75rem; border: 1px solid; }
 .overall .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; }
 @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-.group-section { margin: 1.5rem 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+/* Group sections - styled like monitor cards */
+.group-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
 .group-toggle { display: none; }
-.group-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; cursor: pointer; }
+.group-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; }
 .group-header:hover { background: rgba(255,255,255,0.02); }
-.group-header-left { display: flex; align-items: center; gap: 0.5rem; }
+.group-header-left { display: flex; align-items: center; gap: 0.75rem; }
 .group-chev { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
 .group-toggle:checked ~ .group-header .group-chev { transform: rotate(90deg); }
-.group-name { font-size: 0.85rem; font-weight: 600; color: var(--fg); }
-.group-header-right { display: flex; align-items: center; gap: 1rem; }
-.group-status { font-size: 0.75rem; font-weight: 600; }
-.group-aggregate { padding: 0 1.25rem 0.75rem; }
-.group-aggregate .bars { height: 24px; }
+.group-name { font-weight: 600; }
+.group-header-right { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--muted); }
+.group-status { font-weight: 600; }
+.group-aggregate { padding: 0 1.25rem 1rem; }
 .group-toggle:checked ~ .group-aggregate { display: none; }
 .group-body { display: none; padding: 0 0.75rem 0.75rem; }
 .group-toggle:checked ~ .group-body { display: block; }
 .group-body .monitors { gap: 0.35rem; }
-.group-body .monitor { border-radius: 8px; }
+/* Compact monitor inside a group - no collapse, no uptime cells */
+.monitor-compact { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; }
+.monitor-compact-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
+.monitor-compact .bars { height: 24px; }
 .monitors { display: flex; flex-direction: column; gap: 0.5rem; }
 /* All monitors share one structure: a clickable header row + a collapsible
    detail panel. display_mode just controls whether `expanded-state` is set
diff --git a/apps/status/src/views/page.ejs b/apps/status/src/views/page.ejs
index 8184b8d..daf5abe 100644
--- a/apps/status/src/views/page.ejs
+++ b/apps/status/src/views/page.ejs
@@ -233,15 +233,37 @@
           </div>
           <div class="group-body">
       <% } %>
+      <% const inGroup = !!groupName; %>
       <div class="monitors">
         <% list.forEach(function(m) {
           const buckets = m.buckets || [];
           const hasData = buckets.some(b => b.total > 0);
           const u = m.uptime || { d24: null, d7: null, d30: null, d90: null };
-          // Every monitor renders with the same DOM. display_mode just sets
-          // whether the detail panel starts expanded or collapsed.
           const startsOpen = m.display_mode !== 'compact';
         %>
+          <% if (inGroup) { %>
+            <div class="monitor-compact" data-monitor-id="<%= m.id %>">
+              <div class="monitor-compact-header">
+                <div class="monitor-name">
+                  <span class="dot" style="background: <%= statusColor(m.current_state) %>;"></span>
+                  <span class="name"><%= m.display_name %></span>
+                </div>
+                <div class="monitor-meta">
+                  <% if (m.current_state === 'paused') { %>
+                    <span class="maintenance-pill" title="This service is paused for maintenance - checks are not running.">Maintenance</span>
+                  <% } else { %>
+                    <% if (page.show_response_time && m.avg_latency != null) { %><span><%= m.avg_latency %>ms</span><% } %>
+                    <span class="uptime-pct <%= uptimeBand(m.uptime_pct) %>"><%= fmtUptime(m.uptime_pct) %></span>
+                  <% } %>
+                </div>
+              </div>
+              <div class="bars" aria-label="<%= statusLabel(m.current_state) %>">
+                <% buckets.forEach(function(b) { %>
+                  <div class="bar" style="background: <%= bucketColor(b) %>;" data-start="<%= b.start %>" data-total="<%= b.total %>" data-up="<%= b.up %>"<% if (b.avg_latency != null) { %> data-latency="<%= b.avg_latency %>"<% } %>></div>
+                <% }); %>
+              </div>
+            </div>
+          <% } else { %>
           <div class="monitor" data-monitor-id="<%= m.id %>">
             <input type="checkbox" class="monitor-toggle" id="m-<%= m.id %>" <%= startsOpen ? 'checked' : '' %>>
             <label class="monitor-row" for="m-<%= m.id %>">
@@ -277,6 +299,7 @@
               </div>
             </div>
           </div>
+          <% } %>
         <% }); %>
       </div>
       <% if (groupName) { %>