Update injection.js

injection.js

@@ -1,9 +1,8 @@
 
+
 (() => {
-  // Stop the previous monitor before replacing its window.
-  if (window.hitRenderMonitorTimer) {
-    clearInterval(window.hitRenderMonitorTimer);
-  }
+  // H3 Render Monitor v4 — Kaggle
+  if (window.hitRenderMonitorTimer) clearInterval(window.hitRenderMonitorTimer);
   document.getElementById("hit-render-monitor")?.remove();
 
   const POSITION_KEY = "hitRenderMonitorPosition";
@@ -15,7 +14,6 @@
     totalSteps: 0,
     checkpoints: new Set(),
     completedUrl: "",
-    lastReport: null,
     minimized: false
   };
 
@@ -41,37 +39,24 @@
 
   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>
@@ -80,7 +65,31 @@
 
       <hr style="border-color:#444;margin:12px 0">
 
-      <div><strong>PROMPT INSPECTOR</strong></div>
+      <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>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">
+
+      <strong>RESOURCE USAGE</strong>
+      <div style="color:#aaa;font-size:11px;margin-top:6px">
+        Live hardware readings not yet connected.
+      </div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px">
+        <div class="hit-stat"><small>CPU</small><strong>--</strong></div>
+        <div class="hit-stat"><small>RAM</small><strong>--</strong></div>
+        <div class="hit-stat"><small>DISK</small><strong>--</strong></div>
+        <div class="hit-stat"><small>GPU / VRAM</small><strong>--</strong></div>
+      </div>
+
+      <hr style="border-color:#444;margin:12px 0">
+
+      <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">
@@ -88,46 +97,56 @@
       <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>
   `;
 
   document.body.appendChild(panel);
 
+  // Style the 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");
-
     if (saved && Number.isFinite(saved.left) && Number.isFinite(saved.top)) {
       panel.style.left = saved.left + "px";
       panel.style.top = saved.top + "px";
       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();
-
     try {
       sessionStorage.setItem(POSITION_KEY, JSON.stringify({
         left: Math.round(rect.left),
@@ -136,7 +155,7 @@
     } catch (e) {}
   }
 
-  // Drag the monitor using its title bar.
+  // Drag popup.
   const header = el("hit-header");
   let dragging = false;
   let dragOffsetX = 0;
@@ -144,44 +163,33 @@
 
   header.addEventListener("pointerdown", event => {
     if (event.target.closest("button")) return;
-
     dragging = true;
-
     const rect = panel.getBoundingClientRect();
     dragOffsetX = event.clientX - rect.left;
     dragOffsetY = event.clientY - rect.top;
-
     panel.style.right = "auto";
     panel.style.bottom = "auto";
     header.style.cursor = "grabbing";
-
     header.setPointerCapture(event.pointerId);
     event.preventDefault();
   });
 
   header.addEventListener("pointermove", event => {
     if (!dragging) return;
-
-    const width = panel.offsetWidth;
-    const height = panel.offsetHeight;
-
-    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 left = Math.max(0, Math.min(
+      window.innerWidth - panel.offsetWidth,
+      event.clientX - dragOffsetX
+    ));
+    const top = Math.max(0, Math.min(
+      window.innerHeight - panel.offsetHeight,
+      event.clientY - dragOffsetY
+    ));
     panel.style.left = left + "px";
     panel.style.top = top + "px";
   });
 
   function stopDragging() {
     if (!dragging) return;
-
     dragging = false;
     header.style.cursor = "grab";
     savePosition();
@@ -191,41 +199,63 @@
   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";
-
-    el("hit-minimize").textContent =
-      state.minimized ? "+" : "−";
+  // Read Kaggle session options from the actual page DOM.
+  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() || "";
+    };
 
-    el("hit-minimize").title =
-      state.minimized ? "Restore" : "Minimize";
+    const accelerator = getValue("Accelerator");
+    const persistence = getValue("Persistence");
+    const environment = getValue("Environment");
 
-    panel.style.width = state.minimized ? "260px" : "440px";
+    const internetInput = document.querySelector(
+      '#internet-toggle-switch-label input[type="checkbox"]'
+    );
 
-    savePosition();
-  };
+    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(),
@@ -241,7 +271,6 @@
       .sort((a, b) => b.text.length - a.text.length);
 
     if (labelled.length) return labelled[0].text;
-
     candidates.sort((a, b) => b.text.length - a.text.length);
     return candidates[0]?.text || "";
   }
@@ -254,20 +283,11 @@
     ];
 
     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;
       }
     }
-
     return "";
   }
 
@@ -285,33 +305,24 @@
   }
 
   function poll() {
-    const prompt = getPrompt();
+    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+)/
       );
 
@@ -332,30 +343,23 @@
         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});
           }
         }
       }
     }
 
     const videoUrl = getVideoUrl();
-
     if (videoUrl) {
       el("hit-url").textContent = videoUrl;
 
       if (state.progress >= 100 && videoUrl !== state.completedUrl) {
         state.completedUrl = videoUrl;
-
         addEvent({
           ...baseEvent("completed"),
           video: {
@@ -380,5 +384,5 @@
   poll();
   window.hitRenderMonitorTimer = setInterval(poll, 15000);
 
-  console.log("H3 Render Monitor v3 started.");
+  console.log("H3 Render Monitor v4 started.");
 })();