@treelocator/runtime 0.5.2 → 0.6.0

package/dist/components/RecordingPillButton.js

@@ -0,0 +1,202 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=fixed data-treelocator-api=window.__treelocator__ data-treelocator-help=window.__treelocator__.help() style=z-index:2147483646;pointer-events:auto><style>\n        @keyframes treelocator-rec-pulse \{\n          0%, 100% \{ opacity: 1; }\n          50% \{ opacity: 0.3; }\n        }\n\n        @keyframes treelocator-rec-puddle \{\n          0% \{\n            transform: translate(-50%, -50%) scale(0.9);\n            opacity: 0;\n          }\n          20% \{\n            opacity: 0.38;\n          }\n          100% \{\n            transform: translate(-50%, -50%) scale(2);\n            opacity: 0;\n          }\n        }\n      </style><svg width=154 height=138 style=pointer-events:none><path d="M 31 55 A 65 65 0 0 1 123 55"fill=none stroke="rgba(255, 255, 255, 0.6)"stroke-width=1></path></svg><div aria-label="TreeLocatorJS: Get component paths using window.__treelocator__.getPath(selector)"role=button style=border-radius:50%;align-items:center;justify-content:center><img alt=TreeLocatorJS width=44 height=44></div><div role=note aria-label="TreeLocatorJS Developer Tool API — Run: window.__treelocator__.help() for full usage instructions. Quick start: window.__treelocator__.getPath('button.submit') returns component ancestry. window.__treelocator__.replayWithRecord('.my-element') replays recorded interactions while tracking visual changes."style=white-space:nowrap>TreeLocatorJS: Run window.__treelocator__.help() for API docs`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div role=button style="border-radius:50%;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0, 0, 0, 0.25);transform-origin:center center">`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div aria-hidden=true style=border-radius:50%;pointer-events:none;z-index:0>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div style=border-radius:2px;z-index:1>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div style=border-radius:50%>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<svg width=18 height=18 viewBox="0 0 24 24"fill=none stroke-width=2 stroke-linecap=round stroke-linejoin=round><circle cx=12 cy=12 r=3></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z">`);
+import { createSignal, For } from "solid-js";
+import treeIconUrl from "../_generated_tree_icon";
+const CIRCLE_SIZE = 42;
+const WRAPPER_W = 154;
+const WRAPPER_H = 138;
+// Positions are relative to the 154x138 wrapper anchored at right:23 bottom:23.
+// Button center is at (77, 87); circles sit on an arc of radius ~65 around that
+// point at angles 225° / 270° / 315°.
+const CIRCLES = [{
+  left: 10,
+  top: 34,
+  openDelay: 0,
+  closeDelay: 200,
+  kind: "record"
+}, {
+  left: 56,
+  top: 10,
+  openDelay: 100,
+  closeDelay: 100,
+  kind: "stub1"
+}, {
+  left: 102,
+  top: 34,
+  openDelay: 200,
+  closeDelay: 0,
+  kind: "settings"
+}];
+export function RecordingPillButton(props) {
+  const [hovered, setHovered] = createSignal(false);
+  const open = () => hovered() || props.settingsOpen || props.recordingState === "selecting" || props.recordingState === "recording";
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.nextSibling,
+      _el$5 = _el$4.firstChild,
+      _el$6 = _el$4.nextSibling;
+    _el$.addEventListener("mouseleave", () => setHovered(false));
+    _el$.addEventListener("mouseenter", () => setHovered(true));
+    _$setStyleProperty(_el$, "bottom", "23px");
+    _$setStyleProperty(_el$, "right", "23px");
+    _$setStyleProperty(_el$, "width", "154px");
+    _$setStyleProperty(_el$, "height", "138px");
+    _$setStyleProperty(_el$3, "position", "absolute");
+    _$setStyleProperty(_el$3, "left", "0");
+    _$setStyleProperty(_el$3, "top", "0");
+    _$setStyleProperty(_el$3, "transition", "opacity 0.3s ease-out");
+    _$insert(_el$, _$createComponent(For, {
+      each: CIRCLES,
+      children: circle => (() => {
+        var _el$7 = _tmpl$2();
+        _el$7.$$click = e => {
+          if (circle.kind === "record") {
+            e.stopPropagation();
+            props.onRecordClick();
+            return;
+          }
+          if (circle.kind === "settings") {
+            e.stopPropagation();
+            props.onSettingsClick();
+            return;
+          }
+        };
+        _$setStyleProperty(_el$7, "position", "absolute");
+        _$setStyleProperty(_el$7, "width", "42px");
+        _$setStyleProperty(_el$7, "height", "42px");
+        _$setStyleProperty(_el$7, "background", "#ffffff");
+        _$setStyleProperty(_el$7, "display", "flex");
+        _$setStyleProperty(_el$7, "transition", "transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out");
+        _$setStyleProperty(_el$7, "overflow", "visible");
+        _$insert(_el$7, (() => {
+          var _c$ = _$memo(() => circle.kind === "record");
+          return () => _c$() ? _$memo(() => props.recordingState === "recording")() ? [(() => {
+            var _el$8 = _tmpl$3();
+            _$setStyleProperty(_el$8, "position", "absolute");
+            _$setStyleProperty(_el$8, "left", "50%");
+            _$setStyleProperty(_el$8, "top", "50%");
+            _$setStyleProperty(_el$8, "width", "42px");
+            _$setStyleProperty(_el$8, "height", "42px");
+            _$setStyleProperty(_el$8, "border", "2px solid rgba(239, 68, 68, 0.48)");
+            _$setStyleProperty(_el$8, "transform", "translate(-50%, -50%) scale(0.9)");
+            _$setStyleProperty(_el$8, "opacity", "0");
+            _$setStyleProperty(_el$8, "filter", "blur(1px)");
+            _$setStyleProperty(_el$8, "animation", "treelocator-rec-puddle 1.8s ease-out 0s infinite both");
+            return _el$8;
+          })(), (() => {
+            var _el$9 = _tmpl$3();
+            _$setStyleProperty(_el$9, "position", "absolute");
+            _$setStyleProperty(_el$9, "left", "50%");
+            _$setStyleProperty(_el$9, "top", "50%");
+            _$setStyleProperty(_el$9, "width", "42px");
+            _$setStyleProperty(_el$9, "height", "42px");
+            _$setStyleProperty(_el$9, "border", "2px solid rgba(239, 68, 68, 0.4)");
+            _$setStyleProperty(_el$9, "transform", "translate(-50%, -50%) scale(0.9)");
+            _$setStyleProperty(_el$9, "opacity", "0");
+            _$setStyleProperty(_el$9, "filter", "blur(1px)");
+            _$setStyleProperty(_el$9, "animation", "treelocator-rec-puddle 1.8s ease-out 0.9s infinite both");
+            return _el$9;
+          })(), (() => {
+            var _el$0 = _tmpl$4();
+            _$setStyleProperty(_el$0, "width", "14px");
+            _$setStyleProperty(_el$0, "height", "14px");
+            _$setStyleProperty(_el$0, "background", "#ef4444");
+            return _el$0;
+          })()] : (() => {
+            var _el$1 = _tmpl$5();
+            _$setStyleProperty(_el$1, "width", "14px");
+            _$setStyleProperty(_el$1, "height", "14px");
+            _$setStyleProperty(_el$1, "background", "#ef4444");
+            _$effect(_$p => _$setStyleProperty(_el$1, "animation", props.recordingState === "selecting" ? "treelocator-rec-pulse 1s ease-in-out infinite" : "none"));
+            return _el$1;
+          })() : _$memo(() => circle.kind === "settings")() ? (() => {
+            var _el$10 = _tmpl$6();
+            _$effect(() => _$setAttribute(_el$10, "stroke", props.settingsOpen ? "#3b82f6" : "#1f2937"));
+            return _el$10;
+          })() : null;
+        })());
+        _$effect(_p$ => {
+          var _v$4 = circle.kind === "settings" ? "" : undefined,
+            _v$5 = circle.left + "px",
+            _v$6 = circle.top + "px",
+            _v$7 = circle.kind === "record" || circle.kind === "settings" ? "pointer" : "default",
+            _v$8 = open() ? "scale(1)" : "scale(0)",
+            _v$9 = open() ? "1" : "0",
+            _v$0 = open() ? circle.openDelay + "ms" : circle.closeDelay + "ms",
+            _v$1 = circle.kind === "record" ? props.recordingState === "idle" ? "Record element changes" : props.recordingState === "selecting" ? "Cancel recording selection" : props.recordingState === "recording" ? "Stop recording" : "Dismiss results" : circle.kind === "settings" ? props.settingsOpen ? "Close settings" : "Open settings" : "Coming soon";
+          _v$4 !== _p$.e && _$setAttribute(_el$7, "data-treelocator-settings-toggle", _p$.e = _v$4);
+          _v$5 !== _p$.t && _$setStyleProperty(_el$7, "left", _p$.t = _v$5);
+          _v$6 !== _p$.a && _$setStyleProperty(_el$7, "top", _p$.a = _v$6);
+          _v$7 !== _p$.o && _$setStyleProperty(_el$7, "cursor", _p$.o = _v$7);
+          _v$8 !== _p$.i && _$setStyleProperty(_el$7, "transform", _p$.i = _v$8);
+          _v$9 !== _p$.n && _$setStyleProperty(_el$7, "opacity", _p$.n = _v$9);
+          _v$0 !== _p$.s && _$setStyleProperty(_el$7, "transition-delay", _p$.s = _v$0);
+          _v$1 !== _p$.h && _$setAttribute(_el$7, "aria-label", _p$.h = _v$1);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined,
+          h: undefined
+        });
+        return _el$7;
+      })()
+    }), _el$4);
+    _el$4.$$click = e => {
+      e.stopPropagation();
+      props.onLocatorToggle();
+    };
+    _$setStyleProperty(_el$4, "position", "absolute");
+    _$setStyleProperty(_el$4, "right", "50px");
+    _$setStyleProperty(_el$4, "bottom", "10px");
+    _$setStyleProperty(_el$4, "width", "54px");
+    _$setStyleProperty(_el$4, "height", "54px");
+    _$setStyleProperty(_el$4, "background", "#ffffff");
+    _$setStyleProperty(_el$4, "display", "flex");
+    _$setStyleProperty(_el$4, "cursor", "pointer");
+    _$setStyleProperty(_el$4, "overflow", "hidden");
+    _$setStyleProperty(_el$4, "transition", "box-shadow 0.2s ease-in-out");
+    _$setAttribute(_el$5, "src", treeIconUrl);
+    _$setStyleProperty(_el$6, "position", "absolute");
+    _$setStyleProperty(_el$6, "width", "1px");
+    _$setStyleProperty(_el$6, "height", "1px");
+    _$setStyleProperty(_el$6, "padding", "0");
+    _$setStyleProperty(_el$6, "margin", "-1px");
+    _$setStyleProperty(_el$6, "overflow", "hidden");
+    _$setStyleProperty(_el$6, "clip", "rect(0,0,0,0)");
+    _$setStyleProperty(_el$6, "border", "0");
+    _$effect(_p$ => {
+      var _v$ = open() ? "0.4" : "0",
+        _v$2 = open() ? "50ms" : "0ms",
+        _v$3 = props.locatorActive ? "0 0 0 3px #3b82f6, 0 4px 14px rgba(0, 0, 0, 0.25)" : "0 4px 14px rgba(0, 0, 0, 0.25)";
+      _v$ !== _p$.e && _$setStyleProperty(_el$3, "opacity", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$3, "transition-delay", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$4, "box-shadow", _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+}
+_$delegateEvents(["click"]);

package/dist/components/RecordingResults.d.ts

@@ -1,4 +1,5 @@
 import type { DejitterFinding, DejitterSummary } from "../dejitter/recorder";
+import type { DeltaReport } from "../visualDiff/types";
 export type InteractionEvent = {
     t: number;
     type: string;
@@ -12,6 +13,7 @@ type RecordingResultsProps = {
     data: any;
     elementPath: string;
     interactions: InteractionEvent[];
+    visualDiff?: DeltaReport | null;
     onDismiss: () => void;
     onReplay?: () => void;
     replaying?: boolean;

package/dist/components/RecordingResults.js

@@ -9,13 +9,21 @@ import { insert as _$insert } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div style=margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px>Findings (<!>)`),
   _tmpl$2 = /*#__PURE__*/_$template(`<div style="border-top:1px solid rgba(255, 255, 255, 0.08)"><div style=margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px>Interactions (<!>)`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div style="z-index:2147483646;max-height:400px;overflow-y:auto;backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.4);font-family:system-ui, -apple-system, sans-serif;font-size:12px;pointer-events:auto"><div style="align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255, 255, 255, 0.08)"><div><div style=font-weight:600;font-size:13px>Recording Results</div><div style=margin-top:2px>ms &middot; <!> frames</div></div><div style=align-items:center><div>Copy</div><div style=border-radius:4px;font-size:16px;line-height:1>&times;</div></div></div><div>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div>Prev`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div>Next`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div style=align-items:center><span style=font-size:14px>&#10003;</span>No anomalies detected`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div style="align-items:flex-start;border-bottom:1px solid rgba(255, 255, 255, 0.05)"><div style=border-radius:50%;flex-shrink:0;margin-top:3px></div><div style=min-width:0><div style=align-items:center><span style=font-weight:600></span><span style=font-size:11px></span></div><div style=margin-top:2px;line-height:1.4;word-break:break-word>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div style=font-family:monospace;font-size:11px><span>ms</span> <span></span> <span>`);
+  _tmpl$3 = /*#__PURE__*/_$template(`<span>+`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span>-`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span>~`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span>→`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div style=font-size:11px;margin-top:4px>… <!> more (copy to see all)`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div style="border-top:1px solid rgba(255, 255, 255, 0.08)"><div style=margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px>Visual diff (<!>)</div><div style=margin-bottom:6px;font-size:11px><span style=margin-left:auto>ms · settle: `),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div style="z-index:2147483646;max-height:400px;overflow-y:auto;backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.4);font-family:system-ui, -apple-system, sans-serif;font-size:12px;pointer-events:auto"><div style="align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255, 255, 255, 0.08)"><div><div style=font-weight:600;font-size:13px>Recording Results</div><div style=margin-top:2px>ms &middot; <!> frames</div></div><div style=align-items:center><div>Copy</div><div style=border-radius:4px;font-size:16px;line-height:1>&times;</div></div></div><div>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div>Prev`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div>Next`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div style=align-items:center><span style=font-size:14px>&#10003;</span>No anomalies detected`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div style="align-items:flex-start;border-bottom:1px solid rgba(255, 255, 255, 0.05)"><div style=border-radius:50%;flex-shrink:0;margin-top:3px></div><div style=min-width:0><div style=align-items:center><span style=font-weight:600></span><span style=font-size:11px></span></div><div style=margin-top:2px;line-height:1.4;word-break:break-word>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div style=font-family:monospace;font-size:11px><span>ms</span> <span></span> <span>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span> (<!>)`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div style=font-family:monospace;font-size:11px;word-break:break-all><span style=font-weight:600;margin-right:6px></span><span>`);
 import { For, Show } from "solid-js";
 const SEVERITY_COLORS = {
   high: "#ef4444",
@@ -23,7 +31,7 @@ const SEVERITY_COLORS = {
   low: "#eab308",
   info: "#9ca3af"
 };
-function formatDataForClipboard(data, elementPath, summary, findings, interactions) {
+function formatDataForClipboard(data, elementPath, summary, findings, interactions, visualDiff) {
   const lines = [];
 
   // Element ancestry path from treelocator
@@ -32,21 +40,26 @@ function formatDataForClipboard(data, elementPath, summary, findings, interactio
   }
 
   // Header
-  lines.push(`Recording: ${Math.round(summary?.duration ?? 0)}ms, ${summary?.rawFrameCount ?? 0} frames`);
+  const frameCount = summary?.rawFrameCount ?? 0;
+  lines.push(`Recording: ${Math.round(summary?.duration ?? 0)}ms, ${frameCount} frames`);
   lines.push('');
 
-  // Property changes
-  if (data?.propStats?.props && data.propStats.props.length > 0) {
-    lines.push('Changed properties:');
-    for (const p of data.propStats.props) {
-      if (p.raw === 0) continue;
-      lines.push(`  ${p.prop}: ${p.raw} changes (${p.mode})`);
+  // Property changes — only meaningful with >1 frame; a single sample is
+  // the initial reading, not a change, and dejitter labels it "anomaly" which
+  // is misleading.
+  if (frameCount > 1 && data?.propStats?.props && data.propStats.props.length > 0) {
+    const realChanges = data.propStats.props.filter(p => p.raw > 1);
+    if (realChanges.length > 0) {
+      lines.push('Changed properties:');
+      for (const p of realChanges) {
+        lines.push(`  ${p.prop}: ${p.raw - 1} changes (${p.mode})`);
+      }
+      lines.push('');
     }
-    lines.push('');
   }
 
-  // Samples with actual values — replace dejitter element IDs with the ancestry path
-  if (data?.samples && data.samples.length > 0) {
+  // Samples with actual values — skip if we only captured the initial frame.
+  if (frameCount > 1 && data?.samples && data.samples.length > 0) {
     lines.push('Timeline:');
     for (const frame of data.samples) {
       for (const change of frame.changes) {
@@ -79,6 +92,12 @@ function formatDataForClipboard(data, elementPath, summary, findings, interactio
     for (const evt of interactions) {
       lines.push(`  ${evt.t}ms ${evt.type} ${evt.target} (${evt.x},${evt.y})`);
     }
+    lines.push('');
+  }
+
+  // Visual diff
+  if (visualDiff && visualDiff.entries.length > 0) {
+    lines.push(visualDiff.text);
   }
   return lines.join('\n');
 }
@@ -97,13 +116,13 @@ export function RecordingResults(props) {
   const duration = () => props.summary?.duration ?? 0;
   const frameCount = () => props.summary?.rawFrameCount ?? 0;
   function handleCopy() {
-    const text = formatDataForClipboard(props.data, props.elementPath, props.summary, props.findings, props.interactions);
+    const text = formatDataForClipboard(props.data, props.elementPath, props.summary, props.findings, props.interactions, props.visualDiff);
     navigator.clipboard.writeText(text).then(() => {
       props.onToast?.("Copied to clipboard");
     });
   }
   return (() => {
-    var _el$ = _tmpl$3(),
+    var _el$ = _tmpl$9(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$3.firstChild,
@@ -116,7 +135,7 @@ export function RecordingResults(props) {
       _el$1 = _el$0.nextSibling,
       _el$10 = _el$2.nextSibling;
     _$setStyleProperty(_el$, "position", "fixed");
-    _$setStyleProperty(_el$, "bottom", "84px");
+    _$setStyleProperty(_el$, "bottom", "180px");
     _$setStyleProperty(_el$, "right", "20px");
     _$setStyleProperty(_el$, "width", "340px");
     _$setStyleProperty(_el$, "background", "rgba(15, 15, 15, 0.92)");
@@ -134,29 +153,29 @@ export function RecordingResults(props) {
     _$insert(_el$9, (() => {
       var _c$ = _$memo(() => !!props.onReplay);
       return () => _c$() && (() => {
-        var _el$20 = _tmpl$4();
-        _$addEventListener(_el$20, "click", props.onReplay, true);
-        _$insert(_el$20, () => props.replaying ? "Replaying..." : "Replay");
-        _$effect(_$p => _$style(_el$20, buttonStyle(props.replaying), _$p));
-        return _el$20;
+        var _el$40 = _tmpl$0();
+        _$addEventListener(_el$40, "click", props.onReplay, true);
+        _$insert(_el$40, () => props.replaying ? "Replaying..." : "Replay");
+        _$effect(_$p => _$style(_el$40, buttonStyle(props.replaying), _$p));
+        return _el$40;
       })();
     })(), _el$1);
     _$insert(_el$9, (() => {
       var _c$2 = _$memo(() => !!(props.hasPrevious && props.onLoadPrevious));
       return () => _c$2() && (() => {
-        var _el$21 = _tmpl$5();
-        _$addEventListener(_el$21, "click", props.onLoadPrevious, true);
-        _$effect(_$p => _$style(_el$21, buttonStyle(), _$p));
-        return _el$21;
+        var _el$41 = _tmpl$1();
+        _$addEventListener(_el$41, "click", props.onLoadPrevious, true);
+        _$effect(_$p => _$style(_el$41, buttonStyle(), _$p));
+        return _el$41;
       })();
     })(), _el$1);
     _$insert(_el$9, (() => {
       var _c$3 = _$memo(() => !!(props.hasNext && props.onLoadNext));
       return () => _c$3() && (() => {
-        var _el$22 = _tmpl$6();
-        _$addEventListener(_el$22, "click", props.onLoadNext, true);
-        _$effect(_$p => _$style(_el$22, buttonStyle(), _$p));
-        return _el$22;
+        var _el$42 = _tmpl$10();
+        _$addEventListener(_el$42, "click", props.onLoadNext, true);
+        _$effect(_$p => _$style(_el$42, buttonStyle(), _$p));
+        return _el$42;
       })();
     })(), _el$1);
     _$addEventListener(_el$1, "click", props.onDismiss, true);
@@ -170,13 +189,13 @@ export function RecordingResults(props) {
       },
       get fallback() {
         return (() => {
-          var _el$23 = _tmpl$7(),
-            _el$24 = _el$23.firstChild;
-          _$setStyleProperty(_el$23, "display", "flex");
-          _$setStyleProperty(_el$23, "gap", "6px");
-          _$setStyleProperty(_el$23, "padding", "8px 0");
-          _$setStyleProperty(_el$23, "color", "#4ade80");
-          return _el$23;
+          var _el$43 = _tmpl$11(),
+            _el$44 = _el$43.firstChild;
+          _$setStyleProperty(_el$43, "display", "flex");
+          _$setStyleProperty(_el$43, "gap", "6px");
+          _$setStyleProperty(_el$43, "padding", "8px 0");
+          _$setStyleProperty(_el$43, "color", "#4ade80");
+          return _el$43;
         })();
       },
       get children() {
@@ -193,36 +212,36 @@ export function RecordingResults(props) {
             return props.findings;
           },
           children: finding => (() => {
-            var _el$25 = _tmpl$8(),
-              _el$26 = _el$25.firstChild,
-              _el$27 = _el$26.nextSibling,
-              _el$28 = _el$27.firstChild,
-              _el$29 = _el$28.firstChild,
-              _el$30 = _el$29.nextSibling,
-              _el$31 = _el$28.nextSibling;
-            _$setStyleProperty(_el$25, "display", "flex");
-            _$setStyleProperty(_el$25, "gap", "8px");
-            _$setStyleProperty(_el$25, "padding", "6px 0");
-            _$setStyleProperty(_el$26, "width", "8px");
-            _$setStyleProperty(_el$26, "height", "8px");
-            _$setStyleProperty(_el$28, "display", "flex");
-            _$setStyleProperty(_el$28, "gap", "6px");
-            _$setStyleProperty(_el$29, "color", "#fff");
-            _$insert(_el$29, () => finding.type);
-            _$insert(_el$30, () => finding.severity);
-            _$setStyleProperty(_el$31, "color", "#a1a1aa");
-            _$insert(_el$31, () => finding.description);
+            var _el$45 = _tmpl$12(),
+              _el$46 = _el$45.firstChild,
+              _el$47 = _el$46.nextSibling,
+              _el$48 = _el$47.firstChild,
+              _el$49 = _el$48.firstChild,
+              _el$50 = _el$49.nextSibling,
+              _el$51 = _el$48.nextSibling;
+            _$setStyleProperty(_el$45, "display", "flex");
+            _$setStyleProperty(_el$45, "gap", "8px");
+            _$setStyleProperty(_el$45, "padding", "6px 0");
+            _$setStyleProperty(_el$46, "width", "8px");
+            _$setStyleProperty(_el$46, "height", "8px");
+            _$setStyleProperty(_el$48, "display", "flex");
+            _$setStyleProperty(_el$48, "gap", "6px");
+            _$setStyleProperty(_el$49, "color", "#fff");
+            _$insert(_el$49, () => finding.type);
+            _$insert(_el$50, () => finding.severity);
+            _$setStyleProperty(_el$51, "color", "#a1a1aa");
+            _$insert(_el$51, () => finding.description);
             _$effect(_p$ => {
               var _v$ = SEVERITY_COLORS[finding.severity] || "#9ca3af",
                 _v$2 = SEVERITY_COLORS[finding.severity];
-              _v$ !== _p$.e && _$setStyleProperty(_el$26, "background", _p$.e = _v$);
-              _v$2 !== _p$.t && _$setStyleProperty(_el$30, "color", _p$.t = _v$2);
+              _v$ !== _p$.e && _$setStyleProperty(_el$46, "background", _p$.e = _v$);
+              _v$2 !== _p$.t && _$setStyleProperty(_el$50, "color", _p$.t = _v$2);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$25;
+            return _el$45;
           })()
         })];
       }
@@ -245,26 +264,142 @@ export function RecordingResults(props) {
             return props.interactions;
           },
           children: evt => (() => {
-            var _el$32 = _tmpl$9(),
-              _el$33 = _el$32.firstChild,
-              _el$34 = _el$33.firstChild,
-              _el$35 = _el$33.nextSibling,
-              _el$36 = _el$35.nextSibling,
-              _el$37 = _el$36.nextSibling,
-              _el$38 = _el$37.nextSibling;
-            _$setStyleProperty(_el$32, "padding", "3px 0");
-            _$setStyleProperty(_el$32, "color", "#a1a1aa");
-            _$setStyleProperty(_el$33, "color", "#9ca3af");
-            _$insert(_el$33, () => evt.t, _el$34);
-            _$setStyleProperty(_el$36, "color", "#60a5fa");
-            _$insert(_el$36, () => evt.type);
-            _$insert(_el$38, () => evt.target);
-            return _el$32;
+            var _el$52 = _tmpl$13(),
+              _el$53 = _el$52.firstChild,
+              _el$54 = _el$53.firstChild,
+              _el$55 = _el$53.nextSibling,
+              _el$56 = _el$55.nextSibling,
+              _el$57 = _el$56.nextSibling,
+              _el$58 = _el$57.nextSibling;
+            _$setStyleProperty(_el$52, "padding", "3px 0");
+            _$setStyleProperty(_el$52, "color", "#a1a1aa");
+            _$setStyleProperty(_el$53, "color", "#9ca3af");
+            _$insert(_el$53, () => evt.t, _el$54);
+            _$setStyleProperty(_el$56, "color", "#60a5fa");
+            _$insert(_el$56, () => evt.type);
+            _$insert(_el$58, () => evt.target);
+            return _el$52;
           })()
         }), null);
         return _el$15;
       }
     }), null);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!props.visualDiff)() && props.visualDiff.entries.length > 0;
+      },
+      get children() {
+        var _el$20 = _tmpl$8(),
+          _el$21 = _el$20.firstChild,
+          _el$22 = _el$21.firstChild,
+          _el$24 = _el$22.nextSibling,
+          _el$23 = _el$24.nextSibling,
+          _el$25 = _el$21.nextSibling,
+          _el$34 = _el$25.firstChild,
+          _el$35 = _el$34.firstChild;
+        _$setStyleProperty(_el$20, "padding", "8px 14px 12px");
+        _$setStyleProperty(_el$21, "color", "#9ca3af");
+        _$insert(_el$21, () => props.visualDiff.entries.length, _el$24);
+        _$setStyleProperty(_el$25, "display", "flex");
+        _$setStyleProperty(_el$25, "gap", "8px");
+        _$setStyleProperty(_el$25, "color", "#9ca3af");
+        _$insert(_el$25, _$createComponent(Show, {
+          get when() {
+            return props.visualDiff.counts.added > 0;
+          },
+          get children() {
+            var _el$26 = _tmpl$3(),
+              _el$27 = _el$26.firstChild;
+            _$setStyleProperty(_el$26, "color", "#4ade80");
+            _$insert(_el$26, () => props.visualDiff.counts.added, null);
+            return _el$26;
+          }
+        }), _el$34);
+        _$insert(_el$25, _$createComponent(Show, {
+          get when() {
+            return props.visualDiff.counts.removed > 0;
+          },
+          get children() {
+            var _el$28 = _tmpl$4(),
+              _el$29 = _el$28.firstChild;
+            _$setStyleProperty(_el$28, "color", "#ef4444");
+            _$insert(_el$28, () => props.visualDiff.counts.removed, null);
+            return _el$28;
+          }
+        }), _el$34);
+        _$insert(_el$25, _$createComponent(Show, {
+          get when() {
+            return props.visualDiff.counts.changed > 0;
+          },
+          get children() {
+            var _el$30 = _tmpl$5(),
+              _el$31 = _el$30.firstChild;
+            _$setStyleProperty(_el$30, "color", "#eab308");
+            _$insert(_el$30, () => props.visualDiff.counts.changed, null);
+            return _el$30;
+          }
+        }), _el$34);
+        _$insert(_el$25, _$createComponent(Show, {
+          get when() {
+            return props.visualDiff.counts.moved > 0;
+          },
+          get children() {
+            var _el$32 = _tmpl$6(),
+              _el$33 = _el$32.firstChild;
+            _$setStyleProperty(_el$32, "color", "#60a5fa");
+            _$insert(_el$32, () => props.visualDiff.counts.moved, null);
+            return _el$32;
+          }
+        }), _el$34);
+        _$insert(_el$34, () => Math.round(props.visualDiff.elapsedMs), _el$35);
+        _$insert(_el$34, () => props.visualDiff.settle, null);
+        _$insert(_el$20, _$createComponent(For, {
+          get each() {
+            return props.visualDiff.entries.slice(0, 20);
+          },
+          children: entry => (() => {
+            var _el$59 = _tmpl$15(),
+              _el$60 = _el$59.firstChild,
+              _el$61 = _el$60.nextSibling;
+            _$setStyleProperty(_el$59, "padding", "2px 0");
+            _$setStyleProperty(_el$59, "color", "#a1a1aa");
+            _$insert(_el$60, () => entry.type);
+            _$insert(_el$61, () => entry.label);
+            _$insert(_el$59, _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!entry.changedFields)() && entry.changedFields.length > 0;
+              },
+              get children() {
+                var _el$62 = _tmpl$14(),
+                  _el$63 = _el$62.firstChild,
+                  _el$65 = _el$63.nextSibling,
+                  _el$64 = _el$65.nextSibling;
+                _$setStyleProperty(_el$62, "color", "#6b7280");
+                _$insert(_el$62, () => entry.changedFields.join(", "), _el$65);
+                return _el$62;
+              }
+            }), null);
+            _$effect(_$p => _$setStyleProperty(_el$60, "color", entry.type === "+" ? "#4ade80" : entry.type === "-" ? "#ef4444" : entry.type === "~" ? "#eab308" : "#60a5fa"));
+            return _el$59;
+          })()
+        }), null);
+        _$insert(_el$20, _$createComponent(Show, {
+          get when() {
+            return props.visualDiff.entries.length > 20;
+          },
+          get children() {
+            var _el$36 = _tmpl$7(),
+              _el$37 = _el$36.firstChild,
+              _el$39 = _el$37.nextSibling,
+              _el$38 = _el$39.nextSibling;
+            _$setStyleProperty(_el$36, "color", "#6b7280");
+            _$insert(_el$36, () => props.visualDiff.entries.length - 20, _el$39);
+            return _el$36;
+          }
+        }), null);
+        return _el$20;
+      }
+    }), null);
     _$effect(_$p => _$style(_el$0, buttonStyle(), _$p));
     return _el$;
   })();