@stacksjs/ts-cloud 0.7.56 → 0.7.57

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

@@ -6,60 +6,67 @@ const server = __d?.server ?? { name: 'stacks-production-app' }
 // so the box-owner affordances - adding and removing sites - are not offered.
 // Presentation only: the server enforces this regardless of what is rendered.
 const isMember = (__d?.viewer?.role ?? 'admin') === 'member'
+const viewerCapabilities = __d?.viewer?.capabilities ?? []
+const canDeploy = !isMember || viewerCapabilities.includes('deployments:create')
+const canEdit = !isMember || viewerCapabilities.includes('config:write')
 const sites = __d?.sitesDetail ?? [
   { name: 'main', route: 'stacksjs.com', href: 'https://stacksjs.com', kind: 'stacks', runtime: 'bun', tls: 'https', deploy: 'service', root: '/var/www/main/current', branch: 'main', status: 'live' },
   { name: 'api', route: 'internal', kind: 'api', runtime: 'bun', tls: 'loopback', deploy: 'service', root: '/var/www/api/current', branch: 'main', status: 'live' },
   { name: 'docs', route: 'stacksjs.com/docs', href: 'https://stacksjs.com/docs', kind: 'bunpress', runtime: 'static/bun', tls: 'https', deploy: 'server static', root: '/var/www/docs', branch: 'build artifact', status: 'live' },
 ]
+const initialSites = sites
 function tone(s) { return s === 'live' ? 'ok' : (s === 'failed' ? 'bad' : 'warn') }
 </script>
 <script client>
+import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+
 // Reactive site management - add, per-site deploy/edit/remove - via signals +
-// directives. Mutations re-render the server-built page (location.reload) once
-// the cloud config has changed.
+// directives. Mutation responses replace the site signal without reloading, so
+// status and success feedback remain visible.
 const addName = state(''); const addRoot = state(''); const addDomain = state(''); const addPath = state('')
 const addDeploy = state('server'); const addPort = state(''); const addBuild = state(''); const addStart = state('')
 const addMsg = state(''); const addMsgKind = state('')
+const addBusy = state(false)
+const siteRows = state(initialSites)
 async function addSite() {
-  addMsg.set('Adding site...'); addMsgKind.set('')
+  if (addBusy()) return
+  addBusy.set(true); addMsg.set('Adding site...'); addMsgKind.set('')
   const payload = { name: addName(), root: addRoot(), domain: addDomain(), path: addPath(), deploy: addDeploy(), port: addPort(), build: addBuild(), start: addStart() }
   try {
     const res = await fetch('/api/sites', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
     const b = await res.json()
     if (!b.ok) throw new Error(b.error || 'Could not add site')
-    addMsg.set('Added ' + b.site + '. Refreshing...'); addMsgKind.set('ok'); location.reload()
+    if (Array.isArray(b.data?.sitesDetail)) siteRows.set(b.data.sitesDetail)
+    addMsg.set('Added ' + b.site + '.'); addMsgKind.set('ok')
   } catch (e) { addMsg.set((e && e.message) || String(e)); addMsgKind.set('bad') }
+  finally { addBusy.set(false) }
 }
 
 // Deploy / remove run through the shared op-confirm bar.
-const opOutput = state(''); const opShown = state(false); const pending = state(null); const typed = state('')
-const confirmTok = derived(() => { const p = pending(); return p ? p.confirm : '' })
-const confirmVerb = derived(() => { const p = pending(); return p ? p.verb : '' })
-const canRun = derived(() => { const p = pending(); return !!p && typed() === p.confirm })
-function askDeploy(name) { pending.set({ kind: 'deploy', name, confirm: name, verb: 'deploy ' + name }); typed.set('') }
-function askRemove(name) { pending.set({ kind: 'remove', name, confirm: name, verb: 'remove ' + name }); 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((p.kind === 'deploy' ? 'Deploying ' : 'Removing ') + p.name + '...')
-  try {
-    if (p.kind === 'deploy') {
-      const res = await fetch('/api/sites/deploy', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: p.name, confirm: p.name }) })
-      const b = await res.json()
-      opOutput.set((b.ok ? 'OK ' : 'FAILED ') + (b.command || ('deploy ' + p.name)) + '\n\n' + (b.stdout || '') + (b.stderr ? '\n' + b.stderr : '') + (b.error ? '\n' + b.error : ''))
-    } else {
-      const res = await fetch('/api/sites', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: p.name }) })
-      const b = await res.json()
-      if (b.ok) { opOutput.set('Removed ' + p.name + ' from cloud config. Refreshing...'); location.reload() } else opOutput.set(b.error || 'Could not remove site')
-    }
-  } catch (e) { opOutput.set('FAILED ' + p.name + '\n\n' + ((e && e.message) || e)) }
-}
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  if (p.operation.startsWith('site:deploy:')) {
+    const res = await fetch('/api/sites/deploy', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: p.name, confirm: p.apiConfirm }) })
+    const body = await res.json()
+    return (body.ok ? 'OK ' : 'FAILED ') + (body.command || ('deploy ' + p.name)) + '\n\n' + (body.stdout || '') + (body.stderr ? '\n' + body.stderr : '') + (body.error ? '\n' + body.error : '')
+  }
+  if (p.operation.startsWith('site:edit:')) {
+    const res = await fetch('/api/sites', { method: 'PATCH', headers: { 'content-type': 'application/json' }, body: JSON.stringify(p.payload) })
+    const body = await res.json()
+    if (body.ok && Array.isArray(body.data?.sitesDetail)) siteRows.set(body.data.sitesDetail)
+    return body.ok ? 'Updated ' + p.name + '.' : (body.error || 'Could not update site')
+  }
+  const res = await fetch('/api/sites', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: p.name }) })
+  const body = await res.json()
+  if (body.ok && Array.isArray(body.data?.sitesDetail)) siteRows.set(body.data.sitesDetail)
+  return body.ok ? 'Removed ' + p.name + ' from cloud config.' : (body.error || 'Could not remove site')
+})
+function askDeploy(name) { askOp('site:deploy:' + name, name, 'deploy ' + name, null, name, { name }) }
+function askRemove(name) { askOp('site:remove:' + name, name, 'remove ' + name, null, name, { name, danger: true }) }
 
 // Inline per-site edit (TLS / domain / env).
 const editing = state(''); const editSsl = state(''); const editDomain = state(''); const editEnv = state(''); const editPhp = state(''); const editAliases = state(''); const editRedirects = state('')
 function toggleEdit(name) { editing.set(editing() === name ? '' : name); editSsl.set(''); editDomain.set(''); editEnv.set(''); editPhp.set(''); editAliases.set(''); editRedirects.set('') }
-async function saveEdit(name) {
+function editPayload(name) {
   const payload = { name }
   if (editSsl() === 'false') payload.ssl = false; else if (editSsl()) payload.ssl = { provider: editSsl() }
   if (editDomain()) payload.domain = editDomain()
@@ -67,12 +74,12 @@ async function saveEdit(name) {
   if (editAliases().trim()) payload.aliases = editAliases().split(/[\s,]+/).filter(Boolean)
   if (editRedirects().trim()) { payload.redirects = {}; for (const line of editRedirects().split('\n')) { const i = line.indexOf('='); if (i > 0) payload.redirects[line.slice(0, i).trim()] = line.slice(i + 1).trim() } }
   if (editEnv()) { payload.env = {}; for (const line of editEnv().split('\n')) { const i = line.indexOf('='); if (i > 0) payload.env[line.slice(0, i).trim()] = line.slice(i + 1).trim() } }
-  opShown.set(true); opOutput.set('Updating ' + name + '...')
-  try {
-    const res = await fetch('/api/sites', { method: 'PATCH', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
-    const b = await res.json()
-    if (b.ok) { opOutput.set('Updated ' + name + '. Refreshing...'); location.reload() } else opOutput.set(b.error || 'Could not update site')
-  } catch (e) { opOutput.set('FAILED ' + name + '\n\n' + ((e && e.message) || e)) }
+  return payload
+}
+async function saveEdit(name) {
+  const payload = editPayload(name)
+  const verb = payload.ssl === false ? 'disable TLS for ' + name : 'save configuration changes for ' + name
+  askOp('site:edit:' + name, name, verb, null, name, { name, payload, danger: payload.ssl === false })
 }
 </script>
 <!DOCTYPE html>
@@ -99,72 +106,67 @@ async function saveEdit(name) {
         <h2>Add site</h2>
         <div class="panel">
           <form class="form-grid" @submit.prevent="addSite()">
-            <div class="field-block"><label>Name</label><input placeholder="docs" :value="addName()" @input="addName.set($event.target.value)"></div>
-            <div class="field-block"><label>Root</label><input placeholder="dist/docs" :value="addRoot()" @input="addRoot.set($event.target.value)"></div>
-            <div class="field-block"><label>Domain</label><input placeholder="example.com" :value="addDomain()" @input="addDomain.set($event.target.value)"></div>
-            <div class="field-block"><label>Path</label><input placeholder="/docs" :value="addPath()" @input="addPath.set($event.target.value)"></div>
-            <div class="field-block"><label>Deploy</label><input :value="addDeploy()" @input="addDeploy.set($event.target.value)"></div>
-            <div class="field-block"><label>Port</label><input placeholder="3000" :value="addPort()" @input="addPort.set($event.target.value)"></div>
-            <div class="field-block wide"><label>Build command</label><input placeholder="bun run build" :value="addBuild()" @input="addBuild.set($event.target.value)"></div>
-            <div class="field-block wide"><label>Start command</label><input placeholder="bun run start" :value="addStart()" @input="addStart.set($event.target.value)"></div>
-            <div class="form-actions"><button class="btn" type="submit">Add site</button><span class="msg" :class="addMsgKind()">{{ addMsg() }}</span></div>
+            <div class="field-block"><label for="site-add-name">Name</label><input id="site-add-name" placeholder="docs" :value="addName()" @input="addName.set($event.target.value)"></div>
+            <div class="field-block"><label for="site-add-root">Root</label><input id="site-add-root" placeholder="dist/docs" :value="addRoot()" @input="addRoot.set($event.target.value)"></div>
+            <div class="field-block"><label for="site-add-domain">Domain</label><input id="site-add-domain" placeholder="example.com" :value="addDomain()" @input="addDomain.set($event.target.value)"></div>
+            <div class="field-block"><label for="site-add-path">Path</label><input id="site-add-path" placeholder="/docs" :value="addPath()" @input="addPath.set($event.target.value)"></div>
+            <div class="field-block"><label for="site-add-deploy">Deploy</label><input id="site-add-deploy" :value="addDeploy()" @input="addDeploy.set($event.target.value)"></div>
+            <div class="field-block"><label for="site-add-port">Port</label><input id="site-add-port" placeholder="3000" :value="addPort()" @input="addPort.set($event.target.value)"></div>
+            <div class="field-block wide"><label for="site-add-build">Build command</label><input id="site-add-build" placeholder="bun run build" :value="addBuild()" @input="addBuild.set($event.target.value)"></div>
+            <div class="field-block wide"><label for="site-add-start">Start command</label><input id="site-add-start" placeholder="bun run start" :value="addStart()" @input="addStart.set($event.target.value)"></div>
+            <div class="form-actions"><button class="btn" type="submit" :disabled="addBusy()">Add site</button><span class="msg" :class="addMsgKind()" role="status">{{ addMsg() }}</span></div>
           </form>
         </div>
       </div>
     @endif
-    @if (isMember && sites.length === 0)
-      <div class="empty">
+    @if (isMember)
+      <div class="empty" @show="siteRows().length === 0">
         <strong>No sites yet</strong>
         <span>You have not been given access to a site on this server. Ask the server owner to invite you to one.</span>
       </div>
     @endif
-    @foreach (sites as site)
+    <template :for="site in siteRows()">
       <div class="section">
-        <h2>{{ site.name }} <span class="more"><span class="pill {{ tone(site.status) }}">{{ site.status }}</span></span></h2>
+        <h2>{{ site.name }} <span class="more"><span class="pill" :class="tone(site.status)">{{ site.status }}</span></span></h2>
         <div class="cols">
           <div class="panel">
-            <div class="kv"><span>route</span> <b class="mono">@if (site.href)<a href="{{ site.href }}">{{ site.route }}</a>@else{{ site.route }}@endif</b></div>
+            <div class="kv"><span>route</span> <b class="mono"><a :href="site.href" @show="!!site.href">{{ site.route }}</a><span @show="!site.href">{{ site.route }}</span></b></div>
             <div class="kv"><span>kind</span> <b><span class="tag">{{ site.kind ?? site.type }}</span></b></div>
             <div class="kv"><span>runtime</span> <b class="mono">{{ site.runtime }}</b></div>
-            <div class="kv"><span>tls</span> <b><span class="{{ site.tls === 'https' ? 'ok' : 'warn' }} pill">{{ site.tls }}</span></b></div>
+            <div class="kv"><span>tls</span> <b><span class="pill" :class="site.tls === 'https' ? 'ok' : 'warn'">{{ site.tls }}</span></b></div>
           </div>
           <div class="panel">
             <div class="kv"><span>web root</span> <b class="mono" style="font-size:11px">{{ site.root }}</b></div>
             <div class="kv"><span>source</span> <b class="mono">{{ site.branch }}</b></div>
             <div class="kv"><span>deploy</span> <b>{{ site.deploy }}</b></div>
-            @if (site.envKeys && site.envKeys.length)
-              <div class="kv"><span>env vars</span> <b class="mono">{{ site.envKeys.join(', ') }}</b></div>
-            @endif
-            @if (site.aliases && site.aliases.length)
-              <div class="kv"><span>aliases</span> <b class="mono">{{ site.aliases.join(', ') }}</b></div>
-            @endif
-            @if (site.redirects && Object.keys(site.redirects).length)
-              <div class="kv"><span>redirects</span> <b class="mono">{{ Object.keys(site.redirects).length }}</b></div>
-            @endif
-            @if (site.shadowedBy)
-              <div class="kv"><span>shadowed by</span> <b class="mono">{{ site.shadowedBy }}</b></div>
-            @endif
+            <div class="kv" @show="site.envKeys && site.envKeys.length"><span>env vars</span> <b class="mono">{{ (site.envKeys || []).join(', ') }}</b></div>
+            <div class="kv" @show="site.aliases && site.aliases.length"><span>aliases</span> <b class="mono">{{ (site.aliases || []).join(', ') }}</b></div>
+            <div class="kv" @show="site.redirects && Object.keys(site.redirects).length"><span>redirects</span> <b class="mono">{{ Object.keys(site.redirects || {}).length }}</b></div>
+            <div class="kv" @show="!!site.shadowedBy"><span>shadowed by</span> <b class="mono">{{ site.shadowedBy }}</b></div>
           </div>
         </div>
         <div class="row-actions" style="margin-top:12px;">
-          <button class="btn sm" type="button" @click="askDeploy('{{ site.name }}')">Deploy</button>
-          <button class="btn ghost sm" type="button" @click="toggleEdit('{{ site.name }}')">Edit</button>
+          <a class="btn ghost sm" :href="'/operations/workloads?service=' + encodeURIComponent(site.name)">Backing workloads</a>
+          @if (canDeploy)<button class="btn sm" type="button" @click="askDeploy(site.name)">Deploy</button>@endif
+          @if (canEdit)<button class="btn ghost sm" type="button" @click="toggleEdit(site.name)">Edit</button>@endif
           @if (!isMember)
-            <button class="btn danger sm" type="button" @click="askRemove('{{ site.name }}')">Remove</button>
+            <button class="btn danger sm" type="button" :aria-label="'Remove site ' + site.name" @click="askRemove(site.name)">Remove</button>
           @endif
         </div>
-        <form class="form-grid" style="margin-top:14px;" @show="editing() === '{{ site.name }}'" @submit.prevent="saveEdit('{{ site.name }}')">
+        @if (!canDeploy && !canEdit)<p class="note">This membership is read-only for {{ site.name }}. Ask an organization owner for deployment or configuration access.</p>@endif
+        <form class="form-grid" style="margin-top:14px;" @show="editing() === site.name" @submit.prevent="saveEdit(site.name)">
           <div class="field-block">
-            <label>TLS</label>
+            <label>TLS
             <select :value="editSsl()" @change="editSsl.set($event.target.value)">
               <option value="">(unchanged)</option>
               <option value="letsencrypt">letsencrypt</option>
               <option value="false">disable</option>
             </select>
+            </label>
           </div>
-          <div class="field-block"><label>Domain</label><input placeholder="{{ site.domain }}" :value="editDomain()" @input="editDomain.set($event.target.value)"></div>
+          <div class="field-block"><label>Domain<input :placeholder="site.domain" :value="editDomain()" @input="editDomain.set($event.target.value)"></label></div>
           <div class="field-block">
-            <label>PHP version</label>
+            <label>PHP version
             <select :value="editPhp()" @change="editPhp.set($event.target.value)">
               <option value="">(unchanged)</option>
               <option value="8.1">8.1</option>
@@ -172,14 +174,15 @@ async function saveEdit(name) {
               <option value="8.3">8.3</option>
               <option value="8.4">8.4</option>
             </select>
+            </label>
           </div>
-          <div class="field-block wide"><label>Domain aliases (space or comma separated)</label><input placeholder="www.example.com, cdn.example.com" :value="editAliases()" @input="editAliases.set($event.target.value)"></div>
-          <div class="field-block wide"><label>Redirects (from = to per line)</label><textarea rows="2" placeholder="/old = /new" :value="editRedirects()" @input="editRedirects.set($event.target.value)"></textarea></div>
-          <div class="field-block wide"><label>Env vars (KEY=value per line)</label><textarea rows="3" placeholder="NODE_ENV=production" :value="editEnv()" @input="editEnv.set($event.target.value)"></textarea></div>
+          <div class="field-block wide"><label>Domain aliases (space or comma separated)<input placeholder="www.example.com, cdn.example.com" :value="editAliases()" @input="editAliases.set($event.target.value)"></label></div>
+          <div class="field-block wide"><label>Redirects (from = to per line)<textarea rows="2" placeholder="/old = /new" :value="editRedirects()" @input="editRedirects.set($event.target.value)"></textarea></label></div>
+          <div class="field-block wide"><label>Env vars (KEY=value per line)<textarea rows="3" placeholder="NODE_ENV=production" :value="editEnv()" @input="editEnv.set($event.target.value)"></textarea></label></div>
           <div class="form-actions"><button class="btn" type="submit">Save changes</button></div>
         </form>
       </div>
-    @endforeach
+    </template>
     @include('../partials/op-confirm')
   </div>
 </body>

package/dist/ui-src/pages/server/ssh-keys.stx

@@ -5,6 +5,9 @@ const server = __d?.server ?? { name: 'acme-production-app' }
 const initialKeys = __d?.sshKeys ?? []
 </script>
 <script client>
+import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+import { requestJson } from '../../functions/requestJson.ts'
+
 // Reactive SSH key management - list + add + remove, via signals + directives.
 // Seeded from build-time data (stx server→client bridge); load() reconciles
 // against the live cloud config (same describeSshKeys shape).
@@ -23,35 +26,31 @@ async function load() {
   } catch (e) { setMessage((e && e.message) || 'Could not read SSH keys.', 'bad') }
 }
 async function addKey() {
-  setMessage('Saving...', '')
-  const res = await fetch('/api/ssh-keys', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: name(), publicKey: pub() }) })
-  const data = await res.json().catch(() => ({}))
-  if (!res.ok || data.ok === false) { setMessage(data.error || 'Could not add key.', 'bad'); return }
-  keys.set(data.keys || []); name.set(''); pub.set('')
-  setMessage('Saved to cloud config. Run cloud deploy to apply.', 'ok')
+  if (busy()) return
+  busy.set(true); setMessage('Saving...', '')
+  try {
+    const data = await requestJson('/api/ssh-keys', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: name(), publicKey: pub() }) })
+    keys.set(data.keys || []); name.set(''); pub.set('')
+    setMessage('Saved to cloud config. Run cloud deploy to apply.', 'ok')
+  } catch (error) { setMessage(error?.message || 'Could not add key.', 'bad') }
+  finally { busy.set(false) }
 }
 async function removeKey(n) {
   setMessage('Removing...', '')
-  const res = await fetch('/api/ssh-keys', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: n }) })
-  const data = await res.json().catch(() => ({}))
-  if (!res.ok || data.ok === false) { setMessage(data.error || 'Could not remove key.', 'bad'); return }
-  keys.set(data.keys || [])
-  setMessage('Removed from cloud config. Run cloud deploy to apply.', 'ok')
+  try {
+    const data = await requestJson('/api/ssh-keys', { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: n }) })
+    keys.set(data.keys || [])
+    setMessage('Removed from cloud config. Run cloud deploy to apply.', 'ok')
+  } catch (error) { setMessage(error?.message || 'Could not remove key.', 'bad') }
 }
 // Removal runs through a typed-confirm bar (same pattern as firewall/team):
 // type the key name to confirm. Removing the wrong key can lock every operator
 // out of the box, so it should never be one misclick away.
-const pendingRemove = state(null)
-const typedRemove = state('')
-const canRemove = derived(() => { const k = pendingRemove(); return k !== null && typedRemove() === String(k.name) })
-function askRemove(key) { pendingRemove.set(key); typedRemove.set('') }
-function cancelRemove() { pendingRemove.set(null); typedRemove.set('') }
-async function confirmRemove() {
-  const k = pendingRemove()
-  if (!k || typedRemove() !== String(k.name)) return
-  pendingRemove.set(null); typedRemove.set('')
-  await removeKey(k.name)
-}
+const { opOutput, opShown, pending, typed, busy, confirmTok, confirmVerb, confirmDanger, confirmLabel, canRun, askOp, cancelOp, runOp } = useOpConfirm(async p => {
+  await removeKey(String(p.name))
+  return message()
+})
+function askRemove(key) { askOp('ssh-key:remove:' + key.name, key.name, 'remove SSH key ' + key.name + ' from the box', null, key.name, { name: key.name, danger: true, label: 'Remove SSH key' }) }
 
 onMount(() => { load() })
 </script>
@@ -76,7 +75,7 @@ onMount(() => { load() })
             <textarea id="ssh-public-key" rows="4" placeholder="ssh-ed25519 AAAA... chris@macbook" :value="pub()" @input="pub.set($event.target.value)" required></textarea>
           </div>
           <div class="form-actions">
-            <button class="btn" type="submit">Add key</button>
+            <button class="btn" type="submit" :disabled="busy()">Add key</button>
             <span class="msg" :class="messageKind()" role="status">{{ message() }}</span>
           </div>
         </form>
@@ -86,7 +85,7 @@ onMount(() => { load() })
       <h2>Configured keys</h2>
       <div class="panel">
         <table>
-          <thead><tr><th>Name</th><th>Type</th><th>Fingerprint</th><th>Added</th><th></th></tr></thead>
+          <thead><tr><th scope="col">Name</th><th scope="col">Type</th><th scope="col">Fingerprint</th><th scope="col">Added</th><th scope="col"></th></tr></thead>
           <tbody>
             <template :for="k in keys()">
               <tr>
@@ -100,12 +99,7 @@ onMount(() => { load() })
           </tbody>
         </table>
         <div class="compact empty" @show="keys().length === 0"><strong>No SSH keys configured</strong><span>Add a public key above to update <span class="mono">infrastructure.compute.sshKeys</span>.</span></div>
-        <div class="op-confirm" @show="pendingRemove() !== null" style="margin-top:14px">
-          <span>Type <b class="mono">{{ pendingRemove()?.name }}</b> to remove this key from the box:</span>
-          <input class="op-confirm-input" :value="typedRemove()" @input="typedRemove.set($event.target.value)" @keydown.enter="confirmRemove()" placeholder="confirm" autocomplete="off" aria-label="Type the key name to confirm removal">
-          <button type="button" class="btn danger sm" :disabled="!canRemove()" @click="confirmRemove()">Remove</button>
-          <button type="button" class="btn ghost sm" @click="cancelRemove()">Cancel</button>
-        </div>
+        @include('../partials/op-confirm')
         <p class="note">Keys are declarative: this page edits <span class="mono">infrastructure.compute.sshKeys</span> in cloud config. Run <span class="mono">cloud deploy</span> to apply changes to the box. Connect with <span class="mono">cloud server:ssh {{ server.name }}</span>.</p>
       </div>
     </div>