portal-mojo 0.2.2 → 0.2.3

package/src/admin/domains/observability.ts

@@ -9,7 +9,7 @@ import { SECURITY_VIEW_PERMS } from '../security-permissions';
 
 export const ADMIN_DASHBOARD_PERMISSIONS = [...new Set([...DASHBOARD_METRIC_PERMISSIONS, ...SECURITY_VIEW_PERMS, ...JOBS_VIEW_PERMS, ...EMAIL_ADMIN_PERMISSIONS, ...LOGIN_SUMMARY_PERMS])];
 export const DASHBOARD_ADMIN_SECTION: AdminSection = {
-    id: 'dashboard', basePath: '', title: 'Overview', icon: 'bi-grid-1x2', navigationGroup: 'overview', permissions: ADMIN_DASHBOARD_PERMISSIONS,
+    id: 'dashboard', basePath: '', title: 'Dashboard', icon: 'bi-grid-1x2', navigationGroup: null, permissions: ADMIN_DASHBOARD_PERMISSIONS,
     routes: [{ path: '', label: 'Dashboard', loadComponent: () => import('../dashboard/AdminDashboardPage').then(({ AdminDashboardPage }) => ({ default: AdminDashboardPage })), permissions: ADMIN_DASHBOARD_PERMISSIONS, fallbackToFirstVisible: true }],
 };
 export const MONITORING_ADMIN_SECTION: AdminSection = {

package/src/admin/identity/users/UserDetail.tsx

@@ -23,34 +23,49 @@
 import { useSyncExternalStore } from 'react';
 import { useCan, useMe } from '../../../client/runtime';
 import {
-    DetailView, getFormTabs, subscribeFormTabs, fmt, modal,
-    type Chip, type DetailMenuEntry,
+    DetailView,
+    fmt,
+    getFormTabs,
+    modal,
+    subscribeFormTabs,
+    type Chip,
+    type DetailMenuEntry,
 } from '../../../ui';
+import { MEMBER_READ_PERMISSIONS } from '../members';
 import {
-    USER_DEVICE_PERMISSIONS, USER_EVENT_PERMISSIONS, USER_LOGIN_PERMISSIONS,
-    USER_LOG_PERMISSIONS, USER_MANAGE_PERMISSIONS, USER_PUSH_DEVICE_PERMISSIONS,
-    UserModel, type UserRow,
+    USER_DEVICE_PERMISSIONS,
+    USER_EVENT_PERMISSIONS,
+    USER_LOGIN_PERMISSIONS,
+    USER_LOG_PERMISSIONS,
+    USER_MANAGE_PERMISSIONS,
+    USER_PUSH_DEVICE_PERMISSIONS,
+    UserModel,
+    type UserRow,
 } from './models';
-import { MEMBER_READ_PERMISSIONS } from '../members';
 import { useUserAdminActions } from './sections/actions';
-import { useSharedUserQueries } from './sections/queries';
-import {
-    accountType, inactivityWarning, isAnonymized, isOnline, statusBadge, useAdminCaller,
-} from './sections/shared';
-import { USER_APP_PERMS_TABSET } from './sections/permission-catalog';
-import { OverviewSection } from './sections/OverviewSection';
-import { ProfileSection } from './sections/ProfileSection';
-import { PersonalSection } from './sections/PersonalSection';
-import { SecuritySection } from './sections/SecuritySection';
-import { OAuthSection } from './sections/OAuthSection';
-import { GroupsSection } from './sections/GroupsSection';
-import { AppPermsSection, SysPermsSection } from './sections/PermissionsSection';
 import { ApiKeysSection } from './sections/ApiKeysSection';
+import { AuditSection } from './sections/AuditSection';
 import { DevicesSection } from './sections/DevicesSection';
+import { GroupsSection } from './sections/GroupsSection';
 import { LoginsSection } from './sections/LoginsSection';
-import { AuditSection } from './sections/AuditSection';
-import { NotificationsSection } from './sections/NotificationsSection';
 import { UserMetadataSection } from './sections/MetadataPanel';
+import { NotificationsSection } from './sections/NotificationsSection';
+import { OAuthSection } from './sections/OAuthSection';
+import { OverviewSection } from './sections/OverviewSection';
+import { USER_APP_PERMS_TABSET } from './sections/permission-catalog';
+import { AppPermsSection, SysPermsSection } from './sections/PermissionsSection';
+import { PersonalSection } from './sections/PersonalSection';
+import { ProfileSection } from './sections/ProfileSection';
+import { useSharedUserQueries } from './sections/queries';
+import { SecuritySection } from './sections/SecuritySection';
+import {
+    accountType,
+    inactivityWarning,
+    isAnonymized,
+    isOnline,
+    statusBadge,
+    useAdminCaller,
+} from './sections/shared';
 
 export interface UserDetailProps {
     id: number;
@@ -144,6 +159,7 @@ function UserDetailLoaded({ user, isAdmin, hasAppPerms, onClose, onOpenGroup }:
     // ── Kebab (UserView contextItems at full scope) ───────────────────
     const ADMIN = USER_MANAGE_PERMISSIONS;
     const MENU: DetailMenuEntry<UserRow>[] = [
+        { label: user.is_active ? 'Deactivate' : 'Reactivate', icon: 'bi-power', permissions: ADMIN, when: u => Boolean(u && !isAnonymized(u)), onSelect: () => void (user.is_active ? actions.disableUser() : actions.reactivateUser()) },
         { label: 'Edit user', icon: 'bi-pencil', permissions: ADMIN, onSelect: () => void actions.editUser() },
         {
             label: 'Manage avatar…', icon: 'bi-image', permissions: ADMIN,

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

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react';
+import { useCan, useMe } from '../../../../client/runtime';
 // OAuth section — AdminConnectedSection port (read in full 2026-08-05):
 // the user's linked OAuth providers with admin unlink. The same list powers
 // the Profile card's "manage linked accounts" modal (source Phase 3 shared
@@ -6,23 +8,28 @@
 // Wire: GET /api/account/oauth_connection?user=<id> → rows
 // {id, provider, email, is_active, created} (default graph, measured in
 // django-mojo oauth.py); DELETE /api/account/oauth_connection/<id> unlinks.
-import { modal, toast, fmt, Eyebrow } from '../../../../ui';
-import { OAuthConnectionModel, type UserRow } from '../models';
+import { Eyebrow, fmt, modal, toast } from '../../../../ui';
+import { OAuthConnectionModel, USER_MANAGE_PERMISSIONS, type UserRow } from '../models';
 import { providerIcon } from './shared';
 
 export function OAuthConnectionList({ userId, canManage = true }: { userId: number; canManage?: boolean }) {
     const { data, isPending } = OAuthConnectionModel.useList({ user: userId, size: 25, sort: '-created' });
     const del = OAuthConnectionModel.useDelete();
+    const admin = useCan(USER_MANAGE_PERMISSIONS).can;
+    const me = useMe().data;
+    const allowed = (me?.id === userId || admin) && canManage;
+    const permission = useRef(allowed); permission.current = allowed;
+    useEffect(() => { permission.current = allowed; return () => { permission.current = false; }; }, [allowed]);
     const rows = data?.rows ?? [];
 
     const unlink = async (id: number, provider: string) => {
         const ok = await modal.confirm({
             title: 'Unlink account',
-            message: <>Unlink <b>{provider}</b> for this user?</>,
+            message: <>Unlink <b>{provider}</b> from user #{userId}? This removes the association only; reconnect through provider authorization. The provider account is retained.</>,
             confirmText: 'Unlink',
             danger: true,
         });
-        if (!ok) return;
+        if (!ok || !permission.current) return;
         try {
             await del.mutateAsync({ id });
             toast.success(`${provider} account unlinked`);
@@ -51,8 +58,8 @@ export function OAuthConnectionList({ userId, canManage = true }: { userId: numb
                             {c.email ?? <span className="dim-italic">no email</span>} · Connected {fmt.relative(c.created)}
                         </div>
                     </div>
-                    {canManage && <div className="us-row-actions">
-                        <button className="btn btn-compact us-danger" onClick={() => void unlink(c.id, c.provider)}>
+                    {allowed && <div className="us-row-actions">
+                        <button className="btn btn-compact us-danger" disabled={del.isPending} onClick={() => void unlink(c.id, c.provider)}>
                             <i className="bi bi-x-lg" /> Unlink
                         </button>
                     </div>}

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

@@ -9,16 +9,22 @@
 // surfaces via the error toast like any failure. auth/email/verify/send is
 // the public, admin-targetable verification sender (NOT the JWT-scoped
 // auth/verify/email/send).
-import { useEffect, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { mojoCall, withFreshAuth, type Field } from '../../../../client/runtime';
+import { useEffect, useRef, useState } from 'react';
+import { mojoCall, useCan, useMe, withFreshAuth, type Field } from '../../../../client/runtime';
 import {
-    Badge, ImageField, PasswordStrengthMeter, fmt, formModal, modal, toast,
+    Badge,
+    ImageField,
+    PasswordStrengthMeter,
+    fmt,
+    formModal,
+    modal,
+    toast,
     type FileFieldOwnerResult,
 } from '../../../../ui';
-import { PasskeyModel, UserModel, type UserRow } from '../models';
-import { openGroupDetail, useAdminCaller } from './shared';
+import { PasskeyModel, USER_MANAGE_PERMISSIONS, UserModel, type UserRow } from '../models';
 import { OAuthConnectionList } from './OAuthSection';
+import { openGroupDetail, useAdminCaller } from './shared';
 
 /** One-field prompt modal (the source's Modal.prompt pencils). */
 async function promptField(title: string, field: Field, initial: string): Promise<string | null> {
@@ -663,6 +669,10 @@ function AvatarModal({ user, onClose, onPendingChange }: { user: UserRow; onClos
  * friendly_name and is_enabled; delete is real (CAN_DELETE).
  */
 function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => void }) {
+    const admin = useCan(USER_MANAGE_PERMISSIONS).can;
+    const allowed = useMe().data?.id === userId || admin;
+    const permission = useRef(allowed); permission.current = allowed;
+    useEffect(() => { permission.current = allowed; return () => { permission.current = false; }; }, [allowed]);
     const { data, isPending } = PasskeyModel.useList({ user: userId, size: 25, sort: '-created' });
     const save = PasskeyModel.useSave();
     const del = PasskeyModel.useDelete();
@@ -679,7 +689,7 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
             initial: { friendly_name: current ?? '' },
         });
         const name = data?.friendly_name;
-        if (typeof name !== 'string' || !name.trim()) return;
+        if (!permission.current || typeof name !== 'string' || !name.trim()) return;
         try {
             await save.mutateAsync({ id, changes: { friendly_name: name.trim() } });
             toast.success('Passkey updated');
@@ -689,6 +699,7 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
     };
 
     const toggleEnabled = async (id: number, next: boolean) => {
+        if (!permission.current) return;
         try {
             await save.mutateAsync({ id, changes: { is_enabled: next } });
             toast.success(next ? 'Passkey enabled' : 'Passkey disabled');
@@ -700,11 +711,11 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
     const remove = async (id: number) => {
         const ok = await modal.confirm({
             title: 'Delete passkey',
-            message: 'Delete this passkey?',
+            message: `Remove ${rows.find(row => row.id === id)?.friendly_name || 'Unnamed passkey'} for ${rows.find(row => row.id === id)?.rp_id || 'unknown relying party'}, user #${userId}? Reenrollment is required to restore it. The physical device is not erased.`,
             confirmText: 'Delete',
             danger: true,
         });
-        if (!ok) return;
+        if (!ok || !permission.current) return;
         try {
             await del.mutateAsync({ id });
             toast.success('Passkey deleted');
@@ -735,7 +746,7 @@ function PasskeysModal({ userId, onClose }: { userId: number; onClose: () => voi
                             Created {fmt.date(p.created)} · Last used {fmt.relative(p.last_used, 'never')} · {p.sign_count} uses
                         </div>
                     </div>
-                    <div className="us-row-actions">
+                    <div className="us-row-actions" inert={!allowed || save.isPending || del.isPending}>
                         <button className="btn-icon btn-icon-sm" title="Rename" aria-label={`Rename ${p.friendly_name ?? 'passkey'}`} onClick={() => void rename(p.id, p.friendly_name)}>
                             <i className="bi bi-pencil" />
                         </button>

package/src/admin/incidents/EventDetail.tsx

@@ -1,18 +1,157 @@
-import { DetailView, Eyebrow, FlatRow, KnownFieldsCard, StatusPanel, fmt } from '../../ui';
+import { useQuery } from '@tanstack/react-query';
+import { mojoCall } from '../../client/runtime';
+import { DetailView, Eyebrow, FlatRow, JsonBlock, KnownFieldsCard, StatusPanel, fmt, type KnownField } from '../../ui';
 import { EvidenceCard, INCIDENT_METADATA_FIELDS, RequestResponseForensics, TraceForensics, first, metadataOf } from './forensics';
-import { showIncidentDetail, useEventDetail } from './models';
+import { sanitizeEventRow } from './sanitize';
+import { EventModel, showIncidentDetail, type EventRow } from './models';
+
+const MOJOSEC_SUMMARY_FIELDS: KnownField[] = [
+    { key: 'kind', label: 'Detection kind', hideEmpty: true },
+    { key: 'count', label: 'Occurrences', hideEmpty: true },
+    { key: 'event_id', label: 'Sensor event ID', hideEmpty: true },
+    { key: 'sensor_id', label: 'Sensor', hideEmpty: true },
+    { key: 'sensor_severity', label: 'Sensor severity', hideEmpty: true },
+    { key: 'effective_level', label: 'Effective level', hideEmpty: true },
+    { key: 'recommendation', label: 'Recommendation', hideEmpty: true },
+    { key: 'first_seen', label: 'First seen', format: 'datetime', hideEmpty: true },
+    { key: 'last_seen', label: 'Last seen', format: 'datetime', hideEmpty: true },
+    { key: 'protocol_version', label: 'Protocol version', hideEmpty: true },
+    { key: 'installation_key_id', label: 'Installation key ID', hideEmpty: true },
+    { key: 'sensor_policy_revision_sha256', label: 'Sensor policy revision', hideEmpty: true },
+    { key: 'expected_change', label: 'Expected change', hideEmpty: true },
+];
+
+const MOJOSEC_EVIDENCE_FIELDS: KnownField[] = [
+    { key: 'actor', label: 'Actor', hideEmpty: true },
+    { key: 'target_user', label: 'Target user', hideEmpty: true },
+    { key: 'user', label: 'User', hideEmpty: true },
+    { key: 'auth_method', label: 'Authentication method', hideEmpty: true },
+    { key: 'service', label: 'Service', hideEmpty: true },
+    { key: 'attribution', label: 'Attribution', hideEmpty: true },
+    { key: 'command', label: 'Command', hideEmpty: true },
+    { key: 'command_path', label: 'Command path', hideEmpty: true },
+    { key: 'command_family', label: 'Command family', hideEmpty: true },
+    { key: 'command_truncated', label: 'Command truncated', hideEmpty: true },
+    { key: 'command_path_truncated', label: 'Command path truncated', hideEmpty: true },
+    { key: 'cwd', label: 'Working directory', hideEmpty: true },
+    { key: 'cwd_truncated', label: 'Working directory truncated', hideEmpty: true },
+    { key: 'proof_status', label: 'Proof status', hideEmpty: true },
+    { key: 'producer_comm', label: 'Producer process', hideEmpty: true },
+    { key: 'producer_exe', label: 'Producer executable', hideEmpty: true },
+    { key: 'producer_pid', label: 'Producer PID', hideEmpty: true },
+    { key: 'producer_uid', label: 'Producer UID', hideEmpty: true },
+    { key: 'target_uid', label: 'Target UID', hideEmpty: true },
+    { key: 'opener_uid', label: 'Opener UID', hideEmpty: true },
+    { key: 'audit_session', label: 'Audit session', hideEmpty: true },
+    { key: 'audit_loginuid', label: 'Audit login UID', hideEmpty: true },
+    { key: 'tty', label: 'TTY', hideEmpty: true },
+    { key: 'boot_id', label: 'Boot ID', hideEmpty: true },
+    { key: 'monotonic', label: 'Monotonic timestamp', hideEmpty: true },
+    { key: 'systemd_unit', label: 'systemd unit', hideEmpty: true },
+    { key: 'cgroup', label: 'Control group', hideEmpty: true },
+    { key: 'selinux', label: 'SELinux context', hideEmpty: true },
+    { key: 'job_function', label: 'Job function', hideEmpty: true },
+    { key: 'origin_kind', label: 'Origin kind', hideEmpty: true },
+    { key: 'operation_id', label: 'Operation ID', hideEmpty: true },
+    { key: 'execution_id', label: 'Execution ID', hideEmpty: true },
+    { key: 'job_id', label: 'Job ID', hideEmpty: true },
+    { key: 'lineage_sha256', label: 'Lineage digest', hideEmpty: true },
+    { key: 'receipt_semantics', label: 'Receipt semantics', hideEmpty: true },
+    { key: 'ancestors', label: 'Process ancestry', hideEmpty: true },
+    { key: 'peer_ip', label: 'Peer IP', hideEmpty: true },
+    { key: 'method', label: 'HTTP method', hideEmpty: true },
+    { key: 'host', label: 'HTTP host', hideEmpty: true },
+    { key: 'status', label: 'HTTP status', hideEmpty: true },
+    { key: 'response_class', label: 'Response class', hideEmpty: true },
+    { key: 'resource_id', label: 'Resource ID', hideEmpty: true },
+    { key: 'edge_policy_version', label: 'Edge policy version', hideEmpty: true },
+    { key: 'path', label: 'Request path', hideEmpty: true },
+    { key: 'upstream_status', label: 'Upstream status', hideEmpty: true },
+    { key: 'request_id', label: 'Request ID', hideEmpty: true },
+    { key: 'scheme', label: 'Scheme', hideEmpty: true },
+    { key: 'protocol', label: 'Protocol', hideEmpty: true },
+    { key: 'tls_protocol', label: 'TLS protocol', hideEmpty: true },
+    { key: 'tls_cipher', label: 'TLS cipher', hideEmpty: true },
+    { key: 'remote_port', label: 'Remote port', hideEmpty: true },
+    { key: 'peer_port', label: 'Peer port', hideEmpty: true },
+    { key: 'server_port', label: 'Server port', hideEmpty: true },
+    { key: 'request_length', label: 'Request bytes', hideEmpty: true },
+    { key: 'response_bytes', label: 'Response bytes', hideEmpty: true },
+    { key: 'response_body_bytes', label: 'Response body bytes', hideEmpty: true },
+    { key: 'request_time_ms', label: 'Request time (ms)', hideEmpty: true },
+    { key: 'upstream_connect_time_ms', label: 'Upstream connect time (ms)', hideEmpty: true },
+    { key: 'upstream_header_time_ms', label: 'Upstream header time (ms)', hideEmpty: true },
+    { key: 'upstream_response_time_ms', label: 'Upstream response time (ms)', hideEmpty: true },
+    { key: 'upstream_response_length', label: 'Upstream response bytes', hideEmpty: true },
+    { key: 'upstream_bytes_received', label: 'Upstream bytes received', hideEmpty: true },
+    { key: 'upstream_bytes_sent', label: 'Upstream bytes sent', hideEmpty: true },
+    { key: 'referrer_origin', label: 'Referrer origin', hideEmpty: true },
+    { key: 'referrer', label: 'Referrer', hideEmpty: true },
+    { key: 'user_agent', label: 'User agent', hideEmpty: true },
+    { key: 'last_occurrence_sample', label: 'Last occurrence sample', hideEmpty: true },
+    { key: 'unit', label: 'Unit', hideEmpty: true },
+    { key: 'failure_kind', label: 'Failure kind', hideEmpty: true },
+];
+
+function record(value: unknown): Record<string, unknown> | null {
+    return value != null && typeof value === 'object' && !Array.isArray(value)
+        ? value as Record<string, unknown>
+        : null;
+}
+
+export function extractMojosecDetails(metadata: Record<string, unknown>): {
+    summary: Record<string, unknown>;
+    evidence: Record<string, unknown>;
+} | null {
+    const mojosec = record(metadata.mojosec);
+    if (!mojosec) return null;
+    const { evidence: rawEvidence, ...summary } = mojosec;
+    return { summary, evidence: record(rawEvidence) ?? {} };
+}
+
+export function MojosecEventSection({ details }: {
+    details: NonNullable<ReturnType<typeof extractMojosecDetails>>;
+}) {
+    return <>
+        <Eyebrow>Detection and sensor</Eyebrow>
+        <KnownFieldsCard data={details.summary} known={MOJOSEC_SUMMARY_FIELDS} showRaw={false} emptyText="No MojoSec detection summary was recorded." />
+        <Eyebrow>Validated evidence</Eyebrow>
+        <KnownFieldsCard data={details.evidence} known={MOJOSEC_EVIDENCE_FIELDS} showRaw={false} emptyText="No projected evidence was recorded." />
+    </>;
+}
+
+function displayValue(value: unknown): string {
+    if (value == null || value === '') return '—';
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return String(value);
+    try { return JSON.stringify(value); } catch { return String(value); }
+}
 
 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;
 }
+
+function prepareEventDetailRecord(rawEvent: EventRow): { rawEvent: EventRow; event: EventRow } {
+    return { rawEvent, event: sanitizeEventRow(rawEvent) };
+}
+
+/** Keep the authorized raw record isolated from every sanitized event cache. */
+function useRawEventDetail(id: number | null) {
+    return useQuery({
+        queryKey: [EventModel.endpoint, 'raw-one', id, { graph: 'detailed' }],
+        queryFn: async () => (await mojoCall(`${EventModel.endpoint}/${id!}`, { params: { graph: 'detailed' } })).data as EventRow,
+        enabled: id != null,
+    });
+}
+
 export function EventDetail({ id, onClose }: { id: number; onClose: () => void }) {
-    const query = useEventDetail(id);
+    const query = useRawEventDetail(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 { rawEvent, event } = prepareEventDetailRecord(query.data);
     const metadata = metadataOf(event);
+    const mojosec = extractMojosecDetails(metadata);
     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;
@@ -29,13 +168,16 @@ export function EventDetail({ id, onClose }: { id: number; onClose: () => void }
                 <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: '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>{event.geo_ip != null && <FlatRow label="GeoIP">{displayValue(event.geo_ip)}</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} /> }] : []),
+            ...(mojosec ? [{ key: 'mojosec', label: 'MojoSec', icon: 'bi-shield-lock', render: () => <MojosecEventSection details={mojosec} /> }] : []),
             ...(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} /> },
+            { divider: 'Raw' },
+            { key: 'raw', label: 'Raw data', icon: 'bi-filetype-json', render: () => <><Eyebrow>Complete API response</Eyebrow><p className="dim">The complete event record returned by Django, including all metadata.</p><JsonBlock value={rawEvent} label="Event API record" collapsible={false} /></> },
         ]}
         initialSection="overview"
         onClose={onClose}