design-spine 0.2.0 → 0.2.1

package/README.md

@@ -72,7 +72,7 @@ In CI, add the action after the step that starts your app, and commit `design-sp
 
 ```yaml
 - run: npm run build && (npm start &) && npx wait-on http://localhost:3000
-- uses: forbiddenlink/design-spine@v0.2.0
+- uses: forbiddenlink/design-spine@v0.2.1
   with:
     base-url: http://localhost:3000
 ```
@@ -86,7 +86,7 @@ permissions:
   contents: read
   pull-requests: write
 steps:
-  - uses: forbiddenlink/design-spine@v0.2.0
+  - uses: forbiddenlink/design-spine@v0.2.1
     with:
       comment: "true"
 ```
@@ -111,6 +111,7 @@ Upgrading from v0.1.0: that version captured with the runner's own Chromium and
 | `report` | Self-contained HTML record of a review |
 | `lint` | Ratchet on arbitrary Tailwind values such as `w-[37px]` |
 | `status` | Writes `.design-spine/status.json` for dashboards |
+| `mcp` | Read-only MCP server over stdio for agents; see [docs/USAGE.md](docs/USAGE.md#use-from-an-mcp-client) |
 
 Full reference: [docs/USAGE.md](docs/USAGE.md).
 

package/bin/resolve-bun.d.ts

@@ -17,7 +17,7 @@ export function resolveBun(options?: {
   run?: (
     command: string,
     args: string[],
-    options: { encoding: 'utf8' },
+    options: { encoding: 'utf8'; timeout: number },
   ) => { error?: Error; status: number | null; stdout?: string | null }
   bundled?: () => string | undefined
 }): string | undefined

package/bin/resolve-bun.js

@@ -51,7 +51,7 @@ export function bundledBunPath({
 }
 
 function bunVersion(command, run) {
-  const result = run(command, ['--version'], { encoding: 'utf8' })
+  const result = run(command, ['--version'], { encoding: 'utf8', timeout: 10000 })
   if (result.error || result.status !== 0) return undefined
   return result.stdout ?? ''
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-spine",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Screenshot every route and state of your Next.js app, then approve each screen by eye. Local, no account.",
   "license": "MIT",
   "author": "Elizabeth Stein",
@@ -26,6 +26,7 @@
     "README.md",
     "LICENSE"
   ],
+  "packageManager": "pnpm@12.6.0",
   "engines": {
     "node": ">=22.12",
     "bun": ">=1.3.13"
@@ -34,8 +35,18 @@
   "bin": {
     "spine": "bin/spine.js"
   },
+  "scripts": {
+    "build": "bun build --compile src/cli.ts src/lib/comparison-worker.ts --external 'chromium-bidi/*' --external electron --define 'import.meta.spineWorker=\"./lib/comparison-worker.js\"' --outfile dist/spine",
+    "spine": "bun src/cli.ts",
+    "test": "vitest run",
+    "test:visual": "bun scripts/visual-tests.ts",
+    "test:visual:update": "bun scripts/visual-tests.ts --update",
+    "lint": "biome check .",
+    "format": "biome format --write ."
+  },
   "dependencies": {
     "@axe-core/playwright": "^4.13.0",
+    "@modelcontextprotocol/sdk": "1.32.2",
     "commander": "^15.0.0",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.63.0",
@@ -52,19 +63,10 @@
     "@oven/bun-windows-x64": "1.3.13"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.5.15",
-    "@types/bun": "^1.4.2",
-    "@types/pngjs": "^6.0.5",
-    "typescript": "^7.0.2",
-    "vitest": "^5.0.3"
-  },
-  "scripts": {
-    "build": "bun build --compile src/cli.ts src/lib/comparison-worker.ts --external 'chromium-bidi/*' --external electron --define 'import.meta.spineWorker=\"./lib/comparison-worker.js\"' --outfile dist/spine",
-    "spine": "bun src/cli.ts",
-    "test": "vitest run",
-    "test:visual": "bun scripts/visual-tests.ts",
-    "test:visual:update": "bun scripts/visual-tests.ts --update",
-    "lint": "biome check .",
-    "format": "biome format --write ."
+    "@biomejs/biome": "2.6.4",
+    "@types/bun": "1.4.4",
+    "@types/pngjs": "6.0.5",
+    "typescript": "7.0.2",
+    "vitest": "5.0.5"
   }
-}
+}

package/src/cli.ts

@@ -54,11 +54,12 @@ import {
 import { startReviewServer } from './lib/server.ts'
 import { buildSummary } from './lib/summary.ts'
 import type { Provenance } from './lib/types.ts'
+import { runMcp } from './mcp.ts'
 
 const root = resolve(process.env.SPINE_CWD ?? process.cwd())
 const program = new Command('spine')
   .description('Design gate for Next.js repos')
-  .version('0.2.0')
+  .version('0.2.1')
   // Usage errors exit 2 so they never look like doctor's exit 1 (unfinished coverage).
   .exitOverride((err) => process.exit(err.exitCode === 0 ? 0 : 2))
 
@@ -635,4 +636,9 @@ program
     }),
   )
 
+program
+  .command('mcp')
+  .description('Serve a read-only MCP server over stdio (spine_status, spine_list_tiles)')
+  .action(guard(() => runMcp(root)))
+
 await program.parseAsync(process.argv)

package/src/lib/capture.ts

@@ -3,11 +3,12 @@ import { createHash } from 'node:crypto'
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 import AxeBuilder from '@axe-core/playwright'
-import { type Browser, type BrowserContext, chromium } from 'playwright'
+import { type Browser, type BrowserContext, chromium, type Request } from 'playwright'
 import { PNG } from 'pngjs'
 import { findBlankBoxes } from './blank.ts'
 import { fingerprint, validateManifest } from './manifest.ts'
 import { routeSlug, tileFilename, tileId } from './names.ts'
+import { redactUrls, safeUrl } from './redact.ts'
 import { fillParams } from './routes.ts'
 import { setLatest, spineDir, writeJson } from './runs.ts'
 import type {
@@ -265,6 +266,10 @@ function fixedOverlays(): string[] {
     )
 }
 
+export function requestFailureCode(errorText?: string): string {
+  return errorText?.match(/^net::ERR_[A-Z0-9_]+\b/)?.[0] ?? 'Network request failed'
+}
+
 /** Wait before retrying a 429: Retry-After seconds (max 10), else 2s. */
 export function retryDelayMs(retryAfter?: string): number {
   const seconds = retryAfter?.trim() ? Number(retryAfter) : Number.NaN
@@ -340,6 +345,7 @@ async function captureTile(
     textClipped: [],
   }
   let ctx: BrowserContext | undefined
+  let collectingRequests = true
   let stage = 'context initialization'
   try {
     ctx = await browser.newContext({
@@ -354,22 +360,52 @@ async function captureTile(
     const page = await ctx.newPage()
     page.setDefaultTimeout(manifest.capture?.timeoutMs ?? 5000)
     if (manifest.capture?.clock) await page.clock.setFixedTime(new Date(manifest.capture.clock))
+    // Requests answered by a state mock carry the status the author chose, so they are not
+    // request failures even when that status is 500.
+    const mocked = new WeakSet<Request>()
     for (const response of job.state.responses ?? []) {
-      await page.route(response.url, (route) =>
-        route.fulfill({
+      await page.route(response.url, (route) => {
+        mocked.add(route.request())
+        return route.fulfill({
           status: response.status,
           body: response.body ?? '',
           contentType: response.contentType ?? 'text/plain',
-        }),
-      )
+        })
+      })
     }
     page.on('console', (m) => {
       if (m.type() === 'error' && tile.consoleErrors.length < 20)
-        tile.consoleErrors.push(m.text().slice(0, 200))
+        tile.consoleErrors.push(redactUrls(m.text()).slice(0, 200))
     })
     page.on('pageerror', (e) => {
-      if (tile.pageErrors.length < 20) tile.pageErrors.push(e.message.slice(0, 200))
+      if (tile.pageErrors.length < 20) tile.pageErrors.push(redactUrls(e.message).slice(0, 200))
     })
+    const navigationStarted = performance.now()
+    const recordedRequests = new WeakSet<Request>()
+    const requestErrors: NonNullable<Tile['requestErrors']> = []
+    tile.requestErrors = requestErrors
+    const recordRequestError = (request: Request, status?: number): void => {
+      if (
+        !collectingRequests ||
+        mocked.has(request) ||
+        recordedRequests.has(request) ||
+        requestErrors.length >= 20
+      )
+        return
+      recordedRequests.add(request)
+      requestErrors.push({
+        url: safeUrl(request.url()).slice(0, 500),
+        resourceType: request.resourceType(),
+        ...(status !== undefined
+          ? { status }
+          : { failure: requestFailureCode(request.failure()?.errorText) }),
+        elapsedMs: Math.round(performance.now() - navigationStarted),
+      })
+    }
+    page.on('response', (response) => {
+      if (response.status() >= 400) recordRequestError(response.request(), response.status())
+    })
+    page.on('requestfailed', (request) => recordRequestError(request))
     // `load` first, then a bounded wait for network idle. Pages that poll (live
     // embeds) never go idle; waiting on networkidle alone timed out and lost the tile.
     const url = manifest.baseUrl.replace(/\/$/, '') + job.path
@@ -377,8 +413,22 @@ async function captureTile(
       page.goto(url, { waitUntil: 'load', timeout: 30000 })
     let resp = await go()
     if (resp?.status() === 429) {
+      const limited = resp.request()
       await page.waitForTimeout(retryDelayMs(resp.headers()['retry-after']))
+      const before = requestErrors.length
       resp = await go()
+      // A recovered retry means the first 429 says nothing about this screen; drop its entry.
+      if (resp && resp.status() < 400) {
+        const first = requestErrors
+          .slice(0, before)
+          .findIndex(
+            (e) =>
+              e.status === 429 &&
+              e.resourceType === 'document' &&
+              e.url === safeUrl(limited.url()).slice(0, 500),
+          )
+        if (first !== -1) requestErrors.splice(first, 1)
+      }
     }
     tile.status = resp?.status() ?? 0
     await page.waitForLoadState('networkidle', { timeout: 8000 }).catch(() => {
@@ -490,7 +540,7 @@ async function captureTile(
       }
     }
     tile.overflowX = m.overflowX
-    tile.brokenImages = m.brokenImages
+    tile.brokenImages = m.brokenImages.map(redactUrls)
     tile.textClipped = m.textClipped
     const boxes = findBlankBoxes(PNG.sync.read(buf), m.candidates).map((b) => ({
       x: Math.round(b.x),
@@ -502,12 +552,13 @@ async function captureTile(
     tile.consoleErrors = [...new Set(tile.consoleErrors)].slice(0, 5)
     tile.pageErrors = [...new Set(tile.pageErrors)].slice(0, 5)
   } catch (e) {
-    tile.error = (e as Error).message.split('\n')[0]?.slice(0, 200)
+    tile.error = redactUrls((e as Error).message.split('\n')[0] ?? '').slice(0, 200)
     tile.diagnostic = {
       stage,
       message: `Capture failed during ${stage}. Inspect the configured condition and retry.`,
     }
   } finally {
+    collectingRequests = false
     await ctx?.close().catch(() => {})
   }
   return tile
@@ -559,7 +610,7 @@ export async function runCapture(
     id,
     startedAt: startedAt.toISOString(),
     finishedAt: new Date().toISOString(),
-    baseUrl: opts.recordedBaseUrl ?? manifest.baseUrl,
+    baseUrl: redactUrls(opts.recordedBaseUrl ?? manifest.baseUrl),
     tiles,
     coverage: coverage.map((entry) => {
       if (entry.outcome !== 'planned') return entry

package/src/lib/redact.ts

@@ -0,0 +1,26 @@
+// Captured text lands in run.json, the HTML report and CI artifacts, so app-generated URLs keep
+// only origin and path: query strings, fragments and userinfo often carry tokens or signatures.
+
+/** One URL reduced to origin + path; schemes other than HTTP and WebSocket keep only the scheme. */
+export function safeUrl(raw: string): string {
+  let url: URL
+  try {
+    url = new URL(raw)
+  } catch {
+    return '[unparseable url]'
+  }
+  return ['http:', 'https:', 'ws:', 'wss:'].includes(url.protocol)
+    ? url.origin + url.pathname
+    : `${url.protocol}[redacted]`
+}
+
+const URL_IN_TEXT = /\b(?:https?|wss?):\/\/[^\s"'<>`]+/g
+const TRAILING = /[.,;:!?)\]]+$/
+
+/** Every http(s) and ws(s) URL inside free text (console messages, error strings) passed through safeUrl. */
+export function redactUrls(text: string): string {
+  return text.replace(URL_IN_TEXT, (match) => {
+    const tail = match.match(TRAILING)?.[0] ?? ''
+    return safeUrl(match.slice(0, match.length - tail.length)) + tail
+  })
+}

package/src/lib/report.ts

@@ -30,6 +30,10 @@ export function buildReport(dir: string, run: RunRecord, review: ReviewFile): st
         ...(tile.warnings ?? []),
         ...(tile.consoleErrors ?? []).map((message) => `Console: ${message}`),
         ...(tile.pageErrors ?? []).map((message) => `Page error: ${message}`),
+        ...(tile.requestErrors ?? []).map(
+          (error) =>
+            `Request: ${error.status !== undefined ? `HTTP ${error.status}` : error.failure} · ${error.resourceType} · +${error.elapsedMs} ms · ${error.url}`,
+        ),
         ...(tile.brokenImages ?? []).map((source) => `Broken image: ${source}`),
         ...(tile.textClipped ?? []).map((item) => `Possible clipped text: ${item.selector}`),
         ...(tile.overflowX ? ['Horizontal overflow'] : []),

package/src/lib/runs.ts

@@ -105,9 +105,14 @@ export function setLatest(root: string, runId: string): void {
 }
 
 export const loadRun = (dir: string): RunRecord => {
-  const r = readJson<RunRecord>(join(dir, 'run.json'))
-  if (!r) throw new Error(`Missing run.json in ${dir}`)
-  for (const tile of r.tiles ?? []) {
+  const path = join(dir, 'run.json')
+  const r = readStateJson<RunRecord>(path)
+  if (r === null && !existsSync(path)) throw new Error(`Missing run.json in ${dir}`)
+  // Callers index r.tiles directly, so a parseable file with the wrong shape is corruption too.
+  if (!isPlainObject(r) || (r.tiles !== undefined && !Array.isArray(r.tiles)))
+    throw new Error(`Invalid ${path}. Preserve the file and repair or remove it, then retry.`)
+  r.tiles ??= []
+  for (const tile of r.tiles) {
     // Tile files are joined onto run and baseline dirs; only plain capture names are allowed.
     if (typeof tile.file !== 'string' || !/^[A-Za-z0-9[\]._-]+\.png$/.test(tile.file))
       throw new Error(`Invalid tile file in ${join(dir, 'run.json')}: ${String(tile.file)}`)
@@ -160,4 +165,5 @@ export const isFlagged = (t: Tile): boolean =>
   t.brokenImages.length > 0 ||
   t.consoleErrors.length > 0 ||
   t.pageErrors.length > 0 ||
+  !!t.requestErrors?.length ||
   !!t.redirectedTo

package/src/lib/types.ts

@@ -66,6 +66,15 @@ export interface Tile {
   status: number
   consoleErrors: string[]
   pageErrors: string[]
+  /** First 20 failed requests observed during capture; URL credentials/query/fragment removed. */
+  requestErrors?: {
+    url: string
+    resourceType: string
+    status?: number
+    failure?: string
+    /** Milliseconds from the start of navigation until the error was observed. */
+    elapsedMs: number
+  }[]
   overflowX: boolean
   blankRegions: { count: number; boxes: Box[] }
   brokenImages: string[]

package/src/mcp.ts

@@ -0,0 +1,117 @@
+import { join } from 'node:path'
+import { Server } from '@modelcontextprotocol/sdk/server/index.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js'
+import { isFlagged, loadReview, loadRun, resolveRunDir, runIdOf } from './lib/runs.ts'
+import type { ReviewFile, RunRecord } from './lib/types.ts'
+
+/**
+ * Read-only MCP server. It only calls loaders that read (resolveRunDir, loadRun,
+ * loadReview) and registers no tool that writes, so the process cannot change a
+ * review decision. Do not import writeJson, mergeReview or setLatest here.
+ */
+
+const STATUSES = ['approved', 'rejected', 'pending'] as const
+type TileStatus = (typeof STATUSES)[number]
+
+const statusOf = (review: ReviewFile, id: string): TileStatus => {
+  const d = review.tiles[id]?.decision
+  return d === 'approve' ? 'approved' : d === 'reject' ? 'rejected' : 'pending'
+}
+
+function latest(root: string): { dir: string; run: RunRecord; review: ReviewFile } {
+  const dir = resolveRunDir(root)
+  return { dir, run: loadRun(dir), review: loadReview(dir) }
+}
+
+export function spineStatus(root: string) {
+  const { dir, run, review } = latest(root)
+  const counts = { approved: 0, rejected: 0, pending: 0 }
+  for (const t of run.tiles) counts[statusOf(review, t.id)]++
+  return {
+    runId: run.id,
+    startedAt: run.startedAt,
+    finishedAt: run.finishedAt,
+    tiles: run.tiles.length,
+    ...counts,
+    flagged: run.tiles.filter(isFlagged).length,
+    runDir: dir,
+    reviewCommand: `spine review --run ${runIdOf(dir)}`,
+  }
+}
+
+export function spineListTiles(root: string, status?: TileStatus) {
+  const { dir, run, review } = latest(root)
+  return run.tiles
+    .map((t) => ({
+      id: t.id,
+      route: t.route,
+      state: t.state,
+      viewport: t.viewport,
+      theme: t.theme,
+      imagePath: join(dir, t.file),
+      imageHash: t.imageHash ?? null,
+      status: statusOf(review, t.id),
+    }))
+    .filter((row) => !status || row.status === status)
+}
+
+const TOOLS = [
+  {
+    name: 'spine_status',
+    description:
+      'Summary of the latest design-spine run: run id and times, tile count, approved/rejected/pending counts, flagged count, run directory and the command that opens the contact sheet. Read-only.',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false },
+    annotations: { readOnlyHint: true, destructiveHint: false, idempotentHint: true },
+  },
+  {
+    name: 'spine_list_tiles',
+    description:
+      'List tiles of the latest run with route, state, viewport, theme, image path, image hash (null if not recorded) and review status. Optional status filter. Read-only.',
+    inputSchema: {
+      type: 'object',
+      properties: { status: { type: 'string', enum: [...STATUSES] } },
+      additionalProperties: false,
+    },
+    annotations: { readOnlyHint: true, destructiveHint: false, idempotentHint: true },
+  },
+]
+
+const ok = (data: unknown) => ({ content: [{ type: 'text' as const, text: JSON.stringify(data) }] })
+const err = (message: string) => ({
+  isError: true,
+  content: [{ type: 'text' as const, text: message }],
+})
+
+export function createSpineMcpServer(root: string): Server {
+  const server = new Server(
+    { name: 'design-spine', version: '0.2.1' },
+    { capabilities: { tools: {} } },
+  )
+  server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: TOOLS }))
+  server.setRequestHandler(CallToolRequestSchema, async (req) => {
+    try {
+      const args = (req.params.arguments ?? {}) as Record<string, unknown>
+      switch (req.params.name) {
+        case 'spine_status':
+          return ok(spineStatus(root))
+        case 'spine_list_tiles': {
+          const status = args.status
+          if (status !== undefined && !STATUSES.includes(status as TileStatus))
+            return err(`status must be one of: ${STATUSES.join(', ')}`)
+          return ok(spineListTiles(root, status as TileStatus | undefined))
+        }
+        default:
+          return err(`Unknown tool: ${req.params.name}`)
+      }
+    } catch (e) {
+      return err((e as Error).message)
+    }
+  })
+  return server
+}
+
+/** Serve over stdio. stdout carries the protocol, so nothing else may print to it. */
+export async function runMcp(root: string): Promise<void> {
+  await createSpineMcpServer(root).connect(new StdioServerTransport())
+}

package/src/ui/index.html

@@ -21,7 +21,7 @@
   <details id="coverage" class="diagnostics"><summary id="coverage-summary">Coverage unknown</summary><div id="coverage-details"></div></details>
   <div class="stats" id="stats" role="group" aria-label="Run summary"></div>
   <div class="progress-row"><span id="progress-label">Loading review progress</span><progress id="progress" value="0" max="1" aria-label="Reviewed screenshots"></progress><span id="percent">0%</span></div>
-  <div class="toolbar"><label class="field search-field">Search routes or states<input id="search" type="search" placeholder="Find a route, e.g. /pricing" autocomplete="off"></label><button class="button" id="toggle-filters" aria-expanded="false" aria-controls="secondary-filters">Filters</button><div id="secondary-filters" class="secondary-filters"><label class="field">Review status<select id="status-filter"><option value="">All decisions</option><option value="approve">Approved</option><option value="reject">Rejected</option></select></label><label class="field">Comparison<select id="comparison-filter"><option value="">All evidence</option><option value="new">New · no baseline</option><option value="changed">Changed</option><option value="size-changed">Dimensions changed</option><option value="unchanged">Within threshold</option><option value="no-capture">No capture</option><option value="unavailable">Unavailable</option></select></label><label class="field">Viewport<select id="viewport-filter"><option value="">All widths</option></select></label><label class="field">Capture theme<select id="theme-filter"><option value="">All themes</option><option value="light">Light</option><option value="dark">Dark</option></select></label><div class="filters"><button class="pill" id="f-flagged" aria-pressed="false">Only flagged</button><button class="pill" id="f-changed" aria-pressed="false">Only changed</button><button class="pill" id="f-unrev" aria-pressed="false">Only unreviewed</button><button class="button" id="clear-filters">Clear filters</button></div></div></div>
+  <div class="toolbar"><label class="field search-field">Search routes or states<input id="search" type="search" placeholder="Find a route, e.g. /pricing" autocomplete="off"></label><button class="button" id="toggle-filters" aria-expanded="false" aria-controls="secondary-filters">Filters</button><div id="secondary-filters" class="secondary-filters"><label class="field">Review status<select id="status-filter"><option value="">All decisions</option><option value="approve">Approved</option><option value="reject">Rejected</option></select></label><label class="field">Comparison<select id="comparison-filter"><option value="">All evidence</option><option value="new">New · no baseline</option><option value="changed">Changed</option><option value="size-changed">Dimensions changed</option><option value="unchanged">Within threshold</option><option value="no-capture">No capture</option><option value="unavailable">Unavailable</option></select></label><label class="field">Viewport<select id="viewport-filter"><option value="">All widths</option></select></label><label class="field">Capture theme<select id="theme-filter"><option value="">All themes</option><option value="light">Light</option><option value="dark">Dark</option></select></label><div class="filters"><button class="pill" id="f-flagged" aria-pressed="false">Only flagged</button><button class="pill" id="f-warnings" aria-pressed="false">Only capture warnings</button><button class="pill" id="f-changed" aria-pressed="false">Only changed</button><button class="pill" id="f-unrev" aria-pressed="false">Only unreviewed</button><button class="button" id="clear-filters">Clear filters</button></div></div></div>
   <div class="results-row"><span id="results" aria-live="polite">Loading captures…</span><div class="keys"><kbd>j</kbd>/<kbd>k</kbd> move &nbsp; <kbd>a</kbd> approve &nbsp; <kbd>r</kbd> reject &nbsp; <kbd>Enter</kbd> inspect</div></div>
   <nav id="pagination" class="pagination" aria-label="Capture pages" hidden><button class="button" id="page-prev" data-page-step="-1" aria-label="Previous page">Previous</button><span id="page-label" class="page-label" aria-live="polite"></span><button class="button" id="page-next" data-page-step="1" aria-label="Next page">Next</button></nav>
   <div id="save-status" role="status" aria-live="polite"></div>

package/src/ui/review.js

@@ -13,6 +13,7 @@ const state = {
   pageSize: 48,
   viewerMode: 'current',
   onlyFlagged: false,
+  onlyWarnings: false,
   onlyUnreviewed: false,
   search: '',
   status: '',
@@ -54,21 +55,23 @@ function flags(t) {
   const f = []
   if (t.accessibility?.error) f.push(t.accessibility.error)
   if (t.accessibility?.violations.length)
-    f.push(t.accessibility.violations.length + ' automated accessibility findings')
+    f.push(`${t.accessibility.violations.length} automated accessibility findings`)
   if (t.stability === 'unstable') f.push('Capture did not stabilize')
-  if (t.error) f.push('Capture failed: ' + t.error)
+  if (t.error) f.push(`Capture failed: ${t.error}`)
   if (t.status === 0 && !t.error) f.push('No response')
-  if (t.status >= 400) f.push('HTTP ' + t.status)
+  if (t.status >= 400) f.push(`HTTP ${t.status}`)
   if (t.overflowX) f.push('Horizontal overflow')
   if (t.blankRegions.count)
-    f.push(t.blankRegions.count + ' blank region' + (t.blankRegions.count > 1 ? 's' : ''))
+    f.push(`${t.blankRegions.count} blank region${t.blankRegions.count > 1 ? 's' : ''}`)
   if (t.brokenImages.length)
-    f.push(t.brokenImages.length + ' broken image' + (t.brokenImages.length > 1 ? 's' : ''))
+    f.push(`${t.brokenImages.length} broken image${t.brokenImages.length > 1 ? 's' : ''}`)
   if (t.consoleErrors.length)
-    f.push(t.consoleErrors.length + ' console error' + (t.consoleErrors.length > 1 ? 's' : ''))
+    f.push(`${t.consoleErrors.length} console error${t.consoleErrors.length > 1 ? 's' : ''}`)
   if (t.pageErrors.length)
-    f.push(t.pageErrors.length + ' page error' + (t.pageErrors.length > 1 ? 's' : ''))
-  if (t.redirectedTo) f.push('Redirected to ' + t.redirectedTo)
+    f.push(`${t.pageErrors.length} page error${t.pageErrors.length > 1 ? 's' : ''}`)
+  if (t.requestErrors?.length)
+    f.push(`${t.requestErrors.length} failed request${t.requestErrors.length > 1 ? 's' : ''}`)
+  if (t.redirectedTo) f.push(`Redirected to ${t.redirectedTo}`)
   return f
 }
 const isFlagged = (t) => flags(t).length > 0
@@ -85,12 +88,13 @@ function visibleTiles() {
         (!state.onlyChanged ||
           ['new', 'changed', 'size-changed'].includes(state.comparison[t.id]?.status)) &&
         (!state.onlyFlagged || isFlagged(t)) &&
+        (!state.onlyWarnings || t.warnings?.length > 0) &&
         (!state.onlyUnreviewed || !decision(t)) &&
         (!state.evidence || state.comparison[t.id]?.status === state.evidence) &&
         (!state.status || decision(t) === state.status) &&
         (!state.viewport || String(t.viewport) === state.viewport) &&
         (!state.theme || t.theme === state.theme) &&
-        (t.route + ' ' + t.state).toLowerCase().includes(state.search),
+        `${t.route} ${t.state}`.toLowerCase().includes(state.search),
     )
     .sort(
       (a, b) =>
@@ -123,7 +127,7 @@ async function load() {
   showEmpty('Loading your captures…', 'Reading this run’s screenshots and review decisions.')
   try {
     const response = await fetch(apiPath('/api/run?compare=false'))
-    if (!response.ok) throw new Error('The review server returned HTTP ' + response.status + '.')
+    if (!response.ok) throw new Error(`The review server returned HTTP ${response.status}.`)
     const data = await response.json()
     if (!data.run || !Array.isArray(data.run.tiles))
       throw new Error('This run does not contain valid capture data.')
@@ -145,7 +149,7 @@ async function load() {
     nav.replaceChildren()
     for (const [index, route] of [...new Set(data.run.tiles.map((t) => t.route))].entries()) {
       const link = el('a', null, route)
-      link.href = '#route-' + index
+      link.href = `#route-${index}`
       link.dataset.route = route
       link.append(el('span'))
       link.addEventListener('click', (event) => {
@@ -154,7 +158,7 @@ async function load() {
         const position = visibleTiles().findIndex((t) => t.route === route)
         state.page = Math.floor(Math.max(0, position) / state.pageSize)
         render()
-        const section = $('#route-' + index)
+        const section = $(`#route-${index}`)
         if (section) {
           section.scrollIntoView({ block: 'start' })
           section.querySelector('h2').focus({ preventScroll: true })
@@ -165,7 +169,7 @@ async function load() {
     const select = $('#viewport-filter')
     select.replaceChildren(new Option('All widths', ''))
     for (const width of [...new Set(data.run.tiles.map((t) => t.viewport))].sort((a, b) => a - b))
-      select.add(new Option(width + 'px', String(width)))
+      select.add(new Option(`${width}px`, String(width)))
     state.loading = false
     render()
     loadComparison(data.comparison)
@@ -180,7 +184,7 @@ async function load() {
     $('#percent').textContent = 'n/a'
     showEmpty(
       'Could not load this run.',
-      error.message + ' Check that the review server is running, then retry.',
+      `${error.message} Check that the review server is running, then retry.`,
       'Retry loading',
       load,
     )
@@ -276,8 +280,8 @@ async function loadHistory() {
     if (!Array.isArray(runs)) return
     const current = selectedRun()
     select.replaceChildren()
-    if (!current) select.add(new Option(state.run.id + ' · opened run', ''))
-    for (const run of runs) select.add(new Option(run.id + ' · ' + run.tiles + ' captures', run.id))
+    if (!current) select.add(new Option(`${state.run.id} · opened run`, ''))
+    for (const run of runs) select.add(new Option(`${run.id} · ${run.tiles} captures`, run.id))
     select.value = current || ''
   } catch {
     /* The opened run remains available when history cannot load. */
@@ -318,13 +322,13 @@ function renderCoverage() {
       ' unfinished · ' +
       count('excluded') +
       ' excluded' +
-      (count('filtered') ? ' · ' + count('filtered') + ' outside this capture’s route filter' : '')
+      (count('filtered') ? ` · ${count('filtered')} outside this capture’s route filter` : '')
     summary.replaceChildren(
       el('span', 'coverage-long', summaryText),
       el(
         'span',
         'coverage-short',
-        'Coverage · ' + count('captured') + ' of ' + coverage.length + ' captured',
+        `Coverage · ${count('captured')} of ${coverage.length} captured`,
       ),
     )
     const list = el('ul')
@@ -342,7 +346,7 @@ function renderCoverage() {
             entry.theme +
             ': ' +
             entry.outcome +
-            (entry.reason ? ': ' + entry.reason : ''),
+            (entry.reason ? `: ${entry.reason}` : ''),
         ),
       )
     details.append(list)
@@ -356,7 +360,7 @@ function renderCoverage() {
     const columns = [
       ...new Map(
         coverage.map((entry) => [
-          entry.viewport + ':' + entry.theme,
+          `${entry.viewport}:${entry.theme}`,
           { viewport: entry.viewport, theme: entry.theme },
         ]),
       ).values(),
@@ -369,7 +373,7 @@ function renderCoverage() {
     label.scope = 'col'
     headers.append(label)
     for (const column of columns) {
-      const header = el('th', null, column.viewport + 'px · ' + column.theme)
+      const header = el('th', null, `${column.viewport}px · ${column.theme}`)
       header.scope = 'col'
       headers.append(header)
     }
@@ -392,7 +396,7 @@ function renderCoverage() {
     }
     for (const entries of groups.values()) {
       const row = el('tr')
-      const label = el('th', null, entries[0].route + ' · ' + entries[0].state)
+      const label = el('th', null, `${entries[0].route} · ${entries[0].state}`)
       label.scope = 'row'
       row.append(label)
       for (const column of columns) {
@@ -487,12 +491,11 @@ function renderStats() {
     state.viewport,
     state.theme,
     state.onlyFlagged,
+    state.onlyWarnings,
     state.onlyChanged,
     state.onlyUnreviewed,
   ].filter(Boolean).length
-  $('#toggle-filters').textContent = activeFilters
-    ? 'Filters (' + activeFilters + ' active)'
-    : 'Filters'
+  $('#toggle-filters').textContent = activeFilters ? `Filters (${activeFilters} active)` : 'Filters'
   const tiles = state.run.tiles
   const n = (fn) => tiles.filter(fn).length
   const stats = $('#stats')
@@ -504,14 +507,14 @@ function renderStats() {
     ['Rejected', n((t) => decision(t) === 'reject')],
     ['Pending', n((t) => !decision(t))],
   ]) {
-    const box = el('div', 'stat ' + label.toLowerCase())
+    const box = el('div', `stat ${label.toLowerCase()}`)
     box.append(el('b', null, String(value)), el('span', null, label))
     stats.append(box)
   }
   for (const link of document.querySelectorAll('#route-nav a')) {
     const routeTiles = tiles.filter((t) => t.route === link.dataset.route)
     link.querySelector('span').textContent =
-      routeTiles.filter((t) => !!decision(t)).length + '/' + routeTiles.length
+      `${routeTiles.filter((t) => !!decision(t)).length}/${routeTiles.length}`
   }
   const reviewed = n((t) => !!decision(t))
   $('#progress').max = tiles.length || 1
@@ -522,12 +525,12 @@ function renderStats() {
     tiles.length +
     ' reviewed' +
     (tiles.length && reviewed === tiles.length ? ' · Captured evidence reviewed' : '')
-  $('#percent').textContent = (tiles.length ? Math.round((reviewed / tiles.length) * 100) : 0) + '%'
+  $('#percent').textContent = `${tiles.length ? Math.round((reviewed / tiles.length) * 100) : 0}%`
   const matching = visibleTiles().length
   $('#results').textContent =
     matching <= state.pageSize
-      ? matching + ' of ' + tiles.length + ' captures shown'
-      : matching + ' matching captures · ' + tiles.length + ' total'
+      ? `${matching} of ${tiles.length} captures shown`
+      : `${matching} matching captures · ${tiles.length} total`
   updateControls()
 }
 function renderTile(t) {
@@ -545,14 +548,14 @@ function renderTile(t) {
     details.append(el('summary', null, 'Automated accessibility findings'))
     const list = el('ul')
     for (const issue of t.accessibility.violations)
-      list.append(el('li', null, issue.id + ': ' + issue.help + ' · ' + issue.targets.join(', ')))
+      list.append(el('li', null, `${issue.id}: ${issue.help} · ${issue.targets.join(', ')}`))
     details.append(list)
     more.append(details)
-    moreParts.push(t.accessibility.violations.length + ' a11y')
+    moreParts.push(`${t.accessibility.violations.length} a11y`)
   }
   if (t.masks?.length) {
     const details = el('details', 'diagnostics')
-    details.append(el('summary', null, 'Comparison masks (' + t.masks.length + ')'))
+    details.append(el('summary', null, `Comparison masks (${t.masks.length})`))
     const list = el('ul')
     for (const mask of t.masks)
       list.append(
@@ -580,7 +583,7 @@ function renderTile(t) {
       )
     details.append(list)
     more.append(details)
-    moreParts.push(t.masks.length + ' masks')
+    moreParts.push(`${t.masks.length} masks`)
   }
   card.dataset.id = t.id
   card.tabIndex = 0
@@ -598,13 +601,13 @@ function renderTile(t) {
   )
   const head = el('div', 'head')
   head.append(
-    el('span', null, t.viewport + 'px · ' + t.theme),
+    el('span', null, `${t.viewport}px · ${t.theme}`),
     el('span', null, d === 'approve' ? 'Approved' : d === 'reject' ? 'Rejected' : 'Pending'),
   )
   const thumb = el('div', 'thumb')
   thumb.tabIndex = 0
   thumb.setAttribute('role', 'region')
-  thumb.setAttribute('aria-label', 'Screenshot preview for ' + t.id)
+  thumb.setAttribute('aria-label', `Screenshot preview for ${t.id}`)
   const inspect = el('button', 'button inspect', 'Inspect')
   inspect.setAttribute('aria-label', 'Inspect screenshot')
   inspect.disabled = !!t.error
@@ -612,8 +615,8 @@ function renderTile(t) {
   if (!t.error) {
     const img = el('img')
     img.loading = 'lazy'
-    img.src = apiPath('/img/' + encodeURIComponent(t.file))
-    img.alt = t.route + ' · ' + t.state + ' · ' + t.viewport + 'px · ' + t.theme
+    img.src = apiPath(`/img/${encodeURIComponent(t.file)}`)
+    img.alt = `${t.route} · ${t.state} · ${t.viewport}px · ${t.theme}`
     img.addEventListener('click', () => openBox(t, inspect))
     img.addEventListener('error', () => {
       thumb.replaceChildren(
@@ -636,7 +639,7 @@ function renderTile(t) {
       el(
         'span',
         'badge warn',
-        t.textClipped.length + ' clipped text warning' + (t.textClipped.length > 1 ? 's' : ''),
+        `${t.textClipped.length} clipped text warning${t.textClipped.length > 1 ? 's' : ''}`,
       ),
     )
   if (t.warnings?.length)
@@ -644,25 +647,36 @@ function renderTile(t) {
       el(
         'span',
         'badge warn',
-        t.warnings.length + ' capture warning' + (t.warnings.length > 1 ? 's' : ''),
+        `${t.warnings.length} capture warning${t.warnings.length > 1 ? 's' : ''}`,
       ),
     )
   card.append(head, thumb, badges)
   const diagnostics = [
     ...t.consoleErrors,
     ...t.pageErrors,
+    ...(t.requestErrors || []).map(
+      (error) =>
+        'Request: ' +
+        (error.status !== undefined ? `HTTP ${error.status}` : error.failure) +
+        ' · ' +
+        error.resourceType +
+        ' · +' +
+        error.elapsedMs +
+        ' ms · ' +
+        error.url,
+    ),
     ...t.brokenImages,
     ...(t.warnings || []),
-    ...t.textClipped.map((x) => x.selector + ': ' + x.text),
+    ...t.textClipped.map((x) => `${x.selector}: ${x.text}`),
   ]
   if (diagnostics.length) {
     const details = el('details', 'diagnostics')
-    details.append(el('summary', null, 'Diagnostic details (' + diagnostics.length + ')'))
+    details.append(el('summary', null, `Diagnostic details (${diagnostics.length})`))
     const list = el('ul')
     for (const item of diagnostics) list.append(el('li', null, item))
     details.append(list)
     more.append(details)
-    moreParts.push(diagnostics.length + ' diagnostic' + (diagnostics.length > 1 ? 's' : ''))
+    moreParts.push(`${diagnostics.length} diagnostic${diagnostics.length > 1 ? 's' : ''}`)
   }
   const c = state.critique[t.id]
   if (c) {
@@ -684,8 +698,8 @@ function renderTile(t) {
       for (const issue of c.issues) {
         const item = el('li')
         item.append(
-          el('span', 'sev', issue.severity + ' '),
-          document.createTextNode(issue.what + (issue.where ? ' (' + issue.where + ')' : '')),
+          el('span', 'sev', `${issue.severity} `),
+          document.createTextNode(issue.what + (issue.where ? ` (${issue.where})` : '')),
         )
         list.append(item)
       }
@@ -695,7 +709,7 @@ function renderTile(t) {
     badges.append(
       el(
         'span',
-        'badge' + (c.verdict === 'pass' ? ' ok' : c.verdict === 'fix' ? '' : ' warn'),
+        `badge${c.verdict === 'pass' ? ' ok' : c.verdict === 'fix' ? '' : ' warn'}`,
         c.verdict === 'pass'
           ? 'Critique: pass'
           : c.verdict === 'fix'
@@ -723,7 +737,7 @@ function renderTile(t) {
     const button = el('button', value, label)
     button.setAttribute('aria-pressed', String(d === value))
     button.disabled = state.pending.has(t.id)
-    button.setAttribute('aria-label', label + ' ' + t.id)
+    button.setAttribute('aria-label', `${label} ${t.id}`)
     button.addEventListener('click', () => setDecision(t, value))
     actions.append(button)
   }
@@ -732,9 +746,9 @@ function renderTile(t) {
   note.placeholder = 'What should change?'
   note.maxLength = 2000
   note.value = state.drafts.get(t.id) ?? state.review[t.id]?.note ?? ''
-  note.setAttribute('aria-label', 'Review note for ' + t.id)
+  note.setAttribute('aria-label', `Review note for ${t.id}`)
   const noteHelp = el('small', null, 'Up to 2,000 characters. Saves when you leave this field.')
-  noteHelp.id = 'note-help-' + state.run.tiles.indexOf(t)
+  noteHelp.id = `note-help-${state.run.tiles.indexOf(t)}`
   note.setAttribute('aria-describedby', noteHelp.id)
   note.addEventListener('input', () => {
     if (note.value === (state.review[t.id]?.note ?? '') && !state.pending.has(t.id))
@@ -752,7 +766,7 @@ function renderTile(t) {
   const hasNote = !!(state.drafts.get(t.id) ?? state.review[t.id]?.note)
   if (hasNote) moreParts.unshift('note')
   more.prepend(
-    el('summary', null, 'Note & details' + (moreParts.length ? ' · ' + moreParts.join(' · ') : '')),
+    el('summary', null, `Note & details${moreParts.length ? ` · ${moreParts.join(' · ')}` : ''}`),
   )
   more.open = hasNote || state.failures.has(t.id)
   card.append(actions, more)
@@ -813,7 +827,7 @@ function render() {
   }
   for (const [route, states] of groups) {
     const section = el('section', 'route')
-    section.id = 'route-' + [...new Set(state.run.tiles.map((t) => t.route))].indexOf(route)
+    section.id = `route-${[...new Set(state.run.tiles.map((t) => t.route))].indexOf(route)}`
     const heading = el('h2')
     heading.tabIndex = -1
     heading.append(el('code', null, route))
@@ -858,7 +872,7 @@ async function save(t, patch) {
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ tileId: t.id, imageHash: t.imageHash, ...patch }),
         })
-        if (!response.ok) throw new Error('HTTP ' + response.status)
+        if (!response.ok) throw new Error(`HTTP ${response.status}`)
         const entry = await response.json()
         if (
           !entry ||
@@ -952,7 +966,7 @@ function focusTile(id, scroll = true) {
     state.page = Math.floor(index / state.pageSize)
     render()
   }
-  const node = id && document.querySelector('.tile[data-id="' + CSS.escape(id) + '"]')
+  const node = id && document.querySelector(`.tile[data-id="${CSS.escape(id)}"]`)
   if (node) {
     node.focus({ preventScroll: true })
     if (scroll)
@@ -985,7 +999,7 @@ function updateRegions() {
   const note = state.review[tile?.id]?.anchor
   const pin = $('#note-overlay')
   pin.replaceChildren()
-  pin.setAttribute('viewBox', '0 0 ' + img.naturalWidth + ' ' + img.naturalHeight)
+  pin.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`)
   pin.toggleAttribute(
     'hidden',
     !note ||
@@ -1013,7 +1027,7 @@ function updateRegions() {
   const selected = select.value
   select.replaceChildren(new Option('Choose a region', ''))
   boxes.forEach((_box, index) => {
-    select.add(new Option('Possible blank region ' + (index + 1), String(index)))
+    select.add(new Option(`Possible blank region ${index + 1}`, String(index)))
   })
   select.disabled = !boxes.length
   select.value = selected
@@ -1027,7 +1041,7 @@ function updateRegions() {
       !img.complete ||
       !img.naturalWidth,
   )
-  overlay.setAttribute('viewBox', '0 0 ' + img.naturalWidth + ' ' + img.naturalHeight)
+  overlay.setAttribute('viewBox', `0 0 ${img.naturalWidth} ${img.naturalHeight}`)
   boxes.forEach((box, index) => {
     const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
     for (const [name, value] of Object.entries({ x: box.x, y: box.y, width: box.w, height: box.h }))
@@ -1101,9 +1115,9 @@ function updateViewer() {
   history.replaceState(null, '', url)
   $('#viewer-note').value = state.drafts.get(tile.id) ?? state.review[tile.id]?.note ?? ''
   updateViewerControls()
-  $('#viewer-title').textContent = tile.route + ' · ' + tile.state
+  $('#viewer-title').textContent = `${tile.route} · ${tile.state}`
   $('#viewer-position').textContent =
-    tile.viewport + 'px · ' + tile.theme + ' · ' + (index + 1) + ' of ' + tiles.length
+    `${tile.viewport}px · ${tile.theme} · ${index + 1} of ${tiles.length}`
   const comparison = state.comparison[tile.id] || {}
   const mode = $('#viewer-mode')
   for (const option of mode.options)
@@ -1123,7 +1137,7 @@ function updateViewer() {
   const changes = $('#change-region')
   changes.replaceChildren(new Option('Choose a change', ''))
   ;(comparison.regions || []).forEach((box, index) => {
-    changes.add(new Option('Change ' + (index + 1) + ' · y ' + box.y + 'px', String(index)))
+    changes.add(new Option(`Change ${index + 1} · y ${box.y}px`, String(index)))
   })
   changes.disabled = !comparison.regions?.length || view === 'baseline'
   $('#anchor-note').disabled = !tile.imageHash || view !== 'current' || state.pending.has(tile.id)
@@ -1139,7 +1153,7 @@ function updateViewer() {
   $('#save-anchor').disabled = !tile.imageHash || view !== 'current' || state.pending.has(tile.id)
   $('#anchor-status').textContent = anchor
     ? anchor.imageHash === tile.imageHash
-      ? 'Note location: ' + anchor.x + ', ' + anchor.y + 'px.'
+      ? `Note location: ${anchor.x}, ${anchor.y}px.`
       : 'Note location belongs to different evidence.'
     : ''
   $('#viewer-size').disabled = view === 'split'
@@ -1152,7 +1166,7 @@ function updateViewer() {
   $('#baseline-pane').hidden = view !== 'split'
   $('.viewer-pair').classList.toggle('split', view === 'split')
   $('#baseline-image').src = view === 'split' ? comparison.baselineUrl : ''
-  $('#baseline-image').alt = 'Baseline for ' + tile.route + ', ' + tile.state
+  $('#baseline-image').alt = `Baseline for ${tile.route}, ${tile.state}`
   $('#current-caption').textContent =
     view === 'baseline'
       ? 'Baseline'
@@ -1165,15 +1179,15 @@ function updateViewer() {
     (state.threshold * 100).toFixed(2) +
     '%' +
     (comparison.ratio !== undefined
-      ? ' · ' + (comparison.ratio * 100).toFixed(3) + '% pixels differ'
+      ? ` · ${(comparison.ratio * 100).toFixed(3)}% pixels differ`
       : '') +
-    (comparison.baselineRun ? ' · baseline ' + comparison.baselineRun : '') +
-    (comparison.approvedAt ? ' · approved ' + comparison.approvedAt : '') +
+    (comparison.baselineRun ? ` · baseline ${comparison.baselineRun}` : '') +
+    (comparison.approvedAt ? ` · approved ${comparison.approvedAt}` : '') +
     (comparison.ignored?.length
-      ? ' · ' + comparison.ignored.length + ' comparison masks; original evidence retained'
+      ? ` · ${comparison.ignored.length} comparison masks; original evidence retained`
       : '') +
     (comparison.recipeCompatible === false ? ' · capture recipe differs or unknown' : '') +
-    (comparison.provenance ? ' · environment ' + comparison.provenance : '') +
+    (comparison.provenance ? ` · environment ${comparison.provenance}` : '') +
     (comparison.status === 'size-changed'
       ? ' · Native dimensions differ; pixel overlay unavailable.'
       : '')
@@ -1195,7 +1209,7 @@ function updateViewer() {
       ? comparison.baselineUrl
       : view === 'diff'
         ? comparison.diffUrl
-        : apiPath('/img/' + encodeURIComponent(tile.file))
+        : apiPath(`/img/${encodeURIComponent(tile.file)}`)
   $('#viewer-download').href = img.src
   $('#viewer-download').download = tile.file
   $('#viewer-download').setAttribute('aria-disabled', 'false')
@@ -1359,7 +1373,7 @@ $('#lightbox').addEventListener('close', () => {
     focusTile(viewed, false)
     if (inspect)
       document
-        .querySelector('.tile[data-id="' + CSS.escape(viewed) + '"] .inspect')
+        .querySelector(`.tile[data-id="${CSS.escape(viewed)}"] .inspect`)
         ?.focus({ preventScroll: true })
   } else focusFilterReset()
 })
@@ -1394,7 +1408,7 @@ $('#viewer-region').addEventListener('change', () => {
   $('#viewer-regions').textContent = 'Hide blank regions'
   updateRegions()
   $('#diagnostic-overlay')
-    .querySelector('[data-region="' + value + '"]')
+    .querySelector(`[data-region="${value}"]`)
     ?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' })
 })
 $('#viewer-refresh').addEventListener('click', async () => {
@@ -1472,6 +1486,7 @@ function clearFilters() {
   state.viewport = ''
   state.theme = ''
   state.onlyFlagged = false
+  state.onlyWarnings = false
   state.onlyUnreviewed = false
   state.onlyChanged = false
   $('#search').value = ''
@@ -1479,6 +1494,7 @@ function clearFilters() {
     $(id).value = ''
   $('#f-changed').setAttribute('aria-pressed', 'false')
   $('#f-flagged').setAttribute('aria-pressed', 'false')
+  $('#f-warnings').setAttribute('aria-pressed', 'false')
   $('#f-unrev').setAttribute('aria-pressed', 'false')
   render()
 }
@@ -1490,6 +1506,7 @@ $('#toggle-filters').addEventListener('click', () => {
 for (const [id, key] of [
   ['#f-changed', 'onlyChanged'],
   ['#f-flagged', 'onlyFlagged'],
+  ['#f-warnings', 'onlyWarnings'],
   ['#f-unrev', 'onlyUnreviewed'],
 ])
   $(id).addEventListener('click', (event) => {
@@ -1557,11 +1574,11 @@ $('#export').addEventListener('click', () => {
     },
   }
   const url = URL.createObjectURL(
-    new Blob([JSON.stringify(report, null, 2) + '\n'], { type: 'application/json' }),
+    new Blob([`${JSON.stringify(report, null, 2)}\n`], { type: 'application/json' }),
   )
   const link = el('a')
   link.href = url
-  link.download = 'design-spine-' + state.run.id.replace(/[^a-zA-Z0-9_-]/g, '-') + '.json'
+  link.download = `design-spine-${state.run.id.replace(/[^a-zA-Z0-9_-]/g, '-')}.json`
   link.click()
   setTimeout(() => URL.revokeObjectURL(url), 1000)
   setSaveStatus('Review report downloaded. Baselines have not changed.')