@stacksjs/ts-cloud 0.7.56 → 0.7.57

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

@@ -11,6 +11,8 @@ const initialQueues = queues
 const queueNames = queues.map(q => q.short)
 </script>
 <script client>
+import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+
 // Live dead-letter queue: peek at messages, redrive them back onto a source
 // queue, or purge the DLQ. Per-queue purge runs the queue:purge:<name> op.
 const rows = state(initialQueues)
@@ -18,18 +20,14 @@ const dlq = state([])
 const dlqLoaded = state(false)
 const dlqMsg = state('')
 const target = state(queueNames[0] || '')
-const busy = state(false)
+function fmtQueue(n) { n = Number(n || 0); return n >= 1000 ? (n / 1000).toFixed(n >= 10000 ? 0 : 1) + 'k' : String(n) }
 
-// Op runner (redrive / purge / per-queue purge) - typed-confirm bar.
-const opOutput = state('')
-const opShown = state(false)
-const pending = state(null)
-const typed = state('')
-const confirmTok = derived(() => { const p = pending(); return p ? p.confirm : '' })
-const confirmVerb = derived(() => { const p = pending(); return p ? p.verb : '' })
-const canRun = derived(() => { const p = pending(); return !!p && typed() === p.confirm })
-function askOp(kind, confirm, verb) { pending.set({ kind, confirm, verb }); typed.set('') }
-function cancelOp() { pending.set(null) }
+async function loadQueues() {
+  const response = await fetch('/api/dashboard-data')
+  if (!response.ok) throw new Error('Queue refresh failed with HTTP ' + response.status + '.')
+  const data = await response.json()
+  if (Array.isArray(data.queuesDetail)) rows.set(data.queuesDetail)
+}
 
 async function loadDlq() {
   dlqMsg.set('Loading dead-letter queue...')
@@ -40,28 +38,21 @@ async function loadDlq() {
   } catch (e) { dlqMsg.set('Failed to load DLQ: ' + ((e && e.message) || e)) }
   finally { dlqLoaded.set(true) }
 }
-onMount(() => { loadDlq() })
+onMount(() => { loadDlq(); loadQueues().catch(error => dlqMsg.set(error?.message || 'Queue refresh failed.')) })
 
-async function runOp() {
-  const p = pending()
-  if (!p || typed() !== p.confirm) return
-  pending.set(null); typed.set('')
-  opShown.set(true); opOutput.set('Running...')
-  busy.set(true)
-  try {
-    let res
-    if (p.kind === 'redrive')
-      res = await fetch('/api/serverless/dlq/redrive', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ confirm: 'redrive', targetQueue: target(), max: 25 }) })
-    else if (p.kind === 'purge-dlq')
-      res = await fetch('/api/serverless/dlq/purge', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ confirm: 'purge' }) })
-    else
-      res = await fetch('/api/serverless/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ operation: 'queue:purge:' + p.kind.replace('purge-queue:', ''), confirm: p.confirm }) })
-    const body = await res.json()
-    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || '') + '\n\n' + (body.stdout || '') + (body.error ? '\n' + body.error : ''))
-    if (body.ok) loadDlq()
-  } catch (e) { opOutput.set('FAILED\n\n' + ((e && e.message) || e)) }
-  finally { busy.set(false) }
-}
+// Op runner (redrive / purge / per-queue purge) - typed-confirm bar.
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  let res
+  if (p.operation === 'redrive')
+    res = await fetch('/api/serverless/dlq/redrive', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ confirm: p.apiConfirm, targetQueue: target(), max: 25 }) })
+  else if (p.operation === 'purge-dlq')
+    res = await fetch('/api/serverless/dlq/purge', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ confirm: p.apiConfirm }) })
+  else
+    res = await fetch('/api/serverless/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ operation: 'queue:purge:' + p.operation.replace('purge-queue:', ''), confirm: p.apiConfirm }) })
+  const body = await res.json()
+  if (body.ok) { loadDlq(); loadQueues().catch(error => dlqMsg.set(error?.message || 'Queue refresh failed.')) }
+  return (body.ok ? 'OK ' : 'FAILED ') + (body.command || '') + '\n\n' + (body.stdout || '') + (body.error ? '\n' + body.error : '')
+})
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -81,10 +72,10 @@ async function runOp() {
 
     <div class="section">
       <div class="panel">
-        <table>
-          <thead><tr><th>Queue</th><th>Visible</th><th>In-flight</th><th>Oldest</th><th>Concurrency</th><th>Tries</th><th>Vis. timeout</th><th>Processed</th><th>DLQ</th><th class="table-actions">Action</th></tr></thead>
+        <table @show="rows().length > 0">
+          <thead><tr><th scope="col">Queue</th><th scope="col">Visible</th><th scope="col">In-flight</th><th scope="col">Oldest</th><th scope="col">Concurrency</th><th scope="col">Tries</th><th scope="col">Vis. timeout</th><th scope="col">Processed</th><th scope="col">DLQ</th><th scope="col" class="table-actions">Action</th></tr></thead>
           <tbody>
-            @foreach (queues as q)
+            <template :for="q in rows()">
               <tr>
                 <td><b>{{ q.short }}</b><div class="mono" style="font-size:11px;color:var(--txt3)">{{ q.name }}</div></td>
                 <td>{{ q.visible }}</td>
@@ -93,13 +84,14 @@ async function runOp() {
                 <td>{{ q.concurrency }}</td>
                 <td>{{ q.tries }}</td>
                 <td class="mono">{{ q.visTimeout }}s</td>
-                <td style="color:var(--txt2)">{{ fmt(q.processed) }}</td>
-                <td>@if (q.dlq > 0)<span class="bad pill">{{ q.dlq }}</span>@else<span style="color:var(--txt3)">0</span>@endif</td>
-                <td class="table-actions"><button class="btn danger sm" type="button" @click="askOp('purge-queue:{{ q.short }}', '{{ q.short }}', 'purge the {{ q.short }} queue')">Purge</button></td>
+                <td style="color:var(--txt2)">{{ fmtQueue(q.processed) }}</td>
+                <td><span class="bad pill" @show="q.dlq > 0">{{ q.dlq }}</span><span style="color:var(--txt3)" @show="!q.dlq">0</span></td>
+                <td class="table-actions"><button class="btn danger sm" type="button" :aria-label="'Purge queue ' + q.short" @click="askOp('purge-queue:' + q.short, q.short, 'purge the ' + q.short + ' queue')">Purge</button></td>
               </tr>
-            @endforeach
+            </template>
           </tbody>
         </table>
+        <div class="empty" @show="rows().length === 0"><strong>No queues configured</strong><span>Add a queue definition to the serverless application to process background jobs.</span></div>
       </div>
     </div>
 
@@ -117,13 +109,13 @@ async function runOp() {
           </div>
           <div class="row-actions">
             <button class="btn ghost sm" type="button" :disabled="busy()" @click="loadDlq()">Refresh</button>
-            <button class="btn ghost sm" type="button" :disabled="busy()" @click="askOp('redrive', 'redrive', 'move DLQ messages back onto the source queue')">Redrive</button>
-            <button class="btn danger sm" type="button" :disabled="busy()" @click="askOp('purge-dlq', 'purge', 'permanently purge the dead-letter queue')">Purge DLQ</button>
+            <button class="btn ghost sm" type="button" :disabled="busy()" @click="askOp('redrive', target(), 'move DLQ messages into ' + target(), 'redrive')">Redrive</button>
+            <button class="btn danger sm" type="button" :disabled="busy()" @click="askOp('purge-dlq', 'dead-letter queue', 'permanently purge the dead-letter queue', 'purge')">Purge DLQ</button>
           </div>
         </div>
 
         <table @show="dlq().length > 0">
-          <thead><tr><th>Message ID</th><th>Body</th></tr></thead>
+          <thead><tr><th scope="col">Message ID</th><th scope="col">Body</th></tr></thead>
           <tbody>
             <template :for="m in dlq()">
               <tr>

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

@@ -12,6 +12,8 @@ const secrets = __d?.secretsList ?? [
 const initialSecrets = secrets
 </script>
 <script client>
+import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+
 // Secrets editor: set (create/update) a value in Secrets Manager, or delete one.
 // The value is write-only - it is sent to the server and never read back.
 const rows = state(initialSecrets)
@@ -19,12 +21,18 @@ const secretId = state('')
 const value = state('')
 const msg = state('')
 const msgOk = state(false)
-const busy = state(false)
-
-// Delete flow uses a typed-confirm (the secret id) before firing.
-const pendingDelete = state(null)
-const typedDelete = state('')
-const canDelete = derived(() => { const p = pendingDelete(); return !!p && typedDelete() === p })
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  if (p.operation.startsWith('secret:overwrite:')) {
+    await setSecret()
+    return msg()
+  }
+  const id = String(p.secretId)
+  const res = await fetch('/api/serverless/secrets', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ secretId: id, confirm: p.apiConfirm }) })
+  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()
+  return msg()
+})
 
 async function refresh() {
   try { const r = await fetch('/api/serverless/secrets'); if (!r.ok) return; const x = await r.json(); if (Array.isArray(x.secrets)) rows.set(x.secrets) } catch {}
@@ -44,21 +52,15 @@ async function setSecret() {
   } catch (e) { msg.set('Failed: ' + ((e && e.message) || e)); msgOk.set(false) }
   finally { busy.set(false) }
 }
-function pickSource(src) { secretId.set(src) }
-function askDelete(src) { pendingDelete.set(src); typedDelete.set('') }
-function cancelDelete() { pendingDelete.set(null); typedDelete.set('') }
-async function confirmDelete() {
-  const id = pendingDelete()
-  if (!id || typedDelete() !== id) return
-  pendingDelete.set(null); typedDelete.set('')
-  msg.set('Deleting ' + id + '...'); msgOk.set(false)
-  try {
-    const res = await fetch('/api/serverless/secrets', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ secretId: id, confirm: id }) })
-    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) }
+function requestSetSecret() {
+  const id = secretId().trim()
+  if (!id || !value()) { setSecret(); return }
+  const exists = rows().some(s => (s.source ?? s.secretId) === id)
+  if (!exists) { setSecret(); return }
+  askOp('secret:overwrite:' + id, id, 'overwrite secret ' + id, null, id, { secretId: id, danger: true, label: 'Overwrite secret' })
 }
+function pickSource(src) { secretId.set(src) }
+function askDelete(id) { askOp('secret:delete:' + id, id, 'delete secret ' + id, null, id, { secretId: id, danger: true, label: 'Delete secret' }) }
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -79,7 +81,7 @@ async function confirmDelete() {
     <div class="section">
       <div class="panel">
         <table>
-          <thead><tr><th>Key</th><th>Secret source</th><th>Value</th><th>Updated</th><th class="table-actions">Actions</th></tr></thead>
+          <thead><tr><th scope="col">Key</th><th scope="col">Secret source</th><th scope="col">Value</th><th scope="col">Updated</th><th scope="col" class="table-actions">Actions</th></tr></thead>
           <tbody>
             <template :for="s in rows()">
               <tr>
@@ -89,8 +91,8 @@ async function confirmDelete() {
                 <td style="color:var(--txt3)">{{ s.updated ?? '-' }}</td>
                 <td class="table-actions">
                   <div class="row-actions" style="justify-content:flex-end">
-                    <button class="btn ghost sm" type="button" @click="pickSource(s.source ?? s.secretId)">Set value</button>
-                    <button class="btn danger sm" type="button" @click="askDelete(s.source ?? s.secretId)">Delete</button>
+                    <button class="btn ghost sm" type="button" :aria-label="'Set value for ' + (s.source ?? s.secretId)" @click="pickSource(s.source ?? s.secretId)">Set value</button>
+                    <button class="btn danger sm" type="button" :aria-label="'Delete ' + (s.source ?? s.secretId)" @click="askDelete(s.source ?? s.secretId)">Delete</button>
                   </div>
                 </td>
               </tr>
@@ -101,12 +103,7 @@ async function confirmDelete() {
           </tbody>
         </table>
 
-        <div class="op-confirm" @show="pendingDelete() !== null" style="margin-top:14px">
-          <span>Type <b class="mono">{{ pendingDelete() }}</b> to delete this secret:</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>
+        @include('../partials/op-confirm')
       </div>
     </div>
 
@@ -115,15 +112,15 @@ async function confirmDelete() {
       <div class="panel">
         <div class="form-grid">
           <div class="field-block">
-            <label>Secret id (source path)</label>
-            <input :value="secretId()" @input="secretId.set($event.target.value)" placeholder="acme/production/stripe" autocomplete="off">
+            <label for="secret-id">Secret id (source path)</label>
+            <input id="secret-id" :value="secretId()" @input="secretId.set($event.target.value)" placeholder="acme/production/stripe" autocomplete="off">
           </div>
           <div class="field-block">
-            <label>Value (write-only)</label>
-            <input type="password" :value="value()" @input="value.set($event.target.value)" placeholder="new secret value" autocomplete="off">
+            <label for="secret-value">Value (write-only)</label>
+            <input id="secret-value" type="password" :value="value()" @input="value.set($event.target.value)" placeholder="new secret value" autocomplete="off">
           </div>
           <div class="form-actions">
-            <button class="btn" type="button" :disabled="busy()" @click="setSecret()">Save secret</button>
+            <button class="btn" type="button" :disabled="busy()" @click="requestSetSecret()">Save secret</button>
             <span class="msg" :class="{ ok: msgOk(), bad: msg() && !msgOk() }">{{ msg() }}</span>
           </div>
         </div>

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

@@ -2,11 +2,7 @@
 let __d = null
 try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
 const app = __d?.app ?? { name: 'acme', env: 'production' }
-const initialTraces = __d?.traces ?? [
-  { id: '1-6630a1b2-abc123', method: 'GET', url: 'https://acme.com/', httpStatus: 200, responseMs: 84, durationMs: 86, status: 'ok' },
-  { id: '1-6630a1c4-def456', method: 'POST', url: 'https://acme.com/checkout', httpStatus: 500, responseMs: 240, durationMs: 512, status: 'fault' },
-  { id: '1-6630a1d9-9a0f21', method: 'GET', url: 'https://acme.com/api/orders', httpStatus: 429, responseMs: 12, durationMs: 12, status: 'throttle' },
-]
+const initialTraces = __d?.traces ?? []
 </script>
 <script client>
 // X-Ray traces for the HTTP function, refreshed over /api/serverless/traces.
@@ -63,7 +59,7 @@ onMount(() => { load() })
         </div>
 
         <table @show="shown().length > 0">
-          <thead><tr><th>Trace</th><th>Method</th><th>URL</th><th>HTTP</th><th>Response</th><th>Duration</th><th>Status</th></tr></thead>
+          <thead><tr><th scope="col">Trace</th><th scope="col">Method</th><th scope="col">URL</th><th scope="col">HTTP</th><th scope="col">Response</th><th scope="col">Duration</th><th scope="col">Status</th></tr></thead>
           <tbody>
             <template :for="t in shown()">
               <tr>

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

@@ -1,48 +1,26 @@
 <script server>
 // ts-cloud serverless (Vapor-style) dashboard. Real data is injected at build
-// time via TSCLOUD_DASHBOARD_DATA (run `cloud dashboard:build`); the sample
-// values below render the design when nothing is injected. Sections drill into
+// time via TSCLOUD_DASHBOARD_DATA (run `cloud dashboard:build`). Missing data
+// remains explicit and is never replaced by samples. Sections drill into
 // dedicated pages under /serverless/*, and the header operations run live
 // against AWS via /api/serverless/*.
 let __d = null
 try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') }
 catch { __d = null }
 
-const app = __d?.app ?? {
-  name: 'acme', env: 'production', region: 'us-east-1', runtime: 'php-8.3 (fpm)',
-  url: 'https://acme.com', build: 'a4d63d2', deployedAt: '12m ago',
-}
+const dataLive = !!__d
+const app = __d?.app ?? { name: 'Project', env: 'production', region: 'unavailable', runtime: 'unavailable', url: '#', build: 'unavailable', deployedAt: 'unavailable' }
 const maintenance = __d?.maintenance ?? { enabled: false }
-const metrics = __d?.metrics ?? { invocations: 184320, errorRatePct: 0.12, p95Ms: 86, coldStartPct: 1.8, concurrency: 42, estCostUsd: 7.4 }
-const functions = __d?.functions ?? [
-  { key: 'http', name: 'acme-production-http', memory: 1024, timeout: 28, runtime: 'provided.al2023', invocations: 171200, errors: 21, p95: 86, status: 'active' },
-  { key: 'queue', name: 'acme-production-queue', memory: 1024, timeout: 120, runtime: 'provided.al2023', invocations: 12840, errors: 3, p95: 240, status: 'active' },
-  { key: 'cli', name: 'acme-production-cli', memory: 1024, timeout: 900, runtime: 'provided.al2023', invocations: 1440, errors: 0, p95: 1100, status: 'active' },
-]
-const queues = __d?.queues ?? [
-  { name: 'default', visible: 0, inFlight: 2, processed: 12830, dlq: 0 },
-  { name: 'emails', visible: 4, inFlight: 1, processed: 9210, dlq: 1 },
-]
-const scheduler = __d?.scheduler ?? { enabled: true, expression: 'rate(1 minute)', lastRun: '36s ago' }
-const dataServices = __d?.dataServices ?? [
-  { name: 'Aurora Serverless v2', detail: 'acme-production-db · 0.5-4 ACU', status: 'available' },
-  { name: 'RDS Proxy', detail: 'acme-production-proxy', status: 'available' },
-  { name: 'ElastiCache (redis)', detail: 'cache.t4g.micro', status: 'available' },
-]
-const assets = __d?.assetsInfo ?? { bucket: 'acme-production-assets', cdn: 'd2x1.cloudfront.net', assetUrl: 'https://d2x1.cloudfront.net/a4d63d2' }
-const waf = __d?.waf ?? { enabled: true, rules: ['rate-limit', 'common', 'sqlInjection'], blocked24h: 318 }
+const metrics = __d?.metrics ?? { invocations: 0, errorRatePct: 0, p95Ms: 0, coldStartPct: undefined, concurrency: 0, estCostUsd: undefined }
+const functions = __d?.functions ?? []
+const queues = __d?.queues ?? []
+const scheduler = __d?.scheduler ?? { enabled: false, expression: 'unavailable', lastRun: 'unavailable' }
+const dataServices = __d?.dataServices ?? []
+const assets = __d?.assetsInfo ?? { bucket: 'unavailable', cdn: 'unavailable', assetUrl: '#' }
+const waf = __d?.waf ?? { enabled: false, rules: [], blocked24h: 0 }
 const wafRules = __d?.wafRules ?? []
-const deployments = __d?.deploymentsDetail ?? [
-  { sha: 'a4d63d2', status: 'success', when: '12m ago', took: '41s', by: 'chris' },
-  { sha: '9557430', status: 'success', when: '2h ago', took: '38s', by: 'ci' },
-  { sha: 'c38fc09', status: 'success', when: '1d ago', took: '44s', by: 'ci' },
-  { sha: '5a2b284', status: 'rolled-back', when: '1d ago', took: '12s', by: 'chris' },
-]
-const secrets = (__d?.secretsList ?? [
-  { key: 'APP_KEY', updated: '14d ago' },
-  { key: 'DB_PASSWORD', updated: '14d ago' },
-  { key: 'STRIPE_SECRET', updated: '3d ago' },
-])
+const deployments = __d?.deploymentsDetail ?? []
+const secrets = __d?.secretsList ?? []
 const wafRuleText = waf.rules ? waf.rules.join(', ') : (wafRules.length ? wafRules.map(r => r.name).join(', ') : '-')
 function statusTone(status) {
   if (status === 'active' || status === 'available' || status === 'success' || status === 'on') return 'ok'
@@ -55,32 +33,19 @@ function fmt(n) { return n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k
 const initialMaintenance = !!maintenance.enabled
 </script>
 <script client>
+import { useOpConfirm } from '../functions/useOpConfirm.ts'
+
 // Live serverless operations: maintenance toggle, redeploy, and rollback run
 // against AWS through /api/serverless/operations/run. Mutating ops stage a
 // typed-confirm via the shared op-confirm bar, then stream their output.
 const maint = state(initialMaintenance)
-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 : ''))
-    if (body.ok && p.operation === 'maintenance:on') maint.set(true)
-    if (body.ok && p.operation === 'maintenance:off') maint.set(false)
-  } catch (e) { opOutput.set('FAILED ' + p.operation + '\n\n' + ((e && e.message) || e)) }
-}
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  const res = await fetch('/api/serverless/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ operation: p.operation, confirm: p.apiConfirm }) })
+  const body = await res.json()
+  if (body.ok && p.operation === 'maintenance:on') maint.set(true)
+  if (body.ok && p.operation === 'maintenance:off') maint.set(false)
+  return (body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (body.error ? '\n' + body.error : '')
+})
 
 // Command console (Vapor-style): invoke an app command through the CLI function.
 const appCmd = state('')
@@ -136,11 +101,11 @@ async function runAppCmd() {
         </div>
       </div>
       <div class="header-actions">
-        <span class="pill" :class="maint() ? 'warn' : 'ok'">{{ maint() ? 'maintenance' : 'live' }}</span>
-        <button class="btn ghost sm" type="button" @show="!maint()" @click="askOp('maintenance:on', 'maintenance', 'enable maintenance mode')">Maintenance</button>
-        <button class="btn ghost sm" type="button" @show="maint()" @click="askOp('maintenance:off', 'live', 'bring the app back live')">Go live</button>
-        <button class="btn ghost 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>
+        @if (dataLive)<span class="pill" :class="maint() ? 'warn' : 'ok'">{{ maint() ? 'maintenance' : 'live' }}</span>@else<span class="pill warn">data unavailable</span>@endif
+        <button class="btn ghost sm" type="button" @show="!maint()" @click="askOp('maintenance:on', '{{ app.name }}', 'enable maintenance mode for {{ app.name }}', 'maintenance')">Maintenance</button>
+        <button class="btn ghost sm" type="button" @show="maint()" @click="askOp('maintenance:off', '{{ app.name }}', 'bring {{ app.name }} back live', 'live')">Go live</button>
+        <button class="btn ghost sm" type="button" @click="askOp('rollback', '{{ app.name }}', 'roll back {{ app.name }} to the previous build', 'rollback')">Roll back</button>
+        <button class="btn sm" type="button" @click="askOp('redeploy', '{{ app.name }}', 'redeploy {{ app.name }}', 'redeploy')">Redeploy</button>
       </div>
     </header>
 
@@ -151,22 +116,22 @@ async function runAppCmd() {
     <div class="grid cards">
       <a class="panel" href="/serverless/metrics">
         <h3>Invocations (24h)</h3>
-        <div class="stat">{{ fmt(metrics.invocations) }}</div>
-        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">{{ metrics.concurrency }} concurrent now</p>
+        <div class="stat">{{ dataLive ? fmt(metrics.invocations) : 'Unavailable' }}</div>
+        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">{{ dataLive ? metrics.concurrency + ' concurrent now' : 'No sample data shown' }}</p>
       </a>
       <a class="panel" href="/serverless/metrics">
         <h3>Error Rate</h3>
-        <div class="stat">{{ metrics.errorRatePct }}%</div>
-        <div class="bar"><i style="width: {{ Math.min(100, metrics.errorRatePct * 10) }}%"></i></div>
+        <div class="stat">{{ dataLive ? metrics.errorRatePct + '%' : 'Unavailable' }}</div>
+        <div class="bar"><i style="width: {{ dataLive ? Math.min(100, metrics.errorRatePct * 10) : 0 }}%"></i></div>
       </a>
       <a class="panel" href="/serverless/metrics">
         <h3>p95 Latency</h3>
-        <div class="stat">{{ metrics.p95Ms }} <small>ms</small></div>
-        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">{{ metrics.coldStartPct }}% cold starts</p>
+        <div class="stat">{{ dataLive ? metrics.p95Ms + ' ms' : 'Unavailable' }}</div>
+        <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">{{ dataLive && metrics.coldStartPct != null ? metrics.coldStartPct + '% cold starts' : 'Cold-start signal unavailable' }}</p>
       </a>
       <a class="panel" href="/serverless/cost">
         <h3>Est. Cost (24h)</h3>
-        <div class="stat">${{ metrics.estCostUsd }}</div>
+        <div class="stat">{{ dataLive && metrics.estCostUsd != null ? '$' + metrics.estCostUsd : 'Unavailable' }}</div>
         <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">cost analysis →</p>
       </a>
     </div>
@@ -176,7 +141,7 @@ async function runAppCmd() {
       <div class="panel">
         <table>
           <thead>
-            <tr><th>Function</th><th>Name</th><th>Memory</th><th>Timeout</th><th>Invocations</th><th>Errors</th><th>p95</th><th>Status</th></tr>
+            <tr><th scope="col">Function</th><th scope="col">Name</th><th scope="col">Memory</th><th scope="col">Timeout</th><th scope="col">Invocations</th><th scope="col">Errors</th><th scope="col">p95</th><th scope="col">Status</th></tr>
           </thead>
           <tbody>
             @foreach (functions as fn)
@@ -202,7 +167,7 @@ async function runAppCmd() {
         <div class="panel">
           <table>
             <thead>
-              <tr><th>Queue</th><th>Visible</th><th>In-flight</th><th>Processed</th><th>DLQ</th></tr>
+              <tr><th scope="col">Queue</th><th scope="col">Visible</th><th scope="col">In-flight</th><th scope="col">Processed</th><th scope="col">DLQ</th></tr>
             </thead>
             <tbody>
               @foreach (queues as q)
@@ -261,7 +226,7 @@ async function runAppCmd() {
             </div>
           @endforeach
           <div style="margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--panel-br);">
-            <button class="btn danger sm" type="button" @click="askOp('rollback', 'rollback', 'roll back to the previous build')">Roll back to previous</button>
+            <button class="btn danger sm" type="button" @click="askOp('rollback', '{{ app.name }}', 'roll back {{ app.name }} to the previous build', 'rollback')">Roll back to previous</button>
           </div>
         </div>
       </div>
@@ -290,7 +255,8 @@ async function runAppCmd() {
       <h2>Run a command</h2>
       <div class="panel">
         <div class="field">
-          <input :value="appCmd()" @input="appCmd.set($event.target.value)" @keydown.enter="askAppCmd()" placeholder="e.g. migrate --force, cache:clear, queue:retry all" autocomplete="off" aria-label="App command to run">
+          <label class="sr-only" for="app-command">Application command to run</label>
+          <input id="app-command" :value="appCmd()" @input="appCmd.set($event.target.value)" @keydown.enter="askAppCmd()" placeholder="e.g. migrate --force, cache:clear, queue:retry all" autocomplete="off">
           <button class="btn" type="button" :disabled="cmdBusy()" @click="askAppCmd()">Run</button>
         </div>
         <div class="op-confirm" @show="cmdPending() !== null" style="margin-top:14px">
@@ -299,7 +265,7 @@ async function runAppCmd() {
           <button type="button" class="btn danger sm" :disabled="!cmdCanRun()" @click="runAppCmd()">Run command</button>
           <button type="button" class="btn ghost sm" @click="cancelAppCmd()">Cancel</button>
         </div>
-        <pre class="action-output" @show="cmdShown()">{{ cmdOut() }}</pre>
+        <pre class="action-output" @show="cmdShown()" aria-live="polite">{{ cmdOut() }}</pre>
         <p class="note">Invokes the app command through the CLI Lambda function (RequestResponse), the same path as <span class="mono">cloud command "..."</span>. Output is clamped.</p>
       </div>
     </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/ts-cloud",
   "type": "module",
-  "version": "0.7.56",
+  "version": "0.7.57",
   "description": "A lightweight, performant infrastructure-as-code library and CLI for deploying both server-based (EC2) and serverless applications.",
   "author": "Chris Breuer <chris@stacksjs.com>",
   "license": "MIT",
@@ -80,24 +80,24 @@
     "zip:windows-x64": "zip -j bin/cloud-windows-x64.zip bin/cloud-windows-x64.exe",
     "zip:darwin-x64": "zip -j bin/cloud-darwin-x64.zip bin/cloud-darwin-x64",
     "zip:darwin-arm64": "zip -j bin/cloud-darwin-arm64.zip bin/cloud-darwin-arm64",
-    "lint": "bun x --bun pickier lint .",
-    "lint:fix": "bun x --bun pickier lint . --fix",
-    "format": "bun x --bun pickier format .",
-    "format:fix": "bun x --bun pickier format . --write",
+    "lint": "bun x --bun --package github:pickier/pickier#95de532 pickier run . --mode lint --config ../../pickier.config.ts --max-warnings 0",
+    "lint:fix": "bun x --bun --package github:pickier/pickier#95de532 pickier run . --mode lint --config ../../pickier.config.ts --fix --max-warnings 0",
+    "format": "bun x --bun --package github:pickier/pickier#95de532 pickier run . --mode format --config ../../pickier.config.ts --check",
+    "format:fix": "bun x --bun --package github:pickier/pickier#95de532 pickier run . --mode format --config ../../pickier.config.ts --write",
     "fresh": "bun x rimraf node_modules/ bun.lock && bun i",
     "prepublishOnly": "bun --bun run build",
     "test": "bun test"
   },
   "dependencies": {
-    "@ts-cloud/aws-types": "0.7.56",
-    "@ts-cloud/core": "0.7.56",
-    "@stacksjs/ts-xml": "^0.1.0"
+    "@stacksjs/ts-xml": "^0.1.0",
+    "@ts-cloud/aws-types": "0.7.57",
+    "@ts-cloud/core": "0.7.57"
   },
   "devDependencies": {
-    "bunfig": "^0.15.6",
-    "better-dx": "^0.2.16"
+    "better-dx": "^0.2.16",
+    "bunfig": "^0.15.6"
   },
   "lint-staged": {
-    "*.{js,ts,json,yaml,yml,md}": "bun x --bun pickier lint --fix"
+    "*.{js,ts,json,yaml,yml,md}": "bun x --bun --package github:pickier/pickier#95de532 pickier run --mode lint --config ../../pickier.config.ts --fix --max-warnings 0"
   }
 }