Fix preview memory leaks, false cancelled runs, and double-decker cards

- Fixed memory leak by revoking live preview blob URLs

- Fixed race condition that falsely marked completed runs as Cancelled

- Fixed double-decker card layout: 3D, Audio, and File cards now embed workflow images as background thumbnails

- Fixed Runtime Preview mode failing to deactivate after closing Text or 3D viewers

- Prevented video dimensions from leaking onto 3D and Audio cards

- Sorted workflow outputs by canvas execution order so final node output is always prioritized

- Fixed Windows Explorer failing to highlight files when paths have spaces

.gitignore

@@ -1,3 +1,2 @@
 __pycache__/
-*.pyc
-js/vendor/
+*.pyc

README.md

@@ -1,70 +1,81 @@
 # ComfyUI-ComfySidebar
 
-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!
+A compact and powerful layout overhaul for ComfyUI that makes generation results easier to browse, preview, compare, and manage.
 
 ## ✨ Features
 
-* 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` (or the header button).
-* Ctrl-clicking the sidebar cards opens their file location or the menu for alternative actions.
-* Ctrl-clicking the delete button places the generated file to the recycle bin.
-* [NEW] Reset all node IDs in topological execution order (`Alt+R`, right-click menu, or header button) to ensure the final output node is always prioritized as the primary preview.
+* **Compact, information-dense layout** with visual previews that let you see what is happening at a glance. Optional UI elements and sidebar tabs can be hidden when you don't need them.
 
-<img width="385" height="336" alt="image" src="https://github.com/user-attachments/assets/743fbf85-9281-4561-9dd0-cd9af4d8c0e4" />
+  <img src="assets/layout.png" alt="ComfySidebar layout" width="100%">
+  
+* **Left or right side:** Choose which side the sidebar appears on in ComfyUI settings.
 
+* **Simplified mouse-friendly workflow** with drag-and-drop support and convenient actions for moving results back into the workflow, opening files, and managing outputs. Hold `Ctrl` for extra actions such as opening an image's location or deleting it directly from your device.
+
+  <img src="assets/controls.png" alt="ComfySidebar controls overview" width="100%">
+
+* **Built-in comparison tool** for quickly comparing two generated results side by side.
+
+  <img src="assets/compare.png" alt="ComfySidebar compare" width="100%">
+
+* **Runtime preview mode** combined with workflow overview makes ComfyUI practical for running and monitoring workflows in a more streamlined, queue-oriented way.
+
+  <img src="assets/runtime.png" alt="ComfySidebar runtime mode" width="100%">
 
 ## 🛠️ Installation
 
-Clone the repository directly into your ComfyUI custom nodes directory:
+### ComfyUI Registry
+
+Install directly from the ComfyUI Manager or run:
+
+```bash
+comfy node install comfy-sidebar
+```
+
+ComfySidebar is available on the [ComfyUI Registry](https://registry.comfy.org/publishers/soundslikethunder/nodes/comfy-sidebar).
+
+### Manual installation
+
+Clone the repository into your ComfyUI custom nodes directory:
 
 ```bash
 cd /path/to/ComfyUI/custom_nodes
 git clone https://github.com/m0rtus59/ComfyUI-ComfySidebar.git
-
 ```
 
-Restart your ComfyUI server and refresh the browser tab.
+Restart ComfyUI and refresh the browser.
 
-## ⚙️ Configuration
+## ⚙️ Settings
 
 Open **Settings → Comfy Sidebar** to configure:
 
-* Queue grid layout
-* Result aspect ratio
+* Queue layout and column width
 * Queue display mode
 * Working node display
-* Automatic cleanup of cancelled/failed jobs
+* Automatic cleanup of cancelled or failed jobs
 * Sidebar tabs to hide
 * Stock Job History replacement
 * Graph button visibility
 * Unified top bar layout
+* Permanent deletion behavior
 
-## ⌨️ Shortcuts
+## ⌨️ Controls
 
-| Shortcut      | Action                                             |
-| ------------- | -------------------------------------------------- |
-| `Q`           | Toggle ComfySidebar                                |
-| `Ctrl+Q`      | Exclude the selected node from the sidebar outputs |
-| `Alt+R`       | Reset all node IDs by execution order              |
-| `Click`       | Open result preview                                |
-| `Shift+Click` | Compare another result                             |
-| `Ctrl+Click`  | Open file location/alternative action              |
+| Shortcut      | Action                                         |
+| ------------- | ---------------------------------------------- |
+| `Q`           | Toggle ComfySidebar                            |
+| `Ctrl+Q`      | Exclude the selected node from sidebar results |
+| `Alt+R`       | Renumber nodes in execution order              |
+| `Click`       | Open result preview                            |
+| `Shift+Click` | Compare another result                         |
+| `Ctrl+Click`  | Open the file location / alternative action    |
+
+You can also use the available actions from result cards, the sidebar header, and the node/canvas context menus.
 
 ## 📝 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.
+ComfySidebar integrates with the ComfyUI frontend and depends on parts of its UI structure. Frontend changes in ComfyUI may require updates to this extension.
 
 ## License
 
-See [LICENSE](LICENSE).
+See [LICENSE](LICENSE).

__init__.py

@@ -16,7 +16,12 @@ def is_path_safe(base_dir, target_path):
     """Prevents Path Traversal attacks."""
     real_base = os.path.realpath(base_dir)
     real_target = os.path.realpath(target_path)
-    return real_target == real_base or real_target.startswith(real_base + os.sep)
+    try:
+        # commonpath reliably handles OS-specific case sensitivity and slash logic
+        return os.path.commonpath([real_base, real_target]) == real_base
+    except ValueError:
+        # Raised if paths are on different drives on Windows
+        return False
 
 
 def get_all_candidate_roots(subfolder="", folder_type="output"):
@@ -55,9 +60,9 @@ def get_all_candidate_roots(subfolder="", folder_type="output"):
     return unique
 
 
-def resolve_existing_path(filename="", subfolder="", folder_type="output"):
+def resolve_existing_path(filename="", subfolder="", folder_type="output", candidate_roots=None):
     """Finds the actual location of a file or folder across all candidate root directories."""
-    candidates = get_all_candidate_roots(subfolder, folder_type)
+    candidates = candidate_roots if candidate_roots is not None else get_all_candidate_roots(subfolder, folder_type)
 
     if filename:
         for root in candidates:
@@ -89,10 +94,10 @@ def open_file_in_os(target_path):
         if not os.path.exists(norm_path):
             raise FileNotFoundError(f"Path not found: {norm_path}")
         if os.path.isfile(norm_path):
-            # Passed as a single argument so Windows Explorer highlights the file properly
-            subprocess.Popen(["explorer", f"/select,{norm_path}"])
+            # Use raw command string so Windows Explorer correctly parses /select,"path"
+            subprocess.Popen(f'explorer /select,"{norm_path}"')
         else:
-            os.startfile(norm_path)
+            subprocess.Popen(f'explorer "{norm_path}"')
 
     elif system == "Darwin":  # macOS
         if not os.path.exists(target_path):
@@ -141,19 +146,34 @@ async def delete_file_handler(request):
         if not filename:
             return web.json_response({"error": "No filename provided"}, status=400)
 
-        target_file, root = resolve_existing_path(filename, subfolder, folder_type)
+        # Strictly restrict deletion to generated output and temp files (protects models/checkpoints)
+        delete_roots = [
+            folder_paths.get_output_directory(),
+            folder_paths.get_temp_directory()
+        ]
+        delete_roots = [os.path.realpath(r) for r in delete_roots if r and os.path.exists(r)]
+
+        target_file, root = resolve_existing_path(filename, subfolder, folder_type, candidate_roots=delete_roots)
 
         if not target_file or not os.path.isfile(target_file) or not is_path_safe(root, target_file):
-            return web.json_response({"error": "File not found or unsafe path"}, status=404)
+            return web.json_response({"error": "File not found or outside output directory"}, status=404)
 
         # Try moving to Recycle Bin / Trash first, fallback to os.remove
-        try:
-            import send2trash
-            send2trash.send2trash(target_file)
-        except Exception:
+        permanent = bool(data.get("permanent", False))
+        action = "deleted"
+        if not permanent:
+            try:
+                import send2trash
+                send2trash.send2trash(target_file)
+                action = "trashed"
+            except Exception:
+                os.remove(target_file)
+                action = "deleted"
+        else:
             os.remove(target_file)
+            action = "deleted"
 
-        return web.json_response({"success": True, "deleted": target_file})
+        return web.json_response({"success": True, "deleted": target_file, "action": action})
     except Exception as e:
         return web.json_response({"error": str(e)}, status=500)
 
@@ -180,61 +200,4 @@ async def promote_output_handler(request):
         shutil.copy2(target_file, dest_path)
         return web.json_response({"name": filename})
     except Exception as e:
-        return web.json_response({"error": str(e)}, status=500)
-
-
-# ============================================================================
-# Local Three.js Proxy & Offline Cache (Bypasses CSP & --disable-api-nodes)
-# ============================================================================
-SIDEBAR_CACHE_DIR = os.path.join(os.path.dirname(__file__), "js", "vendor", "cache")
-
-@PromptServer.instance.routes.get("/comfy-sidebar/three-proxy/{path:.*}")
-async def three_proxy_handler(request):
-    raw_path = request.match_info.get("path", "").lstrip("/")
-    if not raw_path:
-        return web.Response(status=404)
-
-    query = request.query_string
-    full_req = f"{raw_path}?{query}" if query else raw_path
-    
-    os.makedirs(SIDEBAR_CACHE_DIR, exist_ok=True)
-    import re
-    safe_name = re.sub(r'[^a-zA-Z0-9_.-]', '_', full_req)
-    if not any(safe_name.endswith(ext) for ext in [".js", ".mjs", ".wasm", ".bin", ".json"]):
-        safe_name += ".js"
-    cache_file = os.path.join(SIDEBAR_CACHE_DIR, safe_name)
-
-    # 1. Serve immediately from disk cache if present
-    if os.path.isfile(cache_file) and os.path.getsize(cache_file) > 0:
-        content_type = "application/wasm" if raw_path.endswith(".wasm") else "application/javascript"
-        return web.FileResponse(cache_file, headers={"Content-Type": content_type})
-
-    # 2. Otherwise download via Python (not blocked by browser CSP)
-    url = f"https://esm.sh/{full_req}"
-    try:
-        import urllib.request
-        req = urllib.request.Request(url, headers={"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)"})
-        with urllib.request.urlopen(req, timeout=20) as resp:
-            raw_data = resp.read()
-
-            if raw_path.endswith((".wasm", ".bin", ".png", ".jpg")):
-                with open(cache_file, "wb") as f:
-                    f.write(raw_data)
-                return web.Response(body=raw_data, content_type="application/octet-stream")
-
-            content = raw_data.decode("utf-8", errors="replace")
-            # Rewrite absolute esm.sh paths to route through our local 'self' proxy
-            content = content.replace("https://esm.sh/", "/comfy-sidebar/three-proxy/")
-            # Rewrite root-relative module paths (e.g. from "/v135/...")
-            content = re.sub(
-                r'((?:from|import)\s*["\'])/(v\d+|[a-zA-Z0-9@_.~-]+/)',
-                r'\1/comfy-sidebar/three-proxy/\2',
-                content
-            )
-
-            with open(cache_file, "w", encoding="utf-8") as f:
-                f.write(content)
-
-            return web.Response(text=content, content_type="application/javascript")
-    except Exception as e:
-        return web.Response(text=f"/* Proxy error fetching {url}: {e} */", status=502, content_type="application/javascript")
+        return web.json_response({"error": str(e)}, status=500)

js/comfy/adapter.js

@@ -43,15 +43,36 @@ export function findTopbarContainer() {
     return null;
 }
 
-export function isPropertiesPanelOpen() {
-    const panel = document.querySelector('[data-testid="properties-panel"]');
-    if (panel && panel.offsetWidth > 0 && panel.offsetHeight > 0) return true;
-
-    const headings = document.querySelectorAll('h1, h2, h3, h4');
-    for (const h of headings) {
-        if (h.textContent.trim() === "Workflow Overview" && h.offsetWidth > 0 && h.offsetHeight > 0) return true;
+export function findPropertiesPanel() {
+    const testIdPanel = document.querySelector('[data-testid="properties-panel"], [data-testid="workflow-overview-panel"], .properties-panel, [class*="properties-panel"]');
+    if (testIdPanel && testIdPanel.offsetWidth > 0 && testIdPanel.offsetHeight > 0 && testIdPanel.isConnected) {
+        return testIdPanel;
     }
 
+    const headings = document.querySelectorAll('h1, h2, h3, h4, [class*="title"]');
+    for (const h of headings) {
+        if (h.textContent.trim().toLowerCase() === "workflow overview" && h.offsetWidth > 0 && h.offsetHeight > 0) {
+            const container = h.closest('.p-sidebar, .sidebar, aside, [class*="side-panel"], [class*="panel"], [class*="properties"]') || h.parentElement;
+            if (container && container.offsetWidth > 0 && container !== document.body) {
+                return container;
+            }
+        }
+    }
+
+    const rightSidebars = document.querySelectorAll('.p-sidebar-right, aside.p-sidebar, [class*="p-sidebar-right"]');
+    for (const sb of rightSidebars) {
+        if (sb.offsetWidth > 0 && sb.offsetHeight > 0) {
+            return sb;
+        }
+    }
+
+    return null;
+}
+
+export function isPropertiesPanelOpen() {
+    const panel = findPropertiesPanel();
+    if (panel) return true;
+
     const origBtn = findOriginalPropertiesButton();
     if (origBtn) {
         if (origBtn.classList.contains("p-button-active") ||
@@ -64,6 +85,56 @@ export function isPropertiesPanelOpen() {
     return false;
 }
 
+export function findActiveSidebars() {
+    const leftPanels = [];
+    const rightPanels = [];
+    const winW = window.innerWidth;
+    const midX = winW / 2;
+
+    // 1. Check if our Queue sidebar is open and visible
+    const queueHeader = document.querySelector('.comfy-sidebar-header-root');
+    if (queueHeader) {
+        const queueDrawer = queueHeader.closest('.sidebar-content-container, .comfyui-sidebar-content, .p-sidebar, aside') || queueHeader.parentElement;
+        if (queueDrawer && queueDrawer.offsetWidth > 0 && queueDrawer.offsetHeight > 0 && queueDrawer.isConnected) {
+            const r = queueDrawer.getBoundingClientRect();
+            if (r.right > 0 && r.right < midX) {
+                leftPanels.push(queueDrawer);
+            }
+        }
+    }
+
+    // 2. Query all active sidebars and panels across ComfyUI & third-party extensions
+    const candidates = document.querySelectorAll(
+        'aside, nav, .comfyui-sidebar, .side-tool-bar-container, .sidebar-content-container, ' +
+        '.comfyui-sidebar-content, .p-sidebar, [data-testid="properties-panel"], ' +
+        '[data-testid="workflow-overview-panel"], [data-testid*="sidebar"], .p-sidebar-right'
+    );
+
+    const seen = new Set(leftPanels);
+
+    for (const el of candidates) {
+        if (!el.isConnected || el.offsetWidth < 30 || el.offsetHeight < 120) continue;
+        if (el.closest('.comfy-sidebar-comparison-overlay, .p-dialog, [role="dialog"], .comfy-modal, .comfy-menu')) continue;
+
+        if (seen.has(el)) continue;
+        seen.add(el);
+
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0 || rect.top > 150) continue;
+
+        // Left-docked panels (Icon bar or an open drawer on the left)
+        if (rect.left <= 100 && rect.right > 0 && rect.right < midX) {
+            leftPanels.push(el);
+        }
+        // Right-docked panels (Workflow Overview or right inspector drawers)
+        else if (rect.right >= winW - 80 && rect.left > midX && rect.left < winW) {
+            rightPanels.push(el);
+        }
+    }
+
+    return { leftPanels, rightPanels };
+}
+
 export function findActiveQueueIndicator() {
     const container = findTopbarContainer();
     if (!container) return null;
@@ -111,13 +182,11 @@ export function findOurSidebarButton() {
 }
 
 export function findStandardQueueButton() {
-    // 1. Try modern ComfyUI stable test-ids first
     const byTestId = document.querySelector('[data-testid="queue-tab-button"], [data-testid="job-history-tab-button"]');
     if (byTestId && !byTestId.id?.includes('classic-comfy-sidebar') && !byTestId.querySelector('.pi-images')) {
         return byTestId;
     }
 
-    // 2. Fallback to icon discovery
     for (const iconSelector of [".pi-history", ".pi-clock", ".pi-server", ".pi-list", ".pi-sliders-h", '[class*="lucide--history"]']) {
         const icon = document.querySelector(iconSelector);
         if (icon) {
@@ -126,7 +195,6 @@ export function findStandardQueueButton() {
         }
     }
 
-    // 3. Fallback to semantic labels
     const buttons = document.querySelectorAll('.comfyui-sidebar-tab, button, [role="tab"]');
     for (const btn of buttons) {
         const title = btn.title || btn.getAttribute('aria-label') || '';
@@ -208,4 +276,4 @@ export function centerAndSelectCanvasNode(nodeId) {
         return true;
     }
     return false;
-}
+}

js/comfy/layout.js

@@ -5,39 +5,59 @@ import {
     isPropertiesPanelOpen,
     findActiveQueueIndicator,
     findNativeExtensionsPanel,
-    findGraphButton
+    findGraphButton,
+    findPropertiesPanel
 } from "./adapter.js";
+import { isRuntimePreviewEnabled, setRuntimePreviewEnabled, setRuntimePreviewStateListener } from "../utils/comparison.js";
+
+// Listen for runtime preview state changes to keep button UI in sync
+setRuntimePreviewStateListener(() => {
+    syncRuntimePreviewButton();
+});
 
 const STYLE_ID = "comfy-sidebar-classic-layout-override";
 
 const CLASSIC_LAYOUT_CSS_MEDIA = `
+/* Neutralize the leftover floating shell box to prevent empty dark square artifacts */
 .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"]) {
+div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]),
+div.shadow-interface.py-1\\.75 {
     border: none !important;
     background: transparent !important;
     box-shadow: none !important;
 }
 
+/* Dock actionbar buttons in the topbar row with matching dark background and seamless border */
 [class*="actionbar"]:not(.actionbar),
 [class*="actionbar-buttons"],
 .actionbar-buttons {
     position: fixed !important;
-    top: 3px !important; 
-    right: 4px !important; 
+    top: 0 !important; 
+    right: 0 !important; 
     left: auto !important;
+    height: var(--topbar-height, 40px) !important;
     transform: none !important;
     z-index: 1010 !important;
-    background: transparent !important;
+    background: var(--comfy-menu-bg, #181818) !important;
     border: none !important;
+    border-bottom: 1px solid var(--interface-stroke, var(--border-color, rgba(255, 255, 255, 0.12))) !important;
     box-shadow: none !important;
-    padding: 0 !important;
+    border-radius: 0 !important;
+    padding: 0 8px !important;
     margin: 0 !important;
     display: flex !important;
     align-items: center !important;
+    box-sizing: border-box !important;
+}
+
+/* Constrain tabs boundary directly to the start of the action bar */
+.workflow-tabs-container {
+    padding-right: var(--actionbar-width, 240px) !important;
+    box-sizing: border-box !important;
 }
 
 .comfy-sidebar-extensions-override {
@@ -60,51 +80,6 @@ div.border-interface-stroke.rounded-lg:has([class*="actionbar-buttons"]) {
     display: inline-flex !important;
     align-items: center !important;
 }
-
-img[alt*="User Avatar"],
-img[alt*="user avatar"],
-button:has(img[alt*="User Avatar"]),
-[role="button"]:has(img[alt*="User Avatar"]),
-button:has(img[alt*="user avatar"]),
-[role="button"]:has(img[alt*="user avatar"]),
-.p-avatar,
-[data-pc-name="avatar"],
-button:has(.p-avatar),
-[role="button"]:has(.p-avatar),
-button:has([data-pc-name="avatar"]),
-[role="button"]:has([data-pc-name="avatar"]) {
-    display: none !important;
-}
-
-.p-tabview-nav-content,
-[class*="tabview"] {
-    padding-left: 150px !important;
-    padding-right: 580px !important; 
-}
-
-@media (max-width: 1599px) {
-    .p-tabview-nav-content,
-    [class*="tabview"] {
-        padding-left: 100px !important;
-        padding-right: 420px !important; 
-    }
-}
-
-@media (max-width: 1199px) {
-    .p-tabview-nav-content,
-    [class*="tabview"] {
-        padding-left: 40px !important;
-        padding-right: 280px !important; 
-    }
-}
-
-@media (max-width: 899px) {
-    .p-tabview-nav-content,
-    [class*="tabview"] {
-        padding-left: 10px !important;
-        padding-right: 180px !important; 
-    }
-}
 `;
 
 export function syncStockHistoryAndProgressSettings(enable) {
@@ -126,6 +101,249 @@ export function syncStockHistoryAndProgressSettings(enable) {
     try { window.dispatchEvent(new Event("storage")); } catch (e) {}
 }
 
+let savedButtonData = null;
+let domObserver = null;
+let syncScheduled = false;
+let actionbarResizeObserver = null;
+
+function isSidebarOnLeft() {
+    const sidebar = document.querySelector('.comfyui-sidebar, .comfy-sidebar, .sidebar, [class*="sidebar-nav"], [class*="sidebar"]');
+    if (!sidebar) return false;
+    return sidebar.getBoundingClientRect().left < window.innerWidth / 2;
+}
+
+function findSidebarBottomTarget(sidebar) {
+    if (!sidebar) return null;
+
+    const candidates = Array.from(sidebar.querySelectorAll('button, [role="button"], a, .comfyui-sidebar-tab, .comfyui-sidebar-item'));
+    const bottomBtn = candidates.find(el => {
+        const text = el.textContent?.trim().toLowerCase();
+        const title = (el.getAttribute('title') || el.getAttribute('aria-label') || '').toLowerCase();
+        return text === 'help' || text === 'console' || text === 'shortcuts' || text === 'settings' ||
+               title.includes('help') || title.includes('console') || title.includes('shortcuts') || title.includes('settings') ||
+               el.querySelector('[class*="help"], [class*="terminal"], [class*="keyboard"], [class*="settings"], [class*="gear"], .pi-cog, .pi-question');
+    });
+
+    return bottomBtn || null;
+}
+
+function stripBorderRadius(canvasMenu) {
+    if (!canvasMenu) return;
+    const elements = canvasMenu.querySelectorAll("button, [role='button'], div, i, span");
+    elements.forEach((el) => {
+        el.style.setProperty("border-radius", "0px", "important");
+    });
+}
+
+function syncCanvasMenuPlacement(mode) {
+    const HIDE_CANVAS_MENU_STYLE_ID = "comfy-sidebar-hide-canvas-menu-override";
+    let hideStyleEl = document.getElementById(HIDE_CANVAS_MENU_STYLE_ID);
+
+    if (mode === "Hide") {
+        if (!hideStyleEl) {
+            hideStyleEl = document.createElement("style");
+            hideStyleEl.id = HIDE_CANVAS_MENU_STYLE_ID;
+            hideStyleEl.textContent = `
+                .p-buttongroup.z-1200,
+                .p-buttongroup.bottom-0.right-0,
+                [class*="bottom-0"][class*="right-0"][class*="p-buttongroup"],
+                .p-buttongroup:has([class*="w-15"]),
+                .comfy-sidebar-unfloated-canvas-menu {
+                    display: none !important;
+                }
+            `;
+            document.head.appendChild(hideStyleEl);
+        }
+
+        // Return to original parent if it was docked, so the sidebar doesn't have an empty slot
+        const canvasMenu = document.querySelector('.comfy-sidebar-unfloated-canvas-menu');
+        if (canvasMenu && canvasMenu._originalParent) {
+            canvasMenu._originalParent.insertBefore(canvasMenu, canvasMenu._originalNextSibling || null);
+            canvasMenu.classList.remove("comfy-sidebar-unfloated-canvas-menu");
+            const elements = canvasMenu.querySelectorAll("button, [role='button'], div, i, span");
+            elements.forEach((el) => {
+                el.style.removeProperty("border-radius");
+            });
+        }
+        return;
+    }
+
+    if (hideStyleEl) {
+        hideStyleEl.remove();
+    }
+
+    if (mode === "Dock" || mode === true) {
+        const sidebar = document.querySelector('.comfyui-sidebar, .comfy-sidebar, .sidebar, [class*="sidebar-nav"], [class*="sidebar"]');
+        if (!sidebar) return;
+
+        const bottomTarget = findSidebarBottomTarget(sidebar);
+        const targetParent = bottomTarget ? bottomTarget.parentNode : sidebar;
+
+        // Find any floating toolbar on the canvas
+        const floatingMenu = document.querySelector(
+            '.p-buttongroup.z-1200:not(.comfy-sidebar-unfloated-canvas-menu), ' +
+            '.p-buttongroup.bottom-0.right-0:not(.comfy-sidebar-unfloated-canvas-menu), ' +
+            '[class*="bottom-0"][class*="right-0"][class*="p-buttongroup"]:not(.comfy-sidebar-unfloated-canvas-menu), ' +
+            '.p-buttongroup:has([class*="w-15"]):not(.comfy-sidebar-unfloated-canvas-menu)'
+        );
+
+        const existingDocked = document.querySelector('.comfy-sidebar-unfloated-canvas-menu');
+
+        // Prevent duplication when switching sidebar sides: drop stale docked bar if a fresh floating one appeared
+        if (floatingMenu && existingDocked && floatingMenu !== existingDocked) {
+            existingDocked.remove();
+        }
+
+        const canvasMenu = floatingMenu || existingDocked;
+        if (!canvasMenu) return;
+
+        if (canvasMenu.parentNode !== targetParent) {
+            if (!canvasMenu._originalParent) {
+                canvasMenu._originalParent = canvasMenu.parentNode;
+                canvasMenu._originalNextSibling = canvasMenu.nextSibling;
+            }
+
+            if (bottomTarget && bottomTarget.parentNode === targetParent) {
+                targetParent.insertBefore(canvasMenu, bottomTarget);
+            } else {
+                targetParent.appendChild(canvasMenu);
+            }
+            canvasMenu.classList.add("comfy-sidebar-unfloated-canvas-menu");
+
+            stripBorderRadius(canvasMenu);
+
+            if (!canvasMenu._clickGuardAttached) {
+                canvasMenu._clickGuardAttached = true;
+                const enforce = () => {
+                    requestAnimationFrame(() => stripBorderRadius(canvasMenu));
+                };
+                canvasMenu.addEventListener("click", enforce);
+                canvasMenu.addEventListener("pointerup", enforce);
+            }
+        } else {
+            stripBorderRadius(canvasMenu);
+        }
+    } else {
+        const canvasMenu = document.querySelector('.comfy-sidebar-unfloated-canvas-menu');
+        if (canvasMenu && canvasMenu._originalParent) {
+            canvasMenu._originalParent.insertBefore(canvasMenu, canvasMenu._originalNextSibling || null);
+            canvasMenu.classList.remove("comfy-sidebar-unfloated-canvas-menu");
+
+            const elements = canvasMenu.querySelectorAll("button, [role='button'], div, i, span");
+            elements.forEach((el) => {
+                el.style.removeProperty("border-radius");
+            });
+        }
+    }
+}
+
+// Tooltips: dynamic side calculation (right for left-sidebar, left for right-sidebar)
+function setupCanvasMenuTooltipRelocator() {
+    if (window._canvasTooltipRelocatorReady) return;
+    window._canvasTooltipRelocatorReady = true;
+
+    document.addEventListener("mouseenter", (e) => {
+        const targetBtn = e.target?.closest?.(
+            ".comfy-sidebar-unfloated-canvas-menu button, " +
+            ".comfy-sidebar-unfloated-canvas-menu [role='button'], " +
+            ".comfy-sidebar-unfloated-canvas-menu [data-pd-tooltip='true']"
+        );
+        if (!targetBtn) return;
+
+        const align = () => {
+            const tooltipId = targetBtn.$_ptooltipId || targetBtn.getAttribute("aria-describedby");
+            const tooltip = tooltipId ? document.getElementById(tooltipId) : document.querySelector(".p-tooltip:not(.p-tooltip-hidden)");
+            if (!tooltip) return;
+
+            const btnRect = targetBtn.getBoundingClientRect();
+            const tWidth = tooltip.offsetWidth || 80;
+            const tHeight = tooltip.offsetHeight || 28;
+            const onLeft = isSidebarOnLeft();
+
+            tooltip.classList.remove("p-tooltip-top", "p-tooltip-bottom", "p-tooltip-right", "p-tooltip-left");
+            tooltip.classList.add(onLeft ? "p-tooltip-right" : "p-tooltip-left");
+
+            const posX = onLeft ? Math.round(btnRect.right + 8) : Math.round(btnRect.left - tWidth - 8);
+            const posY = Math.round(btnRect.top + (btnRect.height - tHeight) / 2);
+
+            tooltip.style.setProperty("left", `${posX}px`, "important");
+            tooltip.style.setProperty("top", `${posY}px`, "important");
+            tooltip.style.setProperty("transform", "none", "important");
+        };
+
+        queueMicrotask(align);
+        requestAnimationFrame(align);
+    }, true);
+}
+
+// Popovers / Menus: positions popup on the screen side of the sidebar
+function setupCanvasMenuPopoverRelocator() {
+    if (window._canvasPopoverRelocatorReady) return;
+    window._canvasPopoverRelocatorReady = true;
+
+    document.addEventListener("click", (e) => {
+        const btn = e.target?.closest?.(".comfy-sidebar-unfloated-canvas-menu button, .comfy-sidebar-unfloated-canvas-menu [role='button']");
+        if (!btn) return;
+
+        const reposition = () => {
+            const popovers = document.querySelectorAll(".p-popover");
+            const sidebar = document.querySelector('.comfyui-sidebar, .comfy-sidebar, .sidebar, [class*="sidebar-nav"], [class*="sidebar"]');
+            if (!sidebar || !popovers.length) return;
+
+            const sidebarRect = sidebar.getBoundingClientRect();
+            const btnRect = btn.getBoundingClientRect();
+            const onLeft = sidebarRect.left < window.innerWidth / 2;
+
+            popovers.forEach((pop) => {
+                if (pop.style.display !== "none" && !pop.classList.contains("p-overlay-hidden")) {
+                    const popWidth = pop.offsetWidth || 160;
+                    const popHeight = pop.offsetHeight || 100;
+                    const maxTop = window.innerHeight - popHeight - 12;
+                    const topPos = Math.max(12, Math.min(maxTop, Math.round(btnRect.top)));
+
+                    const leftPos = onLeft
+                        ? Math.round(sidebarRect.right + 8)
+                        : Math.round(sidebarRect.left - popWidth - 8);
+
+                    pop.style.setProperty("left", `${leftPos}px`, "important");
+                    pop.style.setProperty("top", `${topPos}px`, "important");
+                    pop.style.setProperty("transform", "none", "important");
+                }
+            });
+        };
+
+        [0, 15, 40, 100].forEach((ms) => setTimeout(reposition, ms));
+    }, true);
+}
+
+function updateTopMetrics() {
+    const bar = document.querySelector('.actionbar-buttons, [class*="actionbar-buttons"]') || findTopbarContainer();
+    const tabsEl = document.querySelector('.workflow-tabs-container');
+    const topbar = tabsEl?.closest('header, .topbar, [class*="topbar"]') || tabsEl;
+
+    if (bar) {
+        const rect = bar.getBoundingClientRect();
+        const width = Math.ceil(rect.width);
+        if (width > 80 && width < window.innerWidth * 0.8) {
+            document.documentElement.style.setProperty('--actionbar-width', `${Math.round(width / 2)}px`);
+        }
+
+        if (window.ResizeObserver && !actionbarResizeObserver) {
+            actionbarResizeObserver = new ResizeObserver(() => {
+                updateTopMetrics();
+            });
+            actionbarResizeObserver.observe(bar);
+        }
+    }
+
+    if (topbar) {
+        const height = Math.round(topbar.getBoundingClientRect().height);
+        if (height > 20) {
+            document.documentElement.style.setProperty('--topbar-height', `${height}px`);
+        }
+    }
+}
+
 export function applyClassicLayout(enable, updateSetting = false) {
     let styleEl = document.getElementById(STYLE_ID);
     
@@ -143,8 +361,19 @@ export function applyClassicLayout(enable, updateSetting = false) {
             document.head.appendChild(styleEl);
         }
         styleEl.textContent = CLASSIC_LAYOUT_CSS_MEDIA;
+        updateTopMetrics();
+        window.removeEventListener("resize", updateTopMetrics);
+        window.addEventListener("resize", updateTopMetrics);
     } else {
         if (styleEl) styleEl.remove();
+        if (actionbarResizeObserver) {
+            actionbarResizeObserver.disconnect();
+            actionbarResizeObserver = null;
+        }
+        window.removeEventListener("resize", updateTopMetrics);
+        document.documentElement.style.removeProperty('--actionbar-width');
+        document.documentElement.style.removeProperty('--topbar-height');
+
         if (updateSetting) {
             if (app.extensionManager?.setting) {
                 app.extensionManager.setting.set("Comfy.Workflow.WorkflowTabsPosition", "Sidebar");
@@ -155,15 +384,45 @@ export function applyClassicLayout(enable, updateSetting = false) {
     }
 }
 
-let savedButtonData = null;
-let domObserver = null;
-let syncScheduled = false;
+function syncAvatarVisibility() {
+    const hideAvatar = app.ui?.settings?.getSettingValue("Comfy Sidebar.Hide Junk.Avatar") ?? false;
+    const STYLE_AVATAR_ID = "comfy-sidebar-hide-avatar-override";
+    let styleEl = document.getElementById(STYLE_AVATAR_ID);
+
+    if (hideAvatar) {
+        if (!styleEl) {
+            styleEl = document.createElement("style");
+            styleEl.id = STYLE_AVATAR_ID;
+            styleEl.textContent = `
+                img[alt*="User Avatar"],
+                img[alt*="user avatar"],
+                button:has(img[alt*="User Avatar"]),
+                [role="button"]:has(img[alt*="User Avatar"]),
+                button:has(img[alt*="user avatar"]),
+                [role="button"]:has(img[alt*="user avatar"]),
+                .p-avatar,
+                [data-pc-name="avatar"],
+                button:has(.p-avatar),
+                [role="button"]:has(.p-avatar),
+                button:has([data-pc-name="avatar"]),
+                [role="button"]:has([data-pc-name="avatar"]),
+                button:has([class*="lucide--user"]),
+                button:has(svg.lucide-user),
+                [data-testid="user-profile-button"] {
+                    display: none !important;
+                }
+            `;
+            document.head.appendChild(styleEl);
+        }
+    } else {
+        if (styleEl) styleEl.remove();
+    }
+}
 
 function updateSidebarTabsVisibility() {
     const sidebar = document.querySelector('.comfyui-sidebar, .comfy-sidebar, .sidebar, [class*="sidebar-nav"], [class*="sidebar"]');
     if (!sidebar) return;
 
-    // Use stable ComfyUI data-testid selectors first, with icon classes as safe fallback
     const tabSelectors = {
         "Assets": '[data-testid="assets-tab-button"], [class*="comfy--image-ai-edit"]',
         "Nodes": '[data-testid="node-library-tab-button"], [class*="comfy--node"]',
@@ -356,17 +615,111 @@ function syncActiveQueueIndicator(isClassicLayoutEnabled) {
     }
 }
 
+export function syncRuntimePreviewButton() {
+    const panel = findPropertiesPanel();
+    if (!panel) return;
+
+    let dock = panel.querySelector(".comfy-sidebar-runtime-preview-dock");
+    if (!dock) {
+        dock = document.createElement("div");
+        dock.className = "comfy-sidebar-runtime-preview-dock";
+        Object.assign(dock.style, {
+            position: "sticky",
+            bottom: "0px",
+            left: "0px",
+            width: "100%",
+            padding: "8px 12px",
+            boxSizing: "border-box",
+            background: "var(--comfy-menu-bg, #181818)",
+            borderTop: "1px solid var(--border-color, rgba(255, 255, 255, 0.12))",
+            zIndex: "20",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginTop: "auto"
+        });
+
+        const btn = document.createElement("button");
+        btn.className = "comfy-sidebar-runtime-preview-btn";
+        Object.assign(btn.style, {
+            width: "100%",
+            height: "34px",
+            borderRadius: "6px",
+            cursor: "pointer",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "8px",
+            fontSize: "12px",
+            fontWeight: "600",
+            fontFamily: "sans-serif",
+            transition: "all 0.15s ease",
+            outline: "none"
+        });
+
+        btn.onclick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const nextState = !isRuntimePreviewEnabled();
+            setRuntimePreviewEnabled(nextState, true);
+        };
+
+        dock.appendChild(btn);
+        panel.appendChild(dock);
+    }
+
+    const btn = dock.querySelector(".comfy-sidebar-runtime-preview-btn");
+    if (btn) {
+        const active = isRuntimePreviewEnabled();
+
+        const lucidePlay = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><polygon points="6 3 20 12 6 21 6 3"/></svg>`;
+        const lucideEye = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.7;flex-shrink:0;"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`;
+        const lucideSquareCheck = `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/></svg>`;
+        const lucideSquare = `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.5;flex-shrink:0;"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`;
+
+        if (active) {
+            btn.style.background = "rgba(59, 130, 246, 0.18)";
+            btn.style.border = "1px solid #3b82f6";
+            btn.style.color = "#93c5fd";
+            btn.style.boxShadow = "0 0 8px rgba(59, 130, 246, 0.35)";
+            btn.innerHTML = `<span style="display:flex;align-items:center;gap:7px;">${lucidePlay}<span>Runtime Preview</span></span>${lucideSquareCheck}`;
+            btn.title = "Runtime Preview is ON (auto-tracking live generation). Click to turn OFF.";
+        } else {
+            btn.style.background = "rgba(255, 255, 255, 0.05)";
+            btn.style.border = "1px solid var(--border-color, rgba(255, 255, 255, 0.15))";
+            btn.style.color = "var(--desc-color, #aaa)";
+            btn.style.boxShadow = "none";
+            btn.innerHTML = `<span style="display:flex;align-items:center;gap:7px;">${lucideEye}<span>Runtime Preview</span></span>${lucideSquare}`;
+            btn.title = "Click to turn ON Runtime Preview (auto-focus live generation).";
+        }
+    }
+}
+
 export function syncClassicLayout() {
     if (domObserver) domObserver.disconnect();
 
     try {
         const isClassicLayoutEnabled = app.ui?.settings?.getSettingValue("Comfy Sidebar.Comfy Layout") ?? false;
+        let canvasControlsMode = app.ui?.settings?.getSettingValue("Comfy Sidebar.Hide Junk.Floating Canvas Controls");
+        if (canvasControlsMode === undefined || canvasControlsMode === null) {
+            const legacyDock = app.ui?.settings?.getSettingValue("Comfy Sidebar.Dock Canvas Controls");
+            canvasControlsMode = legacyDock ? "Dock" : "Default";
+        } else if (typeof canvasControlsMode === "boolean") {
+            canvasControlsMode = canvasControlsMode ? "Dock" : "Default";
+        }
+
+        if (isClassicLayoutEnabled) {
+            updateTopMetrics();
+        }
 
         syncGraphButton();
+        syncAvatarVisibility();
+        syncCanvasMenuPlacement(canvasControlsMode);
         syncExtensionsPanel(isClassicLayoutEnabled);
         syncPropertiesButton(isClassicLayoutEnabled);
         syncActiveQueueIndicator(isClassicLayoutEnabled);
         updateSidebarTabsVisibility();
+        syncRuntimePreviewButton();
 
     } catch (err) {
         console.error("Comfy Sidebar: Error inside layout sync routine:", err);
@@ -381,6 +734,9 @@ export function syncClassicLayout() {
 }
 
 export function setupPropertiesPanelToggleFix() {
+    setupCanvasMenuTooltipRelocator();
+    setupCanvasMenuPopoverRelocator();
+
     if (!document.getElementById("comfy-sidebar-layout-fix-styles")) {
         const style = document.createElement("style");
         style.id = "comfy-sidebar-layout-fix-styles";
@@ -409,6 +765,187 @@ export function setupPropertiesPanelToggleFix() {
             .comfy-sidebar-custom-properties-toggle > span.comfy-sidebar-error-dot {
                 display: inline-flex !important;
             }
+
+            /* Tooltip positioning: suppress top tooltip flash and show cleanly on left/right */
+            body:has(.comfy-sidebar-unfloated-canvas-menu :hover) .p-tooltip-top {
+                visibility: hidden !important;
+            }
+            body:has(.comfy-sidebar-unfloated-canvas-menu :hover) .p-tooltip-left,
+            body:has(.comfy-sidebar-unfloated-canvas-menu :hover) .p-tooltip-right {
+                visibility: visible !important;
+                transform: none !important;
+            }
+
+            /* Docked canvas menu: vertical containment */
+            .comfy-sidebar-unfloated-canvas-menu {
+                position: static !important;
+                bottom: auto !important;
+                right: auto !important;
+                left: auto !important;
+                top: auto !important;
+                transform: none !important;
+                z-index: 10 !important;
+                flex-direction: column !important;
+                background: transparent !important;
+                border: none !important;
+                border-radius: 0 !important;
+                box-shadow: none !important;
+                padding: 0 !important;
+                margin: 0 !important;
+                width: 100% !important;
+                max-width: 100% !important;
+                min-width: 0 !important;
+                overflow: hidden !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                gap: 0 !important;
+                box-sizing: border-box !important;
+            }
+
+            /* Strict containment: stops all children from expanding sidebar width */
+            .comfy-sidebar-unfloated-canvas-menu,
+            .comfy-sidebar-unfloated-canvas-menu * {
+                min-width: 0 !important;
+                box-sizing: border-box !important;
+            }
+
+            /* Unconditional zero radius override across entire container and all states */
+            html body .comfy-sidebar-unfloated-canvas-menu,
+            html body .comfy-sidebar-unfloated-canvas-menu *,
+            html body .comfy-sidebar-unfloated-canvas-menu *:hover,
+            html body .comfy-sidebar-unfloated-canvas-menu *:focus,
+            html body .comfy-sidebar-unfloated-canvas-menu *:active,
+            html body .comfy-sidebar-unfloated-canvas-menu button,
+            html body .comfy-sidebar-unfloated-canvas-menu button:hover,
+            html body .comfy-sidebar-unfloated-canvas-menu button:focus,
+            html body .comfy-sidebar-unfloated-canvas-menu button:active,
+            html body .comfy-sidebar-unfloated-canvas-menu [class*="hover:rounded"]:hover,
+            html body .comfy-sidebar-unfloated-canvas-menu .hover\\:rounded-lg\\!:hover,
+            html body .comfy-sidebar-unfloated-canvas-menu div,
+            html body .comfy-sidebar-unfloated-canvas-menu div:hover {
+                border-radius: 0 !important;
+            }
+
+            /* Full-width rectangular button containers matching stock Help/Console */
+            .comfy-sidebar-unfloated-canvas-menu > button,
+            .comfy-sidebar-unfloated-canvas-menu > [role="button"],
+            .comfy-sidebar-unfloated-canvas-menu > div {
+                width: 100% !important;
+                max-width: 100% !important;
+                height: 38px !important;
+                min-height: 38px !important;
+                border-radius: 0 !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                background: transparent !important;
+            }
+
+            /* Full rectangular hover background across the full sidebar width */
+            .comfy-sidebar-unfloated-canvas-menu > button:hover,
+            .comfy-sidebar-unfloated-canvas-menu > [role="button"]:hover,
+            .comfy-sidebar-unfloated-canvas-menu > div:hover,
+            .comfy-sidebar-unfloated-canvas-menu button:hover {
+                background: var(--interface-button-hover-surface, rgba(255, 255, 255, 0.08)) !important;
+                border-radius: 0 !important;
+            }
+
+            /* Neutralize CanvasModeSelector's inner selected background and padding */
+            .comfy-sidebar-unfloated-canvas-menu [class*="bg-interface-panel-selected-surface"],
+            .comfy-sidebar-unfloated-canvas-menu [class*="group-hover:bg-interface-button-hover-surface"] {
+                border-radius: 0 !important;
+                background: transparent !important;
+                padding: 0 !important;
+            }
+
+            /* Compact CanvasModeSelector padding and chevrons to eliminate extra sidebar width */
+            .comfy-sidebar-unfloated-canvas-menu [class*="pr-0.5"],
+            .comfy-sidebar-unfloated-canvas-menu div.flex.items-center {
+                padding: 0 !important;
+                gap: 2px !important;
+                justify-content: center !important;
+                width: 100% !important;
+            }
+
+            /* Compact the Zoom button: strip w-15 (60px) and px-2 padding */
+            .comfy-sidebar-unfloated-canvas-menu [class*="w-15"],
+            .comfy-sidebar-unfloated-canvas-menu .w-15 {
+                width: 100% !important;
+                max-width: 100% !important;
+            }
+            .comfy-sidebar-unfloated-canvas-menu [class*="px-2"],
+            .comfy-sidebar-unfloated-canvas-menu span.px-2 {
+                padding: 0 !important;
+                gap: 2px !important;
+            }
+
+            /* Compact down-arrow chevrons */
+            .comfy-sidebar-unfloated-canvas-menu [class*="chevron-down"],
+            .comfy-sidebar-unfloated-canvas-menu [class*="pr-1.5"] {
+                padding: 0 !important;
+                width: 12px !important;
+                height: 12px !important;
+            }
+
+            .comfy-sidebar-unfloated-canvas-menu button,
+            .comfy-sidebar-unfloated-canvas-menu [role="button"] {
+                border-radius: 0 !important;
+                background: transparent !important;
+                font-size: 11px !important;
+                width: 100% !important;
+                height: 100% !important;
+            }
+
+            /* Exact stock grey color #8a8a8a without opacity */
+            .comfy-sidebar-unfloated-canvas-menu button,
+            .comfy-sidebar-unfloated-canvas-menu [role="button"],
+            .comfy-sidebar-unfloated-canvas-menu span,
+            .comfy-sidebar-unfloated-canvas-menu svg {
+                color: #8a8a8a !important;
+                opacity: 1 !important;
+                transition: color 0.15s ease !important;
+            }
+
+            .comfy-sidebar-unfloated-canvas-menu button:hover,
+            .comfy-sidebar-unfloated-canvas-menu [role="button"]:hover,
+            .comfy-sidebar-unfloated-canvas-menu button:hover span,
+            .comfy-sidebar-unfloated-canvas-menu [role="button"]:hover span,
+            .comfy-sidebar-unfloated-canvas-menu button:hover svg,
+            .comfy-sidebar-unfloated-canvas-menu [role="button"]:hover svg {
+                color: #ffffff !important;
+            }
+
+            /* Consistent, uniform 38px horizontal separators */
+            .comfy-sidebar-unfloated-canvas-menu::before,
+            .comfy-sidebar-unfloated-canvas-menu::after,
+            .comfy-sidebar-unfloated-canvas-menu .p-divider,
+            .comfy-sidebar-unfloated-canvas-menu [class*="divider"],
+            .comfy-sidebar-unfloated-canvas-menu hr,
+            .comfy-sidebar-unfloated-canvas-menu > div:not(:has(*)):not(button),
+            .comfy-sidebar-unfloated-canvas-menu > span:not(:has(*)):not(button),
+            .comfy-sidebar-unfloated-canvas-menu [class*="w-px"],
+            .comfy-sidebar-unfloated-canvas-menu [class*="w-\[1px\]"] {
+                content: "" !important;
+                width: 38px !important;
+                height: 1px !important;
+                min-height: 1px !important;
+                max-height: 1px !important;
+                min-width: 38px !important;
+                max-width: 38px !important;
+                border: none !important;
+                background: var(--interface-stroke, var(--border-color, rgba(255, 255, 255, 0.15))) !important;
+                margin: 4px auto !important;
+                display: block !important;
+                position: static !important;
+            }
+
+            .comfy-sidebar-unfloated-canvas-menu .p-divider::before,
+            .comfy-sidebar-unfloated-canvas-menu [class*="divider"]::before {
+                display: none !important;
+            }
         `;
         document.head.appendChild(style);
     }
@@ -454,12 +991,25 @@ export function setupPropertiesPanelToggleFix() {
 }
 
 export function destroyLayoutFix() {
+    syncCanvasMenuPlacement("Default");
+    const hideCanvasStyle = document.getElementById("comfy-sidebar-hide-canvas-menu-override");
+    if (hideCanvasStyle) hideCanvasStyle.remove();
     if (domObserver) {
         domObserver.disconnect();
         domObserver = null;
     }
+    if (actionbarResizeObserver) {
+        actionbarResizeObserver.disconnect();
+        actionbarResizeObserver = null;
+    }
+    window.removeEventListener("resize", updateTopMetrics);
+    document.documentElement.style.removeProperty('--actionbar-width');
+    document.documentElement.style.removeProperty('--topbar-height');
+
     const styleEl = document.getElementById(STYLE_ID);
     if (styleEl) styleEl.remove();
     const fixStyles = document.getElementById("comfy-sidebar-layout-fix-styles");
     if (fixStyles) fixStyles.remove();
-}
+    const avatarStyles = document.getElementById("comfy-sidebar-hide-avatar-override");
+    if (avatarStyles) avatarStyles.remove();
+}

js/comfy/nodes.js

@@ -132,17 +132,24 @@ export function setupVueNodeObserver() {
     };
 }
 
+function getSelectedCanvasNodes() {
+    const canvas = app.canvas;
+    if (!canvas) return [];
+    const raw = canvas.selected_nodes;
+    if (raw instanceof Map || raw instanceof Set) {
+        return Array.from(raw.values());
+    }
+    if (Array.isArray(raw)) return raw;
+    if (raw && typeof raw === "object") return Object.values(raw);
+    if (canvas.current_active_node) return [canvas.current_active_node];
+    return [];
+}
+
 export function toggleIgnoreActiveNode(onModified) {
     const canvas = app.canvas;
     if (!canvas) return;
     
-    let nodes = [];
-    if (canvas.selected_nodes && Object.keys(canvas.selected_nodes).length > 0) {
-        nodes = Object.values(canvas.selected_nodes);
-    } else if (canvas.current_active_node) {
-        nodes = [canvas.current_active_node];
-    }
-    
+    const nodes = getSelectedCanvasNodes();
     if (nodes.length === 0) return;
     
     nodes.forEach(node => {

js/core/promptState.js

@@ -42,6 +42,7 @@ export function activatePrompt(state, patch = {}) {
     state.rendered = false;
     state.startTime = state.startTime || Date.now();
     state.duration = null;
+    state._hasValidatedIntermediates = true; // New live prompt; files are fresh
     if (patch.workflow) state.workflow = patch.workflow;
     if (patch.activeNodeName !== undefined) state.activeNodeName = patch.activeNodeName;
     if (patch.nodeTitles) Object.assign(state.nodeTitles, patch.nodeTitles);
@@ -58,10 +59,14 @@ export function updatePromptProgress(state, progress, activeNodeName = null) {
 }
 
 export function finalizePrompt(state, targetStatus, patch = {}) {
-    revokePromptBlobs(state);
+    // Only revoke blobs if not cancelled; preserve the preview so the user can inspect the cancelled step
+    if (targetStatus !== PromptStatus.CANCELLED && state.status !== PromptStatus.CANCELLED) {
+        revokePromptBlobs(state);
+    }
     state.status = targetStatus;
     state.progressText = "";
     state.rendered = false;
+    state._hasValidatedIntermediates = true; // Live session generation; files are fresh
     state.endTime = patch.endTime || Date.now();
     if (state.startTime) {
         state.duration = (state.endTime - state.startTime) / 1000;

js/queue/executionTracker.js

@@ -5,7 +5,7 @@ import { PromptStatus } from "../core/constants.js";
 import { createPromptState, activatePrompt, updatePromptProgress } from "../core/promptState.js";
 import { syncQueue, concludeRun, initSessionAndHistory, clearCancelledOrFailed } from "./queueService.js";
 import { findImagesInOutputs, findTextsInOutputs } from "../utils/utils.js";
-import { updateActiveComparisonPreview } from "../utils/comparison.js";
+import { updateActiveComparisonPreview, isRuntimePreviewEnabled, focusRuntimePreviewTarget, getActiveComparisonViewer, showFullscreenPreview } from "../utils/comparison.js";
 
 export function setupExecutionTracker(onTargetedProgressUpdate) {
     const onStatus = () => syncQueue();
@@ -45,6 +45,10 @@ export function setupExecutionTracker(onTargetedProgressUpdate) {
             store.setPrompt(pid, newState);
         }
 
+        if (isRuntimePreviewEnabled()) {
+            focusRuntimePreviewTarget();
+        }
+
         syncQueue();
     };
 
@@ -92,6 +96,11 @@ export function setupExecutionTracker(onTargetedProgressUpdate) {
             const prompt = activeTasks[0];
             const newBlobUrl = URL.createObjectURL(e.detail);
 
+            // Clean up the previous unreferenced blob immediately to prevent browser memory leaks
+            if (prompt._oldPreviewBlobUrl && prompt._oldPreviewBlobUrl !== prompt._previewBlobUrl) {
+                try { URL.revokeObjectURL(prompt._oldPreviewBlobUrl); } catch (_) {}
+            }
+
             prompt._oldPreviewBlobUrl = prompt._previewBlobUrl;
             prompt._previewBlobUrl = newBlobUrl;
             prompt.images = [{ url: newBlobUrl }];
@@ -100,6 +109,11 @@ export function setupExecutionTracker(onTargetedProgressUpdate) {
             // Update live fullscreen preview if currently open
             updateActiveComparisonPreview(prompt.pid, newBlobUrl);
 
+            // If Runtime Preview mode is enabled but the overlay was closed, auto-open it
+            if (isRuntimePreviewEnabled() && !getActiveComparisonViewer()) {
+                showFullscreenPreview([newBlobUrl], false, prompt.pid);
+            }
+
             // Update the active card in the sidebar
             if (typeof onTargetedProgressUpdate === "function") {
                 onTargetedProgressUpdate(prompt.pid, prompt.progress, prompt.activeNodeName);
@@ -118,7 +132,7 @@ export function setupExecutionTracker(onTargetedProgressUpdate) {
                 prompt.images = nodeImgs;
                 // If fullscreen is open, smoothly transition to the final saved image
                 const finalImg = nodeImgs[0];
-                const finalSrc = finalImg.url || (window.location.origin + `/view?filename=${encodeURIComponent(finalImg.filename)}&type=${finalImg.type || 'output'}&subfolder=${encodeURIComponent(finalImg.subfolder || '')}`);
+                const finalSrc = finalImg.url || (window.location.origin + `/view?filename=${encodeURIComponent(finalImg.filename)}&type=${finalImg.type || 'output'}&subfolder=${encodeURIComponent(finalImg.subfolder || '')}&rand=${encodeURIComponent(pid)}`);
                 updateActiveComparisonPreview(pid, finalSrc);
             }
             const nodeTexts = findTextsInOutputs({ [e.detail.node]: e.detail.output }, prompt.workflow);
@@ -133,7 +147,10 @@ export function setupExecutionTracker(onTargetedProgressUpdate) {
         }
     };
 
-    const onExecutionSuccess = (e) => concludeRun(e.detail.prompt_id, PromptStatus.COMPLETED);
+    const onExecutionSuccess = (e) => {
+        const pid = e.detail?.prompt_id;
+        if (pid) concludeRun(pid, PromptStatus.COMPLETED);
+    };
     const onExecutionError = (e) => {
         const pid = e.detail?.prompt_id;
         const nodeId = e.detail?.node_id;
@@ -142,7 +159,7 @@ export function setupExecutionTracker(onTargetedProgressUpdate) {
             prompt.activeNodeId = String(nodeId);
             store.updatePrompt(String(pid), prompt);
         }
-        concludeRun(e.detail.prompt_id, PromptStatus.ERROR);
+        if (pid) concludeRun(pid, PromptStatus.ERROR);
     };
     const onExecutionInterrupted = () => {
         store.getAllPrompts()

js/queue/queueService.js

@@ -104,7 +104,8 @@ export async function syncQueue() {
             if (prompt.status === PromptStatus.PENDING && !pendingIds.has(prompt.pid)) {
                 store.deletePrompt(prompt.pid);
             } else if (prompt.status === PromptStatus.ACTIVE && !runningIds.has(prompt.pid)) {
-                concludeRun(prompt.pid, PromptStatus.CANCELLED);
+                // Do not prematurely mark as CANCELLED; let concludeRun verify via /history
+                concludeRun(prompt.pid, PromptStatus.COMPLETED);
             }
         }
 

js/sidebar.js

@@ -44,6 +44,12 @@ function registerSettings() {
         type: "boolean",
         defaultValue: false
     });
+    app.ui.settings.addSetting({
+        id: "Comfy Sidebar.Permanent Delete on Disk Deletion",
+        name: "Permanently delete files on disk deletion (bypasses Recycle Bin / Trash)",
+        type: "boolean",
+        defaultValue: false
+    });
 
     const sidebarTabs = ["Assets", "Nodes", "Models", "Workflows", "Apps", "Templates"];
     sidebarTabs.forEach(tab => {
@@ -81,6 +87,27 @@ function registerSettings() {
         }
     });
 
+    app.ui.settings.addSetting({
+        id: "Comfy Sidebar.Hide Junk.Avatar",
+        name: "Hide Avatar",
+        type: "boolean",
+        defaultValue: false,
+        onChange: () => {
+            setTimeout(() => { syncClassicLayout(); }, 0);
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "Comfy Sidebar.Hide Junk.Floating Canvas Controls",
+        name: "Floating Canvas Controls",
+        type: "combo",
+        options: ["Default", "Dock", "Hide"],
+        defaultValue: "Default",
+        onChange: () => {
+            setTimeout(() => { syncClassicLayout(); }, 0);
+        }
+    });
+
     app.ui.settings.addSetting({
         id: SettingIds.CLASSIC_LAYOUT,
         name: "Places the controls and the open workflow tabs on a single unified top bar",

js/ui/cardRenderer.js

@@ -8,6 +8,7 @@ import { getRunOutputs, extractWorkflowFromPng, isImageFormat } from "../utils/u
 import { showFullscreenPreview } from "../utils/comparison.js";
 import { stopAllAudioPlayback } from "./audioController.js";
 import { deleteHistoryItem, cancelPendingTask, interruptActive } from "../queue/queueService.js";
+import { showNotification } from "../utils/nodeRenumber.js";
 
 export const cardPool = new Map();
 
@@ -31,6 +32,8 @@ export function syncCardButtonVisibility(cardObj, state) {
         if (cardObj.leftHoverPanel) cardObj.leftHoverPanel.style.removeProperty("display");
     }
 
+    const randParam = state?.pid ? `&rand=${encodeURIComponent(state.pid)}` : "";
+
     // Check if the card has an actual verified file saved on disk
     const hasRealDiskFiles = state.images && state.images.length > 0 && 
         state.images.some(img => img.filename && !img.isFallback && (!img.url || !img.url.startsWith("blob:")));
@@ -47,7 +50,7 @@ export function syncCardButtonVisibility(cardObj, state) {
                 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.href = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}${randParam}`;
                     a.download = img.filename || "output";
                     a.click();
                 });
@@ -64,7 +67,7 @@ export function syncCardButtonVisibility(cardObj, state) {
             cardObj.btnCopy.style.display = "inline-flex";
             cardObj.btnCopy.onclick = async (ev) => {
                 ev.stopPropagation();
-                const src = currentImg.url ? currentImg.url : `/view?filename=${encodeURIComponent(currentImg.filename)}&type=${currentImg.type || 'output'}&subfolder=${encodeURIComponent(currentImg.subfolder || '')}`;
+                const src = currentImg.url ? currentImg.url : `/view?filename=${encodeURIComponent(currentImg.filename)}&type=${currentImg.type || 'output'}&subfolder=${encodeURIComponent(currentImg.subfolder || '')}${randParam}`;
                 const success = await copyImageToClipboard(src);
                 if (success) {
                     cardObj.btnCopy.className = "pi pi-check comfy-sidebar-card-action-btn";
@@ -88,7 +91,7 @@ export function syncCardButtonVisibility(cardObj, state) {
                 ev.stopPropagation();
                 let wf = state.workflow;
                 if (!wf && currentImg) {
-                    const src = currentImg.url ? currentImg.url : `/view?filename=${encodeURIComponent(currentImg.filename)}&type=${currentImg.type || 'output'}&subfolder=${encodeURIComponent(currentImg.subfolder || '')}`;
+                    const src = currentImg.url ? currentImg.url : `/view?filename=${encodeURIComponent(currentImg.filename)}&type=${currentImg.type || 'output'}&subfolder=${encodeURIComponent(currentImg.subfolder || '')}${randParam}`;
                     wf = await extractWorkflowFromPng(src);
                     if (wf) state.workflow = wf;
                 }
@@ -110,7 +113,6 @@ export function syncCardButtonVisibility(cardObj, state) {
     }
 
     if (cardObj.btnDel) {
-        // Always show the delete button so cards can be cleared from history
         cardObj.btnDel.style.removeProperty("display");
         cardObj.btnDel.style.display = "inline-flex";
 
@@ -124,7 +126,6 @@ export function syncCardButtonVisibility(cardObj, state) {
     }
 
     if (cardObj.btnFocus) {
-        // Focus the image's node, or the node where the workflow stopped/errored
         const nodeId = (currentImg ? findNodeIdForImage(state, currentImg) : null) || state.activeNodeId;
         if (nodeId) {
             cardObj.btnFocus.style.removeProperty("display");
@@ -141,53 +142,123 @@ export function syncCardButtonVisibility(cardObj, state) {
 
     if (cardObj.leftHoverBtn) {
         const outputs = getRunOutputs(state.nodeOutputs, state.workflow);
-        const validOutputs = outputs.filter(o => o.images && o.images.length > 0);
+        const validOutputs = outputs
+            .map(o => ({
+                ...o,
+                images: (o.images || []).filter(img => img && img.filename && !img.isFallback)
+            }))
+            .filter(o => o.images.length > 0);
 
         const primarySignatures = new Set((state.images || []).map(i => `${i.subfolder || ""}/${i.filename}`));
         const distinctOutputs = [];
 
         for (const out of validOutputs) {
-            const hasNewImage = out.images.some(img => !primarySignatures.has(`${img.subfolder || ""}/${img.filename}`));
-            if (hasNewImage) {
-                distinctOutputs.push(out);
+            const distinctImages = out.images.filter(img => !primarySignatures.has(`${img.subfolder || ""}/${img.filename}`));
+            if (distinctImages.length > 0) {
+                distinctOutputs.push({ ...out, images: distinctImages });
             }
         }
 
-        // Show intermediate button if run completed with multiple outputs, or if stopped with saved outputs
         const hasIntermediates = (validOutputs.length > 1 && distinctOutputs.length > 0) || 
             (state.status !== PromptStatus.COMPLETED && validOutputs.length > 0);
 
-        if (hasIntermediates) {
-            // Check if intermediate files still exist on disk
-            for (const out of distinctOutputs) {
-                for (const img of out.images) {
-                    const src = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
-                    if (!src.startsWith("blob:")) {
-                        fetch(src, { method: "HEAD" }).then(res => {
-                            if (res.status === 404) {
-                                const liveState = store.getPrompt(state.pid);
-                                if (liveState && liveState.nodeOutputs) {
-                                    removeImageFromNodeOutputs(liveState.nodeOutputs, img);
-                                    store.updatePrompt(liveState.pid, liveState);
-                                    syncCardButtonVisibility(cardObj, liveState);
+        if (!hasIntermediates) {
+            cardObj.leftHoverBtn.style.setProperty("display", "none", "important");
+        } else {
+            // If already verified (or freshly generated), display button immediately
+            if (state._hasValidatedIntermediates) {
+                cardObj.leftHoverBtn.style.removeProperty("display");
+                cardObj.leftHoverBtn.style.display = "inline-flex";
+            } else {
+                // Old restored card: keep hidden by default while stealthily testing files
+                cardObj.leftHoverBtn.style.setProperty("display", "none", "important");
+
+                if (!cardObj._isCheckingIntermediates) {
+                    cardObj._isCheckingIntermediates = true;
+
+                    const checkPromises = [];
+                    const missingImages = [];
+
+                    for (const out of distinctOutputs) {
+                        for (const img of out.images) {
+                            if (!img.filename || (img.url && img.url.startsWith("blob:"))) continue;
+                            const src = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}${randParam}`;
+                            checkPromises.push(
+                                fetch(src, { method: "HEAD" })
+                                    .then(res => {
+                                        if (res.status === 404) {
+                                            missingImages.push(img);
+                                        }
+                                    })
+                                    .catch(() => {
+                                        missingImages.push(img);
+                                    })
+                            );
+                        }
+                    }
+
+                    const finalizeCheck = () => {
+                        cardObj._isCheckingIntermediates = false;
+                        const liveState = store.getPrompt(state.pid) || state;
+                        liveState._hasValidatedIntermediates = true;
+
+                        if (missingImages.length > 0 && liveState && liveState.nodeOutputs) {
+                            for (const img of missingImages) {
+                                removeImageFromNodeOutputs(liveState.nodeOutputs, img);
+                            }
+                            for (const nodeId in liveState.nodeOutputs) {
+                                const nodeVal = liveState.nodeOutputs[nodeId];
+                                if (nodeVal && typeof nodeVal === "object") {
+                                    const hasAny = Object.values(nodeVal).some(v => Array.isArray(v) ? v.length > 0 : Boolean(v));
+                                    if (!hasAny) {
+                                        delete liveState.nodeOutputs[nodeId];
+                                    }
                                 }
                             }
-                        }).catch(() => {});
+                            store.updatePrompt(liveState.pid, liveState);
+                        }
+
+                        const curOutputs = getRunOutputs(liveState.nodeOutputs, liveState.workflow);
+                        const curValid = curOutputs
+                            .map(o => ({
+                                ...o,
+                                images: (o.images || []).filter(i => i && i.filename && !i.isFallback)
+                            }))
+                            .filter(o => o.images.length > 0);
+                        const curDistinct = curValid.filter(o => o.images.some(i => !primarySignatures.has(`${i.subfolder || ""}/${i.filename}`)));
+                        const stillHas = (curValid.length > 1 && curDistinct.length > 0) || 
+                            (liveState.status !== PromptStatus.COMPLETED && curValid.length > 0);
+
+                        if (stillHas) {
+                            cardObj.leftHoverBtn.style.removeProperty("display");
+                            cardObj.leftHoverBtn.style.display = "inline-flex";
+                        } else {
+                            cardObj.leftHoverBtn.style.setProperty("display", "none", "important");
+                        }
+                    };
+
+                    if (checkPromises.length > 0) {
+                        Promise.all(checkPromises).then(finalizeCheck).catch(finalizeCheck);
+                    } else {
+                        finalizeCheck();
                     }
                 }
             }
 
-            cardObj.leftHoverBtn.style.removeProperty("display");
-            cardObj.leftHoverBtn.style.display = "inline-flex";
-
             cardObj.leftHoverBtn.onclick = async (ev) => {
                 ev.stopPropagation();
 
-                // On click: verify distinct outputs still exist before opening
                 const liveState = store.getPrompt(state.pid) || state;
                 const curOutputs = getRunOutputs(liveState.nodeOutputs, liveState.workflow);
+                const curValid = curOutputs
+                    .map(o => ({
+                        ...o,
+                        images: (o.images || []).filter(i => i && i.filename && !i.isFallback)
+                    }))
+                    .filter(o => o.images.length > 0);
+
                 const primSigs = new Set((liveState.images || []).map(i => `${i.subfolder || ""}/${i.filename}`));
-                const curDistinct = curOutputs.filter(o => o.images && o.images.some(img => !primSigs.has(`${img.subfolder || ""}/${img.filename}`)));
+                const curDistinct = curValid.filter(o => o.images.some(img => !primSigs.has(`${img.subfolder || ""}/${img.filename}`)));
 
                 if (curDistinct.length === 0) {
                     cardObj.leftHoverBtn.style.setProperty("display", "none", "important");
@@ -197,7 +268,8 @@ export function syncCardButtonVisibility(cardObj, state) {
                 let anyMissing = false;
                 for (const out of curDistinct) {
                     for (const img of out.images) {
-                        const src = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
+                        if (primSigs.has(`${img.subfolder || ""}/${img.filename}`)) continue;
+                        const src = img.url ? img.url : `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}${randParam}`;
                         if (!src.startsWith("blob:")) {
                             try {
                                 const res = await fetch(src, { method: "HEAD" });
@@ -211,12 +283,23 @@ export function syncCardButtonVisibility(cardObj, state) {
                 }
 
                 if (anyMissing) {
+                    for (const nodeId in liveState.nodeOutputs) {
+                        const nodeVal = liveState.nodeOutputs[nodeId];
+                        if (nodeVal && typeof nodeVal === "object") {
+                            const hasAny = Object.values(nodeVal).some(v => Array.isArray(v) ? v.length > 0 : Boolean(v));
+                            if (!hasAny) {
+                                delete liveState.nodeOutputs[nodeId];
+                            }
+                        }
+                    }
                     store.updatePrompt(liveState.pid, liveState);
                     syncCardButtonVisibility(cardObj, liveState);
-                    const remaining = getRunOutputs(liveState.nodeOutputs, liveState.workflow)
-                        .filter(o => o.images && o.images.some(img => !primSigs.has(`${img.subfolder || ""}/${img.filename}`)));
+                    const remainingOutputs = getRunOutputs(liveState.nodeOutputs, liveState.workflow);
+                    const remaining = remainingOutputs
+                        .map(o => ({ ...o, images: (o.images || []).filter(i => i && i.filename && !i.isFallback) }))
+                        .filter(o => o.images.some(img => !primSigs.has(`${img.subfolder || ""}/${img.filename}`)));
                     if (remaining.length === 0) {
-                        return; // All intermediate outputs were wiped; button is now hidden
+                        return;
                     }
                 }
 
@@ -228,8 +311,6 @@ export function syncCardButtonVisibility(cardObj, state) {
                 }
                 store.openOutputsSubmenu(liveState.pid);
             };
-        } else {
-            cardObj.leftHoverBtn.style.setProperty("display", "none", "important");
         }
     }
 }
@@ -245,10 +326,10 @@ export function updateCardProgressTargeted(cardObj, progress, activeNodeName, sh
         cardObj.statusText.textContent = `${nodeText} ${progress}%`;
     }
 
-    // Fast-path: update live preview image directly on active card
     if (state && state.images && state.images.length > 0) {
         const firstImg = state.images[0];
-        const previewUrl = firstImg.url || (firstImg.filename ? `/view?filename=${encodeURIComponent(firstImg.filename)}&type=${firstImg.type || 'output'}&subfolder=${encodeURIComponent(firstImg.subfolder || '')}` : null);
+        const randParam = state?.pid ? `&rand=${encodeURIComponent(state.pid)}` : "";
+        const previewUrl = firstImg.url || (firstImg.filename ? `/view?filename=${encodeURIComponent(firstImg.filename)}&type=${firstImg.type || 'output'}&subfolder=${encodeURIComponent(firstImg.subfolder || '')}${randParam}` : null);
         if (previewUrl && cardObj.firstImgElement && cardObj.firstImgElement.tagName === "IMG") {
             const currentSrc = cardObj.firstImgElement.getAttribute("src") || cardObj.firstImgElement.src;
             if (currentSrc !== previewUrl && !cardObj.firstImgElement.src.endsWith(previewUrl)) {
@@ -275,14 +356,15 @@ export function getOrCreateCard(state, callbacks = {}) {
     const cancelX = document.createElement("span");
     cancelX.className = "pi pi-times comfy-sidebar-queue-cancel-btn";
     Object.assign(cancelX.style, {
-        position: "absolute", top: "4px", right: "4px", display: "none", zIndex: "10"
+        position: "absolute", top: "4px", right: "4px", display: "none", zIndex: "25"
     });
 
     const sBadge = document.createElement("div");
+    sBadge.className = "comfy-sidebar-status-badge";
     Object.assign(sBadge.style, {
-        position: "absolute", top: "6px", right: "8px", fontSize: "9px", fontWeight: "bold",
-        padding: "2px 6px", borderRadius: "2px", textTransform: "uppercase", display: "none",
-        pointerEvents: "none", zIndex: "10"
+        position: "absolute", top: "6px", right: "8px", fontSize: "10px", fontWeight: "bold",
+        padding: "3px 7px", borderRadius: "3px", textTransform: "uppercase", display: "none",
+        pointerEvents: "none", zIndex: "30", letterSpacing: "0.5px", boxShadow: "0 2px 6px rgba(0,0,0,0.6)"
     });
 
     const dimEl = document.createElement("div");
@@ -362,7 +444,8 @@ export function getOrCreateCard(state, callbacks = {}) {
     hoverPanel.append(btnImg, btnJson, btnDel);
     leftHoverPanel.append(btnCopy, btnFocus, leftHoverBtn);
 
-    card.append(timerEl, cancelX, sBadge, dimEl, grid, p, pt, statusText, hoverPanel, leftHoverPanel);
+    // Appending grid FIRST ensures overlays (badges, cancel button) naturally render on top
+    card.append(grid, p, pt, statusText, timerEl, cancelX, dimEl, sBadge, hoverPanel, leftHoverPanel);
 
     cardObj = {
         element: card,
@@ -387,11 +470,11 @@ export function getOrCreateCard(state, callbacks = {}) {
         statusText,
         firstImgElement: null,
         lastImagesSignature: "",
-        currentImageIndex: 0
+        currentImageIndex: 0,
+        _isCheckingIntermediates: false
     };
 
     card.addEventListener("mouseenter", () => {
-        // Only run automatic button visibility sync on main queue cards (avoid synthetic submenu IDs)
         if (store.hasPrompt(state.pid)) {
             const liveState = store.getPrompt(state.pid);
             syncCardButtonVisibility(cardObj, liveState);
@@ -463,8 +546,21 @@ export function getOrCreateCard(state, callbacks = {}) {
                 const allOutputs = getRunOutputs(liveState.nodeOutputs, liveState.workflow);
                 allOutputs.forEach(out => (out.images || []).forEach(addFile));
 
+                let deletedCount = 0;
+                let lastAction = "trashed";
                 for (const fileItem of filesToDelete) {
-                    await deleteFileOnServer(fileItem);
+                    const action = await deleteFileOnServer(fileItem);
+                    if (action) {
+                        deletedCount++;
+                        lastAction = action;
+                    }
+                }
+
+                if (deletedCount > 0) {
+                    const msg = lastAction === "trashed"
+                        ? `Moved ${deletedCount} file${deletedCount > 1 ? "s" : ""} to Recycle Bin.`
+                        : `Permanently deleted ${deletedCount} file${deletedCount > 1 ? "s" : ""}.`;
+                    showNotification(msg, "success", "Delete Files");
                 }
             }
 
@@ -498,11 +594,23 @@ export function updateCardDOM(cardObj, state, showPendingSummary = true, showWor
     }
 
     if (state.status === PromptStatus.CANCELLED) {
-        Object.assign(cardObj.statusBadge.style, { display: "block", background: "#ffc107", color: "#000" });
+        Object.assign(cardObj.statusBadge.style, { 
+            display: "block", 
+            background: "#eab308", 
+            color: "#000", 
+            zIndex: "30" 
+        });
         cardObj.statusBadge.textContent = "Cancelled";
+        if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
     } else if (state.status === PromptStatus.ERROR) {
-        Object.assign(cardObj.statusBadge.style, { display: "block", background: "#dc3545", color: "#fff" });
+        Object.assign(cardObj.statusBadge.style, { 
+            display: "block", 
+            background: "#dc3545", 
+            color: "#fff", 
+            zIndex: "30" 
+        });
         cardObj.statusBadge.textContent = "Error";
+        if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
     } else {
         cardObj.statusBadge.style.display = "none";
     }
@@ -562,7 +670,7 @@ export function updateCardDOM(cardObj, state, showPendingSummary = true, showWor
             cardObj.placeholder.onclick = (e) => {
                 e.stopPropagation();
                 stopAllAudioPlayback();
-                showFullscreenPreview([{ text: fullText, pid: state.pid }]);
+                showFullscreenPreview([{ text: fullText, pid: state.pid }], false, state.pid);
             };
         } else {
             cardObj.placeholder.textContent = state.progressText || "No Outputs";

js/ui/mediaActions.js

@@ -24,6 +24,8 @@ export async function copyImageToClipboard(src) {
     }
 }
 
+import { app } from "/scripts/app.js";
+
 export async function openFileOrFolder(img) {
     if (!img) return;
 
@@ -51,7 +53,8 @@ export async function openFileOrFolder(img) {
 }
 
 export async function deleteFileOnServer(fileItem) {
-    if (!fileItem || !fileItem.filename) return false;
+    if (!fileItem || !fileItem.filename) return null;
+    const isPermanent = app.ui?.settings?.getSettingValue?.("Comfy Sidebar.Permanent Delete on Disk Deletion") ?? false;
     try {
         const res = await fetch("/comfy-sidebar/delete-file", {
             method: "POST",
@@ -59,13 +62,18 @@ export async function deleteFileOnServer(fileItem) {
             body: JSON.stringify({
                 filename: fileItem.filename,
                 subfolder: fileItem.subfolder || "",
-                type: fileItem.type || "output"
+                type: fileItem.type || "output",
+                permanent: isPermanent
             })
         });
-        return res.ok;
+        if (res.ok) {
+            const data = await res.json();
+            return data.action || (isPermanent ? "deleted" : "trashed");
+        }
+        return null;
     } catch (e) {
         console.error("Comfy Sidebar: Failed to delete file on server", e);
-        return false;
+        return null;
     }
 }
 

js/ui/mediaPreview.js

@@ -1,19 +1,35 @@
-import { isImageFormat, isVideoFormat, is3DFormat, isAudioFormat, getFilenameFromUrl } from "../utils/utils.js";
+import { isImageFormat, isVideoFormat, is3DFormat, isAudioFormat, getFilenameFromUrl, findImagesInOutputs } from "../utils/utils.js";
 import { openFileOrFolder, removeImageFromNodeOutputs } from "./mediaActions.js";
 import { stopAllAudioPlayback, isAudioViewerOpen, setCurrentlyPlayingAudio, getCurrentlyPlayingAudio } from "./audioController.js";
 import { showFullscreenPreview } from "../utils/comparison.js";
 import { store } from "../core/store.js";
 import { PromptStatus } from "../core/constants.js";
 
-export 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 || '')}`;
+export function findWorkflowBackgroundThumbnail(state, randParam = "") {
+    if (!state) return null;
+    // 1. Check if state.images already has a valid image asset
+    const imgs = (state.images || []).filter(i => isImageFormat(i.filename || i.url) && !i.isFallback);
+    let lastImg = imgs.length > 0 ? imgs[imgs.length - 1] : null;
 
-    const imageAssets = state?.images?.filter(i => isImageFormat(i.filename || i.url)) || [];
-    const lastImageAsset = imageAssets.length > 0 ? imageAssets[imageAssets.length - 1] : null;
-    const bgImgSrc = lastImageAsset
-        ? (lastImageAsset.url || window.location.origin + `/view?filename=${encodeURIComponent(lastImageAsset.filename)}&type=${lastImageAsset.type || 'output'}&subfolder=${encodeURIComponent(lastImageAsset.subfolder || '')}`)
-        : null;
+    // 2. Search all workflow node outputs for any generated image
+    if (!lastImg && state.nodeOutputs) {
+        const allOutputs = findImagesInOutputs(state.nodeOutputs, state.workflow);
+        const validImgs = allOutputs.filter(i => isImageFormat(i.filename || i.url) && !i.isFallback);
+        if (validImgs.length > 0) lastImg = validImgs[validImgs.length - 1];
+    }
+
+    if (lastImg) {
+        return lastImg.url || (window.location.origin + `/view?filename=${encodeURIComponent(lastImg.filename)}&type=${lastImg.type || 'output'}&subfolder=${encodeURIComponent(lastImg.subfolder || '')}${randParam}`);
+    }
+    return null;
+}
+
+export function render3DCardPreview(cardObj, wrapper, src, img, state) {
+    if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
+    let preview3D = wrapper.querySelector(".comfy-sidebar-3d-wrapper");
+    const randParam = state?.pid ? `&rand=${encodeURIComponent(state.pid)}` : "";
+    const fullUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}${randParam}`;
+    const bgImgSrc = findWorkflowBackgroundThumbnail(state, randParam);
 
     if (!preview3D) {
         wrapper.innerHTML = "";
@@ -56,6 +72,8 @@ export function render3DCardPreview(cardObj, wrapper, src, img, state) {
             newBgImg.src = bgImgSrc;
             newBgImg.alt = "3D Thumbnail Preview";
             preview3D.insertBefore(newBgImg, preview3D.firstChild);
+        } else if (bgImg && !bgImgSrc) {
+            bgImg.remove();
         }
         const title = preview3D.querySelector(".comfy-sidebar-3d-title");
         if (title) title.textContent = img.filename || "3D Model";
@@ -69,7 +87,7 @@ export function render3DCardPreview(cardObj, wrapper, src, img, state) {
             openFileOrFolder(img);
             return;
         }
-        showFullscreenPreview([fullUrl], ev.shiftKey);
+        showFullscreenPreview([fullUrl], ev.shiftKey, state?.pid);
     };
 
     preview3D.setAttribute("draggable", "true");
@@ -91,10 +109,13 @@ export function render3DCardPreview(cardObj, wrapper, src, img, state) {
 }
 
 export function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
+    if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
     let previewAudio = wrapper.querySelector(".comfy-sidebar-audio-wrapper");
-    const fullUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
+    const randParam = state?.pid ? `&rand=${encodeURIComponent(state.pid)}` : "";
+    const fullUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}${randParam}`;
     const filename = img.filename || getFilenameFromUrl(src) || "audio.wav";
     const ext = filename.split('.').pop().toUpperCase();
+    const bgImgSrc = findWorkflowBackgroundThumbnail(state, randParam);
 
     const playIconSvg = `<svg viewBox="0 0 24 24" width="14" height="14" style="margin-left: 2px; pointer-events: none;"><polygon points="6,4 20,12 6,20" fill="#ffffff"/></svg>`;
     const stopIconSvg = `<svg viewBox="0 0 24 24" width="12" height="12" style="pointer-events: none;"><rect x="5" y="5" width="14" height="14" rx="2" fill="#ffffff"/></svg>`;
@@ -104,8 +125,16 @@ export function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
         previewAudio = document.createElement("div");
         previewAudio.className = "comfy-sidebar-audio-wrapper";
 
+        if (bgImgSrc) {
+            const bgImg = document.createElement("img");
+            bgImg.className = "comfy-sidebar-card-bg-img";
+            bgImg.src = bgImgSrc;
+            bgImg.alt = "Audio Cover Preview";
+            previewAudio.appendChild(bgImg);
+        }
+
         const topRow = document.createElement("div");
-        Object.assign(topRow.style, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", paddingLeft: "42px" });
+        Object.assign(topRow.style, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", paddingLeft: "42px", position: "relative", zIndex: "2" });
 
         const title = document.createElement("span");
         title.className = "comfy-sidebar-audio-title";
@@ -118,7 +147,7 @@ export function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
         topRow.append(title, badge);
 
         const centerArea = document.createElement("div");
-        Object.assign(centerArea.style, { position: "relative", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", margin: "6px 0" });
+        Object.assign(centerArea.style, { position: "relative", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", margin: "6px 0", zIndex: "2" });
 
         const soundwave = document.createElement("div");
         soundwave.className = "comfy-sidebar-soundwave-container";
@@ -145,7 +174,7 @@ export function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
         centerArea.append(soundwave, playBtn);
 
         const bottomRow = document.createElement("div");
-        Object.assign(bottomRow.style, { display: "flex", flexDirection: "column", gap: "4px", width: "100%", padding: "0 34px", boxSizing: "border-box" });
+        Object.assign(bottomRow.style, { display: "flex", flexDirection: "column", gap: "4px", width: "100%", padding: "0 34px", boxSizing: "border-box", position: "relative", zIndex: "2" });
 
         const scrubber = document.createElement("div");
         Object.assign(scrubber.style, {
@@ -203,7 +232,7 @@ export function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
 
             if (isAudioViewerOpen()) {
                 stopAllAudioPlayback();
-                showFullscreenPreview([fullUrl]);
+                showFullscreenPreview([fullUrl], false, state?.pid);
                 return;
             }
 
@@ -250,8 +279,23 @@ export function renderAudioCardPreview(cardObj, wrapper, src, img, state) {
                 openFileOrFolder(img);
                 return;
             }
-            showFullscreenPreview([fullUrl]);
+            showFullscreenPreview([fullUrl], false, state?.pid);
         };
+    } else {
+        const bgImg = previewAudio.querySelector(".comfy-sidebar-card-bg-img");
+        if (bgImg && bgImgSrc && bgImg.src !== bgImgSrc) {
+            bgImg.src = bgImgSrc;
+        } else if (!bgImg && bgImgSrc) {
+            const newBgImg = document.createElement("img");
+            newBgImg.className = "comfy-sidebar-card-bg-img";
+            newBgImg.src = bgImgSrc;
+            newBgImg.alt = "Audio Cover Preview";
+            previewAudio.insertBefore(newBgImg, previewAudio.firstChild);
+        } else if (bgImg && !bgImgSrc) {
+            bgImg.remove();
+        }
+        const title = previewAudio.querySelector(".comfy-sidebar-audio-title");
+        if (title) title.textContent = filename;
     }
 
     cardObj.firstImgElement = previewAudio;
@@ -277,18 +321,28 @@ export function renderGenericFileCardPreview(cardObj, wrapper, src, img, state)
     const playIcon = wrapper.querySelector(".comfy-sidebar-play-icon");
     if (playIcon) playIcon.remove();
     let previewFile = wrapper.querySelector(".comfy-sidebar-file-wrapper");
-    const fullUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
+    const randParam = state?.pid ? `&rand=${encodeURIComponent(state.pid)}` : "";
+    const fullUrl = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}${randParam}`;
     const filename = img.filename || getFilenameFromUrl(src) || "output_file";
     const ext = (filename.split('.').pop() || "FILE").toUpperCase();
     const folderName = img.subfolder ? `${img.subfolder}/` : (img.type || "output");
+    const bgImgSrc = findWorkflowBackgroundThumbnail(state, randParam);
 
     if (!previewFile) {
         wrapper.innerHTML = "";
         previewFile = document.createElement("div");
         previewFile.className = "comfy-sidebar-file-wrapper";
 
+        if (bgImgSrc) {
+            const bgImg = document.createElement("img");
+            bgImg.className = "comfy-sidebar-card-bg-img";
+            bgImg.src = bgImgSrc;
+            bgImg.alt = "File Thumbnail Preview";
+            previewFile.appendChild(bgImg);
+        }
+
         const topRow = document.createElement("div");
-        Object.assign(topRow.style, { display: "flex", justifyContent: "flex-end", width: "100%", minHeight: "18px" });
+        Object.assign(topRow.style, { display: "flex", justifyContent: "flex-end", width: "100%", minHeight: "18px", position: "relative", zIndex: "2" });
 
         const badge = document.createElement("span");
         badge.className = "comfy-sidebar-file-badge";
@@ -296,7 +350,7 @@ export function renderGenericFileCardPreview(cardObj, wrapper, src, img, state)
         topRow.appendChild(badge);
 
         const centerArea = document.createElement("div");
-        Object.assign(centerArea.style, { display: "flex", alignItems: "center", gap: "8px", width: "100%", margin: "2px 0 6px 0" });
+        Object.assign(centerArea.style, { display: "flex", alignItems: "center", gap: "8px", width: "100%", margin: "2px 0 6px 0", position: "relative", zIndex: "2" });
 
         const icon = document.createElement("span");
         icon.className = "pi pi-file comfy-sidebar-file-icon";
@@ -309,7 +363,7 @@ export function renderGenericFileCardPreview(cardObj, wrapper, src, img, state)
         centerArea.append(icon, title);
 
         const bottomRow = document.createElement("div");
-        Object.assign(bottomRow.style, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" });
+        Object.assign(bottomRow.style, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", position: "relative", zIndex: "2" });
 
         const folderInfo = document.createElement("div");
         folderInfo.className = "comfy-sidebar-file-subtext";
@@ -324,6 +378,18 @@ export function renderGenericFileCardPreview(cardObj, wrapper, src, img, state)
         previewFile.append(topRow, centerArea, bottomRow);
         wrapper.appendChild(previewFile);
     } else {
+        const bgImg = previewFile.querySelector(".comfy-sidebar-card-bg-img");
+        if (bgImg && bgImgSrc && bgImg.src !== bgImgSrc) {
+            bgImg.src = bgImgSrc;
+        } else if (!bgImg && bgImgSrc) {
+            const newBgImg = document.createElement("img");
+            newBgImg.className = "comfy-sidebar-card-bg-img";
+            newBgImg.src = bgImgSrc;
+            newBgImg.alt = "File Thumbnail Preview";
+            previewFile.insertBefore(newBgImg, previewFile.firstChild);
+        } else if (bgImg && !bgImgSrc) {
+            bgImg.remove();
+        }
         const title = previewFile.querySelector(".comfy-sidebar-file-title");
         if (title) { title.textContent = filename; title.title = filename; }
         const badge = previewFile.querySelector(".comfy-sidebar-file-badge");
@@ -368,7 +434,8 @@ export function renderCardImages(cardObj, state, onNavigateBatch) {
         return;
     }
 
-    const src = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}`;
+    const randParam = state?.pid ? `&rand=${encodeURIComponent(state.pid)}` : "";
+    const src = img.url ? img.url : window.location.origin + `/view?filename=${encodeURIComponent(img.filename)}&type=${img.type || 'output'}&subfolder=${encodeURIComponent(img.subfolder || '')}${randParam}`;
     const isVideo = isVideoFormat(src) || isVideoFormat(img.filename);
     const is3D = is3DFormat(src) || is3DFormat(img.filename);
     const isAudio = isAudioFormat(src) || isAudioFormat(img.filename);
@@ -391,22 +458,57 @@ export function renderCardImages(cardObj, state, onNavigateBatch) {
         wrapper.appendChild(ctrlOverlay);
     }
 
+    // Direct children check: safely disconnect any loading event listeners on previous media
+    const existingTopImg = wrapper.querySelector(":scope > img, :scope > video");
+    const existing3D = wrapper.querySelector(".comfy-sidebar-3d-wrapper");
+    const existingAudio = wrapper.querySelector(".comfy-sidebar-audio-wrapper");
+    const existingFile = wrapper.querySelector(".comfy-sidebar-file-wrapper");
+
+    if (existingTopImg) {
+        if (existingTopImg.tagName === "VIDEO") {
+            existingTopImg.onloadedmetadata = null;
+            existingTopImg.pause();
+            existingTopImg.src = "";
+            existingTopImg.load();
+        } else {
+            existingTopImg.onload = null;
+            existingTopImg.src = "";
+        }
+    }
+
     if (is3D) {
+        if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
+        if (existingTopImg) existingTopImg.remove();
+        if (existingAudio) existingAudio.remove();
+        if (existingFile) existingFile.remove();
         render3DCardPreview(cardObj, wrapper, src, img, state);
         return;
     }
 
     if (isAudio) {
+        if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
+        if (existingTopImg) existingTopImg.remove();
+        if (existing3D) existing3D.remove();
+        if (existingFile) existingFile.remove();
         renderAudioCardPreview(cardObj, wrapper, src, img, state);
         return;
     }
 
     if (!isImage && !isVideo) {
+        if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
+        if (existingTopImg) existingTopImg.remove();
+        if (existing3D) existing3D.remove();
+        if (existingAudio) existingAudio.remove();
         renderGenericFileCardPreview(cardObj, wrapper, src, img, state);
         return;
     }
 
-    let mediaEl = wrapper.querySelector("img, video");
+    // Standard Image/Video mode: remove any 3D, audio, or file preview boxes
+    if (existing3D) existing3D.remove();
+    if (existingAudio) existingAudio.remove();
+    if (existingFile) existingFile.remove();
+
+    let mediaEl = wrapper.querySelector(":scope > img, :scope > video");
     const needsRebuild = !mediaEl || (isVideo !== (mediaEl.tagName.toLowerCase() === "video"));
 
     if (needsRebuild) {
@@ -432,7 +534,6 @@ export function renderCardImages(cardObj, state, onNavigateBatch) {
             return;
         }
         let activeSrc = mediaEl.currentSrc || mediaEl.src || src;
-        // If it's a preview blob, snapshot the rendered pixels from the card so revoked blobs don't 404 in fullscreen
         if (activeSrc && activeSrc.startsWith("blob:") && mediaEl.naturalWidth > 0) {
             try {
                 const canvas = document.createElement("canvas");
@@ -504,7 +605,6 @@ export function renderCardImages(cardObj, state, onNavigateBatch) {
                 removeImageFromNodeOutputs(liveState.nodeOutputs, img);
             }
 
-            // If the card still has other images (e.g. from a batch), persist and switch to next image
             if (liveState.images && liveState.images.length > 0) {
                 cardObj.currentImageIndex = 0;
                 cardObj.lastImagesSignature = "";
@@ -512,14 +612,12 @@ export function renderCardImages(cardObj, state, onNavigateBatch) {
                 return;
             }
 
-            // If the card has text outputs or is still in progress, persist
             if ((liveState.texts && liveState.texts.length > 0) || (liveState.status && liveState.status !== PromptStatus.COMPLETED)) {
                 cardObj.lastImagesSignature = "";
                 store.updatePrompt(liveState.pid, liveState);
                 return;
             }
 
-            // Only delete the main card when all items belonging to it are gone
             store.deletePrompt(liveState.pid);
             cardObj.element?.remove();
             return;
@@ -529,9 +627,13 @@ export function renderCardImages(cardObj, state, onNavigateBatch) {
     };
 
     const applyDimensions = (width, height) => {
+        // Strictly forbid dimension badges on 3D, Audio, or File cards
+        if (is3D || isAudio || (!isImage && !isVideo)) {
+            if (cardObj.dimEl) cardObj.dimEl.style.display = "none";
+            return;
+        }
         if (cardObj.dimEl && width && height) {
-            // Don't show the dimension badge for active/running preview frames
-            if (state.status === "active") {
+            if (state.status === "active" || state.status === "cancelled" || state.status === "error") {
                 cardObj.dimEl.style.display = "none";
                 return;
             }
@@ -709,4 +811,4 @@ export function renderCardImages(cardObj, state, onNavigateBatch) {
     } else {
         if (navBar) navBar.remove();
     }
-}
+}

js/ui/sidebarView.js

@@ -512,7 +512,11 @@ export function renderSidebar() {
                             resetDelete();
 
                             if (shouldDeleteFromDisk && img && img.filename) {
-                                await deleteFileOnServer(img);
+                                const action = await deleteFileOnServer(img);
+                                if (action) {
+                                    const msg = action === "trashed" ? "Moved file to Recycle Bin." : "Permanently deleted file.";
+                                    showNotification(msg, "success", "Delete File");
+                                }
                             }
 
                             const pid = batchInfo.parentPromptId || batchInfo.pid;
@@ -779,8 +783,17 @@ export function renderSidebar() {
                                 resetDelete();
 
                                 if (shouldDeleteFromDisk && out.images) {
+                                    let count = 0;
+                                    let lastAct = "trashed";
                                     for (const imgItem of out.images) {
-                                        await deleteFileOnServer(imgItem);
+                                        const action = await deleteFileOnServer(imgItem);
+                                        if (action) { count++; lastAct = action; }
+                                    }
+                                    if (count > 0) {
+                                        const msg = lastAct === "trashed"
+                                            ? `Moved ${count} file${count > 1 ? "s" : ""} to Recycle Bin.`
+                                            : `Permanently deleted ${count} file${count > 1 ? "s" : ""}.`;
+                                        showNotification(msg, "success", "Delete Files");
                                     }
                                 }
 

js/utils/comparison.js

@@ -3,17 +3,108 @@ import { create3DViewer } from "./viewer3d.js";
 import { createTextReader } from "./text_reader.js";
 import { stopAllAudioPlayback } from "../ui/audioController.js";
 import { SidebarOverlay } from "./overlay.js";
+import { store } from "../core/store.js";
+import { PromptStatus } from "../core/constants.js";
 
 let activeComparisonViewer = null;
+let isRuntimePreviewActive = false;
+let onRuntimePreviewStateChange = null;
+
+export function isRuntimePreviewEnabled() {
+    return isRuntimePreviewActive;
+}
+
+export function getActiveComparisonViewer() {
+    return activeComparisonViewer;
+}
+
+export function setRuntimePreviewStateListener(fn) {
+    onRuntimePreviewStateChange = fn;
+}
+
+export function setRuntimePreviewEnabled(enabled, triggerFocus = true) {
+    isRuntimePreviewActive = !!enabled;
+    if (typeof onRuntimePreviewStateChange === "function") {
+        try { onRuntimePreviewStateChange(isRuntimePreviewActive); } catch (e) {}
+    }
+
+    if (isRuntimePreviewActive && triggerFocus) {
+        focusRuntimePreviewTarget();
+    }
+}
+
+function isLatestOrActiveTask(pid) {
+    if (!pid) return false;
+    try {
+        const targetPid = String(pid);
+        const activePid = store.ui.currentlyActivePromptId;
+
+        // If a job is actively generating in the background:
+        // ONLY that active job is considered active. Any other card is an older card!
+        if (activePid) {
+            return String(activePid) === targetPid;
+        }
+
+        // If the queue is idle, only the newest prompt in history is the latest
+        const all = store.getAllPrompts().sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+        if (all.length > 0 && String(all[0].pid) === targetPid) {
+            return true;
+        }
+    } catch (e) {}
+    return false;
+}
+
+export function focusRuntimePreviewTarget() {
+    try {
+        const activePid = store.ui.currentlyActivePromptId;
+        const activePrompt = activePid ? store.getPrompt(activePid) : null;
+        
+        // 1. If a prompt is actively running, focus it (even if it has no image yet)
+        if (activePrompt && activePrompt.status === PromptStatus.ACTIVE) {
+            const previewSrc = activePrompt._previewBlobUrl || 
+                (activePrompt.images && activePrompt.images.length > 0 ? (activePrompt.images[0].url || activePrompt.images[0].filename) : null);
+            showFullscreenPreview([previewSrc || ""], false, activePrompt.pid);
+            return;
+        }
+
+        // 2. Otherwise focus the latest task in history (even if cancelled or text-only)
+        const all = store.getAllPrompts().sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+        const latest = all[0];
+
+        if (latest) {
+            const firstImg = latest.images && latest.images.length > 0 ? latest.images[0] : null;
+            const randParam = latest.pid ? `&rand=${encodeURIComponent(latest.pid)}` : "";
+            const src = latest._previewBlobUrl || 
+                (firstImg ? (firstImg.url || `/view?filename=${encodeURIComponent(firstImg.filename)}&type=${firstImg.type || 'output'}&subfolder=${encodeURIComponent(firstImg.subfolder || '')}${randParam}`) : "");
+            showFullscreenPreview([src || ""], false, latest.pid);
+        } else {
+            // Queue is totally empty
+            showFullscreenPreview([""], false, null);
+        }
+    } catch (e) {
+        console.error("Comfy Sidebar: Error focusing runtime preview target:", e);
+    }
+}
 
 export function isAudioViewerOpen() {
     return !!(activeComparisonViewer && activeComparisonViewer.isAudio);
 }
 
 export function updateActiveComparisonPreview(pid, newSrc) {
-    if (activeComparisonViewer && activeComparisonViewer.targetPid === String(pid)) {
-        activeComparisonViewer.loadTarget(newSrc);
+    if (!activeComparisonViewer) return;
+    const targetPidStr = String(pid);
+
+    // If Runtime Preview is OFF: NEVER interrupt the user while inspecting older cards!
+    if (!isRuntimePreviewActive) {
+        if (activeComparisonViewer.targetPid === targetPidStr) {
+            activeComparisonViewer.loadTarget(newSrc);
+        }
+        return;
     }
+
+    // If Runtime Preview is ON: always track the active generation
+    activeComparisonViewer.targetPid = targetPidStr;
+    activeComparisonViewer.loadTarget(newSrc);
 }
 
 const getClientX = (e) => {
@@ -33,6 +124,9 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
 
     const overlay = new SidebarOverlay({
         onDestroy,
+        onUserClose: () => {
+            if (isRuntimePreviewActive) setRuntimePreviewEnabled(false, false);
+        },
         onKeyDown: (e) => {
             if (e.key === " ") {
                 e.preventDefault();
@@ -47,7 +141,8 @@ function createAudioViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () =>
         border: "1px solid rgba(255,255,255,0.15)", borderRadius: "12px",
         padding: "24px 28px", width: "90%", maxWidth: "520px",
         boxShadow: "0 8px 32px rgba(0,0,0,0.7)", display: "flex",
-        flexDirection: "column", gap: "16px", zIndex: "20"
+        flexDirection: "column", gap: "16px", zIndex: "20",
+        pointerEvents: "auto"
     });
 
     const parsedFilename = getFilenameFromUrl(baseSrc) || "audio.wav";
@@ -370,6 +465,9 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
 
     const overlay = new SidebarOverlay({
         onDestroy,
+        onUserClose: () => {
+            if (isRuntimePreviewActive) setRuntimePreviewEnabled(false, false);
+        },
         onKeyDown: (e) => {
             if (e.key === " " && mediaB) {
                 e.preventDefault();
@@ -378,12 +476,14 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         }
     });
 
+    // Inset 6px left/right so sidebar resize handles stay 100% accessible
     const scrollContainer = document.createElement("div");
     Object.assign(scrollContainer.style, {
-        position: "absolute", top: "0", left: "0", width: "100%", height: "100%",
+        position: "absolute", top: "0", left: "6px", right: "6px", width: "auto", height: "100%",
         display: "flex", overflow: "auto", boxSizing: "border-box",
         padding: "48px 24px", scrollbarWidth: "thin",
-        scrollbarColor: "#555 rgba(0, 0, 0, 0.3)", zIndex: "15"
+        scrollbarColor: "#555 rgba(0, 0, 0, 0.3)", zIndex: "15",
+        pointerEvents: "auto"
     });
     overlay.container.appendChild(scrollContainer);
 
@@ -410,14 +510,70 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
     Object.assign(wrapper.style, {
         position: "relative", display: "grid", placeItems: "center",
         margin: "auto", flexShrink: "0",
-        cursor: isBaseVideo ? "default" : "zoom-in"
+        cursor: isBaseVideo ? "default" : "zoom-in",
+        pointerEvents: "auto"
     });
     scrollContainer.appendChild(wrapper);
 
+    // Large 60px Lucide Spinner with relaxed 1.3s rotation
+    const showPlaceholder = () => {
+        mediaA.style.display = "none";
+        if (mediaB) {
+            cleanupMedia(mediaB);
+            mediaB.remove();
+            mediaB = null;
+        }
+        slider.style.display = "none";
+
+        let placeholder = wrapper.querySelector(".comfy-sidebar-viewer-placeholder");
+        if (!placeholder) {
+            placeholder = document.createElement("div");
+            placeholder.className = "comfy-sidebar-viewer-placeholder";
+            Object.assign(placeholder.style, {
+                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
+                padding: "36px", borderRadius: "12px", color: "#94a3b8", textAlign: "center",
+                userSelect: "none", pointerEvents: "auto", minWidth: "120px", minHeight: "120px",
+                boxSizing: "border-box", margin: "auto"
+            });
+            wrapper.appendChild(placeholder);
+        }
+
+        const spinnerSvg = `
+            <style>
+                @keyframes comfy-sidebar-spin {
+                    from { transform: rotate(0deg); }
+                    to { transform: rotate(360deg); }
+                }
+            </style>
+            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="animation: comfy-sidebar-spin 1.3s linear infinite; filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.45));">
+                <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+            </svg>
+        `;
+
+        placeholder.innerHTML = spinnerSvg;
+        placeholder.style.display = "flex";
+        wrapper.style.width = "auto";
+        wrapper.style.height = "auto";
+        wrapper.style.cursor = "default";
+    };
+
+    const hidePlaceholder = () => {
+        const placeholder = wrapper.querySelector(".comfy-sidebar-viewer-placeholder");
+        if (placeholder) placeholder.style.display = "none";
+        mediaA.style.display = "block";
+    };
+
     let mediaA = createMediaElement(baseSrc, false);
+    mediaA.onerror = () => {
+        showPlaceholder();
+    };
     wrapper.appendChild(mediaA);
     let isZoomed = false;
 
+    if (!baseSrc) {
+        showPlaceholder();
+    }
+
     const slider = document.createElement("div");
     Object.assign(slider.style, {
         position: "absolute", top: "0", bottom: "0", left: "50%",
@@ -457,16 +613,32 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         if (!mediaA) return;
         const wA = mediaA.naturalWidth || mediaA.videoWidth || 0;
         const hA = mediaA.naturalHeight || mediaA.videoHeight || 0;
+        if (!wA || !hA) return;
+
+        // Calculate available space inside the preview area
+        const availW = Math.max(100, (scrollContainer.clientWidth || window.innerWidth) - 48);
+        const availH = Math.max(100, (scrollContainer.clientHeight || window.innerHeight) - 96);
+        const aspectA = wA / hA;
+
+        // Scale to fit available space while maintaining aspect ratio (fills screen even for small previews)
+        let fitW = availW;
+        let fitH = fitW / aspectA;
+        if (fitH > availH) {
+            fitH = availH;
+            fitW = fitH * aspectA;
+        }
+        fitW = Math.round(fitW);
+        fitH = Math.round(fitH);
 
         if (!mediaB) {
             slider.style.display = "none";
+            wrapper.style.cursor = isBaseVideo ? "default" : (isZoomed ? "zoom-out" : "zoom-in");
             if (mediaA) mediaA.style.pointerEvents = isBaseVideo ? "none" : "auto";
-            if (isZoomed && wA && hA) {
+            if (isZoomed) {
                 wrapper.style.maxWidth = "none";
                 wrapper.style.maxHeight = "none";
                 wrapper.style.width = `${wA}px`;
                 wrapper.style.height = `${hA}px`;
-                wrapper.style.cursor = "zoom-out";
                 mediaA.style.maxWidth = "none";
                 mediaA.style.maxHeight = "none";
                 mediaA.style.width = "100%";
@@ -475,21 +647,20 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
             } else {
                 wrapper.style.maxWidth = "none";
                 wrapper.style.maxHeight = "none";
-                wrapper.style.width = "auto";
-                wrapper.style.height = "auto";
-                wrapper.style.cursor = isBaseVideo ? "default" : "zoom-in";
-                mediaA.style.maxWidth = "calc(100vw - 120px)";
-                mediaA.style.maxHeight = "calc(100vh - 120px)";
-                mediaA.style.width = "auto";
-                mediaA.style.height = "auto";
-                mediaA.style.objectFit = "contain";
+                wrapper.style.width = `${fitW}px`;
+                wrapper.style.height = `${fitH}px`;
+                mediaA.style.maxWidth = "none";
+                mediaA.style.maxHeight = "none";
+                mediaA.style.width = "100%";
+                mediaA.style.height = "100%";
+                mediaA.style.objectFit = "fill";
             }
             return;
         }
 
         const wB = mediaB.naturalWidth || mediaB.videoWidth || 0;
         const hB = mediaB.naturalHeight || mediaB.videoHeight || 0;
-        if (!wA || !hA || !wB || !hB) return;
+        if (!wB || !hB) return;
 
         const arA = wA / hA;
         const arB = wB / hB;
@@ -514,21 +685,31 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         }
 
         slider.style.display = "block";
+        wrapper.style.cursor = isBaseVideo ? "default" : (isZoomed ? "zoom-out" : "zoom-in");
         if (mediaA) mediaA.style.pointerEvents = "none";
         if (mediaB) mediaB.style.pointerEvents = "none";
         infoText.style.color = "#aaa";
-        infoText.textContent = "Drag slider to compare. Click image to zoom (100%/Fit) | Shift+Click another card to compare | Esc to close.";
+        infoText.textContent = "Click image to zoom | Drag image to compare slider | Esc to close.";
         updateSliderPosition(50);
 
         const maxW = Math.max(wA, wB);
         const maxH = Math.max(hA, hB);
+        const aspectComp = maxW / maxH;
+
+        let fitWComp = availW;
+        let fitHComp = fitWComp / aspectComp;
+        if (fitHComp > availH) {
+            fitHComp = availH;
+            fitWComp = fitHComp * aspectComp;
+        }
+        fitWComp = Math.round(fitWComp);
+        fitHComp = Math.round(fitHComp);
 
         if (isZoomed) {
             wrapper.style.maxWidth = "none";
             wrapper.style.maxHeight = "none";
             wrapper.style.width = `${maxW}px`;
             wrapper.style.height = `${maxH}px`;
-            wrapper.style.cursor = "zoom-out";
 
             [mediaA, mediaB].forEach(el => {
                 if (el) {
@@ -542,24 +723,42 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         } else {
             wrapper.style.maxWidth = "none";
             wrapper.style.maxHeight = "none";
-            wrapper.style.width = "auto";
-            wrapper.style.height = "auto";
-            wrapper.style.cursor = "zoom-in";
+            wrapper.style.width = `${fitWComp}px`;
+            wrapper.style.height = `${fitHComp}px`;
 
             [mediaA, mediaB].forEach(el => {
                 if (el) {
-                    el.style.maxWidth = "calc(100vw - 120px)";
-                    el.style.maxHeight = "calc(100vh - 120px)";
-                    el.style.width = "auto";
-                    el.style.height = "auto";
-                    el.style.objectFit = "contain";
+                    el.style.maxWidth = "none";
+                    el.style.maxHeight = "none";
+                    el.style.width = "100%";
+                    el.style.height = "100%";
+                    el.style.objectFit = "fill";
                 }
             });
         }
     };
 
-    mediaA.onload = syncImageScales;
-    if (mediaA.complete) syncImageScales();
+    const onMediaReady = () => {
+        hidePlaceholder();
+        syncImageScales();
+    };
+
+    if (mediaA.tagName === "VIDEO") {
+        mediaA.addEventListener("loadedmetadata", onMediaReady);
+        if (mediaA.readyState >= 1) onMediaReady();
+    } else {
+        mediaA.onload = onMediaReady;
+        if (mediaA.complete && mediaA.naturalWidth) onMediaReady();
+    }
+
+    // Dynamically adjust preview scale if sidebars are resized
+    if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => {
+            if (!isZoomed) syncImageScales();
+        });
+        ro.observe(scrollContainer);
+        overlay.addCleanup(() => ro.disconnect());
+    }
 
     const toggleZoom = () => {
         if (isBaseVideo) return;
@@ -585,20 +784,29 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         if (!isDraggingSlider) return;
         const clientX = getClientX(e);
         const clientY = getClientY(e);
-        if (!dragMoved && (Math.abs(clientX - dragStartX) > 4 || Math.abs(clientY - dragStartY) > 4)) {
+
+        // Distinguish click from drag: only snap when mouse moves more than 3px
+        if (!dragMoved && (Math.abs(clientX - dragStartX) > 3 || Math.abs(clientY - dragStartY) > 3)) {
             dragMoved = true;
         }
+
+        // Click + Drag: snap slider to mouse pointer and drag smoothly
         if (dragMoved && mediaB) {
             const rect = wrapper.getBoundingClientRect();
-            const percent = ((clientX - rect.left) / rect.width) * 100;
-            updateSliderPosition(percent);
+            if (rect.width > 0) {
+                const percent = ((clientX - rect.left) / rect.width) * 100;
+                updateSliderPosition(percent);
+            }
         }
     };
 
     const endDrag = () => { 
         if (!isDraggingSlider) return;
         isDraggingSlider = false;
-        if (dragMoved) setTimeout(() => { dragMoved = false; }, 50);
+        if (dragMoved) {
+            // Keep dragMoved true briefly so the upcoming click event doesn't trigger toggleZoom
+            setTimeout(() => { dragMoved = false; }, 60);
+        }
     };
 
     wrapper.addEventListener("mousedown", startDrag);
@@ -615,14 +823,17 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
         window.removeEventListener("touchend", endDrag);
     });
 
-    wrapper.addEventListener("click", () => {
+    wrapper.addEventListener("click", (e) => {
         if (dragMoved || isBaseVideo) return;
         toggleZoom();
     });
 
     scrollContainer.addEventListener("click", (e) => {
         if (dragMoved) return;
-        if (e.target === scrollContainer || e.target === overlay.container) overlay.destroy();
+        if (e.target === scrollContainer || e.target === overlay.container) {
+            overlay.onUserClose?.();
+            overlay.destroy();
+        }
     });
 
     if (isBaseVideo) {
@@ -646,8 +857,14 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
             const isTargetText = typeof targetSrc === "object" && targetSrc.text;
 
             if (isBaseVideo || isTargetVideo || isTarget3D || isTargetAudio || isTargetText) {
+                const currentPid = activeComparisonViewer?.targetPid;
                 overlay.destroy();
-                showFullscreenPreview([targetSrc], isShiftClick);
+                showFullscreenPreview([targetSrc], isShiftClick, currentPid);
+                return;
+            }
+
+            if (!targetSrc) {
+                showPlaceholder();
                 return;
             }
 
@@ -669,8 +886,10 @@ function createComparisonViewer(baseSrc, onDestroy = () => {}) {
                     mediaB = null;
                 }
                 slider.style.display = "none";
+                hidePlaceholder();
                 mediaA.src = targetSrc;
                 mediaA.onload = () => {
+                    hidePlaceholder();
                     infoText.style.color = "#aaa";
                     infoText.textContent = "Click image to zoom (100%/Fit) | Shift+Click another card to compare.";
                     syncImageScales();
@@ -685,11 +904,27 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
     if (!imgSrcs || imgSrcs.length === 0) return;
 
     const item = imgSrcs[0];
+    const targetPid = pid || (typeof item === "object" && item ? item.pid : null);
+    const pidStr = targetPid ? String(targetPid) : null;
+
+    // Automatically manage Runtime Preview mode based on the card clicked
+    if (pidStr) {
+        if (isLatestOrActiveTask(pidStr)) {
+            if (!isRuntimePreviewActive) setRuntimePreviewEnabled(true, false);
+        } else {
+            if (isRuntimePreviewActive) setRuntimePreviewEnabled(false, false);
+        }
+    }
+
+    const handleUserClose = () => {
+        if (isRuntimePreviewActive) setRuntimePreviewEnabled(false, false);
+    };
 
     // Handle Text Output
     if (typeof item === "object" && item.text) {
         if (activeComparisonViewer) {
             if (activeComparisonViewer.isText) {
+                activeComparisonViewer.targetPid = pidStr;
                 activeComparisonViewer.loadTarget(item);
                 return;
             }
@@ -698,9 +933,11 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
         }
         activeComparisonViewer = createTextReader(
             item, 
-            (target) => showFullscreenPreview([target]), 
-            () => { activeComparisonViewer = null; }
+            (target) => showFullscreenPreview([target], false, pidStr), 
+            () => { activeComparisonViewer = null; },
+            handleUserClose
         );
+        if (activeComparisonViewer) activeComparisonViewer.targetPid = pidStr;
         return;
     }
 
@@ -710,6 +947,7 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
     if (is3DFormat(src)) {
         if (activeComparisonViewer) {
             if (activeComparisonViewer.is3D) {
+                activeComparisonViewer.targetPid = pidStr;
                 activeComparisonViewer.loadTarget(src);
                 return;
             }
@@ -718,9 +956,11 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
         }
         activeComparisonViewer = create3DViewer(
             src, 
-            (targetSrc) => showFullscreenPreview([targetSrc]), 
-            () => { activeComparisonViewer = null; }
+            (targetSrc) => showFullscreenPreview([targetSrc], false, pidStr), 
+            () => { activeComparisonViewer = null; },
+            handleUserClose
         );
+        if (activeComparisonViewer) activeComparisonViewer.targetPid = pidStr;
         return;
     }
 
@@ -728,6 +968,7 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
     if (isAudioFormat(src)) {
         if (activeComparisonViewer) {
             if (activeComparisonViewer.isAudio) {
+                activeComparisonViewer.targetPid = pidStr;
                 activeComparisonViewer.loadTarget(src);
                 return;
             }
@@ -736,9 +977,10 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
         }
         activeComparisonViewer = createAudioViewer(
             src, 
-            (targetSrc) => showFullscreenPreview([targetSrc]), 
+            (targetSrc) => showFullscreenPreview([targetSrc], false, pidStr), 
             () => { activeComparisonViewer = null; }
         );
+        if (activeComparisonViewer) activeComparisonViewer.targetPid = pidStr;
         return;
     }
     
@@ -748,6 +990,7 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
             activeComparisonViewer.destroy();
             activeComparisonViewer = null;
         } else {
+            activeComparisonViewer.targetPid = pidStr;
             activeComparisonViewer.loadTarget(src, isShiftClick);
             return;
         }
@@ -758,6 +1001,6 @@ export function showFullscreenPreview(imgSrcs, isShiftClick = false, pid = null)
         () => { activeComparisonViewer = null; }
     );
     if (activeComparisonViewer) {
-        activeComparisonViewer.targetPid = pid ? String(pid) : null;
+        activeComparisonViewer.targetPid = pidStr;
     }
 }

js/utils/nodeRenumber.js

@@ -1,8 +1,8 @@
 import { app } from "/scripts/app.js";
 import { syncAllNodeBadges } from "../comfy/nodes.js";
 
-export function showNotification(message, type = "success") {
-    const summary = type === "error" ? "Error" : type === "warn" ? "Warning" : "Node Renumber";
+export function showNotification(message, type = "success", title = null) {
+    const summary = title || (type === "error" ? "Error" : type === "warn" ? "Warning" : "Comfy Sidebar");
     
     if (app.extensionManager?.toast?.add) {
         app.extensionManager.toast.add({
@@ -61,6 +61,13 @@ export async function renumberNodesTopologically() {
         return;
     }
 
+    const confirmed = confirm(
+        "Renumbering will rewrite all node IDs on the canvas in topological execution order.\n\n" +
+        "This will fix intermediate node outputs showing as the final result, but may break external scripts that rely on specific node IDs\n\n" +
+        "Do you want to proceed?"
+    );
+    if (!confirmed) return;
+
     try {
         // Compute LiteGraph's topological execution order
         if (typeof app.graph.computeExecutionOrder === "function") {
@@ -139,7 +146,11 @@ export async function renumberNodesTopologically() {
 
 export async function setManualNodeId(targetNode = null) {
     if (!app.graph) return;
-    const node = targetNode || (app.canvas?.selected_nodes ? Object.values(app.canvas.selected_nodes)[0] : null);
+    const rawSelected = app.canvas?.selected_nodes;
+    const selectedList = rawSelected instanceof Map || rawSelected instanceof Set
+        ? Array.from(rawSelected.values())
+        : (Array.isArray(rawSelected) ? rawSelected : (rawSelected && typeof rawSelected === "object" ? Object.values(rawSelected) : []));
+    const node = targetNode || selectedList[0] || app.canvas?.current_active_node || null;
     if (!node) {
         showNotification("Please select a node first to change its ID.", "warn");
         return;

js/utils/overlay.js

@@ -1,11 +1,17 @@
 import { store } from "../core/store.js";
+import { findActiveSidebars, findPropertiesPanel } from "../comfy/adapter.js";
 
 export class SidebarOverlay {
     constructor(options = {}) {
         this.onDestroy = options.onDestroy || (() => {});
+        this.onUserClose = options.onUserClose || (() => {});
         this.cleanupFns = [];
+        this.observedElements = new Set();
 
-        // Root container
+        // Elevate sidebars above overlay
+        document.body.classList.add("comfy-sidebar-overlay-active");
+
+        // Root container: visual backdrop (covers 100% flush from sidebar to sidebar, zero gap)
         this.container = document.createElement("div");
         this.container.className = `comfy-sidebar-comparison-overlay ${options.className || ""}`;
         Object.assign(this.container.style, {
@@ -15,9 +21,23 @@ export class SidebarOverlay {
             color: "var(--fg-color, #eee)",
             display: "flex", flexDirection: "column", alignItems: "center",
             justifyContent: "center", zIndex: "1000", boxSizing: "border-box",
-            overflow: "hidden", pointerEvents: "auto", userSelect: "none"
+            overflow: "hidden", pointerEvents: "none", userSelect: "none"
         });
 
+        // Interactive backdrop: insets 6px from each sidebar so the border zones pass clicks to the resizers
+        this.backdrop = document.createElement("div");
+        Object.assign(this.backdrop.style, {
+            position: "absolute", top: "0", bottom: "0", left: "6px", right: "6px",
+            pointerEvents: "auto", zIndex: "1"
+        });
+        this.backdrop.addEventListener("click", (e) => {
+            if (e.target === this.backdrop) {
+                this.onUserClose();
+                this.destroy();
+            }
+        });
+        this.container.appendChild(this.backdrop);
+
         // Close button
         this.closeBtn = document.createElement("span");
         this.closeBtn.className = "pi pi-times";
@@ -29,7 +49,7 @@ export class SidebarOverlay {
             transition: "all 0.15s ease",
             background: "var(--comfy-input-bg, rgba(20, 20, 20, 0.6))", 
             border: "1px solid var(--border-color, rgba(255, 255, 255, 0.1))",
-            borderRadius: "50%", padding: "6px"
+            borderRadius: "50%", padding: "6px", pointerEvents: "auto"
         });
         this.closeBtn.onmouseenter = () => {
             this.closeBtn.style.color = "var(--fg-color, #fff)";
@@ -40,13 +60,19 @@ export class SidebarOverlay {
             this.closeBtn.style.borderColor = "var(--border-color, rgba(255, 255, 255, 0.1))";
         };
 
-        this.closeBtn.onclick = () => this.destroy();
+        this.closeBtn.onclick = () => {
+            this.onUserClose();
+            this.destroy();
+        };
         this.container.appendChild(this.closeBtn);
 
-        // Backdrop click to close
-        this.container.addEventListener("click", (e) => {
-            if (e.target === this.container) this.destroy();
-        });
+        // ResizeObserver to track live drag-resizing on all active sidebars
+        if (window.ResizeObserver) {
+            this.ro = new ResizeObserver(() => {
+                this.updateOverlayBounds();
+            });
+            this.cleanupFns.push(() => this.ro.disconnect());
+        }
 
         // Sidebar boundary alignment
         this.updateOverlayBounds = this.updateOverlayBounds.bind(this);
@@ -54,17 +80,27 @@ export class SidebarOverlay {
         window.addEventListener("resize", this.updateOverlayBounds);
         this.cleanupFns.push(() => window.removeEventListener("resize", this.updateOverlayBounds));
 
-        const sidebarEl = store.ui.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || store.ui.sidebarContainer;
-        if (sidebarEl && window.ResizeObserver) {
-            const ro = new ResizeObserver(this.updateOverlayBounds);
-            ro.observe(sidebarEl);
-            this.cleanupFns.push(() => ro.disconnect());
+        // Live observer for opening/closing panels or layout changes
+        if (window.MutationObserver) {
+            let updateScheduled = false;
+            const mo = new MutationObserver(() => {
+                if (!updateScheduled) {
+                    updateScheduled = true;
+                    requestAnimationFrame(() => {
+                        this.updateOverlayBounds();
+                        updateScheduled = false;
+                    });
+                }
+            });
+            mo.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["style", "class"] });
+            this.cleanupFns.push(() => mo.disconnect());
         }
 
         // Global Key Handler (Esc to close)
         const onKeyDown = (e) => {
             if (e.key === "Escape") {
                 e.preventDefault();
+                this.onUserClose();
                 this.destroy();
             }
             if (options.onKeyDown) options.onKeyDown(e);
@@ -75,29 +111,62 @@ export class SidebarOverlay {
         document.body.appendChild(this.container);
     }
 
+    observeElement(el) {
+        if (!el || !this.ro || this.observedElements.has(el)) return;
+        this.observedElements.add(el);
+        this.ro.observe(el);
+    }
+
     updateOverlayBounds() {
-        const sidebarEl = store.ui.sidebarContainer?.closest('.comfyui-sidebar, .comfy-sidebar, .p-sidebar, [class*="sidebar"]') || store.ui.sidebarContainer;
-        if (sidebarEl && sidebarEl.offsetWidth > 0 && sidebarEl.isConnected) {
-            const rect = sidebarEl.getBoundingClientRect();
-            if (rect.left < window.innerWidth / 2) {
-                const leftOffset = Math.max(0, rect.right);
-                this.container.style.left = `${leftOffset}px`;
-                this.container.style.width = `calc(100vw - ${leftOffset}px)`;
-                this.container.style.right = "0px";
-            } else {
-                const rightOffset = Math.max(0, window.innerWidth - rect.left);
-                this.container.style.left = "0px";
-                this.container.style.width = `calc(100vw - ${rightOffset}px)`;
-                this.container.style.right = `${rightOffset}px`;
+        let leftOffset = 0;
+        let rightOffset = 0;
+        let topOffset = 0;
+
+        const winW = window.innerWidth;
+        const midX = winW / 2;
+
+        try {
+            const { leftPanels, rightPanels } = findActiveSidebars();
+
+            [...leftPanels, ...rightPanels].forEach(p => this.observeElement(p));
+
+            for (const el of leftPanels) {
+                const rect = el.getBoundingClientRect();
+                if (rect.right > 0 && rect.right < midX) {
+                    leftOffset = Math.max(leftOffset, Math.round(rect.right));
+                }
+                if (rect.top > 0 && rect.top < 120) {
+                    topOffset = Math.max(topOffset, Math.round(rect.top));
+                }
             }
-            this.container.style.top = `${Math.max(0, rect.top)}px`;
-            this.container.style.height = `calc(100vh - ${Math.max(0, rect.top)}px)`;
-        } else {
-            this.container.style.left = "0px";
-            this.container.style.width = "100vw";
-            this.container.style.top = "0px";
-            this.container.style.height = "100vh";
+
+            for (const el of rightPanels) {
+                const rect = el.getBoundingClientRect();
+                if (rect.left > midX && rect.left < winW) {
+                    rightOffset = Math.max(rightOffset, Math.round(winW - rect.left));
+                }
+                if (rect.top > 0 && rect.top < 120) {
+                    topOffset = Math.max(topOffset, Math.round(rect.top));
+                }
+            }
+        } catch (e) {
+            console.error("Comfy Sidebar: Error finding active sidebars:", e);
         }
+
+        // Safety clamp: offsets can never exceed half screen width
+        leftOffset = Math.min(midX - 50, Math.max(0, leftOffset));
+        rightOffset = Math.min(midX - 50, Math.max(0, rightOffset));
+        topOffset = Math.max(0, topOffset);
+
+        this.container.style.left = `${leftOffset}px`;
+        this.container.style.right = `${rightOffset}px`;
+        this.container.style.width = `calc(100vw - ${leftOffset + rightOffset}px)`;
+        this.container.style.top = `${topOffset}px`;
+        this.container.style.height = `calc(100vh - ${topOffset}px)`;
+
+        // Crisp 1px visible separator lines along active sidebar borders
+        this.container.style.borderLeft = leftOffset > 0 ? "1px solid var(--border-color, rgba(255, 255, 255, 0.22))" : "none";
+        this.container.style.borderRight = rightOffset > 0 ? "1px solid var(--border-color, rgba(255, 255, 255, 0.22))" : "none";
     }
 
     addCleanup(fn) {
@@ -105,6 +174,8 @@ export class SidebarOverlay {
     }
 
     destroy() {
+        document.body.classList.remove("comfy-sidebar-overlay-active");
+
         for (const fn of this.cleanupFns.splice(0)) {
             try { fn(); } catch (e) {}
         }

js/utils/styles.js

@@ -30,7 +30,7 @@ export function injectStyles() {
             display: flex !important; 
         }
 
-        /* Prevent action hover buttons (Delete/JSON/Node) from showing on pending & running cards */
+        /* Prevent action hover buttons from showing on pending & running cards */
         .comfy-sidebar-card.pending .comfy-sidebar-hover-panel,
         .comfy-sidebar-card.active .comfy-sidebar-hover-panel,
         .comfy-sidebar-card.pending .comfy-sidebar-left-hover-panel,
@@ -41,7 +41,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; pointer-events: none; z-index: 10; color: #fff;
         }
 
         .comfy-sidebar-queue-cancel-btn {
@@ -57,6 +57,7 @@ export function injectStyles() {
             cursor: pointer !important;
             transition: background-color 0.15s ease, color 0.15s ease !important;
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+            z-index: 25 !important;
         }
 
         .comfy-sidebar-queue-cancel-btn:hover {
@@ -338,6 +339,26 @@ export function injectStyles() {
         }
 
         /* Audio Preview Cards */
+        /* Generic Background Thumbnail for Non-Image Cards (Audio, 3D, File) */
+        .comfy-sidebar-card-bg-img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            filter: brightness(0.35);
+            transition: filter 0.2s ease, transform 0.2s ease;
+            pointer-events: none;
+            z-index: 1;
+        }
+
+        .comfy-sidebar-audio-wrapper:hover .comfy-sidebar-card-bg-img,
+        .comfy-sidebar-file-wrapper:hover .comfy-sidebar-card-bg-img {
+            filter: brightness(0.5);
+            transform: scale(1.03);
+        }
+
         .comfy-sidebar-audio-wrapper {
             width: 100%;
             min-height: 110px;
@@ -412,7 +433,7 @@ export function injectStyles() {
             100% { transform: scaleY(1.3); }
         }
 
-        /* Generic / Unknown File Preview Cards (LoRA, Checkpoint, Latent, etc.) */
+        /* Generic File Preview Cards */
         .comfy-sidebar-file-wrapper {
             width: 100%;
             min-height: 88px;
@@ -424,6 +445,7 @@ export function injectStyles() {
             padding: 8px 10px;
             box-sizing: border-box;
             position: relative;
+            overflow: hidden;
             border: 1px solid rgba(255, 255, 255, 0.12);
             transition: all 0.2s ease-in-out;
             user-select: none;
@@ -512,6 +534,61 @@ export function injectStyles() {
             border-color: #3b82f6;
             background: rgba(59, 130, 246, 0.08);
         }
+
+        /* Elevate outer sidebar dock containers above the preview overlay */
+        body.comfy-sidebar-overlay-active aside,
+        body.comfy-sidebar-overlay-active nav,
+        body.comfy-sidebar-overlay-active .comfyui-sidebar,
+        body.comfy-sidebar-overlay-active .side-tool-bar-container,
+        body.comfy-sidebar-overlay-active .sidebar-content-container,
+        body.comfy-sidebar-overlay-active .comfyui-sidebar-content,
+        body.comfy-sidebar-overlay-active .p-sidebar,
+        body.comfy-sidebar-overlay-active .p-sidebar-right,
+        body.comfy-sidebar-overlay-active [data-testid="properties-panel"],
+        body.comfy-sidebar-overlay-active [data-testid="workflow-overview-panel"],
+        body.comfy-sidebar-overlay-active [class*="properties-panel"],
+        body.comfy-sidebar-overlay-active [class*="resize-handle"],
+        body.comfy-sidebar-overlay-active [class*="resizer"],
+        body.comfy-sidebar-overlay-active [class*="splitter"],
+        body.comfy-sidebar-overlay-active [class*="gutter"],
+        body.comfy-sidebar-overlay-active [role="separator"] {
+            z-index: 1005 !important;
+        }
+
+        /* Explicit card element layering so badges and [X] are ALWAYS on top of images */
+        .comfy-sidebar-card .comfy-sidebar-media-wrapper {
+            z-index: 1 !important;
+        }
+        .comfy-sidebar-card-timer {
+            z-index: 10 !important;
+        }
+        .comfy-sidebar-queue-cancel-btn {
+            z-index: 25 !important;
+        }
+        .comfy-sidebar-status-badge {
+            z-index: 30 !important;
+        }
+
+        /* Slim down the Queue sidebar scrollbar so it stops colliding with the separator */
+        .comfyui-sidebar ::-webkit-scrollbar,
+        .comfy-sidebar ::-webkit-scrollbar,
+        [class*="sidebar-content"] ::-webkit-scrollbar,
+        .sidebar-content-container ::-webkit-scrollbar {
+            width: 6px !important;
+        }
+        .comfyui-sidebar ::-webkit-scrollbar-thumb,
+        .comfy-sidebar ::-webkit-scrollbar-thumb,
+        [class*="sidebar-content"] ::-webkit-scrollbar-thumb,
+        .sidebar-content-container ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.25) !important;
+            border-radius: 3px !important;
+        }
+
+        /* Smooth animation for the circular loader */
+        @keyframes comfy-sidebar-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
     `;
     document.head.appendChild(style);
 }

js/utils/text_reader.js

@@ -39,7 +39,7 @@ function parseInlineMarkdown(html) {
     html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
     html = html.replace(/_(.*?)_/g, '<em>$1</em>');
     html = html.replace(/~~(.*?)~~/g, '<span style="text-decoration:line-through;color:#888;">$1</span>');
-    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:#61afef;text-decoration:none;border-bottom:1px dashed #61afef;cursor:pointer;">$1</a>');
+    html = html.replace(/\[([^\]]+)\]\(((?:https?:\/\/|\/)[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" style="color:#61afef;text-decoration:none;border-bottom:1px dashed #61afef;cursor:pointer;">$1</a>');
     html = html.replace(/\$(?!\s)([^\$]+?)(?<!\s)\$/g, '<span style="font-family:\'Times New Roman\',Times,serif;font-size:14px;color:#e5c07b;font-style:italic;padding:0 2px;">$1</span>');
     return html;
 }
@@ -192,12 +192,12 @@ function parseMarkdown(text) {
     return htmlLines.join("\n");
 }
 
-export function createTextReader(textData, onSwitchMedia = () => {}, onDestroy = () => {}) {
+export function createTextReader(textData, onSwitchMedia = () => {}, onDestroy = () => {}, onUserClose = () => {}) {
     let rawText = typeof textData === "object" ? (textData.text || "") : String(textData);
     let pid = typeof textData === "object" ? textData.pid : "";
     let isMarkdownMode = true;
 
-    const overlay = new SidebarOverlay({ onDestroy });
+    const overlay = new SidebarOverlay({ onDestroy, onUserClose });
 
     const readerBox = document.createElement("div");
     Object.assign(readerBox.style, {
@@ -208,25 +208,48 @@ export function createTextReader(textData, onSwitchMedia = () => {}, onDestroy =
         padding: "20px 24px", width: "85%", maxWidth: "840px", height: "80vh",
         boxShadow: "0 12px 40px rgba(0,0,0,0.4)", display: "flex",
         flexDirection: "column", gap: "14px", zIndex: "20",
-        color: "var(--fg-color, #eee)"
+        color: "var(--fg-color, #eee)",
+        pointerEvents: "auto"
     });
 
+    const formatTitle = (id) => {
+        if (!id) return "Text Output";
+        const shortId = id.length > 10 ? `${id.slice(0, 8)}…` : id;
+        return `Text Output #${shortId}`;
+    };
+
     const headerRow = document.createElement("div");
-    Object.assign(headerRow.style, { display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid rgba(255,255,255,0.1)", paddingBottom: "12px" });
+    Object.assign(headerRow.style, { 
+        display: "flex", alignItems: "center", justifyContent: "space-between", 
+        borderBottom: "1px solid rgba(255,255,255,0.1)", paddingBottom: "12px",
+        flexWrap: "wrap", gap: "10px"
+    });
 
     const titleInfo = document.createElement("div");
-    Object.assign(titleInfo.style, { display: "flex", alignItems: "center", gap: "10px" });
+    Object.assign(titleInfo.style, { 
+        display: "flex", alignItems: "center", gap: "10px", 
+        minWidth: "0", flex: "1 1 auto", overflow: "hidden" 
+    });
+
     const title = document.createElement("span");
-    title.textContent = pid ? `Text Output #${pid}` : "Text Output";
-    Object.assign(title.style, { fontSize: "14px", fontWeight: "bold", color: "#f8fafc", whiteSpace: "nowrap" });
+    title.textContent = formatTitle(pid);
+    title.title = pid ? `Text Output #${pid}` : "Text Output";
+    Object.assign(title.style, { 
+        fontSize: "14px", fontWeight: "bold", color: "#f8fafc", 
+        whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", flexShrink: "1" 
+    });
 
     const statsBadge = document.createElement("span");
-    Object.assign(statsBadge.style, { fontSize: "10px", color: "#94a3b8", background: "rgba(255,255,255,0.06)", padding: "3px 8px", borderRadius: "4px", fontFamily: "monospace", whiteSpace: "nowrap" });
+    Object.assign(statsBadge.style, { 
+        fontSize: "10px", color: "#94a3b8", background: "rgba(255,255,255,0.06)", 
+        padding: "3px 8px", borderRadius: "4px", fontFamily: "monospace", 
+        whiteSpace: "nowrap", flexShrink: "0" 
+    });
 
     titleInfo.append(title, statsBadge);
 
     const actionsRow = document.createElement("div");
-    Object.assign(actionsRow.style, { display: "flex", gap: "8px", alignItems: "center" });
+    Object.assign(actionsRow.style, { display: "flex", gap: "8px", alignItems: "center", flexShrink: "0" });
 
     const modeBtn = document.createElement("button");
     Object.assign(modeBtn.style, {
@@ -328,7 +351,8 @@ export function createTextReader(textData, onSwitchMedia = () => {}, onDestroy =
             }
             rawText = targetData.text || "";
             pid = targetData.pid || "";
-            title.textContent = pid ? `Text Output #${pid}` : "Text Output";
+            title.textContent = formatTitle(pid);
+            title.title = pid ? `Text Output #${pid}` : "Text Output";
             updateView();
         },
         destroy: () => overlay.destroy()

js/utils/utils.js

@@ -292,18 +292,18 @@ export function findTextsInOutputs(outputs, rawWorkflow) {
             const val = outputs[nodeId][key];
             if (Array.isArray(val)) {
                 val.forEach(item => {
-                    if (typeof item === 'string' && !FILE_EXT_REGEX.test(item.trim())) {
+                    if (typeof item === 'string' && item.trim().length > 0 && !FILE_EXT_REGEX.test(item.trim())) {
                         list.push(item);
                     } else if (item && typeof item === 'object' && item.text) {
-                        if (Array.isArray(item.text)) list.push(...item.text);
-                        else if (typeof item.text === 'string') list.push(item.text);
+                        if (Array.isArray(item.text)) list.push(...item.text.filter(t => typeof t === 'string' && t.trim().length > 0));
+                        else if (typeof item.text === 'string' && item.text.trim().length > 0) list.push(item.text);
                     }
                 });
-            } else if (typeof val === 'string' && !FILE_EXT_REGEX.test(val.trim())) {
+            } else if (typeof val === 'string' && val.trim().length > 0 && !FILE_EXT_REGEX.test(val.trim())) {
                 list.push(val);
             } else if (val && typeof val === 'object' && val.text) {
-                if (Array.isArray(val.text)) list.push(...val.text);
-                else if (typeof val.text === 'string') list.push(val.text);
+                if (Array.isArray(val.text)) list.push(...val.text.filter(t => typeof t === 'string' && t.trim().length > 0));
+                else if (typeof val.text === 'string' && val.text.trim().length > 0) list.push(val.text);
             }
         }
     }
@@ -314,7 +314,26 @@ export function getRunOutputs(nodeOutputs, rawWorkflow, promptGraph = null) {
     const workflow = parseWorkflow(rawWorkflow);
     const list = [];
     if (!nodeOutputs) return list;
-    for (const nodeId in nodeOutputs) {
+
+    // Track node execution order so the final executed node is always sorted last
+    const nodeOrderMap = new Map();
+    if (workflow && Array.isArray(workflow.nodes)) {
+        workflow.nodes.forEach((n, idx) => {
+            const order = typeof n.order === "number" ? n.order : idx;
+            nodeOrderMap.set(String(n.id), order);
+        });
+    }
+
+    const nodeIds = Object.keys(nodeOutputs);
+    // Sort node IDs by real execution order (lowest executes first; highest executes last)
+    nodeIds.sort((a, b) => {
+        const orderA = nodeOrderMap.has(String(a)) ? nodeOrderMap.get(String(a)) : Infinity;
+        const orderB = nodeOrderMap.has(String(b)) ? nodeOrderMap.get(String(b)) : Infinity;
+        if (orderA !== orderB) return orderA - orderB;
+        return 0;
+    });
+
+    for (const nodeId of nodeIds) {
         if (isNodeIgnored(nodeId, workflow)) continue;
         const nodeOut = nodeOutputs[nodeId];
         if (!nodeOut || (typeof nodeOut === "object" && Object.keys(nodeOut).length === 0)) {

js/utils/viewer3d.js

@@ -36,19 +36,9 @@ async function getThreeLibs() {
     };
 
     try {
-        let loaded = null;
-        // 1. Try local Python proxy on 'self' (bypasses CSP & --disable-api-nodes)
-        try {
-            loaded = await loadFromBase("/comfy-sidebar/three-proxy/");
-            window.__COMFY_SIDEBAR_THREE_BASE = "/comfy-sidebar/three-proxy/";
-        } catch (proxyErr) {
-            // 2. Fall back to direct CDN if proxy is unreachable
-            console.warn("Comfy Sidebar: Proxy unavailable, trying direct CDN...", proxyErr);
-            loaded = await loadFromBase("https://esm.sh/");
-            window.__COMFY_SIDEBAR_THREE_BASE = "https://esm.sh/";
-        }
-
-        const { three, controls, gltf, obj, stl, ply } = loaded;
+        const base = "https://esm.sh/";
+        window.__COMFY_SIDEBAR_THREE_BASE = base;
+        const { three, controls, gltf, obj, stl, ply } = await loadFromBase(base);
         cachedThreeLibs = {
             ...three,
             OrbitControls: controls.OrbitControls || controls.default || controls,
@@ -64,10 +54,11 @@ async function getThreeLibs() {
     }
 }
 
-export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () => {}) {
+export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = () => {}, onUserClose = () => {}) {
     const overlay = new SidebarOverlay({
         className: "comfy-sidebar-3d-overlay-root",
-        onDestroy
+        onDestroy,
+        onUserClose
     });
 
     const header = document.createElement("div");
@@ -232,7 +223,7 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
             loadingSpinner.style.display = "flex";
             loadingSpinner.innerHTML = `<span class="pi pi-spin pi-spinner"></span> Exporting ${format}...`;
 
-            const base = window.__COMFY_SIDEBAR_THREE_BASE || "/comfy-sidebar/three-proxy/";
+            const base = window.__COMFY_SIDEBAR_THREE_BASE || "https://esm.sh/";
             if (format === "OBJ") {
                 const mod = await import(`${base}three@0.170.0/examples/jsm/exporters/OBJExporter.js`);
                 const OBJExporter = mod.OBJExporter || mod.default || mod;
@@ -283,9 +274,11 @@ export function create3DViewer(baseSrc, onSwitchMedia = () => {}, onDestroy = ()
         THREE = await getThreeLibs();
         if (!THREE) {
             loadingSpinner.innerHTML = `
-                <div style="text-align: center; max-width: 320px; line-height: 1.4;">
-                    <span style="color: #f87171; font-weight: bold;">Failed to load 3D engine.</span><br>
-                    <span style="font-size: 11px; color: #94a3b8;">Blocked by ComfyUI Content Security Policy (CSP). Check if <code>--disable-api-nodes</code> is enabled in your startup arguments, or vendor Three.js locally.</span>
+                <div style="text-align: center; max-width: 340px; line-height: 1.4; padding: 6px;">
+                    <span style="color: #f87171; font-weight: bold; font-size: 13px;">Failed to load 3D engine.</span><br>
+                    <span style="font-size: 11px; color: #cbd5e1; display: inline-block; margin-top: 4px;">
+                        Unable to download 3D libraries. Make sure your computer is online, or check if <code>--disable-api-nodes</code> is blocking external network requests.
+                    </span>
                 </div>
             `;
             return;

pyproject.toml

@@ -1,13 +1,16 @@
 [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.6.0"
+description = "A compact and powerful layout overhaul for ComfyUI that makes generation results easier to browse, preview, compare, and manage."
+version = "1.7.1"
 license = { file = "LICENSE" }
-dependencies = []
+dependencies = [
+    "send2trash>=1.8.0",
+]
 
 [project.urls]
 Repository = "https://github.com/m0rtus59/ComfyUI-ComfySidebar"
 
 [tool.comfy]
 PublisherId = "soundslikethunder"
-DisplayName = "Comfy Sidebar"
+DisplayName = "Comfy Sidebar"
+Icon = "https://raw.githubusercontent.com/m0rtus59/ComfyUI-ComfySidebar/main/assets/icon.png"

requirements.txt

@@ -0,0 +1 @@
+send2trash>=1.8.0