Point & Fix

Click an element in your running app, say what should change, and let an agent do it in a safe copy — with a quick check, a diff, and apply, keep, refine or undo.

Describing a UI bug in words is slow: “the second button in the pricing card on the right, the one that’s hard to read…”. Point & Fix lets you click it instead.

1. Open your app in the browser

Start your dev server as usual. Open the Browser in the side panel and enter its address — localhost:5173, or just 5173. Then click Point & Fix above the page.

Point & Fix loads your app through a small local proxy, so it can see the page and report errors from its console. The proxy is deliberately narrow:

only http on localhost, 127.0.0.1 and [::1] — never an address on the internet,
only GET and HEAD requests, no redirects, with a 5-second timeout and a 5 MB limit — it never sends forms or API writes,
never PaneScale’s own ports.

Point & Fix needs an open project, which is where the change will be made.

2. Select an element

The panel says Click an element in the preview. Move the mouse over the page — the element under the cursor is outlined — and click the one you mean. While you pick, links and buttons don’t fire. Esc cancels.

PaneScale shows what you picked: tag, id and classes, its size, its text and its selector path. Everything that comes from the page is treated as untrusted data — checked, shortened and handed to the agent as a description, never as instructions.

Where it lives in your code

Under Source location, PaneScale lists where the element probably comes from:

Framework debug info from React, Vue or Svelte development builds, or a data attribute your app sets — an exact file and line, marked as a strong candidate.
Otherwise a text search across the project for the element’s text, label or placeholder (up to 3,000 files, skipping .git, node_modules and dist) — up to five candidates with the matching line.

Pick the right candidate, or None of these — the agent searches itself. A location found by search is always labeled as a candidate: PaneScale never presents a guess as certain.

3. Describe the change

Choose the mode:

Mode	Use it for	The agent is told to
Change	Design and content — “more space above, bold text”	Make the smallest change for this element and leave tests alone
Fix bug	Behaviour — “the button stops reacting after the second click”	Find the real cause, add or extend a test that reproduces it if the project has tests, then fix the code

In Fix bug mode, the page’s recent console errors are passed along too — a chip shows how many. Pick the agent (Claude Code or Codex), leave Quick check on or turn it off, and click Let it change.

4. What happens next

PaneScale creates an isolated worktree and copies your uncommitted work into it, so the agent sees exactly what you see. Your node_modules are linked in.
The agent works on the change. The panel shows what it is doing; Stop ends it.
The quick check runs: your type check and lint — plus tests in Fix bug mode — or the build if the project has none of these. See Checks.
You get the result: the check chips, the agent’s summary and the diff.

If the agent changed nothing or gave up, the panel says so and offers Try again or Other element.

5. Apply, keep, refine or undo

Choice	What happens
Apply	The change is merged into your working copy — with a signed one-time approval and a checkpoint first. The preview reloads
Apply anyway	Shown when the quick check failed — applies regardless
Discard	Throws the change and its worktree away and lets you pick a new element
Refine	Tell the agent what to adjust — “a bit less space”. It continues in the same worktree, with its previous summary as context
Undo	After applying: restores your files from the checkpoint. Files you edited since are kept
Keep	After applying: done — the worktree is cleaned up and you can pick the next element

If you changed the same lines yourself in the meantime, Apply stops with a conflict message instead of overwriting your work.

The console

While Point & Fix is connected, the browser collects your page’s errors and warnings. A red badge in the address bar shows the number of errors since the last load; click it to see them, with their source. Reloading the page clears the list.

Good to know

Point & Fix works in a copy, so your dev server keeps running on your own files. After Apply, your dev server picks up the change as usual and the preview reloads.
Turn the feature off or on in Settings → Labs.
Token Guardian treats Point & Fix as an attended run: by default, a fired rule pauses and asks you.

#1. Open your app in the browser

#2. Select an element

#Where it lives in your code

#3. Describe the change

#4. What happens next

#5. Apply, keep, refine or undo

#The console

#Good to know