@stacksjs/ts-cloud 0.7.56 → 0.7.57

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

@@ -7,18 +7,31 @@ const server = __d?.server ?? { name: 'acme-production-app' }
 // Members reach this page for their own sites; box-level CLI hints and the
 // server crumb are not theirs to act on.
 const isMember = (__d?.viewer?.role ?? 'admin') === 'member'
+const viewerCapabilities = __d?.viewer?.capabilities ?? []
+const canRollback = !isMember && viewerCapabilities.includes('deployments:rollback')
 const initialDeps = __d?.serverDeploymentsDetail ?? []
 const deploymentChart = renderDeploymentSparkline(initialDeps)
 const deploymentsEmptyReason = __d?.deploymentsEmptyReason ?? 'No deployment history has been recorded yet.'
 </script>
 <script client>
+import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+
 // Seeded from build-time data (stx server→client bridge), then live-refreshed.
 const deps = state(initialDeps)
-const status = state('all')
-const site = state('all')
+const initialFilters = new URLSearchParams(location.search)
+const status = state(initialFilters.get('status') || 'all')
+const site = state(initialFilters.get('site') || 'all')
 const sites = derived(() => [...new Set(deps().map(d => d.site).filter(Boolean))])
 const filtered = derived(() => deps().filter(d =>
   (status() === 'all' || d.status === status()) && (site() === 'all' || d.site === site())))
+function setFilter(name, value, signal) {
+  signal.set(value)
+  const url = new URL(location.href)
+  if (value === 'all') url.searchParams.delete(name)
+  else url.searchParams.set(name, value)
+  history.replaceState(null, '', url)
+  window.dispatchEvent(new Event('ts-cloud:filters-changed'))
+}
 function tone(s) { return s === 'success' ? 'ok' : (s === 'failed' ? 'bad' : 'warn') }
 async function refresh() {
   try { const r = await fetch('/api/dashboard-data'); if (!r.ok) return; const x = await r.json(); if (Array.isArray(x.serverDeploymentsDetail)) deps.set(x.serverDeploymentsDetail) } catch {}
@@ -26,27 +39,12 @@ async function refresh() {
 onMount(() => { refresh() })
 
 // Reactive operation runner (rollback) - typed-confirm bar + output.
-const opOutput = state('')
-const opShown = state(false)
-const pending = state(null)
-const typed = state('')
-const confirmTok = derived(() => { const p = pending(); return p ? p.confirm : '' })
-const confirmVerb = derived(() => { const p = pending(); return p ? p.verb : '' })
-const canRun = derived(() => { const p = pending(); return !!p && typed() === p.confirm })
-function askOp(operation, confirm, verb, to) { pending.set({ operation, confirm, verb, to: to || null }); typed.set('') }
-function cancelOp() { pending.set(null) }
-async function runOp() {
-  const p = pending()
-  if (!p || typed() !== p.confirm) return
-  pending.set(null); typed.set('')
-  opShown.set(true); opOutput.set('Running ' + p.operation + '...')
-  try {
-    const payload = p.to ? { operation: p.operation, confirm: p.confirm, to: p.to } : { operation: p.operation, confirm: p.confirm }
-    const res = await fetch('/api/server/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
-    const body = await res.json()
-    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : ''))
-  } catch (e) { opOutput.set('FAILED ' + p.operation + '\n\n' + ((e && e.message) || e)) }
-}
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  const payload = p.to ? { operation: p.operation, confirm: p.apiConfirm, to: p.to } : { operation: p.operation, confirm: p.apiConfirm }
+  const res = await fetch('/api/server/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+  const body = await res.json()
+  return (body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : '')
+})
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -74,13 +72,13 @@ async function runOp() {
         </div>
         <div class="filters">
           <div class="segmented" role="group" aria-label="Filter deployment status">
-            <button type="button" :class="{ active: status() === 'all' }" @click="status.set('all')">All</button>
-            <button type="button" :class="{ active: status() === 'success' }" @click="status.set('success')">Success</button>
-            <button type="button" :class="{ active: status() === 'failed' }" @click="status.set('failed')">Failed</button>
+            <button type="button" :class="{ active: status() === 'all' }" @click="setFilter('status', 'all', status)">All</button>
+            <button type="button" :class="{ active: status() === 'success' }" @click="setFilter('status', 'success', status)">Success</button>
+            <button type="button" :class="{ active: status() === 'failed' }" @click="setFilter('status', 'failed', status)">Failed</button>
           </div>
           <label class="select-filter">
             <span>Site</span>
-            <select :value="site()" @change="site.set($event.target.value)">
+            <select :value="site()" @change="setFilter('site', $event.target.value, site)">
               <option value="all">All sites</option>
               <template :for="s in sites()">
                 <option :value="s">{{ s }}</option>
@@ -89,7 +87,7 @@ async function runOp() {
           </label>
         </div>
         <table>
-          <thead><tr><th>Build</th><th>Site</th><th>Branch</th><th>Status</th><th>Steps</th><th>By</th><th>Took</th><th>When</th><th>Action</th></tr></thead>
+          <thead><tr><th scope="col">Build</th><th scope="col">Site</th><th scope="col">Branch</th><th scope="col">Status</th><th scope="col">Steps</th><th scope="col">By</th><th scope="col">Took</th><th scope="col">When</th><th scope="col">Action</th></tr></thead>
           <tbody>
             <template :for="d in filtered()">
               <tr>
@@ -101,7 +99,7 @@ async function runOp() {
                 <td style="color:var(--txt2)">{{ d.by }}</td>
                 <td class="mono">{{ d.took }}</td>
                 <td style="color:var(--txt3)">{{ d.when }}</td>
-                <td class="table-actions"><button class="btn danger sm" type="button" @click="askOp('rollback:' + d.site, d.site, 'roll back', d.release)">Roll back</button></td>
+                <td class="table-actions">@if (canRollback)<button class="btn danger sm" type="button" :aria-label="'Roll back ' + d.site + ' deployment ' + d.sha" @click="askOp('rollback:' + d.site, d.site, 'roll back', d.release)">Roll back</button>@else<span class="mono">read only</span>@endif</td>
               </tr>
             </template>
           </tbody>
@@ -110,7 +108,7 @@ async function runOp() {
         <div class="compact empty" @show="deps().length > 0 && filtered().length === 0"><strong>No matches</strong><span>Try a different status or site filter.</span></div>
         @include('../partials/op-confirm')
         @if (isMember)
-          <p class="note">Roll back one of your sites to any prior release.</p>
+          <p class="note">Deployment history is visible in this scope. Rollback requires an organization administrator because it changes server-wide release state.</p>
         @else
           <p class="note">Roll back a site to any prior release, or inspect a box with <span class="mono">cloud server:logs {{ server.name }}</span>.</p>
         @endif

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

@@ -6,6 +6,9 @@ const initialAlwaysOpen = __d?.firewall?.alwaysOpen ?? [22, 80, 443]
 const initialPorts = __d?.firewall?.ports ?? [8080, 6379]
 </script>
 <script client>
+import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+import { requestJson } from '../../functions/requestJson.ts'
+
 // Reactive host firewall (UFW) management - list + allow + remove, via signals +
 // directives. Seeded from build-time data (stx server→client bridge); load()
 // reconciles against the live cloud config, and each mutation applies UFW live.
@@ -31,36 +34,33 @@ async function load() {
   } catch (e) { setMessage((e && e.message) || 'Could not read firewall config.', 'bad') }
 }
 async function allowPort() {
+  if (busy()) return
   const port = Number(newPort())
   if (!Number.isInteger(port) || port < 1 || port > 65535) { setMessage('Port must be a whole number between 1 and 65535.', 'bad'); return }
   if (reserved.includes(port)) { setMessage('Ports 22, 80, and 443 are always open, so there is nothing to add.', 'bad'); return }
-  setMessage('Allowing port ' + port + '...', '')
-  const res = await fetch('/api/firewall', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ port }) })
-  const data = await res.json().catch(() => ({}))
-  if (!res.ok || data.ok === false) { setMessage(data.error || 'Could not allow port.', 'bad'); return }
-  ports.set(data.ports || []); newPort.set('')
-  setMessage('Allowed port ' + port + ' in cloud config.' + applyLine(data.apply), 'ok')
+  busy.set(true); setMessage('Allowing port ' + port + '...', '')
+  try {
+    const data = await requestJson('/api/firewall', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ port }) })
+    ports.set(data.ports || []); newPort.set('')
+    setMessage('Allowed port ' + port + ' in cloud config.' + applyLine(data.apply), 'ok')
+  } catch (error) { setMessage(error?.message || 'Could not allow port.', 'bad') }
+  finally { busy.set(false) }
 }
 async function removePort(port) {
   setMessage('Removing port ' + port + '...', '')
-  const res = await fetch('/api/firewall', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ port }) })
-  const data = await res.json().catch(() => ({}))
-  if (!res.ok || data.ok === false) { setMessage(data.error || 'Could not remove port.', 'bad'); return }
-  ports.set(data.ports || [])
-  setMessage('Removed port ' + port + ' from cloud config.' + applyLine(data.apply), 'ok')
+  try {
+    const data = await requestJson('/api/firewall', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ port }) })
+    ports.set(data.ports || [])
+    setMessage('Removed port ' + port + ' from cloud config.' + applyLine(data.apply), 'ok')
+  } catch (error) { setMessage(error?.message || 'Could not remove port.', 'bad') }
 }
 
-// Remove runs through a typed-confirm bar: type the port number to confirm.
-const pending = state(null); const typed = state('')
-const confirmTok = derived(() => { const p = pending(); return p ? String(p) : '' })
-const canRun = derived(() => { const p = pending(); return p !== null && typed() === String(p) })
-function askRemove(port) { pending.set(port); typed.set('') }
-function cancelRemove() { pending.set(null); typed.set('') }
-async function runRemove() {
-  const p = pending(); if (p === null || typed() !== String(p)) return
-  pending.set(null); typed.set('')
-  await removePort(p)
-}
+// Remove runs through the shared typed-confirm lifecycle.
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  await removePort(Number(p.port))
+  return message()
+})
+function askRemove(port) { askOp('firewall:remove:' + port, String(port), 'remove port ' + port, null, String(port), { port, danger: true, label: 'Remove port' }) }
 onMount(() => { load() })
 </script>
 <!DOCTYPE html>
@@ -100,7 +100,7 @@ onMount(() => { load() })
             <input id="fw-port" type="number" min="1" max="65535" autocomplete="off" placeholder="8080" :value="newPort()" @input="newPort.set($event.target.value)" required>
           </div>
           <div class="form-actions">
-            <button class="btn" type="submit">Allow</button>
+            <button class="btn" type="submit" :disabled="busy()">Allow</button>
             <span class="msg" :class="messageKind()" role="status">{{ message() }}</span>
           </div>
         </form>
@@ -113,19 +113,14 @@ onMount(() => { load() })
         <div class="port-grid" @show="ports().length > 0">
           <template :for="p in ports()">
             <div class="port-card">
-              <div class="top"><span class="tag">tcp</span><button type="button" class="btn danger sm" @click="askRemove(p)">Remove</button></div>
+              <div class="top"><span class="tag">tcp</span><button type="button" class="btn danger sm" :aria-label="'Remove firewall port ' + p" @click="askRemove(p)">Remove</button></div>
               <div class="listen mono">{{ p }}</div>
               <div class="proc">Allowed via cloud config</div>
             </div>
           </template>
         </div>
         <div class="compact empty" @show="ports().length === 0"><strong>No extra ports configured</strong><span>Only 22, 80, and 443 are open. Allow a port above to update <span class="mono">infrastructure.compute.firewall</span>.</span></div>
-        <div class="op-confirm panel" @show="pending() !== null">
-          <span>Type <b class="mono">{{ confirmTok() }}</b> to remove this port:</span>
-          <input class="op-confirm-input" :value="typed()" @input="typed.set($event.target.value)" @keydown.enter="runRemove()" placeholder="confirm" autocomplete="off">
-          <button class="btn sm" :disabled="!canRun()" @click="runRemove()">Run</button>
-          <button class="btn ghost sm" @click="cancelRemove()">Cancel</button>
-        </div>
+        @include('../partials/op-confirm')
         <p class="note">Ports are declarative: this page edits <span class="mono">infrastructure.compute.firewall</span> in cloud config and applies <span class="mono">ufw allow</span> / <span class="mono">ufw delete allow</span> live on the box. The full config is reconciled again on the next <span class="mono">cloud deploy</span>.</p>
       </div>
     </div>

package/dist/ui-src/pages/server/fleet.stx

@@ -0,0 +1,10 @@
+<script client>
+import { usePolling } from '../../functions/usePolling.ts'
+const servers=state([]),operations=state([]),selected=state(null),search=state(''),notice=state(''),error=state(''),busy=state(false),adding=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/fleet');servers.set(data.servers||[]);operations.set(data.operations||[]);if(selected())selected.set((data.servers||[]).find(v=>v.id===selected().id)||null)}const{pollingState,pollingError,lastUpdatedAt,refresh}=usePolling(load,15000)
+async function mutate(url,value){busy.set(true);error.set('');try{const result=await api(url,{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(value)});notice.set(result.operation?`Queued ${result.operation.id}.`:'Fleet state updated.');await refresh();return result}catch(cause){error.set(cause.message)}finally{busy.set(false)}}async function add(event){event.preventDefault();const value=Object.fromEntries(new FormData(event.currentTarget));value.roles=String(value.roles||'application').split(',').map(v=>v.trim()).filter(Boolean);value.labels=Object.fromEntries(String(value.labels||'').split(',').map(v=>v.split('=')).filter(v=>v[0]&&v[1]));const result=await mutate('/api/fleet',value);if(result){event.currentTarget.reset();adding.set(false);selected.set(result.server)}}async function action(name,extra={}){if(selected())await mutate('/api/fleet/action',{id:selected().id,action:name,...extra})}async function archive(){const name=prompt(`Type ${selected().name} to archive it without terminating provider infrastructure.`);if(name===selected().name)await action('archive',{confirmation:name})}function filtered(){const q=search().toLowerCase();return servers().filter(v=>!q||`${v.name} ${v.provider} ${v.region} ${v.roles.join(' ')} ${Object.values(v.labels).join(' ')}`.toLowerCase().includes(q))}function tone(v){return v==='ready'?'ok':['degraded','unreachable'].includes(v)?'bad':'warn'}function bytes(v){return v==null?'—':`${(v/1073741824).toFixed(1)} GB`}
+</script><!DOCTYPE html><html lang="en" data-theme="dark"><head>@include('../partials/head',{title:'ts-cloud · Fleet inventory'})</head><body>@include('../partials/nav',{active:'fleet',env:'production'})
+<main class="fleet-wrap wrap" id="main-content"><div class="crumbs">Infrastructure <span class="sep">/</span> Fleet inventory</div><header class="page"><div><h1>Fleet inventory</h1><p>Provider-neutral server identity, trust, validation, capacity, roles, heartbeat, and maintenance state.</p></div><div class="header-actions"><span class="pill" :class="pollingState()==='live'?'ok':'warn'">{{ pollingState() }}</span><small>{{ lastUpdatedAt()?.toLocaleTimeString()||'connecting' }}</small><button class="btn sm" @click="adding.set(!adding())">{{ adding()?'Close':'Add server' }}</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>Servers</b><strong>{{ servers().length }}</strong></article><article class="panel"><b>Ready</b><strong>{{ servers().filter(v=>v.status==='ready').length }}</strong></article><article class="panel"><b>Unreachable</b><strong>{{ servers().filter(v=>v.status==='unreachable').length }}</strong></article><article class="panel"><b>Draining</b><strong>{{ servers().filter(v=>['draining','drained'].includes(v.status)).length }}</strong></article></section>
+<form class="add-server panel" @show="adding()" @submit="add($event)"><div class="wide"><h2>Provision or connect existing</h2><p class="note">Enrollment only records identity and trust inputs. It never mutates an existing host until a reviewed bootstrap plan is confirmed.</p></div><label>Name<input name="name" required pattern="[a-z0-9][a-z0-9-]{1,62}"></label><label>Provider<select name="provider"><option>aws</option><option>hetzner</option><option>ssh</option></select></label><label>Provider ID<input name="providerId" placeholder="i-… / server id / external id"></label><label>Region / zone<input name="region" placeholder="us-west-2"></label><label>Endpoint<input name="endpoint" required placeholder="server.example.com"></label><label>SSH user<input name="sshUser" value="deploy" required></label><label>Credential reference<input name="credentialRef" required value="secret://fleet/agent"></label><label>Roles<input name="roles" value="application" placeholder="application,build"></label><label class="wide">Labels<input name="labels" placeholder="pool=production,arch=arm64"></label><button class="btn wide" type="submit">Enroll without mutation</button></form>
+<section class="filters panel"><input type="search" aria-label="Search fleet" placeholder="Search provider, region, role, or label" @input="search.set($event.currentTarget.value)"></section><div class="fleet-grid" :class="{detail:!!selected()}"><section class="server-cards"><template :for="item in filtered()"><article class="panel server-card"><div><span class="pill" :class="tone(item.status)">{{ item.status }}</span><span class="pill">{{ item.provider }}</span><h2>{{ item.name }}</h2><p>{{ item.endpoint }} · {{ item.region||'external' }}</p></div><div class="facts"><span>{{ item.roles.join(', ') }}</span><span>{{ item.capacity.cpu||0 }} CPU · {{ bytes(item.capacity.memoryBytes) }}</span><span>heartbeat {{ item.heartbeatAt||'never' }}</span><span>trust {{ item.trustState }}</span></div><button class="btn ghost sm" @click="selected.set(item)">Inspect</button></article></template></section><aside class="detail-panel panel" @show="!!selected()"><div class="detail-head"><h2>{{ selected()?.name }}</h2><button class="btn ghost sm" @click="selected.set(null)">Close</button></div><div class="actions"><button class="btn sm" @click="action('test')">Test & pin key</button><button class="btn sm" @click="action('validate')" :disabled="selected()?.trustState!=='pinned'">Validate</button><button class="btn ghost sm" @click="action('bootstrap')">Preview bootstrap</button><button class="btn ghost sm" @click="action('bootstrap',{confirmed:true})" :disabled="!selected()?.validation?.valid">Apply bootstrap</button><button class="btn ghost sm" @click="action('drain')">Drain</button><button class="btn ghost sm" @click="action('uncordon')">Uncordon</button><button class="btn danger sm" @click="archive()">Archive only</button></div><p class="notice warn" @show="selected()?.trustState==='rotation_pending'">Host key changed. Review <code>{{ selected()?.pendingHostKey }}</code> before continuing. <button class="btn sm" @click="action('review_host_key',{fingerprint:selected().pendingHostKey})">Accept rotation</button></p><section><h3>Validation</h3><template :for="finding in selected()?.validation?.findings||[]"><p class="finding" :class="finding.severity==='error'?'bad-text':''"><b>{{ finding.code }}</b> {{ finding.message }}<small>{{ finding.remediation }}</small></p></template><pre>{{ JSON.stringify(selected()?.validation?.facts||{},null,2) }}</pre></section></aside></div></main><style>.fleet-wrap{padding-bottom:5rem}.header-actions,.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.summary article{display:grid;gap:.4rem}.summary strong{font-size:1.8rem}.add-server{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.add-server label{display:grid;gap:.3rem}.wide{grid-column:1/-1}.filters{margin:1rem 0}.filters input{width:100%}.fleet-grid.detail{display:grid;grid-template-columns:1fr 430px;gap:1rem}.server-cards{display:grid;gap:1rem}.server-card{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:center}.facts{display:grid;gap:.35rem}.detail-panel{position:sticky;top:1rem;align-self:start}.detail-head{display:flex;justify-content:space-between}.finding{display:grid;border-bottom:1px solid var(--border);padding:.5rem 0}.bad-text{color:var(--danger)}pre{white-space:pre-wrap;max-height:20rem;overflow:auto}@media(max-width:900px){.fleet-grid.detail{grid-template-columns:1fr}.detail-panel{position:static}.server-card{grid-template-columns:1fr}.summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.add-server,.summary{grid-template-columns:1fr}.wide{grid-column:auto}}</style></body></html>

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

@@ -9,6 +9,8 @@ const initialLogs = __d?.serverLogs ?? []
 const emptyReason = __d?.serverLogsEmptyReason ?? 'No server logs are available yet.'
 </script>
 <script client>
+import { usePolling } from '../../functions/usePolling.ts'
+
 // Reactive log viewer: seeded from build-time data (stx server→client bridge),
 // then filters by level + source and auto-refreshes - all via signals +
 // directives (no manual DOM).
@@ -19,15 +21,13 @@ const sources = derived(() => [...new Set(logs().map(l => l.source).filter(Boole
 const filtered = derived(() => logs().filter(l =>
   (level() === 'all' || l.level === level()) && (source() === 'all' || l.source === source())))
 function tone(l) { return l === 'error' ? 'bad' : (l === 'warn' ? 'warn' : 'ok') }
-async function refresh() {
-  try {
-    const res = await fetch('/api/dashboard-data')
-    if (!res.ok) return
-    const data = await res.json()
-    if (Array.isArray(data.serverLogs)) logs.set(data.serverLogs)
-  } catch {}
-}
-onMount(() => { refresh(); const id = setInterval(refresh, 8000); return () => clearInterval(id) })
+const { pollingState, pollingError, pollingLabel } = usePolling(async () => {
+  const res = await fetch('/api/dashboard-data')
+  if (!res.ok) throw new Error('Log refresh failed with HTTP ' + res.status + '.')
+  const data = await res.json()
+  if (!Array.isArray(data.serverLogs)) throw new Error('Log refresh returned an invalid payload.')
+  logs.set(data.serverLogs)
+}, 8000)
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -53,6 +53,7 @@ onMount(() => { refresh(); const id = setInterval(refresh, 8000); return () => c
         </div>
         <div class="cmds header-actions"><span class="accent cmd">cloud server:logs {{ server.name }}</span></div>
       @endif
+      <div class="header-actions"><span class="pill" :class="{ ok: pollingState() === 'live', warn: pollingState() !== 'live' }">{{ pollingLabel() }}</span></div>
     </header>
 
     <div class="section">
@@ -89,6 +90,7 @@ onMount(() => { refresh(); const id = setInterval(refresh, 8000); return () => c
         </div>
         <div class="compact empty" @show="logs().length > 0 && filtered().length === 0"><strong>No matching logs</strong><span>Try a different level or source filter.</span></div>
         <div class="empty" @show="logs().length === 0"><strong>No logs available</strong><span>{{ emptyReason }}</span></div>
+        <p class="bad note" role="status" @show="pollingState() === 'stale'">Showing the last successful snapshot. {{ pollingError() }}</p>
 
         @if (isMember)
           <p class="note">Live <span class="mono">journalctl</span> for your sites' services, <b>queue workers</b> and daemons. Auto-refreshes every 8s.</p>

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

@@ -3,20 +3,13 @@ import { renderResourceBars } from '../../src/charts.ts'
 
 // ts-cloud server health view. Real data is injected at build time via
 // TSCLOUD_DASHBOARD_DATA (see deploy/dashboard-data-server.ts); the sample
-// values below render the design when nothing is injected.
+// No fallback samples: missing data must remain visibly unavailable.
 let __d = null
 try { __d = JSON.parse(process.env.TSCLOUD_DASHBOARD_DATA || '') } catch { __d = null }
 
-const server = __d?.server ?? {
-  name: 'acme-production-app', provider: 'Hetzner', region: 'fsn1',
-  os: 'Ubuntu 24.04', uptime: '14d 6h', ip: '203.0.113.42',
-}
-const m = __d?.systemMetrics ?? {
-  load: 0.42, cpus: 4,
-  memUsedMb: 2480, memTotalMb: 7860,
-  diskUsedPct: 38, diskUsedGb: 19, diskTotalGb: 50,
-}
-const live = __d ? !!__d?._serverReachable && !__d?.metricsUnavailable : true
+const server = __d?.server ?? { name: 'Server', provider: 'unavailable', region: 'unavailable', os: 'unavailable', uptime: 'unavailable' }
+const m = __d?.systemMetrics ?? { load: 0, cpus: 0, memUsedMb: 0, memTotalMb: 0, diskUsedPct: 0, diskUsedGb: 0, diskTotalGb: 0 }
+const live = !!__d && !!__d?._serverReachable && !__d?.metricsUnavailable
 
 // ── Derived percentages ───────────────────────────────────────────────
 const memPct = live ? Math.min(100, Math.round((m.memUsedMb / Math.max(1, m.memTotalMb)) * 100)) : 0
@@ -63,10 +56,9 @@ const resourceChart = renderResourceBars([
   { label: 'Disk', value: diskPct, detail: live ? `${m.diskUsedGb} / ${m.diskTotalGb} GB` : unavailableNote },
 ], { disabled: !live })
 
-// ── Load trend (sample only - not part of the live metrics payload) ────
-const loadTrend = __d?.loadTrend ?? [22, 28, 31, 26, 40, 38, 33, 45, 41, 30, 27, 35, 48, 52, 39, 33, 29, 44, 50, 47, 36, 31, 28, 34]
+const loadTrend = __d?.loadTrend ?? []
 const maxLoad = Math.max(...loadTrend, 1)
-const trendPeak = Math.max(...loadTrend)
+const trendPeak = loadTrend.length ? Math.max(...loadTrend) : 0
 function barPct(v) { return Math.round((v / maxLoad) * 100) }
 function barTone(v) { const r = v / maxLoad; return r >= 0.9 ? 'peak' : r >= 0.7 ? 'hot' : '' }
 </script>
@@ -165,7 +157,7 @@ function barTone(v) { const r = v / maxLoad; return r >= 0.9 ? 'peak' : r >= 0.7
     <div class="section">
       <h2>CPU load trend</h2>
       <div class="chart panel">
-        @if (live)
+        @if (live && loadTrend.length)
           <div class="spark">
             @foreach (loadTrend as v)
               <i class="{{ barTone(v) }}" style="height: {{ barPct(v) }}%"></i>
@@ -174,7 +166,7 @@ function barTone(v) { const r = v / maxLoad; return r >= 0.9 ? 'peak' : r >= 0.7
           <div class="xaxis"><span>-24 snapshots</span><span>peak {{ trendPeak }}% · now</span></div>
           <p class="note">% of CPU capacity · refresh with <span class="mono">cloud server:monitoring {{ server.name }}</span></p>
         @else
-          <div class="compact empty"><strong>No live trend</strong><span>{{ unavailableNote }}</span></div>
+          <div class="compact empty"><strong>No historical trend</strong><span>Open <a href="/operations/observability">Observability</a> for persisted host metrics, source freshness, timezone, and gaps.</span></div>
         @endif
       </div>
     </div>

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

@@ -12,29 +12,16 @@ const services = __d?.servicesDetail ?? [
 function tone(s) { return s === 'running' ? 'ok' : (s === 'stopped' || s === 'failed' ? 'bad' : 'warn') }
 </script>
 <script client>
+import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+
 // Reactive server-operation runner: a typed-confirmation bar + output, driven by
 // signals + directives (no manual DOM). Buttons call askOp(...) to stage an op.
-const opOutput = state('')
-const opShown = state(false)
-const pending = state(null)
-const typed = state('')
-const confirmTok = derived(() => { const p = pending(); return p ? p.confirm : '' })
-const confirmVerb = derived(() => { const p = pending(); return p ? p.verb : '' })
-const canRun = derived(() => { const p = pending(); return !!p && typed() === p.confirm })
-function askOp(operation, confirm, verb, to) { pending.set({ operation, confirm, verb, to: to || null }); typed.set('') }
-function cancelOp() { pending.set(null) }
-async function runOp() {
-  const p = pending()
-  if (!p || typed() !== p.confirm) return
-  pending.set(null); typed.set('')
-  opShown.set(true); opOutput.set('Running ' + p.operation + '...')
-  try {
-    const payload = p.to ? { operation: p.operation, confirm: p.confirm, to: p.to } : { operation: p.operation, confirm: p.confirm }
-    const res = await fetch('/api/server/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
-    const body = await res.json()
-    opOutput.set((body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : ''))
-  } catch (e) { opOutput.set('FAILED ' + p.operation + '\n\n' + ((e && e.message) || e)) }
-}
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  const payload = p.to ? { operation: p.operation, confirm: p.apiConfirm, to: p.to } : { operation: p.operation, confirm: p.apiConfirm }
+  const res = await fetch('/api/server/operations/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+  const body = await res.json()
+  return (body.ok ? 'OK ' : 'FAILED ') + (body.command || p.operation) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : '')
+})
 </script>
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
@@ -49,8 +36,9 @@ async function runOp() {
     </header>
     <div class="section">
       <div class="panel">
+        @if (services.length)
         <table>
-          <thead><tr><th>Service</th><th>Status</th><th>Uptime</th><th>Memory</th><th>Autostart</th><th>Manage</th></tr></thead>
+          <thead><tr><th scope="col">Service</th><th scope="col">Status</th><th scope="col">Uptime</th><th scope="col">Memory</th><th scope="col">Autostart</th><th scope="col">Manage</th></tr></thead>
           <tbody>
             @foreach (services as s)
               <tr>
@@ -61,18 +49,21 @@ async function runOp() {
                 <td>@if (s.auto)<span class="ok pill">enabled</span>@else<span class="pill warn">disabled</span>@endif</td>
                 <td>
                   <div class="action-runner">
-                    <button class="btn ghost sm" type="button" @click="askOp('restart:{{ s.name }}', '{{ s.name }}', 'restart')">Restart</button>
-                    <button class="btn ghost sm" type="button" @click="askOp('reload:{{ s.name }}', '{{ s.name }}', 'reload')">Reload</button>
-                    <button class="btn ghost sm" type="button" @click="askOp('start:{{ s.name }}', '{{ s.name }}', 'start')">Start</button>
-                    <button class="btn danger sm" type="button" @click="askOp('stop:{{ s.name }}', '{{ s.name }}', 'stop')">Stop</button>
-                    <button class="btn ghost sm" type="button" @click="askOp('enable:{{ s.name }}', '{{ s.name }}', 'enable')">Enable</button>
-                    <button class="btn ghost sm" type="button" @click="askOp('disable:{{ s.name }}', '{{ s.name }}', 'disable')">Disable</button>
+                    <button class="btn ghost sm" type="button" aria-label="Restart {{ s.name }}" @click="askOp('restart:{{ s.name }}', 'restart {{ s.name }}', 'restart {{ s.name }}', null, '{{ s.name }}')">Restart</button>
+                    <button class="btn ghost sm" type="button" aria-label="Reload {{ s.name }}" @click="askOp('reload:{{ s.name }}', 'reload {{ s.name }}', 'reload {{ s.name }}', null, '{{ s.name }}')">Reload</button>
+                    <button class="btn ghost sm" type="button" aria-label="Start {{ s.name }}" @click="askOp('start:{{ s.name }}', 'start {{ s.name }}', 'start {{ s.name }}', null, '{{ s.name }}')">Start</button>
+                    <button class="btn danger sm" type="button" aria-label="Stop {{ s.name }}" @click="askOp('stop:{{ s.name }}', 'stop {{ s.name }}', 'stop {{ s.name }}', null, '{{ s.name }}')">Stop</button>
+                    <button class="btn ghost sm" type="button" aria-label="Enable {{ s.name }}" @click="askOp('enable:{{ s.name }}', 'enable {{ s.name }}', 'enable {{ s.name }}', null, '{{ s.name }}')">Enable</button>
+                    <button class="btn ghost sm" type="button" aria-label="Disable {{ s.name }}" @click="askOp('disable:{{ s.name }}', 'disable {{ s.name }}', 'disable {{ s.name }}', null, '{{ s.name }}')">Disable</button>
                   </div>
                 </td>
               </tr>
             @endforeach
           </tbody>
         </table>
+        @else
+          <div class="empty"><strong>No managed services</strong><span>Services appear here after they are configured and discovered on the server.</span></div>
+        @endif
         @include('../partials/op-confirm')
         <p class="note">Install software with <span class="mono">cloud server:recipe {{ server.name }} &lt;recipe&gt;</span>.</p>
       </div>