Your CI is red.
Nothing is actually broken.

# Get your token at bughunters.dev — it's free to try
BUGHUNTERS_VISION_TOKEN=bhv_your_token_here

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 90_000, // AI evaluation can take 20–40s on cold start
  reporter: [
    ['list'],
    ['@bughunters/vision/reporter', {
      snapshotsDir: './bhv-snapshots',
      reportDir:    './bhv-report',
    }],
  ],
  use: {
    screenshot:       'off',        // BHV handles screenshots manually

    // ── Core behaviour ──────────────────────────────────────
    bvMode:           'ai',         // 'ai' | 'strict' | 'off'
    bvFailMode:       'hard',       // 'hard' throws | 'soft' collects all failures
    bvUpdateBaseline: false,        // true = force-save current as new baseline

    // ── AI data tolerance — the big one ─────────────────────
    // 'tolerant' (default): live data values — metrics, counters,
    // timestamps — are treated as normal variation and ignored.
    // 'strict': flag ALL changes, including numeric values.
    bvDataTolerance:  'tolerant',   // 'tolerant' | 'strict'

    // ── Snapshot storage ─────────────────────────────────────
    bvSnapshotsDir:   './bhv-snapshots',
    bvApiUrl:         'https://bugvision-backend.vercel.app', // override for on-premise
  } as Record<string, unknown>,
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
});

import { test } from '@playwright/test';
import { vision } from '@bughunters/vision';

const DASHBOARD = 'https://bughunters.dev/dashboard';
const phase     = process.env.DEMO_PHASE ?? 'demo';

function url(bug: string) {
  return `${DASHBOARD}?bug=${phase === 'setup' ? 'none' : bug}`;
}

test.describe('BugHunters Vision — Cloud Dashboard', () => {

  // ── A: identical screenshots → 0 AI calls, $0 cost ─────────
  test('Scenario A — identical pages (Fast Pixel Match)', async ({ page }) => {
    await page.goto(`${DASHBOARD}?bug=none`);
    await page.waitForLoadState('networkidle');
    await vision.check(page, 'cloud-dashboard-A',
      'Verify: Deploy button visible, metrics shown, charts rendered.');
  });

  // ── B: chart bar heights vary slightly → normal data tick ────
  // Regular PW: no computed-style assertion can catch this cleanly.
  // AI: "minor data variation, all good." → PASS
  test('Scenario B — chart data refresh (AI Pass)', async ({ page }) => {
    await page.goto(url('chart-tick'));
    await page.waitForLoadState('networkidle');
    await vision.check(page, 'cloud-dashboard-B',
      'Slight bar height variation in the chart is normal metric ' +
      'refresh — ignore it. Verify Deploy button and layout are intact.');
  });

  // ── C: Deploy button shows trash icon → selectors still PASS ─
  // expect('#deploy-btn').toBeVisible()           → PASSES
  // expect('#deploy-btn').toContainText('Deploy') → PASSES
  // AI sees the trash icon → critical regression → FAIL
  test('Scenario C — wrong icon on Deploy button (AI Fail)', async ({ page }) => {
    await page.goto(url('deploy-icon'));
    await page.waitForLoadState('networkidle');
    await vision.check(page, 'cloud-dashboard-C',
      'Inspect the icon inside the "Deploy" button. It should be a ' +
      'deployment arrow. A trash or delete icon is a critical regression.');
  });

  // ── D: 3 vision.check() calls in one test → all pixel-perfect ─
  // Shows multi-check workflow: header, main content, full page.
  // Report "smart expands" to show checks list without auto-opening.
  test('Scenario D — multiple visual checks (smart expand demo)', async ({ page }) => {
    await page.goto(`${DASHBOARD}?bug=none`);
    await page.waitForLoadState('networkidle');
    await vision.check(page.locator('header, nav').first(), 'dashboard-D-header',
      'Check the navigation header area renders correctly.');
    await vision.check(page.locator('main').first(), 'dashboard-D-metrics',
      'Check the main content area renders correctly.');
    await vision.check(page, 'dashboard-D-fullpage',
      'Check the full dashboard page renders correctly.');
  });

  // ── E: interaction test — Deploy modal broken ─────────────────
  // Check 1: clean page → PIXEL PASS
  // Check 2: open modal → shows red circuit-breaker error → AI FAIL
  // Check 3: close modal → back to clean page → PIXEL PASS
  // Report auto-opens the first failing check ("smart expand").
  test('Scenario E — modal regression (smart expand of failing check)', async ({ page }) => {
    await page.goto(`${DASHBOARD}?bug=none`);
    await page.waitForLoadState('networkidle');
    await vision.check(page, 'dashboard-E-clean',
      'Clean dashboard before interaction.');

    await page.goto(url('modal-broken'));
    await page.waitForLoadState('networkidle');
    await page.click('#deploy-btn');
    await page.waitForSelector('#deploy-modal.open');
    await vision.check(page, 'dashboard-E-modal',
      'The Deploy confirmation modal is open. Correct state: blue ' +
      'deployment panel with version and Confirm button. A red error ' +
      'or disabled button is a critical regression — flag as FAIL.');

    await page.keyboard.press('Escape');
    await page.waitForSelector('#deploy-modal:not(.open)');
    await vision.check(page, 'dashboard-E-after-close',
      'Modal closed — verify dashboard is back to normal state.');
  });

});