Linear Integration

The TailTrace Chrome Extension can create Linear issues directly from the inspector overlay.

Setup

Get your Linear API key

Go to Linear Settings → API and create a personal API key.
Configure in TailTrace

Open the Chrome extension popup → Settings → Linear section:
- Paste your API key
- Select your default team
- Optionally set a default project
Start reporting

When inspecting an element, click “Report Bug” to create an issue.

What Gets Reported

Each bug report includes:

Screenshot

A full-page screenshot with the inspected element highlighted.

Drift Metrics

Design Drift Detected

Property: background-color
Detected: #3b83f6
Expected: blue-500 (#3b82f6)
Difference: ΔE 0.73

Environment

Page URL
Viewport dimensions
Browser/OS
TailTrace version
Config version

Element Context

CSS selector
All computed styles
Translation results

Issue Template

Issues are created with this format:

## Design Drift Report

**Element:** `button.primary-cta`
**Page:** https://example.com/pricing

### Drift Details

| Property | Value | Expected | ΔE |
|----------|-------|----------|-----|
| background-color | #3b83f6 | blue-500 | 0.73 |

### Environment
- Viewport: 1920×1080
- Browser: Chrome 120
- Config: production-v2

### Screenshot
[Attached]

Customization

In the extension settings:

Option	Description
Default Team	Issues created in this team
Default Project	Optional project assignment
Add Labels	Automatically add labels like “design-drift”
Priority	Default priority for new issues

GraphQL Mutation

TailTrace uses Linear’s GraphQL API:

mutation CreateIssue($input: IssueCreateInput!) {
  issueCreate(input: $input) {
    success
    issue {
      id
      url
    }
  }
}