LiGMA is a dev-only overlay for Vite + React. Click an element on your page, say what's off, press enter. Your coding agent is working on that element, not one that shares its class, before you've looked away.
node scripts/watch-notes.mjs
This page is wearing the overlay. Hover a component to peek · click it to open a thread · f f arms the picker, then drag a box · a pins · esc off
You see the wrong button. The agent sees nothing. So you type a paragraph locating it, and the sentence about the actual change comes last. The locating is 80% of the typing and 100% of the misunderstandings. The obvious fix, tell it the class, is a trap.
The identity card carries the selector, how many elements share it, and the element's
own words. .btn is nine buttons. .btn reading “Contact” is
one. Dashed is a peek, solid is a pick.
Try it: you are peeking right now.
Click an element and a thread opens under it, on the page, the Figma move. The bubble is the whole conversation: history, what the agent is doing, the chips. Drag it by its header, double-click to put it back. ✓ resolves and keeps the record; ✕ removes it, and asks twice.
Ask for versions. The agent offers them as rulesets and you get chips that swap the
live stylesheet. original is always a chip, because comparing against a
memory of what was there is how a set talks you into a change you didn't want. A set
nobody is steering plays itself.
Try it: every component on this page has five on offer.
The moment you send, the component wears an outline and a chip reading
queued. When an agent claims it the chip says who, and the component runs
a pixel field: value noise through an 8×8 Bayer matrix, drawn as jittered circles with
rings crossing it. Something is happening to it. When the change lands it ticks
itself off, pushed over Vite's own HMR socket.
A pencil beside send opens a pad: pen, line, arrow, eight shapes, text and an eraser, five inks, three weights, a select tool with handles, a clipboard that outlives the pad, undo and redo. What you draw lands beside the message as a PNG. A screenshot is evidence; a drawing is intent. Try it: open the pad from any thread's pencil.
The bytes go to .lab/shots/, the path rides on the note, and the agent
gets a file it can open rather than your description of one. A picture on its own
sends: “not like this” with a shot attached is a complete thought.
Try it: paste an image into a composer here.
A click picks one thing; a drag picks everything the box closes over, which is what a pass across a row of cards actually is. Only what it fully encloses, and only the outermost, so three cards do not open forty composers. Capped at twenty. Try it: f f, then drag across the tiles up top.
Every time the page paints a component differently, the moment is recorded on its
thread. Drag left to walk it back through states it has actually been in; the right
end is live. It survives the dev-server restart an agent's edit causes. Found the one
you wanted? undo to here posts the exact drift, now → then.
Try it below, and in any thread after a chip.
The original reason this existed: opacity, tile and blend sliders on any selector,
live. The same --grain-op reads as texture on a dense card and as a dirty
screen on a full-bleed band, and no reasoning about the number in source settles it.
copy css gives you the rule, selector escaped.
Grain, the notes list and the sets that have no thread live in a panel: a floating card dragged by its bar and resized by its corner, both remembered, or a drawer on the right edge that leaves a tab behind. It is see-through to the picker: hover it while armed and it fades, so the element under it can be picked.
Armed, the FAB fills and pulses, the viewport takes a ring, and the native cursor gives way to a reticle with a word on it. It stays armed between picks and stands down while a composer is open. f f, twice, because a single letter that swallows every click on the site is a trap. Escape always gives the page back.
The overlay, its store and its stylesheet sit behind a build-time gate, so the bundler
drops them entirely. Build, grep dist/, find nothing. A runtime flag would
leave the whole thing one ?grain away from a stranger's browser.
.lab/state.json has two writers, the browser and the agent, and everything
else is plumbing around that one fact. No server to run, no socket to own: Vite's dev
server carries the endpoint and its HMR channel carries the answer back. Nothing in it
expires on its own; lab.mjs stale lists what is still open and the decision
stays with whoever is looking at the page.
Keep the watcher running and each note arrives as one line, actionable with nothing else attached. One agent takes one thread: a thread carries a claim and the name of the agent holding it, so several agents can watch one file and never collide. The first thing an agent does, before it reads a single file, is say so.
lab.mjs take ‹id›
First, before reading a file. Puts the agent's name on the chip; fails if another agent has it.
lab.mjs step ‹id› "…"
What is happening, as it happens. Shown in the bubble; nothing animates.
lab.mjs finish ‹id› "…"
Five short sentences at most. Replies over 400 characters are refused, not cut.
lab.mjs variants set.json
Offer treatments as rulesets, on a thread. The chip reads your call until one is chosen. Also reply, say, attach, drop, stale.
Target: a Vite + React + TypeScript app. Nothing here needs a router, a state library,
Tailwind, or any dependency at all. The one step to get right is the gate, and the last
step proves you got it right. Several apps? scripts/sync.mjs pushes this source
to every install and runs each one's own prettier.
Lab.tsx imports @/lib/lab. No alias? Change that one line; it is the only cross-file import in the set.
cp -r LiGMA/src/lib/lab.ts <app>/src/lib/lab.ts cp -r LiGMA/src/components/Lab.tsx <app>/src/components/Lab.tsx cp -r LiGMA/src/lab.css <app>/src/lab.css cp LiGMA/vite-plugin-lab.ts <app>/vite-plugin-lab.ts cp LiGMA/scripts/lab.mjs <app>/scripts/lab.mjs cp LiGMA/scripts/watch-notes.mjs <app>/scripts/watch-notes.mjs
apply: 'serve', so it does not exist in a build. It serves the endpoint, writes the file atomically, and pushes outside changes over HMR.
// vite.config.ts import { labPlugin } from './vite-plugin-lab' export default defineConfig({ plugins: [react(), labPlugin()], })
import(), not the JSX. Guard only the render and Rollup still emits the chunk for an import it can see.
// App.tsx const Lab = import.meta.env.DEV ? lazy(() => import('@/components/Lab').then((m) => ({ default: m.Lab }))) : null {Lab && <Suspense fallback={null}><Lab /></Suspense>}
npm run build
grep -o "__lab/state\|gl-panel" dist/assets/*.js dist/assets/*.css
# no output = the overlay is not in your bundle
?grain
Read once, remembered for the tab. ?grain=0 turns it off. Then paste the block from docs/AGENT.md into your CLAUDE.md so the agent knows the loop exists.
http://localhost:5173/?grain
The agent is working on it before you've looked away. Six files, no build, nothing in production.