@decocms/parity 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -5,6 +5,27 @@ 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.3](https://github.com/decocms/parity/compare/v0.11.2...v0.11.3) (2026-06-17)
+
+### Fixed
+
+* **`productCard` defaults now match Deco TanStack PLPs (#102).** Live testing against `bagaggio-tanstack.deco-cx.workers.dev` showed every purchase-journey aborting at step 3 (`enter-pdp` → "no product card found, recovery exhausted"). Root cause: the Deco TanStack PLP uses `<a aria-label="view product" href="/<product>/p">` (no `/p/` subpath, no `[data-product-card]` attr) — none of the seven baked-in candidates matched. Added five new defaults covering the Deco TanStack pattern: `[data-product-list] a[aria-label='view product']`, `[data-product-list] a[href$='/p']`, `[data-product-list] a[href*='/p?']`, `a[aria-label='view product']`, plus path-suffix variants. Journey on bagaggio now reaches step 6 (add-to-cart) where it surfaces a real bug — variant selection — instead of bailing at step 3.
+
+### Changed
+
+* **Default tier for selector-related features back to Sonnet.** PR #66 defaulted selector-discovery / step-recovery / plp-matching / pdp-matching to Haiku 4.5 for cost savings. Live testing showed Sonnet is the safer default for structural-reasoning calls — Haiku-discovered selectors didn't always match on real sites and Haiku-recovery couldn't find alternatives. `search-terms` (pure classification) stays on Haiku. Users who want the previous cheap behavior can opt in with `--llm-tier-default haiku`.
+
+## [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

package/README.md

@@ -68,7 +68,7 @@ Three providers, auto-detected in this order — **none required** if you have t
 2. `OPENROUTER_API_KEY` — OpenRouter
 3. **Local `claude` CLI** — uses [`@anthropic-ai/claude-agent-sdk`](https://www.npmjs.com/package/@anthropic-ai/claude-agent-sdk); goes through your existing Claude plan. No env vars needed
 
-Force with `--llm <anthropic|openrouter|claude-code|none|auto>`. Override per-feature with `--llm-model selector-discovery=claude-haiku-4-5,visual-diff=claude-opus-4-7`. Default tiers: Haiku for short tasks (selector discovery, classification), Sonnet for vision/aggregation, Opus for `explain`.
+Force with `--llm <anthropic|openrouter|claude-code|none|auto>`. Override per-feature with `--llm-model visual-diff=claude-opus-4-7,explain=claude-opus-4-7`, or flatten everything to one tier with `--llm-tier-default <haiku|sonnet|opus>`. Default tiers: **Sonnet** for selector discovery / recovery / matching / vision / aggregation (the structural-reasoning calls), **Haiku** for short copy-list classification (`search-terms`), **Opus** for `explain`. Cost-conscious? Try `--llm-tier-default haiku` and bump features back to Sonnet selectively if you hit selector misses.
 
 Without any provider, the CLI still runs and outputs raw check results — only the LLM-tagged tabs (Visual Diff, LLM Prompt) hide themselves and a banner explains why.
 

package/dist/cli.js

@@ -84,11 +84,11 @@ var init_models = __esm(() => {
     "explain"
   ];
   DEFAULT_FEATURE_TIER = {
-    "selector-discovery": "haiku",
-    "step-recovery": "haiku",
+    "selector-discovery": "sonnet",
+    "step-recovery": "sonnet",
     "search-terms": "haiku",
-    "plp-matching": "haiku",
-    "pdp-matching": "haiku",
+    "plp-matching": "sonnet",
+    "pdp-matching": "sonnet",
     "section-understanding": "sonnet",
     "visual-diff": "sonnet",
     "issue-aggregation": "sonnet",
@@ -3371,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);
@@ -5592,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"
     });
   }
@@ -5691,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">
@@ -5705,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">
@@ -5717,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">
@@ -11696,8 +11876,14 @@ var DEFAULT_SELECTORS = {
     "[data-deco='view-product'] a",
     "[data-testid='product-card'] a",
     ".product-card a",
+    "[data-product-list] a[aria-label='view product']",
+    "[data-product-list] a[href$='/p']",
+    "[data-product-list] a[href*='/p?']",
+    "a[aria-label='view product']",
     "article a[href*='/p/']",
-    "a[href*='/products/']"
+    "a[href*='/products/']",
+    "main a[href$='/p']",
+    "main a[href*='/p?']"
   ],
   buyButton: [
     "button:has-text('Comprar')",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/parity",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "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",