ruflo 3.7.0-alpha.11 → 3.7.0-alpha.13

package/src/nginx/Dockerfile

@@ -1,10 +1,10 @@
-FROM nginx:1.27-alpine
-
-# Remove default config
-RUN rm /etc/nginx/conf.d/default.conf
-
-# Copy custom config and static assets
-COPY nginx.conf /etc/nginx/nginx.conf
-COPY static/ /etc/nginx/static/
-
-EXPOSE 3000
+FROM nginx:1.27-alpine
+
+# Remove default config
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy custom config and static assets
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY static/ /etc/nginx/static/
+
+EXPOSE 3000

package/src/nginx/nginx.conf

@@ -1,67 +1,67 @@
-worker_processes auto;
-
-events {
-    worker_connections 1024;
-}
-
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-
-    sendfile    on;
-    keepalive_timeout 65;
-    gzip off;  # required for sub_filter to work
-
-    server {
-        listen 3000;
-        server_name _;
-
-        # --- CORS headers on all responses ---
-        add_header Access-Control-Allow-Origin  "*" always;
-        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
-        add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
-
-        # Preflight
-        if ($request_method = OPTIONS) {
-            return 204;
-        }
-
-        # --- RuFlo brand assets (logo, favicons, manifest) ---
-        location /chatui/ {
-            alias /etc/nginx/static/;
-            expires 1h;
-            add_header Cache-Control "public";
-            add_header Access-Control-Allow-Origin "*" always;
-        }
-
-        # --- RuFlo static JS/CSS ---
-        location /ruflo/ {
-            alias /etc/nginx/static/;
-            expires 1h;
-            add_header Cache-Control "public";
-            add_header Access-Control-Allow-Origin "*" always;
-        }
-
-        # --- Proxy to Chat UI with script injection + URL rewriting ---
-        location / {
-            proxy_pass http://chat-ui:3000;
-            proxy_http_version 1.1;
-            proxy_set_header Host              $host;
-            proxy_set_header X-Real-IP         $remote_addr;
-            proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header Upgrade           $http_upgrade;
-            proxy_set_header Connection        "upgrade";
-
-            # Disable gzip from upstream so sub_filter works
-            proxy_set_header Accept-Encoding "";
-
-            # Rewrite absolute PUBLIC_ORIGIN URLs to relative paths
-            # (fixes CORS when accessed via codespace port-forward)
-            sub_filter 'http://localhost:3000' '';
-            sub_filter '</head>' '<script src="/ruflo/welcome.js" defer></script></head>';
-            sub_filter_once off;
-            sub_filter_types text/html application/json;
-        }
-    }
-}
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    sendfile    on;
+    keepalive_timeout 65;
+    gzip off;  # required for sub_filter to work
+
+    server {
+        listen 3000;
+        server_name _;
+
+        # --- CORS headers on all responses ---
+        add_header Access-Control-Allow-Origin  "*" always;
+        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
+        add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
+
+        # Preflight
+        if ($request_method = OPTIONS) {
+            return 204;
+        }
+
+        # --- RuFlo brand assets (logo, favicons, manifest) ---
+        location /chatui/ {
+            alias /etc/nginx/static/;
+            expires 1h;
+            add_header Cache-Control "public";
+            add_header Access-Control-Allow-Origin "*" always;
+        }
+
+        # --- RuFlo static JS/CSS ---
+        location /ruflo/ {
+            alias /etc/nginx/static/;
+            expires 1h;
+            add_header Cache-Control "public";
+            add_header Access-Control-Allow-Origin "*" always;
+        }
+
+        # --- Proxy to Chat UI with script injection + URL rewriting ---
+        location / {
+            proxy_pass http://chat-ui:3000;
+            proxy_http_version 1.1;
+            proxy_set_header Host              $host;
+            proxy_set_header X-Real-IP         $remote_addr;
+            proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Upgrade           $http_upgrade;
+            proxy_set_header Connection        "upgrade";
+
+            # Disable gzip from upstream so sub_filter works
+            proxy_set_header Accept-Encoding "";
+
+            # Rewrite absolute PUBLIC_ORIGIN URLs to relative paths
+            # (fixes CORS when accessed via codespace port-forward)
+            sub_filter 'http://localhost:3000' '';
+            sub_filter '</head>' '<script src="/ruflo/welcome.js" defer></script></head>';
+            sub_filter_once off;
+            sub_filter_types text/html application/json;
+        }
+    }
+}

package/src/nginx/static/favicon-dark.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
-  <path d="M16 2L30 10v12L16 30 2 22V10z" stroke="#00d4ff" stroke-width="2" fill="#0a0a1a"/>
-  <circle cx="16" cy="16" r="5" fill="#7c3aed"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <path d="M16 2L30 10v12L16 30 2 22V10z" stroke="#00d4ff" stroke-width="2" fill="#0a0a1a"/>
+  <circle cx="16" cy="16" r="5" fill="#7c3aed"/>
+</svg>

package/src/nginx/static/favicon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
-  <path d="M16 2L30 10v12L16 30 2 22V10z" stroke="#7c3aed" stroke-width="2" fill="#ffffff"/>
-  <circle cx="16" cy="16" r="5" fill="#00d4ff"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <path d="M16 2L30 10v12L16 30 2 22V10z" stroke="#7c3aed" stroke-width="2" fill="#ffffff"/>
+  <circle cx="16" cy="16" r="5" fill="#00d4ff"/>
+</svg>

package/src/nginx/static/icon.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <rect width="64" height="64" rx="12" fill="#0a0a1a"/>
-  <path d="M32 8L56 22v20L32 56 8 42V22z" stroke="#00d4ff" stroke-width="2.5" fill="none"/>
-  <circle cx="32" cy="32" r="8" fill="#7c3aed"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="12" fill="#0a0a1a"/>
+  <path d="M32 8L56 22v20L32 56 8 42V22z" stroke="#00d4ff" stroke-width="2.5" fill="none"/>
+  <circle cx="32" cy="32" r="8" fill="#7c3aed"/>
+</svg>

package/src/nginx/static/logo.svg

@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 48" fill="none">
-  <!-- Hexagon icon -->
-  <path d="M20 4L36 13v18L20 40 4 31V13z" stroke="#00d4ff" stroke-width="2" fill="none"/>
-  <circle cx="20" cy="22" r="4" fill="#7c3aed"/>
-  <!-- "Ru" in cyan -->
-  <text x="48" y="34" font-family="system-ui, -apple-system, sans-serif" font-weight="700" font-size="28" fill="#00d4ff">Ru</text>
-  <!-- "Flo" in violet -->
-  <text x="88" y="34" font-family="system-ui, -apple-system, sans-serif" font-weight="700" font-size="28" fill="#7c3aed">Flo</text>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 48" fill="none">
+  <!-- Hexagon icon -->
+  <path d="M20 4L36 13v18L20 40 4 31V13z" stroke="#00d4ff" stroke-width="2" fill="none"/>
+  <circle cx="20" cy="22" r="4" fill="#7c3aed"/>
+  <!-- "Ru" in cyan -->
+  <text x="48" y="34" font-family="system-ui, -apple-system, sans-serif" font-weight="700" font-size="28" fill="#00d4ff">Ru</text>
+  <!-- "Flo" in violet -->
+  <text x="88" y="34" font-family="system-ui, -apple-system, sans-serif" font-weight="700" font-size="28" fill="#7c3aed">Flo</text>
+</svg>

package/src/nginx/static/manifest.json

@@ -1,22 +1,22 @@
-{
-  "name": "RuFlo",
-  "short_name": "RuFlo",
-  "description": "Enterprise AI Agent Orchestration Platform",
-  "start_url": "/",
-  "display": "standalone",
-  "theme_color": "#00d4ff",
-  "background_color": "#0a0a1a",
-  "icons": [
-    {
-      "src": "/chatui/icon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml"
-    },
-    {
-      "src": "/chatui/favicon-dark.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
-      "purpose": "monochrome"
-    }
-  ]
-}
+{
+  "name": "RuFlo",
+  "short_name": "RuFlo",
+  "description": "Enterprise AI Agent Orchestration Platform",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#00d4ff",
+  "background_color": "#0a0a1a",
+  "icons": [
+    {
+      "src": "/chatui/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/chatui/favicon-dark.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "monochrome"
+    }
+  ]
+}

package/src/nginx/static/welcome.js

@@ -1,184 +1,184 @@
-(function () {
-  "use strict";
-
-  const THREE_CDN = "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js";
-  const BG_COLOR = 0x0a0a1a;
-  const CYAN = 0x00d4ff;
-  const VIOLET = 0x7c3aed;
-  const AMBER = 0xf59e0b;
-  const PARTICLE_COUNT = 200;
-
-  let scene, camera, renderer, frameId;
-  let icosahedron, octahedron, torus, particles;
-  let textSprite;
-
-  function createTextTexture(text, w, h) {
-    const canvas = document.createElement("canvas");
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext("2d");
-    const grad = ctx.createLinearGradient(0, 0, w, 0);
-    grad.addColorStop(0, "#00d4ff");
-    grad.addColorStop(1, "#7c3aed");
-    ctx.fillStyle = grad;
-    ctx.font = "bold 72px system-ui, -apple-system, sans-serif";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(text, w / 2, h / 2);
-    return canvas;
-  }
-
-  async function initScene(container) {
-    const THREE = await import(THREE_CDN);
-
-    const rect = container.getBoundingClientRect();
-    const width = rect.width || 400;
-    const height = rect.height || 300;
-
-    scene = new THREE.Scene();
-    scene.background = new THREE.Color(BG_COLOR);
-
-    camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
-    camera.position.z = 5;
-
-    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
-    renderer.setSize(width, height);
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-
-    const canvas = renderer.domElement;
-    canvas.style.width = "100%";
-    canvas.style.height = "100%";
-    canvas.style.display = "block";
-    canvas.style.borderRadius = "12px";
-    container.appendChild(canvas);
-
-    // Wireframe icosahedron (cyan, slow rotation)
-    const icoGeo = new THREE.IcosahedronGeometry(1.4, 1);
-    const icoMat = new THREE.MeshBasicMaterial({ color: CYAN, wireframe: true, transparent: true, opacity: 0.6 });
-    icosahedron = new THREE.Mesh(icoGeo, icoMat);
-    scene.add(icosahedron);
-
-    // Wireframe octahedron (violet, counter-rotation)
-    const octGeo = new THREE.OctahedronGeometry(1.0, 0);
-    const octMat = new THREE.MeshBasicMaterial({ color: VIOLET, wireframe: true, transparent: true, opacity: 0.7 });
-    octahedron = new THREE.Mesh(octGeo, octMat);
-    scene.add(octahedron);
-
-    // Pulse torus ring (cyan, breathing)
-    const torGeo = new THREE.TorusGeometry(2.0, 0.02, 8, 64);
-    const torMat = new THREE.MeshBasicMaterial({ color: CYAN, transparent: true, opacity: 0.4 });
-    torus = new THREE.Mesh(torGeo, torMat);
-    torus.rotation.x = Math.PI / 2;
-    scene.add(torus);
-
-    // Particle field (~200 amber dots in a sphere)
-    const pGeo = new THREE.BufferGeometry();
-    const positions = new Float32Array(PARTICLE_COUNT * 3);
-    for (let i = 0; i < PARTICLE_COUNT; i++) {
-      const r = 1.2 + Math.random() * 1.0;
-      const theta = Math.random() * Math.PI * 2;
-      const phi = Math.acos(2 * Math.random() - 1);
-      positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
-      positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
-      positions[i * 3 + 2] = r * Math.cos(phi);
-    }
-    pGeo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    const pMat = new THREE.PointsMaterial({ color: AMBER, size: 0.04, sizeAttenuation: true });
-    particles = new THREE.Points(pGeo, pMat);
-    scene.add(particles);
-
-    // "RuFlo" text sprite
-    const textCanvas = createTextTexture("RuFlo", 512, 128);
-    const tex = new THREE.CanvasTexture(textCanvas);
-    const spriteMat = new THREE.SpriteMaterial({ map: tex, transparent: true, opacity: 0.9 });
-    textSprite = new THREE.Sprite(spriteMat);
-    textSprite.scale.set(2.5, 0.625, 1);
-    textSprite.position.y = -2.2;
-    scene.add(textSprite);
-
-    // Responsive resize
-    const ro = new ResizeObserver(function () {
-      const r2 = container.getBoundingClientRect();
-      const w = r2.width || 400;
-      const h = r2.height || 300;
-      camera.aspect = w / h;
-      camera.updateProjectionMatrix();
-      renderer.setSize(w, h);
-    });
-    ro.observe(container);
-
-    // Animate
-    function animate() {
-      frameId = requestAnimationFrame(animate);
-      const t = performance.now() * 0.001;
-
-      icosahedron.rotation.y = t * 0.3;
-      icosahedron.rotation.x = t * 0.15;
-
-      octahedron.rotation.y = -t * 0.4;
-      octahedron.rotation.z = t * 0.2;
-
-      // Breathing torus
-      const s = 1 + 0.15 * Math.sin(t * 1.5);
-      torus.scale.set(s, s, s);
-
-      // Slow particle rotation
-      particles.rotation.y = t * 0.05;
-      particles.rotation.x = t * 0.02;
-
-      renderer.render(scene, camera);
-    }
-    animate();
-
-    return { ro: ro };
-  }
-
-  function cleanup(refs) {
-    if (frameId) cancelAnimationFrame(frameId);
-    if (refs && refs.ro) refs.ro.disconnect();
-    if (renderer) {
-      renderer.dispose();
-      renderer.forceContextLoss();
-    }
-    scene = camera = renderer = frameId = null;
-  }
-
-  // Watch for the welcome modal's image and replace it
-  let refs = null;
-  const observer = new MutationObserver(function (mutations) {
-    for (const m of mutations) {
-      for (const node of m.addedNodes) {
-        if (!(node instanceof HTMLElement)) continue;
-        const img = node.querySelector
-          ? node.querySelector('img[src*="omni-welcome"], img[src*="huggingchat"]')
-          : null;
-        if (img) {
-          const container = document.createElement("div");
-          container.style.width = "100%";
-          container.style.height = "320px";
-          container.style.position = "relative";
-          container.style.overflow = "hidden";
-          container.style.borderRadius = "12px";
-          img.parentNode.replaceChild(container, img);
-          initScene(container).then(function (r) { refs = r; });
-        }
-      }
-      // Detect modal removal → cleanup
-      for (const node of m.removedNodes) {
-        if (!(node instanceof HTMLElement)) continue;
-        if (node.querySelector && node.querySelector("canvas")) {
-          cleanup(refs);
-          refs = null;
-        }
-      }
-    }
-  });
-
-  if (document.body) {
-    observer.observe(document.body, { childList: true, subtree: true });
-  } else {
-    document.addEventListener("DOMContentLoaded", function () {
-      observer.observe(document.body, { childList: true, subtree: true });
-    });
-  }
-})();
+(function () {
+  "use strict";
+
+  const THREE_CDN = "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js";
+  const BG_COLOR = 0x0a0a1a;
+  const CYAN = 0x00d4ff;
+  const VIOLET = 0x7c3aed;
+  const AMBER = 0xf59e0b;
+  const PARTICLE_COUNT = 200;
+
+  let scene, camera, renderer, frameId;
+  let icosahedron, octahedron, torus, particles;
+  let textSprite;
+
+  function createTextTexture(text, w, h) {
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    const grad = ctx.createLinearGradient(0, 0, w, 0);
+    grad.addColorStop(0, "#00d4ff");
+    grad.addColorStop(1, "#7c3aed");
+    ctx.fillStyle = grad;
+    ctx.font = "bold 72px system-ui, -apple-system, sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, w / 2, h / 2);
+    return canvas;
+  }
+
+  async function initScene(container) {
+    const THREE = await import(THREE_CDN);
+
+    const rect = container.getBoundingClientRect();
+    const width = rect.width || 400;
+    const height = rect.height || 300;
+
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(BG_COLOR);
+
+    camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
+    camera.position.z = 5;
+
+    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+    const canvas = renderer.domElement;
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    canvas.style.display = "block";
+    canvas.style.borderRadius = "12px";
+    container.appendChild(canvas);
+
+    // Wireframe icosahedron (cyan, slow rotation)
+    const icoGeo = new THREE.IcosahedronGeometry(1.4, 1);
+    const icoMat = new THREE.MeshBasicMaterial({ color: CYAN, wireframe: true, transparent: true, opacity: 0.6 });
+    icosahedron = new THREE.Mesh(icoGeo, icoMat);
+    scene.add(icosahedron);
+
+    // Wireframe octahedron (violet, counter-rotation)
+    const octGeo = new THREE.OctahedronGeometry(1.0, 0);
+    const octMat = new THREE.MeshBasicMaterial({ color: VIOLET, wireframe: true, transparent: true, opacity: 0.7 });
+    octahedron = new THREE.Mesh(octGeo, octMat);
+    scene.add(octahedron);
+
+    // Pulse torus ring (cyan, breathing)
+    const torGeo = new THREE.TorusGeometry(2.0, 0.02, 8, 64);
+    const torMat = new THREE.MeshBasicMaterial({ color: CYAN, transparent: true, opacity: 0.4 });
+    torus = new THREE.Mesh(torGeo, torMat);
+    torus.rotation.x = Math.PI / 2;
+    scene.add(torus);
+
+    // Particle field (~200 amber dots in a sphere)
+    const pGeo = new THREE.BufferGeometry();
+    const positions = new Float32Array(PARTICLE_COUNT * 3);
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const r = 1.2 + Math.random() * 1.0;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+      positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+      positions[i * 3 + 2] = r * Math.cos(phi);
+    }
+    pGeo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    const pMat = new THREE.PointsMaterial({ color: AMBER, size: 0.04, sizeAttenuation: true });
+    particles = new THREE.Points(pGeo, pMat);
+    scene.add(particles);
+
+    // "RuFlo" text sprite
+    const textCanvas = createTextTexture("RuFlo", 512, 128);
+    const tex = new THREE.CanvasTexture(textCanvas);
+    const spriteMat = new THREE.SpriteMaterial({ map: tex, transparent: true, opacity: 0.9 });
+    textSprite = new THREE.Sprite(spriteMat);
+    textSprite.scale.set(2.5, 0.625, 1);
+    textSprite.position.y = -2.2;
+    scene.add(textSprite);
+
+    // Responsive resize
+    const ro = new ResizeObserver(function () {
+      const r2 = container.getBoundingClientRect();
+      const w = r2.width || 400;
+      const h = r2.height || 300;
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h);
+    });
+    ro.observe(container);
+
+    // Animate
+    function animate() {
+      frameId = requestAnimationFrame(animate);
+      const t = performance.now() * 0.001;
+
+      icosahedron.rotation.y = t * 0.3;
+      icosahedron.rotation.x = t * 0.15;
+
+      octahedron.rotation.y = -t * 0.4;
+      octahedron.rotation.z = t * 0.2;
+
+      // Breathing torus
+      const s = 1 + 0.15 * Math.sin(t * 1.5);
+      torus.scale.set(s, s, s);
+
+      // Slow particle rotation
+      particles.rotation.y = t * 0.05;
+      particles.rotation.x = t * 0.02;
+
+      renderer.render(scene, camera);
+    }
+    animate();
+
+    return { ro: ro };
+  }
+
+  function cleanup(refs) {
+    if (frameId) cancelAnimationFrame(frameId);
+    if (refs && refs.ro) refs.ro.disconnect();
+    if (renderer) {
+      renderer.dispose();
+      renderer.forceContextLoss();
+    }
+    scene = camera = renderer = frameId = null;
+  }
+
+  // Watch for the welcome modal's image and replace it
+  let refs = null;
+  const observer = new MutationObserver(function (mutations) {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        if (!(node instanceof HTMLElement)) continue;
+        const img = node.querySelector
+          ? node.querySelector('img[src*="omni-welcome"], img[src*="huggingchat"]')
+          : null;
+        if (img) {
+          const container = document.createElement("div");
+          container.style.width = "100%";
+          container.style.height = "320px";
+          container.style.position = "relative";
+          container.style.overflow = "hidden";
+          container.style.borderRadius = "12px";
+          img.parentNode.replaceChild(container, img);
+          initScene(container).then(function (r) { refs = r; });
+        }
+      }
+      // Detect modal removal → cleanup
+      for (const node of m.removedNodes) {
+        if (!(node instanceof HTMLElement)) continue;
+        if (node.querySelector && node.querySelector("canvas")) {
+          cleanup(refs);
+          refs = null;
+        }
+      }
+    }
+  });
+
+  if (document.body) {
+    observer.observe(document.body, { childList: true, subtree: true });
+  } else {
+    document.addEventListener("DOMContentLoaded", function () {
+      observer.observe(document.body, { childList: true, subtree: true });
+    });
+  }
+})();