[TMP] Version bump for UI test

This reverts commit 86a7dd05a3.

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -12,8 +12,15 @@ body:
 
         - **1:** You are running the latest version of ComfyUI.
         - **2:** You have looked at the existing bug reports and made sure this isn't already reported.
-        - **3:** You confirmed that the bug is not caused by a custom node. You can disable all custom nodes by passing
-        `--disable-all-custom-nodes` command line argument.
+
+  - type: checkboxes
+    id: custom-nodes-test
+    attributes:
+      label: Custom Node Testing
+      description: Please confirm you have tried to reproduce the issue with all custom nodes disabled.
+      options:
+        - label: I have tried disabling custom nodes and the issue persists (see [how to disable custom nodes](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled) if you need help)
+          required: true
 
   - type: textarea
     attributes:

.mcp.json

@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "playwright": {
-      "command": "npx",
-      "args": ["-y", "@executeautomation/playwright-mcp-server"]
-    }
-  }
-}

README.md

@@ -609,68 +609,6 @@ This project includes `.vscode/launch.json.default` and `.vscode/settings.json.d
 
 We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
 
-### Recommended MCP Integrations
-
-#### Playwright Browser Automation
-
-The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
-
-For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
-
-##### Setup for Claude Code
-
-After installing dependencies with `npm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
-
-Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
-
-
-```
-> navigate to localhost:5173 and take a screenshot.
-   tell me the items in the menubar
-
-● I'll navigate to localhost:5173 and take a
-  screenshot to see the menubar items.
-
-● playwright:playwright_navigate (MCP)(url:       …
-                                      "http://local
-                                      host:5173")
-  ⎿  Navigated to http://localhost:5173
-
-● playwright:playwright_screenshot (MCP)(name: "lo…
-                                        alhost_5173
-                                        _menubar")
-
-  ⎿ Screenshot saved to: ../../../Downloads/localho
-    st_5173_menubar-2025-05-30T17-23-00-942Z.png
-  ⎿  Screenshot also stored in memory with name:
-     'localhost_5173_menubar'
-
-● Read(../../../Downloads/localhost_5173_menubar-2…
-      25-05-30T17-23-00-942Z.png)
-  ⎿  Read image (94.3KB)
-
-● Based on the screenshot, I can see the menubar at
-   the top of the ComfyUI interface contains the
-  following items:
-
-  Main Menubar Items:
-  - Workflow - Menu for workflow-related actions
-  - Edit - Menu for editing operations
-  - Help - Menu for help and documentation
-
-  Additional UI Elements:
-  - ComfyUI Logo - On the far left
-  - Workflow Tab - Shows "Unsaved Workflow" with a
-  dropdown and close button
-  - Layout Controls - On the far right (grid view
-  and hamburger menu icons)
-
-  The interface shows a typical ComfyUI workflow
-  graph with nodes like "Load Checkpoint", "CLIP
-  Text Encode (Prompt)", "KSampler", and "Empty
-  Latent Image" connected with colored cables.
-```
-
 ### Unit Test
 
 - `npm i` to install all dependencies

browser_tests/tests/nodeHelp.spec.ts

@@ -0,0 +1,556 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+// TODO: there might be a better solution for this
+// Helper function to pan canvas and select node
+async function selectNodeWithPan(comfyPage: any, nodeRef: any) {
+  const nodePos = await nodeRef.getPosition()
+
+  await comfyPage.page.evaluate((pos) => {
+    const app = window['app']
+    const canvas = app.canvas
+    canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+    canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
+    canvas.setDirty(true, true)
+  }, nodePos)
+
+  await comfyPage.nextFrame()
+  await nodeRef.click('title')
+}
+
+test.describe('Node Help', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setup()
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test.describe('Selection Toolbox', () => {
+    test('Should open help menu for selected node', async ({ comfyPage }) => {
+      // Load a workflow with a node
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.loadWorkflow('default')
+
+      // Select a single node (KSampler) using node references
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      if (ksamplerNodes.length === 0) {
+        throw new Error('No KSampler nodes found in the workflow')
+      }
+
+      // Select the node with panning to ensure toolbox is visible
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Wait for selection overlay container and toolbox to appear
+      await expect(
+        comfyPage.page.locator('.selection-overlay-container')
+      ).toBeVisible()
+      await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
+
+      // Click the help button in the selection toolbox
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await expect(helpButton).toBeVisible()
+      await helpButton.click()
+
+      // Verify that the node library sidebar is opened
+      await expect(
+        comfyPage.menu.nodeLibraryTab.selectedTabButton
+      ).toBeVisible()
+
+      // Verify that the help page is shown for the correct node
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+      await expect(helpPage.locator('.node-help-content')).toBeVisible()
+    })
+  })
+
+  test.describe('Node Library Sidebar', () => {
+    test('Should open help menu from node library', async ({ comfyPage }) => {
+      // Open the node library sidebar
+      await comfyPage.menu.nodeLibraryTab.open()
+
+      // Wait for node library to load
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+
+      // Search for KSampler to make it easier to find
+      await comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput.fill(
+        'KSampler'
+      )
+
+      // Find the KSampler node in search results
+      const ksamplerNode = comfyPage.page
+        .locator('.tree-explorer-node-label')
+        .filter({ hasText: 'KSampler' })
+        .first()
+      await expect(ksamplerNode).toBeVisible()
+
+      // Hover over the node to show action buttons
+      await ksamplerNode.hover()
+
+      // Click the help button
+      const helpButton = ksamplerNode.locator('button:has(.pi-question)')
+      await expect(helpButton).toBeVisible()
+      await helpButton.click()
+
+      // Verify that the help page is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+      await expect(helpPage.locator('.node-help-content')).toBeVisible()
+    })
+
+    test('Should show node library tab when clicking back from help page', async ({
+      comfyPage
+    }) => {
+      // Open the node library sidebar
+      await comfyPage.menu.nodeLibraryTab.open()
+
+      // Wait for node library to load
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+
+      // Search for KSampler
+      await comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput.fill(
+        'KSampler'
+      )
+
+      // Find and interact with the node
+      const ksamplerNode = comfyPage.page
+        .locator('.tree-explorer-node-label')
+        .filter({ hasText: 'KSampler' })
+        .first()
+      await ksamplerNode.hover()
+      const helpButton = ksamplerNode.locator('button:has(.pi-question)')
+      await helpButton.click()
+
+      // Verify help page is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+
+      // Click the back button - use a more specific selector
+      const backButton = comfyPage.page.locator('button:has(.pi-arrow-left)')
+      await expect(backButton).toBeVisible()
+      await backButton.click()
+
+      // Verify that we're back to the node library view
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+      await expect(
+        comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput
+      ).toBeVisible()
+
+      // Verify help page is no longer visible
+      await expect(helpPage.locator('.node-help-content')).not.toBeVisible()
+    })
+  })
+
+  test.describe('Help Content', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    })
+
+    test('Should display loading state while fetching help', async ({
+      comfyPage
+    }) => {
+      // Mock slow network response
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        await route.fulfill({
+          status: 200,
+          body: '# Test Help Content\nThis is test help content.'
+        })
+      })
+
+      // Load workflow and select a node
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Click help button
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      // Verify loading spinner is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage.locator('.p-progressspinner')).toBeVisible()
+
+      // Wait for content to load
+      await expect(helpPage).toContainText('Test Help Content')
+    })
+
+    test('Should display fallback content when help file not found', async ({
+      comfyPage
+    }) => {
+      // Mock 404 response for help files
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await route.fulfill({
+          status: 404,
+          body: 'Not Found'
+        })
+      })
+
+      // Load workflow and select a node
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Click help button
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      // Verify fallback content is shown (description, inputs, outputs)
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('Description')
+      await expect(helpPage).toContainText('Inputs')
+      await expect(helpPage).toContainText('Outputs')
+    })
+
+    test('Should render markdown with images correctly', async ({
+      comfyPage
+    }) => {
+      // Mock response with markdown containing images
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Documentation
+
+![Example Image](example.jpg)
+![External Image](https://example.com/image.png)
+
+## Parameters
+- **steps**: Number of steps
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler Documentation')
+
+      // Check that relative image paths are prefixed correctly
+      const relativeImage = helpPage.locator('img[alt="Example Image"]')
+      await expect(relativeImage).toBeVisible()
+      await expect(relativeImage).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/example\.jpg/
+      )
+
+      // Check that absolute URLs are not modified
+      const externalImage = helpPage.locator('img[alt="External Image"]')
+      await expect(externalImage).toHaveAttribute(
+        'src',
+        'https://example.com/image.png'
+      )
+    })
+
+    test('Should render video elements with source tags in markdown', async ({
+      comfyPage
+    }) => {
+      // Mock response with video elements
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Demo
+
+<video src="demo.mp4" controls autoplay></video>
+<video src="/absolute/video.mp4" controls></video>
+
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <source src="https://example.com/video.webm" type="video/webm">
+</video>
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Check relative video paths are prefixed
+      const relativeVideo = helpPage.locator('video[src*="demo.mp4"]')
+      await expect(relativeVideo).toBeVisible()
+      await expect(relativeVideo).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/demo\.mp4/
+      )
+      await expect(relativeVideo).toHaveAttribute('controls', '')
+      await expect(relativeVideo).toHaveAttribute('autoplay', '')
+
+      // Check absolute paths are not modified
+      const absoluteVideo = helpPage.locator('video[src="/absolute/video.mp4"]')
+      await expect(absoluteVideo).toHaveAttribute('src', '/absolute/video.mp4')
+
+      // Check video source elements
+      const relativeVideoSource = helpPage.locator('source[src*="video.mp4"]')
+      await expect(relativeVideoSource).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/video\.mp4/
+      )
+
+      const externalVideoSource = helpPage.locator(
+        'source[src="https://example.com/video.webm"]'
+      )
+      await expect(externalVideoSource).toHaveAttribute(
+        'src',
+        'https://example.com/video.webm'
+      )
+    })
+
+    test('Should handle custom node documentation paths', async ({
+      comfyPage
+    }) => {
+      // First load workflow with custom node
+      await comfyPage.loadWorkflow('group_node_v1.3.3')
+
+      // Mock custom node documentation with fallback
+      await comfyPage.page.route(
+        '**/extensions/*/docs/*/en.md',
+        async (route) => {
+          await route.fulfill({ status: 404 })
+        }
+      )
+
+      await comfyPage.page.route('**/extensions/*/docs/*.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# Custom Node Documentation
+
+This is documentation for a custom node.
+
+![Custom Image](assets/custom.png)
+`
+        })
+      })
+
+      // Find and select a custom/group node
+      const nodeRefs = await comfyPage.page.evaluate(() => {
+        return window['app'].graph.nodes.map((n: any) => n.id)
+      })
+      if (nodeRefs.length > 0) {
+        const firstNode = await comfyPage.getNodeRefById(nodeRefs[0])
+        await selectNodeWithPan(comfyPage, firstNode)
+      }
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      if (await helpButton.isVisible()) {
+        await helpButton.click()
+
+        const helpPage = comfyPage.page.locator('.sidebar-content-container')
+        await expect(helpPage).toContainText('Custom Node Documentation')
+
+        // Check image path for custom nodes
+        const image = helpPage.locator('img[alt="Custom Image"]')
+        await expect(image).toHaveAttribute(
+          'src',
+          /.*\/extensions\/.*\/docs\/assets\/custom\.png/
+        )
+      }
+    })
+
+    test('Should sanitize dangerous HTML content', async ({ comfyPage }) => {
+      // Mock response with potentially dangerous content
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# Safe Content
+
+<script>alert('XSS')</script>
+<img src="x" onerror="alert('XSS')">
+<a href="javascript:alert('XSS')">Dangerous Link</a>
+<iframe src="evil.com"></iframe>
+
+<!-- Safe content -->
+<video src="safe.mp4" controls></video>
+<img src="safe.jpg" alt="Safe Image">
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Dangerous elements should be removed
+      await expect(helpPage.locator('script')).toHaveCount(0)
+      await expect(helpPage.locator('iframe')).toHaveCount(0)
+
+      // Check that onerror attribute is removed
+      const images = helpPage.locator('img')
+      const imageCount = await images.count()
+      for (let i = 0; i < imageCount; i++) {
+        const img = images.nth(i)
+        const onError = await img.getAttribute('onerror')
+        expect(onError).toBeNull()
+      }
+
+      // Check that javascript: links are sanitized
+      const links = helpPage.locator('a')
+      const linkCount = await links.count()
+      for (let i = 0; i < linkCount; i++) {
+        const link = links.nth(i)
+        const href = await link.getAttribute('href')
+        if (href !== null) {
+          expect(href).not.toContain('javascript:')
+        }
+      }
+
+      // Safe content should remain
+      await expect(helpPage.locator('video[src*="safe.mp4"]')).toBeVisible()
+      await expect(helpPage.locator('img[alt="Safe Image"]')).toBeVisible()
+    })
+
+    test('Should handle locale-specific documentation', async ({
+      comfyPage
+    }) => {
+      // Mock different responses for different locales
+      await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSamplerノード
+
+これは日本語のドキュメントです。
+`
+        })
+      })
+
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Node
+
+This is English documentation.
+`
+        })
+      })
+
+      // Set locale to Japanese
+      await comfyPage.setSetting('Comfy.Locale', 'ja')
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSamplerノード')
+      await expect(helpPage).toContainText('これは日本語のドキュメントです')
+
+      // Reset locale
+      await comfyPage.setSetting('Comfy.Locale', 'en')
+    })
+
+    test('Should handle network errors gracefully', async ({ comfyPage }) => {
+      // Mock network error
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await route.abort('failed')
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Should show fallback content (node description)
+      await expect(helpPage).toBeVisible()
+      await expect(helpPage.locator('.p-progressspinner')).not.toBeVisible()
+
+      // Should show some content even on error
+      const content = await helpPage.textContent()
+      expect(content).toBeTruthy()
+    })
+
+    test('Should update help content when switching between nodes', async ({
+      comfyPage
+    }) => {
+      // Mock different help content for different nodes
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: '# KSampler Help\n\nThis is KSampler documentation.'
+        })
+      })
+
+      await comfyPage.page.route(
+        '**/docs/CheckpointLoaderSimple/en.md',
+        async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: '# Checkpoint Loader Help\n\nThis is Checkpoint Loader documentation.'
+          })
+        }
+      )
+
+      await comfyPage.loadWorkflow('default')
+
+      // Select KSampler first
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler Help')
+      await expect(helpPage).toContainText('This is KSampler documentation')
+
+      // Now select Checkpoint Loader
+      const checkpointNodes = await comfyPage.getNodeRefsByType(
+        'CheckpointLoaderSimple'
+      )
+      await selectNodeWithPan(comfyPage, checkpointNodes[0])
+
+      // Click help button again
+      const helpButton2 = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-question-circle)'
+      )
+      await helpButton2.click()
+
+      // Content should update
+      await expect(helpPage).toContainText('Checkpoint Loader Help')
+      await expect(helpPage).toContainText(
+        'This is Checkpoint Loader documentation'
+      )
+      await expect(helpPage).not.toContainText('KSampler documentation')
+    })
+  })
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.21.3",
+  "version": "1.22.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -29,12 +29,12 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
-    "@executeautomation/playwright-mcp-server": "^1.0.5",
     "@iconify/json": "^2.2.245",
     "@lobehub/i18n-cli": "^1.20.0",
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.44.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/dompurify": "^3.0.5",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.8",
@@ -92,12 +92,14 @@
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
+    "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "firebase": "^11.6.0",
     "fuse.js": "^7.0.0",
     "jsondiffpatch": "^0.6.0",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.2",
+    "marked": "^15.0.11",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",

src/components/graph/SelectionToolbox.vue

@@ -18,6 +18,7 @@
       :key="command.id"
       :command="command"
     />
+    <HelpButton />
   </Panel>
 </template>
 
@@ -30,6 +31,7 @@ import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerBu
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
+import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'

src/components/graph/selectionToolbox/HelpButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <Button
+    v-show="nodeDef"
+    v-tooltip.top="{
+      value: $t('g.help'),
+      showDelay: 1000
+    }"
+    class="help-button"
+    text
+    icon="pi pi-question-circle"
+    severity="secondary"
+    @click="showHelp"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { useCanvasStore } from '@/stores/graphStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+const canvasStore = useCanvasStore()
+const nodeDefStore = useNodeDefStore()
+const sidebarTabStore = useSidebarTabStore()
+const nodeHelpStore = useNodeHelpStore()
+const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+
+const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
+  if (canvasStore.selectedItems.length !== 1) return null
+  const item = canvasStore.selectedItems[0]
+  if (!isLGraphNode(item)) return null
+  return nodeDefStore.fromLGraphNode(item)
+})
+
+const showHelp = () => {
+  const def = nodeDef.value
+  if (!def) return
+  if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
+    sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
+  }
+  nodeHelpStore.openHelp(def)
+}
+</script>

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -1,113 +1,124 @@
 <template>
-  <SidebarTabTemplate
-    :title="$t('sideToolbar.nodeLibrary')"
-    class="bg-[var(--p-tree-background)]"
-  >
-    <template #tool-buttons>
-      <Button
-        v-tooltip.bottom="$t('g.newFolder')"
-        class="new-folder-button"
-        icon="pi pi-folder-plus"
-        text
-        severity="secondary"
-        @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
-        :icon="selectedGroupingIcon"
-        text
-        severity="secondary"
-        @click="groupingPopover?.toggle($event)"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
-        :icon="selectedSortingIcon"
-        text
-        severity="secondary"
-        @click="sortingPopover?.toggle($event)"
-      />
-      <Button
-        v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
-        icon="pi pi-refresh"
-        text
-        severity="secondary"
-        @click="resetOrganization"
-      />
-      <Popover ref="groupingPopover">
-        <div class="flex flex-col gap-1 p-2">
-          <Button
-            v-for="option in groupingOptions"
-            :key="option.id"
-            :icon="option.icon"
-            :label="$t(option.label)"
-            text
-            :severity="
-              selectedGroupingId === option.id ? 'primary' : 'secondary'
-            "
-            class="justify-start"
-            @click="selectGrouping(option.id)"
+  <div class="h-full">
+    <SidebarTabTemplate
+      v-if="!isHelpOpen"
+      :title="$t('sideToolbar.nodeLibrary')"
+      class="bg-[var(--p-tree-background)]"
+    >
+      <template #tool-buttons>
+        <Button
+          v-tooltip.bottom="$t('g.newFolder')"
+          class="new-folder-button"
+          icon="pi pi-folder-plus"
+          text
+          severity="secondary"
+          @click="nodeBookmarkTreeExplorerRef?.addNewBookmarkFolder()"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.groupBy')"
+          :icon="selectedGroupingIcon"
+          text
+          severity="secondary"
+          @click="groupingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.sortMode')"
+          :icon="selectedSortingIcon"
+          text
+          severity="secondary"
+          @click="sortingPopover?.toggle($event)"
+        />
+        <Button
+          v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
+          icon="pi pi-refresh"
+          text
+          severity="secondary"
+          @click="resetOrganization"
+        />
+        <Popover ref="groupingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in groupingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedGroupingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectGrouping(option.id)"
+            />
+          </div>
+        </Popover>
+        <Popover ref="sortingPopover">
+          <div class="flex flex-col gap-1 p-2">
+            <Button
+              v-for="option in sortingOptions"
+              :key="option.id"
+              :icon="option.icon"
+              :label="$t(option.label)"
+              text
+              :severity="
+                selectedSortingId === option.id ? 'primary' : 'secondary'
+              "
+              class="justify-start"
+              @click="selectSorting(option.id)"
+            />
+          </div>
+        </Popover>
+      </template>
+      <template #header>
+        <div>
+          <SearchBox
+            v-model:modelValue="searchQuery"
+            class="node-lib-search-box p-2 2xl:p-4"
+            :placeholder="$t('g.searchNodes') + '...'"
+            filter-icon="pi pi-filter"
+            :filters
+            @search="handleSearch"
+            @show-filter="($event) => searchFilter?.toggle($event)"
+            @remove-filter="onRemoveFilter"
           />
-        </div>
-      </Popover>
-      <Popover ref="sortingPopover">
-        <div class="flex flex-col gap-1 p-2">
-          <Button
-            v-for="option in sortingOptions"
-            :key="option.id"
-            :icon="option.icon"
-            :label="$t(option.label)"
-            text
-            :severity="
-              selectedSortingId === option.id ? 'primary' : 'secondary'
-            "
-            class="justify-start"
-            @click="selectSorting(option.id)"
-          />
-        </div>
-      </Popover>
-    </template>
-    <template #header>
-      <SearchBox
-        v-model:modelValue="searchQuery"
-        class="node-lib-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchNodes') + '...'"
-        filter-icon="pi pi-filter"
-        :filters
-        @search="handleSearch"
-        @show-filter="($event) => searchFilter?.toggle($event)"
-        @remove-filter="onRemoveFilter"
-      />
 
-      <Popover ref="searchFilter" class="ml-[-13px]">
-        <NodeSearchFilter @add-filter="onAddFilter" />
-      </Popover>
-    </template>
-    <template #body>
-      <NodeBookmarkTreeExplorer
-        ref="nodeBookmarkTreeExplorerRef"
-        :filtered-node-defs="filteredNodeDefs"
-      />
-      <Divider
-        v-show="nodeBookmarkStore.bookmarks.length > 0"
-        type="dashed"
-        class="m-2"
-      />
-      <TreeExplorer
-        v-model:expandedKeys="expandedKeys"
-        class="node-lib-tree-explorer"
-        :root="renderedRoot"
-      >
-        <template #node="{ node }">
-          <NodeTreeLeaf :node="node" />
-        </template>
-      </TreeExplorer>
-    </template>
-  </SidebarTabTemplate>
+          <Popover ref="searchFilter" class="ml-[-13px]">
+            <NodeSearchFilter @add-filter="onAddFilter" />
+          </Popover>
+        </div>
+      </template>
+      <template #body>
+        <div>
+          <NodeBookmarkTreeExplorer
+            ref="nodeBookmarkTreeExplorerRef"
+            :filtered-node-defs="filteredNodeDefs"
+            :open-node-help="openHelp"
+          />
+          <Divider
+            v-show="nodeBookmarkStore.bookmarks.length > 0"
+            type="dashed"
+            class="m-2"
+          />
+          <TreeExplorer
+            v-model:expandedKeys="expandedKeys"
+            class="node-lib-tree-explorer"
+            :root="renderedRoot"
+          >
+            <template #node="{ node }">
+              <NodeTreeLeaf :node="node" :open-node-help="openHelp" />
+            </template>
+          </TreeExplorer>
+        </div>
+      </template>
+    </SidebarTabTemplate>
+
+    <NodeHelpPage v-else :node="currentHelpNode!" @close="closeHelp" />
+  </div>
   <div id="node-library-node-preview-container" />
 </template>
 
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
@@ -119,6 +130,7 @@ import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import NodeHelpPage from '@/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -129,6 +141,7 @@ import {
 } from '@/services/nodeOrganizationService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import type {
   GroupingStrategyId,
   SortingStrategyId
@@ -141,6 +154,7 @@ import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue
 
 const nodeDefStore = useNodeDefStore()
 const nodeBookmarkStore = useNodeBookmarkStore()
+const nodeHelpStore = useNodeHelpStore()
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
@@ -161,6 +175,9 @@ const selectedSortingId = useLocalStorage<SortingStrategyId>(
 
 const searchQuery = ref<string>('')
 
+const { currentHelpNode, isHelpOpen } = storeToRefs(nodeHelpStore)
+const { openHelp, closeHelp } = nodeHelpStore
+
 const groupingOptions = computed(() =>
   nodeOrganizationService.getGroupingStrategies().map((strategy) => ({
     id: strategy.id,

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -9,7 +9,7 @@
       <NodeTreeFolder :node="node" />
     </template>
     <template #node="{ node }">
-      <NodeTreeLeaf :node="node" />
+      <NodeTreeLeaf :node="node" :open-node-help="props.openNodeHelp" />
     </template>
   </TreeExplorer>
 
@@ -43,6 +43,7 @@ import type {
 
 const props = defineProps<{
   filteredNodeDefs: ComfyNodeDefImpl[]
+  openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
 }>()
 
 const expandedKeys = ref<Record<string, boolean>>({})

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="flex flex-col h-full bg-[var(--p-tree-background)] overflow-auto">
+    <div
+      class="px-3 py-2 flex items-center border-b border-[var(--p-divider-color)]"
+    >
+      <Button
+        v-tooltip.bottom="$t('g.back')"
+        icon="pi pi-arrow-left"
+        text
+        severity="secondary"
+        @click="$emit('close')"
+      />
+      <span class="ml-2 font-semibold">{{ node.display_name }}</span>
+    </div>
+    <div class="p-4 flex-grow node-help-content max-w-[600px] mx-auto">
+      <ProgressSpinner
+        v-if="isLoading"
+        class="m-auto"
+        aria-label="Loading help"
+      />
+      <!-- Markdown fetched successfully -->
+      <div
+        v-else-if="!error"
+        class="markdown-content"
+        v-html="renderedHelpHtml"
+      />
+      <!-- Fallback: markdown not found or fetch error -->
+      <div v-else class="text-sm space-y-6 fallback-content">
+        <p v-if="node.description">
+          <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
+        </p>
+
+        <div v-if="inputList.length">
+          <p>
+            <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
+          </p>
+          <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="input in inputList" :key="input.name">
+                <td>
+                  <code>{{ input.name }}</code>
+                </td>
+                <td>{{ input.type }}</td>
+                <td>{{ input.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="outputList.length">
+          <p>
+            <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
+          </p>
+          <table>
+            <thead>
+              <tr>
+                <th>{{ $t('g.name') }}</th>
+                <th>{{ $t('nodeHelpPage.type') }}</th>
+                <th>{{ $t('g.description') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="output in outputList" :key="output.name">
+                <td>
+                  <code>{{ output.name }}</code>
+                </td>
+                <td>{{ output.type }}</td>
+                <td>{{ output.tooltip || '-' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
+
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const inputList = computed(() =>
+  Object.values(node.inputs).map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+
+const outputList = computed(() =>
+  node.outputs.map((spec) => ({
+    name: spec.name,
+    type: spec.type,
+    tooltip: spec.tooltip || ''
+  }))
+)
+</script>
+
+<style scoped lang="postcss">
+.node-help-content :deep(:is(img, video)) {
+  @apply max-w-full h-auto block mb-4;
+}
+
+.markdown-content,
+.fallback-content {
+  @apply text-sm;
+}
+
+.markdown-content :deep(h1),
+.fallback-content h1 {
+  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h2),
+.fallback-content h2 {
+  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h3),
+.fallback-content h3 {
+  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(h4),
+.markdown-content :deep(h5),
+.markdown-content :deep(h6),
+.fallback-content h4,
+.fallback-content h5,
+.fallback-content h6 {
+  @apply mt-8 mb-4 first:mt-0;
+}
+
+.markdown-content :deep(td),
+.fallback-content td {
+  color: var(--drag-text);
+}
+
+.markdown-content :deep(a),
+.fallback-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+.markdown-content :deep(th),
+.fallback-content th {
+  color: var(--fg-color);
+}
+
+.markdown-content :deep(ul),
+.markdown-content :deep(ol),
+.fallback-content ul,
+.fallback-content ol {
+  @apply pl-8 my-2;
+}
+
+.markdown-content :deep(ul ul),
+.markdown-content :deep(ol ol),
+.markdown-content :deep(ul ol),
+.markdown-content :deep(ol ul),
+.fallback-content ul ul,
+.fallback-content ol ol,
+.fallback-content ul ol,
+.fallback-content ol ul {
+  @apply pl-6 my-2;
+}
+
+.markdown-content :deep(li),
+.fallback-content li {
+  @apply my-1;
+}
+
+.markdown-content :deep(*:first-child),
+.fallback-content > *:first-child {
+  @apply mt-0;
+}
+
+.markdown-content :deep(code),
+.fallback-content code {
+  @apply text-[var(--error-text)] bg-[var(--content-bg)] rounded px-1 py-0.5;
+}
+
+.markdown-content :deep(table),
+.fallback-content table {
+  @apply w-full border-collapse;
+}
+
+.markdown-content :deep(th),
+.markdown-content :deep(td),
+.fallback-content th,
+.fallback-content td {
+  @apply px-2 py-2;
+}
+
+.markdown-content :deep(tr),
+.fallback-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.markdown-content :deep(tr:last-child),
+.fallback-content tr:last-child {
+  border-bottom: none;
+}
+
+.markdown-content :deep(thead),
+.fallback-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+</style>

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -22,6 +22,15 @@
           severity="secondary"
           @click.stop="toggleBookmark"
         />
+        <Button
+          v-tooltip.bottom="$t('g.learnMore')"
+          class="help-button"
+          size="small"
+          icon="pi pi-question"
+          text
+          severity="secondary"
+          @click.stop="props.openNodeHelp(nodeDef)"
+        />
       </template>
     </TreeExplorerTreeNode>
 
@@ -54,6 +63,7 @@ import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+  openNodeHelp: (nodeDef: ComfyNodeDefImpl) => void
 }>()
 
 // Note: node.data should be present for leaf nodes.

src/locales/en/main.json

@@ -30,6 +30,7 @@
     "icon": "Icon",
     "color": "Color",
     "error": "Error",
+    "help": "Help",
     "loading": "Loading",
     "findIssues": "Find Issues",
     "reportIssue": "Send Report",
@@ -1423,5 +1424,13 @@
     "cancelEditTooltip": "Cancel edit",
     "copiedTooltip": "Copied",
     "copyTooltip": "Copy message to clipboard"
+  },
+  "nodeHelpPage": {
+    "inputs": "Inputs",
+    "outputs": "Outputs",
+    "type": "Type",
+    "moreHelp": "For more help, visit the",
+    "documentationPage": "documentation page",
+    "loadError": "Failed to load help: {error}"
   }
 }

src/locales/es/main.json

@@ -294,6 +294,7 @@
     "findIssues": "Encontrar problemas",
     "firstTimeUIMessage": "Esta es la primera vez que usas la nueva interfaz. Elige \"Menú > Usar nuevo menú > Desactivado\" para restaurar la antigua interfaz.",
     "goToNode": "Ir al nodo",
+    "help": "Ayuda",
     "icon": "Icono",
     "imageFailedToLoad": "Falló la carga de la imagen",
     "imageUrl": "URL de la imagen",
@@ -836,6 +837,14 @@
     "video": "video",
     "video_models": "modelos_de_video"
   },
+  "nodeHelpPage": {
+    "documentationPage": "página de documentación",
+    "inputs": "Entradas",
+    "loadError": "Error al cargar la ayuda: {error}",
+    "moreHelp": "Para más ayuda, visita la",
+    "outputs": "Salidas",
+    "type": "Tipo"
+  },
   "nodeTemplates": {
     "enterName": "Introduzca el nombre",
     "saveAsTemplate": "Guardar como plantilla"

src/locales/fr/main.json

@@ -294,6 +294,7 @@
     "findIssues": "Trouver des problèmes",
     "firstTimeUIMessage": "C'est la première fois que vous utilisez la nouvelle interface utilisateur. Choisissez \"Menu > Utiliser le nouveau menu > Désactivé\" pour restaurer l'ancienne interface utilisateur.",
     "goToNode": "Aller au nœud",
+    "help": "Aide",
     "icon": "Icône",
     "imageFailedToLoad": "Échec du chargement de l'image",
     "imageUrl": "URL de l'image",
@@ -836,6 +837,14 @@
     "video": "vidéo",
     "video_models": "modèles_vidéo"
   },
+  "nodeHelpPage": {
+    "documentationPage": "page de documentation",
+    "inputs": "Entrées",
+    "loadError": "Échec du chargement de l’aide : {error}",
+    "moreHelp": "Pour plus d'aide, visitez la",
+    "outputs": "Sorties",
+    "type": "Type"
+  },
   "nodeTemplates": {
     "enterName": "Entrez le nom",
     "saveAsTemplate": "Enregistrer comme modèle"

src/locales/ja/main.json

@@ -294,6 +294,7 @@
     "findIssues": "問題を見つける",
     "firstTimeUIMessage": "新しいUIを初めて使用しています。「メニュー > 新しいメニューを使用 > 無効」を選択することで古いUIに戻すことが可能です。",
     "goToNode": "ノードに移動",
+    "help": "ヘルプ",
     "icon": "アイコン",
     "imageFailedToLoad": "画像の読み込みに失敗しました",
     "imageUrl": "画像URL",
@@ -836,6 +837,14 @@
     "video": "ビデオ",
     "video_models": "ビデオモデル"
   },
+  "nodeHelpPage": {
+    "documentationPage": "ドキュメントページ",
+    "inputs": "入力",
+    "loadError": "ヘルプの読み込みに失敗しました: {error}",
+    "moreHelp": "さらに詳しい情報は、",
+    "outputs": "出力",
+    "type": "タイプ"
+  },
   "nodeTemplates": {
     "enterName": "名前を入力",
     "saveAsTemplate": "テンプレートとして保存"

src/locales/ko/main.json

@@ -294,6 +294,7 @@
     "findIssues": "문제 찾기",
     "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
     "goToNode": "노드로 이동",
+    "help": "도움말",
     "icon": "아이콘",
     "imageFailedToLoad": "이미지를 로드하지 못했습니다.",
     "imageUrl": "이미지 URL",
@@ -836,6 +837,14 @@
     "video": "비디오",
     "video_models": "비디오 모델"
   },
+  "nodeHelpPage": {
+    "documentationPage": "문서 페이지",
+    "inputs": "입력",
+    "loadError": "도움말을 불러오지 못했습니다: {error}",
+    "moreHelp": "더 많은 도움말은",
+    "outputs": "출력",
+    "type": "유형"
+  },
   "nodeTemplates": {
     "enterName": "이름 입력",
     "saveAsTemplate": "템플릿으로 저장"

src/locales/ru/main.json

@@ -294,6 +294,7 @@
     "findIssues": "Найти проблемы",
     "firstTimeUIMessage": "Вы впервые используете новый интерфейс. Выберите \"Меню > Использовать новое меню > Отключено\", чтобы восстановить старый интерфейс.",
     "goToNode": "Перейти к ноде",
+    "help": "Помощь",
     "icon": "Иконка",
     "imageFailedToLoad": "Не удалось загрузить изображение",
     "imageUrl": "URL изображения",
@@ -836,6 +837,14 @@
     "video": "видео",
     "video_models": "видеомодели"
   },
+  "nodeHelpPage": {
+    "documentationPage": "страницу документации",
+    "inputs": "Входы",
+    "loadError": "Не удалось загрузить справку: {error}",
+    "moreHelp": "Для получения дополнительной помощи посетите",
+    "outputs": "Выходы",
+    "type": "Тип"
+  },
   "nodeTemplates": {
     "enterName": "Введите название",
     "saveAsTemplate": "Сохранить как шаблон"

src/locales/zh/main.json

@@ -294,6 +294,7 @@
     "findIssues": "查找问题",
     "firstTimeUIMessage": "这是您第一次使用新界面。选择 \"菜单 > 使用新菜单 > 禁用\" 来恢复旧界面。",
     "goToNode": "转到节点",
+    "help": "帮助",
     "icon": "图标",
     "imageFailedToLoad": "图像加载失败",
     "imageUrl": "图片网址",
@@ -836,6 +837,14 @@
     "video": "视频",
     "video_models": "视频模型"
   },
+  "nodeHelpPage": {
+    "documentationPage": "文档页面",
+    "inputs": "输入",
+    "loadError": "加载帮助失败：{error}",
+    "moreHelp": "如需更多帮助，请访问",
+    "outputs": "输出",
+    "type": "类型"
+  },
   "nodeTemplates": {
     "enterName": "输入名称",
     "saveAsTemplate": "另存为模板"

src/schemas/nodeDef/nodeDefSchemaV2.ts

@@ -73,6 +73,7 @@ export const zComfyNodeDef = z.object({
   name: z.string(),
   display_name: z.string(),
   description: z.string(),
+  help: z.string().optional(),
   category: z.string(),
   output_node: z.boolean(),
   python_module: z.string(),

src/schemas/nodeDefSchema.ts

@@ -219,6 +219,7 @@ export const zComfyNodeDef = z.object({
   name: z.string(),
   display_name: z.string(),
   description: z.string(),
+  help: z.string().optional(),
   category: z.string(),
   output_node: z.boolean(),
   python_module: z.string(),
@@ -227,7 +228,7 @@ export const zComfyNodeDef = z.object({
   /**
    * Whether the node is an API node. Running API nodes requires login to
    * Comfy Org account.
-   * https://www.comfy.org/faq
+   * https://docs.comfy.org/tutorials/api-nodes/overview
    */
   api_node: z.boolean().optional()
 })

src/scripts/app.ts

@@ -52,7 +52,7 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { ExtensionManager } from '@/types/extensionTypes'
 import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
-import { getFileHandler, resolveDragDropFile } from '@/utils/fileHandlers'
+import { getFileHandler } from '@/utils/fileHandlers'
 import {
   executeWidgetsCallback,
   fixLinkInputSlots,
@@ -463,13 +463,9 @@ export class ComfyApp {
           event.dataTransfer.files.length &&
           event.dataTransfer.files[0].type !== 'image/bmp'
         ) {
-          const resolvedFile = await resolveDragDropFile(
-            event.dataTransfer.files[0],
-            event.dataTransfer
-          )
-          await this.handleFile(resolvedFile)
+          await this.handleFile(event.dataTransfer.files[0])
         } else {
-          // Try loading the first URI in the transfer list (handles Chrome->Firefox BMP case)
+          // Try loading the first URI in the transfer list
           const validTypes = ['text/uri-list', 'text/x-moz-url']
           const match = [...event.dataTransfer.types].find((t) =>
             validTypes.find((v) => t === v)

src/services/nodeHelpService.ts

@@ -0,0 +1,59 @@
+import { api } from '@/scripts/api'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+import { extractCustomNodeName } from '@/utils/nodeHelpUtil'
+
+export class NodeHelpService {
+  async fetchNodeHelp(node: ComfyNodeDefImpl, locale: string): Promise<string> {
+    const nodeSource = getNodeSource(node.python_module)
+
+    if (nodeSource.type === NodeSourceType.CustomNodes) {
+      return this.fetchCustomNodeHelp(node, locale)
+    } else {
+      return this.fetchCoreNodeHelp(node, locale)
+    }
+  }
+
+  private async fetchCustomNodeHelp(
+    node: ComfyNodeDefImpl,
+    locale: string
+  ): Promise<string> {
+    const customNodeName = extractCustomNodeName(node.python_module)
+    if (!customNodeName) {
+      throw new Error('Invalid custom node module')
+    }
+
+    // Try locale-specific path first
+    const localePath = `/extensions/${customNodeName}/docs/${node.name}/${locale}.md`
+    let res = await fetch(api.fileURL(localePath))
+
+    if (!res.ok) {
+      // Fall back to non-locale path
+      const fallbackPath = `/extensions/${customNodeName}/docs/${node.name}.md`
+      res = await fetch(api.fileURL(fallbackPath))
+    }
+
+    if (!res.ok) {
+      throw new Error(res.statusText)
+    }
+
+    return res.text()
+  }
+
+  private async fetchCoreNodeHelp(
+    node: ComfyNodeDefImpl,
+    locale: string
+  ): Promise<string> {
+    const mdUrl = `/docs/${node.name}/${locale}.md`
+    const res = await fetch(api.fileURL(mdUrl))
+
+    if (!res.ok) {
+      throw new Error(res.statusText)
+    }
+
+    return res.text()
+  }
+}
+
+// Export singleton instance
+export const nodeHelpService = new NodeHelpService()

src/stores/nodeDefStore.ts

@@ -38,6 +38,7 @@ export class ComfyNodeDefImpl
   category: string
   readonly python_module: string
   readonly description: string
+  readonly help: string
   readonly deprecated: boolean
   readonly experimental: boolean
   readonly output_node: boolean
@@ -118,6 +119,7 @@ export class ComfyNodeDefImpl
     this.category = obj.category
     this.python_module = obj.python_module
     this.description = obj.description
+    this.help = obj.help ?? ''
     this.deprecated = obj.deprecated ?? obj.category === ''
     this.experimental =
       obj.experimental ?? obj.category.startsWith('_for_testing')

src/stores/workspace/nodeHelpStore.ts

@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { i18n } from '@/i18n'
+import { nodeHelpService } from '@/services/nodeHelpService'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+import { getNodeHelpBaseUrl } from '@/utils/nodeHelpUtil'
+
+export const useNodeHelpStore = defineStore('nodeHelp', () => {
+  const currentHelpNode = ref<ComfyNodeDefImpl | null>(null)
+  const isHelpOpen = computed(() => currentHelpNode.value !== null)
+  const helpContent = ref<string>('')
+  const isLoading = ref<boolean>(false)
+  const errorMsg = ref<string | null>(null)
+
+  function openHelp(nodeDef: ComfyNodeDefImpl) {
+    currentHelpNode.value = nodeDef
+  }
+
+  function closeHelp() {
+    currentHelpNode.value = null
+  }
+
+  // Base URL for relative assets in node docs markdown
+  const baseUrl = computed(() => {
+    const node = currentHelpNode.value
+    if (!node) return ''
+    return getNodeHelpBaseUrl(node)
+  })
+
+  // Watch for help node changes and fetch its docs markdown
+  watch(
+    () => currentHelpNode.value,
+    async (node) => {
+      helpContent.value = ''
+      errorMsg.value = null
+
+      if (node) {
+        isLoading.value = true
+        try {
+          const locale = i18n.global.locale.value || 'en'
+          helpContent.value = await nodeHelpService.fetchNodeHelp(node, locale)
+        } catch (e: any) {
+          errorMsg.value = e.message
+          helpContent.value = node.description || ''
+        } finally {
+          isLoading.value = false
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  const renderedHelpHtml = computed(() => {
+    return renderMarkdownToHtml(helpContent.value, baseUrl.value)
+  })
+
+  return {
+    currentHelpNode,
+    isHelpOpen,
+    openHelp,
+    closeHelp,
+    baseUrl,
+    renderedHelpHtml,
+    isLoading,
+    error: errorMsg
+  }
+})

src/utils/fileHandlers.ts

@@ -334,51 +334,3 @@ export function getFileHandler(file: File): WorkflowFileHandler | null {
 
   return null
 }
-
-/**
- * Resolves the correct file from drag and drop events with URI fallback
- * when direct file processing doesn't yield workflow data
- */
-export async function resolveDragDropFile(
-  file: File,
-  dataTransfer: DataTransfer
-): Promise<File> {
-  const fileHandler = getFileHandler(file)
-  if (!fileHandler) {
-    return file
-  }
-
-  // First try direct file processing
-  const directResult = await fileHandler(file)
-
-  // If we got workflow data, return the original file
-  if (
-    directResult.workflow ||
-    directResult.prompt ||
-    directResult.parameters ||
-    directResult.jsonTemplateData
-  ) {
-    return file
-  }
-
-  // No workflow data found, try URI approach as fallback
-  const validTypes = ['text/uri-list', 'text/x-moz-url']
-  const match = [...dataTransfer.types].find((t) =>
-    validTypes.find((v) => t === v)
-  )
-
-  if (match) {
-    const uri = dataTransfer.getData(match)?.split('\n')?.[0]
-    if (uri) {
-      try {
-        const blob = await (await fetch(uri)).blob()
-        return new File([blob], file.name, { type: blob.type })
-      } catch (error) {
-        console.warn('URI fetch failed, using original file:', error)
-      }
-    }
-  }
-
-  // Return original file as fallback
-  return file
-}

src/utils/markdownRendererUtil.ts

@@ -0,0 +1,53 @@
+import DOMPurify from 'dompurify'
+import { Renderer, marked } from 'marked'
+
+const ALLOWED_TAGS = ['video', 'source']
+const ALLOWED_ATTRS = [
+  'controls',
+  'autoplay',
+  'loop',
+  'muted',
+  'preload',
+  'poster'
+]
+
+// Matches relative src attributes in img, source, and video HTML tags
+// Captures: 1) opening tag with src=", 2) relative path, 3) closing quote
+// Excludes absolute paths (starting with /) and URLs (http:// or https://)
+const MEDIA_SRC_REGEX =
+  /(<(?:img|source|video)[^>]*\ssrc=['"])(?!(?:\/|https?:\/\/))([^'"\s>]+)(['"])/gi
+
+// Create a marked Renderer that prefixes relative URLs with base
+export function createMarkdownRenderer(baseUrl?: string): Renderer {
+  const normalizedBase = baseUrl ? baseUrl.replace(/\/+$/, '') : ''
+  const renderer = new Renderer()
+  renderer.image = ({ href, title, text }) => {
+    let src = href
+    if (normalizedBase && !/^(?:\/|https?:\/\/)/.test(href)) {
+      src = `${normalizedBase}/${href}`
+    }
+    const titleAttr = title ? ` title="${title}"` : ''
+    return `<img src="${src}" alt="${text}"${titleAttr} />`
+  }
+  return renderer
+}
+
+export function renderMarkdownToHtml(
+  markdown: string,
+  baseUrl?: string
+): string {
+  if (!markdown) return ''
+
+  let html = marked.parse(markdown, {
+    renderer: createMarkdownRenderer(baseUrl)
+  }) as string
+
+  if (baseUrl) {
+    html = html.replace(MEDIA_SRC_REGEX, `$1${baseUrl}$2$3`)
+  }
+
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ALLOWED_TAGS,
+    ADD_ATTR: ALLOWED_ATTRS
+  })
+}

src/utils/nodeHelpUtil.ts

@@ -0,0 +1,23 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType, getNodeSource } from '@/types/nodeSource'
+
+export function extractCustomNodeName(
+  pythonModule: string | undefined
+): string | null {
+  const modules = pythonModule?.split('.') || []
+  if (modules.length >= 2 && modules[0] === 'custom_nodes') {
+    return modules[1].split('@')[0]
+  }
+  return null
+}
+
+export function getNodeHelpBaseUrl(node: ComfyNodeDefImpl): string {
+  const nodeSource = getNodeSource(node.python_module)
+  if (nodeSource.type === NodeSourceType.CustomNodes) {
+    const customNodeName = extractCustomNodeName(node.python_module)
+    if (customNodeName) {
+      return `/extensions/${customNodeName}/docs/`
+    }
+  }
+  return `/docs/${node.name}/`
+}

tests-ui/tests/store/nodeHelpStore.test.ts

@@ -0,0 +1,399 @@
+import { flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fileURL: vi.fn((url) => url)
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  i18n: {
+    global: {
+      locale: {
+        value: 'en'
+      }
+    }
+  }
+}))
+
+vi.mock('@/types/nodeSource', () => ({
+  NodeSourceType: {
+    Core: 'core',
+    CustomNodes: 'custom_nodes'
+  },
+  getNodeSource: vi.fn((pythonModule) => {
+    if (pythonModule?.startsWith('custom_nodes.')) {
+      return { type: 'custom_nodes' }
+    }
+    return { type: 'core' }
+  })
+}))
+
+vi.mock('dompurify', () => ({
+  default: {
+    sanitize: vi.fn((html) => html)
+  }
+}))
+
+vi.mock('marked', () => ({
+  marked: {
+    parse: vi.fn((markdown, options) => {
+      if (options?.renderer) {
+        if (markdown.includes('![')) {
+          const matches = markdown.match(/!\[(.*?)\]\((.*?)\)/)
+          if (matches) {
+            const [, text, href] = matches
+            return options.renderer.image({ href, text, title: '' })
+          }
+        }
+      }
+      return `<p>${markdown}</p>`
+    })
+  },
+  Renderer: class Renderer {
+    image = vi.fn(
+      ({ href, title, text }) =>
+        `<img src="${href}" alt="${text}"${title ? ` title="${title}"` : ''} />`
+    )
+    link = vi.fn(
+      ({ href, title, text }) =>
+        `<a href="${href}"${title ? ` title="${title}"` : ''}>${text}</a>`
+    )
+  }
+}))
+
+describe('nodeHelpStore', () => {
+  // Define a mock node for testing
+  const mockCoreNode = {
+    name: 'TestNode',
+    display_name: 'Test Node',
+    description: 'A test node',
+    inputs: {},
+    outputs: [],
+    python_module: 'comfy.test_node'
+  }
+
+  const mockCustomNode = {
+    name: 'CustomNode',
+    display_name: 'Custom Node',
+    description: 'A custom node',
+    inputs: {},
+    outputs: [],
+    python_module: 'custom_nodes.test_module.custom@1.0.0'
+  }
+
+  // Mock fetch responses
+  const mockFetch = vi.fn()
+  global.fetch = mockFetch
+
+  beforeEach(() => {
+    // Setup Pinia
+    setActivePinia(createPinia())
+    mockFetch.mockReset()
+  })
+
+  it('should initialize with empty state', () => {
+    const nodeHelpStore = useNodeHelpStore()
+    expect(nodeHelpStore.currentHelpNode).toBeNull()
+    expect(nodeHelpStore.isHelpOpen).toBe(false)
+  })
+
+  it('should open help for a node', () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+
+    expect(nodeHelpStore.currentHelpNode).toStrictEqual(mockCoreNode)
+    expect(nodeHelpStore.isHelpOpen).toBe(true)
+  })
+
+  it('should close help', () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    expect(nodeHelpStore.isHelpOpen).toBe(true)
+
+    nodeHelpStore.closeHelp()
+    expect(nodeHelpStore.currentHelpNode).toBeNull()
+    expect(nodeHelpStore.isHelpOpen).toBe(false)
+  })
+
+  it('should generate correct baseUrl for core nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await nextTick()
+
+    expect(nodeHelpStore.baseUrl).toBe(`/docs/${mockCoreNode.name}/`)
+  })
+
+  it('should generate correct baseUrl for custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await nextTick()
+
+    expect(nodeHelpStore.baseUrl).toBe('/extensions/test_module/docs/')
+  })
+
+  it('should render markdown content correctly', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '# Test Help\nThis is test help content'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'This is test help content'
+    )
+  })
+
+  it('should handle fetch errors and fall back to description', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      statusText: 'Not Found'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+
+    expect(nodeHelpStore.error).toBe('Not Found')
+    expect(nodeHelpStore.renderedHelpHtml).toContain(mockCoreNode.description)
+  })
+
+  it('should include alt attribute for images', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '![image](test.jpg)'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="image"')
+  })
+
+  it('should prefix relative video src in custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '<video src="video.mp4"></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/extensions/test_module/docs/video.mp4"'
+    )
+  })
+
+  it('should prefix relative video src for core nodes with node-specific base URL', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '<video src="video.mp4"></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video.mp4"`
+    )
+  })
+
+  it('should prefix relative source src in custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () =>
+        '<video><source src="video.mp4" type="video/mp4" /></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/extensions/test_module/docs/video.mp4"'
+    )
+  })
+
+  it('should prefix relative source src for core nodes with node-specific base URL', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () =>
+        '<video><source src="video.webm" type="video/webm" /></video>'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video.webm"`
+    )
+  })
+
+  it('should handle loading state', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockImplementationOnce(() => new Promise(() => {})) // Never resolves
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await nextTick()
+
+    expect(nodeHelpStore.isLoading).toBe(true)
+  })
+
+  it('should try fallback URL for custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch
+      .mockResolvedValueOnce({
+        ok: false,
+        statusText: 'Not Found'
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        text: async () => '# Fallback content'
+      })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+
+    expect(mockFetch).toHaveBeenCalledTimes(2)
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/extensions/test_module/docs/CustomNode/en.md'
+    )
+    expect(mockFetch).toHaveBeenCalledWith(
+      '/extensions/test_module/docs/CustomNode.md'
+    )
+  })
+
+  it('should prefix relative img src in raw HTML for custom nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '# Test\n<img src="image.png" alt="Test image">'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/extensions/test_module/docs/image.png"'
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Test image"')
+  })
+
+  it('should prefix relative img src in raw HTML for core nodes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '# Test\n<img src="image.png" alt="Test image">'
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/image.png"`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Test image"')
+  })
+
+  it('should not prefix absolute img src in raw HTML', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => '<img src="/absolute/image.png" alt="Absolute">'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="/absolute/image.png"'
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Absolute"')
+  })
+
+  it('should not prefix external img src in raw HTML', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () =>
+        '<img src="https://example.com/image.png" alt="External">'
+    })
+
+    nodeHelpStore.openHelp(mockCustomNode as any)
+    await flushPromises()
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      'src="https://example.com/image.png"'
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain('alt="External"')
+  })
+
+  it('should handle various quote styles in media src attributes', async () => {
+    const nodeHelpStore = useNodeHelpStore()
+
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      text: async () => `# Media Test
+
+Testing quote styles in properly formed HTML:
+
+<video src="video1.mp4" controls></video>
+<video src='video2.mp4' controls></video>
+<img src="image1.png" alt="Double quotes">
+<img src='image2.png' alt='Single quotes'>
+
+<video controls>
+  <source src="video3.mp4" type="video/mp4">
+  <source src='video3.webm' type='video/webm'>
+</video>
+
+The MEDIA_SRC_REGEX handles both single and double quotes in img, video and source tags.`
+    })
+
+    nodeHelpStore.openHelp(mockCoreNode as any)
+    await flushPromises()
+
+    // Check that all media elements with different quote styles are prefixed correctly
+    // Double quotes remain as double quotes
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video1.mp4"`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/image1.png"`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src="/docs/${mockCoreNode.name}/video3.mp4"`
+    )
+
+    // Single quotes remain as single quotes in the output
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src='/docs/${mockCoreNode.name}/video2.mp4'`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src='/docs/${mockCoreNode.name}/image2.png'`
+    )
+    expect(nodeHelpStore.renderedHelpHtml).toContain(
+      `src='/docs/${mockCoreNode.name}/video3.webm'`
+    )
+  })
+})

vite.config.mts

@@ -52,6 +52,18 @@ export default defineConfig({
         target: DEV_SERVER_COMFYUI_URL
       },
 
+      // Proxy extension assets (images/videos) under /extensions to the ComfyUI backend
+      '/extensions': {
+        target: DEV_SERVER_COMFYUI_URL,
+        changeOrigin: true
+      },
+
+      // Proxy docs markdown from backend
+      '/docs': {
+        target: DEV_SERVER_COMFYUI_URL,
+        changeOrigin: true
+      },
+
       ...(!DISABLE_TEMPLATES_PROXY
         ? {
             '/templates': {