pro222 lines · framer-motion

Audit Log

A log that shows when someone edits it. Every entry is signed with HMAC-SHA256 over its content and the previous signature. Change one row and verification breaks from that row on. Real Web Crypto, not a mock.

Use it for: Compliance views, incident reviews, proving what an agent did.
Themes: Light + dark
License: Commercial use (draft)

Live

Audit log

HMAC-SHA256 chain · 0 entries

Chain intact

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface AuditEvent {
  ts: string;
  actor: string;
  action: string;
}

interface Row extends AuditEvent {
  seq: number;
  prev: string;
  mac: string;
}

export interface AuditLogProps {
  /** HMAC key. In production this lives on your server, never in the browser. */
  secret?: string;
  initial?: AuditEvent[];

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→mac_n = HMAC-SHA256(secret, JSON([seq, prev_mac, ts, actor, action])); genesis prev is 64 zeros.
→New rows slide in with a short highlight flash; actors are colour-coded (agent blue, human orange, policy amber).
→Verify recomputes the chain; Tamper edits a recent row and re-verifies, so every row from the edit down turns red with struck-through hashes.
→Status chip: Chain intact / Broken at #n. Reset rebuilds the chain.

Accessibility

✓Status chip is role=status.
✓Each row ends with a valid/invalid label, not colour alone.
✓Honours prefers-reduced-motion.