spine-framework 0.3.125 → 0.3.127

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

@@ -1,28 +1,48 @@
-/**
- * @module src/pages/admin/LogsPage
- * @audience installer
- * @layer frontend-page
- * @stability stable
- *
- * Admin log viewer. Fetches system audit/activity logs via
- * `/api/admin-data?action=logs`, applies client-side search, severity
- * filter, date-range filter, and sort. Renders inside `AdminListPage`
- * with a sortable table. Useful for debugging pipeline executions,
- * auth events, and API errors.
- *
- * @seeAlso src/pages/admin/ObservabilityDashboard.tsx
- */
 
-import React, { useState } from 'react'
-import { FileText, Search, Calendar, AlertTriangle, CheckCircle, User } from 'lucide-react';
+
+
+
+
+// CIL[BEGIN chunk_id="logspage_module_header_1783666257" type="module_header" identity="imports" parent="none"]
+// CIL[DOC-MACRO purpose="Import React dependencies and UI components"]
+// CIL[DOC-RESPONSIBILITY responsibility="Import all required modules for LogsPage component"]
+// CIL[DOC-CONTEXT module="LogsPage" layer="ui" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/components/ui/dialog.tsx\",\".framework/src/components/layout/Sidebar.tsx\",\"custom/apps/portal/pages/CoursesPage.tsx\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="React hooks, UI components, utilities" errors="Import errors" side_effects="Module loading"]
+// CIL[DOC-MICRO logic_summary="Imports React, icons, UI components, and utility functions" 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: ui. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/components/ui/dialog.tsx, .framework/src/components/layout/Sidebar.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="implementation_pattern" content="" status="pending_human_input"]
+// CIL[DOC-VECTOR type="user_journey" content="" status="pending_human_input"]
+import React, { useState, useEffect } from 'react'
+import { FileText, Search, Calendar, AlertTriangle, CheckCircle, User, X } from 'lucide-react';
 import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
 import { Button } from '../../components/ui/button'
+import { Input } from '../../components/ui/input'
 import { AdminListPage } from '../../components/admin/AdminListPage'
 import { SortableTableHeader } from '../../components/admin/SortableTableHeader'
 import { formatDateTime } from '../../lib/utils'
 import { useApi } from '../../hooks/useApi'
 import { apiFetch } from '../../lib/api'
-
+// CIL[END chunk_id="logspage_module_header_1783666257"]
+// CIL[BEGIN chunk_id="logspage_interface_logentry_1783666257" type="interface" identity="LogEntry" parent="none"]
+// CIL[DOC-MACRO purpose="Define log entry data structure"]
+// CIL[DOC-RESPONSIBILITY responsibility="Type definition for log entries"]
+// CIL[DOC-CONTEXT module="LogsPage" layer="types" related_files="[\".framework/src/pages/admin/IntegrationsPage.tsx\",\".framework/src/components/ui/dialog.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"custom/apps/cortex/functions/custom_cil-embeddings.ts\",\".framework/functions/_shared/principal.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="LogEntry interface" errors="Type errors" side_effects="Type system"]
+// CIL[DOC-MICRO logic_summary="Defines structure for system log entries with optional fields" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: types. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/IntegrationsPage.tsx, .framework/src/components/ui/dialog.tsx, .framework/functions/_shared/schema-utils.ts, custom/apps/cortex/functions/custom_cil-embeddings.ts, .framework/functions/_shared/principal.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"]
 interface LogEntry {
   id: string
   event_type: string
@@ -30,8 +50,17 @@ interface LogEntry {
   target_type?: string
   target_id?: string
   action?: string
+  span_name?: string
+  trace_id?: string
+  span_id?: string
+  parent_span_id?: string
+  duration_ms?: number
+  outcome?: string
+  event_category?: string
+  kind?: string
   details?: Record<string, any>
   metadata?: Record<string, any>
+  message?: string
   created_at: string
   actor?: {
     id: string
@@ -40,50 +69,154 @@ interface LogEntry {
   }
 }
 
-export function LogsPage() {
+interface LogsResponse {
+  data: LogEntry[]
+  total: number
+}
+
+interface StatsResponse {
+  total: number
+  error_count: number
+  user_action_count: number
+  event_type_count: number
+  levels: string[]
+  sources: string[]
+  source_types: string[]
+}
+// CIL[END chunk_id="logspage_interface_logentry_1783666257"]
+// CIL[BEGIN chunk_id="logspage_function_logspage_1783666257" type="function" identity="LogsPage" parent="none"]
+// CIL[DOC-MACRO purpose="Render the complete logs interface"]
+// CIL[DOC-RESPONSIBILITY responsibility="Main render logic for logs page"]
+// CIL[DOC-CONTEXT module="LogsPage" layer="ui" related_files="[\".framework/src/pages/admin/RolesPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/components/layout/Sidebar.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"custom/apps/portal/pages/ContentPage.tsx\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="JSX structure" errors="Render errors" side_effects="DOM updates"]
+// CIL[DOC-MICRO logic_summary="Renders AdminListPage with date filters, table, and empty states" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: ui. Direct callers: 0. Direct calls: 0. Related files: .framework/src/pages/admin/RolesPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/components/layout/Sidebar.tsx, .framework/functions/_shared/schema-utils.ts, custom/apps/portal/pages/ContentPage.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"]
+export function LogsPage({ title = 'System Logs' }: { title?: string }) {
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedEventType, setSelectedEventType] = useState('all')
+  const [selectedSource, setSelectedSource] = useState('all')
+  const [selectedSourceType, setSelectedSourceType] = useState('all')
+  const [sourceIdFilter, setSourceIdFilter] = useState('')
+  const [actorIdFilter, setActorIdFilter] = useState('')
   const [dateFrom, setDateFrom] = useState('')
   const [dateTo, setDateTo] = useState('')
   const [sortKey, setSortKey] = useState('created_at')
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
+  const [page, setPage] = useState(1)
+  const [expandedRowId, setExpandedRowId] = useState<string | null>(null)
+  const [traceIdFilter, setTraceIdFilter] = useState('')
+  const pageSize = 100
+
+  const buildLogUrl = (forStats = false) => {
+    const params = new URLSearchParams()
+    params.set('action', forStats ? 'stats' : 'account')
+    if (searchTerm.trim()) params.set('query', searchTerm.trim())
+    if (selectedEventType !== 'all') params.set('event_type', selectedEventType)
+    if (selectedSource !== 'all') params.set('source', selectedSource)
+    if (selectedSourceType !== 'all') params.set('target_type', selectedSourceType)
+    if (sourceIdFilter.trim()) params.set('source_id', sourceIdFilter.trim())
+    if (actorIdFilter.trim()) params.set('actor_id', actorIdFilter.trim())
+    if (traceIdFilter.trim()) params.set('trace_id', traceIdFilter.trim())
+    if (dateFrom) params.set('date_from', dateFrom)
+    if (dateTo) params.set('date_to', dateTo)
+    if (!forStats) {
+      params.set('limit', pageSize.toString())
+      params.set('offset', ((page - 1) * pageSize).toString())
+    }
+    return `/api/logs?${params.toString()}`
+  }
 
-  const { data: logs, loading, error, refetch } = useApi<LogEntry[]>(
+  // CIL[BEGIN chunk_id="logspage_hooks_1783666257" type="hooks" identity="useApi" parent="logspage_function_logspage_1783666257"]
+// CIL[DOC-MACRO purpose="Fetch logs and stats data from API"]
+// CIL[DOC-RESPONSIBILITY responsibility="Handle useApi"]
+// CIL[DOC-CONTEXT module="LogsPage" layer="data" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/IntegrationsPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\".framework/functions/_shared/schema-utils.ts\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="logs data, stats data" errors="API errors" side_effects="HTTP requests"]
+// CIL[DOC-MICRO logic_summary="Uses useApi hook to fetch logs and statistics with date filtering" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: data. Direct callers: 0. Direct calls: 0. Related files: custom/apps/portal/pages/ContentPage.tsx, .framework/src/pages/admin/IntegrationsPage.tsx, custom/apps/cortex/pages/operations/OperationsDashboard.tsx, .framework/src/pages/admin/RolesPage.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 { data: logsData, loading, error, refetch } = useApi<LogsResponse>(
     async () => {
-      let url = '/api/logs?action=account'
-      if (dateFrom) url += `&date_from=${dateFrom}`
-      if (dateTo) url += `&date_to=${dateTo}`
-      
-      const response = await apiFetch(url)
+      const response = await apiFetch(buildLogUrl())
       if (!response.ok) throw new Error('Failed to fetch logs')
       const result = await response.json()
-      return (result.data || result) as LogEntry[]
+      return (result.data || result) as LogsResponse
     },
     { immediate: true }
   )
 
-  const { data: stats } = useApi<{ total: number; by_type: Record<string, number> }>(
+  const logs = logsData?.data || []
+  const totalLogs = logsData?.total || 0
+
+  const { data: stats, refetch: refetchStats } = useApi<StatsResponse>(
     async () => {
-      const response = await apiFetch('/api/logs?action=stats')
+      const response = await apiFetch(buildLogUrl(true))
       if (!response.ok) return null
       const result = await response.json()
-      return result.data || result
+      return (result.data || result) as StatsResponse
     },
     { immediate: true }
   )
 
-  const filteredLogs = (logs || []).filter(log => {
-    const matchesSearch = !searchTerm || 
-      log.event_type.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      log.target_type?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      log.action?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      JSON.stringify(log.details).toLowerCase().includes(searchTerm.toLowerCase())
-    const matchesType = selectedEventType === 'all' || log.event_type === selectedEventType
-    return matchesSearch && matchesType
-  })
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      refetch()
+      refetchStats()
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [searchTerm, selectedEventType, selectedSource, selectedSourceType, sourceIdFilter, actorIdFilter, traceIdFilter, dateFrom, dateTo, page, refetch, refetchStats])
+
+  useEffect(() => {
+    setPage(1)
+  }, [searchTerm, selectedEventType, selectedSource, selectedSourceType, sourceIdFilter, actorIdFilter, traceIdFilter, dateFrom, dateTo])
+// CIL[END chunk_id="logspage_hooks_1783666257"]
 
-  const eventTypes = Array.from(new Set((logs || []).map(l => l.event_type)))
+  // CIL[BEGIN chunk_id="logspage_filters_1783666257" type="filter_logic" identity="filteredLogs" parent="logspage_function_logspage_1783666257"]
+// CIL[DOC-MACRO purpose="Filter logs by search and event type"]
+// CIL[DOC-RESPONSIBILITY responsibility="Handle filteredLogs"]
+// CIL[DOC-CONTEXT module="LogsPage" layer="logic" related_files="[\"custom/apps/portal/pages/ContentPage.tsx\",\".framework/src/pages/admin/TypeDetailPage.tsx\",\"custom/apps/cortex/pages/operations/OperationsDashboard.tsx\",\".framework/src/pages/admin/RolesPage.tsx\",\".framework/migrations/025_retype_threads_messages.sql\",\"\\\"]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="filtered logs" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Filters logs based on search term and event type selection" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: logic. 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/pages/admin/RolesPage.tsx, .framework/migrations/025_retype_threads_messages.sql, \."]
+// 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 filteredLogs = logs || []
 
+  const eventTypes = stats?.levels || []
+  const sourceOptions = stats?.sources || []
+// CIL[END chunk_id="logspage_filters_1783666257"]
+
+  // CIL[BEGIN chunk_id="logspage_sorting_1783666257" type="sorting_logic" identity="handleSort" parent="logspage_function_logspage_1783666257"]
+// CIL[DOC-MACRO purpose="Handle column sorting for logs table"]
+// CIL[DOC-RESPONSIBILITY responsibility="Handle handleSort"]
+// CIL[DOC-CONTEXT module="handleSort" layer="unknown" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="none" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Implements handleSort" 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 handleSort = (key: string) => {
     if (sortKey === key) {
       setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
@@ -105,7 +238,22 @@ export function LogsPage() {
     
     return 0
   })
+// CIL[END chunk_id="logspage_sorting_1783666257"]
 
+  // CIL[BEGIN chunk_id="logspage_badge_1783666257" type="utility_function" identity="getEventTypeBadge" parent="logspage_function_logspage_1783666257"]
+// CIL[DOC-MACRO purpose="Generate colored badges for event types"]
+// CIL[DOC-RESPONSIBILITY responsibility="Handle getEventTypeBadge"]
+// CIL[DOC-CONTEXT module="getEventTypeBadge" layer="unknown" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="none" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Implements getEventTypeBadge" 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 getEventTypeBadge = (eventType: string) => {
     if (eventType.includes('error') || eventType.includes('failed')) {
       return <span className="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-red-100 text-red-700">{eventType}</span>
@@ -118,51 +266,102 @@ export function LogsPage() {
     }
     return <span className="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-slate-100 text-slate-600">{eventType}</span>
   }
+// CIL[END chunk_id="logspage_badge_1783666257"]
 
+  // CIL[BEGIN chunk_id="logspage_stats_1783666257" type="stats_config" identity="statsCards" parent="logspage_function_logspage_1783666257"]
+// CIL[DOC-MACRO purpose="Configure statistics cards and filters"]
+// CIL[DOC-RESPONSIBILITY responsibility="Handle statsCards"]
+// CIL[DOC-CONTEXT module="LogsPage" layer="ui" related_files="[]"]
+// CIL[DOC-CONTRACT inputs="none" outputs="stats cards, filter options" errors="none" side_effects="none"]
+// CIL[DOC-MICRO logic_summary="Creates stats cards and filter options for logs display" notable_decisions="[]"]
+// CIL[DOC-CONFIDENCE pass="second" score="0.95" flags="none"]
+// CIL[DOC-STABILITY stability="stable"]
+// CIL[DOC-VECTOR type="context" content="Layer: ui. 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 statsCards = [
     {
       title: 'Total Events',
-      value: stats?.total || (logs || []).length,
+      value: stats?.total ?? totalLogs,
       icon: FileText,
       iconColor: 'text-blue-500'
     },
     {
       title: 'Event Types',
-      value: eventTypes.length,
+      value: stats?.event_type_count ?? eventTypes.length,
       icon: Calendar,
       iconColor: 'text-purple-500'
     },
     {
       title: 'Errors',
-      value: (logs || []).filter(l => l.event_type.includes('error')).length,
+      value: stats?.error_count ?? 0,
       icon: AlertTriangle,
       iconColor: 'text-red-500'
     },
     {
       title: 'User Actions',
-      value: (logs || []).filter(l => l.actor_id).length,
+      value: stats?.user_action_count ?? 0,
       icon: User,
       iconColor: 'text-green-500'
     }
   ]
 
-  const eventTypeOptions = [
-    { value: 'all', label: 'All Events' },
-    ...eventTypes.map(type => ({ value: type, label: type }))
+  const makeOptions = (values: string[], current: string) => {
+    const set = new Set(['all', current, ...values])
+    return Array.from(set)
+      .filter(v => v && v !== 'all')
+      .map(v => ({ value: v, label: v }))
+  }
+
+  const eventTypeOptions = [{ value: 'all', label: 'All Levels' }, ...makeOptions(eventTypes, selectedEventType)]
+  const sourceSelectOptions = [{ value: 'all', label: 'All Sources' }, ...makeOptions(sourceOptions, selectedSource)]
+  const sourceTypeOptions = [
+    { value: 'all', label: 'All Source Types' },
+    ...makeOptions(stats?.source_types || [], selectedSourceType)
   ]
 
   const filters = [
     {
-      label: 'Event Type',
+      label: 'Level',
       value: selectedEventType,
       options: eventTypeOptions,
       onChange: setSelectedEventType
+    },
+    {
+      label: 'Source',
+      value: selectedSource,
+      options: sourceSelectOptions,
+      onChange: setSelectedSource
+    },
+    {
+      label: 'Source Type',
+      value: selectedSourceType,
+      options: sourceTypeOptions,
+      onChange: setSelectedSourceType
     }
   ]
+// CIL[END chunk_id="logspage_stats_1783666257"]
 
+  // CIL[BEGIN chunk_id="logspage_render_1783666257" type="render_logic" identity="return" parent="logspage_function_logspage_1783666257"]
+// CIL[DOC-MACRO purpose="Render the complete logs interface"]
+// 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="System Logs"
+      title={title}
       description="Audit trail and event history"
       statsCards={statsCards}
       searchPlaceholder="Search logs..."
@@ -175,7 +374,7 @@ export function LogsPage() {
       emptyIcon={FileText}
     >
       <div className="px-6 py-4 border-b border-slate-200 bg-slate-50">
-        <div className="flex items-center gap-4">
+        <div className="flex flex-wrap items-center gap-4">
           <div>
             <label className="block text-xs font-medium text-slate-500 mb-1">From</label>
             <input
@@ -194,13 +393,77 @@ export function LogsPage() {
               className="px-3 py-1.5 text-sm border border-slate-300 rounded-md"
             />
           </div>
+          <div>
+            <label className="block text-xs font-medium text-slate-500 mb-1">Source ID</label>
+            <Input
+              type="text"
+              placeholder="uuid"
+              value={sourceIdFilter}
+              onChange={(e) => setSourceIdFilter(e.target.value)}
+              className="w-48 px-3 py-1.5 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-slate-500 mb-1">Actor ID</label>
+            <Input
+              type="text"
+              placeholder="uuid"
+              value={actorIdFilter}
+              onChange={(e) => setActorIdFilter(e.target.value)}
+              className="w-48 px-3 py-1.5 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-slate-500 mb-1">Trace ID</label>
+            <Input
+              type="text"
+              placeholder="trace id"
+              value={traceIdFilter}
+              onChange={(e) => setTraceIdFilter(e.target.value)}
+              className="w-48 px-3 py-1.5 text-sm"
+            />
+          </div>
           <div className="flex-1" />
+          <Button
+            variant="outline"
+            onClick={() => {
+              setSearchTerm('')
+              setSelectedEventType('all')
+              setSelectedSource('all')
+              setSelectedSourceType('all')
+              setSourceIdFilter('')
+              setActorIdFilter('')
+              setTraceIdFilter('')
+              setDateFrom('')
+              setDateTo('')
+              setPage(1)
+            }}
+            className="text-sm"
+          >
+            <X className="h-4 w-4 mr-1" />
+            Clear
+          </Button>
           <Button variant="secondary" onClick={refetch} className="text-sm">
             Refresh
           </Button>
         </div>
       </div>
 
+      {traceIdFilter && (
+        <div className="px-6 py-3 bg-blue-50 border-b border-blue-100 flex items-center justify-between">
+          <div className="text-sm text-blue-900">
+            Viewing trace <span className="font-mono font-medium">{traceIdFilter}</span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setTraceIdFilter('')}
+          >
+            Clear trace
+          </Button>
+        </div>
+      )}
+
       {sortedLogs.length === 0 ? (
         <div className="p-8 text-center">
           <FileText className="mx-auto h-12 w-12 text-slate-400" />
@@ -221,29 +484,50 @@ export function LogsPage() {
                 onSort={handleSort}
               />
               <SortableTableHeader
-                title="Event Type"
+                title="Trace"
+                sortKey="trace_id"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+              <SortableTableHeader
+                title="Level"
                 sortKey="event_type"
                 currentSortKey={sortKey}
                 currentSortDirection={sortDirection}
                 onSort={handleSort}
               />
               <SortableTableHeader
-                title="Action"
+                title="Source"
                 sortKey="action"
                 currentSortKey={sortKey}
                 currentSortDirection={sortDirection}
                 onSort={handleSort}
               />
               <SortableTableHeader
-                title="Target"
+                title="Source Type"
                 sortKey="target_type"
                 currentSortKey={sortKey}
                 currentSortDirection={sortDirection}
                 onSort={handleSort}
               />
               <SortableTableHeader
-                title="Actor"
-                sortKey="actor"
+                title="Source ID"
+                sortKey="target_id"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+              <SortableTableHeader
+                title="Person"
+                sortKey="actor_id"
+                currentSortKey={sortKey}
+                currentSortDirection={sortDirection}
+                onSort={handleSort}
+              />
+              <SortableTableHeader
+                title="Message"
+                sortKey="message"
                 currentSortKey={sortKey}
                 currentSortDirection={sortDirection}
                 onSort={handleSort}
@@ -252,32 +536,95 @@ export function LogsPage() {
           </thead>
           <tbody className="bg-white divide-y divide-slate-200">
             {sortedLogs.map((log) => (
-              <tr key={log.id} className="hover:bg-slate-50">
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                  {formatDateTime(log.created_at)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  {getEventTypeBadge(log.event_type)}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-900">
-                  {log.action || '—'}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
-                  {log.target_type ? (
-                    <span>
-                      {log.target_type}
-                      {log.target_id && <span className="text-slate-400 ml-1">({log.target_id.slice(0, 8)})</span>}
-                    </span>
-                  ) : '—'}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
-                  {log.actor?.full_name || log.actor_id?.slice(0, 8) || 'System'}
-                </td>
-              </tr>
+              <React.Fragment key={log.id}>
+                <tr
+                  className="hover:bg-slate-50 cursor-pointer"
+                  onClick={() => setExpandedRowId(expandedRowId === log.id ? null : log.id)}
+                >
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
+                    {formatDateTime(log.created_at)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm">
+                    {log.trace_id ? (
+                      <button
+                        className="text-blue-600 hover:text-blue-800 font-mono"
+                        title={`Trace: ${log.trace_id}${log.span_name ? ` / ${log.span_name}` : ''}`}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setTraceIdFilter(log.trace_id!)
+                          setPage(1)
+                        }}
+                      >
+                        {log.trace_id.slice(0, 8)}
+                      </button>
+                    ) : (
+                      <span className="text-slate-300">—</span>
+                    )}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    {getEventTypeBadge(log.event_type)}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-900">
+                    {log.action || '—'}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
+                    {log.target_type || '—'}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
+                    {log.target_id ? log.target_id.slice(0, 8) : '—'}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-600">
+                    {log.actor?.full_name || log.actor_id?.slice(0, 8) || 'System'}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-slate-600 max-w-md truncate" title={log.message}>
+                    {log.message || '—'}
+                  </td>
+                </tr>
+                {expandedRowId === log.id && (
+                  <tr>
+                    <td colSpan={8} className="p-0 border-b border-slate-200">
+                      <div className="p-6 bg-slate-50">
+                        <h4 className="text-sm font-semibold text-slate-900 mb-3">Log Record</h4>
+                        <pre className="text-xs bg-white border border-slate-200 rounded-md p-4 overflow-auto max-h-96">
+                          {JSON.stringify(log, null, 2)}
+                        </pre>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
             ))}
           </tbody>
         </table>
       )}
+
+      {totalLogs > 0 && (
+        <div className="px-6 py-4 border-t border-slate-200 bg-slate-50 flex items-center justify-between">
+          <div className="text-sm text-slate-600">
+            Page {page} of {Math.max(1, Math.ceil(totalLogs / pageSize))} ({totalLogs} total)
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setPage(p => Math.max(1, p - 1))}
+              disabled={page <= 1}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setPage(p => p + 1)}
+              disabled={page >= Math.ceil(totalLogs / pageSize)}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
     </AdminListPage>
   )
 }
+// CIL[END chunk_id="logspage_render_1783666257"]
+// CIL[END chunk_id="logspage_function_logspage_1783666257"]