portal-mojo 0.2.19 → 0.2.21

package/src/admin/geolocation/data.ts

@@ -0,0 +1,138 @@
+/** Private GeoLocation protocol. Raw credentials never enter Query/Mutation state. */
+import { mojoCall, MojoError } from '../../client/runtime';
+import { OperatorError, operatorOrigin, type PrivateScope } from '../fleet-configuration/shared-validation-data';
+
+export const GEOLOCATION_ENDPOINT = '/api/account/admin/settings';
+export const GEOLOCATION_KEYS = ['GEOIP_PRIMARY_PROVIDER', 'GEOIP_FALLBACK_PROVIDER', 'GEOIP_ADDITIONAL_PROVIDERS', 'GEOIP_MOJO_PROVIDER_URL', 'GEOIP_MOJO_SYNC_ENABLED'] as const;
+export interface GeoDraft {
+    GEOIP_PRIMARY_PROVIDER: string;
+    GEOIP_FALLBACK_PROVIDER: string;
+    GEOIP_ADDITIONAL_PROVIDERS: string[];
+    GEOIP_MOJO_PROVIDER_URL: string;
+    GEOIP_MOJO_SYNC_ENABLED: boolean;
+}
+export interface GeoVerdict { success: boolean; code: string | null; message: string }
+export interface StoredGeoVerification { ok: boolean; code: string | null; message: string; at: string }
+export interface GeoField { key: string; label: string; description: string; value_type: string; constraints: string }
+export interface GeoLocationState {
+    available: boolean; bucket_configured: boolean; restart_configured: boolean; pending_restart: boolean;
+    object_key: string; delegated_keys: string[]; geoip_providers: string[]; fleet_fields: GeoField[];
+    loaded_revision: string | null; published_revision: string | null; configuration_revision: string | null;
+    published_version: string | null; remote_error: string | null;
+    geoip: GeoDraft & { GEOIP_API_KEY_MOJO_CONFIGURED: boolean; GEOIP_API_KEY_MOJO_HINT: string };
+    verify_state: { geoip?: StoredGeoVerification };
+}
+export interface GeoPublication { published: boolean; unchanged: boolean; topic: 'geoip'; revision: string; published_revision: string | null; version_id: string | null; pending_restart: boolean; results: { geoip: GeoVerdict } }
+export type GeoKeyEdit = { mode: 'untouched' } | { mode: 'replace'; value: string } | { mode: 'clear'; confirmed: true };
+export class GeoLocationError extends Error {
+    constructor(public kind: 'invalid' | 'validation' | 'unsupported' | 'denied' | 'fresh' | 'conflict' | 'unavailable' | 'uncertain', message?: string) {
+        super(message ?? ({ invalid: 'GeoLocation returned an incompatible response. Refresh before continuing.', validation: 'Check the provider settings and try again.', unsupported: 'This backend does not support GeoLocation provider setup.', denied: 'GeoLocation requires a current interactive superuser session.', fresh: 'Authenticate again, then Refresh and deliberately retry. The action was not replayed.', conflict: 'Provider configuration changed; reload before publishing. Refresh and review the configuration.', unavailable: 'GeoLocation could not be read. Refresh before continuing.', uncertain: 'The save may have persisted. Refresh authoritative configuration before another attempt.' }[kind]));
+    }
+}
+const invalid = (): never => { throw new GeoLocationError('invalid'); };
+const object = (v: unknown): Record<string, unknown> => v !== null && typeof v === 'object' && !Array.isArray(v) ? v as Record<string, unknown> : invalid();
+const text = (v: unknown, max = 512): string => typeof v === 'string' && v.length <= max && !/[\x00-\x1f\x7f]/.test(v) ? v : invalid();
+const flag = (v: unknown): boolean => typeof v === 'boolean' ? v : invalid();
+const list = (v: unknown, max = 128): unknown[] => Array.isArray(v) && v.length <= max ? v : invalid();
+const nullable = <T>(v: unknown, parse: (v: unknown) => T): T | null => v === null ? null : parse(v);
+export const geoRevision = (v: unknown): string => typeof v === 'string' && /^[a-f0-9]{32,64}$/.test(v) ? v : invalid();
+export const geoProvider = (v: unknown): string => typeof v === 'string' && /^[a-z][a-z0-9_-]{0,31}$/.test(v) ? v : invalid();
+export function geoOrigin(v: unknown): string {
+    const value = text(v);
+    try {
+        const u = new URL(value);
+        if (value.trim() !== value || /[?#]/.test(value) || u.protocol !== 'https:' || !u.hostname || u.username || u.password || u.search || u.hash || !['', '/'].includes(u.pathname) || u.port && u.port !== '443') invalid();
+        // Match backend normalization: retain an explicitly supplied :443, remove only slash.
+        return value.replace(/\/$/, '');
+    } catch { return invalid(); }
+}
+export function geoDraft(value: GeoDraft): GeoDraft {
+    const additional = list(value.GEOIP_ADDITIONAL_PROVIDERS, 16).map(geoProvider);
+    if (new Set(additional).size !== additional.length) invalid();
+    return { GEOIP_PRIMARY_PROVIDER: geoProvider(value.GEOIP_PRIMARY_PROVIDER), GEOIP_FALLBACK_PROVIDER: geoProvider(value.GEOIP_FALLBACK_PROVIDER), GEOIP_ADDITIONAL_PROVIDERS: [...additional], GEOIP_MOJO_PROVIDER_URL: geoOrigin(value.GEOIP_MOJO_PROVIDER_URL), GEOIP_MOJO_SYNC_ENABLED: flag(value.GEOIP_MOJO_SYNC_ENABLED) };
+}
+/** Positive projection discards the catalog, SMS, credentials, and every unknown field. */
+export function parseGeoLocation(value: unknown): GeoLocationState {
+    const root = object(value); if (root.schema_version !== 1 || root.provider_setup == null) throw new GeoLocationError('unsupported');
+    const r = object(root.provider_setup), g = object(r.geoip), verify = object(r.verify_state);
+    const fields = list(r.fleet_fields).map(value => { const f = object(value); return { key: text(f.key, 80), label: text(f.label, 200), description: text(f.description, 2000), value_type: text(f.value_type, 32), constraints: text(f.constraints, 500) }; });
+    if (new Set(fields.map(f => f.key)).size !== fields.length) invalid();
+    const hint = text(g.GEOIP_API_KEY_MOJO_HINT, 4); if (hint !== '' && hint.length !== 4) invalid();
+    const stored = verify.geoip == null ? undefined : object(verify.geoip);
+    return { available: flag(r.available), bucket_configured: flag(r.bucket_configured), restart_configured: flag(r.restart_configured), pending_restart: flag(r.pending_restart),
+        object_key: text(r.object_key, 1024), delegated_keys: list(r.delegated_keys, 1024).map(v => text(v, 100)), geoip_providers: list(r.geoip_providers).map(geoProvider), fleet_fields: fields,
+        loaded_revision: nullable(r.loaded_revision, geoRevision), published_revision: nullable(r.published_revision, geoRevision), configuration_revision: nullable(r.configuration_revision, geoRevision),
+        published_version: nullable(r.published_version, v => text(v, 1024)), remote_error: nullable(r.remote_error, v => text(v, 200)),
+        geoip: { ...geoDraft(g as unknown as GeoDraft), GEOIP_API_KEY_MOJO_CONFIGURED: flag(g.GEOIP_API_KEY_MOJO_CONFIGURED), GEOIP_API_KEY_MOJO_HINT: hint },
+        verify_state: stored ? { geoip: { ok: flag(stored.ok), code: nullable(stored.code, v => text(v, 64)), message: text(stored.message, 200), at: text(stored.at, 40) } } : {},
+    };
+}
+/** Credential diagnostics need the provider schema, independently of Fleet publishing. */
+export function geoTestBlock(state: GeoLocationState): string | null {
+    const types = ['string', 'string', 'list', 'origin', 'boolean'];
+    if (!GEOLOCATION_KEYS.every((key, i) => state.delegated_keys.includes(key) && state.fleet_fields.some(f => f.key === key && f.value_type === types[i]))) return 'All five GeoIP fields must be registered and delegated before provider setup can change.';
+    return null;
+}
+export function geoWriteBlock(state: GeoLocationState): string | null {
+    if (state.remote_error) return 'The published configuration could not be read. Resolve the remote read failure and Refresh.';
+    const schema = geoTestBlock(state); if (schema) return schema;
+    if (!state.available || !state.bucket_configured || !state.restart_configured || !state.object_key) return 'Fleet publishing is unavailable. Configure its exact bucket and object, all provider delegations, KMS encryption and config-sync restart in deployment settings.';
+    return null;
+}
+const providerLabels: Record<string, string> = { mojo: 'MojoVerify', ipinfo: 'IPinfo', ipstack: 'IPstack', 'ip-api': 'IP-API', maxmind: 'MaxMind' };
+export const geoProviderLabel = (provider: string): string => providerLabels[provider] ?? provider;
+export function geoProviderOptions(state: GeoLocationState, draft: GeoDraft): string[] {
+    return [...new Set([...state.geoip_providers, draft.GEOIP_PRIMARY_PROVIDER, draft.GEOIP_FALLBACK_PROVIDER, ...draft.GEOIP_ADDITIONAL_PROVIDERS])];
+}
+export function buildGeoPayload(action: 'test_providers' | 'configure_providers', revision: string | null, draft: GeoDraft, edit: GeoKeyEdit = { mode: 'untouched' }): Record<string, unknown> {
+    nullable(revision, geoRevision);
+    let geoip: GeoDraft & { GEOIP_API_KEY_MOJO?: string; clear_api_key?: true };
+    try { geoip = geoDraft(draft); } catch { throw new GeoLocationError('validation', 'Use valid provider identifiers, up to 16 unique additional providers, and one HTTPS origin without a path, query, fragment or alternate port.'); }
+    if (edit.mode === 'replace') {
+        if (typeof edit.value !== 'string' || edit.value.length > 4096) throw new GeoLocationError('validation', 'The replacement key must be at most 4096 characters.');
+        if (edit.value !== '') geoip.GEOIP_API_KEY_MOJO = edit.value;
+    } else if (edit.mode === 'clear') {
+        if (edit.confirmed !== true) throw new GeoLocationError('validation', 'Confirm key removal first.');
+        geoip.clear_api_key = true;
+    }
+    return { action, topic: 'geoip', providers: { expected_revision: revision, geoip } };
+}
+export function parseGeoVerdict(value: unknown): GeoVerdict { const r = object(value); return { success: flag(r.success), code: nullable(r.code, v => text(v, 64)), message: text(r.message, 200) }; }
+export function parseGeoTest(value: unknown): GeoVerdict {
+    const r = object(value); if (r.tested !== true || r.topic !== 'geoip') invalid();
+    const result = parseGeoVerdict(object(r.results).geoip); if (flag(r.success) !== result.success) invalid(); return result;
+}
+export function parseGeoPublication(value: unknown): GeoPublication {
+    const r = object(value); if (r.topic !== 'geoip') invalid();
+    const out: GeoPublication = { published: flag(r.published), unchanged: flag(r.unchanged), topic: 'geoip', revision: geoRevision(r.revision), published_revision: nullable(r.published_revision, geoRevision), version_id: nullable(r.version_id, v => text(v, 1024)), pending_restart: flag(r.pending_restart), results: { geoip: parseGeoVerdict(object(r.results).geoip) } };
+    if (out.published === out.unchanged || !out.results.geoip.success || out.published && (!out.pending_restart || out.published_revision !== out.revision)) invalid();
+    return out;
+}
+async function geoCall(body: Record<string, unknown> | null, scope: PrivateScope = {}): Promise<unknown> {
+    try {
+        if (body) operatorOrigin();
+        const reply = await mojoCall(GEOLOCATION_ENDPOINT, { ...(body ? { method: 'POST', body, refusal: 'return' } as const : {}), signal: scope.signal, beforeSend: () => { if (body) operatorOrigin(); scope.beforeSend?.(); } });
+        scope.beforeSend?.();
+        return reply.data ?? reply;
+    } catch (reason) {
+        if (reason instanceof GeoLocationError) throw reason;
+        if (reason instanceof OperatorError && reason.kind === 'denied') throw new GeoLocationError('denied');
+        if (scope.signal?.aborted) throw new GeoLocationError('denied');
+        if (reason instanceof MojoError) {
+            if (reason.status === 440) throw new GeoLocationError('fresh');
+            if ([401, 403].includes(reason.status)) throw new GeoLocationError('denied');
+            if ([404, 405].includes(reason.status)) throw new GeoLocationError('unsupported');
+            if (reason.status === 409 || reason.status === 400 && /changed; reload before publishing/i.test(reason.message)) throw new GeoLocationError('conflict');
+            if (reason.status === 400) throw new GeoLocationError('validation', 'The server rejected the provider settings or credential. Check the MojoVerify key. Pending service configuration may need Fleet Configuration applied first, or a replacement key.');
+        }
+        throw new GeoLocationError(body?.action === 'configure_providers' ? 'uncertain' : 'unavailable');
+    } finally {
+        // The only raw-bearing object has a deliberately short lifetime, including rejected calls.
+        if (body) delete ((body.providers as { geoip: Record<string, unknown> }).geoip).GEOIP_API_KEY_MOJO;
+    }
+}
+export const readGeoLocation = async (scope?: PrivateScope): Promise<GeoLocationState> => parseGeoLocation(await geoCall(null, scope));
+export const testGeoLocation = async (revision: string | null, draft: GeoDraft, edit?: GeoKeyEdit, scope?: PrivateScope): Promise<GeoVerdict> => parseGeoTest(await geoCall(buildGeoPayload('test_providers', revision, draft, edit), scope));
+export const saveGeoLocation = async (revision: string | null, draft: GeoDraft, edit?: GeoKeyEdit, scope?: PrivateScope): Promise<GeoPublication> => parseGeoPublication(await geoCall(buildGeoPayload('configure_providers', revision, draft, edit), scope));
+/** Mount-relative sibling destination, including an embedded Admin prefix. */
+export const geoFleetRoute = (pathname: string): string => pathname.replace(/\/geolocation\/?$/, '/fleet-configuration');

package/src/admin/geolocation/index.ts

@@ -0,0 +1,3 @@
+export { GeoLocationPage } from './GeoLocationPage';
+export { GEOLOCATION_ENDPOINT, GEOLOCATION_KEYS, GeoLocationError, parseGeoLocation, geoDraft, geoProviderOptions, geoWriteBlock, geoFleetRoute, buildGeoPayload, parseGeoTest, parseGeoPublication, readGeoLocation, testGeoLocation, saveGeoLocation } from './data';
+export type { GeoDraft, GeoField, GeoKeyEdit, GeoLocationState, GeoVerdict, GeoPublication, StoredGeoVerification } from './data';

package/src/admin/identity/groups/group-sections/SubGroupsSection.tsx

@@ -3,15 +3,85 @@
 // Name / Kind badge / Status / Created — with row click-through to that
 // group's stacked GroupDetail, and the "Add Group" flow (GroupForms.create
 // minus the redundant parent field; the parent IS this group —
-// GroupView._addSubGroup:1670-1689).
+// GroupView._addSubGroup:1670-1689). Above the table, system admins get the
+// django-mojo #9107/#9126 switch that lets this group's own administrators
+// create groups directly under it (no web-mojo source; new in portal-mojo).
+import { useQueryClient } from '@tanstack/react-query';
 import {
     Badge, Eyebrow,
     fmt, formModal, toast,
 } from 'portal-mojo/ui';
-import { useCan } from 'portal-mojo/client/runtime';
+import { MojoError, useCan } from 'portal-mojo/client/runtime';
 import { GROUP_MANAGE_PERMS, GroupModel, type GroupRow } from '../models';
 import { GROUP_KIND_COMBO_OPTIONS, kindLabel } from './models';
 
+/** The policy key django-mojo keeps under metadata.protected (Group.SUBGROUP_POLICY_KEY). */
+const SUBGROUP_POLICY_KEY = 'allow_member_subgroups';
+
+function protectedMetadata(group: GroupRow): Record<string, unknown> {
+    const value = group.metadata?.protected;
+    return value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : {};
+}
+
+/** On only when exactly true — the backend's Group.allows_member_subgroups(). */
+export function allowsMemberSubgroups(group: GroupRow): boolean {
+    return protectedMetadata(group)[SUBGROUP_POLICY_KEY] === true;
+}
+
+/**
+ * The system-admin switch. The server action answers with the new value,
+ * not the row, so the one-record cache is written through here and the
+ * action's own invalidation refetches the group behind it.
+ */
+function MemberSubgroupsSwitch({ group }: { group: GroupRow }) {
+    const qc = useQueryClient();
+    const policy = GroupModel.useAction(SUBGROUP_POLICY_KEY);
+    const on = allowsMemberSubgroups(group);
+
+    const change = async (next: boolean) => {
+        try {
+            const outcome = await policy.mutateAsync({ id: group.id, payload: next });
+            const echoed = outcome.result.payload[SUBGROUP_POLICY_KEY];
+            const value = typeof echoed === 'boolean' ? echoed : next;
+            // Off removes the key, as the server does.
+            const nextProtected = { ...protectedMetadata(group) };
+            if (value) nextProtected[SUBGROUP_POLICY_KEY] = true;
+            else delete nextProtected[SUBGROUP_POLICY_KEY];
+            qc.setQueryData(GroupModel.keys.one(group.id), {
+                ...group,
+                metadata: { ...group.metadata, protected: nextProtected },
+            });
+            toast.success(value
+                ? `${group.name}'s administrators can now create sub-groups`
+                : `${group.name}'s administrators can no longer create sub-groups`);
+        } catch (err) {
+            toast.error(err instanceof MojoError && err.status === 403
+                ? 'You do not have permission to change who can create sub-groups'
+                : err instanceof Error ? err.message : 'Could not change the setting');
+        }
+    };
+
+    return (
+        <div style={{ marginBottom: 12 }}>
+            <label className="switch-row">
+                <input
+                    type="checkbox"
+                    role="switch"
+                    className="switch"
+                    checked={on}
+                    disabled={policy.isPending}
+                    onChange={(e) => void change(e.target.checked)}
+                />
+                <span className="field-label">Administrators can create sub-groups</span>
+            </label>
+            <span className="field-help">
+                While on, people who manage this group as members can create groups directly under it.
+                It does not pass down to the new groups, and turning it off leaves existing groups alone.
+            </span>
+        </div>
+    );
+}
+
 /** GroupModel.useSave().mutateAsync — what the add-sub-group flow needs. */
 type GroupSaveFn = (vars: { id: number | string | null; changes: Record<string, unknown> }) => Promise<GroupRow>;
 
@@ -54,6 +124,7 @@ export function SubGroupsSection({ group, openGroup }: {
     return (
         <>
             <Eyebrow>Sub-groups</Eyebrow>
+            {canManage && <MemberSubgroupsSwitch group={group} />}
             {canManage && (
                 <div className="ga-toolbar">
                     <button className="btn btn-primary btn-compact" onClick={() => void runAddSubGroupFlow(group, save.mutateAsync)}>

package/src/admin/identity/groups/models.ts

@@ -66,5 +66,7 @@ export const GroupModel = defineModel<GroupRow>({
     actions: {
         disable: { permissions: GROUP_DESTRUCTIVE_PERMS },
         reactivate: { permissions: GROUP_DESTRUCTIVE_PERMS },
+        // django-mojo #9126: answers {status, allow_member_subgroups}, not the row.
+        allow_member_subgroups: { permissions: GROUP_MANAGE_PERMS, response: 'payload' },
     },
 });

package/src/admin/identity/members/GroupMembersPanel.tsx

@@ -1,3 +1,4 @@
+import { ComboBox } from '../../../ui/ComboBox';
 import { useEffect, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCan, type Params } from '../../../client/runtime';
@@ -135,14 +136,7 @@ export function GroupMembersPanel({
                     className="input" type="search" placeholder="Search members…"
                     value={search} onChange={(event) => setSearch(event.target.value)}
                 />
-                <select
-                    className="input input-compact" value={status} aria-label="Status filter"
-                    onChange={(event) => setStatus(event.target.value as StatusFilter)}
-                >
-                    <option value="active">Active</option>
-                    <option value="inactive">Inactive</option>
-                    <option value="all">All</option>
-                </select>
+                <ComboBox allowCustom={false} maxSuggestions={Number.MAX_SAFE_INTEGER} value={String(status)} aria-label="Status filter" onChange={(selectedValue) => setStatus(String(selectedValue) as StatusFilter)} options={[({ value: "active", label: "Active" }), ({ value: "inactive", label: "Inactive" }), ({ value: "all", label: "All" })]} />
             </div>
             {query.isPending && <div className="skel skel-block" />}
             {query.error && <p className="text-bad">{query.error.message}</p>}

package/src/admin/index.ts

@@ -26,3 +26,11 @@ export * from './assistant';
 export { ADMIN_SECTIONS } from './registry';
 export { FleetConfigurationPage, FleetNodeStatus } from './fleet-configuration/FleetConfigurationPage';
 export { FLEET_CONFIGURATION_ADMIN_SECTION } from './domains/operations';
+export * from './fleet';
+export * from './geolocation';
+export { FLEET_ADMIN_SECTION } from './domains/infrastructure';
+export { GEOLOCATION_ADMIN_SECTION } from './domains/operations';
+export * from './maintenance';
+export { MAINTENANCE_ADMIN_SECTION } from './domains/operations';
+export * from './deployments';
+export { DEPLOYMENTS_ADMIN_SECTION } from './domains/operations';

package/src/admin/maintenance/MaintenanceDialogs.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useRef, useState } from 'react';
+import { frameworkActionLabel, type Finding, type Framework } from './data';
+import { datetime } from '../../ui/format';
+import { FleetHelp as MaintenanceHelp } from '../fleet/FleetHelp';
+import type { MaintenanceAttempt } from './operations';
+export function MaintenanceDialog({
+    finding,
+    framework,
+    busy,
+    onConfirm,
+    onClose,
+}: {
+    finding?: Finding;
+    framework?: Framework;
+    busy: boolean;
+    onConfirm: (immediate: boolean) => void;
+    onClose: () => void;
+}) {
+    const dialog = useRef<HTMLDialogElement>(null);
+    const [typed, setTyped] = useState(''),
+        [windowChoice, setWindowChoice] = useState<'now' | 'window' | ''>('');
+    const expected = finding?.resource_id ?? framework?.latest ?? '';
+    useEffect(() => {
+        const d = dialog.current;
+        d?.showModal();
+        return () => d?.close();
+    }, []);
+    return (
+        <dialog
+            ref={dialog}
+            className="maintenance-dialog"
+            aria-labelledby="maintenance-confirm-title"
+            onCancel={(e) => {
+                e.preventDefault();
+                if (!busy) onClose();
+            }}
+        >
+            <div className="maintenance-dialog-body">
+                <h2 id="maintenance-confirm-title">
+                    {finding
+                        ? `Upgrade ${finding.resource_id}?`
+                        : framework
+                          ? frameworkActionLabel(framework)
+                          : 'Review update'}
+                </h2>
+                <div className="maintenance-dialog-scroll">
+                <p>
+                    {finding
+                        ? `${finding.engine}: ${finding.current_version} → ${finding.available_major}`
+                        : `Installed ${framework?.installed ?? 'unknown'} → ${framework?.latest ?? 'unknown'}`}
+                </p>
+                <p className="maintenance-warning">
+                    {finding
+                        ? finding.kind === 'elasticache'
+                            ? 'This restarts cache nodes. Clients reconnect and cached data may be lost. A major upgrade cannot be undone; recovery means restoring a snapshot.'
+                            : 'The database goes offline during the engine upgrade. Multi-AZ may fail over; a single instance is unavailable. A major upgrade cannot be undone; recovery means restoring a snapshot.'
+                        : 'This clears the current pin, restores automatic latest-version updates, and redeploys the last converged application SHA. Services restart as the canary migrates and the fleet rolls. Acceptance does not prove fleet completion.'}
+                </p>
+                {finding && (
+                    <fieldset disabled={busy}>
+                        <legend>Choose the outage window</legend>
+                        <label>
+                            <input
+                                type="radio"
+                                name="maintenance-window"
+                                checked={windowChoice === 'window'}
+                                onChange={() => setWindowChoice('window')}
+                            />{' '}
+                            Next maintenance window
+                        </label>
+                        <label>
+                            <input
+                                type="radio"
+                                name="maintenance-window"
+                                checked={windowChoice === 'now'}
+                                onChange={() => setWindowChoice('now')}
+                            />{' '}
+                            Immediately
+                        </label>
+                    </fieldset>
+                )}
+                <label className="maintenance-confirm-label">
+                    Type {expected} to confirm
+                    <input
+                        autoFocus
+                        autoComplete="off"
+                        value={typed}
+                        disabled={busy}
+                        onChange={(e) => setTyped(e.target.value)}
+                    />
+                </label>
+                </div>
+                <div className="maintenance-actions">
+                    <button className="btn" disabled={busy} onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button
+                        className="btn btn-danger"
+                        disabled={busy || typed !== expected || !expected || (!!finding && !windowChoice)}
+                        onClick={() => onConfirm(windowChoice === 'now')}
+                    >
+                        {busy ? 'Requesting…' : finding ? 'Apply upgrade' : 'Confirm framework update'}
+                    </button>
+                </div>
+            </div>
+        </dialog>
+    );
+}
+
+export function MaintenancePolicyDialog({ framework, busy, error, onSave, onClose }: {
+    framework: Framework; busy: boolean; error: string; onSave: (value: string) => void; onClose: () => void;
+}) {
+    const dialog = useRef<HTMLDialogElement>(null);
+    const [mode, setMode] = useState(framework.pin.mode);
+    const [version, setVersion] = useState(framework.pin.mode === 'pinned' ? framework.pin.value ?? '' : framework.installed ?? '');
+    const value = mode === 'latest' ? '' : mode === 'hold' ? 'hold' : version.trim().toLowerCase();
+    const valid = mode !== 'pinned' || /^[0-9][a-z0-9._!+-]{0,63}$/.test(value);
+    const unchanged = mode === framework.pin.mode && (mode !== 'pinned' || value === framework.pin.value);
+    useEffect(() => { const d = dialog.current; d?.showModal(); return () => d?.close(); }, []);
+    return <dialog ref={dialog} className="maintenance-dialog" aria-labelledby="maintenance-policy-title" onCancel={e => { e.preventDefault(); if (!busy) onClose(); }}>
+        <div className="maintenance-dialog-body"><h2 id="maintenance-policy-title">Framework update policy</h2>
+            <div className="maintenance-dialog-scroll">
+                <p>This saves policy only. Nodes change on a later deployment.</p>
+                <fieldset disabled={busy}><legend>Version policy</legend>
+                    <label><input type="radio" name="framework-policy" checked={mode === 'latest'} onChange={() => setMode('latest')} /> Automatic</label>
+                    <label><input type="radio" name="framework-policy" checked={mode === 'hold'} onChange={() => setMode('hold')} /> Hold</label>
+                    <label><input type="radio" name="framework-policy" checked={mode === 'pinned'} onChange={() => setMode('pinned')} /> Exact version</label>
+                </fieldset>
+                {mode === 'pinned' && <label className="field"><span className="field-label">Version</span><input className="input" disabled={busy} value={version} onChange={e => setVersion(e.target.value)} autoComplete="off" placeholder="1.39.6" /></label>}
+                <p className="dim">{mode === 'latest' ? 'Each deployment installs the newest published release.' : mode === 'hold' ? 'Keep the framework version from the last converged deployment.' : 'Each deployment installs this exact version.'} <MaintenanceHelp label="framework policy"><p>Hold requires a last converged framework version. Exact version checks syntax here; release availability is checked during deployment.</p><p>The separate framework Update action clears Hold or Exact and deploys the latest published version.</p></MaintenanceHelp></p>
+                {error && <p role="alert" className="form-alert">{error}</p>}
+            </div>
+            <div className="maintenance-actions"><button className="btn" disabled={busy} onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={busy || !valid || unchanged} onClick={() => onSave(value)}>{busy ? 'Saving…' : 'Save policy'}</button></div>
+        </div>
+    </dialog>;
+}
+export function MaintenanceProgressDialog({ attempt, busy, onObserve, onClose, deploymentsHref }: {
+    attempt: MaintenanceAttempt; busy: boolean; onObserve: () => void; onClose: () => void; deploymentsHref?: string;
+}) {
+    const dialog = useRef<HTMLDialogElement>(null);
+    useEffect(() => { const d = dialog.current; d?.showModal(); return () => d?.close(); }, []);
+    const resource = 'kind' in attempt.input ? attempt.input : null;
+    const target = resource?.target_version ?? ('version' in attempt.input ? attempt.input.version : 'policy' in attempt.input ? attempt.input.policy || 'Automatic' : '');
+    const observation = attempt.observation;
+    return <dialog ref={dialog} className="maintenance-dialog" aria-labelledby="maintenance-progress-title" onCancel={e => { e.preventDefault(); if (!busy) onClose(); }}>
+        <div className="maintenance-dialog-body"><h2 id="maintenance-progress-title">Update progress</h2>
+            <div className="maintenance-dialog-scroll">
+                <strong>{resource?.resource ?? ('policy' in attempt.input ? 'Framework policy' : 'Django-MOJO')}</strong>
+                <p role="status">{attempt.message}</p>
+                <dl className="maintenance-progress-facts"><dt>Target</dt><dd>{target}</dd>{resource && <><dt>When</dt><dd>{resource.apply_immediately ? 'Immediately' : 'Next configured AWS window'}</dd></>}<dt>Last observation</dt><dd>{attempt.observedAt ? datetime(attempt.observedAt) : 'Not observed yet'}</dd></dl>
+                {observation && <><p>{observation.found ? `${observation.status ?? 'Status unknown'} · ${observation.engine_version ?? 'Version unknown'}` : 'Resource not found — outcome remains unconfirmed.'}</p>{observation.pending_version && <p>Pending version: {observation.pending_version}</p>}<p className="dim">Observed versions: {observation.engine_versions.join(', ') || 'Unknown'} · {observation.settled ? 'Provider settled' : 'Still changing'}</p></>}
+                {attempt.deployment && <p className="dim">Deployment {attempt.deployment.id}</p>}
+                {attempt.frameworkObservation?.nodes.map(node => <p key={node.runner}>{node.runner} · {node.state} · {node.version ?? 'Version unreported'}</p>)}
+                {'version' in attempt.input && !attempt.deployment && <p className="maintenance-warning">Deployment acceptance is unknown. Reconcile server deployment logs; a matching version or latest deployment cannot identify this request.</p>}
+                <p className="dim">Closing this dialog does not cancel submitted work. <MaintenanceHelp label="update recovery"><p>Unknown outcomes stay guarded. Refresh only reads evidence and never resends a write. Receipts survive navigation in this document, but a full browser reload loses them.</p>{resource?.kind === 'rds-cluster' && <p>Aurora reports cluster-level settlement; individual database member proof is unavailable here.</p>}</MaintenanceHelp></p>
+                {deploymentsHref && 'version' in attempt.input && <a href={deploymentsHref}>Open Deployments</a>}
+            </div>
+            <div className="maintenance-actions"><button className="btn" disabled={busy} onClick={onClose}>Close</button>{attempt.state !== 'complete' && attempt.state !== 'refused' && (!('version' in attempt.input) || !!attempt.deployment) && <button className="btn btn-primary" disabled={busy || attempt.state === 'sending'} onClick={onObserve}>{busy ? 'Observing…' : 'Refresh status'}</button>}</div>
+        </div>
+    </dialog>;
+}