@stacksjs/ts-cloud 0.7.63 → 0.7.65

package/dist/ui-src/pages/operations/observability.stx

@@ -6,7 +6,7 @@ const range = state(new URLSearchParams(location.search).get('range') || '1h')
 const timezone = state(Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC')
 const compare = state(false), paused = state(false), textQuery = state(''), level = state(''), source = state('')
 const status = state({ sources: [], errors: [], retention: {} })
-const traffic = state([]), errors = state([]), latency = state([]), saturation = state([]), records = state([])
+const traffic = state([]), errors = state([]), latency = state([]), saturation = state([]), infrastructure = state([]), siteSignals = state([]), records = state([])
 const nextCursor = state(''), savedQueries = state([]), correlation = state(null), message = state(''), savedName = state(''), tailState = state('connecting')
 let tailSource = null
 
@@ -22,12 +22,14 @@ async function load() {
   if (paused()) return
   const duration = ranges[range()] || ranges['1h'], bucket = Math.max(60000, Math.ceil(duration / 120 / 60000) * 60000), params = windowParams()
   params.set('kinds', 'log,request,event,trace'); params.set('limit', '300'); if (textQuery()) params.set('text', textQuery()); if (level()) params.set('levels', level()); if (source()) params.set('sources', source())
-  const [statusBody, trafficBody, errorBody, latencyBody, saturationBody, recordBody, savedBody] = await Promise.all([
+  const [statusBody, trafficBody, errorBody, latencyBody, saturationBody, infrastructureBody, siteBody, recordBody, savedBody] = await Promise.all([
     json('/api/telemetry/status'), json(seriesUrl(['request.count','traffic.requests'], 'sum', bucket)), json(seriesUrl(['request.error','errors.count'], 'sum', bucket)),
     json(seriesUrl(['request.duration','latency.p95'], 'p95', bucket)), json(seriesUrl(['queue.depth','saturation.restarts','saturation.throttles','saturation.concurrency','host.disk.used_percent','runtime.memory.used'], 'max', bucket)),
+    json(seriesUrl(['host.cpu.used_percent','host.memory.used_percent','host.disk.used_percent','host.swap.used_percent','host.disk.inode_used_percent','host.load'], 'avg', bucket)),
+    json(seriesUrl(['site.health.up','site.response.time','site.http.status','site.tls.days_remaining'], 'avg', bucket)),
     json('/api/telemetry/query?' + params), json('/api/telemetry/saved-queries'),
   ])
-  status.set(statusBody); traffic.set(trafficBody.series || []); errors.set(errorBody.series || []); latency.set(latencyBody.series || []); saturation.set(saturationBody.series || []); records.set(recordBody.records || []); nextCursor.set(recordBody.nextCursor || ''); savedQueries.set(savedBody.queries || [])
+  status.set(statusBody); traffic.set(trafficBody.series || []); errors.set(errorBody.series || []); latency.set(latencyBody.series || []); saturation.set(saturationBody.series || []); infrastructure.set(infrastructureBody.series || []); siteSignals.set(siteBody.series || []); records.set(recordBody.records || []); nextCursor.set(recordBody.nextCursor || ''); savedQueries.set(savedBody.queries || [])
   if (!tailSource && !paused()) connectTail()
 }
 const { pollingState, pollingError, pollingLabel, lastUpdatedAt, refresh } = usePolling(load, 15000)
@@ -65,7 +67,7 @@ addEventListener('pagehide', closeTail)
     <details class="panel policy"><summary>Collection, retention, and estimated cost</summary><div class="cost-summary"><span>~{{ fmt(status().estimatedMonthlyBytes, ' B/month') }}</span><span>{{ status().costEstimateConfigured ? '$' + status().estimatedMonthlyCostUsd + '/month at configured storage rate' : 'Cost unavailable until a storage $/GB-month rate is configured' }}</span></div><form @submit="savePolicy($event)"><label>Raw retention days<input name="rawDays" type="number" min="1" max="3650" :value="status().policy?.rawDays || 30"></label><label>Downsample after days<input name="downsampleAfterDays" type="number" min="1" max="3650" :value="status().policy?.downsampleAfterDays || 7"></label><label>Maximum local records<input name="maxRecords" type="number" min="1000" :value="status().policy?.maxRecords || 1000000"></label><label>Sample rate (0.01–1)<input name="samplingRate" type="number" min="0.01" max="1" step="0.01" :value="status().policy?.samplingRate || 1"></label><label>Storage $/GB-month<input name="estimatedStorageUsdPerGbMonth" type="number" min="0" step="0.001" :value="status().policy?.estimatedStorageUsdPerGbMonth || 0"></label><label class="check"><input name="collectLogs" type="checkbox" :checked="status().policy?.collectLogs !== false"> Logs</label><label class="check"><input name="collectTraces" type="checkbox" :checked="status().policy?.collectTraces !== false"> Traces</label><label class="check"><input name="collectRequestAnalytics" type="checkbox" :checked="status().policy?.collectRequestAnalytics !== false"> Request analytics</label><button class="btn sm" type="submit">Save policy</button></form><p class="note">Lower sampling and retention reduce local ingestion/storage, but can hide rare events. Cost is an estimate using your configured storage rate; provider allocation is never invented.</p></details>
     <section class="source-grid" aria-label="Telemetry collection sources"><template :for="item in status().sources || []"><article class="panel source-card"><div><b>{{ item.source }}</b><span class="pill" :class="freshnessTone(item.freshness)">{{ item.freshness }}</span></div><small>last {{ item.lastObservedAt ? new Date(item.lastObservedAt).toLocaleString() : 'never' }} · lag {{ item.lagSeconds ?? '—' }}s</small><small>{{ item.retentionDays }}d retention · {{ Math.round(item.samplingRate * 100) }}% sampled · ~{{ fmt(item.estimatedDailyBytes, ' B/day') }}</small><p class="note" @show="!!item.message">{{ item.message }}</p></article></template><article class="panel source-card" @show="!(status().sources || []).length"><b>No collection sources</b><small>Refresh to collect live provider data. Empty data is never replaced with samples.</small></article></section>
     <section class="golden"><article class="panel"><h3>Traffic</h3><strong>{{ fmt(requestTotal()) }}</strong><small>requests · summed buckets</small></article><article class="panel"><h3>Errors</h3><strong>{{ fmt(errorRate(), '%') }}</strong><small>{{ fmt(errorTotal()) }} errors</small></article><article class="panel"><h3>Latency</h3><strong>{{ fmt(p95(), ' ms') }}</strong><small>latest p95 · worst available source</small></article><article class="panel"><h3>Saturation</h3><strong>{{ fmt(saturationSignal()?.value, saturationSignal()?.unit ? ' ' + saturationSignal().unit : '') }}</strong><small>{{ saturationSignal()?.name || 'unsupported in this window' }}</small></article></section>
-    <section class="chart-grid"><template :for="series in [...traffic(), ...errors(), ...latency(), ...saturation()].slice(0, 8)"><article class="chart-card panel"><div class="chart-head"><b>{{ series.name }}</b><span>{{ series.source }} · {{ series.aggregation }} / {{ Math.round(series.bucketMs / 60000) }}m</span></div><div class="telemetry-bars" :aria-label="series.name + ' time series'"><template :for="point in series.points"><i :class="{ gap: point.gap }" :style="'height:' + barHeight(series, point) + '%'" :title="point.label + ': ' + (point.gap ? 'gap' : point.value)"></i></template></div><small>{{ timezone() }} · gaps shown as dim baseline bars <span @show="comparisonDelta(series) != null">· {{ comparisonDelta(series) > 0 ? '+' : '' }}{{ comparisonDelta(series)?.toFixed(1) }}% vs previous</span></small></article></template><article class="chart-card panel" @show="![...traffic(), ...errors(), ...latency(), ...saturation()].length"><b>No metric series</b><p class="note">The selected sources have not emitted these golden signals in this window, or the provider reports them as unsupported.</p></article></section>
+    <section class="chart-grid"><template :for="series in [...traffic(), ...errors(), ...latency(), ...saturation(), ...infrastructure(), ...siteSignals()].slice(0, 24)"><article class="chart-card panel"><div class="chart-head"><b>{{ series.name }}</b><span>{{ series.source }} · {{ series.aggregation }} / {{ Math.round(series.bucketMs / 60000) }}m</span></div><div class="telemetry-bars" :aria-label="series.name + ' time series'"><template :for="point in series.points"><i :class="{ gap: point.gap }" :style="'height:' + barHeight(series, point) + '%'" :title="point.label + ': ' + (point.gap ? 'gap' : point.value)"></i></template></div><small>{{ timezone() }} · gaps shown as dim baseline bars <span @show="comparisonDelta(series) != null">· {{ comparisonDelta(series) > 0 ? '+' : '' }}{{ comparisonDelta(series)?.toFixed(1) }}% vs previous</span></small></article></template><article class="chart-card panel" @show="![...traffic(), ...errors(), ...latency(), ...saturation(), ...infrastructure(), ...siteSignals()].length"><b>No metric series</b><p class="note">The selected sources have not emitted these golden signals in this window, or the provider reports them as unsupported.</p></article></section>
     <section class="section"><div class="section-title"><div><h2>Logs, requests, traces, and events</h2><p class="note">Bodies, authorization, cookies, query values, and configured PII are removed before persistence.</p></div><div class="header-actions"><input class="save-name" :value="savedName()" @input="savedName.set($event.target.value)" placeholder="Query name" aria-label="Saved query name"><button class="btn ghost sm" type="button" @click="saveQuery()">Save query</button><button class="btn ghost sm" type="button" @click="exportData('json')">JSON</button><button class="btn ghost sm" type="button" @click="exportData('csv')">CSV</button></div></div><div class="log-filters panel"><label>Search<input type="search" :value="textQuery()" @input="textQuery.set($event.target.value)" @change="applyFilters()" placeholder="Message, request, release…"></label><label>Level<select :value="level()" @change="level.set($event.target.value); applyFilters()"><option value="">All</option><option value="debug">debug</option><option value="info">info</option><option value="warning">warning</option><option value="error">error</option></select></label><label>Source<input :value="source()" @change="source.set($event.target.value); applyFilters()" placeholder="cloudwatch:http"></label></div><div class="saved" @show="savedQueries().length"><span>Saved:</span><template :for="item in savedQueries()"><button type="button" class="btn ghost sm" @click="useSaved(item)">{{ item.name }}</button></template></div><div class="panel telemetry-table-wrap"><table class="telemetry-table"><thead><tr><th scope="col">Time</th><th scope="col">Kind</th><th scope="col">Source</th><th scope="col">Signal</th><th scope="col">Message / value</th><th scope="col">Correlation</th></tr></thead><tbody><template :for="record in records()"><tr tabindex="0" @click="openCorrelation(record)" @keydown.enter="openCorrelation(record)"><td>{{ new Date(record.timestamp).toLocaleString([], {timeZone: timezone()}) }}</td><td><span class="tag">{{ record.kind }}</span></td><td>{{ record.source }}</td><td><span class="pill" :class="record.level === 'error' ? 'bad' : record.level === 'warning' ? 'warn' : ''">{{ record.level || record.name }}</span></td><td class="mono">{{ record.message || (record.value != null ? record.value + ' ' + (record.unit || '') : record.durationMs != null ? record.durationMs + 'ms' : record.name) }}</td><td class="mono">{{ record.requestId || record.traceId || record.releaseId || record.deploymentId || '—' }}</td></tr></template></tbody></table><div class="empty" @show="!records().length"><strong>No telemetry in this window</strong><span>Empty, unavailable, and filtered results remain explicit; no demo rows are shown.</span></div><button class="btn ghost load-more sm" type="button" @show="!!nextCursor()" @click="loadMore()">Load older records</button></div></section>
     <aside class="correlation panel" @show="!!correlation()"><button class="detail-close" type="button" aria-label="Close correlation detail" @click="correlation.set(null)">×</button><h2>Correlation</h2><p class="mono">{{ correlation()?.key }}</p><div class="timeline"><template :for="item in correlation()?.records || []"><article><span>{{ new Date(item.timestamp).toLocaleString() }}</span><b>{{ item.name }}</b><small>{{ item.source }} · {{ item.kind }} · {{ item.message || item.value || '' }}</small><nav><a @show="!!item.releaseId" :href="'/operations/releases?release=' + encodeURIComponent(item.releaseId)">Release</a><a @show="!!item.workloadId" :href="'/operations/workloads?search=' + encodeURIComponent(item.workloadId)">Workload</a></nav></article></template></div></aside>
   </main>

package/dist/ui-src/pages/server/metrics.stx

@@ -1,66 +1,179 @@
 <script server>
 import { renderResourceBars } from '../../src/charts.ts'
 
-// ts-cloud server health view. Real data is injected at build time via
-// TSCLOUD_DASHBOARD_DATA (see deploy/dashboard-data-server.ts); the sample
-// No fallback samples: missing data must remain visibly unavailable.
 let __d = null
 try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
 
 const server = __d?.server ?? { name: 'Server', provider: 'unavailable', region: 'unavailable', os: 'unavailable', uptime: 'unavailable' }
-const m = __d?.systemMetrics ?? { load: 0, cpus: 0, memUsedMb: 0, memTotalMb: 0, diskUsedPct: 0, diskUsedGb: 0, diskTotalGb: 0 }
+const m = __d?.systemMetrics ?? {
+  load: 0, load5: 0, load15: 0, cpuUsedPct: 0, cpus: 0,
+  memUsedMb: 0, memTotalMb: 0, memAvailableMb: 0, memCacheMb: 0,
+  swapUsedMb: 0, swapTotalMb: 0, diskUsedPct: 0, diskUsedGb: 0,
+  diskTotalGb: 0, inodeUsedPct: 0, networkRxBytes: 0, networkTxBytes: 0,
+  processes: 0,
+}
 const live = !!__d && !!__d?._serverReachable && !__d?.metricsUnavailable
-
-// ── Derived percentages ───────────────────────────────────────────────
 const memPct = live ? Math.min(100, Math.round((m.memUsedMb / Math.max(1, m.memTotalMb)) * 100)) : 0
 const loadPct = live ? Math.min(100, Math.round((m.load / Math.max(1, m.cpus || 1)) * 100)) : 0
+const cpuPct = live ? Math.min(100, Math.round(m.cpuUsedPct ?? loadPct)) : 0
 const diskPct = live ? Math.min(100, Math.round(m.diskUsedPct)) : 0
-
-// Human-friendly sizes.
+const swapPct = live && m.swapTotalMb ? Math.min(100, Math.round((m.swapUsedMb / m.swapTotalMb) * 100)) : 0
 const gb = mb => (mb / 1024).toFixed(1)
+const bytes = value => {
+  const n = Number(value || 0)
+  if (n >= 1024 ** 3) return (n / 1024 ** 3).toFixed(1) + ' GB'
+  if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + ' MB'
+  return Math.round(n / 1024) + ' KB'
+}
 const memUsedGb = gb(m.memUsedMb)
 const memTotalGb = gb(m.memTotalMb)
-const memFreeGb = gb(Math.max(0, m.memTotalMb - m.memUsedMb))
+const memAvailableGb = gb(m.memAvailableMb || Math.max(0, m.memTotalMb - m.memUsedMb))
 const diskFreeGb = Math.max(0, m.diskTotalGb - m.diskUsedGb)
-const loadPerCpu = (m.load / Math.max(1, m.cpus || 1)).toFixed(2)
 const unavailableNote = 'Live metrics are unavailable because the dashboard probe could not reach the server.'
-const loadPerCpuNote = `${loadPerCpu} per core`
-const memTotalNote = `of ${memTotalGb} GB total`
-const diskTotalNote = `of ${m.diskTotalGb} GB total`
-
-// ── Threshold tone: green < 70%, amber 70-90%, red ≥ 90% ───────────────
 function toneOf(p) { return p >= 90 ? 'bad' : p >= 70 ? 'warn' : 'ok' }
 function word(p) { return p >= 90 ? 'Critical' : p >= 70 ? 'Elevated' : 'Healthy' }
-const cpuTone = toneOf(loadPct), memTone = toneOf(memPct), diskTone = toneOf(diskPct)
-
-// Overall verdict = worst of the three vitals.
+const cpuTone = toneOf(cpuPct), memTone = toneOf(memPct), diskTone = toneOf(diskPct)
 const ranks = { ok: 0, warn: 1, bad: 2 }
 const worst = [cpuTone, memTone, diskTone].sort((a, b) => ranks[b] - ranks[a])[0]
 const measuredOverall = {
-  bad: { tone: 'bad', title: 'Action needed', note: 'One or more vitals are in the critical range.' },
-  warn: { tone: 'warn', title: 'Running warm', note: 'Resources are elevated - keep an eye on it.' },
-  ok: { tone: 'ok', title: 'All systems healthy', note: 'CPU, memory, and disk are well within limits.' },
+  bad: { tone: 'bad', title: 'Action needed', note: 'One or more host resources are in the critical range.' },
+  warn: { tone: 'warn', title: 'Running warm', note: 'At least one host resource is elevated.' },
+  ok: { tone: 'ok', title: 'All systems healthy', note: 'CPU, memory, and disk are within normal limits.' },
 }[worst]
 const overall = live ? measuredOverall : { tone: 'warn', title: 'Probe unavailable', note: unavailableNote }
-
-// One descriptor per gauge - rendered with @foreach below.
 const gaugeCards = [
-  { label: 'CPU Load', icon: 'cpu', tone: live ? cpuTone : 'warn', tag: live ? word(loadPct) : 'Unavailable', big: live ? loadPct : '-', pct: loadPct, unit: live ? 'of capacity' : 'probe offline', sub: live ? `${loadPerCpu} load / core · ${m.load} avg` : unavailableNote },
-  { label: 'Memory', icon: 'mem', tone: live ? memTone : 'warn', tag: live ? word(memPct) : 'Unavailable', big: live ? memPct : '-', pct: memPct, unit: live ? 'memory used' : 'probe offline', sub: live ? `${memUsedGb} / ${memTotalGb} GB · ${memFreeGb} free` : unavailableNote },
-  { label: 'Disk', icon: 'disk', tone: live ? diskTone : 'warn', tag: live ? word(diskPct) : 'Unavailable', big: live ? diskPct : '-', pct: diskPct, unit: live ? 'disk used' : 'probe offline', sub: live ? `${m.diskUsedGb} / ${m.diskTotalGb} GB · ${diskFreeGb} GB free` : unavailableNote },
+  { label: 'CPU utilization', icon: 'cpu', tone: live ? cpuTone : 'warn', tag: live ? word(cpuPct) : 'Unavailable', big: live ? cpuPct : '-', pct: cpuPct, unit: live ? 'processor busy' : 'probe offline', sub: live ? `${m.load} load across ${m.cpus} vCPU` : unavailableNote },
+  { label: 'Memory', icon: 'mem', tone: live ? memTone : 'warn', tag: live ? word(memPct) : 'Unavailable', big: live ? memPct : '-', pct: memPct, unit: live ? 'memory used' : 'probe offline', sub: live ? `${memUsedGb} / ${memTotalGb} GB, ${memAvailableGb} GB available` : unavailableNote },
+  { label: 'Disk', icon: 'disk', tone: live ? diskTone : 'warn', tag: live ? word(diskPct) : 'Unavailable', big: live ? diskPct : '-', pct: diskPct, unit: live ? 'disk used' : 'probe offline', sub: live ? `${m.diskUsedGb} / ${m.diskTotalGb} GB, ${diskFreeGb} GB free` : unavailableNote },
 ]
-
 const resourceChart = renderResourceBars([
-  { label: 'CPU', value: loadPct, detail: live ? `${m.load} load / ${m.cpus} vCPU` : unavailableNote },
+  { label: 'CPU', value: cpuPct, detail: live ? `${cpuPct}% busy, ${m.load} one-minute load` : unavailableNote },
   { label: 'Memory', value: memPct, detail: live ? `${memUsedGb} / ${memTotalGb} GB` : unavailableNote },
   { label: 'Disk', value: diskPct, detail: live ? `${m.diskUsedGb} / ${m.diskTotalGb} GB` : unavailableNote },
+  { label: 'Swap', value: swapPct, detail: live ? `${gb(m.swapUsedMb)} / ${gb(m.swapTotalMb)} GB` : unavailableNote },
 ], { disabled: !live })
+</script>
+<script client>
+import { usePolling } from '../../functions/usePolling.ts'
 
-const loadTrend = __d?.loadTrend ?? []
-const maxLoad = Math.max(...loadTrend, 1)
-const trendPeak = loadTrend.length ? Math.max(...loadTrend) : 0
-function barPct(v) { return Math.round((v / maxLoad) * 100) }
-function barTone(v) { const r = v / maxLoad; return r >= 0.9 ? 'peak' : r >= 0.7 ? 'hot' : '' }
+const ranges = { '1h': 3600000, '6h': 21600000, '24h': 86400000, '7d': 604800000, '30d': 2592000000 }
+const historyRange = state('24h')
+const historySeries = state([])
+const historyError = state('')
+const currentData = state(null)
+function historyParams() {
+  const duration = ranges[historyRange()] || ranges['24h']
+  const to = new Date()
+  const from = new Date(to.getTime() - duration)
+  const bucketMs = Math.max(60000, Math.ceil(duration / 96 / 60000) * 60000)
+  return new URLSearchParams({
+    from: from.toISOString(),
+    to: to.toISOString(),
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
+    names: [
+      'host.cpu.used_percent', 'host.load', 'host.cpu.capacity',
+      'host.memory.used_percent', 'host.memory.used', 'host.memory.total',
+      'host.disk.used_percent', 'host.swap.used_percent',
+      'host.disk.inode_used_percent',
+    ].join(','),
+    aggregation: 'avg',
+    bucketMs: String(bucketMs),
+  })
+}
+async function loadHistory() {
+  const response = await fetch('/api/telemetry/series?' + historyParams())
+  const body = await response.json()
+  if (!response.ok || body.ok === false) throw new Error(body.error || 'Historical metrics could not be loaded.')
+  historySeries.set(body.series || [])
+  historyError.set('')
+}
+async function loadCurrent() {
+  const response = await fetch('/api/dashboard-data')
+  const body = await response.json()
+  if (!response.ok || body._serverReachable !== true)
+    throw new Error(body.error || 'Current server metrics could not be loaded.')
+  currentData.set(body)
+}
+const { pollingState, pollingError, lastUpdatedAt, refresh } = usePolling(async () => {
+  try { await Promise.all([loadCurrent(), loadHistory()]) }
+  catch (error) { historyError.set(error?.message || String(error)); throw error }
+}, 60000)
+function liveMetric() { return currentData()?.systemMetrics || {} }
+function percent(value) { return Math.max(0, Math.min(100, Math.round(Number(value) || 0))) }
+function ratio(used, total) { return total ? percent(Number(used) / Number(total) * 100) : 0 }
+function liveCpu() { return percent(liveMetric().cpuUsedPct) }
+function liveMemory() { return ratio(liveMetric().memUsedMb, liveMetric().memTotalMb) }
+function liveDisk() { return percent(liveMetric().diskUsedPct) }
+function liveSwap() { return ratio(liveMetric().swapUsedMb, liveMetric().swapTotalMb) }
+function liveTone() {
+  const peak = Math.max(liveCpu(), liveMemory(), liveDisk())
+  return peak >= 90 ? 'bad' : peak >= 70 ? 'warn' : 'ok'
+}
+function liveStatus() { return liveTone() === 'bad' ? 'Action needed' : liveTone() === 'warn' ? 'Running warm' : 'All systems healthy' }
+function liveGb(value) { return (Number(value || 0) / 1024).toFixed(1) }
+function liveBytes(value) {
+  const n = Number(value || 0)
+  if (n >= 1024 ** 3) return (n / 1024 ** 3).toFixed(1) + ' GB'
+  if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + ' MB'
+  return Math.round(n / 1024) + ' KB'
+}
+const liveCards = derived(() => [
+  { label: 'CPU utilization', pct: liveCpu(), detail: `${liveMetric().load} load across ${liveMetric().cpus} vCPU` },
+  { label: 'Memory', pct: liveMemory(), detail: `${liveGb(liveMetric().memUsedMb)} / ${liveGb(liveMetric().memTotalMb)} GB` },
+  { label: 'Disk', pct: liveDisk(), detail: `${liveMetric().diskUsedGb} / ${liveMetric().diskTotalGb} GB` },
+  { label: 'Swap', pct: liveSwap(), detail: `${liveGb(liveMetric().swapUsedMb)} / ${liveGb(liveMetric().swapTotalMb)} GB` },
+])
+function series(name) { return historySeries().find(item => item.name === name) }
+function points(name) { return (series(name)?.points || []).filter(point => !point.gap && point.value != null) }
+function ratioPoints(primary, numerator, denominator, multiplier = 100) {
+  const direct = points(primary)
+  if (direct.length) return direct.map(point => ({ ...point, value: Math.max(0, Math.min(100, Number(point.value))) }))
+  const den = new Map(points(denominator).map(point => [point.timestamp, Number(point.value)]))
+  return points(numerator)
+    .filter(point => Number(den.get(point.timestamp)) > 0)
+    .map(point => ({ ...point, value: Math.max(0, Math.min(100, Number(point.value) / Number(den.get(point.timestamp)) * multiplier)) }))
+}
+function metricPoints(name) {
+  if (name === 'cpu') return ratioPoints('host.cpu.used_percent', 'host.load', 'host.cpu.capacity')
+  if (name === 'memory') return ratioPoints('host.memory.used_percent', 'host.memory.used', 'host.memory.total')
+  if (name === 'disk') return points('host.disk.used_percent')
+  if (name === 'swap') return points('host.swap.used_percent')
+  if (name === 'inodes') return points('host.disk.inode_used_percent')
+  return points('host.load')
+}
+function linePath(metric) {
+  const values = metricPoints(metric)
+  if (!values.length) return ''
+  const max = metric === 'load' ? Math.max(1, ...values.map(point => Number(point.value))) : 100
+  return values.map((point, index) => {
+    const x = values.length === 1 ? 50 : index / (values.length - 1) * 100
+    const y = 42 - Math.max(0, Math.min(1, Number(point.value) / max)) * 38
+    return `${index ? 'L' : 'M'} ${x.toFixed(2)} ${y.toFixed(2)}`
+  }).join(' ')
+}
+function areaPath(metric) {
+  const line = linePath(metric)
+  return line ? `${line} L 100 44 L 0 44 Z` : ''
+}
+function latest(metric) {
+  const values = metricPoints(metric)
+  return values.length ? Number(values.at(-1).value) : null
+}
+function peak(metric) {
+  const values = metricPoints(metric)
+  return values.length ? Math.max(...values.map(point => Number(point.value))) : null
+}
+function display(value, suffix = '%') { return value == null ? 'No data' : `${value.toFixed(value >= 10 ? 0 : 1)}${suffix}` }
+function samples(metric) { return metricPoints(metric).length }
+const historyCards = [
+  { key: 'cpu', label: 'CPU utilization', note: 'Actual busy time, with load-per-core fallback for older samples', tone: 'blue' },
+  { key: 'memory', label: 'Memory usage', note: 'Used RAM as a percentage of installed memory', tone: 'green' },
+  { key: 'disk', label: 'Disk usage', note: 'Root filesystem capacity consumed', tone: 'amber' },
+  { key: 'swap', label: 'Swap usage', note: 'Swap pressure across the selected period', tone: 'violet' },
+  { key: 'load', label: 'Load average', note: 'One-minute runnable and waiting task average', tone: 'cyan', suffix: '' },
+  { key: 'inodes', label: 'Inode usage', note: 'Root filesystem inode capacity consumed', tone: 'rose' },
+]
+function setRange(value) { historyRange.set(value); refresh() }
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -70,21 +183,55 @@ function barTone(v) { const r = v / maxLoad; return r >= 0.9 ? 'peak' : r >= 0.7
   <div class="wrap">
     <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Health</div>
     <header class="page">
-      <div>
-        <h1>Server health</h1>
-        <p>CPU, memory, disk &amp; vital signs for {{ server.name }}.</p>
+      <div><h1>Server health</h1><p>Current and historical resource pressure for {{ server.name }}.</p></div>
+      <div class="header-actions"><span class="pill" :class="pollingState() === 'live' ? 'ok' : 'warn'">{{ pollingState() }}</span><small>{{ lastUpdatedAt()?.toLocaleTimeString() || 'connecting' }}</small></div>
+    </header>
+
+    <div class="health-hero" :class="liveTone()" @show="!!currentData()">
+      <div class="status"><span class="led"></span><span>{{ liveStatus() }}<small>Live host probe, refreshed automatically.</small></span></div>
+      <div class="hmeta">
+        <div class="item"><span>OS</span><b>{{ currentData()?.server?.os || 'unavailable' }}</b></div>
+        <div class="item"><span>Region</span><b>{{ currentData()?.server?.provider || 'unavailable' }} · {{ currentData()?.server?.region || 'unavailable' }}</b></div>
+        <div class="item"><span>Uptime</span><b>{{ currentData()?.server?.uptime || 'unavailable' }}</b></div>
+        <div class="item"><span>vCPUs</span><b>{{ liveMetric().cpus }}</b></div>
       </div>
-      <div class="header-actions">
-        @if (live)<span class="ok pill">live</span>@else<span class="pill warn">probe unavailable</span>@endif
+    </div>
+
+    <div class="gauges live-gauges" @show="!!currentData()">
+      <template :for="card in liveCards()">
+        <div class="gauge" :class="card.pct >= 90 ? 'bad' : card.pct >= 70 ? 'warn' : 'ok'">
+          <div class="ghead">{{ card.label }}</div>
+          <div class="ring" :style="'--pct:' + card.pct"><div class="center"><div class="pct">{{ card.pct }}<sup>%</sup></div><div class="punit">used</div></div></div>
+          <div class="gsub">{{ card.detail }}</div>
+        </div>
+      </template>
+    </div>
+
+    <div class="section" @show="!!currentData()">
+      <h2>Vital signs</h2>
+      <div class="host-vitals vitals">
+        <div class="vital"><div class="vlabel">Load averages</div><div class="vval">{{ liveMetric().load }} / {{ liveMetric().load5 }} / {{ liveMetric().load15 }}</div><div class="vnote">1, 5, and 15 minutes</div></div>
+        <div class="vital"><div class="vlabel">Memory available</div><div class="vval">{{ liveGb(liveMetric().memAvailableMb) }} <small>GB</small></div><div class="vnote">{{ liveGb(liveMetric().memCacheMb) }} GB cache</div></div>
+        <div class="vital"><div class="vlabel">Disk inodes</div><div class="vval">{{ liveMetric().inodeUsedPct }}<small>% used</small></div><div class="vnote">Filesystem entry capacity</div></div>
+        <div class="vital"><div class="vlabel">Processes</div><div class="vval">{{ liveMetric().processes }}</div><div class="vnote">Current process count</div></div>
+        <div class="vital"><div class="vlabel">Network received</div><div class="vval">{{ liveBytes(liveMetric().networkRxBytes) }}</div><div class="vnote">Since host boot</div></div>
+        <div class="vital"><div class="vlabel">Network sent</div><div class="vval">{{ liveBytes(liveMetric().networkTxBytes) }}</div><div class="vnote">Since host boot</div></div>
+        <div class="vital"><div class="vlabel">Disk free</div><div class="vval">{{ Math.max(0, Number(liveMetric().diskTotalGb) - Number(liveMetric().diskUsedGb)) }} <small>GB</small></div><div class="vnote">{{ liveMetric().diskTotalGb }} GB total</div></div>
+        <div class="vital"><div class="vlabel">Swap</div><div class="vval">{{ liveSwap() }}<small>% used</small></div><div class="vnote">{{ liveGb(liveMetric().swapUsedMb) }} / {{ liveGb(liveMetric().swapTotalMb) }} GB</div></div>
       </div>
-    </header>
+    </div>
 
-    <!-- Verdict banner: the one-glance "is the box OK?" answer. -->
-    <div class="health-hero {{ overall.tone }}">
-      <div class="status">
-        <span class="led"></span>
-        <span>{{ overall.title }}<small>{{ overall.note }}</small></span>
+    <div class="section" @show="!!currentData()">
+      <h2>Current resource shape</h2>
+      <div class="live-bars panel">
+        <template :for="card in liveCards()">
+          <div class="live-bar"><div><span>{{ card.label }}</span><strong>{{ card.pct }}%</strong></div><div class="live-bar-track"><i :style="'width:' + card.pct + '%'"></i></div><small>{{ card.detail }}</small></div>
+        </template>
       </div>
+    </div>
+
+    <div class="health-hero {{ overall.tone }}" @show="!currentData()">
+      <div class="status"><span class="led"></span><span>{{ overall.title }}<small>{{ overall.note }}</small></span></div>
       <div class="hmeta">
         <div class="item"><span>OS</span><b>{{ server.os }}</b></div>
         <div class="item"><span>Region</span><b>{{ server.provider }} · {{ server.region }}</b></div>
@@ -93,83 +240,92 @@ function barTone(v) { const r = v / maxLoad; return r >= 0.9 ? 'peak' : r >= 0.7
       </div>
     </div>
 
-    <!-- Centerpiece: radial gauges for the three vitals. -->
-    <div class="gauges">
+    <div class="gauges" @show="!currentData()">
       @foreach (gaugeCards as g)
         <div class="gauge {{ g.tone }}">
-          <div class="ghead">
-            @if (g.icon === 'cpu')
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>
-            @elseif (g.icon === 'mem')
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7v-2M12 7v-2M17 7v-2M7 21v-2M12 21v-2M17 21v-2"/></svg>
-            @else
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>
-            @endif
-            {{ g.label }}
-          </div>
-          <div class="ring" style="--pct: {{ g.pct }}">
-            <div class="center">
-              <div class="pct">{{ g.big }}@if (live)<sup>%</sup>@endif</div>
-              <div class="punit">{{ g.unit }}</div>
-            </div>
-          </div>
-          <div class="gsub">{{ g.sub }}</div>
-          <div class="gtag">{{ g.tag }}</div>
+          <div class="ghead">{{ g.label }}</div>
+          <div class="ring" style="--pct: {{ g.pct }}"><div class="center"><div class="pct">{{ g.big }}@if (live)<sup>%</sup>@endif</div><div class="punit">{{ g.unit }}</div></div></div>
+          <div class="gsub">{{ g.sub }}</div><div class="gtag">{{ g.tag }}</div>
         </div>
       @endforeach
     </div>
 
-    <!-- Secondary vital signs. -->
-    <div class="section">
+    <div class="section" @show="!currentData()">
       <h2>Vital signs</h2>
-      <div class="vitals">
-        <div class="vital">
-          <div class="vlabel">Load average</div>
-          <div class="vval">{{ live ? m.load : 'Unavailable' }} @if (live)<small>/ {{ m.cpus }} cores</small>@endif</div>
-          <div class="vnote">{{ live ? loadPerCpuNote : unavailableNote }}</div>
-        </div>
-        <div class="vital">
-          <div class="vlabel">Memory free</div>
-          <div class="vval">{{ live ? memFreeGb : 'Unavailable' }} @if (live)<small>GB</small>@endif</div>
-          <div class="vnote">{{ live ? memTotalNote : unavailableNote }}</div>
-        </div>
-        <div class="vital">
-          <div class="vlabel">Disk free</div>
-          <div class="vval">{{ live ? diskFreeGb : 'Unavailable' }} @if (live)<small>GB</small>@endif</div>
-          <div class="vnote">{{ live ? diskTotalNote : unavailableNote }}</div>
-        </div>
-        <div class="vital">
-          <div class="vlabel">Uptime</div>
-          <div class="vval">{{ live ? server.uptime : 'Unavailable' }}</div>
-          <div class="vnote">{{ server.os }}</div>
-        </div>
+        <div class="host-vitals vitals">
+        <div class="vital"><div class="vlabel">Load averages</div><div class="vval">{{ live ? `${m.load} / ${m.load5} / ${m.load15}` : 'Unavailable' }}</div><div class="vnote">1, 5, and 15 minutes</div></div>
+        <div class="vital"><div class="vlabel">Memory available</div><div class="vval">{{ live ? memAvailableGb : 'Unavailable' }} @if (live)<small>GB</small>@endif</div><div class="vnote">{{ live ? `${gb(m.memCacheMb)} GB cache` : unavailableNote }}</div></div>
+        <div class="vital"><div class="vlabel">Swap</div><div class="vval">{{ live ? swapPct : 'Unavailable' }}@if (live)<small>% used</small>@endif</div><div class="vnote">{{ live ? `${gb(m.swapUsedMb)} / ${gb(m.swapTotalMb)} GB` : unavailableNote }}</div></div>
+        <div class="vital"><div class="vlabel">Disk inodes</div><div class="vval">{{ live ? m.inodeUsedPct : 'Unavailable' }}@if (live)<small>% used</small>@endif</div><div class="vnote">Filesystem entry capacity</div></div>
+        <div class="vital"><div class="vlabel">Network received</div><div class="vval">{{ live ? bytes(m.networkRxBytes) : 'Unavailable' }}</div><div class="vnote">Since host boot</div></div>
+        <div class="vital"><div class="vlabel">Network sent</div><div class="vval">{{ live ? bytes(m.networkTxBytes) : 'Unavailable' }}</div><div class="vnote">Since host boot</div></div>
+        <div class="vital"><div class="vlabel">Processes</div><div class="vval">{{ live ? m.processes : 'Unavailable' }}</div><div class="vnote">Current process count</div></div>
+        <div class="vital"><div class="vlabel">Disk free</div><div class="vval">{{ live ? diskFreeGb : 'Unavailable' }} @if (live)<small>GB</small>@endif</div><div class="vnote">{{ live ? `${m.diskTotalGb} GB total` : unavailableNote }}</div></div>
       </div>
     </div>
 
-    <!-- Load over recent snapshots. -->
-    <div class="section">
-      <h2>Resource chart</h2>
-      <div class="chart-panel panel">
-        {{{ resourceChart }}}
-      </div>
+    <div class="section" @show="!currentData()">
+      <h2>Current resource shape</h2>
+      <div class="chart-panel panel">{{{ resourceChart }}}</div>
     </div>
 
     <div class="section">
-      <h2>CPU load trend</h2>
-      <div class="chart panel">
-        @if (live && loadTrend.length)
-          <div class="spark">
-            @foreach (loadTrend as v)
-              <i class="{{ barTone(v) }}" style="height: {{ barPct(v) }}%"></i>
-            @endforeach
-          </div>
-          <div class="xaxis"><span>-24 snapshots</span><span>peak {{ trendPeak }}% · now</span></div>
-          <p class="note">% of CPU capacity · refresh with <span class="mono">cloud server:monitoring {{ server.name }}</span></p>
-        @else
-          <div class="compact empty"><strong>No historical trend</strong><span>Open <a href="/operations/observability">Observability</a> for persisted host metrics, source freshness, timezone, and gaps.</span></div>
-        @endif
+      <div class="history-heading">
+        <div><h2>Historical performance</h2><p>Persisted independently of browser sessions. Gaps remain visible as missing samples.</p></div>
+        <div class="segmented" role="group" aria-label="Historical metric range">
+          <template :for="value in ['1h','6h','24h','7d','30d']"><button type="button" :class="{active:historyRange()===value}" @click="setRange(value)">{{ value }}</button></template>
+        </div>
+      </div>
+      <p class="bad notice" role="status" @show="!!historyError() || !!pollingError()">{{ historyError() || pollingError() }}</p>
+      <div class="history-grid">
+        <template :for="card in historyCards">
+          <article class="history-card panel" :class="card.tone">
+            <div class="history-card-head"><div><h3>{{ card.label }}</h3><p>{{ card.note }}</p></div><strong>{{ display(latest(card.key), card.suffix ?? '%') }}</strong></div>
+            <svg viewBox="0 0 100 46" preserveAspectRatio="none" role="img" :aria-label="card.label + ' history'">
+              <line x1="0" x2="100" y1="23" y2="23" class="history-gridline"></line>
+              <path :d="areaPath(card.key)" class="history-area"></path>
+              <path :d="linePath(card.key)" class="history-line"></path>
+            </svg>
+            <div class="history-meta"><span>{{ samples(card.key) }} samples</span><span>peak {{ display(peak(card.key), card.suffix ?? '%') }}</span></div>
+            <div class="compact empty" @show="samples(card.key) === 0"><strong>Collecting history</strong><span>The first persisted point appears within one minute.</span></div>
+          </article>
+        </template>
       </div>
+      <p class="note">Retention, source freshness, comparisons, logs, and exports are available in <a href="/operations/observability">Observability</a>.</p>
     </div>
   </div>
+  <style>
+    .host-vitals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .live-gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .live-bars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
+    .live-bar > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
+    .live-bar strong { color:var(--txt); }
+    .live-bar small { display:block; margin-top:7px; color:var(--txt3); font-size:11px; }
+    .live-bar-track { height:7px; margin-top:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
+    .live-bar-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#22d3ee); transition:width .35s ease; }
+    .history-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:14px; }
+    .history-heading h2 { font-size:15px; }
+    .history-heading p { margin-top:5px; color:var(--txt3); font-size:12px; }
+    .history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
+    .history-card { --series:var(--accent); position:relative; overflow:hidden; min-height:244px; }
+    .history-card.green { --series:var(--ok); }
+    .history-card.amber { --series:var(--warn); }
+    .history-card.violet { --series:#a78bfa; }
+    .history-card.cyan { --series:#22d3ee; }
+    .history-card.rose { --series:#fb7185; }
+    .history-card-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
+    .history-card-head h3 { color:var(--txt); font-size:13px; text-transform:none; letter-spacing:0; }
+    .history-card-head p { color:var(--txt3); font-size:11px; line-height:1.45; margin-top:4px; max-width:44ch; }
+    .history-card-head strong { color:var(--series); font-size:22px; white-space:nowrap; }
+    .history-card svg { width:100%; height:126px; margin-top:14px; overflow:visible; }
+    .history-gridline { stroke:rgba(255,255,255,.07); stroke-width:.35; stroke-dasharray:2 3; vector-effect:non-scaling-stroke; }
+    .history-area { fill:color-mix(in srgb,var(--series) 16%,transparent); }
+    .history-line { fill:none; stroke:var(--series); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
+    .history-meta { display:flex; justify-content:space-between; color:var(--txt3); font-size:11px; }
+    .history-card .empty { position:absolute; inset:86px 18px 38px; min-height:0; background:rgba(12,16,23,.92); }
+    @media(max-width:900px){.host-vitals,.history-grid,.live-gauges{grid-template-columns:repeat(2,minmax(0,1fr));}.history-heading{align-items:flex-start;flex-direction:column;}}
+    @media(max-width:560px){.host-vitals,.history-grid,.live-gauges,.live-bars{grid-template-columns:1fr}.history-heading .segmented{overflow-x:auto}.history-heading .segmented button{min-width:48px}}
+    @media(prefers-reduced-motion:reduce){.health-hero .status .led{animation:none}.gauge{transition:none}}
+  </style>
 </body>
 </html>