Add files via upload

README.md

@@ -16,7 +16,7 @@ In the rapidly evolving landscape of AI art tools, legacy plugins have become bl
 
 **Anomalous Model Browser** was born out of an extreme pursuit of minimalism and high performance:
 - **True Zero Dependencies**: We completely abandoned Node.js, Webpack, Vue/React/Svelte, and other heavy frontend tools. The entire extension is written in pure **Native Python + Vanilla JS**!
-- **Unmatched Performance**: With a total codebase of under 100KB, it delivers a much smoother experience. No background polling loops, no memory leaks—just plug and play with millisecond response times.
+- **Unmatched Performance**: With a total codebase of under 200KB, it delivers a much smoother experience. No background polling loops, no memory leaks—just plug and play with millisecond response times.
 - **Smart Association & Synchronization**: Say goodbye to complex database building. It smartly and seamlessly associates your `.safetensors` files with their corresponding `.info` descriptions and `.png`/`.mp4` previews purely through file naming.
 
 ### ✨ Core Features
@@ -56,6 +56,11 @@ In the rapidly evolving landscape of AI art tools, legacy plugins have become bl
    - **Seamless i18n**: Switch between beautifully formatted pure English or pure Chinese UI with a single click, instantly transforming all buttons, dialogs, and dynamic text.
    - **Interactive Help Modal**: Never feel lost with the built-in `❓ Help` manual explaining every feature natively within the plugin. The sandwich layout ensures the close button is never pushed off-screen regardless of how long the text is.
 
+7. **📑 Advanced Notebook System**
+   - **Bilingual Prompt Editor**: A dedicated drafting workspace for your prompts featuring a dual-pane side-by-side translator. It auto-splits your prompts by commas into visual interactive tags with 1-click copying!
+   - **Smart Architecture Filtering**: Select a Base Model from your local models, and the Notebook automatically curates a pristine, cross-folder gallery of exactly compatible Main Models and Loras.
+   - **One-Click Deployment**: Compile your entire notebook (Checkpoints, multiple Loras, Prompts) and click 'Send to Canvas' to instantly deploy a fully connected workflow to your ComfyUI workspace.
+
 ### 📥 Installation
 
 Say goodbye to `pip install` and `npm install`!
@@ -80,7 +85,7 @@ Say goodbye to `pip install` and `npm install`!
 
 **Anomalous Model Browser** 诞生于对“极简主义”和“高性能”的极致追求：
 - **真正的零依赖**：我们彻底抛弃了 Node.js、Webpack、Vue/React 等重型武器。全端采用最纯粹的 **原生 Python + Vanilla JS** 编写！
-- **降维打击的性能**：不到 100KB 的总代码量，实现了极度丝滑的体验。没有内存泄漏，即插即用，毫秒级响应。
+- **降维打击的性能**：不到 200KB 的总代码量，实现了极度丝滑的体验。没有内存泄漏，即插即用，毫秒级响应。
 - **智能级联关联机制**：不再需要复杂的数据库，直接通过底层文件名映射，无缝关联 `.safetensors` 与其对应的 `.info` 描述及动态预览媒体。
 
 ### ✨ 核心特性
@@ -119,6 +124,11 @@ Say goodbye to `pip install` and `npm install`!
    - **无缝 i18n 切换**：一键在纯中文与纯英文界面间自由切换，告别拥挤的双语混排，所有弹窗与提示会瞬间自适应目标语言。并针对英文排版做了动态文字缩放，确保界面永不换行崩塌。
    - **交互式帮助面板**：内置随叫随到的 `❓ 帮助` 面板，提供中英文纯血的详细说明书，再也不用切回 GitHub 看使用文档了！三明治结构设计保证关闭按钮永远固定在视野内，不会因为文字过多而点不到。
 
+7. **📑 极客级笔记本 (Notebook) 系统**
+   - **双语交互式提示词工作台**：内置了极具高级感的双向对照编辑器，利用深色模式和磨砂质感，自动将你的中英文提示词按逗号拆分成一个个悬停交互的高级标签快，指哪亮哪，并支持一键精准复制单个单词！
+   - **纯净架构雷达筛选**：当你新建一本笔记本并选定底模架构（纯净抓取你本地拥有的架构，绝不硬编码凑数），下方的图库会自动为你过滤出所有适配的主模型与 Lora，告别漫无目的的翻找。
+   - **一键爆破式部署**：草稿打完后，点击“发送到画布”，所有的 Checkpoint、Lora 节点甚至连线逻辑都会瞬间部署至你的 ComfyUI 画布，真正的一气呵成！
+
 ### 📥 极简安装说明
 
 告别 `pip install` 和 `npm install`！

__init__.py

@@ -1,12 +1,12 @@
-import os
-from .api import setup_routes
-from server import PromptServer
-
-WEB_DIRECTORY = "./web"
-
-# 注册 API 路由
-setup_routes(PromptServer.instance.app)
-
-NODE_CLASS_MAPPINGS = {}
-NODE_DISPLAY_NAME_MAPPINGS = {}
-__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']
+import os
+from .api import setup_routes
+from server import PromptServer
+
+WEB_DIRECTORY = "./web"
+
+# 注册 API 路由
+setup_routes(PromptServer.instance.app)
+
+NODE_CLASS_MAPPINGS = {}
+NODE_DISPLAY_NAME_MAPPINGS = {}
+__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY']

api.py

@@ -496,10 +496,10 @@ async def api_compatible_models(request):
                         seen_files.add(real_path)
                         
                         meta = get_metadata(file_path)
+                        m_bm = str(meta.get("baseModel", "")).strip().lower().replace(" ", "")
+                        req_bm = str(base_model).strip().lower().replace(" ", "")
                         
-                        m_bm = str(meta.get("baseModel", "")).strip().lower()
-                        req_bm = str(base_model).strip().lower()
-                        if m_bm and m_bm == req_bm:
+                        if req_bm and m_bm and (req_bm in m_bm or m_bm in req_bm):
                             rel_subfolder = os.path.relpath(root, base_dir)
                             if rel_subfolder == '.':
                                 rel_subfolder = '/'
@@ -539,6 +539,145 @@ async def api_compatible_models(request):
                         
     return web.json_response({"models": compatible_models})
 
+async def api_get_notebooks(request):
+    script_dir = os.path.dirname(os.path.abspath(__file__))
+    nb_dir = os.path.join(script_dir, "notebooks")
+    if not os.path.exists(nb_dir):
+        os.makedirs(nb_dir)
+    
+    notebooks = []
+    for f in os.listdir(nb_dir):
+        if f.endswith('.json'):
+            try:
+                with open(os.path.join(nb_dir, f), 'r', encoding='utf-8') as file:
+                    data = json.load(file)
+                    notebooks.append({
+                        "filename": f,
+                        "name": data.get("name", f.replace('.json', '')),
+                        "data": data
+                    })
+            except Exception:
+                pass
+    return web.json_response({"notebooks": notebooks})
+
+async def api_save_notebook(request):
+    try:
+        data = await request.json()
+        filename = data.get("filename", "")
+        if not filename or '..' in filename:
+            return web.json_response({"status": "error", "message": "Invalid filename"})
+        if not filename.endswith('.json'):
+            filename += '.json'
+            
+        script_dir = os.path.dirname(os.path.abspath(__file__))
+        nb_dir = os.path.join(script_dir, "notebooks")
+        if not os.path.exists(nb_dir):
+            os.makedirs(nb_dir)
+            
+        file_path = os.path.join(nb_dir, filename)
+        with open(file_path, 'w', encoding='utf-8') as f:
+            json.dump(data.get("data", {}), f, indent=4, ensure_ascii=False)
+            
+        return web.json_response({"status": "success"})
+    except Exception as e:
+        return web.json_response({"status": "error", "message": str(e)})
+
+async def api_delete_notebook(request):
+    try:
+        data = await request.json()
+        filename = data.get("filename", "")
+        if not filename or '..' in filename:
+            return web.json_response({"status": "error", "message": "Invalid filename"})
+            
+        script_dir = os.path.dirname(os.path.abspath(__file__))
+        nb_dir = os.path.join(script_dir, "notebooks")
+        file_path = os.path.join(nb_dir, filename)
+        
+        if os.path.exists(file_path):
+            os.remove(file_path)
+            return web.json_response({"status": "success"})
+        return web.json_response({"status": "error", "message": "File not found"})
+    except Exception as e:
+        return web.json_response({"status": "error", "message": str(e)})
+
+async def api_translate(request):
+    try:
+        data = await request.json()
+        text = data.get("text", "")
+        tl = data.get("target_lang", "zh-CN")
+        if not text:
+            return web.json_response({"translated": ""})
+            
+        # Try DeepL if API key exists
+        script_dir = os.path.dirname(os.path.abspath(__file__))
+        config_path = os.path.join(script_dir, "config.json")
+        deepl_key = ""
+        if os.path.exists(config_path):
+            try:
+                with open(config_path, 'r', encoding='utf-8') as f:
+                    cfg = json.load(f)
+                    deepl_key = cfg.get("DEEPL_API_KEY", "").strip()
+            except:
+                pass
+                
+        if deepl_key:
+            deepl_map = { "zh-CN": "ZH", "en": "EN", "ja": "JA", "ko": "KO", "fr": "FR", "de": "DE", "es": "ES", "ru": "RU" }
+            d_tl = deepl_map.get(tl, "EN")
+            url = "https://api-free.deepl.com/v2/translate" if ":fx" in deepl_key else "https://api.deepl.com/v2/translate"
+            payload = urllib.parse.urlencode({
+                "auth_key": deepl_key,
+                "text": text,
+                "target_lang": d_tl
+            }).encode('utf-8')
+            req = urllib.request.Request(url, data=payload)
+            with urllib.request.urlopen(req, timeout=5) as resp:
+                result = json.loads(resp.read().decode('utf-8'))
+                return web.json_response({"translated": result["translations"][0]["text"]})
+        else:
+            # Fallback to Google Translate (free, no key)
+            url = f"https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl={tl}&dt=t&q={urllib.parse.quote(text)}"
+            req = urllib.request.Request(url, headers={'User-Agent': 'Mozilla/5.0'})
+            with urllib.request.urlopen(req, timeout=5) as resp:
+                result = json.loads(resp.read().decode('utf-8'))
+                # Google Translate returns a list of fragments
+                translated_text = "".join([part[0] for part in result[0]])
+                return web.json_response({"translated": translated_text})
+                
+    except Exception as e:
+        print(f"Translate Error: {e}")
+        return web.json_response({"translated": text, "error": str(e)})
+
+
+async def api_base_models(request):
+    target_types = ['checkpoints', 'unet', 'diffusion_models', 'loras']
+    base_models = set()
+    seen_files = set()
+    
+    for t in target_types:
+        try:
+            paths = folder_paths.get_folder_paths(t)
+        except Exception:
+            continue
+        if not paths: continue
+            
+        for base_dir in paths:
+            if not os.path.exists(base_dir): continue
+            for root, _, files in os.walk(base_dir):
+                for f in files:
+                    if f.endswith('.safetensors') or f.endswith('.ckpt') or f.endswith('.pt'):
+                        file_path = os.path.join(root, f)
+                        real_path = os.path.realpath(file_path)
+                        if real_path in seen_files: continue
+                        seen_files.add(real_path)
+                        
+                        meta = get_metadata(file_path)
+                        m_bm = meta.get("baseModel", "")
+                        if m_bm and str(m_bm).strip():
+                            # Remove typical generic strings that might pollute
+                            clean_bm = str(m_bm).strip()
+                            base_models.add(clean_bm)
+                            
+    return web.json_response({"base_models": sorted(list(base_models))})
 
 def setup_routes(app):
     app.router.add_get('/anomalous/folders', api_get_folders)
@@ -551,4 +690,8 @@ def setup_routes(app):
     app.router.add_post('/anomalous/delete_model', api_delete_model)
     app.router.add_post('/anomalous/clean_civitai_info', api_clean_civitai_info)
     app.router.add_get('/anomalous/compatible_models', api_compatible_models)
-
+    app.router.add_get('/anomalous/notebooks', api_get_notebooks)
+    app.router.add_post('/anomalous/save_notebook', api_save_notebook)
+    app.router.add_post('/anomalous/delete_notebook', api_delete_notebook)
+    app.router.add_post('/anomalous/translate', api_translate)
+    app.router.add_get('/anomalous/base_models', api_base_models)

changelog_v1.0.1.md

@@ -0,0 +1,22 @@
+# 📈 Changelog v1.0.1
+
+## 🌟 New Features
+- **Notebook System (`📑 Notebooks`)**: A powerful new drafting space designed for workflow preparation.
+  - **Bilingual Prompt Editor**: A dual-pane translation workspace (English/Chinese) that supports Google and DeepL translation via local Python backend (caching in `translations.json`).
+  - **Interactive Tag Engine**: Automatically splits prompts by commas into styled tags. Includes hover-sync between English and Chinese tags, individual tag editing, and 1-click clipboard copying.
+  - **Dynamic Architecture Filtering**: The Notebook allows selecting a Base Model directly parsed from your local library (e.g., `SDXL`, `SD 1.5`, `Pony`), strictly omitting unowned default models. Selecting an architecture perfectly filters the Main Model and Lora galleries below it.
+  - **One-Click Deployment**: The **"🚀 Send to Canvas"** button seamlessly injects your configured Checkpoint loader, Lora loaders, and CLIP Text Encode nodes directly onto the ComfyUI canvas, fully wired and ready to go.
+
+## 🛠️ Enhancements & UX Tweaks
+- **Zero-Wait Delete Actions**: The "Delete Notebook" interaction has been overhauled. Instead of a mandatory 3-second wait, it now transforms into an explicit `[⚠️ Sure?]` and `[✕]` cancellation button combo, dramatically improving the user experience for accidental clicks.
+- **Buttery Smooth Hover Dynamics**: Replaced harsh instant hovers on model cards with a `cubic-bezier(0.2, 0.8, 0.2, 1)` transition and a micro `0.02s` delay. This eliminates strobe-flashing when the mouse sweeps quickly across galleries, providing an extremely premium damping feel.
+- **Smart Startup Navigation**: The plugin no longer opens to an empty root directory by default. It now intelligently scans all loaded trees on startup and auto-focuses the first valid folder containing models, ensuring you dive straight into your library.
+- **Deep i18n Integration**: Total internationalization coverage extended to all deep-layer UI elements, including Notebook buttons, translation triggers, and dynamic dialogs. Language toggling triggers an instant virtual DOM re-render without page refreshes.
+
+## 🐛 Bug Fixes
+- **Base Model Metadata Pollution**: Fixed an issue where the `baseModel` dropdown forcefully injected unowned models (like `HunyuanVideo` or `OmniGen`) into the UI. The filter now strictly traverses actual local `.safetensors` headers and `.info` configurations to provide a 100% accurate reflection of your physical library.
+- **Nested Scrolling Traps**: Eliminated a severe UX "scroll trap" within the Notebook dual-pane editor by removing inner `max-height` constraints, allowing natural flex expansion utilizing the modal's primary scrollbar.
+- **Model Selection Jumping**: Fixed layout shifting caused by variable-length text tags by implementing a rigid CSS grid/flex architecture (`.anomalous-nb-tag-row`).
+
+---
+*Anomalous Model Browser - Continuing the pursuit of absolute minimalism and uncompromised performance.*

changelog_v1.0.2.md

@@ -0,0 +1,13 @@
+# Changelog v1.0.2 (UX & Polish Hotfix)
+
+## 🚀 Enhancements
+- **Magnetic Matrix Deployment**: When sending a Notebook to the canvas, the entire architecture (Checkpoint + Loras + CLIP Encoders) is now mathematically arranged in a clean, linear assembly line instead of clumping together. The entire node group magnetically sticks to your cursor until you click the canvas to drop it.
+- **Smart Session Memory**: Re-opening the Notebook panel now instantly resumes your exact previous editing session rather than resetting to a blank state.
+- **Auto-Focus First Notebook**: If no session is active, opening the Notebook modal will automatically open your first existing notebook to prevent "empty screen" fatigue.
+- **Instant Save Feedback**: Added a satisfying 1.5-second green `✅` transient animation to the notebook save button for psychological assurance.
+- **Clearer Documentation**: Updated README codebase size estimation to reflect reality (~150KB - 200KB) due to the massive features added, while still maintaining pure Vanilla JS zero-dependency dominance.
+
+## 🐛 Bug Fixes
+- **Double Icon Glitch**: Removed a hardcoded `➕` emoji on the "Apply to Canvas" button that duplicated the icon injected by the translation engine.
+- **Localization Override**: Fixed a critical bug where scan success dialogs were defaulting to English despite the UI being set to Chinese. This was caused by the plugin improperly reading the host ComfyUI root DOM `lang` attribute instead of the plugin's internal state.
+- **Safer Reboot Advice**: Replaced misleading mentions of "Refresh ComfyUI" with strict advice to "Restart ComfyUI backend" after model scans to prevent deep path caching crashes.

config.example.json

@@ -1,3 +1,3 @@
-{
-  "CIVITAI_API_KEY": ""
-}
+{
+  "CIVITAI_API_KEY": ""
+}

error_and_experience_summary.md

@@ -1,30 +1,63 @@
-# 插件开发纠错与经验沉淀 (Error & Experience Summary)
+# 📖 Error & Experience Summary
 
-在开发与完善 `Anomalous_Model_Browser` 插件的过程中，我们遇到了几个典型的技术陷阱与用户体验问题。为了便于后续维护和其他开发者参考，特在此归纳沉淀：
+This document serves as an architectural retrospective and UX diagnostic log for the development of the Anomalous Model Browser.
 
-## 1. 后台 API 数据传递与作用域异常 (UnboundLocalError)
-**问题描述**：在重构 `api.py` 中的 `api_compatible_models`（跨文件夹兼容模型扫描）逻辑时，遇到了前端抛出 500 错误（`Failed to load`）。
-**根源分析**：在 Python 中，如果一个变量（如 `rel_subfolder`）在 `if` 语句块内部被赋值，但在执行时该 `if` 条件未满足，后续代码又尝试读取该变量，就会引发 `UnboundLocalError`。在我们早期的代码缩进修复中，因为缩进层级错乱，导致赋值语句和读取语句的逻辑层级脱节。
-**解决方案**：严格对齐缩进，并确保所有分支（尤其是 `preview_url` 等变量）在被使用前都有安全的默认回退值（Fallback initialization, 如 `preview_url = ""`）。
+## 1. UX Scroll Traps (Nested Scrollbars)
+**The Problem**:
+In the Notebook modal, the translation dual-pane editor was initially assigned a `max-height: 400px` and `overflow-y: auto`. Since the parent container (the entire notebook editor body) was also scrollable, this created a severe "Scroll Trap". When users scrolled down the translation tags, hitting the bottom would unpredictably transfer the scroll event to the outer body, making navigation feel disjointed and frustrating.
+**The Solution**:
+Removed the `max-height` and internal scrollbar from the translation pane entirely. Letting the translation editor expand naturally utilizing the primary window scrollbar guarantees a continuous, smooth scrolling experience.
 
-## 2. 文件夹别名导致的重复加载问题 (Duplicate Models)
-**问题描述**：前端模型兼容列表出现了两个完全一模一样的 Flux 模型。
-**根源分析**：前端触发搜索时，同时传入了 `checkpoints,unet,diffusion_models` 三个目录作为扫描目标。而在 ComfyUI 的环境配置中，`unet` 和 `diffusion_models` 经常被映射到硬盘上的**同一个物理文件夹**。后台在遍历时，对同一个文件夹扫描了两次，导致相同文件被重复添加。
-**解决方案**：使用 `seen_files = set()` 记录已处理文件的**绝对物理路径**（`os.path.realpath(file_path)`），即使软链接或不同挂载点指向同一文件，也能被精准去重拦截。
+## 2. Artificial Metadata Pollution
+**The Problem**:
+When building the "Base Model" dropdown filter, the backend `api.py` attempted to aggregate local `baseModel` strings but fell back to aggressively injecting a hardcoded list of modern architectures (`SDXL`, `HunyuanVideo`, `OmniGen`) to ensure the dropdown looked "complete." This completely backfired, confusing the user who saw architectures they didn't even own installed on their drive.
+**The Solution**:
+Data truth must strictly reflect the local disk state. The backend was rewritten to strictly parse the `.safetensors`/`.civitai.info` headers without any artificial list padding. The UI dropdown now acts as an accurate mirror of the physical file ecosystem.
 
-## 3. 增量扫描逻辑的盲区 (Scanner Skip Logic)
-**问题描述**：用户手动删除了某个模型的 `.info` 文件或预览图，点击后台扫描引擎却没有补齐，依然直接跳过。
-**根源分析**：早期的增量逻辑比较“偷懒”，只要发现同名的 `.info` 文件存在，就直接 `continue` 跳过，忽略了对预览图的二次检查。
-**解决方案**：重写扫描引擎的短路逻辑。采用“三证合一”严苛检查：只有当 `.info` 文件存在，**且**同名的 `[.png, .jpg, .mp4, .webm]` 预览媒体中至少有一项存在时，才允许跳过；否则强制触发 C 站接口进行重扫补齐。
+## 3. UI Strobe Effects on Grid Hovers
+**The Problem**:
+Setting standard `transition: all 0.2s` for the hover states on model cards meant that quickly sweeping the mouse across the grid caused all cards to rapidly light up and drop down like a strobe light. It felt cheap and unresponsive.
+**The Solution**:
+UI damping is critical for premium feel. We introduced a customized `cubic-bezier(0.2, 0.8, 0.2, 1)` transition with a microscopically tiny `transition-delay: 0.02s` on the hover pseudo-class. This 20ms delay is imperceptible for intentional interactions but acts as a low-pass filter, completely eliminating strobe flashes from fast, accidental mouse sweeps.
 
-## 4. UI/UX 自适应排版 (Responsive UI)
-**问题描述**：模型名称过长时，顶部固定栏被强行撑高并发生换行；说明面板太大导致底部关闭按钮超出屏幕外。
-**根源分析**：未对弹性盒子（Flexbox）进行文本溢出控制，且模态框缺乏滚动边界限制。
-**解决方案**：
-- **单行溢出省略**：对可能超长的标题应用 `white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;`。
-- **三明治模态布局**：对弹出面板应用 `max-height: 90vh`，并对其内部的文本内容层（Body）单独应用 `overflow-y: auto`。这样无论内容多长，只会在中间区域滚动，头部的“X”和底部的“关闭”按钮始终固定可见。
+## 4. "Hostage" Inline Confirmations
+**The Problem**:
+To avoid browser `alert()` dialogs during deletion, an inline confirmation was built: clicking "Delete" changed the button to "Are you sure?" with a 3-second `setTimeout`. However, there was no explicit "Cancel" button. If the user misclicked, they were held "hostage" for 3 seconds waiting for the button to revert.
+**The Solution**:
+Never lock a user out without an exit hatch. The delete button logic was wrapped in an inline flex container that instantly reveals a secondary `[✕]` cancel button upon the first click. Clicking `[✕]` instantly clears the timeout and resets the state, giving control back to the user immediately.
 
-## 5. 安全性审计 (Security Audit)
-对后端的关键路由进行了路径穿越（Path Traversal）核查：
-- `api_delete_model`, `api_serve_image`, `api_get_models` 均内置了 `if '..' in subfolder` 和 `if '..' in filename` 的强拦截逻辑，确保用户无法通过构造相对路径去跨级删除或访问插件/工作流之外的核心系统文件。
-- `api_serve_image` 增加了严格的文件拓展名（extension）白名单字典，强制转换 `Content-Type`，杜绝了把可执行脚本伪装成预览图返回的风险。
+## 5. First-load "Dead Interface" Avoidance
+**The Problem**:
+The plugin initialized its sidebar to the root directory `/`. If a user had deeply nested categories but no models in the root, opening the plugin presented a blank screen, creating the illusion that it had failed to load.
+**The Solution**:
+Implemented an intelligent `firstLoadDone` routine. During the initial folder fetch, the JS client parses the dictionary of directories, scanning the `model_count` parameters. It automatically forces the UI `currentSubfolder` to the very first directory that possesses `model_count > 0`. The user is instantly greeted with their content upon opening.
+
+## 6. Structural Layout Breakages (Flex vs Block)
+**The Problem**:
+When rendering translation tags side-by-side, placing varying lengths of text blocks sequentially caused extreme layout jitter. Hovering over a long English tag to highlight the Chinese counterpart caused the UI to "jump" if the lines didn't align perfectly.
+**The Solution**:
+Enforced a strict "Row-based" flex architecture (`.anomalous-nb-tag-row`). By slicing both the Source and Target arrays simultaneously and wrapping them in an `align-items: stretch` flex container, each tag pair is locked into a row, guaranteeing perfect geometric stability regardless of string length.
+
+## 7. Modal State Persistence vs DOM Lifecycle
+**The Problem**:
+When users closed the Notebook modal and reopened it, the right-side editor was blank. The JS application retained `this.currentNotebook` in memory from the previous session, skipping the "auto-open first notebook" logic, but because the DOM modal was completely destroyed and recreated via `.innerHTML`, the editor function `renderNotebookEditor()` was never invoked, leaving a desynced blank UI.
+**The Solution**:
+Explicitly check the cached state during modal initialization. If `this.currentNotebook` exists upon modal creation, force a call to `this.renderNotebookEditor()` instead of assuming it's already rendered. This achieves perfect "session memory" for the user.
+
+## 8. Missing Visual Feedback for Background Operations
+**The Problem**:
+The Notebook "Save" button executed a background `fetch` request perfectly, but provided absolutely no visual feedback. Users complained the button was "unresponsive" because nothing flashed or changed on screen, causing anxiety about data loss.
+**The Solution**:
+Transient UI states are mandatory for background tasks. We added a temporary state swap: clicking Save instantly changes the button to a green `✅` state for 1.5 seconds before reverting, providing the crucial psychological closure needed.
+
+## 9. Spatial Geometry for Multi-Node Spawning
+**The Problem**:
+When deploying an entire Notebook (Main Model + N Loras + 2 CLIP Prompts) to the ComfyUI canvas, spawning them all at `app.canvas.graph_mouse` or `(0,0)` would cause all nodes to perfectly overlap into an indistinguishable clump, forcing the user to manually detangle them.
+**The Solution**:
+Implemented a "Relative Offset Matrix Layout". The code iteratively calculates spatial offsets (`X + 350*N`, `Y + 250`) to construct a perfect assembly line of nodes. Combined with binding these coordinates to a `mousemove` event (Magnetic Sticking), the user can visually preview the massive node chain dragging with their cursor before clicking to drop it onto the canvas, preserving workflow layout sanity.
+
+## 10. Localization Host-Environment Constraints
+**The Problem**:
+Our localization engine was reading `document.documentElement.lang` to decide whether to show English or Chinese error popups. However, because our plugin runs inside ComfyUI, ComfyUI controls the root HTML element and keeps it permanently set to `en-US`. Consequently, Chinese users always received English system popups regardless of the plugin's internal language toggle.
+**The Solution**:
+Never trust the host document properties when building an embedded plugin. Localization logic was strictly re-routed to rely on our internal `currentLang` variable state, ensuring correct i18n rendering.

web/main.js

@@ -32,7 +32,7 @@ const i18n = {
         delConfirm: '确定彻底删除',
         delConfirm2: '及其所有关联配置、预览图和缓存文件吗？此操作不可逆！',
         delSuccess: '✅ 删除成功！\n',
-        delNote: '\n\n⚠️ 提示：请务必【重启 ComfyUI 服务端】。如果不重启，继续使用可能会报错！',
+        delNote: '\n\n⚠️ 提示：请重启 ComfyUI，否则由于缓存继续使用会报错',
         delFail: '❌ 删除失败: ',
         copyAll: '📋 复制全部',
         copied: '✅ 已复制!',
@@ -54,9 +54,22 @@ const i18n = {
     <p><strong>6. 📂 目录折叠</strong>: 点击左侧边栏的“收起/展开全部”快速管理网格视图。</p>
     <p><strong>7. 🔗 兼容模型匹配</strong>: 点开大模型或 Lora 详细页，系统将自动基于 Base Model 架构，双向匹配并展示关联模型。</p>
     <p><strong>8. ➕ 一键投放节点</strong>: 在网格卡片右上角或详细页顶部，点击【➕】按钮，可将当前模型节点直接贴在鼠标上，并无缝插入工作流画布！</p>
+    <p><strong>9. 📑 笔记本 (Notebook)</strong>: 提供强大的工作流草稿本功能。你可以创建不同的笔记本，选择基础架构 (Base Model)，系统会自动为你筛选出对应的纯净主模型和 Lora 画廊供你点选。同时内置了极具高级感的双语提示词对照编辑器，支持标签化悬停高亮与快捷复制，并且支持将整个配置一键发送到画布！</p>
 </div>`,
+        notebooks: '📑 笔记本',
+        notebookTitle: '笔记本管理',
+        createNotebook: '➕ 新建',
+        saveNotebook: '💾 保存',
+        deleteNotebook: '🗑️ 删除',
+        renameNotebook: '✏️ 重命名',
+        baseModel: 'Base Model (基础模型)',
+        mainModel: 'Main Model (主模型)',
+        sendToCanvas: '🚀 发送到画布',
+        translate: '翻译',
+        newNotebookName: '新笔记本名称',
+        noBaseModel: '请先选择 Base Model',
         closeHelp: '关闭说明',
-
+        delSure: '⚠️ 确定吗？',
     },
     en: {
         title: '📦 Anomalous Model Browser',
@@ -89,7 +102,7 @@ const i18n = {
         delConfirm: 'Are you sure you want to permanently delete',
         delConfirm2: ' and all its associated configs, previews, and cache files? This action is irreversible!',
         delSuccess: '✅ Delete Complete!\n',
-        delNote: '\n\n⚠️ Note: Please restart the ComfyUI backend server, otherwise errors may occur!',
+        delNote: '\n\n⚠️ Note: Please restart ComfyUI, otherwise continuing to use it due to cache will cause errors.',
         delFail: '❌ Delete Failed: ',
         copyAll: '📋 Copy All',
         copied: '✅ Copied!',
@@ -109,9 +122,22 @@ const i18n = {
     <p><strong>4. 🔋 Eco / 🎬 AutoPlay</strong>: Toggle video playback modes. Eco mode plays videos only when hovering over a model card.</p>
     <p><strong>5. 🗂️ Details & Delete</strong>: Click a model card to view details and <strong>1-click copy trained words</strong>. You can also permanently delete the model here (requires ComfyUI restart).</p>
     <p><strong>6. 📂 Folder Toggle</strong>: Use the Collapse/Expand All button in the sidebar to manage your view.</p>
+    <p><strong>7. 📑 Notebook System</strong>: A powerful drafting workspace. Create notebooks, select a Base Model, and precisely match compatible Main Models and Loras. Includes a premium dual-pane bilingual prompt editor with hover-sync, tag splitting, and 1-click deployment to canvas.</p>
 </div>`,
+        notebooks: '📑 Notebooks',
+        notebookTitle: 'Notebook Manager',
+        createNotebook: '➕ New',
+        saveNotebook: '💾 Save',
+        deleteNotebook: '🗑️ Delete',
+        renameNotebook: '✏️ Rename',
+        baseModel: 'Base Model',
+        mainModel: 'Main Model',
+        sendToCanvas: '🚀 Send to Canvas',
+        translate: 'Translate',
+        newNotebookName: 'New Notebook Name',
+        noBaseModel: 'Select a Base Model first',
         closeHelp: 'Close Manual',
-
+        delSure: '⚠️ Sure?',
     }
 };
 
@@ -178,15 +204,21 @@ class AnomalousBrowser {
             scanBtn.title = t('scanTitle');
             scanBtn.innerHTML = `🔄 <span class="anomalous-btn-text">${t('scan')}</span>`;
             cleanBtn.title = t('cleanTitle');
-                        cleanBtn.innerHTML = `🧹 <span class="anomalous-btn-text">${t('clean')}</span>`;
+            cleanBtn.innerHTML = `🧹 <span class="anomalous-btn-text">${t('clean')}</span>`;
             helpBtn.title = t('helpTitle');
             helpBtn.innerHTML = `❓ <span class="anomalous-btn-text">${t('help')}</span>`;
+            nbBtn.title = t('notebookTitle');
+            nbBtn.innerHTML = `<span class="anomalous-btn-text">${t('notebooks')}</span>`;
             renderEnergyBtn();
             this.renderSidebar();
             this.loadModels();
             if (this.detailPanel.style.display !== 'none' && this.currentDetailModel) {
                 this.showDetail(this.currentDetailModel);
             }
+            if (this.nbEditor && this.nbEditor.innerHTML !== '') {
+                this.renderNotebookEditor();
+                this.refreshNotebooks();
+            }
         };
         this.settingsArea.appendChild(langBtn);
         this.sidebarWrapper.appendChild(this.sidebar);
@@ -210,6 +242,12 @@ class AnomalousBrowser {
         helpBtn.innerHTML = `❓ <span class="anomalous-btn-text">${t('help')}</span>`;
         helpBtn.onclick = () => this.showHelp();
 
+        const nbBtn = document.createElement('button');
+        nbBtn.id = 'anomalous-notebook-btn';
+        nbBtn.title = t('notebookTitle');
+        nbBtn.innerHTML = `<span class="anomalous-btn-text">${t('notebooks')}</span>`;
+        nbBtn.onclick = () => this.showNotebooks();
+
         const apiKeyInput = document.createElement('input');
         apiKeyInput.id = 'anomalous-api-key';
         apiKeyInput.placeholder = '🔑 API Key';
@@ -252,14 +290,19 @@ class AnomalousBrowser {
                                 clearInterval(poll);
                                 scanBtn.innerHTML = `✅ <span class="anomalous-btn-text">${t('scanDone')}</span>`;
                                 
-                                let msg = t('scanCompleteMsg');
+                                let msg = '';
                                 if (sd.result) {
-                                    msg = `✅ 扫描结束！\n成功处理：${sd.result.success} 个\n处理失败：${sd.result.fail} 个\n\n⚠️ 提示：请点击 ComfyUI 的 [Refresh] 按钮以同步，若有模型未生效，请【重启 ComfyUI 服务端】。`;
-                                    if (document.documentElement.lang !== 'zh') {
-                                        msg = `✅ Scan Complete!\nSuccess: ${sd.result.success}\nFailed: ${sd.result.fail}\n\n⚠️ Tip: Click [Refresh] in ComfyUI, or RESTART the ComfyUI backend if models don't appear.`;
+                                    if (currentLang === 'zh') {
+                                        msg = `✅ 扫描结束！\n成功处理：${sd.result.success} 个\n处理失败：${sd.result.fail} 个\n\n⚠️ 重要提示：为了让重命名后的模型生效，请务必【重启 ComfyUI 服务端后台】。`;
+                                    } else {
+                                        msg = `✅ Scan Complete!\nSuccess: ${sd.result.success}\nFailed: ${sd.result.fail}\n\n⚠️ Important: Please fully RESTART the ComfyUI backend to load the renamed models.`;
                                     }
                                 } else {
-                                    msg = msg.replace('[Refresh] 按钮以同步最新的模型列表。', '[Refresh] 按钮以同步，若有模型未生效，请【重启 ComfyUI 服务端】。');
+                                    if (currentLang === 'zh') {
+                                        msg = `✅ 扫描完成！\n\n⚠️ 重要提示：为了让重命名后的模型生效，请务必【重启 ComfyUI 服务端后台】。`;
+                                    } else {
+                                        msg = `✅ Scan Complete!\n\n⚠️ Important: Please fully RESTART the ComfyUI backend to load the renamed models.`;
+                                    }
                                 }
                                 alert(msg);
                                 
@@ -320,7 +363,7 @@ class AnomalousBrowser {
             cleanBtn.disabled = false;
         };
 
-                header.appendChild(title);
+        header.appendChild(nbBtn);
         header.appendChild(helpBtn);
         header.appendChild(apiKeyInput);
         header.appendChild(cleanBtn);
@@ -390,6 +433,9 @@ class AnomalousBrowser {
         
         const closeX = document.createElement('div');
         closeX.innerHTML = '&times;';
+        closeX.style.position = 'absolute';
+        closeX.style.top = '10px';
+        closeX.style.right = '15px';
         closeX.style.fontSize = '1.8em';
         closeX.style.cursor = 'pointer';
         closeX.style.color = '#ff4444';
@@ -434,7 +480,25 @@ class AnomalousBrowser {
         try {
             const res = await fetch('/anomalous/folders');
             const data = await res.json();
-            this.foldersData = data.folders || {};
+            this.foldersData = data.folders || [];
+            
+            if (!this.firstLoadDone && this.foldersData.length > 0) {
+                this.firstLoadDone = true;
+                let found = false;
+                for (const typeGroup of this.foldersData) {
+                    const sortedPaths = Object.keys(typeGroup.folders).sort();
+                    for (const path of sortedPaths) {
+                        if (typeGroup.folders[path].model_count > 0) {
+                            this.currentType = typeGroup.type;
+                            this.currentPathIdx = typeGroup.path_idx;
+                            this.currentSubfolder = path;
+                            found = true;
+                            break;
+                        }
+                    }
+                    if (found) break;
+                }
+            }
             
             // Auto expand all
             (this.foldersData || []).forEach(typeGroup => {
@@ -452,11 +516,31 @@ class AnomalousBrowser {
     renderSidebar() {
         this.sidebar.innerHTML = '';
         
+        const brandBar = document.createElement('div');
+        brandBar.style.padding = '12px 15px 0 15px';
+        brandBar.style.display = 'flex';
+        brandBar.style.alignItems = 'center';
+        
+        const badge = document.createElement('div');
+        badge.style.background = 'linear-gradient(135deg, #444, #222)';
+        badge.style.color = '#ccc';
+        badge.style.fontSize = '0.7em';
+        badge.style.padding = '4px 8px';
+        badge.style.borderRadius = '6px';
+        badge.style.letterSpacing = '1px';
+        badge.style.border = '1px solid #555';
+        badge.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
+        badge.style.textTransform = 'uppercase';
+        badge.style.fontWeight = 'bold';
+        badge.innerHTML = 'Anomalous Browser';
+        
+        brandBar.appendChild(badge);
+
         const topBar = document.createElement('div');
         topBar.style.display = 'flex';
         topBar.style.justifyContent = 'space-between';
         topBar.style.alignItems = 'center';
-        topBar.style.padding = '15px';
+        topBar.style.padding = '10px 15px 15px 15px';
         
         const title = document.createElement('h3');
         title.innerHTML = t('folders');
@@ -488,6 +572,7 @@ class AnomalousBrowser {
         
         topBar.appendChild(title);
         topBar.appendChild(collapseAllBtn);
+        this.sidebar.appendChild(brandBar);
         this.sidebar.appendChild(topBar);
 
         (this.foldersData || []).forEach(typeGroup => {
@@ -856,9 +941,9 @@ const backBtn = document.createElement('button');
         header.appendChild(jumpBtn);
 
         const applyDetailBtn = document.createElement('button');
-        applyDetailBtn.innerHTML = t('applyToCanvas');
+        applyDetailBtn.innerHTML = t('applyToCanvas') || 'Apply to Canvas';
         applyDetailBtn.style.padding = '6px 12px';
-        applyDetailBtn.style.background = '#28a745';
+        applyDetailBtn.style.background = '#007bff';
         applyDetailBtn.style.color = '#fff';
         applyDetailBtn.style.border = 'none';
         applyDetailBtn.style.borderRadius = '4px';
@@ -1130,7 +1215,7 @@ const backBtn = document.createElement('button');
                         let thumb = '';
                         if (m_comp.preview_url) {
                             const isVid = m_comp.preview_url.toLowerCase().endsWith('.mp4') || m_comp.preview_url.toLowerCase().endsWith('.webm');
-                            if (isVid) thumb = `<video src="${m_comp.preview_url}" muted loop playsinline autoplay></video>`;
+                            if (isVid) thumb = `<video src="${m_comp.preview_url}" muted loop playsinline></video>`;
                             else thumb = `<img src="${m_comp.preview_url}" />`;
                         } else {
                             thumb = `<div style="width:30px; height:30px; background:#222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#555;">?</div>`;
@@ -1138,6 +1223,11 @@ const backBtn = document.createElement('button');
                         
                         mItem.innerHTML = `${thumb}<div class="anomalous-compatible-item-name">${m_comp.filename}</div>`;
                         
+                        if (m_comp.preview_url && (m_comp.preview_url.toLowerCase().endsWith('.mp4') || m_comp.preview_url.toLowerCase().endsWith('.webm'))) {
+                            mItem.onmouseenter = () => { const v = mItem.querySelector('video'); if (v) v.play().catch(e=>{}); };
+                            mItem.onmouseleave = () => { const v = mItem.querySelector('video'); if (v) { v.pause(); v.currentTime = 0; } };
+                        }
+                        
                         mItem.onclick = () => {
                             this.historyStack.push({
                                 type: this.currentType,
@@ -1181,6 +1271,745 @@ const backBtn = document.createElement('button');
         }
     }
     close() { this.modal.classList.remove('visible'); }
+
+    async showNotebooks() {
+        if (this.nbModal) {
+            this.nbModal.remove();
+        }
+        
+        this.nbModal = document.createElement('div');
+        this.nbModal.className = 'anomalous-nb-modal';
+        
+        const container = document.createElement('div');
+        container.className = 'anomalous-nb-container';
+        
+        const header = document.createElement('div');
+        header.className = 'anomalous-nb-header';
+        
+        const title = document.createElement('h2');
+        title.innerHTML = t('notebookTitle');
+        title.style.margin = '0';
+        
+        const closeX = document.createElement('div');
+        closeX.innerHTML = '&times;';
+        closeX.className = 'anomalous-nb-close';
+        closeX.onclick = () => this.nbModal.remove();
+        
+        header.appendChild(title);
+        header.appendChild(closeX);
+        
+        const body = document.createElement('div');
+        body.className = 'anomalous-nb-body';
+        
+        // Sidebar for notebooks list
+        const sidebar = document.createElement('div');
+        sidebar.className = 'anomalous-nb-sidebar';
+        
+        const nbList = document.createElement('div');
+        nbList.className = 'anomalous-nb-list';
+        
+        const btnRow = document.createElement('div');
+        btnRow.style.padding = '10px';
+        btnRow.style.display = 'flex';
+        btnRow.style.gap = '5px';
+        
+        const createBtn = document.createElement('button');
+        createBtn.innerHTML = t('createNotebook');
+        createBtn.className = 'anomalous-btn-primary';
+        
+        const createInput = document.createElement('input');
+        createInput.type = 'text';
+        createInput.placeholder = t('newNotebookName');
+        createInput.style.display = 'none';
+        createInput.style.flex = '1';
+        createInput.style.padding = '4px';
+        createInput.style.background = '#222';
+        createInput.style.color = '#fff';
+        createInput.style.border = '1px solid #555';
+        createInput.style.borderRadius = '4px';
+        
+        createBtn.onclick = () => {
+            if (createInput.style.display === 'none') {
+                createInput.style.display = 'block';
+                createBtn.innerHTML = '✓';
+                createInput.focus();
+            } else {
+                const name = createInput.value.trim();
+                if (name) {
+                    this.currentNotebook = { filename: name + '.json', name: name, data: { baseModel: '', mainModel: null, loras: [], promptEn: '', promptZh: '' } };
+                    this.saveCurrentNotebook();
+                    this.renderNotebookEditor();
+                    createInput.value = '';
+                }
+                createInput.style.display = 'none';
+                createBtn.innerHTML = t('createNotebook');
+            }
+        };
+        
+        btnRow.appendChild(createInput);
+        btnRow.appendChild(createBtn);
+        sidebar.appendChild(btnRow);
+        sidebar.appendChild(nbList);
+        
+        // Editor area
+        this.nbEditor = document.createElement('div');
+        this.nbEditor.className = 'anomalous-nb-editor';
+        
+        body.appendChild(sidebar);
+        body.appendChild(this.nbEditor);
+        
+        container.appendChild(header);
+        container.appendChild(body);
+        this.nbModal.appendChild(container);
+        
+        document.getElementById('anomalous-container').appendChild(this.nbModal);
+        
+        this.nbListEl = nbList;
+        this.refreshNotebooks(true);
+    }
+    
+    async refreshNotebooks(autoOpenFirst = false) {
+        try {
+            const res = await fetch('/anomalous/notebooks');
+            const data = await res.json();
+            this.nbListEl.innerHTML = '';
+            
+            if (data.notebooks && data.notebooks.length > 0) {
+                if (autoOpenFirst) {
+                    if (!this.currentNotebook) {
+                        this.currentNotebook = data.notebooks[0];
+                    }
+                    if (this.currentNotebook) {
+                        this.renderNotebookEditor();
+                    }
+                }
+                
+                data.notebooks.forEach(nb => {
+                    const item = document.createElement('div');
+                    item.className = 'anomalous-nb-item';
+                    if (this.currentNotebook && this.currentNotebook.filename === nb.filename) {
+                        item.classList.add('active');
+                    }
+                    item.innerHTML = '📄 ' + nb.name;
+                    item.onclick = () => {
+                        this.currentNotebook = nb;
+                        this.renderNotebookEditor();
+                        this.refreshNotebooks();
+                    };
+                    this.nbListEl.appendChild(item);
+                });
+            }
+        } catch(e) {}
+    }
+    
+    async saveCurrentNotebook() {
+        if (!this.currentNotebook) return;
+        try {
+            await fetch('/anomalous/save_notebook', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(this.currentNotebook)
+            });
+            this.refreshNotebooks();
+        } catch(e) {}
+    }
+    
+    async deleteCurrentNotebook(skipConfirm = false) {
+        if (!this.currentNotebook) return;
+        if (!skipConfirm && !confirm(t('deleteNotebook') + ' ?')) return;
+        try {
+            await fetch('/anomalous/delete_notebook', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filename: this.currentNotebook.filename })
+            });
+            this.currentNotebook = null;
+            this.nbEditor.innerHTML = '';
+            this.refreshNotebooks();
+        } catch(e) {}
+    }
+    
+    renderNotebookEditor() {
+        this.nbEditor.innerHTML = '';
+        if (!this.currentNotebook) return;
+        
+        const data = this.currentNotebook.data || {};
+        if (!data.loras) data.loras = [];
+        
+        // Toolbar
+        const tb = document.createElement('div');
+        tb.className = 'anomalous-nb-toolbar';
+        
+        const titleArea = document.createElement('h3');
+        titleArea.innerHTML = this.currentNotebook.name;
+        titleArea.style.margin = '0';
+        
+        const rightBtns = document.createElement('div');
+        
+        const saveBtn = document.createElement('button');
+        saveBtn.innerHTML = t('saveNotebook');
+        saveBtn.className = 'anomalous-btn-primary';
+        saveBtn.onclick = async () => {
+            const orig = saveBtn.innerHTML;
+            saveBtn.innerHTML = '⏳...';
+            await this.saveCurrentNotebook();
+            saveBtn.innerHTML = '✅';
+            saveBtn.style.background = '#2e8b57';
+            setTimeout(() => {
+                saveBtn.innerHTML = orig;
+                saveBtn.style.background = '';
+            }, 1500);
+        };
+        
+        let delTimer = null;
+        const delContainer = document.createElement('span');
+        delContainer.style.display = 'inline-flex';
+        delContainer.style.alignItems = 'center';
+        
+        const delBtn = document.createElement('button');
+        delBtn.innerHTML = t('deleteNotebook');
+        delBtn.className = 'anomalous-btn-danger';
+        
+        const cancelDelBtn = document.createElement('button');
+        cancelDelBtn.innerHTML = '✕';
+        cancelDelBtn.className = 'anomalous-btn-danger';
+        cancelDelBtn.style.display = 'none';
+        cancelDelBtn.style.background = '#555';
+        cancelDelBtn.style.marginLeft = '2px';
+        cancelDelBtn.style.padding = '6px 8px';
+        
+        delContainer.appendChild(delBtn);
+        delContainer.appendChild(cancelDelBtn);
+        
+        const resetDel = () => {
+            clearTimeout(delTimer);
+            delBtn.innerHTML = t('deleteNotebook');
+            delBtn.style.background = '';
+            cancelDelBtn.style.display = 'none';
+        };
+        
+        delBtn.onclick = () => {
+            if (delBtn.innerHTML === t('deleteNotebook')) {
+                delBtn.innerHTML = t('delSure');
+                delBtn.style.background = '#800';
+                cancelDelBtn.style.display = 'block';
+                delTimer = setTimeout(resetDel, 4000);
+            } else {
+                resetDel();
+                this.deleteCurrentNotebook(true);
+            }
+        };
+        
+        cancelDelBtn.onclick = resetDel;
+        
+        const sendBtn = document.createElement('button');
+        sendBtn.innerHTML = t('sendToCanvas');
+        sendBtn.className = 'anomalous-btn-success';
+        sendBtn.onclick = () => this.sendNotebookToCanvas();
+        
+        rightBtns.appendChild(saveBtn);
+        rightBtns.appendChild(sendBtn);
+        rightBtns.appendChild(delContainer);
+        
+        tb.appendChild(titleArea);
+        tb.appendChild(rightBtns);
+        
+        // Settings / Models
+        const modelSection = document.createElement('div');
+        modelSection.className = 'anomalous-nb-section';
+        
+        // Base Model
+        const baseRow = document.createElement('div');
+        baseRow.className = 'anomalous-nb-row';
+        baseRow.innerHTML = `<strong>${t('baseModel')}</strong>`;
+        const baseSelect = document.createElement('select');
+        baseSelect.className = 'anomalous-nb-select';
+        const buildSelect = (bases) => {
+            baseSelect.innerHTML = '';
+            bases.forEach(b => {
+                const opt = document.createElement('option');
+                opt.value = b; opt.text = b;
+                if (data.baseModel === b) opt.selected = true;
+                baseSelect.appendChild(opt);
+            });
+            if (!data.baseModel && bases.length > 0) data.baseModel = bases[0];
+        };
+        
+        if (this.baseModelsCache) {
+            buildSelect(this.baseModelsCache);
+        } else {
+            const tempBases = ['SD 1.5', 'SD 2.1', 'SDXL', 'SD 3.0', 'SD 3.5', 'Flux.1', 'Pony', 'HunyuanVideo', 'LTX-Video', 'OmniGen'];
+            buildSelect(tempBases);
+            fetch('/anomalous/base_models').then(r=>r.json()).then(d => {
+                if (d.base_models && d.base_models.length > 0) {
+                    this.baseModelsCache = d.base_models;
+                    buildSelect(this.baseModelsCache);
+                }
+            }).catch(e => {});
+        }
+        if (!data.baseModel) data.baseModel = 'SDXL';
+        baseSelect.onchange = () => {
+            data.baseModel = baseSelect.value;
+            data.mainModel = null;
+            data.loras = [];
+            this.saveCurrentNotebook();
+            this.renderNotebookEditor();
+        };
+        baseRow.appendChild(baseSelect);
+        
+        // Main Model (Card Selection)
+        const mainBox = document.createElement('div');
+        mainBox.className = 'anomalous-nb-gallery-box';
+        const mainRow = document.createElement('div');
+        mainRow.className = 'anomalous-nb-row';
+        mainRow.innerHTML = `<strong>${t('mainModel')}</strong>`;
+        
+        const mainGallery = document.createElement('div');
+        mainGallery.className = 'anomalous-nb-gallery-wrap';
+        
+        mainBox.appendChild(mainRow);
+        mainBox.appendChild(mainGallery);
+        
+        // Loras (Card Selection)
+        const loraBox = document.createElement('div');
+        loraBox.className = 'anomalous-nb-gallery-box';
+        const loraRow = document.createElement('div');
+        loraRow.className = 'anomalous-nb-row';
+        loraRow.innerHTML = `<strong>Loras</strong>`;
+        
+        const loraGallery = document.createElement('div');
+        loraGallery.className = 'anomalous-nb-gallery-wrap';
+        
+        loraBox.appendChild(loraRow);
+        loraBox.appendChild(loraGallery);
+        
+        modelSection.appendChild(baseRow);
+        modelSection.appendChild(mainBox);
+        modelSection.appendChild(loraBox);
+        
+        // Prompt Section
+        const promptSec = document.createElement('div');
+        promptSec.className = 'anomalous-nb-section';
+        
+        // Toolbar
+        const pToolbar = document.createElement('div');
+        pToolbar.style.display = 'flex';
+        pToolbar.style.gap = '10px';
+        pToolbar.style.marginBottom = '10px';
+        pToolbar.style.alignItems = 'center';
+        
+        const langSelect = document.createElement('select');
+        langSelect.className = 'anomalous-nb-select';
+        const langs = [
+            {v: 'zh-CN', l: '🇨🇳 中文 (zh-CN)'}, {v: 'en', l: '🇬🇧 English (en)'},
+            {v: 'ja', l: '🇯🇵 日本语 (ja)'}, {v: 'ko', l: '🇰🇷 한국어 (ko)'},
+            {v: 'fr', l: '🇫🇷 Français (fr)'}, {v: 'de', l: '🇩🇪 Deutsch (de)'},
+            {v: 'es', l: '🇪🇸 Español (es)'}, {v: 'ru', l: '🇷🇺 Русский (ru)'}
+        ];
+        langs.forEach(lg => {
+            const opt = document.createElement('option');
+            opt.value = lg.v; opt.text = lg.l;
+            if ((data.targetLang || 'zh-CN') === lg.v) opt.selected = true;
+            langSelect.appendChild(opt);
+        });
+        langSelect.onchange = () => { 
+            data.targetLang = langSelect.value; 
+            data.translations = {}; // Clear translation cache on lang change
+            this.saveCurrentNotebook(); 
+            updateVisualTags(); 
+        };
+        
+        const findInput = document.createElement('input');
+        findInput.className = 'anomalous-nb-select';
+        findInput.placeholder = 'Find...';
+        findInput.style.flex = '1';
+        
+        const replaceInput = document.createElement('input');
+        replaceInput.className = 'anomalous-nb-select';
+        replaceInput.placeholder = 'Replace with...';
+        replaceInput.style.flex = '1';
+        
+        const replaceBtn = document.createElement('button');
+        replaceBtn.className = 'anomalous-btn-primary';
+        replaceBtn.innerHTML = 'Replace All';
+        
+        pToolbar.appendChild(langSelect);
+        pToolbar.appendChild(findInput);
+        pToolbar.appendChild(replaceInput);
+        pToolbar.appendChild(replaceBtn);
+        
+        // Raw Input Toggle
+        const toggleRow = document.createElement('div');
+        toggleRow.style.display = 'flex';
+        toggleRow.style.justifyContent = 'space-between';
+        toggleRow.style.marginBottom = '5px';
+        toggleRow.innerHTML = `<strong>Prompt Editor</strong>`;
+        const rawBtn = document.createElement('button');
+        rawBtn.className = 'anomalous-btn-primary';
+        rawBtn.innerHTML = '📝 Edit Raw / Paste';
+        toggleRow.appendChild(rawBtn);
+        
+        // Raw Textarea
+        const rawArea = document.createElement('textarea');
+        rawArea.className = 'anomalous-nb-textarea';
+        rawArea.value = data.promptEn || '';
+        rawArea.style.display = 'none';
+        rawArea.style.height = '150px';
+        
+        // Visual Dual Pane
+        const dualPane = document.createElement('div');
+        dualPane.className = 'anomalous-nb-dual-pane';
+        
+        if (!data.translations) data.translations = {};
+        
+        const updateVisualTags = () => {
+            dualPane.innerHTML = '';
+            const txt = rawArea.value;
+            data.promptEn = txt;
+            this.saveCurrentNotebook();
+            if (!txt.trim()) return;
+            
+            const tags = txt.split(',').map(s => s.trim()).filter(s => s);
+            tags.forEach((tag, idx) => {
+                const tagRow = document.createElement('div');
+                tagRow.className = 'anomalous-nb-tag-row';
+                
+                const tagL = document.createElement('div');
+                tagL.className = 'anomalous-nb-visual-tag';
+                tagL.style.flex = '1';
+                tagL.style.justifyContent = 'space-between';
+                const txtL = document.createElement('span');
+                txtL.innerText = tag;
+                const copyL = document.createElement('span');
+                copyL.className = 'anomalous-nb-copy-btn';
+                copyL.innerHTML = '📋';
+                copyL.onclick = (e) => {
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(tag).then(() => { copyL.innerHTML = '✅'; setTimeout(()=>copyL.innerHTML='📋', 1000); });
+                };
+                tagL.appendChild(txtL);
+                tagL.appendChild(copyL);
+                
+                const tagR = document.createElement('div');
+                tagR.className = 'anomalous-nb-visual-tag';
+                tagR.style.flex = '1';
+                tagR.style.justifyContent = 'space-between';
+                const transTxt = data.translations[tag] ? data.translations[tag] : '...';
+                const txtR = document.createElement('span');
+                txtR.innerText = transTxt;
+                const copyR = document.createElement('span');
+                copyR.className = 'anomalous-nb-copy-btn';
+                copyR.innerHTML = '📋';
+                copyR.onclick = (e) => {
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(txtR.innerText).then(() => { copyR.innerHTML = '✅'; setTimeout(()=>copyR.innerHTML='📋', 1000); });
+                };
+                tagR.appendChild(txtR);
+                tagR.appendChild(copyR);
+                
+                tagL.onmouseenter = () => { tagL.classList.add('hover'); tagR.classList.add('hover'); };
+                tagL.onmouseleave = () => { tagL.classList.remove('hover'); tagR.classList.remove('hover'); };
+                tagR.onmouseenter = () => { tagL.classList.add('hover'); tagR.classList.add('hover'); };
+                tagR.onmouseleave = () => { tagL.classList.remove('hover'); tagR.classList.remove('hover'); };
+                
+                tagL.onclick = () => {
+                    const inp = document.createElement('input');
+                    inp.value = tag; inp.className = 'anomalous-nb-tag-edit';
+                    tagL.innerHTML = ''; tagL.appendChild(inp); inp.focus();
+                    const finish = () => {
+                        tags[idx] = inp.value.trim();
+                        rawArea.value = tags.join(', ');
+                        updateVisualTags();
+                    };
+                    inp.onblur = finish;
+                    inp.onkeydown = (e) => { if(e.key==='Enter') inp.blur(); };
+                };
+                
+                tagR.onclick = () => {
+                    const inp = document.createElement('input');
+                    inp.value = data.translations[tag] || ''; inp.className = 'anomalous-nb-tag-edit';
+                    tagR.innerHTML = ''; tagR.appendChild(inp); inp.focus();
+                    const finish = () => {
+                        data.translations[tag] = inp.value.trim();
+                        this.saveCurrentNotebook();
+                        updateVisualTags();
+                    };
+                    inp.onblur = finish;
+                    inp.onkeydown = (e) => { if(e.key==='Enter') inp.blur(); };
+                };
+                
+                tagRow.appendChild(tagL);
+                tagRow.appendChild(tagR);
+                dualPane.appendChild(tagRow);
+                
+                if (!data.translations[tag]) {
+                    fetch('/anomalous/translate', {
+                        method: 'POST', headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ text: tag, target_lang: data.targetLang || 'zh-CN' })
+                    }).then(r=>r.json()).then(d => {
+                        if (d.translated) {
+                            data.translations[tag] = d.translated;
+                            txtR.innerText = d.translated;
+                            this.saveCurrentNotebook();
+                        }
+                    }).catch(()=>{});
+                }
+            });
+        };
+        
+        rawBtn.onclick = () => {
+            if (rawArea.style.display === 'none') {
+                rawArea.style.display = 'block';
+                dualPane.style.display = 'none';
+                rawBtn.innerHTML = '👁️ Done Editing';
+                pToolbar.style.display = 'none';
+            } else {
+                rawArea.style.display = 'none';
+                dualPane.style.display = 'flex';
+                rawBtn.innerHTML = '📝 Edit Raw / Paste';
+                pToolbar.style.display = 'flex';
+                updateVisualTags();
+            }
+        };
+        
+        replaceBtn.onclick = () => {
+            const findStr = findInput.value;
+            const repStr = replaceInput.value;
+            if (!findStr) return;
+            const newTxt = rawArea.value.split(findStr).join(repStr);
+            rawArea.value = newTxt;
+            updateVisualTags();
+        };
+        
+        rawArea.oninput = () => {
+            clearTimeout(this.pTimeout);
+            this.pTimeout = setTimeout(() => { data.promptEn = rawArea.value; this.saveCurrentNotebook(); }, 500);
+        };
+        
+        updateVisualTags();
+        
+        promptSec.appendChild(pToolbar);
+        promptSec.appendChild(toggleRow);
+        promptSec.appendChild(rawArea);
+        promptSec.appendChild(dualPane);
+        
+        this.nbEditor.appendChild(tb);
+        this.nbEditor.appendChild(modelSection);
+        this.nbEditor.appendChild(promptSec);
+        
+        // Fetch compatible models and fill galleries
+        this.fillNotebookGalleries(data.baseModel, mainGallery, loraGallery, data);
+    }
+    
+    fillNotebookGalleries(baseModel, mainGallery, loraGallery, data) {
+        if (!baseModel) return;
+        
+        const buildThumbHtml = (m) => {
+            let thumb = '';
+            if (m.preview_url) {
+                const isVid = m.preview_url.toLowerCase().endsWith('.mp4') || m.preview_url.toLowerCase().endsWith('.webm');
+                if (isVid) thumb = `<video src="${m.preview_url}" muted loop playsinline></video>`;
+                else thumb = `<img src="${m.preview_url}" />`;
+            } else {
+                thumb = `<div style="width:30px; height:30px; background:#222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#555;">?</div>`;
+            }
+            return thumb;
+        };
+
+        fetch(`/anomalous/compatible_models?base_model=${encodeURIComponent(baseModel)}&target_type=checkpoints,unet,diffusion_models`)
+            .then(r=>r.json()).then(d => {
+                const buildMainDOM = (models) => {
+                    mainGallery.innerHTML = '';
+                    if (!models || !models.length) {
+                        mainGallery.innerHTML = '<span style="color:#666;">No compatible main models found.</span>';
+                    } else {
+                        models.forEach(m => {
+                            const isSelected = (data.mainModel && data.mainModel.filename === m.filename);
+                            const card = document.createElement('div');
+                            card.className = 'anomalous-nb-minicheck ' + (isSelected ? 'selected' : '');
+                            card.innerHTML = `${buildThumbHtml(m)}<div class="anomalous-nb-minicheck-name" title="${m.filename}">${m.filename}</div>`;
+                            
+                            if (m.preview_url && (m.preview_url.toLowerCase().endsWith('.mp4') || m.preview_url.toLowerCase().endsWith('.webm'))) {
+                                card.onmouseenter = () => { const v = card.querySelector('video'); if (v) v.play().catch(e=>{}); };
+                                card.onmouseleave = () => { const v = card.querySelector('video'); if (v) { v.pause(); v.currentTime = 0; } };
+                            }
+                            
+                            card.onclick = () => {
+                                data.mainModel = m;
+                                this.saveCurrentNotebook();
+                                buildMainDOM(models); // re-render just the main gallery
+                            };
+                            mainGallery.appendChild(card);
+                        });
+                    }
+                };
+                buildMainDOM(d.models || []);
+            });
+            
+        fetch(`/anomalous/compatible_models?base_model=${encodeURIComponent(baseModel)}&target_type=loras`)
+            .then(r=>r.json()).then(d => {
+                const buildLoraDOM = (models) => {
+                    loraGallery.innerHTML = '';
+                    if (!models || !models.length) {
+                        loraGallery.innerHTML = '<span style="color:#666;">No compatible Loras found.</span>';
+                    } else {
+                        models.forEach(m => {
+                            const loraIndex = data.loras.findIndex(l => l.filename === m.filename);
+                            const isSelected = loraIndex !== -1;
+                            const card = document.createElement('div');
+                            card.className = 'anomalous-nb-minilora ' + (isSelected ? 'selected' : '');
+                            card.style.position = 'relative'; // for badge positioning
+                            
+                            let badgeHtml = '';
+                            if (isSelected) {
+                                badgeHtml = `<div style="position:absolute; top:-5px; right:-5px; background:#00ffcc; color:#000; border-radius:50%; width:20px; height:20px; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:bold; z-index:10; box-shadow: 0 2px 4px rgba(0,0,0,0.5);">${loraIndex + 1}</div>`;
+                            }
+                            
+                            card.innerHTML = `${badgeHtml}${buildThumbHtml(m)}<div class="anomalous-nb-minilora-name" title="${m.filename}">${m.filename}</div>`;
+                            
+                            if (m.preview_url && (m.preview_url.toLowerCase().endsWith('.mp4') || m.preview_url.toLowerCase().endsWith('.webm'))) {
+                                card.onmouseenter = () => { const v = card.querySelector('video'); if (v) v.play().catch(e=>{}); };
+                                card.onmouseleave = () => { const v = card.querySelector('video'); if (v) { v.pause(); v.currentTime = 0; } };
+                            }
+                            
+                            card.onclick = () => {
+                                if (isSelected) {
+                                    data.loras = data.loras.filter(l => l.filename !== m.filename);
+                                } else {
+                                    data.loras.push(m);
+                                }
+                                this.saveCurrentNotebook();
+                                buildLoraDOM(models); // re-render just the lora gallery
+                            };
+                            loraGallery.appendChild(card);
+                        });
+                    }
+                };
+                buildLoraDOM(d.models || []);
+            });
+    }
+    
+    sendNotebookToCanvas() {
+        if (!this.currentNotebook) return;
+        const data = this.currentNotebook.data || {};
+        if (!data.mainModel) {
+            alert("Please select a Main Model first.");
+            return;
+        }
+        
+        const groupNodes = [];
+        const isUnet = data.mainModel.type === 'unet' || data.mainModel.type === 'diffusion_models';
+        
+        const ckptNode = LiteGraph.createNode(isUnet ? "UNETLoader" : "CheckpointLoaderSimple");
+        app.graph.add(ckptNode);
+        groupNodes.push({ node: ckptNode, relX: 0, relY: 0 });
+        
+        const sub = data.mainModel.subfolder.replace(/^\/+/, '').replace(/\/+$/, '');
+        const relPath = sub ? `${sub}/${data.mainModel.filename}` : data.mainModel.filename;
+        if (ckptNode.widgets && ckptNode.widgets.length > 0) {
+            const w = ckptNode.widgets.find(w => w.type === 'combo');
+            if (w) w.value = relPath;
+            else ckptNode.widgets[0].value = relPath;
+        }
+        
+        let lastNode = ckptNode;
+        let lastModelSlot = isUnet ? 0 : 0; 
+        let lastClipSlot = isUnet ? null : 1; 
+        
+        let relX = 350;
+        let relY = 0;
+        
+        data.loras.forEach((lora, idx) => {
+            const loraNode = LiteGraph.createNode("LoraLoader");
+            app.graph.add(loraNode);
+            groupNodes.push({ node: loraNode, relX: relX, relY: relY });
+            
+            const lsub = lora.subfolder.replace(/^\/+/, '').replace(/\/+$/, '');
+            const lrelPath = lsub ? `${lsub}/${lora.filename}` : lora.filename;
+            if (loraNode.widgets && loraNode.widgets.length > 0) {
+                const w = loraNode.widgets.find(w => w.type === 'combo');
+                if (w) w.value = lrelPath;
+                else loraNode.widgets[0].value = lrelPath;
+            }
+            
+            lastNode.connect(lastModelSlot, loraNode, 0);
+            if (lastClipSlot !== null) lastNode.connect(lastClipSlot, loraNode, 1);
+            
+            lastNode = loraNode;
+            lastModelSlot = 0;
+            lastClipSlot = 1;
+            relX += 350;
+        });
+        
+        if (data.promptEn) {
+            const posNode = LiteGraph.createNode("CLIPTextEncode");
+            posNode.title = "CLIP Text Encode (Positive)";
+            app.graph.add(posNode);
+            groupNodes.push({ node: posNode, relX: relX, relY: 0 });
+            
+            if (posNode.widgets && posNode.widgets.length > 0) {
+                const tw = posNode.widgets.find(w => w.name === 'text' || w.type === 'customtext');
+                if (tw) tw.value = data.promptEn;
+            }
+            if (lastClipSlot !== null) {
+                lastNode.connect(lastClipSlot, posNode, 0);
+            }
+            
+            const negNode = LiteGraph.createNode("CLIPTextEncode");
+            negNode.title = "CLIP Text Encode (Negative)";
+            app.graph.add(negNode);
+            groupNodes.push({ node: negNode, relX: relX, relY: 250 });
+            
+            if (negNode.widgets && negNode.widgets.length > 0) {
+                const tw = negNode.widgets.find(w => w.name === 'text' || w.type === 'customtext');
+                if (tw) tw.value = "text, watermark, ugly, bad anatomy";
+            }
+            if (lastClipSlot !== null) {
+                lastNode.connect(lastClipSlot, negNode, 0);
+            }
+        }
+        
+        this.nbModal.remove();
+        this.close();
+        
+        // Magnetic Sticking Logic
+        let isSticking = true;
+        const stickHandler = (e) => {
+            if (!isSticking || !app.canvas) return;
+            const canvas = app.canvas;
+            
+            let canvasX, canvasY;
+            if (canvas.convertEventToCanvasOffset) {
+                const pos = canvas.convertEventToCanvasOffset(e);
+                canvasX = pos[0];
+                canvasY = pos[1];
+            } else {
+                const rect = canvas.canvas.getBoundingClientRect();
+                canvasX = (e.clientX - rect.left - canvas.ds.offset[0]) / canvas.ds.scale;
+                canvasY = (e.clientY - rect.top - canvas.ds.offset[1]) / canvas.ds.scale;
+            }
+            
+            groupNodes.forEach(item => {
+                item.node.pos = [canvasX - (item.node.size[0] / 2) + item.relX, canvasY - 20 + item.relY];
+            });
+            canvas.setDirty(true, true);
+        };
+        
+        const dropHandler = (e) => {
+            isSticking = false;
+            window.removeEventListener('mousemove', stickHandler, true);
+            window.removeEventListener('pointerdown', dropHandler, true);
+            window.removeEventListener('mousedown', dropHandler, true);
+            window.removeEventListener('click', dropHandler, true);
+        };
+        
+        window.addEventListener('mousemove', stickHandler, true);
+        setTimeout(() => {
+            window.addEventListener('pointerdown', dropHandler, true);
+            window.addEventListener('mousedown', dropHandler, true);
+            window.addEventListener('click', dropHandler, true);
+        }, 100);
+    }
 }
 
 app.registerExtension({

web/styles.css

@@ -296,3 +296,117 @@
     text-overflow: ellipsis;
     flex: 1;
 }
+
+
+/* Notebook UI */
+.anomalous-nb-modal {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0,0,0,0.85);
+    z-index: 10001;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.anomalous-nb-container {
+    width: 85%; height: 85%;
+    background: var(--bg-color, #222);
+    border: 1px solid var(--border-color, #444);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
+}
+.anomalous-nb-header {
+    height: 50px;
+    background: var(--comfy-menu-bg, #333);
+    border-bottom: 1px solid #444;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    justify-content: space-between;
+    color: #fff;
+}
+.anomalous-nb-close {
+    font-size: 2em; cursor: pointer; color: #ff4444;
+}
+.anomalous-nb-body {
+    flex: 1; display: flex; overflow: hidden;
+}
+.anomalous-nb-sidebar {
+    width: 250px; background: #111; border-right: 1px solid #444; display: flex; flex-direction: column;
+}
+.anomalous-nb-list {
+    flex: 1; overflow-y: auto; padding: 10px;
+}
+.anomalous-nb-item {
+    padding: 10px; color: #ccc; cursor: pointer; border-radius: 4px; margin-bottom: 5px; background: #222;
+}
+.anomalous-nb-item:hover { background: #333; }
+.anomalous-nb-item.active { background: #007bff; color: #fff; font-weight: bold; }
+.anomalous-nb-editor {
+    flex: 1; background: #222; overflow-y: auto; padding: 20px; color: #eee;
+}
+.anomalous-nb-toolbar {
+    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
+}
+.anomalous-btn-primary { background: #007bff; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; }
+.anomalous-btn-danger { background: #dc3545; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; }
+.anomalous-btn-success { background: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; }
+.anomalous-nb-section {
+    background: #2a2a2a; border: 1px solid #444; border-radius: 8px; padding: 15px; margin-bottom: 20px;
+}
+.anomalous-nb-row { margin-bottom: 10px; }
+.anomalous-nb-select { background: #111; color: #fff; padding: 6px; border: 1px solid #555; border-radius: 4px; }
+.anomalous-nb-gallery { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; }
+.anomalous-nb-gallery-wrap { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
+.anomalous-nb-minicheck, .anomalous-nb-minilora {
+    display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
+    background: #2a2a2a; border: 1px solid #444; border-radius: 8px; cursor: pointer;
+    flex: 1 1 220px; max-width: 320px; transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.anomalous-nb-minicheck:hover, .anomalous-nb-minilora:hover { 
+    border-color: #888; background: #383838; transform: translateY(-2px); 
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition-delay: 0.02s;
+}
+.anomalous-nb-minicheck.selected, .anomalous-nb-minilora.selected {
+    border-color: #00ffcc; background: rgba(0, 255, 204, 0.15); box-shadow: 0 0 12px rgba(0,255,204,0.2);
+}
+.anomalous-nb-minicheck img, .anomalous-nb-minicheck video, .anomalous-nb-minilora img, .anomalous-nb-minilora video {
+    width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
+}
+.anomalous-nb-minicheck-name, .anomalous-nb-minilora-name {
+    color: #eee; font-size: 0.95em; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left;
+}
+.anomalous-nb-minicheck.selected .anomalous-nb-minicheck-name, .anomalous-nb-minilora.selected .anomalous-nb-minilora-name {
+    color: #00ffcc; font-weight: bold;
+}
+.anomalous-nb-textarea {
+    width: 100%; height: 60px; background: #111; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 8px; margin-top: 10px; resize: vertical; box-sizing: border-box;
+}
+.anomalous-nb-dual-pane {
+    display: flex; flex-direction: column; width: 100%; background: #1a1a1a; padding: 10px; border-radius: 8px; border: 1px solid #444; box-sizing: border-box;
+}
+.anomalous-nb-tag-row {
+    display: flex; gap: 15px; width: 100%; align-items: stretch; margin-bottom: 6px;
+}
+.anomalous-nb-gallery-box {
+    background: #1e1e1e; border: 1px solid #444; border-radius: 8px; padding: 12px; margin-bottom: 15px;
+}
+.anomalous-nb-visual-tag {
+    background: #2a2a2a; color: #eee; padding: 8px 12px; border-radius: 6px; border: 1px solid #444; cursor: pointer; transition: all 0.2s; min-height: 36px; display: flex; align-items: center; word-break: break-word; font-size: 0.95em; line-height: 1.4;
+}
+.anomalous-nb-visual-tag.hover {
+    background: #3a3a3a; border-color: #00ffcc; color: #fff; box-shadow: inset 0 0 5px rgba(0,255,204,0.2);
+}
+.anomalous-nb-copy-btn {
+    opacity: 0.3; transition: all 0.2s; padding-left: 10px; flex-shrink: 0; user-select: none;
+}
+.anomalous-nb-visual-tag:hover .anomalous-nb-copy-btn {
+    opacity: 1;
+}
+.anomalous-nb-copy-btn:hover {
+    transform: scale(1.3);
+}
+.anomalous-nb-tag-edit { background: #111; color: #fff; border: 1px solid #00ffcc; border-radius: 4px; padding: 6px; width: 100%; font-size: 1em; box-sizing: border-box; }