Fixed layout for user avatar and new extension manager

Updated the instructions for using the preview compare slider to include the shift+click action.

README.md

@@ -11,8 +11,10 @@ A lightweight, high-performance ComfyUI extension that replaces the cluttered st
 * **Quick Save Buttons**: Dedicated interactive shortcuts appear on hover, allowing you to instantly download generation outputs or export exact workflow JSON files with a single click.
 * **Compact Adaptive Design**: A clean, smart layout that automatically balances single or multi-column grids based on your sidebar width. It maximizes viewable content and respects your active screen area without wasting precious space.
 * **Live Queue Tracking**: Stay informed on your server state. Includes a visual progress bar that tracks generations dynamically and displays the exact node title currently being executed.
-* **[NEW]** A compact topbar layout displaying both workflow tabs and the control panel on a single unified top bar. See the 'Comfy Layout' toggle in the settings.
-* **[NEW]** Added toggles to hide buttons you don't need from the side panel.
+* A compact topbar layout displaying both workflow tabs and the control panel on a single unified top bar. See the 'Comfy Layout' toggle in the settings.
+* Toggles to hide buttons you don't need from the side panel.
+* **[NEW]** Preview compare slider - just click the result image preview in the sidebar, and then `Shift+Click` another to load it alongside the first one for pixel by pixel comparison. 
+* **[NEW]** Prevent selected nodes from showing the output in the queue bar and intermediate results. `Ctrl+Q` to toggle. 
 
 <img width="385" height="336" alt="image" src="https://github.com/user-attachments/assets/743fbf85-9281-4561-9dd0-cd9af4d8c0e4" />
 
@@ -31,8 +33,10 @@ Restart your ComfyUI server and refresh the browser tab.
 
 ## ⚙️ Configuration
 
-Additional tweaks are seamlessly integrated into the standard ComfyUI Settings panel. From there, you can adjust thresholds or fully replace the stock V2 panel by enabling options like **"Override Stock Job History Tab"**.
+See additional tweaks in ComfyUI settings menu > Comfy Sidebar. From there, you can adjust the layout or fully replace the stock V2 panel by enabling options like **"Comfy Layout"** and **"Replace the stock Job History sidebar with Comfy Queue"**.
 
 ## ⌨️ Shortcuts
 
 * **`Q`**: Instantly toggles the sidebar panel open or closed. Safely ignores inputs if you are currently typing inside a text field, input area, or combo box.
+* **`Ctrl+Q on a selected node`**: Sets the node to be ignored in the sidebar panel results.
+* **`Click`**  on a card to enter preview. **`Shift+Click`** on another card in preview to enter compare mode.

js/comparison.js

@@ -0,0 +1,358 @@
+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;
+
+const createMediaElement = (src, muted = false) => {
+    const isVideo = isVideoFormat(src);
+    const el = isVideo ? document.createElement("video") : document.createElement("img");
+    if (isVideo) {
+        el.muted = muted;
+        el.playsInline = true;
+        el.autoplay = true;
+        el.loop = true;
+        el.controls = false; 
+    }
+    Object.assign(el.style, {
+        gridArea: "1 / 1", maxWidth: "100%", maxHeight: "80vh",
+        objectFit: "contain", pointerEvents: "none"
+    });
+    el.src = isVideo ? src + "#t=0.001" : src;
+    return el;
+};
+
+const setupVideoPlayback = (vid, container) => {
+    if (!vid) return;
+
+    const onMetaLoaded = () => {
+        vid.play().catch(()=>{});
+    };
+    vid.addEventListener("loadedmetadata", onMetaLoaded);
+    if (vid.readyState >= 1) onMetaLoaded();
+
+    const controlBar = document.createElement("div");
+    Object.assign(controlBar.style, {
+        position: "absolute", bottom: "16px", left: "50%",
+        display: "flex", alignItems: "center", gap: "12px", background: "rgba(10,10,10,0.85)",
+        padding: "8px 16px", borderRadius: "8px", zIndex: "40", fontSize: "11px",
+        fontFamily: "monospace", color: "#eee", width: "80%", maxWidth: "500px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.5)", transform: "translate3d(-50%, 0, 0)",
+        pointerEvents: "auto"
+    });
+
+    const playBtn = document.createElement("span");
+    playBtn.className = vid.paused ? "pi pi-play" : "pi pi-pause";
+    playBtn.style.cursor = "pointer";
+    playBtn.style.fontSize = "14px";
+    playBtn.onclick = (e) => {
+        e.stopPropagation();
+        if (vid.paused) {
+            vid.play().catch(()=>{});
+            playBtn.className = "pi pi-pause";
+        } else {
+            vid.pause();
+            playBtn.className = "pi pi-play";
+        }
+    };
+
+    const scrubberContainer = document.createElement("div");
+    Object.assign(scrubberContainer.style, {
+        flex: "1", height: "4px", background: "#444", borderRadius: "2px",
+        position: "relative", cursor: "pointer"
+    });
+    const scrubberFill = document.createElement("div");
+    Object.assign(scrubberFill.style, {
+        width: "0%", height: "100%", background: "#3b82f6", borderRadius: "2px"
+    });
+    scrubberContainer.appendChild(scrubberFill);
+
+    const timeLabel = document.createElement("span");
+    timeLabel.textContent = "0:00 / 0:00";
+
+    const scrub = (e) => {
+        const rect = scrubberContainer.getBoundingClientRect();
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const percent = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width));
+        const duration = vid.duration || 0;
+        if (duration > 0) {
+            vid.currentTime = (percent / 100) * duration;
+            scrubberFill.style.width = `${percent}%`;
+        }
+    };
+
+    let isScrubbing = false;
+    scrubberContainer.onmousedown = (e) => { e.stopPropagation(); isScrubbing = true; scrub(e); };
+    scrubberContainer.ontouchstart = (e) => { e.stopPropagation(); isScrubbing = true; scrub(e); };
+
+    const handleWindowMove = (e) => { if (isScrubbing) scrub(e); };
+    const handleWindowUp = () => { isScrubbing = false; };
+    window.addEventListener("mousemove", handleWindowMove);
+    window.addEventListener("touchmove", handleWindowMove);
+    window.addEventListener("mouseup", handleWindowUp);
+    window.addEventListener("touchend", handleWindowUp);
+
+    controlBar.append(playBtn, scrubberContainer, timeLabel);
+    container.appendChild(controlBar);
+
+    videoSyncActive = true;
+    const syncLoop = () => {
+        if (!videoSyncActive) return;
+
+        const cur = vid.currentTime || 0;
+        const dur = vid.duration || 0;
+        if (dur > 0) {
+            scrubberFill.style.width = `${(cur / dur) * 100}%`;
+            const formatTime = (t) => {
+                const m = Math.floor(t / 60);
+                const s = Math.floor(t % 60);
+                return `${m}:${s < 10 ? '0' : ''}${s}`;
+            };
+            timeLabel.textContent = `${formatTime(cur)} / ${formatTime(dur)}`;
+        }
+
+        playBtn.className = vid.paused ? "pi pi-play" : "pi pi-pause";
+        syncAnimationFrameId = requestAnimationFrame(syncLoop);
+    };
+    requestAnimationFrame(syncLoop);
+
+    return () => {
+        window.removeEventListener("mousemove", handleWindowMove);
+        window.removeEventListener("touchmove", handleWindowMove);
+        window.removeEventListener("mouseup", handleWindowUp);
+        window.removeEventListener("touchend", handleWindowUp);
+        vid.removeEventListener("loadedmetadata", onMetaLoaded);
+        controlBar.remove();
+    };
+};
+
+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;
+    }
+
+    const isBaseVideo = isVideoFormat(baseSrc);
+    const canvasEl = document.querySelector("#graph-canvas, canvas");
+    const targetContainer = canvasEl ? canvasEl.parentNode : document.body;
+
+    if (targetContainer && targetContainer !== document.body) {
+        targetContainer.style.position = "relative";
+    }
+
+    const container = document.createElement("div");
+    container.className = "comfy-sidebar-comparison-overlay";
+    Object.assign(container.style, {
+        position: "absolute", top: "0", left: "0", width: "100%", height: "100%",
+        background: "rgba(10, 10, 10, 0.95)", display: "flex", flexDirection: "column",
+        alignItems: "center", justifyContent: "center",
+        zIndex: "10", 
+        pointerEvents: "auto", userSelect: "none", "-webkit-user-select": "none"
+    });
+
+    const header = document.createElement("div");
+    Object.assign(header.style, {
+        position: "absolute", top: "16px", display: "flex", gap: "16px",
+        zIndex: "30", color: "#aaa", fontSize: "12px", fontFamily: "sans-serif",
+        pointerEvents: "none"
+    });
+    const infoText = document.createElement("span");
+    infoText.textContent = isBaseVideo 
+        ? "Video playback. Press Esc to close." 
+        : "Reference loaded. Click to replace | Shift+Click another card image to compare.";
+    header.appendChild(infoText);
+    container.appendChild(header);
+
+    const closeBtn = document.createElement("span");
+    closeBtn.className = "pi pi-times";
+    closeBtn.title = "Close Comparison (Esc)";
+    Object.assign(closeBtn.style, {
+        position: "absolute", top: "16px", right: "24px", zIndex: "30",
+        cursor: "pointer", fontSize: "20px", color: "#aaa", transition: "color 0.15s ease"
+    });
+    closeBtn.onmouseenter = () => closeBtn.style.color = "#fff";
+    closeBtn.onmouseleave = () => closeBtn.style.color = "#aaa";
+    container.appendChild(closeBtn);
+
+    const wrapper = document.createElement("div");
+    Object.assign(wrapper.style, {
+        position: "relative", display: "grid", placeItems: "center",
+        maxWidth: "85%", maxHeight: "85%"
+    });
+    container.appendChild(wrapper);
+
+    // Muted bottom tooltip helper
+    const hintPrompt = document.createElement("div");
+    Object.assign(hintPrompt.style, {
+        position: "absolute", bottom: "16px", zIndex: "30",
+        color: "#555", fontSize: "10px", 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.';
+    if (isBaseVideo) {
+        hintPrompt.style.display = "none";
+    }
+    container.appendChild(hintPrompt);
+
+    container.onclick = (e) => {
+        if (e.target === container) {
+            destroy();
+        }
+    };
+
+    let mediaA = createMediaElement(baseSrc, false);
+    wrapper.appendChild(mediaA);
+
+    let mediaB = null;
+
+    const slider = document.createElement("div");
+    Object.assign(slider.style, {
+        position: "absolute", top: "0", bottom: "0", left: "50%",
+        width: "2px", background: "#fff", cursor: "ew-resize",
+        zIndex: "25", display: "none", pointerEvents: "auto",
+        boxShadow: "0 0 8px rgba(0,0,0,0.5)"
+    });
+    const sliderButton = document.createElement("div");
+    Object.assign(sliderButton.style, {
+        position: "absolute", top: "50%", left: "50%",
+        transform: "translate(-50%, -50%)", width: "32px", height: "32px",
+        borderRadius: "50%", background: "#fff", color: "#333",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        boxShadow: "0 2px 6px rgba(0,0,0,0.4)", pointerEvents: "auto",
+        userSelect: "none", webkitUserSelect: "none"
+    });
+    sliderButton.innerHTML = `<span class="pi pi-arrows-h" style="font-size: 12px;"></span>`;
+    slider.appendChild(sliderButton);
+    wrapper.appendChild(slider);
+
+    let splitRatio = 50; 
+    let isDragging = false;
+    let destroyVideoPlaybackFn = null;
+
+    const updateSliderPosition = (percent) => {
+        splitRatio = Math.max(0, Math.min(100, percent));
+        slider.style.left = `${splitRatio}%`;
+        if (mediaB) {
+            mediaB.style.clipPath = `polygon(${splitRatio}% 0, 100% 0, 100% 100%, ${splitRatio}% 100%)`;
+        }
+    };
+
+    const startDrag = (e) => { 
+        e.preventDefault(); 
+        e.stopPropagation();
+        isDragging = true; 
+        
+        const rect = wrapper.getBoundingClientRect();
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const percent = ((clientX - rect.left) / rect.width) * 100;
+        updateSliderPosition(percent);
+    };
+    const doDrag = (e) => {
+        if (!isDragging) return;
+        const rect = wrapper.getBoundingClientRect();
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const percent = ((clientX - rect.left) / rect.width) * 100;
+        updateSliderPosition(percent);
+    };
+    const endDrag = () => { isDragging = false; };
+
+    wrapper.addEventListener("mousedown", startDrag);
+    wrapper.addEventListener("touchstart", startDrag);
+    
+    window.addEventListener("mousemove", doDrag);
+    window.addEventListener("touchmove", doDrag);
+    window.addEventListener("mouseup", endDrag);
+    window.addEventListener("touchend", endDrag);
+
+    const destroy = () => {
+        window.removeEventListener("mousemove", doDrag);
+        window.removeEventListener("touchmove", doDrag);
+        window.removeEventListener("mouseup", endDrag);
+        window.removeEventListener("touchend", endDrag);
+        
+        if (globalKeydownHandler) {
+            document.removeEventListener("keydown", globalKeydownHandler);
+            globalKeydownHandler = null;
+        }
+        
+        videoSyncActive = false;
+        if (syncAnimationFrameId) cancelAnimationFrame(syncAnimationFrameId);
+        if (destroyVideoPlaybackFn) destroyVideoPlaybackFn();
+
+        container.remove();
+        activeComparisonViewer = null;
+    };
+
+    closeBtn.onclick = destroy;
+
+    const handleKeys = (e) => {
+        if (e.key === "Escape") destroy();
+        if (e.key === " " && mediaB) {
+            e.preventDefault();
+            updateSliderPosition(splitRatio > 50 ? 0 : 100);
+        }
+    };
+    
+    globalKeydownHandler = handleKeys;
+    document.addEventListener("keydown", globalKeydownHandler);
+
+    targetContainer.appendChild(container);
+
+    if (isBaseVideo) {
+        destroyVideoPlaybackFn = setupVideoPlayback(mediaA, container);
+    }
+
+    return {
+        loadTarget(targetSrc, isShiftClick) {
+            const isTargetVideo = isVideoFormat(targetSrc);
+
+            if (isBaseVideo) {
+                destroy();
+                showFullscreenPreview([targetSrc], isShiftClick);
+                return;
+            }
+
+            if (isTargetVideo) {
+                return;
+            }
+
+            if (isShiftClick) {
+                // Shift+Click: Sideload target image B for comparison split
+                if (mediaB) mediaB.remove();
+
+                mediaB = createMediaElement(targetSrc, false);
+                mediaB.style.pointerEvents = "none";
+                wrapper.appendChild(mediaB);
+
+                slider.style.display = "block";
+                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) {
+                    mediaB.remove();
+                    mediaB = null;
+                }
+                slider.style.display = "none";
+                mediaA.src = targetSrc;
+                infoText.textContent = "Reference loaded. Click to replace | Shift+Click another card image to compare.";
+            }
+        }
+    };
+}
+
+export function showFullscreenPreview(imgSrcs, isShiftClick = false) {
+    if (!imgSrcs || imgSrcs.length === 0) return;
+    
+    if (activeComparisonViewer) {
+        activeComparisonViewer.loadTarget(imgSrcs[0], isShiftClick);
+        return;
+    }
+
+    activeComparisonViewer = createComparisonViewer(imgSrcs[0]);
+}

js/dragdrop.js

@@ -22,72 +22,92 @@ async function uploadDroppedImageToInput(imageObj) {
 
 export function setupDragAndDrop() {
     document.addEventListener("dragover", (e) => {
-        if (State.currentDraggedImgData) {
-            e.preventDefault(); 
-            e.dataTransfer.dropEffect = "copy";
-        }
+        e.preventDefault(); 
+        e.dataTransfer.dropEffect = "copy";
     });
 
     document.addEventListener("drop", async (e) => {
-        if (!State.currentDraggedImgData) return;
-        
+        // 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) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+
         const canvas = app.canvas;
-        if (canvas && canvas.graph) {
-            let targetNode = null;
-            if (canvas.convertEventToCanvasOffset) {
-                const pos = canvas.convertEventToCanvasOffset(e);
-                targetNode = canvas.graph.getNodeOnPos(pos[0], pos[1]);
-            } else {
-                const rect = canvas.canvas.getBoundingClientRect();
-                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 (!canvas || !canvas.graph) return;
 
-            let droppedOnImageNode = false;
-
-            if (targetNode && (targetNode.type.includes("LoadImage") || targetNode.widgets?.some(w => w.name === "image"))) {
-                if (State.currentDraggedImgData.filename) {
+        // 1. Check for standard workflow JSON data drop
+        const jsonStr = e.dataTransfer.getData("application/json") || e.dataTransfer.getData("text/plain");
+        if (jsonStr) {
+            try {
+                const workflow = JSON.parse(jsonStr);
+                if (workflow && workflow.nodes) {
                     e.preventDefault();
                     e.stopPropagation();
-                    droppedOnImageNode = true;
-                    const widget = targetNode.widgets.find(w => w.name === "image");
-                    if (widget) {
-                        const newFilename = await uploadDroppedImageToInput(State.currentDraggedImgData);
-                        if (newFilename) {
-                            widget.value = newFilename;
-                            if (widget.callback) widget.callback(widget.value);
-                            targetNode.imgs = null;
-                            app.graph.setDirtyCanvas(true, true);
+                    if (app.loadGraphData) {
+                        app.loadGraphData(workflow);
+                    } else if (app.handleFile) {
+                        const file = new File([jsonStr], "workflow.json", { type: "application/json" });
+                        await app.handleFile(file);
+                    }
+                    return;
+                }
+            } catch (err) {}
+        }
+
+        // 2. Check for native image URL drop
+        const url = e.dataTransfer.getData("text/uri-list") || e.dataTransfer.getData("text/plain");
+        if (url) {
+            try {
+                const urlObj = new URL(url, window.location.origin);
+                if (urlObj.pathname === "/view") {
+                    const filename = urlObj.searchParams.get("filename");
+                    const type = urlObj.searchParams.get("type") || "output";
+                    const subfolder = urlObj.searchParams.get("subfolder") || "";
+
+                    if (filename) {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        let targetNode = null;
+                        if (canvas.convertEventToCanvasOffset) {
+                            const pos = canvas.convertEventToCanvasOffset(e);
+                            targetNode = canvas.graph.getNodeOnPos(pos[0], pos[1]);
+                        } else {
+                            const rect = canvas.canvas.getBoundingClientRect();
+                            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 (widget) {
+                                const newFilename = await uploadDroppedImageToInput({ filename, type, subfolder });
+                                if (newFilename) {
+                                    widget.value = newFilename;
+                                    if (widget.callback) widget.callback(widget.value);
+                                    targetNode.imgs = null;
+                                    app.graph.setDirtyCanvas(true, true);
+                                }
+                            }
+                        } 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 (app.handleFile) await app.handleFile(file);
+                            else if (app.canvas?.handleDropItem) app.canvas.handleDropItem({ getAsFile: () => file });
                         }
                     }
                 }
-            }
-
-            if (!droppedOnImageNode) {
-                e.preventDefault();
-                e.stopPropagation();
-                try {
-                    if (State.currentDraggedImgData.workflow) {
-                        if (app.loadGraphData) {
-                            app.loadGraphData(State.currentDraggedImgData.workflow);
-                        } else if (app.handleFile) {
-                            const jsonStr = JSON.stringify(State.currentDraggedImgData.workflow);
-                            const file = new File([jsonStr], "workflow.json", { type: "application/json" });
-                            await app.handleFile(file);
-                        }
-                    } else if (State.currentDraggedImgData.filename) {
-                        const src = State.currentDraggedImgData.url || `/view?filename=${encodeURIComponent(State.currentDraggedImgData.filename)}&type=${State.currentDraggedImgData.type || 'output'}&subfolder=${encodeURIComponent(State.currentDraggedImgData.subfolder || '')}`;
-                        const res = await fetch(src);
-                        const blob = await res.blob();
-                        const file = new File([blob], State.currentDraggedImgData.filename || "workflow.png", { type: blob.type });
-
-                        if (app.handleFile) await app.handleFile(file);
-                        else if (app.canvas?.handleDropItem) app.canvas.handleDropItem({ getAsFile: () => file });
-                    }
-                } catch (err) {
-                    console.error("Comfy Sidebar: Failed to synthesize workflow file drop:", err);
-                }
+            } catch (err) {
+                console.error("Comfy Sidebar: Failed to handle dropped native URL:", err);
             }
         }
-        State.currentDraggedImgData = null;
     }, true);
 }

js/layout.js

@@ -1,4 +1,4 @@
-// layout.js - Variant 1 (Media Queries) with Properties Panel Toggle Fix, Indicator Filter & Sidebar Visibility
+// layout.js - Fully Fixed & Renamed to 'Hide Junk'
 import { app } from "/scripts/app.js";
 
 const STYLE_ID = "comfy-sidebar-classic-layout-override";
@@ -25,6 +25,46 @@ const CLASSIC_LAYOUT_CSS_MEDIA = `
     align-items: center !important;
 }
 
+/* Style overrides for the new native Extensions button container when embedded in top actionbar */
+.comfy-sidebar-extensions-override {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 8px 0 0 !important;
+    height: auto !important;
+    position: static !important;
+    order: -10 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+}
+
+/* Scale down performance indicators (Crystools) uniformly without breaking their native styling */
+#crysmonitor-monitors-root,
+#crystools-monitors-root,
+.crysmonitor-monitors-container {
+    zoom: 0.8 !important; /* Restored to original 0.8 scale for perfect topbar alignment */
+    display: inline-flex !important;
+    align-items: center !important;
+}
+
+/* Hide only the user account profile button and its PrimeVue components (initials/icons) */
+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),
+[role="button"]:has(.p-avatar),
+button:has([data-pc-name="avatar"]),
+[role="button"]:has([data-pc-name="avatar"]) {
+    display: none !important;
+}
+
 /* Base rules: Large/Wide desktop screens (>= 1600px width) */
 .p-tabview-nav-content,
 [class*="tabview"] {
@@ -60,11 +100,11 @@ const CLASSIC_LAYOUT_CSS_MEDIA = `
 }
 `;
 
-export function applyClassicLayout(enable) {
+export function applyClassicLayout(enable, updateSetting = false) {
     let styleEl = document.getElementById(STYLE_ID);
     
     if (enable) {
-        if (app.ui && app.ui.settings) {
+        if (updateSetting && app.ui && app.ui.settings) {
             app.ui.settings.setSettingValue("Comfy.Workflow.WorkflowTabsPosition", "Topbar");
         }
 
@@ -78,15 +118,17 @@ export function applyClassicLayout(enable) {
     } else {
         if (styleEl) styleEl.remove();
         
-        if (app.ui && app.ui.settings) {
+        if (updateSetting && app.ui && app.ui.settings) {
             app.ui.settings.setSettingValue("Comfy.Workflow.WorkflowTabsPosition", "Sidebar");
         }
     }
 }
 
-/* --- Properties Panel Toggle Inline Correction --- */
+/* --- Properties Panel Toggle Corrections --- */
 
 let savedButtonData = null;
+let domObserver = null;
+let syncScheduled = false;
 
 function findOriginalButton() {
     const icon = document.querySelector('[class*="lucide--panel-right"], [class*="lucide--panel-left"]');
@@ -100,7 +142,7 @@ function findOriginalButton() {
 }
 
 function findTopbarContainer() {
-    const container = document.querySelector('[class*="actionbar-buttons"], .actionbar-buttons, [class*="actionbar"]');
+    const container = document.querySelector('[data-testid="action-bar-buttons"], [class*="actionbar-buttons"], .actionbar-buttons, [class*="actionbar"]');
     if (container) return container;
     
     const orig = findOriginalButton();
@@ -119,7 +161,9 @@ function findTopbarContainer() {
 
 function isPropertiesPanelOpen() {
     const icon = document.querySelector('[class*="lucide--panel-right"], [class*="lucide--panel-left"]');
-    return !!(icon && icon.className.includes("lucide--panel-left"));
+    if (!icon) return false;
+    const classStr = icon.getAttribute("class") || "";
+    return classStr.includes("lucide--panel-left");
 }
 
 function findActiveQueueIndicator() {
@@ -138,6 +182,12 @@ function findActiveQueueIndicator() {
     return null;
 }
 
+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'));
+}
+
 function updateSidebarTabsVisibility() {
     const sidebar = document.querySelector('.comfyui-sidebar, .comfy-sidebar, .sidebar, [class*="sidebar-nav"], [class*="sidebar"]');
     if (!sidebar) return;
@@ -154,12 +204,11 @@ function updateSidebarTabsVisibility() {
     };
 
     Object.entries(tabIconSelectors).forEach(([tab, selector]) => {
-        const shouldHide = app.ui?.settings?.getSettingValue(`Comfy Sidebar.Hide Sidebar Tabs.${tab}`) ?? false;
+        // Read from renamed "Hide Junk" path
+        const shouldHide = app.ui?.settings?.getSettingValue(`Comfy Sidebar.Hide Junk.${tab}`) ?? false;
         
-        // Find the specific icon element inside the sidebar
         const icon = sidebar.querySelector(selector);
         if (icon) {
-            // Find its closest parent button or tab item wrapper
             const tabBtn = icon.closest('.comfyui-sidebar-tab, button, [role="tab"], li, a, .comfyui-sidebar-item') || icon;
             
             if (shouldHide) {
@@ -174,8 +223,8 @@ function updateSidebarTabsVisibility() {
         }
     });
 
-    // 4. Handle "Override Stock Job History Tab" using its exact icon selector
-    const hideStockHistory = app.ui?.settings?.getSettingValue("Comfy Sidebar.Hide Sidebar Tabs.Override Stock Job History Tab") ?? false;
+    // 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) {
         const historyBtn = historyIcon.closest('.comfyui-sidebar-tab, button, [role="tab"], li, a, .comfyui-sidebar-item') || historyIcon;
@@ -191,40 +240,77 @@ function updateSidebarTabsVisibility() {
     }
 }
 
-export function setupPropertiesPanelToggleFix() {
-    const style = document.createElement("style");
-    style.textContent = `
-        /* Hide native button completely */
-        .comfy-sidebar-hide-original-properties-btn {
-            display: none !important;
+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')) {
+            continue;
+        }
+        const text = (el.textContent || el.getAttribute("title") || "").toLowerCase();
+        if (text.includes("graph") || text.includes("workflow") || el.querySelector('[class*="sitemap"], [class*="workflow"]')) {
+            return el;
+        }
+    }
+    return null;
+}
+
+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) {
+            if (hideGraphBtn) {
+                if (graphBtn.style.display !== "none") {
+                    graphBtn.style.setProperty("display", "none", "important");
+                }
+            } else {
+                if (graphBtn.style.display === "none") {
+                    graphBtn.style.removeProperty("display");
+                }
+            }
         }
 
-        /* Spacing when the properties panel is CLOSED */
-        .comfy-sidebar-custom-properties-toggle {
-            margin-left: -8px !important;
-            margin-right: 0px !important;
-            display: inline-flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            padding: 0 !important; /* Forces perfect centering of the icon */
+        // 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;
+                    }
+                    container.appendChild(extensionsPanel);
+                    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");
+                }
+            }
         }
 
-        /* Spacing when the properties panel is OPEN */
-        .comfy-sidebar-custom-properties-toggle.comfy-panel-open {
-            margin-left: 0px !important;
-            margin-right: 0px !important;
-            display: inline-flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            padding: 0 !important; /* Forces perfect centering of the icon */
-        }
-    `;
-    document.head.appendChild(style);
-
-    function frameLoop() {
-        const isClassicLayoutEnabled = app.ui?.settings?.getSettingValue("Comfy Sidebar.Classic Layout") ?? false;
-
-        // If Classic Layout is disabled, cleanly restore stock elements and exit early
+        // 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")) {
@@ -242,17 +328,14 @@ export function setupPropertiesPanelToggleFix() {
             }
 
             updateSidebarTabsVisibility();
-
-            requestAnimationFrame(frameLoop);
             return;
         }
 
-        // --- Active Classic Layout Toggle Correction ---
+        // 4. Handle Active Layout elements synchronization
         const originalBtn = findOriginalButton();
         const container = findTopbarContainer();
         const openState = isPropertiesPanelOpen();
 
-        // 1. Capture original template data when native button is alive
         if (originalBtn) {
             if (!originalBtn.classList.contains("comfy-sidebar-hide-original-properties-btn")) {
                 originalBtn.classList.add("comfy-sidebar-hide-original-properties-btn");
@@ -271,7 +354,6 @@ export function setupPropertiesPanelToggleFix() {
 
         let customBtn = document.querySelector(".comfy-sidebar-custom-properties-toggle");
 
-        // 2. Build and insert our custom button inside topbar
         if (!customBtn && savedButtonData && container) {
             customBtn = document.createElement(savedButtonData.tagName);
             
@@ -284,7 +366,6 @@ export function setupPropertiesPanelToggleFix() {
                 }
             }
 
-            // Standard inline rendering
             Object.assign(customBtn.style, {
                 position: "relative",
                 zIndex: "1000", 
@@ -303,27 +384,16 @@ export function setupPropertiesPanelToggleFix() {
                 if (nativeBtn) nativeBtn.click();
             });
 
-            container.appendChild(customBtn);
-        } else if (customBtn && container && container.lastChild !== customBtn) {
             container.appendChild(customBtn);
         }
 
-        // 3. Keep the state-specific CSS classes synchronized
         if (customBtn) {
-            if (openState) {
-                if (!customBtn.classList.contains("comfy-panel-open")) {
-                    customBtn.classList.add("comfy-panel-open");
-                }
-            } else {
-                if (customBtn.classList.contains("comfy-panel-open")) {
-                    customBtn.classList.remove("comfy-panel-open");
-                }
-            }
+            customBtn.classList.toggle("comfy-panel-open", openState);
             customBtn.style.display = "inline-flex";
         }
 
-        // 4. Handle "0 active" indicator visibility based on user settings (Sub-grouped Path)
-        const hideQueueIndicator = app.ui?.settings?.getSettingValue("Comfy Sidebar.Hide Sidebar Tabs.Override Stock Job History Tab") ?? false;
+        // 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) {
             if (hideQueueIndicator) {
@@ -337,13 +407,82 @@ export function setupPropertiesPanelToggleFix() {
             }
         }
 
-        // 5. Update Sidebar tab elements visibility
         updateSidebarTabsVisibility();
 
-        // Run checking loop continuously synced with screen refresh cycles
-        requestAnimationFrame(frameLoop);
+    } 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,
+                subtree: true
+            });
+        }
+    }
+}
+
+export function setupPropertiesPanelToggleFix() {
+    if (!document.getElementById("comfy-sidebar-layout-fix-styles")) {
+        const style = document.createElement("style");
+        style.id = "comfy-sidebar-layout-fix-styles";
+        style.textContent = `
+            .comfy-sidebar-hide-original-properties-btn {
+                display: none !important;
+            }
+            .comfy-sidebar-custom-properties-toggle {
+                order: 99999 !important;
+                margin-left: -8px !important;
+                margin-right: 0px !important;
+                display: inline-flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                padding: 0 !important;
+            }
+            .comfy-sidebar-custom-properties-toggle.comfy-panel-open {
+                order: 99999 !important;
+                margin-left: 0px !important;
+                margin-right: 0px !important;
+                display: inline-flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                padding: 0 !important;
+            }
+        `;
+        document.head.appendChild(style);
     }
 
-    // Start loop synced with the screen rendering rate
-    requestAnimationFrame(frameLoop);
+    if (domObserver) {
+        domObserver.disconnect();
+    }
+
+    domObserver = new MutationObserver((mutations) => {
+        let shouldSync = false;
+        for (const mutation of mutations) {
+            if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
+                const hasElementMutation = Array.from(mutation.addedNodes).some(node => node.nodeType === 1) ||
+                                           Array.from(mutation.removedNodes).some(node => node.nodeType === 1);
+                
+                if (hasElementMutation) {
+                    shouldSync = true;
+                    break;
+                }
+            }
+        }
+        if (shouldSync && !syncScheduled) {
+            syncScheduled = true;
+            requestAnimationFrame(() => {
+                syncClassicLayout();
+                syncScheduled = false;
+            });
+        }
+    });
+
+    domObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+
+    // Run first layout sync now that structural observing is active
+    syncClassicLayout();
 }

js/queue.js

@@ -1,6 +1,6 @@
 import { app } from "/scripts/app.js";
 import { api } from "/scripts/api.js";
-import { State, promptStates, pruneHistory, loadStatesFromLocalStorage } from "./state.js";
+import { State, promptStates, pruneHistory, loadStatesFromLocalStorage, cardElements } from "./state.js";
 import { findImagesInOutputs, findTextsInOutputs } from "./utils.js";
 
 export let renderDOMFn = () => {};
@@ -80,8 +80,9 @@ 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;
-            if (st.images.length === 0) st.images = findImagesInOutputs(hItem[pid].outputs);
-            st.texts = findTextsInOutputs(hItem[pid].outputs);
+            st.nodeOutputs = hItem[pid].outputs; // Store full outputs dictionary!
+            if (st.images.length === 0) st.images = findImagesInOutputs(hItem[pid].outputs, st.workflow);
+            st.texts = findTextsInOutputs(hItem[pid].outputs, st.workflow);
         }
     } catch (err) {}
     pruneHistory(app);
@@ -122,6 +123,7 @@ export function setupApiListeners() {
                 workflow: activeWorkspaceWorkflow, startTime: Date.now(), duration: null
             });
         }
+        renderDOMFn(); // Render immediately to prevent pop-in delay!
         syncQueue();
     });
 
@@ -162,9 +164,22 @@ export function setupApiListeners() {
 
     api.addEventListener("executed", (e) => {
         if (promptStates.has(e.detail.prompt_id)) {
-            const finalImgs = findImagesInOutputs({ output: e.detail.output });
-            if (finalImgs.length > 0) promptStates.get(e.detail.prompt_id).images = finalImgs;
-            promptStates.get(e.detail.prompt_id).texts = findTextsInOutputs({ output: e.detail.output });
+            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;
+
             renderDOMFn();
         }
     });
@@ -188,25 +203,30 @@ export async function initSessionAndHistory() {
     }
 
     const storedSessionId = localStorage.getItem("comfy_sidebar_backend_session_id");
-    if (backendSessionId && backendSessionId === storedSessionId) {
-        loadStatesFromLocalStorage();
-    } else {
+    if (backendSessionId && backendSessionId !== storedSessionId) {
+        // Session changed (server restarted)! Clear cached memory.
+        promptStates.clear();
+        cardElements.clear();
         localStorage.removeItem("comfy_sidebar_prompt_states");
         if (backendSessionId) localStorage.setItem("comfy_sidebar_backend_session_id", backendSessionId);
+    } else if (!storedSessionId && backendSessionId) {
+        localStorage.setItem("comfy_sidebar_backend_session_id", backendSessionId);
     }
 
     const historyData = await api.getHistory();
     const ids = Object.keys(historyData).sort((a,b) => Number(a)-Number(b));
     ids.forEach(id => {
         if (promptStates.has(id)) return;
-        const images = findImagesInOutputs(historyData[id].outputs);
-        const texts = findTextsInOutputs(historyData[id].outputs);
+        const workflow = historyData[id].extra_data?.extra_pnginfo?.workflow || null;
+        const images = findImagesInOutputs(historyData[id].outputs, workflow);
+        const texts = findTextsInOutputs(historyData[id].outputs, workflow);
         if (images.length === 0 && texts.length === 0) return;
 
         State.globalOrderCounter++;
         promptStates.set(id, {
             pid: id, status: "completed", images, texts,
-            workflow: historyData[id].extra_data?.extra_pnginfo?.workflow || null,
+            nodeOutputs: historyData[id].outputs, // Store full outputs dictionary!
+            workflow: workflow,
             progressText: "", timestamp: State.globalOrderCounter, rendered: true
         });
     });

js/sidebar.js

@@ -1,40 +1,105 @@
-// sidebar.js
+// 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 } from "./layout.js"; // Import properties panel fix
+import { applyClassicLayout, setupPropertiesPanelToggleFix, syncClassicLayout } from "./layout.js";
+
+// Track initial loading phase to guard against early auto-fired settings triggers
+let isInitialized = false;
+
+function toggleIgnoreActiveNode() {
+    const canvas = app.canvas;
+    if (!canvas) return;
+    
+    let nodes = [];
+    if (canvas.selected_nodes && Object.keys(canvas.selected_nodes).length > 0) {
+        nodes = Object.values(canvas.selected_nodes);
+    } else if (canvas.current_active_node) {
+        nodes = [canvas.current_active_node];
+    }
+    
+    if (nodes.length === 0) return;
+    
+    nodes.forEach(node => {
+        if (!node.properties) node.properties = {};
+        node.properties.ignoreInQueue = !node.properties.ignoreInQueue;
+    });
+    
+    app.graph.setDirtyCanvas(true, true);
+}
+
+// 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;
+            }
+        }
+    }
+    return null;
+}
 
 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 });
-        
-        // Settings toggle for Auto-clear Interrupted runs
         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 a shared sub-category group
+        // 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"];
         sidebarTabs.forEach(tab => {
             app.ui.settings.addSetting({
-                id: `Comfy Sidebar.Hide Sidebar Tabs.${tab}`,
+                id: `Comfy Sidebar.Hide Junk.${tab}`,
                 name: `Hide Tab: ${tab}`,
                 type: "boolean",
-                defaultValue: false
+                defaultValue: false,
+                onChange: () => {
+                    setTimeout(() => {
+                        if (typeof syncClassicLayout === "function") syncClassicLayout();
+                    }, 0);
+                }
             });
         });
 
-        // Group the Stock History Tab override into the same sub-category group
+        // Group the Stock History Tab override into "Hide Junk"
         app.ui.settings.addSetting({ 
-            id: "Comfy Sidebar.Hide Sidebar Tabs.Override Stock Job History Tab", 
+            id: "Comfy Sidebar.Hide Junk.Override Stock Job History Tab", 
             name: "Replaces the stock Job History sidebar with Comfy Queue", 
             type: "boolean", 
-            defaultValue: false 
+            defaultValue: false,
+            onChange: () => {
+                setTimeout(() => {
+                    if (typeof syncClassicLayout === "function") 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);
+            }
         });
 
         // Add the toggle setting for Classic / Comfy Layout
@@ -44,7 +109,10 @@ app.registerExtension({
             type: "boolean",
             defaultValue: false,
             onChange: (value) => {
-                applyClassicLayout(value);
+                // Only update the native layout configuration if setup() initialization has fully concluded
+                if (isInitialized) {
+                    applyClassicLayout(value, true);
+                }
             }
         });
     },
@@ -52,9 +120,12 @@ app.registerExtension({
     async setup() {
         if (!app.extensionManager || !app.extensionManager.registerSidebarTab) return;
 
-        // Apply saved layout configuration on startup
+        // Apply saved layout configuration on startup (never force overwrite on launch)
         const isClassicLayoutEnabled = app.ui.settings.getSettingValue("Comfy Sidebar.Comfy Layout") ?? false;
-        applyClassicLayout(isClassicLayoutEnabled);
+        applyClassicLayout(isClassicLayoutEnabled, false);
+        
+        // Finalize initialization to open write pathways for settings-panel adjustments
+        isInitialized = true;
 
         // Run properties panel toggle correction
         setupPropertiesPanelToggleFix();
@@ -80,14 +151,103 @@ app.registerExtension({
         document.addEventListener("keydown", (e) => {
             const activeEl = document.activeElement;
             if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable || activeEl.tagName === "SELECT")) return;
-            if (e.key.toLowerCase() === "q") {
+            
+            // 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();
+            }
         }, true);
         
-        setInterval(() => applySidebarOverride(), 500);
+        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);
+                    }
+
+                    // 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);
+                        }
+                    }
+
+                    // 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();
+                                }
+                            }
+                        } else {
+                            // Fallback cleanup if the title text element is temporarily unmounted
+                            const badge = nodeEl.querySelector(".comfy-sidebar-ignore-badge");
+                            if (badge && !isIgnored) {
+                                badge.remove();
+                            }
+                        }
+                    }
+                });
+            }
+        }, 500);
 
         // 6. Final Registration
         app.extensionManager.registerSidebarTab({ 

js/state.js

@@ -3,12 +3,13 @@ export const cardElements = new Map();
 
 // Global shared variables
 export const State = {
-    currentDraggedImgData: null,
     currentSearchQuery: "",
     globalOrderCounter: 0,
     sidebarContainer: null,
     cardStack: null,
-    currentlyActivePromptId: null
+    currentlyActivePromptId: null,
+    activeSubmenuPromptId: null,      // Active run/outputs explorer pointer
+    activeSubmenuBatchImages: null    // Active batch images explorer pointer
 };
 
 export function pruneHistory(app) {
@@ -39,6 +40,7 @@ export function saveStatesToLocalStorage() {
 
             serializable.push({
                 pid: state.pid, status: state.status, images: cleanedImages, texts: state.texts || [],
+                nodeOutputs: state.nodeOutputs, // Persist node level outputs
                 workflow: state.workflow, progress: state.progress || 0, queueNumber: state.queueNumber,
                 progressText: state.progressText || "", timestamp: state.timestamp,
                 activeNodeName: state.activeNodeName || "", rendered: state.rendered || false,
@@ -64,4 +66,7 @@ export function loadStatesFromLocalStorage() {
     } catch (e) {
         console.error("Comfy Sidebar: Failed to load state from localStorage", e);
     }
-}
+}
+
+// Load instantly and synchronously on script import to prevent race conditions during early renders!
+loadStatesFromLocalStorage();

js/styles.js

@@ -7,11 +7,13 @@ export function injectStyles() {
             border-radius: 4px; padding: 8px; position: relative;
             min-height: 80px; margin-bottom: 12px; break-inside: avoid;
             user-select: none; -webkit-user-select: none;
-            transition: border-color 0.2s, background-color 0.2s;
             border: 2px solid var(--border-color, #333);
             color: var(--comfy-input-color, var(--fg-color, #eee));
         }
-        .comfy-sidebar-card:hover { border-color: var(--p-primary-color, var(--primary-color, #555)) !important; }
+        .comfy-sidebar-card:hover { 
+            border-color: var(--p-primary-color, var(--primary-color, #555)) !important; 
+            transition: border-color 0.2s, background-color 0.2s;
+        }
         .comfy-sidebar-card.active { --border-color: #3b82f6; --hover-color: #60a5fa; }
         .comfy-sidebar-card.pending { --border-color: #6c757d; --hover-color: #adb5bd; }
         .comfy-sidebar-card.cancelled { --border-color: #ffc107; --hover-color: #ffe082; }

js/ui.js

@@ -1,40 +1,39 @@
 import { app } from "/scripts/app.js";
 import { api } from "/scripts/api.js";
 import { State, promptStates, cardElements, saveStatesToLocalStorage } from "./state.js";
-import { isVideoFormat, matchesFilter } from "./utils.js";
+import { isVideoFormat, matchesFilter, getRunOutputs } from "./utils.js";
+import { showFullscreenPreview } from "./comparison.js";
 
 // DI Hook for cyclic imports
 export let syncQueueFn = async () => {};
 export function setSyncQueue(fn) { syncQueueFn = fn; }
 
-export function showFullscreenPreview(imgSrcs) {
-    if (!imgSrcs || imgSrcs.length === 0) return;
-    const overlay = document.createElement("div");
-    Object.assign(overlay.style, {
-        position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh",
-        background: "rgba(0,0,0,0.9)", zIndex: "10000", display: "flex",
-        flexDirection: "column", alignItems: "center", justifyContent: "center", cursor: "zoom-out"
-    });
-    
-    const content = document.createElement("div");
-    Object.assign(content.style, { maxWidth: "90%", maxHeight: "85%", display: "flex", justifyContent: "center" });
+// 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";
+        if (cardObj.leftHoverPanel) cardObj.leftHoverPanel.style.display = "none";
+    }
+}
 
-    imgSrcs.forEach(src => {
-        if (isVideoFormat(src)) {
-            const video = document.createElement("video");
-            video.src = src; video.autoplay = true; video.controls = true; video.loop = true;
-            video.style.maxWidth = "100%"; video.style.maxHeight = "100%";
-            content.appendChild(video);
-        } else {
-            const img = document.createElement("img");
-            img.src = src; img.style.maxWidth = "100%"; img.style.maxHeight = "100%"; img.style.objectFit = "contain";
-            content.appendChild(img);
+// 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)) {
+                if (val.some(i => i && typeof i === 'object' && i.filename === img.filename)) {
+                    return nodeId;
+                }
+            } else if (val && typeof val === 'object' && val.filename === img.filename) {
+                return nodeId;
+            }
         }
-    });
-
-    overlay.appendChild(content);
-    overlay.onclick = () => overlay.remove();
-    document.body.appendChild(overlay);
+    }
+    return null;
 }
 
 export const updateSidebarBadge = (count) => {
@@ -85,7 +84,7 @@ export const findStandardQueueButton = () => {
 };
 
 export const applySidebarOverride = () => {
-    const overrideStock = app.ui.settings.getSettingValue("Comfy Sidebar.Hide Sidebar Tabs.Override Stock Job History Tab") ?? false;
+    const overrideStock = app.ui.settings.getSettingValue("Comfy Sidebar.Hide Junk.Override Stock Job History Tab") ?? false;
     const stdBtn = findStandardQueueButton();
     const ourBtn = findOurSidebarButton();
     
@@ -203,7 +202,7 @@ export function setupSidebarUI() {
                 promptStates.delete(pid);
             }
         }
-        try { await api.fetchApi("/history", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ clear: true }) }); } catch (err) {}
+        try { await api.fetchApi("/history", { method: "POST", body: JSON.stringify({ clear: true }) }); } catch (err) {}
         renderDOM();
     });
 
@@ -238,6 +237,20 @@ 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
+            renderDOM();
+            document.removeEventListener("click", handleGlobalClick, true);
+            globalClickRegistered = false;
+        }
+    };
+
     new ResizeObserver((entries) => {
         const threshold = app.ui.settings.getSettingValue("Comfy Sidebar.Grid Columns Threshold") ?? 350;
         const cols = Math.max(1, Math.floor(entries[0].contentRect.width / (threshold / 2)));
@@ -257,6 +270,253 @@ 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) {
+        cardObj.currentImageIndex = 0;
+    }
+
+    const idx = cardObj.currentImageIndex;
+    const img = state.images[idx];
+    if (!img) {
+        cardObj.grid.innerHTML = "";
+        cardObj.firstImgElement = null;
+        if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
+        return;
+    }
+
+    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 = "";
+        wrapper = document.createElement("div");
+        wrapper.className = "comfy-sidebar-media-wrapper";
+        Object.assign(wrapper.style, { position: "relative", width: "100%", display: "block" });
+        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"));
+
+    if (needsRebuild) {
+        if (mediaEl) mediaEl.remove();
+        mediaEl = isVideo ? document.createElement("video") : document.createElement("img");
+        Object.assign(mediaEl.style, { 
+            width: "100%", 
+            borderRadius: "2px", 
+            display: "block", 
+            cursor: "zoom-in",
+            webkitUserDrag: "element",
+            zIndex: "1"
+        });
+        wrapper.insertBefore(mediaEl, wrapper.firstChild);
+    }
+
+    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}`;
+        }
+        if (cardObj.dimEl && width && height) {
+            cardObj.dimEl.textContent = `${width}x${height}`;
+            cardObj.dimEl.style.display = "block";
+        }
+    };
+
+    // Bind dimensions hooks and event listeners EVERY run (for recycled elements & fast cache hits!)
+    if (isVideo) { 
+        mediaEl.muted = true; 
+        mediaEl.playsInline = true; 
+        mediaEl.preload = "metadata";
+        mediaEl.loop = true;
+        mediaEl.setAttribute("draggable", "false");
+
+        mediaEl.onloadedmetadata = () => {
+            applyDimensions(mediaEl.videoWidth, mediaEl.videoHeight);
+        };
+        if (mediaEl.readyState >= 1) {
+            applyDimensions(mediaEl.videoWidth, mediaEl.videoHeight);
+        }
+        
+        let playIcon = wrapper.querySelector(".comfy-sidebar-play-icon");
+        if (!playIcon) {
+            playIcon = document.createElement("div");
+            playIcon.className = "comfy-sidebar-play-icon";
+            Object.assign(playIcon.style, {
+                position: "absolute", top: "0", left: "0", width: "100%", height: "100%",
+                pointerEvents: "none", zIndex: "2", transition: "opacity 0.2s ease"
+            });
+            playIcon.innerHTML = `
+                <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">
+                    <circle cx="50" cy="50" r="16.65" fill="rgba(0, 0, 0, 0.55)" />
+                    <polygon points="45.7,42.5 45.7,57.5 58.7,50" fill="rgba(255, 255, 255, 0.9)" />
+                </svg>
+            `;
+            wrapper.appendChild(playIcon);
+        }
+
+        mediaEl.onmouseenter = () => { playIcon.style.opacity = "0"; mediaEl.play().catch(()=>{}); };
+        mediaEl.onmouseleave = () => { playIcon.style.opacity = "1"; mediaEl.pause(); };
+    } else {
+        const isUnfinished = state.status && state.status !== "completed";
+        if (isUnfinished) {
+            mediaEl.setAttribute("draggable", "false");
+            mediaEl.style.cursor = "grab";
+            mediaEl.removeEventListener("dragstart", mediaEl._currentDragStart);
+            delete mediaEl._currentDragStart;
+        } else {
+            mediaEl.setAttribute("draggable", "true");
+            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);
+                } catch (err) {}
+                e.dataTransfer.effectAllowed = "copy";
+                e.stopPropagation();
+            };
+            mediaEl.removeEventListener("dragstart", mediaEl._currentDragStart);
+            mediaEl.addEventListener("dragstart", dragStartHandler);
+            mediaEl._currentDragStart = dragStartHandler;
+        }
+
+        mediaEl.onload = () => { 
+            applyDimensions(mediaEl.naturalWidth, mediaEl.naturalHeight);
+        };
+        if (mediaEl.complete && mediaEl.naturalWidth) {
+            applyDimensions(mediaEl.naturalWidth, mediaEl.naturalHeight);
+        }
+
+        const playIcon = wrapper.querySelector(".comfy-sidebar-play-icon");
+        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) {
+            const tempImg = new Image();
+            tempImg.onload = () => {
+                const oldBlob = mediaEl._lastBlob;
+                mediaEl.src = src;
+                mediaEl._lastBlob = src;
+                applyDimensions(tempImg.naturalWidth, tempImg.naturalHeight);
+                if (oldBlob && oldBlob !== src) {
+                    try { URL.revokeObjectURL(oldBlob); } catch(e){}
+                }
+            };
+            tempImg.src = src;
+        } else {
+            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 {
+            if (mediaEl.naturalWidth) applyDimensions(mediaEl.naturalWidth, mediaEl.naturalHeight);
+        }
+    }
+
+    // Sync batch pagination controller overlay
+    let navBar = wrapper.querySelector(".comfy-sidebar-batch-navbar");
+    if (state.images.length > 1) {
+        if (!navBar) {
+            navBar = document.createElement("div");
+            navBar.className = "comfy-sidebar-batch-navbar";
+            Object.assign(navBar.style, {
+                position: "absolute", bottom: "6px", left: "50%",
+                display: "flex", alignItems: "center", gap: "8px", background: "rgba(0,0,0,0.75)",
+                padding: "4px 10px", borderRadius: "12px", zIndex: "15", fontSize: "10px",
+                fontFamily: "monospace", color: "#eee", userSelect: "none", pointerEvents: "auto",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.4)", transform: "translate3d(-50%, 0, 0)"
+            });
+
+            const prevBtn = document.createElement("span");
+            prevBtn.className = "pi pi-chevron-left";
+            prevBtn.style.cursor = "pointer";
+            prevBtn.onclick = (ev) => {
+                ev.stopPropagation();
+                cardObj.currentImageIndex = (cardObj.currentImageIndex - 1 + state.images.length) % state.images.length;
+                renderCardImages(cardObj, state, keepAspect);
+            };
+
+            const label = document.createElement("span");
+            label.className = "comfy-sidebar-batch-label";
+            label.textContent = `${idx + 1}/${state.images.length}`;
+            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
+                };
+                resetAllCardHoverStates(); // Prevent ghost hover handles
+                renderDOM();
+            };
+
+            const nextBtn = document.createElement("span");
+            nextBtn.className = "pi pi-chevron-right";
+            nextBtn.style.cursor = "pointer";
+            nextBtn.onclick = (ev) => {
+                ev.stopPropagation();
+                cardObj.currentImageIndex = (cardObj.currentImageIndex + 1) % state.images.length;
+                renderCardImages(cardObj, state, keepAspect);
+            };
+
+            navBar.append(prevBtn, label, nextBtn);
+            wrapper.appendChild(navBar);
+        }
+
+        const label = navBar.querySelector(".comfy-sidebar-batch-label");
+        if (label) label.textContent = `${idx + 1}/${state.images.length}`;
+    } else {
+        if (navBar) navBar.remove();
+    }
+}
+
+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);
+        globalClickRegistered = false;
+        return;
+    }
+    const sidebar = State.sidebarContainer;
+    const clickedInsideSidebar = sidebar && sidebar.contains(e.target);
+    const clickedFullscreenOverlay = e.target.closest('div[style*="zIndex: 999"]');
+    
+    if (!clickedInsideSidebar && !clickedFullscreenOverlay) {
+        State.activeSubmenuPromptId = null;
+        State.activeSubmenuBatchImages = null;
+        resetAllCardHoverStates(); // Reset stale overlays when clicking away
+        renderDOM();
+        document.removeEventListener("click", handleGlobalClick, true);
+        globalClickRegistered = false;
+    }
+};
+
 let renderTimeout = null;
 export function renderDOM() {
     if (renderTimeout) cancelAnimationFrame(renderTimeout);
@@ -265,6 +525,304 @@ export function renderDOM() {
         const keepAspect = app.ui.settings.getSettingValue("Comfy Sidebar.Keep Object Aspect Ratio") ?? true;
         const showWorkingNode = app.ui.settings.getSettingValue("Comfy Sidebar.Show Working Node Name") ?? true;
 
+        const headerTitle = State.sidebarContainer.querySelector("h3");
+        const headerSearchIcon = State.sidebarContainer.querySelector(".pi-search");
+        const headerActions = State.sidebarContainer.querySelector(".pi-eraser")?.parentNode;
+
+        const styleActionBtn = (btn) => {
+            Object.assign(btn.style, {
+                display: "inline-flex",
+                alignItems: "center", justifyContent: "center",
+                width: "32px", height: "32px",
+                backgroundColor: "rgba(0, 0, 0, 0.75)",
+                color: "#e2e8f0",
+                fontSize: "14px",
+                borderRadius: "6px",
+                cursor: "pointer",
+                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
+            });
+            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;
+
+            if (headerTitle) {
+                headerTitle.textContent = `Batch of #${batchInfo.pid}`;
+                headerTitle.style.cursor = "pointer";
+                headerTitle.title = "Go Back to Queue";
+                headerTitle.onclick = () => { State.activeSubmenuBatchImages = null; resetAllCardHoverStates(); renderDOM(); };
+            }
+            if (headerSearchIcon) headerSearchIcon.style.display = "none";
+            if (headerActions) headerActions.style.display = "none";
+
+            if (!globalClickRegistered) {
+                document.addEventListener("click", handleGlobalClick, true);
+                globalClickRegistered = true;
+            }
+
+            const targetElements = [];
+
+            batchInfo.images.forEach((img, index) => {
+                const cardId = `batch-${batchInfo.pid}-${index}`;
+                let cardObj = cardElements.get(cardId);
+
+                if (!cardObj) {
+                    const card = document.createElement("div");
+                    card.className = "comfy-sidebar-card completed";
+                    card.style.position = "relative";
+
+                    const timerEl = document.createElement("div");
+                    timerEl.className = "comfy-sidebar-card-timer";
+                    timerEl.textContent = `Image ${index + 1}/${batchInfo.images.length}`;
+                    timerEl.style.display = "block";
+                    timerEl.style.transform = "translateZ(0)";
+
+                    const dimEl = document.createElement("div");
+                    Object.assign(dimEl.style, {
+                        position: "absolute", top: "6px", right: "8px", fontSize: "10px",
+                        fontFamily: "monospace", opacity: "0.7", background: "rgba(0, 0, 0, 0.6)",
+                        padding: "2px 4px", borderRadius: "3px", pointerEvents: "none", zIndex: "5", color: "#fff",
+                        display: "none", transform: "translateZ(0)"
+                    });
+
+                    const grid = document.createElement("div");
+                    grid.style.display = "flex"; grid.style.flexDirection = "column"; grid.style.gap = "6px";
+
+                    const p = document.createElement("div");
+                    Object.assign(p.style, {
+                        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",
+                        flexDirection: "column", gap: "4px", zIndex: "20"
+                    });
+
+                    const btnImg = document.createElement("span");
+                    btnImg.className = "pi pi-image";
+                    btnImg.title = "Download Object";
+                    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",
+                        flexDirection: "column", gap: "4px", zIndex: "20"
+                    });
+
+                    const btnFocus = document.createElement("span");
+                    btnFocus.className = "pi pi-eye";
+                    btnFocus.title = "Show Node";
+                    styleActionBtn(btnFocus);
+                    leftHoverPanel.appendChild(btnFocus);
+
+                    card.append(timerEl, dimEl, grid, p, hoverPanel, leftHoverPanel);
+                    cardObj = { element: card, timerEl, dimEl, grid, placeholder: p, hoverPanel, leftHoverPanel, btnFocus, btnImg, firstImgElement: null };
+                    cardElements.set(cardId, cardObj);
+
+                    card.addEventListener("mouseenter", () => {
+                        cardObj.hoverPanel.style.display = "flex";
+                        cardObj.leftHoverPanel.style.display = "flex";
+                    });
+                    card.addEventListener("mouseleave", () => {
+                        cardObj.hoverPanel.style.display = "none";
+                        cardObj.leftHoverPanel.style.display = "none";
+                    });
+                }
+
+                cardObj.placeholder.style.display = "none";
+
+                cardObj.btnImg.style.display = "inline-flex";
+                cardObj.btnImg.onclick = (ev) => {
+                    ev.stopPropagation();
+                    const a = document.createElement("a");
+                    a.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
+                    a.download = img.filename || "output";
+                    a.click();
+                };
+
+                // Focus/center target node inside Batch Explorer Submenu
+                const nodeId = findNodeIdForImage(batchInfo, img);
+                if (nodeId) {
+                    cardObj.btnFocus.style.display = "inline-flex";
+                    cardObj.btnFocus.onclick = (ev) => {
+                        ev.stopPropagation();
+                        const node = app.graph.getNodeById(Number(nodeId));
+                        if (node) {
+                            app.canvas.centerOnNode(node);
+                            app.canvas.selectNode(node);
+                        }
+                    };
+                } else {
+                    cardObj.btnFocus.style.display = "none";
+                }
+
+                renderCardImages(cardObj, { pid: batchInfo.pid, images: [img], workflow: batchInfo.workflow }, keepAspect);
+
+                targetElements.push(cardObj.element);
+            });
+
+            targetElements.forEach((el, index) => { if (State.cardStack.children[index] !== el) State.cardStack.insertBefore(el, State.cardStack.children[index] || null); });
+            while (State.cardStack.children.length > targetElements.length) State.cardStack.removeChild(State.cardStack.lastChild);
+            return;
+        }
+
+        // --- SUBMENU 1: WORKFLOW OUTPUTS EXPLORER ---
+        if (State.activeSubmenuPromptId) {
+            const st = promptStates.get(State.activeSubmenuPromptId);
+            if (!st) {
+                State.activeSubmenuPromptId = null;
+                renderDOM();
+                return;
+            }
+
+            // Sync Header UI State for the explorer view
+            if (headerTitle) {
+                headerTitle.textContent = `Outputs of #${State.activeSubmenuPromptId}`;
+                headerTitle.style.cursor = "pointer";
+                headerTitle.title = "Go Back to Queue";
+                headerTitle.onclick = () => { State.activeSubmenuPromptId = null; resetAllCardHoverStates(); renderDOM(); };
+            }
+            if (headerSearchIcon) headerSearchIcon.style.display = "none";
+            if (headerActions) headerActions.style.display = "none";
+
+            if (!globalClickRegistered) {
+                document.addEventListener("click", handleGlobalClick, true);
+                globalClickRegistered = true;
+            }
+
+            const outputs = getRunOutputs(st.nodeOutputs, st.workflow);
+            const targetElements = [];
+
+            outputs.forEach((out) => {
+                const cardId = `submenu-${st.pid}-${out.nodeId}`;
+                let cardObj = cardElements.get(cardId);
+                
+                if (!cardObj) {
+                    const card = document.createElement("div");
+                    card.className = "comfy-sidebar-card completed";
+                    card.style.position = "relative";
+                    
+                    const timerEl = document.createElement("div"); 
+                    timerEl.className = "comfy-sidebar-card-timer";
+                    const node = st.workflow?.nodes?.find(n => String(n.id) === String(out.nodeId));
+                    timerEl.textContent = node ? (node.title || node.type) : `Node #${out.nodeId}`;
+                    timerEl.style.display = "block";
+                    timerEl.style.transform = "translateZ(0)";
+
+                    const dimEl = document.createElement("div");
+                    Object.assign(dimEl.style, {
+                        position: "absolute", top: "6px", right: "8px", fontSize: "10px",
+                        fontFamily: "monospace", opacity: "0.7", background: "rgba(0, 0, 0, 0.6)",
+                        padding: "2px 4px", borderRadius: "3px", pointerEvents: "none", zIndex: "5", color: "#fff",
+                        display: "none", transform: "translateZ(0)"
+                    });
+
+                    const grid = document.createElement("div"); 
+                    grid.style.display = "flex"; grid.style.flexDirection = "column"; grid.style.gap = "6px";
+                    
+                    const p = document.createElement("div"); 
+                    Object.assign(p.style, { 
+                        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",
+                        flexDirection: "column", gap: "4px", zIndex: "20"
+                    });
+
+                    const btnImg = document.createElement("span");
+                    btnImg.className = "pi pi-image";
+                    btnImg.title = "Download Object";
+                    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",
+                        flexDirection: "column", gap: "4px", zIndex: "20"
+                    });
+
+                    const btnFocus = document.createElement("span");
+                    btnFocus.className = "pi pi-eye";
+                    btnFocus.title = "Show Node";
+                    styleActionBtn(btnFocus);
+                    leftHoverPanel.appendChild(btnFocus);
+                    
+                    card.append(timerEl, dimEl, grid, p, hoverPanel, leftHoverPanel);
+                    cardObj = { element: card, timerEl, dimEl, grid, placeholder: p, hoverPanel, leftHoverPanel, btnFocus, btnImg, firstImgElement: null };
+                    cardElements.set(cardId, cardObj);
+
+                    card.addEventListener("mouseenter", () => {
+                        cardObj.hoverPanel.style.display = "flex";
+                        cardObj.leftHoverPanel.style.display = "flex";
+                    });
+                    card.addEventListener("mouseleave", () => {
+                        cardObj.hoverPanel.style.display = "none";
+                        cardObj.leftHoverPanel.style.display = "none";
+                    });
+                }
+
+                if (out.images && out.images.length > 0) {
+                    cardObj.placeholder.style.display = "none";
+                    
+                    cardObj.btnImg.style.display = "inline-flex";
+                    cardObj.btnImg.onclick = (ev) => {
+                        ev.stopPropagation();
+                        out.images.forEach(img => {
+                            const a = document.createElement("a");
+                            a.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
+                            a.download = img.filename || "output";
+                            a.click();
+                        });
+                    };
+
+                    // Focus/center target node inside Workflow outputs Submenu
+                    cardObj.btnFocus.onclick = (ev) => {
+                        ev.stopPropagation();
+                        const node = app.graph.getNodeById(Number(out.nodeId));
+                        if (node) {
+                            app.canvas.centerOnNode(node);
+                            app.canvas.selectNode(node);
+                        }
+                    };
+
+                    renderCardImages(cardObj, { pid: st.pid, images: out.images, workflow: st.workflow }, keepAspect);
+                } else {
+                    cardObj.btnImg.style.display = "none";
+                    cardObj.placeholder.style.display = "block";
+                    cardObj.placeholder.textContent = "No Outputs";
+                }
+
+                targetElements.push(cardObj.element);
+            });
+
+            targetElements.forEach((el, index) => { if (State.cardStack.children[index] !== el) State.cardStack.insertBefore(el, State.cardStack.children[index] || null); });
+            while (State.cardStack.children.length > targetElements.length) State.cardStack.removeChild(State.cardStack.lastChild);
+            return;
+        }
+
+        // --- STANDARD QUEUE RENDER LOGIC ---
+        if (headerTitle) {
+            headerTitle.textContent = "Queue";
+            headerTitle.style.cursor = "default";
+            headerTitle.onclick = null;
+        }
+        if (headerSearchIcon) headerSearchIcon.style.display = "inline";
+        if (headerActions) headerActions.style.display = "flex";
+
         let tasksArray = Array.from(promptStates.values());
         if (showPendingSummary) tasksArray = tasksArray.filter(t => t.status !== "pending");
         if (State.currentSearchQuery) tasksArray = tasksArray.filter(t => matchesFilter(t, State.currentSearchQuery));
@@ -303,47 +861,115 @@ export function renderDOM() {
                 const pb = document.createElement("div"); Object.assign(pb.style, { width: `0%`, height: "100%", background: "#3b82f6", transition: "width 0.1s linear" });
                 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" });
-                const hoverPanel = document.createElement("div"); Object.assign(hoverPanel.style, { position: "absolute", bottom: "4px", right: "4px", display: "none", gap: "12px", background: "rgba(0,0,0,0.85)", padding: "8px 12px", borderRadius: "4px", zIndex: "20" });
                 
-                const btnImg = document.createElement("span"); btnImg.className = "pi pi-image"; Object.assign(btnImg.style, { cursor: "pointer", fontSize: "20px", color: "#aaa" });
-                const btnJson = document.createElement("span"); btnJson.className = "pi pi-file"; Object.assign(btnJson.style, { cursor: "pointer", fontSize: "20px", color: "#aaa" });
-                const btnDel = document.createElement("span"); 
-                btnDel.className = "pi pi-trash"; 
-                Object.assign(btnDel.style, { 
-                    cursor: "pointer", 
-                    fontSize: "20px", 
-                    color: "#dc3545", 
-                    transition: "all 0.1s ease-in-out",
-                    padding: "2px",
-                    transform: "scale(1)"
+                // 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", 
+                    flexDirection: "column", gap: "4px", zIndex: "20" 
                 });
+
+                const btnImg = document.createElement("span"); btnImg.className = "pi pi-image"; btnImg.title = "Download Object"; styleActionBtn(btnImg);
+                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", 
+                    flexDirection: "column", gap: "4px", zIndex: "20" 
+                });
+
+                const btnFocus = document.createElement("span");
+                btnFocus.className = "pi pi-eye";
+                btnFocus.title = "Show Node";
+                styleActionBtn(btnFocus);
+
+                const leftHoverBtn = document.createElement("span");
+                leftHoverBtn.className = "pi pi-images";
+                leftHoverBtn.title = "View all intermediate outputs";
+                styleActionBtn(leftHoverBtn);
+                
+                leftHoverBtn.onclick = (ev) => {
+                    ev.stopPropagation();
+                    State.activeSubmenuPromptId = state.pid;
+                    resetAllCardHoverStates(); // Reset standard sidebar hover states before opening submenu
+                    renderDOM();
+                };
+
                 hoverPanel.append(btnImg, btnJson, btnDel);
-                card.append(timerEl, cancelX, sBadge, grid, p, pt, statusText, hoverPanel);
+                leftHoverPanel.append(btnFocus, leftHoverBtn);
+
+                card.append(timerEl, cancelX, sBadge, grid, p, pt, statusText, hoverPanel, leftHoverPanel);
                 
-                cardObj = { element: card, timerEl, statusBadge: sBadge, grid, placeholder: p, progressContainer: pt, progressBar: pb, cancelBtn: cancelX, hoverPanel, btnImg, btnJson, btnDel, statusText, firstImgElement: null, lastImagesSignature: "" };
+                cardObj = { element: card, timerEl, statusBadge: sBadge, grid, placeholder: p, progressContainer: pt, progressBar: pb, cancelBtn: cancelX, hoverPanel, leftHoverPanel, btnFocus, leftHoverBtn, btnImg, btnJson, btnDel, statusText, firstImgElement: null, lastImagesSignature: "" };
                 
-                card.addEventListener("mouseenter", () => { if (state.status !== "active" && state.status !== "pending") cardObj.hoverPanel.style.display = "flex"; });
-                card.addEventListener("mouseleave", () => cardObj.hoverPanel.style.display = "none");
+                card.addEventListener("mouseenter", () => { 
+                    if (state.status !== "active" && state.status !== "pending") {
+                        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) {
+                            cardObj.btnFocus.style.display = "inline-flex";
+                            cardObj.btnFocus.onclick = (ev) => {
+                                ev.stopPropagation();
+                                const node = app.graph.getNodeById(Number(nodeId));
+                                if (node) {
+                                    app.canvas.centerOnNode(node);
+                                    app.canvas.selectNode(node);
+                                }
+                            };
+                        } else {
+                            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)) {
+                            cardObj.leftHoverBtn.style.display = "inline-flex";
+                        } else {
+                            cardObj.leftHoverBtn.style.display = "none";
+                        }
+                    } 
+                });
+                card.addEventListener("mouseleave", () => {
+                    cardObj.hoverPanel.style.display = "none";
+                    cardObj.leftHoverPanel.style.display = "none";
+                });
                 
                 card.addEventListener("dragstart", (e) => {
-                    if (cardObj.firstImgElement) e.dataTransfer.setDragImage(cardObj.firstImgElement, 15, 15);
-                    if (state.images && state.images[0]) {
-                        State.currentDraggedImgData = { ...state.images[0], workflow: state.workflow };
-                        const img = state.images[0];
-                        const fileUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
-                        try { e.dataTransfer.setData("DownloadURL", `image/png:${img.filename || "output.png"}:${fileUrl}`); e.dataTransfer.setData("text/uri-list", fileUrl); e.dataTransfer.setData("text/plain", fileUrl); e.dataTransfer.items.add(new File([""], img.filename || "output.png", { type: "image/png" })); } catch (err) {}
-                    } else if (state.workflow) {
-                        State.currentDraggedImgData = { workflow: state.workflow };
+                    // 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);
                         const jsonStr = JSON.stringify(state.workflow, null, 2);
-                        try { e.dataTransfer.setData("DownloadURL", `application/json:workflow_${state.pid}.json:data:application/json;base64,` + btoa(unescape(encodeURIComponent(jsonStr)))); e.dataTransfer.setData("text/plain", jsonStr); e.dataTransfer.setData("application/json", jsonStr); } catch (err) {}
+                        try { 
+                            e.dataTransfer.setData("DownloadURL", `application/json:workflow_${state.pid}.json:data:application/json;base64,` + btoa(unescape(encodeURIComponent(jsonStr)))); 
+                            e.dataTransfer.setData("text/plain", jsonStr); 
+                            e.dataTransfer.setData("application/json", jsonStr); 
+                        } catch (err) {}
+                        e.dataTransfer.effectAllowed = "copy";
                     }
-                    e.dataTransfer.effectAllowed = "copy";
                 });
+                cardObj.element.id = `card-${state.pid}`; // set ID helper
                 cardElements.set(state.pid, cardObj);
             }
 
             cardObj.element.className = `comfy-sidebar-card ${state.status}`;
-            cardObj.element.setAttribute("draggable", "true");
+            
+            // 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");
+            } else {
+                cardObj.element.setAttribute("draggable", "true");
+            }
 
             if (state.status === "active") {
                 cardObj.timerEl.textContent = state.startTime ? ((Date.now() - state.startTime) / 1000).toFixed(2) + "s" : "...";
@@ -377,12 +1003,12 @@ export function renderDOM() {
             }
 
             if (state.images && state.images.length > 0) {
-                cardObj.btnImg.style.display = "inline";
+                cardObj.btnImg.style.display = "inline-flex";
                 cardObj.btnImg.onclick = (ev) => { ev.stopPropagation(); state.images.forEach(img => { const a = document.createElement("a"); a.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`; a.download = img.filename || "output"; a.click(); }); };
             } else cardObj.btnImg.style.display = "none";
 
             if (state.workflow) {
-                cardObj.btnJson.style.display = "inline";
+                cardObj.btnJson.style.display = "inline-flex";
                 cardObj.btnJson.onclick = (ev) => { ev.stopPropagation(); const blob = new Blob([JSON.stringify(state.workflow, null, 2)], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `workflow_${state.pid}.json`; a.click(); URL.revokeObjectURL(url); };
             } else cardObj.btnJson.style.display = "none";
 
@@ -390,12 +1016,10 @@ export function renderDOM() {
             const resetDeleteBtn = () => { 
                 isDeletePending = false; 
                 Object.assign(cardObj.btnDel.style, { 
-                    color: "#dc3545", 
-                    background: "none", 
-                    padding: "2px", 
-                    transform: "scale(1)" 
+                    color: "#e2e8f0", 
+                    backgroundColor: "rgba(0, 0, 0, 0.75)"
                 }); 
-                cardObj.btnDel.title = "Delete Element from History"; 
+                cardObj.btnDel.title = "Delete Card"; 
                 if (deleteTimeout) { clearTimeout(deleteTimeout); deleteTimeout = null; } 
             };
             
@@ -405,10 +1029,7 @@ export function renderDOM() {
                     isDeletePending = true; 
                     Object.assign(cardObj.btnDel.style, { 
                         color: "#fff", 
-                        background: "#dc3545", 
-                        borderRadius: "4px", 
-                        padding: "2px", 
-                        transform: "scale(1.2)" 
+                        backgroundColor: "#dc3545" // Changes to solid red on warning confirmation
                     }); 
                     cardObj.btnDel.title = "Click again to confirm deletion";
                     deleteTimeout = setTimeout(resetDeleteBtn, 1000);
@@ -426,104 +1047,13 @@ export function renderDOM() {
                     cardObj.grid.innerHTML = ""; cardObj.firstImgElement = null; cardObj.placeholder.style.display = "block";
                 } else {
                     cardObj.placeholder.style.display = "none";
-// Check if we can reuse elements (count matches AND tag types match)
-                    let canReuse = cardObj.grid.children.length === state.images.length;
-                    if (canReuse) {
-                        state.images.forEach((img, idx) => {
-                            const src = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
-                            const wrapper = cardObj.grid.children[idx];
-                            // Fallback in case the DOM still has old unwrapped elements
-                            const mediaEl = (wrapper.tagName === "IMG" || wrapper.tagName === "VIDEO") ? wrapper : wrapper.querySelector("img, video");
-                            if (!mediaEl || isVideoFormat(src) !== (mediaEl.tagName.toLowerCase() === "video")) canReuse = false;
-                        });
-                    }
-
-                    if (canReuse) {
-                        state.images.forEach((img, idx) => {
-                            let src = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
-                            const isVideo = isVideoFormat(src);
-                            if (isVideo) src = src + "#t=0.001"; // Keep the first-frame trick on update
-
-                            const wrapper = cardObj.grid.children[idx];
-                            const mediaEl = (wrapper.tagName === "IMG" || wrapper.tagName === "VIDEO") ? wrapper : wrapper.querySelector("img, video");
-                            
-                            if (mediaEl.getAttribute("src") !== src && mediaEl.src !== src) {
-                                if (src.startsWith("blob:") && !isVideo) { 
-                                    const tempImg = new Image(); 
-                                    tempImg.onload = () => { 
-                                        const oldBlob = mediaEl._lastBlob; 
-                                        mediaEl.src = src; 
-                                        mediaEl._lastBlob = src; 
-                                        if (oldBlob && oldBlob !== src) try { URL.revokeObjectURL(oldBlob); } catch(e){} 
-                                    }; 
-                                    tempImg.src = src; 
-                                }
-                                else mediaEl.src = src;
-                            }
-                        });
-                    } else {
-                        cardObj.grid.innerHTML = ""; cardObj.firstImgElement = null;
-                        state.images.forEach(img => {
-                            const src = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
-                            const isVideo = isVideoFormat(src);
-                            
-                            // Container to hold both the media and the play icon
-                            const wrapper = document.createElement("div");
-                            Object.assign(wrapper.style, { position: "relative", width: "100%", display: "block" });
-
-                            const thumb = isVideo ? document.createElement("video") : document.createElement("img");
-                            Object.assign(thumb.style, { width: "100%", borderRadius: "2px", display: "block", cursor: "zoom-in" });
-                            
-                            if (isVideo) { 
-                                thumb.muted = true; 
-                                thumb.playsInline = true; 
-                                thumb.preload = "metadata";
-                                thumb.loop = true;
-                                
-                                // Create the Play Icon overlay with perfectly centered scalable SVG
-                                const playIcon = document.createElement("div");
-                                Object.assign(playIcon.style, {
-                                    position: "absolute", top: "0", left: "0", width: "100%", height: "100%",
-                                    pointerEvents: "none", zIndex: "5", transition: "opacity 0.2s ease"
-                                });
-                                
-                                // The radius 16.65 ensures the circle is exactly 1/3 of the shorter edge.
-                                // The polygon coordinates are an optically centered equilateral triangle.
-                                playIcon.innerHTML = `
-                                    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">
-                                        <circle cx="50" cy="50" r="16.65" fill="rgba(0, 0, 0, 0.55)" />
-                                        <polygon points="45.7,42.5 45.7,57.5 58.7,50" fill="rgba(255, 255, 255, 0.9)" />
-                                    </svg>
-                                `;
-                                wrapper.appendChild(playIcon);
-
-                                // Play on Hover, Pause on Leave, and fade out the play button
-                                thumb.onmouseenter = () => { playIcon.style.opacity = "0"; thumb.play().catch(()=>{}); };
-                                thumb.onmouseleave = () => { playIcon.style.opacity = "1"; thumb.pause(); };
-                            }
-                            
-                            if (!keepAspect) { thumb.style.aspectRatio = "1 / 1"; thumb.style.objectFit = "cover"; }
-                            thumb.setAttribute("draggable", "false"); 
-                            
-                            if (!isVideo) {
-                                thumb.onload = () => { if (keepAspect && thumb.naturalWidth && thumb.naturalHeight) thumb.style.aspectRatio = `${thumb.naturalWidth} / ${thumb.naturalHeight}`; };
-                                if (src.startsWith("blob:")) { const tempImg = new Image(); tempImg.onload = () => { thumb.src = src; thumb._lastBlob = src; }; tempImg.src = src; } else thumb.src = src;
-                            } else {
-                                thumb.onloadedmetadata = () => { if (keepAspect && thumb.videoWidth && thumb.videoHeight) thumb.style.aspectRatio = `${thumb.videoWidth} / ${thumb.videoHeight}`; }; 
-                                thumb.src = src + "#t=0.001";
-                            }
-                            thumb.onclick = (ev) => { ev.stopPropagation(); showFullscreenPreview(state.images.map(i => i.url ? i.url : `/view?filename=${encodeURIComponent(i.filename)}&type=${i.type}&subfolder=${encodeURIComponent(i.subfolder)}`)); };
-                            
-                            wrapper.insertBefore(thumb, wrapper.firstChild);
-                            if (!cardObj.firstImgElement) cardObj.firstImgElement = thumb;
-                            cardObj.grid.appendChild(wrapper);
-                        });
-                    }
+                    renderCardImages(cardObj, state, keepAspect);
                 }
                 cardObj.lastImagesSignature = currentImagesSignature;
             }
 
             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 {

js/utils.js

@@ -1,28 +1,48 @@
+import { app } from "/scripts/app.js";
+
 export const isVideoFormat = (url) => {
     const s = url.toLowerCase();
     return s.includes(".mp4") || s.includes(".webm");
 };
 
-export function findImagesInOutputs(outputs) {
+function isNodeIgnored(nodeId, workflow) {
+    if (!workflow || !workflow.nodes) {
+        // Fallback to active graph if workflow is missing (e.g. during live execution)
+        const liveNode = app.graph?.getNodeById(Number(nodeId));
+        if (liveNode) {
+            return !!(liveNode.properties && liveNode.properties.ignoreInQueue);
+        }
+        return false;
+    }
+    const node = workflow.nodes.find(n => String(n.id) === String(nodeId));
+    return !!(node && node.properties && node.properties.ignoreInQueue);
+}
+
+// Robust media output scanner supporting both arrays and single objects (gifs, mp4s, etc.)
+export function findImagesInOutputs(outputs, workflow) {
     const list = [];
     if (!outputs) return list;
     for (const nodeId in outputs) {
+        if (isNodeIgnored(nodeId, workflow)) continue;
         for (const key in outputs[nodeId]) {
             const val = outputs[nodeId][key];
             if (Array.isArray(val)) {
                 val.forEach(item => {
                     if (item && typeof item === 'object' && item.filename) list.push(item);
                 });
+            } else if (val && typeof val === 'object' && val.filename) {
+                list.push(val);
             }
         }
     }
     return list;
 }
 
-export function findTextsInOutputs(outputs) {
+export function findTextsInOutputs(outputs, workflow) {
     const list = [];
     if (!outputs) return list;
     for (const nodeId in outputs) {
+        if (isNodeIgnored(nodeId, workflow)) continue;
         for (const key in outputs[nodeId]) {
             const val = outputs[nodeId][key];
             if (Array.isArray(val)) {
@@ -45,6 +65,19 @@ export function findTextsInOutputs(outputs) {
     return list;
 }
 
+// Organizes raw outputs dictionaries into lists of individual node-level output blocks (ignoring text-only outputs)
+export function getRunOutputs(nodeOutputs, workflow) {
+    const list = [];
+    if (!nodeOutputs) return list;
+    for (const nodeId in nodeOutputs) {
+        const imgs = findImagesInOutputs({ [nodeId]: nodeOutputs[nodeId] }, workflow);
+        if (imgs.length > 0) {
+            list.push({ nodeId, images: imgs });
+        }
+    }
+    return list;
+}
+
 export function matchesFilter(state, query) {
     if (!query) return true;
     const q = query.toLowerCase();