AuditLogRow

A single immutable entry in an agent audit log: timestamp, actor, action, and outcome.

Preview

14:02:29.887Networkpostgresql.org/docs/current/ddl-constraints.htmlby agent:claude-3-7-sonnet

14:02:26.003Authenv:DATABASE_URLby agent:claude-3-7-sonnet

14:02:24.779Approvalrun_migration — productionby user:joey

Variants

Outcome states

14:02:31.041Approvalrun_migration — productionby user:joey

14:02:27.201Deletesrc/db/migrations/0011_drop_legacy_index.sqlby agent:claude-3-7-sonnetblocked

All event types

14:02:20.000Toolrun_queryby agent:claude-3-7-sonnet

14:02:21.000Readsrc/schema.prismaby agent:claude-3-7-sonnet

14:02:22.000Writesrc/db/migrations/0012_add_cascade.sqlby agent:claude-3-7-sonnet

14:02:23.000Deletesrc/db/legacy/old_index.sqlby agent:claude-3-7-sonnet

14:02:24.000Networkpostgresql.org/docs/…by agent:claude-3-7-sonnet

14:02:25.000Approvaldeploy — stagingby agent:claude-3-7-sonnet

14:02:26.000Authenv:DATABASE_URLby agent:claude-3-7-sonnet

14:02:27.000Runbun run migrate:devby agent:claude-3-7-sonnet

Props

Prop	Type	Description
timestamp*	string \| number \| Date	Timestamp accepted as display text, epoch milliseconds, or Date and rendered through Time.
event*	"tool" \| "read" \| "write" \| "delete" \| "network" \| "approval" \| "auth" \| "run"	Event type. Drives the icon, tag colour, and label.
actor*	string	Who triggered the event (e.g. "user:joey", "agent:claude-3-7-sonnet").
target*	string	Resource acted upon — file path, URL, tool name, or env var.
agent	string	Optional secondary actor label shown after the actor in monospace.
outcome	"ok" \| "blocked" \| "error"	Result of the action. Renders a warning or danger tag when not "ok". Defaults to "ok".
details	React.ReactNode	Optional expandable detail panel. When present, the row becomes a button that toggles it.
className	string	Additional class names applied to the row wrapper.

* required.

Usage

import { AuditLogRow } from "@/components/agent/audit-log-row";

// Wrap rows in a container — AuditLogRow renders border-bottom on all but the last child.
<div className="overflow-hidden rounded-xl border border-black/[0.08]">
  <AuditLogRow
    timestamp="14:02:31.041"
    event="write"
    actor="user:joey"
    agent="agent:claude-3-7-sonnet"
    target="src/db/migrations/0012_add_cascade.sql"
    outcome="ok"
    details={<pre>{sqlDiff}</pre>}
  />
  <AuditLogRow
    timestamp="14:02:27.201"
    event="delete"
    actor="agent:claude-3-7-sonnet"
    target="src/db/migrations/0011_drop_legacy.sql"
    outcome="blocked"
  />
</div>