portal-mojo 0.1.0

package/src/admin/identity/users/sections/permission-catalog.ts

@@ -0,0 +1,138 @@
+// The system permission catalog — web-mojo's User.CATEGORY_PERMISSIONS +
+// GRANULAR_PERMISSION_TABS carried VERBATIM (src/core/models/User.js:76-149,
+// read in full 2026-08-05), expressed as FormView tabsets instead of the
+// live-mutated arrays the do-not-recreate list retires.
+//
+// Sys Perms section == User.SYSTEM_PERMISSION_FIELDS: ONE tabset — the
+// System category tab + each granular domain tab. App Perms section ==
+// User.APP_PERMISSION_FIELDS: whatever the app registered under the
+// USER_APP_PERMS_TABSET registry name (registerFormTabs is the portal's
+// User.registerPermissions equivalent) — the section renders only when that
+// registry is non-empty, mirroring `User.APP_PERMISSION_FIELDS.length > 0`.
+//
+// Every switch autosaves a dotted `permissions.<name>` key — FormView
+// expands it to a partial dict and django-mojo MERGES it into the
+// permissions JSONField (rest.py on_rest_update_jsonfield), so absent keys
+// keep their grants.
+import type { Field } from '../../../../client';
+import type { FormTab } from '../../../../ui';
+
+interface CatalogPerm {
+    name: string;
+    label: string;
+    tooltip?: string;
+}
+
+/** Category permissions (broad domain-level access) — source verbatim. */
+export const CATEGORY_PERMISSIONS: CatalogPerm[] = [
+    { name: 'admin', label: 'System Admin', tooltip: 'Full access to everything — permission equivalent of superuser' },
+    { name: 'view_admin', label: 'Admin Panel', tooltip: 'Access the admin panel, Mojo, and system tools' },
+    { name: 'security', label: 'Security', tooltip: 'Incidents, events, rules, tickets, firewall, bouncer, GeoIP, system logs' },
+    { name: 'users', label: 'Users', tooltip: 'User records, passkeys, TOTP, API keys, OAuth, devices, locations' },
+    { name: 'groups', label: 'Groups', tooltip: 'Groups, members, group API keys, settings' },
+    { name: 'comms', label: 'Communications', tooltip: 'Email, phone, SMS, push notifications, chat, notifications' },
+    { name: 'jobs', label: 'Jobs', tooltip: 'Jobs, job events, job logs, runners, queue control, system stats' },
+    { name: 'metrics', label: 'Metrics', tooltip: 'Metrics recording, fetching, categories, values, permissions' },
+    { name: 'files', label: 'Files', tooltip: 'File managers, files, renditions, vault files, vault data, S3 buckets' },
+    { name: 'assistant', label: 'Mojo', tooltip: 'Access to Mojo' },
+];
+
+/** Granular view/manage pairs by domain tab — source verbatim. */
+export const GRANULAR_PERMISSION_TABS: { label: string; permissions: CatalogPerm[] }[] = [
+    {
+        label: 'Account',
+        permissions: [
+            { name: 'view_users', label: 'View Users' },
+            { name: 'manage_users', label: 'Manage Users' },
+            { name: 'view_groups', label: 'View Groups' },
+            { name: 'manage_groups', label: 'Manage Groups' },
+            { name: 'manage_group', label: 'Manage Own Group' },
+            { name: 'view_members', label: 'View Members' },
+            { name: 'manage_settings', label: 'Manage Settings' },
+        ],
+    },
+    {
+        label: 'Communication',
+        permissions: [
+            { name: 'view_support', label: 'View Support Messages' },
+            { name: 'manage_support', label: 'Manage Support Messages' },
+            { name: 'manage_chat', label: 'Manage Chat' },
+            { name: 'manage_aws', label: 'Manage Email (AWS)' },
+            { name: 'view_notifications', label: 'View Notifications' },
+            { name: 'manage_notifications', label: 'Manage Notifications' },
+            { name: 'send_notifications', label: 'Send Notifications' },
+            { name: 'view_devices', label: 'View Push Devices' },
+            { name: 'manage_devices', label: 'Manage Push Devices' },
+            { name: 'manage_push_config', label: 'Push Config' },
+            { name: 'view_phone_numbers', label: 'View Phone Numbers' },
+            { name: 'manage_phone_numbers', label: 'Manage Phone Numbers' },
+            { name: 'manage_phone_config', label: 'Phone Config' },
+            { name: 'view_sms', label: 'View SMS' },
+            { name: 'manage_sms', label: 'Manage SMS' },
+            { name: 'send_sms', label: 'Send SMS' },
+        ],
+    },
+    {
+        label: 'Platform',
+        permissions: [
+            { name: 'view_security', label: 'View Security' },
+            { name: 'manage_security', label: 'Manage Security' },
+            { name: 'view_logs', label: 'View Logs' },
+            { name: 'manage_logs', label: 'Manage Logs' },
+            { name: 'view_jobs', label: 'View Jobs' },
+            { name: 'manage_jobs', label: 'Manage Jobs' },
+            { name: 'view_metrics', label: 'View Metrics' },
+            { name: 'manage_metrics', label: 'Manage Metrics' },
+            { name: 'write_metrics', label: 'Write Metrics' },
+            { name: 'view_fileman', label: 'View File Managers' },
+            { name: 'manage_files', label: 'Manage Files' },
+            { name: 'view_vault', label: 'View Vault' },
+            { name: 'manage_vault', label: 'Manage Vault' },
+            { name: 'manage_docit', label: 'Manage Docs' },
+            { name: 'manage_shortlinks', label: 'Manage Shortlinks' },
+            { name: 'view_dns', label: 'View DNS' },
+            {
+                name: 'manage_dns', label: 'Manage DNS',
+                tooltip: 'Manage domains, DNS records, provider credentials and certificates. Adopting a hosted zone and reading certificate key material stay restricted to platform superusers.',
+            },
+            { name: 'view_geofence', label: 'View Geofence Config' },
+            { name: 'manage_geofence', label: 'Manage Geofence Config' },
+            {
+                name: 'bypass_geofence', label: 'Bypass Geofence (Whitelist)',
+                tooltip: 'Exempts this user from ALL geofence rules on authenticated requests. Login-time geofencing still applies until backend post-login support lands.',
+            },
+        ],
+    },
+];
+
+/** User._permSwitch port: catalog entry → dotted autosave switch field. */
+function permSwitch(p: CatalogPerm): Field {
+    return {
+        name: `permissions.${p.name}`,
+        type: 'switch',
+        label: p.label,
+        columns: 6,
+        ...(p.tooltip ? { help: p.tooltip } : {}),
+    };
+}
+
+/**
+ * The "Sys Perms" tabset — System category tab + the granular domain tabs,
+ * one row (User.SYSTEM_PERMISSION_FIELDS shape).
+ */
+export const SYSTEM_PERMISSION_TABS: FormTab[] = [
+    { key: 'system', label: 'System', fields: CATEGORY_PERMISSIONS.map(permSwitch) },
+    ...GRANULAR_PERMISSION_TABS.map((tab) => ({
+        key: tab.label.toLowerCase(),
+        label: tab.label,
+        fields: tab.permissions.map(permSwitch),
+    })),
+];
+
+/**
+ * Registry name for app-registered permission tabs — the portal equivalent
+ * of User.registerPermissions(...). An app calls
+ * `registerFormTabs(USER_APP_PERMS_TABSET, [{key, label, fields}])` and the
+ * "App Perms" section appears with those tabs; empty registry = no section.
+ */
+export const USER_APP_PERMS_TABSET = 'user-app-perms';

package/src/admin/identity/users/sections/queries.ts

@@ -0,0 +1,74 @@
+// The shared query set UserDetail owns — the port of UserView's shared
+// Collections (devicesCollection, pushDevicesCollection, membersCollection,
+// loginsCollection, eventsCollection, activityCollection,
+// objectLogsCollection + the fire-and-forget throttle GET). Overview KPIs,
+// the rail count badges, and the header chips all read from here; section
+// lists with their own paging/search run their own param'd queries and
+// dedupe through the TanStack cache.
+import { useQuery } from '@tanstack/react-query';
+import { mojoCall } from '../../../../client';
+import { LogModel } from '../../../monitoring';
+import { EventModel } from '../../../incidents';
+import { MemberModel } from '../../members';
+import {
+    DeviceModel, LoginEventModel, PushDeviceModel,
+    ApiKeyModel,
+} from '../models';
+
+export interface ThrottleState {
+    count: number;
+    limit: number;
+    window: number;
+    retry_after_seconds: number;
+}
+
+export interface SharedUserQueryAccess {
+    devices: boolean;
+    pushDevices: boolean;
+    members: boolean;
+    logins: boolean;
+    events: boolean;
+    logs: boolean;
+    apiKeys: boolean;
+    throttle: boolean;
+}
+
+export function useSharedUserQueries(userId: number, access: SharedUserQueryAccess) {
+    // Sizes mirror the source's shared collections (25/25/10/10/25/25/25).
+    const devices = DeviceModel.useList({ user: userId, size: 25 }, { enabled: access.devices });
+    const pushDevices = PushDeviceModel.useList({ user: userId, size: 25 }, { enabled: access.pushDevices });
+    const members = MemberModel.useList({ user: userId, size: 10 }, { enabled: access.members });
+    const logins = LoginEventModel.useList({ user: userId, size: 10, sort: '-created' }, { enabled: access.logins });
+    const events = EventModel.useList(
+        { size: 25, model_name: 'account.User', model_id: userId, sort: '-created' },
+        { enabled: access.events },
+    );
+    const activity = LogModel.useList({ size: 25, uid: userId, sort: '-created' }, { enabled: access.logs });
+    const objectLogs = LogModel.useList(
+        { size: 25, model_name: 'account.User', model_id: userId, sort: '-created' },
+        { enabled: access.logs },
+    );
+    const apiKeys = ApiKeyModel.useList({ user: userId, size: 25, sort: '-id' }, { enabled: access.apiKeys });
+
+    // Login-throttle state for the header "Login locked Xs" badge.
+    // Admin-tier endpoint; failure (or a non-admin viewer) is non-fatal —
+    // the badge just stays hidden (source _refreshThrottle).
+    const throttle = useQuery<ThrottleState | null>({
+        queryKey: ['/api/auth/manage/throttle', userId],
+        queryFn: async () => {
+            try {
+                const body = await mojoCall('/api/auth/manage/throttle', { params: { user_id: userId, key: 'login' } });
+                return (body.data ?? null) as ThrottleState | null;
+            } catch {
+                return null;
+            }
+        },
+        enabled: access.throttle,
+        staleTime: 30_000,
+        retry: false,
+    });
+
+    return { devices, pushDevices, members, logins, events, activity, objectLogs, apiKeys, throttle };
+}
+
+export type SharedUserQueries = ReturnType<typeof useSharedUserQueries>;

package/src/admin/identity/users/sections/shared.tsx

@@ -0,0 +1,299 @@
+// user-sections/shared — the helpers every UserDetail section leans on:
+// the disable-lifecycle maps, tone maps, presence math, the admin-caller
+// gate, day-grouped list rendering, and the compact pager/search idiom the
+// section lists share (web-mojo ListView's searchable + paginationMode
+// 'pages' pageSize 5, expressed as server params).
+//
+// Ported from admin/account/users/UserView.js helpers (isOnline,
+// DISABLE_REASON_BADGES, _statusBadge, _inactivityWarning, LOG_LEVEL_*,
+// LOGIN_TONE, PROVIDER_ICONS) — read in full 2026-08-05.
+import { useState, type ReactNode } from 'react';
+import { dateFns, fmt, type Tone } from '../../../../ui';
+import { useCan, type Params } from '../../../../client';
+import { USER_MANAGE_PERMISSIONS, type UserRow } from '../models';
+
+// ── Disable lifecycle (metadata.protected.disable.*) ──────────────────
+// Truth field is `is_active`; the block carries reason/by/note/warning/
+// history (services/disable.py schema — `at` values are ISO strings, not
+// epochs). Reason → badge map per the admin-users spec alignment.
+
+export interface DisableHistoryEntry {
+    at?: string | null;
+    reason?: string | null;
+    by_user_id?: number | null;
+    by_username?: string | null;
+    note?: string | null;
+    reactivated_at?: string | null;
+    reactivated_by_user_id?: number | null;
+    reactivated_by_username?: string | null;
+    reactivated_note?: string | null;
+}
+
+export interface DisableBlock {
+    reason?: string | null;
+    at?: string | null;
+    by_user_id?: number | null;
+    by_username?: string | null;
+    note?: string | null;
+    exempt_from_auto_disable?: boolean;
+    warning?: { sent_at?: string | null; days_until_disable_at_send?: number | null };
+    history?: DisableHistoryEntry[];
+}
+
+export const DISABLE_REASON_BADGES: Record<string, { label: string; tone: Tone }> = {
+    admin: { label: 'Blocked', tone: 'danger' },
+    abuse: { label: 'Banned', tone: 'danger' },
+    inactive: { label: 'Auto-disabled', tone: 'warning' },
+    anonymized: { label: 'Anonymized', tone: 'muted' },
+    self: { label: 'Self-deactivated', tone: 'muted' },
+};
+
+export function disableBlock(user: UserRow): DisableBlock | null {
+    const meta = user.metadata as Record<string, unknown> | null | undefined;
+    const protectedNs = meta?.protected as Record<string, unknown> | undefined;
+    const block = protectedNs?.disable;
+    return block && typeof block === 'object' ? (block as DisableBlock) : null;
+}
+
+export function disableReason(user: UserRow): string | null {
+    return disableBlock(user)?.reason ?? null;
+}
+
+/** Anonymization is irreversible per backend — the active toggle hides. */
+export function isAnonymized(user: UserRow): boolean {
+    return disableReason(user) === 'anonymized';
+}
+
+/** Reason-keyed status badge; null while active (the toggle already says so). */
+export function statusBadge(user: UserRow): { label: string; tone: Tone } | null {
+    if (user.is_active) return null;
+    const reason = disableReason(user);
+    return (reason && DISABLE_REASON_BADGES[reason]) || { label: 'Inactive', tone: 'muted' };
+}
+
+/** In-flight inactivity warning — only meaningful while still active. */
+export function inactivityWarning(user: UserRow): { sent_at: string; days: number | null } | null {
+    if (!user.is_active) return null;
+    const w = disableBlock(user)?.warning;
+    if (!w?.sent_at) return null;
+    return { sent_at: w.sent_at, days: w.days_until_disable_at_send ?? null };
+}
+
+// ── Presence ──────────────────────────────────────────────────────────
+
+/** Online if `last_activity` is within 5 minutes (UserView.isOnline). */
+export function isOnline(user: UserRow): boolean {
+    const ms = toMs(user.last_activity);
+    if (ms == null) return false;
+    return Date.now() - ms < 5 * 60 * 1000;
+}
+
+/** Superuser / Staff / User — `is_staff` is in no live graph, so "Staff" is
+ *  derived from held permissions (any grant ⇒ staff-equivalent tier). */
+export function accountType(user: UserRow): string {
+    if (user.is_superuser) return 'Superuser';
+    const grants = Object.values(user.permissions ?? {}).filter((v) => v === true || v === 1);
+    return grants.length > 0 ? 'Staff' : 'User';
+}
+
+// ── Tone maps ─────────────────────────────────────────────────────────
+
+export const LOG_LEVEL_TONE: Record<string, Tone> = {
+    error: 'danger',
+    critical: 'danger',
+    warning: 'warning',
+    warn: 'warning',
+    info: 'info',
+};
+
+export const LOG_LEVEL_ICON: Record<string, string> = {
+    error: 'bi-shield-x',
+    critical: 'bi-shield-x',
+    warning: 'bi-exclamation-triangle',
+    warn: 'bi-exclamation-triangle',
+    info: 'bi-pencil-square',
+};
+
+// `LOGIN_TONE` / `loginTone(event_type)` were DELETED in #1291. They keyed on
+// a field `UserLoginEvent` has never had, so every dot fell through to muted;
+// their one consumer (LoginsSection) now uses `loginRiskTone(row)` from
+// admin/security/devices/models, which reads `is_new_country` /
+// `is_new_region` — fields the wire actually sends.
+
+export const PROVIDER_ICONS: Record<string, string> = {
+    google: 'bi-google',
+    github: 'bi-github',
+    microsoft: 'bi-microsoft',
+    apple: 'bi-apple',
+    facebook: 'bi-facebook',
+    twitter: 'bi-twitter-x',
+    linkedin: 'bi-linkedin',
+};
+
+export function providerIcon(provider: string | null | undefined): string {
+    return PROVIDER_ICONS[String(provider ?? '').toLowerCase()] ?? 'bi-link-45deg';
+}
+
+// ── Admin tier ────────────────────────────────────────────────────────
+
+/**
+ * System-pinned User mutation tier. Active-member grants cannot satisfy it;
+ * superusers retain their normal override. Gates credential writes,
+ * force-verify, the active toggle, and the destructive kebab items.
+ */
+export function useAdminCaller(): boolean {
+    return useCan(USER_MANAGE_PERMISSIONS).can;
+}
+
+// ── Cross-record nav ──────────────────────────────────────────────────
+
+/** Invoke the consuming app's optional Group-detail seam. */
+export function openGroupDetail(id: number, onOpenGroup?: (groupId: number) => void) {
+    onOpenGroup?.(id);
+}
+
+// ── Time helpers ──────────────────────────────────────────────────────
+
+/** Any stored temporal shape → ms for merge-feed sorting (UserView._toMs).
+ *  Delegates to the toolkit's sniffer so epoch seconds, epoch millis,
+ *  numeric strings and ISO all sort against each other correctly. */
+export function toMs(value: number | string | null | undefined): number | null {
+    return dateFns.detectTemporal(value)?.ms ?? null;
+}
+
+/** Day-relative header label: Today / Yesterday / Mon, Jun 3. */
+export function dayLabel(value: number | string | null | undefined): string {
+    const ms = toMs(value);
+    if (ms == null) return 'Unknown date';
+    const d = new Date(ms);
+    const today = new Date();
+    const startOf = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+    const diffDays = Math.round((startOf(today) - startOf(d)) / 864e5);
+    if (diffDays === 0) return 'Today';
+    if (diffDays === 1) return 'Yesterday';
+    return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+}
+
+/**
+ * groupByDay over already-paged rows (web-mojo groupByDay('created') on the
+ * section ListViews): consecutive rows sharing a calendar day render under
+ * one header. Grouping is display-only — order stays the server's.
+ */
+export function groupRowsByDay<T>(rows: T[], created: (row: T) => number | string | null | undefined): { label: string; rows: T[] }[] {
+    const out: { label: string; rows: T[] }[] = [];
+    for (const row of rows) {
+        const label = dayLabel(created(row));
+        const last = out[out.length - 1];
+        if (last && last.label === label) last.rows.push(row);
+        else out.push({ label, rows: [row] });
+    }
+    return out;
+}
+
+// ── Section list state (server search + pages) ────────────────────────
+
+export interface SectionListState {
+    /** Wire params: search + start/size (server-driven, rule 1). */
+    params: Params;
+    search: string;
+    setSearch: (next: string) => void;
+    page: number;
+    setPage: (next: number) => void;
+    pageSize: number;
+}
+
+/**
+ * ListView-parity list state: pageSize 5, numbered paging via start/size,
+ * search resets to page 1. All of it lands on the wire — nothing filters
+ * client-side.
+ */
+export function useSectionList(pageSize = 5, extra?: Params): SectionListState {
+    const [search, setSearchRaw] = useState('');
+    const [page, setPage] = useState(1);
+    const params: Params = {
+        ...extra,
+        start: (page - 1) * pageSize,
+        size: pageSize,
+    };
+    if (search) params.search = search;
+    return {
+        params,
+        search,
+        setSearch: (next) => { setSearchRaw(next); setPage(1); },
+        page,
+        setPage,
+        pageSize,
+    };
+}
+
+/** The search box the section lists share. */
+export function SectionSearch({ state, placeholder }: { state: SectionListState; placeholder: string }) {
+    return (
+        <input
+            className="input us-search"
+            type="search"
+            placeholder={placeholder}
+            value={state.search}
+            onChange={(e) => state.setSearch(e.target.value)}
+        />
+    );
+}
+
+/** Compact pager: ‹ page/pages › + "n of count" readout. */
+export function Pager({ state, count }: { state: SectionListState; count: number }) {
+    const pages = Math.max(1, Math.ceil(count / state.pageSize));
+    if (pages <= 1) return null;
+    return (
+        <div className="us-pager">
+            <button
+                className="btn btn-compact"
+                disabled={state.page <= 1}
+                onClick={() => state.setPage(state.page - 1)}
+                aria-label="Previous page"
+            >
+                <i className="bi bi-chevron-left" />
+            </button>
+            <span className="dim">{state.page} / {pages}</span>
+            <button
+                className="btn btn-compact"
+                disabled={state.page >= pages}
+                onClick={() => state.setPage(state.page + 1)}
+                aria-label="Next page"
+            >
+                <i className="bi bi-chevron-right" />
+            </button>
+            <span className="dim us-pager-count">{count} total</span>
+        </div>
+    );
+}
+
+// ── Section tabs (TabView port for in-section tab rows) ───────────────
+
+export function SectionTabs({ tabs, active, onSelect }: {
+    tabs: { key: string; label: string; badge?: ReactNode }[];
+    active: string;
+    onSelect: (key: string) => void;
+}) {
+    return (
+        <div className="us-tabs" role="tablist">
+            {tabs.map((t) => (
+                <button
+                    key={t.key}
+                    type="button"
+                    role="tab"
+                    aria-selected={t.key === active}
+                    className={`us-tab${t.key === active ? ' us-tab-active' : ''}`}
+                    onClick={() => onSelect(t.key)}
+                >
+                    {t.label}
+                    {t.badge != null && t.badge !== 0 && <span className="us-tab-badge">{t.badge}</span>}
+                </button>
+            ))}
+        </div>
+    );
+}
+
+/** Relative "last seen" that reads day-relative for device rows. */
+export function lastSeenLabel(value: number | null | undefined): string {
+    return fmt.relative(value ?? null, 'never');
+}

package/src/admin/incidents/EventDetail.tsx

@@ -0,0 +1,43 @@
+import { DetailView, Eyebrow, FlatRow, KnownFieldsCard, StatusPanel, fmt } from '../../ui';
+import { EvidenceCard, INCIDENT_METADATA_FIELDS, RequestResponseForensics, TraceForensics, first, metadataOf } from './forensics';
+import { showIncidentDetail, useEventDetail } from './models';
+
+function incidentId(value: unknown): number | null {
+    if (typeof value === 'number') return value;
+    if (value && typeof value === 'object' && typeof (value as { id?: unknown }).id === 'number') return (value as { id: number }).id;
+    return null;
+}
+export function EventDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const query = useEventDetail(id);
+    if (query.isPending) return <div className="modal-pad dim">Loading event…</div>;
+    if (!query.data || query.error) return <div className="modal-pad text-bad">{query.error?.message ?? 'Event not found'}</div>;
+    const event = query.data;
+    const metadata = metadataOf(event);
+    const linkedIncident = incidentId(event.incident);
+    const trace = first(metadata, 'stack_trace', 'traceback');
+    const hasOssec = event.category.startsWith('ossec') || metadata.alert_id != null || metadata.logfile != null;
+    const hasBouncer = metadata.decision != null || metadata.muid != null || metadata.triggered_signals != null;
+    const hasPermissions = metadata.permission_keys != null || metadata.perms != null || metadata.auth_result != null;
+    return <DetailView
+        icon="bi-activity"
+        title={event.title || `Event #${event.id}`}
+        subtitle={`Event #${event.id} · ${fmt.datetime(event.created)}`}
+        chips={[{ text: `L${event.level}`, tone: event.level >= 8 ? 'danger' : event.level >= 4 ? 'warning' : 'muted' }, { text: event.scope, tone: 'muted' }, { text: event.category, tone: 'muted' }]}
+        sections={[
+            { key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => <>
+                <StatusPanel tone={event.level >= 8 ? 'danger' : event.level >= 4 ? 'warning' : 'info'} state={`LEVEL ${event.level}`} headline={event.details || event.title || 'No event details'} meta={`${event.category} · ${event.scope}`} actions={linkedIncident ? <button className="btn btn-compact" onClick={() => showIncidentDetail(linkedIncident)}>Open incident</button> : null} />
+                <FlatRow label="Model">{event.model_name ? `${event.model_name} #${event.model_id ?? '—'}` : '—'}</FlatRow>
+                <FlatRow label="Group ID">{event.group_id ?? 'Global'}</FlatRow>
+            </> },
+            { key: 'source', label: 'Source', icon: 'bi-globe2', render: () => <><Eyebrow>Source and network</Eyebrow><FlatRow label="Source IP"><code>{event.source_ip || '—'}</code></FlatRow><FlatRow label="Hostname"><code>{event.hostname || '—'}</code></FlatRow><FlatRow label="Country">{String(event.country_code || metadata.country_code || '—')}</FlatRow><FlatRow label="Server">{String(metadata.server ?? '—')}</FlatRow></> },
+            { key: 'request', label: 'Request', icon: 'bi-funnel', render: () => <RequestResponseForensics metadata={metadata} /> },
+            ...(trace ? [{ key: 'trace', label: 'Stack trace', icon: 'bi-code-square', render: () => <TraceForensics metadata={metadata} /> }] : []),
+            ...(hasOssec ? [{ key: 'ossec', label: 'OSSEC', icon: 'bi-shield-exclamation', render: () => <EvidenceCard metadata={metadata} /> }] : []),
+            ...(hasBouncer ? [{ key: 'bouncer', label: 'Bouncer', icon: 'bi-shield-shaded', render: () => <KnownFieldsCard data={metadata} showRaw={false} known={[{ key: 'decision', hideEmpty: true }, { key: 'risk_score', hideEmpty: true }, { key: 'page', hideEmpty: true }, { key: 'page_type', hideEmpty: true }, { key: 'muid', hideEmpty: true }, { key: 'duid', hideEmpty: true }, { key: 'triggered_signals', hideEmpty: true }]} /> }] : []),
+            ...(hasPermissions ? [{ key: 'permissions', label: 'Auth evidence', icon: 'bi-key', render: () => <KnownFieldsCard data={metadata} showRaw={false} known={[{ key: 'permission_keys', hideEmpty: true }, { key: 'perms', hideEmpty: true }, { key: 'auth_result', hideEmpty: true }, { key: 'user_email', hideEmpty: true }]} /> }] : []),
+            { key: 'metadata', label: 'Known fields', icon: 'bi-braces', render: () => <KnownFieldsCard data={metadata} known={[...INCIDENT_METADATA_FIELDS, { key: 'alert_id', hideEmpty: true }, { key: 'logfile', hideEmpty: true }, { key: 'error_code', hideEmpty: true }, { key: 'error_message', hideEmpty: true }]} showRaw={false} /> },
+        ]}
+        initialSection="overview"
+        onClose={onClose}
+    />;
+}

package/src/admin/incidents/EventsPage.tsx

@@ -0,0 +1,52 @@
+import { createSafeExporter } from '../../client';
+import { Badge, ModelTable, fmt, groupByDay, type Column, type FilterDef, type Tone } from '../../ui';
+import { EventModel, showEventDetail, type EventRow } from './models';
+import { sanitizeEventRow } from './sanitize';
+
+function levelTone(level: number): Tone { return level >= 8 ? 'danger' : level >= 4 ? 'warning' : 'muted'; }
+const EVENT_EXPORTER = createSafeExporter<EventRow>({
+    endpoint: EventModel.endpoint, filename: 'security-events', sanitizeRow: sanitizeEventRow,
+    fields: [
+        { key: 'id' }, { key: 'created' }, { key: 'level' }, { key: 'scope' }, { key: 'category' },
+        { key: 'title' }, { key: 'details' }, { key: 'source_ip' }, { key: 'hostname' },
+        { key: 'country_code' }, { key: 'model_name' }, { key: 'model_id' }, { key: 'group_id' },
+        { key: 'server', value: (row) => row.metadata.server },
+    ],
+});
+const FILTERS: FilterDef[] = [
+    { key: 'created', label: 'Created', type: 'daterange' },
+    { key: 'level', label: 'Minimum level', type: 'number', lookup: 'gte' },
+    { key: 'level', label: 'Maximum level', type: 'number', lookup: 'lte' },
+    { key: 'scope', label: 'Scope', type: 'text' }, { key: 'category', label: 'Category', type: 'text' },
+    { key: 'category', label: 'Not category', type: 'text', lookup: 'not' },
+    { key: 'source_ip', label: 'Source IP', type: 'text' }, { key: 'model_name', label: 'Model name', type: 'text' },
+    { key: 'model_id', label: 'Model ID', type: 'number', lookup: 'exact' },
+    { key: 'metadata__server', label: 'Server', type: 'text' },
+    { key: 'metadata__http_url', label: 'URL contains', type: 'text' },
+    { key: 'metadata__http_path', label: 'Path contains', type: 'text' },
+    { key: 'metadata__http_query_string', label: 'Query contains', type: 'text' },
+    { key: 'metadata__http_status', label: 'HTTP status', type: 'number', lookup: 'exact' },
+    { key: 'metadata__http_user_agent', label: 'User agent contains', type: 'text' },
+];
+
+export function EventsPage() {
+    const grouping = groupByDay<EventRow>('created');
+    const columns: Column<EventRow>[] = [
+        { key: 'created', label: 'Created', sortable: true, render: (row) => fmt.datetime(row.created) },
+        { key: 'level', label: 'Level', sortable: false, align: 'center', render: (row) => <Badge tone={levelTone(row.level)}>L{row.level}</Badge> },
+        { key: 'scope', label: 'Scope', sortable: false }, { key: 'category', label: 'Category', sortable: false, render: (row) => <code>{row.category}</code> },
+        { key: 'title', label: 'Details', sortable: false, hideable: false, render: (row) => <span title={row.details ?? undefined}>{fmt.truncate(row.title || row.details || 'No details', 80)}</span> },
+        { key: 'source_ip', label: 'Source IP', sortable: false, render: (row) => <code>{row.source_ip || '—'}</code> },
+        { key: 'metadata__server', label: 'Server', sortable: false, render: (row) => String(row.metadata.server ?? row.hostname ?? '—') },
+    ];
+    return <ModelTable
+        model={EventModel} title="Events" eyebrow="Security operations"
+        columns={columns} filters={FILTERS} searchable searchPlaceholder="Search event details"
+        defaultParams={{ sort: '-created', category__not: 'ossec' }}
+        rowTone={(row) => row.level >= 8 ? 'danger' : row.level >= 4 ? 'warning' : null}
+        {...grouping} groupHeaderStyle="band"
+        exporter={EVENT_EXPORTER} exportFormats={['csv', 'json']}
+        columnChooser persistState persistKey="admin-security-events" autoRefresh={30}
+        onRowClick={(row) => showEventDetail(row.id)}
+    />;
+}