fix: workflow persistence on restart, card copy button, and submenu stability

- Unified Overlay System: Reusable SidebarOverlay for all viewers.

- Performance: Debounced localStorage persistence to prevent UI stutters.

- Memory Cleanup: Proper disposal of global document/API listeners.

- UI Fix: Pending/active cards only show cancel button on hover.

README.md

@@ -17,6 +17,8 @@ A compact sidebar for ComfyUI that replaces the stock queue/history UI with a fa
 * Optionally replace the stock Job History sidebar.
 * Optional unified top bar for workflow tabs and controls.
 * Exclude selected nodes from sidebar results with `Ctrl+Q`.
+* [NEW] Ctrl-clicking the sidebar cards opens their file location or the menu for alternative actions.
+* [NEW] Ctrl-clicking the delete button places the generated file to the recycle bin.
 
 <img width="385" height="336" alt="image" src="https://github.com/user-attachments/assets/743fbf85-9281-4561-9dd0-cd9af4d8c0e4" />
 
@@ -52,9 +54,10 @@ Open **Settings → Comfy Sidebar** to configure:
 | Shortcut      | Action                                             |
 | ------------- | -------------------------------------------------- |
 | `Q`           | Toggle ComfySidebar                                |
-| `Ctrl+Q`      | Toggle sidebar output filtering for selected nodes |
+| `Ctrl+Q`      | Exclude the selected node from the sidebar outputs |
 | `Click`       | Open result preview                                |
 | `Shift+Click` | Compare another result                             |
+| `Ctrl+Click`  | Open file location/alternative action              |
 
 ## 📝 Notes
 

__init__.py

@@ -1,8 +1,183 @@
-# Standard ComfyUI extension loader
+import os
+import platform
+import subprocess
+from aiohttp import web
+from server import PromptServer
+import folder_paths
+
 NODE_CLASS_MAPPINGS = {}
 NODE_DISPLAY_NAME_MAPPINGS = {}
-
-# Tells ComfyUI to serve and load the contents of the js/ folder
 WEB_DIRECTORY = "./js"
 
-__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]
+
+
+def is_path_safe(base_dir, target_path):
+    """Prevents Path Traversal attacks."""
+    real_base = os.path.realpath(base_dir)
+    real_target = os.path.realpath(target_path)
+    return real_target == real_base or real_target.startswith(real_base + os.sep)
+
+
+def get_all_candidate_roots(subfolder="", folder_type="output"):
+    """Gathers all potential ComfyUI base directories (output, model folders, extra paths)."""
+    roots = []
+    try:
+        roots.append(folder_paths.get_output_directory())
+    except Exception:
+        pass
+
+    # Include specific model categories (loras, checkpoints, etc.)
+    categories = ["loras", "checkpoints", "vae", "unet", "clip", "embeddings", "upscale_models"]
+    if subfolder and subfolder in folder_paths.folder_names_and_paths:
+        try:
+            roots.extend(folder_paths.get_folder_paths(subfolder))
+        except Exception:
+            pass
+
+    for cat in categories:
+        try:
+            roots.extend(folder_paths.get_folder_paths(cat))
+        except Exception:
+            pass
+
+    try:
+        roots.append(folder_paths.get_input_directory())
+        roots.append(folder_paths.get_temp_directory())
+    except Exception:
+        pass
+
+    # Deduplicate while preserving existence
+    unique = []
+    for r in roots:
+        if r and r not in unique and os.path.exists(r):
+            unique.append(r)
+    return unique
+
+
+def resolve_existing_path(filename="", subfolder="", folder_type="output"):
+    """Finds the actual location of a file or folder across all candidate root directories."""
+    candidates = get_all_candidate_roots(subfolder, folder_type)
+
+    if filename:
+        for root in candidates:
+            if subfolder:
+                p1 = os.path.join(root, subfolder, filename)
+                if os.path.isfile(p1) and is_path_safe(root, p1):
+                    return p1, root
+            p2 = os.path.join(root, filename)
+            if os.path.isfile(p2) and is_path_safe(root, p2):
+                return p2, root
+
+    for root in candidates:
+        if subfolder:
+            d1 = os.path.join(root, subfolder)
+            if os.path.isdir(d1) and is_path_safe(root, d1):
+                return d1, root
+        if os.path.isdir(root):
+            return root, root
+
+    return None, None
+
+
+def open_file_in_os(target_path):
+    """Fast, native cross-platform explorer launch."""
+    system = platform.system()
+
+    if system == "Windows":
+        norm_path = os.path.normpath(target_path)
+        if not os.path.exists(norm_path):
+            raise FileNotFoundError(f"Path not found: {norm_path}")
+        if os.path.isfile(norm_path):
+            # Passed as a single argument so Windows Explorer highlights the file properly
+            subprocess.Popen(["explorer", f"/select,{norm_path}"])
+        else:
+            os.startfile(norm_path)
+
+    elif system == "Darwin":  # macOS
+        if not os.path.exists(target_path):
+            raise FileNotFoundError(f"Path not found: {target_path}")
+        if os.path.isfile(target_path):
+            subprocess.Popen(["open", "-R", target_path])
+        else:
+            subprocess.Popen(["open", target_path])
+
+    else:  # Linux / Unix
+        folder = os.path.dirname(target_path) if os.path.isfile(target_path) else target_path
+        if not os.path.exists(folder):
+            raise FileNotFoundError(f"Path not found: {folder}")
+        if "DISPLAY" in os.environ or "WAYLAND_DISPLAY" in os.environ:
+            subprocess.Popen(["xdg-open", folder], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+        else:
+            raise RuntimeError("Headless Linux server detected (no desktop GUI available).")
+
+
+@PromptServer.instance.routes.post("/comfy-sidebar/open-folder")
+async def open_folder_handler(request):
+    try:
+        data = await request.json()
+        filename = (data.get("filename") or "").strip()
+        subfolder = (data.get("subfolder") or "").strip()
+        folder_type = (data.get("type") or "output").strip()
+
+        target_path, _ = resolve_existing_path(filename, subfolder, folder_type)
+        if not target_path:
+            target_path = folder_paths.get_output_directory()
+
+        open_file_in_os(target_path)
+        return web.json_response({"success": True, "path": target_path})
+    except Exception as e:
+        return web.json_response({"error": str(e)}, status=400)
+
+
+@PromptServer.instance.routes.post("/comfy-sidebar/delete-file")
+async def delete_file_handler(request):
+    try:
+        data = await request.json()
+        filename = (data.get("filename") or "").strip()
+        subfolder = (data.get("subfolder") or "").strip()
+        folder_type = (data.get("type") or "output").strip()
+
+        if not filename:
+            return web.json_response({"error": "No filename provided"}, status=400)
+
+        target_file, root = resolve_existing_path(filename, subfolder, folder_type)
+
+        if not target_file or not os.path.isfile(target_file) or not is_path_safe(root, target_file):
+            return web.json_response({"error": "File not found or unsafe path"}, status=404)
+
+        # Try moving to Recycle Bin / Trash first, fallback to os.remove
+        try:
+            import send2trash
+            send2trash.send2trash(target_file)
+        except Exception:
+            os.remove(target_file)
+
+        return web.json_response({"success": True, "deleted": target_file})
+    except Exception as e:
+        return web.json_response({"error": str(e)}, status=500)
+
+
+@PromptServer.instance.routes.post("/comfy-sidebar/promote-output")
+async def promote_output_handler(request):
+    try:
+        import shutil
+        data = await request.json()
+        raw_filename = (data.get("filename") or "").strip()
+        filename = os.path.basename(raw_filename)
+        subfolder = (data.get("subfolder") or "").strip()
+        folder_type = (data.get("type") or "output").strip()
+
+        target_file, root = resolve_existing_path(raw_filename, subfolder, folder_type)
+        if not target_file or not os.path.isfile(target_file):
+            return web.json_response({"error": "File not found"}, status=404)
+
+        input_dir = folder_paths.get_input_directory()
+        dest_path = os.path.join(input_dir, filename)
+        if not is_path_safe(input_dir, dest_path):
+            return web.json_response({"error": "Unsafe destination path"}, status=403)
+
+        shutil.copy2(target_file, dest_path)
+        return web.json_response({"name": filename})
+    except Exception as e:
+        return web.json_response({"error": str(e)}, status=500)

js/comparison.js

@@ -1,11 +1,10 @@
 import { isVideoFormat, is3DFormat, isAudioFormat, getFilenameFromUrl } from "./utils.js";
-import { State } from "./state.js";
 import { create3DViewer } from "./viewer3d.js";
 import { createTextReader } from "./text_reader.js";
 import { stopAllAudioPlayback } from "./ui.js";
+import { SidebarOverlay } from "./overlay.js";
 
 let activeComparisonViewer = null;
-let globalKeydownHandler = null;
 
 export function isAudioViewerOpen() {
     return !!(activeComparisonViewer && activeComparisonViewer.isAudio);
@@ -24,59 +23,17 @@ const getClientY = (e) => {
 };
 
 function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () => {}) {
-    if (globalKeydownHandler) {
-        document.removeEventListener("keydown", globalKeydownHandler);
-        globalKeydownHandler = null;
-    }
+    let togglePlayFn = () => {};
 
-    const container = document.createElement("div");
-    container.className = "comfy-sidebar-comparison-overlay";
-    Object.assign(container.style, {
-        position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh",
-        background: "rgba(10, 10, 10, 0.95)", display: "flex", flexDirection: "column",
-        alignItems: "center", justifyContent: "center", zIndex: "1000",
-        boxSizing: "border-box", overflow: "hidden", pointerEvents: "auto", userSelect: "none"
-    });
-
-    const updateOverlayBounds = () => {
-        const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
-        if (sidebarEl && sidebarEl.offsetWidth > 0 && sidebarEl.isConnected) {
-            const rect = sidebarEl.getBoundingClientRect();
-            if (rect.left < window.innerWidth / 2) {
-                const leftOffset = Math.max(0, rect.right);
-                container.style.left = `${leftOffset}px`;
-                container.style.width = `calc(100vw - ${leftOffset}px)`;
-                container.style.right = "0px";
-            } else {
-                const rightOffset = Math.max(0, window.innerWidth - rect.left);
-                container.style.left = "0px";
-                container.style.width = `calc(100vw - ${rightOffset}px)`;
-                container.style.right = `${rightOffset}px`;
+    const overlay = new SidebarOverlay({
+        onDestroy,
+        onKeyDown: (e) => {
+            if (e.key === " ") {
+                e.preventDefault();
+                togglePlayFn();
             }
-            container.style.top = `${Math.max(0, rect.top)}px`;
-            container.style.height = `calc(100vh - ${Math.max(0, rect.top)}px)`;
-        } else {
-            container.style.left = "0px";
-            container.style.width = "100vw";
-            container.style.top = "0px";
-            container.style.height = "100vh";
         }
-    };
-
-    updateOverlayBounds();
-    window.addEventListener("resize", updateOverlayBounds);
-
-    const closeBtn = document.createElement("span");
-    closeBtn.className = "pi pi-times";
-    closeBtn.title = "Close (Esc)";
-    Object.assign(closeBtn.style, {
-        position: "absolute", top: "16px", right: "24px", zIndex: "30",
-        cursor: "pointer", fontSize: "20px", color: "#aaa", transition: "color 0.15s ease",
-        background: "rgba(10,10,10,0.6)", borderRadius: "50%", padding: "4px"
     });
-    closeBtn.onmouseenter = () => closeBtn.style.color = "#fff";
-    closeBtn.onmouseleave = () => closeBtn.style.color = "#aaa";
-    container.appendChild(closeBtn);
 
     const playerBox = document.createElement("div");
     Object.assign(playerBox.style, {
@@ -101,7 +58,6 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
     badge.textContent = parsedExt;
     titleRow.append(title, badge);
 
-    // Waveform visualization
     const soundwave = document.createElement("div");
     soundwave.className = "comfy-sidebar-soundwave-container";
     soundwave.style.height = "56px";
@@ -115,26 +71,21 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
         soundwave.appendChild(bar);
     });
 
-    // Scrubber
     const scrubberContainer = document.createElement("div");
     Object.assign(scrubberContainer.style, {
         width: "100%", height: "6px", background: "#334155", borderRadius: "3px",
         position: "relative", cursor: "pointer"
     });
     const scrubberFill = document.createElement("div");
-    Object.assign(scrubberFill.style, {
-        width: "0%", height: "100%", background: "#c084fc", borderRadius: "3px"
-    });
+    Object.assign(scrubberFill.style, { width: "0%", height: "100%", background: "#c084fc", borderRadius: "3px" });
     scrubberContainer.appendChild(scrubberFill);
 
-    // Controls Row
     const controlsRow = document.createElement("div");
     Object.assign(controlsRow.style, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" });
 
     const leftControls = document.createElement("div");
     Object.assign(leftControls.style, { display: "flex", alignItems: "center", gap: "10px" });
 
-    // Play & Stop SVGs
     const playIconSvg = `<svg viewBox="0 0 24 24" width="14" height="14" style="margin-left: 2px; pointer-events: none;"><polygon points="6,4 20,12 6,20" fill="#ffffff"/></svg>`;
     const stopIconSvg = `<svg viewBox="0 0 24 24" width="12" height="12" style="pointer-events: none;"><rect x="5" y="5" width="14" height="14" rx="2" fill="#ffffff"/></svg>`;
 
@@ -180,12 +131,12 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
     controlsRow.append(leftControls, rightControls);
 
     playerBox.append(titleRow, soundwave, scrubberContainer, controlsRow);
-    container.appendChild(playerBox);
+    overlay.container.appendChild(playerBox);
 
     const audioEl = document.createElement("audio");
     audioEl.src = baseSrc;
     audioEl.preload = "metadata";
-    container.appendChild(audioEl);
+    overlay.container.appendChild(audioEl);
 
     const formatTime = (t) => {
         const m = Math.floor(t / 60);
@@ -211,7 +162,7 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
         scrubberFill.style.width = "0%";
     };
 
-    const togglePlay = () => {
+    togglePlayFn = () => {
         if (audioEl.paused) {
             stopAllAudioPlayback();
             audioEl.play().catch(()=>{});
@@ -227,54 +178,25 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
         }
     };
 
-    playBtn.onclick = togglePlay;
-
+    playBtn.onclick = togglePlayFn;
     loopBtn.onclick = () => {
         audioEl.loop = !audioEl.loop;
         loopBtn.style.borderColor = audioEl.loop ? "#a855f7" : "#444";
         loopBtn.style.color = audioEl.loop ? "#c084fc" : "#aaa";
     };
-
-    speedSelect.onchange = (e) => {
-        audioEl.playbackRate = Number(e.target.value);
-    };
+    speedSelect.onchange = (e) => { audioEl.playbackRate = Number(e.target.value); };
 
     scrubberContainer.onclick = (e) => {
         const rect = scrubberContainer.getBoundingClientRect();
         const pos = (e.clientX - rect.left) / rect.width;
-        if (audioEl.duration > 0) {
-            audioEl.currentTime = pos * audioEl.duration;
-        }
+        if (audioEl.duration > 0) audioEl.currentTime = pos * audioEl.duration;
     };
 
-    const destroy = () => {
-        window.removeEventListener("resize", updateOverlayBounds);
-        if (globalKeydownHandler) {
-            document.removeEventListener("keydown", globalKeydownHandler);
-            globalKeydownHandler = null;
-        }
+    overlay.addCleanup(() => {
         audioEl.pause();
         audioEl.src = "";
-        container.remove();
-        onDestroy();
-    };
+    });
 
-    closeBtn.onclick = destroy;
-    container.onclick = (e) => {
-        if (e.target === container) destroy();
-    };
-
-    const handleKeys = (e) => {
-        if (e.key === "Escape") destroy();
-        if (e.key === " ") {
-            e.preventDefault();
-            togglePlay();
-        }
-    };
-    globalKeydownHandler = handleKeys;
-    document.addEventListener("keydown", globalKeydownHandler);
-
-    document.body.appendChild(container);
     audioEl.play().then(() => {
         playBtn.innerHTML = stopIconSvg;
         playerBox.classList.add("playing");
@@ -284,7 +206,7 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
         isAudio: true,
         loadTarget(targetSrc) {
             if (!isAudioFormat(targetSrc)) {
-                destroy();
+                overlay.destroy();
                 onSwitchMedia(targetSrc);
                 return;
             }
@@ -297,7 +219,7 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
                 playerBox.classList.add("playing");
             }).catch(()=>{});
         },
-        destroy
+        destroy: () => overlay.destroy()
     };
 }
 
@@ -312,10 +234,19 @@ const createMediaElement = (src, muted = false) => {
         el.controls = false; 
     }
     Object.assign(el.style, {
-        gridArea: "1 / 1", maxWidth: "100%", maxHeight: "80vh",
-        width: "auto", height: "auto", objectFit: "contain",
-        pointerEvents: "none", userSelect: "none", webkitUserSelect: "none"
+        gridArea: "1 / 1",
+        maxWidth: "calc(100vw - 120px)",
+        maxHeight: "calc(100vh - 120px)",
+        width: "auto",
+        height: "auto",
+        objectFit: "contain",
+        pointerEvents: isVideo ? "none" : "auto",
+        userSelect: "none",
+        webkitUserSelect: "none",
+        display: "block"
     });
+    el.draggable = false;
+    el.ondragstart = (e) => e.preventDefault();
     el.src = isVideo ? src + "#t=0.001" : src;
     return el;
 };
@@ -326,9 +257,7 @@ const setupVideoPlayback = (vid, container) => {
     let videoSyncActive = true;
     let syncAnimationFrameId = null;
 
-    const onMetaLoaded = () => {
-        vid.play().catch(()=>{});
-    };
+    const onMetaLoaded = () => { vid.play().catch(()=>{}); };
     vid.addEventListener("loadedmetadata", onMetaLoaded);
     if (vid.readyState >= 1) onMetaLoaded();
 
@@ -363,9 +292,7 @@ const setupVideoPlayback = (vid, container) => {
         position: "relative", cursor: "pointer"
     });
     const scrubberFill = document.createElement("div");
-    Object.assign(scrubberFill.style, {
-        width: "0%", height: "100%", background: "#3b82f6", borderRadius: "2px"
-    });
+    Object.assign(scrubberFill.style, { width: "0%", height: "100%", background: "#3b82f6", borderRadius: "2px" });
     scrubberContainer.appendChild(scrubberFill);
 
     const timeLabel = document.createElement("span");
@@ -398,7 +325,6 @@ const setupVideoPlayback = (vid, container) => {
 
     const syncLoop = () => {
         if (!videoSyncActive) return;
-
         const cur = vid.currentTime || 0;
         const dur = vid.duration || 0;
         if (dur > 0) {
@@ -410,7 +336,6 @@ const setupVideoPlayback = (vid, container) => {
             };
             timeLabel.textContent = `${formatTime(cur)} / ${formatTime(dur)}`;
         }
-
         playBtn.className = vid.paused ? "pi pi-play" : "pi pi-pause";
         syncAnimationFrameId = requestAnimationFrame(syncLoop);
     };
@@ -429,66 +354,28 @@ const setupVideoPlayback = (vid, container) => {
 };
 
 function createComparisonViewer(baseSrc, onDestroy = () => {}) {
-    if (globalKeydownHandler) {
-        document.removeEventListener("keydown", globalKeydownHandler);
-        globalKeydownHandler = null;
-    }
-
     const isBaseVideo = isVideoFormat(baseSrc);
+    let splitRatio = 50; 
+    let mediaB = null;
 
-    const container = document.createElement("div");
-    container.className = "comfy-sidebar-comparison-overlay";
-    Object.assign(container.style, {
-        position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh",
-        background: "rgba(10, 10, 10, 0.95)", display: "flex", flexDirection: "column",
-        zIndex: "1000", boxSizing: "border-box", overflow: "hidden",
-        pointerEvents: "auto", userSelect: "none", "-webkit-user-select": "none"
-    });
-
-    const updateOverlayBounds = () => {
-        const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
-        
-        if (sidebarEl && sidebarEl.offsetWidth > 0 && sidebarEl.isConnected) {
-            const rect = sidebarEl.getBoundingClientRect();
-            if (rect.left < window.innerWidth / 2) {
-                const leftOffset = Math.max(0, rect.right);
-                container.style.left = `${leftOffset}px`;
-                container.style.width = `calc(100vw - ${leftOffset}px)`;
-                container.style.right = "0px";
-            } else {
-                const rightOffset = Math.max(0, window.innerWidth - rect.left);
-                container.style.left = "0px";
-                container.style.width = `calc(100vw - ${rightOffset}px)`;
-                container.style.right = `${rightOffset}px`;
+    const overlay = new SidebarOverlay({
+        onDestroy,
+        onKeyDown: (e) => {
+            if (e.key === " " && mediaB) {
+                e.preventDefault();
+                updateSliderPosition(splitRatio > 50 ? 0 : 100);
             }
-            container.style.top = `${Math.max(0, rect.top)}px`;
-            container.style.height = `calc(100vh - ${Math.max(0, rect.top)}px)`;
-        } else {
-            container.style.left = "0px";
-            container.style.width = "100vw";
-            container.style.top = "0px";
-            container.style.height = "100vh";
         }
-    };
-
-    updateOverlayBounds();
-    window.addEventListener("resize", updateOverlayBounds);
-
-    let resizeObserver = null;
-    const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
-    if (sidebarEl && window.ResizeObserver) {
-        resizeObserver = new ResizeObserver(() => updateOverlayBounds());
-        resizeObserver.observe(sidebarEl);
-    }
+    });
 
     const scrollContainer = document.createElement("div");
     Object.assign(scrollContainer.style, {
         position: "absolute", top: "0", left: "0", width: "100%", height: "100%",
         display: "flex", overflow: "auto", boxSizing: "border-box",
-        padding: "54px 28px 48px 28px", scrollbarWidth: "thin",
+        padding: "48px 24px", scrollbarWidth: "thin",
         scrollbarColor: "#555 rgba(0, 0, 0, 0.3)", zIndex: "15"
     });
-    container.appendChild(scrollContainer);
+    overlay.container.appendChild(scrollContainer);
 
     const header = document.createElement("div");
     Object.assign(header.style, {
@@ -503,45 +390,18 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         ? "Video playback. Press Esc to close." 
         : "Click image to zoom (100%/Fit) | Shift+Click another card to compare.";
     header.appendChild(infoText);
-    container.appendChild(header);
-
-    const closeBtn = document.createElement("span");
-    closeBtn.className = "pi pi-times";
-    closeBtn.title = "Close (Esc)";
-    Object.assign(closeBtn.style, {
-        position: "absolute", top: "16px", right: "24px", zIndex: "30",
-        cursor: "pointer", fontSize: "20px", color: "#aaa", transition: "color 0.15s ease",
-        background: "rgba(10,10,10,0.6)", borderRadius: "50%", padding: "4px"
-    });
-    closeBtn.onmouseenter = () => closeBtn.style.color = "#fff";
-    closeBtn.onmouseleave = () => closeBtn.style.color = "#aaa";
-    container.appendChild(closeBtn);
+    overlay.container.appendChild(header);
 
     const wrapper = document.createElement("div");
     Object.assign(wrapper.style, {
         position: "relative", display: "grid", placeItems: "center",
-        maxWidth: "85%", maxHeight: "85%", margin: "auto",
-        flexShrink: "0", cursor: isBaseVideo ? "default" : "zoom-in"
+        margin: "auto", flexShrink: "0",
+        cursor: isBaseVideo ? "default" : "zoom-in"
     });
     scrollContainer.appendChild(wrapper);
 
-    const hintPrompt = document.createElement("div");
-    Object.assign(hintPrompt.style, {
-        position: "absolute", bottom: "16px", left: "50%", transform: "translateX(-50%)",
-        zIndex: "30", color: "#888", fontSize: "12px", fontFamily: "sans-serif",
-        pointerEvents: "none", background: "rgba(10,10,10,0.75)", padding: "4px 10px",
-        borderRadius: "4px", backdropFilter: "blur(4px)", boxShadow: "0 2px 6px rgba(0,0,0,0.4)"
-    });
-    hintPrompt.innerHTML = 'Tip: Hold <span style="color:#aaa;font-weight:bold;">Shift</span> while clicking sidebar cards to compare outputs side-by-side.';
-    if (isBaseVideo) {
-        hintPrompt.style.display = "none";
-    }
-    container.appendChild(hintPrompt);
-
     let mediaA = createMediaElement(baseSrc, false);
     wrapper.appendChild(mediaA);
-
-    let mediaB = null;
     let isZoomed = false;
 
     const slider = document.createElement("div");
@@ -557,16 +417,12 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         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"
+        boxShadow: "0 2px 6px rgba(0,0,0,0.4)", pointerEvents: "auto"
     });
     sliderButton.innerHTML = `<span class="pi pi-arrows-h" style="font-size: 12px;"></span>`;
     slider.appendChild(sliderButton);
     wrapper.appendChild(slider);
 
-    let splitRatio = 50; 
-    let destroyVideoPlaybackFn = null;
-
     const updateSliderPosition = (percent) => {
         splitRatio = Math.max(0, Math.min(100, percent));
         slider.style.left = `${splitRatio}%`;
@@ -575,35 +431,41 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         }
     };
 
+    const cleanupMedia = (el) => {
+        if (el && el.tagName === "VIDEO") {
+            el.pause();
+            el.src = "";
+            el.load();
+        }
+    };
+
     const syncImageScales = () => {
         if (!mediaA) return;
-
         const wA = mediaA.naturalWidth || mediaA.videoWidth || 0;
         const hA = mediaA.naturalHeight || mediaA.videoHeight || 0;
 
         if (!mediaB) {
             slider.style.display = "none";
+            if (mediaA) mediaA.style.pointerEvents = isBaseVideo ? "none" : "auto";
             if (isZoomed && wA && hA) {
                 wrapper.style.maxWidth = "none";
                 wrapper.style.maxHeight = "none";
                 wrapper.style.width = `${wA}px`;
                 wrapper.style.height = `${hA}px`;
                 wrapper.style.cursor = "zoom-out";
-
                 mediaA.style.maxWidth = "none";
                 mediaA.style.maxHeight = "none";
                 mediaA.style.width = "100%";
                 mediaA.style.height = "100%";
                 mediaA.style.objectFit = "fill";
             } else {
-                wrapper.style.maxWidth = "85%";
-                wrapper.style.maxHeight = "85%";
+                wrapper.style.maxWidth = "none";
+                wrapper.style.maxHeight = "none";
                 wrapper.style.width = "auto";
                 wrapper.style.height = "auto";
                 wrapper.style.cursor = isBaseVideo ? "default" : "zoom-in";
-
-                mediaA.style.maxWidth = "100%";
-                mediaA.style.maxHeight = "80vh";
+                mediaA.style.maxWidth = "calc(100vw - 120px)";
+                mediaA.style.maxHeight = "calc(100vh - 120px)";
                 mediaA.style.width = "auto";
                 mediaA.style.height = "auto";
                 mediaA.style.objectFit = "contain";
@@ -613,7 +475,6 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
 
         const wB = mediaB.naturalWidth || mediaB.videoWidth || 0;
         const hB = mediaB.naturalHeight || mediaB.videoHeight || 0;
-
         if (!wA || !hA || !wB || !hB) return;
 
         const arA = wA / hA;
@@ -639,8 +500,10 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         }
 
         slider.style.display = "block";
+        if (mediaA) mediaA.style.pointerEvents = "none";
+        if (mediaB) mediaB.style.pointerEvents = "none";
         infoText.style.color = "#aaa";
-        infoText.textContent = "Drag slider to compare. Click image to zoom (100%/Fit) | Shift+Click another card | Esc to close.";
+        infoText.textContent = "Drag slider to compare. Click image to zoom (100%/Fit) | Shift+Click another card to compare | Esc to close.";
         updateSliderPosition(50);
 
         const maxW = Math.max(wA, wB);
@@ -663,21 +526,19 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
                 }
             });
         } else {
-            wrapper.style.maxWidth = "85%";
-            wrapper.style.maxHeight = "85%";
+            wrapper.style.maxWidth = "none";
+            wrapper.style.maxHeight = "none";
             wrapper.style.width = "auto";
             wrapper.style.height = "auto";
-            wrapper.style.aspectRatio = `${maxW} / ${maxH}`;
             wrapper.style.cursor = "zoom-in";
 
             [mediaA, mediaB].forEach(el => {
                 if (el) {
-                    el.style.maxWidth = "100%";
-                    el.style.maxHeight = "80vh";
-                    el.style.width = "100%";
-                    el.style.height = "100%";
-                    el.style.objectFit = "fill";
-                    el.style.aspectRatio = `${maxW} / ${maxH}`;
+                    el.style.maxWidth = "calc(100vw - 120px)";
+                    el.style.maxHeight = "calc(100vh - 120px)";
+                    el.style.width = "auto";
+                    el.style.height = "auto";
+                    el.style.objectFit = "contain";
                 }
             });
         }
@@ -696,10 +557,7 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         }
     };
 
-    let isDraggingSlider = false;
-    let dragMoved = false;
-    let dragStartX = 0;
-    let dragStartY = 0;
+    let isDraggingSlider = false, dragMoved = false, dragStartX = 0, dragStartY = 0;
 
     const startDrag = (e) => { 
         if (e.button && e.button !== 0) return;
@@ -713,11 +571,9 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         if (!isDraggingSlider) return;
         const clientX = getClientX(e);
         const clientY = getClientY(e);
-        
         if (!dragMoved && (Math.abs(clientX - dragStartX) > 4 || Math.abs(clientY - dragStartY) > 4)) {
             dragMoved = true;
         }
-
         if (dragMoved && mediaB) {
             const rect = wrapper.getBoundingClientRect();
             const percent = ((clientX - rect.left) / rect.width) * 100;
@@ -728,83 +584,42 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
     const endDrag = () => { 
         if (!isDraggingSlider) return;
         isDraggingSlider = false;
-        if (dragMoved) {
-            setTimeout(() => { dragMoved = false; }, 50);
-        }
+        if (dragMoved) setTimeout(() => { dragMoved = false; }, 50);
     };
 
     wrapper.addEventListener("mousedown", startDrag);
     wrapper.addEventListener("touchstart", startDrag);
-    
     window.addEventListener("mousemove", doDrag);
     window.addEventListener("touchmove", doDrag);
     window.addEventListener("mouseup", endDrag);
     window.addEventListener("touchend", endDrag);
 
-    wrapper.addEventListener("click", (e) => {
+    overlay.addCleanup(() => {
+        window.removeEventListener("mousemove", doDrag);
+        window.removeEventListener("touchmove", doDrag);
+        window.removeEventListener("mouseup", endDrag);
+        window.removeEventListener("touchend", endDrag);
+    });
+
+    wrapper.addEventListener("click", () => {
         if (dragMoved || isBaseVideo) return;
         toggleZoom();
     });
 
     scrollContainer.addEventListener("click", (e) => {
         if (dragMoved) return;
-        if (e.target === scrollContainer || e.target === container) {
-            destroy();
-        }
+        if (e.target === scrollContainer || e.target === overlay.container) overlay.destroy();
     });
 
-    const cleanupMedia = (el) => {
-        if (el && el.tagName === "VIDEO") {
-            el.pause();
-            el.src = "";
-            el.load();
-        }
-    };
-
-    const destroy = () => {
-        window.removeEventListener("resize", updateOverlayBounds);
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-            resizeObserver = null;
-        }
-
-        window.removeEventListener("mousemove", doDrag);
-        window.removeEventListener("touchmove", doDrag);
-        window.removeEventListener("mouseup", endDrag);
-        window.removeEventListener("touchend", endDrag);
-        
-        if (globalKeydownHandler) {
-            document.removeEventListener("keydown", globalKeydownHandler);
-            globalKeydownHandler = null;
-        }
-        
-        if (destroyVideoPlaybackFn) destroyVideoPlaybackFn();
+    if (isBaseVideo) {
+        const destroyVideoPlayback = setupVideoPlayback(mediaA, overlay.container);
+        overlay.addCleanup(destroyVideoPlayback);
+    }
 
+    overlay.addCleanup(() => {
         cleanupMedia(mediaA);
         cleanupMedia(mediaB);
-
-        container.remove();
-        onDestroy();
-    };
-
-    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);
-
-    document.body.appendChild(container);
-
-    if (isBaseVideo) {
-        destroyVideoPlaybackFn = setupVideoPlayback(mediaA, container);
-    }
+    });
 
     return {
         is3D: false,
@@ -817,7 +632,7 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
             const isTargetText = typeof targetSrc === "object" && targetSrc.text;
 
             if (isBaseVideo || isTargetVideo || isTarget3D || isTargetAudio || isTargetText) {
-                destroy();
+                overlay.destroy();
                 showFullscreenPreview([targetSrc], isShiftClick);
                 return;
             }
@@ -828,16 +643,11 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
                     mediaB.remove();
                     mediaB = null;
                 }
-
                 mediaB = createMediaElement(targetSrc, false);
                 mediaB.style.pointerEvents = "none";
-                mediaB.onload = () => {
-                    syncImageScales();
-                };
+                mediaB.onload = syncImageScales;
                 wrapper.appendChild(mediaB);
-                if (mediaB.complete && mediaB.naturalWidth) {
-                    syncImageScales();
-                }
+                if (mediaB.complete && mediaB.naturalWidth) syncImageScales();
             } else {
                 if (mediaB) {
                     cleanupMedia(mediaB);
@@ -853,7 +663,7 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
                 };
             }
         },
-        destroy
+        destroy: () => overlay.destroy()
     };
 }
 

js/dragdrop.js

@@ -1,7 +1,21 @@
 import { app } from "/scripts/app.js";
 import { State } from "./state.js";
 
-async function uploadDroppedImageToInput(imageObj) {
+async function promoteOrUploadToInput(imageObj) {
+    // 1. Try server-side promotion first (no browser RAM/re-upload overhead)
+    try {
+        const promoteRes = await fetch("/comfy-sidebar/promote-output", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(imageObj)
+        });
+        if (promoteRes.ok) {
+            const data = await promoteRes.json();
+            if (data.name) return data.name;
+        }
+    } catch (e) {}
+
+    // 2. Fallback to browser blob pipeline if backend promotion endpoint is unavailable
     const src = `/view?filename=${encodeURIComponent(imageObj.filename)}&type=${imageObj.type || 'output'}&subfolder=${encodeURIComponent(imageObj.subfolder || '')}`;
     try {
         const response = await fetch(src);
@@ -22,13 +36,114 @@ async function uploadDroppedImageToInput(imageObj) {
     }
 }
 
+async function handleWorkflowDrop(e) {
+    const jsonStr = e.dataTransfer.getData("application/json");
+    if (!jsonStr) return false;
+    try {
+        const workflow = JSON.parse(jsonStr);
+        if (workflow && workflow.nodes) {
+            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 true;
+        }
+    } catch (err) {}
+    return false;
+}
+
+async function handleMediaDrop(e) {
+    const url = e.dataTransfer.getData("text/uri-list") || e.dataTransfer.getData("text/plain");
+    if (!url) return false;
+
+    try {
+        const urlObj = new URL(url, window.location.origin);
+        if (urlObj.pathname !== "/view") return false;
+
+        const filename = urlObj.searchParams.get("filename");
+        const type = urlObj.searchParams.get("type") || "output";
+        const subfolder = urlObj.searchParams.get("subfolder") || "";
+        if (!filename) return false;
+
+        const canvas = app.canvas;
+        if (!canvas || !canvas.graph) return false;
+
+        let targetNode = null;
+        if (canvas.convertEventToCanvasOffset) {
+            const pos = canvas.convertEventToCanvasOffset(e);
+            targetNode = canvas.graph.getNodeOnPos(pos[0], pos[1]);
+        } else if (canvas.canvas) {
+            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);
+        }
+
+        const widget = targetNode?.widgets?.find(w => 
+            w.name === "image" || w.name === "video" || w.name === "audio" || w.name === "audio_file" ||
+            w.name === "file" || w.name === "video_path" || w.name === "model_file" || w.name === "3d_file" ||
+            w.type === "image" || w.type === "customtext"
+        );
+
+        const isLoadNode = targetNode && (
+            widget || 
+            targetNode.type?.includes("LoadImage") || 
+            targetNode.type?.includes("LoadVideo") || 
+            targetNode.type?.includes("VHS_LoadVideo") || 
+            targetNode.type?.includes("Load3D") || 
+            targetNode.type?.includes("Load 3D") || 
+            targetNode.type?.includes("LoadAudio") || 
+            targetNode.type?.includes("Load Audio") || 
+            targetNode.type?.includes("VHS_LoadAudio") || 
+            targetNode.type?.includes("Preview3D")
+        );
+
+        if (isLoadNode) {
+            const targetWidget = widget || targetNode.widgets?.[0];
+            if (targetWidget) {
+                const newFilename = await promoteOrUploadToInput({ filename, type, subfolder });
+                if (newFilename) {
+                    if (targetWidget.options && Array.isArray(targetWidget.options.values)) {
+                        if (!targetWidget.options.values.includes(newFilename)) {
+                            targetWidget.options.values.push(newFilename);
+                        }
+                    }
+                    targetWidget.value = newFilename;
+                    if (targetWidget.callback) targetWidget.callback(targetWidget.value);
+                    targetNode.imgs = null;
+                    app.graph.setDirtyCanvas(true, true);
+                    return true;
+                }
+            }
+        } else {
+            const src = `/view?filename=${encodeURIComponent(filename)}&type=${type}&subfolder=${encodeURIComponent(subfolder)}`;
+            const res = await fetch(src);
+            if (res.ok) {
+                const blob = await res.blob();
+                const file = new File([blob], filename, { type: blob.type });
+                if (app.handleFile) await app.handleFile(file);
+                else if (app.canvas?.handleDropItem) app.canvas.handleDropItem({ getAsFile: () => file });
+                return true;
+            }
+        }
+    } catch (err) {
+        console.error("Comfy Sidebar: Failed to handle dropped native URL:", err);
+    }
+    return false;
+}
+
+const dropHandlers = [
+    handleWorkflowDrop,
+    handleMediaDrop
+];
+
 export function setupDragAndDrop() {
-    document.addEventListener("dragover", (e) => {
+    const onDragOver = (e) => {
         e.preventDefault(); 
         e.dataTransfer.dropEffect = "copy";
-    });
+    };
 
-    document.addEventListener("drop", async (e) => {
+    const onDrop = async (e) => {
         const isSidebarDrop = e.target.closest('.comfyui-sidebar, .comfy-sidebar, [class*="sidebar"]') || 
                               (State.sidebarContainer && State.sidebarContainer.contains(e.target));
         if (isSidebarDrop) {
@@ -37,105 +152,34 @@ export function setupDragAndDrop() {
             return;
         }
 
-        const canvas = app.canvas;
-        if (!canvas || !canvas.graph) return;
-
-        // 1. Check for workflow JSON drop
+        const url = e.dataTransfer.getData("text/uri-list") || e.dataTransfer.getData("text/plain");
         const jsonStr = e.dataTransfer.getData("application/json");
-        if (jsonStr) {
-            try {
-                const workflow = JSON.parse(jsonStr);
-                if (workflow && workflow.nodes) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    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) {}
+
+        const isOurMedia = url && url.includes("/view?");
+        const isOurWorkflow = jsonStr && jsonStr.includes('"nodes"');
+
+        // If it's an external file drop from outside the browser, let ComfyUI handle it natively
+        if (!isOurMedia && !isOurWorkflow) {
+            return;
         }
 
-        // 2. Check for image / video / 3D / audio 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") || "";
+        // Synchronously stop ComfyUI core drop listeners from double-handling
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
 
-                    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 if (canvas.canvas) {
-                            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);
-                        }
-
-                        // Check if dropped on a LoadImage, LoadVideo, Load3D, LoadAudio, or widget node
-                        const widget = targetNode?.widgets?.find(w => 
-                            w.name === "image" || w.name === "video" || w.name === "audio" || w.name === "audio_file" ||
-                            w.name === "file" || w.name === "video_path" || w.name === "model_file" || w.name === "3d_file" ||
-                            w.type === "image" || w.type === "customtext"
-                        );
-
-                        const isLoadNode = targetNode && (
-                            widget || 
-                            targetNode.type?.includes("LoadImage") || 
-                            targetNode.type?.includes("LoadVideo") || 
-                            targetNode.type?.includes("VHS_LoadVideo") || 
-                            targetNode.type?.includes("Load3D") || 
-                            targetNode.type?.includes("Load 3D") || 
-                            targetNode.type?.includes("LoadAudio") || 
-                            targetNode.type?.includes("Load Audio") || 
-                            targetNode.type?.includes("VHS_LoadAudio") || 
-                            targetNode.type?.includes("Preview3D")
-                        );
-
-                        if (isLoadNode) {
-                            const targetWidget = widget || targetNode.widgets?.[0];
-                            if (targetWidget) {
-                                const newFilename = await uploadDroppedImageToInput({ filename, type, subfolder });
-                                if (newFilename) {
-                                    if (targetWidget.options && Array.isArray(targetWidget.options.values)) {
-                                        if (!targetWidget.options.values.includes(newFilename)) {
-                                            targetWidget.options.values.push(newFilename);
-                                        }
-                                    }
-                                    targetWidget.value = newFilename;
-                                    if (targetWidget.callback) targetWidget.callback(targetWidget.value);
-                                    targetNode.imgs = null;
-                                    app.graph.setDirtyCanvas(true, true);
-                                    return;
-                                }
-                            }
-                        } else {
-                            // Dropped on empty canvas area
-                            const src = `/view?filename=${encodeURIComponent(filename)}&type=${type}&subfolder=${encodeURIComponent(subfolder)}`;
-                            const res = await fetch(src);
-                            if (res.ok) {
-                                const blob = await res.blob();
-                                const file = new File([blob], filename, { 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 handle dropped native URL:", err);
+        for (const handler of dropHandlers) {
+            if (await handler(e)) {
+                return;
             }
         }
-    }, true);
+    };
+
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop, true);
+
+    return () => {
+        document.removeEventListener("dragover", onDragOver);
+        document.removeEventListener("drop", onDrop, true);
+    };
 }

js/layout.js

@@ -3,7 +3,6 @@ import { app } from "/scripts/app.js";
 const STYLE_ID = "comfy-sidebar-classic-layout-override";
 
 const CLASSIC_LAYOUT_CSS_MEDIA = `
-/* Remove the ghost underlay container border & background (the oval) without affecting the topbar header */
 .actionbar-container,
 .shadow-interface.rounded-lg.bg-comfy-menu-bg,
 .shadow-interface.rounded-lg.border-interface-stroke,
@@ -15,7 +14,6 @@ div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]) {
     box-shadow: none !important;
 }
 
-/* Style and align the custom plugins bar (Manager, LoRA, etc.) */
 [class*="actionbar"]:not(.actionbar),
 [class*="actionbar-buttons"],
 .actionbar-buttons {
@@ -25,7 +23,6 @@ div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]) {
     left: auto !important;
     transform: none !important;
     z-index: 1010 !important;
-
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
@@ -35,7 +32,6 @@ div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]) {
     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;
@@ -49,7 +45,6 @@ div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]) {
     align-items: center !important;
 }
 
-/* Scale down performance indicators (Crystools) uniformly */
 #crysmonitor-monitors-root,
 #crystools-monitors-root,
 .crysmonitor-monitors-container {
@@ -58,7 +53,6 @@ div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]) {
     align-items: center !important;
 }
 
-/* Hide user account profile button and PrimeVue components */
 img[alt*="User Avatar"],
 img[alt*="user avatar"],
 button:has(img[alt*="User Avatar"]),
@@ -74,14 +68,12 @@ button:has([data-pc-name="avatar"]),
     display: none !important;
 }
 
-/* Base rules: Large/Wide desktop screens (>= 1600px width) */
 .p-tabview-nav-content,
 [class*="tabview"] {
     padding-left: 150px !important;
     padding-right: 580px !important; 
 }
 
-/* Medium desktop screens (between 1200px and 1599px width) */
 @media (max-width: 1599px) {
     .p-tabview-nav-content,
     [class*="tabview"] {
@@ -90,7 +82,6 @@ button:has([data-pc-name="avatar"]),
     }
 }
 
-/* Standard laptops / small monitors (between 900px and 1199px width) */
 @media (max-width: 1199px) {
     .p-tabview-nav-content,
     [class*="tabview"] {
@@ -99,7 +90,6 @@ button:has([data-pc-name="avatar"]),
     }
 }
 
-/* Very narrow or heavily zoomed displays (< 900px width) */
 @media (max-width: 899px) {
     .p-tabview-nav-content,
     [class*="tabview"] {
@@ -109,16 +99,12 @@ button:has([data-pc-name="avatar"]),
 }
 `;
 
-/**
- * Native settings synchronization without direct DOM element querying or simulated clicks.
- */
 export function syncStockHistoryAndProgressSettings(enable) {
     const dockedVal = !!enable;
     const progressVal = !enable;
     const QPOV2_ID = "Comfy.Queue.QPOV2";
     const progressKey = "Comfy.Queue.ShowRunProgressBar";
 
-    // Use official extensionManager setting API if present, with fallback to app.ui.settings
     if (app.extensionManager?.setting) {
         try { app.extensionManager.setting.set(QPOV2_ID, dockedVal); } catch (e) {}
         try { app.extensionManager.setting.set(progressKey, progressVal); } catch (e) {}
@@ -210,15 +196,11 @@ function findTopbarContainer() {
 
 function isPropertiesPanelOpen() {
     const panel = document.querySelector('[data-testid="properties-panel"]');
-    if (panel && panel.offsetWidth > 0 && panel.offsetHeight > 0) {
-        return true;
-    }
+    if (panel && panel.offsetWidth > 0 && panel.offsetHeight > 0) return true;
 
     const headings = document.querySelectorAll('h1, h2, h3, h4');
     for (const h of headings) {
-        if (h.textContent.trim() === "Workflow Overview" && h.offsetWidth > 0 && h.offsetHeight > 0) {
-            return true;
-        }
+        if (h.textContent.trim() === "Workflow Overview" && h.offsetWidth > 0 && h.offsetHeight > 0) return true;
     }
 
     const origBtn = findOriginalButton();
@@ -230,7 +212,6 @@ function isPropertiesPanelOpen() {
             return true;
         }
     }
-
     return false;
 }
 
@@ -556,4 +537,15 @@ export function setupPropertiesPanelToggleFix() {
     });
 
     syncClassicLayout();
+}
+
+export function destroyLayoutFix() {
+    if (domObserver) {
+        domObserver.disconnect();
+        domObserver = null;
+    }
+    const styleEl = document.getElementById(STYLE_ID);
+    if (styleEl) styleEl.remove();
+    const fixStyles = document.getElementById("comfy-sidebar-layout-fix-styles");
+    if (fixStyles) fixStyles.remove();
 }

js/overlay.js

@@ -0,0 +1,101 @@
+import { State } from "./state.js";
+
+export class SidebarOverlay {
+    constructor(options = {}) {
+        this.onDestroy = options.onDestroy || (() => {});
+        this.cleanupFns = [];
+
+        // Root container
+        this.container = document.createElement("div");
+        this.container.className = `comfy-sidebar-comparison-overlay ${options.className || ""}`;
+        Object.assign(this.container.style, {
+            position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh",
+            background: options.background || "rgba(10, 10, 10, 0.95)",
+            display: "flex", flexDirection: "column", alignItems: "center",
+            justifyContent: "center", zIndex: "1000", boxSizing: "border-box",
+            overflow: "hidden", pointerEvents: "auto", userSelect: "none"
+        });
+
+        // Close button
+        this.closeBtn = document.createElement("span");
+        this.closeBtn.className = "pi pi-times";
+        this.closeBtn.title = "Close (Esc)";
+        Object.assign(this.closeBtn.style, {
+            position: "absolute", top: "16px", right: "24px", zIndex: "30",
+            cursor: "pointer", fontSize: "20px", color: "#aaa", transition: "color 0.15s ease",
+            background: "rgba(10,10,10,0.6)", borderRadius: "50%", padding: "4px"
+        });
+        this.closeBtn.onmouseenter = () => this.closeBtn.style.color = "#fff";
+        this.closeBtn.onmouseleave = () => this.closeBtn.style.color = "#aaa";
+        this.closeBtn.onclick = () => this.destroy();
+        this.container.appendChild(this.closeBtn);
+
+        // Backdrop click to close
+        this.container.addEventListener("click", (e) => {
+            if (e.target === this.container) this.destroy();
+        });
+
+        // Sidebar boundary alignment
+        this.updateOverlayBounds = this.updateOverlayBounds.bind(this);
+        this.updateOverlayBounds();
+        window.addEventListener("resize", this.updateOverlayBounds);
+        this.cleanupFns.push(() => window.removeEventListener("resize", this.updateOverlayBounds));
+
+        const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
+        if (sidebarEl && window.ResizeObserver) {
+            const ro = new ResizeObserver(this.updateOverlayBounds);
+            ro.observe(sidebarEl);
+            this.cleanupFns.push(() => ro.disconnect());
+        }
+
+        // Global Key Handler (Esc to close)
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                this.destroy();
+            }
+            if (options.onKeyDown) options.onKeyDown(e);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        this.cleanupFns.push(() => document.removeEventListener("keydown", onKeyDown));
+
+        document.body.appendChild(this.container);
+    }
+
+    updateOverlayBounds() {
+        const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
+        if (sidebarEl && sidebarEl.offsetWidth > 0 && sidebarEl.isConnected) {
+            const rect = sidebarEl.getBoundingClientRect();
+            if (rect.left < window.innerWidth / 2) {
+                const leftOffset = Math.max(0, rect.right);
+                this.container.style.left = `${leftOffset}px`;
+                this.container.style.width = `calc(100vw - ${leftOffset}px)`;
+                this.container.style.right = "0px";
+            } else {
+                const rightOffset = Math.max(0, window.innerWidth - rect.left);
+                this.container.style.left = "0px";
+                this.container.style.width = `calc(100vw - ${rightOffset}px)`;
+                this.container.style.right = `${rightOffset}px`;
+            }
+            this.container.style.top = `${Math.max(0, rect.top)}px`;
+            this.container.style.height = `calc(100vh - ${Math.max(0, rect.top)}px)`;
+        } else {
+            this.container.style.left = "0px";
+            this.container.style.width = "100vw";
+            this.container.style.top = "0px";
+            this.container.style.height = "100vh";
+        }
+    }
+
+    addCleanup(fn) {
+        this.cleanupFns.push(fn);
+    }
+
+    destroy() {
+        for (const fn of this.cleanupFns.splice(0)) {
+            try { fn(); } catch (e) {}
+        }
+        this.container.remove();
+        this.onDestroy();
+    }
+}

js/queue.js

@@ -1,6 +1,6 @@
 import { app } from "/scripts/app.js";
 import { api } from "/scripts/api.js";
-import { State, promptStates, pruneHistory, cardElements, saveStatesToLocalStorage } from "./state.js";
+import { State, promptStates, pruneHistory, cardElements, scheduleStateSave } from "./state.js";
 import { findImagesInOutputs, findTextsInOutputs, parseWorkflow, getPrimaryOutputImages } from "./utils.js";
 
 export let renderDOMFn = () => {};
@@ -17,7 +17,64 @@ export async function syncQueue() {
         const runningList = q.Running || q.queue_running || [];
         const pendingList = q.Pending || q.queue_pending || [];
         const pendingIds = new Set();
+        const runningIds = new Set();
         
+        runningList.forEach(p => {
+            let pid = null;
+            let pWorkflow = null;
+            let pOutputs = {};
+
+            if (Array.isArray(p)) {
+                pid = p[1] ? String(p[1]) : null;
+                const extraData = p[3] || {};
+                pWorkflow = parseWorkflow(extraData.extra_pnginfo?.workflow || extraData.workflow);
+                pOutputs = p[4] || {};
+            } else if (p && typeof p === "object") {
+                pid = (p.prompt_id || p.id || p.uuid) ? String(p.prompt_id || p.id || p.uuid) : null;
+                const extraData = p.extra_data || {};
+                pWorkflow = parseWorkflow(extraData.extra_pnginfo?.workflow || extraData.workflow);
+                pOutputs = p.outputs || {};
+            }
+
+            if (pid) {
+                runningIds.add(pid);
+                State.currentlyActivePromptId = pid;
+
+                // Restore active card if refreshed mid-generation
+                if (!promptStates.has(pid)) {
+                    State.sequenceNumber++;
+                    const activeWorkflow = pWorkflow || app.graph?.serialize?.() || null;
+                    const images = getPrimaryOutputImages(pOutputs, activeWorkflow);
+                    const texts = findTextsInOutputs(pOutputs, activeWorkflow);
+
+                    promptStates.set(pid, {
+                        pid: pid,
+                        status: "active",
+                        images: images,
+                        texts: texts,
+                        nodeOutputs: pOutputs,
+                        progress: 0,
+                        progressText: "Processing...",
+                        timestamp: State.sequenceNumber,
+                        workflow: activeWorkflow,
+                        startTime: Date.now(),
+                        duration: null
+                    });
+                } else {
+                    const st = promptStates.get(pid);
+                    if (st.status !== "active") {
+                        st.status = "active";
+                        st.progressText = "Processing...";
+                        st.rendered = false;
+                        if (!st.startTime) st.startTime = Date.now();
+                    }
+                    if (!st.workflow && pWorkflow) {
+                        st.workflow = pWorkflow;
+                    }
+                }
+            }
+        });
+
         const normalizedPending = pendingList.map((p, idx) => {
             let pid = null, seq = idx; 
             if (Array.isArray(p)) {
@@ -38,10 +95,10 @@ export async function syncQueue() {
             if (pid) {
                 pendingIds.add(pid);
                 if (!promptStates.has(pid)) {
-                    State.globalOrderCounter++;
+                    State.sequenceNumber++;
                     promptStates.set(pid, {
                         pid: pid, status: "pending", images: [], progress: 0, queueNumber: number,
-                        progressText: `Pending... (#${number})`, timestamp: State.globalOrderCounter,
+                        progressText: `Pending... (#${number})`, timestamp: State.sequenceNumber,
                         workflow: app.graph.serialize() 
                     });
                 } else {
@@ -55,10 +112,14 @@ export async function syncQueue() {
         });
 
         for (const [pid, state] of promptStates.entries()) {
-            if (state.status === "pending" && !pendingIds.has(pid)) promptStates.delete(pid);
+            if (state.status === "pending" && !pendingIds.has(pid)) {
+                promptStates.delete(pid);
+            } else if (state.status === "active" && !runningIds.has(pid)) {
+                concludeRun(pid, "cancelled");
+            }
         }
 
-        updateSidebarBadgeFn(pendingIds.size + (runningList.length > 0 ? 1 : 0));
+        updateSidebarBadgeFn(pendingIds.size + (runningIds.size > 0 ? 1 : 0));
         renderDOMFn();
     } catch (err) {
         console.error("Comfy Sidebar: Failed to sync queue state", err);
@@ -96,6 +157,19 @@ const concludeRun = async (pid, statusStr) => {
                 st.workflow = parseWorkflow(rawWf) || st.workflow;
                 st.nodeOutputs = hItem[key].outputs;
                 
+                const serverStatus = hItem[key].status?.status_str;
+                const isInterrupted = statusStr === "cancelled" || 
+                                      serverStatus === "interrupted" || 
+                                      (hItem[key].status?.messages && JSON.stringify(hItem[key].status.messages).toLowerCase().includes("interrupted"));
+
+                if (serverStatus === "success" || serverStatus === "completed") {
+                    st.status = "completed";
+                } else if (isInterrupted) {
+                    st.status = "cancelled";
+                } else if (serverStatus === "error") {
+                    st.status = "error";
+                }
+
                 const primaryImgs = getPrimaryOutputImages(hItem[key].outputs, st.workflow);
                 if (primaryImgs.length > 0) st.images = primaryImgs;
                 
@@ -108,20 +182,19 @@ const concludeRun = async (pid, statusStr) => {
     }
     
     pruneHistory(app);
-    saveStatesToLocalStorage();
+    scheduleStateSave();
     syncQueue();
 };
 
 export function setupApiListeners() {
-    api.addEventListener("status", syncQueue);
-    
-    api.addEventListener("reconnected", async () => {
+    const onStatus = () => syncQueue();
+    const onReconnected = async () => {
         console.log("Comfy Sidebar: Server reconnected, syncing state and history");
         await initSessionAndHistory();
         await syncQueue();
-    });
-    
-    api.addEventListener("execution_start", (e) => {
+    };
+
+    const onExecutionStart = (e) => {
         if (app.ui.settings.getSettingValue("Comfy Sidebar.Auto Clear Interrupted") ?? false) {
             const toDelete = [];
             for (const [p, s] of promptStates.entries()) {
@@ -132,7 +205,7 @@ export function setupApiListeners() {
             }
             if (toDelete.length > 0) {
                 api.fetchApi("/history", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ delete: toDelete }) }).catch(()=>{});
-                saveStatesToLocalStorage();
+                scheduleStateSave();
             }
         }
 
@@ -142,21 +215,21 @@ export function setupApiListeners() {
 
         if (promptStates.has(pid)) {
             const st = promptStates.get(pid);
-            st.status = "active"; st.progressText = "Sampling..."; st.workflow = activeWorkspaceWorkflow;
+            st.status = "active"; st.progressText = "Processing..."; st.workflow = activeWorkspaceWorkflow;
             st.rendered = false; st.startTime = Date.now(); st.duration = null;
         } else {
-            State.globalOrderCounter++;
+            State.sequenceNumber++;
             promptStates.set(pid, {
                 pid: pid, status: "active", images: [], progress: 0,
-                progressText: "Sampling...", timestamp: State.globalOrderCounter,
+                progressText: "Processing...", timestamp: State.sequenceNumber,
                 workflow: activeWorkspaceWorkflow, startTime: Date.now(), duration: null
             });
         }
         renderDOMFn();
         syncQueue();
-    });
+    };
 
-    api.addEventListener("progress", (e) => {
+    const onProgress = (e) => {
         const pid = e.detail.prompt_id ? String(e.detail.prompt_id) : null;
         if (pid && promptStates.has(pid)) {
             const st = promptStates.get(pid);
@@ -166,32 +239,37 @@ export function setupApiListeners() {
             if (cardObj && cardObj.progressBar) {
                 cardObj.progressBar.style.width = `${st.progress}%`;
                 if (cardObj.statusText && cardObj.statusText.style.display !== "none") {
-                    const nodeName = st.activeNodeName ? (st.activeNodeName === "Finishing..." ? "Finishing..." : `[${st.activeNodeName}]`) : "Sampling...";
+                    const nodeName = st.activeNodeName ? (st.activeNodeName === "Finishing..." ? "Finishing..." : `[${st.activeNodeName}]`) : "Processing...";
                     cardObj.statusText.textContent = `${nodeName} ${st.progress}%`;
                 }
             } else {
                 renderDOMFn();
             }
+        } else if (pid && !promptStates.has(pid)) {
+            syncQueue();
         }
-    });
+    };
 
-    api.addEventListener("executing", (e) => {
+    const onExecuting = (e) => {
         const nodeId = e.detail;
         const showWorkingNode = app.ui.settings.getSettingValue("Comfy Sidebar.Show Working Node Name") ?? true;
         
         if (showWorkingNode && State.currentlyActivePromptId && promptStates.has(State.currentlyActivePromptId)) {
             const st = promptStates.get(State.currentlyActivePromptId);
             if (nodeId) {
-                const node = app.graph.getNodeById(nodeId);
+                const node = app.graph?.getNodeById ? app.graph.getNodeById(nodeId) : null;
                 st.activeNodeName = node ? (node.title || node.type) : `Node #${nodeId}`;
             } else {
                 st.activeNodeName = "Finishing...";
             }
-            renderDOMFn();
+            // Don't re-render if user is currently browsing an intermediate/batch submenu
+            if (!State.activeSubmenuPromptId && !State.activeSubmenuBatchImages) {
+                renderDOMFn();
+            }
         }
-    });
+    };
 
-    api.addEventListener("b_preview", (e) => {
+    const onBPreview = (e) => {
         const activeTasks = Array.from(promptStates.values()).filter(t => t.status === "active");
         if (activeTasks.length > 0) {
             const st = activeTasks[0];
@@ -200,11 +278,14 @@ export function setupApiListeners() {
             st._oldPreviewBlobUrl = st._previewBlobUrl;
             st._previewBlobUrl = newBlobUrl;
             st.images = [{ url: newBlobUrl }];
-            renderDOMFn();
+            // Keep preview updated in memory, but don't kick the user out of an active submenu
+            if (!State.activeSubmenuPromptId && !State.activeSubmenuBatchImages) {
+                renderDOMFn();
+            }
         }
-    });
+    };
 
-    api.addEventListener("executed", (e) => {
+    const onExecuted = (e) => {
         const pid = e.detail.prompt_id ? String(e.detail.prompt_id) : null;
         if (pid && promptStates.has(pid)) {
             const st = promptStates.get(pid);
@@ -222,14 +303,38 @@ export function setupApiListeners() {
 
             renderDOMFn();
         }
-    });
+    };
 
-    api.addEventListener("execution_success", (e) => concludeRun(e.detail.prompt_id, "completed"));
-    api.addEventListener("execution_error", (e) => concludeRun(e.detail.prompt_id, "error"));
-    api.addEventListener("execution_interrupted", () => {
+    const onExecutionSuccess = (e) => concludeRun(e.detail.prompt_id, "completed");
+    const onExecutionError = (e) => concludeRun(e.detail.prompt_id, "error");
+    const onExecutionInterrupted = () => {
         Array.from(promptStates.values()).filter(t => t.status === "active").forEach(t => concludeRun(t.pid, "cancelled"));
         syncQueue();
-    });
+    };
+
+    api.addEventListener("status", onStatus);
+    api.addEventListener("reconnected", onReconnected);
+    api.addEventListener("execution_start", onExecutionStart);
+    api.addEventListener("progress", onProgress);
+    api.addEventListener("executing", onExecuting);
+    api.addEventListener("b_preview", onBPreview);
+    api.addEventListener("executed", onExecuted);
+    api.addEventListener("execution_success", onExecutionSuccess);
+    api.addEventListener("execution_error", onExecutionError);
+    api.addEventListener("execution_interrupted", onExecutionInterrupted);
+
+    return () => {
+        api.removeEventListener("status", onStatus);
+        api.removeEventListener("reconnected", onReconnected);
+        api.removeEventListener("execution_start", onExecutionStart);
+        api.removeEventListener("progress", onProgress);
+        api.removeEventListener("executing", onExecuting);
+        api.removeEventListener("b_preview", onBPreview);
+        api.removeEventListener("executed", onExecuted);
+        api.removeEventListener("execution_success", onExecutionSuccess);
+        api.removeEventListener("execution_error", onExecutionError);
+        api.removeEventListener("execution_interrupted", onExecutionInterrupted);
+    };
 }
 
 export async function initSessionAndHistory() {
@@ -256,8 +361,6 @@ export async function initSessionAndHistory() {
         });
 
         rawItems.forEach(({ pid, data }) => {
-            if (promptStates.has(pid)) return;
-
             const extraData = data.extra_data || data.prompt?.[3] || {};
             const workflow = parseWorkflow(extraData.extra_pnginfo?.workflow || extraData.workflow);
             const outputs = data.outputs || {};
@@ -266,13 +369,43 @@ export async function initSessionAndHistory() {
             const texts = findTextsInOutputs(outputs, workflow);
             
             const statusStr = data.status?.status_str || "completed";
+            const isInterrupted = statusStr === "interrupted" || 
+                                  (data.status?.messages && JSON.stringify(data.status.messages).toLowerCase().includes("interrupted"));
+
             const status = (statusStr === "success" || statusStr === "completed") ? "completed" : 
-                           (statusStr === "error" ? "error" : "cancelled");
+                           (isInterrupted ? "cancelled" : (statusStr === "error" ? "error" : "cancelled"));
 
-            // Filter out empty records from history so dummy "No Outputs" cards don't pollute queue
             if (images.length === 0 && texts.length === 0 && status === "completed") return;
 
-            State.globalOrderCounter++;
+            if (promptStates.has(pid)) {
+                const st = promptStates.get(pid);
+                if (st.status === "active" || st.status === "pending") {
+                    st.status = status;
+                    st.images = images;
+                    st.texts = texts;
+                    st.nodeOutputs = outputs;
+                    st.workflow = workflow || st.workflow;
+                    st.progressText = "";
+                    st.rendered = false;
+                } else {
+                    // Restore workflow & outputs from server history on startup
+                    if (!st.workflow && workflow) {
+                        st.workflow = workflow;
+                    }
+                    if ((!st.images || st.images.length === 0) && images.length > 0) {
+                        st.images = images;
+                    }
+                    if ((!st.nodeOutputs || Object.keys(st.nodeOutputs).length === 0) && outputs && Object.keys(outputs).length > 0) {
+                        st.nodeOutputs = outputs;
+                    }
+                    if ((!st.texts || st.texts.length === 0) && texts && texts.length > 0) {
+                        st.texts = texts;
+                    }
+                }
+                return;
+            }
+
+            State.sequenceNumber++;
             promptStates.set(pid, {
                 pid: pid, 
                 status: status, 
@@ -281,13 +414,13 @@ export async function initSessionAndHistory() {
                 nodeOutputs: outputs,
                 workflow: workflow,
                 progressText: "", 
-                timestamp: State.globalOrderCounter, 
+                timestamp: State.sequenceNumber, 
                 rendered: true
             });
         });
 
         pruneHistory(app);
-        saveStatesToLocalStorage();
+        scheduleStateSave();
         await syncQueue();
     } catch (err) {
         console.error("Comfy Sidebar: Failed to initialize history from server API", err);

js/sidebar.js

@@ -1,13 +1,14 @@
 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 { setupSidebarUI, applySidebarOverride, findOurSidebarButton, setSyncQueue, updateSidebarBadge, renderDOM, setupScrollListener } from "./ui.js";
 import { setupApiListeners, initSessionAndHistory, syncQueue, setUIDependencies } from "./queue.js";
-import { applyClassicLayout, setupPropertiesPanelToggleFix, syncClassicLayout, syncStockHistoryAndProgressSettings } from "./layout.js";
+import { applyClassicLayout, setupPropertiesPanelToggleFix, syncClassicLayout, syncStockHistoryAndProgressSettings, destroyLayoutFix } from "./layout.js";
 
 let isInitialized = false;
 let activeKeydownHandler = null;
 let nodeDOMObserver = null;
+let cleanupFns = [];
 
 function findHeaderByText(parent, text) {
     if (!text) return null;
@@ -164,8 +165,13 @@ function toggleIgnoreActiveNode() {
         syncNodeVueBadge(node, isIgnored);
     });
     
-    if (app.graph) app.graph.setDirtyCanvas(true, true);
+    if (app.graph) {
+        if (app.graph.change) app.graph.change(); // Marks workflow as modified so ComfyUI autosaves it
+        app.graph.setDirtyCanvas(true, true);
+    }
     if (app.canvas) app.canvas.setDirty(true, true);
+
+    renderDOM(); // Immediately update sidebar buttons without needing a reload
 }
 
 app.registerExtension({
@@ -250,7 +256,10 @@ app.registerExtension({
     },
 
     afterConfigureGraph() {
-        requestAnimationFrame(() => syncAllNodeBadges());
+        requestAnimationFrame(() => {
+            syncAllNodeBadges();
+            renderDOM();
+        });
     },
 
     async setup() {
@@ -272,12 +281,14 @@ app.registerExtension({
         setUIDependencies(renderDOM, updateSidebarBadge);
 
         injectStyles();
-        setupDragAndDrop();
+
+        // Register disposable subsystems
+        cleanupFns.push(setupDragAndDrop());
+        cleanupFns.push(setupScrollListener());
+        cleanupFns.push(setupApiListeners());
 
         const sidebarContainer = setupSidebarUI();
         
-        setupApiListeners();
-        
         await initSessionAndHistory();
 
         setupVueNodeObserver();
@@ -325,6 +336,11 @@ app.registerExtension({
     },
 
     destroy() {
+        for (const fn of cleanupFns.splice(0)) {
+            try { if (typeof fn === "function") fn(); } catch (e) {}
+        }
+        destroyLayoutFix();
+
         if (nodeDOMObserver) {
             nodeDOMObserver.disconnect();
             nodeDOMObserver = null;

js/state.js

@@ -3,15 +3,24 @@ export const cardElements = new Map();
 
 export const State = {
     currentSearchQuery: "",
-    globalOrderCounter: 0,
+    sequenceNumber: 0,
     sidebarContainer: null,
-    cardStack: null,                  // Main queue scroll container
-    submenuStack: null,               // Submenu scroll container
+    cardStack: null,
+    submenuStack: null,
     currentlyActivePromptId: null,
-    activeSubmenuPromptId: null,      // Active run/outputs explorer pointer
-    activeSubmenuBatchImages: null    // Active batch images explorer pointer
+    activeSubmenuPromptId: null,
+    activeSubmenuBatchImages: null
 };
 
+let saveTimer = null;
+export function scheduleStateSave(delay = 250) {
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => {
+        saveTimer = null;
+        saveStatesToLocalStorage();
+    }, delay);
+}
+
 export function deletePromptState(pid) {
     const key = String(pid);
     const state = promptStates.get(key);
@@ -32,7 +41,7 @@ export function pruneHistory(app) {
     const tasks = Array.from(promptStates.entries())
         .filter(([pid, state]) => state.status !== "pending" && state.status !== "active");
     
-    tasks.sort((a, b) => a[1].timestamp - b[1].timestamp);
+    tasks.sort((a, b) => (a[1].timestamp || 0) - (b[1].timestamp || 0));
     
     if (tasks.length > maxItems) {
         const deleteCount = tasks.length - maxItems;
@@ -52,8 +61,6 @@ export function saveStatesToLocalStorage() {
                 return img;
             }).filter(Boolean);
 
-            // Include workflow JSON ONLY for image-less / unfinished / failed tasks
-            // so users can load or save their workflows even after browser reloads!
             const includeWorkflow = cleanedImages.length === 0 || state.status !== "completed";
 
             serializable.push({
@@ -105,7 +112,7 @@ export function loadStatesFromLocalStorage() {
             list.forEach(state => {
                 const key = String(state.pid);
                 promptStates.set(key, state);
-                if (state.timestamp > State.globalOrderCounter) State.globalOrderCounter = state.timestamp;
+                if (state.timestamp > State.sequenceNumber) State.sequenceNumber = state.timestamp;
             });
         }
     } catch (e) {}

js/styles.js

@@ -29,6 +29,14 @@ export function injectStyles() {
         .comfy-sidebar-card.active:hover .comfy-sidebar-queue-cancel-btn { 
             display: flex !important; 
         }
+
+        /* Prevent action hover buttons (Delete/JSON/Node) from showing on pending & running cards */
+        .comfy-sidebar-card.pending .comfy-sidebar-hover-panel,
+        .comfy-sidebar-card.active .comfy-sidebar-hover-panel,
+        .comfy-sidebar-card.pending .comfy-sidebar-left-hover-panel,
+        .comfy-sidebar-card.active .comfy-sidebar-left-hover-panel {
+            display: none !important;
+        }
         
         .comfy-sidebar-card-timer {
             position: absolute; top: 6px; left: 8px; font-size: 10px;
@@ -56,14 +64,13 @@ export function injectStyles() {
             color: #ffffff !important;
         }
 
-        /* Hover Panels CSS Hover Control */
         .comfy-sidebar-hover-panel,
         .comfy-sidebar-left-hover-panel {
             display: none !important;
         }
 
-        .comfy-sidebar-card:hover .comfy-sidebar-hover-panel,
-        .comfy-sidebar-card:hover .comfy-sidebar-left-hover-panel {
+        .comfy-sidebar-card:not(.pending):not(.active):hover .comfy-sidebar-hover-panel,
+        .comfy-sidebar-card:not(.pending):not(.active):hover .comfy-sidebar-left-hover-panel {
             display: flex !important;
         }
 
@@ -98,7 +105,88 @@ export function injectStyles() {
             box-shadow: 0 0 8px rgba(220, 53, 69, 0.6) !important;
         }
 
-        /* Header Icons & Header Action Buttons */
+        /* Disk Delete Confirmation */
+        .comfy-sidebar-card-action-btn.confirm-delete-disk,
+        .comfy-sidebar-card-action-btn.confirm-delete-disk:hover {
+            background-color: #7f1d1d !important;
+            color: #ffc9c9 !important;
+            box-shadow: 0 0 10px rgba(220, 38, 38, 0.85) !important;
+            border: 1px solid #ef4444 !important;
+        }
+
+        /* Dynamic Ctrl Key Hover State */
+        .comfy-sidebar-del-label {
+            display: none;
+            margin-left: 5px;
+            font-size: 10px;
+            font-weight: bold;
+            white-space: nowrap;
+            font-family: sans-serif;
+            letter-spacing: 0.3px;
+        }
+
+        body.comfy-sidebar-ctrl-active .comfy-sidebar-card-action-btn:not(.comfy-sidebar-btn-del) {
+            display: none !important;
+        }
+
+        body.comfy-sidebar-ctrl-active .comfy-sidebar-left-hover-panel {
+            display: none !important;
+        }
+
+        body.comfy-sidebar-ctrl-active .comfy-sidebar-btn-del {
+            background-color: #991b1b !important;
+            color: #ffffff !important;
+            border: 1px solid #ef4444 !important;
+            width: auto !important;
+            padding: 0 8px !important;
+            border-radius: 6px !important;
+            box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
+        }
+
+        body.comfy-sidebar-ctrl-active .comfy-sidebar-btn-del .comfy-sidebar-del-label {
+            display: inline;
+        }
+
+        /* Translucent Folder Indicator on Ctrl Press */
+        .comfy-sidebar-ctrl-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(15, 23, 42, 0.75);
+            backdrop-filter: blur(2px);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            color: #38bdf8;
+            z-index: 15;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.15s ease;
+            border-radius: 4px;
+        }
+
+        .comfy-sidebar-ctrl-overlay i {
+            font-size: 26px;
+            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
+        }
+
+        .comfy-sidebar-ctrl-overlay span {
+            font-size: 11px;
+            font-weight: bold;
+            color: #f1f5f9;
+            font-family: sans-serif;
+            letter-spacing: 0.5px;
+            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+        }
+
+        body.comfy-sidebar-ctrl-active .comfy-sidebar-card:not(.pending):not(.active):hover .comfy-sidebar-ctrl-overlay {
+            opacity: 1;
+        }
+
         .comfy-sidebar-header-btn {
             background: transparent;
             color: var(--desc-color, #aaa);
@@ -126,7 +214,6 @@ export function injectStyles() {
             opacity: 1;
         }
 
-        /* Scroll To Top Floating Button */
         .comfy-sidebar-scroll-top-btn {
             position: absolute;
             bottom: 14px;
@@ -325,7 +412,83 @@ export function injectStyles() {
             100% { transform: scaleY(1.3); }
         }
 
-        /* Text Output Card Clamping */
+        /* Generic / Unknown File Preview Cards (LoRA, Checkpoint, Latent, etc.) */
+        .comfy-sidebar-file-wrapper {
+            width: 100%;
+            min-height: 88px;
+            background: linear-gradient(135deg, #131d2e 0%, #0b1120 100%);
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 8px 10px;
+            box-sizing: border-box;
+            position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            transition: all 0.2s ease-in-out;
+            user-select: none;
+            cursor: pointer;
+            gap: 8px;
+        }
+
+        .comfy-sidebar-file-wrapper:hover {
+            border-color: #0ea5e9;
+            box-shadow: 0 0 14px rgba(14, 165, 233, 0.35);
+            transform: translateY(-1px);
+        }
+
+        .comfy-sidebar-file-badge {
+            background: rgba(14, 165, 233, 0.9);
+            color: #fff;
+            font-size: 9px;
+            font-weight: bold;
+            padding: 0 6px;
+            height: 18px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            line-height: 1;
+            border-radius: 3px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+            flex-shrink: 0;
+            white-space: nowrap;
+        }
+
+        .comfy-sidebar-file-title {
+            font-size: 11px;
+            color: #f1f5f9;
+            font-family: monospace;
+            font-weight: 600;
+            word-break: break-all;
+            line-height: 1.4;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .comfy-sidebar-file-icon {
+            font-size: 14px;
+            color: #38bdf8;
+            flex-shrink: 0;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transform: translateY(-3px);
+        }
+
+        .comfy-sidebar-file-subtext {
+            font-size: 9px;
+            color: #94a3b8;
+            font-family: sans-serif;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            opacity: 0.9;
+        }
+
         .comfy-sidebar-text-clamp {
             font-size: 11px;
             line-height: 1.45;

js/text_reader.js

@@ -1,6 +1,4 @@
-import { State } from "./state.js";
-
-let globalKeydownHandler = null;
+import { SidebarOverlay } from "./overlay.js";
 
 // Global helper for code block copying in Markdown view
 window.moonCopyCode = function(button) {
@@ -195,63 +193,11 @@ function parseMarkdown(text) {
 }
 
 export function createTextReader(textData, onSwitchMedia = () => {}, onDestroy = () => {}) {
-    if (globalKeydownHandler) {
-        document.removeEventListener("keydown", globalKeydownHandler);
-        globalKeydownHandler = null;
-    }
-
     let rawText = typeof textData === "object" ? (textData.text || "") : String(textData);
     let pid = typeof textData === "object" ? textData.pid : "";
     let isMarkdownMode = true;
 
-    const container = document.createElement("div");
-    container.className = "comfy-sidebar-comparison-overlay";
-    Object.assign(container.style, {
-        position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh",
-        background: "rgba(10, 10, 10, 0.95)", display: "flex", flexDirection: "column",
-        alignItems: "center", justifyContent: "center", zIndex: "1000",
-        boxSizing: "border-box", overflow: "hidden", pointerEvents: "auto", userSelect: "none"
-    });
-
-    const updateOverlayBounds = () => {
-        const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
-        if (sidebarEl && sidebarEl.offsetWidth > 0 && sidebarEl.isConnected) {
-            const rect = sidebarEl.getBoundingClientRect();
-            if (rect.left < window.innerWidth / 2) {
-                const leftOffset = Math.max(0, rect.right);
-                container.style.left = `${leftOffset}px`;
-                container.style.width = `calc(100vw - ${leftOffset}px)`;
-                container.style.right = "0px";
-            } else {
-                const rightOffset = Math.max(0, window.innerWidth - rect.left);
-                container.style.left = "0px";
-                container.style.width = `calc(100vw - ${rightOffset}px)`;
-                container.style.right = `${rightOffset}px`;
-            }
-            container.style.top = `${Math.max(0, rect.top)}px`;
-            container.style.height = `calc(100vh - ${Math.max(0, rect.top)}px)`;
-        } else {
-            container.style.left = "0px";
-            container.style.width = "100vw";
-            container.style.top = "0px";
-            container.style.height = "100vh";
-        }
-    };
-
-    updateOverlayBounds();
-    window.addEventListener("resize", updateOverlayBounds);
-
-    const closeBtn = document.createElement("span");
-    closeBtn.className = "pi pi-times";
-    closeBtn.title = "Close (Esc)";
-    Object.assign(closeBtn.style, {
-        position: "absolute", top: "16px", right: "24px", zIndex: "30",
-        cursor: "pointer", fontSize: "20px", color: "#aaa", transition: "color 0.15s ease",
-        background: "rgba(10,10,10,0.6)", borderRadius: "50%", padding: "4px"
-    });
-    closeBtn.onmouseenter = () => closeBtn.style.color = "#fff";
-    closeBtn.onmouseleave = () => closeBtn.style.color = "#aaa";
-    container.appendChild(closeBtn);
+    const overlay = new SidebarOverlay({ onDestroy });
 
     const readerBox = document.createElement("div");
     Object.assign(readerBox.style, {
@@ -363,32 +309,13 @@ export function createTextReader(textData, onSwitchMedia = () => {}, onDestroy =
     updateView();
 
     readerBox.append(headerRow, textArea);
-    container.appendChild(readerBox);
-
-    const destroy = () => {
-        window.removeEventListener("resize", updateOverlayBounds);
-        if (globalKeydownHandler) {
-            document.removeEventListener("keydown", globalKeydownHandler);
-            globalKeydownHandler = null;
-        }
-        container.remove();
-        onDestroy();
-    };
-
-    closeBtn.onclick = destroy;
-    container.onclick = (e) => { if (e.target === container) destroy(); };
-
-    const handleKeys = (e) => { if (e.key === "Escape") destroy(); };
-    globalKeydownHandler = handleKeys;
-    document.addEventListener("keydown", globalKeydownHandler);
-
-    document.body.appendChild(container);
+    overlay.container.appendChild(readerBox);
 
     return {
         isText: true,
         loadTarget(targetData) {
             if (typeof targetData !== "object" || !targetData.text) {
-                destroy();
+                overlay.destroy();
                 onSwitchMedia(targetData);
                 return;
             }
@@ -397,6 +324,6 @@ export function createTextReader(textData, onSwitchMedia = () => {}, onDestroy =
             title.textContent = pid ? `Text Output #${pid}` : "Text Output";
             updateView();
         },
-        destroy
+        destroy: () => overlay.destroy()
     };
 }

js/ui.js

@@ -1,13 +1,34 @@
 import { app } from "/scripts/app.js";
 import { api } from "/scripts/api.js";
-import { State, promptStates, cardElements, saveStatesToLocalStorage, deletePromptState } from "./state.js";
-import { isVideoFormat, is3DFormat, isAudioFormat, getFilenameFromUrl, matchesFilter, getRunOutputs } from "./utils.js";
+import { State, promptStates, cardElements, scheduleStateSave, deletePromptState } from "./state.js";
+import { isImageFormat, isVideoFormat, is3DFormat, isAudioFormat, getFilenameFromUrl, matchesFilter, getRunOutputs, extractWorkflowFromPng } from "./utils.js";
 import { showFullscreenPreview, isAudioViewerOpen } from "./comparison.js";
 
+async function copyImageToClipboard(src) {
+    try {
+        const res = await fetch(src);
+        let blob = await res.blob();
+        if (blob.type !== "image/png") {
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; img.src = src; });
+            const canvas = document.createElement("canvas");
+            canvas.width = img.naturalWidth || img.width;
+            canvas.height = img.naturalHeight || img.height;
+            canvas.getContext("2d").drawImage(img, 0, 0);
+            blob = await new Promise(resolve => canvas.toBlob(resolve, "image/png"));
+        }
+        await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+        return true;
+    } catch (err) {
+        console.error("Comfy Sidebar: Failed to copy image to clipboard", err);
+        return false;
+    }
+}
+
 export let syncQueueFn = async () => {};
 export function setSyncQueue(fn) { syncQueueFn = fn; }
 
-// Global audio playback manager: ensures only 1 audio stream plays at a time
 let currentlyPlayingAudio = null;
 export function stopAllAudioPlayback() {
     if (currentlyPlayingAudio) {
@@ -18,6 +39,65 @@ export function stopAllAudioPlayback() {
     }
 }
 
+function removeImageFromNodeOutputs(nodeOutputs, targetImg) {
+    if (!nodeOutputs || !targetImg || !targetImg.filename) return;
+
+    const scanAndRemove = (obj) => {
+        if (!obj || typeof obj !== "object") return;
+        for (const key in obj) {
+            const val = obj[key];
+            if (Array.isArray(val)) {
+                for (let i = val.length - 1; i >= 0; i--) {
+                    const item = val[i];
+                    if (item && typeof item === "object") {
+                        if (item.filename === targetImg.filename && (item.subfolder || "") === (targetImg.subfolder || "")) {
+                            val.splice(i, 1);
+                        } else {
+                            scanAndRemove(item);
+                        }
+                    } else if (typeof item === "string" && (item === targetImg.filename || item.endsWith("/" + targetImg.filename))) {
+                        val.splice(i, 1);
+                    }
+                }
+            } else if (typeof val === "object") {
+                scanAndRemove(val);
+            }
+        }
+    };
+
+    for (const nodeId in nodeOutputs) {
+        scanAndRemove(nodeOutputs[nodeId]);
+    }
+}
+
+async function openFileOrFolder(img) {
+    if (!img) return;
+
+    // 1. Try server-side open-folder endpoint if backend endpoint exists
+    try {
+        const res = await fetch("/comfy-sidebar/open-folder", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                filename: img.filename,
+                subfolder: img.subfolder || "",
+                type: img.type || "output"
+            })
+        });
+        if (res.ok) return;
+    } catch (e) {}
+
+    // 2. Fallback: open / view / download the file
+    const src = img.url || `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
+    const a = document.createElement("a");
+    a.href = src;
+    a.target = "_blank";
+    a.download = img.filename || "file";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+}
+
 function resetAllCardHoverStates() {
     for (const cardObj of cardElements.values()) {
         if (cardObj.hoverPanel) cardObj.hoverPanel.style.display = "none";
@@ -54,11 +134,38 @@ function updateScrollTopBtnVisibility() {
     }
 }
 
-document.addEventListener("scroll", () => {
+const scrollListener = () => {
     if (State.sidebarContainer && State.sidebarContainer.isConnected) {
         updateScrollTopBtnVisibility();
     }
-}, { capture: true, passive: true });
+};
+
+const handleGlobalKeyDown = (e) => {
+    if (e.key === "Control" || e.key === "Meta") {
+        document.body.classList.add("comfy-sidebar-ctrl-active");
+    }
+};
+
+const handleGlobalKeyUp = (e) => {
+    if (e.key === "Control" || e.key === "Meta") {
+        document.body.classList.remove("comfy-sidebar-ctrl-active");
+    }
+};
+
+const handleGlobalBlur = () => {
+    document.body.classList.remove("comfy-sidebar-ctrl-active");
+};
+
+window.addEventListener("keydown", handleGlobalKeyDown);
+window.addEventListener("keyup", handleGlobalKeyUp);
+window.addEventListener("blur", handleGlobalBlur);
+
+export function setupScrollListener() {
+    document.addEventListener("scroll", scrollListener, { capture: true, passive: true });
+    return () => {
+        document.removeEventListener("scroll", scrollListener, { capture: true, passive: true });
+    };
+}
 
 function findNodeIdForImage(state, img) {
     if (!state || !state.nodeOutputs || !img) return null;
@@ -223,7 +330,7 @@ export function setupSidebarUI() {
         }
         if (toDelete.length > 0) {
             try { await api.fetchApi("/history", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ delete: toDelete }) }); } catch (err) {}
-            saveStatesToLocalStorage();
+            scheduleStateSave();
             renderDOM();
         }
     });
@@ -235,7 +342,7 @@ export function setupSidebarUI() {
             }
         }
         try { await api.fetchApi("/history", { method: "POST", body: JSON.stringify({ clear: true }) }); } catch (err) {}
-        saveStatesToLocalStorage();
+        scheduleStateSave();
         renderDOM();
     });
 
@@ -320,8 +427,21 @@ export function setupSidebarUI() {
 function syncCardButtonVisibility(cardObj, state) {
     if (!cardObj) return;
 
+    // Pending and currently running cards should never display hover action panels
+    const isPendingOrActive = state.status === "pending" || state.status === "active";
+    if (isPendingOrActive) {
+        if (cardObj.hoverPanel) cardObj.hoverPanel.style.setProperty("display", "none", "important");
+        if (cardObj.leftHoverPanel) cardObj.leftHoverPanel.style.setProperty("display", "none", "important");
+        return;
+    } else {
+        if (cardObj.hoverPanel) cardObj.hoverPanel.style.removeProperty("display");
+        if (cardObj.leftHoverPanel) cardObj.leftHoverPanel.style.removeProperty("display");
+    }
+
     const isCompleted = state.status === "completed";
     const hasRealImages = isCompleted && state.images && state.images.length > 0 && !state.images.some(img => img.url && img.url.startsWith("blob:"));
+    const currentImg = hasRealImages ? state.images[cardObj.currentImageIndex || 0] : null;
+    const isPng = currentImg && (currentImg.filename || "").toLowerCase().endsWith(".png");
 
     if (cardObj.btnImg) {
         if (hasRealImages) {
@@ -341,27 +461,63 @@ function syncCardButtonVisibility(cardObj, state) {
         }
     }
 
+    if (cardObj.btnCopy) {
+        if (hasRealImages && currentImg) {
+            cardObj.btnCopy.style.removeProperty("display");
+            cardObj.btnCopy.style.display = "inline-flex";
+            cardObj.btnCopy.onclick = async (ev) => {
+                ev.stopPropagation();
+                const src = currentImg.url ? currentImg.url : `/view?filename=${encodeURIComponent(currentImg.filename)}&type=${currentImg.type || 'output'}&subfolder=${encodeURIComponent(currentImg.subfolder || '')}`;
+                const success = await copyImageToClipboard(src);
+                if (success) {
+                    cardObj.btnCopy.className = "pi pi-check comfy-sidebar-card-action-btn";
+                    cardObj.btnCopy.style.color = "#4ade80";
+                    setTimeout(() => {
+                        cardObj.btnCopy.className = "pi pi-copy comfy-sidebar-card-action-btn";
+                        cardObj.btnCopy.style.color = "";
+                    }, 1500);
+                }
+            };
+        } else {
+            cardObj.btnCopy.style.setProperty("display", "none", "important");
+        }
+    }
+
     if (cardObj.btnJson) {
-        if (state.workflow) {
+        if (state.workflow || isPng) {
             cardObj.btnJson.style.removeProperty("display");
             cardObj.btnJson.style.display = "inline-flex";
-            cardObj.btnJson.onclick = (ev) => {
+            cardObj.btnJson.onclick = async (ev) => {
                 ev.stopPropagation();
-                const blob = new Blob([JSON.stringify(state.workflow, null, 2)], { type: "application/json" });
+                let wf = state.workflow;
+                if (!wf && currentImg) {
+                    const src = currentImg.url ? currentImg.url : `/view?filename=${encodeURIComponent(currentImg.filename)}&type=${currentImg.type || 'output'}&subfolder=${encodeURIComponent(currentImg.subfolder || '')}`;
+                    wf = await extractWorkflowFromPng(src);
+                    if (wf) state.workflow = wf;
+                }
+                if (!wf) {
+                    alert("No workflow metadata found in this file.");
+                    return;
+                }
+                const blob = new Blob([JSON.stringify(wf, 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.download = `workflow_${state.pid || "comfy"}.json`;
                 a.click();
-                URL.revokeObjectURL(url);
+                setTimeout(() => URL.revokeObjectURL(url), 1500);
             };
         } else {
             cardObj.btnJson.style.setProperty("display", "none", "important");
         }
     }
 
+    if (cardObj.btnDel) {
+        cardObj.btnDel.style.removeProperty("display");
+        cardObj.btnDel.style.display = "inline-flex";
+    }
+
     if (cardObj.btnFocus) {
-        const currentImg = hasRealImages ? state.images[cardObj.currentImageIndex || 0] : null;
         const nodeId = currentImg ? findNodeIdForImage(state, currentImg) : null;
         if (nodeId) {
             cardObj.btnFocus.style.removeProperty("display");
@@ -381,7 +537,23 @@ function syncCardButtonVisibility(cardObj, state) {
 
     if (cardObj.leftHoverBtn) {
         const outputs = getRunOutputs(state.nodeOutputs, state.workflow);
-        if (outputs.length > 1) {
+        const validOutputs = outputs.filter(o => o.images && o.images.length > 0);
+
+        // Signatures of images already showing on the primary card
+        const primarySignatures = new Set((state.images || []).map(i => `${i.subfolder || ""}/${i.filename}`));
+        const distinctOutputs = [];
+
+        for (const out of validOutputs) {
+            const hasNewImage = out.images.some(img => !primarySignatures.has(`${img.subfolder || ""}/${img.filename}`));
+            if (hasNewImage) {
+                distinctOutputs.push(out);
+            }
+        }
+
+        // Show intermediate button ONLY if there are genuine distinct/extra outputs
+        const hasIntermediates = validOutputs.length > 1 && distinctOutputs.length > 0;
+
+        if (hasIntermediates) {
             cardObj.leftHoverBtn.style.removeProperty("display");
             cardObj.leftHoverBtn.style.display = "inline-flex";
             cardObj.leftHoverBtn.onclick = (ev) => {
@@ -404,7 +576,7 @@ function render3DCardPreview(cardObj, wrapper, src, img, state) {
     let preview3D = wrapper.querySelector(".comfy-sidebar-3d-wrapper");
     const fullUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
 
-    const imageAssets = state?.images?.filter(i => !is3DFormat(i.filename || i.url) && !isVideoFormat(i.filename || i.url) && !isAudioFormat(i.filename || i.url)) || [];
+    const imageAssets = state?.images?.filter(i => isImageFormat(i.filename || i.url)) || [];
     const lastImageAsset = imageAssets.length > 0 ? imageAssets[imageAssets.length - 1] : null;
     const bgImgSrc = lastImageAsset
         ? (lastImageAsset.url || window.location.origin + `/view?filename=${encodeURIComponent(lastImageAsset.filename)}&type=${lastImageAsset.type || 'output'}&subfolder=${encodeURIComponent(lastImageAsset.subfolder || '')}`)
@@ -460,6 +632,10 @@ function render3DCardPreview(cardObj, wrapper, src, img, state) {
 
     preview3D.onclick = (ev) => {
         ev.stopPropagation();
+        if (ev.ctrlKey || ev.metaKey) {
+            openFileOrFolder(img);
+            return;
+        }
         showFullscreenPreview([fullUrl], ev.shiftKey);
     };
 
@@ -487,7 +663,6 @@ function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
     const filename = img.filename || getFilenameFromUrl(src) || "audio.wav";
     const ext = filename.split('.').pop().toUpperCase();
 
-    // Solid white SVGs for exact video card style consistency
     const playIconSvg = `<svg viewBox="0 0 24 24" width="14" height="14" style="margin-left: 2px; pointer-events: none;"><polygon points="6,4 20,12 6,20" fill="#ffffff"/></svg>`;
     const stopIconSvg = `<svg viewBox="0 0 24 24" width="12" height="12" style="pointer-events: none;"><rect x="5" y="5" width="14" height="14" rx="2" fill="#ffffff"/></svg>`;
 
@@ -509,7 +684,6 @@ function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
 
         topRow.append(title, badge);
 
-        // Center Area: Waveform + Centered Play Button
         const centerArea = document.createElement("div");
         Object.assign(centerArea.style, { position: "relative", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", margin: "6px 0" });
 
@@ -537,7 +711,6 @@ function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
 
         centerArea.append(soundwave, playBtn);
 
-        // Bottom Row: Scrubber + Centered Time Label (with side padding so corner hover buttons don't block controls)
         const bottomRow = document.createElement("div");
         Object.assign(bottomRow.style, { display: "flex", flexDirection: "column", gap: "4px", width: "100%", padding: "0 34px", boxSizing: "border-box" });
 
@@ -547,9 +720,7 @@ function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
             position: "relative", cursor: "pointer"
         });
         const scrubberFill = document.createElement("div");
-        Object.assign(scrubberFill.style, {
-            width: "0%", height: "100%", background: "#c084fc", borderRadius: "2px"
-        });
+        Object.assign(scrubberFill.style, { width: "0%", height: "100%", background: "#c084fc", borderRadius: "2px" });
         scrubber.appendChild(scrubberFill);
 
         const timeLabel = document.createElement("div");
@@ -597,7 +768,6 @@ function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
         const togglePlay = (e) => {
             e.stopPropagation();
 
-            // If the fullscreen audio player is open, switch the modal player to this track
             if (isAudioViewerOpen()) {
                 stopAllAudioPlayback();
                 showFullscreenPreview([fullUrl]);
@@ -635,18 +805,19 @@ function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
             e.stopPropagation();
             const rect = scrubber.getBoundingClientRect();
             const pos = (e.clientX - rect.left) / rect.width;
-            if (audioEl.duration > 0) {
-                audioEl.currentTime = pos * audioEl.duration;
-            }
+            if (audioEl.duration > 0) audioEl.currentTime = pos * audioEl.duration;
         };
 
         previewAudio.append(topRow, centerArea, bottomRow, audioEl);
         wrapper.appendChild(previewAudio);
 
-        // Clicking the card stops any other audio and launches the fullscreen player
         previewAudio.onclick = (e) => {
             if (e.target.closest('button, input') || e.target === scrubber || e.target === scrubberFill) return;
             stopAllAudioPlayback();
+            if (e.ctrlKey || e.metaKey) {
+                openFileOrFolder(img);
+                return;
+            }
             showFullscreenPreview([fullUrl]);
         };
     }
@@ -669,6 +840,87 @@ function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
     };
 }
 
+function renderGenericFileCardPreview(cardObj, wrapper, src, img, state) {
+    let previewFile = wrapper.querySelector(".comfy-sidebar-file-wrapper");
+    const fullUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
+    const filename = img.filename || getFilenameFromUrl(src) || "output_file";
+    const ext = (filename.split('.').pop() || "FILE").toUpperCase();
+    const folderName = img.subfolder ? `${img.subfolder}/` : (img.type || "output");
+
+    if (!previewFile) {
+        wrapper.innerHTML = "";
+        previewFile = document.createElement("div");
+        previewFile.className = "comfy-sidebar-file-wrapper";
+
+        // Top Row: Right-aligned badge
+        const topRow = document.createElement("div");
+        Object.assign(topRow.style, { display: "flex", justifyContent: "flex-end", width: "100%", minHeight: "18px" });
+
+        const badge = document.createElement("span");
+        badge.className = "comfy-sidebar-file-badge";
+        badge.textContent = ext;
+        topRow.appendChild(badge);
+
+        // Center Area: Inline icon + file name
+        const centerArea = document.createElement("div");
+        Object.assign(centerArea.style, { display: "flex", alignItems: "center", gap: "8px", width: "100%", margin: "2px 0 6px 0" });
+
+        const icon = document.createElement("span");
+        icon.className = "pi pi-file comfy-sidebar-file-icon";
+
+        const title = document.createElement("span");
+        title.className = "comfy-sidebar-file-title";
+        title.textContent = filename;
+        title.title = filename;
+
+        centerArea.append(icon, title);
+
+        // Bottom Row: Folder location + open action
+        const bottomRow = document.createElement("div");
+        Object.assign(bottomRow.style, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" });
+
+        const folderInfo = document.createElement("div");
+        folderInfo.className = "comfy-sidebar-file-subtext";
+        folderInfo.innerHTML = `<i class="pi pi-folder" style="font-size: 10px;"></i><span>${folderName}</span>`;
+
+        const openHint = document.createElement("div");
+        openHint.className = "comfy-sidebar-file-subtext";
+        openHint.innerHTML = `<i class="pi pi-external-link" style="font-size: 9px;"></i><span>Open Folder</span>`;
+
+        bottomRow.append(folderInfo, openHint);
+
+        previewFile.append(topRow, centerArea, bottomRow);
+        wrapper.appendChild(previewFile);
+    } else {
+        const title = previewFile.querySelector(".comfy-sidebar-file-title");
+        if (title) { title.textContent = filename; title.title = filename; }
+        const badge = previewFile.querySelector(".comfy-sidebar-file-badge");
+        if (badge) badge.textContent = ext;
+    }
+
+    cardObj.firstImgElement = previewFile;
+
+    previewFile.onclick = (ev) => {
+        ev.stopPropagation();
+        openFileOrFolder(img);
+    };
+
+    previewFile.setAttribute("draggable", "true");
+    previewFile.ondragstart = (e) => {
+        e.stopPropagation();
+        const mimeType = "application/octet-stream";
+        try {
+            e.dataTransfer.setData("text/uri-list", fullUrl);
+            e.dataTransfer.setData("text/plain", fullUrl);
+            e.dataTransfer.setData("DownloadURL", `${mimeType}:${filename}:${fullUrl}`);
+            if (state && state.workflow) {
+                e.dataTransfer.setData("application/json", JSON.stringify(state.workflow));
+            }
+        } catch (err) {}
+        e.dataTransfer.effectAllowed = "copy";
+    };
+}
+
 function renderCardImages(cardObj, state) {
     cardObj.currentImageIndex = cardObj.currentImageIndex || 0;
     if (cardObj.currentImageIndex >= state.images.length) {
@@ -688,6 +940,7 @@ function renderCardImages(cardObj, state) {
     const isVideo = isVideoFormat(src);
     const is3D = is3DFormat(src) || is3DFormat(img.filename);
     const isAudio = isAudioFormat(src) || isAudioFormat(img.filename);
+    const isImage = isImageFormat(src) || isImageFormat(img.filename) || (!isVideo && !is3D && !isAudio && !img.filename?.includes("."));
 
     let wrapper = cardObj.grid.querySelector(".comfy-sidebar-media-wrapper");
     if (!wrapper) {
@@ -698,6 +951,14 @@ function renderCardImages(cardObj, state) {
         cardObj.grid.appendChild(wrapper);
     }
 
+    let ctrlOverlay = wrapper.querySelector(".comfy-sidebar-ctrl-overlay");
+    if (!ctrlOverlay) {
+        ctrlOverlay = document.createElement("div");
+        ctrlOverlay.className = "comfy-sidebar-ctrl-overlay";
+        ctrlOverlay.innerHTML = `<i class="pi pi-folder-open"></i><span>Open Location</span>`;
+        wrapper.appendChild(ctrlOverlay);
+    }
+
     if (is3D) {
         render3DCardPreview(cardObj, wrapper, src, img, state);
         return;
@@ -708,6 +969,11 @@ function renderCardImages(cardObj, state) {
         return;
     }
 
+    if (!isImage && !isVideo) {
+        renderGenericFileCardPreview(cardObj, wrapper, src, img, state);
+        return;
+    }
+
     let mediaEl = wrapper.querySelector("img, video");
     const needsRebuild = !mediaEl || (isVideo !== (mediaEl.tagName.toLowerCase() === "video"));
 
@@ -729,6 +995,10 @@ function renderCardImages(cardObj, state) {
 
     mediaEl.onclick = (ev) => { 
         ev.stopPropagation(); 
+        if (ev.ctrlKey || ev.metaKey) {
+            openFileOrFolder(img);
+            return;
+        }
         showFullscreenPreview([src], ev.shiftKey); 
     };
 
@@ -738,15 +1008,12 @@ function renderCardImages(cardObj, state) {
                 const res = await fetch(src, { method: "HEAD" });
                 if (res.status === 404) {
                     deletePromptState(state.pid);
-                    saveStatesToLocalStorage();
+                    scheduleStateSave();
                     if (cardObj.element) cardObj.element.remove();
                     return;
                 }
             } catch (e) {}
-            if (cardObj.placeholder) {
-                cardObj.placeholder.textContent = "Error loading media preview";
-                cardObj.placeholder.style.display = "block";
-            }
+            renderGenericFileCardPreview(cardObj, wrapper, src, img, state);
         }
     };
 
@@ -970,7 +1237,6 @@ export function renderDOM() {
         const headerSearchIcon = State.sidebarContainer.querySelector(".pi-search");
         const headerActions = State.sidebarContainer.querySelector(".pi-eraser")?.parentNode;
 
-        // Submenu 1: Batch Submenu View
         if (State.activeSubmenuBatchImages) {
             const batchInfo = State.activeSubmenuBatchImages;
 
@@ -1033,7 +1299,93 @@ export function renderDOM() {
                     const btnImg = document.createElement("span");
                     btnImg.className = "pi pi-image comfy-sidebar-card-action-btn";
                     btnImg.title = "Download Object";
-                    hoverPanel.appendChild(btnImg);
+
+                    const btnDel = document.createElement("span");
+                    btnDel.className = "pi pi-trash comfy-sidebar-card-action-btn comfy-sidebar-btn-del";
+                    btnDel.title = "Remove from batch (Hold Ctrl to delete file from disk)";
+                    const btnDelLabel = document.createElement("span");
+                    btnDelLabel.className = "comfy-sidebar-del-label";
+                    btnDelLabel.textContent = "Delete File";
+                    btnDel.appendChild(btnDelLabel);
+
+                    let isDeletePending = false, isDiskDelete = false, deleteTimeout = null;
+                    const resetDelete = () => {
+                        isDeletePending = false;
+                        isDiskDelete = false;
+                        btnDel.classList.remove("confirm-delete", "confirm-delete-disk");
+                        btnDel.title = "Remove from batch (Hold Ctrl to delete file from disk)";
+                        if (deleteTimeout) { clearTimeout(deleteTimeout); deleteTimeout = null; }
+                    };
+
+                    btnDel.onclick = async (ev) => {
+                        ev.stopPropagation();
+                        const wantsDiskDelete = ev.ctrlKey || ev.metaKey;
+
+                        if (!isDeletePending) {
+                            isDeletePending = true;
+                            isDiskDelete = wantsDiskDelete;
+                            btnDel.classList.add(wantsDiskDelete ? "confirm-delete-disk" : "confirm-delete");
+                            btnDel.title = wantsDiskDelete
+                                ? "Ctrl+Click again to delete file from DISK / TRASH"
+                                : "Click again to confirm removing from batch";
+                            deleteTimeout = setTimeout(resetDelete, 2000);
+                        } else {
+                            const shouldDeleteFromDisk = isDiskDelete || wantsDiskDelete;
+                            resetDelete();
+
+                            // 1. Delete only this single file from disk
+                            if (shouldDeleteFromDisk && img && img.filename) {
+                                try {
+                                    await fetch("/comfy-sidebar/delete-file", {
+                                        method: "POST",
+                                        headers: { "Content-Type": "application/json" },
+                                        body: JSON.stringify({
+                                            filename: img.filename,
+                                            subfolder: img.subfolder || "",
+                                            type: img.type || "output"
+                                        })
+                                    });
+                                } catch (e) {}
+                            }
+
+                            // 2. Remove this image from batch list, prompt state, and nodeOutputs
+                            const pid = batchInfo.pid;
+                            const state = promptStates.get(pid);
+                            const imgIdx = batchInfo.images.indexOf(img);
+                            if (imgIdx > -1) batchInfo.images.splice(imgIdx, 1);
+
+                            if (state) {
+                                if (Array.isArray(state.images)) {
+                                    const stIdx = state.images.findIndex(i => i.filename === img.filename && (i.subfolder || "") === (img.subfolder || ""));
+                                    if (stIdx > -1) state.images.splice(stIdx, 1);
+                                }
+
+                                // Sync nodeOutputs so the Intermediate Outputs submenu stays updated
+                                if (state.nodeOutputs) {
+                                    removeImageFromNodeOutputs(state.nodeOutputs, img);
+                                }
+
+                                state.rendered = false;
+                            }
+
+                            // Invalidate main card's cached index & signature
+                            const mainCardObj = cardElements.get(pid);
+                            if (mainCardObj) {
+                                mainCardObj.currentImageIndex = 0;
+                                mainCardObj.lastImagesSignature = "";
+                            }
+
+                            // If batch is now empty, return to main queue
+                            if (batchInfo.images.length === 0) {
+                                State.activeSubmenuBatchImages = null;
+                            }
+
+                            scheduleStateSave();
+                            renderDOM();
+                        }
+                    };
+
+                    hoverPanel.append(btnImg, btnDel);
 
                     const leftHoverPanel = document.createElement("div");
                     leftHoverPanel.className = "comfy-sidebar-left-hover-panel";
@@ -1070,7 +1422,6 @@ export function renderDOM() {
             return;
         }
 
-        // Submenu 2: Intermediate Outputs View
         if (State.activeSubmenuPromptId) {
             const st = promptStates.get(State.activeSubmenuPromptId);
             if (!st) {
@@ -1097,7 +1448,23 @@ export function renderDOM() {
                 globalClickRegistered = true;
             }
 
-            const outputs = getRunOutputs(st.nodeOutputs, st.workflow);
+            const rawOutputs = getRunOutputs(st.nodeOutputs, st.workflow);
+            const seenFiles = new Set();
+            const outputs = [];
+
+            // Deduplicate across nodes so two nodes producing the exact same image don't duplicate cards
+            rawOutputs.forEach(out => {
+                const uniqueImgs = (out.images || []).filter(img => {
+                    const key = `${img.subfolder || ""}/${img.filename}`;
+                    if (seenFiles.has(key)) return false;
+                    seenFiles.add(key);
+                    return true;
+                });
+                if (uniqueImgs.length > 0) {
+                    outputs.push({ nodeId: out.nodeId, images: uniqueImgs });
+                }
+            });
+
             const targetElements = [];
 
             outputs.forEach((out) => {
@@ -1140,7 +1507,79 @@ export function renderDOM() {
                     const btnImg = document.createElement("span");
                     btnImg.className = "pi pi-image comfy-sidebar-card-action-btn";
                     btnImg.title = "Download Object";
-                    hoverPanel.appendChild(btnImg);
+
+                    const btnDel = document.createElement("span");
+                    btnDel.className = "pi pi-trash comfy-sidebar-card-action-btn comfy-sidebar-btn-del";
+                    btnDel.title = "Delete node output (Hold Ctrl to delete file from disk)";
+                    const btnDelLabel = document.createElement("span");
+                    btnDelLabel.className = "comfy-sidebar-del-label";
+                    btnDelLabel.textContent = "Delete File";
+                    btnDel.appendChild(btnDelLabel);
+
+                    let isDeletePending = false, isDiskDelete = false, deleteTimeout = null;
+                    const resetDelete = () => {
+                        isDeletePending = false;
+                        isDiskDelete = false;
+                        btnDel.classList.remove("confirm-delete", "confirm-delete-disk");
+                        btnDel.title = "Delete node output (Hold Ctrl to delete file from disk)";
+                        if (deleteTimeout) { clearTimeout(deleteTimeout); deleteTimeout = null; }
+                    };
+
+                    btnDel.onclick = async (ev) => {
+                        ev.stopPropagation();
+                        const wantsDiskDelete = ev.ctrlKey || ev.metaKey;
+
+                        if (!isDeletePending) {
+                            isDeletePending = true;
+                            isDiskDelete = wantsDiskDelete;
+                            btnDel.classList.add(wantsDiskDelete ? "confirm-delete-disk" : "confirm-delete");
+                            btnDel.title = wantsDiskDelete
+                                ? "Ctrl+Click again to delete this node's files from DISK / TRASH"
+                                : "Click again to confirm removing output";
+                            deleteTimeout = setTimeout(resetDelete, 2000);
+                        } else {
+                            const shouldDeleteFromDisk = isDiskDelete || wantsDiskDelete;
+                            resetDelete();
+
+                            // 1. Delete files belonging only to this specific node
+                            if (shouldDeleteFromDisk && out.images) {
+                                for (const imgItem of out.images) {
+                                    if (imgItem && imgItem.filename) {
+                                        try {
+                                            await fetch("/comfy-sidebar/delete-file", {
+                                                method: "POST",
+                                                headers: { "Content-Type": "application/json" },
+                                                body: JSON.stringify({
+                                                    filename: imgItem.filename,
+                                                    subfolder: imgItem.subfolder || "",
+                                                    type: imgItem.type || "output"
+                                                })
+                                            });
+                                        } catch (e) {}
+                                    }
+                                }
+                            }
+
+                            // 2. Remove node from state.nodeOutputs
+                            if (st.nodeOutputs && st.nodeOutputs[out.nodeId]) {
+                                delete st.nodeOutputs[out.nodeId];
+                            }
+
+                            // 3. Update primary images if needed
+                            const remainingOutputs = getRunOutputs(st.nodeOutputs, st.workflow);
+                            if (remainingOutputs.length > 0) {
+                                st.images = remainingOutputs[remainingOutputs.length - 1].images || [];
+                            } else {
+                                st.images = [];
+                                State.activeSubmenuPromptId = null;
+                            }
+
+                            scheduleStateSave();
+                            renderDOM();
+                        }
+                    };
+
+                    hoverPanel.append(btnImg, btnDel);
 
                     const leftHoverPanel = document.createElement("div");
                     leftHoverPanel.className = "comfy-sidebar-left-hover-panel";
@@ -1177,13 +1616,10 @@ export function renderDOM() {
             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);
 
-            const scrollEl = getScrollContainer();
-            if (scrollEl) scrollEl.scrollTop = 0;
             updateScrollTopBtnVisibility();
             return;
         }
 
-        // Standard Queue Main View
         if (headerTitle) {
             headerTitle.textContent = "Queue";
             headerTitle.style.cursor = "default";
@@ -1205,6 +1641,20 @@ export function renderDOM() {
             let cardObj = cardElements.get(state.pid);
             const isFinalStatus = state.status === "completed" || state.status === "cancelled" || state.status === "error";
             if (cardObj && isFinalStatus && state.rendered) {
+                // Ensure image changes (e.g. deletions from batch submenu) update the preview immediately
+                const currentImagesSignature = `${state.status || ""}:${state.images ? state.images.map(img => img.url || img.filename).join("|") : ""}`;
+                if (cardObj.lastImagesSignature !== currentImagesSignature) {
+                    cardObj.currentImageIndex = Math.min(cardObj.currentImageIndex || 0, Math.max(0, (state.images?.length || 1) - 1));
+                    if (!state.images || state.images.length === 0) {
+                        cardObj.grid.innerHTML = "";
+                        cardObj.firstImgElement = null;
+                        cardObj.placeholder.style.display = "block";
+                    } else {
+                        cardObj.placeholder.style.display = "none";
+                        renderCardImages(cardObj, state);
+                    }
+                    cardObj.lastImagesSignature = currentImagesSignature;
+                }
                 syncCardButtonVisibility(cardObj, state);
                 return cardObj.element;
             }
@@ -1241,8 +1691,19 @@ export function renderDOM() {
                 });
 
                 const btnImg = document.createElement("span"); btnImg.className = "pi pi-image comfy-sidebar-card-action-btn"; btnImg.title = "Download Object";
+                
+                const btnCopy = document.createElement("span");
+                btnCopy.className = "pi pi-copy comfy-sidebar-card-action-btn";
+                btnCopy.title = "Copy Image to Clipboard";
+
                 const btnJson = document.createElement("span"); btnJson.className = "pi pi-file comfy-sidebar-card-action-btn"; btnJson.title = "Download JSON";
-                const btnDel = document.createElement("span"); btnDel.className = "pi pi-trash comfy-sidebar-card-action-btn"; btnDel.title = "Delete Card";
+                const btnDel = document.createElement("span"); 
+                btnDel.className = "pi pi-trash comfy-sidebar-card-action-btn comfy-sidebar-btn-del"; 
+                btnDel.title = "Delete Card (Hold Ctrl to delete file from disk)";
+                const btnDelLabel = document.createElement("span");
+                btnDelLabel.className = "comfy-sidebar-del-label";
+                btnDelLabel.textContent = "Delete File";
+                btnDel.appendChild(btnDelLabel);
 
                 const leftHoverPanel = document.createElement("div"); 
                 leftHoverPanel.className = "comfy-sidebar-left-hover-panel";
@@ -1260,11 +1721,11 @@ export function renderDOM() {
                 leftHoverBtn.title = "View all intermediate outputs";
 
                 hoverPanel.append(btnImg, btnJson, btnDel);
-                leftHoverPanel.append(btnFocus, leftHoverBtn);
+                leftHoverPanel.append(btnCopy, 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, leftHoverPanel, btnFocus, leftHoverBtn, 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, btnCopy, btnJson, btnDel, statusText, firstImgElement: null, lastImagesSignature: "" };
                 
                 card.addEventListener("mouseenter", () => { 
                     syncCardButtonVisibility(cardObj, state);
@@ -1335,26 +1796,72 @@ export function renderDOM() {
                 cardObj.cancelBtn.style.display = "none";
             }
 
-            let deleteTimeout = null, isDeletePending = false;
+            let deleteTimeout = null, isDeletePending = false, isDiskDelete = false;
             const resetDeleteBtn = () => { 
                 isDeletePending = false; 
-                cardObj.btnDel.classList.remove("confirm-delete");
-                cardObj.btnDel.title = "Delete Card"; 
+                isDiskDelete = false;
+                cardObj.btnDel.classList.remove("confirm-delete", "confirm-delete-disk");
+                cardObj.btnDel.title = "Delete Card (Ctrl+Click to delete from disk)"; 
                 if (deleteTimeout) { clearTimeout(deleteTimeout); deleteTimeout = null; } 
             };
             
             cardObj.btnDel.onclick = async (ev) => {
                 ev.stopPropagation();
+                const wantsDiskDelete = ev.ctrlKey || ev.metaKey;
+
                 if (!isDeletePending) {
-                    isDeletePending = true; 
-                    cardObj.btnDel.classList.add("confirm-delete");
-                    cardObj.btnDel.title = "Click again to confirm deletion";
-                    deleteTimeout = setTimeout(resetDeleteBtn, 1500);
+                    isDeletePending = true;
+                    isDiskDelete = wantsDiskDelete;
+                    cardObj.btnDel.classList.add(wantsDiskDelete ? "confirm-delete-disk" : "confirm-delete");
+                    cardObj.btnDel.title = wantsDiskDelete 
+                        ? "Ctrl+Click again to delete file from DISK / TRASH" 
+                        : "Click again to confirm removing card";
+                    deleteTimeout = setTimeout(resetDeleteBtn, 2000);
                 } else {
+                    const shouldDeleteFromDisk = isDiskDelete || wantsDiskDelete;
                     resetDeleteBtn(); 
+
+                    // Delete all files from disk across ALL nodes in this run
+                    if (shouldDeleteFromDisk) {
+                        const filesToDelete = [];
+                        const seen = new Set();
+
+                        const addFile = (item) => {
+                            if (item && item.filename) {
+                                const key = `${item.type || ""}/${item.subfolder || ""}/${item.filename}`;
+                                if (!seen.has(key)) {
+                                    seen.add(key);
+                                    filesToDelete.push(item);
+                                }
+                            }
+                        };
+
+                        // 1. Primary card images/files
+                        (state.images || []).forEach(addFile);
+
+                        // 2. All intermediate node outputs
+                        const allOutputs = getRunOutputs(state.nodeOutputs, state.workflow);
+                        allOutputs.forEach(out => (out.images || []).forEach(addFile));
+
+                        // 3. Delete each file from disk / trash
+                        for (const fileItem of filesToDelete) {
+                            try {
+                                await fetch("/comfy-sidebar/delete-file", {
+                                    method: "POST",
+                                    headers: { "Content-Type": "application/json" },
+                                    body: JSON.stringify({
+                                        filename: fileItem.filename,
+                                        subfolder: fileItem.subfolder || "",
+                                        type: fileItem.type || "output"
+                                    })
+                                });
+                            } catch (e) {}
+                        }
+                    }
+
                     promptStates.delete(state.pid); 
                     await api.fetchApi("/history", { method: "POST", body: JSON.stringify({ delete: [state.pid] }) }); 
-                    saveStatesToLocalStorage();
+                    scheduleStateSave();
                     renderDOM();
                 }
             };
@@ -1376,6 +1883,7 @@ export function renderDOM() {
                     cardObj.placeholder.textContent = fullText;
                     cardObj.placeholder.title = "Click to read full text";
                     cardObj.placeholder.className = "comfy-sidebar-text-clamp";
+                    cardObj.placeholder.style.cssText = "";
                     cardObj.placeholder.style.display = "-webkit-box";
                     cardObj.placeholder.onclick = (e) => {
                         e.stopPropagation();
@@ -1396,7 +1904,7 @@ export function renderDOM() {
             if (state.status === "active") {
                 if (showWorkingNode) {
                     cardObj.statusText.style.display = "block";
-                    cardObj.statusText.textContent = state.activeNodeName ? (state.activeNodeName === "Finishing..." ? "Finishing..." : `[${state.activeNodeName}]${state.progress ? ` ${state.progress}%` : ""}`) : `Sampling...${state.progress ? ` ${state.progress}%` : ""}`;
+                    cardObj.statusText.textContent = state.activeNodeName ? (state.activeNodeName === "Finishing..." ? "Finishing..." : `[${state.activeNodeName}]${state.progress ? ` ${state.progress}%` : ""}`) : `Processing...${state.progress ? ` ${state.progress}%` : ""}`;
                 } else cardObj.statusText.style.display = "none";
                 cardObj.progressContainer.style.display = "block"; cardObj.progressBar.style.width = `${state.progress || 0}%`;
             } else { cardObj.statusText.style.display = "none"; cardObj.progressContainer.style.display = "none"; }
@@ -1405,7 +1913,9 @@ export function renderDOM() {
             return cardObj.element;
         };
 
-        for (const [pid, cardObj] of cardElements.entries()) { if (pid !== "pending-summary-card" && pid !== "pending-cancel-all-standalone" && !promptStates.has(pid)) cardElements.delete(pid); }
+        for (const [pid] of cardElements.entries()) { 
+            if (pid !== "pending-summary-card" && pid !== "pending-cancel-all-standalone" && !promptStates.has(pid)) cardElements.delete(pid); 
+        }
 
         const pendingCount = Array.from(promptStates.values()).filter(t => t.status === "pending").length;
         const targetElements = [];

js/utils.js

@@ -1,25 +1,37 @@
 import { app } from "/scripts/app.js";
 
+const FILE_EXT_REGEX = /\.(safetensors|ckpt|pt|pth|bin|latent|onnx|engine|gguf|lora|zip|tar|gz|7z|json|csv|parquet|txt|yaml|yml|xml|pdf|blend|fbx|obj|glb|gltf|stl|ply|splat|spz|ksplat|png|jpg|jpeg|webp|gif|bmp|tiff|svg|mp4|webm|wav|mp3|ogg|flac|m4a|aac|opus)$/i;
+
+export const isImageFormat = (url) => {
+    if (!url) return false;
+    if (String(url).startsWith("blob:") || String(url).startsWith("data:image/")) return true;
+    const s = String(url).toLowerCase().split("?")[0];
+    return s.endsWith(".png") || s.endsWith(".jpg") || s.endsWith(".jpeg") || 
+           s.endsWith(".webp") || s.endsWith(".gif") || s.endsWith(".bmp") || 
+           s.endsWith(".tiff") || s.endsWith(".tif") || s.endsWith(".svg") || 
+           s.endsWith(".avif") || s.endsWith(".ico") || s.endsWith(".apng");
+};
+
 export const isVideoFormat = (url) => {
     if (!url) return false;
-    const s = String(url).toLowerCase();
-    return s.includes(".mp4") || s.includes(".webm");
+    const s = String(url).toLowerCase().split("?")[0];
+    return s.endsWith(".mp4") || s.endsWith(".webm") || s.endsWith(".mov") || s.endsWith(".mkv");
 };
 
 export const is3DFormat = (url) => {
     if (!url) return false;
-    const s = String(url).toLowerCase();
-    return s.includes(".glb") || s.includes(".gltf") || s.includes(".obj") || 
-           s.includes(".ply") || s.includes(".stl") || s.includes(".splat") || 
-           s.includes(".spz") || s.includes(".ksplat") || s.includes(".fbx");
+    const s = String(url).toLowerCase().split("?")[0];
+    return s.endsWith(".glb") || s.endsWith(".gltf") || s.endsWith(".obj") || 
+           s.endsWith(".ply") || s.endsWith(".stl") || s.endsWith(".splat") || 
+           s.endsWith(".spz") || s.endsWith(".ksplat") || s.endsWith(".fbx");
 };
 
 export const isAudioFormat = (url) => {
     if (!url) return false;
-    const s = String(url).toLowerCase();
-    return s.includes(".wav") || s.includes(".mp3") || s.includes(".ogg") || 
-           s.includes(".flac") || s.includes(".m4a") || s.includes(".aac") || 
-           s.includes(".opus");
+    const s = String(url).toLowerCase().split("?")[0];
+    return s.endsWith(".wav") || s.endsWith(".mp3") || s.endsWith(".ogg") || 
+           s.endsWith(".flac") || s.endsWith(".m4a") || s.endsWith(".aac") || 
+           s.endsWith(".opus");
 };
 
 export function getFilenameFromUrl(url) {
@@ -46,6 +58,14 @@ export function parseWorkflow(workflow) {
 }
 
 function isNodeIgnored(nodeId, rawWorkflow) {
+    // 1. Check live canvas node property first
+    if (app.graph) {
+        const canvasNode = app.graph.getNodeById ? (app.graph.getNodeById(Number(nodeId)) || app.graph.getNodeById(String(nodeId))) : null;
+        if (canvasNode?.properties?.ignoreInQueue !== undefined) {
+            return !!canvasNode.properties.ignoreInQueue;
+        }
+    }
+    // 2. Fallback to historical workflow snapshot
     const workflow = parseWorkflow(rawWorkflow);
     if (!workflow || !Array.isArray(workflow.nodes)) {
         return false;
@@ -54,37 +74,135 @@ function isNodeIgnored(nodeId, rawWorkflow) {
     return !!(node && node.properties && node.properties.ignoreInQueue);
 }
 
+function extractFileCandidate(val, subfolder = "", type = "output") {
+    if (!val || typeof val !== "string") return null;
+    const trimmed = val.trim();
+
+    // 1. Ignore directory dots, floats/numbers, and empty strings
+    if (trimmed === "." || trimmed === ".." || trimmed === "./" || trimmed === "../" || trimmed === "") {
+        return null;
+    }
+    if (!isNaN(Number(trimmed))) {
+        return null;
+    }
+
+    // 2. Extract base file name
+    const cleanName = trimmed.split("/").pop()?.split("\\").pop()?.trim() || "";
+    if (!cleanName || cleanName === "." || cleanName === "..") return null;
+
+    // 3. Must have a dot with real name before and after (e.g. "model.safetensors")
+    const dotIndex = cleanName.lastIndexOf(".");
+    if (dotIndex <= 0 || dotIndex === cleanName.length - 1) {
+        return null;
+    }
+
+    const ext = cleanName.substring(dotIndex + 1).toLowerCase();
+    const base = cleanName.substring(0, dotIndex).trim();
+    if (!base || !ext) return null;
+
+    // 4. Must match a known extension or a valid 1-8 char alphanumeric extension without whitespace
+    const isValidExt = FILE_EXT_REGEX.test("." + ext) || (/^[a-z0-9]{1,8}$/i.test(ext) && !trimmed.includes(" ") && trimmed.length < 100);
+
+    if (isValidExt) {
+        return {
+            filename: cleanName,
+            subfolder: subfolder || (trimmed.includes("/") ? trimmed.substring(0, trimmed.lastIndexOf("/")) : ""),
+            type: type || "output"
+        };
+    }
+    return null;
+}
+
 export function findImagesInOutputs(outputs, rawWorkflow) {
     const list = [];
-    if (!outputs) return list;
+    const seen = new Set();
 
-    const scan = (obj) => {
+    const addCandidate = (item) => {
+        if (!item || !item.filename) return;
+        const key = `${item.subfolder || ""}/${item.filename}`;
+        if (!seen.has(key)) {
+            seen.add(key);
+            list.push(item);
+        }
+    };
+
+    const scan = (obj, sub = "", typ = "output") => {
         if (!obj) return;
+        if (typeof obj === "string") {
+            const cand = extractFileCandidate(obj, sub, typ);
+            if (cand) addCandidate(cand);
+            return;
+        }
         if (Array.isArray(obj)) {
-            obj.forEach(item => scan(item));
-        } else if (typeof obj === "object") {
-            if (obj.filename || obj.name) {
-                const fname = obj.filename || obj.name;
-                if (typeof fname === "string" && (fname.includes(".") || obj.type)) {
-                    list.push({
-                        filename: fname,
-                        subfolder: obj.subfolder || "",
-                        type: obj.type || "output"
-                    });
+            obj.forEach(item => scan(item, sub, typ));
+            return;
+        }
+        if (typeof obj === "object") {
+            const targetSub = obj.subfolder || sub || "";
+            const targetTyp = obj.type || typ || "output";
+
+            const fname = obj.filename || obj.name || obj.file || obj.path || 
+                          obj.lora_name || obj.model_name || obj.save_name || 
+                          obj.saved_file || obj.output_path || obj.file_name;
+
+            if (fname && typeof fname === "string") {
+                const cand = extractFileCandidate(fname, targetSub, targetTyp);
+                if (cand) {
+                    addCandidate(cand);
                     return;
                 }
             }
+
             for (const key in obj) {
-                scan(obj[key]);
+                scan(obj[key], targetSub, targetTyp);
             }
         }
     };
 
     const workflow = parseWorkflow(rawWorkflow);
-    for (const nodeId in outputs) {
-        if (isNodeIgnored(nodeId, workflow)) continue;
-        scan(outputs[nodeId]);
+
+    if (outputs) {
+        for (const nodeId in outputs) {
+            if (isNodeIgnored(nodeId, workflow)) continue;
+            scan(outputs[nodeId]);
+        }
     }
+
+    if (list.length > 0) return list;
+
+    // Fallback: If scanning a specific node ID, only look at that matching node in the workflow
+    if (workflow && Array.isArray(workflow.nodes)) {
+        const targetNodeIds = outputs ? Object.keys(outputs).map(String) : null;
+
+        for (const node of workflow.nodes) {
+            if (node && !node.properties?.ignoreInQueue) {
+                if (targetNodeIds && !targetNodeIds.includes(String(node.id))) {
+                    continue;
+                }
+
+                const typeStr = (node.type || "").toLowerCase();
+                const isLoaderNode = typeStr.includes("load") || typeStr.includes("loader") || typeStr.includes("input");
+                const isSaveNode = !isLoaderNode && (typeStr.includes("save") || typeStr.includes("extract") || 
+                                   typeStr.includes("export") || typeStr.includes("writer"));
+                
+                if (isSaveNode && Array.isArray(node.widgets_values)) {
+                    for (const val of node.widgets_values) {
+                        if (typeof val === "string" && val.trim().length > 0) {
+                            let fname = val.trim();
+                            if (typeStr.includes("lora") && !fname.includes(".")) {
+                                fname += ".safetensors";
+                            } else if (typeStr.includes("latent") && !fname.includes(".")) {
+                                fname += ".latent";
+                            }
+                            const cand = extractFileCandidate(fname, typeStr.includes("lora") ? "loras" : "", "output");
+                            if (cand) addCandidate(cand);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     return list;
 }
 
@@ -98,14 +216,14 @@ export function findTextsInOutputs(outputs, rawWorkflow) {
             const val = outputs[nodeId][key];
             if (Array.isArray(val)) {
                 val.forEach(item => {
-                    if (typeof item === 'string') {
+                    if (typeof item === 'string' && !FILE_EXT_REGEX.test(item.trim())) {
                         list.push(item);
                     } else if (item && typeof item === 'object' && item.text) {
                         if (Array.isArray(item.text)) list.push(...item.text);
                         else if (typeof item.text === 'string') list.push(item.text);
                     }
                 });
-            } else if (typeof val === 'string') {
+            } else if (typeof val === 'string' && !FILE_EXT_REGEX.test(val.trim())) {
                 list.push(val);
             } else if (val && typeof val === 'object' && val.text) {
                 if (Array.isArray(val.text)) list.push(...val.text);
@@ -121,7 +239,12 @@ export function getRunOutputs(nodeOutputs, rawWorkflow) {
     const list = [];
     if (!nodeOutputs) return list;
     for (const nodeId in nodeOutputs) {
-        const imgs = findImagesInOutputs({ [nodeId]: nodeOutputs[nodeId] }, workflow);
+        const nodeOut = nodeOutputs[nodeId];
+        // Ignore empty node outputs
+        if (!nodeOut || (typeof nodeOut === "object" && Object.keys(nodeOut).length === 0)) {
+            continue;
+        }
+        const imgs = findImagesInOutputs({ [nodeId]: nodeOut }, workflow);
         if (imgs.length > 0) {
             list.push({ nodeId, images: imgs });
         }
@@ -130,9 +253,9 @@ export function getRunOutputs(nodeOutputs, rawWorkflow) {
 }
 
 export function getPrimaryOutputImages(nodeOutputs, rawWorkflow) {
-    if (!nodeOutputs) return [];
+    if (!nodeOutputs) return findImagesInOutputs(null, rawWorkflow);
     const runOutputs = getRunOutputs(nodeOutputs, rawWorkflow);
-    if (runOutputs.length === 0) return [];
+    if (runOutputs.length === 0) return findImagesInOutputs(nodeOutputs, rawWorkflow);
     return runOutputs[runOutputs.length - 1].images || [];
 }
 
@@ -160,4 +283,44 @@ export function matchesFilter(state, query) {
         }
     }
     return false;
+}
+
+export async function extractWorkflowFromPng(imageUrl) {
+    try {
+        const res = await fetch(imageUrl);
+        const buffer = await res.arrayBuffer();
+        const view = new DataView(buffer);
+
+        // Verify PNG signature (89 50 4E 47 0D 0A 1A 0A)
+        if (view.getUint32(0) !== 0x89504E47 || view.getUint32(4) !== 0x0D0A1A0A) {
+            return null;
+        }
+
+        let offset = 8;
+        const utf8Decoder = new TextDecoder("utf-8");
+
+        while (offset < buffer.byteLength) {
+            const length = view.getUint32(offset);
+            const type = utf8Decoder.decode(new Uint8Array(buffer, offset + 4, 4));
+
+            if (type === "tEXt") {
+                const chunkData = new Uint8Array(buffer, offset + 8, length);
+                const nullIdx = chunkData.indexOf(0);
+                if (nullIdx !== -1) {
+                    const keyword = utf8Decoder.decode(chunkData.subarray(0, nullIdx));
+                    if (keyword === "workflow") {
+                        const text = utf8Decoder.decode(chunkData.subarray(nullIdx + 1));
+                        return JSON.parse(text);
+                    }
+                }
+            } else if (type === "IEND") {
+                break;
+            }
+
+            offset += 12 + length; // 4 (length) + 4 (type) + length (data) + 4 (crc)
+        }
+    } catch (e) {
+        console.warn("Comfy Sidebar: Could not extract workflow from PNG", e);
+    }
+    return null;
 }

js/viewer3d.js

@@ -1,17 +1,14 @@
 import { is3DFormat } from "./utils.js";
-import { State } from "./state.js";
+import { SidebarOverlay } from "./overlay.js";
 
-let globalKeydownHandler = null;
 let cachedThreeLibs = null;
 
 async function getThreeLibs() {
     if (cachedThreeLibs) return cachedThreeLibs;
-
     if (window.THREE && window.THREE.GLTFLoader && window.THREE.OrbitControls) {
         cachedThreeLibs = window.THREE;
         return cachedThreeLibs;
     }
-
     try {
         const [three, controls, gltf, obj, stl, ply] = await Promise.all([
             import("https://esm.sh/three@0.170.0"),
@@ -38,55 +35,11 @@ async function getThreeLibs() {
 }
 
 export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () => {}) {
-    if (globalKeydownHandler) {
-        document.removeEventListener("keydown", globalKeydownHandler);
-        globalKeydownHandler = null;
-    }
-
-    const container = document.createElement("div");
-    container.className = "comfy-sidebar-comparison-overlay comfy-sidebar-3d-overlay-root";
-    Object.assign(container.style, {
-        position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh",
-        background: "rgba(10, 10, 10, 0.95)", display: "flex", flexDirection: "column",
-        zIndex: "1000", boxSizing: "border-box", overflow: "hidden",
-        pointerEvents: "auto", userSelect: "none", "-webkit-user-select": "none"
+    const overlay = new SidebarOverlay({
+        className: "comfy-sidebar-3d-overlay-root",
+        onDestroy
     });
 
-    const updateOverlayBounds = () => {
-        const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
-        if (sidebarEl && sidebarEl.offsetWidth > 0 && sidebarEl.isConnected) {
-            const rect = sidebarEl.getBoundingClientRect();
-            if (rect.left < window.innerWidth / 2) {
-                const leftOffset = Math.max(0, rect.right);
-                container.style.left = `${leftOffset}px`;
-                container.style.width = `calc(100vw - ${leftOffset}px)`;
-                container.style.right = "0px";
-            } else {
-                const rightOffset = Math.max(0, window.innerWidth - rect.left);
-                container.style.left = "0px";
-                container.style.width = `calc(100vw - ${rightOffset}px)`;
-                container.style.right = `${rightOffset}px`;
-            }
-            container.style.top = `${Math.max(0, rect.top)}px`;
-            container.style.height = `calc(100vh - ${Math.max(0, rect.top)}px)`;
-        } else {
-            container.style.left = "0px";
-            container.style.width = "100vw";
-            container.style.top = "0px";
-            container.style.height = "100vh";
-        }
-    };
-
-    updateOverlayBounds();
-    window.addEventListener("resize", updateOverlayBounds);
-
-    let resizeObserver = null;
-    const sidebarEl = State.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || State.sidebarContainer;
-    if (sidebarEl && window.ResizeObserver) {
-        resizeObserver = new ResizeObserver(() => updateOverlayBounds());
-        resizeObserver.observe(sidebarEl);
-    }
-
     const header = document.createElement("div");
     Object.assign(header.style, {
         position: "absolute", top: "16px", left: "50%", transform: "translateX(-50%)",
@@ -98,26 +51,14 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
     const titleText = document.createElement("span");
     titleText.textContent = baseSrc.split("/").pop().split("?")[0] || "3D Model";
     header.appendChild(titleText);
-    container.appendChild(header);
-
-    const closeBtn = document.createElement("span");
-    closeBtn.className = "pi pi-times";
-    closeBtn.title = "Close (Esc)";
-    Object.assign(closeBtn.style, {
-        position: "absolute", top: "16px", right: "24px", zIndex: "30",
-        cursor: "pointer", fontSize: "20px", color: "#aaa", transition: "color 0.15s ease",
-        background: "rgba(10,10,10,0.6)", borderRadius: "50%", padding: "4px"
-    });
-    closeBtn.onmouseenter = () => closeBtn.style.color = "#fff";
-    closeBtn.onmouseleave = () => closeBtn.style.color = "#aaa";
-    container.appendChild(closeBtn);
+    overlay.container.appendChild(header);
 
     const canvasContainer = document.createElement("div");
     Object.assign(canvasContainer.style, {
         width: "100%", height: "100%", position: "relative",
         display: "flex", alignItems: "center", justifyContent: "center"
     });
-    container.appendChild(canvasContainer);
+    overlay.container.appendChild(canvasContainer);
 
     const loadingSpinner = document.createElement("div");
     Object.assign(loadingSpinner.style, {
@@ -127,7 +68,7 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
         display: "flex", alignItems: "center", gap: "10px"
     });
     loadingSpinner.innerHTML = `<span class="pi pi-spin pi-spinner" style="font-size: 18px;"></span> Loading 3D Asset...`;
-    container.appendChild(loadingSpinner);
+    overlay.container.appendChild(loadingSpinner);
 
     const settingsPanel = document.createElement("div");
     Object.assign(settingsPanel.style, {
@@ -298,30 +239,7 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
         }
     };
 
-    const destroy = () => {
-        window.removeEventListener("resize", updateOverlayBounds);
-        if (resizeObserver) resizeObserver.disconnect();
-        if (globalKeydownHandler) {
-            document.removeEventListener("keydown", globalKeydownHandler);
-            globalKeydownHandler = null;
-        }
-        cleanup3D();
-        container.remove();
-        onDestroy();
-    };
-
-    closeBtn.onclick = destroy;
-    container.onclick = (e) => {
-        if (e.target === container || e.target === canvasContainer) destroy();
-    };
-
-    const handleKeys = (e) => {
-        if (e.key === "Escape") destroy();
-    };
-    globalKeydownHandler = handleKeys;
-    document.addEventListener("keydown", globalKeydownHandler);
-
-    document.body.appendChild(container);
+    overlay.addCleanup(cleanup3D);
 
     const initSceneAndLoad = async (srcUrl) => {
         loadingSpinner.style.display = "flex";
@@ -405,11 +323,9 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
                 const prevPos = camera.position.clone();
                 const prevTarget = controls.target.clone();
 
-                if (val === "orthographic") {
-                    camera = cameraOrtho;
-                } else {
-                    camera = cameraPersp;
-                }
+                if (val === "orthographic") camera = cameraOrtho;
+                else camera = cameraPersp;
+
                 camera.position.copy(prevPos);
                 controls.object = camera;
                 controls.target.copy(prevTarget);
@@ -455,7 +371,7 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
                 createFormGroup("FOV", fovContainer),
                 createFormGroup("Light Intensity", lightContainer)
             );
-            container.appendChild(settingsPanel);
+            overlay.container.appendChild(settingsPanel);
 
             const btnGrid = createToolbarBtn("pi pi-table", "Grid", true, (v) => { gridHelper.visible = v; });
             const btnRotate = createToolbarBtn("pi pi-sync", "Auto-Rotate", false, (v) => { autoRotate = v; });
@@ -496,7 +412,7 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
             exportSelect.style.color = "#93c5fd";
 
             toolbar.append(btnGrid, btnWire, btnRotate, btnResetCam, btnSettings, exportSelect);
-            container.appendChild(toolbar);
+            overlay.container.appendChild(toolbar);
 
             const onResize = () => {
                 if (!canvasContainer || !renderer || !cameraPersp || !cameraOrtho) return;
@@ -517,6 +433,7 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
                 renderer.setSize(width, height);
             };
             window.addEventListener("resize", onResize);
+            overlay.addCleanup(() => window.removeEventListener("resize", onResize));
 
             const animate = () => {
                 animId = requestAnimationFrame(animate);
@@ -557,16 +474,11 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
 
             if (loadedObj) {
                 currentModel = loadedObj;
-
                 currentModel.traverse((child) => {
-                    if (child.isMesh && child.material) {
-                        child._originalMaterial = child.material;
-                    }
+                    if (child.isMesh && child.material) child._originalMaterial = child.material;
                 });
-
                 applyMaterialMode();
                 applyUpDirection();
-
                 scene.add(currentModel);
                 fitCameraToObject(camera, currentModel, controls, THREE);
                 gridHelper.position.y = new THREE.Box3().setFromObject(currentModel).min.y;
@@ -605,12 +517,12 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
         is3D: true,
         loadTarget(targetSrc) {
             if (!is3DFormat(targetSrc)) {
-                destroy();
+                overlay.destroy();
                 onSwitchMedia(targetSrc);
                 return;
             }
             initSceneAndLoad(targetSrc);
         },
-        destroy
+        destroy: () => overlay.destroy()
     };
 }

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfy-sidebar"
 description = "A custom queue sidebar and image comparison extension that reintroduces and improves a sidebar queue menu and unified compact topbar layout for ComfyUI."
-version = "1.3.1"
+version = "1.4.2"
 license = { file = "LICENSE" }
 dependencies = []