Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The new ComfyUI frontend (v1.33.1+) removed the sidebar Queue Panel with image p
| 🏷️ **Status Tags** | Color-coded tags with animated spinner for running tasks |
| 🖱️ **Context Menu** | Right-click to delete a task or load its workflow |
| 🔢 **Pending Badge** | Sidebar icon shows count of pending tasks |
| 🧹 **Clear All** | One-click button to clear the entire queue & history |
| 🧹 **Two Clear Buttons** | Clear pending, clear history — or hold the bin to clear both |
| ⚡ **No Frontend Patching** | Custom-node plugin — no frontend source files are modified |

---
Expand All @@ -57,7 +57,7 @@ cd ComfyUI/custom_nodes
git clone https://github.com/Zhen-Bo/comfyui_queue_sidebar.git
```

Restart ComfyUI. The **Queue** tab will appear in the sidebar (between "Assets" and "Node Library").
Restart ComfyUI. The **Queue** tab will appear in the sidebar's icon rail, alongside ComfyUI's other extension tabs.

---

Expand All @@ -71,7 +71,7 @@ Delete the `comfyui_queue_sidebar` folder from `custom_nodes/`.

- **ComfyUI frontend** v1.33.1+ (tested up to 1.39.19) · **ComfyUI core** tested up to 0.16.4
- Works alongside the built-in bottom-panel queue without conflicts
- The plugin uses the public extension API for registration and events. It additionally hooks a small number of internal APIs (e.g. `app.queuePrompt`, sidebar tab ordering) to provide a seamless experience — all such integration points are centralized in [`comfyAdapter.js`](web/lib/comfyAdapter.js) with feature detection and graceful degradation if the upstream shape changes
- The plugin uses the public extension API for registration and events. A small number of ComfyUI-internal touch points — tab badge updates, locale detection, and queue/history schema normalisation — are centralized in [`comfyAdapter.js`](web/lib/comfyAdapter.js) with feature detection and graceful degradation if the upstream shape changes

---

Expand Down
6 changes: 3 additions & 3 deletions README_zhTW.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ ComfyUI 新版前端(v1.33.1+)移除了側邊欄中帶有圖片預覽的 Que
| 🏷️ **狀態標籤** | 彩色標籤搭配旋轉動畫顯示執行中的任務 |
| 🖱️ **右鍵選單** | 右鍵刪除任務或載入其工作流程 |
| 🔢 **等待徽章** | 側邊欄圖示上顯示等待中的任務數量 |
| 🧹 **一鍵清除** | 一鍵清除所有佇列與歷史記錄 |
| 🧹 **兩顆清除鈕** | 分別清等待中與歷史;長按垃圾桶則兩者一起清除 |
| ⚡ **免改前端** | 自訂節點插件——不修改任何前端原始檔案 |

---
Expand All @@ -57,7 +57,7 @@ cd ComfyUI/custom_nodes
git clone https://github.com/Zhen-Bo/comfyui_queue_sidebar.git
```

重新啟動 ComfyUI。**Queue** 標籤會出現在側邊欄(位於「資產」和「節點」之間)。
重新啟動 ComfyUI。**Queue** 標籤會出現在側邊欄圖示列中,與其他擴充標籤並列。

---

Expand All @@ -71,7 +71,7 @@ git clone https://github.com/Zhen-Bo/comfyui_queue_sidebar.git

- **ComfyUI 前端** v1.33.1+(已測試至 1.39.19)· **ComfyUI 核心** 已測試至 0.16.4
- 與內建的底部面板佇列並行運作,不會衝突
- 插件使用公開的擴充 API 進行註冊和事件監聽。此外會掛鉤少量內部 API(如 `app.queuePrompt`、側邊欄分頁排序)以提供無縫體驗——所有此類整合點均集中於 [`comfyAdapter.js`](web/lib/comfyAdapter.js),搭配功能偵測與優雅降級機制
- 插件使用公開的擴充 API 進行註冊和事件監聽。少量 ComfyUI 內部接觸點——badge 更新、locale 偵測、佇列/歷史 schema 正規化——集中於 [`comfyAdapter.js`](web/lib/comfyAdapter.js),搭配功能偵測與優雅降級機制

---

Expand Down
43 changes: 29 additions & 14 deletions docs/ARCHITECTURE.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@
The extension is a set of **Vanilla JS ES modules** loaded by ComfyUI from `web/` (declared
by `WEB_DIRECTORY` in `__init__.py`). The browser executes them as native modules that
`import` ComfyUI's own `app` and `api` globals. There is no build step and no runtime
dependency. All coupling to ComfyUI internals is isolated in a single module,
`comfyAdapter.js`.
dependency. `comfyAdapter.js` centralizes ComfyUI schema and locale adaptation; a small
number of direct `app` calls exist elsewhere at named call sites — sidebar
registration/toggle in `queue-sidebar.js`, and `app.loadGraphData` in `contextMenu.js` and
`gallery.js`.

---

Expand Down Expand Up @@ -50,19 +52,19 @@ flowchart TB
main[queue-sidebar.js<br/>state · WS handlers · render · registration]
end

subgraph coupling[ComfyUI Coupling Point]
subgraph coupling[ComfyUI Schema/Locale Adapter]
adapter[comfyAdapter.js<br/>badge · schema · locale]
end

subgraph uimod[UI Modules]
preview[preview.js<br/>card previews]
gallery[gallery.js<br/>view mode overlay]
ctx[contextMenu.js<br/>right-click actions]
toolbar[toolbar.js<br/>fit · clear]
toolbar[toolbar.js<br/>clear]
end

subgraph core[Core / Utilities]
cache[outputCache.js<br/>localStorage + firstOutput]
cache[outputCache.js<br/>localStorage + taskOutputs/firstOutput]
helpers[helpers.js<br/>el · mediaType · safeApi · toast]
constants[constants.js<br/>styles · enums]
end
Expand All @@ -73,7 +75,6 @@ flowchart TB
main --> ctx
main --> toolbar
main --> cache
preview --> cache
preview --> helpers
gallery --> helpers
gallery --> constants
Expand All @@ -82,7 +83,10 @@ flowchart TB
toolbar --> helpers
toolbar --> constants
preview --> constants
adapter -.reads.-> comfyglobals[app / api globals]
adapter -.app param.-> comfyglobals[app / api globals]
main -.registers.-> comfyglobals
ctx -.loadGraphData.-> comfyglobals
gallery -.loadGraphData.-> comfyglobals
helpers --> constants
```

Expand Down Expand Up @@ -158,10 +162,10 @@ flowchart LR
clip[(Clipboard)]
graph[app.loadGraphData]

server -->|REST + WS| state
server -->|REST + WS incl. executed| state
state --> render --> dom
server -->|executed output| cache
cache -->|firstOutput| render
state -->|onExecuted: saveOutputCache| cache
cache -->|taskOutputs/firstOutput| render
dom -->|click card| gallery
gallery -->|Ctrl+C: fetch original blob| clip
gallery -->|Load workflow| graph
Expand All @@ -174,9 +178,9 @@ flowchart LR
| Decision | Where | Rationale |
|---|---|---|
| Vanilla JS, no framework / build | whole `web/` | native ES modules; no framework or build step |
| Single ComfyUI coupling point | `comfyAdapter.js` | one file to update when upstream changes |
| Centralized schema/locale adapter | `comfyAdapter.js` | one file to update when the queue/history schema or locale setting shape changes upstream |
| Decouple from ComfyUI internals | remove tab-reorder + queuePrompt patch | registry compliance + upgrade safety |
| Cache-first output resolution | `outputCache.js` | correct image for multi-stage workflows |
| Cache-first, single-node output resolution | `outputCache.js` | correct image for multi-stage workflows; never flattens across nodes |
| Feature-detected degradation | `comfyAdapter.js` | never break ComfyUI if internals move |

---
Expand All @@ -190,7 +194,18 @@ flowchart LR
| `preview.js` | Card preview rendering (image/video/running/pending) | `preview.test.js` |
| `gallery.js` | View mode overlay: nav, zoom, pan, copy, load workflow | `gallery.test.js` *(new)* |
| `contextMenu.js` | Right-click actions per status | `contextMenu.test.js` |
| `toolbar.js` | Fit toggle, clear-all with confirm | (via render/helpers) |
| `outputCache.js` | `localStorage` cache + `firstOutput` resolver | `outputCache.test.js` |
| `toolbar.js` | Clear pending + interrupt (shared drawer-button helper for reveal/hide), clear history (hold to clear all) | `toolbar.test.js` |
| `outputCache.js` | `localStorage` cache + `taskOutputs`/`firstOutput` resolvers | `outputCache.test.js` |
| `helpers.js` | `el`, `mediaType`, `safeApi`, `showToast` | `helpers.test.js` |
| `constants.js` | Shared styles, extension enums | — |

---

## 9. Asset Licensing

The queue sidebar uses an inline SVG derived from Lucide's `list-x` icon for the Clear Pending toolbar button (`toolbar.js`).

- **Origin**: [Lucide Icons](https://lucide.dev) (`list-x`)
- **License**: ISC License
- **Copyright**: Copyright (c) 2026 Lucide Icons and Contributors
- **License text**: https://github.com/lucide-icons/lucide/blob/main/LICENSE
Loading
Loading