Update injection.js

injection.js

@@ -1,9 +1,9 @@
 
+
 (() => {
-  // Stop the previous monitor before replacing its window.
-  if (window.hitRenderMonitorTimer) {
-    clearInterval(window.hitRenderMonitorTimer);
-  }
+  // H3 Render Monitor v6 — Kaggle Live Dashboard
+  if (window.hitRenderMonitorTimer) clearInterval(window.hitRenderMonitorTimer);
+  if (window.hitResourceMonitorTimer) clearInterval(window.hitResourceMonitorTimer);
   document.getElementById("hit-render-monitor")?.remove();
 
   const POSITION_KEY = "hitRenderMonitorPosition";
@@ -15,7 +15,6 @@
     totalSteps: 0,
     checkpoints: new Set(),
     completedUrl: "",
-    lastReport: null,
     minimized: false
   };
 
@@ -41,68 +40,126 @@
 
   panel.innerHTML = `
     <div id="hit-header" style="
-      display:flex;
-      justify-content:space-between;
-      align-items:center;
-      padding:12px 14px;
-      background:#22252d;
-      border-radius:10px 10px 0 0;
-      cursor:grab;
-      user-select:none;
-      touch-action:none;
-    ">
+      display:flex;justify-content:space-between;align-items:center;
+      padding:12px 14px;background:#22252d;
+      border-radius:10px 10px 0 0;cursor:grab;
+      user-select:none;touch-action:none">
       <strong style="font-size:15px">
         H3 Monitor <span id="hit-title-progress" style="color:#20b875">· Waiting</span>
       </strong>
       <div style="display:flex;gap:6px">
-        <button id="hit-minimize" title="Minimize" style="
-          background:#444;color:white;border:0;
-          padding:3px 10px;cursor:pointer;font-size:16px
-        ">−</button>
-        <button id="hit-close" title="Close" style="
-          background:#744;color:white;border:0;
-          padding:3px 9px;cursor:pointer;font-size:15px
-        ">×</button>
+        <button id="hit-minimize" title="Minimize"
+          style="background:#444;color:white;border:0;padding:3px 10px;cursor:pointer;font-size:16px">−</button>
+        <button id="hit-close" title="Close"
+          style="background:#744;color:white;border:0;padding:3px 9px;cursor:pointer;font-size:15px">×</button>
       </div>
     </div>
-    <div id="hit-content" style="
-      padding:14px;
-      max-height:calc(85vh - 45px);
-      overflow-y:auto;
-    ">
-      <div style="margin-top:2px">RENDER PROGRESS</div>
+
+    <div id="hit-content" style="padding:14px;max-height:calc(85vh - 45px);overflow-y:auto">
+
+      <strong>RENDER PROGRESS</strong>
       <div style="height:12px;background:#333;border-radius:8px;margin:6px 0;overflow:hidden">
         <div id="hit-bar" style="height:100%;width:0%;background:#20b875;transition:width .3s"></div>
       </div>
       <div id="hit-progress" style="font-size:18px">Waiting for H3...</div>
       <div id="hit-step" style="color:#aaa"></div>
+
+      <hr style="border-color:#444;margin:12px 0">
+
+      <strong>KAGGLE SESSION</strong>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px">
+        <div class="hit-stat"><small>ACCELERATOR</small><strong id="hit-accelerator">--</strong></div>
+        <div class="hit-stat"><small>SESSION TIME</small><strong id="hit-session-time">--</strong></div>
+        <div class="hit-stat"><small>DISK</small><strong id="hit-disk">--</strong></div>
+        <div class="hit-stat"><small>QUOTA</small><strong id="hit-quota">--</strong></div>
+        <div class="hit-stat"><small>PERSISTENCE</small><strong id="hit-persistence">--</strong></div>
+        <div class="hit-stat"><small>INTERNET</small><strong id="hit-internet">--</strong></div>
+        <div class="hit-stat" style="grid-column:span 2"><small>ENVIRONMENT</small><strong id="hit-environment">--</strong></div>
+      </div>
+
+      <hr style="border-color:#444;margin:12px 0">
+
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <strong>LIVE RESOURCE USAGE</strong>
+        <span id="hit-resource-status" style="font-size:10px;color:#aaa">Waiting...</span>
+      </div>
+
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px">
+        <div class="hit-stat"><small>CPU</small><strong id="hit-cpu">--</strong></div>
+        <div class="hit-stat"><small>RAM</small><strong id="hit-ram">--</strong></div>
+        <div class="hit-stat" style="grid-column:span 2"><small>DISK USAGE</small><strong id="hit-disk-live">--</strong></div>
+      </div>
+
+      <div style="margin-top:9px;background:#242730;padding:9px;border-radius:6px">
+        <strong style="font-size:12px">GPU 1</strong>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px">
+          <div><small style="color:#aaa">UTILISATION</small><strong id="hit-gpu-1" style="display:block">--</strong></div>
+          <div><small style="color:#aaa">MEMORY</small><strong id="hit-vram-1" style="display:block">--</strong></div>
+        </div>
+      </div>
+
+      <div style="margin-top:7px;background:#242730;padding:9px;border-radius:6px">
+        <strong style="font-size:12px">GPU 2</strong>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px">
+          <div><small style="color:#aaa">UTILISATION</small><strong id="hit-gpu-2" style="display:block">--</strong></div>
+          <div><small style="color:#aaa">MEMORY</small><strong id="hit-vram-2" style="display:block">--</strong></div>
+        </div>
+      </div>
+
       <hr style="border-color:#444;margin:12px 0">
-      <div><strong>PROMPT INSPECTOR</strong></div>
+
+      <strong>PROMPT INSPECTOR</strong>
       <div id="hit-prompt" style="background:#242730;padding:8px;margin-top:6px;max-height:125px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#ddd">Waiting for prompt...</div>
+
       <hr style="border-color:#444;margin:12px 0">
+
       <div style="display:flex;justify-content:space-between;align-items:center">
         <strong>CALLBACK SIMULATOR</strong>
         <label style="font-size:11px">
-          <input id="hit-report" type="checkbox" checked>
-          Report to 1hit.no
+          <input id="hit-report" type="checkbox" checked> Report to 1hit.no
         </label>
       </div>
       <div style="color:#e6b85c;font-size:11px;margin:4px 0 8px">
         Simulation only — no network requests
       </div>
       <div id="hit-json" style="background:#090b0e;padding:9px;max-height:230px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;color:#9fe5b2">Waiting for events...</div>
+
       <hr style="border-color:#444;margin:12px 0">
-      <div><strong>OUTPUT URL</strong></div>
+
+      <strong>OUTPUT URL</strong>
       <div id="hit-url" style="color:#8fcaff;overflow-wrap:anywhere;margin-top:5px">Waiting for video...</div>
-      <div id="hit-status" style="color:#aaa;font-size:11px;margin-top:10px">Polling every 15 seconds</div>
+      <div id="hit-status" style="color:#aaa;font-size:11px;margin-top:10px">Progress scan every 15 seconds · Resources every 2.5 seconds</div>
     </div>
   `;
 
   document.body.appendChild(panel);
 
+  // Style statistic cards.
+  panel.querySelectorAll(".hit-stat").forEach(card => {
+    Object.assign(card.style, {
+      background: "#242730",
+      padding: "8px",
+      borderRadius: "6px",
+      minWidth: "0",
+      overflowWrap: "anywhere"
+    });
+
+    const small = card.querySelector("small");
+    const strong = card.querySelector("strong");
+
+    if (small) Object.assign(small.style, {
+      display: "block",
+      color: "#aaa",
+      fontSize: "10px",
+      marginBottom: "3px"
+    });
+
+    if (strong) Object.assign(strong.style, {fontSize: "12px"});
+  });
+
   const el = id => panel.querySelector("#" + id);
 
-  // Restore the previous position, if available.
+  // Restore previous popup position.
   try {
     const saved = JSON.parse(sessionStorage.getItem(POSITION_KEY) || "null");
 
@@ -112,9 +169,7 @@
       panel.style.right = "auto";
       panel.style.bottom = "auto";
     }
-  } catch (e) {
-    console.warn("Could not restore monitor position:", e);
-  }
+  } catch (e) {}
 
   function savePosition() {
     const rect = panel.getBoundingClientRect();
@@ -127,7 +182,7 @@
     } catch (e) {}
   }
 
-  // Drag the monitor using its title bar.
+  // Drag popup.
   const header = el("hit-header");
   let dragging = false;
   let dragOffsetX = 0;
@@ -137,7 +192,6 @@
     if (event.target.closest("button")) return;
 
     dragging = true;
-
     const rect = panel.getBoundingClientRect();
     dragOffsetX = event.clientX - rect.left;
     dragOffsetY = event.clientY - rect.top;
@@ -145,7 +199,6 @@
     panel.style.right = "auto";
     panel.style.bottom = "auto";
     header.style.cursor = "grabbing";
-
     header.setPointerCapture(event.pointerId);
     event.preventDefault();
   });
@@ -153,18 +206,15 @@
   header.addEventListener("pointermove", event => {
     if (!dragging) return;
 
-    const width = panel.offsetWidth;
-    const height = panel.offsetHeight;
+    const left = Math.max(0, Math.min(
+      window.innerWidth - panel.offsetWidth,
+      event.clientX - dragOffsetX
+    ));
 
-    const left = Math.max(
-      0,
-      Math.min(window.innerWidth - width, event.clientX - dragOffsetX)
-    );
-
-    const top = Math.max(
-      0,
-      Math.min(window.innerHeight - height, event.clientY - dragOffsetY)
-    );
+    const top = Math.max(0, Math.min(
+      window.innerHeight - panel.offsetHeight,
+      event.clientY - dragOffsetY
+    ));
 
     panel.style.left = left + "px";
     panel.style.top = top + "px";
@@ -172,7 +222,6 @@
 
   function stopDragging() {
     if (!dragging) return;
-
     dragging = false;
     header.style.cursor = "grab";
     savePosition();
@@ -182,41 +231,147 @@
   header.addEventListener("pointercancel", stopDragging);
   header.addEventListener("lostpointercapture", stopDragging);
 
-  // Minimize and restore without stopping the monitor.
+  // Minimize and restore.
   el("hit-minimize").onclick = () => {
     state.minimized = !state.minimized;
+    el("hit-content").style.display = state.minimized ? "none" : "block";
+    el("hit-minimize").textContent = state.minimized ? "+" : "−";
+    el("hit-minimize").title = state.minimized ? "Restore" : "Minimize";
+    panel.style.width = state.minimized ? "260px" : "440px";
+    savePosition();
+  };
 
-    el("hit-content").style.display =
-      state.minimized ? "none" : "block";
+  // Read a metric from Kaggle's visible metric cards.
+  function readMetrics() {
+    const result = [];
 
-    el("hit-minimize").textContent =
-      state.minimized ? "+" : "−";
+    const metricNodes = [...document.querySelectorAll('span[tabindex="0"]')];
 
-    el("hit-minimize").title =
-      state.minimized ? "Restore" : "Minimize";
+    for (const node of metricNodes) {
+      const card = node.querySelector("div");
+      if (!card) continue;
 
-    panel.style.width = state.minimized ? "260px" : "440px";
+      const children = [...card.children];
+      if (children.length < 2) continue;
 
-    savePosition();
-  };
+      const label = (children[0].innerText || "").trim();
+      const value = (children[1].innerText || "").trim();
+      const maximum = (children[2]?.innerText || "").trim();
+
+      if (!label || !value) continue;
+
+      result.push({
+        label,
+        value,
+        maximum,
+        container: node.parentElement
+      });
+    }
+
+    return result;
+  }
+
+  function updateResourceUsage() {
+    const metrics = readMetrics();
+
+    const findAll = label =>
+      metrics.filter(item => item.label.toLowerCase() === label.toLowerCase());
+
+    const findOne = label => findAll(label)[0];
+
+    const cpu = findOne("CPU");
+    const ram = findOne("RAM");
+    const disk = findOne("Disk");
+    const session = findOne("Session");
+    const gpu = findAll("GPU");
+    const gpuMemory = findAll("GPU Memory");
+
+    if (cpu) el("hit-cpu").textContent = cpu.value;
+    if (ram) el("hit-ram").textContent =
+      ram.value + (ram.maximum ? " / " + ram.maximum : "");
+
+    if (disk) {
+      const diskText = disk.value + (disk.maximum ? " / " + disk.maximum : "");
+      el("hit-disk").textContent = diskText;
+      el("hit-disk-live").textContent = diskText;
+    }
+
+    if (session) {
+      el("hit-session-time").textContent =
+        session.value + (session.maximum ? " / " + session.maximum : "");
+    }
+
+    if (gpu[0]) el("hit-gpu-1").textContent = gpu[0].value;
+    if (gpuMemory[0]) {
+      el("hit-vram-1").textContent =
+        gpuMemory[0].value + (gpuMemory[0].maximum ? " / " + gpuMemory[0].maximum : "");
+    }
+
+    if (gpu[1]) el("hit-gpu-2").textContent = gpu[1].value;
+    if (gpuMemory[1]) {
+      el("hit-vram-2").textContent =
+        gpuMemory[1].value + (gpuMemory[1].maximum ? " / " + gpuMemory[1].maximum : "");
+    }
+
+    const found = [cpu, ram, disk, session].filter(Boolean).length +
+      gpu.length + gpuMemory.length;
+
+    el("hit-resource-status").textContent =
+      found ? "Live · " + new Date().toLocaleTimeString() : "Waiting for Kaggle metrics";
+  }
+
+  // Read Kaggle session options.
+  function updateKaggleOptions() {
+    const getValue = label => {
+      const field = [...document.querySelectorAll('[role="combobox"]')]
+        .find(node => {
+          const text = (
+            node.getAttribute("aria-label") ||
+            node.getAttribute("aria-labelledby") ||
+            ""
+          ).toLowerCase();
+
+          return text.includes(label.toLowerCase());
+        });
+
+      return field?.innerText?.trim() || "";
+    };
+
+    const accelerator = getValue("Accelerator");
+    const persistence = getValue("Persistence");
+    const environment = getValue("Environment");
+
+    const internetInput = document.querySelector(
+      '#internet-toggle-switch-label input[type="checkbox"]'
+    );
+
+    const quota = [...document.querySelectorAll("p")]
+      .find(node => node.innerText.includes("Quota:"))
+      ?.innerText.match(/Quota:\s*(.*?)(?:\s*-\s*Link|$)/)?.[1] || "";
+
+    el("hit-accelerator").textContent = accelerator || "Not detected";
+    el("hit-quota").textContent = quota || "Not detected";
+    el("hit-persistence").textContent = persistence || "Not detected";
+    el("hit-environment").textContent = environment || "Not detected";
+    el("hit-internet").textContent = internetInput
+      ? (internetInput.checked ? "On" : "Off")
+      : "Not detected";
+  }
 
   function addEvent(data) {
     if (!el("hit-report").checked) return;
 
-    const json = JSON.stringify(data, null, 2);
     const log = el("hit-json");
 
     log.textContent =
-      (log.textContent === "Waiting for events..." ? "" : log.textContent + "\n\n")
-      + json;
+      (log.textContent === "Waiting for events..." ? "" : log.textContent + "\n\n") +
+      JSON.stringify(data, null, 2);
 
     log.scrollTop = log.scrollHeight;
   }
 
   function getPrompt() {
-    const fields = [
-      ...document.querySelectorAll("textarea, [contenteditable='true']")
-    ];
+    const fields = [...document.querySelectorAll("textarea, [contenteditable='true']")];
 
     const candidates = fields.map(node => ({
       text: (node.value || node.innerText || node.textContent || "").trim(),
@@ -245,16 +400,9 @@
     ];
 
     for (const node of candidates) {
-      const url =
-        node.currentSrc ||
-        node.src ||
-        node.href ||
-        "";
-
-      if (url && (
-        /\.mp4(?:[?#]|$)/i.test(url) ||
-        url.startsWith("blob:")
-      )) {
+      const url = node.currentSrc || node.src || node.href || "";
+
+      if (url && (/\.mp4(?:[?#]|$)/i.test(url) || url.startsWith("blob:"))) {
         return url;
       }
     }
@@ -276,33 +424,26 @@
   }
 
   function poll() {
+    updateKaggleOptions();
+
     const prompt = getPrompt();
 
     if (prompt && prompt !== state.prompt) {
       state.prompt = prompt;
       state.checkpoints.clear();
       state.completedUrl = "";
-
       el("hit-prompt").textContent = prompt;
-
-      addEvent({
-        ...baseEvent("prompt"),
-        message: "New prompt detected"
-      });
+      addEvent({...baseEvent("prompt"), message: "New prompt detected"});
     }
 
-    const messages = [
-      ...document.querySelectorAll('div[type="message"]')
-    ];
+    const messages = [...document.querySelectorAll('div[type="message"]')];
 
     const matching = messages
       .map(node => node.innerText || "")
       .filter(text => text.includes("H3 denoising:"));
 
     if (matching.length) {
-      const latest = matching[matching.length - 1];
-
-      const match = latest.match(
+      const match = matching[matching.length - 1].match(
         /H3 denoising:\s*(\d+)%.*?\|\s*(\d+)\/(\d+)/
       );
 
@@ -323,17 +464,12 @@
         el("hit-bar").style.width = pct + "%";
         el("hit-progress").textContent = pct + "%";
         el("hit-step").textContent = `Step ${step} / ${total}`;
-
         el("hit-title-progress").textContent = "· " + pct + "%";
 
         for (const threshold of [25, 50, 75, 100]) {
           if (pct >= threshold && !state.checkpoints.has(threshold)) {
             state.checkpoints.add(threshold);
-
-            addEvent({
-              ...baseEvent("progress"),
-              checkpoint: threshold
-            });
+            addEvent({...baseEvent("progress"), checkpoint: threshold});
           }
         }
       }
@@ -359,17 +495,26 @@
 
     el("hit-status").textContent =
       "Last scan: " + new Date().toLocaleTimeString() +
-      " · Polling every 15 seconds";
+      " · Progress scan every 15 seconds";
   }
 
+  // Close and clean up both timers.
   el("hit-close").onclick = () => {
     clearInterval(window.hitRenderMonitorTimer);
+    clearInterval(window.hitResourceMonitorTimer);
+
     window.hitRenderMonitorTimer = null;
+    window.hitResourceMonitorTimer = null;
+
     panel.remove();
   };
 
+  // Start monitoring.
+  updateResourceUsage();
   poll();
+
+  window.hitResourceMonitorTimer = setInterval(updateResourceUsage, 2500);
   window.hitRenderMonitorTimer = setInterval(poll, 15000);
 
-  console.log("H3 Render Monitor v3 started.");
+  console.log("H3 Render Monitor v6 started — live resource monitoring enabled.");
 })();