DOM action logPro

A readable log of what the agent clicked and typed, with selectors on demand.

Markdown

On this page

ProTwo sites, a skipped step and a failed select. Turn on selectors.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/dom-action-log

Usage

tsx

import { DomActionLog } from "@/components/ui/chatcn/pro/dom-action-log"

<DomActionLog actions={actions} onOpenFrame={(frame) => setIndex(frame)} />

Each element is drawn like itself: a button as a small button, a field as a field, a link underlined. Navigations start page groups. Selectors appear on demand with copy; Copy steps puts the whole run on the clipboard as plain numbered steps.

Examples

With the filmstrip

ProFrame links jump the filmstrip; the filmstrip lights the log.

States

ProStreaming with selectors, waiting for the first action, and empty.

Props

Prop	Type	Notes
`actions`	`DomAction[]`	`{ id, kind, target?, value?, url?, selector?, at?, status?, error?, frame? }`
`showSelectors`, `defaultShowSelectors`, `onShowSelectorsChange`	`boolean`
`onOpenFrame`	`(frame, action) => void`	Shows frame links
`activeId`	`string`	Highlighted action
`maxHeight`	`number`	Scrolls; sticks to the newest while at the bottom
`loading`	`boolean`	Waiting for the first action

Accessibility

Actions are an ordered list; the highlighted one has aria-current.
Failed and running steps have text labels on their glyphs.

Motion

New actions fade in; nothing moves while you read.