Using the picker

Picking

While picker mode is on, clicks are intercepted: clicking a link picks it instead of navigating.

Picks survive a page reload — on load, each stored selector is re-resolved — and they survive client-side route changes, which is covered below.

The shortcut is a whole combination and nothing is implied, so ctrl+shift+p or f2 work as well as alt+q. See shortcut.

The toolbar

[⠿] [quello] [3 picks ⌄] [⚙] [–]

• ⠿ drags the toolbar anywhere; it remembers where you left it
• quello toggles picker mode, and reads picking… while it is on
• 3 picks opens the pick list
• ⚙ opens settings
• – collapses everything to a single puck, which is itself draggable; click it to expand

The pick list

The counter opens a dropdown with every pick, on every page. Each row shows the component (or the tag), the page it belongs to, the selector and a snippet of text, plus its note if it has one.

Hovering a row outlines its element on the page. Clear all sits at the foot of the list.

Notes

A pick can carry a note: free text you write for the agent.

Click a badge to open the editor. Enter saves, Shift+Enter adds a line, Esc closes keeping what you typed. An empty note removes the field entirely. A badge with a note is ringed in amber.

This is what makes "resolve the picks" work: the agent reads the notes and carries each one out against the element it is attached to. Turn on Ask on every pick in settings to have the editor open by itself as soon as you select something.

Settings

The ⚙ panel has four tabs. Everything in it is a working preference, kept per-developer in localStorage — anything that belongs to the project is a plugin option instead.

HTML

How much of the element's markup each pick carries.

Truncation removes the middle, not the tail: markup carries its identity at both ends — the opening tag with its attributes, the closing tags that show where it sits — while the bulk in between is the least identifying part.

Clipboard

Mirror each pick to the clipboard as you make it: the last pick alone, or the whole list. Both use the same JSON shape as the file, so a paste is something the agent already knows how to read.

Notes

Whether the note editor opens automatically on every pick.

Theme

Fill (solid) or Glass (frosted, translucent) for quello's own toolbar and panels. This is the tool's appearance — the outlines drawn on your page are the plugin's theme.

Across pages {#across-pages}

Picks outlive route changes. Each remembers the page it was made on, and the runtime watches the URL — through popstate, hashchange and a short poll, since client-side routers change the URL without firing anything you can subscribe to.

So the list is global and the badges are local:

The hash is deliberately not part of a page's identity: jumping to #section is not landing on another page, so in-page anchors leave badges alone.