bump version number

.github/workflows/publish_action.yml

@@ -0,0 +1,20 @@
+name: Publish to Comfy registry
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - "pyproject.toml"
+
+jobs:
+  publish-node:
+    name: Publish Custom Node to registry
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+      - name: Publish Custom Node
+        uses: Comfy-Org/publish-node-action@main
+        with:
+          personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}

js/comparison.js

@@ -2,12 +2,15 @@ import { State } from "./state.js";
 import { isVideoFormat } from "./utils.js";
 
 let activeComparisonViewer = null;
-let videoSyncActive = false;
-let syncAnimationFrameId = null;
-
-// Track the global keydown reference across instances defensively
 let globalKeydownHandler = null;
 
+// Safe clientX resolver for mouse and touch events
+const getClientX = (e) => {
+    if (e.touches && e.touches.length > 0) return e.touches[0].clientX;
+    if (e.changedTouches && e.changedTouches.length > 0) return e.changedTouches[0].clientX;
+    return e.clientX || 0;
+};
+
 const createMediaElement = (src, muted = false) => {
     const isVideo = isVideoFormat(src);
     const el = isVideo ? document.createElement("video") : document.createElement("img");
@@ -27,7 +30,11 @@ const createMediaElement = (src, muted = false) => {
 };
 
 const setupVideoPlayback = (vid, container) => {
-    if (!vid) return;
+    if (!vid) return () => {};
+
+    // Localized animation loop states to prevent cross-instance contamination
+    let videoSyncActive = true;
+    let syncAnimationFrameId = null;
 
     const onMetaLoaded = () => {
         vid.play().catch(()=>{});
@@ -76,7 +83,7 @@ const setupVideoPlayback = (vid, container) => {
 
     const scrub = (e) => {
         const rect = scrubberContainer.getBoundingClientRect();
-        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientX = getClientX(e);
         const percent = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width));
         const duration = vid.duration || 0;
         if (duration > 0) {
@@ -99,7 +106,6 @@ const setupVideoPlayback = (vid, container) => {
     controlBar.append(playBtn, scrubberContainer, timeLabel);
     container.appendChild(controlBar);
 
-    videoSyncActive = true;
     const syncLoop = () => {
         if (!videoSyncActive) return;
 
@@ -121,6 +127,8 @@ const setupVideoPlayback = (vid, container) => {
     requestAnimationFrame(syncLoop);
 
     return () => {
+        videoSyncActive = false;
+        if (syncAnimationFrameId) cancelAnimationFrame(syncAnimationFrameId);
         window.removeEventListener("mousemove", handleWindowMove);
         window.removeEventListener("touchmove", handleWindowMove);
         window.removeEventListener("mouseup", handleWindowUp);
@@ -131,7 +139,6 @@ const setupVideoPlayback = (vid, container) => {
 };
 
 function createComparisonViewer(baseSrc) {
-    // DEFENSIVE CHECK: Force-remove any globally orphaned keydown handlers before binding a new one
     if (globalKeydownHandler) {
         document.removeEventListener("keydown", globalKeydownHandler);
         globalKeydownHandler = null;
@@ -186,21 +193,28 @@ function createComparisonViewer(baseSrc) {
     });
     container.appendChild(wrapper);
 
-    // Muted bottom tooltip helper
+    // Bottom tooltip helper (Font size increased to 12px for legibility)
     const hintPrompt = document.createElement("div");
     Object.assign(hintPrompt.style, {
         position: "absolute", bottom: "16px", zIndex: "30",
-        color: "#555", fontSize: "10px", fontFamily: "sans-serif",
+        color: "#888", fontSize: "12px", fontFamily: "sans-serif",
         pointerEvents: "none"
     });
-    hintPrompt.innerHTML = 'Tip: Hold <span style="color:#777;font-weight:bold;">Shift</span> while clicking sidebar cards to compare outputs side-by-side.';
+    hintPrompt.innerHTML = 'Tip: Hold <span style="color:#aaa;font-weight:bold;">Shift</span> while clicking sidebar cards to compare outputs side-by-side.';
     if (isBaseVideo) {
         hintPrompt.style.display = "none";
     }
     container.appendChild(hintPrompt);
 
+    // Track drag actions to prevent mouseup outside the slider from triggering modal exit
+    let wasDragging = false;
+
     container.onclick = (e) => {
         if (e.target === container) {
+            if (wasDragging) {
+                wasDragging = false; // Ignore synthetic click caused by releasing drag on backdrop
+                return;
+            }
             destroy();
         }
     };
@@ -246,20 +260,24 @@ function createComparisonViewer(baseSrc) {
         e.preventDefault(); 
         e.stopPropagation();
         isDragging = true; 
+        wasDragging = false;
         
         const rect = wrapper.getBoundingClientRect();
-        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientX = getClientX(e);
         const percent = ((clientX - rect.left) / rect.width) * 100;
         updateSliderPosition(percent);
     };
     const doDrag = (e) => {
         if (!isDragging) return;
+        wasDragging = true;
         const rect = wrapper.getBoundingClientRect();
-        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientX = getClientX(e);
         const percent = ((clientX - rect.left) / rect.width) * 100;
         updateSliderPosition(percent);
     };
-    const endDrag = () => { isDragging = false; };
+    const endDrag = () => { 
+        isDragging = false; 
+    };
 
     wrapper.addEventListener("mousedown", startDrag);
     wrapper.addEventListener("touchstart", startDrag);
@@ -269,6 +287,14 @@ function createComparisonViewer(baseSrc) {
     window.addEventListener("mouseup", endDrag);
     window.addEventListener("touchend", endDrag);
 
+    const cleanupMedia = (el) => {
+        if (el && el.tagName === "VIDEO") {
+            el.pause();
+            el.src = "";
+            el.load();
+        }
+    };
+
     const destroy = () => {
         window.removeEventListener("mousemove", doDrag);
         window.removeEventListener("touchmove", doDrag);
@@ -280,10 +306,11 @@ function createComparisonViewer(baseSrc) {
             globalKeydownHandler = null;
         }
         
-        videoSyncActive = false;
-        if (syncAnimationFrameId) cancelAnimationFrame(syncAnimationFrameId);
         if (destroyVideoPlaybackFn) destroyVideoPlaybackFn();
 
+        cleanupMedia(mediaA);
+        cleanupMedia(mediaB);
+
         container.remove();
         activeComparisonViewer = null;
     };
@@ -322,8 +349,10 @@ function createComparisonViewer(baseSrc) {
             }
 
             if (isShiftClick) {
-                // Shift+Click: Sideload target image B for comparison split
-                if (mediaB) mediaB.remove();
+                if (mediaB) {
+                    cleanupMedia(mediaB);
+                    mediaB.remove();
+                }
 
                 mediaB = createMediaElement(targetSrc, false);
                 mediaB.style.pointerEvents = "none";
@@ -333,8 +362,8 @@ function createComparisonViewer(baseSrc) {
                 infoText.textContent = "Drag the slider to compare. Shift+Click other card images to update target | Esc to close.";
                 updateSliderPosition(50);
             } else {
-                // Standard Click: Replace the main base reference image entirely
                 if (mediaB) {
+                    cleanupMedia(mediaB);
                     mediaB.remove();
                     mediaB = null;
                 }

js/dragdrop.js

@@ -5,6 +5,7 @@ async function uploadDroppedImageToInput(imageObj) {
     const src = `/view?filename=${encodeURIComponent(imageObj.filename)}&type=${imageObj.type || 'output'}&subfolder=${encodeURIComponent(imageObj.subfolder || '')}`;
     try {
         const response = await fetch(src);
+        if (!response.ok) return null;
         const blob = await response.blob();
         const file = new File([blob], imageObj.filename || "dropped_image.png", { type: blob.type });
         const formData = new FormData();
@@ -12,6 +13,7 @@ async function uploadDroppedImageToInput(imageObj) {
         formData.append("overwrite", "true");
         formData.append("type", "input");
         const uploadRes = await fetch("/upload/image", { method: "POST", body: formData });
+        if (!uploadRes.ok) return null;
         const uploadData = await uploadRes.json();
         return uploadData.name;
     } catch(e) {
@@ -27,7 +29,6 @@ export function setupDragAndDrop() {
     });
 
     document.addEventListener("drop", async (e) => {
-        // Cancel loading entirely and prevent bubbling if dropping inside the sidebar area
         const isSidebarDrop = e.target.closest('.comfyui-sidebar, .comfy-sidebar, [class*="sidebar"]') || 
                               (State.sidebarContainer && State.sidebarContainer.contains(e.target));
         if (isSidebarDrop) {
@@ -81,9 +82,8 @@ export function setupDragAndDrop() {
                             targetNode = canvas.graph.getNodeOnPos((e.clientX - rect.left - canvas.ds.offset[0]) / canvas.ds.scale, (e.clientY - rect.top - canvas.ds.offset[1]) / canvas.ds.scale);
                         }
 
-                        if (targetNode && (targetNode.type.includes("LoadImage") || targetNode.widgets?.some(w => w.name === "image"))) {
-                            // Dropped on a node with image input: Copy/Upload image to inputs
-                            const widget = targetNode.widgets.find(w => w.name === "image");
+                        if (targetNode && (targetNode.type?.includes("LoadImage") || targetNode.widgets?.some(w => w.name === "image"))) {
+                            const widget = targetNode.widgets?.find(w => w.name === "image");
                             if (widget) {
                                 const newFilename = await uploadDroppedImageToInput({ filename, type, subfolder });
                                 if (newFilename) {
@@ -94,14 +94,15 @@ export function setupDragAndDrop() {
                                 }
                             }
                         } else {
-                            // Dropped on empty canvas: Load workflow natively
                             const src = `/view?filename=${encodeURIComponent(filename)}&type=${type}&subfolder=${encodeURIComponent(subfolder)}`;
                             const res = await fetch(src);
-                            const blob = await res.blob();
-                            const file = new File([blob], filename || "workflow.png", { type: blob.type });
+                            if (res.ok) {
+                                const blob = await res.blob();
+                                const file = new File([blob], filename || "workflow.png", { type: blob.type });
 
-                            if (app.handleFile) await app.handleFile(file);
-                            else if (app.canvas?.handleDropItem) app.canvas.handleDropItem({ getAsFile: () => file });
+                                if (app.handleFile) await app.handleFile(file);
+                                else if (app.canvas?.handleDropItem) app.canvas.handleDropItem({ getAsFile: () => file });
+                            }
                         }
                     }
                 }

js/layout.js

@@ -1,4 +1,3 @@
-// layout.js - Fully Fixed & Renamed to 'Hide Junk'
 import { app } from "/scripts/app.js";
 
 const STYLE_ID = "comfy-sidebar-classic-layout-override";
@@ -15,7 +14,6 @@ const CLASSIC_LAYOUT_CSS_MEDIA = `
     transform: none !important;
     z-index: 1010 !important;
 
-    /* Nuke the background rectangle, border, and shadows */
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
@@ -39,23 +37,22 @@ const CLASSIC_LAYOUT_CSS_MEDIA = `
     align-items: center !important;
 }
 
-/* Scale down performance indicators (Crystools) uniformly without breaking their native styling */
+/* Scale down performance indicators (Crystools) uniformly */
 #crysmonitor-monitors-root,
 #crystools-monitors-root,
 .crysmonitor-monitors-container {
-    zoom: 0.8 !important; /* Restored to original 0.8 scale for perfect topbar alignment */
+    zoom: 0.8 !important;
     display: inline-flex !important;
     align-items: center !important;
 }
 
-/* Hide only the user account profile button and its PrimeVue components (initials/icons) */
+/* Hide user account profile button and PrimeVue components */
 img[alt*="User Avatar"],
 img[alt*="user avatar"],
 button:has(img[alt*="User Avatar"]),
 [role="button"]:has(img[alt*="User Avatar"]),
 button:has(img[alt*="user avatar"]),
 [role="button"]:has(img[alt*="user avatar"]),
-/* PrimeVue Avatar component class and attribute selectors */
 .p-avatar,
 [data-pc-name="avatar"],
 button:has(.p-avatar),
@@ -100,6 +97,56 @@ button:has([data-pc-name="avatar"]),
 }
 `;
 
+export function syncStockHistoryAndProgressSettings(enable) {
+    if (!app.ui?.settings) return;
+
+    const dockedVal = !!enable;
+    const progressVal = !enable;
+
+    const QPOV2_ID = "Comfy.Queue.QPOV2";
+
+    try {
+        app.ui.settings.setSettingValue(QPOV2_ID, dockedVal);
+        localStorage.setItem(QPOV2_ID, JSON.stringify(dockedVal));
+    } catch (e) {}
+
+    try {
+        const qpovContainer = document.querySelector('[data-setting-id="Comfy.Queue.QPOV2"]') || 
+                              document.getElementById(QPOV2_ID)?.closest('.setting-item, tr, div');
+        if (qpovContainer) {
+            const toggle = qpovContainer.querySelector('input[type="checkbox"], [role="switch"], .p-toggleswitch');
+            if (toggle) {
+                const isChecked = toggle.checked || 
+                                  toggle.getAttribute('data-p-checked') === 'true' || 
+                                  toggle.classList.contains('p-toggleswitch-checked');
+                if (isChecked !== dockedVal) {
+                    toggle.click();
+                }
+            }
+        }
+    } catch (e) {}
+
+    const progressKey = "Comfy.Queue.ShowRunProgressBar";
+    try {
+        app.ui.settings.setSettingValue(progressKey, progressVal);
+        localStorage.setItem(progressKey, JSON.stringify(progressVal));
+    } catch (e) {}
+
+    try {
+        const progressBarBtn = document.querySelector('[data-testid="show-run-progress-bar-action"]');
+        if (progressBarBtn) {
+            const isChecked = !!progressBarBtn.querySelector('[class*="lucide--check"], .icon-\\[lucide--check\\]');
+            if (isChecked !== progressVal) {
+                progressBarBtn.click();
+            }
+        }
+    } catch (e) {}
+
+    try {
+        window.dispatchEvent(new Event("storage"));
+    } catch (e) {}
+}
+
 export function applyClassicLayout(enable, updateSetting = false) {
     let styleEl = document.getElementById(STYLE_ID);
     
@@ -124,8 +171,6 @@ export function applyClassicLayout(enable, updateSetting = false) {
     }
 }
 
-/* --- Properties Panel Toggle Corrections --- */
-
 let savedButtonData = null;
 let domObserver = null;
 let syncScheduled = false;
@@ -183,7 +228,6 @@ function findActiveQueueIndicator() {
 }
 
 function findNativeExtensionsPanel() {
-    // Exclude the main actionbar-container itself to prevent infinite loop appending bugs
     return Array.from(document.querySelectorAll('.shadow-interface:not(.actionbar-container)'))
         .find(el => el.textContent.toLowerCase().includes('extensions') || el.querySelector('button')?.textContent.toLowerCase().includes('extensions'));
 }
@@ -192,19 +236,17 @@ function updateSidebarTabsVisibility() {
     const sidebar = document.querySelector('.comfyui-sidebar, .comfy-sidebar, .sidebar, [class*="sidebar-nav"], [class*="sidebar"]');
     if (!sidebar) return;
 
-    // Direct mapping from tab settings to their unique class-based HTML icon tags
+    // NodesMap removed from tabIconSelectors
     const tabIconSelectors = {
         "Assets": '[class*="comfy--image-ai-edit"]',
         "Nodes": '[class*="comfy--node"]',
         "Models": '[class*="comfy--ai-model"]',
         "Workflows": '[class*="comfy--workflow"]',
         "Apps": '[class*="lucide--panels-top-left"]',
-        "NodesMap": '[class*="pi-sitemap"]',
         "Templates": '[class*="comfy--template"]'
     };
 
     Object.entries(tabIconSelectors).forEach(([tab, selector]) => {
-        // Read from renamed "Hide Junk" path
         const shouldHide = app.ui?.settings?.getSettingValue(`Comfy Sidebar.Hide Junk.${tab}`) ?? false;
         
         const icon = sidebar.querySelector(selector);
@@ -223,7 +265,6 @@ function updateSidebarTabsVisibility() {
         }
     });
 
-    // Handle "Override Stock Job History Tab" using its renamed setting path
     const hideStockHistory = app.ui?.settings?.getSettingValue("Comfy Sidebar.Hide Junk.Override Stock Job History Tab") ?? false;
     const historyIcon = sidebar.querySelector('[class*="lucide--history"]');
     if (historyIcon) {
@@ -241,17 +282,14 @@ function updateSidebarTabsVisibility() {
 }
 
 function findGraphButton() {
-    // 1. Target elements with Tailwind classes, but IGNORE those inside modal settings/sidebars
     const elements = document.querySelectorAll('.bg-secondary-background.rounded-lg.items-center.inline-flex.pointer-events-auto');
     for (const el of elements) {
-        // Filter out dialogs, sidebar overlays, settings drawers, and modals
         if (el.closest('.p-dialog, .comfy-modal, [role="dialog"], .p-sidebar, .comfy-settings')) {
             continue;
         }
         return el;
     }
 
-    // 2. Same fallback logic, excluding modals
     const fallbacks = document.querySelectorAll('button, .bg-secondary-background');
     for (const el of fallbacks) {
         if (el.closest('.p-dialog, .comfy-modal, [role="dialog"], .p-sidebar, .comfy-settings')) {
@@ -266,13 +304,11 @@ function findGraphButton() {
 }
 
 export function syncClassicLayout() {
-    // Temporarily disconnect observer to cleanly avoid infinite layout feedback loops during DOM rearrangement
     if (domObserver) domObserver.disconnect();
 
     try {
         const isClassicLayoutEnabled = app.ui?.settings?.getSettingValue("Comfy Sidebar.Comfy Layout") ?? false;
 
-        // 1. Handle "Hide Graph Button" Toggle under the renamed "Hide Junk" path
         const hideGraphBtn = app.ui?.settings?.getSettingValue("Comfy Sidebar.Hide Junk.Graph Button") ?? false;
         const graphBtn = findGraphButton();
         if (graphBtn) {
@@ -287,13 +323,11 @@ export function syncClassicLayout() {
             }
         }
 
-        // 2. Handle Native Extensions Button alignment in Classic Layout
         const extensionsPanel = findNativeExtensionsPanel();
         if (extensionsPanel) {
             if (isClassicLayoutEnabled) {
                 const container = findTopbarContainer();
                 if (container && extensionsPanel.parentNode !== container) {
-                    // Save original parent so we can restore it if the layout toggle is turned off
                     if (!extensionsPanel._originalParent) {
                         extensionsPanel._originalParent = extensionsPanel.parentNode;
                         extensionsPanel._originalNextSibling = extensionsPanel.nextSibling;
@@ -302,7 +336,6 @@ export function syncClassicLayout() {
                     extensionsPanel.classList.add("comfy-sidebar-extensions-override");
                 }
             } else {
-                // Restore original placement when classic layout is disabled
                 if (extensionsPanel._originalParent && extensionsPanel.parentNode !== extensionsPanel._originalParent) {
                     extensionsPanel._originalParent.insertBefore(extensionsPanel, extensionsPanel._originalNextSibling || null);
                     extensionsPanel.classList.remove("comfy-sidebar-extensions-override");
@@ -310,7 +343,6 @@ export function syncClassicLayout() {
             }
         }
 
-        // 3. Exit early and clean up overrides if Classic Topbar layout is off
         if (!isClassicLayoutEnabled) {
             const originalBtn = findOriginalButton();
             if (originalBtn && originalBtn.classList.contains("comfy-sidebar-hide-original-properties-btn")) {
@@ -331,7 +363,6 @@ export function syncClassicLayout() {
             return;
         }
 
-        // 4. Handle Active Layout elements synchronization
         const originalBtn = findOriginalButton();
         const container = findTopbarContainer();
         const openState = isPropertiesPanelOpen();
@@ -392,7 +423,6 @@ export function syncClassicLayout() {
             customBtn.style.display = "inline-flex";
         }
 
-        // 5. Handle "0 active" indicator visibility based on history tab settings
         const hideQueueIndicator = app.ui?.settings?.getSettingValue("Comfy Sidebar.Hide Junk.Override Stock Job History Tab") ?? false;
         const indicator = findActiveQueueIndicator();
         if (indicator) {
@@ -412,7 +442,6 @@ export function syncClassicLayout() {
     } catch (err) {
         console.error("Comfy Sidebar: Error inside layout sync routine:", err);
     } finally {
-        // Re-enable mutation monitoring once our changes have successfully updated in the DOM
         if (domObserver) {
             domObserver.observe(document.body, {
                 childList: true,
@@ -483,6 +512,5 @@ export function setupPropertiesPanelToggleFix() {
         subtree: true
     });
 
-    // Run first layout sync now that structural observing is active
     syncClassicLayout();
 }

js/queue.js

@@ -69,6 +69,13 @@ const concludeRun = async (pid, statusStr) => {
     if (State.currentlyActivePromptId === pid) State.currentlyActivePromptId = null;
     
     const st = promptStates.get(pid);
+
+    // FIX: Revoke live preview blob URL to prevent browser memory leaks
+    if (st._previewBlobUrl) {
+        try { URL.revokeObjectURL(st._previewBlobUrl); } catch(e){}
+        delete st._previewBlobUrl;
+    }
+
     st.status = statusStr;
     st.progressText = "";
     st.rendered = false;
@@ -80,7 +87,7 @@ const concludeRun = async (pid, statusStr) => {
         const hItem = await res.json();
         if (hItem && hItem[pid]) {
             if (!st.workflow) st.workflow = hItem[pid].extra_data?.extra_pnginfo?.workflow || null;
-            st.nodeOutputs = hItem[pid].outputs; // Store full outputs dictionary!
+            st.nodeOutputs = hItem[pid].outputs;
             if (st.images.length === 0) st.images = findImagesInOutputs(hItem[pid].outputs, st.workflow);
             st.texts = findTextsInOutputs(hItem[pid].outputs, st.workflow);
         }
@@ -93,7 +100,6 @@ export function setupApiListeners() {
     api.addEventListener("status", syncQueue);
     
     api.addEventListener("execution_start", (e) => {
-        // Auto-sweep cancelled and errored jobs if setting is enabled
         if (app.ui.settings.getSettingValue("Comfy Sidebar.Auto Clear Interrupted") ?? false) {
             const toDelete = [];
             for (const [p, s] of promptStates.entries()) {
@@ -123,7 +129,7 @@ export function setupApiListeners() {
                 workflow: activeWorkspaceWorkflow, startTime: Date.now(), duration: null
             });
         }
-        renderDOMFn(); // Render immediately to prevent pop-in delay!
+        renderDOMFn();
         syncQueue();
     });
 
@@ -167,16 +173,13 @@ export function setupApiListeners() {
             const st = promptStates.get(e.detail.prompt_id);
             const finalImgs = findImagesInOutputs({ [e.detail.node]: e.detail.output }, st.workflow);
             if (finalImgs.length > 0) {
-                // Overwrite with latest images to avoid accumulation across sequential nodes
                 st.images = finalImgs;
             }
             const finalTexts = findTextsInOutputs({ [e.detail.node]: e.detail.output }, st.workflow);
             if (finalTexts.length > 0) {
-                // Overwrite with latest texts to avoid clearing previously set text outputs
                 st.texts = finalTexts;
             }
 
-            // Dynamically capture each executed node's individual outputs
             if (!st.nodeOutputs) st.nodeOutputs = {};
             st.nodeOutputs[e.detail.node] = e.detail.output;
 
@@ -204,7 +207,6 @@ export async function initSessionAndHistory() {
 
     const storedSessionId = localStorage.getItem("comfy_sidebar_backend_session_id");
     if (backendSessionId && backendSessionId !== storedSessionId) {
-        // Session changed (server restarted)! Clear cached memory.
         promptStates.clear();
         cardElements.clear();
         localStorage.removeItem("comfy_sidebar_prompt_states");
@@ -225,7 +227,7 @@ export async function initSessionAndHistory() {
         State.globalOrderCounter++;
         promptStates.set(id, {
             pid: id, status: "completed", images, texts,
-            nodeOutputs: historyData[id].outputs, // Store full outputs dictionary!
+            nodeOutputs: historyData[id].outputs,
             workflow: workflow,
             progressText: "", timestamp: State.globalOrderCounter, rendered: true
         });

js/sidebar.js

@@ -1,14 +1,71 @@
-// sidebar.js - Fully Fixed Real-Time UI Sync (With setTimeout deferred updates)
 import { app } from "/scripts/app.js";
 import { injectStyles } from "./styles.js";
 import { setupDragAndDrop } from "./dragdrop.js";
 import { setupSidebarUI, applySidebarOverride, findOurSidebarButton, setSyncQueue, updateSidebarBadge, renderDOM } from "./ui.js";
 import { setupApiListeners, initSessionAndHistory, syncQueue, setUIDependencies } from "./queue.js";
-import { applyClassicLayout, setupPropertiesPanelToggleFix, syncClassicLayout } from "./layout.js";
+import { applyClassicLayout, setupPropertiesPanelToggleFix, syncClassicLayout, syncStockHistoryAndProgressSettings } from "./layout.js";
 
-// Track initial loading phase to guard against early auto-fired settings triggers
 let isInitialized = false;
 
+// Helper to scan node container for the exact text element rendering the title (Vue Mode)
+function findHeaderByText(parent, text) {
+    if (!text) return null;
+    const cleanText = text.trim();
+    
+    const elements = parent.querySelectorAll("span, div, h1, h2, h3, h4, p, [class*='title'], [class*='text']");
+    for (const el of elements) {
+        if (el.textContent.trim() === cleanText) {
+            if (el.offsetWidth > 0 && el.offsetHeight > 0 && el.offsetWidth < parent.offsetWidth * 0.9) {
+                return el;
+            }
+        }
+    }
+    return null;
+}
+
+function syncNodeVueBadge(node, isIgnored) {
+    const nodeEl = document.querySelector(`.comfy-node[data-node-id="${node.id}"], [data-node-id="${node.id}"]`);
+    if (!nodeEl) return;
+
+    const titleTextNode = findHeaderByText(nodeEl, node.title || node.type);
+    if (!titleTextNode) {
+        const badge = nodeEl.querySelector(".comfy-sidebar-ignore-badge");
+        if (badge && !isIgnored) badge.remove();
+        return;
+    }
+
+    const headerEl = titleTextNode.parentNode;
+    let badge = headerEl.querySelector(".comfy-sidebar-ignore-badge");
+
+    if (isIgnored) {
+        if (!badge) {
+            badge = document.createElement("div");
+            badge.className = "comfy-sidebar-ignore-badge";
+            badge.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
+                    <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/>
+                    <path d="M6.61 6.61A13.52 13.52 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/>
+                    <line x1="2" y1="2" x2="22" y2="22"/>
+                </svg>
+            `;
+            Object.assign(badge.style, {
+                marginLeft: "auto",
+                marginRight: "6px",
+                float: "right",
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "inherit",
+                pointerEvents: "none"
+            });
+            headerEl.appendChild(badge);
+        }
+    } else {
+        if (badge) badge.remove();
+    }
+}
+
 function toggleIgnoreActiveNode() {
     const canvas = app.canvas;
     if (!canvas) return;
@@ -25,43 +82,39 @@ function toggleIgnoreActiveNode() {
     nodes.forEach(node => {
         if (!node.properties) node.properties = {};
         node.properties.ignoreInQueue = !node.properties.ignoreInQueue;
-    });
-    
-    app.graph.setDirtyCanvas(true, true);
-}
+        const isIgnored = !!node.properties.ignoreInQueue;
 
-// Helper to scan node container for the exact text element rendering the title (Vue Mode)
-function findHeaderByText(parent, text) {
-    if (!text) return null;
-    const cleanText = text.replace(/^(🚫|👁️⃠)\s*/, "").trim();
-    
-    // Grab all potential elements that could hold the title text
-    const elements = parent.querySelectorAll("span, div, h1, h2, h3, h4, p, [class*='title'], [class*='text']");
-    for (const el of elements) {
-        if (el.textContent.trim() === cleanText) {
-            // Ensure we are selecting a small title element, not the entire node wrapper
-            if (el.offsetWidth > 0 && el.offsetHeight > 0 && el.offsetWidth < parent.offsetWidth * 0.9) {
-                return el;
+        if (isIgnored) {
+            if (node.boxcolor !== "#ff3333") {
+                node._oldBoxcolor = node.boxcolor || "";
+                node.boxcolor = "#ff3333";
+            }
+        } else {
+            if (node.boxcolor === "#ff3333") {
+                node.boxcolor = node._oldBoxcolor || "";
+                delete node._oldBoxcolor;
             }
         }
-    }
-    return null;
+
+        syncNodeVueBadge(node, isIgnored);
+    });
+    
+    if (app.graph) app.graph.setDirtyCanvas(true, true);
+    if (app.canvas) app.canvas.setDirty(true, true);
 }
 
 app.registerExtension({
     name: "ComfySidebar.ClassicRestore",
     
     init() {
-        // Standard Comfy Queue Settings
         app.ui.settings.addSetting({ id: "Comfy Sidebar.Grid Columns Threshold", name: "Width Threshold for Queue Columns (px)", type: "number", defaultValue: 350 });
         app.ui.settings.addSetting({ id: "Comfy Sidebar.Keep Object Aspect Ratio", name: "If disabled, cards in the queue will be cropped to the same size.", type: "boolean", defaultValue: true });
         app.ui.settings.addSetting({ id: "Comfy Sidebar.Show Pending Count Only", name: "If disabled, each queued job will have a separate individual card", type: "boolean", defaultValue: true });
         app.ui.settings.addSetting({ id: "Comfy Sidebar.Show Working Node Name", name: "Shows the name of the node which is currently in the process", type: "boolean", defaultValue: true });
         app.ui.settings.addSetting({ id: "Comfy Sidebar.Auto Clear Interrupted", name: "Auto-clear cancelled & failed jobs on new generation", type: "boolean", defaultValue: false });
 
-        // Add settings to hide individual sidebar tabs under the "Hide Junk" sub-category
-        // We use setTimeout to let Comfy finish writing the setting value before reading it
-        const sidebarTabs = ["Assets", "Nodes", "Models", "Workflows", "Apps", "NodesMap", "Templates"];
+        // NodesMap removed from sidebarTabs list
+        const sidebarTabs = ["Assets", "Nodes", "Models", "Workflows", "Apps", "Templates"];
         sidebarTabs.forEach(tab => {
             app.ui.settings.addSetting({
                 id: `Comfy Sidebar.Hide Junk.${tab}`,
@@ -69,47 +122,40 @@ app.registerExtension({
                 type: "boolean",
                 defaultValue: false,
                 onChange: () => {
-                    setTimeout(() => {
-                        if (typeof syncClassicLayout === "function") syncClassicLayout();
-                    }, 0);
+                    setTimeout(() => { syncClassicLayout(); }, 0);
                 }
             });
         });
 
-        // Group the Stock History Tab override into "Hide Junk"
         app.ui.settings.addSetting({ 
             id: "Comfy Sidebar.Hide Junk.Override Stock Job History Tab", 
-            name: "Replaces the stock Job History sidebar with Comfy Queue", 
+            name: "Replace the stock Job History sidebar with Comfy Queue", 
             type: "boolean", 
             defaultValue: false,
-            onChange: () => {
-                setTimeout(() => {
-                    if (typeof syncClassicLayout === "function") syncClassicLayout();
-                }, 0);
+            onChange: (value) => {
+                if (isInitialized && app.ui && app.ui.settings) {
+                    syncStockHistoryAndProgressSettings(value);
                 }
-            });
+                setTimeout(() => { syncClassicLayout(); }, 0);
+            }
+        });
 
-        // Add the toggle setting for Graph Button under "Hide Junk"
         app.ui.settings.addSetting({ 
             id: "Comfy Sidebar.Hide Junk.Graph Button", 
             name: "Hide floating 'Graph' (Workflow/Node Map) button", 
             type: "boolean", 
             defaultValue: false,
             onChange: () => {
-                setTimeout(() => {
-                    if (typeof syncClassicLayout === "function") syncClassicLayout();
-                }, 0);
+                setTimeout(() => { syncClassicLayout(); }, 0);
             }
         });
 
-        // Add the toggle setting for Classic / Comfy Layout
         app.ui.settings.addSetting({
             id: "Comfy Sidebar.Comfy Layout",
             name: "Places the controls and the open workflow tabs on a single unified top bar",
             type: "boolean",
             defaultValue: false,
             onChange: (value) => {
-                // Only update the native layout configuration if setup() initialization has fully concluded
                 if (isInitialized) {
                     applyClassicLayout(value, true);
                 }
@@ -120,46 +166,40 @@ app.registerExtension({
     async setup() {
         if (!app.extensionManager || !app.extensionManager.registerSidebarTab) return;
 
-        // Apply saved layout configuration on startup (never force overwrite on launch)
         const isClassicLayoutEnabled = app.ui.settings.getSettingValue("Comfy Sidebar.Comfy Layout") ?? false;
         applyClassicLayout(isClassicLayoutEnabled, false);
+
+        const isHistoryOverrideEnabled = app.ui.settings.getSettingValue("Comfy Sidebar.Hide Junk.Override Stock Job History Tab") ?? false;
+        if (isHistoryOverrideEnabled) {
+            syncStockHistoryAndProgressSettings(true);
+        }
         
-        // Finalize initialization to open write pathways for settings-panel adjustments
         isInitialized = true;
 
-        // Run properties panel toggle correction
         setupPropertiesPanelToggleFix();
 
-        // Safely resolve circular dependencies using Dependency Injection Hooks
         setSyncQueue(syncQueue);
         setUIDependencies(renderDOM, updateSidebarBadge);
 
-        // 1. Initialize DOM Independent Services
         injectStyles();
         setupDragAndDrop();
 
-        // 2. Initialize UI Hierarchy
         const sidebarContainer = setupSidebarUI();
         
-        // 3. Connect API Hooks
         setupApiListeners();
         
-        // 4. Connect Storage and History Sync
         await initSessionAndHistory();
 
-        // 5. Connect UI Keyboard & Override Hacks
         document.addEventListener("keydown", (e) => {
             const activeEl = document.activeElement;
             if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable || activeEl.tagName === "SELECT")) return;
             
-            // Toggle Queue open/close (Q)
             if (e.key.toLowerCase() === "q" && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
                 e.preventDefault(); e.stopPropagation();
                 const ourBtn = findOurSidebarButton();
                 if (ourBtn) ourBtn.click();
             }
 
-            // Toggle Ignore Node in Queue (Ctrl + Q)
             if (e.key.toLowerCase() === "q" && (e.ctrlKey || e.metaKey)) {
                 e.preventDefault(); e.stopPropagation();
                 toggleIgnoreActiveNode();
@@ -169,87 +209,35 @@ app.registerExtension({
         setInterval(() => {
             applySidebarOverride();
             
-            // Sync ignoreInQueue visual states across both canvas and Vue DOM modes dynamically
             if (app.graph && app.graph._nodes) {
-                app.graph._nodes.forEach(node => {
-                    if (!node.properties) node.properties = {};
-                    const isIgnored = !!node.properties.ignoreInQueue;
-                    
-                    // 1. Sweep away legacy title emoji residue to keep graph titles perfectly clean
-                    if (node.title && (node.title.startsWith("🚫 ") || node.title.startsWith("👁️⃠ "))) {
-                        node.title = node.title.replace(/^(🚫|👁️⃠)\s*/, "");
-                        app.graph.setDirtyCanvas(true, true);
-                    }
+                const hasIgnoredOrColoredNodes = app.graph._nodes.some(n => n.properties?.ignoreInQueue || n.boxcolor === "#ff3333");
+                const hasBadgesInDOM = !!document.querySelector(".comfy-sidebar-ignore-badge");
 
-                    // 2. Classic LiteGraph Native Glowing Border Sync
-                    if (isIgnored) {
-                        if (node.boxcolor !== "#ff3333") {
-                            node._oldBoxcolor = node.boxcolor || "";
-                            node.boxcolor = "#ff3333";
-                            app.graph.setDirtyCanvas(true, true);
-                        }
-                    } else {
-                        if (node.boxcolor === "#ff3333") {
-                            node.boxcolor = node._oldBoxcolor || "";
-                            delete node._oldBoxcolor;
-                            app.graph.setDirtyCanvas(true, true);
-                        }
-                    }
+                if (hasIgnoredOrColoredNodes || hasBadgesInDOM) {
+                    app.graph._nodes.forEach(node => {
+                        if (!node.properties) node.properties = {};
+                        const isIgnored = !!node.properties.ignoreInQueue;
 
-                    // 3. Nodes 2.0 DOM Sibling Support (Vue Mode)
-                    const nodeEl = document.querySelector(`.comfy-node[data-node-id="${node.id}"], [data-node-id="${node.id}"]`);
-                    if (nodeEl) {
-                        // Dynamically locate the node header container by searching for the node title text element
-                        const titleTextNode = findHeaderByText(nodeEl, node.title || node.type);
-                        
-                        if (titleTextNode) {
-                            const headerEl = titleTextNode.parentNode;
-                            let badge = headerEl.querySelector(".comfy-sidebar-ignore-badge");
-                            
-                            if (isIgnored) {
-                                if (!badge) {
-                                    badge = document.createElement("div");
-                                    badge.className = "comfy-sidebar-ignore-badge";
-                                    // Custom SVG crossed-out eye
-                                    badge.innerHTML = `
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                                            <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
-                                            <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/>
-                                            <path d="M6.61 6.61A13.52 13.52 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/>
-                                            <line x1="2" y1="2" x2="22" y2="22"/>
-                                        </svg>
-                                    `;
-                                    // Flows natively inside the parent header block with automatic flex alignment
-                                    Object.assign(badge.style, {
-                                        marginLeft: "auto",
-                                        marginRight: "6px",
-                                        float: "right",
-                                        display: "inline-flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "inherit", // Inherits color of parent text (automatically morphs on highlight!)
-                                        pointerEvents: "none"
-                                    });
-                                    headerEl.appendChild(badge);
-                                }
-                            } else {
-                                if (badge) {
-                                    badge.remove();
-                                }
+                        if (isIgnored) {
+                            if (node.boxcolor !== "#ff3333") {
+                                node._oldBoxcolor = node.boxcolor || "";
+                                node.boxcolor = "#ff3333";
+                                app.graph.setDirtyCanvas(true, true);
                             }
                         } else {
-                            // Fallback cleanup if the title text element is temporarily unmounted
-                            const badge = nodeEl.querySelector(".comfy-sidebar-ignore-badge");
-                            if (badge && !isIgnored) {
-                                badge.remove();
+                            if (node.boxcolor === "#ff3333") {
+                                node.boxcolor = node._oldBoxcolor || "";
+                                delete node._oldBoxcolor;
+                                app.graph.setDirtyCanvas(true, true);
                             }
                         }
-                    }
-                });
+
+                        syncNodeVueBadge(node, isIgnored);
+                    });
+                }
             }
         }, 500);
 
-        // 6. Final Registration
         app.extensionManager.registerSidebarTab({ 
             id: "classic-comfy-sidebar", 
             icon: "pi pi-images", 

js/state.js

@@ -1,7 +1,6 @@
 export const promptStates = new Map();
 export const cardElements = new Map();
 
-// Global shared variables
 export const State = {
     currentSearchQuery: "",
     globalOrderCounter: 0,
@@ -34,13 +33,13 @@ export function saveStatesToLocalStorage() {
         const serializable = [];
         for (const [pid, state] of promptStates.entries()) {
             const cleanedImages = (state.images || []).map(img => {
-                if (img.url && img.url.startsWith("blob:")) return null; // Skip blob URLs
+                if (img.url && img.url.startsWith("blob:")) return null;
                 return img;
             }).filter(Boolean);
 
             serializable.push({
                 pid: state.pid, status: state.status, images: cleanedImages, texts: state.texts || [],
-                nodeOutputs: state.nodeOutputs, // Persist node level outputs
+                nodeOutputs: state.nodeOutputs,
                 workflow: state.workflow, progress: state.progress || 0, queueNumber: state.queueNumber,
                 progressText: state.progressText || "", timestamp: state.timestamp,
                 activeNodeName: state.activeNodeName || "", rendered: state.rendered || false,
@@ -68,5 +67,4 @@ export function loadStatesFromLocalStorage() {
     }
 }
 
-// Load instantly and synchronously on script import to prevent race conditions during early renders!
 loadStatesFromLocalStorage();

js/styles.js

@@ -1,6 +1,7 @@
-// styles.js
 export function injectStyles() {
+    if (document.getElementById("comfy-sidebar-styles")) return;
     const style = document.createElement("style");
+    style.id = "comfy-sidebar-styles";
     style.textContent = `
         .comfy-sidebar-card {
             background: var(--comfy-input-bg, #181818);
@@ -35,24 +36,23 @@ export function injectStyles() {
             padding: 2px 4px; border-radius: 3px; pointer-events: none; z-index: 5; color: #fff;
         }
 
-        /* --- Custom Queue Cancel Button to Mimic ComfyUI Native Destructive Button --- */
         .comfy-sidebar-queue-cancel-btn {
             display: none;
             align-items: center !important;
             justify-content: center !important;
             width: 32px !important;
             height: 32px !important;
-            background-color: #7f1d1d !important; /* Native deep red */
-            color: #e2e8f0 !important; /* Native slate white icon */
-            font-size: 11px !important; /* Muted native cross size */
-            border-radius: 6px !important; /* Native corner rounding */
+            background-color: #7f1d1d !important;
+            color: #e2e8f0 !important;
+            font-size: 11px !important;
+            border-radius: 6px !important;
             cursor: pointer !important;
             transition: background-color 0.15s ease, color 0.15s ease !important;
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
         }
 
         .comfy-sidebar-queue-cancel-btn:hover {
-            background-color: #991b1b !important; /* Slightly brighter red on hover */
+            background-color: #991b1b !important;
             color: #ffffff !important;
         }
     `;

js/ui.js

@@ -8,7 +8,6 @@ import { showFullscreenPreview } from "./comparison.js";
 export let syncQueueFn = async () => {};
 export function setSyncQueue(fn) { syncQueueFn = fn; }
 
-// Resets any stale hover states when transitioning between submenus and the main queue
 function resetAllCardHoverStates() {
     for (const cardObj of cardElements.values()) {
         if (cardObj.hoverPanel) cardObj.hoverPanel.style.display = "none";
@@ -16,12 +15,10 @@ function resetAllCardHoverStates() {
     }
 }
 
-// Traverses node execution metadata to resolve the exact node ID that generated a specific image
 function findNodeIdForImage(state, img) {
     if (!state || !state.nodeOutputs || !img) return null;
     for (const nodeId in state.nodeOutputs) {
         const out = state.nodeOutputs[nodeId];
-        // Safely check both gifs, images, or videos under this specific node
         for (const key in out) {
             const val = out[key];
             if (Array.isArray(val)) {
@@ -145,7 +142,6 @@ export function setupSidebarUI() {
     titleGroup.appendChild(title);
     standardHeader.appendChild(titleGroup);
 
-    // Dynamic Compact Actions Group
     const actionsGroup = document.createElement("div");
     Object.assign(actionsGroup.style, { display: "flex", gap: "6px", alignItems: "center" });
 
@@ -173,7 +169,7 @@ export function setupSidebarUI() {
             if (!isPending) {
                 isPending = true;
                 Object.assign(btn.style, { color: "#fff", background: hoverColor, borderColor: hoverColor, boxShadow: `0 0 8px ${hoverColor}80` });
-                timeout = setTimeout(reset, 1500); // 1.5s to confirm
+                timeout = setTimeout(reset, 1500);
             } else {
                 reset();
                 await onClickFn();
@@ -237,14 +233,12 @@ export function setupSidebarUI() {
     Object.assign(State.cardStack.style, { flex: "1", overflowY: "auto", scrollbarWidth: "thin", display: "block" });
     State.sidebarContainer.appendChild(State.cardStack);
 
-    // Global background click handler: return to main queue if clicking empty space of the entire container
     State.sidebarContainer.onclick = (e) => {
         if (State.activeSubmenuPromptId || State.activeSubmenuBatchImages) {
-            // Stop closure if we clicked on standard interactive elements (images, buttons, spans, cancels)
             if (e.target.closest('img, video, .comfy-sidebar-card-timer, .pi-times, .comfy-sidebar-left-hover-btn, .comfy-sidebar-queue-cancel-btn, button, span')) return;
             State.activeSubmenuPromptId = null;
             State.activeSubmenuBatchImages = null;
-            resetAllCardHoverStates(); // Instantly wipe stale hover indicators on exit click
+            resetAllCardHoverStates();
             renderDOM();
             document.removeEventListener("click", handleGlobalClick, true);
             globalClickRegistered = false;
@@ -258,7 +252,9 @@ export function setupSidebarUI() {
         State.cardStack.style.columnGap = cols > 1 ? "12px" : "0";
     }).observe(State.sidebarContainer);
 
+    // Optimized: Early-exit timer updates when no tasks are currently active
     setInterval(() => {
+        if (State.currentlyActivePromptId === null) return;
         for (const [pid, state] of promptStates.entries()) {
             if (state.status === "active" && state.startTime) {
                 const cardObj = cardElements.get(pid);
@@ -270,7 +266,6 @@ export function setupSidebarUI() {
     return State.sidebarContainer;
 }
 
-// Unified image batch pagination renderer (supports standard queue cards & both explorer submenus)
 function renderCardImages(cardObj, state, keepAspect) {
     cardObj.currentImageIndex = cardObj.currentImageIndex || 0;
     if (cardObj.currentImageIndex >= state.images.length) {
@@ -289,7 +284,6 @@ function renderCardImages(cardObj, state, keepAspect) {
     const src = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
     const isVideo = isVideoFormat(src);
 
-    // Find or create the native wrapper
     let wrapper = cardObj.grid.querySelector(".comfy-sidebar-media-wrapper");
     if (!wrapper) {
         cardObj.grid.innerHTML = "";
@@ -299,7 +293,6 @@ function renderCardImages(cardObj, state, keepAspect) {
         cardObj.grid.appendChild(wrapper);
     }
 
-    // Find or create the media tag in-place
     let mediaEl = wrapper.querySelector("img, video");
     const needsRebuild = !mediaEl || (isVideo !== (mediaEl.tagName.toLowerCase() === "video"));
 
@@ -319,13 +312,11 @@ function renderCardImages(cardObj, state, keepAspect) {
 
     cardObj.firstImgElement = mediaEl;
 
-    // Binds interactive event listeners. Passes shiftKey context natively to support split side-loading
     mediaEl.onclick = (ev) => { 
         ev.stopPropagation(); 
         showFullscreenPreview([src], ev.shiftKey); 
     };
 
-    // Shared dimensions layout compiler
     const applyDimensions = (width, height) => {
         if (keepAspect && width && height) {
             mediaEl.style.aspectRatio = `${width} / ${height}`;
@@ -336,7 +327,6 @@ function renderCardImages(cardObj, state, keepAspect) {
         }
     };
 
-    // Bind dimensions hooks and event listeners EVERY run (for recycled elements & fast cache hits!)
     if (isVideo) { 
         mediaEl.muted = true; 
         mediaEl.playsInline = true; 
@@ -382,7 +372,6 @@ function renderCardImages(cardObj, state, keepAspect) {
             mediaEl.style.cursor = "zoom-in";
             
             const dragStartHandler = (e) => {
-                State.currentDraggedImgData = { ...img, workflow: state.workflow };
                 try {
                     e.dataTransfer.setData("text/uri-list", src);
                     e.dataTransfer.setData("text/plain", src);
@@ -406,7 +395,6 @@ function renderCardImages(cardObj, state, keepAspect) {
         if (playIcon) playIcon.remove();
     }
 
-    // Smooth in-memory source swapping for blob live previews
     const currentSrc = mediaEl.getAttribute("src") || mediaEl.src;
     if (currentSrc !== src && currentSrc !== (currentSrc + "#t=0.001")) {
         if (src.startsWith("blob:") && !isVideo) {
@@ -425,7 +413,6 @@ function renderCardImages(cardObj, state, keepAspect) {
             mediaEl.src = isVideo ? src + "#t=0.001" : src;
         }
     } else {
-        // If the source is already correct, make sure we still force dimensions calculations
         if (isVideo) {
             if (mediaEl.videoWidth) applyDimensions(mediaEl.videoWidth, mediaEl.videoHeight);
         } else {
@@ -433,7 +420,6 @@ function renderCardImages(cardObj, state, keepAspect) {
         }
     }
 
-    // Sync batch pagination controller overlay
     let navBar = wrapper.querySelector(".comfy-sidebar-batch-navbar");
     if (state.images.length > 1) {
         if (!navBar) {
@@ -462,15 +448,15 @@ function renderCardImages(cardObj, state, keepAspect) {
             label.style.cursor = "pointer";
             label.title = "View all images in this batch";
             
-            // Open the dynamic batch explorer explorer view when the middle counter label is clicked
             label.onclick = (ev) => {
                 ev.stopPropagation();
                 State.activeSubmenuBatchImages = {
                     pid: state.pid || cardObj.element.id.replace("card-", ""),
                     images: state.images,
-                    workflow: state.workflow
+                    workflow: state.workflow,
+                    nodeOutputs: state.nodeOutputs
                 };
-                resetAllCardHoverStates(); // Prevent ghost hover handles
+                resetAllCardHoverStates();
                 renderDOM();
             };
 
@@ -496,7 +482,6 @@ function renderCardImages(cardObj, state, keepAspect) {
 
 let globalClickRegistered = false;
 
-// Global document mousedown-capturer to reliably trigger click-aways outside the sidebar
 const handleGlobalClick = (e) => {
     if (!State.activeSubmenuPromptId && !State.activeSubmenuBatchImages) {
         document.removeEventListener("click", handleGlobalClick, true);
@@ -510,7 +495,7 @@ const handleGlobalClick = (e) => {
     if (!clickedInsideSidebar && !clickedFullscreenOverlay) {
         State.activeSubmenuPromptId = null;
         State.activeSubmenuBatchImages = null;
-        resetAllCardHoverStates(); // Reset stale overlays when clicking away
+        resetAllCardHoverStates();
         renderDOM();
         document.removeEventListener("click", handleGlobalClick, true);
         globalClickRegistered = false;
@@ -542,13 +527,12 @@ export function renderDOM() {
                 transition: "all 0.15s ease",
                 boxShadow: "0 1px 2px rgba(0, 0, 0, 0.3)",
                 zIndex: "20",
-                transform: "translateZ(0)" // Forces a GPU compositor stacking context to prevent video clipping
+                transform: "translateZ(0)"
             });
             btn.onmouseenter = () => { btn.style.backgroundColor = "rgba(0, 0, 0, 0.95)"; btn.style.color = "#fff"; };
             btn.onmouseleave = () => { btn.style.backgroundColor = "rgba(0, 0, 0, 0.75)"; btn.style.color = "#e2e8f0"; };
         };
 
-        // --- SUBMENU 2: BATCH IMAGES EXPLORER ---
         if (State.activeSubmenuBatchImages) {
             const batchInfo = State.activeSubmenuBatchImages;
 
@@ -599,7 +583,6 @@ export function renderDOM() {
                         fontSize: "11px", opacity: "0.5", textAlign: "center", padding: "12px", marginTop: "12px", userSelect: "none"
                     });
 
-                    // Symmetrical hover panel on the right with ONLY the Download Object button
                     const hoverPanel = document.createElement("div");
                     Object.assign(hoverPanel.style, {
                         position: "absolute", bottom: "4px", right: "4px", display: "none",
@@ -612,7 +595,6 @@ export function renderDOM() {
                     styleActionBtn(btnImg);
                     hoverPanel.appendChild(btnImg);
 
-                    // Symmetrical left hover panel containing ONLY btnFocus
                     const leftHoverPanel = document.createElement("div");
                     Object.assign(leftHoverPanel.style, {
                         position: "absolute", bottom: "4px", left: "4px", display: "none",
@@ -650,7 +632,6 @@ export function renderDOM() {
                     a.click();
                 };
 
-                // Focus/center target node inside Batch Explorer Submenu
                 const nodeId = findNodeIdForImage(batchInfo, img);
                 if (nodeId) {
                     cardObj.btnFocus.style.display = "inline-flex";
@@ -666,7 +647,7 @@ export function renderDOM() {
                     cardObj.btnFocus.style.display = "none";
                 }
 
-                renderCardImages(cardObj, { pid: batchInfo.pid, images: [img], workflow: batchInfo.workflow }, keepAspect);
+                renderCardImages(cardObj, { pid: batchInfo.pid, images: [img], workflow: batchInfo.workflow, nodeOutputs: batchInfo.nodeOutputs }, keepAspect);
 
                 targetElements.push(cardObj.element);
             });
@@ -676,7 +657,6 @@ export function renderDOM() {
             return;
         }
 
-        // --- SUBMENU 1: WORKFLOW OUTPUTS EXPLORER ---
         if (State.activeSubmenuPromptId) {
             const st = promptStates.get(State.activeSubmenuPromptId);
             if (!st) {
@@ -685,7 +665,6 @@ export function renderDOM() {
                 return;
             }
 
-            // Sync Header UI State for the explorer view
             if (headerTitle) {
                 headerTitle.textContent = `Outputs of #${State.activeSubmenuPromptId}`;
                 headerTitle.style.cursor = "pointer";
@@ -735,7 +714,6 @@ export function renderDOM() {
                         fontSize: "11px", opacity: "0.5", textAlign: "center", padding: "12px", marginTop: "12px", userSelect: "none"
                     });
 
-                    // Action overlay on hover containing only Download Object
                     const hoverPanel = document.createElement("div");
                     Object.assign(hoverPanel.style, {
                         position: "absolute", bottom: "4px", right: "4px", display: "none",
@@ -748,7 +726,6 @@ export function renderDOM() {
                     styleActionBtn(btnImg);
                     hoverPanel.appendChild(btnImg);
 
-                    // Symmetrical left hover panel containing ONLY btnFocus
                     const leftHoverPanel = document.createElement("div");
                     Object.assign(leftHoverPanel.style, {
                         position: "absolute", bottom: "4px", left: "4px", display: "none",
@@ -789,7 +766,6 @@ export function renderDOM() {
                         });
                     };
 
-                    // Focus/center target node inside Workflow outputs Submenu
                     cardObj.btnFocus.onclick = (ev) => {
                         ev.stopPropagation();
                         const node = app.graph.getNodeById(Number(out.nodeId));
@@ -799,7 +775,7 @@ export function renderDOM() {
                         }
                     };
 
-                    renderCardImages(cardObj, { pid: st.pid, images: out.images, workflow: st.workflow }, keepAspect);
+                    renderCardImages(cardObj, { pid: st.pid, images: out.images, workflow: st.workflow, nodeOutputs: st.nodeOutputs }, keepAspect);
                 } else {
                     cardObj.btnImg.style.display = "none";
                     cardObj.placeholder.style.display = "block";
@@ -814,7 +790,6 @@ export function renderDOM() {
             return;
         }
 
-        // --- STANDARD QUEUE RENDER LOGIC ---
         if (headerTitle) {
             headerTitle.textContent = "Queue";
             headerTitle.style.cursor = "default";
@@ -862,7 +837,6 @@ export function renderDOM() {
                 pt.appendChild(pb);
                 const statusText = document.createElement("div"); Object.assign(statusText.style, { fontSize: "11px", opacity: "0.9", color: "#3b82f6", textAlign: "center", marginTop: "6px", display: "none", fontWeight: "bold" });
                 
-                // Absolute Vertical Actions Panel on the right of the card
                 const hoverPanel = document.createElement("div"); 
                 Object.assign(hoverPanel.style, { 
                     position: "absolute", bottom: "4px", right: "4px", display: "none", 
@@ -873,7 +847,6 @@ export function renderDOM() {
                 const btnJson = document.createElement("span"); btnJson.className = "pi pi-file"; btnJson.title = "Download JSON"; styleActionBtn(btnJson);
                 const btnDel = document.createElement("span"); btnDel.className = "pi pi-trash"; btnDel.title = "Delete Card"; styleActionBtn(btnDel);
 
-                // Absolute Vertical Left Actions Panel containing btnFocus and leftHoverBtn
                 const leftHoverPanel = document.createElement("div"); 
                 Object.assign(leftHoverPanel.style, { 
                     position: "absolute", bottom: "4px", left: "4px", display: "none", 
@@ -893,7 +866,7 @@ export function renderDOM() {
                 leftHoverBtn.onclick = (ev) => {
                     ev.stopPropagation();
                     State.activeSubmenuPromptId = state.pid;
-                    resetAllCardHoverStates(); // Reset standard sidebar hover states before opening submenu
+                    resetAllCardHoverStates();
                     renderDOM();
                 };
 
@@ -909,7 +882,6 @@ export function renderDOM() {
                         cardObj.hoverPanel.style.display = "flex";
                         cardObj.leftHoverPanel.style.display = "flex";
 
-                        // Focus/Center the exact node that generated the currently active displayed image
                         const currentImg = state.images[cardObj.currentImageIndex || 0];
                         const nodeId = findNodeIdForImage(state, currentImg);
                         if (nodeId) {
@@ -926,7 +898,6 @@ export function renderDOM() {
                             cardObj.btnFocus.style.display = "none";
                         }
 
-                        // Show explorer view button if this run yielded multiple node outputs, or if it was interrupted/failed but has some outputs
                         const outputs = getRunOutputs(state.nodeOutputs, state.workflow);
                         const isInterrupted = state.status === "cancelled" || state.status === "error";
                         if (outputs.length > 1 || (outputs.length > 0 && isInterrupted)) {
@@ -942,8 +913,6 @@ export function renderDOM() {
                 });
                 
                 card.addEventListener("dragstart", (e) => {
-                    // Custom dragstart is used for JSON-only or unfinished workflows to supply a local DownloadURL.
-                    // For completed image cards, dragging is handled natively by the browser on the child <img> tag.
                     const isUnfinished = state.status && state.status !== "completed";
                     if (state.workflow && (!state.images || state.images.length === 0 || isUnfinished)) {
                         if (cardObj.firstImgElement) e.dataTransfer.setDragImage(cardObj.firstImgElement, 15, 15);
@@ -956,14 +925,12 @@ export function renderDOM() {
                         e.dataTransfer.effectAllowed = "copy";
                     }
                 });
-                cardObj.element.id = `card-${state.pid}`; // set ID helper
+                cardObj.element.id = `card-${state.pid}`;
                 cardElements.set(state.pid, cardObj);
             }
 
             cardObj.element.className = `comfy-sidebar-card ${state.status}`;
             
-            // Native drag isolation: completely remove draggable flags on image containers for finished cards.
-            // This exposes the child <img> tag directly to Chrome's native filesystem drag APIs.
             const isUnfinished = state.status && state.status !== "completed";
             if (state.images && state.images.length > 0 && !isUnfinished) {
                 cardObj.element.removeAttribute("draggable");
@@ -995,7 +962,7 @@ export function renderDOM() {
                 cardObj.cancelBtn.style.display = "flex";
                 cardObj.cancelBtn.onclick = async (ev) => { 
                     ev.stopPropagation(); 
-                    await api.interrupt(); // Natively interrupts current execution
+                    await api.interrupt();
                     await syncQueueFn(); 
                 };
             } else {
@@ -1029,7 +996,7 @@ export function renderDOM() {
                     isDeletePending = true; 
                     Object.assign(cardObj.btnDel.style, { 
                         color: "#fff", 
-                        backgroundColor: "#dc3545" // Changes to solid red on warning confirmation
+                        backgroundColor: "#dc3545"
                     }); 
                     cardObj.btnDel.title = "Click again to confirm deletion";
                     deleteTimeout = setTimeout(resetDeleteBtn, 1000);
@@ -1053,7 +1020,6 @@ export function renderDOM() {
             }
 
             if (state.images.length === 0) {
-                // Correctly display accumulated texts (like workflow prompts) while running as requested
                 if (state.texts && state.texts.length > 0) {
                     cardObj.placeholder.textContent = state.texts.join("\n"); Object.assign(cardObj.placeholder.style, { whiteSpace: "pre-wrap", textAlign: "left" });
                 } else {

pyproject.toml

@@ -0,0 +1,13 @@
+[project]
+name = "comfy-sidebar"
+description = "A custom queue sidebar and image comparison extension that reintroduces and improves a sidebar queue menu and unified compact topbar layout for ComfyUI."
+version = "1.2.7"
+license = { file = "LICENSE" }
+dependencies = []
+
+[project.urls]
+Repository = "https://github.com/m0rtus59/ComfyUI-ComfySidebar"
+
+[tool.comfy]
+PublisherId = "soundslikethunder"
+DisplayName = "Comfy Sidebar"