Add sidebar Category/Package tabs, theme settings, and bug fixes (v0.2.5)

- Sidebar Nodes tab: add Category and Package sub-tabs with dropdown filtering
  - Category: filter nodes by top-level category via /object_info
  - Package: filter nodes by custom node package name (DualCLIPLoader/CLIPLoader fallback)
- Sidebar theme settings: add gear button to customize panel colors (bg, text, border, etc.) with live preview; saved to localStorage
- Sidebar Workflows: hide .index.json from workflow list
- Sidebar Models By Type: fix TextEncoder not appearing (use DualCLIPLoader→CLIPLoader fallback for clip_name1)
- Workflow tab: hide .index.json from workflow list
- Help tab: update Workflow Studio Library section with new features
- Remove unused buildDropdown function

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

DEVLOG.md

@@ -1,5 +1,87 @@
 # DEVLOG - ComfyUI-Workflow-Studio
 
+## 2026-04-04: v0.2.5 追加修正
+
+### 概要
+- サイドパネルModels→By TypeでTextEncoderが表示されない問題を修正
+- サイドパネルのWorkflowsタブでも `.index.json` を非表示に
+- 未使用の `buildDropdown` 関数を削除
+
+### 変更内容
+
+#### `web/comfyui/node_sets_menu.js`
+
+**TextEncoder取得ロジック修正:**
+- 変更前: `/api/wfm/models?type=textencoder`（存在しないエンドポイント）
+- 変更後: `DualCLIPLoader` → `CLIPLoader` の順に `/object_info/{cls}` を試して `clip_name1` を取得（`comfyui-client.js` の `fetchTextEncoders()` と同じロジック）
+
+**`.index.json` 非表示:**
+- `loadWfData()`: `state.wfList = workflows.filter(w => w.filename !== ".index.json")` でサイドパネルのWorkflowsタブからも除外
+
+**未使用関数削除:**
+- `buildDropdown()` 関数を削除（Category/Packageドロップダウンは個別実装に置き換え済みだったため不要）
+
+---
+
+## 2026-04-03: v0.2.5 サイドパネル Category/Package サブタブ・テーマ設定・Workflow修正
+
+### 概要
+- サイドパネル（Workflow Studio Library）のNodesタブに📂 Category / 🧩 Packageサブタブを追加
+- サイドパネルのヘッダーに⚙テーマ設定ボタンを追加（背景・文字・ボーダー色カスタマイズ）
+- ワークフロータブで `.index.json` を非表示に
+
+### 変更内容
+
+#### `web/comfyui/node_sets_menu.js` — Nodesサブタブ追加・テーマ設定
+
+**Nodesタブのrow2サブタブ構成変更:**
+- 変更前: row2 = `☰ Sets`
+- 変更後: row2 = `☰ Sets` / `📂 Category` / `🧩 Package`
+
+**state追加:**
+- `activeNodeCategory: ""` — Categoryサブタブで選択中のカテゴリ値
+- `activeNodePackage: ""` — Packageサブタブで選択中のパッケージ値
+- `objectInfo: {}` — `/object_info` APIから取得した全ノード情報（パッケージ判定に使用）
+
+**`loadData()` 変更:**
+- `fetchObjectInfo()` を追加して `/object_info` を並行取得
+- `state.objectInfo` に保存
+
+**新規関数:**
+- `fetchObjectInfo()` — `GET /object_info` で全ノード情報を取得
+- `extractPackageName(pythonModule)` — `python_module` からパッケージ名を抽出
+- `getNodeCategory(nodeType)` — `state.objectInfo` 優先でカテゴリを取得（LiteGraphフォールバック）
+- `getNodePackage(nodeType)` — `state.objectInfo[nodeType].python_module` からパッケージ名を取得
+- `renderNodesByCategory(container)` — カテゴリドロップダウンをcontent上部に挿入してリスト表示
+- `renderNodesByCategoryList(container)` — 選択カテゴリ＋検索テキストでフィルタしてカード表示
+- `renderNodesByPackage(container)` — パッケージドロップダウンをcontent上部に挿入してリスト表示
+- `renderNodesByPackageList(container)` — 選択パッケージ＋検索テキストでフィルタしてカード表示
+
+**ドロップダウンのDOM挿入方式:**
+- `.wfm-nlp-filter-row` クラスのdivを `.wfm-nlp-content` の直前に `insertBefore` で挿入
+- `renderContent()` 冒頭で `panelEl.querySelectorAll(".wfm-nlp-filter-row").forEach(e => e.remove())` により他タブ移動時に削除
+
+**テーマ設定:**
+- `THEME_KEY = "wfm_nlp_theme"` — localStorage保存キー
+- `THEME_VARS` — 設定可能な5変数: `--comfy-menu-bg`（背景）、`--comfy-input-bg`（サブヘッダーBG）、`--input-text`（文字色）、`--border-color`（ボーダー）、`--descrip-text`（補助テキスト色）
+- `loadTheme()` — localStorageから読み込み
+- `applyTheme(panel, theme)` — パネル要素にCSS変数をインラインsetPropertyで上書き
+- `buildThemePanel(panel)` — カラーピッカーUIを動的生成（ライブプレビュー・Save・Resetボタン付き）
+- パネルのHTMLに `.wfm-nlp-theme-btn`（⚙）と `.wfm-nlp-theme-panel` を追加
+- `createPanel()` 内でテーマボタンのイベントリスナーを登録、`applyTheme(panel, loadTheme())` で起動時に保存済みテーマを適用
+
+#### `static/js/workflow-tab.js` — `.index.json` 非表示
+
+- `filterWorkflows()` の先頭に `if (wf.filename === ".index.json") return false;` を追加
+
+### 技術的な判断
+
+- **`python_module` の取得元をAPIに変更:** `LiteGraph.registered_node_types` にはバックエンド由来の `python_module` が存在しないため、全ノードが `ComfyUI (Built-in)` 判定になる問題があった。`/object_info` APIを `loadData()` 時に並行取得することで正確なパッケージ判定を実現
+- **CSS変数のインライン上書き:** テーマ色はパネル要素自体に `style.setProperty` で適用。ComfyUI本体の `:root` 変数を書き換えず、パネルスコープ内のみに影響させる設計
+- **ドロップダウンのDOMインジェクション:** Category/Packageビューのドロップダウンは `renderContent` の都度生成・削除する方式を採用。タブ切替時のクリーンアップを `renderContent` 冒頭の `.wfm-nlp-filter-row` 削除処理で一元管理
+
+---
+
 ## 2026-03-29: v0.2.4 GenerateUIタブ レイアウト再設計
 
 ### 概要

README.md

@@ -5,7 +5,7 @@ A comprehensive workflow management and generation UI plugin for [ComfyUI](https
 Browse, organize, and execute workflows directly from a dedicated studio interface — without switching between windows or manually editing JSON.
 
 ![Workflow Studio](https://img.shields.io/badge/ComfyUI-Custom_Node-blue)
-![Version](https://img.shields.io/badge/version-0.2.4-green)
+![Version](https://img.shields.io/badge/version-0.2.5-green)
 
 ## Screenshots
 
@@ -104,9 +104,11 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
 - **Table view memo** — memo column displayed in table view for quick reference
 - **Preview images** — auto-detect `{model_stem}.preview.png` next to model files
 
-### Workflow Studio Library (ComfyUI Side Panel) (v0.2.3)
+### Workflow Studio Library (ComfyUI Side Panel) (v0.2.5)
 - **Workflows tab** — browse favorite workflows (All / ★ Favorites / Groups / By Badge sub-tabs), ★ star shown for favorites in All view
-- **Nodes tab** — browse favorite nodes (All / ★ Favorites / Groups / Sets sub-tabs), ★ star shown for favorites in All view
+- **Nodes tab** — browse favorite nodes (All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package sub-tabs), ★ star shown for favorites in All view
+  - **Category sub-tab** — dropdown to filter nodes by top-level category
+  - **Package sub-tab** — dropdown to filter nodes by custom node package name
 - **Models tab** — browse installed models (All / ★ Favorites / Groups / By Type sub-tabs)
 - **Prompts tab** — browse prompt presets with All / Favorites / Categories sub-tabs
 - **Drag & drop workflows** — drag a workflow onto the canvas to load it
@@ -115,6 +117,7 @@ Browse, organize, and execute workflows directly from a dedicated studio interfa
 - **Copy prompts** — copy individual positive (P) or negative (N) prompts from sidebar items
 - **Double-click** — load workflows or place nodes without dragging
 - **Search** — search within each sub-tab to quickly find items
+- **⚙ Theme settings** — customize panel background, sub-header background, text, border, and secondary text colors; saved to localStorage and applied on every open
 
 ### Help & Support Tab (v0.1.3)
 - **Feature list** — overview of all features organized by tab
@@ -191,6 +194,12 @@ Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture
 
 ## Changelog
 
+### v0.2.5
+- **Sidebar Category/Package sub-tabs** — added 📂 Category and 🧩 Package sub-tabs to the Nodes tab in Workflow Studio Library; each shows a dropdown to filter nodes by category or custom node package (reads `/object_info` for accurate package detection)
+- **Sidebar theme settings** — added ⚙ button in the panel header to customize background, sub-header background, text, border, and secondary text colors with live preview; settings saved to localStorage
+- **Sidebar TextEncoder (By Type)** — fixed TextEncoder not appearing in Models → By Type; now uses `DualCLIPLoader` → `CLIPLoader` fallback to retrieve `clip_name1` list
+- **Hide `.index.json`** — excluded `.index.json` from both the Workflow tab and the Workflow Studio Library side panel
+
 ### v0.2.4
 - **GenerateUI tab redesign** — reorganized from 5 tabs (Prompt/Image/Model/Settings/Raw JSON) to 3 tabs (Input/Model/Settings); each tab shows a Raw JSON column (540px) for instant JSON preview and direct editing from any tab
 - **Input tab** — Prompt and Image stacked vertically in the left column

static/js/app.js

@@ -279,7 +279,7 @@ function applyI18nToHtml() {
         "wfm-help-sidepanel-5": "helpSidepanel5", "wfm-help-sidepanel-6": "helpSidepanel6",
         "wfm-help-sidepanel-7": "helpSidepanel7", "wfm-help-sidepanel-8": "helpSidepanel8",
         "wfm-help-sidepanel-9": "helpSidepanel9", "wfm-help-sidepanel-10": "helpSidepanel10",
-        "wfm-help-sidepanel-11": "helpSidepanel11",
+        "wfm-help-sidepanel-11": "helpSidepanel11", "wfm-help-sidepanel-12": "helpSidepanel12",
         "wfm-help-shortcuts-title": "helpShortcutsTitle",
         "wfm-help-shortcuts-1": "helpShortcuts1", "wfm-help-shortcuts-2": "helpShortcuts2",
         "wfm-help-shortcuts-3": "helpShortcuts3", "wfm-help-shortcuts-4": "helpShortcuts4",

static/js/i18n.js

@@ -167,6 +167,10 @@ const LANGUAGES = {
         tabNodes: "Nodes",
         nodesAllNodes: "All Nodes",
         nodesNodeSets: "Node Sets",
+        nodesCategoryTab: "Category",
+        nodesPackageTab: "Package",
+        nodesSelectCategory: "Select a category...",
+        nodesSelectPackage: "Select a package...",
         nodesSearchPlaceholder: "Search nodes...",
         nodesAllCategories: "All Categories",
         nodesAllPackages: "All Packages",
@@ -342,7 +346,7 @@ const LANGUAGES = {
         helpSidepanelTitle: "Workflow Studio Library (ComfyUI Side Panel)",
         helpSidepanel1: "Open from the Workflow Studio Library button in the ComfyUI toolbar",
         helpSidepanel2: "Workflows tab: All / ★ Favorites / Groups sub-tabs; ★ shown for favorites in All view",
-        helpSidepanel3: "Nodes tab: All / ★ Favorites / Groups / Sets sub-tabs; ★ shown for favorites in All view",
+        helpSidepanel3: "Nodes tab: All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package sub-tabs; Category and Package show a dropdown to filter nodes by category or custom node package",
         helpSidepanel4: "Prompts tab: browse prompt presets with All/Favorites/Categories sub-tabs",
         helpSidepanel5: "Drag & drop workflows onto the canvas to load them",
         helpSidepanel6: "Drag & drop nodes/node sets onto the canvas to place them",
@@ -351,6 +355,7 @@ const LANGUAGES = {
         helpSidepanel9: "Double-click items to load/place without dragging",
         helpSidepanel10: "Search within each sub-tab to quickly find items",
         helpSidepanel11: "Models tab: All / ★ Favorites / Groups / By Type sub-tabs",
+        helpSidepanel12: "⚙ Theme button (header): customize panel background, sub-header background, text, border, and secondary text colors — changes are saved to localStorage and applied on next open",
         helpShortcutsTitle: "Keyboard Shortcuts",
         helpShortcuts1: "Escape: Close modal/panel",
         helpShortcuts2: "Enter: Confirm rename, send chat",
@@ -628,6 +633,10 @@ const LANGUAGES = {
         tabNodes: "ノード",
         nodesAllNodes: "全ノード",
         nodesNodeSets: "ノードセット",
+        nodesCategoryTab: "カテゴリ",
+        nodesPackageTab: "パッケージ",
+        nodesSelectCategory: "カテゴリを選択...",
+        nodesSelectPackage: "パッケージを選択...",
         nodesSearchPlaceholder: "ノードを検索...",
         nodesAllCategories: "全カテゴリ",
         nodesAllPackages: "全パッケージ",
@@ -803,7 +812,7 @@ const LANGUAGES = {
         helpSidepanelTitle: "Workflow Studio Library（ComfyUIサイドパネル）",
         helpSidepanel1: "ComfyUIツールバーのWorkflow Studio Libraryボタンから開く",
         helpSidepanel2: "Workflowsタブ：All / ★ Favorites / Groupsサブタブ、Allビューでお気に入りに★表示",
-        helpSidepanel3: "Nodesタブ：All / ★ Favorites / Groups / Setsサブタブ、Allビューでお気に入りに★表示",
+        helpSidepanel3: "Nodesタブ：All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Packageサブタブ；CategoryとPackageはドロップダウンでカテゴリ・カスタムノードパッケージ別に絞り込み可能",
         helpSidepanel4: "Promptsタブ：プロンプトプリセットの閲覧（All/お気に入り/カテゴリ サブタブ）",
         helpSidepanel5: "ワークフローをキャンバスにドラッグ＆ドロップで読み込み",
         helpSidepanel6: "ノード/ノードセットをキャンバスにドラッグ＆ドロップで配置",
@@ -812,6 +821,7 @@ const LANGUAGES = {
         helpSidepanel9: "ダブルクリックでもアイテムの読み込み・配置が可能",
         helpSidepanel10: "各サブタブ内で検索してアイテムをすばやく検索",
         helpSidepanel11: "Modelsタブ：All / ★ Favorites / Groups / By Typeサブタブ",
+        helpSidepanel12: "⚙ テーマボタン（ヘッダー）：パネル背景・サブヘッダー背景・文字色・ボーダー・補助テキスト色をカスタマイズ可能、設定はlocalStorageに保存され次回起動時も反映",
         helpShortcutsTitle: "キーボード操作",
         helpShortcuts1: "Escape：モーダル・パネルを閉じる",
         helpShortcuts2: "Enter：名前変更の確定、チャット送信",
@@ -1085,6 +1095,10 @@ const LANGUAGES = {
         tabNodes: "节点",
         nodesAllNodes: "所有节点",
         nodesNodeSets: "节点集",
+        nodesCategoryTab: "分类",
+        nodesPackageTab: "包",
+        nodesSelectCategory: "选择分类...",
+        nodesSelectPackage: "选择包...",
         nodesSearchPlaceholder: "搜索节点...",
         nodesAllCategories: "所有分类",
         nodesAllPackages: "所有包",
@@ -1260,7 +1274,7 @@ const LANGUAGES = {
         helpSidepanelTitle: "Workflow Studio Library（ComfyUI侧面板）",
         helpSidepanel1: "从ComfyUI工具栏的Workflow Studio Library按钮打开",
         helpSidepanel2: "Workflows标签：All / ★ Favorites / Groups子标签，All视图中收藏项显示★",
-        helpSidepanel3: "Nodes标签：All / ★ Favorites / Groups / Sets子标签，All视图中收藏项显示★",
+        helpSidepanel3: "Nodes标签：All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package子标签；Category和Package可通过下拉菜单按分类或自定义节点包筛选节点",
         helpSidepanel4: "Prompts标签：浏览提示词预设（全部/收藏/分类 子标签）",
         helpSidepanel5: "将工作流拖放到画布上即可加载",
         helpSidepanel6: "将节点/节点集拖放到画布上即可放置",
@@ -1269,6 +1283,7 @@ const LANGUAGES = {
         helpSidepanel9: "双击项目也可加载/放置",
         helpSidepanel10: "在各子标签内搜索快速查找项目",
         helpSidepanel11: "Models标签：All / ★ Favorites / Groups / By Type子标签",
+        helpSidepanel12: "⚙ 主题按钮（标题栏）：可自定义面板背景、子标题背景、文字颜色、边框及辅助文字颜色，设置保存至localStorage并在下次打开时生效",
         helpShortcutsTitle: "键盘操作",
         helpShortcuts1: "Escape：关闭弹窗/面板",
         helpShortcuts2: "Enter：确认重命名、发送聊天",

static/js/nodes-tab.js

@@ -276,44 +276,43 @@ function renderNodeGrid() {
     const pageItems = filtered.slice(start, start + NODES_PER_PAGE);
 
     grid.innerHTML = "";
-    pageItems.forEach(node => {
-        const meta = state.nodeMetadata[node.name] || {};
-        const card = document.createElement("div");
-        card.className = "wfm-card wfm-node-card";
-        if (state.selectedNode && state.selectedNode.name === node.name) {
-            card.classList.add("wfm-card-selected");
-        }
-        card.dataset.nodeName = node.name;
-        card.style.borderLeft = `3px solid ${packageColor(node.package)}`;
-
-        const inputCount = Object.keys(node.input.required || {}).length +
-                           Object.keys(node.input.optional || {}).length;
-        const outputCount = (node.output || []).length;
-        const tags = (meta.tags || []).map(tg => `<span class="wfm-tag">#${escapeHtml(tg)}</span>`).join("");
-        const favStar = meta.favorite ? "\u2605" : "\u2606";
-        const favClass = meta.favorite ? "wfm-fav-btn active" : "wfm-fav-btn";
-
-        card.innerHTML = `
-            <div class="wfm-card-body">
-                <div class="wfm-card-title" title="${escapeHtml(node.name)}">${escapeHtml(node.display_name)}</div>
-                <div class="wfm-card-meta">
-                    ${categoryBadgeHtml(node.category)}
-                </div>
-                ${tags ? `<div class="wfm-card-tags">${tags}</div>` : ""}
-            </div>
-            <button class="${favClass}" title="Favorite">${favStar}</button>`;
-
-        card.querySelector(".wfm-fav-btn").addEventListener("click", e => {
-            e.stopPropagation();
-            toggleFavorite(node.name, e.currentTarget);
-        });
-        card.addEventListener("click", () => showNodeSidePanel(node));
-        grid.appendChild(card);
-    });
+    pageItems.forEach(node => grid.appendChild(createNodeCard(node)));
 
     renderPagination(filtered.length, totalPages);
 }
 
+function createNodeCard(node) {
+    const meta = state.nodeMetadata[node.name] || {};
+    const card = document.createElement("div");
+    card.className = "wfm-card wfm-node-card";
+    if (state.selectedNode && state.selectedNode.name === node.name) {
+        card.classList.add("wfm-card-selected");
+    }
+    card.dataset.nodeName = node.name;
+    card.style.borderLeft = `3px solid ${packageColor(node.package)}`;
+
+    const tags = (meta.tags || []).map(tg => `<span class="wfm-tag">#${escapeHtml(tg)}</span>`).join("");
+    const favStar = meta.favorite ? "\u2605" : "\u2606";
+    const favClass = meta.favorite ? "wfm-fav-btn active" : "wfm-fav-btn";
+
+    card.innerHTML = `
+        <div class="wfm-card-body">
+            <div class="wfm-card-title" title="${escapeHtml(node.name)}">${escapeHtml(node.display_name)}</div>
+            <div class="wfm-card-meta">
+                ${categoryBadgeHtml(node.category)}
+            </div>
+            ${tags ? `<div class="wfm-card-tags">${tags}</div>` : ""}
+        </div>
+        <button class="${favClass}" title="Favorite">${favStar}</button>`;
+
+    card.querySelector(".wfm-fav-btn").addEventListener("click", e => {
+        e.stopPropagation();
+        toggleFavorite(node.name, e.currentTarget);
+    });
+    card.addEventListener("click", () => showNodeSidePanel(node));
+    return card;
+}
+
 function renderPagination(totalItems, totalPages) {
     const container = document.getElementById("wfm-nodes-pagination");
     if (!container) return;

static/js/workflow-tab.js

@@ -265,6 +265,8 @@ function renderModelFilters() {
 
 function filterWorkflows() {
     return state.workflows.filter((wf) => {
+        if (wf.filename === ".index.json") return false;
+
         if (state.activeBadge === "FAVORITE") {
             if (!wf.metadata.favorite) return false;
         } else if (state.activeBadge !== "ALL") {

templates/index.html

@@ -596,7 +596,7 @@
                         <ul>
                             <li id="wfm-help-sidepanel-1">Open from the Workflow Studio Library button in the ComfyUI toolbar</li>
                             <li id="wfm-help-sidepanel-2">Workflows tab: All / ★ Favorites / Groups sub-tabs; ★ shown for favorites in All view</li>
-                            <li id="wfm-help-sidepanel-3">Nodes tab: All / ★ Favorites / Groups / Sets sub-tabs; ★ shown for favorites in All view</li>
+                            <li id="wfm-help-sidepanel-3">Nodes tab: All / ★ Favorites / Groups / Sets / 📂 Category / 🧩 Package sub-tabs; Category and Package show a dropdown to filter nodes</li>
                             <li id="wfm-help-sidepanel-11">Models tab: All / ★ Favorites / Groups / By Type sub-tabs</li>
                             <li id="wfm-help-sidepanel-4">Prompts tab: browse prompt presets with All/Favorites/Categories sub-tabs</li>
                             <li id="wfm-help-sidepanel-5">Drag &amp; drop workflows onto the canvas to load them</li>
@@ -605,6 +605,7 @@
                             <li id="wfm-help-sidepanel-8">Copy individual positive (P) or negative (N) prompts from sidebar items</li>
                             <li id="wfm-help-sidepanel-9">Double-click items to load/place without dragging</li>
                             <li id="wfm-help-sidepanel-10">Search within each sub-tab to quickly find items</li>
+                            <li id="wfm-help-sidepanel-12">⚙ Theme button (header): customize panel background, text, border colors — saved to localStorage</li>
                         </ul>
                     </div>
 

web/comfyui/node_sets_menu.js

@@ -24,7 +24,10 @@ const state = {
     topTab: "workflows",           // "workflows" | "nodes" | "prompts" | "models"
     // Node sub-tabs (existing)
     activeTab: "all",              // all | favorites | groups
-    activeTab2: null,              // 2nd row: "sets" (or null when 1st row active)
+    activeTab2: null,              // 2nd row: "sets" | "category" | "package" (or null when 1st row active)
+    activeNodeCategory: "",        // selected category value
+    activeNodePackage: "",         // selected package value
+    objectInfo: {},                // raw /object_info data for package lookup
     favorites: [],                 // [{name, display_name}]
     nodeSets: [],
     groups: {},                    // {groupName: [nodeName, ...]}
@@ -79,13 +82,28 @@ const fetchGroups = async () => {
     } catch { return {}; }
 };
 
+const fetchObjectInfo = async () => {
+    try {
+        const res = await fetch(`${window.location.origin}/object_info`);
+        return res.ok ? await res.json() : {};
+    } catch { return {}; }
+};
+
+const extractPackageName = (pythonModule) => {
+    if (!pythonModule || pythonModule === "nodes") return "ComfyUI (Built-in)";
+    const parts = pythonModule.split(".");
+    if (parts[0] === "custom_nodes" && parts.length > 1) return parts[1];
+    return pythonModule;
+};
+
 const loadData = async () => {
-    const [metadata, nodeSets, groups] = await Promise.all([
-        fetchMetadata(), fetchNodeSets(), fetchGroups(),
+    const [metadata, nodeSets, groups, objectInfo] = await Promise.all([
+        fetchMetadata(), fetchNodeSets(), fetchGroups(), fetchObjectInfo(),
     ]);
     state.metadata = metadata;
     state.nodeSets = nodeSets;
     state.groups = groups;
+    state.objectInfo = objectInfo;
 
     // Extract favorites from metadata
     state.favorites = [];
@@ -149,7 +167,17 @@ const fetchModelList = async (type) => {
             vae:         () => fetch(`${comfyBase}/object_info/VAELoader`).then(r => r.json()).then(d => d?.VAELoader?.input?.required?.vae_name?.[0] || []),
             controlnet:  () => fetch(`${comfyBase}/object_info/ControlNetLoader`).then(r => r.json()).then(d => d?.ControlNetLoader?.input?.required?.control_net_name?.[0] || []),
             unet:        () => fetch(`${comfyBase}/object_info/UNETLoader`).then(r => r.json()).then(d => d?.UNETLoader?.input?.required?.unet_name?.[0] || []),
-            textencoder: () => fetch(`${comfyBase}/object_info/CLIPLoader`).then(r => r.json()).then(d => d?.CLIPLoader?.input?.required?.clip_name1?.[0] || []),
+            textencoder: async () => {
+                const base = window.location.origin;
+                for (const cls of ["DualCLIPLoader", "CLIPLoader"]) {
+                    try {
+                        const d = await fetch(`${base}/object_info/${cls}`).then(r => r.json());
+                        const list = d?.[cls]?.input?.required?.clip_name1?.[0];
+                        if (list?.length) return list;
+                    } catch {}
+                }
+                return [];
+            },
             hypernetwork:() => fetch(`${comfyBase}/object_info/HypernetworkLoader`).then(r => r.json()).then(d => d?.HypernetworkLoader?.input?.required?.hypernetwork_name?.[0] || []),
             embedding:   () => fetch(`${comfyBase}/embeddings`).then(r => r.json()).then(d => Array.isArray(d) ? d : []),
         };
@@ -199,7 +227,7 @@ const fetchWorkflowRaw = async (filename) => {
 
 const loadWfData = async () => {
     const workflows = await fetchWorkflows();
-    state.wfList = workflows;
+    state.wfList = workflows.filter(w => w.filename !== ".index.json");
 
     // Extract favorites
     state.wfFavorites = workflows.filter(w => w.metadata?.favorite);
@@ -496,6 +524,76 @@ let panelEl = null;
 
 const PANEL_ID = "wfm-node-library-panel";
 
+// ============================================
+// Theme
+// ============================================
+
+const THEME_KEY = "wfm_nlp_theme";
+
+const THEME_VARS = [
+    { key: "bg",     label: "Background",      cssVar: "--comfy-menu-bg",   default: "#1e1e1e" },
+    { key: "input",  label: "Sub-header BG",   cssVar: "--comfy-input-bg",  default: "#2a2a2a" },
+    { key: "text",   label: "Text",             cssVar: "--input-text",      default: "#dddddd" },
+    { key: "border", label: "Border",           cssVar: "--border-color",    default: "#4e4e4e" },
+    { key: "desc",   label: "Secondary text",   cssVar: "--descrip-text",    default: "#888888" },
+];
+
+function loadTheme() {
+    try { return JSON.parse(localStorage.getItem(THEME_KEY)) || {}; } catch { return {}; }
+}
+
+function applyTheme(panel, theme) {
+    THEME_VARS.forEach(({ key, cssVar, default: def }) => {
+        panel.style.setProperty(cssVar, theme[key] || def);
+    });
+}
+
+function buildThemePanel(panel) {
+    const themePanel = panel.querySelector(".wfm-nlp-theme-panel");
+    if (!themePanel) return;
+    const theme = loadTheme();
+    themePanel.innerHTML = `
+        <div class="wfm-nlp-theme-title">Panel Theme</div>
+        ${THEME_VARS.map(({ key, label, default: def }) => `
+        <div class="wfm-nlp-theme-row">
+            <span class="wfm-nlp-theme-label">${label}</span>
+            <input type="color" class="wfm-nlp-theme-color" data-key="${key}"
+                value="${theme[key] || def}">
+        </div>`).join("")}
+        <div class="wfm-nlp-theme-actions">
+            <button class="wfm-nlp-theme-reset-btn">Reset</button>
+            <button class="wfm-nlp-theme-save-btn">Save</button>
+        </div>`;
+
+    themePanel.querySelector(".wfm-nlp-theme-save-btn").addEventListener("click", () => {
+        const saved = {};
+        themePanel.querySelectorAll(".wfm-nlp-theme-color").forEach(input => {
+            saved[input.dataset.key] = input.value;
+        });
+        localStorage.setItem(THEME_KEY, JSON.stringify(saved));
+        applyTheme(panel, saved);
+        themePanel.style.display = "none";
+    });
+
+    themePanel.querySelector(".wfm-nlp-theme-reset-btn").addEventListener("click", () => {
+        localStorage.removeItem(THEME_KEY);
+        THEME_VARS.forEach(({ cssVar, default: def }) => {
+            panel.style.setProperty(cssVar, def);
+        });
+        themePanel.style.display = "none";
+    });
+
+    // Live preview on color change
+    themePanel.querySelectorAll(".wfm-nlp-theme-color").forEach(input => {
+        input.addEventListener("input", () => {
+            panel.style.setProperty(
+                THEME_VARS.find(v => v.key === input.dataset.key).cssVar,
+                input.value
+            );
+        });
+    });
+}
+
 const createPanel = () => {
     if (panelEl) return panelEl;
 
@@ -504,9 +602,11 @@ const createPanel = () => {
     panel.innerHTML = `
         <div class="wfm-nlp-header">
             <span class="wfm-nlp-title">Workflow Studio Library</span>
+            <button class="wfm-nlp-theme-btn" title="Theme settings">&#9881;</button>
             <button class="wfm-nlp-refresh" title="Refresh">&#8635;</button>
             <button class="wfm-nlp-close" title="Close">&times;</button>
         </div>
+        <div class="wfm-nlp-theme-panel" style="display:none;"></div>
         <div class="wfm-nlp-tabs">
             <button class="wfm-nlp-tab wfm-nlp-top-tab active" data-toptab="workflows">Workflows</button>
             <button class="wfm-nlp-tab wfm-nlp-top-tab" data-toptab="nodes">Nodes</button>
@@ -584,7 +684,24 @@ const createPanel = () => {
         showToast("Library refreshed", "success");
     });
 
+    // Theme button
+    panel.querySelector(".wfm-nlp-theme-btn").addEventListener("click", () => {
+        const themePanel = panel.querySelector(".wfm-nlp-theme-panel");
+        if (!themePanel) return;
+        const isOpen = themePanel.style.display !== "none";
+        if (isOpen) {
+            themePanel.style.display = "none";
+        } else {
+            buildThemePanel(panel);
+            themePanel.style.display = "block";
+        }
+    });
+
     injectStyles();
+
+    // Apply saved theme
+    applyTheme(panel, loadTheme());
+
     rebuildSubTabs();
     return panel;
 };
@@ -715,6 +832,8 @@ const rebuildSubTabs = () => {
         ];
         const row2Tabs = [
             { key: "sets", label: "\u2630 Sets" },
+            { key: "category", label: "\ud83d\udcc2 Category" },
+            { key: "package", label: "\ud83e\udde9 Package" },
         ];
 
         const activeKey = state.activeTab2 || state.activeTab;
@@ -757,6 +876,9 @@ const renderContent = () => {
     const content = panelEl?.querySelector(".wfm-nlp-content");
     if (!content) return;
 
+    // Remove filter dropdowns from previous category/package views
+    panelEl.querySelectorAll(".wfm-nlp-filter-row").forEach(e => e.remove());
+
     if (state.topTab === "models") {
         if (!state.modelsLoaded) {
             content.innerHTML = `<div class="wfm-nlp-empty">Loading...</div>`;
@@ -802,6 +924,8 @@ const renderContent = () => {
             case "favorites": renderFavorites(content); break;
             case "sets": renderSets(content); break;
             case "groups": renderGroups(content); break;
+            case "category": renderNodesByCategory(content); break;
+            case "package": renderNodesByPackage(content); break;
         }
     }
 };
@@ -1583,6 +1707,133 @@ const renderGroups = (container) => {
     }
 };
 
+// ============================================
+// Render – Nodes by Category / Package
+// ============================================
+
+const getNodeCategory = (nodeType) => {
+    const info = state.objectInfo[nodeType];
+    if (info?.category) return info.category.split("/")[0] || "uncategorized";
+    // Fallback: LiteGraph type string often contains category as prefix
+    const def = typeof LiteGraph !== "undefined"
+        ? LiteGraph.registered_node_types[nodeType]
+        : null;
+    const cat = def?.category || "";
+    return cat.split("/")[0] || "uncategorized";
+};
+
+const getNodePackage = (nodeType) => {
+    const info = state.objectInfo[nodeType];
+    if (!info) return "ComfyUI (Built-in)";
+    return extractPackageName(info.python_module || "");
+};
+
+const renderNodesByCategory = (container) => {
+    const registered = typeof LiteGraph !== "undefined" ? LiteGraph.registered_node_types : {};
+    const nodeNames = Object.keys(registered).sort();
+
+    // Build category list
+    const catSet = new Set();
+    nodeNames.forEach(n => catSet.add(getNodeCategory(n)));
+    const categories = [...catSet].sort();
+
+    // Insert dropdown above content (remove old one first)
+    container.parentNode.querySelectorAll(".wfm-nlp-filter-row").forEach(e => e.remove());
+    const wrap = document.createElement("div");
+    wrap.className = "wfm-nlp-filter-row";
+    wrap.style.cssText = "padding:6px 8px;border-bottom:1px solid var(--border-color,#4e4e4e);flex-shrink:0;";
+    const sel = document.createElement("select");
+    sel.style.cssText = "width:100%;padding:4px 6px;background:var(--comfy-input-bg,#2a2a2a);border:1px solid var(--border-color,#4e4e4e);border-radius:3px;color:var(--input-text,#ddd);font-size:12px;";
+    sel.innerHTML = `<option value="">-- All Categories --</option>` +
+        categories.map(c => `<option value="${esc(c)}"${c === state.activeNodeCategory ? " selected" : ""}>${esc(c)}</option>`).join("");
+    sel.addEventListener("change", () => {
+        state.activeNodeCategory = sel.value;
+        renderNodesByCategoryList(container);
+    });
+    wrap.appendChild(sel);
+    container.parentNode.insertBefore(wrap, container);
+
+    renderNodesByCategoryList(container);
+};
+
+const renderNodesByCategoryList = (container) => {
+    const registered = typeof LiteGraph !== "undefined" ? LiteGraph.registered_node_types : {};
+    let nodeNames = Object.keys(registered).sort();
+
+    if (state.activeNodeCategory) {
+        nodeNames = nodeNames.filter(n => getNodeCategory(n) === state.activeNodeCategory);
+    }
+    if (state.searchText) {
+        nodeNames = nodeNames.filter(n => n.toLowerCase().includes(state.searchText));
+    }
+
+    container.innerHTML = "";
+    if (nodeNames.length === 0) {
+        container.innerHTML = `<div class="wfm-nlp-empty">No nodes found</div>`;
+        return;
+    }
+    for (const name of nodeNames) {
+        const isFav = state.metadata[name]?.favorite;
+        const label = isFav ? `<span class="wfm-nlp-fav-star">\u2605</span>${esc(name)}` : esc(name);
+        const el = createDraggableItem(label, "single", { classType: name });
+        el.addEventListener("dblclick", () => placeSingleNode(name));
+        container.appendChild(el);
+    }
+};
+
+const renderNodesByPackage = (container) => {
+    const registered = typeof LiteGraph !== "undefined" ? LiteGraph.registered_node_types : {};
+    const nodeNames = Object.keys(registered).sort();
+
+    // Build package list
+    const pkgSet = new Set();
+    nodeNames.forEach(n => pkgSet.add(getNodePackage(n)));
+    const packages = [...pkgSet].sort();
+
+    // Insert dropdown above content (remove old one first)
+    container.parentNode.querySelectorAll(".wfm-nlp-filter-row").forEach(e => e.remove());
+    const wrap = document.createElement("div");
+    wrap.className = "wfm-nlp-filter-row";
+    wrap.style.cssText = "padding:6px 8px;border-bottom:1px solid var(--border-color,#4e4e4e);flex-shrink:0;";
+    const sel = document.createElement("select");
+    sel.style.cssText = "width:100%;padding:4px 6px;background:var(--comfy-input-bg,#2a2a2a);border:1px solid var(--border-color,#4e4e4e);border-radius:3px;color:var(--input-text,#ddd);font-size:12px;";
+    sel.innerHTML = `<option value="">-- All Packages --</option>` +
+        packages.map(p => `<option value="${esc(p)}"${p === state.activeNodePackage ? " selected" : ""}>${esc(p)}</option>`).join("");
+    sel.addEventListener("change", () => {
+        state.activeNodePackage = sel.value;
+        renderNodesByPackageList(container);
+    });
+    wrap.appendChild(sel);
+    container.parentNode.insertBefore(wrap, container);
+
+    renderNodesByPackageList(container);
+};
+
+const renderNodesByPackageList = (container) => {
+    const registered = typeof LiteGraph !== "undefined" ? LiteGraph.registered_node_types : {};
+    let nodeNames = Object.keys(registered).sort();
+
+    if (state.activeNodePackage) {
+        nodeNames = nodeNames.filter(n => getNodePackage(n) === state.activeNodePackage);
+    }
+    if (state.searchText) {
+        nodeNames = nodeNames.filter(n => n.toLowerCase().includes(state.searchText));
+    }
+
+    container.innerHTML = "";
+    if (nodeNames.length === 0) {
+        container.innerHTML = `<div class="wfm-nlp-empty">No nodes found</div>`;
+        return;
+    }
+    for (const name of nodeNames) {
+        const isFav = state.metadata[name]?.favorite;
+        const label = isFav ? `<span class="wfm-nlp-fav-star">\u2605</span>${esc(name)}` : esc(name);
+        const el = createDraggableItem(label, "single", { classType: name });
+        el.addEventListener("dblclick", () => placeSingleNode(name));
+        container.appendChild(el);
+    }
+};
+
 // ============================================
 // Draggable item factory (nodes)
 // ============================================
@@ -2062,6 +2313,75 @@ const injectStyles = () => {
             background: rgba(255,255,255,0.12);
             color: var(--descrip-text, #aaa);
         }
+        .wfm-nlp-theme-btn {
+            background: none;
+            border: none;
+            color: var(--input-text, #ddd);
+            font-size: 15px;
+            cursor: pointer;
+            opacity: 0.7;
+            padding: 0 2px;
+            line-height: 1;
+        }
+        .wfm-nlp-theme-btn:hover { opacity: 1; }
+        .wfm-nlp-theme-panel {
+            border-bottom: 1px solid var(--border-color, #4e4e4e);
+            background: var(--comfy-input-bg, #2a2a2a);
+            padding: 10px 12px;
+            flex-shrink: 0;
+        }
+        .wfm-nlp-theme-title {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--input-text, #ddd);
+            margin-bottom: 8px;
+            opacity: 0.8;
+        }
+        .wfm-nlp-theme-row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 6px;
+        }
+        .wfm-nlp-theme-label {
+            font-size: 11px;
+            color: var(--descrip-text, #aaa);
+            flex: 1;
+            white-space: nowrap;
+        }
+        .wfm-nlp-theme-color {
+            width: 32px;
+            height: 22px;
+            border: 1px solid var(--border-color, #555);
+            border-radius: 3px;
+            padding: 1px;
+            cursor: pointer;
+            background: transparent;
+        }
+        .wfm-nlp-theme-actions {
+            display: flex;
+            gap: 6px;
+            margin-top: 8px;
+            justify-content: flex-end;
+        }
+        .wfm-nlp-theme-save-btn, .wfm-nlp-theme-reset-btn {
+            font-size: 11px;
+            padding: 3px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            border: 1px solid var(--border-color, #555);
+        }
+        .wfm-nlp-theme-save-btn {
+            background: #4a9eff;
+            color: #fff;
+            border-color: #4a9eff;
+        }
+        .wfm-nlp-theme-save-btn:hover { background: #3a8eef; }
+        .wfm-nlp-theme-reset-btn {
+            background: none;
+            color: var(--descrip-text, #aaa);
+        }
+        .wfm-nlp-theme-reset-btn:hover { color: var(--input-text, #ddd); }
     `;
     document.head.appendChild(style);
 };