> For the complete documentation index, see [llms.txt](https://chaoslabz.gitbook.io/viewgraph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chaoslabz.gitbook.io/viewgraph/reference/roadmap.md).

# Roadmap

What's shipped, what's next, and where ViewGraph is heading.

## Shipped (v0.2.0)

### Browser Extension

* Click/drag annotation with severity and category
* Two-tab sidebar: Review (annotations, export) + Inspect (network, console, diagnostics)
* Three export modes: Send to Agent, Copy Markdown, Download ZIP
* 17 enrichment collectors (network, console, a11y, layout, components, and more)
* Multi-project support with automatic URL routing
* Session recording for multi-step user journeys
* Auto-capture on HMR/file changes
* Keyboard shortcuts (Escape, Ctrl+Enter, Ctrl+Shift+C, severity 1/2/3, Delete)
* Help overlay with shortcut cheat sheet and documentation links
* Journey recorder with auto-capture on SPA navigation
* Pending state feedback (amber "Sent to agent" while fixes are in progress)
* Real-time resolution sync (annotations turn green as agent fixes them)
* Settings moved to footer, cleaner header with VG icon

### MCP Server (38 tools)

* Core: list, get, summarize captures
* Analysis: accessibility audit (axe-core), layout audit, missing testids, interactive elements
* Annotations: resolve, track, diff, detect patterns, generate specs
* Comparison: structural diff, baseline regression, screenshot pixel diff, cross-page consistency, CSS style diff
* Coverage: component testid coverage report
* Sessions: journey recording, flow visualization
* Source: find source file with React fiber support
* Bidirectional: agent requests captures, extension delivers
* Config: project-level feature flags via `.viewgraph/config.json`

### Playwright Integration

* `@viewgraph/playwright` npm package (published on npm)
* Capture DOM snapshots during E2E tests
* Programmatic annotations from test assertions
* Generate tests from captures via `@vg-tests`

### Kiro Power

* 8 hooks: capture-and-audit, fix-annotations, check-testids, security-tier1-precommit, security-tier2-feature, security-tier3-sprint, comment-standards-check, doc-sync-check
* 9 prompt shortcuts: @vg-audit, @vg-review, @vg-capture, @vg-diff, @vg-testids, @vg-a11y, @vg-tests, @vg-help, @vg-ideate
* 3 steering docs for agent behavior

### Distribution

* npm: `@viewgraph/core` and `@viewgraph/playwright` published
* GitHub: public repo with 1788 tests
* GitBook: 28 pages of documentation
* Firefox Add-ons: approved and live. Chrome Web Store: live

## Coming Next

### Auto-Audit on Capture (F3)

When enabled, the server automatically runs accessibility, layout, and testid audits after each capture. Results appear in the Inspect tab as a summary badge. Toggle via project config.

### Smart Annotation Suggestions (F5)

Context-aware suggestion chips in the annotation panel. When you select an element, ViewGraph surfaces issues from enrichment data: "Missing aria-label", "Console error: TypeError...", "Low contrast (2.1:1)". One click to populate the annotation.

### Baseline Management UI (F4)

Set, view, and compare baselines from the sidebar. See diff summaries inline: "+3 elements, -1 element, 2 moved." Optional auto-compare on new captures.

### Ideation Pipeline (F12)

Annotate screens with feature ideas instead of bugs. Set category to "idea", send to agent, and use `@vg-ideate` to generate a full feature spec with requirements, user stories, and acceptance criteria - all grounded in the actual UI context from the capture.

### Capture Timeline (F6)

Visual timeline in the Inspect tab showing all captures for the current URL with diff indicators between them.

### Native Messaging Transport

Replace localhost HTTP with Chrome/Firefox native messaging for extension-to-server communication. Eliminates the localhost HTTP attack surface.

### Service Worker Communication Hub

Move all extension-to-server communication (HTTP, WebSocket, auth, polling) from the content script to the service worker. Enables background annotation sync even when the sidebar is closed, persistent HMAC auth sessions, badge notifications when the agent requests a capture, and a single server connection shared across all tabs instead of one per sidebar. Net security improvement - all network I/O moves out of the content script. [ADR-017](https://github.com/sourjya/viewgraph/blob/main/docs/decisions/ADR-017-sw-communication-migration.md).

### Extension Store Listings

Firefox Add-ons listing is live. Chrome Web Store is pending review.

## Future

### CI Integration

Capture before deploy, capture after, diff automatically. Threshold-based alerts for structural regressions. GitHub Action for automated UI audits in pull requests.

### Live DOM Watcher

Smart alerts during development: "An element lost its aria-label", "New console error appeared", "Z-index conflict detected." Proactive rather than reactive.

### Cross-Page Consistency (Extension Surface)

Surface the existing `check_consistency` tool in the extension sidebar. Compare styling across pages: "Your .btn-primary is blue on /login but purple on /settings."

### Design Token Extraction

Extract reusable design tokens (colors, fonts, spacing, radii) from captures. Useful for design system teams.

### Power Packages for Other Agents

Dedicated hooks, prompts, and steering docs for Claude Code, Cursor, Windsurf, and Cline. The MCP tools already work with all agents - Power packages add agent-specific automation.

## Recently Shipped (v0.4.0)

* **URL Trust Indicator (F17)** - shield icon with check/x showing trusted/configured/untrusted. Send gate blocks untrusted URLs.
* **Prompt Injection Defense (F19)** - 5-layer defense complete: capture sanitization, transport wrapping, suspicious detection, prompt hardening, trust gate.
* **MCP Agent Guidance (F18)** - server instructions + `get_session_status` tool (38 MCP tools total). Fuzzy filename matching with "did you mean" suggestions.
* **Auto-Inspect Suggestions (F15)** - proactive issue detection with collapsed badge, tier tags, add-to-review flow.
* **Native Messaging Foundation (F11)** - transport abstraction (17 methods), native host protocol, message handler, host registration. Extension migration in progress.
* **STRIDE Threat Model** - 8 threats, 8 mitigations, published on [Threat Model](/viewgraph/reference/threat-model.md) page.
* **Server lifecycle management** - stdin close detection + 30-min idle timeout prevents orphaned processes.
* **SRR-001 security fixes** - config schema validation, shadow DOM closed mode, WebSocket limits, security headers, error sanitization.
* **M16 sidebar polish complete** - keyboard nav, incremental tabs, strip active state, empty state, collapse toast.
* **F10 smart alerts** - regression detection in post-capture auto-audit.
* **Themed tooltip component** - tooltips on all sidebar buttons.
* **16 CodeQL alerts resolved** - path validation, URL parsing, crypto.randomUUID, CI permissions.

## Accuracy

ViewGraph's capture accuracy is measured automatically against 48 diverse real-world websites. Current composite accuracy: **92.1%**. See [Capture Accuracy](/viewgraph/how-it-compares/accuracy.md) for the full methodology and results.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://chaoslabz.gitbook.io/viewgraph/reference/roadmap.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.