@stacksjs/ts-cloud 0.5.35 → 0.6.1

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,36 +1,45 @@
 <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. -->
-<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">
+<!-- Inline SVG favicon (single-accent 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%3Crect x='3' y='3' width='26' height='26' rx='8' fill='%235a8be0'/%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">
 <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);
+    --bg: #0a0e15; --bg2: #0b0f18; --panel: rgba(255,255,255,0.03); --panel-br: rgba(255,255,255,0.072);
+    --txt: #e9edf5; --txt2: #94a1b8; --txt3: #5a6577;
+    --accent: #5a8be0; --accent-dim: rgba(90,139,224,0.14); --accent-ink: #061019;
+    --ok: #35d19b; --okbg: rgba(53,209,155,0.11);
+    --bad: #f0736e; --badbg: rgba(240,115,110,0.11); --warn: #edb949; --warnbg: rgba(237,185,73,0.11);
+    --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
   }
   * { 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));
+    /* One calm accent wash, no AI blue-purple mesh. */
+    background:
+      radial-gradient(900px 460px at 88% -8%, rgba(90,139,224,0.06), transparent 62%),
+      linear-gradient(175deg, var(--bg), var(--bg2));
     -webkit-font-smoothing: antialiased;
+    font-feature-settings: 'tnum' 1, 'ss01' 1;
   }
+  /* Tabular monospaced numerals wherever a value is read at a glance (density 7). */
+  .stat, .gauge .pct, .vital .vval, .health-hero .hmeta .item b, .kv > b, td.mono { font-variant-numeric: tabular-nums; }
+  .stat, .gauge .pct { font-family: var(--mono); letter-spacing: -0.03em; }
   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);
+    display: flex; align-items: center; gap: 16px; padding: 16px 24px; position: sticky; top: 0; z-index: 10;
+    background: rgba(10,14,21,0.72); 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); }
+  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
+  .brand .dot { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
   .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); }
+  .tabs a.active { background: rgba(90,139,224,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; }
@@ -58,12 +67,12 @@
   @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); }
+  a.panel:hover { border-color: rgba(90,139,224,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); }
+  .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
 
   .section { margin-top: 30px; }
   .section > h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
@@ -83,7 +92,7 @@
   .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; }
+  .tag { padding: 2px 8px; border-radius: 6px; background: rgba(90,139,224,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; }
@@ -93,10 +102,13 @@
   .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 { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: filter .12s, transform .12s; }
+  .btn:hover { filter: brightness(1.06); }
+  .btn:active { transform: translateY(1px); }
+  .btn.ghost { background: rgba(255,255,255,0.045); border: 1px solid var(--panel-br); color: var(--txt); }
+  .btn.ghost:hover { background: rgba(255,255,255,0.075); filter: none; }
+  .btn.danger { background: transparent; border: 1px solid var(--badbg); color: var(--bad); }
+  .btn.danger:hover { background: var(--badbg); filter: none; }
   .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; }
@@ -109,7 +121,7 @@
 
   /* 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; }
+  .spark > i { flex: 1; background: linear-gradient(180deg, var(--accent), rgba(90,139,224,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); }
@@ -166,7 +178,7 @@
     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); }
+  .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(90,139,224,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); }
@@ -175,7 +187,7 @@
   .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); }
+  .segmented button.active { background: rgba(90,139,224,0.18); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(90,139,224,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) {
@@ -186,10 +198,10 @@
   }
 
   /* 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); }
+  .cmd.accent { border-color: rgba(90,139,224,0.4); color: var(--accent); }
   .cmds { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 
   /* Server dashboard components */
@@ -210,13 +222,13 @@
   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 .spark-path { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
   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. */
+  /* 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;
@@ -230,7 +242,7 @@
   .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;
+    box-shadow: 0 0 0 4px var(--huebg); 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 } }
@@ -239,7 +251,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 {
@@ -260,7 +272,7 @@
   }
   .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));
+    background: linear-gradient(160deg, #10151f, #0c1017);
     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; }
@@ -271,7 +283,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; }
@@ -282,14 +294,14 @@
   .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); }
+  .bar.ok > i { background: var(--ok); }
+  .bar.warn > i { background: var(--warn); }
+  .bar.bad > i { background: var(--bad); }
 
-  /* 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; }
+  .chart .spark > i { background: linear-gradient(180deg, var(--accent), rgba(90,139,224,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; }

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">