# @super-assist/react/devtools

> The devtools entry and its Assisted pages tab.

## Entry

| Field    | Value                                                                     |
| -------- | ------------------------------------------------------------------------- |
| Import   | `@super-assist/react/devtools`                                            |
| Requires | `@assistant-ui/react-devtools`, an optional peer of `@super-assist/react` |

## Exports

| Export                  | Kind            | Description                                                                                                                                                                                                        |
| ----------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `AssistedDevtools`      | Component       | The devtools' `DevToolsModal` with `assistedPagesPlugin` as its plugin. No props.                                                                                                                                  |
| `AssistedDevtoolsPanel` | Component       | The devtools' `DevToolsPanel` with the same plugin, in its own shadow root, filling its container. `theme`, `"light"` or `"dark"`, defaults to `"light"`. For the panel's `devtools` and `AssistedPanel.Devtools`. |
| `assistedPagesPlugin`   | Devtools plugin | The tab, made with `createDevToolsPlugin`. Id `assisted-pages`, label "Assisted pages".                                                                                                                            |

- Render either inside `AssistedProvider`. Outside it, the tab reads "No AssistedProvider here.".
- `DevToolsModal` renders nothing in production builds. `AssistedDevtoolsPanel` works in every build, registering the runtime with the devtools while it is mounted, so pass it only to the people who should see it.

## The tab

The tab re-reads every second while it is mounted.

| Section                      | Shows                                                                                 |
| ---------------------------- | ------------------------------------------------------------------------------------- |
| Page                         | The open assisted page's name, or "No assisted page is open.".                        |
| Note the next turn sends     | The open page's note.                                                                 |
| get_page_content answers now | What `get_page_content` answers, called each second, or "The page lends no content.". |
| Actions                      | The open page's actions.                                                              |
| Fields                       | The open page's field tools, each with what every field says now.                     |
| Page tools                   | The open page's tools.                                                                |
| Global tools                 | Every other lent tool, the built-ins included.                                        |
| Destinations                 | Each destination's name and path, when the provider has `destinations`.               |

Each listed tool shows its name, a `ring` or `confirm` chip read from its markers, `id: <ids>` for a grouped action or field, and its description. A field tool also shows `<id> now <value>` for each field, or `now <value>` for a field without an id. Tools that have left are not listed.