portal-mojo 0.1.0

package/src/admin/rules/handler-dsl.ts

@@ -0,0 +1,213 @@
+/** Lossless editor model for django-mojo's comma-delimited handler DSL. */
+
+export const HANDLER_SCHEMES = ['job', 'email', 'sms', 'notify', 'block', 'ticket', 'maestro', 'llm', 'resolve'] as const;
+export type HandlerScheme = typeof HANDLER_SCHEMES[number];
+
+export interface HandlerDefinition {
+    scheme: HandlerScheme;
+    label: string;
+    target: 'path' | 'targets' | 'none';
+    defaults?: Record<string, string>;
+}
+
+export const HANDLER_DEFINITIONS: readonly HandlerDefinition[] = [
+    { scheme: 'job', label: 'Run job', target: 'path' },
+    { scheme: 'email', label: 'Email', target: 'targets' },
+    { scheme: 'sms', label: 'SMS', target: 'targets' },
+    { scheme: 'notify', label: 'Push notification', target: 'targets' },
+    { scheme: 'block', label: 'Block source IP', target: 'none', defaults: { ttl: '3600' } },
+    { scheme: 'ticket', label: 'Create ticket', target: 'none', defaults: { priority: '5', status: 'open' } },
+    { scheme: 'maestro', label: 'Report to Maestro', target: 'none' },
+    { scheme: 'llm', label: 'LLM triage', target: 'none' },
+    { scheme: 'resolve', label: 'Resolve incident', target: 'none', defaults: { status: 'resolved' } },
+] as const;
+
+export interface HandlerParam { key: string; value: string; raw: string }
+export type RuntimeDisposition = 'effective' | 'swallowed' | 'skipped';
+export interface HandlerStep {
+    /** Separator immediately before this step. Empty only for the first step. */
+    separator: string;
+    /** Exact bytes after separator. Untouched steps serialize byte-for-byte. */
+    raw: string;
+    scheme: string | null;
+    schemeRaw: string;
+    supported: boolean;
+    target: string;
+    targetRaw: string;
+    hadQuery: boolean;
+    params: HandlerParam[];
+    malformedEncoding: boolean;
+    runtime: RuntimeDisposition;
+    runtimeOwner: number | null;
+}
+export interface HandlerChain { source: string; steps: HandlerStep[] }
+export interface HandlerIssue { step: number; level: 'error' | 'warning'; message: string }
+
+const SUPPORTED = new Set<string>(HANDLER_SCHEMES);
+const UI_BOUNDARY = /,(?=[A-Za-z][A-Za-z0-9+.-]*:\/\/)/g;
+const URI = /^([A-Za-z][A-Za-z0-9+.-]*):\/\/([\s\S]*)$/;
+
+function safeDecode(value: string): { value: string; malformed: boolean } {
+    try { return { value: decodeURIComponent(value.replace(/\+/g, ' ')), malformed: false }; }
+    catch { return { value, malformed: true }; }
+}
+
+function inspect(raw: string): Omit<HandlerStep, 'separator' | 'raw' | 'runtime' | 'runtimeOwner'> {
+    const content = raw.trim();
+    const match = content.match(URI);
+    if (!match) return { scheme: null, schemeRaw: '', supported: false, target: '', targetRaw: '', hadQuery: false, params: [], malformedEncoding: false };
+    const scheme = match[1]!.toLowerCase();
+    const rest = match[2]!;
+    const queryAt = rest.indexOf('?');
+    const targetRaw = queryAt < 0 ? rest : rest.slice(0, queryAt);
+    const query = queryAt < 0 ? '' : rest.slice(queryAt + 1);
+    const targetDecoded = safeDecode(targetRaw);
+    let malformedEncoding = targetDecoded.malformed;
+    const params = query === '' ? [] : query.split('&').map((rawEntry) => {
+        const eq = rawEntry.indexOf('=');
+        const keyRaw = eq < 0 ? rawEntry : rawEntry.slice(0, eq);
+        const valueRaw = eq < 0 ? '' : rawEntry.slice(eq + 1);
+        const key = safeDecode(keyRaw); const value = safeDecode(valueRaw);
+        malformedEncoding ||= key.malformed || value.malformed;
+        return { key: key.value, value: value.value, raw: rawEntry };
+    });
+    return { scheme, schemeRaw: match[1]!, supported: SUPPORTED.has(scheme), target: targetDecoded.value, targetRaw, hadQuery: queryAt >= 0, params, malformedEncoding };
+}
+
+export function parseHandlerChain(value: string | null | undefined): HandlerChain {
+    const source = value ?? '';
+    if (!source) return { source, steps: [] };
+    const pieces: Array<{ separator: string; raw: string }> = [];
+    let start = 0;
+    for (const match of source.matchAll(UI_BOUNDARY)) {
+        pieces.push({ separator: pieces.length ? ',' : '', raw: source.slice(start, match.index) });
+        start = (match.index ?? 0) + 1;
+    }
+    pieces.push({ separator: pieces.length ? ',' : '', raw: source.slice(start) });
+
+    let owner: number | null = null;
+    const steps = pieces.map((piece, index): HandlerStep => {
+        const parsed = inspect(piece.raw);
+        // Python starts a new runtime spec only at comma + an immediately
+        // adjacent known scheme. Whitespace and unknown schemes remain in
+        // the current spec, which is why the UI projection is separate.
+        const boundary = index === 0 || (piece.separator === ',' && HANDLER_SCHEMES.some((scheme) => piece.raw.startsWith(`${scheme}://`)));
+        let runtime: RuntimeDisposition;
+        if (boundary) {
+            runtime = parsed.supported ? 'effective' : 'skipped';
+            owner = parsed.supported ? index : null;
+        } else {
+            runtime = owner == null ? 'skipped' : 'swallowed';
+        }
+        return { ...piece, ...parsed, runtime, runtimeOwner: runtime === 'swallowed' ? owner : runtime === 'effective' ? index : null };
+    });
+    return { source, steps };
+}
+
+function encode(value: string): string { return encodeURIComponent(value).replace(/%40/g, '@').replace(/%2C/gi, ','); }
+
+function buildRaw(step: HandlerStep, scheme: string, target: string, params: HandlerParam[]): string {
+    const leading = step.raw.match(/^\s*/)?.[0] ?? '';
+    const trailing = step.raw.match(/\s*$/)?.[0] ?? '';
+    const query = params.length ? `?${params.map((entry) => entry.raw || `${encode(entry.key)}=${encode(entry.value)}`).join('&')}` : (step.hadQuery && step.params.length === 0 ? '?' : '');
+    const schemeText = scheme === step.scheme ? step.schemeRaw : scheme;
+    const targetText = target === step.target ? step.targetRaw : encode(target);
+    return `${leading}${schemeText}://${targetText}${query}${trailing}`;
+}
+
+export function updateHandlerStep(chain: HandlerChain, index: number, patch: {
+    scheme?: HandlerScheme; target?: string; param?: { key: string; value: string }; removeParam?: string;
+}, options: { confirmBehaviorChange?: boolean } = {}): HandlerChain {
+    const step = chain.steps[index];
+    if (!step) throw new Error('Handler step does not exist.');
+    if (step.runtime !== 'effective' && !options.confirmBehaviorChange) {
+        throw new Error('This step is skipped or swallowed by the backend. Confirm the runtime behavior change before editing it.');
+    }
+    const scheme = patch.scheme ?? (step.supported ? step.scheme as HandlerScheme : undefined);
+    if (!scheme || !SUPPORTED.has(scheme)) throw new Error('Choose a supported handler type.');
+    let params = step.params.map((entry) => ({ ...entry }));
+    if (patch.param) {
+        const first = params.findIndex((entry) => entry.key === patch.param!.key);
+        if (first >= 0) params[first] = { key: patch.param.key, value: patch.param.value, raw: '' };
+        else params.push({ key: patch.param.key, value: patch.param.value, raw: '' });
+    }
+    if (patch.removeParam != null) {
+        const first = params.findIndex((entry) => entry.key === patch.removeParam);
+        if (first >= 0) params.splice(first, 1);
+    }
+    const definition = HANDLER_DEFINITIONS.find((item) => item.scheme === scheme)!;
+    const nextTarget = patch.target ?? (patch.scheme && definition.target === 'none' ? '' : step.target);
+    const raw = buildRaw(step, scheme, nextTarget, params);
+    const next = chain.steps.map((candidate, i) => i === index ? { ...candidate, raw } : candidate);
+    return parseHandlerChain(next.map((candidate) => candidate.separator + candidate.raw).join(''));
+}
+
+export function moveHandlerStep(chain: HandlerChain, from: number, to: number, options: { confirmBehaviorChange?: boolean } = {}): HandlerChain {
+    if (from === to) return chain;
+    const source = chain.steps[from]; const target = chain.steps[to];
+    if (!source || !target) throw new Error('Handler step does not exist.');
+    const ordered = chain.steps.map((step) => step.raw);
+    const [moved] = ordered.splice(from, 1); ordered.splice(to, 0, moved!);
+    const next = parseHandlerChain(ordered.join(','));
+    const effectiveCount = (value: HandlerChain) => value.steps.filter((step) => step.runtime === 'effective').length;
+    const changesReachability = source.runtime !== 'effective' || target.runtime !== 'effective'
+        || effectiveCount(next) !== effectiveCount(chain)
+        || (source.runtime === 'effective' && next.steps[to]?.runtime !== 'effective');
+    if (changesReachability && !options.confirmBehaviorChange) {
+        throw new Error('Moving this content changes which specs the backend can dispatch. Confirm the behavior change first.');
+    }
+    return next;
+}
+
+export function removeHandlerStep(chain: HandlerChain, index: number, options: { confirmBehaviorChange?: boolean } = {}): HandlerChain {
+    const step = chain.steps[index];
+    if (!step) return chain;
+    if (step.runtime !== 'effective' && !options.confirmBehaviorChange) throw new Error('Confirm removal of skipped or swallowed legacy content.');
+    return parseHandlerChain(chain.steps.filter((_, i) => i !== index).map((candidate) => candidate.raw).join(','));
+}
+
+export function addHandlerStep(chain: HandlerChain, scheme: HandlerScheme): HandlerChain {
+    const definition = HANDLER_DEFINITIONS.find((item) => item.scheme === scheme)!;
+    const params = Object.entries(definition.defaults ?? {}).map(([key, value]) => `${encode(key)}=${encode(value)}`);
+    const raw = `${scheme}://${params.length ? `?${params.join('&')}` : ''}`;
+    return parseHandlerChain(`${serializeHandlerChain(chain)}${chain.steps.length ? ',' : ''}${raw}`);
+}
+
+export function serializeHandlerChain(chain: HandlerChain): string {
+    return chain.steps.map((step) => step.separator + step.raw).join('');
+}
+
+export function runtimeEffectiveHandlerChain(chain: HandlerChain): string[] {
+    // Match RuleSet.run_handler exactly: strip once, split at known adjacent
+    // schemes, strip each result, then skip an unsupported parsed scheme.
+    return serializeHandlerChain(chain).trim()
+        .split(/,(?=(?:job|email|sms|notify|ticket|maestro|block|llm|resolve):\/\/)/)
+        .map((spec) => spec.trim()).filter(Boolean)
+        .filter((spec) => SUPPORTED.has(spec.match(URI)?.[1]?.toLowerCase() ?? ''));
+}
+
+export function validateHandlerChain(chain: HandlerChain): HandlerIssue[] {
+    const issues: HandlerIssue[] = [];
+    chain.steps.forEach((step, index) => {
+        if (!step.scheme) issues.push({ step: index, level: 'error', message: 'Handler is not a URI-like scheme:// specification.' });
+        else if (!step.supported) issues.push({ step: index, level: 'warning', message: `Unsupported ${step.scheme}:// content is preserved but the backend will skip or swallow it.` });
+        if (step.malformedEncoding) issues.push({ step: index, level: 'error', message: 'Malformed percent encoding.' });
+        if (step.runtime === 'swallowed') issues.push({ step: index, level: 'warning', message: 'The backend swallows this segment into the preceding handler.' });
+        if (step.runtime === 'skipped') issues.push({ step: index, level: 'warning', message: 'The backend skips this segment.' });
+        step.params.forEach((entry) => {
+            if (!entry.key) issues.push({ step: index, level: 'error', message: 'Parameter keys cannot be empty.' });
+            if (!entry.value) issues.push({ step: index, level: 'error', message: `Parameter “${entry.key || '(blank)'}” cannot have an empty value.` });
+        });
+        if (step.supported && ['job', 'email', 'sms', 'notify'].includes(step.scheme!) && !step.target.trim()) issues.push({ step: index, level: 'error', message: `${step.scheme}:// requires a target.` });
+        if (step.scheme === 'job' && step.target && !/^[A-Za-z_]\w*(?:\.[A-Za-z_]\w*)+$/.test(step.target)) issues.push({ step: index, level: 'error', message: 'Job target must be a Python module path.' });
+        const first = (key: string) => step.params.find((entry) => entry.key === key)?.value;
+        const integer = (key: string, min: number, max = Number.MAX_SAFE_INTEGER) => { const value = first(key); if (value != null && (!/^\d+$/.test(value) || Number(value) < min || Number(value) > max)) issues.push({ step: index, level: 'error', message: `${key} must be an integer from ${min}${Number.isFinite(max) ? ` to ${max}` : ''}.` }); };
+        if (step.scheme === 'block') integer('ttl', 0);
+        if (step.scheme === 'ticket') integer('priority', 1, 10);
+        if (step.scheme === 'maestro') integer('board', 1);
+        if (step.scheme === 'resolve') { const status = first('status'); if (status && !['resolved', 'closed', 'ignored'].includes(status)) issues.push({ step: index, level: 'error', message: 'Resolve status must be resolved, closed, or ignored.' }); }
+        const seen = new Set<string>();
+        step.params.forEach((entry) => { if (seen.has(entry.key)) issues.push({ step: index, level: 'warning', message: `Duplicate “${entry.key}”: django-mojo uses the first value.` }); seen.add(entry.key); });
+    });
+    return issues;
+}

package/src/admin/rules/index.ts

@@ -0,0 +1,13 @@
+import type { AdminRoute } from '../index';
+import { SECURITY_VIEW_PERMS } from '../security-permissions';
+import { RuleSetsPage } from './RuleSetsPage';
+
+// Importing the bundle also installs the namespaced SchemaForm field renderer.
+export * from './models';
+export * from './handler-dsl';
+export * from './HandlerChainBuilder';
+export * from './editors';
+
+export const RULES_ADMIN_ROUTES: AdminRoute[] = [
+    { path: 'rules', label: 'Rule Engine', component: RuleSetsPage, permissions: SECURITY_VIEW_PERMS },
+];

package/src/admin/rules/models.ts

@@ -0,0 +1,112 @@
+import { defineModel, type Params } from '../../client';
+import type { FieldOption, FormData } from '../../client/types';
+import { SECURITY_MANAGE_PERMS, SECURITY_VIEW_PERMS } from '../security-permissions';
+
+export const RULESET_VIEW_PERMS = SECURITY_VIEW_PERMS;
+export const RULESET_MANAGE_PERMS = SECURITY_MANAGE_PERMS;
+
+export interface RuleSetRow {
+    id: number; created: number; modified: number; priority: number; category: string; name: string | null;
+    bundle_minutes: number | null; bundle_by: number; bundle_by_rule_set: boolean; match_by: number;
+    handler: string | null; trigger_count: number | null; trigger_window: number | null;
+    retrigger_every: number | null; metadata: Record<string, unknown>; is_active: boolean;
+    [field: string]: unknown;
+}
+export interface RuleRow {
+    id: number; created: number; modified: number; parent: number | { id: number; name?: string | null };
+    name: string | null; index: number; comparator: string; field_name: string | null;
+    value: string; value_type: string; is_required: number; [field: string]: unknown;
+}
+
+export const BUNDLE_BY_OPTIONS: readonly FieldOption[] = [
+    'Each event', 'Hostname', 'Model type', 'Specific model', 'Source IP', 'Hostname + model type',
+    'Hostname + specific model', 'IP + model type', 'IP + specific model', 'IP + hostname',
+    'Group', 'Group + model type', 'Group + specific model', 'Group + source IP',
+].map((label, value) => ({ value, label }));
+export const MATCH_BY_OPTIONS: readonly FieldOption[] = [{ value: 0, label: 'All conditions' }, { value: 1, label: 'Any condition' }];
+export const COMPARATOR_OPTIONS: readonly FieldOption[] = ['==', 'eq', '>', '>=', '<', '<=', 'contains', 'regex'].map((value) => ({ value, label: value }));
+export const VALUE_TYPE_OPTIONS: readonly FieldOption[] = ['str', 'int', 'float', 'bool'].map((value) => ({ value, label: value }));
+
+export function optionsWithUnknownValue(options: readonly FieldOption[], raw: unknown): FieldOption[] {
+    const out = options.map((option) => ({ ...option }));
+    if (raw != null && raw !== '' && !out.some((option) => String(option.value) === String(raw))) out.push({ value: String(raw), label: `Unknown (${String(raw)})` });
+    return out;
+}
+
+function normalize(params: Params, allowed: Set<string>, defaultSort: string): Params {
+    const out: Params = { graph: 'default' };
+    for (const [key, value] of Object.entries(params)) if (['start', 'size', 'sort', 'search'].includes(key) || allowed.has(key)) if (value != null && value !== '') out[key] = value;
+    out.sort = String(out.sort ?? defaultSort); return out;
+}
+export const normalizeRuleSetListParams = (params: Params) => normalize(params, new Set(['id', 'category', 'category__icontains', 'priority', 'is_active', 'bundle_by', 'match_by']), 'priority');
+export const normalizeRuleListParams = (params: Params) => normalize(params, new Set(['id', 'parent', 'index', 'field_name', 'comparator', 'value_type', 'is_required']), 'index');
+
+export const RuleSetModel = defineModel<RuleSetRow>({ name: 'incident_ruleset', endpoint: '/api/incident/event/ruleset', permissions: { view: RULESET_VIEW_PERMS, manage: RULESET_MANAGE_PERMS, delete: RULESET_MANAGE_PERMS }, normalizeListParams: normalizeRuleSetListParams });
+export const RuleModel = defineModel<RuleRow>({ name: 'incident_rule', endpoint: '/api/incident/event/ruleset/rule', permissions: { view: RULESET_VIEW_PERMS, manage: RULESET_MANAGE_PERMS, delete: RULESET_MANAGE_PERMS }, normalizeListParams: normalizeRuleListParams });
+
+function nullablePositive(value: unknown, label: string, allowZero = false): number | null {
+    if (value == null || value === '') return null;
+    const parsed = Number(String(value).trim());
+    if (!Number.isInteger(parsed) || parsed < (allowZero ? 0 : 1)) throw new Error(`${label} must be ${allowZero ? 'zero or ' : ''}a positive integer.`);
+    return parsed;
+}
+function integer(value: unknown, label: string): number { const parsed = Number(String(value).trim()); if (!Number.isInteger(parsed)) throw new Error(`${label} must be an integer.`); return parsed; }
+function text(value: unknown, label: string): string { const parsed = String(value ?? '').trim(); if (!parsed) throw new Error(`${label} is required.`); return parsed; }
+function present(data: FormData, key: string): boolean { return Object.prototype.hasOwnProperty.call(data, key); }
+
+export function validateRuleSetTuple(values: { bundle_by: number; bundle_minutes: number | null; trigger_count: number | null; trigger_window: number | null; retrigger_every: number | null }): void {
+    const effectiveBundle = values.bundle_by !== 0 && values.bundle_minutes !== 0;
+    if (values.trigger_window != null && values.trigger_count == null) throw new Error('Trigger window requires a trigger count.');
+    if (values.retrigger_every != null && values.trigger_count == null) throw new Error('Re-trigger count requires a trigger count.');
+    if (values.trigger_count != null && !effectiveBundle) throw new Error('A count threshold requires effective bundling.');
+    if (values.trigger_window != null && values.bundle_minutes != null && values.bundle_minutes > 0 && values.trigger_window > values.bundle_minutes) throw new Error('Trigger window cannot exceed the finite bundle window.');
+}
+
+export function ruleSetChanges(data: FormData, creating: boolean, original?: Partial<RuleSetRow>): Record<string, unknown> {
+    const defaults = { priority: 10, category: '', name: '', bundle_minutes: 30, bundle_by: 4, bundle_by_rule_set: true, match_by: 0, handler: '', trigger_count: null, trigger_window: null, retrigger_every: null };
+    const source = { ...defaults, ...original, ...data } as Record<string, unknown>;
+    const tuple = {
+        bundle_by: integer(source.bundle_by, 'Bundle mode'),
+        bundle_minutes: nullablePositive(source.bundle_minutes, 'Bundle window', true),
+        trigger_count: nullablePositive(source.trigger_count, 'Trigger count'),
+        trigger_window: nullablePositive(source.trigger_window, 'Trigger window'),
+        retrigger_every: nullablePositive(source.retrigger_every, 'Re-trigger count'),
+    };
+    const changedBundleMode = creating || original?.bundle_by == null || tuple.bundle_by !== original.bundle_by;
+    if (changedBundleMode && (tuple.bundle_by < 0 || tuple.bundle_by > 13)) throw new Error('Bundle mode must be 0 through 13. Existing future values may be preserved unchanged.');
+    validateRuleSetTuple(tuple);
+    const out: Record<string, unknown> = {};
+    const write = (key: string, value: unknown) => { if (creating || present(data, key)) out[key] = value; };
+    write('name', text(source.name, 'Name')); write('category', text(source.category, 'Category'));
+    write('priority', integer(source.priority, 'Priority')); write('match_by', integer(source.match_by, 'Match mode'));
+    write('bundle_by', tuple.bundle_by); write('bundle_minutes', tuple.bundle_minutes);
+    write('bundle_by_rule_set', source.bundle_by_rule_set === true); write('trigger_count', tuple.trigger_count);
+    write('trigger_window', tuple.trigger_window); write('retrigger_every', tuple.retrigger_every);
+    write('handler', String(source.handler ?? ''));
+    const metadata: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(data)) if (key.startsWith('metadata.')) metadata[key.slice(9)] = value;
+    if (Object.keys(metadata).length) out.metadata = metadata;
+    if (creating) out.is_active = false; else if (present(data, 'is_active')) out.is_active = data.is_active === true;
+    return out;
+}
+
+export function ruleChanges(data: FormData, creating: boolean, original?: Partial<RuleRow>): Record<string, unknown> {
+    const source = { index: 0, comparator: '==', value_type: 'str', is_required: 0, value: '', ...original, ...data } as Record<string, unknown>;
+    const out: Record<string, unknown> = {};
+    const write = (key: string, value: unknown) => { if (creating || present(data, key)) out[key] = value; };
+    const fieldName = text(source.field_name, 'Field name');
+    const changedField = creating || original?.field_name == null || fieldName !== original.field_name;
+    if (changedField && fieldName.startsWith('_')) throw new Error('Field names beginning with “_” cannot be matched.');
+    const valueType = String(source.value_type ?? 'str');
+    const changesComparison = creating
+        || (present(data, 'value') && String(data.value ?? '') !== String(original?.value ?? ''))
+        || (present(data, 'value_type') && valueType !== String(original?.value_type ?? ''));
+    if (valueType === 'bool' && changesComparison) throw new Error('Boolean authoring is disabled: django-mojo treats the stored string “false” as true. Existing boolean rules remain preservable.');
+    const value = String(source.value ?? '');
+    if (changesComparison && valueType === 'int' && !/^[+-]?\d+$/.test(value.trim())) throw new Error('Comparison value must be an integer.');
+    if (changesComparison && valueType === 'float' && !Number.isFinite(Number(value.trim()))) throw new Error('Comparison value must be numeric.');
+    write('parent', integer(source.parent, 'Rule set')); write('name', text(source.name, 'Name')); write('index', integer(source.index, 'Index'));
+    write('field_name', fieldName); write('comparator', String(source.comparator)); write('value_type', valueType); write('value', value);
+    write('is_required', source.is_required === true || String(source.is_required) === '1' ? 1 : 0);
+    return out;
+}

package/src/admin/security/devices/LoginEventDetail.tsx

@@ -0,0 +1,123 @@
+// LoginEventDetail — a small, strictly read-only `modal.detail`.
+// `UserLoginEvent.RestMeta` sets CAN_CREATE / CAN_UPDATE / CAN_DELETE all
+// False, so there are no actions here by contract: only the record, and
+// cross-links to the user, the device and the IP dossier.
+import { Badge, DetailView, Eyebrow, FlatRow, fmt, modal } from '../../../ui';
+import { useCan } from '../../../client';
+import { countryFlag, GEOIP_VIEW_PERMS } from '../geoip/models';
+import { showGeoIpDossierForAddress } from '../geoip/GeoIpDossier';
+import {
+    LoginEventModel, USER_DEVICE_VIEW_PERMS,
+    browserLabel, osLabel, type LoginEventRow,
+} from './models';
+
+const DASH = <span className="dim-italic">—</span>;
+
+function whereOf(row: LoginEventRow): string {
+    return [row.city, row.region, row.country_code].filter(Boolean).join(', ') || 'Unknown location';
+}
+
+export function LoginEventDetail({ id, onClose, onOpenUser, onOpenDeviceByDuid }: {
+    id: number;
+    onClose: () => void;
+    onOpenUser?: (userId: number) => void;
+    onOpenDeviceByDuid?: (duid: string) => void;
+}) {
+    const { data: row, isPending, error } = LoginEventModel.useOne(id);
+    const canGeoIp = useCan(GEOIP_VIEW_PERMS).can;
+    const canDevice = useCan(USER_DEVICE_VIEW_PERMS).can;
+
+    if (isPending) return <div className="modal-pad dim">Loading login event…</div>;
+    if (!row || error) return <div className="modal-pad text-bad">{error?.message ?? 'Login event not found'}</div>;
+
+    const flag = countryFlag(row.country_code);
+    const device = row.device ?? null;
+
+    return (
+        <DetailView
+            icon="bi-box-arrow-in-right"
+            title={whereOf(row)}
+            subtitle={`${fmt.datetime(row.created)}${row.source ? ` · via ${row.source}` : ''}`}
+            chips={[
+                ...(row.is_new_country ? [{ icon: 'bi-globe-americas', text: 'New country', tone: 'danger' as const }] : []),
+                ...(row.is_new_region ? [{ icon: 'bi-pin-map', text: 'New region', tone: 'warning' as const }] : []),
+                ...(row.source ? [{ text: row.source }] : []),
+            ]}
+            sections={[
+                {
+                    key: 'event', label: 'Login', icon: 'bi-box-arrow-in-right', render: () => (
+                        <>
+                            <Eyebrow>When &amp; where</Eyebrow>
+                            <FlatRow label="Timestamp"><code>{fmt.datetime(row.created)}</code> <span className="dim">· {fmt.relative(row.created)}</span></FlatRow>
+                            <FlatRow label="City">{row.city || DASH}</FlatRow>
+                            <FlatRow label="Region">
+                                {row.region || DASH}
+                                {row.region_code && <code className="dim geoip-cc">{row.region_code}</code>}
+                            </FlatRow>
+                            <FlatRow label="Country">
+                                {row.country_code
+                                    ? <>{flag && <span className="geoip-flag">{flag}</span>}{row.country_code}</>
+                                    : DASH}
+                            </FlatRow>
+                            <FlatRow label="Coordinates">
+                                {row.latitude != null && row.longitude != null
+                                    ? <code>{row.latitude}, {row.longitude}</code>
+                                    : <span className="dim-italic">— (private-range logins carry none)</span>}
+                            </FlatRow>
+
+                            <Eyebrow>Origin</Eyebrow>
+                            <FlatRow label="IP address">
+                                {row.ip_address
+                                    ? (canGeoIp
+                                        ? <button className="btn-link" onClick={() => showGeoIpDossierForAddress(row.ip_address!)}><code>{row.ip_address}</code></button>
+                                        : <code>{row.ip_address}</code>)
+                                    : DASH}
+                            </FlatRow>
+                            <FlatRow label="Source">{row.source || DASH}</FlatRow>
+                            <FlatRow label="New country"><Badge tone={row.is_new_country ? 'danger' : 'muted'}>{row.is_new_country ? 'Yes' : 'No'}</Badge></FlatRow>
+                            <FlatRow label="New region"><Badge tone={row.is_new_region ? 'warning' : 'muted'}>{row.is_new_region ? 'Yes' : 'No'}</Badge></FlatRow>
+
+                            <Eyebrow>Identity</Eyebrow>
+                            <FlatRow label="User">
+                                {row.user
+                                    ? (onOpenUser
+                                        ? <button className="btn-link" onClick={() => onOpenUser(row.user!.id)}>{row.user.display_name || row.user.username}</button>
+                                        : (row.user.display_name || row.user.username))
+                                    : DASH}
+                            </FlatRow>
+                            <FlatRow label="Device">
+                                {device
+                                    ? (
+                                        <>
+                                            {browserLabel(device.device_info)} on {osLabel(device.device_info)}
+                                            {' '}
+                                            {canDevice && onOpenDeviceByDuid
+                                                ? <button className="btn-link" onClick={() => onOpenDeviceByDuid(device.duid)}><code>{fmt.truncateMiddle(device.duid, 14)}</code></button>
+                                                : <code>{fmt.truncateMiddle(device.duid, 14)}</code>}
+                                        </>
+                                    )
+                                    : <span className="dim-italic">— (no device linked to this login)</span>}
+                            </FlatRow>
+                            {row.user_agent_info?.string && (
+                                <>
+                                    <Eyebrow>User agent</Eyebrow>
+                                    <pre className="ud-ua-block">{row.user_agent_info.string}</pre>
+                                </>
+                            )}
+                        </>
+                    ),
+                },
+            ]}
+            initialSection="event"
+            // No context menu: the model is read-only by RestMeta contract.
+            onClose={onClose}
+        />
+    );
+}
+
+export function showLoginEventDetail(id: number, opts: {
+    onOpenUser?: (userId: number) => void;
+    onOpenDeviceByDuid?: (duid: string) => void;
+} = {}): void {
+    void modal.detail((close) => <LoginEventDetail id={id} onClose={() => close(null)} {...opts} />);
+}