@stacksjs/ts-cloud 0.5.35 → 0.6.0

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 })

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

@@ -6,7 +6,7 @@ const app = __d?.app ?? { name: 'acme', env: 'production' }
 const functions = __d?.functionsDetail ?? [
   {
     key: 'http', name: 'acme-production-http', runtime: 'provided.al2023', arch: 'x86_64',
-    memory: 1024, timeout: 28, ephemeral: 512, version: '$LATEST', concurrency: '—',
+    memory: 1024, timeout: 28, ephemeral: 512, version: '$LATEST', concurrency: '-',
     invocations: 171200, errors: 21, throttles: 0, p50: 32, p95: 86, p99: 180, maxMem: 184,
     spark: [40, 52, 48, 61, 73, 66, 80, 72, 95, 88, 70, 64],
     env: ['APP_ENV', 'ASSET_URL', 'TSCLOUD_CACHE_TABLE', 'DB_HOST', 'QUEUE_CONNECTION'],
@@ -29,7 +29,7 @@ const functions = __d?.functionsDetail ?? [
   },
   {
     key: 'cli', name: 'acme-production-cli', runtime: 'provided.al2023', arch: 'x86_64',
-    memory: 1024, timeout: 900, ephemeral: 512, version: '$LATEST', concurrency: '—',
+    memory: 1024, timeout: 900, ephemeral: 512, version: '$LATEST', concurrency: '-',
     invocations: 1440, errors: 0, throttles: 0, p50: 800, p95: 1100, p99: 1400, maxMem: 312,
     spark: [2, 1, 1, 1, 2, 1, 1, 1, 1, 2, 1, 1],
     env: ['APP_ENV', 'TSCLOUD_SCHEDULER'],
@@ -41,11 +41,40 @@ const functions = __d?.functionsDetail ?? [
 ]
 
 function fmt(n) { return n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k` : String(n) }
+const modes = (__d?.functionsDetail ?? functions).map(f => f.key)
+const initialMode = modes[0] ?? 'http'
+</script>
+<script client>
+// Per-function config runs live against AWS through /api/serverless/functions/config.
+const mode = state(initialMode)
+const mem = state('1024')
+const to = state('28')
+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) }
+function applyConfig() { const m = mode(); askOp(m, m, 'update the ' + m + ' function') }
+async function runOp() {
+  const p = pending()
+  if (!p || typed() !== p.confirm) return
+  pending.set(null); typed.set('')
+  opShown.set(true); opOutput.set('Updating ' + p.operation + '...')
+  try {
+    const res = await fetch('/api/serverless/functions/config', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ mode: p.operation, memory: Number(mem()), timeout: Number(to()), 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 — Functions' })
+  @include('../partials/head', { title: 'ts-cloud · Functions' })
 </head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
@@ -55,7 +84,7 @@ function fmt(n) { return n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k
     <header class="page">
       <div>
         <h1>Functions</h1>
-        <p>The three Lambda functions sharing one artifact — HTTP, queue worker, and CLI/scheduler.</p>
+        <p>The three Lambda functions sharing one artifact - HTTP, queue worker, and CLI/scheduler.</p>
       </div>
     </header>
 
@@ -113,6 +142,35 @@ function fmt(n) { return n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k
         </div>
       </div>
     @endforeach
+
+    <div class="section">
+      <h2>Configure function</h2>
+      <div class="panel">
+        <div class="form-grid">
+          <div class="field-block">
+            <label>Function</label>
+            <select :value="mode()" @change="mode.set($event.target.value)">
+              @foreach (modes as m)
+                <option value="{{ m }}">{{ m }}</option>
+              @endforeach
+            </select>
+          </div>
+          <div class="field-block">
+            <label>Memory (MB)</label>
+            <input type="number" min="128" max="10240" :value="mem()" @input="mem.set($event.target.value)" placeholder="1024" autocomplete="off">
+          </div>
+          <div class="field-block">
+            <label>Timeout (s)</label>
+            <input type="number" min="1" max="900" :value="to()" @input="to.set($event.target.value)" placeholder="28" autocomplete="off">
+          </div>
+          <div class="form-actions">
+            <button class="btn" type="button" @click="applyConfig()">Apply</button>
+          </div>
+        </div>
+        @include('../partials/op-confirm')
+        <p class="note">Memory is 128 to 10240 MB, timeout is 1 to 900 s. Changes are applied to the live function immediately via <span class="mono">cloud functions:config</span>.</p>
+      </div>
+    </div>
   </div>
 </body>
 </html>

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

@@ -7,7 +7,7 @@ const emptyReason = __d?.serverlessLogsEmptyReason ?? 'No function logs are avai
 </script>
 <script client>
 // Reactive aggregated CloudWatch logs across the functions, with level + function
-// filtering and auto-refresh — seeded from build-time data (stx server→client
+// filtering and auto-refresh - seeded from build-time data (stx server→client
 // bridge), then live-refreshed. Signals + directives only (no manual DOM).
 const logs = state(initialLogs)
 const level = state('all')
@@ -28,7 +28,7 @@ onMount(() => { refresh(); const id = setInterval(refresh, 8000); return () => c
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
-<head>@include('../partials/head', { title: 'ts-cloud — Function logs' })</head>
+<head>@include('../partials/head', { title: 'ts-cloud - Function logs' })</head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
   <div class="wrap">

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

@@ -16,7 +16,7 @@ function pct(v, max) { return Math.round((v / max) * 100) }
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
-  @include('../partials/head', { title: 'ts-cloud — Metrics' })
+  @include('../partials/head', { title: 'ts-cloud · Metrics' })
 </head>
 <body>
   @include('../partials/nav', { active: 'serverless', name: app.name, env: app.env })
@@ -27,6 +27,10 @@ function pct(v, max) { return Math.round((v / max) * 100) }
         <h1>Metrics</h1>
         <p>CloudWatch metrics across the function trio, last {{ window }}.</p>
       </div>
+      <div class="header-actions">
+        <a class="btn ghost sm" href="/serverless/traces">Traces →</a>
+        <a class="btn ghost sm" href="/serverless/alarms">Alarms →</a>
+      </div>
     </header>
 
     <div class="grid cards">