Audit Log

Enterprise
Compliance
Block

Transparent activity timeline showing what AI and users did on your behalf. Features actor differentiation, expandable event details, search/filter, integrity verification, and before/after state tracking.

Preview

Complete audit log with sample events

Audit Log

Immutable record of all actions and decisions

AI Assistant
bulk reorganize
8 notifications
12/26/2025, 9:15:00 AM
87%

"Grouped based on your response patterns over 14 days"

Olivia Chen
task complete
Review Q1 campaign performance
12/26/2025, 8:45:00 AM

"Marked as done after reviewing analytics"

Auto-save System
auto saved
Q1 Campaign Brief
12/25/2025, 11:30:00 PM

Actor Types

Visual differentiation by actor type

Audit Log

Immutable record of all actions and decisions

AI Assistant
recommend action
Task scheduling
3/21/2026, 8:48:00 PM
92%

"Based on your work patterns"

Olivia Chen
approve recommendation
Schedule change
3/21/2026, 8:48:00 PM
Scheduler
execute change
3 tasks rescheduled
3/21/2026, 8:48:00 PM

Props

AuditLog component API reference

PropTypeDefaultDescription
eventsAuditEvent[][]Array of audit events to display
filterablebooleantrueShow filter button in header
searchablebooleantrueShow search input in header
exportablebooleantrueShow export dropdown in header
verifiablebooleantrueShow verify integrity button and hash display
onVerify() => void—Callback when verify integrity button is clicked
onExport(format: string) => void—Callback when export is triggered
classNamestring—Additional CSS classes for the container

AuditEvent Type

PropTypeDefaultDescription
id*string—Unique event identifier
timestamp*string | Date—Event timestamp
actor*{ type: 'ai' | 'human' | 'system'; name: string }—Actor who performed the action
action*string—Action performed
target*string—Target of the action
beforeany—State before the action
afterany—State after the action
rationalestring—Reasoning for the action
confidencenumber—AI confidence score (0-1)
metadataRecord<string, any>—Additional metadata

Usage

Import and implementation example

import { AuditLog } from '@/blocks/workflow/audit-log'

export default function Example() {
  const events = [
    {
      id: 'evt-001',
      timestamp: '2025-12-26T09:15:00.234Z',
      actor: { type: 'ai', name: 'AI Assistant' },
      action: 'bulk_reorganize',
      target: '8 notifications',
      before: { notifications: 8, grouped: false },
      after: { notifications: 1, digest_name: 'Weekly Digest' },
      rationale: 'Grouped based on your response patterns',
      confidence: 0.87,
      metadata: { pattern_days: 14 }
    },
    {
      id: 'evt-002',
      timestamp: '2025-12-26T08:45:00.123Z',
      actor: { type: 'human', name: 'Olivia Chen' },
      action: 'task_complete',
      target: 'Review Q1 campaign',
      before: { status: 'in_progress' },
      after: { status: 'completed' }
    }
  ]

  return (
    <AuditLog
      events={events}
      filterable={true}
      searchable={true}
      exportable={true}
      verifiable={true}
      onVerify={() => console.log('Verifying integrity...')}
      onExport={(format) => console.log('Export:', format)}
    />
  )
}

Built With

3 components

This block uses the following UI components from the design system:

ButtonInputBadge

Features

Built-in functionality

  • Actor differentiation: Color-coded icons for AI (violet), human (indigo), and system (gray)
  • Expandable details: Click events to view before/after states and metadata
  • Real-time search: Filter events by target, action, or actor name
  • Integrity verification: Verify button and hash display for each event
  • Export functionality: Export dropdown in header for compliance reporting
  • Confidence scores: Display AI confidence percentage for AI actions
  • Rationale capture: Show reasoning/rationale for actions in italics
  • Metadata badges: Display additional metadata as badge pills
  • Timeline connector: Visual timeline connecting events chronologically
  • Dark mode: Full dark mode support with proper color contrast

Accessibility

Accessibility considerations

ARIA Attributes

Event rows are clickable with cursor pointerSearch input is a native input elementButtons are native button elements

Keyboard Navigation

KeyAction
TabNavigate between search, filter, verify, export, and event rows
Enter / SpaceExpand/collapse focused event row

Notes

  • Actor type is communicated through both icon and text name
  • Action badges use color and text for status indication
  • Timestamps are formatted for readability
  • Consider adding aria-expanded to event rows
  • Consider adding role="button" to expandable rows
  • Hash verification section includes copyable text

Related Components

Audit ExportBadgeButtonInput