@stacksjs/ts-cloud 0.5.35 → 0.6.0

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

@@ -102,7 +102,7 @@ const initialData = __d ?? null
 <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
+// /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 })

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

@@ -1,7 +1,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{ title ?? 'ts-cloud' }}</title>
-<!-- Inline SVG favicon (brand gradient tile) — declaring it stops the browser requesting /favicon.ico. -->
+<!-- Inline SVG favicon (brand gradient tile) - declaring it stops the browser requesting /favicon.ico. -->
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235b8cff'/%3E%3Cstop offset='1' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='3' y='3' width='26' height='26' rx='8' fill='url(%23g)'/%3E%3C/svg%3E">
 <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">
@@ -186,7 +186,7 @@
   }
 
   /* Honest action affordance: a copyable CLI command (static dashboard has no
-    backend — the buttons would POST nowhere, so we show the exact command). */
+    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); }
@@ -216,7 +216,7 @@
   svg.chart.disabled { opacity: 0.86; }
 
   /* ───────────── Health / vital signs (server metrics) ───────────── */
-  /* Overall status banner — at-a-glance "is the box OK?" verdict. */
+  /* 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;
@@ -239,7 +239,7 @@
   .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. */
+  /* 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 {
@@ -271,7 +271,7 @@
   .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.). */
+  /* 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; }
@@ -286,7 +286,7 @@
   .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. */
+  /* 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; }

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

@@ -1,12 +1,13 @@
 <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.
+// (`?env=<name>`) the server handles - no client JavaScript needed.
 let __nav = null
 try { __nav = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __nav = null }
+// Server and serverless are mutually exclusive; the dashboard shows one or the other.
 const navMode = __nav?.mode ?? 'server'
-const showServer = navMode === 'server' || navMode === 'hybrid'
-const showServerless = navMode === 'serverless' || navMode === 'hybrid'
+const showServer = navMode === 'server'
+const showServerless = navMode === 'serverless'
 const navEnvs = __nav?.environments ?? []
 const navEnv = __nav?.environment ?? ''
 </script>

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

@@ -32,6 +32,24 @@ async function runOp() {
   pending.set(null); typed.set('')
   await execAction(p.operation, p.confirm)
 }
+
+// Free-form server command runner (Forge-style). Runs on the app box over the
+// active driver; confirmation is required server-side (confirm: 'run').
+const serverCmd = state('')
+const cmdOut = state('')
+const cmdShown = state(false)
+const cmdBusy = state(false)
+async function runServerCmd() {
+  const c = serverCmd().trim()
+  if (!c) return
+  cmdBusy.set(true); cmdShown.set(true); cmdOut.set('Running ' + c + '...')
+  try {
+    const res = await fetch('/api/server/command', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ command: c, confirm: 'run' }) })
+    const b = await res.json()
+    cmdOut.set((b.ok ? 'OK ' : 'FAILED ') + (b.command || c) + '\n\n' + (b.stdout || '') + (b.stderr ? '\n' + b.stderr : '') + (b.error ? '\n' + b.error : ''))
+  } catch (e) { cmdOut.set('FAILED ' + c + '\n\n' + ((e && e.message) || e)) }
+  finally { cmdBusy.set(false) }
+}
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -40,7 +58,10 @@ async function runOp() {
   @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>
+    <header class="page">
+      <div><h1>Operations</h1><p>Run allowlisted local cloud commands and inspect their output.</p></div>
+      <div class="header-actions"><a class="btn ghost sm" href="/server/terminal">Open terminal →</a></div>
+    </header>
 
     <div class="section">
       <h2>Run command</h2>
@@ -55,6 +76,18 @@ async function runOp() {
         <p class="note">Mutating commands require typed confirmation. Output is clamped so the browser stays responsive.</p>
       </div>
     </div>
+
+    <div class="section">
+      <h2>Run a command on the server</h2>
+      <div class="panel">
+        <div class="field">
+          <input :value="serverCmd()" @input="serverCmd.set($event.target.value)" @keydown.enter="runServerCmd()" placeholder="e.g. systemctl status rpx-gateway, or df -h" autocomplete="off">
+          <button class="btn" type="button" :disabled="cmdBusy()" @click="runServerCmd()">Run</button>
+        </div>
+        <pre class="action-output" @show="cmdShown()">{{ cmdOut() }}</pre>
+        <p class="note">Runs on the app box over the active driver (SSH/SSM). Use it for one-off recipes, service inspection, or installing software. Prefer declarative config for anything you want reproduced on the next deploy.</p>
+      </div>
+    </div>
   </div>
 </body>
 </html>

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

@@ -35,7 +35,7 @@ async function runOp() {
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — Backups' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - Backups' })</head>
 <body>
   @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
   <div class="wrap">

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

@@ -4,7 +4,7 @@ try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d =
 const server = __d?.server ?? { name: 'acme-production-app' }
 </script>
 <script client>
-// Reactive database management — create databases/users, live lists.
+// Reactive database management - create databases/users, live lists.
 const engine = state('mysql')
 const databases = state([])
 const users = state([])
@@ -42,11 +42,24 @@ async function createUser() {
   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() })
+
+// Per-database backups: a gzipped dump written on the box, plus a live list.
+const backups = state([])
+async function loadBackups() {
+  try { const res = await fetch('/api/databases/backups'); const d = await res.json(); if (d.ok) backups.set(d.backups || []) } catch {}
+}
+async function backupDb(name) {
+  show('Backing up ' + name + '...')
+  const res = await fetch('/api/databases/backup', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ database: name, confirm: name }) })
+  const b = await res.json()
+  show((b.ok ? 'OK backed up ' + (b.database || name) : 'FAILED') + '\n\n' + (b.stdout || '') + (b.stderr ? '\n' + b.stderr : '') + (b.error ? '\n' + b.error : ''))
+  if (b.ok) loadBackups()
+}
+onMount(() => { load(); loadBackups() })
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — Databases' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - Databases' })</head>
 <body>
   @include('../partials/nav', { active: 'database', name: server.name, env: 'production' })
   <div class="wrap">
@@ -95,11 +108,11 @@ onMount(() => { load() })
       <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>
+          <template :for="n in databases()">
+            <div class="kv"><span class="mono">{{ n }}</span> <button class="btn ghost sm" type="button" @click="backupDb(n)">Back up</button></div>
+          </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>
@@ -113,7 +126,17 @@ onMount(() => { load() })
         </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 class="section">
+      <h2>Backups</h2>
+      <div class="panel">
+        <template :for="b in backups()">
+          <div class="kv"><span class="mono">{{ b.database }}</span> <b class="mono" style="font-size:11px;color:var(--txt3)">{{ b.file }}</b></div>
+        </template>
+        <div class="compact empty" @show="backups().length === 0"><strong>No database dumps yet</strong><span>Use Back up on a database above to write a gzipped dump to the box.</span></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. Per-database dumps are written to <span class="mono">/var/backups/ts-cloud/databases</span>.</p>
   </div>
 </body>
 </html>

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

@@ -22,7 +22,7 @@ async function refresh() {
 }
 onMount(() => { refresh() })
 
-// Reactive operation runner (rollback) — typed-confirm bar + output.
+// Reactive operation runner (rollback) - typed-confirm bar + output.
 const opOutput = state('')
 const opShown = state(false)
 const pending = state(null)
@@ -47,7 +47,7 @@ async function runOp() {
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — Deployments' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - Deployments' })</head>
 <body>
   @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
   <div class="wrap">

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

@@ -0,0 +1,134 @@
+<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 initialAlwaysOpen = __d?.firewall?.alwaysOpen ?? [22, 80, 443]
+const initialPorts = __d?.firewall?.ports ?? [8080, 6379]
+</script>
+<script client>
+// Reactive host firewall (UFW) management - list + allow + remove, via signals +
+// directives. Seeded from build-time data (stx server→client bridge); load()
+// reconciles against the live cloud config, and each mutation applies UFW live.
+const alwaysOpen = state(initialAlwaysOpen)
+const ports = state(initialPorts)
+const newPort = state('')
+const message = state('')
+const messageKind = state('')
+const reserved = [22, 80, 443]
+function setMessage(text, kind) { message.set(text); messageKind.set(kind || '') }
+function applyLine(apply) {
+  if (!apply) return ''
+  if (apply.ok === false) return ' Live UFW apply failed: ' + (apply.error || 'unknown error') + '.'
+  return ' Applied to UFW live on the box.'
+}
+async function load() {
+  try {
+    const res = await fetch('/api/firewall')
+    if (!res.ok) throw new Error('Could not read firewall config.')
+    const data = await res.json()
+    ports.set(data.ports || [])
+    alwaysOpen.set(data.alwaysOpen || reserved)
+  } catch (e) { setMessage((e && e.message) || 'Could not read firewall config.', 'bad') }
+}
+async function allowPort() {
+  const port = Number(newPort())
+  if (!Number.isInteger(port) || port < 1 || port > 65535) { setMessage('Port must be a whole number between 1 and 65535.', 'bad'); return }
+  if (reserved.includes(port)) { setMessage('Ports 22, 80, and 443 are always open, so there is nothing to add.', 'bad'); return }
+  setMessage('Allowing port ' + port + '...', '')
+  const res = await fetch('/api/firewall', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ port }) })
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok || data.ok === false) { setMessage(data.error || 'Could not allow port.', 'bad'); return }
+  ports.set(data.ports || []); newPort.set('')
+  setMessage('Allowed port ' + port + ' in cloud config.' + applyLine(data.apply), 'ok')
+}
+async function removePort(port) {
+  setMessage('Removing port ' + port + '...', '')
+  const res = await fetch('/api/firewall', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ port }) })
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok || data.ok === false) { setMessage(data.error || 'Could not remove port.', 'bad'); return }
+  ports.set(data.ports || [])
+  setMessage('Removed port ' + port + ' from cloud config.' + applyLine(data.apply), 'ok')
+}
+
+// Remove runs through a typed-confirm bar: type the port number to confirm.
+const pending = state(null); const typed = state('')
+const confirmTok = derived(() => { const p = pending(); return p ? String(p) : '' })
+const canRun = derived(() => { const p = pending(); return p !== null && typed() === String(p) })
+function askRemove(port) { pending.set(port); typed.set('') }
+function cancelRemove() { pending.set(null); typed.set('') }
+async function runRemove() {
+  const p = pending(); if (p === null || typed() !== String(p)) return
+  pending.set(null); typed.set('')
+  await removePort(p)
+}
+onMount(() => { load() })
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud · Firewall' })</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> Firewall</div>
+    <header class="page">
+      <div><h1>Firewall</h1><p>ts-cloud reconciles the host firewall (UFW) from cloud config on every deploy. SSH (22), HTTP (80), and HTTPS (443) are always open and cannot be changed here.</p></div>
+      <div class="cmds header-actions"><span class="accent cmd">cloud server:secure {{ server.name }}</span></div>
+    </header>
+
+    <div class="section">
+      <h2>Always open</h2>
+      <div class="panel">
+        <div class="port-grid">
+          <template :for="p in alwaysOpen()">
+            <div class="port-card">
+              <div class="top"><span class="tag">tcp</span><span class="pill ok">reserved</span></div>
+              <div class="listen mono">{{ p }}</div>
+              <div class="proc">Always allowed by ts-cloud</div>
+            </div>
+          </template>
+        </div>
+        <p class="note">These ports keep SSH, HTTP, and HTTPS reachable. They are read-only and managed by the framework.</p>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Allow a port</h2>
+      <div class="panel">
+        <form class="form-grid" @submit.prevent="allowPort()">
+          <div class="field-block">
+            <label for="fw-port">Port</label>
+            <input id="fw-port" type="number" min="1" max="65535" autocomplete="off" placeholder="8080" :value="newPort()" @input="newPort.set($event.target.value)" required>
+          </div>
+          <div class="form-actions">
+            <button class="btn" type="submit">Allow</button>
+            <span class="msg" :class="messageKind()" role="status">{{ message() }}</span>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Managed ports</h2>
+      <div class="panel">
+        <div class="port-grid" @show="ports().length > 0">
+          <template :for="p in ports()">
+            <div class="port-card">
+              <div class="top"><span class="tag">tcp</span><button type="button" class="btn danger sm" @click="askRemove(p)">Remove</button></div>
+              <div class="listen mono">{{ p }}</div>
+              <div class="proc">Allowed via cloud config</div>
+            </div>
+          </template>
+        </div>
+        <div class="compact empty" @show="ports().length === 0"><strong>No extra ports configured</strong><span>Only 22, 80, and 443 are open. Allow a port above to update <span class="mono">infrastructure.compute.firewall</span>.</span></div>
+        <div class="op-confirm panel" @show="pending() !== null">
+          <span>Type <b class="mono">{{ confirmTok() }}</b> to remove this port:</span>
+          <input class="op-confirm-input" :value="typed()" @input="typed.set($event.target.value)" @keydown.enter="runRemove()" placeholder="confirm" autocomplete="off">
+          <button class="btn sm" :disabled="!canRun()" @click="runRemove()">Run</button>
+          <button class="btn ghost sm" @click="cancelRemove()">Cancel</button>
+        </div>
+        <p class="note">Ports are declarative: this page edits <span class="mono">infrastructure.compute.firewall</span> in cloud config and applies <span class="mono">ufw allow</span> / <span class="mono">ufw delete allow</span> live on the box. The full config is reconciled again on the next <span class="mono">cloud deploy</span>.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -7,7 +7,7 @@ const emptyReason = __d?.serverLogsEmptyReason ?? 'No server logs are available
 </script>
 <script client>
 // Reactive log viewer: seeded from build-time data (stx server→client bridge),
-// then filters by level + source and auto-refreshes — all via signals +
+// then filters by level + source and auto-refreshes - all via signals +
 // directives (no manual DOM).
 const logs = state(initialLogs)
 const level = state('all')
@@ -76,7 +76,7 @@ onMount(() => { refresh(); const id = setInterval(refresh, 8000); return () => c
         <div class="compact empty" @show="logs().length > 0 && filtered().length === 0"><strong>No matching logs</strong><span>Try a different level or source filter.</span></div>
         <div class="empty" @show="logs().length === 0"><strong>No logs available</strong><span>{{ emptyReason }}</span></div>
 
-        <p class="note">Live <span class="mono">journalctl</span> for the web server, every managed service, and each app's service, <b>queue workers</b>, and daemons — plus the backup runner. Auto-refreshes every 8s.</p>
+        <p class="note">Live <span class="mono">journalctl</span> for the web server, every managed service, and each app's service, <b>queue workers</b>, and daemons - plus the backup runner. Auto-refreshes every 8s.</p>
       </div>
     </div>
   </div>

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

@@ -35,7 +35,7 @@ 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% ───────────────
+// ── 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)
@@ -45,12 +45,12 @@ 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.' },
+  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.' },
 }[worst]
 const overall = live ? measuredOverall : { tone: 'warn', title: 'Probe unavailable', note: unavailableNote }
 
-// One descriptor per gauge — rendered with @foreach below.
+// 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 },
@@ -63,7 +63,7 @@ const resourceChart = renderResourceBars([
   { label: 'Disk', value: diskPct, detail: live ? `${m.diskUsedGb} / ${m.diskTotalGb} GB` : unavailableNote },
 ], { disabled: !live })
 
-// ── Load trend (sample only — not part of the live metrics payload) ────
+// ── Load trend (sample only - not part of the live metrics payload) ────
 const loadTrend = __d?.loadTrend ?? [22, 28, 31, 26, 40, 38, 33, 45, 41, 30, 27, 35, 48, 52, 39, 33, 29, 44, 50, 47, 36, 31, 28, 34]
 const maxLoad = Math.max(...loadTrend, 1)
 const trendPeak = Math.max(...loadTrend)
@@ -72,7 +72,7 @@ function barTone(v) { const r = v / maxLoad; return r >= 0.9 ? 'peak' : r >= 0.7
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — Server health' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - Server health' })</head>
 <body>
   @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
   <div class="wrap">

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

@@ -31,7 +31,7 @@ function certLabel(cert) {
     <div class="crumbs"><a href="/">Server</a> <span class="sep">/</span> Security</div>
     <header class="page">
       <div><h1>Security</h1><p>Firewall state, listening ports, TLS expiry, and recent SSH auth events.</p></div>
-      <div class="cmds header-actions"><span class="accent cmd">cloud server:secure {{ server.name }}</span></div>
+      <div class="cmds header-actions"><a class="btn ghost sm" href="/server/firewall">Manage firewall →</a><span class="accent cmd">cloud server:secure {{ server.name }}</span></div>
     </header>
 
     <div class="grid cards-3">

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

@@ -38,7 +38,7 @@ async function runOp() {
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — Services' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - Services' })</head>
 <body>
   @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
   <div class="wrap">

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

@@ -10,7 +10,7 @@ const sites = __d?.sitesDetail ?? [
 function tone(s) { return s === 'live' ? 'ok' : (s === 'failed' ? 'bad' : 'warn') }
 </script>
 <script client>
-// Reactive site management — add, per-site deploy/edit/remove — via signals +
+// Reactive site management - add, per-site deploy/edit/remove - via signals +
 // directives. Mutations re-render the server-built page (location.reload) once
 // the cloud config has changed.
 const addName = state(''); const addRoot = state(''); const addDomain = state(''); const addPath = state('')
@@ -53,12 +53,15 @@ async function runOp() {
 }
 
 // Inline per-site edit (TLS / domain / env).
-const editing = state(''); const editSsl = state(''); const editDomain = state(''); const editEnv = state('')
-function toggleEdit(name) { editing.set(editing() === name ? '' : name); editSsl.set(''); editDomain.set(''); editEnv.set('') }
+const editing = state(''); const editSsl = state(''); const editDomain = state(''); const editEnv = state(''); const editPhp = state(''); const editAliases = state(''); const editRedirects = state('')
+function toggleEdit(name) { editing.set(editing() === name ? '' : name); editSsl.set(''); editDomain.set(''); editEnv.set(''); editPhp.set(''); editAliases.set(''); editRedirects.set('') }
 async function saveEdit(name) {
   const payload = { name }
   if (editSsl() === 'false') payload.ssl = false; else if (editSsl()) payload.ssl = { provider: editSsl() }
   if (editDomain()) payload.domain = editDomain()
+  if (editPhp()) payload.php = editPhp()
+  if (editAliases().trim()) payload.aliases = editAliases().split(/[\s,]+/).filter(Boolean)
+  if (editRedirects().trim()) { payload.redirects = {}; for (const line of editRedirects().split('\n')) { const i = line.indexOf('='); if (i > 0) payload.redirects[line.slice(0, i).trim()] = line.slice(i + 1).trim() } }
   if (editEnv()) { payload.env = {}; for (const line of editEnv().split('\n')) { const i = line.indexOf('='); if (i > 0) payload.env[line.slice(0, i).trim()] = line.slice(i + 1).trim() } }
   opShown.set(true); opOutput.set('Updating ' + name + '...')
   try {
@@ -112,6 +115,12 @@ async function saveEdit(name) {
             @if (site.envKeys && site.envKeys.length)
               <div class="kv"><span>env vars</span> <b class="mono">{{ site.envKeys.join(', ') }}</b></div>
             @endif
+            @if (site.aliases && site.aliases.length)
+              <div class="kv"><span>aliases</span> <b class="mono">{{ site.aliases.join(', ') }}</b></div>
+            @endif
+            @if (site.redirects && Object.keys(site.redirects).length)
+              <div class="kv"><span>redirects</span> <b class="mono">{{ Object.keys(site.redirects).length }}</b></div>
+            @endif
             @if (site.shadowedBy)
               <div class="kv"><span>shadowed by</span> <b class="mono">{{ site.shadowedBy }}</b></div>
             @endif
@@ -132,6 +141,18 @@ async function saveEdit(name) {
             </select>
           </div>
           <div class="field-block"><label>Domain</label><input placeholder="{{ site.domain }}" :value="editDomain()" @input="editDomain.set($event.target.value)"></div>
+          <div class="field-block">
+            <label>PHP version</label>
+            <select :value="editPhp()" @change="editPhp.set($event.target.value)">
+              <option value="">(unchanged)</option>
+              <option value="8.1">8.1</option>
+              <option value="8.2">8.2</option>
+              <option value="8.3">8.3</option>
+              <option value="8.4">8.4</option>
+            </select>
+          </div>
+          <div class="field-block wide"><label>Domain aliases (space or comma separated)</label><input placeholder="www.example.com, cdn.example.com" :value="editAliases()" @input="editAliases.set($event.target.value)"></div>
+          <div class="field-block wide"><label>Redirects (from = to per line)</label><textarea rows="2" placeholder="/old = /new" :value="editRedirects()" @input="editRedirects.set($event.target.value)"></textarea></div>
           <div class="field-block wide"><label>Env vars (KEY=value per line)</label><textarea rows="3" placeholder="NODE_ENV=production" :value="editEnv()" @input="editEnv.set($event.target.value)"></textarea></div>
           <div class="form-actions"><button class="btn" type="submit">Save changes</button></div>
         </form>

package/dist/ui-src/pages/server/ssh-keys.stx

@@ -5,7 +5,7 @@ const server = __d?.server ?? { name: 'acme-production-app' }
 const initialKeys = __d?.sshKeys ?? []
 </script>
 <script client>
-// Reactive SSH key management — list + add + remove, via signals + directives.
+// Reactive SSH key management - list + add + remove, via signals + directives.
 // Seeded from build-time data (stx server→client bridge); load() reconciles
 // against the live cloud config (same describeSshKeys shape).
 const keys = state(initialKeys)
@@ -42,7 +42,7 @@ onMount(() => { load() })
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — SSH Keys' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - SSH Keys' })</head>
 <body>
   @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
   <div class="wrap">

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

@@ -0,0 +1,65 @@
+<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>
+// Web terminal: a WebSocket to /api/terminal streams a persistent shell running
+// on the dashboard host (the box, in box mode). Line-oriented: type a command
+// and press Enter; output streams back. Not a full PTY (no vim/htop).
+const buf = state('')
+const status = state('connecting')
+const cmd = state('')
+let ws = null
+function scrollBottom() {
+  const el = document.getElementById('term-out')
+  if (el) el.scrollTop = el.scrollHeight
+}
+function connect() {
+  status.set('connecting')
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  ws = new WebSocket(proto + '//' + location.host + '/api/terminal')
+  ws.onopen = () => status.set('connected')
+  ws.onclose = () => status.set('disconnected')
+  ws.onerror = () => status.set('error')
+  ws.onmessage = (e) => { buf.set((buf() + e.data).slice(-40000)); scrollBottom() }
+}
+function send() {
+  if (!ws || ws.readyState !== 1) return
+  ws.send(cmd() + '\n')
+  cmd.set('')
+}
+function reconnect() { try { if (ws) ws.close() } catch {} buf.set(''); connect() }
+function clearOut() { buf.set('') }
+function statusTone(s) { return s === 'connected' ? 'ok' : (s === 'disconnected' || s === 'error' ? 'bad' : 'warn') }
+onMount(() => { connect(); return () => { try { if (ws) ws.close() } catch {} } })
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud · Terminal' })</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> Terminal</div>
+    <header class="page">
+      <div><h1>Terminal</h1><p>A live shell on the dashboard host. Type a command and press Enter; output streams back.</p></div>
+      <div class="header-actions">
+        <span class="pill" :class="statusTone(status())">{{ status() }}</span>
+        <button class="btn ghost sm" type="button" @click="clearOut()">Clear</button>
+        <button class="btn ghost sm" type="button" @click="reconnect()">Reconnect</button>
+      </div>
+    </header>
+
+    <div class="section">
+      <div class="panel">
+        <pre id="term-out" class="logs" style="max-height:520px; white-space:pre-wrap; overflow-wrap:anywhere;">{{ buf() }}</pre>
+        <div class="field" style="margin-top:12px;">
+          <input :value="cmd()" @input="cmd.set($event.target.value)" @keydown.enter="send()" placeholder="e.g. systemctl status rpx-gateway, tail -n 50 /var/log/syslog" autocomplete="off" spellcheck="false" style="font-family:ui-monospace, SFMono-Regular, Menlo, monospace;">
+          <button class="btn" type="button" @click="send()">Run</button>
+        </div>
+        <p class="note">The shell runs on the machine serving this dashboard (in box mode, the provisioned server) and is protected by the same Basic auth. It is line-oriented, so full-screen programs like vim or htop are not supported. Disable it with <span class="mono">TS_CLOUD_DASHBOARD_TERMINAL=0</span>.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -39,7 +39,7 @@ async function runOp() {
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — Workers' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - Workers' })</head>
 <body>
   @include('../partials/nav', { active: 'server', name: server.name, env: 'production' })
   <div class="wrap">