Action Log

For development, import ActionLog from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

The Action Log supports step statuses, optional descriptions, and per-step expandable details.

Statuses

Four statuses mark each step: success, in-progress, not-started, and error. Success and error use filled markers. In-progress uses a spinning loader. Not-started stays in the subtle foreground.

Status	When to use
Success	The step completed without issues
In Progress	The step is actively running
Not Started	The step is queued but hasn’t begun
Error	The step failed and halted the run

Descriptions

An optional description renders below the step title as body text, providing additional context about what the step found or did. When descriptions are present, the connector line between steps spans a taller area, making the timeline easier to scan. Apply descriptions consistently across a log — mixing steps with and without descriptions creates an uneven vertical rhythm.

Details

A step with a details value gains an independent “Show details” disclosure. The details content renders inside a Card below the description and is collapsed by default, keeping the log compact while allowing deeper inspection on demand.

Behavior

The Action Log uses two levels of disclosure: one for the entire step list and one per step that has details content.

Expand and Collapse

The whole log starts expanded and collapses behind a “Show steps” / “Hide steps” toggle. Collapsing the log hides all step rows but preserves the expanded or collapsed state of any individual details disclosures.

Overflow

Long titles and descriptions wrap to multiple lines within the content column. The connector line extends to match the full height of each step, regardless of how much text wraps.

Usage Guidelines

When to Use

Use the Action Log when:

Agent steps – The agent or system runs a sequence of steps, and users benefit from seeing each step in order with its status.
Evidence behind a response – Users need to see how the agent arrived at its conclusion.
Failed runs – A step fails and halts the run, and users need to see which step failed and what came before it.

When not to use

Avoid using the Action Log for:

Source attribution – Use a Citation to attribute a specific claim in agent text to its source.

Keyboard Interaction

Users can navigate and operate the Action Log using standard keyboard controls.

Key	Description
Tab	Moves focus to the next disclosure trigger
Enter / Space	Toggles the focused disclosure open or closed

Code

Implementation
ActionLog Props
ActionLogStep

Common Examples

To use the ActionLog, pass configured steps through the required steps prop. Each step requires a stable id and a title.

import { ActionLog } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <ActionLog
      steps={[
        { id: "lookup", title: "Looked up the account", status: "success" },
        {
          id: "summary",
          title: "Drafting the summary",
          status: "in-progress",
        },
      ]}
    />
  );
}

Statuses

status selects the marker. "success" and "error" use filled icons. "in-progress" uses a spinning loader. "not-started" stays in the subtle foreground.

Descriptions and details

Use description for supporting plain text. Use details for rendered content that appears inside an independently collapsible Card.

Expansion

The step list starts expanded. Set defaultExpanded={false} to start collapsed. Each step’s details remain independently controlled.

Heading level

Set titleLevel to fit the surrounding document outline. The main steps toggle uses one level above it, and details toggles use one level below it. Step titles remain body text.

Internationalization

ActionLog owns these localized labels:

ai-kit.actionLog.showSteps
ai-kit.actionLog.hideSteps
ai-kit.actionLog.showDetails
ai-kit.actionLog.hideDetails
ai-kit.actionLog.statusNotStarted
ai-kit.actionLog.statusInProgress
ai-kit.actionLog.statusSuccess
ai-kit.actionLog.statusError

Localize step titles and descriptions before passing them in steps. Mount AiKitIntlProvider inside CartoTheme to switch the built-in labels.

React Accessibility

Status markers include localized screen-reader-only labels and do not imply form semantics.
The ordered list preserves step sequence.
Show steps, Hide steps, Show details, and Hide details expose disclosure state through accessible buttons.
Stable step id values preserve each details disclosure when steps stream or re-render.

<ActionLog
  steps={steps}
  titleLevel={4}
  defaultExpanded
/>

`ActionLog` Props

The ActionLog accepts the following props and forwards remaining <div> attributes except children and style.

ActionLogStep[]

required

Steps to render from top to bottom.

string

Class merged onto the log container.

boolean

default:"true"

Whether the step list starts expanded.

3 | 4 | 5 | 6

default:"4"

Anchor heading level for the surrounding disclosure structure.

const step: ActionLogStep = {
  id: "summary",
  title: "Drafting the summary",
  description: "Reading the last 20 invoices.",
  status: "in-progress",
  details: <Text text="Found 3 overdue invoices." />,
};

`ActionLogStep`

string

required

Stable identity used as the React key and to preserve disclosure state.

string

required

Plain-text step name.

string

Supporting text rendered beneath the title.

ReactNode

Extra content revealed through a per-step details disclosure.

"not-started" | "in-progress" | "success" | "error"

default:"not-started"

Visual status and localized screen-reader label.

Concepts & Guidelines

Anvil2

Resources

Action Log - Web

Options

Statuses

Descriptions

Details

Behavior

Expand and Collapse

Overflow

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Statuses

Descriptions and details

Expansion

Heading level

Internationalization

React Accessibility

`ActionLog` Props

`ActionLogStep`

​Options

​Statuses

​Descriptions

​Details

​Behavior

​Expand and Collapse

​Overflow

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Statuses

​Descriptions and details

​Expansion

​Heading level

​Internationalization

​React Accessibility

​ActionLog Props

​ActionLogStep

Options

Statuses

Descriptions

Details

Behavior

Expand and Collapse

Overflow

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Statuses

Descriptions and details

Expansion

Heading level

Internationalization

React Accessibility

`ActionLog` Props

`ActionLogStep`