@stacksjs/ts-cloud 0.5.35 → 0.6.1

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

package/dist/ui-src/pages/serverless/alarms.stx

@@ -0,0 +1,153 @@
+<script server>
+let __d = null
+try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
+const app = __d?.app ?? { name: 'acme', env: 'production' }
+// Alarms + presets are fetched live on mount; these seed the first render.
+const alarmsList = __d?.alarmsList ?? [
+  { AlarmName: 'acme-production-http-errors', StateValue: 'OK', MetricName: 'Errors', ComparisonOperator: 'GreaterThanThreshold', Threshold: 5, Namespace: 'AWS/Lambda' },
+  { AlarmName: 'acme-production-http-p95', StateValue: 'ALARM', MetricName: 'Duration', ComparisonOperator: 'GreaterThanThreshold', Threshold: 500, Namespace: 'AWS/Lambda' },
+  { AlarmName: 'acme-production-queue-throttles', StateValue: 'INSUFFICIENT_DATA', MetricName: 'Throttles', ComparisonOperator: 'GreaterThanThreshold', Threshold: 1, Namespace: 'AWS/Lambda' },
+]
+const presetsList = __d?.alarmsPresets ?? [
+  { key: 'errors', label: 'Function errors', unit: 'count' },
+  { key: 'p95', label: 'p95 latency (ms)', unit: 'ms' },
+  { key: 'throttles', label: 'Throttles', unit: 'count' },
+  { key: 'concurrency', label: 'Concurrent executions', unit: 'count' },
+]
+const initialAlarms = alarmsList
+const initialPresets = presetsList
+function tone(s) { return s === 'ALARM' ? 'bad' : (s === 'OK' ? 'ok' : 'warn') }
+</script>
+<script client>
+// Alarms manager: list/create/delete CloudWatch alarms via /api/serverless/alarms.
+const rows = state(initialAlarms)
+const presets = state(initialPresets)
+const preset = state(initialPresets[0] ? initialPresets[0].key : '')
+const threshold = state('')
+const msg = state('')
+const msgOk = state(false)
+const busy = state(false)
+
+// Delete flow uses a typed-confirm (the alarm name) before firing.
+const pendingDelete = state(null)
+const typedDelete = state('')
+const canDelete = derived(() => { const p = pendingDelete(); return !!p && typedDelete() === p })
+
+function toneOf(s) { return s === 'ALARM' ? 'bad' : (s === 'OK' ? 'ok' : 'warn') }
+
+async function refresh() {
+  try {
+    const r = await fetch('/api/serverless/alarms')
+    if (!r.ok) return
+    const x = await r.json()
+    if (Array.isArray(x.alarms)) rows.set(x.alarms)
+    if (Array.isArray(x.presets)) { presets.set(x.presets); if (!preset() && x.presets[0]) preset.set(x.presets[0].key) }
+  } catch {}
+}
+onMount(() => { refresh() })
+
+async function createAlarm() {
+  const p = preset()
+  if (!p) { msg.set('Pick a preset.'); msgOk.set(false); return }
+  if (threshold() === '' || Number.isNaN(Number(threshold()))) { msg.set('Enter a threshold.'); msgOk.set(false); return }
+  busy.set(true); msg.set('Creating alarm...'); msgOk.set(false)
+  try {
+    const res = await fetch('/api/serverless/alarms', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ preset: p, threshold: Number(threshold()) }) })
+    const body = await res.json()
+    msg.set(body.ok ? (body.stdout || 'Alarm created.') : (body.error || 'Failed to create alarm.')); msgOk.set(!!body.ok)
+    if (body.ok) { threshold.set(''); refresh() }
+  } catch (e) { msg.set('Failed: ' + ((e && e.message) || e)); msgOk.set(false) }
+  finally { busy.set(false) }
+}
+
+function askDelete(name) { pendingDelete.set(name); typedDelete.set('') }
+function cancelDelete() { pendingDelete.set(null); typedDelete.set('') }
+async function confirmDelete() {
+  const name = pendingDelete()
+  if (!name || typedDelete() !== name) return
+  pendingDelete.set(null); typedDelete.set('')
+  msg.set('Deleting ' + name + '...'); msgOk.set(false)
+  try {
+    const res = await fetch('/api/serverless/alarms', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name, confirm: name }) })
+    const body = await res.json()
+    msg.set(body.ok ? (body.stdout || 'Deleted.') : (body.error || 'Failed to delete.')); msgOk.set(!!body.ok)
+    if (body.ok) refresh()
+  } catch (e) { msg.set('Failed: ' + ((e && e.message) || e)); msgOk.set(false) }
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  @include('../partials/head', { title: 'ts-cloud · Alarms' })
+</head>
+<body>
+  @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
+  <div class="wrap">
+    <div class="crumbs"><a href="/serverless">Serverless</a> <span class="sep">/</span> Alarms</div>
+    <header class="page">
+      <div>
+        <h1>Alarms</h1>
+        <p>Arm CloudWatch alarms on function metrics so a paging error rate or latency spike notifies you before customers do.</p>
+      </div>
+    </header>
+
+    <div class="section">
+      <div class="panel">
+        <table>
+          <thead><tr><th>Alarm</th><th>Metric</th><th>Condition</th><th>State</th><th class="table-actions">Actions</th></tr></thead>
+          <tbody>
+            <template :for="a in rows()">
+              <tr>
+                <td class="mono"><b>{{ a.AlarmName }}</b></td>
+                <td class="mono" style="color:var(--txt3)">{{ a.MetricName }}</td>
+                <td class="mono" style="color:var(--txt2)">{{ a.ComparisonOperator }} {{ a.Threshold }}</td>
+                <td><span class="pill {{ toneOf(a.StateValue) }}">{{ a.StateValue }}</span></td>
+                <td class="table-actions">
+                  <div class="row-actions" style="justify-content:flex-end">
+                    <button class="btn danger sm" type="button" @click="askDelete(a.AlarmName)">Delete</button>
+                  </div>
+                </td>
+              </tr>
+            </template>
+            <tr @show="rows().length === 0">
+              <td colspan="5"><div class="compact empty"><strong>No alarms armed</strong><span>Create one below to get notified when a function metric crosses a threshold.</span></div></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="op-confirm" @show="pendingDelete() !== null" style="margin-top:14px">
+          <span>Type <b class="mono">{{ pendingDelete() }}</b> to delete this alarm:</span>
+          <input class="op-confirm-input" :value="typedDelete()" @input="typedDelete.set($event.target.value)" @keydown.enter="confirmDelete()" placeholder="confirm" autocomplete="off">
+          <button class="btn danger sm" :disabled="!canDelete()" @click="confirmDelete()">Delete</button>
+          <button class="btn ghost sm" @click="cancelDelete()">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h2>Create alarm</h2>
+      <div class="panel">
+        <div class="form-grid">
+          <div class="field-block">
+            <label>Metric preset</label>
+            <select :value="preset()" @change="preset.set($event.target.value)">
+              <template :for="p in presets()">
+                <option value="{{ p.key }}">{{ p.label }}</option>
+              </template>
+            </select>
+          </div>
+          <div class="field-block">
+            <label>Threshold</label>
+            <input type="number" :value="threshold()" @input="threshold.set($event.target.value)" placeholder="5" autocomplete="off">
+          </div>
+          <div class="form-actions">
+            <button class="btn" type="button" :disabled="busy()" @click="createAlarm()">Create</button>
+            <span class="msg" :class="{ ok: msgOk(), bad: msg() && !msgOk() }">{{ msg() }}</span>
+          </div>
+        </div>
+        <p class="note">Alarms fire when the chosen metric crosses the threshold. Manage them live with <span class="mono">cloud alarms</span>.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/dist/ui-src/pages/serverless/assets.stx

@@ -12,10 +12,33 @@ const recent = __d?.assetsRecent ?? [
   { path: '/a4d63d2/logo.svg', size: '4 KB', type: 'image/svg+xml' },
 ]
 </script>
+<script client>
+// assets:invalidate runs live against AWS through /api/serverless/operations/run.
+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) { pending.set({ operation, confirm, verb }); 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 res = await fetch('/api/serverless/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ operation: p.operation, confirm: p.confirm }) })
+    const body = await res.json()
+    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (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 — Assets & CDN' })
+  @include('../partials/head', { title: 'ts-cloud · Assets & CDN' })
 </head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
@@ -27,10 +50,14 @@ const recent = __d?.assetsRecent ?? [
         <p>Versioned static assets uploaded to S3 and served via CloudFront; <span class="mono">ASSET_URL</span> is injected into the app.</p>
       </div>
       <div class="header-actions">
-        <span class="cmd">cloud assets:invalidate</span>
+        <button class="btn sm" type="button" @click="askOp('assets:invalidate', 'invalidate', 'invalidate the CDN cache')">Invalidate CDN cache</button>
       </div>
     </header>
 
+    <div class="section">
+      @include('../partials/op-confirm')
+    </div>
+
     <div class="grid cards">
       <div class="panel"><h3>Files</h3><div class="stat">{{ assets.files }}</div></div>
       <div class="panel"><h3>Size</h3><div class="stat">{{ assets.sizeMb }} <small>MB</small></div></div>

package/dist/ui-src/pages/serverless/cost.stx

@@ -17,7 +17,7 @@ const summary = __d?.costSummary ?? {
 const services = __d?.costServices ?? [
   { name: 'Lambda (compute)', usd: 41.20, note: 'GB-seconds across http/queue/cli' },
   { name: 'Provisioned concurrency', usd: 28.60, note: '2 envs always-warm' },
-  { name: 'Aurora Serverless v2', usd: 19.80, note: '0.5–4 ACU' },
+  { name: 'Aurora Serverless v2', usd: 19.80, note: '0.5-4 ACU' },
   { name: 'API Gateway (HTTP)', usd: 11.30, note: '4.7M requests' },
   { name: 'CloudFront + S3 assets', usd: 8.10, note: 'egress + storage' },
   { name: 'ElastiCache (redis)', usd: 6.40, note: 'cache.t4g.micro' },
@@ -46,7 +46,7 @@ const maxTrend = Math.max(...trend)
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
-  @include('../partials/head', { title: 'ts-cloud — Cost' })
+  @include('../partials/head', { title: 'ts-cloud - Cost' })
 </head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
@@ -55,7 +55,7 @@ const maxTrend = Math.max(...trend)
     <header class="page">
       <div>
         <h1>Cost analysis</h1>
-        <p>Spend by service and function — {{ period.label }}.</p>
+        <p>Spend by service and function - {{ period.label }}.</p>
       </div>
     </header>
 
@@ -137,7 +137,7 @@ const maxTrend = Math.max(...trend)
         <h2>Optimize</h2>
         <div class="panel">
           <p class="note" style="margin-top:0">Biggest lever: <b style="color:var(--txt)">{{ services[0].name }}</b> at ${{ services[0].usd.toFixed(2) }}.</p>
-          <p class="note">• Right-size memory — over-provisioned MB inflates GB-seconds.</p>
+          <p class="note">• Right-size memory - over-provisioned MB inflates GB-seconds.</p>
           <p class="note">• Drop unused <span class="mono">provisionedConcurrency</span> for ping-based <span class="mono">warm</span> if cold starts are tolerable.</p>
           <p class="note">• Tighten Aurora <span class="mono">db-scale</span> min ACU off-peak.</p>
           <p class="note">Full breakdown: <span class="mono">cloud cost --env {{ app.env }}</span></p>

package/dist/ui-src/pages/serverless/data.stx

@@ -7,11 +7,39 @@ const proxy = __d?.proxy ?? { name: 'acme-production-proxy', endpoint: 'acme-pro
 const redis = __d?.redis ?? { id: 'acme-production-redis', node: 'cache.t4g.micro', engine: 'redis 7.1', hitRate: 96.4, status: 'available' }
 const efs = __d?.efs ?? { id: 'fs-0abc', mount: '/mnt/local', sizeMb: 312, status: 'available' }
 function tone(s) { return s === 'available' ? 'ok' : 'warn' }
+const hasAurora = !!(__d?.aurora ?? true)
+const seedMin = aurora?.minAcu ?? 0.5
+const seedMax = aurora?.maxAcu ?? 4
+</script>
+<script client>
+// db:scale runs live against AWS through /api/serverless/operations/run.
+const opOutput = state('')
+const opShown = state(false)
+const pending = state(null)
+const typed = state('')
+const scaleMin = state(String(seedMin ?? ''))
+const scaleMax = state(String(seedMax ?? ''))
+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) { pending.set({ operation, confirm, verb }); 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 res = await fetch('/api/serverless/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ operation: p.operation, confirm: p.confirm, min: Number(scaleMin()), max: Number(scaleMax()) }) })
+    const body = await res.json()
+    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (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 — Data' })
+  @include('../partials/head', { title: 'ts-cloud · Data' })
 </head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
@@ -20,7 +48,7 @@ function tone(s) { return s === 'available' ? 'ok' : 'warn' }
     <header class="page">
       <div>
         <h1>Data services</h1>
-        <p>Managed data attached to the functions over a private VPC — database, connection proxy, cache, and shared filesystem.</p>
+        <p>Managed data attached to the functions over a private VPC: database, connection proxy, cache, and shared filesystem.</p>
       </div>
     </header>
 
@@ -37,11 +65,36 @@ function tone(s) { return s === 'available' ? 'ok' : 'warn' }
           <h3>Capacity (ACU)</h3>
           <div class="stat">{{ aurora.currentAcu }} <small>now</small></div>
           <div class="bar"><i style="width: {{ Math.round((aurora.currentAcu / aurora.maxAcu) * 100) }}%"></i></div>
-          <p class="note">range {{ aurora.minAcu }}–{{ aurora.maxAcu }} ACU · rescale with <span class="mono">cloud serverless:db-scale {{ aurora.minAcu }} {{ aurora.maxAcu }}</span></p>
+          <p class="note">range {{ aurora.minAcu }} to {{ aurora.maxAcu }} ACU · rescale with <span class="mono">cloud serverless:db-scale {{ aurora.minAcu }} {{ aurora.maxAcu }}</span></p>
         </div>
       </div>
     </div>
 
+    <div class="section">
+      <h2>Scale Aurora capacity</h2>
+      @if (hasAurora)
+        <div class="panel">
+          <div class="form-grid">
+            <div class="field-block">
+              <label>Min ACUs</label>
+              <input type="number" step="0.5" min="0.5" :value="scaleMin()" @input="scaleMin.set($event.target.value)" placeholder="{{ seedMin }}" autocomplete="off">
+            </div>
+            <div class="field-block">
+              <label>Max ACUs</label>
+              <input type="number" step="0.5" min="0.5" :value="scaleMax()" @input="scaleMax.set($event.target.value)" placeholder="{{ seedMax }}" autocomplete="off">
+            </div>
+          </div>
+          <div class="form-actions">
+            <button class="btn sm" type="button" @click="askOp('db:scale', 'scale', 'scale the Aurora cluster')">Scale</button>
+          </div>
+          @include('../partials/op-confirm')
+          <p class="note">Adjusts the Aurora Serverless v2 capacity range. New writes settle into the range within a few seconds.</p>
+        </div>
+      @else
+        <p class="note">Aurora Serverless is not attached to this app.</p>
+      @endif
+    </div>
+
     <div class="cols section">
       <div>
         <h2>RDS Proxy</h2>

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

@@ -10,10 +10,33 @@ const deployments = __d?.deploymentsDetail ?? [
 ]
 function tone(s) { return s === 'success' ? 'ok' : (s === 'rolled-back' ? 'warn' : 'bad') }
 </script>
+<script client>
+// Rollback + redeploy run live against AWS through /api/serverless/operations/run.
+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) { pending.set({ operation, confirm, verb }); 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 res = await fetch('/api/serverless/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ operation: p.operation, confirm: p.confirm }) })
+    const body = await res.json()
+    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (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' })
+  @include('../partials/head', { title: 'ts-cloud · Deployments' })
 </head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
@@ -24,9 +47,9 @@ function tone(s) { return s === 'success' ? 'ok' : (s === 'rolled-back' ? 'warn'
         <h1>Deployments</h1>
         <p>Every deploy publishes an immutable artifact; activation is atomic and rollback flips back instantly.</p>
       </div>
-      <div class="cmds header-actions">
-        <span class="cmd">cloud serverless:rollback</span>
-        <span class="accent cmd">cloud deploy:serverless</span>
+      <div class="header-actions">
+        <button class="btn danger sm" type="button" @click="askOp('rollback', 'rollback', 'roll back to the previous build')">Roll back</button>
+        <button class="btn sm" type="button" @click="askOp('redeploy', 'redeploy', 'redeploy the current build')">Redeploy</button>
       </div>
     </header>
 
@@ -40,7 +63,7 @@ function tone(s) { return s === 'success' ? 'ok' : (s === 'rolled-back' ? 'warn'
                 <td class="mono">{{ d.sha }}</td>
                 <td><span class="pill {{ tone(d.status) }}">{{ d.status }}</span></td>
                 <td class="mono">v{{ d.version }}</td>
-                <td class="mono" style="font-size:11px;color:var(--txt3)">@if (d.hooks.length === 0)—@else{{ d.hooks.join(' · ') }}@endif</td>
+                <td class="mono" style="font-size:11px;color:var(--txt3)">@if (d.hooks.length === 0)-@else{{ d.hooks.join(' · ') }}@endif</td>
                 <td style="color:var(--txt2)">{{ d.by }}</td>
                 <td class="mono">{{ d.took }}</td>
                 <td style="color:var(--txt3)">{{ d.when }}</td>
@@ -48,7 +71,8 @@ function tone(s) { return s === 'success' ? 'ok' : (s === 'rolled-back' ? 'warn'
             @endforeach
           </tbody>
         </table>
-        <p class="note">Re-activate the last build without rebuilding: <span class="mono">cloud deploy:serverless --redeploy</span></p>
+        @include('../partials/op-confirm')
+        <p class="note">Rollback restores the previous build's code and env and flips the live alias back instantly. Redeploy re-activates the current build without rebuilding.</p>
       </div>
     </div>
   </div>

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

@@ -13,7 +13,7 @@ function fmt(n) { return n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
-  @include('../partials/head', { title: 'ts-cloud — Firewall' })
+  @include('../partials/head', { title: 'ts-cloud - Firewall' })
 </head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })