portal-mojo 0.2.2 → 0.2.4

package/src/admin/network/IPSetDetail.tsx

@@ -2,19 +2,30 @@
 // Port of web-mojo `admin/security/IPSetView.js` (TabView: Configuration +
 // CIDR Data, with a fleet-operations kebab), rebuilt on the house detail
 // modal with every fleet-affecting action behind an armed confirmation.
-import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef, useState } from 'react';
+import { useCan } from '../../client/runtime';
 import {
-    ArmedButton, Badge, DetailView, Eyebrow, FlatRow, StatusPanel,
-    fmt, modal, toast,
+    Badge,
+    DetailView,
+    Eyebrow,
+    FlatRow,
+    StatusPanel,
+    fmt,
+    modal,
+    toast,
 } from '../../ui';
-import { useCan } from '../../client/runtime';
+import { promptEditIPSet } from './IPSetEditor';
 import {
-    IPSET_CACHE_ONLY_HELP, IPSET_DELETE_PERMS, IPSET_KIND_BADGE_OPTIONS,
-    IPSET_MANAGE_PERMS, IPSET_SOURCE_OPTIONS, IPSetModel,
-    isCacheOnlyIPSet, useIPSetCidrData, type IPSetRow,
+    IPSET_CACHE_ONLY_HELP,
+    IPSET_KIND_BADGE_OPTIONS,
+    IPSET_MANAGE_PERMS,
+    IPSET_SOURCE_OPTIONS,
+    IPSetModel,
+    isCacheOnlyIPSet,
+    useIPSetCidrData,
+    type IPSetRow,
 } from './models';
-import { promptEditIPSet } from './IPSetEditor';
 
 const DASH = <span className="dim-italic">—</span>;
 
@@ -100,12 +111,14 @@ export function IPSetDetail({ id, onClose }: { id: number; onClose: () => void }
     const qc = useQueryClient();
     const { data: row, isPending, error } = IPSetModel.useOne(id);
     const canManage = useCan(IPSET_MANAGE_PERMS).can;
-    const canDelete = useCan(IPSET_DELETE_PERMS).can;
+    const allowed = useRef(canManage); allowed.current = canManage;
+    useEffect(() => { allowed.current = canManage; return () => { allowed.current = false; }; }, [canManage]);
+
     const sync = IPSetModel.useAction('sync');
     const enable = IPSetModel.useAction('enable');
     const disable = IPSetModel.useAction('disable');
     const refresh = IPSetModel.useAction('refresh_source');
-    const remove = IPSetModel.useDelete();
+
     const save = IPSetModel.useSave();
 
     if (isPending) return <div className="modal-pad dim">Loading IP set…</div>;
@@ -114,6 +127,7 @@ export function IPSetDetail({ id, onClose }: { id: number; onClose: () => void }
     const cacheOnly = isCacheOnlyIPSet(row);
 
     const run = async (label: string, fn: () => Promise<unknown>) => {
+        if (!allowed.current) return;
         try {
             await fn();
             toast.success(label);
@@ -126,7 +140,7 @@ export function IPSetDetail({ id, onClose }: { id: number; onClose: () => void }
 
     const onEdit = async () => {
         const changes = await promptEditIPSet(row);
-        if (!changes) return;
+        if (!changes || !allowed.current) return;
         try {
             await save.mutateAsync({ id, changes });
             // A `data` save re-runs set_data() server-side, so the detailed
@@ -149,6 +163,12 @@ export function IPSetDetail({ id, onClose }: { id: number; onClose: () => void }
                 ...(cacheOnly ? [{ icon: 'bi-database-lock', text: 'CACHE-ONLY', tone: 'warning' as const }] : []),
                 ...(row.sync_error ? [{ icon: 'bi-exclamation-triangle', text: 'Sync error', tone: 'danger' as const }] : []),
             ]}
+            contextMenu={[
+                { label: 'Edit IP set', permissions: IPSET_MANAGE_PERMS, disabled: save.isPending, onSelect: () => void onEdit() },
+                { label: row.is_enabled ? 'Disable & remove from fleet' : 'Enable & sync', permissions: IPSET_MANAGE_PERMS, disabled: cacheOnly || enable.isPending || disable.isPending, onSelect: async () => { if (await modal.confirm({ title: row.is_enabled ? 'Disable fleet enforcement?' : 'Enable fleet enforcement?', message: `${row.name}: changes this set on every fleet instance.`, confirmText: row.is_enabled ? 'Disable' : 'Enable' })) await run('IP set state updated', () => (row.is_enabled ? disable : enable).mutateAsync({ id })); } },
+                { label: 'Sync to fleet', permissions: IPSET_MANAGE_PERMS, disabled: cacheOnly || sync.isPending, onSelect: async () => { if (await modal.confirm({ title: 'Sync to fleet?', message: `Push ${row.name} to every fleet instance now.`, confirmText: 'Sync' })) await run('Sync requested', () => sync.mutateAsync({ id })); } },
+                { label: 'Refresh source', permissions: IPSET_MANAGE_PERMS, disabled: refresh.isPending, onSelect: async () => { if (await modal.confirm({ title: 'Refresh source?', message: `Replace stored CIDRs for ${row.name} from its provider list.`, confirmText: 'Refresh' })) await run('Source refresh requested', () => refresh.mutateAsync({ id })); } },
+            ]}
             sections={[
                 {
                     key: 'config', label: 'Configuration', icon: 'bi-sliders', render: () => (
@@ -164,58 +184,7 @@ export function IPSetDetail({ id, onClose }: { id: number; onClose: () => void }
                                 meta={row.last_synced == null
                                     ? 'Never synced to the fleet.'
                                     : `Last synced ${fmt.datetime(row.last_synced)} · ${fmt.relative(row.last_synced)}`}
-                                actions={canManage ? (
-                                    <div className="netsec-action-row">
-                                        {row.is_enabled ? (
-                                            <ArmedButton
-                                                className="btn-compact"
-                                                icon="bi-toggle-off"
-                                                label="Disable & remove from fleet"
-                                                armedLabel="Click again — every fleet instance drops this set from iptables"
-                                                onConfirm={() => run('IP set disabled and removed from the fleet', () => disable.mutateAsync({ id }))}
-                                            />
-                                        ) : (
-                                            <ArmedButton
-                                                className="btn-compact"
-                                                icon="bi-toggle-on"
-                                                label="Enable & sync"
-                                                armedLabel={cacheOnly
-                                                    ? 'Click again — the server will refuse this (cache-only list)'
-                                                    : `Click again — ${row.cidr_count.toLocaleString()} ranges are kernel-blocked fleet-wide`}
-                                                onConfirm={() => run('IP set enabled and synced', () => enable.mutateAsync({ id }))}
-                                            />
-                                        )}
-                                        <ArmedButton
-                                            className="btn-compact"
-                                            icon="bi-broadcast"
-                                            label="Sync to fleet"
-                                            armedLabel="Click again — pushes this set to every fleet instance now"
-                                            onConfirm={() => run('Sync broadcast to the fleet', () => sync.mutateAsync({ id }))}
-                                        />
-                                        <ArmedButton
-                                            className="btn-compact"
-                                            icon="bi-arrow-clockwise"
-                                            label="Refresh source"
-                                            armedLabel="Click again — refetches the provider list and replaces the stored CIDRs"
-                                            onConfirm={() => run('Source refresh requested', () => refresh.mutateAsync({ id }))}
-                                        />
-                                        <button className="btn btn-compact" onClick={() => void onEdit()}>
-                                            <i className="bi bi-pencil" /> Edit
-                                        </button>
-                                        {canDelete && (
-                                            <ArmedButton
-                                                className="btn-compact btn-danger"
-                                                icon="bi-trash"
-                                                label="Delete"
-                                                armedLabel="Click again — deletes the set and removes it from every fleet instance. This cannot be undone."
-                                                onConfirm={() => run('IP set deleted', async () => {
-                                                    await remove.mutateAsync({ id });
-                                                    onClose();
-                                                })}
-                                            />
-                                        )}
-                                    </div>
-                                ) : null}
+
                             />
 
                             {cacheOnly && (

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,282 @@ 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 'SMS delivery uses the saved Twilio credential pair, or global settings when neither credential is stored.';
+}
+
+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 [testing, setTesting] = useState(false);
+    const [testResult, setTestResult] = useState<Awaited<ReturnType<typeof testPhoneConfigImperative>> | null>(null);
+    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) { setTestResult(null); await query.refetch(); } }} />, { size: 'lg' });
+    const test = async () => {
+        setTesting(true);
+        setTestResult(null);
+        try {
+            const result = await testPhoneConfigImperative(id);
+            setTestResult(result);
+            toast[result.testMode ? 'warning' : result.status ? 'success' : 'error'](result.message);
+        } catch (reason) {
+            const message = reason instanceof Error ? reason.message : 'Connection test failed';
+            setTestResult({ status: false, message, testMode: false, errorCode: null });
+            toast.error(message);
+        } finally {
+            setTesting(false);
+        }
+    };
 
-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 resultNotice = testResult && <div className={testResult.status && !testResult.testMode ? 'known-card' : 'form-alert'} role={testResult.status ? 'status' : 'alert'}>
+        <h3>Connection test: {testResult.testMode ? 'Not tested' : testResult.status ? 'Passed' : 'Failed'}</h3>
+        <p>{testResult.message}</p>
+        {testResult.errorCode === 'missing_credentials' && <p>Use Edit configuration to save the provider credentials, then test again. Blank credential fields keep any saved value unchanged.</p>}
+    </div>;
 
-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={`Scope: ${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', disabled: testing, 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">{resultNotice}<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">{resultNotice}<FlatRow label="Scope">{relationLabel(row.group)}</FlatRow><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>;
+}