@stacksjs/ts-cloud 0.5.26 → 0.5.28

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

@@ -0,0 +1,54 @@
+<script server>
+// Mode-aware, fully server-rendered nav. The deployment mode + environment list
+// are injected with the dashboard data; the environment switcher is plain links
+// (`?env=<name>`) the server handles — no client JavaScript needed.
+let __nav = null
+try { __nav = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __nav = null }
+const navMode = __nav?.mode ?? 'server'
+const showServer = navMode === 'server' || navMode === 'hybrid'
+const showServerless = navMode === 'serverless' || navMode === 'hybrid'
+const navEnvs = __nav?.environments ?? []
+const navEnv = __nav?.environment ?? ''
+</script>
+<nav>
+  <div class="brand"><span class="dot"></span> ts-cloud</div>
+  <div class="tabs">
+    @if (showServer)
+      @if ((active ?? '') === 'server')
+        <a href="/" class="active">Server</a>
+      @else
+        <a href="/">Server</a>
+      @endif
+    @endif
+    @if (showServerless)
+      @if ((active ?? '') === 'serverless')
+        <a href="/serverless" class="active">Serverless</a>
+      @else
+        <a href="/serverless">Serverless</a>
+      @endif
+    @endif
+    @if (showServer)
+      @if ((active ?? '') === 'database')
+        <a href="/server/database" class="active">Databases</a>
+      @else
+        <a href="/server/database">Databases</a>
+      @endif
+    @endif
+  </div>
+  <div class="nav-meta">
+    <span>{{ name ?? '' }}</span>
+    @if (navEnvs.length > 1)
+      <span class="env-switch" title="Switch environment">
+        @foreach (navEnvs as e)
+          @if (e === navEnv)
+            <a class="active env-opt" href="?env={{ e }}">{{ e }}</a>
+          @else
+            <a class="env-opt" href="?env={{ e }}">{{ e }}</a>
+          @endif
+        @endforeach
+      </span>
+    @else
+      <span class="env">{{ navEnv || env || '' }}</span>
+    @endif
+  </div>
+</nav>

package/dist/ui-src/pages/partials/op-confirm.stx

@@ -0,0 +1,7 @@
+<div class="op-confirm panel" @show="pending() !== null">
+  <span>Type <b class="mono">{{ confirmTok() }}</b> to {{ confirmVerb() }}:</span>
+  <input class="op-confirm-input" :value="typed()" @input="typed.set($event.target.value)" @keydown.enter="runOp()" placeholder="confirm" autocomplete="off">
+  <button class="btn sm" :disabled="!canRun()" @click="runOp()">Run</button>
+  <button class="btn ghost sm" @click="cancelOp()">Cancel</button>
+</div>
+<pre class="action-output op-output" @show="opShown()">{{ opOutput() }}</pre>

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

@@ -0,0 +1,60 @@
+<script server>
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
+const server = __d?.server ?? { name: 'stacks-production-app' }
+</script>
+<script client>
+// Reactive action runner: non-mutating actions run immediately; mutating ones
+// (deploy) stage a typed-confirmation via the shared op-confirm bar.
+const opOutput = state('')
+const opShown = state(false)
+const pending = state(null)
+const typed = state('')
+const confirmTok = derived(() => { const p = pending(); return p ? p.confirm : '' })
+const confirmVerb = derived(() => { const p = pending(); return p ? p.verb : '' })
+const canRun = derived(() => { const p = pending(); return !!p && typed() === p.confirm })
+async function execAction(action, confirm) {
+  opShown.set(true); opOutput.set('Running ' + action + '...')
+  try {
+    const res = await fetch('/api/actions/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ action, confirm }) })
+    const body = await res.json()
+    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || action) + '\nexit ' + (body.exitCode == null ? '-' : body.exitCode) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : ''))
+  } catch (e) { opOutput.set('FAILED ' + action + '\n\n' + ((e && e.message) || e)) }
+}
+function askAction(action, confirm, verb) {
+  if (!confirm) { execAction(action, ''); return }
+  pending.set({ operation: action, confirm, verb: verb || ('run ' + action) }); typed.set('')
+}
+function cancelOp() { pending.set(null) }
+async function runOp() {
+  const p = pending()
+  if (!p || typed() !== p.confirm) return
+  pending.set(null); typed.set('')
+  await execAction(p.operation, p.confirm)
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud - Operations' })</head>
+<body>
+  @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
+  <div class="wrap">
+    <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Operations</div>
+    <header class="page"><div><h1>Operations</h1><p>Run allowlisted local cloud commands and inspect their output.</p></div></header>
+
+    <div class="section">
+      <h2>Run command</h2>
+      <div class="panel">
+        <div class="grid cards-2">
+          <button class="btn ghost" type="button" @click="askAction('status', '', 'refresh status')">Refresh Cloud Status</button>
+          <button class="btn ghost" type="button" @click="askAction('doctor', '')">Run Doctor</button>
+          <button class="btn ghost" type="button" @click="askAction('security-scan', '')">Security Scan</button>
+          <button class="btn danger" type="button" @click="askAction('deploy', 'deploy', 'deploy the environment')">Deploy Environment</button>
+        </div>
+        @include('../partials/op-confirm')
+        <p class="note">Mutating commands require typed confirmation. Output is clamped so the browser stays responsive.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,55 @@
+<script server>
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
+const server = __d?.server ?? { name: 'stacks-production-app' }
+const activity = __d?.activity ?? []
+const counts = {
+  deploy: activity.filter(item => item.type === 'deploy').length,
+  log: activity.filter(item => item.type === 'log').length,
+  ssh: activity.filter(item => item.type === 'ssh').length,
+}
+function tone(status) {
+  if (status === 'ok') return 'ok'
+  if (status === 'bad') return 'bad'
+  return 'warn'
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud - Activity' })</head>
+<body>
+  @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
+  <div class="wrap">
+    <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Activity</div>
+    <header class="page">
+      <div><h1>Activity</h1><p>Deploys, warnings, errors, and access changes collected from local config and live logs.</p></div>
+      <div class="cmds header-actions"><span class="cmd">cloud deploy:history</span><span class="cmd">cloud server:logs {{ server.name }}</span></div>
+    </header>
+
+    <div class="grid cards-3">
+      <div class="panel"><h3>Deploy activity</h3><div class="stat">{{ counts.deploy }}</div></div>
+      <div class="panel"><h3>Warnings &amp; errors</h3><div class="stat">{{ counts.log }}</div></div>
+      <div class="panel"><h3>SSH key events</h3><div class="stat">{{ counts.ssh }}</div></div>
+    </div>
+
+    <div class="section">
+      <h2>Timeline</h2>
+      <div class="panel">
+        @if (activity.length)
+          <div class="timeline">
+            @foreach (activity as item)
+              <div class="timeline-row">
+                <div class="type"><span class="pill {{ tone(item.tone) }}">{{ item.type }}</span></div>
+                <div><div class="title">{{ item.title }}</div><div class="detail">{{ item.detail }}</div></div>
+                <div class="when">{{ item.when }}</div>
+              </div>
+            @endforeach
+          </div>
+        @else
+          <div class="empty"><strong>No activity yet</strong><span>Deploy history, warnings, and SSH key changes will appear here as the dashboard collects them.</span></div>
+        @endif
+      </div>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,91 @@
+<script server>
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
+const server = __d?.server ?? { name: 'acme-production-app' }
+const backup = __d?.backup ?? { enabled: true, destination: 'acme-backups', retention: 7, schedule: '0 2 * * *' }
+const history = __d?.backupHistory ?? [
+  { id: 'snap-0a1b', when: 'today 02:00', size: '142 MB', status: 'success', kind: 'snapshot' },
+  { id: 'snap-9f2c', when: 'yesterday 02:00', size: '139 MB', status: 'success', kind: 'snapshot' },
+  { id: 'snap-7d3e', when: '2d ago 02:00', size: '137 MB', status: 'success', kind: 'snapshot' },
+]
+function tone(s) { return s === 'success' ? 'ok' : (s === 'failed' ? 'bad' : 'warn') }
+</script>
+<script client>
+const opOutput = state('')
+const opShown = state(false)
+const pending = state(null)
+const typed = state('')
+const confirmTok = derived(() => { const p = pending(); return p ? p.confirm : '' })
+const confirmVerb = derived(() => { const p = pending(); return p ? p.verb : '' })
+const canRun = derived(() => { const p = pending(); return !!p && typed() === p.confirm })
+function askOp(operation, confirm, verb, to) { pending.set({ operation, confirm, verb, to: to || null }); typed.set('') }
+function cancelOp() { pending.set(null) }
+async function runOp() {
+  const p = pending()
+  if (!p || typed() !== p.confirm) return
+  pending.set(null); typed.set('')
+  opShown.set(true); opOutput.set('Running ' + p.operation + '...')
+  try {
+    const payload = p.to ? { operation: p.operation, confirm: p.confirm, to: p.to } : { operation: p.operation, confirm: p.confirm }
+    const res = await fetch('/api/server/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+    const body = await res.json()
+    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : ''))
+  } catch (e) { opOutput.set('FAILED ' + p.operation + '\n\n' + ((e && e.message) || e)) }
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud — Backups' })</head>
+<body>
+  @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
+  <div class="wrap">
+    <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Backups</div>
+    <header class="page">
+      <div><h1>Backups &amp; snapshots</h1><p>Scheduled snapshots of the box and app data.</p></div>
+      <div class="cmds header-actions"><span class="accent cmd">cloud server:snapshot {{ server.name }}</span></div>
+    </header>
+    <div class="section">
+      <div class="panel">
+        <div class="kv"><span>state</span> <b>@if (backup.enabled)<span class="ok pill">on</span>@else<span class="pill warn">off</span>@endif</b></div>
+        <div class="kv"><span>destination</span> <b class="mono">{{ backup.destination }}</b></div>
+        <div class="kv"><span>schedule</span> <b class="mono">{{ backup.schedule }}</b></div>
+        <div class="kv"><span>retention</span> <b>{{ backup.retention }} copies</b></div>
+      </div>
+    </div>
+    <div class="section">
+      <h2>Run a backup</h2>
+      <div class="panel">
+        <div class="row-actions">
+          <button class="btn" type="button" @click="askOp('backup:run', 'backup', 'run a backup now')">Run backup now</button>
+          <button class="btn danger" type="button" @click="askOp('backup:restore', 'restore', 'restore the latest backup')">Restore latest backup</button>
+        </div>
+        @include('../partials/op-confirm')
+        <p class="note">Backups dump the app database via ts-backups and upload to the configured destination. Restore replaces the live database from the most recent dump.</p>
+      </div>
+    </div>
+    <div class="section">
+      <h2>Recent backups</h2>
+      <div class="panel">
+        @if (history.length)
+          <table>
+            <thead><tr><th>Snapshot</th><th>Kind</th><th>Size</th><th>Status</th><th>When</th></tr></thead>
+            <tbody>
+              @foreach (history as b)
+                <tr>
+                  <td class="mono">{{ b.id }}</td>
+                  <td>{{ b.kind }}</td>
+                  <td>{{ b.size }}</td>
+                  <td><span class="pill {{ tone(b.status) }}">{{ b.status }}</span></td>
+                  <td style="color:var(--txt3)">{{ b.when }}</td>
+                </tr>
+              @endforeach
+            </tbody>
+          </table>
+        @else
+          <div class="empty"><strong>No backup history</strong><span>Snapshot history has not been collected yet. Run a backup above, then entries will show here.</span></div>
+        @endif
+      </div>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,119 @@
+<script server>
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
+const server = __d?.server ?? { name: 'acme-production-app' }
+</script>
+<script client>
+// Reactive database management — create databases/users, live lists.
+const engine = state('mysql')
+const databases = state([])
+const users = state([])
+const dbError = state('')
+const output = state('')
+const outputShown = state(false)
+const dbName = state('')
+const uName = state('')
+const uPass = state('')
+const uDatabase = state('')
+const uAccess = state('all')
+function show(text) { output.set(text); outputShown.set(true) }
+async function load() {
+  try {
+    const res = await fetch('/api/databases')
+    const data = await res.json()
+    engine.set(data.engine || 'mysql')
+    if (data.ok) { databases.set(data.databases || []); users.set(data.users || []); dbError.set('') }
+    else { databases.set([]); users.set([]); dbError.set(data.error || 'unavailable') }
+  } catch (e) { show('Could not read databases: ' + ((e && e.message) || e)) }
+}
+async function createDb() {
+  show('Creating database ' + dbName() + '...')
+  const res = await fetch('/api/databases', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: dbName() }) })
+  const b = await res.json()
+  show((b.ok ? 'OK created ' + (b.name || dbName()) : 'FAILED') + '\n\n' + (b.stdout || '') + (b.stderr ? '\n' + b.stderr : '') + (b.error ? '\n' + b.error : ''))
+  if (b.ok) { dbName.set(''); load() }
+}
+async function createUser() {
+  show('Creating user ' + uName() + '...')
+  const payload = { username: uName(), password: uPass(), access: uAccess() }
+  if (uDatabase()) payload.database = uDatabase()
+  const res = await fetch('/api/databases/users', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+  const b = await res.json()
+  show((b.ok ? 'OK created user ' + (b.username || uName()) : 'FAILED') + '\n\n' + (b.stdout || '') + (b.stderr ? '\n' + b.stderr : '') + (b.error ? '\n' + b.error : ''))
+  if (b.ok) { uName.set(''); uPass.set(''); load() }
+}
+onMount(() => { load() })
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud — Databases' })</head>
+<body>
+  @include('../partials/nav', { active: 'database', name: server.name, env: 'production' })
+  <div class="wrap">
+    <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Databases</div>
+    <header class="page">
+      <div><h1>Databases &amp; users</h1><p>Create databases and app users on the managed engine (<span class="mono">{{ engine() }}</span>).</p></div>
+    </header>
+
+    <div class="cols section">
+      <div>
+        <h2>Create database</h2>
+        <div class="panel">
+          <form class="form-grid" @submit.prevent="createDb()">
+            <div class="field-block wide"><label for="db-name">Name</label><input id="db-name" placeholder="acme_production" autocomplete="off" :value="dbName()" @input="dbName.set($event.target.value)"></div>
+            <div class="form-actions"><button class="btn" type="submit">Create database</button></div>
+          </form>
+        </div>
+      </div>
+      <div>
+        <h2>Create user</h2>
+        <div class="panel">
+          <form class="form-grid" @submit.prevent="createUser()">
+            <div class="field-block"><label for="db-user">Username</label><input id="db-user" placeholder="acme_app" autocomplete="off" :value="uName()" @input="uName.set($event.target.value)"></div>
+            <div class="field-block"><label for="db-pass">Password</label><input id="db-pass" type="password" autocomplete="new-password" :value="uPass()" @input="uPass.set($event.target.value)"></div>
+            <div class="field-block"><label for="db-user-db">Grant on database</label>
+              <select id="db-user-db" :value="uDatabase()" @change="uDatabase.set($event.target.value)">
+                <option value="">(none)</option>
+                <template :for="n in databases()"><option :value="n">{{ n }}</option></template>
+              </select>
+            </div>
+            <div class="field-block"><label for="db-access">Access</label>
+              <select id="db-access" :value="uAccess()" @change="uAccess.set($event.target.value)">
+                <option value="all">all privileges</option>
+                <option value="readonly">read only</option>
+              </select>
+            </div>
+            <div class="form-actions"><button class="btn" type="submit">Create user</button></div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <pre class="action-output" @show="outputShown()">{{ output() }}</pre>
+
+    <div class="cols section">
+      <div>
+        <h2>Databases</h2>
+        <div class="panel">
+          <div class="svc">
+            <template :for="n in databases()"><span class="item">{{ n }}</span></template>
+            <span class="item" @show="databases().length === 0 && dbError() !== ''">{{ dbError() }}</span>
+            <span class="item" @show="databases().length === 0 && dbError() === ''">no databases</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h2>Users</h2>
+        <div class="panel">
+          <div class="svc">
+            <template :for="n in users()"><span class="item">{{ n }}</span></template>
+            <span class="item" @show="users().length === 0 && dbError() !== ''">{{ dbError() }}</span>
+            <span class="item" @show="users().length === 0 && dbError() === ''">no users</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="note">Lists are read live from the engine via the app server. Create operations run as root over the pantry socket; apps connect with the credentials you set here.</p>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,106 @@
+<script server>
+import { renderDeploymentSparkline } from '../../src/charts.ts'
+
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
+const server = __d?.server ?? { name: 'acme-production-app' }
+const initialDeps = __d?.serverDeploymentsDetail ?? []
+const deploymentChart = renderDeploymentSparkline(initialDeps)
+const deploymentsEmptyReason = __d?.deploymentsEmptyReason ?? 'No deployment history has been recorded yet.'
+</script>
+<script client>
+// Seeded from build-time data (stx server→client bridge), then live-refreshed.
+const deps = state(initialDeps)
+const status = state('all')
+const site = state('all')
+const sites = derived(() => [...new Set(deps().map(d => d.site).filter(Boolean))])
+const filtered = derived(() => deps().filter(d =>
+  (status() === 'all' || d.status === status()) && (site() === 'all' || d.site === site())))
+function tone(s) { return s === 'success' ? 'ok' : (s === 'failed' ? 'bad' : 'warn') }
+async function refresh() {
+  try { const r = await fetch('/api/dashboard-data'); if (!r.ok) return; const x = await r.json(); if (Array.isArray(x.serverDeploymentsDetail)) deps.set(x.serverDeploymentsDetail) } catch {}
+}
+onMount(() => { refresh() })
+
+// Reactive operation runner (rollback) — typed-confirm bar + output.
+const opOutput = state('')
+const opShown = state(false)
+const pending = state(null)
+const typed = state('')
+const confirmTok = derived(() => { const p = pending(); return p ? p.confirm : '' })
+const confirmVerb = derived(() => { const p = pending(); return p ? p.verb : '' })
+const canRun = derived(() => { const p = pending(); return !!p && typed() === p.confirm })
+function askOp(operation, confirm, verb, to) { pending.set({ operation, confirm, verb, to: to || null }); typed.set('') }
+function cancelOp() { pending.set(null) }
+async function runOp() {
+  const p = pending()
+  if (!p || typed() !== p.confirm) return
+  pending.set(null); typed.set('')
+  opShown.set(true); opOutput.set('Running ' + p.operation + '...')
+  try {
+    const payload = p.to ? { operation: p.operation, confirm: p.confirm, to: p.to } : { operation: p.operation, confirm: p.confirm }
+    const res = await fetch('/api/server/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+    const body = await res.json()
+    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : ''))
+  } catch (e) { opOutput.set('FAILED ' + p.operation + '\n\n' + ((e && e.message) || e)) }
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud — Deployments' })</head>
+<body>
+  @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
+  <div class="wrap">
+    <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Deployments</div>
+    <header class="page">
+      <div><h1>Deployments</h1><p>Server release history, newest first.</p></div>
+      <div class="cmds header-actions"><span class="accent cmd">cloud server:deploy {{ server.name }}</span></div>
+    </header>
+    <div class="section">
+      <div class="panel">
+        <div class="chart-panel subtle">
+          {{{ deploymentChart }}}
+        </div>
+        <div class="filters">
+          <div class="segmented" role="group" aria-label="Filter deployment status">
+            <button type="button" :class="{ active: status() === 'all' }" @click="status.set('all')">All</button>
+            <button type="button" :class="{ active: status() === 'success' }" @click="status.set('success')">Success</button>
+            <button type="button" :class="{ active: status() === 'failed' }" @click="status.set('failed')">Failed</button>
+          </div>
+          <label class="select-filter">
+            <span>Site</span>
+            <select :value="site()" @change="site.set($event.target.value)">
+              <option value="all">All sites</option>
+              <template :for="s in sites()">
+                <option :value="s">{{ s }}</option>
+              </template>
+            </select>
+          </label>
+        </div>
+        <table>
+          <thead><tr><th>Build</th><th>Site</th><th>Branch</th><th>Status</th><th>Steps</th><th>By</th><th>Took</th><th>When</th><th>Action</th></tr></thead>
+          <tbody>
+            <template :for="d in filtered()">
+              <tr>
+                <td class="mono">{{ d.sha }}</td>
+                <td><b>{{ d.site }}</b></td>
+                <td class="mono" style="color:var(--txt3)">{{ d.branch }}</td>
+                <td><span class="pill" :class="tone(d.status)">{{ d.status }}</span></td>
+                <td class="mono" style="font-size:11px;color:var(--txt3)">{{ d.steps.join(' · ') }}</td>
+                <td style="color:var(--txt2)">{{ d.by }}</td>
+                <td class="mono">{{ d.took }}</td>
+                <td style="color:var(--txt3)">{{ d.when }}</td>
+                <td class="table-actions"><button class="btn danger sm" type="button" @click="askOp('rollback:' + d.site, d.site, 'roll back', d.release)">Roll back</button></td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+        <div class="empty" @show="deps().length === 0"><strong>No deployments yet</strong><span>{{ deploymentsEmptyReason }}</span></div>
+        <div class="compact empty" @show="deps().length > 0 && filtered().length === 0"><strong>No matches</strong><span>Try a different status or site filter.</span></div>
+        @include('../partials/op-confirm')
+        <p class="note">Roll back a site to any prior release, or inspect a box with <span class="mono">cloud server:logs {{ server.name }}</span>.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,88 @@
+<script server>
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
+const server = __d?.server ?? { name: 'stacks-production-app' }
+const diagnostics = __d?.diagnostics ?? [
+  { name: 'Live server probe', status: 'warn', detail: 'Run the local dashboard against a configured server to fetch live diagnostics.' },
+]
+const services = __d?.servicesDetail ?? []
+const sites = __d?.sitesDetail ?? []
+const shadowedSites = sites.filter(site => site.status === 'shadowed')
+const logs = (__d?.serverLogs ?? []).filter(log => log.level !== 'info').slice(0, 8)
+function tone(status) {
+  if (status === 'pass' || status === 'running' || status === 'live') return 'ok'
+  if (status === 'fail' || status === 'failed' || status === 'stopped') return 'bad'
+  return 'warn'
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud - Diagnostics' })</head>
+<body>
+  @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
+  <div class="wrap">
+    <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Diagnostics</div>
+    <header class="page">
+      <div><h1>Diagnostics</h1><p>Config, route, service, firewall, and probe checks in one place.</p></div>
+      <div class="cmds header-actions"><span class="accent cmd">cloud doctor</span><span class="cmd">cloud status</span></div>
+    </header>
+
+    <div class="section">
+      <h2>Doctor checks</h2>
+      <div class="check-list panel">
+        @foreach (diagnostics as check)
+          <div class="check {{ check.status === 'pass' ? '' : check.status }}">
+            <span class="mark"></span>
+            <div><div class="name">{{ check.name }}</div><div class="detail">{{ check.detail }}</div></div>
+          </div>
+        @endforeach
+      </div>
+    </div>
+
+    <div class="cols section">
+      <div>
+        <h2>Service status</h2>
+        <div class="panel">
+          @if (services.length)
+            @foreach (services as service)
+              <div class="kv"><span class="mono">{{ service.name }}</span><b><span class="pill {{ tone(service.status) }}">{{ service.status }}</span></b></div>
+            @endforeach
+          @else
+            <div class="compact empty"><strong>No service probe</strong><span>Service diagnostics appear after the dashboard can reach the server.</span></div>
+          @endif
+        </div>
+      </div>
+      <div>
+        <h2>Route warnings</h2>
+        <div class="panel">
+          @if (shadowedSites.length)
+            @foreach (shadowedSites as site)
+              <div class="kv"><span>{{ site.name }}</span><b class="mono">shadowed by {{ site.shadowedBy }}</b></div>
+            @endforeach
+          @else
+            <div class="compact empty"><strong>No shadowed routes</strong><span>Site routes are not masking each other.</span></div>
+          @endif
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Recent warnings</h2>
+      <div class="panel">
+        @if (logs.length)
+          <div class="log-list">
+            @foreach (logs as log)
+              <div class="log-row {{ log.level }}">
+                <div class="log-meta"><span>{{ log.when }}</span><span>{{ log.source }}</span><span class="pill {{ tone(log.level) }}">{{ log.level }}</span></div>
+                <pre>{{ log.message }}</pre>
+              </div>
+            @endforeach
+          </div>
+        @else
+          <div class="compact empty"><strong>No warnings found</strong><span>Warning and error logs will show here as the server emits them.</span></div>
+        @endif
+      </div>
+    </div>
+  </div>
+</body>
+</html>