Specpin

Specpin attaches business specifications (rules, descriptions, acceptance criteria) directly onto the elements of a running web UI, then renders them in-browser as you hover or browse.

It is NOT a spec-driven code generator: it generates no application code. It is a knowledge layer that pins living, Git-versioned documentation onto the interface you already have. Specs live as JSON in your repo's .specs/ directory and are served to the add-on by a small local Go sidecar over token-authenticated localhost. Nothing leaves your machine.

Features:

• Pin specs onto live elements: resilient multi-signal fingerprint matching (test-id, aria, selector, xpath, text, position) so specs survive refactors, scoped to their page by a URL glob.

• Match confidence and page health: see how each spec matched (exact anchor vs. selector), review fragile matches, and drop in a data-spec-id attribute for exact matching.

• Three display modes: tooltip, sidebar, and a draggable modal renderer. Switch with one click or Alt+Shift+M.

• Manual capture: click an element and author a spec in place, no leaving the page. Toggle capture with Alt+Shift+C.

• Writable local projects: edit, capture, create, delete, and group-zip export specs, even without a running sidecar.

• Multi-project connections: one add-on serves many projects at once, routed to each page by origin, with per-project enable/disable and source badges (sidecar vs local).

• Guide mode: spec-driven onboarding tours in two scopes (team, committed to your repo; personal, per-origin), with a spotlight overlay and an anchored popover.

• Graph views: visualize your app as screen-transition and status-flow diagrams — navigations are auto-captured as you browse (per-project, opt-in), edited in an in-browser graph editor, and committed to your repo.

• Spec-first authoring: draft a spec from a screenshot or design before the UI exists (pending specs), then bind it to a real element once the frontend ships. Author right inside the add-on's spec sheet page, fully offline.

• Sidebar surface: open Specpin in Firefox's sidebar with inline spec detail and live auto-refresh.

• Spec search: live client-side filter by title, file, tags, and description.

• Multi-language spec content: locale-keyed strings with an in-browser language toggle and a tabbed per-locale editor.

• Markdown-formatted specs: descriptions and business rules carry a safe Markdown subset (bold, italic, inline code, links, lists), authored via a toolbar and rendered across every surface.

• User-selectable theme: System / Light / Dark, with dual-theme design tokens.

• Trilingual interface (EN + VI + JA), independent from the spec content language.

Secure by default: the sidecar binds 127.0.0.1 by default (remote use is opt-in over your own HTTPS reverse proxy), uses bearer-token auth, accepts only extension-origin CORS, and guards writes against path traversal. Open-source. No data collection, no tracking, no remote code.