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

> ## Agent Instructions
> Reticle is a dev-only, localhost-only verification layer for AI coding agents. It reads program truth (network, state, console, routing, animations, framework state) from inside a running web app and returns a deterministic verdict with evidence. It is not a screenshot tool and not a browser automation library.
> Only `reticle_act_and_wait` and `reticle_assert` produce a verdict. Every other tool moves or reads the app and proves nothing. A drive that ends without one of those two has no result, however many tools it used.
> A verdict of `verified: "unknown"` is not a pass. It means Reticle drove the app and could not tell what happened. Report it as unknown; never weaken a check to make it pass.
> Package names are scoped `@reticlehq/*` and the CLI is `reticle`. Install with `npx reticle init`. The complete tool surface is on the `/usage` page; `/agent-cheatsheet` is the one-screen version.

# reticle_inspect

> Everything about one element. Accessibility properties, geometry, computed styles, design tokens, React component stack, and the exact source file and line.

`reticle_query` finds elements. `reticle_inspect` tells you everything about one of them. It is the tool that turns a finding into an edit, because it ends with a file and a line number.

## Example

```json theme={"dark"}
{ "ref": "e20" }
```

Real response:

```json theme={"dark"}
{
  "ref": "e20",
  "role": "button",
  "name": "Compose",
  "visible": true,
  "source": "src/components/Sidebar.tsx:41",
  "tag": "button",
  "occluded": false,
  "states": ["present", "visible", "enabled"],
  "box": { "x": 14, "y": 211.75, "width": 219, "height": 37.5 },
  "styles": {
    "color": "rgb(147, 152, 168)",
    "backgroundColor": "rgba(0, 0, 0, 0)",
    "opacity": "1",
    "cursor": "pointer",
    "display": "flex",
    "visibility": "visible"
  },
  "theme": {
    "colorToken": "--muted",
    "backgroundToken": null,
    "offTheme": false,
    "tokenCount": 17
  },
  "component": {
    "componentStack": ["Sidebar", "App", "QueryClientProvider"],
    "source": { "file": "src/components/Sidebar.tsx", "line": 41, "column": 8 }
  }
}
```

## What each block is for

**`component`** is the payoff. The stack `["Sidebar", "App", "QueryClientProvider"]` tells your agent where this element lives in the tree, and `source` tells it which file to open. This needs `@reticlehq/react`; without it you still get everything else.

**`theme`** catches a bug class most tools cannot see. `colorToken: "--muted"` means this colour came from your design system. `offTheme: false` means nothing here is a hardcoded hex that slipped past review. An agent that pastes `color: #939AA8` instead of using the token produces a change that looks identical and quietly forks your design system. This field is how that gets caught.

**`occluded`** is the difference between "visible" and "actually clickable". An element can be present, visible and enabled while sitting under a modal overlay. `states` will look perfect; `occluded: true` is the honest answer.

**`box`** is geometry in CSS pixels. Useful for layout assertions and for working out whether something is off-screen rather than hidden.

## When to reach for it

<CardGroup cols={2}>
  <Card title="A click did nothing" icon="hand-pointer">
    Check `occluded` and `states` before assuming the handler is broken. Very often the handler is
    fine and something is sitting on top of it.
  </Card>

  <Card title="You need to edit the code" icon="file-pen">
    `component.source` is the file and line. This is the fastest path from symptom to diff.
  </Card>

  <Card title="A style looks wrong" icon="palette">
    `theme.offTheme` tells you whether the value came from your tokens or from somebody's clipboard.
  </Card>

  <Card title="Layout is suspicious" icon="ruler">
    `box` gives you real geometry, no screenshot and no vision model required.
  </Card>
</CardGroup>

<Note>
  `inspect` returns one element in detail. If you find yourself inspecting six things in a row, you
  probably want [`reticle_query`](/tools-query) with `attrs` instead, one call, six answers.
</Note>