@decocms/parity 0.11.0 → 0.11.2

package/CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.11.2](https://github.com/decocms/parity/compare/v0.11.1...v0.11.2) (2026-06-17)
+
+### Added
+
+* **Per-flow step timeline in the check detail panel.** When a check is backed by a flow (`purchase-journey-flow`, `cart-interactions-flow`, `search-*`, `login-flow`), the detail page now renders a prod vs cand step-by-step table with status pill, duration, used selector, screenshot link, and skip-reason note per step. Lets you see exactly where the runner stopped instead of just "3/3 ok".
+
+### Changed
+
+* **Journey tile no longer claims "completed in both" when steps were skipped (#100).** The dashboard tile now reads `${ok}/${maxSteps}` (against the actual recorded step count, not just matched steps) and surfaces skipped steps explicitly: `${n} step(s) skipped (recovery exhausted)`. Tile state goes `warn` when a journey aborted early instead of staying `pass`. Found via live testing against bagaggio where step 3 (enter-pdp) silently skipped on both sides and the tile still showed green.
+* **`scripts/regen-report.ts`** — small dev utility for re-rendering `report.html` from a saved `report.json` without re-running the browser. Useful when iterating on the renderer.
+
+## [0.11.1](https://github.com/decocms/parity/compare/v0.11.0...v0.11.1) (2026-06-17)
+
+### Fixed
+
+* **Claude Agent SDK provider — every call failed with `error_max_turns` (#98).** Live testing against `lojabagaggio.deco.site` vs `bagaggio-tanstack.deco-cx.workers.dev` showed `[llm-claude-sdk] call failed: error_max_turns` on every selector-discovery, step-recovery, and aggregation call when running with `--llm claude-code`. Root cause: `maxTurns: 1` in `baseSdkOptions` — Claude Code's harness counts the response emission as turn 2 even when `allowedTools: []` prevents any tool from firing. Removed `maxTurns`; the empty tool whitelist alone guarantees a single round-trip. The SDK provider now actually produces output.
+
 ## [0.11.0](https://github.com/decocms/parity/compare/v0.10.1...v0.11.0) (2026-06-17)
 
 ### Added

package/dist/cli.js

@@ -144,7 +144,6 @@ function baseSdkOptions(model, controller) {
     model,
     allowedTools: [],
     permissionMode: "dontAsk",
-    maxTurns: 1,
     abortController: controller,
     settingSources: []
   };
@@ -3372,6 +3371,71 @@ var REPORT_CSS = `
     max-height: 480px;
   }
 
+  /* Per-flow step timeline inside the check detail panel. Issue #98 follow-up. */
+  .step-timeline {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-default);
+  }
+  .step-timeline:first-child { margin-top: 0; padding-top: 0; border-top: none; }
+  .step-timeline-header {
+    display: flex;
+    gap: 16px;
+    align-items: baseline;
+    font-size: 12px;
+    margin-bottom: 8px;
+    flex-wrap: wrap;
+  }
+  .step-timeline-header strong { font-size: 13px; }
+  .step-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+  }
+  .step-table th, .step-table td {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-default);
+    vertical-align: top;
+    text-align: left;
+  }
+  .step-table th.num, .step-table td.num { text-align: right; width: 40px; }
+  .step-table th {
+    color: var(--text-muted);
+    font-weight: 600;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .step-cell.empty { color: var(--text-muted); text-align: center; }
+  .step-cell-head { display: flex; gap: 8px; align-items: center; font-size: 11px; }
+  .step-cell .step-status {
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 4px;
+    background: var(--surface-base);
+    border: 1px solid var(--border-default);
+  }
+  .step-cell.step-ok .step-status { color: var(--state-good); border-color: var(--state-good); }
+  .step-cell.step-skipped .step-status { color: var(--state-warn); border-color: var(--state-warn); }
+  .step-cell.step-failed .step-status { color: var(--state-bad); border-color: var(--state-bad); }
+  .step-shot { color: var(--accent-action); text-decoration: none; font-size: 13px; }
+  .step-shot:hover { opacity: 0.7; }
+  .step-selector {
+    margin-top: 4px;
+    font-size: 10px;
+    color: var(--text-muted);
+    word-break: break-all;
+  }
+  .step-selector code { background: var(--surface-base); padding: 1px 4px; border-radius: 3px; }
+  .step-note {
+    margin-top: 4px;
+    font-size: 11px;
+    color: var(--state-warn);
+    font-style: italic;
+  }
+
   /* Network waterfall — per-page SVG bar chart. Issue #78. */
   .wf-page {
     border: 1px solid var(--border-default);
@@ -5593,14 +5657,25 @@ function buildTiles(run) {
   const pj = run.checks.find((c) => c.name === "purchase-journey-flow");
   if (pj) {
     const data = pj.data ?? {};
-    const total = data.totalSteps ?? 0;
     const failed = data.failedSteps ?? 0;
+    const pjCaptures = run.flowCaptures.filter((fc) => fc.flow === "purchase-journey");
+    const maxSteps = pjCaptures.reduce((m, fc) => Math.max(m, fc.steps?.length ?? 0), 0);
+    const skippedSteps = pjCaptures.reduce((n, fc) => n + (fc.steps?.filter((s) => s.status === "skipped").length ?? 0), 0);
+    const okSteps = Math.max(0, maxSteps - failed - skippedSteps);
+    const aborted = skippedSteps > 0;
+    let meta;
+    if (failed > 0)
+      meta = `${failed} step(s) failed`;
+    else if (aborted)
+      meta = `${skippedSteps} step(s) skipped (recovery exhausted)`;
+    else
+      meta = "completed in both";
     tiles.push({
       icon: "\uD83D\uDED2",
       label: "Journey",
-      value: total > 0 ? `${total - failed}/${total}` : "—",
-      meta: failed > 0 ? `${failed} step(s) failed` : "completed in both",
-      state: failed > 0 ? "fail" : "pass",
+      value: maxSteps > 0 ? `${okSteps}/${maxSteps}` : "—",
+      meta,
+      state: failed > 0 ? "fail" : aborted ? "warn" : "pass",
       href: "#detail/purchase-journey-flow"
     });
   }
@@ -5692,6 +5767,7 @@ function renderCheckDetailPanel(check, run, runDir) {
   const reproCmd = `parity check ${check.name} --prod ${run.prodUrl} --cand ${run.candUrl}`;
   const reproId = `repro-${check.name.replace(/[^a-zA-Z0-9]/g, "_")}`;
   const dataJson = check.data && Object.keys(check.data).length > 0 ? JSON.stringify(check.data, null, 2) : null;
+  const stepTimeline = renderFlowStepTimeline(check.name, run, runDir);
   return `
   <div class="card">
     <div class="check-detail-header">
@@ -5706,6 +5782,8 @@ function renderCheckDetailPanel(check, run, runDir) {
     <p class="check-detail-summary">${escapeHtml(check.summary)}</p>
   </div>
 
+  ${stepTimeline}
+
   <div class="card">
     <h2>Reproduce this check</h2>
     <div class="prompt-toolbar">
@@ -5718,6 +5796,107 @@ function renderCheckDetailPanel(check, run, runDir) {
 
   ${dataJson ? `<div class="card"><h2>Raw check data</h2><pre class="check-data">${escapeHtml(dataJson)}</pre></div>` : ""}`;
 }
+var CHECK_TO_FLOW = {
+  "purchase-journey-flow": "purchase-journey",
+  "cart-interactions-flow": "cart-interactions",
+  "search-presence": "search",
+  "search-autocomplete": "search",
+  "search-results": "search",
+  "search-no-results": "search",
+  "login-flow": "login"
+};
+function renderFlowStepTimeline(checkName, run, runDir) {
+  const flowName = CHECK_TO_FLOW[checkName];
+  if (!flowName)
+    return "";
+  const captures = run.flowCaptures.filter((fc) => fc.flow === flowName);
+  if (captures.length === 0)
+    return "";
+  const byViewport = new Map;
+  for (const fc of captures) {
+    const slot = byViewport.get(fc.viewport) ?? {};
+    if (fc.side === "prod")
+      slot.prod = fc;
+    else if (fc.side === "cand")
+      slot.cand = fc;
+    byViewport.set(fc.viewport, slot);
+  }
+  const blocks = [];
+  for (const [viewport, sides] of byViewport) {
+    blocks.push(renderFlowTimelinePair(viewport, sides.prod, sides.cand, runDir));
+  }
+  if (blocks.length === 0)
+    return "";
+  return `
+  <div class="card">
+    <h2>Step timeline</h2>
+    <div class="hint">Step-by-step trace of the flow on prod vs cand. Skipped steps usually mean a selector miss — the note column tells you why the runner gave up.</div>
+    ${blocks.join("")}
+  </div>`;
+}
+function renderFlowTimelinePair(viewport, prod, cand, runDir) {
+  const stepNumbers = new Set;
+  for (const fc of [prod, cand]) {
+    if (!fc)
+      continue;
+    for (const s of fc.steps ?? [])
+      stepNumbers.add(s.step);
+  }
+  const ordered = Array.from(stepNumbers).sort((a, b) => a - b);
+  const stepBy = (fc, n) => fc?.steps?.find((s) => s.step === n);
+  const rows = ordered.map((n) => {
+    const ps = stepBy(prod, n);
+    const cs = stepBy(cand, n);
+    const stepName = ps?.name ?? cs?.name ?? `step ${n}`;
+    return `<tr>
+        <td class="num">${n}</td>
+        <td><code>${escapeHtml(stepName)}</code></td>
+        ${renderStepCell(ps, runDir)}
+        ${renderStepCell(cs, runDir)}
+      </tr>`;
+  }).join("");
+  return `
+  <div class="step-timeline">
+    <div class="step-timeline-header">
+      <strong>${escapeHtml(viewport)}</strong>
+      <span class="dim">prod: ${prod ? formatStepSummary(prod) : "—"}</span>
+      <span class="dim">cand: ${cand ? formatStepSummary(cand) : "—"}</span>
+    </div>
+    <table class="step-table">
+      <thead>
+        <tr>
+          <th class="num">#</th>
+          <th>Step</th>
+          <th>prod</th>
+          <th>cand</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+function formatStepSummary(fc) {
+  const steps = fc.steps ?? [];
+  const ok = steps.filter((s) => s.status === "ok").length;
+  const skipped = steps.filter((s) => s.status === "skipped").length;
+  const failed = steps.filter((s) => s.status === "failed").length;
+  const total = steps.length;
+  const dur = (fc.totalDurationMs / 1000).toFixed(1);
+  return `${ok}/${total} ok · ${skipped} skipped · ${failed} failed · ${dur}s`;
+}
+function renderStepCell(s, runDir) {
+  if (!s)
+    return `<td class="step-cell empty">—</td>`;
+  const statusClass = `step-${s.status}`;
+  const screenshot = s.screenshotPath ? `<a class="step-shot" href="${escapeHtml(relPath(runDir, s.screenshotPath))}" target="_blank" title="open screenshot">\uD83D\uDCF7</a>` : "";
+  const selector = s.usedSelector ? `<div class="step-selector"><code>${escapeHtml(s.usedSelector)}</code></div>` : "";
+  const note = s.note ? `<div class="step-note">${escapeHtml(s.note)}</div>` : "";
+  return `<td class="step-cell ${statusClass}">
+    <div class="step-cell-head"><span class="step-status">${s.status}</span>${screenshot}<span class="dim">${s.durationMs}ms</span></div>
+    ${selector}
+    ${note}
+  </td>`;
+}
 function renderChecksTable(run) {
   return `
   <div class="card">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/parity",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "E2E parity validator for site migrations. Compares prod vs cand and reports UI, functional, SEO, visual, and Web Vitals deltas with an LLM-ranked HTML report.",
   "type": "module",
   "license": "MIT",