Updated for frontend version 1.48.7+. Add 3D files output support (TBD)

.github/workflows/publish_action.yml

@@ -1,4 +1,5 @@
-name: Publish to Comfy registry
+name: Publish to Comfy registry & GitHub Release
+
 on:
   workflow_dispatch:
   push:
@@ -11,10 +12,31 @@ jobs:
   publish-node:
     name: Publish Custom Node to registry
     runs-on: ubuntu-latest
+    permissions:
+      contents: write # Gives GitHub permission to create tags & releases
+
     steps:
       - name: Check out code
         uses: actions/checkout@v4
+
       - name: Publish Custom Node
         uses: Comfy-Org/publish-node-action@main
         with:
-          personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}
+          personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}
+
+      # 1. Read version string from pyproject.toml
+      - name: Extract Version
+        id: get_version
+        run: |
+          VERSION=$(grep -m 1 'version' pyproject.toml | cut -d '"' -f 2)
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      # 2. Automatically create Git Tag & GitHub Release
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: v${{ env.VERSION }}
+          name: v${{ env.VERSION }}
+          generate_release_notes: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -1,20 +1,22 @@
 # ComfyUI-ComfySidebar
 
-A lightweight, high-performance ComfyUI extension that replaces the cluttered stock Job History/Queue interface with a compact drag&drop queue panel, inspired by the pre-vue ComfyUI frontend design. 
+A compact sidebar for ComfyUI that replaces the stock queue/history UI with a faster way to browse, preview, compare, and manage generation results.
 
 > ⚠️ **Note:** This repository was developed collaboratively with AI. While it is fully functional and has been tested, there is always room for optimization. If you have ideas for improvements, contributions via Pull Requests are highly welcome!
 
 ## ✨ Features
 
-* **Advanced Drag & Drop Support**: Designed specifically for precise mouse pointer controls. Easily drag previous generations back to the empty canvas to restore workflows, or drop images directly into `LoadImage` and input nodes to hot-swap them.
-* **High-Visibility Preview Cards**: Keep your past runs instantly recognizable. Supports aspect-ratio locked thumbnails for images and auto-playing muted loops for video formats, as well as clean rendering for multi-line text outputs.
-* **Quick Save Buttons**: Dedicated interactive shortcuts appear on hover, allowing you to instantly download generation outputs or export exact workflow JSON files with a single click.
-* **Compact Adaptive Design**: A clean, smart layout that automatically balances single or multi-column grids based on your sidebar width. It maximizes viewable content and respects your active screen area without wasting precious space.
-* **Live Queue Tracking**: Stay informed on your server state. Includes a visual progress bar that tracks generations dynamically and displays the exact node title currently being executed.
-* A compact topbar layout displaying both workflow tabs and the control panel on a single unified top bar. See the 'Comfy Layout' toggle in the settings.
-* Toggles to hide buttons you don't need from the side panel.
-* **[NEW]** Preview compare slider - just click the result image preview in the sidebar, and then `Shift+Click` another to load it alongside the first one for pixel by pixel comparison. 
-* **[NEW]** Prevent selected nodes from showing the output in the queue bar and intermediate results. `Ctrl+Q` to toggle. 
+* Browse generation results in a compact grid.
+* Drag results back onto the canvas to restore workflows.
+* Drag images directly into `LoadImage` and compatible input nodes.
+* Preview images, videos, and text outputs.
+* Compare two results side by side with `Shift+Click`.
+* Download generated files or workflow JSON directly from result cards.
+* Show queue progress and the node currently being executed.
+* Hide sidebar tabs and UI elements you don't use.
+* 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`.
 
 <img width="385" height="336" alt="image" src="https://github.com/user-attachments/assets/743fbf85-9281-4561-9dd0-cd9af4d8c0e4" />
 
@@ -33,10 +35,31 @@ Restart your ComfyUI server and refresh the browser tab.
 
 ## ⚙️ Configuration
 
-See additional tweaks in ComfyUI settings menu > Comfy Sidebar. From there, you can adjust the layout or fully replace the stock V2 panel by enabling options like **"Comfy Layout"** and **"Replace the stock Job History sidebar with Comfy Queue"**.
+Open **Settings → Comfy Sidebar** to configure:
+
+* Queue grid layout
+* Result aspect ratio
+* Queue display mode
+* Working node display
+* Automatic cleanup of cancelled/failed jobs
+* Sidebar tabs to hide
+* Stock Job History replacement
+* Graph button visibility
+* Unified top bar layout
 
 ## ⌨️ Shortcuts
 
-* **`Q`**: Instantly toggles the sidebar panel open or closed. Safely ignores inputs if you are currently typing inside a text field, input area, or combo box.
-* **`Ctrl+Q on a selected node`**: Sets the node to be ignored in the sidebar panel results.
-* **`Click`**  on a card to enter preview. **`Shift+Click`** on another card in preview to enter compare mode.
+| Shortcut      | Action                                             |
+| ------------- | -------------------------------------------------- |
+| `Q`           | Toggle ComfySidebar                                |
+| `Ctrl+Q`      | Toggle sidebar output filtering for selected nodes |
+| `Click`       | Open result preview                                |
+| `Shift+Click` | Compare another result                             |
+
+## 📝 Notes
+
+ComfySidebar integrates with the ComfyUI frontend and therefore depends on parts of its UI structure. Frontend changes in ComfyUI may require corresponding updates to this extension.
+
+## License
+
+See [LICENSE](LICENSE).

__init__.py

@@ -1,20 +1,8 @@
 # Standard ComfyUI extension loader
-from server import PromptServer
-from aiohttp import web
-import uuid
-
 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"]
-
-# Create a unique session ID for this backend boot to track server restarts
-server_session_id = str(uuid.uuid4())
-
-# Register a custom route to check for backend restarts
-@PromptServer.instance.routes.get("/classic-sidebar/session")
-async def get_session_id(request):
-    return web.json_response({"session_id": server_session_id})
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]

js/comparison.js

@@ -1,5 +1,5 @@
-import { State } from "./state.js";
-import { isVideoFormat } from "./utils.js";
+import { isVideoFormat, is3DFormat } from "./utils.js";
+import { app } from "/scripts/app.js";
 
 let activeComparisonViewer = null;
 let globalKeydownHandler = null;
@@ -32,7 +32,6 @@ const createMediaElement = (src, muted = false) => {
 const setupVideoPlayback = (vid, container) => {
     if (!vid) return () => {};
 
-    // Localized animation loop states to prevent cross-instance contamination
     let videoSyncActive = true;
     let syncAnimationFrameId = null;
 
@@ -193,7 +192,6 @@ function createComparisonViewer(baseSrc) {
     });
     container.appendChild(wrapper);
 
-    // Bottom tooltip helper (Font size increased to 12px for legibility)
     const hintPrompt = document.createElement("div");
     Object.assign(hintPrompt.style, {
         position: "absolute", bottom: "16px", zIndex: "30",
@@ -206,13 +204,12 @@ function createComparisonViewer(baseSrc) {
     }
     container.appendChild(hintPrompt);
 
-    // Track drag actions to prevent mouseup outside the slider from triggering modal exit
     let wasDragging = false;
 
     container.onclick = (e) => {
         if (e.target === container) {
             if (wasDragging) {
-                wasDragging = false; // Ignore synthetic click caused by releasing drag on backdrop
+                wasDragging = false;
                 return;
             }
             destroy();
@@ -377,11 +374,34 @@ function createComparisonViewer(baseSrc) {
 
 export function showFullscreenPreview(imgSrcs, isShiftClick = false) {
     if (!imgSrcs || imgSrcs.length === 0) return;
+
+    const src = imgSrcs[0];
+
+    // Handle 3D assets natively or by focusing 3D node
+    if (is3DFormat(src)) {
+        if (window.app?.ui?.show3DViewer) {
+            window.app.ui.show3DViewer(src);
+            return;
+        }
+
+        if (app.graph && app.canvas) {
+            const nodes = app.graph._nodes || [];
+            const node = nodes.find(n => 
+                n.type?.includes("Preview3D") || n.type?.includes("Load3D") || 
+                n.type?.includes("SaveGLB") || n.type?.includes("Save 3D")
+            );
+            if (node) {
+                app.canvas.centerOnNode(node);
+                app.canvas.selectNode(node);
+            }
+        }
+        return;
+    }
     
     if (activeComparisonViewer) {
-        activeComparisonViewer.loadTarget(imgSrcs[0], isShiftClick);
+        activeComparisonViewer.loadTarget(src, isShiftClick);
         return;
     }
 
-    activeComparisonViewer = createComparisonViewer(imgSrcs[0]);
+    activeComparisonViewer = createComparisonViewer(src);
 }

js/dragdrop.js

@@ -7,7 +7,7 @@ async function uploadDroppedImageToInput(imageObj) {
         const response = await fetch(src);
         if (!response.ok) return null;
         const blob = await response.blob();
-        const file = new File([blob], imageObj.filename || "dropped_image.png", { type: blob.type });
+        const file = new File([blob], imageObj.filename || "dropped_file", { type: blob.type });
         const formData = new FormData();
         formData.append("image", file);
         formData.append("overwrite", "true");
@@ -17,7 +17,7 @@ async function uploadDroppedImageToInput(imageObj) {
         const uploadData = await uploadRes.json();
         return uploadData.name;
     } catch(e) {
-        console.error("Comfy Sidebar: Failed to copy image to input.", e);
+        console.error("Comfy Sidebar: Failed to copy file to input.", e);
         return null;
     }
 }
@@ -40,8 +40,8 @@ export function setupDragAndDrop() {
         const canvas = app.canvas;
         if (!canvas || !canvas.graph) return;
 
-        // 1. Check for standard workflow JSON data drop
-        const jsonStr = e.dataTransfer.getData("application/json") || e.dataTransfer.getData("text/plain");
+        // 1. Check for workflow JSON drop (text-only and unfinished cards)
+        const jsonStr = e.dataTransfer.getData("application/json");
         if (jsonStr) {
             try {
                 const workflow = JSON.parse(jsonStr);
@@ -59,7 +59,7 @@ export function setupDragAndDrop() {
             } catch (err) {}
         }
 
-        // 2. Check for native image URL drop
+        // 2. Check for image / video / 3D URL drop
         const url = e.dataTransfer.getData("text/uri-list") || e.dataTransfer.getData("text/plain");
         if (url) {
             try {
@@ -77,28 +77,50 @@ export function setupDragAndDrop() {
                         if (canvas.convertEventToCanvasOffset) {
                             const pos = canvas.convertEventToCanvasOffset(e);
                             targetNode = canvas.graph.getNodeOnPos(pos[0], pos[1]);
-                        } else {
+                        } 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);
                         }
 
-                        if (targetNode && (targetNode.type?.includes("LoadImage") || targetNode.widgets?.some(w => w.name === "image"))) {
-                            const widget = targetNode.widgets?.find(w => w.name === "image");
-                            if (widget) {
+                        // Check if dropped on a LoadImage, LoadVideo, Load3D, VHS_LoadVideo, or image/video/3D widget node
+                        const widget = targetNode?.widgets?.find(w => 
+                            w.name === "image" || w.name === "video" || 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("Preview3D")
+                        );
+
+                        if (isLoadNode) {
+                            const targetWidget = widget || targetNode.widgets?.[0];
+                            if (targetWidget) {
                                 const newFilename = await uploadDroppedImageToInput({ filename, type, subfolder });
                                 if (newFilename) {
-                                    widget.value = newFilename;
-                                    if (widget.callback) widget.callback(widget.value);
+                                    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: fetch file and load embedded workflow metadata
                             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 || "workflow.png", { type: blob.type });
+                                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 });

js/layout.js

@@ -3,12 +3,24 @@ 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,
+.shadow-interface.border.rounded-lg:has([class*="actionbar-buttons"]),
+.shadow-interface.border.rounded-lg:has(.actionbar-buttons),
+div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]) {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
 /* Style and align the custom plugins bar (Manager, LoRA, etc.) */
 [class*="actionbar"]:not(.actionbar),
 [class*="actionbar-buttons"],
 .actionbar-buttons {
     position: fixed !important;
-    top: -5px !important; 
+    top: 3px !important; 
     right: 4px !important; 
     left: auto !important;
     transform: none !important;
@@ -97,46 +109,26 @@ button:has([data-pc-name="avatar"]),
 }
 `;
 
+/**
+ * Native settings synchronization without direct DOM element querying or simulated clicks.
+ */
 export function syncStockHistoryAndProgressSettings(enable) {
-    if (!app.ui?.settings) return;
-
     const dockedVal = !!enable;
     const progressVal = !enable;
     const QPOV2_ID = "Comfy.Queue.QPOV2";
-
-    try {
-        app.ui.settings.setSettingValue(QPOV2_ID, dockedVal);
-        localStorage.setItem(QPOV2_ID, JSON.stringify(dockedVal));
-    } catch (e) {}
-
-    try {
-        const qpovContainer = document.querySelector('[data-setting-id="Comfy.Queue.QPOV2"]') || 
-                              document.getElementById(QPOV2_ID)?.closest('.setting-item, tr, div');
-        if (qpovContainer) {
-            const toggle = qpovContainer.querySelector('input[type="checkbox"], [role="switch"], .p-toggleswitch');
-            if (toggle) {
-                const isChecked = toggle.checked || 
-                                  toggle.getAttribute('data-p-checked') === 'true' || 
-                                  toggle.classList.contains('p-toggleswitch-checked');
-                if (isChecked !== dockedVal) toggle.click();
-            }
-        }
-    } catch (e) {}
-
     const progressKey = "Comfy.Queue.ShowRunProgressBar";
-    try {
-        app.ui.settings.setSettingValue(progressKey, progressVal);
-        localStorage.setItem(progressKey, JSON.stringify(progressVal));
-    } catch (e) {}
 
-    try {
-        const progressBarBtn = document.querySelector('[data-testid="show-run-progress-bar-action"]');
-        if (progressBarBtn) {
-            const isChecked = !!progressBarBtn.querySelector('[class*="lucide--check"], .icon-\\[lucide--check\\]');
-            if (isChecked !== progressVal) progressBarBtn.click();
-        }
-    } catch (e) {}
+    // 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) {}
+    } else if (app.ui?.settings) {
+        try { app.ui.settings.setSettingValue(QPOV2_ID, dockedVal); } catch (e) {}
+        try { app.ui.settings.setSettingValue(progressKey, progressVal); } catch (e) {}
+    }
 
+    try { localStorage.setItem(QPOV2_ID, JSON.stringify(dockedVal)); } catch (e) {}
+    try { localStorage.setItem(progressKey, JSON.stringify(progressVal)); } catch (e) {}
     try { window.dispatchEvent(new Event("storage")); } catch (e) {}
 }
 
@@ -144,8 +136,12 @@ export function applyClassicLayout(enable, updateSetting = false) {
     let styleEl = document.getElementById(STYLE_ID);
     
     if (enable) {
-        if (updateSetting && app.ui?.settings) {
-            app.ui.settings.setSettingValue("Comfy.Workflow.WorkflowTabsPosition", "Topbar");
+        if (updateSetting) {
+            if (app.extensionManager?.setting) {
+                app.extensionManager.setting.set("Comfy.Workflow.WorkflowTabsPosition", "Topbar");
+            } else if (app.ui?.settings) {
+                app.ui.settings.setSettingValue("Comfy.Workflow.WorkflowTabsPosition", "Topbar");
+            }
         }
         if (!styleEl) {
             styleEl = document.createElement("style");
@@ -155,8 +151,12 @@ export function applyClassicLayout(enable, updateSetting = false) {
         styleEl.textContent = CLASSIC_LAYOUT_CSS_MEDIA;
     } else {
         if (styleEl) styleEl.remove();
-        if (updateSetting && app.ui?.settings) {
-            app.ui.settings.setSettingValue("Comfy.Workflow.WorkflowTabsPosition", "Sidebar");
+        if (updateSetting) {
+            if (app.extensionManager?.setting) {
+                app.extensionManager.setting.set("Comfy.Workflow.WorkflowTabsPosition", "Sidebar");
+            } else if (app.ui?.settings) {
+                app.ui.settings.setSettingValue("Comfy.Workflow.WorkflowTabsPosition", "Sidebar");
+            }
         }
     }
 }
@@ -166,6 +166,11 @@ let domObserver = null;
 let syncScheduled = false;
 
 function findOriginalButton() {
+    const byTestId = document.querySelector('[data-testid="properties-panel-toggle"]');
+    if (byTestId && !byTestId.classList.contains("comfy-sidebar-custom-properties-toggle")) {
+        return byTestId;
+    }
+
     const icons = document.querySelectorAll('[class*="lucide--panel-right"], [class*="lucide--panel-left"], [class*="lucide--panel-bottom"]');
     for (const icon of icons) {
         const btn = icon.closest('button, [role="button"], .comfyui-menu-item, .p-button');
@@ -204,13 +209,11 @@ function findTopbarContainer() {
 }
 
 function isPropertiesPanelOpen() {
-    // 1. Direct check via data-testid
     const panel = document.querySelector('[data-testid="properties-panel"]');
     if (panel && panel.offsetWidth > 0 && panel.offsetHeight > 0) {
         return true;
     }
 
-    // 2. Fallback check for visible headings/containers
     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) {
@@ -218,7 +221,6 @@ function isPropertiesPanelOpen() {
         }
     }
 
-    // 3. Fallback check for original button active state
     const origBtn = findOriginalButton();
     if (origBtn) {
         if (origBtn.classList.contains("p-button-active") || 
@@ -260,7 +262,7 @@ function updateSidebarTabsVisibility() {
         "Assets": '[class*="comfy--image-ai-edit"]',
         "Nodes": '[class*="comfy--node"]',
         "Models": '[class*="comfy--ai-model"]',
-        "Workflows": '[class*="comfy--workflow"]',
+        "Workflows": '[class*="comfy--workflow"], [class*="workflow"]',
         "Apps": '[class*="lucide--panels-top-left"]',
         "Templates": '[class*="comfy--template"]'
     };
@@ -291,18 +293,18 @@ function updateSidebarTabsVisibility() {
 }
 
 function findGraphButton() {
-    const elements = document.querySelectorAll('.bg-secondary-background.rounded-lg.items-center.inline-flex.pointer-events-auto');
+    const elements = document.querySelectorAll('.p-1.bg-base-background.rounded-lg, .bg-base-background.rounded-lg, .bg-secondary-background.rounded-lg.items-center.inline-flex.pointer-events-auto, [data-testid="graph-view-button"]');
     for (const el of elements) {
-        if (el.closest('.p-dialog, .comfy-modal, [role="dialog"], .p-sidebar, .comfy-settings')) continue;
-        return el;
+        if (el.closest('.p-dialog, .comfy-modal, [role="dialog"], .p-sidebar, .comfy-settings, .comfyui-sidebar, .comfy-sidebar')) continue;
+        return el.closest('.group, .p-1') || el;
     }
 
-    const fallbacks = document.querySelectorAll('button, .bg-secondary-background');
+    const fallbacks = document.querySelectorAll('button, .bg-base-background, .bg-secondary-background');
     for (const el of fallbacks) {
-        if (el.closest('.p-dialog, .comfy-modal, [role="dialog"], .p-sidebar, .comfy-settings')) continue;
-        const text = (el.textContent || el.getAttribute("title") || "").toLowerCase();
+        if (el.closest('.p-dialog, .comfy-modal, [role="dialog"], .p-sidebar, .comfy-settings, .comfyui-sidebar, .comfy-sidebar')) continue;
+        const text = (el.textContent || el.getAttribute("title") || el.getAttribute("aria-label") || "").toLowerCase();
         if (text.includes("graph") || text.includes("workflow") || el.querySelector('[class*="sitemap"], [class*="workflow"]')) {
-            return el;
+            return el.closest('.group, .p-1, .bg-base-background, .bg-secondary-background') || el;
         }
     }
     return null;
@@ -491,7 +493,6 @@ export function setupPropertiesPanelToggleFix() {
             .comfy-sidebar-hide-original-properties-btn {
                 display: none !important;
             }
-            /* Suppress stock red dot ONLY when original button is hidden by custom layout */
             .comfy-sidebar-hide-original-properties-btn ~ span,
             .comfy-sidebar-hide-original-properties-btn + span {
                 display: none !important;
@@ -521,12 +522,20 @@ export function setupPropertiesPanelToggleFix() {
 
     domObserver = new MutationObserver((mutations) => {
         let shouldSync = false;
+
+        const isInternalSidebarMutation = (node) => {
+            if (!node || node.nodeType !== 1) return false;
+            return node.closest?.('.comfyui-sidebar, .comfy-sidebar, .comfy-sidebar-comparison-overlay') ||
+                   node.classList?.contains('comfy-sidebar-card');
+        };
+
         for (const mutation of mutations) {
             if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
-                const hasElementMutation = Array.from(mutation.addedNodes).some(node => node.nodeType === 1) ||
-                                           Array.from(mutation.removedNodes).some(node => node.nodeType === 1);
+                const hasExternalElementMutation = 
+                    Array.from(mutation.addedNodes).some(node => node.nodeType === 1 && !isInternalSidebarMutation(node)) ||
+                    Array.from(mutation.removedNodes).some(node => node.nodeType === 1 && !isInternalSidebarMutation(node));
                 
-                if (hasElementMutation) {
+                if (hasExternalElementMutation) {
                     shouldSync = true;
                     break;
                 }

js/queue.js

@@ -1,7 +1,7 @@
 import { app } from "/scripts/app.js";
 import { api } from "/scripts/api.js";
-import { State, promptStates, pruneHistory, loadStatesFromLocalStorage, cardElements } from "./state.js";
-import { findImagesInOutputs, findTextsInOutputs } from "./utils.js";
+import { State, promptStates, pruneHistory, cardElements, saveStatesToLocalStorage } from "./state.js";
+import { findImagesInOutputs, findTextsInOutputs, parseWorkflow, getPrimaryOutputImages } from "./utils.js";
 
 export let renderDOMFn = () => {};
 export let updateSidebarBadgeFn = () => {};
@@ -13,6 +13,7 @@ export function setUIDependencies(renderFn, badgeFn) {
 export async function syncQueue() {
     try {
         const q = await api.getQueue();
+        
         const runningList = q.Running || q.queue_running || [];
         const pendingList = q.Pending || q.queue_pending || [];
         const pendingIds = new Set();
@@ -26,7 +27,7 @@ export async function syncQueue() {
                 pid = p.prompt_id || p.id || p.uuid;
                 seq = typeof p.number === 'number' ? p.number : (typeof p.prompt_number === 'number' ? p.prompt_number : idx);
             }
-            return { pid, seq, original: p };
+            return { pid: pid ? String(pid) : null, seq, original: p };
         });
 
         normalizedPending.sort((a, b) => a.seq - b.seq);
@@ -65,16 +66,20 @@ export async function syncQueue() {
 }
 
 const concludeRun = async (pid, statusStr) => {
-    if (!pid || !promptStates.has(pid)) return;
-    if (State.currentlyActivePromptId === pid) State.currentlyActivePromptId = null;
+    const key = String(pid);
+    if (!key || !promptStates.has(key)) return;
+    if (State.currentlyActivePromptId === key) State.currentlyActivePromptId = null;
     
-    const st = promptStates.get(pid);
+    const st = promptStates.get(key);
 
-    // FIX: Revoke live preview blob URL to prevent browser memory leaks
     if (st._previewBlobUrl) {
         try { URL.revokeObjectURL(st._previewBlobUrl); } catch(e){}
         delete st._previewBlobUrl;
     }
+    if (st._oldPreviewBlobUrl) {
+        try { URL.revokeObjectURL(st._oldPreviewBlobUrl); } catch(e){}
+        delete st._oldPreviewBlobUrl;
+    }
 
     st.status = statusStr;
     st.progressText = "";
@@ -82,23 +87,40 @@ const concludeRun = async (pid, statusStr) => {
     st.endTime = Date.now();
     if (st.startTime) st.duration = (st.endTime - st.startTime) / 1000;
     
-    try {
-        const res = await fetch(`/history/${pid}`);
-        const hItem = await res.json();
-        if (hItem && hItem[pid]) {
-            if (!st.workflow) st.workflow = hItem[pid].extra_data?.extra_pnginfo?.workflow || null;
-            st.nodeOutputs = hItem[pid].outputs;
-            if (st.images.length === 0) st.images = findImagesInOutputs(hItem[pid].outputs, st.workflow);
-            st.texts = findTextsInOutputs(hItem[pid].outputs, st.workflow);
-        }
-    } catch (err) {}
+    for (let attempt = 0; attempt < 3; attempt++) {
+        try {
+            const res = await fetch(`/history/${key}`);
+            const hItem = await res.json();
+            if (hItem && hItem[key]) {
+                const rawWf = hItem[key].extra_data?.extra_pnginfo?.workflow || hItem[key].prompt?.[3]?.extra_pnginfo?.workflow || null;
+                st.workflow = parseWorkflow(rawWf) || st.workflow;
+                st.nodeOutputs = hItem[key].outputs;
+                
+                const primaryImgs = getPrimaryOutputImages(hItem[key].outputs, st.workflow);
+                if (primaryImgs.length > 0) st.images = primaryImgs;
+                
+                const fetchedTexts = findTextsInOutputs(hItem[key].outputs, st.workflow);
+                if (fetchedTexts.length > 0) st.texts = fetchedTexts;
+                break;
+            }
+        } catch (err) {}
+        await new Promise(r => setTimeout(r, 200));
+    }
+    
     pruneHistory(app);
+    saveStatesToLocalStorage();
     syncQueue();
 };
 
 export function setupApiListeners() {
     api.addEventListener("status", syncQueue);
     
+    api.addEventListener("reconnected", async () => {
+        console.log("Comfy Sidebar: Server reconnected, syncing state and history");
+        await initSessionAndHistory();
+        await syncQueue();
+    });
+    
     api.addEventListener("execution_start", (e) => {
         if (app.ui.settings.getSettingValue("Comfy Sidebar.Auto Clear Interrupted") ?? false) {
             const toDelete = [];
@@ -110,10 +132,11 @@ export function setupApiListeners() {
             }
             if (toDelete.length > 0) {
                 api.fetchApi("/history", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ delete: toDelete }) }).catch(()=>{});
+                saveStatesToLocalStorage();
             }
         }
 
-        const pid = e.detail.prompt_id;
+        const pid = String(e.detail.prompt_id);
         State.currentlyActivePromptId = pid; 
         const activeWorkspaceWorkflow = app.graph.serialize();
 
@@ -134,10 +157,21 @@ export function setupApiListeners() {
     });
 
     api.addEventListener("progress", (e) => {
-        const pid = e.detail.prompt_id;
+        const pid = e.detail.prompt_id ? String(e.detail.prompt_id) : null;
         if (pid && promptStates.has(pid)) {
-            promptStates.get(pid).progress = Math.round((e.detail.value / e.detail.max) * 100);
-            renderDOMFn();
+            const st = promptStates.get(pid);
+            st.progress = Math.round((e.detail.value / e.detail.max) * 100);
+            
+            const cardObj = cardElements.get(pid);
+            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...";
+                    cardObj.statusText.textContent = `${nodeName} ${st.progress}%`;
+                }
+            } else {
+                renderDOMFn();
+            }
         }
     });
 
@@ -161,23 +195,26 @@ export function setupApiListeners() {
         const activeTasks = Array.from(promptStates.values()).filter(t => t.status === "active");
         if (activeTasks.length > 0) {
             const st = activeTasks[0];
-            if (st._previewBlobUrl) try { URL.revokeObjectURL(st._previewBlobUrl); } catch(e){}
-            st._previewBlobUrl = URL.createObjectURL(e.detail);
-            st.images = [{ url: st._previewBlobUrl }];
+            const newBlobUrl = URL.createObjectURL(e.detail);
+            
+            st._oldPreviewBlobUrl = st._previewBlobUrl;
+            st._previewBlobUrl = newBlobUrl;
+            st.images = [{ url: newBlobUrl }];
             renderDOMFn();
         }
     });
 
     api.addEventListener("executed", (e) => {
-        if (promptStates.has(e.detail.prompt_id)) {
-            const st = promptStates.get(e.detail.prompt_id);
-            const finalImgs = findImagesInOutputs({ [e.detail.node]: e.detail.output }, st.workflow);
-            if (finalImgs.length > 0) {
-                st.images = finalImgs;
+        const pid = e.detail.prompt_id ? String(e.detail.prompt_id) : null;
+        if (pid && promptStates.has(pid)) {
+            const st = promptStates.get(pid);
+            const nodeImgs = findImagesInOutputs({ [e.detail.node]: e.detail.output }, st.workflow);
+            if (nodeImgs.length > 0) {
+                st.images = nodeImgs;
             }
-            const finalTexts = findTextsInOutputs({ [e.detail.node]: e.detail.output }, st.workflow);
-            if (finalTexts.length > 0) {
-                st.texts = finalTexts;
+            const nodeTexts = findTextsInOutputs({ [e.detail.node]: e.detail.output }, st.workflow);
+            if (nodeTexts.length > 0) {
+                st.texts = nodeTexts;
             }
 
             if (!st.nodeOutputs) st.nodeOutputs = {};
@@ -196,42 +233,63 @@ export function setupApiListeners() {
 }
 
 export async function initSessionAndHistory() {
-    let backendSessionId = null;
     try {
-        const res = await fetch("/classic-sidebar/session");
-        const data = await res.json();
-        backendSessionId = data.session_id;
-    } catch (err) {
-        console.warn("Comfy Sidebar: Custom session endpoint not found. Queue persistence will fall back to cache.");
-    }
+        const historyData = await api.getHistory();
+        if (!historyData) return;
 
-    const storedSessionId = localStorage.getItem("comfy_sidebar_backend_session_id");
-    if (backendSessionId && backendSessionId !== storedSessionId) {
-        promptStates.clear();
-        cardElements.clear();
-        localStorage.removeItem("comfy_sidebar_prompt_states");
-        if (backendSessionId) localStorage.setItem("comfy_sidebar_backend_session_id", backendSessionId);
-    } else if (!storedSessionId && backendSessionId) {
-        localStorage.setItem("comfy_sidebar_backend_session_id", backendSessionId);
-    }
+        const rawItems = [];
+        if (Array.isArray(historyData.History)) {
+            historyData.History.forEach(item => {
+                if (item && item.prompt_id) rawItems.push({ pid: String(item.prompt_id), data: item });
+            });
+        } else if (typeof historyData === 'object') {
+            Object.keys(historyData).forEach(pidKey => {
+                const item = historyData[pidKey];
+                rawItems.push({ pid: String(pidKey), data: Array.isArray(item) ? { prompt: item[0], outputs: item[1], status: item[2] } : item });
+            });
+        }
 
-    const historyData = await api.getHistory();
-    const ids = Object.keys(historyData).sort((a,b) => Number(a)-Number(b));
-    ids.forEach(id => {
-        if (promptStates.has(id)) return;
-        const workflow = historyData[id].extra_data?.extra_pnginfo?.workflow || null;
-        const images = findImagesInOutputs(historyData[id].outputs, workflow);
-        const texts = findTextsInOutputs(historyData[id].outputs, workflow);
-        if (images.length === 0 && texts.length === 0) return;
-
-        State.globalOrderCounter++;
-        promptStates.set(id, {
-            pid: id, status: "completed", images, texts,
-            nodeOutputs: historyData[id].outputs,
-            workflow: workflow,
-            progressText: "", timestamp: State.globalOrderCounter, rendered: true
+        rawItems.sort((a, b) => {
+            const numA = a.data.prompt?.[0] ?? 0;
+            const numB = b.data.prompt?.[0] ?? 0;
+            return numA - numB;
         });
-    });
-    pruneHistory(app);
-    await syncQueue();
+
+        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 || {};
+            
+            const images = getPrimaryOutputImages(outputs, workflow);
+            const texts = findTextsInOutputs(outputs, workflow);
+            
+            const statusStr = data.status?.status_str || "completed";
+            const status = (statusStr === "success" || statusStr === "completed") ? "completed" : 
+                           (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++;
+            promptStates.set(pid, {
+                pid: pid, 
+                status: status, 
+                images: images, 
+                texts: texts,
+                nodeOutputs: outputs,
+                workflow: workflow,
+                progressText: "", 
+                timestamp: State.globalOrderCounter, 
+                rendered: true
+            });
+        });
+
+        pruneHistory(app);
+        saveStatesToLocalStorage();
+        await syncQueue();
+    } catch (err) {
+        console.error("Comfy Sidebar: Failed to initialize history from server API", err);
+    }
 }

js/sidebar.js

@@ -6,6 +6,8 @@ import { setupApiListeners, initSessionAndHistory, syncQueue, setUIDependencies
 import { applyClassicLayout, setupPropertiesPanelToggleFix, syncClassicLayout, syncStockHistoryAndProgressSettings } from "./layout.js";
 
 let isInitialized = false;
+let activeKeydownHandler = null;
+let nodeDOMObserver = null;
 
 // Helper to scan node container for the exact text element rendering the title (Vue Mode)
 function findHeaderByText(parent, text) {
@@ -24,7 +26,12 @@ function findHeaderByText(parent, text) {
 }
 
 function syncNodeVueBadge(node, isIgnored) {
-    const nodeEl = document.querySelector(`.comfy-node[data-node-id="${node.id}"], [data-node-id="${node.id}"]`);
+    // Robust multi-selector search for Vue node containers across different frontend versions
+    const nodeEl = document.querySelector(
+        `.comfy-node[data-node-id="${node.id}"], ` +
+        `[data-node-id="${node.id}"], ` +
+        `[data-id="${node.id}"]`
+    );
     if (!nodeEl) return;
 
     const titleTextNode = findHeaderByText(nodeEl, node.title || node.type);
@@ -66,6 +73,66 @@ function syncNodeVueBadge(node, isIgnored) {
     }
 }
 
+export function syncAllNodeBadges() {
+    applySidebarOverride();
+    if (!app.graph || !app.graph._nodes) return;
+
+    app.graph._nodes.forEach(node => {
+        if (!node.properties) node.properties = {};
+        const isIgnored = !!node.properties.ignoreInQueue;
+
+        if (isIgnored) {
+            if (node.boxcolor !== "#ff3333") {
+                node._oldBoxcolor = node.boxcolor || "";
+                node.boxcolor = "#ff3333";
+                if (app.graph) app.graph.setDirtyCanvas(true, true);
+            }
+        } else {
+            if (node.boxcolor === "#ff3333") {
+                node.boxcolor = node._oldBoxcolor || "";
+                delete node._oldBoxcolor;
+                if (app.graph) app.graph.setDirtyCanvas(true, true);
+            }
+        }
+
+        syncNodeVueBadge(node, isIgnored);
+    });
+}
+
+function setupVueNodeObserver() {
+    if (nodeDOMObserver) nodeDOMObserver.disconnect();
+
+    let timeoutId = null;
+    nodeDOMObserver = new MutationObserver((mutations) => {
+        let hasNodeMutation = false;
+        for (const m of mutations) {
+            for (const node of m.addedNodes) {
+                if (node.nodeType === 1) {
+                    if (node.hasAttribute?.("data-node-id") || 
+                        node.classList?.contains("comfy-node") || 
+                        node.querySelector?.('[data-node-id], .comfy-node')) {
+                        hasNodeMutation = true;
+                        break;
+                    }
+                }
+            }
+            if (hasNodeMutation) break;
+        }
+
+        if (hasNodeMutation) {
+            if (timeoutId) clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                syncAllNodeBadges();
+            }, 50);
+        }
+    });
+
+    nodeDOMObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+}
+
 function toggleIgnoreActiveNode() {
     const canvas = app.canvas;
     if (!canvas) return;
@@ -113,7 +180,6 @@ app.registerExtension({
         app.ui.settings.addSetting({ id: "Comfy Sidebar.Show Working Node Name", name: "Shows the name of the node which is currently in the process", type: "boolean", defaultValue: true });
         app.ui.settings.addSetting({ id: "Comfy Sidebar.Auto Clear Interrupted", name: "Auto-clear cancelled & failed jobs on new generation", type: "boolean", defaultValue: false });
 
-        // NodesMap removed from sidebarTabs list
         const sidebarTabs = ["Assets", "Nodes", "Models", "Workflows", "Apps", "Templates"];
         sidebarTabs.forEach(tab => {
             app.ui.settings.addSetting({
@@ -163,6 +229,33 @@ app.registerExtension({
         });
     },
 
+    commands: [
+        {
+            id: "ComfySidebar.ToggleSidebar",
+            label: "Toggle Comfy Queue Sidebar",
+            function: () => {
+                const ourBtn = findOurSidebarButton();
+                if (ourBtn) ourBtn.click();
+            }
+        },
+        {
+            id: "ComfySidebar.ToggleIgnoreNode",
+            label: "Toggle Ignore Selected Node(s) in Queue",
+            function: () => toggleIgnoreActiveNode()
+        }
+    ],
+
+    nodeCreated(node) {
+        if (node && node.properties?.ignoreInQueue) {
+            node.boxcolor = "#ff3333";
+            syncNodeVueBadge(node, true);
+        }
+    },
+
+    afterConfigureGraph() {
+        requestAnimationFrame(() => syncAllNodeBadges());
+    },
+
     async setup() {
         if (!app.extensionManager || !app.extensionManager.registerSidebarTab) return;
 
@@ -190,53 +283,45 @@ app.registerExtension({
         
         await initSessionAndHistory();
 
-        document.addEventListener("keydown", (e) => {
+        // Watch for Vue DOM node mounting events (e.g. LiteGraph ↔ Vue mode switches)
+        setupVueNodeObserver();
+
+        // Remove any existing keydown listener from previous hot-reload
+        if (activeKeydownHandler) {
+            document.removeEventListener("keydown", activeKeydownHandler, true);
+            activeKeydownHandler = null;
+        }
+
+        // Clean, direct keyboard listener
+        activeKeydownHandler = (e) => {
             const activeEl = document.activeElement;
-            if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable || activeEl.tagName === "SELECT")) return;
+            if (activeEl && (
+                activeEl.tagName === "INPUT" || 
+                activeEl.tagName === "TEXTAREA" || 
+                activeEl.isContentEditable || 
+                activeEl.tagName === "SELECT"
+            )) return;
             
+            // Toggle sidebar with Q
             if (e.key.toLowerCase() === "q" && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
-                e.preventDefault(); e.stopPropagation();
+                e.preventDefault();
+                e.stopPropagation();
                 const ourBtn = findOurSidebarButton();
                 if (ourBtn) ourBtn.click();
             }
 
-            if (e.key.toLowerCase() === "q" && (e.ctrlKey || e.metaKey)) {
-                e.preventDefault(); e.stopPropagation();
+            // Toggle ignore node with Ctrl+Q or Cmd+Q (Mac)
+            if (e.key.toLowerCase() === "q" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+                e.preventDefault();
+                e.stopPropagation();
                 toggleIgnoreActiveNode();
             }
-        }, true);
-        
-        setInterval(() => {
-            applySidebarOverride();
-            
-            if (app.graph && app.graph._nodes) {
-                const hasIgnoredOrColoredNodes = app.graph._nodes.some(n => n.properties?.ignoreInQueue || n.boxcolor === "#ff3333");
-                const hasBadgesInDOM = !!document.querySelector(".comfy-sidebar-ignore-badge");
+        };
 
-                if (hasIgnoredOrColoredNodes || hasBadgesInDOM) {
-                    app.graph._nodes.forEach(node => {
-                        if (!node.properties) node.properties = {};
-                        const isIgnored = !!node.properties.ignoreInQueue;
+        document.addEventListener("keydown", activeKeydownHandler, true);
 
-                        if (isIgnored) {
-                            if (node.boxcolor !== "#ff3333") {
-                                node._oldBoxcolor = node.boxcolor || "";
-                                node.boxcolor = "#ff3333";
-                                app.graph.setDirtyCanvas(true, true);
-                            }
-                        } else {
-                            if (node.boxcolor === "#ff3333") {
-                                node.boxcolor = node._oldBoxcolor || "";
-                                delete node._oldBoxcolor;
-                                app.graph.setDirtyCanvas(true, true);
-                            }
-                        }
-
-                        syncNodeVueBadge(node, isIgnored);
-                    });
-                }
-            }
-        }, 500);
+        // Apply sidebar override when initializing
+        applySidebarOverride();
 
         app.extensionManager.registerSidebarTab({ 
             id: "classic-comfy-sidebar", 
@@ -246,5 +331,21 @@ app.registerExtension({
             type: "custom", 
             render: (el) => { el.appendChild(sidebarContainer); } 
         });
+    },
+
+    destroy() {
+        if (nodeDOMObserver) {
+            nodeDOMObserver.disconnect();
+            nodeDOMObserver = null;
+        }
+
+        if (activeKeydownHandler) {
+            document.removeEventListener("keydown", activeKeydownHandler, true);
+            activeKeydownHandler = null;
+        }
+
+        if (app.extensionManager?.unregisterSidebarTab) {
+            app.extensionManager.unregisterSidebarTab("classic-comfy-sidebar");
+        }
     }
 });

js/state.js

@@ -5,12 +5,28 @@ export const State = {
     currentSearchQuery: "",
     globalOrderCounter: 0,
     sidebarContainer: null,
-    cardStack: null,
+    cardStack: null,                  // Main queue scroll container
+    submenuStack: null,               // Submenu scroll container
     currentlyActivePromptId: null,
     activeSubmenuPromptId: null,      // Active run/outputs explorer pointer
     activeSubmenuBatchImages: null    // Active batch images explorer pointer
 };
 
+export function deletePromptState(pid) {
+    const key = String(pid);
+    const state = promptStates.get(key);
+    if (state) {
+        if (state._previewBlobUrl) {
+            try { URL.revokeObjectURL(state._previewBlobUrl); } catch (e) {}
+        }
+        if (state._oldPreviewBlobUrl) {
+            try { URL.revokeObjectURL(state._oldPreviewBlobUrl); } catch (e) {}
+        }
+    }
+    promptStates.delete(key);
+    cardElements.delete(key);
+}
+
 export function pruneHistory(app) {
     const maxItems = app.ui.settings.getSettingValue("Comfy.Queue.MaxHistoryItems") ?? 64;
     const tasks = Array.from(promptStates.entries())
@@ -22,34 +38,63 @@ export function pruneHistory(app) {
         const deleteCount = tasks.length - maxItems;
         for (let i = 0; i < deleteCount; i++) {
             const [pid] = tasks[i];
-            promptStates.delete(pid);
-            cardElements.delete(pid);
+            deletePromptState(pid);
         }
     }
 }
 
 export function saveStatesToLocalStorage() {
     try {
-        const serializable = [];
+        let serializable = [];
         for (const [pid, state] of promptStates.entries()) {
             const cleanedImages = (state.images || []).map(img => {
                 if (img.url && img.url.startsWith("blob:")) return null;
                 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({
-                pid: state.pid, status: state.status, images: cleanedImages, texts: state.texts || [],
+                pid: String(state.pid), 
+                status: state.status, 
+                images: cleanedImages, 
+                texts: state.texts || [],
                 nodeOutputs: state.nodeOutputs,
-                workflow: state.workflow, progress: state.progress || 0, queueNumber: state.queueNumber,
-                progressText: state.progressText || "", timestamp: state.timestamp,
-                activeNodeName: state.activeNodeName || "", rendered: state.rendered || false,
-                startTime: state.startTime, endTime: state.endTime, duration: state.duration
+                workflow: includeWorkflow ? state.workflow : null,
+                progress: state.progress || 0, 
+                queueNumber: state.queueNumber,
+                progressText: state.progressText || "", 
+                timestamp: state.timestamp,
+                activeNodeName: state.activeNodeName || "", 
+                rendered: state.rendered || false,
+                startTime: state.startTime, 
+                endTime: state.endTime, 
+                duration: state.duration
             });
         }
-        localStorage.setItem("comfy_sidebar_prompt_states", JSON.stringify(serializable));
-    } catch (e) {
-        console.error("Comfy Sidebar: Failed to save state to localStorage", e);
-    }
+
+        if (serializable.length === 0) {
+            localStorage.removeItem("comfy_sidebar_prompt_states");
+            return;
+        }
+
+        serializable.sort((a, b) => a.timestamp - b.timestamp);
+
+        while (serializable.length > 0) {
+            try {
+                localStorage.setItem("comfy_sidebar_prompt_states", JSON.stringify(serializable));
+                break;
+            } catch (e) {
+                if (e.name === "QuotaExceededError" || e.code === 22 || e.code === 1014) {
+                    serializable.shift();
+                } else {
+                    break;
+                }
+            }
+        }
+    } catch (e) {}
 }
 
 export function loadStatesFromLocalStorage() {
@@ -58,13 +103,12 @@ export function loadStatesFromLocalStorage() {
         if (data) {
             const list = JSON.parse(data);
             list.forEach(state => {
-                promptStates.set(state.pid, state);
+                const key = String(state.pid);
+                promptStates.set(key, state);
                 if (state.timestamp > State.globalOrderCounter) State.globalOrderCounter = state.timestamp;
             });
         }
-    } catch (e) {
-        console.error("Comfy Sidebar: Failed to load state from localStorage", e);
-    }
+    } catch (e) {}
 }
 
 loadStatesFromLocalStorage();

js/styles.js

@@ -56,9 +56,20 @@ export function injectStyles() {
             color: #ffffff !important;
         }
 
-        /* Optimized Card Action Buttons */
+        /* 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 {
+            display: flex !important;
+        }
+
+        /* Card Action Buttons */
         .comfy-sidebar-card-action-btn {
-            display: inline-flex !important;
+            display: inline-flex;
             align-items: center !important;
             justify-content: center !important;
             width: 32px !important;
@@ -86,6 +97,158 @@ export function injectStyles() {
             color: #ffffff !important;
             box-shadow: 0 0 8px rgba(220, 53, 69, 0.6) !important;
         }
+
+        /* Header Icons & Header Action Buttons */
+        .comfy-sidebar-header-btn {
+            background: transparent;
+            color: var(--desc-color, #aaa);
+            border: 1px solid var(--border-color, #555);
+            border-radius: 3px;
+            padding: 4px 8px;
+            cursor: pointer;
+            font-size: 13px;
+            transition: all 0.15s ease-in-out;
+        }
+
+        .comfy-sidebar-header-btn:hover {
+            border-color: var(--fg-color, #eee);
+            color: var(--fg-color, #eee);
+        }
+
+        .comfy-sidebar-icon-btn {
+            cursor: pointer;
+            font-size: 13px;
+            opacity: 0.6;
+            transition: opacity 0.15s ease-in-out;
+        }
+
+        .comfy-sidebar-icon-btn:hover {
+            opacity: 1;
+        }
+
+        /* Scroll To Top Floating Button */
+        .comfy-sidebar-scroll-top-btn {
+            position: absolute;
+            bottom: 12px;
+            right: 12px;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: rgba(30, 30, 30, 0.9);
+            color: #eee;
+            border: 1px solid var(--border-color, #555);
+            cursor: pointer;
+            font-size: 13px;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 999;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.6);
+            transition: all 0.15s ease-in-out;
+            opacity: 0.85;
+        }
+
+        .comfy-sidebar-scroll-top-btn:hover {
+            opacity: 1;
+            background: var(--p-primary-color, #3b82f6);
+            color: #fff;
+            border-color: var(--p-primary-color, #3b82f6);
+        }
+
+        /* 3D Preview Cards */
+        .comfy-sidebar-3d-wrapper {
+            width: 100%;
+            height: 160px;
+            background: linear-gradient(135deg, #1e1e2e 0%, #0f172a 100%);
+            border-radius: 4px;
+            display: flex;
+            position: relative;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            transition: all 0.2s ease-in-out;
+            user-select: none;
+            cursor: pointer;
+        }
+
+        .comfy-sidebar-3d-wrapper:hover {
+            border-color: #3b82f6;
+            box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
+        }
+
+        .comfy-sidebar-3d-preview-img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            filter: brightness(0.45);
+            transition: filter 0.2s ease, transform 0.2s ease;
+            pointer-events: none;
+            z-index: 1;
+        }
+
+        .comfy-sidebar-3d-wrapper:hover .comfy-sidebar-3d-preview-img {
+            filter: brightness(0.6);
+            transform: scale(1.03);
+        }
+
+        .comfy-sidebar-3d-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 2;
+            pointer-events: none;
+        }
+
+        .comfy-sidebar-3d-icon {
+            font-size: 38px;
+            color: #60a5fa;
+            margin-bottom: 6px;
+            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
+            transition: transform 0.2s ease;
+        }
+
+        .comfy-sidebar-3d-wrapper:hover .comfy-sidebar-3d-icon {
+            transform: scale(1.1) rotate(6deg);
+        }
+
+        .comfy-sidebar-3d-badge {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            background: rgba(59, 130, 246, 0.9);
+            color: #fff;
+            font-size: 9px;
+            font-weight: bold;
+            padding: 2px 6px;
+            border-radius: 3px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+            z-index: 3;
+        }
+
+        .comfy-sidebar-3d-title {
+            font-size: 10px;
+            color: #f1f5f9;
+            font-family: monospace;
+            max-width: 85%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            background: rgba(0, 0, 0, 0.65);
+            padding: 2px 6px;
+            border-radius: 3px;
+            backdrop-filter: blur(2px);
+            z-index: 3;
+        }
     `;
     document.head.appendChild(style);
 }

js/ui.js

@@ -1,10 +1,9 @@
 import { app } from "/scripts/app.js";
 import { api } from "/scripts/api.js";
-import { State, promptStates, cardElements, saveStatesToLocalStorage } from "./state.js";
-import { isVideoFormat, matchesFilter, getRunOutputs } from "./utils.js";
+import { State, promptStates, cardElements, saveStatesToLocalStorage, deletePromptState } from "./state.js";
+import { isVideoFormat, is3DFormat, matchesFilter, getRunOutputs } from "./utils.js";
 import { showFullscreenPreview } from "./comparison.js";
 
-// DI Hook for cyclic imports
 export let syncQueueFn = async () => {};
 export function setSyncQueue(fn) { syncQueueFn = fn; }
 
@@ -15,6 +14,41 @@ function resetAllCardHoverStates() {
     }
 }
 
+let scrollToTopBtnEl = null;
+
+function getScrollContainer() {
+    if (!State.cardStack) return null;
+    return State.cardStack.closest('.sidebar-content-container, [class*="sidebar-content-container"], [class*="overflow-y-auto"]') 
+        || State.cardStack.parentElement 
+        || State.cardStack;
+}
+
+function updateScrollTopBtnVisibility() {
+    if (!scrollToTopBtnEl || !State.sidebarContainer || !State.sidebarContainer.isConnected) return;
+    const scrollEl = getScrollContainer();
+    if (scrollEl) {
+        const viewportEl = scrollEl.parentElement || State.sidebarContainer;
+        if (viewportEl && scrollToTopBtnEl.parentNode !== viewportEl) {
+            if (window.getComputedStyle(viewportEl).position === "static") {
+                viewportEl.style.position = "relative";
+            }
+            viewportEl.appendChild(scrollToTopBtnEl);
+        }
+
+        if (scrollEl.scrollTop > 200) {
+            scrollToTopBtnEl.style.display = "flex";
+        } else {
+            scrollToTopBtnEl.style.display = "none";
+        }
+    }
+}
+
+document.addEventListener("scroll", () => {
+    if (State.sidebarContainer && State.sidebarContainer.isConnected) {
+        updateScrollTopBtnVisibility();
+    }
+}, { capture: true, passive: true });
+
 function findNodeIdForImage(state, img) {
     if (!state || !state.nodeOutputs || !img) return null;
     for (const nodeId in state.nodeOutputs) {
@@ -33,6 +67,20 @@ function findNodeIdForImage(state, img) {
     return null;
 }
 
+function findNodeIdFor3DAsset(state, img) {
+    const exactNodeId = findNodeIdForImage(state, img);
+    if (exactNodeId) return exactNodeId;
+
+    if (app.graph && app.graph._nodes) {
+        const node = app.graph._nodes.find(n => 
+            n.type?.includes("Preview3D") || n.type?.includes("Load3D") || 
+            n.type?.includes("SaveGLB") || n.type?.includes("Save 3D")
+        );
+        if (node) return String(node.id);
+    }
+    return null;
+}
+
 export const updateSidebarBadge = (count) => {
     const icons = document.querySelectorAll('.pi-images');
     icons.forEach(icon => {
@@ -115,7 +163,7 @@ export function setupSidebarUI() {
     State.sidebarContainer = document.createElement("div");
     Object.assign(State.sidebarContainer.style, {
         display: "flex", flexDirection: "column", height: "100%", padding: "14px", boxSizing: "border-box",
-        background: "var(--comfy-menu-bg, #121212)", color: "var(--fg-color, #eee)"
+        background: "var(--comfy-menu-bg, #121212)", color: "var(--fg-color, #eee)", position: "relative"
     });
 
     const header = document.createElement("div");
@@ -128,11 +176,8 @@ export function setupSidebarUI() {
     Object.assign(titleGroup.style, { display: "flex", alignItems: "center", gap: "8px" });
 
     const searchIcon = document.createElement("span");
-    searchIcon.className = "pi pi-search";
+    searchIcon.className = "pi pi-search comfy-sidebar-icon-btn";
     searchIcon.title = "Search History";
-    Object.assign(searchIcon.style, { cursor: "pointer", fontSize: "13px", opacity: "0.6", transition: "opacity 0.15s ease-in-out" });
-    searchIcon.onmouseenter = () => searchIcon.style.opacity = "1";
-    searchIcon.onmouseleave = () => searchIcon.style.opacity = "0.6";
 
     const title = document.createElement("h3");
     title.textContent = "Queue";
@@ -147,12 +192,8 @@ export function setupSidebarUI() {
 
     const createActionBtn = (iconClass, tooltip, hoverColor, onClickFn) => {
         const btn = document.createElement("button");
-        btn.className = iconClass;
+        btn.className = `${iconClass} comfy-sidebar-header-btn`;
         btn.title = tooltip;
-        Object.assign(btn.style, {
-            background: "transparent", color: "var(--desc-color, #aaa)", border: "1px solid var(--border-color, #555)",
-            borderRadius: "3px", padding: "4px 8px", cursor: "pointer", fontSize: "13px", transition: "all 0.15s ease-in-out"
-        });
 
         let timeout = null, isPending = false;
         const reset = () => {
@@ -161,10 +202,7 @@ export function setupSidebarUI() {
             if (timeout) { clearTimeout(timeout); timeout = null; }
         };
 
-        btn.onmouseenter = () => { if (!isPending) { btn.style.borderColor = "var(--fg-color, #eee)"; btn.style.color = "var(--fg-color, #eee)"; } };
-        btn.onmouseleave = () => { if (!isPending) { btn.style.borderColor = "var(--border-color, #555)"; btn.style.color = "var(--desc-color, #aaa)"; } };
-
-        btn.onclick = async (ev) => {
+        btn.addEventListener("click", async (ev) => {
             ev.stopPropagation();
             if (!isPending) {
                 isPending = true;
@@ -174,7 +212,7 @@ export function setupSidebarUI() {
                 reset();
                 await onClickFn();
             }
-        };
+        });
         return btn;
     };
 
@@ -188,6 +226,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();
             renderDOM();
         }
     });
@@ -199,6 +238,7 @@ export function setupSidebarUI() {
             }
         }
         try { await api.fetchApi("/history", { method: "POST", body: JSON.stringify({ clear: true }) }); } catch (err) {}
+        saveStatesToLocalStorage();
         renderDOM();
     });
 
@@ -215,25 +255,38 @@ export function setupSidebarUI() {
     Object.assign(searchInput, { type: "text", placeholder: "Filter by text, images, nodes..." });
     Object.assign(searchInput.style, { flex: "1", background: "transparent", border: "none", outline: "none", color: "var(--comfy-input-color, var(--fg-color, #eee))", fontSize: "11px", padding: "0" });
     const clearSearchBtn = document.createElement("span");
-    clearSearchBtn.className = "pi pi-times";
+    clearSearchBtn.className = "pi pi-times comfy-sidebar-icon-btn";
     clearSearchBtn.title = "Clear & Close Search";
-    Object.assign(clearSearchBtn.style, { cursor: "pointer", fontSize: "11px", opacity: "0.6", marginLeft: "6px", transition: "opacity 0.15s ease" });
-    clearSearchBtn.onmouseenter = () => clearSearchBtn.style.opacity = "1"; clearSearchBtn.onmouseleave = () => clearSearchBtn.style.opacity = "0.6";
+    Object.assign(clearSearchBtn.style, { marginLeft: "6px" });
 
     searchContainer.appendChild(searchInputIcon); searchContainer.appendChild(searchInput); searchContainer.appendChild(clearSearchBtn);
     header.appendChild(standardHeader); header.appendChild(searchContainer); State.sidebarContainer.appendChild(header);
 
-    searchIcon.onclick = (e) => { e.stopPropagation(); standardHeader.style.display = "none"; searchContainer.style.display = "flex"; searchInput.focus(); };
+    searchIcon.addEventListener("click", (e) => { e.stopPropagation(); standardHeader.style.display = "none"; searchContainer.style.display = "flex"; searchInput.focus(); });
     const closeSearch = () => { searchInput.value = ""; State.currentSearchQuery = ""; searchContainer.style.display = "none"; standardHeader.style.display = "flex"; renderDOM(); };
-    clearSearchBtn.onclick = (e) => { e.stopPropagation(); closeSearch(); };
-    searchInput.onkeydown = (e) => { if (e.key === "Escape") closeSearch(); };
-    searchInput.oninput = () => { State.currentSearchQuery = searchInput.value.trim(); renderDOM(); };
+    clearSearchBtn.addEventListener("click", (e) => { e.stopPropagation(); closeSearch(); });
+    searchInput.addEventListener("keydown", (e) => { if (e.key === "Escape") closeSearch(); });
+    searchInput.addEventListener("input", () => { State.currentSearchQuery = searchInput.value.trim(); renderDOM(); });
 
     State.cardStack = document.createElement("div");
-    Object.assign(State.cardStack.style, { flex: "1", overflowY: "auto", scrollbarWidth: "thin", display: "block" });
+    Object.assign(State.cardStack.style, { flex: "1", overflowY: "visible", display: "block", paddingBottom: "28px" });
     State.sidebarContainer.appendChild(State.cardStack);
 
-    State.sidebarContainer.onclick = (e) => {
+    scrollToTopBtnEl = document.createElement("button");
+    scrollToTopBtnEl.className = "pi pi-chevron-up comfy-sidebar-scroll-top-btn";
+    scrollToTopBtnEl.title = "Scroll to Top";
+
+    scrollToTopBtnEl.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const scrollEl = getScrollContainer();
+        if (scrollEl) {
+            scrollEl.scrollTo({ top: 0, behavior: "smooth" });
+        }
+    });
+
+    State.sidebarContainer.appendChild(scrollToTopBtnEl);
+
+    State.sidebarContainer.addEventListener("click", (e) => {
         if (State.activeSubmenuPromptId || State.activeSubmenuBatchImages) {
             if (e.target.closest('img, video, .comfy-sidebar-card-timer, .pi-times, .comfy-sidebar-left-hover-btn, .comfy-sidebar-queue-cancel-btn, button, span')) return;
             State.activeSubmenuPromptId = null;
@@ -243,13 +296,15 @@ export function setupSidebarUI() {
             document.removeEventListener("click", handleGlobalClick, true);
             globalClickRegistered = false;
         }
-    };
+    });
 
     new ResizeObserver((entries) => {
         const threshold = app.ui.settings.getSettingValue("Comfy Sidebar.Grid Columns Threshold") ?? 350;
         const cols = Math.max(1, Math.floor(entries[0].contentRect.width / (threshold / 2)));
-        State.cardStack.style.columnCount = cols.toString();
-        State.cardStack.style.columnGap = cols > 1 ? "12px" : "0";
+        if (State.cardStack) {
+            State.cardStack.style.columnCount = cols.toString();
+            State.cardStack.style.columnGap = cols > 1 ? "12px" : "0";
+        }
     }).observe(State.sidebarContainer);
 
     setInterval(() => {
@@ -260,11 +315,196 @@ export function setupSidebarUI() {
                 if (cardObj && cardObj.timerEl) cardObj.timerEl.textContent = ((Date.now() - state.startTime) / 1000).toFixed(2) + "s";
             }
         }
-    }, 100);
+    }, 250);
 
     return State.sidebarContainer;
 }
 
+function syncCardButtonVisibility(cardObj, state) {
+    if (!cardObj) return;
+
+    const isCompleted = state.status === "completed";
+    const hasRealImages = isCompleted && state.images && state.images.length > 0 && !state.images.some(img => img.url && img.url.startsWith("blob:"));
+
+    if (cardObj.btnImg) {
+        if (hasRealImages) {
+            cardObj.btnImg.style.removeProperty("display");
+            cardObj.btnImg.style.display = "inline-flex";
+            cardObj.btnImg.onclick = (ev) => {
+                ev.stopPropagation();
+                state.images.forEach(img => {
+                    const a = document.createElement("a");
+                    a.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
+                    a.download = img.filename || "output";
+                    a.click();
+                });
+            };
+        } else {
+            cardObj.btnImg.style.setProperty("display", "none", "important");
+        }
+    }
+
+    if (cardObj.btnJson) {
+        if (state.workflow) {
+            cardObj.btnJson.style.removeProperty("display");
+            cardObj.btnJson.style.display = "inline-flex";
+            cardObj.btnJson.onclick = (ev) => {
+                ev.stopPropagation();
+                const blob = new Blob([JSON.stringify(state.workflow, null, 2)], { type: "application/json" });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url;
+                a.download = `workflow_${state.pid}.json`;
+                a.click();
+                URL.revokeObjectURL(url);
+            };
+        } else {
+            cardObj.btnJson.style.setProperty("display", "none", "important");
+        }
+    }
+
+    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");
+            cardObj.btnFocus.style.display = "inline-flex";
+            cardObj.btnFocus.onclick = (ev) => {
+                ev.stopPropagation();
+                const node = app.graph.getNodeById(Number(nodeId));
+                if (node) {
+                    app.canvas.centerOnNode(node);
+                    app.canvas.selectNode(node);
+                }
+            };
+        } else {
+            cardObj.btnFocus.style.setProperty("display", "none", "important");
+        }
+    }
+
+    if (cardObj.leftHoverBtn) {
+        const outputs = getRunOutputs(state.nodeOutputs, state.workflow);
+        if (outputs.length > 1) {
+            cardObj.leftHoverBtn.style.removeProperty("display");
+            cardObj.leftHoverBtn.style.display = "inline-flex";
+            cardObj.leftHoverBtn.onclick = (ev) => {
+                ev.stopPropagation();
+                if (!State.activeSubmenuBatchImages && !State.activeSubmenuPromptId) {
+                    const scrollEl = getScrollContainer();
+                    if (scrollEl) State.mainQueueScrollTop = scrollEl.scrollTop;
+                }
+                State.activeSubmenuPromptId = state.pid;
+                resetAllCardHoverStates();
+                renderDOM();
+            };
+        } else {
+            cardObj.leftHoverBtn.style.setProperty("display", "none", "important");
+        }
+    }
+}
+
+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 || '')}`;
+
+    // Find the LAST 2D image generated in the same prompt run to use as background thumbnail
+    const imageAssets = state?.images?.filter(i => !is3DFormat(i.filename || i.url) && !isVideoFormat(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 || '')}`)
+        : null;
+
+    if (!preview3D) {
+        wrapper.innerHTML = "";
+        preview3D = document.createElement("div");
+        preview3D.className = "comfy-sidebar-3d-wrapper";
+
+        if (bgImgSrc) {
+            const bgImg = document.createElement("img");
+            bgImg.className = "comfy-sidebar-3d-preview-img";
+            bgImg.src = bgImgSrc;
+            bgImg.alt = "3D Thumbnail Preview";
+            preview3D.appendChild(bgImg);
+        }
+
+        const overlay = document.createElement("div");
+        overlay.className = "comfy-sidebar-3d-overlay";
+
+        const badge = document.createElement("span");
+        badge.className = "comfy-sidebar-3d-badge";
+        const ext = (img.filename || src).split('.').pop().toUpperCase();
+        badge.textContent = ext || "3D";
+
+        const icon = document.createElement("span");
+        icon.className = "pi pi-box comfy-sidebar-3d-icon";
+
+        const title = document.createElement("span");
+        title.className = "comfy-sidebar-3d-title";
+        title.textContent = img.filename || "3D Model";
+
+        overlay.append(badge, icon, title);
+        preview3D.appendChild(overlay);
+        wrapper.appendChild(preview3D);
+    } else {
+        const bgImg = preview3D.querySelector(".comfy-sidebar-3d-preview-img");
+        if (bgImg && bgImgSrc && bgImg.src !== bgImgSrc) {
+            bgImg.src = bgImgSrc;
+        } else if (!bgImg && bgImgSrc) {
+            const newBgImg = document.createElement("img");
+            newBgImg.className = "comfy-sidebar-3d-preview-img";
+            newBgImg.src = bgImgSrc;
+            newBgImg.alt = "3D Thumbnail Preview";
+            preview3D.insertBefore(newBgImg, preview3D.firstChild);
+        }
+        const title = preview3D.querySelector(".comfy-sidebar-3d-title");
+        if (title) title.textContent = img.filename || "3D Model";
+    }
+
+    cardObj.firstImgElement = preview3D;
+
+    preview3D.onclick = (ev) => {
+        ev.stopPropagation();
+        
+        // 1. Try Native Frontend 3D Viewer if available
+        if (window.app?.ui?.show3DViewer) {
+            window.app.ui.show3DViewer(fullUrl);
+            return;
+        }
+
+        // 2. Focus and select 3D node on workflow canvas
+        const nodeId = findNodeIdFor3DAsset(state, img);
+        if (nodeId && app.graph && app.canvas) {
+            const node = app.graph.getNodeById(Number(nodeId));
+            if (node) {
+                app.canvas.centerOnNode(node);
+                app.canvas.selectNode(node);
+                return;
+            }
+        }
+
+        // 3. Fallback to comparison/fullscreen modal handler
+        showFullscreenPreview([fullUrl], ev.shiftKey);
+    };
+
+    // Configure drag & drop for 3D files
+    preview3D.setAttribute("draggable", "true");
+    preview3D.ondragstart = (e) => {
+        e.stopPropagation();
+        const filename = img.filename || "model.glb";
+        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, keepAspect) {
     cardObj.currentImageIndex = cardObj.currentImageIndex || 0;
     if (cardObj.currentImageIndex >= state.images.length) {
@@ -282,6 +522,7 @@ function renderCardImages(cardObj, state, keepAspect) {
 
     const src = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
     const isVideo = isVideoFormat(src);
+    const is3D = is3DFormat(src) || is3DFormat(img.filename);
 
     let wrapper = cardObj.grid.querySelector(".comfy-sidebar-media-wrapper");
     if (!wrapper) {
@@ -292,6 +533,11 @@ function renderCardImages(cardObj, state, keepAspect) {
         cardObj.grid.appendChild(wrapper);
     }
 
+    if (is3D) {
+        render3DCardPreview(cardObj, wrapper, src, img, state);
+        return;
+    }
+
     let mediaEl = wrapper.querySelector("img, video");
     const needsRebuild = !mediaEl || (isVideo !== (mediaEl.tagName.toLowerCase() === "video"));
 
@@ -316,6 +562,27 @@ function renderCardImages(cardObj, state, keepAspect) {
         showFullscreenPreview([src], ev.shiftKey); 
     };
 
+    // Auto-prune card ONLY if file returns 404 Not Found from server
+    mediaEl.onerror = async () => {
+        if (src && !src.startsWith("blob:") && !is3D) {
+            try {
+                const res = await fetch(src, { method: "HEAD" });
+                if (res.status === 404) {
+                    deletePromptState(state.pid);
+                    saveStatesToLocalStorage();
+                    if (cardObj.element) cardObj.element.remove();
+                    return;
+                }
+            } catch (e) {
+                // Ignore network error - keep card
+            }
+            if (cardObj.placeholder) {
+                cardObj.placeholder.textContent = "Error loading media preview";
+                cardObj.placeholder.style.display = "block";
+            }
+        }
+    };
+
     const applyDimensions = (width, height) => {
         if (keepAspect && width && height) {
             mediaEl.style.aspectRatio = `${width} / ${height}`;
@@ -326,12 +593,51 @@ function renderCardImages(cardObj, state, keepAspect) {
         }
     };
 
+    const isUnfinished = state.status && state.status !== "completed";
+    if (isUnfinished) {
+        mediaEl.setAttribute("draggable", "false");
+        mediaEl.style.cursor = "grab";
+        if (mediaEl._currentDragStart) {
+            mediaEl.removeEventListener("dragstart", mediaEl._currentDragStart);
+            delete mediaEl._currentDragStart;
+        }
+    } else {
+        mediaEl.setAttribute("draggable", "true");
+        mediaEl.style.cursor = "zoom-in";
+
+        if (isVideo) {
+            const fullSrc = src.startsWith("http") ? src : window.location.origin + src;
+            const filename = img.filename || "output.mp4";
+            const mimeType = src.includes(".webm") ? "video/webm" : "video/mp4";
+
+            const videoDragHandler = (e) => {
+                try {
+                    e.dataTransfer.setData("text/uri-list", fullSrc);
+                    e.dataTransfer.setData("text/plain", fullSrc);
+                    e.dataTransfer.setData("DownloadURL", `${mimeType}:${filename}:${fullSrc}`);
+                } catch (err) {}
+                e.dataTransfer.effectAllowed = "copy";
+                e.stopPropagation();
+            };
+
+            if (mediaEl._currentDragStart) {
+                mediaEl.removeEventListener("dragstart", mediaEl._currentDragStart);
+            }
+            mediaEl.addEventListener("dragstart", videoDragHandler);
+            mediaEl._currentDragStart = videoDragHandler;
+        } else {
+            if (mediaEl._currentDragStart) {
+                mediaEl.removeEventListener("dragstart", mediaEl._currentDragStart);
+                delete mediaEl._currentDragStart;
+            }
+        }
+    }
+
     if (isVideo) { 
         mediaEl.muted = true; 
         mediaEl.playsInline = true; 
         mediaEl.preload = "metadata";
         mediaEl.loop = true;
-        mediaEl.setAttribute("draggable", "false");
 
         mediaEl.onloadedmetadata = () => {
             applyDimensions(mediaEl.videoWidth, mediaEl.videoHeight);
@@ -360,31 +666,12 @@ function renderCardImages(cardObj, state, keepAspect) {
         mediaEl.onmouseenter = () => { playIcon.style.opacity = "0"; mediaEl.play().catch(()=>{}); };
         mediaEl.onmouseleave = () => { playIcon.style.opacity = "1"; mediaEl.pause(); };
     } else {
-        const isUnfinished = state.status && state.status !== "completed";
-        if (isUnfinished) {
-            mediaEl.setAttribute("draggable", "false");
-            mediaEl.style.cursor = "grab";
-            mediaEl.removeEventListener("dragstart", mediaEl._currentDragStart);
-            delete mediaEl._currentDragStart;
-        } else {
-            mediaEl.setAttribute("draggable", "true");
-            mediaEl.style.cursor = "zoom-in";
-            
-            const dragStartHandler = (e) => {
-                try {
-                    e.dataTransfer.setData("text/uri-list", src);
-                    e.dataTransfer.setData("text/plain", src);
-                } catch (err) {}
-                e.dataTransfer.effectAllowed = "copy";
-                e.stopPropagation();
-            };
-            mediaEl.removeEventListener("dragstart", mediaEl._currentDragStart);
-            mediaEl.addEventListener("dragstart", dragStartHandler);
-            mediaEl._currentDragStart = dragStartHandler;
-        }
-
         mediaEl.onload = () => { 
             applyDimensions(mediaEl.naturalWidth, mediaEl.naturalHeight);
+            if (state._oldPreviewBlobUrl) {
+                try { URL.revokeObjectURL(state._oldPreviewBlobUrl); } catch(e){}
+                delete state._oldPreviewBlobUrl;
+            }
         };
         if (mediaEl.complete && mediaEl.naturalWidth) {
             applyDimensions(mediaEl.naturalWidth, mediaEl.naturalHeight);
@@ -403,7 +690,7 @@ function renderCardImages(cardObj, state, keepAspect) {
                 mediaEl.src = src;
                 mediaEl._lastBlob = src;
                 applyDimensions(tempImg.naturalWidth, tempImg.naturalHeight);
-                if (oldBlob && oldBlob !== src) {
+                if (oldBlob && oldBlob !== src && oldBlob.startsWith("blob:")) {
                     try { URL.revokeObjectURL(oldBlob); } catch(e){}
                 }
             };
@@ -449,6 +736,10 @@ function renderCardImages(cardObj, state, keepAspect) {
             
             label.onclick = (ev) => {
                 ev.stopPropagation();
+                if (!State.activeSubmenuBatchImages && !State.activeSubmenuPromptId) {
+                    const scrollEl = getScrollContainer();
+                    if (scrollEl) State.mainQueueScrollTop = scrollEl.scrollTop;
+                }
                 State.activeSubmenuBatchImages = {
                     pid: state.pid || cardObj.element.id.replace("card-", ""),
                     images: state.images,
@@ -513,6 +804,7 @@ 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;
 
@@ -520,7 +812,11 @@ export function renderDOM() {
                 headerTitle.textContent = `Batch of #${batchInfo.pid}`;
                 headerTitle.style.cursor = "pointer";
                 headerTitle.title = "Go Back to Queue";
-                headerTitle.onclick = () => { State.activeSubmenuBatchImages = null; resetAllCardHoverStates(); renderDOM(); };
+                headerTitle.onclick = () => { 
+                    State.activeSubmenuBatchImages = null; 
+                    resetAllCardHoverStates(); 
+                    renderDOM(); 
+                };
             }
             if (headerSearchIcon) headerSearchIcon.style.display = "none";
             if (headerActions) headerActions.style.display = "none";
@@ -564,8 +860,9 @@ export function renderDOM() {
                     });
 
                     const hoverPanel = document.createElement("div");
+                    hoverPanel.className = "comfy-sidebar-hover-panel";
                     Object.assign(hoverPanel.style, {
-                        position: "absolute", bottom: "4px", right: "4px", display: "none",
+                        position: "absolute", bottom: "4px", right: "4px",
                         flexDirection: "column", gap: "4px", zIndex: "20"
                     });
 
@@ -575,8 +872,9 @@ export function renderDOM() {
                     hoverPanel.appendChild(btnImg);
 
                     const leftHoverPanel = document.createElement("div");
+                    leftHoverPanel.className = "comfy-sidebar-left-hover-panel";
                     Object.assign(leftHoverPanel.style, {
-                        position: "absolute", bottom: "4px", left: "4px", display: "none",
+                        position: "absolute", bottom: "4px", left: "4px",
                         flexDirection: "column", gap: "4px", zIndex: "20"
                     });
 
@@ -590,41 +888,12 @@ export function renderDOM() {
                     cardElements.set(cardId, cardObj);
 
                     card.addEventListener("mouseenter", () => {
-                        cardObj.hoverPanel.style.display = "flex";
-                        cardObj.leftHoverPanel.style.display = "flex";
-                    });
-                    card.addEventListener("mouseleave", () => {
-                        cardObj.hoverPanel.style.display = "none";
-                        cardObj.leftHoverPanel.style.display = "none";
+                        syncCardButtonVisibility(cardObj, { status: "completed", images: [img], workflow: batchInfo.workflow, nodeOutputs: batchInfo.nodeOutputs });
                     });
                 }
 
                 cardObj.placeholder.style.display = "none";
 
-                cardObj.btnImg.style.display = "inline-flex";
-                cardObj.btnImg.onclick = (ev) => {
-                    ev.stopPropagation();
-                    const a = document.createElement("a");
-                    a.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
-                    a.download = img.filename || "output";
-                    a.click();
-                };
-
-                const nodeId = findNodeIdForImage(batchInfo, img);
-                if (nodeId) {
-                    cardObj.btnFocus.style.display = "inline-flex";
-                    cardObj.btnFocus.onclick = (ev) => {
-                        ev.stopPropagation();
-                        const node = app.graph.getNodeById(Number(nodeId));
-                        if (node) {
-                            app.canvas.centerOnNode(node);
-                            app.canvas.selectNode(node);
-                        }
-                    };
-                } else {
-                    cardObj.btnFocus.style.display = "none";
-                }
-
                 renderCardImages(cardObj, { pid: batchInfo.pid, images: [img], workflow: batchInfo.workflow, nodeOutputs: batchInfo.nodeOutputs }, keepAspect);
 
                 targetElements.push(cardObj.element);
@@ -632,9 +901,14 @@ 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;
         }
 
+        // Submenu 2: Intermediate Outputs View
         if (State.activeSubmenuPromptId) {
             const st = promptStates.get(State.activeSubmenuPromptId);
             if (!st) {
@@ -647,7 +921,11 @@ export function renderDOM() {
                 headerTitle.textContent = `Outputs of #${State.activeSubmenuPromptId}`;
                 headerTitle.style.cursor = "pointer";
                 headerTitle.title = "Go Back to Queue";
-                headerTitle.onclick = () => { State.activeSubmenuPromptId = null; resetAllCardHoverStates(); renderDOM(); };
+                headerTitle.onclick = () => { 
+                    State.activeSubmenuPromptId = null; 
+                    resetAllCardHoverStates(); 
+                    renderDOM(); 
+                };
             }
             if (headerSearchIcon) headerSearchIcon.style.display = "none";
             if (headerActions) headerActions.style.display = "none";
@@ -693,8 +971,9 @@ export function renderDOM() {
                     });
 
                     const hoverPanel = document.createElement("div");
+                    hoverPanel.className = "comfy-sidebar-hover-panel";
                     Object.assign(hoverPanel.style, {
-                        position: "absolute", bottom: "4px", right: "4px", display: "none",
+                        position: "absolute", bottom: "4px", right: "4px",
                         flexDirection: "column", gap: "4px", zIndex: "20"
                     });
 
@@ -704,8 +983,9 @@ export function renderDOM() {
                     hoverPanel.appendChild(btnImg);
 
                     const leftHoverPanel = document.createElement("div");
+                    leftHoverPanel.className = "comfy-sidebar-left-hover-panel";
                     Object.assign(leftHoverPanel.style, {
-                        position: "absolute", bottom: "4px", left: "4px", display: "none",
+                        position: "absolute", bottom: "4px", left: "4px",
                         flexDirection: "column", gap: "4px", zIndex: "20"
                     });
 
@@ -719,41 +999,14 @@ export function renderDOM() {
                     cardElements.set(cardId, cardObj);
 
                     card.addEventListener("mouseenter", () => {
-                        cardObj.hoverPanel.style.display = "flex";
-                        cardObj.leftHoverPanel.style.display = "flex";
-                    });
-                    card.addEventListener("mouseleave", () => {
-                        cardObj.hoverPanel.style.display = "none";
-                        cardObj.leftHoverPanel.style.display = "none";
+                        syncCardButtonVisibility(cardObj, { status: "completed", images: out.images, workflow: st.workflow, nodeOutputs: st.nodeOutputs });
                     });
                 }
 
                 if (out.images && out.images.length > 0) {
                     cardObj.placeholder.style.display = "none";
-                    
-                    cardObj.btnImg.style.display = "inline-flex";
-                    cardObj.btnImg.onclick = (ev) => {
-                        ev.stopPropagation();
-                        out.images.forEach(img => {
-                            const a = document.createElement("a");
-                            a.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`;
-                            a.download = img.filename || "output";
-                            a.click();
-                        });
-                    };
-
-                    cardObj.btnFocus.onclick = (ev) => {
-                        ev.stopPropagation();
-                        const node = app.graph.getNodeById(Number(out.nodeId));
-                        if (node) {
-                            app.canvas.centerOnNode(node);
-                            app.canvas.selectNode(node);
-                        }
-                    };
-
                     renderCardImages(cardObj, { pid: st.pid, images: out.images, workflow: st.workflow, nodeOutputs: st.nodeOutputs }, keepAspect);
                 } else {
-                    cardObj.btnImg.style.display = "none";
                     cardObj.placeholder.style.display = "block";
                     cardObj.placeholder.textContent = "No Outputs";
                 }
@@ -763,9 +1016,14 @@ 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";
@@ -786,7 +1044,10 @@ export function renderDOM() {
         const syncCardElement = (state) => {
             let cardObj = cardElements.get(state.pid);
             const isFinalStatus = state.status === "completed" || state.status === "cancelled" || state.status === "error";
-            if (cardObj && isFinalStatus && state.rendered) return cardObj.element;
+            if (cardObj && isFinalStatus && state.rendered) {
+                syncCardButtonVisibility(cardObj, state);
+                return cardObj.element;
+            }
             
             if (!cardObj) {
                 const card = document.createElement("div");
@@ -814,8 +1075,9 @@ export function renderDOM() {
                 const statusText = document.createElement("div"); Object.assign(statusText.style, { fontSize: "11px", opacity: "0.9", color: "#3b82f6", textAlign: "center", marginTop: "6px", display: "none", fontWeight: "bold" });
                 
                 const hoverPanel = document.createElement("div"); 
+                hoverPanel.className = "comfy-sidebar-hover-panel";
                 Object.assign(hoverPanel.style, { 
-                    position: "absolute", bottom: "4px", right: "4px", display: "none", 
+                    position: "absolute", bottom: "4px", right: "4px", 
                     flexDirection: "column", gap: "4px", zIndex: "20" 
                 });
 
@@ -824,8 +1086,9 @@ export function renderDOM() {
                 const btnDel = document.createElement("span"); btnDel.className = "pi pi-trash comfy-sidebar-card-action-btn"; btnDel.title = "Delete Card";
 
                 const leftHoverPanel = document.createElement("div"); 
+                leftHoverPanel.className = "comfy-sidebar-left-hover-panel";
                 Object.assign(leftHoverPanel.style, { 
-                    position: "absolute", bottom: "4px", left: "4px", display: "none", 
+                    position: "absolute", bottom: "4px", left: "4px", 
                     flexDirection: "column", gap: "4px", zIndex: "20" 
                 });
 
@@ -836,13 +1099,6 @@ export function renderDOM() {
                 const leftHoverBtn = document.createElement("span");
                 leftHoverBtn.className = "pi pi-images comfy-sidebar-card-action-btn";
                 leftHoverBtn.title = "View all intermediate outputs";
-                
-                leftHoverBtn.onclick = (ev) => {
-                    ev.stopPropagation();
-                    State.activeSubmenuPromptId = state.pid;
-                    resetAllCardHoverStates();
-                    renderDOM();
-                };
 
                 hoverPanel.append(btnImg, btnJson, btnDel);
                 leftHoverPanel.append(btnFocus, leftHoverBtn);
@@ -852,48 +1108,23 @@ export function renderDOM() {
                 cardObj = { element: card, timerEl, statusBadge: sBadge, grid, placeholder: p, progressContainer: pt, progressBar: pb, cancelBtn: cancelX, hoverPanel, leftHoverPanel, btnFocus, leftHoverBtn, btnImg, btnJson, btnDel, statusText, firstImgElement: null, lastImagesSignature: "" };
                 
                 card.addEventListener("mouseenter", () => { 
-                    if (state.status !== "active" && state.status !== "pending") {
-                        cardObj.hoverPanel.style.display = "flex";
-                        cardObj.leftHoverPanel.style.display = "flex";
-
-                        const currentImg = state.images[cardObj.currentImageIndex || 0];
-                        const nodeId = findNodeIdForImage(state, currentImg);
-                        if (nodeId) {
-                            cardObj.btnFocus.style.display = "inline-flex";
-                            cardObj.btnFocus.onclick = (ev) => {
-                                ev.stopPropagation();
-                                const node = app.graph.getNodeById(Number(nodeId));
-                                if (node) {
-                                    app.canvas.centerOnNode(node);
-                                    app.canvas.selectNode(node);
-                                }
-                            };
-                        } else {
-                            cardObj.btnFocus.style.display = "none";
-                        }
-
-                        const outputs = getRunOutputs(state.nodeOutputs, state.workflow);
-                        const isInterrupted = state.status === "cancelled" || state.status === "error";
-                        if (outputs.length > 1 || (outputs.length > 0 && isInterrupted)) {
-                            cardObj.leftHoverBtn.style.display = "inline-flex";
-                        } else {
-                            cardObj.leftHoverBtn.style.display = "none";
-                        }
-                    } 
-                });
-                card.addEventListener("mouseleave", () => {
-                    cardObj.hoverPanel.style.display = "none";
-                    cardObj.leftHoverPanel.style.display = "none";
+                    syncCardButtonVisibility(cardObj, state);
                 });
                 
                 card.addEventListener("dragstart", (e) => {
                     const isUnfinished = state.status && state.status !== "completed";
-                    if (state.workflow && (!state.images || state.images.length === 0 || isUnfinished)) {
-                        if (cardObj.firstImgElement) e.dataTransfer.setDragImage(cardObj.firstImgElement, 15, 15);
+                    const hasNoImages = !state.images || state.images.length === 0;
+
+                    if (state.workflow && (hasNoImages || isUnfinished)) {
+                        if (cardObj.firstImgElement) {
+                            try { e.dataTransfer.setDragImage(cardObj.firstImgElement, 15, 15); } catch(err){}
+                        }
                         const jsonStr = JSON.stringify(state.workflow, null, 2);
+                        const filename = `workflow_${state.pid}.json`;
+                        const base64Data = btoa(unescape(encodeURIComponent(jsonStr)));
+
                         try { 
-                            e.dataTransfer.setData("DownloadURL", `application/json:workflow_${state.pid}.json:data:application/json;base64,` + btoa(unescape(encodeURIComponent(jsonStr)))); 
-                            e.dataTransfer.setData("text/plain", jsonStr); 
+                            e.dataTransfer.setData("DownloadURL", `application/json:${filename}:data:application/json;base64,${base64Data}`);
                             e.dataTransfer.setData("application/json", jsonStr); 
                         } catch (err) {}
                         e.dataTransfer.effectAllowed = "copy";
@@ -903,6 +1134,8 @@ export function renderDOM() {
                 cardElements.set(state.pid, cardObj);
             }
 
+            syncCardButtonVisibility(cardObj, state);
+
             cardObj.element.className = `comfy-sidebar-card ${state.status}`;
             
             const isUnfinished = state.status && state.status !== "completed";
@@ -943,16 +1176,6 @@ export function renderDOM() {
                 cardObj.cancelBtn.style.display = "none";
             }
 
-            if (state.images && state.images.length > 0) {
-                cardObj.btnImg.style.display = "inline-flex";
-                cardObj.btnImg.onclick = (ev) => { ev.stopPropagation(); state.images.forEach(img => { const a = document.createElement("a"); a.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}`; a.download = img.filename || "output"; a.click(); }); };
-            } else cardObj.btnImg.style.display = "none";
-
-            if (state.workflow) {
-                cardObj.btnJson.style.display = "inline-flex";
-                cardObj.btnJson.onclick = (ev) => { ev.stopPropagation(); const blob = new Blob([JSON.stringify(state.workflow, null, 2)], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `workflow_${state.pid}.json`; a.click(); URL.revokeObjectURL(url); };
-            } else cardObj.btnJson.style.display = "none";
-
             let deleteTimeout = null, isDeletePending = false;
             const resetDeleteBtn = () => { 
                 isDeletePending = false; 
@@ -972,6 +1195,7 @@ export function renderDOM() {
                     resetDeleteBtn(); 
                     promptStates.delete(state.pid); 
                     await api.fetchApi("/history", { method: "POST", body: JSON.stringify({ delete: [state.pid] }) }); 
+                    saveStatesToLocalStorage();
                     renderDOM();
                 }
             };
@@ -1041,6 +1265,19 @@ 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);
 
-        saveStatesToLocalStorage();
+        if (State.mainQueueScrollTop !== null) {
+            const restorePos = State.mainQueueScrollTop;
+            State.mainQueueScrollTop = null;
+
+            const scrollEl = getScrollContainer();
+            if (scrollEl) {
+                scrollEl.scrollTop = restorePos;
+                requestAnimationFrame(() => {
+                    scrollEl.scrollTop = restorePos;
+                });
+            }
+        }
+
+        updateScrollTopBtnVisibility();
     });
 }

js/utils.js

@@ -1,44 +1,73 @@
 import { app } from "/scripts/app.js";
 
 export const isVideoFormat = (url) => {
-    const s = url.toLowerCase();
+    if (!url) return false;
+    const s = String(url).toLowerCase();
     return s.includes(".mp4") || s.includes(".webm");
 };
 
-function isNodeIgnored(nodeId, workflow) {
-    if (!workflow || !workflow.nodes) {
-        // Fallback to active graph if workflow is missing (e.g. during live execution)
-        const liveNode = app.graph?.getNodeById(Number(nodeId));
-        if (liveNode) {
-            return !!(liveNode.properties && liveNode.properties.ignoreInQueue);
-        }
+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");
+};
+
+export function parseWorkflow(workflow) {
+    if (!workflow) return null;
+    if (typeof workflow === "object") return workflow;
+    if (typeof workflow === "string") {
+        try { return JSON.parse(workflow); } catch (e) { return null; }
+    }
+    return null;
+}
+
+function isNodeIgnored(nodeId, rawWorkflow) {
+    const workflow = parseWorkflow(rawWorkflow);
+    if (!workflow || !Array.isArray(workflow.nodes)) {
         return false;
     }
     const node = workflow.nodes.find(n => String(n.id) === String(nodeId));
     return !!(node && node.properties && node.properties.ignoreInQueue);
 }
 
-// Robust media output scanner supporting both arrays and single objects (gifs, mp4s, etc.)
-export function findImagesInOutputs(outputs, workflow) {
+export function findImagesInOutputs(outputs, rawWorkflow) {
     const list = [];
     if (!outputs) return list;
-    for (const nodeId in outputs) {
-        if (isNodeIgnored(nodeId, workflow)) continue;
-        for (const key in outputs[nodeId]) {
-            const val = outputs[nodeId][key];
-            if (Array.isArray(val)) {
-                val.forEach(item => {
-                    if (item && typeof item === 'object' && item.filename) list.push(item);
-                });
-            } else if (val && typeof val === 'object' && val.filename) {
-                list.push(val);
+
+    const scan = (obj) => {
+        if (!obj) 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"
+                    });
+                    return;
+                }
+            }
+            for (const key in obj) {
+                scan(obj[key]);
             }
         }
+    };
+
+    const workflow = parseWorkflow(rawWorkflow);
+    for (const nodeId in outputs) {
+        if (isNodeIgnored(nodeId, workflow)) continue;
+        scan(outputs[nodeId]);
     }
     return list;
 }
 
-export function findTextsInOutputs(outputs, workflow) {
+export function findTextsInOutputs(outputs, rawWorkflow) {
+    const workflow = parseWorkflow(rawWorkflow);
     const list = [];
     if (!outputs) return list;
     for (const nodeId in outputs) {
@@ -65,8 +94,8 @@ export function findTextsInOutputs(outputs, workflow) {
     return list;
 }
 
-// Organizes raw outputs dictionaries into lists of individual node-level output blocks (ignoring text-only outputs)
-export function getRunOutputs(nodeOutputs, workflow) {
+export function getRunOutputs(nodeOutputs, rawWorkflow) {
+    const workflow = parseWorkflow(rawWorkflow);
     const list = [];
     if (!nodeOutputs) return list;
     for (const nodeId in nodeOutputs) {
@@ -78,6 +107,13 @@ export function getRunOutputs(nodeOutputs, workflow) {
     return list;
 }
 
+export function getPrimaryOutputImages(nodeOutputs, rawWorkflow) {
+    if (!nodeOutputs) return [];
+    const runOutputs = getRunOutputs(nodeOutputs, rawWorkflow);
+    if (runOutputs.length === 0) return [];
+    return runOutputs[runOutputs.length - 1].images || [];
+}
+
 export function matchesFilter(state, query) {
     if (!query) return true;
     const q = query.toLowerCase();
@@ -87,8 +123,9 @@ export function matchesFilter(state, query) {
     if (state.images && state.images.some(img => (img.filename || "").toLowerCase().includes(q))) return true;
     if (state.activeNodeName && state.activeNodeName.toLowerCase().includes(q)) return true;
 
-    if (state.workflow && Array.isArray(state.workflow.nodes)) {
-        for (const node of state.workflow.nodes) {
+    const workflow = parseWorkflow(state.workflow);
+    if (workflow && Array.isArray(workflow.nodes)) {
+        for (const node of workflow.nodes) {
             if (node.title && node.title.toLowerCase().includes(q)) return true;
             if (node.type && node.type.toLowerCase().includes(q)) return true;
             if (Array.isArray(node.widgets)) {

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.2.8"
+version = "1.3.0"
 license = { file = "LICENSE" }
 dependencies = []