webperf-snippets 0.1.0

package/snippets/Interaction/Forced-Synchronous-Layout.js

@@ -0,0 +1,286 @@
+// Forced Synchronous Layout Detector
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  let isDirty = false;
+  let lastMutationTime = 0;
+  let rafPending = false;
+  const fslEvents = [];
+  const restorations = [];
+
+  const getElementDesc = (el) => {
+    let desc = el.tagName.toLowerCase();
+    if (el.id) desc += `#${el.id}`;
+    if (el.className && typeof el.className === "string" && el.className.trim()) {
+      desc += `.${el.className.trim().split(/\s+/).join(".")}`;
+    }
+    return desc;
+  };
+
+  const markDirty = () => {
+    isDirty = true;
+    lastMutationTime = performance.now();
+    if (rafPending) return;
+    rafPending = true;
+    requestAnimationFrame(() => {
+      isDirty = false;
+      rafPending = false;
+    });
+  };
+
+  // ─── SYNCHRONOUS MUTATION INTERCEPTION ──────────────────────────────────────
+  // MutationObserver fires asynchronously (microtask after the stack clears),
+  // so it cannot set isDirty before a geometric read in the same synchronous
+  // block. We intercept the DOM mutation APIs directly instead.
+
+  // classList: add / remove / toggle / replace
+  const domTokenListProto = DOMTokenList.prototype;
+  ["add", "remove", "toggle", "replace"].forEach((method) => {
+    const orig = domTokenListProto[method];
+    domTokenListProto[method] = function (...args) {
+      markDirty();
+      return orig.apply(this, args);
+    };
+    restorations.push(() => (domTokenListProto[method] = orig));
+  });
+
+  // element.setAttribute('class', ...) / element.setAttribute('style', ...)
+  const origSetAttribute = Element.prototype.setAttribute;
+  Element.prototype.setAttribute = function (name, value) {
+    if (name === "class" || name === "style") markDirty();
+    return origSetAttribute.call(this, name, value);
+  };
+  restorations.push(
+    () => (Element.prototype.setAttribute = origSetAttribute)
+  );
+
+  // element.style.setProperty(...) and element.style.cssText = ...
+  const cssStyleDeclarationProto = CSSStyleDeclaration.prototype;
+  const origSetProperty = cssStyleDeclarationProto.setProperty;
+  cssStyleDeclarationProto.setProperty = function (...args) {
+    markDirty();
+    return origSetProperty.apply(this, args);
+  };
+  restorations.push(
+    () => (cssStyleDeclarationProto.setProperty = origSetProperty)
+  );
+
+  const cssTextDescriptor = Object.getOwnPropertyDescriptor(
+    cssStyleDeclarationProto,
+    "cssText"
+  );
+  if (cssTextDescriptor?.set) {
+    Object.defineProperty(cssStyleDeclarationProto, "cssText", {
+      ...cssTextDescriptor,
+      set(value) {
+        markDirty();
+        cssTextDescriptor.set.call(this, value);
+      },
+    });
+    restorations.push(() =>
+      Object.defineProperty(cssStyleDeclarationProto, "cssText", cssTextDescriptor)
+    );
+  }
+
+  // ─── GEOMETRIC PROPERTY INTERCEPTION ────────────────────────────────────────
+
+  const warnFSL = (propName, accessType, el) => {
+    if (!isDirty) return;
+    const elapsed = (performance.now() - lastMutationTime).toFixed(2);
+    const elDesc = el instanceof Element ? getElementDesc(el) : "unknown";
+    const stack = new Error().stack;
+
+    fslEvents.push({
+      property: propName,
+      accessType,
+      element: elDesc,
+      sinceLastMutationMs: parseFloat(elapsed),
+      stack,
+    });
+
+    console.warn(
+      `⚠️ [FSL Detector] Forced Synchronous Layout detected!\n` +
+        `   Property  : ${propName} (${accessType})\n` +
+        `   Element   : ${elDesc}\n` +
+        `   Since last mutation: ${elapsed} ms\n` +
+        `   Stack trace:\n${stack}`
+    );
+  };
+
+  const interceptProp = (proto, propName, accessType) => {
+    const descriptor = Object.getOwnPropertyDescriptor(proto, propName);
+    if (!descriptor) return;
+
+    const { get: origGet, set: origSet } = descriptor;
+    const newDescriptor = { configurable: true, enumerable: descriptor.enumerable };
+
+    if (origGet) {
+      newDescriptor.get = function () {
+        if (accessType === "read" || accessType === "readwrite") {
+          warnFSL(propName, "read", this);
+        }
+        return origGet.call(this);
+      };
+    }
+
+    if (origSet) {
+      newDescriptor.set = function (value) {
+        if (accessType === "write" || accessType === "readwrite") {
+          warnFSL(propName, "write", this);
+        }
+        origSet.call(this, value);
+      };
+    }
+
+    Object.defineProperty(proto, propName, newDescriptor);
+    restorations.push(() => Object.defineProperty(proto, propName, descriptor));
+  };
+
+  // Element.prototype: client* and scroll*
+  const elementReadProps = [
+    "clientTop", "clientLeft", "clientWidth", "clientHeight",
+    "scrollWidth", "scrollHeight",
+  ];
+  const elementReadWriteProps = ["scrollTop", "scrollLeft"];
+
+  elementReadProps.forEach((p) => interceptProp(Element.prototype, p, "read"));
+  elementReadWriteProps.forEach((p) => interceptProp(Element.prototype, p, "readwrite"));
+
+  // HTMLElement.prototype: offset*
+  const htmlElementReadProps = [
+    "offsetTop", "offsetLeft", "offsetWidth", "offsetHeight",
+  ];
+  htmlElementReadProps.forEach((p) => interceptProp(HTMLElement.prototype, p, "read"));
+
+  // getBoundingClientRect
+  const origGetBCR = Element.prototype.getBoundingClientRect;
+  const getBCRDescriptor = Object.getOwnPropertyDescriptor(
+    Element.prototype,
+    "getBoundingClientRect"
+  );
+  Element.prototype.getBoundingClientRect = function () {
+    warnFSL("getBoundingClientRect()", "read", this);
+    return origGetBCR.call(this);
+  };
+  restorations.push(() =>
+    Object.defineProperty(Element.prototype, "getBoundingClientRect", getBCRDescriptor)
+  );
+
+  // ─── SUMMARY ─────────────────────────────────────────────────────────────────
+
+  window.getFSLSummary = () => {
+    console.group("%c📊 FSL Detector Summary", "font-weight: bold; font-size: 14px;");
+
+    if (fslEvents.length === 0) {
+      console.log("   No forced synchronous layouts detected.");
+      console.log("   ✅ The page is not triggering FSL patterns.");
+      console.groupEnd();
+      return {
+        script: "Forced-Synchronous-Layout",
+        status: "ok",
+        count: 0,
+        details: { fslEvents: [] },
+      };
+    }
+
+    const byProperty = fslEvents.reduce((acc, e) => {
+      acc[e.property] = (acc[e.property] || 0) + 1;
+      return acc;
+    }, {});
+
+    const byElement = fslEvents.reduce((acc, e) => {
+      acc[e.element] = (acc[e.element] || 0) + 1;
+      return acc;
+    }, {});
+
+    console.log("");
+    console.log("%cStatistics:", "font-weight: bold;");
+    console.log(`   Total FSL events: ${fslEvents.length}`);
+    console.log(
+      `   Fastest since mutation: ${Math.min(...fslEvents.map((e) => e.sinceLastMutationMs)).toFixed(2)} ms`
+    );
+
+    console.log("");
+    console.log("%cBy Property:", "font-weight: bold;");
+    console.table(
+      Object.entries(byProperty)
+        .sort((a, b) => b[1] - a[1])
+        .map(([property, count]) => ({ Property: property, Count: count }))
+    );
+
+    console.log("");
+    console.log("%cBy Element:", "font-weight: bold;");
+    console.table(
+      Object.entries(byElement)
+        .sort((a, b) => b[1] - a[1])
+        .map(([element, count]) => ({ Element: element, Count: count }))
+    );
+
+    console.log("");
+    console.log("%c💡 Fix:", "font-weight: bold; color: #3b82f6;");
+    console.log("   Wrap geometric reads/writes in a double requestAnimationFrame:");
+    console.log("   requestAnimationFrame(() => requestAnimationFrame(() => {");
+    console.log("     element.scrollTop = 0; // or any layout-triggering access");
+    console.log("   }));");
+
+    console.groupEnd();
+
+    return {
+      script: "Forced-Synchronous-Layout",
+      status: "ok",
+      count: fslEvents.length,
+      details: {
+        byProperty,
+        byElement,
+        fastestSinceLastMutationMs: Math.min(
+          ...fslEvents.map((e) => e.sinceLastMutationMs)
+        ),
+        fslEvents: fslEvents.map(({ property, accessType, element, sinceLastMutationMs }) => ({
+          property,
+          accessType,
+          element,
+          sinceLastMutationMs,
+        })),
+      },
+    };
+  };
+
+  window.stopFSLDetector = () => {
+    restorations.forEach((restore) => restore());
+    restorations.length = 0;
+    console.log(
+      `%c🛑 FSL Detector stopped. Total FSL events detected: ${fslEvents.length}`,
+      "font-weight: bold;"
+    );
+    delete window.getFSLSummary;
+    delete window.stopFSLDetector;
+  };
+
+  console.log("%c⚡ FSL Detector Active", "font-weight: bold; font-size: 14px;");
+  console.log("   Monitoring class/style mutations and geometric property access.");
+  console.log(
+    "   Call %cgetFSLSummary()%c for the report or %cstopFSLDetector()%c to stop.",
+    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
+    "",
+    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
+    ""
+  );
+
+  return {
+    script: "Forced-Synchronous-Layout",
+    status: "tracking",
+    count: 0,
+    details: {
+      interceptedProperties: [
+        ...elementReadProps,
+        ...elementReadWriteProps,
+        ...htmlElementReadProps,
+        "getBoundingClientRect()",
+      ],
+    },
+    message:
+      "FSL Detector active. Reproduce the interaction then call getFSLSummary() to inspect results.",
+    getDataFn: "getFSLSummary",
+    stopFn: "stopFSLDetector",
+  };
+})();

package/snippets/Interaction/Input-Latency-Breakdown.js

@@ -0,0 +1,199 @@
+// Input Latency Breakdown
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatMs = (ms) => `${Math.round(ms)}ms`;
+
+  const valueToRating = (score) =>
+    score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";
+
+  const RATING_COLORS = {
+    good: "#0CCE6A",
+    "needs-improvement": "#FFA400",
+    poor: "#FF4E42",
+  };
+
+  const RATING_ICONS = {
+    good: "🟢",
+    "needs-improvement": "🟡",
+    poor: "🔴",
+  };
+
+  // Interactions grouped by event type
+  const byEventType = {};
+
+  const observer = new PerformanceObserver((list) => {
+    // Group entries by interactionId; keep the longest entry per interaction
+    const interactions = {};
+
+    for (const entry of list.getEntries().filter((e) => e.interactionId)) {
+      interactions[entry.interactionId] =
+        interactions[entry.interactionId] || [];
+      interactions[entry.interactionId].push(entry);
+    }
+
+    for (const group of Object.values(interactions)) {
+      const entry = group.reduce((prev, curr) =>
+        prev.duration >= curr.duration ? prev : curr
+      );
+
+      const eventType = entry.name; // "click", "keydown", "pointerdown", etc.
+      const inputDelay = entry.processingStart - entry.startTime;
+      const processingTime = entry.processingEnd - entry.processingStart;
+      const presentationDelay = Math.max(
+        4,
+        entry.startTime + entry.duration - entry.processingEnd
+      );
+
+      if (!byEventType[eventType]) {
+        byEventType[eventType] = {
+          count: 0,
+          durations: [],
+          inputDelays: [],
+          processingTimes: [],
+          presentationDelays: [],
+        };
+      }
+
+      const bucket = byEventType[eventType];
+      bucket.count++;
+      bucket.durations.push(entry.duration);
+      bucket.inputDelays.push(inputDelay);
+      bucket.processingTimes.push(processingTime);
+      bucket.presentationDelays.push(presentationDelay);
+    }
+  });
+
+  observer.observe({ type: "event", durationThreshold: 0, buffered: true });
+
+  const p75 = (arr) => {
+    const sorted = [...arr].sort((a, b) => a - b);
+    return (
+      sorted[Math.floor(sorted.length * 0.75)] ?? sorted[sorted.length - 1]
+    );
+  };
+
+  window.getInputLatencyBreakdown = () => {
+    const types = Object.keys(byEventType);
+
+    if (types.length === 0) {
+      console.log("%c⌨️ No interactions recorded yet.", "font-weight: bold;");
+      console.log(
+        "   Interact with the page (click, type, etc.) and call this again."
+      );
+      return;
+    }
+
+    console.group(
+      "%c⌨️ Input Latency Breakdown by Event Type",
+      "font-weight: bold; font-size: 14px;"
+    );
+
+    for (const eventType of types.sort()) {
+      const b = byEventType[eventType];
+
+      const p75Total = p75(b.durations);
+      const p75InputDelay = p75(b.inputDelays);
+      const p75Processing = p75(b.processingTimes);
+      const p75Presentation = p75(b.presentationDelays);
+      const p75Sum = p75InputDelay + p75Processing + p75Presentation;
+
+      const phases = [
+        { name: "Input Delay", value: p75InputDelay },
+        { name: "Processing", value: p75Processing },
+        { name: "Presentation", value: p75Presentation },
+      ];
+      const bottleneck = phases.reduce((a, b) => (a.value > b.value ? a : b));
+
+      const rating = valueToRating(p75Total);
+      const icon = RATING_ICONS[rating];
+      const color = RATING_COLORS[rating];
+
+      console.log(
+        `%c${icon} ${eventType}%c (${b.count} interaction${b.count > 1 ? "s" : ""})  P75: ${formatMs(p75Total)}   Input Delay: ${formatMs(p75InputDelay)}  Processing: ${formatMs(p75Processing)}  Presentation: ${formatMs(p75Presentation)}`,
+        `font-weight: bold; color: ${color};`,
+        "color: inherit;"
+      );
+
+      // Visual distribution bar based on P75 phase values
+      const barWidth = 36;
+      const inputBar = "█".repeat(
+        Math.max(1, Math.round((p75InputDelay / p75Sum) * barWidth))
+      );
+      const procBar = "▓".repeat(
+        Math.max(1, Math.round((p75Processing / p75Sum) * barWidth))
+      );
+      const presBar = "░".repeat(
+        Math.max(1, Math.round((p75Presentation / p75Sum) * barWidth))
+      );
+      console.log(`   ${inputBar}${procBar}${presBar}`);
+      console.log(
+        `   █ Input Delay (${((p75InputDelay / p75Sum) * 100).toFixed(0)}%)  ` +
+          `▓ Processing (${((p75Processing / p75Sum) * 100).toFixed(0)}%)  ` +
+          `░ Presentation (${((p75Presentation / p75Sum) * 100).toFixed(0)}%)`
+      );
+
+      if (rating !== "good") {
+        console.log(
+          `   ⚠️ Bottleneck: ${bottleneck.name} — `,
+          bottleneck.name === "Input Delay"
+            ? "break up long tasks blocking the main thread (scheduler.yield(), setTimeout)"
+            : bottleneck.name === "Processing"
+            ? "optimize event handlers or consider debouncing"
+            : "reduce DOM changes or avoid layout thrashing after the handler"
+        );
+      }
+
+      console.log("");
+    }
+
+    // Highlight the event type with the highest P75
+    const worstType = types.reduce((a, b) =>
+      p75(byEventType[a].durations) >= p75(byEventType[b].durations) ? a : b
+    );
+    const worstP75 = p75(byEventType[worstType].durations);
+
+    if (valueToRating(worstP75) !== "good") {
+      console.log(
+        `%c🎯 Highest latency: ${worstType} (P75: ${formatMs(worstP75)})`,
+        "font-weight: bold; color: #ef4444;"
+      );
+    }
+
+    const typeSummary = {};
+    for (const [type, b] of Object.entries(byEventType)) {
+      typeSummary[type] = {
+        count: b.count,
+        p75Ms: Math.round(p75(b.durations)),
+        inputDelayMs: Math.round(p75(b.inputDelays)),
+        processingMs: Math.round(p75(b.processingTimes)),
+        presentationMs: Math.round(p75(b.presentationDelays)),
+      };
+    }
+    console.groupEnd();
+    return {
+      script: "Input-Latency-Breakdown",
+      status: "ok",
+      count: types.length,
+      details: { eventTypes: typeSummary },
+    };
+  };
+
+  console.log(
+    "%c⌨️ Input Latency Breakdown Active",
+    "font-weight: bold; font-size: 14px;"
+  );
+  console.log("   Interact with the page (click, type, etc.).");
+  console.log(
+    "   Call %cgetInputLatencyBreakdown()%c for the aggregated report.",
+    "font-family: monospace; background: #f3f4f6; padding: 2px 4px;",
+    ""
+  );
+
+  return {
+    script: "Input-Latency-Breakdown",
+    status: "tracking",
+    message: "Tracking input latency by event type. Interact with the page then call getInputLatencyBreakdown().",
+    getDataFn: "getInputLatencyBreakdown",
+  };
+})();

package/snippets/Interaction/Interactions.js

@@ -0,0 +1,220 @@
+// Interaction Tracking
+// https://webperf-snippets.nucliweb.net
+
+(() => {
+  const formatMs = (ms) => `${Math.round(ms)}ms`;
+
+  // INP thresholds
+  const valueToRating = (score) =>
+    score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";
+
+  const RATING_COLORS = {
+    good: "#0CCE6A",
+    "needs-improvement": "#FFA400",
+    poor: "#FF4E42",
+  };
+
+  const RATING_ICONS = {
+    good: "🟢",
+    "needs-improvement": "🟡",
+    poor: "🔴",
+  };
+
+  // Track all interactions for summary
+  const allInteractions = [];
+
+  const observer = new PerformanceObserver((list) => {
+    const interactions = {};
+
+    for (const entry of list
+      .getEntries()
+      .filter((entry) => entry.interactionId)) {
+      interactions[entry.interactionId] = interactions[entry.interactionId] || [];
+      interactions[entry.interactionId].push(entry);
+    }
+
+    for (const interaction of Object.values(interactions)) {
+      const entry = interaction.reduce((prev, curr) =>
+        prev.duration >= curr.duration ? prev : curr
+      );
+
+      const value = entry.duration;
+      const rating = valueToRating(value);
+      const icon = RATING_ICONS[rating];
+      const color = RATING_COLORS[rating];
+
+      // Store for summary
+      allInteractions.push({
+        duration: value,
+        rating,
+        target: entry.target,
+        type: entry.name,
+      });
+
+      // Calculate sub-parts
+      const inputDelay = entry.processingStart - entry.startTime;
+      const processingTime = entry.processingEnd - entry.processingStart;
+      const presentationDelay = Math.max(
+        4,
+        entry.startTime + entry.duration - entry.processingEnd
+      );
+      const total = inputDelay + processingTime + presentationDelay;
+
+      // Find longest sub-part
+      const subParts = [
+        { name: "Input Delay", value: inputDelay },
+        { name: "Processing Time", value: processingTime },
+        { name: "Presentation Delay", value: presentationDelay },
+      ];
+      const longest = subParts.reduce((a, b) => (a.value > b.value ? a : b));
+
+      console.groupCollapsed(
+        `%c${icon} Interaction: ${formatMs(value)} (${rating})`,
+        `font-weight: bold; color: ${color};`
+      );
+
+      // Target info
+      console.log("%cTarget:", "font-weight: bold;", entry.target);
+      console.log(`   Event type: ${entry.name}`);
+
+      // Sub-parts breakdown
+      console.log("");
+      console.log("%cSub-parts breakdown:", "font-weight: bold;");
+
+      const tableData = subParts.map((part) => {
+        const percent = ((part.value / total) * 100).toFixed(0);
+        const isLongest = part.name === longest.name;
+        return {
+          "Sub-part": isLongest ? `⚠️ ${part.name}` : part.name,
+          Duration: formatMs(part.value),
+          "%": `${percent}%`,
+        };
+      });
+
+      console.table(tableData);
+
+      // Visual bar
+      const barWidth = 40;
+      const inputBar = "█".repeat(Math.round((inputDelay / total) * barWidth));
+      const procBar = "▓".repeat(Math.round((processingTime / total) * barWidth));
+      const presBar = "░".repeat(Math.round((presentationDelay / total) * barWidth));
+      console.log(`   ${inputBar}${procBar}${presBar}`);
+      console.log("   █ Input  ▓ Processing  ░ Presentation");
+
+      // Recommendation if slow
+      if (rating !== "good") {
+        console.log("");
+        console.log("%c💡 Optimization hint:", "font-weight: bold; color: #3b82f6;");
+        if (longest.name === "Input Delay") {
+          console.log("   Break up long tasks blocking the main thread");
+          console.log("   Use requestIdleCallback or setTimeout for non-critical work");
+        } else if (longest.name === "Processing Time") {
+          console.log("   Optimize event handlers, reduce JavaScript complexity");
+          console.log("   Consider debouncing or using web workers");
+        } else {
+          console.log("   Reduce DOM size or complexity of updates");
+          console.log("   Avoid forced synchronous layouts");
+        }
+      }
+
+      console.groupEnd();
+    }
+  });
+
+  observer.observe({
+    type: "event",
+    durationThreshold: 0,
+    buffered: true,
+  });
+
+  // Summary function
+  window.getInteractionSummary = () => {
+    if (allInteractions.length === 0) {
+      console.log("%c📊 No interactions recorded yet.", "font-weight: bold;");
+      console.log("   Interact with the page (click, type, etc.) and call this again.");
+      return { script: "Interactions", status: "error", error: "No interactions recorded yet", count: 0 };
+    }
+
+    console.group("%c📊 Interaction Summary", "font-weight: bold; font-size: 14px;");
+
+    const durations = allInteractions.map((i) => i.duration);
+    const worst = Math.max(...durations);
+    const avg = durations.reduce((a, b) => a + b, 0) / durations.length;
+    const p75 = durations.sort((a, b) => a - b)[Math.floor(durations.length * 0.75)];
+
+    const worstRating = valueToRating(worst);
+    const p75Rating = valueToRating(p75);
+
+    console.log("");
+    console.log("%cStatistics:", "font-weight: bold;");
+    console.log(`   Total interactions: ${allInteractions.length}`);
+    console.log(
+      `   Worst: %c${formatMs(worst)} (${worstRating})`,
+      `color: ${RATING_COLORS[worstRating]};`
+    );
+    console.log(
+      `   P75 (INP): %c${formatMs(p75)} (${p75Rating})`,
+      `color: ${RATING_COLORS[p75Rating]};`
+    );
+    console.log(`   Average: ${formatMs(avg)}`);
+
+    // Rating breakdown
+    const good = allInteractions.filter((i) => i.rating === "good").length;
+    const needsImprovement = allInteractions.filter(
+      (i) => i.rating === "needs-improvement"
+    ).length;
+    const poor = allInteractions.filter((i) => i.rating === "poor").length;
+
+    console.log("");
+    console.log("%cBy rating:", "font-weight: bold;");
+    console.log(`   🟢 Good (≤200ms): ${good}`);
+    console.log(`   🟡 Needs Improvement (≤500ms): ${needsImprovement}`);
+    console.log(`   🔴 Poor (>500ms): ${poor}`);
+
+    // Slow interactions
+    const slowInteractions = allInteractions.filter((i) => i.rating !== "good");
+    if (slowInteractions.length > 0) {
+      console.log("");
+      console.log("%c⚠️ Slow interactions:", "font-weight: bold; color: #ef4444;");
+      slowInteractions.forEach((i, idx) => {
+        const icon = RATING_ICONS[i.rating];
+        console.log(`   ${idx + 1}. ${icon} ${i.type} - ${formatMs(i.duration)}`, i.target);
+      });
+    }
+
+    const byRating = {
+      good: allInteractions.filter((i) => i.rating === "good").length,
+      "needs-improvement": allInteractions.filter((i) => i.rating === "needs-improvement").length,
+      poor: allInteractions.filter((i) => i.rating === "poor").length,
+    };
+    console.groupEnd();
+    return {
+      script: "Interactions",
+      status: "ok",
+      count: allInteractions.length,
+      details: {
+        totalInteractions: allInteractions.length,
+        worstMs: Math.round(worst),
+        avgMs: Math.round(avg),
+        p75Ms: Math.round(p75),
+        byRating,
+      },
+      items: allInteractions.map((i) => ({
+        type: i.type,
+        durationMs: Math.round(i.duration),
+        rating: i.rating,
+      })),
+    };
+  };
+
+  console.log("%c👆 Interaction Tracking Active", "font-weight: bold; font-size: 14px;");
+  console.log("   Interact with the page to see interaction details.");
+  console.log("   Call %cgetInteractionSummary()%c for a summary.", "font-family: monospace; background: #f3f4f6; padding: 2px 4px;", "");
+
+  return {
+    script: "Interactions",
+    status: "tracking",
+    message: "Tracking interactions. Interact with the page then call getInteractionSummary() for results.",
+    getDataFn: "getInteractionSummary",
+  };
+})();