portal-mojo 0.1.0

package/src/admin/bouncer/models.ts

@@ -0,0 +1,199 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+    defineModel, mojoCall,
+    type Params,
+} from '../../client';
+import { SECURITY_VIEW_PERMS } from '../security-permissions';
+import { sanitizeIncidentRow } from '../incidents/sanitize';
+
+/** Bouncer data is global. `sys.` prevents an active group grant from opening it. */
+export const BOUNCER_VIEW_PERMS = [
+    'sys.manage_users',
+    'sys.view_security',
+    'sys.manage_security',
+    'sys.security',
+    'sys.users',
+];
+
+export const BOUNCER_MANAGE_PERMS = [
+    'sys.manage_users',
+    'sys.manage_security',
+    'sys.security',
+    'sys.users',
+];
+
+/** Incident rows have their own, narrower model gate. */
+export const BOUNCER_INCIDENT_VIEW_PERMS = SECURITY_VIEW_PERMS;
+
+export type BouncerStage = 'assess' | 'submit' | 'event';
+export type BouncerDecision = 'allow' | 'monitor' | 'block' | 'log';
+export type BouncerRiskTier = 'unknown' | 'low' | 'medium' | 'high' | 'blocked';
+export type BotSignatureType =
+    | 'ip'
+    | 'subnet_24'
+    | 'subnet_16'
+    | 'user_agent'
+    | 'fingerprint'
+    | 'signal_set';
+export type BotSignatureSource = 'auto' | 'manual';
+
+export interface BouncerGeoIp {
+    id: number;
+    ip_address: string;
+    country_code: string | null;
+    country_name: string | null;
+    region: string | null;
+    city: string | null;
+    asn: string | null;
+    asn_org: string | null;
+    isp: string | null;
+    threat_level: string | null;
+    is_tor: boolean;
+    is_vpn: boolean;
+    is_proxy: boolean;
+    is_cloud: boolean;
+    is_datacenter: boolean;
+    is_known_attacker: boolean;
+    is_known_abuser: boolean;
+    [field: string]: unknown;
+}
+
+export interface BouncerDeviceRow {
+    id: number;
+    muid: string;
+    duid: string;
+    msid?: string;
+    fingerprint_id?: string | null;
+    risk_tier: BouncerRiskTier;
+    event_count: number;
+    block_count: number;
+    last_seen_ip: string | null;
+    linked_muids?: string[];
+    first_seen?: number;
+    last_seen: number;
+}
+
+export interface BouncerSignalRow {
+    id: number;
+    device?: BouncerDeviceRow | number | null;
+    muid: string;
+    duid?: string;
+    msid: string;
+    mtab?: string;
+    session_id?: string;
+    stage: BouncerStage;
+    ip_address: string | null;
+    page_type: string;
+    raw_signals?: Record<string, unknown>;
+    server_signals?: Record<string, unknown>;
+    risk_score: number;
+    decision: BouncerDecision;
+    triggered_signals?: string[];
+    geo_ip?: BouncerGeoIp | null;
+    created: number;
+}
+
+export interface BotSignatureRow {
+    id: number;
+    sig_type: BotSignatureType;
+    value: string;
+    source: BotSignatureSource;
+    confidence: number;
+    hit_count: number;
+    block_count?: number;
+    expires_at: number | null;
+    is_active: boolean;
+    notes?: string;
+    created?: number;
+    modified: number;
+}
+
+export interface BouncerIncidentRow {
+    id: number;
+    created: number;
+    priority: number;
+    state: string;
+    status: string;
+    scope: string;
+    category: string;
+    country_code: string | null;
+    title: string | null;
+    details: string | null;
+    model_name: string | null;
+    model_id: number | null;
+    source_ip: string | null;
+    hostname: string | null;
+    metadata: Record<string, unknown>;
+    group_id: number | null;
+}
+
+/** Strip a sensitive backend-only field before any list/detail/save cache write. */
+export function sanitizeBouncerSignalRow(row: BouncerSignalRow): BouncerSignalRow {
+    const safe = { ...row } as BouncerSignalRow & Record<string, unknown>;
+    delete safe.token_nonce;
+    return safe;
+}
+
+function listGraph(params: Params): Params {
+    const safe = { ...params };
+    delete safe.graph;
+    return { ...safe, graph: 'list' };
+}
+
+export const BouncerSignalModel = defineModel<BouncerSignalRow>({
+    name: 'bouncer_signal',
+    endpoint: '/api/account/bouncer/signal',
+    permissions: { view: BOUNCER_VIEW_PERMS },
+    normalizeListParams: listGraph,
+    sanitizeRow: sanitizeBouncerSignalRow,
+});
+
+export const BouncerDeviceModel = defineModel<BouncerDeviceRow>({
+    name: 'bouncer_device',
+    endpoint: '/api/account/bouncer/device',
+    permissions: { view: BOUNCER_VIEW_PERMS, manage: BOUNCER_MANAGE_PERMS },
+    normalizeListParams: listGraph,
+});
+
+export const BotSignatureModel = defineModel<BotSignatureRow>({
+    name: 'bot_signature',
+    endpoint: '/api/account/bouncer/signature',
+    permissions: { view: BOUNCER_VIEW_PERMS, manage: BOUNCER_MANAGE_PERMS },
+    normalizeListParams: listGraph,
+});
+
+export const BouncerIncidentModel = defineModel<BouncerIncidentRow>({
+    name: 'bouncer_incident',
+    endpoint: '/api/incident/incident',
+    permissions: { view: BOUNCER_INCIDENT_VIEW_PERMS },
+    sanitizeRow: sanitizeIncidentRow,
+});
+
+/** Graph is part of the key so a sparse default record cannot satisfy detail. */
+export function bouncerSignalDetailKey(id: number) {
+    return [BouncerSignalModel.endpoint, 'one', id, { graph: 'detail' }] as const;
+}
+
+export function useBouncerSignalDetail(id: number | null) {
+    return useQuery({
+        queryKey: id == null
+            ? [BouncerSignalModel.endpoint, 'one', null, { graph: 'detail' }] as const
+            : bouncerSignalDetailKey(id),
+        queryFn: async () => {
+            const body = await mojoCall(`${BouncerSignalModel.endpoint}/${id!}`, {
+                params: { graph: 'detail' },
+            });
+            return sanitizeBouncerSignalRow(body.data as BouncerSignalRow);
+        },
+        enabled: id != null,
+    });
+}
+
+export const BOUNCER_SIGNATURE_TYPES: ReadonlyArray<{ value: BotSignatureType; label: string }> = [
+    { value: 'ip', label: 'IP Address' },
+    { value: 'subnet_24', label: 'Subnet /24' },
+    { value: 'subnet_16', label: 'Subnet /16' },
+    { value: 'user_agent', label: 'User Agent' },
+    { value: 'fingerprint', label: 'Browser Fingerprint' },
+    { value: 'signal_set', label: 'Signal Set (Campaign)' },
+];

package/src/admin/bouncer/signals.tsx

@@ -0,0 +1,182 @@
+import { useQueryClient } from '@tanstack/react-query';
+import {
+    Badge, DetailView, Eyebrow, FlatRow, JsonBlock, ModelTable,
+    fmt, groupByDay, modal,
+    type Column, type FilterDef, type Tone,
+} from '../../ui';
+import {
+    BouncerSignalModel, bouncerSignalDetailKey, useBouncerSignalDetail,
+    type BouncerDecision, type BouncerSignalRow,
+} from './models';
+
+export function bouncerDecisionTone(decision: BouncerDecision): Tone {
+    if (decision === 'allow') return 'success';
+    if (decision === 'monitor') return 'warning';
+    if (decision === 'block') return 'danger';
+    if (decision === 'log') return 'info';
+    return 'muted';
+}
+
+export function bouncerRiskTone(score: number): Tone {
+    if (score >= 80) return 'danger';
+    if (score >= 50) return 'warning';
+    if (score >= 20) return 'info';
+    return 'success';
+}
+
+function EmbeddedDevice({ signal }: { signal: BouncerSignalRow }) {
+    const device = signal.device && typeof signal.device === 'object' ? signal.device : null;
+    if (!device) return <p className="dim-italic">No device record was linked to this assessment.</p>;
+    return (
+        <>
+            <Eyebrow>Linked device</Eyebrow>
+            <FlatRow label="MUID"><code>{device.muid}</code></FlatRow>
+            <FlatRow label="DUID"><code>{device.duid || '—'}</code></FlatRow>
+            <FlatRow label="Fingerprint"><code>{device.fingerprint_id || '—'}</code></FlatRow>
+            <FlatRow label="Risk tier"><Badge tone={device.risk_tier === 'low' ? 'success' : device.risk_tier === 'medium' ? 'warning' : device.risk_tier === 'unknown' ? 'muted' : 'danger'}>{device.risk_tier}</Badge></FlatRow>
+            <FlatRow label="Activity">{device.event_count} events · {device.block_count} blocks</FlatRow>
+            <FlatRow label="Last seen">{fmt.datetime(device.last_seen)}</FlatRow>
+        </>
+    );
+}
+
+function GeoIp({ signal }: { signal: BouncerSignalRow }) {
+    const geo = signal.geo_ip;
+    if (!geo) return <p className="dim-italic">No GeoIP record was linked to this assessment.</p>;
+    const flags = [
+        geo.is_tor && 'Tor', geo.is_vpn && 'VPN', geo.is_proxy && 'Proxy',
+        geo.is_cloud && 'Cloud', geo.is_datacenter && 'Datacenter',
+        geo.is_known_attacker && 'Known attacker', geo.is_known_abuser && 'Known abuser',
+    ].filter((flag): flag is string => Boolean(flag));
+    return (
+        <>
+            <Eyebrow>GeoIP</Eyebrow>
+            <FlatRow label="Location">{[geo.city, geo.region, geo.country_name || geo.country_code].filter(Boolean).join(', ') || '—'}</FlatRow>
+            <FlatRow label="Network">{geo.asn_org || geo.isp || geo.asn || '—'}</FlatRow>
+            <FlatRow label="Threat level"><Badge>{geo.threat_level || 'unknown'}</Badge></FlatRow>
+            <FlatRow label="Signals">
+                <span className="bouncer-token-list">
+                    {flags.length ? flags.map((flag) => <Badge key={flag} tone="warning">{flag}</Badge>) : <span className="dim">None</span>}
+                </span>
+            </FlatRow>
+        </>
+    );
+}
+
+export function BouncerSignalDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const queryClient = useQueryClient();
+    const { data: signal, isPending, error } = useBouncerSignalDetail(id);
+    if (isPending) return <div className="modal-pad dim">Loading signal assessment…</div>;
+    if (!signal || error) return <div className="modal-pad text-bad">{error?.message ?? 'Signal assessment not found'}</div>;
+
+    return (
+        <DetailView
+            icon="bi-activity"
+            title="Signal Assessment"
+            subtitle={`${signal.ip_address || 'Unknown IP'} · ${fmt.datetime(signal.created)}`}
+            chips={[
+                { text: signal.decision.toUpperCase(), tone: bouncerDecisionTone(signal.decision) },
+                { text: `Risk ${signal.risk_score}`, tone: bouncerRiskTone(signal.risk_score) },
+                { text: signal.stage, tone: 'muted' },
+            ]}
+            sections={[
+                {
+                    key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
+                        <>
+                            <Eyebrow>Assessment</Eyebrow>
+                            <FlatRow label="Decision"><Badge tone={bouncerDecisionTone(signal.decision)}>{signal.decision.toUpperCase()}</Badge></FlatRow>
+                            <FlatRow label="Risk score"><strong className={`bouncer-risk bouncer-risk-${bouncerRiskTone(signal.risk_score)}`}>{signal.risk_score}</strong></FlatRow>
+                            <FlatRow label="Stage">{signal.stage}</FlatRow>
+                            <FlatRow label="Page type">{signal.page_type || '—'}</FlatRow>
+                            <FlatRow label="IP address"><code>{signal.ip_address || '—'}</code></FlatRow>
+                            <FlatRow label="Created">{fmt.datetime(signal.created)}</FlatRow>
+                            <Eyebrow>Identity</Eyebrow>
+                            <FlatRow label="MUID"><code>{signal.muid || '—'}</code></FlatRow>
+                            <FlatRow label="DUID"><code>{signal.duid || '—'}</code></FlatRow>
+                            <FlatRow label="MSID"><code>{signal.msid || '—'}</code></FlatRow>
+                            <FlatRow label="MTAB"><code>{signal.mtab || '—'}</code></FlatRow>
+                            <FlatRow label="Session"><code>{signal.session_id || '—'}</code></FlatRow>
+                            <Eyebrow>Triggered signals</Eyebrow>
+                            <div className="bouncer-token-list">
+                                {signal.triggered_signals?.length
+                                    ? signal.triggered_signals.map((name) => <Badge key={name} tone="warning">{name}</Badge>)
+                                    : <span className="dim-italic">No signals triggered.</span>}
+                            </div>
+                        </>
+                    ),
+                },
+                { key: 'device', label: 'Device', icon: 'bi-fingerprint', render: () => <EmbeddedDevice signal={signal} /> },
+                { key: 'geoip', label: 'GeoIP', icon: 'bi-geo-alt', render: () => <GeoIp signal={signal} /> },
+                { key: 'raw', label: 'Raw Signals', icon: 'bi-code-square', render: () => <JsonBlock label="Client signal payload" value={signal.raw_signals ?? {}} defaultOpen /> },
+                { key: 'server', label: 'Server Signals', icon: 'bi-hdd-stack', render: () => <JsonBlock label="Server signal payload" value={signal.server_signals ?? {}} defaultOpen /> },
+            ]}
+            contextMenu={[
+                {
+                    label: 'Refresh', icon: 'bi-arrow-clockwise', onSelect: () => {
+                        void queryClient.invalidateQueries({ queryKey: bouncerSignalDetailKey(signal.id) });
+                    },
+                },
+            ]}
+            onClose={onClose}
+        />
+    );
+}
+
+export function showBouncerSignalDetail(id: number): void {
+    void modal.detail((close) => (
+        <BouncerSignalDetail id={id} onClose={() => close(null)} />
+    ));
+}
+
+const SIGNAL_COLUMNS: Column<BouncerSignalRow>[] = [
+    { key: 'created', label: 'Timestamp', sortable: true, hideable: false, render: (row) => fmt.datetime(row.created) },
+    { key: 'ip_address', label: 'IP', render: (row) => <code>{row.ip_address || '—'}</code> },
+    { key: 'decision', label: 'Decision', render: (row) => <Badge tone={bouncerDecisionTone(row.decision)}>{row.decision.toUpperCase()}</Badge> },
+    { key: 'risk_score', label: 'Risk', sortable: true, align: 'end', render: (row) => <strong className={`bouncer-risk bouncer-risk-${bouncerRiskTone(row.risk_score)}`}>{row.risk_score}</strong> },
+    { key: 'page_type', label: 'Page', render: (row) => row.page_type || '—' },
+    { key: 'stage', label: 'Stage', render: (row) => <Badge tone="muted">{row.stage}</Badge> },
+    { key: 'muid', label: 'Device', render: (row) => <code title={row.muid}>{fmt.truncateMiddle(row.muid, 16)}</code> },
+];
+
+const SIGNAL_FILTERS: FilterDef[] = [
+    { key: 'created', label: 'Created', type: 'daterange' },
+    { key: 'ip_address', label: 'IP address', type: 'text' },
+    { key: 'decision', label: 'Decision', type: 'select', options: [
+        { value: 'allow', label: 'Allow' }, { value: 'monitor', label: 'Monitor' },
+        { value: 'block', label: 'Block' }, { value: 'log', label: 'Log' },
+    ] },
+    { key: 'risk_score', label: 'Minimum risk', type: 'number', lookup: 'gte' },
+    { key: 'page_type', label: 'Page type', type: 'text' },
+    { key: 'stage', label: 'Stage', type: 'select', options: [
+        { value: 'assess', label: 'Assess' }, { value: 'submit', label: 'Submit' }, { value: 'event', label: 'Event' },
+    ] },
+];
+
+const signalGroups = groupByDay<BouncerSignalRow>('created');
+
+export function BouncerSignalsPage() {
+    return (
+        <ModelTable<BouncerSignalRow>
+            model={BouncerSignalModel}
+            eyebrow="Security · Bouncer"
+            title="Signal Decisions"
+            searchPlaceholder="Search MUID, DUID, IP, or decision"
+            columns={SIGNAL_COLUMNS}
+            filters={SIGNAL_FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'blocked', label: 'Blocked', params: { decision: 'block' } },
+                { key: 'monitor', label: 'Monitor', params: { decision: 'monitor' } },
+            ]}
+            defaultSort="-created"
+            columnChooser
+            persistState
+            persistKey="admin:bouncer:signals"
+            exportFormats={['csv', 'json']}
+            onRowClick={(row) => showBouncerSignalDetail(row.id)}
+            groupBy={signalGroups.groupBy}
+            groupHeaderLabel={signalGroups.groupHeaderLabel}
+            groupHeaderStyle="mark"
+        />
+    );
+}

package/src/admin/bouncer/signatures.tsx

@@ -0,0 +1,220 @@
+import { useQueryClient } from '@tanstack/react-query';
+import {
+    Badge, DetailView, Eyebrow, FlatRow, ModelTable, SchemaForm,
+    fmt, modal, toast,
+    type BatchAction, type Column, type Field, type FilterDef, type FormData,
+} from '../../ui';
+import { useCan } from '../../client';
+import {
+    BOUNCER_MANAGE_PERMS, BOUNCER_SIGNATURE_TYPES, BotSignatureModel,
+    type BotSignatureRow, type BotSignatureType,
+} from './models';
+
+const SIGNATURE_FIELDS: Field[] = [
+    {
+        name: 'sig_type', type: 'select', label: 'Signature type', required: true, columns: 6,
+        options: BOUNCER_SIGNATURE_TYPES.map((option) => ({ ...option })),
+    },
+    {
+        name: 'value', type: 'text', label: 'Value', required: true, columns: 6,
+        help: 'The exact value or pattern evaluated by this signature type.',
+    },
+    {
+        name: 'confidence', type: 'text', label: 'Confidence (0–100)', required: true, columns: 6,
+        placeholder: '80',
+    },
+    {
+        name: 'expires_at', type: 'datetimepicker', label: 'Expires', columns: 6,
+        help: 'Optional for manual signatures; leave empty for no expiry.',
+    },
+    { name: 'notes', type: 'textarea', label: 'Notes' },
+    { name: 'is_active', type: 'switch', label: 'Active' },
+];
+
+function signatureType(value: unknown): BotSignatureType {
+    const candidate = String(value ?? '');
+    const exact = BOUNCER_SIGNATURE_TYPES.find((option) => option.value === candidate);
+    if (!exact) throw new Error('Choose a valid signature type');
+    return exact.value;
+}
+
+function optionalEpoch(value: unknown): number | null {
+    if (value == null || value === '') return null;
+    const epoch = Number(value);
+    if (!Number.isFinite(epoch) || epoch <= 0) throw new Error('Choose a valid expiry');
+    return epoch;
+}
+
+function signatureChanges(data: FormData, creating: boolean): Record<string, unknown> {
+    const value = String(data.value ?? '').trim();
+    if (!value) throw new Error('Value is required');
+    const confidence = Number(String(data.confidence ?? '').trim());
+    if (!Number.isFinite(confidence) || confidence < 0 || confidence > 100) {
+        throw new Error('Confidence must be a number from 0 to 100');
+    }
+    return {
+        sig_type: signatureType(data.sig_type),
+        value,
+        confidence,
+        expires_at: optionalEpoch(data.expires_at),
+        notes: String(data.notes ?? ''),
+        is_active: data.is_active === true,
+        ...(creating ? { source: 'manual' as const } : {}),
+    };
+}
+
+function SignatureEditor({ row, close }: {
+    row?: BotSignatureRow;
+    close: (saved: boolean) => void;
+}) {
+    const save = BotSignatureModel.useSave();
+    const creating = row == null;
+    const initial: FormData = creating
+        ? { sig_type: 'ip', confidence: 80, expires_at: null, notes: '', is_active: true }
+        : {
+            sig_type: row.sig_type,
+            value: row.value,
+            confidence: row.confidence,
+            expires_at: row.expires_at,
+            notes: row.notes ?? '',
+            is_active: row.is_active,
+        };
+    return (
+        <div className="modal-pad">
+            <h2 className="modal-title">{creating ? 'Create manual bot signature' : 'Edit bot signature'}</h2>
+            {!creating && (
+                <p className="dim">
+                    Source <Badge tone={row.source === 'auto' ? 'info' : 'primary'}>{row.source.toUpperCase()}</Badge>
+                    {' '}· hits {row.hit_count} · blocks {row.block_count ?? 0}
+                </p>
+            )}
+            <SchemaForm
+                fields={SIGNATURE_FIELDS}
+                initial={initial}
+                submitText={creating ? 'Create signature' : 'Save changes'}
+                onCancel={() => close(false)}
+                onSubmit={async (data) => {
+                    await save.mutateAsync({
+                        id: row?.id ?? null,
+                        changes: signatureChanges(data, creating),
+                    });
+                    toast.success(creating ? 'Bot signature created' : 'Bot signature updated');
+                    close(true);
+                }}
+            />
+        </div>
+    );
+}
+
+async function openSignatureEditor(row?: BotSignatureRow): Promise<void> {
+    await modal.open<boolean>((close) => <SignatureEditor row={row} close={close} />, { size: 'lg' });
+}
+
+function SignatureDetail({ row, onClose }: { row: BotSignatureRow; onClose: () => void }) {
+    return (
+        <DetailView
+            icon="bi-shield-check"
+            title={row.value}
+            subtitle={`Bot signature #${row.id}`}
+            chips={[
+                { text: row.sig_type, tone: 'info' },
+                { text: row.source.toUpperCase(), tone: row.source === 'auto' ? 'info' : 'primary' },
+                { text: row.is_active ? 'ACTIVE' : 'INACTIVE', tone: row.is_active ? 'success' : 'muted' },
+            ]}
+            sections={[
+                {
+                    key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
+                        <>
+                            <Eyebrow>Signature</Eyebrow>
+                            <FlatRow label="Type">{row.sig_type}</FlatRow>
+                            <FlatRow label="Value"><code>{row.value}</code></FlatRow>
+                            <FlatRow label="Source">{row.source}</FlatRow>
+                            <FlatRow label="Confidence">{row.confidence}%</FlatRow>
+                            <FlatRow label="Hits">{row.hit_count}</FlatRow>
+                            <FlatRow label="Blocks">{row.block_count ?? 0}</FlatRow>
+                            <FlatRow label="Expires">{row.expires_at == null ? 'Never' : fmt.datetime(row.expires_at)}</FlatRow>
+                            <FlatRow label="Modified">{fmt.datetime(row.modified)}</FlatRow>
+                            <Eyebrow>Notes</Eyebrow>
+                            <p className={row.notes ? undefined : 'dim-italic'}>{row.notes || 'No notes.'}</p>
+                        </>
+                    ),
+                },
+            ]}
+            onClose={onClose}
+        />
+    );
+}
+
+const SIGNATURE_COLUMNS: Column<BotSignatureRow>[] = [
+    { key: 'sig_type', label: 'Type', sortable: true, render: (row) => <Badge tone="info">{row.sig_type}</Badge> },
+    { key: 'value', label: 'Value', hideable: false, render: (row) => <code title={row.value}>{fmt.truncate(row.value, 60)}</code> },
+    { key: 'source', label: 'Source', render: (row) => <Badge tone={row.source === 'auto' ? 'info' : 'primary'}>{row.source.toUpperCase()}</Badge> },
+    { key: 'confidence', label: 'Confidence', sortable: true, align: 'end', render: (row) => `${row.confidence}%` },
+    { key: 'hit_count', label: 'Hits', sortable: true, align: 'end' },
+    { key: 'is_active', label: 'Status', render: (row) => <Badge tone={row.is_active ? 'success' : 'muted'}>{row.is_active ? 'ON' : 'OFF'}</Badge> },
+    { key: 'expires_at', label: 'Expires', sortable: true, render: (row) => row.expires_at == null ? 'Never' : fmt.datetime(row.expires_at) },
+];
+
+const SIGNATURE_FILTERS: FilterDef[] = [
+    { key: 'sig_type', label: 'Type', type: 'select', options: BOUNCER_SIGNATURE_TYPES.map((option) => ({ ...option })) },
+    { key: 'value', label: 'Value', type: 'text' },
+    { key: 'source', label: 'Source', type: 'select', options: [
+        { value: 'auto', label: 'Auto' }, { value: 'manual', label: 'Manual' },
+    ] },
+    { key: 'is_active', label: 'Status', type: 'boolean', trueLabel: 'Active', falseLabel: 'Inactive' },
+    { key: 'expires_at', label: 'Expires', type: 'daterange' },
+];
+
+export function BotSignaturesPage() {
+    const queryClient = useQueryClient();
+    const save = BotSignatureModel.useSave();
+    const { can: canManage } = useCan(BOUNCER_MANAGE_PERMS);
+
+    const batchActions: BatchAction<BotSignatureRow>[] = canManage ? [
+        {
+            key: 'enable', label: 'Enable', icon: 'bi-check-circle',
+            run: (row) => save.mutateAsync({ id: row.id, changes: { is_active: true } }),
+        },
+        {
+            key: 'disable', label: 'Disable', icon: 'bi-pause-circle',
+            run: (row) => save.mutateAsync({ id: row.id, changes: { is_active: false } }),
+        },
+    ] : [];
+
+    const openRow = async (row: BotSignatureRow) => {
+        try {
+            const detailed = await BotSignatureModel.fetchOne(queryClient, row.id);
+            if (canManage) await openSignatureEditor(detailed);
+            else await modal.detail((close) => <SignatureDetail row={detailed} onClose={() => close(null)} />);
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Failed to load bot signature');
+        }
+    };
+
+    return (
+        <ModelTable<BotSignatureRow>
+            model={BotSignatureModel}
+            eyebrow="Security · Bouncer"
+            title="Bot Signatures"
+            searchPlaceholder="Search signature type, value, or source"
+            columns={SIGNATURE_COLUMNS}
+            filters={SIGNATURE_FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'active', label: 'Active', params: { is_active: 'true' } },
+                { key: 'manual', label: 'Manual', params: { source: 'manual' } },
+                { key: 'auto', label: 'Auto', params: { source: 'auto' } },
+            ]}
+            defaultSort="-modified"
+            columnChooser
+            persistState
+            persistKey="admin:bouncer:signatures"
+            exportFormats={['csv', 'json']}
+            selectable={canManage}
+            batchActions={batchActions}
+            addLabel="New Signature"
+            onAdd={canManage ? () => void openSignatureEditor() : undefined}
+            onRowClick={(row) => void openRow(row)}
+        />
+    );
+}

package/src/admin/cloudwatch/CloudWatchChart.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'react';
+import { MetricsChart } from '../../charts';
+import { useAuthSnapshot } from '../../client';
+import { fmt } from '../../ui';
+import {
+    CLOUDWATCH_GRANULARITIES, loadCloudWatchSeries,
+    type CloudWatchChartDefinition, type CloudWatchUnit,
+} from './data';
+
+function valueFormatter(unit: CloudWatchUnit): (value: number) => string {
+    if (unit === 'percent') return (value) => `${value.toLocaleString()}%`;
+    if (unit === 'bytes') return (value) => fmt.filesize(value);
+    if (unit === 'seconds') return (value) => `${value.toLocaleString()} s`;
+    return (value) => value.toLocaleString();
+}
+
+export function CloudWatchChart({ definition, slugs = [], refreshSignal }: {
+    definition: CloudWatchChartDefinition;
+    slugs?: string[];
+    refreshSignal?: unknown;
+}) {
+    const auth = useAuthSnapshot();
+    return <MetricsChart
+        title={definition.title}
+        account={definition.account}
+        slugs={slugs}
+        apiParams={{ category: definition.category, stat: 'avg' }}
+        loadSeries={loadCloudWatchSeries}
+        seriesCacheKey={`admin-cloudwatch:${auth.uid ?? 'anonymous'}:${definition.account}:${definition.category}`}
+        preserveSeriesLabels
+        allowedGranularities={[...CLOUDWATCH_GRANULARITIES]}
+        refreshSignal={refreshSignal}
+        defaultRange="24h"
+        defaultGranularity="hours"
+        height={200}
+        valueFormatter={valueFormatter(definition.unit)}
+        showRefresh={false}
+    />;
+}
+
+export function LazyCloudWatchChart({ definition, slugs, refreshSignal, eager = false }: {
+    definition: CloudWatchChartDefinition;
+    slugs?: string[];
+    refreshSignal?: unknown;
+    eager?: boolean;
+}) {
+    const ref = useRef<HTMLDivElement>(null);
+    const [mounted, setMounted] = useState(eager);
+    useEffect(() => {
+        if (mounted || !ref.current) return;
+        if (typeof IntersectionObserver === 'undefined') { setMounted(true); return; }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) { setMounted(true); observer.disconnect(); }
+        }, { rootMargin: '240px' });
+        observer.observe(ref.current);
+        return () => observer.disconnect();
+    }, [mounted]);
+    return <div ref={ref} className="cloudwatch-chart-slot">
+        {mounted ? <CloudWatchChart definition={definition} slugs={slugs} refreshSignal={refreshSignal} /> : <div className="panel panel-pad cloudwatch-chart-placeholder"><span className="skel skel-block" /></div>}
+    </div>;
+}