@stacksjs/ts-cloud 0.7.55 → 0.7.57

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

@@ -0,0 +1,257 @@
+<script client>
+import { usePolling } from '../../functions/usePolling.ts'
+
+const services = state([])
+const operations = state([])
+const search = state('')
+const engineFilter = state('all')
+const providerFilter = state('all')
+const statusFilter = state('all')
+const selected = state(null)
+const plan = state(null)
+const guidance = state([])
+const oneTime = state(null)
+const notice = state('')
+const actionError = state('')
+const busy = state(false)
+const createOpen = state(false)
+const operationAction = state('observe')
+
+const actionLabels = {
+  observe: 'Refresh status', backup: 'Create backup', restore: 'Restore backup',
+  restart: 'Restart', resize: 'Resize', version: 'Upgrade version',
+  rotate: 'Rotate credential', expose: 'Change exposure', delete: 'Retire service',
+  logs: 'Read logs', slow_queries: 'Read slow queries', users: 'Manage users',
+  databases: 'Manage databases',
+}
+
+async function api(url, options) {
+  const response = await fetch(url, options)
+  const body = await response.json()
+  if (!response.ok || body.ok === false) {
+    const error = new Error(body.error || 'Request failed.')
+    error.stepUpRequired = body.stepUpRequired
+    throw error
+  }
+  return body
+}
+async function load() {
+  const [data, queue] = await Promise.all([
+    api('/api/data-services'),
+    api('/api/queue?limit=250').catch(() => ({ operations: [] })),
+  ])
+  services.set(data.services || [])
+  operations.set((queue.operations || []).filter(item => item.kind === 'data_service.action'))
+  if (selected()) selected.set(data.services?.find(item => item.id === selected().id) || null)
+}
+const { pollingState, pollingError, lastUpdatedAt, refresh } = usePolling(load, 15000)
+function tone(value) { return ['available', 'succeeded', 'in_sync'].includes(value) ? 'ok' : ['failed', 'degraded', 'timed_out'].includes(value) ? 'bad' : 'warn' }
+function when(value) { return value ? new Date(value).toLocaleString() : '—' }
+function filtered() {
+  const query = search().trim().toLowerCase()
+  return services().filter(item =>
+    (!query || `${item.name} ${item.engine} ${item.provider} ${item.placement}`.toLowerCase().includes(query)) &&
+    (engineFilter() === 'all' || item.engine === engineFilter()) &&
+    (providerFilter() === 'all' || item.provider === providerFilter()) &&
+    (statusFilter() === 'all' || item.status === statusFilter()))
+}
+function formBody(form) { return Object.fromEntries(new FormData(form)) }
+async function createService(event) {
+  event.preventDefault()
+  busy.set(true); actionError.set(''); oneTime.set(null)
+  try {
+    const value = formBody(event.currentTarget)
+    const desiredState = {}
+    if (value.subnetGroup) desiredState.subnetGroup = value.subnetGroup
+    if (value.securityGroupIds) desiredState.securityGroupIds = String(value.securityGroupIds).split(',').map(item => item.trim()).filter(Boolean)
+    if (value.database) desiredState.database = value.database
+    if (value.minCapacity) desiredState.minCapacity = Number(value.minCapacity)
+    if (value.maxCapacity) desiredState.maxCapacity = Number(value.maxCapacity)
+    const result = await api('/api/data-services', {
+      method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({
+        name: value.name, engine: value.engine, provider: value.provider,
+        placement: value.placement || value.name, plan: value.plan,
+        engineVersion: value.engineVersion || undefined,
+        storageGb: value.storageGb ? Number(value.storageGb) : undefined,
+        highAvailability: value.highAvailability === 'on',
+        publicExposure: value.publicExposure === 'on',
+        allowedCidrs: value.allowedCidrs ? String(value.allowedCidrs).split(',').map(item => item.trim()).filter(Boolean) : [],
+        adopt: value.adopt === 'on', username: value.username || undefined, desiredState,
+      }),
+    })
+    oneTime.set(result.oneTimeCredential || null)
+    notice.set(result.readOnly ? `${result.service.name} adopted in read-only mode.` : `${result.service.name} queued for provisioning.`)
+    event.currentTarget.reset(); createOpen.set(false); await refresh(); selected.set(result.service)
+  }
+  catch (error) { actionError.set(error.message) }
+  finally { busy.set(false) }
+}
+async function inspect(item) {
+  selected.set(item); plan.set(null); guidance.set([])
+  try { guidance.set((await api(`/api/data-services/connections?id=${encodeURIComponent(item.id)}`)).guidance || []) }
+  catch (error) { actionError.set(error.message) }
+}
+async function previewAction(item, action, changes = {}) {
+  try {
+    const result = await api('/api/data-services/preview', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: item.id, action, changes }) })
+    plan.set(result.plan); selected.set(item); return result.plan
+  }
+  catch (error) { actionError.set(error.message) }
+}
+async function runAction(item, action, requested = {}) {
+  const changes = { ...requested }
+  const proposed = await previewAction(item, action, changes)
+  if (!proposed || !proposed.capability.supported) return
+  if (action === 'delete' && !changes.retention) {
+    const retention = window.prompt('Deletion retention: type final_backup or retain', 'final_backup') || ''
+    if (!['final_backup', 'retain'].includes(retention)) return
+    changes.retention = retention
+  }
+  if (proposed.preflight.typedConfirmation) {
+    changes.confirm = window.prompt(`Type ${proposed.preflight.typedConfirmation} to confirm ${action}.`) || ''
+    if (changes.confirm !== proposed.preflight.typedConfirmation) return
+  }
+  busy.set(true)
+  try {
+    const result = await api('/api/data-services/action', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: item.id, action, execute: true, changes }) })
+    notice.set(`${action} queued as ${result.operationId}.`); actionError.set(''); await refresh()
+  }
+  catch (error) { actionError.set(error.stepUpRequired ? `${error.message} Use Sign-in & security to verify again.` : error.message) }
+  finally { busy.set(false) }
+}
+async function runConfiguredAction(event) {
+  event.preventDefault()
+  const item = selected()
+  if (!item) return
+  const action = operationAction()
+  const value = formBody(event.currentTarget)
+  const changes = {}
+  for (const key of ['backupId', 'targetId', 'plan', 'engineVersion', 'storageGb', 'memoryMb', 'cpus', 'minCapacity', 'maxCapacity', 'lines', 'operation', 'database', 'retention']) {
+    if (value[key] !== undefined && value[key] !== '') changes[key] = ['storageGb', 'memoryMb', 'cpus', 'minCapacity', 'maxCapacity', 'lines'].includes(key) ? Number(value[key]) : value[key]
+  }
+  if (action === 'version') {
+    changes.compatibilityReviewed = value.compatibilityReviewed === 'on'
+    if (value.versionBackupId) changes.backupId = value.versionBackupId
+  }
+  if (action === 'expose') {
+    changes.publicExposure = value.publicExposure === 'on'
+    changes.allowedCidrs = value.allowedCidrs ? String(value.allowedCidrs).split(',').map(item => item.trim()).filter(Boolean) : []
+  }
+  if (action === 'databases' && changes.operation === 'delete') {
+    changes.confirm = window.prompt(`Type ${changes.database} to delete this logical database.`) || ''
+    if (changes.confirm !== changes.database) return
+  }
+  await runAction(item, action, changes)
+}
+async function chooseAction(action) {
+  operationAction.set(action)
+  if (selected()) await previewAction(selected(), action)
+}
+async function reveal(item) {
+  try {
+    const result = await api('/api/data-services/reveal', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: item.id }) })
+    oneTime.set(result.credential); notice.set('Credential revealed. Copy it now; it is never shown in lists or logs.')
+  }
+  catch (error) { actionError.set(error.stepUpRequired ? `${error.message} Verify your session, then retry.` : error.message) }
+}
+function serviceOperations(item) { return operations().filter(operation => operation.input?.serviceId === item.id) }
+function observationEntries(item) { return Object.entries(item?.observedState || {}).filter(([key]) => key !== 'error') }
+async function copy(value, label) {
+  await navigator.clipboard.writeText(String(value || ''))
+  notice.set(`${label} copied.`)
+}
+</script>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>@include('../partials/head', { title: 'ts-cloud · Data services' })</head>
+<body>
+@include('../partials/nav', { active: 'data-services', env: 'production' })
+<main class="data-wrap wrap" id="main-content">
+  <div class="crumbs">Infrastructure <span class="sep">/</span> Data services</div>
+  <header class="page">
+    <div><h1>Data services</h1><p>Provision, adopt, connect, observe, back up, rotate, upgrade, resize, and retire databases and caches from one lifecycle.</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 sm" @click="createOpen.set(!createOpen())">{{ createOpen()?'Close':'New service' }}</button></div>
+  </header>
+  <p class="notice" role="status" @show="!!notice()">{{ notice() }}</p>
+  <p class="bad notice" role="alert" @show="!!actionError() || !!pollingError()">{{ actionError() || pollingError() }}</p>
+
+  <section class="summary">
+    <article class="panel"><b>Services</b><strong>{{ services().length }}</strong><small>current environment</small></article>
+    <article class="panel"><b>Available</b><strong>{{ services().filter(item=>item.status==='available').length }}</strong><small>healthy and connectable</small></article>
+    <article class="panel"><b>Needs attention</b><strong>{{ services().filter(item=>['failed','degraded'].includes(item.status)).length }}</strong><small>failed or degraded</small></article>
+    <article class="panel"><b>Dependency redeploys</b><strong>{{ services().reduce((sum,item)=>sum+(item.dependencies||[]).filter(dep=>dep.requiresRedeploy).length,0) }}</strong><small>after credential rotation</small></article>
+  </section>
+
+  <form class="create-grid panel" @show="createOpen()" @submit="createService($event)">
+    <div class="wide"><h2>Create or adopt a service</h2><p class="note">Private networking, encryption, deletion protection, and seven-day backup retention are the managed defaults. Previewing never mutates production.</p></div>
+    <label>Name<input name="name" required pattern="[a-z0-9][a-z0-9-]{1,62}" placeholder="orders-db"></label>
+    <label>Engine<select name="engine" required><option value="postgres">PostgreSQL</option><option value="mysql">MySQL</option><option value="mariadb">MariaDB</option><option value="redis">Redis</option><option value="mongodb">MongoDB</option><option value="libsql">libSQL</option></select></label>
+    <label>Provider<select name="provider" required><option value="aws_rds">AWS RDS</option><option value="aws_aurora">AWS Aurora</option><option value="aws_elasticache">AWS ElastiCache</option><option value="server">Server</option><option value="container">Container</option><option value="external">External / adopted</option></select></label>
+    <label>Provider ID or placement<input name="placement" placeholder="orders-production"></label>
+    <label>Plan<input name="plan" value="db.t4g.micro" placeholder="db.t4g.micro"></label>
+    <label>Engine version<input name="engineVersion" placeholder="16.3"></label>
+    <label>Storage GB<input name="storageGb" type="number" min="1" value="20"></label>
+    <label>Username<input name="username" value="app" autocomplete="off"></label>
+    <label>Database<input name="database" placeholder="app"></label>
+    <label>Subnet group<input name="subnetGroup" placeholder="private-data"></label>
+    <label class="wide">Security group IDs<input name="securityGroupIds" placeholder="sg-database"></label>
+    <label class="wide">Allowed public CIDRs<input name="allowedCidrs" placeholder="203.0.113.8/32"><span>Required only for public access. Broad 0.0.0.0/0 is always refused.</span></label>
+    <label class="check"><input name="highAvailability" type="checkbox"> High availability</label>
+    <label class="check"><input name="publicExposure" type="checkbox"> Public endpoint</label>
+    <label class="check wide"><input name="adopt" type="checkbox"> Adopt existing provider ID read-only (no credential or mutation)</label>
+    <button class="btn wide" type="submit" :disabled="busy()">{{ busy()?'Creating…':'Review and create' }}</button>
+  </form>
+
+  <section class="filters panel"><input type="search" aria-label="Search data services" placeholder="Search name, engine, provider, placement" @input="search.set($event.currentTarget.value)"><select aria-label="Filter engine" @change="engineFilter.set($event.currentTarget.value)"><option value="all">All engines</option><option value="postgres">PostgreSQL</option><option value="mysql">MySQL</option><option value="mariadb">MariaDB</option><option value="redis">Redis</option><option value="mongodb">MongoDB</option><option value="libsql">libSQL</option></select><select aria-label="Filter provider" @change="providerFilter.set($event.currentTarget.value)"><option value="all">All providers</option><option value="aws_rds">RDS</option><option value="aws_aurora">Aurora</option><option value="aws_elasticache">ElastiCache</option><option value="server">Server</option><option value="container">Container</option><option value="external">External</option></select><select aria-label="Filter status" @change="statusFilter.set($event.currentTarget.value)"><option value="all">All states</option><option value="available">Available</option><option value="planning">Planning</option><option value="failed">Failed</option><option value="adopted">Adopted</option><option value="retained">Retained</option></select></section>
+
+  <div class="workspace" :class="{hasDetail:!!selected()}">
+    <section class="data-cards">
+      <template :for="item in filtered()"><article class="panel service-card" :class="{selected:selected()?.id===item.id}">
+        <div class="service-head"><div><span class="pill" :class="tone(item.status)">{{ item.status }}</span><span class="pill">{{ item.engine }}</span><span class="pill">{{ item.provider }}</span><h2>{{ item.name }}</h2></div><button class="btn ghost sm" @click="inspect(item)">Details</button></div>
+        <div class="service-grid"><div><small>Placement</small><b class="mono">{{ item.placement }}</b><span>{{ item.plan }} · {{ item.engineVersion || 'provider default' }}</span></div><div><small>Endpoint</small><b class="mono">{{ item.observedState?.endpoint || 'pending' }}</b><span>{{ item.publicExposure?'public allowlist':'private network' }}</span></div><div><small>Credential</small><b>{{ item.credential?.configured ? item.credential.username : 'not managed' }}</b><span>{{ item.credential?.rotatedAt ? 'rotated '+when(item.credential.rotatedAt) : item.credential?.configured ? 'version '+item.credential.version : 'reference only' }}</span></div><div><small>Protection</small><b>{{ item.highAvailability?'high availability':'single placement' }}</b><span>{{ item.origin }} · {{ item.managementEnabled?'managed':'read-only' }}</span></div></div>
+        <div class="actions"><button class="btn ghost sm" @click="runAction(item,'observe')">Refresh status</button><button class="btn ghost sm" @click="runAction(item,'backup')" :disabled="!item.capabilities.actions.backup.supported">Back up</button><button class="btn ghost sm" @click="runAction(item,'restart')">Restart</button><button class="btn ghost sm" @click="runAction(item,'rotate')" :disabled="!item.capabilities.actions.rotate.supported">Rotate credential</button><button class="btn danger sm" @click="runAction(item,'delete')">Retire</button></div>
+        <p class="bad note" @show="!!item.observedState?.error">{{ item.observedState.error }}</p>
+      </article></template>
+      <div class="empty panel" @show="!filtered().length"><strong>No matching data services</strong><span>Create a managed service or adopt an existing provider resource read-only.</span></div>
+    </section>
+
+    <aside class="detail panel" @show="!!selected()">
+      <div class="detail-head"><div><small>Selected service</small><h2>{{ selected()?.name }}</h2></div><button class="btn ghost sm" aria-label="Close details" @click="selected.set(null)">Close</button></div>
+      <div class="capability"><h3>Lifecycle operations</h3><p class="note">Every operation is capability-checked and previewed before a durable production job is created.</p><div class="operation-picker"><template :for="entry in Object.entries(selected()?.capabilities?.actions || {}).filter(([action])=>action!=='create'&&action!=='connect')"><button class="btn ghost sm" :class="{active:operationAction()===entry[0]}" :disabled="!entry[1].supported" :title="entry[1].explanation" @click="chooseAction(entry[0])">{{ actionLabels[entry[0]] || entry[0] }}</button></template></div>
+        <form class="operation-form" @submit="runConfiguredAction($event)">
+          <label @show="operationAction()==='restore'">Backup ID<input name="backupId" placeholder="orders-snapshot"></label>
+          <label @show="operationAction()==='restore'">New target ID<input name="targetId" placeholder="orders-restored"></label>
+          <label @show="operationAction()==='resize'">Provider plan<input name="plan" :placeholder="selected()?.plan"></label>
+          <label @show="operationAction()==='resize'">Storage GB<input name="storageGb" type="number" min="1"></label>
+          <label @show="operationAction()==='resize'">Runtime memory MB<input name="memoryMb" type="number" min="16"></label>
+          <label @show="operationAction()==='resize'">Runtime CPUs<input name="cpus" type="number" min="0.1" step="0.1"></label>
+          <label @show="operationAction()==='version'">Target engine version<input name="engineVersion" placeholder="17.0"></label>
+          <label class="check" @show="operationAction()==='version'"><input name="compatibilityReviewed" type="checkbox"> Compatibility reviewed</label>
+          <label @show="operationAction()==='version'">Pre-upgrade backup ID<input name="versionBackupId" placeholder="pre-upgrade-snapshot"></label>
+          <label @show="['logs','slow_queries'].includes(operationAction())">Maximum lines<input name="lines" type="number" min="1" max="2000" value="500"></label>
+          <label @show="['users','databases'].includes(operationAction())">Operation<select name="operation"><option value="list">List</option><option value="create" @show="operationAction()==='databases'">Create</option><option value="delete" @show="operationAction()==='databases'">Delete</option></select></label>
+          <label @show="operationAction()==='databases'">Database<input name="database" placeholder="analytics"></label>
+          <label @show="operationAction()==='delete'">Retention<select name="retention"><option value="final_backup">Final backup, then delete</option><option value="retain">Retain resource unmanaged</option></select></label>
+          <label class="check" @show="operationAction()==='expose'"><input name="publicExposure" type="checkbox"> Public endpoint</label>
+          <label @show="operationAction()==='expose'">Allowed CIDRs<input name="allowedCidrs" placeholder="203.0.113.8/32"></label>
+          <button class="btn sm" type="submit" :disabled="busy() || !selected()?.capabilities?.actions?.[operationAction()]?.supported">{{ busy()?'Queueing…':actionLabels[operationAction()] }}</button>
+        </form>
+        <div class="action-preview"><p class="note" @show="!plan()">Choose an action to inspect support, downtime, confirmation, backup, and compatibility gates.</p><div @show="!!plan()"><span class="pill" :class="plan()?.capability?.supported?'ok':'bad'">{{ plan()?.capability?.supported?'supported':'unsupported' }}</span><span class="pill">downtime {{ plan()?.capability?.downtime }}</span><p>{{ plan()?.capability?.explanation }}</p><ul><li @show="plan()?.preflight?.backupRequired">Backup required</li><li @show="plan()?.preflight?.compatibilityRequired">Compatibility review required</li><li @show="plan()?.preflight?.retentionChoiceRequired">Retention choice required</li><template :for="warning in plan()?.warnings || []"><li>{{ warning }}</li></template></ul></div></div>
+      </div>
+      <div><h3>Health, metrics, and provider state</h3><div class="observation-grid"><template :for="entry in observationEntries(selected())"><div><small>{{ entry[0] }}</small><code>{{ typeof entry[1] === 'object' ? JSON.stringify(entry[1], null, 2) : entry[1] }}</code></div></template></div><p class="note" @show="!observationEntries(selected()).length">Observed state is pending. Run Refresh status after provisioning.</p></div>
+      <div><h3>Connections</h3><template :for="item in guidance()"><div class="connection"><span class="pill">{{ item.type }}</span><code>{{ item.command }}</code><small>{{ item.secretRef || 'no managed credential' }}</small><button class="btn ghost sm" @click="copy(item.command,'Connection command')">Copy command</button></div></template><p class="note" @show="!guidance().length">Endpoint discovery is pending. Refresh status after provisioning.</p></div>
+      <div><h3>Credentials</h3><p class="note">Secret values are encrypted and omitted from lists, plans, logs, and operation payloads.</p><button class="btn ghost sm" @show="selected()?.credential?.configured" @click="reveal(selected())">Reveal with recent authentication</button></div>
+      <div><h3>Recent operations</h3><template :for="operation in serviceOperations(selected())"><div class="operation"><span class="pill" :class="tone(operation.state)">{{ operation.state }}</span><b>{{ operation.input?.action }}</b><small>{{ when(operation.createdAt) }} · attempt {{ operation.attempt }}</small></div></template><p class="note" @show="!serviceOperations(selected()).length">No durable operations yet.</p></div>
+      <div><h3>Dependency impact</h3><template :for="dependency in selected()?.dependencies || []"><div class="operation"><b class="mono">{{ dependency.resourceId }}</b><span class="pill" :class="dependency.requiresRedeploy?'warn':'ok'">{{ dependency.requiresRedeploy?'redeploy after rotation':'dynamic reference' }}</span></div></template><p class="note" @show="!(selected()?.dependencies || []).length">No application dependencies registered.</p></div>
+    </aside>
+  </div>
+
+  <section class="credential panel" @show="!!oneTime()" role="alert">
+    <div><h2>Credential — copy now</h2><p>This value is deliberately absent from resource lists, logs, and operation history.</p></div><div class="secret"><span>{{ oneTime()?.username }}</span><code>{{ oneTime()?.password }}</code></div><button class="btn ghost sm" @click="navigator.clipboard.writeText(oneTime()?.password || '')">Copy password</button><button class="btn ghost sm" @click="oneTime.set(null)">Hide</button>
+  </section>
+</main>
+<style>
+.data-wrap{max-width:1500px}.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.summary article{display:grid;gap:5px}.summary strong{font-size:28px}.summary small,.service-grid small,.detail small{color:var(--txt3)}.create-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.create-grid label{display:grid;gap:5px;color:var(--txt3);font-size:11px}.create-grid input,.create-grid select,.filters input,.filters select,.operation-form input,.operation-form select{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:9px}.create-grid label span{font-size:10px}.create-grid .check,.operation-form .check{display:flex;align-items:center;gap:7px}.create-grid .check input,.operation-form .check input{width:auto}.wide{grid-column:1/-1}.filters{display:grid;grid-template-columns:minmax(260px,1fr) repeat(3,170px);gap:8px;margin-bottom:12px}.workspace{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}.workspace.hasDetail{grid-template-columns:minmax(0,1.6fr) minmax(360px,.8fr)}.data-cards{display:grid;gap:10px}.data-cards>.empty{max-width:none;width:100%}.service-card.selected{border-color:var(--accent)}.service-head,.detail-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.service-head>div{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.service-head h2{font-size:17px;margin:0 0 0 3px}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.service-grid>div{display:grid;gap:4px;min-width:0}.service-grid b,.service-grid span{overflow-wrap:anywhere}.service-grid span{color:var(--txt3);font-size:11px}.actions,.operation-picker{display:flex;gap:6px;flex-wrap:wrap}.operation-picker{margin:10px 0}.operation-picker .active{border-color:var(--accent);color:var(--accent)}.operation-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.operation-form label{display:grid;gap:4px;color:var(--txt3);font-size:11px}.operation-form button{grid-column:1/-1}.action-preview{background:var(--bg2);border-radius:8px;padding:10px}.observation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.observation-grid>div{display:grid;gap:4px;background:var(--bg2);border-radius:7px;padding:8px;min-width:0}.observation-grid code{white-space:pre-wrap;overflow-wrap:anywhere;font-size:10px}.detail{position:sticky;top:10px;display:grid;gap:18px}.detail h2,.detail h3{margin:0}.capability,.detail>div+div{border-top:1px solid var(--line);padding-top:14px}.capability ul{padding-left:18px;color:var(--txt2)}.connection{display:grid;gap:6px;padding:9px 0;border-bottom:1px solid var(--line)}.connection code{white-space:normal;overflow-wrap:anywhere;font-size:10px}.connection button{justify-self:start}.operation{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:7px 0}.operation small{margin-left:auto}.credential{position:fixed;z-index:30;right:18px;bottom:18px;width:min(620px,calc(100vw - 36px));display:grid;grid-template-columns:1fr auto;gap:10px;box-shadow:0 16px 60px #0009;border-color:var(--accent)}.credential h2,.credential p{margin:0}.secret{grid-column:1/-1;display:grid;gap:5px;background:var(--bg2);padding:10px;border-radius:8px}.secret code{overflow-wrap:anywhere}.mono,code{font-family:var(--mono)}@media(max-width:1100px){.workspace.hasDetail{grid-template-columns:1fr}.detail{position:static}.create-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.summary{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.service-grid,.create-grid,.operation-form,.observation-grid{grid-template-columns:1fr}.create-grid>*{grid-column:1!important}}@media(max-width:460px){.summary{grid-template-columns:1fr}.credential{grid-template-columns:1fr}}
+</style>
+</body>
+</html>

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

@@ -0,0 +1,40 @@
+<script client>
+import { usePolling } from '../../functions/usePolling.ts'
+const volumes=state([]),resources=state([]),operations=state([]),recoveryPoints=state([]),providers=state([]),selected=state(null),search=state(''),notice=state(''),error=state(''),busy=state(false),createOpen=state(false),mountOpen=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(){const data=await api('/api/volumes');volumes.set(data.volumes||[]);resources.set(data.resources||[]);operations.set(data.operations||[]);recoveryPoints.set(data.recoveryPoints||[]);providers.set(data.providers||[]);if(selected())selected.set((data.volumes||[]).find(item=>item.id===selected().id)||null)}
+const {pollingState,pollingError,lastUpdatedAt,refresh}=usePolling(load,15000)
+function body(form){const value=Object.fromEntries(new FormData(form));for(const key of ['capacityBytes','uid','gid'])if(value[key])value[key]=Number(value[key]);for(const key of ['encrypted','readOnly'])value[key]=value[key]==='on';return value}
+async function mutate(url,value,method='POST'){busy.set(true);error.set('');try{const result=await api(url,{method,headers:{'content-type':'application/json'},body:JSON.stringify(value)});notice.set(result.operation?`Queued ${result.operation.kind} as ${result.operation.id}.`:'Saved.');await refresh();return result}catch(cause){error.set(cause.message)}finally{busy.set(false)}}
+async function create(event){event.preventDefault();const value=body(event.currentTarget),driver=String(value.driver||'docker|docker').split('|');value.provider=driver[0];value.type=driver[1];delete value.driver;const result=await mutate('/api/volumes',value);if(result){event.currentTarget.reset();createOpen.set(false);selected.set(result.volume)}}
+async function attach(event){event.preventDefault();const value=body(event.currentTarget);value.volumeId=selected().id;const result=await mutate('/api/volumes/attach',value);if(result){event.currentTarget.reset();mountOpen.set(false)}}
+async function detach(item){if(!confirm(`Drain and unmount ${item.targetPath}, then detach it?`))return;await mutate('/api/volumes/detach',{volumeId:selected().id,attachmentId:item.id,drained:true,unmounted:true})}
+async function resize(){const bytes=Number(prompt('New capacity in bytes (volumes cannot shrink)',String(selected().capacityBytes||'')));if(bytes)await mutate('/api/volumes/resize',{volumeId:selected().id,capacityBytes:bytes,drained:selected().capabilities?.resize?.online===false})}
+async function snapshot(){await mutate('/api/volumes/snapshot',{volumeId:selected().id})}
+async function restore(item){const name=prompt('Name for the restored replacement volume',`${selected().name}-restored`);if(name)await mutate('/api/volumes/restore',{snapshotId:item.id,name})}
+async function remove(){const item=selected(),confirmation=prompt(`Type ${item.name} to permanently delete this detached volume.`)||'';if(confirmation!==item.name)return;const override=!item.lastBackupAt&&confirm('No recent verified backup is linked. Explicitly delete without a backup?');await mutate('/api/volumes',{volumeId:item.id,confirmation,backupOverride:override,backupOverrideConfirmation:override?`delete without backup ${item.name}`:undefined},'DELETE')}
+async function discover(){await mutate('/api/volumes/discover',{})}
+async function adopt(item){const name=prompt('Adopt this provider volume as',item.name.replace(/^orphan-/,'').slice(0,63));if(name)await mutate('/api/volumes/adopt',{volumeId:item.id,name})}
+function filtered(){const q=search().trim().toLowerCase();return volumes().filter(item=>!q||`${item.name} ${item.type} ${item.provider} ${item.status}`.toLowerCase().includes(q))}
+function tone(status){return ['available','attached'].includes(status)?'ok':['error'].includes(status)?'bad':'warn'}
+function bytes(value){if(value==null)return'unknown';const units=['B','KB','MB','GB','TB'];let size=Number(value),unit=0;while(size>=1024&&unit<units.length-1){size/=1024;unit++}return`${size.toFixed(unit?1:0)} ${units[unit]}`}
+function operationFor(item){return operations().find(value=>value.operation?.input?.volumeId===item.id&&['queued','running'].includes(value.operation?.state))}
+</script>
+<!DOCTYPE html><html lang="en" data-theme="dark"><head>@include('../partials/head', { title: 'ts-cloud · Persistent volumes' })</head><body>
+@include('../partials/nav', { active: 'volumes', env: 'production' })
+<main class="volume-wrap wrap" id="main-content">
+  <div class="crumbs">Infrastructure <span class="sep">/</span> Persistent volumes</div>
+  <header class="page"><div><h1>Persistent volumes</h1><p>Storage with stable identity, explicit consumers, recovery status, capability-aware operations, and safe retirement.</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="discover()">Discover orphans</button><button class="btn sm" @click="createOpen.set(!createOpen())">{{ createOpen()?'Close':'New volume' }}</button></div></header>
+  <p class="notice" role="status" @show="!!notice()">{{ notice() }}</p><p class="bad notice" role="alert" @show="!!error()||!!pollingError()">{{ error()||pollingError() }}</p>
+  <section class="summary"><article class="panel"><b>Volumes</b><strong>{{ volumes().length }}</strong><small>release-independent</small></article><article class="panel"><b>Attached</b><strong>{{ volumes().filter(item=>item.attachments.some(m=>m.observedState==='attached')).length }}</strong><small>active consumers</small></article><article class="panel"><b>Protected</b><strong>{{ volumes().filter(item=>item.backupState==='protected').length }}</strong><small>recent verified backup</small></article><article class="panel"><b>Orphans</b><strong>{{ volumes().filter(item=>item.orphaned).length }}</strong><small>adopt, attach, snapshot, or delete</small></article></section>
+  <form class="create-volume panel" @show="createOpen()" @submit="create($event)"><div class="wide"><h2>Create persistent volume</h2><p class="note">The identity remains stable through releases. Provider limits are shown before unsupported operations can be submitted.</p></div><label>Name<input name="name" pattern="[a-z0-9][a-z0-9_.-]{1,62}" required placeholder="uploads"></label><label>Driver<select name="driver" required><template :for="driver in providers()"><option :value="driver.provider+'|'+driver.type">{{ driver.provider }} · {{ driver.type }}</option></template></select></label><label>Capacity bytes<input name="capacityBytes" type="number" min="1" placeholder="optional"></label><label>Filesystem<input name="filesystem" placeholder="provider default"></label><label class="check"><input name="encrypted" type="checkbox"> Encrypted where supported</label><button class="btn" type="submit" :disabled="busy()">Queue create</button></form>
+  <section class="filters panel"><input type="search" aria-label="Search volumes" placeholder="Search volume, driver, or state" @input="search.set($event.currentTarget.value)"><span>{{ filtered().length }} shown</span></section>
+  <div class="volume-workspace" :class="{detail:!!selected()}"><section class="volume-cards"><template :for="item in filtered()"><article class="panel volume-card" :class="{selected:selected()?.id===item.id}"><div class="volume-head"><div><span class="pill" :class="tone(item.status)">{{ item.status }}</span><span class="pill">{{ item.provider }} · {{ item.type }}</span><h2>{{ item.name }}</h2></div><button class="btn ghost sm" @click="selected.set(item)">Details</button></div><div class="volume-facts"><div><small>Capacity / usage</small><b>{{ bytes(item.usedBytes) }} / {{ bytes(item.capacityBytes) }}</b><span>{{ item.usagePercent==null?'usage unavailable':item.usagePercent+'%' }}</span></div><div><small>Consumers</small><b>{{ item.attachments.filter(m=>m.observedState==='attached').length }}</b><span>{{ item.attachments.map(m=>m.targetPath).join(', ')||'detached' }}</span></div><div><small>Recovery</small><b>{{ item.backupState }}</b><span>{{ item.snapshots.length }} snapshots · {{ item.lastBackupAt||'never backed up' }}</span></div></div><p class="notice warn" @show="!!operationFor(item)">{{ operationFor(item)?.operation?.kind }} · {{ operationFor(item)?.operation?.state }}</p><div class="actions" @show="item.orphaned"><button class="btn sm" @click="adopt(item)">Adopt safely</button></div></article></template><div class="empty panel" @show="!filtered().length"><strong>No persistent volumes</strong><span>Create one or discover provider resources without deleting anything automatically.</span></div></section>
+    <aside class="panel volume-detail" @show="!!selected()"><div class="detail-head"><div><small>Selected volume</small><h2>{{ selected()?.name }}</h2></div><button class="btn ghost sm" @click="selected.set(null)">Close</button></div><div class="capabilities"><h3>Capabilities</h3><template :for="entry in Object.entries(selected()?.capabilities||{})"><p><b>{{ entry[0] }}</b><span :class="entry[1].supported?'ok-text':'muted'">{{ entry[1].supported?'supported':entry[1].reason }}</span></p></template></div><div class="detail-actions"><button class="btn sm" @click="mountOpen.set(!mountOpen())" :disabled="!selected()?.capabilities?.attach?.supported">Attach</button><button class="btn ghost sm" @click="resize()" :disabled="!selected()?.capabilities?.resize?.supported">Resize</button><button class="btn ghost sm" @click="snapshot()" :disabled="!selected()?.capabilities?.snapshot?.supported">Snapshot</button><a class="btn ghost sm" href="/data/backups">Backups</a><button class="btn danger sm" @click="remove()" :disabled="selected()?.attachments.some(item=>item.observedState==='attached')">Delete</button></div>
+      <form class="mount-form" @show="mountOpen()" @submit="attach($event)"><h3>Mount editor</h3><label>Workload<select name="resourceId" required><template :for="resource in resources()"><option :value="resource.id">{{ resource.name }} · {{ resource.kind }}</option></template></select></label><label>Target path<input name="targetPath" required placeholder="/app/uploads"></label><label>UID<input name="uid" type="number" min="0"></label><label>GID<input name="gid" type="number" min="0"></label><label>Mode<input name="mode" pattern="0?[0-7]{3}" placeholder="0750"></label><label>Propagation<select name="propagation"><option>private</option><option>rprivate</option><option>shared</option><option>rshared</option></select></label><label class="check"><input name="readOnly" type="checkbox"> Read only</label><button class="btn" type="submit">Validate and attach</button></form>
+      <section><h3>Consumers</h3><template :for="mount in selected()?.attachments||[]"><article class="mount-row"><div><b>{{ resources().find(item=>item.id===mount.resourceId)?.name||mount.resourceId }}</b><code>{{ mount.targetPath }}</code><small>{{ mount.readOnly?'read only':'read/write' }} · {{ mount.observedState }}</small></div><button class="btn danger sm" @click="detach(mount)" :disabled="mount.observedState!=='attached'">Drain &amp; detach</button></article></template><p class="muted" @show="!selected()?.attachments?.length">No workloads consume this volume.</p></section>
+      <section><h3>Recovery points</h3><template :for="snapshot in selected()?.snapshots||[]"><p><b>{{ snapshot.status }}</b> {{ snapshot.name }} <button class="btn ghost sm" @click="restore(snapshot)" :disabled="!selected()?.capabilities?.restore?.supported">Restore replacement</button></p></template><template :for="point in recoveryPoints().filter(item=>item.resourceId===selected()?.resourceId)"><p><b>{{ point.verificationState }}</b> {{ point.pointInTime }}</p></template><p class="muted" @show="!selected()?.snapshots?.length">Link a backup policy for verified recovery and restore drills.</p></section>
+    </aside></div>
+</main><style>
+.volume-wrap{padding-bottom:5rem}.header-actions,.actions,.detail-actions{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.summary article{display:grid;gap:.3rem}.summary strong{font-size:1.8rem}.create-volume,.mount-form{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1rem 0}.wide{grid-column:1/-1}.create-volume label,.mount-form label{display:grid;gap:.35rem}.filters{display:flex;gap:1rem;align-items:center;margin:1rem 0}.filters input{flex:1}.volume-workspace{display:grid}.volume-workspace.detail{grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:1rem}.volume-cards{display:grid;gap:1rem}.volume-card{display:grid;gap:1rem}.volume-head,.detail-head{display:flex;justify-content:space-between;gap:1rem}.volume-head h2{margin:.5rem 0 0}.volume-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.volume-facts div{display:grid;gap:.25rem}.volume-detail{position:sticky;top:1rem;align-self:start;display:grid;gap:1.25rem}.capabilities p,.mount-row{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border);padding:.55rem 0}.mount-row div{display:grid;gap:.25rem}.ok-text{color:var(--success)}.muted{color:var(--muted)}@media(max-width:900px){.summary{grid-template-columns:repeat(2,1fr)}.volume-workspace.detail{grid-template-columns:1fr}.volume-detail{position:static}.volume-facts{grid-template-columns:1fr}}@media(max-width:560px){.summary,.create-volume,.mount-form{grid-template-columns:1fr}.wide{grid-column:auto}}
+</style></body></html>

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

@@ -100,6 +100,8 @@ const resourceChart = renderResourceBars([
 const initialData = __d ?? null
 </script>
 <script client>
+import { usePolling } from '../functions/usePolling.ts'
+
 // Live at-a-glance metrics: seeded from build-time data (stx server→client
 // bridge) so the cards render real numbers on first paint, then polled from
 // /api/dashboard-data - bind cards, health pill, indicator, and service
@@ -126,11 +128,14 @@ const cpuSub = derived(() => { const m = (data() && data().systemMetrics) || {};
 const memSub = derived(() => { const m = (data() && data().systemMetrics) || {}; return liveData() ? ' · ' + gbVal(m.memUsedMb) + '/' + gbVal(m.memTotalMb) + ' GB' : 'probe unavailable' })
 const overallC = derived(() => { if (!liveData()) return 'warn'; const r = { ok: 0, warn: 1, bad: 2 }; return [pTone(loadP()), pTone(memP()), pTone(diskP())].sort((a, b) => r[b] - r[a])[0] })
 const overallWordC = derived(() => liveData() ? ({ ok: 'healthy', warn: 'elevated', bad: 'critical' }[overallC()]) : 'probe unavailable')
-const indicator = derived(() => liveData() ? 'live' : 'snapshot')
 const servicesC = derived(() => (data() && data().services) || [])
 function svcTone(s) { return (s === 'running' || s === 'active') ? 'ok' : ((s === 'failed' || s === 'stopped') ? 'bad' : 'warn') }
-async function refresh() { try { const res = await fetch('/api/dashboard-data'); if (!res.ok) return; data.set(await res.json()) } catch {} }
-onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () => clearInterval(id) })
+const { pollingState, pollingError } = usePolling(async () => {
+  const response = await fetch('/api/dashboard-data')
+  if (!response.ok) throw new Error('Dashboard refresh failed with HTTP ' + response.status + '.')
+  data.set(await response.json())
+}, 10000)
+const indicator = derived(() => pollingState() === 'stale' ? 'stale' : liveData() ? 'live' : 'snapshot')
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -153,7 +158,7 @@ onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () =>
           <span class="pill" :class="overallC()">{{ overallWordC() }}</span>
         </div>
       </div>
-      <div class="header-actions"><span class="env" title="Auto-refreshing every 10s">{{ indicator() }}</span><a class="btn ghost" href="/server/actions">Operations</a></div>
+      <div class="header-actions"><span class="env" :class="{ bad: pollingState() === 'stale' }" :title="pollingState() === 'stale' ? pollingError() : 'Auto-refreshing every 10s'">{{ indicator() }}</span><a class="btn ghost" href="/server/actions">Operations</a></div>
     </header>
 
     <div class="grid cards">
@@ -172,7 +177,7 @@ onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () =>
         <div class="stat">{{ pDisp(diskP()) }}<small></small></div>
         <div :class="barCss(diskP())"><i :style="barStyle(diskP())"></i></div>
       </a>
-      <a class="panel" href="/server/backups">
+      <a class="panel" href="/data/backups">
         <h3>Backups</h3>
         <div class="stat">{{ backup.size }}</div>
         <p style="color: var(--txt2); font-size: 13px; margin-top: 8px;">Last {{ backup.last }}</p>
@@ -215,6 +220,7 @@ onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () =>
             <div class="item">{{ svc.name }} <span class="pill" :class="svcTone(svc.status)">{{ svc.status }}</span></div>
           </template>
         </div>
+        <div class="compact empty" @show="servicesC().length === 0"><strong>No managed services</strong><span>Configured services will appear after the next successful server probe.</span></div>
       </div>
     </div>
 
@@ -240,9 +246,10 @@ onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () =>
     <div class="section">
       <h2>Sites <a class="more" href="/server/sites">View all →</a></h2>
       <div class="panel">
+        @if (sites.length)
         <table>
           <thead>
-            <tr><th>Site</th><th>Route</th><th>Kind</th><th>Runtime</th><th>TLS</th><th>Deploy</th><th>Status</th></tr>
+            <tr><th scope="col">Site</th><th scope="col">Route</th><th scope="col">Kind</th><th scope="col">Runtime</th><th scope="col">TLS</th><th scope="col">Deploy</th><th scope="col">Status</th></tr>
           </thead>
           <tbody>
             @foreach (sites as site)
@@ -264,6 +271,9 @@ onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () =>
             @endforeach
           </tbody>
         </table>
+        @else
+          <div class="empty"><strong>No sites configured</strong><span>Add a site to expose an application or static build from this server.</span></div>
+        @endif
       </div>
     </div>
 
@@ -289,13 +299,17 @@ onMount(() => { refresh(); const id = setInterval(refresh, 10000); return () =>
       <div>
         <h2>Queues &amp; Scheduler <a class="more" href="/server/workers">Details →</a></h2>
         <div class="panel">
-          @foreach (workers as w)
-            <div class="kv"><span>queue:{{ w.name }} ×{{ w.processes }}</span> <span class="pill {{ statusTone(w.status) }}">{{ w.status }}</span></div>
-          @endforeach
+          @if (workers.length)
+            @foreach (workers as w)
+              <div class="kv"><span>queue:{{ w.name }} ×{{ w.processes }}</span> <span class="pill {{ statusTone(w.status) }}">{{ w.status }}</span></div>
+            @endforeach
+          @else
+            <div class="compact empty"><strong>No queue workers</strong><span>Add worker definitions to a site to process background jobs.</span></div>
+          @endif
           <div class="kv"><span>scheduler</span> @if (scheduler.enabled)<span class="ok pill">on · {{ scheduler.lastRun }}</span>@else<span class="pill warn">off</span>@endif</div>
         </div>
         <div style="height: 16px"></div>
-        <h2>Backups <a class="more" href="/server/backups">Details →</a></h2>
+        <h2>Backups <a class="more" href="/data/backups">Details →</a></h2>
         <div class="panel">
           <div class="kv"><span>destination</span> <span class="mono">{{ backup.destination }}</span></div>
           <div class="kv"><span>retention</span> <span>{{ backup.retention }} copies</span></div>