Update locales [skip ci]

Co-authored-by: webfiltered <176114999+webfiltered@users.noreply.github.com>

.github/workflows/release.yaml

@@ -29,6 +29,7 @@ jobs:
           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

.github/workflows/test-ui.yaml

@@ -39,7 +39,6 @@ jobs:
       - name: Build ComfyUI_frontend
         run: |
           npm ci
-          npm run fetch-templates
           npm run build
         working-directory: ComfyUI_frontend
 

.github/workflows/update-electron-types.yaml

@@ -32,7 +32,7 @@ jobs:
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v7
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'
           title: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'
           body: |

.gitignore

@@ -55,3 +55,6 @@ dist.zip
 
 # Temporary repository directory
 templates_repo/
+
+# Vite’s timestamped config modules
+vite.config.mts.timestamp-*.mjs

.i18nrc.cjs

@@ -4,7 +4,7 @@
 const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
-  modelName: 'gpt-4',
+  modelName: 'gpt-4.1',
   splitToken: 1024,
   entry: 'src/locales/en',
   entryLocale: 'en',

README.md

@@ -67,448 +67,19 @@ The development of successive minor versions overlaps. For example, while versio
 | 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
 | 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
 
-## Release Summary
+## Contributing
 
-### Major features
+We're building this frontend together and would love your help — no matter how you'd like to pitch in! You don't need to write code to make a difference.
 
-<details id='feature-native-translation'>
-  <summary>v1.5: Native translation (i18n)</summary>
+Here are some ways to get involved:
 
-  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
-  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
-  implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
+- **Pull Requests:** Add features, fix bugs, or improve code health. Browse [issues](https://github.com/Comfy-Org/ComfyUI_frontend/issues) for inspiration.
+- **Vote on Features:** Give a 👍 to the feature requests you care about to help us prioritize.
+- **Verify Bugs:** Try reproducing reported issues and share your results (even if the bug doesn't occur!).
+- **Community Support:** Hop into our [Discord](https://www.comfy.org/discord) to answer questions or get help.
+- **Share & Advocate:** Tell your friends, tweet about us, or share tips to support the project.
 
-  More details available here: https://blog.comfy.org/p/native-localization-support-i18n
-</details>
-
-<details id='feature-mask-editor'>
-  <summary>v1.4: New mask editor</summary>
-
-  https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
-
-  ![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
-</details>
-
-<details id='feature-integrated-server-terminal'>
-  <summary>v1.3.22: Integrated server terminal</summary>
-
-Press Ctrl + ` to toggle integrated terminal.
-
-https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
-</details>
-
-<details id='feature-keybinding-customization'>
-  <summary>v1.3.7: Keybinding customization</summary>
-
-## Basic UI
-![image](https://github.com/user-attachments/assets/c84a1609-3880-48e0-a746-011f36beda68)
-
-## Reset button
-![image](https://github.com/user-attachments/assets/4d2922da-bb4f-4f90-8017-a8e4a0db07c7)
-
-## Edit Keybinding
-![image](https://github.com/user-attachments/assets/77626b7a-cb46-48f8-9465-e03120aac66a)
-![image](https://github.com/user-attachments/assets/79131a4e-75c6-4715-bd11-c6aaed887779)
-
-[rec.webm](https://github.com/user-attachments/assets/a3984ed9-eb28-4d47-86c0-7fc3efc2b5d0)
-
-</details>
-
-<details id='feature-node-library-sidebar'>
-  <summary>v1.2.4: Node library sidebar tab</summary>
-
-  #### Drag & Drop
-https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
-
-  #### Filter
-https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
-</details>
-
-<details id='feature-queue-sidebar'>
-  <summary>v1.2.0: Queue/History sidebar tab</summary>
-
-  https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
-</details>
-
-<details id='feature-node-search'>
-  <summary>v1.1.0: Node search box</summary>
-
-  #### Fuzzy search & Node preview
-  ![image](https://github.com/user-attachments/assets/94733e32-ea4e-4a9c-b321-c1a05db48709)
-
-  #### Release link with shift
-  https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
-</details>
-
-### QoL changes
-
-<details id='feature-nested-group'>
-  <summary>v1.3.32: **Litegraph** Nested group</summary>
-
-https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
-</details>
-
-<details id='feature-group-selection'>
-  <summary>v1.3.24: **Litegraph** Group selection</summary>
-
-https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
-</details>
-
-<details id='feature-toggle-link-visibility'>
-  <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
-
-[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
-
-</details>
-
-<details id='feature-auto-widget-conversion'>
-  <summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
-
-Dropping a link of correct type on node widget will automatically convert the widget to input.
-
-[rec.webm](https://github.com/user-attachments/assets/15cea0b0-b225-4bec-af50-2cdb16dc46bf)
-
-</details>
-
-<details id='feature-pan-mode'>
-  <summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
-
-The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
-or by holding the space key.
-
-[rec.webm](https://github.com/user-attachments/assets/c7872532-a2ac-44c1-9e7d-9e03b5d1a80b)
-
-</details>
-
-<details id='feature-shift-drag-link-creation'>
-  <summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
-
-[rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
-
-</details>
-
-<details id='feature-optional-input-donuts'>
-  <summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
-
-![GYEIRidb0AYGO-v](https://github.com/user-attachments/assets/e6cde0b6-654b-4afd-a117-133657a410b1)
-
-</details>
-
-<details id='feature-group-title-edit'>
-  <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
-
-https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
-
-</details>
-
-<details id='feature-group-selection-shortcut'>
-  <summary>v1.2.39: **Litegraph** Group selected nodes with Ctrl + G</summary>
-
-https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
-
-</details>
-
-<details id='feature-node-title-edit'>
-  <summary>v1.2.38: **Litegraph** Double click node title to edit</summary>
-
-https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
-
-</details>
-
-<details id='feature-drag-multi-link'>
-  <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
-
-https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
-
-https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
-
-</details>
-
-<details id='feature-auto-connect-link'>
-  <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
-
-  #### Before
-  https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651
-
-  #### After
-  https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
-</details>
-
-<details id='feature-hide-text-overflow'>
-  <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
-
-  https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
-</details>
-
-### Developer APIs
-
-<details>
-  <summary>v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop</summary>
-
-Several browser-only APIs are not available in ComfyUI desktop's electron environment.
-
-- `window.prompt`
-- `window.confirm`
-- `window.alert`
-
-Please use the following APIs as replacements.
-
-```js
-// window.prompt
-window['app'].extensionManager.dialog
-  .prompt({
-    title: 'Test Prompt',
-    message: 'Test Prompt Message'
-  })
-  .then((value: string) => {
-    // Do something with the value user entered
-  })
-```
-
-![image](https://github.com/user-attachments/assets/c73f74d0-9bb4-4555-8d56-83f1be4a1d7e)
-
-```js
-// window.confirm
-window['app'].extensionManager.dialog
-  .confirm({
-    title: 'Test Confirm',
-    message: 'Test Confirm Message'
-  })
-  .then((value: boolean) => {
-    // Do something with the value user entered
-  })
-```
-
-![image](https://github.com/user-attachments/assets/8dec7a42-7443-4245-85be-ceefb1116e96)
-
-```js
-// window.alert
-window['app'].extensionManager.toast
-  .addAlert("Test Alert")
-```
-
-![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
-
-</details>
-
-<details>
-  <summary>v1.3.34: Register about panel badges</summary>
-
-```js
-app.registerExtension({
-  name: 'TestExtension1',
-  aboutPageBadges: [
-    {
-      label: 'Test Badge',
-      url: 'https://example.com',
-      icon: 'pi pi-box'
-    }
-  ]
-})
-```
-
-![image](https://github.com/user-attachments/assets/099e77ee-16ad-4141-b2fc-5e9d5075188b)
-
-</details>
-
-<details id='extension-api-bottom-panel-tabs'>
-  <summary>v1.3.22: Register bottom panel tabs</summary>
-
-```js
-app.registerExtension({
-  name: 'TestExtension',
-  bottomPanelTabs: [
-    {
-      id: 'TestTab',
-      title: 'Test Tab',
-      type: 'custom',
-      render: (el) => {
-        el.innerHTML = '<div>Custom tab</div>'
-      }
-    }
-  ]
-})
-```
-
-![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64)
-
-</details>
-
-<details id='extension-api-settings'>
-  <summary>v1.3.22: New settings API</summary>
-
-Legacy settings API.
-
-```js
-// Register a new setting
-app.ui.settings.addSetting({
-  id: 'TestSetting',
-  name: 'Test Setting',
-  type: 'text',
-  defaultValue: 'Hello, world!'
-})
-
-// Get the value of a setting
-const value = app.ui.settings.getSettingValue('TestSetting')
-
-// Set the value of a setting
-app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')
-```
-
-New settings API.
-
-```js
-// Register a new setting
-app.registerExtension({
-  name: 'TestExtension1',
-  settings: [
-    {
-      id: 'TestSetting',
-      name: 'Test Setting',
-      type: 'text',
-      defaultValue: 'Hello, world!'
-    }
-  ]
-})
-
-// Get the value of a setting
-const value = app.extensionManager.setting.get('TestSetting')
-
-// Set the value of a setting
-app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
-```
-
-</details>
-
-<details id='extension-api-commands-keybindings'>
-  <summary>v1.3.7: Register commands and keybindings</summary>
-
-  Extensions can call the following API to register commands and keybindings. Do
-  note that keybindings defined in core cannot be overwritten, and some keybindings
-  are reserved by the browser.
-
-```js
-  app.registerExtension({
-    name: 'TestExtension1',
-    commands: [
-      {
-        id: 'TestCommand',
-        function: () => {
-          alert('TestCommand')
-        }
-      }
-    ],
-    keybindings: [
-      {
-        combo: { key: 'k' },
-        commandId: 'TestCommand'
-      }
-    ]
-  })
-```
-
-</details>
-
-<details id='extension-api-topbar-menu'>
-  <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
-
-  Extensions can call the following API to register custom topbar menu items.
-
-```js
-  app.registerExtension({
-    name: 'TestExtension1',
-    commands: [
-      {
-        id: 'foo-id',
-        label: 'foo',
-        function: () => {
-          alert(1)
-        }
-      }
-    ],
-    menuCommands: [
-      {
-        path: ['ext', 'ext2'],
-        commands: ['foo-id']
-      }
-    ]
-  })
-```
-
-![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
-</details>
-
-<details id='extension-api-toast'>
-  <summary>v1.2.27: Extension API to add toast message</summary>i
-
-  Extensions can call the following API to add toast messages.
-
-```js
-  app.extensionManager.toast.add({
-    severity: 'info',
-    summary: 'Loaded!',
-    detail: 'Extension loaded!',
-    life: 3000
-  })
-```
-Documentation of all supported options can be found here: <https://primevue.org/toast/#api.toast.interfaces.ToastMessageOptions>
-
-![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
-</details>
-
-<details id='extension-api-sidebar-tab'>
-  <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
-
-  Extensions now can call the following API to register a sidebar tab.
-
-```js
-  app.extensionManager.registerSidebarTab({
-    id: "search",
-    icon: "pi pi-search",
-    title: "search",
-    tooltip: "search",
-    type: "custom",
-    render: (el) => {
-      el.innerHTML = "<div>Custom search tab</div>";
-    },
-  });
-```
-
-The list of supported icons can be found here: <https://primevue.org/icons/#list>
-
-We will support custom icons later.
-
-![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
-</details>
-
-<details id='extension-api-selection-toolbox'>
-  <summary>v1.10.9: Selection Toolbox API</summary>
-
-Extensions can register commands that appear in the selection toolbox when specific items are selected on the canvas.
-
-```js
-app.registerExtension({
-  name: 'TestExtension1',
-  commands: [
-    {
-      id: 'test.selection.command',
-      label: 'Test Command',
-      icon: 'pi pi-star',
-      function: () => {
-        // Command logic here
-      }
-    }
-  ],
-  // Return an array of command IDs to show in the selection toolbox
-  // when an item is selected
-  getSelectionToolboxCommands: (selectedItem) => ['test.selection.command']
-})
-```
-
-The selection toolbox will display the command button when items are selected:
-![Image](https://github.com/user-attachments/assets/28d91267-c0a9-4bd5-a7c4-36e8ec44c9bd)
-
-</details>
+Have another idea? Drop into Discord or open an issue, and let's chat!
 
 ## Development
 
@@ -557,6 +128,12 @@ After you start the dev server, you should see following logs:
 Make sure your desktop machine and touch device are on the same network. On your touch device,
 navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to access the ComfyUI frontend.
 
+### Recommended Code Editor Configuration
+
+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.
+
 ### Unit Test
 
 - `npm i` to install all dependencies

browser_tests/fixtures/ComfyPage.ts

@@ -463,87 +463,128 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async dragAndDropFile(
-    fileName: string,
+  async dragAndDropExternalResource(
     options: {
+      fileName?: string
+      url?: string
       dropPosition?: Position
     } = {}
   ) {
-    const { dropPosition = { x: 100, y: 100 } } = options
+    const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
 
-    const filePath = this.assetPath(fileName)
+    if (!fileName && !url)
+      throw new Error('Must provide either fileName or url')
 
-    // Read the file content
-    const buffer = fs.readFileSync(filePath)
+    const evaluateParams: {
+      dropPosition: Position
+      fileName?: string
+      fileType?: string
+      buffer?: Uint8Array | number[]
+      url?: string
+    } = { dropPosition }
 
-    // Get file type
-    const getFileType = (fileName: string) => {
-      if (fileName.endsWith('.png')) return 'image/png'
-      if (fileName.endsWith('.webp')) return 'image/webp'
-      if (fileName.endsWith('.webm')) return 'video/webm'
-      if (fileName.endsWith('.json')) return 'application/json'
-      if (fileName.endsWith('.glb')) return 'model/gltf-binary'
-      return 'application/octet-stream'
+    // Dropping a file from the filesystem
+    if (fileName) {
+      const filePath = this.assetPath(fileName)
+      const buffer = fs.readFileSync(filePath)
+
+      const getFileType = (fileName: string) => {
+        if (fileName.endsWith('.png')) return 'image/png'
+        if (fileName.endsWith('.webp')) return 'image/webp'
+        if (fileName.endsWith('.webm')) return 'video/webm'
+        if (fileName.endsWith('.json')) return 'application/json'
+        if (fileName.endsWith('.glb')) return 'model/gltf-binary'
+        return 'application/octet-stream'
+      }
+
+      evaluateParams.fileName = fileName
+      evaluateParams.fileType = getFileType(fileName)
+      evaluateParams.buffer = [...new Uint8Array(buffer)]
     }
 
-    const fileType = getFileType(fileName)
+    // Dropping a URL (e.g., dropping image across browser tabs in Firefox)
+    if (url) evaluateParams.url = url
 
-    await this.page.evaluate(
-      async ({ buffer, fileName, fileType, dropPosition }) => {
-        const file = new File([new Uint8Array(buffer)], fileName, {
-          type: fileType
-        })
-        const dataTransfer = new DataTransfer()
-        dataTransfer.items.add(file)
+    // Execute the drag and drop in the browser
+    await this.page.evaluate(async (params) => {
+      const dataTransfer = new DataTransfer()
 
-        const targetElement = document.elementFromPoint(
-          dropPosition.x,
-          dropPosition.y
-        )
-
-        if (!targetElement) {
-          console.error('No element found at drop position:', dropPosition)
-          return { success: false, error: 'No element at position' }
-        }
-
-        const eventOptions = {
-          bubbles: true,
-          cancelable: true,
-          dataTransfer,
-          clientX: dropPosition.x,
-          clientY: dropPosition.y
-        }
-
-        const dragOverEvent = new DragEvent('dragover', eventOptions)
-        const dropEvent = new DragEvent('drop', eventOptions)
-
-        Object.defineProperty(dropEvent, 'preventDefault', {
-          value: () => {},
-          writable: false
-        })
-        Object.defineProperty(dropEvent, 'stopPropagation', {
-          value: () => {},
-          writable: false
-        })
-
-        targetElement.dispatchEvent(dragOverEvent)
-        targetElement.dispatchEvent(dropEvent)
-
-        return {
-          success: true,
-          targetInfo: {
-            tagName: targetElement.tagName,
-            id: targetElement.id,
-            classList: Array.from(targetElement.classList)
+      // Add file if provided
+      if (params.buffer && params.fileName && params.fileType) {
+        const file = new File(
+          [new Uint8Array(params.buffer)],
+          params.fileName,
+          {
+            type: params.fileType
           }
+        )
+        dataTransfer.items.add(file)
+      }
+
+      // Add URL data if provided
+      if (params.url) {
+        dataTransfer.setData('text/uri-list', params.url)
+        dataTransfer.setData('text/x-moz-url', params.url)
+      }
+
+      const targetElement = document.elementFromPoint(
+        params.dropPosition.x,
+        params.dropPosition.y
+      )
+
+      if (!targetElement) {
+        console.error('No element found at drop position:', params.dropPosition)
+        return { success: false, error: 'No element at position' }
+      }
+
+      const eventOptions = {
+        bubbles: true,
+        cancelable: true,
+        dataTransfer,
+        clientX: params.dropPosition.x,
+        clientY: params.dropPosition.y
+      }
+
+      const dragOverEvent = new DragEvent('dragover', eventOptions)
+      const dropEvent = new DragEvent('drop', eventOptions)
+
+      Object.defineProperty(dropEvent, 'preventDefault', {
+        value: () => {},
+        writable: false
+      })
+
+      Object.defineProperty(dropEvent, 'stopPropagation', {
+        value: () => {},
+        writable: false
+      })
+
+      targetElement.dispatchEvent(dragOverEvent)
+      targetElement.dispatchEvent(dropEvent)
+
+      return {
+        success: true,
+        targetInfo: {
+          tagName: targetElement.tagName,
+          id: targetElement.id,
+          classList: Array.from(targetElement.classList)
         }
-      },
-      { buffer: [...new Uint8Array(buffer)], fileName, fileType, dropPosition }
-    )
+      }
+    }, evaluateParams)
 
     await this.nextFrame()
   }
 
+  async dragAndDropFile(
+    fileName: string,
+    options: { dropPosition?: Position } = {}
+  ) {
+    return this.dragAndDropExternalResource({ fileName, ...options })
+  }
+
+  async dragAndDropURL(url: string, options: { dropPosition?: Position } = {}) {
+    return this.dragAndDropExternalResource({ url, ...options })
+  }
+
   async dragNode2() {
     await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
     await this.nextFrame()
@@ -885,7 +926,7 @@ export class ComfyPage {
   async getNodeRefById(id: NodeId) {
     return new NodeReference(id, this)
   }
-  async getNodes() {
+  async getNodes(): Promise<LGraphNode[]> {
     return await this.page.evaluate(() => {
       return window['app'].graph.nodes
     })

browser_tests/tests/dialog.spec.ts

@@ -341,3 +341,30 @@ test.describe('Error dialog', () => {
     await expect(errorDialog).toBeVisible()
   })
 })
+
+test.describe('Signin dialog', () => {
+  test('Paste content to signin dialog should not paste node on canvas', async ({
+    comfyPage
+  }) => {
+    const nodeNum = (await comfyPage.getNodes()).length
+    await comfyPage.clickEmptyLatentNode()
+    await comfyPage.ctrlC()
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('test_password')
+    await textBox.press('Control+a')
+    await textBox.press('Control+c')
+
+    await comfyPage.page.evaluate(() => {
+      window['app'].extensionManager.dialog.showSignInDialog()
+    })
+
+    const input = comfyPage.page.locator('#comfy-org-sign-in-password')
+    await input.waitFor({ state: 'visible' })
+    await input.press('Control+v')
+    await expect(input).toHaveValue('test_password')
+
+    expect(await comfyPage.getNodes()).toHaveLength(nodeNum)
+  })
+})

browser_tests/tests/domWidget.spec.ts

@@ -24,4 +24,11 @@ test.describe('DOM Widget', () => {
     await expect(firstMultiline).not.toBeVisible()
     await expect(lastMultiline).not.toBeVisible()
   })
+
+  test('Position update when entering focus mode', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.executeCommand('Workspace.ToggleFocusMode')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('focus-mode-on.png')
+  })
 })

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -3,17 +3,38 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Load Workflow in Media', () => {
-  ;[
+  const fileNames = [
     'workflow.webp',
     'edited_workflow.webp',
     'no_workflow.webp',
     'large_workflow.webp',
     'workflow.webm',
-    'workflow.glb'
-  ].forEach(async (fileName) => {
-    test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
+    'workflow.glb',
+    'workflow.mp4',
+    'workflow.mov',
+    'workflow.m4v'
+  ]
+  fileNames.forEach(async (fileName) => {
+    test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
+      comfyPage
+    }) => {
       await comfyPage.dragAndDropFile(fileName)
       await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
     })
   })
+
+  const urls = [
+    'https://comfyanonymous.github.io/ComfyUI_examples/hidream/hidream_dev_example.png'
+  ]
+  urls.forEach(async (url) => {
+    test(`Load workflow from URL${url} (drop from different browser tabs)`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.dragAndDropURL(url)
+      const readableName = url.split('/').pop()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        `dropped_workflow_url_${readableName}.png`
+      )
+    })
+  })
 })

browser_tests/tests/nodeSearchBox.spec.ts

@@ -251,4 +251,17 @@ test.describe('Release context menu', () => {
       'link-release-context-menu.png'
     )
   })
+
+  test('Can search and add node from context menu', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    await comfyPage.disconnectEdge()
+    await comfyMouse.move({ x: 10, y: 10 })
+    await comfyPage.clickContextMenuItem('Search')
+    await comfyPage.searchBox.fillAndSelectFirstNode('CLIP Prompt')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'link-context-menu-search.png'
+    )
+  })
 })

browser_tests/tests/templates.spec.ts

@@ -1,8 +1,17 @@
-import { expect } from '@playwright/test'
-import fs from 'fs'
+import { Page, expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+async function checkTemplateFileExists(
+  page: Page,
+  filename: string
+): Promise<boolean> {
+  const response = await page.request.head(
+    new URL(`/templates/${filename}`, page.url()).toString()
+  )
+  return response.ok()
+}
+
 test.describe('Templates', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
@@ -12,32 +21,32 @@ test.describe('Templates', () => {
   test('should have a JSON workflow file for each template', async ({
     comfyPage
   }) => {
+    test.slow()
     const templates = await comfyPage.templates.getAllTemplates()
     for (const template of templates) {
-      const workflowPath = comfyPage.templates.getTemplatePath(
+      const exists = await checkTemplateFileExists(
+        comfyPage.page,
         `${template.name}.json`
       )
-      expect(
-        fs.existsSync(workflowPath),
-        `Missing workflow: ${template.name}`
-      ).toBe(true)
+      expect(exists, `Missing workflow: ${template.name}`).toBe(true)
     }
   })
 
   test('should have all required thumbnail media for each template', async ({
     comfyPage
   }) => {
+    test.slow()
     const templates = await comfyPage.templates.getAllTemplates()
     for (const template of templates) {
       const { name, mediaSubtype, thumbnailVariant } = template
       const baseMedia = `${name}-1.${mediaSubtype}`
-      const basePath = comfyPage.templates.getTemplatePath(baseMedia)
 
       // Check base thumbnail
-      expect(
-        fs.existsSync(basePath),
-        `Missing base thumbnail: ${baseMedia}`
-      ).toBe(true)
+      const baseExists = await checkTemplateFileExists(
+        comfyPage.page,
+        baseMedia
+      )
+      expect(baseExists, `Missing base thumbnail: ${baseMedia}`).toBe(true)
 
       // Check second thumbnail for variants that need it
       if (
@@ -45,9 +54,12 @@ test.describe('Templates', () => {
         thumbnailVariant === 'hoverDissolve'
       ) {
         const secondMedia = `${name}-2.${mediaSubtype}`
-        const secondPath = comfyPage.templates.getTemplatePath(secondMedia)
+        const secondExists = await checkTemplateFileExists(
+          comfyPage.page,
+          secondMedia
+        )
         expect(
-          fs.existsSync(secondPath),
+          secondExists,
           `Missing second thumbnail: ${secondMedia} required for ${thumbnailVariant}`
         ).toBe(true)
       }

build/plugins/addElementVnodeExportPlugin.ts

@@ -0,0 +1,59 @@
+import { Plugin } from 'vite'
+
+/**
+ * Vite plugin that adds an alias export for Vue's createBaseVNode as createElementVNode.
+ *
+ * This plugin addresses compatibility issues where some components or libraries
+ * might be using the older createElementVNode function name instead of createBaseVNode.
+ * It modifies the Vue vendor chunk during build to add the alias export.
+ *
+ * @returns {Plugin} A Vite plugin that modifies the Vue vendor chunk exports
+ */
+export function addElementVnodeExportPlugin(): Plugin {
+  return {
+    name: 'add-element-vnode-export-plugin',
+
+    renderChunk(code, chunk, _options) {
+      if (chunk.name.startsWith('vendor-vue')) {
+        const exportRegex = /(export\s*\{)([^}]*)(\}\s*;?\s*)$/
+        const match = code.match(exportRegex)
+
+        if (match) {
+          const existingExports = match[2].trim()
+          const exportsArray = existingExports
+            .split(',')
+            .map((e) => e.trim())
+            .filter(Boolean)
+
+          const hasCreateBaseVNode = exportsArray.some((e) =>
+            e.startsWith('createBaseVNode')
+          )
+          const hasCreateElementVNode = exportsArray.some((e) =>
+            e.includes('createElementVNode')
+          )
+
+          if (hasCreateBaseVNode && !hasCreateElementVNode) {
+            const newExportStatement = `${match[1]} ${existingExports ? existingExports + ',' : ''} createBaseVNode as createElementVNode ${match[3]}`
+            const newCode = code.replace(exportRegex, newExportStatement)
+
+            console.log(
+              `[add-element-vnode-export-plugin] Added 'createBaseVNode as createElementVNode' export to vendor-vue chunk.`
+            )
+
+            return { code: newCode, map: null }
+          } else if (!hasCreateBaseVNode) {
+            console.warn(
+              `[add-element-vnode-export-plugin] Warning: 'createBaseVNode' not found in exports of vendor-vue chunk. Cannot add alias.`
+            )
+          }
+        } else {
+          console.warn(
+            `[add-element-vnode-export-plugin] Warning: Could not find expected export block format in vendor-vue chunk.`
+          )
+        }
+      }
+
+      return null
+    }
+  }
+}

build/plugins/comfyAPIPlugin.ts

@@ -0,0 +1,82 @@
+import path from 'path'
+import { Plugin } from 'vite'
+
+interface ShimResult {
+  code: string
+  exports: string[]
+}
+
+function isLegacyFile(id: string): boolean {
+  return (
+    id.endsWith('.ts') &&
+    (id.includes('src/extensions/core') || id.includes('src/scripts'))
+  )
+}
+
+function transformExports(code: string, id: string): ShimResult {
+  const moduleName = getModuleName(id)
+  const exports: string[] = []
+  let newCode = code
+
+  // Regex to match different types of exports
+  const regex =
+    /export\s+(const|let|var|function|class|async function)\s+([a-zA-Z$_][a-zA-Z\d$_]*)(\s|\()/g
+  let match
+
+  while ((match = regex.exec(code)) !== null) {
+    const name = match[2]
+    // All exports should be bind to the window object as new API endpoint.
+    if (exports.length == 0) {
+      newCode += `\nwindow.comfyAPI = window.comfyAPI || {};`
+      newCode += `\nwindow.comfyAPI.${moduleName} = window.comfyAPI.${moduleName} || {};`
+    }
+    newCode += `\nwindow.comfyAPI.${moduleName}.${name} = ${name};`
+    exports.push(
+      `export const ${name} = window.comfyAPI.${moduleName}.${name};\n`
+    )
+  }
+
+  return {
+    code: newCode,
+    exports
+  }
+}
+
+function getModuleName(id: string): string {
+  // Simple example to derive a module name from the file path
+  const parts = id.split('/')
+  const fileName = parts[parts.length - 1]
+  return fileName.replace(/\.\w+$/, '') // Remove file extension
+}
+
+export function comfyAPIPlugin(isDev: boolean): Plugin {
+  return {
+    name: 'comfy-api-plugin',
+    transform(code: string, id: string) {
+      if (isDev) return null
+
+      if (isLegacyFile(id)) {
+        const result = transformExports(code, id)
+
+        if (result.exports.length > 0) {
+          const projectRoot = process.cwd()
+          const relativePath = path.relative(path.join(projectRoot, 'src'), id)
+          const shimFileName = relativePath.replace(/\.ts$/, '.js')
+
+          const shimComment = `// Shim for ${relativePath}\n`
+
+          this.emitFile({
+            type: 'asset',
+            fileName: shimFileName,
+            source: shimComment + result.exports.join('')
+          })
+        }
+
+        return {
+          code: result.code,
+          map: null // If you're not modifying the source map, return null
+        }
+      }
+    }
+  }
+}

build/plugins/generateImportMapPlugin.ts

@@ -0,0 +1,103 @@
+import type { OutputOptions } from 'rollup'
+import { HtmlTagDescriptor, Plugin } from 'vite'
+
+interface VendorLibrary {
+  name: string
+  pattern: RegExp
+}
+
+/**
+ * Vite plugin that generates an import map for vendor chunks.
+ *
+ * This plugin creates a browser-compatible import map that maps module specifiers
+ * (like 'vue' or 'primevue') to their actual file locations in the build output.
+ * This improves module loading in modern browsers and enables better caching.
+ *
+ * The plugin:
+ * 1. Tracks vendor chunks during bundle generation
+ * 2. Creates mappings between module names and their file paths
+ * 3. Injects an import map script tag into the HTML head
+ * 4. Configures manual chunk splitting for vendor libraries
+ *
+ * @param vendorLibraries - An array of vendor libraries to split into separate chunks
+ * @returns {Plugin} A Vite plugin that generates and injects an import map
+ */
+export function generateImportMapPlugin(
+  vendorLibraries: VendorLibrary[]
+): Plugin {
+  const importMapEntries: Record<string, string> = {}
+
+  return {
+    name: 'generate-import-map-plugin',
+
+    // Configure manual chunks during the build process
+    configResolved(config) {
+      if (config.build) {
+        // Ensure rollupOptions exists
+        if (!config.build.rollupOptions) {
+          config.build.rollupOptions = {}
+        }
+
+        const outputOptions: OutputOptions = {
+          manualChunks: (id: string) => {
+            for (const lib of vendorLibraries) {
+              if (lib.pattern.test(id)) {
+                return `vendor-${lib.name}`
+              }
+            }
+            return null
+          },
+          // Disable minification of internal exports to preserve function names
+          minifyInternalExports: false
+        }
+        config.build.rollupOptions.output = outputOptions
+      }
+    },
+
+    generateBundle(_options, bundle) {
+      for (const fileName in bundle) {
+        const chunk = bundle[fileName]
+        if (chunk.type === 'chunk' && !chunk.isEntry) {
+          // Find matching vendor library by chunk name
+          const vendorLib = vendorLibraries.find(
+            (lib) => chunk.name === `vendor-${lib.name}`
+          )
+
+          if (vendorLib) {
+            const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
+            importMapEntries[vendorLib.name] = relativePath
+
+            console.log(
+              `[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
+            )
+          }
+        }
+      }
+    },
+
+    transformIndexHtml(html) {
+      if (Object.keys(importMapEntries).length === 0) {
+        console.warn(
+          '[ImportMap Plugin] No vendor chunks found to create import map.'
+        )
+        return html
+      }
+
+      const importMap = {
+        imports: importMapEntries
+      }
+
+      const importMapTag: HtmlTagDescriptor = {
+        tag: 'script',
+        attrs: { type: 'importmap' },
+        children: JSON.stringify(importMap, null, 2),
+        injectTo: 'head'
+      }
+
+      return {
+        html,
+        tags: [importMapTag]
+      }
+    }
+  }
+}

build/plugins/index.ts

@@ -0,0 +1,3 @@
+export { addElementVnodeExportPlugin } from './addElementVnodeExportPlugin'
+export { comfyAPIPlugin } from './comfyAPIPlugin'
+export { generateImportMapPlugin } from './generateImportMapPlugin'

global.d.ts

@@ -3,6 +3,7 @@ declare const __SENTRY_ENABLED__: boolean
 declare const __SENTRY_DSN__: string
 declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
+declare const __USE_PROD_CONFIG__: boolean
 
 interface Navigator {
   /**

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.17.1",
+  "version": "1.18.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.17.1",
+      "version": "1.18.1",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/comfyui-electron-types": "^0.4.31",
-        "@comfyorg/litegraph": "^0.13.3",
+        "@comfyorg/comfyui-electron-types": "^0.4.42",
+        "@comfyorg/litegraph": "^0.14.2",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -476,15 +476,15 @@
       }
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.4.31",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.31.tgz",
-      "integrity": "sha512-6tdUfrRyJ9mLlGhNxKqao0kdO+nKRLzQIbENmTK1EtJ1zhMmCp43a+pG7+kecjgp0pbfzxWKhTdCarS9A9fkqw==",
+      "version": "0.4.42",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.4.42.tgz",
+      "integrity": "sha512-sp3VIbpfRTcGdT3238aN7r4spRa2TtGewHlDrvT5GA2CdMOJ7Xn0Zig4rOja3MIogPhDVWGykIzbB5J08ViUSQ==",
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.13.3",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.13.3.tgz",
-      "integrity": "sha512-vkuVyA4RFDEXNHILGN7JlldZqtCqxfTi/T6O+Jv3KVSMSDbwkR8i7/BqAb2y6yaaxK2XktzwX0T7Q0ToNJ8G1A==",
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.14.2.tgz",
+      "integrity": "sha512-IGi1EyWPSRXkmNaFm4WWx0SnfLPc2DDJNVbiTfubDBwGWDRZqsA2vlCYN/1gFgw7evy02XrvcSYYuSUC4+gc+g==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.17.1",
+  "version": "1.18.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -25,8 +25,7 @@
     "lint:fix": "eslint src --fix",
     "locale": "lobe-i18n locale",
     "collect-i18n": "playwright test --config=playwright.i18n.config.ts",
-    "json-schema": "tsx scripts/generate-json-schema.ts",
-    "fetch-templates": "tsx scripts/fetch-templates.ts"
+    "json-schema": "tsx scripts/generate-json-schema.ts"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
@@ -72,8 +71,8 @@
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.31",
-    "@comfyorg/litegraph": "^0.13.3",
+    "@comfyorg/comfyui-electron-types": "^0.4.42",
+    "@comfyorg/litegraph": "^0.14.2",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

scripts/fetch-templates.ts

@@ -1,24 +0,0 @@
-import fs from 'fs-extra'
-import { execSync } from 'node:child_process'
-import path from 'node:path'
-
-const workflowTemplatesRepo = 'https://github.com/Comfy-Org/workflow_templates'
-const tempRepoDir = './templates_repo'
-
-// Clone the repository
-execSync(`git clone ${workflowTemplatesRepo} --depth 1 ${tempRepoDir}`)
-
-// Create public/templates directory if it doesn't exist
-fs.ensureDirSync('public/templates')
-
-// Copy templates from repo to public/templates
-const sourceDir = path.join(tempRepoDir, 'templates')
-const targetDir = 'public/templates'
-
-// Copy entire directory at once
-fs.copySync(sourceDir, targetDir)
-
-// Remove the temporary repository directory
-fs.removeSync(tempRepoDir)
-
-console.log('Templates fetched successfully')

src/App.vue

@@ -2,7 +2,7 @@
   <router-view />
   <ProgressSpinner
     v-if="isLoading"
-    class="absolute inset-0 flex justify-center items-center h-screen"
+    class="absolute inset-0 flex justify-center items-center h-[unset]"
   />
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />

src/components/BrowserTabTitle.spec.ts

@@ -0,0 +1,115 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, reactive } from 'vue'
+
+import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
+
+// Mock the execution store
+const executionStore = reactive({
+  isIdle: true,
+  executionProgress: 0,
+  executingNode: null as any,
+  executingNodeProgress: 0
+})
+vi.mock('@/stores/executionStore', () => ({
+  useExecutionStore: () => executionStore
+}))
+
+// Mock the setting store
+const settingStore = reactive({
+  get: vi.fn(() => 'Enabled')
+})
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: () => settingStore
+}))
+
+// Mock the workflow store
+const workflowStore = reactive({
+  activeWorkflow: null as any
+})
+vi.mock('@/stores/workflowStore', () => ({
+  useWorkflowStore: () => workflowStore
+}))
+
+describe('BrowserTabTitle.vue', () => {
+  let wrapper: ReturnType<typeof mount> | null
+
+  beforeEach(() => {
+    wrapper = null
+    // reset execution store
+    executionStore.isIdle = true
+    executionStore.executionProgress = 0
+    executionStore.executingNode = null as any
+    executionStore.executingNodeProgress = 0
+
+    // reset setting and workflow stores
+    ;(settingStore.get as any).mockReturnValue('Enabled')
+    workflowStore.activeWorkflow = null
+
+    // reset document title
+    document.title = ''
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  it('sets default title when idle and no workflow', () => {
+    wrapper = mount(BrowserTabTitle)
+    expect(document.title).toBe('ComfyUI')
+  })
+
+  it('sets workflow name as title when workflow exists and menu enabled', async () => {
+    ;(settingStore.get as any).mockReturnValue('Enabled')
+    workflowStore.activeWorkflow = {
+      filename: 'myFlow',
+      isModified: false,
+      isPersisted: true
+    }
+    wrapper = mount(BrowserTabTitle)
+    await nextTick()
+    expect(document.title).toBe('myFlow - ComfyUI')
+  })
+
+  it('adds asterisk for unsaved workflow', async () => {
+    ;(settingStore.get as any).mockReturnValue('Enabled')
+    workflowStore.activeWorkflow = {
+      filename: 'myFlow',
+      isModified: true,
+      isPersisted: true
+    }
+    wrapper = mount(BrowserTabTitle)
+    await nextTick()
+    expect(document.title).toBe('*myFlow - ComfyUI')
+  })
+
+  it('disables workflow title when menu disabled', async () => {
+    ;(settingStore.get as any).mockReturnValue('Disabled')
+    workflowStore.activeWorkflow = {
+      filename: 'myFlow',
+      isModified: false,
+      isPersisted: true
+    }
+    wrapper = mount(BrowserTabTitle)
+    await nextTick()
+    expect(document.title).toBe('ComfyUI')
+  })
+
+  it('shows execution progress when not idle without workflow', async () => {
+    executionStore.isIdle = false
+    executionStore.executionProgress = 0.3
+    wrapper = mount(BrowserTabTitle)
+    await nextTick()
+    expect(document.title).toBe('[30%]ComfyUI')
+  })
+
+  it('shows node execution title when executing a node', async () => {
+    executionStore.isIdle = false
+    executionStore.executionProgress = 0.4
+    executionStore.executingNodeProgress = 0.5
+    executionStore.executingNode = { type: 'Foo' }
+    wrapper = mount(BrowserTabTitle)
+    await nextTick()
+    expect(document.title).toBe('[40%][50%] Foo')
+  })
+})

src/components/BrowserTabTitle.vue

@@ -23,7 +23,7 @@ const executionText = computed(() =>
 )
 
 const settingStore = useSettingStore()
-const betaMenuEnabled = computed(
+const newMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
 
@@ -50,7 +50,7 @@ const nodeExecutionTitle = computed(() =>
 const workflowTitle = computed(
   () =>
     executionText.value +
-    (betaMenuEnabled.value ? workflowNameText.value : DEFAULT_TITLE)
+    (newMenuEnabled.value ? workflowNameText.value : DEFAULT_TITLE)
 )
 
 const title = computed(() => nodeExecutionTitle.value || workflowTitle.value)

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,9 +1,9 @@
 <template>
   <Splitter
-    :key="activeSidebarTabId ?? undefined"
+    :key="sidebarStateKey"
     class="splitter-overlay-root splitter-overlay"
     :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
-    :state-key="activeSidebarTabId ?? undefined"
+    :state-key="sidebarStateKey"
     state-storage="local"
   >
     <SplitterPanel
@@ -59,6 +59,10 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 
+const unifiedWidth = computed(() =>
+  settingStore.get('Comfy.Sidebar.UnifiedWidth')
+)
+
 const sidebarPanelVisible = computed(
   () => useSidebarTabStore().activeSidebarTab !== null
 )
@@ -68,6 +72,10 @@ const bottomPanelVisible = computed(
 const activeSidebarTabId = computed(
   () => useSidebarTabStore().activeSidebarTabId
 )
+
+const sidebarStateKey = computed(() => {
+  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
+})
 </script>
 
 <style scoped>

src/components/common/ApiNodesList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col gap-3 h-full">
+    <div class="flex text-xs">
+      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
+    </div>
+    <ScrollPanel class="flex-grow h-0">
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="nodeName in nodeNames"
+          :key="nodeName"
+          class="flex items-center justify-between px-3 py-2 rounded-md bg-[var(--p-content-border-color)]"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-base font-medium leading-tight">{{
+              nodeName
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </ScrollPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { nodeNames } = defineProps<{ nodeNames: string[] }>()
+</script>

src/components/common/ColorCustomizationSelector.spec.ts

@@ -5,7 +5,7 @@ import SelectButton from 'primevue/selectbutton'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
-import ColorCustomizationSelector from '../ColorCustomizationSelector.vue'
+import ColorCustomizationSelector from './ColorCustomizationSelector.vue'
 
 describe('ColorCustomizationSelector', () => {
   const colorOptions = [

src/components/common/EditableText.spec.ts

@@ -4,7 +4,7 @@ import InputText from 'primevue/inputtext'
 import { beforeAll, describe, expect, it } from 'vitest'
 import { createApp } from 'vue'
 
-import EditableText from '../EditableText.vue'
+import EditableText from './EditableText.vue'
 
 describe('EditableText', () => {
   beforeAll(() => {

src/components/common/UrlInput.test.ts

@@ -6,7 +6,7 @@ import InputText from 'primevue/inputtext'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
-import UrlInput from '../UrlInput.vue'
+import UrlInput from './UrlInput.vue'
 
 describe('UrlInput', () => {
   beforeEach(() => {

src/components/common/UserCredit.vue

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="balanceLoading" class="flex items-center gap-1">
+    <div class="flex items-center gap-2">
+      <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
+    </div>
+    <div class="flex-1"></div>
+    <Skeleton width="8rem" height="2rem" />
+  </div>
+  <div v-else class="flex items-center gap-1">
+    <Tag
+      severity="secondary"
+      icon="pi pi-dollar"
+      rounded
+      class="text-amber-400 p-1"
+    />
+    <div :class="textClass">{{ formattedBalance }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
+
+const { textClass } = defineProps<{
+  textClass?: string
+}>()
+
+const authStore = useFirebaseAuthStore()
+const balanceLoading = computed(() => authStore.isFetchingBalance)
+
+const formattedBalance = computed(() => {
+  if (!authStore.balance) return '0.00'
+  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+})
+</script>

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -9,10 +9,10 @@
       {{ t('apiNodesSignInDialog.message') }}
     </div>
 
-    <ApiNodesCostBreakdown :nodes="apiNodes" :show-total="true" />
+    <ApiNodesList :node-names="apiNodeNames" />
 
     <div class="flex justify-between items-center">
-      <Button :label="t('g.learnMore')" link />
+      <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
       <div class="flex gap-2">
         <Button
           :label="t('g.cancel')"
@@ -30,14 +30,15 @@
 import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
-import ApiNodesCostBreakdown from '@/components/common/ApiNodesCostBreakdown.vue'
-import type { ApiNodeCost } from '@/types/apiNodeTypes'
-
 const { t } = useI18n()
 
-const { apiNodes, onLogin, onCancel } = defineProps<{
-  apiNodes: ApiNodeCost[]
+const { apiNodeNames, onLogin, onCancel } = defineProps<{
+  apiNodeNames: string[]
   onLogin?: () => void
   onCancel?: () => void
 }>()
+
+const handleLearnMoreClick = () => {
+  window.open('https://www.comfy.org/faq', '_blank')
+}
 </script>

src/components/dialog/content/ErrorDialogContent.vue

@@ -25,6 +25,13 @@
         :label="$t('issueReport.helpFix')"
         @click="showSendReport"
       />
+      <Button
+        v-if="authStore.currentUser"
+        v-show="!reportOpen"
+        text
+        :label="$t('issueReport.contactSupportTitle')"
+        @click="showContactSupport"
+      />
     </div>
     <template v-if="reportOpen">
       <Divider />
@@ -72,6 +79,8 @@ import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.v
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { useCommandStore } from '@/stores/commandStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { ReportField } from '@/types/issueReportTypes'
 import {
@@ -81,6 +90,8 @@ import {
 
 import ReportIssuePanel from './error/ReportIssuePanel.vue'
 
+const authStore = useFirebaseAuthStore()
+
 const { error } = defineProps<{
   error: Omit<ErrorReportData, 'workflow' | 'systemStats' | 'serverLogs'> & {
     /**
@@ -123,6 +134,10 @@ const stackTraceField = computed<ReportField>(() => {
   }
 })
 
+const showContactSupport = async () => {
+  await useCommandStore().execute('Comfy.ContactSupport')
+}
+
 onMounted(async () => {
   if (!systemStatsStore.systemStats) {
     await systemStatsStore.fetchSystemStats()

src/components/dialog/content/ManagerProgressDialogContent.test.ts

@@ -9,7 +9,7 @@ import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json'
 
-import ManagerProgressDialogContent from '../ManagerProgressDialogContent.vue'
+import ManagerProgressDialogContent from './ManagerProgressDialogContent.vue'
 
 type ComponentInstance = InstanceType<typeof ManagerProgressDialogContent> & {
   lastPanelRef: HTMLElement | null

src/components/dialog/content/SettingDialogContent.vue

@@ -10,15 +10,21 @@
       />
       <Listbox
         v-model="activeCategory"
-        :options="allCategories"
+        :options="groupedMenuTreeNodes"
         option-label="translatedLabel"
+        option-group-label="label"
+        option-group-children="children"
         scroll-height="100%"
         :option-disabled="
           (option: SettingTreeNode) =>
             !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
         "
         class="border-none w-full"
-      />
+      >
+        <template #optiongroup>
+          <Divider class="my-0" />
+        </template>
+      </Listbox>
     </ScrollPanel>
     <Divider layout="vertical" class="mx-1 2xl:mx-4 hidden md:flex" />
     <Divider layout="horizontal" class="flex md:hidden" />
@@ -41,25 +47,10 @@
           <SettingsPanel :setting-groups="sortedGroups(category)" />
         </PanelTemplate>
 
-        <AboutPanel />
-        <Suspense>
-          <KeybindingPanel />
+        <Suspense v-for="panel in panels" :key="panel.node.key">
+          <component :is="panel.component" />
           <template #fallback>
-            <div>Loading keybinding panel...</div>
-          </template>
-        </Suspense>
-
-        <Suspense>
-          <ExtensionPanel />
-          <template #fallback>
-            <div>Loading extension panel...</div>
-          </template>
-        </Suspense>
-
-        <Suspense>
-          <ServerConfigPanel />
-          <template #fallback>
-            <div>Loading server config panel...</div>
+            <div>Loading {{ panel.node.label }} panel...</div>
           </template>
         </Suspense>
       </TabPanels>
@@ -73,16 +64,16 @@ import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { computed, defineAsyncComponent, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useSettingSearch } from '@/composables/setting/useSettingSearch'
 import { useSettingUI } from '@/composables/setting/useSettingUI'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { SettingTreeNode } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import { flattenTree } from '@/utils/treeUtil'
 
-import AboutPanel from './setting/AboutPanel.vue'
 import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
 import CurrentUserMessage from './setting/CurrentUserMessage.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
@@ -90,21 +81,22 @@ import PanelTemplate from './setting/PanelTemplate.vue'
 import SettingsPanel from './setting/SettingsPanel.vue'
 
 const { defaultPanel } = defineProps<{
-  defaultPanel?: 'about' | 'keybinding' | 'extension' | 'server-config'
+  defaultPanel?:
+    | 'about'
+    | 'keybinding'
+    | 'extension'
+    | 'server-config'
+    | 'user'
+    | 'credits'
 }>()
 
-const KeybindingPanel = defineAsyncComponent(
-  () => import('./setting/KeybindingPanel.vue')
-)
-const ExtensionPanel = defineAsyncComponent(
-  () => import('./setting/ExtensionPanel.vue')
-)
-const ServerConfigPanel = defineAsyncComponent(
-  () => import('./setting/ServerConfigPanel.vue')
-)
-
-const { activeCategory, defaultCategory, allCategories, settingCategories } =
-  useSettingUI(defaultPanel)
+const {
+  activeCategory,
+  defaultCategory,
+  settingCategories,
+  groupedMenuTreeNodes,
+  panels
+} = useSettingUI(defaultPanel)
 
 const {
   searchQuery,
@@ -115,6 +107,8 @@ const {
   getSearchResults
 } = useSettingSearch()
 
+const authService = useFirebaseAuthService()
+
 // Sort groups for a category
 const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
   return [...(category.children ?? [])]
@@ -145,6 +139,9 @@ watch(activeCategory, (_, oldValue) => {
   if (!tabValue.value) {
     activeCategory.value = oldValue
   }
+  if (activeCategory.value?.key === 'credits') {
+    void authService.fetchBalance()
+  }
 })
 </script>
 
@@ -183,14 +180,8 @@ watch(activeCategory, (_, oldValue) => {
   }
 }
 
-/* Show a separator line above the Keybinding tab */
-/* This indicates the start of custom setting panels */
-.settings-sidebar :deep(.p-listbox-option[aria-label='Keybinding']) {
-  position: relative;
-}
-
-.settings-sidebar :deep(.p-listbox-option[aria-label='Keybinding'])::before {
-  @apply content-[''] top-0 left-0 absolute w-full;
-  border-top: 1px solid var(--p-divider-border-color);
+/* Hide the first group separator */
+.settings-sidebar :deep(.p-listbox-option-group:nth-child(1)) {
+  display: none;
 }
 </style>

src/components/dialog/content/SignInContent.vue

@@ -61,14 +61,22 @@
     <!-- Terms -->
     <p class="text-xs text-muted mt-8">
       {{ t('auth.login.termsText') }}
-      <span class="text-blue-500 cursor-pointer">{{
-        t('auth.login.termsLink')
-      }}</span>
+      <a
+        href="https://www.comfy.org/terms-of-service"
+        target="_blank"
+        class="text-blue-500 cursor-pointer"
+      >
+        {{ t('auth.login.termsLink') }}
+      </a>
       {{ t('auth.login.andText') }}
-      <span class="text-blue-500 cursor-pointer">{{
-        t('auth.login.privacyLink')
-      }}</span
-      >.
+      <a
+        href="https://www.comfy.org/privacy"
+        target="_blank"
+        class="text-blue-500 cursor-pointer"
+      >
+        {{ t('auth.login.privacyLink') }}
+      </a>
+      .
     </p>
   </div>
 </template>

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="flex flex-col w-96 p-2 gap-10">
+    <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
+      <h1 class="text-2xl font-medium leading-normal my-0">
+        {{ $t('credits.topUp.insufficientTitle') }}
+      </h1>
+      <p class="text-base my-0">
+        {{ $t('credits.topUp.insufficientMessage') }}
+      </p>
+    </div>
+
+    <!-- Balance Section -->
+    <div class="flex justify-between items-center">
+      <div class="flex flex-col gap-2 w-full">
+        <div class="text-muted text-base">
+          {{ $t('credits.yourCreditBalance') }}
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <UserCredit text-class="text-2xl" />
+          <Button
+            outlined
+            severity="secondary"
+            :label="$t('credits.topUp.seeDetails')"
+            icon="pi pi-arrow-up-right"
+            @click="handleSeeDetails"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Amount Input Section -->
+    <div class="flex flex-col gap-2">
+      <span class="text-muted text-sm"
+        >{{ $t('credits.topUp.quickPurchase') }}:</span
+      >
+      <div class="grid grid-cols-[2fr_1fr] gap-2">
+        <template v-for="amount in amountOptions" :key="amount">
+          <div class="flex items-center gap-2">
+            <Tag
+              severity="secondary"
+              icon="pi pi-dollar"
+              rounded
+              class="text-amber-400 p-1"
+            />
+            <span class="text-xl">{{ amount }}</span>
+          </div>
+          <Button
+            :severity="
+              preselectedAmountOption === amount ? 'primary' : 'secondary'
+            "
+            :outlined="preselectedAmountOption !== amount"
+            :label="$t('credits.topUp.buyNow')"
+            @click="handleBuyNow(amount)"
+          />
+        </template>
+
+        <div class="flex items-center gap-2">
+          <Tag
+            severity="secondary"
+            icon="pi pi-dollar"
+            rounded
+            class="text-amber-400 p-1"
+          />
+          <InputNumber
+            v-model="customAmount"
+            :min="1"
+            :max="1000"
+            :step="1"
+            show-buttons
+            :allow-empty="false"
+            :highlight-on-focus="true"
+            pt:pc-input-text:root="w-24"
+            @blur="
+              (e: InputNumberBlurEvent) => (customAmount = Number(e.value))
+            "
+            @input="
+              (e: InputNumberInputEvent) => (customAmount = Number(e.value))
+            "
+          />
+        </div>
+        <ProgressSpinner v-if="loading" class="w-8 h-8" />
+        <Button
+          v-else
+          :label="$t('credits.topUp.buyNow')"
+          severity="secondary"
+          outlined
+          @click="handleBuyNow(customAmount)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import InputNumber, {
+  type InputNumberBlurEvent,
+  type InputNumberInputEvent
+} from 'primevue/inputnumber'
+import ProgressSpinner from 'primevue/progressspinner'
+import Tag from 'primevue/tag'
+import { computed, onBeforeUnmount, ref } from 'vue'
+
+import UserCredit from '@/components/common/UserCredit.vue'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const {
+  isInsufficientCredits = false,
+  amountOptions = [5, 10, 20, 50],
+  preselectedAmountOption = 10
+} = defineProps<{
+  isInsufficientCredits?: boolean
+  amountOptions?: number[]
+  preselectedAmountOption?: number
+}>()
+
+const authStore = useFirebaseAuthStore()
+const authService = useFirebaseAuthService()
+const customAmount = ref<number>(100)
+const didClickBuyNow = ref(false)
+const loading = computed(() => authStore.loading)
+
+const handleSeeDetails = async () => {
+  await authService.accessBillingPortal()
+}
+
+const handleBuyNow = async (amount: number) => {
+  await authService.purchaseCredits(amount)
+  didClickBuyNow.value = true
+}
+
+onBeforeUnmount(() => {
+  if (didClickBuyNow.value) {
+    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
+    void authService.fetchBalance()
+  }
+})
+</script>

src/components/dialog/content/error/ReportIssuePanel.spec.ts

@@ -1,5 +1,6 @@
 import { Form } from '@primevue/forms'
 import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
 import Checkbox from 'primevue/checkbox'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
@@ -11,7 +12,7 @@ import { createI18n } from 'vue-i18n'
 import enMesages from '@/locales/en/main.json'
 import { IssueReportPanelProps } from '@/types/issueReportTypes'
 
-import ReportIssuePanel from '../ReportIssuePanel.vue'
+import ReportIssuePanel from './ReportIssuePanel.vue'
 
 const DEFAULT_FIELDS = ['Workflow', 'Logs', 'Settings', 'SystemStats']
 const CUSTOM_FIELDS = [
@@ -65,7 +66,12 @@ vi.mock('@/scripts/api', () => ({
   api: {
     getLogs: vi.fn().mockResolvedValue('mock logs'),
     getSystemStats: vi.fn().mockResolvedValue('mock stats'),
-    getSettings: vi.fn().mockResolvedValue('mock settings')
+    getSettings: vi.fn().mockResolvedValue('mock settings'),
+    fetchApi: vi.fn().mockResolvedValue({
+      json: vi.fn().mockResolvedValue({}),
+      text: vi.fn().mockResolvedValue('')
+    }),
+    apiURL: vi.fn().mockReturnValue('https://test.com')
   }
 }))
 
@@ -136,15 +142,25 @@ vi.mock('@primevue/forms', () => ({
   }
 }))
 
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: () => ({
+    currentUser: {
+      email: 'test@example.com'
+    }
+  })
+}))
+
 describe('ReportIssuePanel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    const pinia = createPinia()
+    setActivePinia(pinia)
   })
 
   const mountComponent = (props: IssueReportPanelProps, options = {}): any => {
     return mount(ReportIssuePanel, {
       global: {
-        plugins: [PrimeVue, i18n],
+        plugins: [PrimeVue, i18n, createPinia()],
         directives: { tooltip: Tooltip }
       },
       props,

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -23,75 +23,136 @@
         </div>
       </template>
       <div class="p-4 mt-2 border border-round surface-border shadow-1">
-        <div class="flex flex-row gap-3 mb-2">
-          <div v-for="field in fields" :key="field.value">
-            <FormField
-              v-if="field.optIn"
-              v-slot="$field"
-              :name="field.value"
-              class="flex space-x-1"
+        <div class="flex flex-col gap-6">
+          <FormField
+            v-slot="$field"
+            name="contactInfo"
+            :initial-value="authStore.currentUser?.email"
+          >
+            <div class="self-stretch inline-flex justify-start items-center">
+              <label for="contactInfo" class="pb-2 pt-0 opacity-80">{{
+                $t('issueReport.email')
+              }}</label>
+            </div>
+            <InputText
+              id="contactInfo"
+              v-bind="$field"
+              class="w-full"
+              :placeholder="$t('issueReport.provideEmail')"
+            />
+            <Message
+              v-if="$field?.error && $field.touched && $field.value !== ''"
+              severity="error"
+              size="small"
+              variant="simple"
             >
-              <Checkbox
+              {{ t('issueReport.validation.invalidEmail') }}
+            </Message>
+          </FormField>
+
+          <FormField v-slot="$field" name="helpType">
+            <div class="flex flex-col gap-2">
+              <div
+                class="self-stretch inline-flex justify-start items-center gap-2.5"
+              >
+                <label for="helpType" class="pb-2 pt-0 opacity-80">{{
+                  $t('issueReport.whatDoYouNeedHelpWith')
+                }}</label>
+              </div>
+              <Dropdown
                 v-bind="$field"
-                v-model="selection"
-                :input-id="field.value"
-                :value="field.value"
+                v-model="$field.value"
+                :options="helpTypes"
+                option-label="label"
+                option-value="value"
+                :placeholder="$t('issueReport.selectIssue')"
+                class="w-full"
               />
-              <label :for="field.value">{{ field.label }}</label>
+              <Message
+                v-if="$field?.error"
+                severity="error"
+                size="small"
+                variant="simple"
+              >
+                {{ t('issueReport.validation.selectIssueType') }}
+              </Message>
+            </div>
+          </FormField>
+
+          <div class="flex flex-col gap-2">
+            <div
+              class="self-stretch inline-flex justify-start items-center gap-2.5"
+            >
+              <span class="pb-2 pt-0 opacity-80">{{
+                $t('issueReport.whatCanWeInclude')
+              }}</span>
+            </div>
+            <div class="flex flex-row gap-3">
+              <div v-for="field in fields" :key="field.value">
+                <FormField
+                  v-if="field.optIn"
+                  v-slot="$field"
+                  :name="field.value"
+                  class="flex space-x-1"
+                >
+                  <Checkbox
+                    v-bind="$field"
+                    v-model="selection"
+                    :input-id="field.value"
+                    :value="field.value"
+                  />
+                  <label :for="field.value">{{ field.label }}</label>
+                </FormField>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <FormField v-slot="$field" name="details">
+              <div
+                class="self-stretch inline-flex justify-start items-center gap-2.5"
+              >
+                <label for="details" class="pb-2 pt-0 opacity-80">{{
+                  $t('issueReport.describeTheProblem')
+                }}</label>
+              </div>
+              <Textarea
+                v-bind="$field"
+                id="details"
+                class="w-full"
+                rows="5"
+                :placeholder="$t('issueReport.provideAdditionalDetails')"
+                :aria-label="$t('issueReport.provideAdditionalDetails')"
+              />
+              <Message
+                v-if="$field?.error && $field.touched && $field.value"
+                severity="error"
+                size="small"
+                variant="simple"
+              >
+                {{ t('issueReport.validation.maxLength') }}
+              </Message>
             </FormField>
           </div>
-        </div>
-        <FormField v-slot="$field" class="mb-4" name="details">
-          <Textarea
-            v-bind="$field"
-            class="w-full"
-            rows="5"
-            :placeholder="$t('issueReport.provideAdditionalDetails')"
-            :aria-label="$t('issueReport.provideAdditionalDetails')"
-          />
-          <Message
-            v-if="$field?.error && $field.touched && $field.value"
-            severity="error"
-            size="small"
-            variant="simple"
-          >
-            {{ t('issueReport.validation.maxLength') }}
-          </Message>
-        </FormField>
-        <FormField v-slot="$field" name="contactInfo">
-          <InputText
-            v-bind="$field"
-            class="w-full"
-            :placeholder="$t('issueReport.provideEmail')"
-          />
-          <Message
-            v-if="$field?.error && $field.touched && $field.value !== ''"
-            severity="error"
-            size="small"
-            variant="simple"
-          >
-            {{ t('issueReport.validation.invalidEmail') }}
-          </Message>
-        </FormField>
 
-        <div class="flex flex-row gap-3 mt-2">
-          <div v-for="checkbox in contactCheckboxes" :key="checkbox.value">
-            <FormField
-              v-slot="$field"
-              :name="checkbox.value"
-              class="flex space-x-1"
-            >
-              <Checkbox
-                v-bind="$field"
-                v-model="contactPrefs"
-                :input-id="checkbox.value"
-                :value="checkbox.value"
-                :disabled="
-                  $form.contactInfo?.error || !$form.contactInfo?.value
-                "
-              />
-              <label :for="checkbox.value">{{ checkbox.label }}</label>
-            </FormField>
+          <div class="flex flex-col gap-3 mt-2">
+            <div v-for="checkbox in contactCheckboxes" :key="checkbox.value">
+              <FormField
+                v-slot="$field"
+                :name="checkbox.value"
+                class="flex space-x-1"
+              >
+                <Checkbox
+                  v-bind="$field"
+                  v-model="contactPrefs"
+                  :input-id="checkbox.value"
+                  :value="checkbox.value"
+                  :disabled="
+                    $form.contactInfo?.error || !$form.contactInfo?.value
+                  "
+                />
+                <label :for="checkbox.value">{{ checkbox.label }}</label>
+              </FormField>
+            </div>
           </div>
         </div>
       </div>
@@ -108,6 +169,7 @@ import _ from 'lodash'
 import cloneDeep from 'lodash/cloneDeep'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
+import Dropdown from 'primevue/dropdown'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Panel from 'primevue/panel'
@@ -122,14 +184,16 @@ import {
 } from '@/schemas/issueReportSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import type {
   DefaultField,
   IssueReportPanelProps,
   ReportField
 } from '@/types/issueReportTypes'
 import { isElectron } from '@/utils/envUtil'
+import { generateUUID } from '@/utils/formatUtil'
 
-const ISSUE_NAME = 'User reported issue'
+const DEFAULT_ISSUE_NAME = 'User reported issue'
 
 const props = defineProps<IssueReportPanelProps>()
 const { defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'] } =
@@ -137,6 +201,7 @@ const { defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'] } =
 
 const { t } = useI18n()
 const toast = useToast()
+const authStore = useFirebaseAuthStore()
 
 const selection = ref<string[]>([])
 const contactPrefs = ref<string[]>([])
@@ -147,6 +212,20 @@ const contactCheckboxes = [
   { label: t('issueReport.notifyResolve'), value: 'notifyOnResolution' }
 ]
 
+const helpTypes = [
+  {
+    label: t('issueReport.helpTypes.billingPayments'),
+    value: 'billingPayments'
+  },
+  {
+    label: t('issueReport.helpTypes.loginAccessIssues'),
+    value: 'loginAccessIssues'
+  },
+  { label: t('issueReport.helpTypes.giveFeedback'), value: 'giveFeedback' },
+  { label: t('issueReport.helpTypes.bugReport'), value: 'bugReport' },
+  { label: t('issueReport.helpTypes.somethingElse'), value: 'somethingElse' }
+]
+
 const defaultFieldsConfig: ReportField[] = [
   {
     label: t('issueReport.systemStats'),
@@ -213,6 +292,7 @@ const createCaptureContext = async (
     level: 'error',
     tags: {
       errorType: props.errorType,
+      helpType: formData.helpType,
       followUp: formData.contactInfo ? formData.followUp : false,
       notifyOnResolution: formData.contactInfo
         ? formData.notifyOnResolution
@@ -227,11 +307,24 @@ const createCaptureContext = async (
   }
 }
 
+const generateUniqueTicketId = (type: string) => `${type}-${generateUUID()}`
+
 const submit = async (event: FormSubmitEvent) => {
   if (event.valid) {
     try {
       const captureContext = await createCaptureContext(event.values)
-      captureMessage(ISSUE_NAME, captureContext)
+
+      // If it's billing or access issue, generate unique id to be used by customer service ticketing
+      const isValidContactInfo = event.values.contactInfo?.length
+      const isCustomerServiceIssue =
+        isValidContactInfo &&
+        ['billingPayments', 'loginAccessIssues'].includes(
+          event.values.helpType || ''
+        )
+      const issueName = isCustomerServiceIssue
+        ? `ticket-${generateUniqueTicketId(event.values.helpType || '')}`
+        : DEFAULT_ISSUE_NAME
+      captureMessage(issueName, captureContext)
       submitted.value = true
       toast.add({
         severity: 'success',

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -9,8 +9,8 @@ import { createI18n } from 'vue-i18n'
 import enMessages from '@/locales/en/main.json'
 import { SelectedVersion } from '@/types/comfyManagerTypes'
 
-import PackVersionBadge from '../PackVersionBadge.vue'
-import PackVersionSelectorPopover from '../PackVersionSelectorPopover.vue'
+import PackVersionBadge from './PackVersionBadge.vue'
+import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
 
 const mockNodePack = {
   id: 'test-pack',

src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts

@@ -10,7 +10,7 @@ import { createI18n } from 'vue-i18n'
 import enMessages from '@/locales/en/main.json'
 import { SelectedVersion } from '@/types/comfyManagerTypes'
 
-import PackVersionSelectorPopover from '../PackVersionSelectorPopover.vue'
+import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
 
 // Default mock versions for reference
 const defaultMockVersions = [

src/components/dialog/content/manager/PackVersionSelectorPopover.vue

@@ -10,7 +10,7 @@
       <ProgressSpinner class="w-8 h-8 mb-2" />
       {{ $t('manager.loadingVersions') }}
     </div>
-    <div v-else-if="allVersionOptions.length === 0" class="py-2">
+    <div v-else-if="versionOptions.length === 0" class="py-2">
       <NoResultsPlaceholder
         :title="$t('g.noResultsFound')"
         :message="$t('manager.tryAgainLater')"
@@ -23,7 +23,7 @@
       v-model="selectedVersion"
       option-label="label"
       option-value="value"
-      :options="allVersionOptions"
+      :options="versionOptions"
       :highlight-on-select="false"
       class="my-3 w-full max-h-[50vh] border-none shadow-none"
     >
@@ -58,11 +58,11 @@
 </template>
 
 <script setup lang="ts">
-import { useAsyncState, whenever } from '@vueuse/core'
+import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
@@ -119,47 +119,53 @@ const fetchVersions = async () => {
   return (await registryService.getPackVersions(nodePack.id)) || []
 }
 
-const {
-  isLoading: isLoadingVersions,
-  state: versions,
-  execute: startFetchVersions
-} = useAsyncState(fetchVersions, [])
+const versionOptions = ref<
+  {
+    value: string
+    label: string
+  }[]
+>([])
 
-const specialOptions = computed(() => {
-  const options = [
+const isLoadingVersions = ref(false)
+
+const onNodePackChange = async () => {
+  isLoadingVersions.value = true
+
+  // Fetch versions from the registry
+  const versions = await fetchVersions()
+  const availableVersionOptions = versions
+    .map((version) => ({
+      value: version.version ?? '',
+      label: version.version ?? ''
+    }))
+    .filter((option) => option.value)
+
+  // Add Latest option
+  const defaultVersions = [
     {
       value: SelectedVersion.LATEST,
       label: t('manager.latestVersion')
     }
   ]
 
-  // Only include nightly option if there is a repo
+  // Add Nightly option if there is a non-empty `repository` field
   if (nodePack.repository?.length) {
-    options.push({
+    defaultVersions.push({
       value: SelectedVersion.NIGHTLY,
       label: t('manager.nightlyVersion')
     })
   }
 
-  return options
-})
-
-const versionOptions = computed(() =>
-  versions.value.map((version) => ({
-    value: version.version,
-    label: version.version
-  }))
-)
-
-const allVersionOptions = computed(() => [
-  ...specialOptions.value,
-  ...versionOptions.value
-])
+  versionOptions.value = [...defaultVersions, ...availableVersionOptions]
+  isLoadingVersions.value = false
+}
 
 whenever(
-  () => nodePack.id,
-  () => startFetchVersions(),
-  { deep: true }
+  () => nodePack,
+  () => {
+    void onNodePackChange()
+  },
+  { deep: true, immediate: true }
 )
 
 const handleSubmit = async () => {

src/components/dialog/content/manager/button/PackEnableToggle.test.ts

@@ -9,7 +9,7 @@ import { createI18n } from 'vue-i18n'
 import enMessages from '@/locales/en/main.json'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 
-import PackEnableToggle from '../PackEnableToggle.vue'
+import PackEnableToggle from './PackEnableToggle.vue'
 
 // Mock debounce to execute immediately
 vi.mock('lodash', () => ({

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts

@@ -5,7 +5,7 @@ import { createI18n } from 'vue-i18n'
 import enMessages from '@/locales/en/main.json'
 import { components } from '@/types/comfyRegistryTypes'
 
-import DescriptionTabPanel from '../DescriptionTabPanel.vue'
+import DescriptionTabPanel from './DescriptionTabPanel.vue'
 
 const i18n = createI18n({
   legacy: false,

src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts

@@ -7,8 +7,8 @@ import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json'
 
-import GridSkeleton from '../GridSkeleton.vue'
-import PackCardSkeleton from '../PackCardSkeleton.vue'
+import GridSkeleton from './GridSkeleton.vue'
+import PackCardSkeleton from './PackCardSkeleton.vue'
 
 describe('GridSkeleton', () => {
   const mountComponent = ({

src/components/dialog/content/setting/CreditsPanel.vue

@@ -0,0 +1,164 @@
+<template>
+  <TabPanel value="Credits" class="credits-container h-full">
+    <div class="flex flex-col h-full">
+      <h2 class="text-2xl font-bold mb-2">
+        {{ $t('credits.credits') }}
+      </h2>
+
+      <Divider />
+
+      <div class="flex flex-col gap-2">
+        <h3 class="text-sm font-medium text-muted">
+          {{ $t('credits.yourCreditBalance') }}
+        </h3>
+        <div class="flex justify-between items-center">
+          <UserCredit text-class="text-3xl font-bold" />
+          <Skeleton v-if="loading" width="2rem" height="2rem" />
+          <Button
+            v-else
+            :label="$t('credits.purchaseCredits')"
+            :loading="loading"
+            @click="handlePurchaseCreditsClick"
+          />
+        </div>
+        <div class="flex flex-row items-center">
+          <Skeleton
+            v-if="balanceLoading"
+            width="12rem"
+            height="1rem"
+            class="text-xs"
+          />
+          <div v-else-if="formattedLastUpdateTime" class="text-xs text-muted">
+            {{ $t('credits.lastUpdated') }}: {{ formattedLastUpdateTime }}
+          </div>
+          <Button
+            icon="pi pi-refresh"
+            text
+            size="small"
+            severity="secondary"
+            @click="() => authService.fetchBalance()"
+          />
+        </div>
+      </div>
+
+      <div class="flex justify-between items-center mt-8">
+        <Button
+          :label="$t('credits.invoiceHistory')"
+          text
+          severity="secondary"
+          icon="pi pi-arrow-up-right"
+          :loading="loading"
+          @click="handleCreditsHistoryClick"
+        />
+      </div>
+
+      <template v-if="creditHistory.length > 0">
+        <div class="flex-grow">
+          <DataTable :value="creditHistory" :show-headers="false">
+            <Column field="title" :header="$t('g.name')">
+              <template #body="{ data }">
+                <div class="text-sm font-medium">{{ data.title }}</div>
+                <div class="text-xs text-muted">{{ data.timestamp }}</div>
+              </template>
+            </Column>
+            <Column field="amount" :header="$t('g.amount')">
+              <template #body="{ data }">
+                <div
+                  :class="[
+                    'text-base font-medium text-center',
+                    data.isPositive ? 'text-sky-500' : 'text-red-400'
+                  ]"
+                >
+                  {{ data.isPositive ? '+' : '-' }}${{
+                    formatMetronomeCurrency(data.amount, 'usd')
+                  }}
+                </div>
+              </template>
+            </Column>
+          </DataTable>
+        </div>
+      </template>
+
+      <Divider />
+
+      <div class="flex flex-row gap-2">
+        <Button
+          :label="$t('credits.faqs')"
+          text
+          severity="secondary"
+          icon="pi pi-question-circle"
+          @click="handleFaqClick"
+        />
+        <Button
+          :label="$t('credits.messageSupport')"
+          text
+          severity="secondary"
+          icon="pi pi-comments"
+          @click="handleMessageSupport"
+        />
+      </div>
+    </div>
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Divider from 'primevue/divider'
+import Skeleton from 'primevue/skeleton'
+import TabPanel from 'primevue/tabpanel'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import UserCredit from '@/components/common/UserCredit.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
+
+interface CreditHistoryItemData {
+  title: string
+  timestamp: string
+  amount: number
+  isPositive: boolean
+}
+
+const { t } = useI18n()
+const dialogService = useDialogService()
+const authStore = useFirebaseAuthStore()
+const authService = useFirebaseAuthService()
+const loading = computed(() => authStore.loading)
+const balanceLoading = computed(() => authStore.isFetchingBalance)
+
+const formattedLastUpdateTime = computed(() =>
+  authStore.lastBalanceUpdateTime
+    ? authStore.lastBalanceUpdateTime.toLocaleString()
+    : ''
+)
+
+const handlePurchaseCreditsClick = () => {
+  dialogService.showTopUpCreditsDialog()
+}
+
+const handleCreditsHistoryClick = async () => {
+  await authService.accessBillingPortal()
+}
+
+const handleMessageSupport = () => {
+  dialogService.showIssueReportDialog({
+    title: t('issueReport.contactSupportTitle'),
+    subtitle: t('issueReport.contactSupportDescription'),
+    panelProps: {
+      errorType: 'BillingSupport',
+      defaultFields: ['Workflow', 'Logs', 'SystemStats', 'Settings']
+    }
+  })
+}
+
+const handleFaqClick = () => {
+  window.open('https://www.comfy.org/faq', '_blank')
+}
+
+const creditHistory = ref<CreditHistoryItemData[]>([])
+</script>

src/components/dialog/content/setting/SettingItem.spec.ts

@@ -4,7 +4,7 @@ import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import SettingItem from '../SettingItem.vue'
+import SettingItem from './SettingItem.vue'
 
 const i18n = createI18n({
   legacy: false,

src/components/dialog/content/setting/UserPanel.vue

@@ -0,0 +1,123 @@
+<template>
+  <TabPanel value="User" class="user-settings-container h-full">
+    <div class="flex flex-col h-full">
+      <h2 class="text-2xl font-bold mb-2">{{ $t('userSettings.title') }}</h2>
+      <Divider class="mb-3" />
+
+      <div v-if="user" class="flex flex-col gap-2">
+        <Avatar
+          v-if="user.photoURL"
+          :image="user.photoURL"
+          shape="circle"
+          size="large"
+          aria-label="User Avatar"
+        />
+
+        <div class="flex flex-col gap-0.5">
+          <h3 class="font-medium">
+            {{ $t('userSettings.name') }}
+          </h3>
+          <div class="text-muted">
+            {{ user.displayName || $t('userSettings.notSet') }}
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-0.5">
+          <h3 class="font-medium">
+            {{ $t('userSettings.email') }}
+          </h3>
+          <a :href="'mailto:' + user.email" class="hover:underline">
+            {{ user.email }}
+          </a>
+        </div>
+
+        <div class="flex flex-col gap-0.5">
+          <h3 class="font-medium">
+            {{ $t('userSettings.provider') }}
+          </h3>
+          <div class="text-muted flex items-center gap-1">
+            <i :class="providerIcon" />
+            {{ providerName }}
+          </div>
+        </div>
+
+        <ProgressSpinner
+          v-if="loading"
+          class="w-8 h-8 mt-4"
+          style="--pc-spinner-color: #000"
+        />
+        <Button
+          v-else
+          class="mt-4 w-32"
+          severity="secondary"
+          :label="$t('auth.signOut.signOut')"
+          icon="pi pi-sign-out"
+          @click="handleSignOut"
+        />
+      </div>
+
+      <!-- Login Section -->
+      <div v-else class="flex flex-col gap-4">
+        <p class="text-gray-600">
+          {{ $t('auth.login.title') }}
+        </p>
+
+        <Button
+          class="w-52"
+          severity="primary"
+          :loading="loading"
+          :label="$t('auth.login.signInOrSignUp')"
+          icon="pi pi-user"
+          @click="handleSignIn"
+        />
+      </div>
+    </div>
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import Avatar from 'primevue/avatar'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import ProgressSpinner from 'primevue/progressspinner'
+import TabPanel from 'primevue/tabpanel'
+import { computed } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const authStore = useFirebaseAuthStore()
+const commandStore = useCommandStore()
+const user = computed(() => authStore.currentUser)
+const loading = computed(() => authStore.loading)
+
+const providerName = computed(() => {
+  const providerId = user.value?.providerData[0]?.providerId
+  if (providerId?.includes('google')) {
+    return 'Google'
+  }
+  if (providerId?.includes('github')) {
+    return 'GitHub'
+  }
+  return providerId
+})
+
+const providerIcon = computed(() => {
+  const providerId = user.value?.providerData[0]?.providerId
+  if (providerId?.includes('google')) {
+    return 'pi pi-google'
+  }
+  if (providerId?.includes('github')) {
+    return 'pi pi-github'
+  }
+  return 'pi pi-user'
+})
+
+const handleSignOut = async () => {
+  await commandStore.execute('Comfy.User.SignOut')
+}
+
+const handleSignIn = async () => {
+  await commandStore.execute('Comfy.User.OpenSignInDialog')
+}
+</script>

src/components/dialog/content/signin/SignInForm.vue

@@ -36,7 +36,10 @@
         >
           {{ t('auth.login.passwordLabel') }}
         </label>
-        <span class="text-muted text-base font-medium cursor-pointer">
+        <span
+          class="text-muted text-base font-medium cursor-pointer"
+          @click="handleForgotPassword($form.email?.value)"
+        >
           {{ t('auth.login.forgotPassword') }}
         </span>
       </div>
@@ -57,7 +60,9 @@
     </div>
 
     <!-- Submit Button -->
+    <ProgressSpinner v-if="loading" class="w-8 h-8" />
     <Button
+      v-else
       type="submit"
       :label="t('auth.login.loginButton')"
       class="h-10 font-medium mt-4"
@@ -71,9 +76,17 @@ import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { type SignInData, signInSchema } from '@/schemas/signInSchema'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const authStore = useFirebaseAuthStore()
+const firebaseAuthService = useFirebaseAuthService()
+const loading = computed(() => authStore.loading)
 
 const { t } = useI18n()
 
@@ -86,4 +99,9 @@ const onSubmit = (event: FormSubmitEvent) => {
     emit('submit', event.values as SignInData)
   }
 }
+
+const handleForgotPassword = async (email: string) => {
+  if (!email) return
+  await firebaseAuthService.sendPasswordReset(email)
+}
 </script>

src/components/graph/DomWidgets.vue

@@ -73,6 +73,7 @@ watch(
         updateWidgets()
       }
     )
-  }
+  },
+  { immediate: true }
 )
 </script>

src/components/graph/GraphCanvas.vue

@@ -19,7 +19,6 @@
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
     </template>
   </LiteGraphCanvasSplitterOverlay>
-  <TitleEditor />
   <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
   <canvas
     id="graph-canvas"
@@ -27,13 +26,20 @@
     tabindex="1"
     class="w-full h-full touch-none"
   />
-  <NodeSearchboxPopover />
-  <SelectionOverlay v-if="selectionToolboxEnabled">
-    <SelectionToolbox />
-  </SelectionOverlay>
-  <NodeTooltip v-if="tooltipEnabled" />
+
   <NodeBadge />
-  <DomWidgets />
+  <NodeTooltip v-if="tooltipEnabled" />
+  <NodeSearchboxPopover />
+
+  <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
+  canvasStore.canvas to be initialized. -->
+  <template v-if="comfyAppReady">
+    <TitleEditor />
+    <SelectionOverlay v-if="selectionToolboxEnabled">
+      <SelectionToolbox />
+    </SelectionOverlay>
+    <DomWidgets />
+  </template>
 </template>
 
 <script setup lang="ts">
@@ -78,7 +84,9 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
-const emit = defineEmits(['ready'])
+const emit = defineEmits<{
+  ready: []
+}>()
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()

src/components/graph/TitleEditor.vue

@@ -16,7 +16,7 @@
 import { LGraphGroup, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import type { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { type CSSProperties, computed, ref, watch } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
@@ -28,7 +28,12 @@ const settingStore = useSettingStore()
 
 const showInput = ref(false)
 const editedTitle = ref('')
-const { style: inputStyle, updatePosition } = useAbsolutePosition()
+const { style: inputPositionStyle, updatePosition } = useAbsolutePosition()
+const inputFontStyle = ref<CSSProperties>({})
+const inputStyle = computed<CSSProperties>(() => ({
+  ...inputPositionStyle.value,
+  ...inputFontStyle.value
+}))
 
 const titleEditorStore = useTitleEditorStore()
 const canvasStore = useCanvasStore()
@@ -59,23 +64,19 @@ watch(
 
     if (target instanceof LGraphGroup) {
       const group = target
-      updatePosition(
-        {
-          pos: group.pos,
-          size: [group.size[0], group.titleHeight]
-        },
-        { fontSize: `${group.font_size * scale}px` }
-      )
+      updatePosition({
+        pos: group.pos,
+        size: [group.size[0], group.titleHeight]
+      })
+      inputFontStyle.value = { fontSize: `${group.font_size * scale}px` }
     } else if (target instanceof LGraphNode) {
       const node = target
       const [x, y] = node.getBounding()
-      updatePosition(
-        {
-          pos: [x, y],
-          size: [node.width, LiteGraph.NODE_TITLE_HEIGHT]
-        },
-        { fontSize: `${12 * scale}px` }
-      )
+      updatePosition({
+        pos: [x, y],
+        size: [node.width, LiteGraph.NODE_TITLE_HEIGHT]
+      })
+      inputFontStyle.value = { fontSize: `${12 * scale}px` }
     }
   }
 )

src/components/graph/widgets/DomWidget.vue

@@ -37,13 +37,14 @@ const { widget, widgetState } = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:widgetValue', value: string | object): void
+  'update:widgetValue': [value: string | object]
 }>()
 
 const widgetElement = ref<HTMLElement | undefined>()
 
-const { style: positionStyle, updatePositionWithTransform } =
-  useAbsolutePosition()
+const { style: positionStyle, updatePosition } = useAbsolutePosition({
+  useTransform: true
+})
 const { style: clippingStyle, updateClipPath } = useDomClipping()
 const style = computed<CSSProperties>(() => ({
   ...positionStyle.value,
@@ -94,7 +95,7 @@ const updateDomClipping = () => {
 watch(
   () => widgetState,
   (newState) => {
-    updatePositionWithTransform(newState)
+    updatePosition(newState)
     if (enableDomClipping.value) {
       updateDomClipping()
     }

src/components/install/MirrorsConfiguration.vue

@@ -35,9 +35,8 @@
 
 <script setup lang="ts">
 import {
-  CUDA_TORCH_URL,
-  NIGHTLY_CPU_TORCH_URL,
-  TorchDeviceType
+  TorchDeviceType,
+  TorchMirrorUrl
 } from '@comfyorg/comfyui-electron-types'
 import Divider from 'primevue/divider'
 import Panel from 'primevue/panel'
@@ -61,14 +60,14 @@ const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
     case 'mps':
       return {
         settingId,
-        mirror: NIGHTLY_CPU_TORCH_URL,
-        fallbackMirror: NIGHTLY_CPU_TORCH_URL
+        mirror: TorchMirrorUrl.NightlyCpu,
+        fallbackMirror: TorchMirrorUrl.NightlyCpu
       }
     case 'nvidia':
       return {
         settingId,
-        mirror: CUDA_TORCH_URL,
-        fallbackMirror: CUDA_TORCH_URL
+        mirror: TorchMirrorUrl.Cuda,
+        fallbackMirror: TorchMirrorUrl.Cuda
       }
     case 'cpu':
     default:

src/components/load3d/controls/LightControls.vue

@@ -21,9 +21,9 @@
         <Slider
           v-model="lightIntensity"
           class="w-full"
-          :min="1"
-          :max="20"
-          :step="1"
+          :min="lightIntensityMinimum"
+          :max="lightIntensityMaximum"
+          :step="lightAdjustmentIncrement"
           @change="updateLightIntensity"
         />
       </div>
@@ -38,6 +38,7 @@ import Slider from 'primevue/slider'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { t } from '@/i18n'
+import { useSettingStore } from '@/stores/settingStore'
 
 const vTooltip = Tooltip
 
@@ -54,6 +55,16 @@ const lightIntensity = ref(props.lightIntensity)
 const showLightIntensityButton = ref(props.showLightIntensityButton)
 const showLightIntensity = ref(false)
 
+const lightIntensityMaximum = useSettingStore().get(
+  'Comfy.Load3D.LightIntensityMaximum'
+)
+const lightIntensityMinimum = useSettingStore().get(
+  'Comfy.Load3D.LightIntensityMinimum'
+)
+const lightAdjustmentIncrement = useSettingStore().get(
+  'Comfy.Load3D.LightAdjustmentIncrement'
+)
+
 watch(
   () => props.lightIntensity,
   (newValue) => {

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -33,43 +33,41 @@
 </template>
 
 <script setup lang="ts">
-import { LiteGraph } from '@comfyorg/litegraph'
-import type {
-  ConnectingLink,
-  LiteGraphCanvasEvent,
-  Vector2
+import {
+  LGraphNode,
+  LiteGraph,
+  LiteGraphCanvasEvent
 } from '@comfyorg/litegraph'
-import type { OriginalEvent } from '@comfyorg/litegraph/dist/types/events'
+import { Point } from '@comfyorg/litegraph/dist/interfaces'
+import type { CanvasPointerEvent } from '@comfyorg/litegraph/dist/types/events'
 import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
-import { computed, ref, toRaw, watchEffect } from 'vue'
+import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
-import { ConnectingLinkImpl } from '@/types/litegraphTypes'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeSearchBox from './NodeSearchBox.vue'
 
+let triggerEvent: CanvasPointerEvent | null = null
+let listenerController: AbortController | null = null
+let disconnectOnReset = false
+
 const settingStore = useSettingStore()
 const litegraphService = useLitegraphService()
 
 const { visible } = storeToRefs(useSearchBoxStore())
 const dismissable = ref(true)
-const triggerEvent = ref<LiteGraphCanvasEvent | null>(null)
-const getNewNodeLocation = (): Vector2 => {
-  if (!triggerEvent.value) {
-    return litegraphService.getCanvasCenter()
-  }
-
-  const originalEvent = (triggerEvent.value.detail as OriginalEvent)
-    .originalEvent
-  return [originalEvent.canvasX, originalEvent.canvasY]
+const getNewNodeLocation = (): Point => {
+  return triggerEvent
+    ? [triggerEvent.canvasX, triggerEvent.canvasY]
+    : litegraphService.getCanvasCenter()
 }
 const nodeFilters = ref<FuseFilterWithValue<ComfyNodeDefImpl, string>[]>([])
 const addFilter = (filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) => {
@@ -88,35 +86,30 @@ const clearFilters = () => {
 const closeDialog = () => {
   visible.value = false
 }
+const canvasStore = useCanvasStore()
 
 const addNode = (nodeDef: ComfyNodeDefImpl) => {
+  if (!triggerEvent) {
+    console.warn('The trigger event was undefined when addNode was called.')
+    return
+  }
+
+  disconnectOnReset = false
   const node = litegraphService.addNodeOnGraph(nodeDef, {
     pos: getNewNodeLocation()
   })
 
-  const eventDetail = triggerEvent.value?.detail
-  if (eventDetail && eventDetail.subType === 'empty-release') {
-    // @ts-expect-error fixme ts strict error
-    eventDetail.linkReleaseContext.links.forEach((link: ConnectingLink) => {
-      ConnectingLinkImpl.createFromPlainObject(link).connectTo(node)
-    })
-  }
+  canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
 
-  // TODO: This is not robust timing-wise.
-  // PrimeVue complains about the dialog being closed before the event selecting
-  // item is fully processed.
-  window.setTimeout(() => {
-    closeDialog()
-  }, 100)
+  window.requestAnimationFrame(closeDialog)
 }
 
 const newSearchBoxEnabled = computed(
   () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
 )
-const showSearchBox = (e: LiteGraphCanvasEvent) => {
-  const detail = e.detail as OriginalEvent
+const showSearchBox = (e: CanvasPointerEvent) => {
   if (newSearchBoxEnabled.value) {
-    if (detail.originalEvent?.pointerType === 'touch') {
+    if (e.pointerType === 'touch') {
       setTimeout(() => {
         showNewSearchBox(e)
       }, 128)
@@ -124,26 +117,23 @@ const showSearchBox = (e: LiteGraphCanvasEvent) => {
       showNewSearchBox(e)
     }
   } else {
-    // @ts-expect-error fixme ts strict error
-    canvasStore.canvas.showSearchBox(detail.originalEvent)
+    canvasStore.getCanvas().showSearchBox(e)
   }
 }
 
+const getFirstLink = () =>
+  canvasStore.getCanvas().linkConnector.renderLinks.at(0)
+
 const nodeDefStore = useNodeDefStore()
-const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
-  if (e.detail.subType === 'empty-release') {
-    const links = e.detail.linkReleaseContext.links
-    if (links.length === 0) {
-      console.warn('Empty release with no links! This should never happen')
-      return
-    }
-    const firstLink = ConnectingLinkImpl.createFromPlainObject(links[0])
+const showNewSearchBox = (e: CanvasPointerEvent) => {
+  const firstLink = getFirstLink()
+  if (firstLink) {
     const filter =
-      firstLink.releaseSlotType === 'input'
+      firstLink.toType === 'input'
         ? nodeDefStore.nodeSearchService.inputTypeFilter
         : nodeDefStore.nodeSearchService.outputTypeFilter
 
-    const dataType = firstLink.type?.toString() ?? ''
+    const dataType = firstLink.fromSlot.type?.toString() ?? ''
     addFilter({
       filterDef: filter,
       value: dataType
@@ -151,7 +141,7 @@ const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
   }
 
   visible.value = true
-  triggerEvent.value = e
+  triggerEvent = e
 
   // Prevent the dialog from being dismissed immediately
   dismissable.value = false
@@ -160,88 +150,129 @@ const showNewSearchBox = (e: LiteGraphCanvasEvent) => {
   }, 300)
 }
 
-const showContextMenu = (e: LiteGraphCanvasEvent) => {
-  if (e.detail.subType !== 'empty-release') {
-    return
-  }
+const showContextMenu = (e: CanvasPointerEvent) => {
+  const firstLink = getFirstLink()
+  if (!firstLink) return
 
-  const links = e.detail.linkReleaseContext.links
-  if (links.length === 0) {
-    console.warn('Empty release with no links! This should never happen')
-    return
-  }
-
-  const firstLink = ConnectingLinkImpl.createFromPlainObject(links[0])
-  const mouseEvent = e.detail.originalEvent
+  const { node, fromSlot, toType } = firstLink
   const commonOptions = {
-    e: mouseEvent,
+    e,
     allow_searchbox: true,
-    showSearchBox: () => showSearchBox(e)
+    showSearchBox: () => {
+      cancelResetOnContextClose()
+      showSearchBox(e)
+    }
   }
-  const connectionOptions = firstLink.output
-    ? {
-        nodeFrom: firstLink.node,
-        slotFrom: firstLink.output,
-        afterRerouteId: firstLink.afterRerouteId
-      }
-    : {
-        nodeTo: firstLink.node,
-        slotTo: firstLink.input,
-        afterRerouteId: firstLink.afterRerouteId
-      }
-  // @ts-expect-error fixme ts strict error
-  canvasStore.canvas.showConnectionMenu({
+  const connectionOptions =
+    toType === 'input'
+      ? { nodeFrom: node, slotFrom: fromSlot }
+      : { nodeTo: node, slotTo: fromSlot }
+
+  const canvas = canvasStore.getCanvas()
+  const menu = canvas.showConnectionMenu({
     ...connectionOptions,
     ...commonOptions
   })
+
+  if (!menu) {
+    console.warn('No menu was returned from showConnectionMenu')
+    return
+  }
+
+  triggerEvent = e
+  listenerController = new AbortController()
+  const { signal } = listenerController
+  const options = { once: true, signal }
+
+  // Connect the node after it is created via context menu
+  useEventListener(
+    canvas.canvas,
+    'connect-new-default-node',
+    (createEvent) => {
+      if (!(createEvent instanceof CustomEvent))
+        throw new Error('Invalid event')
+
+      const node: unknown = createEvent.detail?.node
+      if (!(node instanceof LGraphNode)) throw new Error('Invalid node')
+
+      disconnectOnReset = false
+      createEvent.preventDefault()
+      canvas.linkConnector.connectToNode(node, e)
+    },
+    options
+  )
+
+  // Reset when the context menu is closed
+  const cancelResetOnContextClose = useEventListener(
+    menu.controller.signal,
+    'abort',
+    reset,
+    options
+  )
 }
 
 // Disable litegraph's default behavior of release link and search box.
-const canvasStore = useCanvasStore()
 watchEffect(() => {
-  if (canvasStore.canvas) {
-    LiteGraph.release_link_on_empty_shows_menu = false
-    canvasStore.canvas.allow_searchbox = false
-  }
+  const { canvas } = canvasStore
+  if (!canvas) return
+
+  LiteGraph.release_link_on_empty_shows_menu = false
+  canvas.allow_searchbox = false
+
+  useEventListener(
+    canvas.linkConnector.events,
+    'dropped-on-canvas',
+    handleDroppedOnCanvas
+  )
 })
 
 const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
   if (e.detail.subType === 'empty-double-click') {
-    showSearchBox(e)
-  } else if (e.detail.subType === 'empty-release') {
-    handleCanvasEmptyRelease(e)
+    showSearchBox(e.detail.originalEvent)
   } else if (e.detail.subType === 'group-double-click') {
     const group = e.detail.group
     const [_, y] = group.pos
     const relativeY = e.detail.originalEvent.canvasY - y
     // Show search box if the click is NOT on the title bar
     if (relativeY > group.titleHeight) {
-      showSearchBox(e)
+      showSearchBox(e.detail.originalEvent)
     }
   }
 }
 
-const linkReleaseAction = computed(() => {
-  return settingStore.get('Comfy.LinkRelease.Action')
-})
+const linkReleaseAction = computed(() =>
+  settingStore.get('Comfy.LinkRelease.Action')
+)
 
-const linkReleaseActionShift = computed(() => {
-  return settingStore.get('Comfy.LinkRelease.ActionShift')
-})
+const linkReleaseActionShift = computed(() =>
+  settingStore.get('Comfy.LinkRelease.ActionShift')
+)
 
-const handleCanvasEmptyRelease = (e: LiteGraphCanvasEvent) => {
-  const detail = e.detail as OriginalEvent
-  const shiftPressed = detail.originalEvent.shiftKey
+// Prevent normal LinkConnector reset (called by CanvasPointer.finally)
+const preventDefault = (e: Event) => e.preventDefault()
+const cancelNextReset = (e: CustomEvent<CanvasPointerEvent>) => {
+  e.preventDefault()
 
-  const action = shiftPressed
+  const canvas = canvasStore.getCanvas()
+  canvas.linkConnector.state.snapLinksPos = [e.detail.canvasX, e.detail.canvasY]
+  useEventListener(canvas.linkConnector.events, 'reset', preventDefault, {
+    once: true
+  })
+}
+
+const handleDroppedOnCanvas = (e: CustomEvent<CanvasPointerEvent>) => {
+  disconnectOnReset = true
+  const action = e.detail.shiftKey
     ? linkReleaseActionShift.value
     : linkReleaseAction.value
   switch (action) {
     case LinkReleaseTriggerAction.SEARCH_BOX:
-      showSearchBox(e)
+      cancelNextReset(e)
+      showSearchBox(e.detail)
       break
     case LinkReleaseTriggerAction.CONTEXT_MENU:
-      showContextMenu(e)
+      cancelNextReset(e)
+      showContextMenu(e.detail)
       break
     case LinkReleaseTriggerAction.NO_ACTION:
     default:
@@ -249,6 +280,25 @@ const handleCanvasEmptyRelease = (e: LiteGraphCanvasEvent) => {
   }
 }
 
+// Resets litegraph state
+const reset = () => {
+  listenerController?.abort()
+  listenerController = null
+  triggerEvent = null
+
+  const canvas = canvasStore.getCanvas()
+  canvas.linkConnector.events.removeEventListener('reset', preventDefault)
+  if (disconnectOnReset) canvas.linkConnector.disconnectLinks()
+
+  canvas.linkConnector.reset()
+  canvas.setDirty(true, true)
+}
+
+// Reset connecting links when the search box is closed
+watch(visible, () => {
+  if (!visible.value) reset()
+})
+
 useEventListener(document, 'litegraph:canvas', canvasEventHandler)
 </script>
 

src/components/sidebar/SidebarIcon.spec.ts

@@ -5,7 +5,7 @@ import OverlayBadge from 'primevue/overlaybadge'
 import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
 
-import SidebarIcon from '../SidebarIcon.vue'
+import SidebarIcon from './SidebarIcon.vue'
 
 type SidebarIconProps = {
   icon: string

src/components/topbar/CurrentUserButton.vue

@@ -0,0 +1,49 @@
+<!-- A button that shows current authenticated user's avatar -->
+<template>
+  <div>
+    <Button
+      v-if="isAuthenticated"
+      class="user-profile-button p-1"
+      severity="secondary"
+      text
+      aria-label="user profile"
+      @click="popover?.toggle($event)"
+    >
+      <div
+        class="flex items-center rounded-full bg-[var(--p-content-background)]"
+      >
+        <Avatar
+          :image="photoURL"
+          :icon="photoURL ? undefined : 'pi pi-user'"
+          shape="circle"
+          aria-label="User Avatar"
+        />
+
+        <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.5rem' }" />
+      </div>
+    </Button>
+
+    <Popover ref="popover" :show-arrow="false">
+      <CurrentUserPopover />
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Avatar from 'primevue/avatar'
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+import CurrentUserPopover from './CurrentUserPopover.vue'
+
+const authStore = useFirebaseAuthStore()
+
+const popover = ref<InstanceType<typeof Popover> | null>(null)
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+const photoURL = computed<string | undefined>(
+  () => authStore.currentUser?.photoURL ?? undefined
+)
+</script>

src/components/topbar/CurrentUserPopover.vue

@@ -0,0 +1,80 @@
+<!-- A popover that shows current user information and actions -->
+<template>
+  <div class="current-user-popover w-72">
+    <!-- User Info Section -->
+    <div class="p-3">
+      <div class="flex flex-col items-center">
+        <Avatar
+          class="mb-3"
+          :image="user?.photoURL ?? undefined"
+          :icon="user?.photoURL ? undefined : 'pi pi-user'"
+          shape="circle"
+          size="large"
+          aria-label="User Avatar"
+        />
+
+        <!-- User Details -->
+        <h3 class="text-lg font-semibold truncate my-0 mb-1">
+          {{ user?.displayName || $t('g.user') }}
+        </h3>
+        <p v-if="user?.email" class="text-sm text-muted truncate my-0">
+          {{ user.email }}
+        </p>
+      </div>
+    </div>
+
+    <Divider class="my-2" />
+
+    <Button
+      class="justify-start"
+      :label="$t('userSettings.title')"
+      icon="pi pi-cog"
+      text
+      fluid
+      severity="secondary"
+      @click="handleOpenUserSettings"
+    />
+
+    <Divider class="my-2" />
+
+    <div class="w-full flex flex-col gap-2 p-2">
+      <div class="text-muted text-sm">
+        {{ $t('credits.yourCreditBalance') }}
+      </div>
+      <div class="flex justify-between items-center">
+        <UserCredit text-class="text-2xl" />
+        <Button :label="$t('credits.topUp.topUp')" @click="handleTopUp" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Avatar from 'primevue/avatar'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import { computed, onMounted } from 'vue'
+
+import UserCredit from '@/components/common/UserCredit.vue'
+import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const authStore = useFirebaseAuthStore()
+const authService = useFirebaseAuthService()
+const dialogService = useDialogService()
+
+const user = computed(() => authStore.currentUser)
+
+const handleOpenUserSettings = () => {
+  dialogService.showSettingsDialog('user')
+}
+
+const handleTopUp = () => {
+  dialogService.showTopUpCreditsDialog()
+}
+
+onMounted(() => {
+  void authService.fetchBalance()
+})
+</script>

src/components/topbar/TopMenubar.vue

@@ -12,6 +12,7 @@
     </div>
     <div ref="menuRight" class="comfyui-menu-right flex-shrink-0" />
     <Actionbar />
+    <CurrentUserButton class="flex-shrink-0" />
     <BottomPanelToggleButton class="flex-shrink-0" />
     <Button
       v-tooltip="{ value: $t('menu.hideMenu'), showDelay: 300 }"
@@ -44,6 +45,7 @@ import { computed, onMounted, provide, ref } from 'vue'
 import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import BottomPanelToggleButton from '@/components/topbar/BottomPanelToggleButton.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
@@ -57,6 +59,7 @@ import {
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
+
 const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )

src/composables/element/useAbsolutePosition.ts

@@ -1,7 +1,7 @@
 import type { Size, Vector2 } from '@comfyorg/litegraph'
-import { CSSProperties, ref } from 'vue'
+import { CSSProperties, computed, ref } from 'vue'
 
-import { app } from '@/scripts/app'
+import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { useCanvasStore } from '@/stores/graphStore'
 
 export interface PositionConfig {
@@ -13,70 +13,56 @@ export interface PositionConfig {
   scale?: number
 }
 
-export function useAbsolutePosition() {
+export function useAbsolutePosition(options: { useTransform?: boolean } = {}) {
+  const { useTransform = false } = options
+
   const canvasStore = useCanvasStore()
-  const style = ref<CSSProperties>({
-    position: 'fixed',
-    left: '0px',
-    top: '0px',
-    width: '0px',
-    height: '0px'
+  const lgCanvas = canvasStore.getCanvas()
+  const { canvasPosToClientPos } = useCanvasPositionConversion(
+    lgCanvas.canvas,
+    lgCanvas
+  )
+
+  const position = ref<PositionConfig>({
+    pos: [0, 0],
+    size: [0, 0]
+  })
+
+  const style = computed<CSSProperties>(() => {
+    const { pos, size, scale = lgCanvas.ds.scale } = position.value
+    const [left, top] = canvasPosToClientPos(pos)
+    const [width, height] = size
+
+    return useTransform
+      ? {
+          position: 'fixed',
+          transformOrigin: '0 0',
+          transform: `scale(${scale})`,
+          left: `${left}px`,
+          top: `${top}px`,
+          width: `${width}px`,
+          height: `${height}px`
+        }
+      : {
+          position: 'fixed',
+          left: `${left}px`,
+          top: `${top}px`,
+          width: `${width * scale}px`,
+          height: `${height * scale}px`
+        }
   })
 
   /**
    * Update the position of the element on the litegraph canvas.
    *
    * @param config
-   * @param extraStyle
    */
-  const updatePosition = (
-    config: PositionConfig,
-    extraStyle?: CSSProperties
-  ) => {
-    const { pos, size, scale = canvasStore.canvas?.ds?.scale ?? 1 } = config
-    const [left, top] = app.canvasPosToClientPos(pos)
-    const [width, height] = size
-
-    style.value = {
-      ...style.value,
-      left: `${left}px`,
-      top: `${top}px`,
-      width: `${width * scale}px`,
-      height: `${height * scale}px`,
-      ...extraStyle
-    }
-  }
-
-  /**
-   * Update the position and size of the element on the litegraph canvas,
-   * with CSS transform scaling applied.
-   *
-   * @param config
-   * @param extraStyle
-   */
-  const updatePositionWithTransform = (
-    config: PositionConfig,
-    extraStyle?: CSSProperties
-  ) => {
-    const { pos, size, scale = canvasStore.canvas?.ds?.scale ?? 1 } = config
-    const [left, top] = app.canvasPosToClientPos(pos)
-    const [width, height] = size
-
-    style.value = {
-      ...style.value,
-      transformOrigin: '0 0',
-      transform: `scale(${scale})`,
-      left: `${left}px`,
-      top: `${top}px`,
-      width: `${width}px`,
-      height: `${height}px`,
-      ...extraStyle
-    }
+  const updatePosition = (config: PositionConfig) => {
+    position.value = config
   }
 
   return {
     style,
-    updatePosition,
-    updatePositionWithTransform
+    updatePosition
   }
 }

src/composables/element/useCanvasPositionConversion.ts

@@ -16,8 +16,8 @@ export const useCanvasPositionConversion = (
   const clientPosToCanvasPos = (pos: Vector2): Vector2 => {
     const { offset, scale } = lgCanvas.ds
     return [
-      (pos[0] - left.value) / scale + offset[0],
-      (pos[1] - top.value) / scale + offset[1]
+      (pos[0] - left.value) / scale - offset[0],
+      (pos[1] - top.value) / scale - offset[1]
     ]
   }
 

src/composables/nodePack/useWorkflowPacks.ts

@@ -5,6 +5,8 @@ import { useNodePacks } from '@/composables/nodePack/useNodePacks'
 import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { app } from '@/scripts/app'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { SelectedVersion, UseNodePacksOptions } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 
@@ -22,6 +24,8 @@ const CORE_NODES_PACK_NAME = 'comfy-core'
  * associated node packs from the registry
  */
 export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
+  const nodeDefStore = useNodeDefStore()
+  const systemStatsStore = useSystemStatsStore()
   const { search } = useComfyRegistryStore()
 
   const workflowPacks = ref<WorkflowPack[]>([])
@@ -36,6 +40,13 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
     return undefined
   }
 
+  /**
+   * Clean the version string to be used in the registry search.
+   * Removes the leading 'v' and trims whitespace and line terminators.
+   */
+  const cleanVersionString = (version: string) =>
+    version.replace(/^v/, '').trim()
+
   /**
    * Infer the pack for a node by searching the registry for packs that have nodes
    * with the same name.
@@ -44,6 +55,22 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
     node: LGraphNode
   ): Promise<WorkflowPack | undefined> => {
     const nodeName = node.type
+
+    // Check if node is a core node
+    const nodeDef = nodeDefStore.nodeDefsByName[nodeName]
+    if (nodeDef?.nodeSource.type === 'core') {
+      if (!systemStatsStore.systemStats) {
+        await systemStatsStore.fetchSystemStats()
+      }
+      return {
+        id: CORE_NODES_PACK_NAME,
+        version:
+          systemStatsStore.systemStats?.system?.comfyui_version ??
+          SelectedVersion.NIGHTLY
+      }
+    }
+
+    // Search the registry for non-core nodes
     const searchResult = await search.call({
       comfy_node_search: nodeName,
       limit: 1
@@ -70,7 +97,9 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
     if (packId === CORE_NODES_PACK_NAME) return undefined
 
     const version =
-      typeof node.properties.ver === 'string' ? node.properties.ver : undefined
+      typeof node.properties.ver === 'string'
+        ? cleanVersionString(node.properties.ver)
+        : undefined
 
     return {
       id: packId,

src/composables/setting/useSettingUI.ts

@@ -1,16 +1,35 @@
-import { computed, onMounted, ref } from 'vue'
+import {
+  type Component,
+  computed,
+  defineAsyncComponent,
+  onMounted,
+  ref
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
 import type { SettingParams } from '@/types/settingTypes'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
 
+interface SettingPanelItem {
+  node: SettingTreeNode
+  component: Component
+}
+
 export function useSettingUI(
-  defaultPanel?: 'about' | 'keybinding' | 'extension' | 'server-config'
+  defaultPanel?:
+    | 'about'
+    | 'keybinding'
+    | 'extension'
+    | 'server-config'
+    | 'user'
+    | 'credits'
 ) {
   const { t } = useI18n()
+  const firebaseAuthStore = useFirebaseAuthStore()
   const settingStore = useSettingStore()
   const activeCategory = ref<SettingTreeNode | null>(null)
 
@@ -40,75 +59,142 @@ export function useSettingUI(
     () => settingRoot.value.children ?? []
   )
 
-  // Define panel nodes
-  const aboutPanelNode: SettingTreeNode = {
-    key: 'about',
-    label: 'About',
-    children: []
+  // Define panel items
+  const aboutPanel: SettingPanelItem = {
+    node: {
+      key: 'about',
+      label: 'About',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/AboutPanel.vue')
+    )
   }
 
-  const keybindingPanelNode: SettingTreeNode = {
-    key: 'keybinding',
-    label: 'Keybinding',
-    children: []
+  const creditsPanel: SettingPanelItem = {
+    node: {
+      key: 'credits',
+      label: 'Credits',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/CreditsPanel.vue')
+    )
   }
 
-  const extensionPanelNode: SettingTreeNode = {
-    key: 'extension',
-    label: 'Extension',
-    children: []
+  const userPanel: SettingPanelItem = {
+    node: {
+      key: 'user',
+      label: 'User',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/UserPanel.vue')
+    )
   }
 
-  const serverConfigPanelNode: SettingTreeNode = {
-    key: 'server-config',
-    label: 'Server-Config',
-    children: []
+  const keybindingPanel: SettingPanelItem = {
+    node: {
+      key: 'keybinding',
+      label: 'Keybinding',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/KeybindingPanel.vue')
+    )
   }
 
-  /**
-   * Server config panel is only available in Electron
-   */
-  const serverConfigPanelNodeList = computed<SettingTreeNode[]>(() => {
-    return isElectron() ? [serverConfigPanelNode] : []
-  })
+  const extensionPanel: SettingPanelItem = {
+    node: {
+      key: 'extension',
+      label: 'Extension',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/ExtensionPanel.vue')
+    )
+  }
+
+  const serverConfigPanel: SettingPanelItem = {
+    node: {
+      key: 'server-config',
+      label: 'Server-Config',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/ServerConfigPanel.vue')
+    )
+  }
+
+  const panels = computed<SettingPanelItem[]>(() =>
+    [
+      aboutPanel,
+      creditsPanel,
+      userPanel,
+      keybindingPanel,
+      extensionPanel
+    ].filter((panel) => panel.component)
+  )
 
   /**
    * The default category to show when the dialog is opened.
    */
   const defaultCategory = computed<SettingTreeNode>(() => {
-    return defaultPanel
-      ? settingCategories.value.find((x) => x.key === defaultPanel) ??
-          settingCategories.value[0]
-      : settingCategories.value[0]
+    if (!defaultPanel) return settingCategories.value[0]
+    // Search through all groups in groupedMenuTreeNodes
+    for (const group of groupedMenuTreeNodes.value) {
+      const found = group.children?.find((node) => node.key === defaultPanel)
+      if (found) return found
+    }
+    return settingCategories.value[0]
   })
 
-  /**
-   * Translated all categories with labels
-   */
-  const translatedCategories = computed<SettingTreeNode[]>(() => {
-    return [
-      ...settingCategories.value,
-      keybindingPanelNode,
-      extensionPanelNode,
-      ...serverConfigPanelNodeList.value,
-      aboutPanelNode
-    ].map((node) => ({
-      ...node,
-      translatedLabel: t(
-        `settingsCategories.${normalizeI18nKey(node.label)}`,
-        node.label
-      )
-    }))
+  const translateCategory = (node: SettingTreeNode) => ({
+    ...node,
+    translatedLabel: t(
+      `settingsCategories.${normalizeI18nKey(node.label)}`,
+      node.label
+    )
   })
 
+  const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
+    // Account settings - only show credits when user is authenticated
+    {
+      key: 'account',
+      label: 'Account',
+      children: [
+        userPanel.node,
+        ...(firebaseAuthStore.isAuthenticated ? [creditsPanel.node] : [])
+      ].map(translateCategory)
+    },
+    // Normal settings stored in the settingStore
+    {
+      key: 'settings',
+      label: 'Application Settings',
+      children: settingCategories.value.map(translateCategory)
+    },
+    // Special settings such as about, keybinding, extension, server-config
+    {
+      key: 'specialSettings',
+      label: 'Special Settings',
+      children: [
+        keybindingPanel.node,
+        extensionPanel.node,
+        aboutPanel.node,
+        ...(isElectron() ? [serverConfigPanel.node] : [])
+      ].map(translateCategory)
+    }
+  ])
+
   onMounted(() => {
     activeCategory.value = defaultCategory.value
   })
 
   return {
+    panels,
     activeCategory,
     defaultCategory,
-    allCategories: translatedCategories,
+    groupedMenuTreeNodes,
     settingCategories
   }
 }

src/composables/useCanvasDrop.ts

@@ -29,12 +29,10 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
         const node = dndData.data as RenderedTreeExplorerNode
         if (node.data instanceof ComfyNodeDefImpl) {
           const nodeDef = node.data
-          // Add an offset on x to make sure after adding the node, the cursor
+          const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
+          // Add an offset on y to make sure after adding the node, the cursor
           // is on the node (top left corner)
-          const pos = comfyApp.clientPosToCanvasPos([
-            loc.clientX,
-            loc.clientY + LiteGraph.NODE_TITLE_HEIGHT
-          ])
+          pos[1] += LiteGraph.NODE_TITLE_HEIGHT
           litegraphService.addNodeOnGraph(nodeDef, { pos })
         } else if (node.data instanceof ComfyModelDef) {
           const model = node.data

src/composables/useCoreCommands.ts

@@ -13,6 +13,7 @@ import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
@@ -31,6 +32,8 @@ export function useCoreCommands(): ComfyCommand[] {
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()
   const colorPaletteStore = useColorPaletteStore()
+  const firebaseAuthService = useFirebaseAuthService()
+  const toastStore = useToastStore()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
   const getSelectedNodes = (): LGraphNode[] => {
@@ -55,8 +58,6 @@ export function useCoreCommands(): ComfyCommand[] {
     })
   }
 
-  const commonProps = { source: 'System' }
-
   const commands = [
     {
       id: 'Comfy.NewBlankWorkflow',
@@ -184,7 +185,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Interrupt',
       function: async () => {
         await api.interrupt()
-        useToastStore().add({
+        toastStore.add({
           severity: 'info',
           summary: t('g.interrupted'),
           detail: t('toastMessages.interrupted'),
@@ -198,7 +199,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Clear Pending Tasks',
       function: async () => {
         await useQueueStore().clear(['queue'])
-        useToastStore().add({
+        toastStore.add({
           severity: 'info',
           summary: t('g.confirmed'),
           detail: t('toastMessages.pendingTasksDeleted'),
@@ -246,7 +247,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Fit view to selected nodes',
       function: () => {
         if (app.canvas.empty) {
-          useToastStore().add({
+          toastStore.add({
             severity: 'error',
             summary: t('toastMessages.emptyCanvas'),
             life: 3000
@@ -328,7 +329,7 @@ export function useCoreCommands(): ComfyCommand[] {
       function: () => {
         const { canvas } = app
         if (!canvas.selectedItems?.size) {
-          useToastStore().add({
+          toastStore.add({
             severity: 'error',
             summary: t('toastMessages.nothingToGroup'),
             detail: t('toastMessages.pleaseSelectNodesToGroup'),
@@ -579,6 +580,22 @@ export function useCoreCommands(): ComfyCommand[] {
         })
       }
     },
+    {
+      id: 'Comfy.ContactSupport',
+      icon: 'pi pi-question',
+      label: 'Contact Support',
+      versionAdded: '1.17.8',
+      function: () => {
+        dialogService.showIssueReportDialog({
+          title: t('issueReport.contactSupportTitle'),
+          subtitle: t('issueReport.contactSupportDescription'),
+          panelProps: {
+            errorType: 'ContactSupport',
+            defaultFields: ['Workflow', 'Logs', 'SystemStats', 'Settings']
+          }
+        })
+      }
+    },
     {
       id: 'Comfy.Help.OpenComfyUIForum',
       icon: 'pi pi-comments',
@@ -616,8 +633,26 @@ export function useCoreCommands(): ComfyCommand[] {
       function: () => {
         dialogService.showManagerProgressDialog()
       }
+    },
+    {
+      id: 'Comfy.User.OpenSignInDialog',
+      icon: 'pi pi-user',
+      label: 'Open Sign In Dialog',
+      versionAdded: '1.17.6',
+      function: async () => {
+        await dialogService.showSignInDialog()
+      }
+    },
+    {
+      id: 'Comfy.User.SignOut',
+      icon: 'pi pi-sign-out',
+      label: 'Sign Out',
+      versionAdded: '1.18.1',
+      function: async () => {
+        await firebaseAuthService.logout()
+      }
     }
   ]
 
-  return commands.map((command) => ({ ...command, ...commonProps }))
+  return commands.map((command) => ({ ...command, source: 'System' }))
 }

src/composables/usePaste.ts

@@ -38,6 +38,15 @@ export const usePaste = () => {
   }
 
   useEventListener(document, 'paste', async (e) => {
+    const isTargetInGraph =
+      e.target instanceof Element &&
+      (e.target.classList.contains('litegraph') ||
+        e.target.classList.contains('graph-canvas-container') ||
+        e.target.id === 'graph-canvas')
+
+    // If the target is not in the graph, we don't want to handle the paste event
+    if (!isTargetInGraph) return
+
     // ctrl+shift+v is used to paste nodes with connections
     // this is handled by litegraph
     if (workspaceStore.shiftDown) return

src/composables/widgets/useComboWidget.ts

@@ -18,7 +18,6 @@ import {
   type ComfyWidgetConstructorV2,
   addValueControlWidgets
 } from '@/scripts/widgets'
-import { generateUUID } from '@/utils/formatUtil'
 
 import { useRemoteWidget } from './useRemoteWidget'
 
@@ -32,7 +31,6 @@ const getDefaultValue = (inputSpec: ComboInputSpec) => {
 const addMultiSelectWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
   const widgetValue = ref<string[]>([])
   const widget = new ComponentWidgetImpl({
-    id: generateUUID(),
     node,
     name: inputSpec.name,
     component: MultiSelectWidget,

src/config/comfyApi.ts

@@ -0,0 +1,3 @@
+export const COMFY_API_BASE_URL = __USE_PROD_CONFIG__
+  ? 'https://api.comfy.org'
+  : 'https://stagingapi.comfy.org'

src/config/firebase.ts

@@ -1,6 +1,17 @@
 import { FirebaseOptions } from 'firebase/app'
 
-export const FIREBASE_CONFIG: FirebaseOptions = {
+const DEV_CONFIG: FirebaseOptions = {
+  apiKey: 'AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE',
+  authDomain: 'dreamboothy-dev.firebaseapp.com',
+  databaseURL: 'https://dreamboothy-dev-default-rtdb.firebaseio.com',
+  projectId: 'dreamboothy-dev',
+  storageBucket: 'dreamboothy-dev.appspot.com',
+  messagingSenderId: '313257147182',
+  appId: '1:313257147182:web:be38f6ebf74345fc7618bf',
+  measurementId: 'G-YEVSMYXSPY'
+}
+
+const PROD_CONFIG: FirebaseOptions = {
   apiKey: 'AIzaSyC2-fomLqgCjb7ELwta1I9cEarPK8ziTGs',
   authDomain: 'dreamboothy.firebaseapp.com',
   databaseURL: 'https://dreamboothy-default-rtdb.firebaseio.com',
@@ -10,3 +21,8 @@ export const FIREBASE_CONFIG: FirebaseOptions = {
   appId: '1:357148958219:web:f5917f72e5f36a2015310e',
   measurementId: 'G-3ZBD3MBTG4'
 }
+
+// To test with prod config while using dev server, set USE_PROD_CONFIG=true in .env
+export const FIREBASE_CONFIG: FirebaseOptions = __USE_PROD_CONFIG__
+  ? PROD_CONFIG
+  : DEV_CONFIG

src/constants/coreMenuCommands.ts

@@ -23,5 +23,8 @@ export const CORE_MENU_COMMANDS = [
       'Comfy.Help.OpenComfyUIForum'
     ]
   ],
-  [['Help'], ['Comfy.Help.AboutComfyUI', 'Comfy.Feedback']]
+  [
+    ['Help'],
+    ['Comfy.Help.AboutComfyUI', 'Comfy.Feedback', 'Comfy.ContactSupport']
+  ]
 ]

src/constants/coreSettings.ts

@@ -1,5 +1,4 @@
-import { LinkMarkerShape } from '@comfyorg/litegraph'
-import { LiteGraph } from '@comfyorg/litegraph'
+import { LinkMarkerShape, LiteGraph } from '@comfyorg/litegraph'
 
 import type { ColorPalettes } from '@/schemas/colorPaletteSchema'
 import type { Keybinding } from '@/schemas/keyBindingSchema'
@@ -29,7 +28,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Action on link release (No modifier)',
     type: 'combo',
     options: Object.values(LinkReleaseTriggerAction),
-    defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU
+    defaultValue: LinkReleaseTriggerAction.SEARCH_BOX
   },
   {
     id: 'Comfy.LinkRelease.ActionShift',
@@ -37,7 +36,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Action on link release (Shift)',
     type: 'combo',
     options: Object.values(LinkReleaseTriggerAction),
-    defaultValue: LinkReleaseTriggerAction.SEARCH_BOX
+    defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU
   },
   {
     id: 'Comfy.NodeSearchBoxImpl.NodePreview',
@@ -88,6 +87,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     // Default to small if the window is less than 1536px(2xl) wide.
     defaultValue: () => (window.innerWidth < 1536 ? 'small' : 'normal')
   },
+  {
+    id: 'Comfy.Sidebar.UnifiedWidth',
+    category: ['Appearance', 'Sidebar', 'UnifiedWidth'],
+    name: 'Unified sidebar width',
+    type: 'boolean',
+    defaultValue: true,
+    versionAdded: '1.18.1'
+  },
   {
     id: 'Comfy.TextareaWidget.FontSize',
     category: ['Appearance', 'Node Widget', 'TextareaWidget', 'FontSize'],
@@ -794,5 +801,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: true,
     versionAdded: '1.16.1'
+  },
+  {
+    id: 'LiteGraph.Node.DefaultPadding',
+    name: 'Always shrink new nodes',
+    tooltip:
+      'Resize nodes to the smallest possible size when created. When disabled, a newly added node will be widened slightly to show widget values.',
+    type: 'boolean',
+    defaultValue: false,
+    versionAdded: '1.18.0'
   }
 ]

src/extensions/core/electronAdapter.ts

@@ -158,6 +158,27 @@ import { checkMirrorReachable } from '@/utils/networkUtil'
           window.open('https://comfyorg.notion.site/', '_blank')
         }
       },
+      {
+        id: 'Comfy-Desktop.CheckForUpdates',
+        label: 'Check for Updates',
+        icon: 'pi pi-sync',
+        async function() {
+          const updateAvailable = await electronAPI.checkForUpdates({
+            disableUpdateReadyAction: true
+          })
+          if (updateAvailable.isUpdateAvailable) {
+            const version = updateAvailable.version
+            const proceed = await useDialogService().confirm({
+              title: t('desktopUpdate.updateFoundTitle', { version }),
+              message: t('desktopUpdate.updateAvailableMessage'),
+              type: 'default'
+            })
+            if (proceed) {
+              electronAPI.restartAndInstall()
+            }
+          }
+        }
+      },
       {
         id: 'Comfy-Desktop.Reinstall',
         label: 'Reinstall',
@@ -223,7 +244,7 @@ import { checkMirrorReachable } from '@/utils/networkUtil'
       },
       {
         path: ['Help'],
-        commands: ['Comfy-Desktop.Reinstall']
+        commands: ['Comfy-Desktop.CheckForUpdates', 'Comfy-Desktop.Reinstall']
       }
     ],
 

src/extensions/core/load3d.ts

@@ -14,7 +14,6 @@ import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useToastStore } from '@/stores/toastStore'
-import { generateUUID } from '@/utils/formatUtil'
 
 useExtensionService().registerExtension({
   name: 'Comfy.Load3D',
@@ -39,6 +38,16 @@ useExtensionService().registerExtension({
       defaultValue: true,
       experimental: true
     },
+    {
+      id: 'Comfy.Load3D.BackgroundColor',
+      category: ['3D', 'Scene', 'Initial Background Color'],
+      name: 'Initial Background Color',
+      tooltip:
+        'Controls the default background color of the 3D scene. This setting determines the background appearance when a new 3D widget is created, but can be adjusted individually for each widget after creation.',
+      type: 'color',
+      defaultValue: '282828',
+      experimental: true
+    },
     {
       id: 'Comfy.Load3D.CameraType',
       category: ['3D', 'Camera', 'Initial Camera Type'],
@@ -49,6 +58,51 @@ useExtensionService().registerExtension({
       options: ['perspective', 'orthographic'],
       defaultValue: 'perspective',
       experimental: true
+    },
+    {
+      id: 'Comfy.Load3D.LightIntensity',
+      category: ['3D', 'Light', 'Initial Light Intensity'],
+      name: 'Initial Light Intensity',
+      tooltip:
+        'Sets the default brightness level of lighting in the 3D scene. This value determines how intensely lights illuminate objects when a new 3D widget is created, but can be adjusted individually for each widget after creation.',
+      type: 'number',
+      defaultValue: 3,
+      experimental: true
+    },
+    {
+      id: 'Comfy.Load3D.LightIntensityMaximum',
+      category: ['3D', 'Light', 'Light Intensity Maximum'],
+      name: 'Light Intensity Maximum',
+      tooltip:
+        'Sets the maximum allowable light intensity value for 3D scenes. This defines the upper brightness limit that can be set when adjusting lighting in any 3D widget.',
+      type: 'number',
+      defaultValue: 10,
+      experimental: true
+    },
+    {
+      id: 'Comfy.Load3D.LightIntensityMinimum',
+      category: ['3D', 'Light', 'Light Intensity Minimum'],
+      name: 'Light Intensity Minimum',
+      tooltip:
+        'Sets the minimum allowable light intensity value for 3D scenes. This defines the lower brightness limit that can be set when adjusting lighting in any 3D widget.',
+      type: 'number',
+      defaultValue: 1,
+      experimental: true
+    },
+    {
+      id: 'Comfy.Load3D.LightAdjustmentIncrement',
+      category: ['3D', 'Light', 'Light Adjustment Increment'],
+      name: 'Light Adjustment Increment',
+      tooltip:
+        'Controls the increment size when adjusting light intensity in 3D scenes. A smaller step value allows for finer control over lighting adjustments, while a larger value results in more noticeable changes per adjustment.',
+      type: 'slider',
+      attrs: {
+        min: 0.1,
+        max: 1,
+        step: 0.1
+      },
+      defaultValue: 0.5,
+      experimental: true
     }
   ],
   getCustomWidgets() {
@@ -118,7 +172,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3D,
@@ -259,7 +312,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3DAnimation,
@@ -355,7 +407,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3D,
@@ -432,7 +483,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3DAnimation,

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -91,12 +91,18 @@ class Load3DConfiguration {
 
     this.load3d.togglePreview(showPreview)
 
-    const bgColor = this.load3d.loadNodeProperty('Background Color', '#282828')
+    const bgColor = this.load3d.loadNodeProperty(
+      'Background Color',
+      '#' + useSettingStore().get('Comfy.Load3D.BackgroundColor')
+    )
 
     this.load3d.setBackgroundColor(bgColor)
 
     const lightIntensity: number = Number(
-      this.load3d.loadNodeProperty('Light Intensity', 5)
+      this.load3d.loadNodeProperty(
+        'Light Intensity',
+        useSettingStore().get('Comfy.Load3D.LightIntensity')
+      )
     )
 
     this.load3d.setLightIntensity(lightIntensity)

src/extensions/core/saveImageExtraOutput.ts

@@ -2,16 +2,26 @@ import { applyTextReplacements } from '@/utils/searchAndReplace'
 
 import { app } from '../../scripts/app'
 
+const saveNodeTypes = new Set([
+  'SaveImage',
+  'SaveAnimatedWEBP',
+  'SaveWEBM',
+  'SaveAudio',
+  'SaveGLB',
+  'SaveAnimatedPNG',
+  'CLIPSave',
+  'VAESave',
+  'ModelSave',
+  'LoraSave',
+  'SaveLatent'
+])
+
 // Use widget values and dates in output filenames
 
 app.registerExtension({
   name: 'Comfy.SaveImageExtraOutput',
   async beforeRegisterNodeDef(nodeType, nodeData, app) {
-    if (
-      nodeData.name === 'SaveImage' ||
-      nodeData.name === 'SaveAnimatedWEBP' ||
-      nodeData.name === 'SaveWEBM'
-    ) {
+    if (saveNodeTypes.has(nodeData.name)) {
       const onNodeCreated = nodeType.prototype.onNodeCreated
       // When the SaveImage node is created we want to override the serialization of the output name widget to run our S&R
       nodeType.prototype.onNodeCreated = function () {

src/extensions/core/saveMesh.ts

@@ -7,7 +7,6 @@ import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
-import { generateUUID } from '@/utils/formatUtil'
 
 useExtensionService().registerExtension({
   name: 'Comfy.SaveGLB',
@@ -30,7 +29,6 @@ useExtensionService().registerExtension({
         }
 
         const widget = new ComponentWidgetImpl({
-          id: generateUUID(),
           node,
           name: inputSpec.name,
           component: Load3D,

src/extensions/core/simpleTouchSupport.ts

@@ -2,42 +2,35 @@ import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
 
 import { app } from '../../scripts/app'
 
-// @ts-expect-error fixme ts strict error
-let touchZooming
+let touchZooming = false
 let touchCount = 0
 
 app.registerExtension({
   name: 'Comfy.SimpleTouchSupport',
   setup() {
-    // @ts-expect-error fixme ts strict error
-    let touchDist
-    // @ts-expect-error fixme ts strict error
-    let touchTime
-    // @ts-expect-error fixme ts strict error
-    let lastTouch
-    // @ts-expect-error fixme ts strict error
-    let lastScale
-    // @ts-expect-error fixme ts strict error
-    function getMultiTouchPos(e) {
+    let touchDist: number | null = null
+    let touchTime: Date | null = null
+    let lastTouch: { clientX: number; clientY: number } | null = null
+    let lastScale: number | null = null
+    function getMultiTouchPos(e: TouchEvent) {
       return Math.hypot(
         e.touches[0].clientX - e.touches[1].clientX,
         e.touches[0].clientY - e.touches[1].clientY
       )
     }
 
-    // @ts-expect-error fixme ts strict error
-    function getMultiTouchCenter(e) {
+    function getMultiTouchCenter(e: TouchEvent) {
       return {
         clientX: (e.touches[0].clientX + e.touches[1].clientX) / 2,
         clientY: (e.touches[0].clientY + e.touches[1].clientY) / 2
       }
     }
 
-    // @ts-expect-error fixme ts strict error
-    app.canvasEl.parentElement.addEventListener(
+    app.canvasEl.parentElement?.addEventListener(
       'touchstart',
       (e: TouchEvent) => {
-        touchCount++
+        touchCount += e.changedTouches.length
+
         lastTouch = null
         lastScale = null
         if (e.touches?.length === 1) {
@@ -59,35 +52,48 @@ app.registerExtension({
       true
     )
 
-    // @ts-expect-error fixme ts strict error
-    app.canvasEl.parentElement.addEventListener('touchend', (e: TouchEvent) => {
-      touchCount--
+    app.canvasEl.parentElement?.addEventListener(
+      'touchend',
+      (e: TouchEvent) => {
+        touchCount -= e.changedTouches.length
 
-      if (e.touches?.length !== 1) touchZooming = false
-      // @ts-expect-error fixme ts strict error
-      if (touchTime && !e.touches?.length) {
-        if (new Date().getTime() - touchTime > 600) {
-          if (e.target === app.canvasEl) {
-            app.canvasEl.dispatchEvent(
-              new PointerEvent('pointerdown', {
-                button: 2,
+        if (e.touches?.length !== 1) touchZooming = false
+        if (touchTime && !e.touches?.length) {
+          if (new Date().getTime() - touchTime.getTime() > 600) {
+            if (e.target === app.canvasEl) {
+              const touch = {
+                button: 2, // Right click
                 clientX: e.changedTouches[0].clientX,
-                clientY: e.changedTouches[0].clientY
+                clientY: e.changedTouches[0].clientY,
+                pointerId: 1, // changedTouches' id is 0, set it to any number
+                isPrimary: true // changedTouches' isPrimary is false, so set it to true
+              }
+              // context menu info set in 'pointerdown' event
+              app.canvasEl.dispatchEvent(new PointerEvent('pointerdown', touch))
+              // then, context menu open after 'pointerup' event
+              setTimeout(() => {
+                app.canvasEl.dispatchEvent(new PointerEvent('pointerup', touch))
               })
-            )
-            e.preventDefault()
+              e.preventDefault()
+            }
           }
+          touchTime = null
         }
-        touchTime = null
       }
-    })
+    )
 
-    // @ts-expect-error fixme ts strict error
-    app.canvasEl.parentElement.addEventListener(
+    app.canvasEl.parentElement?.addEventListener(
       'touchmove',
       (e) => {
-        touchTime = null
-        // @ts-expect-error fixme ts strict error
+        // make a threshold for touchmove to prevent clear touchTime for long press
+        if (touchTime && lastTouch && e.touches?.length === 1) {
+          const onlyTouch = e.touches[0]
+          const deltaX = onlyTouch.clientX - lastTouch.clientX
+          const deltaY = onlyTouch.clientY - lastTouch.clientY
+          if (deltaX * deltaX + deltaY * deltaY > 30) {
+            touchTime = null
+          }
+        }
         if (e.touches?.length === 2 && lastTouch && !e.ctrlKey && !e.shiftKey) {
           e.preventDefault() // Prevent browser from zooming when two textareas are touched
           app.canvas.pointer.isDown = false
@@ -100,7 +106,7 @@ app.registerExtension({
 
           const center = getMultiTouchCenter(e)
 
-          // @ts-expect-error fixme ts strict error
+          if (lastScale === null || touchDist === null) return
           let scale = (lastScale * newTouchDist) / touchDist
 
           const newX = (center.clientX - lastTouch.clientX) / scale
@@ -124,8 +130,7 @@ app.registerExtension({
 
           const newScale = app.canvas.ds.scale
 
-          // @ts-expect-error fixme ts strict error
-          const convertScaleToOffset = (scale) => [
+          const convertScaleToOffset = (scale: number) => [
             center.clientX / scale - app.canvas.ds.offset[0],
             center.clientY / scale - app.canvas.ds.offset[1]
           ]
@@ -147,22 +152,18 @@ app.registerExtension({
 })
 
 const processMouseDown = LGraphCanvas.prototype.processMouseDown
-LGraphCanvas.prototype.processMouseDown = function () {
-  // @ts-expect-error fixme ts strict error
+LGraphCanvas.prototype.processMouseDown = function (e: PointerEvent) {
   if (touchZooming || touchCount) {
     return
   }
   app.canvas.pointer.isDown = false // Prevent context menu from opening on second tap
-  // @ts-expect-error fixme ts strict error
-  return processMouseDown.apply(this, arguments)
+  return processMouseDown.apply(this, [e])
 }
 
 const processMouseMove = LGraphCanvas.prototype.processMouseMove
-LGraphCanvas.prototype.processMouseMove = function () {
-  // @ts-expect-error fixme ts strict error
+LGraphCanvas.prototype.processMouseMove = function (e: PointerEvent) {
   if (touchZooming || touchCount > 1) {
     return
   }
-  // @ts-expect-error fixme ts strict error
-  return processMouseMove.apply(this, arguments)
+  return processMouseMove.apply(this, [e])
 }

src/extensions/core/widgetInputs.ts

@@ -18,16 +18,6 @@ import { mergeInputSpec } from '@/utils/nodeDefUtil'
 import { applyTextReplacements } from '@/utils/searchAndReplace'
 import { isPrimitiveNode } from '@/utils/typeGuardUtil'
 
-const VALID_TYPES = [
-  'STRING',
-  'combo',
-  'number',
-  'toggle',
-  'BOOLEAN',
-  'text',
-  'string'
-]
-
 const replacePropertyName = 'Run widget replace on values'
 export class PrimitiveNode extends LGraphNode {
   controlValues?: any[]
@@ -352,31 +342,6 @@ export class PrimitiveNode extends LGraphNode {
     }
   }
 
-  isValidWidgetLink(
-    originSlot: number,
-    targetNode: LGraphNode,
-    targetWidget: IWidget
-  ) {
-    const config2 = getConfig.call(targetNode, targetWidget.name) ?? [
-      targetWidget.type,
-      targetWidget.options || {}
-    ]
-    if (!isConvertibleWidget(targetWidget, config2)) return false
-
-    const output = this.outputs[originSlot]
-    if (
-      !(
-        output.widget?.[CONFIG] ??
-        (output.widget?.[GET_CONFIG] as () => InputSpec)?.()
-      )
-    ) {
-      // No widget defined for this primitive yet so allow it
-      return true
-    }
-
-    return !!mergeIfValid.call(this, output, config2)
-  }
-
   #isValidConnection(input: INodeInputSlot, forceUpdate?: boolean) {
     // Only allow connections where the configs match
     const output = this.outputs?.[0]
@@ -445,13 +410,6 @@ function getConfig(this: LGraphNode, widgetName: string) {
   )
 }
 
-function isConvertibleWidget(widget: IWidget, config: InputSpec): boolean {
-  return (
-    // @ts-expect-error InputSpec is not typed correctly
-    VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])
-  )
-}
-
 /**
  * Convert a widget to an input slot.
  * @deprecated Widget to socket conversion is no longer necessary, as they co-exist now.

src/locales/en/commands.json

@@ -1,4 +1,7 @@
 {
+  "Comfy-Desktop_CheckForUpdates": {
+    "label": "Check for Updates"
+  },
   "Comfy-Desktop_Folders_OpenCustomNodesFolder": {
     "label": "Open Custom Nodes Folder"
   },
@@ -80,6 +83,9 @@
   "Comfy_ClearWorkflow": {
     "label": "Clear Workflow"
   },
+  "Comfy_ContactSupport": {
+    "label": "Contact Support"
+  },
   "Comfy_DuplicateWorkflow": {
     "label": "Duplicate Current Workflow"
   },
@@ -134,6 +140,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Toggle Progress Dialog"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "Open Mask Editor for Selected Node"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "New Blank Workflow"
   },
@@ -170,6 +179,12 @@
   "Comfy_Undo": {
     "label": "Undo"
   },
+  "Comfy_User_OpenSignInDialog": {
+    "label": "Open Sign In Dialog"
+  },
+  "Comfy_User_SignOut": {
+    "label": "Sign Out"
+  },
   "Workspace_CloseWorkflow": {
     "label": "Close Current Workflow"
   },

src/locales/en/main.json

@@ -1,5 +1,6 @@
 {
   "g": {
+    "user": "User",
     "currentUser": "Current user",
     "empty": "Empty",
     "noWorkflowsFound": "No workflows found.",
@@ -110,7 +111,9 @@
     "migrate": "Migrate",
     "updateAvailable": "Update Available",
     "login": "Login",
-    "learnMore": "Learn more"
+    "learnMore": "Learn more",
+    "amount": "Amount",
+    "unknownError": "Unknown error"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -180,9 +183,24 @@
     "helpFix": "Help Fix This",
     "rating": "Rating",
     "feedbackTitle": "Help us improve ComfyUI by providing feedback",
+    "contactSupportTitle": "Contact Support",
+    "contactSupportDescription": "Please fill in the form below with your report",
+    "selectIssue": "Select the issue",
+    "whatDoYouNeedHelpWith": "What do you need help with?",
+    "whatCanWeInclude": "Specify what to include in the report",
+    "describeTheProblem": "Describe the problem",
+    "email": "Email",
+    "helpTypes": {
+      "billingPayments": "Billing / Payments",
+      "loginAccessIssues": "Login / Access Issues",
+      "giveFeedback": "Give Feedback",
+      "bugReport": "Bug Report",
+      "somethingElse": "Something Else"
+    },
     "validation": {
       "maxLength": "Message too long",
-      "invalidEmail": "Please enter a valid email address"
+      "invalidEmail": "Please enter a valid email address",
+      "selectIssueType": "Please select an issue type"
     }
   },
   "color": {
@@ -602,6 +620,7 @@
     "Workflow": "Workflow",
     "Edit": "Edit",
     "Help": "Help",
+    "Check for Updates": "Check for Updates",
     "Open Custom Nodes Folder": "Open Custom Nodes Folder",
     "Open Inputs Folder": "Open Inputs Folder",
     "Open Logs Folder": "Open Logs Folder",
@@ -629,6 +648,7 @@
     "Zoom Out": "Zoom Out",
     "Clear Pending Tasks": "Clear Pending Tasks",
     "Clear Workflow": "Clear Workflow",
+    "Contact Support": "Contact Support",
     "Duplicate Current Workflow": "Duplicate Current Workflow",
     "Export": "Export",
     "Export (API)": "Export (API)",
@@ -647,6 +667,7 @@
     "Load Default Workflow": "Load Default Workflow",
     "Custom Nodes Manager": "Custom Nodes Manager",
     "Toggle Progress Dialog": "Toggle Progress Dialog",
+    "Open Mask Editor for Selected Node": "Open Mask Editor for Selected Node",
     "New": "New",
     "Clipspace": "Clipspace",
     "Open": "Open",
@@ -659,6 +680,8 @@
     "Show Settings Dialog": "Show Settings Dialog",
     "Toggle Theme (Dark/Light)": "Toggle Theme (Dark/Light)",
     "Undo": "Undo",
+    "Open Sign In Dialog": "Open Sign In Dialog",
+    "Sign Out": "Sign Out",
     "Close Current Workflow": "Close Current Workflow",
     "Next Opened Workflow": "Next Opened Workflow",
     "Previous Opened Workflow": "Previous Opened Workflow",
@@ -724,7 +747,10 @@
     "Load 3D": "Load 3D",
     "Camera": "Camera",
     "Scene": "Scene",
-    "3D": "3D"
+    "3D": "3D",
+    "Light": "Light",
+    "User": "User",
+    "Credits": "Credits"
   },
   "serverConfigItems": {
     "listen": {
@@ -992,7 +1018,9 @@
   "desktopUpdate": {
     "title": "Updating ComfyUI Desktop",
     "description": "ComfyUI Desktop is installing new dependencies.  This may take a few minutes.",
-    "terminalDefaultMessage": "Any console output from the update will be shown here."
+    "terminalDefaultMessage": "Any console output from the update will be shown here.",
+    "updateFoundTitle": "Update Found (v{version})",
+    "updateAvailableMessage": "An update is available. Do you want to restart and update now?"
   },
   "clipboard": {
     "successMessage": "Copied to clipboard",
@@ -1052,11 +1080,22 @@
     "errorCopyImage": "Error copying image: {error}",
     "noTemplatesToExport": "No templates to export",
     "failedToFetchLogs": "Failed to fetch server logs",
-    "migrateToLitegraphReroute": "Reroute nodes will be removed in future versions. Click to migrate to litegraph-native reroute."
+    "migrateToLitegraphReroute": "Reroute nodes will be removed in future versions. Click to migrate to litegraph-native reroute.",
+    "userNotAuthenticated": "User not authenticated",
+    "firebaseAuthNotInitialized": "Firebase Auth not initialized",
+    "failedToFetchBalance": "Failed to fetch balance: {error}",
+    "failedToCreateCustomer": "Failed to create customer: {error}",
+    "failedToInitiateCreditPurchase": "Failed to initiate credit purchase: {error}",
+    "failedToAccessBillingPortal": "Failed to access billing portal: {error}",
+    "failedToPurchaseCredits": "Failed to purchase credits: {error}"
   },
   "auth": {
     "login": {
       "title": "Log in to your account",
+      "signInOrSignUp": "Sign In / Sign Up",
+      "forgotPasswordError": "Failed to send password reset email",
+      "passwordResetSent": "Password reset email sent",
+      "passwordResetSentDetail": "Please check your email for a link to reset your password.",
       "newUser": "New here?",
       "signUp": "Sign up",
       "emailLabel": "Email",
@@ -1088,6 +1127,11 @@
       "signIn": "Sign in",
       "signUpWithGoogle": "Sign up with Google",
       "signUpWithGithub": "Sign up with Github"
+    },
+    "signOut": {
+      "signOut": "Log Out",
+      "success": "Signed out successfully",
+      "successDetail": "You have been signed out of your account."
     }
   },
   "validation": {
@@ -1104,5 +1148,34 @@
       "special": "Must contain at least one special character",
       "match": "Passwords must match"
     }
+  },
+  "credits": {
+    "credits": "Credits",
+    "yourCreditBalance": "Your credit balance",
+    "purchaseCredits": "Purchase Credits",
+    "invoiceHistory": "Invoice History",
+    "faqs": "FAQs",
+    "messageSupport": "Message Support",
+    "lastUpdated": "Last updated",
+    "topUp": {
+      "insufficientTitle": "Insufficient Credits",
+      "insufficientMessage": "You don't have enough credits to run this workflow.",
+      "quickPurchase": "Quick Purchase",
+      "maxAmount": "(Max. $1,000 USD)",
+      "buyNow": "Buy now",
+      "seeDetails": "See details",
+      "topUp": "Top Up"
+    }
+  },
+  "userSettings": {
+    "title": "User Settings",
+    "name": "Name",
+    "email": "Email",
+    "notSet": "Not set",
+    "provider": "Sign in method",
+    "providers": {
+      "google": "Google",
+      "github": "GitHub"
+    }
   }
 }

src/locales/en/settings.json

@@ -108,6 +108,10 @@
       "Hidden": "Hidden"
     }
   },
+  "Comfy_Load3D_BackgroundColor": {
+    "name": "Initial Background Color",
+    "tooltip": "Controls the default background color of the 3D scene. This setting determines the background appearance when a new 3D widget is created, but can be adjusted individually for each widget after creation."
+  },
   "Comfy_Load3D_CameraType": {
     "name": "Initial Camera Type",
     "tooltip": "Controls whether the camera is perspective or orthographic by default when a new 3D widget is created. This default can still be toggled individually for each widget after creation.",
@@ -116,6 +120,22 @@
       "orthographic": "orthographic"
     }
   },
+  "Comfy_Load3D_LightAdjustmentIncrement": {
+    "name": "Light Adjustment Increment",
+    "tooltip": "Controls the increment size when adjusting light intensity in 3D scenes. A smaller step value allows for finer control over lighting adjustments, while a larger value results in more noticeable changes per adjustment."
+  },
+  "Comfy_Load3D_LightIntensity": {
+    "name": "Initial Light Intensity",
+    "tooltip": "Sets the default brightness level of lighting in the 3D scene. This value determines how intensely lights illuminate objects when a new 3D widget is created, but can be adjusted individually for each widget after creation."
+  },
+  "Comfy_Load3D_LightIntensityMaximum": {
+    "name": "Light Intensity Maximum",
+    "tooltip": "Sets the maximum allowable light intensity value for 3D scenes. This defines the upper brightness limit that can be set when adjusting lighting in any 3D widget."
+  },
+  "Comfy_Load3D_LightIntensityMinimum": {
+    "name": "Light Intensity Minimum",
+    "tooltip": "Sets the minimum allowable light intensity value for 3D scenes. This defines the lower brightness limit that can be set when adjusting lighting in any 3D widget."
+  },
   "Comfy_Load3D_ShowGrid": {
     "name": "Initial Grid Visibility",
     "tooltip": "Controls whether the grid is visible by default when a new 3D widget is created. This default can still be toggled individually for each widget after creation."
@@ -273,6 +293,9 @@
       "small": "small"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "Unified sidebar width"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "Snap to grid size",
     "tooltip": "When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid."
@@ -357,6 +380,10 @@
   "LiteGraph_ContextMenu_Scaling": {
     "name": "Scale node combo widget menus (lists) when zoomed in"
   },
+  "LiteGraph_Node_DefaultPadding": {
+    "name": "Always shrink new nodes",
+    "tooltip": "Resize nodes to the smallest possible size when created. When disabled, a newly added node will be widened slightly to show widget values."
+  },
   "LiteGraph_Node_TooltipDelay": {
     "name": "Tooltip Delay"
   },