ViewGraph Capture από Sourjya S. Sen

ViewGraph is the UI context layer for AI coding agents. When you see a bug in the browser, click it, describe what's wrong, and send it to your agent. The agent receives the element's exact CSS selector, computed styles, accessibility state, and your comment - then finds the source file and fixes the code.

Features:
- Click any element to annotate with comments, severity, and category
- Shift+drag to select a region
- Idea mode: toggle the lightbulb to switch from bug reporting to feature ideation
- Auto-inspect suggestions: automatic 3-tier scan (accessibility, quality, testability) with add-to-review flow
- URL trust indicator: shield icon shows trusted (green), configured (blue), or untrusted (amber) pages
- Send gate: blocks send-to-agent for untrusted URLs with add-to-trusted or override options
- Smart suggestions: clickable chips for detected issues (missing aria-label, no testid, low contrast)
- Keyboard shortcuts: Ctrl+Enter (send), Ctrl+Shift+C (copy), 1/2/3 (severity), Esc (close)
- 17 enrichment collectors: network, console, accessibility, layout, components, client storage, transient state, and more
- Page Activity: captures toasts, flash content, animation jank, and render thrashing via 30s mutation buffer
- Built-in diagnostics: copy or create notes from any section - no DevTools needed
- Auto-audit: automatically runs a11y, layout, and testid audits after each capture
- Three export modes: Send to Agent (MCP), Copy Markdown (Jira/GitHub), Download ZIP report
- HMAC-signed communication: secure authenticated connection between extension and server
- Baseline management: set and compare structural baselines from the sidebar
- Multi-project support with automatic URL routing (up to 4 simultaneous projects)
- Session recording for multi-step user journeys
- HTML snapshots and screenshots saved alongside captures
- Prompt injection defense: 5-layer protection (sanitize, wrap, detect, harden, gate)
- Works with Kiro, Claude Code, Cursor, Windsurf, Cline, and any MCP-compatible agent
- 37 MCP tools for querying, auditing, diffing, and generating specs

Security:
- No account required. No data sent to external servers.
- All captures stay on your machine and are sent only to a localhost server you control.
- HMAC-signed requests: challenge-response handshake, replay-proof signatures.
- URL trust indicator blocks untrusted page captures from reaching AI agents.
- Prompt injection defense strips HTML comments, wraps text in delimiters, detects suspicious patterns.
- STRIDE threat model with 9 identified and mitigated threats. 5 security reviews passed.
- Open source (AGPL-3.0).

Documentation:
- Site: https://chaoslabz.gitbook.io/viewgraph
- Quick Start: https://chaoslabz.gitbook.io/viewgraph/getting-started/quick-start
- Security: https://chaoslabz.gitbook.io/viewgraph/reference/security
- Threat Model: https://chaoslabz.gitbook.io/viewgraph/reference/threat-model
- GitHub: https://github.com/sourjya/viewgraph