portal-mojo 0.2.2 → 0.2.3

package/src/admin/phonehub/PhoneHubPage.tsx

@@ -1,14 +1,23 @@
-import { useRef, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { ArmedButton, Badge, DetailView, FlatRow, ModelTable, Tabs, fmt, modal, toast, type Column, type FilterDef } from '../../ui';
+import { useRef, useState } from 'react';
 import { mojoList, useCan } from '../../client/runtime';
-import { buildPhoneConfigPayload, fetchPhoneGroupChoices, lookupPhoneNumber, normalizePhoneNumber, savePhoneConfigImperative, testPhoneConfigImperative, type PhoneSecretField, type SecretEdit } from './api';
+import { Badge, DetailView, FlatRow, ModelTable, Tabs, fmt, modal, toast, type Column, type FilterDef } from '../../ui';
+import { DEFAULT_MOJO_REMOTE_URL, buildPhoneConfigPayload, fetchPhoneGroupChoices, lookupPhoneNumber, normalizePhoneNumber, resolveMojoRemoteUrl, savePhoneConfigImperative, testPhoneConfigImperative, type PhoneSecretField, type SecretEdit } from './api';
 import { exportPhoneConfigs, exportPhoneNumbers, exportSmsAudits } from './data';
+import { openSmsComposer, SMS_SEND_PERMISSIONS } from './SmsComposer';
 import {
-    PHONE_CONFIG_DELETE_PERMISSIONS, PHONE_CONFIG_MANAGE_PERMISSIONS, PHONE_CONFIG_VIEW_PERMISSIONS,
-    PHONE_GROUP_DIRECTORY_PERMISSIONS, PHONE_LOOKUP_UI_PERMISSIONS, PHONE_NUMBER_DELETE_PERMISSIONS,
-    PHONE_NUMBER_VIEW_PERMISSIONS, SMS_DELETE_PERMISSIONS, SMS_VIEW_PERMISSIONS,
-    PhoneConfigModel, PhoneNumberModel, SmsModel, type PhoneConfigRow, type PhoneNumberRow, type SmsRow,
+    PHONE_CONFIG_MANAGE_PERMISSIONS,
+    PHONE_CONFIG_VIEW_PERMISSIONS,
+    PHONE_GROUP_DIRECTORY_PERMISSIONS,
+    PHONE_LOOKUP_UI_PERMISSIONS,
+    PHONE_NUMBER_VIEW_PERMISSIONS,
+    PhoneConfigModel,
+    PhoneNumberModel,
+    SMS_VIEW_PERMISSIONS,
+    SmsModel,
+    type PhoneConfigRow,
+    type PhoneNumberRow,
+    type SmsRow,
 } from './models';
 
 const relationLabel=(value:{id:number;name?:string;display_name?:string}|number|null,empty='System default')=>value==null?empty:typeof value==='number'?`#${value}`:value.name??value.display_name??`#${value.id}`;
@@ -39,19 +48,271 @@ const configColumns:Column<PhoneConfigRow>[]=[
     {key:'modified',label:'Modified',sortable:true,render:r=>fmt.datetime(r.modified)},
 ];
 
-function PhoneDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PhoneNumberModel.useOne(id);const canDelete=useCan(PHONE_NUMBER_DELETE_PERMISSIONS).can;const destroy=PhoneNumberModel.useDelete();if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading phone record…':'Phone record unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const remove=async()=>{await destroy.mutateAsync({id});toast.success('Local phone cache row deleted');onClose();};return <DetailView title={row.phone_number} subtitle={`${row.carrier||'Unknown carrier'} · ${row.line_type||'Unknown line type'}`} icon="bi-telephone" onClose={onClose} sections={[{key:'lookup',label:'Lookup',icon:'bi-search',render:()=><div className="detail-section"><FlatRow label="Provider">{row.lookup_provider||'—'}</FlatRow><FlatRow label="Lookup count">{row.lookup_count}</FlatRow><FlatRow label="Last lookup">{row.last_lookup_at?fmt.datetime(row.last_lookup_at):'Never'}</FlatRow><FlatRow label="Expires">{row.lookup_expires_at?fmt.datetime(row.lookup_expires_at):'Unknown'}</FlatRow><p className="dim">Lookup payloads are deliberately excluded from the client cache.</p></div>},{key:'identity',label:'Carrier & owner',icon:'bi-person-lines-fill',render:()=><div className="detail-section"><FlatRow label="Valid">{row.is_valid?'Yes':'No'}</FlatRow><FlatRow label="Mobile">{row.is_mobile?'Yes':'No'}</FlatRow><FlatRow label="VoIP">{row.is_voip?'Yes':'No'}</FlatRow><FlatRow label="Registered owner">{row.registered_owner||'—'}</FlatRow><FlatRow label="Region">{[row.region,row.state].filter(Boolean).join(', ')||'—'}</FlatRow></div>},...(canDelete?[{key:'delete',label:'Delete',icon:'bi-trash',render:()=><div className="detail-section"><p>Deletes this global cached phone record only. It does not affect provider data.</p><ArmedButton label="Delete cached record" armedLabel="Click again to delete" onConfirm={remove}/></div>}]:[])]}/>;}
+function PhoneDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PhoneNumberModel.useOne(id);if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading phone record…':'Phone record unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;return <DetailView title={row.phone_number} subtitle={`${row.carrier||'Unknown carrier'} · ${row.line_type||'Unknown line type'}`} icon="bi-telephone" onClose={onClose} sections={[{key:'lookup',label:'Lookup',icon:'bi-search',render:()=><div className="detail-section"><FlatRow label="Provider">{row.lookup_provider||'—'}</FlatRow><FlatRow label="Lookup count">{row.lookup_count}</FlatRow><FlatRow label="Last lookup">{row.last_lookup_at?fmt.datetime(row.last_lookup_at):'Never'}</FlatRow><FlatRow label="Expires">{row.lookup_expires_at?fmt.datetime(row.lookup_expires_at):'Unknown'}</FlatRow><p className="dim">Lookup payloads are deliberately excluded from the client cache.</p></div>},{key:'identity',label:'Carrier & owner',icon:'bi-person-lines-fill',render:()=><div className="detail-section"><FlatRow label="Valid">{row.is_valid?'Yes':'No'}</FlatRow><FlatRow label="Mobile">{row.is_mobile?'Yes':'No'}</FlatRow><FlatRow label="VoIP">{row.is_voip?'Yes':'No'}</FlatRow><FlatRow label="Registered owner">{row.registered_owner||'—'}</FlatRow><FlatRow label="Region">{[row.region,row.state].filter(Boolean).join(', ')||'—'}</FlatRow></div>}]}/>;}
 
 function LookupDialog({close}:{close:(row:PhoneNumberRow|null)=>void}){const qc=useQueryClient();const [value,setValue]=useState('');const [busy,setBusy]=useState(false);const [error,setError]=useState('');const submit=async()=>{setBusy(true);setError('');try{const normalized=await normalizePhoneNumber(value);let previous:PhoneNumberRow|undefined;try{const existing=await mojoList<PhoneNumberRow>(PhoneNumberModel.endpoint,{phone_number:normalized,graph:'default',start:0,size:1});previous=existing.rows[0];}catch{/* lookup remains available for a new row */}const row=await lookupPhoneNumber(normalized,previous,()=>window.confirm('This cache row is still fresh. Force a paid global Twilio Lookup anyway?'));qc.setQueryData(PhoneNumberModel.keys.one(row.id),row);await qc.invalidateQueries({queryKey:PhoneNumberModel.keys.root});toast.success('Lookup completed with refresh evidence');close(row);}catch(reason){setError(reason instanceof Error?reason.message:'Lookup failed');}finally{setBusy(false);}};return <div className="modal-pad"><h2 className="modal-title">Lookup phone number</h2><p className="dim">The number is normalized first. New or expired rows refresh automatically; a known-fresh row requires confirmation before a paid global Twilio Lookup.</p>{error&&<div className="form-alert" role="alert">{error}</div>}<label className="field"><span className="field-label">Phone number</span><input className="input" value={value} onChange={e=>setValue(e.target.value)} placeholder="+1 415 555 0100"/></label><div className="modal-actions"><button className="btn" disabled={busy} onClick={()=>close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy||!value.trim()} onClick={()=>void submit()}>{busy?'Looking up…':'Normalize and look up'}</button></div></div>;}
 
 export function PhoneNumbersPage(){const canLookup=useCan(PHONE_LOOKUP_UI_PERMISSIONS).can;return <ModelTable model={PhoneNumberModel} eyebrow="Communications · Phone Hub" title="Phone Numbers" columns={phoneColumns} defaultSort="phone_number" searchable searchPlaceholder="Search number, carrier, or owner" columnChooser persistState persistKey="admin:phonehub:numbers" exportFormats={['csv','json']} exporter={exportPhoneNumbers} addLabel="Lookup number" onAdd={canLookup?()=>void modal.open(close=><LookupDialog close={close}/>):undefined} onRowClick={row=>void modal.detail(close=><PhoneDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
 
-function SmsDetail({id,onClose}:{id:number;onClose:()=>void}){const query=SmsModel.useOne(id);const canDelete=useCan(SMS_DELETE_PERMISSIONS).can;const destroy=SmsModel.useDelete();if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading SMS audit…':'SMS audit unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;const remove=async()=>{await destroy.mutateAsync({id});toast.success('Local SMS audit row deleted');onClose();};return <DetailView title={`${row.from_number} → ${row.to_number}`} subtitle={`${row.direction} · ${row.status}`} icon="bi-chat-square-text" onClose={onClose} sections={[{key:'message',label:'Message',icon:'bi-chat-text',render:()=><div className="detail-section"><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow><FlatRow label="Provider">{row.provider||'—'}</FlatRow><FlatRow label="Group">{relationLabel(row.group,'None')}</FlatRow><div className="known-card"><h3>Message body</h3><p className="pre-wrap">{row.body||'—'}</p></div>{row.error_message&&<div className="form-alert">{row.error_message}</div>}</div>},...(canDelete?[{key:'delete',label:'Delete',icon:'bi-trash',render:()=><div className="detail-section"><p>Deletes the local audit row only. It cannot recall or alter a provider message. SMS rows are deleted when their owning user or group is deleted; deleting a provider config does not delete them.</p><ArmedButton label="Delete SMS audit row" armedLabel="Click again to delete" onConfirm={remove}/></div>}]:[])]}/>;}
-export function SmsPage(){return <ModelTable model={SmsModel} eyebrow="Communications · Phone Hub" title="SMS Audit" columns={smsColumns} filters={smsFilters} defaultSort="-created" searchable searchPlaceholder="Search number or message body" autoRefresh={20} columnChooser persistState persistKey="admin:phonehub:sms" exportFormats={['csv','json']} exporter={exportSmsAudits} onRowClick={row=>void modal.detail(close=><SmsDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
+function SmsDetail({id,onClose}:{id:number;onClose:()=>void}){const query=SmsModel.useOne(id);if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading SMS audit…':'SMS audit unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;const row=query.data;return <DetailView title={`${row.from_number} → ${row.to_number}`} subtitle={`${row.direction} · ${row.status}`} icon="bi-chat-square-text" onClose={onClose} sections={[{key:'message',label:'Message',icon:'bi-chat-text',render:()=><div className="detail-section"><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow><FlatRow label="Provider">{row.provider||'—'}</FlatRow><FlatRow label="Group">{relationLabel(row.group,'None')}</FlatRow><div className="known-card"><h3>Message body</h3><p className="pre-wrap">{row.body||'—'}</p></div>{row.error_message&&<div className="form-alert">{row.error_message}</div>}</div>}]}/>;}
+export function SmsPage(){const canSend=useCan(SMS_SEND_PERMISSIONS).can;return <ModelTable model={SmsModel} eyebrow="Communications · Phone Hub" title="SMS Audit" columns={smsColumns} filters={smsFilters} defaultSort="-created" searchable searchPlaceholder="Search number or message body" autoRefresh={20} columnChooser persistState persistKey="admin:phonehub:sms" exportFormats={['csv','json']} exporter={exportSmsAudits} addLabel="Send SMS" onAdd={canSend?()=>void openSmsComposer():undefined} onRowClick={row=>void modal.detail(close=><SmsDetail id={row.id} onClose={()=>close(null)}/>)}/>;}
+
+type PhoneProvider = PhoneConfigRow['provider'];
+
+const credentialLabels: Record<PhoneSecretField, string> = {
+    twilio_account_sid: 'Twilio account SID',
+    twilio_auth_token: 'Twilio auth token',
+    aws_access_key_id: 'AWS access key ID',
+    aws_secret_access_key: 'AWS secret access key',
+    mojo_api_key: 'Mojo service API key',
+};
+
+const providerMeta: Record<PhoneProvider, { label: string; icon: string; description: string }> = {
+    twilio: { label: 'Twilio', icon: 'bi-chat-square-text', description: 'Programmable SMS credentials' },
+    aws: { label: 'AWS SNS', icon: 'bi-cloud', description: 'Regional SMS sender credentials' },
+    mojo: { label: 'Mojo Remote', icon: 'bi-phone', description: 'Group-aware remote Mojo bridge' },
+};
+
+const providerCredentialFields: Record<PhoneProvider, PhoneSecretField[]> = {
+    twilio: ['twilio_account_sid', 'twilio_auth_token'],
+    aws: ['aws_access_key_id', 'aws_secret_access_key'],
+    mojo: ['mojo_api_key'],
+};
+
+function providerOperationalNote(provider: PhoneProvider): string {
+    if (provider === 'mojo') return 'Mojo Remote is used by the group-aware SMS delivery path.';
+    if (provider === 'aws') return 'Stored AWS credentials can be tested here. AWS outbound delivery is not wired yet.';
+    return 'Stored Twilio credentials can be tested here. Outbound delivery currently uses the global Twilio settings.';
+}
+
+function providerVisibleRows(row: PhoneConfigRow): Array<[string, string]> {
+    if (row.provider === 'twilio') return [['From number', row.twilio_from_number || 'Not set']];
+    if (row.provider === 'aws') return [['Region', row.aws_region || 'Not set'], ['Sender ID', row.aws_sender_id || 'Not set']];
+    return [['Remote URL', row.mojo_remote_url || 'Not set']];
+}
+
+function CredentialField({ field, existing, clearing, wide, inputRef, onToggle }: {
+    field: PhoneSecretField;
+    existing: boolean;
+    clearing: boolean;
+    wide?: boolean;
+    inputRef: (node: HTMLInputElement | null) => void;
+    onToggle: () => void;
+}) {
+    const inputId = `phonehub-${field}`;
+    return <div className={`field phonehub-secret-field${wide ? ' phonehub-field-span' : ''}`}>
+        <label className="field-label" htmlFor={inputId}>{credentialLabels[field]}</label>
+        <div className="phonehub-secret-row">
+            <input
+                id={inputId}
+                ref={inputRef}
+                className="input"
+                type="password"
+                autoComplete="new-password"
+                placeholder={existing ? 'Leave blank to keep the stored value' : 'Enter credential'}
+                disabled={clearing}
+            />
+            {existing && <button type="button" className={`btn${clearing ? ' btn-danger' : ''}`} onClick={onToggle}>
+                {clearing ? 'Keep stored value' : 'Clear stored value…'}
+            </button>}
+        </div>
+        <span className={`field-help${clearing ? ' text-bad' : ''}`}>
+            {clearing ? 'This credential will be cleared when you save.' : 'Write-only; the stored value is never displayed.'}
+        </span>
+    </div>;
+}
+
+function ConfigEditor({ row, close }: { row?: PhoneConfigRow; close: (value: PhoneConfigRow | null) => void }) {
+    const qc = useQueryClient();
+    const canGroups = useCan(PHONE_GROUP_DIRECTORY_PERMISSIONS).can;
+    const groups = useQuery({ queryKey: ['phonehub', 'group-choices'], queryFn: fetchPhoneGroupChoices, enabled: canGroups, staleTime: 60_000 });
+    const [name, setName] = useState(row?.name ?? '');
+    const [provider, setProvider] = useState<PhoneProvider>(row?.provider ?? 'twilio');
+    const [group, setGroup] = useState(row?.group == null ? '' : String(typeof row.group === 'number' ? row.group : row.group.id));
+    const [active, setActive] = useState(row?.is_active ?? true);
+    const [testMode, setTestMode] = useState(row?.test_mode ?? false);
+    const [lookup, setLookup] = useState(row?.lookup_enabled ?? true);
+    const [cacheDays, setCacheDays] = useState(row?.lookup_cache_days ?? 90);
+    const [twilioFrom, setTwilioFrom] = useState(row?.twilio_from_number ?? '');
+    const [awsRegion, setAwsRegion] = useState(row?.aws_region ?? 'us-east-1');
+    const [awsSender, setAwsSender] = useState(row?.aws_sender_id ?? '');
+    const [mojoUrl, setMojoUrl] = useState(resolveMojoRemoteUrl(row?.mojo_remote_url));
+    const refs = useRef<Partial<Record<PhoneSecretField, HTMLInputElement | null>>>({});
+    const [clearFields, setClearFields] = useState<PhoneSecretField[]>([]);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const meta = providerMeta[provider];
+    const invalidCache = lookup && (!Number.isFinite(cacheDays) || cacheDays < 1);
+
+    const chooseProvider = (next: PhoneProvider) => {
+        setProvider(next);
+        if (next === 'mojo') setMojoUrl((value) => resolveMojoRemoteUrl(value));
+        setClearFields([]);
+    };
+    const toggleClear = (field: PhoneSecretField) => {
+        if (clearFields.includes(field)) {
+            setClearFields(clearFields.filter((value) => value !== field));
+            return;
+        }
+        if (window.confirm(`Clear the stored ${credentialLabels[field]} on save?`)) setClearFields([...clearFields, field]);
+    };
+    const submit = async () => {
+        setBusy(true);
+        setError('');
+        const credentials: Partial<Record<PhoneSecretField, SecretEdit>> = {};
+        const visibleCredentials = providerCredentialFields[provider];
+        for (const field of Object.keys(credentialLabels) as PhoneSecretField[]) {
+            const value = refs.current[field]?.value ?? '';
+            credentials[field] = !visibleCredentials.includes(field)
+                ? { mode: 'untouched' }
+                : clearFields.includes(field)
+                    ? { mode: 'clear', confirmed: true }
+                    : value ? { mode: 'replace', value } : { mode: 'untouched' };
+        }
+        const providerChanges = provider === 'twilio'
+            ? { twilio_from_number: twilioFrom || null }
+            : provider === 'aws'
+                ? { aws_region: awsRegion || null, aws_sender_id: awsSender || null }
+                : { mojo_remote_url: resolveMojoRemoteUrl(mojoUrl) };
+        try {
+            buildPhoneConfigPayload({}, credentials);
+            const saved = await savePhoneConfigImperative(qc, row?.id ?? null, {
+                name: name.trim(), provider, group: group ? Number(group) : null,
+                is_active: active, test_mode: testMode, lookup_enabled: lookup,
+                lookup_cache_days: cacheDays, ...providerChanges,
+            }, credentials);
+            for (const field of Object.keys(credentialLabels) as PhoneSecretField[]) if (refs.current[field]) refs.current[field]!.value = '';
+            toast.success(row ? 'Provider configuration updated' : 'Provider configuration created');
+            close(saved);
+        } catch (reason) {
+            setError(reason instanceof Error ? reason.message : 'Configuration could not be saved');
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return <div className="modal-pad phonehub-config-editor">
+        <header className="phonehub-config-header">
+            <div className="eyebrow">Phone Hub</div>
+            <h2 className="modal-title">{row ? 'Edit' : 'Create'} provider configuration</h2>
+            <p className="dim">Choose a provider, enter only its connection details, then set how this configuration participates in delivery and lookup.</p>
+        </header>
+        <div className="phonehub-config-sections">
+            {error && <div className="form-alert" role="alert">{error}</div>}
+            <section className="phonehub-config-section" aria-labelledby="phonehub-basics-heading">
+                <div className="phonehub-config-section-heading">
+                    <span className="phonehub-config-section-icon"><i className="bi bi-card-heading" /></span>
+                    <div><h3 id="phonehub-basics-heading">Basics</h3><p>Name the configuration and decide where it applies.</p></div>
+                </div>
+                <div className="phonehub-field-grid">
+                    <label className="field phonehub-field-span"><span className="field-label">Name</span><input className="input" value={name} onChange={(event) => setName(event.target.value)} placeholder="e.g. Primary Twilio or Mojo Remote" /></label>
+                    {canGroups ? <label className="field phonehub-field-span"><span className="field-label">Group scope</span><select className="input" value={group} onChange={(event) => setGroup(event.target.value)}><option value="">System default</option>{groups.data?.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select><span className="field-help">System default is used when an active group-specific configuration is unavailable.</span></label> : <div className="field phonehub-field-span"><span className="field-label">Group scope</span><div className="input" aria-readonly="true">{relationLabel(row?.group ?? null)}</div><span className="field-help">Group choices stay hidden without global group-directory permission.</span></div>}
+                    <fieldset className="phonehub-provider-fieldset phonehub-field-span">
+                        <legend className="field-label">Provider</legend>
+                        <div className="phonehub-provider-options">
+                            {(Object.entries(providerMeta) as Array<[PhoneProvider, typeof providerMeta[PhoneProvider]]>).map(([value, option]) => <label className="phonehub-provider-option" key={value}>
+                                <input type="radio" name="phonehub-provider" value={value} checked={provider === value} onChange={() => chooseProvider(value)} />
+                                <span><i className={`bi ${option.icon}`} /><strong>{option.label}</strong><small>{option.description}</small></span>
+                            </label>)}
+                        </div>
+                    </fieldset>
+                </div>
+            </section>
+
+            <section className="phonehub-config-section" aria-labelledby="phonehub-connection-heading">
+                <div className="phonehub-config-section-heading">
+                    <span className="phonehub-config-section-icon"><i className={`bi ${meta.icon}`} /></span>
+                    <div><h3 id="phonehub-connection-heading">{meta.label} connection</h3><p>Only fields for the selected provider are shown and submitted.</p></div>
+                </div>
+                <div className="phonehub-field-grid">
+                    {provider === 'twilio' && <>
+                        <label className="field phonehub-field-span"><span className="field-label">From number</span><input className="input" value={twilioFrom} onChange={(event) => setTwilioFrom(event.target.value)} placeholder="+15551234567" /></label>
+                    </>}
+                    {provider === 'aws' && <>
+                        <label className="field"><span className="field-label">AWS region</span><input className="input" value={awsRegion} onChange={(event) => setAwsRegion(event.target.value)} placeholder="us-east-1" /></label>
+                        <label className="field"><span className="field-label">Sender ID</span><input className="input" value={awsSender} onChange={(event) => setAwsSender(event.target.value)} placeholder="Optional, region-dependent" /></label>
+                    </>}
+                    {provider === 'mojo' && <>
+                        <label className="field phonehub-field-span"><span className="field-label">Remote Mojo URL</span><input className="input" type="url" value={mojoUrl} onChange={(event) => setMojoUrl(event.target.value)} onBlur={() => setMojoUrl((value) => resolveMojoRemoteUrl(value))} placeholder={DEFAULT_MOJO_REMOTE_URL} /><span className="field-help">Defaults to the hosted MojoVerify API. Change this only for a custom Mojo endpoint.</span></label>
+                    </>}
+                    {providerCredentialFields[provider].map((field) => <CredentialField
+                        key={field}
+                        field={field}
+                        existing={Boolean(row)}
+                        clearing={clearFields.includes(field)}
+                        wide={providerCredentialFields[provider].length === 1}
+                        inputRef={(node) => { refs.current[field] = node; }}
+                        onToggle={() => toggleClear(field)}
+                    />)}
+                </div>
+                <div className={`phonehub-provider-note${provider === 'mojo' ? '' : ' is-warning'}`}><i className={`bi ${provider === 'mojo' ? 'bi-info-circle' : 'bi-exclamation-triangle'}`} /><span>{providerOperationalNote(provider)}</span></div>
+            </section>
+
+            <section className="phonehub-config-section" aria-labelledby="phonehub-behavior-heading">
+                <div className="phonehub-config-section-heading">
+                    <span className="phonehub-config-section-icon"><i className="bi bi-toggles" /></span>
+                    <div><h3 id="phonehub-behavior-heading">Behavior</h3><p>Control selection, connection testing, and phone-number lookup.</p></div>
+                </div>
+                <div className="phonehub-behavior-grid">
+                    <label className="phonehub-behavior-setting"><span><strong>Active</strong><small>Eligible for provider selection.</small></span><input type="checkbox" role="switch" className="switch" checked={active} onChange={(event) => setActive(event.target.checked)} /></label>
+                    <label className="phonehub-behavior-setting"><span><strong>Test mode</strong><small>Short-circuit connection tests; delivery is unchanged.</small></span><input type="checkbox" role="switch" className="switch" checked={testMode} onChange={(event) => setTestMode(event.target.checked)} /></label>
+                    <label className="phonehub-behavior-setting"><span><strong>Automatic lookup</strong><small>Look up carrier data for new numbers.</small></span><input type="checkbox" role="switch" className="switch" checked={lookup} onChange={(event) => setLookup(event.target.checked)} /></label>
+                </div>
+                <label className="field phonehub-cache-field"><span className="field-label">Lookup cache lifetime</span><div className="phonehub-number-suffix"><input className="input" type="number" min="1" value={cacheDays} disabled={!lookup} onChange={(event) => setCacheDays(Number(event.target.value))} /><span>days</span></div>{invalidCache && <span className="field-error">Enter at least 1 day.</span>}</label>
+            </section>
+        </div>
+        <div className="modal-actions phonehub-config-actions">
+            <button className="btn" disabled={busy} onClick={() => close(null)}>Cancel</button>
+            <button className="btn btn-primary" disabled={busy || !name.trim() || invalidCache} onClick={() => void submit()}>{busy ? 'Saving…' : 'Save configuration'}</button>
+        </div>
+    </div>;
+}
+
+function ConfigDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const qc = useQueryClient();
+    const [saving, setSaving] = useState(false);
+    const query = PhoneConfigModel.useOne(id);
+    const canManage = useCan(PHONE_CONFIG_MANAGE_PERMISSIONS).can;
+
 
-const credentialLabels:Record<PhoneSecretField,string>={twilio_account_sid:'Twilio account SID',twilio_auth_token:'Twilio auth token',aws_access_key_id:'AWS access key id',aws_secret_access_key:'AWS secret access key',mojo_api_key:'Mojo service API key'};
-function ConfigEditor({row,close}:{row?:PhoneConfigRow;close:(value:PhoneConfigRow|null)=>void}){const qc=useQueryClient();const canGroups=useCan(PHONE_GROUP_DIRECTORY_PERMISSIONS).can;const groups=useQuery({queryKey:['phonehub','group-choices'],queryFn:fetchPhoneGroupChoices,enabled:canGroups,staleTime:60_000});const [name,setName]=useState(row?.name??'');const [provider,setProvider]=useState<PhoneConfigRow['provider']>(row?.provider??'twilio');const [group,setGroup]=useState(row?.group==null?'':String(typeof row.group==='number'?row.group:row.group.id));const [active,setActive]=useState(row?.is_active??true);const [testMode,setTestMode]=useState(row?.test_mode??false);const [lookup,setLookup]=useState(row?.lookup_enabled??true);const [cacheDays,setCacheDays]=useState(row?.lookup_cache_days??90);const [twilioFrom,setTwilioFrom]=useState(row?.twilio_from_number??'');const [awsRegion,setAwsRegion]=useState(row?.aws_region??'us-east-1');const [awsSender,setAwsSender]=useState(row?.aws_sender_id??'');const [mojoUrl,setMojoUrl]=useState(row?.mojo_remote_url??'');const refs=useRef<Partial<Record<PhoneSecretField,HTMLInputElement|null>>>({});const [clearFields,setClearFields]=useState<PhoneSecretField[]>([]);const [busy,setBusy]=useState(false);const [error,setError]=useState('');const toggleClear=(field:PhoneSecretField)=>{if(clearFields.includes(field)){setClearFields(clearFields.filter(v=>v!==field));return;}if(window.confirm(`Clear the stored ${credentialLabels[field]} on save?`))setClearFields([...clearFields,field]);};const submit=async()=>{setBusy(true);setError('');const credentials:Partial<Record<PhoneSecretField,SecretEdit>>={};for(const field of Object.keys(credentialLabels) as PhoneSecretField[]){const value=refs.current[field]?.value??'';credentials[field]=clearFields.includes(field)?{mode:'clear',confirmed:true}:value?{mode:'replace',value}:{mode:'untouched'};}try{buildPhoneConfigPayload({},credentials);const saved=await savePhoneConfigImperative(qc,row?.id??null,{name:name.trim(),provider,group:group?Number(group):null,is_active:active,test_mode:testMode,lookup_enabled:lookup,lookup_cache_days:cacheDays,twilio_from_number:twilioFrom||null,aws_region:awsRegion||null,aws_sender_id:awsSender||null,mojo_remote_url:mojoUrl||null},credentials);for(const field of Object.keys(credentialLabels) as PhoneSecretField[])if(refs.current[field])refs.current[field]!.value='';toast.success(row?'Provider configuration updated':'Provider configuration created');close(saved);}catch(reason){setError(reason instanceof Error?reason.message:'Configuration could not be saved');}finally{setBusy(false);}};return <div className="modal-pad phonehub-config-editor"><h2 className="modal-title">{row?'Edit':'Create'} provider configuration</h2><p className="dim">Credentials are write-only. Leave a field blank to keep it, type a replacement, or explicitly confirm Clear. Empty strings are never submitted.</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">Provider</span><select className="input" value={provider} onChange={e=>setProvider(e.target.value as PhoneConfigRow['provider'])}><option value="twilio">Twilio</option><option value="aws">AWS</option><option value="mojo">Mojo</option></select></label>{canGroups?<label className="field col-12"><span className="field-label">Group scope</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><span className="field-help">Choices are a bounded global directory projection (maximum 100).</span></label>:<div className="field col-12"><span className="field-label">Group scope</span><div className="input" aria-readonly="true">{relationLabel(row?.group??null)}</div><span className="field-help">Group choices stay hidden without global group-directory permission.</span></div>}<label className="field col-6"><span className="field-label">Twilio from number</span><input className="input" value={twilioFrom} onChange={e=>setTwilioFrom(e.target.value)}/></label><label className="field col-6"><span className="field-label">AWS region</span><input className="input" value={awsRegion} onChange={e=>setAwsRegion(e.target.value)}/></label><label className="field col-6"><span className="field-label">AWS sender id</span><input className="input" value={awsSender} onChange={e=>setAwsSender(e.target.value)}/></label><label className="field col-6"><span className="field-label">Mojo remote URL</span><input className="input" value={mojoUrl} onChange={e=>setMojoUrl(e.target.value)}/></label>{(Object.keys(credentialLabels) as PhoneSecretField[]).map(field=><label className="field col-6" key={field}><span className="field-label">{credentialLabels[field]}</span><div className="phonehub-secret-row"><input ref={node=>{refs.current[field]=node;}} className="input" type="password" autoComplete="new-password" disabled={clearFields.includes(field)}/><button type="button" className={`btn${clearFields.includes(field)?' btn-danger':''}`} onClick={()=>toggleClear(field)}>{clearFields.includes(field)?'Keep instead':'Clear…'}</button></div></label>)}<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><label className="check col-4"><input type="checkbox" checked={lookup} onChange={e=>setLookup(e.target.checked)}/><span>Lookup enabled</span></label><label className="field col-4"><span className="field-label">Lookup cache days</span><input className="input" type="number" min="1" value={cacheDays} onChange={e=>setCacheDays(Number(e.target.value))}/></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 [testing, setTesting] = useState(false);
+    if (!query.data) return <div className="modal-pad">{query.isLoading ? 'Loading provider configuration…' : 'Configuration unavailable'}<button className="btn" onClick={onClose}>Close</button></div>;
+    const row = query.data;
+    const toggle = async (next: boolean) => {
+        if (!canManage || saving) return;
+        setSaving(true);
+        try { await savePhoneConfigImperative(qc, id, { is_active: next }, {}); await query.refetch(); }
+        catch (error) { toast.error(error instanceof Error ? error.message : 'State change failed'); }
+        finally { setSaving(false); }
+    };
+    const meta = providerMeta[row.provider];
+    const edit = () => void modal.open((close) => <ConfigEditor row={row} close={async (saved) => { close(saved); if (saved) await query.refetch(); }} />, { size: 'lg' });
+    const test = async () => {
+        setTesting(true);
+        try {
+            const result = await testPhoneConfigImperative(id);
+            toast[result.status ? 'success' : 'error'](result.message);
+        } catch (reason) {
+            toast.error(reason instanceof Error ? reason.message : 'Connection test failed');
+        } finally {
+            setTesting(false);
+        }
+    };
 
-function ConfigDetail({id,onClose}:{id:number;onClose:()=>void}){const query=PhoneConfigModel.useOne(id);const canManage=useCan(PHONE_CONFIG_MANAGE_PERMISSIONS).can;const canDelete=useCan(PHONE_CONFIG_DELETE_PERMISSIONS).can;const destroy=PhoneConfigModel.useDelete();if(!query.data)return <div className="modal-pad">{query.isLoading?'Loading provider 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 testPhoneConfigImperative(id);toast[result.status?'success':'error'](result.message);}catch(reason){toast.error(reason instanceof Error?reason.message:'Connection test failed');}};const remove=async()=>{await destroy.mutateAsync({id});toast.success('Provider configuration deleted');onClose();};return <DetailView title={row.name} subtitle={`${relationLabel(row.group)} · ${row.provider}`} icon="bi-phone" 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><button className="btn" onClick={()=>void test()}>Test stored connection</button></>}</div><FlatRow label="Provider">{row.provider}</FlatRow><FlatRow label="Active">{row.is_active?'Yes':'No'}</FlatRow><FlatRow label="Test mode">{row.test_mode?'Yes':'No'}</FlatRow><FlatRow label="Lookup cache">{row.lookup_cache_days} days</FlatRow><p className="form-alert">Test mode only short-circuits the connection test; it does not prevent SMS sends. Current sending uses a per-group configuration only for the Mojo provider. Stored Twilio and AWS credentials are testable, but sending still follows global Twilio settings; AWS sending is not wired.</p><p className="dim">An active group config wins, otherwise the first active system default is used. Deleting or deactivating it falls back to the system default. Deleting a group cascades its config; deleting this config does not delete SMS audit rows.</p></div>},...(canDelete?[{key:'delete',label:'Delete',icon:'bi-trash',render:()=><div className="detail-section"><ArmedButton label="Delete provider configuration" armedLabel="Click again to delete" onConfirm={remove}/></div>}]:[])]}/>;}
+    return <DetailView
+        title={row.name}
+        subtitle={relationLabel(row.group)}
+        icon={meta.icon}
+        chips={[{ text: meta.label, tone: 'info' }, { text: row.is_active ? 'Active' : 'Inactive', tone: row.is_active ? 'success' : 'muted' }, ...(row.test_mode ? [{ text: 'Test mode', tone: 'warning' as const }] : [])]}
+        onClose={onClose}
+        active={canManage ? { value: row.is_active, disabled: saving, onChange: next => void toggle(next) } : undefined}
+        contextMenu={canManage ? [{ label: 'Edit configuration', onSelect: edit }, { label: 'Test stored connection', disabled: testing, onSelect: () => void test() }, { label: row.is_active ? 'Deactivate' : 'Reactivate', disabled: saving, onSelect: () => void toggle(!row.is_active) }] : []}
+        sections={[
+            { key: 'overview', label: 'Overview', icon: 'bi-sliders', render: () => <div className="detail-section"><div className="phonehub-provider-summary"><i className={`bi ${meta.icon}`} /><div><span className="eyebrow">Provider</span><h3>{meta.label}</h3><p>{meta.description}</p></div></div><div className="phonehub-summary-grid"><div className="known-card"><span>Scope</span><strong>{relationLabel(row.group)}</strong></div><div className="known-card"><span>Automatic lookup</span><strong>{row.lookup_enabled ? `Enabled · ${row.lookup_cache_days} days` : 'Disabled'}</strong></div><div className="known-card"><span>Last modified</span><strong>{fmt.datetime(row.modified)}</strong></div></div><p className="dim">An active group configuration wins; otherwise Phone Hub falls back to the first active system default.</p></div> },
+            { key: 'connection', label: 'Connection', icon: 'bi-plug', render: () => <div className="detail-section"><div className="section-eyebrow">{meta.label} settings</div>{providerVisibleRows(row).map(([label, value]) => <FlatRow key={label} label={label}>{value}</FlatRow>)}<FlatRow label="Credentials"><span><i className="bi bi-shield-lock" /> Write-only; edit to replace or clear</span></FlatRow><div className={`phonehub-provider-note${row.provider === 'mojo' ? '' : ' is-warning'}`}><i className={`bi ${row.provider === 'mojo' ? 'bi-info-circle' : 'bi-exclamation-triangle'}`} /><span>{providerOperationalNote(row.provider)}</span></div>{row.test_mode && <div className="phonehub-provider-note is-warning"><i className="bi bi-beaker" /><span>Test mode only short-circuits the connection test. It does not prevent SMS delivery.</span></div>}<FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow></div> }
+        ]}
+    />;
+}
 export function ProviderConfigsPage(){const canManage=useCan(PHONE_CONFIG_MANAGE_PERMISSIONS).can;return <ModelTable model={PhoneConfigModel} eyebrow="Communications · Phone Hub" title="Provider Configurations" columns={configColumns} defaultSort="name" searchable searchPlaceholder="Search configuration names" columnChooser persistState persistKey="admin:phonehub:configs" exportFormats={['csv','json']} exporter={exportPhoneConfigs} 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 PhoneHubPage(){const canNumbers=useCan(PHONE_NUMBER_VIEW_PERMISSIONS).can;const canSms=useCan(SMS_VIEW_PERMISSIONS).can;const canConfig=useCan(PHONE_CONFIG_VIEW_PERMISSIONS).can;const items=[...(canNumbers?[{key:'numbers',label:'Phone Numbers',panel:<PhoneNumbersPage/>}]:[]),...(canSms?[{key:'sms',label:'SMS',panel:<SmsPage/>}]:[]),...(canConfig?[{key:'config',label:'Provider Config',panel:<ProviderConfigsPage/>}]:[])];return <div className="phonehub-page"><div className="phonehub-heading"><p className="eyebrow">Communications</p><h1>Phone Hub</h1><p className="dim">Global phone intelligence, SMS audit history, and provider configuration. This surface never adopts the active product group.</p></div><Tabs ariaLabel="Phone Hub admin areas" variant="underline-all" items={items}/></div>;}

package/src/admin/phonehub/SmsComposer.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { mojoCall, useCan } from '../../client/runtime';
+import { Badge, FlatRow, modal } from '../../ui';
+import { normalizePhoneNumber } from './api';
+import { SMS_VIEW_PERMISSIONS, SmsModel, sanitizeSmsRow, type SmsRow } from './models';
+
+// Sending and creating/editing an audit row are separate backend operations.
+export const SMS_SEND_PERMISSIONS = ['sys.send_sms', 'sys.comms'];
+
+export function openSmsComposer() {
+    let sending = false;
+    return modal.open(close => <SmsComposer close={() => close(null)} onSending={value => { sending = value; }} />, {
+        canDismiss: () => !sending,
+    });
+}
+
+export function SmsComposer({ close, onSending }: { close: () => void; onSending: (value: boolean) => void }) {
+    const qc = useQueryClient();
+    const { can: canSend, me } = useCan(SMS_SEND_PERMISSIONS);
+    const canView = useCan(SMS_VIEW_PERMISSIONS).can;
+    const actor = useRef(me?.id);
+    const allowed = useRef(false);
+    allowed.current = canSend && canView && me?.id === actor.current;
+    const mounted = useRef(true);
+    const inFlight = useRef(false);
+    const [recipient, setRecipient] = useState('');
+    const [message, setMessage] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const [receipt, setReceipt] = useState<SmsRow | null>(null);
+    const [refreshError, setRefreshError] = useState(false);
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
+
+    const assertAllowed = () => {
+        if (!mounted.current || !allowed.current) throw new Error('Your permission to send SMS is no longer available.');
+    };
+    const submit = async (event: FormEvent) => {
+        event.preventDefault();
+        if (inFlight.current || receipt || !recipient.trim() || !message.trim()) return;
+        inFlight.current = true;
+        onSending(true);
+        setBusy(true);
+        setError('');
+        let attempted = false;
+        try {
+            assertAllowed();
+            const to_number = await normalizePhoneNumber(recipient);
+            assertAllowed();
+            // Explicit global scope: never copy outer params/group, audit fields,
+            // credentials or a provider selector into the sending request.
+            const response = await mojoCall('/api/phonehub/sms/send', {
+                method: 'POST',
+                body: { to_number, body: message },
+                beforeSend: () => { assertAllowed(); attempted = true; },
+            });
+            const data = response.data as SmsRow | undefined;
+            if (!data || !Number.isSafeInteger(data.id) || data.id <= 0 || typeof data.status !== 'string' || !data.status) {
+                throw new Error('The server returned no message receipt.');
+            }
+            if (mounted.current) setReceipt(sanitizeSmsRow(data));
+        } catch (reason) {
+            if (mounted.current) setError(`${reason instanceof Error ? reason.message : 'SMS request failed.'}${attempted ? ' Check SMS Audit before trying again; sending could not be confirmed.' : ''}`);
+        } finally {
+            if (attempted) {
+                try { await qc.invalidateQueries({ queryKey: SmsModel.keys.root }); }
+                catch { if (mounted.current) setRefreshError(true); }
+            }
+            inFlight.current = false;
+            onSending(false);
+            if (mounted.current) setBusy(false);
+        }
+    };
+
+    if (receipt) {
+        const failed = receipt.status === 'failed' || receipt.status === 'undelivered';
+        return <div className="modal-pad">
+            <h2 className="modal-title">{failed ? 'SMS failed' : 'SMS request recorded'}</h2>
+            <p className="modal-message">{failed ? 'The message was not delivered. Review the error before sending another message.' : 'The status below is reported by Phone Hub. Only a delivered status confirms delivery.'}</p>
+            <FlatRow label="To"><code>{receipt.to_number || recipient}</code></FlatRow>
+            <FlatRow label="Status"><Badge tone={failed ? 'danger' : receipt.status === 'delivered' ? 'success' : 'info'}>{receipt.status}</Badge></FlatRow>
+            <FlatRow label="Audit record">#{receipt.id}</FlatRow>
+            {receipt.error_message && <div className="form-alert" role="alert">{receipt.error_message}</div>}
+            {refreshError && <p role="alert">Refresh SMS Audit to see the latest message record.</p>}
+            <div className="modal-actions"><button className="btn btn-primary" disabled={busy} onClick={close}>Close</button></div>
+        </div>;
+    }
+    return <form className="modal-pad" onSubmit={event => void submit(event)}>
+        <h2 className="modal-title">Send SMS</h2>
+        <p className="modal-message">Send one message using the system SMS configuration and its default sender. This sends a real message; provider test mode does not prevent delivery.</p>
+        {error && <div className="form-alert" role="alert">{error}</div>}
+        {!allowed.current && <div className="form-alert" role="alert">You no longer have permission to send SMS.</div>}
+        <label className="field"><span className="field-label">Recipient</span><input className="input" type="tel" autoComplete="tel" value={recipient} disabled={busy} onChange={event => setRecipient(event.target.value)} placeholder="+1 415 555 0123" required /><span className="field-help">Include the country code for international numbers.</span></label>
+        <label className="field"><span className="field-label">Message</span><textarea className="input" rows={6} value={message} disabled={busy} onChange={event => setMessage(event.target.value)} required /><span className="field-help">{message.length} characters. Long messages may use multiple SMS segments.</span></label>
+        <div className="modal-actions"><button type="button" className="btn" disabled={busy} onClick={close}>Cancel</button><button type="submit" className="btn btn-primary" disabled={busy || !allowed.current || !recipient.trim() || !message.trim()}>{busy ? 'Sending…' : 'Send message'}</button></div>
+    </form>;
+}

package/src/admin/phonehub/api.ts

@@ -3,10 +3,15 @@ import { mojoCall, mojoList } from '../../client/runtime';
 import { PhoneConfigModel, sanitizePhoneConfigRow, sanitizePhoneNumberRow, type PhoneConfigRow, type PhoneNumberRow, type PhoneRelation } from './models';
 
 export const PHONE_GROUP_CHOICE_LIMIT=100;
+export const DEFAULT_MOJO_REMOTE_URL='https://api.mojoverify.com';
 export const PHONE_SECRET_FIELDS=['twilio_account_sid','twilio_auth_token','aws_access_key_id','aws_secret_access_key','mojo_api_key'] as const;
 export type PhoneSecretField=(typeof PHONE_SECRET_FIELDS)[number];
 export type SecretEdit={mode:'untouched'}|{mode:'replace';value:string}|{mode:'clear';confirmed:true};
 
+export function resolveMojoRemoteUrl(value:unknown):string{
+    return typeof value==='string'&&value.trim()?value.trim():DEFAULT_MOJO_REMOTE_URL;
+}
+
 export async function normalizePhoneNumber(phoneNumber:string,countryCode?:string):Promise<string>{
     const body=await mojoCall('/api/phonehub/number/normalize',{method:'POST',body:{phone_number:phoneNumber,...(countryCode?{country_code:countryCode}:{})}});
     const value=(body.data as {phone_number?:unknown}|undefined)?.phone_number;
@@ -25,6 +30,7 @@ export async function lookupPhoneNumber(phoneNumber:string,previous?:PhoneNumber
 }
 export function buildPhoneConfigPayload(scalars:Record<string,unknown>,credentials:Partial<Record<PhoneSecretField,SecretEdit>>):Record<string,unknown>{
     const body={...scalars};
+    if(body.provider==='mojo')body.mojo_remote_url=resolveMojoRemoteUrl(body.mojo_remote_url);
     for(const field of PHONE_SECRET_FIELDS){const edit=credentials[field];if(!edit||edit.mode==='untouched')continue;if(edit.mode==='clear')body[field]=null;else{const value=edit.value.trim();if(!value)throw new Error(`${field} replacements cannot be empty.`);body[field]=value;}}
     return body;
 }

package/src/admin/rules/RuleSetDetailPage.tsx

@@ -1,14 +1,17 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
 import { useCan } from '../../client/runtime';
 import { Badge, DetailView, FlatRow, JsonBlock, ModelTable, fmt, modal, toast, type BatchAction, type Column } from '../../ui';
 import { HandlerChainBuilder } from './HandlerChainBuilder';
-import { parseHandlerChain, runtimeEffectiveHandlerChain, validateHandlerChain } from './handler-dsl';
+import { conditionRemovalEffect } from './condition-removal';
 import { confirmCatchAllEnable, openHandlerChainEditor, openRuleEditor, openRuleSetEditor } from './editors';
+import { parseHandlerChain, runtimeEffectiveHandlerChain, validateHandlerChain } from './handler-dsl';
 import { BUNDLE_BY_OPTIONS, RULESET_MANAGE_PERMS, RuleModel, RuleSetModel, type RuleRow } from './models';
 
 export function RuleSetDetail({ id, onClose }: { id: number; onClose: () => void }) {
-    const { can: canManage } = useCan(RULESET_MANAGE_PERMS); const query = RuleSetModel.useOne(Number.isFinite(id) ? id : null);
-    const rules = RuleModel.useList({ parent: id, size: 250, sort: 'index' }); const save = RuleSetModel.useSave(); const destroy = RuleSetModel.useDelete(); const destroyRule = RuleModel.useDelete();
+    const { can: canManage } = useCan(RULESET_MANAGE_PERMS);
+    const permission = useRef(canManage); permission.current = canManage;
+    useEffect(() => { permission.current = canManage; return () => { permission.current = false; }; }, [canManage]); const query = RuleSetModel.useOne(Number.isFinite(id) ? id : null);
+    const rules = RuleModel.useList({ parent: id, size: 250, sort: 'index' }); const save = RuleSetModel.useSave(); const destroyRule = RuleModel.useDelete();
     const duplicateIndexes = useMemo(() => { const counts = new Map<number, number>(); for (const row of rules.data?.rows ?? []) counts.set(row.index, (counts.get(row.index) ?? 0) + 1); return [...counts].filter(([, count]) => count > 1).map(([index]) => index); }, [rules.data]);
     if (!Number.isFinite(id)) return <div className="modal-pad text-bad">Invalid rule-set id. <button type="button" className="btn" onClick={onClose}>Close</button></div>;
     if (query.isPending || !query.data) return <div className="modal-pad dim">Loading rule set… <button type="button" className="btn" onClick={onClose}>Close</button></div>;
@@ -19,12 +22,33 @@ export function RuleSetDetail({ id, onClose }: { id: number; onClose: () => void
         { key: 'comparator', label: 'Comparator', render: (rule) => <code>{rule.comparator}</code> }, { key: 'value', label: 'Value', render: (rule) => <code>{rule.value_type}:{rule.value}</code> },
         { key: 'is_required', label: 'Required', render: (rule) => rule.is_required ? 'Yes' : 'No' },
     ];
-    const ruleActions: BatchAction<RuleRow>[] = canManage ? [{ key: 'delete', label: 'Delete conditions', icon: 'bi-trash', danger: true, confirm: 'Delete the selected conditions? This cannot be undone.', run: (rule) => destroyRule.mutateAsync({ id: rule.id }) }] : [];
+    const ruleActions: BatchAction<RuleRow>[] = canManage ? [{
+        key: 'delete', label: 'Remove conditions', icon: 'bi-trash', danger: true, confirm: false,
+        prepare: async selected => {
+            try {
+            if (!permission.current) return null;
+            const [parent, children] = await Promise.all([query.refetch(), rules.refetch()]);
+            if (!parent.data || !children.data || parent.error || children.error) throw new Error('Authoritative rule state unavailable. No conditions removed.');
+            const current = selected.map(item => children.data!.rows.find(child => child.id === item.id));
+            if (current.some(item => !item)) throw new Error('Selected conditions changed; refresh and select again.');
+            const effect = conditionRemovalEffect(parent.data, children.data.count, selected.length);
+            const confirmed = await modal.confirm({ title: `Remove ${selected.length} conditions?`, danger: true, confirmText: 'Remove conditions', message: <div><p>Rule set: {parent.data.name} (#{id}) · {parent.data.match_by === 0 ? 'ALL' : 'ANY'}</p><ul>{current.map(item => <li key={item!.id}>{item!.name} (#{item!.id})</li>)}</ul><p>{effect}</p><p>These conditions cannot be restored by this action.</p></div> });
+            return confirmed && permission.current ? selected.map(item => item.id) : null;
+            } catch (error) { toast.error(error instanceof Error ? error.message : 'Condition state unavailable'); return null; }
+        },
+        runBatch: async selected => {
+            if (!permission.current) throw new Error('Permission to remove conditions was revoked.');
+            const results = await Promise.allSettled(selected.map(rule => destroyRule.mutateAsync({ id: rule.id })));
+            await Promise.all([query.refetch(), rules.refetch()]);
+            const failed = results.filter(result => result.status === 'rejected');
+            if (failed.length) throw new Error(`${results.length - failed.length} removed; ${failed.length} refused. Authoritative parent and conditions refreshed. ${String((failed[0] as PromiseRejectedResult).reason)}`);
+        },
+    }] : [];
     const setActive = async (next: boolean) => { if (next && !(await confirmCatchAllEnable(row, rules.data?.count ?? 0))) return; try { await save.mutateAsync({ id, changes: { is_active: next } }); toast.success(next ? 'Rule set enabled' : 'Rule set disabled'); } catch (error) { toast.error(error instanceof Error ? error.message : 'State change failed'); } };
     const bundleLabel = BUNDLE_BY_OPTIONS.find((option) => Number(option.value) === row.bundle_by)?.label ?? `Unknown (${row.bundle_by})`;
-    return <DetailView icon="bi-diagram-3" title={row.name || `Rule set #${row.id}`} subtitle={`${row.category} · priority ${row.priority} · first active match wins`} chips={[{ text: row.is_active ? 'ACTIVE' : 'INACTIVE', tone: row.is_active ? 'success' : 'muted' }, { text: `${rules.data?.count ?? 0} CONDITIONS`, tone: duplicateIndexes.length ? 'warning' : 'info' }]} active={canManage ? { value: row.is_active, onChange: (next) => void setActive(next) } : undefined} onClose={onClose} menuContext={row} contextMenu={canManage ? [{ label: 'Edit rule set', onSelect: () => void openRuleSetEditor(row) }, { label: 'Edit handler chain', onSelect: () => void openHandlerChainEditor(row) }, { divider: true }, { label: 'Delete rule set and conditions', danger: true, onSelect: async () => { if (!(await modal.confirm({ title: 'Delete rule set?', message: `Delete “${row.name}” and all ${rules.data?.count ?? 0} conditions?`, confirmText: 'Delete rule set', danger: true }))) return; await destroy.mutateAsync({ id }); onClose(); } }] : []} sections={[
+    return <DetailView icon="bi-diagram-3" title={row.name || `Rule set #${row.id}`} subtitle={`${row.category} · priority ${row.priority} · first active match wins`} chips={[{ text: row.is_active ? 'ACTIVE' : 'INACTIVE', tone: row.is_active ? 'success' : 'muted' }, { text: `${rules.data?.count ?? 0} CONDITIONS`, tone: duplicateIndexes.length ? 'warning' : 'info' }]} active={canManage ? { value: row.is_active, disabled: save.isPending, onChange: (next) => void setActive(next) } : undefined} onClose={onClose} menuContext={row} contextMenu={canManage ? [{ label: 'Edit rule set', onSelect: () => void openRuleSetEditor(row) }, { label: 'Edit handler chain', onSelect: () => void openHandlerChainEditor(row) }, { label: row.is_active ? 'Deactivate' : 'Reactivate', disabled: save.isPending, onSelect: () => void setActive(!row.is_active) }] : []} sections={[
         { key: 'overview', label: 'Overview', icon: 'bi-info-circle', render: () => <div className="detail-stack"><FlatRow label="State">{row.is_active ? 'Active' : 'Inactive'}</FlatRow><FlatRow label="Category"><code>{row.category}</code></FlatRow><FlatRow label="Priority">{row.priority} (lower is evaluated first within this category)</FlatRow><FlatRow label="Matching">{row.match_by === 0 ? 'All conditions' : row.match_by === 1 ? 'Any condition' : `Unknown (${row.match_by})`}</FlatRow><FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow></div> },
-        { key: 'conditions', label: 'Conditions', icon: 'bi-funnel', render: () => <div>{duplicateIndexes.length > 0 && <div className="rule-priority-warning">Duplicate condition indexes {duplicateIndexes.join(', ')} have undefined tie order.</div>}<ModelTable model={RuleModel} title="Conditions" columns={ruleColumns} searchable={false} defaultParams={{ parent: id, sort: 'index' }} onRowClick={canManage ? (rule) => void openRuleEditor(id, rule, nextIndex) : undefined} {...(canManage ? { addLabel: 'Add condition', onAdd: () => void openRuleEditor(id, undefined, nextIndex), selectable: true, batchActions: ruleActions } : {})} /></div> },
+        { key: 'conditions', label: 'Conditions', icon: 'bi-funnel', render: () => <div>{duplicateIndexes.length > 0 && <div className="rule-priority-warning">Duplicate condition indexes {duplicateIndexes.join(', ')} have undefined tie order.</div>}<ModelTable model={RuleModel} title="Conditions" columns={ruleColumns} searchable={false} fixedParams={{ parent: id }} defaultParams={{ sort: 'index' }} onRowClick={canManage ? (rule) => void openRuleEditor(id, rule, nextIndex) : undefined} {...(canManage ? { addLabel: 'Add condition', onAdd: () => void openRuleEditor(id, undefined, nextIndex), selectable: true, batchActions: ruleActions } : {})} /></div> },
         { key: 'triggering', label: 'Triggering', icon: 'bi-lightning', render: () => <div className="detail-stack"><FlatRow label="Bundle by">{bundleLabel}</FlatRow><FlatRow label="Bundle window">{row.bundle_minutes == null ? 'Unbounded' : row.bundle_minutes === 0 ? 'Disabled (no time bundling)' : `${row.bundle_minutes} minutes`}</FlatRow><FlatRow label="Trigger">{row.trigger_count == null ? 'Immediately on first event' : `${row.trigger_count} events${row.trigger_window == null ? '' : ` within ${row.trigger_window} minutes`}`}</FlatRow><FlatRow label="Re-trigger">{row.retrigger_every == null ? 'Once per incident' : `Every ${row.retrigger_every} additional events`}</FlatRow></div> },
         { key: 'handler', label: 'Handler', icon: 'bi-diagram-3', render: () => <div><div className="handler-section-actions"><p>{runtimeEffectiveHandlerChain(chain).length} runtime-effective dispatch step(s). Publication follows the order below; completion is asynchronous.</p>{canManage && <button type="button" className="btn btn-primary" onClick={() => void openHandlerChainEditor(row)}>Edit chain</button>}</div><HandlerChainBuilder value={row.handler ?? ''} onChange={() => undefined} disabled />{handlerIssues.length > 0 && <p className="dim">Legacy warnings remain visible and byte-preserved until explicitly changed.</p>}</div> },
         { key: 'agent', label: 'Agent prompt', icon: 'bi-stars', render: () => <div className="detail-stack"><FlatRow label="Prompt">{typeof row.metadata.agent_prompt === 'string' ? row.metadata.agent_prompt : 'No agent prompt configured.'}</FlatRow><p className="dim">The prompt is stored in RuleSet metadata. General edits merge only targeted metadata keys.</p></div> },

package/src/admin/rules/condition-removal.ts

@@ -0,0 +1,7 @@
+/** Empty ALL and ANY condition sets both match every event server-side. */
+export function conditionRemovalEffect(parent: { match_by: number; is_active: boolean }, count: number, selected: number): string {
+    if (parent.match_by !== 0 && parent.match_by !== 1) throw new Error('Unknown matching mode; refresh and inspect before removing conditions.');
+    if (selected < 1 || selected > count) throw new Error('Condition selection changed; refresh before removing conditions.');
+    if (count === selected) return `${parent.is_active ? 'This active' : 'This inactive'} rule set becomes catch-all: either matching mode accepts every event without conditions.`;
+    return parent.match_by === 0 ? 'ALL mode: removal broadens matching because fewer conditions must hold.' : 'ANY mode: removal narrows matching because fewer alternatives can match.';
+}

package/src/admin/security/geoip/models.ts

@@ -113,6 +113,11 @@ export interface GeoLocatedIPRow {
     whitelisted_reason: string | null;
     whitelisted_until: number | null;
 
+    firewall_generation: number;
+    firewall_pending: boolean;
+    firewall_sync_error: string;
+    firewall_observed_at: number | null;
+
     expires_at: number | null;
 
     /** `extra` on every graph — computed Python properties. */