From 12321a50c072fa5cca1ee3be9cb43cf0502e8a29 Mon Sep 17 00:00:00 2001
From: alexandrev-tibco <alexandre.vazquez@cloud.com>
Date: Thu, 16 Apr 2026 11:29:45 +0200
Subject: [PATCH] Ads: add placement ID and refresh on interval + transform

- Add id="xsltplayground-main" to EthicalAds div for Placements report
- Refresh ad every 30s via setInterval
- Also refresh on each successful transform (throttled to 30s minimum)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index b6fbbc7b..46aa5267 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -295,6 +295,14 @@ export default function App() {
   const workspaceImportRef = useRef(null);
   const resultResizeState = useRef({ startY: 0, startHeight: MIN_RESULT_HEIGHT });
   const paramResizeState = useRef({ startX: 0, startWidth: DEFAULT_PARAM_WIDTH });
+  const lastAdRefreshRef = useRef(0);
+  const maybeRefreshAd = () => {
+    const now = Date.now();
+    if (now - lastAdRefreshRef.current >= 30_000 && window.ethicalads) {
+      window.ethicalads.reload();
+      lastAdRefreshRef.current = now;
+    }
+  };
   const [resultHeight, setResultHeight] = useState(() => {
     try {
       const stored = localStorage.getItem(RESULT_HEIGHT_KEY);
@@ -443,6 +451,11 @@ export default function App() {
     }
   }, [traceCollapsed]);
 
+  useEffect(() => {
+    const id = setInterval(maybeRefreshAd, 30_000);
+    return () => clearInterval(id);
+  }, []);
+
   useEffect(() => {
     setWorkspaceStatus((prev) => {
       let changed = false;
@@ -1024,6 +1037,7 @@ export default function App() {
       const data = await res.json();
       const defaultView = looksLikeHtml(data.result) ? "render" : "source";
       setTransformCount((prev) => prev + 1);
+      maybeRefreshAd();
       updateWorkspaceStatus(tabId, {
         result: data.result,
         duration: data.duration_ms,
@@ -1344,6 +1358,7 @@ export default function App() {
       {ethicalAdsEnabled && (
         <div
           ref={ethicalSlotRef}
+          id="xsltplayground-main"
           className="ethical-ad-placeholder"
           data-ea-publisher={ethicalAdsPublisher}
           data-ea-type={ethicalAdType}