# ToolActivity

## Parts

| Name                | Element | Purpose                                                                                                              |
|---------------------|---------|----------------------------------------------------------------------------------------------------------------------|
| `ToolActivity.Root` | div     | Wraps tool-call display. Tracks whether any call is still in progress.                                                |
| `ToolActivity.Call` | div     | Renders a single tool-call invocation. Supports render-prop children.                                               |
| `ToolActivity.Result`| div     | Renders the result of a tool call.                                                                                  |

## ToolActivity.Root props

| Prop      | Type                      | Default | Description                                                 |
|-----------|---------------------------|---------|-------------------------------------------------------------|
| `toolCalls`| `readonly ToolCallInfo[]`| —       | Array of tool calls to display.                              |
| `children` | `ReactNode`              | —       | Sub-components to render inside the activity wrapper.        |

## ToolActivity.Call props

| Prop          | Type                                                  | Default | Description                                                  |
|---------------|-------------------------------------------------------|---------|--------------------------------------------------------------|
| `toolCall`<br>required | `ToolCallInfo`                                     | —       | The tool call to display.                                   |
| `children`    | `((toolCall: ToolCallInfo) => ReactNode) | ReactNode`| —         | Render-prop or static content. Defaults to the tool name.  |

## ToolActivity.Result props

| Prop           | Type            | Default | Description                                                  |
|----------------|-----------------|---------|--------------------------------------------------------------|
| `toolCall`<br>required | `ToolCallInfo`| —       | The tool call whose result to display.                      |

## Usage

```tsx title="ToolActivity"
import { ToolActivity } from "@arlopass/react-ui";

function ToolCalls({ toolCalls }) {
  return (
    <ToolActivity.Root toolCalls={toolCalls}>
      {toolCalls.map((tc) => (
        <div key={tc.id}>
          <ToolActivity.Call toolCall={tc}>
            {(call) => (
              <span>
                🔧 {call.name}({JSON.stringify(call.arguments)})
              </span>
            )}
          </ToolActivity.Call>
          <ToolActivity.Result toolCall={tc} />
        </div>
      ))}
    </ToolActivity.Root>
  );
}
```

## Inside a Chat message

Compose with `Message` to show tool activity inline within conversation messages.

```tsx title="With Chat.Messages"
import { Chat, Message, ToolActivity } from "@arlopass/react-ui";

<Chat.Messages>
  {(messages) =>
    messages.map((msg) => (
      <Chat.Message key={msg.id} message={msg}>
        <Message.Root message={msg}>
          <Message.Content />
          {msg.toolCalls && (
            <ToolActivity.Root toolCalls={msg.toolCalls}>
              {msg.toolCalls.map((tc) => (
                <ToolActivity.Call key={tc.id} toolCall={tc} />
              ))}
            </ToolActivity.Root>
          )}
        </Message.Root>
      </Chat.Message>
    ))
  }
</Chat.Messages>;
```

## Data attributes

| Prop          | Type                          | Default     | Description                                                                                                      |
|---------------|-------------------------------|-------------|------------------------------------------------------------------------------------------------------------------|
| `data-state`  | `"active" | "idle"`             | `"idle"`    | Set on ToolActivity.Root. Active while any tool call is in progress.                                            |
| `data-status` | `"pending" | "running" | "complete" | "error"` | —         | Set on ToolActivity.Call and ToolActivity.Result. Status of the individual tool call.