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

# Step Highlighting

> Watch the active conversation step highlight in real time during a live session.

# Step Highlighting

During a live test session, the canvas highlights the currently active conversation step node in real time.

## How it works

The agent publishes `voiceblox.agent.events` data channel messages to the LiveKit room. The frontend subscribes to these messages and updates the canvas accordingly.

### Event types

| Event         | When it fires                         | Canvas effect                  |
| ------------- | ------------------------------------- | ------------------------------ |
| `step_change` | Agent advances to a new step          | Highlights the new step node   |
| `tool_call`   | Agent calls an MCP tool or Exa search | Shows tool activity indicator  |
| `tool_result` | Tool returns a result                 | Clears tool activity indicator |

### Event payload

```typescript theme={null}
{
  type: "step_change",
  stepId: string,       // ID of the newly active step node
  stepType: string      // e.g., "burst", "ifelse", "end"
}
```

## What you see

* The active step node pulses with a colored highlight
* When branching (If/Else, Categorize), the selected branch's edge animates
* Tool calls show a spinner on MCP/Exa nodes

## Use cases

Step highlighting is especially useful for:

* **Debugging** — verify the agent follows the expected path through the flow
* **Demonstrations** — show stakeholders how the conversation flows visually
* **Validating branches** — confirm the correct branch is taken for given user input