From 14f550c21baa8561898a866c7aa8a7840d4e505e Mon Sep 17 00:00:00 2001
From: Stephen Schuresko <mynameisdeleted@gmail.com>
Date: Thu, 24 Sep 2026 10:59:27 -0400
Subject: [PATCH] feat(dashboard): add zero-scale explanation banner and
 trigger status refresh on Open App & tab switch

---
 cmd/zero-scale-dashboard/dashboard.html | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/cmd/zero-scale-dashboard/dashboard.html b/cmd/zero-scale-dashboard/dashboard.html
index 3336b00..361b301 100644
--- a/cmd/zero-scale-dashboard/dashboard.html
+++ b/cmd/zero-scale-dashboard/dashboard.html
@@ -475,7 +475,13 @@
       <span>⚡ Zero-Scale Deployed Services</span>
       <span class="badge-count" id="count-zero">0</span>
     </div>
-    <div style="font-size:12px; color:var(--text-muted);">Consolidated systemd runner compute runtime</div>
+    <div style="font-size:12px; color:var(--text-muted);">Consolidated systemd runner compute runtime &bull; 10s idle scale-down</div>
+  </div>
+  <div class="zero-scale-notice" style="background: rgba(56, 189, 248, 0.07); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 12.5px; color: #bae6fd; line-height: 1.5; display: flex; align-items: flex-start; gap: 12px;">
+    <span style="font-size: 20px; line-height: 1.2;">⚡</span>
+    <div>
+      <strong>On-Demand Serverless Compute:</strong> Services remain <em>"Scaled to Zero"</em> when inactive to conserve cluster resources. Opening a service instantly boots it in under 200ms. If you click <strong>Open App</strong> on an idle service and switch tabs back to this dashboard within <strong>10 seconds</strong>, the badge will show <strong style="color: var(--green);">🟢 Active</strong> before scaling down automatically after 10 seconds of idle!
+    </div>
   </div>
   <div class="zero-grid" id="zero-container">
     <div style="color:var(--text-muted); font-size:13px;">Querying zero-scale runner runtime...</div>
@@ -806,7 +812,7 @@ function renderDashboard(data) {
         <div class="zero-desc">${app.description || 'Zero-scale dynamic service'}</div>
       </div>
       <div class="zero-actions">
-        <a href="${app.url}" target="_blank" class="btn btn-primary" style="flex:1; justify-content:center;">🌐 Open App</a>
+        <a href="${app.url}" target="_blank" onclick="handleOpenApp()" class="btn btn-primary" style="flex:1; justify-content:center;">🌐 Open App</a>
         <a href="${logsUrl}" target="_blank" class="btn" style="flex:1; justify-content:center;">🔐 Logs</a>
       </div>
     `;
@@ -849,6 +855,18 @@ function renderDashboard(data) {
   });
 }
 
+function handleOpenApp() {
+  setTimeout(loadStatus, 400);
+  setTimeout(loadStatus, 1500);
+}
+
+// Automatically refresh status whenever the user switches back to this tab
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible') {
+    loadStatus();
+  }
+});
+
 // Initial load & 10s auto-refresh
 loadStatus();
 setInterval(loadStatus, 10000);