spine-framework 0.3.145 → 0.4.0

package/.framework/src/pages/admin/RolesPage.tsx

@@ -1,22 +1,17 @@
+// CIL[BEGIN stable_id="~/.framework/src/pages/admin/RolesPage.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/pages/admin/RolesPage.tsx"]
+// CIL[DOC-MACRO purpose="Admin roles management page module: defines the Role interface and the RolesPage React component for listing, searching, filtering, and sorting roles."]
+// CIL[DOC-RESPONSIBILITY responsibility="Provide the top-level TypeScript module exports and role model shape consumed by the admin roles UI."]
+// CIL[DOC-CONTEXT module="admin" layer="pages" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts"]
+// CIL[DOC-CONTRACT inputs="module imports and role API response data" outputs="Role interface and RolesPage React component" errors="Network or API errors are surfaced by useApi hook" side_effects="none at module scope"]
+// CIL[DOC-MICRO logic_summary="Imports React, hooks, shared components, and utilities; exports Role type and RolesPage component for rendering the admin roles list." notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-AUDIENCE audience="admin-frontend"]
+
 
 
 
 
-// CIL[BEGIN chunk_id="rolespage_module_header_1783665503" type="module_header" identity="module_header" parent="none"]
-// CIL[DOC-MACRO purpose="Import dependencies and define Role interface for admin roles management"]
-// CIL[DOC-RESPONSIBILITY responsibility="Provide React imports, UI components, and Role type definition"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="React components and Role interface" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Imports React hooks, UI components, and defines Role data structure" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-AUDIENCE audience="developer"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
 import React, { useState } from 'react'
 import { Plus, ShieldCheck, CheckCircle, XCircle, Settings, FileText, Cog } from 'lucide-react';
 import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
@@ -27,6 +22,22 @@ import { formatDateTime } from '../../lib/utils'
 import { useApi } from '../../hooks/useApi'
 import { apiFetch } from '../../lib/api'
 
+
+// CIL[DOC-VECTOR type="context" content="purpose='Admin roles management page module: defines the Role interface and the RolesPage React component for listing, searching, filtering, and sorting roles.'; No verified external callers; imports: .framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/admin/AdminListPage.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/pages/admin/RolesPage.tsx:module_header:module_header"]
+// CIL[BEGIN stable_id="~/.framework/src/pages/admin/RolesPage.tsx:Role:interface" type="interface" identity="Role" parent="~/.framework/src/pages/admin/RolesPage.tsx"]
+// CIL[DOC-MACRO purpose="Define the shape of a role record for use in the admin roles list and related operations."]
+// CIL[DOC-RESPONSIBILITY responsibility="Declare the TypeScript interface for role objects returned by the roles API."]
+// CIL[DOC-CONTEXT module="admin" layer="types" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/RolesPage.tsx"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Role interface type definition" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Typed interface with required and optional fields representing a role, its permissions, app association, and audit timestamps." notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
 interface Role {
   id: string
   name: string
@@ -40,21 +51,22 @@ interface Role {
   created_at: string
   updated_at: string
 }
-// CIL[END chunk_id="rolespage_module_header_1783665503"]
-// CIL[BEGIN chunk_id="rolespage_rolespage_1783665503" type="function" identity="RolesPage" parent="none"]
-// CIL[DOC-MACRO purpose="Render the complete roles management page UI"]
-// CIL[DOC-RESPONSIBILITY responsibility="Display roles list with search, filters, stats, and table"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\"custom/apps/portal/pages/CoursesPage.tsx\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="AdminListPage JSX" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Renders AdminListPage with roles data, empty states, and table" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: custom/apps/cortex/pages/operations/OperationsDashboard.tsx, custom/apps/portal/pages/ContentPage.tsx, custom/apps/portal/pages/CoursesPage.tsx."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
+// CIL[DOC-VECTOR type="context" content="purpose='Define the shape of a role record for use in the admin roles list and related operations.'; No verified external callers; imports: .framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/admin/AdminListPage.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
 // CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
 // CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/pages/admin/RolesPage.tsx:Role:interface"]
+
+// CIL[BEGIN stable_id="~/.framework/src/pages/admin/RolesPage.tsx:RolesPage:component" type="component" identity="RolesPage" parent="~/.framework/src/pages/admin/RolesPage.tsx"]
+// CIL[DOC-MACRO purpose="Render the admin roles list page with search, filters, sorting, stats, and navigation to role detail."]
+// CIL[DOC-RESPONSIBILITY responsibility="Fetch and display roles; handle search, status/type filters, column sorting, row navigation, and summary statistics."]
+// CIL[DOC-CONTEXT module="admin" layer="pages" related_files=".framework/src/components/admin/AdminListPage.tsx,.framework/src/components/admin/SortableTableHeader.tsx,.framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/hooks/useApi.ts,.framework/src/lib/api.ts,.framework/src/lib/utils.ts,.framework/src/pages/admin/RolesPage.tsx"]
+// CIL[DOC-CONTRACT inputs="none (internal state and useApi fetch)" outputs="JSX admin list page for roles" errors="API fetch error passed to AdminListPage; boolean sort fallback for permissions" side_effects="Navigates to /spine-framework/admin/configs/roles/:id on row click; uses window.location.href"]
+// CIL[DOC-MICRO logic_summary="Uses useApi to load roles, applies search/status/type filters, sorts by selected column, computes stats cards, and renders an AdminListPage with a sortable table and clickable rows." notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.90" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
 export function RolesPage() {
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedStatus, setSelectedStatus] = useState('all')
@@ -87,20 +99,6 @@ export function RolesPage() {
   })
 
   
-  // CIL[BEGIN chunk_id="rolespage_getstatusbadge_1783665503" type="function" identity="getStatusBadge" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Generate status badge component based on role properties"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle getStatusBadge"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/layout/Sidebar.tsx\",\"custom/apps/portal/pages/ContentPage.tsx\",\"custom/apps/portal/pages/CoursesPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="JSX badge element" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Checks is_active and is_system flags to determine badge styling" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 4. Direct calls: 0. Related files: .framework/src/components/ui/dialog.tsx, .framework/src/components/layout/Sidebar.tsx, custom/apps/portal/pages/ContentPage.tsx, custom/apps/portal/pages/CoursesPage.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 4. Total affected: 4."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const getStatusBadge = (role: Role) => {
     if (!role.is_active) {
       return <span className="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-slate-100 text-slate-600">Inactive</span>
@@ -110,22 +108,7 @@ export function RolesPage() {
     }
     return <span className="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-blue-100 text-blue-700">Custom</span>
   }
-// CIL[END chunk_id="rolespage_getstatusbadge_1783665503"]
 
-// CIL[BEGIN chunk_id="rolespage_handlesort_1783665503" type="function" identity="handleSort" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Handle table column sorting with direction toggle"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle handleSort"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\".framework/functions/_shared/schema-utils.ts\",\".framework/src/components/ui/dialog.tsx\",\".framework/functions/_shared/principal.ts\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="state updates" errors="none" side_effects="Updates component state"]
-// CIL[DOC-MICRO logic_summary="Toggles direction if same key, sets new key and asc direction otherwise" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: .framework/functions/_shared/schema-utils.ts, .framework/src/components/ui/dialog.tsx, .framework/functions/_shared/principal.ts, .framework/src/pages/admin/TypeDetailPage.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const handleSort = (key: string) => {
     if (sortKey === key) {
       setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
@@ -134,41 +117,11 @@ export function RolesPage() {
       setSortDirection('asc')
     }
   }
-// CIL[END chunk_id="rolespage_handlesort_1783665503"]
 
-// CIL[BEGIN chunk_id="rolespage_handlerowclick_1783665503" type="function" identity="handleRowClick" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Navigate to role detail page when table row is clicked"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle handleRowClick"]
-// CIL[DOC-CONTEXT module="handleRowClick" layer="unknown" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="none" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Implements handleRowClick" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: unknown. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const handleRowClick = (role: Role) => {
     window.location.href = `/spine-framework/admin/configs/roles/${role.id}`
   }
-// CIL[END chunk_id="rolespage_handlerowclick_1783665503"]
 
-// CIL[BEGIN chunk_id="rolespage_sortedroles_1783665503" type="variable" identity="sortedRoles" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Sort filtered roles based on current sort key and direction"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle sortedRoles"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\"custom/apps/portal/pages/CoursesPage.tsx\",\".framework/src/components/ui/dialog.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="sorted array" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Handles string and boolean sorting with localeCompare" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, custom/apps/portal/pages/CoursesPage.tsx, .framework/src/components/ui/dialog.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const sortedRoles = [...(filteredRoles || [])].sort((a, b) => {
     let aValue: any = a[sortKey as keyof Role]
     let bValue: any = b[sortKey as keyof Role]
@@ -185,22 +138,7 @@ export function RolesPage() {
     
     return 0
   })
-// CIL[END chunk_id="rolespage_sortedroles_1783665503"]
 
-  // CIL[BEGIN chunk_id="rolespage_statcards_1783665503" type="variable" identity="statsCards" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Generate statistics cards for roles dashboard"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle statsCards"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="stats cards array" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Calculates total, active, system, and custom role counts" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const statsCards = [
     {
       title: 'Total Roles',
@@ -227,64 +165,19 @@ export function RolesPage() {
       iconColor: 'text-orange-500'
     }
   ]
-// CIL[END chunk_id="rolespage_statcards_1783665503"]
 
-// CIL[BEGIN chunk_id="rolespage_statusoptions_1783665503" type="variable" identity="statusOptions" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Define filter options for role status dropdown"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle statusOptions"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\".framework/functions/_shared/principal.ts\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="status options array" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Static array of status filter options" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: .framework/functions/_shared/principal.ts, .framework/src/pages/admin/IntegrationsPage.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const statusOptions = [
     { value: 'all', label: 'All Status' },
     { value: 'active', label: 'Active' },
     { value: 'inactive', label: 'Inactive' }
   ]
-// CIL[END chunk_id="rolespage_statusoptions_1783665503"]
 
-// CIL[BEGIN chunk_id="rolespage_typeoptions_1783665503" type="variable" identity="typeOptions" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Define filter options for role type dropdown"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle typeOptions"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\".framework/src/pages/admin/TypeDetailPage.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="type options array" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Static array of role type filter options" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/TypeDetailPage.tsx, .framework/functions/_shared/schema-utils.ts, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const typeOptions = [
     { value: 'all', label: 'All Types' },
     { value: 'system', label: 'System' },
     { value: 'custom', label: 'Custom' }
   ]
-// CIL[END chunk_id="rolespage_typeoptions_1783665503"]
 
-// CIL[BEGIN chunk_id="rolespage_filters_1783665503" type="variable" identity="filters" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Combine status and type filters for AdminListPage component"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle filters"]
-// CIL[DOC-CONTEXT module="RolesPage" layer="frontend-page" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/components/layout/Sidebar.tsx\",\"\\\"]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="filters array" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Maps filter options to AdminListPage filter format" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: frontend-page. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/TypeDetailPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/components/layout/Sidebar.tsx, \."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   const filters = [
     {
       label: 'Status',
@@ -299,22 +192,7 @@ export function RolesPage() {
       onChange: setSelectedType
     }
   ]
-// CIL[END chunk_id="rolespage_filters_1783665503"]
 
-  // CIL[BEGIN chunk_id="rolespage_return_1783665503" type="jsx" identity="return" parent="rolespage_rolespage_1783665503"]
-// CIL[DOC-MACRO purpose="Render the complete roles management page UI"]
-// CIL[DOC-RESPONSIBILITY responsibility="Handle return"]
-// CIL[DOC-CONTEXT module="return" layer="unknown" related_files="[]"]
-// CIL[DOC-CONTRACT inputs="none" outputs="none" errors="none" side_effects="none"]
-// CIL[DOC-MICRO logic_summary="Implements return" notable_decisions="[]"]
-// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
-// CIL[DOC-STABILITY stability="stable"]
-// CIL[DOC-VECTOR type="context" content="Layer: unknown. Direct callers: 0. Direct calls: 0. Related files: none."]
-// CIL[DOC-VECTOR type="blast_radius" content="Direct callers: 0. Total affected: 0."]
-// CIL[DOC-VECTOR type="configuration" content="No configuration dependencies."]
-// CIL[DOC-VECTOR type="constraint" content="No test paths identified."]
-// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
-// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
   return (
     <AdminListPage
       title="Roles"
@@ -440,6 +318,11 @@ export function RolesPage() {
       )}
     </AdminListPage>
   )
-// CIL[END chunk_id="rolespage_return_1783665503"]
 }
-// CIL[END chunk_id="rolespage_rolespage_1783665503"]
+// CIL[DOC-VECTOR type="context" content="purpose='Render the admin roles list page with search, filters, sorting, stats, and navigation to role detail.'; No verified external callers; imports: .framework/src/components/ui/LoadingSpinner.tsx,.framework/src/components/ui/button.tsx,.framework/src/components/admin/AdminListPage.tsx"]
+// CIL[DOC-VECTOR type="blast_radius" content="No direct caller data from CIL graph; local impact only"]
+// CIL[DOC-VECTOR type="configuration" content="No environment or build configuration dependencies identified"]
+// CIL[DOC-VECTOR type="constraint" content="Standard runtime; no special invariants documented"]
+// CIL[DOC-VECTOR type="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+// CIL[END stable_id="~/.framework/src/pages/admin/RolesPage.tsx:RolesPage:component"]

package/.framework/src/pages/admin/SecurityPage.tsx

@@ -0,0 +1,310 @@
+// CIL[BEGIN stable_id="~/.framework/src/pages/admin/SecurityPage.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/pages/admin/SecurityPage.tsx"]
+// CIL[DOC-MACRO purpose="System-admin security console: flagged actors report + blacklist management"]
+// CIL[DOC-RESPONSIBILITY responsibility="Render the flagged-accounts report from /api/security, let admins select rows via per-row checkboxes, and apply or lift three-layer bans; also list/revoke blocklist entries"]
+// CIL[DOC-CONTEXT module="admin" layer="presentation" related_files=".framework/functions/security.ts,.framework/src/lib/api.ts,.framework/src/components/ui/checkbox.tsx,.framework/src/components/ui/table.tsx"]
+// CIL[DOC-CONTRACT inputs="none" outputs="Security admin page JSX" errors="API errors surfaced inline" side_effects="GET flagged_accounts + blocklist; POST ban_user/unban_user/blocklist_revoke via apiFetch"]
+// CIL[DOC-MICRO logic_summary="Load report + blocklist; checkbox Set<string> keyed by row key (person_id or acct:account_id); Add to Blacklist issues one ban_user per selected row and reports per-layer results; refresh after actions" notable_decisions="ban_user accepts person_id OR email OR ip so anonymous-signal rows (no person) still ban by account/ip; all calls go through apiFetch — service role never leaves the server"]
+// CIL[DOC-STABILITY stability="experimental"]
+// CIL[DOC-AUDIENCE audience="internal"]
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { apiFetch } from '../../lib/api'
+import { Button } from '../../components/ui/button'
+import { Checkbox } from '../../components/ui/checkbox'
+import { Badge } from '../../components/ui/badge'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '../../components/ui/table'
+
+type FlaggedRow = {
+  person_id: string | null
+  email: string | null
+  account_id: string | null
+  account_name: string | null
+  last_ip: string | null
+  last_country: string | null
+  person_status: string | null
+  signals: number
+  kinds: string[]
+  patterns: string[]
+  last_seen_at: string | null
+  banned: boolean
+}
+
+type BlocklistRow = {
+  id: string
+  type: string
+  value: string
+  severity: string
+  reason: string | null
+  expires_at: string | null
+  revoked_at: string | null
+  created_at: string
+}
+
+function rowKey(r: FlaggedRow): string {
+  return r.person_id || `acct:${r.account_id || 'unknown'}`
+}
+
+async function callSecurity(action: string, body?: any) {
+  const res = await apiFetch(`/api/security?action=${action}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body || {}),
+  })
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw new Error(data?.error || data?.message || `${action} failed (${res.status})`)
+  return data
+}
+
+export function SecurityPage() {
+  const [rows, setRows] = useState<FlaggedRow[]>([])
+  const [blocklist, setBlocklist] = useState<BlocklistRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [actionBusy, setActionBusy] = useState(false)
+  const [actionResult, setActionResult] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const [flagged, bl] = await Promise.all([
+        callSecurity('flagged_accounts'),
+        callSecurity('blocklist'),
+      ])
+      setRows(flagged?.rows || [])
+      setBlocklist(bl?.rows || [])
+    } catch (e: any) {
+      setError(e?.message || 'Failed to load security data')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const rowByKey = useMemo(() => new Map(rows.map(r => [rowKey(r), r])), [rows])
+  const selectedRows = useMemo(
+    () => [...selected].map(k => rowByKey.get(k)).filter(Boolean) as FlaggedRow[],
+    [selected, rowByKey]
+  )
+
+  const toggle = (key: string, checked: boolean) => {
+    setSelected(prev => {
+      const next = new Set(prev)
+      if (checked) next.add(key); else next.delete(key)
+      return next
+    })
+  }
+
+  const toggleAll = (checked: boolean) => {
+    setSelected(checked ? new Set(rows.map(rowKey)) : new Set())
+  }
+
+  const banSelected = async () => {
+    if (!selectedRows.length) return
+    setActionBusy(true)
+    setActionResult(null)
+    const results: string[] = []
+    for (const r of selectedRows) {
+      try {
+        const res = await callSecurity('ban_user', {
+          person_id: r.person_id || undefined,
+          email: r.email || undefined,
+          ip: r.last_ip || undefined,
+          reason: `Security admin action — signals: ${r.kinds.join(', ')}`,
+        })
+        results.push(`${r.email || r.account_name || rowKey(r)}: banned (auth:${res.layers?.auth} edge:${res.layers?.edge})`)
+      } catch (e: any) {
+        results.push(`${r.email || rowKey(r)}: FAILED — ${e?.message}`)
+      }
+    }
+    setActionResult(results.join('\n'))
+    setSelected(new Set())
+    setActionBusy(false)
+    void load()
+  }
+
+  const unbanRow = async (r: FlaggedRow) => {
+    if (!r.person_id) { setActionResult('Cannot unban — no person id on this row'); return }
+    setActionBusy(true)
+    try {
+      const res = await callSecurity('unban_user', { person_id: r.person_id })
+      setActionResult(`${r.email || r.person_id}: unbanned (auth:${res.layers?.auth} edge:${res.layers?.edge})`)
+    } catch (e: any) {
+      setActionResult(`Unban failed: ${e?.message}`)
+    }
+    setActionBusy(false)
+    void load()
+  }
+
+  const revokeEntry = async (entry: BlocklistRow) => {
+    setActionBusy(true)
+    try {
+      await callSecurity('blocklist_revoke', { id: entry.id })
+    } catch (e: any) {
+      setActionResult(`Revoke failed: ${e?.message}`)
+    }
+    setActionBusy(false)
+    void load()
+  }
+
+  const allChecked = rows.length > 0 && selected.size === rows.length
+  const activeBlocklist = blocklist.filter(b => !b.revoked_at)
+
+  return (
+    <div className="p-6 space-y-8">
+      <div>
+        <h1 className="text-2xl font-semibold">Security</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Flagged actors and platform blocklist. "Add to Blacklist" applies all
+          three layers: internal blocklist, Supabase Auth ban, and Netlify edge IP deny.
+        </p>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-4 text-sm text-red-800">{error}</div>
+      )}
+      {actionResult && (
+        <pre className="rounded-md bg-slate-100 border border-slate-200 p-3 text-xs whitespace-pre-wrap">{actionResult}</pre>
+      )}
+
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-medium">Flagged actors</h2>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={() => load()} disabled={loading}>
+              Refresh
+            </Button>
+            <Button
+              size="sm"
+              variant="destructive"
+              disabled={!selected.size || actionBusy}
+              onClick={banSelected}
+            >
+              {actionBusy ? <LoadingSpinner size="sm" /> : null}
+              Add to Blacklist{selected.size ? ` (${selected.size})` : ''}
+            </Button>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex justify-center py-12"><LoadingSpinner /></div>
+        ) : rows.length === 0 ? (
+          <div className="rounded-md border border-dashed border-slate-300 p-8 text-center text-sm text-muted-foreground">
+            No security signals yet. Rate-limit violations, prompt-injection detections,
+            and blocked registrations appear here.
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10">
+                  <Checkbox
+                    checked={allChecked}
+                    onCheckedChange={(c) => toggleAll(c === true)}
+                    aria-label="Select all"
+                  />
+                </TableHead>
+                <TableHead>Actor</TableHead>
+                <TableHead>Account</TableHead>
+                <TableHead>IP / Country</TableHead>
+                <TableHead>Signals</TableHead>
+                <TableHead>Last seen</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="w-24"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((r) => (
+                <TableRow key={rowKey(r)}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selected.has(rowKey(r))}
+                      onCheckedChange={(c) => toggle(rowKey(r), c === true)}
+                      aria-label={`Select ${r.email || rowKey(r)}`}
+                    />
+                  </TableCell>
+                  <TableCell className="font-medium">
+                    {r.email || <span className="text-muted-foreground">(no person)</span>}
+                  </TableCell>
+                  <TableCell>{r.account_name || '—'}</TableCell>
+                  <TableCell className="text-xs">
+                    {r.last_ip || '—'}{r.last_country ? ` · ${r.last_country.toUpperCase()}` : ''}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap gap-1 items-center">
+                      <Badge variant="secondary">{r.signals}×</Badge>
+                      {r.kinds.map(k => (
+                        <Badge key={k} variant="outline" className="text-xs">{k}</Badge>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {r.last_seen_at ? new Date(r.last_seen_at).toLocaleString() : '—'}
+                  </TableCell>
+                  <TableCell>
+                    {r.banned
+                      ? <Badge variant="destructive">banned</Badge>
+                      : <Badge variant="outline">{r.person_status || 'active'}</Badge>}
+                  </TableCell>
+                  <TableCell>
+                    {r.banned && r.person_id ? (
+                      <Button variant="ghost" size="sm" disabled={actionBusy} onClick={() => unbanRow(r)}>
+                        Unban
+                      </Button>
+                    ) : null}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </section>
+
+      <section className="space-y-3">
+        <h2 className="text-lg font-medium">Active blocklist</h2>
+        {activeBlocklist.length === 0 ? (
+          <div className="rounded-md border border-dashed border-slate-300 p-6 text-center text-sm text-muted-foreground">
+            No active blocklist entries.
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Type</TableHead>
+                <TableHead>Value</TableHead>
+                <TableHead>Severity</TableHead>
+                <TableHead>Reason</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead className="w-24"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {activeBlocklist.map((b) => (
+                <TableRow key={b.id}>
+                  <TableCell><Badge variant="outline">{b.type}</Badge></TableCell>
+                  <TableCell className="font-mono text-xs">{b.value}</TableCell>
+                  <TableCell>{b.severity}</TableCell>
+                  <TableCell className="text-xs text-muted-foreground">{b.reason || '—'}</TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {new Date(b.created_at).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell>
+                    <Button variant="ghost" size="sm" disabled={actionBusy} onClick={() => revokeEntry(b)}>
+                      Revoke
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </section>
+    </div>
+  )
+}
+// CIL[END stable_id="~/.framework/src/pages/admin/SecurityPage.tsx:module_header:module_header"]