@kaizenreport/kensho-viewer 0.1.0

package/assets/test-detail.js

@@ -0,0 +1,1058 @@
+/* Auto-generated from test-detail.jsx by packages/viewer/scripts/build.js. Edit the .jsx — DO NOT edit this file. */
+// ============================================================
+// TEST DETAIL — header + step tree with logs/payloads/screenshots
+// Multi-platform: Web · Mobile · API · DB
+// Multi-language: TS · JS · Python · Java · Kotlin · Swift · Go · Ruby · C#
+// ============================================================
+
+// ----------- helpers -----------
+
+const SEVERITY_COLORS = {
+  blocker: {
+    bg: 'var(--status-failed-bg)',
+    fg: 'var(--status-failed-fg)',
+    border: 'var(--status-failed-border)'
+  },
+  critical: {
+    bg: 'var(--status-failed-bg)',
+    fg: 'var(--status-failed-fg)',
+    border: 'var(--status-failed-border)'
+  },
+  normal: {
+    bg: 'var(--status-broken-bg)',
+    fg: 'var(--status-broken-fg)',
+    border: 'var(--status-broken-border)'
+  },
+  minor: {
+    bg: 'var(--status-skipped-bg)',
+    fg: 'var(--status-skipped-fg)',
+    border: 'var(--status-skipped-border)'
+  },
+  trivial: {
+    bg: 'var(--status-skipped-bg)',
+    fg: 'var(--status-skipped-fg)',
+    border: 'var(--status-skipped-border)'
+  }
+};
+function CopyPath({
+  path
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const handle = () => {
+    navigator.clipboard?.writeText(path);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: handle,
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg2)',
+      background: 'transparent',
+      border: 'none',
+      padding: '2px 6px',
+      borderRadius: 4,
+      cursor: 'pointer'
+    },
+    onMouseEnter: e => e.currentTarget.style.background = 'var(--bg-hover)',
+    onMouseLeave: e => e.currentTarget.style.background = 'transparent'
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg2)'
+    }
+  }, path), /*#__PURE__*/React.createElement(Icon, {
+    name: copied ? 'check' : 'copy',
+    size: 11
+  }), copied && /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10,
+      color: 'var(--status-passed)'
+    }
+  }, "copied"));
+}
+
+// CopyPermalink — round-trip the current URL with a `#/case/<id>` fragment so
+// users can paste a deep-link to a specific case into Slack/Jira/etc.
+function CopyPermalink({
+  testId
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const handle = e => {
+    e.stopPropagation();
+    const base = window.location.href.split('#')[0];
+    const url = base + '#/case/' + encodeURIComponent(testId);
+    navigator.clipboard?.writeText(url);
+    setCopied(true);
+    window.__kenshoToast?.('Link copied to clipboard');
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: handle,
+    title: "Copy permalink to this test",
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 5,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      fontWeight: 600,
+      color: copied ? 'var(--status-passed)' : 'var(--fg3)',
+      background: 'transparent',
+      border: '1px solid var(--line)',
+      padding: '2px 8px',
+      borderRadius: 4,
+      cursor: 'pointer',
+      transition: 'background var(--dur-fast), color var(--dur-fast)'
+    },
+    onMouseEnter: e => e.currentTarget.style.background = 'var(--bg-hover)',
+    onMouseLeave: e => e.currentTarget.style.background = 'transparent'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: copied ? 'check' : 'link',
+    size: 11
+  }), copied ? 'copied' : 'copy link');
+}
+function StatusPill({
+  status
+}) {
+  const map = {
+    passed: {
+      label: 'PASSED',
+      fg: 'var(--status-passed)',
+      bg: 'var(--status-passed-bg)'
+    },
+    failed: {
+      label: 'FAILED',
+      fg: 'var(--status-failed)',
+      bg: 'var(--status-failed-bg)'
+    },
+    broken: {
+      label: 'BROKEN',
+      fg: 'var(--status-broken)',
+      bg: 'var(--status-broken-bg)'
+    },
+    skipped: {
+      label: 'SKIPPED',
+      fg: 'var(--status-skipped)',
+      bg: 'var(--status-skipped-bg)'
+    }
+  };
+  const m = map[status] || map.passed;
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6,
+      padding: '3px 8px',
+      borderRadius: 4,
+      background: m.bg,
+      color: m.fg,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      fontWeight: 700,
+      letterSpacing: 0.5
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: 999,
+      background: m.fg
+    }
+  }), m.label);
+}
+function MetaField({
+  label,
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10.5,
+      color: 'var(--fg3)',
+      letterSpacing: 1,
+      textTransform: 'uppercase'
+    }
+  }, label), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg1)'
+    }
+  }, children));
+}
+function Tag({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '2px 8px',
+      borderRadius: 4,
+      background: 'var(--bg-2)',
+      border: '1px solid var(--line)',
+      color: 'var(--fg2)',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      fontWeight: 500
+    }
+  }, children);
+}
+
+// LinkChip — renders external test links (Jira ticket, GitHub PR, runbook,
+// design doc, defect, etc.) as clickable, color-coded chips next to tags.
+// Each kind gets a distinct tint so users can scan visually. Falls back to
+// the URL host when no label is provided.
+const LINK_KIND_STYLE = {
+  jira: {
+    bg: '#E7F0FB',
+    fg: '#1D4ED8',
+    border: '#BCD3F0',
+    icon: 'square-pen'
+  },
+  github: {
+    bg: '#F4EFFF',
+    fg: '#5B21B6',
+    border: '#D4C4F4',
+    icon: 'github'
+  },
+  gitlab: {
+    bg: '#FFF4EC',
+    fg: '#B7430C',
+    border: '#F4D2BC',
+    icon: 'git-branch'
+  },
+  linear: {
+    bg: '#EEEDFB',
+    fg: '#3F3DB7',
+    border: '#C8C5F0',
+    icon: 'square-arrow-out-up-right'
+  },
+  pr: {
+    bg: '#F4EFFF',
+    fg: '#5B21B6',
+    border: '#D4C4F4',
+    icon: 'git-pull-request'
+  },
+  bug: {
+    bg: '#FCEBEC',
+    fg: '#B91C1C',
+    border: '#F2C8CB',
+    icon: 'bug'
+  },
+  defect: {
+    bg: '#FCEBEC',
+    fg: '#B91C1C',
+    border: '#F2C8CB',
+    icon: 'bug'
+  },
+  doc: {
+    bg: '#FFF4DD',
+    fg: '#92400E',
+    border: '#F4DDA8',
+    icon: 'book-open'
+  },
+  runbook: {
+    bg: '#FFF4DD',
+    fg: '#92400E',
+    border: '#F4DDA8',
+    icon: 'play-square'
+  },
+  slack: {
+    bg: '#EAFBF1',
+    fg: '#0E5C39',
+    border: '#C5E5D2',
+    icon: 'message-square'
+  },
+  other: {
+    bg: 'var(--bg-sunken)',
+    fg: 'var(--fg2)',
+    border: 'var(--line)',
+    icon: 'link-2'
+  }
+};
+function LinkChip({
+  link
+}) {
+  const kind = (link.kind || 'other').toLowerCase();
+  const s = LINK_KIND_STYLE[kind] || LINK_KIND_STYLE.other;
+  const label = link.label || (() => {
+    try {
+      return new URL(link.url).hostname.replace(/^www\./, '');
+    } catch {
+      return link.url;
+    }
+  })();
+  return /*#__PURE__*/React.createElement("a", {
+    href: link.url,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    title: `${(link.kind || 'link').toUpperCase()} · ${link.url}`,
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6,
+      padding: '2px 8px',
+      borderRadius: 4,
+      background: s.bg,
+      color: s.fg,
+      border: `1px solid ${s.border}`,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11,
+      fontWeight: 600,
+      textDecoration: 'none',
+      transition: 'background var(--dur-fast)'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: s.icon,
+    size: 11
+  }), label);
+}
+function SeverityBadge({
+  level
+}) {
+  const c = SEVERITY_COLORS[level] || SEVERITY_COLORS.normal;
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '1px 7px',
+      borderRadius: 3,
+      background: c.bg,
+      color: c.fg,
+      border: `1px solid ${c.border}`,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10.5,
+      fontWeight: 700,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5
+    }
+  }, level);
+}
+
+// ----------- header -----------
+
+function TestHeader({
+  test,
+  onCopyId
+}) {
+  // Visual hierarchy:
+  //   1) file path (copyable, monospace, deemphasized)
+  //   2) title row: status pill · title · tags right-aligned
+  //   3) facts grid — vertical key-value stack, 2 cols on wide, 1 col on narrow
+  //
+  // Why: the previous horizontal strip wrapped clumsily. A definition-list
+  // style grid stays readable at any width, and a vertical cascade is what
+  // real test-report tools (Allure, Cypress dashboard, BrowserStack) use.
+
+  // Conditional metadata — only render fields the user actually provided.
+  // Empty/null/'unassigned'/'—' all suppress the row so the grid stays clean.
+  // Severity, Duration and Test ID are always shown (core identity).
+  const isBlank = v => v == null || v === '' || v === '—' || v === 'unassigned';
+  const facts = [{
+    k: 'Severity',
+    v: /*#__PURE__*/React.createElement(SeverityBadge, {
+      level: test.severity
+    }),
+    always: true
+  }, {
+    k: 'Duration',
+    v: /*#__PURE__*/React.createElement("b", {
+      style: {
+        fontWeight: 600
+      }
+    }, test.duration),
+    always: true
+  }, !isBlank(test.owner) && {
+    k: 'Owner',
+    v: /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--accent)'
+      }
+    }, "@", test.owner)
+  }, !isBlank(test.suite) && {
+    k: 'Suite',
+    v: test.suite
+  }, !isBlank(test.lastRun) && {
+    k: 'Last run',
+    v: test.lastRun
+  }, !isBlank(test.platform) && {
+    k: 'Platform',
+    v: test.platform
+  }, !isBlank(test.epic) && {
+    k: 'Epic',
+    v: test.epic
+  }, !isBlank(test.feature) && {
+    k: 'Feature',
+    v: test.feature
+  }, !isBlank(test.story) && {
+    k: 'Story',
+    v: test.story
+  }, !isBlank(test.language) && {
+    k: 'Language',
+    v: test.language
+  }, !isBlank(test.framework) && {
+    k: 'Framework',
+    v: test.framework
+  }, {
+    k: 'Test ID',
+    v: /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontFamily: 'var(--font-mono)',
+        fontSize: 11.5
+      }
+    }, test.id),
+    always: true
+  }].filter(Boolean);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 22
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 8,
+      marginLeft: -6,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(CopyPath, {
+    path: test.file
+  }), /*#__PURE__*/React.createElement(CopyPermalink, {
+    testId: test.id
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      gap: 14,
+      flexWrap: 'wrap',
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 10,
+      flexWrap: 'wrap',
+      flex: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement(StatusPill, {
+    status: test.status
+  }), test.retries > 0 && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 5,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12,
+      color: 'var(--fg2)'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "rotate-ccw",
+    size: 12
+  }), test.retries, " ", test.retries === 1 ? 'retry' : 'retries'), /*#__PURE__*/React.createElement("h1", {
+    style: {
+      fontSize: 26,
+      fontWeight: 600,
+      color: 'var(--fg1)',
+      margin: 0,
+      letterSpacing: -0.3,
+      lineHeight: 1.2
+    }
+  }, test.title)), (test.tags?.length > 0 || test.links?.length > 0) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 6,
+      flexWrap: 'wrap',
+      alignItems: 'center'
+    }
+  }, (test.links || []).map((l, i) => /*#__PURE__*/React.createElement(LinkChip, {
+    key: 'L' + i,
+    link: l
+  })), test.tags?.map(t => /*#__PURE__*/React.createElement(Tag, {
+    key: t
+  }, t)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderTop: '1px solid var(--line)',
+      paddingTop: 14,
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+      gap: '10px 28px'
+    }
+  }, facts.map(f => /*#__PURE__*/React.createElement("div", {
+    key: f.k,
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '88px 1fr',
+      alignItems: 'start',
+      gap: 10,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10.5,
+      color: 'var(--fg3)',
+      letterSpacing: 1,
+      textTransform: 'uppercase',
+      paddingTop: 2
+    }
+  }, f.k), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 12.5,
+      color: 'var(--fg1)',
+      wordBreak: 'break-word',
+      overflowWrap: 'anywhere',
+      minWidth: 0
+    }
+  }, f.v)))));
+}
+
+// ----------- step tree v2 -----------
+//
+// A step has: { name, status, duration, type?, kind?, body?, logs?, payload?, screenshot?, request?, response?, assertion?, children? }
+// type: 'action' (default) | 'assertion' | 'http' | 'screenshot' | 'device' | 'db' | 'group'
+// logs: [{ ts, lvl: info|warn|err|debug, msg }]
+
+const STEP_TYPE_ICON = {
+  action: 'mouse-pointer-2',
+  assertion: 'check-check',
+  http: 'globe',
+  screenshot: 'image',
+  device: 'smartphone',
+  db: 'database',
+  group: 'folder',
+  navigation: 'navigation',
+  api: 'globe',
+  setup: 'wrench',
+  teardown: 'eraser'
+};
+function StepIcon({
+  type
+}) {
+  const name = STEP_TYPE_ICON[type] || 'chevron-right';
+  return /*#__PURE__*/React.createElement(Icon, {
+    name: name,
+    size: 12
+  });
+}
+function LogLine({
+  log
+}) {
+  const lvlColor = {
+    info: 'var(--fg2)',
+    warn: 'var(--status-broken-fg)',
+    err: 'var(--status-failed)',
+    debug: 'var(--fg3)'
+  }[log.lvl] || 'var(--fg2)';
+  const lvlBg = {
+    info: 'transparent',
+    warn: 'var(--status-broken-bg)',
+    err: 'var(--status-failed-bg)',
+    debug: 'transparent'
+  }[log.lvl] || 'transparent';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '90px 50px 1fr',
+      gap: 10,
+      padding: '3px 8px',
+      borderRadius: 3,
+      background: lvlBg,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11.5,
+      lineHeight: 1.55
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, log.ts), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: lvlColor,
+      fontWeight: 700,
+      letterSpacing: 0.5
+    }
+  }, log.lvl.toUpperCase()), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word'
+    }
+  }, log.msg));
+}
+function HttpBlock({
+  request,
+  response
+}) {
+  const statusColor = response.status >= 500 ? 'var(--status-failed)' : response.status >= 400 ? 'var(--status-broken)' : 'var(--status-passed)';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      overflow: 'hidden',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11.5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '8px 12px',
+      borderBottom: '1px solid var(--line)',
+      background: 'var(--bg-2)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: '1px 6px',
+      borderRadius: 3,
+      background: 'var(--dark-bg)',
+      color: '#fff',
+      fontSize: 10,
+      fontWeight: 700
+    }
+  }, request.method), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg1)'
+    }
+  }, request.url), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      color: 'var(--fg3)'
+    }
+  }, request.duration)), request.headers && /*#__PURE__*/React.createElement("details", {
+    style: {
+      marginTop: 6
+    }
+  }, /*#__PURE__*/React.createElement("summary", {
+    style: {
+      cursor: 'pointer',
+      color: 'var(--fg3)',
+      fontSize: 10.5,
+      letterSpacing: 0.5,
+      textTransform: 'uppercase'
+    }
+  }, "Request headers (", Object.keys(request.headers).length, ")"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: '6px 0 0',
+      padding: 8,
+      background: 'var(--bg-elev)',
+      border: '1px solid var(--line)',
+      borderRadius: 4,
+      fontSize: 11,
+      color: 'var(--fg2)',
+      overflow: 'auto'
+    }
+  }, Object.entries(request.headers).map(([k, v]) => `${k}: ${v}`).join('\n'))), request.body && /*#__PURE__*/React.createElement("details", {
+    style: {
+      marginTop: 6
+    },
+    open: true
+  }, /*#__PURE__*/React.createElement("summary", {
+    style: {
+      cursor: 'pointer',
+      color: 'var(--fg3)',
+      fontSize: 10.5,
+      letterSpacing: 0.5,
+      textTransform: 'uppercase'
+    }
+  }, "Request body"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: '6px 0 0',
+      padding: 8,
+      background: 'var(--bg-elev)',
+      border: '1px solid var(--line)',
+      borderRadius: 4,
+      fontSize: 11,
+      color: 'var(--fg2)',
+      overflow: 'auto'
+    }
+  }, typeof request.body === 'string' ? request.body : JSON.stringify(request.body, null, 2)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '8px 12px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: '1px 6px',
+      borderRadius: 3,
+      background: statusColor,
+      color: '#fff',
+      fontSize: 10,
+      fontWeight: 700
+    }
+  }, response.status, " ", response.statusText), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, response.size)), response.body && /*#__PURE__*/React.createElement("details", {
+    style: {
+      marginTop: 6
+    },
+    open: true
+  }, /*#__PURE__*/React.createElement("summary", {
+    style: {
+      cursor: 'pointer',
+      color: 'var(--fg3)',
+      fontSize: 10.5,
+      letterSpacing: 0.5,
+      textTransform: 'uppercase'
+    }
+  }, "Response body"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: '6px 0 0',
+      padding: 8,
+      background: 'var(--bg-2)',
+      border: '1px solid var(--line)',
+      borderRadius: 4,
+      fontSize: 11,
+      color: 'var(--fg2)',
+      overflow: 'auto',
+      maxHeight: 200
+    }
+  }, typeof response.body === 'string' ? response.body : JSON.stringify(response.body, null, 2)))));
+}
+function AssertionBlock({
+  assertion
+}) {
+  const ok = assertion.passed;
+  const c = ok ? {
+    fg: 'var(--status-passed)',
+    bg: 'var(--status-passed-bg)',
+    border: 'var(--status-passed-border)'
+  } : {
+    fg: 'var(--status-failed)',
+    bg: 'var(--status-failed-bg)',
+    border: 'var(--status-failed-border)'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: `1px solid ${c.border}`,
+      background: c.bg,
+      borderRadius: 6,
+      padding: 10,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11.5,
+      color: 'var(--fg1)'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      alignItems: 'center',
+      marginBottom: 6
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: c.fg,
+      fontWeight: 700,
+      letterSpacing: 0.5
+    }
+  }, ok ? '✓ ASSERTION PASSED' : '✕ ASSERTION FAILED'), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, assertion.matcher)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '70px 1fr',
+      gap: '4px 10px'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "expected"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--status-passed)'
+    }
+  }, assertion.expected), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)'
+    }
+  }, "actual"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: ok ? 'var(--status-passed)' : 'var(--status-failed)'
+    }
+  }, assertion.actual)));
+}
+function ScreenshotBlock({
+  screenshot
+}) {
+  // `screenshot.url` (if present) is the direct path to the image file. When
+  // the bridge maps `step.attachments[]` to this shape it sets `.url` to
+  // `data/<relativePath>`. Falls back to the placeholder hatching when the
+  // adapter only described the screenshot without copying it through.
+  const url = screenshot.url;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10,
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: url || '#',
+    target: "_blank",
+    rel: "noopener noreferrer",
+    onClick: url ? undefined : e => e.preventDefault(),
+    style: {
+      flexShrink: 0,
+      display: 'block'
+    },
+    title: url ? 'Open full-size in new tab' : screenshot.name
+  }, url ? /*#__PURE__*/React.createElement("img", {
+    src: url,
+    alt: screenshot.name || 'screenshot',
+    style: {
+      width: 200,
+      height: 120,
+      objectFit: 'cover',
+      borderRadius: 6,
+      border: '1px solid var(--line)',
+      display: 'block',
+      cursor: 'zoom-in'
+    },
+    onError: e => {
+      e.currentTarget.style.display = 'none';
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 160,
+      height: 100,
+      borderRadius: 6,
+      border: '1px solid var(--line)',
+      background: `repeating-linear-gradient(135deg, var(--bg-sunken) 0 12px, var(--bg-hover) 12px 24px)`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "image",
+    size: 20
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11.5,
+      color: 'var(--fg2)',
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: 'var(--fg1)',
+      fontWeight: 600,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, screenshot.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: 'var(--fg3)',
+      marginTop: 2
+    }
+  }, [screenshot.size, screenshot.dimensions].filter(Boolean).join(' · '))));
+}
+function StepNode({
+  step,
+  depth = 0,
+  defaultOpen
+}) {
+  const hasContent = step.logs?.length || step.body || step.children?.length || step.request || step.response || step.assertion || step.screenshot || step.payload;
+  const isProblem = step.status === 'failed' || step.status === 'broken';
+  const [open, setOpen] = React.useState(defaultOpen ?? isProblem);
+  const [hover, setHover] = React.useState(false);
+  const stepIcon = step.status === 'passed' ? '✓' : step.status === 'failed' ? '✕' : step.status === 'broken' ? '!' : '⊘';
+
+  // What's behind this row? Build a hint string so users know it's clickable.
+  const hints = [];
+  if (step.children?.length) hints.push(`${step.children.length} sub-step${step.children.length === 1 ? '' : 's'}`);
+  if (step.request || step.response) hints.push('request');
+  if (step.assertion) hints.push('assertion');
+  if (step.screenshot) hints.push('screenshot');
+  if (step.logs?.length) hints.push(`${step.logs.length} log${step.logs.length === 1 ? '' : 's'}`);
+  if (step.body) hints.push('details');
+  if (step.payload && hints.length === 0) hints.push('params');
+  return /*#__PURE__*/React.createElement("div", {
+    className: `step ${step.status}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "head",
+    onClick: () => hasContent && setOpen(o => !o),
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      cursor: hasContent ? 'pointer' : 'default',
+      userSelect: 'none',
+      background: hasContent && hover ? 'var(--bg-hover)' : 'transparent',
+      borderRadius: 4,
+      padding: '4px 6px',
+      margin: '-4px -6px',
+      transition: 'background 120ms'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 12,
+      height: 12,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: hasContent ? open ? 'var(--fg1)' : 'var(--fg2)' : 'transparent',
+      transition: 'transform 140ms, color 120ms',
+      transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+      fontSize: 10,
+      lineHeight: 1,
+      fontFamily: 'var(--font-mono)'
+    }
+  }, hasContent ? '▶' : ''), /*#__PURE__*/React.createElement("span", {
+    className: `s-icon ${step.status}`,
+    style: {
+      width: 14,
+      height: 14,
+      fontSize: 9
+    }
+  }, stepIcon), step.type && step.type !== 'action' && /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--fg3)',
+      display: 'inline-flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(StepIcon, {
+    type: step.type
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "name",
+    style: {
+      flex: 1,
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, step.name), hasContent && hints.length > 0 && /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10,
+      color: 'var(--fg3)',
+      padding: '1px 6px',
+      background: 'var(--bg-2)',
+      borderRadius: 3,
+      border: '1px solid var(--line)'
+    }
+  }, hints.join(' · ')), /*#__PURE__*/React.createElement("span", {
+    className: "dur"
+  }, step.duration)), open && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 6,
+      marginLeft: 14,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8
+    }
+  }, step.body && /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: 0,
+      padding: '10px 12px',
+      background: isProblem ? 'var(--status-failed-bg)' : 'var(--bg-2)',
+      border: `1px solid ${isProblem ? 'var(--status-failed-border)' : 'var(--line)'}`,
+      borderRadius: 6,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11.5,
+      color: isProblem ? 'var(--status-failed-fg)' : 'var(--fg2)',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      lineHeight: 1.55
+    }
+  }, step.body), step.request && step.response && /*#__PURE__*/React.createElement(HttpBlock, {
+    request: step.request,
+    response: step.response
+  }), step.assertion && /*#__PURE__*/React.createElement(AssertionBlock, {
+    assertion: step.assertion
+  }), step.screenshot && /*#__PURE__*/React.createElement(ScreenshotBlock, {
+    screenshot: step.screenshot
+  }), step.payload && /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: 0,
+      padding: '8px 12px',
+      background: 'var(--bg-2)',
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      fontFamily: 'var(--font-mono)',
+      fontSize: 11.5,
+      color: 'var(--fg2)',
+      overflow: 'auto'
+    }
+  }, step.payload), step.logs?.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--bg-sunken)',
+      border: '1px solid var(--line)',
+      borderRadius: 6,
+      padding: '6px 4px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '4px 10px',
+      fontFamily: 'var(--font-mono)',
+      fontSize: 10,
+      color: 'var(--fg3)',
+      letterSpacing: 1,
+      textTransform: 'uppercase'
+    }
+  }, "Logs \xB7 ", step.logs.length), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: 'var(--bg-elev)',
+      border: '1px solid var(--line)',
+      borderRadius: 4,
+      margin: '4px',
+      padding: '4px 0'
+    }
+  }, step.logs.map((l, i) => /*#__PURE__*/React.createElement(LogLine, {
+    key: i,
+    log: l
+  })))), step.children?.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "children"
+  }, /*#__PURE__*/React.createElement(StepTreeV2, {
+    steps: step.children,
+    depth: depth + 1
+  }))));
+}
+function StepTreeV2({
+  steps,
+  depth = 0
+}) {
+  return /*#__PURE__*/React.createElement("div", null, steps.map((s, i) => /*#__PURE__*/React.createElement(StepNode, {
+    key: i,
+    step: s,
+    depth: depth
+  })));
+}
+Object.assign(window, {
+  TestHeader,
+  StepTreeV2,
+  StatusPill,
+  Tag,
+  SeverityBadge,
+  MetaField,
+  CopyPath,
+  CopyPermalink,
+  LinkChip
+});