Inspector Docs Callouts

Inspector is the localhost overlay that shows Threads, Agents, and Learning. Every shipped pane that a reader can use must have a docs pointer. The pointer tells the reader to open Inspector and look at that pane.

When To Use

Load this skill when:

• A pane, tab, or overlay action is added, renamed, or removed in Inspector
• A docs page teaches a feature that Inspector already shows
• A PR touches both Inspector source and product docs

Do not load it for icon, ping, layout, or copy-only Inspector changes that do not add a pane. Those UI changes use inspector-workbench.

If the same change also edits Inspector UI, load inspector-workbench as well and start the standalone lab.

Procedures

Procedure 1: Map a shipped pane to docs

1. Name the shipped pane using the label the reader sees in Inspector.
2. If mapping a pane, read references/pane-map.md before proceeding.
3. If the pane is not shipped, stop. Do not add a Callout.
4. If the map already has a page, open that page and confirm the Callout names this pane and what success looks like.
5. If the map has no page, add a Callout on the matching shared root docs page, or write no page yet in the map. Do not invent a page.
6. Update references/pane-map.md in the same change.

Procedure 2: Remove a pane

1. If removing a pane, read references/pane-map.md before proceeding.
2. Remove the Callout from the mapped page.
3. Delete the map row.

Procedure 3: Quickstart sanity-check step

The default web quickstart includes a numbered step after the first chat:

1. Agents then Agent: the agent is listed.
2. Send a chat message. Agents then AG-UI Events: events are moving.
3. Threads: unlocked, or locked with Enable Intelligence.

Angular uses the shared step snippet, like every other web frontend: @copilotkit/angular auto-mounts a pinned @copilotkit/web-inspector, so there is no install step to link (OSS-948). React Native and Channels do not get this step at all.

Decision Tree

• Inspector pane added, renamed, or changed:
  • If the pane is not shipped: stop
  • Else: Procedure 1
• Inspector pane removed: Procedure 2
• Quickstart or first-run docs: Procedure 3
  • If a pane is also new: Procedure 1

Red Flags

Error Handling

• Pane is not shipped: halt. Do not add a Callout for Playground, Fork, emit events, or other unshipped work.
• No matching docs page: record no page yet in the map. Do not create a new docs section unless the user asked for one.
• Non-web surface (React Native, Channels): do not add "click the Inspector button".
• Callout names a pane the overlay does not show: rewrite the Callout or remove it.