pinpoint-paste

pinpoint paste handler

The user clicked Send in the pinpoint overlay and pasted the resulting JSON. It looks like:

{ "source": "pinpoint", "version": 2, "bridgeUrl": "http://localhost:7331",
  "sessionId": "…", "promptId": "…",
  "items": [{ "badge": 1, "kind": "element",
    "selected": [{ "selector": "#hero-heading", "tagName": "H1", "text": "…",
      "identifiers": { "id": "hero-heading" },
      "react": { "componentName": "Hero", "ancestry": ["Hero","App"],
        "source": { "file": "/src/App.tsx", "line": 7 } } }],
    "comment": "make it bigger", "screenshot": "/abs/path/anno-1.png" }] }

Steps

1. Parse the JSON block from the message (ignore any prose the user added around it).
2. Ack immediately — this clears the browser the moment you start working. Run:

   curl -fsS -X POST "<bridgeUrl>/session/<sessionId>/ack" \
     -H 'content-type: application/json' \
     -d '{"promptId":"<promptId>","status":"running"}'
   

   (substitute bridgeUrl, sessionId, promptId from the JSON.)
3. For each item, apply its comment using its selected[] entries:
   • If screenshot is a path, Read it for visual context.
   • For each entry in selected, locate the source — cheapest signal first:
     • react.source ({ file, line }) when present → open that file at line directly; it's the element's exact source location.
     • else identifiers (id, testId/data-testid, aria-label, role, name) → grep these; they pin source fastest.
     • else grep react.componentName (function <name>, const <name> =, export default function <name>), disambiguating with react.ancestry (nearest-first).
     • else fall back to the entry's visible text + the CSS selector.
   • A kind: "element" item has exactly one selection (the picked element). A kind: "screenshot" item's selected[] holds the outermost container(s) plus the innermost leaf elements the region covered (any number of entries) — use them together to find the right component(s).
   • Make the edit; let the dev server hot-reload.
4. Summarize the per-item edits back to the user.

Notes

• The comment is the instruction. An empty comment → ask the user what they want for that item.
• Prose the user typed around the JSON is extra context — honor it.
• This flow is fully decoupled: the ack is a plain HTTP call (no MCP needed). If curl fails (bridge not running), proceed with the edits and tell the user the browser won't auto-clear.
• A screenshot item may have an empty selected: [] (region dragged over blank space) — in that case rely on the screenshot image (and any prose the user added) to locate the change.
• A future version may also send a final status:"done" ack.