Action History Log React component
A readable record of what your bots did: activity by hour, each action with its reason and before and after values, and Undo for the ones that can be reversed.
About the Action History Log component
Action History Log answers the question everyone asks about automation: what did it actually do? Each entry says who did what, why they did it, and what changed from before to after.
Click a bar to see one hour, or filter to changes and risky actions. Anything reversible has an Undo button, and the rest say plainly that they can't be undone.
When to use it
Use it for audit trails in agent platforms, admin panels and automation tools.
Log the actions people would care about. Recording every internal step buries the ones that matter.
Installation
Add the Action History Log component to your project with the shadcn CLI. It lands in components/action-history-log.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/action-history-logProps
<ActionHistoryLog /> accepts 5 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Action history" |
| actions | { id: string; time: string; bot: string; action: string; kind: ActionKind; reason: string; changes: ActionChange[]; reversible?: boolean }[] | DEFAULT_ACTIONS |
| activity | { hour: string; count: number }[] | DEFAULT_ACTIVITY |
| onUndo | (action: LoggedAction) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Action history"
- actions{ id: string; time: string; bot: string; action: string; kind: ActionKind; reason: string; changes: ActionChange[]; reversible?: boolean }[]Default: DEFAULT_ACTIONS
- activity{ hour: string; count: number }[]Default: DEFAULT_ACTIVITY
- onUndo(action: LoggedAction) => void
Action History Log FAQ
- Does Undo reverse the action?
- No. onUndo tells you which one, and your backend reverses it.
- How are risky actions decided?
- You set kind on each entry, so it follows your own rules.
- How does the hour filter work?
- It matches the first two digits of each action's time.
- Does the card change height?
- No. Rows keep a fixed space, and all the details share one grid cell.
