v0.6.0 — Report module + in-place AuditFlow fixes

Annotate your running app.
Let an agent do the edits.

Circle a button. Point at a heading. Type "make this tonal". Pinta hands the annotation to your coding agent — Claude Code, Cursor, Aider, or any MCP-compatible tool — which edits the matching source files for you.

Install for Chrome View on GitHub
  • Works with
  • Claude Code
  • Cursor
  • Cline
  • Continue
  • Zed
  • Windsurf
  • Aider
  • MCP · HTTP
How it works

Annotate. Submit. Ship.

The extension talks only to the companion. The companion talks to any agent. Nothing is hard-wired to a vendor.

1

Annotate

Open the side panel. Press Alt+S to pick an element, or Alt+P to draw — arrow, rect, pen, pin. Type a comment per annotation.

2

Submit

Selectors and nearby text are usually enough — screenshot is opt-in (auto-on for drawings). The session is posted to the companion at localhost:7878.

3

Edit & reload

Your agent (woken via push) presents a per-file plan, applies after you confirm, and the side panel auto-reloads the tab once HMR detects the changes.

What Pinta includes · v0.6.0

The whole loop, shipped.

The core annotate → submit → edit loop plus the polish phases (inline editing, protocol, standalone, share files) — and five built-in modules: GitLab Issues, Test Pilot, AuditFlow, Chat, and Report. See the spec for the phase-by-phase breakdown.

Chrome MV3 extension

Svelte 5 + CRXJS. Side panel, popup, content-script overlay. Drawing canvas isolated in a Shadow DOM root so host CSS can't leak in.

Element selection

Hover-highlight, click-to-lock, computed selector, captured outerHTML, computed styles, and nearby text for grep fallback.

Drawing tools

Arrow, rectangle, pen, pin. Page-relative coords; drawings translate with scroll. Edge-aware comment popup positioning.

Full-page screenshots — opt-in

Scroll-and-stitch capture, composited with annotations baked in. Off by default to save ~1.5–2k vision tokens; auto-locks-on the moment a drawing lands in the batch.

Companion server

Node 20+. Native HTTP, WebSocket via ws, MCP via the official SDK. Sessions persisted as JSON in .pinta/sessions/. npx pinta-companion . — no clone needed.

Agent-agnostic

Claude Code skill ships with the repo. MCP server for Cursor / Cline / Continue / Zed / Windsurf. Aider poll script. Copy-to-clipboard for claude.ai web / ChatGPT. HTTP API is the floor.

HMR auto-reload

Side panel detects Vite, Webpack/Next.js, and Parcel HMR clients on the active tab and offers to refresh once the agent's edits land. Each annotation card flips to ✓ as it's applied.

Dark mode

Popup, side panel, and this landing page. Warm cream by day, indigo/violet by night, brand pink on either. Picks up prefers-color-scheme on first run; one-click toggle thereafter.

Push or poll handoff

The Claude Code skill defaults to push (/pinta) — wakes the agent the moment the companion has a session. Sandboxed setups can fall back to long-poll with /pinta --polling.

Multi-project routing

Run a companion per project — each picks the next free port (7878, 7879, …) and registers in ~/.pinta/registry.json. Side panel auto-routes the active tab via .pinta.json URL patterns; the /pinta skill finds the companion whose root matches the agent's pwd. No more wrong-project submits.

Share files for collaboration v0.2.0

Export any session as a single .pinta file — title, author, accent color, screenshots inlined. Drop it into another teammate's extension and it opens in a read-only viewer with a metadata pill on the page itself, accent-colored numbered halos at each target, and three actions in the footer: Send to agent (submits to their connected companion, your machine stays out of the loop), Copy (markdown for claude.ai web / ChatGPT), and Fork (clone into their own editable draft).

Per-page annotations across navigation v0.3.0

Review a multi-route flow as one session. Annotations stay pinned to the page they were drawn on; the side panel filters to your current page and shows a chip "N on M other pages" with Open buttons to jump between routes. Pin badges repaint automatically on reload / SPA nav via an overlay.ready handshake. One submit covers the whole batch — each annotation carries its own url so the agent files / groups output per page.

Built-in modules — GitLab Issues v0.3.0

Tick Create GitLab issues next to Submit and the agent files one issue per annotation via your glab CLI. No tokens stored anywhere — auth comes from glab auth login on your machine. Each issue body embeds the full-page screenshot (uploaded to the project's uploads endpoint), the selector, source file, and the annotated page URL. Before filing, the agent prompts in chat for batch metadata: domain (client / server / shared → domain:<choice> label), extra tags, assignees, or later to defer entirely.

Test Pilot — interactive UAT module new

Open the Test Pilot tab in the side panel: import a hand-written markdown UAT spec or let the agent generate one from your project context. Step through the resulting catalog row-by-row, marking each Pass / Fail / Untested. Click the ? on a row and the agent walks the tester through step-by-step instructions — short tester-friendly steps by default, or deeper technical context (curl, payloads, env vars) when you flip the Detailed help steps setting. Steps render with inline code, syntax-highlighted fenced blocks, and per-block copy-to-clipboard. Export the whole catalog as a markdown report with pass/fail/total tallies — pipe through pandoc for PDF.

Built-in modules

Pinta speaks more than annotations.

Modules ride along on a session or run interactively from their own tab — tick a checkbox, grant whatever setup the module needs once, and the agent handles the rest. Five ship today — GitLab Issues, Test Pilot, AuditFlow, Chat, and Report — plus an SDK for writing your own.

GitLab Issues

Per-submit

Tick Create GitLab issues next to Submit and the agent — after the source edits land — files one issue per annotation via your glab CLI. No tokens stored, transmitted, or written to disk by Pinta. Auth comes from glab auth login on your own machine.

  • One ticket per annotation, with selector + source file + page URL
  • Full-page screenshot uploaded to the project's uploads endpoint
  • Chat-based metadata prompt — domain label, tags, assignees, or later
  • Screenshot auto-locks ON when the module is ticked

Test Pilot

Interactive

A UAT module that lives in its own side-panel tab. Import a hand-written markdown test spec or let the agent generate one from project context, then step through the catalog row by row. Per-row ? asks the agent for step-by-step instructions with verbosity you can flip on the fly.

  • Pass / Fail / Untested marking, with per-section tallies
  • Inline Details checkbox — short tester-friendly steps or deep technical context per Re-ask
  • Steps render with inline code, fenced blocks (Prism syntax-highlighted), and > Note: callouts
  • Export the catalog as markdown for sharing or pandoc → PDF

AuditFlow

Interactive

Lighthouse-style audits inside Pinta — five built-ins (security, performance, accessibility, mobile, cross-browser) plus user-defined custom checks. Every finding is one click from Fix with agent, which now fixes the code in place — a per-finding loader, concurrent fixes, and Fix All on the category.

  • Five built-in audits — security, performance, accessibility, mobile, cross-browser
  • Define your own audits with a markdown spec — same format the built-ins use
  • Per-finding Fix with agent edits the source in place — runs concurrently, with Fix All per category
  • Pass/fail summary per audit, re-run on demand, results persist per project

Chat

Always-on

Three-tier chat that follows you across Pinta. A global tab for free-form questions, a Just Ask on every Annotate session, and per-row chat on Test Pilot — one wire, one UI, three entry points. Threads attach selector, screenshot, and surrounding context automatically.

  • Global header tab — ask anything about the project, threads persist per workspace
  • Just Ask on any Annotate session for a quick clarification before submitting
  • Per-row chat on Test Pilot — drill into a specific test without leaving the catalog
  • Auto-attaches the right context: selector, outerHTML, screenshot, current module state

Report

Interactive

Turn shipped work into a standup-ready summary. The Report tab merges your git + GitHub activity with Pinta sessions and lays them out as clean day cards — for a day, a week, a 10-day sprint, or any custom window.

  • Daily / weekly / sprint ranges, plus arbitrary custom windows
  • Multi-project — combine extra repos, grouped by project per day
  • Read-mode day cards with weekend-fold
  • One-click Markdown export, per-day or whole-range
Architecture

Three boundaries that matter.

Extension knows nothing about agents. Companion knows nothing about specific agents. Agents know nothing about the extension. That separation is the entire point.

Annotate
Chrome extension Overlay
Side panel
WebSocket
Capture
Pinta companion Local server port 7878
HTTP / MCP
Edit
Editors Claude Code
Cursor · Zed
Aider
writes
Session storage
{id}.jsonannotations
{id}.pngscreenshot
.pinta/sessions/
  • Extension Companion WebSocket · JSON sessions

    The extension only knows about the companion.

  • Companion Agents HTTP API · MCP server

    The companion is generic — no agent-specific logic.

  • Agents Project files Read · Plan · Edit

    Agents read sessions, present plans, then edit. HMR closes the loop.

Adapters

One companion. Every agent.

Each integration below works against the same running companion — no extension changes, no rebuild.

Agent Integration Status
Claude Code Skill (~/.claude/skills/pinta/) — push by default (/pinta), long-poll fallback (/pinta --polling) Reference, V1
Cursor / Cline / Continue / Zed / Windsurf MCP stdio server (pinta-mcp) proxies the companion Shipped V1
Aider Poll script under adapters/aider/ Shipped V1
claude.ai web / ChatGPT / etc. Side-panel Copy button — formats the session as markdown for paste-into-chat Shipped V1
Anything else HTTP API (/v1/sessions/poll, /v1/sessions/:id/status) Universal floor
Install & run

Two steps.

Install the Chrome extension, run the companion in your project, annotate. Node 20+ and Chrome (or any Chromium-based browser).

1. Install for Chrome 
~/your-project  —  zsh# 1. Install the extension from the Chrome Web Store (button above)

# 2. Run the companion in your project root
npx pinta-companion .

# 3. Install the /pinta skill, then fully restart Claude Code
npx pinta-companion@0.6.0 install-skill

# 4. Open Pinta in your browser, annotate, hit Submit
#    Then in Claude Code:  /pinta

For Cursor / Cline / Continue / Zed, add the MCP bridge to your agent's config: 

~/.cursor/mcp.json  —  json{
  "mcpServers": {
    "pinta": {
      "command": "npx",
      "args": ["-y", "-p", "pinta-companion", "pinta-mcp"]
    }
  }
}

Contributing to Pinta? See Development in the README — clone, npm install, npm run build, load unpacked.

What's next

Roadmap

V1 covers the core loop end-to-end. Next milestones, in priority order.

Phase 7

Polish

Drag-to-reorder annotations, group by file in the side panel, undo via git, plan-then-execute toggle.

Phase 13

Test Pilot catalog editing

Delete, add, edit, rename, and reorder sections + tests from the side panel. The on-disk spec stays in sync so the agent's "?" works on rows you added yourself.

Phase 14

Inquiry mode

A shared chat sheet for asking the agent questions — global header icon, "Just Ask" on Annotate, and per-row chat on Test Pilot. One wire, one UI, three entry points.

Shipped
Phase 15

AuditFlow

Lighthouse-style audits inside Pinta — security, performance, accessibility, mobile, and cross-browser out of the box, plus user-defined custom audits. Every finding is one click from "Fix with agent," which fixes the code in place.

Shipped
Phase 16

Report

A built-in Report tab — merged git + GitHub activity and Pinta sessions laid out as day cards across a day, week, or 10-day sprint, with clean Markdown export. Multi-project aware, custom ranges supported.

Shipped
Phase 17

Claude Design

Bring your design system into Pinta as an ambient module. Annotated edits conform to your component patterns automatically instead of free-styling — strict by default, configurable per project.

Exploring
Phase 18

Agent role routing

Open four /pinta terminals, give each one a job. --annotate, --test-pilot, --audit, --chat flags dedicate each Claude Code window to its own workload so a long audit run doesn't block your next annotation. Companion-enforced via 403 on cross-role claims — agents can't cross lanes even if they try.

Shipped
Made by

Mark Kevin Baldemor

Designed and built Pinta because the gap between "I can see what's wrong on this page" and "the agent edits the right file" was bigger than it had to be.

GitHub →  ·  Pinta on GitHub →