AuditLog

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

SourcePackage @weft-js/warp

Preview

tsx

import { AuditLog } from '@weft-js/warp'import type { AuditEvent } from '@weft-js/warp'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@weft.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 @weft-js/warp

Usage

tsx

import { AuditLog } from '@weft-js/warp'<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 warp'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