Skip to content

v0.1.3 — Figma-style Bug Mode + human labels

Latest

Choose a tag to compare

@twkris twkris released this 28 May 06:02
· 25 commits to main since this release

Two host-app polish items that surfaced during the first real
integration. Self-hosters can redeploy and host apps just need a hard
refresh; the SDK at `/sdk/index.js` rebuilds automatically.

Bug Mode is now Figma-style

The old hover outline picked section-sized ancestors and felt laggy in
heavy SPAs. The fix:

  • Bug Mode ON switches the host cursor to a native crosshair (a tiny
    stylesheet at `document.head`) — no DOM outline at all.
  • The `mousemove` listener and React-fiber probe are gone from the hot
    path. The host app pays exactly zero cost while Bug Mode is OFF, and
    next to nothing while it's ON.
  • Element capture happens on click, on the precise element you clicked.
    No more "I clicked the button, why did it pin the card?".

Pinned elements now carry a human label

Reports were getting hard to scan because titles were just `selector` +
a body fragment. The SDK now resolves a label per element:

`data-quad-label` → `aria-label` → `data-testid` → trimmed text of
`button`/`a`/`h*`/`label`/`summary` → `placeholder` / `name` → `title`

The label becomes the title prefix (`Pay button — leads to blank screen`)
and shows on the bug detail page.

Recommended: add `data-quad-label` to the surfaces you care about
most. Zero SDK config needed.

```html
결제
⬇
```

Self-host posture

No new env vars. No breaking changes to ingest / schema. `label` is
optional; existing instances keep working unchanged.

Rebased on top of the recent Azure DevOps integration commits so both
streams ship together.