portal-mojo 0.2.2 → 0.2.4

package/src/admin/jobs/purge-preview.ts

@@ -0,0 +1,25 @@
+/** A preview is an estimate for an immutable filter tuple, never a snapshot. */
+export interface PurgeParameters { daysOld: number; status: string | null }
+export interface PurgePreviewIdentity { id: number; params: Readonly<PurgeParameters> }
+export function createPurgePreviewGuard() {
+    let generation = 0;
+    let accepted: PurgePreviewIdentity | null = null;
+    let disposed = false;
+    return {
+        begin(params: PurgeParameters): PurgePreviewIdentity {
+            accepted = null;
+            return { id: ++generation, params: Object.freeze({ ...params }) };
+        },
+        accept(identity: PurgePreviewIdentity): boolean {
+            if (disposed || identity.id !== generation) return false;
+            accepted = identity;
+            return true;
+        },
+        execution(identity: PurgePreviewIdentity): Readonly<PurgeParameters> | null {
+            return !disposed && accepted === identity && identity.id === generation ? identity.params : null;
+        },
+        current(identity: PurgePreviewIdentity) { return !disposed && identity.id === generation; },
+        invalidate() { generation++; accepted = null; },
+        dispose() { disposed = true; generation++; accepted = null; },
+    };
+}

package/src/admin/jobs/sections/JobOperationsSection.tsx

@@ -13,9 +13,9 @@
 //   · clear-queue's `confirm:"yes"` is sent only AFTER the armed confirmation.
 //     Pre-satisfying a server-side safety gate removes it.
 //   · every destructive control is an ArmedButton, not a plain button.
-import { useState, type ReactNode } from 'react';
-import { ArmedButton, JsonBlock, modal, toast } from '../../../ui';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { useCan } from '../../../client/runtime';
+import { ArmedButton, JsonBlock, modal, toast } from '../../../ui';
 import {
     cleanupConsumers,
     clearQueue,
@@ -33,6 +33,8 @@ import {
 } from '../control';
 import { JOBS_MANAGE_PERMS, JOB_STATUS_OPTIONS } from '../models';
 
+import { createPurgePreviewGuard, type PurgePreviewIdentity } from '../purge-preview';
+
 const ALL_CHANNELS = '';
 
 function OperationRow({ label, icon, description, children, note }: {
@@ -56,63 +58,69 @@ function OperationRow({ label, icon, description, children, note }: {
 
 // ── Purge dialog: preview, then arm ───────────────────────────────────
 
-function PurgeDialog({ onClose }: { onClose: () => void }) {
+export function PurgeDialog({ onClose, onExecuting }: { onClose: () => void; onExecuting?: (value: boolean) => void }) {
     const [days, setDays] = useState(30);
     const [status, setStatus] = useState('');
-    const [preview, setPreview] = useState<PurgeResult | null>(null);
+    const guard = useRef(createPurgePreviewGuard());
+    const [preview, setPreview] = useState<(PurgePreviewIdentity & { result: PurgeResult }) | null>(null);
     const [busy, setBusy] = useState(false);
-
+    const [executing, setExecuting] = useState(false);
+    const executionLock = useRef(false);
+    const mounted = useRef(false);
+    const [outcome, setOutcome] = useState<PurgeResult | null>(null);
+    const { can: canManage } = useCan(JOBS_MANAGE_PERMS);
+    useEffect(() => {
+        guard.current = createPurgePreviewGuard(); mounted.current = true;
+        return () => { mounted.current = false; guard.current.dispose(); };
+    }, []);
+    const invalidate = () => { if (executionLock.current) return; guard.current.invalidate(); setPreview(null); setBusy(false); };
     const runPreview = async () => {
-        setBusy(true);
-        setPreview(null);
+        if (!canManage || executionLock.current) return;
+        const identity = guard.current.begin({ daysOld: Math.max(0, Math.floor(days)), status: status || null });
+        setBusy(true); setPreview(null); setOutcome(null);
         try {
-            const result = await purgeJobs({ daysOld: days, status: status || null, dryRun: true });
-            setPreview(result);
+            const result = await purgeJobs({ ...identity.params, dryRun: true });
+            if (guard.current.accept(identity)) setPreview(Object.assign(identity, { result }));
         } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Purge preview failed');
-        } finally {
-            setBusy(false);
-        }
+            if (guard.current.current(identity)) toast.error(error instanceof Error ? error.message : 'Purge preview failed');
+        } finally { if (guard.current.current(identity)) setBusy(false); }
     };
-
     const runPurge = async () => {
-        setBusy(true);
+        const params = preview && guard.current.execution(preview);
+        if (!canManage || busy || executionLock.current || !params) return;
+        executionLock.current = true; onExecuting?.(true); setExecuting(true);
+        guard.current.invalidate(); setPreview(null); setBusy(true);
         try {
-            const result = await purgeJobs({ daysOld: days, status: status || null });
-            // A REAL run reports `deleted`; only the dry run has `count`.
-            const deleted = isPurgeDryRun(result) ? result.count : result.deleted;
-            toast.success(`Purged ${deleted} record(s) older than ${days} day(s)`);
-            onClose();
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Purge failed');
-        } finally {
-            setBusy(false);
-        }
+            const result = await purgeJobs({ ...params });
+            if (mounted.current) { setOutcome(result); setPreview(null); }
+        } catch (error) { if (mounted.current) toast.error(error instanceof Error ? error.message : 'Purge failed'); }
+        finally { executionLock.current = false; onExecuting?.(false); if (mounted.current) { setExecuting(false); setBusy(false); } }
     };
-
-    const previewCount = preview && isPurgeDryRun(preview) ? preview.count : null;
+    const previewCount = preview && isPurgeDryRun(preview.result) ? preview.result.count : null;
 
     return (
         <div className="modal-pad">
             <h2 className="modal-title">Purge old jobs</h2>
             <p className="dim">
                 Deletes job rows older than the cutoff, and their events and logs with them. Preview first — the
-                count is the only way to know what the cutoff actually covers.
+                preview is an estimate. Execution recalculates the cutoff; deleted counts include cascaded event and log rows.
             </p>
             <label className="jobs-field">
                 <span>Older than (days)</span>
                 <input
                     type="number" className="input input-compact" min={0} step={1}
+                    disabled={executing}
                     value={days}
-                    onChange={(event) => { setDays(Math.max(0, Number(event.target.value) || 0)); setPreview(null); }}
+                    onChange={(event) => { setDays(Math.max(0, Math.floor(Number(event.target.value) || 0))); invalidate(); }}
                 />
             </label>
             <label className="jobs-field">
                 <span>Status filter</span>
                 <select
                     className="input input-compact"
+                    disabled={executing}
                     value={status}
-                    onChange={(event) => { setStatus(event.target.value); setPreview(null); }}
+                    onChange={(event) => { setStatus(event.target.value); invalidate(); }}
                 >
                     <option value="">Every status</option>
                     {JOB_STATUS_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
@@ -123,23 +131,25 @@ function PurgeDialog({ onClose }: { onClose: () => void }) {
                 <p className={`jobs-note ${previewCount > 0 ? 'jobs-note-warn' : 'jobs-note-info'}`}>
                     <i className="bi bi-info-circle" />
                     {previewCount > 0
-                        ? <> <strong>{previewCount}</strong> job(s) would be deleted, created before {new Date(preview.cutoff).toLocaleString()}.</>
+                        ? <> <strong>{previewCount}</strong> job(s) would be deleted, created before {new Date(preview.result.cutoff).toLocaleString()}.</>
                         : <> Nothing matches — no job is older than that cutoff.</>}
                 </p>
             )}
 
+            {outcome && <div className="jobs-note jobs-note-info"><h3>Execution result (actual cutoff)</h3><JsonBlock value={outcome} defaultOpen /></div>}
             <div className="modal-actions">
-                <button type="button" className="btn" onClick={onClose}>Cancel</button>
+                <button type="button" className="btn" disabled={executing} onClick={() => { invalidate(); onClose(); }}>Cancel</button>
                 <button type="button" className="btn" disabled={busy} onClick={() => void runPreview()}>
                     {busy && !preview ? 'Previewing…' : 'Preview'}
                 </button>
                 <ArmedButton
+                    key={preview?.id ?? 'no-preview'}
                     label="Purge"
                     armedLabel={previewCount != null ? `Click again to delete ${previewCount} job(s)` : 'Click again to purge'}
                     className="btn-danger-ghost"
                     // Arming before a preview would be arming a number nobody
                     // has seen.
-                    disabled={busy || previewCount == null || previewCount === 0}
+                    disabled={!canManage || busy || previewCount == null || previewCount === 0}
                     onConfirm={runPurge}
                 />
             </div>
@@ -208,6 +218,7 @@ export function JobOperationsSection({ channels, channelsPending, onChanged }: {
     onChanged?: () => void;
 }) {
     const { can: canManage } = useCan(JOBS_MANAGE_PERMS);
+    const purgeExecuting = useRef(false);
     const [channel, setChannel] = useState(ALL_CHANNELS);
     const noChannels = !channelsPending && channels.length === 0;
     // A stale selection must never become a request for a channel that no
@@ -368,8 +379,8 @@ export function JobOperationsSection({ channels, channelsPending, onChanged }: {
                 <button
                     type="button" className="btn btn-compact btn-danger-ghost" disabled={!canManage}
                     onClick={() => void modal.open((close) => (
-                        <PurgeDialog onClose={() => { close(null); onChanged?.(); }} />
-                    ), { size: 'sm' })}
+                        <PurgeDialog onExecuting={value => { purgeExecuting.current = value; }} onClose={() => { if (!purgeExecuting.current) { close(null); onChanged?.(); } }} />
+                    ), { size: 'sm', canDismiss: () => !purgeExecuting.current })}
                 >
                     Purge…
                 </button>

package/src/admin/messaging/EmailDomainsPage.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
 import { ArmedButton, Badge, DetailView, FlatRow, ModelTable, SchemaForm, fmt, formModal, modal, toast, type Column, type FilterDef, type FormData } from '../../ui';
-import { auditEmailDomain, deleteMessagingRow, reconcileEmailDomain, saveEmailDomainAtomic } from './api';
+import { auditEmailDomain, reconcileEmailDomain, saveEmailDomainAtomic } from './api';
 import { exportEmailDomains } from './data';
 import { openEmailDomainWizard } from './EmailDomainWizard';
 import { EmailDomainModel, type EmailDomainRow } from './models';
@@ -13,5 +13,5 @@ const fields=[{name:'name',label:'Domain',type:'text',required:true},{name:'regi
 
 function DomainCreate({close}:{close:(value:unknown)=>void}) { const qc=useQueryClient(); const [draft,setDraft]=useState<FormData|null>(null);const [awsKey,setAwsKey]=useState('');const [awsSecret,setAwsSecret]=useState(''); return <div className="modal-pad"><h2 className="modal-title">Create email domain</h2><p className="form-alert">Creation may run best-effort SES audit/reconcile. A created row does not mean AWS converged.</p>{draft?<><p>Ready to create <b>{String(draft.name)}</b>. Optional credentials are write-only and discarded immediately after submission.</p><label className="field"><span className="field-label">AWS access key</span><input type="password" autoComplete="off" value={awsKey} onChange={event=>setAwsKey(event.target.value)}/></label><label className="field"><span className="field-label">AWS secret</span><input type="password" autoComplete="new-password" value={awsSecret} onChange={event=>setAwsSecret(event.target.value)}/></label><div className="modal-actions"><button className="btn" onClick={()=>setDraft(null)}>Back</button><ArmedButton label="Create domain" armedLabel="Click again to create and run best-effort AWS setup" onConfirm={async()=>{const payload={...draft,...(awsKey?{aws_key:awsKey}:{}),...(awsSecret?{aws_secret:awsSecret}:{})};setAwsKey('');setAwsSecret('');setDraft(null);try{const row=await saveEmailDomainAtomic(qc,null,payload);toast.success('Domain row created. AWS convergence is best effort.');close(row);}catch(error){toast.error(redactMessagingError(error));}}} /></div></>:<SchemaForm fields={[...fields]} submitText="Review" onCancel={()=>close(null)} onSubmit={setDraft}/>}</div>; }
 function CredentialDialog({id,close}:{id:number;close:()=>void}){const qc=useQueryClient();const [key,setKey]=useState('');const [secret,setSecret]=useState('');const submit=async()=>{if(!key&&!secret)return;const payload={...(key?{aws_key:key}:{}),...(secret?{aws_secret:secret}:{})};setKey('');setSecret('');try{await saveEmailDomainAtomic(qc,id,payload);toast.success('AWS credentials replaced');close();}catch(error){toast.error(redactMessagingError(error));}};return <div className="modal-pad"><h2 className="modal-title">Replace AWS credentials</h2><p>Write-only values are never prefilled or cached.</p><label className="field"><span className="field-label">AWS access key</span><input type="password" autoComplete="off" value={key} onChange={e=>setKey(e.target.value)}/></label><label className="field"><span className="field-label">AWS secret</span><input type="password" autoComplete="new-password" value={secret} onChange={e=>setSecret(e.target.value)}/></label><div className="modal-actions"><button className="btn" onClick={close}>Cancel</button><ArmedButton label="Replace credentials" armedLabel="Click again to replace write-only credentials" disabled={!key&&!secret} onConfirm={submit}/></div></div>}
-function DomainDetail({id,onClose}:{id:number;onClose:()=>void}) { const qc=useQueryClient(); const query=EmailDomainModel.useOne(id); if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading…':query.error instanceof Error?redactMessagingError(query.error):'Domain unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>; const row=query.data; const edit=async()=>{const data=await formModal({title:`Edit ${row.name}`,fields:[...fields].filter(f=>f.name!=='name'),initial:row as unknown as FormData});if(!data)return;try{await saveEmailDomainAtomic(qc,id,data);toast.success('Domain row updated');await query.refetch();}catch(error){toast.error(redactMessagingError(error));}}; const audit=async()=>{if(!await modal.confirm({title:'Audit SES domain?',message:'Audit performs a provider request and persists readiness fields.',confirmText:'Run audit'}))return;try{const result=await auditEmailDomain(qc,id);await modal.open((close)=><div className="modal-pad"><h2 className="modal-title">Audit result</h2><Badge tone={result.audit_pass?'success':'danger'}>{result.audit_pass?'Pass':'Attention needed'}</Badge>{Object.entries(result.checks).map(([k,v])=><FlatRow key={k} label={k.replaceAll('_',' ')}>{v?'Pass':'Fail'}</FlatRow>)}{result.items.map((item,index)=><FlatRow key={`${item.resource}:${index}`} label={item.resource}>{item.status}</FlatRow>)}{result.recommendations.map((recommendation,index)=><div className="known-card" key={`${recommendation.resource}:${index}`}><h3>{recommendation.resource||'Recommendation'}{recommendation.severity?` · ${recommendation.severity}`:''}</h3>{recommendation.action&&<p>{recommendation.action}</p>}{recommendation.explanation&&<p className="dim">{recommendation.explanation}</p>}</div>)}<div className="modal-actions"><button className="btn" onClick={()=>close(null)}>Close</button></div></div>);}catch(e){toast.error(redactMessagingError(e));}}; const reconcile=async()=>{if(!await modal.confirm({title:'Reconcile AWS resources?',message:'This may change SES identities, SNS topics, and receiving rules. It does not write DNS.',confirmText:'Reconcile'}))return;try{await reconcileEmailDomain(qc,id);toast.success('Reconcile completed');}catch(e){toast.error(redactMessagingError(e));}}; const onboard=()=>void openEmailDomainWizard(row,qc).catch(error=>toast.error(redactMessagingError(error))); const remove=async()=>{try{await deleteMessagingRow(qc,EmailDomainModel.endpoint,id);toast.success('Local domain row and cascaded mailbox/sent audit rows deleted');onClose();}catch(error){toast.error(redactMessagingError(error));}}; return <DetailView title={row.name} subtitle={`${row.region} · ${row.dns_mode}`} icon="bi-envelope-at" chips={[{text:row.status,tone:row.status==='verified'||row.status==='ready'?'success':'warning'}]} onClose={onClose} initialSection="overview" sections={[{key:'overview',label:'Overview',icon:'bi-info-circle',render:()=><div className="detail-section"><div className="storage-action-row"><button className="btn" onClick={()=>void edit()}>Edit</button><button className="btn" onClick={()=>void modal.open(close=><CredentialDialog id={id} close={()=>close(null)}/>)}>Credentials…</button><button className="btn" onClick={onboard}>Onboard…</button><button className="btn" onClick={()=>void audit()}>Audit…</button><button className="btn" onClick={()=>void reconcile()}>Reconcile…</button></div><FlatRow label="Status">{row.status}</FlatRow><FlatRow label="Receiving">{row.receiving_enabled?'Enabled':'Disabled'}</FlatRow><FlatRow label="S3 bucket">{row.s3_inbound_bucket||'—'}</FlatRow><FlatRow label="S3 prefix">{row.s3_inbound_prefix||'—'}</FlatRow><FlatRow label="Access key">{row.aws_key_masked||'Not configured'}</FlatRow><FlatRow label="Secret key">{row.aws_secret_masked||'Not configured'}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow></div>},{key:'danger',label:'Delete',icon:'bi-trash',render:()=><div className="detail-section"><h3>Delete local email domain</h3><p>This erases local mailboxes and sent-message audit rows. SES identities, SNS topics/rules, S3 configuration, and provider DNS may remain orphaned.</p><ArmedButton label="Delete local domain" armedLabel={`Click again to delete ${row.name}`} onConfirm={remove}/></div>}]} />; }
+function DomainDetail({id,onClose}:{id:number;onClose:()=>void}) { const qc=useQueryClient(); const query=EmailDomainModel.useOne(id); if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading…':query.error instanceof Error?redactMessagingError(query.error):'Domain unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>; const row=query.data; const edit=async()=>{const data=await formModal({title:`Edit ${row.name}`,fields:[...fields].filter(f=>f.name!=='name'),initial:row as unknown as FormData});if(!data)return;try{await saveEmailDomainAtomic(qc,id,data);toast.success('Domain row updated');await query.refetch();}catch(error){toast.error(redactMessagingError(error));}}; const audit=async()=>{if(!await modal.confirm({title:'Audit SES domain?',message:'Audit performs a provider request and persists readiness fields.',confirmText:'Run audit'}))return;try{const result=await auditEmailDomain(qc,id);await modal.open((close)=><div className="modal-pad"><h2 className="modal-title">Audit result</h2><Badge tone={result.audit_pass?'success':'danger'}>{result.audit_pass?'Pass':'Attention needed'}</Badge>{Object.entries(result.checks).map(([k,v])=><FlatRow key={k} label={k.replaceAll('_',' ')}>{v?'Pass':'Fail'}</FlatRow>)}{result.items.map((item,index)=><FlatRow key={`${item.resource}:${index}`} label={item.resource}>{item.status}</FlatRow>)}{result.recommendations.map((recommendation,index)=><div className="known-card" key={`${recommendation.resource}:${index}`}><h3>{recommendation.resource||'Recommendation'}{recommendation.severity?` · ${recommendation.severity}`:''}</h3>{recommendation.action&&<p>{recommendation.action}</p>}{recommendation.explanation&&<p className="dim">{recommendation.explanation}</p>}</div>)}<div className="modal-actions"><button className="btn" onClick={()=>close(null)}>Close</button></div></div>);}catch(e){toast.error(redactMessagingError(e));}}; const reconcile=async()=>{if(!await modal.confirm({title:'Reconcile AWS resources?',message:'This may change SES identities, SNS topics, and receiving rules. It does not write DNS.',confirmText:'Reconcile'}))return;try{await reconcileEmailDomain(qc,id);toast.success('Reconcile completed');}catch(e){toast.error(redactMessagingError(e));}}; const onboard=()=>void openEmailDomainWizard(row,qc).catch(error=>toast.error(redactMessagingError(error)));  return <DetailView title={row.name} subtitle={`${row.region} · ${row.dns_mode}`} icon="bi-envelope-at" chips={[{text:row.status,tone:row.status==='verified'||row.status==='ready'?'success':'warning'}]} onClose={onClose} contextMenu={[{label:'Edit domain',onSelect:()=>void edit()},{label:'Credentials…',onSelect:()=>void modal.open(close=><CredentialDialog id={id} close={()=>close(null)}/>)},{label:'Onboard…',onSelect:onboard},{label:'Audit…',onSelect:()=>void audit()},{label:'Reconcile…',onSelect:()=>void reconcile()}]} initialSection="overview" sections={[{key:'overview',label:'Overview',icon:'bi-info-circle',render:()=><div className="detail-section"><FlatRow label="Status">{row.status}</FlatRow><FlatRow label="Receiving">{row.receiving_enabled?'Enabled':'Disabled'}</FlatRow><FlatRow label="S3 bucket">{row.s3_inbound_bucket||'—'}</FlatRow><FlatRow label="S3 prefix">{row.s3_inbound_prefix||'—'}</FlatRow><FlatRow label="Access key">{row.aws_key_masked||'Not configured'}</FlatRow><FlatRow label="Secret key">{row.aws_secret_masked||'Not configured'}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow></div>},]} />; }
 export function EmailDomainsPage(){return <ModelTable model={EmailDomainModel} eyebrow="Communications · SES" title="Email Domains" columns={columns} filters={filters} defaultSort="name" searchable searchPlaceholder="Search domain, region, or status" columnChooser persistState persistKey="admin:email:domains" exportFormats={['csv','json']} exporter={exportEmailDomains} addLabel="Create domain" onAdd={()=>void modal.open(close=><DomainCreate close={close}/>,{size:'lg'})} onRowClick={row=>void modal.detail(close=><DomainDetail id={row.id} onClose={()=>close(null)}/>)}/>;}

package/src/admin/messaging/EmailTemplatesPage.tsx

@@ -1,7 +1,5 @@
 import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { ArmedButton, DetailView, FlatRow, ModelTable, Tabs, fmt, modal, toast, type Column } from '../../ui';
-import { deleteMessagingRow } from './api';
+import { DetailView, FlatRow, ModelTable, Tabs, fmt, modal, toast, type Column } from '../../ui';
 import { exportEmailTemplates } from './data';
 import { EmailTemplateModel, type EmailTemplateRow } from './models';
 import { SandboxedEmailPreview } from './SandboxedEmailPreview';
@@ -9,5 +7,5 @@ import { redactMessagingError } from './sanitize';
 
 const columns:Column<EmailTemplateRow>[]=[{key:'name',label:'Template',sortable:true,hideable:false},{key:'modified',label:'Modified',sortable:true,render:r=>fmt.datetime(r.modified)},{key:'created',label:'Created',sortable:true,render:r=>fmt.date(r.created)}];
 function TemplateEditor({row,onSave,onClose}:{row?:EmailTemplateRow;onSave:(changes:Record<string,unknown>)=>Promise<void>;onClose:()=>void}){const [name,setName]=useState(row?.name??'');const [subject,setSubject]=useState(row?.subject_template??'');const [html,setHtml]=useState(row?.html_template??'');const [plain,setPlain]=useState(row?.text_template??'');const [busy,setBusy]=useState(false);const [error,setError]=useState('');const submit=async()=>{if(!name.trim())return;setBusy(true);setError('');try{await onSave({name:name.trim(),subject_template:subject,html_template:html,text_template:plain});onClose();}catch(reason){setError(redactMessagingError(reason));}finally{setBusy(false);}};return <div className="modal-pad"><h2 className="modal-title">{row?'Edit':'Create'} email template</h2>{error&&<div className="form-alert" role="alert">{error}</div>}<label className="field"><span className="field-label">Template name</span><input value={name} onChange={e=>setName(e.target.value)} required/></label><Tabs items={[{key:'subject',label:'Subject',panel:<label className="field"><span className="field-label">Subject template</span><textarea value={subject} onChange={e=>setSubject(e.target.value)}/></label>},{key:'html',label:'HTML',panel:<><label className="field"><span className="field-label">HTML template</span><textarea value={html} onChange={e=>setHtml(e.target.value)}/></label><SandboxedEmailPreview html={html}/></>},{key:'text',label:'Plain text',panel:<label className="field"><span className="field-label">Plain-text template</span><textarea value={plain} onChange={e=>setPlain(e.target.value)}/></label>}]} /><div className="modal-actions"><button className="btn" disabled={busy} onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={busy||!name.trim()} onClick={()=>void submit()}>{busy?'Saving…':'Save template'}</button></div></div>}
-function TemplateDetail({id,onClose}:{id:number;onClose:()=>void}){const qc=useQueryClient();const query=EmailTemplateModel.useOne(id);const save=EmailTemplateModel.useSave();if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading template…':query.error instanceof Error?redactMessagingError(query.error):'Template unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><TemplateEditor row={row} onClose={()=>close(null)} onSave={async changes=>{await save.mutateAsync({id,changes});toast.success('Template updated');await query.refetch();}}/>);const remove=async()=>{try{await deleteMessagingRow(qc,EmailTemplateModel.endpoint,id);toast.success('Template deleted');onClose();}catch(error){toast.error(redactMessagingError(error));}};return <DetailView title={row.name} subtitle={row.subject_template||'No subject template'} icon="bi-file-earmark-richtext" onClose={onClose} sections={[{key:'content',label:'Content',icon:'bi-layout-text-window',render:()=><div className="detail-section"><button className="btn" onClick={edit}>Edit</button><Tabs items={[{key:'subject',label:'Subject',panel:<FlatRow label="Subject">{row.subject_template||'—'}</FlatRow>},{key:'html',label:'HTML',panel:<SandboxedEmailPreview html={row.html_template}/>},{key:'text',label:'Plain text',panel:<SandboxedEmailPreview text={row.text_template}/>}]} /></div>},{key:'danger',label:'Delete',icon:'bi-trash',render:()=><div className="detail-section"><p>Future named sends may fail or fall back according to their backend caller after deletion.</p><ArmedButton label="Delete template" armedLabel={`Click again to delete ${row.name}`} onConfirm={remove}/></div>}]} />;}
+function TemplateDetail({id,onClose}:{id:number;onClose:()=>void}){const query=EmailTemplateModel.useOne(id);const save=EmailTemplateModel.useSave();if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading template…':query.error instanceof Error?redactMessagingError(query.error):'Template unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><TemplateEditor row={row} onClose={()=>close(null)} onSave={async changes=>{await save.mutateAsync({id,changes});toast.success('Template updated');await query.refetch();}}/>);return <DetailView title={row.name} subtitle={row.subject_template||'No subject template'} icon="bi-file-earmark-richtext" onClose={onClose} contextMenu={[{label:'Edit template',onSelect:edit}]} sections={[{key:'content',label:'Content',icon:'bi-layout-text-window',render:()=><div className="detail-section"><Tabs items={[{key:'subject',label:'Subject',panel:<FlatRow label="Subject">{row.subject_template||'—'}</FlatRow>},{key:'html',label:'HTML',panel:<SandboxedEmailPreview html={row.html_template}/>},{key:'text',label:'Plain text',panel:<SandboxedEmailPreview text={row.text_template}/>}]} /></div>},]} />;}
 export function EmailTemplatesPage(){const save=EmailTemplateModel.useSave();const add=()=>void modal.open(close=><TemplateEditor onClose={()=>close(null)} onSave={async changes=>{await save.mutateAsync({id:null,changes});toast.success('Template created');}}/>);return <ModelTable model={EmailTemplateModel} eyebrow="Communications · SES" title="Email Templates" columns={columns} defaultSort="name" searchable searchPlaceholder="Search template names" columnChooser persistState persistKey="admin:email:templates" exportFormats={['csv','json']} exporter={exportEmailTemplates} addLabel="Create template" onAdd={add} onRowClick={row=>void modal.detail(close=><TemplateDetail id={row.id} onClose={()=>close(null)}/>)}/>;}

package/src/admin/messaging/MailboxesPage.tsx

@@ -1,6 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { ArmedButton, Badge, DetailView, FlatRow, ModelTable, fmt, formModal, modal, toast, type Column, type FilterDef, type FormData } from '../../ui';
-import { deleteMessagingRow, saveMailbox, sendEmail } from './api';
+import { Badge, DetailView, FlatRow, ModelTable, fmt, formModal, modal, toast, type Column, type FilterDef, type FormData } from '../../ui';
+import { saveMailbox, sendEmail } from './api';
 import { EmailDomainModel, MailboxModel, type MailboxRow, type SendEmailInput } from './models';
 import { redactMessagingError } from './sanitize';
 
@@ -11,5 +11,5 @@ function domainId(row:MailboxRow){return typeof row.domain==='number'?row.domain
 function domainName(row:MailboxRow){return typeof row.domain==='object'?row.domain?.name??'':'';}
 function validMatch(email:string,domain:string){return !domain||email.toLowerCase().endsWith(`@${domain.toLowerCase()}`);}
 async function openSend(row:MailboxRow,qc:ReturnType<typeof useQueryClient>){const data=await formModal({title:`Send test from ${row.email}`,intro:'Only executable send fields are forwarded. A 2xx failed row is still a failed attempt.',fields:[{name:'to',label:'Recipients (comma separated)',type:'text',required:true},{name:'reply_to',label:'Reply-to',type:'email'},{name:'template_name',label:'Template name (optional)',type:'text'},{name:'template_context',label:'Template context JSON',type:'textarea'},{name:'subject',label:'Subject',type:'text'},{name:'body_text',label:'Plain text',type:'textarea'},{name:'body_html',label:'HTML',type:'textarea'}]});if(!data)return;const recipients=String(data.to??'').split(',').map(v=>v.trim()).filter(Boolean);if(!recipients.length){toast.error('Enter at least one recipient');return;}if(!await modal.confirm({title:'Submit email?',message:<><p>Sender: <b>{row.email}</b></p><p>Recipients: {recipients.join(', ')}</p><p>Submission remains pending until webhook updates.</p></>,confirmText:'Submit once'}))return;let context:Record<string,unknown>|undefined;try{if(data.template_context){const parsed=JSON.parse(String(data.template_context));if(!parsed||typeof parsed!=='object'||Array.isArray(parsed))throw new Error();context=parsed as Record<string,unknown>;}}catch{toast.error('Template context must be a plain JSON object');return;}const input:SendEmailInput={from_email:row.email,to:recipients,...(data.reply_to?{reply_to:String(data.reply_to)}:{}),...(data.template_name?{template_name:String(data.template_name),template_context:context??{}}:{subject:String(data.subject??''),body_text:String(data.body_text??''),body_html:String(data.body_html??'')})};try{const sent=await sendEmail(qc,input);if(sent.status==='failed')toast.error('The delivery attempt failed. Open Sent Messages for details.');else toast.success('Message submitted; delivery is pending webhook confirmation.');}catch(e){toast.error(redactMessagingError(e));}}
-function MailboxDetail({id,onClose}:{id:number;onClose:()=>void}){const qc=useQueryClient();const query=MailboxModel.useOne(id);if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading mailbox…':query.error instanceof Error?redactMessagingError(query.error):'Mailbox unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=async()=>{const data=await formModal({title:`Edit ${row.email}`,fields:[...mailboxFields],initial:{...row,domain:domainId(row)??''} as unknown as FormData});if(!data)return;try{const chosen=await EmailDomainModel.fetchOne(qc,Number(data.domain));if(!validMatch(String(data.email),chosen.name)){toast.error(`Email must belong to ${chosen.name}`);return;}await saveMailbox(qc,id,data);toast.success('Mailbox updated; competing defaults were refreshed');await query.refetch();}catch(error){toast.error(redactMessagingError(error));}};const remove=async()=>{try{await deleteMessagingRow(qc,MailboxModel.endpoint,id);toast.success('Mailbox and its sent-message audit history deleted');onClose();}catch(error){toast.error(redactMessagingError(error));}};return <DetailView title={row.email} subtitle={domainName(row)||`Domain #${domainId(row)}`} icon="bi-inbox" onClose={onClose} initialSection="overview" sections={[{key:'overview',label:'Overview',icon:'bi-info-circle',render:()=><div className="detail-section"><div className="storage-action-row"><button className="btn" onClick={()=>void edit()}>Edit</button><button className="btn" disabled={!row.allow_outbound} onClick={()=>void openSend(row,qc)}>Send test…</button></div><FlatRow label="Inbound">{row.allow_inbound?'Enabled':'Disabled'}</FlatRow><FlatRow label="Outbound">{row.allow_outbound?'Enabled':'Disabled'}</FlatRow><FlatRow label="System default">{row.is_system_default?'Yes':'No'}</FlatRow><FlatRow label="Domain default">{row.is_domain_default?'Yes':'No'}</FlatRow><FlatRow label="Async handler">{row.async_handler||'—'}</FlatRow></div>},{key:'danger',label:'Delete',icon:'bi-trash',render:()=><div className="detail-section"><p>Deleting this mailbox cascades its sent-message audit history.</p><ArmedButton label="Delete mailbox" armedLabel={`Click again to delete ${row.email}`} onConfirm={remove}/></div>}]} />;}
+function MailboxDetail({id,onClose}:{id:number;onClose:()=>void}){const qc=useQueryClient();const query=MailboxModel.useOne(id);if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading mailbox…':query.error instanceof Error?redactMessagingError(query.error):'Mailbox unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=async()=>{const data=await formModal({title:`Edit ${row.email}`,fields:[...mailboxFields],initial:{...row,domain:domainId(row)??''} as unknown as FormData});if(!data)return;try{const chosen=await EmailDomainModel.fetchOne(qc,Number(data.domain));if(!validMatch(String(data.email),chosen.name)){toast.error(`Email must belong to ${chosen.name}`);return;}await saveMailbox(qc,id,data);toast.success('Mailbox updated; competing defaults were refreshed');await query.refetch();}catch(error){toast.error(redactMessagingError(error));}};return <DetailView title={row.email} subtitle={domainName(row)||`Domain #${domainId(row)}`} icon="bi-inbox" onClose={onClose} contextMenu={[{label:'Edit mailbox',onSelect:()=>void edit()},{label:'Send test…',disabled:!row.allow_outbound,onSelect:()=>void openSend(row,qc)}]} initialSection="overview" sections={[{key:'overview',label:'Overview',icon:'bi-info-circle',render:()=><div className="detail-section"><FlatRow label="Inbound">{row.allow_inbound?'Enabled':'Disabled'}</FlatRow><FlatRow label="Outbound">{row.allow_outbound?'Enabled':'Disabled'}</FlatRow><FlatRow label="System default">{row.is_system_default?'Yes':'No'}</FlatRow><FlatRow label="Domain default">{row.is_domain_default?'Yes':'No'}</FlatRow><FlatRow label="Async handler">{row.async_handler||'—'}</FlatRow></div>},]} />;}
 export function MailboxesPage(){const qc=useQueryClient();const add=async()=>{const data=await formModal({title:'Create mailbox',fields:[...mailboxFields]});if(!data)return;try{const chosen=await EmailDomainModel.fetchOne(qc,Number(data.domain));if(!validMatch(String(data.email),chosen.name)){toast.error(`Email must belong to ${chosen.name}`);return;}await saveMailbox(qc,null,data);toast.success('Mailbox created');}catch(error){toast.error(redactMessagingError(error));}};return <ModelTable model={MailboxModel} eyebrow="Communications · SES" title="Mailboxes" columns={columns} filters={filters} defaultSort="email" searchable searchPlaceholder="Search mailbox addresses" columnChooser persistState persistKey="admin:email:mailboxes" addLabel="Create mailbox" onAdd={()=>void add()} onRowClick={row=>void modal.detail(close=><MailboxDetail id={row.id} onClose={()=>close(null)}/>)}/>;}

package/src/admin/messaging/PublicMessagesPage.tsx

@@ -1,13 +1,11 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { ArmedButton, Badge, DetailView, FlatRow, ModelTable, fmt, groupByDay, modal, toast, type BatchAction, type Column, type FilterDef, type Section } from '../../ui';
 import { useCan } from '../../client/runtime';
-import { deleteMessagingRow } from './api';
+import { Badge, DetailView, FlatRow, ModelTable, fmt, groupByDay, modal, toast, type BatchAction, type Column, type FilterDef, type Section } from '../../ui';
 import { exportPublicMessages } from './data';
-import { PUBLIC_MESSAGE_DELETE_PERMISSIONS, PUBLIC_MESSAGE_MANAGE_PERMISSIONS, PublicMessageModel, type PublicMessageRow } from './models';
+import { PUBLIC_MESSAGE_MANAGE_PERMISSIONS, PublicMessageModel, type PublicMessageRow } from './models';
 import { publicMessageMailto, redactMessagingError } from './sanitize';
 
 const columns:Column<PublicMessageRow>[]=[{key:'created',label:'Received',sortable:true,hideable:false,render:r=>fmt.datetime(r.created)},{key:'kind',label:'Kind',sortable:true},{key:'name',label:'Name',sortable:true},{key:'email',label:'Email',sortable:true},{key:'subject',label:'Subject',sortable:true},{key:'status',label:'Status',sortable:true,render:r=><Badge tone={r.status==='open'?'warning':'success'}>{r.status}</Badge>}];
 const filters:FilterDef[]=[{key:'kind__in',label:'Kind',type:'multiselect',options:[{value:'contact_us',label:'Contact us'},{value:'support',label:'Support'}]},{key:'status__in',label:'Status',type:'multiselect',options:[{value:'open',label:'Open'},{value:'closed',label:'Closed'}]},{key:'created',label:'Received',type:'daterange'}];
 export function publicMessageGroupLabel(group:PublicMessageRow['group']):string{return group==null?'—':typeof group==='object'?group.name??`#${group.id}`:`#${group}`;}
-function PublicMessageDetail({id,onClose}:{id:number;onClose:()=>void}){const qc=useQueryClient();const query=PublicMessageModel.useOne(id);const save=PublicMessageModel.useSave();const canManage=useCan(PUBLIC_MESSAGE_MANAGE_PERMISSIONS).can;const canDelete=useCan(PUBLIC_MESSAGE_DELETE_PERMISSIONS).can;if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading contact message…':query.error instanceof Error?redactMessagingError(query.error):'Contact message unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const setStatus=async(status:'open'|'closed')=>{try{await save.mutateAsync({id,changes:{status}});toast.success(`Message marked ${status}`);await query.refetch();}catch(error){toast.error(redactMessagingError(error));}};const remove=async()=>{try{await deleteMessagingRow(qc,PublicMessageModel.endpoint,id);toast.success('Contact message deleted');onClose();}catch(error){toast.error(redactMessagingError(error));}};const mailto=publicMessageMailto(row);const group=publicMessageGroupLabel(row.group);const sections:Section[]=[{key:'message',label:'Message',icon:'bi-envelope-open',render:()=><div className="detail-section"><div className="storage-action-row">{mailto&&<a className="btn" href={mailto}>Open mail app</a>}{canManage&&<button className="btn" onClick={()=>void setStatus(row.status==='open'?'closed':'open')}>Mark {row.status==='open'?'closed':'open'}</button>}</div><FlatRow label="Kind">{row.kind}</FlatRow><FlatRow label="Group">{group}</FlatRow><FlatRow label="Received">{fmt.datetime(row.created)}</FlatRow><div className="known-card"><h3>Message</h3><p className="pre-wrap">{row.message||'—'}</p></div></div>},{key:'context',label:'PII & context',icon:'bi-person-vcard',render:()=><div className="detail-section"><p className="form-alert">This section contains personally identifiable request data.</p><FlatRow label="IP address">{row.ip_address||'—'}</FlatRow><FlatRow label="User agent">{row.user_agent||'—'}</FlatRow>{Object.entries(row.metadata??{}).map(([key,value])=><FlatRow key={key} label={key.replaceAll('_',' ')}>{value}</FlatRow>)}{row.metadata_withheld&&<p className="dim">Additional metadata was withheld by the safe projection.</p>}</div>}];if(canDelete)sections.push({key:'delete',label:'Delete',icon:'bi-trash',render:()=><div className="detail-section"><ArmedButton label="Delete contact message" armedLabel="Click again to permanently delete" onConfirm={remove}/></div>});return <DetailView title={row.subject} subtitle={`${row.name} · ${row.email}`} icon="bi-chat-left-text" chips={[{text:row.status,tone:row.status==='open'?'warning':'success'}]} onClose={onClose} sections={sections} />;}
+function PublicMessageDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PublicMessageModel.useOne(id);const save=PublicMessageModel.useSave();const canManage=useCan(PUBLIC_MESSAGE_MANAGE_PERMISSIONS).can;if(!query.data)return <div className="modal-pad"><p>{query.isLoading?'Loading contact message…':query.error instanceof Error?redactMessagingError(query.error):'Contact message unavailable'}</p><button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const setStatus=async(status:'open'|'closed')=>{try{await save.mutateAsync({id,changes:{status}});toast.success(`Message marked ${status}`);await query.refetch();}catch(error){toast.error(redactMessagingError(error));}};const mailto=publicMessageMailto(row);const group=publicMessageGroupLabel(row.group);const sections:Section[]=[{key:'message',label:'Message',icon:'bi-envelope-open',render:()=><div className="detail-section"><div className="storage-action-row">{mailto&&<a className="btn" href={mailto}>Open mail app</a>}</div><FlatRow label="Kind">{row.kind}</FlatRow><FlatRow label="Group">{group}</FlatRow><FlatRow label="Received">{fmt.datetime(row.created)}</FlatRow><div className="known-card"><h3>Message</h3><p className="pre-wrap">{row.message||'—'}</p></div></div>},{key:'context',label:'PII & context',icon:'bi-person-vcard',render:()=><div className="detail-section"><p className="form-alert">This section contains personally identifiable request data.</p><FlatRow label="IP address">{row.ip_address||'—'}</FlatRow><FlatRow label="User agent">{row.user_agent||'—'}</FlatRow>{Object.entries(row.metadata??{}).map(([key,value])=><FlatRow key={key} label={key.replaceAll('_',' ')}>{value}</FlatRow>)}{row.metadata_withheld&&<p className="dim">Additional metadata was withheld by the safe projection.</p>}</div>}];return <DetailView title={row.subject} subtitle={`${row.name} · ${row.email}`} icon="bi-chat-left-text" chips={[{text:row.status,tone:row.status==='open'?'warning':'success'}]} onClose={onClose} contextMenu={canManage?[{label:row.status==='open'?'Mark closed':'Mark open',disabled:save.isPending,onSelect:()=>void setStatus(row.status==='open'?'closed':'open')}]:[]} sections={sections} />;}
 export function PublicMessagesPage(){const canManage=useCan(PUBLIC_MESSAGE_MANAGE_PERMISSIONS).can;const save=PublicMessageModel.useSave();const update=async(row:PublicMessageRow,status:'open'|'closed')=>{try{return await save.mutateAsync({id:row.id,changes:{status}});}catch(error){throw new Error(redactMessagingError(error));}};const actions:BatchAction<PublicMessageRow>[]=[{key:'open',label:'Mark open',eligible:r=>r.status!=='open',run:r=>update(r,'open')},{key:'closed',label:'Mark closed',eligible:r=>r.status!=='closed',run:r=>update(r,'closed')}];const grouping=groupByDay<PublicMessageRow>('created');return <ModelTable model={PublicMessageModel} eyebrow="Communications · Support" title="Contact Messages" columns={columns} filters={filters} defaultSort="-created" searchable searchPlaceholder="Search name, email, subject, or message" selectable={canManage} batchActions={canManage?actions:[]} {...grouping} columnChooser persistState persistKey="admin:messaging:public" exportFormats={['csv','json']} exporter={exportPublicMessages} onRowClick={row=>void modal.detail(close=><PublicMessageDetail id={row.id} onClose={()=>close(null)}/>)}/>;}

package/src/admin/messaging/push/PushPage.tsx

@@ -1,16 +1,28 @@
-import { useRef, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { KPITile, MetricsChart } from '../../../charts';
 import { useCan } from '../../../client/runtime';
 import { Badge, DetailView, FlatRow, ModelTable, Tabs, fmt, modal, toast, type Column, type FilterDef } from '../../../ui';
 import { fetchPushGroupChoices, fetchPushStats, parseFcmServiceAccount, savePushConfigImperative, testPushConfigConnection, type FcmCredentialEdit } from './api';
 import {
-    PUSH_CONFIG_MANAGE_PERMISSIONS, PUSH_CONFIG_TEST_PERMISSIONS, PUSH_CONFIG_VIEW_PERMISSIONS,
-    PUSH_DELIVERY_VIEW_PERMISSIONS, PUSH_DEVICE_VIEW_PERMISSIONS, PUSH_GROUP_DIRECTORY_PERMISSIONS,
-    PUSH_METRICS_PERMISSIONS, PUSH_TEMPLATE_MANAGE_PERMISSIONS, PUSH_TEMPLATE_VIEW_PERMISSIONS,
-    PushConfigModel, PushDeliveryModel, PushDeviceModel, PushTemplateModel,
-    type PushConfigRow, type PushDeliveryRow, type PushDeviceRow, type PushTemplateRow,
+    PUSH_CONFIG_MANAGE_PERMISSIONS,
+    PUSH_CONFIG_TEST_PERMISSIONS,
+    PUSH_CONFIG_VIEW_PERMISSIONS,
+    PUSH_DELIVERY_VIEW_PERMISSIONS,
+    PUSH_DEVICE_VIEW_PERMISSIONS,
+    PUSH_GROUP_DIRECTORY_PERMISSIONS,
+    PUSH_METRICS_PERMISSIONS,
+    PUSH_TEMPLATE_MANAGE_PERMISSIONS,
+    PUSH_TEMPLATE_VIEW_PERMISSIONS,
+    PushConfigModel,
+    PushDeliveryModel,
+    PushDeviceModel,
+    PushTemplateModel,
+    type PushConfigRow,
+    type PushDeliveryRow,
+    type PushDeviceRow,
+    type PushTemplateRow,
 } from './models';
 
 const relationLabel=(value:{id:number;name?:string;display_name?:string}|null,fallback='—')=>value?.name??value?.display_name??(value?`#${value.id}`:fallback);
@@ -33,12 +45,12 @@ function jsonText(value:Record<string,unknown>):string{return Object.keys(value)
 function parseJsonObject(value:string,label:string):Record<string,unknown>{if(!value.trim())return {};let parsed:unknown;try{parsed=JSON.parse(value);}catch{throw new Error(`${label} must be valid JSON.`);}if(!parsed||typeof parsed!=='object'||Array.isArray(parsed))throw new Error(`${label} must be a JSON object.`);return parsed as Record<string,unknown>;}
 function TemplateEditor({row,close}:{row?:PushTemplateRow;close:(value:PushTemplateRow|null)=>void}){const save=PushTemplateModel.useSave();const canGroups=useCan(PUSH_GROUP_DIRECTORY_PERMISSIONS).can;const groups=useQuery({queryKey:['push','group-choices'],queryFn:fetchPushGroupChoices,enabled:canGroups,staleTime:60_000});const [name,setName]=useState(row?.name??'');const [category,setCategory]=useState(row?.category??'general');const [priority,setPriority]=useState<PushTemplateRow['priority']>(row?.priority??'normal');const [group,setGroup]=useState(row?.group?String(row.group.id):'');const [title,setTitle]=useState(row?.title_template??'');const [body,setBody]=useState(row?.body_template??'');const [actionUrl,setActionUrl]=useState(row?.action_url??'');const [data,setData]=useState(jsonText(row?.data_template??{}));const [variables,setVariables]=useState(jsonText(row?.variables??{}));const [active,setActive]=useState(row?.is_active??true);const [busy,setBusy]=useState(false);const [error,setError]=useState('');const submit=async()=>{setBusy(true);setError('');try{const dataTemplate=parseJsonObject(data,'Data template');const variableDocs=parseJsonObject(variables,'Variables');if(!title.trim()&&!body.trim()&&!Object.keys(dataTemplate).length)throw new Error('Provide a title, body, or data template.');const saved=await save.mutateAsync({id:row?.id??null,changes:{name:name.trim(),category:category.trim()||'general',priority,group:group?Number(group):null,title_template:title||null,body_template:body||null,action_url:actionUrl||null,data_template:dataTemplate,variables:variableDocs,is_active:active}});toast.success(row?'Push template updated':'Push template created');close(saved);}catch(reason){setError(reason instanceof Error?reason.message:'Template could not be saved.');}finally{setBusy(false);}};return <div className="modal-pad push-editor"><h2 className="modal-title">{row?'Edit':'Create'} push template</h2>{error&&<div className="form-alert" role="alert">{error}</div>}<div className="form-grid"><label className="field col-6"><span className="field-label">Name</span><input className="input" value={name} onChange={e=>setName(e.target.value)}/></label><label className="field col-3"><span className="field-label">Category</span><input className="input" value={category} onChange={e=>setCategory(e.target.value)}/></label><label className="field col-3"><span className="field-label">Priority</span><select className="input" value={priority} onChange={e=>setPriority(e.target.value as PushTemplateRow['priority'])}><option value="low">Low</option><option value="normal">Normal</option><option value="high">High</option></select></label>{canGroups?<label className="field col-12"><span className="field-label">Group</span><select className="input" value={group} onChange={e=>setGroup(e.target.value)}><option value="">System template</option>{groups.data?.map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>:<div className="field col-12"><span className="field-label">Group</span><div className="input" aria-readonly="true">{relationLabel(row?.group??null,'System template')}</div></div>}<label className="field col-12"><span className="field-label">Title template</span><input className="input" value={title} onChange={e=>setTitle(e.target.value)}/></label><label className="field col-12"><span className="field-label">Body template</span><textarea className="input" rows={4} value={body} onChange={e=>setBody(e.target.value)}/></label><label className="field col-12"><span className="field-label">Action URL template</span><input className="input" value={actionUrl} onChange={e=>setActionUrl(e.target.value)}/></label><label className="field col-6"><span className="field-label">Data template JSON</span><textarea className="input" rows={6} value={data} onChange={e=>setData(e.target.value)}/></label><label className="field col-6"><span className="field-label">Variable documentation JSON</span><textarea className="input" rows={6} value={variables} onChange={e=>setVariables(e.target.value)}/></label><label className="check col-4"><input type="checkbox" checked={active} onChange={e=>setActive(e.target.checked)}/><span>Active</span></label></div><div className="modal-actions"><button className="btn" disabled={busy} onClick={()=>close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy||!name.trim()} onClick={()=>void submit()}>{busy?'Saving…':'Save template'}</button></div></div>;}
 const templateColumns:Column<PushTemplateRow>[]=[{key:'name',label:'Template',sortable:true,hideable:false},{key:'category',label:'Category',sortable:true},{key:'group',label:'Scope',render:r=>relationLabel(r.group,'System')},{key:'priority',label:'Priority',sortable:true,render:r=><Badge tone={r.priority==='high'?'warning':'info'}>{r.priority}</Badge>},{key:'is_active',label:'Active',sortable:true,render:r=><Badge tone={r.is_active?'success':'muted'}>{r.is_active?'active':'inactive'}</Badge>}];
-function TemplateDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushTemplateModel.useOne(id);const canManage=useCan(PUSH_TEMPLATE_MANAGE_PERMISSIONS).can;if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading template…':'Template unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><TemplateEditor row={row} close={async saved=>{close(saved);if(saved)await query.refetch();}}/>,{size:'lg'});return <DetailView title={row.name} subtitle={`${row.category} · ${relationLabel(row.group,'System')}`} icon="bi-file-earmark-richtext" onClose={onClose} sections={[{key:'template',label:'Template',icon:'bi-card-text',render:()=><div className="detail-section">{canManage&&<button className="btn" onClick={edit}>Edit</button>}<FlatRow label="Title">{row.title_template||'—'}</FlatRow><div className="known-card"><h3>Body</h3><p className="pre-wrap">{row.body_template||'—'}</p></div><FlatRow label="Action URL"><code>{row.action_url||'—'}</code></FlatRow><FlatRow label="Data keys">{Object.keys(row.data_template).join(', ')||'—'}</FlatRow><FlatRow label="Variables">{Object.keys(row.variables).join(', ')||'—'}</FlatRow></div>}]} />;}
+function TemplateDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushTemplateModel.useOne(id);const save=PushTemplateModel.useSave();const canManage=useCan(PUSH_TEMPLATE_MANAGE_PERMISSIONS).can;if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading template…':'Template unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><TemplateEditor row={row} close={async saved=>{close(saved);if(saved)await query.refetch();}}/>,{size:'lg'});const toggle=async(next:boolean)=>{if(!canManage||save.isPending)return;try{await save.mutateAsync({id,changes:{is_active:next}});await query.refetch();}catch(error){toast.error(error instanceof Error?error.message:"State change failed");}};return <DetailView title={row.name} subtitle={`${row.category} · ${relationLabel(row.group,'System')}`} icon="bi-file-earmark-richtext" onClose={onClose} active={canManage?{value:row.is_active,disabled:save.isPending,onChange:next=>void toggle(next)}:undefined} contextMenu={canManage?[{label:'Edit template',onSelect:edit},{label:row.is_active?'Deactivate':'Reactivate',disabled:save.isPending,onSelect:()=>void toggle(!row.is_active)}]:[]} sections={[{key:'template',label:'Template',icon:'bi-card-text',render:()=><div className="detail-section"><FlatRow label="Title">{row.title_template||'—'}</FlatRow><div className="known-card"><h3>Body</h3><p className="pre-wrap">{row.body_template||'—'}</p></div><FlatRow label="Action URL"><code>{row.action_url||'—'}</code></FlatRow><FlatRow label="Data keys">{Object.keys(row.data_template).join(', ')||'—'}</FlatRow><FlatRow label="Variables">{Object.keys(row.variables).join(', ')||'—'}</FlatRow></div>}]} />;}
 export function PushTemplatesPage(){const canManage=useCan(PUSH_TEMPLATE_MANAGE_PERMISSIONS).can;return <ModelTable model={PushTemplateModel} eyebrow="Communications · Push" title="Templates" columns={templateColumns} defaultSort="name" searchable searchPlaceholder="Search name or category" columnChooser persistState persistKey="admin:push:templates" addLabel="Create template" onAdd={canManage?()=>void modal.open(close=><TemplateEditor close={close}/>,{size:'lg'}):undefined} onRowClick={row=>void modal.detail(close=><TemplateDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
 
 function ConfigEditor({row,close}:{row?:PushConfigRow;close:(value:PushConfigRow|null)=>void}){const qc=useQueryClient();const canGroups=useCan(PUSH_GROUP_DIRECTORY_PERMISSIONS).can;const groups=useQuery({queryKey:['push','group-choices'],queryFn:fetchPushGroupChoices,enabled:canGroups,staleTime:60_000});const credentialRef=useRef<HTMLTextAreaElement>(null);const [clearCredential,setClearCredential]=useState(false);const [name,setName]=useState(row?.name??'');const [group,setGroup]=useState(row?.group?String(row.group.id):'');const [sound,setSound]=useState(row?.default_sound??'default');const [active,setActive]=useState(row?.is_active??true);const [testMode,setTestMode]=useState(row?.test_mode??false);const [busy,setBusy]=useState(false);const [error,setError]=useState('');const toggleClear=()=>{if(clearCredential){setClearCredential(false);return;}if(window.confirm('Clear the stored FCM service account on save?'))setClearCredential(true);};const submit=async()=>{setBusy(true);setError('');let credential:FcmCredentialEdit={mode:'untouched'};try{const source=credentialRef.current?.value??'';if(clearCredential)credential={mode:'clear',confirmed:true};else if(source.trim())credential={mode:'replace',value:parseFcmServiceAccount(source)};const saved=await savePushConfigImperative(qc,row?.id??null,{name:name.trim(),group:group?Number(group):null,default_sound:sound.trim()||'default',is_active:active,test_mode:testMode},credential);toast.success(row?'Push configuration updated':'Push configuration created');close(saved);}catch(reason){setError(reason instanceof Error?reason.message:'Configuration could not be saved.');}finally{if(credentialRef.current)credentialRef.current.value='';credential={mode:'untouched'};setBusy(false);}};return <div className="modal-pad push-editor"><h2 className="modal-title">{row?'Edit':'Create'} push configuration</h2><p className="dim">The FCM service account is write-only and never prefills. Leave blank to keep it, enter a validated service-account JSON object to replace it, or explicitly confirm clear.</p>{error&&<div className="form-alert" role="alert">{error}</div>}<div className="form-grid"><label className="field col-8"><span className="field-label">Name</span><input className="input" value={name} onChange={e=>setName(e.target.value)}/></label><label className="field col-4"><span className="field-label">Default sound</span><input className="input" value={sound} onChange={e=>setSound(e.target.value)}/></label>{canGroups?<label className="field col-12"><span className="field-label">Group</span><select className="input" value={group} onChange={e=>setGroup(e.target.value)}><option value="">System default</option>{groups.data?.map(item=><option key={item.id} value={item.id}>{item.name}</option>)}</select></label>:<div className="field col-12"><span className="field-label">Group</span><div className="input" aria-readonly="true">{relationLabel(row?.group??null,'System default')}</div></div>}<label className="field col-12"><span className="field-label">FCM service account JSON</span><textarea ref={credentialRef} className="input" rows={9} autoComplete="off" spellCheck={false} disabled={clearCredential}/><span className="field-help">Required fields: type=service_account, project_id, client_email, and a PEM private_key.</span></label><div className="col-12"><button type="button" className={`btn${clearCredential?' btn-danger':''}`} onClick={toggleClear}>{clearCredential?'Keep stored credential':'Clear stored credential…'}</button></div><label className="check col-4"><input type="checkbox" checked={active} onChange={e=>setActive(e.target.checked)}/><span>Active</span></label><label className="check col-4"><input type="checkbox" checked={testMode} onChange={e=>setTestMode(e.target.checked)}/><span>Test mode</span></label></div><div className="modal-actions"><button className="btn" disabled={busy} onClick={()=>close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy||!name.trim()} onClick={()=>void submit()}>{busy?'Saving…':'Save configuration'}</button></div></div>;}
 const configColumns:Column<PushConfigRow>[]=[{key:'name',label:'Configuration',sortable:true,hideable:false},{key:'group',label:'Scope',render:r=>relationLabel(r.group,'System default')},{key:'fcm_project_id',label:'FCM project',render:r=>r.fcm_project_id||'Not reported'},{key:'test_mode',label:'Test mode',sortable:true,render:r=><Badge tone={r.test_mode?'warning':'muted'}>{r.test_mode?'yes':'no'}</Badge>},{key:'is_active',label:'Active',sortable:true,render:r=><Badge tone={r.is_active?'success':'muted'}>{r.is_active?'active':'inactive'}</Badge>}];
-function ConfigDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushConfigModel.useOne(id);const canManage=useCan(PUSH_CONFIG_MANAGE_PERMISSIONS).can;const canTest=useCan(PUSH_CONFIG_TEST_PERMISSIONS).can;if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading configuration…':'Configuration unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><ConfigEditor row={row} close={async saved=>{close(saved);if(saved)await query.refetch();}}/>,{size:'lg'});const test=async()=>{try{const result=await testPushConfigConnection(id);toast.success(result.message);}catch{toast.error('FCM connection test failed. Review the stored service account and server logs.');}};return <DetailView title={row.name} subtitle={`${relationLabel(row.group,'System default')} · ${row.fcm_project_id||'FCM project unavailable'}`} icon="bi-broadcast-pin" onClose={onClose} sections={[{key:'configuration',label:'Configuration',icon:'bi-sliders',render:()=><div className="detail-section"><div className="storage-action-row">{canManage&&<button className="btn" onClick={edit}>Edit</button>}{canTest&&<button className="btn" onClick={()=>void test()}>Test stored credentials</button>}</div><FlatRow label="FCM project">{row.fcm_project_id||'—'}</FlatRow><FlatRow label="Default sound">{row.default_sound}</FlatRow><FlatRow label="Active">{row.is_active?'Yes':'No'}</FlatRow><FlatRow label="Test mode">{row.test_mode?'Yes — sends are faked':'No'}</FlatRow><p className="dim">The connection test uses the backend's dummy registration token to validate credentials. This portal never accepts a device token and never sends a caller test notification.</p></div>}]} />;}
+function ConfigDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PushConfigModel.useOne(id);const qc=useQueryClient();const [saving,setSaving]=useState(false);const canManage=useCan(PUSH_CONFIG_MANAGE_PERMISSIONS).can;const canTest=useCan(PUSH_CONFIG_TEST_PERMISSIONS).can;if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading configuration…':'Configuration unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const edit=()=>void modal.open(close=><ConfigEditor row={row} close={async saved=>{close(saved);if(saved)await query.refetch();}}/>,{size:'lg'});const test=async()=>{try{const result=await testPushConfigConnection(id);toast.success(result.message);}catch{toast.error('FCM connection test failed. Review the stored service account and server logs.');}};const toggle=async(next:boolean)=>{if(!canManage||saving)return;setSaving(true);try{await savePushConfigImperative(qc,id,{is_active:next},{mode:"untouched"});await query.refetch();}catch(error){toast.error(error instanceof Error?error.message:"State change failed");}finally{setSaving(false);}};return <DetailView title={row.name} subtitle={`${relationLabel(row.group,'System default')} · ${row.fcm_project_id||'FCM project unavailable'}`} icon="bi-broadcast-pin" onClose={onClose} active={canManage?{value:row.is_active,disabled:saving,onChange:next=>void toggle(next)}:undefined} contextMenu={[...(canManage?[{label:'Edit configuration',onSelect:edit},{label:row.is_active?'Deactivate':'Reactivate',disabled:saving,onSelect:()=>void toggle(!row.is_active)}]:[]),...(canTest?[{label:'Test stored credentials',onSelect:()=>void test()}]:[])]} sections={[{key:'configuration',label:'Configuration',icon:'bi-sliders',render:()=><div className="detail-section"><FlatRow label="FCM project">{row.fcm_project_id||'—'}</FlatRow><FlatRow label="Default sound">{row.default_sound}</FlatRow><FlatRow label="Active">{row.is_active?'Yes':'No'}</FlatRow><FlatRow label="Test mode">{row.test_mode?'Yes — sends are faked':'No'}</FlatRow><p className="dim">The connection test uses the backend's dummy registration token to validate credentials. This portal never accepts a device token and never sends a caller test notification.</p></div>}]} />;}
 export function PushConfigsPage(){const canManage=useCan(PUSH_CONFIG_MANAGE_PERMISSIONS).can;return <ModelTable model={PushConfigModel} eyebrow="Communications · Push" title="Configuration" columns={configColumns} defaultSort="name" searchable searchPlaceholder="Search configuration names" columnChooser persistState persistKey="admin:push:configs" addLabel="Create configuration" onAdd={canManage?()=>void modal.open(close=><ConfigEditor close={close}/>,{size:'lg'}):undefined} onRowClick={row=>void modal.detail(close=><ConfigDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
 
 export function PushPage(){const [searchParams,setSearchParams]=useSearchParams();const devices=useCan(PUSH_DEVICE_VIEW_PERMISSIONS);const deliveries=useCan(PUSH_DELIVERY_VIEW_PERMISSIONS);const templates=useCan(PUSH_TEMPLATE_VIEW_PERMISSIONS);const config=useCan(PUSH_CONFIG_VIEW_PERMISSIONS);const metrics=useCan(PUSH_METRICS_PERMISSIONS);if(devices.isLoading||deliveries.isLoading||templates.isLoading||config.isLoading||metrics.isLoading)return <div className="panel panel-pad dim">Loading Push permissions…</div>;const items=[{key:'stats',label:'Your stats',panel:<PushStatsPanel/>},...(metrics.can?[{key:'metrics',label:'Global metrics',panel:<PushMetricsPanel/>}]:[]),...(devices.can?[{key:'devices',label:'Devices',panel:<PushDevicesPage/>}]:[]),...(deliveries.can?[{key:'deliveries',label:'Deliveries',panel:<PushDeliveriesPage/>}]:[]),...(templates.can?[{key:'templates',label:'Templates',panel:<PushTemplatesPage/>}]:[]),...(config.can?[{key:'config',label:'Config',panel:<PushConfigsPage/>}]:[])];const requested=searchParams.get('push_surface')??'stats';const select=(key:string)=>setSearchParams({push_surface:key},{replace:true});return <div className="push-page"><div className="push-heading"><p className="eyebrow">Communications</p><h1>Push Notifications</h1><p className="dim">One global, no-group control plane. Each tab has an independent backend-derived gate; only the active authorized tab mounts and fetches.</p></div><Tabs ariaLabel="Push administration areas" variant="underline-all" items={items} activeKey={requested} onActiveKeyChange={select}/></div>;}

package/src/admin/monitoring/LogInspector.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { Badge, JsonBlock, fmt, toast, type Tone } from '../../ui';
+import { DetailView, JsonBlock, fmt, toast, type Tone } from '../../ui';
 import type { LogRow } from './models';
 
 export type StoredLogKind = 'request' | 'response' | 'message';
@@ -111,23 +111,7 @@ export function LogInspector({ log, onClose }: { log: LogRow; onClose?: () => vo
     const route = [log.method, log.path].filter(Boolean).join(' ') || 'No request route';
 
     return (
-        <div className="monitoring-inspector">
-            <header className="monitoring-inspector-head">
-                <div>
-                    <div className="eyebrow">Stored {recordKind} record</div>
-                    <h2>{route}</h2>
-                    <p>{fmt.datetime(log.created)} · log #{log.id}</p>
-                </div>
-                <div className="monitoring-inspector-actions">
-                    <Badge tone={LEVEL_TONE[log.level.toLowerCase()] ?? 'muted'}>{log.level}</Badge>
-                    {onClose && (
-                        <button type="button" className="btn-icon" onClick={onClose} aria-label="Close inspector" title="Close">
-                            <i className="bi bi-x-lg" />
-                        </button>
-                    )}
-                </div>
-            </header>
-
+        <DetailView title={route} subtitle={`Stored ${recordKind} record · ${fmt.datetime(log.created)} · log #${log.id}`} icon="bi-journal-text" onClose={onClose} chips={[{ text: log.level, tone: LEVEL_TONE[log.level.toLowerCase()] ?? 'muted' }]} sections={[{ key: 'record', label: 'Record', icon: 'bi-file-text', render: () => <div className="monitoring-inspector">
             <div className="monitoring-facts">
                 <Fact label="Kind">{log.kind || 'message'}</Fact>
                 <Fact label="User">{log.username || (log.uid ? `#${log.uid}` : '—')}</Fact>
@@ -155,6 +139,6 @@ export function LogInspector({ log, onClose }: { log: LogRow; onClose?: () => vo
                     The API exposes no request/response correlation key, so no paired record is claimed.
                 </p>
             )}
-        </div>
+        </div> }]} />
     );
 }