The pick object
The file
{
"version": 1,
"updatedAt": "2026-08-30T15:15:53.230Z",
"picks": [ /* … */ ]
}
Rewritten on every change, pretty-printed, picks sorted by id. It is safe to delete: the runtime
recreates it on the next pick.
A pick
| Field | Type | |
|---|---|---|
id | number | progressive, 1-based. The <n> in PICK <n> |
label | string | "PICK 2" — the same number, spelled the way you say it |
note | string? | your instruction for the agent. Absent when you wrote none |
selector | string | unique CSS selector, resolving to exactly this element |
domPath | string | readable ancestor chain, html > body > div#app > main > button.cta |
tag | string | lowercase tag name |
classes | string[] | stable classes, hashed and framework-generated ones filtered out |
attributes | object | every attribute as written, values truncated at 160 characters |
text | string | textContent, whitespace collapsed and truncated |
html | string? | outerHTML, subject to the HTML setting. Absent when that is none |
rect | object | x, y, width, height, top, left, right, bottom, rounded |
style | object | computed presentation — see below |
framework | object | null | component metadata, or null when nothing owns the element |
page | object | { url, title } of the page the pick was made on |
pickedAt | string | ISO-8601 |
selector
Prefers an id, then a tag plus non-generated classes, and only walks up ancestors until the selector
is unique. Hashed and framework-generated classes — svelte-1a2b3c, css-1x2y3z,
Button_root_a1b2c3 — are skipped, so selectors survive a rebuild.
style
Read from getComputedStyle, so it is what the element actually renders as rather than what a
stylesheet asked for:
{
"display": "block",
"font": "13.3333px/normal",
"fontWeight": "600",
"color": "rgb(23, 25, 28)",
"background": "rgb(255, 176, 32)",
"padding": "10px 16px",
"margin": "0px",
"gap": "normal",
"borderRadius": "8px"
}
Enough to act on "make this bigger" or "why is this grey?" without anyone describing the element in prose.
framework
{
"framework": "vue",
"component": "CardItem",
"file": "/abs/path/src/components/CardItem.vue",
"line": 12,
"column": 4
}
framework is one of vue, react, svelte, angular. component, file, line and column
are present only where that framework exposes them — see
compatibility.
Best effort, and development-only: these all come from internals that a production build strips.
html
With htmlMode: 'truncated', the middle is elided rather than the tail, and the result never
exceeds the budget:
<section class="card-list"><article class="card"> … .json by the dev server.</p></section>
Markup carries its identity at both ends — the opening tag with its attributes, the closing tags that show where the element sits — while the bulk in between is the least identifying part.
What is re-read, and when
rect, style and html describe the element as it is now, not as it was when you picked it.
After a reload or a route change, a pick that re-attaches to its element has these re-read. id,
note and pickedAt are yours and are never overwritten.