@stacksjs/ts-cloud 0.7.56 → 0.7.58

package/dist/ui-src/pages/operations/jobs.stx

@@ -0,0 +1,238 @@
+<script client>
+import { usePolling } from '../../functions/usePolling.ts'
+
+const jobs = state([])
+const workers = state([])
+const history = state([])
+const operations = state([])
+const preview = state(null)
+const selectedJob = state(null)
+const mode = state('server')
+const tab = state('schedules')
+const notice = state('')
+const actionError = state('')
+const search = state('')
+const providerFilter = state('all')
+const statusFilter = state('all')
+const busy = state(false)
+let previewTimer
+
+async function api(url, options) {
+  const response = await fetch(url, options)
+  const body = await response.json()
+  if (!response.ok || body.ok === false)
+    throw new Error(body.error || 'Request failed.')
+  return body
+}
+
+async function load() {
+  const [jobResult, workerResult, dashboard] = await Promise.all([
+    api('/api/jobs'),
+    api('/api/workers'),
+    fetch('/api/dashboard-data').then(response => response.json()).catch(() => ({})),
+  ])
+  jobs.set(jobResult.jobs || [])
+  workers.set(workerResult.workers || [])
+  mode.set(dashboard.mode || (jobResult.jobs?.some(item => item.provider === 'eventbridge') ? 'serverless' : 'server'))
+  if ((dashboard.mode || mode()) === 'server') {
+    const all = await fetch('/api/server/operations').then(response => response.json()).catch(() => [])
+    const values = Array.isArray(all) ? all : []
+    operations.set(values.filter(item => !item.danger && ['scheduler', 'backup', 'worker'].includes(item.group)))
+  }
+  else operations.set([])
+  if (selectedJob()) {
+    const current = jobResult.jobs?.find(item => item.id === selectedJob().id)
+    if (current) selectedJob.set(current)
+  }
+}
+
+const { pollingState, pollingError, lastUpdatedAt, refresh } = usePolling(load, 15000)
+
+function formBody(form) { return Object.fromEntries(new FormData(form)) }
+function tone(value) { return ['succeeded', 'enabled', 'in_sync', 'running'].includes(value) ? 'ok' : ['failed', 'dead', 'drifted', 'unavailable'].includes(value) ? 'bad' : 'warn' }
+function when(value) { return value ? new Date(value).toLocaleString() : '—' }
+function duration(item) { if (!item?.startedAt || !item?.finishedAt) return '—'; const ms = new Date(item.finishedAt) - new Date(item.startedAt); return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s` }
+function filteredJobs() {
+  const query = search().trim().toLowerCase()
+  return jobs().filter(item => (!query || `${item.name} ${item.expression} ${item.timezone}`.toLowerCase().includes(query)) && (providerFilter() === 'all' || item.provider === providerFilter()) && (statusFilter() === 'all' || (statusFilter() === 'enabled' ? item.enabled : !item.enabled)))
+}
+function setPreset(event) {
+  const value = event.currentTarget.value
+  if (!value) return
+  const input = event.currentTarget.form?.querySelector('[name="expression"]')
+  if (input) { input.value = value; queuePreview(event.currentTarget.form) }
+}
+function queuePreview(form) { clearTimeout(previewTimer); previewTimer = setTimeout(() => void previewForm(form), 300) }
+async function previewForm(form) {
+  if (!form) return
+  const value = formBody(form)
+  try {
+    const result = await api('/api/jobs/preview', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ expression: value.expression, timezone: value.timezone, count: 5 }) })
+    preview.set(result.preview)
+    actionError.set('')
+  }
+  catch (error) { preview.set(null); actionError.set(error.message) }
+}
+async function createJob(event) {
+  event.preventDefault()
+  busy.set(true)
+  try {
+    const value = formBody(event.currentTarget)
+    const payloadRefs = value.payloadRef ? { input: value.payloadRef } : {}
+    await api('/api/jobs', {
+      method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({
+        name: value.name,
+        provider: mode() === 'serverless' ? 'eventbridge' : 'server',
+        operationId: value.operationId || undefined,
+        expression: value.expression,
+        timezone: value.timezone,
+        startsAt: value.startsAt || undefined,
+        endsAt: value.endsAt || undefined,
+        flexibleMinutes: Number(value.flexibleMinutes) || 0,
+        missedRunPolicy: value.missedRunPolicy,
+        overlapPolicy: value.overlapPolicy,
+        maxAttempts: Number(value.maxAttempts),
+        backoffSeconds: Number(value.backoffSeconds),
+        timeoutSeconds: Number(value.timeoutSeconds),
+        deadLetterRef: value.deadLetterRef || undefined,
+        payloadRefs,
+      }),
+    })
+    event.currentTarget.reset()
+    preview.set(null)
+    notice.set('Schedule created. Provider reconciliation is pending.')
+    actionError.set('')
+    await refresh()
+  }
+  catch (error) { actionError.set(error.message) }
+  finally { busy.set(false) }
+}
+async function jobAction(item, action) {
+  let confirm = ''
+  if (['disable', 'delete'].includes(action)) {
+    confirm = window.prompt(`Type ${action} to confirm this change.`) || ''
+    if (confirm !== action) return
+  }
+  busy.set(true)
+  try {
+    const result = await api('/api/jobs/action', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: item.id, action, confirm }) })
+    notice.set(action === 'run' ? `Queued ${item.name} as execution ${result.execution.id}.` : `${item.name} ${action}d.`)
+    actionError.set('')
+    await refresh()
+    if (action === 'run') await showHistory(item)
+  }
+  catch (error) { actionError.set(error.message) }
+  finally { busy.set(false) }
+}
+async function editJob(item) {
+  if (item.origin === 'config') { actionError.set('Config-defined schedules must be edited in cloud.config.ts, then reconciled.'); return }
+  const expression = window.prompt('Schedule expression', item.expression)
+  if (!expression) return
+  const timezone = window.prompt('IANA timezone', item.timezone)
+  if (!timezone) return
+  try {
+    await api('/api/jobs', { method: 'PATCH', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: item.id, expression, timezone }) })
+    notice.set(`${item.name} updated.`)
+    actionError.set('')
+    await refresh()
+  }
+  catch (error) { actionError.set(error.message) }
+}
+async function showHistory(item) {
+  selectedJob.set(item)
+  tab.set('history')
+  try { history.set((await api(`/api/jobs/history?jobId=${encodeURIComponent(item.id)}&limit=100`)).executions || []) }
+  catch (error) { actionError.set(error.message) }
+}
+async function reconcile() {
+  try {
+    const result = await api('/api/jobs/reconcile', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+    notice.set(`Reconciled ${result.reconciliation.jobs} schedules and ${result.reconciliation.workers} workers; ${result.reconciliation.drifted} retained as drifted.`)
+    await refresh()
+  }
+  catch (error) { actionError.set(error.message) }
+}
+async function restartWorker(item) {
+  const confirm = window.prompt(`Type ${item.name} to restart this worker.`) || ''
+  if (confirm !== item.name) return
+  try {
+    await api('/api/workers/action', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: item.id, action: 'restart', confirm }) })
+    notice.set(`${item.name} restarted.`)
+    await refresh()
+  }
+  catch (error) { actionError.set(error.message) }
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud · Workers & schedules' })</head>
+<body>
+@include('../partials/nav', { active: 'jobs', env: 'production' })
+<main class="jobs-wrap wrap" id="main-content">
+  <div class="crumbs">Operations <span class="sep">/</span> Workers &amp; schedules</div>
+  <header class="page">
+    <div><h1>Workers &amp; schedules</h1><p>One control plane for cron, EventBridge schedules, recurring operations, queue workers, retries, and execution evidence.</p></div>
+    <div class="header-actions"><span class="pill" :class="pollingState()==='live'?'ok':'warn'">{{ pollingState() }}</span><small>{{ lastUpdatedAt()?.toLocaleTimeString() || 'connecting' }}</small><button class="btn ghost sm" @click="refresh()">Refresh</button><button class="btn ghost sm" @click="reconcile()">Reconcile config</button></div>
+  </header>
+  <p class="notice" role="status" @show="!!notice()">{{ notice() }}</p>
+  <p class="bad notice" role="alert" @show="!!actionError() || !!pollingError()">{{ actionError() || pollingError() }}</p>
+
+  <div class="summary">
+    <article class="panel"><b>Schedules</b><strong>{{ jobs().length }}</strong><small>{{ jobs().filter(item=>item.enabled).length }} enabled</small></article>
+    <article class="panel"><b>Workers</b><strong>{{ workers().length }}</strong><small>{{ workers().reduce((sum,item)=>sum+item.processes,0) }} processes</small></article>
+    <article class="panel"><b>Needs review</b><strong>{{ jobs().filter(item=>['drifted','unsupported','unavailable'].includes(item.reconciliationStatus)).length + workers().filter(item=>['drifted','unsupported','unavailable'].includes(item.reconciliationStatus)).length }}</strong><small>drift or provider gaps</small></article>
+    <article class="panel"><b>Failed last run</b><strong>{{ jobs().filter(item=>['failed','dead'].includes(item.lastExecution?.status)).length }}</strong><small>retry from history</small></article>
+  </div>
+
+  <nav class="tabs" aria-label="Jobs workspace"><button :class="{active:tab()==='schedules'}" @click="tab.set('schedules')">Schedules</button><button :class="{active:tab()==='workers'}" @click="tab.set('workers')">Workers</button><button :class="{active:tab()==='history'}" @click="tab.set('history')">Execution history</button></nav>
+
+  <section @show="tab()==='schedules'" class="schedule-layout">
+    <div>
+      <div class="filters panel"><input aria-label="Search schedules" type="search" placeholder="Search name, expression, timezone" @input="search.set($event.currentTarget.value)"><select aria-label="Filter provider" @change="providerFilter.set($event.currentTarget.value)"><option value="all">All providers</option><option value="server">Server cron</option><option value="eventbridge">EventBridge</option><option value="platform">Platform</option></select><select aria-label="Filter state" @change="statusFilter.set($event.currentTarget.value)"><option value="all">All states</option><option value="enabled">Enabled</option><option value="disabled">Disabled</option></select></div>
+      <div class="cards-list">
+        <template :for="item in filteredJobs()"><article class="job-card panel">
+          <div class="job-title"><div><span class="pill" :class="item.enabled?'ok':'warn'">{{ item.enabled?'enabled':'disabled' }}</span><span class="pill">{{ item.provider }}</span><span class="pill" :class="tone(item.reconciliationStatus)">{{ item.reconciliationStatus }}</span><h2>{{ item.name }}</h2></div><div class="actions"><button class="btn ghost sm" :disabled="busy()" @click="jobAction(item,'run')">Run now</button><button class="btn ghost sm" @click="showHistory(item)">History</button><button class="btn ghost sm" @click="editJob(item)">Edit</button><button class="btn ghost sm" @click="jobAction(item,item.enabled?'disable':'enable')">{{ item.enabled?'Disable':'Enable' }}</button><button class="btn danger sm" @show="item.origin!=='config'" @click="jobAction(item,'delete')">Delete</button></div></div>
+          <div class="job-grid"><div><small>Schedule</small><code>{{ item.expression }}</code><span>{{ item.timezone }}</span></div><div><small>Next run</small><b>{{ when(item.nextRunAt) }}</b><span>Last {{ when(item.lastExecution?.finishedAt || item.lastScheduledFor) }}</span></div><div><small>Target</small><b>{{ item.target.operationId || item.target.action || item.target.functionName || item.target.kind }}</b><span>{{ item.origin }} · owner {{ item.ownerActorId || 'configuration' }}</span></div><div><small>Policies</small><b>{{ item.overlapPolicy }} overlap · {{ item.missedRunPolicy }}</b><span>{{ item.retryPolicy.maxAttempts }} attempts · {{ item.timeoutSeconds }}s timeout</span></div></div>
+          <div class="run-preview"><small>Next five</small><span>{{ item.preview?.nextRuns?.map(when).join(' · ') || 'No run in active window' }}</span></div>
+          <p class="bad note" @show="!!item.lastExecution?.error">{{ item.lastExecution.error }}</p>
+        </article></template>
+        <div class="empty panel" @show="!filteredJobs().length"><strong>No schedules match</strong><span>Create a recurring operation or adjust the filters. Empty means no provider execution will occur.</span></div>
+      </div>
+    </div>
+
+    <form class="editor panel" @submit="createJob($event)" @input="queuePreview($event.currentTarget)">
+      <h2>New schedule</h2><p class="note">Provider: <b>{{ mode()==='serverless'?'EventBridge Scheduler':'server cron' }}</b>. Targets are constrained to safe, configured operations.</p>
+      <label>Name<input name="name" required maxlength="120" placeholder="Nightly backup verification"></label>
+      <label>Preset<select @change="setPreset($event)"><option value="">Custom</option><option value="every_minute">Every minute</option><option value="hourly">Hourly</option><option value="daily">Daily</option><option value="weekly">Weekly</option><option value="monthly">Monthly</option><option value="rate(5 minutes)">Every 5 minutes</option></select></label>
+      <label class="wide">Expression<input name="expression" class="mono" required value="0 * * * *" placeholder="cron or rate(5 minutes)"></label>
+      <label>Timezone<input name="timezone" required value="UTC" placeholder="America/Los_Angeles"></label>
+      <label @show="mode()==='server'"><span>Allowlisted target</span><select name="operationId" :required="mode()==='server'"><option value="">Choose operation</option><template :for="operation in operations()"><option :value="operation.id">{{ operation.label }}</option></template></select></label>
+      <label>Starts at<input name="startsAt" type="datetime-local"></label><label>Ends at<input name="endsAt" type="datetime-local"></label>
+      <label>Flexible window (minutes)<input name="flexibleMinutes" type="number" min="0" max="1440" value="0"></label>
+      <label>Missed runs<select name="missedRunPolicy"><option value="skip">Skip</option><option value="catch_up">Catch up (max 10)</option></select></label>
+      <label>Overlap<select name="overlapPolicy"><option value="forbid">Forbid</option><option value="allow">Allow</option><option value="replace">Replace active run</option></select></label>
+      <label>Max attempts<input name="maxAttempts" type="number" min="1" max="20" value="3"></label>
+      <label>Backoff seconds<input name="backoffSeconds" type="number" min="0" value="30"></label><label>Timeout seconds<input name="timeoutSeconds" type="number" min="1" max="86400" value="900"></label>
+      <label class="wide">Dead-letter reference<input name="deadLetterRef" placeholder="arn://aws/sqs/... or secret://jobs/dlq"></label>
+      <label class="wide">Payload reference (optional)<input name="payloadRef" placeholder="secret://jobs/nightly-input"><span>Inline payload values are rejected. Use secret://, ssm://, arn://, or env:// references.</span></label>
+      <div class="preview wide" @show="!!preview()"><b>{{ preview()?.description }}</b><code>{{ preview()?.normalized }}</code><ol><template :for="run in preview()?.nextRuns || []"><li>{{ when(run) }}</li></template></ol><p class="note">Preview only—no production execution or incident is created.</p></div>
+      <button class="btn wide" type="submit" :disabled="busy() || (mode()==='server' && !operations().length)">{{ busy()?'Creating…':'Create schedule' }}</button>
+      <p class="bad note wide" @show="mode()==='server' && !operations().length">No safe recurring target is configured. Enable a scheduler, worker, or backup operation first.</p>
+    </form>
+  </section>
+
+  <section @show="tab()==='workers'" class="cards-list">
+    <template :for="item in workers()"><article class="panel worker-card"><div><span class="pill">{{ item.provider }}</span><span class="pill" :class="tone(item.observedState?.status || item.reconciliationStatus)">{{ item.observedState?.status || item.reconciliationStatus }}</span><h2>{{ item.name }}</h2></div><div class="job-grid"><div><small>Queue</small><b>{{ item.queue }}</b><span>{{ item.processes }} processes</span></div><div><small>Current job</small><b>{{ item.observedState?.currentJob || 'idle / unavailable' }}</b><span>{{ item.observedState?.processed || 0 }} processed</span></div><div><small>Failures</small><b>{{ item.observedState?.failures || 0 }}</b><span>{{ item.timeoutSeconds }}s timeout</span></div><div><small>Lifecycle</small><b>{{ item.restartPolicy }}</b><span>{{ item.origin }} · {{ item.reconciliationStatus }}</span></div></div><div class="actions"><button class="btn ghost sm" @show="item.provider==='systemd'" @click="restartWorker(item)">Graceful restart</button><span class="note" @show="item.provider!=='systemd'">Scaling and restarts remain provider/config managed for this worker.</span></div></article></template>
+    <div class="empty panel" @show="!workers().length"><strong>No workers configured</strong><span>Add site queues or serverless queue definitions, then reconcile configuration.</span></div>
+  </section>
+
+  <section @show="tab()==='history'">
+    <div class="empty panel" @show="!selectedJob()"><strong>Select a schedule</strong><span>Open History from a schedule to inspect attempts, retry state, duration, output, and redacted logs.</span></div>
+    <div @show="!!selectedJob()"><header class="history-head"><div><h2>{{ selectedJob()?.name }}</h2><p class="note">At-least-once execution evidence; retries reuse the durable operation and preserve every log line.</p></div><button class="btn sm" @click="jobAction(selectedJob(),'run')">Run again</button></header><div class="cards-list"><template :for="item in history()"><article class="execution panel"><div class="execution-head"><span class="pill" :class="tone(item.status)">{{ item.status }}</span><b>{{ when(item.scheduledFor) }}</b><span>{{ item.trigger }} · attempt {{ item.attempt }} · {{ duration(item) }}</span></div><p class="bad note" @show="!!item.error">{{ item.error }}</p><pre @show="item.logs?.length">{{ item.logs?.map(log=>'['+log.stream+'] '+log.message).join('\n') }}</pre><pre @show="Object.keys(item.output||{}).length">{{ JSON.stringify(item.output,null,2) }}</pre></article></template><div class="empty panel" @show="!history().length"><strong>No executions</strong><span>Run the schedule manually or wait for its next due time.</span></div></div></div>
+  </section>
+</main>
+<style>
+.jobs-wrap{max-width:1500px}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.summary article{display:grid;gap:5px}.summary strong{font-size:28px}.summary small{color:var(--txt3)}.tabs{display:flex;gap:5px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:18px}.tabs button{border:0;background:transparent;color:var(--txt3);padding:10px 14px;white-space:nowrap}.tabs button.active{color:var(--txt);border-bottom:2px solid var(--accent)}.schedule-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,.8fr);gap:14px;align-items:start}.filters{display:grid;grid-template-columns:1fr 170px 150px;gap:8px;margin-bottom:10px}.filters input,.filters select,.editor input,.editor select{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:9px}.cards-list{display:grid;gap:10px}.job-title,.execution-head,.history-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.job-title>div:first-child,.worker-card>div:first-child{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.job-title h2,.worker-card h2{font-size:17px;margin:0 0 0 4px}.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.job-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.job-grid>div{display:grid;gap:4px;min-width:0}.job-grid small,.run-preview small{color:var(--txt3);text-transform:uppercase;font-size:9px;letter-spacing:.08em}.job-grid span,.run-preview span{color:var(--txt3);font-size:11px;overflow-wrap:anywhere}.job-grid code{overflow-wrap:anywhere}.run-preview{display:grid;gap:4px;border-top:1px solid var(--line);margin-top:12px;padding-top:10px}.editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:sticky;top:10px}.editor h2,.editor>p{grid-column:1/-1;margin:0}.editor label{display:grid;gap:5px;color:var(--txt3);font-size:11px}.editor label span{font-size:10px}.wide{grid-column:1/-1}.preview{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:6px}.preview ol{margin:0;padding-left:20px;color:var(--txt2);font-size:11px}.worker-card .actions{margin-top:12px}.execution pre{max-height:260px;overflow:auto;background:var(--bg2);padding:10px;border-radius:8px;font-size:11px}.history-head{margin-bottom:10px}.mono,code{font-family:var(--mono)}@media(max-width:1050px){.schedule-layout{grid-template-columns:1fr}.editor{position:static}.job-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.summary{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.job-grid{grid-template-columns:1fr}}@media(max-width:480px){.summary{grid-template-columns:1fr}.editor{grid-template-columns:1fr}.editor>*{grid-column:1!important}}
+</style>
+</body>
+</html>

package/dist/ui-src/pages/operations/maintenance.stx

@@ -0,0 +1,15 @@
+<script server>import { usePolling } from '../../functions/usePolling.ts'</script><script>
+const data=state({manifests:[],windows:[],campaigns:[],cleanups:[],drills:[]}),tab=state('upgrades'),error=state(''),notice=state(''),busy=state(false)
+async function api(url,options){const response=await fetch(url,options),body=await response.json();if(!response.ok||body.ok===false)throw new Error(body.error||'Request failed.');return body}async function load(){data.set(await api('/api/maintenance'))}const{pollingState,pollingError,lastUpdatedAt,refresh}=usePolling(load,12000)
+async function post(url,body){busy.set(true);error.set('');try{const value=await api(url,{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(body)});await refresh();return value}catch(cause){error.set(cause.message)}finally{busy.set(false)}}
+async function preview(event){event.preventDefault();const value=Object.fromEntries(new FormData(event.currentTarget)),result=await post('/api/maintenance/cleanup-preview',{kind:value.kind,olderThanDays:Number(value.olderThanDays)});if(result)notice.set(`Preview found ${result.plan.candidates.length} immutable candidate(s), reclaiming up to ${result.plan.estimatedBytes} bytes.`)}
+async function cleanup(plan){const expected=`DELETE ${plan.candidates.length} ${plan.kind}`,confirmation=prompt(`Type ${expected}. The candidate digest is fixed; changed resources will be rejected.`);if(confirmation===expected){const result=await post('/api/maintenance/cleanup-apply',{planId:plan.id,confirmation});if(result)notice.set(`Cleanup queued as ${result.operation.id}.`)}}
+async function drill(event){event.preventDefault();const value=Object.fromEntries(new FormData(event.currentTarget)),result=await post('/api/maintenance/drill',{...value,expectedRpoMinutes:Number(value.expectedRpoMinutes),expectedRtoMinutes:Number(value.expectedRtoMinutes)});if(result)notice.set(`Isolated drill ${result.drill.id} planned. Review it, then run.`)}async function runDrill(id){const result=await post('/api/maintenance/drill-run',{drillId:id});if(result)notice.set(`DR drill queued as ${result.operation.id}.`)}
+function tone(status){return ['verified','compatible','succeeded','passed','healthy'].includes(status)?'ok':['failed','partial','cleanup_required','rolled_back','blocked'].includes(status)?'bad':'warn'}function bytes(value){return value>1073741824?`${(value/1073741824).toFixed(1)} GB`:value>1048576?`${(value/1048576).toFixed(1)} MB`:`${value} B`}
+</script><!DOCTYPE html><html lang="en" data-theme="dark"><head>@include('../partials/head',{title:'ts-cloud · Maintenance & disaster recovery'})</head><body>@include('../partials/nav',{active:'maintenance',env:'production'})
+<main class="wrap" id="main-content"><div class="crumbs">Operations <span class="sep">/</span> Maintenance & DR</div><header class="page"><div><h1>Maintenance & disaster recovery</h1><p>Verified updates, approved windows, reversible rollout, dry-run cleanup, and isolated restore drills.</p></div><div class="actions"><span class="pill" :class="pollingState()==='live'?'ok':'warn'">{{ pollingState() }}</span><small>{{ lastUpdatedAt()?.toLocaleTimeString()||'connecting' }}</small></div></header><p class="notice" role="status" @show="!!notice()">{{ notice() }}</p><p class="bad notice" role="alert" @show="!!error()||!!pollingError()">{{ error()||pollingError() }}</p>
+<nav class="tabs" aria-label="Maintenance areas"><button :class="tab()==='upgrades'?'active':''" @click="tab.set('upgrades')">Platform updates</button><button :class="tab()==='cleanup'?'active':''" @click="tab.set('cleanup')">Safe cleanup</button><button :class="tab()==='dr'?'active':''" @click="tab.set('dr')">Recovery drills</button></nav>
+<section @show="tab()==='upgrades'"><div class="panel safety"><b>Update trust chain</b><span>Ed25519 signature → schema and platform compatibility → verified backup → approved window → canary → health gate → rolling cohorts.</span></div><div class="grid"><section class="panel"><h2>Verified manifests</h2><template :for="item in data().manifests"><article class="item"><span class="pill" :class="item.compatibility.compatible?'ok':'bad'">{{ item.compatibility.compatible?'compatible':'blocked' }}</span><b>{{ item.version }}</b><small>{{ item.channel }} · key {{ item.keyId }}</small><p>{{ item.compatibility.reasons.join('; ')||'Signature and compatibility verified.' }}</p></article></template><p class="empty" @show="!data().manifests.length">Import signed manifests with the CLI or library; raw unsigned URLs are never offered here.</p></section><section class="panel"><h2>Staged campaigns</h2><template :for="item in data().campaigns"><article class="item"><span class="pill" :class="tone(item.campaign.status)">{{ item.campaign.status }}</span><b>{{ item.campaign.strategy }} from {{ item.campaign.fromVersion }}</b><small>{{ item.campaign.currentStage||'not started' }} · backup {{ item.campaign.backupId }}</small><div class="target-row"><template :for="target in item.targets"><span>{{ target.target }} · {{ target.status }}</span></template></div></article></template><p class="empty" @show="!data().campaigns.length">No upgrade campaigns.</p></section></div></section>
+<section @show="tab()==='cleanup'"><div class="panel safety"><b>Nothing is deleted during discovery.</b><span>Each preview expires, has a digest over the exact candidates, and requires a count-and-kind confirmation.</span></div><form class="form panel" @submit="preview($event)"><label>Resource type<select name="kind"><option>releases</option><option>artifacts</option><option>operations</option><option>logs</option><option>previews</option><option>snapshots</option><option>orphaned_resources</option></select></label><label>Older than days<input name="olderThanDays" type="number" min="1" value="30"></label><button class="btn" type="submit" :disabled="busy()">Generate dry-run preview</button></form><div class="cards"><template :for="plan in data().cleanups"><article class="panel"><span class="pill" :class="tone(plan.status)">{{ plan.status }}</span><h2>{{ plan.kind }}</h2><p>{{ plan.candidates.length }} candidates · {{ bytes(plan.estimatedBytes) }}</p><small>expires {{ plan.expiresAt }} · digest {{ plan.candidateDigest.slice(0,12) }}</small><details><summary>Inspect candidates</summary><template :for="candidate in plan.candidates"><p class="row"><span>{{ candidate.label }}</span><b>{{ bytes(candidate.bytes) }}</b></p></template></details><button class="btn danger sm" @show="plan.status==='preview'" @click="cleanup(plan)">Confirm exact candidate set</button></article></template></div></section>
+<section @show="tab()==='dr'"><div class="panel safety"><b>Drills never target production.</b><span>Only <code>isolated://</code> targets are accepted. RPO/RTO and health evidence are recorded, and cleanup runs even after failure.</span></div><form class="drill form panel" @submit="drill($event)"><label>Scenario<select name="scenario"><option>control_plane</option><option>database</option><option>volume</option><option>regional</option></select></label><label>Isolated target<input name="isolatedTarget" required value="isolated://drills/latest"></label><label>Recovery point<input name="recoveryPointId" placeholder="optional"></label><label>RPO minutes<input name="expectedRpoMinutes" type="number" min="1" value="60"></label><label>RTO minutes<input name="expectedRtoMinutes" type="number" min="1" value="30"></label><button class="btn" type="submit">Plan isolated drill</button></form><div class="cards"><template :for="item in data().drills"><article class="panel"><span class="pill" :class="tone(item.status)">{{ item.status }}</span><h2>{{ item.scenario }}</h2><p>{{ item.isolatedTarget }}</p><small>objective {{ item.expectedRpoMinutes }}m RPO / {{ item.expectedRtoMinutes }}m RTO</small><p @show="item.measuredRpoMinutes!=null">measured {{ item.measuredRpoMinutes.toFixed(1) }}m RPO / {{ item.measuredRtoMinutes?.toFixed(1) }}m RTO · cleanup {{ item.cleanupVerified?'verified':'pending' }}</p><button class="btn sm" @show="item.status==='planned'" @click="runDrill(item.id)">Run drill</button></article></template></div></section>
+</main><style>.actions,.target-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.tabs{display:flex;gap:.5rem;margin:1rem 0;border-bottom:1px solid var(--border)}.tabs button{background:none;border:0;color:var(--muted);padding:.75rem}.tabs .active{color:var(--text);border-bottom:2px solid var(--accent)}.safety{display:grid;grid-template-columns:auto 1fr;gap:1rem;margin-bottom:1rem}.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.item{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;border-bottom:1px solid var(--border);padding:.75rem 0}.item p,.target-row{grid-column:1/-1}.form{display:flex;gap:1rem;align-items:end;margin-bottom:1rem}.form label{display:grid;gap:.3rem}.drill{display:grid;grid-template-columns:repeat(5,1fr) auto}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.row{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:.4rem 0}.empty{color:var(--muted)}@media(max-width:900px){.grid,.cards{grid-template-columns:1fr}.drill{grid-template-columns:1fr 1fr}}@media(max-width:560px){.form,.drill{display:grid;grid-template-columns:1fr}.safety{grid-template-columns:1fr}}</style></body></html>

package/dist/ui-src/pages/operations/observability.stx

@@ -0,0 +1,76 @@
+<script client>
+import { usePolling } from '../../functions/usePolling.ts'
+
+const ranges = { '1h': 3600000, '6h': 21600000, '24h': 86400000, '7d': 604800000, '30d': 2592000000 }
+const range = state(new URLSearchParams(location.search).get('range') || '1h')
+const timezone = state(Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC')
+const compare = state(false), paused = state(false), textQuery = state(''), level = state(''), source = state('')
+const status = state({ sources: [], errors: [], retention: {} })
+const traffic = state([]), errors = state([]), latency = state([]), saturation = state([]), records = state([])
+const nextCursor = state(''), savedQueries = state([]), correlation = state(null), message = state(''), savedName = state(''), tailState = state('connecting')
+let tailSource = null
+
+function windowParams() {
+  const to = new Date(), duration = ranges[range()] || ranges['1h'], from = new Date(to.getTime() - duration)
+  const params = new URLSearchParams({ from: from.toISOString(), to: to.toISOString(), timezone: timezone() })
+  if (compare()) { params.set('compareFrom', new Date(from.getTime() - duration).toISOString()); params.set('compareTo', from.toISOString()) }
+  return params
+}
+async function json(url, options) { const response = await fetch(url, options), body = await response.json(); if (!response.ok || body.ok === false) throw new Error(body.error || 'Telemetry request failed.'); return body }
+function seriesUrl(names, aggregation, bucketMs) { const params = windowParams(); params.set('names', names.join(',')); params.set('aggregation', aggregation); params.set('bucketMs', String(bucketMs)); return '/api/telemetry/series?' + params }
+async function load() {
+  if (paused()) return
+  const duration = ranges[range()] || ranges['1h'], bucket = Math.max(60000, Math.ceil(duration / 120 / 60000) * 60000), params = windowParams()
+  params.set('kinds', 'log,request,event,trace'); params.set('limit', '300'); if (textQuery()) params.set('text', textQuery()); if (level()) params.set('levels', level()); if (source()) params.set('sources', source())
+  const [statusBody, trafficBody, errorBody, latencyBody, saturationBody, recordBody, savedBody] = await Promise.all([
+    json('/api/telemetry/status'), json(seriesUrl(['request.count','traffic.requests'], 'sum', bucket)), json(seriesUrl(['request.error','errors.count'], 'sum', bucket)),
+    json(seriesUrl(['request.duration','latency.p95'], 'p95', bucket)), json(seriesUrl(['queue.depth','saturation.restarts','saturation.throttles','saturation.concurrency','host.disk.used_percent','runtime.memory.used'], 'max', bucket)),
+    json('/api/telemetry/query?' + params), json('/api/telemetry/saved-queries'),
+  ])
+  status.set(statusBody); traffic.set(trafficBody.series || []); errors.set(errorBody.series || []); latency.set(latencyBody.series || []); saturation.set(saturationBody.series || []); records.set(recordBody.records || []); nextCursor.set(recordBody.nextCursor || ''); savedQueries.set(savedBody.queries || [])
+  if (!tailSource && !paused()) connectTail()
+}
+const { pollingState, pollingError, pollingLabel, lastUpdatedAt, refresh } = usePolling(load, 15000)
+function allPoints(signal) { return signal().flatMap(item => item.points || []).filter(point => !point.gap && point.value != null) }
+function total(signal) { return allPoints(signal).reduce((sum, point) => sum + Number(point.value || 0), 0) }
+function latest(signal) { const points = allPoints(signal); return points.length ? Number(points.at(-1).value) : null }
+function p95() { const values = latency().map(item => [...(item.points || [])].reverse().find(point => !point.gap && point.value != null)?.value).filter(value => value != null).map(Number); return values.length ? Math.max(...values) : null }
+function fmt(value, suffix = '') { return value == null ? 'Unavailable' : `${value >= 1000 ? (value / 1000).toFixed(1) + 'k' : Number(value).toFixed(value % 1 ? 1 : 0)}${suffix}` }
+const requestTotal = derived(() => total(traffic)), errorTotal = derived(() => total(errors)), errorRate = derived(() => requestTotal() ? errorTotal() / requestTotal() * 100 : null)
+function maxPoint(series) { return Math.max(1, ...(series.points || []).map(point => Number(point.value || 0))) }
+function barHeight(series, point) { return point.gap ? 2 : Math.max(3, Math.round(Number(point.value || 0) / maxPoint(series) * 100)) }
+function comparisonDelta(series) { const current = (series.points || []).reduce((sum, point) => sum + Number(point.value || 0), 0), previous = (series.comparison || []).reduce((sum, point) => sum + Number(point.value || 0), 0); return !series.comparison || !previous ? null : (current - previous) / previous * 100 }
+function saturationSignal() { const candidates = saturation().flatMap(item => { const point = [...(item.points || [])].reverse().find(entry => !entry.gap && entry.value != null); return point ? [{ value: Number(point.value), name: item.name, unit: item.unit || '' }] : [] }); return candidates.sort((a,b) => b.value - a.value)[0] || null }
+function freshnessTone(value) { return value === 'live' ? 'ok' : value === 'stale' ? 'warn' : 'bad' }
+function closeTail() { if (tailSource) tailSource.close(); tailSource = null }
+function connectTail() { closeTail(); if (paused()) { tailState.set('paused'); return } const params = windowParams(); params.set('kinds','log,request,event,trace'); params.set('limit','200'); if (textQuery()) params.set('text', textQuery()); if (level()) params.set('levels', level()); if (source()) params.set('sources', source()); tailState.set('connecting'); tailSource = new EventSource('/api/telemetry/tail?' + params); tailSource.addEventListener('record', event => { const record = JSON.parse(event.data); if (!records().some(item => item.id === record.id)) records.set([record, ...records()].slice(0, 500)); tailState.set('live') }); tailSource.addEventListener('heartbeat', () => tailState.set('live')); tailSource.onerror = () => tailState.set('reconnecting') }
+function togglePause() { paused.set(!paused()); if (paused()) closeTail(); else { connectTail(); refresh() } }
+function applyFilters() { const url = new URL(location.href); url.searchParams.set('range', range()); history.replaceState(null, '', url); connectTail(); refresh() }
+async function loadMore() { if (!nextCursor()) return; const params = windowParams(); params.set('kinds','log,request,event,trace'); params.set('limit','300'); params.set('cursor', nextCursor()); const body = await json('/api/telemetry/query?' + params); records.set([...records(), ...(body.records || [])]); nextCursor.set(body.nextCursor || '') }
+async function openCorrelation(record) { const key = record.traceId ? ['traceId', record.traceId] : record.requestId ? ['requestId', record.requestId] : record.releaseId ? ['releaseId', record.releaseId] : record.deploymentId ? ['deploymentId', record.deploymentId] : null; if (!key) { correlation.set({ key: 'No correlation ID', records: [record] }); return } const params = windowParams(); params.set(key[0], key[1]); params.set('limit','500'); const body = await json('/api/telemetry/query?' + params); correlation.set({ key: `${key[0]} ${key[1]}`, records: body.records || [] }) }
+async function saveQuery() { const name = savedName().trim(); if (!name) { message.set('Enter a name before saving this query.'); return } const params = windowParams(), query = { from: params.get('from'), to: params.get('to'), range: range(), kinds: ['log','request','event','trace'], text: textQuery(), levels: level() ? [level()] : undefined, sources: source() ? [source()] : undefined }; const body = await json('/api/telemetry/saved-queries', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({ name, query }) }); savedQueries.set([body.query, ...savedQueries().filter(item => item.id !== body.query.id)]); savedName.set(''); message.set(`Saved ${name}.`) }
+function useSaved(item) { const query = item.query || {}; textQuery.set(query.text || ''); level.set(query.levels?.[0] || ''); source.set(query.sources?.[0] || ''); if (query.range) range.set(query.range); applyFilters() }
+async function exportData(format) { const params = windowParams(), response = await fetch('/api/telemetry/export', { method: 'POST', headers: {'content-type':'application/json'}, body: JSON.stringify({ from: params.get('from'), to: params.get('to'), kinds: ['log','request','event','trace','metric'], text: textQuery(), levels: level() ? [level()] : undefined, sources: source() ? [source()] : undefined, format }) }); if (!response.ok) { const body = await response.json(); throw new Error(body.error || 'Export failed.') } const blob = await response.blob(), url = URL.createObjectURL(blob), link = document.createElement('a'); link.href = url; link.download = `ts-cloud-telemetry.${format}`; link.click(); URL.revokeObjectURL(url) }
+async function savePolicy(event) { event.preventDefault(); const values = Object.fromEntries(new FormData(event.currentTarget)); for (const key of ['rawDays','downsampleAfterDays','maxRecords','samplingRate','estimatedStorageUsdPerGbMonth']) values[key] = Number(values[key]); for (const key of ['collectLogs','collectTraces','collectRequestAnalytics']) values[key] = event.currentTarget.elements[key].checked; const body = await json('/api/telemetry/settings', { method:'PATCH', headers:{'content-type':'application/json'}, body:JSON.stringify(values) }); status.set({ ...status(), policy: body.policy, retention: body.policy }); message.set('Telemetry policy saved. New collection runs use these limits.'); refresh() }
+addEventListener('pagehide', closeTail)
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark"><head>@include('../partials/head', { title: 'ts-cloud - Observability' })</head><body>
+  @include('../partials/nav', { active: 'observability', env: 'production' })
+  <main class="telemetry-wrap wrap" id="main-content">
+    <div class="crumbs">Operations <span class="sep">/</span> Observability</div>
+    <header class="page"><div><h1>Observability</h1><p>Correlated metrics, logs, requests, traces, releases, and runtime context—with explicit source freshness and retention.</p></div><div class="header-actions"><span class="pill" :class="pollingState() === 'live' ? 'ok' : 'warn'">{{ paused() ? 'paused' : pollingLabel() }}</span><span class="pill" :class="tailState() === 'live' ? 'ok' : 'warn'">tail {{ tailState() }}</span><small>{{ lastUpdatedAt() ? lastUpdatedAt().toLocaleTimeString() : 'connecting' }}</small><button class="btn ghost sm" type="button" @click="togglePause()">{{ paused() ? 'Resume' : 'Pause' }}</button><button class="btn ghost sm" type="button" @click="refresh()">Refresh</button></div></header>
+    <p class="bad notice" role="status" @show="!!pollingError()">{{ pollingError() }}</p><p class="notice" role="status" @show="!!message()">{{ message() }}</p>
+    <section class="panel timebar"><label>Time range<select :value="range()" @change="range.set($event.target.value); applyFilters()"><option value="1h">Last hour</option><option value="6h">Last 6 hours</option><option value="24h">Last 24 hours</option><option value="7d">Last 7 days</option><option value="30d">Last 30 days</option></select></label><label>Timezone<input :value="timezone()" @change="timezone.set($event.target.value); applyFilters()"></label><label class="check"><input type="checkbox" :checked="compare()" @change="compare.set($event.target.checked); applyFilters()"> Compare previous period</label><span class="note">Auto-refresh 15s · provider refresh is cached separately · {{ status().policy?.samplingRate != null ? Math.round(status().policy.samplingRate * 100) + '% sampled' : 'sampling unavailable' }}</span></section>
+    <details class="panel policy"><summary>Collection, retention, and estimated cost</summary><div class="cost-summary"><span>~{{ fmt(status().estimatedMonthlyBytes, ' B/month') }}</span><span>{{ status().costEstimateConfigured ? '$' + status().estimatedMonthlyCostUsd + '/month at configured storage rate' : 'Cost unavailable until a storage $/GB-month rate is configured' }}</span></div><form @submit="savePolicy($event)"><label>Raw retention days<input name="rawDays" type="number" min="1" max="3650" :value="status().policy?.rawDays || 30"></label><label>Downsample after days<input name="downsampleAfterDays" type="number" min="1" max="3650" :value="status().policy?.downsampleAfterDays || 7"></label><label>Maximum local records<input name="maxRecords" type="number" min="1000" :value="status().policy?.maxRecords || 1000000"></label><label>Sample rate (0.01–1)<input name="samplingRate" type="number" min="0.01" max="1" step="0.01" :value="status().policy?.samplingRate || 1"></label><label>Storage $/GB-month<input name="estimatedStorageUsdPerGbMonth" type="number" min="0" step="0.001" :value="status().policy?.estimatedStorageUsdPerGbMonth || 0"></label><label class="check"><input name="collectLogs" type="checkbox" :checked="status().policy?.collectLogs !== false"> Logs</label><label class="check"><input name="collectTraces" type="checkbox" :checked="status().policy?.collectTraces !== false"> Traces</label><label class="check"><input name="collectRequestAnalytics" type="checkbox" :checked="status().policy?.collectRequestAnalytics !== false"> Request analytics</label><button class="btn sm" type="submit">Save policy</button></form><p class="note">Lower sampling and retention reduce local ingestion/storage, but can hide rare events. Cost is an estimate using your configured storage rate; provider allocation is never invented.</p></details>
+    <section class="source-grid" aria-label="Telemetry collection sources"><template :for="item in status().sources || []"><article class="panel source-card"><div><b>{{ item.source }}</b><span class="pill" :class="freshnessTone(item.freshness)">{{ item.freshness }}</span></div><small>last {{ item.lastObservedAt ? new Date(item.lastObservedAt).toLocaleString() : 'never' }} · lag {{ item.lagSeconds ?? '—' }}s</small><small>{{ item.retentionDays }}d retention · {{ Math.round(item.samplingRate * 100) }}% sampled · ~{{ fmt(item.estimatedDailyBytes, ' B/day') }}</small><p class="note" @show="!!item.message">{{ item.message }}</p></article></template><article class="panel source-card" @show="!(status().sources || []).length"><b>No collection sources</b><small>Refresh to collect live provider data. Empty data is never replaced with samples.</small></article></section>
+    <section class="golden"><article class="panel"><h3>Traffic</h3><strong>{{ fmt(requestTotal()) }}</strong><small>requests · summed buckets</small></article><article class="panel"><h3>Errors</h3><strong>{{ fmt(errorRate(), '%') }}</strong><small>{{ fmt(errorTotal()) }} errors</small></article><article class="panel"><h3>Latency</h3><strong>{{ fmt(p95(), ' ms') }}</strong><small>latest p95 · worst available source</small></article><article class="panel"><h3>Saturation</h3><strong>{{ fmt(saturationSignal()?.value, saturationSignal()?.unit ? ' ' + saturationSignal().unit : '') }}</strong><small>{{ saturationSignal()?.name || 'unsupported in this window' }}</small></article></section>
+    <section class="chart-grid"><template :for="series in [...traffic(), ...errors(), ...latency(), ...saturation()].slice(0, 8)"><article class="chart-card panel"><div class="chart-head"><b>{{ series.name }}</b><span>{{ series.source }} · {{ series.aggregation }} / {{ Math.round(series.bucketMs / 60000) }}m</span></div><div class="telemetry-bars" :aria-label="series.name + ' time series'"><template :for="point in series.points"><i :class="{ gap: point.gap }" :style="'height:' + barHeight(series, point) + '%'" :title="point.label + ': ' + (point.gap ? 'gap' : point.value)"></i></template></div><small>{{ timezone() }} · gaps shown as dim baseline bars <span @show="comparisonDelta(series) != null">· {{ comparisonDelta(series) > 0 ? '+' : '' }}{{ comparisonDelta(series)?.toFixed(1) }}% vs previous</span></small></article></template><article class="chart-card panel" @show="![...traffic(), ...errors(), ...latency(), ...saturation()].length"><b>No metric series</b><p class="note">The selected sources have not emitted these golden signals in this window, or the provider reports them as unsupported.</p></article></section>
+    <section class="section"><div class="section-title"><div><h2>Logs, requests, traces, and events</h2><p class="note">Bodies, authorization, cookies, query values, and configured PII are removed before persistence.</p></div><div class="header-actions"><input class="save-name" :value="savedName()" @input="savedName.set($event.target.value)" placeholder="Query name" aria-label="Saved query name"><button class="btn ghost sm" type="button" @click="saveQuery()">Save query</button><button class="btn ghost sm" type="button" @click="exportData('json')">JSON</button><button class="btn ghost sm" type="button" @click="exportData('csv')">CSV</button></div></div><div class="log-filters panel"><label>Search<input type="search" :value="textQuery()" @input="textQuery.set($event.target.value)" @change="applyFilters()" placeholder="Message, request, release…"></label><label>Level<select :value="level()" @change="level.set($event.target.value); applyFilters()"><option value="">All</option><option value="debug">debug</option><option value="info">info</option><option value="warning">warning</option><option value="error">error</option></select></label><label>Source<input :value="source()" @change="source.set($event.target.value); applyFilters()" placeholder="cloudwatch:http"></label></div><div class="saved" @show="savedQueries().length"><span>Saved:</span><template :for="item in savedQueries()"><button type="button" class="btn ghost sm" @click="useSaved(item)">{{ item.name }}</button></template></div><div class="panel telemetry-table-wrap"><table class="telemetry-table"><thead><tr><th scope="col">Time</th><th scope="col">Kind</th><th scope="col">Source</th><th scope="col">Signal</th><th scope="col">Message / value</th><th scope="col">Correlation</th></tr></thead><tbody><template :for="record in records()"><tr tabindex="0" @click="openCorrelation(record)" @keydown.enter="openCorrelation(record)"><td>{{ new Date(record.timestamp).toLocaleString([], {timeZone: timezone()}) }}</td><td><span class="tag">{{ record.kind }}</span></td><td>{{ record.source }}</td><td><span class="pill" :class="record.level === 'error' ? 'bad' : record.level === 'warning' ? 'warn' : ''">{{ record.level || record.name }}</span></td><td class="mono">{{ record.message || (record.value != null ? record.value + ' ' + (record.unit || '') : record.durationMs != null ? record.durationMs + 'ms' : record.name) }}</td><td class="mono">{{ record.requestId || record.traceId || record.releaseId || record.deploymentId || '—' }}</td></tr></template></tbody></table><div class="empty" @show="!records().length"><strong>No telemetry in this window</strong><span>Empty, unavailable, and filtered results remain explicit; no demo rows are shown.</span></div><button class="btn ghost load-more sm" type="button" @show="!!nextCursor()" @click="loadMore()">Load older records</button></div></section>
+    <aside class="correlation panel" @show="!!correlation()"><button class="detail-close" type="button" aria-label="Close correlation detail" @click="correlation.set(null)">×</button><h2>Correlation</h2><p class="mono">{{ correlation()?.key }}</p><div class="timeline"><template :for="item in correlation()?.records || []"><article><span>{{ new Date(item.timestamp).toLocaleString() }}</span><b>{{ item.name }}</b><small>{{ item.source }} · {{ item.kind }} · {{ item.message || item.value || '' }}</small><nav><a @show="!!item.releaseId" :href="'/operations/releases?release=' + encodeURIComponent(item.releaseId)">Release</a><a @show="!!item.workloadId" :href="'/operations/workloads?search=' + encodeURIComponent(item.workloadId)">Workload</a></nav></article></template></div></aside>
+  </main>
+  <style>
+    .telemetry-wrap{max-width:1540px}.timebar,.log-filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;padding:14px}.timebar label,.log-filters label,.policy label{display:grid;gap:5px;color:var(--txt3);font-size:11px}.timebar select,.timebar input,.log-filters select,.log-filters input,.policy input,.save-name{min-width:160px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:8px}.timebar .check,.policy .check{display:flex;align-items:center;gap:7px;padding:8px}.timebar .check input,.policy .check input{min-width:0}.policy{margin-top:10px}.policy summary{cursor:pointer;font-weight:600}.policy form,.cost-summary{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-top:14px}.cost-summary{justify-content:space-between;color:var(--txt2)}.source-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:12px 0}.source-card{display:grid;gap:5px;padding:13px}.source-card>div{display:flex;justify-content:space-between;gap:8px}.source-card small{color:var(--txt3)}.golden{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.golden article{display:grid;gap:5px}.golden strong{font-size:28px}.golden small{color:var(--txt3)}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chart-card{min-width:0}.chart-head{display:flex;justify-content:space-between;gap:10px}.chart-head span,.chart-card small{color:var(--txt3);font-size:10px}.telemetry-bars{display:flex;align-items:end;gap:2px;height:110px;margin:14px 0 7px;border-bottom:1px solid var(--line)}.telemetry-bars i{flex:1;min-width:2px;background:var(--accent);border-radius:2px 2px 0 0}.telemetry-bars i.gap{opacity:.18;background:var(--txt3)}.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px}.saved{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:8px 0}.telemetry-table-wrap{overflow:auto;padding:0}.telemetry-table{min-width:1050px}.telemetry-table tbody tr{cursor:pointer}.telemetry-table td{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.load-more{margin:12px}.correlation{position:fixed;z-index:20;right:20px;top:20px;bottom:20px;width:min(480px,calc(100vw - 40px));overflow:auto;padding:20px;box-shadow:0 20px 70px #000b}.detail-close{float:right;border:0;background:transparent;color:var(--txt3);font-size:24px}.timeline{display:grid;gap:14px;margin-top:20px;border-left:1px solid var(--line);padding-left:16px}.timeline article{display:grid;gap:4px}.timeline span,.timeline small{color:var(--txt3);font-size:11px}.timeline nav{display:flex;gap:10px}
+    @media(max-width:900px){.golden{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}}@media(max-width:600px){.golden{grid-template-columns:1fr}.timebar>*{width:100%}.section-title{align-items:start;flex-direction:column}.source-grid{grid-template-columns:1fr}.telemetry-table{min-width:0}.telemetry-table thead{display:none}.telemetry-table tbody,.telemetry-table tr,.telemetry-table td{display:block}.telemetry-table tr{padding:12px;border-bottom:1px solid var(--line)}.telemetry-table td{padding:4px 0;white-space:normal}.telemetry-table td:before{display:inline-block;width:90px;color:var(--txt3);font-size:10px}.telemetry-table td:nth-child(1):before{content:'Time'}.telemetry-table td:nth-child(2):before{content:'Kind'}.telemetry-table td:nth-child(3):before{content:'Source'}.telemetry-table td:nth-child(4):before{content:'Signal'}.telemetry-table td:nth-child(5):before{content:'Value'}.telemetry-table td:nth-child(6):before{content:'Correlation'}}
+  </style>
+</body></html>

package/dist/ui-src/pages/operations/previews.stx

@@ -0,0 +1,62 @@
+<script server>
+let __p = null
+try { __p = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __p = null }
+const capabilities = __p?.viewer?.capabilities ?? []
+const canDeploy = capabilities.includes('deployments:create')
+const canDestroy = capabilities.includes('deployments:cancel')
+const canConfigure = capabilities.includes('config:write')
+const canCleanup = capabilities.includes('automation:manage')
+</script>
+<script client>
+const data = state({ previews: [], definitions: [], resources: [], environments: [] })
+const message = state('')
+const loading = state(true)
+const destroyId = state('')
+const destroyConfirm = state('')
+const cleanup = state({ dryRun: true, confirm: '', keepCount: 10 })
+async function request(path, body) { const response = await fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) }); const result = await response.json(); if (!response.ok || result.ok === false) throw new Error(result.error || 'Request failed.'); return result }
+async function refresh() { try { const response = await fetch('/api/previews'); const result = await response.json(); if (!response.ok) throw new Error(result.error || 'Previews could not be loaded.'); data.set(result) } catch (error) { message.set(error.message) } finally { loading.set(false) } }
+function tone(status) { return ['active','destroyed'].includes(status) ? 'ok' : ['failed','cleanup_failed'].includes(status) ? 'bad' : 'warn' }
+function age(value) { const hours = Math.max(0, Math.round((Date.now() - new Date(value).getTime()) / 3600000)); return hours < 24 ? hours + 'h' : Math.round(hours / 24) + 'd' }
+async function configure(event) { event.preventDefault(); const form = event.currentTarget; try { await request('/api/previews/definitions', { resourceId: form.resourceId.value, baseEnvironmentId: form.baseEnvironmentId.value, domainPattern: form.domainPattern.value, ttlHours: Number(form.ttlHours.value), keepCount: Number(form.keepCount.value), databaseStrategy: form.databaseStrategy.value, publicAccess: form.publicAccess.checked, authenticationRequired: true, allowForks: form.allowForks.checked, inheritedSecrets: form.inheritedSecrets.value.split(/[,\n]/).map(v => v.trim()).filter(Boolean), maxMonthlyCost: Number(form.maxMonthlyCost.value), maxCpu: Number(form.maxCpu.value), maxMemoryMb: Number(form.maxMemoryMb.value) }); form.reset(); message.set('Preview policy configured.'); await refresh() } catch (error) { message.set(error.message) } }
+async function deploy(event) { event.preventDefault(); const form = event.currentTarget; try { await request('/api/previews/deploy', { definitionId: form.definitionId.value, branch: form.branch.value, pullRequestNumber: Number(form.pullRequestNumber.value) || undefined, commitSha: form.commitSha.value }); message.set('Immutable preview deployment queued.'); await refresh() } catch (error) { message.set(error.message) } }
+async function extend(id) { try { await request('/api/previews/extend', { id, hours: 24 }); message.set('Preview extended by 24 hours.'); await refresh() } catch (error) { message.set(error.message) } }
+async function rebuild(id) { try { await request('/api/previews/rebuild', { id }); message.set('Exact recorded commit queued for rebuild.'); await refresh() } catch (error) { message.set(error.message) } }
+async function destroy() { const item = data().previews.find(value => value.id === destroyId()); if (!item) return; try { await request('/api/previews/destroy', { id: item.id, confirm: destroyConfirm() }); destroyId.set(''); destroyConfirm.set(''); message.set('Tagged teardown queued.'); await refresh() } catch (error) { message.set(error.message) } }
+async function runCleanup() { try { const result = await request('/api/previews/cleanup', cleanup()); message.set(cleanup().dryRun ? result.candidates.length + ' cleanup candidate(s).' : result.operations.length + ' teardown job(s) queued.'); await refresh() } catch (error) { message.set(error.message) } }
+onMount(() => { refresh(); const timer = setInterval(refresh, 5000); return () => clearInterval(timer) })
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud - Preview environments' })</head>
+<body>
+  @include('../partials/nav', { active: 'previews', env: 'production' })
+  <div class="preview-wrap wrap" id="main-content">
+    <div class="crumbs">Operations <span class="sep">/</span> Preview environments</div>
+    <header class="page preview-hero"><div><h1>Preview environments</h1><p>Isolated, exact-commit deployments with stable URLs, bounded resources, and automatic teardown.</p></div><button class="btn ghost" type="button" @click="refresh()">Refresh</button></header>
+    <p class="notice" @show="!!message()">{{ message() }}</p>
+    <section class="section stats"><div class="panel"><small>Total</small><strong>{{ data().previews.length }}</strong></div><div class="panel"><small>Active</small><strong>{{ data().previews.filter(v=>v.status==='active').length }}</strong></div><div class="panel"><small>Expiring</small><strong>{{ data().previews.filter(v=>!['destroyed','destroying'].includes(v.status)&&new Date(v.expiresAt)-Date.now()<86400000).length }}</strong></div><div class="panel"><small>Cleanup errors</small><strong>{{ data().previews.filter(v=>v.status==='cleanup_failed').length }}</strong></div></section>
+    <section class="panel preview-list section">
+      <div class="section-heading"><div><h2>Environments</h2><p class="note">A URL always corresponds to the immutable commit shown here.</p></div></div>
+      <div class="empty" @show="!loading() && !data().previews.length"><strong>No previews yet</strong><span>Configure an application policy or enable PR previews on a Git binding.</span></div>
+      <div class="preview-grid">
+        <article class="preview-card" @each="item in data().previews" :key="item.id">
+          <div class="card-head"><div><h3>{{ item.name }}</h3><p class="note">{{ item.pullRequestNumber ? 'PR #' + item.pullRequestNumber : item.branch }} · {{ item.commitSha.slice(0,12) }}</p></div><span class="pill" :class="tone(item.status)">{{ item.status }}</span></div>
+          <a class="preview-url" :href="item.url" target="_blank" rel="noopener">{{ item.url || 'URL pending' }}</a>
+          <dl><div><dt>Age / expiry</dt><dd>{{ age(item.createdAt) }} · {{ new Date(item.expiresAt).toLocaleString() }}</dd></div><div><dt>Latest deployment</dt><dd class="mono">{{ item.latestOperationId || '—' }}</dd></div><div><dt>Estimated cost</dt><dd>{{ item.costEstimate == null ? 'Not available' : '$' + item.costEstimate.toFixed(2) + '/mo' }}</dd></div><div @show="!!item.teardownError"><dt>Teardown error</dt><dd class="bad-text">{{ item.teardownError }}</dd></div></dl>
+          <div class="actions">@if (canDeploy)<button class="btn ghost sm" @click="extend(item.id)">Extend 24h</button><button class="btn ghost sm" @click="rebuild(item.id)">Rebuild SHA</button>@endif @if (canDestroy)<button class="btn danger sm" @click="destroyId.set(item.id);destroyConfirm.set('')">Delete…</button>@endif <a class="btn ghost sm" :href="'/operations/queue?state=all'">Operation</a></div>
+          <div class="confirm" @show="destroyId()===item.id"><p>Type <b>{{ item.name }}</b>. Only resources with matching preview tags are eligible.</p><input :value="destroyConfirm()" @input="destroyConfirm.set($event.target.value)"><button class="btn danger sm" :disabled="destroyConfirm()!==item.name" @click="destroy()">Queue teardown</button></div>
+        </article>
+      </div>
+    </section>
+    <div class="forms section">
+      @if (canDeploy)<form class="panel" @submit="deploy($event)"><h2>Deploy exact commit</h2><label>Policy<select name="definitionId" required><option value="">Select application…</option><option @each="item in data().definitions" :value="item.id">{{ data().resources.find(v=>v.id===item.resourceId)?.name || item.resourceId }}</option></select></label><label>Branch<input name="branch" required placeholder="feature/search"></label><label>Commit SHA<input name="commitSha" required minlength="40" maxlength="64" class="mono"></label><label>Pull request (optional)<input name="pullRequestNumber" type="number" min="1"></label><button class="btn" type="submit">Queue preview</button></form>@endif
+      @if (canConfigure)<form class="panel" @submit="configure($event)"><h2>Configure application</h2><label>Application<select name="resourceId" required><option @each="item in data().resources" :value="item.id">{{ item.name }}</option></select></label><label>Base environment<select name="baseEnvironmentId" required><option @each="item in data().environments" :value="item.id">{{ item.name }}</option></select></label><label>Domain pattern<input name="domainPattern" required value="https://{name}.preview.example.com"></label><div class="pair"><label>TTL hours<input name="ttlHours" type="number" value="24" min="1" max="720"></label><label>Keep newest<input name="keepCount" type="number" value="10" min="1" max="100"></label></div><div class="pair"><label>Max CPU<input name="maxCpu" type="number" value="1" step="0.1"></label><label>Max memory MB<input name="maxMemoryMb" type="number" value="1024"></label></div><label>Monthly budget cap<input name="maxMonthlyCost" type="number" value="25" step="0.01"></label><label>Database<select name="databaseStrategy"><option value="disabled">Disabled</option><option value="isolated">Isolated</option><option value="snapshot">Snapshot clone</option><option value="shared_read_only">Shared read-only</option></select></label><label>Explicit secret names<textarea name="inheritedSecrets" placeholder="PREVIEW_API_KEY"></textarea></label><label class="check"><input name="publicAccess" type="checkbox"> Public (authentication remains required)</label><label class="check"><input name="allowForks" type="checkbox"> Allow untrusted forks (secrets are still stripped)</label><button class="btn" type="submit">Save policy</button></form>@endif
+      @if (canCleanup)<section class="panel"><h2>Cleanup</h2><p class="note">Dry-run first. Teardown never touches untagged or shared resources.</p><label class="check"><input type="checkbox" :checked="cleanup().dryRun" @change="cleanup.set({...cleanup(),dryRun:$event.target.checked})"> Dry run</label><label>Keep newest<input type="number" :value="cleanup().keepCount" @input="cleanup.set({...cleanup(),keepCount:Number($event.target.value)})"></label><label @show="!cleanup().dryRun">Type cleanup previews<input :value="cleanup().confirm" @input="cleanup.set({...cleanup(),confirm:$event.target.value})"></label><button class="btn" :disabled="!cleanup().dryRun&&cleanup().confirm!=='cleanup previews'" @click="runCleanup()">{{ cleanup().dryRun ? 'Preview cleanup' : 'Queue cleanup' }}</button></section>@endif
+    </div>
+  </div>
+  <style>
+    .preview-wrap{max-width:1450px}.preview-hero,.card-head,.actions{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stats strong{display:block;font-size:1.7rem;margin-top:8px}.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.preview-card{border:1px solid var(--line);border-radius:11px;padding:16px;background:var(--bg2);display:grid;gap:13px}.preview-card h3{margin:0}.preview-url{overflow:hidden;text-overflow:ellipsis}.preview-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.preview-card dt{color:var(--txt3);font-size:11px}.preview-card dd{margin:3px 0 0;font-size:12px;overflow-wrap:anywhere}.actions{justify-content:flex-start;flex-wrap:wrap}.confirm{border:1px solid rgba(235,100,100,.35);padding:12px;border-radius:8px;display:grid;gap:8px}.confirm p{margin:0;font-size:12px}.forms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}.forms .panel{display:grid;gap:10px}.forms h2{margin:0 0 5px}.forms label{display:grid;gap:5px;color:var(--txt3);font-size:12px}.forms :is(input,select,textarea){width:100%}.forms .check{display:flex;align-items:center}.forms .check input{width:auto}.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bad-text{color:#ff9b9b}.notice{padding:10px}.empty{padding:25px}.empty span{display:block;color:var(--txt3);margin-top:5px}
+    @media(max-width:1000px){.forms{grid-template-columns:1fr 1fr}.preview-grid{grid-template-columns:1fr}}@media(max-width:650px){.stats,.forms{grid-template-columns:1fr 1fr}.preview-card dl{grid-template-columns:1fr}.preview-hero{display:grid}}@media(max-width:440px){.stats,.forms{grid-template-columns:1fr}.pair{grid-template-columns:1fr}}
+  </style>
+</body></html>