release: v0.8.2 - Gallery semantic search (Gemini Embedding 2 / local EmbeddingGemma 2, GPU)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Merge branch 'feature/gallery-semantic-search': Gallery semantic search (v0.8.2)
2026-10-12 13:39:54 +09:00 · 2026-10-12 13:39:17 +09:00 · 2026-10-12 13:35:37 +09:00 · 2026-10-12 13:17:01 +09:00 · 2026-10-12 12:43:55 +09:00 · 2026-10-12 12:39:27 +09:00
128 changed files with 40292 additions and 6854 deletions
@@ -0,0 +1,60 @@
+"""PostToolUse hook: regenerate README.index.md / DEVLOG.index.md right after
+Claude Code edits README.md or DEVLOG.md, so graphify's excluded-doc index
+stand-ins (see .graphifyignore) never drift from the source files within a
+session. A git pre-commit hook covers edits made outside Claude Code.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import subprocess
+import sys
+from pathlib import Path
+
+TARGETS = {"readme.md": "readme", "devlog.md": "devlog"}
+
+
+def main() -> None:
+    try:
+        payload = json.load(sys.stdin)
+    except (json.JSONDecodeError, ValueError):
+        return
+
+    if payload.get("tool_name") not in ("Edit", "Write"):
+        return
+
+    file_path = payload.get("tool_input", {}).get("file_path", "")
+    if not file_path:
+        return
+
+    name = Path(file_path).name.lower()
+    target = TARGETS.get(name)
+    if target is None:
+        return
+
+    project_dir = os.environ.get("CLAUDE_PROJECT_DIR") or str(Path(file_path).resolve().parent)
+    script = Path(project_dir) / "tools" / "generate_doc_index.py"
+    if not script.exists():
+        return
+
+    result = subprocess.run(
+        [sys.executable, str(script), target],
+        cwd=project_dir,
+        capture_output=True,
+        text=True,
+        timeout=30,
+    )
+    if result.returncode == 0:
+        print(json.dumps({"systemMessage": f"[doc-index] {result.stdout.strip()}"}))
+    else:
+        print(
+            json.dumps(
+                {"systemMessage": f"[doc-index] generate_doc_index.py {target} failed: {result.stderr.strip()}"}
+            ),
+            file=sys.stderr,
+        )
+
+
+if __name__ == "__main__":
+    main()
@@ -0,0 +1,36 @@
+{
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Bash|Grep",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "C:/Users/statsu-11/.local/bin/graphify.EXE hook-guard search"
+          }
+        ]
+      },
+      {
+        "matcher": "Read|Glob",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "C:/Users/statsu-11/.local/bin/graphify.EXE hook-guard read"
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": "Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "python \"$CLAUDE_PROJECT_DIR/.claude/hooks/on_doc_edit.py\"",
+            "timeout": 30
+          }
+        ]
+      }
+    ]
+  }
+}
@@ -0,0 +1,5 @@
+# graphify: keep graph.json/graphify-out/ out of Claude Code's automatic
+# context so re-running `graphify extract` doesn't churn the prompt cache
+# on every rebuild. These are still tracked by git (see .gitignore).
+graph.json
+graphify-out/
@@ -0,0 +1,21 @@
+# ComfyUI-Workflow-Studio - Unsloth backend (AI TOOL tab / sidebar A tab)
+#
+# Unsloth Desktop requires an API key even for local access
+# (Settings -> API in the Unsloth app, shown only once when issued).
+#
+# Alternatively leave the key empty and turn on Keyless API access ->
+# "Chat and inference" in Unsloth Desktop's Settings -> API; requests are then
+# sent without a key. That setting also serves your private LAN, and keep
+# "Allow tools" OFF.
+#
+# 1. Copy this file to ".env" (same directory as this example file)
+# 2. Paste your key after the "=" below (do NOT add a leading #, or the
+#    line becomes a comment and the key will not be loaded)
+# 3. Restart ComfyUI
+
+UNSLOTH_API_KEY=
+
+# ComfyUI-Workflow-Studio - Gallery Semantic Search (Gemini Embedding 2)
+# Get a key at https://aistudio.google.com (free tier available).
+# Same steps as above: copy to ".env", paste the key, restart ComfyUI.
+GEMINI_API_KEY=
@@ -17,6 +17,6 @@ jobs:
        uses: actions/checkout@v4

      - name: Publish Custom Node
-        uses: Comfy-Org/publish-node-action@main
+        uses: Comfy-Org/publish-node-action@d2366e7abb6ab16f3bb03e3520ae25c8cf749bc9 # 1.0.1
        with:
          personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}
@@ -5,3 +5,10 @@ __pycache__/
 .venv
 *.egg-info/
 data/
+
+# graphify: local-only knowledge graph output, not shared with other clones
+graphify-out/
+
+# Working-notes plan docs — local scratch, not meant to ship with the repo
+VIDEO_EDIT_TAB_PLAN.md
+QWEN_CHAT_INTEGRATION_PLAN.md
@@ -0,0 +1,10 @@
+# Private/unpublished planning notes — never committed to git, must not leak
+# into the published graphify-out/ knowledge graph either.
+QWEN_CHAT_INTEGRATION_PLAN.md
+
+# Too large for reliable local-Ollama semantic extraction (large chunks make the
+# model summarize in prose instead of emitting JSON, and time out on slower
+# models/hardware). README.index.md / DEVLOG.index.md are condensed stand-ins
+# that graphify extracts instead — regenerate them after editing the originals.
+README.md
+DEVLOG.md
@@ -194,9 +194,34 @@ os.environ["HF_HOME"] = "D:\\hf_cache"

 1. `pyproject.toml` の `version` を新バージョン番号に更新してステージングに含める
 2. `README.md` のバージョンバッジを更新（`![Version](https://img.shields.io/badge/version-X.Y.Z-green)`）
-3. `README.md` の Changelog に新バージョンのエントリを追加
-4. `DEVLOG.md` の先頭に変更詳細エントリを追加
-5. 上記すべてを同一コミットにまとめてプッシュ
-6. `gh release create vX.Y.Z` でリリースを作成
+3. `DEVLOG.md` の先頭に変更詳細エントリを追加
+4. 上記すべてを同一コミットにまとめてプッシュ
+5. `gh release create vX.Y.Z` でリリースを作成（リリースノート本文に変更点を記載する — v0.3.90でREADME.mdのChangelogセクションは廃止したため、以後のバージョン履歴はGitHub Releaseのリリースノートのみで管理する）

 `pyproject.toml` のバージョン変更が GitHub Actions のトリガー（`paths: pyproject.toml`）になっており、ComfyUI Registry への自動公開もここで行われる。バージョン更新を忘れると Registry に反映されない。
+
+<!-- graphify運用は一時停止中（2026-08-23〜、ユーザー指示により凍結）。再開時はこのコメントブロックを解除すること。graphify-out/ 自体は削除しておらずそのまま残っている。
+
+## graphify
+
+This project has a knowledge graph at graphify-out/ with god nodes, community structure, and cross-file relationships.
+
+Rules:
+- For codebase questions, first run `graphify query "<question>"` when graphify-out/graph.json exists. Use `graphify path "<A>" "<B>"` for relationships and `graphify explain "<concept>"` for focused concepts. These return a scoped subgraph, usually much smaller than GRAPH_REPORT.md or raw grep output.
+- If graphify-out/wiki/index.md exists, use it for broad navigation instead of raw source browsing.
+- Read graphify-out/GRAPH_REPORT.md only for broad architecture review or when query/path/explain do not surface enough context.
+- After modifying code, run `graphify update .` to keep the graph current (AST-only, no API cost).
+
+### README.md / DEVLOG.md の索引ファイル
+
+`README.md`/`DEVLOG.md`はサイズが大きすぎてローカルOllamaでの意味抽出が不安定になる（大きな塊を渡すとJSONではなく散文の要約を返す、または処理がタイムアウトする）ため、`.graphifyignore`でgraphifyの抽出対象から除外している。代わりに縮小版の`README.index.md`/`DEVLOG.index.md`を抽出対象にしている。
+
+- 生成スクリプト: `python tools/generate_doc_index.py [readme|devlog|all]`
+- 自動化: `README.md`/`DEVLOG.md`を編集すると以下の2つのフックが自動でindexを再生成する
+  - Claude Code PostToolUseフック（`.claude/hooks/on_doc_edit.py`）— Edit/Write直後に即時実行
+  - git pre-commitフック（`.git/hooks/pre-commit`）— コミット時にstagedファイルを検知して再生成し、同じコミットに含める（他エディタでの編集にも対応）
+- 索引ファイルを手動で編集しない（次の生成で上書きされる）
+- 索引ファイル再生成後は`graphify update .`を実行してグラフに反映する
+
+-->
+
@@ -0,0 +1,197 @@
+# DEVLOG Index — ComfyUI-Workflow-Studio
+
+Condensed version-by-version index of DEVLOG.md (each line: version + one-line summary of what changed and why). Full rationale, code details, and "How to apply" lessons live in the excluded DEVLOG.md itself; this index exists so graphify can extract a queryable semantic node per release without feeding the full log to the local Ollama model. Regenerate with `python tools/generate_doc_index.py devlog` whenever DEVLOG.md changes.
+
+- **v0.8.2（2026-10-12）** — Gallery: セマンティック検索（Gemini Embedding 2 / EmbeddingGemma 2）
+- **v0.8.1（2026-10-11）** — バグ修正
+- **v0.8.0（2026-10-11）** — Gallery: 音声ファイル対応（wav / mp3 / ogg / m4a / flac / opus）
+- **v0.7.14（2026-10-09）** — Comic Creator連携: nanobananaタブの生成履歴をGallery/Metadataタブに表示
+- **v0.7.13（2026-10-06）** — VRAM調整（Ollama）— Comic Creatorから移植
+- **v0.7.12（2026-10-04）** — セキュリティ: バックエンド接続先をブラウザから任意指定できた問題（SSRF）を修正
+- **v0.7.11（2026-10-02）** — セキュリティ: CivitAI情報の説明文のHTML無害化（保存型XSS対策）
+- **v0.7.10（2026-10-02）** — Windows: ComfyUIが固まる問題の原因特定と対策（Selectorイベントループ）
+- **v0.7.9（2026-10-02）** — Models: CivitAIベースモデルからの自動バッジ作成
+- **v0.7.8（2026-10-01）** — Video Edit: マルチトラック化（ビデオ/オーバーレイ/テキスト/オーディオ）
+- **v0.7.7（2026-09-30）** — 意思決定モデル: Ollama 0.35+ バックエンド追加
+- **v0.7.6（2026-09-30）** — Settings: 意思決定モデル (Laya) の専用設定
+- **v0.7.5（2026-09-30）** — Ming Image ワークフロー対応（GenerateUI / Gallery・Metadata / サイドパネルIタブ）
+- **v0.7.4（2026-09-29）** — Video Edit: BGM/音声トラック合成（Phase 4）— 複数クリップ結合時の音声消失も解消
+- **v0.7.3（2026-09-24）** — GenerateUIタブにQwen Image 2.1（TextEncodeQwenImage21）対応を追加
+- **v0.7.2（2026-09-18）** — Workflowタブにソート機能追加（Date/Name 昇順降順）
+- **v0.7.1（2026-09-17）** — セキュリティ修正: Tagger VLM の Unsloth 経路でAPIキーがSSRFにより外部送信され得る不備を修正
+- **v0.7.0（2026-09-17）** — プレビュー枠の高さ固定・AssetサブタブをPlan/Editと並ぶ中央下部へ移設・トリムパネルにClipchamp風スクラバー追加・Frame保存のVideo Assets登録とAsset→Plan画像連携
+- **v0.6.3** — Send CCボタンでMP4動画をComic Creatorの新設「動画ツール」へ送れるように対応
+- **v0.6.2** — Image Editタブにペンタブレット筆圧対応とFillツール（バケツ塗りつぶし）を追加
+- **v0.6.1** — Galleryタブの検索が「読み込み中」のまま止まりクリアでも中断できない不具合、および50枚程度のフォルダでも数秒〜十数秒かかる不具合を修正
+- **v0.6.0** — Gallery/Image Edit両タブにPSD(Photoshop)対応を追加 — 複数画像の一括PSD書き出し、レイヤー保存/読み込み、Gallery表示、Image Editのレイヤーパネル改善
+- **v0.5.8** — Tagger DBタブに一括削除機能を追加（外部コントリビューターPRのレビュー・検証・修正・マージ）
+- **v0.5.7** — 設定エクスポート/フルバックアップのドキュメント修正: v0.5.5のVideo Plan機能追加分の言及漏れ
+- **v0.5.6** — バグ修正: WD Taggerで不正確なタグが生成される問題を修正(GitHub Issue #1)
+- **v0.5.5** — Videoタブ全面刷新: Plan/Asset/Editバッチ生成 + Projectサブタブ + プレビュー2ペイン化 + Video Assets/Video Temp運用整理 + Galleryメタデータ消失バグ根本修正
+- **v0.5.4** — 機能追加: Video/GenerateUIタブのLTX-2.5・Wan2.2対応拡大 + AI Assistant設定のUnsloth対応・独立モーダル化・モデルアンロード機能
+- **v0.5.3** — バグ修正: Labタブのワークフロー切替時に前の内容が残留 + Galleryタブの読み込み高速化・root自動展開 + READMEスクリーンショット刷新
+- **v0.5.2** — 機能追加: GenerateUI/Labタブの動画ワークフロー対応 + VideoタブにFrame抽出/GIF変換機能 + データ管理監査とZIPフルバックアップ + Send to LI node統一
+- **v0.5.1** — 機能追加: mp4動画の埋め込みメタデータ対応（Gallery Prompt/JSON・Metadataサブタブ・サイドパネルIタブ）+ Gallery Infoタブに寸法/再生時間表示 + MiniMax H3等オールインワン動画ノードのプロンプト抽出バグ修正
+- **v0.5.0** — 機能追加: mp4動画Gallery対応 + Videoタブ新設(MiniMax H3専用) + バグ修正: Galleryのタグ/メモが再起動後に消える
+- **v0.4.8** — 機能追加: LabタブにPromptグループ一括適用＋キーフレーム並べ替え + バグ修正: デフォルトワークフローの上書き保存が反映されない + Styleテーブルの「このファイルへ追加」対応
+- **v0.4.7** — 機能追加: Prompt Tab内部リファクタ + Gallery Promptタブ新設 + Send to Canvas改善 + Presetsソート
+- **v0.4.6** — 機能追加: MetadataタブをGalleryタブへ統合 + Promptタブに一覧編集可能なTable表示を新設
+- **v0.4.5** — 調査: トップバー保存ワークフローのRMBG不具合報告（原因なし） + バグ修正: LabタブModel列の無意味な空キーフレーム表示を解消
+- **v0.4.4** — 機能追加: Lab/GenerateUI ModelタブへLoRAバイパス機能 + AI TOOL Chatの画像生成パラメータ拡張
+- **v0.4.3** — バグ修正: 共有モーダルのお気に入り☆/リネームがLabモーダルへ残留 + Lab Model列の＋／－をCheckpoint/LoRA/VAEで完全独立化
+- **v0.4.2** — 機能追加: Lab「Model」列統合（Checkpoint / LoRA Single / VAE）+ フィールド単位継承 + C/L/V表示切替
+- **v0.4.1** — UX改善: Mask Editor One連携ボタンを「選択中ノード優先」方式に再設計
+- **v0.4.0** — リファクタリング: image-edit-tab.js / models-tab.js の低凝集度モジュール分割
+- **v0.3.99** — 機能追加: AI TOOLタブ + サイドパネルAタブにUnslothバックエンド追加（APIキーは.env管理、SSRF脆弱性修正、reasoning_content対応）
+- **v0.3.98** — 機能追加・バグ修正: AI TOOL翻訳の信頼性向上 + GenerateUI Modelタブ再構成（ハイライト色・折りたたみ・並び替え）+ Thinking mode/Max tokens設定
+- **v0.3.97** — 機能追加・バグ修正: KREA-2ワークフロー対応 + Labタブ拡張（Clear/Get from Previous/Bypass/ライブ反映）+ Input Imageプレースホルダ機能
+- **v0.3.96** — バグ修正: カタログ作成バッチが特定件数で無言停止する問題の修正 + Style Catalog/Promptタブ機能拡張
+- **v0.3.95** — 機能追加: Style/Prompt→ImagePrompt改名 + Style_Catalogギャラリー新設 + GenerateUI「カタログ作成」機能
+- **v0.3.94** — 機能追加: Gallery タブのサブタブ化 + Style/Prompt ギャラリー新設（視覚的プロンプトビルダー）
+- **v0.3.93** — バグ修正・機能改善: Labタブ VAEキーフレーム不発バグの修正＋Style適用UI刷新＋Plan JSONスクロール同期修正＋キーフレーム個別削除＋Batch数超過警告＋ワイルドカード対応＋Save index image デフォルトON
+- **v0.3.92** — バグ修正: CLIPTextEncodeEditPlus使用ワークフローがGenerateUI経由だと直接実行と異なる画像になる問題（根本原因はconvertUiToApiのForceInput 未考慮バグ）＋LoRA Stack機能の改善一式
+- **v0.3.91** — 機能拡張: Labインデックス画像にPlanメタデータをPNG埋め込み＋README構成整理（Changelogセクション廃止）
+- **v0.3.90** — 機能拡張: Labタブの進化（ワークフロー呼び出し・T2I対応・Run時インデックス画像Output保存＋Eagle連携・プラン接頭辞）＋Galleryタブのルート表示簡略化
+- **v0.3.89** — バグ修正: v0.3.88で追加したLab機能への実動作確認フィードバック3件を反映
+- **v0.3.88** — 機能拡張: Labタブ Promptセルにスタイル適用・画像/GenerateUIからのプロンプト取得、Checkpoint/VAEフィルター、Plan JSONサブタブを追加
+- **v0.3.87** — 追加機能: GenerateUIタブに実験的な「Lab」サブタブを追加（I2Iバッチ生成・キーフレーム方式）
+- **v0.3.86** — バグ修正: 画像を一括生成（I2I）等の連続実行で "GalleryMetadataStore: save error: dictionary changed size during iteration" が発生
+- **v0.3.85** — 機能拡張: Generate UI連携ブリッジ（T2I）にデフォルトワークフロー・Negativeプロンプト対応を追加
+- **v0.3.84** — バグ修正: ernie_t2i.jsonをGenerateUIタブで実行すると "Prompt outputs failed validation" エラー
+- **v0.3.83** — 追加機能: Ernie Image（ernie-image / ernie-image-turbo）ワークフロー対応 + プロンプトがリンク経由のノードから供給されるパターンの修正
+- **v0.3.82** — バグ修正: MetadataタブとサイドパネルIタブでLongCat/Boogu/HiDream E1/FireRed等のプロンプトが表示されない不具合
+- **v0.3.81** — 追加機能: GenerateUIタブでFlux.2 Klein / LongCat / Boogu / HiDream E1 / FireRedのImage Editワークフローに対応
+- **v0.3.80** — 追加機能: Comic Creator「半自動マンガ作成」向けブリッジ（LLMプロンプト下書き・バッチ画像生成）
+- **v0.3.79** — 追加機能: サイドパネル（Workflow Studio Library）IタブのMage-Flow等サブグラフワークフロー対応
+- **v0.3.78** — 追加機能: Eagle自動保存のSVG対応
+- **v0.3.76** — 追加機能: Comic Creator向けI2I実行ブリッジ`_wfmReceiveI2IRunRequest`
+- **v0.3.77** — 追加機能: GalleryタブでSVGファイルの表示・管理に対応
+- **v0.3.75** — Lemonadeバックエンド追加(3つ目のAIバックエンド)
+- **v0.3.74** — AI TOOL Chatペインの画像添付対応 + I2I連携
+- **v0.3.73** — AI TOOL Chatペインからの対話式画像生成（Tool Calling）＋ Checkpoint関連の安全策
+- **v0.3.72** — Comic Creator連携用の外部Inpaintエントリポイントを追加
+- **v0.3.71** — Inpaint機能の追加（GenerateUI Imageタブ + Image Edit「Inpaint」タブ）
+- **v0.3.70** — Workflow AI要約: Ollama 404エラー修正
+- **v0.3.69** — Gallery → ComfyUI Comic Creator 連携（Send CC ボタン）
+- **v0.3.68** — MASK EDITOR ONE セクション常時表示化
+- **v0.3.67** — Alt+Click Apply & Generate
+- **計画: Image Edit 拡張 — ABRブラシ連携 + Mask Editor One 統合** — フェーズ1: Draw ツール — ABRブラシ対応
+- **2026-06-29: v0.3.66 — Mask ツール 5サブツール追加（Color / Alpha / Text / Vector / Shape）・Support リンク追加** — 概要
+- **2026-06-29: v0.3.65 — Mask Editor One 連携修正・トップバーアイコン修正・Mask ABRブラシ対応** — 概要
+- **2026-06-28: v0.3.64 — Image Edit マスク Add/Subtract・BiRefNet BG Remove・SAM3 セグメンテーション・ブラシカーソルバグ修正** — 概要
+- **2026-06-28: v0.3.63 — ノードタブ複数選択・全タブフィルタークリア・検索Xボタン** — 概要
+- **2026-06-27: WFS_PromptText の GenerateUI 対応・ドロップ時 title 固定** — 概要
+- **2026-06-27: v0.3.62 — Send GenUI Image ボタン追加・tagger_settings.json バグ修正・README 更新** — 概要
+- **2026-06-27: データ管理バグ修正 — tagger_settings.json をエクスポート対象に追加** — 概要
+- **2026-06-27: v0.3.61 — G'MIC バグ修正・セキュリティ・Draw/Mask ブラシ操作性改善** — 概要
+- **2026-06-27: v0.3.60 — Image Edit Filter Tool (G'MIC-Qt 連携) 実装** — 概要
+- **2026-06-27: v0.3.59 — Image Edit Mask Tool 実装・Draw/Mask 描画バグ修正・クリッピング保存対応** — 概要
+- **2026-06-27: v0.3.58 — GenerateUI Model タブ GGUF対応拡張（Diffusion Model / Text Encoder）** — 概要
+- **2026-06-26: v0.3.57 — Image Edit Blur Tool / BG Remove Tool 追加** — 概要
+- **2026-06-26: v0.3.56 — Style機能追加（GenerateUI ツールバー & Batchタブ）** — 概要
+- **2026-06-25: v0.3.55 — グループ機能バグ修正（全タブ）** — 根本原因（データ消失）: パス区切り文字の不一致
+- **2026-06-25: v0.3.54 — Image Edit Shape ツール追加・Models タブ overlay バグ修正** — Image Edit Tab — Shape ツール（□ / S キー）
+- **2026-06-25: v0.3.53 — Image Edit Tab 実装・レイヤーロック・ギャラリー保存** — Image Edit Tab（新規タブ）
+- **2026-06-25: GenUI設定タブ LATENT IMAGE にプリセット機能を追加** — 変更内容
+- **2026-06-24: GenUI ModelでLoRA適用後、Modelサブタブ再表示時に値がリセットされるバグ修正** — 問題
+- **2026-06-24: v0.3.51 — Embedding GenUI PP/NP対応 + GenerateUIプロンプトタブEmbeddingセレクタ追加** — 変更内容
+- **2026-06-24: v0.3.51 — GenerateUIタブ Hypernetwork対応 + ModelsタブGenUI Modelボタン追加** — 変更内容
+- **2026-06-24: v0.3.51 — Hypernetwork/Embeddingモデル未表示バグ修正** — 原因
+- **2026-06-24: v0.3.51 — ModelsタブサイドパネルにGenUI Modelボタン追加** — 変更内容
+- **2026-06-22: v0.3.50 — ギャラリータブ プロンプト検索負荷改善（バックグラウンドインデックス）** — 問題
+- **2026-06-22: v0.3.49 — 生成UIタブ A1111風ワイルドカード展開・ギャラリータブ バグ修正2件** — 生成UIタブ — A1111風SPAサイドワイルドカード展開
+- **2026-06-22: v0.3.48 — ギャラリータブ 画像ダウンロード・一括エクスポート機能追加** — 詳細パネルの画像プレビューにダウンロード機能を追加
+- **2026-06-22: v0.3.47 — モデルタブ ファイル移動後グループ状態修正** — モデル移動後のグループ状態不整合を修正
+- **2026-06-21: v0.3.46 — プロンプトタブ AI Assistant LM Studio対応・設定タブ AI Assistant設定に変更** — 設定タブ「AI Assistant設定（プロンプトタブ）」
+- **2026-06-21: v0.3.45 — グループ孤立エントリ自動クリーンアップ・Galleryタブ Shift+クリック範囲選択** — グループ孤立エントリ自動クリーンアップ
+- **2026-06-21: v0.3.44 — Galleryタブ高速化・比較モード・バルク強化・バルクバーUI整理** — フェーズ2-A: サーバーサイドサムネイル生成
+- **2026-06-21: ヘルプタブ改善 — Gallery mode 多言語対応・フォント拡大・検索機能追加** — Gallery mode の多言語対応
+- **2026-06-21: Send to Canvas — window.opener経由のキャンバス直接ロード対応**
+- **2026-06-20: API形式ワークフローのキャンバス読み込み修正・画像メタデータ埋め込み修正** — API形式ワークフローをキャンバスへドラッグすると空になる問題を修正
+- **2026-06-20: セキュリティ修正（XSS・パスバリデーション）** — 修正内容
+- **2026-06-20: WFS_GalleryFeeder — ComfyUI キャンバス上コントロール追加** — 新規ファイル（`web/comfyui/gallery_feeder_extension.js`）
+- **2026-06-20: __Feeder__ グループ保護 + サムネイル F ボタン + seed バグ修正** — `__Feeder__` グループの予約済み保護
+- **2026-06-20: Gallery Feeder 機能追加（WFS_GalleryFeeder ノード）** — 概要
+- **2026-06-19: Generate UI — ImpactWildcardEncode/Processor プロンプト検出バグ修正（v0.3.41）** — 修正内容（`static/js/comfyui-workflow.js`）
+- **2026-06-19: AI TOOL タブ Chat ペイン・ワイルドカード生成追加（v0.3.40）** — Chat ペイン（`templates/index.html`, `static/css/main.css`, `static/js/ai-tab.js`, `web/comfyui/node_sets_menu.js`）
+- **2026-06-18: Send to Canvas機能追加（ワークフロータブ・ギャラリータブ→LibraryタイトルDnD）** — ワークフロータブ — Send to Canvas（`static/js/workflow-tab.js`, `static/js/app.js`, `templates/index.html`）
+- **2026-06-15: TaggerシングルGenUI:Pボタン追加＋生成UIのZITワークフロープロンプト解析修正** — TaggerシングルGenUI:Pボタン（`templates/index.html`, `static/js/tagger-tab.js`, `static/js/i18n.js`）
+- **2026-06-15: Taggerバッチ.txt出力追加＋Galleryタグ保存バグ修正** — Taggerバッチ.txt出力（`templates/index.html`, `static/js/tagger-tab.js`, `static/js/i18n.js`, `py/routes/tagger_routes.py`, `py/services/tagger_service.py`）
+- **2026-06-15: Taggerタブ新規実装＋ギャラリー詳細パネルUI改善＋パストラバーサル修正** — Taggerタブ新規実装
+- **2026-06-15: 全選択ボタン追加＋ギャラリーバルクバーi18n対応** — 変更内容
+- **2026-06-10: v0.3.36 — コードレビュー修正＋リファクタリング＋README刷新** — コードレビュー修正（v0.3.35の不具合10件）
+- **2026-06-10: v0.3.35 — テーブルソート・Load GenUI・ワークフロー保存** — 変更内容
+- **2026-06-09: v0.3.34 — Modelsタブ テーブルビュー強化・バルク操作改善** — 変更内容
+- **2026-06-09: v0.3.33 — LoRAペイン・ワークフロー解析バグ修正** — 変更内容
+- **2026-06-08: v0.3.32 — Lora Loader (LoraManager) LoRA検出対応・ライブラリ機能拡張** — 変更内容
+- **2026-06-08: v0.3.31 — LoRAペイン Single/Stack タブ分割・GenUI Model LoRA対応強化** — 変更内容
+- **2026-06-08: v0.3.30 — LoRAスタック トリガーワードバグ修正・ヘルプ更新** — 変更内容
+- **2026-06-08: v0.3.29 — LoRAセクション統合・ヘルプタブサイドバー・UI細部改善** — 変更内容
+- **2026-06-08: 生成UIタブ 複数改善 — LoRA Stackトリガーワード連携・Reset Workflowボタン・Inputタブタブ化** — 変更内容
+- **2026-06-08: Feederタブ UI改善 — (root)自動選択・PREVIEWペイン右移動・RUN中プレビュー反映** — 変更内容
+- **2026-06-07: v0.3.28 — Batchタブ Sampler/Scheduler対応 + Modelsサムネイルバグ修正** — 概要
+- **2026-06-07: v0.3.27 — model-and-prompt-from-metadata カスタムノード対応 + README修正** — 概要
+- **2026-06-07: v0.3.26 — Stack LORA SYNTAX 表示修正 + 全体強度調整 UI** — 概要
+- **2026-06-07: v0.3.25 — Lora Loader (LoraManager) 対応 + Stack 有効無効切り替え** — 概要
+- **2026-06-06: v0.3.24 — Lora Stack 登録機能 + 生成UI Model タブ 3ペイン化** — 概要
+- **2026-06-05: v0.3.23 — バグ修正2件** — バグ修正
+- **2026-06-05: v0.3.22 — カードビュー廃止 + Batch タイプ切り替え UI + 4タイプバッチ生成** — 概要
+- **2026-06-05: (未リリース) — 生成UIタブ Batch 4タイプ対応（Lora/Prompt/Workflow グループ選択 + BATCH QUEUE 4列化）** — 概要
+- **2026-06-05: (未リリース) — Prompt・Workflow Batchグループ登録UI** — 概要
+- **2026-06-04: (未リリース) — モデルBatchグループ登録UI（サムネイル/カード/テーブル・フィルター・一括解除）** — 概要
+- **2026-06-04: (未リリース) — Batch予約グループ・Presets Save後リセット・グループフィルター種別絞り込み** — 概要
+- **2026-05-31: v0.3.21 — CivitAI ホスト設定・Sample サブタブ・URL 修正・ヘルプ i18n 整備** — 概要
+- **2026-05-31: v0.3.20 — CivitAI 詳細パネル強化（Type / Hash 表示・URL 修正・画像別タブ）** — 概要
+- **2026-05-31: v0.3.19 — CivitAI 連携強化（バッチ高速化・リトライ・APIキー・フィールド拡充）** — 概要
+- **2026-05-31: v0.3.18 — Batch タブ追加・Models 複数選択強化** — 概要
+- **2026-05-31: v0.3.17 patch — SSLコンテキスト セキュリティ強化** — 概要
+- **2026-05-30: v0.3.17 — SSL証明書エラー修正・Lora Manager対応** — 概要
+- **2026-05-20: v0.3.16 — CivitAIプレビューフォールバック表示** — 概要
+- **2026-05-20: v0.3.15 — サンプルワークフロー同梱・CivitAI自動プレビュー・Create Tagsオプション** — 概要
+- **2026-05-20: AI TOOL タブ 英語化（SPA・Libraryパネル）** — 概要
+- **2026-05-19: v0.3.14 — AI TOOL タブ 3ペイン化・RAW JSON 文字色カスタマイズ** — 概要
+- **2026-05-19: v0.3.13 — AI タブ（A）追加** — 概要
+- **2026-05-18: v0.3.12 リリース — README スクリーンショット刷新 / workflow_analyzer 拡張** — 概要
+- **2026-05-17: RAW JSON パネルに検索機能を追加** — 概要
+- **2026-05-17: v0.3.11 Metadata タブ対応ノードタイプ拡張 / Settings テキストサイズ UI 追加** — 概要
+- **2026-05-17: v0.3.10 Information タブ キャンバスドラッグ対応 / ノードタイプ拡張 / バグ修正** — 概要
+- **2026-05-16: v0.3.9 サイドパネル I タブ追加 / トップバーアイコン修正** — 概要
+- **2026-05-16: v0.3.8 Metadata タブ: data9 対応 / プロンプト判別不能テキスト** — 概要
+- **2026-05-15: v0.3.7 Metadata タブ: Flux2 / Qwen / Z-Image 対応** — 概要
+- **2026-05-15: v0.3.6 Metadata タブ追加** — 概要
+- **2026-05-09: v0.3.5 GenerateUI — Feeder サブタブ・ワークフロー解析精度向上** — 概要
+- **2026-04-29: v0.3.4 GenerateUI — Checkpoint Batch 刷新・Settings 横並びレイアウト・ヘルプ i18n 修正** — 概要
+- **2026-04-28: v0.3.3 Promptタブ — ワイルドカード支援パネル・Impact Packシンボリックリンク連携・サブディレクトリ対応・GenerateUI修正** — 概要
+- **2026-04-28: v0.3.2 生成UIタブ — Checkpoint Batch・Seed UIレイアウト修正** — 概要
+- **2026-04-27: v0.3.1 ギャラリー拡張（フォルダ/ファイル操作・ワークフロー保存）** — 概要
+- **2026-04-18: v0.3.0 モデルグループ表示改善（全タイプ横断・サイドパネル修正）** — 概要
+- **2026-04-18: v0.2.9 モデル有効/無効・複数選択・一括削除** — 概要
+- **2026-04-14: v0.2.8 データ保存先変更・エクスポート/インポート機能追加** — 概要
+- **2026-04-06: v0.2.6 UI改善・バッジ保存修正・フォルダフィルター追加** — 概要
+- **2026-04-04: v0.2.5 追加修正** — 概要
+- **2026-04-03: v0.2.5 サイドパネル Category/Package サブタブ・テーマ設定・Workflow修正** — 概要
+- **2026-03-29: v0.2.4 GenerateUIタブ レイアウト再設計** — 概要
+- **2026-03-29: v0.2.3 バッジ統一・GenUI Model・サイドパネルModels拡充** — 概要
+- **2026-03-28: v0.2.2 Modelsタブ・CivitAI連携** — 概要
+- **2026-03-27: テーマカスタマイズ機能・設定タブ改善** — 概要
+- **2026-03-26: トップバーボタンアイコン修正・Appモードバッジ調査** — 概要
+- **2026-03-25: v0.2.0 プロンプトプリセット機能・Workflow Studio Library** — 概要
+- **2026-03-24: v0.1.9 サイドパネルUI改善・保存ダイアログ・バグ修正** — 概要
+- **2026-03-24: v0.1.8 WF & Node Library サイドパネル拡張** — 概要
+- **2026-03-23: v0.1.7 Nodes タブ追加** — 概要
+- **2026-03-23: v0.1.6 パストラバーサル脆弱性修正** — 概要
+- **2026-03-22: v0.1.5 テーマシステム追加** — 概要
+- **2026-03-22: v0.1.4 App形式対応・プリセットコピー・分析バグ修正** — 概要
+- **2026-03-21: v0.1.3 ヘルプ＆サポートタブ追加** — 概要
+- **2026-03-19: v0.1.2 リリース** — 概要
+- **2026-03-19: v0.1.1 リリース** — 概要
+- **2026-03-18: プロジェクトリネーム & アイコン適用** — 概要
+- **2026-03-18: デフォルトビュー設定追加** — 概要
+- **2026-03-18: MarkdownNote表示専用ノード除外** — 概要
+- **2026-03-18: サブグラフワークフロー対応 & 変換精度修正** — 概要
+- **2026-03-18: Raw JSON同期修正** — 概要
+- **プロジェクト構成 (現在)**
+- **2026-03-18: JSONシンタックスハイライト** — 概要
+- **2026-03-18: プロンプトタブ 中国語↔英語翻訳追加** — 概要
+- **2026-03-18: v0.1.0 リリース** — 概要
+- **2026-04-13: Gallery タブ追加 & 全タブ Group UI 統一** — 概要
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ketle-man
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,268 @@
+# README Index — ComfyUI-Workflow-Studio
+
+Condensed index of README.md: intro summary, feature names per tab (full descriptions live in the excluded README.md), and the installation/usage/requirements/project-structure sections verbatim. Exists so graphify can extract this without feeding the full README (with its screenshot table) to the local Ollama model. Regenerate with `python tools/generate_doc_index.py readme` whenever README.md changes.
+
+# ComfyUI-Workflow-Studio
+
+A comprehensive workflow, asset management, and generation UI plugin for [ComfyUI](https://github.com/comfyanonymous/ComfyUI).
+
+**📁 Management** — organize all your assets in one studio
+
+- Workflow, model, image, and prompt management
+- AI-powered prompt writing assistance, translation, and tag generation
+- File drop & Gallery-linked metadata viewing — inspect and reuse generation settings instantly
+- Semantic image search in the Gallery — find images by describing them, or list images similar to a selected one
+
+**⚡ GenerateUI** — a productivity-focused generation tab connected to every other tab
+
+- Batch generation across models, samplers, prompts, and workflows
+- Image Feeder for continuous folder-based generation
+- Lab: experimental I2I batch generation with independent per-iteration keyframes for Model (Checkpoint/LoRA Single/VAE)/Prompt/KSampler
+
+**📚 Workflow Studio Library** — a multi-function side panel for smooth ComfyUI integration
+
+- Drag & drop models, nodes, prompts, and workflows straight onto the canvas
+- **Send to Canvas**: click "Send to Canvas" (Workflow tab) or "Copy & Send Canvas" (Gallery tab) to send the workflow directly to the ComfyUI canvas — UI and API formats both supported
+- View metadata from images / JSON, then drop the detected models and prompts onto the canvas
+- Built-in AI tools (translation and more)
+
+![Workflow Studio](https://img.shields.io/badge/ComfyUI-Custom_Node-blue)
+![Version](https://img.shields.io/badge/version-0.8.2-green)
+
+## Features (tab -> feature names)
+
+### Workflow Tab
+Thumbnail / Table views, Thumbnail side panel, Badge filtering, Search, Side panel tabs, Badge management, AI summary, Import / Export, Side panel toolbar buttons, Default view setting, Search clear (✕), Clear all filters (✕ Clear), Sort, GenerateUI Check
+
+### Canvas Snapshot (v0.1.2)
+One-click capture, Auto-save as thumbnail, Embedded workflow metadata, Auto-import
+
+### GenerateUI Tab (v0.3.5)
+6-tab layout, Save button, Input tab, Model tab, Settings tab, Always-visible Raw JSON, Bypass/Mute node handling, One-click generation, Seed control, Style selector, Create Catalog / Catalog buttons, Batch type selector, Batch tab, UI-to-API conversion, Video workflow support, Eagle integration, Qwen Image 2.1 support, Ming Image support
+
+### Feeder subtab (v0.3.5 / v0.3.42)
+ImageFeeder node control, Image library, Selection management, Presets, Continuous Run loop, Index sync, Seed, WFS_GalleryFeeder node, Node & group selector, Image grid, After Gen modes, Run / Stop controls
+
+### Lab subtab (v0.3.87 – v0.5.2)
+Setting / Results / Plan JSON sub-panels, Per-column keyframes, Model column — Checkpoint / LoRA Single / VAE, Empty state when no matching node exists, Wildcards, Prompt cell extras, Keyframe #1 live-reflect, Bypass checkbox, LoRA node bypass & prompt injection, T2I workflow support, Use generated image for next, Workflow recall, Plan files, Plan Load, Plan JSON tab, Save index image to Output on Run, Index images are self-contained plan files, Eagle integration, Select vs. edit, and keyframe reordering, PG — apply a Prompt tab preset group, Video workflow support, Use generated image for next, now video-aware
+
+### Prompt Tab
+3-column layout, AI chat assistant, Image attachment, Translation, Prompt presets, Preset Manager, Group management, Clipboard copy, GenUI Set, Wildcard/Style tab bar, Wildcard input toolbar, Wildcard file manager, Style manager, Form / Table toggle, Table view — Presets / Presets Group / Wildcards / Style
+
+### Settings Tab
+2-column layout, Collapsible sections, Theme selection, Theme customization, Workflows directory, Gallery output directory, Eagle connection, CivitAI Host, CivitAI API Key, Default workflow, Default Checkpoint, VRAM Management (Ollama), Video Playback Volume, Data Management, Text Size, RAW JSON Colors, GenerateUI Model Tab Highlight, Wildcard Integration, G'MIC-Qt Integration, Language
+
+### Gallery Tab (v0.3.44)
+Output / ImagePrompt / Style_Catalog / Metadata sub-tabs, Image browser, Folder tree root label, Thumbnail / Table views, Folder management, File operations, Download, MP4 video support, MP4 embedded metadata, WebM support, Embedded metadata reading fixes, Audio support, File conversion, Move To folder filter, Semantic Search, Audio waveform colors, Info tab: dimensions & duration, Multi-select, Image Compare, Prompt search, Server-side filtering, Group management, Thumbnail F button, Favorites, Detail panel, Prompt tab, Nanobanana tab, Workflow viewer, GenUI button, Image Edit button, Send GenUI Image button, Send to LI node button, Send to LV node button, Send CC button, Search clear (✕), Clear all filters (✕ Clear), Workflow auto-save, Output folder configurable, SVG file support, PSD file support, Performance
+
+### ImagePrompt Gallery subtab (v0.3.94, renamed from Style/Prompt in v0.3.95)
+Visual prompt library, 3-column layout, Prompt builder (right pane), Plain-text prompt storage, ponyxlWildcardsVault format support, Seed data importer
+
+### Style_Catalog Gallery subtab (v0.3.95)
+Visual Style picker, 3-column layout, Positive/Negative panel, Select as Style button, Load in GenerateUI / Open in Metadata Tab buttons, Double-click to enlarge
+
+### Metadata Gallery subtab (v0.3.8, moved from a top-level tab in v0.4.6)
+Now inside Gallery, 3-column layout, File drop, MP4 embedded metadata, Settings section, Nanobanana section, Model extraction, LoRA extraction, Prompt extraction, Prompt actions, Format support, Format note
+
+### Nodes Tab (v0.1.7)
+Node Browser, Search & Filter, Package badges, Node detail panel, Node Sets, Right-click context menu, Multi-select, Search clear (✕), Clear all filters (✕ Clear)
+
+### Models Tab (v0.2.3)
+Model Browser, Thumbnail / Table views, Table column sort, Search & Filter, User-defined badges, Side panel tabs, CivitAI integration, CivitAI panel — Info / Sample sub-tabs, CivitAI panel states, Batch CivitAI fetch, Detail modal, GenUI Model button, Group management, Table view memo, Preview images, Enable / Disable models, Multi-select & bulk operations, Search clear (✕), Clear all filters (✕ Clear)
+
+### Tagger Tab (v0.3.38)
+3 sub-tabs, Model support, Threshold sliders, VLM tagging, Single tab, Single output options, Batch tab, DB tab, Dependencies
+
+### Image Edit Tab (v0.3.65)
+Layer-based image editor, Loading images, Open PSD button, Close button, New button, Tools, Layer panel, Duplicate layer (⧉), Layer lock, Text quality, Export, Canvas navigation, Undo / Redo
+
+### Video Tab (v0.5.0 – v0.7.4)
+Dedicated video generation UI, independent of GenerateUI, Plan subtab, Base settings row, Edit subtab, Edit: Multi-track, Edit: Audio / BGM, Edit: Text overlays, Edit: Crop, Edit: Undo / Redo, Edit project persistence, Asset subtab, Project subtab, Two center previews, First Frame / Last Frame are both optional, Semantic node lookup, not hardcoded IDs, Field highlight color, Load in Video, Frame tab, GIF tab, Playback volume
+
+### AI TOOL Tab (v0.3.14)
+4-pane layout, Translation pane, Chat pane, Chat pane — image generation via Tool Calling, Chat pane — generate_image extra parameters, TOOLS pane (VLM), TOOLS pane — shared Chat attachment, TOOLS pane (Wildcards), Chat pane — image-to-image (I2I), Chat pane — SVG generation, no ComfyUI workflow involved, Chat pane — Skills, Settings pane, Unsloth backend, Decision API client, Settings pane — Chat Image Generation, Settings pane — Chat I2I Generation, Settings pane — Generation, Model unload, Settings shared, Backend support, URL security, Lemonade's other endpoints (not integrated)
+
+### Workflow Studio Library (ComfyUI Side Panel) (v0.3.9)
+Tab layout (W / N / P / M / I / A), W — Workflows tab, N — Nodes tab, M — Models tab, P — Prompts tab, I — Information tab, A — AI TOOL tab, Drag & drop workflows, Drag & drop nodes, Drag & drop prompts, Send to Canvas, Copy prompts, Double-click, Search, ⚙ Theme settings
+
+### Help &amp; Support Tab (v0.1.3)
+Sidebar navigation, Support, Feature list, Keyboard Shortcuts
+
+## Installation
+
+### Via ComfyUI Manager (Recommended)
+
+Search for **Workflow Studio** in ComfyUI Manager and install.
+
+### Manual Installation
+
+```bash
+cd ComfyUI/custom_nodes
+git clone https://github.com/ketle-man/ComfyUI-Workflow-Studio.git
+```
+
+Restart ComfyUI after installation.
+
+---
+
+## Sample Workflows
+
+Sample workflows are included in the `workflows/` folder. You can open them directly in ComfyUI via drag & drop, or load them from the Workflow tab.
+
+> **Note:** Some sample workflows require additional custom nodes.
+> If a node is shown as missing (red/unknown) after loading, install the required custom nodes via **ComfyUI Manager** or by cloning the repository from GitHub into your `ComfyUI/custom_nodes/` directory.
+>
+> ```bash
+> cd ComfyUI/custom_nodes
+> git clone <repository-url>
+> ```
+>
+> After installation, restart ComfyUI to activate the new nodes.
+
+---
+
+## Usage
+
+### Launch
+
+Click the **W** button in the ComfyUI top menu bar, or navigate to:
+
+```
+http://127.0.0.1:8188/wfm
+```
+
+> **Tip:** Shift+Click the W button to open in a new window.
+
+### Canvas Snapshot
+
+Click the **camera icon** (next to the W button) in ComfyUI's top bar to capture the current workflow canvas as a thumbnail. The image is automatically saved to the workflow data folder and appears in Workflow Studio's workflow list.
+
+### Quick Start
+
+1. **Workflow Tab** — Your workflows from `ComfyUI/user/default/workflows/` are automatically listed
+2. **Click a workflow** — View thumbnail, JSON details, and metadata in the side panel
+3. **Load in GenerateUI** — Click the button to load a workflow into the generation interface
+4. **Adjust parameters** — Modify prompts, models, seeds, and settings via the auto-generated UI
+5. **Generate** — Hit the Generate button to queue the prompt
+
+---
+
+## Requirements
+
+- **ComfyUI** — any recent version (v1.33.9+ recommended for action bar integration)
+- **Python 3.10+**
+- **Jinja2** — `pip install jinja2` (usually included with ComfyUI)
+
+### Optional
+
+- **[Ollama](https://ollama.com/)** — for AI chat assistant, translation, and VLM features
+- **[LM Studio](https://lmstudio.ai/)** — alternative backend for translation and VLM (OpenAI-compatible API)
+- **[Lemonade Server](https://lemonade-server.ai/)** — alternative backend for translation, chat, and VLM (OpenAI-compatible API)
+- **[Unsloth](https://unsloth.ai/)** — alternative backend for translation, chat, and VLM (OpenAI-compatible API); needs an API key set via `UNSLOTH_API_KEY` in a `.env` file, or Unsloth's Keyless API access → "Chat and inference" turned on — `pip install -r requirements.txt` for `python-dotenv`
+- **Gemini API key / EmbeddingGemma 2** (v0.8.2) — only for the Gallery's Semantic Search: either set `GEMINI_API_KEY` in the plugin's `.env` (key from [Google AI Studio](https://aistudio.google.com); free tier available, paid beyond it), or use the local **EmbeddingGemma 2** (no key; `onnxruntime`, `tokenizers` and `huggingface_hub` — normally already present with ComfyUI; the model downloads on first use). `onnxruntime-gpu` makes the local model ≈45× faster on NVIDIA GPUs
+- **[Eagle](https://eagle.cool/)** — for auto-saving generated images with metadata
+- **[comfyui-mask-editor-one](https://github.com/ketle-man/comfyui-mask-editor-one) (v0.1.9+)** — enables BiRefNet background removal, SAM3 text-prompt segmentation, and ABR stamp-brush library in the Image Edit Mask tool; `birefnet.safetensors` must be placed in `ComfyUI/models/background_removal/` for BiRefNet
+- **[psd-tools](https://pypi.org/project/psd-tools/)** (v0.6.0) — enables all PSD (Photoshop) features: Gallery bulk "Create PSD" export, Gallery browsing/thumbnails for `.psd` files, and Image Edit's Save PSD / Open PSD buttons; `pip install -r requirements.txt` (ships prebuilt wheels, no C compiler required); without it, PSD-related actions show an error toast with the install command instead of failing silently
+
+#### Backend connection security (v0.7.12)
+
+Server-side proxies for Ollama, LM Studio, Lemonade, Unsloth, the Tagger VLM and Eagle only connect to **localhost / 127.0.0.1 / ::1** (any port); `http(s)` only, no credentials in the URL, and redirects are never followed. To use a backend on another machine (e.g. an Ollama server on your LAN), list it in the `WFS_ALLOWED_BACKEND_HOSTS` environment variable (comma-separated `host` or `host:port`, e.g. `192.168.1.20:11434,gpu-box`) and restart ComfyUI. If you start ComfyUI with `--listen`, anyone who can reach it can use these routes, so only do that on a trusted network.
+
+---
+
+## Supported Languages
+
+| Language | Status |
+| -------- | ------ |
+| English  | Full   |
+| Japanese | Full   |
+| Chinese  | Full   |
+
+---
+
+## Project Structure
+
+```
+ComfyUI-Workflow-Studio/
+├── __init__.py                  # ComfyUI entry point
+├── py/
+│   ├── wfm.py                   # Main class & route registration
+│   ├── config.py                # Path configuration
+│   ├── nodes/
+│   │   ├── prompt_text.py       # WFS_PromptText custom node (positive/negative prompt)
+│   │   └── gallery_feeder_node.py  # WFS_GalleryFeeder custom node (gallery group → IMAGE)
+│   ├── routes/
+│   │   ├── workflow_routes.py   # Workflow CRUD & analysis API
+│   │   ├── nodes_routes.py      # Nodes metadata & node sets API
+│   │   ├── models_routes.py     # Model metadata, preview, CivitAI API
+│   │   ├── prompts_routes.py    # Prompt presets CRUD API
+│   │   ├── settings_routes.py   # Settings API
+│   │   ├── ollama_routes.py     # Ollama proxy API
+│   │   ├── eagle_routes.py      # Eagle integration API
+│   │   └── gallery_routes.py    # Gallery tab API (Output + ImagePrompt + Style_Catalog sub-tabs)
+│   └── services/
+│       ├── workflow_service.py  # Workflow file operations
+│       ├── nodes_service.py     # Node metadata & node sets
+│       ├── models_service.py    # Model metadata & preview images
+│       ├── civitai_service.py   # CivitAI API integration & cache
+│       ├── prompts_service.py   # Prompt presets persistence
+│       ├── workflow_analyzer.py # Model/node detection
+│       ├── settings_service.py  # Settings persistence
+│       ├── png_extractor.py     # PNG metadata extraction
+│       ├── gallery_service.py   # Gallery image scanning, .txt sidecar & ponyxlWildcardsVault prompt resolution
+│       └── gallery_metadata.py  # Gallery per-image metadata store (favorites/tags/memo/groups)
+├── templates/
+│   └── index.html               # SPA template (Workflow/GenerateUI/Prompt/Metadata/Gallery/Nodes/Models/Settings/Help/AI)
+├── static/
+│   ├── favicon.svg              # Browser tab icon (W+S Wave)
+│   ├── css/main.css             # Styles
+│   └── js/
+│       ├── app.js               # App initialization & routing
+│       ├── workflow-tab.js      # Workflow browser
+│       ├── generate-tab.js      # Generation UI
+│       ├── feeder-tab.js        # Feeder subtab (Image Loop + Gallery modes)
+│       ├── gallery-tab.js       # Gallery tab: Output sub-tab (image browser, groups, metadata) + sub-tab switching
+│       ├── image-prompt-tab.js  # Gallery tab: ImagePrompt sub-tab (visual prompt builder)
+│       ├── style-catalog-tab.js # Gallery tab: Style_Catalog sub-tab (visual Style picker)
+│       ├── tagger-tab.js        # Tagger tab (WD Tagger, DeepDanbooru, Ollama VLM)
+│       ├── prompt-tab.js        # AI assistant & presets
+│       ├── metadata-tab.js      # Metadata extraction & display (PNG/WebP/JSON)
+│       ├── settings-tab.js      # Settings panel
+│       ├── comfyui-client.js    # ComfyUI WebSocket/API client
+│       ├── nodes-tab.js          # Node browser & node sets
+│       ├── models-tab.js         # Model browser & CivitAI integration
+│       ├── ai-tab.js             # AI TOOL tab (Translation | Chat | TOOLS/VLM | Settings)
+│       ├── comfyui-workflow.js  # UI-to-API format conversion
+│       ├── comfyui-editor.js    # Dynamic parameter editor
+│       ├── json-highlight.js    # JSON syntax highlighting
+│       ├── util.js              # Shared utilities (escapeHtml, readJsonStorage, getSettings)
+│       └── i18n.js              # Internationalization
+├── web/comfyui/
+│   ├── top_menu_extension.js    # ComfyUI menu bar integration
+│   ├── node_sets_menu.js        # Workflow Studio Library side panel
+│   └── gallery_feeder_extension.js  # WFS_GalleryFeeder canvas widgets (After Gen / Run / Stop)
+├── tools/
+│   └── import_style_prompt_seed.py  # Dev tool: pre-process a wildcards-vault source into ws_image_prompt (not run by the plugin itself)
+└── data/                        # Fallback data dir (used when ComfyUI user/default/ is not found)
+```
+
+---
+
+## License
+
+MIT License
+
+---
+
+## Acknowledgements
+
+- [ComfyUI](https://github.com/comfyanonymous/ComfyUI) by comfyanonymous
+- [ComfyUI-Custom-Scripts](https://github.com/pythongosssss/ComfyUI-Custom-Scripts) by pythongosssss — Canvas snapshot and PNG workflow embedding implementation reference
+- [ComfyUI-Lora-Manager](https://github.com/willmiao/ComfyUI-Lora-Manager) — Plugin architecture and UI pattern reference
+- [Ollama](https://ollama.com/) for local LLM inference
+- [Eagle](https://eagle.cool/) for image management
+- [Pillow (PIL Fork)](https://python-pillow.org/) — server-side thumbnail generation (`data/thumb_cache/`)
+- [ComfyUI-Gallery](https://github.com/PanicTitan/ComfyUI-Gallery) by PanicTitan — thumbnail grid UX reference
+- [infinite-image-browsing](https://github.com/zanllp/sd-webui-infinite-image-browsing) by zanllp — thumbnail caching and index strategy reference
+- [Fooocus](https://github.com/lllyasviel/Fooocus) by lllyasviel — style preset JSON format reference
+
@@ -0,0 +1,69 @@
+"""Runs before ComfyUI imports any custom node — the only place early enough
+to populate os.environ for code that reads env vars at import/request time.
+
+Loads a .env file (if present) from this plugin's root directory so the
+Unsloth backend's API key (UNSLOTH_API_KEY) can be set without editing
+settings.json or exposing it to the frontend.
+"""
+
+from pathlib import Path
+
+PLUGIN_DIR = Path(__file__).resolve().parent
+ENV_FILE = PLUGIN_DIR / ".env"
+
+
+def _maybe_use_selector_event_loop():
+    """Windows: ProactorEventLoop(IOCP) を SelectorEventLoop に切り替える（既定はオフ）。
+
+    環境によっては、ソケットclose(closesocket/NtClose)でイベントループがOSカーネル内で停止し、
+    ComfyUI全体が無応答になる（再起動するまでポートも解放されない）。Selector方式はIOCPを使わず、
+    この停止を避けられる可能性がある。副作用: asyncioのサブプロセス機能が使えない、
+    同時接続数の上限（約512）がある。
+
+    有効化: 環境変数 WFS_SELECTOR_LOOP=1、または
+    user/default/Workflow-Studio/settings.json に "windows_selector_event_loop": true
+    ComfyUIがイベントループを作成する前に呼ぶ必要があるため、ここ(prestartup)で設定する。
+    """
+    import os
+    import sys
+
+    if sys.platform != "win32":
+        return
+    enabled = os.environ.get("WFS_SELECTOR_LOOP", "").strip().lower() in ("1", "true", "yes")
+    if not enabled:
+        try:
+            import json
+            candidates = [
+                PLUGIN_DIR.parent.parent / "user" / "default" / "Workflow-Studio" / "settings.json",
+                PLUGIN_DIR / "data" / "settings.json",  # config.py fallback when user/default is absent
+            ]
+            for settings in candidates:
+                if settings.is_file():
+                    with open(settings, "r", encoding="utf-8") as f:
+                        enabled = bool(json.load(f).get("windows_selector_event_loop", False))
+                    break
+        except Exception:
+            enabled = False
+    if not enabled:
+        return
+    try:
+        import asyncio
+        asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())
+        print("[Workflow Studio] Using WindowsSelectorEventLoopPolicy (windows_selector_event_loop enabled)")
+    except Exception as e:
+        print(f"[WARNING] Workflow Studio: failed to switch to selector event loop: {e}")
+
+
+_maybe_use_selector_event_loop()
+
+if ENV_FILE.exists():
+    try:
+        from dotenv import load_dotenv
+        load_dotenv(ENV_FILE)
+    except ImportError:
+        print(
+            "[WARNING] Workflow Studio: .env file found but python-dotenv is not installed "
+            "(pip install -r requirements.txt). UNSLOTH_API_KEY / GEMINI_API_KEY will not be loaded from .env."
+        )
+    except Exception as e:
+        print(f"[WARNING] Workflow Studio: failed to load .env file: {e}")
@@ -69,6 +69,10 @@ NODE_SETS_FILE = DATA_DIR / "node_sets.json"
 PROMPTS_FILE = DATA_DIR / "prompts.json"
 MODEL_METADATA_FILE = DATA_DIR / "model_metadata.json"
 WILDCARD_DIR = DATA_DIR / "wildcard"
+AI_SKILLS_DIR = DATA_DIR / "ai_skills"
+LAB_PLAN_DIR = DATA_DIR / "lab_plan"
+VIDEO_PLAN_DIR = DATA_DIR / "video_plan"
+VIDEO_EDIT_PROJECT_DIR = DATA_DIR / "video_edit_project"

 # Tagger
 TAGGER_DB_FILE = DATA_DIR / "tagger.db"
@@ -3,11 +3,14 @@
 import asyncio
 import json
 import logging
+import os
 import urllib.request
 import urllib.error

 from aiohttp import web

+from ..services.url_guard import require_backend_url, urlopen as _guarded_urlopen
+
 logger = logging.getLogger(__name__)


@@ -17,6 +20,84 @@ def setup_routes(app: web.Application):
    app.router.add_post("/api/wfm/eagle/test", handle_test)


+def _resolve_local_path(filename, subfolder, type_name):
+    """filename/subfolder/type を ComfyUI 出力ディレクトリ上の実パスに解決する。
+    ComfyUI と Eagle が同一マシン上で動作している場合のみ有効なパスが返る
+    (別マシンの場合は None を返し、呼び出し側は addFromURL にフォールバックする)。"""
+    try:
+        import folder_paths  # type: ignore
+    except Exception:
+        return None
+
+    base_dir = folder_paths.get_directory_by_type(type_name or "output")
+    if not base_dir:
+        return None
+    base_dir = os.path.abspath(base_dir)
+
+    filename = os.path.basename(filename or "")
+    if not filename:
+        return None
+
+    full_dir = os.path.abspath(os.path.join(base_dir, subfolder or ""))
+    # Windowsはパス比較で大文字小文字を区別しないため normcase で正規化してから比較する
+    if os.path.commonpath((os.path.normcase(full_dir), os.path.normcase(base_dir))) != os.path.normcase(base_dir):
+        # ディレクトリトラバーサル対策: base_dir 配下以外は拒否
+        return None
+
+    full_path = os.path.join(full_dir, filename)
+    if not os.path.isfile(full_path):
+        return None
+    return full_path
+
+
+def _resolve_absolute_svg_path(abs_path):
+    """comfyui-tosvg の Save SVG String ノードなどが返す絶対パスを検証する。
+    ComfyUI管理下(output/input/temp)ディレクトリ配下の実在する .svg ファイルのみ許可する
+    (任意の絶対パスをそのまま信頼すると、外部からこのAPIを叩かれた際に
+    ローカルの任意ファイルを送信させられてしまうため)。"""
+    if not abs_path or not abs_path.lower().endswith(".svg"):
+        return None
+    try:
+        import folder_paths  # type: ignore
+    except Exception:
+        return None
+
+    abs_path = os.path.abspath(abs_path)
+    if not os.path.isfile(abs_path):
+        return None
+
+    for type_name in ("output", "temp", "input"):
+        base_dir = folder_paths.get_directory_by_type(type_name)
+        if not base_dir:
+            continue
+        base_dir = os.path.abspath(base_dir)
+        try:
+            # Windowsはパス比較で大文字小文字を区別しないため normcase で正規化してから比較する
+            if os.path.commonpath((os.path.normcase(abs_path), os.path.normcase(base_dir))) == os.path.normcase(base_dir):
+                return abs_path
+        except ValueError:
+            # Windowsで異なるドライブレターの場合 commonpath が例外を投げる
+            continue
+    return None
+
+
+def _eagle_add_from_path(eagle_url, file_path, name, tags):
+    """Proxy request to Eagle's addFromPath API (runs in thread).
+    SVG は ComfyUI の /view がセキュリティ上 application/octet-stream +
+    attachment で返すため、addFromURL 経由だと正しい種別で保存されないことがある。
+    ComfyUI と Eagle が同一マシン上にある場合はローカルパスを直接渡す方が確実。"""
+    eagle_url = eagle_url.rstrip("/")
+    payload = json.dumps({"path": file_path, "name": name, "tags": tags}).encode("utf-8")
+    req = urllib.request.Request(
+        f"{eagle_url}/api/item/addFromPath",
+        data=payload,
+        headers={"Content-Type": "application/json"},
+        method="POST",
+    )
+    with _guarded_urlopen(req, timeout=10) as resp:
+        return json.loads(resp.read().decode("utf-8"))
+
+
 def _eagle_add(eagle_url, image_url, name, tags):
    """Proxy request to Eagle API (runs in thread)."""
    eagle_url = eagle_url.rstrip("/")
@@ -48,7 +129,7 @@ def _eagle_add(eagle_url, image_url, name, tags):
        headers={"Content-Type": "application/json"},
        method="POST",
    )
-    with urllib.request.urlopen(req, timeout=10) as resp:
+    with _guarded_urlopen(req, timeout=10) as resp:
        return json.loads(resp.read().decode("utf-8"))


@@ -59,7 +140,7 @@ def _eagle_test(eagle_url):
        f"{eagle_url}/api/application/info",
        method="GET",
    )
-    with urllib.request.urlopen(req, timeout=5) as resp:
+    with _guarded_urlopen(req, timeout=5) as resp:
        return json.loads(resp.read().decode("utf-8"))


@@ -67,15 +148,37 @@ async def handle_add(request: web.Request) -> web.Response:
    """POST /api/wfm/eagle/add - Add image to Eagle."""
    try:
        body = await request.json()
-        eagle_url = body.get("eagleUrl", "http://localhost:41595")
+        eagle_url = require_backend_url(body.get("eagleUrl", "http://localhost:41595"))
        image_url = body.get("url", "")
        name = body.get("name", "image.png")
        tags = body.get("tags", [])
+        filename = body.get("filename", "")
+        subfolder = body.get("subfolder", "")
+        file_type = body.get("type", "output")
+        local_path_hint = body.get("localPath", "")

-        if not image_url:
+        if not image_url and not local_path_hint:
            return web.json_response({"status": "error", "message": "No URL provided"}, status=400)

-        result = await asyncio.to_thread(_eagle_add, eagle_url, image_url, name, tags)
+        # SVG は /view が application/octet-stream + attachment で返すため、
+        # ローカルファイルが解決できる場合は addFromPath で直接渡す
+        local_path = None
+        if local_path_hint:
+            # comfyui-tosvg の Save SVG String ノードなど、絶対パスが既知の場合
+            local_path = _resolve_absolute_svg_path(local_path_hint)
+        elif (filename or name or "").lower().endswith(".svg"):
+            local_path = _resolve_local_path(filename or name, subfolder, file_type)
+
+        if not local_path and not image_url:
+            return web.json_response(
+                {"status": "error", "message": f"Could not resolve local SVG path: {local_path_hint}"},
+                status=400,
+            )
+
+        if local_path:
+            result = await asyncio.to_thread(_eagle_add_from_path, eagle_url, local_path, name, tags)
+        else:
+            result = await asyncio.to_thread(_eagle_add, eagle_url, image_url, name, tags)
        return web.json_response(result)
    except urllib.error.URLError as e:
        logger.error("Eagle URL error: %s", e)
@@ -92,7 +195,7 @@ async def handle_test(request: web.Request) -> web.Response:
    """POST /api/wfm/eagle/test - Test Eagle connection."""
    try:
        body = await request.json()
-        eagle_url = body.get("eagleUrl", "http://localhost:41595")
+        eagle_url = require_backend_url(body.get("eagleUrl", "http://localhost:41595"))
        result = await asyncio.to_thread(_eagle_test, eagle_url)
        return web.json_response({
            "status": "success",
@@ -2,20 +2,20 @@
 Gallery Routes - ギャラリータブ用APIエンドポイント
 """
 import asyncio
-import base64
 import json
 import mimetypes
 import logging
-import re
 from pathlib import Path
 from aiohttp import web

 from ..config import DATA_DIR
 from ..services.gallery_service import GalleryService
+from ..services.semantic_service import SemanticService, SemanticError, DEFAULT_DIM, MODEL as SEMANTIC_DEFAULT_MODEL

 logger = logging.getLogger(__name__)

 _service = GalleryService(DATA_DIR)
+_semantic = SemanticService(DATA_DIR, _service)


 def _init_allowed_root() -> None:
@@ -43,19 +43,48 @@ def _init_allowed_root() -> None:
    except Exception as e:
        logger.warning("GalleryRoutes: failed to get ComfyUI output dir: %s", e)

+    # ImagePrompt/Style Catalogギャラリー用に実outputフォルダを常に別途保持する
+    # (Settingsで_allowed_rootが別フォルダに変更されていても影響しないようにするため)
+    try:
+        import folder_paths  # type: ignore
+        output_dir = folder_paths.get_output_directory()
+        if output_dir and Path(output_dir).is_dir():
+            _service.set_comfy_output_root(output_dir)
+    except Exception as e:
+        logger.warning("GalleryRoutes: failed to get ComfyUI output dir for image-prompt root: %s", e)
+

 _init_allowed_root()


+# Windowsのレジストリ依存で音声のMIMEが返らない/不統一なため明示登録する（<audio>の再生に必要）
+for _ext, _mime in ((".wav", "audio/wav"), (".mp3", "audio/mpeg"), (".ogg", "audio/ogg"),
+                    (".opus", "audio/ogg"), (".m4a", "audio/mp4"), (".flac", "audio/flac")):
+    mimetypes.add_type(_mime, _ext)
+
+
 def setup_routes(app: web.Application):
    app.router.add_get("/wfm/gallery/folders", list_folders)
+    app.router.add_get("/wfm/gallery/semantic/status", semantic_status)
+    app.router.add_get("/wfm/gallery/semantic/folders", semantic_folders)
+    app.router.add_post("/wfm/gallery/semantic/index", semantic_index)
+    app.router.add_post("/wfm/gallery/semantic/cancel", semantic_cancel)
+    app.router.add_post("/wfm/gallery/semantic/search", semantic_search)
+    app.router.add_post("/wfm/gallery/semantic/similar", semantic_similar)
+    app.router.add_post("/wfm/gallery/semantic/clear", semantic_clear)
+    app.router.add_post("/wfm/gallery/semantic/test", semantic_test)
    app.router.add_get("/wfm/gallery/images", list_images)
    app.router.add_get("/wfm/gallery/image/meta", get_image_meta)
    app.router.add_get("/wfm/gallery/image/workflow", get_image_workflow)
    app.router.add_get("/wfm/gallery/image/serve", serve_image)
    app.router.add_get("/wfm/gallery/image/thumb", serve_thumb)
    app.router.add_post("/wfm/gallery/image/meta", save_image_meta)
+    app.router.add_get("/wfm/gallery/image-prompt/root", get_image_prompt_root)
+    app.router.add_post("/wfm/gallery/image/image-prompt", save_image_prompt)
+    app.router.add_get("/wfm/gallery/style-catalog/root", get_style_catalog_root)
    app.router.add_post("/wfm/gallery/image/save", save_image_to_gallery)
+    app.router.add_post("/wfm/gallery/image/save-to-folder", save_image_to_folder_route)
+    app.router.add_post("/wfm/gallery/output-image/delete", delete_output_image)
    app.router.add_post("/wfm/gallery/image/favorite", toggle_favorite)
    app.router.add_get("/wfm/gallery/groups", list_groups)
    app.router.add_post("/wfm/gallery/groups", create_group)
@@ -68,6 +97,7 @@ def setup_routes(app: web.Application):
    app.router.add_get("/wfm/gallery/groups/{name}/images", list_group_images)
    # バルク操作
    app.router.add_post("/wfm/gallery/bulk/favorite", bulk_favorite)
+    app.router.add_post("/wfm/gallery/convert", convert_file_route)
    app.router.add_post("/wfm/gallery/bulk/group", bulk_group)
    # フォルダ・ファイル操作
    app.router.add_post("/wfm/gallery/folder", create_folder_route)
@@ -75,6 +105,148 @@ def setup_routes(app: web.Application):
    app.router.add_post("/wfm/gallery/images/delete", delete_images_route)
    app.router.add_post("/wfm/gallery/images/move", move_images_route)
    app.router.add_post("/wfm/gallery/images/export-zip", export_images_zip)
+    app.router.add_post("/wfm/gallery/images/export-psd", export_images_psd)
+    app.router.add_post("/wfm/gallery/image/export-psd-layers", export_psd_from_layers)
+    app.router.add_post("/wfm/gallery/image/import-psd-layers", import_psd_layers)
+    app.router.add_get("/wfm/gallery/image/psd-layers", get_psd_layers)
+
+
+# ──────────────────────────────────────────────────────────────
+# セマンティック検索 (Gemini Embedding 2)
+# ──────────────────────────────────────────────────────────────
+
+def _semantic_error(e: SemanticError) -> web.Response:
+    # code はフロントのi18n用。message は詳細(APIキー等の秘密は含まない)
+    return web.json_response({"error": str(e), "code": e.code}, status=400)
+
+
+def _num(body: dict, key: str, default, lo, hi, cast=int):
+    """リクエストの数値パラメータを検証して範囲内に収める。数値でなければ400相当のSemanticErrorにする"""
+    raw = body.get(key, default)
+    if raw is None or raw == "":
+        raw = default
+    try:
+        v = cast(raw)
+    except (TypeError, ValueError, OverflowError):
+        raise SemanticError("bad_param", key)
+    if v != v:   # NaN
+        raise SemanticError("bad_param", key)
+    return max(lo, min(v, hi))
+
+
+async def _json_body(request: web.Request) -> dict:
+    try:
+        body = await request.json()
+        return body if isinstance(body, dict) else {}
+    except Exception:
+        return {}
+
+
+async def semantic_status(request: web.Request) -> web.Response:
+    folder = request.rel_url.query.get("folder", "")
+    recursive = request.rel_url.query.get("recursive", "true") == "true"
+    try:
+        return web.json_response(await asyncio.to_thread(_semantic.status, folder, recursive))
+    except Exception as e:
+        logger.error("semantic_status error: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def semantic_folders(request: web.Request) -> web.Response:
+    root = request.rel_url.query.get("root", "")
+    try:
+        return web.json_response({"folders": await asyncio.to_thread(_semantic.folder_status, root)})
+    except SemanticError as e:
+        return _semantic_error(e)
+    except Exception as e:
+        logger.error("semantic_folders error: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+def _apply_local_options(body: dict) -> None:
+    """リクエストに実行デバイス/スレッド数が含まれていれば反映・保存する"""
+    if "device" in body:
+        _semantic.set_local_options(str(body.get("device", "auto")), _num(body, "threads", 0, 0, 256))
+
+
+async def semantic_index(request: web.Request) -> web.Response:
+    body = await _json_body(request)
+    try:
+        _apply_local_options(body)
+        await asyncio.to_thread(
+            _semantic.start_index,
+            str(body.get("folder", "")),
+            bool(body.get("recursive", True)),
+            "all" if body.get("mode") == "all" else "missing",
+            str(body.get("model", SEMANTIC_DEFAULT_MODEL)),
+            _num(body, "dim", DEFAULT_DIM, 0, 100000),
+            _num(body, "soft", 280, 0, 100000),
+        )
+        return web.json_response({"ok": True})
+    except SemanticError as e:
+        return _semantic_error(e)
+    except Exception as e:
+        logger.error("semantic_index error: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def semantic_cancel(request: web.Request) -> web.Response:
+    _semantic.cancel()
+    return web.json_response({"ok": True})
+
+
+async def semantic_search(request: web.Request) -> web.Response:
+    body = await _json_body(request)
+    try:
+        limit = _num(body, "limit", 200, 1, 1000)
+        min_score = _num(body, "min_score", 0.0, -1.0, 1.0, float)
+        images = await asyncio.to_thread(
+            _semantic.search_text, str(body.get("query", "")), str(body.get("folder", "")),
+            bool(body.get("recursive", True)), limit, min_score,
+        )
+        return web.json_response({"images": images, "total": len(images)})
+    except SemanticError as e:
+        return _semantic_error(e)
+    except Exception as e:
+        logger.error("semantic_search error: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def semantic_similar(request: web.Request) -> web.Response:
+    body = await _json_body(request)
+    try:
+        limit = _num(body, "limit", 200, 1, 1000)
+        min_score = _num(body, "min_score", 0.0, -1.0, 1.0, float)
+        images = await asyncio.to_thread(
+            _semantic.search_similar, str(body.get("path", "")), str(body.get("folder", "")),
+            bool(body.get("recursive", True)), limit, min_score,
+        )
+        return web.json_response({"images": images, "total": len(images)})
+    except SemanticError as e:
+        return _semantic_error(e)
+    except Exception as e:
+        logger.error("semantic_similar error: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def semantic_clear(request: web.Request) -> web.Response:
+    try:
+        await asyncio.to_thread(_semantic.clear)
+        return web.json_response({"ok": True})
+    except SemanticError as e:
+        return _semantic_error(e)
+
+
+async def semantic_test(request: web.Request) -> web.Response:
+    body = await _json_body(request)
+    try:
+        _apply_local_options(body)
+        res = await asyncio.to_thread(_semantic.test_connection, str(body.get("model", SEMANTIC_DEFAULT_MODEL)), _num(body, "dim", DEFAULT_DIM, 0, 100000))
+        return web.json_response({"ok": True, **res})
+    except SemanticError as e:
+        return _semantic_error(e)
+    except Exception as e:
+        return web.json_response({"error": str(e)}, status=500)


 # ──────────────────────────────────────────────────────────────
@@ -104,6 +276,7 @@ async def list_images(request: web.Request) -> web.Response:
    favorite_only = request.rel_url.query.get("favorite", "false") == "true"
    tag_filter = request.rel_url.query.get("tag", "")
    group_filter = request.rel_url.query.get("group", "")
+    recursive = request.rel_url.query.get("recursive", "false") == "true"

    if not folder:
        return web.json_response({"error": "folder parameter required"}, status=400)
@@ -117,6 +290,7 @@ async def list_images(request: web.Request) -> web.Response:
            favorite_only=favorite_only,
            tag_filter=tag_filter,
            group_filter=group_filter,
+            recursive=recursive,
        )
        # 検索なしのフォルダロード時にバックグラウンドインデックスを起動
        if not search:
@@ -148,9 +322,15 @@ async def get_image_workflow(request: web.Request) -> web.Response:
        return web.json_response({"error": "path required"}, status=400)
    try:
        wf = _service.extract_workflow_from_metadata(path)
-        if wf is None:
-            return web.json_response({"workflow": None, "has_workflow": False})
-        return web.json_response({"workflow": wf, "has_workflow": True})
+        # prompt_workflow: プロンプト抽出専用（PNG[prompt]優先）。トップレベルとサブグラフに
+        # 独立した複数系統を持つワークフローではUI形式(workflow)からの抽出がトップレベル
+        # 系統しか拾えないことがあるため、Promptタブはこちらを使う(Metadataタブと揃える)。
+        prompt_wf = _service.extract_prompt_workflow_from_metadata(path)
+        return web.json_response({
+            "workflow": wf,
+            "has_workflow": wf is not None,
+            "prompt_workflow": prompt_wf,
+        })
    except Exception as e:
        return web.json_response({"error": str(e)}, status=500)

@@ -160,7 +340,10 @@ async def serve_image(request: web.Request) -> web.Response:
    if not path:
        return web.Response(status=400)

-    img_path = _service.serve_image(path)
+    # PSDの合成処理はCPU負荷が高く同期実行するとイベントループ全体をブロックする
+    # (他の並行リクエスト、例えば別画像のサムネイル配信も止まってしまう)ためexecutorで実行する
+    loop = asyncio.get_event_loop()
+    img_path = await loop.run_in_executor(None, _service.serve_image, path)
    if img_path is None:
        return web.Response(status=404)

@@ -182,7 +365,10 @@ async def serve_thumb(request: web.Request) -> web.Response:
    except ValueError:
        width = 256

-    thumb_path = _service.serve_thumbnail(path, width)
+    # PSD/MP4のサムネイル生成はCPU負荷が高く同期実行するとイベントループ全体をブロックするため
+    # executorで実行する（他画像のサムネイル配信が巻き添えで遅延・停止するのを防ぐ）
+    loop = asyncio.get_event_loop()
+    thumb_path = await loop.run_in_executor(None, _service.serve_thumbnail, path, width)
    if thumb_path is None:
        return web.Response(status=404)

@@ -204,6 +390,21 @@ async def serve_thumb(request: web.Request) -> web.Response:
 # バルク操作
 # ──────────────────────────────────────────────────────────────

+async def convert_file_route(request: web.Request) -> web.Response:
+    """POST /wfm/gallery/convert — 音声/動画の音声を別形式へ変換（1ファイルずつ呼ぶ）"""
+    try:
+        body = await request.json()
+        path = body.get("path", "")
+        if not path:
+            return web.json_response({"ok": False, "error": "path required"}, status=400)
+        # 変換はCPU負荷が高く同期実行するとイベントループ全体が止まるためexecutorで実行する
+        loop = asyncio.get_event_loop()
+        result = await loop.run_in_executor(None, _service.convert_file, path, body)
+        return web.json_response(result, status=200 if result.get("ok") else 400)
+    except Exception as e:
+        return web.json_response({"ok": False, "error": str(e)}, status=500)
+
+
 async def bulk_favorite(request: web.Request) -> web.Response:
    """POST /wfm/gallery/bulk/favorite — 複数画像のお気に入りを一括設定"""
    try:
@@ -248,6 +449,36 @@ async def save_image_meta(request: web.Request) -> web.Response:
        return web.json_response({"error": str(e)}, status=500)


+async def get_image_prompt_root(request: web.Request) -> web.Response:
+    """GET /wfm/gallery/image-prompt/root — ImagePromptギャラリーのルートフォルダを返す"""
+    root = _service.get_image_prompt_root()
+    if root is None:
+        return web.json_response({"error": "ComfyUI output directory not resolved"}, status=500)
+    return web.json_response({"root": root})
+
+
+async def save_image_prompt(request: web.Request) -> web.Response:
+    """POST /wfm/gallery/image/image-prompt — 画像の.txtサイドカーにプロンプトを保存"""
+    try:
+        body = await request.json()
+        img_path = body.get("path", "")
+        prompt = body.get("prompt", "")
+        if not img_path:
+            return web.json_response({"error": "path required"}, status=400)
+        ok = _service.save_image_prompt(img_path, prompt)
+        return web.json_response({"ok": ok})
+    except Exception as e:
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def get_style_catalog_root(request: web.Request) -> web.Response:
+    """GET /wfm/gallery/style-catalog/root — Style Catalogギャラリーのルートフォルダを返す"""
+    root = _service.get_style_catalog_root()
+    if root is None:
+        return web.json_response({"error": "ComfyUI output directory not resolved"}, status=500)
+    return web.json_response({"root": root})
+
+
 async def toggle_favorite(request: web.Request) -> web.Response:
    try:
        body = await request.json()
@@ -261,7 +492,8 @@ async def toggle_favorite(request: web.Request) -> web.Response:


 async def save_image_to_gallery(request: web.Request) -> web.Response:
-    """Image Edit Tab からの PNG をギャラリーのルートフォルダに保存する。"""
+    """Image Edit Tab / AI Chat からの画像(PNG等)やSVGをギャラリーのルートフォルダに保存する。
+    imageData は data URL (data:<mime>;base64,<data>) を想定。ヘッダがなければPNG扱い（旧互換）。"""
    try:
        body = await request.json()
        filename   = body.get("filename", "").strip()
@@ -273,27 +505,64 @@ async def save_image_to_gallery(request: web.Request) -> web.Response:
        if _service._allowed_root is None:
            return web.json_response({"error": "Gallery root not configured. Open Gallery tab and set output folder first."}, status=500)

-        # ファイル名サニタイズ（OSで使えない文字を除去）
-        safe = re.sub(r'[<>:"/\\|?*\x00-\x1f]', "_", filename)
-        if not safe.lower().endswith(".png"):
-            safe += ".png"
+        result = _service.save_image_to_folder(str(_service._allowed_root), filename, image_data)
+        if not result["ok"]:
+            return web.json_response({"error": result["error"]}, status=400)

-        # base64 data URL をデコード
-        raw = image_data
-        if "," in raw:
-            raw = raw.split(",", 1)[1]
-        image_bytes = base64.b64decode(raw)
-
-        save_path = _service._allowed_root / safe
-        save_path.write_bytes(image_bytes)
-
-        logger.info("save_image_to_gallery: saved %s (%d bytes)", save_path, len(image_bytes))
-        return web.json_response({"ok": True, "path": str(save_path)})
+        logger.info("save_image_to_gallery: saved %s", result["path"])
+        return web.json_response({"ok": True, "path": result["path"]})
    except Exception as e:
        logger.error("save_image_to_gallery error: %s", e)
        return web.json_response({"error": str(e)}, status=500)


+async def save_image_to_folder_route(request: web.Request) -> web.Response:
+    """POST /wfm/gallery/image/save-to-folder — 任意フォルダへ画像を保存（同名なら上書き）。
+    Style Catalogのカタログ作成で、スタイル名をファイル名として使う際に利用する。"""
+    try:
+        body = await request.json()
+        folder     = body.get("folder", "").strip()
+        filename   = body.get("filename", "").strip()
+        image_data = body.get("imageData", "")
+
+        if not folder or not filename or not image_data:
+            return web.json_response({"error": "folder, filename and imageData required"}, status=400)
+
+        result = _service.save_image_to_folder(folder, filename, image_data)
+        if not result["ok"]:
+            return web.json_response({"error": result["error"]}, status=400)
+        return web.json_response({"ok": True, "path": result["path"]})
+    except Exception as e:
+        logger.error("save_image_to_folder_route error: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def delete_output_image(request: web.Request) -> web.Response:
+    """POST /wfm/gallery/output-image/delete — ComfyUI標準の画像参照(filename/subfolder/type)から
+    実ファイルを削除する。Style Catalogのカタログ作成で「Outputフォルダに画像を残さない」
+    オプションが有効な時、カタログへコピー保存した直後の元画像を消すために使う。
+    type="output" 以外は拒否する（temp/inputの誤削除を防止）。"""
+    try:
+        body = await request.json()
+        filename = (body.get("filename") or "").strip()
+        subfolder = body.get("subfolder") or ""
+        img_type = body.get("type") or ""
+        if not filename or img_type != "output":
+            return web.json_response({"error": "filename required and type must be 'output'"}, status=400)
+
+        import folder_paths  # type: ignore
+        output_dir = Path(folder_paths.get_output_directory())
+        target = output_dir / subfolder / filename
+
+        result = await asyncio.to_thread(_service.delete_images, [str(target)])
+        if result["deleted"]:
+            return web.json_response({"ok": True})
+        return web.json_response({"error": "; ".join(result["errors"]) or "File not found"}, status=404)
+    except Exception as e:
+        logger.error("delete_output_image error: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
 # ──────────────────────────────────────────────────────────────
 # グループ管理
 # ──────────────────────────────────────────────────────────────
@@ -316,7 +585,7 @@ async def create_group(request: web.Request) -> web.Response:
        return web.json_response({"error": str(e)}, status=500)


-_RESERVED_GROUPS = {"__Feeder__"}
+_RESERVED_GROUPS = {"__Feeder__", "__Video Assets__", "__Video Temp__"}


 async def rename_group(request: web.Request) -> web.Response:
@@ -485,3 +754,97 @@ async def export_images_zip(request: web.Request) -> web.Response:
    except Exception as e:
        logger.error("Error exporting images to ZIP: %s", e)
        return web.json_response({"error": str(e)}, status=500)
+
+
+async def export_images_psd(request: web.Request) -> web.Response:
+    """POST /wfm/gallery/images/export-psd - 複数画像を1つのPSD(レイヤー分割)にしてダウンロード"""
+    try:
+        body = await request.json()
+        paths = body.get("paths", [])
+        if not paths:
+            return web.json_response({"error": "paths required"}, status=400)
+
+        psd_bytes = _service.build_psd_from_images(paths)
+
+        return web.Response(
+            body=psd_bytes,
+            content_type="image/vnd.adobe.photoshop",
+            headers={"Content-Disposition": "attachment; filename=gallery_export.psd"}
+        )
+    except RuntimeError as e:
+        logger.error("PSD export dependency missing: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error exporting images to PSD: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def export_psd_from_layers(request: web.Request) -> web.Response:
+    """POST /wfm/gallery/image/export-psd-layers - Image Editタブのレイヤー配列を1つのPSDにしてダウンロード"""
+    try:
+        body = await request.json()
+        width = int(body.get("width", 0))
+        height = int(body.get("height", 0))
+        layers = body.get("layers", [])
+        if not layers:
+            return web.json_response({"error": "layers required"}, status=400)
+
+        psd_bytes = _service.build_psd_from_layers(width, height, layers)
+
+        return web.Response(
+            body=psd_bytes,
+            content_type="image/vnd.adobe.photoshop",
+            headers={"Content-Disposition": "attachment; filename=image_edit_export.psd"}
+        )
+    except RuntimeError as e:
+        logger.error("PSD export dependency missing: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error exporting Image Edit layers to PSD: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def import_psd_layers(request: web.Request) -> web.Response:
+    """POST /wfm/gallery/image/import-psd-layers - アップロードされたPSDをレイヤー配列(JSON)に分解して返す"""
+    try:
+        reader = await request.multipart()
+        field = await reader.next()
+        if field is None:
+            return web.json_response({"error": "file required"}, status=400)
+        psd_bytes = await field.read(decode=False)
+
+        loop = asyncio.get_event_loop()
+        result = await loop.run_in_executor(None, _service.import_psd_layers, psd_bytes)
+        return web.json_response(result)
+    except RuntimeError as e:
+        logger.error("PSD import dependency missing: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error importing PSD layers: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def get_psd_layers(request: web.Request) -> web.Response:
+    """GET /wfm/gallery/image/psd-layers - サーバー上のPSDファイルをレイヤー配列(JSON)に分解して返す
+    (Galleryから直接Image Editへ送る際、アップロードの往復を挟まずに済ませるため)"""
+    path = request.rel_url.query.get("path", "")
+    if not path:
+        return web.json_response({"error": "path required"}, status=400)
+    try:
+        loop = asyncio.get_event_loop()
+        result = await loop.run_in_executor(None, _service.get_psd_layers_from_path, path)
+        return web.json_response(result)
+    except RuntimeError as e:
+        logger.error("PSD import dependency missing: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error reading PSD layers: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
@@ -82,9 +82,9 @@ async def handle_open(request: web.Request) -> web.Response:
        # Retrieve setting for gmic path
        data = _settings.load()
        gmic_exe = data.get("gmic_qt_path", "")
-        if not os.path.exists(gmic_exe):
+        if not os.path.isabs(gmic_exe) or os.path.splitext(gmic_exe)[1].lower() != ".exe" or not os.path.isfile(gmic_exe):
            return web.json_response({
-                "error": f"G'MIC executable not found at: {gmic_exe}. Please configure the path in settings."
+                "error": f"G'MIC executable not found at: {gmic_exe}. Please configure an absolute .exe path in settings."
            }, status=400)

        ext = ".png"
@@ -0,0 +1,85 @@
+"""Lab tab plan file management API routes."""
+
+import asyncio
+import logging
+
+from aiohttp import web
+
+from ..config import LAB_PLAN_DIR
+from ..services.lab_plan_service import LabPlanService
+
+logger = logging.getLogger(__name__)
+
+_service = LabPlanService(LAB_PLAN_DIR)
+
+
+def setup_routes(app: web.Application):
+    app.router.add_get("/api/wfm/lab/plans", handle_list)
+    app.router.add_get("/api/wfm/lab/plans/content", handle_get_content)
+    app.router.add_post("/api/wfm/lab/plans/save", handle_save)
+    app.router.add_post("/api/wfm/lab/plans/delete", handle_delete)
+    app.router.add_post("/api/wfm/lab/index-image/save-to-output", handle_save_index_to_output)
+
+
+async def handle_list(request: web.Request) -> web.Response:
+    try:
+        result = await asyncio.to_thread(_service.list_plans)
+        return web.json_response(result)
+    except Exception as e:
+        logger.error("Error listing lab plans: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_get_content(request: web.Request) -> web.Response:
+    filename = request.rel_url.query.get("filename", "")
+    try:
+        data = await asyncio.to_thread(_service.get_plan, filename)
+        return web.json_response({"data": data})
+    except FileNotFoundError:
+        return web.json_response({"error": "not found"}, status=404)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error getting lab plan content: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_save(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        data = body.get("data", {})
+        index_image_base64 = body.get("index_image_base64")
+        result = await asyncio.to_thread(_service.save_plan, filename, data, index_image_base64)
+        return web.json_response({"status": "ok", **result})
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error saving lab plan: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_delete(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        await asyncio.to_thread(_service.delete_plan, filename)
+        return web.json_response({"status": "ok"})
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error deleting lab plan: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_save_index_to_output(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        image_base64 = body.get("image_base64", "")
+        if not image_base64:
+            return web.json_response({"error": "image_base64 required"}, status=400)
+        result = await asyncio.to_thread(_service.save_index_image_to_output, image_base64)
+        return web.json_response({"status": "ok", **result})
+    except Exception as e:
+        logger.error("Error saving lab index image to output: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
@@ -20,6 +20,7 @@ def setup_routes(app: web.Application):
    app.router.add_get("/api/wfm/models/metadata", handle_get_metadata)
    app.router.add_post("/api/wfm/models/metadata", handle_save_metadata)
    app.router.add_get("/api/wfm/models/preview", handle_get_preview)
+    app.router.add_get("/api/wfm/models/preview-keys", handle_get_preview_keys)
    app.router.add_get("/api/wfm/models/groups", handle_get_groups)
    app.router.add_post("/api/wfm/models/groups", handle_save_groups)
    app.router.add_post("/api/wfm/models/civitai/fetch", handle_civitai_fetch)
@@ -139,14 +140,20 @@ async def handle_civitai_fetch(request: web.Request) -> web.Response:
            )
            if not sha256:
                return web.json_response({"error": "Failed to calculate hash"}, status=500)
-            # Cache the hash in model metadata
-            await asyncio.to_thread(
-                _service.update_metadata, model_name, {"sha256": sha256}
-            )
+            # Cache the hash (+ size/mtime so a replaced file invalidates it) in model metadata
+            try:
+                st = file_path.stat()
+                hash_meta = {"sha256": sha256, "sha256Size": st.st_size, "sha256Mtime": st.st_mtime}
+            except OSError:
+                hash_meta = {"sha256": sha256}
+            await asyncio.to_thread(_service.update_metadata, model_name, hash_meta)

        # Fetch from CivitAI
        info = await asyncio.to_thread(_civitai.fetch_by_hash, sha256)
        if not info:
+            await asyncio.to_thread(
+                _service.update_metadata, model_name, {"civitaiNotFound": True}
+            )
            return web.json_response({
                "status": "not_found",
                "sha256": sha256,
@@ -166,6 +173,10 @@ async def handle_civitai_fetch(request: web.Request) -> web.Response:
                if preview_saved:
                    logger.info("Auto-saved preview for %s from CivitAI", model_name)

+        if model_meta.get("civitaiNotFound"):
+            await asyncio.to_thread(
+                _service.update_metadata, model_name, {"civitaiNotFound": False}
+            )
        return web.json_response({
            "status": "ok",
            "sha256": sha256,
@@ -244,69 +255,159 @@ async def handle_civitai_batch(request: web.Request) -> web.Response:
    def on_progress(current, total, model_name, status):
        progress_q.put({"current": current, "total": total, "model": model_name, "status": status})

+    # 保存済みsha256（size/mtime付き）を渡して再ハッシュを避ける
+    import time as _time
+    all_meta0 = _service.get_all_metadata()
+    known = {}
+    for n, _p in model_files:
+        m = all_meta0.get(n) or {}
+        if m.get("sha256"):
+            known[n] = {"sha256": m["sha256"], "size": m.get("sha256Size"), "mtime": m.get("sha256Mtime")}
+
+    # 未計算のものは Lora Manager が保持済みのsha256を借りる（サイズ一致時のみ。ハッシュ計算を省く）
+    if len(known) < len(model_files):
+        from ..services.lora_manager_bridge import fetch_lm_hashes, _norm
+        # Hostヘッダは信用せず、自分自身のループバック＋実際のポートへ接続する（Host偽装/DNSリバインディング対策）
+        sockname = request.transport.get_extra_info("sockname") if request.transport else None
+        port = sockname[1] if sockname else (request.url.port or 8188)
+        origin = f"http://127.0.0.1:{port}"
+        lm = await asyncio.to_thread(fetch_lm_hashes, origin, model_type)
+        for n, p in model_files:
+            if n in known:
+                continue
+            e = lm.get(_norm(p))
+            try:
+                if e and e.get("size") is not None and int(e["size"]) == p.stat().st_size:
+                    known[n] = {"sha256": e["sha256"], "size": int(e["size"]), "mtime": None}
+            except OSError:
+                pass
+
+    # ハッシュ確定ごとに溜め、5秒おきにメタデータへ書き出す（途中で止めても計算済み分が残る）
+    pending_hashes = {}
+    last_flush = [_time.monotonic()]
+
+    def flush_hashes():
+        if not pending_hashes:
+            return
+        try:
+            all_meta = _service.get_all_metadata()
+            for mname, (sha, size, mtime) in list(pending_hashes.items()):
+                entry = all_meta.setdefault(mname, {"tags": [], "favorite": False, "memo": ""})
+                entry["sha256"] = sha
+                entry["sha256Size"] = size
+                entry["sha256Mtime"] = mtime
+            _service._save_metadata(all_meta)
+            pending_hashes.clear()
+        except Exception as e:
+            logger.warning("Failed to flush hashes: %s", e)
+        last_flush[0] = _time.monotonic()
+
+    def on_hash(name, sha, size, mtime):
+        pending_hashes[name] = (sha, size, mtime)
+        if _time.monotonic() - last_flush[0] > 5:
+            flush_hashes()
+
    # Start batch in background thread
+    import threading
+    cancel = threading.Event()
    loop = asyncio.get_event_loop()
-    fetch_task = loop.run_in_executor(None, _civitai.batch_fetch, model_files, on_progress)
+    fetch_task = loop.run_in_executor(
+        None, lambda: _civitai.batch_fetch(model_files, on_progress, known, on_hash, cancel=cancel)
+    )

    # Stream progress events
-    import time as _time
+    try:
+        while not fetch_task.done():
+            # Drain queue
+            while not progress_q.empty():
+                try:
+                    p = progress_q.get_nowait()
+                    await response.write(send_sse("progress", p))
+                except queue.Empty:
+                    break
+            await asyncio.sleep(0.1)

-    while not fetch_task.done():
-        # Drain queue
+        # Drain remaining events
        while not progress_q.empty():
            try:
                p = progress_q.get_nowait()
                await response.write(send_sse("progress", p))
            except queue.Empty:
                break
-        await asyncio.sleep(0.1)
-
-    # Drain remaining events
-    while not progress_q.empty():
+    except (ConnectionResetError, asyncio.CancelledError) as e:
+        # クライアント切断（再読み込み・タブ遷移）: 重いハッシュ計算を打ち切り、計算済み分だけ保存して終了
+        logger.info("civitai batch: client disconnected, cancelling (%s)", type(e).__name__)
+        cancel.set()
        try:
-            p = progress_q.get_nowait()
-            await response.write(send_sse("progress", p))
-        except queue.Empty:
-            break
+            await asyncio.shield(fetch_task)
+        except Exception:
+            pass
+        await asyncio.to_thread(flush_hashes)
+        if isinstance(e, asyncio.CancelledError):
+            raise
+        return response

    # Get results and update metadata
-    results = fetch_task.result()
+    try:
+        results = fetch_task.result()
+    finally:
+        await asyncio.to_thread(flush_hashes)
    meta_updates = {}
    for model_name, result in results.items():
        sha256 = result.get("sha256")
        if sha256:
            meta_updates[model_name] = sha256

-    # Bulk update sha256 in metadata
+    # Bulk update sha256 (+ CivitAI not-found marker) in metadata
    if meta_updates:
        all_meta = _service.get_all_metadata()
        for mname, sha in meta_updates.items():
            if mname not in all_meta:
                all_meta[mname] = {"tags": [], "favorite": False, "memo": ""}
            all_meta[mname]["sha256"] = sha
+            r = results[mname]
+            if r.get("civitai"):
+                all_meta[mname].pop("civitaiNotFound", None)
+            elif not r.get("fetch_failed") and not r.get("error"):
+                all_meta[mname]["civitaiNotFound"] = _service._now_iso()
        _service._save_metadata(all_meta)

    # Auto-set previews for models without preview image
+    # (ネットワークI/Oなのでイベントループを塞がないようスレッドで並列実行)
+    await response.write(send_sse("progress", {
+        "current": len(model_files), "total": len(model_files), "model": "", "status": "previews",
+    }))
    dirs = _get_model_dirs(model_type)
-    preview_saved_count = 0
-    for model_name, result in results.items():
-        civitai = result.get("civitai")
-        if not civitai or not civitai.get("images"):
-            continue
-        if _service.find_preview_image(model_type, model_name):
-            continue
-        model_file = None
-        for d in dirs:
-            p = d / model_name
-            if p.is_file():
-                model_file = p
-                break
-        if not model_file:
-            continue
-        preview_path = model_file.parent / (model_file.stem + ".preview.png")
-        if CivitaiService.download_image(civitai["images"][0], preview_path):
-            preview_saved_count += 1
-            logger.info("Auto-saved preview for %s from CivitAI", model_name)
+
+    def _save_previews():
+        jobs = []
+        for model_name, result in results.items():
+            civitai = result.get("civitai")
+            if not civitai or not civitai.get("images"):
+                continue
+            if _service.find_preview_image(model_type, model_name):
+                continue
+            model_file = None
+            for d in dirs:
+                p = d / model_name
+                if p.is_file():
+                    model_file = p
+                    break
+            if not model_file:
+                continue
+            jobs.append((model_name, civitai["images"][0],
+                         model_file.parent / (model_file.stem + ".preview.png")))
+        if not jobs:
+            return 0
+        from concurrent.futures import ThreadPoolExecutor
+        with ThreadPoolExecutor(max_workers=2) as pool:
+            oks = list(pool.map(lambda j: CivitaiService.download_image(j[1], j[2]), jobs))
+        for (mname, _u, _p), ok in zip(jobs, oks):
+            if ok:
+                logger.info("Auto-saved preview for %s from CivitAI", mname)
+        return sum(1 for ok in oks if ok)
+
+    preview_saved_count = await asyncio.to_thread(_save_previews)

    # Send final result
    summary = {
@@ -314,6 +415,7 @@ async def handle_civitai_batch(request: web.Request) -> web.Response:
        "found": sum(1 for r in results.values() if r.get("civitai")),
        "not_found": sum(1 for r in results.values() if r.get("sha256") and not r.get("civitai")),
        "errors": sum(1 for r in results.values() if r.get("error")),
+        "needs_hash": sum(1 for r in results.values() if r.get("needs_hash")),
        "hashes": {name: r.get("sha256") for name, r in results.items() if r.get("sha256")},
        "preview_saved": preview_saved_count,
    }
@@ -325,6 +427,22 @@ async def handle_civitai_batch(request: web.Request) -> web.Response:
 # ── Model Preview Image ───────────────────────────────────


+async def handle_get_preview_keys(request: web.Request) -> web.Response:
+    """GET /api/wfm/models/preview-keys?type=checkpoint
+
+    プレビュー画像を持つモデルのキー一覧を返す（無いモデルへの画像リクエスト＝404を避けるため）。
+    """
+    model_type = request.query.get("type", "")
+    if not model_type:
+        return web.json_response({"error": "type required"}, status=400)
+    try:
+        keys = await asyncio.to_thread(_service.list_preview_keys, model_type)
+        return web.json_response({"keys": keys})
+    except Exception as e:
+        logger.error("Error listing preview keys: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
 async def handle_get_preview(request: web.Request) -> web.Response:
    """GET /api/wfm/models/preview?type=checkpoint&name=model.safetensors"""
    model_type = request.query.get("type", "")
@@ -632,7 +750,8 @@ async def handle_list_model_files(request: web.Request) -> web.Response:
    if not model_type or model_type not in MODEL_TYPE_FOLDER_KEYS:
        return web.json_response({"error": "invalid type"}, status=400)
    try:
-        result = await asyncio.to_thread(_service.list_model_files, model_type)
+        extra_only = request.query.get("extra_only") == "1"
+        result = await asyncio.to_thread(_service.list_model_files, model_type, extra_only)
        return web.json_response(result)
    except Exception as e:
        logger.error("Error listing model files for %s: %s", model_type, e)
@@ -15,6 +15,7 @@ _service = NodesService()
 def setup_routes(app: web.Application):
    """Register all node management API routes."""
    # Node metadata
+    app.router.add_get("/api/wfm/nodes/light", handle_get_light_nodes)
    app.router.add_get("/api/wfm/nodes/metadata", handle_get_metadata)
    app.router.add_post("/api/wfm/nodes/metadata", handle_save_metadata)
    # Node groups
@@ -28,6 +29,50 @@ def setup_routes(app: web.Application):
    app.router.add_get("/api/wfm/node-sets/export", handle_export_set)


+# ── Light node list ────────────────────────────────────────
+
+
+def _build_light_node_list() -> list[dict]:
+    """全ノードの軽量情報（INPUT_TYPES を呼ばない）。
+
+    /object_info は各ノードの INPUT_TYPES() を呼ぶため、モデル一覧を走査するノードが
+    多い環境では十数秒かかる。Nodesタブの一覧表示に必要なのはクラス属性だけなので、
+    それらのみを読んで高速に返す（入力定義は呼び出し側が /object_info で後から補う）。
+    """
+    import nodes as comfy_nodes
+
+    result = []
+    for name, cls in list(comfy_nodes.NODE_CLASS_MAPPINGS.items()):
+        try:
+            return_types = getattr(cls, "RETURN_TYPES", ()) or ()
+            result.append({
+                "name": name,
+                "display_name": comfy_nodes.NODE_DISPLAY_NAME_MAPPINGS.get(name, name),
+                "description": getattr(cls, "DESCRIPTION", "") or "",
+                "category": getattr(cls, "CATEGORY", "sd") or "sd",
+                "python_module": getattr(cls, "RELATIVE_PYTHON_MODULE", "nodes") or "nodes",
+                "output": list(return_types),
+                "output_name": list(getattr(cls, "RETURN_NAMES", None) or return_types),
+                "output_node": getattr(cls, "OUTPUT_NODE", False) is True,
+                "search_aliases": list(getattr(cls, "SEARCH_ALIASES", []) or []),
+                "deprecated": bool(getattr(cls, "DEPRECATED", False)),
+                "experimental": bool(getattr(cls, "EXPERIMENTAL", False)),
+            })
+        except Exception as e:
+            logger.debug("light node info failed for %s: %s", name, e)
+    return result
+
+
+async def handle_get_light_nodes(request: web.Request) -> web.Response:
+    """GET /api/wfm/nodes/light"""
+    try:
+        result = await asyncio.to_thread(_build_light_node_list)
+        return web.json_response(result)
+    except Exception as e:
+        logger.error("Error building light node list: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
 # ── Node Metadata ──────────────────────────────────────────


@@ -7,6 +7,7 @@ import urllib.request
 from aiohttp import web

 from ..services.settings_service import SettingsService
+from ..services.url_guard import require_backend_url, urlopen

 logger = logging.getLogger(__name__)

@@ -39,11 +40,12 @@ async def handle_models(request: web.Request) -> web.Response:
    import asyncio
    try:
        cfg = _get_ollama_config()
+        base_url = require_backend_url(cfg["url"])

        def _fetch():
-            url = f"{cfg['url']}/api/tags"
+            url = f"{base_url}/api/tags"
            req = urllib.request.Request(url)
-            with urllib.request.urlopen(req, timeout=5) as resp:
+            with urlopen(req, timeout=5) as resp:
                return json.loads(resp.read().decode("utf-8"))

        data = await asyncio.to_thread(_fetch)
@@ -61,11 +63,12 @@ async def handle_test(request: web.Request) -> web.Response:
    import asyncio
    try:
        cfg = _get_ollama_config()
+        base_url = require_backend_url(cfg["url"])

        def _test():
-            url = f"{cfg['url']}/api/tags"
+            url = f"{base_url}/api/tags"
            req = urllib.request.Request(url, method="GET")
-            with urllib.request.urlopen(req, timeout=5) as resp:
+            with urlopen(req, timeout=5) as resp:
                return resp.status == 200

        ok = await asyncio.to_thread(_test)
@@ -83,7 +86,7 @@ async def handle_chat(request: web.Request) -> web.Response:
        body = await request.json()
        cfg = _get_ollama_config()
        model = body.get("model") or cfg["model"]
-        base_url = (body.get("url") or cfg["url"]).rstrip("/")
+        base_url = require_backend_url(body.get("url") or cfg["url"])
        messages = body.get("messages", [])

        def _chat():
@@ -100,7 +103,7 @@ async def handle_chat(request: web.Request) -> web.Response:
                headers={"Content-Type": "application/json"},
                method="POST",
            )
-            with urllib.request.urlopen(req, timeout=120) as resp:
+            with urlopen(req, timeout=120) as resp:
                return json.loads(resp.read().decode("utf-8"))

        resp_data = await asyncio.to_thread(_chat)
@@ -1,14 +1,18 @@
 """Settings API routes."""

 import asyncio
+import io
 import json
 import logging
+import shutil
+import tempfile
+import zipfile
 from pathlib import Path

 from aiohttp import web

 from ..services.settings_service import SettingsService
-from ..config import DEFAULT_WORKFLOWS_DIR, DATA_DIR
+from ..config import DEFAULT_WORKFLOWS_DIR, DATA_DIR, VIDEO_EDIT_PROJECT_DIR

 logger = logging.getLogger(__name__)

@@ -24,6 +28,7 @@ _DATA_FILES = [
    "model_metadata.json",
    "gallery_metadata.json",
    "tagger_settings.json",
+    "civitai_cache.json",
 ]


@@ -33,11 +38,18 @@ def setup_routes(app: web.Application):
    app.router.add_post("/api/wfm/settings", handle_post)
    app.router.add_get("/api/wfm/settings/workflows-dir", handle_get_workflows_dir)
    app.router.add_post("/api/wfm/settings/workflows-dir", handle_set_workflows_dir)
+    app.router.add_get("/api/wfm/settings/models-dir", handle_get_models_dir)
+    app.router.add_post("/api/wfm/settings/models-dir", handle_set_models_dir)
    app.router.add_get("/api/wfm/settings/output-dir", handle_get_output_dir)
    app.router.add_post("/api/wfm/settings/output-dir", handle_set_output_dir)
    app.router.add_get("/api/wfm/settings/export", handle_export)
    app.router.add_post("/api/wfm/settings/import", handle_import)
+    app.router.add_get("/api/wfm/settings/export-full", handle_export_full)
+    app.router.add_post("/api/wfm/settings/import-full", handle_import_full)
    app.router.add_get("/api/wfm/styles", handle_get_styles)
+    app.router.add_post("/api/wfm/styles", handle_create_style)
+    app.router.add_put("/api/wfm/styles/{name}", handle_update_style)
+    app.router.add_delete("/api/wfm/styles/{name}", handle_delete_style)


 async def handle_get(request: web.Request) -> web.Response:
@@ -112,6 +124,47 @@ async def handle_set_workflows_dir(request: web.Request) -> web.Response:
        return web.json_response({"error": str(e)}, status=500)


+async def handle_get_models_dir(request: web.Request) -> web.Response:
+    """GET /api/wfm/settings/models-dir - 追加モデルフォルダ設定と現在有効な探索先を返す。"""
+    try:
+        from ..services.models_service import (
+            MODEL_TYPE_FOLDER_KEYS, _get_model_dirs, parse_extra_model_roots,
+        )
+        saved = (await asyncio.to_thread(_service.load)).get("models_dir", "")
+        effective = await asyncio.to_thread(
+            lambda: {t: [str(d) for d in _get_model_dirs(t)] for t in MODEL_TYPE_FOLDER_KEYS}
+        )
+        return web.json_response({
+            "saved": saved,
+            "roots": parse_extra_model_roots(saved),
+            "effective": effective,
+        })
+    except Exception as e:
+        logger.error("Error getting models dir: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_set_models_dir(request: web.Request) -> web.Response:
+    """POST /api/wfm/settings/models-dir - 追加モデルフォルダを保存（`;`/改行区切りで複数可、空でリセット）。"""
+    try:
+        from ..services.models_service import parse_extra_model_roots
+        body = await request.json()
+        roots = parse_extra_model_roots(body.get("models_dir", ""))
+        missing = [r for r in roots if not Path(r).is_dir()]
+        if missing:
+            return web.json_response(
+                {"error": f"Folder not found: {', '.join(missing)}"}, status=400)
+        saved = ";".join(roots)
+        await asyncio.to_thread(_service.update, {"models_dir": saved})
+
+        from ..routes.models_routes import _service as models_service
+        models_service._scan_cache.clear()
+        return await handle_get_models_dir(request)
+    except Exception as e:
+        logger.error("Error setting models dir: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
 def _get_comfyui_output_dir() -> str:
    """ComfyUIのデフォルトoutputフォルダを取得する。"""
    try:
@@ -245,18 +298,276 @@ async def handle_import(request: web.Request) -> web.Response:
        return web.json_response({"error": str(e)}, status=500)


-def _load_styles() -> list:
-    """Load all style JSON files from DATA_DIR/style/ directory."""
+# Full-backup (ZIP) export/import: unlike the flat _DATA_FILES JSON bundle above, this
+# covers the whole DATA_DIR — directory-shaped data (ai_skills/, lab_plan/, video_plan/,
+# style/) and the SQLite tagger.db that the JSON bundle can't represent. Excludes transient/cache
+# dirs, and wildcard/ specifically because it's typically a symlink into a *different*
+# custom_node's folder (comfyui-impact-pack) rather than this plugin's own data.
+_FULL_BACKUP_EXCLUDE_NAMES = {"gmic_temp", "thumb_cache", "wildcard"}
+
+
+def _add_file_to_zip(zf: zipfile.ZipFile, path: Path, base: Path):
+    rel = str(path.relative_to(base)).replace("\\", "/")
+    if path.name == "settings.json":
+        # Same API-key scrubbing as the JSON-bundle export — fall through to a raw
+        # copy if the file turns out to be unreadable/corrupt rather than skipping it.
+        try:
+            with open(path, "r", encoding="utf-8") as f:
+                data = json.load(f)
+            data = {k: v for k, v in data.items() if k not in _SETTINGS_EXPORT_EXCLUDE}
+            zf.writestr(rel, json.dumps(data, ensure_ascii=False, indent=2))
+            return
+        except Exception:
+            pass
+    zf.write(path, rel)
+
+
+# Two folders this plugin doesn't own but users often want backed up alongside their
+# own data: ComfyUI's own default workflows dir, and the Impact Pack's wildcard
+# library (a separate custom_node — the plugin's own wildcard/ is usually just a
+# symlink into this same folder, see _FULL_BACKUP_EXCLUDE_NAMES above). Opt-in only
+# (see handle_export_full's include_workflows/include_wildcard query params), and
+# stored under an "_external/" prefix so _apply_full_backup_zip can recognize and
+# skip them on restore — see that function's docstring for why.
+def _default_workflows_dir() -> Path:
+    from ..config import COMFYUI_ROOT
+    return COMFYUI_ROOT / "user" / "default" / "workflows"
+
+
+def _impact_pack_wildcard_dir() -> Path:
+    from ..config import COMFYUI_ROOT
+    return COMFYUI_ROOT / "custom_nodes" / "comfyui-impact-pack" / "wildcards"
+
+
+def _add_external_dir_to_zip(zf: zipfile.ZipFile, src_dir: Path, zip_prefix: str):
+    if not src_dir.is_dir() or src_dir.is_symlink():
+        return
+    for path in src_dir.rglob("*"):
+        if path.is_dir() or path.is_symlink():
+            continue
+        rel = f"{zip_prefix}/{path.relative_to(src_dir)}".replace("\\", "/")
+        zf.write(path, rel)
+
+
+# Video Edit projects (video_edit_project/*.json, inside DATA_DIR so always backed up) only
+# store *references* — serverRef {filename, subfolder, type:"input"} — to clips, the BGM,
+# timeline sounds and overlay (PinP) clips uploaded into ComfyUI's input dir, not the media itself. Backing up just the JSON means a
+# restored project on another machine (or after input/ is cleaned up) opens with its clips
+# missing. Opt-in (include_video_media) because the media can be large; stored under its own
+# prefix so _apply_full_backup_zip can route it back into the input dir, not DATA_DIR.
+_VIDEO_MEDIA_PREFIX = "_video_edit_media/"
+
+
+def _comfyui_input_dir() -> Path:
+    import folder_paths
+    return Path(folder_paths.get_input_directory())
+
+
+def _iter_video_edit_media_refs():
+    """Yields (subfolder, filename) for every input-dir file referenced by a saved Video
+    Edit project (clips + BGM + timeline sounds + overlay clips). Unreadable project files
+    are skipped."""
+    if not VIDEO_EDIT_PROJECT_DIR.is_dir():
+        return
+    for path in sorted(VIDEO_EDIT_PROJECT_DIR.glob("*.json")):
+        try:
+            with open(path, "r", encoding="utf-8") as f:
+                data = json.load(f)
+        except Exception:
+            continue
+        # "sounds" / "pips" are top-level lists of {name, serverRef, ...} (absent in older projects).
+        refs = [
+            c.get("serverRef")
+            for key in ("clips", "sounds", "pips")
+            for c in data.get(key) or []
+            if isinstance(c, dict)
+        ]
+        bgm = (data.get("audio") or {}).get("bgm")
+        if isinstance(bgm, dict):
+            refs.append(bgm.get("serverRef"))
+        for ref in refs:
+            if not isinstance(ref, dict) or not ref.get("filename"):
+                continue
+            if (ref.get("type") or "input") != "input":
+                continue
+            yield (ref.get("subfolder") or "").strip("/\\"), ref["filename"]
+
+
+def _add_video_edit_media_to_zip(zf: zipfile.ZipFile) -> None:
+    input_dir = _comfyui_input_dir().resolve()
+    seen = set()
+    for subfolder, filename in _iter_video_edit_media_refs():
+        src = (input_dir / subfolder / filename).resolve()
+        try:
+            rel = src.relative_to(input_dir)  # a crafted project file must not reach outside input/
+        except ValueError:
+            continue
+        if rel in seen or not src.is_file():
+            continue
+        seen.add(rel)
+        zf.write(src, _VIDEO_MEDIA_PREFIX + str(rel).replace("\\", "/"))
+
+
+def _build_full_backup_zip(include_workflows: bool = False, include_wildcard: bool = False,
+                           include_video_media: bool = False) -> bytes:
+    """Zips everything under DATA_DIR except the excluded names above. Walks
+    top-level entries first so an excluded symlinked directory (wildcard/) is never
+    even opened, rather than filtering after a recursive walk has already followed it.
+    Optionally also includes the two external folders above under "_external/"."""
+    buf = io.BytesIO()
+    with zipfile.ZipFile(buf, "w", zipfile.ZIP_DEFLATED) as zf:
+        for top in sorted(DATA_DIR.iterdir()):
+            if top.name in _FULL_BACKUP_EXCLUDE_NAMES or top.is_symlink():
+                continue
+            if top.is_file():
+                _add_file_to_zip(zf, top, DATA_DIR)
+            elif top.is_dir():
+                for path in top.rglob("*"):
+                    if path.is_dir() or path.is_symlink():
+                        continue
+                    _add_file_to_zip(zf, path, DATA_DIR)
+
+        if include_workflows:
+            _add_external_dir_to_zip(zf, _default_workflows_dir(), "_external/default_workflows")
+        if include_wildcard:
+            _add_external_dir_to_zip(zf, _impact_pack_wildcard_dir(), "_external/wildcard")
+        if include_video_media:
+            _add_video_edit_media_to_zip(zf)
+    return buf.getvalue()
+
+
+def _apply_full_backup_zip(zip_source) -> dict:
+    """Extracts a full-backup ZIP into DATA_DIR, overwriting existing files. Guards
+    against Zip Slip (entries whose path resolves outside DATA_DIR via '..' or an
+    absolute path) by checking each entry before writing it.
+
+    Entries under "_external/" (default workflows dir, Impact Pack wildcards — see
+    _build_full_backup_zip) are always skipped here rather than restored: they live
+    outside DATA_DIR and are managed by ComfyUI core / a different custom_node, so
+    auto-restoring them could silently overwrite files this plugin doesn't own. They
+    stay in the ZIP for the user to copy back manually if they want them.
+
+    Entries under "_video_edit_media/" (media referenced by Video Edit projects) are restored
+    into ComfyUI's input dir instead, but never overwrite an existing file there — a file
+    with the same name is assumed to be the same upload (ComfyUI dedupes uploads by renaming),
+    and input/ is shared with every other workflow."""
+    summary = {"extracted": [], "skipped": [], "media_restored": [], "media_existing": []}
+    DATA_DIR.mkdir(parents=True, exist_ok=True)
+    base = DATA_DIR.resolve()
+    input_base = None
+    # zip_source: raw bytes, or a seekable file object (the upload handler spools to a temp file).
+    if isinstance(zip_source, (bytes, bytearray)):
+        zip_source = io.BytesIO(zip_source)
+    with zipfile.ZipFile(zip_source) as zf:
+        for info in zf.infolist():
+            if info.is_dir():
+                continue
+            if info.filename.startswith("_external/"):
+                summary["skipped"].append(info.filename)
+                continue
+            if info.filename.startswith(_VIDEO_MEDIA_PREFIX):
+                if input_base is None:
+                    input_base = _comfyui_input_dir().resolve()
+                target = (input_base / info.filename[len(_VIDEO_MEDIA_PREFIX):]).resolve()
+                try:
+                    target.relative_to(input_base)
+                except ValueError:
+                    summary["skipped"].append(info.filename)
+                    continue
+                if target.exists():
+                    summary["media_existing"].append(info.filename)
+                    continue
+                target.parent.mkdir(parents=True, exist_ok=True)
+                with zf.open(info) as src, open(target, "wb") as dst:
+                    shutil.copyfileobj(src, dst)
+                summary["media_restored"].append(info.filename)
+                continue
+            target = (base / info.filename).resolve()
+            try:
+                target.relative_to(base)
+            except ValueError:
+                summary["skipped"].append(info.filename)
+                continue
+            target.parent.mkdir(parents=True, exist_ok=True)
+            with zf.open(info) as src, open(target, "wb") as dst:
+                shutil.copyfileobj(src, dst)
+            summary["extracted"].append(info.filename)
+    return summary
+
+
+async def handle_export_full(request: web.Request) -> web.Response:
+    """GET /api/wfm/settings/export-full - Download a ZIP of the entire data
+    directory, including data the flat JSON bundle (handle_export) can't represent.
+    Optional query params include_workflows=1 / include_wildcard=1 additionally bundle
+    ComfyUI's default workflows dir / the Impact Pack's wildcard dir (see
+    _build_full_backup_zip) — both restore-excluded, export-only, manual-copy-back.
+    include_video_media=1 adds the input-dir media referenced by Video Edit projects,
+    which *is* restored (into input/, without overwriting)."""
+    try:
+        include_workflows = request.rel_url.query.get("include_workflows") == "1"
+        include_wildcard = request.rel_url.query.get("include_wildcard") == "1"
+        include_video_media = request.rel_url.query.get("include_video_media") == "1"
+        zip_bytes = await asyncio.to_thread(
+            _build_full_backup_zip, include_workflows, include_wildcard, include_video_media)
+        return web.Response(
+            body=zip_bytes,
+            content_type="application/zip",
+            headers={"Content-Disposition": 'attachment; filename="wfm-full-backup.zip"'},
+        )
+    except Exception as e:
+        logger.error("Error building full backup: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_import_full(request: web.Request) -> web.Response:
+    """POST /api/wfm/settings/import-full - Upload and restore a full-backup ZIP."""
+    try:
+        reader = await request.multipart()
+        field = await reader.next()
+        if field is None or field.name != "file":
+            return web.json_response({"error": "file field required"}, status=400)
+        # Stream to a temp file with read_chunk() instead of field.read(): aiohttp (3.14+)
+        # enforces ComfyUI's --max-upload-size (default 100 MB) inside BodyPartReader.read(),
+        # and a backup with the opt-in workflows/wildcard/Video Edit media easily exceeds it
+        # ("Request Entity Too Large"). Also avoids holding the whole ZIP in memory.
+        with tempfile.TemporaryFile() as tmp:
+            while True:
+                chunk = await field.read_chunk(1024 * 1024)
+                if not chunk:
+                    break
+                await asyncio.to_thread(tmp.write, chunk)
+            tmp.seek(0)
+            summary = await asyncio.to_thread(_apply_full_backup_zip, tmp)
+        return web.json_response({"status": "ok", **summary})
+    except zipfile.BadZipFile:
+        return web.json_response({"error": "Not a valid ZIP file"}, status=400)
+    except Exception as e:
+        logger.error("Error importing full backup: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+def _style_files() -> list:
    style_dir = DATA_DIR / "style"
-    styles = []
    if not style_dir.is_dir():
-        return styles
-    for json_file in sorted(style_dir.glob("*.json")):
+        return []
+    return sorted(style_dir.glob("*.json"))
+
+
+def _load_styles() -> list:
+    """Load all style JSON files from DATA_DIR/style/ directory.
+    各エントリに定義元ファイル名を "file" として付与する（Promptタブの一覧表示・
+    「このファイルへ追加」機能で使用）。"""
+    styles = []
+    for json_file in _style_files():
        try:
            with open(json_file, "r", encoding="utf-8") as f:
                data = json.load(f)
            if isinstance(data, list):
-                styles.extend(data)
+                for entry in data:
+                    if isinstance(entry, dict):
+                        entry = dict(entry)
+                        entry["file"] = json_file.name
+                        styles.append(entry)
        except Exception as e:
            logger.warning("Failed to load style file %s: %s", json_file.name, e)
    return styles
@@ -270,3 +581,139 @@ async def handle_get_styles(request: web.Request) -> web.Response:
    except Exception as e:
        logger.error("Error loading styles: %s", e)
        return web.json_response({"error": str(e)}, status=500)
+
+
+# Promptタブ「Style」サブタブでの新規作成分の保存先。既存スタイルの編集は
+# 元々そのスタイルが記載されているファイルをそのまま書き換える（他ファイルへは移動しない）。
+_CUSTOM_STYLE_FILENAME = "custom.json"
+
+
+def _find_style(name: str):
+    """名前が一致する最初のスタイルを探し、(ファイルパス, そのファイルの全データ, インデックス) を返す。
+    見つからなければ None。"""
+    for json_file in _style_files():
+        try:
+            with open(json_file, "r", encoding="utf-8") as f:
+                data = json.load(f)
+        except Exception as e:
+            logger.warning("Failed to load style file %s: %s", json_file.name, e)
+            continue
+        if not isinstance(data, list):
+            continue
+        for i, entry in enumerate(data):
+            if isinstance(entry, dict) and entry.get("name") == name:
+                return json_file, data, i
+    return None
+
+
+def _write_style_file(path: Path, data: list) -> None:
+    with open(path, "w", encoding="utf-8") as f:
+        json.dump(data, f, ensure_ascii=False, indent=2)
+        f.write("\n")
+
+
+async def handle_create_style(request: web.Request) -> web.Response:
+    """POST /api/wfm/styles - 新規スタイルを作成する。
+    body.file を指定すると既存のそのファイルへ追記する（Promptタブの「このファイルへ追加」用、
+    ファイル名はstyleディレクトリに実在するもののみ許可しパストラバーサルを防ぐ）。
+    未指定ならデフォルトのcustom.jsonへ追記する。"""
+    try:
+        body = await request.json()
+        name = (body.get("name") or "").strip()
+        prompt = body.get("prompt", "") or ""
+        negative_prompt = body.get("negative_prompt", "") or ""
+        target_file = (body.get("file") or "").strip()
+        if not name:
+            return web.json_response({"error": "name is required"}, status=400)
+
+        def _create():
+            if _find_style(name) is not None:
+                return "duplicate"
+            style_dir = DATA_DIR / "style"
+            style_dir.mkdir(parents=True, exist_ok=True)
+
+            if target_file:
+                path = next((f for f in _style_files() if f.name == target_file), None)
+                if path is None:
+                    return "file_not_found"
+            else:
+                path = style_dir / _CUSTOM_STYLE_FILENAME
+
+            data = []
+            if path.is_file():
+                try:
+                    with open(path, "r", encoding="utf-8") as f:
+                        loaded = json.load(f)
+                    if isinstance(loaded, list):
+                        data = loaded
+                except Exception as e:
+                    logger.warning("Failed to load %s, recreating: %s", path.name, e)
+            data.append({"name": name, "prompt": prompt, "negative_prompt": negative_prompt})
+            _write_style_file(path, data)
+            return "ok"
+
+        result = await asyncio.to_thread(_create)
+        if result == "duplicate":
+            return web.json_response({"error": f'Style "{name}" already exists'}, status=400)
+        if result == "file_not_found":
+            return web.json_response({"error": f'File "{target_file}" not found'}, status=400)
+        return web.json_response({"ok": True})
+    except Exception as e:
+        logger.error("Error creating style: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_update_style(request: web.Request) -> web.Response:
+    """PUT /api/wfm/styles/{name} - 既存スタイルを更新する（記載元のファイルをそのまま書き換え、リネームも可）。"""
+    try:
+        original_name = request.match_info.get("name", "")
+        body = await request.json()
+        new_name = (body.get("name") or "").strip()
+        prompt = body.get("prompt", "") or ""
+        negative_prompt = body.get("negative_prompt", "") or ""
+        if not new_name:
+            return web.json_response({"error": "name is required"}, status=400)
+
+        def _update():
+            found = _find_style(original_name)
+            if found is None:
+                return "not_found"
+            path, data, idx = found
+            if new_name != original_name and _find_style(new_name) is not None:
+                return "duplicate"
+            data[idx] = {"name": new_name, "prompt": prompt, "negative_prompt": negative_prompt}
+            _write_style_file(path, data)
+            return "ok"
+
+        result = await asyncio.to_thread(_update)
+        if result == "not_found":
+            return web.json_response({"error": "Style not found"}, status=404)
+        if result == "duplicate":
+            return web.json_response({"error": f'Style "{new_name}" already exists'}, status=400)
+        return web.json_response({"ok": True})
+    except Exception as e:
+        logger.error("Error updating style: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_delete_style(request: web.Request) -> web.Response:
+    """DELETE /api/wfm/styles/{name} - スタイルを削除する（記載元のファイルから該当エントリのみ除去）。"""
+    try:
+        name = request.match_info.get("name", "")
+
+        def _delete():
+            found = _find_style(name)
+            if found is None:
+                return False
+            path, data, idx = found
+            del data[idx]
+            _write_style_file(path, data)
+            return True
+
+        ok = await asyncio.to_thread(_delete)
+        if not ok:
+            return web.json_response({"error": "Style not found"}, status=404)
+        return web.json_response({"ok": True})
+    except Exception as e:
+        logger.error("Error deleting style: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
@@ -0,0 +1,64 @@
+"""AI skill (.md system prompt) file management API routes."""
+
+import asyncio
+import logging
+
+from aiohttp import web
+
+from ..config import AI_SKILLS_DIR
+from ..services.skill_service import SkillService
+
+logger = logging.getLogger(__name__)
+
+_service = SkillService(AI_SKILLS_DIR)
+
+
+def setup_routes(app: web.Application):
+    app.router.add_get("/api/wfm/skills", handle_list)
+    app.router.add_get("/api/wfm/skills/content", handle_get_content)
+    app.router.add_post("/api/wfm/skills/save", handle_save)
+    app.router.add_post("/api/wfm/skills/delete", handle_delete)
+
+
+async def handle_list(request: web.Request) -> web.Response:
+    try:
+        result = await asyncio.to_thread(_service.list_skills)
+        return web.json_response(result)
+    except Exception as e:
+        logger.error("Error listing skills: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_get_content(request: web.Request) -> web.Response:
+    filename = request.rel_url.query.get("filename", "")
+    try:
+        content = await asyncio.to_thread(_service.get_content, filename)
+        return web.json_response({"content": content})
+    except FileNotFoundError:
+        return web.json_response({"error": "not found"}, status=404)
+    except Exception as e:
+        logger.error("Error getting skill content: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_save(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        content = body.get("content", "")
+        result = await asyncio.to_thread(_service.save_file, filename, content)
+        return web.json_response({"status": "ok", "file": result})
+    except Exception as e:
+        logger.error("Error saving skill: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_delete(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        await asyncio.to_thread(_service.delete_file, filename)
+        return web.json_response({"status": "ok"})
+    except Exception as e:
+        logger.error("Error deleting skill: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
@@ -18,8 +18,8 @@ _db = TaggerDbService(TAGGER_DB_FILE)
 def setup_routes(app: web.Application):
    app.router.add_get("/wfm/tagger/models", handle_models)
    app.router.add_post("/wfm/tagger/predict", handle_predict)
-    app.router.add_get("/wfm/tagger/ollama/models", handle_ollama_models)
-    app.router.add_post("/wfm/tagger/ollama/predict", handle_ollama_predict)
+    app.router.add_get("/wfm/tagger/vlm/models", handle_vlm_models)
+    app.router.add_post("/wfm/tagger/vlm/predict", handle_vlm_predict)
    app.router.add_post("/wfm/tagger/batch/start", handle_batch_start)
    app.router.add_get("/wfm/tagger/batch/status", handle_batch_status)
    app.router.add_post("/wfm/tagger/batch/stop", handle_batch_stop)
@@ -27,6 +27,7 @@ def setup_routes(app: web.Application):
    app.router.add_get("/wfm/tagger/db/search", handle_db_search)
    app.router.add_put("/wfm/tagger/db/{id}", handle_db_update)
    app.router.add_delete("/wfm/tagger/db/{id}", handle_db_delete)
+    app.router.add_delete("/wfm/tagger/db", handle_db_delete_bulk)
    app.router.add_get("/wfm/tagger/db/export", handle_db_export)
    app.router.add_post("/wfm/tagger/db/save", handle_db_save)
    app.router.add_post("/wfm/tagger/write_meta", handle_write_meta)
@@ -61,25 +62,29 @@ async def handle_predict(request: web.Request) -> web.Response:
        return web.json_response({"error": str(e)}, status=500)


-async def handle_ollama_models(request: web.Request) -> web.Response:
+async def handle_vlm_models(request: web.Request) -> web.Response:
+    backend = request.rel_url.query.get("backend", "ollama")
    api_url = request.rel_url.query.get("api_url", "http://127.0.0.1:11434")
    try:
-        models = await asyncio.to_thread(_svc.ollama_models, api_url)
+        models = await asyncio.to_thread(_svc.vlm_models, backend, api_url)
        return web.json_response({"models": models})
    except Exception as e:
        return web.json_response({"error": str(e)}, status=500)


-async def handle_ollama_predict(request: web.Request) -> web.Response:
+async def handle_vlm_predict(request: web.Request) -> web.Response:
    try:
        body = await request.json()
        result = await asyncio.to_thread(
-            _svc.ollama_predict,
+            _svc.vlm_predict,
            body.get("image_b64", ""),
+            body.get("backend", "ollama"),
            body.get("api_url", "http://127.0.0.1:11434"),
            body.get("model", ""),
            body.get("prompt", ""),
            int(body.get("max_tags", 40)),
+            bool(body.get("thinking_mode", False)),
+            int(body.get("max_tokens", 0)),
        )
        return web.json_response(result)
    except Exception as e:
@@ -96,7 +101,8 @@ async def handle_batch_start(request: web.Request) -> web.Response:
            float(body.get("threshold", 0.35)),
            float(body.get("char_threshold", 0.85)),
            bool(body.get("use_ollama", False)),
-            body.get("ollama_api", "http://127.0.0.1:11434"),
+            body.get("vlm_backend", "ollama"),
+            body.get("vlm_api_url", "http://127.0.0.1:11434"),
            body.get("ollama_model", ""),
            body.get("ollama_prompt", ""),
            int(body.get("ollama_max_tags", 40)),
@@ -104,6 +110,8 @@ async def handle_batch_start(request: web.Request) -> web.Response:
            bool(body.get("write_file", False)),
            bool(body.get("write_txt", False)),
            _db,
+            bool(body.get("thinking_mode", False)),
+            int(body.get("max_tokens", 0)),
        )
        return web.json_response(result)
    except Exception as e:
@@ -161,6 +169,27 @@ async def handle_db_delete(request: web.Request) -> web.Response:
    except Exception as e:
        return web.json_response({"error": str(e)}, status=500)

+async def handle_db_delete_bulk(request: web.Request) -> web.Response:
+    try:
+        data = await request.json()
+        ids = data.get("ids", [])
+
+        if not ids:
+            return web.json_response(
+                {"error": "No IDs specified"},
+                status=400,
+            )
+
+        ids = [int(row_id) for row_id in ids]
+
+        deleted_count = await asyncio.to_thread(_db.delete_bulk, ids)
+
+        return web.json_response({
+            "ok": True,
+            "count": deleted_count,
+        })
+    except Exception as e:
+        return web.json_response({"error": str(e)}, status=500)

 async def handle_db_export(request: web.Request) -> web.Response:
    try:
@@ -0,0 +1,104 @@
+"""Unsloth API proxy routes.
+
+Unlike Ollama/LM Studio/Lemonade, Unsloth Desktop requires an API key even
+for local access (Authorization: Bearer sk-unsloth-...). The key lives in
+UNSLOTH_API_KEY (loaded from a .env file by prestartup_script.py) and is
+never sent to the frontend — the frontend calls this proxy with the target
+path/method/payload, and the server attaches the Authorization header before
+relaying to Unsloth's OpenAI-compatible API — and, via the same relay, to its
+Decision API (/v1/systemone, TypeSafe-compatible Laya decision models; see
+static/js/decision-client.js).
+
+The key is optional: when UNSLOTH_API_KEY is unset the request is relayed
+without an Authorization header, which works when Unsloth Desktop has
+Keyless API access → "Chat and inference" turned on (localhost / private LAN).
+"""
+
+import json
+import logging
+import os
+import urllib.request
+from urllib.error import HTTPError, URLError
+
+from aiohttp import web
+
+from ..services.url_guard import HINT as _URL_HINT, is_allowed_backend_url, urlopen as _guarded_urlopen
+
+logger = logging.getLogger(__name__)
+
+UNSLOTH_DEFAULT_URL = "http://localhost:8888"
+_ALLOWED_PATHS = {"/v1/models", "/v1/chat/completions", "/v1/systemone"}
+# baseUrl is client-supplied (so a custom Unsloth port works), but the
+# Authorization header carries a real secret — restrict the host (loopback, or
+# WFS_ALLOWED_BACKEND_HOSTS set by the operator) so this proxy can't be used to
+# exfiltrate UNSLOTH_API_KEY to an arbitrary server (SSRF). Redirects are not followed.
+
+
+def _get_api_key():
+    """Return the Unsloth API key from the environment (.env), or None."""
+    return os.environ.get("UNSLOTH_API_KEY", "").strip() or None
+
+
+# Shown when a keyless request is rejected — also used by the Tagger's Unsloth VLM path.
+KEYLESS_REJECTED_MESSAGE = (
+    "Unsloth rejected the request without an API key (HTTP 401). Either set UNSLOTH_API_KEY "
+    "in the plugin's .env (copy .env.example) and restart ComfyUI, or turn on Keyless API "
+    "access -> \"Chat and inference\" in Unsloth Desktop's Settings -> API."
+)
+
+
+def setup_routes(app: web.Application):
+    """Register Unsloth API routes."""
+    app.router.add_post("/api/wfm/unsloth/proxy", handle_proxy)
+
+
+async def handle_proxy(request: web.Request) -> web.Response:
+    """POST /api/wfm/unsloth/proxy - Relay a request to Unsloth's OpenAI-compatible / Decision API.
+
+    Body: { baseUrl, path: "/v1/models" | "/v1/chat/completions" | "/v1/systemone",
+            method: "GET" | "POST", payload }
+    """
+    import asyncio
+    try:
+        body = await request.json()
+        base_url = (body.get("baseUrl") or UNSLOTH_DEFAULT_URL).rstrip("/")
+        path = body.get("path") or "/v1/models"
+        method = (body.get("method") or "GET").upper()
+        payload = body.get("payload")
+
+        if path not in _ALLOWED_PATHS or method not in ("GET", "POST"):
+            return web.json_response({"message": "Unsupported proxy target"}, status=400)
+
+        if not is_allowed_backend_url(base_url):
+            return web.json_response({"message": _URL_HINT}, status=400)
+
+        # No key → relay without Authorization (Unsloth's Keyless API access); if Unsloth
+        # still demands one, the 401 below explains both ways to fix it.
+        api_key = _get_api_key()
+
+        def _fetch():
+            data = json.dumps(payload).encode("utf-8") if payload is not None else None
+            headers = {"Authorization": f"Bearer {api_key}"} if api_key else {}
+            if data is not None:
+                headers["Content-Type"] = "application/json"
+            req = urllib.request.Request(f"{base_url}{path}", data=data, headers=headers, method=method)
+            with _guarded_urlopen(req, timeout=120) as resp:
+                return json.loads(resp.read().decode("utf-8"))
+
+        data = await asyncio.to_thread(_fetch)
+        return web.json_response(data)
+
+    except HTTPError as e:
+        detail = e.read().decode("utf-8", errors="replace") if e.fp else str(e)
+        logger.warning("Unsloth proxy HTTP error: %s %s", e.code, detail)
+        if e.code == 401 and not _get_api_key():
+            return web.json_response({"message": KEYLESS_REJECTED_MESSAGE}, status=401)
+        # Include a short excerpt of Unsloth's own error body — Decision API schema errors
+        # (e.g. a malformed question) are otherwise impossible to diagnose from the frontend.
+        return web.json_response({"message": f"Unsloth API error: HTTP {e.code} {detail[:300]}".strip()}, status=e.code)
+    except URLError as e:
+        logger.warning("Unsloth proxy connection error: %s", e)
+        return web.json_response({"message": f"Could not reach Unsloth: {e.reason}"}, status=502)
+    except Exception as e:
+        logger.error("Unsloth proxy error: %s", e)
+        return web.json_response({"message": str(e)}, status=500)
@@ -0,0 +1,239 @@
+"""Video tab API routes: last-frame capture, animated GIF conversion, Edit
+tab probe/text-overlay burn-in, and Plan/Edit project file management."""
+
+import asyncio
+import logging
+
+from aiohttp import web
+
+from ..config import VIDEO_PLAN_DIR, VIDEO_EDIT_PROJECT_DIR
+from ..services.video_service import VideoService
+from ..services.video_plan_service import VideoPlanService
+from ..services.video_edit_project_service import VideoEditProjectService
+
+logger = logging.getLogger(__name__)
+
+_service = VideoService()
+_plan_service = VideoPlanService(VIDEO_PLAN_DIR)
+_edit_project_service = VideoEditProjectService(VIDEO_EDIT_PROJECT_DIR)
+
+
+def setup_routes(app: web.Application):
+    app.router.add_post("/api/wfm/video/frame/save-to-output", handle_save_frame)
+    app.router.add_post("/api/wfm/video/to-gif", handle_to_gif)
+    app.router.add_get("/api/wfm/video/edit/probe", handle_probe_video)
+    app.router.add_post("/api/wfm/video/edit/overlay-text", handle_overlay_text)
+
+    app.router.add_get("/api/wfm/video/plans", handle_list_plans)
+    app.router.add_get("/api/wfm/video/plans/content", handle_get_plan_content)
+    app.router.add_post("/api/wfm/video/plans/save", handle_save_plan)
+    app.router.add_post("/api/wfm/video/plans/delete", handle_delete_plan)
+    app.router.add_post("/api/wfm/video/index-image/save-to-output", handle_save_index_to_output)
+
+    app.router.add_get("/api/wfm/video/edit/projects", handle_list_edit_projects)
+    app.router.add_get("/api/wfm/video/edit/projects/content", handle_get_edit_project_content)
+    app.router.add_post("/api/wfm/video/edit/projects/save", handle_save_edit_project)
+    app.router.add_post("/api/wfm/video/edit/projects/delete", handle_delete_edit_project)
+
+
+async def handle_save_frame(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        image_base64 = body.get("image_base64", "")
+        if not image_base64:
+            return web.json_response({"error": "image_base64 required"}, status=400)
+        result = await asyncio.to_thread(_service.save_frame_to_output, image_base64)
+        return web.json_response({"status": "ok", **result})
+    except Exception as e:
+        logger.error("Error saving video frame to output: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_to_gif(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        subfolder = body.get("subfolder", "")
+        type_ = body.get("type", "output")
+        start_time = float(body.get("start_time") or 0)
+        end_time_raw = body.get("end_time")
+        end_time = float(end_time_raw) if end_time_raw not in (None, "") else None
+        fps = float(body.get("fps") or 10)
+        max_width_raw = body.get("max_width")
+        max_width = int(max_width_raw) if max_width_raw not in (None, "") else None
+
+        if not filename:
+            return web.json_response({"error": "filename required"}, status=400)
+
+        result = await asyncio.to_thread(
+            _service.convert_to_gif, filename, subfolder, type_, start_time, end_time, fps, max_width
+        )
+        return web.json_response({"status": "ok", **result})
+    except FileNotFoundError as e:
+        return web.json_response({"error": str(e)}, status=404)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error converting video to GIF: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_probe_video(request: web.Request) -> web.Response:
+    filename = request.rel_url.query.get("filename", "")
+    subfolder = request.rel_url.query.get("subfolder", "")
+    type_ = request.rel_url.query.get("type", "input")
+    if not filename:
+        return web.json_response({"error": "filename required"}, status=400)
+    try:
+        result = await asyncio.to_thread(_service.probe_video, filename, subfolder, type_)
+        return web.json_response(result)
+    except FileNotFoundError as e:
+        return web.json_response({"error": str(e)}, status=404)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error probing video: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_overlay_text(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        subfolder = body.get("subfolder", "")
+        type_ = body.get("type", "output")
+        overlays = body.get("overlays") or []
+        delete_source = bool(body.get("delete_source"))
+        pips = body.get("pips") or []
+        if not filename:
+            return web.json_response({"error": "filename required"}, status=400)
+        if not isinstance(overlays, list) or not isinstance(pips, list):
+            return web.json_response({"error": "overlays and pips must be lists"}, status=400)
+
+        # Decode+re-encode of every frame — run off the event loop so other
+        # requests aren't stalled for the duration of the burn-in.
+        result = await asyncio.to_thread(
+            _service.overlay_text_on_video, filename, subfolder, type_, overlays, "video/wfm_edit", delete_source, pips
+        )
+        return web.json_response({"status": "ok", **result})
+    except FileNotFoundError as e:
+        return web.json_response({"error": str(e)}, status=404)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error burning text overlay into video: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_list_plans(request: web.Request) -> web.Response:
+    try:
+        result = await asyncio.to_thread(_plan_service.list_plans)
+        return web.json_response(result)
+    except Exception as e:
+        logger.error("Error listing video plans: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_get_plan_content(request: web.Request) -> web.Response:
+    filename = request.rel_url.query.get("filename", "")
+    try:
+        data = await asyncio.to_thread(_plan_service.get_plan, filename)
+        return web.json_response({"data": data})
+    except FileNotFoundError:
+        return web.json_response({"error": "not found"}, status=404)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error getting video plan content: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_save_plan(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        data = body.get("data", {})
+        index_image_base64 = body.get("index_image_base64")
+        result = await asyncio.to_thread(_plan_service.save_plan, filename, data, index_image_base64)
+        return web.json_response({"status": "ok", **result})
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error saving video plan: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_delete_plan(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        await asyncio.to_thread(_plan_service.delete_plan, filename)
+        return web.json_response({"status": "ok"})
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error deleting video plan: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_list_edit_projects(request: web.Request) -> web.Response:
+    try:
+        result = await asyncio.to_thread(_edit_project_service.list_projects)
+        return web.json_response(result)
+    except Exception as e:
+        logger.error("Error listing video edit projects: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_get_edit_project_content(request: web.Request) -> web.Response:
+    filename = request.rel_url.query.get("filename", "")
+    try:
+        data = await asyncio.to_thread(_edit_project_service.get_project, filename)
+        return web.json_response({"data": data})
+    except FileNotFoundError:
+        return web.json_response({"error": "not found"}, status=404)
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error getting video edit project content: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_save_edit_project(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        data = body.get("data", {})
+        result = await asyncio.to_thread(_edit_project_service.save_project, filename, data)
+        return web.json_response({"status": "ok", **result})
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error saving video edit project: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_delete_edit_project(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        filename = body.get("filename", "")
+        await asyncio.to_thread(_edit_project_service.delete_project, filename)
+        return web.json_response({"status": "ok"})
+    except ValueError as e:
+        return web.json_response({"error": str(e)}, status=400)
+    except Exception as e:
+        logger.error("Error deleting video edit project: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
+
+
+async def handle_save_index_to_output(request: web.Request) -> web.Response:
+    try:
+        body = await request.json()
+        image_base64 = body.get("image_base64", "")
+        if not image_base64:
+            return web.json_response({"error": "image_base64 required"}, status=400)
+        result = await asyncio.to_thread(_plan_service.save_index_image_to_output, image_base64)
+        return web.json_response({"status": "ok", **result})
+    except Exception as e:
+        logger.error("Error saving video index image to output: %s", e)
+        return web.json_response({"error": str(e)}, status=500)
@@ -0,0 +1,222 @@
+"""VRAM management: unload Ollama models before image generation to free VRAM.
+
+Ported from ComfyUI Comic Creator (/api/ccc/vram/prepare), which follows ComfyUI-LiveChatStream's
+vram_prepare. ComfyUI's own free-VRAM figure (get_free_memory / system_stats vram_free) may not react
+to Ollama loading/unloading models (measured on ComfyUI_5: 8462MB before and after loading a 9B model
+while nvidia-smi went 6530 -> 469MB), so free VRAM is measured with nvidia-smi plus ComfyUI's own
+unused torch cache, falling back to get_free_memory when nvidia-smi is unavailable.
+"""
+
+import asyncio
+import json
+import logging
+import math
+import subprocess
+import time
+import urllib.request
+from urllib.parse import urlparse
+
+from aiohttp import web
+
+from ..services.url_guard import is_allowed_backend_url, LOOPBACK_HOSTS, urlopen
+
+logger = logging.getLogger(__name__)
+
+_MB = 1024 * 1024
+_OLLAMA_DEFAULT_URL = "http://127.0.0.1:11434"
+_MAX_URLS = 6                      # incl. the default; each unreachable URL costs a connect timeout
+_lock = asyncio.Lock()             # never run concurrently (unloading and measuring interfere)
+
+
+def setup_routes(app: web.Application):
+    app.router.add_post("/api/wfm/vram/prepare", handle_prepare)
+
+
+def _smi_free_mb(ident):
+    flags = getattr(subprocess, "CREATE_NO_WINDOW", 0)
+    out = subprocess.run(
+        ["nvidia-smi", "-i", str(ident), "--query-gpu=memory.free", "--format=csv,noheader,nounits"],
+        capture_output=True, text=True, timeout=5, creationflags=flags,
+    )
+    if out.returncode != 0:
+        raise RuntimeError(out.stderr.strip() or "nvidia-smi failed")
+    return float(out.stdout.strip().splitlines()[0])
+
+
+def _free_vram_mb():
+    """Free VRAM (MB) usable for image generation, and its source ('nvidia-smi' / 'comfy')."""
+    import torch
+    import comfy.model_management as mm
+    dev = mm.get_torch_device()
+    if getattr(dev, "type", "cpu") == "cuda":
+        try:
+            st = torch.cuda.memory_stats(dev)
+            cached = max(0, st["reserved_bytes.all.current"] - st["active_bytes.all.current"])
+            try:
+                free = _smi_free_mb(f"GPU-{torch.cuda.get_device_properties(dev).uuid}")
+            except Exception:
+                free = _smi_free_mb(dev.index or 0)
+            return free + cached / _MB, "nvidia-smi"
+        except Exception as e:
+            logger.warning("[WFS] nvidia-smi free VRAM unavailable, falling back to ComfyUI: %s", e)
+    return mm.get_free_memory(dev) / _MB, "comfy"
+
+
+def _wait_settled(prev_mb, timeout_s=6.0):
+    """After an unload, wait until free VRAM grows and levels off (Ollama runner exit); return it (MB)."""
+    now = prev_mb
+    last = None
+    deadline = time.monotonic() + timeout_s
+    while time.monotonic() < deadline:
+        time.sleep(0.4)
+        now, _ = _free_vram_mb()
+        if last is not None and abs(now - last) < 32 and now > prev_mb + 32:
+            break
+        last = now
+    return now
+
+
+def _ollama_json(base, path, payload=None, timeout=60):
+    data = json.dumps(payload).encode("utf-8") if payload is not None else None
+    req = urllib.request.Request(base + path, data=data, headers={"Content-Type": "application/json"},
+                                 method="POST" if data is not None else "GET")
+    with urlopen(req, timeout=timeout) as resp:
+        return resp.status, resp.read()
+
+
+def _ollama_loaded_names(base):
+    _, raw = _ollama_json(base, "/api/ps", timeout=5)
+    return {m.get("name") for m in json.loads(raw.decode("utf-8")).get("models", [])}
+
+
+def _ollama_unload(base, name):
+    """Unload with keep_alive=0. Models that reject /api/generate (e.g. decision models) are retried
+    with /api/chat. Ollama sometimes unloads a little later even after an error response, so finally
+    check /api/ps to see whether it is still loaded."""
+    errors = []
+    for path, payload in (("/api/generate", {"model": name, "keep_alive": 0}),
+                          ("/api/chat", {"model": name, "messages": [], "keep_alive": 0})):
+        try:
+            status, _ = _ollama_json(base, path, payload)
+            if status == 200:
+                return True
+            errors.append(f"{path}: HTTP {status}")
+        except Exception as e:
+            errors.append(f"{path}: {e}")
+    for _ in range(5):
+        time.sleep(0.5)
+        try:
+            if name not in _ollama_loaded_names(base):
+                return True
+        except Exception:
+            pass
+    logger.warning("[WFS] vram: unload failed for %s: %s", name, "; ".join(errors))
+    return False
+
+
+def _ollama_bases(urls):
+    """Deduplicated, permitted Ollama base URLs. localhost / 127.0.0.1 / ::1 count as one server.
+    URLs the backend guard rejects are skipped (logged) rather than failing the whole request."""
+    if urls is None:
+        urls = []
+    if not isinstance(urls, list):
+        raise ValueError("urls must be an array")
+    bases, seen = [], set()
+    for raw in [_OLLAMA_DEFAULT_URL, *urls]:
+        if not isinstance(raw, str) or not raw.strip():
+            continue
+        base = raw.strip().rstrip("/")
+        if not is_allowed_backend_url(base):
+            logger.warning("[WFS] vram: skipped backend URL not permitted by the guard: %s", base)
+            continue
+        p = urlparse(base)
+        host = (p.hostname or "").lower()
+        key = ("loopback" if host in LOOPBACK_HOSTS else host, p.scheme, p.port or (443 if p.scheme == "https" else 80))
+        if key in seen:
+            continue
+        seen.add(key)
+        bases.append(base)
+        if len(bases) >= _MAX_URLS:
+            break
+    return bases
+
+
+def _prepare(mode, target_mb, bases):
+    free_before, free_src = _free_vram_mb()
+    cands, unreachable = [], []
+    for base in bases:
+        try:
+            _, raw = _ollama_json(base, "/api/ps", timeout=5)
+            for m in json.loads(raw.decode("utf-8")).get("models", []):
+                if m.get("name"):
+                    cands.append({"base": base, "name": m["name"], "vram_mb": int(m.get("size_vram", 0) / _MB)})
+        except Exception as e:
+            # Ollama not running etc. Normal for the default URL, so not a failure; keep the reason in the
+            # log only (the response doesn't reveal the state of caller-chosen local ports)
+            logger.info("[WFS] vram: %s/api/ps failed: %r", base, e)
+            unreachable.append({"url": base})
+    unloaded, failed = [], []
+    free_after = free_before
+    if mode == "auto":
+        # Ollama's size_vram excludes the KV cache etc. and is smaller than the VRAM actually freed.
+        # Choosing by estimate could free too much, so unload the biggest first, one at a time, and stop
+        # as soon as the measured free VRAM reaches the target
+        cands.sort(key=lambda c: c["vram_mb"], reverse=True)
+        for c in cands:
+            if free_after >= target_mb:
+                break
+            if _ollama_unload(c["base"], c["name"]):
+                unloaded.append(c)
+                free_after = _wait_settled(free_after)
+            else:
+                failed.append(c)
+    else:
+        for c in cands:
+            (unloaded if _ollama_unload(c["base"], c["name"]) else failed).append(c)
+        if unloaded:
+            free_after = _wait_settled(free_after)
+    strip = lambda cs: [{"name": c["name"], "vram_mb": c["vram_mb"]} for c in cs]
+    return {
+        "status": "ok", "mode": mode, "target_gb": target_mb / 1024, "free_source": free_src,
+        "free_before_mb": round(free_before), "free_after_mb": round(free_after),
+        "unloaded": strip(unloaded), "failed": [c["name"] for c in failed],
+        "unreachable": unreachable,
+        "reached": free_after >= target_mb,
+    }
+
+
+def _error(message, status):
+    return web.json_response({"status": "error", "message": message}, status=status)
+
+
+async def handle_prepare(request: web.Request) -> web.Response:
+    """POST {mode:'auto'|'all', target_gb, urls:[Ollama URLs]}.
+    auto: only when free VRAM is below target_gb, unload the models using the most VRAM until it is reached.
+    all: unload every loaded model.
+    The default 127.0.0.1:11434 is always included; other URLs must pass the backend URL guard."""
+    # JSON only, so another site can't unload models with a simple (preflight-free) text/plain request
+    if request.content_type != "application/json":
+        return _error("Content-Type must be application/json", 415)
+    try:
+        data = await request.json()
+        if not isinstance(data, dict):
+            raise ValueError("body must be a JSON object")
+        mode = data.get("mode")
+        if mode not in ("auto", "all"):
+            raise ValueError("mode must be auto or all")
+        target_gb = float(data.get("target_gb", 8) or 0)
+        if not math.isfinite(target_gb):
+            raise ValueError("target_gb must be a finite number")
+        target_mb = min(max(target_gb, 0.0), 64.0) * 1024
+        bases = _ollama_bases(data.get("urls"))
+    except Exception as e:
+        return _error(str(e), 400)
+    if _lock.locked():
+        return _error("VRAM management is already running", 409)
+    try:
+        async with _lock:
+            result = await asyncio.get_running_loop().run_in_executor(None, _prepare, mode, target_mb, bases)
+        return web.json_response(result)
+    except Exception as e:
+        logger.error("[WFS] vram prepare error: %s", e)
+        return _error(str(e), 500)
@@ -56,6 +56,38 @@ _MAX_RETRIES = 3
 _BATCH_CHUNK_SIZE = 100


+# サイドカーJSON（.metadata.json / .cm-info.json）の最大サイズ。巨大ファイルでメモリを使い切らないための上限
+_SIDECAR_MAX_BYTES = 2 * 1024 * 1024
+
+
+def _as_int(v):
+    """数値IDだけを受け付ける（文字列に細工されたIDをURL等に埋め込まないため）。不正ならNone。"""
+    try:
+        if isinstance(v, bool):
+            return None
+        n = int(v)
+        return n if n > 0 else None
+    except (TypeError, ValueError):
+        return None
+
+
+# プレビュー画像のダウンロード許可ホスト（サイドカーJSON由来のURLでSSRF/ローカルファイル読み取りをさせない）
+_IMAGE_HOST_SUFFIXES = (".civitai.com", ".civitai.red", ".civitai.green")
+_IMAGE_HOST_EXACT = ("civitai.com", "civitai.red", "civitai.green")
+_IMAGE_MAX_BYTES = 50 * 1024 * 1024
+
+
+def _is_allowed_image_url(url):
+    """https かつ CivitAI 系ホストのURLだけ許可する（file:// や内部アドレス、他ホストは拒否）。"""
+    try:
+        from urllib.parse import urlparse
+        u = urlparse(str(url).strip())
+        host = (u.hostname or "").lower()
+        return u.scheme == "https" and (host in _IMAGE_HOST_EXACT or host.endswith(_IMAGE_HOST_SUFFIXES))
+    except Exception:
+        return False
+
+
 class CivitaiService:
    """Fetch and cache CivitAI model metadata."""

@@ -117,14 +149,16 @@ class CivitaiService:
    # ── ハッシュ計算 ──────────────────────────────────────────

    @staticmethod
-    def calculate_sha256(file_path, chunk_size=65536):
-        """Calculate SHA256 hash of a file."""
+    def calculate_sha256(file_path, chunk_size=512 * 1024, cancel=None):
+        """Calculate SHA256 hash of a file. cancel(threading.Event)がセットされたらNoneを返して中断。"""
        h = hashlib.sha256()
        path = Path(file_path)
        if not path.is_file():
            return None
        with open(path, "rb") as f:
            while True:
+                if cancel is not None and cancel.is_set():
+                    return None
                chunk = f.read(chunk_size)
                if not chunk:
                    break
@@ -142,8 +176,11 @@ class CivitaiService:
        """
        sha256_lower = sha256_hash.lower()
        cache = self._load_cache()
-        if sha256_lower in cache:
-            return cache[sha256_lower]
+        cached = cache.get(sha256_lower)
+        # Stability Matrix(.cm-info.json)由来の簡易情報は画像一覧を持たないため、
+        # 明示的な取得/更新ではAPIから完全な情報で上書きする
+        if cached is not None and cached.get("source") != "cm-info":
+            return cached

        url = f"{CIVITAI_API_BASE}/model-versions/by-hash/{sha256_hash.upper()}"

@@ -198,6 +235,7 @@ class CivitaiService:
        url = f"{CIVITAI_API_BASE}/model-versions/by-hash"
        results = {h.lower(): None for h in sha256_hashes}
        cache = self._load_cache()
+        failed = set()

        for chunk_start in range(0, len(sha256_hashes), _BATCH_CHUNK_SIZE):
            chunk = sha256_hashes[chunk_start:chunk_start + _BATCH_CHUNK_SIZE]
@@ -239,6 +277,7 @@ class CivitaiService:
                        time.sleep(wait)
                        continue
                    logger.warning("CivitAI batch POST error: %s %s", e.code, e.reason)
+                    failed.update(chunk_lower)
                    break
                except (URLError, Exception) as e:
                    if attempt < _MAX_RETRIES - 1:
@@ -247,8 +286,11 @@ class CivitaiService:
                        time.sleep(wait)
                        continue
                    logger.warning("CivitAI batch POST failed: %s", e)
+                    failed.update(chunk_lower)
                    break

+        # 通信失敗したチャンクは「CivitAIに存在しない」と区別するため記録する
+        self.last_failed_hashes = failed
        self._save_cache()
        return results

@@ -338,64 +380,295 @@ class CivitaiService:

    # ── バッチフェッチ ────────────────────────────────────────

-    def batch_fetch(self, model_files, progress_callback=None):
+    @staticmethod
+    def _known_hash(known, st):
+        """メタデータに保存済みのsha256が、現在のファイルに対して有効ならそれを返す。
+
+        size/mtime が記録されていれば一致を確認する（ファイル差し替え検知）。
+        記録の無い旧データは信頼する。
+        """
+        sha = (known or {}).get("sha256")
+        if not sha:
+            return None
+        try:
+            ks, km = known.get("size"), known.get("mtime")
+            if ks is not None and int(ks) != st.st_size:
+                return None
+            if km is not None and abs(float(km) - st.st_mtime) > 2:
+                return None
+        except (TypeError, ValueError):
+            return None
+        return str(sha).lower()
+
+    def _read_sidecar(self, file_path, size):
+        """サイドカーからsha256とCivitAI情報を読む（ハッシュ計算・通信不要）。
+
+        Lora Manager の `<stem>.metadata.json` → Stability Matrix の `<stem>.cm-info.json` の順に試す。
+        Returns: (sha256_lower or None, extracted_info or None)
+        """
+        sha, info = self._read_lm_sidecar(file_path, size)
+        if sha:
+            return sha, info
+        return self._read_cm_info(file_path)
+
+    @staticmethod
+    def _parse_iso_ts(value):
+        """ISO8601文字列→epoch秒。.NETの7桁小数秒にも対応。失敗時はNone。"""
+        try:
+            import re
+            from datetime import datetime
+            s = str(value).replace("Z", "+00:00")
+            s = re.sub(r"(\.\d{6})\d+", r"\1", s)
+            return datetime.fromisoformat(s).timestamp()
+        except Exception:
+            return None
+
+    def _read_cm_info(self, file_path):
+        """Stability Matrix の `<stem>.cm-info.json` から sha256 とCivitAI簡易情報を読む。
+
+        ファイルサイズ情報が無いため、ImportedAt より後にモデルファイルが更新されていたら不採用。
+        画像一覧は持たないので info には "source": "cm-info" を付け、個別取得で完全情報に置き換えられる。
+        """
+        sc = file_path.with_name(file_path.stem + ".cm-info.json")
+        try:
+            if sc.stat().st_size > _SIDECAR_MAX_BYTES:  # 巨大ファイルによるメモリ消費を避ける
+                return None, None
+            with open(sc, "r", encoding="utf-8-sig") as f:
+                d = json.load(f)
+            if not isinstance(d, dict):
+                return None, None
+            sha = str((d.get("Hashes") or {}).get("SHA256", "")).lower()
+            if len(sha) != 64 or any(c not in "0123456789abcdef" for c in sha):
+                return None, None
+            imported = self._parse_iso_ts(d.get("ImportedAt"))
+            if imported is None or file_path.stat().st_mtime > imported + 2:
+                return None, None
+        except Exception:
+            return None, None
+
+        info = None
+        try:
+            if d.get("Source", 0) == 0 and _as_int(d.get("VersionId")):  # 0 = Civitai
+                info = self._info_from_cm_info(d)
+        except Exception:
+            info = None
+        return sha, info
+
+    @staticmethod
+    def _info_from_cm_info(d):
+        """cm-info.json を _extract_info と同じ形式のdictに変換する。"""
+        model_id, version_id = _as_int(d.get("ModelId")), _as_int(d.get("VersionId"))
+        stats = d.get("Stats") or {}
+        return {
+            "versionId": version_id,
+            "modelId": model_id,
+            "modelName": d.get("ModelName", ""),
+            "versionName": d.get("VersionName", ""),
+            "type": d.get("ModelType", ""),
+            "description": d.get("VersionDescription") or d.get("ModelDescription", ""),
+            "tags": [str(x) for x in (d.get("Tags") or []) if isinstance(x, (str, int, float))][:100],
+            "nsfw": bool(d.get("Nsfw", False)),
+            "nsfwLevel": 0,
+            "air": "",
+            "creator": d.get("AuthorUsername") or "",
+            "images": [],
+            "imageDetails": [],
+            "trainedWords": [str(x) for x in (d.get("TrainedWords") or []) if isinstance(x, (str, int, float))][:200],
+            "baseModel": d.get("BaseModel") or "",
+            "fileSize": 0,
+            "fileMeta": d.get("FileMetadata") or {},
+            "fileHashes": d.get("Hashes") or {},
+            "downloadUrl": "",
+            "modelUrl": (
+                f"https://civitai.com/models/{model_id}?modelVersionId={version_id}"
+                if model_id else f"https://civitai.com/model-versions/{version_id}"
+            ),
+            "stats": {
+                "downloadCount": stats.get("downloadCount", 0),
+                "thumbsUpCount": stats.get("thumbsUpCount", 0),
+                "thumbsDownCount": stats.get("thumbsDownCount", 0),
+            },
+            "updatedAt": "",
+            "publishedAt": "",
+            "source": "cm-info",
+        }
+
+    def _read_lm_sidecar(self, file_path, size):
+        """`<stem>.metadata.json` (Lora Manager) サイドカーからsha256とCivitAI情報を読む。
+
+        サイドカーのsizeがファイルサイズと一致する場合のみ採用する。
+        Returns: (sha256_lower or None, extracted_info or None)
+        """
+        sc = file_path.with_name(file_path.stem + ".metadata.json")
+        try:
+            if sc.stat().st_size > _SIDECAR_MAX_BYTES:
+                return None, None
+            with open(sc, "r", encoding="utf-8") as f:
+                d = json.load(f)
+            if not isinstance(d, dict):
+                return None, None
+            sha = str(d.get("sha256", "")).lower()
+            if len(sha) != 64 or any(c not in "0123456789abcdef" for c in sha):
+                return None, None
+            if d.get("size") is None or int(float(d["size"])) != size:
+                return None, None
+        except Exception:
+            return None, None
+
+        info = None
+        civ = d.get("civitai")
+        if isinstance(civ, dict) and civ.get("id"):
+            # 別ファイルの情報を取り込まないよう、files[].hashes.SHA256 に一致するものだけ採用
+            matched = any(
+                str(f.get("hashes", {}).get("SHA256", "")).lower() == sha
+                for f in civ.get("files", []) if isinstance(f, dict)
+            )
+            if matched:
+                try:
+                    info = self._extract_info(civ)
+                except Exception:
+                    info = None
+        return sha, info
+
+    def batch_fetch(self, model_files, progress_callback=None, known=None, on_hash=None, workers=2, cancel=None, hash_missing=False):
        """Batch fetch CivitAI info for multiple model files.

-        Phase 1: SHA256 計算（"hashing"）
+        Phase 0: 保存済みsha256 / サイドカーから解決（ハッシュ計算・通信なし）
+        Phase 1: 残りのSHA256を並列計算（"hashing"）— hash_missing=True のときのみ。
+                 既定では計算せず needs_hash を返す
        Phase 2: POST で一括取得（"fetching"）— キャッシュ済みはスキップ

        Args:
            model_files: list of (model_name, file_path) tuples
            progress_callback: fn(current, total, model_name, status) called per model
+            known: { model_name: {"sha256", "size", "mtime"} } メタデータ保存済みハッシュ
+            on_hash: fn(model_name, sha256, size, mtime) ハッシュが新たに確定するたびに呼ばれる
+            workers: ハッシュ計算の並列数
+            cancel: threading.Event。セットされると未処理分を打ち切って戻る（クライアント切断時）

        Returns: dict of { model_name: { sha256, civitai_info_or_none } }
        """
        results = {}
        total = len(model_files)
        cache = self._load_cache()
+        known = known or {}
+        finished = 0
+        cache_dirty = False

-        # Phase 1: ハッシュ計算
-        hashes_needed = []  # [(model_name, sha256_lower, original_index)]
+        hashes_needed = []  # [(model_name, sha256_lower)]
+        to_hash = []        # [(model_name, file_path, stat)]

-        for i, (model_name, file_path) in enumerate(model_files):
-            if progress_callback:
-                progress_callback(i, total, model_name, "hashing")
-
-            sha256 = self.calculate_sha256(file_path)
-            if not sha256:
-                results[model_name] = {"sha256": None, "civitai": None, "error": "hash_failed"}
+        def _resolved(name, sha, st, new_hash):
+            """sha256確定後の共通処理。キャッシュにあれば完了、無ければ取得待ちへ。"""
+            nonlocal finished
+            results[name] = {"sha256": sha, "civitai": None}
+            if new_hash and on_hash:
+                on_hash(name, sha, st.st_size, st.st_mtime)
+            if sha in cache:
+                results[name]["civitai"] = cache[sha]
+                finished += 1
                if progress_callback:
-                    progress_callback(i + 1, total, model_name, "not_found")
+                    progress_callback(finished, total, name, "cached")
+            else:
+                hashes_needed.append((name, sha))
+
+        # Phase 0: ハッシュ計算なしで解決できるものを先に処理
+        for model_name, file_path in model_files:
+            try:
+                st = Path(file_path).stat()
+            except OSError:
+                results[model_name] = {"sha256": None, "civitai": None, "error": "hash_failed"}
+                finished += 1
+                if progress_callback:
+                    progress_callback(finished, total, model_name, "not_found")
                continue

-            sha256_lower = sha256.lower()
-            results[model_name] = {"sha256": sha256_lower, "civitai": None}
+            sha = self._known_hash(known.get(model_name), st)
+            if sha:
+                _resolved(model_name, sha, st, new_hash=False)
+                continue

-            if sha256_lower in cache:
-                results[model_name]["civitai"] = cache[sha256_lower]
+            sha, info = self._read_sidecar(Path(file_path), st.st_size)
+            if sha:
+                if info and sha not in cache:
+                    cache[sha] = info
+                    cache_dirty = True
+                _resolved(model_name, sha, st, new_hash=True)
+                continue
+
+            to_hash.append((model_name, file_path, st))
+
+        if cache_dirty:
+            self._save_cache()
+
+        logger.info("CivitAI batch: total=%d resolved_without_hash=%d need_hash=%d hash_missing=%s",
+                    total, len(results), len(to_hash), hash_missing)
+        # ハッシュ未確定のものは、hash_missing=False（既定）なら計算せず "needs_hash" として返す
+        # （個別取得でハッシュ計算する運用。全件ハッシュ計算は負荷が高いため行わない）
+        if to_hash and not hash_missing:
+            for model_name, _fp, _st in to_hash:
+                results[model_name] = {"sha256": None, "civitai": None, "needs_hash": True}
+                finished += 1
                if progress_callback:
-                    progress_callback(i + 1, total, model_name, "cached")
-            else:
-                hashes_needed.append((model_name, sha256_lower, i))
+                    progress_callback(finished, total, model_name, "needs_hash")
+            to_hash = []
+
+        # Phase 1: 残りを並列でハッシュ計算（hashlibは大きなチャンクでGILを解放する）
+        if to_hash:
+            from concurrent.futures import ThreadPoolExecutor, as_completed
+
+            def _hash(item):
+                return self.calculate_sha256(item[1], cancel=cancel)
+
+            with ThreadPoolExecutor(max_workers=max(1, workers)) as pool:
+                futures = {pool.submit(_hash, item): item for item in to_hash}
+                for fut in as_completed(futures):
+                    if cancel is not None and cancel.is_set():
+                        for f in futures:
+                            f.cancel()
+                        break
+                    model_name, _fp, st = futures[fut]
+                    try:
+                        sha = fut.result()
+                    except Exception:
+                        sha = None
+                    if not sha:
+                        results[model_name] = {"sha256": None, "civitai": None, "error": "hash_failed"}
+                        finished += 1
+                        if progress_callback:
+                            progress_callback(finished, total, model_name, "not_found")
+                        continue
+                    if progress_callback:
+                        progress_callback(finished, total, model_name, "hashing")
+                    _resolved(model_name, sha.lower(), st, new_hash=True)
+
+        if cancel is not None and cancel.is_set():
+            return results

        # Phase 2: POST で一括取得（未キャッシュ分）
        if hashes_needed:
            if progress_callback:
-                progress_callback(len(results), total, "", "fetching")
+                progress_callback(finished, total, "", "fetching")

            # 同一ハッシュが複数モデルに対応する場合を考慮
-            sha256_to_entries: dict[str, list] = {}
-            for name, sha256_lower, idx in hashes_needed:
-                sha256_to_entries.setdefault(sha256_lower, []).append((name, idx))
+            sha256_to_names: dict[str, list] = {}
+            for name, sha256_lower in hashes_needed:
+                sha256_to_names.setdefault(sha256_lower, []).append(name)

-            batch_results = self._batch_fetch_post(list(sha256_to_entries.keys()))
+            logger.info("CivitAI batch: POST %d hashes", len(sha256_to_names))
+            batch_results = self._batch_fetch_post(list(sha256_to_names.keys()))
+            logger.info("CivitAI batch: POST done")
+            failed = getattr(self, "last_failed_hashes", set())

            for sha256_lower, info in batch_results.items():
-                for name, idx in sha256_to_entries.get(sha256_lower, []):
+                for name in sha256_to_names.get(sha256_lower, []):
                    results[name]["civitai"] = info
+                    if not info and sha256_lower in failed:
+                        results[name]["fetch_failed"] = True
+                    finished += 1
                    if progress_callback:
                        status = "found" if info else "not_found"
-                        progress_callback(idx + 1, total, name, status)
+                        progress_callback(finished, total, name, status)

        if progress_callback:
            progress_callback(total, total, "", "done")
@@ -407,10 +680,25 @@ class CivitaiService:
    @staticmethod
    def download_image(url, save_path, timeout=15):
        """Download an image from URL and save to save_path. Returns True on success."""
+        if not _is_allowed_image_url(url):
+            logger.warning("Refusing to download preview from non-CivitAI URL: %s", str(url)[:120])
+            return False
        try:
+            from urllib.request import HTTPRedirectHandler, HTTPSHandler, build_opener
+
+            class _SafeRedirect(HTTPRedirectHandler):
+                def redirect_request(self, req, fp, code, msg, headers, newurl):
+                    if not _is_allowed_image_url(newurl):  # リダイレクト先も検証
+                        raise ValueError("redirect to disallowed host")
+                    return super().redirect_request(req, fp, code, msg, headers, newurl)
+
+            opener = build_opener(_SafeRedirect, HTTPSHandler(context=_get_ssl_context()))
            req = Request(url, headers={"User-Agent": "ComfyUI-Workflow-Studio/1.0"})
-            with urlopen(req, timeout=timeout, context=_get_ssl_context()) as resp:
-                data = resp.read()
+            with opener.open(req, timeout=timeout) as resp:
+                data = resp.read(_IMAGE_MAX_BYTES + 1)
+            if len(data) > _IMAGE_MAX_BYTES:
+                logger.warning("Preview too large, skipped: %s", str(url)[:120])
+                return False
            with open(save_path, "wb") as f:
                f.write(data)
            return True
@@ -0,0 +1,93 @@
+"""Audio conversion (and audio extraction from video) using PyAV.
+
+Gallery の「Convert」機能のコア。PyAV(av)だけで完結し、システムの ffmpeg には依存しない。
+"""
+
+import logging
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+# 出力フォーマット -> (拡張子, エンコーダ, 標準サンプル形式, ビットレート指定可否, タグ保持可否)
+# .ogg は PyAV 同梱ビルドに Vorbis エンコーダが無いため出力対象外（入力は読める）。
+# wav は任意キー(prompt/workflow)のタグを持てないため、メタデータ引き継ぎの対象外。
+OUTPUT_FORMATS = {
+    "flac": {"ext": ".flac", "codec": "flac", "sample_fmt": "s16", "bitrate": False, "tags": True},
+    "mp3": {"ext": ".mp3", "codec": "libmp3lame", "sample_fmt": "fltp", "bitrate": True, "tags": True},
+    "opus": {"ext": ".opus", "codec": "libopus", "sample_fmt": "flt", "bitrate": True, "tags": True},
+    "m4a": {"ext": ".m4a", "codec": "aac", "sample_fmt": "fltp", "bitrate": True, "tags": True},
+    "wav": {"ext": ".wav", "codec": "pcm_s16le", "sample_fmt": "s16", "bitrate": False, "tags": False},
+}
+
+# 引き継ぐタグ(小文字で比較)。ComfyUIの prompt/workflow と一般的な曲情報のみ。
+_CARRY_TAGS = {"prompt", "workflow", "title", "artist", "album", "date", "genre", "comment"}
+
+_OPUS_RATES = (8000, 12000, 16000, 24000, 48000)
+
+
+def supports_tags(fmt: str) -> bool:
+    return bool(OUTPUT_FORMATS.get(fmt, {}).get("tags"))
+
+
+def _channel_layout(opt: str, src_channels: int) -> str:
+    if opt == "mono":
+        return "mono"
+    if opt == "stereo":
+        return "stereo"
+    return "mono" if src_channels == 1 else "stereo"
+
+
+def convert_audio(src: Path, dst: Path, fmt: str, *, bitrate_kbps: int = 0,
+                  sample_rate: int = 0, channels: str = "keep",
+                  inherit_metadata: bool = True) -> dict:
+    """src(音声または音声トラックを持つ動画)から dst へ変換する。
+
+    sample_rate=0 / channels="keep" は元の設定を維持。opusは48kHz固定扱い。
+    戻り値: {"tags_written": bool}（タグを持てない形式や元にタグが無い場合は False）
+    """
+    import av
+
+    spec = OUTPUT_FORMATS[fmt]
+    tags_written = False
+    with av.open(str(src)) as in_c:
+        if not in_c.streams.audio:
+            raise ValueError("No audio stream in the source file")
+        in_stream = in_c.streams.audio[0]
+
+        rate = sample_rate or in_stream.rate or 44100
+        if fmt == "opus":
+            rate = min(_OPUS_RATES, key=lambda r: abs(r - rate)) if sample_rate else 48000
+        elif fmt == "mp3" and rate not in (8000, 11025, 12000, 16000, 22050, 24000, 32000, 44100, 48000):
+            rate = 44100
+        layout = _channel_layout(channels, in_stream.channels)
+
+        options = {"movflags": "use_metadata_tags"} if fmt == "m4a" else {}
+        with av.open(str(dst), "w", options=options) as out_c:
+            # タグ: 引き継ぎ対象かつ形式がタグを持てる場合のみ
+            if inherit_metadata and spec["tags"]:
+                src_tags = dict(in_c.metadata or {})
+                for k, v in (in_stream.metadata or {}).items():  # Opus等はストリーム側にタグを持つ
+                    src_tags.setdefault(k, v)
+                for k, v in src_tags.items():
+                    if k.lower() in _CARRY_TAGS and isinstance(v, str) and v:
+                        out_c.metadata[k.lower()] = v
+                        tags_written = True
+
+            out_stream = out_c.add_stream(spec["codec"], rate=rate)
+            out_stream.layout = layout
+            if spec["bitrate"] and bitrate_kbps:
+                out_stream.bit_rate = int(bitrate_kbps) * 1000
+
+            resampler = av.AudioResampler(format=out_stream.format.name, layout=layout, rate=rate)
+
+            def _encode(frames):
+                for f in frames:
+                    for pkt in out_stream.encode(f):
+                        out_c.mux(pkt)
+
+            for frame in in_c.decode(in_stream):
+                _encode(resampler.resample(frame))
+            _encode(resampler.resample(None))
+            for pkt in out_stream.encode(None):
+                out_c.mux(pkt)
+    return {"tags_written": tags_written}
@@ -1,8 +1,10 @@
 """
 Gallery Metadata Store - ギャラリー画像のメタデータ永続化
 """
+import copy
 import json
 import logging
+import threading
 from pathlib import Path

 logger = logging.getLogger(__name__)
@@ -24,14 +26,27 @@ class GalleryMetadataStore:
            {"name": str}
        ]
    }
+
+    self._data（特に "images" 辞書）は、バックグラウンドのフォルダインデックススレッド
+    （gallery_service.pyの_bg_index_folder）と、リクエストハンドラを処理するメインスレッドの
+    双方から並行に読み書きされる。ロックなしで辞書を反復（.items()/.values()/for key in ...や
+    json.dumpによるシリアライズ）している最中に別スレッドがキーを追加/削除すると
+    "dictionary changed size during iteration" が発生するため、_data へアクセスする
+    全メソッドを self._lock で保護する（re-entrant: ensure_group()がcreate_group()を
+    内部呼び出しするため、通常のLockではなくRLockを使う）。
    """

    def __init__(self, file_path: Path):
        self.file_path = file_path
+        self._lock = threading.RLock()
+        # ディスクへの実書き込み（JSONシリアライズ+ファイルI/O）を直列化するための
+        # 別ロック。_save_to_disk() を参照。
+        self._write_lock = threading.Lock()
        self._data: dict = {"images": {}, "groups": []}
        self._load()

    def _load(self):
+        # コンストラクタからのみ呼ばれ、この時点ではまだ他スレッドと共有されていないためロック不要
        if self.file_path.exists():
            try:
                with open(self.file_path, "r", encoding="utf-8") as f:
@@ -42,145 +57,233 @@ class GalleryMetadataStore:
                }
            except Exception as e:
                logger.warning("GalleryMetadataStore: load error: %s", e)
+                # 破損ファイルをリネームしてバックアップしておく。ここでリネームせずに
+                # 空の self._data のまま次の save() が走ると、破損直前までの全メタデータ
+                # (タグ/メモ/グループ登録)が跡形もなく上書きされ、二度と復元できなくなる
+                # (実際に発生した不具合: _save_to_disk が非アトミック書き込みだったため、
+                # 大量画像フォルダのBGインデックス処理中の頻繁な保存とComfyUIの終了タイミング
+                # が重なるとファイルが不完全な状態のまま残ることがあった — _save_to_disk側は
+                # os.replace()によるアトミック書き込みに修正済みだが、過去に壊れたファイルや
+                # 他要因による破損に備えてここでも保護しておく)。
+                try:
+                    backup_path = self.file_path.with_name(self.file_path.name + ".corrupt")
+                    self.file_path.replace(backup_path)
+                    logger.warning("GalleryMetadataStore: corrupt file backed up to %s", backup_path)
+                except Exception as backup_err:
+                    logger.warning("GalleryMetadataStore: failed to back up corrupt file: %s", backup_err)

    def _save_to_disk(self):
-        try:
-            self.file_path.parent.mkdir(parents=True, exist_ok=True)
-            with open(self.file_path, "w", encoding="utf-8") as f:
-                json.dump(self._data, f, ensure_ascii=False, indent=2)
-            return True
-        except Exception as e:
-            logger.error("GalleryMetadataStore: save error: %s", e)
-            return False
+        # 呼び出し元（save/create_group等）が既にself._lockを保持している前提の内部メソッド。
+        # ここではself._lock配下でスナップショット(deepcopy)を取るだけに留め、実際のJSON
+        # シリアライズ+ファイルI/Oはロックの外、別途self._write_lockで直列化して行う。
+        # 理由: gallery_metadata.jsonは画像数が多い環境では1MBを超えることがあり、
+        # self._lockを保持したままjson.dump+ファイル書き込みまで行うと、その間
+        # 他スレッドのget()（検索リクエストなど）が丸ごとブロックされてしまう
+        # （実際に発生した不具合: バックグラウンドインデックス処理が10枚ごとに保存する際、
+        # 検索リクエストのget()呼び出しがロック待ちになり、50枚程度のフォルダに対する
+        # 検索でも数秒〜十数秒かかっていた）。deepcopy自体はメモリ内操作でファイルI/Oより
+        # 大幅に軽いため、ロック内に残しても実用上のブロック時間は無視できるレベルになる。
+        snapshot = copy.deepcopy(self._data)
+        return self._write_snapshot(snapshot)
+
+    def _write_snapshot(self, snapshot: dict) -> bool:
+        """self._lockの外から呼ばれる。一時ファイルに書き出してから置き換える
+        (os.replace相当のPath.replace)ことで書き込みをアトミックにする。素朴な
+        open(path, "w") での直接上書きだと、書き込み完了前に他プロセスが読むと
+        不完全なJSONを掴む(torn read)うえ、書き込み中にComfyUIプロセスが終了すると
+        ファイルが壊れたまま残る — 大量画像フォルダのBGインデックス処理で書き込み
+        頻度が高い環境ほど発生しやすく、次回起動時のロード失敗→空データでの全上書き
+        という形でユーザーの登録済みグループ/タグ/メモが消失する原因になっていた。
+        self._write_lockで直列化し、複数スレッドの書き込みが競合して古いスナップショット
+        が新しいものを上書きしないようにする。"""
+        with self._write_lock:
+            try:
+                self.file_path.parent.mkdir(parents=True, exist_ok=True)
+                tmp_path = self.file_path.with_name(self.file_path.name + ".tmp")
+                with open(tmp_path, "w", encoding="utf-8") as f:
+                    json.dump(snapshot, f, ensure_ascii=False, indent=2)
+                tmp_path.replace(self.file_path)
+                return True
+            except Exception as e:
+                logger.error("GalleryMetadataStore: save error: %s", e)
+                return False

    def _normalize_path(self, image_path: str) -> str:
        return str(Path(image_path)).replace("\\", "/")

    def get(self, image_path: str) -> dict:
        key = self._normalize_path(image_path)
-        return dict(self._data["images"].get(key, {}))
+        with self._lock:
+            return dict(self._data["images"].get(key, {}))

    def save(self, image_path: str, data: dict) -> bool:
        key = self._normalize_path(image_path)
-        existing = self._data["images"].get(key, {})
-        existing.update(data)
+        with self._lock:
+            existing = self._data["images"].get(key, {})
+            existing.update(data)
+            allowed = {"favorite", "tags", "memo", "groups", "workflow"}
+            existing = {k: v for k, v in existing.items() if k in allowed}
+            self._data["images"][key] = existing
+            return self._save_to_disk()
+
+    def save_batch(self, entries: dict[str, dict]) -> bool:
+        """複数画像のメタデータを1回のディスク書き込みでまとめて保存する。
+        バックグラウンドインデックス処理のように多数の画像を連続して保存する場合、
+        1件ずつsave()を呼ぶと画像の数だけJSONシリアライズ+ファイルI/Oが発生してしまう
+        （実際に発生した不具合: gallery_metadata.jsonが1MBを超える環境で10枚ごとに
+        個別save()していたため、検索リクエストが完了するまで数秒〜十数秒かかっていた）。"""
+        if not entries:
+            return True
        allowed = {"favorite", "tags", "memo", "groups", "workflow"}
-        existing = {k: v for k, v in existing.items() if k in allowed}
-        self._data["images"][key] = existing
-        return self._save_to_disk()
+        with self._lock:
+            for image_path, data in entries.items():
+                key = self._normalize_path(image_path)
+                existing = self._data["images"].get(key, {})
+                existing.update(data)
+                existing = {k: v for k, v in existing.items() if k in allowed}
+                self._data["images"][key] = existing
+            return self._save_to_disk()

    # ── グループ管理 ──────────────────────────────────────────────

    def list_groups(self) -> list[dict]:
-        return list(self._data.get("groups", []))
+        with self._lock:
+            return list(self._data.get("groups", []))

    def create_group(self, name: str) -> bool:
-        groups = self._data.get("groups", [])
-        if any(g["name"] == name for g in groups):
-            return False
-        groups.append({"name": name})
-        self._data["groups"] = groups
-        return self._save_to_disk()
+        with self._lock:
+            groups = self._data.get("groups", [])
+            if any(g["name"] == name for g in groups):
+                return False
+            groups.append({"name": name})
+            self._data["groups"] = groups
+            return self._save_to_disk()

    def rename_group(self, old_name: str, new_name: str) -> bool:
        """グループ名を変更し、全画像のgroupsフィールドも更新する"""
-        groups = self._data.get("groups", [])
-        if not any(g["name"] == old_name for g in groups):
-            return False
-        if any(g["name"] == new_name for g in groups):
-            return False  # 新名前が既に存在
-        # グループリスト更新
-        for g in groups:
-            if g["name"] == old_name:
-                g["name"] = new_name
-                break
-        # 全画像のgroupsフィールドを更新
-        for meta in self._data["images"].values():
-            img_groups = meta.get("groups", [])
-            if old_name in img_groups:
-                meta["groups"] = [new_name if g == old_name else g for g in img_groups]
-        return self._save_to_disk()
+        with self._lock:
+            groups = self._data.get("groups", [])
+            if not any(g["name"] == old_name for g in groups):
+                return False
+            if any(g["name"] == new_name for g in groups):
+                return False  # 新名前が既に存在
+            # グループリスト更新
+            for g in groups:
+                if g["name"] == old_name:
+                    g["name"] = new_name
+                    break
+            # 全画像のgroupsフィールドを更新
+            for meta in self._data["images"].values():
+                img_groups = meta.get("groups", [])
+                if old_name in img_groups:
+                    meta["groups"] = [new_name if g == old_name else g for g in img_groups]
+            return self._save_to_disk()

    def delete_group(self, name: str) -> bool:
-        groups = [g for g in self._data.get("groups", []) if g["name"] != name]
-        self._data["groups"] = groups
-        # 画像のgroupsからも削除
-        for meta in self._data["images"].values():
-            if name in meta.get("groups", []):
-                meta["groups"] = [g for g in meta["groups"] if g != name]
-        return self._save_to_disk()
+        with self._lock:
+            groups = [g for g in self._data.get("groups", []) if g["name"] != name]
+            self._data["groups"] = groups
+            # 画像のgroupsからも削除
+            for meta in self._data["images"].values():
+                if name in meta.get("groups", []):
+                    meta["groups"] = [g for g in meta["groups"] if g != name]
+            return self._save_to_disk()

    def list_images_in_group(self, group_name: str) -> list[str]:
-        result = []
-        for key, meta in self._data["images"].items():
-            if group_name in meta.get("groups", []):
-                result.append(key)
-        return result
+        with self._lock:
+            result = []
+            for key, meta in self._data["images"].items():
+                if group_name in meta.get("groups", []):
+                    result.append(key)
+            return result

    def remove_stale_paths_from_group(self, group_name: str, stale_paths: list) -> int:
        """存在しないパスをグループから一括削除する（1回の保存で完結）"""
-        stale_set = {self._normalize_path(p) for p in stale_paths}
-        count = 0
-        for key, meta in self._data["images"].items():
-            if key in stale_set and group_name in meta.get("groups", []):
-                meta["groups"] = [g for g in meta["groups"] if g != group_name]
-                count += 1
-        if count:
-            self._save_to_disk()
-        return count
+        with self._lock:
+            stale_set = {self._normalize_path(p) for p in stale_paths}
+            count = 0
+            for key, meta in self._data["images"].items():
+                if key in stale_set and group_name in meta.get("groups", []):
+                    meta["groups"] = [g for g in meta["groups"] if g != group_name]
+                    count += 1
+            if count:
+                self._save_to_disk()
+            return count

    def get_group_member_set(self, group_name: str) -> set:
        """グループメンバーのパスをsetで返す（高速フィルタ用）"""
-        return {
-            key for key, meta in self._data["images"].items()
-            if group_name in meta.get("groups", [])
-        }
+        with self._lock:
+            return {
+                key for key, meta in self._data["images"].items()
+                if group_name in meta.get("groups", [])
+            }

    def clear_group(self, group_name: str) -> bool:
        """グループ内の全画像を除外する（グループ自体は残す）"""
-        for meta in self._data["images"].values():
-            if group_name in meta.get("groups", []):
-                meta["groups"] = [g for g in meta["groups"] if g != group_name]
-        return self._save_to_disk()
+        with self._lock:
+            for meta in self._data["images"].values():
+                if group_name in meta.get("groups", []):
+                    meta["groups"] = [g for g in meta["groups"] if g != group_name]
+            return self._save_to_disk()

    def ensure_group(self, name: str) -> bool:
        """グループが存在しない場合のみ作成する"""
-        if any(g["name"] == name for g in self._data.get("groups", [])):
-            return True
-        return self.create_group(name)
+        with self._lock:
+            if any(g["name"] == name for g in self._data.get("groups", [])):
+                return True
+            return self.create_group(name)

    def delete(self, image_path: str) -> bool:
        """画像のメタデータエントリを削除する"""
        key = self._normalize_path(image_path)
-        if key in self._data["images"]:
-            del self._data["images"][key]
-            return self._save_to_disk()
-        return True
+        with self._lock:
+            if key in self._data["images"]:
+                del self._data["images"][key]
+                return self._save_to_disk()
+            return True

    def rename_path(self, old_path: str, new_path: str) -> bool:
        """画像のパスキーを変更する（ファイル移動後のメタデータ引継ぎ）"""
        old_key = self._normalize_path(old_path)
        new_key = self._normalize_path(new_path)
-        if old_key in self._data["images"]:
-            self._data["images"][new_key] = self._data["images"].pop(old_key)
-            return self._save_to_disk()
-        return True
+        with self._lock:
+            if old_key in self._data["images"]:
+                self._data["images"][new_key] = self._data["images"].pop(old_key)
+                return self._save_to_disk()
+            return True

-    def cleanup_stale_images(self, folder_path: str, existing_paths: set) -> int:
+    def cleanup_stale_images(self, folder_path: str, existing_paths: set, recursive: bool = True) -> int:
        """folder_path 配下の存在しないファイルのメタデータを削除する。
        existing_paths: そのフォルダの現在のファイルパス集合（_normalize_path 済み）
+        recursive: False の場合、folder_path 直下のファイルのみを対象にする。
+            呼び出し元(list_images)が非recursiveスキャン(フォルダ直下のみ列挙)の
+            結果を existing_paths として渡してくる場合、サブフォルダ内のファイルは
+            existing_paths に含まれない。それにもかかわらず対象範囲を「folder_path配下
+            全階層」のままにすると、サブフォルダ内画像のメタデータ(tags/memo等)を
+            "存在しない"と誤判定して全削除してしまう(実際に発生した不具合: サブフォルダ
+            に動画を保存する運用で、ルートフォルダを非recursiveで開くたびに
+            サブフォルダ内の全メタデータが失われていた)。
        """
        folder_key = self._normalize_path(folder_path)
        if not folder_key.endswith("/"):
            folder_key += "/"
-        stale = [
-            key for key in self._data["images"]
-            if key.startswith(folder_key) and key not in existing_paths
-        ]
-        if not stale:
-            return 0
-        for key in stale:
-            del self._data["images"][key]
-        self._save_to_disk()
-        logger.info("Cleaned up %d stale metadata entries from %s", len(stale), folder_path)
-        return len(stale)
+
+        def _in_scope(key: str) -> bool:
+            if not key.startswith(folder_key):
+                return False
+            if recursive:
+                return True
+            return "/" not in key[len(folder_key):]
+
+        with self._lock:
+            stale = [
+                key for key in self._data["images"]
+                if _in_scope(key) and key not in existing_paths
+            ]
+            if not stale:
+                return 0
+            for key in stale:
+                del self._data["images"][key]
+            self._save_to_disk()
+            logger.info("Cleaned up %d stale metadata entries from %s", len(stale), folder_path)
+            return len(stale)
@@ -0,0 +1,138 @@
+"""Lab tab plan file management service (JSON plan + optional PNG index thumbnail)."""
+
+import base64
+import json
+import logging
+from datetime import datetime, timezone
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+
+class LabPlanService:
+    def __init__(self, plan_dir: Path):
+        self.plan_dir = plan_dir
+        self.plan_dir.mkdir(parents=True, exist_ok=True)
+
+    # ------------------------------------------------------------------
+    # Path safety
+    # ------------------------------------------------------------------
+
+    def _safe_path(self, filename: str, ext: str = ".json") -> Path | None:
+        if not filename or not filename.strip():
+            return None
+        name = filename.strip()
+        if not name.endswith(ext):
+            name = name + ext
+        if "/" in name or "\\" in name or name in (".", "..") or "\x00" in name:
+            return None
+        resolved = (self.plan_dir / name).resolve()
+        plan_dir_resolved = self.plan_dir.resolve()
+        if resolved != plan_dir_resolved and not str(resolved).startswith(str(plan_dir_resolved) + "\\") and not str(resolved).startswith(str(plan_dir_resolved) + "/"):
+            return None
+        return resolved
+
+    def _now_iso(self) -> str:
+        return datetime.now(timezone.utc).isoformat().replace("+00:00", "Z")
+
+    # ------------------------------------------------------------------
+    # CRUD
+    # ------------------------------------------------------------------
+
+    def list_plans(self) -> list[dict]:
+        if not self.plan_dir.is_dir():
+            return []
+        result = []
+        for path in sorted(self.plan_dir.glob("*.json")):
+            try:
+                with open(path, "r", encoding="utf-8") as f:
+                    data = json.load(f)
+            except Exception as e:
+                logger.warning("Skipping unreadable lab plan %s: %s", path.name, e)
+                continue
+
+            stem = path.stem
+            thumbnail = None
+            thumb_path = self.plan_dir / f"{stem}.png"
+            if thumb_path.is_file():
+                thumbnail = f"/wfm_data/lab_plan/{stem}.png"
+
+            result.append({
+                "filename": path.name,
+                "name": data.get("name", stem),
+                "note": data.get("note", ""),
+                "batch_count": data.get("batch_count", 1),
+                "updated_at": data.get("updated_at", ""),
+                "thumbnail": thumbnail,
+            })
+        result.sort(key=lambda p: p.get("updated_at", ""), reverse=True)
+        return result
+
+    def get_plan(self, filename: str) -> dict:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if not path.is_file():
+            raise FileNotFoundError(f"Plan not found: {filename}")
+        with open(path, "r", encoding="utf-8") as f:
+            return json.load(f)
+
+    def save_plan(self, filename: str, data: dict, index_image_base64: str | None = None) -> dict:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+
+        data = dict(data)
+        data["updated_at"] = self._now_iso()
+
+        path.parent.mkdir(parents=True, exist_ok=True)
+        with open(path, "w", encoding="utf-8") as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+
+        if index_image_base64:
+            self.save_index_image(filename, index_image_base64)
+
+        return {"filename": path.name, "updated_at": data["updated_at"]}
+
+    def save_index_image(self, filename: str, image_base64: str) -> None:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        stem = path.stem
+        thumb_path = self.plan_dir / f"{stem}.png"
+
+        # Accept both raw base64 and data: URL forms
+        b64 = image_base64
+        if "," in b64 and b64.strip().lower().startswith("data:"):
+            b64 = b64.split(",", 1)[1]
+
+        image_bytes = base64.b64decode(b64)
+        with open(thumb_path, "wb") as f:
+            f.write(image_bytes)
+
+    def save_index_image_to_output(self, image_base64: str, filename_prefix: str = "Lab_index") -> dict:
+        """Saves the contact-sheet index image into ComfyUI's own output folder,
+        alongside the images generated during the run (unlike save_index_image,
+        which saves it next to the plan file in plan_dir)."""
+        b64 = image_base64
+        if "," in b64 and b64.strip().lower().startswith("data:"):
+            b64 = b64.split(",", 1)[1]
+        image_bytes = base64.b64decode(b64)
+
+        import folder_paths  # type: ignore
+        output_dir = folder_paths.get_output_directory()
+        full_output_folder, filename, counter, subfolder, _ = folder_paths.get_save_image_path(filename_prefix, output_dir)
+        save_name = f"{filename}_{counter:05}_.png"
+        save_path = Path(full_output_folder) / save_name
+        save_path.write_bytes(image_bytes)
+        return {"filename": save_name, "subfolder": subfolder}
+
+    def delete_plan(self, filename: str) -> None:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if path.is_file():
+            path.unlink()
+        thumb_path = self.plan_dir / f"{path.stem}.png"
+        if thumb_path.is_file():
+            thumb_path.unlink()
@@ -0,0 +1,48 @@
+"""ComfyUI-Lora-Manager 連携: LMが保持済みのsha256を再利用してハッシュ計算を省く。
+
+LMの `/api/lm/{prefix}/list` は sha256 / file_path / file_size を返す（CivitAI詳細は薄いので
+情報そのものは使わず、重いハッシュ計算の省略にのみ利用する）。LM未導入・失敗時は空を返す。
+"""
+
+import json
+import logging
+import os
+from urllib.request import urlopen
+
+logger = logging.getLogger(__name__)
+
+# 当アプリのモデルタイプ → LMのルート接頭辞
+_LM_PREFIX = {"checkpoint": "checkpoints", "lora": "loras", "embedding": "embeddings"}
+
+_PAGE_SIZE = 100  # LM側の上限
+_MAX_PAGES = 200
+_TIMEOUT = 5
+
+
+def _norm(path):
+    return os.path.normcase(os.path.abspath(path))
+
+
+def fetch_lm_hashes(origin, model_type):
+    """Returns { normalized_file_path: {"sha256", "size"} }。LMが使えなければ {}。"""
+    prefix = _LM_PREFIX.get(model_type)
+    if not prefix:
+        return {}
+    out = {}
+    try:
+        page = 1
+        while page <= _MAX_PAGES:
+            url = f"{origin}/api/lm/{prefix}/list?page={page}&page_size={_PAGE_SIZE}"
+            with urlopen(url, timeout=_TIMEOUT) as resp:
+                data = json.loads(resp.read().decode("utf-8"))
+            for it in data.get("items", []):
+                sha, fp = it.get("sha256"), it.get("file_path")
+                if sha and fp and len(str(sha)) == 64:
+                    out[_norm(fp)] = {"sha256": str(sha).lower(), "size": it.get("file_size")}
+            if page >= int(data.get("total_pages", 1) or 1):
+                break
+            page += 1
+    except Exception as e:
+        logger.info("Lora Manager hashes unavailable (%s): %s", prefix, e)
+        return {}
+    return out
@@ -2,6 +2,7 @@

 import json
 import logging
+import os
 import shutil
 import time
 from datetime import datetime, timezone
@@ -41,32 +42,126 @@ MODEL_TYPE_FOLDER_KEYS = {
 }


+def _iter_files(root):
+    """root 配下の全ファイルを返す。フォルダのシンボリックリンク／ジャンクションも辿る。
+
+    リンクが祖先フォルダを指していて循環する場合のみ、その枝には入らない
+    （rglob だとパス長上限まで再帰し続ける恐れがある）。
+    """
+    def walk(d, ancestors):
+        try:
+            entries = list(os.scandir(d))
+        except OSError:
+            return
+        for e in entries:
+            try:
+                if e.is_dir():  # リンクは辿る
+                    real = os.path.realpath(e.path)
+                    if real in ancestors:
+                        logger.warning("Skipping looping folder link: %s -> %s", e.path, real)
+                        continue
+                    yield from walk(e.path, ancestors | {real})
+                elif e.is_file():
+                    yield Path(e.path)
+            except OSError:
+                continue
+
+    root = Path(root)
+    yield from walk(root, frozenset([os.path.realpath(root)]))
+
+
+def _is_within(path, root):
+    """path が root 配下か。`..` は正規化するが、リンクは解決しない（リンク先フォルダへの移動を許可）。"""
+    try:
+        a, r = os.path.abspath(path), os.path.abspath(root)
+        return os.path.commonpath([os.path.normcase(a), os.path.normcase(r)]) == os.path.normcase(r)
+    except ValueError:  # 別ドライブなど
+        return False
+
+
+# 追加モデルルート配下で探すサブフォルダ名（大小無視）。ComfyUI標準名 + Stability Matrix名
+_EXTRA_ROOT_SUBDIRS = {
+    "checkpoint": ["checkpoints", "StableDiffusion"],
+    "lora": ["loras", "Lora"],
+    "vae": ["vae", "VAE"],
+    "controlnet": ["controlnet", "ControlNet"],
+    "unet": ["diffusion_models", "DiffusionModels", "unet"],
+    "textencoder": ["text_encoders", "TextEncoders", "clip"],
+    "hypernetwork": ["hypernetworks", "HyperNetworks"],
+    "embedding": ["embeddings", "Embeddings"],
+}
+
+
+def parse_extra_model_roots(value):
+    """設定値（`;` または改行区切りの文字列）を重複なしのパス文字列リストにする。"""
+    if isinstance(value, (list, tuple)):
+        value = ";".join(str(v) for v in value)
+    parts = str(value or "").replace("\n", ";").split(";")
+    seen, out = set(), []
+    for p in parts:
+        p = p.strip().strip('"')
+        if p and p not in seen:
+            seen.add(p)
+            out.append(p)
+    return out
+
+
+def _get_extra_model_dirs(model_type):
+    """設定 `models_dir` で追加指定されたルート配下の、該当タイプのフォルダを返す。"""
+    names = _EXTRA_ROOT_SUBDIRS.get(model_type)
+    if not names:
+        return []
+    try:
+        from .settings_service import SettingsService
+        roots = parse_extra_model_roots(SettingsService().load().get("models_dir", ""))
+    except Exception:
+        return []
+    wanted = {n.lower() for n in names}
+    found = []
+    for root in roots:
+        try:
+            for e in os.scandir(root):
+                if e.is_dir() and e.name.lower() in wanted:
+                    found.append(Path(e.path))
+        except OSError:
+            logger.warning("Configured models_dir not accessible: %s", root)
+    return found
+
+
 def _get_model_dirs(model_type):
    """Get all model directories for a type using ComfyUI's folder_paths.

    Returns a list of Path objects for all configured model directories
-    (includes extra_model_paths.yaml settings).
+    (includes extra_model_paths.yaml settings and the `models_dir` setting).
    Falls back to plugin-relative path if folder_paths is unavailable.
    """
    folder_key = MODEL_TYPE_FOLDER_KEYS.get(model_type)
    if not folder_key:
        return []

+    result = []
    try:
        import folder_paths  # type: ignore  # ComfyUI module
        paths = folder_paths.get_folder_paths(folder_key)
        result = [Path(p) for p in paths if Path(p).is_dir()]
-        if result:
-            return result
    except Exception as e:
        logger.debug("folder_paths unavailable (%s), using fallback", e)

-    # Fallback: custom_nodes/../../models/{folder_key}
-    plugin_dir = Path(__file__).resolve().parent.parent.parent
-    models_dir = plugin_dir.parent.parent / "models" / folder_key
-    if models_dir.is_dir():
-        return [models_dir]
-    return []
+    if not result:
+        # Fallback: custom_nodes/../../models/{folder_key}
+        plugin_dir = Path(__file__).resolve().parent.parent.parent
+        models_dir = plugin_dir.parent.parent / "models" / folder_key
+        if models_dir.is_dir():
+            result = [models_dir]
+
+    # 設定で追加されたルート（既存と同一実体は除外）
+    known = {os.path.normcase(os.path.realpath(p)) for p in result}
+    for d in _get_extra_model_dirs(model_type):
+        key = os.path.normcase(os.path.realpath(d))
+        if key not in known:
+            known.add(key)
+            result.append(d)
+    return result


 class ModelsService:
@@ -111,6 +206,12 @@ class ModelsService:
            entry["sha256"] = updates["sha256"]
        if "badges" in updates:
            entry["badges"] = updates["badges"]
+        if "civitaiNotFound" in updates:
+            # CivitAIに存在しなかった記録（一括取得のスキップ用）。None/False で解除
+            if updates["civitaiNotFound"]:
+                entry["civitaiNotFound"] = self._now_iso()
+            else:
+                entry.pop("civitaiNotFound", None)
        entry["updatedAt"] = self._now_iso()
        data[model_name] = entry
        self._save_metadata(data)
@@ -131,9 +232,7 @@ class ModelsService:
        for d in dirs:
            if not d.is_dir():
                continue
-            for f in d.rglob("*"):
-                if not f.is_file():
-                    continue
+            for f in _iter_files(d):
                try:
                    rel = str(f.relative_to(d)).replace("\\", "/")
                    if rel.endswith(_DISABLED_SUFFIX):
@@ -145,17 +244,16 @@ class ModelsService:
        self._scan_cache[model_type] = (now, names)
        return names

-    def list_model_files(self, model_type: str) -> list:
+    def list_model_files(self, model_type: str, extra_only: bool = False) -> list:
        """モデルタイプのモデルファイル名をソートして返す（拡張子付き、/区切り）。
-        プレビュー画像やサイドカーファイルを除外し、モデル拡張子のみを返す。"""
-        dirs = _get_model_dirs(model_type)
+        プレビュー画像やサイドカーファイルを除外し、モデル拡張子のみを返す。
+        extra_only=True なら設定 models_dir で追加されたフォルダのみ対象。"""
+        dirs = _get_extra_model_dirs(model_type) if extra_only else _get_model_dirs(model_type)
        seen = set()
        for d in dirs:
            if not d.is_dir():
                continue
-            for f in d.rglob("*"):
-                if not f.is_file():
-                    continue
+            for f in _iter_files(d):
                name = f.name
                if name.endswith(_DISABLED_SUFFIX):
                    name = name[: -len(_DISABLED_SUFFIX)]
@@ -280,8 +378,8 @@ class ModelsService:
        for d in dirs:
            if not d.is_dir():
                continue
-            for f in d.rglob("*"):
-                if f.is_file() and f.name.endswith(_DISABLED_SUFFIX):
+            for f in _iter_files(d):
+                if f.name.endswith(_DISABLED_SUFFIX):
                    try:
                        rel = str(f.relative_to(d))
                        if rel.endswith(_DISABLED_SUFFIX):
@@ -291,6 +389,32 @@ class ModelsService:
                        pass
        return disabled

+    def list_preview_keys(self, model_type):
+        """プレビュー画像を持つモデルのキー（`サブフォルダ/ファイル名(拡張子なし)`、小文字・/区切り）を返す。
+
+        一覧表示で「プレビューが無いモデルには画像リクエストを出さない」ために、フォルダを1回走査して求める
+        （画像ごとの404リクエストと接続の開閉を避ける）。判定は find_preview_image と同じ拡張子・サイズ条件。
+        """
+        keys = set()
+        for d in _get_model_dirs(model_type):
+            if not d.is_dir():
+                continue
+            for f in _iter_files(d):
+                lname = f.name.lower()
+                exts = [e for e in _PREVIEW_EXTENSIONS if lname.endswith(e)]
+                if not exts:
+                    continue
+                try:
+                    if f.stat().st_size < 100:
+                        continue
+                    parent = str(f.parent.relative_to(d)).replace("\\", "/")
+                except (OSError, ValueError):
+                    continue
+                prefix = "" if parent == "." else parent.lower() + "/"
+                for e in exts:
+                    keys.add(prefix + lname[: -len(e)])
+        return sorted(keys)
+
    def find_preview_image(self, model_type, model_name):
        """Find preview image for a model file.

@@ -311,7 +435,8 @@ class ModelsService:
        for type_dir in dirs:
            # model_name can include subdirectory (e.g., "subdir/model.safetensors")
            model_path = type_dir / model_name
-            if not model_path.is_file():
+            # 無効化されたモデル（<name>.disabled）でも、隣のプレビュー画像は探す
+            if not model_path.is_file() and not (type_dir / (model_name + _DISABLED_SUFFIX)).is_file():
                continue

            stem = model_path.stem
@@ -436,11 +561,10 @@ class ModelsService:
                    errors.append({"model": model_name, "error": "Cannot determine root directory"})
                    continue

-                # Destination directory — verify it stays within root_dir after resolution
+                # Destination directory — verify it stays within root_dir (`..`/絶対パスは拒否。
+                # フォルダのシンボリックリンク／ジャンクション配下への移動は許可する)
                dest_dir = root_dir / dest_subdir if dest_subdir else root_dir
-                try:
-                    dest_dir.resolve().relative_to(root_dir.resolve())
-                except ValueError:
+                if not _is_within(dest_dir, root_dir):
                    errors.append({"model": model_name, "error": "Destination is outside model root"})
                    continue
                dest_dir.mkdir(parents=True, exist_ok=True)
@@ -44,8 +44,7 @@ def extract_png_workflow(buf):
                except Exception:
                    pass

+        # IENDで止めない: IENDの後ろに追記されたworkflowチャンクも読む
        pos += length + 12
-        if chunk_type == "IEND":
-            break

    return None
@@ -0,0 +1,239 @@
+"""
+EmbeddingGemma 2 ローカル実行 (onnx-community/embeddinggemma-2-ONNX)
+
+onnxruntime + tokenizers + huggingface_hub だけで動かす(transformers の対応を待たない)。
+前処理は Transformers.js の Gemma4ImageProcessor / EmbeddingGemma2Processor の移植:
+  画像 -> アスペクト比維持でリサイズ(48px倍数, 最大2520パッチ) -> 16pxパッチ化 -> vision_encoder
+       -> image_features を text model の <|image|> トークン位置に差し込み -> sentence_embedding(768)
+モデルは初回のみ固定リポジトリからダウンロードする(約300MB, q4)。
+"""
+import logging
+import math
+import os
+import threading
+from pathlib import Path
+
+import numpy as np
+
+logger = logging.getLogger(__name__)
+
+REPO_ID = "onnx-community/embeddinggemma-2-ONNX"
+LOCAL_MODEL = "embeddinggemma-2"
+LOCAL_DIMS = (128, 256, 512, 768)   # MRL対応次元
+DEFAULT_LOCAL_DIM = 768
+# 量子化精度 -> ファイル名サフィックス
+DTYPES = {"q4": "_q4", "q8": "_quantized", "fp16": "_fp16", "fp32": ""}
+DEFAULT_DTYPE = "q4"
+
+_PATCH = 16
+_POOL = 3
+SOFT_TOKENS = (70, 140, 280)            # 画像1枚あたりのソフトトークン数(多いほど高精度・低速)
+DEFAULT_SOFT = 280
+_MAX_TOKENS = 1024        # テキスト入力のトークン数上限(画像用プロンプトは約290トークン)
+_MAX_IMAGE_SIDE = 2048    # 画像の長辺上限(超える場合は縮小してから処理)
+_IMAGE_TOKEN = "<|image|>"
+_BOI = "<|image>"
+_EOI = "<image|>"
+
+DEVICES = ("auto", "cpu", "cuda", "dml")
+_PROVIDER_BY_DEVICE = {"cuda": "CUDAExecutionProvider", "dml": "DmlExecutionProvider"}
+
+_lock = threading.Lock()
+_runtime = None   # ((dtype, device, threads), _Runtime)
+
+
+_opts = {"device": "auto", "threads": 0}   # 実行デバイス/CPUスレッド数(configureで更新)
+
+
+def configure(device: str = "auto", threads: int = 0) -> None:
+    """ローカル推論の実行設定。次回のensure_runtimeから反映(device/threads変更時はセッション再作成)。"""
+    _opts["device"] = device if device in DEVICES else "auto"
+    _opts["threads"] = max(0, min(int(threads), (os.cpu_count() or 1) * 2))
+
+
+def current_config() -> dict:
+    return dict(_opts)
+
+
+def release() -> None:
+    """セッションを破棄してVRAM/RAMを解放する(インデックス作成後など)。次回利用時に再ロードされる。"""
+    global _runtime
+    with _lock:
+        _runtime = None
+
+
+def active_provider() -> str:
+    """直近にロードしたセッションの実行プロバイダ(未ロードなら空)"""
+    rt = _runtime[1] if _runtime else None
+    return rt.providers[0].replace("ExecutionProvider", "") if rt else ""
+
+
+def available_devices() -> dict:
+    """onnxruntime が使える実行デバイス。GPU用ビルド(onnxruntime-gpu / -directml)が無ければcpuのみ。"""
+    try:
+        import onnxruntime as ort
+        prov = ort.get_available_providers()
+        version = ort.__version__
+    except Exception:
+        return {"cpu": True, "cuda": False, "dml": False, "ort_version": ""}
+    return {"cpu": True, "cuda": "CUDAExecutionProvider" in prov, "dml": "DmlExecutionProvider" in prov,
+            "ort_version": version, "cpu_count": os.cpu_count() or 1}
+
+
+def default_threads() -> int:
+    """既定のCPUスレッド数: 画像生成と同居しても邪魔になりにくいよう、コアの半分(最低1)"""
+    return max(1, (os.cpu_count() or 2) // 2)
+
+
+def _target_size(h: int, w: int, max_patches: int) -> tuple[int, int]:
+    """Gemma4ImageProcessor の get_aspect_ratio_preserving_size"""
+    factor = math.sqrt(max_patches * _PATCH ** 2 / (h * w))
+    side = _POOL * _PATCH
+    th = int(math.floor(factor * h / side)) * side
+    tw = int(math.floor(factor * w / side)) * side
+    max_side = (max_patches // _POOL ** 2) * side
+    if th == 0 and tw == 0:
+        raise ValueError("image too small")
+    if th == 0:
+        th, tw = side, min((w // h) * side, max_side)
+    elif tw == 0:
+        tw, th = side, min((h // w) * side, max_side)
+    return th, tw
+
+
+class _Runtime:
+    def __init__(self, model_dir: Path, dtype: str, device: str = "auto", threads: int = 0):
+        import onnxruntime as ort
+        from tokenizers import Tokenizer
+
+        sfx = DTYPES[dtype]
+        so = ort.SessionOptions()
+        so.log_severity_level = 3   # CUDA使用時のMemcpy警告などを抑止
+        if threads > 0:
+            so.intra_op_num_threads = threads
+            so.inter_op_num_threads = 1
+        avail = ort.get_available_providers()
+        if device in _PROVIDER_BY_DEVICE:
+            providers = [_PROVIDER_BY_DEVICE[device]] if _PROVIDER_BY_DEVICE[device] in avail else []
+        elif device == "cpu":
+            providers = []
+        else:   # auto: 使えるGPUを優先
+            providers = [p for p in ("CUDAExecutionProvider", "DmlExecutionProvider") if p in avail]
+        if "DmlExecutionProvider" in providers:
+            # DirectMLは並列実行/メモリパターン最適化に非対応
+            so.enable_mem_pattern = False
+            so.execution_mode = ort.ExecutionMode.ORT_SEQUENTIAL
+        providers.append("CPUExecutionProvider")
+        self.providers = providers
+
+        def make(name):
+            path = str(model_dir / "onnx" / f"{name}{sfx}.onnx")
+            try:
+                return ort.InferenceSession(path, so, providers=providers)
+            except Exception as e:
+                if providers == ["CPUExecutionProvider"]:
+                    raise
+                logger.warning("EmbeddingGemma2: %s failed on %s (%s); falling back to CPU", name, providers[0], e)
+                self.providers = ["CPUExecutionProvider"]
+                return ort.InferenceSession(path, so, providers=["CPUExecutionProvider"])
+
+        self.text = make("model")
+        self.vision = make("vision_encoder")
+        self.tok = Tokenizer.from_file(str(model_dir / "tokenizer.json"))
+        self.tok.no_truncation()
+        self.tok.no_padding()
+
+    def _run_text(self, text: str, image_features: np.ndarray | None) -> np.ndarray:
+        ids = np.asarray([self.tok.encode(text).ids[:_MAX_TOKENS]], dtype=np.int64)
+        feeds = {
+            "input_ids": ids,
+            "attention_mask": np.ones_like(ids),
+            "image_features": image_features if image_features is not None else np.zeros((0, 512), np.float32),
+            "video_features": np.zeros((0, 512), np.float32),
+            "audio_features": np.zeros((0, 512), np.float32),
+        }
+        return self.text.run(["sentence_embedding"], feeds)[0][0]
+
+    def embed_text(self, text: str, prefix: str) -> np.ndarray:
+        return self._run_text(f"{prefix}{text.strip()}", None)
+
+    def embed_image(self, image, soft_tokens: int = DEFAULT_SOFT) -> np.ndarray:
+        from PIL import Image
+        im = image.convert("RGB")
+        if im.width < 1 or im.height < 1:
+            raise ValueError("empty image")
+        if max(im.size) > _MAX_IMAGE_SIDE:   # 巨大画像でメモリを使い切らないよう先に縮小
+            im.thumbnail((_MAX_IMAGE_SIDE, _MAX_IMAGE_SIDE), Image.LANCZOS)
+        max_patches = soft_tokens * _POOL ** 2
+        th, tw = _target_size(im.height, im.width, max_patches)
+        if (th, tw) != (im.height, im.width):
+            im = im.resize((tw, th), Image.BICUBIC)
+        arr = np.asarray(im, dtype=np.float32) * (1.0 / 255.0)          # H,W,3
+        ph, pw = th // _PATCH, tw // _PATCH
+        n = ph * pw
+        # (pH, dy, pW, dx, C) -> (pH, pW, dy, dx, C) -> (n, 768)
+        patches = arr.reshape(ph, _PATCH, pw, _PATCH, 3).transpose(0, 2, 1, 3, 4).reshape(n, _PATCH * _PATCH * 3)
+        # パディング無し(n個ちょうど)で渡す: 計算量が減り、パディングは出力に影響しない
+        pixel = patches[None].astype(np.float32)
+        pos = np.zeros((1, n, 2), dtype=np.int64)
+        rows, cols = np.divmod(np.arange(n), pw)
+        pos[0, :, 0], pos[0, :, 1] = cols, rows
+        feats = self.vision.run(["image_features"], {"pixel_values": pixel, "pixel_position_ids": pos})[0]
+        text = f"{_BOI}{_IMAGE_TOKEN * (n // _POOL ** 2)}{_EOI}"
+        return self._run_text(text, feats.astype(np.float32))
+
+
+def model_dir(data_dir: Path) -> Path:
+    return data_dir / "models" / LOCAL_MODEL
+
+
+def is_downloaded(data_dir: Path, dtype: str = DEFAULT_DTYPE) -> bool:
+    d, sfx = model_dir(data_dir), DTYPES.get(dtype, "_q4")
+    need = [d / "tokenizer.json"] + [d / "onnx" / f"{n}{sfx}.onnx{e}" for n in ("model", "vision_encoder") for e in ("", "_data")]
+    return all(p.exists() for p in need)
+
+
+def ensure_runtime(data_dir: Path, dtype: str = DEFAULT_DTYPE, progress=None,
+                   device: str | None = None, threads: int | None = None) -> _Runtime:
+    """モデルをダウンロード(未取得時)してセッションを返す。dtype/device/threads変更時は作り直す。"""
+    global _runtime
+    if dtype not in DTYPES:
+        dtype = DEFAULT_DTYPE
+    device = _opts["device"] if device is None else device
+    threads = _opts["threads"] if threads is None else threads
+    if device not in DEVICES:
+        device = "auto"
+    key = (dtype, device, int(threads))
+    with _lock:
+        if _runtime and _runtime[0] == key:
+            return _runtime[1]
+        d, sfx = model_dir(data_dir), DTYPES[dtype]
+        if not is_downloaded(data_dir, dtype):
+            if progress:
+                progress("downloading")
+            from huggingface_hub import hf_hub_download
+            files = ["tokenizer.json"] + [f"onnx/{n}{sfx}.onnx{e}" for n in ("model", "vision_encoder") for e in ("", "_data")]
+            for f in files:
+                hf_hub_download(REPO_ID, f, local_dir=str(d))
+        if progress:
+            progress("loading")
+        _runtime = (key, _Runtime(d, dtype, device, int(threads)))
+        return _runtime[1]
+
+
+def _finish(vec: np.ndarray, dim: int) -> np.ndarray:
+    v = np.asarray(vec, dtype=np.float32)
+    if dim < v.shape[0]:
+        v = v[:dim]
+    n = float(np.linalg.norm(v))
+    return v / n if n > 0 else v
+
+
+def embed_text(data_dir: Path, text: str, dim: int, dtype: str = DEFAULT_DTYPE) -> np.ndarray:
+    rt = ensure_runtime(data_dir, dtype)
+    return _finish(rt.embed_text(text[:8000], "task: search result | query: "), dim)
+
+
+def embed_image(data_dir: Path, image, dim: int, soft: int = DEFAULT_SOFT, dtype: str = DEFAULT_DTYPE) -> np.ndarray:
+    rt = ensure_runtime(data_dir, dtype)
+    return _finish(rt.embed_image(image, soft if soft in SOFT_TOKENS else DEFAULT_SOFT), dim)
@@ -0,0 +1,513 @@
+"""
+Semantic Service - Gallery用セマンティック検索（Gemini Embedding 2）
+
+画像(動画・PSDはサムネイル)をGemini Embedding APIでベクトル化してローカルに保存し、
+テキストクエリ/類似画像でコサイン類似度検索する。インデックス構築後の検索は
+(テキストクエリの埋め込み1回を除き)ローカル処理でAPI費用はかからない。
+
+APIキーは環境変数 GEMINI_API_KEY (または GOOGLE_API_KEY) から読む(.env経由)。
+settings.json やフロントエンドには出さない。接続先は固定ホストのみ(SSRF対策)。
+"""
+import io
+import json
+import logging
+import os
+import threading
+import time
+import urllib.error
+import urllib.request
+from concurrent.futures import ThreadPoolExecutor
+from pathlib import Path
+
+import numpy as np
+
+from . import semantic_local as local
+
+logger = logging.getLogger(__name__)
+
+API_BASE = "https://generativelanguage.googleapis.com/v1beta"
+MODEL = "gemini-embedding-2"           # Gemini API (クラウド)
+LOCAL_MODEL = local.LOCAL_MODEL        # EmbeddingGemma 2 (ローカルONNX)
+DEFAULT_DIM = 1536
+VALID_DIMS = (768, 1536, 3072)
+# バックエンド(モデル名) -> 選択可能な出力次元
+DIMS_BY_MODEL = {MODEL: VALID_DIMS, LOCAL_MODEL: local.LOCAL_DIMS}
+DEFAULT_DIM_BY_MODEL = {MODEL: DEFAULT_DIM, LOCAL_MODEL: local.DEFAULT_LOCAL_DIM}
+IMAGE_MAX_SIZE = 768          # 送信前の長辺リサイズ(px)
+_MAX_QUERY_CHARS = 2000      # 検索文の最大長
+_WORKERS = 4                  # 並列API呼び出し数
+_CHECKPOINT_EVERY = 100       # この件数ごとにディスクへ保存
+_RETRIES = 4
+
+# PILで直接開ける(静止画/GIFは先頭フレーム)
+_PIL_EXTS = {".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp"}
+# GalleryService.serve_thumbnail 経由でJPEG化する(動画先頭フレーム/PSD合成)
+_THUMB_EXTS = {".mp4", ".webm", ".psd"}
+INDEXABLE_EXTS = _PIL_EXTS | _THUMB_EXTS
+
+
+class SemanticError(Exception):
+    """ユーザーに見せられるエラー(code はフロントのi18n用)"""
+
+    def __init__(self, code: str, message: str = ""):
+        super().__init__(message or code)
+        self.code = code
+
+
+def get_api_key() -> str:
+    return (os.environ.get("GEMINI_API_KEY", "") or os.environ.get("GOOGLE_API_KEY", "")).strip()
+
+
+def _normalize(v: np.ndarray) -> np.ndarray:
+    n = float(np.linalg.norm(v))
+    return v / n if n > 0 else v
+
+
+def _call_embed(content: dict, task_type: str, dim: int) -> np.ndarray:
+    key = get_api_key()
+    if not key:
+        raise SemanticError("no_api_key", "GEMINI_API_KEY is not set")
+    body = {"model": f"models/{MODEL}", "content": content, "taskType": task_type}
+    if dim != 768:
+        body["outputDimensionality"] = dim
+    data = json.dumps(body).encode("utf-8")
+    url = f"{API_BASE}/models/{MODEL}:embedContent"
+    last_err = ""
+    for attempt in range(_RETRIES + 1):
+        req = urllib.request.Request(
+            url, data=data, method="POST",
+            headers={"Content-Type": "application/json", "x-goog-api-key": key},
+        )
+        try:
+            with urllib.request.urlopen(req, timeout=60) as res:
+                payload = json.loads(res.read().decode("utf-8"))
+            values = (payload.get("embedding") or {}).get("values")
+            if not values:
+                raise SemanticError("bad_response", "no embedding.values in response")
+            return _normalize(np.asarray(values, dtype=np.float32))
+        except urllib.error.HTTPError as e:
+            try:
+                msg = json.loads(e.read().decode("utf-8")).get("error", {}).get("message", "")
+            except Exception:
+                msg = ""
+            last_err = f"HTTP {e.code}: {msg or e.reason}"
+            if e.code in (400, 403) and ("API key" in msg or "API_KEY" in msg or e.code == 403):
+                raise SemanticError("api_key_invalid", last_err)
+            if e.code in (429, 500, 502, 503, 504) and attempt < _RETRIES:
+                time.sleep(1.5 * (2 ** attempt))
+                continue
+            raise SemanticError("api_error", last_err)
+        except (urllib.error.URLError, TimeoutError, ConnectionError) as e:
+            last_err = str(getattr(e, "reason", e))
+            if attempt < _RETRIES:
+                time.sleep(1.5 * (attempt + 1))
+                continue
+            raise SemanticError("network_error", last_err)
+    raise SemanticError("api_error", last_err)
+
+
+def embed_text(text: str, dim: int) -> np.ndarray:
+    return _call_embed({"parts": [{"text": text[:8000]}]}, "RETRIEVAL_QUERY", dim)
+
+
+def embed_image_bytes(data: bytes, mime: str, dim: int) -> np.ndarray:
+    import base64
+    b64 = base64.b64encode(data).decode("ascii")
+    return _call_embed({"parts": [{"inlineData": {"mimeType": mime, "data": b64}}]}, "RETRIEVAL_DOCUMENT", dim)
+
+
+class SemanticService:
+    def __init__(self, data_dir: Path, gallery_service):
+        self.data_dir = data_dir
+        self.gallery = gallery_service
+        self._file = data_dir / "semantic_index.npz"
+        self._lock = threading.RLock()
+        self._vecs: dict[str, np.ndarray] = {}     # path -> 正規化済みベクトル
+        self._stamp: dict[str, tuple[int, float]] = {}  # path -> (size, mtime)
+        self._dim = 0                               # インデックスの次元(0=空)
+        self._model = MODEL                         # インデックスを作ったモデル
+        self._soft = local.DEFAULT_SOFT             # ローカルモデルの画像ソフトトークン数(インデックスと一致させる)
+        self._settings_file = data_dir / "semantic_settings.json"
+        self._load_settings()
+        self._mat_cache = None                      # (paths, matrix)
+        self._loaded = False
+        self._dirty = 0
+        # ジョブ
+        self._job = self._idle_job()
+        self._cancel = threading.Event()
+        self._thread: threading.Thread | None = None
+
+    # ── ローカル推論の実行設定(デバイス/スレッド数) ─────────────
+
+    def _load_settings(self) -> None:
+        try:
+            if self._settings_file.exists():
+                d = json.loads(self._settings_file.read_text(encoding="utf-8"))
+                local.configure(str(d.get("device", "auto")), int(d.get("threads", 0)))
+                return
+        except Exception as e:
+            logger.warning("SemanticService: failed to load settings: %s", e)
+        local.configure("auto", local.default_threads())
+
+    def set_local_options(self, device: str, threads: int) -> None:
+        """実行デバイス/CPUスレッド数を反映して保存する(検索時のクエリ埋め込みにも使われる)"""
+        local.configure(device, threads)
+        try:
+            self._settings_file.write_text(json.dumps(local.current_config()), encoding="utf-8")
+        except Exception as e:
+            logger.warning("SemanticService: failed to save settings: %s", e)
+
+    # ── 永続化 ─────────────────────────────────────────────
+
+    @staticmethod
+    def _idle_job() -> dict:
+        return {"running": False, "total": 0, "done": 0, "failed": 0, "current": "",
+                "error": "", "error_code": "", "cancelled": False, "finished": False}
+
+    def _ensure_loaded(self) -> None:
+        with self._lock:
+            if self._loaded:
+                return
+            self._loaded = True
+            if not self._file.exists():
+                return
+            try:
+                with np.load(self._file, allow_pickle=False) as z:
+                    model = str(z["model"])
+                    if model not in DIMS_BY_MODEL:
+                        return
+                    self._model = model
+                    self._soft = int(z["soft"]) if "soft" in z.files else local.DEFAULT_SOFT
+                    paths = [str(p) for p in z["paths"]]
+                    sizes, mtimes, vecs = z["sizes"], z["mtimes"], z["vecs"]
+                    self._dim = int(z["dim"])
+                    for i, p in enumerate(paths):
+                        self._vecs[p] = vecs[i]
+                        self._stamp[p] = (int(sizes[i]), float(mtimes[i]))
+            except Exception as e:
+                logger.warning("SemanticService: failed to load index: %s", e)
+                self._vecs.clear()
+                self._stamp.clear()
+                self._dim = 0
+
+    def _save(self) -> None:
+        with self._lock:
+            if not self._vecs:
+                if self._file.exists():
+                    self._file.unlink()
+                self._dirty = 0
+                return
+            paths = list(self._vecs.keys())
+            tmp = self._file.with_suffix(".tmp.npz")
+            np.savez(
+                tmp,
+                model=np.array(self._model), dim=np.array(self._dim), soft=np.array(self._soft),
+                paths=np.array(paths),
+                sizes=np.array([self._stamp[p][0] for p in paths], dtype=np.int64),
+                mtimes=np.array([self._stamp[p][1] for p in paths], dtype=np.float64),
+                vecs=np.stack([self._vecs[p] for p in paths]).astype(np.float32),
+            )
+            os.replace(tmp, self._file)
+            self._dirty = 0
+
+    def _put(self, path: str, vec: np.ndarray, size: int, mtime: float) -> None:
+        with self._lock:
+            self._vecs[path] = vec
+            self._stamp[path] = (size, mtime)
+            self._mat_cache = None
+            self._dirty += 1
+
+    # ── 状態 ───────────────────────────────────────────────
+
+    def _scope_entries(self, folder: str, recursive: bool) -> list[tuple[str, str, int, float]]:
+        p = Path(folder).resolve()
+        if not p.is_dir() or not self.gallery._check_path_allowed(p):
+            raise SemanticError("folder_not_allowed", str(folder))
+        raw = self.gallery._scan_folder_recursive(p) if recursive else self.gallery._scan_folder(p)
+        return [e for e in raw if Path(e[0]).suffix.lower() in INDEXABLE_EXTS]
+
+    def status(self, folder: str = "", recursive: bool = True) -> dict:
+        self._ensure_loaded()
+        out = {
+            "has_key": bool(get_api_key()),
+            "model": MODEL,
+            "backends": {
+                MODEL: {"dims": list(VALID_DIMS), "default_dim": DEFAULT_DIM, "ready": bool(get_api_key())},
+                LOCAL_MODEL: {"dims": list(local.LOCAL_DIMS), "default_dim": local.DEFAULT_LOCAL_DIM,
+                              "ready": True, "downloaded": local.is_downloaded(self.data_dir)},
+            },
+            "index_model": self._model,
+            "index_dim": self._dim,
+            "index_soft": self._soft,
+            "local": {
+                "devices": local.available_devices(),
+                "options": local.current_config(),
+                "default_threads": local.default_threads(),
+                "soft_tokens": list(local.SOFT_TOKENS),
+                "default_soft": local.DEFAULT_SOFT,
+            },
+            "indexed_total": len(self._vecs),
+            "job": dict(self._job),
+        }
+        if folder:
+            try:
+                entries = self._scope_entries(folder, recursive)
+                with self._lock:
+                    done = sum(1 for _, ap, sz, mt in entries if self._is_fresh(ap, sz, mt))
+                out["scope_total"] = len(entries)
+                out["scope_indexed"] = done
+            except SemanticError:
+                pass
+        return out
+
+    def folder_status(self, root: str) -> dict:
+        """フォルダごとの索引状況 {絶対パス: {"indexable": n, "indexed": m}} (直下の画像のみ。Galleryツリーの枚数表示と同じ単位)"""
+        self._ensure_loaded()
+        entries = self._scope_entries(root, True)
+        out: dict[str, dict] = {}
+        with self._lock:
+            for _, ap, sz, mt in entries:
+                d = out.setdefault(ap.rsplit("/", 1)[0], {"indexable": 0, "indexed": 0})
+                d["indexable"] += 1
+                if self._is_fresh(ap, sz, mt):
+                    d["indexed"] += 1
+        return out
+
+    def _is_fresh(self, path: str, size: int, mtime: float) -> bool:
+        st = self._stamp.get(path)
+        return st is not None and st[0] == size and abs(st[1] - mtime) < 1e-3
+
+    # ── インデックス作成ジョブ ────────────────────────────
+
+    def start_index(self, folder: str, recursive: bool, mode: str, model: str, dim: int,
+                    soft: int = local.DEFAULT_SOFT) -> None:
+        self._ensure_loaded()
+        if model not in DIMS_BY_MODEL:
+            raise SemanticError("bad_model", model)
+        if model == MODEL and not get_api_key():
+            raise SemanticError("no_api_key")
+        if dim not in DIMS_BY_MODEL[model]:
+            raise SemanticError("bad_dim", str(dim))
+        if model != LOCAL_MODEL or soft not in local.SOFT_TOKENS:
+            soft = local.DEFAULT_SOFT   # ソフトトークン数はローカルモデルのみの設定
+        with self._lock:
+            if self._job["running"]:
+                raise SemanticError("already_running")
+            entries = self._scope_entries(folder, recursive)
+            mismatch = bool(self._vecs) and (self._dim != dim or self._model != model or self._soft != soft)
+            if mismatch and mode != "all":
+                raise SemanticError("dim_mismatch", f"{self._model}/{self._dim}/{self._soft}")
+            if mode == "all":
+                # 範囲内の既存ベクトルを破棄して作り直す(モデル/次元違いなら全消去)
+                if mismatch:
+                    self._vecs.clear()
+                    self._stamp.clear()
+                else:
+                    for _, ap, _, _ in entries:
+                        self._vecs.pop(ap, None)
+                        self._stamp.pop(ap, None)
+                self._mat_cache = None
+            self._dim = dim
+            self._model = model
+            self._soft = soft
+            todo = [e for e in entries if not self._is_fresh(e[1], e[2], e[3])]
+            # スコープ内で消えたファイルの残骸を掃除(スコープ配下のキーのみ)
+            self._prune_missing(folder, recursive, {e[1] for e in entries})
+            self._cancel.clear()
+            self._job = self._idle_job()
+            self._job.update(running=True, total=len(todo))
+        self._thread = threading.Thread(target=self._run_index, args=(todo, model, dim, soft), daemon=True)
+        self._thread.start()
+
+    def _prune_missing(self, folder: str, recursive: bool, existing: set[str]) -> None:
+        base = Path(folder).resolve().as_posix().rstrip("/") + "/"
+        for p in list(self._vecs.keys()):
+            if not p.startswith(base):
+                continue
+            if not recursive and "/" in p[len(base):]:
+                continue
+            if p not in existing:
+                self._vecs.pop(p, None)
+                self._stamp.pop(p, None)
+                self._mat_cache = None
+                self._dirty += 1
+
+    def cancel(self) -> None:
+        self._cancel.set()
+
+    def _run_index(self, todo: list, model: str, dim: int, soft: int = local.DEFAULT_SOFT) -> None:
+        def work(entry):
+            if self._cancel.is_set():
+                return
+            name, ap, size, mtime = entry
+            self._job["current"] = name
+            try:
+                vec = self._embed_image(model, dim, Path(ap), soft)
+                self._put(ap, vec, size, mtime)
+                self._job["done"] += 1
+            except SemanticError as e:
+                if e.code in ("no_api_key", "api_key_invalid"):
+                    self._job["error_code"], self._job["error"] = e.code, str(e)
+                    self._cancel.set()
+                else:
+                    self._job["failed"] += 1
+                    if not self._job["error"]:
+                        self._job["error_code"], self._job["error"] = e.code, str(e)
+            except Exception as e:
+                logger.warning("SemanticService: embed failed for %s: %s", ap, e)
+                self._job["failed"] += 1
+            if self._dirty >= _CHECKPOINT_EVERY:
+                try:
+                    self._save()
+                except Exception as e:
+                    logger.warning("SemanticService: checkpoint failed: %s", e)
+
+        try:
+            if model == LOCAL_MODEL:
+                # 初回はモデルのダウンロード/ロードを先に行う(失敗したらジョブ全体を中止)
+                try:
+                    local.ensure_runtime(self.data_dir, progress=lambda ph: self._job.update(current=f"({ph} model...)"))
+                except Exception as e:
+                    logger.warning("SemanticService: local model load failed: %s", e)
+                    self._job["error_code"], self._job["error"] = "local_error", str(e)
+                    self._cancel.set()
+            workers = 1 if model == LOCAL_MODEL else _WORKERS   # ローカルはORT側がマルチスレッド
+            with ThreadPoolExecutor(max_workers=workers) as ex:
+                list(ex.map(work, todo))
+        finally:
+            try:
+                self._save()
+            except Exception as e:
+                logger.warning("SemanticService: save failed: %s", e)
+            if model == LOCAL_MODEL:
+                local.release()   # 画像生成とVRAM/RAMを奪い合わないよう、作成後はモデルを解放(検索時に再ロード)
+            self._job["running"] = False
+            self._job["finished"] = True
+            self._job["cancelled"] = self._cancel.is_set() and not self._job["error_code"]
+            self._job["current"] = ""
+
+    def _load_pil(self, path: Path):
+        """埋め込み用に縮小したPIL画像を返す(動画/PSDはサムネイルから)"""
+        from PIL import Image
+        if path.suffix.lower() in _THUMB_EXTS:
+            thumb = self.gallery.serve_thumbnail(str(path), IMAGE_MAX_SIZE)
+            if not thumb:
+                raise SemanticError("thumb_failed", str(path))
+            with Image.open(thumb) as im:
+                return im.convert("RGB")
+        with Image.open(path) as im:
+            im.seek(0)
+            im = im.convert("RGBA") if im.mode in ("RGBA", "LA", "P") else im.convert("RGB")
+            im.thumbnail((IMAGE_MAX_SIZE, IMAGE_MAX_SIZE), Image.LANCZOS)
+            return im
+
+    def _embed_image(self, model: str, dim: int, path: Path, soft: int | None = None) -> np.ndarray:
+        from PIL import Image
+        im = self._load_pil(path)
+        if model == LOCAL_MODEL:
+            if im.mode == "RGBA":   # 透過部は白背景に合成
+                bg = Image.new("RGB", im.size, (255, 255, 255))
+                bg.paste(im, mask=im.getchannel("A"))
+                im = bg
+            try:
+                return local.embed_image(self.data_dir, im, dim, self._soft if soft is None else soft)
+            except Exception as e:
+                raise SemanticError("local_error", str(e))
+        buf = io.BytesIO()
+        if im.mode == "RGBA":
+            im.save(buf, "PNG")
+            return embed_image_bytes(buf.getvalue(), "image/png", dim)
+        im.save(buf, "JPEG", quality=88)
+        return embed_image_bytes(buf.getvalue(), "image/jpeg", dim)
+
+    def _embed_text(self, model: str, dim: int, text: str) -> np.ndarray:
+        if model == LOCAL_MODEL:
+            try:
+                return local.embed_text(self.data_dir, text, dim)
+            except Exception as e:
+                raise SemanticError("local_error", str(e))
+        return embed_text(text, dim)
+
+    # ── 検索 ───────────────────────────────────────────────
+
+    def _matrix(self):
+        with self._lock:
+            if self._mat_cache is None:
+                paths = list(self._vecs.keys())
+                mat = np.stack([self._vecs[p] for p in paths]) if paths else np.zeros((0, max(self._dim, 1)), np.float32)
+                self._mat_cache = (paths, mat)
+            return self._mat_cache
+
+    def _rank(self, qvec: np.ndarray, folder: str, recursive: bool, limit: int, exclude: str = "",
+              min_score: float = 0.0) -> list[dict]:
+        entries = self._scope_entries(folder, recursive)
+        info = {ap: (name, sz, mt) for name, ap, sz, mt in entries}
+        paths, mat = self._matrix()
+        if not paths:
+            raise SemanticError("index_empty")
+        if mat.shape[1] != qvec.shape[0]:
+            raise SemanticError("dim_mismatch", str(self._dim))
+        scores = mat @ qvec
+        order = np.argsort(-scores)
+        out = []
+        for i in order:
+            if float(scores[i]) < min_score:
+                break   # スコア降順なので、以降はすべてしきい値未満
+            p = paths[i]
+            if p == exclude or p not in info:
+                continue
+            name, sz, mt = info[p]
+            item = self.gallery.make_list_item(name, p, sz, mt)
+            item["score"] = round(float(scores[i]), 4)
+            out.append(item)
+            if len(out) >= limit:
+                break
+        return out
+
+    def search_text(self, query: str, folder: str, recursive: bool, limit: int, min_score: float = 0.0) -> list[dict]:
+        self._ensure_loaded()
+        query = (query or "").strip()[:_MAX_QUERY_CHARS]
+        if not query:
+            return []
+        if not self._vecs:
+            raise SemanticError("index_empty")
+        qvec = self._embed_text(self._model, self._dim, query)
+        return self._rank(qvec, folder, recursive, limit, min_score=min_score)
+
+    def search_similar(self, path: str, folder: str, recursive: bool, limit: int, min_score: float = 0.0) -> list[dict]:
+        self._ensure_loaded()
+        p = Path(path).resolve()
+        if not p.is_file() or not self.gallery._check_path_allowed(p):
+            raise SemanticError("folder_not_allowed", path)
+        ap = p.as_posix()
+        vec = self._vecs.get(ap)
+        if vec is None or not self._is_fresh(ap, p.stat().st_size, p.stat().st_mtime):
+            # 未インデックスの基準画像は、その場で1枚だけ埋め込む
+            if not self._vecs:
+                raise SemanticError("index_empty")
+            if p.suffix.lower() not in INDEXABLE_EXTS:
+                raise SemanticError("unsupported_type", p.suffix)
+            vec = self._embed_image(self._model, self._dim, p)
+            st = p.stat()
+            self._put(ap, vec, st.st_size, st.st_mtime)
+            self._save()
+        return self._rank(vec, folder, recursive, limit, exclude=ap, min_score=min_score)
+
+    def clear(self) -> None:
+        self._ensure_loaded()
+        with self._lock:
+            if self._job["running"]:
+                raise SemanticError("already_running")
+            self._vecs.clear()
+            self._stamp.clear()
+            self._dim = 0
+            self._mat_cache = None
+            self._save()
+
+    def test_connection(self, model: str, dim: int) -> dict:
+        if model not in DIMS_BY_MODEL:
+            raise SemanticError("bad_model", model)
+        if dim not in DIMS_BY_MODEL[model]:
+            dim = DEFAULT_DIM_BY_MODEL[model]
+        n = int(self._embed_text(model, dim, "test").shape[0])
+        return {"dimensions": n, "provider": local.active_provider() if model == LOCAL_MODEL else "API"}
@@ -0,0 +1,228 @@
+"""AI skill (.md system prompt) file management service."""
+
+import logging
+import re
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+ALLOWED_EXTS = {"md"}
+
+DEFAULT_SKILL_FILENAME = "svg-icon.md"
+
+DEFAULT_SKILL_CONTENT = """---
+name: SVG Icon Generator
+description: Produces clean, minimal, valid SVG icons and simple illustrations.
+---
+
+You are an expert SVG icon and illustration designer. When the user asks for an icon, logo, pictogram, diagram, character, animal, or any vector graphic, respond with valid, clean SVG markup.
+
+## Composition process (do this before writing markup - skipping this step is the main cause of unrecognizable output)
+- Break the subject down into 3-8 distinct parts that make it recognizable (e.g. a bird: body, head, beak, eye, wing, tail; a house: wall, roof, door, window). Drop parts that are not essential.
+- Decide each part's approximate position, size, and draw order within the viewBox (elements listed later in the markup are drawn on top).
+- Pick the simplest shape that captures each part's silhouette: `<circle>`/`<ellipse>` for round parts, `<rect>` for rectangular parts, `<polygon>` for angular parts (beaks, ears, leaves, roofs). For a rounded organic outline that no primitive can approximate well (a body silhouette, a wing, a leaf edge), use a short `<path>` with 2-4 smooth curve commands (`Q` or `C`) instead of a plain circle - a few deliberate curve points beat a distorted primitive.
+- Never fall back to drawing an unrelated blob plus a few disconnected decorative lines when a subject is hard to render - always decompose it into the named parts above instead, even if each part is crude.
+
+## Output rules
+- Always wrap the SVG markup in a fenced code block labeled `svg`, e.g. ```svg ... ```.
+- Keep any explanation brief and place it OUTSIDE the code block, never mixed inside the SVG.
+- Output exactly one `<svg>...</svg>` element per code block.
+
+## Structure rules
+- Always include a `viewBox` attribute (e.g. `viewBox="0 0 24 24"`). Do not hardcode large pixel `width`/`height`; if you set them, make them match the viewBox aspect ratio.
+- Use a small, round coordinate system (0-24 or 0-100).
+- Round coordinate values to at most 2 decimal places.
+- Keep every `<path>` short (at most about 6 commands) - long, intricate paths are where quality breaks down most often.
+- Group related elements with `<g>` when it clarifies structure, but do not over-nest.
+
+## Color rules
+- For single-color icons, use `fill="currentColor"` (or `stroke="currentColor"` for line icons) so the icon inherits the surrounding text color.
+- For multi-color illustrations, use explicit hex colors (e.g. `#4A90D9`) - never named CSS colors like `"blue"`.
+- Avoid gradients, filters, and blend modes unless the user explicitly asks for a glossy/gradient style - they rarely render correctly from generated coordinates.
+
+## Accessibility
+- Include a `<title>` element as the first child of `<svg>` describing what the icon depicts.
+
+## Security (mandatory - do not violate)
+- Never include `<script>`, `<foreignObject>`, event handler attributes (`onload`, `onclick`, etc.), or `<a>`/`href` links to external URLs.
+- Never reference external resources (no `xlink:href` to remote URLs, no `<image>` with external `src`).
+
+## Example 1 - simple geometric icon (single color, primitives only)
+
+Request: "Sun icon"
+
+Parts: disc (circle), 8 rays (lines).
+
+```svg
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Sun</title>
+  <circle cx="12" cy="12" r="5" fill="currentColor"/>
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
+    <line x1="12" y1="1" x2="12" y2="4"/>
+    <line x1="12" y1="20" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/>
+    <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="4" y2="12"/>
+    <line x1="20" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
+    <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
+  </g>
+</svg>
+```
+
+## Example 2 - organic subject (multi-color, decomposed into parts)
+
+Request: "Bird icon"
+
+Parts: body (rounded outline via a short curved path), head (circle), beak (small triangle), eye (dot), wing (small curved path) - each drawn as its own element, layered head/beak/eye on top of the body.
+
+```svg
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>Bird</title>
+  <path d="M4 16 Q4 10 11 9 Q18 8 20 13 Q20 17 14 18 Q7 19 4 16 Z" fill="#4A90D9"/>
+  <path d="M8 14 Q5 12 3 14 Q6 16 9 16 Z" fill="#3576B8"/>
+  <circle cx="17" cy="10" r="3.2" fill="#4A90D9"/>
+  <polygon points="20,10 23,9.3 20,11.4" fill="#F2B807"/>
+  <circle cx="18" cy="9" r="0.6" fill="#1A1A1A"/>
+</svg>
+```
+
+Follow this pattern for every request: list the parts first, represent each with the simplest adequate shape, then assemble - never skip straight to unstructured shapes.
+"""
+
+SKILL_CREATOR_FILENAME = "skill-creator.md"
+
+SKILL_CREATOR_CONTENT = """---
+name: Skill Creator
+description: Interactively interviews you and drafts a new WFS chat skill (.md system prompt) ready to save.
+---
+
+You are a skill-design assistant embedded in ComfyUI Workflow Studio's AI TOOL Chat pane. Your job is to interactively help the user design a NEW "skill" - a markdown file with frontmatter (`name`, `description`) followed by system-prompt instructions. Once saved, a skill can be selected from a dropdown and is silently prepended to future chat messages as a system prompt.
+
+## How to conduct the interview
+- Ask ONE focused question at a time, never a bulleted list of questions. Wait for the user's answer before asking the next one.
+- Cover, in this order, only what is not already clear from context:
+  1. What task or domain should the skill specialize in (what should the model do differently once this skill is active)?
+  2. What output format is expected - plain prose, a specific fenced code block language, a fixed structure, a length limit?
+  3. Any hard constraints or things to avoid (tone, forbidden content, security concerns, things past attempts got wrong)?
+  4. Would a short worked example help smaller/local models follow the pattern more reliably? If yes, ask what a good example input/output looks like, or offer to draft one.
+- Keep it short - 3 to 5 questions is usually enough. If the user says "just generate it", "that's enough", or similar at any point, stop asking and produce the best skill you can from what you already have.
+
+## Output format for the finished skill
+- Once you have enough information, output the complete skill file in a single fenced code block labeled `skill` (```skill ... ```). Never mix prose inside that block - explanation goes outside it.
+- The block must start with frontmatter exactly in this shape:
+  ---
+  name: <short display name, shown in the skill dropdown>
+  description: <one sentence, shown as a tooltip in the dropdown>
+  ---
+- After the frontmatter, write clear, imperative system-prompt instructions for the target skill: what role the model should take, concrete output-format rules, hard constraints, and - if useful - one short worked example following a "request -> ideal output" shape.
+- After the code block, tell the user in one line that they can click the "Save as new skill" button below the message to add it, or copy the block manually into a new skill.
+"""
+
+_FRONTMATTER_RE = re.compile(r"^---\r?\n(.*?)\r?\n---\r?\n?", re.DOTALL)
+
+
+def _parse_frontmatter(content: str) -> dict:
+    """Extract a shallow `key: value` frontmatter block, if present."""
+    m = _FRONTMATTER_RE.match(content)
+    if not m:
+        return {}
+    fields: dict = {}
+    for line in m.group(1).splitlines():
+        if ":" not in line:
+            continue
+        key, _, value = line.partition(":")
+        key = key.strip()
+        value = value.strip()
+        if key:
+            fields[key] = value
+    return fields
+
+
+class SkillService:
+    def __init__(self, skills_dir: Path):
+        self.skills_dir = skills_dir
+        self.skills_dir.mkdir(parents=True, exist_ok=True)
+        self._seed_default_skill()
+
+    def _seed_default_skill(self) -> None:
+        """Seed a starter skill file the first time the directory is empty."""
+        try:
+            has_any = any(
+                p.is_file() and p.suffix.lstrip(".").lower() in ALLOWED_EXTS
+                for p in self.skills_dir.iterdir()
+            )
+        except FileNotFoundError:
+            has_any = False
+        if not has_any:
+            (self.skills_dir / DEFAULT_SKILL_FILENAME).write_text(
+                DEFAULT_SKILL_CONTENT, encoding="utf-8"
+            )
+            (self.skills_dir / SKILL_CREATOR_FILENAME).write_text(
+                SKILL_CREATOR_CONTENT, encoding="utf-8"
+            )
+
+    # ------------------------------------------------------------------
+    # File CRUD
+    # ------------------------------------------------------------------
+
+    def list_skills(self) -> list[dict]:
+        """Return sorted list of skill files with parsed frontmatter metadata."""
+        if not self.skills_dir.exists():
+            return []
+        files = []
+        for path in sorted(self.skills_dir.glob("*")):
+            if not (path.is_file() and path.suffix.lstrip(".").lower() in ALLOWED_EXTS):
+                continue
+            try:
+                content = path.read_text(encoding="utf-8")
+            except Exception:
+                content = ""
+            meta = _parse_frontmatter(content)
+            files.append({
+                "filename": path.name,
+                "name": meta.get("name") or path.stem,
+                "description": meta.get("description", ""),
+                "size": path.stat().st_size,
+            })
+        return files
+
+    def get_content(self, filename: str) -> str:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if not path.is_file():
+            raise FileNotFoundError(f"File not found: {filename}")
+        return path.read_text(encoding="utf-8")
+
+    def save_file(self, filename: str, content: str) -> dict:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        path.write_text(content, encoding="utf-8")
+        meta = _parse_frontmatter(content)
+        return {
+            "filename": path.name,
+            "name": meta.get("name") or path.stem,
+            "description": meta.get("description", ""),
+            "size": path.stat().st_size,
+        }
+
+    def delete_file(self, filename: str) -> None:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if path.is_file():
+            path.unlink()
+
+    def _safe_path(self, filename: str) -> Path | None:
+        if not filename or not filename.strip():
+            return None
+        # Skills are a flat directory - reject any path separator (no subfolders).
+        name = filename.strip()
+        if "/" in name or "\\" in name or name in (".", ".."):
+            return None
+        ext = Path(name).suffix.lstrip(".").lower()
+        if ext not in ALLOWED_EXTS:
+            return None
+        return self.skills_dir / name
@@ -5,6 +5,7 @@ import io
 import logging
 import sqlite3
 from pathlib import Path
+from typing import List

 logger = logging.getLogger(__name__)

@@ -85,6 +86,20 @@ class TaggerDbService:
            conn.execute("DELETE FROM images WHERE id=?", (row_id,))
            conn.commit()

+    def delete_bulk(self, row_ids: List[int]) -> int:
+        if not row_ids:
+            return 0
+
+        placeholders = ",".join("?" for _ in row_ids)
+
+        with self._conn() as conn:
+            cur = conn.execute(
+                f"DELETE FROM images WHERE id IN ({placeholders})",
+                row_ids,
+            )
+            conn.commit()
+            return cur.rowcount
+
    def export_csv(self) -> str:
        with self._conn() as conn:
            rows = conn.execute(
@@ -5,11 +5,15 @@ import csv
 import io
 import json
 import logging
+import os
+import re
 import tempfile
 import threading
+import urllib.error
 import urllib.request
 from pathlib import Path
 from typing import Optional
+from .url_guard import HINT as _URL_HINT, is_allowed_backend_url, urlopen as _guarded_urlopen

 import numpy as np
 from PIL import Image, ImageOps, PngImagePlugin
@@ -18,6 +22,10 @@ logger = logging.getLogger(__name__)

 _model_lock = threading.Lock()

+# api_url is client-supplied per request, so every backend (Ollama / OpenAI-compatible / Unsloth)
+# goes through url_guard: loopback or WFS_ALLOWED_BACKEND_HOSTS only, no redirects. This also
+# stops the Unsloth API key (Authorization header) from being sent to an arbitrary server.
+

 class TaggerService:
    def __init__(self, models_dir: Path, settings_file: Path):
@@ -185,19 +193,33 @@ class TaggerService:
    def _predict_onnx(self, img: Image.Image, data: dict, thr: float, char_thr: float) -> list:
        shape = data["input_shape"]
        fmt = "NHWC"
-        size = (224, 224)
+        size = 224
        if len(shape) == 4:
            if shape[1] == 3 and isinstance(shape[2], int) and shape[2] > 0:
                fmt = "NCHW"
-                size = (int(shape[3]), int(shape[2]))
+                size = int(shape[2])
            elif shape[3] == 3 and isinstance(shape[1], int) and shape[1] > 0:
                fmt = "NHWC"
-                size = (int(shape[2]), int(shape[1]))
+                size = int(shape[1])

        img = ImageOps.exif_transpose(img)
-        if img.mode != "RGB":
-            img = img.convert("RGB")
-        arr = np.array(img.resize(size, Image.Resampling.LANCZOS), dtype=np.float32) / 255.0
+        # WD Tagger系標準の前処理: 透過は白背景で合成 → アスペクト比を維持したまま
+        # 白背景で正方形にパディング → リサイズ → RGB→BGR → 0-255のfloat32のまま(NHWC)
+        if img.mode != "RGBA":
+            img = img.convert("RGBA")
+        canvas = Image.new("RGBA", img.size, (255, 255, 255))
+        canvas.paste(img, mask=img)
+        img = canvas.convert("RGB")
+
+        w, h = img.size
+        max_dim = max(w, h)
+        padded = Image.new("RGB", (max_dim, max_dim), (255, 255, 255))
+        padded.paste(img, ((max_dim - w) // 2, (max_dim - h) // 2))
+        if max_dim != size:
+            padded = padded.resize((size, size), Image.Resampling.BICUBIC)
+
+        arr = np.array(padded, dtype=np.float32)
+        arr = np.ascontiguousarray(arr[:, :, ::-1])  # RGB -> BGR
        if fmt == "NCHW":
            arr = arr.transpose((2, 0, 1))
        arr = np.expand_dims(arr, 0)
@@ -223,39 +245,123 @@ class TaggerService:
                tags.append(label.replace("character:", ""))
        return tags

-    # ── Ollama VLM ────────────────────────────────────────────
+    # ── VLM Tagging (Ollama / LM Studio / Lemonade / Unsloth) ──

-    def ollama_models(self, api_url: str) -> list:
+    # キー未設定でUnslothに拒否された場合の案内(py/routes/unsloth_routes.pyと同文)
+    _UNSLOTH_KEYLESS_REJECTED = (
+        "Unsloth rejected the request without an API key (HTTP 401). Either set UNSLOTH_API_KEY "
+        "in the plugin's .env (copy .env.example) and restart ComfyUI, or turn on Keyless API "
+        "access -> \"Chat and inference\" in Unsloth Desktop's Settings -> API."
+    )
+
+    @staticmethod
+    def _unsloth_api_key() -> Optional[str]:
+        """UNSLOTH_API_KEY を環境変数(.env)から取得。未設定ならNone — その場合はAuthorization無しで
+        送る(Unsloth DesktopのKeyless API access → "Chat and inference" がオンなら通る)。"""
+        return os.environ.get("UNSLOTH_API_KEY", "").strip() or None
+
+    @staticmethod
+    def _strip_thinking_tags(text: str) -> str:
+        text = re.sub(r"<think>[\s\S]*?</think>", "", text, flags=re.IGNORECASE)
+        text = re.sub(r"<thinking>[\s\S]*?</thinking>", "", text, flags=re.IGNORECASE)
+        return text.strip()
+
+    def vlm_models(self, backend: str, api_url: str) -> list:
+        backend = (backend or "ollama").lower()
        try:
-            req = urllib.request.Request(api_url.rstrip("/") + "/api/tags")
-            with urllib.request.urlopen(req, timeout=5) as resp:
+            if not is_allowed_backend_url(api_url):
+                logger.error("vlm_models: %s", _URL_HINT)
+                return []
+            if backend == "ollama":
+                req = urllib.request.Request(api_url.rstrip("/") + "/api/tags")
+                with _guarded_urlopen(req, timeout=5) as resp:
+                    data = json.loads(resp.read().decode("utf-8"))
+                return sorted(m["name"] for m in data.get("models", []))
+
+            headers = {}
+            if backend == "unsloth":
+                key = self._unsloth_api_key()
+                if key:
+                    headers["Authorization"] = f"Bearer {key}"
+            req = urllib.request.Request(api_url.rstrip("/") + "/v1/models", headers=headers)
+            with _guarded_urlopen(req, timeout=5) as resp:
                data = json.loads(resp.read().decode("utf-8"))
-            return sorted(m["name"] for m in data.get("models", []))
+            return sorted(m["id"] for m in data.get("data", []))
        except Exception as e:
-            logger.error("ollama_models: %s", e)
+            if (backend == "unsloth" and isinstance(e, urllib.error.HTTPError) and e.code == 401
+                    and not self._unsloth_api_key()):
+                logger.error("vlm_models: %s", self._UNSLOTH_KEYLESS_REJECTED)
+                return []
+            logger.error("vlm_models: %s", e)
            return []

-    def ollama_predict(self, image_b64: str, api_url: str, model: str, prompt: str, max_tags: int = 40) -> dict:
-        payload = json.dumps({
-            "model": model,
-            "messages": [{"role": "user", "content": prompt, "images": [image_b64]}],
-            "stream": False,
-            "options": {"temperature": 0.7, "num_ctx": 4096},
-        }).encode("utf-8")
+    def vlm_predict(self, image_b64: str, backend: str, api_url: str, model: str, prompt: str, max_tags: int = 40,
+                     thinking_mode: bool = False, max_tokens: int = 0) -> dict:
+        backend = (backend or "ollama").lower()
        try:
-            req = urllib.request.Request(
-                api_url.rstrip("/") + "/api/chat",
-                data=payload,
-                headers={"Content-Type": "application/json"},
-                method="POST",
-            )
-            with urllib.request.urlopen(req, timeout=180) as resp:
-                data = json.loads(resp.read().decode("utf-8"))
-            content = data.get("message", {}).get("content", "")
+            if not is_allowed_backend_url(api_url):
+                return {"error": _URL_HINT}
+            if backend == "ollama":
+                body = {
+                    "model": model,
+                    "messages": [{"role": "user", "content": prompt, "images": [image_b64]}],
+                    "stream": False,
+                    "think": bool(thinking_mode),
+                    "options": {"temperature": 0.7, "num_ctx": 4096},
+                }
+                if max_tokens > 0:
+                    body["options"]["num_predict"] = max_tokens
+                payload = json.dumps(body).encode("utf-8")
+                req = urllib.request.Request(
+                    api_url.rstrip("/") + "/api/chat",
+                    data=payload,
+                    headers={"Content-Type": "application/json"},
+                    method="POST",
+                )
+                with _guarded_urlopen(req, timeout=180) as resp:
+                    data = json.loads(resp.read().decode("utf-8"))
+                content = data.get("message", {}).get("content", "")
+            else:
+                headers = {"Content-Type": "application/json"}
+                if backend == "unsloth":
+                    key = self._unsloth_api_key()
+                    if key:
+                        headers["Authorization"] = f"Bearer {key}"
+                body = {
+                    "model": model,
+                    "messages": [{"role": "user", "content": [
+                        {"type": "text", "text": prompt},
+                        {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{image_b64}"}},
+                    ]}],
+                    "stream": False,
+                }
+                if max_tokens > 0:
+                    body["max_tokens"] = max_tokens
+                payload = json.dumps(body).encode("utf-8")
+                req = urllib.request.Request(
+                    api_url.rstrip("/") + "/v1/chat/completions",
+                    data=payload,
+                    headers=headers,
+                    method="POST",
+                )
+                with _guarded_urlopen(req, timeout=180) as resp:
+                    data = json.loads(resp.read().decode("utf-8"))
+                message = data.get("choices", [{}])[0].get("message", {})
+                content = message.get("content", "")
+                # Unslothはreasoningを別フィールドで返すため<think>タグに畳んで統一的に扱う
+                reasoning = message.get("reasoning_content")
+                if reasoning:
+                    content = f"<think>{reasoning}</think>{content}"
+
+            if not thinking_mode:
+                content = self._strip_thinking_tags(content)
            tags = [t.strip() for t in content.split(",") if t.strip()][:max_tags]
            return {"tags": ", ".join(tags), "count": len(tags)}
        except Exception as e:
-            logger.error("ollama_predict: %s", e)
+            logger.error("vlm_predict: %s", e)
+            if (backend == "unsloth" and isinstance(e, urllib.error.HTTPError) and e.code == 401
+                    and not self._unsloth_api_key()):
+                return {"error": self._UNSLOTH_KEYLESS_REJECTED}
            return {"error": str(e)}

    # ── ファイルメタデータ書込 ────────────────────────────────
@@ -334,8 +440,9 @@ class TaggerService:
        self._batch_state["stop"] = True

    def batch_start(self, folder: str, model_name: str, threshold: float, char_threshold: float,
-                    use_ollama: bool, ollama_api: str, ollama_model: str, ollama_prompt: str,
-                    ollama_max_tags: int, save_db: bool, write_file: bool, write_txt: bool, db_service) -> dict:
+                    use_ollama: bool, vlm_backend: str, vlm_api_url: str, ollama_model: str, ollama_prompt: str,
+                    ollama_max_tags: int, save_db: bool, write_file: bool, write_txt: bool, db_service,
+                    thinking_mode: bool = False, max_tokens: int = 0) -> dict:
        if self._batch_state["running"]:
            return {"error": "Batch already running"}
        folder_path = Path(folder)
@@ -370,7 +477,8 @@ class TaggerService:

                    vlm_tags = ""
                    if use_ollama and ollama_model:
-                        res2 = self.ollama_predict(b64, ollama_api, ollama_model, ollama_prompt, ollama_max_tags)
+                        res2 = self.vlm_predict(b64, vlm_backend, vlm_api_url, ollama_model, ollama_prompt, ollama_max_tags,
+                                                 thinking_mode, max_tokens)
                        vlm_tags = res2.get("tags", "")

                    all_tags = ", ".join(filter(None, [interrogator_tags, vlm_tags]))
@@ -0,0 +1,68 @@
+"""Outbound URL guard for backend proxies (SSRF mitigation).
+
+Several routes (Ollama chat, Tagger VLM, Eagle, Unsloth relay) connect to a backend whose
+address is supplied by the browser. Without a check, any caller that can reach ComfyUI could
+make the server connect to an arbitrary host (cloud metadata, LAN services, file://).
+
+Allowed targets:
+  - loopback hosts (localhost / 127.0.0.1 / ::1), any port
+  - hosts listed by the operator in the WFS_ALLOWED_BACKEND_HOSTS environment variable
+    (comma-separated "host" or "host:port"; e.g. "192.168.1.20:11434,gpu-box")
+
+Only http(s) URLs without credentials are accepted, and redirects are never followed.
+"""
+
+import os
+import urllib.request
+from urllib.parse import urlparse
+
+LOOPBACK_HOSTS = {"localhost", "127.0.0.1", "::1"}
+ALLOWED_HOSTS_ENV = "WFS_ALLOWED_BACKEND_HOSTS"
+
+HINT = (
+    "Backend URL must point to localhost/127.0.0.1/::1. To use another host, list it in the "
+    f"{ALLOWED_HOSTS_ENV} environment variable (e.g. 192.168.1.20:11434) and restart ComfyUI."
+)
+
+
+def _operator_allowlist():
+    raw = os.environ.get(ALLOWED_HOSTS_ENV, "")
+    return {item.strip().lower() for item in raw.split(",") if item.strip()}
+
+
+def is_allowed_backend_url(url):
+    """True if url is an http(s) URL without credentials whose host[:port] is permitted."""
+    try:
+        parsed = urlparse((url or "").strip())
+        if parsed.scheme not in ("http", "https") or not parsed.hostname:
+            return False
+        if parsed.username or parsed.password:
+            return False
+        host = parsed.hostname.lower()
+        if host in LOOPBACK_HOSTS:
+            return True
+        allow = _operator_allowlist()
+        return host in allow or (parsed.port is not None and f"{host}:{parsed.port}" in allow)
+    except Exception:
+        return False
+
+
+def require_backend_url(url):
+    """Return url stripped of trailing slashes, or raise ValueError(HINT)."""
+    url = (url or "").strip()
+    if not is_allowed_backend_url(url):
+        raise ValueError(HINT)
+    return url.rstrip("/")
+
+
+class _NoRedirect(urllib.request.HTTPRedirectHandler):
+    def redirect_request(self, *args, **kwargs):
+        return None
+
+
+_opener = urllib.request.build_opener(_NoRedirect)
+
+
+def urlopen(req, timeout):
+    """urllib urlopen that never follows redirects (a 3xx surfaces as HTTPError)."""
+    return _opener.open(req, timeout=timeout)
@@ -0,0 +1,98 @@
+"""Video tab Edit subtab project file management (JSON timeline persistence).
+
+Same CRUD shape as VideoPlanService (list/get/save/delete with a safe-path
+helper), kept as its own class rather than sharing a base because the two
+JSON schemas are unrelated (batch keyframe blocks vs. an ordered clip
+timeline) — see VideoPlanService's own docstring for the same reasoning.
+No index-image thumbnail support (unlike VideoPlanService) since the Edit
+project list is plain text/JSON only for now.
+"""
+
+import json
+import logging
+from datetime import datetime, timezone
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+
+class VideoEditProjectService:
+    def __init__(self, project_dir: Path):
+        self.project_dir = project_dir
+        self.project_dir.mkdir(parents=True, exist_ok=True)
+
+    # ------------------------------------------------------------------
+    # Path safety
+    # ------------------------------------------------------------------
+
+    def _safe_path(self, filename: str, ext: str = ".json") -> Path | None:
+        if not filename or not filename.strip():
+            return None
+        name = filename.strip()
+        if not name.endswith(ext):
+            name = name + ext
+        if "/" in name or "\\" in name or name in (".", "..") or "\x00" in name:
+            return None
+        resolved = (self.project_dir / name).resolve()
+        project_dir_resolved = self.project_dir.resolve()
+        if resolved != project_dir_resolved and not str(resolved).startswith(str(project_dir_resolved) + "\\") and not str(resolved).startswith(str(project_dir_resolved) + "/"):
+            return None
+        return resolved
+
+    def _now_iso(self) -> str:
+        return datetime.now(timezone.utc).isoformat().replace("+00:00", "Z")
+
+    # ------------------------------------------------------------------
+    # CRUD
+    # ------------------------------------------------------------------
+
+    def list_projects(self) -> list[dict]:
+        if not self.project_dir.is_dir():
+            return []
+        result = []
+        for path in sorted(self.project_dir.glob("*.json")):
+            try:
+                with open(path, "r", encoding="utf-8") as f:
+                    data = json.load(f)
+            except Exception as e:
+                logger.warning("Skipping unreadable video edit project %s: %s", path.name, e)
+                continue
+
+            result.append({
+                "filename": path.name,
+                "name": data.get("name", path.stem),
+                "clip_count": len(data.get("clips", [])),
+                "updated_at": data.get("updated_at", ""),
+            })
+        result.sort(key=lambda p: p.get("updated_at", ""), reverse=True)
+        return result
+
+    def get_project(self, filename: str) -> dict:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if not path.is_file():
+            raise FileNotFoundError(f"Project not found: {filename}")
+        with open(path, "r", encoding="utf-8") as f:
+            return json.load(f)
+
+    def save_project(self, filename: str, data: dict) -> dict:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+
+        data = dict(data)
+        data["updated_at"] = self._now_iso()
+
+        path.parent.mkdir(parents=True, exist_ok=True)
+        with open(path, "w", encoding="utf-8") as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+
+        return {"filename": path.name, "updated_at": data["updated_at"]}
+
+    def delete_project(self, filename: str) -> None:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if path.is_file():
+            path.unlink()
@@ -0,0 +1,143 @@
+"""Video tab plan file management service (JSON plan + optional PNG index thumbnail).
+
+Duplicated from LabPlanService rather than shared — the two plan formats are
+unrelated (batch keyframe columns vs. sequential timeline blocks) and would
+gain nothing from a forced common base beyond coincidental line-count savings.
+"""
+
+import base64
+import json
+import logging
+from datetime import datetime, timezone
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+
+class VideoPlanService:
+    def __init__(self, plan_dir: Path):
+        self.plan_dir = plan_dir
+        self.plan_dir.mkdir(parents=True, exist_ok=True)
+
+    # ------------------------------------------------------------------
+    # Path safety
+    # ------------------------------------------------------------------
+
+    def _safe_path(self, filename: str, ext: str = ".json") -> Path | None:
+        if not filename or not filename.strip():
+            return None
+        name = filename.strip()
+        if not name.endswith(ext):
+            name = name + ext
+        if "/" in name or "\\" in name or name in (".", "..") or "\x00" in name:
+            return None
+        resolved = (self.plan_dir / name).resolve()
+        plan_dir_resolved = self.plan_dir.resolve()
+        if resolved != plan_dir_resolved and not str(resolved).startswith(str(plan_dir_resolved) + "\\") and not str(resolved).startswith(str(plan_dir_resolved) + "/"):
+            return None
+        return resolved
+
+    def _now_iso(self) -> str:
+        return datetime.now(timezone.utc).isoformat().replace("+00:00", "Z")
+
+    # ------------------------------------------------------------------
+    # CRUD
+    # ------------------------------------------------------------------
+
+    def list_plans(self) -> list[dict]:
+        if not self.plan_dir.is_dir():
+            return []
+        result = []
+        for path in sorted(self.plan_dir.glob("*.json")):
+            try:
+                with open(path, "r", encoding="utf-8") as f:
+                    data = json.load(f)
+            except Exception as e:
+                logger.warning("Skipping unreadable video plan %s: %s", path.name, e)
+                continue
+
+            stem = path.stem
+            thumbnail = None
+            thumb_path = self.plan_dir / f"{stem}.png"
+            if thumb_path.is_file():
+                thumbnail = f"/wfm_data/video_plan/{stem}.png"
+
+            result.append({
+                "filename": path.name,
+                "name": data.get("name", stem),
+                "note": data.get("note", ""),
+                "block_count": len(data.get("blocks", [])),
+                "updated_at": data.get("updated_at", ""),
+                "thumbnail": thumbnail,
+            })
+        result.sort(key=lambda p: p.get("updated_at", ""), reverse=True)
+        return result
+
+    def get_plan(self, filename: str) -> dict:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if not path.is_file():
+            raise FileNotFoundError(f"Plan not found: {filename}")
+        with open(path, "r", encoding="utf-8") as f:
+            return json.load(f)
+
+    def save_plan(self, filename: str, data: dict, index_image_base64: str | None = None) -> dict:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+
+        data = dict(data)
+        data["updated_at"] = self._now_iso()
+
+        path.parent.mkdir(parents=True, exist_ok=True)
+        with open(path, "w", encoding="utf-8") as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+
+        if index_image_base64:
+            self.save_index_image(filename, index_image_base64)
+
+        return {"filename": path.name, "updated_at": data["updated_at"]}
+
+    def save_index_image(self, filename: str, image_base64: str) -> None:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        stem = path.stem
+        thumb_path = self.plan_dir / f"{stem}.png"
+
+        # Accept both raw base64 and data: URL forms
+        b64 = image_base64
+        if "," in b64 and b64.strip().lower().startswith("data:"):
+            b64 = b64.split(",", 1)[1]
+
+        image_bytes = base64.b64decode(b64)
+        with open(thumb_path, "wb") as f:
+            f.write(image_bytes)
+
+    def save_index_image_to_output(self, image_base64: str, filename_prefix: str = "Video_index") -> dict:
+        """Saves the contact-sheet index image into ComfyUI's own output folder,
+        alongside the videos generated during the run (unlike save_index_image,
+        which saves it next to the plan file in plan_dir)."""
+        b64 = image_base64
+        if "," in b64 and b64.strip().lower().startswith("data:"):
+            b64 = b64.split(",", 1)[1]
+        image_bytes = base64.b64decode(b64)
+
+        import folder_paths  # type: ignore
+        output_dir = folder_paths.get_output_directory()
+        full_output_folder, filename, counter, subfolder, _ = folder_paths.get_save_image_path(filename_prefix, output_dir)
+        save_name = f"{filename}_{counter:05}_.png"
+        save_path = Path(full_output_folder) / save_name
+        save_path.write_bytes(image_bytes)
+        return {"filename": save_name, "subfolder": subfolder}
+
+    def delete_plan(self, filename: str) -> None:
+        path = self._safe_path(filename)
+        if path is None:
+            raise ValueError(f"Invalid filename: {filename}")
+        if path.is_file():
+            path.unlink()
+        thumb_path = self.plan_dir / f"{path.stem}.png"
+        if thumb_path.is_file():
+            thumb_path.unlink()
@@ -0,0 +1,480 @@
+"""Video tab utilities: last-frame capture and animated GIF conversion.
+
+Runs entirely on dependencies ComfyUI itself already requires — PyAV for
+decoding (ComfyUI core already needs av>=17.0.0) and Pillow for GIF encoding
+— so no ffmpeg binary and no new pip installs, unlike a typical ffmpeg-based
+implementation (e.g. Eagle's video2gif/video-to-frame plugins).
+"""
+
+import base64
+import logging
+import os
+import sys
+from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+try:
+    from PIL import Image
+    _RESAMPLE = getattr(getattr(Image, "Resampling", Image), "LANCZOS")
+except Exception:  # pragma: no cover - Pillow is a hard ComfyUI dependency
+    _RESAMPLE = None
+
+# Text overlay anchors: 9-grid "<vertical>-<horizontal>" (e.g. "bottom-center").
+_ANCHOR_V = ("top", "middle", "bottom")
+_ANCHOR_H = ("left", "center", "right")
+
+# Fonts tried in order for text overlays. Pillow's built-in default font has no
+# CJK glyphs (Japanese/Chinese text would render as boxes), so a system font
+# with CJK coverage is preferred; load_default() is only the last resort.
+_FONT_CANDIDATES = {
+    "win32": ["meiryo.ttc", "YuGothM.ttc", "NotoSansJP-Regular.ttf", "msgothic.ttc", "arial.ttf"],
+    "darwin": [
+        "/System/Library/Fonts/ヒラギノ角ゴシック W4.ttc",
+        "/System/Library/Fonts/Hiragino Sans GB.ttc",
+        "/Library/Fonts/Arial Unicode.ttf",
+    ],
+    "linux": [
+        "/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc",
+        "/usr/share/fonts/noto-cjk/NotoSansCJK-Regular.ttc",
+        "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
+    ],
+}
+
+
+def _load_overlay_font(size: int):
+    from PIL import ImageFont
+
+    platform = "win32" if sys.platform.startswith("win") else ("darwin" if sys.platform == "darwin" else "linux")
+    for name in _FONT_CANDIDATES[platform]:
+        path = name
+        if platform == "win32" and not os.path.isabs(name):
+            path = os.path.join(os.environ.get("WINDIR", r"C:\Windows"), "Fonts", name)
+        if os.path.isfile(path):
+            try:
+                return ImageFont.truetype(path, size)
+            except Exception:
+                continue
+    return ImageFont.load_default(size=size)
+
+
+def _render_text_layer(width: int, height: int, ov: dict):
+    """Renders one overlay's text onto a transparent full-frame RGBA layer, so
+    it can be alpha-composited over every frame in its time range without
+    re-rendering the text per frame (same idea as ComfyUI core's TextOverlay)."""
+    from PIL import ImageColor, ImageDraw
+
+    text = str(ov.get("text") or "").replace("\\n", "\n")
+    layer = Image.new("RGBA", (width, height), (0, 0, 0, 0))
+    if not text.strip():
+        return layer
+
+    size = max(8, round(float(ov.get("font_size") or 6.0) / 100.0 * height))
+    font = _load_overlay_font(size)
+    stroke = max(1, round(size * 0.06)) if ov.get("outline", True) else 0
+    spacing = round(size * 0.2)
+    try:
+        color = ImageColor.getrgb(str(ov.get("color") or "#ffffff"))
+    except ValueError:
+        color = (255, 255, 255)
+    fill = (*color[:3], 255)
+
+    anchor = str(ov.get("anchor") or "bottom-center").split("-")
+    v = anchor[0] if anchor and anchor[0] in _ANCHOR_V else "bottom"
+    h = anchor[1] if len(anchor) > 1 and anchor[1] in _ANCHOR_H else "center"
+
+    draw = ImageDraw.Draw(layer)
+    box = draw.multiline_textbbox((0, 0), text, font=font, spacing=spacing, stroke_width=stroke, align=h)
+    tw, th = box[2] - box[0], box[3] - box[1]
+    margin = round(0.04 * min(width, height))
+    x = {"left": margin, "center": (width - tw) / 2, "right": width - margin - tw}[h] - box[0]
+    y = {"top": margin, "middle": (height - th) / 2, "bottom": height - margin - th}[v] - box[1]
+
+    if ov.get("background"):
+        pad = round(size * 0.3)
+        draw.rounded_rectangle(
+            (x + box[0] - pad, y + box[1] - pad, x + box[2] + pad, y + box[3] + pad),
+            radius=pad, fill=(0, 0, 0, 140),
+        )
+    draw.multiline_text((x, y), text, font=font, fill=fill, spacing=spacing, align=h,
+                        stroke_width=stroke, stroke_fill=(0, 0, 0, 255))
+    return layer
+
+
+def _fit_layer(img, base_w: int, base_h: int, pip: dict):
+    """Scales a picture-in-picture frame to its target width (a fraction of the
+    base frame's width, aspect preserved), applies opacity, and returns
+    (layer, left, top) with the position of its top-left corner on the base
+    frame (pip["x"]/["y"] are the layer's centre as fractions of the frame)."""
+    layer = img.convert("RGBA")
+    pw = max(2, int(round(float(pip["scale"]) * base_w)))
+    ph = max(2, int(round(pw * layer.height / max(1, layer.width))))
+    layer = layer.resize((pw, ph), _RESAMPLE)
+    opacity = float(pip.get("opacity", 1.0))
+    if opacity < 0.999:
+        layer.putalpha(layer.getchannel("A").point(lambda a: int(a * opacity)))
+    left = int(round(float(pip["x"]) * base_w - pw / 2))
+    top = int(round(float(pip["y"]) * base_h - ph / 2))
+    return layer, left, top
+
+
+class _PipSource:
+    """One overlay clip's frame source. Images are decoded once; videos are
+    decoded sequentially (seek once to the in-file start, then only forward),
+    since the base video is also processed strictly in time order. After a
+    video's last frame it holds that frame until the overlay's end."""
+
+    def __init__(self, path: Path, pip: dict, base_w: int, base_h: int):
+        import av  # type: ignore
+
+        self.pip = pip
+        self.base_w, self.base_h = base_w, base_h
+        self.start = float(pip["start"])
+        self.end = self.start + float(pip["length"])
+        self.src_start = max(0.0, float(pip.get("src_start") or 0.0))
+        self.container = None
+        self._cache_key = None
+        self._cache = None
+        if pip.get("kind") == "image":
+            with Image.open(path) as im:
+                im.load()
+                self.static = _fit_layer(im, base_w, base_h, pip)
+        else:
+            self.static = None
+            self.container = av.open(str(path))
+            self.stream = self.container.streams.video[0]
+            if self.src_start > 0.05:
+                self.container.seek(int(self.src_start * 1_000_000))
+            self.gen = self.container.decode(self.stream)
+            self.cur = None
+            self.nxt = None
+            self.done = False
+
+    def _time(self, frame) -> float:
+        return float(frame.pts * self.stream.time_base) if frame.pts is not None else 0.0
+
+    def layer_at(self, t: float):
+        """(layer, left, top) for timeline time t, or None when inactive."""
+        if not (self.start <= t < self.end):
+            return None
+        if self.static is not None:
+            return self.static
+        target = self.src_start + (t - self.start)
+        while True:
+            if self.nxt is None and not self.done:
+                try:
+                    self.nxt = next(self.gen)
+                except StopIteration:
+                    self.done = True
+            if self.nxt is not None and self._time(self.nxt) <= target + 1e-3:
+                self.cur, self.nxt = self.nxt, None
+                continue
+            break
+        frame = self.cur or self.nxt
+        if frame is None:
+            return None
+        key = id(frame)
+        if key != self._cache_key:
+            self._cache = _fit_layer(frame.to_image(), self.base_w, self.base_h, self.pip)
+            self._cache_key = key
+        return self._cache
+
+    def close(self):
+        if self.container is not None:
+            self.container.close()
+            self.container = None
+
+
+def _paste_layer(base, layer, left: int, top: int):
+    """Alpha-composites `layer` onto the RGBA `base` at (left, top), clipping
+    whatever falls outside the frame (a plain alpha_composite() dest can't be
+    negative)."""
+    x0, y0 = max(0, left), max(0, top)
+    x1, y1 = min(base.width, left + layer.width), min(base.height, top + layer.height)
+    if x1 <= x0 or y1 <= y0:
+        return
+    piece = layer.crop((x0 - left, y0 - top, x1 - left, y1 - top))
+    region = base.crop((x0, y0, x1, y1))
+    region.alpha_composite(piece)
+    base.paste(region, (x0, y0))
+
+
+class VideoService:
+    def _resolve_media_path(self, filename: str, subfolder: str, type_: str) -> Path:
+        """Resolves a ComfyUI-style {filename, subfolder, type} reference to an
+        absolute path, guarding against path traversal outside the matching
+        input/output/temp directory."""
+        import folder_paths  # type: ignore
+
+        base_dir = folder_paths.get_directory_by_type(type_)
+        if not base_dir:
+            raise ValueError(f"Invalid type: {type_}")
+        base = Path(base_dir).resolve()
+        target = (base / (subfolder or "") / filename).resolve()
+        try:
+            target.relative_to(base)
+        except ValueError:
+            raise ValueError("Access denied: path outside allowed directory")
+        if not target.is_file():
+            raise FileNotFoundError(f"File not found: {filename}")
+        return target
+
+    def save_frame_to_output(self, image_base64: str, filename_prefix: str = "video/Frame") -> dict:
+        """Saves a client-captured video frame (PNG data URL) into ComfyUI's own
+        output folder — same auto-numbered pattern as Lab's index-image save
+        (see LabPlanService.save_index_image_to_output)."""
+        import folder_paths  # type: ignore
+
+        b64 = image_base64
+        if "," in b64 and b64.strip().lower().startswith("data:"):
+            b64 = b64.split(",", 1)[1]
+        image_bytes = base64.b64decode(b64)
+
+        output_dir = folder_paths.get_output_directory()
+        full_output_folder, filename, counter, subfolder, _ = folder_paths.get_save_image_path(filename_prefix, output_dir)
+        save_name = f"{filename}_{counter:05}_.png"
+        save_path = Path(full_output_folder) / save_name
+        save_path.write_bytes(image_bytes)
+        return {"filename": save_name, "subfolder": subfolder}
+
+    def probe_video(self, filename: str, subfolder: str, type_: str) -> dict:
+        """Reads duration/dimensions/fps/audio presence via PyAV only (no ffmpeg
+        subprocess) — used by the Video Edit tab right after a clip is added, so
+        the timeline UI can show its length and the export-time resolution-match
+        check has real numbers to compare against."""
+        import av  # type: ignore
+
+        src_path = self._resolve_media_path(filename, subfolder, type_)
+        container = av.open(str(src_path))
+        try:
+            stream = container.streams.video[0]
+            fps = float(stream.average_rate) if stream.average_rate else 0.0
+            if stream.duration is not None and stream.time_base is not None:
+                duration = float(stream.duration * stream.time_base)
+            elif container.duration is not None:
+                duration = float(container.duration) / 1_000_000
+            else:
+                duration = 0.0
+            width = stream.codec_context.width
+            height = stream.codec_context.height
+            has_audio = len(container.streams.audio) > 0
+        finally:
+            container.close()
+
+        return {
+            "duration": duration,
+            "width": width,
+            "height": height,
+            "fps": fps,
+            "has_audio": has_audio,
+        }
+
+    def convert_to_gif(
+        self,
+        filename: str,
+        subfolder: str,
+        type_: str,
+        start_time: float = 0.0,
+        end_time=None,
+        fps: float = 10.0,
+        max_width=None,
+        filename_prefix: str = "video/GIF",
+    ) -> dict:
+        """Decodes the given video (PyAV), samples it down to `fps`, optionally
+        downscales to `max_width`, and encodes the result as an animated GIF
+        (Pillow) into ComfyUI's own output folder."""
+        import av  # type: ignore
+        import folder_paths  # type: ignore
+
+        if _RESAMPLE is None:
+            raise RuntimeError("Pillow is not available")
+
+        src_path = self._resolve_media_path(filename, subfolder, type_)
+        fps = max(0.1, float(fps))
+
+        container = av.open(str(src_path))
+        try:
+            stream = container.streams.video[0]
+            source_fps = float(stream.average_rate) if stream.average_rate else 24.0
+            step = max(1, round(source_fps / fps))
+
+            pil_frames = []
+            idx = 0
+            for frame in container.decode(stream):
+                t = float(frame.pts * stream.time_base) if frame.pts is not None else None
+                if t is not None:
+                    if t < start_time:
+                        idx += 1
+                        continue
+                    if end_time is not None and t > end_time:
+                        break
+                if idx % step == 0:
+                    im = frame.to_image()
+                    if max_width and im.width > max_width:
+                        ratio = max_width / im.width
+                        im = im.resize((max_width, max(1, round(im.height * ratio))), _RESAMPLE)
+                    pil_frames.append(im.convert("RGB"))
+                idx += 1
+        finally:
+            container.close()
+
+        if not pil_frames:
+            raise ValueError("No frames found in the specified range")
+
+        output_dir = folder_paths.get_output_directory()
+        full_output_folder, out_filename, counter, out_subfolder, _ = folder_paths.get_save_image_path(filename_prefix, output_dir)
+        save_name = f"{out_filename}_{counter:05}_.gif"
+        save_path = Path(full_output_folder) / save_name
+
+        duration_ms = max(20, round(1000 / fps))
+        pil_frames[0].save(
+            save_path,
+            format="GIF",
+            save_all=True,
+            append_images=pil_frames[1:],
+            duration=duration_ms,
+            loop=0,
+            optimize=True,
+        )
+        return {"filename": save_name, "subfolder": out_subfolder, "frame_count": len(pil_frames)}
+
+    def overlay_text_on_video(
+        self,
+        filename: str,
+        subfolder: str,
+        type_: str,
+        overlays: list,
+        filename_prefix: str = "video/wfm_edit",
+        delete_source: bool = False,
+        pips: list = None,
+    ) -> dict:
+        """Burns timed text overlays - and picture-in-picture overlay clips
+        (video or image, placed/scaled/faded on the frame) - into a video
+        (Video Edit tab, Phase 3 + overlay track).
+
+        ComfyUI core has no time-ranged video text node (core TextOverlay draws
+        on every frame of an IMAGE batch, top/bottom only), and routing the
+        whole timeline through IMAGE tensors would hold every decoded frame in
+        memory at once — so this streams instead: decode one frame, composite
+        any overlay whose [start, end) covers it, encode, repeat. Audio packets
+        are remuxed untouched (no audio re-encode), so the soundtrack built by
+        the export graph (original audio / BGM) survives this pass as-is.
+
+        overlays: [{text, start, end, font_size (% of frame height), color,
+        anchor ("<top|middle|bottom>-<left|center|right>"), outline, background}]
+        with start/end in seconds from the start of the video.
+
+        pips: [{filename, subfolder, type (input), kind ("video"|"image"),
+        src_start (in-file start, s), start (timeline s), length (s),
+        x, y (centre, fractions of the frame), scale (width as a fraction of
+        the frame width), opacity (0..1)}]. Overlay audio is not mixed.
+        Pips are drawn first (in list order), then text on top.
+        """
+        import av  # type: ignore
+        import folder_paths  # type: ignore
+
+        src_path = self._resolve_media_path(filename, subfolder, type_)
+        items = []
+        for ov in overlays or []:
+            try:
+                start = max(0.0, float(ov.get("start") or 0.0))
+                end = float(ov.get("end") or 0.0)
+            except (TypeError, ValueError):
+                continue
+            if end > start and str(ov.get("text") or "").strip():
+                items.append((start, end, ov))
+        valid_pips = []
+        for pip in pips or []:
+            try:
+                if float(pip["length"]) > 0 and float(pip["scale"]) > 0 and pip.get("filename"):
+                    valid_pips.append(pip)
+            except (KeyError, TypeError, ValueError):
+                continue
+        if not items and not valid_pips:
+            raise ValueError("No valid text or overlay clips")
+        # Resolve overlay files up front so a missing one fails before any encoding.
+        pip_paths = [
+            self._resolve_media_path(p["filename"], p.get("subfolder", ""), p.get("type", "input"))
+            for p in valid_pips
+        ]
+
+        output_dir = folder_paths.get_output_directory()
+        full_output_folder, out_filename, counter, out_subfolder, _ = folder_paths.get_save_image_path(filename_prefix, output_dir)
+        save_name = f"{out_filename}_{counter:05}_.mp4"
+        save_path = Path(full_output_folder) / save_name
+
+        in_c = av.open(str(src_path))
+        out_c = None
+        pip_sources = []
+        try:
+            in_v = in_c.streams.video[0]
+            in_a = in_c.streams.audio[0] if in_c.streams.audio else None
+            width, height = in_v.codec_context.width, in_v.codec_context.height
+            rate = in_v.average_rate or in_v.guessed_rate or 24
+
+            pip_sources = [_PipSource(path, pip, width, height) for path, pip in zip(pip_paths, valid_pips)]
+            layers = [(s, e, _render_text_layer(width, height, ov)) for s, e, ov in items]
+
+            out_c = av.open(str(save_path), mode="w")
+            out_v = out_c.add_stream("libx264", rate=rate)
+            out_v.width = width
+            out_v.height = height
+            out_v.pix_fmt = "yuv420p"
+            out_v.options = {"crf": "18", "preset": "medium"}
+            out_a = out_c.add_stream_from_template(in_a) if in_a is not None else None
+
+            streams = [in_v] + ([in_a] if in_a is not None else [])
+            first_pts = None
+            index = 0
+            for packet in in_c.demux(*streams):
+                if packet.stream.type == "audio":
+                    if packet.dts is None:
+                        continue
+                    packet.stream = out_a
+                    out_c.mux(packet)
+                    continue
+                for frame in packet.decode():
+                    if frame.pts is not None and first_pts is None:
+                        first_pts = frame.pts
+                    t = float((frame.pts - first_pts) * in_v.time_base) if frame.pts is not None else index / float(rate)
+                    active = [layer for s, e, layer in layers if s <= t < e]
+                    pip_layers = [pl for pl in (src.layer_at(t) for src in pip_sources) if pl is not None]
+                    if active or pip_layers:
+                        img = frame.to_image().convert("RGBA")
+                        for layer, left, top in pip_layers:
+                            _paste_layer(img, layer, left, top)
+                        for layer in active:
+                            img.alpha_composite(layer)
+                        out_frame = av.VideoFrame.from_image(img.convert("RGB"))
+                    else:
+                        out_frame = frame
+                    out_frame.pts = index
+                    out_frame.time_base = out_v.codec_context.time_base
+                    index += 1
+                    for out_packet in out_v.encode(out_frame):
+                        out_c.mux(out_packet)
+            for out_packet in out_v.encode(None):
+                out_c.mux(out_packet)
+        except BaseException:
+            if out_c is not None:
+                out_c.close()
+                out_c = None
+            save_path.unlink(missing_ok=True)
+            raise
+        finally:
+            if out_c is not None:
+                out_c.close()
+            for src in pip_sources:
+                src.close()
+            in_c.close()
+
+        # The export graph's intermediate file is only deleted when the caller
+        # explicitly asks and it's one of this tab's own "_pre" intermediates in
+        # output — never an arbitrary user file.
+        if delete_source and type_ == "output" and Path(filename).name.startswith("wfm_edit_pre"):
+            try:
+                src_path.unlink()
+            except OSError as e:
+                logger.warning("Could not delete intermediate %s: %s", src_path, e)
+
+        return {"filename": save_name, "subfolder": out_subfolder, "frame_count": index}
@@ -3,6 +3,17 @@
 import os
 import re

+# プロンプトを直接持つノードタイプ（CLIPTextEncode以外の複合ノード含む）
+_PROMPT_NODE_TYPES = {
+    "CLIPTextEncode", "CLIPTextEncodeSDXL", "CLIPTextEncodeSDXLRefiner",
+    "CLIPTextEncodeEditPlus", "TextEncodeQwenImageEditPlus", "TextEncodeMageFlowEdit",
+    "SDXLPromptStyler", "SDXLPromptStylerAdvanced", "ImageMetadataPromptLoader",
+    "WFS_PromptText", "ImpactWildcardEncode", "ImpactWildcardProcessor",
+}
+
+# 画像を最終出力として保存するノードタイプ
+_OUTPUT_IMAGE_NODE_TYPES = {"SaveImage", "SaveImageAdvanced"}
+
 # CLIPLoader / DualCLIPLoader の type フィールド → モデル種別マッピング
 _CLIP_TYPE_TO_MODEL = {
    "flux": "Flux",
@@ -181,25 +192,27 @@ def analyze_workflow(workflow_data, filename=""):
        if "hidream" in title:
            model_types.add("HiDream")

-        if ntype == "CLIPTextEncode" or "prompt" in title:
+        if ntype in _PROMPT_NODE_TYPES or "prompt" in title:
            inputs["prompts"] += 1
        if ntype in ("LoadImage", "LoadImageMask"):
            inputs["images"] += 1
        if ntype == "LoadVideo" or "load video" in title:
            inputs["videos"] += 1
-        if ntype == "SaveImage":
+        if ntype in _OUTPUT_IMAGE_NODE_TYPES:
            outputs["images"] += 1
        if ntype in ("SaveVideo", "VH_VideoCombine"):
            outputs["videos"] += 1

    # Detect workflow format
    if raw_nodes is not None:
-        # App format: UI-based structure with definitions (subgraphs) or linearMode
+        # App format: simplified web-app-style UI (linearMode) or .app.json filename.
+        # A workflow that merely *contains* subgraphs (definitions.subgraphs) is still a
+        # normal node graph (comfyui-workflow.js's convertUiToApi flattens subgraphs before
+        # conversion), so it's treated as "ui" here too — must match detectFormat() in
+        # static/js/comfyui-workflow.js or the App/UI badge shown to the user disagrees
+        # with what GenerateUI actually does with the file.
        extra = workflow_data.get("extra", {})
-        if (
-            "definitions" in workflow_data
-            or extra.get("linearMode") is True
-        ):
+        if extra.get("linearMode") is True:
            wf_format = "app"
        elif filename and filename.lower().endswith(".app.json"):
            wf_format = "app"
@@ -4,7 +4,7 @@ import jinja2
 from aiohttp import web
 from pathlib import Path

-from .config import TEMPLATES_DIR, STATIC_DIR, DATA_DIR, WORKFLOWS_DIR
+from .config import TEMPLATES_DIR, STATIC_DIR, DATA_DIR, WORKFLOWS_DIR, LAB_PLAN_DIR, VIDEO_PLAN_DIR

 logger = logging.getLogger(__name__)

@@ -41,6 +41,38 @@ async def serve_workflow_file(request: web.Request) -> web.Response:
    })


+async def serve_lab_plan_file(request: web.Request) -> web.Response:
+    """Serve files (index thumbnails) from the Lab plan directory."""
+    filename = request.match_info.get("filename", "")
+    if not filename or ".." in filename or "/" in filename or "\\" in filename:
+        return web.Response(status=404)
+
+    file_path = LAB_PLAN_DIR / filename
+    if not file_path.is_file():
+        return web.Response(status=404)
+
+    content_type, _ = mimetypes.guess_type(str(file_path))
+    return web.FileResponse(file_path, headers={
+        "Content-Type": content_type or "application/octet-stream",
+    })
+
+
+async def serve_video_plan_file(request: web.Request) -> web.Response:
+    """Serve files (index thumbnails) from the Video plan directory."""
+    filename = request.match_info.get("filename", "")
+    if not filename or ".." in filename or "/" in filename or "\\" in filename:
+        return web.Response(status=404)
+
+    file_path = VIDEO_PLAN_DIR / filename
+    if not file_path.is_file():
+        return web.Response(status=404)
+
+    content_type, _ = mimetypes.guess_type(str(file_path))
+    return web.FileResponse(file_path, headers={
+        "Content-Type": content_type or "application/octet-stream",
+    })
+
+
 class WorkflowStudio:
    """Main entry point for Workflow Studio plugin."""

@@ -57,15 +89,22 @@ class WorkflowStudio:
        # Dynamic workflow file serving (thumbnails etc.)
        app.router.add_get("/wfm_data/workflows/{filename}", serve_workflow_file)

+        # Dynamic Lab plan file serving (index thumbnails)
+        app.router.add_get("/wfm_data/lab_plan/{filename}", serve_lab_plan_file)
+
+        # Dynamic Video plan file serving (index thumbnails)
+        app.router.add_get("/wfm_data/video_plan/{filename}", serve_video_plan_file)
+
        # Main page
        app.router.add_get("/wfm", serve_index_page)

        # API routes
-        from .routes import workflow_routes, settings_routes, ollama_routes, eagle_routes, nodes_routes, prompts_routes, models_routes, gallery_routes, wildcard_routes, tagger_routes, gmic_routes
+        from .routes import workflow_routes, settings_routes, ollama_routes, unsloth_routes, eagle_routes, nodes_routes, prompts_routes, models_routes, gallery_routes, wildcard_routes, tagger_routes, gmic_routes, skill_routes, lab_routes, video_routes, vram_routes

        workflow_routes.setup_routes(app)
        settings_routes.setup_routes(app)
        ollama_routes.setup_routes(app)
+        unsloth_routes.setup_routes(app)
        eagle_routes.setup_routes(app)
        nodes_routes.setup_routes(app)
        prompts_routes.setup_routes(app)
@@ -74,5 +113,9 @@ class WorkflowStudio:
        wildcard_routes.setup_routes(app)
        tagger_routes.setup_routes(app)
        gmic_routes.setup_routes(app)
+        skill_routes.setup_routes(app)
+        lab_routes.setup_routes(app)
+        video_routes.setup_routes(app)
+        vram_routes.setup_routes(app)

        logger.info("Workflow Studio: Routes registered successfully")
@@ -1,8 +1,8 @@
 [project]
 name = "comfyui-workflow-studio"
 description = "A comprehensive workflow, asset management, and generation UI plugin for ComfyUI. Manage workflows, models, images, and prompts; batch generation and Image Feeder in the GenerateUI tab; library side panel with canvas drag & drop and AI tools."
-version = "0.3.76"
-license = "MIT"
+version = "0.8.2"
+license = { file = "LICENSE" }
 requires-python = ">= 3.10"
 dependencies = ["jinja2"]

@@ -19,3 +19,27 @@ piexif>=1.1.3
 # Omit if you do not use DeepDanbooru models.
 # TensorFlow is large (~600MB) and conflicts with some CUDA setups.
 # tensorflow>=2.10
+
+# -- Required to load UNSLOTH_API_KEY from a local .env file (Unsloth backend, AI TOOL tab) --
+python-dotenv>=1.0,<2.0
+
+# -- Multi-layer PSD export (Gallery tab bulk action) --
+# Pure-Python, ships prebuilt wheels (no C compiler required on Windows).
+psd-tools>=1.10
+
+# -- MP4 thumbnail generation (Gallery tab) --
+# Uses PyAV (av) to decode the first frame. ComfyUI core already requires av>=17.0.0,
+# so it is normally pre-installed in python_embeded and no action is needed here.
+# If missing, mp4 thumbnail generation simply fails and falls back to a placeholder
+# (Gallery itself keeps working). Not pinned here on purpose — see torch note above.
+# av>=17.0.0
+
+# -- Gallery Semantic Search: local EmbeddingGemma 2 (optional) --
+# Uses onnxruntime (above) + tokenizers + huggingface_hub (both normally pre-installed with ComfyUI's
+# transformers). The model (~300 MB, q4) is downloaded to the data folder on first use.
+# GPU (NVIDIA/CUDA): replace onnxruntime with onnxruntime-gpu
+#   pip uninstall onnxruntime onnxruntime-gpu
+#   pip install onnxruntime-gpu
+# Local EmbeddingGemma 2 then indexes ~45x faster than on the CPU. DirectML is not supported.
+# tokenizers
+# huggingface_hub
@@ -2,11 +2,45 @@
   Gallery Tab Styles
   ============================================================ */

+/* ── サブタブ (Output / Style-Prompt) ──────────────────────── */
+
+.wfm-gallery-subtab-nav {
+    display: flex;
+    border-bottom: 1px solid var(--wfm-border);
+    flex-shrink: 0;
+}
+
+.wfm-gallery-subtab-btn {
+    padding: 6px 16px;
+    font-size: 12px;
+    background: transparent;
+    border: none;
+    color: var(--wfm-text-secondary);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: color 0.15s;
+}
+
+.wfm-gallery-subtab-btn:hover { color: var(--wfm-text-primary); }
+.wfm-gallery-subtab-btn.active { color: var(--wfm-primary); border-bottom-color: var(--wfm-primary); }
+
+.wfm-gallery-panel {
+    display: none;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.wfm-gallery-panel.active { display: flex; }
+
 /* ── 3カラムレイアウト ──────────────────────────────────────── */

 .wfm-gallery-layout {
    display: flex;
-    height: calc(100vh - var(--wfm-header-height, 96px));
+    flex: 1;
+    min-height: 0;
    overflow: hidden;
    gap: 0;
 }
@@ -256,6 +290,24 @@
    color: #38bdf8;
 }

+/* 動画ファイル（mp4）の再生アイコンバッジ（サムネイル中央） */
+.wfm-gallery-thumb-video-badge {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(0,0,0,0.55);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    pointer-events: none;
+}
+
 /* テーブルビューのお気に入りボタン */
 .wfm-gallery-table-fav-btn {
    background: none;
@@ -431,43 +483,6 @@
    cursor: pointer;
 }

-.wfm-gallery-preview-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0,0,0,0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-.wfm-gallery-preview-wrapper:hover .wfm-gallery-preview-overlay {
-    opacity: 1;
-}
-
-.wfm-gallery-download-btn {
-    background: var(--wfm-accent, #4f8ef7);
-    border: none;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    transition: background 0.2s;
-}
-
-.wfm-gallery-download-btn:hover {
-    background: var(--wfm-accent-hover, #3f7fe7);
-}
-
 /* タブコンテンツ */
 .wfm-gallery-detail-tab-content {
    flex: 1;
@@ -499,6 +514,20 @@
    white-space: nowrap;
 }

+.wfm-gallery-image-prompt-text {
+    font-size: 12px;
+    color: var(--wfm-text-primary);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+    background: var(--wfm-bg-primary, #16213e);
+    border: 1px solid var(--wfm-border);
+    border-radius: 4px;
+    padding: 6px 8px;
+    max-height: 160px;
+    overflow-y: auto;
+}
+
 .wfm-gallery-tags-display {
    display: flex;
    flex-wrap: wrap;
@@ -788,6 +817,16 @@
    border-color: #6a4de0;
 }

+.wfm-gallery-action-btn-orange {
+    background: #f59e0b;
+    border-color: #f59e0b;
+    color: #1a1a2e;
+}
+.wfm-gallery-action-btn-orange:hover {
+    background: #d97f06;
+    border-color: #d97f06;
+}
+
 /* ── ファイル操作ボタン (詳細パネル) ─────────────────────────── */

 .wfm-gallery-file-actions {
@@ -828,8 +867,290 @@
    font-size: 13px;
 }

+.wfm-gallery-move-filter {
+    width: 100%;
+    padding: 6px 8px;
+    font-size: 13px;
+    box-sizing: border-box;
+}
+
 .wfm-gallery-move-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
 }
+
+/* ============================================================
+   ImagePrompt / Style_Catalog ギャラリー (右ペイン)
+   ============================================================ */
+
+.wfm-imageprompt-detail-panel {
+    width: 520px;
+    min-width: 520px;
+    max-width: 520px;
+    flex-direction: row;
+    overflow: hidden;
+}
+
+.wfm-imageprompt-detail-col {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.wfm-imageprompt-detail-col-left {
+    width: 280px;
+    min-width: 280px;
+    max-width: 280px;
+    overflow-y: auto;
+    border-right: 1px solid var(--wfm-border);
+    padding-bottom: 8px;
+}
+
+.wfm-imageprompt-detail-col-right {
+    flex: 1;
+    min-width: 0;
+    padding: 8px 10px;
+}
+
+.wfm-imageprompt-section {
+    padding: 8px 10px;
+}
+
+.wfm-imageprompt-prompt-box {
+    width: 100%;
+    resize: vertical;
+    font-size: 12px;
+    padding: 6px 8px;
+    background: var(--wfm-bg-primary, #16213e);
+    border: 1px solid var(--wfm-border);
+    border-radius: 4px;
+    color: var(--wfm-text-primary);
+    box-sizing: border-box;
+}
+
+.wfm-imageprompt-btn-row {
+    display: flex;
+    gap: 6px;
+    margin-top: 6px;
+}
+
+.wfm-imageprompt-btn-row .wfm-btn {
+    flex: 1;
+}
+
+.wfm-imageprompt-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 6px;
+    min-height: 24px;
+}
+
+.wfm-imageprompt-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 100%;
+    background: rgba(79,142,247,0.15);
+    color: var(--wfm-accent, #4f8ef7);
+    border: 1px solid rgba(79,142,247,0.3);
+    border-radius: 10px;
+    padding: 2px 4px 2px 8px;
+    font-size: 11px;
+}
+
+.wfm-imageprompt-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 220px;
+}
+
+.wfm-imageprompt-chip-remove {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0 2px;
+    font-size: 13px;
+    line-height: 1;
+    opacity: 0.7;
+}
+
+.wfm-imageprompt-chip-remove:hover { opacity: 1; }
+
+.wfm-imageprompt-final-section {
+    height: 100%;
+}
+
+.wfm-imageprompt-final-textarea {
+    margin-top: 4px;
+    flex: 1;
+    min-height: 0;
+    resize: none;
+}
+
+/* 音声ファイル: 波形画像＋<audio> コントロール */
+.wfm-gallery-audio-box {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    width: 100%;
+}
+.wfm-gallery-audio-wave {
+    object-fit: contain;
+    max-height: 220px;
+    background: #181c26;
+    border-radius: 6px;
+}
+.wfm-gallery-audio-player {
+    width: 100%;
+}
+
+/* 変換ダイアログ */
+.wfm-gallery-convert-modal {
+    min-width: 360px;
+    max-width: 480px;
+}
+.wfm-gallery-convert-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 8px 0;
+}
+.wfm-gallery-convert-row .wfm-select {
+    min-width: 150px;
+}
+.wfm-gallery-convert-check {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    margin: 6px 0;
+    font-size: 12px;
+}
+.wfm-gallery-convert-note,
+.wfm-gallery-convert-status {
+    font-size: 12px;
+    opacity: 0.8;
+    margin: 4px 0;
+}
+
+/* 音声: 詳細パネルのプレビュー枠は固定高さ(正方形)をやめ、波形＋プレイヤーを収める */
+.wfm-gallery-detail-preview--audio {
+    aspect-ratio: auto;
+    max-height: none;
+    overflow: visible;
+    padding: 8px;
+}
+.wfm-gallery-detail-preview--audio .wfm-gallery-audio-wave {
+    max-height: 150px;
+}
+
+/* ── セマンティック検索 ─────────────────────────────────────── */
+
+.wfm-gallery-sem-toggle.active {
+    background: var(--wfm-primary);
+    border-color: var(--wfm-primary);
+    color: #fff;
+}
+
+/* 2行目(Similar / 更新)のボタン: Taggerの紫と区別できるティール */
+.wfm-sem-sim {
+    background: #0d9488;
+    border-color: #0d9488;
+    color: #fff;
+}
+.wfm-sem-sim:hover {
+    background: #0f766e;
+    border-color: #0f766e;
+}
+/* 類似画像表示中(トグルON)は縁取りで状態を示す */
+#wfm-gallery-similar-btn.active {
+    box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #0d9488;
+}
+
+.wfm-gallery-sem-row {
+    gap: 6px;
+    align-items: center;
+    justify-content: flex-start;
+}
+.wfm-gallery-sem-count {
+    margin-left: 6px;
+    font-size: 12px;
+    opacity: 0.85;
+}
+
+.wfm-gallery-thumb-score {
+    position: absolute;
+    left: 4px;
+    bottom: 4px;
+    padding: 1px 5px;
+    border-radius: 8px;
+    background: rgba(13, 148, 136, 0.85);
+    color: #fff;
+    font-size: 10px;
+    line-height: 14px;
+    pointer-events: none;
+}
+
+.wfm-sem-modal { display: flex; flex-direction: column; gap: 10px; min-width: 420px; }
+.wfm-sem-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.wfm-sem-folder { font-family: monospace; font-size: 12px; word-break: break-all; opacity: 0.85; }
+.wfm-sem-hint { font-size: 11px; opacity: 0.7; margin: 0; }
+.wfm-sem-ok { color: #22c55e; }
+.wfm-sem-ng { color: #ef4444; }
+.wfm-sem-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.wfm-sem-bar { height: 8px; border-radius: 4px; background: var(--wfm-border, #444); overflow: hidden; }
+.wfm-sem-bar-fill { height: 100%; width: 0; background: #0d9488; transition: width 0.3s; }
+
+/* フォルダツリー: 直下の画像が全件セマンティック索引済みのフォルダに付くドット */
+.wfm-gallery-tree-sem-dot {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-left: 4px;
+    border-radius: 50%;
+    background: #22c55e;
+    vertical-align: middle;
+}
+
+/* モーダルのヘルプボタンから飛んだ先の説明を一時的に強調 */
+.wfm-help-flash {
+    animation: wfm-help-flash 2.5s ease-out;
+}
+@keyframes wfm-help-flash {
+    0%, 60% { background: rgba(13, 148, 136, 0.35); }
+    100% { background: transparent; }
+}
+
+.wfm-sem-local-opts { display: flex; flex-direction: column; gap: 10px; padding: 8px 10px; border: 1px solid var(--wfm-border, #444); border-radius: 6px; }
+
+/* セマンティック検索モーダル: タブ */
+.wfm-sem-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wfm-border, #444); }
+.wfm-sem-tab-btn {
+    padding: 6px 14px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    color: var(--wfm-text-secondary, #aaa);
+    cursor: pointer;
+    font-size: 13px;
+}
+.wfm-sem-tab-btn:hover { color: var(--wfm-text, #fff); }
+.wfm-sem-tab-btn.active {
+    color: var(--wfm-text, #fff);
+    background: var(--wfm-bg-secondary, #1a1a2e);
+    border-color: var(--wfm-border, #444);
+    margin-bottom: -1px;
+    border-bottom: 1px solid var(--wfm-bg-secondary, #1a1a2e);
+}
+.wfm-sem-pane { display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
+.wfm-sem-footer { justify-content: flex-end; border-top: 1px solid var(--wfm-border, #444); padding-top: 10px; }
+.wfm-sem-num { width: 80px; }
+.wfm-sem-danger { margin-left: auto; color: #ef4444; }
+
+.wfm-sem-row .wfm-select { width: auto; min-width: 90px; }
@@ -311,8 +311,8 @@

 .ie-layers-header {
    display: flex;
-    align-items: center;
-    gap: 2px;
+    flex-direction: column;
+    gap: 4px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--wfm-border);
    font-size: 11px;
@@ -323,7 +323,13 @@
    flex-shrink: 0;
 }

-.ie-layers-header > span {
+.ie-layers-header-row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.ie-layers-header-row > span {
    flex: 1;
 }

@@ -0,0 +1,413 @@
+/* Lab tab — experimental I2I batch generation with per-column keyframes */
+
+/* .wfm-gen-subtab-content.active defaults to flex-direction:row (main.css);
+   Lab needs its Setting/Results nav stacked above the panel body. */
+#wfm-gen-subtab-lab.active {
+    flex-direction: column;
+}
+
+.wfm-lab-subtab-nav {
+    display: flex;
+    border-bottom: 1px solid var(--wfm-border);
+    flex-shrink: 0;
+}
+
+.wfm-lab-subtab-btn {
+    padding: 6px 16px;
+    font-size: 12px;
+    background: transparent;
+    border: none;
+    color: var(--wfm-text-secondary);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: color 0.15s;
+}
+
+.wfm-lab-subtab-btn:hover { color: var(--wfm-text-primary); }
+.wfm-lab-subtab-btn.active { color: var(--wfm-primary); border-bottom-color: var(--wfm-primary); }
+
+.wfm-lab-panel {
+    display: none;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    height: calc(100% - 33px);
+}
+
+.wfm-lab-panel.active { display: flex; }
+
+.wfm-lab-planjson-toolbar {
+    display: flex;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--wfm-border);
+    flex-shrink: 0;
+}
+
+.wfm-lab-pane-header {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--wfm-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 4px 0 6px;
+    flex-shrink: 0;
+}
+
+/* ---------------- Setting layout: left | center (4 columns) | right ---------------- */
+
+.wfm-lab-setting-layout {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+    gap: 0;
+}
+
+.wfm-lab-pane {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 0;
+    border-right: 1px solid var(--wfm-border);
+    padding: 10px;
+}
+
+.wfm-lab-pane:last-child { border-right: none; }
+
+.wfm-lab-left { width: 220px; flex-shrink: 0; }
+.wfm-lab-center { flex: 1; padding: 0; }
+.wfm-lab-right { width: 260px; flex-shrink: 0; overflow-y: auto; }
+
+.wfm-lab-side-btns {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 12px;
+}
+
+.wfm-lab-plan-workflow-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
+    padding: 6px 8px;
+    background: var(--wfm-bg-secondary);
+    border: 1px solid var(--wfm-border);
+    border-radius: 4px;
+}
+
+.wfm-lab-plan-workflow-name {
+    flex: 1;
+    min-width: 0;
+    font-size: 11px;
+    color: var(--wfm-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wfm-lab-field-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.wfm-lab-field-row label {
+    font-size: 12px;
+    color: var(--wfm-text-secondary);
+    white-space: nowrap;
+}
+
+.wfm-lab-field-row input {
+    flex: 1;
+    min-width: 0;
+}
+
+.wfm-lab-note {
+    width: 100%;
+    resize: vertical;
+    font-size: 12px;
+}
+
+.wfm-lab-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--wfm-text-secondary);
+    cursor: pointer;
+}
+
+/* ---------------- Keyframe columns ---------------- */
+
+.wfm-lab-columns {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+}
+
+.wfm-lab-column {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--wfm-border);
+    overflow: hidden;
+}
+
+.wfm-lab-column:last-child { border-right: none; }
+
+.wfm-lab-col-header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 4px;
+    row-gap: 4px;
+    padding: 6px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--wfm-text-secondary);
+    border-bottom: 1px solid var(--wfm-border);
+    flex-shrink: 0;
+}
+
+.wfm-lab-col-btns { display: flex; gap: 2px; }
+
+.wfm-lab-col-header-left {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+/* Model column header: C/L/V toggle that switches which single field its cells
+   summarize (see _modelViewMode in lab-tab.js) — not part of the Plan data. */
+.wfm-lab-model-view-toggle { display: flex; gap: 2px; }
+
+.wfm-lab-model-view-btn {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    background: var(--wfm-bg-tertiary);
+    border: 1px solid var(--wfm-border);
+    border-radius: var(--wfm-radius-sm);
+    color: var(--wfm-text-secondary);
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.wfm-lab-model-view-btn:hover { color: var(--wfm-text-primary); border-color: var(--wfm-primary); }
+
+.wfm-lab-model-view-btn.active {
+    color: #fff;
+    background: var(--wfm-primary);
+    border-color: var(--wfm-primary);
+}
+
+.wfm-lab-col-cells {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.wfm-lab-cell {
+    border: 1px solid var(--wfm-border);
+    border-radius: var(--wfm-radius-sm);
+    padding: 6px 8px;
+    font-size: 11px;
+    cursor: pointer;
+    background: var(--wfm-bg-tertiary);
+    transition: border-color 0.15s;
+}
+
+.wfm-lab-cell:hover { border-color: var(--wfm-primary); }
+
+.wfm-lab-cell-index {
+    font-weight: 600;
+    color: var(--wfm-primary);
+    margin-right: 4px;
+}
+
+.wfm-lab-cell-value {
+    color: var(--wfm-text-primary);
+    word-break: break-all;
+}
+
+.wfm-lab-cell.wfm-lab-cell-revert .wfm-lab-cell-value {
+    color: var(--wfm-text-secondary);
+    font-style: italic;
+}
+
+/* Setting 1, not yet explicitly overridden: showing the live GenerateUI value instead of
+   its own stored one (see _isLiveDisplay in lab-tab.js). Dashed border distinguishes it
+   from a saved override (solid border) at a glance. */
+.wfm-lab-cell.wfm-lab-cell-live {
+    border-style: dashed;
+}
+
+.wfm-lab-cell.wfm-lab-cell-live .wfm-lab-cell-value {
+    color: var(--wfm-text-secondary);
+}
+
+/* This keyframe row is skipped entirely (see _resolveKeyframe's bypassed handling) —
+   amber to read as "temporarily disabled", distinct from the neutral gray used for
+   revert/live. Takes priority over both of those in _cellHtml. */
+.wfm-lab-cell.wfm-lab-cell-bypassed {
+    border-color: var(--wfm-warning);
+    opacity: 0.6;
+}
+
+.wfm-lab-cell.wfm-lab-cell-bypassed .wfm-lab-cell-value {
+    color: var(--wfm-warning);
+}
+
+/* LoRA node-bypass (strength forced to 0 at apply-time) — red to distinguish from the
+   amber row-level bypassed above; the row itself still applies, only the LoRA doesn't. */
+.wfm-lab-cell.wfm-lab-cell-node-bypassed {
+    border-color: var(--wfm-danger);
+}
+
+.wfm-lab-cell.wfm-lab-cell-node-bypassed .wfm-lab-cell-value {
+    color: var(--wfm-danger);
+}
+
+/* Single-click selection target for the column header's up/down reorder buttons —
+   layered as a box-shadow (not border-color) so it never conflicts with the
+   revert/live/bypassed/node-bypassed border-color signaling above. */
+.wfm-lab-cell.wfm-lab-cell-selected {
+    box-shadow: 0 0 0 2px var(--wfm-primary);
+}
+
+.wfm-lab-cell-applied {
+    margin-top: 3px;
+    padding-top: 3px;
+    border-top: 1px dashed var(--wfm-border);
+    font-size: 10px;
+    color: var(--wfm-text-secondary);
+}
+
+/* Shown instead of a keyframe list when the loaded workflow has no node this Model
+   sub-column (checkpoint/lora/vae) could override — see _hasNodeForColumn in lab-tab.js. */
+.wfm-lab-cell-empty {
+    padding: 6px 8px;
+    font-size: 11px;
+    font-style: italic;
+    color: var(--wfm-text-secondary);
+    cursor: default;
+}
+
+.wfm-lab-cell-prompt-line {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+/* ---------------- Modal form (checkpoint/vae/prompt/ksampler edit) ---------------- */
+
+.wfm-lab-modal-row {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 10px;
+}
+
+.wfm-lab-modal-row label {
+    font-size: 12px;
+    color: var(--wfm-text-secondary);
+}
+
+.wfm-lab-modal-inline {
+    display: flex;
+    gap: 8px;
+}
+
+.wfm-lab-modal-btnrow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 10px;
+}
+
+.wfm-lab-modal-hint {
+    font-size: 11px;
+    color: var(--wfm-text-secondary);
+    font-style: italic;
+    margin: 0 0 10px;
+}
+
+.wfm-lab-modal-inline > div {
+    flex: 1;
+    min-width: 0;
+}
+
+.wfm-lab-modal-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+/* ---------------- Results layout ---------------- */
+
+.wfm-lab-results-layout {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+}
+
+.wfm-lab-results-left {
+    width: 260px;
+    flex-shrink: 0;
+    border-right: 1px solid var(--wfm-border);
+    padding: 10px;
+}
+
+.wfm-lab-results-center {
+    flex: 1;
+    min-width: 0;
+    padding: 10px;
+    overflow-y: auto;
+}
+
+.wfm-lab-results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 8px;
+}
+
+.wfm-lab-result-thumb {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    border-radius: var(--wfm-radius-sm);
+    border: 1px solid var(--wfm-border);
+    cursor: pointer;
+    transition: border-color 0.15s;
+}
+
+.wfm-lab-result-thumb:hover { border-color: var(--wfm-primary); }
+
+.wfm-lab-result-item { position: relative; }
+
+.wfm-lab-result-index {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: var(--wfm-radius-sm);
+}
@@ -653,8 +653,8 @@ body {
    align-items: center;
 }

+.wfm-lora-bypass-btn,
 .wfm-lora-refresh-btn {
-    margin-left: auto;
    font-size: 13px;
    line-height: 1;
    padding: 2px 5px;
@@ -662,8 +662,21 @@ body {
    text-transform: none;
    letter-spacing: 0;
 }
+.wfm-lora-bypass-btn {
+    margin-left: auto;
+}
+.wfm-lora-bypass-btn:hover,
 .wfm-lora-refresh-btn:hover { opacity: 1; }

+/* Bypass is active for the current LoRA target node: strength forced to 0 (see
+   comfyui-editor.js renderLoraPane / _loraNodeBypass). */
+.wfm-lora-bypass-btn.active {
+    opacity: 1;
+    background: var(--wfm-danger);
+    border-color: var(--wfm-danger);
+    color: #fff;
+}
+
 .wfm-gen-lora-col-body {
    flex: 1;
    overflow-y: auto;
@@ -2342,6 +2355,280 @@ body {
    flex-shrink: 0;
 }

+/* Col3 (Wildcard/Style) タブ切り替え */
+.wfm-prompt-col3-tabs {
+    display: flex;
+    background: var(--wfm-surface);
+    border-bottom: 1px solid var(--wfm-border);
+    flex-shrink: 0;
+}
+.wfm-prompt-col3-tab {
+    flex: 1;
+    padding: 8px 4px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--wfm-text-secondary);
+    font-size: 13px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.wfm-prompt-col3-tab:hover { color: var(--wfm-text); }
+.wfm-prompt-col3-tab.active {
+    color: var(--wfm-text);
+    border-bottom-color: var(--wfm-primary);
+}
+.wfm-prompt-col3-tab-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+/* Prompt タブ: Form / Table 切り替え */
+.wfm-prompt-toplevel-nav {
+    display: flex;
+    border-bottom: 1px solid var(--wfm-border);
+    flex-shrink: 0;
+}
+.wfm-prompt-toplevel-tab {
+    padding: 6px 16px;
+    font-size: 12px;
+    background: transparent;
+    border: none;
+    color: var(--wfm-text-secondary);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: color 0.15s;
+}
+.wfm-prompt-toplevel-tab:hover { color: var(--wfm-text-primary); }
+.wfm-prompt-toplevel-tab.active { color: var(--wfm-primary); border-bottom-color: var(--wfm-primary); }
+
+.wfm-prompt-panel {
+    display: none;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+.wfm-prompt-panel.active { display: flex; }
+
+/* Table パネル内サブタブ (Presets / Wildcards / Style) */
+.wfm-prompt-table-subnav {
+    display: flex;
+    background: var(--wfm-surface);
+    border-bottom: 1px solid var(--wfm-border);
+    flex-shrink: 0;
+}
+.wfm-prompt-table-subtab {
+    padding: 8px 16px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--wfm-text-secondary);
+    font-size: 13px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.wfm-prompt-table-subtab:hover { color: var(--wfm-text); }
+.wfm-prompt-table-subtab.active { color: var(--wfm-text); border-bottom-color: var(--wfm-primary); }
+
+.wfm-prompt-table-pane {
+    display: none;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+.wfm-prompt-table-pane.active { display: flex; }
+
+.wfm-prompt-table-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    padding: 8px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--wfm-border);
+}
+
+.wfm-prompt-table-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+
+/* 編集可能テーブル (Presets / Wildcards / Style 共通) */
+.wfm-prompt-edit-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+.wfm-prompt-edit-table th,
+.wfm-prompt-edit-table td {
+    border-bottom: 1px solid var(--wfm-border);
+    padding: 4px 6px;
+    vertical-align: top;
+}
+.wfm-prompt-edit-table th {
+    position: sticky;
+    top: 0;
+    background: var(--wfm-surface);
+    text-align: left;
+    font-size: 11px;
+    color: var(--wfm-text-secondary);
+    z-index: 1;
+}
+.wfm-prompt-edit-table tbody tr:hover td {
+    background: var(--wfm-surface);
+}
+.wfm-prompt-edit-input,
+.wfm-prompt-edit-textarea {
+    width: 100%;
+    box-sizing: border-box;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    color: var(--wfm-text);
+    font-size: 12px;
+    padding: 3px 5px;
+    font-family: inherit;
+}
+.wfm-prompt-edit-textarea {
+    min-height: 40px;
+    resize: vertical;
+}
+.wfm-prompt-edit-input:hover,
+.wfm-prompt-edit-textarea:hover {
+    border-color: var(--wfm-border);
+}
+.wfm-prompt-edit-input:focus,
+.wfm-prompt-edit-textarea:focus {
+    outline: none;
+    border-color: var(--wfm-primary);
+    background: var(--wfm-bg);
+}
+@keyframes wfm-prompt-cell-flash {
+    0% { background: rgba(74, 158, 255, 0.3); }
+    100% { background: transparent; }
+}
+.wfm-prompt-edit-cell-saved {
+    animation: wfm-prompt-cell-flash 0.7s ease;
+}
+.wfm-prompt-edit-fav-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--wfm-text-secondary);
+    padding: 2px;
+    line-height: 1;
+}
+.wfm-prompt-edit-fav-btn.active { color: #ffd700; }
+.wfm-prompt-edit-batch-btn.active { color: #f0c040; }
+.wfm-prompt-edit-row-new td { background: rgba(74, 158, 255, 0.06); }
+.wfm-prompt-edit-file-badge {
+    font-size: 10px;
+    color: var(--wfm-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+}
+.wfm-prompt-edit-empty {
+    padding: 24px;
+    text-align: center;
+    color: var(--wfm-text-secondary);
+    font-size: 12px;
+}
+
+/* ダブルクリックで開くプロンプト編集モーダル (Presets / Wildcards / Style 共通) */
+.wfm-prompt-modal-toggle {
+    display: flex;
+    gap: 6px;
+}
+.wfm-prompt-modal-textarea {
+    width: 100%;
+    box-sizing: border-box;
+    min-height: 320px;
+    resize: vertical;
+    margin-top: 8px;
+}
+.wfm-prompt-modal-actions {
+    display: flex;
+    gap: 6px;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+
+/* #(自動採番)列: クリックで行選択 → 上部の Delete ボタンで一括削除 */
+.wfm-prompt-edit-num-cell {
+    text-align: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    color: var(--wfm-text-secondary);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.wfm-prompt-edit-num-cell:hover {
+    color: var(--wfm-text);
+    background: var(--wfm-surface-2, var(--wfm-surface));
+}
+.wfm-prompt-edit-table tbody tr.wfm-prompt-edit-row-selected td {
+    background: rgba(255, 69, 58, 0.14);
+}
+.wfm-prompt-edit-table tbody tr.wfm-prompt-edit-row-selected .wfm-prompt-edit-num-cell {
+    color: var(--wfm-danger);
+    font-weight: bold;
+}
+.wfm-prompt-edit-num-cell-new {
+    display: flex;
+    gap: 2px;
+    justify-content: center;
+}
+.wfm-prompt-edit-inline-add-btn,
+.wfm-prompt-edit-inline-cancel-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 2px 3px;
+    line-height: 1;
+    border-radius: 3px;
+}
+.wfm-prompt-edit-inline-add-btn { color: var(--wfm-primary); }
+.wfm-prompt-edit-inline-add-btn:hover { background: var(--wfm-primary); color: #fff; }
+.wfm-prompt-edit-inline-cancel-btn { color: var(--wfm-text-secondary); }
+.wfm-prompt-edit-inline-cancel-btn:hover { color: var(--wfm-danger); }
+
+/* Presets Group テーブル: プリセットバッジ */
+.wfm-prompt-edit-preset-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    background: var(--wfm-surface);
+    border: 1px solid var(--wfm-border);
+    border-radius: 10px;
+    padding: 2px 4px 2px 8px;
+    font-size: 11px;
+    margin: 2px 3px 2px 0;
+}
+.wfm-prompt-edit-badge-remove {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--wfm-text-secondary);
+    font-size: 10px;
+    padding: 1px 3px;
+    line-height: 1;
+}
+.wfm-prompt-edit-badge-remove:hover { color: var(--wfm-danger); }
+
 /* Ollama Assistant */
 .wfm-ollama-assistant {
    display: flex;
@@ -2885,6 +3172,29 @@ body {
   Image Input (I2I) Slots
   ============================================ */

+/* Container/header styling comes from .wfm-settings-section / .wfm-settings-summary
+   (shared details/summary accordion used by the Settings tab) — collapsed by default
+   since this is a low-frequency feature. */
+
+.wfm-i2i-placeholder-mode {
+    display: flex;
+    gap: 16px;
+    font-size: 12px;
+    margin-bottom: 8px;
+}
+
+.wfm-i2i-placeholder-mode label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+}
+
+.wfm-i2i-placeholder-fields input[type="color"] {
+    padding: 2px;
+    height: 30px;
+}
+
 .wfm-i2i-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
@@ -2948,6 +3258,12 @@ body {
    background: rgba(74, 158, 255, 0.08);
 }

+.wfm-i2i-drop-zone.wfm-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: default;
+}
+
 .wfm-i2i-drop-label {
    font-size: 12px;
    color: var(--wfm-text-secondary);
@@ -3175,13 +3491,29 @@ body {

 .wfm-help-page {
    display: none;
-    max-width: 760px;
+    /* 上部タブバー(AI TOOLタブの右端)あたりまで広げ、折り返しを減らす。狭い画面では領域幅に収まる */
+    max-width: 1076px;
 }

 .wfm-help-page.active {
    display: block;
 }

+.wfm-help-article-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 14px;
+}
+
+.wfm-help-article-header h2 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--wfm-text);
+    margin: 0;
+}
+
 .wfm-help-card {
    background: var(--wfm-surface);
    border: 1px solid var(--wfm-border);
@@ -4942,15 +5274,12 @@ body {
   Metadata Tab
   ============================================ */

-#wfm-tab-metadata {
-    overflow: hidden;
-}
-
 .wfm-metadata-layout {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    gap: 0;
-    height: 100%;
+    flex: 1;
+    min-height: 0;
    overflow: hidden;
 }

@@ -5624,6 +5953,23 @@ body {
    object-fit: cover;
 }

+.wfm-ai-chat-svg-wrapper {
+    margin-top: 6px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+}
+
+.wfm-ai-chat-svg-img {
+    max-width: 240px;
+    max-height: 240px;
+    border-radius: 6px;
+    border: 1px solid var(--wfm-border);
+    background: #fff;
+    padding: 6px;
+}
+
 .wfm-ai-chat-attachment {
    display: flex;
    align-items: center;
@@ -5697,3 +6043,118 @@ body {
    align-items: center;
    gap: 6px;
 }
+
+.wfm-ai-chat-skill-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px 0;
+    flex-shrink: 0;
+}
+
+.wfm-ai-chat-skill-select {
+    flex: 1;
+    min-width: 0;
+}
+
+.wfm-ai-skill-panel {
+    margin: 6px 8px 0;
+    padding: 8px;
+    border: 1px solid var(--wfm-border);
+    border-radius: var(--wfm-radius);
+    background: var(--wfm-surface);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.wfm-ai-skill-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.wfm-ai-skill-panel-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--wfm-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+/* Workflow detail modal — GenerateUI compatibility check row */
+.wfm-compat-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+}
+.wfm-compat-result {
+    display: inline-flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    font-size: 12px;
+    color: var(--wfm-text-secondary);
+}
+.wfm-compat-badge {
+    position: relative;
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 12px;
+    border: 1px solid var(--wfm-border);
+    background: var(--wfm-bg);
+    color: var(--wfm-text);
+    cursor: help;
+}
+.wfm-compat-ok { border-color: #3a8a3a; }
+.wfm-compat-warn { border-color: #c08a20; }
+.wfm-compat-error { border-color: var(--wfm-danger, #c04040); }
+.wfm-compat-skip { opacity: 0.6; }
+.wfm-compat-badge:hover::after,
+.wfm-compat-badge:focus::after {
+    content: attr(data-tip);
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 1000;
+    width: max-content;
+    max-width: min(520px, 80vw);
+    padding: 8px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--wfm-border);
+    background: var(--wfm-bg-secondary, var(--wfm-bg));
+    color: var(--wfm-text);
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: pre-line;
+    text-align: left;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+}
+
+/* Side panel — format + GenerateUI compatibility badges row (below the title) */
+.wfm-side-compat-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    padding: 4px 10px 6px;
+    min-height: 26px;
+    flex-shrink: 0;
+}
+.wfm-side-compat-row .wfm-format-badge:empty { display: none; }
+/* The side panel clips overflow, so anchor tips to the whole row and span the panel width */
+.wfm-side-compat-row { position: relative; }
+.wfm-compat-result--right .wfm-compat-badge { position: static; }
+.wfm-compat-result--right .wfm-compat-badge:hover::after,
+.wfm-compat-result--right .wfm-compat-badge:focus::after {
+    left: 6px;
+    right: 6px;
+    top: 100%;
+    width: auto;
+    max-width: none;
+}
+.wfm-compat-row .wfm-format-badge:empty { display: none; }
@@ -250,6 +250,14 @@
    z-index: 1;
 }

+#wfm-tagger-db-th-select, td.wfm-tagger-db-select {
+    text-align: center;
+}
+
+#wfm-tagger-db-th-select input, .wfm-tagger-db-select input {
+    vertical-align: middle;
+}
+
 .wfm-tagger-db-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
@@ -0,0 +1,208 @@
+/**
+ * Shared AI backend settings modal (Backend / Connection / Model / Generation / Unload / Save).
+ * Used by the Prompt tab and Tagger tab, each with its own localStorage key so their
+ * settings stay independent — mirrors the AI TOOL tab's own settings pane (ai-tab.js).
+ */
+
+import { openModal, closeModal, showToast } from "./app.js";
+import { t } from "./i18n.js";
+import { readJsonStorage, getAiBackendDefaultUrl, unslothProxy, unloadAiModel } from "./util.js";
+import { unloadAllOllamaModels } from "./vram-prepare.js";
+
+function loadCfg(storageKey) {
+    return readJsonStorage(storageKey);
+}
+
+function saveCfg(storageKey, patch) {
+    const data = { ...loadCfg(storageKey), ...patch };
+    localStorage.setItem(storageKey, JSON.stringify(data));
+    return data;
+}
+
+// 保存済み設定を {backend, url, model, thinkingMode, maxTokens} の形で返す
+export function getAiBackendConfig(storageKey) {
+    const s = loadCfg(storageKey);
+    const backend = s.backend || "ollama";
+    const url = (s.backendUrl || getAiBackendDefaultUrl(backend)).replace(/\/$/, "");
+    return {
+        backend,
+        url,
+        model: s.model || "",
+        thinkingMode: !!s.thinkingMode,
+        maxTokens: Math.max(0, parseInt(s.maxTokens, 10) || 0),
+    };
+}
+
+function isValidBackendUrl(url) {
+    try {
+        const u = new URL(url);
+        return u.protocol === "http:" || u.protocol === "https:";
+    } catch {
+        return false;
+    }
+}
+
+async function fetchBackendModels(url, backend) {
+    if (backend === "ollama") {
+        const res = await fetch(`${url}/api/tags`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return (await res.json()).models?.map(m => m.name) || [];
+    } else if (backend === "unsloth") {
+        const data = await unslothProxy(url, "/v1/models", "GET");
+        return (data.data || []).map(m => m.id);
+    } else {
+        const res = await fetch(`${url}/v1/models`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return ((await res.json()).data || []).map(m => m.id);
+    }
+}
+
+/**
+ * @param {string} storageKey localStorage key holding {backend, backendUrl, model, thinkingMode, maxTokens}
+ * @param {string} title modal title
+ * @param {() => void} [onSaved] called after Save persists the config (e.g. to refresh a status label)
+ */
+export function openAiBackendSettingsModal(storageKey, title, onSaved) {
+    const saved = loadCfg(storageKey);
+    const backend = saved.backend || "ollama";
+
+    const html = `
+        <div class="wfm-ai-settings-container">
+            <div class="wfm-ai-settings-section">
+                <div class="wfm-ai-settings-title">${t("aiSettingsBackend")}</div>
+                <div class="wfm-ai-backend-row">
+                    ${[["ollama", "Ollama"], ["lmstudio", "LM Studio"], ["lemonade", "Lemonade"], ["unsloth", "Unsloth"]].map(([v, label]) => `
+                        <label class="wfm-ai-radio-label">
+                            <input type="radio" name="wfm-aism-backend" value="${v}" ${v === backend ? "checked" : ""}> ${label}
+                        </label>`).join("")}
+                </div>
+            </div>
+            <div class="wfm-ai-settings-section">
+                <div class="wfm-ai-settings-title">${t("aiSettingsConnection")}</div>
+                <div class="wfm-ai-settings-row">
+                    <label class="wfm-ai-label">URL</label>
+                    <input type="text" id="wfm-aism-url" class="wfm-input wfm-ai-url-input" value="${saved.backendUrl || getAiBackendDefaultUrl(backend)}">
+                </div>
+                <div class="wfm-ai-settings-row">
+                    <button id="wfm-aism-test-btn" class="wfm-btn">${t("aiSettingsTestBtn")}</button>
+                    <button id="wfm-aism-unload-btn" class="wfm-btn">${t("aiUnloadModel")}</button>
+                </div>
+                <div class="wfm-ai-settings-row">
+                    <span id="wfm-aism-test-result" class="wfm-ai-test-result"></span>
+                </div>
+            </div>
+            <div class="wfm-ai-settings-section">
+                <div class="wfm-ai-settings-title">${t("aiSettingsModelSection")}</div>
+                <div class="wfm-ai-settings-row">
+                    <select id="wfm-aism-model" class="wfm-select wfm-ai-model-select">
+                        <option value="">${t("selectModel")}</option>
+                    </select>
+                    <button id="wfm-aism-refresh-btn" class="wfm-btn">${t("aiSettingsRefreshBtn")}</button>
+                </div>
+            </div>
+            <div class="wfm-ai-settings-section">
+                <div class="wfm-ai-settings-title">${t("aiSettingsGenerationTitle")}</div>
+                <div class="wfm-ai-settings-row">
+                    <label class="wfm-ai-label" style="display:flex;align-items:center;gap:6px;cursor:pointer;">
+                        <input type="checkbox" id="wfm-aism-thinking"> ${t("aiSettingsThinkingMode")}
+                    </label>
+                </div>
+                <div class="wfm-ai-settings-row">
+                    <label class="wfm-ai-label">${t("aiSettingsMaxTokens")}</label>
+                    <input type="number" id="wfm-aism-max-tokens" class="wfm-input" min="0" step="1" placeholder="${t("aiSettingsMaxTokensPlaceholder")}">
+                </div>
+            </div>
+            <div class="wfm-ai-settings-section">
+                <button id="wfm-aism-save-btn" class="wfm-btn wfm-btn-primary">${t("aiSettingsSaveBtn")}</button>
+            </div>
+        </div>`;
+
+    openModal(title, html);
+
+    const urlInput = document.getElementById("wfm-aism-url");
+    const modelSelect = document.getElementById("wfm-aism-model");
+    const thinkingCheckbox = document.getElementById("wfm-aism-thinking");
+    const maxTokensInput = document.getElementById("wfm-aism-max-tokens");
+    const testResultEl = document.getElementById("wfm-aism-test-result");
+
+    thinkingCheckbox.checked = !!saved.thinkingMode;
+    if (saved.maxTokens) maxTokensInput.value = saved.maxTokens;
+
+    function currentBackend() {
+        return document.querySelector("input[name='wfm-aism-backend']:checked")?.value || "ollama";
+    }
+
+    async function populateModels(selectedModel) {
+        const url = urlInput.value.trim();
+        try {
+            const models = await fetchBackendModels(url, currentBackend());
+            modelSelect.innerHTML = models.length
+                ? models.map(name => `<option value="${name}" ${name === selectedModel ? "selected" : ""}>${name}</option>`).join("")
+                : `<option value="">${t("noModelsFound")}</option>`;
+        } catch {
+            modelSelect.innerHTML = `<option value="">${t("noModelsFound")}</option>`;
+        }
+    }
+    populateModels(saved.model || "");
+
+    document.querySelectorAll("input[name='wfm-aism-backend']").forEach(r => {
+        r.addEventListener("change", () => {
+            urlInput.value = getAiBackendDefaultUrl(r.value);
+            testResultEl.textContent = "";
+        });
+    });
+
+    document.getElementById("wfm-aism-refresh-btn")?.addEventListener("click", () => populateModels(modelSelect.value));
+
+    document.getElementById("wfm-aism-test-btn")?.addEventListener("click", async () => {
+        const url = urlInput.value.trim();
+        if (!isValidBackendUrl(url)) {
+            testResultEl.textContent = t("aiToastInvalidUrlInput");
+            testResultEl.className = "wfm-ai-test-result wfm-ai-status-error";
+            return;
+        }
+        testResultEl.textContent = t("aiStatusConnecting");
+        testResultEl.className = "wfm-ai-test-result wfm-ai-status-working";
+        try {
+            const models = await fetchBackendModels(url, currentBackend());
+            testResultEl.textContent = `${t("aiStatusConnectOk")} (${models.length} ${t("aiModels")})`;
+            testResultEl.className = "wfm-ai-test-result wfm-ai-status-ok";
+            await populateModels(modelSelect.value);
+        } catch (err) {
+            testResultEl.textContent = `${t("aiStatusConnectFail")}${err.message}`;
+            testResultEl.className = "wfm-ai-test-result wfm-ai-status-error";
+        }
+    });
+
+    document.getElementById("wfm-aism-unload-btn")?.addEventListener("click", async () => {
+        const url = urlInput.value.trim();
+        const model = modelSelect.value;
+        // Ollama: unload every loaded model incl. decision models (same server step as Settings → VRAM Management)
+        if (currentBackend() === "ollama") { await unloadAllOllamaModels(url); return; }
+        if (!model) { showToast(t("aiUnloadNoModel"), "error"); return; }
+        try {
+            await unloadAiModel(url, currentBackend(), model);
+            showToast(t("aiUnloadDone"), "success");
+        } catch (err) {
+            showToast(err.message === "UNSUPPORTED" ? t("aiUnloadUnsupported") : t("aiUnloadFailed") + err.message, "error");
+        }
+    });
+
+    document.getElementById("wfm-aism-save-btn")?.addEventListener("click", () => {
+        const url = urlInput.value.trim();
+        if (url && !isValidBackendUrl(url)) {
+            showToast(t("aiToastInvalidUrl"), "error");
+            return;
+        }
+        saveCfg(storageKey, {
+            backend: currentBackend(),
+            backendUrl: url,
+            model: modelSelect.value,
+            thinkingMode: !!thinkingCheckbox.checked,
+            maxTokens: Math.max(0, parseInt(maxTokensInput.value, 10) || 0),
+        });
+        showToast(t("aiToastSettingsSaved"), "success");
+        closeModal();
+        if (onSaved) onSaved();
+    });
+}
@@ -5,7 +5,8 @@

 import { showToast } from "./app.js";
 import { t } from "./i18n.js";
-import { readJsonStorage, getAiBackendDefaultUrl } from "./util.js";
+import { readJsonStorage, getAiBackendDefaultUrl, escapeHtml, unloadAiModel } from "./util.js";
+import { unloadAllOllamaModels } from "./vram-prepare.js";
 import { comfyUI } from "./comfyui-client.js";
 import { comfyEditor } from "./comfyui-editor.js";
 import { comfyWorkflow } from "./comfyui-workflow.js";
@@ -50,33 +51,102 @@ function fileToBase64(file) {
    });
 }

-async function callVLM(url, backend, model, prompt, base64Image, mimeType) {
+// ============================================
+// Thinking mode / Max tokens (shared by callLLM / callChat / callVLM)
+// ============================================
+
+// Ollamaは `think` (bool) と `options.num_predict` で制御できるが、
+// LM Studio/LemonadeはOpenAI互換APIのため max_tokens のみ標準対応。
+// thinking mode切替は非対応バックエンド／モデル向けに、出力からの
+// <think>タグ除去でも担保する（stripThinkingTagsを参照）。
+function _applyGenOptions(body, backend, settings) {
+    const maxTokens = parseInt(settings?.maxTokens, 10);
+    if (backend === "ollama") {
+        body.think = !!settings?.thinkingMode;
+        if (maxTokens > 0) body.options = { ...(body.options || {}), num_predict: maxTokens };
+    } else if (maxTokens > 0) {
+        body.max_tokens = maxTokens;
+    }
+    return body;
+}
+
+function stripThinkingTags(text) {
+    return (text || "")
+        .replace(/<think>[\s\S]*?<\/think>/gi, "")
+        .replace(/<thinking>[\s\S]*?<\/thinking>/gi, "")
+        .trim();
+}
+
+async function callVLM(url, backend, model, prompt, base64Image, mimeType, settings = {}) {
    if (backend === "ollama") {
        const res = await fetch(`${url}/api/generate`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ model, prompt, images: [base64Image], stream: false }),
+            body: JSON.stringify(_applyGenOptions({ model, prompt, images: [base64Image], stream: false }, backend, settings)),
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        return (await res.json()).response || "";
+        const text = (await res.json()).response || "";
+        return settings.thinkingMode ? text : stripThinkingTags(text);
+    } else if (backend === "unsloth") {
+        const body = _applyGenOptions({
+            model,
+            messages: [{ role: "user", content: [
+                { type: "text", text: prompt },
+                { type: "image_url", image_url: { url: `data:${mimeType};base64,${base64Image}` } },
+            ]}],
+            stream: false,
+        }, backend, settings);
+        const data = await unslothProxy(url, "/v1/chat/completions", "POST", body);
+        const text = _unslothContent(data.choices?.[0]?.message);
+        return settings.thinkingMode ? text : stripThinkingTags(text);
    } else {
        const res = await fetch(`${url}/v1/chat/completions`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
+            body: JSON.stringify(_applyGenOptions({
                model,
                messages: [{ role: "user", content: [
                    { type: "text", text: prompt },
                    { type: "image_url", image_url: { url: `data:${mimeType};base64,${base64Image}` } },
                ]}],
                stream: false,
-            }),
+            }, backend, settings)),
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        return (await res.json()).choices?.[0]?.message?.content || "";
+        const text = (await res.json()).choices?.[0]?.message?.content || "";
+        return settings.thinkingMode ? text : stripThinkingTags(text);
    }
 }

+// ============================================
+// Unsloth proxy (server relays the request, attaching the API key from .env
+// so it never reaches the frontend — see py/routes/unsloth_routes.py)
+// ============================================
+
+async function unslothProxy(baseUrl, path, method, payload) {
+    const res = await fetch("/api/wfm/unsloth/proxy", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ baseUrl, path, method, payload }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.message || `HTTP ${res.status}`);
+    return data;
+}
+
+// Unlike Ollama/LM Studio/Lemonade (which inline reasoning as <think> tags
+// inside content), Unsloth's OpenAI-compatible API returns it in a separate
+// `reasoning_content` field. Fold it back into a <think> block so the
+// existing Thinking-mode show/strip logic (_applyGenOptions/stripThinkingTags)
+// still applies uniformly. Without this, a low max_tokens can make the model
+// spend its whole budget reasoning and return an empty `content` with no
+// visible explanation.
+function _unslothContent(message) {
+    const reasoning = message?.reasoning_content;
+    const content = message?.content || "";
+    return reasoning ? `<think>${reasoning}</think>${content}` : content;
+}
+
 // ============================================
 // URL validation
 // ============================================
@@ -100,6 +170,9 @@ async function fetchModels(url, backend) {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        return (data.models || []).map((m) => m.name);
+    } else if (backend === "unsloth") {
+        const data = await unslothProxy(url, "/v1/models", "GET");
+        return (data.data || []).map((m) => m.id);
    } else {
        // LM Studio (OpenAI-compatible)
        const res = await fetch(`${url}/v1/models`);
@@ -114,30 +187,37 @@ async function testConnection(url, backend) {
    return models.length;
 }

-async function callLLM(url, backend, model, prompt) {
+async function callLLM(url, backend, model, prompt, settings = {}) {
    if (backend === "ollama") {
        const res = await fetch(`${url}/api/generate`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ model, prompt, stream: false }),
+            body: JSON.stringify(_applyGenOptions({ model, prompt, stream: false }, backend, settings)),
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
-        return data.response || "";
+        const text = data.response || "";
+        return settings.thinkingMode ? text : stripThinkingTags(text);
+    } else if (backend === "unsloth") {
+        const body = _applyGenOptions({ model, messages: [{ role: "user", content: prompt }], stream: false }, backend, settings);
+        const data = await unslothProxy(url, "/v1/chat/completions", "POST", body);
+        const text = _unslothContent(data.choices?.[0]?.message);
+        return settings.thinkingMode ? text : stripThinkingTags(text);
    } else {
        // LM Studio (OpenAI-compatible)
        const res = await fetch(`${url}/v1/chat/completions`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
+            body: JSON.stringify(_applyGenOptions({
                model,
                messages: [{ role: "user", content: prompt }],
                stream: false,
-            }),
+            }, backend, settings)),
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
-        return data.choices?.[0]?.message?.content || "";
+        const text = data.choices?.[0]?.message?.content || "";
+        return settings.thinkingMode ? text : stripThinkingTags(text);
    }
 }

@@ -145,11 +225,41 @@ async function callLLM(url, backend, model, prompt) {
 // Translation prompt builder
 // ============================================

-function buildTranslationPrompt(text, srcLang, dstLang, settings) {
-    const srcName = srcLang === "free" ? (settings.freeSrcLang || "Auto") : LANG_NAMES[srcLang];
-    const dstName = dstLang === "free" ? (settings.freeDstLang || "English") : LANG_NAMES[dstLang];
-    const fromPart = srcLang === "free" ? "" : `from ${srcName} `;
-    return `Translate the following text ${fromPart}to ${dstName}. Output only the translated text, nothing else.\n\n${text}`;
+// Uses a system role (via callChat) rather than a single raw prompt string —
+// local models follow "translate only, no commentary" far more reliably
+// when it's a system instruction instead of buried inside the user text.
+function buildTranslationMessages(text, srcLang, dstLang, settings) {
+    const srcName = srcLang === "free" ? (settings.freeSrcLang || "").trim() : LANG_NAMES[srcLang];
+    const dstName = dstLang === "free" ? (settings.freeDstLang || "English").trim() || "English" : LANG_NAMES[dstLang];
+    const fromPart = srcName ? ` from ${srcName}` : "";
+    const system = `You are a professional translator. Translate the text the user sends${fromPart} into ${dstName}. `
+        + `Reply with ONLY the translated text and nothing else: no explanations, no notes, no preamble like "Here is the translation:", `
+        + `no surrounding quotes, and do not repeat or echo the original text.`;
+    return [
+        { role: "system", content: system },
+        { role: "user", content: text },
+    ];
+}
+
+// Strips common LLM wrapping/preamble artifacts that survive despite the system prompt.
+function cleanTranslationOutput(raw) {
+    let s = (raw || "").trim();
+    s = s.replace(/^(sure[,.]?\s*)?(here('|)s|here is)?\s*(the\s+)?translation\s*:?\s*/i, "");
+    s = s.replace(/^(翻訳|译文|翻译)\s*[::]\s*/, "");
+    if (s.length >= 2) {
+        const first = s[0], last = s[s.length - 1];
+        const pairs = { '"': '"', "'": "'", "“": "”", "「": "」" };
+        if (pairs[first] === last) s = s.slice(1, -1).trim();
+    }
+    return s;
+}
+
+// Heuristic: if the cleaned output is (near-)identical to the input, the
+// model most likely echoed the source instead of translating it.
+function looksUntranslated(input, output) {
+    const normalize = (s) => s.trim().toLowerCase().replace(/[\s.,!?"'。、！？「」]/g, "");
+    const a = normalize(input), b = normalize(output);
+    return a.length > 0 && a === b;
 }

 // ============================================
@@ -217,11 +327,19 @@ function initTranslateTab() {
        outputEl.value = "";

        try {
-            const prompt = buildTranslationPrompt(text, srcLangSel.value, dstLangSel.value, settings);
-            const result = await callLLM(url, backend, model, prompt);
-            outputEl.value = result.trim();
-            statusEl.textContent = t("aiStatusDone");
-            statusEl.className = "wfm-ai-trans-status wfm-ai-status-ok";
+            const messages = buildTranslationMessages(text, srcLangSel.value, dstLangSel.value, settings);
+            const { content } = await callChat(url, backend, model, messages, undefined, settings);
+            const cleaned = cleanTranslationOutput(content);
+            outputEl.value = cleaned;
+
+            if (srcLangSel.value !== dstLangSel.value && looksUntranslated(text, cleaned)) {
+                statusEl.textContent = t("aiStatusDone");
+                statusEl.className = "wfm-ai-trans-status wfm-ai-status-error";
+                showToast(t("aiToastMaybeNotTranslated"), "error");
+            } else {
+                statusEl.textContent = t("aiStatusDone");
+                statusEl.className = "wfm-ai-trans-status wfm-ai-status-ok";
+            }
        } catch (err) {
            statusEl.textContent = `${t("aiStatusConnectFail")}${err.message}`;
            statusEl.className = "wfm-ai-trans-status wfm-ai-status-error";
@@ -288,6 +406,11 @@ function initSettingsTab() {
    const urlInput = document.getElementById("wfm-ai-backend-url");
    if (urlInput && saved.backendUrl) urlInput.value = saved.backendUrl;

+    const thinkingModeCheckbox = document.getElementById("wfm-ai-thinking-mode-checkbox");
+    if (thinkingModeCheckbox) thinkingModeCheckbox.checked = !!saved.thinkingMode;
+    const maxTokensInput = document.getElementById("wfm-ai-max-tokens");
+    if (maxTokensInput && saved.maxTokens) maxTokensInput.value = saved.maxTokens;
+
    // Switch URL to the new backend's default when the user changes backend
    backendRadios.forEach((r) => {
        r.addEventListener("change", () => {
@@ -334,6 +457,22 @@ function initSettingsTab() {
        }
    });

+    // Unload model
+    document.getElementById("wfm-ai-unload-btn")?.addEventListener("click", async () => {
+        const backend = document.querySelector("input[name='wfm-ai-backend']:checked")?.value || "ollama";
+        const url = urlInput?.value?.trim() || "";
+        const model = document.getElementById("wfm-ai-model-select")?.value || "";
+        // Ollama: unload every loaded model incl. decision models (same server step as Settings → VRAM Management)
+        if (backend === "ollama") { await unloadAllOllamaModels(url); return; }
+        if (!model) { showToast(t("aiUnloadNoModel"), "error"); return; }
+        try {
+            await unloadAiModel(url, backend, model);
+            showToast(t("aiUnloadDone"), "success");
+        } catch (err) {
+            showToast(err.message === "UNSUPPORTED" ? t("aiUnloadUnsupported") : t("aiUnloadFailed") + err.message, "error");
+        }
+    });
+
    // Model refresh
    document.getElementById("wfm-ai-model-refresh-btn")?.addEventListener("click", () => refreshModels());

@@ -395,6 +534,8 @@ function initSettingsTab() {
        const chatGenDedicatedFilename = chatGenSelect?.value || "";
        const chatGenI2IDedicatedEnabled = !!chatGenI2ICheckbox?.checked;
        const chatGenI2IDedicatedFilename = chatGenI2ISelect?.value || "";
+        const thinkingMode = !!thinkingModeCheckbox?.checked;
+        const maxTokens = Math.max(0, parseInt(maxTokensInput?.value, 10) || 0);

        if (url && !isValidBackendUrl(url)) {
            showToast(t("aiToastInvalidUrl"), "error");
@@ -403,6 +544,7 @@ function initSettingsTab() {

        saveAiSettings({
            backend, backendUrl: url, model, freeSrcLang, freeDstLang,
+            thinkingMode, maxTokens,
            chatGenDedicatedEnabled, chatGenDedicatedFilename,
            chatGenI2IDedicatedEnabled, chatGenI2IDedicatedFilename,
        });
@@ -423,12 +565,22 @@ const IMAGE_GEN_TOOLS = [{
    type: "function",
    function: {
        name: "generate_image",
-        description: "Generate an image using the currently loaded ComfyUI workflow. If an image is currently attached to the conversation, this performs image-to-image generation using that image as the base; otherwise it performs text-to-image. Call this when the user asks to create, draw, paint, edit, or transform an image.",
+        description: "Generate an image using the currently loaded ComfyUI workflow. If an image is currently attached to the conversation, this performs image-to-image generation using that image as the base; otherwise it performs text-to-image. Call this when the user asks to create, draw, paint, edit, or transform an image. All parameters besides prompt are optional — omit any the user didn't specify and the workflow's own current setting is kept.",
        parameters: {
            type: "object",
            properties: {
                prompt: { type: "string", description: "Positive prompt describing the desired image." },
                negative_prompt: { type: "string", description: "What to avoid in the image. Optional." },
+                steps: { type: "integer", description: "Sampling steps. Optional." },
+                cfg: { type: "number", description: "Classifier-free guidance scale. Optional." },
+                sampler_name: { type: "string", description: "ComfyUI sampler name (e.g. euler, dpmpp_2m, ddim). Optional." },
+                scheduler: { type: "string", description: "ComfyUI scheduler name (e.g. normal, karras, simple). Optional." },
+                denoise: { type: "number", description: "Denoise strength 0-1 (mainly relevant for image-to-image). Optional." },
+                seed: { type: "integer", description: "Fixed seed. Omit for a random seed each time. Optional." },
+                width: { type: "integer", description: "Output image width in pixels. Ignored if the workflow has a Resolution Selector node — use aspect_ratio instead for those. Optional." },
+                height: { type: "integer", description: "Output image height in pixels. Ignored if the workflow has a Resolution Selector node — use aspect_ratio instead for those. Optional." },
+                aspect_ratio: { type: "string", enum: ["1:1", "2:3", "3:2", "3:4", "4:3", "9:16", "16:9", "21:9"], description: "Aspect ratio preset. Only applied if the workflow has a Resolution Selector node (feeding width/height from a ratio + megapixel target); ignored otherwise. Optional." },
+                batch_size: { type: "integer", description: "Number of images to generate in this single call. Optional." },
            },
            required: ["prompt"],
        },
@@ -453,10 +605,10 @@ function _formatMessagesForBackend(messages, backend) {
    });
 }

-async function callChat(url, backend, model, messages, tools) {
+async function callChat(url, backend, model, messages, tools, settings = {}) {
    const formattedMessages = _formatMessagesForBackend(messages, backend);
    if (backend === "ollama") {
-        const body = { model, messages: formattedMessages, stream: false };
+        const body = _applyGenOptions({ model, messages: formattedMessages, stream: false }, backend, settings);
        if (tools) body.tools = tools;
        const res = await fetch(`${url}/api/chat`, {
            method: "POST",
@@ -465,9 +617,17 @@ async function callChat(url, backend, model, messages, tools) {
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const message = (await res.json()).message || {};
-        return { content: message.content || "", toolCalls: message.tool_calls || null };
+        const content = message.content || "";
+        return { content: settings.thinkingMode ? content : stripThinkingTags(content), toolCalls: message.tool_calls || null };
+    } else if (backend === "unsloth") {
+        const body = _applyGenOptions({ model, messages: formattedMessages, stream: false }, backend, settings);
+        if (tools) { body.tools = tools; body.tool_choice = "auto"; }
+        const data = await unslothProxy(url, "/v1/chat/completions", "POST", body);
+        const message = data.choices?.[0]?.message || {};
+        const content = _unslothContent(message);
+        return { content: settings.thinkingMode ? content : stripThinkingTags(content), toolCalls: message.tool_calls || null };
    } else {
-        const body = { model, messages: formattedMessages, stream: false };
+        const body = _applyGenOptions({ model, messages: formattedMessages, stream: false }, backend, settings);
        if (tools) { body.tools = tools; body.tool_choice = "auto"; }
        const res = await fetch(`${url}/v1/chat/completions`, {
            method: "POST",
@@ -476,7 +636,8 @@ async function callChat(url, backend, model, messages, tools) {
        });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const message = (await res.json()).choices?.[0]?.message || {};
-        return { content: message.content || "", toolCalls: message.tool_calls || null };
+        const content = message.content || "";
+        return { content: settings.thinkingMode ? content : stripThinkingTags(content), toolCalls: message.tool_calls || null };
    }
 }

@@ -501,7 +662,7 @@ async function _loadDedicatedChatGenWorkflow(filename) {
    return { workflow, analysis: comfyWorkflow.analyzeWorkflow(workflow) };
 }

-async function generateImageFromChat(prompt, negativePrompt) {
+async function generateImageFromChat(prompt, negativePrompt, params = {}) {
    if (!window._wfmGenerateTab?.generate) throw new Error(t("aiChatGenerateNotReady"));

    const settings = loadAiSettings();
@@ -526,12 +687,312 @@ async function generateImageFromChat(prompt, negativePrompt) {
    comfyEditor.setPromptText("positive", prompt || "", { workflow, analysis });
    if (negativePrompt) comfyEditor.setPromptText("negative", negativePrompt, { workflow, analysis });

-    const result = await window._wfmGenerateTab.generate(workflow);
+    const { steps, cfg, sampler_name, scheduler, denoise, seed, width, height, batch_size, aspect_ratio } = params;
+    let resolvedAspectRatio = null;
+    const resSelector = analysis.resolution_selector_nodes?.[0];
+    if (aspect_ratio && resSelector) {
+        resolvedAspectRatio = await comfyEditor.resolveAspectRatioOption(resSelector.type, aspect_ratio);
+    }
+    comfyEditor.setGenerationParams({
+        steps, cfg, sampler_name, scheduler, denoise, seed, width, height, batch_size,
+        resolvedAspectRatio, workflow, analysis,
+    });
+
+    const result = await window._wfmGenerateTab.generate(workflow, seed != null ? { seedValue: seed } : {});
    const images = result?.images || [];
    if (images.length === 0) throw new Error(t("aiChatNoImageProduced"));

-    const img = images[0];
-    return `/view?filename=${encodeURIComponent(img.filename)}&subfolder=${encodeURIComponent(img.subfolder || "")}&type=${encodeURIComponent(img.type || "output")}`;
+    return images.map((img) =>
+        `/view?filename=${encodeURIComponent(img.filename)}&subfolder=${encodeURIComponent(img.subfolder || "")}&type=${encodeURIComponent(img.type || "output")}`
+    );
+}
+
+// アシスタント応答からSVGコードを抽出する（```svg フェンス or 生の <svg>...</svg>）
+function _extractSvgCode(text) {
+    if (!text) return null;
+    const fenced = text.match(/```(?:svg|xml)?\s*([\s\S]*?<svg[\s\S]*?<\/svg>)[\s\S]*?```/i);
+    if (fenced) return fenced[1].trim();
+    const bare = text.match(/<svg[\s\S]*?<\/svg>/i);
+    if (bare) return bare[0].trim();
+    return null;
+}
+
+// SVGコードをプレビュー表示し、Galleryへ保存するボタンを追加する。
+// <img src="data:..."> でのレンダリングはブラウザがスクリプト実行を無効化するため安全。
+function _appendSvgPreview(container, svgCode) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "wfm-ai-chat-svg-wrapper";
+
+    const dataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgCode)))}`;
+
+    const img = document.createElement("img");
+    img.src = dataUrl;
+    img.className = "wfm-ai-chat-svg-img";
+    img.alt = "Generated SVG";
+    wrapper.appendChild(img);
+
+    const saveBtn = document.createElement("button");
+    saveBtn.className = "wfm-btn wfm-btn-sm";
+    saveBtn.textContent = t("aiChatSaveSvgToGallery");
+    saveBtn.addEventListener("click", async () => {
+        saveBtn.disabled = true;
+        try {
+            const res = await fetch("/wfm/gallery/image/save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ filename: `chat_svg_${Date.now()}.svg`, imageData: dataUrl }),
+            });
+            const data = await res.json();
+            if (!res.ok || data.error) throw new Error(data.error || `HTTP ${res.status}`);
+            showToast(t("aiChatSvgSaved"), "success");
+        } catch (e) {
+            showToast(t("aiChatSvgSaveFailed") + e.message, "error");
+        } finally {
+            saveBtn.disabled = false;
+        }
+    });
+    wrapper.appendChild(saveBtn);
+
+    container.appendChild(wrapper);
+}
+
+// アシスタント応答から ```skill フェンスを抽出する（Skill Creator用スキルが出力する完成品ブロック）
+function _extractSkillBlock(text) {
+    if (!text) return null;
+    const m = text.match(/```skill\s*([\s\S]*?)```/i);
+    return m ? m[1].trim() : null;
+}
+
+// frontmatterの name から保存用ファイル名を推測する（未設定時は my-skill.md）
+function _slugifySkillName(content) {
+    const m = content.match(/^---\r?\n[\s\S]*?name:\s*(.+?)\r?\n/);
+    const name = (m ? m[1] : "").trim();
+    const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    return `${slug || "my-skill"}.md`;
+}
+
+// 応答内にスキル定義ブロックがあれば「スキルとして保存」ボタンを追加する。
+// クリックすると管理パネルを開き、新規スキルとしてエディタに内容を流し込む（保存前にレビュー可能）。
+function _appendSkillSaveButton(container, skillContent) {
+    const btn = document.createElement("button");
+    btn.className = "wfm-btn wfm-btn-sm";
+    btn.textContent = t("aiChatSaveAsSkill");
+    btn.addEventListener("click", () => {
+        const panel = document.getElementById("wfm-ai-skill-panel");
+        if (panel) panel.style.display = "";
+        skillOpenEditor(null, skillContent);
+        const nameInput = document.getElementById("wfm-ai-skill-editor-filename");
+        if (nameInput) nameInput.value = _slugifySkillName(skillContent);
+    });
+    container.appendChild(btn);
+}
+
+// ============================================
+// AI skills (Chat system prompt library)
+// ============================================
+
+async function skillFetchFiles() {
+    try {
+        const res = await fetch("/api/wfm/skills");
+        return res.ok ? await res.json() : [];
+    } catch { return []; }
+}
+
+async function skillFetchContent(filename) {
+    try {
+        const res = await fetch(`/api/wfm/skills/content?filename=${encodeURIComponent(filename)}`);
+        const data = await res.json();
+        return data.content ?? null;
+    } catch { return null; }
+}
+
+async function skillSaveFile(filename, content) {
+    try {
+        const res = await fetch("/api/wfm/skills/save", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ filename, content }),
+        });
+        const data = await res.json();
+        return data.status === "ok" ? data.file : null;
+    } catch { return null; }
+}
+
+async function skillDeleteFile(filename) {
+    try {
+        await fetch("/api/wfm/skills/delete", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ filename }),
+        });
+    } catch { /* ignore */ }
+}
+
+// system prompt として送る前に frontmatter (---...---) を取り除く
+function _stripSkillFrontmatter(content) {
+    const m = content.match(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/);
+    return (m ? content.slice(m[0].length) : content).trim();
+}
+
+let skillFiles = [];
+let skillEditingFilename = null; // null = new file
+let _activeSkillCache = null; // { filename, content } キャッシュ（送信毎の再フェッチを避ける）
+
+function skillRenderList() {
+    const list = document.getElementById("wfm-ai-skill-list");
+    if (!list) return;
+    list.innerHTML = "";
+
+    if (skillFiles.length === 0) {
+        list.innerHTML = `<div class="wfm-pm-empty" style="font-size:12px;">${t("aiSkillNoFiles")}</div>`;
+        return;
+    }
+
+    for (const f of skillFiles) {
+        const item = document.createElement("div");
+        item.className = "wfm-wc-file-item";
+        item.innerHTML = `
+            <div class="wfm-wc-file-item-info">
+                <span class="wfm-wc-file-name" title="${escapeHtml(f.description || "")}">${escapeHtml(f.name)}</span>
+                <span class="wfm-wc-file-ext">.md</span>
+            </div>
+            <div class="wfm-wc-file-item-actions">
+                <button class="wfm-pm-action-btn wfm-ai-skill-edit-btn" title="Edit">&#9998;</button>
+            </div>
+        `;
+        item.querySelector(".wfm-ai-skill-edit-btn").addEventListener("click", async (e) => {
+            e.stopPropagation();
+            const content = await skillFetchContent(f.filename);
+            skillOpenEditor(f.filename, content ?? "");
+        });
+        list.appendChild(item);
+    }
+}
+
+function skillOpenEditor(filename, content) {
+    skillEditingFilename = filename || null;
+
+    const editor = document.getElementById("wfm-ai-skill-editor");
+    const nameInput = document.getElementById("wfm-ai-skill-editor-filename");
+    const contentTA = document.getElementById("wfm-ai-skill-editor-content");
+    const deleteBtn = document.getElementById("wfm-ai-skill-editor-delete-btn");
+
+    if (!editor) return;
+    nameInput.value = filename || "";
+    contentTA.value = content || "";
+    deleteBtn.style.display = filename ? "" : "none";
+    editor.style.display = "";
+    nameInput.focus();
+}
+
+function skillCloseEditor() {
+    skillEditingFilename = null;
+    const editor = document.getElementById("wfm-ai-skill-editor");
+    if (editor) editor.style.display = "none";
+}
+
+function skillPopulateSelect() {
+    const sel = document.getElementById("wfm-ai-chat-skill-select");
+    if (!sel) return;
+    const settings = loadAiSettings();
+    const wanted = sel.value || settings.activeSkillFilename || "";
+
+    sel.innerHTML = `<option value="">-- ${t("aiSkillNone")} --</option>` +
+        skillFiles.map((f) => `<option value="${escapeHtml(f.filename)}" title="${escapeHtml(f.description || "")}">${escapeHtml(f.name)}</option>`).join("");
+
+    sel.value = skillFiles.some((f) => f.filename === wanted) ? wanted : "";
+    _activeSkillCache = null;
+}
+
+async function skillRefreshFiles() {
+    skillFiles = await skillFetchFiles();
+    skillRenderList();
+    skillPopulateSelect();
+}
+
+// 選択中スキルの本文を取得（system prompt注入用、選択が変わるまでキャッシュ）
+async function _getActiveSkillSystemPrompt() {
+    const sel = document.getElementById("wfm-ai-chat-skill-select");
+    const filename = sel?.value || "";
+    if (!filename) return null;
+    if (_activeSkillCache?.filename === filename) return _activeSkillCache.content;
+    const raw = await skillFetchContent(filename);
+    const content = _stripSkillFrontmatter(raw || "");
+    _activeSkillCache = { filename, content };
+    return content;
+}
+
+function initSkillManager() {
+    const selectEl = document.getElementById("wfm-ai-chat-skill-select");
+    const manageBtn = document.getElementById("wfm-ai-chat-skill-manage-btn");
+    const panel = document.getElementById("wfm-ai-skill-panel");
+    const closeBtn = document.getElementById("wfm-ai-skill-close-btn");
+    const newBtn = document.getElementById("wfm-ai-skill-new-btn");
+    const saveBtn = document.getElementById("wfm-ai-skill-editor-save-btn");
+    const deleteBtn = document.getElementById("wfm-ai-skill-editor-delete-btn");
+    const cancelBtn = document.getElementById("wfm-ai-skill-editor-cancel-btn");
+
+    if (!selectEl) return;
+
+    skillRefreshFiles();
+
+    selectEl.addEventListener("change", () => {
+        saveAiSettings({ activeSkillFilename: selectEl.value });
+        _activeSkillCache = null;
+    });
+
+    manageBtn?.addEventListener("click", () => {
+        if (!panel) return;
+        const show = panel.style.display === "none";
+        panel.style.display = show ? "" : "none";
+        if (show) skillRefreshFiles();
+    });
+
+    closeBtn?.addEventListener("click", () => {
+        if (panel) panel.style.display = "none";
+    });
+
+    newBtn?.addEventListener("click", () => {
+        skillOpenEditor(null, "---\nname: \ndescription: \n---\n\n");
+    });
+
+    saveBtn?.addEventListener("click", async () => {
+        const nameInput = document.getElementById("wfm-ai-skill-editor-filename");
+        const contentTA = document.getElementById("wfm-ai-skill-editor-content");
+        let filename = (nameInput?.value || "").trim();
+        const content = contentTA?.value || "";
+
+        if (!filename) { showToast(t("pleaseEnterFilename"), "error"); return; }
+        if (!/\.md$/i.test(filename)) filename += ".md";
+        if (!/^[\w\-. ]+\.md$/i.test(filename)) { showToast(t("invalidPathFormat"), "error"); return; }
+
+        const saved = await skillSaveFile(filename, content);
+        if (saved) {
+            showToast(t("savedAs", filename), "success");
+            skillCloseEditor();
+            await skillRefreshFiles();
+            selectEl.value = filename;
+            saveAiSettings({ activeSkillFilename: filename });
+            _activeSkillCache = null;
+        } else {
+            showToast(t("saveFailed"), "error");
+        }
+    });
+
+    deleteBtn?.addEventListener("click", async () => {
+        if (!skillEditingFilename) return;
+        if (!confirm(`Delete "${skillEditingFilename}"?`)) return;
+        await skillDeleteFile(skillEditingFilename);
+        showToast(t("deletedName", skillEditingFilename), "success");
+        if (selectEl.value === skillEditingFilename) {
+            saveAiSettings({ activeSkillFilename: "" });
+            _activeSkillCache = null;
+        }
+        skillCloseEditor();
+        await skillRefreshFiles();
+    });
+
+    cancelBtn?.addEventListener("click", () => skillCloseEditor());
 }

 function appendChatBubble(messagesEl, role, content, opts = {}) {
@@ -544,12 +1005,26 @@ function appendChatBubble(messagesEl, role, content, opts = {}) {
        img.className = "wfm-ai-chat-img";
        div.appendChild(img);
    }
+    if (opts.imageUrls?.length) {
+        opts.imageUrls.forEach((url) => {
+            const img = document.createElement("img");
+            img.src = url;
+            img.className = "wfm-ai-chat-img";
+            div.appendChild(img);
+        });
+    }
    if (opts.attachThumb) {
        const img = document.createElement("img");
        img.src = opts.attachThumb;
        img.className = "wfm-ai-chat-attach-thumb";
        div.appendChild(img);
    }
+    if (role === "assistant" && content) {
+        const svgCode = _extractSvgCode(content);
+        if (svgCode) _appendSvgPreview(div, svgCode);
+        const skillBlock = _extractSkillBlock(content);
+        if (skillBlock) _appendSkillSaveButton(div, skillBlock);
+    }
    messagesEl.appendChild(div);
    messagesEl.scrollTop = messagesEl.scrollHeight;
    return div;
@@ -577,6 +1052,8 @@ function initChatTab() {
        _clearToolsImage();
    });

+    initSkillManager();
+
    let chatHistory = [];

    async function sendMessage() {
@@ -609,7 +1086,11 @@ function initChatTab() {

        try {
            const tools = imgGenToggle?.checked !== false ? IMAGE_GEN_TOOLS : undefined;
-            const reply = await callChat(url, backend, model, chatHistory, tools);
+            const skillPrompt = await _getActiveSkillSystemPrompt();
+            const messagesToSend = skillPrompt
+                ? [{ role: "system", content: skillPrompt }, ...chatHistory]
+                : chatHistory;
+            const reply = await callChat(url, backend, model, messagesToSend, tools, settings);
            const toolCall = reply.toolCalls?.find(
                (tc) => (tc.function?.name || tc.name) === "generate_image"
            );
@@ -621,8 +1102,8 @@ function initChatTab() {
                statusEl.textContent = t("aiStatusGeneratingImage");
                const args = _parseToolArgs(toolCall);
                try {
-                    const imageUrl = await generateImageFromChat(args.prompt, args.negative_prompt);
-                    appendChatBubble(messagesEl, "assistant", "", { imageUrl });
+                    const imageUrls = await generateImageFromChat(args.prompt, args.negative_prompt, args);
+                    appendChatBubble(messagesEl, "assistant", "", { imageUrls });
                } catch (genErr) {
                    appendChatBubble(messagesEl, "assistant", `${t("aiToastImageGenFailed")}${genErr.message}`);
                    showToast(t("aiToastImageGenFailed") + genErr.message, "error");
@@ -769,7 +1250,7 @@ function initVlmTab() {
            const prompt = `Generate ${count} wildcard entries for the category "${name}". Output only plain text in English, one entry per line, no numbers, no markdown, no asterisks, no bold, nothing else.`;

            try {
-                const result = await callLLM(url, backend, model, prompt);
+                const result = await callLLM(url, backend, model, prompt, settings);
                resultEl.value = result.trim()
                    .split("\n")
                    .map(l => l.replace(/\*\*/g, "").replace(/^\*\s*/, "").replace(/^\d+\.\s*/, "").trim())
@@ -795,7 +1276,7 @@ function initVlmTab() {
        resultEl.value = "";

        try {
-            const result = await callVLM(url, backend, model, VLM_PROMPTS[task], _toolsImage.base64, _toolsImage.mimeType);
+            const result = await callVLM(url, backend, model, VLM_PROMPTS[task], _toolsImage.base64, _toolsImage.mimeType, settings);
            resultEl.value = result.trim();
            statusEl.textContent = t("aiStatusDone");
            statusEl.className = "wfm-ai-trans-status wfm-ai-status-ok";
@@ -825,3 +1306,7 @@ export function initAiTab() {
    initVlmTab();
    initSettingsTab();
 }
+
+// gallery-tab.js の外部（Comic Creator）向けブリッジ（半自動マンガ作成の画像プロンプト
+// 下書き機能）が、設定タブと同じAI接続設定・LLM呼び出しロジックを再利用するためのexport。
+export { callLLM, loadAiSettings, isValidBackendUrl };
@@ -42,11 +42,32 @@ export function showToast(message, type = "info", duration = 3000) {

 export function openModal(title, contentHtml) {
    const overlay = document.getElementById("wfm-modal-overlay");
-    const titleEl = document.getElementById("wfm-modal-title");
+    let titleEl = document.getElementById("wfm-modal-title");
    const bodyEl = document.getElementById("wfm-modal-body");
+    const titleInput = document.getElementById("wfm-modal-title-input");

    if (!overlay || !titleEl || !bodyEl) return;

+    // This modal shell is shared by every caller (Workflow/Models/Nodes detail
+    // modals, Lab's keyframe editor, etc.). Some callers (e.g. workflow-tab.js's
+    // openDetailModal) inject extra header chrome after calling openModal() — a
+    // favorite star button, and a click-to-rename listener + tooltip/cursor on the
+    // title — but nothing ever tore that down again. The next caller to reuse this
+    // same DOM inherited it as stale leftovers: a Lab cell modal could show a
+    // favorite star wired to the PREVIOUS caller's workflow object, and clicking it
+    // silently toggled that unrelated workflow's favorite state. Clean slate every
+    // time, before any caller-specific chrome is added back on top.
+    titleEl.parentElement?.querySelectorAll(".wfm-fav-btn").forEach((el) => el.remove());
+    const freshTitleEl = titleEl.cloneNode(false); // drops any addEventListener from a prior caller
+    freshTitleEl.removeAttribute("title");
+    freshTitleEl.removeAttribute("style"); // also clears any leftover display:none from an interrupted rename
+    titleEl.replaceWith(freshTitleEl);
+    titleEl = freshTitleEl;
+    if (titleInput) {
+        titleInput.style.display = "none";
+        titleInput.value = "";
+    }
+
    titleEl.textContent = title;
    bodyEl.innerHTML = contentHtml;
    overlay.style.display = "flex";
@@ -91,7 +112,7 @@ function initTabs() {

 function applyI18nToHtml() {
    // Tab labels
-    const tabMap = { workflow: "tabWorkflow", nodes: "tabNodes", models: "tabModels", generate: "tabGenerate", prompt: "tabPrompt", metadata: "tabMetadata", gallery: "tabGallery", "image-edit": "tabImageEdit", settings: "tabSettings", help: "tabHelp", ai: "tabAi", tagger: "tabTagger" };
+    const tabMap = { workflow: "tabWorkflow", nodes: "tabNodes", models: "tabModels", generate: "tabGenerate", prompt: "tabPrompt", gallery: "tabGallery", "image-edit": "tabImageEdit", video: "tabVideo", settings: "tabSettings", help: "tabHelp", ai: "tabAi", tagger: "tabTagger" };
    document.querySelectorAll(".wfm-tab").forEach((tab) => {
        const key = tabMap[tab.dataset.tab];
        if (key) tab.textContent = t(key);
@@ -113,6 +134,12 @@ function applyI18nToHtml() {
        if (listLoadBtn.disabled) listLoadBtn.title = t("selectCardFirst");
    }

+    const listLoadVideoBtn = document.getElementById("wfm-list-load-video-btn");
+    if (listLoadVideoBtn) {
+        listLoadVideoBtn.textContent = t("loadInVideo");
+        if (listLoadVideoBtn.disabled) listLoadVideoBtn.title = t("selectCardFirst");
+    }
+
    const listOpenComfyBtn = document.getElementById("wfm-list-open-comfyui-btn");
    if (listOpenComfyBtn) {
        listOpenComfyBtn.textContent = t("sendToCanvas");
@@ -195,6 +222,7 @@ function applyI18nToHtml() {
        if (btn.dataset.detailTab === "info") btn.textContent = t("modelsSideInfo");
        if (btn.dataset.detailTab === "meta") btn.textContent = t("gallerySideMetadata");
        if (btn.dataset.detailTab === "group") btn.textContent = t("modelsSideGroup");
+        if (btn.dataset.detailTab === "prompt") btn.textContent = t("gallerySidePrompt");
    });
    const galleryBulkDeselect = document.getElementById("wfm-gallery-bulk-deselect");
    if (galleryBulkDeselect) galleryBulkDeselect.textContent = t("galleryBulkDeselectAll");
@@ -217,20 +245,88 @@ function applyI18nToHtml() {
    if (galleryBulkMove) galleryBulkMove.textContent = t("galleryBulkMoveTo");
    const galleryBulkExport = document.getElementById("wfm-gallery-bulk-export");
    if (galleryBulkExport) galleryBulkExport.textContent = t("galleryBulkExport");
+    const galleryBulkPsd = document.getElementById("wfm-gallery-bulk-psd");
+    if (galleryBulkPsd) galleryBulkPsd.textContent = t("galleryBulkPsd");
+    const galleryBulkEditLayers = document.getElementById("wfm-gallery-bulk-edit-layers");
+    if (galleryBulkEditLayers) galleryBulkEditLayers.textContent = t("galleryBulkEditLayers");
+    const galleryBulkConvert = document.getElementById("wfm-gallery-bulk-convert");
+    if (galleryBulkConvert) galleryBulkConvert.textContent = t("galleryBulkConvert");
    const galleryBulkDelete = document.getElementById("wfm-gallery-bulk-delete");
    if (galleryBulkDelete) galleryBulkDelete.textContent = t("galleryBulkDelete");
    const galleryOpenTaggerBtn = document.getElementById("wfm-gallery-open-tagger-btn");
    if (galleryOpenTaggerBtn) galleryOpenTaggerBtn.textContent = t("tabTagger");

+    // Gallery サブタブ (Output / ImagePrompt / Style_Catalog)
+    const galleryOutputSubtab = document.getElementById("wfm-gallery-subtab-output");
+    if (galleryOutputSubtab) galleryOutputSubtab.textContent = t("galleryTabOutput");
+    const galleryImagePromptSubtab = document.getElementById("wfm-gallery-subtab-imageprompt");
+    if (galleryImagePromptSubtab) galleryImagePromptSubtab.textContent = t("galleryTabImagePrompt");
+    const galleryStyleCatalogSubtab = document.getElementById("wfm-gallery-subtab-styleCatalog");
+    if (galleryStyleCatalogSubtab) galleryStyleCatalogSubtab.textContent = t("galleryTabStyleCatalog");
+    const galleryMetadataSubtab = document.getElementById("wfm-gallery-subtab-metadata");
+    if (galleryMetadataSubtab) galleryMetadataSubtab.textContent = t("galleryTabMetadata");
+
+    // ImagePrompt ギャラリーパネル
+    const imagePromptSearch = document.getElementById("wfm-imageprompt-search");
+    if (imagePromptSearch) imagePromptSearch.placeholder = t("gallerySearchPlaceholder");
+    const imagePromptRefreshBtn = document.getElementById("wfm-imageprompt-refresh-btn");
+    if (imagePromptRefreshBtn) imagePromptRefreshBtn.textContent = t("refresh");
+    const imagePromptTreeTitle = document.getElementById("wfm-imageprompt-tree-title");
+    if (imagePromptTreeTitle) imagePromptTreeTitle.textContent = t("galleryFolders");
+    const imagePromptListPlaceholder = document.getElementById("wfm-imageprompt-list-placeholder");
+    if (imagePromptListPlaceholder) imagePromptListPlaceholder.textContent = t("gallerySelectFolder");
+    const imagePromptNoSelection = document.getElementById("wfm-imageprompt-no-selection");
+    if (imagePromptNoSelection) imagePromptNoSelection.textContent = t("galleryNoSelection");
+    const imagePromptSelectedPromptTitle = document.getElementById("wfm-imageprompt-selected-prompt-title");
+    if (imagePromptSelectedPromptTitle) imagePromptSelectedPromptTitle.textContent = t("imagePromptSelectedPrompt");
+    const imagePromptSelectedPrompt = document.getElementById("wfm-imageprompt-selected-prompt");
+    if (imagePromptSelectedPrompt) imagePromptSelectedPrompt.placeholder = t("imagePromptNoPrompt");
+    const imagePromptSavePromptBtn = document.getElementById("wfm-imageprompt-save-prompt-btn");
+    if (imagePromptSavePromptBtn) imagePromptSavePromptBtn.textContent = t("save");
+    const imagePromptAddBtn = document.getElementById("wfm-imageprompt-add-btn");
+    if (imagePromptAddBtn) imagePromptAddBtn.textContent = t("imagePromptAddBtn");
+    const imagePromptChipsTitle = document.getElementById("wfm-imageprompt-chips-title");
+    if (imagePromptChipsTitle) imagePromptChipsTitle.textContent = t("imagePromptChipsTitle");
+    const imagePromptClearBtn = document.getElementById("wfm-imageprompt-clear-btn");
+    if (imagePromptClearBtn) imagePromptClearBtn.textContent = t("imagePromptClearBtn");
+    const imagePromptFinalPromptTitle = document.getElementById("wfm-imageprompt-final-prompt-title");
+    if (imagePromptFinalPromptTitle) imagePromptFinalPromptTitle.textContent = t("imagePromptFinalPromptTitle");
+    const imagePromptCopyBtn = document.getElementById("wfm-imageprompt-copy-btn");
+    if (imagePromptCopyBtn) imagePromptCopyBtn.textContent = t("copy");
+
+    // Style_Catalog ギャラリーパネル
+    const scSearch = document.getElementById("wfm-stylecatalog-search");
+    if (scSearch) scSearch.placeholder = t("stylecatalogSearchPlaceholder");
+    const scRefreshBtn = document.getElementById("wfm-stylecatalog-refresh-btn");
+    if (scRefreshBtn) scRefreshBtn.textContent = t("refresh");
+    const scTreeTitle = document.getElementById("wfm-stylecatalog-tree-title");
+    if (scTreeTitle) scTreeTitle.textContent = t("galleryFolders");
+    const scListPlaceholder = document.getElementById("wfm-stylecatalog-list-placeholder");
+    if (scListPlaceholder) scListPlaceholder.textContent = t("gallerySelectFolder");
+    const scNoSelection = document.getElementById("wfm-stylecatalog-no-selection");
+    if (scNoSelection) scNoSelection.textContent = t("galleryNoSelection");
+    const scPositiveTitle = document.getElementById("wfm-stylecatalog-positive-title");
+    if (scPositiveTitle) scPositiveTitle.textContent = t("stylecatalogPositive");
+    const scCopyPositiveBtn = document.getElementById("wfm-stylecatalog-copy-positive-btn");
+    if (scCopyPositiveBtn) scCopyPositiveBtn.textContent = t("copy");
+    const scNegativeTitle = document.getElementById("wfm-stylecatalog-negative-title");
+    if (scNegativeTitle) scNegativeTitle.textContent = t("stylecatalogNegative");
+    const scCopyNegativeBtn = document.getElementById("wfm-stylecatalog-copy-negative-btn");
+    if (scCopyNegativeBtn) scCopyNegativeBtn.textContent = t("copy");
+    const scSelectStyleBtn = document.getElementById("wfm-stylecatalog-select-style-btn");
+    if (scSelectStyleBtn) scSelectStyleBtn.textContent = t("stylecatalogSelectStyleBtn");
+    const scLoadGenuiBtn = document.getElementById("wfm-stylecatalog-load-genui-btn");
+    if (scLoadGenuiBtn) scLoadGenuiBtn.textContent = t("stylecatalogLoadGenuiBtn");
+    const scOpenMetadataBtn = document.getElementById("wfm-stylecatalog-open-metadata-btn");
+    if (scOpenMetadataBtn) scOpenMetadataBtn.textContent = t("stylecatalogOpenMetadataBtn");
+
    // Prompt tab
    const assistantHeader = document.querySelector(".wfm-prompt-split-left .wfm-prompt-split-header");
    if (assistantHeader) assistantHeader.textContent = t("assistantSubtab");
    const presetsHeader = document.querySelector(".wfm-prompt-split-right .wfm-prompt-split-header");
    if (presetsHeader) presetsHeader.textContent = t("presetsSubtab");
-    const ollamaRefreshBtn = document.getElementById("wfm-ollama-refresh-btn");
-    if (ollamaRefreshBtn) ollamaRefreshBtn.textContent = t("refresh");
-    const ollamaTestBtn = document.getElementById("wfm-ollama-test-btn");
-    if (ollamaTestBtn) ollamaTestBtn.textContent = t("test");
+    const ollamaSettingsBtn = document.getElementById("wfm-ollama-settings-btn");
+    if (ollamaSettingsBtn) ollamaSettingsBtn.title = t("settings");
    const ollamaAttachBtn = document.getElementById("wfm-ollama-attach-btn");
    if (ollamaAttachBtn) ollamaAttachBtn.textContent = t("attachImage");
    const ollamaClearBtn = document.getElementById("wfm-ollama-clear-btn");
@@ -302,6 +398,14 @@ function applyI18nToHtml() {
    }
    const aiModelRefreshBtn = document.getElementById("wfm-ai-model-refresh-btn");
    if (aiModelRefreshBtn) aiModelRefreshBtn.textContent = t("aiSettingsRefreshBtn");
+    const aiGenerationTitle = document.getElementById("wfm-ai-settings-generation-title");
+    if (aiGenerationTitle) aiGenerationTitle.textContent = t("aiSettingsGenerationTitle");
+    const aiThinkingModeLabel = document.getElementById("wfm-ai-thinking-mode-label");
+    if (aiThinkingModeLabel) aiThinkingModeLabel.textContent = t("aiSettingsThinkingMode");
+    const aiMaxTokensLabel = document.getElementById("wfm-ai-max-tokens-label");
+    if (aiMaxTokensLabel) aiMaxTokensLabel.textContent = t("aiSettingsMaxTokens");
+    const aiMaxTokensInput = document.getElementById("wfm-ai-max-tokens");
+    if (aiMaxTokensInput) aiMaxTokensInput.placeholder = t("aiSettingsMaxTokensPlaceholder");
    const aiFreeLangTitle = document.getElementById("wfm-ai-settings-freelang-title");
    if (aiFreeLangTitle) aiFreeLangTitle.textContent = t("aiSettingsFreeLang");
    const aiFreeSrcLabel = document.getElementById("wfm-ai-free-src-label");
@@ -320,6 +424,19 @@ function applyI18nToHtml() {
    if (aiChatGenI2ITitle) aiChatGenI2ITitle.textContent = t("aiSettingsChatI2IGenTitle");
    const aiChatGenI2IDedicatedLabel = document.getElementById("wfm-ai-chatgen-i2i-dedicated-label");
    if (aiChatGenI2IDedicatedLabel) aiChatGenI2IDedicatedLabel.textContent = t("aiSettingsChatGenDedicated");
+    const aiSkillSel = document.getElementById("wfm-ai-chat-skill-select");
+    if (aiSkillSel) {
+        const firstOpt = aiSkillSel.querySelector("option[value='']");
+        if (firstOpt) firstOpt.textContent = `-- ${t("aiSkillNone")} --`;
+    }
+    const aiSkillManageBtn = document.getElementById("wfm-ai-chat-skill-manage-btn");
+    if (aiSkillManageBtn) aiSkillManageBtn.title = t("aiSkillManageBtnTitle");
+    const aiSkillPanelTitle = document.querySelector(".wfm-ai-skill-panel-title");
+    if (aiSkillPanelTitle) aiSkillPanelTitle.textContent = t("aiSkillPanelTitle");
+    const aiSkillNewBtn = document.getElementById("wfm-ai-skill-new-btn");
+    if (aiSkillNewBtn) aiSkillNewBtn.textContent = t("aiSkillNewBtn");
+    const aiSkillContentTA = document.getElementById("wfm-ai-skill-editor-content");
+    if (aiSkillContentTA) aiSkillContentTA.placeholder = t("aiSkillContentPlaceholder");

    // Group panel labels
    const propTitle = document.querySelector("#wfm-side-tab-group .wfm-group-section-title");
@@ -357,7 +474,7 @@ function applyI18nToHtml() {
        "wfm-help-about-1": "helpAbout1", "wfm-help-about-2": "helpAbout2",
        "wfm-help-wf-1": "helpWf1", "wfm-help-wf-2": "helpWf2", "wfm-help-wf-3": "helpWf3",
        "wfm-help-wf-4": "helpWf4", "wfm-help-wf-5": "helpWf5", "wfm-help-wf-6": "helpWf6",
-        "wfm-help-wf-7": "helpWf7",
+        "wfm-help-wf-7": "helpWf7", "wfm-help-wf-8": "helpWf8",
        "wfm-help-gen-1": "helpGen1", "wfm-help-gen-2": "helpGen2",
        "wfm-help-gen-3": "helpGen3", "wfm-help-gen-4": "helpGen4",
        "wfm-help-gen-5": "helpGen5", "wfm-help-gen-6": "helpGen6", "wfm-help-gen-7": "helpGen7",
@@ -367,6 +484,14 @@ function applyI18nToHtml() {
        "wfm-help-gen-15": "helpGen15", "wfm-help-gen-16": "helpGen16",
        "wfm-help-gen-17": "helpGen17", "wfm-help-gen-18": "helpGen18",
        "wfm-help-gen-19": "helpGen19",
+        "wfm-help-gen-20": "helpGen20", "wfm-help-gen-21": "helpGen21",
+        "wfm-help-gen-22": "helpGen22", "wfm-help-gen-23": "helpGen23",
+        "wfm-help-gen-24": "helpGen24", "wfm-help-gen-25": "helpGen25",
+        "wfm-help-gen-26": "helpGen26", "wfm-help-gen-27": "helpGen27",
+        "wfm-help-gen-28": "helpGen28",
+        "wfm-help-gen-29": "helpGen29",
+        "wfm-help-gen-30": "helpGen30",
+        "wfm-help-gen-31": "helpGen31",
        "wfm-help-feeder-title": "helpFeederTitle",
        "wfm-help-feeder-desc": "helpFeederDesc",
        "wfm-help-feeder-imgloop-title": "helpFeederImgloopTitle",
@@ -381,18 +506,60 @@ function applyI18nToHtml() {
        "wfm-help-feeder-gal-1": "helpFeederGal1", "wfm-help-feeder-gal-2": "helpFeederGal2",
        "wfm-help-feeder-gal-3": "helpFeederGal3", "wfm-help-feeder-gal-4": "helpFeederGal4",
        "wfm-help-feeder-gal-5": "helpFeederGal5", "wfm-help-feeder-gal-6": "helpFeederGal6",
+        "wfm-help-lab-title": "helpLabTitle",
+        "wfm-help-lab-desc": "helpLabDesc",
+        "wfm-help-lab-card-columns-title": "helpLabCardColumnsTitle",
+        "wfm-help-lab-1": "helpLab1", "wfm-help-lab-2": "helpLab2",
+        "wfm-help-lab-3": "helpLab3", "wfm-help-lab-4": "helpLab4",
+        "wfm-help-lab-5": "helpLab5", "wfm-help-lab-6": "helpLab6",
+        "wfm-help-lab-7": "helpLab7", "wfm-help-lab-8": "helpLab8",
+        "wfm-help-lab-9": "helpLab9", "wfm-help-lab-10": "helpLab10",
+        "wfm-help-lab-11": "helpLab11", "wfm-help-lab-12": "helpLab12",
+        "wfm-help-lab-13": "helpLab13", "wfm-help-lab-14": "helpLab14",
+        "wfm-help-lab-15": "helpLab15",
+        "wfm-help-lab-16": "helpLab16", "wfm-help-lab-17": "helpLab17",
+        "wfm-help-lab-18": "helpLab18", "wfm-help-lab-19": "helpLab19",
+        "wfm-help-lab-card-plan-title": "helpLabCardPlanTitle",
+        "wfm-help-lab-plan-1": "helpLabPlan1", "wfm-help-lab-plan-2": "helpLabPlan2",
+        "wfm-help-lab-plan-3": "helpLabPlan3", "wfm-help-lab-plan-4": "helpLabPlan4",
+        "wfm-help-lab-plan-5": "helpLabPlan5", "wfm-help-lab-plan-6": "helpLabPlan6",
+        "wfm-help-lab-plan-7": "helpLabPlan7", "wfm-help-lab-plan-8": "helpLabPlan8",
+        "wfm-help-lab-plan-9": "helpLabPlan9", "wfm-help-lab-plan-10": "helpLabPlan10",
+        "wfm-help-lab-plan-11": "helpLabPlan11",
+        "wfm-help-lab-card-results-title": "helpLabCardResultsTitle",
+        "wfm-help-lab-results-1": "helpLabResults1", "wfm-help-lab-results-2": "helpLabResults2",
+        "wfm-help-lab-results-3": "helpLabResults3",
        "wfm-help-prompt-1": "helpPrompt1", "wfm-help-prompt-2": "helpPrompt2",
        "wfm-help-prompt-3": "helpPrompt3", "wfm-help-prompt-4": "helpPrompt4",
        "wfm-help-prompt-5": "helpPrompt5", "wfm-help-prompt-6": "helpPrompt6",
        "wfm-help-prompt-7": "helpPrompt7", "wfm-help-prompt-8": "helpPrompt8",
        "wfm-help-prompt-9": "helpPrompt9",
+        "wfm-help-prompt-card-style-title": "helpPromptCardStyleTitle",
+        "wfm-help-prompt-10": "helpPrompt10", "wfm-help-prompt-11": "helpPrompt11",
+        "wfm-help-prompt-12": "helpPrompt12", "wfm-help-prompt-13": "helpPrompt13",
+        "wfm-help-prompt-14": "helpPrompt14",
+        "wfm-help-prompt-card-toplevel-title": "helpPromptCardToplevel",
+        "wfm-help-prompt-15": "helpPrompt15",
+        "wfm-help-prompt-card-table-title": "helpPromptCardTable",
+        "wfm-help-prompt-16": "helpPrompt16", "wfm-help-prompt-17": "helpPrompt17",
+        "wfm-help-prompt-18": "helpPrompt18", "wfm-help-prompt-19": "helpPrompt19",
+        "wfm-help-prompt-20": "helpPrompt20", "wfm-help-prompt-21": "helpPrompt21",
+        "wfm-help-prompt-22": "helpPrompt22", "wfm-help-prompt-23": "helpPrompt23",
+        "wfm-help-prompt-24": "helpPrompt24", "wfm-help-prompt-25": "helpPrompt25",
+        "wfm-help-prompt-26": "helpPrompt26",
        "wfm-help-settings-1": "helpSettings1", "wfm-help-settings-2": "helpSettings2",
        "wfm-help-settings-3": "helpSettings3", "wfm-help-settings-4": "helpSettings4",
        "wfm-help-settings-5": "helpSettings5", "wfm-help-settings-6": "helpSettings6",
        "wfm-help-settings-7": "helpSettings7", "wfm-help-settings-8": "helpSettings8",
        "wfm-help-settings-9": "helpSettings9", "wfm-help-settings-10": "helpSettings10",
        "wfm-help-settings-11": "helpSettings11", "wfm-help-settings-12": "helpSettings12",
-        "wfm-help-settings-13": "helpSettings13",
+        "wfm-help-settings-13": "helpSettings13", "wfm-help-settings-14": "helpSettings14",
+        "wfm-help-settings-15": "helpSettings15", "wfm-help-settings-16": "helpSettings16",
+        "wfm-help-settings-17": "helpSettings17",
+        "wfm-help-settings-18": "helpSettings18", "wfm-help-settings-19": "helpSettings19",
+        "wfm-help-settings-20": "helpSettings20", "wfm-help-settings-21": "helpSettings21",
+        "wfm-help-settings-22": "helpSettings22",
+        "wfm-help-settings-23": "helpSettings23", "wfm-help-settings-24": "helpSettings24", "wfm-help-settings-25": "helpSettings25",
        "wfm-help-nodes-1": "helpNodes1", "wfm-help-nodes-2": "helpNodes2",
        "wfm-help-nodes-3": "helpNodes3", "wfm-help-nodes-4": "helpNodes4",
        "wfm-help-nodes-5": "helpNodes5", "wfm-help-nodes-6": "helpNodes6",
@@ -412,7 +579,17 @@ function applyI18nToHtml() {
        "wfm-help-gallery-11": "helpGallery11", "wfm-help-gallery-12": "helpGallery12",
        "wfm-help-gallery-13": "helpGallery13", "wfm-help-gallery-14": "helpGallery14",
        "wfm-help-gallery-15": "helpGallery15", "wfm-help-gallery-16": "helpGallery16",
-        "wfm-help-gallery-17": "helpGallery17",
+        "wfm-help-gallery-17": "helpGallery17", "wfm-help-gallery-27": "helpGallery27",
+        "wfm-help-gallery-18": "helpGallery18", "wfm-help-gallery-19": "helpGallery19",
+        "wfm-help-gallery-20": "helpGallery20", "wfm-help-gallery-21": "helpGallery21",
+        "wfm-help-gallery-22": "helpGallery22", "wfm-help-gallery-23": "helpGallery23",
+        "wfm-help-gallery-24": "helpGallery24", "wfm-help-gallery-25": "helpGallery25",
+        "wfm-help-gallery-26": "helpGallery26",
+        "wfm-help-gallery-28": "helpGallery28", "wfm-help-gallery-29": "helpGallery29",
+        "wfm-help-gallery-30": "helpGallery30", "wfm-help-gallery-31": "helpGallery31",
+        "wfm-help-gallery-32": "helpGallery32", "wfm-help-gallery-33": "helpGallery33", "wfm-help-gallery-34": "helpGallery34", "wfm-help-gallery-35": "helpGallery35", "wfm-help-gallery-36": "helpGallery36",
+        "wfm-help-gallery-card-styleprompt-title": "helpGalleryCardStyleprompt",
+        "wfm-help-gallery-card-stylecatalog-title": "helpGalleryCardStylecatalog",
        "wfm-help-tagger-title": "helpTaggerTitle",
        "wfm-help-tagger-1": "helpTagger1", "wfm-help-tagger-2": "helpTagger2",
        "wfm-help-tagger-3": "helpTagger3", "wfm-help-tagger-4": "helpTagger4",
@@ -432,7 +609,18 @@ function applyI18nToHtml() {
        "wfm-help-sidepanel-17": "helpSidepanel17",
        "wfm-help-ai-title": "helpAiTitle",
        "wfm-help-ai-1": "helpAi1", "wfm-help-ai-2": "helpAi2", "wfm-help-ai-3": "helpAi3",
-        "wfm-help-ai-4": "helpAi4", "wfm-help-ai-5": "helpAi5", "wfm-help-ai-6": "helpAi6",
+        "wfm-help-ai-4": "helpAi4", "wfm-help-ai-6": "helpAi6",
+        "wfm-help-ai-7": "helpAi7",
+        "wfm-help-ai-8": "helpAi8",
+        "wfm-help-ai-9": "helpAi9",
+        "wfm-help-ai-card-layout-title": "helpAiCardLayout",
+        "wfm-help-ai-card-translate-title": "helpAiCardTranslate",
+        "wfm-help-ai-card-chat-title": "helpAiCardChat",
+        "wfm-help-ai-card-svg-title": "helpAiCardSvg",
+        "wfm-help-ai-card-skills-title": "helpAiCardSkills",
+        "wfm-help-ai-card-skilltips-title": "helpAiCardSkillTips",
+        "wfm-help-ai-card-tools-title": "helpAiCardTools",
+        "wfm-help-ai-card-settings-title": "helpAiCardSettings",
        "wfm-help-imageedit-title": "helpImageEditTitle",
        "wfm-help-imageedit-tools-title": "helpImageEditToolsTitle",
        "wfm-help-imageedit-layer-title": "helpImageEditLayerTitle",
@@ -447,13 +635,16 @@ function applyI18nToHtml() {
        "wfm-help-imageedit-12": "helpImageEdit12", "wfm-help-imageedit-13": "helpImageEdit13",
        "wfm-help-imageedit-14": "helpImageEdit14", "wfm-help-imageedit-15": "helpImageEdit15",
        "wfm-help-imageedit-16": "helpImageEdit16", "wfm-help-imageedit-17": "helpImageEdit17",
-        "wfm-help-imageedit-18": "helpImageEdit18", "wfm-help-imageedit-19": "helpImageEdit19",
+        "wfm-help-imageedit-18": "helpImageEdit18",
+        "wfm-help-imageedit-19b": "helpImageEdit19b",
        "wfm-help-imageedit-20": "helpImageEdit20", "wfm-help-imageedit-21": "helpImageEdit21",
        "wfm-help-imageedit-22": "helpImageEdit22", "wfm-help-imageedit-23": "helpImageEdit23",
        "wfm-help-imageedit-24": "helpImageEdit24", "wfm-help-imageedit-25": "helpImageEdit25",
        "wfm-help-imageedit-26": "helpImageEdit26", "wfm-help-imageedit-27": "helpImageEdit27",
        "wfm-help-imageedit-28": "helpImageEdit28", "wfm-help-imageedit-29": "helpImageEdit29",
        "wfm-help-imageedit-30": "helpImageEdit30",
+        "wfm-help-imageedit-31": "helpImageEdit31", "wfm-help-imageedit-32": "helpImageEdit32",
+        "wfm-help-imageedit-33": "helpImageEdit33", "wfm-help-imageedit-34": "helpImageEdit34",
        "wfm-help-imageedit-7b": "helpImageEdit7b", "wfm-help-imageedit-7c": "helpImageEdit7c",
        "wfm-help-imageedit-7d": "helpImageEdit7d", "wfm-help-imageedit-7e": "helpImageEdit7e",
        "wfm-help-imageedit-8b": "helpImageEdit8b",
@@ -473,6 +664,7 @@ function applyI18nToHtml() {
        "wfm-help-imageedit-mask-9": "helpImageEditMask9", "wfm-help-imageedit-mask-10": "helpImageEditMask10",
        "wfm-help-imageedit-mask-11": "helpImageEditMask11", "wfm-help-imageedit-mask-12": "helpImageEditMask12",
        "wfm-help-imageedit-mask-13": "helpImageEditMask13",
+        "wfm-help-imageedit-mask-14": "helpImageEditMask14",
        "wfm-help-imageedit-gmic-title": "helpImageEditGmicTitle",
        "wfm-help-imageedit-gmic-1": "helpImageEditGmic1", "wfm-help-imageedit-gmic-2": "helpImageEditGmic2",
        "wfm-help-imageedit-gmic-3": "helpImageEditGmic3", "wfm-help-imageedit-gmic-4": "helpImageEditGmic4",
@@ -493,11 +685,75 @@ function applyI18nToHtml() {
        "wfm-help-trouble-3": "helpTrouble3", "wfm-help-trouble-4": "helpTrouble4",
        "wfm-help-trouble-5": "helpTrouble5", "wfm-help-trouble-6": "helpTrouble6",
        "wfm-help-trouble-7": "helpTrouble7", "wfm-help-trouble-8": "helpTrouble8",
+        "wfm-help-trouble-9": "helpTrouble9",
        "wfm-help-support-title": "helpSupportTitle",
        "wfm-help-support-desc": "helpSupportDesc",
        "wfm-help-github-desc": "helpGithubDesc",
        "wfm-help-kofi-desc": "helpKofiDesc",
        "wfm-help-thanks": "helpThanks",
+        // -- Help card headings (card-based redesign) --
+        "wfm-help-about-card-getting-started-title": "helpAboutCardGettingStarted",
+        "wfm-help-wf-title": "helpWfTitle",
+        "wfm-help-wf-card-browse-title": "helpWfCardBrowse",
+        "wfm-help-wf-card-groups-title": "helpWfCardGroups",
+        "wfm-help-wf-card-panel-title": "helpWfCardPanel",
+        "wfm-help-gen-title": "helpGenTitle",
+        "wfm-help-gen-card-connect-title": "helpGenCardConnect",
+        "wfm-help-gen-card-tabs-title": "helpGenCardTabs",
+        "wfm-help-gen-card-seed-title": "helpGenCardSeed",
+        "wfm-help-gen-card-batchsetup-title": "helpGenCardBatchSetup",
+        "wfm-help-gen-card-batchtypes-title": "helpGenCardBatchTypes",
+        "wfm-help-gen-card-lora-title": "helpGenCardLora",
+        "wfm-help-prompt-title": "helpPromptTitle",
+        "wfm-help-prompt-card-ai-title": "helpPromptCardAi",
+        "wfm-help-prompt-card-presets-title": "helpPromptCardPresets",
+        "wfm-help-prompt-card-wildcards-title": "helpPromptCardWildcards",
+        "wfm-help-metadata-card-overview-title": "helpMetadataCardOverview",
+        "wfm-help-metadata-card-extracted-title": "helpMetadataCardExtracted",
+        "wfm-help-metadata-card-formats-title": "helpMetadataCardFormats",
+        "wfm-help-settings-title": "helpSettingsTitle",
+        "wfm-help-settings-card-general-title": "helpSettingsCardGeneral",
+        "wfm-help-settings-card-connections-title": "helpSettingsCardConnections",
+        "wfm-help-settings-card-workflow-title": "helpSettingsCardWorkflow",
+        "wfm-help-settings-card-editor-title": "helpSettingsCardEditor",
+        "wfm-help-settings-card-misc-title": "helpSettingsCardMisc",
+        "wfm-help-nodes-title": "helpNodesTitle",
+        "wfm-help-nodes-card-browse-title": "helpNodesCardBrowse",
+        "wfm-help-nodes-card-groups-title": "helpNodesCardGroups",
+        "wfm-help-nodes-card-panel-title": "helpNodesCardPanel",
+        "wfm-help-gallery-card-browse-title": "helpGalleryCardBrowse",
+        "wfm-help-gallery-card-folder-title": "helpGalleryCardFolder",
+        "wfm-help-gallery-card-detail-title": "helpGalleryCardDetail",
+        "wfm-help-gallery-card-actions-title": "helpGalleryCardActions",
+        "wfm-help-gallery-card-formats-title": "helpGalleryCardFormats",
+        "wfm-help-models-title": "helpModelsTitle",
+        "wfm-help-models-card-browse-title": "helpModelsCardBrowse",
+        "wfm-help-models-card-civitai-title": "helpModelsCardCivitai",
+        "wfm-help-models-card-apply-title": "helpModelsCardApply",
+        "wfm-help-models-card-groups-title": "helpModelsCardGroups",
+        "wfm-help-models-card-bulk-title": "helpModelsCardBulk",
+        "wfm-help-sidepanel-card-tabs-title": "helpSidepanelCardTabs",
+        "wfm-help-sidepanel-card-dnd-title": "helpSidepanelCardDnd",
+        "wfm-help-sidepanel-card-info-title": "helpSidepanelCardInfo",
+        "wfm-help-sidepanel-card-ai-title": "helpSidepanelCardAi",
+        "wfm-help-sidepanel-card-nav-title": "helpSidepanelCardNav",
+        "wfm-help-tagger-card-overview-title": "helpTaggerCardOverview",
+        "wfm-help-tagger-card-single-title": "helpTaggerCardSingle",
+        "wfm-help-tagger-card-sending-title": "helpTaggerCardSending",
+        "wfm-help-tagger-card-batch-title": "helpTaggerCardBatch",
+        "wfm-help-imageedit-card-overview-title": "helpImageEditCardOverview",
+        "wfm-help-shortcuts-card-general-title": "helpShortcutsCardGeneral",
+        "wfm-help-trouble-card-connection-title": "helpTroubleCardConnection",
+        "wfm-help-trouble-card-workflow-title": "helpTroubleCardWorkflow",
+        "wfm-help-trouble-card-tagger-title": "helpTroubleCardTagger",
+        "wfm-help-video-title": "helpVideoTitle",
+        "wfm-help-video-desc": "helpVideoDesc",
+        "wfm-help-video-1": "helpVideo1", "wfm-help-video-2": "helpVideo2",
+        "wfm-help-video-3": "helpVideo3", "wfm-help-video-4": "helpVideo4",
+        "wfm-help-video-5": "helpVideo5", "wfm-help-video-6": "helpVideo6",
+        "wfm-help-video-7": "helpVideo7", "wfm-help-video-8": "helpVideo8",
+        "wfm-help-video-9": "helpVideo9", "wfm-help-video-10": "helpVideo10",
+        "wfm-help-video-11": "helpVideo11", "wfm-help-video-12": "helpVideo12",
    };
    for (const [id, key] of Object.entries(helpIdMap)) {
        const el = document.getElementById(id);
@@ -510,6 +766,11 @@ function applyI18nToHtml() {
        helpSearch.placeholder = t("helpSearchPlaceholder");
        helpSearch.addEventListener("input", _onHelpSearch);
    }
+
+    // Jump-to-tab buttons
+    document.querySelectorAll(".wfm-help-jump-btn").forEach((btn) => {
+        btn.textContent = t("helpJumpToTab");
+    });
 }

 function _onHelpSearch(e) {
@@ -575,13 +836,15 @@ import { initWorkflowTab } from "./workflow-tab.js";
 import { initNodesTab } from "./nodes-tab.js";
 import { initGenerateTab } from "./generate-tab.js";
 import { initPromptTab } from "./prompt-tab.js";
-import { initSettingsTab, applyTheme, getSavedTheme, applyTextareaFontSize, applyJsonColors } from "./settings-tab.js";
+import { initPromptTableTab } from "./prompt-table.js";
+import { initSettingsTab, applyTheme, getSavedTheme, applyTextareaFontSize, applyJsonColors, applyModelTabActiveColor } from "./settings-tab.js";
 import { initModelsTab } from "./models-tab.js";
 import { initGalleryTab } from "./gallery-tab.js";
 import { initMetadataTab } from "./metadata-tab.js";
 import { initAiTab } from "./ai-tab.js";
 import { initTaggerTab } from "./tagger-tab.js";
 import { imageEditTab } from "./image-edit-tab.js";
+import { initVideoTab } from "./video-tab.js";

 // Apply saved theme immediately to prevent flash of default theme
 applyTheme(getSavedTheme());
@@ -591,6 +854,7 @@ try {
    const _s = getSettings();
    if (_s.textareaFontSize) applyTextareaFontSize(_s.textareaFontSize);
    applyJsonColors(_s.jsonColors);
+    applyModelTabActiveColor(_s.modelTabActiveColor);
 } catch {}

 function initHelpTab() {
@@ -603,6 +867,16 @@ function initHelpTab() {
            document.getElementById(`wfm-help-page-${page}`)?.classList.add("active");
        });
    });
+
+    // Jump-to-tab buttons: switch to the real feature tab this help page documents
+    document.querySelectorAll(".wfm-help-jump-btn").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            document.querySelector(`.wfm-tab[data-tab="${btn.dataset.jumpTab}"]`)?.click();
+            if (btn.dataset.jumpSubtab) {
+                document.querySelector(`.wfm-gallery-subtab-btn[data-gallery-subtab="${btn.dataset.jumpSubtab}"]`)?.click();
+            }
+        });
+    });
 }

 document.addEventListener("DOMContentLoaded", () => {
@@ -616,11 +890,13 @@ document.addEventListener("DOMContentLoaded", () => {
    initModelsTab();
    initGenerateTab();
    initPromptTab();
+    initPromptTableTab();
    initMetadataTab();
    initGalleryTab();
    initAiTab();
    initTaggerTab();
    imageEditTab.init();
+    initVideoTab();

    console.log("Workflow Studio: App initialized");
 });
@@ -3,6 +3,8 @@
 * Handles communication with ComfyUI server (same origin)
 */

+import { prepareVramForGeneration } from "./vram-prepare.js";
+
 function _uuid() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
        const r = (Math.random() * 16) | 0;
@@ -18,8 +20,15 @@ export const comfyUI = {
    connected: false,
    generating: false,
    currentPromptId: null,
+    // trackProgress() 実行中の Promise を promptId -> reject関数 で保持。
+    // WebSocket切断時に、待機中のPromiseを解決させずに放置してバッチループが
+    // 無言のまま停止する（例: カタログ作成バッチが特定件数で止まる）のを防ぐ。
+    _pendingTrackers: new Map(),
    currentWorkflow: null,
    currentAnalysis: null,
+    // ワークフロー読み込み時点のLora Loader (LoraManager)ノードの loras/text 状態。
+    // Stackグループチェックボックスのトグル時に、OFF側の「読み込み時の状態へ戻す」用に使う。
+    loraManagerSnapshots: {},

    updateUrl(url) {
        if (!url) {
@@ -66,10 +75,18 @@ export const comfyUI = {
            this.socket = new WebSocket(url);
            this.socket.onopen = () => resolve(true);
            this.socket.onerror = () => resolve(false);
-            this.socket.onclose = () => { this.socket = null; };
+            this.socket.onclose = () => {
+                this.socket = null;
+                this._rejectPendingTrackers(new Error("WebSocket disconnected"));
+            };
        });
    },

+    _rejectPendingTrackers(err) {
+        for (const rejectFn of this._pendingTrackers.values()) rejectFn(err);
+        this._pendingTrackers.clear();
+    },
+
    // Node info fetching
    async fetchObjectInfo(nodeClass) {
        const res = await fetch(`${this.baseUrl}/object_info/${nodeClass}`);
@@ -179,6 +196,8 @@ export const comfyUI = {

    // Generation
    async queuePrompt(workflow, extraData = null) {
+        // Settings tab "VRAM Management": unload Ollama models to free VRAM (no-op when off, never throws)
+        await prepareVramForGeneration();
        const body = {
            prompt: workflow,
            client_id: this.clientId,
@@ -196,12 +215,29 @@ export const comfyUI = {
        return await res.json();
    },

-    trackProgress(promptId, progressCallback) {
+    // timeoutMs: この時間内に完了/エラー/中断通知が来なければ強制的にreject。
+    // WebSocketの取りこぼしやexecution_interrupted未処理でPromiseが永久に
+    // ぶら下がり続け、バッチループが無言で停止するのを防ぐための安全弁。
+    trackProgress(promptId, progressCallback, timeoutMs = 10 * 60 * 1000) {
        return new Promise((resolve, reject) => {
            if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
                reject(new Error("WebSocket not connected"));
                return;
            }
+            let settled = false;
+            const finish = (isResolve, value) => {
+                if (settled) return;
+                settled = true;
+                this.socket?.removeEventListener("message", handler);
+                clearTimeout(timer);
+                this._pendingTrackers.delete(promptId);
+                if (isResolve) resolve(value); else reject(value);
+            };
+
+            const timer = setTimeout(() => {
+                finish(false, new Error(`Generation timed out after ${Math.round(timeoutMs / 1000)}s (prompt_id=${promptId})`));
+            }, timeoutMs);
+
            const handler = (event) => {
                try {
                    const msg = JSON.parse(event.data);
@@ -211,17 +247,19 @@ export const comfyUI = {
                    }
                    if (msg.type === "executing" && msg.data?.prompt_id === promptId) {
                        if (msg.data.node === null) {
-                            this.socket.removeEventListener("message", handler);
-                            resolve();
+                            finish(true);
                        }
                    }
                    if (msg.type === "execution_error" && msg.data?.prompt_id === promptId) {
-                        this.socket.removeEventListener("message", handler);
-                        reject(new Error(msg.data.exception_message || "Execution error"));
+                        finish(false, new Error(msg.data.exception_message || "Execution error"));
+                    }
+                    if (msg.type === "execution_interrupted" && msg.data?.prompt_id === promptId) {
+                        finish(false, new Error("Execution interrupted"));
                    }
                } catch {}
            };
            this.socket.addEventListener("message", handler);
+            this._pendingTrackers.set(promptId, (err) => finish(false, err));
        });
    },

@@ -240,7 +278,13 @@ export const comfyUI = {
        });
        const res = await fetch(`${this.baseUrl}/view?${params}`);
        if (!res.ok) throw new Error(`Failed to fetch image: HTTP ${res.status}`);
-        return await res.blob();
+        const blob = await res.blob();
+        // /view はSVGをセキュリティ上application/octet-streamで返すため、
+        // <img>で表示できるよう拡張子から正しいMIMEタイプへ付け替える
+        if (imageData.filename?.toLowerCase().endsWith(".svg") && blob.type !== "image/svg+xml") {
+            return blob.slice(0, blob.size, "image/svg+xml");
+        }
+        return blob;
    },

    async uploadImage(file, filename, overwrite = true) {
@@ -270,7 +314,7 @@ export const comfyUI = {

    // High-level generate
    async generate(workflow, options = {}) {
-        const { seedMode = "random", seedValue = -1, onProgress, onComplete, onError } = options;
+        const { seedMode = "random", seedValue = -1, onProgress, onComplete, onError, timeoutMs } = options;

        this.generating = true;
        try {
@@ -292,7 +336,7 @@ export const comfyUI = {
            this.currentPromptId = result.prompt_id;

            // Track progress
-            await this.trackProgress(result.prompt_id, onProgress);
+            await this.trackProgress(result.prompt_id, onProgress, timeoutMs);

            // Get history/results
            const history = await this.getHistory(result.prompt_id);
@@ -300,6 +344,9 @@ export const comfyUI = {

            // Extract images from SaveImage outputs only
            const images = [];
+            // comfyui-tosvg の "Save SVG String" ノードは images ではなく
+            // saved_svg(ファイル名) / path(絶対パス) という独自キーで返す
+            const svgOutputs = [];
            const outputs = history.outputs || {};
            for (const nodeOutput of Object.values(outputs)) {
                if (nodeOutput.images) {
@@ -307,10 +354,23 @@ export const comfyUI = {
                        images.push(img);
                    }
                }
+                if (nodeOutput.saved_svg) {
+                    // ComfyUI の実行エンジンは ui 出力の各値をイテラブルとして連結するため、
+                    // ノード側が単一文字列で返すと 1 文字ずつ分解された配列になってしまう。
+                    // (例: "a.svg" -> ["a",".","s","v","g"]) 文字配列を検出したら結合して復元する。
+                    const joinIfCharArray = (v) =>
+                        Array.isArray(v) && v.every((c) => typeof c === "string" && c.length === 1)
+                            ? v.join("")
+                            : v;
+                    svgOutputs.push({
+                        filename: joinIfCharArray(nodeOutput.saved_svg),
+                        path: joinIfCharArray(nodeOutput.path) || "",
+                    });
+                }
            }

            onComplete?.(images, seed);
-            return { images, seed };
+            return { images, seed, svgOutputs };
        } catch (err) {
            onError?.(err);
            throw err;
@@ -5,7 +5,8 @@
 import { comfyUI } from "./comfyui-client.js";
 import { syncJsonHighlight } from "./json-highlight.js";
 import { t } from "./i18n.js";
-import { escapeHtml } from "./util.js";
+import { escapeHtml, setupSearchClearBtn } from "./util.js";
+import { showToast } from "./app.js";

 // ── Latent Image preset state ─────────────────────────────
 const _LATENT_PRESET_KEY = "wfm_latent_presets";
@@ -27,6 +28,114 @@ function _saveLatentPresets(list) {
    localStorage.setItem(_LATENT_PRESET_KEY, JSON.stringify(list));
 }

+// ── I2I placeholder image (Input tab / Image sub-panel) ──────────────────
+// One shared default (color-generated or a fixed uploaded image), remembered across
+// sessions. Each LoadImage slot's own "Placeholder" button applies this same default
+// to just that slot — see renderImageTab.
+const _I2I_PLACEHOLDER_KEY = "wfm_i2i_placeholder";
+const _I2I_PLACEHOLDER_DEFAULT = { mode: "color", color: "#808080", width: 512, height: 512, imageFilename: "" };
+
+function _loadI2IPlaceholderConfig() {
+    try {
+        const raw = localStorage.getItem(_I2I_PLACEHOLDER_KEY);
+        return raw ? { ..._I2I_PLACEHOLDER_DEFAULT, ...JSON.parse(raw) } : { ..._I2I_PLACEHOLDER_DEFAULT };
+    } catch { return { ..._I2I_PLACEHOLDER_DEFAULT }; }
+}
+
+function _saveI2IPlaceholderConfig(cfg) {
+    localStorage.setItem(_I2I_PLACEHOLDER_KEY, JSON.stringify(cfg));
+}
+
+// Renders a solid-color PNG on an offscreen canvas and returns it as a File, ready to
+// upload through comfyUI.uploadImage() the same way a picked/dropped file would be.
+function _generateColorImageFile(width, height, color) {
+    return new Promise((resolve, reject) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(1, width || 512);
+        canvas.height = Math.max(1, height || 512);
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = color || "#808080";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        canvas.toBlob((blob) => {
+            if (!blob) { reject(new Error("Failed to render placeholder image")); return; }
+            resolve(new File([blob], `placeholder_${canvas.width}x${canvas.height}.png`, { type: "image/png" }));
+        }, "image/png");
+    });
+}
+
+// Wires the placeholder config panel at the top of the Image sub-panel (mode switch,
+// color/size fields, default-image drop zone). Every change is persisted immediately via
+// _saveI2IPlaceholderConfig so it's remembered next time the panel is rendered — this
+// panel is display-only config, it doesn't touch any workflow node itself; only each
+// slot's own Placeholder button (see renderImageTab) does that.
+function _wireI2IPlaceholderConfig(scopeEl) {
+    const colorModeRadio = scopeEl.querySelector("#wfm-i2i-ph-mode-color");
+    const imageModeRadio = scopeEl.querySelector("#wfm-i2i-ph-mode-image");
+    const colorFields = scopeEl.querySelector("#wfm-i2i-ph-color-fields");
+    const imageFields = scopeEl.querySelector("#wfm-i2i-ph-image-fields");
+    const widthInput = scopeEl.querySelector("#wfm-i2i-ph-width");
+    const heightInput = scopeEl.querySelector("#wfm-i2i-ph-height");
+    const colorInput = scopeEl.querySelector("#wfm-i2i-ph-color");
+    const dropZone = scopeEl.querySelector("#wfm-i2i-ph-drop");
+    const fileInput = scopeEl.querySelector("#wfm-i2i-ph-file");
+    const previewWrap = scopeEl.querySelector("#wfm-i2i-ph-preview-wrap");
+    const previewImg = scopeEl.querySelector("#wfm-i2i-ph-preview-img");
+    const statusEl = scopeEl.querySelector("#wfm-i2i-ph-status");
+    if (!colorModeRadio) return; // no LoadImage slots rendered — panel doesn't exist
+
+    const setMode = (mode) => {
+        if (colorFields) colorFields.style.display = mode === "color" ? "" : "none";
+        if (imageFields) imageFields.style.display = mode === "image" ? "" : "none";
+        _saveI2IPlaceholderConfig({ ..._loadI2IPlaceholderConfig(), mode });
+    };
+    colorModeRadio.addEventListener("change", () => { if (colorModeRadio.checked) setMode("color"); });
+    imageModeRadio?.addEventListener("change", () => { if (imageModeRadio.checked) setMode("image"); });
+
+    widthInput?.addEventListener("change", () => {
+        const width = Math.max(1, parseInt(widthInput.value, 10) || 512);
+        widthInput.value = width;
+        _saveI2IPlaceholderConfig({ ..._loadI2IPlaceholderConfig(), width });
+    });
+    heightInput?.addEventListener("change", () => {
+        const height = Math.max(1, parseInt(heightInput.value, 10) || 512);
+        heightInput.value = height;
+        _saveI2IPlaceholderConfig({ ..._loadI2IPlaceholderConfig(), height });
+    });
+    colorInput?.addEventListener("change", () => {
+        _saveI2IPlaceholderConfig({ ..._loadI2IPlaceholderConfig(), color: colorInput.value });
+    });
+
+    // Default image: uploaded to ComfyUI immediately (its filename is what actually gets
+    // reused later, not the raw file) so every slot's Placeholder button can apply it
+    // without re-uploading.
+    const applyDefaultImageFile = async (file) => {
+        if (!file || !file.type.startsWith("image/")) return;
+        if (statusEl) statusEl.textContent = t("i2iPlaceholderUploading");
+        try {
+            const result = await comfyUI.uploadImage(file, file.name);
+            if (!result.name) throw new Error("Upload returned no filename");
+            _saveI2IPlaceholderConfig({ ..._loadI2IPlaceholderConfig(), imageFilename: result.name });
+            if (previewImg) previewImg.src = `/view?filename=${encodeURIComponent(result.name)}&type=input`;
+            if (previewWrap) previewWrap.style.display = "";
+            if (statusEl) { statusEl.textContent = `✓ ${result.name}`; statusEl.style.color = "var(--wfm-success)"; }
+        } catch (err) {
+            if (statusEl) { statusEl.textContent = `✗ ${err.message}`; statusEl.style.color = "var(--wfm-danger)"; }
+        }
+    };
+    fileInput?.addEventListener("change", () => {
+        if (fileInput.files.length > 0) applyDefaultImageFile(fileInput.files[0]);
+    });
+    if (dropZone) {
+        dropZone.addEventListener("dragover", (e) => { e.preventDefault(); dropZone.classList.add("drag-over"); });
+        dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag-over"));
+        dropZone.addEventListener("drop", (e) => {
+            e.preventDefault();
+            dropZone.classList.remove("drag-over");
+            if (e.dataTransfer.files.length > 0) applyDefaultImageFile(e.dataTransfer.files[0]);
+        });
+    }
+}
+
 function _buildPresetOptions(customPresets) {
    const customs = customPresets.map((p) =>
        `<option value="${p.w}x${p.h}">${p.w}x${p.h}</option>`
@@ -48,6 +157,16 @@ function _refreshPresetSelect(customPresets) {
 let _stackStrengths = {};
 // { modelFullPath: boolean } — true = active (default)
 let _stackActive = {};
+// ── LoRA node-bypass state (GenerateUI Model tab header toggle) ───────────
+// Force the LoRA node's strength to 0 without touching the actual ComfyUI node's mode —
+// currentWorkflow is already-converted API format (see comfyui-workflow.js
+// convertUiToApi), where mode has no effect at execution time, so a real Bypass(mode:4)
+// can't be reproduced here; zeroing strength is the behavioral equivalent.
+// { nodeId: boolean } — true = currently bypassed
+let _loraNodeBypass = {};
+// { nodeId: { loraName, strModel, strClip } | { loras, text } } — pre-bypass values to
+// restore when toggled back off. Shape depends on isLoraManager at bypass-time.
+let _loraBypassSnapshot = {};
 // { id: string|null, selStart: number, selEnd: number }
 let _lastPromptFocus = { id: null, selStart: 0, selEnd: 0 };

@@ -344,11 +463,11 @@ export const comfyEditor = {
        return found || name;
    },

-    renderAll(analysis, workflow) {
+    renderAll(analysis, workflow, opts = {}) {
        this.renderPromptTab(analysis, "wfm-gen-prompt-fields");
        this.renderImageTab(analysis, "wfm-gen-image-fields");
        this.renderModelTab(analysis, "wfm-gen-model-fields");
-        this.renderLoraPane(analysis, "wfm-gen-lora-fields"); // async, fires independently
+        this.renderLoraPane(analysis, "wfm-gen-lora-fields", opts); // async, fires independently
        this.renderSettingsTab(analysis, "wfm-gen-settings-fields");
        _syncRawJson();
    },
@@ -367,7 +486,7 @@ export const comfyEditor = {
                <label>Positive Prompt</label>
                <div style="display:flex;gap:8px;margin-bottom:6px;">
                    <select id="wfm-prompt-pos-target" class="wfm-select" style="width:auto;flex:1;min-width:0;">
-                        ${positiveNodes.map((n) => `<option value="${n.id}" data-text-key="${n.textKey || "text"}" selected>ID:${n.id} (${n.title})</option>`).join("")}
+                        ${positiveNodes.map((n, i) => `<option value="${n.id}" data-text-key="${n.textKey || "text"}" ${i === 0 ? "selected" : ""}>ID:${n.id} (${n.title})</option>`).join("")}
                        ${nodeOpts}
                    </select>
                    <button class="wfm-btn wfm-btn-sm" id="wfm-prompt-pos-revert" title="${t("revertPromptTitle")}">↺</button>
@@ -379,7 +498,7 @@ export const comfyEditor = {
                <label>Negative Prompt</label>
                <div style="display:flex;gap:8px;margin-bottom:6px;">
                    <select id="wfm-prompt-neg-target" class="wfm-select" style="width:auto;flex:1;min-width:0;">
-                        ${negativeNodes.map((n) => `<option value="${n.id}" data-text-key="${n.textKey || "text"}" selected>ID:${n.id} (${n.title})</option>`).join("")}
+                        ${negativeNodes.map((n, i) => `<option value="${n.id}" data-text-key="${n.textKey || "text"}" ${i === 0 ? "selected" : ""}>ID:${n.id} (${n.title})</option>`).join("")}
                        ${nodeOpts}
                    </select>
                    <button class="wfm-btn wfm-btn-sm" id="wfm-prompt-neg-revert" title="${t("revertPromptTitle")}">↺</button>
@@ -508,10 +627,14 @@ export const comfyEditor = {
        const el = document.getElementById(containerId);
        if (!el) return;

-        const sections = [
+        // 使用頻度の高い順: Checkpoint/VAE/Diffusion Model/Text Encoder は常時表示。
+        // ControlNet/Hypernetwork は意図的に使う場面が限られるため折りたたみにする。
+        const mainSections = [
            { label: "Checkpoint", key: "checkpoints", nodes: analysis.checkpoint_nodes, inputKey: "ckpt_name" },
            { label: "VAE", key: "vaes", nodes: analysis.vae_nodes, inputKey: "vae_name" },
            { label: "Diffusion Model", key: "diffusionModels", nodes: analysis.diffusion_model_nodes, inputKey: "unet_name" },
+        ];
+        const collapsibleSections = [
            { label: "ControlNet", key: "controlNets", nodes: analysis.controlnet_nodes, inputKey: "control_net_name" },
            {
                label: "Hypernetwork", key: "hypernetworks", nodes: analysis.hypernetwork_nodes, inputKey: "hypernetwork_name",
@@ -519,48 +642,70 @@ export const comfyEditor = {
            },
        ];

-        el.innerHTML = sections
-            .map((s) => {
-                const models = this.models[s.key] || [];
-                const currentVal = s.nodes?.[0]?.[s.inputKey] || "";
-                const isMissing = !!currentVal && !models.includes(currentVal);
-                const targetOpts = s.nodes
-                    .map((n) => `<option value="${n.id}">ID:${n.id} (${n.title})</option>`)
-                    .join("");
-                const extrasHtml = (s.extras || []).map((ex) => {
-                    const curVal = s.nodes?.[0]?.[ex.inputKey] ?? ex.defaultVal;
-                    return `<div style="display:flex;gap:6px;align-items:center;margin-top:4px;">
-                        <label style="font-size:12px;white-space:nowrap;color:var(--wfm-text-secondary);">${ex.label}</label>
-                        <input type="${ex.type}" class="wfm-input wfm-model-extra" id="wfm-model-${s.key}-${ex.inputKey}"
-                            data-key="${s.key}" data-input-key="${ex.inputKey}"
-                            value="${curVal}" step="${ex.step}" min="${ex.min}" max="${ex.max}"
-                            style="width:80px;">
-                    </div>`;
-                }).join("");
+        const renderSectionBody = (s) => {
+            const models = this.models[s.key] || [];
+            const currentVal = s.nodes?.[0]?.[s.inputKey] || "";
+            const isMissing = !!currentVal && !models.includes(currentVal);
+            const targetOpts = s.nodes
+                .map((n) => `<option value="${n.id}">ID:${n.id} (${n.title})</option>`)
+                .join("");
+            const extrasHtml = (s.extras || []).map((ex) => {
+                const curVal = s.nodes?.[0]?.[ex.inputKey] ?? ex.defaultVal;
+                return `<div style="display:flex;gap:6px;align-items:center;margin-top:4px;">
+                    <label style="font-size:12px;white-space:nowrap;color:var(--wfm-text-secondary);">${ex.label}</label>
+                    <input type="${ex.type}" class="wfm-input wfm-model-extra" id="wfm-model-${s.key}-${ex.inputKey}"
+                        data-key="${s.key}" data-input-key="${ex.inputKey}"
+                        value="${curVal}" step="${ex.step}" min="${ex.min}" max="${ex.max}"
+                        style="width:80px;">
+                </div>`;
+            }).join("");

-                return `
-                <div class="wfm-form-group" style="border-bottom:1px solid var(--wfm-border);padding-bottom:12px;">
-                    <label>${s.label}</label>
-                    <input type="text" class="wfm-input wfm-model-filter" placeholder="Filter..." data-target="wfm-model-${s.key}" style="margin-bottom:4px;">
-                    <select class="wfm-select ${isMissing ? "wfm-select-missing" : ""}" id="wfm-model-${s.key}" style="margin-bottom:4px;">
-                        ${isMissing ? `<option value="${escapeHtml(currentVal)}" selected>⚠ ${escapeHtml(currentVal)} (${t("modelNotFound")})</option>` : ""}
-                        ${models.map((m) => `<option value="${m}" ${m === currentVal ? "selected" : ""}>${m}</option>`).join("")}
-                    </select>
-                    ${isMissing ? `<div class="wfm-model-missing-hint">${t("modelNotFoundHint")}</div>` : ""}
-                    ${extrasHtml}
-                    <div style="display:flex;gap:8px;align-items:center;margin-top:4px;">
-                        <select class="wfm-select" id="wfm-model-${s.key}-target" style="flex:1;">${targetOpts}</select>
-                        <button class="wfm-btn wfm-btn-sm wfm-model-apply" data-key="${s.key}" data-input="${s.inputKey}" title="Apply (Alt+Click: Apply &amp; Generate)">Apply</button>
-                    </div>
+            return `
+                <div class="wfm-search-wrap" style="margin-bottom:4px;width:100%;">
+                    <input type="text" class="wfm-input wfm-search-input wfm-model-filter" id="wfm-model-${s.key}-filter" placeholder="Filter..." data-target="wfm-model-${s.key}">
+                    <button type="button" class="wfm-search-clear-btn" id="wfm-model-${s.key}-filter-clear" title="Clear search">✕</button>
+                </div>
+                <select class="wfm-select ${isMissing ? "wfm-select-missing" : ""}" id="wfm-model-${s.key}" style="margin-bottom:4px;">
+                    ${isMissing ? `<option value="${escapeHtml(currentVal)}" selected>⚠ ${escapeHtml(currentVal)} (${t("modelNotFound")})</option>` : ""}
+                    ${models.map((m) => `<option value="${m}" ${m === currentVal ? "selected" : ""}>${m}</option>`).join("")}
+                </select>
+                ${isMissing ? `<div class="wfm-model-missing-hint">${t("modelNotFoundHint")}</div>` : ""}
+                ${extrasHtml}
+                <div style="display:flex;gap:8px;align-items:center;margin-top:4px;">
+                    <select class="wfm-select" id="wfm-model-${s.key}-target" style="flex:1;">${targetOpts}</select>
+                    <button class="wfm-btn wfm-btn-sm wfm-model-apply" data-key="${s.key}" data-input="${s.inputKey}" title="Apply (Alt+Click: Apply &amp; Generate)">Apply</button>
                </div>
            `;
-            })
-            .join("") + '<div class="wfm-form-group" id="wfm-te-section" style="border-bottom:1px solid var(--wfm-border);padding-bottom:12px;"><label>Text Encoder</label></div>';
+        };
+
+        const mainHtml = mainSections.map((s) => {
+            const hasNodes = (s.nodes?.length || 0) > 0;
+            return `
+            <div class="wfm-form-group" style="border-bottom:1px solid var(--wfm-border);padding-bottom:12px;">
+                <label class="${hasNodes ? "wfm-model-label-active" : ""}">${s.label}</label>
+                ${renderSectionBody(s)}
+            </div>`;
+        }).join("");
+
+        const teHtml = '<div class="wfm-form-group" id="wfm-te-section" style="border-bottom:1px solid var(--wfm-border);padding-bottom:12px;"><label>Text Encoder</label></div>';
+
+        const collapsibleHtml = collapsibleSections.map((s) => {
+            const hasNodes = (s.nodes?.length || 0) > 0;
+            return `
+            <details class="wfm-settings-section">
+                <summary class="wfm-settings-summary ${hasNodes ? "wfm-model-label-active" : ""}">${s.label}</summary>
+                <div class="wfm-form-group" style="margin-bottom:0;">
+                    ${renderSectionBody(s)}
+                </div>
+            </details>`;
+        }).join("");
+
+        el.innerHTML = mainHtml + teHtml + collapsibleHtml;

        // Filter inputs
        el.querySelectorAll(".wfm-model-filter").forEach((input) => {
-            input.addEventListener("input", () => {
-                const targetId = input.dataset.target;
+            const targetId = input.dataset.target;
+            const rebuild = () => {
                const select = document.getElementById(targetId);
                if (!select) return;
                const filter = input.value.toLowerCase();
@@ -570,7 +715,9 @@ export const comfyEditor = {
                    .filter((m) => m.toLowerCase().includes(filter))
                    .map((m) => `<option value="${m}">${m}</option>`)
                    .join("");
-            });
+            };
+            input.addEventListener("input", rebuild);
+            setupSearchClearBtn(input.id, `${input.id}-clear`, rebuild);
        });

        // Apply buttons
@@ -606,13 +753,104 @@ export const comfyEditor = {
        _initTextEncoderSection(analysis, this.models.textEncoders || [], el).catch(() => {});
    },

-    async renderLoraPane(analysis, containerId) {
+    // Toggles the GenerateUI Model tab's LoRA column-header bypass button: forces the
+    // current target LoRA node's strength to 0 (both tabs' strength fields, whichever
+    // is currently in currentWorkflow), or restores whatever was there before. Targets
+    // the same node Single/Stack Apply default to (first LoraManager, else first LoRA
+    // node) so one button covers both tabs without needing its own node picker.
+    toggleLoraNodeBypass(analysis) {
+        const loraNodes = analysis?.lora_nodes || [];
+        let nodeId = (loraNodes.find((n) => n.is_lora_manager) || loraNodes[0])?.id;
+        let isLoraManager = !!loraNodes.find((n) => String(n.id) === String(nodeId))?.is_lora_manager;
+        if (nodeId == null) {
+            nodeId = Object.keys(comfyUI.currentWorkflow || {}).find((id) => comfyUI.currentWorkflow[id]?.inputs && "lora_name" in comfyUI.currentWorkflow[id].inputs);
+            isLoraManager = false;
+        }
+        const wfNode = nodeId != null ? comfyUI.currentWorkflow?.[nodeId] : null;
+        if (!wfNode) {
+            showToast(t("modelsGenUINoNode", "LoRA"), "warning");
+            return;
+        }
+
+        if (_loraNodeBypass[nodeId]) {
+            // Restore whatever was set before bypassing
+            const snap = _loraBypassSnapshot[nodeId];
+            if (snap) {
+                if (isLoraManager) {
+                    wfNode.inputs.loras = { __value__: JSON.parse(JSON.stringify(snap.loras || [])) };
+                    wfNode.inputs.text = snap.text ?? "";
+                } else {
+                    wfNode.inputs.lora_name = snap.lora_name;
+                    wfNode.inputs.strength_model = snap.strength_model;
+                    wfNode.inputs.strength_clip = snap.strength_clip;
+                }
+            }
+            delete _loraNodeBypass[nodeId];
+            delete _loraBypassSnapshot[nodeId];
+        } else {
+            // Snapshot current values, then zero the strength (LoraManager: every
+            // entry in its loras list, keeping the list itself intact so un-bypassing
+            // restores the exact same Stack — not just a single-LoRA fallback).
+            if (isLoraManager) {
+                const loras = Array.isArray(wfNode.inputs.loras?.__value__) ? wfNode.inputs.loras.__value__ : [];
+                _loraBypassSnapshot[nodeId] = { loras: JSON.parse(JSON.stringify(loras)), text: wfNode.inputs.text ?? "" };
+                wfNode.inputs.loras = { __value__: loras.map((l) => ({ ...l, strength: 0, clipStrength: 0 })) };
+                wfNode.inputs.text = "";
+            } else {
+                _loraBypassSnapshot[nodeId] = {
+                    lora_name: wfNode.inputs.lora_name,
+                    strength_model: wfNode.inputs.strength_model,
+                    strength_clip: wfNode.inputs.strength_clip,
+                };
+                wfNode.inputs.strength_model = 0;
+                wfNode.inputs.strength_clip = 0;
+            }
+            _loraNodeBypass[nodeId] = true;
+        }
+        _syncRawJson();
+    },
+
+    async renderLoraPane(analysis, containerId, opts = {}) {
        const el = document.getElementById(containerId);
        if (!el) return;

        const loraNodes = analysis.lora_nodes || [];
+        document.getElementById("wfm-gen-lora-col-title")?.classList.toggle("wfm-model-label-active", loraNodes.length > 0);
        const loras = this.models.loras || [];
        const defaultStackTarget = (loraNodes.find((n) => n.is_lora_manager) || loraNodes[0])?.id;
+        const hasLoraManager = loraNodes.some((n) => n.is_lora_manager);
+
+        // Sync the column-header bypass button (lives outside this container's
+        // innerHTML, in the static wfm-gen-lora-col-header) to whatever the target
+        // node's current bypass state is.
+        const bypassBtn = document.getElementById("wfm-lora-bypass-toggle");
+        if (bypassBtn) {
+            bypassBtn.classList.toggle("active", defaultStackTarget != null && !!_loraNodeBypass[defaultStackTarget]);
+            bypassBtn.disabled = loraNodes.length === 0;
+        }
+        // Use Stack Group チェックボックスの現在状態を先読み(Stack表示の取得元判定に使う)。
+        // resetStackMode(新規読み込み)時は常にOFF扱い。
+        const stackModeChecked = hasLoraManager && !opts.resetStackMode && (el.querySelector("#wfm-lora-stack-mode-toggle")?.checked ?? false);
+
+        // ワークフロー新規読み込み時のみ: LoraManagerノードのloras/text状態をスナップショットし、
+        // Stackグループ使用チェックボックスをOFFへリセットする(既存のGenUI状態への影響を避けるため
+        // タブ切替やStack再読込などの単なる再描画では行わない)。
+        if (opts.resetStackMode) {
+            // New workflow loaded — bypass state/snapshots belonged to the previous
+            // workflow's node IDs, so they can't be meaningfully carried forward.
+            _loraNodeBypass = {};
+            _loraBypassSnapshot = {};
+            comfyUI.loraManagerSnapshots = {};
+            for (const n of loraNodes) {
+                if (!n.is_lora_manager) continue;
+                const wfNode = comfyUI.currentWorkflow?.[n.id];
+                if (!wfNode?.inputs) continue;
+                comfyUI.loraManagerSnapshots[n.id] = {
+                    loras: Array.isArray(wfNode.inputs.loras?.__value__) ? JSON.parse(JSON.stringify(wfNode.inputs.loras.__value__)) : [],
+                    text: wfNode.inputs.text ?? "",
+                };
+            }
+        }
        const nodeOpts = loraNodes
            .map((n) => `<option value="${n.id}">ID:${n.id} (${n.title})</option>`)
            .join("");
@@ -637,26 +875,53 @@ export const comfyEditor = {
            }
        }

-        // Fetch Stack group, metadata, CivitAI cache in parallel
+        // Stack表示の取得元: ON(Use Stack Group)ならModelsタブの登録済みStackグループ、
+        // OFF(既定)ならLoraManagerノードに実際に設定されているLoRAをそのまま表示する。
        let stackModels = [];
        let metadata = {};
        let civitaiCache = {};
+        const useWorkflowLoraState = hasLoraManager && !stackModeChecked;
        try {
-            const [grpRes, metaRes, civRes] = await Promise.all([
-                fetch("/api/wfm/models/groups?type=lora"),
+            const [metaRes, civRes] = await Promise.all([
                fetch("/api/wfm/models/metadata"),
                fetch("/api/wfm/models/civitai/cache"),
            ]);
-            const groups = grpRes.ok ? await grpRes.json() : {};
-            stackModels = groups["Stack"] || [];
            metadata = metaRes.ok ? await metaRes.json() : {};
            civitaiCache = civRes.ok ? await civRes.json() : {};
        } catch { /* ignore */ }

-        stackModels.forEach((m) => {
-            if (!_stackStrengths[m]) _stackStrengths[m] = { m: 1.0, c: 1.0 };
-            if (_stackActive[m] === undefined) _stackActive[m] = true;
-        });
+        if (stackModeChecked) {
+            try {
+                const grpRes = await fetch("/api/wfm/models/groups?type=lora");
+                const groups = grpRes.ok ? await grpRes.json() : {};
+                stackModels = groups["Stack"] || [];
+            } catch { /* ignore */ }
+            stackModels.forEach((m) => {
+                if (!_stackStrengths[m]) _stackStrengths[m] = { m: 1.0, c: 1.0 };
+                if (_stackActive[m] === undefined) _stackActive[m] = true;
+            });
+        } else if (useWorkflowLoraState) {
+            const wfNode = comfyUI.currentWorkflow?.[defaultStackTarget];
+            const wfLoras = wfNode?.inputs?.loras?.__value__;
+            // resetStackMode(新規読み込み)/syncFromWorkflow(チェックボックスOFF切替直後)の時だけ
+            // ワークフローの実データで強制上書きする。タブ切替等の単なる再描画では、
+            // 既にメモリ上に値があればそれを維持し、Stackパネルでの一時的なON/OFF・強度編集を
+            // 再描画のたびに消してしまわないようにする。
+            const shouldSync = opts.resetStackMode || opts.syncFromWorkflow;
+            if (Array.isArray(wfLoras)) {
+                stackModels = wfLoras.map((l) => {
+                    const found = (this.models.loras || []).find((m) => _loraBasename(m) === l.name);
+                    const full = found || l.name;
+                    if (shouldSync || _stackStrengths[full] === undefined) {
+                        _stackStrengths[full] = { m: parseFloat(l.strength) || 1.0, c: parseFloat(l.clipStrength ?? l.strength) || 1.0 };
+                    }
+                    if (shouldSync || _stackActive[full] === undefined) {
+                        _stackActive[full] = l.active !== false;
+                    }
+                    return full;
+                });
+            }
+        }

        // Build Stack trigger words
        const activeTriggerWords = [];
@@ -673,7 +938,9 @@ export const comfyEditor = {
            ? activeTriggerWords.map((w) => `<span class="wfm-lora-trigger-word">${w}</span>`).join(" ")
            : `<span style="color:var(--wfm-text-secondary);font-size:12px;">—</span>`;
        const stackLoraSyntax = _buildLoraSyntax(stackModels);
-        const allActive = stackModels.every((m) => _stackActive[m] !== false);
+        // stackModelsが空だと every() が空配列に対し true を返す(空虚な真)ため、
+        // 何も無いのに「トグルオール」チェックボックスがON表示になるのを防ぐ
+        const allActive = stackModels.length > 0 && stackModels.every((m) => _stackActive[m] !== false);
        const anyActive = stackModels.some((m) => _stackActive[m] !== false);

        const stackModelRows = stackModels.map((m) => {
@@ -691,7 +958,10 @@ export const comfyEditor = {
            </div>`;
        }).join("");

-        const _prevActiveTab = el.querySelector(".wfm-lora-tab-btn.active")?.dataset?.tab || "single";
+        let _prevActiveTab = el.querySelector(".wfm-lora-tab-btn.active")?.dataset?.tab || "single";
+        // 新規読み込み時、LoraManagerノードに実際に複数LoRAが設定されている場合は
+        // Single(1件しか表示できない)ではなくStackタブを初期表示にする
+        if (opts.resetStackMode && useWorkflowLoraState && stackModels.length > 1) _prevActiveTab = "stack";
        // applyToGenUIで設定したSingle表示の状態を保存（再描画後に復元）
        const _prevSingleSyntax = document.getElementById("wfm-lora-single-syntax")?.textContent || "";
        const _prevSingleTriggers = document.getElementById("wfm-lora-single-triggers")?.innerHTML || "";
@@ -700,11 +970,19 @@ export const comfyEditor = {
            <div class="wfm-lora-tab-header">
                <button class="wfm-lora-tab-btn active" data-tab="single">Single</button>
                <button class="wfm-lora-tab-btn" data-tab="stack">Stack</button>
+                ${hasLoraManager ? `
+                <label class="wfm-lora-stack-mode-label" style="margin-left:auto;display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;" title="ON: 登録済みStackグループを読み込む / OFF: ワークフローに実際に設定されているLoRAを表示・編集する">
+                    <input type="checkbox" id="wfm-lora-stack-mode-toggle" ${stackModeChecked ? "checked" : ""}>
+                    Use Stack Group
+                </label>` : ""}
            </div>

            <!-- Single tab -->
            <div class="wfm-lora-tab-content" id="wfm-lora-panel-single">
-                <input type="text" class="wfm-input" id="wfm-lora-filter" placeholder="Filter...">
+                <div class="wfm-search-wrap" style="width:100%;">
+                    <input type="text" class="wfm-input wfm-search-input" id="wfm-lora-filter" placeholder="Filter...">
+                    <button type="button" class="wfm-search-clear-btn" id="wfm-lora-filter-clear" title="Clear search">✕</button>
+                </div>
                <select class="wfm-select" id="wfm-lora-select">
                    ${loras.map((m) => `<option value="${m}" ${m === currentVal ? "selected" : ""}>${m}</option>`).join("")}
                </select>
@@ -731,6 +1009,7 @@ export const comfyEditor = {

            <!-- Stack tab -->
            <div class="wfm-lora-tab-content" id="wfm-lora-panel-stack" style="display:none;">
+                ${hasLoraManager ? `<div style="font-size:11px;color:var(--wfm-text-secondary);margin-bottom:6px;">${useWorkflowLoraState ? "Showing: LoRAs currently in workflow" : "Showing: registered Stack group"}</div>` : ""}
                <div class="wfm-lora-stack-header">
                    <select class="wfm-select" id="wfm-lora-stack-target" style="flex:1;min-width:0;">${stackTargetOpts}</select>
                    <button class="wfm-btn wfm-btn-sm" id="wfm-lora-stack-apply" title="Apply Stack to node and sync to Positive prompt">Apply</button>
@@ -765,7 +1044,7 @@ export const comfyEditor = {
                    <div id="wfm-lora-stack-triggers" class="wfm-lora-stack-triggers">${stackTriggerHtml}</div>
                </div>
                <div class="wfm-lora-stack-models">
-                    ${stackModelRows || `<p class="wfm-placeholder">No models in Stack group</p>`}
+                    ${stackModelRows || `<p class="wfm-placeholder">${useWorkflowLoraState ? "No LoRAs set on this node" : "No models in Stack group"}</p>`}
                </div>
            </div>
        `;
@@ -803,9 +1082,63 @@ export const comfyEditor = {
            document.getElementById("wfm-lora-panel-stack").style.display = "";
        }

+        // ── Stackグループ使用チェックボックス ─────────────────
+        // ON: LoraManagerノードへStackグループを（クリアしてから）読み込む(既存のStack Applyを流用)
+        // OFF: ワークフロー読み込み時点のloras/text状態へ（クリアしてから）戻す
+        document.getElementById("wfm-lora-stack-mode-toggle")?.addEventListener("change", async (e) => {
+            const nodeId = document.getElementById("wfm-lora-stack-target")?.value || defaultStackTarget;
+            if (!nodeId || !comfyUI.currentWorkflow?.[nodeId]) return;
+
+            if (e.target.checked) {
+                // stackModelsはこの時点では「ワークフロー state」を指したままのため、
+                // 先に再描画してStackグループを取得させてからApplyする
+                await this.renderLoraPane(analysis, containerId);
+                document.getElementById("wfm-lora-stack-apply")?.click();
+                return;
+            }
+
+            const snap = comfyUI.loraManagerSnapshots?.[nodeId] || { loras: [], text: "" };
+            comfyUI.currentWorkflow[nodeId].inputs.loras = { __value__: JSON.parse(JSON.stringify(snap.loras)) };
+            comfyUI.currentWorkflow[nodeId].inputs.text = snap.text;
+            _syncRawJson();
+
+            // ON時にPositiveプロンプトへ挿入されたStack由来の<lora:...>構文とトリガーワードを除去する
+            // (新規に追加はしない。ワークフロー本来のプロンプトへ戻すだけ)
+            const posTextarea = document.getElementById("wfm-prompt-pos-text");
+            if (posTextarea && stackModels.length > 0) {
+                let cleaned = posTextarea.value;
+                for (const m of stackModels) {
+                    const stem = _loraBasename(m).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+                    cleaned = cleaned.replace(new RegExp(`,?\\s*<lora:${stem}:[^>]*>`, "gi"), "");
+                }
+                const stackWords = new Set();
+                stackModels.forEach((m) => {
+                    const sha = (metadata[m] || {}).sha256;
+                    const civInfo = sha && civitaiCache[sha];
+                    civInfo?.trainedWords?.forEach((w) => stackWords.add(w.trim().toLowerCase()));
+                });
+                if (stackWords.size > 0) {
+                    cleaned = cleaned.split(",").map((p) => p.trim()).filter((p) => p && !stackWords.has(p.toLowerCase())).join(", ");
+                }
+                posTextarea.value = cleaned.replace(/,\s*$/, "").trim();
+
+                const posNodeId = document.getElementById("wfm-prompt-pos-target")?.value;
+                if (posNodeId && comfyUI.currentWorkflow?.[posNodeId]) {
+                    const promptNode = comfyUI.currentAnalysis?.prompt_nodes?.find((n) => String(n.id) === String(posNodeId));
+                    comfyUI.currentWorkflow[posNodeId].inputs[promptNode?.textKey || "text"] = posTextarea.value;
+                    _syncRawJson();
+                }
+            }
+
+            // syncFromWorkflow: OFFへ戻した直後は、たった今書き戻したloras/text状態と
+            // Stackパネルの強度/有効状態表示を一致させるため強制同期する
+            this.renderLoraPane(analysis, containerId, { syncFromWorkflow: true });
+        });
+
        // ── Single: filter ───────────────────────────────────
-        document.getElementById("wfm-lora-filter")?.addEventListener("input", (e) => {
-            const filter = e.target.value.toLowerCase();
+        const loraFilterInput = document.getElementById("wfm-lora-filter");
+        const rebuildLoraSingleList = () => {
+            const filter = loraFilterInput?.value.toLowerCase() || "";
            const select = document.getElementById("wfm-lora-select");
            if (!select) return;
            select.innerHTML = loras
@@ -813,7 +1146,9 @@ export const comfyEditor = {
                .map((m) => `<option value="${m}">${m}</option>`)
                .join("");
            _refreshLoraSingleDynamic(metadata, civitaiCache);
-        });
+        };
+        loraFilterInput?.addEventListener("input", rebuildLoraSingleList);
+        setupSearchClearBtn("wfm-lora-filter", "wfm-lora-filter-clear", rebuildLoraSingleList);

        // ── Single: update SYNTAX/TRIGGERS on model or strength change ──
        document.getElementById("wfm-lora-select")?.addEventListener("change", () => _refreshLoraSingleDynamic(metadata, civitaiCache));
@@ -830,6 +1165,11 @@ export const comfyEditor = {
            const strModel = parseFloat(document.getElementById("wfm-lora-str-model")?.value) || 1.0;
            const strClip = parseFloat(document.getElementById("wfm-lora-str-clip")?.value) || 1.0;
            _applyLoraToNode(nodeId, select.value, strModel, strClip, node?.is_lora_manager);
+            // An explicit Apply overwrites whatever bypass had zeroed — clear it so the
+            // header button (and a later un-bypass) don't stomp this new value.
+            delete _loraNodeBypass[nodeId];
+            delete _loraBypassSnapshot[nodeId];
+            document.getElementById("wfm-lora-bypass-toggle")?.classList.remove("active");
            _syncRawJson();

            // Sync to Positive prompt
@@ -962,6 +1302,11 @@ export const comfyEditor = {
                    comfyUI.currentWorkflow[nodeId].inputs.strength_clip = _stackStrengths[first]?.c ?? 1.0;
                }
            }
+            // An explicit Apply overwrites whatever bypass had zeroed — clear it so the
+            // header button (and a later un-bypass) don't stomp this new value.
+            delete _loraNodeBypass[nodeId];
+            delete _loraBypassSnapshot[nodeId];
+            document.getElementById("wfm-lora-bypass-toggle")?.classList.remove("active");
            _syncRawJson();

            // Sync Stack LORA SYNTAX + TRIGGER WORDS to Positive prompt
@@ -1030,39 +1375,62 @@ export const comfyEditor = {
        const sampler = analysis.sampler_nodes?.[0];
        const latent = analysis.latent_nodes?.[0];

+        // "Advanced Sampling" workflows (Flux.1/Flux.2, SD3.5, Chroma...) spread seed/steps/cfg/
+        // sampler/scheduler/denoise across RandomNoise + CFGGuider + KSamplerSelect + a *Scheduler
+        // node instead of one KSampler. sampler.*NodeId (set in analyzeWorkflow) says which real
+        // node each field writes back to; null/"" means that workflow has no such control at all
+        // (e.g. Flux2Scheduler has no named "scheduler" combo) so the field is disabled here.
+        const schedulerAvailable = !!sampler && sampler.schedulerNodeId != null;
+        const denoiseAvailable = !!sampler && sampler.denoiseNodeId != null;
+        // Advanced samplers fed by a dedicated sampler node without a sampler_name combo
+        // (e.g. Ming Image's SamplerLCM) have nothing for the Sampler dropdown to write to.
+        const samplerNameAvailable = !!sampler && (!sampler.advanced || sampler.samplerNodeId != null);
+
        el.innerHTML = `
            <div style="display:flex;flex-direction:row;gap:0;align-items:flex-start;">
                <div style="flex:1;min-width:0;padding-right:14px;border-right:1px solid var(--wfm-border);">
-                    <h3 style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--wfm-text-secondary);margin:0 0 12px;">KSampler</h3>
+                    <h3 style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--wfm-text-secondary);margin:0 0 12px;">${sampler?.advanced ? "Sampler (Advanced)" : "KSampler"}</h3>
                    ${sampler ? `
-                    <input type="hidden" id="wfm-settings-sampler-id" value="${sampler.id}" data-seed-key="${sampler.seedKey || "seed"}">
+                    <input type="hidden" id="wfm-settings-sampler-id"
+                        data-seed-key="${sampler.seedKey || "seed"}"
+                        data-seed-node-id="${sampler.seedNodeId ?? sampler.id}"
+                        data-steps-node-id="${sampler.stepsNodeId ?? sampler.id}"
+                        data-cfg-key="${sampler.cfgKey || "cfg"}"
+                        data-cfg-node-id="${sampler.cfgNodeId ?? sampler.id}"
+                        data-sampler-node-id="${samplerNameAvailable ? (sampler.samplerNodeId ?? sampler.id) : ""}"
+                        data-scheduler-node-id="${sampler.schedulerNodeId ?? ""}"
+                        data-denoise-node-id="${sampler.denoiseNodeId ?? ""}">
                    <div class="wfm-form-group">
                        <label>Seed</label>
-                        <input type="number" class="wfm-input" id="wfm-settings-seed" value="${sampler.seed ?? -1}">
+                        <input type="number" class="wfm-input" id="wfm-settings-seed" value="${sampler.seed ?? ""}" placeholder="${sampler.seed === undefined ? "linked" : ""}">
                    </div>
                    <div class="wfm-form-group">
                        <label>Steps</label>
-                        <input type="number" class="wfm-input" id="wfm-settings-steps" value="${sampler.steps ?? 20}" min="1" max="200">
+                        <input type="number" class="wfm-input" id="wfm-settings-steps" value="${sampler.steps ?? ""}" placeholder="${sampler.steps === undefined ? "linked" : ""}" min="1" max="200">
                    </div>
                    <div class="wfm-form-group">
                        <label>CFG</label>
-                        <input type="number" class="wfm-input" id="wfm-settings-cfg" value="${sampler.cfg ?? 7}" step="0.5" min="0">
+                        <input type="number" class="wfm-input" id="wfm-settings-cfg" value="${sampler.cfg ?? ""}" placeholder="${sampler.cfg === undefined ? "linked" : ""}" step="0.5" min="0">
                    </div>
                    <div class="wfm-form-group">
                        <label>Sampler</label>
-                        <select class="wfm-select" id="wfm-settings-sampler-name">
-                            ${this.models.samplers.map((s) => `<option value="${s}" ${s === sampler.sampler_name ? "selected" : ""}>${s}</option>`).join("")}
+                        <select class="wfm-select" id="wfm-settings-sampler-name" ${samplerNameAvailable ? "" : "disabled"}>
+                            ${samplerNameAvailable
+                                ? this.models.samplers.map((s) => `<option value="${s}" ${s === sampler.sampler_name ? "selected" : ""}>${s}</option>`).join("")
+                                : `<option value="">N/A</option>`}
                        </select>
                    </div>
                    <div class="wfm-form-group">
                        <label>Scheduler</label>
-                        <select class="wfm-select" id="wfm-settings-scheduler">
-                            ${this.models.schedulers.map((s) => `<option value="${s}" ${s === sampler.scheduler ? "selected" : ""}>${s}</option>`).join("")}
+                        <select class="wfm-select" id="wfm-settings-scheduler" ${schedulerAvailable ? "" : "disabled"}>
+                            ${schedulerAvailable
+                                ? this.models.schedulers.map((s) => `<option value="${s}" ${s === sampler.scheduler ? "selected" : ""}>${s}</option>`).join("")
+                                : `<option value="">N/A</option>`}
                        </select>
                    </div>
                    <div class="wfm-form-group">
                        <label>Denoise</label>
-                        <input type="number" class="wfm-input" id="wfm-settings-denoise" value="${sampler.denoise ?? 1.0}" step="0.05" min="0" max="1">
+                        <input type="number" class="wfm-input" id="wfm-settings-denoise" value="${sampler.denoise ?? ""}" placeholder="${denoiseAvailable && sampler.denoise === undefined ? "linked" : ""}" step="0.05" min="0" max="1" ${denoiseAvailable ? "" : "disabled"}>
                    </div>
                    <button class="wfm-btn wfm-btn-sm" id="wfm-settings-sampler-apply" title="Apply (Alt+Click: Apply &amp; Generate)">Apply</button>
                    ` : "<p class='wfm-placeholder'>No KSampler node found</p>"}
@@ -1073,17 +1441,24 @@ export const comfyEditor = {
                    <input type="hidden" id="wfm-settings-latent-id" value="${latent.id}">
                    <div class="wfm-form-group">
                        <label>Width</label>
-                        <input type="number" class="wfm-input" id="wfm-settings-width" value="${latent.width ?? 512}" step="8" min="64">
+                        <input type="number" class="wfm-input" id="wfm-settings-width" value="${latent.width ?? ""}" placeholder="${latent.width === undefined ? "linked" : ""}" step="8" min="64">
                    </div>
                    <div class="wfm-form-group">
                        <label>Height</label>
-                        <input type="number" class="wfm-input" id="wfm-settings-height" value="${latent.height ?? 512}" step="8" min="64">
+                        <input type="number" class="wfm-input" id="wfm-settings-height" value="${latent.height ?? ""}" placeholder="${latent.height === undefined ? "linked" : ""}" step="8" min="64">
                    </div>
                    <div class="wfm-form-group">
                        <label>Batch Size</label>
                        <input type="number" class="wfm-input" id="wfm-settings-batch" value="${latent.batch_size ?? 1}" min="1" max="64">
                    </div>
+                    ${latent.isVideoLatent ? `
+                    <div class="wfm-form-group">
+                        <label>Length (frames)</label>
+                        <input type="number" class="wfm-input" id="wfm-settings-latent-length" value="${latent.length ?? ""}" placeholder="${latent.length === undefined ? "linked" : ""}" step="1" min="1">
+                    </div>
+                    ` : ""}
                    <button class="wfm-btn wfm-btn-sm" id="wfm-settings-latent-apply">Apply</button>
+                    ${latent.width === undefined || latent.height === undefined ? `<p class="wfm-placeholder" style="margin-top:6px;">Width/Height is linked to another node (e.g. auto-follows the input image) — leave blank to keep it linked.</p>` : ""}
                    <div style="margin-top:10px;border-top:1px solid var(--wfm-border);padding-top:10px;">
                        <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;">
                            ${[512, 768, 1024, 2048].map((s) => `<button class="wfm-btn wfm-btn-sm wfm-latent-sq-btn" data-size="${s}">${s}</button>`).join("")}
@@ -1109,17 +1484,21 @@ export const comfyEditor = {
        `;

        document.getElementById("wfm-settings-sampler-apply")?.addEventListener("click", (e) => {
-            const nodeId = document.getElementById("wfm-settings-sampler-id")?.value;
-            if (!nodeId || !comfyUI.currentWorkflow?.[nodeId]) return;
-            const inputs = comfyUI.currentWorkflow[nodeId].inputs;
-            // KSamplerAdvanced uses noise_seed; fall back to seed
-            const seedKey = document.getElementById("wfm-settings-sampler-id")?.dataset?.seedKey || "seed";
-            inputs[seedKey] = parseInt(document.getElementById("wfm-settings-seed")?.value) || -1;
-            inputs.steps = parseInt(document.getElementById("wfm-settings-steps")?.value) || 20;
-            inputs.cfg = parseFloat(document.getElementById("wfm-settings-cfg")?.value) || 7;
-            inputs.sampler_name = document.getElementById("wfm-settings-sampler-name")?.value;
-            inputs.scheduler = document.getElementById("wfm-settings-scheduler")?.value;
-            inputs.denoise = parseFloat(document.getElementById("wfm-settings-denoise")?.value) || 1.0;
+            const ds = document.getElementById("wfm-settings-sampler-id")?.dataset || {};
+            const write = (nodeId, key, value) => {
+                if (!nodeId || !comfyUI.currentWorkflow?.[nodeId]) return;
+                comfyUI.currentWorkflow[nodeId].inputs[key] = value;
+            };
+            const seedEl = document.getElementById("wfm-settings-seed");
+            if (seedEl?.value !== "") write(ds.seedNodeId, ds.seedKey || "seed", parseInt(seedEl.value) || -1);
+            const stepsEl = document.getElementById("wfm-settings-steps");
+            if (stepsEl?.value !== "") write(ds.stepsNodeId, "steps", parseInt(stepsEl.value) || 20);
+            const cfgEl = document.getElementById("wfm-settings-cfg");
+            if (cfgEl?.value !== "") write(ds.cfgNodeId, ds.cfgKey || "cfg", parseFloat(cfgEl.value) || 7);
+            if (ds.samplerNodeId) write(ds.samplerNodeId, "sampler_name", document.getElementById("wfm-settings-sampler-name")?.value);
+            if (ds.schedulerNodeId) write(ds.schedulerNodeId, "scheduler", document.getElementById("wfm-settings-scheduler")?.value);
+            const denoiseEl = document.getElementById("wfm-settings-denoise");
+            if (ds.denoiseNodeId && denoiseEl?.value !== "") write(ds.denoiseNodeId, "denoise", parseFloat(denoiseEl.value) || 1.0);
            _syncRawJson();
            if (e.altKey) document.dispatchEvent(new CustomEvent("wfm:apply-and-generate"));
        });
@@ -1128,9 +1507,14 @@ export const comfyEditor = {
            const nodeId = document.getElementById("wfm-settings-latent-id")?.value;
            if (!nodeId || !comfyUI.currentWorkflow?.[nodeId]) return;
            const inputs = comfyUI.currentWorkflow[nodeId].inputs;
-            inputs.width = parseInt(document.getElementById("wfm-settings-width")?.value) || 512;
-            inputs.height = parseInt(document.getElementById("wfm-settings-height")?.value) || 512;
+            const wEl = document.getElementById("wfm-settings-width");
+            const hEl = document.getElementById("wfm-settings-height");
+            // Blank = leave the (linked) width/height alone instead of clobbering it with a default
+            if (wEl?.value !== "") inputs.width = parseInt(wEl.value) || 512;
+            if (hEl?.value !== "") inputs.height = parseInt(hEl.value) || 512;
            inputs.batch_size = parseInt(document.getElementById("wfm-settings-batch")?.value) || 1;
+            const lenEl = document.getElementById("wfm-settings-latent-length");
+            if (lenEl && lenEl.value !== "") inputs.length = parseInt(lenEl.value) || 1;
            _syncRawJson();
        });

@@ -1212,8 +1596,34 @@ export const comfyEditor = {
        const slots = loadNodes.slice(0, 4);
        // Mask Editor One ノード（画像+マスクを内包、常に両方必須）— 別枠で最大2件表示
        const meoSlots = meoNodes.slice(0, 2);
+        const phCfg = _loadI2IPlaceholderConfig();
+        const isColorMode = phCfg.mode !== "image";
        el.innerHTML = `
            ${slots.length === 0 ? "" : `
+            <details class="wfm-settings-section wfm-i2i-placeholder-config">
+                <summary class="wfm-settings-summary">${t("i2iPlaceholderTitle")}</summary>
+                <div class="wfm-i2i-placeholder-mode">
+                    <label><input type="radio" name="wfm-i2i-ph-mode" id="wfm-i2i-ph-mode-color" value="color" ${isColorMode ? "checked" : ""}> ${t("i2iPlaceholderColor")}</label>
+                    <label><input type="radio" name="wfm-i2i-ph-mode" id="wfm-i2i-ph-mode-image" value="image" ${isColorMode ? "" : "checked"}> ${t("i2iPlaceholderImage")}</label>
+                </div>
+                <div id="wfm-i2i-ph-color-fields" class="wfm-i2i-placeholder-fields wfm-lab-modal-inline" style="${isColorMode ? "" : "display:none;"}">
+                    <div><label>${t("i2iPlaceholderWidth")}</label><input type="number" min="1" id="wfm-i2i-ph-width" class="wfm-input" value="${Number(phCfg.width) || 512}"></div>
+                    <div><label>${t("i2iPlaceholderHeight")}</label><input type="number" min="1" id="wfm-i2i-ph-height" class="wfm-input" value="${Number(phCfg.height) || 512}"></div>
+                    <div><label>${t("i2iPlaceholderColorLabel")}</label><input type="color" id="wfm-i2i-ph-color" class="wfm-input" value="${escapeHtml(/^#[0-9a-fA-F]{6}$/.test(phCfg.color) ? phCfg.color : "#808080")}"></div>
+                </div>
+                <div id="wfm-i2i-ph-image-fields" class="wfm-i2i-placeholder-fields" style="${isColorMode ? "display:none;" : ""}">
+                    <div class="wfm-i2i-preview-wrap" id="wfm-i2i-ph-preview-wrap" style="${phCfg.imageFilename ? "" : "display:none;"}">
+                        <img class="wfm-i2i-preview-img" id="wfm-i2i-ph-preview-img" src="${phCfg.imageFilename ? `/view?filename=${encodeURIComponent(phCfg.imageFilename)}&type=input` : ""}">
+                    </div>
+                    <div class="wfm-i2i-drop-zone" id="wfm-i2i-ph-drop">
+                        <label class="wfm-i2i-drop-label">
+                            ${t("i2iPlaceholderDropImage")}
+                            <input type="file" accept="image/*" id="wfm-i2i-ph-file" style="display:none;">
+                        </label>
+                    </div>
+                    <span class="wfm-i2i-status" id="wfm-i2i-ph-status"></span>
+                </div>
+            </details>
            <div class="wfm-i2i-grid">
                ${slots.map((node, i) => `
                    <div class="wfm-i2i-slot" data-slot="${i}" data-node-id="${node.id}">
@@ -1247,8 +1657,10 @@ export const comfyEditor = {
                            </div>
                        </div>
                        ` : ""}
-                        <div style="display:flex;gap:6px;margin-top:6px;">
+                        <div style="display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;">
                            <button class="wfm-btn wfm-btn-sm wfm-btn-primary wfm-i2i-apply" data-slot="${i}" disabled>Apply</button>
+                            <button type="button" class="wfm-btn wfm-btn-sm wfm-i2i-placeholder-btn" data-slot="${i}">${t("i2iPlaceholderApply")}</button>
+                            <button type="button" class="wfm-btn wfm-btn-sm wfm-i2i-clear" data-slot="${i}">${t("clear")}</button>
                            <span class="wfm-i2i-status" id="wfm-i2i-status-${i}"></span>
                        </div>
                    </div>
@@ -1409,8 +1821,64 @@ export const comfyEditor = {
                    applyBtn.disabled = false;
                }
            });
+
+            // Clear: reset this slot's staged/preview state back to empty. Doesn't touch
+            // the workflow node itself — LoadImage always needs *some* valid filename, so
+            // there's nothing meaningful to "unset" there; this just lets the user cancel
+            // a pending pick and start over.
+            const clearBtn = el.querySelector(`.wfm-i2i-clear[data-slot="${i}"]`);
+            clearBtn?.addEventListener("click", () => {
+                pendingFile = null;
+                previewImg.src = "";
+                previewWrap.style.display = "none";
+                filenameEl.textContent = "";
+                if (fileInput) fileInput.value = "";
+                applyBtn.disabled = !pendingMaskFile;
+                statusEl.textContent = "";
+            });
+
+            // Placeholder: generate (color mode) or reuse (image mode) the shared default
+            // configured at the top of the panel, and replace this slot's image
+            // immediately — no separate Apply click needed, matching the "one button,
+            // one slot" behavior described for this feature.
+            const placeholderBtn = el.querySelector(`.wfm-i2i-placeholder-btn[data-slot="${i}"]`);
+            placeholderBtn?.addEventListener("click", async () => {
+                const cfg = _loadI2IPlaceholderConfig();
+                placeholderBtn.disabled = true;
+                statusEl.textContent = t("i2iPlaceholderGenerating");
+                try {
+                    let filename;
+                    if (cfg.mode === "image") {
+                        if (!cfg.imageFilename) throw new Error(t("i2iPlaceholderNoDefaultImage"));
+                        filename = cfg.imageFilename;
+                    } else {
+                        const file = await _generateColorImageFile(cfg.width, cfg.height, cfg.color);
+                        const result = await comfyUI.uploadImage(file, file.name);
+                        if (!result.name) throw new Error("Upload returned no filename");
+                        filename = result.name;
+                    }
+                    if (comfyUI.currentWorkflow?.[node.id]) {
+                        comfyUI.currentWorkflow[node.id].inputs.image = filename;
+                    }
+                    pendingFile = null;
+                    previewImg.src = `/view?filename=${encodeURIComponent(filename)}&type=input`;
+                    previewWrap.style.display = "";
+                    filenameEl.textContent = filename;
+                    applyBtn.disabled = !pendingMaskFile;
+                    statusEl.textContent = `✓ ${filename}`;
+                    statusEl.style.color = "var(--wfm-success)";
+                    _syncRawJson();
+                } catch (err) {
+                    statusEl.textContent = `✗ ${err.message}`;
+                    statusEl.style.color = "var(--wfm-danger)";
+                } finally {
+                    placeholderBtn.disabled = false;
+                }
+            });
        });

+        _wireI2IPlaceholderConfig(el);
+
        // Initialize each Mask Editor One slot（画像+マスク両方が揃って初めてApply可能）
        meoSlots.forEach((node, i) => {
            const fileInput = document.getElementById(`wfm-meo-file-${i}`);
@@ -1626,6 +2094,75 @@ export const comfyEditor = {
        if (!workflow) _syncRawJson();
    },

+    // Resolves a user/LLM-supplied aspect ratio (e.g. "3:2" or the full COMBO label
+    // "3:2 (Photo)") against a ResolutionSelector-type node's actual options via
+    // /object_info — the workflow analysis only knows the node's CURRENT value, not its
+    // full option list, so a bare "3:2" needs matching against whatever labeled string
+    // that node's aspect_ratio COMBO actually accepts. Falls back to the raw input if
+    // the node type can't be queried or nothing matches, so ComfyUI's own validation
+    // surfaces a clear error instead of this silently doing nothing.
+    async resolveAspectRatioOption(nodeType, requested) {
+        if (!requested) return null;
+        const ratioMatch = String(requested).match(/(\d+)\s*:\s*(\d+)/);
+        const wantedRatio = ratioMatch ? `${ratioMatch[1]}:${ratioMatch[2]}` : String(requested).trim();
+        try {
+            const info = await comfyUI.fetchObjectInfo(nodeType);
+            const options = info?.[nodeType]?.input?.required?.aspect_ratio?.[1]?.options || [];
+            if (options.includes(requested)) return requested;
+            return options.find((o) => o.startsWith(wantedRatio)) || requested;
+        } catch {
+            return requested;
+        }
+    },
+
+    // AI TOOL Chat's generate_image tool call — writes whichever of KSampler
+    // (steps/cfg/sampler_name/scheduler/denoise/seed), Latent Image (width/height/
+    // batch_size), and Resolution Selector (resolvedAspectRatio) fields the LLM
+    // supplied onto the given workflow/analysis (or comfyUI.currentWorkflow/
+    // currentAnalysis by default). Mirrors lab-tab.js's _buildWorkflowForIteration
+    // KSampler branch — same per-field node-id indirection (stepsNodeId/cfgNodeId/...
+    // falling back to sampler.id) for Advanced-Sampling workflows (Flux.1/2, SD3.5,
+    // Chroma...) that spread these across several nodes.
+    // seed is returned rather than written directly — the caller passes it through to
+    // comfyUI.generate()'s seedMode/seedValue instead, same as every other seed source.
+    // resolvedAspectRatio must already be one of the node's actual option strings (see
+    // resolveAspectRatioOption above) — passed in rather than resolved here because
+    // that lookup is async and this stays a plain synchronous writer.
+    setGenerationParams({ steps, cfg, sampler_name, scheduler, denoise, seed, width, height, batch_size, resolvedAspectRatio, workflow, analysis } = {}) {
+        const wf = workflow || comfyUI.currentWorkflow;
+        const an = analysis || comfyUI.currentAnalysis;
+        if (!wf || !an) return { seed: null };
+
+        const sampler = an.sampler_nodes?.[0];
+        if (sampler) {
+            if (steps != null) { const id = sampler.stepsNodeId ?? sampler.id; if (wf[id]) wf[id].inputs.steps = steps; }
+            if (cfg != null) { const id = sampler.cfgNodeId ?? sampler.id; if (wf[id]) wf[id].inputs.cfg = cfg; }
+            if (sampler_name) { const id = sampler.samplerNodeId ?? sampler.id; if (wf[id]) wf[id].inputs.sampler_name = sampler_name; }
+            if (scheduler && sampler.schedulerNodeId != null && wf[sampler.schedulerNodeId]) {
+                wf[sampler.schedulerNodeId].inputs.scheduler = scheduler;
+            }
+            if (denoise != null && sampler.denoiseNodeId != null && wf[sampler.denoiseNodeId]) {
+                wf[sampler.denoiseNodeId].inputs.denoise = denoise;
+            }
+        }
+
+        // Resolution Selector takes priority over direct width/height — writing width/
+        // height straight onto the EmptyLatentImage would just clobber whatever the
+        // selector computed, silently ignoring the requested aspect ratio.
+        const resSelector = an.resolution_selector_nodes?.[0];
+        const latent = an.latent_nodes?.[0];
+        if (resolvedAspectRatio && resSelector && wf[resSelector.id]) {
+            wf[resSelector.id].inputs.aspect_ratio = resolvedAspectRatio;
+        } else if (latent && wf[latent.id]) {
+            if (width != null) wf[latent.id].inputs.width = width;
+            if (height != null) wf[latent.id].inputs.height = height;
+        }
+        if (latent && wf[latent.id] && batch_size != null) wf[latent.id].inputs.batch_size = batch_size;
+
+        if (!workflow) _syncRawJson();
+        return { seed: seed ?? null };
+    },
+
    syncToWorkflow() {
        // Sync prompt texts before generation
        const posSelect = document.getElementById("wfm-prompt-pos-target");
@@ -1752,7 +2289,7 @@ async function _initTextEncoderSection(analysis, textEncoders, containerEl) {
    const deviceOpts = ["default", "cpu"].map(d => `<option value="${d}" ${d === currentDevice ? "selected" : ""}>${d}</option>`).join("");

    section.innerHTML = `
-        <label>Text Encoder</label>
+        <label class="wfm-model-label-active">Text Encoder</label>
        <input type="text" class="wfm-input" id="wfm-te-filter" placeholder="Filter..." style="margin-bottom:4px;">
        <select class="wfm-select" id="wfm-te-clip1" style="margin-bottom:4px;">${clip1Opts}</select>
        ${isDual ? `<select class="wfm-select" id="wfm-te-clip2" style="margin-bottom:4px;">${clip2Opts}</select>` : ""}
@@ -0,0 +1,301 @@
+/**
+ * Decision model client (Unsloth Decision API / Laya, Ollama 0.35+ / tev1・nimble・clef).
+ *
+ * Laya is a *decision* model, not a generator: it takes a state (text or any JSON) plus typed
+ * questions and returns calibrated probabilities in one forward pass — no free-form output, so no
+ * format hallucination, and results can be thresholded directly. Most decision models are text-only
+ * (image-based judgments must first be turned into text — Tagger tags / VLM caption), but Ollama's
+ * "clef" models accept images directly (decide()'s `images` param — base64, no `data:` prefix; use
+ * supportsDecisionVision() first since a non-vision model errors out on an images payload). This
+ * file is ComfyUI-Comic-Creator's decision-client.js origin (CC ported it 2026-09-30) and CC later
+ * added vision support (2026-10, based on ComfyUI-LiveChatStream's judgeImage pattern) which is
+ * ported back here — keep the two in sync going forward.
+ *
+ * Both backends speak the same TypeSafe-compatible POST /v1/systemone. Unsloth needs an API key
+ * even on localhost (unless Keyless API access is on), so its requests go through the same
+ * server-side proxy as the Unsloth chat backend (py/routes/unsloth_routes.py, key from .env).
+ * Ollama needs no key and allows CORS, so it's called directly from the browser like the existing
+ * Ollama LLM backend. Backend/URL/model/threshold come from the Settings tab's own
+ * "Decision Model" section (wfm_decision_settings), independent of the AI TOOL / Tagger backends so
+ * a decision model can run alongside whichever LLM/VLM those use.
+ * API reference: https://unsloth.ai/docs/models/decision-laya,
+ * https://github.com/ollama/ollama/releases/tag/v0.35.0
+ *
+ * Usage (threshold defaults to the Settings tab value when omitted):
+ *   import { decide, noul, choice, score, isYes, pickChoice } from "./decision-client.js";
+ *   const answers = await decide(promptText, {
+ *       genre: choice("Which genre fits best?", { portrait: "a person is the main subject", landscape: "scenery" }),
+ *       text:  noul("Does the image contain rendered text?"),
+ *       nsfw:  score("How sexually explicit is this?", ["none", "suggestive", "explicit"]),
+ *   });
+ *   const genre = pickChoice(answers.genre, 0.8);   // { value, probability, confident }
+ */
+
+import { unslothProxy, readJsonStorage } from "./util.js";
+
+// Limits documented by Unsloth's Decision API.
+export const DECISION_LIMITS = { maxQuestions: 64, maxChoiceOptions: 255, maxScoreLevels: 10 };
+
+// Unsloth: "laya" = the model picked in Unsloth's settings. Explicit variants: "laya-multilingual"
+// (default download, 100+ languages), "laya-english", "laya-typed-decisions" (structured data such
+// as JSON records — e.g. workflow node summaries).
+// Ollama: decision models are ordinary pulled models whose /api/tags capabilities include
+// "decision" — listed live by listDecisionModels(); `models` below are only pull suggestions
+// (tev1 = 4B / 4.5 GB, tev1:0.8b = 812 MB, nimble = 9B / 9.5 GB, clef = 27B / ~18GB vision-capable —
+// needs Ollama 0.35.1+, clef-flash(9B) is unreliable as of Ollama 0.40.1, see ollama/ollama#18769).
+export const DECISION_BACKENDS = {
+    unsloth: {
+        label: "Unsloth",
+        defaultUrl: "http://localhost:8888",
+        models: ["laya", "laya-multilingual", "laya-english", "laya-typed-decisions"],
+        defaultModel: "laya",
+    },
+    ollama: {
+        label: "Ollama",
+        defaultUrl: "http://localhost:11434",
+        models: ["tev1", "tev1:0.8b", "nimble", "clef"],
+        defaultModel: "tev1",
+    },
+};
+export const DECISION_MODELS = DECISION_BACKENDS.unsloth.models;
+export const DEFAULT_DECISION_MODEL = DECISION_BACKENDS.unsloth.defaultModel;
+
+export const DECISION_SETTINGS_KEY = "wfm_decision_settings";
+const DEFAULT_SETTINGS = {
+    backend: "unsloth",
+    baseUrl: DECISION_BACKENDS.unsloth.defaultUrl,
+    model: DEFAULT_DECISION_MODEL,
+    threshold: 0.8,
+};
+
+/** Saved Decision Model settings merged over the defaults. */
+export function getDecisionSettings() {
+    const saved = readJsonStorage(DECISION_SETTINGS_KEY);
+    const merged = { ...DEFAULT_SETTINGS, ...saved };
+    const th = Number(merged.threshold);
+    merged.threshold = th > 0 && th <= 1 ? th : DEFAULT_SETTINGS.threshold;
+    if (!DECISION_BACKENDS[merged.backend]) merged.backend = DEFAULT_SETTINGS.backend;
+    const backend = DECISION_BACKENDS[merged.backend];
+    if (!merged.baseUrl) merged.baseUrl = backend.defaultUrl;
+    // A model name from the other backend (e.g. "laya" after switching to Ollama) can't work.
+    const isLaya = /^laya/.test(merged.model || "");
+    if (!merged.model || (merged.backend === "ollama" && isLaya) || (merged.backend === "unsloth" && !isLaya)) {
+        merged.model = backend.defaultModel;
+    }
+    return merged;
+}
+
+/**
+ * Model choices for the Settings dropdown. Unsloth: its fixed Laya names. Ollama: installed models
+ * whose /api/tags capabilities include "decision" (throws if Ollama can't be reached). Returns
+ * { models, installed } — installed is false for Unsloth (names aren't checked against the server).
+ */
+export async function listDecisionModels(backend, baseUrl) {
+    if (backend !== "ollama") return { models: [...DECISION_BACKENDS.unsloth.models], installed: false };
+    const res = await fetch(`${(baseUrl || DECISION_BACKENDS.ollama.defaultUrl).replace(/\/+$/, "")}/api/tags`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+    const models = (data.models || [])
+        .filter((m) => Array.isArray(m.capabilities) && m.capabilities.includes("decision"))
+        .map((m) => m.name)
+        .sort();
+    return { models, installed: true };
+}
+
+export function saveDecisionSettings(patch) {
+    const data = { ...getDecisionSettings(), ...patch };
+    localStorage.setItem(DECISION_SETTINGS_KEY, JSON.stringify(data));
+    return data;
+}
+
+// ---- Question builders ----
+
+/** Yes/no question — answer.noul is the probability of "yes" (0..1). */
+export function noul(instructions) {
+    return { type: "noul", instructions };
+}
+
+/**
+ * Pick-one question. criteria: an array of option names, or { option: description } — descriptions
+ * noticeably improve accuracy (options share a token budget, so past ~20 described options the
+ * descriptions get trimmed).
+ */
+export function choice(instructions, criteria) {
+    return { type: "choice", instructions, criteria };
+}
+
+/** Rating question. levels: ordered labels from lowest (0) to highest, 2..10 entries. */
+export function score(instructions, levels) {
+    return { type: "score", instructions, criteria: levels };
+}
+
+// ---- Request ----
+
+
+function _validateQuestions(questions) {
+    const entries = Object.entries(questions || {});
+    if (entries.length === 0) throw new Error("decide(): no questions given");
+    if (entries.length > DECISION_LIMITS.maxQuestions) {
+        throw new Error(`decide(): ${entries.length} questions exceeds the limit of ${DECISION_LIMITS.maxQuestions}`);
+    }
+    for (const [key, q] of entries) {
+        if (!q || !["noul", "choice", "score"].includes(q.type)) {
+            throw new Error(`decide(): question "${key}" has an unknown type`);
+        }
+        const n = Array.isArray(q.criteria) ? q.criteria.length : Object.keys(q.criteria || {}).length;
+        if (q.type === "choice" && (n < 2 || n > DECISION_LIMITS.maxChoiceOptions)) {
+            throw new Error(`decide(): choice "${key}" needs 2-${DECISION_LIMITS.maxChoiceOptions} options (got ${n})`);
+        }
+        if (q.type === "score" && (n < 2 || n > DECISION_LIMITS.maxScoreLevels)) {
+            throw new Error(`decide(): score "${key}" needs 2-${DECISION_LIMITS.maxScoreLevels} levels (got ${n})`);
+        }
+    }
+}
+
+/**
+ * Ask typed questions about one state. Returns the raw `answers` object keyed like `questions`.
+ * The first call after Unsloth starts loads the model (10-20 s); later calls are sub-second on CPU.
+ *
+ * @param {string|object} state  Text or any JSON (e.g. { prompt, tags, model }).
+ * @param {object} questions     { key: noul(...) | choice(...) | score(...) }, max 64.
+ * @param {object} [opts]        { backend, model, baseUrl } — override the saved Decision Model settings.
+ * @param {string[]} [images]    Base64 image data (no `data:` prefix), shared by all questions.
+ *                               Vision-capable Ollama models only (e.g. clef) — check with
+ *                               supportsDecisionVision() first; a non-vision model errors out.
+ */
+export async function decide(state, questions, opts = {}, images = []) {
+    _validateQuestions(questions);
+    const settings = getDecisionSettings();
+    const backend = opts.backend || settings.backend;
+    const baseUrl = (opts.baseUrl || settings.baseUrl).replace(/\/+$/, "");
+    const payload = { model: opts.model || settings.model, state, questions };
+    if (images?.length) payload.images = images;
+    let data;
+    if (backend === "ollama") {
+        const res = await fetch(`${baseUrl}/v1/systemone`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+        });
+        data = await res.json().catch(() => ({}));
+        // Ollama reports failures as { error } (e.g. 'model "tev1" not found, try pulling it first').
+        if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+    } else {
+        data = await unslothProxy(baseUrl, "/v1/systemone", "POST", payload);
+    }
+    if (!data || typeof data.answers !== "object") throw new Error(data?.error || "Decision API returned no answers");
+    return data.answers;
+}
+
+/** Blob / data URL / image URL → base64 (no `data:` prefix), for decide()'s `images` param. */
+export async function imageToBase64(src) {
+    const blob = src instanceof Blob ? src : await (await fetch(src)).blob();
+    return await new Promise((resolve, reject) => {
+        const r = new FileReader();
+        r.onload = () => resolve(String(r.result).split(",")[1] || "");
+        r.onerror = () => reject(r.error);
+        r.readAsDataURL(blob);
+    });
+}
+
+/**
+ * Whether the configured decision model accepts images. Ollama only — decision models' /api/show
+ * capabilities list only "decision" (not "vision") on some Ollama builds, so this also checks for an
+ * image encoder (projector_info) as a fallback. Unsloth can't be checked this way, so it returns
+ * null (unknown) — callers should try and fall back to text-only on failure. Returns false on error.
+ *
+ * @param {object} [opts]  { backend, model, baseUrl } — same overrides as decide().
+ */
+export async function supportsDecisionVision(opts = {}) {
+    const settings = getDecisionSettings();
+    const backend = opts.backend || settings.backend;
+    if (backend !== "ollama") return null;
+    const baseUrl = (opts.baseUrl || settings.baseUrl).replace(/\/+$/, "");
+    try {
+        const res = await fetch(`${baseUrl}/api/show`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ model: opts.model || settings.model }),
+        });
+        if (!res.ok) return false;
+        const data = await res.json();
+        return (Array.isArray(data.capabilities) && data.capabilities.includes("vision"))
+            || !!(data.projector_info && Object.keys(data.projector_info).length);
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Run decide() over many states with a small concurrency cap (the model runs locally, so flooding
+ * it only queues requests). Per-item failures are returned as { error } instead of rejecting all.
+ */
+export async function decideMany(states, questions, opts = {}) {
+    const concurrency = Math.max(1, opts.concurrency || 2);
+    const results = new Array(states.length);
+    let next = 0;
+    const worker = async () => {
+        while (next < states.length) {
+            const i = next++;
+            try {
+                results[i] = { answers: await decide(states[i], questions, opts) };
+            } catch (e) {
+                results[i] = { error: e.message };
+            }
+            opts.onProgress?.(i, results[i]);
+        }
+    };
+    await Promise.all(Array.from({ length: Math.min(concurrency, states.length) }, worker));
+    return results;
+}
+
+/**
+ * Connection check for the Settings tab: one yes/no question, timed. The first request after
+ * Unsloth starts also loads the model (10-20 s), so callers should say that a slow first test is
+ * normal.
+ */
+export async function testDecisionConnection(opts = {}) {
+    const started = performance.now();
+    const answers = await decide("A cat is sitting on a sofa.", {
+        test: noul("Is there an animal in the text?"),
+    }, opts);
+    return { ms: Math.round(performance.now() - started), yes: answers.test?.noul };
+}
+
+// ---- Answer helpers ----
+// Threshold on `probabilities` (or noul's value), not `confidence` — per Unsloth's docs, confidence
+// only says how peaked the distribution is and its formula differs from Jev's.
+
+/** True when the yes-probability of a noul answer reaches `threshold`. */
+export function isYes(answer, threshold = getDecisionSettings().threshold) {
+    return typeof answer?.noul === "number" && answer.noul >= threshold;
+}
+
+/**
+ * Most likely option of a choice answer. `confident` is false below `threshold` — callers should
+ * then show the value as a suggestion for the user to confirm rather than apply it automatically.
+ */
+export function pickChoice(answer, threshold = getDecisionSettings().threshold) {
+    const value = answer?.choice ?? null;
+    const probability = value != null ? (answer.probabilities?.[value] ?? 0) : 0;
+    return { value, probability, confident: value != null && probability >= threshold };
+}
+
+/**
+ * Most likely level of a score answer: { level (index from 0), label, value (expected score,
+ * fractional), probability, confident }.
+ */
+export function pickScore(answer, threshold = getDecisionSettings().threshold) {
+    const probs = answer?.probabilities || {};
+    let level = null, probability = 0;
+    for (const [k, p] of Object.entries(probs)) {
+        if (p > probability) { level = Number(k); probability = p; }
+    }
+    return {
+        level,
+        label: level != null ? (answer.legend?.[String(level)] ?? null) : null,
+        value: typeof answer?.score === "number" ? answer.score : null,
+        probability,
+        confident: level != null && probability >= threshold,
+    };
+}
@@ -0,0 +1,580 @@
+/**
+ * Gallery Tab - セマンティック検索 (Gemini Embedding 2)
+ *  - 検索ボックスのSemantic Searchトグル（ONでEnter実行の意味検索）
+ *  - 詳細パネルの「類似画像」トグル／更新ボタン
+ *  - インデックス作成モーダル（Semantic⚙）
+ * 一覧の差し替えは gallery-tab.js の loadImages() が getSemanticMode() / fetchSemanticImages() を呼んで行う。
+ */
+
+import { openModal, closeModal, showToast } from "./app.js";
+import { t } from "./i18n.js";
+import { escapeHtml } from "./util.js";
+
+const API = {
+    status:  (folder, recursive) => `/wfm/gallery/semantic/status?folder=${encodeURIComponent(folder)}&recursive=${recursive}`,
+    index:   "/wfm/gallery/semantic/index",
+    cancel:  "/wfm/gallery/semantic/cancel",
+    search:  "/wfm/gallery/semantic/search",
+    similar: "/wfm/gallery/semantic/similar",
+    clear:   "/wfm/gallery/semantic/clear",
+    folders: (root) => `/wfm/gallery/semantic/folders?root=${encodeURIComponent(root)}`,
+    test:    "/wfm/gallery/semantic/test",
+};
+
+const LS_ON = "wfm_gallery_semantic_on";
+const LS_DIM = "wfm_gallery_semantic_dim";
+const LS_MODEL = "wfm_gallery_semantic_model";
+const LS_SOFT = "wfm_gallery_semantic_soft";
+const GEMINI = "gemini-embedding-2";
+const LOCAL = "embeddinggemma-2";
+const LS_SUB = "wfm_gallery_semantic_recursive";
+const LS_TAB = "wfm_gallery_semantic_tab";
+const LS_TH = "wfm_gallery_semantic_th";
+const LIMITS = [50, 100, 200, 500, 1000];
+
+const sem = {
+    on: false,             // Semantic Searchトグル
+    anchor: "",            // 類似画像表示中の基準画像パス（空=類似表示OFF）
+    anchorName: "",
+    indexModel: GEMINI,    // 現在のインデックスを作ったモデル（しきい値はモデルごとに保存する）
+};
+
+let ctx = null;            // { getSearch, getFolder, getSelected, reload, focusSearch }
+
+function lsGet(key, fallback) {
+    try { return localStorage.getItem(key) ?? fallback; } catch { return fallback; }
+}
+function lsSet(key, value) {
+    try { localStorage.setItem(key, value); } catch { /* 保存できなくても動作に影響しない */ }
+}
+
+async function postJson(url, body) {
+    const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body || {}),
+    });
+    let data = {};
+    try { data = await res.json(); } catch { /* 本文なし */ }
+    if (!res.ok) {
+        throw Object.assign(new Error(data.error || `HTTP ${res.status}`), { code: data.code || "" });
+    }
+    return data;
+}
+
+/** APIエラーコードをi18nメッセージにする */
+export function semanticErrorMessage(e) {
+    const known = ["no_api_key", "api_key_invalid", "index_empty", "dim_mismatch", "already_running",
+        "folder_not_allowed", "unsupported_type", "network_error", "api_error", "local_error"];
+    if (e?.code && known.includes(e.code)) {
+        return t(`sem_err_${e.code}`, e.message);
+    }
+    return t("errorWithMsg", e?.message || String(e));
+}
+
+// ── gallery-tab.js から使う公開API ────────────────────────────
+
+/** 現在の一覧モード: {kind:"similar", path} | {kind:"text", query} | null(通常) */
+export function getSemanticMode() {
+    if (sem.anchor) return { kind: "similar", path: sem.anchor, name: sem.anchorName };
+    const q = (ctx?.getSearch() || "").trim();
+    if (sem.on && q) return { kind: "text", query: q };
+    return null;
+}
+
+export function isSemanticOn() {
+    return sem.on;
+}
+
+/**
+ * 表示条件（類似度のしきい値・最大件数）。スコアの水準はモデルで違うため、モデルごとに保存する。
+ * similar: 類似画像検索の最小スコア / text: 文章検索の最小スコア（0=絞り込みなし）
+ */
+function loadThresholds(model) {
+    let v = {};
+    try { v = JSON.parse(lsGet(LS_TH, "{}"))[model] || {}; } catch { /* 壊れた値は既定に戻す */ }
+    const num = x => { const n = parseFloat(x); return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0; };
+    return { similar: num(v.similar), text: num(v.text), limit: LIMITS.includes(v.limit) ? v.limit : 200 };
+}
+
+function saveThresholds(model, th) {
+    let all = {};
+    try { all = JSON.parse(lsGet(LS_TH, "{}")) || {}; } catch { all = {}; }
+    all[model] = th;
+    lsSet(LS_TH, JSON.stringify(all));
+}
+
+function minScoreFor(mode) {
+    const th = loadThresholds(sem.indexModel);
+    return mode.kind === "similar" ? th.similar : th.text;
+}
+
+/** モードに応じてサーバーから結果（スコア降順・score付き）を取得する */
+export async function fetchSemanticImages(mode, folder) {
+    const th = loadThresholds(sem.indexModel);
+    const common = { folder, recursive: true, limit: th.limit, min_score: minScoreFor(mode) };
+    const data = mode.kind === "similar"
+        ? await postJson(API.similar, { path: mode.path, ...common })
+        : await postJson(API.search, { query: mode.query, ...common });
+    return data.images || [];
+}
+
+/** 2行目の結果件数表示（意味検索/類似表示のときだけ文言を入れる。通常は空） */
+export function setSemanticCountText(text) {
+    const el = document.getElementById("wfm-gallery-sem-count");
+    if (el) el.textContent = text || "";
+}
+
+/** 一覧件数ラベル */
+export function semanticCountLabel(mode, count) {
+    const min = minScoreFor(mode);
+    return mode.kind === "similar"
+        ? t("semCountSimilar", count, mode.name, min)
+        : t("semCountText", count, min);
+}
+
+let _dotRoot = "";
+let _dotSeq = 0;
+
+/**
+ * フォルダツリーの枚数バッジ横に、直下の画像が全件インデックス済みのフォルダへドットを付ける。
+ * ツリー再構築後・インデックス作成後に呼ぶ（DOMはその場で更新し、ツリーは作り直さない）。
+ */
+export async function refreshSemanticDots(root) {
+    if (root) _dotRoot = root;
+    if (!_dotRoot) return;
+    const seq = ++_dotSeq;
+    let folders;
+    try {
+        const res = await fetch(API.folders(_dotRoot));
+        if (!res.ok) return;
+        folders = (await res.json()).folders || {};
+    } catch {
+        return;
+    }
+    if (seq !== _dotSeq) return;   // より新しい呼び出しがある
+    document.querySelectorAll(".wfm-gallery-tree-item").forEach(item => {
+        const label = item.querySelector(".wfm-gallery-tree-label");
+        const badge = label?.querySelector(".wfm-gallery-tree-count");
+        label?.querySelector(".wfm-gallery-tree-sem-dot")?.remove();
+        const st = folders[(item.dataset.path || "").replace(/\\/g, "/")];
+        if (badge && st && st.indexable > 0 && st.indexed >= st.indexable) {
+            const dot = document.createElement("span");
+            dot.className = "wfm-gallery-tree-sem-dot";
+            dot.title = t("semDotTitle");
+            badge.after(dot);
+        }
+    });
+}
+
+/** フォルダ切替・フィルタクリア時に類似表示を解除する（再読込は呼び出し側） */
+export function exitSimilarMode() {
+    sem.anchor = "";
+    sem.anchorName = "";
+    updateSimilarButtons();
+}
+
+// ── トグル／類似ボタン ───────────────────────────────────────
+
+function updateToggleUi() {
+    const btn = document.getElementById("wfm-gallery-semantic-toggle");
+    btn?.classList.toggle("active", sem.on);
+    // ON のときだけ2行目（Similar / 更新 / 設定 / 件数）を表示する
+    const row = document.getElementById("wfm-gallery-sem-row");
+    if (row) row.style.display = sem.on ? "flex" : "none";
+    const input = document.getElementById("wfm-gallery-search");
+    if (input) input.placeholder = sem.on ? t("semSearchPlaceholder") : "Search images...";
+}
+
+function updateSimilarButtons() {
+    document.getElementById("wfm-gallery-similar-btn")?.classList.toggle("active", !!sem.anchor);
+}
+
+async function toggleSimilar() {
+    if (sem.anchor) {
+        exitSimilarMode();
+        ctx.reload();
+        return;
+    }
+    await applySimilar();
+}
+
+async function applySimilar() {
+    const img = ctx.getSelected();
+    if (!img) {
+        showToast(t("gallerySelectImageFirst"), "error");
+        return;
+    }
+    sem.anchor = img.path;
+    sem.anchorName = img.filename;
+    updateSimilarButtons();
+    ctx.reload();
+}
+
+// ── インデックス作成モーダル ─────────────────────────────────
+
+function modalHtml() {
+    const tab = ["index", "model", "search"].includes(lsGet(LS_TAB, "index")) ? lsGet(LS_TAB, "index") : "index";
+    const pane = (id, body) => `<div class="wfm-sem-pane" data-sem-pane="${id}" style="${tab === id ? "" : "display:none;"}">${body}</div>`;
+    const tabBtn = (id, label) =>
+        `<button type="button" class="wfm-sem-tab-btn${tab === id ? " active" : ""}" data-sem-tab="${id}">${escapeHtml(label)}</button>`;
+    const indexPane = `
+        <div class="wfm-sem-status" id="wfm-sem-status">${escapeHtml(t("loading"))}</div>
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semScope"))}</b>
+            <span id="wfm-sem-folder" class="wfm-sem-folder"></span></div>
+        <label class="wfm-sem-row"><input type="checkbox" id="wfm-sem-recursive" ${lsGet(LS_SUB, "1") === "1" ? "checked" : ""}>
+            ${escapeHtml(t("semIncludeSub"))}</label>
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semMode"))}</b>
+            <label><input type="radio" name="wfm-sem-mode" value="missing" checked> ${escapeHtml(t("semModeMissing"))}</label>
+            <label><input type="radio" name="wfm-sem-mode" value="all"> ${escapeHtml(t("semModeAll"))}</label></div>
+        <div class="wfm-sem-progress" id="wfm-sem-progress" style="display:none;">
+            <div class="wfm-sem-bar"><div class="wfm-sem-bar-fill" id="wfm-sem-bar-fill"></div></div>
+            <div id="wfm-sem-progress-text" class="wfm-sem-hint"></div>
+        </div>
+        <div class="wfm-sem-actions">
+            <button class="wfm-btn wfm-btn-primary" id="wfm-sem-start">${escapeHtml(t("semStart"))}</button>
+            <button class="wfm-btn" id="wfm-sem-cancel" disabled>${escapeHtml(t("semCancelJob"))}</button>
+            <button class="wfm-btn wfm-sem-danger" id="wfm-sem-clear">${escapeHtml(t("semClear"))}</button>
+        </div>`;
+    const modelPane = `
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semModel"))}</b>
+            <label><input type="radio" name="wfm-sem-model" value="${GEMINI}"> ${escapeHtml(t("semModelGemini"))}</label>
+            <label><input type="radio" name="wfm-sem-model" value="${LOCAL}"> ${escapeHtml(t("semModelLocal"))}</label></div>
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semDimension"))}</b>
+            <select id="wfm-sem-dim" class="wfm-select"></select>
+            <span class="wfm-sem-hint">${escapeHtml(t("semDimHint"))}</span></div>
+        <div id="wfm-sem-local-opts" class="wfm-sem-local-opts" style="display:none;">
+            <div class="wfm-sem-row"><b>${escapeHtml(t("semDevice"))}</b>
+                <select id="wfm-sem-device" class="wfm-select">
+                    <option value="auto">${escapeHtml(t("semDeviceAuto"))}</option>
+                    <option value="cpu">CPU</option>
+                    <option value="cuda">GPU (CUDA)</option>
+                </select>
+                <span id="wfm-sem-device-info" class="wfm-sem-hint"></span></div>
+            <div class="wfm-sem-row" id="wfm-sem-threads-row"><b>${escapeHtml(t("semThreads"))}</b>
+                <select id="wfm-sem-threads" class="wfm-select"></select>
+                <span class="wfm-sem-hint">${escapeHtml(t("semThreadsHint"))}</span></div>
+            <div class="wfm-sem-row"><b>${escapeHtml(t("semSoft"))}</b>
+                <select id="wfm-sem-soft" class="wfm-select">
+                    <option value="280">${escapeHtml(t("semSoftHigh"))}</option>
+                    <option value="140">${escapeHtml(t("semSoftStd"))}</option>
+                    <option value="70">${escapeHtml(t("semSoftLight"))}</option>
+                </select>
+                <span class="wfm-sem-hint">${escapeHtml(t("semSoftHint"))}</span></div>
+        </div>
+        <div class="wfm-sem-actions">
+            <button class="wfm-btn" id="wfm-sem-test">${escapeHtml(t("semTest"))}</button>
+        </div>
+        <p class="wfm-sem-hint">${escapeHtml(t("semCostNote"))}</p>`;
+    const searchPane = `
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semThTarget"))}</b>
+            <span id="wfm-sem-th-model" class="wfm-sem-folder"></span></div>
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semThSimilar"))}</b>
+            <input type="number" id="wfm-sem-th-similar" class="wfm-input wfm-sem-num" min="0" max="1" step="0.01" placeholder="0">
+            <span class="wfm-sem-hint">${escapeHtml(t("semThSimilarHint"))}</span></div>
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semThText"))}</b>
+            <input type="number" id="wfm-sem-th-text" class="wfm-input wfm-sem-num" min="0" max="1" step="0.01" placeholder="0">
+            <span class="wfm-sem-hint">${escapeHtml(t("semThTextHint"))}</span></div>
+        <div class="wfm-sem-row"><b>${escapeHtml(t("semThLimit"))}</b>
+            <select id="wfm-sem-th-limit" class="wfm-select">${LIMITS.map(n => `<option value="${n}">${n}</option>`).join("")}</select></div>
+        <p class="wfm-sem-hint">${escapeHtml(t("semThNote"))}</p>`;
+    return `
+    <div class="wfm-sem-modal">
+        <div class="wfm-sem-tabs">${tabBtn("index", t("semTabIndex"))}${tabBtn("model", t("semTabModel"))}${tabBtn("search", t("semTabSearch"))}</div>
+        ${pane("index", indexPane)}${pane("model", modelPane)}${pane("search", searchPane)}
+        <div class="wfm-sem-actions wfm-sem-footer">
+            <button class="wfm-btn" id="wfm-sem-help" title="${escapeHtml(t("semHelpTitle"))}">?</button>
+            <button class="wfm-btn" id="wfm-sem-close">${escapeHtml(t("close"))}</button>
+        </div>
+    </div>`;
+}
+
+function modalAlive() {
+    const overlay = document.getElementById("wfm-modal-overlay");
+    return !!document.getElementById("wfm-sem-status") && overlay && overlay.style.display !== "none";
+}
+
+let _pollTimer = null;
+let _backends = {};
+let _sawRunning = false;
+
+function selectedModel() {
+    return document.querySelector('input[name="wfm-sem-model"]:checked')?.value || GEMINI;
+}
+
+/** ローカルモデルの実行設定(デバイス/スレッド/画像精度)の初期値をサーバー保存値から設定する */
+function initLocalOpts(st) {
+    const lo = st.local || {};
+    const devSel = document.getElementById("wfm-sem-device");
+    devSel.value = (lo.options && lo.options.device) || "auto";
+    const cores = lo.devices?.cpu_count || 4;
+    const cur = (lo.options && lo.options.threads) || lo.default_threads || Math.max(1, Math.floor(cores / 2));
+    const set = new Set([1, 2, 4, 6, 8, 12, 16, 24, 32].filter(n => n <= cores).concat([cores, cur, lo.default_threads || 1]));
+    document.getElementById("wfm-sem-threads").innerHTML = [...set].sort((a, b) => a - b)
+        .map(n => `<option value="${n}">${n}${n === cores ? ` (${t("semThreadsAll")})` : ""}</option>`).join("");
+    document.getElementById("wfm-sem-threads").value = String(cur);
+    const soft = st.indexed_total && st.index_model === LOCAL ? st.index_soft : parseInt(lsGet(LS_SOFT, String(lo.default_soft || 280)), 10);
+    document.getElementById("wfm-sem-soft").value = String([70, 140, 280].includes(soft) ? soft : 280);
+}
+
+/** 検索タブ: しきい値の入力欄にインデックスのモデル用の保存値を入れる（入力中の値は上書きしない） */
+function fillThresholds(st) {
+    const model = st.indexed_total ? st.index_model : selectedModel();
+    const box = document.getElementById("wfm-sem-th-model");
+    if (box) box.textContent = model + (st.indexed_total ? "" : ` ${t("semThNoIndex")}`);
+    const pane = document.getElementById("wfm-sem-th-similar");
+    if (!pane || pane.dataset.model === model) return;
+    const th = loadThresholds(model);
+    pane.value = th.similar || "";
+    document.getElementById("wfm-sem-th-text").value = th.text || "";
+    document.getElementById("wfm-sem-th-limit").value = String(th.limit);
+    pane.dataset.model = model;
+}
+
+/** 検索タブの入力を保存する。一覧が意味検索/類似表示中なら閉じるときに再読込する */
+let _thDirty = false;
+function saveThresholdInputs() {
+    const model = document.getElementById("wfm-sem-th-similar")?.dataset.model;
+    if (!model) return;
+    const clamp = id => {
+        const n = parseFloat(document.getElementById(id).value);
+        return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0;
+    };
+    saveThresholds(model, {
+        similar: clamp("wfm-sem-th-similar"),
+        text: clamp("wfm-sem-th-text"),
+        limit: parseInt(document.getElementById("wfm-sem-th-limit").value, 10) || 200,
+    });
+    _thDirty = true;
+}
+
+/** モーダルを閉じる共通処理 */
+function closeSemanticModal() {
+    clearTimeout(_pollTimer);
+    closeModal();
+    refreshSemanticDots();
+    if (_thDirty) {
+        _thDirty = false;
+        if (getSemanticMode()) ctx.reload();   // 新しいしきい値で一覧を取り直す
+    }
+}
+
+/** 検出した実行デバイスの表示(GPU版onnxruntimeが無いときの案内を含む) */
+function updateDeviceInfo(lo) {
+    const dev = lo?.devices;
+    if (!dev) return;
+    const info = document.getElementById("wfm-sem-device-info");
+    const cudaOpt = document.querySelector('#wfm-sem-device option[value="cuda"]');
+    if (cudaOpt) cudaOpt.disabled = !dev.cuda;
+    if (!dev.cuda && document.getElementById("wfm-sem-device").value === "cuda") {
+        document.getElementById("wfm-sem-device").value = "auto";
+    }
+    if (info) info.textContent = dev.cuda ? t("semDeviceCudaOk", dev.ort_version) : t("semDeviceNoGpu", dev.ort_version);
+    const dv = document.getElementById("wfm-sem-device").value;
+    const useCpu = dv === "cpu" || (dv === "auto" && !dev.cuda);
+    document.getElementById("wfm-sem-threads-row").style.display = useCpu ? "" : "none";
+}
+
+/** 選択中モデルの次元選択肢を作り直す(preferredが選択肢にあればそれを選ぶ) */
+function fillDims(model, preferred) {
+    const sel = document.getElementById("wfm-sem-dim");
+    const info = _backends[model];
+    if (!sel || !info) return;
+    sel.innerHTML = info.dims.map(d => `<option value="${d}">${d}</option>`).join("");
+    sel.value = String(info.dims.includes(preferred) ? preferred : info.default_dim);
+}
+
+async function refreshModal() {
+    if (!modalAlive()) return;
+    const folder = ctx.getFolder();
+    const recursive = document.getElementById("wfm-sem-recursive")?.checked ?? true;
+    let st;
+    try {
+        const res = await fetch(API.status(folder, recursive));
+        st = await res.json();
+        if (!res.ok) throw new Error(st.error || `HTTP ${res.status}`);
+    } catch (e) {
+        document.getElementById("wfm-sem-status").textContent = t("errorWithMsg", e.message);
+        return;
+    }
+    if (!modalAlive()) return;
+    const job = st.job || {};
+    _backends = st.backends || {};
+    if (st.indexed_total) sem.indexModel = st.index_model;
+    if (!document.getElementById("wfm-sem-dim").dataset.init) {
+        // 初回のみ: 既存インデックスのモデル/次元、なければ前回の選択を初期値にする
+        const initModel = st.indexed_total ? st.index_model : lsGet(LS_MODEL, GEMINI);
+        const radio = document.querySelector(`input[name="wfm-sem-model"][value="${initModel}"]`)
+            || document.querySelector(`input[name="wfm-sem-model"][value="${GEMINI}"]`);
+        radio.checked = true;
+        fillDims(radio.value, st.indexed_total ? st.index_dim : parseInt(lsGet(LS_DIM, "0"), 10));
+        initLocalOpts(st);
+        document.getElementById("wfm-sem-dim").dataset.init = "1";
+    }
+    fillThresholds(st);
+    const model = selectedModel();
+    document.getElementById("wfm-sem-local-opts").style.display = model === LOCAL ? "" : "none";
+    updateDeviceInfo(st.local);
+    const ready = model === LOCAL ? true : !!st.has_key;
+    const keyLine = model === LOCAL
+        ? (_backends[LOCAL]?.downloaded ? t("semLocalReady") : t("semLocalNeedDownload"))
+        : (st.has_key ? t("semKeyOk") : t("semKeyMissing"));
+    const idxLine = t("semIndexInfo", st.indexed_total, st.index_dim || "-");
+    const scopeLine = st.scope_total != null ? t("semScopeInfo", st.scope_indexed, st.scope_total) : "";
+    document.getElementById("wfm-sem-status").innerHTML =
+        `<div class="${ready ? "wfm-sem-ok" : "wfm-sem-ng"}">${escapeHtml(keyLine)}</div>` +
+        `<div>${escapeHtml(st.indexed_total ? st.index_model : "-")} / ${escapeHtml(idxLine)}</div>` +
+        (scopeLine ? `<div>${escapeHtml(scopeLine)}</div>` : "");
+    document.getElementById("wfm-sem-folder").textContent = folder || t("semNoFolder");
+
+    const prog = document.getElementById("wfm-sem-progress");
+    const hasJob = job.running || job.finished;
+    prog.style.display = hasJob ? "" : "none";
+    if (hasJob) {
+        const total = job.total || 0;
+        const doneAll = (job.done || 0) + (job.failed || 0);
+        document.getElementById("wfm-sem-bar-fill").style.width = total ? `${Math.min(100, (doneAll / total) * 100)}%` : "100%";
+        let text = t("semProgress", job.done || 0, total, job.failed || 0);
+        if (job.running && job.current) text += `  ${job.current}`;
+        if (!job.running) {
+            if (["no_api_key", "api_key_invalid", "local_error"].includes(job.error_code)) text += `  ${t(`sem_err_${job.error_code}`, job.error)}`;
+            else text += `  ${job.cancelled ? t("semCancelled") : t("semFinished")}`;
+            if (job.failed && job.error) text += `  (${job.error})`;
+        }
+        document.getElementById("wfm-sem-progress-text").textContent = text;
+    }
+    document.getElementById("wfm-sem-start").disabled = !!job.running || !ready;
+    document.getElementById("wfm-sem-cancel").disabled = !job.running;
+    document.getElementById("wfm-sem-clear").disabled = !!job.running;
+    document.getElementById("wfm-sem-test").disabled = !ready;
+
+    clearTimeout(_pollTimer);
+    if (job.running) {
+        _pollTimer = setTimeout(refreshModal, 1000);
+        _sawRunning = true;
+    } else if (_sawRunning) {
+        _sawRunning = false;
+        refreshSemanticDots();
+    }
+}
+
+/** ヘルプタブのGallery > セマンティック検索の説明へ飛ぶ */
+function openSemanticHelp() {
+    closeSemanticModal();
+    document.querySelector('.wfm-tab[data-tab="help"]')?.click();
+    document.querySelector('.wfm-help-nav-item[data-help-page="gallery"]')?.click();
+    const target = document.getElementById("wfm-help-gallery-33");
+    if (!target) return;
+    target.scrollIntoView({ behavior: "smooth", block: "center" });
+    target.classList.add("wfm-help-flash");
+    setTimeout(() => target.classList.remove("wfm-help-flash"), 2500);
+}
+
+function openSemanticModal() {
+    if (!ctx.getFolder()) {
+        showToast(t("semNoFolder"), "error");
+        return;
+    }
+    openModal(t("semModalTitle"), modalHtml());
+    const dimOf = () => parseInt(document.getElementById("wfm-sem-dim").value, 10) || 0;
+    // ローカルモデル選択時のみ実行設定を送る(サーバー側で保存され、検索時のクエリ埋め込みにも使われる)
+    const localOpts = () => selectedModel() === LOCAL ? {
+        device: document.getElementById("wfm-sem-device").value,
+        threads: parseInt(document.getElementById("wfm-sem-threads").value, 10) || 0,
+        soft: parseInt(document.getElementById("wfm-sem-soft").value, 10) || 280,
+    } : {};
+    document.getElementById("wfm-sem-device").addEventListener("change", () => refreshModal());
+    document.querySelectorAll('input[name="wfm-sem-model"]').forEach(r => r.addEventListener("change", () => {
+        fillDims(selectedModel(), 0);
+        refreshModal();
+    }));
+
+    document.getElementById("wfm-sem-recursive").addEventListener("change", (e) => {
+        lsSet(LS_SUB, e.target.checked ? "1" : "0");
+        refreshModal();
+    });
+    document.getElementById("wfm-sem-close").addEventListener("click", closeSemanticModal);
+    document.querySelectorAll(".wfm-sem-tab-btn").forEach(btn => btn.addEventListener("click", () => {
+        document.querySelectorAll(".wfm-sem-tab-btn").forEach(b => b.classList.toggle("active", b === btn));
+        document.querySelectorAll(".wfm-sem-pane").forEach(p => { p.style.display = p.dataset.semPane === btn.dataset.semTab ? "" : "none"; });
+        lsSet(LS_TAB, btn.dataset.semTab);
+    }));
+    ["wfm-sem-th-similar", "wfm-sem-th-text"].forEach(id => document.getElementById(id).addEventListener("change", saveThresholdInputs));
+    document.getElementById("wfm-sem-th-limit").addEventListener("change", saveThresholdInputs);
+    document.getElementById("wfm-sem-help").addEventListener("click", openSemanticHelp);
+    document.getElementById("wfm-sem-start").addEventListener("click", async () => {
+        const mode = document.querySelector('input[name="wfm-sem-mode"]:checked')?.value || "missing";
+        if (mode === "all" && !confirm(t("semConfirmAll"))) return;
+        lsSet(LS_DIM, String(dimOf()));
+        lsSet(LS_MODEL, selectedModel());
+        lsSet(LS_SOFT, document.getElementById("wfm-sem-soft").value);
+        try {
+            await postJson(API.index, {
+                folder: ctx.getFolder(),
+                recursive: document.getElementById("wfm-sem-recursive").checked,
+                mode,
+                model: selectedModel(),
+                dim: dimOf(),
+                ...localOpts(),
+            });
+        } catch (e) {
+            showToast(semanticErrorMessage(e), "error");
+        }
+        refreshModal();
+    });
+    document.getElementById("wfm-sem-cancel").addEventListener("click", async () => {
+        await postJson(API.cancel, {}).catch(() => {});
+        refreshModal();
+    });
+    document.getElementById("wfm-sem-test").addEventListener("click", async () => {
+        try {
+            const r = await postJson(API.test, { model: selectedModel(), dim: dimOf(), ...localOpts() });
+            showToast(r.provider && r.provider !== "API" ? t("semTestOkProvider", r.dimensions, r.provider) : t("semTestOk", r.dimensions), "success");
+        } catch (e) {
+            showToast(semanticErrorMessage(e), "error");
+        }
+    });
+    document.getElementById("wfm-sem-clear").addEventListener("click", async () => {
+        if (!confirm(t("semConfirmClear"))) return;
+        try {
+            await postJson(API.clear, {});
+            showToast(t("semCleared"), "success");
+            refreshSemanticDots();
+        } catch (e) {
+            showToast(semanticErrorMessage(e), "error");
+        }
+        refreshModal();
+    });
+    refreshModal();
+}
+
+// ── 初期化 ───────────────────────────────────────────────────
+
+/**
+ * @param {object} context
+ *  getSearch(): 検索ボックスの文字列 / getFolder(): 選択中フォルダ / getSelected(): 選択中画像
+ *  reload(): 一覧再読込(loadImages)
+ */
+export function initSemantic(context) {
+    ctx = context;
+    sem.on = lsGet(LS_ON, "0") === "1";
+    updateToggleUi();
+    updateSimilarButtons();
+
+    document.getElementById("wfm-gallery-semantic-toggle")?.addEventListener("click", () => {
+        sem.on = !sem.on;
+        lsSet(LS_ON, sem.on ? "1" : "0");
+        updateToggleUi();
+        // OFFにしたら類似表示も解除する（2行目ごと消えるため）
+        const wasSimilar = !!sem.anchor;
+        if (!sem.on) exitSimilarMode();
+        // 検索文字列があれば、モード切替後の方式で結果を取り直す
+        if (wasSimilar && !sem.on || (ctx.getSearch() || "").trim()) ctx.reload();
+    });
+    fetch(API.status("", true)).then(r => r.json()).then(st => {
+        if (st.indexed_total) sem.indexModel = st.index_model;
+    }).catch(() => { /* 取得できなくても既定のモデル扱いで動作する */ });
+    document.getElementById("wfm-gallery-semantic-settings-btn")?.addEventListener("click", openSemanticModal);
+    document.getElementById("wfm-gallery-similar-btn")?.addEventListener("click", toggleSimilar);
+    document.getElementById("wfm-gallery-similar-refresh-btn")?.addEventListener("click", applySimilar);
+}
@@ -9,44 +9,9 @@ import { comfyEditor } from "./comfyui-editor.js";
 import { t } from "./i18n.js";
 import { syncJsonHighlight, syncScroll } from "./json-highlight.js";
 import { initFeederTab, refreshFeederNodeList } from "./feeder-tab.js";
-import { getSettings, readJsonStorage, escapeHtml } from "./util.js";
-
-// ============================================
-// Eagle Auto-Save
-// ============================================
-
-function getEagleSettings() {
-    const s = getSettings();
-    return {
-        url: s.eagleUrl || "http://localhost:41595",
-        autoSave: !!s.eagleAutoSave,
-    };
-}
-
-async function saveToEagle(imageUrl, name, tags = []) {
-    const eagle = getEagleSettings();
-    if (!eagle.autoSave) return;
-    try {
-        const res = await fetch("/api/wfm/eagle/add", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-                eagleUrl: eagle.url,
-                url: imageUrl,
-                name,
-                tags: ["wfm-comfyui", ...tags],
-            }),
-        });
-        const data = await res.json();
-        if (data.status === "success") {
-            console.log("[Eagle] Saved:", name);
-        } else {
-            console.warn("[Eagle] Save failed:", data.message);
-        }
-    } catch (err) {
-        console.warn("[Eagle] Save error:", err.message);
-    }
-}
+import { initLabTab, refreshLabLiveDefaults } from "./lab-tab.js";
+import { getSettings, readJsonStorage, escapeHtml, getEagleSettings, saveToEagle } from "./util.js";
+import { isVideoFilename } from "./video-utils.js";

 // ============================================
 // Gallery Metadata - ワークフロー保存
@@ -200,6 +165,17 @@ async function saveCurrentWorkflow() {
                    nameEl.dataset.filename = filename;
                }
            }
+
+            // このファイル名が「デフォルトワークフロー」(workflow-tab.jsの「デフォルトに設定」で
+            // localStorageにスナップショットされたAPI形式JSON、ページ起動時に自動読込される)に
+            // 一致する場合、保存内容と食い違ったまま残らないようスナップショットも更新する。
+            // 更新しないと、ここで上書き保存しても次回リロード時に古いモデル等が復活する。
+            const settings = getSettings();
+            if (settings.defaultWorkflow === filename) {
+                settings.defaultWorkflowData = workflow;
+                localStorage.setItem("wfm_settings", JSON.stringify(settings));
+            }
+
            showToast(t("savedAs", filename), "success");
        } catch (err) {
            showToast(t("saveFailed", err.message), "error");
@@ -267,7 +243,9 @@ export async function loadWorkflowIntoEditor(workflow, filename) {
    comfyUI.currentAnalysis = comfyWorkflow.analyzeWorkflow(apiWorkflow);

    // Render editor tabs
-    comfyEditor.renderAll(comfyUI.currentAnalysis, apiWorkflow);
+    // resetStackMode: 新規ワークフロー読み込み時のみ、LoraManagerノードのloras/text状態を
+    // スナップショットし、Stackグループ使用チェックボックスをOFFへリセットする
+    comfyEditor.renderAll(comfyUI.currentAnalysis, apiWorkflow, { resetStackMode: true });

    // Update raw JSON with highlight
    const rawTextarea = document.getElementById("wfm-gen-raw-json");
@@ -315,6 +293,13 @@ export async function loadWorkflowIntoEditor(workflow, filename) {

    refreshFeederNodeList();

+    // Lab subtab may already be the active one (e.g. it was active when this workflow
+    // was loaded) — the subtab-click handler that normally triggers this refresh never
+    // fires in that case, leaving Setting 1's live-reflected cells showing the previous
+    // workflow until the user clicks a cell or revisits the subtab.
+    const activeSubtab = document.querySelector(".wfm-gen-subtab-btn.active")?.dataset.subtab;
+    if (activeSubtab === "lab") refreshLabLiveDefaults();
+
    if (ckptWarning) {
        showToast(ckptWarning, "error");
    } else {
@@ -1299,6 +1284,12 @@ async function _loadStyles() {
    _rebuildStyleList();
 }

+// Promptタブ「Style」サブタブでスタイルを作成・編集・削除した後に呼ばれる。
+// GenerateUIのStyleドロップダウン・Batchタブのチェックリストを最新の状態へ再同期する。
+export async function refreshStylesList() {
+    await _loadStyles();
+}
+
 function _renderStyleDropdown() {
    const sel = document.getElementById("wfm-style-select");
    if (!sel) return;
@@ -1327,6 +1318,21 @@ function _rebuildStyleList() {
    );
 }

+// Style Catalogギャラリーの「Select as Style」から呼ばれる。名前が一致する登録済み
+// Styleを探し、GenerateUIのStyleドロップダウンをそれに切り替えてタブへ移動する。
+// 画像に埋め込まれたプロンプトを直接適用するのではなく、既存Styleシステムへの
+// 視覚的なショートカットとして機能する（元のStyle JSONが変更・削除されても影響を受けない）。
+export function selectStyleByName(name) {
+    const style = _stylesData.find((s) => s.name === name);
+    if (!style) return false;
+    const sel = document.getElementById("wfm-style-select");
+    if (sel) sel.value = name;
+    const enabled = document.getElementById("wfm-style-enabled");
+    if (enabled) enabled.checked = true;
+    document.querySelector('.wfm-tab[data-tab="generate"]')?.click();
+    return true;
+}
+
 function _applyNamedStyle(workflow, style) {
    if (!style) return workflow;
    const analysis = comfyUI.currentAnalysis;
@@ -1427,7 +1433,7 @@ async function _expandWildcardText(text) {

 const _IMPACT_WC_TYPES = new Set(["ImpactWildcardEncode", "ImpactWildcardProcessor"]);

-async function _expandWildcardsInWorkflow(workflow) {
+export async function _expandWildcardsInWorkflow(workflow) {
    let hasWildcard = false;
    outer: for (const node of Object.values(workflow)) {
        if (_IMPACT_WC_TYPES.has(node.class_type)) continue;
@@ -1456,26 +1462,38 @@ async function _expandWildcardsInWorkflow(workflow) {
 // Generation (core — throws on error)
 // ============================================

-async function _coreGenerate(silent = false, workflowOverride = null) {
+async function _coreGenerate(silent = false, workflowOverride = null, genOptions = {}) {
    const progressBar = document.getElementById("wfm-gen-progress-bar");
    const progressText = document.getElementById("wfm-gen-progress-text");
    const resultImg = document.getElementById("wfm-gen-result-img");
+    const resultVideo = document.getElementById("wfm-gen-result-video");
    const resultThumbs = document.getElementById("wfm-gen-result-thumbs");

-    const seedMode = document.getElementById("wfm-gen-seed-mode")?.value || "random";
-    const seedValue = parseInt(document.getElementById("wfm-gen-seed-value")?.value) || -1;
+    // genOptions.seedValue lets a caller (e.g. AI TOOL Chat's generate_image tool)
+    // force a specific seed on an override workflow without touching the GenerateUI
+    // seed fields — those still drive normal (non-override) generation as before.
+    const seedMode = genOptions.seedValue != null ? "fixed" : (document.getElementById("wfm-gen-seed-mode")?.value || "random");
+    const seedValue = genOptions.seedValue ?? (parseInt(document.getElementById("wfm-gen-seed-value")?.value) || -1);

    if (progressBar) progressBar.style.width = "0%";
    if (progressText) progressText.textContent = "Starting...";

+    // Style must be applied *before* wildcard expansion so a __name__ reference written
+    // inside a Style's prompt/negative_prompt also gets expanded, not just wildcards
+    // already present in the base workflow's prompt nodes.
    const baseWorkflow = workflowOverride || comfyUI.currentWorkflow;
-    const workflowExpanded = await _expandWildcardsInWorkflow({ ...baseWorkflow });
-    const workflowForGenerate = _applyStyleToWorkflow(workflowExpanded);
-    const { images, seed } = await comfyUI.generate(
+    const workflowStyled = _applyStyleToWorkflow({ ...baseWorkflow });
+    const workflowForGenerate = await _expandWildcardsInWorkflow(workflowStyled);
+    // Video workflows (e.g. MiniMax H3) run far longer than a still image — use a longer
+    // timeout so a multi-minute generation doesn't get force-rejected mid-run (see
+    // comfyWorkflow.isVideoWorkflow and video-tab.js's own 30-minute timeout).
+    const isVideo = comfyWorkflow.isVideoWorkflow(comfyUI.currentAnalysis);
+    const { images, seed, svgOutputs } = await comfyUI.generate(
        workflowForGenerate,
        {
            seedMode,
            seedValue,
+            timeoutMs: isVideo ? 30 * 60 * 1000 : undefined,
            onProgress: (pct) => {
                if (progressBar) progressBar.style.width = `${(pct * 100).toFixed(1)}%`;
                if (progressText) progressText.textContent = `${(pct * 100).toFixed(0)}%`;
@@ -1489,24 +1507,68 @@ async function _coreGenerate(silent = false, workflowOverride = null) {
    if (progressText) progressText.textContent = `Done (${images.length} image${images.length !== 1 ? "s" : ""})`;
    if (progressBar) progressBar.style.width = "100%";

-    if (images.length > 0) {
-        const blob = await comfyUI.getImageBlob(images[0]);
-        const url = URL.createObjectURL(blob);
-        if (resultImg) {
-            resultImg.src = url;
+    // type=temp はプレビュー用の一時画像 (PreviewImage, SVG String Preview など) のため
+    // 生成結果表示からは除外し、実際に保存された成果物のみを表示する
+    const outputImages = images.filter((img) => img.type !== "temp");
+
+    if (svgOutputs?.length > 0) {
+        // comfyui-tosvg の Save SVG String は images ではなく saved_svg/path で返すため、
+        // images配列には(あれば)プレビュー用の一時PNGしか入らず実際の保存物と食い違う。
+        // 実際に保存されたSVGファイルをそのままプレビューに表示する。
+        // /view はSVGをセキュリティ上application/octet-streamで返すため使えず、
+        // 代わりにGalleryタブの配信エンドポイント(絶対パス指定・正しいContent-Type)を使う。
+        const svgUrl = (svg) => `/wfm/gallery/image/serve?path=${encodeURIComponent(svg.path)}`;
+        if (resultImg && svgOutputs[0].path) {
+            resultImg.src = svgUrl(svgOutputs[0]);
            resultImg.style.display = "block";
        }

-        if (resultThumbs && images.length > 1) {
+        if (resultThumbs && svgOutputs.length > 1) {
            resultThumbs.innerHTML = "";
-            for (let i = 0; i < images.length; i++) {
-                const b = i === 0 ? blob : await comfyUI.getImageBlob(images[i]);
-                const u = i === 0 ? url : URL.createObjectURL(b);
+            svgOutputs.forEach((svg, i) => {
+                if (!svg.path) return;
                const thumb = document.createElement("img");
-                thumb.src = u;
+                thumb.src = svgUrl(svg);
                thumb.className = `wfm-gen-thumb ${i === 0 ? "active" : ""}`;
                thumb.addEventListener("click", () => {
-                    resultImg.src = u;
+                    resultImg.src = thumb.src;
+                    resultThumbs.querySelectorAll(".wfm-gen-thumb").forEach((t) => t.classList.remove("active"));
+                    thumb.classList.add("active");
+                });
+                resultThumbs.appendChild(thumb);
+            });
+        }
+    } else if (outputImages.length > 0) {
+        // Video outputs (SaveVideo/PreviewVideo, e.g. MiniMax H3) come back through the
+        // same {"images":[...]} shape as still images — dispatch to <video> vs <img>
+        // per-item by extension rather than assuming the whole batch is one media type.
+        const showMedia = (blob, filename) => {
+            const url = URL.createObjectURL(blob);
+            if (isVideoFilename(filename)) {
+                if (resultVideo) { resultVideo.src = url; resultVideo.style.display = "block"; }
+                if (resultImg) resultImg.style.display = "none";
+            } else {
+                if (resultImg) { resultImg.src = url; resultImg.style.display = "block"; }
+                if (resultVideo) { resultVideo.pause(); resultVideo.style.display = "none"; }
+            }
+        };
+
+        const blob = await comfyUI.getImageBlob(outputImages[0]);
+        showMedia(blob, outputImages[0].filename);
+
+        if (resultThumbs && outputImages.length > 1) {
+            resultThumbs.innerHTML = "";
+            for (let i = 0; i < outputImages.length; i++) {
+                const b = i === 0 ? blob : await comfyUI.getImageBlob(outputImages[i]);
+                const filename = outputImages[i].filename;
+                const u = URL.createObjectURL(b);
+                const isVid = isVideoFilename(filename);
+                const thumb = document.createElement(isVid ? "video" : "img");
+                thumb.src = u;
+                if (isVid) thumb.muted = true;
+                thumb.className = `wfm-gen-thumb ${i === 0 ? "active" : ""}`;
+                thumb.addEventListener("click", () => {
+                    showMedia(b, filename);
                    resultThumbs.querySelectorAll(".wfm-gen-thumb").forEach((t) => t.classList.remove("active"));
                    thumb.classList.add("active");
                });
@@ -1515,10 +1577,18 @@ async function _coreGenerate(silent = false, workflowOverride = null) {
        }
    }

-    if (getEagleSettings().autoSave && images.length > 0) {
-        for (const img of images) {
+    if (getEagleSettings().autoSave && outputImages.length > 0) {
+        for (const img of outputImages) {
            const viewUrl = `/view?filename=${encodeURIComponent(img.filename)}&subfolder=${encodeURIComponent(img.subfolder || "")}&type=${encodeURIComponent(img.type || "output")}`;
-            saveToEagle(viewUrl, img.filename);
+            saveToEagle(viewUrl, img.filename, [], img);
+        }
+    }
+
+    if (getEagleSettings().autoSave && svgOutputs?.length > 0) {
+        // comfyui-tosvg の "Save SVG String" は絶対パスを直接返すため、/view を介さず
+        // サーバー側でそのパスを検証した上で addFromPath させる
+        for (const svg of svgOutputs) {
+            saveToEagle("", svg.filename, [], { filename: svg.filename, localPath: svg.path });
        }
    }

@@ -1536,7 +1606,9 @@ async function _coreGenerate(silent = false, workflowOverride = null) {
 // ============================================

 // 汎用バッチループ: items を順に applyFn(item) → _coreGenerate() で処理する
-async function _runBatchLoop(items, applyFn, labelFn = (x) => String(x)) {
+// onResultFn(item, {images, seed}) が渡された場合、各アイテムの生成結果ごとに呼び出す
+// （Style Catalogのカタログ作成が、生成画像をスタイル名で保存するために使用）
+async function _runBatchLoop(items, applyFn, labelFn = (x) => String(x), onResultFn = null) {
    const batchProgress   = document.getElementById("wfm-ckpt-batch-progress");
    const batchCurrentName = document.getElementById("wfm-ckpt-batch-current-name");
    const batchCount      = document.getElementById("wfm-ckpt-batch-count");
@@ -1571,7 +1643,8 @@ async function _runBatchLoop(items, applyFn, labelFn = (x) => String(x)) {

            try {
                await applyFn(item);
-                await _coreGenerate(true);
+                const result = await _coreGenerate(true);
+                if (onResultFn) await onResultFn(item, result);
                completed++;
            } catch (err) {
                if (_ckptBatch.aborted) break;
@@ -1600,6 +1673,157 @@ async function _runBatchLoop(items, applyFn, labelFn = (x) => String(x)) {
    }
 }

+// ============================================
+// Style Catalog 作成
+// ============================================
+// Batchタブ「Style」サブタブで選択済みのスタイル(_batchStyleSelected)を対象に、
+// 現在ロード中のワークフローでそれぞれ生成し、結果をスタイル名でws_style_catalog
+// 配下の指定フォルダへ保存する（Style Catalogギャラリーからの視覚的スタイル選択に使う）。
+
+function _blobToDataUrl(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}
+
+function _flattenFolderTree(node, acc = [], isRoot = true) {
+    acc.push({ path: isRoot ? "[root]" : node.path, abs_path: node.abs_path });
+    (node.children || []).forEach((c) => _flattenFolderTree(c, acc, false));
+    return acc;
+}
+
+async function openCatalogCreateModal() {
+    const list = _stylesData.filter((s) => _batchStyleSelected.has(s.name));
+    if (list.length === 0) {
+        showToast(t("catalogCreateNoStyles"), "error");
+        return;
+    }
+
+    let catalogRoot = null;
+    let folderTree = null;
+    try {
+        const rootRes = await fetch("/wfm/gallery/style-catalog/root");
+        const rootData = await rootRes.json();
+        catalogRoot = rootData.root;
+        if (!catalogRoot) throw new Error(rootData.error || "Style Catalog root not resolved");
+        const treeRes = await fetch(`/wfm/gallery/folders?root=${encodeURIComponent(catalogRoot)}`);
+        folderTree = await treeRes.json();
+    } catch (e) {
+        showToast(t("errorWithMsg", e.message), "error");
+        return;
+    }
+
+    const folderOptions = folderTree && !folderTree.error ? _flattenFolderTree(folderTree) : [];
+
+    const html = `
+        <p style="margin:0 0 10px;font-size:13px;color:var(--wfm-text-secondary);">${t("catalogCreateSelectedCount", list.length)}</p>
+        <div style="display:flex;flex-direction:column;gap:8px;">
+            <label style="display:flex;align-items:center;gap:6px;">
+                <input type="radio" name="wfm-catalog-dest" value="new" checked>
+                ${t("catalogCreateNewFolder")}
+            </label>
+            <input type="text" id="wfm-catalog-new-folder-name" class="wfm-input" placeholder="folder name" style="margin-left:22px;">
+            <label style="display:flex;align-items:center;gap:6px;">
+                <input type="radio" name="wfm-catalog-dest" value="existing" ${folderOptions.length === 0 ? "disabled" : ""}>
+                ${t("catalogCreateExistingFolder")}
+            </label>
+            <select id="wfm-catalog-existing-folder" class="wfm-input" style="margin-left:22px;" ${folderOptions.length === 0 ? "disabled" : ""}>
+                ${folderOptions.map((f) => `<option value="${escapeHtml(f.abs_path)}">${escapeHtml(f.path)}</option>`).join("")}
+            </select>
+            <hr class="wfm-group-divider" style="margin:4px 0;">
+            <label style="display:flex;align-items:center;gap:6px;">
+                <input type="checkbox" id="wfm-catalog-skip-output">
+                ${t("catalogCreateSkipOutput")}
+            </label>
+        </div>
+        <button id="wfm-catalog-run-btn" class="wfm-btn wfm-btn-primary" style="width:100%;margin-top:14px;">${t("catalogCreateRun")}</button>
+    `;
+    openModal(t("catalogCreateTitle"), html);
+
+    document.getElementById("wfm-catalog-run-btn")?.addEventListener("click", async () => {
+        const destType = document.querySelector('input[name="wfm-catalog-dest"]:checked')?.value;
+        let destFolder = null;
+
+        if (destType === "new") {
+            const name = document.getElementById("wfm-catalog-new-folder-name")?.value.trim();
+            if (!name) {
+                showToast(t("catalogCreateFolderNameRequired"), "error");
+                return;
+            }
+            try {
+                const res = await fetch("/wfm/gallery/folder", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ parent: catalogRoot, name }),
+                });
+                const data = await res.json();
+                if (!data.ok) throw new Error(data.error || "Failed to create folder");
+                destFolder = data.path;
+            } catch (e) {
+                showToast(t("errorWithMsg", e.message), "error");
+                return;
+            }
+        } else {
+            destFolder = document.getElementById("wfm-catalog-existing-folder")?.value || null;
+            if (!destFolder) {
+                showToast(t("catalogCreateFolderRequired"), "error");
+                return;
+            }
+        }
+
+        const skipOutput = document.getElementById("wfm-catalog-skip-output")?.checked || false;
+
+        closeModal();
+        await _runCatalogCreate(list, destFolder, skipOutput);
+    });
+}
+
+async function _runCatalogCreate(list, destFolder, skipOutput) {
+    try {
+        await _runBatchLoop(
+            list,
+            (style) => { _batchStyleOverride = style; },
+            (s) => s.name,
+            async (style, result) => {
+                const outputImages = (result?.images || []).filter((img) => img.type !== "temp");
+                if (outputImages.length === 0) return;
+                const srcImage = outputImages[0];
+                const blob = await comfyUI.getImageBlob(srcImage);
+                const dataUrl = await _blobToDataUrl(blob);
+                const res = await fetch("/wfm/gallery/image/save-to-folder", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ folder: destFolder, filename: style.name, imageData: dataUrl }),
+                });
+                const data = await res.json();
+                if (!data.ok) throw new Error(data.error || "Failed to save catalog image");
+
+                // Outputフォルダに元画像を残さないオプション: カタログへのコピー保存が
+                // 成功した後にのみ、ComfyUIのOutputフォルダ側の元ファイルを削除する
+                // （コピー失敗時は削除せず、元画像を保持したままにする）
+                if (skipOutput) {
+                    try {
+                        await fetch("/wfm/gallery/output-image/delete", {
+                            method: "POST",
+                            headers: { "Content-Type": "application/json" },
+                            body: JSON.stringify({
+                                filename: srcImage.filename,
+                                subfolder: srcImage.subfolder || "",
+                                type: srcImage.type || "output",
+                            }),
+                        });
+                    } catch { /* 削除失敗はカタログ作成自体を止めない */ }
+                }
+            }
+        );
+    } finally {
+        _batchStyleOverride = null;
+    }
+}
+
 // アクティブなバッチタイプに応じてバッチを実行するディスパッチャ
 async function _runBatchGenerate() {
    switch (_activeBatchType) {
@@ -1792,9 +2016,11 @@ async function _runBatchGenerate() {
 // ============================================

 // workflowOverride: 明示的に渡された場合、comfyUI.currentWorkflow の代わりにこのワークフローで
-// 生成する（GenerateUIの表示状態には触れない。Image Edit「Inpaint」の専用ワークフロー実行から利用）。
+// 生成する（GenerateUIの表示状態には触れない。Image Edit「Inpaint」の専用ワークフロー実行や
+// AI TOOL Chatのgenerate_imageツールから利用）。
+// genOptions: 現状 seedValue のみ（指定時は_coreGenerateがseedMode "fixed"扱いにする）。
 // ボタンのclickハンドラから呼ばれる場合は第一引数がMouseEventになるため、その場合は無視する。
-async function handleGenerate(workflowOverride = null) {
+async function handleGenerate(workflowOverride = null, genOptions = {}) {
    if (workflowOverride instanceof Event) workflowOverride = null;

    if (!workflowOverride && !comfyUI.currentWorkflow) {
@@ -1823,7 +2049,7 @@ async function handleGenerate(workflowOverride = null) {
            await _runBatchGenerate();
        } else {
            try {
-                return await _coreGenerate(false, workflowOverride);
+                return await _coreGenerate(false, workflowOverride, genOptions);
            } catch (err) {
                const progressText = document.getElementById("wfm-gen-progress-text");
                if (progressText) progressText.textContent = "Error";
@@ -1888,6 +2114,25 @@ export async function initGenerateTab() {
        }
    });

+    // Style Catalog 作成ボタン
+    const catalogCreateBtn = document.getElementById("wfm-gen-catalog-create-btn");
+    if (catalogCreateBtn) {
+        catalogCreateBtn.textContent = t("catalogCreateBtn");
+        catalogCreateBtn.addEventListener("click", () => {
+            openCatalogCreateModal().catch((e) => showToast(t("errorWithMsg", e.message), "error"));
+        });
+    }
+
+    // Style Catalog を開くボタン（Gallery タブ → Style_Catalog サブタブへ遷移）
+    const catalogOpenBtn = document.getElementById("wfm-gen-catalog-open-btn");
+    if (catalogOpenBtn) {
+        catalogOpenBtn.textContent = t("catalogOpenBtn");
+        catalogOpenBtn.addEventListener("click", () => {
+            document.querySelector('.wfm-tab[data-tab="gallery"]')?.click();
+            document.querySelector('.wfm-gallery-subtab-btn[data-gallery-subtab="styleCatalog"]')?.click();
+        });
+    }
+
    // Generate button
    document.getElementById("wfm-gen-generate-btn")?.addEventListener("click", () => {
        handleGenerate().catch(() => {});
@@ -1916,7 +2161,7 @@ export async function initGenerateTab() {
    function moveRawJsonToTab(tabKey) {
        const widget = document.getElementById("wfm-gen-rawjson-widget");
        if (!widget) return;
-        if (tabKey === "feeder" || tabKey === "batch") {
+        if (tabKey === "feeder" || tabKey === "batch" || tabKey === "lab") {
            widget.style.display = "none";
            return;
        }
@@ -1940,6 +2185,17 @@ export async function initGenerateTab() {
            if (target === "model" && comfyUI.currentAnalysis) {
                comfyEditor.renderLoraPane(comfyUI.currentAnalysis, "wfm-gen-lora-fields");
            }
+            // Re-render Lab's column grid so Setting 1's live-reflected cells (checkpoint/
+            // VAE/prompt/KSampler) pick up whatever is currently loaded in GenerateUI, not
+            // whatever was loaded the last time Lab was rendered.
+            if (target === "lab") refreshLabLiveDefaults();
+            // Lab has its own Run/Results panel — hide the shared Generate/Seed/Batch column
+            const rightCol = document.querySelector(".wfm-gen-right");
+            if (rightCol) rightCol.style.display = (target === "lab") ? "none" : "";
+            // Save button writes the currently loaded workflow as-is — not meaningful while
+            // browsing Batch/Lab (which operate on workflow copies / their own Plan files)
+            const saveBtn = document.getElementById("wfm-gen-save-btn");
+            if (saveBtn) saveBtn.style.display = (target === "batch" || target === "lab") ? "none" : "";
        });
    });

@@ -1950,6 +2206,14 @@ export async function initGenerateTab() {
        }
    });

+    // Bypass button in LoRA column header — forces the target LoRA node's strength to
+    // 0 (or restores it), independent of the Single/Stack tabs' own Apply buttons.
+    document.getElementById("wfm-lora-bypass-toggle")?.addEventListener("click", () => {
+        if (!comfyUI.currentAnalysis) return;
+        comfyEditor.toggleLoraNodeBypass(comfyUI.currentAnalysis);
+        comfyEditor.renderLoraPane(comfyUI.currentAnalysis, "wfm-gen-lora-fields");
+    });
+
    // Input inner tab (Prompt / Image)
    document.querySelectorAll(".wfm-input-inner-tab").forEach((btn) => {
        btn.addEventListener("click", () => {
@@ -2027,10 +2291,11 @@ export async function initGenerateTab() {
            });
            searchOverlay.innerHTML = html + "\n";

-            // Scroll editor to current match
+            // Scroll editor to current match. フォーカス/selectionRangeは意図的に設定しない
+            // (テキストエリアにカーソルが当たった状態になり、検索直後のキー入力が選択範囲を
+            // 上書きして不意にJSONを編集してしまうため)。ハイライトはsearchOverlayの<mark>
+            // 表示のみで行い、編集はユーザーが明示的にエディタをクリックした場合に限る。
            const pos = matchPositions[currentMatchIndex];
-            editor.focus();
-            editor.setSelectionRange(pos, pos + term.length);
            const lineNum = (text.slice(0, pos).match(/\n/g) || []).length;
            const lineH = parseFloat(getComputedStyle(editor).lineHeight) || 18;
            editor.scrollTop = Math.max(0, lineH * lineNum - editor.clientHeight / 2);
@@ -2116,6 +2381,9 @@ export async function initGenerateTab() {
    // Feeder tab
    await initFeederTab();

+    // Lab tab (experimental I2I batch generation)
+    initLabTab();
+
    // Style dropdown
    await _loadStyles();

@@ -0,0 +1,208 @@
+/**
+ * Image Edit Tab - Background Removal
+ * Two backends: a lightweight in-browser model (@imgly/background-removal)
+ * and BiRefNet via the Mask Editor One server endpoints.
+ */
+
+import { showToast } from "../app.js";
+
+export class BgRemove {
+    /**
+     * @param {object} callbacks
+     * @param {() => object|null} callbacks.getLayerManager
+     * @param {() => void} callbacks.saveUndo
+     * @param {() => void} callbacks.updateCompositeView
+     * @param {() => void} callbacks.refreshLayerList
+     * @param {(newLayer: object) => void} callbacks.onLayerAdded
+     */
+    constructor(callbacks) {
+        this._cb = callbacks;
+        this.birefnetAvailable = false;
+    }
+
+    async checkAvailability() {
+        try {
+            const resp = await fetch("/mask_editor/birefnet/status");
+            if (!resp.ok) return;
+            const json = await resp.json();
+            this.birefnetAvailable = json.loaded === true || json.model_found === true;
+        } catch {
+            this.birefnetAvailable = false;
+        }
+    }
+
+    renderPanel(el) {
+        const birefnetDisabled = this.birefnetAvailable ? "" : "disabled";
+        const birefnetLabel    = this.birefnetAvailable
+            ? "BiRefNet (Mask Editor One)"
+            : "BiRefNet (Mask Editor One required)";
+        el.innerHTML = `
+            <div class="ie-opt-group">
+                <label>Model</label>
+                <select id="ie-bgremove-model" class="ie-opt-select">
+                    <option value="imgly">Lightweight (@imgly)</option>
+                    <option value="birefnet" ${birefnetDisabled}>${birefnetLabel}</option>
+                </select>
+            </div>
+            <div class="ie-opt-group">
+                <label style="font-size:11px;cursor:pointer;">
+                    <input type="checkbox" id="ie-bgremove-new-layer" checked> New Layer
+                </label>
+            </div>
+            <div class="ie-opt-group">
+                <button class="wfm-btn wfm-btn-sm" id="ie-bgremove-btn">Remove BG</button>
+            </div>
+            <span id="ie-bgremove-status" style="font-size:11px;color:var(--wfm-text-secondary);margin-left:4px;"></span>
+        `;
+        document.getElementById("ie-bgremove-btn")?.addEventListener("click", () => this.apply());
+    }
+
+    async apply() {
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr) { showToast("No image loaded", "error"); return; }
+        const layer = layerMgr.activeLayer;
+        if (!layer)  { showToast("No active layer", "error"); return; }
+
+        const model    = document.getElementById("ie-bgremove-model")?.value ?? "imgly";
+        const asNew    = document.getElementById("ie-bgremove-new-layer")?.checked ?? true;
+        const statusEl = document.getElementById("ie-bgremove-status");
+        const btn      = document.getElementById("ie-bgremove-btn");
+        const setStatus = msg => { if (statusEl) statusEl.textContent = msg; };
+
+        if (btn) btn.disabled = true;
+        setStatus("Starting...");
+
+        try {
+            const dataUrl = layer.canvas.toDataURL("image/png");
+
+            let resultDataUrl;
+            if (model === "imgly") {
+                resultDataUrl = await this._removeImgly(dataUrl, setStatus);
+            } else {
+                resultDataUrl = await this._removeBiRefNet(dataUrl, setStatus);
+            }
+
+            const img = await new Promise((resolve, reject) => {
+                const i = new Image();
+                i.onload  = () => resolve(i);
+                i.onerror = () => reject(new Error("Result image load failed"));
+                i.src = resultDataUrl;
+            });
+
+            this._cb.saveUndo();
+
+            if (asNew) {
+                const newL = layerMgr.addLayer("image", layer.name + " (no bg)", {
+                    contentW: img.width,    contentH: img.height,
+                    displayW: layer.displayW, displayH: layer.displayH,
+                    x: layer.x,            y: layer.y,
+                });
+                newL.ctx.drawImage(img, 0, 0);
+                layerMgr.setActive(newL.id);
+                this._cb.onLayerAdded(newL);
+            } else {
+                layer.canvas.width  = img.width;
+                layer.canvas.height = img.height;
+                layer.ctx = layer.canvas.getContext("2d");
+                layer.ctx.drawImage(img, 0, 0);
+            }
+
+            this._cb.updateCompositeView();
+            this._cb.refreshLayerList();
+            setStatus("Done!");
+            setTimeout(() => setStatus(""), 3000);
+            showToast("Background removed", "success");
+
+        } catch (err) {
+            setStatus("Error: " + err.message);
+            showToast("BG remove failed: " + err.message, "error");
+        } finally {
+            if (btn) btn.disabled = false;
+        }
+    }
+
+    async _removeImgly(dataUrl, onStatus) {
+        if (!window._wfmImglyRemoveBg) {
+            onStatus("Loading model...");
+            const mod = await import("https://esm.sh/@imgly/background-removal@1.5.7?bundle&target=es2022");
+            window._wfmImglyRemoveBg = mod.removeBackground;
+        }
+        onStatus("Processing...");
+        const res  = await fetch(dataUrl);
+        const blob = await res.blob();
+        const resultBlob = await window._wfmImglyRemoveBg(blob, {
+            publicPath: "https://staticimgly.com/@imgly/background-removal-data/1.5.7/dist/",
+        });
+        return await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload  = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(resultBlob);
+        });
+    }
+
+    async _removeBiRefNet(dataUrl, onStatus) {
+        const NODE_ID = "wfs_bgremove";
+
+        // 1. アクティブレイヤー画像を Mask Editor One のキャッシュに登録
+        onStatus("Sending image...");
+        const storeResp = await fetch("/mask_editor/store_image", {
+            method:  "POST",
+            headers: { "Content-Type": "application/json" },
+            body:    JSON.stringify({ node_id: NODE_ID, image_b64: dataUrl }),
+        });
+        if (!storeResp.ok) throw new Error("Failed to cache image for BiRefNet");
+
+        // 2. BiRefNet 推論実行
+        onStatus("Running BiRefNet...");
+        const resp = await fetch("/mask_editor/birefnet/remove_bg", {
+            method:  "POST",
+            headers: { "Content-Type": "application/json" },
+            body:    JSON.stringify({ node_id: NODE_ID }),
+        });
+        const json = await resp.json();
+        if (json.error) throw new Error(json.error);
+
+        // 3. グレースケールマスク (白=前景) → RGBA PNG に変換して返す
+        onStatus("Compositing...");
+        return await this._applyMaskToImage(dataUrl, json.mask_b64);
+    }
+
+    async _applyMaskToImage(imageB64, maskB64) {
+        const loadImage = src => new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload  = () => resolve(img);
+            img.onerror = () => reject(new Error("Image load failed: " + src.slice(0, 40)));
+            img.src = src;
+        });
+        const [origImg, maskImg] = await Promise.all([loadImage(imageB64), loadImage(maskB64)]);
+
+        const w = origImg.naturalWidth;
+        const h = origImg.naturalHeight;
+
+        // マスク: グレースケール輝度値 → アルファチャンネル (RGBA 白マスク)
+        const maskCanvas = document.createElement("canvas");
+        maskCanvas.width  = w;
+        maskCanvas.height = h;
+        const mc = maskCanvas.getContext("2d");
+        mc.drawImage(maskImg, 0, 0, w, h);
+        const maskData = mc.getImageData(0, 0, w, h);
+        const md = maskData.data;
+        for (let i = 0; i < md.length; i += 4) {
+            md[i + 3] = md[i]; // 輝度 → アルファ
+            md[i] = md[i + 1] = md[i + 2] = 255;
+        }
+        mc.putImageData(maskData, 0, 0);
+
+        // 元画像にマスクを destination-in で適用
+        const out = document.createElement("canvas");
+        out.width  = w;
+        out.height = h;
+        const ctx = out.getContext("2d");
+        ctx.drawImage(origImg, 0, 0, w, h);
+        ctx.globalCompositeOperation = "destination-in";
+        ctx.drawImage(maskCanvas, 0, 0, w, h);
+
+        return out.toDataURL("image/png");
+    }
+}
@@ -0,0 +1,259 @@
+/**
+ * Image Edit Tab - Blur / Mosaic Tool
+ * Whole-layer blur/mosaic buttons plus a drag-to-select rectangle mode
+ * that applies blur or mosaic to just the dragged region.
+ */
+
+import { showToast } from "../app.js";
+
+function _applyMosaicToRegion(ctx, x, y, w, h, size) {
+    if (w <= 0 || h <= 0 || size < 1) return;
+    const imgData = ctx.getImageData(x, y, w, h);
+    const d = imgData.data;
+    for (let py = 0; py < h; py += size) {
+        for (let px = 0; px < w; px += size) {
+            const i = (py * w + px) * 4;
+            const r = d[i], g = d[i + 1], b = d[i + 2], a = d[i + 3];
+            for (let by = py; by < Math.min(py + size, h); by++) {
+                for (let bx = px; bx < Math.min(px + size, w); bx++) {
+                    const j = (by * w + bx) * 4;
+                    d[j] = r; d[j + 1] = g; d[j + 2] = b; d[j + 3] = a;
+                }
+            }
+        }
+    }
+    ctx.putImageData(imgData, x, y);
+}
+
+export class BlurTool {
+    /**
+     * @param {object} callbacks
+     * @param {() => object|null} callbacks.getLayerManager
+     * @param {() => number} callbacks.getZoom
+     * @param {() => void} callbacks.saveUndo
+     * @param {() => void} callbacks.updateCompositeView
+     * @param {() => void} callbacks.refreshLayerList
+     * @param {(toolId: string) => void} callbacks.renderToolOptions
+     */
+    constructor(callbacks) {
+        this._cb = callbacks;
+        this.rectMode  = null;   // null | 'blur' | 'mosaic'
+        this._dragging  = false;
+        this._dragStart = null;
+        this._dragCur   = null;
+    }
+
+    activate() {
+        const overlay = document.getElementById("ie-canvas-overlay");
+        if (overlay) overlay.style.cursor = this.rectMode ? "crosshair" : "default";
+    }
+
+    deactivate() {
+        this.rectMode  = null;
+        this._dragging = false;
+        const overlay = document.getElementById("ie-canvas-overlay");
+        if (overlay) {
+            overlay.style.cursor = "";
+            overlay.getContext("2d").clearRect(0, 0, overlay.width, overlay.height);
+        }
+    }
+
+    renderPanel(el) {
+        const blurOn   = this.rectMode === "blur";
+        const mosaicOn = this.rectMode === "mosaic";
+        el.innerHTML = `
+            <div class="ie-opt-group">
+                <span style="font-size:11px;color:var(--wfm-text-secondary);">Whole:</span>
+            </div>
+            <div class="ie-opt-group">
+                <label style="font-size:11px;">Blur</label>
+                <input type="range" id="ie-whole-blur" min="1" max="50" value="10" style="width:70px;">
+                <span id="ie-whole-blur-val" style="font-size:11px;min-width:22px;">10</span>px
+                <button class="wfm-btn wfm-btn-sm" id="ie-whole-blur-apply">Apply</button>
+            </div>
+            <div class="ie-opt-group">
+                <label style="font-size:11px;">Mosaic</label>
+                <input type="range" id="ie-whole-mosaic" min="5" max="100" value="20" style="width:70px;">
+                <span id="ie-whole-mosaic-val" style="font-size:11px;min-width:22px;">20</span>px
+                <button class="wfm-btn wfm-btn-sm" id="ie-whole-mosaic-apply">Apply</button>
+            </div>
+            <div style="width:1px;height:22px;background:var(--wfm-border);margin:0 6px;flex-shrink:0;"></div>
+            <div class="ie-opt-group">
+                <span style="font-size:11px;color:var(--wfm-text-secondary);">Rect:</span>
+            </div>
+            <div class="ie-opt-group">
+                <button class="wfm-btn wfm-btn-sm${blurOn ? " ie-opt-active" : ""}" id="ie-rect-blur-toggle"
+                    style="${blurOn ? "background:var(--wfm-accent,#4682e6);color:#fff;" : ""}">
+                    Rect Blur: ${blurOn ? "ON" : "OFF"}
+                </button>
+                <input type="range" id="ie-rect-blur" min="1" max="50" value="10" style="width:70px;">
+                <span id="ie-rect-blur-val" style="font-size:11px;min-width:22px;">10</span>px
+            </div>
+            <div class="ie-opt-group">
+                <button class="wfm-btn wfm-btn-sm${mosaicOn ? " ie-opt-active" : ""}" id="ie-rect-mosaic-toggle"
+                    style="${mosaicOn ? "background:var(--wfm-accent,#4682e6);color:#fff;" : ""}">
+                    Rect Mosaic: ${mosaicOn ? "ON" : "OFF"}
+                </button>
+                <input type="range" id="ie-rect-mosaic" min="5" max="50" value="15" style="width:70px;">
+                <span id="ie-rect-mosaic-val" style="font-size:11px;min-width:22px;">15</span>px
+            </div>
+        `;
+        document.getElementById("ie-whole-blur")?.addEventListener("input", e => {
+            document.getElementById("ie-whole-blur-val").textContent = e.target.value;
+        });
+        document.getElementById("ie-whole-mosaic")?.addEventListener("input", e => {
+            document.getElementById("ie-whole-mosaic-val").textContent = e.target.value;
+        });
+        document.getElementById("ie-whole-blur-apply")?.addEventListener("click", () => {
+            this.applyWholeBlur(parseInt(document.getElementById("ie-whole-blur").value));
+        });
+        document.getElementById("ie-whole-mosaic-apply")?.addEventListener("click", () => {
+            this.applyWholeMosaic(parseInt(document.getElementById("ie-whole-mosaic").value));
+        });
+        document.getElementById("ie-rect-blur-toggle")?.addEventListener("click", () => {
+            this.rectMode = this.rectMode === "blur" ? null : "blur";
+            this._cb.renderToolOptions("blur");
+            const ov = document.getElementById("ie-canvas-overlay");
+            if (ov) ov.style.cursor = this.rectMode ? "crosshair" : "default";
+        });
+        document.getElementById("ie-rect-mosaic-toggle")?.addEventListener("click", () => {
+            this.rectMode = this.rectMode === "mosaic" ? null : "mosaic";
+            this._cb.renderToolOptions("blur");
+            const ov = document.getElementById("ie-canvas-overlay");
+            if (ov) ov.style.cursor = this.rectMode ? "crosshair" : "default";
+        });
+        document.getElementById("ie-rect-blur")?.addEventListener("input", e => {
+            document.getElementById("ie-rect-blur-val").textContent = e.target.value;
+        });
+        document.getElementById("ie-rect-mosaic")?.addEventListener("input", e => {
+            document.getElementById("ie-rect-mosaic-val").textContent = e.target.value;
+        });
+    }
+
+    onMouseDown(pos) {
+        if (!this.rectMode) return;
+        this._dragging  = true;
+        this._dragStart = { x: pos.x, y: pos.y };
+        this._dragCur   = { x: pos.x, y: pos.y };
+    }
+
+    onMouseMove(pos) {
+        if (!this._dragging) return;
+        this._dragCur = pos;
+        this._drawPreview();
+    }
+
+    onMouseUp() {
+        if (!this._dragging) return;
+        this._dragging = false;
+        this._applyRectEffect();
+        const overlay = document.getElementById("ie-canvas-overlay");
+        if (overlay) overlay.getContext("2d").clearRect(0, 0, overlay.width, overlay.height);
+    }
+
+    onMouseLeave() {
+        if (!this._dragging) return;
+        this._dragging = false;
+        const overlay = document.getElementById("ie-canvas-overlay");
+        if (overlay) overlay.getContext("2d").clearRect(0, 0, overlay.width, overlay.height);
+    }
+
+    applyWholeBlur(amount) {
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr) return;
+        const layer = layerMgr.activeLayer;
+        if (!layer) { showToast("No active layer", "error"); return; }
+        this._cb.saveUndo();
+        const w = layer.canvas.width, h = layer.canvas.height;
+        const tmp = document.createElement("canvas");
+        tmp.width = w; tmp.height = h;
+        const tc = tmp.getContext("2d");
+        tc.filter = `blur(${amount}px)`;
+        tc.drawImage(layer.canvas, 0, 0);
+        layer.ctx.clearRect(0, 0, w, h);
+        layer.ctx.drawImage(tmp, 0, 0);
+        this._cb.updateCompositeView();
+        this._cb.refreshLayerList();
+    }
+
+    applyWholeMosaic(size) {
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr) return;
+        const layer = layerMgr.activeLayer;
+        if (!layer) { showToast("No active layer", "error"); return; }
+        this._cb.saveUndo();
+        _applyMosaicToRegion(layer.ctx, 0, 0, layer.canvas.width, layer.canvas.height, size);
+        this._cb.updateCompositeView();
+        this._cb.refreshLayerList();
+    }
+
+    // canvas座標 (cx,cy) → layer.canvas 座標への逆変換
+    _canvasToLayerCoords(layer, cx, cy) {
+        const centerX = layer.x + layer.displayW / 2;
+        const centerY = layer.y + layer.displayH / 2;
+        const dx = cx - centerX, dy = cy - centerY;
+        const angle = -(layer.rotation || 0) * Math.PI / 180;
+        const rdx = dx * Math.cos(angle) - dy * Math.sin(angle);
+        const rdy = dx * Math.sin(angle) + dy * Math.cos(angle);
+        const scaleX = layer.displayW / layer.canvas.width;
+        const scaleY = layer.displayH / layer.canvas.height;
+        let lx = rdx / scaleX + layer.canvas.width  / 2;
+        let ly = rdy / scaleY + layer.canvas.height / 2;
+        if (layer.flipX) lx = layer.canvas.width  - lx;
+        if (layer.flipY) ly = layer.canvas.height - ly;
+        return { x: lx, y: ly };
+    }
+
+    _drawPreview() {
+        const overlay = document.getElementById("ie-canvas-overlay");
+        if (!overlay) return;
+        const ctx = overlay.getContext("2d");
+        ctx.clearRect(0, 0, overlay.width, overlay.height);
+        const s = this._dragStart, c = this._dragCur;
+        if (!s || !c) return;
+        const x = Math.min(s.x, c.x), y = Math.min(s.y, c.y);
+        const w = Math.abs(c.x - s.x), h = Math.abs(c.y - s.y);
+        const zoom = this._cb.getZoom();
+        ctx.strokeStyle = this.rectMode === "blur" ? "#4af" : "#fa4";
+        ctx.lineWidth   = 1 / zoom;
+        ctx.setLineDash([4 / zoom, 2 / zoom]);
+        ctx.strokeRect(x, y, w, h);
+        ctx.setLineDash([]);
+    }
+
+    _applyRectEffect() {
+        const layer = this._cb.getLayerManager()?.activeLayer;
+        if (!layer || !this._dragStart || !this._dragCur) return;
+        const s = this._dragStart, c = this._dragCur;
+        if (Math.abs(c.x - s.x) < 3 || Math.abs(c.y - s.y) < 3) return;
+
+        const minX = Math.min(s.x, c.x), minY = Math.min(s.y, c.y);
+        const maxX = Math.max(s.x, c.x), maxY = Math.max(s.y, c.y);
+        const p1 = this._canvasToLayerCoords(layer, minX, minY);
+        const p2 = this._canvasToLayerCoords(layer, maxX, maxY);
+
+        const lx = Math.round(Math.max(0, Math.min(p1.x, p2.x)));
+        const ly = Math.round(Math.max(0, Math.min(p1.y, p2.y)));
+        const lw = Math.round(Math.min(layer.canvas.width  - lx, Math.abs(p2.x - p1.x)));
+        const lh = Math.round(Math.min(layer.canvas.height - ly, Math.abs(p2.y - p1.y)));
+        if (lw <= 0 || lh <= 0) return;
+
+        this._cb.saveUndo();
+
+        if (this.rectMode === "blur") {
+            const amount = parseInt(document.getElementById("ie-rect-blur")?.value ?? "10");
+            const tmp = document.createElement("canvas");
+            tmp.width = layer.canvas.width; tmp.height = layer.canvas.height;
+            const tc = tmp.getContext("2d");
+            tc.filter = `blur(${amount}px)`;
+            tc.drawImage(layer.canvas, 0, 0);
+            layer.ctx.drawImage(tmp, lx, ly, lw, lh, lx, ly, lw, lh);
+        } else {
+            const size = parseInt(document.getElementById("ie-rect-mosaic")?.value ?? "15");
+            _applyMosaicToRegion(layer.ctx, lx, ly, lw, lh, size);
+        }
+
+        this._cb.updateCompositeView();
+        this._cb.refreshLayerList();
+    }
+}
@@ -20,6 +20,11 @@ export class DrawTool {
        this.sizeJitterAmount = 0.5;
        this.rotationJitter   = false;

+        // Pen pressure (0–1, from PointerEvent.pressure; mouse reports 0.5).
+        // pressure=0.5 maps to a 1.0x multiplier so mouse behavior is unchanged.
+        this.pressureEnabled = true;
+        this._lastPressure   = 0.5;
+
        // Image brush from ABR library (null = default circle brush)
        this.brushImage  = null;
        this.brushName   = "Circle";
@@ -80,29 +85,31 @@ export class DrawTool {
        if (this.canvas) this.canvas.style.cursor = "";
    }

-    onMouseDown(x, y) {
-        this._drawing = true;
-        this._lastX   = x;
-        this._lastY   = y;
+    onMouseDown(x, y, pressure = 0.5) {
+        this._drawing      = true;
+        this._lastX         = x;
+        this._lastY         = y;
+        this._lastPressure  = pressure;
        if (this.brushImage) {
            this._initStrokeBuffer();
-            this._paintToStroke(x, y);
+            this._paintToStroke(x, y, pressure);
            this._mergeStroke();
        } else {
-            this._paint(x, y);
+            this._paint(x, y, pressure);
        }
    }

-    onMouseMove(x, y) {
+    onMouseMove(x, y, pressure = 0.5) {
        if (!this._drawing) return;
        if (this.brushImage) {
-            this._paintLineToStroke(this._lastX, this._lastY, x, y);
+            this._paintLineToStroke(this._lastX, this._lastY, x, y, this._lastPressure, pressure);
            this._mergeStroke();
        } else {
-            this._paintLine(this._lastX, this._lastY, x, y);
+            this._paintLine(this._lastX, this._lastY, x, y, this._lastPressure, pressure);
        }
-        this._lastX = x;
-        this._lastY = y;
+        this._lastX        = x;
+        this._lastY        = y;
+        this._lastPressure = pressure;
    }

    onMouseUp() {
@@ -117,6 +124,20 @@ export class DrawTool {
        if (this._drawing) this.onMouseUp();
    }

+    // ── Pressure response ──────────────────────────────────────────────
+
+    _effectiveSize(pressure) {
+        if (!this.pressureEnabled) return this.brushSize;
+        const p = Math.max(0, Math.min(1, pressure ?? 0.5));
+        return Math.max(1, this.brushSize * (0.3 + p * 1.4)); // p=0.5 -> 1.0x
+    }
+
+    _effectiveOpacity(pressure) {
+        if (!this.pressureEnabled) return this.opacity;
+        const p = Math.max(0, Math.min(1, pressure ?? 0.5));
+        return Math.max(0, Math.min(1, this.opacity * (0.4 + p * 1.2))); // p=0.5 -> 1.0x
+    }
+
    // ── Stroke buffer (image brush only) ─────────────────────────────

    _initStrokeBuffer() {
@@ -155,54 +176,48 @@ export class DrawTool {
        ctx.restore();
    }

-    _paintToStroke(x, y) {
+    _paintToStroke(x, y, pressure = 0.5) {
        const saved = this.ctx;
        this.ctx = this._strokeCtx;

-        if (this.sizeJitter || this.rotationJitter) {
-            const savedSize      = this.brushSize;
-            const savedAngle     = this.angle;
-            const savedStamp     = this._imgStamp;
-            const savedStampSize = this._imgStampSize;
-            if (this.sizeJitter) {
-                this.brushSize = Math.max(1, savedSize * (1 - Math.random() * this.sizeJitterAmount));
-            }
-            if (this.rotationJitter) {
-                this.angle = Math.random() * 360;
-            }
-            this._paintImageBrush(x, y);
-            this.brushSize     = savedSize;
-            this.angle         = savedAngle;
-            this._imgStamp     = savedStamp;
-            this._imgStampSize = savedStampSize;
+        let size = this._effectiveSize(pressure);
+        if (this.sizeJitter) {
+            size = Math.max(1, size * (1 - Math.random() * this.sizeJitterAmount));
+        }
+
+        if (this.rotationJitter) {
+            const savedAngle = this.angle;
+            this.angle = Math.random() * 360;
+            this._paintImageBrush(x, y, size);
+            this.angle = savedAngle;
        } else {
-            this._paintImageBrush(x, y);
+            this._paintImageBrush(x, y, size);
        }

        this.ctx = saved;
    }

-    _paintLineToStroke(x0, y0, x1, y1) {
+    _paintLineToStroke(x0, y0, x1, y1, p0 = 0.5, p1 = 0.5) {
        const dist  = Math.hypot(x1 - x0, y1 - y0);
        const step  = Math.max(1, this.brushSize * this.spacing);
        const steps = Math.ceil(dist / step);
        for (let i = 1; i <= steps; i++) {
            const t = i / steps;
-            this._paintToStroke(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t);
+            this._paintToStroke(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t, p0 + (p1 - p0) * t);
        }
    }

    // ── Circle brush ─────────────────────────────────────────────────

-    _getStamp() {
+    _getStamp(size) {
+        size = Math.max(1, Math.round(size));
        if (
            this._stamp &&
-            this._stampSize  === this.brushSize &&
+            this._stampSize  === size &&
            this._stampHard  === this.hardness &&
            this._stampColor === this.color
        ) return this._stamp;

-        const size = Math.max(1, Math.round(this.brushSize));
        const sc   = document.createElement("canvas");
        sc.width   = size;
        sc.height  = size;
@@ -225,11 +240,12 @@ export class DrawTool {
        return sc;
    }

-    _paint(x, y) {
-        const stamp = this._getStamp();
+    _paint(x, y, pressure = 0.5) {
+        const size  = this._effectiveSize(pressure);
+        const stamp = this._getStamp(size);
        const s     = stamp.width;
        this.ctx.save();
-        this.ctx.globalAlpha = this.opacity;
+        this.ctx.globalAlpha = this._effectiveOpacity(pressure);
        if (this.mode === "erase") {
            this.ctx.globalCompositeOperation = "destination-out";
        }
@@ -237,13 +253,13 @@ export class DrawTool {
        this.ctx.restore();
    }

-    _paintLine(x0, y0, x1, y1) {
+    _paintLine(x0, y0, x1, y1, p0 = 0.5, p1 = 0.5) {
        const dist    = Math.hypot(x1 - x0, y1 - y0);
        const spacing = Math.max(1, this.brushSize * 0.2);
        const steps   = Math.max(1, Math.ceil(dist / spacing));
        for (let i = 1; i <= steps; i++) {
            const t = i / steps;
-            this._paint(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t);
+            this._paint(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t, p0 + (p1 - p0) * t);
        }
    }

@@ -319,8 +335,8 @@ export class DrawTool {
        return sc;
    }

-    _paintImageBrush(x, y) {
-        const stamp = this._getImageStamp(Math.round(this.brushSize));
+    _paintImageBrush(x, y, size = this.brushSize) {
+        const stamp = this._getImageStamp(Math.round(size));
        this.ctx.globalCompositeOperation = "source-over";
        if (this.angle) {
            this.ctx.save();
@@ -0,0 +1,222 @@
+/**
+ * Image Edit Tab - File Export
+ * Composites the visible layers (respecting mask-apply clipping) into a
+ * flat canvas and offers three destinations: local PNG download, WFS
+ * Gallery, and the selected node's image widget on the ComfyUI canvas
+ * (Send to LI node).
+ */
+
+import { showToast } from "../app.js";
+import { Layer }     from "./LayerManager.js";
+
+export class FileExport {
+    /**
+     * @param {object} callbacks
+     * @param {() => object|null} callbacks.getLayerManager
+     * @param {() => {w: number, h: number}} callbacks.getCanvasSize
+     * @param {() => string} callbacks.getBaseName
+     * @param {(ctx: CanvasRenderingContext2D, drawCanvas: HTMLCanvasElement, maskLayer: object, targetLayer: object, showOverlay: boolean) => void} callbacks.renderMaskedLayer
+     */
+    constructor(callbacks) {
+        this._cb = callbacks;
+    }
+
+    _buildCompositeCanvas() {
+        const { w, h } = this._cb.getCanvasSize();
+        const canvas = document.createElement("canvas");
+        canvas.width  = w;
+        canvas.height = h;
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr) return canvas;
+        this._compositeForExport(canvas, layerMgr);
+        return canvas;
+    }
+
+    // 保存用合成: maskApply=true のクリッピングを適用、マスクオーバーレイは除外
+    _compositeForExport(target, layerMgr) {
+        const ctx = target.getContext("2d");
+        ctx.clearRect(0, 0, target.width, target.height);
+        const layers = layerMgr.layers;
+        const maskedIndices = new Set();
+        for (let i = 0; i < layers.length; i++) {
+            if (layers[i].type === "mask" && layers[i].maskApply && layers[i].visible && i + 1 < layers.length) {
+                maskedIndices.add(i + 1);
+            }
+        }
+        for (let i = layers.length - 1; i >= 0; i--) {
+            const layer = layers[i];
+            if (!layer.visible) continue;
+            if (maskedIndices.has(i)) continue;
+            if (layer.type === "mask") {
+                if (layer.maskApply && i + 1 < layers.length) {
+                    this._cb.renderMaskedLayer(ctx, target, layer, layers[i + 1], false);
+                }
+                // maskApply=false のマスクはエクスポートに含めない
+            } else {
+                ctx.save();
+                ctx.globalAlpha = layer.opacity;
+                ctx.globalCompositeOperation = layer.blendMode;
+                Layer.applyTransform(ctx, layer);
+                ctx.drawImage(layer.canvas, -layer.canvas.width / 2, -layer.canvas.height / 2);
+                ctx.restore();
+            }
+        }
+    }
+
+    // 保存用レイヤー配列を構築: 各レイヤーを個別のcanvas(ドキュメント全体サイズ)に
+    // 回転・反転・拡縮のみベイクして描画する。opacity/blendModeはピクセルに焼き込まず
+    // PSDレイヤー属性として渡すためメタデータのまま残す。
+    // maskApply=true のクリッピングマスクは対象レイヤーと合成して1枚にベイクする
+    // (PSDの本物のレイヤーマスクとしては書き出さない簡略化)。
+    _buildLayerExportList(layerMgr, w, h) {
+        const layers = layerMgr.layers;
+        const maskedIndices = new Set();
+        for (let i = 0; i < layers.length; i++) {
+            if (layers[i].type === "mask" && layers[i].maskApply && layers[i].visible && i + 1 < layers.length) {
+                maskedIndices.add(i + 1);
+            }
+        }
+
+        const exportLayers = [];
+        // 背面→前面の順(PSD側で後から追加したレイヤーほど上に重なるため、この順で送る)
+        for (let i = layers.length - 1; i >= 0; i--) {
+            const layer = layers[i];
+            if (maskedIndices.has(i)) continue; // マスク側の処理でまとめて扱う
+
+            if (layer.type === "mask") {
+                if (!(layer.maskApply && layer.visible && i + 1 < layers.length)) continue;
+                const target = layers[i + 1];
+                const canvas = document.createElement("canvas");
+                canvas.width = w;
+                canvas.height = h;
+                this._cb.renderMaskedLayer(canvas.getContext("2d"), canvas, layer, target, false);
+                exportLayers.push({
+                    name: target.name || "Layer",
+                    visible: target.visible,
+                    opacity: 1,
+                    blendMode: "source-over",
+                    imageData: canvas.toDataURL("image/png"),
+                });
+                continue;
+            }
+
+            const canvas = document.createElement("canvas");
+            canvas.width = w;
+            canvas.height = h;
+            const ctx = canvas.getContext("2d");
+            ctx.save();
+            Layer.applyTransform(ctx, layer);
+            ctx.drawImage(layer.canvas, -layer.canvas.width / 2, -layer.canvas.height / 2);
+            ctx.restore();
+            exportLayers.push({
+                name: layer.name || "Layer",
+                visible: layer.visible,
+                opacity: layer.opacity,
+                blendMode: layer.blendMode,
+                imageData: canvas.toDataURL("image/png"),
+            });
+        }
+        return exportLayers;
+    }
+
+    async saveAsPsd() {
+        if (!this._cb.getLayerManager()) { showToast("No image loaded", "error"); return; }
+        const layerMgr = this._cb.getLayerManager();
+        const { w, h } = this._cb.getCanvasSize();
+        const exportLayers = this._buildLayerExportList(layerMgr, w, h);
+        if (exportLayers.length === 0) { showToast("No layers to export", "error"); return; }
+
+        try {
+            const r = await fetch("/wfm/gallery/image/export-psd-layers", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ width: w, height: h, layers: exportLayers }),
+            });
+            if (!r.ok) {
+                const e = await r.json().catch(() => ({}));
+                throw new Error(e.error || r.statusText);
+            }
+            const blob = await r.blob();
+            const url  = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href     = url;
+            a.download = (this._cb.getBaseName() || "wfs-edit") + ".psd";
+            a.click();
+            URL.revokeObjectURL(url);
+            showToast("PSD saved", "success");
+        } catch (err) {
+            showToast(`PSD save failed: ${err.message}`, "error");
+        }
+    }
+
+    savePng() {
+        if (!this._cb.getLayerManager()) { showToast("No image loaded", "error"); return; }
+        const canvas = this._buildCompositeCanvas();
+        const a = document.createElement("a");
+        a.href     = canvas.toDataURL("image/png");
+        a.download = (this._cb.getBaseName() || "wfs-edit") + "-output.png";
+        a.click();
+        showToast("PNG saved", "success");
+    }
+
+    async saveToGallery() {
+        if (!this._cb.getLayerManager()) { showToast("No image loaded", "error"); return; }
+
+        // デフォルトファイル名: wfs-image-YYYYMMDDHHmmss
+        const now = new Date();
+        const pad = n => String(n).padStart(2, "0");
+        const ts  = `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+        const defaultName = `wfs-image-${ts}`;
+
+        const filename = window.prompt("Save to Gallery — file name (without extension):", defaultName);
+        if (filename === null) return; // キャンセル
+        const safeName = filename.trim() || defaultName;
+
+        const canvas   = this._buildCompositeCanvas();
+        const imageData = canvas.toDataURL("image/png");
+
+        try {
+            const r = await fetch("/wfm/gallery/image/save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ filename: safeName, imageData }),
+            });
+            if (!r.ok) {
+                const e = await r.json().catch(() => ({}));
+                throw new Error(e.error || r.statusText);
+            }
+            showToast(`Saved to Gallery: ${safeName}.png`, "success");
+        } catch (err) {
+            showToast(`Gallery save failed: ${err.message}`, "error");
+        }
+    }
+
+    // Uploads the composite via /upload/image, then (via window.opener,
+    // since WFS runs in its own window — same cross-window pattern as
+    // wfmReceiveWorkflow/wfmOpenMaskEditorForNode) writes the resulting
+    // filename into the "image" widget of the currently selected ComfyUI
+    // node (falling back to the first node in the graph with one), mirroring
+    // the chat_TE custom node's "Send to workflow" button.
+    async sendToWorkflow() {
+        if (!this._cb.getLayerManager()) { showToast("No image loaded", "error"); return; }
+        if (!window.opener || typeof window.opener.wfmSendImageToSelectedNode !== "function") {
+            showToast("Open Workflow Studio from ComfyUI's top menu to use this feature", "error");
+            return;
+        }
+        const canvas = this._buildCompositeCanvas();
+        const blob   = await new Promise(resolve => canvas.toBlob(resolve, "image/png"));
+        const file   = new File([blob], (this._cb.getBaseName() || "wfs-edit") + "-output.png", { type: "image/png" });
+        const form   = new FormData();
+        form.append("image", file);
+        form.append("overwrite", "true");
+        try {
+            const r    = await fetch("/upload/image", { method: "POST", body: form });
+            const data = await r.json();
+            const filename = data.subfolder ? `${data.subfolder}/${data.name}` : data.name;
+            window.opener.wfmSendImageToSelectedNode(filename);
+            showToast(`Sent "${filename}" to LI node`, "success");
+        } catch (err) {
+            showToast(`Send to LI node failed: ${err.message}`, "error");
+        }
+    }
+}
@@ -0,0 +1,228 @@
+/**
+ * Image Edit Tab - Fill Tool (bucket fill)
+ * Flood-fills a contiguous same-color region on the active layer canvas,
+ * either with a solid color or a linear/radial gradient.
+ * Gradient ramp math (evalGradient / hex<->rgb) is ported from
+ * comfyUI-particle-pixijs's particle_engine.js.
+ */
+
+function _hexToRgb01(hex) {
+    const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex || "#000000");
+    if (!m) return { r: 0, g: 0, b: 0 };
+    return { r: parseInt(m[1], 16) / 255, g: parseInt(m[2], 16) / 255, b: parseInt(m[3], 16) / 255 };
+}
+
+function _rgb01ToHex({ r, g, b }) {
+    const h = v => Math.round(Math.max(0, Math.min(1, v)) * 255).toString(16).padStart(2, "0");
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
+
+function _lerp(a, b, t) { return a + (b - a) * t; }
+
+export class FillTool {
+    constructor() {
+        // fill settings
+        this.tolerance    = 32;        // 0-255
+        this.fillMode     = "solid";   // "solid" | "gradient"
+        this.color        = "#ff0000"; // solid fill color
+        this.opacity      = 1.0;
+
+        // gradient settings
+        this.gradientShape    = "linear"; // "linear" | "radial"
+        this.gradientAngleDeg = 0;        // linear direction
+        this.gradientStrength = 1.0;      // 0.2-3.0, length/radius multiplier
+        this.gradientStops    = [
+            { pos: 0.0, color: "#ffffff" },
+            { pos: 1.0, color: "#888888" },
+        ];
+        this.selectedStopIdx  = 0;
+
+        // internal state
+        this._active = false;
+        this._canvas = null;
+        this._ctx    = null;
+
+        this._onChange = null;
+    }
+
+    setCanvas(canvas) {
+        this._canvas = canvas;
+        this._ctx    = canvas ? canvas.getContext("2d") : null;
+    }
+
+    onChange(cb) { this._onChange = cb; }
+
+    activate()   { this._active = true; }
+    deactivate() { this._active = false; }
+
+    // ── color ramp evaluation (ported from particle_engine.js evalGradient) ──
+
+    static evalGradient(stops, t) {
+        if (!stops || stops.length === 0) return { r: 0, g: 0, b: 0 };
+        const sorted = [...stops].sort((a, b) => a.pos - b.pos);
+        if (t <= sorted[0].pos) return _hexToRgb01(sorted[0].color);
+        const last = sorted[sorted.length - 1];
+        if (t >= last.pos) return _hexToRgb01(last.color);
+        for (let i = 0; i < sorted.length - 1; i++) {
+            const a = sorted[i], b = sorted[i + 1];
+            if (t >= a.pos && t <= b.pos) {
+                const span = b.pos - a.pos;
+                const localT = span > 0 ? (t - a.pos) / span : 0;
+                const ca = _hexToRgb01(a.color), cb = _hexToRgb01(b.color);
+                return {
+                    r: _lerp(ca.r, cb.r, localT),
+                    g: _lerp(ca.g, cb.g, localT),
+                    b: _lerp(ca.b, cb.b, localT),
+                };
+            }
+        }
+        return _hexToRgb01(last.color);
+    }
+
+    /** Preview swatch color (hex) of the ramp at position t. */
+    evalGradientHex(t) {
+        return _rgb01ToHex(FillTool.evalGradient(this.gradientStops, t));
+    }
+
+    // ── stop editing helpers (ported from particle_widget.js addStop/removeStop/selectStop) ──
+
+    addStop() {
+        const sorted = [...this.gradientStops].sort((a, b) => a.pos - b.pos);
+        let bestGapStart = 0, bestGapSize = 0;
+        for (let i = 0; i < sorted.length - 1; i++) {
+            const gap = sorted[i + 1].pos - sorted[i].pos;
+            if (gap > bestGapSize) { bestGapSize = gap; bestGapStart = sorted[i].pos; }
+        }
+        const pos = sorted.length < 2 ? 0.5 : bestGapStart + bestGapSize / 2;
+        const color = _rgb01ToHex(FillTool.evalGradient(this.gradientStops, pos));
+        this.gradientStops.push({ pos, color });
+        this.selectedStopIdx = this.gradientStops.length - 1;
+    }
+
+    removeStop(idx = this.selectedStopIdx) {
+        if (this.gradientStops.length <= 1) return;
+        this.gradientStops.splice(idx, 1);
+        this.selectedStopIdx = Math.max(0, Math.min(this.selectedStopIdx, this.gradientStops.length - 1));
+    }
+
+    selectStop(idx) {
+        this.selectedStopIdx = idx;
+    }
+
+    // ── flood fill ────────────────────────────────────────
+
+    /**
+     * Flood-fills the contiguous region matching the pixel at (x, y).
+     * (x, y) are canvas-pixel coordinates (already converted via DrawTool.getCanvasPos).
+     */
+    onMouseDown(x, y) {
+        if (!this._active || !this._ctx) return;
+        const w = this._canvas.width, h = this._canvas.height;
+        const px = Math.floor(x), py = Math.floor(y);
+        if (px < 0 || py < 0 || px >= w || py >= h) return;
+
+        const imgData = this._ctx.getImageData(0, 0, w, h);
+        const data = imgData.data;
+
+        const mask = this._buildFloodMask(data, w, h, px, py, this.tolerance);
+        if (!mask) return;
+
+        if (this.fillMode === "gradient") {
+            this._fillMaskWithGradient(data, w, h, mask.pixels, mask.bbox);
+        } else {
+            this._fillMaskWithSolid(data, mask.pixels, this.color, this.opacity);
+        }
+
+        this._ctx.putImageData(imgData, 0, 0);
+    }
+
+    /** Scanline stack-based flood fill. Returns { pixels: Uint8Array(w*h), bbox } or null. */
+    _buildFloodMask(data, w, h, startX, startY, tolerance) {
+        const idx0 = (startY * w + startX) * 4;
+        const tr = data[idx0], tg = data[idx0 + 1], tb = data[idx0 + 2], ta = data[idx0 + 3];
+        const tol2 = tolerance * tolerance;
+
+        const matches = (i) => {
+            const dr = data[i] - tr, dg = data[i + 1] - tg, db = data[i + 2] - tb, da = data[i + 3] - ta;
+            return (dr * dr + dg * dg + db * db + da * da) <= tol2 * 4;
+        };
+
+        const pixels = new Uint8Array(w * h);
+        const stack = [[startX, startY]];
+        let minX = startX, maxX = startX, minY = startY, maxY = startY;
+
+        while (stack.length) {
+            let [x, y] = stack.pop();
+            while (x >= 0 && matches((y * w + x) * 4)) x--;
+            x++;
+            let spanUp = false, spanDown = false;
+            while (x < w && matches((y * w + x) * 4) && !pixels[y * w + x]) {
+                pixels[y * w + x] = 1;
+                if (x < minX) minX = x; if (x > maxX) maxX = x;
+                if (y < minY) minY = y; if (y > maxY) maxY = y;
+
+                if (y > 0) {
+                    const above = matches((( y - 1) * w + x) * 4) && !pixels[(y - 1) * w + x];
+                    if (above && !spanUp) { stack.push([x, y - 1]); spanUp = true; }
+                    else if (!above) spanUp = false;
+                }
+                if (y < h - 1) {
+                    const below = matches(((y + 1) * w + x) * 4) && !pixels[(y + 1) * w + x];
+                    if (below && !spanDown) { stack.push([x, y + 1]); spanDown = true; }
+                    else if (!below) spanDown = false;
+                }
+                x++;
+            }
+        }
+        return { pixels, bbox: { minX, minY, maxX, maxY } };
+    }
+
+    _fillMaskWithSolid(data, pixels, colorHex, opacity) {
+        const { r, g, b } = _hexToRgb01(colorHex);
+        const cr = r * 255, cg = g * 255, cb = b * 255;
+        const alpha = Math.max(0, Math.min(1, opacity));
+        for (let i = 0; i < pixels.length; i++) {
+            if (!pixels[i]) continue;
+            const di = i * 4;
+            data[di]     = _lerp(data[di],     cr, alpha);
+            data[di + 1] = _lerp(data[di + 1], cg, alpha);
+            data[di + 2] = _lerp(data[di + 2], cb, alpha);
+            data[di + 3] = Math.max(data[di + 3], alpha * 255);
+        }
+    }
+
+    /** Reusable with any {pixels, bbox} mask (flood fill today; rect/ellipse selections in the future). */
+    _fillMaskWithGradient(data, w, h, pixels, bbox) {
+        const cx = (bbox.minX + bbox.maxX) / 2, cy = (bbox.minY + bbox.maxY) / 2;
+        const diagW = bbox.maxX - bbox.minX, diagH = bbox.maxY - bbox.minY;
+        const diag = Math.max(1, Math.hypot(diagW, diagH));
+        const strength = Math.max(0.2, Math.min(3.0, this.gradientStrength));
+        const alpha = Math.max(0, Math.min(1, this.opacity));
+
+        const angleRad = this.gradientAngleDeg * Math.PI / 180;
+        const dirX = Math.cos(angleRad), dirY = Math.sin(angleRad);
+        const halfLen = (diag / 2) * strength;
+        const radius = (diag / 2) * strength;
+
+        for (let y = bbox.minY; y <= bbox.maxY; y++) {
+            for (let x = bbox.minX; x <= bbox.maxX; x++) {
+                const i = y * w + x;
+                if (!pixels[i]) continue;
+                const dx = x - cx, dy = y - cy;
+                let t;
+                if (this.gradientShape === "radial") {
+                    t = Math.hypot(dx, dy) / radius;
+                } else {
+                    t = (dx * dirX + dy * dirY) / (halfLen * 2) + 0.5;
+                }
+                t = Math.max(0, Math.min(1, t));
+                const c = FillTool.evalGradient(this.gradientStops, t);
+                const di = i * 4;
+                data[di]     = _lerp(data[di],     c.r * 255, alpha);
+                data[di + 1] = _lerp(data[di + 1], c.g * 255, alpha);
+                data[di + 2] = _lerp(data[di + 2], c.b * 255, alpha);
+                data[di + 3] = Math.max(data[di + 3], alpha * 255);
+            }
+        }
+    }
+}
@@ -0,0 +1,197 @@
+/**
+ * Image Edit Tab - G'MIC Integration
+ * Launches the G'MIC GUI on the server for the active layer, polls job
+ * status, and applies the resulting image back onto the layer.
+ */
+
+import { showToast } from "../app.js";
+
+export class GmicIntegration {
+    /**
+     * @param {object} callbacks
+     * @param {() => object|null} callbacks.getLayerManager
+     * @param {() => void} callbacks.syncActiveLayerFromCanvas
+     * @param {() => void} callbacks.saveUndo
+     * @param {() => void} callbacks.updateCompositeView
+     * @param {() => void} callbacks.refreshLayerList
+     * @param {(toolId: string) => void} callbacks.renderToolOptions
+     */
+    constructor(callbacks) {
+        this._cb = callbacks;
+        this.state = {
+            lastResultJobId: null,
+            processing: false,
+            aborted: false
+        };
+    }
+
+    renderPanel(el) {
+        const openBtnDisabled  = this.state.processing ? "disabled" : "";
+        const applyBtnDisabled = (!this.state.lastResultJobId || this.state.processing) ? "disabled" : "";
+        const progressStyle    = this.state.processing ? "display:flex" : "display:none";
+
+        el.innerHTML = `
+            <div class="ie-opt-group">
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="ie-gmic-open-btn" ${openBtnDisabled}>G'MIC GUIで編集</button>
+                <button class="wfm-btn wfm-btn-sm" id="ie-gmic-apply-btn" ${applyBtnDisabled}>結果を反映</button>
+            </div>
+            <div class="ie-opt-group" id="ie-gmic-progress-area" style="${progressStyle}; align-items:center; gap:6px;">
+                <span id="ie-gmic-progress-lbl" style="font-size:11px; color:var(--wfm-text-secondary);">G'MIC GUIを起動中...</span>
+                <button class="wfm-btn wfm-btn-sm" id="ie-gmic-abort-btn" style="background:#ea4335;color:#fff;">中断</button>
+            </div>
+        `;
+        document.getElementById("ie-gmic-open-btn")?.addEventListener("click", () => this.openGui());
+        document.getElementById("ie-gmic-apply-btn")?.addEventListener("click", () => this.applyResult());
+        document.getElementById("ie-gmic-abort-btn")?.addEventListener("click", () => this.abort());
+    }
+
+    async openGui() {
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr) { showToast("No image loaded", "error"); return; }
+        const layer = layerMgr.activeLayer;
+        if (!layer)  { showToast("No active layer", "error"); return; }
+        this._cb.syncActiveLayerFromCanvas();
+
+        if (this.state.processing) return;
+
+        const dataUrl = layer.canvas.toDataURL("image/png");
+
+        this.state.processing = true;
+        const openBtn      = document.getElementById("ie-gmic-open-btn");
+        const progressArea = document.getElementById("ie-gmic-progress-area");
+        const progressLbl  = document.getElementById("ie-gmic-progress-lbl");
+        const applyBtn     = document.getElementById("ie-gmic-apply-btn");
+
+        if (openBtn) openBtn.disabled = true;
+        if (applyBtn) applyBtn.disabled = true;
+        if (progressArea) progressArea.style.display = "flex";
+        if (progressLbl) progressLbl.textContent = "画像をサーバーへ送信中...";
+
+        try {
+            const res = await fetch("/api/wfm/gmic/open", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ image_b64: dataUrl })
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                throw new Error(err.error || `HTTP ${res.status}`);
+            }
+            const data = await res.json();
+            this.state.lastResultJobId = data.job_id;
+            if (progressLbl) progressLbl.textContent = "G'MIC GUIで編集中... フィルターを選択して「OK」を押すと適用可能になります";
+            await this._waitForJob(data.job_id);
+        } catch (e) {
+            if (e.message !== "__aborted__") {
+                showToast("G'MIC Error: " + e.message, "error");
+            }
+            this.state.processing = false;
+            this.state.aborted = false;
+            if (openBtn) openBtn.disabled = false;
+            if (progressArea) progressArea.style.display = "none";
+        }
+    }
+
+    abort() {
+        this.state.aborted = true;
+        this.state.processing = false;
+        const openBtn      = document.getElementById("ie-gmic-open-btn");
+        const progressArea = document.getElementById("ie-gmic-progress-area");
+        if (progressArea) progressArea.style.display = "none";
+        if (openBtn) openBtn.disabled = false;
+    }
+
+    async _waitForJob(jobId) {
+        const progressLbl = document.getElementById("ie-gmic-progress-lbl");
+        const applyBtn    = document.getElementById("ie-gmic-apply-btn");
+        const maxWait = 600, interval = 2000;
+        const start = Date.now();
+        this.state.aborted = false;
+
+        while (true) {
+            if (this.state.aborted) throw new Error("__aborted__");
+            if ((Date.now() - start) / 1000 > maxWait) throw new Error("Timeout");
+            await new Promise(r => setTimeout(r, interval));
+            if (this.state.aborted) throw new Error("__aborted__");
+            try {
+                const res = await fetch(`/api/wfm/gmic/status/${jobId}`);
+                if (res.status === 404) throw new Error("__aborted__");
+                if (!res.ok) continue;
+                const status = await res.json();
+                if (status.status === "completed") {
+                    this.state.lastResultJobId = jobId;
+                    if (applyBtn) applyBtn.disabled = false;
+                    if (progressLbl) progressLbl.textContent = "処理完了 → 「結果を反映」で画像に適用";
+                    this.state.processing = false;
+                    showToast("G'MIC filtering complete. Click Apply to insert result.", "success");
+                    return;
+                }
+                if (status.status === "failed") {
+                    if (progressLbl) progressLbl.textContent = status.error || "G'MIC GUIがキャンセルされました";
+                    throw new Error("__aborted__");
+                }
+                if (progressLbl) progressLbl.textContent = status.message || "G'MIC GUIで編集中...";
+            } catch (e) {
+                if (e.message === "__aborted__" || e.message.includes("Timeout")) throw e;
+            }
+        }
+    }
+
+    async applyResult() {
+        if (!this.state.lastResultJobId) {
+            showToast("No G'MIC result to apply", "error");
+            return;
+        }
+        const applyBtn = document.getElementById("ie-gmic-apply-btn");
+        const openBtn  = document.getElementById("ie-gmic-open-btn");
+        const progressArea = document.getElementById("ie-gmic-progress-area");
+        if (applyBtn) applyBtn.disabled = true;
+
+        try {
+            const statusRes = await fetch(`/api/wfm/gmic/status/${this.state.lastResultJobId}`);
+            if (!statusRes.ok) throw new Error(`HTTP ${statusRes.status}`);
+            const statusData = await statusRes.json();
+            if (!statusData.result_path) throw new Error("No result path found");
+
+            const b64res = await fetch("/api/wfm/gmic/result", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ result_path: statusData.result_path })
+            });
+            if (!b64res.ok) throw new Error(`HTTP ${b64res.status}`);
+            const { image_b64: dataUrl } = await b64res.json();
+
+            const img = await new Promise((resolve, reject) => {
+                const i = new Image();
+                i.onload  = () => resolve(i);
+                i.onerror = () => reject(new Error("Failed to load result image"));
+                i.src = dataUrl;
+            });
+
+            this._cb.saveUndo();
+
+            const layerMgr = this._cb.getLayerManager();
+            const layer = layerMgr?.activeLayer;
+            if (!layer) throw new Error("No active layer");
+
+            layer.canvas.width  = img.width;
+            layer.canvas.height = img.height;
+            layer.ctx = layer.canvas.getContext("2d");
+            layer.ctx.drawImage(img, 0, 0);
+
+            this._cb.updateCompositeView();
+            this._cb.refreshLayerList();
+            showToast("G'MIC filter applied successfully", "success");
+
+            // Reset G'MIC status
+            this.state.lastResultJobId = null;
+            this.state.processing = false;
+            if (openBtn) openBtn.disabled = false;
+            if (progressArea) progressArea.style.display = "none";
+            this._cb.renderToolOptions("filter");
+        } catch (err) {
+            showToast("Failed to apply G'MIC result: " + err.message, "error");
+            if (applyBtn) applyBtn.disabled = false;
+        }
+    }
+}
@@ -0,0 +1,303 @@
+/**
+ * Image Edit Tab - Inpaint / I2I Actions
+ * Composites the active mask layer against the background and runs it
+ * through GenerateUI's currently loaded workflow (or a dedicated one) for
+ * inpainting, plus a mask-less I2I variant. Also exposes the external
+ * entry points used by other same-origin panels (e.g. Comic Creator).
+ */
+
+import { showToast }     from "../app.js";
+import { comfyUI }       from "../comfyui-client.js";
+import { comfyEditor }   from "../comfyui-editor.js";
+import { comfyWorkflow } from "../comfyui-workflow.js";
+
+export class InpaintI2IActions {
+    /**
+     * @param {object} callbacks
+     * @param {() => object|null} callbacks.getLayerManager
+     * @param {() => HTMLCanvasElement} callbacks.buildBgCanvas
+     */
+    constructor(callbacks) {
+        this._cb = callbacks;
+
+        this.positive   = "";
+        this.negative   = "";
+        this.growMaskBy = null;  // null = 未初期化（ワークフローの現在値から初期化）
+        this.denoise    = null;  // null = 未初期化（ワークフローの現在値から初期化）
+        this.running    = false;
+        this.resultUrl  = null;
+        this.i2iExternalRunning = false;
+
+        // Inpaint 専用ワークフロー（OFF時は GenerateUI で読み込み中のワークフローを使用）
+        this.useDedicated     = false;
+        this.dedicatedFilename = null;
+        this.workflowList      = [];
+    }
+
+    async fetchWorkflowList(onLoaded) {
+        try {
+            const resp = await fetch(`${comfyUI.baseUrl}/api/wfm/workflows`);
+            if (!resp.ok) return;
+            const list = await resp.json();
+            this.workflowList = (list || []).map((w) => w.filename).filter(Boolean);
+            onLoaded?.();
+        } catch {
+            this.workflowList = [];
+        }
+    }
+
+    renderPanel() {
+        const pane  = document.getElementById("ie-props-pane");
+        const body  = document.getElementById("ie-props-body");
+        const title = document.getElementById("ie-props-title");
+        if (!pane || !body) return;
+        pane.style.display = "flex";
+        if (title) title.textContent = "Inpaint";
+
+        // 未初期化ならワークフローの現在値から初期化（VAEEncodeForInpaint.grow_mask_by / KSampler.denoise）
+        if (this.growMaskBy == null) {
+            this.growMaskBy = comfyUI.currentAnalysis?.inpaint_encode_nodes?.[0]?.grow_mask_by ?? 6;
+        }
+        if (this.denoise == null) {
+            const samplerNode = (comfyUI.currentAnalysis?.sampler_nodes || []).find((n) => n.denoise !== undefined);
+            this.denoise = samplerNode?.denoise ?? 1.0;
+        }
+
+        body.innerHTML = `
+            <div class="ie-props-row">
+                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;">
+                    <input type="checkbox" id="ie-inpaint-use-dedicated" ${this.useDedicated ? "checked" : ""}>
+                    Use dedicated workflow
+                </label>
+            </div>
+            <div class="ie-props-row" id="ie-inpaint-dedicated-row" style="${this.useDedicated ? "" : "display:none;"}">
+                <select id="ie-inpaint-dedicated-select" style="flex:1;">
+                    <option value="">-- select workflow --</option>
+                    ${this.workflowList.map((f) => `<option value="${f}" ${f === this.dedicatedFilename ? "selected" : ""}>${f}</option>`).join("")}
+                </select>
+            </div>
+            <div class="ie-props-row" style="flex-direction:column;align-items:stretch;">
+                <label>Positive Prompt</label>
+                <textarea id="ie-inpaint-positive" rows="3" style="width:100%;resize:vertical;font-size:12px;">${this.positive}</textarea>
+            </div>
+            <div class="ie-props-row" style="flex-direction:column;align-items:stretch;">
+                <label>Negative Prompt</label>
+                <textarea id="ie-inpaint-negative" rows="3" style="width:100%;resize:vertical;font-size:12px;">${this.negative}</textarea>
+            </div>
+            <div class="ie-props-row">
+                <label>Grow Mask By</label>
+                <input type="number" id="ie-inpaint-grow-mask" min="0" max="200" step="1" value="${this.growMaskBy}" style="width:60px;">
+            </div>
+            <div class="ie-props-row">
+                <label>Denoise</label>
+                <input type="number" id="ie-inpaint-denoise" min="0" max="1" step="0.01" value="${this.denoise}" style="width:60px;">
+            </div>
+            <div class="ie-props-row">
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="ie-inpaint-run-btn" style="flex:1;" ${this.running ? "disabled" : ""}>
+                    ${this.running ? "Running..." : "Run"}
+                </button>
+            </div>
+            <span id="ie-inpaint-status" style="font-size:11px;color:var(--wfm-text-secondary);"></span>
+            ${this.resultUrl ? `
+            <div class="ie-props-row" style="flex-direction:column;align-items:stretch;">
+                <label>Result</label>
+                <img src="${this.resultUrl}" style="max-width:100%;border-radius:var(--wfm-radius-sm);border:1px solid var(--wfm-border);">
+            </div>
+            ` : ""}
+        `;
+
+        document.getElementById("ie-inpaint-use-dedicated")?.addEventListener("change", e => {
+            this.useDedicated = e.target.checked;
+            this.renderPanel();
+        });
+        document.getElementById("ie-inpaint-dedicated-select")?.addEventListener("change", e => {
+            this.dedicatedFilename = e.target.value || null;
+        });
+        document.getElementById("ie-inpaint-positive")?.addEventListener("input", e => { this.positive = e.target.value; });
+        document.getElementById("ie-inpaint-negative")?.addEventListener("input", e => { this.negative = e.target.value; });
+        document.getElementById("ie-inpaint-grow-mask")?.addEventListener("input", e => {
+            this.growMaskBy = parseInt(e.target.value) || 0;
+        });
+        document.getElementById("ie-inpaint-denoise")?.addEventListener("input", e => {
+            this.denoise = Math.max(0, Math.min(1, parseFloat(e.target.value)));
+            if (Number.isNaN(this.denoise)) this.denoise = 1.0;
+        });
+        document.getElementById("ie-inpaint-run-btn")?.addEventListener("click", () => this.run());
+    }
+
+    _exportMaskCanvas(maskLayer) {
+        const w = maskLayer.canvas.width, h = maskLayer.canvas.height;
+        const canvas = document.createElement("canvas");
+        canvas.width = w; canvas.height = h;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, w, h);
+        ctx.drawImage(maskLayer.canvas, 0, 0);
+        return canvas;
+    }
+
+    async run() {
+        if (this.running) return;
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr) { showToast("No image loaded", "error"); return; }
+
+        // 非表示のマスクレイヤーはInpaint対象から除外する（目玉アイコンOFF=対象外）
+        const maskLayer = (layerMgr.activeLayer?.type === "mask" && layerMgr.activeLayer.visible)
+            ? layerMgr.activeLayer
+            : layerMgr.layers.find(l => l.type === "mask" && l.visible);
+        if (!maskLayer) { showToast("Create or show a mask layer first (Mask tool)", "info"); return; }
+
+        if (this.useDedicated) {
+            if (!this.dedicatedFilename) { showToast("Select a dedicated workflow first", "info"); return; }
+        } else if (!comfyUI.currentAnalysis) {
+            showToast("Load a workflow in GenerateUI first", "info");
+            return;
+        }
+
+        const runBtn    = document.getElementById("ie-inpaint-run-btn");
+        const statusEl  = document.getElementById("ie-inpaint-status");
+        const setStatus = (msg) => { if (statusEl) statusEl.textContent = msg; };
+
+        this.running = true;
+        if (runBtn) { runBtn.disabled = true; runBtn.textContent = "Running..."; }
+        setStatus(this.useDedicated ? "Loading dedicated workflow..." : "Compositing...");
+
+        try {
+            // 専用ワークフロー使用時は GenerateUI の comfyUI.currentWorkflow/currentAnalysis には
+            // 一切触れず、ここでロード・解析したローカルなワークフロー/解析結果だけを使う。
+            let overrideOpts = {};
+
+            if (this.useDedicated) {
+                const resp = await fetch(`${comfyUI.baseUrl}/api/wfm/workflows/raw?filename=${encodeURIComponent(this.dedicatedFilename)}`);
+                if (!resp.ok) throw new Error(`Failed to load workflow (HTTP ${resp.status})`);
+                let dedicatedWorkflow = await resp.json();
+                const format = comfyWorkflow.detectFormat(dedicatedWorkflow, this.dedicatedFilename);
+                if (format === "ui") {
+                    dedicatedWorkflow = await comfyWorkflow.convertUiToApi(dedicatedWorkflow);
+                } else if (format !== "api") {
+                    throw new Error("Unsupported or unrecognized workflow format");
+                }
+                overrideOpts = { workflow: dedicatedWorkflow, analysis: comfyWorkflow.analyzeWorkflow(dedicatedWorkflow) };
+            }
+
+            setStatus("Compositing...");
+            const bgCanvas   = this._cb.buildBgCanvas();
+            const imageBlob  = await new Promise((resolve) => bgCanvas.toBlob(resolve, "image/png"));
+            const maskCanvas = this._exportMaskCanvas(maskLayer);
+            const maskBlob   = await new Promise((resolve) => maskCanvas.toBlob(resolve, "image/png"));
+
+            const resultUrl = await this._runWithImages(imageBlob, maskBlob, {
+                positive: this.positive,
+                negative: this.negative,
+                growMaskBy: this.growMaskBy,
+                denoise: this.denoise,
+                overrideOpts,
+                onStatus: setStatus,
+            });
+            if (resultUrl) this.resultUrl = resultUrl;
+
+            setStatus("Done");
+            showToast("Inpaint generation complete", "success");
+        } catch (err) {
+            setStatus("Error");
+            showToast(`Inpaint failed: ${err.message}`, "error");
+        } finally {
+            this.running = false;
+            this.renderPanel();
+        }
+    }
+
+    // 共通処理: 画像+マスクBlobを対象ノード（LoadImage/MaskEditorOne）へ反映し、
+    // プロンプト/grow_mask_by/denoiseを設定してGenerate UIで実行、結果URLを返す。
+    // UI駆動の run() と外部（Comic Creator等）向けの runExternal() の両方から使う。
+    async _runWithImages(imageBlob, maskBlob, { positive, negative, growMaskBy, denoise, overrideOpts = {}, onStatus } = {}) {
+        const setStatus = onStatus || (() => {});
+
+        // LoadImage(の MASK 出力が使われている)スロットを優先し、無ければ Mask Editor One
+        // ノード（LoadImage を介さず画像/マスクを内包する custom node）にフォールバックする
+        const analysisForLookup = overrideOpts.analysis || comfyUI.currentAnalysis;
+        if (!analysisForLookup) throw new Error("No workflow loaded in GenerateUI");
+        const slotIndex = (analysisForLookup.load_image_nodes || []).findIndex(n => n.mask_used);
+        const meoNode = (analysisForLookup.mask_editor_one_nodes || [])[0];
+        if (slotIndex === -1 && !meoNode) {
+            throw new Error("No inpaint-capable LoadImage or Mask Editor One node found in the workflow");
+        }
+
+        setStatus("Uploading...");
+        if (slotIndex !== -1) {
+            await comfyEditor.applyImageAndMaskToSlot(imageBlob, maskBlob, slotIndex, overrideOpts);
+        } else {
+            await comfyEditor.applyImageAndMaskToMaskEditorOneNode(imageBlob, maskBlob, meoNode.id, overrideOpts);
+        }
+
+        comfyEditor.setPromptText("positive", positive, overrideOpts);
+        comfyEditor.setPromptText("negative", negative, overrideOpts);
+        comfyEditor.setInpaintParams({ growMaskBy, denoise, ...overrideOpts });
+
+        if (!window._wfmGenerateTab?.generate) throw new Error("GenerateUI is not ready yet");
+
+        setStatus("Generating...");
+        await window._wfmGenerateTab.generate(overrideOpts.workflow || undefined);
+
+        const resultImg = document.getElementById("wfm-gen-result-img");
+        return resultImg?.src || null;
+    }
+
+    // Comic Creator等、同一オリジンiframe越しの外部呼び出し専用エントリポイント。
+    // 専用ワークフロー選択(useDedicated)は扱わず、常にGenerate UIに現在
+    // ロード中のワークフロー（comfyUI.currentWorkflow/currentAnalysis）を対象にする。
+    async runExternal(imageBlob, maskBlob, { positive = "", negative = "", growMaskBy = 6, denoise = 1.0 } = {}) {
+        if (this.running) throw new Error("Inpaint is already running");
+        this.running = true;
+        try {
+            const resultUrl = await this._runWithImages(imageBlob, maskBlob, { positive, negative, growMaskBy, denoise });
+            if (!resultUrl) throw new Error("No result image produced");
+            return { ok: true, url: resultUrl };
+        } finally {
+            this.running = false;
+        }
+    }
+
+    // 共通処理: 画像Blob（マスクなし）を対象LoadImageノード(slot 0)へ反映し、
+    // プロンプト/denoiseを設定してGenerate UIで実行、結果URLを返す。
+    // _runWithImages のマスクなし版（Comic CreatorのSelect I2I連携専用）。
+    async _runI2IWithImage(imageBlob, { positive, negative, denoise, overrideOpts = {}, onStatus } = {}) {
+        const setStatus = onStatus || (() => {});
+
+        const analysisForLookup = overrideOpts.analysis || comfyUI.currentAnalysis;
+        if (!analysisForLookup) throw new Error("No workflow loaded in GenerateUI");
+        if (!(analysisForLookup.load_image_nodes?.length > 0)) {
+            throw new Error("No LoadImage node found in the workflow");
+        }
+
+        setStatus("Uploading...");
+        const file = new File([imageBlob], `i2i_${Math.random().toString(36).slice(2, 10)}.png`, { type: "image/png" });
+        await comfyEditor.applyImageToSlot(file, 0, overrideOpts);
+
+        comfyEditor.setPromptText("positive", positive, overrideOpts);
+        comfyEditor.setPromptText("negative", negative, overrideOpts);
+        comfyEditor.setInpaintParams({ denoise, ...overrideOpts });
+
+        if (!window._wfmGenerateTab?.generate) throw new Error("GenerateUI is not ready yet");
+
+        setStatus("Generating...");
+        await window._wfmGenerateTab.generate(overrideOpts.workflow || undefined);
+
+        const resultImg = document.getElementById("wfm-gen-result-img");
+        return resultImg?.src || null;
+    }
+
+    // Comic Creator等、同一オリジンiframe越しの外部呼び出し専用エントリポイント（I2I版）。
+    // runExternal と対になる、マスク不要のシンプルなI2I実行。
+    async runI2IExternal(imageBlob, { positive = "", negative = "", denoise = 1.0 } = {}) {
+        if (this.i2iExternalRunning) throw new Error("I2I is already running");
+        this.i2iExternalRunning = true;
+        try {
+            const resultUrl = await this._runI2IWithImage(imageBlob, { positive, negative, denoise });
+            if (!resultUrl) throw new Error("No result image produced");
+            return { ok: true, url: resultUrl };
+        } finally {
+            this.i2iExternalRunning = false;
+        }
+    }
+}
@@ -0,0 +1,102 @@
+/**
+ * Image Edit Tab - Mask Editor One 連携ブリッジ
+ * WFS Image Edit タブの合成画像を、ComfyUIキャンバス上のMaskEditorOneノード（選択中のノードを
+ * 優先、無ければグラフ内で最初に見つかったもの）へ送り、window.opener（ComfyUIタブ）側で実際の
+ * モーダルを開いて編集させ、Apply後の結果マスクを新規マスクレイヤーとしてWFS側に取り込む。
+ * 「Send to Workflow」の image ウィジェット探索と同じ「選択中優先・フォールバック」方式のため、
+ * WFS側のワークフロー読み込み状況とは無関係に動作する。
+ * モーダル自体は ComfyUI ページの LiteGraph ノードに強く依存するため、WFS 側からは
+ * window.opener.wfmOpenMaskEditorForNode()（web/comfyui/node_sets_menu.js 側で定義）を介して操作する。
+ */
+
+import { showToast } from "../app.js";
+
+export class MaskEditorOneBridge {
+    /**
+     * @param {object} callbacks
+     * @param {() => object|null} callbacks.getLayerManager
+     * @param {() => void} callbacks.saveUndo
+     * @param {() => void} callbacks.updateCompositeView
+     * @param {() => void} callbacks.refreshLayerList
+     * @param {() => HTMLCanvasElement} callbacks.buildBgCanvas
+     */
+    constructor(callbacks) {
+        this._cb = callbacks;
+        this.running = false;
+    }
+
+    get bridgeReady() {
+        return !!(window.opener && typeof window.opener.wfmOpenMaskEditorForNode === "function");
+    }
+
+    async openEditor() {
+        if (this.running) return;
+        if (!this.bridgeReady) {
+            showToast("Open Workflow Studio from ComfyUI's top menu to use this feature", "error");
+            return;
+        }
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr) { showToast("No image loaded", "error"); return; }
+
+        this.running = true;
+        try {
+            const dataUrl = this._cb.buildBgCanvas().toDataURL("image/png");
+            // アクティブレイヤーが既存のマスクレイヤーなら、その内容もそのまま Mask Editor One の
+            // 初期マスクとして渡す（画像だけでなく、今描いているマスクも引き継ぐ）
+            const activeLayer = layerMgr.activeLayer;
+            const existingMaskDataUrl = activeLayer?.type === "mask" ? activeLayer.canvas.toDataURL("image/png") : null;
+            window.opener.focus();
+            showToast("Switch to the ComfyUI tab, edit the mask, then click Apply", "info");
+
+            const maskDataUrl = await window.opener.wfmOpenMaskEditorForNode(dataUrl, existingMaskDataUrl);
+            if (!maskDataUrl) {
+                showToast("Mask Editor One: cancelled (no changes)", "info");
+                return;
+            }
+
+            this._cb.saveUndo();
+            const maskLayer = layerMgr.addLayer("mask", "Mask Editor One", {
+                contentW: layerMgr.width, contentH: layerMgr.height,
+                displayW: layerMgr.width, displayH: layerMgr.height,
+                x: 0, y: 0,
+            });
+            layerMgr.setActive(maskLayer.id);
+            await this._applyMask(maskLayer, maskDataUrl);
+
+            this._cb.updateCompositeView();
+            this._cb.refreshLayerList();
+            showToast("Mask Editor One: mask imported", "success");
+        } catch (err) {
+            showToast("Mask Editor One error: " + err.message, "error");
+        } finally {
+            this.running = false;
+        }
+    }
+
+    // グレースケール輝度 → アルファ白マスクに変換して書き込む（Sam3Segmentation._applyMask と同じ変換）
+    _applyMask(maskLayer, maskDataUrl) {
+        return new Promise(resolve => {
+            const img = new Image();
+            img.onload = () => {
+                const W = maskLayer.canvas.width;
+                const H = maskLayer.canvas.height;
+                const off = document.createElement("canvas");
+                off.width = W; off.height = H;
+                const mc = off.getContext("2d");
+                mc.drawImage(img, 0, 0, W, H);
+                const imgData = mc.getImageData(0, 0, W, H);
+                const d = imgData.data;
+                for (let i = 0; i < d.length; i += 4) {
+                    const lum = d[i];
+                    d[i] = d[i + 1] = d[i + 2] = 255;
+                    d[i + 3] = lum;
+                }
+                mc.putImageData(imgData, 0, 0);
+                maskLayer.ctx.drawImage(off, 0, 0);
+                resolve();
+            };
+            img.onerror = resolve;
+            img.src = maskDataUrl;
+        });
+    }
+}
@@ -25,6 +25,11 @@ export class MaskTool {
        this.sizeJitterAmount = 0.5;    // 0–1: fraction of brushSize that can be removed
        this.rotationJitter   = false;

+        // Pen pressure (0–1, from PointerEvent.pressure; mouse reports 0.5).
+        // pressure=0.5 maps to a 1.0x multiplier so mouse behavior is unchanged.
+        this.pressureEnabled = true;
+        this._lastPressure   = 0.5;
+
        this._drawing    = false;
        this._lastX      = 0;
        this._lastY      = 0;
@@ -80,29 +85,31 @@ export class MaskTool {
        if (this.canvas) this.canvas.style.cursor = "";
    }

-    onMouseDown(x, y) {
-        this._drawing = true;
-        this._lastX   = x;
-        this._lastY   = y;
+    onMouseDown(x, y, pressure = 0.5) {
+        this._drawing      = true;
+        this._lastX         = x;
+        this._lastY         = y;
+        this._lastPressure  = pressure;
        if (this.brushImage) {
            this._initStrokeBuffer();
-            this._paintToStroke(x, y);
+            this._paintToStroke(x, y, pressure);
            this._mergeStroke();
        } else {
-            this._paint(x, y);
+            this._paint(x, y, pressure);
        }
    }

-    onMouseMove(x, y) {
+    onMouseMove(x, y, pressure = 0.5) {
        if (!this._drawing) return;
        if (this.brushImage) {
-            this._paintLineToStroke(this._lastX, this._lastY, x, y);
+            this._paintLineToStroke(this._lastX, this._lastY, x, y, this._lastPressure, pressure);
            this._mergeStroke();
        } else {
-            this._paintLine(this._lastX, this._lastY, x, y);
+            this._paintLine(this._lastX, this._lastY, x, y, this._lastPressure, pressure);
        }
-        this._lastX = x;
-        this._lastY = y;
+        this._lastX        = x;
+        this._lastY        = y;
+        this._lastPressure = pressure;
    }

    onMouseUp() {
@@ -117,6 +124,14 @@ export class MaskTool {
        if (this._drawing) this.onMouseUp();
    }

+    // ── Pressure response ──────────────────────────────────────────────
+
+    _effectiveSize(pressure) {
+        if (!this.pressureEnabled) return this.brushSize;
+        const p = Math.max(0, Math.min(1, pressure ?? 0.5));
+        return Math.max(1, this.brushSize * (0.3 + p * 1.4)); // p=0.5 -> 1.0x
+    }
+
    // ── Stroke buffer (image brush only) ─────────────────────────────

    _initStrokeBuffer() {
@@ -149,54 +164,48 @@ export class MaskTool {
        ctx.globalCompositeOperation = "source-over";
    }

-    _paintToStroke(x, y) {
+    _paintToStroke(x, y, pressure = 0.5) {
        const saved = this.ctx;
        this.ctx = this._strokeCtx;

-        if (this.sizeJitter || this.rotationJitter) {
-            const savedSize      = this.brushSize;
-            const savedAngle     = this.angle;
-            const savedStamp     = this._imgStamp;
-            const savedStampSize = this._imgStampSize;
-            if (this.sizeJitter) {
-                this.brushSize = Math.max(1, savedSize * (1 - Math.random() * this.sizeJitterAmount));
-            }
-            if (this.rotationJitter) {
-                this.angle = Math.random() * 360;
-            }
-            this._paintImageBrush(x, y);
-            this.brushSize     = savedSize;
-            this.angle         = savedAngle;
-            this._imgStamp     = savedStamp;
-            this._imgStampSize = savedStampSize;
+        let size = this._effectiveSize(pressure);
+        if (this.sizeJitter) {
+            size = Math.max(1, size * (1 - Math.random() * this.sizeJitterAmount));
+        }
+
+        if (this.rotationJitter) {
+            const savedAngle = this.angle;
+            this.angle = Math.random() * 360;
+            this._paintImageBrush(x, y, size);
+            this.angle = savedAngle;
        } else {
-            this._paintImageBrush(x, y);
+            this._paintImageBrush(x, y, size);
        }

        this.ctx = saved;
    }

-    _paintLineToStroke(x0, y0, x1, y1) {
+    _paintLineToStroke(x0, y0, x1, y1, p0 = 0.5, p1 = 0.5) {
        const dist  = Math.hypot(x1 - x0, y1 - y0);
        const step  = Math.max(1, this.brushSize * this.spacing);
        const steps = Math.ceil(dist / step);
        for (let i = 1; i <= steps; i++) {
            const t = i / steps;
-            this._paintToStroke(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t);
+            this._paintToStroke(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t, p0 + (p1 - p0) * t);
        }
    }

    // ── Circle brush ─────────────────────────────────────────────────

-    _getStamp() {
+    _getStamp(size) {
+        size = Math.max(1, Math.round(size));
        if (
            this._stamp &&
-            this._stampSize === this.brushSize &&
+            this._stampSize === size &&
            this._stampHard === this.hardness &&
            this._stampMode === this.mode
        ) return this._stamp;

-        const size  = Math.max(1, Math.round(this.brushSize));
        const sc    = document.createElement("canvas");
        sc.width    = size;
        sc.height   = size;
@@ -222,8 +231,9 @@ export class MaskTool {
        return sc;
    }

-    _paint(x, y) {
-        const stamp = this._getStamp();
+    _paint(x, y, pressure = 0.5) {
+        const size  = this._effectiveSize(pressure);
+        const stamp = this._getStamp(size);
        const s     = stamp.width;
        this.ctx.save();
        if (this.mode === "erase") {
@@ -233,13 +243,13 @@ export class MaskTool {
        this.ctx.restore();
    }

-    _paintLine(x0, y0, x1, y1) {
+    _paintLine(x0, y0, x1, y1, p0 = 0.5, p1 = 0.5) {
        const dist    = Math.hypot(x1 - x0, y1 - y0);
        const spacing = Math.max(1, this.brushSize * 0.2);
        const steps   = Math.max(1, Math.ceil(dist / spacing));
        for (let i = 1; i <= steps; i++) {
            const t = i / steps;
-            this._paint(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t);
+            this._paint(x0 + (x1 - x0) * t, y0 + (y1 - y0) * t, p0 + (p1 - p0) * t);
        }
    }

@@ -307,8 +317,8 @@ export class MaskTool {
        return sc;
    }

-    _paintImageBrush(x, y) {
-        const stamp = this._getImageStamp(Math.round(this.brushSize));
+    _paintImageBrush(x, y, size = this.brushSize) {
+        const stamp = this._getImageStamp(Math.round(size));
        this.ctx.globalCompositeOperation = "source-over";
        if (this.angle) {
            this.ctx.save();
@@ -0,0 +1,248 @@
+/**
+ * Image Edit Tab - SAM3 Segmentation (Mask Editor One integration)
+ * Text-prompted segmentation via the Mask Editor One SAM3 server endpoints.
+ * Rendered as a subtool of the Mask tool; the toolbar shell itself stays in
+ * ImageEditTab (shared with the other mask subtools), but the prompt/run
+ * controls and the result thumbnail grid are owned here.
+ */
+
+import { showToast } from "../app.js";
+
+export class Sam3Segmentation {
+    /**
+     * @param {object} callbacks
+     * @param {() => object|null} callbacks.getLayerManager
+     * @param {() => void} callbacks.saveUndo
+     * @param {() => void} callbacks.updateCompositeView
+     * @param {() => void} callbacks.refreshLayerList
+     * @param {(toolId: string) => void} callbacks.renderToolOptions
+     * @param {(sub: string) => void} callbacks.renderMaskProps
+     */
+    constructor(callbacks) {
+        this._cb = callbacks;
+        this.available = false;
+        this.results   = [];   // [{mask_b64, score, area}, ...]
+        this.prompt    = "";
+        this.maxMasks  = 9;
+        this.loading   = false;
+        this.mode      = "add";        // "add" | "erase"
+        this.selected  = new Set();    // 選択中の結果インデックス
+    }
+
+    async checkAvailability() {
+        try {
+            const resp = await fetch("/mask_editor/sam3/status");
+            if (!resp.ok) return;
+            const json = await resp.json();
+            this.available = json.loaded === true || json.ckpt_found === true;
+        } catch {
+            this.available = false;
+        }
+    }
+
+    // マスクツールバー内、SAM3選択時にのみ表示するprompt/max/runコントロール
+    renderToolbarExtra(activeSub) {
+        if (!this.available || activeSub !== "sam3") return "";
+        return `
+            <div class="ie-opt-group">
+                <input type="text" id="ie-sam3-prompt" class="ie-opt-input"
+                    placeholder="e.g. cat, person..."
+                    value="${this.prompt}"
+                    style="width:160px;font-size:11px;padding:2px 6px;border:1px solid var(--wfm-border);border-radius:3px;background:var(--wfm-surface);color:var(--wfm-text);">
+            </div>
+            <div class="ie-opt-group">
+                <label style="font-size:11px;color:var(--wfm-text-secondary);">Max</label>
+                <select id="ie-sam3-max" class="ie-opt-select" style="width:44px;">
+                    ${[3,6,9,12].map(n => `<option value="${n}"${n === this.maxMasks ? " selected" : ""}>${n}</option>`).join("")}
+                </select>
+            </div>
+            <div class="ie-opt-group">
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="ie-sam3-run-btn" ${this.loading ? "disabled" : ""}>
+                    ${this.loading ? "Running..." : "Segment"}
+                </button>
+            </div>
+            <span id="ie-sam3-status" style="font-size:11px;color:var(--wfm-text-secondary);margin-left:4px;">
+                ${this.results.length > 0 ? `${this.results.length} masks found` : ""}
+            </span>
+        `;
+    }
+
+    bindToolbarEvents() {
+        document.getElementById("ie-sam3-prompt")?.addEventListener("input", e => {
+            this.prompt = e.target.value;
+        });
+        document.getElementById("ie-sam3-max")?.addEventListener("change", e => {
+            this.maxMasks = parseInt(e.target.value);
+        });
+        document.getElementById("ie-sam3-run-btn")?.addEventListener("click", () => this.runSegment());
+    }
+
+    // props ペイン（"sam3" サブツール選択時）: モード切替 + 結果サムネイルグリッド
+    renderResultsPanel(body) {
+        const modeAdd   = this.mode === "add";
+        const selCount  = this.selected.size;
+        const hasResult = this.results.length > 0;
+        body.innerHTML = `
+            <div class="ie-props-row">
+                <label>Mode</label>
+                <div style="display:flex;gap:4px;">
+                    <button class="wfm-btn wfm-btn-sm${modeAdd   ? " ie-opt-active" : ""}" id="ie-sam3-mode-add"   style="flex:1;">Add</button>
+                    <button class="wfm-btn wfm-btn-sm${!modeAdd  ? " ie-opt-active" : ""}" id="ie-sam3-mode-erase" style="flex:1;">Erase</button>
+                </div>
+            </div>
+            ${hasResult ? `
+            <div class="ie-props-row" style="flex-direction:column;align-items:stretch;gap:4px;">
+                <div style="font-size:11px;color:var(--wfm-text-secondary);">Click to select / deselect:</div>
+                <div id="ie-sam3-results" style="display:grid;grid-template-columns:repeat(3,1fr);gap:4px;">
+                    ${this.results.map((r, i) => {
+                        const sel = this.selected.has(i);
+                        const borderColor = sel ? "var(--wfm-primary,#4682e6)" : "var(--wfm-border)";
+                        const bg          = sel ? "color-mix(in srgb,var(--wfm-primary,#4682e6) 15%,transparent)" : "transparent";
+                        return `<div class="ie-sam3-thumb" data-idx="${i}"
+                            style="cursor:pointer;border:2px solid ${borderColor};border-radius:4px;overflow:hidden;text-align:center;background:${bg};position:relative;">
+                            <img src="${r.mask_b64}" style="width:100%;display:block;background:#000;">
+                            <div style="font-size:10px;padding:2px 0;color:var(--wfm-text-secondary);">
+                                ${Math.round((r.score ?? 0) * 100)}%
+                            </div>
+                            ${sel ? '<div style="position:absolute;top:2px;right:3px;font-size:12px;line-height:1;color:var(--wfm-primary,#4682e6);">✓</div>' : ""}
+                        </div>`;
+                    }).join("")}
+                </div>
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="ie-sam3-apply-btn"
+                    ${selCount === 0 ? "disabled" : ""} style="margin-top:4px;">
+                    Apply Selected${selCount > 0 ? ` (${selCount})` : ""}
+                </button>
+            </div>` : `
+            <div style="font-size:11px;color:var(--wfm-text-secondary);padding:4px 0;">
+                ${this.loading ? "Segmenting..." : "Enter a prompt and press Segment"}
+            </div>`}
+        `;
+        document.getElementById("ie-sam3-mode-add")?.addEventListener("click", () => {
+            this.mode = "add";
+            this._cb.renderMaskProps("sam3");
+        });
+        document.getElementById("ie-sam3-mode-erase")?.addEventListener("click", () => {
+            this.mode = "erase";
+            this._cb.renderMaskProps("sam3");
+        });
+        body.querySelectorAll(".ie-sam3-thumb").forEach(el => {
+            el.addEventListener("click", () => {
+                const idx = parseInt(el.dataset.idx);
+                if (this.selected.has(idx)) this.selected.delete(idx);
+                else                        this.selected.add(idx);
+                this._cb.renderMaskProps("sam3");
+            });
+        });
+        document.getElementById("ie-sam3-apply-btn")?.addEventListener("click", () => {
+            this.applySelectedMasks();
+        });
+    }
+
+    async runSegment() {
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr || this.loading) return;
+        const prompt = this.prompt.trim();
+        if (!prompt) { showToast("Please enter a prompt", "warning"); return; }
+
+        // 推論対象: アクティブレイヤー（マスクなら下のイメージレイヤーを探す）
+        let imageLayer = layerMgr.activeLayer;
+        if (!imageLayer || imageLayer.type === "mask") {
+            imageLayer = layerMgr.layers.find(l => l.type !== "mask" && l.visible);
+        }
+        if (!imageLayer) { showToast("No image layer found", "error"); return; }
+
+        const NODE_ID = "wfs_sam3";
+        this.loading  = true;
+        this.results  = [];
+        this.selected = new Set();
+        this._cb.renderToolOptions("mask");
+        this._cb.renderMaskProps("sam3");
+
+        try {
+            const dataUrl = imageLayer.canvas.toDataURL("image/png");
+            await fetch("/mask_editor/store_image", {
+                method:  "POST",
+                headers: { "Content-Type": "application/json" },
+                body:    JSON.stringify({ node_id: NODE_ID, image_b64: dataUrl }),
+            });
+
+            const resp = await fetch("/mask_editor/sam3/segment", {
+                method:  "POST",
+                headers: { "Content-Type": "application/json" },
+                body:    JSON.stringify({ node_id: NODE_ID, prompt, max_masks: this.maxMasks }),
+            });
+            const json = await resp.json();
+            if (json.error) throw new Error(json.error);
+            this.results = json.masks || [];
+            if (this.results.length === 0) showToast("No masks found", "warning");
+            else showToast(`${this.results.length} mask(s) found`, "success");
+        } catch (err) {
+            showToast("SAM3 error: " + err.message, "error");
+        } finally {
+            this.loading = false;
+            this._cb.renderToolOptions("mask");
+            this._cb.renderMaskProps("sam3");
+        }
+    }
+
+    async applySelectedMasks() {
+        const layerMgr = this._cb.getLayerManager();
+        if (!layerMgr || this.selected.size === 0) return;
+        const indices = [...this.selected].sort((a, b) => a - b);
+        const masks   = indices.map(i => this.results[i]).filter(Boolean);
+        if (masks.length === 0) return;
+
+        let maskLayer = layerMgr.activeLayer;
+        if (!maskLayer || maskLayer.type !== "mask") {
+            const ref = layerMgr.activeLayer;
+            maskLayer = layerMgr.addLayer("mask", "SAM3 Mask", {
+                contentW: ref?.canvas.width  ?? layerMgr.width,
+                contentH: ref?.canvas.height ?? layerMgr.height,
+                displayW: ref?.displayW      ?? layerMgr.width,
+                displayH: ref?.displayH      ?? layerMgr.height,
+                x: ref?.x ?? 0, y: ref?.y ?? 0,
+            });
+            layerMgr.setActive(maskLayer.id);
+        }
+
+        this._cb.saveUndo();
+        for (const r of masks) {
+            await this._applyMask(maskLayer, r.mask_b64, this.mode);
+        }
+
+        this._cb.updateCompositeView();
+        this._cb.refreshLayerList();
+        showToast(`SAM3: ${masks.length} mask(s) applied (${this.mode})`, "success");
+    }
+
+    _applyMask(maskLayer, maskB64, mode = "add") {
+        return new Promise(resolve => {
+            const img = new Image();
+            img.onload = () => {
+                const W = maskLayer.canvas.width;
+                const H = maskLayer.canvas.height;
+                // グレースケール輝度 → アルファ白マスクに変換
+                const off = document.createElement("canvas");
+                off.width = W; off.height = H;
+                const mc = off.getContext("2d");
+                mc.drawImage(img, 0, 0, W, H);
+                const imgData = mc.getImageData(0, 0, W, H);
+                const d = imgData.data;
+                for (let i = 0; i < d.length; i += 4) {
+                    const lum = d[i];
+                    d[i] = d[i+1] = d[i+2] = 255;
+                    d[i+3] = lum;
+                }
+                mc.putImageData(imgData, 0, 0);
+                // モードに合わせてマスクキャンバスに合成
+                maskLayer.ctx.save();
+                maskLayer.ctx.globalCompositeOperation = mode === "erase" ? "destination-out" : "source-over";
+                maskLayer.ctx.drawImage(off, 0, 0);
+                maskLayer.ctx.restore();
+                resolve();
+            };
+            img.onerror = resolve;
+            img.src = maskB64;
+        });
+    }
+}
@@ -0,0 +1,363 @@
+/**
+ * ImagePrompt Gallery — Gallery タブのサブタブ。
+ * ws_image_prompt フォルダ配下の画像+.txtサイドカーを閲覧し、
+ * クリックで選択→「追加」でプロンプトを組み立てて最終的にコピーする。
+ */
+
+import { showToast } from "./app.js";
+import { t } from "./i18n.js";
+import { escapeHtml, setupSearchClearBtn } from "./util.js";
+
+const API = {
+    root:        () => `/wfm/gallery/image-prompt/root`,
+    folders:     (root)   => `/wfm/gallery/folders?root=${encodeURIComponent(root)}`,
+    images:      (params) => `/wfm/gallery/images?${new URLSearchParams(params)}`,
+    imageMeta:   (path)   => `/wfm/gallery/image/meta?path=${encodeURIComponent(path)}`,
+    thumb:       (path, w = 200) => `/wfm/gallery/image/thumb?path=${encodeURIComponent(path)}&w=${w}`,
+    serveImage:  (path)   => `/wfm/gallery/image/serve?path=${encodeURIComponent(path)}`,
+    savePrompt:            `/wfm/gallery/image/image-prompt`,
+};
+
+const state = {
+    root: null,
+    currentFolder: null,
+    search: "",
+    images: [],
+    selectedImage: null,
+    chips: [], // [{ path, filename, prompt }]
+};
+
+let _initialized = false;
+
+async function apiFetch(url, opts = {}) {
+    const res = await fetch(url, opts);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return res.json();
+}
+
+function debounce(fn, wait) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), wait);
+    };
+}
+
+// ── 初期化 ────────────────────────────────────────────────────
+
+export function initImagePromptTab() {
+    document.getElementById("wfm-imageprompt-refresh-btn")?.addEventListener("click", () => {
+        loadFolderTree();
+        loadImages();
+    });
+
+    setupSearchClearBtn("wfm-imageprompt-search", "wfm-imageprompt-search-clear-btn", () => {
+        state.search = "";
+        loadImages();
+    });
+
+    const searchInput = document.getElementById("wfm-imageprompt-search");
+    searchInput?.addEventListener("input", debounce(() => {
+        state.search = searchInput.value.trim();
+        loadImages();
+    }, 300));
+
+    document.getElementById("wfm-imageprompt-add-btn")?.addEventListener("click", addSelectedToChips);
+    document.getElementById("wfm-imageprompt-save-prompt-btn")?.addEventListener("click", saveSelectedPrompt);
+    document.getElementById("wfm-imageprompt-clear-btn")?.addEventListener("click", clearAllChips);
+    document.getElementById("wfm-imageprompt-copy-btn")?.addEventListener("click", copyFinalPrompt);
+}
+
+export async function activateImagePromptTab() {
+    if (_initialized) return;
+    _initialized = true;
+    try {
+        const data = await apiFetch(API.root());
+        state.root = data.root;
+        await loadFolderTree();
+    } catch (e) {
+        const tree = document.getElementById("wfm-imageprompt-tree");
+        if (tree) tree.innerHTML = `<p class="wfm-placeholder">Error: ${escapeHtml(e.message)}</p>`;
+    }
+}
+
+// ── フォルダツリー ────────────────────────────────────────────
+
+async function loadFolderTree() {
+    if (!state.root) return;
+    const tree = document.getElementById("wfm-imageprompt-tree");
+    tree.innerHTML = `<p class="wfm-placeholder">${t("loading")}</p>`;
+    try {
+        const data = await apiFetch(API.folders(state.root));
+        if (data.error) {
+            tree.innerHTML = `<p class="wfm-placeholder">${escapeHtml(data.error)}</p>`;
+            return;
+        }
+        tree.innerHTML = "";
+        renderTreeNode(data, tree, 0, true);
+        const firstLabel = tree.querySelector(".wfm-gallery-tree-label");
+        if (firstLabel) firstLabel.click();
+    } catch (e) {
+        tree.innerHTML = `<p class="wfm-placeholder">Error: ${escapeHtml(e.message)}</p>`;
+    }
+}
+
+function renderTreeNode(node, container, depth, isRoot) {
+    const item = document.createElement("div");
+    item.className = "wfm-gallery-tree-item";
+    item.style.paddingLeft = `${depth * 12}px`;
+    item.dataset.path = node.abs_path;
+
+    const hasChildren = node.children && node.children.length > 0;
+    const absPath = node.abs_path;
+
+    const arrow = document.createElement("span");
+    arrow.className = "wfm-gallery-tree-arrow";
+    if (hasChildren) {
+        arrow.textContent = "▶";
+        arrow.dataset.expanded = "false";
+    } else {
+        arrow.textContent = " ";
+        arrow.style.visibility = "hidden";
+    }
+    item.appendChild(arrow);
+
+    const label = document.createElement("span");
+    label.className = "wfm-gallery-tree-label";
+    label.textContent = isRoot ? "[root]" : node.name;
+    // サブフォルダ内も含めた合計件数（クリックで再帰的に全画像を表示するため）
+    const totalCount = node.image_count_total ?? node.image_count;
+    if (totalCount > 0) {
+        const badge = document.createElement("span");
+        badge.className = "wfm-gallery-tree-count";
+        badge.textContent = totalCount;
+        label.appendChild(badge);
+    }
+    item.appendChild(label);
+
+    label.addEventListener("click", () => {
+        document.querySelectorAll("#wfm-imageprompt-tree .wfm-gallery-tree-item.selected").forEach(el => el.classList.remove("selected"));
+        item.classList.add("selected");
+        state.currentFolder = absPath;
+        loadImages();
+    });
+
+    if (hasChildren) {
+        const childContainer = document.createElement("div");
+        childContainer.className = "wfm-gallery-tree-children";
+        childContainer.style.display = "none";
+
+        arrow.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const expanded = arrow.dataset.expanded === "true";
+            if (!expanded) {
+                arrow.dataset.expanded = "true";
+                arrow.textContent = "▼";
+                childContainer.style.display = "";
+                if (childContainer.children.length === 0) {
+                    node.children.forEach(child => renderTreeNode(child, childContainer, depth + 1, false));
+                }
+            } else {
+                arrow.dataset.expanded = "false";
+                arrow.textContent = "▶";
+                childContainer.style.display = "none";
+            }
+        });
+
+        container.appendChild(item);
+        container.appendChild(childContainer);
+    } else {
+        container.appendChild(item);
+    }
+}
+
+// ── 画像一覧 ─────────────────────────────────────────────────
+
+async function loadImages() {
+    if (!state.currentFolder) return;
+    const grid = document.getElementById("wfm-imageprompt-grid");
+    grid.innerHTML = `<p class="wfm-placeholder">${t("loading")}</p>`;
+
+    // 上位フォルダを選択した場合もサブフォルダの画像をまとめて表示する
+    const params = { folder: state.currentFolder, sort: "name_asc", recursive: "true" };
+    if (state.search) params.search = state.search;
+
+    try {
+        const data = await apiFetch(API.images(params));
+        state.images = data.images || [];
+        document.getElementById("wfm-imageprompt-count").textContent = `${state.images.length} images`;
+        renderImages();
+    } catch (e) {
+        grid.innerHTML = `<p class="wfm-placeholder">Error: ${escapeHtml(e.message)}</p>`;
+    }
+}
+
+function renderImages() {
+    const grid = document.getElementById("wfm-imageprompt-grid");
+    if (state.images.length === 0) {
+        grid.innerHTML = `<p class="wfm-placeholder">${t("galleryNoImages")}</p>`;
+        return;
+    }
+    grid.innerHTML = "";
+    const fragment = document.createDocumentFragment();
+    state.images.forEach(img => fragment.appendChild(createThumbCard(img)));
+    grid.appendChild(fragment);
+}
+
+function createThumbCard(img) {
+    const card = document.createElement("div");
+    card.className = "wfm-gallery-thumb-card";
+    card.title = img.filename;
+    card.dataset.path = img.path;
+    if (state.selectedImage && state.selectedImage.path === img.path) {
+        card.classList.add("selected");
+    }
+
+    const imgEl = document.createElement("img");
+    imgEl.className = "wfm-gallery-thumb-img";
+    imgEl.loading = "lazy";
+    imgEl.src = API.thumb(img.path);
+    imgEl.alt = img.filename;
+    imgEl.onerror = () => {
+        imgEl.style.display = "none";
+        const placeholder = document.createElement("div");
+        placeholder.className = "wfm-gallery-thumb-placeholder";
+        placeholder.textContent = "?";
+        card.insertBefore(placeholder, imgEl.nextSibling);
+    };
+    card.appendChild(imgEl);
+
+    card.addEventListener("click", () => selectImage(img));
+
+    return card;
+}
+
+// ── 選択画像 / プロンプト表示 ─────────────────────────────────
+
+async function selectImage(img) {
+    state.selectedImage = img;
+    document.querySelectorAll("#wfm-imageprompt-grid .wfm-gallery-thumb-card").forEach(el => {
+        el.classList.toggle("selected", el.dataset.path === img.path);
+    });
+
+    document.getElementById("wfm-imageprompt-selected-name").textContent = img.filename;
+    const preview = document.getElementById("wfm-imageprompt-selected-preview");
+    preview.innerHTML = "";
+    const previewImg = document.createElement("img");
+    previewImg.src = API.serveImage(img.path);
+    previewImg.alt = img.filename;
+    previewImg.style.cssText = "max-width:100%;max-height:100%;object-fit:contain;";
+    preview.appendChild(previewImg);
+
+    const promptBox = document.getElementById("wfm-imageprompt-selected-prompt");
+    promptBox.value = "";
+    document.getElementById("wfm-imageprompt-save-prompt-btn").disabled = true;
+    document.getElementById("wfm-imageprompt-add-btn").disabled = true;
+
+    try {
+        const meta = await apiFetch(API.imageMeta(img.path));
+        promptBox.value = meta.image_prompt || "";
+        document.getElementById("wfm-imageprompt-save-prompt-btn").disabled = false;
+        document.getElementById("wfm-imageprompt-add-btn").disabled = !meta.image_prompt;
+    } catch (e) {
+        showToast(t("errorWithMsg", e.message), "error");
+    }
+}
+
+async function saveSelectedPrompt() {
+    if (!state.selectedImage) return;
+    const promptBox = document.getElementById("wfm-imageprompt-selected-prompt");
+    try {
+        const res = await apiFetch(API.savePrompt, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ path: state.selectedImage.path, prompt: promptBox.value }),
+        });
+        if (res.ok) {
+            showToast(t("imagePromptSaved"), "success");
+            document.getElementById("wfm-imageprompt-add-btn").disabled = !promptBox.value.trim();
+        } else {
+            showToast(t("saveFailed"), "error");
+        }
+    } catch (e) {
+        showToast(t("errorWithMsg", e.message), "error");
+    }
+}
+
+// ── プロンプトビルダー (チップ / 最終プロンプト) ─────────────────
+
+function cleanPromptText(text) {
+    return String(text || "")
+        .replace(/^[,\s]+|[,\s]+$/g, "")
+        .replace(/\s*,\s*/g, ", ")
+        .trim();
+}
+
+function addSelectedToChips() {
+    const img = state.selectedImage;
+    if (!img) return;
+    const promptBox = document.getElementById("wfm-imageprompt-selected-prompt");
+    const prompt = cleanPromptText(promptBox.value);
+    if (!prompt) return;
+    if (state.chips.some(c => c.path === img.path)) {
+        showToast(t("imagePromptAlreadyAdded"), "info");
+        return;
+    }
+    state.chips.push({ path: img.path, filename: img.filename, prompt });
+    renderChips();
+    rebuildFinalPrompt();
+}
+
+function removeChip(path) {
+    state.chips = state.chips.filter(c => c.path !== path);
+    renderChips();
+    rebuildFinalPrompt();
+}
+
+function clearAllChips() {
+    state.chips = [];
+    renderChips();
+    document.getElementById("wfm-imageprompt-final-prompt").value = "";
+}
+
+function renderChips() {
+    const container = document.getElementById("wfm-imageprompt-chips");
+    container.innerHTML = "";
+    state.chips.forEach(chip => {
+        const el = document.createElement("span");
+        el.className = "wfm-imageprompt-chip";
+        el.title = chip.prompt;
+
+        const text = document.createElement("span");
+        text.className = "wfm-imageprompt-chip-text";
+        text.textContent = chip.filename.replace(/\.[^.]+$/, "");
+        el.appendChild(text);
+
+        const removeBtn = document.createElement("button");
+        removeBtn.className = "wfm-imageprompt-chip-remove";
+        removeBtn.textContent = "×";
+        removeBtn.addEventListener("click", () => removeChip(chip.path));
+        el.appendChild(removeBtn);
+
+        container.appendChild(el);
+    });
+}
+
+function rebuildFinalPrompt() {
+    const combined = state.chips.map(c => c.prompt).join(", ");
+    document.getElementById("wfm-imageprompt-final-prompt").value = cleanPromptText(combined);
+}
+
+async function copyFinalPrompt() {
+    const text = document.getElementById("wfm-imageprompt-final-prompt").value;
+    if (!text.trim()) {
+        showToast(t("imagePromptNothingToCopy"), "info");
+        return;
+    }
+    try {
+        await navigator.clipboard.writeText(text);
+        showToast(t("imagePromptCopiedToast"), "success");
+    } catch (e) {
+        showToast(t("errorWithMsg", e.message), "error");
+    }
+}
@@ -6,6 +6,7 @@

 import { t } from "./i18n.js";
 import { escapeHtml } from "./util.js";
+import { comfyWorkflow } from "./comfyui-workflow.js";

 // ── File size limit ───────────────────────────────────────────
 const MAX_FILE_SIZE = 50 * 1024 * 1024;
@@ -74,7 +75,7 @@ function parseITXtChunk(data, latin1, utf8) {
    pos = findNull(data, pos); if (pos === -1) return null; pos++;
    return { keyword, text: utf8.decode(data.slice(pos)) };
 }
-async function readAllPNGTextChunks(file) {
+export async function readAllPNGTextChunks(file) {
    const buffer = await file.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    const PNG_SIG = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
@@ -96,6 +97,81 @@ async function readAllPNGTextChunks(file) {
    return chunks;
 }

+// ── MP4 container metadata (moov/udta/meta の mdta keys/ilst) ──
+// ComfyUIのSaveVideoはPNGのtEXtチャンクと同じキー名(workflow=UI形式, prompt=API形式)で
+// JSON文字列をisobmff(mp4)のudta/meta(mdta)にコンテナレベルタグとして書き込む(FFmpegの
+// movflags=+use_metadata_tags)。ここではPyAV等に頼らずブラウザ側でボックスを直接辿って読む。
+function findMP4Box(view, bytes, start, end, targetType) {
+    let offset = start;
+    while (offset + 8 <= end) {
+        const size = view.getUint32(offset);
+        const type = String.fromCharCode(bytes[offset + 4], bytes[offset + 5], bytes[offset + 6], bytes[offset + 7]);
+        let boxSize = size;
+        let bodyStart = offset + 8;
+        if (size === 1) {
+            if (offset + 16 > end) break;
+            const hi = view.getUint32(offset + 8);
+            const lo = view.getUint32(offset + 12);
+            boxSize = hi * 4294967296 + lo;
+            bodyStart = offset + 16;
+        } else if (size === 0) {
+            boxSize = end - offset;
+        }
+        if (boxSize < 8) break;
+        if (type === targetType) return { bodyStart, end: offset + boxSize };
+        offset += boxSize;
+    }
+    return null;
+}
+
+export async function readMP4MetaTags(file) {
+    const buffer = await file.arrayBuffer();
+    const bytes = new Uint8Array(buffer);
+    const view = new DataView(buffer);
+    if (bytes.length < 12) return null;
+    const ftyp = String.fromCharCode(bytes[4], bytes[5], bytes[6], bytes[7]);
+    if (ftyp !== "ftyp") return null;
+
+    const moov = findMP4Box(view, bytes, 0, bytes.length, "moov");
+    if (!moov) return null;
+    const udta = findMP4Box(view, bytes, moov.bodyStart, moov.end, "udta");
+    let meta = udta ? findMP4Box(view, bytes, udta.bodyStart, udta.end, "meta") : null;
+    if (!meta) meta = findMP4Box(view, bytes, moov.bodyStart, moov.end, "meta");
+    if (!meta) return null;
+    const metaBody = meta.bodyStart + 4; // meta は FullBox (version+flags 4バイト)
+    const keysBox = findMP4Box(view, bytes, metaBody, meta.end, "keys");
+    const ilstBox = findMP4Box(view, bytes, metaBody, meta.end, "ilst");
+    if (!keysBox || !ilstBox) return null;
+
+    const utf8 = new TextDecoder("utf-8", { fatal: false });
+    let off = keysBox.bodyStart + 4; // version+flags をスキップ
+    const count = view.getUint32(off); off += 4;
+    const keyNames = [];
+    for (let i = 0; i < count && off + 8 <= keysBox.end; i++) {
+        const ksize = view.getUint32(off);
+        if (ksize < 8) break;
+        keyNames.push(utf8.decode(bytes.slice(off + 8, off + ksize)));
+        off += ksize;
+    }
+
+    const result = {};
+    let ioff = ilstBox.bodyStart;
+    while (ioff + 8 <= ilstBox.end) {
+        const itemSize = view.getUint32(ioff);
+        const keyIndex = view.getUint32(ioff + 4);
+        if (itemSize < 8) break;
+        const itemEnd = Math.min(ioff + itemSize, ilstBox.end);
+        const data = findMP4Box(view, bytes, ioff + 8, itemEnd, "data");
+        if (data) {
+            const payload = bytes.slice(data.bodyStart + 8, data.end); // type(4)+locale(4)をスキップ
+            const name = keyNames[keyIndex - 1];
+            if (name) { try { result[name] = utf8.decode(payload); } catch { /* skip */ } }
+        }
+        ioff = itemEnd;
+    }
+    return result;
+}
+
 // ── Workflow extraction helpers ───────────────────────────────
 function collectUnique(arr) {
    const seen = new Set(), out = [];
@@ -173,6 +249,7 @@ function extractLoRAs(wf) {
            const ct = n.class_type ?? "";
            if (ct === "LoraLoader") add(n.inputs?.lora_name, n.inputs?.strength_model, n.inputs?.strength_clip);
            else if (ct === "LoraLoaderModelOnly") add(n.inputs?.lora_name, n.inputs?.strength, 1.0);
+            else if (ct === "ImageMetadataLoRALoader") { for (let i = 1; i <= 3; i++) add(n.inputs?.[`lora_${i}`], n.inputs?.[`strength_model_${i}`], n.inputs?.[`strength_clip_${i}`]); }
            else if (ct === "Lora Loader (LoraManager)") {
                const lorasData = n.inputs?.loras;
                const list = lorasData?.__value__ ?? (Array.isArray(lorasData) ? lorasData : null);
@@ -183,15 +260,122 @@ function extractLoRAs(wf) {
    return results;
 }

+// LiveChatStream(ComfyUI-LiveChatStream)のRETURN_NAMES順 = INPUT_TYPESの対応ウィジェット名
+// (positive→prompt_text, negative→negative_text, response→response_text, ...)。nodes.pyの
+// INPUT_TYPES/RETURN_TYPESコメント通り、ウィジェット・出力スロットとも末尾追加のみで位置互換。
+const LIVE_CHAT_STREAM_OUTPUT_KEYS = ["prompt_text", "negative_text", "response_text", "chat_p_text", "chat_n_text", "thinking_text"];
+
 function isTextEncoderNode(ct) { return ct === "CLIPTextEncode" || ct.includes("TextEncode") || ct.includes("TextEncoderSD"); }
 function isSamplerNode(ct) { return ct === "KSampler" || ct === "KSamplerAdvanced" || ct.includes("KSampler") || ct.includes("Sampler"); }
 function isPromptStylerNode(ct) { return ct.includes("PromptStyler"); }

-function extractPrompts(wf) {
+// サンプラーノードの設定値(seed/steps/cfg/sampler_name/scheduler/denoise)をAPI形式の
+// 名前付きinputsから読む。ノードタイプごとにwidgets_valuesの並びが異なる(KSampler/
+// KSamplerAdvanced等)ため、UI形式(LiteGraph)はconvertUiToApi()を経由した後に呼ぶ想定。
+const SAMPLER_SETTING_KEYS = ["seed", "noise_seed", "steps", "cfg", "sampler_name", "scheduler", "denoise"];
+function extractSamplerSettings(apiWf) {
+    if (!apiWf || typeof apiWf !== "object" || Array.isArray(apiWf.nodes)) return null;
+    const pick = (inputs, keys) => {
+        const out = {};
+        for (const key of keys) {
+            const v = inputs?.[key];
+            if (v !== undefined && !Array.isArray(v)) out[key] = v;
+        }
+        return out;
+    };
+    // Flux/SD3系はRandomNoise+BasicScheduler+KSamplerSelect+CFGGuider等に設定が分散するため、
+    // 補助ノードから不足分を補う。
+    const AUX = {
+        RandomNoise: ["noise_seed"],
+        BasicScheduler: ["steps", "scheduler", "denoise"],
+        KSamplerSelect: ["sampler_name"],
+        CFGGuider: ["cfg"],
+        DualCFGGuider: ["cfg"],
+    };
+    // 設定キーを最も多く持つサンプラーを主とし、同数なら後ろのノード(hires-fix等の最終パス)を優先する
+    let main = null, mainCount = 0;
+    const aux = {};
+    for (const [id, n] of Object.entries(apiWf)) {
+        if (!n || typeof n !== "object") continue;
+        const ct = n.class_type ?? "";
+        const inputs = n.inputs ?? {};
+        if (AUX[ct]) {
+            const got = pick(inputs, AUX[ct]);
+            for (const [k, v] of Object.entries(got)) if (!(k in aux)) aux[k] = v;
+            continue;
+        }
+        if (!isSamplerNode(ct)) continue;
+        const settings = pick(inputs, SAMPLER_SETTING_KEYS);
+        const count = Object.keys(settings).length;
+        if (count > 0 && count >= mainCount) {
+            main = settings; mainCount = count;
+        }
+    }
+    const merged = { ...aux, ...(main ?? {}) };
+    return Object.keys(merged).length > 0 ? merged : null;
+}
+
+// CLIPTextEncodeEditPlus (model-and-prompt-from-metadata) の encode() と同じ結合ルール。
+// RAW: text1のみ。EDIT: text_editのみ。front/back: text2(未接続ならtext_edit)をtext1の前/後に結合。
+function resolveEditPlusText(mode, textEdit, text1, text2) {
+    const t1 = typeof text1 === "string" ? text1 : "";
+    const edit = typeof textEdit === "string" ? textEdit : "";
+    const insert = typeof text2 === "string" && text2 !== "" ? text2 : edit;
+    switch (mode) {
+        case "RAW": return t1;
+        case "EDIT": return edit;
+        case "front": return t1 ? `${insert}, ${t1}` : insert;
+        case "back": return t1 ? `${t1}, ${insert}` : insert;
+        default: return t1 || edit;
+    }
+}
+
+export function extractPrompts(wf) {
    if (!wf || typeof wf !== "object") return { positives: [], negatives: [] };
    return Array.isArray(wf.nodes) ? extractPromptsLiteGraph(wf) : extractPromptsAPI(wf);
 }

+// LiteGraph形式: リンクを辿ってテキストを解決（ComfySwitchNode等の中継ノードにも対応）
+function resolveLinkedTextInNodeSet(nodeMap, linkOrigin, linkSlot, srcId, slot, depth = 0) {
+    if (depth > 6) return null;
+    const srcNode = nodeMap.get(srcId);
+    if (!srcNode) return null;
+    const srcType = srcNode.type ?? "";
+    if (isPromptStylerNode(srcType)) {
+        const v = srcNode.widgets_values?.[slot];
+        return (v && typeof v === "string") ? v : null;
+    }
+    // ComfySwitchNode ("If/Else Switch") — 片方(TextGenerateなどLLMノード)は静的解決不能なため
+    // on_false/on_true の両方を試し、リテラルへ解決できた方を採用する。
+    if (srcType === "ComfySwitchNode" && Array.isArray(srcNode.inputs)) {
+        for (const name of ["on_false", "on_true"]) {
+            const inp = srcNode.inputs.find(i => i.name === name);
+            if (inp?.link == null) continue;
+            const originId = linkOrigin.get(inp.link);
+            const originSlot = linkSlot.get(inp.link) ?? 0;
+            if (originId == null) continue;
+            const text = resolveLinkedTextInNodeSet(nodeMap, linkOrigin, linkSlot, originId, originSlot, depth + 1);
+            if (text) return text;
+        }
+        return null;
+    }
+    // WFS_PromptText, PrimitiveStringMultiline 等、任意の STRING 出力ノード
+    const v = srcNode.widgets_values?.[slot] ?? srcNode.widgets_values?.[0];
+    if (v && typeof v === "string") return v;
+    // さらにリンクされている場合（StringReplace等の中継ノード）は追跡する
+    // "source" = PreviewAny（値タップ中継）, "string_a" = StringConcatenate（LoRAトリガーワード
+    // 連結等）— Krea-2のプロンプト強化配線で使われる中継ノード
+    if (Array.isArray(srcNode.inputs)) {
+        const nextInput = srcNode.inputs.find(i => ["text", "value", "prompt", "string", "source", "string_a"].includes(i.name));
+        if (nextInput?.link != null) {
+            const originId = linkOrigin.get(nextInput.link);
+            const originSlot = linkSlot.get(nextInput.link) ?? 0;
+            if (originId != null) return resolveLinkedTextInNodeSet(nodeMap, linkOrigin, linkSlot, originId, originSlot, depth + 1);
+        }
+    }
+    return null;
+}
+
 // CLIPTextEncode + KSampler でプロンプト抽出（トップレベル・サブグラフ共用）
 // サンプラーが見つかりテキストが取れた場合のみ非null を返す
 function extractPromptsFromNodeSet(nodes, links) {
@@ -211,44 +395,84 @@ function extractPromptsFromNodeSet(nodes, links) {
    }
    const textMap = new Map();
    for (const n of nodes) {
-        if (!isTextEncoderNode(n.type ?? "")) continue;
-        const text = n.widgets_values?.[0];
-        if (text && typeof text === "string") {
-            textMap.set(n.id, text);
-        } else if (Array.isArray(n.inputs)) {
-            const textInput = n.inputs.find(inp => inp.name === "text" || inp.name === "text_g" || inp.name === "prompt");
-            if (textInput?.link != null) {
-                const originId = linkOrigin.get(textInput.link);
-                const originSlot = linkSlot.get(textInput.link) ?? 0;
-                const srcNode = originId != null ? nodeMap.get(originId) : null;
-                if (srcNode) {
-                    const srcType = srcNode.type ?? "";
-                    if (isPromptStylerNode(srcType)) {
-                        const v = srcNode.widgets_values?.[originSlot];
-                        if (v && typeof v === "string") textMap.set(n.id, v);
-                    } else {
-                        // WFS_PromptText, PrimitiveStringMultiline, ComfySwitchNode 等、任意の STRING 出力ノード
-                        const v = srcNode.widgets_values?.[originSlot] ?? srcNode.widgets_values?.[0];
-                        if (v && typeof v === "string") textMap.set(n.id, v);
-                    }
-                }
-            }
+        const type = n.type ?? "";
+        if (type === "CLIPTextEncodeEditPlus") {
+            const resolveNamedInput = (name) => {
+                if (!Array.isArray(n.inputs)) return null;
+                const inp = n.inputs.find(i => i.name === name);
+                if (inp?.link == null) return null;
+                const originId = linkOrigin.get(inp.link);
+                const originSlot = linkSlot.get(inp.link) ?? 0;
+                if (originId == null) return null;
+                return resolveLinkedTextInNodeSet(nodeMap, linkOrigin, linkSlot, originId, originSlot);
+            };
+            const combined = resolveEditPlusText(n.widgets_values?.[1], n.widgets_values?.[0], resolveNamedInput("text1"), resolveNamedInput("text2"));
+            if (combined) textMap.set(n.id, combined);
+            continue;
        }
+        if (!isTextEncoderNode(type)) continue;
+        // A text widget converted to a wired input keeps its last typed value in widgets_values[0]
+        // (stale — never sent to the backend), so the linked source must win over it.
+        const textInput = Array.isArray(n.inputs)
+            ? n.inputs.find(inp => inp.name === "text" || inp.name === "text_g" || inp.name === "prompt")
+            : null;
+        const linkedText = textInput?.link != null && linkOrigin.has(textInput.link)
+            ? resolveLinkedTextInNodeSet(nodeMap, linkOrigin, linkSlot, linkOrigin.get(textInput.link), linkSlot.get(textInput.link) ?? 0)
+            : null;
+        const text = linkedText || n.widgets_values?.[0];
+        if (text && typeof text === "string") textMap.set(n.id, text);
    }
    const pos = new Set(), neg = new Set();
    let foundSampler = false;
    for (const n of nodes) {
        if (!isSamplerNode(n.type ?? "") || !Array.isArray(n.inputs)) continue;
        foundSampler = true;
-        for (const inp of n.inputs) {
+        // SamplerCustomAdvanced doesn't hold positive/negative directly — it drives a separate
+        // Guider node (CFGGuider/DualCFGGuider/BasicGuider) via its "guider" input. Scan that
+        // node's inputs instead so the loop below can find the positive/negative-role slots.
+        let inputsToScan = n.inputs;
+        let viaBasicGuider = false;
+        const guiderInput = n.inputs.find(inp => inp.name === "guider");
+        if (guiderInput?.link != null) {
+            const guiderId = linkOrigin.get(guiderInput.link);
+            const guiderNode = guiderId != null ? nodeMap.get(guiderId) : null;
+            if (Array.isArray(guiderNode?.inputs)) inputsToScan = guiderNode.inputs;
+            viaBasicGuider = guiderNode?.type === "BasicGuider";
+        }
+        for (const inp of inputsToScan) {
            if (!inp || inp.link == null) continue;
            const originId = linkOrigin.get(inp.link);
            if (originId == null) continue;
-            const text = textMap.get(originId);
-            if (!text) continue;
            const name = inp.name ?? "";
-            if (name === "positive" || name.startsWith("positive")) pos.add(text);
-            else if (name === "negative" || name.startsWith("negative")) neg.add(text);
+            // DualCFGGuider (HiDream E1): cond1 carries the positive-derived conditioning.
+            // BasicGuider (Flux/Ming Image etc., no negative): its single "conditioning" input is positive.
+            const isPos = name === "positive" || name === "cond1" || name.startsWith("positive")
+                || (viaBasicGuider && name === "conditioning");
+            const isNeg = name === "negative" || name.startsWith("negative");
+            if (!isPos && !isNeg) continue;
+            // TextEncodeMageFlowEdit / TextEncodeBooguEdit — one node carries both prompt &
+            // negative_prompt directly, so textMap (single text per node) can't represent both
+            // roles.
+            const srcNode = nodeMap.get(originId);
+            if (srcNode?.type === "TextEncodeMageFlowEdit" || srcNode?.type === "TextEncodeBooguEdit") {
+                const widgetIdx = isPos ? 0 : 1; // widgets_values: [prompt, negative_prompt, ...]
+                const text = srcNode.widgets_values?.[widgetIdx];
+                if (text && typeof text === "string") { if (isPos) pos.add(text); else neg.add(text); }
+                continue;
+            }
+            // InstructPixToPixConditioning (HiDream E1): forwards the actual text-encoder
+            // conditioning through its own positive/negative inputs — follow one more hop.
+            let resolvedOriginId = originId;
+            if (srcNode?.type === "InstructPixToPixConditioning" && Array.isArray(srcNode.inputs)) {
+                const innerInput = srcNode.inputs.find(i => i.name === (isPos ? "positive" : "negative"));
+                if (innerInput?.link != null) {
+                    const innerId = linkOrigin.get(innerInput.link);
+                    if (innerId != null) resolvedOriginId = innerId;
+                }
+            }
+            const text = textMap.get(resolvedOriginId);
+            if (!text) continue;
+            if (isPos) pos.add(text); else neg.add(text);
        }
    }
    if (!foundSampler) return null;
@@ -300,7 +524,8 @@ function extractMarkdownNoteModels(wf) {
 }

 // API形式: リンク参照 [srcNodeId, slot] からテキストを解決
-function resolveLinkedText(wf, srcId, slot) {
+function resolveLinkedText(wf, srcId, slot, depth = 0) {
+    if (depth > 6) return null;
    const src = wf[String(srcId)];
    if (!src || typeof src !== "object") return null;
    const ct = src.class_type ?? "";
@@ -309,13 +534,43 @@ function resolveLinkedText(wf, srcId, slot) {
        const v = slot === 0 ? src.inputs?.text_positive : src.inputs?.text_negative;
        return (v && typeof v === "string") ? v : null;
    }
-    // 汎用テキストキー
+    // LiveChatStream (ComfyUI-LiveChatStream) — 出力(positive/negative/response/chat_p/
+    // chat_n/thinking)は同名+"_text"の非表示ウィジェットの値をそのまま返すだけのノード。
+    // 下の汎用キー探索には引っかからない(prompt_text等は"prompt"等と一致しない)ため個別対応する。
+    // response(LLM応答全文)は数千〜数万文字になり得るが、文字列を返すだけなので問題なく解決できる。
+    if (ct === "LiveChatStream") {
+        const key = LIVE_CHAT_STREAM_OUTPUT_KEYS[slot];
+        const v = key ? src.inputs?.[key] : undefined;
+        return (typeof v === "string" && v) ? v : null;
+    }
+    // ComfySwitchNode ("If/Else Switch", on_false/on_true/switch) — Ernie Imageのプロンプト強化
+    // トグルなどで使われる。片方(TextGenerateなどLLMノード)は静的解決不能なため両方試し、
+    // リテラルへ解決できた方を採用する。
+    if (ct === "ComfySwitchNode") {
+        for (const key of ["on_false", "on_true"]) {
+            const v = src.inputs?.[key];
+            if (Array.isArray(v)) {
+                const text = resolveLinkedText(wf, v[0], v[1] ?? 0, depth + 1);
+                if (text) return text;
+            } else if (typeof v === "string" && v) {
+                return v;
+            }
+        }
+        return null;
+    }
+    // 汎用テキストキー（"value" は PrimitiveString/PrimitiveStringMultiline、"source" は
+    // PreviewAny の値タップ中継、"string_a" は StringConcatenate の主オペランド — いずれも
+    // Krea-2のプロンプト強化配線で使われる中継ノード）
    const keys = slot === 0
-        ? ["text_positive", "text", "text_g", "prompt"]
-        : ["text_negative", "text_l"];
+        ? ["text_positive", "text", "text_g", "prompt", "value", "source", "string_a"]
+        : ["text_negative", "text_l", "source", "string_a"];
    for (const k of keys) {
        const v = src.inputs?.[k];
-        if (v && typeof v === "string") return v;
+        if (typeof v === "string" && v) return v;
+        if (Array.isArray(v)) {
+            const text = resolveLinkedText(wf, v[0], v[1] ?? 0, depth + 1);
+            if (text) return text;
+        }
    }
    return null;
 }
@@ -329,8 +584,30 @@ function extractPromptsAPI(wf) {
    }
    const textMap = new Map();
    for (const [id, n] of Object.entries(wf)) {
-        if (!n || !isTextEncoderNode(n.class_type ?? "")) continue;
-        const raw = n.inputs?.text ?? n.inputs?.text_g ?? null;
+        if (!n) continue;
+        const ct = n.class_type ?? "";
+        if (ct === "CLIPTextEncodeEditPlus") {
+            const resolveField = (key) => {
+                const v = n.inputs?.[key];
+                if (typeof v === "string") return v;
+                if (Array.isArray(v)) return resolveLinkedText(wf, v[0], v[1] ?? 0);
+                return null;
+            };
+            const combined = resolveEditPlusText(n.inputs?.mode, n.inputs?.text_edit, resolveField("text1"), resolveField("text2"));
+            if (combined) textMap.set(id, combined);
+            continue;
+        }
+        // MiniMaxH3ImageToVideo等の動画生成オールインワンノード。CLIPTextEncode等を経由せず
+        // 自ノードの"prompt"入力に直接テキストを持つ(positive/negativeの区別も無い)ため、
+        // isTextEncoderNode判定を通さずtextMapへ直接投入する(fallbackのtextsに載る)。
+        if (typeof n.inputs?.prompt === "string" && /ImageToVideo|TextToVideo/i.test(ct)) {
+            textMap.set(id, n.inputs.prompt);
+            continue;
+        }
+        if (!isTextEncoderNode(ct)) continue;
+        // "prompt" — TextEncodeQwenImageEdit(Plus)/TextEncodeBooguEdit and similar Image Edit
+        // model text encoders use this key instead of "text"/"text_g".
+        const raw = n.inputs?.text ?? n.inputs?.text_g ?? n.inputs?.prompt ?? null;
        if (raw && typeof raw === "string") {
            textMap.set(id, raw);
        } else if (Array.isArray(raw)) {
@@ -344,12 +621,41 @@ function extractPromptsAPI(wf) {
    for (const n of Object.values(wf)) {
        if (!n || !isSamplerNode(n.class_type ?? "")) continue;
        foundSampler = true;
-        for (const [key, val] of Object.entries(n.inputs ?? {})) {
+        // SamplerCustomAdvanced doesn't hold positive/negative directly — it drives a separate
+        // Guider node (CFGGuider/DualCFGGuider/BasicGuider) via its "guider" input. Scan that
+        // node's inputs instead so the loop below can find the positive/negative-role keys.
+        let inputsToScan = n.inputs ?? {};
+        let viaBasicGuider = false;
+        if (Array.isArray(n.inputs?.guider)) {
+            const guiderNode = wf[String(n.inputs.guider[0])];
+            if (guiderNode?.inputs) inputsToScan = guiderNode.inputs;
+            viaBasicGuider = guiderNode?.class_type === "BasicGuider";
+        }
+        for (const [key, val] of Object.entries(inputsToScan)) {
            if (!Array.isArray(val)) continue;
-            const text = textMap.get(String(val[0]));
+            // DualCFGGuider (HiDream E1): cond1 carries the positive-derived conditioning.
+            // BasicGuider (Flux/Ming Image etc., no negative): its single "conditioning" input is positive.
+            const isPos = key === "positive" || key === "cond1" || key.startsWith("positive")
+                || (viaBasicGuider && key === "conditioning");
+            const isNeg = key === "negative" || key.startsWith("negative");
+            if (!isPos && !isNeg) continue;
+            // TextEncodeMageFlowEdit / TextEncodeBooguEdit — one node carries both prompt &
+            // negative_prompt directly, so textMap (single text per node) can't represent both
+            // roles.
+            const srcNode = wf[String(val[0])];
+            if (srcNode?.class_type === "TextEncodeMageFlowEdit" || srcNode?.class_type === "TextEncodeBooguEdit") {
+                const text = isPos ? srcNode.inputs?.prompt : srcNode.inputs?.negative_prompt;
+                if (text && typeof text === "string") { if (isPos) pos.add(text); else neg.add(text); }
+                continue;
+            }
+            // InstructPixToPixConditioning (HiDream E1): forwards the actual text-encoder
+            // conditioning through its own positive/negative inputs — follow one more hop.
+            const resolvedId = srcNode?.class_type === "InstructPixToPixConditioning" && Array.isArray(srcNode.inputs?.[isPos ? "positive" : "negative"])
+                ? String(srcNode.inputs[isPos ? "positive" : "negative"][0])
+                : String(val[0]);
+            const text = textMap.get(resolvedId);
            if (!text) continue;
-            if (key === "positive" || key.startsWith("positive")) pos.add(text);
-            else if (key === "negative" || key.startsWith("negative")) neg.add(text);
+            if (isPos) pos.add(text); else neg.add(text);
        }
    }
    if (!foundSampler || (pos.size === 0 && neg.size === 0)) { const all = [...textMap.values()].filter(t => t && t.trim()); return { positives: [], negatives: [], texts: all }; }
@@ -420,7 +726,7 @@ function extractPromptsLiteGraph(wf) {
 }

 // ── SD/Fooocus prompt extraction ──────────────────────────────
-function parseSDAParameters(raw) {
+export function parseSDAParameters(raw) {
    const text = raw.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
    const stepsMatch = text.match(/\nSteps:\s+\d/);
    if (!stepsMatch) return null;
@@ -438,23 +744,54 @@ function parseSDAParameters(raw) {
    while ((m = re.exec(paramsLine)) !== null) params[m[1].trim()] = m[2].trim().replace(/^"|"$/g, "");
    return { positive, negative, params };
 }
-function parseFooocusMetadata(raw) {
+export function parseFooocusMetadata(raw) {
    let obj; try { obj = JSON.parse(raw); } catch { return null; }
    if (!obj?.base_model) return null;
    const toArray = v => !v ? [] : Array.isArray(v) ? v.filter(Boolean) : [String(v)];
    return { checkpoint: obj.base_model, vae: (obj.vae && obj.vae !== "Default") ? obj.vae : null, positives: toArray(obj.full_prompt ?? obj.prompt), negatives: toArray(obj.full_negative_prompt ?? obj.negative_prompt) };
 }

+// ComfyUIワークフローを持たない画像(A1111/Forge/Fooocus)の埋め込みテキストからプロンプトを取り出す。
+// embedded: PNG tEXt/iTXtのキー→文字列マップ。取り出せなければnull。
+export function extractPromptsFromParameters(embedded) {
+    const raw = embedded?.parameters;
+    if (!raw || typeof raw !== "string") return null;
+    if (embedded.fooocus_scheme === "fooocus") {
+        const f = parseFooocusMetadata(raw);
+        return f ? { positives: f.positives, negatives: f.negatives, texts: [] } : null;
+    }
+    const p = parseSDAParameters(raw);
+    if (!p) return null;
+    return { positives: p.positive ? [p.positive] : [], negatives: p.negative ? [p.negative] : [], texts: [] };
+}
+
 // ── Master extractAllMetadata ─────────────────────────────────
-async function extractAllMetadata(file) {
+export async function extractAllMetadata(file) {
    const name = file.name.toLowerCase();
    const isJSON = file.type === "application/json" || name.endsWith(".json");
    const isWebP = file.type === "image/webp" || name.endsWith(".webp");
+    const isMP4 = file.type === "video/mp4" || name.endsWith(".mp4");

-    function fromWorkflow(wf, source) {
-        const base = { source, checkpoints: extractCheckpoints(wf), vaes: extractVAEs(wf), diffusionModels: extractDiffusionModels(wf), textEncoders: extractTextEncoders(wf), loras: extractLoRAs(wf), ...extractPrompts(wf) };
-        // MarkdownNote からモデル情報を補完（subgraph形式の flux/qwen/z-image など）
-        const mdm = extractMarkdownNoteModels(wf);
+    async function fromWorkflow(originalWf, source) {
+        let wf = originalWf;
+        let apiWf = Array.isArray(wf?.nodes) ? null : wf;
+        // サブグラフを持つワークフローは、外側のサブグラフノードに実際に設定された値
+        // (ユーザーが見ている値)が内部ノードのwidgets_valuesへ反映されていないことがある
+        // (テンプレートの古いデフォルト値のまま)。convertUiToApi() はこの注入も含めて
+        // 正しく解決するため、そちらを経由してから抽出する。通常のワークフローには影響しない。
+        if (Array.isArray(wf?.nodes)) {
+            try {
+                const converted = await comfyWorkflow.convertUiToApi(wf, { readOnly: true });
+                if (converted && Object.keys(converted).length > 0) {
+                    apiWf = converted;
+                    if (wf.definitions?.subgraphs?.length > 0) wf = converted;
+                }
+            } catch { /* 変換失敗時は元のUI形式のまま抽出（既存ロジックにフォールバック） */ }
+        }
+        const base = { source, checkpoints: extractCheckpoints(wf), vaes: extractVAEs(wf), diffusionModels: extractDiffusionModels(wf), textEncoders: extractTextEncoders(wf), loras: extractLoRAs(wf), samplerSettings: extractSamplerSettings(apiWf), ...extractPrompts(wf) };
+        // MarkdownNote からモデル情報を補完（subgraph形式の flux/qwen/z-image など）。
+        // API変換後は nodes 情報が失われるため、常に元のUI形式ワークフローから抽出する。
+        const mdm = extractMarkdownNoteModels(originalWf);
        if (mdm) {
            if (!base.checkpoints.length) base.checkpoints = mdm.checkpoints;
            if (!base.vaes.length) base.vaes = mdm.vaes;
@@ -467,20 +804,31 @@ async function extractAllMetadata(file) {

    if (isJSON) {
        let wf; try { wf = JSON.parse(sanitizeJSON(await file.text())); } catch { return null; }
-        return wf ? fromWorkflow(wf, "comfyui") : null;
+        return wf ? await fromWorkflow(wf, "comfyui") : null;
    }
    if (isWebP) {
        const exif = await readWebPEXIFChunk(file);
        if (!exif) return null;
        const wf = extractWorkflowFromEXIF(exif);
-        return wf ? fromWorkflow(wf, "comfyui") : null;
+        return wf ? await fromWorkflow(wf, "comfyui") : null;
+    }
+    if (isMP4) {
+        let tags; try { tags = await readMP4MetaTags(file); } catch { return null; }
+        if (!tags) return null;
+        for (const key of ["prompt", "workflow"]) {
+            const raw = tags[key];
+            if (!raw) continue;
+            let wf; try { wf = JSON.parse(sanitizeJSON(raw)); } catch { continue; }
+            if (wf) return await fromWorkflow(wf, "comfyui");
+        }
+        return null;
    }
    // PNG
    const chunks = await readAllPNGTextChunks(file);
    if (!chunks) return null;

-    if (chunks.prompt) { let wf; try { wf = JSON.parse(sanitizeJSON(chunks.prompt)); } catch { return null; } return wf ? fromWorkflow(wf, "comfyui") : null; }
-    if (chunks.workflow) { let wf; try { wf = JSON.parse(sanitizeJSON(chunks.workflow)); } catch { return null; } return wf ? fromWorkflow(wf, "comfyui") : null; }
+    if (chunks.prompt) { let wf; try { wf = JSON.parse(sanitizeJSON(chunks.prompt)); } catch { return null; } return wf ? await fromWorkflow(wf, "comfyui") : null; }
+    if (chunks.workflow) { let wf; try { wf = JSON.parse(sanitizeJSON(chunks.workflow)); } catch { return null; } return wf ? await fromWorkflow(wf, "comfyui") : null; }

    if (chunks.fooocus_scheme === "fooocus" && chunks.parameters) {
        const f = parseFooocusMetadata(chunks.parameters);
@@ -524,7 +872,7 @@ function buildLoRAItem(lora) {
    return el;
 }

-function buildPromptItem(label, type, full, fullArea, fullLabel, listEl) {
+export function buildPromptItem(label, type, full, fullArea, fullLabel, listEl) {
    const el = document.createElement("div");
    el.className = "wfm-meta-item wfm-meta-item-clickable";
    const snippet = label.length > 60 ? label.slice(0, 60) + "…" : label;
@@ -553,10 +901,13 @@ function renderSection(sectionEl, listEl, items, buildFn) {
 // ── External API ──────────────────────────────────────────────
 let _externalHandleFile = null;

-export async function loadFileIntoMetadataTab(file) {
-    document.querySelector('.wfm-tab[data-tab="metadata"]')?.click();
+// path: Gallery上のサーバーファイルパス(任意)。渡された場合、/wfm/gallery/image/meta から
+// 幅・高さやnanobanana履歴(cc_nanobananaフォルダの画像のみ)を補って表示する。
+export async function loadFileIntoMetadataTab(file, path) {
+    document.querySelector('.wfm-tab[data-tab="gallery"]')?.click();
+    document.querySelector('.wfm-gallery-subtab-btn[data-gallery-subtab="metadata"]')?.click();
    await new Promise(r => setTimeout(r, 0));
-    if (_externalHandleFile) await _externalHandleFile(file);
+    if (_externalHandleFile) await _externalHandleFile(file, path);
 }

 // ── Tab initialization ────────────────────────────────────────
@@ -583,6 +934,26 @@ export function initMetadataTab() {
    const promptFull = document.getElementById("wfm-meta-prompt-full");
    const promptFullLabel = document.getElementById("wfm-meta-prompt-full-label");

+    // Settings (画像サイズ・KSampler設定値) / Nanobanana履歴
+    const settingsSection = document.getElementById("wfm-meta-settings-section");
+    const setSize = document.getElementById("wfm-meta-set-size");
+    const setSeed = document.getElementById("wfm-meta-set-seed");
+    const setSteps = document.getElementById("wfm-meta-set-steps");
+    const setCfg = document.getElementById("wfm-meta-set-cfg");
+    const setSampler = document.getElementById("wfm-meta-set-sampler");
+    const setScheduler = document.getElementById("wfm-meta-set-scheduler");
+    const setDenoise = document.getElementById("wfm-meta-set-denoise");
+
+    const nbSection = document.getElementById("wfm-meta-nb-section");
+    const nbEngine = document.getElementById("wfm-meta-nb-engine");
+    const nbModel = document.getElementById("wfm-meta-nb-model");
+    const nbSize = document.getElementById("wfm-meta-nb-size");
+    const nbSeed = document.getElementById("wfm-meta-nb-seed");
+    const nbTimestamp = document.getElementById("wfm-meta-nb-timestamp");
+    const nbPrompt = document.getElementById("wfm-meta-nb-prompt");
+    const nbNegSection = document.getElementById("wfm-meta-nb-negative-section");
+    const nbNegative = document.getElementById("wfm-meta-nb-negative");
+
    if (!dropZone) return;

    // Apply i18n to section titles
@@ -593,6 +964,8 @@ export function initMetadataTab() {
        "wfm-meta-te-section": "metaSectionTe",
        "wfm-meta-lora-section": "metaSectionLora",
        "wfm-meta-prompt-section": "metaSectionPrompt",
+        "wfm-meta-settings-section": "metaSectionSettings",
+        "wfm-meta-nb-section": "metaSectionNanobanana",
    };
    for (const [id, key] of Object.entries(titleMap)) {
        const title = document.querySelector(`#${id} .wfm-meta-section-title`);
@@ -621,6 +994,8 @@ export function initMetadataTab() {
        "wfm-help-metadata-3": "helpMetadata3",
        "wfm-help-metadata-4": "helpMetadata4",
        "wfm-help-metadata-5": "helpMetadata5",
+        "wfm-help-metadata-6": "helpMetadata6",
+        "wfm-help-metadata-7": "helpMetadata7",
    };
    for (const [id, key] of Object.entries(helpIds)) {
        const el = document.getElementById(id);
@@ -632,10 +1007,70 @@ export function initMetadataTab() {
        [ckptSection, vaeSection, diffSection, teSection, loraSection, promptSection].forEach(s => { if (s) s.classList.add("wfm-meta-section-empty"); });
        if (promptFull) promptFull.value = "";
        if (promptFullLabel) promptFullLabel.textContent = "";
+        renderSettings(null, null);
+        renderNanobanana(null);
    }

-    async function handleFile(file) {
+    // ── Settings (画像サイズ・KSampler設定) ─────────────────────
+    function setRow(el, label, value) {
+        if (!el) return;
+        el.textContent = (value !== undefined && value !== null && value !== "") ? `${label}: ${value}` : "";
+    }
+
+    function renderSettings(samplerSettings, dims) {
+        setRow(setSize, t("metaSettingsSize") || "Size", dims?.width && dims?.height ? `${dims.width}×${dims.height}` : "");
+        const s = samplerSettings ?? {};
+        setRow(setSeed, t("metaSettingsSeed") || "Seed", s.seed ?? s.noise_seed);
+        setRow(setSteps, t("metaSettingsSteps") || "Steps", s.steps);
+        setRow(setCfg, t("metaSettingsCfg") || "CFG", s.cfg);
+        setRow(setSampler, t("metaSettingsSampler") || "Sampler", s.sampler_name);
+        setRow(setScheduler, t("metaSettingsScheduler") || "Scheduler", s.scheduler);
+        setRow(setDenoise, t("metaSettingsDenoise") || "Denoise", s.denoise);
+        const hasAny = (dims?.width && dims?.height) || Object.keys(s).length > 0;
+        if (settingsSection) settingsSection.style.display = hasAny ? "" : "none";
+    }
+
+    // ── Nanobanana履歴(cc_nanobananaフォルダの画像のみ、Galleryから開いた場合に表示) ──
+    function renderNanobanana(entry) {
+        if (!nbSection) return;
+        if (!entry) {
+            nbSection.style.display = "none";
+            return;
+        }
+        nbSection.style.display = "";
+        setRow(nbEngine, t("metaNbEngine") || "Engine", entry.engine);
+        setRow(nbModel, t("metaNbModel") || "Model", entry.model);
+        const size = entry.image_size || (entry.width && entry.height ? `${entry.width}×${entry.height}` : "");
+        setRow(nbSize, t("metaNbSize") || "Size", size);
+        setRow(nbSeed, t("metaNbSeed") || "Seed", entry.seed != null ? String(entry.seed) : "");
+        setRow(nbTimestamp, t("metaNbTimestamp") || "Date", entry.timestamp);
+        if (nbPrompt) nbPrompt.value = entry.prompt || "";
+        if (nbNegSection && nbNegative) {
+            if (entry.negative_prompt) { nbNegative.value = entry.negative_prompt; nbNegSection.style.display = ""; }
+            else { nbNegative.value = ""; nbNegSection.style.display = "none"; }
+        }
+    }
+
+    // path指定時、サーバーの /wfm/gallery/image/meta から幅・高さとnanobanana履歴を取得する
+    // (Galleryタブから「Metadata」ボタンで開いた場合のみ渡される。ドラッグ&ドロップされた
+    // 任意ファイルはブラウザ上のFileオブジェクトのみでサーバーパスを持たないため対象外)。
+    async function fetchServerMeta(path) {
+        if (!path) return null;
+        try {
+            const res = await fetch(`/wfm/gallery/image/meta?path=${encodeURIComponent(path)}`);
+            if (!res.ok) return null;
+            const json = await res.json();
+            return json.error ? null : json;
+        } catch {
+            return null;
+        }
+    }
+
+    // 連続で画像を開いたとき、先に始めた処理が後から描画して結果が混ざるのを防ぐ
+    let _loadSeq = 0;
+    async function handleFile(file, path) {
        if (!file) return;
+        const seq = ++_loadSeq;
        if (file.size > MAX_FILE_SIZE) {
            fileInfo.textContent = t("metaFileTooLarge");
            fileInfo.style.color = "var(--wfm-warning)";
@@ -646,32 +1081,60 @@ export function initMetadataTab() {
        fileInfo.style.color = "var(--wfm-text-secondary)";
        clearAll();

+        const serverMeta = await fetchServerMeta(path);
+        if (seq !== _loadSeq) return;
+
        // Show preview for images
        const isImage = file.type.startsWith("image/") || file.name.toLowerCase().match(/\.(png|webp|jpg|jpeg)$/);
+        let naturalDims = null;
        if (isImage) {
            const url = URL.createObjectURL(file);
            previewImg.src = url;
            previewImg.style.display = "block";
            dropLabel.style.display = "none";
-            previewImg.onload = () => URL.revokeObjectURL(url);
+            await new Promise(resolve => {
+                previewImg.onload = () => {
+                    naturalDims = { width: previewImg.naturalWidth, height: previewImg.naturalHeight };
+                    URL.revokeObjectURL(url);
+                    resolve();
+                };
+                previewImg.onerror = resolve;
+            });
        } else {
            previewImg.style.display = "none";
            dropLabel.style.display = "flex";
        }

+        if (seq !== _loadSeq) return;
+        const dims = (serverMeta?.width && serverMeta?.height) ? serverMeta : naturalDims;
+        renderNanobanana(serverMeta?.nanobanana ?? null);
+
        let meta;
        try {
            meta = await extractAllMetadata(file);
        } catch (err) {
+            if (seq !== _loadSeq) return;
            console.error("[MetadataTab]", err);
            fileInfo.textContent = t("metaParseError");
            fileInfo.style.color = "var(--wfm-danger)";
+            renderSettings(null, dims);
            return;
        }

+        if (seq !== _loadSeq) return;
        if (!meta) {
-            fileInfo.textContent = t("metaNoMetadata");
-            fileInfo.style.color = "var(--wfm-warning)";
+            // nanobanana(Gemini API経由)の画像はComfyUIワークフローを埋め込んでいないため
+            // extractAllMetadataはnullを返す。その場合でもnanobanana履歴があれば
+            // 「メタデータ無し」エラーにせず、画像サイズのみSettingsに表示する。
+            if (serverMeta?.nanobanana) {
+                const sizeKB = (file.size / 1024).toFixed(1);
+                fileInfo.textContent = `${file.name}  (${sizeKB} KB · Nanobanana)`;
+                fileInfo.style.color = "var(--wfm-text-secondary)";
+            } else {
+                fileInfo.textContent = t("metaNoMetadata");
+                fileInfo.style.color = "var(--wfm-warning)";
+            }
+            renderSettings(null, dims);
            return;
        }

@@ -685,6 +1148,7 @@ export function initMetadataTab() {
        renderSection(diffSection, diffList, meta.diffusionModels, n => buildModelItem(n));
        renderSection(teSection, teList, meta.textEncoders, n => buildModelItem(n));
        renderSection(loraSection, loraList, meta.loras, l => buildLoRAItem(l));
+        renderSettings(meta.samplerSettings, dims);

        // Prompts
        promptList.innerHTML = "";
@@ -0,0 +1,136 @@
+/**
+ * Models Tab - Auto badges from CivitAI base model info
+ *
+ * CivitAI's `baseModel` is already a categorical string, so labels are derived
+ * with a deterministic rule table (variants such as "SDXL 1.0" / "SDXL Turbo"
+ * collapse into one family badge). Unknown strings fall back to the raw value.
+ * Apply semantics: model badges are appended (existing badges are kept);
+ * a label already in the palette gets its color overwritten (optional).
+ */
+
+import { openModal, closeModal, showToast } from "../app.js";
+import { t } from "../i18n.js";
+import { escapeHtml } from "../util.js";
+import { state } from "./state.js";
+import { getCurrentModels } from "./filters.js";
+import { getBadgePalette, saveBadgePalette, renderBadgeFilter } from "./badges.js";
+import { renderModelGrid } from "./grid-view.js";
+import { saveModelMetadata } from "../models-tab.js";
+
+// [pattern, label, color] — first match wins, so specific families come first.
+const FAMILY_RULES = [
+    [/^pony/i, "Pony", "#d946ef"],
+    [/^illustrious/i, "Illustrious", "#f59e0b"],
+    [/^noobai/i, "NoobAI", "#14b8a6"],
+    [/^sdxl|^sd ?xl/i, "SDXL", "#3b82f6"],
+    [/^sd ?1\.[45]/i, "SD1.5", "#22c55e"],
+    [/^sd ?2/i, "SD2", "#84cc16"],
+    [/^sd ?3/i, "SD3", "#06b6d4"],
+    [/^flux\.?1|^flux$/i, "Flux.1", "#ef4444"],
+    [/^flux\.?2/i, "Flux.2", "#dc2626"],
+    [/^qwen/i, "Qwen", "#8b5cf6"],
+    [/^wan/i, "Wan", "#0ea5e9"],
+    [/^z-?image/i, "Z-Image", "#ec4899"],
+    [/^hidream/i, "HiDream", "#f97316"],
+    [/^hunyuan/i, "Hunyuan", "#6366f1"],
+    [/^chroma/i, "Chroma", "#a855f7"],
+    [/^lumina/i, "Lumina", "#10b981"],
+    [/^auraflow/i, "AuraFlow", "#64748b"],
+    [/^kolors/i, "Kolors", "#e11d48"],
+];
+const SKIP_VALUES = new Set(["", "other", "unknown"]);
+const FALLBACK_COLORS = ["#0891b2", "#7c3aed", "#be185d", "#b45309", "#4d7c0f", "#475569"];
+
+export function baseModelToBadge(baseModel) {
+    const raw = (baseModel || "").trim();
+    if (SKIP_VALUES.has(raw.toLowerCase())) return null;
+    for (const [re, label, color] of FAMILY_RULES) {
+        if (re.test(raw)) return { label, color };
+    }
+    let h = 0;
+    for (const ch of raw) h = (h * 31 + ch.charCodeAt(0)) >>> 0;
+    return { label: raw, color: FALLBACK_COLORS[h % FALLBACK_COLORS.length] };
+}
+
+/** Scan current-type models → { assignments: [{model, label}], labels: Map(label → {color, count}) } */
+function buildPlan() {
+    const assignments = [];
+    const labels = new Map();
+    let noInfo = 0;
+    for (const m of getCurrentModels()) {
+        const sha = state.modelMetadata[m]?.sha256;
+        const civ = sha && state.civitaiCache[sha];
+        const badge = civ ? baseModelToBadge(civ.baseModel) : null;
+        if (!badge) { noInfo++; continue; }
+        assignments.push({ model: m, label: badge.label });
+        const entry = labels.get(badge.label) || { color: badge.color, count: 0 };
+        entry.count++;
+        labels.set(badge.label, entry);
+    }
+    return { assignments, labels, noInfo };
+}
+
+export function openAutoBadgeModal(onDone = null) {
+    const { assignments, labels, noInfo } = buildPlan();
+    if (assignments.length === 0) {
+        showToast(t("autoBadgeNoData"), "warning");
+        return;
+    }
+    const palette = getBadgePalette();
+    const rows = [...labels.entries()].sort((a, b) => b[1].count - a[1].count).map(([label, info]) => {
+        const exists = label in palette;
+        return `<div class="wfm-badge-color-row">
+            <span class="wfm-badge wfm-badge-model" style="background:${info.color};color:#fff;">${escapeHtml(label)}</span>
+            <span style="font-size:12px;">${info.count}</span>
+            <span style="font-size:11px;color:var(--wfm-text-secondary);">${exists ? t("autoBadgeExisting") : t("autoBadgeNew")}</span>
+        </div>`;
+    }).join("");
+
+    openModal(t("autoBadgeTitle"), `
+        <div style="min-width:340px;">
+            <p style="font-size:12px;color:var(--wfm-text-secondary);margin:0 0 8px;">${t("autoBadgeDesc")}</p>
+            ${rows}
+            <p style="font-size:11px;color:var(--wfm-text-secondary);">${t("autoBadgeNoInfo")}: ${noInfo}</p>
+            <label style="font-size:12px;display:block;margin:8px 0;">
+                <input type="checkbox" id="wfm-auto-badge-overwrite" checked> ${t("autoBadgeOverwrite")}
+            </label>
+            <label style="font-size:12px;display:block;margin:8px 0;">
+                <input type="checkbox" id="wfm-auto-badge-skip"> ${t("autoBadgeSkipExisting")}
+            </label>
+            <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-auto-badge-apply">${t("autoBadgeApply")} (${assignments.length})</button>
+        </div>`);
+
+    const hasBadges = (m) => (state.modelMetadata[m]?.badges || []).length > 0;
+    const targets = () => document.getElementById("wfm-auto-badge-skip")?.checked
+        ? assignments.filter(({ model }) => !hasBadges(model)) : assignments;
+    document.getElementById("wfm-auto-badge-skip")?.addEventListener("change", () => {
+        const btn = document.getElementById("wfm-auto-badge-apply");
+        if (btn) btn.textContent = `${t("autoBadgeApply")} (${targets().length})`;
+    });
+
+    document.getElementById("wfm-auto-badge-apply")?.addEventListener("click", async (e) => {
+        e.target.disabled = true;
+        const overwrite = document.getElementById("wfm-auto-badge-overwrite")?.checked;
+        const target = targets();
+        const pal = getBadgePalette();
+        const usedLabels = new Set(target.map((a) => a.label));
+        for (const [label, info] of labels) {
+            if (!usedLabels.has(label)) continue;
+            if (!(label in pal) || overwrite) pal[label] = info.color;
+        }
+        saveBadgePalette(pal);
+
+        const todo = target.filter(({ model, label }) => !(state.modelMetadata[model]?.badges || []).includes(label));
+        for (let i = 0; i < todo.length; i += 8) {
+            await Promise.all(todo.slice(i, i + 8).map(({ model, label }) => {
+                const badges = [...(state.modelMetadata[model]?.badges || []), label];
+                return saveModelMetadata(model, { badges });
+            }));
+        }
+        renderBadgeFilter();
+        renderModelGrid();
+        showToast(`${todo.length} ${t("autoBadgeDone")}`, "success");
+        closeModal();
+        if (onDone) onDone();
+    });
+}
@@ -0,0 +1,167 @@
+/**
+ * Models Tab - Badge palette, badge rendering, badge edit modal, badge filter bar
+ */
+
+import { openModal } from "../app.js";
+import { t } from "../i18n.js";
+import { escapeHtml, readJsonStorage } from "../util.js";
+import { state } from "./state.js";
+import { openAutoBadgeModal } from "./auto-badge.js";
+
+// Grid re-render is owned by models-tab.js (grid rendering hasn't been split
+// out yet); registered once from initModelsTab() to avoid a circular import.
+let _onGridChange = () => {};
+export function setGridChangeCallback(fn) { _onGridChange = fn; }
+
+export function getBadgePalette() {
+    return readJsonStorage("wfm_models_badge_palette");
+}
+
+export function saveBadgePalette(palette) {
+    localStorage.setItem("wfm_models_badge_palette", JSON.stringify(palette));
+}
+
+export function badgeHtml(label) {
+    const palette = getBadgePalette();
+    const color = palette[label] || "";
+    const style = color ? ` style="background:${color};color:#fff;"` : "";
+    return `<span class="wfm-badge wfm-badge-model"${style}>${escapeHtml(label)}</span>`;
+}
+
+export function modelBadgesHtml(modelName, clickable = false) {
+    const meta = state.modelMetadata[modelName] || {};
+    const badges = meta.badges || [];
+    if (badges.length === 0) return "";
+    return badges.map((label) => {
+        const palette = getBadgePalette();
+        const color = palette[label] || "";
+        const style = color ? ` style="background:${color};color:#fff;"` : "";
+        const dataAttr = clickable ? ` data-badge-filter="${escapeHtml(label)}"` : "";
+        return `<span class="wfm-badge wfm-badge-model${clickable ? " wfm-badge-clickable" : ""}"${style}${dataAttr}>${escapeHtml(label)}</span>`;
+    }).join("");
+}
+
+export function openBadgeEditModal(onPaletteChange = null) {
+    const palette = getBadgePalette();
+    const labels = Object.keys(palette).sort();
+
+    const rowsHtml = labels.map((label) => {
+        const color = palette[label] || "#6366f1";
+        return `<div class="wfm-badge-color-row" data-badge-label="${escapeHtml(label)}">
+            ${badgeHtml(label)}
+            <input type="color" value="${color}" data-badge-label="${escapeHtml(label)}" class="wfm-badge-color-input" title="${t("badgeColorHint")}">
+            <button class="wfm-btn wfm-btn-sm wfm-btn-danger wfm-badge-delete-btn" data-badge-label="${escapeHtml(label)}" title="${t("badgeDelete")}">&times;</button>
+        </div>`;
+    }).join("");
+
+    const html = `
+        <div style="min-width:320px;">
+            <div id="wfm-badge-list">${rowsHtml || `<p style="color:var(--wfm-text-secondary);font-size:12px;">${t("badgeNone")}</p>`}</div>
+            <div style="border-top:1px solid var(--wfm-border);margin-top:12px;padding-top:12px;display:flex;gap:6px;align-items:center;">
+                <input type="text" id="wfm-badge-new-label" class="wfm-input" style="flex:1;" placeholder="${t("badgeNewLabel")}">
+                <input type="color" id="wfm-badge-new-color" value="#6366f1" style="width:36px;height:28px;padding:1px;border-radius:4px;cursor:pointer;">
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-badge-add-btn">${t("badgeAdd")}</button>
+            </div>
+            <div style="margin-top:8px;">
+                <button class="wfm-btn wfm-btn-sm" id="wfm-badge-auto-btn" title="${t("autoBadgeDesc")}">&#10024; ${t("autoBadgeTitle")}</button>
+            </div>
+        </div>`;
+
+    openModal(t("badgeManage"), html);
+    bindBadgeModalEvents(onPaletteChange);
+}
+
+function bindBadgeModalEvents(onPaletteChange = null) {
+    const afterChange = () => {
+        renderBadgeFilter();
+        _onGridChange();
+        if (onPaletteChange) onPaletteChange();
+    };
+
+    const refreshList = () => {
+        const palette = getBadgePalette();
+        const labels = Object.keys(palette).sort();
+        const listEl = document.getElementById("wfm-badge-list");
+        if (!listEl) return;
+        listEl.innerHTML = labels.map((label) => {
+            const color = palette[label] || "#6366f1";
+            return `<div class="wfm-badge-color-row" data-badge-label="${escapeHtml(label)}">
+                ${badgeHtml(label)}
+                <input type="color" value="${color}" data-badge-label="${escapeHtml(label)}" class="wfm-badge-color-input" title="${t("badgeColorHint")}">
+                <button class="wfm-btn wfm-btn-sm wfm-btn-danger wfm-badge-delete-btn" data-badge-label="${escapeHtml(label)}" title="${t("badgeDelete")}">&times;</button>
+            </div>`;
+        }).join("") || `<p style="color:var(--wfm-text-secondary);font-size:12px;">${t("badgeNone")}</p>`;
+        bindBadgeRowEvents(refreshList, afterChange);
+        afterChange();
+    };
+
+    bindBadgeRowEvents(refreshList, afterChange);
+
+    document.getElementById("wfm-badge-auto-btn")?.addEventListener("click", () => {
+        openAutoBadgeModal(onPaletteChange);
+    });
+
+    document.getElementById("wfm-badge-add-btn")?.addEventListener("click", () => {
+        const labelInput = document.getElementById("wfm-badge-new-label");
+        const colorInput = document.getElementById("wfm-badge-new-color");
+        const label = labelInput?.value.trim();
+        if (!label) return;
+        const palette = getBadgePalette();
+        palette[label] = colorInput?.value || "#6366f1";
+        saveBadgePalette(palette);
+        if (labelInput) labelInput.value = "";
+        refreshList();
+    });
+}
+
+function bindBadgeRowEvents(refreshList, afterChange = null) {
+    document.querySelectorAll(".wfm-badge-color-input").forEach((input) => {
+        input.addEventListener("input", (e) => {
+            const label = e.target.dataset.badgeLabel;
+            const palette = getBadgePalette();
+            palette[label] = e.target.value;
+            saveBadgePalette(palette);
+            refreshList();
+        });
+    });
+    document.querySelectorAll(".wfm-badge-delete-btn").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const label = btn.dataset.badgeLabel;
+            const palette = getBadgePalette();
+            delete palette[label];
+            saveBadgePalette(palette);
+            refreshList();
+        });
+    });
+}
+
+// ── Badge Filter Bar ──────────────────────────────────────
+
+export function renderBadgeFilter() {
+    const container = document.getElementById("wfm-models-badge-filter-bar");
+    if (!container) return;
+    const palette = getBadgePalette();
+    const labels = Object.keys(palette).sort();
+
+    if (labels.length === 0) {
+        container.innerHTML = "";
+        return;
+    }
+
+    container.innerHTML = labels.map((label) => {
+        const color = palette[label] || "";
+        const isActive = state.badgeFilter === label;
+        const style = color ? `background:${color};color:#fff;` : "";
+        return `<button class="wfm-badge-filter-btn${isActive ? " active" : ""}" data-badge="${escapeHtml(label)}" style="${style}">${escapeHtml(label)}</button>`;
+    }).join("");
+
+    container.querySelectorAll(".wfm-badge-filter-btn").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const label = btn.dataset.badge;
+            state.badgeFilter = state.badgeFilter === label ? "" : label;
+            state.currentPage = 0;
+            renderBadgeFilter();
+            _onGridChange();
+        });
+    });
+}
@@ -0,0 +1,886 @@
+/**
+ * Models Tab - Detail modal (double-click) and the side panel's
+ * Info / Group / CivitAI tabs.
+ *
+ * Part of the grid-view.js / selection-bulk.js / detail-panel.js circular
+ * import triangle — see the note at the top of grid-view.js.
+ */
+
+import { showToast, openModal, closeModal } from "../app.js";
+import { t } from "../i18n.js";
+import { escapeHtml, sanitizeHtml, safeHttpUrl } from "../util.js";
+import { state, RESERVED_GROUPS, GENUI_TYPE_MAP } from "./state.js";
+import { getCurrentModels, renderTagFilter, renderDirFilter } from "./filters.js";
+import { getBadgePalette, modelBadgesHtml, openBadgeEditModal } from "./badges.js";
+import { parseModelPath, getExtension, getStem, loadPreviewImage, previewUrl, markHasPreview, fetchPreviewKeys } from "./helpers.js";
+import { renderModelGrid } from "./grid-view.js";
+import {
+    applyToGenUI, applyEmbeddingToPrompt, saveModelMetadata, toggleGroupEnable,
+    fetchModelMetadata, saveModelGroups,
+} from "../models-tab.js";
+
+// ── Detail Modal (double-click, with badges) ──────────────
+
+export function openDetailModal(modelName) {
+    const meta = state.modelMetadata[modelName] || {};
+    const { dir, name } = parseModelPath(modelName);
+    const ext = getExtension(name);
+    const isFav = !!meta.favorite;
+    const tagsStr = (meta.tags || []).join(", ");
+    const selectedBadges = meta.badges || [];
+    const palette = getBadgePalette();
+    const allBadgeLabels = Object.keys(palette).sort();
+
+    const badgeCheckboxes = allBadgeLabels.map((label) => {
+        const checked = selectedBadges.includes(label) ? " checked" : "";
+        const color = palette[label] || "";
+        const style = color ? `background:${color};color:#fff;` : "";
+        return `<label class="wfm-badge-check-label">
+            <input type="checkbox" class="wfm-badge-checkbox" value="${escapeHtml(label)}"${checked}>
+            <span class="wfm-badge wfm-badge-model" style="${style}">${escapeHtml(label)}</span>
+        </label>`;
+    }).join("");
+
+    const html = `
+        <div class="wfm-modal-thumb-section">
+            <img class="wfm-modal-thumb-img" style="display:none" />
+            <div class="wfm-modal-thumb-placeholder">${t("modelsNoPreview")}</div>
+        </div>
+        <div style="text-align:center;margin-bottom:8px;">
+            <button class="wfm-btn wfm-btn-sm" id="wfm-modal-change-thumb">${t("changeThumbnail")}</button>
+            <input type="file" id="wfm-modal-thumb-file" accept="image/*" style="display:none">
+        </div>
+        <div class="wfm-modal-two-col">
+            <div class="wfm-modal-left">
+                <section>
+                    <h4>${t("modelsInfo")}</h4>
+                    <div><span class="wfm-badge wfm-badge-sm">${escapeHtml(ext)}</span>${dir ? ` <span class="wfm-badge wfm-badge-sm wfm-badge-dir">${escapeHtml(dir)}</span>` : ""}</div>
+                </section>
+                <section>
+                    <h4>${t("modelsBadges")} <button class="wfm-btn wfm-btn-sm" id="wfm-modal-badge-manage" style="margin-left:6px;font-size:10px;">&#9881; ${t("badgeManage")}</button></h4>
+                    <div id="wfm-modal-badge-checkboxes" class="wfm-badge-checkboxes">
+                        ${allBadgeLabels.length === 0
+                            ? `<span style="color:var(--wfm-text-secondary);font-size:12px;">${t("badgeNoneHint")}</span>`
+                            : badgeCheckboxes}
+                    </div>
+                </section>
+                <section>
+                    <h4>${t("modelsTags")} <span style="font-weight:normal;font-size:11px;">${t("modelsTagsHint")}</span></h4>
+                    <input type="text" class="wfm-input" id="wfm-modal-model-tags" value="${escapeHtml(tagsStr)}" placeholder="${t("modelsTagsPlaceholder")}">
+                </section>
+                <section>
+                    <h4>${t("modelsMemo")}</h4>
+                    <textarea class="wfm-textarea" id="wfm-modal-model-memo" rows="4" placeholder="${t("modelsMemoPlaceholder")}">${escapeHtml(meta.memo || "")}</textarea>
+                </section>
+                <div class="wfm-modal-actions">
+                    <button class="wfm-btn wfm-btn-primary wfm-btn-sm" id="wfm-modal-model-save">${t("modelsSave")}</button>
+                    ${state.activeModelType === "embedding"
+                        ? `<button class="wfm-btn wfm-btn-sm" id="wfm-modal-genui-pp" title="Positive Promptにエンベッディング追加">GenUI PP</button>
+                           <button class="wfm-btn wfm-btn-sm" id="wfm-modal-genui-np" title="Negative Promptにエンベッディング追加">GenUI NP</button>`
+                        : (GENUI_TYPE_MAP[state.activeModelType]
+                            ? `<button class="wfm-btn wfm-btn-sm" id="wfm-modal-genui-model" title="${t("modelsGenUITitle")}">${t("modelsGenUIBtn")}</button>`
+                            : "")}
+                    <button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-modal-model-delete" style="margin-left:auto;">${t("modelsDelete")}</button>
+                    <button class="wfm-btn wfm-btn-sm" id="wfm-modal-model-close">${t("close")}</button>
+                </div>
+            </div>
+        </div>`;
+
+    openModal(getStem(name), html);
+
+    // Load preview image
+    const modalImg = document.querySelector(".wfm-modal-thumb-img");
+    const modalPlaceholder = document.querySelector(".wfm-modal-thumb-placeholder");
+    if (modalImg) loadPreviewImage(modalImg, modalPlaceholder, modelName);
+
+    // Add favorite button in header
+    const titleEl = document.getElementById("wfm-modal-title");
+    if (titleEl) {
+        titleEl.parentNode.querySelectorAll(".wfm-fav-btn").forEach((el) => el.remove());
+        const favBtn = document.createElement("button");
+        favBtn.className = isFav ? "wfm-fav-btn active" : "wfm-fav-btn";
+        favBtn.style.cssText = "position:static;font-size:18px;margin-right:8px;";
+        favBtn.textContent = isFav ? "★" : "☆";
+        favBtn.addEventListener("click", async () => {
+            const newVal = !meta.favorite;
+            await saveModelMetadata(modelName, { favorite: newVal });
+            meta.favorite = newVal;
+            favBtn.textContent = newVal ? "★" : "☆";
+            favBtn.classList.toggle("active", newVal);
+            renderModelGrid();
+        });
+        titleEl.parentNode.insertBefore(favBtn, titleEl);
+    }
+
+    // Badge manage button → open badge edit modal
+    document.getElementById("wfm-modal-badge-manage")?.addEventListener("click", () => {
+        openBadgeEditModal();
+    });
+
+    // Save
+    document.getElementById("wfm-modal-model-save")?.addEventListener("click", async () => {
+        const tagsInput = document.getElementById("wfm-modal-model-tags");
+        const memoInput = document.getElementById("wfm-modal-model-memo");
+        const tags = tagsInput ? tagsInput.value.split(",").map((s) => s.trim()).filter(Boolean) : [];
+        const memo = memoInput ? memoInput.value : "";
+        const badges = [...document.querySelectorAll(".wfm-badge-checkbox:checked")].map((cb) => cb.value);
+        await saveModelMetadata(modelName, { tags, memo, badges });
+        showToast(t("modelsSaved"), "success");
+        renderTagFilter();
+        renderDirFilter();
+        renderModelGrid();
+    });
+
+    // GenUI Model / Embedding buttons
+    document.getElementById("wfm-modal-genui-model")?.addEventListener("click", () => {
+        applyToGenUI(modelName, state.activeModelType);
+    });
+    document.getElementById("wfm-modal-genui-pp")?.addEventListener("click", () => {
+        applyEmbeddingToPrompt(modelName, "positive");
+    });
+    document.getElementById("wfm-modal-genui-np")?.addEventListener("click", () => {
+        applyEmbeddingToPrompt(modelName, "negative");
+    });
+
+    // Close button (連続作業時にXボタンまでマウス移動しなくて済むように)
+    document.getElementById("wfm-modal-model-close")?.addEventListener("click", () => {
+        closeModal();
+    });
+
+    // Delete model button
+    document.getElementById("wfm-modal-model-delete")?.addEventListener("click", async () => {
+        const confirmMsg = t("modelBulkDeleteConfirm").replace("{count}", "1");
+        if (!confirm(confirmMsg)) return;
+        try {
+            const res = await fetch("/api/wfm/models/delete", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ model_type: state.activeModelType, model_names: [modelName] }),
+            });
+            const data = await res.json();
+            if (data.errors?.length > 0) {
+                showToast(`${t("modelBulkDeleteError")}: ${data.errors[0].error}`, "error");
+                return;
+            }
+            showToast(`${getStem(name)} ${t("modelBulkDeleteDone")}`, "success");
+            closeModal();
+            const list = state.modelsByType[state.activeModelType];
+            const idx = list.indexOf(modelName);
+            if (idx !== -1) list.splice(idx, 1);
+            delete state.modelMetadata[modelName];
+            const ds = state.disabledModels[state.activeModelType];
+            if (ds) ds.delete(modelName);
+            state.selectedModels.delete(modelName);
+            if (state.selectedModel === modelName) {
+                state.selectedModel = null;
+                const titleEl2 = document.getElementById("wfm-models-panel-title");
+                if (titleEl2) titleEl2.textContent = "";
+            }
+            renderModelGrid();
+        } catch (err) {
+            showToast(`${t("modelBulkDeleteError")}: ${err.message}`, "error");
+        }
+    });
+
+    // Change thumbnail
+    const changeBtn = document.getElementById("wfm-modal-change-thumb");
+    const thumbFile = document.getElementById("wfm-modal-thumb-file");
+    if (changeBtn && thumbFile) {
+        changeBtn.addEventListener("click", () => { thumbFile.value = ""; thumbFile.click(); });
+        thumbFile.addEventListener("change", async () => {
+            const file = thumbFile.files?.[0];
+            if (!file) return;
+            changeBtn.disabled = true;
+            changeBtn.textContent = t("uploading");
+            try {
+                const fd = new FormData();
+                fd.append("type", state.activeModelType);
+                fd.append("name", modelName);
+                fd.append("file", file);
+                const res = await fetch("/api/wfm/models/change-preview", { method: "POST", body: fd });
+                const data = await res.json();
+                if (data.error) throw new Error(data.error);
+                markHasPreview(modelName);
+                // Reload preview in modal
+                const newUrl = previewUrl(modelName) + "&t=" + Date.now();
+                const mImg = document.querySelector(".wfm-modal-thumb-img");
+                const mPlaceholder = document.querySelector(".wfm-modal-thumb-placeholder");
+                if (mImg) { mImg.src = newUrl; mImg.style.display = ""; }
+                if (mPlaceholder) mPlaceholder.style.display = "none";
+                renderModelGrid();
+                if (state.selectedModel === modelName) renderSideInfo(modelName);
+                showToast(t("thumbnailChanged"), "success");
+            } catch (err) {
+                showToast(t("thumbnailError") + ": " + err.message, "error");
+            } finally {
+                changeBtn.disabled = false;
+                changeBtn.textContent = t("changeThumbnail");
+                thumbFile.value = "";
+            }
+        });
+    }
+}
+
+// ── Side Panel ────────────────────────────────────────────
+
+export function showSidePanel(modelName) {
+    state.selectedModel = modelName;
+
+    // Highlight selected
+    document.querySelectorAll("#wfm-models-grid .wfm-card, #wfm-models-grid .wfm-models-table-row").forEach((el) => {
+        el.classList.toggle("wfm-card-selected", el.dataset.modelName === modelName);
+    });
+
+    const { name } = parseModelPath(modelName);
+    document.getElementById("wfm-models-panel-title").textContent = name;
+
+    // Reset to CivitAI tab
+    document.querySelectorAll(".wfm-models-side-tab-btn").forEach((b) => b.classList.remove("active"));
+    document.querySelector('.wfm-models-side-tab-btn[data-side-tab="civitai"]')?.classList.add("active");
+    document.querySelectorAll(".wfm-models-side-content").forEach((c) => (c.style.display = "none"));
+    const civitaiEl = document.getElementById("wfm-models-side-civitai");
+    if (civitaiEl) civitaiEl.style.display = "block";
+
+    const genuiNavBtn = document.getElementById("wfm-side-genui-nav-btn");
+    const genuiNpBtn = document.getElementById("wfm-side-genui-np-btn");
+    if (genuiNavBtn) {
+        if (state.activeModelType === "embedding") {
+            genuiNavBtn.textContent = "GenUI PP";
+            genuiNavBtn.title = "Positive Promptにエンベッディング追加";
+            genuiNavBtn.style.display = "";
+            if (genuiNpBtn) {
+                genuiNpBtn.textContent = "GenUI NP";
+                genuiNpBtn.title = "Negative Promptにエンベッディング追加";
+                genuiNpBtn.style.display = "";
+            }
+        } else if (GENUI_TYPE_MAP[state.activeModelType]) {
+            genuiNavBtn.textContent = t("modelsGenUIBtn");
+            genuiNavBtn.title = t("modelsGenUITitle");
+            genuiNavBtn.style.display = "";
+            if (genuiNpBtn) genuiNpBtn.style.display = "none";
+        } else {
+            genuiNavBtn.style.display = "none";
+            if (genuiNpBtn) genuiNpBtn.style.display = "none";
+        }
+    }
+
+    renderSideInfo(modelName);
+    renderSideGroup(modelName);
+    renderSideCivitai(modelName);
+}
+
+export function closeSidePanel() {
+    state.selectedModel = null;
+    const titleEl = document.getElementById("wfm-models-panel-title");
+    if (titleEl) titleEl.textContent = "";
+    document.querySelectorAll("#wfm-models-grid .wfm-card, #wfm-models-grid .wfm-models-table-row").forEach((el) => {
+        el.classList.remove("wfm-card-selected");
+    });
+    const npBtn = document.getElementById("wfm-side-genui-np-btn");
+    if (npBtn) npBtn.style.display = "none";
+    const ppBtn = document.getElementById("wfm-side-genui-nav-btn");
+    if (ppBtn) ppBtn.style.display = "none";
+}
+
+// ── Side Panel: Info Tab ──────────────────────────────────
+
+export function renderSideInfo(modelName) {
+    const el = document.getElementById("wfm-models-side-info");
+    if (!el) return;
+
+    const meta = state.modelMetadata[modelName] || {};
+    const { dir, name } = parseModelPath(modelName);
+    const ext = getExtension(name);
+    const tagsStr = (meta.tags || []).join(", ");
+    const userBadgesHtml = modelBadgesHtml(modelName, false);
+
+    el.innerHTML = `
+        <div class="wfm-side-thumb-container">
+            <div class="wfm-side-thumb-img-wrap">
+                <img style="display:none" />
+                <span class="wfm-side-thumb-placeholder">${t("modelsNoPreview")}</span>
+            </div>
+            <div class="wfm-side-thumb-info">
+                <div class="wfm-side-thumb-name wfm-model-name-copy" title="${t("modelsCopyName")}">${escapeHtml(name)}</div>
+                <div class="wfm-side-thumb-meta">
+                    <span class="wfm-badge wfm-badge-sm">${escapeHtml(ext)}</span>
+                    ${dir ? `<span class="wfm-badge wfm-badge-sm wfm-badge-dir">${escapeHtml(dir)}</span>` : ""}
+                    ${userBadgesHtml}
+                </div>
+            </div>
+        </div>
+        <div class="wfm-node-detail-section">
+            <div class="wfm-node-detail-label">${t("modelsTags")}</div>
+            <div class="wfm-node-detail-value">
+                <input type="text" id="wfm-models-side-tags" class="wfm-search-input" value="${escapeHtml(tagsStr)}" placeholder="${t("modelsTagsPlaceholder")}">
+            </div>
+        </div>
+        <div class="wfm-node-detail-section">
+            <div class="wfm-node-detail-label">${t("modelsMemo")}</div>
+            <div class="wfm-node-detail-value">
+                <textarea id="wfm-models-side-memo" class="wfm-textarea" rows="4" placeholder="${t("modelsMemoPlaceholder")}">${escapeHtml(meta.memo || "")}</textarea>
+            </div>
+        </div>
+        <div class="wfm-node-detail-section" style="display:flex;gap:6px;">
+            <button id="wfm-models-side-save-btn" class="wfm-btn wfm-btn-sm wfm-btn-primary">${t("modelsSave")}</button>
+            ${state.activeModelType === "embedding"
+                ? `<button id="wfm-models-side-genui-pp-btn" class="wfm-btn wfm-btn-sm" title="Positive Promptにエンベッディング追加">GenUI PP</button>
+                   <button id="wfm-models-side-genui-np-btn" class="wfm-btn wfm-btn-sm" title="Negative Promptにエンベッディング追加">GenUI NP</button>`
+                : (GENUI_TYPE_MAP[state.activeModelType]
+                    ? `<button id="wfm-models-side-genui-btn" class="wfm-btn wfm-btn-sm" title="${t("modelsGenUITitle")}">${t("modelsGenUIBtn")}</button>`
+                    : "")}
+        </div>`;
+
+    // Load preview image
+    const sideImg = el.querySelector(".wfm-side-thumb-img-wrap img");
+    const sidePlaceholder = el.querySelector(".wfm-side-thumb-placeholder");
+    if (sideImg) loadPreviewImage(sideImg, sidePlaceholder, modelName);
+
+    // Copy model name on click
+    el.querySelector(".wfm-model-name-copy")?.addEventListener("click", () => {
+        navigator.clipboard.writeText(modelName).then(() => {
+            showToast(t("modelsCopiedName"), "success");
+        });
+    });
+
+    // Save button
+    el.querySelector("#wfm-models-side-save-btn")?.addEventListener("click", () => {
+        const tagsInput = document.getElementById("wfm-models-side-tags");
+        const memoInput = document.getElementById("wfm-models-side-memo");
+        const tags = tagsInput ? tagsInput.value.split(",").map((s) => s.trim()).filter(Boolean) : [];
+        const memo = memoInput ? memoInput.value : "";
+        saveModelMetadata(modelName, { tags, memo }).then(() => {
+            showToast(t("modelsSaved"), "success");
+            renderTagFilter();
+            renderModelGrid();
+        });
+    });
+
+    // GenUI Model / Embedding buttons
+    el.querySelector("#wfm-models-side-genui-btn")?.addEventListener("click", () => {
+        applyToGenUI(modelName, state.activeModelType);
+    });
+    el.querySelector("#wfm-models-side-genui-pp-btn")?.addEventListener("click", () => {
+        applyEmbeddingToPrompt(modelName, "positive");
+    });
+    el.querySelector("#wfm-models-side-genui-np-btn")?.addEventListener("click", () => {
+        applyEmbeddingToPrompt(modelName, "negative");
+    });
+}
+
+// ── Side Panel: Group Tab ─────────────────────────────────
+
+export function renderSideGroup(modelName) {
+    const el = document.getElementById("wfm-models-side-group");
+    if (!el) return;
+
+    // Find groups this model belongs to
+    const memberOf = [];
+    for (const [gName, members] of Object.entries(state.modelGroups)) {
+        if (members.includes(modelName)) memberOf.push(gName);
+    }
+
+    // All group names for the assign dropdown
+    const allGroups = Object.keys(state.modelGroups).sort();
+    const availableGroups = allGroups.filter((g) => !memberOf.includes(g));
+
+    el.innerHTML = `
+        <div style="padding:0 4px;">
+            <div style="margin-bottom:12px;">
+                <div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsCurrentGroups")}</div>
+                ${memberOf.length === 0
+                    ? `<p style="color:var(--wfm-text-secondary);font-size:12px;">${t("modelsNoGroup")}</p>`
+                    : memberOf.map((g) => `<div style="display:flex;align-items:center;justify-content:space-between;padding:3px 0;">
+                        <span style="font-size:13px;">${escapeHtml(g)}</span>
+                        <button class="wfm-btn wfm-btn-sm wfm-btn-danger wfm-group-remove" data-group="${escapeHtml(g)}" title="${t("modelsRemoveFromGroup")}">&times;</button>
+                      </div>`).join("")}
+            </div>
+            <div style="margin-bottom:12px;">
+                <div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsAssignGroup")}</div>
+                <div style="display:flex;gap:4px;">
+                    <select id="wfm-models-group-assign" class="wfm-select" style="flex:1;font-size:12px;">
+                        ${availableGroups.length === 0
+                            ? `<option value="">${t("modelsNoGroupAvailable")}</option>`
+                            : availableGroups.map((g) => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("")}
+                    </select>
+                    <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-models-group-assign-btn" ${availableGroups.length === 0 ? "disabled" : ""}>${t("modelsAdd")}</button>
+                </div>
+            </div>
+            <div>
+                <div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsCreateGroup")}</div>
+                <div style="display:flex;gap:4px;">
+                    <input type="text" id="wfm-models-group-new" class="wfm-search-input" style="flex:1;font-size:12px;" placeholder="${t("modelsGroupName")}">
+                    <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-models-group-create-btn">${t("modelsCreate")}</button>
+                </div>
+            </div>
+            <div style="margin-top:16px;border-top:1px solid var(--wfm-border);padding-top:12px;">
+                <div style="font-weight:600;font-size:13px;margin-bottom:6px;">${t("modelsManageGroups")}</div>
+                <div style="display:flex;gap:4px;margin-bottom:6px;">
+                    <select id="wfm-models-group-manage-select" class="wfm-select" style="flex:1;font-size:12px;">
+                        ${allGroups.length === 0
+                            ? `<option value="">${t("modelsNoGroupAvailable")}</option>`
+                            : allGroups.map((g) => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("")}
+                    </select>
+                    <button class="wfm-btn wfm-btn-sm" id="wfm-models-group-rename-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelsRename")}</button>
+                    <button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-models-group-delete-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelsDelete")}</button>
+                </div>
+                <div style="display:flex;gap:4px;">
+                    <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-models-group-enable-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelGroupEnableAll")}</button>
+                    <button class="wfm-btn wfm-btn-sm" id="wfm-models-group-disable-btn" ${allGroups.length === 0 ? "disabled" : ""}>${t("modelGroupDisableAll")}</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Remove from group
+    el.querySelectorAll(".wfm-group-remove").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const g = btn.dataset.group;
+            const members = state.modelGroups[g] || [];
+            state.modelGroups[g] = members.filter((m) => m !== modelName);
+            if (state.modelGroups[g].length === 0) delete state.modelGroups[g];
+            saveModelGroups(state.modelGroups).then(() => {
+                renderSideGroup(modelName);
+                renderModelGrid();
+            });
+        });
+    });
+
+    // Assign to group
+    document.getElementById("wfm-models-group-assign-btn")?.addEventListener("click", () => {
+        const sel = document.getElementById("wfm-models-group-assign");
+        const g = sel?.value;
+        if (!g) return;
+        if (!state.modelGroups[g]) state.modelGroups[g] = [];
+        if (!state.modelGroups[g].includes(modelName)) state.modelGroups[g].push(modelName);
+        saveModelGroups(state.modelGroups).then(() => {
+            renderSideGroup(modelName);
+        });
+    });
+
+    // Create new group
+    document.getElementById("wfm-models-group-create-btn")?.addEventListener("click", () => {
+        const input = document.getElementById("wfm-models-group-new");
+        const name = input?.value.trim();
+        if (!name) return;
+        if (state.modelGroups[name]) {
+            showToast(t("modelsGroupExists"), "warning");
+            return;
+        }
+        state.modelGroups[name] = [modelName];
+        saveModelGroups(state.modelGroups).then(() => {
+            renderSideGroup(modelName);
+        });
+    });
+
+    // Rename group
+    document.getElementById("wfm-models-group-rename-btn")?.addEventListener("click", () => {
+        const sel = document.getElementById("wfm-models-group-manage-select");
+        const oldName = sel?.value;
+        if (!oldName) return;
+        if (RESERVED_GROUPS.includes(oldName)) {
+            showToast(t("modelsGroupReserved"), "warning");
+            return;
+        }
+        const newName = prompt(t("modelsRenamePrompt"), oldName);
+        if (!newName || newName === oldName) return;
+        if (state.modelGroups[newName]) {
+            showToast(t("modelsGroupExists"), "warning");
+            return;
+        }
+        state.modelGroups[newName] = state.modelGroups[oldName];
+        delete state.modelGroups[oldName];
+        saveModelGroups(state.modelGroups).then(() => {
+            renderSideGroup(modelName);
+            renderModelGrid();
+        });
+    });
+
+    // Delete group
+    document.getElementById("wfm-models-group-delete-btn")?.addEventListener("click", () => {
+        const sel = document.getElementById("wfm-models-group-manage-select");
+        const g = sel?.value;
+        if (!g) return;
+        if (RESERVED_GROUPS.includes(g)) {
+            showToast(t("modelsGroupReserved"), "warning");
+            return;
+        }
+        if (!confirm(t("modelsDeleteGroupConfirm").replace("{name}", g))) return;
+        delete state.modelGroups[g];
+        saveModelGroups(state.modelGroups).then(() => {
+            renderSideGroup(modelName);
+            renderModelGrid();
+        });
+    });
+
+    // Enable all models in selected group
+    document.getElementById("wfm-models-group-enable-btn")?.addEventListener("click", () => {
+        const sel = document.getElementById("wfm-models-group-manage-select");
+        const g = sel?.value;
+        if (!g) return;
+        toggleGroupEnable(g, true).then(() => renderSideGroup(modelName));
+    });
+
+    // Disable all models in selected group
+    document.getElementById("wfm-models-group-disable-btn")?.addEventListener("click", () => {
+        const sel = document.getElementById("wfm-models-group-manage-select");
+        const g = sel?.value;
+        if (!g) return;
+        toggleGroupEnable(g, false).then(() => renderSideGroup(modelName));
+    });
+}
+
+// ── Side Panel: CivitAI Tab ───────────────────────────────
+
+// ハッシュ未計算を示す赤字の行（CivitAIタブ）。更新/取得ボタンでハッシュ計算して取得する
+function hashMissingRowHtml() {
+    return `
+        <div style="display:flex;align-items:center;justify-content:center;font-size:12px;margin-bottom:10px;">
+            <span style="color:var(--wfm-text-secondary);margin-right:8px;">${t("civitaiHashLabel")}</span>
+            <span id="wfm-civitai-hash-missing" style="color:#e53935;font-weight:600;">${t("civitaiHashNotCalculated")}</span>
+        </div>`;
+}
+
+export function renderSideCivitai(modelName) {
+    const el = document.getElementById("wfm-models-side-civitai");
+    if (!el) return;
+
+    // Check if we have cached civitai data via sha256
+    const meta = state.modelMetadata[modelName] || {};
+    const sha256 = meta.sha256;
+    const cached = sha256 && state.civitaiCache[sha256];
+
+    if (cached) {
+        renderCivitaiInfo(el, cached, modelName);
+    } else if (sha256) {
+        // SHA256 is known but model was not found on CivitAI
+        el.innerHTML = `
+            <div style="padding:0 4px;text-align:center;">
+                <p style="color:var(--wfm-text-secondary);font-size:13px;margin-bottom:12px;">
+                    ${t("civitaiNotFoundDesc")}
+                </p>
+                <button class="wfm-btn wfm-btn-sm" id="wfm-civitai-fetch-btn">
+                    ${t("civitaiRefetchBtn")}
+                </button>
+                <div id="wfm-civitai-status" style="margin-top:8px;font-size:12px;color:var(--wfm-text-secondary);"></div>
+            </div>`;
+        document.getElementById("wfm-civitai-fetch-btn")?.addEventListener("click", () => {
+            fetchCivitaiForModel(modelName, el);
+        });
+    } else {
+        el.innerHTML = `
+            <div style="padding:0 4px;text-align:center;">
+                ${hashMissingRowHtml()}
+                <p style="color:var(--wfm-text-secondary);font-size:13px;margin-bottom:12px;">
+                    ${t("civitaiFetchDesc")}
+                </p>
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-civitai-fetch-btn">
+                    ${t("civitaiFetch")}
+                </button>
+                <div id="wfm-civitai-status" style="margin-top:8px;font-size:12px;color:var(--wfm-text-secondary);"></div>
+            </div>`;
+        document.getElementById("wfm-civitai-fetch-btn")?.addEventListener("click", () => {
+            fetchCivitaiForModel(modelName, el);
+        });
+    }
+}
+
+export async function fetchCivitaiForModel(modelName, el) {
+    const statusEl = document.getElementById("wfm-civitai-status");
+    const fetchBtn = document.getElementById("wfm-civitai-fetch-btn");
+    if (fetchBtn) fetchBtn.disabled = true;
+    if (statusEl) statusEl.textContent = t("civitaiHashing");
+
+    try {
+        const res = await fetch("/api/wfm/models/civitai/fetch", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ type: state.activeModelType, name: modelName }),
+        });
+        const data = await res.json();
+
+        if (data.status === "ok" && data.civitai) {
+            // Update caches
+            if (data.sha256) {
+                state.civitaiCache[data.sha256] = data.civitai;
+                // Update metadata with sha256
+                if (!state.modelMetadata[modelName]) state.modelMetadata[modelName] = {};
+                state.modelMetadata[modelName].sha256 = data.sha256;
+            }
+            if (data.preview_saved) markHasPreview(modelName);
+            renderCivitaiInfo(el, data.civitai, modelName);
+            showToast(t("civitaiFound"), "success");
+            // Always refresh preview: local file if saved, otherwise civitai image as fallback
+            const sidePanel = document.getElementById("wfm-models-side-panel");
+            if (sidePanel) {
+                const sideImg = sidePanel.querySelector(".wfm-side-thumb-img-wrap img");
+                const sidePh = sidePanel.querySelector(".wfm-side-thumb-placeholder");
+                if (sideImg) {
+                    if (data.preview_saved) {
+                        sideImg.src = previewUrl(modelName) + "&t=" + Date.now();
+                    } else {
+                        const civitaiImg = safeHttpUrl(data.civitai.images && data.civitai.images[0]);
+                        if (civitaiImg) sideImg.src = civitaiImg;
+                    }
+                    sideImg.style.display = "";
+                    if (sidePh) sidePh.style.display = "none";
+                }
+            }
+            renderModelGrid();
+        } else if (data.status === "not_found") {
+            if (statusEl) statusEl.textContent = t("civitaiNotFound");
+            if (fetchBtn) fetchBtn.disabled = false;
+        } else {
+            if (statusEl) statusEl.textContent = data.error || t("civitaiError");
+            if (fetchBtn) fetchBtn.disabled = false;
+        }
+    } catch (err) {
+        console.error("CivitAI fetch error:", err);
+        if (statusEl) statusEl.textContent = t("civitaiError");
+        if (fetchBtn) fetchBtn.disabled = false;
+    }
+}
+
+export function renderCivitaiInfo(el, info, modelName) {
+    // URL: ユーザー設定ホスト（localStorage）を使用、modelId なし時は /model-versions/ にフォールバック
+    const civitaiHost = localStorage.getItem("wfm_civitai_host") || "civitai.com";
+    const modelUrl = info.modelId && info.versionId
+        ? `https://${civitaiHost}/models/${info.modelId}?modelVersionId=${info.versionId}`
+        : info.versionId
+            ? `https://${civitaiHost}/model-versions/${info.versionId}`
+            : safeHttpUrl(info.modelUrl, "#");
+
+    // Hash: BLAKE3 優先、なければ SHA256
+    const fileHashes = info.fileHashes || {};
+    const blake3 = fileHashes.BLAKE3 || fileHashes.Blake3 || "";
+    const sha256 = fileHashes.SHA256 || (state.modelMetadata[modelName] || {}).sha256 || "";
+    const hashType = blake3 ? "BLAKE3" : (sha256 ? "SHA256" : "");
+    const hashFull = blake3 || sha256;
+
+    // Detail rows
+    const ROW = "display:flex;align-items:center;font-size:12px;margin-bottom:5px;";
+    const LABEL = "color:var(--wfm-text-secondary);min-width:80px;flex-shrink:0;";
+
+    const typeRow = info.type ? `
+        <div style="${ROW}">
+            <span style="${LABEL}">${t("civitaiType")}</span>
+            <span style="font-size:10px;font-weight:700;background:var(--wfm-bg-tertiary,rgba(255,255,255,0.1));padding:2px 7px;border-radius:3px;letter-spacing:0.6px;">${escapeHtml(info.type.toUpperCase())}</span>
+        </div>` : "";
+
+    const baseModelRow = info.baseModel ? `
+        <div style="${ROW}">
+            <span style="${LABEL}">${t("civitaiBaseModel")}</span>
+            <span>${escapeHtml(info.baseModel)}</span>
+        </div>` : "";
+
+    const hashRow = hashFull ? `
+        <div style="${ROW}">
+            <span style="${LABEL}">${t("civitaiHashLabel")}</span>
+            <code class="wfm-hash-value" data-hash="${escapeHtml(hashFull)}"
+                style="background:var(--wfm-bg-secondary);padding:2px 6px;border-radius:3px;cursor:pointer;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 84px);"
+                title="${t("civitaiCopyHash")}">${escapeHtml(hashType)}: ${escapeHtml(hashFull.substring(0, 16).toUpperCase())}…</code>
+        </div>` : `
+        <div style="${ROW}">
+            <span style="${LABEL}">${t("civitaiHashLabel")}</span>
+            <span style="color:#e53935;font-weight:600;">${t("civitaiHashNotCalculated")}</span>
+        </div>`;
+
+    const detailSection = (typeRow || baseModelRow || hashRow)
+        ? `<div style="margin-bottom:10px;">${typeRow}${baseModelRow}${hashRow}</div>` : "";
+
+    const tagsHtml = (info.tags || []).map((tag) =>
+        `<span class="wfm-badge wfm-badge-sm">${escapeHtml(tag)}</span>`
+    ).join(" ");
+
+    const trainedWordsHtml = (info.trainedWords || []).map((w) =>
+        `<code style="font-size:11px;background:var(--wfm-bg-secondary);padding:1px 4px;border-radius:3px;cursor:pointer;" class="wfm-trained-word" title="${t("civitaiCopyWord")}">${escapeHtml(w)}</code>`
+    ).join(" ");
+
+    // Sample images — all go to Sample pane
+    const images = (info.images || []).filter((u) => safeHttpUrl(u));
+    const sampleImagesHtml = images.map((url) =>
+        `<a href="${escapeHtml(url)}" target="_blank" rel="noopener" title="${t("civitaiOpenImage")}"><img src="${escapeHtml(url)}" style="width:100%;border-radius:4px;margin-bottom:6px;cursor:pointer;display:block;" loading="lazy" /></a>`
+    ).join("");
+
+    el.innerHTML = `
+        <div style="padding:0 4px;">
+            <div style="display:flex;border-bottom:1px solid var(--wfm-border);margin-bottom:10px;">
+                <button class="wfm-civitai-subtab-btn" data-pane="info"
+                    style="padding:4px 10px;font-size:12px;border:none;background:none;cursor:pointer;border-bottom:2px solid var(--wfm-primary);color:var(--wfm-primary);font-weight:600;margin-bottom:-1px;">
+                    ${t("civitaiTabInfo")}
+                </button>
+                <button class="wfm-civitai-subtab-btn" data-pane="sample"
+                    style="padding:4px 10px;font-size:12px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:var(--wfm-text-secondary);margin-bottom:-1px;">
+                    ${t("civitaiTabSample")}${images.length ? ` (${images.length})` : ""}
+                </button>
+            </div>
+
+            <div id="wfm-civitai-pane-info">
+                <div style="margin-bottom:10px;">
+                    <div style="font-weight:700;font-size:14px;margin-bottom:2px;">
+                        <a href="${escapeHtml(modelUrl)}" target="_blank" style="color:var(--wfm-primary);text-decoration:none;">${escapeHtml(info.modelName)}</a>
+                    </div>
+                    <div style="font-size:12px;color:var(--wfm-text-secondary);">
+                        ${escapeHtml(info.versionName)}${info.creator ? ` · by ${escapeHtml(info.creator)}` : ""}
+                    </div>
+                </div>
+                ${detailSection}
+                ${tagsHtml ? `<div style="margin-bottom:8px;">${tagsHtml}</div>` : ""}
+                ${trainedWordsHtml ? `<div style="margin-bottom:10px;"><div style="font-weight:600;font-size:12px;margin-bottom:4px;">${t("civitaiTriggerWords")}</div>${trainedWordsHtml}</div>` : ""}
+                ${info.description ? `<div style="font-size:12px;color:var(--wfm-text-secondary);line-height:1.5;max-height:120px;overflow-y:auto;">${sanitizeHtml(info.description)}</div>` : ""}
+                <div style="margin-top:10px;">
+                    <button class="wfm-btn wfm-btn-sm" id="wfm-civitai-refresh-btn">${t("civitaiRefresh")}</button>
+                </div>
+            </div>
+
+            <div id="wfm-civitai-pane-sample" style="display:none;">
+                ${sampleImagesHtml || `<p style="color:var(--wfm-text-secondary);font-size:13px;text-align:center;margin-top:20px;">${t("civitaiNoImages")}</p>`}
+            </div>
+        </div>`;
+
+    // Sub-tab switching
+    const subtabBtns = el.querySelectorAll(".wfm-civitai-subtab-btn");
+    subtabBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const pane = btn.dataset.pane;
+            subtabBtns.forEach((b) => {
+                const isActive = b === btn;
+                b.style.borderBottom = isActive ? "2px solid var(--wfm-primary)" : "2px solid transparent";
+                b.style.color = isActive ? "var(--wfm-primary)" : "var(--wfm-text-secondary)";
+                b.style.fontWeight = isActive ? "600" : "400";
+            });
+            el.querySelector("#wfm-civitai-pane-info").style.display = pane === "info" ? "" : "none";
+            el.querySelector("#wfm-civitai-pane-sample").style.display = pane === "sample" ? "" : "none";
+        });
+    });
+
+    // Copy trigger word on click
+    el.querySelectorAll(".wfm-trained-word").forEach((wordEl) => {
+        wordEl.addEventListener("click", () => {
+            navigator.clipboard.writeText(wordEl.textContent).then(() => {
+                showToast(t("civitaiWordCopied"), "success");
+            });
+        });
+    });
+
+    // Copy hash on click
+    el.querySelectorAll(".wfm-hash-value").forEach((hashEl) => {
+        hashEl.addEventListener("click", () => {
+            navigator.clipboard.writeText(hashEl.dataset.hash).then(() => {
+                showToast(t("civitaiHashCopied"), "success");
+            });
+        });
+    });
+
+    // Refresh button
+    document.getElementById("wfm-civitai-refresh-btn")?.addEventListener("click", () => {
+        const meta = state.modelMetadata[modelName] || {};
+        if (meta.sha256) delete state.civitaiCache[meta.sha256];
+        delete meta.sha256;
+        fetchCivitaiForModel(modelName, el);
+    });
+}
+
+// ── CivitAI cache / batch fetch ───────────────────────────
+
+export async function fetchCivitaiCache() {
+    try {
+        const res = await fetch("/api/wfm/models/civitai/cache");
+        return res.ok ? await res.json() : {};
+    } catch { return {}; }
+}
+
+export async function batchFetchCivitai() {
+    const models = getCurrentModels();
+    if (models.length === 0) {
+        showToast(t("modelsNoModels"), "warning");
+        return;
+    }
+
+    // Filter out models that already have CivitAI data
+    // Optionally also skip models previously recorded as "not found on CivitAI"
+    const skipNotFound = document.getElementById("wfm-models-civitai-skip-nf")?.checked;
+    const meta = state.modelMetadata;
+    const uncached = models.filter((m) => {
+        const sha = meta[m]?.sha256;
+        if (sha && state.civitaiCache[sha]) return false;
+        return !(skipNotFound && meta[m]?.civitaiNotFound);
+    });
+
+    if (uncached.length === 0) {
+        showToast(t("civitaiBatchAllCached"), "info");
+        return;
+    }
+
+    const btn = document.getElementById("wfm-models-civitai-batch-btn");
+    const progressEl = document.getElementById("wfm-models-civitai-progress");
+    if (btn) btn.disabled = true;
+
+    try {
+        const res = await fetch("/api/wfm/models/civitai/batch", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ type: state.activeModelType, models: uncached }),
+        });
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+
+            // Parse SSE events
+            const lines = buffer.split("\n");
+            buffer = lines.pop() || "";
+
+            let eventType = "";
+            for (const line of lines) {
+                if (line.startsWith("event: ")) {
+                    eventType = line.slice(7).trim();
+                } else if (line.startsWith("data: ")) {
+                    const data = JSON.parse(line.slice(6));
+                    if (eventType === "progress") {
+                        const pct = data.total > 0 ? Math.round((data.current / data.total) * 100) : 0;
+                        const statusText = data.status === "hashing" ? t("civitaiHashing2")
+                            : data.status === "fetching" ? t("civitaiFetching")
+                            : data.status === "previews" ? t("civitaiSavingPreviews")
+                            : data.status === "cached" ? "✓"
+                            : data.status === "found" ? "✓"
+                            : data.status === "not_found" || data.status === "needs_hash" ? "—"
+                            : "";
+                        if (progressEl) progressEl.textContent = `${pct}% (${data.current}/${data.total}) ${statusText}`;
+                    } else if (eventType === "done") {
+                        if (progressEl) progressEl.textContent = "";
+                        const previewNote = data.preview_saved > 0 ? ` (+${data.preview_saved} preview)` : "";
+                        showToast(t("civitaiBatchDone", data.found, data.not_found, data.needs_hash || 0) + previewNote, "success");
+                        // Reload caches
+                        const [newMeta, newCache] = await Promise.all([fetchModelMetadata(), fetchCivitaiCache()]);
+                        // Apply sha256 hashes from batch result directly in case fetchModelMetadata
+                        // returns before the server has flushed updated metadata to disk
+                        if (data.hashes) {
+                            for (const [modelName, sha256] of Object.entries(data.hashes)) {
+                                if (!newMeta[modelName]) newMeta[modelName] = {};
+                                if (!newMeta[modelName].sha256) newMeta[modelName].sha256 = sha256;
+                            }
+                        }
+                        if (data.preview_saved > 0) await fetchPreviewKeys(state.activeModelType);
+                        state.modelMetadata = newMeta;
+                        state.civitaiCache = newCache;
+                        renderModelGrid();
+                        // Refresh side panel if open
+                        if (state.selectedModel) renderSideCivitai(state.selectedModel);
+                    }
+                }
+            }
+        }
+    } catch (err) {
+        console.error("Batch CivitAI error:", err);
+        showToast(t("civitaiError"), "error");
+    } finally {
+        if (btn) btn.disabled = false;
+        if (progressEl) progressEl.textContent = "";
+    }
+}
@@ -0,0 +1,179 @@
+/**
+ * Models Tab - Filtering, sorting, and the tag/group/directory filter dropdowns
+ */
+
+import { t } from "../i18n.js";
+import { escapeHtml } from "../util.js";
+import { state } from "./state.js";
+import { parseModelPath, getExtension } from "./helpers.js";
+
+export function getCurrentModels() {
+    return state.modelsByType[state.activeModelType] || [];
+}
+
+export function isModelDisabled(modelName) {
+    const s = state.disabledModels[state.activeModelType];
+    return s ? s.has(modelName) : false;
+}
+
+export function filterModels() {
+    let models = getCurrentModels();
+
+    if (state.statusFilter === "enabled") {
+        models = models.filter((m) => !isModelDisabled(m));
+    } else if (state.statusFilter === "disabled") {
+        models = models.filter((m) => isModelDisabled(m));
+    }
+
+    if (state.showFavoritesOnly) {
+        models = models.filter((m) => {
+            const meta = state.modelMetadata[m];
+            return meta && meta.favorite;
+        });
+    }
+
+    if (state.showBatchOnly) {
+        const batchMembers = state.modelGroups["Batch"] || [];
+        models = models.filter((m) => batchMembers.includes(m));
+    }
+
+    if (state.tagFilter) {
+        models = models.filter((m) => {
+            const meta = state.modelMetadata[m];
+            return meta && meta.tags && meta.tags.includes(state.tagFilter);
+        });
+    }
+
+    if (state.badgeFilter) {
+        models = models.filter((m) => {
+            const meta = state.modelMetadata[m];
+            return meta && meta.badges && meta.badges.includes(state.badgeFilter);
+        });
+    }
+
+    if (state.dirFilter) {
+        models = models.filter((m) => {
+            const { dir } = parseModelPath(m);
+            return dir === state.dirFilter;
+        });
+    }
+
+    if (state.groupFilter) {
+        const members = state.modelGroups[state.groupFilter] || [];
+        models = models.filter((m) => members.includes(m));
+    }
+
+    if (state.searchText) {
+        const q = state.searchText.toLowerCase();
+        models = models.filter((m) => {
+            const meta = state.modelMetadata[m];
+            const searchable = [m, ...(meta?.tags || []), meta?.memo || ""]
+                .join(" ")
+                .toLowerCase();
+            return searchable.includes(q);
+        });
+    }
+
+    return sortModels(models);
+}
+
+export function sortKeyOf(modelName) {
+    const meta = state.modelMetadata[modelName] || {};
+    switch (state.sortColumn) {
+        case "fav":
+            return meta.favorite ? 1 : 0;
+        case "filename":
+            return parseModelPath(modelName).name.toLowerCase();
+        case "subdir":
+            return parseModelPath(modelName).dir.toLowerCase();
+        case "civtype": {
+            const civ = meta.sha256 && state.civitaiCache[meta.sha256];
+            return (civ?.type || "").toLowerCase();
+        }
+        case "basemodel": {
+            const civ = meta.sha256 && state.civitaiCache[meta.sha256];
+            return (civ?.baseModel || "").toLowerCase();
+        }
+        case "ext":
+            return getExtension(parseModelPath(modelName).name).toLowerCase();
+        case "tags":
+            return (meta.tags || []).join(", ").toLowerCase();
+        case "memo":
+            return (meta.memo || "").toLowerCase();
+        case "enabled":
+            return isModelDisabled(modelName) ? 1 : 0;
+        default:
+            return 0;
+    }
+}
+
+export function sortModels(models) {
+    if (!state.sortColumn) return models;
+    // ソートキーを1モデル1回だけ計算（比較ごとのparseModelPath等の再計算を回避）
+    const dir = state.sortDir === "asc" ? 1 : -1;
+    return models
+        .map((m) => [sortKeyOf(m), m])
+        .sort((a, b) => (a[0] < b[0] ? -dir : a[0] > b[0] ? dir : 0))
+        .map((pair) => pair[1]);
+}
+
+export function getAllTags() {
+    const set = new Set();
+    const models = getCurrentModels();
+    models.forEach((m) => {
+        const meta = state.modelMetadata[m];
+        if (meta?.tags) meta.tags.forEach((tag) => set.add(tag));
+    });
+    return [...set].sort();
+}
+
+// ── Render: Tag Filter ────────────────────────────────────
+
+export function renderTagFilter() {
+    const select = document.getElementById("wfm-models-tag-filter");
+    if (!select) return;
+    const tags = getAllTags();
+    select.innerHTML =
+        `<option value="">${t("modelsAllTags")}</option>` +
+        tags.map((tag) => `<option value="${escapeHtml(tag)}">${escapeHtml(tag)}</option>`).join("");
+    select.value = state.tagFilter;
+}
+
+export function renderGroupFilter() {
+    const select = document.getElementById("wfm-models-group-filter");
+    if (!select) return;
+
+    const groups = state.allModelGroups[state.activeModelType] || {};
+    const names = Object.keys(groups).sort();
+
+    // 選択中のグループが削除された場合はフィルターをリセット
+    if (state.groupFilter && !groups[state.groupFilter]) {
+        state.groupFilter = "";
+    }
+
+    const currentValue = state.groupFilter
+        ? `${state.activeModelType}::${state.groupFilter}`
+        : "";
+
+    select.innerHTML =
+        `<option value="">${t("modelsAllGroups")}</option>` +
+        names.map((name) => {
+            const value = `${state.activeModelType}::${name}`;
+            const isActive = value === currentValue;
+            return `<option value="${escapeHtml(value)}"${isActive ? " selected" : ""}>${escapeHtml(name)}</option>`;
+        }).join("");
+}
+
+export function renderDirFilter() {
+    const select = document.getElementById("wfm-models-dir-filter");
+    if (!select) return;
+    const dirs = [...new Set(
+        getCurrentModels()
+            .map((m) => parseModelPath(m).dir)
+            .filter((d) => d !== "")
+    )].sort();
+    select.innerHTML =
+        `<option value="">${t("modelsAllDirs")}</option>` +
+        dirs.map((d) => `<option value="${escapeHtml(d)}">${escapeHtml(d)}</option>`).join("");
+    select.value = state.dirFilter;
+}
@@ -0,0 +1,329 @@
+/**
+ * Models Tab - Grid rendering (Thumbnail / Table views) and per-card
+ * Batch/Stack/Favorite toggles.
+ *
+ * This module and selection-bulk.js / detail-panel.js form a circular
+ * import triangle with each other and with models-tab.js: rendering a card
+ * needs to wire up selection, side-panel, and detail-modal click handlers,
+ * and those in turn re-render the grid after they change state. All the
+ * cross-module calls happen inside event handlers (never at module
+ * evaluation time), and every export here is a `function` declaration
+ * (hoisted), so the cycle resolves safely under ES Modules.
+ */
+
+import { showToast } from "../app.js";
+import { t } from "../i18n.js";
+import { escapeHtml } from "../util.js";
+import { state } from "./state.js";
+import { filterModels, getCurrentModels, isModelDisabled } from "./filters.js";
+import { modelBadgesHtml } from "./badges.js";
+import { parseModelPath, getExtension, getStem, loadPreviewImage } from "./helpers.js";
+import { toggleModelSelection } from "./selection-bulk.js";
+import { showSidePanel, openDetailModal, renderSideInfo } from "./detail-panel.js";
+import { saveModelGroups, saveModelMetadata, toggleModelEnable } from "../models-tab.js";
+
+export function renderModelGrid() {
+    const grid = document.getElementById("wfm-models-grid");
+    if (!grid) return;
+
+    grid.className = `wfm-grid wfm-view-${state.viewMode}`;
+    const filtered = filterModels();
+
+    // Update count
+    const countEl = document.getElementById("wfm-models-count");
+    if (countEl) {
+        const total = getCurrentModels().length;
+        countEl.textContent = `${filtered.length} / ${total}`;
+    }
+
+    if (filtered.length === 0) {
+        grid.innerHTML = `<p class="wfm-placeholder">${t("modelsNoModels")}</p>`;
+        return;
+    }
+
+    if (state.viewMode === "table") {
+        renderTableView(grid, filtered);
+    } else {
+        renderThumbView(grid, filtered);
+    }
+}
+
+// ── Thumbnail View (same as Workflow tab) ─────────────────
+
+export function renderThumbView(grid, models) {
+    grid.innerHTML = "";
+    models.forEach((modelName) => {
+        const meta = state.modelMetadata[modelName] || {};
+        const { name } = parseModelPath(modelName);
+        const disabled = isModelDisabled(modelName);
+        const userBadges = modelBadgesHtml(modelName);
+        const tagsHtml = (meta.tags || []).map((tag) => `<span class="wfm-badge wfm-badge-sm">${escapeHtml(tag)}</span>`).join("");
+        const favStar = meta.favorite ? "★" : "☆";
+        const favClass = meta.favorite ? "wfm-fav-btn active" : "wfm-fav-btn";
+        const showBatchBtn = ["checkpoint", "lora"].includes(state.activeModelType);
+        const showStackBtn = state.activeModelType === "lora";
+        const inBatch = showBatchBtn && isInBatch(modelName);
+        const inStack = showStackBtn && isInStack(modelName);
+        const batchClass = inBatch ? "wfm-batch-btn active" : "wfm-batch-btn";
+        const stackClass = inStack ? "wfm-stack-btn active" : "wfm-stack-btn";
+
+        const card = document.createElement("div");
+        card.className = "wfm-card";
+        if (disabled) card.classList.add("wfm-model-disabled");
+        if (state.selectedModel === modelName) card.classList.add("wfm-card-selected");
+        card.dataset.modelName = modelName;
+
+        card.innerHTML = `
+            <div class="wfm-card-thumb">
+                <img style="display:none" />
+                <span class="wfm-card-thumb-placeholder">${t("modelsNoPreview")}</span>
+                ${disabled ? `<span class="wfm-disabled-overlay">${t("modelDisabled")}</span>` : ""}
+            </div>
+            <div class="wfm-card-body">
+                <div class="wfm-card-title" title="${escapeHtml(modelName)}">${escapeHtml(getStem(name))}</div>
+                <div class="wfm-card-meta">${userBadges} ${tagsHtml}</div>
+            </div>
+            ${showBatchBtn ? `<button class="${batchClass}" title="${t("modelsBatch")}">B</button>` : ""}
+            ${showStackBtn ? `<button class="${stackClass}" title="Stack (Lora multi-apply)">S</button>` : ""}
+            <button class="${favClass}" title="${t("modelsFavorite")}">${favStar}</button>
+            <button class="wfm-toggle-btn${disabled ? " wfm-toggle-disabled" : ""}" title="${disabled ? t("modelEnable") : t("modelDisable")}">${disabled ? "▶" : "⏸"}</button>`;
+
+        // Load preview without 404 console spam
+        const img = card.querySelector(".wfm-card-thumb img");
+        const placeholder = card.querySelector(".wfm-card-thumb-placeholder");
+        loadPreviewImage(img, placeholder, modelName);
+
+        card.querySelector(".wfm-batch-btn")?.addEventListener("click", async (e) => {
+            e.stopPropagation();
+            const btn = e.currentTarget;
+            await toggleBatch(modelName);
+            if (state.showBatchOnly) {
+                renderModelGrid();
+            } else {
+                btn.classList.toggle("active", isInBatch(modelName));
+            }
+        });
+        card.querySelector(".wfm-stack-btn")?.addEventListener("click", async (e) => {
+            e.stopPropagation();
+            const btn = e.currentTarget;
+            await toggleStack(modelName);
+            btn.classList.toggle("active", isInStack(modelName));
+        });
+        card.querySelector(".wfm-fav-btn").addEventListener("click", (e) => {
+            e.stopPropagation();
+            toggleFavorite(modelName);
+        });
+        card.querySelector(".wfm-toggle-btn").addEventListener("click", (e) => {
+            e.stopPropagation();
+            toggleModelEnable(modelName);
+        });
+        if (state.selectMode) {
+            const isChecked = state.selectedModels.has(modelName);
+            card.classList.toggle("wfm-card-checked", isChecked);
+            const checkEl = document.createElement("div");
+            checkEl.className = "wfm-select-check" + (isChecked ? " checked" : "");
+            card.appendChild(checkEl);
+            card.addEventListener("click", (e) => {
+                if (e.target.closest(".wfm-batch-btn, .wfm-stack-btn, .wfm-fav-btn, .wfm-toggle-btn")) return;
+                toggleModelSelection(modelName);
+            });
+        } else {
+            card.addEventListener("click", () => showSidePanel(modelName));
+            card.addEventListener("dblclick", (e) => { e.stopPropagation(); openDetailModal(modelName); });
+        }
+        grid.appendChild(card);
+    });
+}
+
+
+// ── Table View ────────────────────────────────────────────
+
+export function thSortHtml(label, col, extraClass = "", extraStyle = "") {
+    const isActive = state.sortColumn === col;
+    const arrow = isActive ? (state.sortDir === "asc" ? " ▲" : " ▼") : "";
+    const activeStyle = isActive ? "color:var(--wfm-accent,#6366f1);" : "";
+    const cls = ["wfm-table-th-sortable", extraClass].filter(Boolean).join(" ");
+    return `<th class="${cls}" data-sort-col="${col}" style="${activeStyle}${extraStyle}">${label}${arrow}</th>`;
+}
+
+export function renderTableView(grid, models) {
+    const showBatchBtn = ["checkpoint", "lora"].includes(state.activeModelType);
+    const showStackBtn = state.activeModelType === "lora";
+    const rows = models
+        .map((modelName) => {
+            const meta = state.modelMetadata[modelName] || {};
+            const { dir, name } = parseModelPath(modelName);
+            const ext = getExtension(name);
+            const sha256 = meta.sha256;
+            const civitai = sha256 && state.civitaiCache[sha256];
+            const civitaiType = civitai ? (civitai.type || "") : "";
+            const civitaiBaseModel = civitai ? (civitai.baseModel || "") : "";
+            const disabled = isModelDisabled(modelName);
+            const isChecked = state.selectMode && state.selectedModels.has(modelName);
+            const favIcon = meta.favorite ? "&#9733;" : "&#9734;";
+            const batchIcon = !showBatchBtn ? "" : isInBatch(modelName) ? `<button class="wfm-batch-btn active" title="${t("modelsBatch")}">B</button>` : `<button class="wfm-batch-btn" title="${t("modelsBatch")}">B</button>`;
+            const stackIcon = isInStack(modelName) ? `<button class="wfm-stack-btn active" title="Stack (Lora multi-apply)">S</button>` : `<button class="wfm-stack-btn" title="Stack (Lora multi-apply)">S</button>`;
+            const tagsStr = (meta.tags || []).join(", ");
+            const memo = meta.memo || "";
+            const toggleLabel = disabled ? t("modelEnable") : t("modelDisable");
+            const toggleIcon = disabled ? "▶" : "⏸";
+            const checkCell = state.selectMode
+                ? `<td class="wfm-table-td-check"><div class="wfm-select-check${isChecked ? " checked" : ""}"></div></td>`
+                : "";
+            return `<tr class="wfm-models-table-row${state.selectedModel === modelName ? " wfm-card-selected" : ""}${disabled ? " wfm-model-disabled" : ""}${isChecked ? " wfm-card-checked" : ""}" data-model-name="${escapeHtml(modelName)}">
+                ${checkCell}
+                <td class="wfm-models-table-fav" title="Favorite">${favIcon}</td>
+                <td class="wfm-table-td-thumb"><img class="wfm-table-thumb" style="display:none" /></td>
+                <td class="wfm-table-td-filename" title="${escapeHtml(modelName)}">${escapeHtml(name)}</td>
+                <td class="wfm-table-td-subdir">${escapeHtml(dir)}</td>
+                <td class="wfm-table-td-civtype" title="${escapeHtml(civitaiType)}">${escapeHtml(civitaiType)}</td>
+                <td class="wfm-table-td-basemodel" title="${escapeHtml(civitaiBaseModel)}">${escapeHtml(civitaiBaseModel)}</td>
+                <td class="wfm-table-td-ext">${escapeHtml(ext)}</td>
+                <td>${escapeHtml(tagsStr)}</td>
+                <td class="wfm-table-td-memo" title="${escapeHtml(memo)}">${escapeHtml(memo)}</td>
+                <td class="wfm-table-td-toggle"><button class="wfm-toggle-btn${disabled ? " wfm-toggle-disabled" : ""}" title="${toggleLabel}">${toggleIcon}</button></td>
+                ${showBatchBtn ? `<td class="wfm-table-td-batch">${batchIcon}</td>` : ""}
+                ${showStackBtn ? `<td class="wfm-table-td-stack">${stackIcon}</td>` : ""}
+            </tr>`;
+        })
+        .join("");
+
+    const checkTh = state.selectMode ? `<th style="width:24px;"></th>` : "";
+    grid.innerHTML = `<table class="wfm-models-table"><thead><tr>
+        ${checkTh}
+        ${thSortHtml("&#9733;", "fav", "", "width:30px;text-align:center;")}
+        <th style="width:40px;"></th>
+        ${thSortHtml(t("modelsFileName"), "filename", "wfm-table-th-filename")}
+        ${thSortHtml(t("modelsSubdir"), "subdir", "wfm-table-th-subdir")}
+        ${thSortHtml(t("civitaiType"), "civtype", "wfm-table-th-civtype")}
+        ${thSortHtml(t("civitaiBaseModel"), "basemodel", "wfm-table-th-basemodel")}
+        ${thSortHtml(t("modelsExt"), "ext", "wfm-table-th-ext")}
+        ${thSortHtml(t("modelsTags"), "tags")}
+        ${thSortHtml(t("modelsMemo"), "memo")}
+        ${thSortHtml("E/D", "enabled", "", "width:50px;text-align:center;")}
+        ${showBatchBtn ? `<th style="width:30px;">B</th>` : ""}
+        ${showStackBtn ? `<th style="width:30px;">S</th>` : ""}
+    </tr></thead><tbody>${rows}</tbody></table>`;
+
+    grid.querySelectorAll(".wfm-models-table-row").forEach((row) => {
+        const mn = row.dataset.modelName;
+        const img = row.querySelector(".wfm-table-thumb");
+        if (img) loadPreviewImage(img, null, mn);
+
+        if (state.selectMode) {
+            row.addEventListener("click", (e) => {
+                if (e.target.closest(".wfm-models-table-fav, .wfm-toggle-btn, .wfm-batch-btn, .wfm-stack-btn")) return;
+                toggleModelSelection(mn);
+            });
+        } else {
+            row.addEventListener("click", () => showSidePanel(mn));
+            row.addEventListener("dblclick", (e) => { e.stopPropagation(); openDetailModal(mn); });
+        }
+        row.querySelector(".wfm-models-table-fav").addEventListener("click", (e) => {
+            e.stopPropagation();
+            toggleFavorite(mn);
+        });
+        row.querySelector(".wfm-toggle-btn").addEventListener("click", (e) => {
+            e.stopPropagation();
+            toggleModelEnable(mn);
+        });
+        row.querySelector(".wfm-batch-btn")?.addEventListener("click", async (e) => {
+            e.stopPropagation();
+            await toggleBatch(mn);
+            if (state.showBatchOnly) {
+                renderModelGrid();
+            } else {
+                e.currentTarget.classList.toggle("active", isInBatch(mn));
+            }
+        });
+        row.querySelector(".wfm-stack-btn")?.addEventListener("click", async (e) => {
+            e.stopPropagation();
+            await toggleStack(mn);
+            e.currentTarget.classList.toggle("active", isInStack(mn));
+        });
+    });
+
+    grid.querySelectorAll(".wfm-table-th-sortable").forEach((th) => {
+        th.addEventListener("click", () => {
+            const col = th.dataset.sortCol;
+            if (state.sortColumn === col) {
+                if (state.sortDir === "asc") {
+                    state.sortDir = "desc";
+                } else {
+                    state.sortColumn = null;
+                    state.sortDir = "asc";
+                }
+            } else {
+                state.sortColumn = col;
+                state.sortDir = "asc";
+            }
+            renderModelGrid();
+        });
+    });
+}
+
+// ── Batch group helpers ───────────────────────────────────
+
+export function isInBatch(modelName) {
+    return (state.modelGroups["Batch"] || []).includes(modelName);
+}
+
+export async function toggleBatch(modelName) {
+    const batch = state.modelGroups["Batch"] || [];
+    const idx = batch.indexOf(modelName);
+    if (idx >= 0) {
+        batch.splice(idx, 1);
+    } else {
+        batch.push(modelName);
+    }
+    state.modelGroups["Batch"] = batch;
+    state.allModelGroups[state.activeModelType] = state.modelGroups;
+    await saveModelGroups(state.modelGroups);
+}
+
+export async function clearBatchGroup() {
+    state.modelGroups["Batch"] = [];
+    state.allModelGroups[state.activeModelType] = state.modelGroups;
+    await saveModelGroups(state.modelGroups);
+    if (state.showBatchOnly) {
+        state.showBatchOnly = false;
+        document.getElementById("wfm-models-batch-filter-btn")?.classList.remove("active");
+    }
+    renderModelGrid();
+    showToast(t("modelsBatchClear"), "success");
+}
+
+export function isInStack(modelName) {
+    return (state.modelGroups["Stack"] || []).includes(modelName);
+}
+
+export async function toggleStack(modelName) {
+    const stack = state.modelGroups["Stack"] || [];
+    const idx = stack.indexOf(modelName);
+    if (idx >= 0) {
+        stack.splice(idx, 1);
+    } else {
+        stack.push(modelName);
+    }
+    state.modelGroups["Stack"] = stack;
+    state.allModelGroups[state.activeModelType] = state.modelGroups;
+    await saveModelGroups(state.modelGroups);
+}
+
+export async function clearStackGroup() {
+    state.modelGroups["Stack"] = [];
+    state.allModelGroups[state.activeModelType] = state.modelGroups;
+    await saveModelGroups(state.modelGroups);
+    renderModelGrid();
+    showToast(t("stackCleared"), "success");
+}
+
+// ── Favorite toggle ───────────────────────────────────────
+
+export async function toggleFavorite(modelName) {
+    const meta = state.modelMetadata[modelName] || {};
+    const newFav = !meta.favorite;
+    await saveModelMetadata(modelName, { favorite: newFav });
+    renderModelGrid();
+    if (state.selectedModel === modelName) renderSideInfo(modelName);
+}
@@ -0,0 +1,88 @@
+/**
+ * Models Tab - Small path/preview helpers shared across the models/* modules
+ */
+
+import { state } from "./state.js";
+import { safeHttpUrl } from "../util.js";
+
+export function parseModelPath(fullName) {
+    const lastSlash = Math.max(fullName.lastIndexOf("/"), fullName.lastIndexOf("\\"));
+    if (lastSlash === -1) return { dir: "", name: fullName };
+    return { dir: fullName.substring(0, lastSlash), name: fullName.substring(lastSlash + 1) };
+}
+
+export function getExtension(name) {
+    const dot = name.lastIndexOf(".");
+    return dot >= 0 ? name.substring(dot) : "";
+}
+
+export function getStem(name) {
+    const dot = name.lastIndexOf(".");
+    return dot >= 0 ? name.substring(0, dot) : name;
+}
+
+export function previewUrl(modelName, modelType) {
+    const type = modelType || state.activeModelType;
+    return `/api/wfm/models/preview?type=${encodeURIComponent(type)}&name=${encodeURIComponent(modelName)}`;
+}
+
+/**
+ * Load preview image. Uses img onload/onerror instead of HEAD request
+ * (aiohttp add_get does not auto-handle HEAD method).
+ * Falls back to CivitAI cached image if no local preview exists.
+ */
+/** モデル名 → previewKeys のキー（`サブフォルダ/拡張子なし名`、小文字・/区切り） */
+export function previewKey(modelName) {
+    const n = modelName.replace(/\\/g, "/");
+    const dot = n.lastIndexOf(".");
+    const slash = n.lastIndexOf("/");
+    return (dot > slash ? n.substring(0, dot) : n).toLowerCase();
+}
+
+/** プレビュー画像を持つモデルのキー一覧をサーバから取得してstateに保存。失敗時は保存せず従来動作に戻る */
+export async function fetchPreviewKeys(modelType) {
+    const type = modelType || state.activeModelType;
+    try {
+        const res = await fetch(`/api/wfm/models/preview-keys?type=${encodeURIComponent(type)}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        if (Array.isArray(data.keys)) state.previewKeys[type] = new Set(data.keys);
+    } catch { /* 従来動作（都度リクエスト）にフォールバック */ }
+}
+
+/** 新しくプレビューが作られた/変更されたモデルを登録する */
+export function markHasPreview(modelName, modelType) {
+    const set = state.previewKeys[modelType || state.activeModelType];
+    if (set) set.add(previewKey(modelName));
+}
+
+export function loadPreviewImage(imgEl, placeholderEl, modelName, modelType) {
+    const url = previewUrl(modelName, modelType);
+    const keys = state.previewKeys[modelType || state.activeModelType];
+    const noLocalPreview = !!keys && !keys.has(previewKey(modelName));
+    imgEl.onload = () => {
+        imgEl.style.display = "";
+        if (placeholderEl) placeholderEl.style.display = "none";
+    };
+    imgEl.onerror = () => {
+        // Fallback: use CivitAI cached image if available
+        const meta = state.modelMetadata[modelName] || {};
+        const sha256 = meta.sha256;
+        const civitai = sha256 && state.civitaiCache[sha256];
+        const civitaiImg = safeHttpUrl(civitai && civitai.images && civitai.images[0]);
+        if (civitaiImg) {
+            imgEl.onerror = () => {
+                imgEl.style.display = "none";
+                if (placeholderEl) placeholderEl.style.display = "";
+            };
+            imgEl.src = civitaiImg;
+            imgEl.style.display = "";
+            if (placeholderEl) placeholderEl.style.display = "none";
+        } else {
+            imgEl.style.display = "none";
+            if (placeholderEl) placeholderEl.style.display = "";
+        }
+    };
+    if (noLocalPreview) { imgEl.onerror(); return; }
+    imgEl.src = url;
+}
@@ -0,0 +1,318 @@
+/**
+ * Models Tab - Multi-select mode and bulk group/badge/favorite/move/delete
+ * operations on the current selection.
+ *
+ * Part of the grid-view.js / selection-bulk.js / detail-panel.js circular
+ * import triangle — see the note at the top of grid-view.js.
+ */
+
+import { showToast } from "../app.js";
+import { t } from "../i18n.js";
+import { escapeHtml } from "../util.js";
+import { state, RESERVED_GROUPS } from "./state.js";
+import { filterModels, renderDirFilter } from "./filters.js";
+import { getBadgePalette } from "./badges.js";
+import { renderModelGrid } from "./grid-view.js";
+import { saveModelGroups, saveModelMetadata } from "../models-tab.js";
+
+export function toggleSelectMode() {
+    state.selectMode = !state.selectMode;
+    if (!state.selectMode) state.selectedModels.clear();
+    const btn = document.getElementById("wfm-models-select-btn");
+    if (btn) {
+        btn.classList.toggle("active", state.selectMode);
+        btn.textContent = state.selectMode ? t("modelSelectExit") : t("modelSelectMode");
+    }
+    renderModelGrid();
+    renderBulkActionBar();
+}
+
+export function toggleModelSelection(modelName) {
+    if (state.selectedModels.has(modelName)) {
+        state.selectedModels.delete(modelName);
+    } else {
+        state.selectedModels.add(modelName);
+    }
+    // Update DOM directly (avoid full re-render)
+    document.querySelectorAll("[data-model-name]").forEach((el) => {
+        if (el.dataset.modelName !== modelName) return;
+        const checked = state.selectedModels.has(modelName);
+        el.classList.toggle("wfm-card-checked", checked);
+        const c = el.querySelector(".wfm-select-check");
+        if (c) c.classList.toggle("checked", checked);
+    });
+    renderBulkActionBar();
+}
+
+export function clearSelection() {
+    state.selectedModels.clear();
+    renderModelGrid();
+    renderBulkActionBar();
+}
+
+export function selectAll() {
+    filterModels().forEach(m => state.selectedModels.add(m));
+    renderModelGrid();
+    renderBulkActionBar();
+}
+
+export function renderBulkActionBar() {
+    const bar = document.getElementById("wfm-models-bulk-bar");
+    if (!bar) return;
+    if (!state.selectMode || state.selectedModels.size === 0) {
+        bar.style.display = "none";
+        return;
+    }
+    const count = state.selectedModels.size;
+    const groupNames = Object.keys(state.modelGroups).sort();
+    const noGroups = groupNames.length === 0;
+    const groupOptions = noGroups
+        ? `<option value="">${t("modelsNoGroupAvailable")}</option>`
+        : groupNames.map((g) => `<option value="${escapeHtml(g)}">${escapeHtml(g)}</option>`).join("");
+
+    const palette = getBadgePalette();
+    const badgeLabels = Object.keys(palette).sort();
+    const noBadges = badgeLabels.length === 0;
+    const badgeOptions = noBadges
+        ? `<option value="">${t("modelBulkNoBadge")}</option>`
+        : badgeLabels.map((b) => `<option value="${escapeHtml(b)}">${escapeHtml(b)}</option>`).join("");
+
+    bar.style.display = "flex";
+    bar.innerHTML = `
+        <div class="wfm-bulk-header">
+            <span class="wfm-bulk-count">${count} ${t("modelSelected")}</span>
+            <button class="wfm-btn wfm-btn-sm" id="wfm-bulk-deselect-all-btn">${t("modelBulkDeselectAll")}</button>
+            <button class="wfm-btn wfm-btn-sm" id="wfm-bulk-select-all-btn">${t("modelBulkSelectAll")}</button>
+            <span class="wfm-bulk-sep"></span>
+            <button class="wfm-btn wfm-btn-sm" id="wfm-bulk-fav-add-btn">${t("modelBulkFavAdd")}</button>
+            <button class="wfm-btn wfm-btn-sm" id="wfm-bulk-fav-remove-btn">${t("modelBulkFavRemove")}</button>
+        </div>
+        <div class="wfm-bulk-rows">
+            <div class="wfm-bulk-row">
+                <span class="wfm-bulk-row-label">Group:</span>
+                <select id="wfm-bulk-group-select" class="wfm-select wfm-bulk-select">${groupOptions}</select>
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-bulk-add-btn"${noGroups ? " disabled" : ""}>${t("modelBulkAddGroup")}</button>
+                <button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-bulk-remove-btn"${noGroups ? " disabled" : ""}>${t("modelBulkRemoveGroup")}</button>
+                <span class="wfm-bulk-sep"></span>
+                <input type="text" id="wfm-bulk-new-group-input" class="wfm-search-input wfm-bulk-input" placeholder="${t("modelsGroupName")}">
+                <button class="wfm-btn wfm-btn-sm" id="wfm-bulk-create-add-btn">${t("modelBulkCreateAdd")}</button>
+            </div>
+            <div class="wfm-bulk-row">
+                <span class="wfm-bulk-row-label">Badge:</span>
+                <select id="wfm-bulk-badge-select" class="wfm-select wfm-bulk-select">${badgeOptions}</select>
+                <button class="wfm-btn wfm-btn-sm wfm-btn-primary" id="wfm-bulk-badge-apply-btn"${noBadges ? " disabled" : ""}>${t("modelBulkBadgeApply")}</button>
+                <button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-bulk-badge-remove-btn"${noBadges ? " disabled" : ""}>${t("modelBulkBadgeRemove")}</button>
+            </div>
+            <div class="wfm-bulk-row">
+                <span class="wfm-bulk-row-label">File:</span>
+                <select id="wfm-bulk-move-select" class="wfm-select wfm-bulk-select">
+                    <option value="">${t("modelBulkMoveRoot")}</option>
+                    ${state.subdirs.map((d) => `<option value="${escapeHtml(d)}">${escapeHtml(d)}</option>`).join("")}
+                </select>
+                <button class="wfm-btn wfm-btn-sm" id="wfm-bulk-move-btn">${t("modelBulkMoveBtn")}</button>
+                <span class="wfm-bulk-sep"></span>
+                <input type="text" id="wfm-bulk-new-dir-input" class="wfm-search-input wfm-bulk-input" placeholder="${t("modelBulkMoveNewFolder")}">
+                <button class="wfm-btn wfm-btn-sm" id="wfm-bulk-mkdir-move-btn">${t("modelBulkMoveCreateMove")}</button>
+                <span style="flex:1"></span>
+                <button class="wfm-btn wfm-btn-sm wfm-btn-danger" id="wfm-bulk-delete-btn">${t("modelBulkDelete")}</button>
+            </div>
+        </div>
+    `;
+
+    document.getElementById("wfm-bulk-deselect-all-btn")?.addEventListener("click", clearSelection);
+    document.getElementById("wfm-bulk-select-all-btn")?.addEventListener("click", selectAll);
+    document.getElementById("wfm-bulk-fav-add-btn")?.addEventListener("click", () => bulkSetFavorite(true));
+    document.getElementById("wfm-bulk-fav-remove-btn")?.addEventListener("click", () => bulkSetFavorite(false));
+    document.getElementById("wfm-bulk-add-btn")?.addEventListener("click", () => {
+        const g = document.getElementById("wfm-bulk-group-select")?.value;
+        if (g) bulkAddToGroup(g);
+    });
+    document.getElementById("wfm-bulk-remove-btn")?.addEventListener("click", () => {
+        const g = document.getElementById("wfm-bulk-group-select")?.value;
+        if (g) bulkRemoveFromGroup(g);
+    });
+    document.getElementById("wfm-bulk-create-add-btn")?.addEventListener("click", () => {
+        const input = document.getElementById("wfm-bulk-new-group-input");
+        const name = input?.value.trim();
+        if (!name) return;
+        if (state.modelGroups[name]) { showToast(t("modelsGroupExists"), "warning"); return; }
+        bulkAddToGroup(name);
+    });
+    document.getElementById("wfm-bulk-badge-apply-btn")?.addEventListener("click", () => {
+        const label = document.getElementById("wfm-bulk-badge-select")?.value;
+        if (label) bulkApplyBadge(label, true);
+    });
+    document.getElementById("wfm-bulk-badge-remove-btn")?.addEventListener("click", () => {
+        const label = document.getElementById("wfm-bulk-badge-select")?.value;
+        if (label) bulkApplyBadge(label, false);
+    });
+    document.getElementById("wfm-bulk-move-btn")?.addEventListener("click", () => {
+        const dest = document.getElementById("wfm-bulk-move-select")?.value || "";
+        bulkMoveModels(dest);
+    });
+    document.getElementById("wfm-bulk-mkdir-move-btn")?.addEventListener("click", () => {
+        const input = document.getElementById("wfm-bulk-new-dir-input");
+        const name = input?.value.trim();
+        if (!name) return;
+        bulkMoveModels(name);
+    });
+    document.getElementById("wfm-bulk-delete-btn")?.addEventListener("click", bulkDeleteModels);
+}
+
+export async function bulkAddToGroup(groupName) {
+    const groups = { ...state.modelGroups };
+    if (!groups[groupName]) groups[groupName] = [];
+    const toAdd = [...state.selectedModels].filter((m) => !groups[groupName].includes(m));
+    groups[groupName] = [...groups[groupName], ...toAdd];
+    await saveModelGroups(groups);
+    showToast(`${toAdd.length} ${t("modelBulkAddDone")}`, "success");
+    renderBulkActionBar();
+}
+
+export async function bulkRemoveFromGroup(groupName) {
+    const groups = { ...state.modelGroups };
+    if (!groups[groupName]) return;
+    const before = groups[groupName].length;
+    groups[groupName] = groups[groupName].filter((m) => !state.selectedModels.has(m));
+    const removed = before - groups[groupName].length;
+    // RESERVED_GROUPS (Batch / Stack) は空になってもキーを保持する
+    if (groups[groupName].length === 0 && !RESERVED_GROUPS.includes(groupName)) delete groups[groupName];
+    await saveModelGroups(groups);
+    showToast(`${removed} ${t("modelBulkRemoveDone")}`, "success");
+    renderModelGrid();
+    renderBulkActionBar();
+}
+
+export async function bulkSetFavorite(isFav) {
+    const models = [...state.selectedModels];
+    let count = 0;
+    for (const mn of models) {
+        const meta = state.modelMetadata[mn] || {};
+        if (meta.favorite === isFav) continue;
+        await saveModelMetadata(mn, { favorite: isFav });
+        count++;
+    }
+    if (count > 0) {
+        showToast(`${count} ${isFav ? t("modelBulkFavDone") : t("modelBulkUnfavDone")}`, "success");
+        renderModelGrid();
+    }
+}
+
+export async function bulkApplyBadge(badgeLabel, add) {
+    const models = [...state.selectedModels];
+    let count = 0;
+    for (const mn of models) {
+        const meta = state.modelMetadata[mn] || {};
+        const badges = [...(meta.badges || [])];
+        if (add) {
+            if (badges.includes(badgeLabel)) continue;
+            badges.push(badgeLabel);
+        } else {
+            const idx = badges.indexOf(badgeLabel);
+            if (idx === -1) continue;
+            badges.splice(idx, 1);
+        }
+        await saveModelMetadata(mn, { badges });
+        count++;
+    }
+    if (count > 0) {
+        showToast(`${count} ${add ? t("modelBulkBadgeApplyDone") : t("modelBulkBadgeRemoveDone")}`, "success");
+        renderModelGrid();
+    }
+}
+
+export async function bulkDeleteModels() {
+    const count = state.selectedModels.size;
+    if (count === 0) return;
+    const msg = t("modelBulkDeleteConfirm").replace("{count}", count);
+    if (!window.confirm(msg)) return;
+
+    const model_names = [...state.selectedModels];
+    try {
+        const res = await fetch("/api/wfm/models/delete", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ model_type: state.activeModelType, model_names }),
+        });
+        const data = await res.json();
+        const okCount = (data.ok || []).length;
+        const errCount = (data.errors || []).length;
+        if (errCount > 0) {
+            showToast(`${t("modelBulkDeleteError")}: ${errCount} errors`, "error");
+        }
+        if (okCount > 0) {
+            showToast(`${okCount} ${t("modelBulkDeleteDone")}`, "success");
+            // Remove deleted models from local state
+            model_names.forEach((mn) => {
+                const list = state.modelsByType[state.activeModelType];
+                const idx = list.indexOf(mn);
+                if (idx !== -1) list.splice(idx, 1);
+                delete state.modelMetadata[mn];
+                const ds = state.disabledModels[state.activeModelType];
+                if (ds) ds.delete(mn);
+                state.selectedModels.delete(mn);
+            });
+            state.loaded[state.activeModelType] = false;
+            renderModelGrid();
+            renderBulkActionBar();
+        }
+    } catch (err) {
+        showToast(`${t("modelBulkDeleteError")}: ${err.message}`, "error");
+    }
+}
+
+export async function fetchSubdirs() {
+    try {
+        const res = await fetch(`/api/wfm/models/subdirs?type=${encodeURIComponent(state.activeModelType)}`);
+        state.subdirs = res.ok ? await res.json() : [];
+    } catch { state.subdirs = []; }
+}
+
+export async function bulkMoveModels(destSubdir) {
+    const model_names = [...state.selectedModels];
+    if (model_names.length === 0) return;
+    try {
+        const res = await fetch("/api/wfm/models/move", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ model_type: state.activeModelType, model_names, dest: destSubdir }),
+        });
+        const data = await res.json();
+        const okCount = data.moved?.length || 0;
+        const errCount = data.errors?.length || 0;
+
+        if (okCount > 0) {
+            data.moved.forEach(({ from, to }) => {
+                const list = state.modelsByType[state.activeModelType];
+                const idx = list.indexOf(from);
+                if (idx !== -1) list[idx] = to;
+                if (state.modelMetadata[from]) {
+                    state.modelMetadata[to] = state.modelMetadata[from];
+                    delete state.modelMetadata[from];
+                }
+                const ds = state.disabledModels[state.activeModelType];
+                if (ds && ds.has(from)) { ds.delete(from); ds.add(to); }
+                state.selectedModels.delete(from);
+                for (const members of Object.values(state.modelGroups)) {
+                    const gi = members.indexOf(from);
+                    if (gi !== -1) members[gi] = to;
+                }
+            });
+            if (state.selectedModel && data.moved.some((m) => m.from === state.selectedModel)) {
+                state.selectedModel = null;
+                const titleEl = document.getElementById("wfm-models-panel-title");
+                if (titleEl) titleEl.textContent = "";
+            }
+            showToast(`${okCount} ${t("modelBulkMoveDone")}`, "success");
+            await fetchSubdirs();
+            renderDirFilter();
+            renderModelGrid();
+            renderBulkActionBar();
+        }
+        if (errCount > 0) {
+            showToast(`${t("modelBulkMoveError")}: ${data.errors[0].error}`, "error");
+        }
+    } catch (err) {
+        showToast(`${t("modelBulkMoveError")}: ${err.message}`, "error");
+    }
+}
@@ -0,0 +1,100 @@
+/**
+ * Models Tab - Shared state and static lookup tables
+ * `state` is a `const` object never reassigned — modules read/write its
+ * properties directly, which stays within ESM's read-only binding rule
+ * (only the binding itself, not the object it points to, is immutable).
+ */
+
+import { comfyUI } from "../comfyui-client.js";
+
+export const RESERVED_GROUPS = ["Batch", "Stack"];
+export const BATCH_MODEL_TYPES = ["checkpoint", "lora"];
+export const STACK_MODEL_TYPES = ["lora"];
+
+export const state = {
+    modelsByType: {
+        checkpoint: [],
+        lora: [],
+        vae: [],
+        controlnet: [],
+        unet: [],
+        textencoder: [],
+        hypernetwork: [],
+        embedding: [],
+    },
+    modelMetadata: {},
+    modelGroups: {},
+    allModelGroups: {},  // { type: { groupName: [models] } } — all types
+    civitaiCache: {},
+    disabledModels: {},   // { type: Set<modelName> }
+    previewKeys: {},      // { type: Set<"subdir/stem"(小文字)> } プレビュー画像を持つモデル。未取得の型は従来どおり都度リクエスト
+    subdirs: [],
+    selectMode: false,
+    selectedModels: new Set(),
+    searchText: "",
+    tagFilter: "",
+    badgeFilter: "",
+    dirFilter: "",
+    groupFilter: "",
+    statusFilter: "all",  // "all" | "enabled" | "disabled"
+    showFavoritesOnly: false,
+    showBatchOnly: false,
+    viewMode: localStorage.getItem("wfm_models_view") === "table" ? "table" : "thumb",
+    activeModelType: "checkpoint",
+    selectedModel: null,
+    loaded: {},
+    currentPage: 0,
+    sortColumn: null,  // "fav" | "filename" | "subdir" | "civtype" | "basemodel" | "ext" | "tags" | "memo" | "enabled"
+    sortDir: "asc",    // "asc" | "desc"
+};
+
+
+// 設定「モデルフォルダ」で追加されたフォルダのモデル（ComfyUIのobject_infoには出ない）
+async function fetchExtraModels(type) {
+    try {
+        const res = await fetch(`/api/wfm/models/files?type=${encodeURIComponent(type)}&extra_only=1`);
+        if (res.ok) {
+            const list = await res.json();
+            return Array.isArray(list) ? list : [];
+        }
+    } catch {}
+    return [];
+}
+
+const withExtra = (type, fn) => async () => {
+    const [base, extra] = await Promise.all([fn(), fetchExtraModels(type)]);
+    return extra.length ? [...new Set([...base, ...extra])] : base;
+};
+
+export const FETCH_MAP = {
+    checkpoint: withExtra("checkpoint", () => comfyUI.fetchCheckpoints()),
+    lora: withExtra("lora", () => comfyUI.fetchLoras()),
+    vae: withExtra("vae", () => comfyUI.fetchVaes()),
+    controlnet: withExtra("controlnet", () => comfyUI.fetchControlNets()),
+    unet: withExtra("unet", () => comfyUI.fetchDiffusionModels()),
+    textencoder: withExtra("textencoder", () => comfyUI.fetchTextEncoders()),
+    hypernetwork: withExtra("hypernetwork", () => comfyUI.fetchHypernetworks()),
+    embedding: () => comfyUI.fetchEmbeddings(),
+};
+
+export const TYPE_LABELS = {
+    checkpoint: "Checkpoint",
+    lora: "LoRA",
+    vae: "VAE",
+    controlnet: "ControlNet",
+    unet: "UNET",
+    textencoder: "TextEncoder",
+    hypernetwork: "Hypernetwork",
+    embedding: "Embedding",
+};
+
+// Mapping from models-tab type → comfyui-editor key + inputKey
+export const GENUI_TYPE_MAP = {
+    checkpoint:   { key: "checkpoints",    inputKey: "ckpt_name" },
+    lora:         { key: "loras",          inputKey: "lora_name" },
+    vae:          { key: "vaes",           inputKey: "vae_name" },
+    controlnet:   { key: "controlNets",    inputKey: "control_net_name" },
+    unet:         { key: "diffusionModels",inputKey: "unet_name" },
+    textencoder:  { key: "textEncoders",   inputKey: "clip_name1" },
+    hypernetwork: { key: "hypernetworks",  inputKey: "hypernetwork_name" },
+};
--- a/Show More
+++ b/Show More