Components

X-ray

X-ray reveals what the model can read, write and do on any screen. One switch outlines every region with its reach, so people can check an AI-rich screen before they trust it.

Live specimen

Turn on the switch in the small screen. Then tap the eye in the dock to X-ray this whole page.

Anatomy

Five kinds of reach

ReachOutlineMeaning
Model readsFaint tyrianThe model can read this region
Model writesSolid tyrianThe model writes or rewrites here
Model may actSolid tyrianThe model may press this on its own
Model preparesHatched tyrianThe model sets this up; a person confirms
Person onlyInkOnly a person may use this

Build it

Declare reach on any element with a data-reach attribute. X-ray reads the attributes; it doesn’t guess.

<section data-reach="read">…</section>
<div data-reach="write">Summary…</div>
<button data-reach="act">Draft reply</button>
<button data-reach="prepare">Book viewing</button>
<button data-reach="person">Sign lease</button>

Best practices

  • Declare reach for every region an agent can see, not only for buttons.
  • Keep the declared reach and the server’s rules in one place, so they can’t drift apart.
  • Use X-ray in reviews: turn it on and check that nothing the model can touch is unmarked.

Accessibility

  • X-ray is announced when it turns on and off.
  • The overlay is decorative; each control already carries its reach in its name.
  • Escape turns it off.

Specifications

Attribute
data-reach = read · write · act · prepare · person
Overlay
Fixed, below the top bar, never intercepts touches
Updates
On scroll, resize and route change
DelegationHand work to an agent, see what it did, and take it back.Built for agentsHow this site reads to AI agents: prerendered pages, llms.txt and reach annotations.SealButtons that show what the model may press; irreversible ones need a hold.ActionsMarksReach marks, the model mark and the model caret.