` in SVG/data cells. ## App Flow - **Unauthenticated user** 1. App loads from `index.html`. 2. `src/main.js` renders providers and `App`. 3. Store initializes GenMB auth readiness/session. 4. If no auth user, `LoginScreen` shows Google and magic-link options. 5. Successful auth transitions into the main Sentinel shell. - **Authenticated analyst** 1. Starts at `#/dashboard` or the current hash. 2. Uses `Sidebar` for RBAC-visible sections. 3. Uses `TopBar` for global search placeholder, tenant context, time range, theme, notifications, profile, and logout. 4. Opens incidents from list/dashboard via `#/incidents/:id`. 5. Reviews evidence/recommendations in `IncidentWorkspace`. - **Unauthorized route** - Direct navigation to a restricted route renders `AccessDenied` in `src/App.js` with a return link to dashboard. - Edge case: if a page is added to `Sidebar.js` but not to the route-permission map in `App.js`, direct hash access may bypass intended blocking. Update both. - **Unknown/deep route** - Manual routing parses hash strings. For incident deep links, preserve the `incidents/:id` pattern. - Unknown routes should fall back to a safe dashboard/not-found behavior in `App.js`; avoid throwing during render. - **Empty data** - Chart components already display “No database records available” empty states. Keep pages tolerant of empty arrays to prepare for real API-backed tenants. ## Conventions - **Markup:** Always import `html` from `../jsx.js` or `./jsx.js`; never use JSX syntax. - **Imports:** Continue ESM URL imports for React/lucide. Local imports must include `.js`. - **Components:** Page files default-export one React function. Shared UI primitives live in `src/components`. - **State:** Use `useStore()` for global session/RBAC/theme/time-range/mock datasets. Use local `React.useState` only for page-local UI state such as filters, active tabs, or form inputs. - **Data:** Extend `src/data/mockData.js` for reusable Sentinel records. Avoid duplicating mock arrays inside pages. - **Styling:** Prefer Tailwind utilities using existing CSS variables. Avoid hard-coded hex colors except when intentionally adding a new token in `styles/main.css`. - **Routing:** Add new routes in three places: 1. Import the page in `src/App.js`. 2. Add route rendering and route-permission logic in `src/App.js`. 3. Add the navigation item in `src/components/Sidebar.js` with the correct permission. - **Permissions:** Add or reuse permission codes in `src/state/store.js`; then apply them consistently in `Sidebar.js` and `App.js`. - **New page pattern:** ```js import React from 'https://esm.sh/react@19.2.0'; import { html } from '../jsx.js'; import { useStore } from '../state/store.js'; import { Card } from '../components/Cards.js'; export default function NewPage() { const { state } = useStore(); return html`<div className="space-y-6"> <div> <h1 className="text-3xl font-bold">Page Title</h1> <p className="text-[hsl(var(--muted-foreground))] mt-1">Sentinel-specific purpose.</p> </div> <${Card} title="Section">...</${Card}> </div>`; } ``` - **Auth gotchas:** Login assumes `window.genmb.auth` exists because `index.html` injects it. If developing locally outside GenMB, stub `window.genmb.auth` before rendering or add defensive checks in `App.js`. - **Future API migration:** Introduce a data service layer rather than fetching directly in pages. Keep page components consuming normalized arrays compatible with current mock field shapes. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra. </article></body></html>

# Sentinel DLP Enterprise-grade dark-mode Data Loss Prevention command center for real-time monitoring, investigation, governance, analytics, RBAC, and AI-assisted remediation. ## Masterplan - Give SOC analysts, DLP admins, policy managers, auditors, and security leaders a single-pane-of-glass for incidents, alerts, cases, policies, risky users, discovery assets, endpoints, device controls, health, audit, reporting, administration, and assistant-style recommendations. - Improve legacy Forcepoint-style workflows with dense summaries, direct hash routes, RBAC-aware navigation, and drill-down links like `#/incidents/DLP-8431`. - Keep the current app production-shaped but demo/mock-driven: Sentinel datasets live in `src/data/mockData.js`; session, RBAC, theme, sidebar, time-range, and auth state live in `src/state/store.js`. - Use real authentication through injected GenMB auth (`window.genmb.auth`) while Sentinel enterprise roles, permissions, tenant identity, and datasets remain mocked. - Preserve the no-build static architecture so the UI can be served directly and later wired to REST/WebSocket/PostgreSQL services without rewriting page components. ## Tech Stack & Architecture - **Runtime:** Static browser app launched from `index.html`; no bundler, JSX transform, TypeScript, SSR, or app-owned backend. - **Frontend:** React `19.2.0` and ReactDOM from `https://esm.sh`; all imports are browser ESM. - **Templating:** `src/jsx.js` binds HTM to React. **Do not write JSX.** Components return HTM: ```js html`<${Card} title="Incidents">...` ``` - **Styling:** Tailwind CDN from `index.html` plus app styles in `styles/main.css`. - Theme is tokenized with HSL CSS variables such as `--background`, `--foreground`, `--card`, `--muted`, `--primary`, `--secondary`, `--destructive`, `--warning`, `--success`, `--info`, `--border`, radius tokens, and shadow tokens. - Reuse existing utility classes: `glass-card`, `focus-ring`, `custom-scrollbar`, `animate-in`, and chart animation classes. - **Icons:** `lucide-react` from `https://esm.sh/lucide-react?deps=react@19.2.0`. - **Entry:** `src/main.js` mounts `` into `#root` and wraps it in `Providers` from `src/mainProviders.js`; `Providers` currently injects only `StoreProvider`. - **Routing:** Manual hash routing in `src/App.js`; route state is derived from `window.location.hash`. - `#/dashboard` → `src/pages/Dashboard.js` - `#/incidents` → `src/pages/Incidents.js` - `#/incidents/:id` → `src/pages/IncidentWorkspace.js` - `#/alerts` → `src/pages/Alerts.js` - `#/cases` → `src/pages/Cases.js` - `#/policies` → `src/pages/Policies.js` - `#/users` → `src/pages/Users.js` - `#/discovery` → `src/pages/Discovery.js` - `#/endpoints` → `src/pages/Endpoints.js` - `#/devices` → `src/pages/DeviceControl.js` - `#/health` → `src/pages/Health.js` - `#/audit` → `src/pages/Audit.js` - `#/reports` → `src/pages/Analytics.js` - `#/administration` → `src/pages/Administration.js` - **Layout:** `src/App.js` renders one of three shells: - `LoginScreen` when GenMB auth has no user. - `AccessDenied` when authenticated user lacks route permission. - Main authenticated shell with `src/components/Sidebar.js`, `src/components/TopBar.js`, and current page. - **State management:** `src/state/store.js` exposes `StoreProvider` and `useStore()` returning `{ state, dispatch, hasPermission }`. - Global state includes GenMB auth user/messages, Sentinel session identity, tenant, role, permissions, theme, time range, collapsed sidebar state, mock datasets, and database sync state. - **Data source:** `src/data/mockData.js` exports all Sentinel demo data and aggregations: incidents, alerts, cases, discovery assets, users, policies, endpoints, devices/platform metrics, audit/admin/reporting data, and assistant recommendations. - Do not create large page-local seed arrays. Extend `mockData.js` and consume via store state or explicit imports. - **Charts:** `src/components/Charts.js` provides dependency-free SVG/CSS charts: `BarChart`, `DonutChart`, `LineChart`, and `Heatmap`. Empty states intentionally say “No database records available” to fit future DB-backed behavior. - **External auth integration:** `index.html` injects GenMB auth SDK. The app calls: - `window.genmb.auth.ready()` - `window.genmb.auth.signIn()` - `window.genmb.auth.sendMagicLink(email)` - `window.genmb.auth.signOut()` - `window.genmb.auth.getUser()` - `window.genmb.auth.onAuthStateChange(callback)` - **Backend/API surface:** No app-owned API exists yet. GenMB auth internally calls `/api/auth/google/*` and `/api/auth/email/send`. Future Sentinel API should map to the database tables listed below without changing route/component boundaries. ## File Structure ```text index.html Tailwind CDN, app stylesheet, root node, injected GenMB auth SDK. styles/main.css Sentinel theme tokens, dark/light mode variables, glass cards, focus rings, animations. src/main.js ReactDOM entry; renders App inside Providers. src/mainProviders.js Provider composition; currently StoreProvider only. src/jsx.js HTM binding; required for all component markup. src/App.js Auth gate, access-denied view, hash router, authenticated layout shell. src/state/store.js Global reducer/store, auth/session/RBAC/theme/sidebar/time-range/data state. src/data/mockData.js Canonical mock datasets and dashboard/admin/report/assistant data. src/components/Cards.js Shared Card, SeverityBadge, StatusBadge, Metric UI primitives. src/components/Charts.js Dependency-free BarChart, DonutChart, LineChart, Heatmap. src/components/Sidebar.js Collapsible RBAC-aware primary navigation and active-route highlighting. src/components/TopBar.js Search field, tenant badge, time-range selector, theme toggle, profile, sign-out. src/pages/Dashboard.js Executive dashboard widgets, charts, recent critical incidents, risk heatmap. src/pages/Incidents.js Filterable incident table/list and row navigation into investigation workspace. src/pages/IncidentWorkspace.js Incident drill-down: timeline, evidence/content, related activity, AI recommendations. src/pages/Alerts.js Prioritized alert center, alert stats, policy tuning insight. src/pages/Cases.js Case management overview for grouped investigations. src/pages/Policies.js Policy inventory, templates/modes/rules/actions, simulation-oriented policy UX. src/pages/Users.js User risk analytics and behavioral/user drill-down summaries. src/pages/Discovery.js Data discovery asset inventory and classification/match status. src/pages/Endpoints.js Endpoint agent status, ownership, OS, USB/upload activity, policy posture. src/pages/DeviceControl.js Device/USB control visibility and enforcement-oriented device analytics. src/pages/Health.js Platform/agent/system health metrics for DLP operations. src/pages/Audit.js Audit and compliance event visibility. src/pages/Analytics.js Reports, analytics, exports, scheduled/trend-oriented reporting UI. src/pages/Administration.js RBAC/admin/system settings surfaces. CLAUDE.md This project document; keep synchronized with implementation. ``` ## Key Features - **Authentication** - Login screen in `src/App.js` supports Google sign-in and email magic link using `window.genmb.auth`. - Auth errors/success messages are stored through `src/state/store.js` dispatch actions. - Sign-out is in `src/components/TopBar.js`; it calls `window.genmb.auth.signOut()`, clears GenMB RBAC role via `window.genmb.rbac.clearRole()`, then dispatches `CLEAR_AUTH`. - Gotcha: `window.genmb.rbac` is assumed to exist in `TopBar.js`; if running outside GenMB, guard this call or provide a stub. - **RBAC-aware navigation and access** - `src/components/Sidebar.js` filters nav entries with `hasPermission(permission)`. - `src/App.js` also blocks direct hash routes with `AccessDenied`; do not rely only on hiding sidebar links. - Current permission codes include patterns such as `incidents:read`, `alerts:read`, `policies:read`, `users:read`, `discovery:read`, `endpoints:read`, `reports:read`, `audit:read`, and `admin:manage`. - **Dashboard** - `src/pages/Dashboard.js` should remain the executive landing surface. - Uses shared charts from `src/components/Charts.js` and metrics/cards from `src/components/Cards.js`. - Required widgets: incidents by severity/action, top channels, top violated policies, top risky users, data movement trends, recent critical incidents, and user/channel heatmap. - **Incidents and investigation** - Incident list uses data from `state.incidents`/`mockData.js`. - Incident IDs are human-readable strings such as `DLP-8431`; keep these stable because deep links use `#/incidents/:id`. - `src/pages/IncidentWorkspace.js` is the drill-down surface for timeline, evidence/content snippets, risk score, related incidents, and AI-style recommended actions. - Incident model currently includes: `id`, `user`, `source`, `destination`, `policy`, `severity`, `channel`, `action`, `timestamp`, `status`, `risk`, `file`, `content`. - **Alerts and cases** - `src/pages/Alerts.js` shows behavioral anomalies and policy triggers with severity badges and tuning guidance. - `src/pages/Cases.js` groups related incidents into investigation cases. - **Policy management** - `src/pages/Policies.js` uses policy records with template, enforcement mode, rules, matches, action, confidence, version, and last-modified values. - Preserve simulation vs enforced modes; simulation is a key DLP workflow and should not be collapsed into a generic status. - **Users, endpoints, devices, discovery** - `src/pages/Users.js` centers on risk score, trend, incident count, department, location, and behavioral analytics. - `src/pages/Endpoints.js` tracks host, assigned user, OS, agent status, USB/upload activity, and applied policy. - `src/pages/DeviceControl.js` covers device/USB control use cases. - `src/pages/Discovery.js` covers scanned assets, classification, and match counts. - **Analytics, audit, health, administration** - `src/pages/Analytics.js` represents reports, exports, schedules, and trend analysis. - `src/pages/Audit.js` surfaces compliance/audit events. - `src/pages/Health.js` covers DLP platform and agent operational health. - `src/pages/Administration.js` is admin/RBAC/settings oriented and should require `admin:manage`. - **Target database model** - Future persistence is expected to map to these entities: users, roles, permissions, rolePermissions, userRoles, navigationItems, policyCategories, dataClassifications, policies, policyRules, policyActions, endpoints, channels, activities, activityClassifications, incidents, incidentEvidence, incidentComments, incidentStatusHistory, userRiskSnapshots, riskFactors, userRiskFactorScores, reportDefinitions, reportRuns, savedViews, notificationPreferences, aiConversations, aiMessages, auditEvents, and systemSettings. - Keep frontend field names close to this model when replacing mocks; for display-only mock aliases like `user` or `risk`, normalize at API boundary rather than scattering adapters across pages. ## Design Guidelines - **Visual style:** Dark-mode-first enterprise SOC UI with glass cards, subtle borders, compact spacing, and high information density without heavy chrome. - **Color semantics:** - Critical/destructive: `hsl(var(--destructive))` - High/warning: `hsl(var(--warning))` - Medium/info: `hsl(var(--info))` - Low/success: `hsl(var(--success))` - Primary action/accent: `hsl(var(--primary))` - Secondary chart/accent: `hsl(var(--secondary))` - **Typography:** Tailwind utility typography; page titles are typically `text-3xl font-bold`, small metadata uses muted foreground and uppercase/tracking where appropriate. - **Cards:** Use `glass-card rounded-[var(--radius-lg)]`; prefer shared `Card` unless a page needs a custom header layout. - **Badges:** Use `SeverityBadge` and `StatusBadge` from `src/components/Cards.js` to keep severity/status colors consistent. - **Charts:** Use existing `Charts.js` components; do not add charting libraries unless the static/no-build constraint is intentionally changed. - **Responsive behavior:** Desktop-first. Sidebar is fixed and hidden on small screens (`hidden md:flex`); top bar stacks vertically on small screens. Main content must remain usable with overflow-x tables where needed. - **Interaction style:** Smooth transitions, hover elevation/translate on cards, visible `focus-ring`, tooltip via native `` in SVG/data cells. ## App Flow - **Unauthenticated user** 1. App loads from `index.html`. 2. `src/main.js` renders providers and `App`. 3. Store initializes GenMB auth readiness/session. 4. If no auth user, `LoginScreen` shows Google and magic-link options. 5. Successful auth transitions into the main Sentinel shell. - **Authenticated analyst** 1. Starts at `#/dashboard` or the current hash. 2. Uses `Sidebar` for RBAC-visible sections. 3. Uses `TopBar` for global search placeholder, tenant context, time range, theme, notifications, profile, and logout. 4. Opens incidents from list/dashboard via `#/incidents/:id`. 5. Reviews evidence/recommendations in `IncidentWorkspace`. - **Unauthorized route** - Direct navigation to a restricted route renders `AccessDenied` in `src/App.js` with a return link to dashboard. - Edge case: if a page is added to `Sidebar.js` but not to the route-permission map in `App.js`, direct hash access may bypass intended blocking. Update both. - **Unknown/deep route** - Manual routing parses hash strings. For incident deep links, preserve the `incidents/:id` pattern. - Unknown routes should fall back to a safe dashboard/not-found behavior in `App.js`; avoid throwing during render. - **Empty data** - Chart components already display “No database records available” empty states. Keep pages tolerant of empty arrays to prepare for real API-backed tenants. ## Conventions - **Markup:** Always import `html` from `../jsx.js` or `./jsx.js`; never use JSX syntax. - **Imports:** Continue ESM URL imports for React/lucide. Local imports must include `.js`. - **Components:** Page files default-export one React function. Shared UI primitives live in `src/components`. - **State:** Use `useStore()` for global session/RBAC/theme/time-range/mock datasets. Use local `React.useState` only for page-local UI state such as filters, active tabs, or form inputs. - **Data:** Extend `src/data/mockData.js` for reusable Sentinel records. Avoid duplicating mock arrays inside pages. - **Styling:** Prefer Tailwind utilities using existing CSS variables. Avoid hard-coded hex colors except when intentionally adding a new token in `styles/main.css`. - **Routing:** Add new routes in three places: 1. Import the page in `src/App.js`. 2. Add route rendering and route-permission logic in `src/App.js`. 3. Add the navigation item in `src/components/Sidebar.js` with the correct permission. - **Permissions:** Add or reuse permission codes in `src/state/store.js`; then apply them consistently in `Sidebar.js` and `App.js`. - **New page pattern:** ```js import React from 'https://esm.sh/react@19.2.0'; import { html } from '../jsx.js'; import { useStore } from '../state/store.js'; import { Card } from '../components/Cards.js'; export default function NewPage() { const { state } = useStore(); return html`<div className="space-y-6"> <div> <h1 className="text-3xl font-bold">Page Title</h1> <p className="text-[hsl(var(--muted-foreground))] mt-1">Sentinel-specific purpose.</p> </div> <${Card} title="Section">...</${Card}> </div>`; } ``` - **Auth gotchas:** Login assumes `window.genmb.auth` exists because `index.html` injects it. If developing locally outside GenMB, stub `window.genmb.auth` before rendering or add defensive checks in `App.js`. - **Future API migration:** Introduce a data service layer rather than fetching directly in pages. Keep page components consuming normalized arrays compatible with current mock field shapes. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra. </article></body></html>