Update

app.js

@@ -222,6 +222,23 @@ function log(line) {
   els.log.textContent = `[${ts}] ${line}\n` + els.log.textContent
 }
 
+/** @type {ReturnType<typeof setInterval>|null} */
+let catalogRefreshTimer = null
+
+function startCatalogRefresh() {
+  if (catalogRefreshTimer) return
+  catalogRefreshTimer = setInterval(() => {
+    if (!manager.active?.connected) return
+    populateExploreCharts().catch(() => {})
+  }, 30_000)
+}
+
+function stopCatalogRefresh() {
+  if (!catalogRefreshTimer) return
+  clearInterval(catalogRefreshTimer)
+  catalogRefreshTimer = null
+}
+
 function setOnline(online, opts = {}) {
   els.status.textContent = online ? 'live' : 'offline'
   els.status.classList.toggle('online', online)
@@ -230,6 +247,9 @@ function setOnline(online, opts = {}) {
   els.btnInvite.disabled = !online
   els.btnConnect.disabled = false
 
+  if (online) startCatalogRefresh()
+  else if (!manager.list().some((c) => c.connected)) stopCatalogRefresh()
+
   const hadSamples =
     series.cpu.length > 0 || series.ram.length > 0 || series.net.length > 0
   const showBanner = !online && (hadSamples || opts.reconnecting)
@@ -913,6 +933,7 @@ async function populateExploreCharts() {
     const res = await manager.request(Methods.listCharts, {})
     chartCatalog = res.charts || {}
     renderChartCatalog(els.chartSearch?.value || '')
+    metricsDashboard.refreshRetention?.()
     const ids = Object.keys(chartCatalog).sort()
     const prefer = ids.filter(
       (id) =>

index.html

@@ -128,7 +128,7 @@
               <h3>CPU</h3>
               <span class="muted" id="chart-cpu-label">system.cpu</span>
             </header>
-            <canvas id="chart-cpu" height="110"></canvas>
+            <canvas id="chart-cpu" height="84"></canvas>
             <div class="chart-legend" id="legend-cpu"></div>
           </article>
           <article class="dash-card chart-panel" data-chart="mem.available" id="panel-ram">
@@ -136,28 +136,28 @@
               <h3>Memory</h3>
               <span class="muted">system.ram</span>
             </header>
-            <canvas id="chart-ram" height="110"></canvas>
+            <canvas id="chart-ram" height="84"></canvas>
           </article>
           <article class="dash-card chart-panel" data-chart="system.net" id="panel-net">
             <header>
               <h3>Network</h3>
               <span class="muted">system.net</span>
             </header>
-            <canvas id="chart-net" height="110"></canvas>
+            <canvas id="chart-net" height="84"></canvas>
           </article>
           <article class="dash-card chart-panel" data-chart="system.io" id="panel-io">
             <header>
               <h3>Disk I/O</h3>
               <span class="muted">system.io</span>
             </header>
-            <canvas id="chart-io" height="110"></canvas>
+            <canvas id="chart-io" height="84"></canvas>
           </article>
           <article class="dash-card chart-panel" data-chart="system.load" id="panel-load">
             <header>
               <h3>Load</h3>
               <span class="muted">system.load</span>
             </header>
-            <canvas id="chart-load" height="110"></canvas>
+            <canvas id="chart-load" height="84"></canvas>
           </article>
           <article class="dash-card chart-panel" data-chart="explore" id="panel-explore">
             <header>
@@ -168,7 +168,7 @@
                 </select>
               </label>
             </header>
-            <canvas id="chart-explore" height="110"></canvas>
+            <canvas id="chart-explore" height="84"></canvas>
           </article>
         </section>
       </section>

ui/dashboard.js

@@ -223,43 +223,40 @@ export function createMetricsDashboard(opts) {
   }
 
   /**
-   * Longest window we can honestly show from catalog retention.
-   * Prefers max(last_entry - first_entry); falls back to "unknown" (all enabled).
+   * Best-known history depth in seconds.
+   * Uses catalog first/last unix timestamps and/or already-loaded card series.
+   * Never treats "age of last sample" as retention (that was locking presets forever).
    */
   function computeRetentionSeconds() {
     const catalog = opts.getCatalog() || {}
     let best = 0
-    let any = false
     for (const meta of Object.values(catalog)) {
       const first = Number(meta?.first_entry ?? meta?.firstEntry ?? 0)
       const last = Number(meta?.last_entry ?? meta?.lastEntry ?? 0)
-      if (first > 0 && last >= first) {
-        any = true
+      // Unix seconds (~1e9+). Ignore zeros / relative counters.
+      if (first > 1e9 && last >= first) {
         best = Math.max(best, last - first)
-      } else if (last > 0) {
-        // Unix seconds → age from now
-        const age = Math.max(0, Math.floor(Date.now() / 1000) - last)
-        if (first > 0) {
-          any = true
-          best = Math.max(best, last - first)
-        } else if (age > 0) {
-          any = true
-          best = Math.max(best, age + 60)
       }
     }
+    // Live estimate from points already in the wall (~1s samples)
+    for (const card of state.cards.values()) {
+      if (card.status !== 'ok') continue
+      let n = 0
+      for (const arr of card.dims.values()) n = Math.max(n, arr?.length || 0)
+      if (n > 2) best = Math.max(best, n - 1)
     }
-    state.retentionSeconds = any ? best : 0
-    return state.retentionSeconds
+    state.retentionSeconds = best
+    return best
   }
 
   function presetAvailable(seconds) {
     const catalog = opts.getCatalog() || {}
+    // Only hard-disable when nothing is connected / no catalog yet
     if (!Object.keys(catalog).length) return false
-    const retention = state.retentionSeconds || computeRetentionSeconds()
-    // Unknown retention → allow short windows; gate 1h/6h until we know depth
-    if (!retention) return seconds <= 900
-    // Need a little headroom beyond the window
-    return retention + 30 >= seconds
+    // Once connected, all presets are selectable. Warm/live query fills what it can;
+    // retention is advisory in the hint, not a hard lock.
+    void seconds
+    return true
   }
 
   function setWindow(seconds, endOffset = state.endOffset) {
@@ -282,21 +279,21 @@ export function createMetricsDashboard(opts) {
 
   function syncPresetUi() {
     if (!opts.els.presets) return
-    computeRetentionSeconds()
+    const retention = computeRetentionSeconds()
     const catalogEmpty = !Object.keys(opts.getCatalog() || {}).length
     opts.els.presets.querySelectorAll('[data-preset]').forEach((btn) => {
       const id = btn.getAttribute('data-preset') || ''
       const p = TIME_PRESETS.find((x) => x.id === id)
       const seconds = p?.seconds || 0
       const ok = !catalogEmpty && presetAvailable(seconds)
+      const thin = !catalogEmpty && retention > 0 && retention + 30 < seconds
       btn.classList.toggle('active', id === state.presetId)
+      btn.classList.toggle('thin-history', thin)
       btn.disabled = !ok
       btn.title = !ok
-        ? catalogEmpty
         ? 'Connect an agent to load history'
-          : state.retentionSeconds
-            ? `Need ~${formatDuration(seconds)} of history (have ~${formatDuration(state.retentionSeconds)})`
-            : 'Not enough history yet for this window'
+        : thin
+          ? `Last ${id} · ~${formatDuration(retention)} buffered (may be sparse)`
           : `Last ${id}`
     })
     const hint = opts.els.retentionHint
@@ -304,27 +301,14 @@ export function createMetricsDashboard(opts) {
       if (catalogEmpty) {
         hint.textContent = 'Connect an agent to enable time windows.'
         hint.classList.remove('hidden')
-      } else if (state.retentionSeconds > 0 && state.retentionSeconds < 3600) {
-        hint.textContent = `History depth ~${formatDuration(state.retentionSeconds)} — longer windows stay disabled until more samples accumulate.`
+      } else if (retention > 0 && retention < state.afterSeconds) {
+        hint.textContent = `Buffered history ~${formatDuration(retention)} — longer windows may look sparse until more samples arrive.`
         hint.classList.remove('hidden')
       } else {
         hint.textContent = ''
         hint.classList.add('hidden')
       }
     }
-    // If current preset became unavailable, fall back to longest available
-    if (!catalogEmpty && !presetAvailable(state.afterSeconds)) {
-      const fallback =
-        [...TIME_PRESETS].reverse().find((p) => presetAvailable(p.seconds)) || TIME_PRESETS[0]
-      if (fallback && (fallback.id !== state.presetId || fallback.seconds !== state.afterSeconds)) {
-        state.presetId = fallback.id
-        state.afterSeconds = fallback.seconds
-        opts.els.presets.querySelectorAll('[data-preset]').forEach((btn) => {
-          btn.classList.toggle('active', btn.getAttribute('data-preset') === state.presetId)
-        })
-        scheduleRefetchVisible()
-      }
-    }
   }
 
   function updateMeta() {
@@ -420,7 +404,19 @@ export function createMetricsDashboard(opts) {
         card.updating = false
         paintCard(id)
         refreshSectionKpis()
-        syncPresetUi()
+        // Refresh retention hint as series grow (do not re-disable presets)
+        computeRetentionSeconds()
+        const hint = opts.els.retentionHint
+        if (hint && Object.keys(opts.getCatalog() || {}).length) {
+          const retention = state.retentionSeconds
+          if (retention > 0 && retention < state.afterSeconds) {
+            hint.textContent = `Buffered history ~${formatDuration(retention)} — longer windows may look sparse until more samples arrive.`
+            hint.classList.remove('hidden')
+          } else if (retention >= state.afterSeconds) {
+            hint.textContent = ''
+            hint.classList.add('hidden')
+          }
+        }
       }
     }
   }
@@ -1332,13 +1328,11 @@ export function createMetricsDashboard(opts) {
     bindKeyboard()
     setForcePlay(state.forcePlay)
     setPlaying(true)
+    // Default live 5m; presets unlock when catalog arrives via setCatalog()
+    state.presetId = '5m'
+    state.afterSeconds = 300
+    state.endOffset = 0
     syncPresetUi()
-    // Apply default window without forcing unavailable presets
-    if (presetAvailable(300)) setPreset('5m')
-    else {
-      const p = TIME_PRESETS.find((x) => presetAvailable(x.seconds)) || TIME_PRESETS[0]
-      setPreset(p.id)
-    }
     syncLiveUi()
   }
 
@@ -1379,6 +1373,13 @@ export function createMetricsDashboard(opts) {
     computeRetentionSeconds()
     syncPresetUi()
     render()
+    // Catalog just arrived or refreshed — pull history for anything already on screen
+    scheduleRefetchVisible()
+  }
+
+  /** Refresh retention meta after a background catalog poll. */
+  function refreshRetention() {
+    syncPresetUi()
   }
 
   /** Clear series caches (e.g. active peer switched). */
@@ -1453,6 +1454,7 @@ export function createMetricsDashboard(opts) {
     showRelated,
     clearRelated,
     setBoardOnly,
+    refreshRetention,
     getState: () => state,
   }
 }

ui/styles.css

@@ -130,7 +130,7 @@ body {
     var(--bg-primary);
   display: grid;
   grid-template-columns: var(--sidebar-w) 1fr;
-  grid-template-rows: var(--titlebar-h) 1fr;
+  grid-template-rows: var(--titlebar-h) minmax(0, 1fr);
   grid-template-areas:
     'titlebar titlebar'
     'sidebar content';
@@ -159,36 +159,41 @@ html[data-theme='light'] {
   --scrollbar-thumb-hover: color-mix(in srgb, var(--accent-primary) 45%, rgba(15, 23, 42, 0.35));
 }
 
-/* Main app pane — slim, styled */
-#content {
+/* Slim scrollbars on the element that actually scrolls (views / walls — not nested) */
+.view,
+.metrics-wall,
+.metrics-toc-nav {
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
-#content::-webkit-scrollbar {
+.view::-webkit-scrollbar,
+.metrics-wall::-webkit-scrollbar,
+.metrics-toc-nav::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-#content::-webkit-scrollbar-track {
+.view::-webkit-scrollbar-track,
+.metrics-wall::-webkit-scrollbar-track,
+.metrics-toc-nav::-webkit-scrollbar-track {
   background: transparent;
   margin: 4px 0;
 }
-#content::-webkit-scrollbar-thumb {
+.view::-webkit-scrollbar-thumb,
+.metrics-wall::-webkit-scrollbar-thumb,
+.metrics-toc-nav::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 999px;
   border: 1px solid transparent;
   background-clip: padding-box;
   min-height: 40px;
 }
-#content::-webkit-scrollbar-thumb:hover {
+.view::-webkit-scrollbar-thumb:hover,
+.metrics-wall::-webkit-scrollbar-thumb:hover,
+.metrics-toc-nav::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
   background-clip: padding-box;
 }
-#content::-webkit-scrollbar-corner {
-  background: transparent;
-}
 
-.metrics-wall,
-.metrics-toc-nav,
 .metrics-toc,
 .metric-card-stats,
 #sidebar,
@@ -200,8 +205,6 @@ html[data-theme='light'] {
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 
-.metrics-wall::-webkit-scrollbar,
-.metrics-toc-nav::-webkit-scrollbar,
 .metrics-toc::-webkit-scrollbar,
 .metric-card-stats::-webkit-scrollbar,
 #sidebar::-webkit-scrollbar,
@@ -212,8 +215,6 @@ html[data-theme='light'] {
   height: var(--scrollbar-size);
 }
 
-.metrics-wall::-webkit-scrollbar-track,
-.metrics-toc-nav::-webkit-scrollbar-track,
 .metrics-toc::-webkit-scrollbar-track,
 .metric-card-stats::-webkit-scrollbar-track,
 #sidebar::-webkit-scrollbar-track,
@@ -223,8 +224,6 @@ html[data-theme='light'] {
   background: transparent;
 }
 
-.metrics-wall::-webkit-scrollbar-thumb,
-.metrics-toc-nav::-webkit-scrollbar-thumb,
 .metrics-toc::-webkit-scrollbar-thumb,
 .metric-card-stats::-webkit-scrollbar-thumb,
 #sidebar::-webkit-scrollbar-thumb,
@@ -237,8 +236,6 @@ html[data-theme='light'] {
   background-clip: padding-box;
 }
 
-.metrics-wall::-webkit-scrollbar-thumb:hover,
-.metrics-toc-nav::-webkit-scrollbar-thumb:hover,
 #sidebar::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
   background-clip: padding-box;
@@ -391,6 +388,8 @@ body[data-reduce-motion='1'] .metrics-wall {
   border-right: 1px solid var(--border-color);
   padding: 12px 10px;
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   z-index: 20;
 }
 
@@ -486,20 +485,16 @@ body.sidebar-collapsed #conn-meta {
 }
 
 /* ─── Content ─── */
+/* #content never scrolls — each view owns at most one scrollbar (fixes Charts double-bar). */
 #content {
   grid-area: content;
-  overflow: auto;
-  overflow-x: hidden;
-  padding: var(--space-lg);
-  padding-right: calc(var(--space-lg) - 2px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   min-width: 0;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-}
-
-body[data-reduce-motion='1'] #content {
-  scroll-behavior: auto;
+  min-height: 0;
+  padding: var(--space);
+  gap: 0;
 }
 
 .view.hidden,
@@ -508,18 +503,54 @@ body[data-reduce-motion='1'] #content {
 }
 
 .view {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
   animation: viewIn 0.28s ease;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  #content {
+body[data-reduce-motion='1'] .view {
   scroll-behavior: auto;
 }
+
+@media (prefers-reduced-motion: reduce) {
   .view {
     animation: none;
+    scroll-behavior: auto;
   }
 }
 
+/* Charts: chrome fixed, only the metrics wall scrolls */
+#charts-view:not(.hidden) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#charts-view .metrics-header,
+#charts-view .metrics-toolbar,
+#charts-view .metrics-retention-hint,
+#charts-view .related-panel {
+  flex-shrink: 0;
+}
+
+#charts-view .metrics-shell {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+}
+
+/* Overview: denser home that prefers to fit the pane */
+#overview-view:not(.hidden) {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
 @keyframes viewIn {
   from {
     opacity: 0;
@@ -536,7 +567,19 @@ body[data-reduce-motion='1'] #content {
   align-items: flex-end;
   justify-content: space-between;
   gap: var(--space);
-  margin-bottom: var(--space-lg);
+  margin-bottom: var(--space);
+}
+
+#charts-view .metrics-header {
+  margin-bottom: 8px;
+}
+
+#charts-view .dash-title {
+  font-size: clamp(1.35rem, 2vw, 1.7rem);
+}
+
+#charts-view .page-subtitle {
+  font-size: 12px;
 }
 
 .dash-kicker {
@@ -585,8 +628,9 @@ body[data-reduce-motion='1'] #content {
 }
 
 .offline-banner {
-  margin: calc(-1 * var(--space-lg) + 4px) calc(-1 * var(--space-lg) + 4px) var(--space) ;
-  padding: 10px 16px;
+  flex-shrink: 0;
+  margin: 0 0 10px;
+  padding: 8px 12px;
   background: rgba(251, 191, 36, 0.12);
   border: 1px solid rgba(251, 191, 36, 0.35);
   border-radius: var(--border-radius-sm);
@@ -671,30 +715,43 @@ body.is-offline .offline-banner:not(.hidden) {
 
 /* Overview — compact home that fits the viewport */
 #overview-view .overview-header {
-  margin-bottom: var(--space);
+  margin-bottom: 10px;
   align-items: center;
+  flex-shrink: 0;
+}
+
+#overview-view .overview-header .page-subtitle {
+  display: none;
 }
 
 #overview-view .dash-title {
-  font-size: clamp(1.35rem, 2vw, 1.7rem);
+  font-size: 1.35rem;
 }
 
 #overview-view .dash-kpis {
-  margin-bottom: var(--space-sm);
+  margin-bottom: 10px;
+  flex-shrink: 0;
 }
 
 #overview-view .dash-kpi {
-  min-height: 64px;
-  padding: 10px 12px;
+  min-height: 52px;
+  padding: 8px 10px;
 }
 
 #overview-view .dash-kpi strong {
-  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
+  font-size: 1.2rem;
 }
 
 #overview-view .fleet-strip {
-  margin-bottom: var(--space-sm);
-  padding: 10px 12px;
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  flex-shrink: 0;
+}
+
+#overview-view .overview-charts {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-content: start;
 }
 
 .charts-grid {
@@ -705,11 +762,11 @@ body.is-offline .offline-banner:not(.hidden) {
 
 .overview-charts {
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+  gap: 8px;
 }
 
 #overview-view .chart-panel {
-  padding: 10px 12px 8px;
+  padding: 8px 10px 6px;
   min-width: 0;
   overflow: hidden;
   display: flex;
@@ -722,16 +779,20 @@ body.is-offline .offline-banner:not(.hidden) {
   align-items: baseline;
   justify-content: space-between;
   gap: 10px;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   flex-shrink: 0;
 }
 
 .chart-panel h3 {
   margin: 0;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 650;
 }
 
+.chart-panel .muted {
+  font-size: 10px;
+}
+
 .chart-panel canvas {
   width: 100%;
   display: block;
@@ -741,9 +802,9 @@ body.is-offline .offline-banner:not(.hidden) {
 
 /* Lock overview spark heights — width:100% alone was stretching them huge */
 #overview-view .chart-panel canvas {
-  height: 100px !important;
-  max-height: 100px;
-  flex: 0 0 100px;
+  height: 84px !important;
+  max-height: 84px;
+  flex: 0 0 84px;
 }
 
 html[data-theme='light'] .chart-panel canvas {
@@ -753,11 +814,11 @@ html[data-theme='light'] .chart-panel canvas {
 .chart-legend {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px 10px;
-  margin-top: 6px;
+  gap: 4px 8px;
+  margin-top: 4px;
   font-size: 10px;
   color: var(--text-muted);
-  max-height: 28px;
+  max-height: 22px;
   overflow: hidden;
 }
 
@@ -1038,6 +1099,10 @@ button.metrics-tf:disabled {
   cursor: not-allowed;
 }
 
+button.metrics-tf.thin-history:not(.active) {
+  opacity: 0.7;
+}
+
 .metrics-retention-hint {
   margin: 0 0 10px;
   font-size: 12px;
@@ -1154,8 +1219,9 @@ button.metrics-tf:disabled {
   display: grid;
   grid-template-columns: 220px minmax(0, 1fr);
   gap: var(--space);
-  min-height: 420px;
-  height: calc(100vh - var(--titlebar-h) - 210px);
+  min-height: 0;
+  /* Height comes from #charts-view flex — avoid vh calc (caused #content + wall double scroll) */
+  height: auto;
 }
 
 .metrics-toc {
@@ -2194,19 +2260,15 @@ code {
   .dash-kpis {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .charts-browser,
-  .metrics-shell {
+  .charts-browser {
     grid-template-columns: 1fr;
   }
-  .metrics-shell {
-    height: auto;
-    max-height: none;
+  #charts-view .metrics-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
   }
-  .metrics-toc {
-    max-height: 220px;
-  }
-  .metrics-wall {
-    max-height: 70vh;
+  #charts-view .metrics-toc {
+    max-height: 140px;
   }
   .fleet-summary-bar {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2215,9 +2277,9 @@ code {
     margin-left: 0;
   }
   #overview-view .chart-panel canvas {
-    height: 96px !important;
-    max-height: 96px;
-    flex-basis: 96px;
+    height: 76px !important;
+    max-height: 76px;
+    flex-basis: 76px;
   }
 }