AuditLog

A read-only record of who did what, with filters, details and export.

SourcePackage @kerf-js/veneer

Preview

tsx

import { AuditLog } from '@kerf-js/veneer'import type { AuditEvent } from '@kerf-js/veneer'export function Workspace() {  return (  <AuditLog    events={AUDIT}    now={NOW}    categories={AUDIT_CATEGORIES}    live="live"    onExport={() => Promise.resolve({ retryAfter: 20 })}  />  )}const NOW = '2026-10-31T17:00:00Z'const AUDIT: AuditEvent[] = [  {    id: 'a1',    at: '2026-10-31T16:42:00Z',    actor: 'Priya Raman',    category: 'deploys',    verb: 'deployed',    target: 'storefront',    ip: '84.12.3.9',  },  {    id: 'a2',    at: '2026-10-31T15:27:00Z',    actor: 'Sam Okafor',    category: 'deploys',    verb: 'rolled back',    target: 'mobile-bff',    ip: '10.4.0.22',  },  {    id: 'a3',    at: '2026-10-31T13:58:00Z',    actor: 'Mara Lindqvist',    category: 'keys',    verb: 'created API key',    target: 'CI deploys',    ip: '84.12.3.2',  },  {    id: 'a4',    at: '2026-10-31T09:12:00Z',    actor: 'Jun Tanaka',    category: 'members',    verb: 'changed the role of',    target: 'Tomás Oliveira',    ip: '10.4.0.31',    diff: [      { field: 'Role', from: 'Viewer', to: 'Member' },    ],  },  {    id: 'a5',    at: '2026-10-30T18:40:00Z',    actor: 'Jun Tanaka',    category: 'members',    verb: 'invited',    target: 'dara@kerf.dev',    ip: '10.4.0.31',  },  {    id: 'a6',    at: '2026-10-29T17:20:00Z',    actor: 'Mara Lindqvist',    category: 'billing',    verb: 'changed the plan to',    target: 'Team',    ip: '84.12.3.2',    diff: [      { field: 'Plan', from: 'Hobby', to: 'Team' },      { field: 'Seats', from: '3', to: '10' },    ],  },  {    id: 'a7',    at: '2026-10-28T11:03:00Z',    actor: 'Mara Lindqvist',    category: 'keys',    verb: 'revoked API key',    target: 'Old laptop',    ip: '84.12.3.2',  },  {    id: 'a8',    at: '2026-10-22T08:15:00Z',    actor: 'Lena Fischer',    category: 'deploys',    verb: 'paused',    target: 'reports',    ip: '10.4.1.7',  },]const AUDIT_CATEGORIES = [  { value: 'all', label: 'All' },  { value: 'deploys', label: 'Deploys' },  { value: 'members', label: 'Members' },  { value: 'keys', label: 'Keys' },  { value: 'billing', label: 'Billing' },]

Installation

npm install @kerf-js/veneer

Usage

tsx

import { AuditLog } from '@kerf-js/veneer'<AuditLog  events={AUDIT}  now={NOW}  categories={AUDIT_CATEGORIES}  live="live"  onExport={() => Promise.resolve({ retryAfter: 20 })}/>

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`events`	`readonly AuditEvent[] \| State<readonly AuditEvent[]>`	—	The rows.
`now`	`string`	—	The current time, for "2 hours ago".
`categories`	`{ value: string; label: string; }[]`	`[{ value: 'all', label: 'All' }]`	The filter options.
`live`	`LiveState`	—	Shows a live status, when rows arrive in real time.

Event	Type	Default	Description
`onExport`	`(() => Promise<void \| { retryAfter?: number \| undefined; }>)`	—	Shows Export CSV.

RelatedTable Api keys