Action Log – 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 a neutral progress marker for "not-started", "in-progress", and "success". "error" uses the critical treatment.

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.

AI Kit

Agent Experience

Action Log – Code

Common Examples

Statuses

Descriptions and details

Expansion

Heading level

Internationalization

React Accessibility

`ActionLog` Props

`ActionLogStep`

​Common Examples

​Statuses

​Descriptions and details

​Expansion

​Heading level

​Internationalization

​React Accessibility

​ActionLog Props

​ActionLogStep

Common Examples

Statuses

Descriptions and details

Expansion

Heading level

Internationalization

React Accessibility

`ActionLog` Props

`ActionLogStep`