@chisquare-tech/origine-ngx-apps-services 0.2.4 → 0.4.0

package/fesm2022/chisquare-tech-origine-ngx-apps-services.mjs

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, effect, untracked, DestroyRef, ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { inject, Injectable, signal, computed, effect, untracked, DestroyRef, ChangeDetectionStrategy, Component, input, output, Directive } from '@angular/core';
 import { ApiService } from '@thescaffold/ngx-core';
 import { map, forkJoin, of } from 'rxjs';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
@@ -66,6 +66,10 @@ class ServicesApi {
     removeUser(project, id, name) {
         return this.api.delete(this.i(project, id, 'user/' + enc(name)));
     }
+    /** A user's scheduled rotation: every 30 to 365 days, or 0 for none (V0-22). */
+    setRotation(project, id, user, rotateEveryDays) {
+        return this.api.patch(this.i(project, id, 'user/' + enc(user)), { rotateEveryDays }).pipe(map((r) => data(r)));
+    }
     rotate(project, id, user = '', graceMinutes) {
         return this.api.post(this.i(project, id, 'rotate'), { user, graceMinutes }).pipe(map((r) => data(r)));
     }
@@ -82,6 +86,19 @@ class ServicesApi {
     management(project, id) {
         return this.api.post(this.i(project, id, 'management'), {}).pipe(map((r) => data(r)));
     }
+    /** A major version upgrade (V8-01): in place or into a new instance, now or in the maintenance window. */
+    upgrade(project, id, body) {
+        return this.api.post(this.i(project, id, 'upgrade'), body).pipe(map((r) => data(r)));
+    }
+    cancelUpgrade(project, id) {
+        return this.api.delete(this.i(project, id, 'upgrade')).pipe(map((r) => data(r)));
+    }
+    addExtension(project, id, database, name) {
+        return this.api.post(this.i(project, id, 'database/' + enc(database) + '/extension'), { name }).pipe(map((r) => data(r)));
+    }
+    removeExtension(project, id, database, name) {
+        return this.api.delete(this.i(project, id, 'database/' + enc(database) + '/extension/' + enc(name))).pipe(map((r) => data(r)));
+    }
     restore(project, id, body) {
         return this.api.post(this.i(project, id, 'restore'), body).pipe(map((r) => data(r)));
     }
@@ -308,7 +325,8 @@ class ServicesListPage {
         this.backups = backupsLine;
         this.price = money;
         this.rows = computed(() => this.list().items.filter((s) => !s.deletedAt || s.state === 'Deleting'), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-        this.canManage = computed(() => this.host.project()?.capabilities.includes('resources.manage') ?? false, ...(ngDevMode ? [{ debugName: "canManage" }] : /* istanbul ignore next */ []));
+        /** services.instance.create in some environment (V4-01). */
+        this.canManage = computed(() => !!this.host.project() && (this.host.can('services.instance.create', 'unprotected') || this.host.can('services.instance.create', 'protected')), ...(ngDevMode ? [{ debugName: "canManage" }] : /* istanbul ignore next */ []));
         this.quotaLine = computed(() => {
             const q = this.list().quota;
             if (!q)
@@ -380,8 +398,8 @@ class ServicesListPage {
       @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
       @if (created(); as c) {<div class="o-note" [class.o-grn]="c.running" role="status" data-testid="svc-created">{{ c.text }}</div>}
       <div class="o-card" style="overflow-x:auto">
-        <div class="o-tbl" style="min-width:860px">
-          <div class="o-thead"><div class="o-tr"><div class="o-th">Name</div><div class="o-th">Engine</div><div class="o-th">Plan</div><div class="o-th">Environment</div><div class="o-th">State</div><div class="o-th">Attached to</div><div class="o-th">Backups</div><div class="o-th o-num">Monthly</div></div></div>
+        <div class="o-tbl" style="min-width:960px">
+          <div class="o-thead"><div class="o-tr"><div class="o-th">Name</div><div class="o-th">Engine</div><div class="o-th">Plan</div><div class="o-th">Environment</div><div class="o-th">Region</div><div class="o-th">State</div><div class="o-th">Attached to</div><div class="o-th">Backups</div><div class="o-th o-num">Monthly</div></div></div>
           <div class="o-tbody">
             @for (v of rows(); track v.id) {
               <div class="o-tr o-click" (click)="open(v)" (keydown.enter)="open(v)" tabindex="0" role="link" [attr.data-testid]="'svc-row-' + v.name">
@@ -389,6 +407,7 @@ class ServicesListPage {
                 <div class="o-td"><span class="o-flex"><span class="o-sq" [style.background]="colour(v.engine)"></span>{{ v.engineName }} {{ v.version }}</span></div>
                 <div class="o-td o-mut o-sm">{{ v.plan }} · {{ v.planLabel.split(' · ').slice(0, 2).join(' · ') }} · {{ v.diskGb }} GB</div>
                 <div class="o-td o-mut">{{ v.environment || 'shared' }}</div>
+                <div class="o-td o-mut o-sm" [attr.data-testid]="'svc-region-' + v.name">{{ v.regionName || v.region || '—' }}</div>
                 <div class="o-td"><span [class]="chip(v.state)" [attr.title]="v.message || null">{{ v.state }}</span></div>
                 <div class="o-td o-sm">{{ v.attached.length ? v.attached.join(', ') : '—' }}</div>
                 <div class="o-td o-faint o-sm">{{ backups(v) }}</div>
@@ -430,8 +449,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
       @if (created(); as c) {<div class="o-note" [class.o-grn]="c.running" role="status" data-testid="svc-created">{{ c.text }}</div>}
       <div class="o-card" style="overflow-x:auto">
-        <div class="o-tbl" style="min-width:860px">
-          <div class="o-thead"><div class="o-tr"><div class="o-th">Name</div><div class="o-th">Engine</div><div class="o-th">Plan</div><div class="o-th">Environment</div><div class="o-th">State</div><div class="o-th">Attached to</div><div class="o-th">Backups</div><div class="o-th o-num">Monthly</div></div></div>
+        <div class="o-tbl" style="min-width:960px">
+          <div class="o-thead"><div class="o-tr"><div class="o-th">Name</div><div class="o-th">Engine</div><div class="o-th">Plan</div><div class="o-th">Environment</div><div class="o-th">Region</div><div class="o-th">State</div><div class="o-th">Attached to</div><div class="o-th">Backups</div><div class="o-th o-num">Monthly</div></div></div>
           <div class="o-tbody">
             @for (v of rows(); track v.id) {
               <div class="o-tr o-click" (click)="open(v)" (keydown.enter)="open(v)" tabindex="0" role="link" [attr.data-testid]="'svc-row-' + v.name">
@@ -439,6 +458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 <div class="o-td"><span class="o-flex"><span class="o-sq" [style.background]="colour(v.engine)"></span>{{ v.engineName }} {{ v.version }}</span></div>
                 <div class="o-td o-mut o-sm">{{ v.plan }} · {{ v.planLabel.split(' · ').slice(0, 2).join(' · ') }} · {{ v.diskGb }} GB</div>
                 <div class="o-td o-mut">{{ v.environment || 'shared' }}</div>
+                <div class="o-td o-mut o-sm" [attr.data-testid]="'svc-region-' + v.name">{{ v.regionName || v.region || '—' }}</div>
                 <div class="o-td"><span [class]="chip(v.state)" [attr.title]="v.message || null">{{ v.state }}</span></div>
                 <div class="o-td o-sm">{{ v.attached.length ? v.attached.join(', ') : '—' }}</div>
                 <div class="o-td o-faint o-sm">{{ backups(v) }}</div>
@@ -509,7 +529,13 @@ class ServicesNewPage {
         this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
         this.engines = computed(() => this.catalog()?.engines ?? [], ...(ngDevMode ? [{ debugName: "engines" }] : /* istanbul ignore next */ []));
         this.plans = computed(() => this.catalog()?.plans ?? [], ...(ngDevMode ? [{ debugName: "plans" }] : /* istanbul ignore next */ []));
-        this.region = computed(() => this.host.project()?.region || "Your organization's region", ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+        /** The regions on offer (D-54), the organization's picked for you; with one, the region is text. */
+        this.regions = computed(() => this.host.regions?.() ?? [], ...(ngDevMode ? [{ debugName: "regions" }] : /* istanbul ignore next */ []));
+        this.regionId = signal('', ...(ngDevMode ? [{ debugName: "regionId" }] : /* istanbul ignore next */ []));
+        this.region = computed(() => {
+            const r = this.regions().find((x) => x.id === this.regionId());
+            return r?.name || this.host.project()?.region || "Your organization's region";
+        }, ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
         this.versionLabel = computed(() => this.engine()?.versions.find((v) => v.id === this.version())?.label ?? this.version(), ...(ngDevMode ? [{ debugName: "versionLabel" }] : /* istanbul ignore next */ []));
         this.envs = computed(() => {
             const set = new Set(['production', 'staging']);
@@ -532,6 +558,11 @@ class ServicesNewPage {
             return '';
         }, ...(ngDevMode ? [{ debugName: "nameError" }] : /* istanbul ignore next */ []));
         this.key = '';
+        effect(() => {
+            const rs = this.regions();
+            if (!untracked(this.regionId) && rs.length)
+                this.regionId.set((rs.find((r) => r.default) ?? rs[0]).id);
+        });
         effect(() => {
             const p = this.host.project();
             if (p && p.key !== this.key) {
@@ -611,6 +642,7 @@ class ServicesNewPage {
         this.api
             .create(this.key, {
             name: this.name(), engine: e.id, version: this.version(), plan: p.id, environment: env, backupHour: this.hour(), retentionDays: this.keep(),
+            region: this.regions().length > 1 ? this.regionId() || undefined : undefined,
             attach: attach ? { app: attach, environment: env || 'production' } : undefined, standby: this.ha() && !!e.ha,
         })
             .subscribe({
@@ -672,7 +704,16 @@ class ServicesNewPage {
             </div></div>
             @if (quota()?.onlyPlan) {<span class="o-hint">The {{ quota()?.plan }} plan includes one {{ quota()?.onlyPlan }}. Upgrade in Billing for larger plans.</span>}
             <div class="o-g2">
-              <div class="o-fld"><label>Region</label><input class="o-in" [value]="region()" readonly aria-label="Region" /></div>
+              <div class="o-fld"><label for="svc-region">Region</label>
+                @if (regions().length > 1) {
+                  <select id="svc-region" class="o-in" [ngModel]="regionId()" (ngModelChange)="regionId.set($event)" data-testid="svc-region">
+                    @for (r of regions(); track r.id) {<option [value]="r.id">{{ r.name }}{{ r.default ? ' (your organization’s)' : '' }}</option>}
+                  </select>
+                  <span class="o-hint">It stays in this region. Apps attach to it only from an environment in the same region.</span>
+                } @else {
+                  <input id="svc-region" class="o-in" [value]="region()" readonly data-testid="svc-region-one" />
+                }
+              </div>
               <div class="o-fld"><label>High availability</label><div class="o-flex">
                 @if (engine()?.ha) {<button type="button" class="o-tog" [class.o-on]="ha()" (click)="ha.set(!ha())" [disabled]="!!quota()?.onlyPlan" aria-label="High availability" data-testid="svc-ha"></button>}
                 @else {<button type="button" class="o-tog" disabled aria-label="High availability"></button>}
@@ -737,7 +778,7 @@ class ServicesNewPage {
             <span class="o-k">Backups</span><span>{{ engine()?.id === 'mysql' ? 'Hourly' : 'Daily' }}{{ engine()?.pitr ? ' + PITR' : engine()?.id === 'nats' ? ' stream snapshot' : engine()?.id === 'rabbitmq' ? ' definitions' : ' RDB snapshot' }}</span>
           </div>
           <div class="o-flex" style="border-top:1px solid var(--o-line-soft);padding-top:10px"><span class="o-mut">Monthly</span><b class="o-r o-mono o-md" data-testid="svc-monthly">{{ plan() ? price(plan()!.priceCents * nodes()) + '/mo' : '' }}</b></div>
-          <span class="o-hint">Billed by instance hour. Free plan: one {{ catalog()?.freePlan || 'db-s-1' }}, hard limit.</span>
+          <span class="o-hint">Billed by instance hour. Free plan: one {{ catalog()?.freePlan || 'db-s-1' }} and no more.</span>
         </div>
       </div>
     </div>
@@ -796,7 +837,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             </div></div>
             @if (quota()?.onlyPlan) {<span class="o-hint">The {{ quota()?.plan }} plan includes one {{ quota()?.onlyPlan }}. Upgrade in Billing for larger plans.</span>}
             <div class="o-g2">
-              <div class="o-fld"><label>Region</label><input class="o-in" [value]="region()" readonly aria-label="Region" /></div>
+              <div class="o-fld"><label for="svc-region">Region</label>
+                @if (regions().length > 1) {
+                  <select id="svc-region" class="o-in" [ngModel]="regionId()" (ngModelChange)="regionId.set($event)" data-testid="svc-region">
+                    @for (r of regions(); track r.id) {<option [value]="r.id">{{ r.name }}{{ r.default ? ' (your organization’s)' : '' }}</option>}
+                  </select>
+                  <span class="o-hint">It stays in this region. Apps attach to it only from an environment in the same region.</span>
+                } @else {
+                  <input id="svc-region" class="o-in" [value]="region()" readonly data-testid="svc-region-one" />
+                }
+              </div>
               <div class="o-fld"><label>High availability</label><div class="o-flex">
                 @if (engine()?.ha) {<button type="button" class="o-tog" [class.o-on]="ha()" (click)="ha.set(!ha())" [disabled]="!!quota()?.onlyPlan" aria-label="High availability" data-testid="svc-ha"></button>}
                 @else {<button type="button" class="o-tog" disabled aria-label="High availability"></button>}
@@ -861,7 +911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             <span class="o-k">Backups</span><span>{{ engine()?.id === 'mysql' ? 'Hourly' : 'Daily' }}{{ engine()?.pitr ? ' + PITR' : engine()?.id === 'nats' ? ' stream snapshot' : engine()?.id === 'rabbitmq' ? ' definitions' : ' RDB snapshot' }}</span>
           </div>
           <div class="o-flex" style="border-top:1px solid var(--o-line-soft);padding-top:10px"><span class="o-mut">Monthly</span><b class="o-r o-mono o-md" data-testid="svc-monthly">{{ plan() ? price(plan()!.priceCents * nodes()) + '/mo' : '' }}</b></div>
-          <span class="o-hint">Billed by instance hour. Free plan: one {{ catalog()?.freePlan || 'db-s-1' }}, hard limit.</span>
+          <span class="o-hint">Billed by instance hour. Free plan: one {{ catalog()?.freePlan || 'db-s-1' }} and no more.</span>
         </div>
       </div>
     </div>
@@ -878,6 +928,8 @@ class ServiceConsoleTab {
         this.api = inject(ServicesApi);
         this.d = input.required(...(ngDevMode ? [{ debugName: "d" }] : /* istanbul ignore next */ []));
         this.projectKey = input.required(...(ngDevMode ? [{ debugName: "projectKey" }] : /* istanbul ignore next */ []));
+        /** The console and the inspector need services.connect on the instance's environment (V4-01). */
+        this.may = computed(() => (this.d().caps ?? []).includes('services.connect'), ...(ngDevMode ? [{ debugName: "may" }] : /* istanbul ignore next */ []));
         this.kind = input('sql', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
         this.sql = computed(() => this.kind() === 'sql', ...(ngDevMode ? [{ debugName: "sql" }] : /* istanbul ignore next */ []));
         this.running = computed(() => ['Running', 'Updating', 'Degraded'].includes(this.d().state), ...(ngDevMode ? [{ debugName: "running" }] : /* istanbul ignore next */ []));
@@ -964,12 +1016,14 @@ class ServiceConsoleTab {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceConsoleTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceConsoleTab, isStandalone: true, selector: "o-svc-console", inputs: { d: { classPropertyName: "d", publicName: "d", isSignal: true, isRequired: true, transformFunction: null }, projectKey: { classPropertyName: "projectKey", publicName: "projectKey", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (sql()) {
+    @if (!may()) {
+      <div class="o-empty" data-testid="svc-console-denied">Your role cannot open the console in {{ d().environment }}: it needs “Connect and move data” (services.connect).</div>
+    } @else if (sql()) {
       <div class="o-flex o-wrap">
         <span class="o-chip" [class.o-grn]="!write()" [class.o-amb]="write()" data-testid="svc-console-mode">{{ write() ? 'Read-write' : 'Read-only' }}</span>
         <span class="o-faint o-sm">1,000-row limit · 5 s statement timeout · runs as {{ runsAs() }} · audited</span>
         <span class="o-r"></span>
-        @if (d().canManage) {<label class="o-flex o-sm" style="gap:6px"><input type="checkbox" [ngModel]="write()" (ngModelChange)="write.set($event)" data-testid="svc-console-write" /> Allow writes</label>}
+        @if (may()) {<label class="o-flex o-sm" style="gap:6px"><input type="checkbox" [ngModel]="write()" (ngModelChange)="write.set($event)" data-testid="svc-console-write" /> Allow writes</label>}
         @if (d().databases.length) {
           <select class="o-in o-sm" style="width:auto" aria-label="Database" [ngModel]="db() || d().databases[0]?.name" (ngModelChange)="db.set($event)" data-testid="svc-console-db">
             @for (x of d().databases; track x.name) {<option [value]="x.name">{{ x.name }}</option>}
@@ -1027,12 +1081,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     imports: [FormsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (sql()) {
+    @if (!may()) {
+      <div class="o-empty" data-testid="svc-console-denied">Your role cannot open the console in {{ d().environment }}: it needs “Connect and move data” (services.connect).</div>
+    } @else if (sql()) {
       <div class="o-flex o-wrap">
         <span class="o-chip" [class.o-grn]="!write()" [class.o-amb]="write()" data-testid="svc-console-mode">{{ write() ? 'Read-write' : 'Read-only' }}</span>
         <span class="o-faint o-sm">1,000-row limit · 5 s statement timeout · runs as {{ runsAs() }} · audited</span>
         <span class="o-r"></span>
-        @if (d().canManage) {<label class="o-flex o-sm" style="gap:6px"><input type="checkbox" [ngModel]="write()" (ngModelChange)="write.set($event)" data-testid="svc-console-write" /> Allow writes</label>}
+        @if (may()) {<label class="o-flex o-sm" style="gap:6px"><input type="checkbox" [ngModel]="write()" (ngModelChange)="write.set($event)" data-testid="svc-console-write" /> Allow writes</label>}
         @if (d().databases.length) {
           <select class="o-in o-sm" style="width:auto" aria-label="Database" [ngModel]="db() || d().databases[0]?.name" (ngModelChange)="db.set($event)" data-testid="svc-console-db">
             @for (x of d().databases; track x.name) {<option [value]="x.name">{{ x.name }}</option>}
@@ -1105,6 +1161,10 @@ class ServiceDumpsCard {
         this.size = bytes;
         this.when = (s) => when(s);
     }
+    /** Whether the caller holds capability id on the instance's environment (V4-01). */
+    may(id) {
+        return (this.d().caps ?? []).includes(id);
+    }
     hasBackup() {
         return (this.d().backups ?? []).some((b) => b.phase === 'completed');
     }
@@ -1165,7 +1225,7 @@ class ServiceDumpsCard {
     <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-fork-card">
       <b>Fork for staging</b>
       <span class="o-hint">Copy from the latest backup into a new instance. {{ d().name }} keeps running untouched.</span>
-      @if (d().canManage) {
+      @if (may('services.data.export')) {
         <div class="o-flex o-wrap">
           <select class="o-in o-sm" style="width:auto" aria-label="Environment" [ngModel]="env()" (ngModelChange)="env.set($event)" data-testid="svc-fork-env">
             @for (e of envs; track e) {<option [value]="e">{{ e }}</option>}
@@ -1177,18 +1237,18 @@ class ServiceDumpsCard {
     </div>
     @if (dumps()) {
       <div class="o-card" data-testid="svc-dumps">
-        <div class="o-ch"><b>Dumps</b>@if (d().canManage) {<button type="button" class="o-btn o-xs o-r" (click)="exportDump()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-export">{{ tool() }}</button>}</div>
+        <div class="o-ch"><b>Dumps</b>@if (may('services.data.export')) {<button type="button" class="o-btn o-xs o-r" (click)="exportDump()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-export">{{ tool() }}</button>}</div>
         @for (x of d().dumps; track x.id) {
           <div class="o-row" [attr.data-testid]="'svc-dump-' + x.id">
             <span [class]="'o-dot ' + dot(x)"></span>
             <span class="o-sm o-ell" style="flex:1">{{ x.kind === 'export' ? 'Export of ' + x.database : 'Import into ' + x.database + (x.remote ? ' from ' + x.remote : x.fileName ? ' from ' + x.fileName : '') }}</span>
             <span class="o-faint o-xs">{{ x.phase === 'completed' ? (x.bytes ? size(x.bytes) + ' · ' : '') + when(x.stoppedAt || x.createdAt) : x.phase }}</span>
-            @if (x.kind === 'export' && x.phase === 'completed') {<button type="button" class="o-lnk" (click)="download(x)" [disabled]="busy()" data-testid="svc-dump-download">Download</button>}
-            @if (d().canManage && x.phase !== 'running') {<button type="button" class="o-lnk o-faint" (click)="remove(x)" [attr.aria-label]="'Delete dump ' + x.id" [disabled]="busy()">×</button>}
+            @if (x.kind === 'export' && x.phase === 'completed' && may('services.data.export')) {<button type="button" class="o-lnk" (click)="download(x)" [disabled]="busy()" data-testid="svc-dump-download">Download</button>}
+            @if (may('services.data.export') && x.phase !== 'running') {<button type="button" class="o-lnk o-faint" (click)="remove(x)" [attr.aria-label]="'Delete dump ' + x.id" [disabled]="busy()">×</button>}
           </div>
           @if (x.error) {<div class="o-row o-sm" style="color:var(--o-bad-tx)">{{ x.error }}</div>}
         } @empty {<div class="o-empty">No dumps yet. Export one to download it, or import a dump into {{ d().name }}.</div>}
-        @if (d().canManage) {
+        @if (may('services.data.import')) {
           <div class="o-cb o-col" style="gap:8px;border-top:1px solid var(--o-line-2)">
             <b class="o-sm">Import</b>
             <div class="o-flex o-wrap">
@@ -1217,7 +1277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-fork-card">
       <b>Fork for staging</b>
       <span class="o-hint">Copy from the latest backup into a new instance. {{ d().name }} keeps running untouched.</span>
-      @if (d().canManage) {
+      @if (may('services.data.export')) {
         <div class="o-flex o-wrap">
           <select class="o-in o-sm" style="width:auto" aria-label="Environment" [ngModel]="env()" (ngModelChange)="env.set($event)" data-testid="svc-fork-env">
             @for (e of envs; track e) {<option [value]="e">{{ e }}</option>}
@@ -1229,18 +1289,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     </div>
     @if (dumps()) {
       <div class="o-card" data-testid="svc-dumps">
-        <div class="o-ch"><b>Dumps</b>@if (d().canManage) {<button type="button" class="o-btn o-xs o-r" (click)="exportDump()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-export">{{ tool() }}</button>}</div>
+        <div class="o-ch"><b>Dumps</b>@if (may('services.data.export')) {<button type="button" class="o-btn o-xs o-r" (click)="exportDump()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-export">{{ tool() }}</button>}</div>
         @for (x of d().dumps; track x.id) {
           <div class="o-row" [attr.data-testid]="'svc-dump-' + x.id">
             <span [class]="'o-dot ' + dot(x)"></span>
             <span class="o-sm o-ell" style="flex:1">{{ x.kind === 'export' ? 'Export of ' + x.database : 'Import into ' + x.database + (x.remote ? ' from ' + x.remote : x.fileName ? ' from ' + x.fileName : '') }}</span>
             <span class="o-faint o-xs">{{ x.phase === 'completed' ? (x.bytes ? size(x.bytes) + ' · ' : '') + when(x.stoppedAt || x.createdAt) : x.phase }}</span>
-            @if (x.kind === 'export' && x.phase === 'completed') {<button type="button" class="o-lnk" (click)="download(x)" [disabled]="busy()" data-testid="svc-dump-download">Download</button>}
-            @if (d().canManage && x.phase !== 'running') {<button type="button" class="o-lnk o-faint" (click)="remove(x)" [attr.aria-label]="'Delete dump ' + x.id" [disabled]="busy()">×</button>}
+            @if (x.kind === 'export' && x.phase === 'completed' && may('services.data.export')) {<button type="button" class="o-lnk" (click)="download(x)" [disabled]="busy()" data-testid="svc-dump-download">Download</button>}
+            @if (may('services.data.export') && x.phase !== 'running') {<button type="button" class="o-lnk o-faint" (click)="remove(x)" [attr.aria-label]="'Delete dump ' + x.id" [disabled]="busy()">×</button>}
           </div>
           @if (x.error) {<div class="o-row o-sm" style="color:var(--o-bad-tx)">{{ x.error }}</div>}
         } @empty {<div class="o-empty">No dumps yet. Export one to download it, or import a dump into {{ d().name }}.</div>}
-        @if (d().canManage) {
+        @if (may('services.data.import')) {
           <div class="o-cb o-col" style="gap:8px;border-top:1px solid var(--o-line-2)">
             <b class="o-sm">Import</b>
             <div class="o-flex o-wrap">
@@ -1538,6 +1598,351 @@ function show(f) {
     return num(f.value);
 }
 
+/** Runs an action with a busy flag; errors go to failed. */
+class Card {
+    constructor() {
+        this.api = inject(ServicesApi);
+        this.d = input.required(...(ngDevMode ? [{ debugName: "d" }] : /* istanbul ignore next */ []));
+        this.projectKey = input.required(...(ngDevMode ? [{ debugName: "projectKey" }] : /* istanbul ignore next */ []));
+        this.done = output();
+        this.failed = output();
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.when = (s) => when(s);
+    }
+    may(id) {
+        return (this.d().caps ?? []).includes(id);
+    }
+    go(obs, ok, fail) {
+        this.busy.set(true);
+        obs.subscribe({
+            next: (v) => {
+                this.busy.set(false);
+                ok(v);
+            },
+            error: (e) => {
+                this.busy.set(false);
+                this.failed.emit(apiMessage(e, fail));
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: Card, isStandalone: true, inputs: { d: { classPropertyName: "d", publicName: "d", isSignal: true, isRequired: true, transformFunction: null }, projectKey: { classPropertyName: "projectKey", publicName: "projectKey", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { done: "done", failed: "failed" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Card, decorators: [{
+            type: Directive
+        }], propDecorators: { d: [{ type: i0.Input, args: [{ isSignal: true, alias: "d", required: true }] }], projectKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "projectKey", required: true }] }], done: [{ type: i0.Output, args: ["done"] }], failed: [{ type: i0.Output, args: ["failed"] }] } });
+const UPGRADE_STATE = {
+    scheduled: 'Scheduled', 'backing-up': 'Taking the pre-upgrade backup', upgrading: 'Upgrading', testing: 'Building the new instance',
+    ready: 'Ready to swap', done: 'Done', failed: 'Failed', canceled: 'Canceled',
+};
+// Settings › Major version (V8-01, SVC-08): what the instance can be upgraded to and how (in
+// place, or into a new instance for testing), now or in the maintenance window with a week's
+// notice; the upgrade in progress, with its pre-upgrade backup (the way back); refusals with the reason.
+class ServiceUpgradeCard extends Card {
+    constructor() {
+        super(...arguments);
+        this.router = inject(Router);
+        this.host = inject(ServicesHost);
+        this.method = signal('in-place', ...(ngDevMode ? [{ debugName: "method" }] : /* istanbul ignore next */ []));
+        this.whenTo = signal('window', ...(ngDevMode ? [{ debugName: "whenTo" }] : /* istanbul ignore next */ []));
+    }
+    open(s) {
+        return !['done', 'failed', 'canceled'].includes(s);
+    }
+    stateLabel(s) {
+        return UPGRADE_STATE[s] ?? s;
+    }
+    chip(s) {
+        return s === 'done' || s === 'ready' ? 'o-grn' : s === 'failed' ? 'o-red' : s === 'canceled' || s === 'scheduled' ? 'o-amb' : 'o-blu';
+    }
+    start() {
+        const u = this.d().upgrade;
+        const m = u?.offer.methods.includes(this.method()) ? this.method() : (u?.offer.methods[0] ?? 'in-place');
+        this.go(this.api.upgrade(this.projectKey(), this.d().id, { version: u?.offer.to, method: m, when: this.whenTo() }), (x) => {
+            const c = x.upgrade?.current;
+            this.done.emit(c?.scheduled ? `Upgrade to ${c.to} scheduled for ${when(c.at)}; the people concerned are told now.` : `Upgrading to ${c?.to}: the pre-upgrade backup runs first.`);
+        }, 'The upgrade could not be started.');
+    }
+    cancel() {
+        this.go(this.api.cancelUpgrade(this.projectKey(), this.d().id), () => this.done.emit('Upgrade canceled.'), 'The upgrade could not be canceled.');
+    }
+    openTarget(name) {
+        this.router.navigate(this.host.link('services/' + name));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceUpgradeCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceUpgradeCard, isStandalone: true, selector: "o-svc-upgrade", usesInheritance: true, ngImport: i0, template: `
+    @let u = d().upgrade;
+    <div class="o-card" data-testid="svc-upgrade">
+      <div class="o-ch"><b>Major version</b><span class="o-r">{{ d().engineName }} {{ u?.running || d().version }}</span></div>
+      <div class="o-cb o-col" style="gap:8px">
+        @if (u?.current; as c) {
+          <div class="o-flex o-wrap" data-testid="svc-upgrade-current">
+            <span [class]="'o-chip ' + chip(c.state)">{{ stateLabel(c.state) }}</span>
+            <span class="o-sm">{{ c.from }} to {{ c.to }}, {{ c.method === 'new-instance' ? 'into a new instance' : 'in place' }}</span>
+            @if (c.state === 'scheduled') {<span class="o-faint o-sm">starts {{ when(c.at) }}</span>}
+            @if (open(c.state) && (c.state === 'scheduled' || c.state === 'backing-up') && may('services.instance.configure')) {
+              <button type="button" class="o-btn o-sm o-r" (click)="cancel()" [disabled]="busy()" data-testid="svc-upgrade-cancel">Cancel upgrade</button>
+            }
+            @if (c.state === 'ready' && c.targetName) {<button type="button" class="o-btn o-sm o-r" (click)="openTarget(c.targetName)">Open {{ c.targetName }}</button>}
+          </div>
+          @if (c.message) {<span class="o-hint">{{ c.message }}</span>}
+          @if (c.backupName && c.state !== 'canceled') {<span class="o-faint o-xs">Pre-upgrade backup: {{ c.backupName }}. To go back, restore it into a new instance on {{ c.from }}.</span>}
+        }
+        @if (!u?.current || !open(u!.current!.state)) {
+          @if (u?.offer?.refused) {
+            <span class="o-hint" data-testid="svc-upgrade-refused">{{ u!.offer.refused }}</span>
+          } @else if (u?.offer?.to) {
+            <span class="o-sm">Upgrade to <b>{{ d().engineName }} {{ u!.offer.to }}</b></span>
+            @for (n of u!.offer.notes; track n) {<span class="o-faint o-xs">{{ n }}</span>}
+            @if (may('services.instance.configure')) {
+              <div class="o-flex o-wrap">
+                <select class="o-in o-sm" style="width:auto" aria-label="How" [ngModel]="method()" (ngModelChange)="method.set($event)" data-testid="svc-upgrade-method">
+                  @for (m of u!.offer.methods; track m) {<option [value]="m">{{ m === 'new-instance' ? 'Into a new instance, for testing' : 'In place' }}</option>}
+                </select>
+                <select class="o-in o-sm" style="width:auto" aria-label="When" [ngModel]="whenTo()" (ngModelChange)="whenTo.set($event)" data-testid="svc-upgrade-when">
+                  <option value="window">In the maintenance window, with a week's notice</option>
+                  <option value="now">Now</option>
+                </select>
+                <button type="button" class="o-btn o-sm o-dark o-r" (click)="start()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-upgrade-go">Upgrade to {{ u!.offer.to }}</button>
+              </div>
+              <span class="o-faint o-xs">A backup is taken first and kept until you delete it.</span>
+            }
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceUpgradeCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-svc-upgrade',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @let u = d().upgrade;
+    <div class="o-card" data-testid="svc-upgrade">
+      <div class="o-ch"><b>Major version</b><span class="o-r">{{ d().engineName }} {{ u?.running || d().version }}</span></div>
+      <div class="o-cb o-col" style="gap:8px">
+        @if (u?.current; as c) {
+          <div class="o-flex o-wrap" data-testid="svc-upgrade-current">
+            <span [class]="'o-chip ' + chip(c.state)">{{ stateLabel(c.state) }}</span>
+            <span class="o-sm">{{ c.from }} to {{ c.to }}, {{ c.method === 'new-instance' ? 'into a new instance' : 'in place' }}</span>
+            @if (c.state === 'scheduled') {<span class="o-faint o-sm">starts {{ when(c.at) }}</span>}
+            @if (open(c.state) && (c.state === 'scheduled' || c.state === 'backing-up') && may('services.instance.configure')) {
+              <button type="button" class="o-btn o-sm o-r" (click)="cancel()" [disabled]="busy()" data-testid="svc-upgrade-cancel">Cancel upgrade</button>
+            }
+            @if (c.state === 'ready' && c.targetName) {<button type="button" class="o-btn o-sm o-r" (click)="openTarget(c.targetName)">Open {{ c.targetName }}</button>}
+          </div>
+          @if (c.message) {<span class="o-hint">{{ c.message }}</span>}
+          @if (c.backupName && c.state !== 'canceled') {<span class="o-faint o-xs">Pre-upgrade backup: {{ c.backupName }}. To go back, restore it into a new instance on {{ c.from }}.</span>}
+        }
+        @if (!u?.current || !open(u!.current!.state)) {
+          @if (u?.offer?.refused) {
+            <span class="o-hint" data-testid="svc-upgrade-refused">{{ u!.offer.refused }}</span>
+          } @else if (u?.offer?.to) {
+            <span class="o-sm">Upgrade to <b>{{ d().engineName }} {{ u!.offer.to }}</b></span>
+            @for (n of u!.offer.notes; track n) {<span class="o-faint o-xs">{{ n }}</span>}
+            @if (may('services.instance.configure')) {
+              <div class="o-flex o-wrap">
+                <select class="o-in o-sm" style="width:auto" aria-label="How" [ngModel]="method()" (ngModelChange)="method.set($event)" data-testid="svc-upgrade-method">
+                  @for (m of u!.offer.methods; track m) {<option [value]="m">{{ m === 'new-instance' ? 'Into a new instance, for testing' : 'In place' }}</option>}
+                </select>
+                <select class="o-in o-sm" style="width:auto" aria-label="When" [ngModel]="whenTo()" (ngModelChange)="whenTo.set($event)" data-testid="svc-upgrade-when">
+                  <option value="window">In the maintenance window, with a week's notice</option>
+                  <option value="now">Now</option>
+                </select>
+                <button type="button" class="o-btn o-sm o-dark o-r" (click)="start()" [disabled]="busy() || d().state !== 'Running'" data-testid="svc-upgrade-go">Upgrade to {{ u!.offer.to }}</button>
+              </div>
+              <span class="o-faint o-xs">A backup is taken first and kept until you delete it.</span>
+            }
+          }
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+// Backups › Copies in another region (V8-02, O10): opt-in, naming where the copies go; the
+// last copy; a restore from the copy into a new instance in that region.
+class ServiceCopiesCard extends Card {
+    constructor() {
+        super(...arguments);
+        this.router = inject(Router);
+        this.host = inject(ServicesHost);
+        this.target = signal('', ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        this.backup = signal('', ...(ngDevMode ? [{ debugName: "backup" }] : /* istanbul ignore next */ []));
+        this.size = bytes;
+    }
+    regionName(id) {
+        return this.d().copy?.offered.find((r) => r.id === id)?.name ?? id;
+    }
+    /** Completed backups the last copy holds. */
+    copied() {
+        const through = this.d().copy?.last?.through;
+        if (!through)
+            return [];
+        return (this.d().backups ?? []).filter((b) => b.phase === 'completed' && b.stoppedAt && b.stoppedAt <= through);
+    }
+    set(region) {
+        const name = region ? this.regionName(region) : this.d().copy?.regionName;
+        this.go(this.api.update(this.projectKey(), this.d().id, { copyRegion: region }), () => {
+            this.target.set('');
+            this.done.emit(region ? `Backups of ${this.d().name} are now copied to ${name}.` : `Copies stopped; the copies in ${name} are deleted.`);
+        }, 'The copies could not be changed.');
+    }
+    restore() {
+        const b = this.backup() || this.copied().at(-1)?.name || '';
+        const c = this.d().copy;
+        if (!b || !c)
+            return;
+        this.go(this.api.restore(this.projectKey(), this.d().id, { backup: b, region: c.region }), (x) => this.router.navigate(this.host.link('services/' + x.name)), 'The restore could not be started.');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceCopiesCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceCopiesCard, isStandalone: true, selector: "o-svc-copies", usesInheritance: true, ngImport: i0, template: `
+    @let c = d().copy;
+    @if (c) {
+      <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-copies">
+        <b>Copies in another region</b>
+        @if (c.region) {
+          <span class="o-sm">Backups are copied from {{ d().regionName || d().region }} to <b>{{ c.regionName }}</b>.</span>
+          @if (c.last; as l) {
+            <span class="o-faint o-xs" data-testid="svc-copies-last">{{ l.error ? 'Last copy failed: ' + l.error : 'Last copied ' + when(l.at) + ' · ' + l.objects + ' objects · ' + size(l.bytes) }}</span>
+          } @else {<span class="o-faint o-xs">The first copy is on its way.</span>}
+          <div class="o-flex o-wrap">
+            @if (may('services.data.import') && c.last?.through) {
+              <select class="o-in o-sm" style="width:auto" aria-label="Backup" [ngModel]="backup()" (ngModelChange)="backup.set($event)" data-testid="svc-copies-backup">
+                @for (b of copied(); track b.name) {<option [value]="b.name">{{ when(b.startedAt) }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm" (click)="restore()" [disabled]="busy() || !copied().length" data-testid="svc-copies-restore">Restore in {{ c.regionName }}</button>
+            }
+            @if (may('services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="set('')" [disabled]="busy()" data-testid="svc-copies-off">Stop copying</button>}
+          </div>
+          <span class="o-faint o-xs">Stopping deletes the copies in {{ c.regionName }}.</span>
+        } @else {
+          <span class="o-hint">Keep a copy of every backup in another region, to restore there if this region is lost. The copies leave {{ d().regionName || d().region }}.</span>
+          @if (may('services.instance.configure') && c.offered.length) {
+            <div class="o-flex o-wrap">
+              <select class="o-in o-sm" style="width:auto" aria-label="Copy to" [ngModel]="target()" (ngModelChange)="target.set($event)" data-testid="svc-copies-region">
+                <option value="">Choose a region</option>
+                @for (r of c.offered; track r.id) {<option [value]="r.id">{{ r.name }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm o-r" (click)="set(target())" [disabled]="busy() || !target()" data-testid="svc-copies-on">{{ target() ? 'Copy backups to ' + regionName(target()) : 'Copy backups' }}</button>
+            </div>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceCopiesCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-svc-copies',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @let c = d().copy;
+    @if (c) {
+      <div class="o-card o-cb o-col" style="gap:8px" data-testid="svc-copies">
+        <b>Copies in another region</b>
+        @if (c.region) {
+          <span class="o-sm">Backups are copied from {{ d().regionName || d().region }} to <b>{{ c.regionName }}</b>.</span>
+          @if (c.last; as l) {
+            <span class="o-faint o-xs" data-testid="svc-copies-last">{{ l.error ? 'Last copy failed: ' + l.error : 'Last copied ' + when(l.at) + ' · ' + l.objects + ' objects · ' + size(l.bytes) }}</span>
+          } @else {<span class="o-faint o-xs">The first copy is on its way.</span>}
+          <div class="o-flex o-wrap">
+            @if (may('services.data.import') && c.last?.through) {
+              <select class="o-in o-sm" style="width:auto" aria-label="Backup" [ngModel]="backup()" (ngModelChange)="backup.set($event)" data-testid="svc-copies-backup">
+                @for (b of copied(); track b.name) {<option [value]="b.name">{{ when(b.startedAt) }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm" (click)="restore()" [disabled]="busy() || !copied().length" data-testid="svc-copies-restore">Restore in {{ c.regionName }}</button>
+            }
+            @if (may('services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="set('')" [disabled]="busy()" data-testid="svc-copies-off">Stop copying</button>}
+          </div>
+          <span class="o-faint o-xs">Stopping deletes the copies in {{ c.regionName }}.</span>
+        } @else {
+          <span class="o-hint">Keep a copy of every backup in another region, to restore there if this region is lost. The copies leave {{ d().regionName || d().region }}.</span>
+          @if (may('services.instance.configure') && c.offered.length) {
+            <div class="o-flex o-wrap">
+              <select class="o-in o-sm" style="width:auto" aria-label="Copy to" [ngModel]="target()" (ngModelChange)="target.set($event)" data-testid="svc-copies-region">
+                <option value="">Choose a region</option>
+                @for (r of c.offered; track r.id) {<option [value]="r.id">{{ r.name }}</option>}
+              </select>
+              <button type="button" class="o-btn o-sm o-r" (click)="set(target())" [disabled]="busy() || !target()" data-testid="svc-copies-on">{{ target() ? 'Copy backups to ' + regionName(target()) : 'Copy backups' }}</button>
+            </div>
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+// Settings › Storage (V8-04, D-30): the disk grows by itself near full, up to a limit, where the
+// volumes can grow in place.
+class ServiceStorageCard extends Card {
+    save(body) {
+        this.go(this.api.update(this.projectKey(), this.d().id, body), () => this.done.emit('Storage saved.'), 'Storage could not be saved.');
+    }
+    cap(ev) {
+        const v = Math.round(+ev.target.value);
+        if (!Number.isFinite(v))
+            return;
+        this.save({ autoGrowMaxGb: v === this.d().storage?.limitGb && !this.d().storage?.maxGb ? 0 : v });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceStorageCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceStorageCard, isStandalone: true, selector: "o-svc-storage", usesInheritance: true, ngImport: i0, template: `
+    @let s = d().storage;
+    @if (s) {
+      <div class="o-card" data-testid="svc-storage">
+        <div class="o-ch"><b>Storage</b><span class="o-r">{{ d().diskGb }} GB</span></div>
+        <div class="o-cb o-col" style="gap:8px">
+          <label class="o-flex o-sm"><input type="checkbox" [ngModel]="s.autoGrow" (ngModelChange)="save({ autoGrow: $event })" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow" />Grow the disk automatically when it is {{ s.atPercent }}% full</label>
+          @if (s.autoGrow) {
+            <div class="o-flex o-wrap">
+              <span class="o-sm">Up to</span>
+              <input class="o-in o-sm" style="width:90px" type="number" [min]="d().diskGb" step="5" aria-label="Up to GB" [ngModel]="s.maxGb || s.limitGb" (change)="cap($event)" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow-max" />
+              <span class="o-sm">GB</span>
+              @if (s.grownAt) {<span class="o-faint o-xs o-r">last grew {{ when(s.grownAt) }}</span>}
+            </div>
+            <span class="o-faint o-xs">It grows by a quarter, at least 10 GB, without downtime; the people concerned are told each time.</span>
+          }
+          @if (s.expandable === false) {<span class="o-hint" data-testid="svc-autogrow-fixed">The volumes in this region cannot grow in place: you are told when the disk is nearly full. {{ s.message }}</span>}
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceStorageCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-svc-storage',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @let s = d().storage;
+    @if (s) {
+      <div class="o-card" data-testid="svc-storage">
+        <div class="o-ch"><b>Storage</b><span class="o-r">{{ d().diskGb }} GB</span></div>
+        <div class="o-cb o-col" style="gap:8px">
+          <label class="o-flex o-sm"><input type="checkbox" [ngModel]="s.autoGrow" (ngModelChange)="save({ autoGrow: $event })" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow" />Grow the disk automatically when it is {{ s.atPercent }}% full</label>
+          @if (s.autoGrow) {
+            <div class="o-flex o-wrap">
+              <span class="o-sm">Up to</span>
+              <input class="o-in o-sm" style="width:90px" type="number" [min]="d().diskGb" step="5" aria-label="Up to GB" [ngModel]="s.maxGb || s.limitGb" (change)="cap($event)" [disabled]="busy() || !may('services.instance.configure')" data-testid="svc-autogrow-max" />
+              <span class="o-sm">GB</span>
+              @if (s.grownAt) {<span class="o-faint o-xs o-r">last grew {{ when(s.grownAt) }}</span>}
+            </div>
+            <span class="o-faint o-xs">It grows by a quarter, at least 10 GB, without downtime; the people concerned are told each time.</span>
+          }
+          @if (s.expandable === false) {<span class="o-hint" data-testid="svc-autogrow-fixed">The volumes in this region cannot grow in place: you are told when the disk is nearly full. {{ s.message }}</span>}
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
 const TABS = [
     { id: 'overview', label: 'Overview' }, { id: 'users', label: 'Databases and users' }, { id: 'backups', label: 'Backups' }, { id: 'metrics', label: 'Metrics' },
     { id: 'logs', label: 'Logs' }, { id: 'console', label: 'Console' }, { id: 'settings', label: 'Settings' },
@@ -1603,7 +2008,16 @@ class ServicePage {
         this.engine = computed(() => this.catalog()?.engines.find((e) => e.id === this.d()?.engine) ?? null, ...(ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []));
         this.envVar = computed(() => this.engine()?.envVar ?? 'DATABASE_URL', ...(ngDevMode ? [{ debugName: "envVar" }] : /* istanbul ignore next */ []));
         this.plans = computed(() => this.catalog()?.plans ?? [], ...(ngDevMode ? [{ debugName: "plans" }] : /* istanbul ignore next */ []));
-        this.region = computed(() => this.host.project()?.region || 'your region', ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+        /** Where the instance runs (D-54): its own region, the organization's by default. */
+        this.region = computed(() => this.d()?.regionName || this.d()?.region || this.host.project()?.region || 'your region', ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+        /** The region of the chosen app's chosen environment, when deploy says (D-54). */
+        this.attRegion = computed(() => this.apps().find((a) => a.name === this.attApp())?.regions?.[this.attEnv()] ?? '', ...(ngDevMode ? [{ debugName: "attRegion" }] : /* istanbul ignore next */ []));
+        /** An app attaches only to a service in its own region (D-54). */
+        this.attOtherRegion = computed(() => {
+            const d = this.d(), r = this.attRegion();
+            return !!d?.region && !!r && r !== d.region;
+        }, ...(ngDevMode ? [{ debugName: "attOtherRegion" }] : /* istanbul ignore next */ []));
+        this.rotationPeriods = [0, 30, 60, 90, 180, 365];
         this.conn = computed(() => this.revealed()?.connection ?? this.d()?.connection ?? null, ...(ngDevMode ? [{ debugName: "conn" }] : /* istanbul ignore next */ []));
         this.snippetKeys = computed(() => {
             const s = this.conn()?.snippets ?? {};
@@ -1848,6 +2262,19 @@ class ServicePage {
             this.notice.set('Credential reveal recorded in the audit log.');
         }, 'The password could not be revealed.');
     }
+    /** Whether the caller holds capability id on the instance's environment (V4-01). */
+    has(d, id) {
+        return (d.caps ?? []).includes(id);
+    }
+    /** A user's scheduled rotation (V0-22): every 30 to 365 days, or never. */
+    setRotation(d, user, days) {
+        this.run(this.api.setRotation(this.key(), d.id, user, days), () => {
+            this.notice.set(days ? `${user}'s password now rotates every ${days} days. Attached apps redeploy with each new one; the old one stays valid until they run on it.` : `${user}'s password no longer rotates on a schedule.`);
+        }, 'The rotation schedule could not be saved.');
+    }
+    rotationLine(u) {
+        return u.rotateEveryDays && u.nextRotation ? 'next ' + shortDate(u.nextRotation) : '';
+    }
     attach(d) {
         const app = this.attApp().trim();
         const body = { app, environment: this.attEnv(), prefix: this.attPrefix().trim(), ownUser: this.attOwn(), database: d.engine === 'rabbitmq' ? this.attVhost() : undefined };
@@ -1886,6 +2313,15 @@ class ServicePage {
     removeDb(d, name) {
         this.run(this.api.removeDatabase(this.key(), d.id, name), () => this.notice.set(`Database ${name} removed.`), 'The database could not be removed.');
     }
+    /** A Postgres extension from the allow-list (V8-04, D-30); what it needs comes with it. */
+    addExt(d, db, name) {
+        if (!name)
+            return;
+        this.run(this.api.addExtension(this.key(), d.id, db, name), () => this.notice.set(`${name} is being created in ${db}.`), 'The extension could not be created.');
+    }
+    dropExt(d, db, name) {
+        this.run(this.api.removeExtension(this.key(), d.id, db, name), () => this.notice.set(`${name} is dropped from ${db}.`), 'The extension could not be dropped.');
+    }
     addUser(d) {
         const name = this.userName().trim();
         if (!name)
@@ -2071,8 +2507,8 @@ class ServicePage {
         </div>
         <div class="o-acts">
           @if (d.management && !d.deletedAt) {<button type="button" class="o-btn" (click)="openManagement(d)" [disabled]="busy() || d.state !== 'Running' && d.state !== 'Updating' && d.state !== 'Degraded'" [title]="d.management === 'read' ? 'Read-only for your role' : 'As the instance administrator'" data-testid="svc-management">Open management UI@if (d.management === 'read') {<span class="o-faint o-xs"> · read-only</span>}</button>}
-          @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="askRotate(d)" [disabled]="busy() || !d.users?.length" data-testid="svc-rotate">Rotate credentials</button>}
-          @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="setTab('settings')">Resize</button>}
+          @if (has(d, 'services.instance.configure') && !d.deletedAt) {<button type="button" class="o-btn" (click)="askRotate(d)" [disabled]="busy() || !d.users?.length" data-testid="svc-rotate">Rotate credentials</button>}
+          @if (has(d, 'services.instance.configure') && !d.deletedAt) {<button type="button" class="o-btn" (click)="setTab('settings')">Resize</button>}
           <a class="o-btn" [routerLink]="host.link('dashboards')">Dashboard</a>
         </div>
       </div>
@@ -2083,13 +2519,13 @@ class ServicePage {
       @if (d.deletedAt) {
         <div class="o-card o-cb o-flex o-wrap" style="border-color:var(--o-bad-line)" data-testid="svc-deleted">
           <div class="o-col" style="gap:2px;flex:1"><b>{{ d.name }} is scheduled for deletion</b><span class="o-hint">Purged {{ when(d.purgeAt) }}. Until then you can undo; attached apps were detached.@if (d.finalBackup) { A final backup is kept for 7 days.}</span></div>
-          @if (d.canManage) {<button type="button" class="o-btn" (click)="undelete(d)" [disabled]="busy()" data-testid="svc-undelete">Undo delete</button>}
+          @if (has(d, 'services.instance.delete')) {<button type="button" class="o-btn" (click)="undelete(d)" [disabled]="busy()" data-testid="svc-undelete">Undo delete</button>}
         </div>
       }
       @if (d.restoreOf; as src) {
         <div class="o-card o-cb o-flex o-wrap" data-testid="svc-restored">
           <div class="o-col" style="gap:2px;flex:1"><b>Restored from <a [routerLink]="host.link('services/' + src.name)">{{ src.name }}</a></b><span class="o-hint">@if (d.restorePoint) {To {{ when(d.restorePoint) }}.} @else if (d.restoreBackup) {From backup {{ d.restoreBackup }}.} {{ src.name }} is untouched.@if (src.attached.length) { Its apps: {{ src.attached.join(', ') }}.}</span></div>
-          @if (d.canManage && src.attached.length && d.state === 'Running') {<button type="button" class="o-btn" (click)="swap(d, src.name)" [disabled]="busy()" data-testid="svc-swap">Move {{ src.name }}'s apps here</button>}
+          @if (has(d, 'services.instance.configure') && src.attached.length && d.state === 'Running') {<button type="button" class="o-btn" (click)="swap(d, src.name)" [disabled]="busy()" data-testid="svc-swap">Move {{ src.name }}'s apps here</button>}
         </div>
       }
 
@@ -2113,8 +2549,8 @@ class ServicePage {
                 <span class="o-k">User</span><span class="o-mono o-sm">{{ c.user }}</span>
                 <span class="o-k">Password</span>
                 <span class="o-flex"><span class="o-mono o-sm" data-testid="svc-password">{{ revealed()?.password ?? '••••••••••••••••' }}</span>
-                  @if (d.canManage) {<button type="button" class="o-lnk" (click)="toggleReveal(d)" [disabled]="busy()" data-testid="svc-reveal">{{ revealed() ? 'Hide' : 'Reveal' }}</button>}
-                  @else {<span class="o-faint o-xs">Maintainers can reveal</span>}
+                  @if (has(d, 'services.credentials.reveal')) {<button type="button" class="o-lnk" (click)="toggleReveal(d)" [disabled]="busy()" data-testid="svc-reveal">{{ revealed() ? 'Hide' : 'Reveal' }}</button>}
+                  @else {<span class="o-faint o-xs">Your role cannot reveal credentials in {{ d.environment }}</span>}
                 </span>
                 <span class="o-k">SSL mode</span><span class="o-mono o-sm">{{ c.sslMode }}</span>
               </div>
@@ -2126,12 +2562,12 @@ class ServicePage {
           </div>
           <div class="o-col" style="gap:18px">
             <div class="o-card">
-              <div class="o-ch"><b>Attached apps</b>@if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn o-sm o-r" (click)="attachOpen.set(!attachOpen())" data-testid="svc-attach-open">Attach to app</button>}</div>
+              <div class="o-ch"><b>Attached apps</b>@if (has(d, 'services.instance.configure') && !d.deletedAt) {<button type="button" class="o-btn o-sm o-r" (click)="attachOpen.set(!attachOpen())" data-testid="svc-attach-open">Attach to app</button>}</div>
               @for (a of d.attachments; track a.id) {
                 <div class="o-row" [attr.data-testid]="'svc-att-' + a.app">
                   <span class="o-b5">{{ a.app }}</span><span class="o-faint">{{ a.environment }}</span><span class="o-chip o-mono">{{ a.prefix }}{{ envVar() }}</span>@if (a.ownUser) {<span class="o-faint o-xs o-mono" title="The app's own user">{{ a.user }}</span>}
                   <span class="o-r o-sm" [style.color]="attColour(a)" [attr.title]="a.message || null">{{ attState(a) }}</span>
-                  @if (d.canManage) {<button type="button" class="o-lnk o-faint" (click)="detach(d, a)" [attr.aria-label]="'Detach ' + a.app" [disabled]="busy()">×</button>}
+                  @if (has(d, 'services.instance.configure')) {<button type="button" class="o-lnk o-faint" (click)="detach(d, a)" [attr.aria-label]="'Detach ' + a.app" [disabled]="busy()">×</button>}
                 </div>
               } @empty {<div class="o-empty">Not attached. Attach it and the app gets {{ envVar() }} on its next release.</div>}
               @if (attachOpen()) {
@@ -2144,15 +2580,16 @@ class ServicePage {
                   @if (d.engine === 'rabbitmq' && (d.vhosts ?? []).length) {<select class="o-in o-sm" style="width:auto" aria-label="Virtual host" [ngModel]="attVhost()" (ngModelChange)="attVhost.set($event)" data-testid="svc-att-vhost"><option value="/">/</option>@for (v of d.vhosts ?? []; track v) {<option [value]="v">{{ v }}</option>}</select>}
                   <label class="o-flex o-sm" style="gap:4px" title="A user of its own for this app, read-write, removed when it is detached"><input type="checkbox" [ngModel]="attOwn()" (ngModelChange)="attOwn.set($event)" data-testid="svc-att-own" /> Own user</label>
                   <span class="o-mut o-sm">Injects {{ attPrefix() }}{{ envVar() }} and redeploys</span>
-                  <button type="button" class="o-btn o-sm o-pri o-r" (click)="attach(d)" [disabled]="busy() || !attApp()" data-testid="svc-att-go">Attach</button>
+                  <button type="button" class="o-btn o-sm o-pri o-r" (click)="attach(d)" [disabled]="busy() || !attApp() || attOtherRegion()" data-testid="svc-att-go">Attach</button>
                 </div>
+                <div class="o-cf" [class.o-red]="attOtherRegion()" data-testid="svc-att-region">@if (attOtherRegion()) {<span>{{ attApp() }}'s {{ attEnv() }} environment runs in {{ attRegion() }} and {{ d.name }} in {{ region() }}: an app attaches only to a service in its own region. Create a service in {{ attRegion() }} for it.</span>} @else {<span>Apps attach only to services in their own region: {{ d.name }} runs in {{ region() }}.</span>}</div>
               }
-              <div class="o-cf">{{ rotateNote() }}@if (openRotation(); as r) {@if (d.canManage) { · <button type="button" class="o-lnk" (click)="retire(d, r)" [disabled]="busy()">Retire the old password now</button>}}</div>
+              <div class="o-cf">{{ rotateNote() }}@if (openRotation(); as r) {@if (has(d, 'services.instance.configure')) { · <button type="button" class="o-lnk" (click)="retire(d, r)" [disabled]="busy()">Retire the old password now</button>}}</div>
             </div>
             <div class="o-card">
               <div class="o-ch"><b>Backups</b><span class="o-r">{{ d.engine === 'mysql' ? 'Hourly' : 'Daily' }} · {{ d.retentionDays }}-day retention{{ d.pitr ? ' · PITR' : '' }}</span></div>
               @for (b of backups().slice(0, 3); track b.name) {
-                <div class="o-row"><span>{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint">{{ backupNote(b) }}</span><span class="o-chip">{{ kind(b) }}</span>@if (b.phase === 'completed' && d.canManage) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore to new instance</button>}</div>
+                <div class="o-row"><span>{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint">{{ backupNote(b) }}</span><span class="o-chip">{{ kind(b) }}</span>@if (b.phase === 'completed' && has(d, 'services.data.import')) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore to new instance</button>}</div>
               } @empty {<div class="o-empty">The first backup is taken once {{ d.name }} is running.</div>}
               <div class="o-cf">{{ windowLine() }}</div>
             </div>
@@ -2163,43 +2600,54 @@ class ServicePage {
         <div class="o-g2" style="align-items:start;gap:18px">
           @if (d.engine === 'nats') {
           <div class="o-card" data-testid="svc-streams">
-            <div class="o-ch"><b>Streams</b>@if (d.canManage) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-stream-add">+ Stream</button>}</div>
+            <div class="o-ch"><b>Streams</b>@if (has(d, 'services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-stream-add">+ Stream</button>}</div>
             @if (addingDb()) {
               <div class="o-row o-wrap" style="background:var(--o-bg)"><input class="o-in o-sm o-mono" style="width:120px" placeholder="ORDERS" aria-label="Stream name" [ngModel]="dbName()" (ngModelChange)="dbName.set($event)" data-testid="svc-stream-name" /><input class="o-in o-sm o-mono" style="width:140px" placeholder="orders.>" aria-label="Subjects" [ngModel]="subjects()" (ngModelChange)="subjects.set($event)" data-testid="svc-stream-subjects" /><select class="o-in o-sm" style="width:auto" aria-label="Keep for" [ngModel]="maxAge()" (ngModelChange)="maxAge.set(+$event)">@for (k of streamAges; track k.h) {<option [ngValue]="k.h">{{ k.label }}</option>}</select><button type="button" class="o-btn o-sm o-dark" (click)="addStream(d)" [disabled]="busy() || !dbName()" data-testid="svc-stream-create">Create</button></div>
             }
             @for (st of d.streams; track st.name) {
               <div class="o-row"><span class="o-mono o-b5">{{ st.name }}</span><span class="o-faint o-sm o-mono">{{ st.subjects.join(', ') }}</span><span class="o-r o-faint o-sm">{{ st.maxAgeHours ? 'kept ' + st.maxAgeHours + ' h' : 'kept until limits' }}</span>
-                @if (d.canManage) {<button type="button" class="o-lnk o-faint" (click)="removeStream(d, st.name)" [attr.aria-label]="'Remove ' + st.name" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure')) {<button type="button" class="o-lnk o-faint" (click)="removeStream(d, st.name)" [attr.aria-label]="'Remove ' + st.name" [disabled]="busy()">×</button>}</div>
             } @empty {<div class="o-empty">No streams declared. Apps can make their own; the console lists every stream and KV bucket.</div>}
             <div class="o-cf">JetStream on the volume · {{ d.nodes > 1 ? 'replicated on 3 servers' : 'one server' }}</div>
           </div>
           } @else if (d.engine === 'rabbitmq') {
           <div class="o-card" data-testid="svc-vhosts">
-            <div class="o-ch"><b>Virtual hosts</b>@if (d.canManage) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-vhost-add">+ Virtual host</button>}</div>
+            <div class="o-ch"><b>Virtual hosts</b>@if (has(d, 'services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-vhost-add">+ Virtual host</button>}</div>
             @if (addingDb()) {
               <div class="o-row" style="background:var(--o-bg)"><input class="o-in o-sm o-mono" placeholder="name" aria-label="Virtual host" [ngModel]="dbName()" (ngModelChange)="dbName.set($event)" (keydown.enter)="addVhost(d)" data-testid="svc-vhost-name" /><button type="button" class="o-btn o-sm o-dark" (click)="addVhost(d)" [disabled]="busy() || !dbName()" data-testid="svc-vhost-create">Create</button></div>
             }
             <div class="o-row"><span class="o-mono o-b5">/</span><span class="o-faint o-sm">default</span></div>
             @for (v of d.vhosts ?? []; track v) {
               <div class="o-row"><span class="o-mono o-b5">{{ v }}</span><span class="o-r o-faint o-sm">quorum queues</span>
-                @if (d.canManage) {<button type="button" class="o-lnk o-faint" (click)="removeVhost(d, v)" [attr.aria-label]="'Remove ' + v" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure')) {<button type="button" class="o-lnk o-faint" (click)="removeVhost(d, v)" [attr.aria-label]="'Remove ' + v" [disabled]="busy()">×</button>}</div>
             }
             <div class="o-cf">Queues default to quorum queues · every user gets its preset on each virtual host</div>
           </div>
           } @else {
           <div class="o-card">
-            <div class="o-ch"><b>Databases</b>@if (d.canManage && engine()?.databases) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-db-add">+ Database</button>}</div>
+            <div class="o-ch"><b>Databases</b>@if (has(d, 'services.instance.configure') && engine()?.databases) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-db-add">+ Database</button>}</div>
             @if (addingDb()) {
               <div class="o-row" style="background:var(--o-bg)"><input class="o-in o-sm o-mono" placeholder="name" aria-label="Database name" [ngModel]="dbName()" (ngModelChange)="dbName.set($event)" (keydown.enter)="addDb(d)" data-testid="svc-db-name" /><button type="button" class="o-btn o-sm o-dark" (click)="addDb(d)" [disabled]="busy() || !dbName()" data-testid="svc-db-create">Create</button></div>
             }
             @for (db of d.databases; track db.name; let first = $first) {
               <div class="o-row"><span class="o-mono o-b5">{{ db.name }}</span><span class="o-faint o-sm">{{ first ? 'default' : '' }}</span><span class="o-r o-faint o-sm">{{ when(db.createdAt) }}</span>
-                @if (d.canManage && !first) {<button type="button" class="o-lnk o-faint" (click)="removeDb(d, db.name)" [attr.aria-label]="'Remove ' + db.name" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure') && !first) {<button type="button" class="o-lnk o-faint" (click)="removeDb(d, db.name)" [attr.aria-label]="'Remove ' + db.name" [disabled]="busy()">×</button>}</div>
+              @if (engine()?.extensions?.length) {
+                <div class="o-row o-wrap" style="padding-left:24px" [attr.data-testid]="'svc-ext-' + db.name">
+                  @for (x of db.extensions ?? []; track x.name) {<span class="o-chip o-mono" [class.o-grn]="x.created" [title]="x.created ? 'Created' : 'Being created'">{{ x.name }}@if (has(d, 'services.instance.configure')) { <button type="button" class="o-lnk o-faint" (click)="dropExt(d, db.name, x.name)" [attr.aria-label]="'Drop ' + x.name" [disabled]="busy()">×</button>}</span>}
+                  @if (has(d, 'services.instance.configure') && !d.deletedAt) {
+                    <select class="o-in o-xs" style="width:auto" [attr.aria-label]="'Add an extension to ' + db.name" [ngModel]="''" (ngModelChange)="addExt(d, db.name, $event)" [disabled]="busy()" [attr.data-testid]="'svc-ext-add-' + db.name">
+                      <option value="">+ Extension</option>
+                      @for (e of engine()!.extensions!; track e.name) {<option [value]="e.name" [title]="e.description">{{ e.name }}</option>}
+                    </select>
+                  }
+                </div>
+              }
             } @empty {<div class="o-empty">{{ engine()?.databases ? 'No databases yet.' : d.engineName + ' has no logical databases: keys live in database 0.' }}</div>}
           </div>
           }
           <div class="o-card">
-            <div class="o-ch"><b>Users</b>@if (d.canManage) {<button type="button" class="o-btn o-sm o-r" (click)="addingUser.set(!addingUser())" data-testid="svc-user-add">+ User</button>}</div>
+            <div class="o-ch"><b>Users</b>@if (has(d, 'services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="addingUser.set(!addingUser())" data-testid="svc-user-add">+ User</button>}</div>
             @if (addingUser()) {
               <div class="o-row" style="background:var(--o-bg)">
                 <input class="o-in o-sm o-mono" placeholder="name" aria-label="User name" [ngModel]="userName()" (ngModelChange)="userName.set($event)" data-testid="svc-user-name" />
@@ -2210,22 +2658,28 @@ class ServicePage {
             @for (u of d.users ?? []; track u.name) {
               <div class="o-row"><span class="o-mono o-b5">{{ u.name }}</span><span [class]="preset(u.preset)">{{ u.preset }}</span>@if (u.rotating) {<span class="o-chip o-blu">rotating</span>}
                 <span class="o-r o-faint o-sm o-ell">{{ u.attached.length ? 'used by ' + u.attached.join(', ') : 'generation ' + u.generation }}</span>
-                @if (d.canManage && u.preset !== 'owner') {<button type="button" class="o-lnk o-faint" (click)="removeUser(d, u.name)" [attr.aria-label]="'Remove ' + u.name" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure') && !d.deletedAt) {
+                  <select class="o-in o-xs" style="width:auto" [attr.aria-label]="'Rotate ' + u.name + ' every'" [title]="rotationLine(u) || 'Rotate the password on a schedule'" [ngModel]="u.rotateEveryDays || 0" (ngModelChange)="setRotation(d, u.name, +$event)" [disabled]="busy()" [attr.data-testid]="'svc-user-rotation-' + u.name">
+                    @for (p of rotationPeriods; track p) {<option [ngValue]="p">{{ p ? 'Rotate every ' + p + ' days' : 'No scheduled rotation' }}</option>}
+                  </select>
+                } @else if (u.rotateEveryDays) {<span class="o-faint o-xs">every {{ u.rotateEveryDays }} days</span>}
+                @if (u.rotateEveryDays && u.nextRotation) {<span class="o-faint o-xs" [attr.data-testid]="'svc-user-next-' + u.name">{{ rotationLine(u) }}</span>}
+                @if (has(d, 'services.instance.configure') && u.preset !== 'owner') {<button type="button" class="o-lnk o-faint" (click)="removeUser(d, u.name)" [attr.aria-label]="'Remove ' + u.name" [disabled]="busy()">×</button>}</div>
             }
-            <div class="o-cf">Per-app users: attach with “Own user” and each app gets its own least-privilege login, removed when it is detached</div>
+            <div class="o-cf">Per-app users: attach with “Own user” and each app gets its own least-privilege login, removed when it is detached. A scheduled rotation works as “Rotate credentials”: no connection fails, and the people who attached the apps are told.</div>
           </div>
         </div>
       }
       @case ('backups') {
         <div class="o-split o-w340">
           <div class="o-card">
-            <div class="o-ch"><b>Backups</b>@if (d.canManage && !d.deletedAt) {<span class="o-r"><button type="button" class="o-btn o-sm" (click)="backupNow(d)" [disabled]="busy() || d.state !== 'Running'" data-testid="svc-backup-now">Back up now</button></span>}</div>
+            <div class="o-ch"><b>Backups</b>@if (has(d, 'services.instance.configure') && !d.deletedAt) {<span class="o-r"><button type="button" class="o-btn o-sm" (click)="backupNow(d)" [disabled]="busy() || d.state !== 'Running'" data-testid="svc-backup-now">Back up now</button></span>}</div>
             @for (b of backups(); track b.name) {
               <div class="o-row" [attr.data-testid]="'svc-backup-' + b.name">
                 <span [class]="'o-dot ' + backupDot(b)"></span><span style="width:150px">{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint o-sm" style="width:80px">{{ backupNote(b) }}</span>
                 <span class="o-chip">{{ kind(b) }}</span>@if (b.volumes) {<span [class]="'o-chip ' + (b.volumes.phase === 'completed' ? 'o-grn' : b.volumes.phase === 'failed' ? 'o-red' : 'o-blu')" [title]="b.volumes.error || b.volumes.snapshots + ' volume snapshot(s)'" data-testid="svc-backup-volumes">{{ b.volumes.phase === 'completed' ? '+ queue data' : b.volumes.phase === 'failed' ? 'queue data failed' : 'snapshotting' }}</span>}<span class="o-faint o-sm">{{ keepLine(b, d.retentionDays) }}</span>
-                @if (b.phase === 'completed' && d.canManage) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore</button>}
-                @if (b.kind === 'on-demand' && d.canManage && b.phase !== 'running') {<button type="button" class="o-lnk o-faint" [class.o-r]="b.phase !== 'completed'" (click)="deleteBackup(d, b)" [attr.aria-label]="'Delete ' + b.name" [disabled]="busy()">×</button>}
+                @if (b.phase === 'completed' && has(d, 'services.data.import')) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore</button>}
+                @if (b.kind === 'on-demand' && has(d, 'services.instance.configure') && b.phase !== 'running') {<button type="button" class="o-lnk o-faint" [class.o-r]="b.phase !== 'completed'" (click)="deleteBackup(d, b)" [attr.aria-label]="'Delete ' + b.name" [disabled]="busy()">×</button>}
               </div>
             } @empty {<div class="o-empty">No backups yet. The first is taken once {{ d.name }} is running.</div>}
             <div class="o-cf">Stored encrypted in a separate failure domain.</div>
@@ -2236,7 +2690,7 @@ class ServicePage {
                 <b>Restore to a point in time</b>
                 <span class="o-hint">{{ pitrHint(d) }} Restores always create a new instance; {{ d.name }} is untouched.</span>
                 <input class="o-in o-mono" type="datetime-local" step="1" aria-label="Point in time" [ngModel]="pitr()" (ngModelChange)="pitr.set($event)" data-testid="svc-pitr" />
-                <button type="button" class="o-btn o-dark" (click)="askPitr(d)" [disabled]="!d.canManage || !pitr() || !d.window?.from" data-testid="svc-pitr-go">Restore…</button>
+                <button type="button" class="o-btn o-dark" (click)="askPitr(d)" [disabled]="!has(d, 'services.data.import') || !pitr() || !d.window?.from" data-testid="svc-pitr-go">Restore…</button>
               </div>
             } @else {
               <div class="o-card o-cb o-col" style="gap:6px"><b>Restore a snapshot</b><span class="o-hint">{{ d.engineName }} restores from a daily {{ snapshotName(d) }}: pick one on the left. It always creates a new instance.</span>
@@ -2248,12 +2702,13 @@ class ServicePage {
                 @if (d.engine === 'mysql') {
                   <div class="o-fld"><label>Runs</label><input class="o-in" value="Every hour, on the hour" readonly aria-label="Runs" /><span class="o-hint">MySQL restores to any second up to the latest backup: at most an hour behind.</span></div>
                 } @else {
-                  <div class="o-fld"><label for="svc-bh">Daily at</label><select id="svc-bh" class="o-in" [disabled]="!d.canManage" [ngModel]="d.backupHour" (ngModelChange)="save(d, { backupHour: +$event }, 'Backups now run daily at ' + utc(+$event) + '.')">@for (h of hours; track h) {<option [ngValue]="h">{{ utc(h) }}</option>}</select></div>
+                  <div class="o-fld"><label for="svc-bh">Daily at</label><select id="svc-bh" class="o-in" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.backupHour" (ngModelChange)="save(d, { backupHour: +$event }, 'Backups now run daily at ' + utc(+$event) + '.')">@for (h of hours; track h) {<option [ngValue]="h">{{ utc(h) }}</option>}</select></div>
                 }
-                <div class="o-fld"><label for="svc-rd">Keep for</label><select id="svc-rd" class="o-in" [disabled]="!d.canManage" [ngModel]="d.retentionDays" (ngModelChange)="save(d, { retentionDays: +$event }, 'Backups are now kept ' + $event + ' days.')">@for (k of keeps; track k) {<option [ngValue]="k">{{ k }} days</option>}</select></div>
+                <div class="o-fld"><label for="svc-rd">Keep for</label><select id="svc-rd" class="o-in" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.retentionDays" (ngModelChange)="save(d, { retentionDays: +$event }, 'Backups are now kept ' + $event + ' days.')">@for (k of keeps; track k) {<option [ngValue]="k">{{ k }} days</option>}</select></div>
               </div>
             </div>
             <o-svc-dumps [d]="d" [projectKey]="key()" [dumps]="!!engine()?.dumps" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+            <o-svc-copies [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           </div>
         </div>
       }
@@ -2271,33 +2726,35 @@ class ServicePage {
           <div class="o-card">
             <div class="o-ch"><b>Resize</b><span class="o-r">vCPU and RAM: brief failover · disk grows online</span></div>
             <div class="o-cb o-flex o-wrap">
-              <select class="o-in" style="max-width:360px" aria-label="Plan" [disabled]="!d.canManage" [ngModel]="newPlan()" (ngModelChange)="newPlan.set($event)" data-testid="svc-plan">
+              <select class="o-in" style="max-width:360px" aria-label="Plan" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="newPlan()" (ngModelChange)="newPlan.set($event)" data-testid="svc-plan">
                 @for (p of plans(); track p.id) {<option [value]="p.id">{{ p.id }} · {{ p.label }} · {{ price(p.priceCents) }}/mo</option>}
               </select>
-              <label class="o-flex o-sm" style="gap:6px">Disk <input class="o-in o-sm o-mono" style="width:80px" type="number" [min]="d.diskGb" [max]="catalog()?.maxDiskGb ?? 2000" [disabled]="!d.canManage" [ngModel]="newDisk()" (ngModelChange)="newDisk.set(+$event)" data-testid="svc-disk" /> GB</label>
-              <button type="button" class="o-btn o-dark" (click)="resize(d)" [disabled]="busy() || !d.canManage || (newPlan() === d.plan && newDisk() === d.diskGb)" data-testid="svc-resize">Resize</button>
+              <label class="o-flex o-sm" style="gap:6px">Disk <input class="o-in o-sm o-mono" style="width:80px" type="number" [min]="d.diskGb" [max]="catalog()?.maxDiskGb ?? 2000" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="newDisk()" (ngModelChange)="newDisk.set(+$event)" data-testid="svc-disk" /> GB</label>
+              <button type="button" class="o-btn o-dark" (click)="resize(d)" [disabled]="busy() || !has(d, 'services.instance.configure') || (newPlan() === d.plan && newDisk() === d.diskGb)" data-testid="svc-resize">Resize</button>
             </div>
           </div>
+          <o-svc-storage [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+          <o-svc-upgrade [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           <div class="o-card" data-testid="svc-ha">
             <div class="o-ch"><b>High availability</b><span class="o-r">{{ d.readyNodes }} of {{ d.nodes }} node{{ d.nodes === 1 ? '' : 's' }} ready</span></div>
             @switch (engine()?.ha) {
               @case ('standby') {
-                <div class="o-row"><span style="flex:1">Standby node with automatic failover@if (d.engine === 'mysql') {<span class="o-faint o-sm"> · two semi-synchronous replicas (MOCO runs 1, 3 or 5)</span>}</span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, d.standby ? 0 : d.replicas)" aria-label="Standby" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">Standby node with automatic failover@if (d.engine === 'mysql') {<span class="o-faint o-sm"> · two semi-synchronous replicas (MOCO runs 1, 3 or 5)</span>}</span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="topology(d, !d.standby, d.standby ? 0 : d.replicas)" aria-label="Standby" data-testid="svc-standby"></button></div>
                 <div class="o-row"><span style="flex:1">Read replicas@if (d.readHost) {<span class="o-faint o-sm o-mono"> · {{ d.readHost }}</span>}</span><span class="o-faint o-sm" data-testid="svc-replicas">{{ d.replicas }}</span>
-                  @if (d.canManage) {
+                  @if (has(d, 'services.instance.configure')) {
                     <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby, d.replicas - step(d))" [disabled]="busy() || d.replicas === 0">−</button>
                     <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby || d.engine === 'mysql', d.replicas + step(d))" [disabled]="busy() || d.replicas + step(d) > (engine()?.maxReplicas ?? 0)" data-testid="svc-replica-add">+ Replica</button>
                   }</div>
                 <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now</div>
               }
               @case ('cluster') {
-                <div class="o-row"><span style="flex:1">3-node cluster<span class="o-faint o-sm"> · {{ d.engine === 'nats' ? 'streams replicated on three servers' : 'quorum queues on three nodes' }}</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="3-node cluster" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">3-node cluster<span class="o-faint o-sm"> · {{ d.engine === 'nats' ? 'streams replicated on three servers' : 'quorum queues on three nodes' }}</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="topology(d, !d.standby, 0)" aria-label="3-node cluster" data-testid="svc-standby"></button></div>
                 <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now</div>
               }
               @case ('replica') {
-                <div class="o-row"><span style="flex:1">Replica with automatic failover<span class="o-faint o-sm"> · three Sentinels promote it if the primary fails</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="Replica with failover" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">Replica with automatic failover<span class="o-faint o-sm"> · three Sentinels promote it if the primary fails</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="topology(d, !d.standby, 0)" aria-label="Replica with failover" data-testid="svc-standby"></button></div>
                 <div class="o-row"><span style="flex:1">Second replica@if (d.sentinel; as sn) {<span class="o-faint o-sm o-mono"> · Sentinels {{ sn.hosts.length }} × :{{ sn.port }}, master {{ sn.master }}</span>}</span><span class="o-faint o-sm" data-testid="svc-replicas">{{ d.replicas }}</span>
-                  @if (d.canManage) {
+                  @if (has(d, 'services.instance.configure')) {
                     <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby, d.replicas - 1)" [disabled]="busy() || d.replicas === 0">−</button>
                     <button type="button" class="o-btn o-xs" (click)="topology(d, true, d.replicas + 1)" [disabled]="busy() || d.replicas + 1 > (engine()?.maxReplicas ?? 0)" data-testid="svc-replica-add">+ Replica</button>
                   }</div>
@@ -2312,11 +2769,11 @@ class ServicePage {
           <div class="o-card">
             <div class="o-ch"><b>Networking</b></div>
             <div class="o-row"><span style="flex:1">Private network <span class="o-faint o-sm">· always on, reachable only from attached apps</span></span><span class="o-chip o-grn">On</span></div>
-            <div class="o-row"><span style="flex:1">Public endpoint with trusted sources</span><button type="button" class="o-tog" [class.o-on]="d.publicEnabled" [disabled]="!d.canManage || busy()" (click)="save(d, { publicEnabled: !d.publicEnabled }, d.publicEnabled ? 'The public endpoint is off.' : 'The public endpoint is on for the trusted sources below.')" aria-label="Public endpoint" data-testid="svc-public"></button></div>
+            <div class="o-row"><span style="flex:1">Public endpoint with trusted sources</span><button type="button" class="o-tog" [class.o-on]="d.publicEnabled" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="save(d, { publicEnabled: !d.publicEnabled }, d.publicEnabled ? 'The public endpoint is off.' : 'The public endpoint is on for the trusted sources below.')" aria-label="Public endpoint" data-testid="svc-public"></button></div>
             @if (d.publicEnabled) {
               <div class="o-row o-wrap" style="background:var(--o-bg)">
-                @for (c of d.allowedCidrs; track c) {<span class="o-chip o-mono">{{ c }}@if (d.canManage) { <button type="button" class="o-lnk o-faint" (click)="dropCidr(d, c)" [attr.aria-label]="'Remove ' + c">×</button>}</span>}
-                @if (d.canManage) {<input class="o-in o-sm o-mono" style="width:180px" placeholder="+ IP or CIDR" aria-label="Add a trusted source" [ngModel]="cidr()" (ngModelChange)="cidr.set($event)" (keydown.enter)="addCidr(d)" data-testid="svc-cidr" />}
+                @for (c of d.allowedCidrs; track c) {<span class="o-chip o-mono">{{ c }}@if (has(d, 'services.instance.configure')) { <button type="button" class="o-lnk o-faint" (click)="dropCidr(d, c)" [attr.aria-label]="'Remove ' + c">×</button>}</span>}
+                @if (has(d, 'services.instance.configure')) {<input class="o-in o-sm o-mono" style="width:180px" placeholder="+ IP or CIDR" aria-label="Add a trusted source" [ngModel]="cidr()" (ngModelChange)="cidr.set($event)" (keydown.enter)="addCidr(d)" data-testid="svc-cidr" />}
                 <span class="o-faint o-sm o-r">TLS required</span>
               </div>
             }
@@ -2324,22 +2781,22 @@ class ServicePage {
           <div class="o-card">
             <div class="o-ch"><b>Maintenance window</b><span class="o-r">patches with 7-day notice</span></div>
             <div class="o-cb o-flex o-wrap">
-              <select class="o-in" style="width:auto" aria-label="Day" [disabled]="!d.canManage" [ngModel]="d.maintenanceDay" (ngModelChange)="save(d, { maintenanceDay: $event }, 'Maintenance window saved.')">@for (x of days; track x.id) {<option [value]="x.id">{{ x.label }}</option>}</select>
-              <select class="o-in" style="width:auto" aria-label="Hours" [disabled]="!d.canManage" [ngModel]="d.maintenanceHour" (ngModelChange)="save(d, { maintenanceHour: +$event }, 'Maintenance window saved.')">@for (h of hours; track h) {<option [ngValue]="h">{{ windowHours(h) }}</option>}</select>
+              <select class="o-in" style="width:auto" aria-label="Day" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.maintenanceDay" (ngModelChange)="save(d, { maintenanceDay: $event }, 'Maintenance window saved.')">@for (x of days; track x.id) {<option [value]="x.id">{{ x.label }}</option>}</select>
+              <select class="o-in" style="width:auto" aria-label="Hours" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.maintenanceHour" (ngModelChange)="save(d, { maintenanceHour: +$event }, 'Maintenance window saved.')">@for (h of hours; track h) {<option [ngValue]="h">{{ windowHours(h) }}</option>}</select>
               <span class="o-faint o-sm">Minor versions of {{ d.engineName }} {{ d.version }} apply here.</span>
             </div>
           </div>
           <div class="o-card" data-testid="svc-params"><div class="o-ch"><b>Engine parameters</b><span class="o-r">validated subset</span></div><div class="o-tbl"><div class="o-tbody">
             @for (p of d.parameters; track p.name) {<div class="o-tr">
               <div class="o-td o-mono o-sm" [title]="p.description">{{ p.name }}</div>
-              <div class="o-td"><input class="o-in o-sm o-mono" style="width:120px" [placeholder]="p.default" [disabled]="!d.canManage" [attr.aria-label]="p.name" [ngModel]="paramDraft()[p.name] ?? p.value ?? ''" (ngModelChange)="setParam(p, $event)" [attr.data-testid]="'svc-param-' + p.name" /></div>
+              <div class="o-td"><input class="o-in o-sm o-mono" style="width:120px" [placeholder]="p.default" [disabled]="!has(d, 'services.instance.configure')" [attr.aria-label]="p.name" [ngModel]="paramDraft()[p.name] ?? p.value ?? ''" (ngModelChange)="setParam(p, $event)" [attr.data-testid]="'svc-param-' + p.name" /></div>
               <div class="o-td"><span class="o-chip" [class.o-amb]="p.restart">{{ p.restart ? 'restart' : 'live' }}</span></div>
               <div class="o-td o-faint o-xs o-ell" style="max-width:260px">{{ p.description }}</div>
             </div>}
           </div></div>
-            @if (d.canManage) {<div class="o-cf"><span class="o-faint o-sm">{{ paramNote(d) }}</span><button type="button" class="o-btn o-sm o-dark o-r" (click)="saveParams(d)" [disabled]="busy() || !paramsChanged()" data-testid="svc-params-save">Save parameters</button></div>}
+            @if (has(d, 'services.instance.configure')) {<div class="o-cf"><span class="o-faint o-sm">{{ paramNote(d) }}</span><button type="button" class="o-btn o-sm o-dark o-r" (click)="saveParams(d)" [disabled]="busy() || !paramsChanged()" data-testid="svc-params-save">Save parameters</button></div>}
           </div>
-          @if (d.canManage && !d.deletedAt) {
+          @if (has(d, 'services.instance.delete') && !d.deletedAt) {
             <div class="o-card" style="border-color:var(--o-bad-line)"><div class="o-row" style="padding:14px"><div class="o-col" style="gap:2px;flex:1"><b>Delete {{ d.name }}</b><span class="o-hint">Typed confirmation. Undo within 24 hours; optional final backup kept 7 days. Attached apps lose {{ envVar() }}.</span></div><button type="button" class="o-btn o-sm o-red" (click)="dialog.set({ kind: 'delete', typed: '', finalBackup: true })" data-testid="svc-delete">Delete</button></div></div>
           }
         </div>
@@ -2384,13 +2841,13 @@ class ServicePage {
     } @else {
       <div class="o-page">@if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>} @else {<div class="o-empty">Loading…</div>}</div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ServiceMetricsTab, selector: "o-svc-metrics", inputs: ["readings", "slowLines", "engine", "projectKey", "service", "dashboard"] }, { kind: "component", type: ServiceLogsTab, selector: "o-svc-logs", inputs: ["projectKey", "id", "service", "environment", "debugLogs"] }, { kind: "component", type: ServiceConsoleTab, selector: "o-svc-console", inputs: ["d", "projectKey", "kind"] }, { kind: "component", type: ServiceDumpsCard, selector: "o-svc-dumps", inputs: ["d", "projectKey", "dumps"], outputs: ["done", "failed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ServiceMetricsTab, selector: "o-svc-metrics", inputs: ["readings", "slowLines", "engine", "projectKey", "service", "dashboard"] }, { kind: "component", type: ServiceLogsTab, selector: "o-svc-logs", inputs: ["projectKey", "id", "service", "environment", "debugLogs"] }, { kind: "component", type: ServiceConsoleTab, selector: "o-svc-console", inputs: ["d", "projectKey", "kind"] }, { kind: "component", type: ServiceDumpsCard, selector: "o-svc-dumps", inputs: ["d", "projectKey", "dumps"], outputs: ["done", "failed"] }, { kind: "component", type: ServiceUpgradeCard, selector: "o-svc-upgrade" }, { kind: "component", type: ServiceCopiesCard, selector: "o-svc-copies" }, { kind: "component", type: ServiceStorageCard, selector: "o-svc-storage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServicePage, decorators: [{
             type: Component,
             args: [{
                     selector: 'o-service',
-                    imports: [FormsModule, RouterLink, ServiceMetricsTab, ServiceLogsTab, ServiceConsoleTab, ServiceDumpsCard],
+                    imports: [FormsModule, RouterLink, ServiceMetricsTab, ServiceLogsTab, ServiceConsoleTab, ServiceDumpsCard, ServiceUpgradeCard, ServiceCopiesCard, ServiceStorageCard],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (d(); as d) {
@@ -2402,8 +2859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         </div>
         <div class="o-acts">
           @if (d.management && !d.deletedAt) {<button type="button" class="o-btn" (click)="openManagement(d)" [disabled]="busy() || d.state !== 'Running' && d.state !== 'Updating' && d.state !== 'Degraded'" [title]="d.management === 'read' ? 'Read-only for your role' : 'As the instance administrator'" data-testid="svc-management">Open management UI@if (d.management === 'read') {<span class="o-faint o-xs"> · read-only</span>}</button>}
-          @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="askRotate(d)" [disabled]="busy() || !d.users?.length" data-testid="svc-rotate">Rotate credentials</button>}
-          @if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn" (click)="setTab('settings')">Resize</button>}
+          @if (has(d, 'services.instance.configure') && !d.deletedAt) {<button type="button" class="o-btn" (click)="askRotate(d)" [disabled]="busy() || !d.users?.length" data-testid="svc-rotate">Rotate credentials</button>}
+          @if (has(d, 'services.instance.configure') && !d.deletedAt) {<button type="button" class="o-btn" (click)="setTab('settings')">Resize</button>}
           <a class="o-btn" [routerLink]="host.link('dashboards')">Dashboard</a>
         </div>
       </div>
@@ -2414,13 +2871,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       @if (d.deletedAt) {
         <div class="o-card o-cb o-flex o-wrap" style="border-color:var(--o-bad-line)" data-testid="svc-deleted">
           <div class="o-col" style="gap:2px;flex:1"><b>{{ d.name }} is scheduled for deletion</b><span class="o-hint">Purged {{ when(d.purgeAt) }}. Until then you can undo; attached apps were detached.@if (d.finalBackup) { A final backup is kept for 7 days.}</span></div>
-          @if (d.canManage) {<button type="button" class="o-btn" (click)="undelete(d)" [disabled]="busy()" data-testid="svc-undelete">Undo delete</button>}
+          @if (has(d, 'services.instance.delete')) {<button type="button" class="o-btn" (click)="undelete(d)" [disabled]="busy()" data-testid="svc-undelete">Undo delete</button>}
         </div>
       }
       @if (d.restoreOf; as src) {
         <div class="o-card o-cb o-flex o-wrap" data-testid="svc-restored">
           <div class="o-col" style="gap:2px;flex:1"><b>Restored from <a [routerLink]="host.link('services/' + src.name)">{{ src.name }}</a></b><span class="o-hint">@if (d.restorePoint) {To {{ when(d.restorePoint) }}.} @else if (d.restoreBackup) {From backup {{ d.restoreBackup }}.} {{ src.name }} is untouched.@if (src.attached.length) { Its apps: {{ src.attached.join(', ') }}.}</span></div>
-          @if (d.canManage && src.attached.length && d.state === 'Running') {<button type="button" class="o-btn" (click)="swap(d, src.name)" [disabled]="busy()" data-testid="svc-swap">Move {{ src.name }}'s apps here</button>}
+          @if (has(d, 'services.instance.configure') && src.attached.length && d.state === 'Running') {<button type="button" class="o-btn" (click)="swap(d, src.name)" [disabled]="busy()" data-testid="svc-swap">Move {{ src.name }}'s apps here</button>}
         </div>
       }
 
@@ -2444,8 +2901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 <span class="o-k">User</span><span class="o-mono o-sm">{{ c.user }}</span>
                 <span class="o-k">Password</span>
                 <span class="o-flex"><span class="o-mono o-sm" data-testid="svc-password">{{ revealed()?.password ?? '••••••••••••••••' }}</span>
-                  @if (d.canManage) {<button type="button" class="o-lnk" (click)="toggleReveal(d)" [disabled]="busy()" data-testid="svc-reveal">{{ revealed() ? 'Hide' : 'Reveal' }}</button>}
-                  @else {<span class="o-faint o-xs">Maintainers can reveal</span>}
+                  @if (has(d, 'services.credentials.reveal')) {<button type="button" class="o-lnk" (click)="toggleReveal(d)" [disabled]="busy()" data-testid="svc-reveal">{{ revealed() ? 'Hide' : 'Reveal' }}</button>}
+                  @else {<span class="o-faint o-xs">Your role cannot reveal credentials in {{ d.environment }}</span>}
                 </span>
                 <span class="o-k">SSL mode</span><span class="o-mono o-sm">{{ c.sslMode }}</span>
               </div>
@@ -2457,12 +2914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           </div>
           <div class="o-col" style="gap:18px">
             <div class="o-card">
-              <div class="o-ch"><b>Attached apps</b>@if (d.canManage && !d.deletedAt) {<button type="button" class="o-btn o-sm o-r" (click)="attachOpen.set(!attachOpen())" data-testid="svc-attach-open">Attach to app</button>}</div>
+              <div class="o-ch"><b>Attached apps</b>@if (has(d, 'services.instance.configure') && !d.deletedAt) {<button type="button" class="o-btn o-sm o-r" (click)="attachOpen.set(!attachOpen())" data-testid="svc-attach-open">Attach to app</button>}</div>
               @for (a of d.attachments; track a.id) {
                 <div class="o-row" [attr.data-testid]="'svc-att-' + a.app">
                   <span class="o-b5">{{ a.app }}</span><span class="o-faint">{{ a.environment }}</span><span class="o-chip o-mono">{{ a.prefix }}{{ envVar() }}</span>@if (a.ownUser) {<span class="o-faint o-xs o-mono" title="The app's own user">{{ a.user }}</span>}
                   <span class="o-r o-sm" [style.color]="attColour(a)" [attr.title]="a.message || null">{{ attState(a) }}</span>
-                  @if (d.canManage) {<button type="button" class="o-lnk o-faint" (click)="detach(d, a)" [attr.aria-label]="'Detach ' + a.app" [disabled]="busy()">×</button>}
+                  @if (has(d, 'services.instance.configure')) {<button type="button" class="o-lnk o-faint" (click)="detach(d, a)" [attr.aria-label]="'Detach ' + a.app" [disabled]="busy()">×</button>}
                 </div>
               } @empty {<div class="o-empty">Not attached. Attach it and the app gets {{ envVar() }} on its next release.</div>}
               @if (attachOpen()) {
@@ -2475,15 +2932,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                   @if (d.engine === 'rabbitmq' && (d.vhosts ?? []).length) {<select class="o-in o-sm" style="width:auto" aria-label="Virtual host" [ngModel]="attVhost()" (ngModelChange)="attVhost.set($event)" data-testid="svc-att-vhost"><option value="/">/</option>@for (v of d.vhosts ?? []; track v) {<option [value]="v">{{ v }}</option>}</select>}
                   <label class="o-flex o-sm" style="gap:4px" title="A user of its own for this app, read-write, removed when it is detached"><input type="checkbox" [ngModel]="attOwn()" (ngModelChange)="attOwn.set($event)" data-testid="svc-att-own" /> Own user</label>
                   <span class="o-mut o-sm">Injects {{ attPrefix() }}{{ envVar() }} and redeploys</span>
-                  <button type="button" class="o-btn o-sm o-pri o-r" (click)="attach(d)" [disabled]="busy() || !attApp()" data-testid="svc-att-go">Attach</button>
+                  <button type="button" class="o-btn o-sm o-pri o-r" (click)="attach(d)" [disabled]="busy() || !attApp() || attOtherRegion()" data-testid="svc-att-go">Attach</button>
                 </div>
+                <div class="o-cf" [class.o-red]="attOtherRegion()" data-testid="svc-att-region">@if (attOtherRegion()) {<span>{{ attApp() }}'s {{ attEnv() }} environment runs in {{ attRegion() }} and {{ d.name }} in {{ region() }}: an app attaches only to a service in its own region. Create a service in {{ attRegion() }} for it.</span>} @else {<span>Apps attach only to services in their own region: {{ d.name }} runs in {{ region() }}.</span>}</div>
               }
-              <div class="o-cf">{{ rotateNote() }}@if (openRotation(); as r) {@if (d.canManage) { · <button type="button" class="o-lnk" (click)="retire(d, r)" [disabled]="busy()">Retire the old password now</button>}}</div>
+              <div class="o-cf">{{ rotateNote() }}@if (openRotation(); as r) {@if (has(d, 'services.instance.configure')) { · <button type="button" class="o-lnk" (click)="retire(d, r)" [disabled]="busy()">Retire the old password now</button>}}</div>
             </div>
             <div class="o-card">
               <div class="o-ch"><b>Backups</b><span class="o-r">{{ d.engine === 'mysql' ? 'Hourly' : 'Daily' }} · {{ d.retentionDays }}-day retention{{ d.pitr ? ' · PITR' : '' }}</span></div>
               @for (b of backups().slice(0, 3); track b.name) {
-                <div class="o-row"><span>{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint">{{ backupNote(b) }}</span><span class="o-chip">{{ kind(b) }}</span>@if (b.phase === 'completed' && d.canManage) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore to new instance</button>}</div>
+                <div class="o-row"><span>{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint">{{ backupNote(b) }}</span><span class="o-chip">{{ kind(b) }}</span>@if (b.phase === 'completed' && has(d, 'services.data.import')) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore to new instance</button>}</div>
               } @empty {<div class="o-empty">The first backup is taken once {{ d.name }} is running.</div>}
               <div class="o-cf">{{ windowLine() }}</div>
             </div>
@@ -2494,43 +2952,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         <div class="o-g2" style="align-items:start;gap:18px">
           @if (d.engine === 'nats') {
           <div class="o-card" data-testid="svc-streams">
-            <div class="o-ch"><b>Streams</b>@if (d.canManage) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-stream-add">+ Stream</button>}</div>
+            <div class="o-ch"><b>Streams</b>@if (has(d, 'services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-stream-add">+ Stream</button>}</div>
             @if (addingDb()) {
               <div class="o-row o-wrap" style="background:var(--o-bg)"><input class="o-in o-sm o-mono" style="width:120px" placeholder="ORDERS" aria-label="Stream name" [ngModel]="dbName()" (ngModelChange)="dbName.set($event)" data-testid="svc-stream-name" /><input class="o-in o-sm o-mono" style="width:140px" placeholder="orders.>" aria-label="Subjects" [ngModel]="subjects()" (ngModelChange)="subjects.set($event)" data-testid="svc-stream-subjects" /><select class="o-in o-sm" style="width:auto" aria-label="Keep for" [ngModel]="maxAge()" (ngModelChange)="maxAge.set(+$event)">@for (k of streamAges; track k.h) {<option [ngValue]="k.h">{{ k.label }}</option>}</select><button type="button" class="o-btn o-sm o-dark" (click)="addStream(d)" [disabled]="busy() || !dbName()" data-testid="svc-stream-create">Create</button></div>
             }
             @for (st of d.streams; track st.name) {
               <div class="o-row"><span class="o-mono o-b5">{{ st.name }}</span><span class="o-faint o-sm o-mono">{{ st.subjects.join(', ') }}</span><span class="o-r o-faint o-sm">{{ st.maxAgeHours ? 'kept ' + st.maxAgeHours + ' h' : 'kept until limits' }}</span>
-                @if (d.canManage) {<button type="button" class="o-lnk o-faint" (click)="removeStream(d, st.name)" [attr.aria-label]="'Remove ' + st.name" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure')) {<button type="button" class="o-lnk o-faint" (click)="removeStream(d, st.name)" [attr.aria-label]="'Remove ' + st.name" [disabled]="busy()">×</button>}</div>
             } @empty {<div class="o-empty">No streams declared. Apps can make their own; the console lists every stream and KV bucket.</div>}
             <div class="o-cf">JetStream on the volume · {{ d.nodes > 1 ? 'replicated on 3 servers' : 'one server' }}</div>
           </div>
           } @else if (d.engine === 'rabbitmq') {
           <div class="o-card" data-testid="svc-vhosts">
-            <div class="o-ch"><b>Virtual hosts</b>@if (d.canManage) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-vhost-add">+ Virtual host</button>}</div>
+            <div class="o-ch"><b>Virtual hosts</b>@if (has(d, 'services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-vhost-add">+ Virtual host</button>}</div>
             @if (addingDb()) {
               <div class="o-row" style="background:var(--o-bg)"><input class="o-in o-sm o-mono" placeholder="name" aria-label="Virtual host" [ngModel]="dbName()" (ngModelChange)="dbName.set($event)" (keydown.enter)="addVhost(d)" data-testid="svc-vhost-name" /><button type="button" class="o-btn o-sm o-dark" (click)="addVhost(d)" [disabled]="busy() || !dbName()" data-testid="svc-vhost-create">Create</button></div>
             }
             <div class="o-row"><span class="o-mono o-b5">/</span><span class="o-faint o-sm">default</span></div>
             @for (v of d.vhosts ?? []; track v) {
               <div class="o-row"><span class="o-mono o-b5">{{ v }}</span><span class="o-r o-faint o-sm">quorum queues</span>
-                @if (d.canManage) {<button type="button" class="o-lnk o-faint" (click)="removeVhost(d, v)" [attr.aria-label]="'Remove ' + v" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure')) {<button type="button" class="o-lnk o-faint" (click)="removeVhost(d, v)" [attr.aria-label]="'Remove ' + v" [disabled]="busy()">×</button>}</div>
             }
             <div class="o-cf">Queues default to quorum queues · every user gets its preset on each virtual host</div>
           </div>
           } @else {
           <div class="o-card">
-            <div class="o-ch"><b>Databases</b>@if (d.canManage && engine()?.databases) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-db-add">+ Database</button>}</div>
+            <div class="o-ch"><b>Databases</b>@if (has(d, 'services.instance.configure') && engine()?.databases) {<button type="button" class="o-btn o-sm o-r" (click)="addingDb.set(!addingDb())" data-testid="svc-db-add">+ Database</button>}</div>
             @if (addingDb()) {
               <div class="o-row" style="background:var(--o-bg)"><input class="o-in o-sm o-mono" placeholder="name" aria-label="Database name" [ngModel]="dbName()" (ngModelChange)="dbName.set($event)" (keydown.enter)="addDb(d)" data-testid="svc-db-name" /><button type="button" class="o-btn o-sm o-dark" (click)="addDb(d)" [disabled]="busy() || !dbName()" data-testid="svc-db-create">Create</button></div>
             }
             @for (db of d.databases; track db.name; let first = $first) {
               <div class="o-row"><span class="o-mono o-b5">{{ db.name }}</span><span class="o-faint o-sm">{{ first ? 'default' : '' }}</span><span class="o-r o-faint o-sm">{{ when(db.createdAt) }}</span>
-                @if (d.canManage && !first) {<button type="button" class="o-lnk o-faint" (click)="removeDb(d, db.name)" [attr.aria-label]="'Remove ' + db.name" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure') && !first) {<button type="button" class="o-lnk o-faint" (click)="removeDb(d, db.name)" [attr.aria-label]="'Remove ' + db.name" [disabled]="busy()">×</button>}</div>
+              @if (engine()?.extensions?.length) {
+                <div class="o-row o-wrap" style="padding-left:24px" [attr.data-testid]="'svc-ext-' + db.name">
+                  @for (x of db.extensions ?? []; track x.name) {<span class="o-chip o-mono" [class.o-grn]="x.created" [title]="x.created ? 'Created' : 'Being created'">{{ x.name }}@if (has(d, 'services.instance.configure')) { <button type="button" class="o-lnk o-faint" (click)="dropExt(d, db.name, x.name)" [attr.aria-label]="'Drop ' + x.name" [disabled]="busy()">×</button>}</span>}
+                  @if (has(d, 'services.instance.configure') && !d.deletedAt) {
+                    <select class="o-in o-xs" style="width:auto" [attr.aria-label]="'Add an extension to ' + db.name" [ngModel]="''" (ngModelChange)="addExt(d, db.name, $event)" [disabled]="busy()" [attr.data-testid]="'svc-ext-add-' + db.name">
+                      <option value="">+ Extension</option>
+                      @for (e of engine()!.extensions!; track e.name) {<option [value]="e.name" [title]="e.description">{{ e.name }}</option>}
+                    </select>
+                  }
+                </div>
+              }
             } @empty {<div class="o-empty">{{ engine()?.databases ? 'No databases yet.' : d.engineName + ' has no logical databases: keys live in database 0.' }}</div>}
           </div>
           }
           <div class="o-card">
-            <div class="o-ch"><b>Users</b>@if (d.canManage) {<button type="button" class="o-btn o-sm o-r" (click)="addingUser.set(!addingUser())" data-testid="svc-user-add">+ User</button>}</div>
+            <div class="o-ch"><b>Users</b>@if (has(d, 'services.instance.configure')) {<button type="button" class="o-btn o-sm o-r" (click)="addingUser.set(!addingUser())" data-testid="svc-user-add">+ User</button>}</div>
             @if (addingUser()) {
               <div class="o-row" style="background:var(--o-bg)">
                 <input class="o-in o-sm o-mono" placeholder="name" aria-label="User name" [ngModel]="userName()" (ngModelChange)="userName.set($event)" data-testid="svc-user-name" />
@@ -2541,22 +3010,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             @for (u of d.users ?? []; track u.name) {
               <div class="o-row"><span class="o-mono o-b5">{{ u.name }}</span><span [class]="preset(u.preset)">{{ u.preset }}</span>@if (u.rotating) {<span class="o-chip o-blu">rotating</span>}
                 <span class="o-r o-faint o-sm o-ell">{{ u.attached.length ? 'used by ' + u.attached.join(', ') : 'generation ' + u.generation }}</span>
-                @if (d.canManage && u.preset !== 'owner') {<button type="button" class="o-lnk o-faint" (click)="removeUser(d, u.name)" [attr.aria-label]="'Remove ' + u.name" [disabled]="busy()">×</button>}</div>
+                @if (has(d, 'services.instance.configure') && !d.deletedAt) {
+                  <select class="o-in o-xs" style="width:auto" [attr.aria-label]="'Rotate ' + u.name + ' every'" [title]="rotationLine(u) || 'Rotate the password on a schedule'" [ngModel]="u.rotateEveryDays || 0" (ngModelChange)="setRotation(d, u.name, +$event)" [disabled]="busy()" [attr.data-testid]="'svc-user-rotation-' + u.name">
+                    @for (p of rotationPeriods; track p) {<option [ngValue]="p">{{ p ? 'Rotate every ' + p + ' days' : 'No scheduled rotation' }}</option>}
+                  </select>
+                } @else if (u.rotateEveryDays) {<span class="o-faint o-xs">every {{ u.rotateEveryDays }} days</span>}
+                @if (u.rotateEveryDays && u.nextRotation) {<span class="o-faint o-xs" [attr.data-testid]="'svc-user-next-' + u.name">{{ rotationLine(u) }}</span>}
+                @if (has(d, 'services.instance.configure') && u.preset !== 'owner') {<button type="button" class="o-lnk o-faint" (click)="removeUser(d, u.name)" [attr.aria-label]="'Remove ' + u.name" [disabled]="busy()">×</button>}</div>
             }
-            <div class="o-cf">Per-app users: attach with “Own user” and each app gets its own least-privilege login, removed when it is detached</div>
+            <div class="o-cf">Per-app users: attach with “Own user” and each app gets its own least-privilege login, removed when it is detached. A scheduled rotation works as “Rotate credentials”: no connection fails, and the people who attached the apps are told.</div>
           </div>
         </div>
       }
       @case ('backups') {
         <div class="o-split o-w340">
           <div class="o-card">
-            <div class="o-ch"><b>Backups</b>@if (d.canManage && !d.deletedAt) {<span class="o-r"><button type="button" class="o-btn o-sm" (click)="backupNow(d)" [disabled]="busy() || d.state !== 'Running'" data-testid="svc-backup-now">Back up now</button></span>}</div>
+            <div class="o-ch"><b>Backups</b>@if (has(d, 'services.instance.configure') && !d.deletedAt) {<span class="o-r"><button type="button" class="o-btn o-sm" (click)="backupNow(d)" [disabled]="busy() || d.state !== 'Running'" data-testid="svc-backup-now">Back up now</button></span>}</div>
             @for (b of backups(); track b.name) {
               <div class="o-row" [attr.data-testid]="'svc-backup-' + b.name">
                 <span [class]="'o-dot ' + backupDot(b)"></span><span style="width:150px">{{ when(b.startedAt) || 'Pending' }}</span><span class="o-faint o-sm" style="width:80px">{{ backupNote(b) }}</span>
                 <span class="o-chip">{{ kind(b) }}</span>@if (b.volumes) {<span [class]="'o-chip ' + (b.volumes.phase === 'completed' ? 'o-grn' : b.volumes.phase === 'failed' ? 'o-red' : 'o-blu')" [title]="b.volumes.error || b.volumes.snapshots + ' volume snapshot(s)'" data-testid="svc-backup-volumes">{{ b.volumes.phase === 'completed' ? '+ queue data' : b.volumes.phase === 'failed' ? 'queue data failed' : 'snapshotting' }}</span>}<span class="o-faint o-sm">{{ keepLine(b, d.retentionDays) }}</span>
-                @if (b.phase === 'completed' && d.canManage) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore</button>}
-                @if (b.kind === 'on-demand' && d.canManage && b.phase !== 'running') {<button type="button" class="o-lnk o-faint" [class.o-r]="b.phase !== 'completed'" (click)="deleteBackup(d, b)" [attr.aria-label]="'Delete ' + b.name" [disabled]="busy()">×</button>}
+                @if (b.phase === 'completed' && has(d, 'services.data.import')) {<button type="button" class="o-lnk o-r" (click)="askRestore(d, b)">Restore</button>}
+                @if (b.kind === 'on-demand' && has(d, 'services.instance.configure') && b.phase !== 'running') {<button type="button" class="o-lnk o-faint" [class.o-r]="b.phase !== 'completed'" (click)="deleteBackup(d, b)" [attr.aria-label]="'Delete ' + b.name" [disabled]="busy()">×</button>}
               </div>
             } @empty {<div class="o-empty">No backups yet. The first is taken once {{ d.name }} is running.</div>}
             <div class="o-cf">Stored encrypted in a separate failure domain.</div>
@@ -2567,7 +3042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 <b>Restore to a point in time</b>
                 <span class="o-hint">{{ pitrHint(d) }} Restores always create a new instance; {{ d.name }} is untouched.</span>
                 <input class="o-in o-mono" type="datetime-local" step="1" aria-label="Point in time" [ngModel]="pitr()" (ngModelChange)="pitr.set($event)" data-testid="svc-pitr" />
-                <button type="button" class="o-btn o-dark" (click)="askPitr(d)" [disabled]="!d.canManage || !pitr() || !d.window?.from" data-testid="svc-pitr-go">Restore…</button>
+                <button type="button" class="o-btn o-dark" (click)="askPitr(d)" [disabled]="!has(d, 'services.data.import') || !pitr() || !d.window?.from" data-testid="svc-pitr-go">Restore…</button>
               </div>
             } @else {
               <div class="o-card o-cb o-col" style="gap:6px"><b>Restore a snapshot</b><span class="o-hint">{{ d.engineName }} restores from a daily {{ snapshotName(d) }}: pick one on the left. It always creates a new instance.</span>
@@ -2579,12 +3054,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 @if (d.engine === 'mysql') {
                   <div class="o-fld"><label>Runs</label><input class="o-in" value="Every hour, on the hour" readonly aria-label="Runs" /><span class="o-hint">MySQL restores to any second up to the latest backup: at most an hour behind.</span></div>
                 } @else {
-                  <div class="o-fld"><label for="svc-bh">Daily at</label><select id="svc-bh" class="o-in" [disabled]="!d.canManage" [ngModel]="d.backupHour" (ngModelChange)="save(d, { backupHour: +$event }, 'Backups now run daily at ' + utc(+$event) + '.')">@for (h of hours; track h) {<option [ngValue]="h">{{ utc(h) }}</option>}</select></div>
+                  <div class="o-fld"><label for="svc-bh">Daily at</label><select id="svc-bh" class="o-in" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.backupHour" (ngModelChange)="save(d, { backupHour: +$event }, 'Backups now run daily at ' + utc(+$event) + '.')">@for (h of hours; track h) {<option [ngValue]="h">{{ utc(h) }}</option>}</select></div>
                 }
-                <div class="o-fld"><label for="svc-rd">Keep for</label><select id="svc-rd" class="o-in" [disabled]="!d.canManage" [ngModel]="d.retentionDays" (ngModelChange)="save(d, { retentionDays: +$event }, 'Backups are now kept ' + $event + ' days.')">@for (k of keeps; track k) {<option [ngValue]="k">{{ k }} days</option>}</select></div>
+                <div class="o-fld"><label for="svc-rd">Keep for</label><select id="svc-rd" class="o-in" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.retentionDays" (ngModelChange)="save(d, { retentionDays: +$event }, 'Backups are now kept ' + $event + ' days.')">@for (k of keeps; track k) {<option [ngValue]="k">{{ k }} days</option>}</select></div>
               </div>
             </div>
             <o-svc-dumps [d]="d" [projectKey]="key()" [dumps]="!!engine()?.dumps" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+            <o-svc-copies [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           </div>
         </div>
       }
@@ -2602,33 +3078,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           <div class="o-card">
             <div class="o-ch"><b>Resize</b><span class="o-r">vCPU and RAM: brief failover · disk grows online</span></div>
             <div class="o-cb o-flex o-wrap">
-              <select class="o-in" style="max-width:360px" aria-label="Plan" [disabled]="!d.canManage" [ngModel]="newPlan()" (ngModelChange)="newPlan.set($event)" data-testid="svc-plan">
+              <select class="o-in" style="max-width:360px" aria-label="Plan" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="newPlan()" (ngModelChange)="newPlan.set($event)" data-testid="svc-plan">
                 @for (p of plans(); track p.id) {<option [value]="p.id">{{ p.id }} · {{ p.label }} · {{ price(p.priceCents) }}/mo</option>}
               </select>
-              <label class="o-flex o-sm" style="gap:6px">Disk <input class="o-in o-sm o-mono" style="width:80px" type="number" [min]="d.diskGb" [max]="catalog()?.maxDiskGb ?? 2000" [disabled]="!d.canManage" [ngModel]="newDisk()" (ngModelChange)="newDisk.set(+$event)" data-testid="svc-disk" /> GB</label>
-              <button type="button" class="o-btn o-dark" (click)="resize(d)" [disabled]="busy() || !d.canManage || (newPlan() === d.plan && newDisk() === d.diskGb)" data-testid="svc-resize">Resize</button>
+              <label class="o-flex o-sm" style="gap:6px">Disk <input class="o-in o-sm o-mono" style="width:80px" type="number" [min]="d.diskGb" [max]="catalog()?.maxDiskGb ?? 2000" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="newDisk()" (ngModelChange)="newDisk.set(+$event)" data-testid="svc-disk" /> GB</label>
+              <button type="button" class="o-btn o-dark" (click)="resize(d)" [disabled]="busy() || !has(d, 'services.instance.configure') || (newPlan() === d.plan && newDisk() === d.diskGb)" data-testid="svc-resize">Resize</button>
             </div>
           </div>
+          <o-svc-storage [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
+          <o-svc-upgrade [d]="d" [projectKey]="key()" (done)="notice.set($event); refresh()" (failed)="error.set($event)" />
           <div class="o-card" data-testid="svc-ha">
             <div class="o-ch"><b>High availability</b><span class="o-r">{{ d.readyNodes }} of {{ d.nodes }} node{{ d.nodes === 1 ? '' : 's' }} ready</span></div>
             @switch (engine()?.ha) {
               @case ('standby') {
-                <div class="o-row"><span style="flex:1">Standby node with automatic failover@if (d.engine === 'mysql') {<span class="o-faint o-sm"> · two semi-synchronous replicas (MOCO runs 1, 3 or 5)</span>}</span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, d.standby ? 0 : d.replicas)" aria-label="Standby" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">Standby node with automatic failover@if (d.engine === 'mysql') {<span class="o-faint o-sm"> · two semi-synchronous replicas (MOCO runs 1, 3 or 5)</span>}</span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="topology(d, !d.standby, d.standby ? 0 : d.replicas)" aria-label="Standby" data-testid="svc-standby"></button></div>
                 <div class="o-row"><span style="flex:1">Read replicas@if (d.readHost) {<span class="o-faint o-sm o-mono"> · {{ d.readHost }}</span>}</span><span class="o-faint o-sm" data-testid="svc-replicas">{{ d.replicas }}</span>
-                  @if (d.canManage) {
+                  @if (has(d, 'services.instance.configure')) {
                     <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby, d.replicas - step(d))" [disabled]="busy() || d.replicas === 0">−</button>
                     <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby || d.engine === 'mysql', d.replicas + step(d))" [disabled]="busy() || d.replicas + step(d) > (engine()?.maxReplicas ?? 0)" data-testid="svc-replica-add">+ Replica</button>
                   }</div>
                 <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now</div>
               }
               @case ('cluster') {
-                <div class="o-row"><span style="flex:1">3-node cluster<span class="o-faint o-sm"> · {{ d.engine === 'nats' ? 'streams replicated on three servers' : 'quorum queues on three nodes' }}</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="3-node cluster" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">3-node cluster<span class="o-faint o-sm"> · {{ d.engine === 'nats' ? 'streams replicated on three servers' : 'quorum queues on three nodes' }}</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="topology(d, !d.standby, 0)" aria-label="3-node cluster" data-testid="svc-standby"></button></div>
                 <div class="o-cf">Each node is billed at the plan's price · {{ nodesPrice(d) }}/mo now</div>
               }
               @case ('replica') {
-                <div class="o-row"><span style="flex:1">Replica with automatic failover<span class="o-faint o-sm"> · three Sentinels promote it if the primary fails</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!d.canManage || busy()" (click)="topology(d, !d.standby, 0)" aria-label="Replica with failover" data-testid="svc-standby"></button></div>
+                <div class="o-row"><span style="flex:1">Replica with automatic failover<span class="o-faint o-sm"> · three Sentinels promote it if the primary fails</span></span><button type="button" class="o-tog" [class.o-on]="d.standby" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="topology(d, !d.standby, 0)" aria-label="Replica with failover" data-testid="svc-standby"></button></div>
                 <div class="o-row"><span style="flex:1">Second replica@if (d.sentinel; as sn) {<span class="o-faint o-sm o-mono"> · Sentinels {{ sn.hosts.length }} × :{{ sn.port }}, master {{ sn.master }}</span>}</span><span class="o-faint o-sm" data-testid="svc-replicas">{{ d.replicas }}</span>
-                  @if (d.canManage) {
+                  @if (has(d, 'services.instance.configure')) {
                     <button type="button" class="o-btn o-xs" (click)="topology(d, d.standby, d.replicas - 1)" [disabled]="busy() || d.replicas === 0">−</button>
                     <button type="button" class="o-btn o-xs" (click)="topology(d, true, d.replicas + 1)" [disabled]="busy() || d.replicas + 1 > (engine()?.maxReplicas ?? 0)" data-testid="svc-replica-add">+ Replica</button>
                   }</div>
@@ -2643,11 +3121,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           <div class="o-card">
             <div class="o-ch"><b>Networking</b></div>
             <div class="o-row"><span style="flex:1">Private network <span class="o-faint o-sm">· always on, reachable only from attached apps</span></span><span class="o-chip o-grn">On</span></div>
-            <div class="o-row"><span style="flex:1">Public endpoint with trusted sources</span><button type="button" class="o-tog" [class.o-on]="d.publicEnabled" [disabled]="!d.canManage || busy()" (click)="save(d, { publicEnabled: !d.publicEnabled }, d.publicEnabled ? 'The public endpoint is off.' : 'The public endpoint is on for the trusted sources below.')" aria-label="Public endpoint" data-testid="svc-public"></button></div>
+            <div class="o-row"><span style="flex:1">Public endpoint with trusted sources</span><button type="button" class="o-tog" [class.o-on]="d.publicEnabled" [disabled]="!has(d, 'services.instance.configure') || busy()" (click)="save(d, { publicEnabled: !d.publicEnabled }, d.publicEnabled ? 'The public endpoint is off.' : 'The public endpoint is on for the trusted sources below.')" aria-label="Public endpoint" data-testid="svc-public"></button></div>
             @if (d.publicEnabled) {
               <div class="o-row o-wrap" style="background:var(--o-bg)">
-                @for (c of d.allowedCidrs; track c) {<span class="o-chip o-mono">{{ c }}@if (d.canManage) { <button type="button" class="o-lnk o-faint" (click)="dropCidr(d, c)" [attr.aria-label]="'Remove ' + c">×</button>}</span>}
-                @if (d.canManage) {<input class="o-in o-sm o-mono" style="width:180px" placeholder="+ IP or CIDR" aria-label="Add a trusted source" [ngModel]="cidr()" (ngModelChange)="cidr.set($event)" (keydown.enter)="addCidr(d)" data-testid="svc-cidr" />}
+                @for (c of d.allowedCidrs; track c) {<span class="o-chip o-mono">{{ c }}@if (has(d, 'services.instance.configure')) { <button type="button" class="o-lnk o-faint" (click)="dropCidr(d, c)" [attr.aria-label]="'Remove ' + c">×</button>}</span>}
+                @if (has(d, 'services.instance.configure')) {<input class="o-in o-sm o-mono" style="width:180px" placeholder="+ IP or CIDR" aria-label="Add a trusted source" [ngModel]="cidr()" (ngModelChange)="cidr.set($event)" (keydown.enter)="addCidr(d)" data-testid="svc-cidr" />}
                 <span class="o-faint o-sm o-r">TLS required</span>
               </div>
             }
@@ -2655,22 +3133,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           <div class="o-card">
             <div class="o-ch"><b>Maintenance window</b><span class="o-r">patches with 7-day notice</span></div>
             <div class="o-cb o-flex o-wrap">
-              <select class="o-in" style="width:auto" aria-label="Day" [disabled]="!d.canManage" [ngModel]="d.maintenanceDay" (ngModelChange)="save(d, { maintenanceDay: $event }, 'Maintenance window saved.')">@for (x of days; track x.id) {<option [value]="x.id">{{ x.label }}</option>}</select>
-              <select class="o-in" style="width:auto" aria-label="Hours" [disabled]="!d.canManage" [ngModel]="d.maintenanceHour" (ngModelChange)="save(d, { maintenanceHour: +$event }, 'Maintenance window saved.')">@for (h of hours; track h) {<option [ngValue]="h">{{ windowHours(h) }}</option>}</select>
+              <select class="o-in" style="width:auto" aria-label="Day" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.maintenanceDay" (ngModelChange)="save(d, { maintenanceDay: $event }, 'Maintenance window saved.')">@for (x of days; track x.id) {<option [value]="x.id">{{ x.label }}</option>}</select>
+              <select class="o-in" style="width:auto" aria-label="Hours" [disabled]="!has(d, 'services.instance.configure')" [ngModel]="d.maintenanceHour" (ngModelChange)="save(d, { maintenanceHour: +$event }, 'Maintenance window saved.')">@for (h of hours; track h) {<option [ngValue]="h">{{ windowHours(h) }}</option>}</select>
               <span class="o-faint o-sm">Minor versions of {{ d.engineName }} {{ d.version }} apply here.</span>
             </div>
           </div>
           <div class="o-card" data-testid="svc-params"><div class="o-ch"><b>Engine parameters</b><span class="o-r">validated subset</span></div><div class="o-tbl"><div class="o-tbody">
             @for (p of d.parameters; track p.name) {<div class="o-tr">
               <div class="o-td o-mono o-sm" [title]="p.description">{{ p.name }}</div>
-              <div class="o-td"><input class="o-in o-sm o-mono" style="width:120px" [placeholder]="p.default" [disabled]="!d.canManage" [attr.aria-label]="p.name" [ngModel]="paramDraft()[p.name] ?? p.value ?? ''" (ngModelChange)="setParam(p, $event)" [attr.data-testid]="'svc-param-' + p.name" /></div>
+              <div class="o-td"><input class="o-in o-sm o-mono" style="width:120px" [placeholder]="p.default" [disabled]="!has(d, 'services.instance.configure')" [attr.aria-label]="p.name" [ngModel]="paramDraft()[p.name] ?? p.value ?? ''" (ngModelChange)="setParam(p, $event)" [attr.data-testid]="'svc-param-' + p.name" /></div>
               <div class="o-td"><span class="o-chip" [class.o-amb]="p.restart">{{ p.restart ? 'restart' : 'live' }}</span></div>
               <div class="o-td o-faint o-xs o-ell" style="max-width:260px">{{ p.description }}</div>
             </div>}
           </div></div>
-            @if (d.canManage) {<div class="o-cf"><span class="o-faint o-sm">{{ paramNote(d) }}</span><button type="button" class="o-btn o-sm o-dark o-r" (click)="saveParams(d)" [disabled]="busy() || !paramsChanged()" data-testid="svc-params-save">Save parameters</button></div>}
+            @if (has(d, 'services.instance.configure')) {<div class="o-cf"><span class="o-faint o-sm">{{ paramNote(d) }}</span><button type="button" class="o-btn o-sm o-dark o-r" (click)="saveParams(d)" [disabled]="busy() || !paramsChanged()" data-testid="svc-params-save">Save parameters</button></div>}
           </div>
-          @if (d.canManage && !d.deletedAt) {
+          @if (has(d, 'services.instance.delete') && !d.deletedAt) {
             <div class="o-card" style="border-color:var(--o-bad-line)"><div class="o-row" style="padding:14px"><div class="o-col" style="gap:2px;flex:1"><b>Delete {{ d.name }}</b><span class="o-hint">Typed confirmation. Undo within 24 hours; optional final backup kept 7 days. Attached apps lose {{ envVar() }}.</span></div><button type="button" class="o-btn o-sm o-red" (click)="dialog.set({ kind: 'delete', typed: '', finalBackup: true })" data-testid="svc-delete">Delete</button></div></div>
           }
         </div>