version bump

perf(queue): optimize rendering overhead and fix preview image flicker
bug fixes and improvements
2026-08-08 08:08:32 +05:00 · 2026-08-08 07:58:45 +05:00 · 2026-07-28 22:38:52 +05:00
11 changed files with 503 additions and 214 deletions
@@ -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 }}
@@ -37,6 +37,6 @@ See additional tweaks in ComfyUI settings menu > Comfy Sidebar. From there, you

 ## ⌨️ 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.
+* **`Q`**: Toggle sidebar queue panel.
 * **`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.
+* **`Click`** on a card to enter preview. **`Shift+Click`** on another card in preview to enter compare mode.
@@ -1,4 +1,3 @@
-import { State } from "./state.js";
 import { isVideoFormat } from "./utils.js";

 let activeComparisonViewer = null;
@@ -32,7 +31,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 +191,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 +203,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();
@@ -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 URL drop
        const url = e.dataTransfer.getData("text/uri-list") || e.dataTransfer.getData("text/plain");
        if (url) {
            try {
@@ -77,28 +77,43 @@ 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, VHS_LoadVideo, or image/video widget node
+                        const widget = targetNode?.widgets?.find(w => 
+                            w.name === "image" || w.name === "video" || w.name === "file" || w.name === "video_path" || w.type === "image" || w.type === "customtext"
+                        );
+
+                        const isLoadNode = targetNode && (widget || targetNode.type?.includes("LoadImage") || targetNode.type?.includes("LoadVideo") || targetNode.type?.includes("VHS_LoadVideo"));
+
+                        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);
+                                    // Populate dropdown values list so combo widgets (like VHS_LoadVideo) accept the new video immediately!
+                                    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 });
@@ -204,13 +204,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 +216,6 @@ function isPropertiesPanelOpen() {
        }
    }

-    // 3. Fallback check for original button active state
    const origBtn = findOriginalButton();
    if (origBtn) {
        if (origBtn.classList.contains("p-button-active") || 
@@ -491,7 +488,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 +517,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;
                }
@@ -1,6 +1,6 @@
 import { app } from "/scripts/app.js";
 import { api } from "/scripts/api.js";
-import { State, promptStates, pruneHistory, loadStatesFromLocalStorage, cardElements } from "./state.js";
+import { State, promptStates, pruneHistory, cardElements, saveStatesToLocalStorage } from "./state.js";
 import { findImagesInOutputs, findTextsInOutputs } from "./utils.js";

 export let renderDOMFn = () => {};
@@ -70,11 +70,14 @@ const concludeRun = async (pid, statusStr) => {
    
    const st = promptStates.get(pid);

-    // FIX: Revoke live preview blob URL to prevent browser memory leaks
    if (st._previewBlobUrl) {
        try { URL.revokeObjectURL(st._previewBlobUrl); } catch(e){}
        delete st._previewBlobUrl;
    }
+    if (st._oldPreviewBlobUrl) {
+        try { URL.revokeObjectURL(st._oldPreviewBlobUrl); } catch(e){}
+        delete st._oldPreviewBlobUrl;
+    }

    st.status = statusStr;
    st.progressText = "";
@@ -92,7 +95,9 @@ const concludeRun = async (pid, statusStr) => {
            st.texts = findTextsInOutputs(hItem[pid].outputs, st.workflow);
        }
    } catch (err) {}
+    
    pruneHistory(app);
+    saveStatesToLocalStorage(); // Persist history state only when a job concludes
    syncQueue();
 };

@@ -110,6 +115,7 @@ export function setupApiListeners() {
            }
            if (toDelete.length > 0) {
                api.fetchApi("/history", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ delete: toDelete }) }).catch(()=>{});
+                saveStatesToLocalStorage();
            }
        }

@@ -136,8 +142,20 @@ export function setupApiListeners() {
    api.addEventListener("progress", (e) => {
        const pid = e.detail.prompt_id;
        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);
+            
+            // Direct fast DOM update for the progress bar without triggering a full history re-sort
+            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,9 +179,12 @@ 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);
+            
+            // Retain old blob URL so ui.js can revoke it ONLY AFTER the image element finishes loading
+            st._oldPreviewBlobUrl = st._previewBlobUrl;
+            st._previewBlobUrl = newBlobUrl;
+            st.images = [{ url: newBlobUrl }];
            renderDOMFn();
        }
    });
@@ -66,6 +66,32 @@ 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 toggleIgnoreActiveNode() {
    const canvas = app.canvas;
    if (!canvas) return;
@@ -113,7 +139,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({
@@ -190,6 +215,7 @@ app.registerExtension({
        
        await initSessionAndHistory();

+        // Keyboard shortcuts listener
        document.addEventListener("keydown", (e) => {
            const activeEl = document.activeElement;
            if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.isContentEditable || activeEl.tagName === "SELECT")) return;
@@ -206,37 +232,27 @@ app.registerExtension({
            }
        }, 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");
+        // Event hooks for node additions and workflow loading (eliminates continuous polling loops)
+        if (app.graph) {
+            const originalConfigure = app.graph.configure;
+            app.graph.configure = function() {
+                const res = originalConfigure ? originalConfigure.apply(this, arguments) : undefined;
+                requestAnimationFrame(() => syncAllNodeBadges());
+                return res;
+            };

-                if (hasIgnoredOrColoredNodes || hasBadgesInDOM) {
-                    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";
-                                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);
-                    });
+            const originalOnNodeAdded = app.graph.onNodeAdded;
+            app.graph.onNodeAdded = function(node) {
+                if (originalOnNodeAdded) originalOnNodeAdded.apply(this, arguments);
+                if (node && node.properties?.ignoreInQueue) {
+                    node.boxcolor = "#ff3333";
+                    syncNodeVueBadge(node, true);
                }
-            }
-        }, 500);
+            };
+        }
+
+        // Apply sidebar override when initializing
+        applySidebarOverride();

        app.extensionManager.registerSidebarTab({ 
            id: "classic-comfy-sidebar", 
@@ -5,12 +5,33 @@ 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
 };

+/**
+ * Safely removes a prompt state from memory and revokes any active preview blob URLs.
+ */
+export function deletePromptState(pid) {
+    const state = promptStates.get(pid);
+    if (state) {
+        if (state._previewBlobUrl) {
+            try { URL.revokeObjectURL(state._previewBlobUrl); } catch (e) {}
+        }
+        if (state._oldPreviewBlobUrl) {
+            try { URL.revokeObjectURL(state._oldPreviewBlobUrl); } catch (e) {}
+        }
+    }
+    promptStates.delete(pid);
+    cardElements.delete(pid);
+}
+
+/**
+ * Prunes completed/cancelled history when total items exceed user setting.
+ */
 export function pruneHistory(app) {
    const maxItems = app.ui.settings.getSettingValue("Comfy.Queue.MaxHistoryItems") ?? 64;
    const tasks = Array.from(promptStates.entries())
@@ -22,15 +43,18 @@ 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);
        }
    }
 }

+/**
+ * Saves all prompt states (including workflows, text outputs, video runs, and failed tasks) to localStorage.
+ * Call ONLY on job completion, cancellation, error, or card deletion.
+ */
 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;
@@ -38,20 +62,47 @@ export function saveStatesToLocalStorage() {
            }).filter(Boolean);

            serializable.push({
-                pid: state.pid, status: state.status, images: cleanedImages, texts: state.texts || [],
+                pid: 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: 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
            });
        }
-        localStorage.setItem("comfy_sidebar_prompt_states", JSON.stringify(serializable));
+
+        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 {
+                    console.error("Comfy Sidebar: Failed to save state to localStorage", e);
+                    break;
+                }
+            }
+        }
    } catch (e) {
-        console.error("Comfy Sidebar: Failed to save state to localStorage", e);
+        console.error("Comfy Sidebar: Error preparing localStorage data", e);
    }
 }

+/**
+ * Loads cached card states on extension initialization.
+ */
 export function loadStatesFromLocalStorage() {
    try {
        const data = localStorage.getItem("comfy_sidebar_prompt_states");
@@ -33,7 +33,7 @@ export function injectStyles() {
        .comfy-sidebar-card-timer {
            position: absolute; top: 6px; left: 8px; font-size: 10px;
            font-family: monospace; opacity: 0.7; background: rgba(0, 0, 0, 0.6);
-            padding: 2px 4px; border-radius: 3px; pointer-events: none; z-index: 5; color: #fff;
+            padding: 2px 4px; border-radius: 3px; pointerEvents: none; z-index: 5; color: #fff;
        }

        .comfy-sidebar-queue-cancel-btn {
@@ -56,9 +56,9 @@ export function injectStyles() {
            color: #ffffff !important;
        }

-        /* Optimized Card Action Buttons */
+        /* 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;
@@ -4,7 +4,6 @@ import { State, promptStates, cardElements, saveStatesToLocalStorage } from "./s
 import { isVideoFormat, matchesFilter, getRunOutputs } from "./utils.js";
 import { showFullscreenPreview } from "./comparison.js";

-// DI Hook for cyclic imports
 export let syncQueueFn = async () => {};
 export function setSyncQueue(fn) { syncQueueFn = fn; }

@@ -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) {
@@ -115,7 +149,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");
@@ -188,6 +222,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 +234,7 @@ export function setupSidebarUI() {
            }
        }
        try { await api.fetchApi("/history", { method: "POST", body: JSON.stringify({ clear: true }) }); } catch (err) {}
+        saveStatesToLocalStorage();
        renderDOM();
    });

@@ -230,9 +266,43 @@ export function setupSidebarUI() {
    searchInput.oninput = () => { 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);

+    scrollToTopBtnEl = document.createElement("button");
+    scrollToTopBtnEl.className = "pi pi-chevron-up";
+    scrollToTopBtnEl.title = "Scroll to Top";
+    Object.assign(scrollToTopBtnEl.style, {
+        position: "absolute", bottom: "12px", right: "12px", width: "32px", height: "32px",
+        borderRadius: "50%", background: "rgba(30, 30, 30, 0.9)", color: "#eee",
+        border: "1px solid var(--border-color, #555)", cursor: "pointer", fontSize: "13px",
+        display: "none", alignItems: "center", justifyContent: "center", zIndex: "999",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.6)", transition: "all 0.15s ease-in-out", opacity: "0.85"
+    });
+
+    scrollToTopBtnEl.onmouseenter = () => {
+        scrollToTopBtnEl.style.opacity = "1";
+        scrollToTopBtnEl.style.background = "var(--p-primary-color, #3b82f6)";
+        scrollToTopBtnEl.style.color = "#fff";
+        scrollToTopBtnEl.style.borderColor = "var(--p-primary-color, #3b82f6)";
+    };
+    scrollToTopBtnEl.onmouseleave = () => {
+        scrollToTopBtnEl.style.opacity = "0.85";
+        scrollToTopBtnEl.style.background = "rgba(30, 30, 30, 0.9)";
+        scrollToTopBtnEl.style.color = "#eee";
+        scrollToTopBtnEl.style.borderColor = "var(--border-color, #555)";
+    };
+
+    scrollToTopBtnEl.onclick = (e) => {
+        e.stopPropagation();
+        const scrollEl = getScrollContainer();
+        if (scrollEl) {
+            scrollEl.scrollTo({ top: 0, behavior: "smooth" });
+        }
+    };
+
+    State.sidebarContainer.appendChild(scrollToTopBtnEl);
+
    State.sidebarContainer.onclick = (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;
@@ -248,10 +318,13 @@ export function setupSidebarUI() {
    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);

+    // Light 250ms active timer tick
    setInterval(() => {
        if (State.currentlyActivePromptId === null) return;
        for (const [pid, state] of promptStates.entries()) {
@@ -260,11 +333,125 @@ 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;
+
+    if (state.status === "active" || state.status === "pending") {
+        if (cardObj.hoverPanel) cardObj.hoverPanel.style.setProperty("display", "none", "important");
+        if (cardObj.leftHoverPanel) cardObj.leftHoverPanel.style.setProperty("display", "none", "important");
+        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");
+        }
+    }
+
+    const hasRightButtons = (cardObj.btnImg && cardObj.btnImg.style.display !== "none") || 
+                            (cardObj.btnJson && cardObj.btnJson.style.display !== "none") || 
+                            (cardObj.btnDel && cardObj.btnDel.style.display !== "none");
+                            
+    const hasLeftButtons = (cardObj.btnFocus && cardObj.btnFocus.style.display !== "none") || 
+                           (cardObj.leftHoverBtn && cardObj.leftHoverBtn.style.display !== "none");
+
+    if (cardObj.hoverPanel) {
+        if (hasRightButtons) {
+            cardObj.hoverPanel.style.removeProperty("display");
+            cardObj.hoverPanel.style.display = "flex";
+        } else {
+            cardObj.hoverPanel.style.setProperty("display", "none", "important");
+        }
+    }
+
+    if (cardObj.leftHoverPanel) {
+        if (hasLeftButtons) {
+            cardObj.leftHoverPanel.style.removeProperty("display");
+            cardObj.leftHoverPanel.style.display = "flex";
+        } else {
+            cardObj.leftHoverPanel.style.setProperty("display", "none", "important");
+        }
+    }
+}
+
 function renderCardImages(cardObj, state, keepAspect) {
    cardObj.currentImageIndex = cardObj.currentImageIndex || 0;
    if (cardObj.currentImageIndex >= state.images.length) {
@@ -326,12 +513,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 +586,13 @@ 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);
+            // Safely revoke old preview blob URL ONLY after new frame finishes rendering!
+            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 +611,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 +657,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 +725,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 +733,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";
@@ -590,8 +807,7 @@ export function renderDOM() {
                    cardElements.set(cardId, cardObj);

                    card.addEventListener("mouseenter", () => {
-                        cardObj.hoverPanel.style.display = "flex";
-                        cardObj.leftHoverPanel.style.display = "flex";
+                        syncCardButtonVisibility(cardObj, { status: "completed", images: [img], workflow: batchInfo.workflow, nodeOutputs: batchInfo.nodeOutputs });
                    });
                    card.addEventListener("mouseleave", () => {
                        cardObj.hoverPanel.style.display = "none";
@@ -601,30 +817,6 @@ export function renderDOM() {

                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 +824,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 +844,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";
@@ -719,8 +920,7 @@ export function renderDOM() {
                    cardElements.set(cardId, cardObj);

                    card.addEventListener("mouseenter", () => {
-                        cardObj.hoverPanel.style.display = "flex";
-                        cardObj.leftHoverPanel.style.display = "flex";
+                        syncCardButtonVisibility(cardObj, { status: "completed", images: out.images, workflow: st.workflow, nodeOutputs: st.nodeOutputs });
                    });
                    card.addEventListener("mouseleave", () => {
                        cardObj.hoverPanel.style.display = "none";
@@ -730,30 +930,8 @@ export function renderDOM() {

                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 +941,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 +969,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");
@@ -836,13 +1022,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,34 +1031,7 @@ 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";
-                        }
-                    } 
+                    syncCardButtonVisibility(cardObj, state);
                });
                card.addEventListener("mouseleave", () => {
                    cardObj.hoverPanel.style.display = "none";
@@ -888,12 +1040,18 @@ export function renderDOM() {
                
                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 +1061,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 +1103,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 +1122,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 +1192,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();
    });
 }
@@ -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.2.9"
 license = { file = "LICENSE" }
 dependencies = []
Author	SHA1	Message	Date
m0rtus59	b3e6b1bd62	version bump	2026-08-08 08:08:32 +05:00
m0rtus59	2dc92d3e6f	perf(queue): optimize rendering overhead and fix preview image flicker	2026-08-08 07:58:45 +05:00
m0rtus59	e83c999da7	bug fixes and improvements	2026-07-28 22:38:52 +05:00