Add algolia search domain.

Co-authored-by: huchenlei <20929282+huchenlei@users.noreply.github.com>

.env_example

@@ -25,3 +25,7 @@ ENABLE_MINIFY=true
 # templates are served via the normal method from the server's python site 
 # packages.
 DISABLE_TEMPLATES_PROXY=false
+
+# If playwright tests are being run via vite dev server, Vue plugins will
+# invalidate screenshots.  When `true`, vite plugins will not be loaded.
+DISABLE_VUE_PLUGINS=false

.github/workflows/dev-release.yaml

@@ -0,0 +1,72 @@
+name: Create Dev PyPI Package
+
+on:
+  workflow_dispatch:
+    inputs:
+      devVersion:
+        description: 'Dev version'
+        required: true
+        type: number
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.current_version.outputs.version }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+      - name: Get current version
+        id: current_version
+        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+      - name: Build project
+        env:
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+          ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
+          USE_PROD_CONFIG: 'true'
+        run: |
+          npm ci
+          npm run build
+          npm run zipdist
+      - name: Upload dist artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-files
+          path: |
+            dist/
+            dist.zip
+
+  publish_pypi:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Download dist artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-files
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.x'
+      - name: Install build dependencies
+        run: python -m pip install build
+      - name: Setup pypi package
+        run: |
+          mkdir -p comfyui_frontend_package/comfyui_frontend_package/static/
+          cp -r dist/* comfyui_frontend_package/comfyui_frontend_package/static/
+      - name: Build pypi package
+        run: python -m build
+        working-directory: comfyui_frontend_package
+        env:
+          COMFYUI_FRONTEND_VERSION: ${{ format('{0}.dev{1}', needs.build.outputs.version, inputs.devVersion) }}
+      - name: Publish pypi package
+        uses: pypa/gh-action-pypi-publish@release/v1
+        with:
+          password: ${{ secrets.PYPI_TOKEN }}
+          packages-dir: comfyui_frontend_package/dist

README.md

@@ -526,14 +526,46 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 
 ## Development
 
-### Tech Stack
+### Prerequisites & Technology Stack
 
-- [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
-- [Pinia](https://pinia.vuejs.org/) for state management
-- [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
-- [litegraph.js](https://github.com/Comfy-Org/litegraph.js) for node editor
-- [zod](https://zod.dev/) for schema validation
-- [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
+- **Required Software**:
+  - Node.js (v16 or later) and npm
+  - Git for version control
+  - A running ComfyUI backend instance
+  
+- **Tech Stack**:
+  - [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
+  - [Pinia](https://pinia.vuejs.org/) for state management
+  - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
+  - [litegraph.js](https://github.com/Comfy-Org/litegraph.js) for node editor
+  - [zod](https://zod.dev/) for schema validation
+  - [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
+
+### Initial Setup
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/Comfy-Org/ComfyUI_frontend.git
+   cd ComfyUI_frontend
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Configure environment (optional):
+   Create a `.env` file in the project root based on the provided [.env.example](.env.example) file.
+
+   **Note about ports**: By default, the dev server expects the ComfyUI backend at `localhost:8188`. If your ComfyUI instance runs on a different port, update this in your `.env` file.
+
+### Dev Server Configuration
+
+To launch ComfyUI and have it connect to your development server:
+
+```bash
+python main.py --port 8188
+```
 
 ### Git pre-commit hooks
 
@@ -575,7 +607,7 @@ navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to
 
 This project includes `.vscode/launch.json.default` and `.vscode/settings.json.default` files with recommended launch and workspace settings for editors that use the `.vscode` directory (e.g., VS Code, Cursor, etc.).
 
-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.
+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.
 
 ### Unit Test
 
@@ -606,3 +638,103 @@ This will replace the litegraph package in this repo with the local litegraph re
 ### i18n
 
 See [locales/README.md](src/locales/README.md) for details.
+
+## Troubleshooting
+
+> **Note**: For comprehensive troubleshooting and how-to guides, please refer to our [official documentation](https://docs.comfy.org/). This section covers only the most common issues related to frontend development.
+
+> **Desktop Users**: For issues specific to the desktop application, please refer to the [ComfyUI desktop repository](https://github.com/Comfy-Org/desktop).
+
+### Debugging Custom Node (Extension) Issues
+
+If you're experiencing crashes, errors, or unexpected behavior with ComfyUI, it's often caused by custom nodes (extensions). Follow these steps to identify and resolve the issues:
+
+#### Step 1: Verify if custom nodes are causing the problem
+
+Run ComfyUI with the `--disable-all-custom-nodes` flag:
+
+```bash
+python main.py --disable-all-custom-nodes
+```
+
+If the issue disappears, a custom node is the culprit. Proceed to the next step.
+
+#### Step 2: Identify the problematic custom node using binary search
+
+Rather than disabling nodes one by one, use this more efficient approach:
+
+1. Temporarily move half of your custom nodes out of the `custom_nodes` directory
+   ```bash
+   # Create a temporary directory
+   # Linux/Mac
+   mkdir ~/custom_nodes_disabled
+   
+   # Windows
+   mkdir %USERPROFILE%\custom_nodes_disabled
+   
+   # Move half of your custom nodes (assuming you have node1 through node8)
+   # Linux/Mac
+   mv custom_nodes/node1 custom_nodes/node2 custom_nodes/node3 custom_nodes/node4 ~/custom_nodes_disabled/
+   
+   # Windows
+   move custom_nodes\node1 custom_nodes\node2 custom_nodes\node3 custom_nodes\node4 %USERPROFILE%\custom_nodes_disabled\
+   ```
+
+2. Run ComfyUI again
+   - If the issue persists: The problem is in nodes 5-8 (the remaining half)
+   - If the issue disappears: The problem is in nodes 1-4 (the moved half)
+
+3. Let's assume the issue disappeared, so the problem is in nodes 1-4. Move half of these for the next test:
+   ```bash
+   # Move nodes 3-4 back to custom_nodes
+   # Linux/Mac
+   mv ~/custom_nodes_disabled/node3 ~/custom_nodes_disabled/node4 custom_nodes/
+   
+   # Windows
+   move %USERPROFILE%\custom_nodes_disabled\node3 %USERPROFILE%\custom_nodes_disabled\node4 custom_nodes\
+   ```
+
+4. Run ComfyUI again
+   - If the issue reappears: The problem is in nodes 3-4
+   - If issue still gone: The problem is in nodes 1-2
+
+5. Let's assume the issue reappeared, so the problem is in nodes 3-4. Test each one:
+   ```bash
+   # Move node 3 back to disabled
+   # Linux/Mac
+   mv custom_nodes/node3 ~/custom_nodes_disabled/
+   
+   # Windows
+   move custom_nodes\node3 %USERPROFILE%\custom_nodes_disabled\
+   ```
+
+6. Run ComfyUI again
+   - If the issue disappears: node3 is the problem
+   - If issue persists: node4 is the problem
+
+7. Repeat until you identify the specific problematic node
+
+#### Step 3: Update or replace the problematic node
+
+Once identified:
+1. Check for updates to the problematic custom node
+2. Consider alternatives with similar functionality
+3. Report the issue to the custom node developer with specific details
+
+### Common Issues and Solutions
+
+- **"Module not found" errors**: Usually indicates missing Python dependencies. Check the custom node's `requirements.txt` file for required packages and install them:
+  ```bash
+  pip install -r custom_nodes/problematic_node/requirements.txt
+  ```
+
+- **Frontend or Templates Package Not Updated**: After updating ComfyUI via Git, ensure you update the frontend dependencies:
+  ```bash
+  pip install -r requirements.txt
+  ```
+
+- **Can't Find Custom Node**: Make sure to disable node validation in ComfyUI settings.
+
+- **Error Toast About Workflow Failing Validation**: Report the issue to the ComfyUI team. As a temporary workaround, disable workflow validation in settings.
+
+- **Login Issues When Not on Localhost**: Normal login is only available when accessing from localhost. If you're running ComfyUI via LAN, another domain, or headless, you can use our API key feature to authenticate. The API key lets you log in normally through the UI. Generate an API key at [platform.comfy.org/login](https://platform.comfy.org/login) and use it in the API Key field in the login dialog or with the `--api-key` command line argument. Refer to our [API Key Integration Guide](https://docs.comfy.org/essentials/comfyui-server/api-key-integration#integration-of-api-key-to-use-comfyui-api-nodes) for complete setup instructions.

browser_tests/fixtures/ComfyPage.ts

@@ -275,7 +275,6 @@ export class ComfyPage {
         localStorage.clear()
         sessionStorage.clear()
         localStorage.setItem('Comfy.userId', id)
-        localStorage.setItem('api-nodes-news-seen', 'true')
       }, this.id)
     }
     await this.goto()

browser_tests/tests/chatHistory.spec.ts

@@ -0,0 +1,139 @@
+import { Page, expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+interface ChatHistoryEntry {
+  prompt: string
+  response: string
+  response_id: string
+}
+
+async function renderChatHistory(page: Page, history: ChatHistoryEntry[]) {
+  const nodeId = await page.evaluate(() => window['app'].graph.nodes[0]?.id)
+  // Simulate API sending display_component message
+  await page.evaluate(
+    ({ nodeId, history }) => {
+      const event = new CustomEvent('display_component', {
+        detail: {
+          node_id: nodeId,
+          component: 'ChatHistoryWidget',
+          props: {
+            history: JSON.stringify(history)
+          }
+        }
+      })
+      window['app'].api.dispatchEvent(event)
+      return true
+    },
+    { nodeId, history }
+  )
+
+  return nodeId
+}
+
+test.describe('Chat History Widget', () => {
+  let nodeId: string
+
+  test.beforeEach(async ({ comfyPage }) => {
+    nodeId = await renderChatHistory(comfyPage.page, [
+      { prompt: 'Hello', response: 'World', response_id: '123' }
+    ])
+    // Wait for chat history to be rendered
+    await comfyPage.page.waitForSelector('.pi-pencil')
+  })
+
+  test('displays chat history when receiving display_component message', async ({
+    comfyPage
+  }) => {
+    // Verify the chat history is displayed correctly
+    await expect(comfyPage.page.getByText('Hello')).toBeVisible()
+    await expect(comfyPage.page.getByText('World')).toBeVisible()
+  })
+
+  test('handles message editing interaction', async ({ comfyPage }) => {
+    // Get first node's ID
+    nodeId = await comfyPage.page.evaluate(() => {
+      const node = window['app'].graph.nodes[0]
+
+      // Make sure the node has a prompt widget (for editing functionality)
+      if (!node.widgets) {
+        node.widgets = []
+      }
+
+      // Add a prompt widget if it doesn't exist
+      if (!node.widgets.find((w) => w.name === 'prompt')) {
+        node.widgets.push({
+          name: 'prompt',
+          type: 'text',
+          value: 'Original prompt'
+        })
+      }
+
+      return node.id
+    })
+
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Message 1',
+        response: 'Response 1',
+        response_id: '123'
+      },
+      {
+        prompt: 'Message 2',
+        response: 'Response 2',
+        response_id: '456'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    const originalTextAreaInput = await comfyPage.page
+      .getByPlaceholder('text')
+      .nth(1)
+      .inputValue()
+
+    // Click edit button on first message
+    await comfyPage.page.getByLabel('Edit').first().click()
+    await comfyPage.nextFrame()
+
+    // Verify cancel button appears
+    await expect(comfyPage.page.getByLabel('Cancel')).toBeVisible()
+
+    // Click cancel edit
+    await comfyPage.page.getByLabel('Cancel').click()
+
+    // Verify prompt input is restored
+    await expect(comfyPage.page.getByPlaceholder('text').nth(1)).toHaveValue(
+      originalTextAreaInput
+    )
+  })
+
+  test('handles real-time updates to chat history', async ({ comfyPage }) => {
+    // Send initial history
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Initial message',
+        response: 'Initial response',
+        response_id: '123'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    // Update history with additional messages
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Follow-up',
+        response: 'New response',
+        response_id: '456'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    // Move mouse over the canvas to force update
+    await comfyPage.page.mouse.move(100, 100)
+    await comfyPage.nextFrame()
+
+    // Verify new messages appear
+    await expect(comfyPage.page.getByText('Follow-up')).toBeVisible()
+    await expect(comfyPage.page.getByText('New response')).toBeVisible()
+  })
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.20.0",
+  "version": "1.20.3",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -63,6 +63,8 @@
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.19",
     "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^2.0.0",
     "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
@@ -72,7 +74,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.15.9",
+    "@comfyorg/litegraph": "^0.15.11",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/components/actionbar/ComfyActionbar.vue

@@ -63,15 +63,6 @@ watchDebounced(
 
 // Set initial position to bottom center
 const setInitialPosition = () => {
-  if (x.value !== 0 || y.value !== 0) {
-    return
-  }
-  if (storedPosition.value.x !== 0 || storedPosition.value.y !== 0) {
-    x.value = storedPosition.value.x
-    y.value = storedPosition.value.y
-    captureLastDragState()
-    return
-  }
   if (panelRef.value) {
     const screenWidth = window.innerWidth
     const screenHeight = window.innerHeight
@@ -82,9 +73,25 @@ const setInitialPosition = () => {
       return
     }
 
-    x.value = (screenWidth - menuWidth) / 2
-    y.value = screenHeight - menuHeight - 10 // 10px margin from bottom
-    captureLastDragState()
+    // Check if stored position exists and is within bounds
+    if (storedPosition.value.x !== 0 || storedPosition.value.y !== 0) {
+      // Ensure stored position is within screen bounds
+      x.value = clamp(storedPosition.value.x, 0, screenWidth - menuWidth)
+      y.value = clamp(storedPosition.value.y, 0, screenHeight - menuHeight)
+      captureLastDragState()
+      return
+    }
+
+    // If no stored position or current position, set to bottom center
+    if (x.value === 0 && y.value === 0) {
+      x.value = clamp((screenWidth - menuWidth) / 2, 0, screenWidth - menuWidth)
+      y.value = clamp(
+        screenHeight - menuHeight - 10,
+        0,
+        screenHeight - menuHeight
+      )
+      captureLastDragState()
+    }
   }
 }
 onMounted(setInitialPosition)

src/components/dialog/content/ApiNodesNewsContent.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="flex flex-col gap-12 p-2 w-96">
-    <img src="@/assets/images/api-nodes-news.webp" alt="API Nodes News" />
-    <div class="flex flex-col gap-2 justify-center items-center">
-      <div class="text-xl">
-        {{ $t('apiNodesNews.introducing') }}
-        <span class="text-amber-500">API NODES</span>
-      </div>
-      <div class="text-muted">{{ $t('apiNodesNews.subtitle') }}</div>
-    </div>
-
-    <div class="flex flex-col gap-4">
-      <div
-        v-for="(step, index) in steps"
-        :key="index"
-        class="grid grid-cols-[auto_1fr] gap-2 items-center"
-      >
-        <Tag class="w-8 h-8" :value="index + 1" rounded />
-        <div class="flex flex-col gap-2">
-          <div>{{ step.title }}</div>
-          <div v-if="step.subtitle" class="text-muted">
-            {{ step.subtitle }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-row justify-between">
-      <Button label="Learn More" text @click="handleLearnMore" />
-      <Button label="Close" @click="onClose" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Tag from 'primevue/tag'
-import { onBeforeUnmount } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const steps: {
-  title: string
-  subtitle?: string
-}[] = [
-  {
-    title: t('apiNodesNews.steps.step1.title'),
-    subtitle: t('apiNodesNews.steps.step1.subtitle')
-  },
-  {
-    title: t('apiNodesNews.steps.step2.title'),
-    subtitle: t('apiNodesNews.steps.step2.subtitle')
-  },
-  {
-    title: t('apiNodesNews.steps.step3.title')
-  },
-  {
-    title: t('apiNodesNews.steps.step4.title')
-  }
-]
-
-const { onClose } = defineProps<{
-  onClose: () => void
-}>()
-
-const handleLearnMore = () => {
-  window.open('https://blog.comfy.org/p/comfyui-native-api-nodes', '_blank')
-}
-
-onBeforeUnmount(() => {
-  localStorage.setItem('api-nodes-news-seen', 'true')
-})
-</script>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -30,7 +30,7 @@
       </div>
     </template>
   </ListBox>
-  <div class="flex justify-end py-3">
+  <div v-if="isManagerInstalled" class="flex justify-end py-3">
     <Button label="Open Manager" size="small" outlined @click="openManager" />
   </div>
 </template>
@@ -42,6 +42,7 @@ import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { useDialogService } from '@/services/dialogService'
+import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -49,6 +50,19 @@ const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
+const aboutPanelStore = useAboutPanelStore()
+
+// Determines if ComfyUI-Manager is installed by checking for its badge in the about panel
+// This allows us to conditionally show the Manager button only when the extension is available
+// TODO: Remove this check when Manager functionality is fully migrated into core
+const isManagerInstalled = computed(() => {
+  return aboutPanelStore.badges.some(
+    (badge) =>
+      badge.label.includes('ComfyUI-Manager') ||
+      badge.url.includes('ComfyUI-Manager')
+  )
+})
+
 const uniqueNodes = computed(() => {
   const seenTypes = new Set()
   return props.missingNodeTypes

src/components/graph/DomWidgets.vue

@@ -12,7 +12,8 @@
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { computed, watch } from 'vue'
+import { whenever } from '@vueuse/core'
+import { computed } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
@@ -54,18 +55,13 @@ const updateWidgets = () => {
 }
 
 const canvasStore = useCanvasStore()
-watch(
+whenever(
   () => canvasStore.canvas,
-  (lgCanvas) => {
-    if (!lgCanvas) return
-
-    lgCanvas.onDrawForeground = useChainCallback(
-      lgCanvas.onDrawForeground,
-      () => {
-        updateWidgets()
-      }
-    )
-  },
+  (canvas) =>
+    (canvas.onDrawForeground = useChainCallback(
+      canvas.onDrawForeground,
+      updateWidgets
+    )),
   { immediate: true }
 )
 </script>

src/components/graph/GraphCanvas.vue

@@ -27,7 +27,6 @@
     class="w-full h-full touch-none"
   />
 
-  <NodeBadge />
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover />
 
@@ -53,7 +52,6 @@ import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
-import NodeBadge from '@/components/graph/NodeBadge.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionOverlay from '@/components/graph/SelectionOverlay.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
@@ -62,6 +60,7 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
@@ -71,7 +70,7 @@ import { usePaste } from '@/composables/usePaste'
 import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
-import { i18n } from '@/i18n'
+import { i18n, t } from '@/i18n'
 import type { NodeId } from '@/schemas/comfyWorkflowSchema'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
@@ -231,7 +230,7 @@ useEventListener(
   () => {
     toastStore.add({
       severity: 'warn',
-      summary: 'No items selected',
+      summary: t('toastMessages.nothingSelected'),
       life: 2000
     })
   },
@@ -254,6 +253,7 @@ const workflowPersistence = useWorkflowPersistence()
 // @ts-expect-error fixme ts strict error
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
+useNodeBadge()
 
 onMounted(async () => {
   useGlobalLitegraph()

src/components/graph/NodeBadge.vue

@@ -1,114 +0,0 @@
-<template>
-  <div>
-    <!-- This component does not render anything visible. -->
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  BadgePosition,
-  LGraphBadge,
-  type LGraphNode
-} from '@comfyorg/litegraph'
-import _ from 'lodash'
-import { computed, onMounted, watch } from 'vue'
-
-import { app } from '@/scripts/app'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { NodeBadgeMode } from '@/types/nodeSource'
-
-const settingStore = useSettingStore()
-const colorPaletteStore = useColorPaletteStore()
-
-const nodeSourceBadgeMode = computed(
-  () => settingStore.get('Comfy.NodeBadge.NodeSourceBadgeMode') as NodeBadgeMode
-)
-const nodeIdBadgeMode = computed(
-  () => settingStore.get('Comfy.NodeBadge.NodeIdBadgeMode') as NodeBadgeMode
-)
-const nodeLifeCycleBadgeMode = computed(
-  () =>
-    settingStore.get('Comfy.NodeBadge.NodeLifeCycleBadgeMode') as NodeBadgeMode
-)
-
-watch([nodeSourceBadgeMode, nodeIdBadgeMode, nodeLifeCycleBadgeMode], () => {
-  app.graph?.setDirtyCanvas(true, true)
-})
-
-const nodeDefStore = useNodeDefStore()
-function badgeTextVisible(
-  nodeDef: ComfyNodeDefImpl | null,
-  badgeMode: NodeBadgeMode
-): boolean {
-  return !(
-    badgeMode === NodeBadgeMode.None ||
-    (nodeDef?.isCoreNode && badgeMode === NodeBadgeMode.HideBuiltIn)
-  )
-}
-
-onMounted(() => {
-  app.registerExtension({
-    name: 'Comfy.NodeBadge',
-    nodeCreated(node: LGraphNode) {
-      node.badgePosition = BadgePosition.TopRight
-
-      const badge = computed(() => {
-        const nodeDef = nodeDefStore.fromLGraphNode(node)
-        return new LGraphBadge({
-          text: _.truncate(
-            [
-              badgeTextVisible(nodeDef, nodeIdBadgeMode.value)
-                ? `#${node.id}`
-                : '',
-              badgeTextVisible(nodeDef, nodeLifeCycleBadgeMode.value)
-                ? nodeDef?.nodeLifeCycleBadgeText ?? ''
-                : '',
-              badgeTextVisible(nodeDef, nodeSourceBadgeMode.value)
-                ? nodeDef?.nodeSource?.badgeText ?? ''
-                : ''
-            ]
-              .filter((s) => s.length > 0)
-              .join(' '),
-            {
-              length: 31
-            }
-          ),
-          fgColor:
-            colorPaletteStore.completedActivePalette.colors.litegraph_base
-              .BADGE_FG_COLOR,
-          bgColor:
-            colorPaletteStore.completedActivePalette.colors.litegraph_base
-              .BADGE_BG_COLOR
-        })
-      })
-
-      node.badges.push(() => badge.value)
-
-      if (node.constructor.nodeData?.api_node) {
-        const creditsBadge = computed(() => {
-          return new LGraphBadge({
-            text: '',
-            iconOptions: {
-              unicode: '\ue96b',
-              fontFamily: 'PrimeIcons',
-              color: '#FABC25',
-              bgColor: '#353535',
-              fontSize: 8
-            },
-            fgColor:
-              colorPaletteStore.completedActivePalette.colors.litegraph_base
-                .BADGE_FG_COLOR,
-            bgColor:
-              colorPaletteStore.completedActivePalette.colors.litegraph_base
-                .BADGE_BG_COLOR
-          })
-        })
-
-        node.badges.push(() => creditsBadge.value)
-      }
-    }
-  })
-})
-</script>

src/components/graph/SelectionOverlay.vue

@@ -14,12 +14,10 @@
 
 <script setup lang="ts">
 import { createBounds } from '@comfyorg/litegraph'
-import type { LGraphCanvas } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import { ref, watch } from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
-import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const canvasStore = useCanvasStore()
@@ -28,8 +26,8 @@ const { style, updatePosition } = useAbsolutePosition()
 const visible = ref(false)
 const showBorder = ref(false)
 
-const positionSelectionOverlay = (canvas: LGraphCanvas) => {
-  const selectedItems = canvas.selectedItems
+const positionSelectionOverlay = () => {
+  const { selectedItems } = canvasStore.getCanvas()
   showBorder.value = selectedItems.size > 1
 
   if (!selectedItems.size) {
@@ -48,26 +46,18 @@ const positionSelectionOverlay = (canvas: LGraphCanvas) => {
 }
 
 // Register listener on canvas creation.
-watch(
-  () => canvasStore.canvas as LGraphCanvas | null,
-  (canvas: LGraphCanvas | null) => {
-    if (!canvas) return
-
-    canvas.onSelectionChange = useChainCallback(
-      canvas.onSelectionChange,
-      // Wait for next frame as sometimes the selected items haven't been
-      // rendered yet, so the boundingRect is not available on them.
-      () => requestAnimationFrame(() => positionSelectionOverlay(canvas))
-    )
+whenever(
+  () => canvasStore.getCanvas().state.selectionChanged,
+  () => {
+    requestAnimationFrame(() => {
+      positionSelectionOverlay()
+      canvasStore.getCanvas().state.selectionChanged = false
+    })
   },
   { immediate: true }
 )
 
-whenever(
-  () => canvasStore.getCanvas().ds.state,
-  () => positionSelectionOverlay(canvasStore.getCanvas()),
-  { deep: true }
-)
+canvasStore.getCanvas().ds.onChanged = positionSelectionOverlay
 
 watch(
   () => canvasStore.canvas?.state?.draggingItems,
@@ -77,10 +67,10 @@ watch(
     // the correct position.
     // https://github.com/Comfy-Org/ComfyUI_frontend/issues/2656
     if (draggingItems === false) {
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         visible.value = true
-        positionSelectionOverlay(canvasStore.getCanvas())
-      }, 100)
+        positionSelectionOverlay()
+      })
     } else {
       // Selection change update to visible state is delayed by a frame. Here
       // we also delay a frame so that the order of events is correct when

src/components/graph/SelectionToolbox.vue

@@ -6,96 +6,41 @@
       content: 'p-0 flex flex-row'
     }"
   >
-    <ExecuteButton v-show="nodeSelected" />
-    <ColorPickerButton v-show="nodeSelected || groupSelected" />
-    <Button
-      v-show="nodeSelected"
-      v-tooltip.top="{
-        value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
-        showDelay: 1000
-      }"
-      severity="secondary"
-      text
-      data-testid="bypass-button"
-      @click="
-        () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
-      "
-    >
-      <template #icon>
-        <i-game-icons:detour />
-      </template>
-    </Button>
-    <Button
-      v-show="nodeSelected || groupSelected"
-      v-tooltip.top="{
-        value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
-        showDelay: 1000
-      }"
-      severity="secondary"
-      text
-      icon="pi pi-thumbtack"
-      @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
-    />
-    <Button
-      v-tooltip.top="{
-        value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
-        showDelay: 1000
-      }"
-      severity="danger"
-      text
-      icon="pi pi-trash"
-      @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
-    />
-    <Button
-      v-show="isRefreshable"
-      severity="info"
-      text
-      icon="pi pi-refresh"
-      @click="refreshSelected"
-    />
-    <Button
+    <ExecuteButton />
+    <ColorPickerButton />
+    <BypassButton />
+    <PinButton />
+    <DeleteButton />
+    <RefreshButton />
+    <ExtensionCommandButton
       v-for="command in extensionToolboxCommands"
       :key="command.id"
-      v-tooltip.top="{
-        value:
-          st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
-        showDelay: 1000
-      }"
-      severity="secondary"
-      text
-      :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
-      @click="() => commandStore.execute(command.id)"
+      :command="command"
     />
   </Panel>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Panel from 'primevue/panel'
 import { computed } from 'vue'
 
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
-import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
-import { st, t } from '@/i18n'
 import { useExtensionService } from '@/services/extensionService'
-import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+
+import BypassButton from './selectionToolbox/BypassButton.vue'
+import DeleteButton from './selectionToolbox/DeleteButton.vue'
+import ExtensionCommandButton from './selectionToolbox/ExtensionCommandButton.vue'
+import PinButton from './selectionToolbox/PinButton.vue'
+import RefreshButton from './selectionToolbox/RefreshButton.vue'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
-const { isRefreshable, refreshSelected } = useRefreshableSelection()
-const nodeSelected = computed(() =>
-  canvasStore.selectedItems.some(isLGraphNode)
-)
-const groupSelected = computed(() =>
-  canvasStore.selectedItems.some(isLGraphGroup)
-)
 
-const extensionToolboxCommands = computed<ComfyCommand[]>(() => {
+const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
   const commandIds = new Set<string>(
     canvasStore.selectedItems
       .map(
@@ -108,7 +53,7 @@ const extensionToolboxCommands = computed<ComfyCommand[]>(() => {
   )
   return Array.from(commandIds)
     .map((commandId) => commandStore.getCommand(commandId))
-    .filter((command) => command !== undefined)
+    .filter((command): command is ComfyCommandImpl => command !== undefined)
 })
 </script>
 

src/components/graph/selectionToolbox/BypassButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <Button
+    v-show="canvasStore.nodeSelected"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    data-testid="bypass-button"
+    @click="
+      () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+    "
+  >
+    <template #icon>
+      <i-game-icons:detour />
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+</script>

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="relative">
     <Button
+      v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
       severity="secondary"
       text
       @click="() => (showColorPicker = !showColorPicker)"

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
+      showDelay: 1000
+    }"
+    severity="danger"
+    text
+    icon="pi pi-trash"
+    @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+</script>

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
       value: isDisabled
         ? t('selectionToolbox.executeButton.disabledTooltip')

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value:
+        st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
+    @click="() => commandStore.execute(command.id)"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { st } from '@/i18n'
+import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+defineProps<{
+  command: ComfyCommand
+}>()
+
+const commandStore = useCommandStore()
+</script>

src/components/graph/selectionToolbox/PinButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <Button
+    v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-thumbtack"
+    @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+</script>

src/components/graph/selectionToolbox/RefreshButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <Button
+    v-show="isRefreshable"
+    severity="info"
+    text
+    icon="pi pi-refresh"
+    @click="refreshSelected"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
+
+const { isRefreshable, refreshSelected } = useRefreshableSelection()
+</script>

src/components/graph/widgets/ChatHistoryWidget.vue

@@ -0,0 +1,134 @@
+<template>
+  <ScrollPanel
+    ref="scrollPanelRef"
+    class="w-full min-h-[400px] rounded-lg px-2 py-2 text-xs"
+    :pt="{ content: { id: 'chat-scroll-content' } }"
+  >
+    <div v-for="(item, i) in parsedHistory" :key="i" class="mb-4">
+      <!-- Prompt (user, right) -->
+      <span
+        :class="{
+          'opacity-40 pointer-events-none': editIndex !== null && i > editIndex
+        }"
+      >
+        <div class="flex justify-end mb-1">
+          <div
+            class="bg-gray-300 dark-theme:bg-gray-800 rounded-xl px-4 py-1 max-w-[80%] text-right"
+          >
+            <div class="break-words text-[12px]">{{ item.prompt }}</div>
+          </div>
+        </div>
+        <div class="flex justify-end mb-2 mr-1">
+          <CopyButton :text="item.prompt" />
+          <Button
+            v-tooltip="
+              editIndex === i ? $t('chatHistory.cancelEditTooltip') : null
+            "
+            text
+            rounded
+            class="!p-1 !h-4 !w-4 text-gray-400 hover:text-gray-600 dark-theme:hover:text-gray-200 transition"
+            pt:icon:class="!text-xs"
+            :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
+            :aria-label="
+              editIndex === i ? $t('chatHistory.cancelEdit') : $t('g.edit')
+            "
+            @click="editIndex === i ? handleCancelEdit() : handleEdit(i)"
+          />
+        </div>
+      </span>
+      <!-- Response (LLM, left) -->
+      <ResponseBlurb
+        :text="item.response"
+        :class="{
+          'opacity-25 pointer-events-none': editIndex !== null && i >= editIndex
+        }"
+      >
+        <div v-html="nl2br(linkifyHtml(item.response))" />
+      </ResponseBlurb>
+    </div>
+  </ScrollPanel>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ScrollPanel from 'primevue/scrollpanel'
+import { computed, nextTick, ref, watch } from 'vue'
+
+import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
+import ResponseBlurb from '@/components/graph/widgets/chatHistory/ResponseBlurb.vue'
+import { ComponentWidget } from '@/scripts/domWidget'
+import { linkifyHtml, nl2br } from '@/utils/formatUtil'
+
+const { widget, history = '[]' } = defineProps<{
+  widget?: ComponentWidget<string>
+  history: string
+}>()
+
+const editIndex = ref<number | null>(null)
+const scrollPanelRef = ref<InstanceType<typeof ScrollPanel> | null>(null)
+
+const parsedHistory = computed(() => JSON.parse(history || '[]'))
+
+const findPromptInput = () =>
+  widget?.node.widgets?.find((w) => w.name === 'prompt')
+let promptInput = findPromptInput()
+const previousPromptInput = ref<string | null>(null)
+
+const getPreviousResponseId = (index: number) =>
+  index > 0 ? parsedHistory.value[index - 1]?.response_id ?? '' : ''
+
+const storePromptInput = () => {
+  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
+  if (!promptInput) return
+
+  previousPromptInput.value = String(promptInput.value)
+}
+
+const setPromptInput = (text: string, previousResponseId?: string | null) => {
+  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
+  if (!promptInput) return
+
+  if (previousResponseId !== null) {
+    promptInput.value = `<starting_point_id:${previousResponseId}>\n\n${text}`
+  } else {
+    promptInput.value = text
+  }
+}
+
+const handleEdit = (index: number) => {
+  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
+  editIndex.value = index
+  const prevResponseId = index === 0 ? 'start' : getPreviousResponseId(index)
+  const promptText = parsedHistory.value[index]?.prompt ?? ''
+
+  storePromptInput()
+  setPromptInput(promptText, prevResponseId)
+}
+
+const resetEditingState = () => {
+  editIndex.value = null
+}
+const handleCancelEdit = () => {
+  resetEditingState()
+  if (promptInput) {
+    promptInput.value = previousPromptInput.value ?? ''
+  }
+}
+
+const scrollChatToBottom = () => {
+  const content = document.getElementById('chat-scroll-content')
+  if (content) {
+    content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' })
+  }
+}
+
+const onHistoryChanged = () => {
+  resetEditingState()
+  void nextTick(() => scrollChatToBottom())
+}
+
+watch(() => parsedHistory.value, onHistoryChanged, {
+  immediate: true,
+  deep: true
+})
+</script>

src/components/graph/widgets/DomWidget.vue

@@ -11,6 +11,7 @@
       v-if="isComponentWidget(widget)"
       :model-value="widget.value"
       :widget="widget"
+      v-bind="widget.props"
       @update:model-value="emit('update:widgetValue', $event)"
     />
   </div>

src/components/graph/widgets/chatHistory/CopyButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <Button
+    v-tooltip="
+      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
+    "
+    text
+    rounded
+    class="!p-1 !h-4 !w-6 text-gray-400 hover:text-gray-600 dark-theme:hover:text-gray-200 transition"
+    pt:icon:class="!text-xs"
+    :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
+    :aria-label="
+      copied ? $t('chatHistory.copiedTooltip') : $t('chatHistory.copyTooltip')
+    "
+    @click="handleCopy"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { ref } from 'vue'
+
+const { text } = defineProps<{
+  text: string
+}>()
+
+const copied = ref(false)
+
+const handleCopy = async () => {
+  if (!text) return
+  await navigator.clipboard.writeText(text)
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 1024)
+}
+</script>

src/components/graph/widgets/chatHistory/ResponseBlurb.vue

@@ -0,0 +1,22 @@
+<template>
+  <span>
+    <div class="flex justify-start mb-1">
+      <div class="rounded-xl px-4 py-1 max-w-[80%]">
+        <div class="break-words text-[12px]">
+          <slot />
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-start ml-1">
+      <CopyButton :text="text" />
+    </div>
+  </span>
+</template>
+
+<script setup lang="ts">
+import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
+
+defineProps<{
+  text: string
+}>()
+</script>

src/components/load3d/Load3DScene.vue

@@ -52,6 +52,9 @@ const eventConfig = {
   showPreviewChange: (value: boolean) => emit('showPreviewChange', value),
   backgroundImageChange: (value: string) =>
     emit('backgroundImageChange', value),
+  backgroundImageLoadingStart: () =>
+    loadingOverlayRef.value?.startLoading(t('load3d.loadingBackgroundImage')),
+  backgroundImageLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
   upDirectionChange: (value: string) => emit('upDirectionChange', value),
   edgeThresholdChange: (value: number) => emit('edgeThresholdChange', value),
   modelLoadingStart: () =>
@@ -75,7 +78,7 @@ const eventConfig = {
 
 watchEffect(async () => {
   if (load3d.value) {
-    const rawLoad3d = toRaw(load3d.value)
+    const rawLoad3d = toRaw(load3d.value) as Load3d
 
     rawLoad3d.setBackgroundColor(props.backgroundColor)
     rawLoad3d.toggleGrid(props.showGrid)
@@ -84,15 +87,25 @@ watchEffect(async () => {
     rawLoad3d.toggleCamera(props.cameraType)
     rawLoad3d.togglePreview(props.showPreview)
     await rawLoad3d.setBackgroundImage(props.backgroundImage)
-    rawLoad3d.setUpDirection(props.upDirection)
   }
 })
 
+watch(
+  () => props.upDirection,
+  (newValue) => {
+    if (load3d.value) {
+      const rawLoad3d = toRaw(load3d.value) as Load3d
+
+      rawLoad3d.setUpDirection(newValue)
+    }
+  }
+)
+
 watch(
   () => props.materialMode,
   (newValue) => {
     if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value)
+      const rawLoad3d = toRaw(load3d.value) as Load3d
 
       rawLoad3d.setMaterialMode(newValue)
     }
@@ -102,10 +115,9 @@ watch(
 watch(
   () => props.edgeThreshold,
   (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value)
+    if (load3d.value && newValue) {
+      const rawLoad3d = toRaw(load3d.value) as Load3d
 
-      // @ts-expect-error fixme ts strict error
       rawLoad3d.setEdgeThreshold(newValue)
     }
   }

src/components/topbar/CurrentUserButton.spec.ts

@@ -0,0 +1,122 @@
+import { VueWrapper, mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import CurrentUserButton from './CurrentUserButton.vue'
+
+// Mock all firebase modules
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(),
+  getApp: vi.fn()
+}))
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(),
+  setPersistence: vi.fn(),
+  browserLocalPersistence: {},
+  onAuthStateChanged: vi.fn(),
+  signInWithEmailAndPassword: vi.fn(),
+  signOut: vi.fn()
+}))
+
+// Mock pinia
+vi.mock('pinia')
+
+// Mock the useCurrentUser composable
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: vi.fn(() => ({
+    isLoggedIn: true,
+    userPhotoUrl: 'https://example.com/avatar.jpg',
+    userDisplayName: 'Test User',
+    userEmail: 'test@example.com'
+  }))
+}))
+
+// Mock the UserAvatar component
+vi.mock('@/components/common/UserAvatar.vue', () => ({
+  default: {
+    name: 'UserAvatarMock',
+    render() {
+      return h('div', 'Avatar')
+    }
+  }
+}))
+
+// Mock the CurrentUserPopover component
+vi.mock('./CurrentUserPopover.vue', () => ({
+  default: {
+    name: 'CurrentUserPopoverMock',
+    render() {
+      return h('div', 'Popover Content')
+    },
+    emits: ['close']
+  }
+}))
+
+describe('CurrentUserButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = (): VueWrapper => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: enMessages }
+    })
+
+    return mount(CurrentUserButton, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          // Use shallow mount for popover to make testing easier
+          Popover: {
+            template: '<div><slot></slot></div>',
+            methods: {
+              toggle: vi.fn(),
+              hide: vi.fn()
+            }
+          },
+          Button: true
+        }
+      }
+    })
+  }
+
+  it('renders correctly when user is logged in', () => {
+    const wrapper = mountComponent()
+    expect(wrapper.findComponent(Button).exists()).toBe(true)
+  })
+
+  it('toggles popover on button click', async () => {
+    const wrapper = mountComponent()
+    const popoverToggleSpy = vi.fn()
+
+    // Override the ref with a mock implementation
+    // @ts-expect-error - accessing internal Vue component vm
+    wrapper.vm.popover = { toggle: popoverToggleSpy }
+
+    await wrapper.findComponent(Button).trigger('click')
+    expect(popoverToggleSpy).toHaveBeenCalled()
+  })
+
+  it('hides popover when closePopover is called', async () => {
+    const wrapper = mountComponent()
+
+    // Replace the popover.hide method with a spy
+    const popoverHideSpy = vi.fn()
+    // @ts-expect-error - accessing internal Vue component vm
+    wrapper.vm.popover = { hide: popoverHideSpy }
+
+    // Directly call the closePopover method through the component instance
+    // @ts-expect-error - accessing internal Vue component vm
+    wrapper.vm.closePopover()
+
+    // Verify that popover.hide was called
+    expect(popoverHideSpy).toHaveBeenCalled()
+  })
+})

src/components/topbar/CurrentUserButton.vue

@@ -19,7 +19,7 @@
     </Button>
 
     <Popover ref="popover" :show-arrow="false">
-      <CurrentUserPopover />
+      <CurrentUserPopover @close="closePopover" />
     </Popover>
   </div>
 </template>
@@ -40,4 +40,8 @@ const popover = ref<InstanceType<typeof Popover> | null>(null)
 const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
+
+const closePopover = () => {
+  popover.value?.hide()
+}
 </script>

src/components/topbar/CurrentUserPopover.spec.ts

@@ -0,0 +1,173 @@
+import { VueWrapper, mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import CurrentUserPopover from './CurrentUserPopover.vue'
+
+// Mock all firebase modules
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(),
+  getApp: vi.fn()
+}))
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(),
+  setPersistence: vi.fn(),
+  browserLocalPersistence: {},
+  onAuthStateChanged: vi.fn(),
+  signInWithEmailAndPassword: vi.fn(),
+  signOut: vi.fn()
+}))
+
+// Mock pinia
+vi.mock('pinia')
+
+// Mock showSettingsDialog and showTopUpCreditsDialog
+const mockShowSettingsDialog = vi.fn()
+const mockShowTopUpCreditsDialog = vi.fn()
+
+// Mock window.open
+const originalWindowOpen = window.open
+beforeEach(() => {
+  window.open = vi.fn()
+})
+
+afterAll(() => {
+  window.open = originalWindowOpen
+})
+
+// Mock the useCurrentUser composable
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: vi.fn(() => ({
+    userPhotoUrl: 'https://example.com/avatar.jpg',
+    userDisplayName: 'Test User',
+    userEmail: 'test@example.com'
+  }))
+}))
+
+// Mock the useFirebaseAuthActions composable
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: vi.fn(() => ({
+    fetchBalance: vi.fn().mockResolvedValue(undefined)
+  }))
+}))
+
+// Mock the dialog service
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => ({
+    showSettingsDialog: mockShowSettingsDialog,
+    showTopUpCreditsDialog: mockShowTopUpCreditsDialog
+  }))
+}))
+
+// Mock UserAvatar component
+vi.mock('@/components/common/UserAvatar.vue', () => ({
+  default: {
+    name: 'UserAvatarMock',
+    render() {
+      return h('div', 'Avatar')
+    }
+  }
+}))
+
+// Mock UserCredit component
+vi.mock('@/components/common/UserCredit.vue', () => ({
+  default: {
+    name: 'UserCreditMock',
+    render() {
+      return h('div', 'Credit: 100')
+    }
+  }
+}))
+
+describe('CurrentUserPopover', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = (): VueWrapper => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: enMessages }
+    })
+
+    return mount(CurrentUserPopover, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          Divider: true,
+          Button: true
+        }
+      }
+    })
+  }
+
+  it('renders user information correctly', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.text()).toContain('Test User')
+    expect(wrapper.text()).toContain('test@example.com')
+  })
+
+  it('opens user settings and emits close event when settings button is clicked', async () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the settings button (first one)
+    const buttons = wrapper.findAllComponents(Button)
+    const settingsButton = buttons[0]
+
+    // Click the settings button
+    await settingsButton.trigger('click')
+
+    // Verify showSettingsDialog was called with 'user'
+    expect(mockShowSettingsDialog).toHaveBeenCalledWith('user')
+
+    // Verify close event was emitted
+    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('close')!.length).toBe(1)
+  })
+
+  it('opens API pricing docs and emits close event when API pricing button is clicked', async () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the API pricing button (second one)
+    const buttons = wrapper.findAllComponents(Button)
+    const apiPricingButton = buttons[1]
+
+    // Click the API pricing button
+    await apiPricingButton.trigger('click')
+
+    // Verify window.open was called with the correct URL
+    expect(window.open).toHaveBeenCalledWith(
+      'https://docs.comfy.org/tutorials/api-nodes/pricing',
+      '_blank'
+    )
+
+    // Verify close event was emitted
+    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('close')!.length).toBe(1)
+  })
+
+  it('opens top-up dialog and emits close event when top-up button is clicked', async () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the top-up button (last one)
+    const buttons = wrapper.findAllComponents(Button)
+    const topUpButton = buttons[buttons.length - 1]
+
+    // Click the top-up button
+    await topUpButton.trigger('click')
+
+    // Verify showTopUpCreditsDialog was called
+    expect(mockShowTopUpCreditsDialog).toHaveBeenCalled()
+
+    // Verify close event was emitted
+    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('close')!.length).toBe(1)
+  })
+})

src/components/topbar/CurrentUserPopover.vue

@@ -72,20 +72,27 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useDialogService } from '@/services/dialogService'
 
+const emit = defineEmits<{
+  close: []
+}>()
+
 const { userDisplayName, userEmail, userPhotoUrl } = useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
 
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')
+  emit('close')
 }
 
 const handleTopUp = () => {
   dialogService.showTopUpCreditsDialog()
+  emit('close')
 }
 
 const handleOpenApiPricing = () => {
   window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
+  emit('close')
 }
 
 onMounted(() => {

src/composables/README.md

@@ -0,0 +1,310 @@
+# Composables
+
+This directory contains Vue composables for the ComfyUI frontend application. Composables are reusable pieces of logic that encapsulate stateful functionality and can be shared across components.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Composable Architecture](#composable-architecture)
+- [Composable Categories](#composable-categories)
+- [Usage Guidelines](#usage-guidelines)
+- [VueUse Library](#vueuse-library)
+- [Development Guidelines](#development-guidelines)
+- [Common Patterns](#common-patterns)
+
+## Overview
+
+Vue composables are a core part of Vue 3's Composition API and provide a way to extract and reuse stateful logic between multiple components. In ComfyUI, composables are used to encapsulate behaviors like:
+
+- State management
+- DOM interactions
+- Feature-specific functionality
+- UI behaviors
+- Data fetching
+
+Composables enable a more modular and functional approach to building components, allowing for better code reuse and separation of concerns. They help keep your component code cleaner by extracting complex logic into separate, reusable functions.
+
+As described in the [Vue.js documentation](https://vuejs.org/guide/reusability/composables.html), composables are:
+> Functions that leverage Vue's Composition API to encapsulate and reuse stateful logic.
+
+## Composable Architecture
+
+The composable architecture in ComfyUI follows these principles:
+
+1. **Single Responsibility**: Each composable should focus on a specific concern
+2. **Composition**: Composables can use other composables
+3. **Reactivity**: Composables leverage Vue's reactivity system
+4. **Reusability**: Composables are designed to be used across multiple components
+
+The following diagram shows how composables fit into the application architecture:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    Vue Components                        │
+│                                                         │
+│     ┌─────────────┐     ┌─────────────┐                 │
+│     │ Component A │     │ Component B │                 │
+│     └──────┬──────┘     └──────┬──────┘                 │
+│            │                   │                        │
+└────────────┼───────────────────┼────────────────────────┘
+             │                   │
+             ▼                   ▼
+┌────────────┴───────────────────┴────────────────────────┐
+│                    Composables                           │
+│                                                         │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │
+│  │ useFeatureA │  │ useFeatureB │  │ useFeatureC │      │
+│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘      │
+│         │                │                │             │
+└─────────┼────────────────┼────────────────┼─────────────┘
+          │                │                │
+          ▼                ▼                ▼
+┌─────────┴────────────────┴────────────────┴─────────────┐
+│                    Services & Stores                     │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Composable Categories
+
+ComfyUI's composables are organized into several categories:
+
+### Auth
+
+Composables for authentication and user management:
+- `useCurrentUser` - Provides access to the current user information
+- `useFirebaseAuthActions` - Handles Firebase authentication operations
+
+### Element
+
+Composables for DOM and element interactions:
+- `useAbsolutePosition` - Handles element positioning
+- `useDomClipping` - Manages clipping of DOM elements
+- `useResponsiveCollapse` - Manages responsive collapsing of elements
+
+### Node
+
+Composables for node-specific functionality:
+- `useNodeBadge` - Handles node badge display and interaction
+- `useNodeImage` - Manages node image preview
+- `useNodeDragAndDrop` - Handles drag and drop for nodes
+- `useNodeChatHistory` - Manages chat history for nodes
+
+### Settings
+
+Composables for settings management:
+- `useSettingSearch` - Provides search functionality for settings
+- `useSettingUI` - Manages settings UI interactions
+
+### Sidebar
+
+Composables for sidebar functionality:
+- `useNodeLibrarySidebarTab` - Manages the node library sidebar tab
+- `useQueueSidebarTab` - Manages the queue sidebar tab
+- `useWorkflowsSidebarTab` - Manages the workflows sidebar tab
+
+### Widgets
+
+Composables for widget functionality:
+- `useBooleanWidget` - Manages boolean widget interactions
+- `useComboWidget` - Manages combo box widget interactions
+- `useFloatWidget` - Manages float input widget interactions
+- `useImagePreviewWidget` - Manages image preview widget
+
+## Usage Guidelines
+
+When using composables in components, follow these guidelines:
+
+1. **Import and call** composables at the top level of the `setup` function
+2. **Destructure returned values** to use in your component
+3. **Respect reactivity** by not destructuring reactive objects
+4. **Handle cleanup** by using `onUnmounted` when necessary
+5. **Use VueUse** for common functionality instead of writing from scratch
+
+Example usage:
+
+```vue
+<template>
+  <div 
+    :class="{ 'dragging': isDragging }" 
+    @mousedown="startDrag"
+    @mouseup="endDrag"
+  >
+    <img v-if="imageUrl" :src="imageUrl" alt="Node preview" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop';
+import { useNodeImage } from '@/composables/node/useNodeImage';
+
+// Use composables at the top level
+const { isDragging, startDrag, endDrag } = useNodeDragAndDrop();
+const { imageUrl, loadImage } = useNodeImage();
+
+// Use returned values in your component
+</script>
+```
+
+## VueUse Library
+
+ComfyUI leverages the [VueUse](https://vueuse.org/) library, which provides a collection of essential Vue Composition API utilities. Instead of implementing common functionality from scratch, prefer using VueUse composables for:
+
+- DOM event handling (`useEventListener`, `useMouseInElement`)
+- Element measurements (`useElementBounding`, `useElementSize`)
+- Asynchronous operations (`useAsyncState`, `useFetch`)
+- Animation and timing (`useTransition`, `useTimeout`, `useInterval`)
+- Browser APIs (`useLocalStorage`, `useClipboard`)
+- Sensors (`useDeviceMotion`, `useDeviceOrientation`)
+- State management (`createGlobalState`, `useStorage`)
+- ...and [more](https://vueuse.org/functions.html)
+
+Examples:
+
+```js
+// Instead of manually adding/removing event listeners
+import { useEventListener } from '@vueuse/core'
+
+useEventListener(window, 'resize', handleResize)
+
+// Instead of manually tracking element measurements
+import { useElementBounding } from '@vueuse/core'
+
+const { width, height, top, left } = useElementBounding(elementRef)
+
+// Instead of manual async state management
+import { useAsyncState } from '@vueuse/core'
+
+const { state, isReady, isLoading } = useAsyncState(
+  fetch('https://api.example.com/data').then(r => r.json()),
+  { data: [] }
+)
+```
+
+For a complete list of available functions, see the [VueUse documentation](https://vueuse.org/functions.html).
+
+## Development Guidelines
+
+When creating or modifying composables, follow these best practices:
+
+1. **Name with `use` prefix**: All composables should start with "use"
+2. **Return an object**: Composables should return an object with named properties/methods
+3. **Handle cleanup**: Use `onUnmounted` to clean up resources
+4. **Document parameters and return values**: Add JSDoc comments
+5. **Test composables**: Write unit tests for composable functionality
+6. **Use VueUse**: Leverage VueUse composables instead of reimplementing common functionality
+7. **Implement proper cleanup**: Cancel debounced functions, pending requests, and clear maps
+8. **Use watchDebounced/watchThrottled**: For performance-sensitive reactive operations
+
+### Composable Template
+
+Here's a template for creating a new composable:
+
+```typescript
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+/**
+ * Composable for [functionality description]
+ * @param options Configuration options
+ * @returns Object containing state and methods
+ */
+export function useExample(options = {}) {
+  // State
+  const state = ref({
+    // Initial state
+  });
+
+  // Computed values
+  const derivedValue = computed(() => {
+    // Compute from state
+    return state.value.someProperty;
+  });
+
+  // Methods
+  function doSomething() {
+    // Implementation
+  }
+
+  // Lifecycle hooks
+  onMounted(() => {
+    // Setup
+  });
+
+  onUnmounted(() => {
+    // Cleanup
+  });
+
+  // Return exposed state and methods
+  return {
+    state,
+    derivedValue,
+    doSomething
+  };
+}
+```
+
+## Common Patterns
+
+Composables in ComfyUI frequently use these patterns:
+
+### State Management
+
+```typescript
+export function useState() {
+  const count = ref(0);
+  
+  function increment() {
+    count.value++;
+  }
+  
+  return {
+    count,
+    increment
+  };
+}
+```
+
+### Event Handling with VueUse
+
+```typescript
+import { useEventListener } from '@vueuse/core';
+
+export function useKeyPress(key) {
+  const isPressed = ref(false);
+  
+  useEventListener('keydown', (e) => {
+    if (e.key === key) {
+      isPressed.value = true;
+    }
+  });
+  
+  useEventListener('keyup', (e) => {
+    if (e.key === key) {
+      isPressed.value = false;
+    }
+  });
+  
+  return { isPressed };
+}
+```
+
+### Fetch & Load with VueUse
+
+```typescript
+import { useAsyncState } from '@vueuse/core';
+
+export function useFetchData(url) {
+  const { state: data, isLoading, error, execute: refresh } = useAsyncState(
+    async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error('Failed to fetch data');
+      return response.json();
+    },
+    null,
+    { immediate: true }
+  );
+  
+  return { data, isLoading, error, refresh };
+}
+```
+
+For more information on Vue composables, refer to the [Vue.js Composition API documentation](https://vuejs.org/guide/reusability/composables.html) and the [VueUse documentation](https://vueuse.org/).

src/composables/node/useNodeBadge.ts

@@ -0,0 +1,122 @@
+import {
+  BadgePosition,
+  LGraphBadge,
+  type LGraphNode
+} from '@comfyorg/litegraph'
+import _ from 'lodash'
+import { computed, onMounted, watch } from 'vue'
+
+import { app } from '@/scripts/app'
+import { useExtensionStore } from '@/stores/extensionStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { NodeBadgeMode } from '@/types/nodeSource'
+
+/**
+ * Add LGraphBadge to LGraphNode based on settings.
+ *
+ * Following badges are added:
+ * - Node ID badge
+ * - Node source badge
+ * - Node life cycle badge
+ * - API node credits badge
+ */
+export const useNodeBadge = () => {
+  const settingStore = useSettingStore()
+  const extensionStore = useExtensionStore()
+  const colorPaletteStore = useColorPaletteStore()
+
+  const nodeSourceBadgeMode = computed(
+    () =>
+      settingStore.get('Comfy.NodeBadge.NodeSourceBadgeMode') as NodeBadgeMode
+  )
+  const nodeIdBadgeMode = computed(
+    () => settingStore.get('Comfy.NodeBadge.NodeIdBadgeMode') as NodeBadgeMode
+  )
+  const nodeLifeCycleBadgeMode = computed(
+    () =>
+      settingStore.get(
+        'Comfy.NodeBadge.NodeLifeCycleBadgeMode'
+      ) as NodeBadgeMode
+  )
+
+  watch([nodeSourceBadgeMode, nodeIdBadgeMode, nodeLifeCycleBadgeMode], () => {
+    app.graph?.setDirtyCanvas(true, true)
+  })
+
+  const nodeDefStore = useNodeDefStore()
+  function badgeTextVisible(
+    nodeDef: ComfyNodeDefImpl | null,
+    badgeMode: NodeBadgeMode
+  ): boolean {
+    return !(
+      badgeMode === NodeBadgeMode.None ||
+      (nodeDef?.isCoreNode && badgeMode === NodeBadgeMode.HideBuiltIn)
+    )
+  }
+
+  onMounted(() => {
+    extensionStore.registerExtension({
+      name: 'Comfy.NodeBadge',
+      nodeCreated(node: LGraphNode) {
+        node.badgePosition = BadgePosition.TopRight
+
+        const badge = computed(() => {
+          const nodeDef = nodeDefStore.fromLGraphNode(node)
+          return new LGraphBadge({
+            text: _.truncate(
+              [
+                badgeTextVisible(nodeDef, nodeIdBadgeMode.value)
+                  ? `#${node.id}`
+                  : '',
+                badgeTextVisible(nodeDef, nodeLifeCycleBadgeMode.value)
+                  ? nodeDef?.nodeLifeCycleBadgeText ?? ''
+                  : '',
+                badgeTextVisible(nodeDef, nodeSourceBadgeMode.value)
+                  ? nodeDef?.nodeSource?.badgeText ?? ''
+                  : ''
+              ]
+                .filter((s) => s.length > 0)
+                .join(' '),
+              {
+                length: 31
+              }
+            ),
+            fgColor:
+              colorPaletteStore.completedActivePalette.colors.litegraph_base
+                .BADGE_FG_COLOR,
+            bgColor:
+              colorPaletteStore.completedActivePalette.colors.litegraph_base
+                .BADGE_BG_COLOR
+          })
+        })
+
+        node.badges.push(() => badge.value)
+
+        if (node.constructor.nodeData?.api_node) {
+          const creditsBadge = computed(() => {
+            return new LGraphBadge({
+              text: '',
+              iconOptions: {
+                unicode: '\ue96b',
+                fontFamily: 'PrimeIcons',
+                color: '#FABC25',
+                bgColor: '#353535',
+                fontSize: 8
+              },
+              fgColor:
+                colorPaletteStore.completedActivePalette.colors.litegraph_base
+                  .BADGE_FG_COLOR,
+              bgColor:
+                colorPaletteStore.completedActivePalette.colors.litegraph_base
+                  .BADGE_BG_COLOR
+            })
+          })
+
+          node.badges.push(() => creditsBadge.value)
+        }
+      }
+    })
+  })
+}

src/composables/node/useNodeChatHistory.ts

@@ -0,0 +1,59 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+
+import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+import { useChatHistoryWidget } from '@/composables/widgets/useChatHistoryWidget'
+
+const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'
+
+/**
+ * Composable for handling node text previews
+ */
+export function useNodeChatHistory(
+  options: {
+    minHeight?: number
+    props?: Omit<InstanceType<typeof ChatHistoryWidget>['$props'], 'widget'>
+  } = {}
+) {
+  const chatHistoryWidget = useChatHistoryWidget(options)
+
+  const addChatHistoryWidget = (node: LGraphNode) =>
+    chatHistoryWidget(node, {
+      name: CHAT_HISTORY_WIDGET_NAME,
+      type: 'chatHistory'
+    })
+
+  /**
+   * Shows chat history for a node
+   * @param node The graph node to show the chat history for
+   */
+  function showChatHistory(node: LGraphNode) {
+    // First remove any existing widget
+    removeChatHistory(node)
+
+    // Then add the widget with new history
+    addChatHistoryWidget(node)
+    node.setDirtyCanvas?.(true)
+  }
+
+  /**
+   * Removes chat history from a node
+   * @param node The graph node to remove the chat history from
+   */
+  function removeChatHistory(node: LGraphNode) {
+    if (!node.widgets) return
+
+    const widgetIdx = node.widgets.findIndex(
+      (w) => w.name === CHAT_HISTORY_WIDGET_NAME
+    )
+
+    if (widgetIdx > -1) {
+      node.widgets[widgetIdx].onRemove?.()
+      node.widgets.splice(widgetIdx, 1)
+    }
+  }
+
+  return {
+    showChatHistory,
+    removeChatHistory
+  }
+}

src/composables/widgets/useChatHistoryWidget.ts

@@ -0,0 +1,43 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { ref } from 'vue'
+
+import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+const PADDING = 16
+
+export const useChatHistoryWidget = (
+  options: {
+    props?: Omit<InstanceType<typeof ChatHistoryWidget>['$props'], 'widget'>
+  } = {}
+) => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    const widgetValue = ref<string>('')
+    const widget = new ComponentWidgetImpl<
+      string | object,
+      InstanceType<typeof ChatHistoryWidget>['$props']
+    >({
+      node,
+      name: inputSpec.name,
+      component: ChatHistoryWidget,
+      props: options.props,
+      inputSpec,
+      options: {
+        getValue: () => widgetValue.value,
+        setValue: (value: string | object) => {
+          widgetValue.value = typeof value === 'string' ? value : String(value)
+        },
+        getMinHeight: () => 400 + PADDING
+      }
+    })
+    addWidget(node, widget)
+    return widget
+  }
+
+  return widgetConstructor
+}

src/composables/widgets/useProgressTextWidget.ts

@@ -8,7 +8,11 @@ import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 const PADDING = 16
 
-export const useTextPreviewWidget = () => {
+export const useTextPreviewWidget = (
+  options: {
+    minHeight?: number
+  } = {}
+) => {
   const widgetConstructor: ComfyWidgetConstructorV2 = (
     node: LGraphNode,
     inputSpec: InputSpec
@@ -24,7 +28,7 @@ export const useTextPreviewWidget = () => {
         setValue: (value: string | object) => {
           widgetValue.value = typeof value === 'string' ? value : String(value)
         },
-        getMinHeight: () => 42 + PADDING
+        getMinHeight: () => options.minHeight ?? 42 + PADDING
       }
     })
     addWidget(node, widget)

src/extensions/core/README.md

@@ -0,0 +1,139 @@
+# Core Extensions
+
+This directory contains the core extensions that provide essential functionality to the ComfyUI frontend.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Extension Architecture](#extension-architecture)
+- [Core Extensions](#core-extensions)
+- [Extension Development](#extension-development)
+- [Extension Hooks](#extension-hooks)
+- [Further Reading](#further-reading)
+
+## Overview
+
+Extensions in ComfyUI are modular JavaScript modules that extend and enhance the functionality of the frontend. The extensions in this directory are considered "core" as they provide fundamental features that are built into ComfyUI by default.
+
+## Extension Architecture
+
+ComfyUI's extension system follows these key principles:
+
+1. **Registration-based:** Extensions must register themselves with the application using `app.registerExtension()`
+2. **Hook-driven:** Extensions interact with the system through predefined hooks
+3. **Non-intrusive:** Extensions should avoid directly modifying core objects where possible
+
+## Core Extensions List
+
+The core extensions include:
+
+| Extension | Description |
+|-----------|-------------|
+| clipspace.ts | Implements the Clipspace feature for temporary image storage |
+| dynamicPrompts.ts | Provides dynamic prompt generation capabilities |
+| groupNode.ts | Implements the group node functionality to organize workflows |
+| load3d.ts | Supports 3D model loading and visualization |
+| maskeditor.ts | Implements the mask editor for image masking operations |
+| noteNode.ts | Adds note nodes for documentation within workflows |
+| rerouteNode.ts | Implements reroute nodes for cleaner workflow connections |
+| uploadImage.ts | Handles image upload functionality |
+| webcamCapture.ts | Provides webcam capture capabilities |
+| widgetInputs.ts | Implements various widget input types |
+
+## Extension Development
+
+When developing or modifying extensions, follow these best practices:
+
+1. **Use provided hooks** rather than directly modifying core application objects
+2. **Maintain compatibility** with other extensions
+3. **Follow naming conventions** for both extension names and settings
+4. **Properly document** extension hooks and functionality
+5. **Test with other extensions** to ensure no conflicts
+
+### Extension Registration
+
+Extensions are registered using the `app.registerExtension()` method:
+
+```javascript
+app.registerExtension({
+  name: "MyExtension",
+  
+  // Hook implementations
+  async init() {
+    // Implementation
+  },
+  
+  async beforeRegisterNodeDef(nodeType, nodeData, app) {
+    // Implementation
+  }
+  
+  // Other hooks as needed
+});
+```
+
+## Extension Hooks
+
+ComfyUI extensions can implement various hooks that are called at specific points in the application lifecycle:
+
+### Hook Execution Sequence
+
+#### Web Page Load
+
+```
+init
+addCustomNodeDefs
+getCustomWidgets
+beforeRegisterNodeDef    [repeated multiple times]
+registerCustomNodes
+beforeConfigureGraph
+nodeCreated
+loadedGraphNode
+afterConfigureGraph
+setup
+```
+
+#### Loading Workflow
+
+```
+beforeConfigureGraph
+beforeRegisterNodeDef   [zero, one, or multiple times]
+nodeCreated             [repeated multiple times]
+loadedGraphNode         [repeated multiple times]
+afterConfigureGraph
+```
+
+#### Adding New Node
+
+```
+nodeCreated
+```
+
+### Key Hooks
+
+| Hook | Description |
+|------|-------------|
+| `init` | Called after canvas creation but before nodes are added |
+| `setup` | Called after the application is fully set up and running |
+| `addCustomNodeDefs` | Called before nodes are registered with the graph |
+| `getCustomWidgets` | Allows extensions to add custom widgets |
+| `beforeRegisterNodeDef` | Allows extensions to modify nodes before registration |
+| `registerCustomNodes` | Allows extensions to register additional nodes |
+| `loadedGraphNode` | Called when a node is reloaded onto the graph |
+| `nodeCreated` | Called after a node's constructor |
+| `beforeConfigureGraph` | Called before a graph is configured |
+| `afterConfigureGraph` | Called after a graph is configured |
+| `getSelectionToolboxCommands` | Allows extensions to add commands to the selection toolbox |
+
+For the complete list of available hooks and detailed descriptions, see the [ComfyExtension interface in comfy.ts](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/types/comfy.ts).
+
+## Further Reading
+
+For more detailed information about ComfyUI's extension system, refer to the official documentation:
+
+- [JavaScript Extension Overview](https://docs.comfy.org/custom-nodes/js/javascript_overview)
+- [JavaScript Hooks](https://docs.comfy.org/custom-nodes/js/javascript_hooks)
+- [JavaScript Objects and Hijacking](https://docs.comfy.org/custom-nodes/js/javascript_objects_and_hijacking)
+- [JavaScript Settings](https://docs.comfy.org/custom-nodes/js/javascript_settings)
+- [JavaScript Examples](https://docs.comfy.org/custom-nodes/js/javascript_examples)
+
+Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.

src/extensions/core/load3d/SceneManager.ts

@@ -82,6 +82,8 @@ export class SceneManager implements SceneManagerInterface {
   }
 
   async setBackgroundImage(uploadPath: string): Promise<void> {
+    this.eventManager.emitEvent('backgroundImageLoadingStart', null)
+
     if (uploadPath === '') {
       this.removeBackgroundImage()
       return
@@ -123,7 +125,9 @@ export class SceneManager implements SceneManagerInterface {
       )
 
       this.eventManager.emitEvent('backgroundImageChange', uploadPath)
+      this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
     } catch (error) {
+      this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
       console.error('Error loading background image:', error)
     }
   }
@@ -139,6 +143,7 @@ export class SceneManager implements SceneManagerInterface {
       this.backgroundTexture.dispose()
       this.backgroundTexture = null
     }
+    this.eventManager.emitEvent('backgroundImageLoadingEnd', null)
   }
 
   updateBackgroundSize(

src/locales/en/main.json

@@ -114,7 +114,9 @@
     "learnMore": "Learn more",
     "amount": "Amount",
     "unknownError": "Unknown error",
-    "title": "Title"
+    "title": "Title",
+    "edit": "Edit",
+    "copy": "Copy"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -1260,7 +1262,8 @@
     "failedToAccessBillingPortal": "Failed to access billing portal: {error}",
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
-    "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option."
+    "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
+    "nothingSelected": "Nothing selected"
   },
   "auth": {
     "apiKey": {
@@ -1381,30 +1384,17 @@
     "notSet": "Not set",
     "updatePassword": "Update Password"
   },
-  "apiNodesNews": {
-    "introducing": "Introducing",
-    "subtitle": "Access all the popular paid models natively in ComfyUI",
-    "steps": {
-      "step1": {
-        "title": "Login/Create an account:",
-        "subtitle": "Settings > User > Login"
-      },
-      "step2": {
-        "title": "Purchase credits:",
-        "subtitle": "Settings > Credits > Buy Credits"
-      },
-      "step3": {
-        "title": "Locate new API Nodes under 'API Node' section and add to the canvas"
-      },
-      "step4": {
-        "title": "Run!"
-      }
-    }
-  },
   "selectionToolbox": {
     "executeButton": {
       "tooltip": "Execute to selected output nodes (Highlighted with orange border)",
       "disabledTooltip": "No output nodes selected"
     }
+  },
+  "chatHistory": {
+    "cancelEdit": "Cancel",
+    "editTooltip": "Edit message",
+    "cancelEditTooltip": "Cancel edit",
+    "copiedTooltip": "Copied",
+    "copyTooltip": "Copy message to clipboard"
   }
 }

src/locales/es/main.json

@@ -4,26 +4,6 @@
     "title": "Nodo(s) de API",
     "totalCost": "Costo total"
   },
-  "apiNodesNews": {
-    "introducing": "Presentamos",
-    "steps": {
-      "step1": {
-        "subtitle": "Configuración > Usuario > Iniciar sesión",
-        "title": "Inicia sesión/Crea una cuenta:"
-      },
-      "step2": {
-        "subtitle": "Configuración > Créditos > Comprar créditos",
-        "title": "Compra créditos:"
-      },
-      "step3": {
-        "title": "Ubica los nuevos nodos API en la sección 'API Node' y agrégalos al lienzo"
-      },
-      "step4": {
-        "title": "¡Ejecuta!"
-      }
-    },
-    "subtitle": "Todos los modelos externos ahora disponibles en ComfyUI"
-  },
   "apiNodesSignInDialog": {
     "message": "Este flujo de trabajo contiene nodos de API, que requieren que inicies sesión en tu cuenta para poder ejecutar.",
     "title": "Se requiere iniciar sesión para usar los nodos de API"
@@ -102,6 +82,13 @@
       "title": "Crea una cuenta"
     }
   },
+  "chatHistory": {
+    "cancelEdit": "Cancelar",
+    "cancelEditTooltip": "Cancelar edición",
+    "copiedTooltip": "Copiado",
+    "copyTooltip": "Copiar mensaje al portapapeles",
+    "editTooltip": "Editar mensaje"
+  },
   "clipboard": {
     "errorMessage": "Error al copiar al portapapeles",
     "errorNotSupported": "API del portapapeles no soportada en su navegador",
@@ -277,6 +264,7 @@
     "continue": "Continuar",
     "control_after_generate": "control después de generar",
     "control_before_generate": "control antes de generar",
+    "copy": "Copiar",
     "copyToClipboard": "Copiar al portapapeles",
     "currentUser": "Usuario actual",
     "customize": "Personalizar",
@@ -288,6 +276,7 @@
     "disableAll": "Deshabilitar todo",
     "disabling": "Deshabilitando",
     "download": "Descargar",
+    "edit": "Editar",
     "empty": "Vacío",
     "enableAll": "Habilitar todo",
     "enabled": "Habilitado",
@@ -1354,6 +1343,7 @@
     "no3dSceneToExport": "No hay escena 3D para exportar",
     "noTemplatesToExport": "No hay plantillas para exportar",
     "nodeDefinitionsUpdated": "Definiciones de nodos actualizadas",
+    "nothingSelected": "Nada seleccionado",
     "nothingToGroup": "Nada para agrupar",
     "nothingToQueue": "Nada para poner en cola",
     "pendingTasksDeleted": "Tareas pendientes eliminadas",

src/locales/fr/main.json

@@ -4,26 +4,6 @@
     "title": "Nœud(s) API",
     "totalCost": "Coût total"
   },
-  "apiNodesNews": {
-    "introducing": "Présentation",
-    "steps": {
-      "step1": {
-        "subtitle": "Paramètres > Utilisateur > Connexion",
-        "title": "Connectez-vous / Créez un compte :"
-      },
-      "step2": {
-        "subtitle": "Paramètres > Crédits > Acheter des crédits",
-        "title": "Achetez des crédits :"
-      },
-      "step3": {
-        "title": "Trouvez les nouveaux nœuds API dans la section 'API Node' et ajoutez-les à la toile"
-      },
-      "step4": {
-        "title": "Lancez !"
-      }
-    },
-    "subtitle": "Tous les modèles externes sont désormais disponibles dans ComfyUI"
-  },
   "apiNodesSignInDialog": {
     "message": "Ce flux de travail contient des nœuds API, qui nécessitent que vous soyez connecté à votre compte pour pouvoir fonctionner.",
     "title": "Connexion requise pour utiliser les nœuds API"
@@ -102,6 +82,13 @@
       "title": "Créer un compte"
     }
   },
+  "chatHistory": {
+    "cancelEdit": "Annuler",
+    "cancelEditTooltip": "Annuler la modification",
+    "copiedTooltip": "Copié",
+    "copyTooltip": "Copier le message dans le presse-papiers",
+    "editTooltip": "Modifier le message"
+  },
   "clipboard": {
     "errorMessage": "Échec de la copie dans le presse-papiers",
     "errorNotSupported": "L'API du presse-papiers n'est pas prise en charge par votre navigateur",
@@ -277,6 +264,7 @@
     "continue": "Continuer",
     "control_after_generate": "contrôle après génération",
     "control_before_generate": "contrôle avant génération",
+    "copy": "Copier",
     "copyToClipboard": "Copier dans le presse-papiers",
     "currentUser": "Utilisateur actuel",
     "customize": "Personnaliser",
@@ -288,6 +276,7 @@
     "disableAll": "Désactiver tout",
     "disabling": "Désactivation",
     "download": "Télécharger",
+    "edit": "Modifier",
     "empty": "Vide",
     "enableAll": "Activer tout",
     "enabled": "Activé",
@@ -1354,6 +1343,7 @@
     "no3dSceneToExport": "Aucune scène 3D à exporter",
     "noTemplatesToExport": "Aucun modèle à exporter",
     "nodeDefinitionsUpdated": "Définitions de nœuds mises à jour",
+    "nothingSelected": "Aucune sélection",
     "nothingToGroup": "Rien à regrouper",
     "nothingToQueue": "Rien à ajouter à la file d’attente",
     "pendingTasksDeleted": "Tâches en attente supprimées",

src/locales/ja/main.json

@@ -4,26 +4,6 @@
     "title": "APIノード",
     "totalCost": "合計コスト"
   },
-  "apiNodesNews": {
-    "introducing": "紹介",
-    "steps": {
-      "step1": {
-        "subtitle": "設定 > ユーザー > ログイン",
-        "title": "ログイン／アカウント作成："
-      },
-      "step2": {
-        "subtitle": "設定 > クレジット > クレジットを購入",
-        "title": "クレジットを購入："
-      },
-      "step3": {
-        "title": "「APIノード」セクションで新しいAPIノードを見つけてキャンバスに追加"
-      },
-      "step4": {
-        "title": "実行！"
-      }
-    },
-    "subtitle": "すべての外部モデルがComfyUIで利用可能になりました"
-  },
   "apiNodesSignInDialog": {
     "message": "このワークフローにはAPIノードが含まれており、実行するためにはアカウントにサインインする必要があります。",
     "title": "APIノードを使用するためにはサインインが必要です"
@@ -102,6 +82,13 @@
       "title": "アカウントを作成する"
     }
   },
+  "chatHistory": {
+    "cancelEdit": "キャンセル",
+    "cancelEditTooltip": "編集をキャンセル",
+    "copiedTooltip": "コピーしました",
+    "copyTooltip": "メッセージをクリップボードにコピー",
+    "editTooltip": "メッセージを編集"
+  },
   "clipboard": {
     "errorMessage": "クリップボードへのコピーに失敗しました",
     "errorNotSupported": "お使いのブラウザではクリップボードAPIがサポートされていません",
@@ -277,6 +264,7 @@
     "continue": "続ける",
     "control_after_generate": "生成後の制御",
     "control_before_generate": "生成前の制御",
+    "copy": "コピー",
     "copyToClipboard": "クリップボードにコピー",
     "currentUser": "現在のユーザー",
     "customize": "カスタマイズ",
@@ -288,6 +276,7 @@
     "disableAll": "すべて無効にする",
     "disabling": "無効化",
     "download": "ダウンロード",
+    "edit": "編集",
     "empty": "空",
     "enableAll": "すべて有効にする",
     "enabled": "有効",
@@ -1354,6 +1343,7 @@
     "no3dSceneToExport": "エクスポートする3Dシーンがありません",
     "noTemplatesToExport": "エクスポートするテンプレートがありません",
     "nodeDefinitionsUpdated": "ノード定義が更新されました",
+    "nothingSelected": "選択されていません",
     "nothingToGroup": "グループ化するものがありません",
     "nothingToQueue": "キューに追加する項目がありません",
     "pendingTasksDeleted": "保留中のタスクが削除されました",

src/locales/ko/main.json

@@ -4,26 +4,6 @@
     "title": "API 노드(들)",
     "totalCost": "총 비용"
   },
-  "apiNodesNews": {
-    "introducing": "소개합니다",
-    "steps": {
-      "step1": {
-        "subtitle": "설정 > 사용자 > 로그인",
-        "title": "로그인/계정 생성:"
-      },
-      "step2": {
-        "subtitle": "설정 > 크레딧 > 크레딧 구매",
-        "title": "크레딧 구매:"
-      },
-      "step3": {
-        "title": "'API Node' 섹션에서 새로운 API 노드를 찾아 캔버스에 추가하세요"
-      },
-      "step4": {
-        "title": "실행!"
-      }
-    },
-    "subtitle": "모든 외부 모델이 이제 ComfyUI에서 사용 가능합니다"
-  },
   "apiNodesSignInDialog": {
     "message": "이 워크플로우에는 API 노드가 포함되어 있으며, 실행하려면 계정에 로그인해야 합니다.",
     "title": "API 노드 사용에 필요한 로그인"
@@ -102,6 +82,13 @@
       "title": "계정 생성"
     }
   },
+  "chatHistory": {
+    "cancelEdit": "취소",
+    "cancelEditTooltip": "편집 취소",
+    "copiedTooltip": "복사됨",
+    "copyTooltip": "메시지를 클립보드에 복사",
+    "editTooltip": "메시지 편집"
+  },
   "clipboard": {
     "errorMessage": "클립보드에 복사하지 못했습니다",
     "errorNotSupported": "브라우저가 클립보드 API를 지원하지 않습니다.",
@@ -277,6 +264,7 @@
     "continue": "계속",
     "control_after_generate": "생성 후 제어",
     "control_before_generate": "생성 전 제어",
+    "copy": "복사",
     "copyToClipboard": "클립보드에 복사",
     "currentUser": "현재 사용자",
     "customize": "사용자 정의",
@@ -288,6 +276,7 @@
     "disableAll": "모두 비활성화",
     "disabling": "비활성화 중",
     "download": "다운로드",
+    "edit": "편집",
     "empty": "비어 있음",
     "enableAll": "모두 활성화",
     "enabled": "활성화됨",
@@ -1354,6 +1343,7 @@
     "no3dSceneToExport": "내보낼 3D 장면이 없습니다",
     "noTemplatesToExport": "내보낼 템플릿이 없습니다",
     "nodeDefinitionsUpdated": "노드 정의가 업데이트되었습니다",
+    "nothingSelected": "선택된 항목이 없습니다",
     "nothingToGroup": "그룹화할 항목이 없습니다",
     "nothingToQueue": "대기열에 추가할 항목이 없습니다",
     "pendingTasksDeleted": "보류 중인 작업이 삭제되었습니다",

src/locales/ru/main.json

@@ -4,26 +4,6 @@
     "title": "API Node(s)",
     "totalCost": "Общая стоимость"
   },
-  "apiNodesNews": {
-    "introducing": "Представляем",
-    "steps": {
-      "step1": {
-        "subtitle": "Настройки > Пользователь > Войти",
-        "title": "Войти/Создать аккаунт:"
-      },
-      "step2": {
-        "subtitle": "Настройки > Кредиты > Купить кредиты",
-        "title": "Купить кредиты:"
-      },
-      "step3": {
-        "title": "Найдите новые API-узлы в разделе 'API Node' и добавьте их на холст"
-      },
-      "step4": {
-        "title": "Запустить!"
-      }
-    },
-    "subtitle": "Все внешние модели теперь доступны в ComfyUI"
-  },
   "apiNodesSignInDialog": {
     "message": "Этот рабочий процесс содержит API Nodes, которые требуют входа в вашу учетную запись для выполнения.",
     "title": "Требуется вход для использования API Nodes"
@@ -102,6 +82,13 @@
       "title": "Создать аккаунт"
     }
   },
+  "chatHistory": {
+    "cancelEdit": "Отмена",
+    "cancelEditTooltip": "Отменить редактирование",
+    "copiedTooltip": "Скопировано",
+    "copyTooltip": "Скопировать сообщение в буфер",
+    "editTooltip": "Редактировать сообщение"
+  },
   "clipboard": {
     "errorMessage": "Не удалось скопировать в буфер обмена",
     "errorNotSupported": "API буфера обмена не поддерживается в вашем браузере",
@@ -277,6 +264,7 @@
     "continue": "Продолжить",
     "control_after_generate": "управление после генерации",
     "control_before_generate": "управление до генерации",
+    "copy": "Копировать",
     "copyToClipboard": "Скопировать в буфер обмена",
     "currentUser": "Текущий пользователь",
     "customize": "Настроить",
@@ -288,6 +276,7 @@
     "disableAll": "Отключить все",
     "disabling": "Отключение",
     "download": "Скачать",
+    "edit": "Редактировать",
     "empty": "Пусто",
     "enableAll": "Включить все",
     "enabled": "Включено",
@@ -1354,6 +1343,7 @@
     "no3dSceneToExport": "Нет 3D сцены для экспорта",
     "noTemplatesToExport": "Нет шаблонов для экспорта",
     "nodeDefinitionsUpdated": "Определения узлов обновлены",
+    "nothingSelected": "Ничего не выбрано",
     "nothingToGroup": "Нечего группировать",
     "nothingToQueue": "Нет заданий в очереди",
     "pendingTasksDeleted": "Ожидающие задачи удалены",

src/locales/zh/main.json

@@ -4,26 +4,6 @@
     "title": "API节点",
     "totalCost": "总成本"
   },
-  "apiNodesNews": {
-    "introducing": "介绍",
-    "steps": {
-      "step1": {
-        "subtitle": "设置 > 用户 > 登录",
-        "title": "登录/创建账户："
-      },
-      "step2": {
-        "subtitle": "设置 > 积分 > 购买积分",
-        "title": "购买积分："
-      },
-      "step3": {
-        "title": "在“API 节点”部分找到新的 API 节点并添加到画布"
-      },
-      "step4": {
-        "title": "运行！"
-      }
-    },
-    "subtitle": "所有外部模型现已在 ComfyUI 中可用"
-  },
   "apiNodesSignInDialog": {
     "message": "此工作流包含API节点，需要您登录账户才能运行。",
     "title": "使用API节点需要登录"
@@ -102,6 +82,13 @@
       "title": "创建一个账户"
     }
   },
+  "chatHistory": {
+    "cancelEdit": "取消",
+    "cancelEditTooltip": "取消编辑",
+    "copiedTooltip": "已复制",
+    "copyTooltip": "复制消息到剪贴板",
+    "editTooltip": "编辑消息"
+  },
   "clipboard": {
     "errorMessage": "复制到剪贴板失败",
     "errorNotSupported": "您的浏览器不支持剪贴板API",
@@ -277,6 +264,7 @@
     "continue": "继续",
     "control_after_generate": "生成后控制",
     "control_before_generate": "生成前控制",
+    "copy": "复制",
     "copyToClipboard": "复制到剪贴板",
     "currentUser": "当前用户",
     "customize": "自定义",
@@ -288,6 +276,7 @@
     "disableAll": "禁用全部",
     "disabling": "禁用中",
     "download": "下载",
+    "edit": "编辑",
     "empty": "空",
     "enableAll": "启用全部",
     "enabled": "已启用",
@@ -1354,6 +1343,7 @@
     "no3dSceneToExport": "没有3D场景可以导出",
     "noTemplatesToExport": "没有模板可以导出",
     "nodeDefinitionsUpdated": "节点定义已更新",
+    "nothingSelected": "未选择任何内容",
     "nothingToGroup": "没有可分组的内容",
     "nothingToQueue": "没有可加入队列的内容",
     "pendingTasksDeleted": "待处理任务已删除",

src/schemas/apiSchema.ts

@@ -87,6 +87,12 @@ const zProgressTextWsMessage = z.object({
   text: z.string()
 })
 
+const zDisplayComponentWsMessage = z.object({
+  node_id: zNodeId,
+  component: z.enum(['ChatHistoryWidget']),
+  props: z.record(z.string(), z.any()).optional()
+})
+
 const zTerminalSize = z.object({
   cols: z.number(),
   row: z.number()
@@ -120,6 +126,9 @@ export type ExecutionInterruptedWsMessage = z.infer<
 export type ExecutionErrorWsMessage = z.infer<typeof zExecutionErrorWsMessage>
 export type LogsWsMessage = z.infer<typeof zLogsWsMessage>
 export type ProgressTextWsMessage = z.infer<typeof zProgressTextWsMessage>
+export type DisplayComponentWsMessage = z.infer<
+  typeof zDisplayComponentWsMessage
+>
 // End of ws messages
 
 const zPromptInputItem = z.object({

src/scripts/api.ts

@@ -1,6 +1,7 @@
 import axios from 'axios'
 
 import type {
+  DisplayComponentWsMessage,
   EmbeddingsResponse,
   ExecutedWsMessage,
   ExecutingWsMessage,
@@ -103,6 +104,7 @@ interface BackendApiCalls {
   /** Binary preview/progress data */
   b_preview: Blob
   progress_text: ProgressTextWsMessage
+  display_component: DisplayComponentWsMessage
 }
 
 /** Dictionary of all api calls */

src/scripts/app.ts

@@ -143,13 +143,20 @@ export class ComfyApp {
   _nodeOutputs: Record<string, any>
   nodePreviewImages: Record<string, string[]>
   // @ts-expect-error fixme ts strict error
-  graph: LGraph
+  #graph: LGraph
+  get graph() {
+    return this.#graph
+  }
   // @ts-expect-error fixme ts strict error
   canvas: LGraphCanvas
   dragOverNode: LGraphNode | null = null
   // @ts-expect-error fixme ts strict error
   canvasEl: HTMLCanvasElement
-  configuringGraph: boolean = false
+
+  #configuringGraphLevel: number = 0
+  get configuringGraph() {
+    return this.#configuringGraphLevel > 0
+  }
   // @ts-expect-error fixme ts strict error
   ctx: CanvasRenderingContext2D
   bodyTop: HTMLElement
@@ -692,17 +699,16 @@ export class ComfyApp {
     api.init()
   }
 
+  /** Flag that the graph is configuring to prevent nodes from running checks while its still loading */
   #addConfigureHandler() {
     const app = this
     const configure = LGraph.prototype.configure
-    // Flag that the graph is configuring to prevent nodes from running checks while its still loading
-    LGraph.prototype.configure = function () {
-      app.configuringGraph = true
+    LGraph.prototype.configure = function (...args) {
+      app.#configuringGraphLevel++
       try {
-        // @ts-expect-error fixme ts strict error
-        return configure.apply(this, arguments)
+        return configure.apply(this, args)
       } finally {
-        app.configuringGraph = false
+        app.#configuringGraphLevel--
       }
     }
   }
@@ -756,14 +762,13 @@ export class ComfyApp {
     this.#addConfigureHandler()
     this.#addApiUpdateHandlers()
 
-    this.graph = new LGraph()
+    this.#graph = new LGraph()
 
     this.#addAfterConfigureHandler()
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph)
     // Make canvas states reactive so we can observe changes on them.
     this.canvas.state = reactive(this.canvas.state)
-    this.canvas.ds.state = reactive(this.canvas.ds.state)
 
     // @ts-expect-error fixme ts strict error
     this.ctx = canvasEl.getContext('2d')
@@ -1090,6 +1095,7 @@ export class ComfyApp {
         title: t('errorDialog.loadWorkflowTitle'),
         reportType: 'loadWorkflowError'
       })
+      console.error(error)
       return
     }
     for (const node of this.graph.nodes) {
@@ -1229,6 +1235,7 @@ export class ComfyApp {
               title: t('errorDialog.promptExecutionError'),
               reportType: 'promptExecutionError'
             })
+            console.error(error)
 
             if (error instanceof PromptExecutionError) {
               executionStore.lastNodeErrors = error.response.node_errors ?? null

src/scripts/domWidget.ts

@@ -47,10 +47,13 @@ export interface DOMWidget<T extends HTMLElement, V extends object | string>
 /**
  * A DOM widget that wraps a Vue component as a litegraph widget.
  */
-export interface ComponentWidget<V extends object | string>
-  extends BaseDOMWidget<V> {
+export interface ComponentWidget<
+  V extends object | string,
+  P = Record<string, unknown>
+> extends BaseDOMWidget<V> {
   readonly component: Component
   readonly inputSpec: InputSpec
+  readonly props?: P
 }
 
 export interface DOMWidgetOptions<V extends object | string>
@@ -217,18 +220,23 @@ export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
   }
 }
 
-export class ComponentWidgetImpl<V extends object | string>
+export class ComponentWidgetImpl<
+    V extends object | string,
+    P = Record<string, unknown>
+  >
   extends BaseDOMWidgetImpl<V>
-  implements ComponentWidget<V>
+  implements ComponentWidget<V, P>
 {
   readonly component: Component
   readonly inputSpec: InputSpec
+  readonly props?: P
 
   constructor(obj: {
     node: LGraphNode
     name: string
     component: Component
     inputSpec: InputSpec
+    props?: P
     options: DOMWidgetOptions<V>
   }) {
     super({
@@ -237,6 +245,7 @@ export class ComponentWidgetImpl<V extends object | string>
     })
     this.component = obj.component
     this.inputSpec = obj.inputSpec
+    this.props = obj.props
   }
 
   override computeLayoutSize() {

src/services/README.md

@@ -0,0 +1,257 @@
+# Services
+
+This directory contains the service layer for the ComfyUI frontend application. Services encapsulate application logic and functionality into organized, reusable modules.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Service Architecture](#service-architecture)
+- [Core Services](#core-services)
+- [Service Development Guidelines](#service-development-guidelines)
+- [Common Design Patterns](#common-design-patterns)
+
+## Overview
+
+Services in ComfyUI provide organized modules that implement the application's functionality and logic. They handle operations such as API communication, workflow management, user settings, and other essential features. 
+
+The term "business logic" in this context refers to the code that implements the core functionality and behavior of the application - the rules, processes, and operations that make ComfyUI work as expected, separate from the UI display code.
+
+Services help organize related functionality into cohesive units, making the codebase more maintainable and testable. By centralizing related operations in services, the application achieves better separation of concerns, with UI components focusing on presentation and services handling functional operations.
+
+## Service Architecture
+
+The service layer in ComfyUI follows these architectural principles:
+
+1. **Domain-driven**: Each service focuses on a specific domain of the application
+2. **Stateless when possible**: Services generally avoid maintaining internal state
+3. **Reusable**: Services can be used across multiple components
+4. **Testable**: Services are designed for easy unit testing
+5. **Isolated**: Services have clear boundaries and dependencies
+
+While services can interact with both UI components and stores (centralized state), they primarily focus on implementing functionality rather than managing state. The following diagram illustrates how services fit into the application architecture:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    UI Components                         │
+└────────────────────────────┬────────────────────────────┘
+                             │
+                             ▼
+┌─────────────────────────────────────────────────────────┐
+│                     Composables                          │
+└────────────────────────────┬────────────────────────────┘
+                             │
+                             ▼
+┌─────────────────────────────────────────────────────────┐
+│                      Services                            │
+│                                                         │
+│              (Application Functionality)                 │
+└────────────────────────────┬────────────────────────────┘
+                             │
+                 ┌───────────┴───────────┐
+                 ▼                       ▼
+┌───────────────────────────┐ ┌─────────────────────────┐
+│         Stores            │ │       External APIs      │
+│    (Centralized State)    │ │                         │
+└───────────────────────────┘ └─────────────────────────┘
+```
+
+## Core Services
+
+The core services include:
+
+| Service | Description |
+|---------|-------------|
+| algoliaSearchService.ts | Implements search functionality using Algolia |
+| autoQueueService.ts | Manages automatic queue execution |
+| colorPaletteService.ts | Handles color palette management and customization |
+| comfyManagerService.ts | Manages ComfyUI application packages and updates |
+| comfyRegistryService.ts | Handles registration and discovery of ComfyUI extensions |
+| dialogService.ts | Provides dialog and modal management |
+| extensionService.ts | Manages extension registration and lifecycle |
+| keybindingService.ts | Handles keyboard shortcuts and keybindings |
+| litegraphService.ts | Provides utilities for working with the LiteGraph library |
+| load3dService.ts | Manages 3D model loading and visualization |
+| nodeSearchService.ts | Implements node search functionality |
+| workflowService.ts | Handles workflow operations (save, load, execute) |
+
+## Service Development Guidelines
+
+In ComfyUI, services can be implemented using two approaches:
+
+### 1. Class-based Services
+
+For complex services with state management and multiple methods, class-based services are used:
+
+```typescript
+export class NodeSearchService {
+  // Service state
+  private readonly nodeFuseSearch: FuseSearch<ComfyNodeDefImpl>
+  private readonly filters: Record<string, FuseFilter<ComfyNodeDefImpl, string>>
+
+  constructor(data: ComfyNodeDefImpl[]) {
+    // Initialize state
+    this.nodeFuseSearch = new FuseSearch(data, { /* options */ })
+    
+    // Setup filters
+    this.filters = {
+      inputType: new FuseFilter<ComfyNodeDefImpl, string>(/* options */),
+      category: new FuseFilter<ComfyNodeDefImpl, string>(/* options */)
+    }
+  }
+
+  public searchNode(query: string, filters: FuseFilterWithValue[] = []): ComfyNodeDefImpl[] {
+    // Implementation
+    return results
+  }
+}
+```
+
+### 2. Composable-style Services
+
+For simpler services or those that need to integrate with Vue's reactivity system, we prefer using composable-style services:
+
+```typescript
+export function useNodeSearchService(initialData: ComfyNodeDefImpl[]) {
+  // State (reactive if needed)
+  const data = ref(initialData)
+  
+  // Search functionality
+  function searchNodes(query: string) {
+    // Implementation
+    return results
+  }
+  
+  // Additional methods
+  function refreshData(newData: ComfyNodeDefImpl[]) {
+    data.value = newData
+  }
+  
+  // Return public API
+  return {
+    searchNodes,
+    refreshData
+  }
+}
+```
+
+When deciding between these approaches, consider:
+
+1. **Stateful vs. Stateless**: For stateful services, classes often provide clearer encapsulation
+2. **Reactivity needs**: If the service needs to be reactive, composable-style services integrate better with Vue's reactivity system
+3. **Complexity**: For complex services with many methods and internal state, classes can provide better organization
+4. **Testing**: Both approaches can be tested effectively, but composables may be simpler to test with Vue Test Utils
+
+### Service Template
+
+Here's a template for creating a new composable-style service:
+
+```typescript
+/**
+ * Service for managing [domain/functionality]
+ */
+export function useExampleService() {
+  // Private state/functionality
+  const cache = new Map()
+  
+  /**
+   * Description of what this method does
+   * @param param1 Description of parameter
+   * @returns Description of return value
+   */
+  async function performOperation(param1: string) {
+    try {
+      // Implementation
+      return result
+    } catch (error) {
+      // Error handling
+      console.error(`Operation failed: ${error.message}`)
+      throw error
+    }
+  }
+  
+  // Return public API
+  return {
+    performOperation
+  }
+}
+```
+
+## Common Design Patterns
+
+Services in ComfyUI frequently use the following design patterns:
+
+### Caching and Request Deduplication
+
+```typescript
+export function useCachedService() {
+  const cache = new Map()
+  const pendingRequests = new Map()
+  
+  async function fetchData(key: string) {
+    // Check cache first
+    if (cache.has(key)) return cache.get(key)
+    
+    // Check if request is already in progress
+    if (pendingRequests.has(key)) {
+      return pendingRequests.get(key)
+    }
+    
+    // Perform new request
+    const requestPromise = fetch(`/api/${key}`)
+      .then(response => response.json())
+      .then(data => {
+        cache.set(key, data)
+        pendingRequests.delete(key)
+        return data
+      })
+    
+    pendingRequests.set(key, requestPromise)
+    return requestPromise
+  }
+  
+  return { fetchData }
+}
+```
+
+### Factory Pattern
+
+```typescript
+export function useNodeFactory() {
+  function createNode(type: string, config: Record<string, any>) {
+    // Create node based on type and configuration
+    switch (type) {
+      case 'basic':
+        return { /* basic node implementation */ }
+      case 'complex':
+        return { /* complex node implementation */ }
+      default:
+        throw new Error(`Unknown node type: ${type}`)
+    }
+  }
+  
+  return { createNode }
+}
+```
+
+### Facade Pattern
+
+```typescript
+export function useWorkflowService(
+  apiService,
+  graphService,
+  storageService
+) {
+  // Provides a simple interface to complex subsystems
+  async function saveWorkflow(name: string) {
+    const graphData = graphService.serializeGraph()
+    const storagePath = await storageService.getPath(name)
+    return apiService.saveData(storagePath, graphData)
+  }
+  
+  return { saveWorkflow }
+}
+```
+
+For more detailed information about the service layer pattern and its applications, refer to:
+- [Service Layer Pattern](https://en.wikipedia.org/wiki/Service_layer_pattern)
+- [Service-Orientation](https://en.wikipedia.org/wiki/Service-orientation)

src/services/algoliaSearchService.ts

@@ -1,3 +1,4 @@
+import { searchClient as algoliasearch } from '@algolia/client-search'
 import QuickLRU from '@alloc/quick-lru'
 import type {
   BaseSearchParamsWithoutQuery,
@@ -5,7 +6,6 @@ import type {
   SearchQuery,
   SearchResponse
 } from 'algoliasearch/dist/lite/browser'
-import { liteClient as algoliasearch } from 'algoliasearch/dist/lite/builds/browser'
 import { omit } from 'lodash'
 
 import { components } from '@/types/comfyRegistryTypes'
@@ -124,7 +124,15 @@ export const useAlgoliaSearchService = (
     maxCacheSize = DEFAULT_MAX_CACHE_SIZE,
     minCharsForSuggestions = DEFAULT_MIN_CHARS_FOR_SUGGESTIONS
   } = options
-  const searchClient = algoliasearch(__ALGOLIA_APP_ID__, __ALGOLIA_API_KEY__)
+  const searchClient = algoliasearch(__ALGOLIA_APP_ID__, __ALGOLIA_API_KEY__, {
+    hosts: [
+      {
+        url: 'https://search.comfy.org',
+        accept: 'read',
+        protocol: 'https'
+      }
+    ]
+  })
   const searchPacksCache = new QuickLRU<string, SearchPacksResult>({
     maxSize: maxCacheSize
   })

src/services/dialogService.ts

@@ -1,4 +1,3 @@
-import ApiNodesNewsContent from '@/components/dialog/content/ApiNodesNewsContent.vue'
 import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
@@ -380,32 +379,6 @@ export const useDialogService = () => {
     })
   }
 
-  /**
-   * Shows a dialog for the API nodes news.
-   * TODO: Remove the news dialog on next major feature release.
-   */
-  function showApiNodesNewsDialog() {
-    if (localStorage.getItem('api-nodes-news-seen') === 'true') {
-      return
-    }
-
-    return dialogStore.showDialog({
-      key: 'api-nodes-news',
-      component: ApiNodesNewsContent,
-      props: {
-        dismissableMask: true,
-        onClose: () => {
-          dialogStore.closeDialog({ key: 'api-nodes-news' })
-          localStorage.setItem('api-nodes-news-seen', 'true')
-        }
-      },
-      dialogComponentProps: {
-        closable: false,
-        position: 'bottomright'
-      }
-    })
-  }
-
   return {
     showLoadWorkflowWarning,
     showMissingModelsWarning,
@@ -421,7 +394,6 @@ export const useDialogService = () => {
     showSignInDialog,
     showTopUpCreditsDialog,
     showUpdatePasswordDialog,
-    showApiNodesNewsDialog,
     prompt,
     confirm
   }

src/stores/README.md

@@ -0,0 +1,356 @@
+# Stores
+
+This directory contains Pinia stores for the ComfyUI frontend application. Stores provide centralized state management for the application.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Store Architecture](#store-architecture)
+- [Core Stores](#core-stores)
+- [Store Development Guidelines](#store-development-guidelines)
+- [Common Patterns](#common-patterns)
+- [Testing Stores](#testing-stores)
+
+## Overview
+
+Stores in ComfyUI use [Pinia](https://pinia.vuejs.org/), Vue's official state management library. Each store is responsible for managing a specific domain of the application state, such as user data, workflow information, graph state, and UI configuration.
+
+Stores provide a way to maintain global application state that can be accessed from any component, regardless of where those components are in the component hierarchy. This solves the problem of "prop drilling" (passing data down through multiple levels of components) and allows components that aren't directly related to share and modify the same state.
+
+For example, without global state:
+```
+                  App
+                   │
+        ┌──────────┴──────────┐
+        │                     │
+    HeaderBar               Canvas
+        │                     │
+        │                     │
+    UserMenu            NodeProperties
+```
+
+In this structure, if the `UserMenu` component needs to update something that affects `NodeProperties`, the data would need to be passed up to `App` and then down again, through all intermediate components.
+
+With Pinia stores, components can directly access and update the shared state:
+```
+    ┌─────────────────┐
+    │                 │
+    │  Pinia Stores   │
+    │                 │
+    └───────┬─────────┘
+            │
+            │ Accessed by
+            ▼
+┌──────────────────────────┐
+│                          │
+│       Components         │
+│                          │
+└──────────────────────────┘
+```
+
+## Store Architecture
+
+The store architecture in ComfyUI follows these principles:
+
+1. **Domain-driven**: Each store focuses on a specific domain of the application
+2. **Single source of truth**: Stores serve as the definitive source for specific data
+3. **Composition**: Stores can interact with other stores when needed
+4. **Actions for logic**: Business logic is encapsulated in store actions
+5. **Getters for derived state**: Computed values are exposed via getters
+
+The following diagram illustrates the store architecture and data flow:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    Vue Components                        │
+│                                                         │
+│   ┌───────────────┐            ┌───────────────┐        │
+│   │  Component A  │            │  Component B  │        │
+│   └───────┬───────┘            └───────┬───────┘        │
+│           │                            │                │
+└───────────┼────────────────────────────┼────────────────┘
+            │                            │
+            │     ┌───────────────┐      │
+            └────►│  Composables  │◄─────┘
+                  └───────┬───────┘
+                          │
+┌─────────────────────────┼─────────────────────────────┐
+│         Pinia Stores    │                             │
+│                         │                             │
+│     ┌───────────────────▼───────────────────────┐     │
+│     │                 Actions                    │     │
+│     └───────────────────┬───────────────────────┘     │
+│                         │                             │
+│     ┌───────────────────▼───────────────────────┐     │
+│     │                  State                     │     │
+│     └───────────────────┬───────────────────────┘     │
+│                         │                             │
+│     ┌───────────────────▼───────────────────────┐     │
+│     │                 Getters                    │     │
+│     └───────────────────┬───────────────────────┘     │
+│                         │                             │
+└─────────────────────────┼─────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────┐
+│                   External Services                      │
+│       (API, localStorage, WebSocket, etc.)              │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Core Stores
+
+The core stores include:
+
+| Store | Description |
+|-------|-------------|
+| aboutPanelStore.ts | Manages the About panel state and badges |
+| apiKeyAuthStore.ts | Handles API key authentication |
+| comfyManagerStore.ts | Manages ComfyUI application state |
+| comfyRegistryStore.ts | Handles extensions registry |
+| commandStore.ts | Manages commands and command execution |
+| dialogStore.ts | Controls dialog/modal display and state |
+| domWidgetStore.ts | Manages DOM widget state |
+| executionStore.ts | Tracks workflow execution state |
+| extensionStore.ts | Manages extension registration and state |
+| firebaseAuthStore.ts | Handles Firebase authentication |
+| graphStore.ts | Manages the graph canvas state |
+| imagePreviewStore.ts | Controls image preview functionality |
+| keybindingStore.ts | Manages keyboard shortcuts |
+| menuItemStore.ts | Handles menu items and their state |
+| modelStore.ts | Manages AI models information |
+| nodeDefStore.ts | Manages node definitions |
+| queueStore.ts | Handles the execution queue |
+| settingStore.ts | Manages application settings |
+| userStore.ts | Manages user data and preferences |
+| workflowStore.ts | Handles workflow data and operations |
+| workspace/* | Stores related to the workspace UI |
+
+## Store Development Guidelines
+
+When developing or modifying stores, follow these best practices:
+
+1. **Define clear purpose**: Each store should have a specific responsibility
+2. **Use actions for async operations**: Encapsulate asynchronous logic in actions
+3. **Keep stores focused**: Each store should manage related state
+4. **Document public API**: Add comments for state properties, actions, and getters
+5. **Use getters for derived state**: Compute derived values using getters
+6. **Test store functionality**: Write unit tests for stores
+
+### Store Template
+
+Here's a template for creating a new Pinia store, following the setup style used in ComfyUI:
+
+```typescript
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useExampleStore = defineStore('example', () => {
+  // State
+  const items = ref([])
+  const isLoading = ref(false)
+  const error = ref(null)
+
+  // Getters
+  const itemCount = computed(() => items.value.length)
+  const hasError = computed(() => error.value !== null)
+
+  // Actions
+  function addItem(item) {
+    items.value.push(item)
+  }
+
+  async function fetchItems() {
+    isLoading.value = true
+    error.value = null
+    
+    try {
+      const response = await fetch('/api/items')
+      const data = await response.json()
+      items.value = data
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  // Expose state, getters, and actions
+  return {
+    // State
+    items,
+    isLoading,
+    error,
+    
+    // Getters
+    itemCount,
+    hasError,
+    
+    // Actions
+    addItem,
+    fetchItems
+  }
+})
+```
+
+## Common Patterns
+
+Stores in ComfyUI frequently use these patterns:
+
+### API Integration
+
+```typescript
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '@/scripts/api'
+
+export const useDataStore = defineStore('data', () => {
+  const data = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  async function fetchData() {
+    loading.value = true
+    try {
+      const result = await api.getData()
+      data.value = result
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    data,
+    loading,
+    error,
+    fetchData
+  }
+})
+```
+
+### Store Composition
+
+```typescript
+import { defineStore, storeToRefs } from 'pinia'
+import { computed, ref, watch } from 'vue'
+import { useOtherStore } from './otherStore'
+
+export const useComposedStore = defineStore('composed', () => {
+  const otherStore = useOtherStore()
+  const { someData } = storeToRefs(otherStore)
+  
+  // Local state
+  const localState = ref(0)
+  
+  // Computed value based on other store
+  const derivedValue = computed(() => {
+    return computeFromOtherData(someData.value, localState.value)
+  })
+  
+  // Action that uses another store
+  async function complexAction() {
+    await otherStore.someAction()
+    localState.value += 1
+  }
+  
+  return {
+    localState,
+    derivedValue,
+    complexAction
+  }
+})
+```
+
+### Persistent State
+
+```typescript
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export const usePreferencesStore = defineStore('preferences', () => {
+  // Load from localStorage if available
+  const theme = ref(localStorage.getItem('theme') || 'light')
+  const fontSize = ref(parseInt(localStorage.getItem('fontSize') || '14'))
+  
+  // Save to localStorage when changed
+  watch(theme, (newTheme) => {
+    localStorage.setItem('theme', newTheme)
+  })
+  
+  watch(fontSize, (newSize) => {
+    localStorage.setItem('fontSize', newSize.toString())
+  })
+  
+  function setTheme(newTheme) {
+    theme.value = newTheme
+  }
+  
+  return {
+    theme,
+    fontSize,
+    setTheme
+  }
+})
+```
+
+## Testing Stores
+
+Stores should be tested to ensure they behave as expected. Here's an example of how to test a store:
+
+```typescript
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { api } from '@/scripts/api'
+import { useExampleStore } from '@/stores/exampleStore'
+
+// Mock API dependencies
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getData: vi.fn()
+  }
+}))
+
+describe('useExampleStore', () => {
+  let store: ReturnType<typeof useExampleStore>
+
+  beforeEach(() => {
+    // Create a fresh pinia instance and make it active
+    setActivePinia(createPinia())
+    store = useExampleStore()
+    
+    // Clear all mocks
+    vi.clearAllMocks()
+  })
+
+  it('should initialize with default state', () => {
+    expect(store.items).toEqual([])
+    expect(store.isLoading).toBe(false)
+    expect(store.error).toBeNull()
+  })
+
+  it('should add an item', () => {
+    store.addItem('test')
+    expect(store.items).toEqual(['test'])
+    expect(store.itemCount).toBe(1)
+  })
+  
+  it('should fetch items', async () => {
+    // Setup mock response
+    vi.mocked(api.getData).mockResolvedValue(['item1', 'item2'])
+    
+    // Call the action
+    await store.fetchItems()
+    
+    // Verify state changes
+    expect(store.isLoading).toBe(false)
+    expect(store.items).toEqual(['item1', 'item2'])
+    expect(store.error).toBeNull()
+  })
+})
+```
+
+For more information on Pinia, refer to the [Pinia documentation](https://pinia.vuejs.org/introduction.html).

src/stores/executionStore.ts

@@ -1,8 +1,11 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
+import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
 import { useNodeProgressText } from '@/composables/node/useNodeProgressText'
 import type {
+  DisplayComponentWsMessage,
   ExecutedWsMessage,
   ExecutionCachedWsMessage,
   ExecutionErrorWsMessage,
@@ -107,6 +110,10 @@ export const useExecutionStore = defineStore('execution', () => {
     )
   }
   api.addEventListener('progress_text', handleProgressText as EventListener)
+  api.addEventListener(
+    'display_component',
+    handleDisplayComponent as EventListener
+  )
 
   function unbindExecutionEvents() {
     api.removeEventListener(
@@ -195,6 +202,21 @@ export const useExecutionStore = defineStore('execution', () => {
     useNodeProgressText().showTextPreview(node, text)
   }
 
+  function handleDisplayComponent(e: CustomEvent<DisplayComponentWsMessage>) {
+    const { node_id, component, props = {} } = e.detail
+    const node = app.graph.getNodeById(node_id)
+    if (!node) return
+
+    if (component === 'ChatHistoryWidget') {
+      useNodeChatHistory({
+        props: props as Omit<
+          InstanceType<typeof ChatHistoryWidget>['$props'],
+          'widget'
+        >
+      }).showChatHistory(node)
+    }
+  }
+
   function storePrompt({
     nodes,
     id,

src/stores/graphStore.ts

@@ -1,7 +1,9 @@
 import type { LGraphCanvas, LGraphGroup, LGraphNode } from '@comfyorg/litegraph'
 import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import { defineStore } from 'pinia'
-import { type Raw, markRaw, ref, shallowRef } from 'vue'
+import { type Raw, computed, markRaw, ref, shallowRef } from 'vue'
+
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -27,6 +29,9 @@ export const useCanvasStore = defineStore('canvas', () => {
     selectedItems.value = items.map((item) => markRaw(item))
   }
 
+  const nodeSelected = computed(() => selectedItems.value.some(isLGraphNode))
+  const groupSelected = computed(() => selectedItems.value.some(isLGraphGroup))
+
   const getCanvas = () => {
     if (!canvas.value) throw new Error('getCanvas: canvas is null')
     return canvas.value
@@ -35,6 +40,8 @@ export const useCanvasStore = defineStore('canvas', () => {
   return {
     canvas,
     selectedItems,
+    nodeSelected,
+    groupSelected,
     updateSelectedItems,
     getCanvas
   }

src/utils/executionUtil.ts

@@ -158,7 +158,7 @@ export const graphToPrompt = async (
 
         if (link) {
           if (parent?.updateLink) {
-            // groupNode
+            // Subgraph node / groupNode callback; deprecated, should be replaced
             link = parent.updateLink(link)
           }
           if (link) {

src/views/GraphView.vue

@@ -42,7 +42,6 @@ import { StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
-import { useDialogService } from '@/services/dialogService'
 import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -244,8 +243,6 @@ const onGraphReady = () => {
       // Explicitly initialize nodeSearchService to avoid indexing delay when
       // node search is triggered
       useNodeDefStore().nodeSearchService.searchNode('')
-
-      useDialogService().showApiNodesNewsDialog()
     },
     { timeout: 1000 }
   )

tests-ui/README.md

@@ -0,0 +1,45 @@
+# ComfyUI Frontend Testing Guide
+
+This guide provides an overview of testing approaches used in the ComfyUI Frontend codebase. These guides are meant to document any particularities or nuances of writing tests in this codebase, rather than being a comprehensive guide to testing in general. By reading these guides first, you may save yourself some time when encountering issues.
+
+## Testing Documentation
+
+Documentation for unit tests is organized into three guides:
+
+- [Component Testing](./component-testing.md) - How to test Vue components
+- [Unit Testing](./unit-testing.md) - How to test utility functions, composables, and other non-component code
+- [Store Testing](./store-testing.md) - How to test Pinia stores specifically
+
+## Testing Structure
+
+The ComfyUI Frontend project uses a mixed approach to unit test organization:
+
+- **Component Tests**: Located directly alongside their components with a `.spec.ts` extension
+- **Unit Tests**: Located in the `tests-ui/tests/` directory
+- **Store Tests**: Located in the `tests-ui/tests/store/` directory
+- **Browser Tests**: These are located in the `browser_tests/` directory. There is a dedicated README in the `browser_tests/` directory, so it will not be covered here.
+
+## Test Frameworks and Libraries
+
+Our tests use the following frameworks and libraries:
+
+- [Vitest](https://vitest.dev/) - Test runner and assertion library
+- [@vue/test-utils](https://test-utils.vuejs.org/) - Vue component testing utilities
+- [Pinia](https://pinia.vuejs.org/cookbook/testing.html) - For store testing
+
+## Getting Started
+
+To run the tests locally:
+
+```bash
+# Run unit tests
+npm run test:unit
+
+# Run unit tests in watch mode
+npm run test:unit:dev
+
+# Run component tests with browser-native environment
+npm run test:component
+```
+
+Refer to the specific guides for more detailed information on each testing type.

tests-ui/component-testing.md

@@ -0,0 +1,370 @@
+# Component Testing Guide
+
+This guide covers patterns and examples for testing Vue components in the ComfyUI Frontend codebase.
+
+## Table of Contents
+
+1. [Basic Component Testing](#basic-component-testing)
+2. [PrimeVue Components Testing](#primevue-components-testing)
+3. [Tooltip Directives](#tooltip-directives)
+4. [Component Events Testing](#component-events-testing)
+5. [User Interaction Testing](#user-interaction-testing)
+6. [Asynchronous Component Testing](#asynchronous-component-testing)
+7. [Working with Vue Reactivity](#working-with-vue-reactivity)
+
+## Basic Component Testing
+
+Basic approach to testing a component's rendering and structure:
+
+```typescript
+// Example from: src/components/sidebar/SidebarIcon.spec.ts
+import { mount } from '@vue/test-utils'
+import SidebarIcon from './SidebarIcon.vue'
+
+describe('SidebarIcon', () => {
+  const exampleProps = {
+    icon: 'pi pi-cog',
+    selected: false
+  }
+
+  const mountSidebarIcon = (props, options = {}) => {
+    return mount(SidebarIcon, {
+      props: { ...exampleProps, ...props },
+      ...options
+    })
+  }
+
+  it('renders label', () => {
+    const wrapper = mountSidebarIcon({})
+    expect(wrapper.find('.p-button.p-component').exists()).toBe(true)
+    expect(wrapper.find('.p-button-label').exists()).toBe(true)
+  })
+})
+```
+
+## PrimeVue Components Testing
+
+Setting up and testing PrimeVue components:
+
+```typescript
+// Example from: src/components/common/ColorCustomizationSelector.spec.ts
+import { mount } from '@vue/test-utils'
+import ColorPicker from 'primevue/colorpicker'
+import PrimeVue from 'primevue/config'
+import SelectButton from 'primevue/selectbutton'
+import { createApp } from 'vue'
+
+import ColorCustomizationSelector from './ColorCustomizationSelector.vue'
+
+describe('ColorCustomizationSelector', () => {
+  beforeEach(() => {
+    // Setup PrimeVue
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
+
+  const mountComponent = (props = {}) => {
+    return mount(ColorCustomizationSelector, {
+      global: {
+        plugins: [PrimeVue],
+        components: { SelectButton, ColorPicker }
+      },
+      props: {
+        modelValue: null,
+        colorOptions: [
+          { name: 'Blue', value: '#0d6efd' },
+          { name: 'Green', value: '#28a745' }
+        ],
+        ...props
+      }
+    })
+  }
+  
+  it('initializes with predefined color when provided', async () => {
+    const wrapper = mountComponent({
+      modelValue: '#0d6efd'
+    })
+
+    await nextTick()
+    const selectButton = wrapper.findComponent(SelectButton)
+    expect(selectButton.props('modelValue')).toEqual({
+      name: 'Blue',
+      value: '#0d6efd'
+    })
+  })
+})
+```
+
+## Tooltip Directives
+
+Testing components with tooltip directives:
+
+```typescript
+// Example from: src/components/sidebar/SidebarIcon.spec.ts
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+
+describe('SidebarIcon with tooltip', () => {
+  it('shows tooltip on hover', async () => {
+    const tooltipShowDelay = 300
+    const tooltipText = 'Settings'
+    
+    const wrapper = mount(SidebarIcon, {
+      global: {
+        plugins: [PrimeVue],
+        directives: { tooltip: Tooltip }
+      },
+      props: { 
+        icon: 'pi pi-cog',
+        selected: false,
+        tooltip: tooltipText 
+      }
+    })
+
+    // Hover over the icon
+    await wrapper.trigger('mouseenter')
+    await new Promise((resolve) => setTimeout(resolve, tooltipShowDelay + 16))
+
+    const tooltipElAfterHover = document.querySelector('[role="tooltip"]')
+    expect(tooltipElAfterHover).not.toBeNull()
+  })
+
+  it('sets aria-label attribute when tooltip is provided', () => {
+    const tooltipText = 'Settings'
+    const wrapper = mount(SidebarIcon, {
+      global: {
+        plugins: [PrimeVue],
+        directives: { tooltip: Tooltip }
+      },
+      props: { 
+        icon: 'pi pi-cog', 
+        selected: false,
+        tooltip: tooltipText 
+      }
+    })
+    
+    expect(wrapper.attributes('aria-label')).toEqual(tooltipText)
+  })
+})
+```
+
+## Component Events Testing
+
+Testing component events:
+
+```typescript
+// Example from: src/components/common/ColorCustomizationSelector.spec.ts
+it('emits update when predefined color is selected', async () => {
+  const wrapper = mountComponent()
+  const selectButton = wrapper.findComponent(SelectButton)
+
+  await selectButton.setValue(colorOptions[0])
+
+  expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#0d6efd'])
+})
+
+it('emits update when custom color is changed', async () => {
+  const wrapper = mountComponent()
+  const selectButton = wrapper.findComponent(SelectButton)
+
+  // Select custom option
+  await selectButton.setValue({ name: '_custom', value: '' })
+
+  // Change custom color
+  const colorPicker = wrapper.findComponent(ColorPicker)
+  await colorPicker.setValue('ff0000')
+
+  expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#ff0000'])
+})
+```
+
+## User Interaction Testing
+
+Testing user interactions:
+
+```typescript
+// Example from: src/components/common/EditableText.spec.ts
+describe('EditableText', () => {
+  it('switches to edit mode on click', async () => {
+    const wrapper = mount(EditableText, {
+      props: {
+        modelValue: 'Initial Text',
+        editable: true
+      }
+    })
+
+    // Initially in view mode
+    expect(wrapper.find('input').exists()).toBe(false)
+    
+    // Click to edit
+    await wrapper.find('.editable-text').trigger('click')
+    
+    // Should switch to edit mode
+    expect(wrapper.find('input').exists()).toBe(true)
+    expect(wrapper.find('input').element.value).toBe('Initial Text')
+  })
+
+  it('saves changes on enter key press', async () => {
+    const wrapper = mount(EditableText, {
+      props: {
+        modelValue: 'Initial Text',
+        editable: true
+      }
+    })
+
+    // Switch to edit mode
+    await wrapper.find('.editable-text').trigger('click')
+    
+    // Change input value
+    const input = wrapper.find('input')
+    await input.setValue('New Text')
+    
+    // Press enter to save
+    await input.trigger('keydown.enter')
+    
+    // Check if event was emitted with new value
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['New Text'])
+    
+    // Should switch back to view mode
+    expect(wrapper.find('input').exists()).toBe(false)
+  })
+})
+```
+
+## Asynchronous Component Testing
+
+Testing components with async behavior:
+
+```typescript
+// Example from: src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
+import { nextTick } from 'vue'
+
+it('shows dropdown options when clicked', async () => {
+  const wrapper = mount(PackVersionSelectorPopover, {
+    props: {
+      versions: ['1.0.0', '1.1.0', '2.0.0'],
+      selectedVersion: '1.1.0'
+    }
+  })
+  
+  // Initially dropdown should be hidden
+  expect(wrapper.find('.p-dropdown-panel').isVisible()).toBe(false)
+  
+  // Click dropdown
+  await wrapper.find('.p-dropdown').trigger('click')
+  await nextTick() // Wait for Vue to update the DOM
+  
+  // Dropdown should be visible now
+  expect(wrapper.find('.p-dropdown-panel').isVisible()).toBe(true)
+  
+  // Options should match the provided versions
+  const options = wrapper.findAll('.p-dropdown-item')
+  expect(options.length).toBe(3)
+  expect(options[0].text()).toBe('1.0.0')
+  expect(options[1].text()).toBe('1.1.0')
+  expect(options[2].text()).toBe('2.0.0')
+})
+```
+
+## Working with Vue Reactivity
+
+Testing components with complex reactive behavior can be challenging. Here are patterns to help manage reactivity issues in tests:
+
+### Helper Function for Waiting on Reactivity
+
+Use a helper function to wait for both promises and the Vue reactivity cycle:
+
+```typescript
+// Example from: src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
+const waitForPromises = async () => {
+  // Wait for any promises in the microtask queue
+  await new Promise((resolve) => setTimeout(resolve, 16))
+  // Wait for Vue to update the DOM
+  await nextTick()
+}
+
+it('fetches versions on mount', async () => {
+  mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+  
+  mountComponent()
+  await waitForPromises() // Wait for async operations and reactivity
+
+  expect(mockGetPackVersions).toHaveBeenCalledWith(mockNodePack.id)
+})
+```
+
+### Testing Components with Async Lifecycle Hooks
+
+When components use `onMounted` or other lifecycle hooks with async operations:
+
+```typescript
+it('shows loading state while fetching versions', async () => {
+  // Delay the promise resolution
+  mockGetPackVersions.mockImplementationOnce(
+    () => new Promise((resolve) => 
+      setTimeout(() => resolve(defaultMockVersions), 1000)
+    )
+  )
+
+  const wrapper = mountComponent()
+  
+  // Check loading state before promises resolve
+  expect(wrapper.text()).toContain('Loading versions...')
+})
+```
+
+### Testing Prop Changes
+
+Test components' reactivity to prop changes:
+
+```typescript
+// Example from: src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
+it('is reactive to nodePack prop changes', async () => {
+  // Set up the mock for the initial fetch
+  mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+  const wrapper = mountComponent()
+  await waitForPromises()
+
+  // Set up the mock for the second fetch after prop change
+  mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+  // Update the nodePack prop
+  const newNodePack = { ...mockNodePack, id: 'new-test-pack' }
+  await wrapper.setProps({ nodePack: newNodePack })
+  await waitForPromises()
+
+  // Should fetch versions for the new nodePack
+  expect(mockGetPackVersions).toHaveBeenCalledWith(newNodePack.id)
+})
+```
+
+### Handling Computed Properties
+
+Testing components with computed properties that depend on async data:
+
+```typescript
+it('displays special options and version options in the listbox', async () => {
+  mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+  
+  const wrapper = mountComponent()
+  await waitForPromises() // Wait for data fetching and computed property updates
+  
+  const listbox = wrapper.findComponent(Listbox)
+  const options = listbox.props('options')!
+  
+  // Now options should be populated through computed properties
+  expect(options.length).toBe(defaultMockVersions.length + 2)
+})
+```
+
+### Common Reactivity Pitfalls
+
+1. **Not waiting for all promises**: Ensure you wait for both component promises and Vue's reactivity system
+2. **Timing issues with component mounting**: Components might not be fully mounted when assertions run
+3. **Async lifecycle hooks**: Components using async `onMounted` require careful handling
+4. **PrimeVue components**: PrimeVue components often have their own internal state and reactivity that needs time to update
+5. **Computed properties depending on async data**: Always ensure async data is loaded before testing computed properties
+
+By using the `waitForPromises` helper and being mindful of these patterns, you can write more robust tests for components with complex reactivity.

tests-ui/store-testing.md

@@ -0,0 +1,280 @@
+# Pinia Store Testing Guide
+
+This guide covers patterns and examples for testing Pinia stores in the ComfyUI Frontend codebase.
+
+## Table of Contents
+
+1. [Setting Up Store Tests](#setting-up-store-tests)
+2. [Testing Store State](#testing-store-state)
+3. [Testing Store Actions](#testing-store-actions)
+4. [Testing Store Getters](#testing-store-getters)
+5. [Mocking Dependencies in Stores](#mocking-dependencies-in-stores)
+6. [Testing Store Watchers](#testing-store-watchers)
+7. [Testing Store Integration](#testing-store-integration)
+
+## Setting Up Store Tests
+
+Basic setup for testing Pinia stores:
+
+```typescript
+// Example from: tests-ui/tests/store/workflowStore.test.ts
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useWorkflowStore } from '@/stores/workflowStore'
+
+describe('useWorkflowStore', () => {
+  let store: ReturnType<typeof useWorkflowStore>
+
+  beforeEach(() => {
+    // Create a fresh pinia and activate it for each test
+    setActivePinia(createPinia())
+    
+    // Initialize the store
+    store = useWorkflowStore()
+    
+    // Clear any mocks
+    vi.clearAllMocks()
+  })
+
+  it('should initialize with default state', () => {
+    expect(store.workflows).toEqual([])
+    expect(store.activeWorkflow).toBeUndefined()
+    expect(store.openWorkflows).toEqual([])
+  })
+})
+```
+
+## Testing Store State
+
+Testing store state changes:
+
+```typescript
+// Example from: tests-ui/tests/store/workflowStore.test.ts
+it('should create a temporary workflow with a unique path', () => {
+  const workflow = store.createTemporary()
+  expect(workflow.path).toBe('workflows/Unsaved Workflow.json')
+
+  const workflow2 = store.createTemporary()
+  expect(workflow2.path).toBe('workflows/Unsaved Workflow (2).json')
+})
+
+it('should create a temporary workflow not clashing with persisted workflows', async () => {
+  await syncRemoteWorkflows(['a.json'])
+  const workflow = store.createTemporary('a.json')
+  expect(workflow.path).toBe('workflows/a (2).json')
+})
+```
+
+## Testing Store Actions
+
+Testing store actions:
+
+```typescript
+// Example from: tests-ui/tests/store/workflowStore.test.ts
+describe('openWorkflow', () => {
+  it('should load and open a temporary workflow', async () => {
+    // Create a test workflow
+    const workflow = store.createTemporary('test.json')
+    const mockWorkflowData = { nodes: [], links: [] }
+
+    // Mock the load response
+    vi.spyOn(workflow, 'load').mockImplementation(async () => {
+      workflow.changeTracker = { activeState: mockWorkflowData } as any
+      return workflow as LoadedComfyWorkflow
+    })
+
+    // Open the workflow
+    await store.openWorkflow(workflow)
+
+    // Verify the workflow is now active
+    expect(store.activeWorkflow?.path).toBe(workflow.path)
+
+    // Verify the workflow is in the open workflows list
+    expect(store.isOpen(workflow)).toBe(true)
+  })
+
+  it('should not reload an already active workflow', async () => {
+    const workflow = await store.createTemporary('test.json').load()
+    vi.spyOn(workflow, 'load')
+
+    // Set as active workflow
+    store.activeWorkflow = workflow
+
+    await store.openWorkflow(workflow)
+
+    // Verify load was not called
+    expect(workflow.load).not.toHaveBeenCalled()
+  })
+})
+```
+
+## Testing Store Getters
+
+Testing store getters:
+
+```typescript
+// Example from: tests-ui/tests/store/modelStore.test.ts
+describe('getters', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    store = useModelStore()
+    
+    // Set up test data
+    store.models = {
+      checkpoints: [
+        { name: 'model1.safetensors', path: 'models/checkpoints/model1.safetensors' },
+        { name: 'model2.ckpt', path: 'models/checkpoints/model2.ckpt' }
+      ],
+      loras: [
+        { name: 'lora1.safetensors', path: 'models/loras/lora1.safetensors' }
+      ]
+    }
+    
+    // Mock API
+    vi.mocked(api.getModelInfo).mockImplementation(async (modelName) => {
+      if (modelName.includes('model1')) {
+        return { info: { resolution: 768 } }
+      }
+      return { info: { resolution: 512 } }
+    })
+  })
+
+  it('should return models grouped by type', () => {
+    expect(store.modelsByType.checkpoints.length).toBe(2)
+    expect(store.modelsByType.loras.length).toBe(1)
+  })
+
+  it('should filter models by name', () => {
+    store.searchTerm = 'model1'
+    expect(store.filteredModels.checkpoints.length).toBe(1)
+    expect(store.filteredModels.checkpoints[0].name).toBe('model1.safetensors')
+  })
+})
+```
+
+## Mocking Dependencies in Stores
+
+Mocking API and other dependencies:
+
+```typescript
+// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Add mock for api at the top of the file
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getUserData: vi.fn(),
+    storeUserData: vi.fn(),
+    listUserDataFullInfo: vi.fn(),
+    apiURL: vi.fn(),
+    addEventListener: vi.fn()
+  }
+}))
+
+// Mock comfyApp globally for the store setup
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: null // Start with canvas potentially undefined or null
+  }
+}))
+
+describe('syncWorkflows', () => {
+  const syncRemoteWorkflows = async (filenames: string[]) => {
+    vi.mocked(api.listUserDataFullInfo).mockResolvedValue(
+      filenames.map((filename) => ({
+        path: filename,
+        modified: new Date().getTime(),
+        size: 1 // size !== -1 for remote workflows
+      }))
+    )
+    return await store.syncWorkflows()
+  }
+
+  it('should sync workflows', async () => {
+    await syncRemoteWorkflows(['a.json', 'b.json'])
+    expect(store.workflows.length).toBe(2)
+  })
+})
+```
+
+## Testing Store Watchers
+
+Testing store watchers and reactive behavior:
+
+```typescript
+// Example from: tests-ui/tests/store/workflowStore.test.ts
+import { nextTick } from 'vue'
+
+describe('Subgraphs', () => {
+  it('should update automatically when activeWorkflow changes', async () => {
+    // Arrange: Set initial canvas state
+    const initialSubgraph = {
+      name: 'Initial Subgraph',
+      pathToRootGraph: [{ name: 'Root' }, { name: 'Initial Subgraph' }],
+      isRootGraph: false
+    }
+    vi.mocked(comfyApp.canvas).subgraph = initialSubgraph as any
+
+    // Trigger initial update
+    store.updateActiveGraph()
+    await nextTick()
+
+    // Verify initial state
+    expect(store.isSubgraphActive).toBe(true)
+    expect(store.subgraphNamePath).toEqual(['Initial Subgraph'])
+
+    // Act: Change the active workflow and canvas state
+    const workflow2 = store.createTemporary('workflow2.json')
+    vi.spyOn(workflow2, 'load').mockImplementation(async () => {
+      workflow2.changeTracker = { activeState: {} } as any
+      workflow2.originalContent = '{}'
+      workflow2.content = '{}'
+      return workflow2 as LoadedComfyWorkflow
+    })
+
+    // Change canvas state
+    vi.mocked(comfyApp.canvas).subgraph = undefined
+
+    await store.openWorkflow(workflow2)
+    await nextTick() // Allow watcher to trigger
+
+    // Assert: Check state was updated by the watcher
+    expect(store.isSubgraphActive).toBe(false)
+    expect(store.subgraphNamePath).toEqual([])
+  })
+})
+```
+
+## Testing Store Integration
+
+Testing store integration with other parts of the application:
+
+```typescript
+// Example from: tests-ui/tests/store/workflowStore.test.ts
+describe('renameWorkflow', () => {
+  it('should rename workflow and update bookmarks', async () => {
+    const workflow = store.createTemporary('dir/test.json')
+    const bookmarkStore = useWorkflowBookmarkStore()
+
+    // Set up initial bookmark
+    expect(workflow.path).toBe('workflows/dir/test.json')
+    await bookmarkStore.setBookmarked(workflow.path, true)
+    expect(bookmarkStore.isBookmarked(workflow.path)).toBe(true)
+
+    // Mock super.rename
+    vi.spyOn(Object.getPrototypeOf(workflow), 'rename').mockImplementation(
+      async function (this: any, newPath: string) {
+        this.path = newPath
+        return this
+      } as any
+    )
+
+    // Perform rename
+    const newPath = 'workflows/dir/renamed.json'
+    await store.renameWorkflow(workflow, newPath)
+
+    // Check that bookmark was transferred
+    expect(bookmarkStore.isBookmarked(newPath)).toBe(true)
+    expect(bookmarkStore.isBookmarked('workflows/dir/test.json')).toBe(false)
+  })
+})
+```

tests-ui/tests/components/ChatHistoryWidget.spec.ts

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { edit: 'Edit' },
+      chatHistory: {
+        cancelEdit: 'Cancel edit',
+        cancelEditTooltip: 'Cancel edit'
+      }
+    }
+  }
+})
+
+vi.mock('@/components/graph/widgets/chatHistory/CopyButton.vue', () => ({
+  default: {
+    name: 'CopyButton',
+    template: '<div class="mock-copy-button"></div>',
+    props: ['text']
+  }
+}))
+
+vi.mock('@/components/graph/widgets/chatHistory/ResponseBlurb.vue', () => ({
+  default: {
+    name: 'ResponseBlurb',
+    template: '<div class="mock-response-blurb"><slot /></div>',
+    props: ['text']
+  }
+}))
+
+describe('ChatHistoryWidget.vue', () => {
+  const mockHistory = JSON.stringify([
+    { prompt: 'Test prompt', response: 'Test response', response_id: '123' }
+  ])
+
+  const mountWidget = (props: { history: string; widget?: any }) => {
+    return mount(ChatHistoryWidget, {
+      props,
+      global: {
+        plugins: [i18n],
+        stubs: {
+          Button: {
+            template: '<button><slot /></button>',
+            props: ['icon', 'aria-label']
+          },
+          ScrollPanel: { template: '<div><slot /></div>' }
+        }
+      }
+    })
+  }
+
+  it('renders chat history correctly', () => {
+    const wrapper = mountWidget({ history: mockHistory })
+    expect(wrapper.text()).toContain('Test prompt')
+    expect(wrapper.text()).toContain('Test response')
+  })
+
+  it('handles empty history', () => {
+    const wrapper = mountWidget({ history: '[]' })
+    expect(wrapper.find('.mb-4').exists()).toBe(false)
+  })
+
+  it('edits previous prompts', () => {
+    const mockWidget = {
+      node: { widgets: [{ name: 'prompt', value: '' }] }
+    }
+
+    const wrapper = mountWidget({ history: mockHistory, widget: mockWidget })
+    const vm = wrapper.vm as any
+    vm.handleEdit(0)
+
+    expect(mockWidget.node.widgets[0].value).toContain('Test prompt')
+    expect(mockWidget.node.widgets[0].value).toContain('starting_point_id')
+  })
+
+  it('cancels editing correctly', () => {
+    const mockWidget = {
+      node: { widgets: [{ name: 'prompt', value: 'Original value' }] }
+    }
+
+    const wrapper = mountWidget({ history: mockHistory, widget: mockWidget })
+    const vm = wrapper.vm as any
+
+    vm.handleEdit(0)
+    vm.handleCancelEdit()
+
+    expect(mockWidget.node.widgets[0].value).toBe('Original value')
+  })
+})

tests-ui/tests/composables/useNodeChatHistory.test.ts

@@ -0,0 +1,63 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
+
+vi.mock('@/composables/widgets/useChatHistoryWidget', () => ({
+  useChatHistoryWidget: () => {
+    return (node: any, inputSpec: any) => {
+      const widget = {
+        name: inputSpec.name,
+        type: inputSpec.type
+      }
+
+      if (!node.widgets) {
+        node.widgets = []
+      }
+      node.widgets.push(widget)
+
+      return widget
+    }
+  }
+}))
+
+// Mock LGraphNode type
+type MockNode = {
+  widgets: Array<{ name: string; type: string }>
+  setDirtyCanvas: ReturnType<typeof vi.fn>
+  addCustomWidget: ReturnType<typeof vi.fn>
+  [key: string]: any
+}
+
+describe('useNodeChatHistory', () => {
+  const mockNode = {
+    widgets: [],
+    setDirtyCanvas: vi.fn(),
+    addCustomWidget: vi.fn()
+  } as unknown as LGraphNode & MockNode
+
+  beforeEach(() => {
+    mockNode.widgets = []
+    mockNode.setDirtyCanvas.mockClear()
+    mockNode.addCustomWidget.mockClear()
+  })
+
+  it('adds chat history widget to node', () => {
+    const { showChatHistory } = useNodeChatHistory()
+    showChatHistory(mockNode)
+
+    expect(mockNode.widgets.length).toBe(1)
+    expect(mockNode.widgets[0].name).toBe('$$node-chat-history')
+    expect(mockNode.setDirtyCanvas).toHaveBeenCalled()
+  })
+
+  it('removes chat history widget from node', () => {
+    const { showChatHistory, removeChatHistory } = useNodeChatHistory()
+    showChatHistory(mockNode)
+
+    expect(mockNode.widgets.length).toBe(1)
+
+    removeChatHistory(mockNode)
+    expect(mockNode.widgets.length).toBe(0)
+  })
+})

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

@@ -0,0 +1,82 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useExecutionStore } from '@/stores/executionStore'
+
+// Remove any previous global types
+declare global {
+  // Empty interface to override any previous declarations
+  interface Window {}
+}
+
+const mockShowChatHistory = vi.fn()
+vi.mock('@/composables/node/useNodeChatHistory', () => ({
+  useNodeChatHistory: () => ({
+    showChatHistory: mockShowChatHistory
+  })
+}))
+
+vi.mock('@/composables/node/useNodeProgressText', () => ({
+  useNodeProgressText: () => ({
+    showTextPreview: vi.fn()
+  })
+}))
+
+// Create a local mock instead of using global to avoid conflicts
+const mockApp = {
+  graph: {
+    getNodeById: vi.fn()
+  }
+}
+
+describe('executionStore - display_component handling', () => {
+  function createDisplayComponentEvent(
+    nodeId: string,
+    component = 'ChatHistoryWidget'
+  ) {
+    return new CustomEvent('display_component', {
+      detail: {
+        node_id: nodeId,
+        component,
+        props: {
+          history: JSON.stringify([{ prompt: 'Test', response: 'Response' }])
+        }
+      }
+    })
+  }
+
+  function handleDisplayComponentMessage(event: CustomEvent) {
+    const { node_id, component } = event.detail
+    const node = mockApp.graph.getNodeById(node_id)
+    if (node && component === 'ChatHistoryWidget') {
+      mockShowChatHistory(node)
+    }
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useExecutionStore()
+    vi.clearAllMocks()
+  })
+
+  it('handles ChatHistoryWidget display_component messages', () => {
+    const mockNode = { id: '123' }
+    mockApp.graph.getNodeById.mockReturnValue(mockNode)
+
+    const event = createDisplayComponentEvent('123')
+    handleDisplayComponentMessage(event)
+
+    expect(mockApp.graph.getNodeById).toHaveBeenCalledWith('123')
+    expect(mockShowChatHistory).toHaveBeenCalledWith(mockNode)
+  })
+
+  it('does nothing if node is not found', () => {
+    mockApp.graph.getNodeById.mockReturnValue(null)
+
+    const event = createDisplayComponentEvent('non-existent')
+    handleDisplayComponentMessage(event)
+
+    expect(mockApp.graph.getNodeById).toHaveBeenCalledWith('non-existent')
+    expect(mockShowChatHistory).not.toHaveBeenCalled()
+  })
+})

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

@@ -271,7 +271,7 @@ describe('useWorkflowStore', () => {
 
       // Set up initial bookmark
       expect(workflow.path).toBe('workflows/dir/test.json')
-      bookmarkStore.setBookmarked(workflow.path, true)
+      await bookmarkStore.setBookmarked(workflow.path, true)
       expect(bookmarkStore.isBookmarked(workflow.path)).toBe(true)
 
       // Mock super.rename
@@ -351,7 +351,7 @@ describe('useWorkflowStore', () => {
       vi.spyOn(workflow, 'delete').mockResolvedValue()
 
       // Bookmark the workflow
-      bookmarkStore.setBookmarked(workflow.path, true)
+      await bookmarkStore.setBookmarked(workflow.path, true)
       expect(bookmarkStore.isBookmarked(workflow.path)).toBe(true)
 
       // Delete the workflow

tests-ui/unit-testing.md

@@ -0,0 +1,251 @@
+# Unit Testing Guide
+
+This guide covers patterns and examples for unit testing utilities, composables, and other non-component code in the ComfyUI Frontend codebase.
+
+## Table of Contents
+
+1. [Testing Vue Composables with Reactivity](#testing-vue-composables-with-reactivity)
+2. [Working with LiteGraph and Nodes](#working-with-litegraph-and-nodes)
+3. [Working with Workflow JSON Files](#working-with-workflow-json-files)
+4. [Mocking the API Object](#mocking-the-api-object)
+5. [Mocking Lodash Functions](#mocking-lodash-functions)
+6. [Testing with Debounce and Throttle](#testing-with-debounce-and-throttle)
+7. [Mocking Node Definitions](#mocking-node-definitions)
+
+
+## Testing Vue Composables with Reactivity
+
+Testing Vue composables requires handling reactivity correctly:
+
+```typescript
+// Example from: tests-ui/tests/composables/useServerLogs.test.ts
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { useServerLogs } from '@/composables/useServerLogs'
+
+// Mock dependencies
+vi.mock('@/scripts/api', () => ({
+  api: {
+    subscribeLogs: vi.fn()
+  }
+}))
+
+describe('useServerLogs', () => {
+  it('should update reactive logs when receiving events', async () => {
+    const { logs, startListening } = useServerLogs()
+    await startListening()
+
+    // Simulate log event handler being called
+    const mockHandler = vi.mocked(useEventListener).mock.calls[0][2]
+    mockHandler(new CustomEvent('logs', {
+      detail: {
+        type: 'logs',
+        entries: [{ m: 'Log message' }]
+      }
+    }))
+    
+    // Must wait for Vue reactivity to update
+    await nextTick()
+    
+    expect(logs.value).toEqual(['Log message'])
+  })
+})
+```
+
+## Working with LiteGraph and Nodes
+
+Testing LiteGraph-related functionality:
+
+```typescript
+// Example from: tests-ui/tests/litegraph.test.ts
+import { LGraph, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
+import { describe, expect, it } from 'vitest'
+
+// Create dummy node for testing
+class DummyNode extends LGraphNode {
+  constructor() {
+    super('dummy')
+  }
+}
+
+describe('LGraph', () => {
+  it('should serialize graph nodes', async () => {
+    // Register node type
+    LiteGraph.registerNodeType('dummy', DummyNode)
+    
+    // Create graph with nodes
+    const graph = new LGraph()
+    const node = new DummyNode()
+    graph.add(node)
+    
+    // Test serialization
+    const result = graph.serialize()
+    expect(result.nodes).toHaveLength(1)
+    expect(result.nodes[0].type).toBe('dummy')
+  })
+})
+```
+
+## Working with Workflow JSON Files
+
+Testing with ComfyUI workflow files:
+
+```typescript
+// Example from: tests-ui/tests/comfyWorkflow.test.ts
+import { describe, expect, it } from 'vitest'
+import { validateComfyWorkflow } from '@/schemas/comfyWorkflowSchema'
+import { defaultGraph } from '@/scripts/defaultGraph'
+
+describe('workflow validation', () => {
+  it('should validate default workflow', async () => {
+    const validWorkflow = JSON.parse(JSON.stringify(defaultGraph))
+    
+    // Validate workflow
+    const result = await validateComfyWorkflow(validWorkflow)
+    expect(result).not.toBeNull()
+  })
+  
+  it('should handle position format conversion', async () => {
+    const workflow = JSON.parse(JSON.stringify(defaultGraph))
+    
+    // Legacy position format as object
+    workflow.nodes[0].pos = { '0': 100, '1': 200 }
+    
+    // Should convert to array format
+    const result = await validateComfyWorkflow(workflow)
+    expect(result.nodes[0].pos).toEqual([100, 200])
+  })
+})
+```
+
+## Mocking the API Object
+
+Mocking the ComfyUI API object:
+
+```typescript
+// Example from: tests-ui/tests/composables/useServerLogs.test.ts
+import { describe, expect, it, vi } from 'vitest'
+import { api } from '@/scripts/api'
+
+// Mock the api object
+vi.mock('@/scripts/api', () => ({
+  api: {
+    subscribeLogs: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
+
+it('should subscribe to logs API', () => {
+  // Call function that uses the API
+  startListening()
+  
+  // Verify API was called correctly
+  expect(api.subscribeLogs).toHaveBeenCalledWith(true)
+})
+```
+
+## Mocking Lodash Functions
+
+Mocking lodash functions like debounce:
+
+```typescript
+// Mock debounce to execute immediately
+import { debounce } from 'lodash-es'
+
+vi.mock('lodash-es', () => ({
+  debounce: vi.fn((fn) => {
+    // Return function that calls the input function immediately
+    const mockDebounced = (...args: any[]) => fn(...args)
+    // Add cancel method that lodash debounced functions have
+    mockDebounced.cancel = vi.fn()
+    return mockDebounced
+  })
+}))
+
+describe('Function using debounce', () => {
+  it('calls debounced function immediately in tests', () => {
+    const mockFn = vi.fn()
+    const debouncedFn = debounce(mockFn, 1000)
+    
+    debouncedFn()
+    
+    // No need to wait - our mock makes it execute immediately
+    expect(mockFn).toHaveBeenCalled()
+  })
+})
+```
+
+## Testing with Debounce and Throttle
+
+When you need to test real debounce/throttle behavior:
+
+```typescript
+// Example from: tests-ui/tests/composables/useWorkflowAutoSave.test.ts
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('debounced function', () => {
+  beforeEach(() => {
+    vi.useFakeTimers() // Use fake timers to control time
+  })
+
+  afterEach(() => {
+    vi.useRealTimers() 
+  })
+
+  it('should debounce function calls', () => {
+    const mockFn = vi.fn()
+    const debouncedFn = debounce(mockFn, 1000)
+    
+    // Call multiple times
+    debouncedFn()
+    debouncedFn()
+    debouncedFn()
+    
+    // Function not called yet (debounced)
+    expect(mockFn).not.toHaveBeenCalled()
+    
+    // Advance time just before debounce period
+    vi.advanceTimersByTime(999)
+    expect(mockFn).not.toHaveBeenCalled()
+    
+    // Advance to debounce completion
+    vi.advanceTimersByTime(1)
+    expect(mockFn).toHaveBeenCalledTimes(1)
+  })
+})
+```
+
+## Mocking Node Definitions
+
+Creating mock node definitions for testing:
+
+```typescript
+// Example from: tests-ui/tests/apiTypes.test.ts
+import { describe, expect, it } from 'vitest'
+import { type ComfyNodeDef, validateComfyNodeDef } from '@/schemas/nodeDefSchema'
+
+// Create a complete mock node definition
+const EXAMPLE_NODE_DEF: ComfyNodeDef = {
+  input: {
+    required: {
+      ckpt_name: [['model1.safetensors', 'model2.ckpt'], {}]
+    }
+  },
+  output: ['MODEL', 'CLIP', 'VAE'],
+  output_is_list: [false, false, false],
+  output_name: ['MODEL', 'CLIP', 'VAE'],
+  name: 'CheckpointLoaderSimple',
+  display_name: 'Load Checkpoint',
+  description: '',
+  python_module: 'nodes',
+  category: 'loaders',
+  output_node: false,
+  experimental: false,
+  deprecated: false
+}
+
+it('should validate node definition', () => {
+  expect(validateComfyNodeDef(EXAMPLE_NODE_DEF)).not.toBeNull()
+})
+```

vite.config.mts

@@ -4,6 +4,8 @@ import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import vueDevTools from 'vite-plugin-vue-devtools'
 import type { UserConfigExport } from 'vitest/config'
 
 import {
@@ -19,6 +21,7 @@ const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true'
 // vite dev server will listen on all addresses, including LAN and public addresses
 const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
 const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
+const DISABLE_VUE_PLUGINS = process.env.DISABLE_VUE_PLUGINS === 'true'
 
 const DEV_SERVER_COMFYUI_URL =
   process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
@@ -69,7 +72,9 @@ export default defineConfig({
   },
 
   plugins: [
-    vue(),
+    ...(!DISABLE_VUE_PLUGINS
+      ? [vueDevTools(), vue(), createHtmlPlugin({})]
+      : [vue()]),
     comfyAPIPlugin(IS_DEV),
     generateImportMapPlugin([
       { name: 'vue', pattern: /[\\/]node_modules[\\/]vue[\\/]/ },