Drag&drop for unfinished tasks hooks up the workflow JSON. Updated readme

README.md

@@ -13,7 +13,8 @@ A lightweight, high-performance ComfyUI extension that replaces the cluttered st
 * **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.
 * 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]** 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" />
 
@@ -32,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/dragdrop.js

@@ -1,4 +1,5 @@
 import { app } from "/scripts/app.js";
+import { State } from "./state.js";
 
 async function uploadDroppedImageToInput(imageObj) {
     const src = `/view?filename=${encodeURIComponent(imageObj.filename)}&type=${imageObj.type || 'output'}&subfolder=${encodeURIComponent(imageObj.subfolder || '')}`;
@@ -26,6 +27,13 @@ export function setupDragAndDrop() {
     });
 
     document.addEventListener("drop", async (e) => {
+        // Cancel loading entirely 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) {
+            return;
+        }
+
         const canvas = app.canvas;
         if (!canvas || !canvas.graph) return;
 

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 = () => {};
@@ -81,8 +81,8 @@ const concludeRun = async (pid, statusStr) => {
         if (hItem && hItem[pid]) {
             if (!st.workflow) st.workflow = hItem[pid].extra_data?.extra_pnginfo?.workflow || null;
             st.nodeOutputs = hItem[pid].outputs; // Store full outputs dictionary!
-            if (st.images.length === 0) st.images = findImagesInOutputs(hItem[pid].outputs);
-            st.texts = findTextsInOutputs(hItem[pid].outputs);
+            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);
@@ -165,12 +165,12 @@ export function setupApiListeners() {
     api.addEventListener("executed", (e) => {
         if (promptStates.has(e.detail.prompt_id)) {
             const st = promptStates.get(e.detail.prompt_id);
-            const finalImgs = findImagesInOutputs({ output: e.detail.output });
+            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({ output: e.detail.output });
+            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;
@@ -203,26 +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,
             nodeOutputs: historyData[id].outputs, // Store full outputs dictionary!
-            workflow: historyData[id].extra_data?.extra_pnginfo?.workflow || null,
+            workflow: workflow,
             progressText: "", timestamp: State.globalOrderCounter, rendered: true
         });
     });

js/sidebar.js

@@ -6,6 +6,45 @@ import { setupSidebarUI, applySidebarOverride, findOurSidebarButton, setSyncQueu
 import { setupApiListeners, initSessionAndHistory, syncQueue, setUIDependencies } from "./queue.js";
 import { applyClassicLayout, setupPropertiesPanelToggleFix, syncClassicLayout } from "./layout.js";
 
+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",
     
@@ -44,8 +83,8 @@ app.registerExtension({
                 setTimeout(() => {
                     if (typeof syncClassicLayout === "function") syncClassicLayout();
                 }, 0);
-            }
-        });
+                }
+            });
 
         // Add the toggle setting for Graph Button under "Hide Junk"
         app.ui.settings.addSetting({ 
@@ -103,14 +142,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

@@ -66,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/ui.js

@@ -367,26 +367,32 @@ function renderCardImages(cardObj, state, keepAspect) {
         mediaEl.onmouseenter = () => { playIcon.style.opacity = "0"; mediaEl.play().catch(()=>{}); };
         mediaEl.onmouseleave = () => { playIcon.style.opacity = "1"; mediaEl.pause(); };
     } else {
-        mediaEl.setAttribute("draggable", "true");
-        mediaEl.onload = () => { 
-            applyDimensions(mediaEl.naturalWidth, mediaEl.naturalHeight);
-        };
+        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;
+        }
 
         const playIcon = wrapper.querySelector(".comfy-sidebar-play-icon");
         if (playIcon) playIcon.remove();
-
-        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;
     }
 
     // Smooth in-memory source swapping for blob live previews
@@ -604,7 +610,7 @@ export function renderDOM() {
 
                     const btnFocus = document.createElement("span");
                     btnFocus.className = "pi pi-eye";
-                    btnFocus.title = "Show Node"; // Renamed
+                    btnFocus.title = "Show Node";
                     styleActionBtn(btnFocus);
                     leftHoverPanel.appendChild(btnFocus);
 
@@ -683,7 +689,7 @@ export function renderDOM() {
                 globalClickRegistered = true;
             }
 
-            const outputs = getRunOutputs(st.nodeOutputs);
+            const outputs = getRunOutputs(st.nodeOutputs, st.workflow);
             const targetElements = [];
 
             outputs.forEach((out) => {
@@ -740,7 +746,7 @@ export function renderDOM() {
 
                     const btnFocus = document.createElement("span");
                     btnFocus.className = "pi pi-eye";
-                    btnFocus.title = "Show Node"; // Renamed
+                    btnFocus.title = "Show Node";
                     styleActionBtn(btnFocus);
                     leftHoverPanel.appendChild(btnFocus);
                     
@@ -865,7 +871,7 @@ export function renderDOM() {
 
                 const btnFocus = document.createElement("span");
                 btnFocus.className = "pi pi-eye";
-                btnFocus.title = "Show Node"; // Renamed
+                btnFocus.title = "Show Node";
                 styleActionBtn(btnFocus);
 
                 const leftHoverBtn = document.createElement("span");
@@ -910,7 +916,7 @@ export function renderDOM() {
                         }
 
                         // Show explorer view button if this run yielded multiple node outputs
-                        const outputs = getRunOutputs(state.nodeOutputs);
+                        const outputs = getRunOutputs(state.nodeOutputs, state.workflow);
                         if (outputs.length > 1) {
                             cardObj.leftHoverBtn.style.display = "inline-flex";
                         } else {
@@ -924,9 +930,10 @@ export function renderDOM() {
                 });
                 
                 card.addEventListener("dragstart", (e) => {
-                    // Custom dragstart is only used for JSON-only workflows to supply a local DownloadURL.
-                    // For image cards, dragging is handled natively by the browser on the child <img> tag.
-                    if (state.workflow && (!state.images || state.images.length === 0)) {
+                    // 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 { 
@@ -943,9 +950,10 @@ export function renderDOM() {
 
             cardObj.element.className = `comfy-sidebar-card ${state.status}`;
             
-            // Native drag isolation: completely remove draggable flags on image containers.
+            // 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.
-            if (state.images && state.images.length > 0) {
+            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");

js/utils.js

@@ -1,13 +1,29 @@
+import { app } from "/scripts/app.js";
+
 export const isVideoFormat = (url) => {
     const s = url.toLowerCase();
     return s.includes(".mp4") || s.includes(".webm");
 };
 
+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) {
+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)) {
@@ -22,10 +38,11 @@ export function findImagesInOutputs(outputs) {
     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)) {
@@ -49,11 +66,11 @@ export function findTextsInOutputs(outputs) {
 }
 
 // Organizes raw outputs dictionaries into lists of individual node-level output blocks (ignoring text-only outputs)
-export function getRunOutputs(nodeOutputs) {
+export function getRunOutputs(nodeOutputs, workflow) {
     const list = [];
     if (!nodeOutputs) return list;
     for (const nodeId in nodeOutputs) {
-        const imgs = findImagesInOutputs({ [nodeId]: nodeOutputs[nodeId] });
+        const imgs = findImagesInOutputs({ [nodeId]: nodeOutputs[nodeId] }, workflow);
         if (imgs.length > 0) {
             list.push({ nodeId, images: imgs });
         }