#!/usr/bin/env bun
/**
 * Robomp Lifecycle Cards Verification Harness.
 * Drives headless Chrome to assert layout, contrast, interactions, and edge cases.
 */
import * as fs from "node:fs/promises";
import * as path from "node:path";
import type { HTTPRequest } from "puppeteer-core";
import puppeteer from "puppeteer-core";
import type { StatusResponse } from "../src/types";

const VIEWPORT = { width: 1280, height: 720, deviceScaleFactor: 1 } as const;

interface CheckResult {
  name: string;
  ok: boolean;
  detail: string;
}

const results: CheckResult[] = [];

// Resolve a Chrome/Chromium binary. Walks the explicit path, PATH lookups via
// Bun.which, and well-known absolute locations; each candidate is confirmed
// with fs.stat so a directory or stale entry never wins.
async function resolveChrome(explicit: string | undefined): Promise<string> {
  const candidates: string[] = [];
  const fromEnv = explicit ?? process.env.PUPPETEER_EXECUTABLE_PATH ?? process.env.CHROME_PATH;
  if (fromEnv) candidates.push(fromEnv);
  for (const name of ["google-chrome-stable", "google-chrome", "chromium", "chromium-browser", "chrome"]) {
    const found = Bun.which(name);
    if (found) candidates.push(found);
  }
  candidates.push(
    "/usr/bin/google-chrome-stable",
    "/usr/bin/google-chrome",
    "/usr/bin/chromium",
    "/usr/bin/chromium-browser",
    "/snap/bin/chromium",
    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
  );
  for (const candidate of candidates) {
    try {
      const stat = await fs.stat(candidate);
      if (stat.isFile()) return candidate;
    } catch {
      // not present — try the next candidate
    }
  }
  throw new Error("No Chrome/Chromium found. Pass --chrome <path> or set PUPPETEER_EXECUTABLE_PATH.");
}

const baseStatus: StatusResponse = {
  runtime: {
    bot_login: "robomp-bot",
    repo_allowlist: ["octo/widget"],
    max_concurrency: 1,
    model: "test-model",
    thinking_level: "low",
    uptime_seconds: 120,
  },
  event_counts: { queued: 0, running: 0, done: 0, failed: 0, skipped: 0 },
  issue_event_counts: { queued: 0, running: 0, done: 0, failed: 0, skipped: 0 },
  running_events: [],
  inflight: [],
  issues: [],
  recent_events: [],
};

const populatedStatus: StatusResponse = {
  runtime: {
    bot_login: "robomp-bot",
    repo_allowlist: ["octo/widget"],
    max_concurrency: 1,
    model: "test-model",
    thinking_level: "low",
    uptime_seconds: 120,
  },
  event_counts: { queued: 1, running: 1, done: 0, failed: 2, skipped: 0 },
  issue_event_counts: { queued: 1, running: 1, done: 0, failed: 2, skipped: 0 },
  running_events: [
    {
      delivery_id: "run-del-2",
      event_type: "issue_comment",
      repo: "octo/widget",
      issue_key: "octo/widget#2",
      received_at: "2026-06-18T00:00:00Z",
      started_at: "2026-06-18T00:01:00Z",
      attempts: 1,
      model: "claude-3-5",
      last_tool: "edit",
      last_tool_ts: "2026-06-18T00:01:10Z"
    },
    {
      delivery_id: "run-del-9",
      event_type: "issue_comment",
      repo: "octo/widget",
      issue_key: "octo/widget#9",
      received_at: "2026-06-18T00:00:00Z",
      started_at: null,
      attempts: 1,
      model: null,
      last_tool: null,
      last_tool_ts: null
    },
    {
      delivery_id: "run-del-5",
      event_type: "issue_comment",
      repo: "octo/widget",
      issue_key: null,
      received_at: "2026-06-18T00:00:00Z",
      started_at: "2026-06-18T00:01:00Z",
      attempts: 1,
      model: "claude-3-5",
      last_tool: "edit",
      last_tool_ts: null
    }
  ],
  inflight: ["octo/widget#2", "octo/widget#7"],
  issues: [
    {
      key: "octo/widget#1",
      repo: "octo/widget",
      number: 1,
      branch: null,
      pr_number: null,
      state: "fixing",
      classification: "bug",
      updated_at: "2026-06-18T00:00:00Z",
      latest_event: {
        delivery_id: "fail-del-1",
        event_type: "issues",
        state: "failed",
        attempts: 1,
        received_at: "2026-06-18T00:00:00Z",
        last_error: "triage failed error"
      }
    },
    {
      key: "octo/widget#2",
      repo: "octo/widget",
      number: 2,
      branch: "fix-branch",
      pr_number: 42,
      state: "reproducing",
      classification: "bug",
      updated_at: "2026-06-18T00:00:00Z",
      latest_event: {
        delivery_id: "run-del-2",
        event_type: "issue_comment",
        state: "running",
        attempts: 1,
        received_at: "2026-06-18T00:00:00Z",
        last_error: null
      }
    },
    {
      key: "octo/widget#3",
      repo: "octo/widget",
      number: 3,
      branch: null,
      pr_number: null,
      state: "new",
      classification: "bug",
      updated_at: "2026-06-18T00:00:00Z",
      latest_event: {
        delivery_id: "queued-del-3",
        event_type: "issues",
        state: "queued",
        attempts: 1,
        received_at: "2026-06-18T00:00:00Z",
        last_error: null
      }
    },
    {
      key: "octo/widget#4",
      repo: "octo/widget",
      number: 4,
      branch: null,
      pr_number: null,
      state: "new",
      classification: "bug",
      updated_at: "2026-06-18T00:00:00Z",
      latest_event: null
    },
    {
      key: "octo/widget#8",
      repo: "octo/widget",
      number: 8,
      branch: null,
      pr_number: null,
      state: "fixing",
      classification: "bug",
      updated_at: "2026-06-18T00:00:00Z",
      latest_event: {
        delivery_id: "fail-del-8",
        event_type: "issues",
        state: "failed",
        attempts: 1,
        received_at: "2026-06-18T00:00:00Z",
        last_error: null
      }
    },
    {
      key: "octo/widget#9",
      repo: "octo/widget",
      number: 9,
      branch: null,
      pr_number: null,
      state: "reproducing",
      classification: "bug",
      updated_at: "2026-06-18T00:00:00Z",
      latest_event: {
        delivery_id: "run-del-9",
        event_type: "issue_comment",
        state: "running",
        attempts: 1,
        received_at: "2026-06-18T00:00:00Z",
        last_error: null
      }
    },
    {
      key: "octo/widget#10",
      repo: "octo/widget",
      number: 10,
      branch: null,
      pr_number: null,
      state: "merged",
      classification: "bug",
      updated_at: "2026-06-18T00:02:00Z",
      latest_event: {
        delivery_id: "done-del",
        event_type: "issues",
        state: "done",
        attempts: 1,
        received_at: "2026-06-18T00:02:00Z",
        last_error: null
      }
    },
    {
      key: "octo/widget#11",
      repo: "octo/widget",
      number: 11,
      branch: null,
      pr_number: null,
      state: "reproducing",
      classification: "bug",
      updated_at: "2026-06-18T00:00:00Z",
      latest_event: {
        delivery_id: "latest-run-del-11",
        event_type: "issue_comment",
        state: "running",
        attempts: 1,
        received_at: "2026-06-18T00:00:00Z",
        last_error: null
      }
    }
  ],
  recent_events: [
    {
      delivery_id: "superseded-del",
      event_type: "issues",
      repo: "octo/widget",
      issue_key: "octo/widget#10",
      state: "failed",
      attempts: 1,
      received_at: "2026-06-18T00:00:00Z",
      last_error: "old error",
      issue_state: "merged"
    },
    {
      delivery_id: "fail-del-6",
      event_type: "issues",
      repo: "octo/widget",
      issue_key: null,
      state: "failed",
      attempts: 1,
      received_at: "2026-06-18T00:00:00Z",
      last_error: "orphan failed error",
      issue_state: null
    }
  ]
};

async function main(): Promise<void> {
  const outDir = path.resolve(import.meta.dir, "../verify-out/robomp-lifecycle-cards");
  await fs.mkdir(path.join(outDir, "shots"), { recursive: true });

  const chrome = await resolveChrome(undefined);
  console.log(`Chrome resolved: ${chrome}`);

  const browser = await puppeteer.launch({
    headless: true,
    executablePath: chrome,
    args: [
      "--no-sandbox",
      "--disable-setuid-sandbox",
      `--window-size=${VIEWPORT.width},${VIEWPORT.height}`,
    ],
    defaultViewport: { ...VIEWPORT },
  });

  const page = await browser.newPage();
  await page.setRequestInterception(true);

  let statusMock: StatusResponse = baseStatus;
  let statusDelayMs = 0;
  let customIndexHtml: string | null = null;
  // When set, /api/trigger answers POSTs with an error status + detail body so
  // the retry-failure surface (e.g. the Activity status line) can be asserted.
  let triggerErrorDetail: string | null = null;

  // Intercept trigger / cancel requests for asserting later. Bodies are
  // narrowed to a record (or null) so property checks below stay type-safe
  // instead of reaching into `unknown`.
  const triggeredRequests: { url: string; method: string; headers: Record<string, string>; body: Record<string, unknown> | null }[] = [];

  page.on("request", async (req: HTTPRequest) => {
    const url = new URL(req.url());

    if (req.resourceType() === "document" && customIndexHtml !== null) {
      req.respond({
        status: 200,
        contentType: "text/html",
        body: customIndexHtml,
      });
      return;
    }

    if (url.pathname === "/api/status") {
      if (statusDelayMs > 0) {
        await Bun.sleep(statusDelayMs);
      }
      req.respond({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify(statusMock),
      });
    } else if (url.pathname === "/api/logs") {
      req.respond({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({ entries: [], count: 0, limit: 400 }),
      });
    } else if (url.pathname === "/api/github/issues") {
      req.respond({
        status: 200,
        contentType: "application/json",
        body: JSON.stringify({ issues: [], errors: [], repos: ["octo/widget"], cache: { hit: false, fetched_at: 0 } }),
      });
    } else if (url.pathname === "/api/trigger" && req.method() === "POST") {
      const parsedBody: Record<string, unknown> | null = req.postData() ? (JSON.parse(req.postData()!) as Record<string, unknown>) : null;
      const deliveryId = parsedBody?.delivery_id;
      const mode = parsedBody?.mode;
      triggeredRequests.push({
        url: req.url(),
        method: req.method(),
        headers: req.headers() as Record<string, string>,
        body: parsedBody,
      });
      if (triggerErrorDetail !== null) {
        req.respond({
          status: 500,
          contentType: "application/json",
          body: JSON.stringify({ detail: triggerErrorDetail }),
        });
      } else {
        req.respond({
          status: 202,
          contentType: "application/json",
          body: JSON.stringify({
            delivery: (typeof deliveryId === "string" && deliveryId) ? deliveryId : "manual-trigger",
            state: "queued",
            mode: (typeof mode === "string" && mode) ? mode : "triage",
          }),
        });
      }
    } else if (url.pathname === "/api/cancel" && req.method() === "POST") {
      const parsedBody: Record<string, unknown> | null = req.postData() ? (JSON.parse(req.postData()!) as Record<string, unknown>) : null;
      const deliveryId = parsedBody?.delivery_id;
      triggeredRequests.push({
        url: req.url(),
        method: req.method(),
        headers: req.headers() as Record<string, string>,
        body: parsedBody,
      });
      req.respond({
        status: 202,
        contentType: "application/json",
        body: JSON.stringify({
          delivery: (typeof deliveryId === "string" && deliveryId) ? deliveryId : "cancel-trigger",
          fired: false,
          previous_state: "running",
        }),
      });
    } else {
      req.continue();
    }
  });

  const BASE_URL = "http://127.0.0.1:8099/";

  // 1. Skeleton state
  statusMock = baseStatus;
  statusDelayMs = 600;
  await page.goto(BASE_URL, { waitUntil: "domcontentloaded" });
  
  // Wait a small frame but not full delay
  await Bun.sleep(100);
  const skeletonsCount = await page.evaluate(() => document.querySelectorAll(".rmp-card-skeleton").length);
  const cardsCount = await page.evaluate(() => document.querySelectorAll(".rmp-card").length);
  results.push({
    name: "skeleton-state",
    ok: skeletonsCount >= 2 && cardsCount === 0,
    detail: `Found ${skeletonsCount} skeletons and ${cardsCount} cards.`,
  });
  await page.screenshot({ path: path.join(outDir, "shots/skeleton.png") });

  statusDelayMs = 0; // reset delay

  // 2. Empty state + allowlist
  statusMock = {
    ...baseStatus,
    runtime: {
      ...baseStatus.runtime,
      repo_allowlist: ["octo/widget", "octo/robomp"],
    },
  };
  await page.goto(BASE_URL, { waitUntil: "networkidle0" });
  const emptyText = await page.evaluate(() => document.querySelector(".rmp-pipeline-empty")?.textContent ?? "");
  results.push({
    name: "empty-state-allowlist",
    ok: emptyText.includes("No active work") && emptyText.includes("watching octo/widget, octo/robomp"),
    detail: `Empty text: "${emptyText}"`,
  });
  await page.screenshot({ path: path.join(outDir, "shots/empty-dark.png") });

  // Helper for applying theme
  const applyTheme = async (themeName: "dark" | "light") => {
    await page.evaluate((theme) => {
      localStorage.setItem("omp-robomp-theme", theme);
      document.documentElement.dataset.theme = theme;
      document.documentElement.style.colorScheme = theme;
    }, themeName);
    await page.reload({ waitUntil: "networkidle0" });
  };

  // 3. Populated state - Dark Theme
  statusMock = populatedStatus;
  await page.goto(BASE_URL, { waitUntil: "networkidle0" });
  await applyTheme("dark");

  const cards = await page.evaluate(() => {
    const elements = document.querySelectorAll(".rmp-card");
    return Array.from(elements).map((el) => {
      const key = el.querySelector(".rmp-card-id")?.textContent?.trim() ?? "";
      const bucket = el.getAttribute("data-bucket") ?? "";
      const errorText = el.querySelector(".rmp-card-error")?.textContent?.trim() ?? "";
      const actions = Array.from(el.querySelectorAll(".rmp-card-actions button")).map(b => b.textContent?.trim());
      const metaText = el.querySelector(".rmp-card-meta")?.textContent?.trim() ?? "";
      const text = el.textContent ?? "";
      const stepper = el.querySelector(".rmp-step") !== null;
      const currentStep = el.querySelector(".rmp-step-node[data-state='current']") !== null;
      const liveStep = el.querySelector(".rmp-step-node[data-live='true']") !== null;
      const failedStep = el.querySelector(".rmp-step-node[data-state='failed']") !== null;
      return { key, bucket, errorText, actions, metaText, text, stepper, currentStep, liveStep, failedStep };
    });
  });

  console.log("All resolved cards:", JSON.stringify(cards));
  const fullFailedCard = cards.find(c => c.key === "bugocto/widget#1");
  const runningCard = cards.find(c => c.key === "bugocto/widget#2");
  const inflightOnlyCard = cards.find(c => c.key === "issueocto/widget#7");
  const compactOrphanRunning = cards.find(c => c.key === "run-del-");
  const compactOrphanFailed = cards.find(c => c.key === "fail-del");
  const failedWithoutErr = cards.find(c => c.key === "bugocto/widget#8");
  const runningWithInvalidTs = cards.find(c => c.key === "bugocto/widget#9");
  const queuedCard = cards.find(c => c.key === "bugocto/widget#3");
  const activeCard = cards.find(c => c.key === "bugocto/widget#4");
  // Latest-event-only running: issue.latest_event is running but no matching
  // running_events row and not inflight (live === null, inflightOnly === false).
  const latestEventOnlyRunning = cards.find(c => c.key === "bugocto/widget#11");

  // Check failed full card
  results.push({
    name: "failed-full-card",
    ok: !!fullFailedCard && fullFailedCard.bucket === "failed" && fullFailedCard.errorText === "triage failed error" && fullFailedCard.actions.includes("retry"),
    detail: `Failed full card check: ${JSON.stringify(fullFailedCard)}`,
  });

  // Check running full card
  results.push({
    name: "running-full-card",
    ok: !!runningCard && runningCard.bucket === "running" && runningCard.metaText.includes("claude-3-5") && runningCard.metaText.includes("last action edit") && runningCard.actions.includes("cancel"),
    detail: `Running full card check: ${JSON.stringify(runningCard)}`,
  });

  // Check inflight-only card
  results.push({
    name: "inflight-only-card",
    ok: !!inflightOnlyCard && inflightOnlyCard.bucket === "running" && inflightOnlyCard.metaText.includes("held by pool") && inflightOnlyCard.actions.length === 0 && inflightOnlyCard.stepper && inflightOnlyCard.liveStep,
    detail: `Inflight-only card check: ${JSON.stringify(inflightOnlyCard)}`,
  });

  // Check compact orphan running
  results.push({
    name: "compact-orphan-running",
    ok: !!compactOrphanRunning && compactOrphanRunning.bucket === "running" && !compactOrphanRunning.stepper && compactOrphanRunning.actions.includes("cancel"),
    detail: `Compact orphan running check: ${JSON.stringify(compactOrphanRunning)}`,
  });

  // Check compact orphan failed
  results.push({
    name: "compact-orphan-failed",
    ok: !!compactOrphanFailed && compactOrphanFailed.bucket === "failed" && !compactOrphanFailed.stepper && compactOrphanFailed.actions.includes("retry"),
    detail: `Compact orphan failed check: ${JSON.stringify(compactOrphanFailed)}`,
  });

  // Check failed without error text
  results.push({
    name: "failed-without-error-text",
    ok: !!failedWithoutErr && failedWithoutErr.bucket === "failed" && failedWithoutErr.errorText === "" && failedWithoutErr.actions.includes("retry"),
    detail: `Failed without error text check: ${JSON.stringify(failedWithoutErr)}`,
  });

  // Check invalid/missing started_at on running item elapsed renders "—"
  results.push({
    name: "invalid-missing-started-at-elapsed",
    ok: !!runningWithInvalidTs && runningWithInvalidTs.metaText.includes("elapsed —"),
    detail: `Running with invalid ts check: ${JSON.stringify(runningWithInvalidTs)}`,
  });

  // Check queued full card — non-terminal issue whose latest event is queued.
  results.push({
    name: "queued-full-card",
    ok: !!queuedCard && queuedCard.bucket === "queued" && queuedCard.stepper && queuedCard.currentStep && queuedCard.actions.length === 0,
    detail: `Queued full card check: ${JSON.stringify(queuedCard)}`,
  });

  // Check active full card — non-terminal issue with no latest event yet.
  results.push({
    name: "active-full-card",
    ok: !!activeCard && activeCard.bucket === "active" && activeCard.stepper && activeCard.currentStep && activeCard.actions.length === 0,
    detail: `Active full card check: ${JSON.stringify(activeCard)}`,
  });

  // Latest-event-only running card — renders as running (latest_event state),
  // but with NO live row it must not expose cancel (nothing to kill) and must
  // not mark a lifecycle step live (no real subprocess heartbeat).
  results.push({
    name: "latest-event-only-running-no-cancel-no-live-step",
    ok: !!latestEventOnlyRunning &&
      latestEventOnlyRunning.bucket === "running" &&
      !latestEventOnlyRunning.actions.includes("cancel") &&
      latestEventOnlyRunning.stepper &&
      !latestEventOnlyRunning.liveStep,
    detail: `Latest-event-only running card check: ${JSON.stringify(latestEventOnlyRunning)}`,
  });

  // Failed cards must sort ahead of every other bucket: the first rendered
  // card is a failed card (DOM order mirrors buildWorkItems sort order).
  results.push({
    name: "failed-sorts-first",
    ok: cards.length > 0 && cards[0].bucket === "failed",
    detail: `First rendered card: ${JSON.stringify(cards[0] ?? null)}`,
  });

  // Stepper state indicators (existing data attributes, not invented):
  // the running card's current node is marked live; the failed card's
  // current node carries the failed state.
  results.push({
    name: "stepper-running-live-node",
    ok: !!runningCard && runningCard.currentStep && runningCard.liveStep,
    detail: `Running card stepper currentStep=${runningCard?.currentStep} liveStep=${runningCard?.liveStep}`,
  });
  results.push({
    name: "stepper-failed-node",
    ok: !!fullFailedCard && fullFailedCard.failedStep,
    detail: `Failed card stepper failedStep=${fullFailedCard?.failedStep}`,
  });

  // Check superseded + terminal exclusion against the rendered lifecycle-card
  // model above, not document.body. Activity stays mounted while hidden and may
  // legitimately contain historical terminal events.
  const terminalLeakKeys = cards
    .filter(
      (card) =>
        card.text.includes("superseded-del") ||
        card.text.includes("done-del") ||
        card.text.includes("octo/widget#10"),
    )
    .map((card) => card.key);
  results.push({
    name: "superseded-terminal-exclusion-visual",
    ok: terminalLeakKeys.length === 0,
    detail: `Terminal/superseded card keys: ${terminalLeakKeys.join(", ") || "none"}`,
  });
  const debugTextContrast = await page.evaluate(() => {
    const getLuminance = (str: string): number => {
      const s = str.trim().toLowerCase();
      if (s.startsWith("lab")) {
        const m = s.match(/lab\(([\d.]+)\s+([\d.-]+)\s+([\d.-]+)/);
        if (m) {
          const L = parseFloat(m[1]);
          return L > 8 ? Math.pow((L + 16) / 116, 3) : L / 903.3;
        }
      }
      const mRgb = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
      if (mRgb) {
        const r = parseInt(mRgb[1]), g = parseInt(mRgb[2]), b = parseInt(mRgb[3]);
        const a = [r, g, b].map(v => {
          v /= 255;
          return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
        });
        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
      }
      return 0;
    };

    const getContrast = (c1: string, c2: string): number => {
      const lum1 = getLuminance(c1);
      const lum2 = getLuminance(c2);
      return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
    };

    const getBgColor = (el: Element, fallback = "lab(15 0 0)"): string => {
      let cur: Element | null = el;
      while (cur) {
        const bg = window.getComputedStyle(cur).backgroundColor;
        if (bg && bg !== "transparent" && !bg.includes("rgba(0, 0, 0, 0)")) {
          return bg;
        }
        cur = cur.parentElement;
      }
      return fallback;
    };

    const meta = document.querySelector(".rmp-card-meta");
    const label = document.querySelector(".rmp-step-label");
    const error = document.querySelector(".rmp-card-error");
    const pill = document.querySelector(".pill");

    const getElDetails = (el: Element | null) => {
      if (!el) return null;
      const fg = window.getComputedStyle(el).color;
      const bg = getBgColor(el);
      const ratio = getContrast(fg, bg);
      return {
        tag: el.tagName,
        class: el.className,
        text: el.textContent?.trim()?.slice(0, 30),
        fgStr: fg,
        bgStr: bg,
        ratio
      };
    };

    return {
      meta: getElDetails(meta),
      label: getElDetails(label),
      error: getElDetails(error),
      pill: getElDetails(pill),
    };
  });
  console.log("Contrast diagnostics (dark theme):", JSON.stringify(debugTextContrast, null, 2));

  // Contrast & structural checks (dark theme)
  const structuralCheck = await page.evaluate(() => {
    const cards = Array.from(document.querySelectorAll(".rmp-card"));
    
    // borders and shadows
    const borderShadowOk = cards.every(el => {
      const style = window.getComputedStyle(el);
      const radius = style.borderRadius;
      const shadow = style.boxShadow;
      const bl = parseFloat(style.borderLeftWidth);
      const br = parseFloat(style.borderRightWidth);
      return radius === "8px" && (shadow === "none" || shadow.includes("0px 0px 0px") || shadow === "") && bl <= 1.05 && br <= 1.05;
    });

    const getLuminance = (str: string): number => {
      const s = str.trim().toLowerCase();
      if (s.startsWith("lab")) {
        const m = s.match(/lab\(([\d.]+)\s+([\d.-]+)\s+([\d.-]+)/);
        if (m) {
          const L = parseFloat(m[1]);
          return L > 8 ? Math.pow((L + 16) / 116, 3) : L / 903.3;
        }
      }
      const mRgb = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
      if (mRgb) {
        const r = parseInt(mRgb[1]), g = parseInt(mRgb[2]), b = parseInt(mRgb[3]);
        const a = [r, g, b].map(v => {
          v /= 255;
          return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
        });
        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
      }
      return 0;
    };

    const getContrast = (c1: string, c2: string): number => {
      const lum1 = getLuminance(c1);
      const lum2 = getLuminance(c2);
      return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
    };

    const getBgColor = (el: Element): string => {
      let cur: Element | null = el;
      while (cur) {
        const bg = window.getComputedStyle(cur).backgroundColor;
        if (bg && bg !== "transparent" && !bg.includes("rgba(0, 0, 0, 0)")) {
          return bg;
        }
        cur = cur.parentElement;
      }
      return "lab(15 0 0)";
    };

    const metaElements = Array.from(document.querySelectorAll(".rmp-card-meta"));
    const labelElements = Array.from(document.querySelectorAll(".rmp-step-label"));
    const errorElements = Array.from(document.querySelectorAll(".rmp-card-error"));
    const pillElements = Array.from(document.querySelectorAll(".pill"));

    const textElements = [...metaElements, ...labelElements, ...errorElements];
    const textContrastOk = textElements.every(el => {
      const fg = window.getComputedStyle(el).color;
      const bg = getBgColor(el);
      const ratio = getContrast(fg, bg);
      return ratio >= 4.5;
    });

    const pillContrastOk = pillElements.every(el => {
      const fg = window.getComputedStyle(el).color;
      const bg = getBgColor(el);
      const ratio = getContrast(fg, bg);
      return ratio >= 3.0;
    });

    return { borderShadowOk, textContrastOk, pillContrastOk };
  });

  results.push({
    name: "dark-theme-structural",
    ok: structuralCheck.borderShadowOk,
    detail: "Computed borderRadius, boxShadow, and border widths match constraints.",
  });

  results.push({
    name: "dark-theme-text-contrast",
    ok: structuralCheck.textContrastOk,
    detail: "Text elements meta/label/error contrast ratio >= 4.5 against card backgrounds.",
  });

  results.push({
    name: "dark-theme-pill-contrast",
    ok: structuralCheck.pillContrastOk,
    detail: "Pill elements contrast ratio >= 3.0 against card backgrounds.",
  });

  await page.screenshot({ path: path.join(outDir, "shots/populated-dark-replay.png") });

  // 4. Populated state - Light Theme
  await applyTheme("light");

  const lightThemeChecks = await page.evaluate(() => {
    const getLuminance = (str: string): number => {
      const s = str.trim().toLowerCase();
      if (s.startsWith("lab")) {
        const m = s.match(/lab\(([\d.]+)\s+([\d.-]+)\s+([\d.-]+)/);
        if (m) {
          const L = parseFloat(m[1]);
          return L > 8 ? Math.pow((L + 16) / 116, 3) : L / 903.3;
        }
      }
      const mRgb = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
      if (mRgb) {
        const r = parseInt(mRgb[1]), g = parseInt(mRgb[2]), b = parseInt(mRgb[3]);
        const a = [r, g, b].map(v => {
          v /= 255;
          return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
        });
        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
      }
      return 1.0;
    };

    const getContrast = (c1: string, c2: string): number => {
      const lum1 = getLuminance(c1);
      const lum2 = getLuminance(c2);
      return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
    };

    const getBgColor = (el: Element): string => {
      let cur: Element | null = el;
      while (cur) {
        const bg = window.getComputedStyle(cur).backgroundColor;
        if (bg && bg !== "transparent" && !bg.includes("rgba(0, 0, 0, 0)")) {
          return bg;
        }
        cur = cur.parentElement;
      }
      return "lab(100 0 0)";
    };

    const metaElements = Array.from(document.querySelectorAll(".rmp-card-meta"));
    const labelElements = Array.from(document.querySelectorAll(".rmp-step-label"));
    const errorElements = Array.from(document.querySelectorAll(".rmp-card-error"));
    const pillElements = Array.from(document.querySelectorAll(".pill"));

    const textElements = [...metaElements, ...labelElements, ...errorElements];
    const textContrastOk = textElements.every(el => {
      const fg = window.getComputedStyle(el).color;
      const bg = getBgColor(el);
      const ratio = getContrast(fg, bg);
      return ratio >= 4.5;
    });

    const pillContrastOk = pillElements.every(el => {
      const fg = window.getComputedStyle(el).color;
      const bg = getBgColor(el);
      const ratio = getContrast(fg, bg);
      return ratio >= 3.0;
    });

    return { textContrastOk, pillContrastOk };
  });

  results.push({
    name: "light-theme-text-contrast",
    ok: lightThemeChecks.textContrastOk,
    detail: "Light theme: text elements meta/label/error contrast ratio >= 4.5.",
  });

  results.push({
    name: "light-theme-pill-contrast",
    ok: lightThemeChecks.pillContrastOk,
    detail: "Light theme: pill elements contrast ratio >= 3.0.",
  });

  await page.screenshot({ path: path.join(outDir, "shots/populated-light-replay.png") });

  // 5. Read-only pass
  // Fetch the real index.html from server, and replace the robomp-config script tag
  const resp = await fetch(BASE_URL);
  let html = await resp.text();
  html = html.replace(
    /<script id="robomp-config" type="application\/json">[^<]*<\/script>/,
    '<script id="robomp-config" type="application/json">{"replayEnabled":false,"replayToken":""}</script>'
  );
  customIndexHtml = html;

  // Reload page to parse with read-only config
  await page.goto(BASE_URL, { waitUntil: "networkidle0" });
  await applyTheme("dark");

  const readonly = await page.evaluate(() => {
    const bar = document.querySelector(".rmp-trigger-bar");
    return {
      chipText: bar?.querySelector(".rmp-readonly-chip")?.textContent?.trim() ?? "",
      barInputs: document.querySelectorAll(".rmp-trigger-bar input").length,
      barButtons: document.querySelectorAll(".rmp-trigger-bar button").length,
      cardActionButtons: document.querySelectorAll(".rmp-card-actions button").length,
      cardActionWrappers: document.querySelectorAll(".rmp-card-actions").length,
    };
  });

  results.push({
    name: "readonly-actions-disabled",
    ok:
      readonly.chipText.includes("trigger disabled · read-only") &&
      readonly.barInputs === 0 &&
      readonly.barButtons === 0 &&
      readonly.cardActionButtons === 0 &&
      readonly.cardActionWrappers === 0,
    detail: `Trigger-bar chip: "${readonly.chipText}". Trigger-bar inputs: ${readonly.barInputs}, buttons: ${readonly.barButtons}. Card action buttons: ${readonly.cardActionButtons}, wrappers: ${readonly.cardActionWrappers}.`,
  });

  await page.screenshot({ path: path.join(outDir, "shots/populated-dark-readonly.png") });

  customIndexHtml = null; // restore index intercept

  // 6. Responsive check
  await page.setViewport({ width: 380, height: 720 });
  await page.goto(BASE_URL, { waitUntil: "networkidle0" });
  await applyTheme("dark");

  const responsiveOk = await page.evaluate(() => {
    const grid = document.querySelector(".rmp-card-grid");
    if (!grid) return false;
    const cards = Array.from(document.querySelectorAll(".rmp-card"));

    // Single column: every card fits within the grid's content width. A card
    // wider than the grid (allowing 1px sub-pixel rounding) means it broke out
    // of the column and must fail.
    const gridWidth = grid.getBoundingClientRect().width;
    const allCardsWithinGrid = cards.every(c => {
      const cardWidth = c.getBoundingClientRect().width;
      return cardWidth <= gridWidth + 1;
    });

    // Content doesn't overflow card container.
    const noCardOverflow = cards.every(c => {
      return c.scrollWidth <= c.clientWidth + 1;
    });

    // The page itself must not scroll horizontally: document and body content
    // width stay within their client width (1px tolerance for rounding).
    const docEl = document.documentElement;
    const noPageOverflow =
      docEl.scrollWidth <= docEl.clientWidth + 1 &&
      document.body.scrollWidth <= document.body.clientWidth + 1;

    return allCardsWithinGrid && noCardOverflow && noPageOverflow;
  });
  const debugResponsive = await page.evaluate(() => {
    const grid = document.querySelector(".rmp-card-grid");
    const cards = Array.from(document.querySelectorAll(".rmp-card"));
    const docEl = document.documentElement;
    return {
      gridWidth: grid ? grid.getBoundingClientRect().width : 0,
      maxCardWidth: cards.reduce((m, c) => Math.max(m, c.getBoundingClientRect().width), 0),
      docScrollWidth: docEl.scrollWidth,
      docClientWidth: docEl.clientWidth,
      bodyScrollWidth: document.body.scrollWidth,
      bodyClientWidth: document.body.clientWidth,
    };
  });
  console.log("Debug responsive widths:", JSON.stringify(debugResponsive));
  results.push({
    name: "responsive-single-column-no-overflow",
    ok: responsiveOk,
    detail: `At width 380: every card fits within the grid and neither cards nor the page scroll horizontally. Grid: ${debugResponsive.gridWidth}, maxCard: ${debugResponsive.maxCardWidth}, doc: ${debugResponsive.docScrollWidth}/${debugResponsive.docClientWidth}, body: ${debugResponsive.bodyScrollWidth}/${debugResponsive.bodyClientWidth}`,
  });

  await page.screenshot({ path: path.join(outDir, "shots/responsive-dark.png") });

  // Restore viewport
  await page.setViewport({ ...VIEWPORT });

  // 7. Reduced motion check.
  await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "reduce" }]);

  // 7a. Skeleton phase — delay the status response so the loading skeleton is
  //     actually on screen, then assert its pulse animation is suppressed
  //     WHILE skeleton elements exist (the old check ran after data loaded, so
  //     no skeleton was present and the assertion was vacuous).
  statusMock = baseStatus;
  statusDelayMs = 600;
  await page.goto(BASE_URL, { waitUntil: "domcontentloaded" });
  await Bun.sleep(150); // inside the delay window: skeleton still rendered
  const reducedSkeleton = await page.evaluate(() => {
    const skeletons = Array.from(document.querySelectorAll(".rmp-card-skeleton"));
    return {
      count: skeletons.length,
      allDisabled: skeletons.every((el) => window.getComputedStyle(el).animationName === "none"),
    };
  });
  statusDelayMs = 0;
  results.push({
    name: "reduced-motion-skeleton-animation-disabled",
    ok: reducedSkeleton.count >= 2 && reducedSkeleton.allDisabled,
    detail: `Skeletons present: ${reducedSkeleton.count}, all animations disabled: ${reducedSkeleton.allDisabled}`,
  });

  // 7b. Populated phase — once cards render, the live stepper node and card
  //     element exist; assert their animation/transition are suppressed too.
  statusMock = populatedStatus;
  await page.goto(BASE_URL, { waitUntil: "networkidle0" });
  const reducedPopulated = await page.evaluate(() => {
    const liveStepNode = document.querySelector(".rmp-step-node[data-live='true']");
    const nodeStyle = liveStepNode ? window.getComputedStyle(liveStepNode).animationName : "none";
    const card = document.querySelector(".rmp-card");
    const cardTransition = card ? window.getComputedStyle(card).transition : "none";
    return {
      liveNodePresent: liveStepNode !== null,
      nodeAnimationOff: nodeStyle === "none" || nodeStyle === "",
      cardTransitionOff: cardTransition.includes("none") || cardTransition === "all 0s" || cardTransition === "",
    };
  });
  results.push({
    name: "reduced-motion-node-and-card-animations-disabled",
    ok: reducedPopulated.liveNodePresent && reducedPopulated.nodeAnimationOff && reducedPopulated.cardTransitionOff,
    detail: `Live node present: ${reducedPopulated.liveNodePresent}, node animation off: ${reducedPopulated.nodeAnimationOff}, card transition off: ${reducedPopulated.cardTransitionOff}`,
  });

  // Restore media features
  await page.emulateMediaFeatures([]);

  // 8. Interactions (clicks).
  // Serve a replay-enabled index with a KNOWN token so every privileged
  // request carries an auditable `X-Robomp-Replay-Token: trigger-secret`
  // header, independent of whatever token the live server was started with.
  const REPLAY_TOKEN = "trigger-secret";
  const replayResp = await fetch(BASE_URL);
  const replayHtml = (await replayResp.text()).replace(
    /<script id="robomp-config" type="application\/json">[^<]*<\/script>/,
    `<script id="robomp-config" type="application/json">{"replayEnabled":true,"replayToken":"${REPLAY_TOKEN}"}</script>`,
  );
  customIndexHtml = replayHtml;
  statusMock = populatedStatus;
  await page.goto(BASE_URL, { waitUntil: "networkidle0" });
  await applyTheme("dark");

  // A. Retry click — exactly one POST /api/trigger {mode:"retry", delivery_id}
  //    carrying the replay token.
  triggeredRequests.length = 0;
  await page.evaluate(() => {
    const btn = document.querySelector(".rmp-card[data-bucket='failed'] button") as HTMLElement | null;
    btn?.click();
  });
  await Bun.sleep(100); // wait for request and state update
  const retryReqs = triggeredRequests.filter(
    (r) => r.url.endsWith("/api/trigger") && r.body?.mode === "retry" && r.body?.delivery_id === "fail-del-1",
  );
  const statusTextA = await page.evaluate(() => document.querySelector(".rmp-trigger-bar-status")?.textContent ?? "");
  results.push({
    name: "interaction-retry-click",
    ok: retryReqs.length === 1 && retryReqs[0].headers["x-robomp-replay-token"] === REPLAY_TOKEN && statusTextA.includes("queued retry: fail-del-1"),
    detail: `Matching retry requests: ${retryReqs.length}, token: "${retryReqs[0]?.headers["x-robomp-replay-token"] ?? ""}". Status text: "${statusTextA}"`,
  });

  // B. Cancel click (confirm accepted) — exactly one POST /api/cancel
  //    {delivery_id} carrying the replay token.
  triggeredRequests.length = 0;
  await page.evaluate(() => {
    window.confirm = () => true;
    const card = Array.from(document.querySelectorAll(".rmp-card")).find(c => c.querySelector(".rmp-card-id")?.textContent?.includes("octo/widget#2"));
    const btn = card?.querySelector("button.danger") as HTMLElement | null;
    btn?.click();
  });
  await Bun.sleep(100);
  const cancelReqs = triggeredRequests.filter(
    (r) => r.url.endsWith("/api/cancel") && r.body?.delivery_id === "run-del-2",
  );
  const statusTextB = await page.evaluate(() => document.querySelector(".rmp-trigger-bar-status")?.textContent ?? "");
  results.push({
    name: "interaction-cancel-click-accepted",
    ok: cancelReqs.length === 1 && cancelReqs[0].headers["x-robomp-replay-token"] === REPLAY_TOKEN && statusTextB.includes("cancel signaled: run-del- (fired=false)"),
    detail: `Matching cancel requests: ${cancelReqs.length}, token: "${cancelReqs[0]?.headers["x-robomp-replay-token"] ?? ""}". Status text: "${statusTextB}"`,
  });

  // C. Cancel click (confirm dismissed) — verbatim confirm gate suppresses the
  //    request entirely; assert zero /api/cancel requests fire.
  triggeredRequests.length = 0;
  await page.evaluate(() => {
    window.confirm = () => false;
    const card = Array.from(document.querySelectorAll(".rmp-card")).find(c => c.querySelector(".rmp-card-id")?.textContent?.includes("octo/widget#2"));
    const btn = card?.querySelector("button.danger") as HTMLElement | null;
    btn?.click();
  });
  await Bun.sleep(100);
  const dismissedCancelReqs = triggeredRequests.filter((r) => r.url.endsWith("/api/cancel"));
  results.push({
    name: "interaction-cancel-click-dismissed",
    ok: dismissedCancelReqs.length === 0,
    detail: `Cancel requests fired after dismissal: ${dismissedCancelReqs.length}`,
  });

  // D. Trigger bar triage click — exactly one POST /api/trigger
  //    {mode:"triage", issue} carrying the replay token.
  triggeredRequests.length = 0;
  await page.type(".rmp-trigger-bar input", "octo/widget#5");
  await page.evaluate(() => {
    const btns = Array.from(document.querySelectorAll(".rmp-trigger-bar button"));
    const triageBtn = btns.find(b => b.textContent?.trim() === "triage");
    triageBtn?.click();
  });
  await Bun.sleep(100);
  const triageReqs = triggeredRequests.filter(
    (r) => r.url.endsWith("/api/trigger") && r.body?.mode === "triage" && r.body?.issue === "octo/widget#5",
  );
  results.push({
    name: "trigger-bar-triage-click",
    ok: triageReqs.length === 1 && triageReqs[0].headers["x-robomp-replay-token"] === REPLAY_TOKEN,
    detail: `Matching triage requests: ${triageReqs.length}, token: "${triageReqs[0]?.headers["x-robomp-replay-token"] ?? ""}"`,
  });

  // E. Trigger bar retry latest click — exactly one POST /api/trigger
  //    {mode:"retry", issue} carrying the replay token.
  triggeredRequests.length = 0;
  await page.evaluate(() => {
    const btns = Array.from(document.querySelectorAll(".rmp-trigger-bar button"));
    const retryBtn = btns.find(b => b.textContent?.trim() === "retry latest");
    retryBtn?.click();
  });
  await Bun.sleep(100);
  const retryLatestReqs = triggeredRequests.filter(
    (r) => r.url.endsWith("/api/trigger") && r.body?.mode === "retry" && r.body?.issue === "octo/widget#5",
  );
  results.push({
    name: "trigger-bar-retry-latest-click",
    ok: retryLatestReqs.length === 1 && retryLatestReqs[0].headers["x-robomp-replay-token"] === REPLAY_TOKEN,
    detail: `Matching retry-latest requests: ${retryLatestReqs.length}, token: "${retryLatestReqs[0]?.headers["x-robomp-replay-token"] ?? ""}"`,
  });

  // F. Trigger bar Enter key — Enter in the input triages; exactly one POST
  //    /api/trigger {mode:"triage", issue} carrying the replay token.
  triggeredRequests.length = 0;
  await page.focus(".rmp-trigger-bar input");
  await page.keyboard.press("Enter");
  await Bun.sleep(100);
  const enterReqs = triggeredRequests.filter(
    (r) => r.url.endsWith("/api/trigger") && r.body?.mode === "triage" && r.body?.issue === "octo/widget#5",
  );
  results.push({
    name: "trigger-bar-enter-press",
    ok: enterReqs.length === 1 && enterReqs[0].headers["x-robomp-replay-token"] === REPLAY_TOKEN,
    detail: `Matching enter requests: ${enterReqs.length}, token: "${enterReqs[0]?.headers["x-robomp-replay-token"] ?? ""}"`,
  });

  // G. Activity-view retry failure — switching to Activity and retrying a
  //    failed event must surface the trigger error WHERE the button was
  //    clicked (the Trigger bar lives only on Operations/Triage). Force
  //    /api/trigger to error, click the Activity events-table retry button,
  //    and assert .rmp-activity-status shows the error with role="alert" and
  //    that exactly one trigger request fired carrying the replay token.
  triggeredRequests.length = 0;
  const ACTIVITY_ERROR_DETAIL = "forced retry failure";
  triggerErrorDetail = ACTIVITY_ERROR_DETAIL;
  // Switch to the Activity view via the nav rail.
  await page.evaluate(() => {
    const navBtn = Array.from(document.querySelectorAll(".rmp-nav-item")).find(
      (b) => b.querySelector(".rmp-nav-item-label")?.textContent?.trim() === "Activity",
    ) as HTMLElement | null;
    navBtn?.click();
  });
  await Bun.sleep(100); // let the view flip to display:flex
  // Click the first retry button in the Activity events table (Events is the
  // only `table.t` consumer, so this is unambiguous).
  await page.evaluate(() => {
    const btn = Array.from(document.querySelectorAll("table.t button")).find(
      (b) => b.textContent?.trim() === "retry",
    ) as HTMLElement | null;
    btn?.click();
  });
  await Bun.sleep(100); // wait for the failed trigger round-trip + state update
  const activityStatus = await page.evaluate(() => {
    const el = document.querySelector(".rmp-activity-status");
    if (!el) return null;
    return {
      text: el.textContent?.trim() ?? "",
      role: el.getAttribute("role") ?? "",
      // offsetParent is null when an ancestor is display:none — proves the
      // status is actually visible inside the active Activity view.
      visible: (el as HTMLElement).offsetParent !== null,
    };
  });
  const activityRetryReqs = triggeredRequests.filter(
    (r) => r.url.endsWith("/api/trigger") && r.body?.mode === "retry",
  );
  triggerErrorDetail = null; // reset so later passes see the normal 202
  results.push({
    name: "activity-retry-error-visible",
    ok:
      !!activityStatus &&
      activityStatus.visible &&
      activityStatus.role === "alert" &&
      activityStatus.text.includes(ACTIVITY_ERROR_DETAIL) &&
      activityRetryReqs.length === 1 &&
      activityRetryReqs[0].headers["x-robomp-replay-token"] === REPLAY_TOKEN,
    detail: `Activity status: ${JSON.stringify(activityStatus)}. Retry requests: ${activityRetryReqs.length}, token: "${activityRetryReqs[0]?.headers["x-robomp-replay-token"] ?? ""}"`,
  });
  await page.screenshot({ path: path.join(outDir, "shots/activity-retry-error.png") });

  customIndexHtml = null; // restore real-index interception

  // Cleanup browser
  await browser.close();

  // Print results
  console.log("\n--- Verification checks summary ---");
  let allPass = true;
  for (const r of results) {
    const status = r.ok ? "PASS" : "FAIL";
    console.log(`[${status}] ${r.name}: ${r.detail}`);
    if (!r.ok) allPass = false;
  }

  // Write report
  const summaryJson = {
    generatedAt: new Date().toISOString(),
    pass: allPass,
    checks: results.map(r => ({ name: r.name, ok: r.ok, detail: r.detail })),
  };
  await fs.writeFile(path.join(outDir, "report.json"), JSON.stringify(summaryJson, null, 2), "utf-8");
  console.log(`\nReport written to ${path.join(outDir, "report.json")}`);

  process.exitCode = allPass ? 0 : 1;
}

main().catch(err => {
  console.error("Verification harness crashed:", err);
  process.exit(1);
});