> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Action Log – Code

> The ActionLog presents a collapsible timeline of agent steps, statuses, descriptions, and details.

<Tabs>
  <Tab title="Implementation">
    ```tsx theme={null}
    import { ActionLog } from "@servicetitan/anvil2-rn";

    function App() {
      return (
        <ActionLog
          steps={[
            {
              id: "a",
              title: "Looked up the customer account",
              status: "success",
              description: "Retrieved account details and recent payment history.",
            },
            {
              id: "b",
              title: "Pulled the last 20 invoices",
              status: "success",
              description: "Found 3 overdue invoices totaling $1,240.",
            },
            {
              id: "c",
              title: "Drafting the follow-up summary",
              status: "in-progress",
              description: "Summarizing overdue balances and payment history.",
            },
          ]}
        />
      );
    }
    ```

    ## Common Examples

    To use the `ActionLog`, pass configured steps through the required `steps` prop. Each step requires a stable `id` and a `title`. An empty `steps` array renders nothing.

    ```tsx theme={null}
    import { ActionLog } from "@servicetitan/anvil2-rn";

    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.

    ```tsx theme={null}
    <ActionLog
      steps={[
        {
          id: "success",
          title: "Looked up the customer account",
          status: "success",
        },
        {
          id: "in-progress",
          title: "Drafting the follow-up summary",
          status: "in-progress",
        },
        {
          id: "not-started",
          title: "Send the summary to the customer",
          status: "not-started",
        },
        {
          id: "error",
          title: "Charge the saved card",
          status: "error",
        },
      ]}
    />
    ```

    ### Descriptions and details

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

    ```tsx theme={null}
    import { ActionLog, Text } from "@servicetitan/anvil2-rn";

    <ActionLog
      steps={[
        {
          id: "a",
          title: "Pulled the last 20 invoices",
          status: "success",
          description: "Found 3 overdue invoices totaling $1,240.",
        },
        {
          id: "b",
          title: "Drafting the follow-up summary",
          status: "in-progress",
          description: "Summarizing overdue balances and recent payment history.",
          details: (
            <Text
              size="compact"
              text="Overdue since April · last payment May 3 · $1,240 across 3 invoices."
            />
          ),
        },
      ]}
    />
    ```

    ### Expansion

    The step list starts expanded. Set `defaultExpanded={false}` to start collapsed. Pass `expanded` and `onExpandedChange` to control the list, for example to keep it open while a response streams. Each step's details stay independently uncontrolled.

    ```tsx theme={null}
    <ActionLog defaultExpanded={false} steps={steps} />

    <ActionLog
      expanded={isStreaming}
      onExpandedChange={setOpen}
      steps={steps}
    />
    ```

    ## Accessibility

    * Status markers use `accessibilityRole="image"` and a status label. They do not imply form semantics.
    * Show steps / Hide steps and Show details / Hide details are disclosure buttons. Details toggles include the step title in `accessibilityLabel` so repeated controls stay distinguishable.
    * Stable step `id` values preserve each details disclosure when steps stream or re-render.
    * Built-in toggle and status labels are English until the kit gains an i18n layer. Localize `title` and `description` before passing them.
  </Tab>

  <Tab title="ActionLog Props">
    ```tsx theme={null}
    <ActionLog
      steps={steps}
      defaultExpanded
      expanded={isStreaming}
      onExpandedChange={setOpen}
    />
    ```

    ## `ActionLog` Props

    The `ActionLog` accepts the following props. It does not forward remaining React Native `View` props.

    <ParamField path="steps" type="ActionLogStep[]" required>
      Steps to render from top to bottom. An empty array renders nothing.
    </ParamField>

    <ParamField path="analyticsId" type="string">
      Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`, toggling
      the steps list or a step's details emits a `toggle` event with
      `meta.section` (`"steps"` or `"details"`) and `meta.expanded` before
      `onExpandedChange`.
    </ParamField>

    <ParamField path="defaultExpanded" type="boolean" default="true">
      Whether the step list starts expanded when uncontrolled.
    </ParamField>

    <ParamField path="expanded" type="boolean">
      Controlled expanded state for the step list. Pair with
      `onExpandedChange`.
    </ParamField>

    <ParamField path="onExpandedChange" type="(expanded: boolean) => void">
      Fires with the next expanded state when the steps toggle is pressed.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the root `View`.
    </ParamField>
  </Tab>

  <Tab title="ActionLogStep">
    ```tsx theme={null}
    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`

    <ParamField path="id" type="string" required>
      Stable identity used as the React key and to preserve disclosure state.
    </ParamField>

    <ParamField path="title" type="string" required>
      Plain-text step name.
    </ParamField>

    <ParamField path="description" type="string">
      Supporting text rendered beneath the title.
    </ParamField>

    <ParamField path="details" type="ReactNode">
      Extra content revealed through a per-step details disclosure and rendered
      inside a `Card`.
    </ParamField>

    <ParamField path="status" type={`"not-started" | "in-progress" | "success" | "error"`} default="not-started">
      Visual status and screen-reader label for the marker.
    </ParamField>
  </Tab>
</Tabs>