@stacksjs/ts-cloud 0.5.26 → 0.5.27

package/dist/ui-src/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@ts-cloud/ui",
+  "type": "module",
+  "private": true
+}

package/dist/ui-src/pages/index.stx

@@ -0,0 +1,308 @@
+<script server>
+import { renderDeploymentSparkline, renderResourceBars } from '../src/charts.ts'
+
+// ts-cloud Server dashboard. Real data is injected at build time via the
+// TSCLOUD_DASHBOARD_DATA env var (run `cloud dashboard:build`); the sample values
+// below render the design when nothing is injected. Each section drills into a
+// dedicated page under /server/*.
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') }
+catch { __d = null }
+
+const meta = {
+  title: 'ts-cloud - Dashboard',
+  description: 'ts-cloud server & deployment dashboard',
+}
+
+const server = __d?.server ?? {
+  name: 'stacks-production-app',
+  provider: 'Hetzner',
+  region: 'fsn1',
+  ip: '-',
+  os: 'Linux',
+  uptime: '-',
+}
+
+const metrics = __d?.systemMetrics ?? {
+  load: 0.42,
+  cpus: 4,
+  memUsedMb: 2480,
+  memTotalMb: 7860,
+  diskUsedPct: 38,
+}
+const hasLivePayload = !!__d
+const metricsLive = hasLivePayload ? !!__d?._serverReachable && !__d?.metricsUnavailable : true
+const memPct = metricsLive ? Math.round((metrics.memUsedMb / Math.max(1, metrics.memTotalMb)) * 100) : null
+const loadPct = metricsLive ? Math.min(100, Math.round((metrics.load / Math.max(1, metrics.cpus || 1)) * 100)) : null
+const diskPct = metricsLive ? Math.min(100, Math.round(metrics.diskUsedPct)) : null
+// Threshold tone: green < 70%, amber 70-90%, red >= 90% - shared with the
+// server health view (/server/metrics).
+function healthTone(p) { return p >= 90 ? 'bad' : p >= 70 ? 'warn' : 'ok' }
+const ranks = { ok: 0, warn: 1, bad: 2 }
+const overallTone = metricsLive ? [healthTone(loadPct), healthTone(memPct), healthTone(diskPct)].sort((a, b) => ranks[b] - ranks[a])[0] : 'warn'
+const overallWord = metricsLive ? { ok: 'healthy', warn: 'elevated', bad: 'critical' }[overallTone] : 'probe unavailable'
+const gb = mb => (mb / 1024).toFixed(1)
+const metricStat = (pct, detail) => metricsLive ? `${pct}%` : 'Unavailable'
+const metricSmall = detail => metricsLive ? detail : 'probe unavailable'
+const metricWidth = pct => metricsLive ? pct : 0
+const cpuSmall = ` · ${metrics.load}/${metrics.cpus}`
+const memSmall = ` · ${gb(metrics.memUsedMb)}/${gb(metrics.memTotalMb)} GB`
+
+const services = __d?.services ?? [
+  { name: 'rpx-gateway', status: 'configured' },
+  { name: 'redis', status: 'configured' },
+]
+
+const sites = __d?.sites ?? [
+  { name: 'main', route: 'stacksjs.com', href: 'https://stacksjs.com', kind: 'stacks', runtime: 'bun', tls: 'https', deploy: 'service', status: 'live' },
+  { name: 'api', route: 'internal', kind: 'api', runtime: 'bun', tls: 'loopback', deploy: 'service', status: 'live' },
+  { name: 'docs', route: 'stacksjs.com/docs', href: 'https://stacksjs.com/docs', kind: 'bunpress', runtime: 'static/bun', tls: 'https', deploy: 'server static', status: 'live' },
+  { name: 'blog', route: 'stacksjs.com/blog', href: 'https://stacksjs.com/blog', kind: 'bunpress blog', runtime: 'static/bun', tls: 'https', deploy: 'server static', status: 'live' },
+  { name: 'public', route: 'stacksjs.com', href: 'https://stacksjs.com', kind: 'static', runtime: 'static/bun', tls: 'https', deploy: 'server static', status: 'shadowed' },
+  { name: 'verygoodadblock', route: 'verygoodadblock.org', href: 'https://verygoodadblock.org', kind: 'stx static', runtime: 'static/bun', tls: 'https', deploy: 'server static', status: 'live' },
+]
+
+const workers = __d?.workers ?? [
+  { name: 'default', processes: 2, status: 'running' },
+  { name: 'emails', processes: 1, status: 'running' },
+]
+const scheduler = __d?.serverScheduler ?? { enabled: true, lastRun: '36s ago' }
+
+const deployments = __d?.serverDeployments ?? [
+]
+const deploymentsEmptyReason = __d?.deploymentsEmptyReason ?? 'No deployment history has been recorded yet.'
+const deploymentChart = renderDeploymentSparkline(deployments)
+
+const backup = __d?.backup ?? { enabled: false, last: 'not configured', size: '0 MB', destination: 'off', retention: 0 }
+
+const sshKeys = __d?.sshKeys ?? [
+]
+const diagnostics = __d?.diagnostics ?? []
+const activity = __d?.activity ?? []
+const security = __d?.security ?? { firewall: { status: 'configured' }, ports: [], tlsCertificates: [] }
+const failingChecks = diagnostics.filter(check => check.status === 'fail').length
+const warningChecks = diagnostics.filter(check => check.status === 'warn').length
+
+function statusTone(status) {
+  if (status === 'running' || status === 'live' || status === 'success') return 'ok'
+  if (status === 'failed' || status === 'stopped') return 'bad'
+  return 'warn'
+}
+
+const resourceChart = renderResourceBars([
+  { label: 'CPU', value: loadPct ?? 0, detail: metricsLive ? `${metrics.load} load / ${metrics.cpus} vCPU` : 'Server probe unavailable' },
+  { label: 'Memory', value: memPct ?? 0, detail: metricsLive ? `${gb(metrics.memUsedMb)} / ${gb(metrics.memTotalMb)} GB` : 'Server probe unavailable' },
+  { label: 'Disk', value: diskPct ?? 0, detail: metricsLive ? `${metrics.diskUsedGb ?? 0} / ${metrics.diskTotalGb ?? 0} GB` : 'Server probe unavailable' },
+], { disabled: !metricsLive })
+
+// Expose the full payload to <script client> via the stx server→client bridge
+// (the `__d`/`$`-prefixed names are intentionally bridge-excluded).
+const initialData = __d ?? null
+</script>
+<script client>
+// Live at-a-glance metrics: seeded from build-time data (stx server→client
+// bridge) so the cards render real numbers on first paint, then polled from
+// /api/dashboard-data — bind cards, health pill, indicator, and service
+// statuses reactively (no manual DOM).
+const data = state(initialData)
+const liveData = derived(() => { const d = data(); return !!d && d._serverReachable && !d.metricsUnavailable })
+function n(v, d) { const x = Number(v); return Number.isFinite(x) ? x : (d || 0) }
+function gbVal(mb) { return (n(mb) / 1024).toFixed(1) }
+function pctOf(which) {
+  const d = data(); const m = (d && d.systemMetrics) || {}
+  if (!liveData()) return null
+  if (which === 'load') return Math.min(100, Math.round((n(m.load) / Math.max(1, n(m.cpus, 1))) * 100))
+  if (which === 'mem') return Math.round((n(m.memUsedMb) / Math.max(1, n(m.memTotalMb))) * 100)
+  return Math.min(100, Math.round(n(m.diskUsedPct)))
+}
+const loadP = derived(() => pctOf('load'))
+const memP = derived(() => pctOf('mem'))
+const diskP = derived(() => pctOf('disk'))
+function pTone(p) { return p == null ? 'warn' : (p >= 90 ? 'bad' : (p >= 70 ? 'warn' : 'ok')) }
+function pDisp(p) { return p == null ? 'Unavailable' : p + '%' }
+function barCss(p) { return 'bar ' + pTone(p) }
+function barStyle(p) { return 'width: ' + (p == null ? 0 : p) + '%' }
+const cpuSub = derived(() => { const m = (data() && data().systemMetrics) || {}; return liveData() ? ' · ' + n(m.load) + '/' + n(m.cpus, 1) : 'probe unavailable' })
+const memSub = derived(() => { const m = (data() && data().systemMetrics) || {}; return liveData() ? ' · ' + gbVal(m.memUsedMb) + '/' + gbVal(m.memTotalMb) + ' GB' : 'probe unavailable' })
+const overallC = derived(() => { if (!liveData()) return 'warn'; const r = { ok: 0, warn: 1, bad: 2 }; return [pTone(loadP()), pTone(memP()), pTone(diskP())].sort((a, b) => r[b] - r[a])[0] })
+const overallWordC = derived(() => liveData() ? ({ ok: 'healthy', warn: 'elevated', bad: 'critical' }[overallC()]) : 'probe unavailable')
+const indicator = derived(() => liveData() ? 'live' : 'snapshot')
+const servicesC = derived(() => (data() && data().services) || [])
+function svcTone(s) { return (s === 'running' || s === 'active') ? 'ok' : ((s === 'failed' || s === 'stopped') ? 'bad' : 'warn') }
+async function refresh() { try { const res = await fetch('/api/dashboard-data'); if (!res.ok) return; data.set(await res.json()) } catch {} }
+onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () => clearInterval(id) })
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  @include('./partials/head', { title: meta.title })
+  <meta name="description" content="{{ meta.description }}">
+</head>
+<body>
+  @include('./partials/nav', { active: 'server', name: server.name, env: 'production' })
+
+  <div class="wrap">
+    <header class="page">
+      <div>
+        <h1>Server Dashboard</h1>
+        <p>{{ server.provider }} · {{ server.region }} · {{ server.os }}</p>
+        <div class="server-line">
+          <span>IP <b>{{ server.ip }}</b></span>
+          <span>Uptime <b>{{ server.uptime }}</b></span>
+          <span>CPUs <b>{{ metrics.cpus }}</b></span>
+          <span class="pill" :class="overallC()">{{ overallWordC() }}</span>
+        </div>
+      </div>
+      <div class="header-actions"><span class="env" title="Auto-refreshing every 10s">{{ indicator() }}</span><a class="btn ghost" href="/server/actions">Operations</a></div>
+    </header>
+
+    <div class="grid cards">
+      <a class="panel" href="/server/metrics">
+        <h3>CPU Load</h3>
+        <div class="stat">{{ pDisp(loadP()) }}<small>{{ cpuSub() }}</small></div>
+        <div :class="barCss(loadP())"><i :style="barStyle(loadP())"></i></div>
+      </a>
+      <a class="panel" href="/server/metrics">
+        <h3>Memory</h3>
+        <div class="stat">{{ pDisp(memP()) }}<small>{{ memSub() }}</small></div>
+        <div :class="barCss(memP())"><i :style="barStyle(memP())"></i></div>
+      </a>
+      <a class="panel" href="/server/metrics">
+        <h3>Disk</h3>
+        <div class="stat">{{ pDisp(diskP()) }}<small></small></div>
+        <div :class="barCss(diskP())"><i :style="barStyle(diskP())"></i></div>
+      </a>
+      <a class="panel" href="/server/backups">
+        <h3>Backups</h3>
+        <div class="stat">{{ backup.size }}</div>
+        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">Last {{ backup.last }}</p>
+      </a>
+    </div>
+
+    <div class="grid cards-3" style="margin-top:16px;">
+      <a class="panel" href="/server/security">
+        <h3>Security</h3>
+        <div class="stat"><span class="pill {{ statusTone(security.firewall.status === 'active' || security.firewall.status === 'configured' ? 'running' : 'configured') }}">{{ security.firewall.status }}</span></div>
+        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">{{ security.ports.length }} listeners · {{ security.tlsCertificates.length }} certs</p>
+      </a>
+      <a class="panel" href="/server/diagnostics">
+        <h3>Diagnostics</h3>
+        <div class="stat">{{ failingChecks }}<small> fail</small></div>
+        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">{{ warningChecks }} warnings</p>
+      </a>
+      <a class="panel" href="/server/activity">
+        <h3>Activity</h3>
+        <div class="stat">{{ activity.length }}</div>
+        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">deploys, warnings, key changes</p>
+      </a>
+    </div>
+
+    <div class="section">
+      <h2>Resource Shape <a class="more" href="/server/metrics">Open health →</a></h2>
+      <div class="chart-panel panel">
+        {{{ resourceChart }}}
+        @if (!metricsLive)
+          <p class="note">The dashboard has config/state data, but the live server probe did not return metrics.</p>
+        @endif
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Services <span class="more"><a href="/server/services">View all →</a> <a href="/server/logs">Logs →</a> <a href="/server/security">Security →</a></span></h2>
+      <div class="panel">
+        <div class="svc">
+          <template :for="svc in servicesC()">
+            <div class="item">{{ svc.name }} <span class="pill" :class="svcTone(svc.status)">{{ svc.status }}</span></div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>SSH Keys <a class="more" href="/server/ssh-keys">Manage →</a></h2>
+      <div class="panel">
+        @if (sshKeys.length)
+          @foreach (sshKeys as key)
+            <div class="key">
+              <span class="ok pill"></span>
+              <b>{{ key.name }}</b>
+              <span style="color: var(--txt3); font-size: 12px">added {{ key.added }}</span>
+              <span class="fp">{{ key.fingerprint }}</span>
+            </div>
+          @endforeach
+        @else
+          <div class="compact empty"><strong>No SSH keys configured</strong><span>Add keys from the management page and apply them on the next deploy.</span></div>
+        @endif
+        <p class="note">SSH keys are managed in <span class="mono">infrastructure.compute.sshKeys</span> in your cloud config and applied on the next <span class="mono">cloud deploy</span>.</p>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Sites <a class="more" href="/server/sites">View all →</a></h2>
+      <div class="panel">
+        <table>
+          <thead>
+            <tr><th>Site</th><th>Route</th><th>Kind</th><th>Runtime</th><th>TLS</th><th>Deploy</th><th>Status</th></tr>
+          </thead>
+          <tbody>
+            @foreach (sites as site)
+              <tr>
+                <td><b>{{ site.name }}</b></td>
+                <td>
+                  @if (site.href)
+                    <a href="{{ site.href }}" class="mono">{{ site.route }}</a>
+                  @else
+                    <span class="mono">{{ site.route }}</span>
+                  @endif
+                </td>
+                <td><span class="tag">{{ site.kind ?? site.type }}</span></td>
+                <td class="mono">{{ site.runtime }}</td>
+                <td><span class="{{ site.tls === 'https' ? 'ok' : 'warn' }} pill">{{ site.tls }}</span></td>
+                <td style="color: var(--txt2)">{{ site.deploy }}</td>
+                <td><span class="pill {{ statusTone(site.status) }}">{{ site.status }}</span></td>
+              </tr>
+            @endforeach
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="cols section">
+      <div>
+        <h2>Recent Deployments <a class="more" href="/server/deployments">View all →</a></h2>
+        <div class="panel">
+          {{{ deploymentChart }}}
+          @if (deployments.length)
+            @foreach (deployments as d)
+              <div class="deploy">
+                <span class="pill {{ statusTone(d.status) }}">{{ d.status }}</span>
+                <span class="mono">{{ d.sha }}</span>
+                <span style="color: var(--txt2)">{{ d.site }} · {{ d.branch }}</span>
+                <span class="when">{{ d.when }} · {{ d.took }}</span>
+              </div>
+            @endforeach
+          @else
+            <div class="compact empty"><strong>No recent deployments</strong><span>{{ deploymentsEmptyReason }}</span></div>
+          @endif
+        </div>
+      </div>
+      <div>
+        <h2>Queues &amp; Scheduler <a class="more" href="/server/workers">Details →</a></h2>
+        <div class="panel">
+          @foreach (workers as w)
+            <div class="kv"><span>queue:{{ w.name }} ×{{ w.processes }}</span> <span class="pill {{ statusTone(w.status) }}">{{ w.status }}</span></div>
+          @endforeach
+          <div class="kv"><span>scheduler</span> @if (scheduler.enabled)<span class="ok pill">on · {{ scheduler.lastRun }}</span>@else<span class="pill warn">off</span>@endif</div>
+        </div>
+        <div style="height: 16px"></div>
+        <h2>Backups <a class="more" href="/server/backups">Details →</a></h2>
+        <div class="panel">
+          <div class="kv"><span>destination</span> <span class="mono">{{ backup.destination }}</span></div>
+          <div class="kv"><span>retention</span> <span>{{ backup.retention }} copies</span></div>
+          <div class="kv"><span>last run</span> <span style="color: var(--txt2)">{{ backup.last }}</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/dist/ui-src/pages/partials/head.stx

@@ -0,0 +1,294 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ title ?? 'ts-cloud' }}</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0b1020; --bg2: #0f1730; --panel: rgba(255,255,255,0.04); --panel-br: rgba(255,255,255,0.08);
+    --txt: #e8edf7; --txt2: #9fb0cc; --txt3: #64748b;
+    --accent: #5b8cff; --ok: #34d399; --okbg: rgba(52,211,153,0.12);
+    --bad: #f87171; --badbg: rgba(248,113,113,0.12); --warn: #fbbf24; --warnbg: rgba(251,191,36,0.12);
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html { background: var(--bg); min-height: 100%; }
+  body {
+    font-family: 'Inter', system-ui, sans-serif; color: var(--txt); min-height: 100vh;
+    background: radial-gradient(1200px 600px at 80% -10%, rgba(91,140,255,0.12), transparent 60%), linear-gradient(160deg, var(--bg), var(--bg2));
+    -webkit-font-smoothing: antialiased;
+  }
+  a { color: inherit; text-decoration: none; }
+  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }
+
+  nav {
+    display: flex; align-items: center; gap: 16px; padding: 18px 24px; position: sticky; top: 0; z-index: 10;
+    background: rgba(11,16,32,0.7); backdrop-filter: blur(14px); border-bottom: 1px solid var(--panel-br);
+  }
+  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
+  .brand .dot { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: 0 0 18px rgba(91,140,255,0.6); }
+  .tabs { display: flex; gap: 4px; margin-left: 18px; }
+  .tabs a { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--txt2); }
+  .tabs a.active { background: rgba(91,140,255,0.14); color: var(--accent); }
+  .nav-meta { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--txt2); font-size: 13px; }
+  .env { padding: 4px 10px; border-radius: 999px; background: var(--okbg); color: var(--ok); font-weight: 600; font-size: 12px; }
+  .env-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--panel-br); background: rgba(255,255,255,0.035); border-radius: 999px; }
+  .env-opt { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--txt2); }
+  .env-opt:hover { color: var(--txt); }
+  .env-opt.active { background: var(--okbg); color: var(--ok); }
+
+  header.page { padding: 30px 0 22px; display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
+  header.page h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
+  header.page p { color: var(--txt2); margin-top: 4px; font-size: 14px; }
+  .server-line { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; color: var(--txt2); font-size: 13px; }
+  .server-line b { color: var(--txt); font-weight: 600; }
+  .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+
+  /* Breadcrumb / back link for drill-down pages */
+  .crumbs { display: flex; align-items: center; gap: 8px; padding-top: 26px; font-size: 13px; color: var(--txt3); }
+  .crumbs a { color: var(--txt2); }
+  .crumbs a:hover { color: var(--accent); }
+  .crumbs .sep { color: var(--txt3); }
+
+  .grid { display: grid; gap: 16px; }
+  .cards { grid-template-columns: repeat(4, 1fr); }
+  .cards-3 { grid-template-columns: repeat(3, 1fr); }
+  .cards-2 { grid-template-columns: repeat(2, 1fr); }
+  @media (max-width: 880px) { .cards, .cards-3, .cards-2 { grid-template-columns: repeat(2, 1fr); } }
+  .panel { background: var(--panel); border: 1px solid var(--panel-br); border-radius: 16px; padding: 18px; backdrop-filter: blur(6px); }
+  a.panel { display: block; transition: border-color .15s, transform .15s; }
+  a.panel:hover { border-color: rgba(91,140,255,0.5); transform: translateY(-1px); }
+  .panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt3); font-weight: 700; }
+  .stat { font-size: 28px; font-weight: 800; margin-top: 8px; letter-spacing: -0.02em; }
+  .stat small { font-size: 14px; color: var(--txt2); font-weight: 500; }
+  .bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 12px; overflow: hidden; }
+  .bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #8b5cf6); }
+
+  .section { margin-top: 30px; }
+  .section > h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+  .section > h2 .more { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--accent); }
+  .section > h2 .more a { color: var(--accent); }
+  .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
+  @media (max-width: 880px) { .cols { grid-template-columns: 1fr; } }
+
+  table { width: 100%; border-collapse: collapse; font-size: 14px; }
+  th { text-align: left; color: var(--txt3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 12px 10px; }
+  td { padding: 12px; border-top: 1px solid rgba(255,255,255,0.05); }
+  tr:hover td { background: rgba(255,255,255,0.02); }
+  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--txt2); }
+
+  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
+  .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+  .pill.ok { background: var(--okbg); color: var(--ok); }
+  .pill.bad { background: var(--badbg); color: var(--bad); }
+  .pill.warn { background: var(--warnbg); color: var(--warn); }
+  .tag { padding: 2px 8px; border-radius: 6px; background: rgba(91,140,255,0.12); color: var(--accent); font-size: 12px; font-weight: 600; }
+
+  .kv { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; gap: 16px; }
+  .kv:first-of-type { border-top: 0; }
+  .kv > span { color: var(--txt2); white-space: nowrap; }
+  .kv > b { text-align: right; word-break: break-all; }
+  .deploy { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
+  .deploy:first-of-type { border-top: 0; }
+  .deploy .when { margin-left: auto; color: var(--txt3); font-size: 12px; }
+
+  .btn { background: linear-gradient(135deg, var(--accent), #8b5cf6); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; white-space: nowrap; }
+  .btn:hover { filter: brightness(1.08); }
+  .btn.ghost { background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); color: var(--txt); }
+  .btn.danger { background: var(--badbg); color: var(--bad); }
+  .btn.sm { padding: 6px 12px; font-size: 12px; }
+
+  .data-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
+  .data-item:first-of-type { border-top: 0; }
+  .data-item .detail { color: var(--txt3); font-size: 12px; }
+  .data-item .st { margin-left: auto; }
+  .secret { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
+  .secret:first-of-type { border-top: 0; }
+  .secret .val { margin-left: auto; color: var(--txt3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 2px; }
+
+  /* Drill-down extras */
+  .spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 12px; }
+  .spark > i { flex: 1; background: linear-gradient(180deg, var(--accent), rgba(91,140,255,0.25)); border-radius: 3px 3px 0 0; min-height: 2px; }
+  .logs { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.7; color: var(--txt2); max-height: 360px; overflow: auto; }
+  .logs .ts { color: var(--txt3); }
+  .logs .err { color: var(--bad); }
+  .log-list { display: grid; gap: 10px; max-height: 680px; overflow: auto; padding-right: 4px; }
+  .log-row { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 12px 14px; }
+  .log-row.warn { border-color: rgba(251,191,36,0.18); background: rgba(251,191,36,0.04); }
+  .log-row.error { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.045); }
+  .log-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--txt3); font-size: 12px; margin-bottom: 9px; }
+  .log-row pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--txt2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; }
+  .timeline { display: grid; gap: 11px; }
+  .timeline-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 13px; align-items: start; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 12px 14px; }
+  .timeline-row .type { color: var(--txt3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
+  .timeline-row .title { font-weight: 800; }
+  .timeline-row .detail { color: var(--txt2); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
+  .timeline-row .when { color: var(--txt3); font-size: 12px; white-space: nowrap; }
+  .check-list { display: grid; gap: 10px; }
+  .check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.05); }
+  .check:first-child { border-top: 0; padding-top: 0; }
+  .check .mark { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--ok); box-shadow: 0 0 0 4px var(--okbg); }
+  .check.warn .mark { background: var(--warn); box-shadow: 0 0 0 4px var(--warnbg); }
+  .check.fail .mark { background: var(--bad); box-shadow: 0 0 0 4px var(--badbg); }
+  .check .name { font-weight: 800; }
+  .check .detail { color: var(--txt2); font-size: 13px; margin-top: 3px; line-height: 1.45; }
+  .port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+  @media (max-width: 880px) { .port-grid { grid-template-columns: 1fr; } }
+  .port-card { border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 13px 14px; min-width: 0; }
+  .port-card .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
+  .port-card .listen { margin-top: 8px; font-weight: 800; overflow-wrap: anywhere; }
+  .port-card .proc { color: var(--txt3); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
+  .action-runner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .action-runner select {
+    background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px;
+    padding: 8px 10px; color: var(--txt); font-family: inherit; font-size: 13px; min-width: 150px;
+  }
+  .action-output { margin-top: 12px; white-space: pre-wrap; overflow: auto; max-height: 260px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.22); padding: 12px; color: var(--txt2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; }
+  .op-confirm { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+  .op-confirm-input { flex: 0 0 200px; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 8px 12px; color: var(--txt); font-family: inherit; font-size: 14px; }
+  .op-confirm-input:focus { outline: none; border-color: var(--accent); }
+  .note { color: var(--txt3); font-size: 12px; margin-top: 10px; }
+  .row-actions { display: flex; gap: 8px; }
+  .field { display: flex; gap: 8px; margin-top: 12px; }
+  .field input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px; padding: 9px 12px; color: var(--txt); font-family: inherit; font-size: 14px; }
+  .field input:focus { outline: none; border-color: var(--accent); }
+  .empty { display: grid; place-items: center; gap: 6px; min-height: 132px; text-align: center; color: var(--txt3); border: 1px dashed rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.025); padding: 22px; }
+  .empty strong { color: var(--txt); font-size: 14px; }
+  .empty span { max-width: 540px; font-size: 13px; line-height: 1.5; }
+  .empty.compact { min-height: 74px; margin-top: 10px; padding: 14px; }
+  .form-grid { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.4fr); gap: 14px; align-items: end; }
+  .field-block { display: flex; flex-direction: column; gap: 7px; }
+  .field-block.wide { grid-column: 1 / -1; }
+  .field-block label, .select-filter span { color: var(--txt3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
+  .field-block input, .field-block textarea, .select-filter select {
+    width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); border-radius: 10px;
+    padding: 10px 12px; color: var(--txt); font-family: inherit; font-size: 14px;
+  }
+  .field-block textarea { resize: vertical; min-height: 92px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; }
+  .field-block input:focus, .field-block textarea:focus, .select-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,0.12); }
+  .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+  .msg { color: var(--txt3); font-size: 13px; }
+  .msg.ok { color: var(--ok); }
+  .msg.bad { color: var(--bad); }
+  .table-actions { text-align: right; white-space: nowrap; }
+  .filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
+  .segmented { display: inline-flex; padding: 4px; border: 1px solid var(--panel-br); background: rgba(255,255,255,0.035); border-radius: 12px; gap: 2px; }
+  .segmented button { appearance: none; border: 0; background: transparent; color: var(--txt2); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
+  .segmented button.active { background: rgba(91,140,255,0.18); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(91,140,255,0.18); }
+  .select-filter { display: inline-flex; align-items: center; gap: 8px; }
+  .select-filter select { min-width: 150px; padding: 8px 10px; }
+  @media (max-width: 760px) {
+    .form-grid { grid-template-columns: 1fr; }
+    .filters { align-items: stretch; }
+    .segmented, .select-filter, .select-filter select { width: 100%; }
+    .segmented button { flex: 1; }
+  }
+
+  /* Honest action affordance: a copyable CLI command (static dashboard has no
+    backend — the buttons would POST nowhere, so we show the exact command). */
+  .cmd { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--panel-br); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--txt); white-space: nowrap; }
+  .cmd::before { content: '$'; color: var(--txt3); }
+  .cmd.accent { border-color: rgba(91,140,255,0.4); color: var(--accent); }
+  .cmds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+
+  /* Server dashboard components */
+  .svc { display: flex; flex-wrap: wrap; gap: 10px; }
+  .svc .item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-br); font-size: 13px; font-weight: 500; }
+  .key { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
+  .key:first-of-type { border-top: 0; }
+  .key .fp { margin-left: auto; color: var(--txt3); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+  .chart-panel { overflow: hidden; }
+  .chart-panel.subtle { padding: 0; margin-bottom: 14px; background: transparent; border: 0; }
+  svg.chart { display: block; width: 100%; height: auto; min-height: 150px; }
+  svg.chart .chart-shell { fill: rgba(255,255,255,0.025); stroke: rgba(255,255,255,0.07); }
+  svg.chart .chart-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
+  svg.chart .chart-axis, svg.chart .chart-label { fill: var(--txt3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+  svg.chart .chart-value { fill: var(--txt); font-size: 12px; font-weight: 800; }
+  svg.chart .chart-empty-title { fill: var(--txt); font-size: 15px; font-weight: 800; }
+  svg.chart .chart-empty-sub { fill: var(--txt3); font-size: 12px; }
+  svg.chart .bar-mark.ok rect { fill: var(--ok); opacity: 0.85; }
+  svg.chart .bar-mark.warn rect { fill: var(--warn); opacity: 0.88; }
+  svg.chart .bar-mark.bad rect { fill: var(--bad); opacity: 0.9; }
+  svg.chart .spark-path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(91,140,255,0.38)); }
+  svg.chart circle.ok { fill: var(--ok); }
+  svg.chart circle.bad { fill: var(--bad); }
+  svg.chart.disabled { opacity: 0.86; }
+
+  /* ───────────── Health / vital signs (server metrics) ───────────── */
+  /* Overall status banner — at-a-glance "is the box OK?" verdict. */
+  .health-hero {
+    --hue: var(--ok); --huebg: var(--okbg);
+    display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 8px;
+    background:
+      radial-gradient(700px 200px at 0% 0%, var(--huebg), transparent 70%),
+      var(--panel);
+    border: 1px solid var(--panel-br); border-radius: 18px; padding: 18px 22px; backdrop-filter: blur(6px);
+  }
+  .health-hero.warn { --hue: var(--warn); --huebg: var(--warnbg); }
+  .health-hero.bad { --hue: var(--bad); --huebg: var(--badbg); }
+  .health-hero .status { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--hue); }
+  .health-hero .status .led {
+    width: 13px; height: 13px; border-radius: 50%; background: var(--hue);
+    box-shadow: 0 0 0 4px var(--huebg), 0 0 16px var(--hue); animation: hb-pulse 2.4s ease-in-out infinite;
+  }
+  .health-hero .status small { display: block; color: var(--txt3); font-size: 12px; font-weight: 500; margin-top: 2px; letter-spacing: 0; }
+  @keyframes hb-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
+  .health-hero .hmeta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 22px 26px; color: var(--txt2); font-size: 13px; }
+  .health-hero .hmeta .item { display: flex; flex-direction: column; gap: 2px; }
+  .health-hero .hmeta .item span { color: var(--txt3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
+  .health-hero .hmeta .item b { color: var(--txt); font-weight: 600; font-size: 14px; }
+
+  /* Radial gauges — the centerpiece read for CPU / memory / disk. */
+  .gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
+  @media (max-width: 760px) { .gauges { grid-template-columns: 1fr; } }
+  .gauge {
+    --g: var(--ok); --gbg: var(--okbg);
+    background: var(--panel); border: 1px solid var(--panel-br); border-radius: 18px;
+    padding: 20px 20px 18px; backdrop-filter: blur(6px);
+    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
+    transition: border-color .15s, transform .15s;
+  }
+  .gauge:hover { border-color: color-mix(in srgb, var(--g) 45%, transparent); transform: translateY(-1px); }
+  .gauge.warn { --g: var(--warn); --gbg: var(--warnbg); }
+  .gauge.bad { --g: var(--bad); --gbg: var(--badbg); }
+  .gauge .ghead { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--txt3); font-weight: 700; }
+  .gauge .ghead svg { width: 15px; height: 15px; color: var(--g); }
+  .gauge .ring {
+    position: relative; width: 172px; height: 172px; margin: 6px 0 2px; border-radius: 50%;
+    background: conic-gradient(var(--g) calc(var(--pct) * 1%), rgba(255,255,255,0.07) 0);
+  }
+  .gauge .ring::after {
+    content: ''; position: absolute; inset: 15px; border-radius: 50%;
+    background: linear-gradient(160deg, rgba(20,28,52,0.98), rgba(14,20,40,0.98));
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
+  }
+  .gauge .center { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+  .gauge .pct { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
+  .gauge .pct sup { font-size: 17px; font-weight: 700; color: var(--txt2); margin-left: 1px; top: -0.7em; }
+  .gauge .punit { font-size: 11px; color: var(--txt3); font-weight: 600; margin-top: 7px; text-transform: uppercase; letter-spacing: 0.07em; }
+  .gauge .gsub { color: var(--txt2); font-size: 14px; font-weight: 500; }
+  .gauge .gsub b { color: var(--txt); font-weight: 700; }
+  .gauge .gtag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--gbg); color: var(--g); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
+
+  /* Vital-sign tiles — the secondary numbers (free RAM, uptime, etc.). */
+  .vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+  @media (max-width: 880px) { .vitals { grid-template-columns: repeat(2, 1fr); } }
+  .vital { background: var(--panel); border: 1px solid var(--panel-br); border-radius: 14px; padding: 14px 16px; }
+  .vital .vlabel { display: flex; align-items: center; gap: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt3); font-weight: 700; }
+  .vital .vlabel svg { width: 13px; height: 13px; }
+  .vital .vval { font-size: 21px; font-weight: 700; margin-top: 7px; letter-spacing: -0.01em; }
+  .vital .vval small { font-size: 12.5px; color: var(--txt2); font-weight: 500; }
+  .vital .vnote { font-size: 12px; color: var(--txt3); margin-top: 3px; }
+
+  /* Tone-colored progress bars (shared with index health cards). */
+  .bar.ok > i { background: linear-gradient(90deg, var(--ok), #22c55e); }
+  .bar.warn > i { background: linear-gradient(90deg, var(--warn), #f59e0b); }
+  .bar.bad > i { background: linear-gradient(90deg, var(--bad), #ef4444); }
+
+  /* Load trend chart — sparkline with capacity guide + axis labels. */
+  .chart { position: relative; }
+  .chart .spark { height: 124px; align-items: flex-end; }
+  .chart .spark > i { background: linear-gradient(180deg, var(--accent), rgba(91,140,255,0.22)); transition: height .6s ease; }
+  .chart .spark > i.hot { background: linear-gradient(180deg, var(--warn), rgba(251,191,36,0.22)); }
+  .chart .spark > i.peak { background: linear-gradient(180deg, var(--bad), rgba(248,113,113,0.25)); }
+  .chart .xaxis { display: flex; justify-content: space-between; margin-top: 9px; color: var(--txt3); font-size: 11px; }
+</style>