test: assert background selector mode after clearing image

Strengthen the clear-image test to verify the selector stays in image
mode (upload shown, color picker hidden), not just the store value.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/website/src/components/product/local/DownloadLocalButton.vue

@@ -8,6 +8,7 @@ import {
   useDownloadUrl
 } from '../../../composables/useDownloadUrl'
 import { t } from '../../../i18n/translations'
+import { captureDownloadClick } from '../../../scripts/posthog'
 import BrandButton from '../../common/BrandButton.vue'
 
 const { locale = 'en', class: customClass = '' } = defineProps<{
@@ -69,6 +70,7 @@ const buttons = computed<ButtonSpec[]>(() => {
     size="lg"
     :class="customClass"
     :aria-label="btn.ariaLabel"
+    @click="captureDownloadClick(btn.key)"
   >
     <span class="inline-flex items-center gap-2">
       <img

apps/website/src/scripts/posthog.test.ts

@@ -53,3 +53,28 @@ describe('initPostHog', () => {
     expect(result.$set_once).toHaveProperty('plan', 'free')
   })
 })
+
+describe('captureDownloadClick', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetModules()
+  })
+
+  it('captures the download event with the platform', async () => {
+    const { initPostHog, captureDownloadClick } = await import('./posthog')
+    initPostHog()
+    captureDownloadClick('mac')
+
+    expect(hoisted.mockCapture).toHaveBeenCalledWith(
+      'website:download_button_clicked',
+      { platform: 'mac' }
+    )
+  })
+
+  it('does not capture before PostHog is initialized', async () => {
+    const { captureDownloadClick } = await import('./posthog')
+    captureDownloadClick('windows')
+
+    expect(hoisted.mockCapture).not.toHaveBeenCalled()
+  })
+})

apps/website/src/scripts/posthog.ts

@@ -38,3 +38,12 @@ export function capturePageview() {
     console.error('PostHog pageview capture failed', error)
   }
 }
+
+export function captureDownloadClick(platform: string) {
+  if (!initialized) return
+  try {
+    posthog.capture('website:download_button_clicked', { platform })
+  } catch (error) {
+    console.error('PostHog download click capture failed', error)
+  }
+}

browser_tests/assets/missing/missing_nodes_same_pack.json

@@ -0,0 +1,48 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "TEST_MISSING_PACK_NODE_A",
+      "pos": [48, 86],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "TEST_MISSING_PACK_NODE_A",
+        "cnr_id": "test-missing-node-pack"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 2,
+      "type": "TEST_MISSING_PACK_NODE_B",
+      "pos": [520, 86],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "TEST_MISSING_PACK_NODE_B",
+        "cnr_id": "test-missing-node-pack"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/selectors.ts

@@ -45,6 +45,8 @@ export const TestIds = {
     errorOverlayMessages: 'error-overlay-messages',
     runtimeErrorPanel: 'runtime-error-panel',
     missingNodeCard: 'missing-node-card',
+    missingNodePackExpand: 'missing-node-pack-expand',
+    missingNodePackCount: 'missing-node-pack-count',
     errorCardFindOnGithub: 'error-card-find-on-github',
     errorCardCopy: 'error-card-copy',
     errorDialog: 'error-dialog',

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
@@ -17,245 +18,87 @@ test.describe('Background Image Upload', () => {
     await comfyPage.settings.setSetting('Comfy.Canvas.BackgroundImage', '')
   })
 
+  async function openBackgroundImageSetting(comfyPage: ComfyPage) {
+    await comfyPage.page.keyboard.press('Control+,')
+    await comfyPage.page.locator('text=Appearance').click()
+    return comfyPage.page.locator('#Comfy\\.Canvas\\.BackgroundImage')
+  }
+
   test('should show background image upload component in settings', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-
-    // Navigate to Appearance category
-    const appearanceOption = comfyPage.page.locator('text=Appearance')
-    await appearanceOption.click()
-
-    // Find the background image setting
-    const backgroundImageSetting = comfyPage.page.locator(
-      '#Comfy\\.Canvas\\.BackgroundImage'
-    )
+    const backgroundImageSetting = await openBackgroundImageSetting(comfyPage)
     await expect(backgroundImageSetting).toBeVisible()
 
-    // Verify the component has the expected elements using semantic selectors
-    const urlInput = backgroundImageSetting.getByRole('textbox')
-    await expect(urlInput).toBeVisible()
-    await expect(urlInput).toHaveAttribute('placeholder')
-
-    const uploadButton = backgroundImageSetting.getByRole('button', {
-      name: /upload/i
-    })
-    await expect(uploadButton).toBeVisible()
-
-    const clearButton = backgroundImageSetting.getByRole('button', {
-      name: /clear/i
-    })
-    await expect(clearButton).toBeVisible()
-    await expect(clearButton).toBeDisabled() // Should be disabled when no image
+    // With no image set: placeholder shown, no remove button
+    await expect(backgroundImageSetting.getByText('Choose image')).toBeVisible()
+    await expect(
+      backgroundImageSetting.getByRole('button', { name: 'Remove image' })
+    ).toBeHidden()
   })
 
   test('should upload image file and set as background', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
+    const backgroundImageSetting = await openBackgroundImageSetting(comfyPage)
 
-    // Navigate to Appearance category
-    const appearanceOption = comfyPage.page.locator('text=Appearance')
-    await appearanceOption.click()
-
-    // Find the background image setting
-    const backgroundImageSetting = comfyPage.page.locator(
-      '#Comfy\\.Canvas\\.BackgroundImage'
-    )
-    // Click the upload button to trigger file input
-    const uploadButton = backgroundImageSetting.getByRole('button', {
-      name: /upload/i
-    })
-
-    // Set up file upload handler
+    // Clicking the row opens the system file browser
     const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
-    await uploadButton.click()
+    await backgroundImageSetting
+      .getByRole('button', { name: 'Choose image' })
+      .click()
     const fileChooser = await fileChooserPromise
-
-    // Upload the test image
     await fileChooser.setFiles(comfyPage.assetPath('image32x32.webp'))
 
-    // Verify the URL input now has an API URL
-    const urlInput = backgroundImageSetting.getByRole('textbox')
-    await expect(urlInput).toHaveValue(/^\/api\/view\?.*subfolder=backgrounds/)
+    // The row shows the uploaded file's base name and a remove button
+    await expect(
+      backgroundImageSetting.getByText('image32x32.webp')
+    ).toBeVisible()
+    await expect(
+      backgroundImageSetting.getByRole('button', { name: 'Remove image' })
+    ).toBeVisible()
 
-    // Verify clear button is now enabled
-    const clearButton = backgroundImageSetting.getByRole('button', {
-      name: /clear/i
-    })
-    await expect(clearButton).toBeEnabled()
-
-    // Verify the setting value was actually set
+    // The setting value points at the uploaded file
     const settingValue = await comfyPage.settings.getSetting(
       'Comfy.Canvas.BackgroundImage'
     )
     expect(settingValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
   })
 
-  test('should accept URL input for background image', async ({
+  test('should show the base name of an existing background image', async ({
     comfyPage
   }) => {
-    const testImageUrl = 'https://example.com/test-image.png'
-
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-
-    // Navigate to Appearance category
-    const appearanceOption = comfyPage.page.locator('text=Appearance')
-    await appearanceOption.click()
-
-    // Find the background image setting
-    const backgroundImageSetting = comfyPage.page.locator(
-      '#Comfy\\.Canvas\\.BackgroundImage'
-    )
-    // Enter URL in the input field
-    const urlInput = backgroundImageSetting.getByRole('textbox')
-    await urlInput.fill(testImageUrl)
-
-    // Trigger blur event to ensure the value is set
-    await urlInput.blur()
-
-    // Verify clear button is now enabled
-    const clearButton = backgroundImageSetting.getByRole('button', {
-      name: /clear/i
-    })
-    await expect(clearButton).toBeEnabled()
-
-    // Verify the setting value was updated
-    const settingValue = await comfyPage.settings.getSetting(
-      'Comfy.Canvas.BackgroundImage'
-    )
-    expect(settingValue).toBe(testImageUrl)
-  })
-
-  test('should clear background image when clear button is clicked', async ({
-    comfyPage
-  }) => {
-    const testImageUrl = 'https://example.com/test-image.png'
-
-    // First set a background image
     await comfyPage.settings.setSetting(
       'Comfy.Canvas.BackgroundImage',
-      testImageUrl
+      '/api/view?filename=backgrounds%2Ftest-image.png&type=input&subfolder=backgrounds'
     )
 
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-
-    // Navigate to Appearance category
-    const appearanceOption = comfyPage.page.locator('text=Appearance')
-    await appearanceOption.click()
-
-    // Find the background image setting
-    const backgroundImageSetting = comfyPage.page.locator(
-      '#Comfy\\.Canvas\\.BackgroundImage'
-    )
-    // Verify the input has the test URL
-    const urlInput = backgroundImageSetting.getByRole('textbox')
-    await expect(urlInput).toHaveValue(testImageUrl)
-
-    // Verify clear button is enabled
-    const clearButton = backgroundImageSetting.getByRole('button', {
-      name: /clear/i
-    })
-    await expect(clearButton).toBeEnabled()
-
-    // Click the clear button
-    await clearButton.click()
-
-    // Verify the input is now empty
-    await expect(urlInput).toHaveValue('')
-
-    // Verify clear button is now disabled
-    await expect(clearButton).toBeDisabled()
-
-    // Verify the setting value was cleared
-    const settingValue = await comfyPage.settings.getSetting(
-      'Comfy.Canvas.BackgroundImage'
-    )
-    expect(settingValue).toBe('')
+    const backgroundImageSetting = await openBackgroundImageSetting(comfyPage)
+    await expect(
+      backgroundImageSetting.getByText('test-image.png')
+    ).toBeVisible()
   })
 
-  test('should show tooltip on upload and clear buttons', async ({
+  test('should clear background image with the remove button', async ({
     comfyPage
   }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-
-    // Navigate to Appearance category
-    const appearanceOption = comfyPage.page.locator('text=Appearance')
-    await appearanceOption.click()
-
-    // Find the background image setting
-    const backgroundImageSetting = comfyPage.page.locator(
-      '#Comfy\\.Canvas\\.BackgroundImage'
+    await comfyPage.settings.setSetting(
+      'Comfy.Canvas.BackgroundImage',
+      '/api/view?filename=test-image.png&type=input'
     )
-    // Hover over upload button and verify tooltip appears
-    const uploadButton = backgroundImageSetting.getByRole('button', {
-      name: /upload/i
-    })
-    await uploadButton.hover()
 
-    const uploadTooltip = comfyPage.page.locator('.p-tooltip:visible')
-    await expect(uploadTooltip).toBeVisible()
+    const backgroundImageSetting = await openBackgroundImageSetting(comfyPage)
+    await backgroundImageSetting
+      .getByRole('button', { name: 'Remove image' })
+      .click()
 
-    // Move away to hide tooltip
-    await comfyPage.page.locator('body').hover()
-
-    // Set a background to enable clear button
-    const urlInput = backgroundImageSetting.getByRole('textbox')
-    await urlInput.fill('https://example.com/test.png')
-    await urlInput.blur()
-
-    // Hover over clear button and verify tooltip appears
-    const clearButton = backgroundImageSetting.getByRole('button', {
-      name: /clear/i
-    })
-    await clearButton.hover()
-
-    const clearTooltip = comfyPage.page.locator('.p-tooltip:visible')
-    await expect(clearTooltip).toBeVisible()
-  })
-
-  test('should maintain reactive updates between URL input and clear button state', async ({
-    comfyPage
-  }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-
-    // Navigate to Appearance category
-    const appearanceOption = comfyPage.page.locator('text=Appearance')
-    await appearanceOption.click()
-
-    // Find the background image setting
-    const backgroundImageSetting = comfyPage.page.locator(
-      '#Comfy\\.Canvas\\.BackgroundImage'
-    )
-    const urlInput = backgroundImageSetting.getByRole('textbox')
-    const clearButton = backgroundImageSetting.getByRole('button', {
-      name: /clear/i
-    })
-
-    // Initially clear button should be disabled
-    await expect(clearButton).toBeDisabled()
-
-    // Type some text - clear button should become enabled
-    await urlInput.fill('test')
-    await expect(clearButton).toBeEnabled()
-
-    // Clear the text manually - clear button should become disabled again
-    await urlInput.fill('')
-    await expect(clearButton).toBeDisabled()
-
-    // Add text again - clear button should become enabled
-    await urlInput.fill('https://example.com/image.png')
-    await expect(clearButton).toBeEnabled()
-
-    // Use clear button - should clear input and disable itself
-    await clearButton.click()
-    await expect(urlInput).toHaveValue('')
-    await expect(clearButton).toBeDisabled()
+    // Placeholder returns, remove button disappears, setting cleared
+    await expect(backgroundImageSetting.getByText('Choose image')).toBeVisible()
+    await expect(
+      backgroundImageSetting.getByRole('button', { name: 'Remove image' })
+    ).toBeHidden()
+    await expect
+      .poll(() => comfyPage.settings.getSetting('Comfy.Canvas.BackgroundImage'))
+      .toBe('')
   })
 })

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -4,7 +4,7 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
-test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
+test.describe('Errors tab - Missing nodes', { tag: ['@ui', '@canvas'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
@@ -12,27 +12,39 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
     )
   })
 
-  test('Should show MissingNodeCard in errors tab', async ({ comfyPage }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
-
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
-    ).toBeVisible()
-  })
-
-  test('Should show missing node packs group', async ({ comfyPage }) => {
+  test('Should show missing node pack card with guidance', async ({
+    comfyPage
+  }) => {
     await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
     const missingNodeGroup = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodePacksGroup
     )
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
+    ).toBeVisible()
     await expect(missingNodeGroup).toBeVisible()
     await expect(
       missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
     ).toHaveText(/\S/)
   })
 
-  test('Should expand pack group to reveal node type names', async ({
+  test('Should show unknown pack node rows by default', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard.getByText('Unknown pack')).toBeVisible()
+    await expect(
+      missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' })
+    ).toBeVisible()
+  })
+
+  test('Should show subgraph missing node rows by default', async ({
     comfyPage
   }) => {
     await loadWorkflowAndOpenErrorsTab(
@@ -43,66 +55,72 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
     const missingNodeCard = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodeCard
     )
-    await expect(missingNodeCard).toBeVisible()
-
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
     await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+      missingNodeCard.getByRole('button', {
+        name: 'MISSING_NODE_TYPE_IN_SUBGRAPH'
+      })
     ).toBeVisible()
   })
 
-  test('Should collapse expanded pack group', async ({ comfyPage }) => {
-    await loadWorkflowAndOpenErrorsTab(
-      comfyPage,
-      'missing/missing_nodes_in_subgraph'
-    )
+  test('Should locate missing node from the row label', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
     const missingNodeCard = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodeCard
     )
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeVisible()
+    await comfyPage.canvasOps.pan({ x: -800, y: -800 })
+    const offsetBeforeLocate = await comfyPage.canvasOps.getOffset()
 
-    await missingNodeCard
-      .getByRole('button', { name: /collapse/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeHidden()
+    await missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' }).click()
+
+    await expect
+      .poll(() => comfyPage.canvasOps.getOffset())
+      .not.toEqual(offsetBeforeLocate)
   })
 
-  test('Locate node button is visible for expanded pack nodes', async ({
+  test('Should toggle grouped pack nodes from chevron and title', async ({
     comfyPage
   }) => {
     await loadWorkflowAndOpenErrorsTab(
       comfyPage,
-      'missing/missing_nodes_in_subgraph'
+      'missing/missing_nodes_same_pack'
     )
 
     const missingNodeCard = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodeCard
     )
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-
-    const locateButton = missingNodeCard.getByRole('button', {
-      name: /locate/i
+    const packTitle = missingNodeCard.getByRole('button', {
+      name: 'test-missing-node-pack'
     })
-    await expect(locateButton.first()).toBeVisible()
-    // TODO: Add navigation assertion once subgraph node ID deduplication
-    // timing is fixed. Currently, collectMissingNodes runs before
-    // configure(), so execution IDs use pre-remapped node IDs that don't
-    // match the runtime graph. See PR #9510 / #8762.
+    const expandButton = missingNodeCard.getByTestId(
+      TestIds.dialogs.missingNodePackExpand
+    )
+    const firstNode = missingNodeCard.getByRole('button', {
+      name: 'TEST_MISSING_PACK_NODE_A'
+    })
+    const secondNode = missingNodeCard.getByRole('button', {
+      name: 'TEST_MISSING_PACK_NODE_B'
+    })
+
+    await expect(packTitle).toBeVisible()
+    await expect(
+      missingNodeCard.getByTestId(TestIds.dialogs.missingNodePackCount)
+    ).toHaveText('2')
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await expandButton.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
+
+    await packTitle.click()
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await packTitle.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
   })
 })

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -292,6 +292,10 @@ test.describe('Node library sidebar', () => {
     const dialog = comfyPage.page.getByRole('dialog', {
       name: 'Customize Folder'
     })
+    // Capture the dialog header position before opening the modal color
+    // picker: while the picker is open it sets aria-hidden on the dialog,
+    // so it can no longer be located by role.
+    const dialogBox = await dialog.boundingBox()
     await dialog
       .locator('.color-customization-selector-container > button')
       .last()
@@ -300,6 +304,17 @@ test.describe('Node library sidebar', () => {
       .getByLabel('Color saturation and brightness')
       .click({ position: { x: 10, y: 10 } })
 
+    // The color picker popover is modal: while it is open the rest of the
+    // dialog is inert (pointer-events disabled), so dismiss it before
+    // interacting with other controls. A coordinate click on the dialog
+    // header lands on the dismiss layer and closes the popover.
+    if (dialogBox) {
+      await comfyPage.page.mouse.click(dialogBox.x + 40, dialogBox.y + 16)
+    }
+    await expect(
+      comfyPage.page.getByLabel('Color saturation and brightness')
+    ).toBeHidden()
+
     // Select Folder icon (2nd button in Icon group)
     const iconGroup = dialog.getByText('Icon').locator('..').getByRole('group')
     await iconGroup.getByRole('button').nth(1).click()

browser_tests/tests/workspaceSwitcher.spec.ts

@@ -0,0 +1,101 @@
+import { expect } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+import type { WorkspaceWithRole } from '@/platform/workspace/api/workspaceApi'
+import type { WorkspaceTokenResponse } from '@/platform/workspace/stores/workspaceAuthStore'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+
+const PERSONAL_WORKSPACE_NAME = 'Personal Workspace'
+const LONG_WORKSPACE_NAME =
+  'Quantum Renaissance Collective for Hyperdimensional Latent Diffusion Research and Experimental Workflow Engineering'
+
+// text-sm rows render a single 20px line; a wrapped name is 40px+.
+const SINGLE_LINE_MAX_HEIGHT_PX = 28
+
+const mockRemoteConfig: RemoteConfig = { team_workspaces_enabled: true }
+
+const mockListWorkspacesResponse: { workspaces: WorkspaceWithRole[] } = {
+  workspaces: [
+    {
+      id: 'ws-personal',
+      name: PERSONAL_WORKSPACE_NAME,
+      type: 'personal',
+      created_at: '2026-01-01T00:00:00Z',
+      joined_at: '2026-01-01T00:00:00Z',
+      role: 'owner'
+    },
+    {
+      id: 'ws-team-long',
+      name: LONG_WORKSPACE_NAME,
+      type: 'team',
+      created_at: '2026-01-02T00:00:00Z',
+      joined_at: '2026-01-02T00:00:00Z',
+      role: 'member'
+    }
+  ]
+}
+
+const mockTokenResponse: WorkspaceTokenResponse = {
+  token: 'mock-workspace-token',
+  expires_at: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  workspace: {
+    id: 'ws-personal',
+    name: PERSONAL_WORKSPACE_NAME,
+    type: 'personal'
+  },
+  role: 'owner',
+  permissions: []
+}
+
+const test = comfyPageFixture.extend({
+  page: async ({ page }, use) => {
+    await page.route('**/api/features', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockRemoteConfig)
+      })
+    )
+
+    await page.route('**/api/workspaces', async (route) => {
+      if (route.request().method() !== 'GET') {
+        await route.fallback()
+        return
+      }
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockListWorkspacesResponse)
+      })
+    })
+
+    await page.route('**/api/auth/token', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockTokenResponse)
+      })
+    )
+
+    await use(page)
+  }
+})
+
+test.describe('Workspace switcher', { tag: '@cloud' }, () => {
+  test('renders a long team workspace name on a single line', async ({
+    comfyPage
+  }) => {
+    const page = comfyPage.page
+
+    await comfyPage.toast.closeToasts()
+    await page.getByRole('button', { name: 'Current user' }).click()
+    await page.getByText(PERSONAL_WORKSPACE_NAME).click()
+
+    const longName = page.getByText(LONG_WORKSPACE_NAME)
+    await expect(longName).toBeVisible()
+
+    const box = await longName.boundingBox()
+    expect(box).not.toBeNull()
+    expect(box!.height).toBeLessThan(SINGLE_LINE_MAX_HEIGHT_PX)
+  })
+})

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -111,6 +111,7 @@ describe('formatUtil', () => {
         expect(getMediaTypeFromFilename('scene.fbx')).toBe('3D')
         expect(getMediaTypeFromFilename('asset.gltf')).toBe('3D')
         expect(getMediaTypeFromFilename('binary.glb')).toBe('3D')
+        expect(getMediaTypeFromFilename('print.stl')).toBe('3D')
         expect(getMediaTypeFromFilename('apple.usdz')).toBe('3D')
         expect(getMediaTypeFromFilename('scan.ply')).toBe('3D')
       })

packages/shared-frontend-utils/src/formatUtil.ts

@@ -591,7 +591,15 @@ const IMAGE_EXTENSIONS = [
 ] as const
 const VIDEO_EXTENSIONS = ['mp4', 'm4v', 'webm', 'mov', 'avi', 'mkv'] as const
 const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
-const THREE_D_EXTENSIONS = ['obj', 'fbx', 'gltf', 'glb', 'usdz', 'ply'] as const
+const THREE_D_EXTENSIONS = [
+  'obj',
+  'fbx',
+  'gltf',
+  'glb',
+  'stl',
+  'usdz',
+  'ply'
+] as const
 const TEXT_EXTENSIONS = [
   'txt',
   'md',

public/assets/sorted-custom-node-map.json

@@ -2,8 +2,8 @@
   "PreviewImage": 4314,
   "LoadImage": 3474,
   "CLIPTextEncode": 2435,
+  "SaveImageAdvanced": 1763,
   "SaveImage": 1762,
-  "SaveImageAdvanced": 1762,
   "VAEDecode": 1754,
   "KSampler": 1511,
   "CheckpointLoaderSimple": 1293,
@@ -14,6 +14,7 @@
   "UpscaleModelLoader": 629,
   "UNETLoader": 606,
   "VAELoader": 604,
+  "PreviewAny": 528,
   "ShowText|pysssss": 527.5526981023964,
   "ImageUpscaleWithModel": 523,
   "ControlNetApplyAdvanced": 513,
@@ -24,10 +25,12 @@
   "VHS_LoadVideo": 440,
   "ImpactSwitch": 349,
   "Reroute": 348,
+  "ResizeImageMaskNode": 337,
+  "ResizeAndPadImage": 336,
   "ImageResizeKJv2": 335,
+  "StringConcatenate": 326,
   "Text Concatenate": 325.7030402103206,
   "SaveVideo": 321,
-  "PreviewAny": 319,
   "KSamplerAdvanced": 304,
   "SDXLPromptStyler": 297.0913411304729,
   "Note": 291,
@@ -52,6 +55,7 @@
   "CLIPLoader": 202,
   "GeminiNode": 202,
   "KSampler (Efficient)": 194.01083622636423,
+  "RemoveBackground": 187,
   "ImageRemoveBackground+": 186,
   "IPAdapterModelLoader": 184,
   "PrimitiveInt": 183,
@@ -59,7 +63,9 @@
   "LoadVideo": 179,
   "Text Concatenate (JPS)": 175.98154639522735,
   "PrimitiveNode": 175,
-  "Text Multiline": 163.04749064680308,
+  "PrimitiveStringMultiline": 166,
+  "Text Multiline": 165,
+  "GetImageSize": 164,
   "GetImageSize+": 163,
   "ImageScaleToTotalPixels": 157,
   "String Literal": 150.11343489837878,
@@ -68,15 +74,14 @@
   "DownloadAndLoadFlorence2Model": 144,
   "LoadImageOutput": 143,
   "IPAdapterUnifiedLoader": 141,
-  "FluxGuidance": 133,
+  "BatchImagesNode": 134,
   "ImageBatchMulti": 133,
+  "FluxGuidance": 132,
   "ByteDanceSeedreamNode": 130,
   "CR Text Input Switch": 128.16473423438606,
   "IPAdapterAdvanced": 128,
   "If ANY execute A else B": 127.77279315110049,
   "GeminiImage2Node": 124,
-  "GetImageSize": 121,
-  "PrimitiveStringMultiline": 120,
   "IPAdapter": 118,
   "CreateVideo": 116,
   "ConditioningZeroOut": 115,
@@ -102,6 +107,7 @@
   "DepthAnythingPreprocessor": 100,
   "CR Apply LoRA Stack": 96.02556540496816,
   "Image Filter Adjustments": 95.24168323839699,
+  "ComfyMathExpression": 96,
   "SimpleMath+": 95,
   "GroundingDinoSAMSegment (segment anything)": 93.28197782196906,
   "Image Overlay": 93.28197782196906,
@@ -147,7 +153,6 @@
   "Image Resize": 63.494455492264656,
   "Automatic CFG": 63.494455492264656,
   "Canny": 63,
-  "StringConcatenate": 63,
   "DepthAnything_V2": 61,
   "ImageCrop+": 60,
   "ModelSamplingSD3": 59,
@@ -199,6 +204,7 @@
   "BNK_CLIPTextEncodeAdvanced": 45.857106744413365,
   "CR SDXL Aspect Ratio": 45.46516566112778,
   "LoadAudio": 45,
+  "ResolutionSelector": 45,
   "smZ CLIPTextEncode": 44.68128349455661,
   "Bus Node": 44.68128349455661,
   "PreviewTextNode": 44.68128349455661,
@@ -389,7 +395,6 @@
   "SD_4XUpscale_Conditioning": 21,
   "UltimateSDUpscaleCustomSample": 21,
   "StyleModelLoader": 21,
-  "ResizeAndPadImage": 21,
   "Text Random Prompt": 20.77287741413597,
   "INPAINT_VAEEncodeInpaintConditioning": 20.77287741413597,
   "BrushNet": 20.77287741413597,

src/assets/palettes/dark.json

@@ -22,7 +22,7 @@
     },
     "litegraph_base": {
       "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
-      "CLEAR_BACKGROUND_COLOR": "#141414",
+      "CLEAR_BACKGROUND_COLOR": "#222222",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
       "NODE_TEXT_COLOR": "#AAA",

src/components/common/BackgroundImageUpload.test.ts

@@ -0,0 +1,111 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render } from '@testing-library/vue'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+
+import BackgroundImageUpload from './BackgroundImageUpload.vue'
+
+const fetchApi = vi.hoisted(() => vi.fn())
+vi.mock('@/scripts/api', () => ({ api: { fetchApi } }))
+vi.mock('@/platform/distribution/cloudPreviewUtil', () => ({
+  appendCloudResParam: vi.fn()
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+interface ImageUploadStubProps {
+  modelValue?: string
+  loading?: boolean
+}
+
+const imageUploadEmit = vi.hoisted(() => ({ current: null as null | unknown }))
+
+const ImageUploadStub = {
+  props: ['modelValue', 'loading'],
+  emits: ['update:modelValue', 'fileSelected'],
+  setup(_: ImageUploadStubProps, { emit }: { emit: unknown }) {
+    imageUploadEmit.current = emit
+    return () => null
+  }
+}
+
+function renderUpload(modelValue = '') {
+  const onUpdate = vi.fn()
+  const utils = render(BackgroundImageUpload, {
+    props: { modelValue, 'onUpdate:modelValue': onUpdate },
+    global: {
+      plugins: [i18n, createTestingPinia({ stubActions: false })],
+      stubs: { ImageUpload: ImageUploadStub }
+    }
+  })
+  const selectFile = (file: File) =>
+    (imageUploadEmit.current as (e: string, f: File) => void)(
+      'fileSelected',
+      file
+    )
+  return { ...utils, onUpdate, selectFile }
+}
+
+const testFile = () => new File(['x'], 'photo.png', { type: 'image/png' })
+
+describe('BackgroundImageUpload', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    fetchApi.mockReset()
+  })
+
+  it('sets the model to an /api/view URL after a successful upload', async () => {
+    fetchApi.mockResolvedValue({
+      status: 200,
+      json: async () => ({ name: 'photo.png', subfolder: 'backgrounds' })
+    })
+    const { onUpdate, selectFile } = renderUpload()
+
+    await selectFile(testFile())
+    await vi.waitFor(() => expect(onUpdate).toHaveBeenCalled())
+
+    const url = onUpdate.mock.calls.at(-1)?.[0] as string
+    expect(url).toMatch(/^\/api\/view\?/)
+    expect(url).toContain('filename=photo.png')
+    expect(url).toContain('subfolder=backgrounds')
+    // The uploaded folder is not duplicated into the filename param
+    expect(url).not.toContain('filename=backgrounds')
+  })
+
+  it('shows a toast and does not set the model when upload fails', async () => {
+    fetchApi.mockResolvedValue({
+      status: 500,
+      statusText: 'Internal Server Error',
+      json: async () => ({})
+    })
+    const { onUpdate, selectFile } = renderUpload()
+
+    await selectFile(testFile())
+    await vi.waitFor(() =>
+      expect(useToastStore().addAlert).toHaveBeenCalledWith(
+        'Failed to upload background image'
+      )
+    )
+    expect(onUpdate).not.toHaveBeenCalled()
+  })
+
+  it('shows an error toast when the request throws', async () => {
+    fetchApi.mockRejectedValue(new Error('network down'))
+    const { selectFile } = renderUpload()
+
+    await selectFile(testFile())
+    await vi.waitFor(() =>
+      expect(useToastStore().addAlert).toHaveBeenCalledWith(
+        'Error uploading background image: Error: network down'
+      )
+    )
+  })
+})

src/components/common/BackgroundImageUpload.vue

@@ -1,57 +1,25 @@
 <template>
-  <div class="flex gap-2">
-    <InputText
-      v-model="modelValue"
-      class="flex-1"
-      :placeholder="$t('g.imageUrl')"
-    />
-    <Button
-      v-tooltip="$t('g.upload')"
-      variant="secondary"
-      size="sm"
-      :aria-label="$t('g.upload')"
-      :disabled="isUploading"
-      @click="triggerFileInput"
-    >
-      <i :class="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'" />
-    </Button>
-    <Button
-      v-tooltip="$t('g.clear')"
-      variant="destructive"
-      size="sm"
-      :aria-label="$t('g.clear')"
-      :disabled="!modelValue"
-      @click="clearImage"
-    >
-      <i class="pi pi-trash" />
-    </Button>
-    <input
-      ref="fileInput"
-      type="file"
-      class="hidden"
-      accept="image/*"
-      @change="handleFileUpload"
-    />
-  </div>
+  <ImageUpload
+    v-model="modelValue"
+    :loading="isUploading"
+    @file-selected="handleFileUpload"
+  />
 </template>
 
 <script setup lang="ts">
-import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
+import ImageUpload from '@/components/ui/image-upload/ImageUpload.vue'
 import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 
 const modelValue = defineModel<string>()
 
-const fileInput = ref<HTMLInputElement | null>(null)
-const isUploading = ref(false)
+const { t } = useI18n()
 
-const triggerFileInput = () => {
-  fileInput.value?.click()
-}
+const isUploading = ref(false)
 
 const uploadFile = async (file: File): Promise<string | null> => {
   const body = new FormData()
@@ -64,46 +32,35 @@ const uploadFile = async (file: File): Promise<string | null> => {
   })
 
   if (resp.status !== 200) {
-    useToastStore().addAlert(
-      `Upload failed: ${resp.status} - ${resp.statusText}`
-    )
+    useToastStore().addAlert(t('toastMessages.failedToUploadBackgroundImage'))
     return null
   }
 
   const data = await resp.json()
-  return data.subfolder ? `${data.subfolder}/${data.name}` : data.name
+  return data.name
 }
 
-const handleFileUpload = async (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files[0]) {
-    const file = target.files[0]
-
-    isUploading.value = true
-    try {
-      const uploadedPath = await uploadFile(file)
-      if (uploadedPath) {
-        // Set the value to the API view URL with subfolder parameter
-        const params = new URLSearchParams({
-          filename: uploadedPath,
-          type: 'input',
-          subfolder: 'backgrounds'
-        })
-        appendCloudResParam(params, file.name)
-        modelValue.value = `/api/view?${params.toString()}`
-      }
-    } catch (error) {
-      useToastStore().addAlert(`Upload error: ${String(error)}`)
-    } finally {
-      isUploading.value = false
+const handleFileUpload = async (file: File) => {
+  isUploading.value = true
+  try {
+    const uploadedName = await uploadFile(file)
+    if (uploadedName) {
+      const params = new URLSearchParams({
+        filename: uploadedName,
+        type: 'input',
+        subfolder: 'backgrounds'
+      })
+      appendCloudResParam(params, file.name)
+      modelValue.value = `/api/view?${params.toString()}`
     }
-  }
-}
-
-const clearImage = () => {
-  modelValue.value = ''
-  if (fileInput.value) {
-    fileInput.value.value = ''
+  } catch (error) {
+    useToastStore().addAlert(
+      t('toastMessages.errorUploadingBackgroundImage', {
+        error: String(error)
+      })
+    )
+  } finally {
+    isUploading.value = false
   }
 }
 </script>

src/components/graph/GraphCanvas.vue

@@ -376,13 +376,17 @@ watch(
 )
 
 watch(
-  () => settingStore.get('Comfy.Canvas.BackgroundImage'),
+  [
+    () => settingStore.get('Comfy.Canvas.BackgroundImage'),
+    () => settingStore.get('Comfy.Canvas.BackgroundPattern'),
+    () => settingStore.get('Comfy.Canvas.BackgroundColor')
+  ],
   async () => {
     if (!canvasStore.canvas) return
     const currentPaletteId = colorPaletteStore.activePaletteId
     if (!currentPaletteId) return
 
-    // Reload color palette to apply background image
+    // Reload color palette to apply background image/pattern/color
     await colorPaletteService.loadColorPalette(currentPaletteId)
     // Mark background canvas as dirty
     canvasStore.canvas.setDirty(false, true)

src/components/load3d/Load3D.vue

@@ -23,6 +23,8 @@
         :can-use-gizmo="canUseGizmo"
         :can-use-lighting="canUseLighting"
         :can-export="canExport"
+        :can-use-hdri="canUseHdri"
+        :can-use-background-image="canUseBackgroundImage"
         :material-modes="materialModes"
         :has-skeleton="hasSkeleton"
         @update-background-image="handleBackgroundImageUpdate"
@@ -86,7 +88,7 @@
       />
 
       <RecordingControls
-        v-if="!isPreview"
+        v-if="canUseRecording && !isPreview"
         v-model:is-recording="isRecording"
         v-model:has-recording="hasRecording"
         v-model:recording-duration="recordingDuration"
@@ -117,9 +119,18 @@ import { resolveNode } from '@/utils/litegraphUtil'
 import type { ComponentWidget } from '@/scripts/domWidget'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-const props = defineProps<{
+const {
+  widget,
+  nodeId,
+  canUseRecording = true,
+  canUseHdri = true,
+  canUseBackgroundImage = true
+} = defineProps<{
   widget: ComponentWidget<string[]> | SimplifiedWidget
   nodeId?: NodeId
+  canUseRecording?: boolean
+  canUseHdri?: boolean
+  canUseBackgroundImage?: boolean
 }>()
 
 function isComponentWidget(
@@ -130,11 +141,11 @@ function isComponentWidget(
 
 const node = ref<LGraphNode | null>(null)
 
-if (isComponentWidget(props.widget)) {
-  node.value = props.widget.node
-} else if (props.nodeId) {
+if (isComponentWidget(widget)) {
+  node.value = widget.node
+} else if (nodeId) {
   onMounted(() => {
-    node.value = resolveNode(props.nodeId!) ?? null
+    node.value = resolveNode(nodeId) ?? null
   })
 }
 

src/components/load3d/Load3DAdvanced.test.ts

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/vue'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, ref } from 'vue'
+
+const lastProps = ref<Record<string, unknown> | null>(null)
+
+vi.mock('@/components/load3d/Load3D.vue', () => ({
+  default: defineComponent({
+    name: 'Load3D',
+    props: {
+      widget: { type: null, required: false, default: undefined },
+      nodeId: { type: null, required: false, default: undefined },
+      canUseRecording: { type: Boolean, default: true },
+      canUseHdri: { type: Boolean, default: true },
+      canUseBackgroundImage: { type: Boolean, default: true }
+    },
+    setup(props: Record<string, unknown>) {
+      lastProps.value = { ...props }
+      return () => h('div', { 'data-testid': 'load3d-stub' })
+    }
+  })
+}))
+
+import Load3DAdvanced from '@/components/load3d/Load3DAdvanced.vue'
+
+describe('Load3DAdvanced', () => {
+  it('renders the inner Load3D with all expressive features disabled', () => {
+    const MOCK_NODE = { id: 'node', type: 'Load3DAdvanced' }
+    render(Load3DAdvanced, {
+      props: {
+        widget: { node: MOCK_NODE } as never
+      }
+    })
+    expect(lastProps.value).toMatchObject({
+      canUseRecording: false,
+      canUseHdri: false,
+      canUseBackgroundImage: false
+    })
+  })
+
+  it('forwards widget and nodeId to the inner Load3D', () => {
+    const widget = { node: { id: 'a', type: 'Load3DAdvanced' } }
+    render(Load3DAdvanced, { props: { widget: widget as never, nodeId: 'a' } })
+    expect(lastProps.value?.widget).toEqual(widget)
+    expect(lastProps.value?.nodeId).toBe('a')
+  })
+})

src/components/load3d/Load3DAdvanced.vue

@@ -0,0 +1,21 @@
+<template>
+  <Load3D
+    :widget="widget"
+    :node-id="nodeId"
+    :can-use-recording="false"
+    :can-use-hdri="false"
+    :can-use-background-image="false"
+  />
+</template>
+
+<script setup lang="ts">
+import Load3D from '@/components/load3d/Load3D.vue'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComponentWidget } from '@/scripts/domWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+defineProps<{
+  widget: ComponentWidget<string[]> | SimplifiedWidget
+  nodeId?: NodeId
+}>()
+</script>

src/components/load3d/Load3DControls.vue

@@ -52,6 +52,7 @@
         v-model:background-image="sceneConfig!.backgroundImage"
         v-model:background-render-mode="sceneConfig!.backgroundRenderMode"
         v-model:fov="cameraConfig!.fov"
+        :show-background-image="canUseBackgroundImage"
         :hdri-active="
           !!lightConfig?.hdri?.hdriPath && !!lightConfig?.hdri?.enabled
         "
@@ -81,6 +82,7 @@
         />
 
         <HDRIControls
+          v-if="canUseHdri"
           v-model:hdri-config="lightConfig!.hdri"
           :has-background-image="!!sceneConfig?.backgroundImage"
           @update-hdri-file="handleHDRIFileUpdate"
@@ -129,12 +131,16 @@ const {
   canUseGizmo = true,
   canUseLighting = true,
   canExport = true,
+  canUseHdri = true,
+  canUseBackgroundImage = true,
   materialModes = ['original', 'normal', 'wireframe'],
   hasSkeleton = false
 } = defineProps<{
   canUseGizmo?: boolean
   canUseLighting?: boolean
   canExport?: boolean
+  canUseHdri?: boolean
+  canUseBackgroundImage?: boolean
   materialModes?: readonly MaterialMode[]
   hasSkeleton?: boolean
 }>()

src/components/load3d/controls/SceneControls.vue

@@ -37,7 +37,7 @@
         </Button>
       </div>
 
-      <div v-if="!hasBackgroundImage">
+      <div v-if="showBackgroundImage && !hasBackgroundImage">
         <Button
           v-tooltip.right="{
             value: $t('load3d.uploadBackgroundImage'),
@@ -61,7 +61,7 @@
       </div>
     </template>
 
-    <div v-if="hasBackgroundImage">
+    <div v-if="showBackgroundImage && hasBackgroundImage">
       <Button
         v-tooltip.right="{
           value: $t('load3d.panoramaMode'),
@@ -83,12 +83,16 @@
     </div>
 
     <PopupSlider
-      v-if="hasBackgroundImage && backgroundRenderMode === 'panorama'"
+      v-if="
+        showBackgroundImage &&
+        hasBackgroundImage &&
+        backgroundRenderMode === 'panorama'
+      "
       v-model="fov"
       :tooltip-text="$t('load3d.fov')"
     />
 
-    <div v-if="hasBackgroundImage">
+    <div v-if="showBackgroundImage && hasBackgroundImage">
       <Button
         v-tooltip.right="{
           value: $t('load3d.removeBackgroundImage'),
@@ -114,8 +118,9 @@ import Button from '@/components/ui/button/Button.vue'
 import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
 import { cn } from '@comfyorg/tailwind-utils'
 
-const { hdriActive = false } = defineProps<{
+const { hdriActive = false, showBackgroundImage = true } = defineProps<{
   hdriActive?: boolean
+  showBackgroundImage?: boolean
 }>()
 
 const emit = defineEmits<{

src/components/rightSidePanel/errors/MissingNodeCard.test.ts

@@ -71,12 +71,11 @@ vi.mock('./MissingPackGroupRow.vue', () => ({
     name: 'MissingPackGroupRow',
     template: `<div class="pack-row" data-testid="pack-row"
       :data-show-info-button="String(showInfoButton)"
-      :data-show-node-id-badge="String(showNodeIdBadge)"
     >
       <button data-testid="locate-node" @click="$emit('locate-node', group.nodeTypes[0]?.nodeId)" />
       <button data-testid="open-manager-info" @click="$emit('open-manager-info', group.packId)" />
     </div>`,
-    props: ['group', 'showInfoButton', 'showNodeIdBadge'],
+    props: ['group', 'showInfoButton'],
     emits: ['locate-node', 'open-manager-info']
   }
 }))
@@ -122,7 +121,6 @@ function makePackGroups(count = 2): MissingPackGroup[] {
 function renderCard(
   props: Partial<{
     showInfoButton: boolean
-    showNodeIdBadge: boolean
     missingPackGroups: MissingPackGroup[]
   }> = {}
 ) {
@@ -130,7 +128,6 @@ function renderCard(
   const result = render(MissingNodeCard, {
     props: {
       showInfoButton: false,
-      showNodeIdBadge: false,
       missingPackGroups: makePackGroups(),
       ...props
     },
@@ -169,12 +166,10 @@ describe('MissingNodeCard', () => {
 
     it('passes props correctly to MissingPackGroupRow children', () => {
       renderCard({
-        showInfoButton: true,
-        showNodeIdBadge: true
+        showInfoButton: true
       })
       const row = screen.getAllByTestId('pack-row')[0]
       expect(row.getAttribute('data-show-info-button')).toBe('true')
-      expect(row.getAttribute('data-show-node-id-badge')).toBe('true')
     })
   })
 
@@ -256,7 +251,6 @@ describe('MissingNodeCard', () => {
       render(MissingNodeCard, {
         props: {
           showInfoButton: false,
-          showNodeIdBadge: false,
           missingPackGroups: makePackGroups(),
           onLocateNode
         },
@@ -279,7 +273,6 @@ describe('MissingNodeCard', () => {
       render(MissingNodeCard, {
         props: {
           showInfoButton: false,
-          showNodeIdBadge: false,
           missingPackGroups: makePackGroups(),
           onOpenManagerInfo
         },

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -56,27 +56,29 @@
         >
       </template>
     </i18n-t>
-    <MissingPackGroupRow
-      v-for="group in missingPackGroups"
-      :key="group.packId ?? '__unknown__'"
-      :group="group"
-      :show-info-button="showInfoButton"
-      :show-node-id-badge="showNodeIdBadge"
-      @locate-node="emit('locateNode', $event)"
-      @open-manager-info="emit('openManagerInfo', $event)"
-    />
+    <div class="flex flex-col gap-1 overflow-hidden py-2">
+      <MissingPackGroupRow
+        v-for="group in missingPackGroups"
+        :key="group.packId ?? '__unknown__'"
+        :group="group"
+        :show-info-button="showInfoButton"
+        @locate-node="emit('locateNode', $event)"
+        @open-manager-info="emit('openManagerInfo', $event)"
+      />
+    </div>
   </div>
 
   <!-- Apply Changes: shown when manager enabled and at least one pack install succeeded -->
   <div v-if="shouldShowManagerButtons" class="px-4">
     <Button
       v-if="hasInstalledPacksPendingRestart"
-      variant="primary"
+      variant="secondary"
+      size="sm"
       :disabled="isRestarting"
-      class="mt-2 h-9 w-full justify-center gap-2 text-sm font-semibold"
+      class="mt-2 h-8 w-full min-w-0 rounded-lg text-sm"
       @click="applyChanges()"
     >
-      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
+      <DotSpinner v-if="isRestarting" duration="1s" :size="12" />
       <i
         v-else
         aria-hidden="true"
@@ -105,9 +107,8 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'
 
-const { showInfoButton, showNodeIdBadge, missingPackGroups } = defineProps<{
+const { showInfoButton, missingPackGroups } = defineProps<{
   showInfoButton: boolean
-  showNodeIdBadge: boolean
   missingPackGroups: MissingPackGroup[]
 }>()
 

src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts

@@ -61,16 +61,16 @@ const i18n = createI18n({
   messages: {
     en: {
       g: {
-        loading: 'Loading'
+        install: 'Install',
+        loading: 'Loading',
+        search: 'Search'
       },
       rightSidePanel: {
         locateNode: 'Locate node on canvas',
         missingNodePacks: {
           unknownPack: 'Unknown pack',
-          installNodePack: 'Install node pack',
           installing: 'Installing...',
           installed: 'Installed',
-          searchInManager: 'Search in Node Manager',
           viewInManager: 'View in Manager',
           collapse: 'Collapse',
           expand: 'Expand'
@@ -100,7 +100,6 @@ function renderRow(
   props: Partial<{
     group: MissingPackGroup
     showInfoButton: boolean
-    showNodeIdBadge: boolean
   }> = {}
 ) {
   const user = userEvent.setup()
@@ -110,7 +109,6 @@ function renderRow(
     props: {
       group: makeGroup(),
       showInfoButton: false,
-      showNodeIdBadge: false,
       onLocateNode,
       onOpenManagerInfo,
       ...props
@@ -118,7 +116,6 @@ function renderRow(
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
       stubs: {
-        TransitionCollapse: { template: '<div><slot /></div>' },
         DotSpinner: {
           template: '<span role="status" aria-label="loading" />'
         }
@@ -156,9 +153,22 @@ describe('MissingPackGroupRow', () => {
       expect(screen.getByText(/Loading/)).toBeInTheDocument()
     })
 
+    it('does not render header locate while pack metadata is resolving', () => {
+      renderRow({
+        group: makeGroup({
+          isResolving: true,
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      expect(
+        screen.queryByRole('button', { name: 'Locate node on canvas' })
+      ).not.toBeInTheDocument()
+    })
+
     it('renders node count', () => {
       renderRow()
-      expect(screen.getByText(/\(2\)/)).toBeInTheDocument()
+      expect(screen.getByText('2')).toBeInTheDocument()
     })
 
     it('renders count of 5 for 5 nodeTypes', () => {
@@ -171,38 +181,29 @@ describe('MissingPackGroupRow', () => {
           }))
         })
       })
-      expect(screen.getByText(/\(5\)/)).toBeInTheDocument()
-    })
-  })
-
-  describe('Expand / Collapse', () => {
-    it('starts collapsed', () => {
-      renderRow()
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
-    })
-
-    it('expands when chevron is clicked', async () => {
-      const { user } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      expect(screen.getByText('MissingA')).toBeInTheDocument()
-      expect(screen.getByText('MissingB')).toBeInTheDocument()
-    })
-
-    it('collapses when chevron is clicked again', async () => {
-      const { user } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      expect(screen.getByText('MissingA')).toBeInTheDocument()
-      await user.click(screen.getByRole('button', { name: 'Collapse' }))
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+      expect(screen.getByText('5')).toBeInTheDocument()
     })
   })
 
   describe('Node Type List', () => {
-    async function expand(user: ReturnType<typeof userEvent.setup>) {
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-    }
+    it('hides multiple nodeTypes behind the expand control by default', () => {
+      renderRow()
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+      expect(screen.queryByText('MissingB')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument()
+    })
 
-    it('renders all nodeTypes when expanded', async () => {
+    it('shows unknown pack nodeTypes by default', () => {
+      renderRow({ group: makeGroup({ packId: null }) })
+
+      expect(
+        screen.getByRole('button', { name: 'Collapse' })
+      ).toBeInTheDocument()
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+      expect(screen.getByText('MissingB')).toBeInTheDocument()
+    })
+
+    it('renders all nodeTypes after expanding', async () => {
       const { user } = renderRow({
         group: makeGroup({
           nodeTypes: [
@@ -212,40 +213,87 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(user)
+
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+
       expect(screen.getByText('NodeA')).toBeInTheDocument()
       expect(screen.getByText('NodeB')).toBeInTheDocument()
       expect(screen.getByText('NodeC')).toBeInTheDocument()
     })
 
-    it('shows nodeId badge when showNodeIdBadge is true', async () => {
-      const { user } = renderRow({ showNodeIdBadge: true })
-      await expand(user)
-      expect(screen.getByText('#10')).toBeInTheDocument()
+    it('hides multiple nodeTypes again after collapsing', async () => {
+      const { user } = renderRow()
+
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'Collapse' }))
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
     })
 
-    it('hides nodeId badge when showNodeIdBadge is false', async () => {
-      const { user } = renderRow({ showNodeIdBadge: false })
-      await expand(user)
-      expect(screen.queryByText('#10')).not.toBeInTheDocument()
+    it('hides a single nodeType without an expand control', () => {
+      renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '1', isReplaceable: false }]
+        })
+      })
+
+      expect(screen.queryByText('OnlyNode')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Expand' })
+      ).not.toBeInTheDocument()
     })
 
-    it('emits locateNode when Locate button is clicked', async () => {
-      const { user, onLocateNode } = renderRow({ showNodeIdBadge: true })
-      await expand(user)
+    it('emits locateNode when the pack label is clicked for one nodeType', async () => {
+      const { user, onLocateNode } = renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      await user.click(screen.getByRole('button', { name: 'my-pack' }))
+
+      expect(onLocateNode).toHaveBeenCalledWith('100')
+    })
+
+    it('moves locate to the header when there is one nodeType', async () => {
+      const { user, onLocateNode } = renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      await user.click(
+        screen.getByRole('button', { name: 'Locate node on canvas' })
+      )
+
+      expect(onLocateNode).toHaveBeenCalledWith('100')
+    })
+
+    it('emits locateNode when expanded child Locate button is clicked', async () => {
+      const { user, onLocateNode } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+
       await user.click(
         screen.getAllByRole('button', { name: 'Locate node on canvas' })[0]
       )
+
       expect(onLocateNode).toHaveBeenCalledWith('10')
     })
 
-    it('does not show Locate for nodeType without nodeId', async () => {
-      const { user } = renderRow({
+    it('emits locateNode when node label is clicked', async () => {
+      const { user, onLocateNode } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      await user.click(screen.getByRole('button', { name: 'MissingA' }))
+      expect(onLocateNode).toHaveBeenCalledWith('10')
+    })
+
+    it('does not show Locate for nodeType without nodeId', () => {
+      renderRow({
         group: makeGroup({
           nodeTypes: [{ type: 'NoId', isReplaceable: false } as never]
         })
       })
-      await expand(user)
       expect(
         screen.queryByRole('button', { name: 'Locate node on canvas' })
       ).not.toBeInTheDocument()
@@ -253,7 +301,6 @@ describe('MissingPackGroupRow', () => {
 
     it('handles mixed nodeTypes with and without nodeId', async () => {
       const { user } = renderRow({
-        showNodeIdBadge: true,
         group: makeGroup({
           nodeTypes: [
             { type: 'WithId', nodeId: '100', isReplaceable: false },
@@ -261,7 +308,7 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(user)
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
       expect(screen.getByText('WithId')).toBeInTheDocument()
       expect(screen.getByText('WithoutId')).toBeInTheDocument()
       expect(
@@ -274,21 +321,25 @@ describe('MissingPackGroupRow', () => {
     it('hides install UI when shouldShowManagerButtons is false', () => {
       mockShouldShowManagerButtons.value = false
       renderRow()
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
     })
 
     it('hides install UI when packId is null', () => {
       mockShouldShowManagerButtons.value = true
       renderRow({ group: makeGroup({ packId: null }) })
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
     })
 
-    it('shows "Search in Node Manager" when packId exists but pack not in registry', () => {
+    it('shows Search when packId exists but pack not in registry', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = []
       renderRow()
-      expect(screen.getByText('Search in Node Manager')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument()
     })
 
     it('shows "Installed" state when pack is installed', () => {
@@ -312,7 +363,9 @@ describe('MissingPackGroupRow', () => {
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
       renderRow()
-      expect(screen.getByText('Install node pack')).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Install' })
+      ).toBeInTheDocument()
     })
 
     it('calls installAllPacks when Install button is clicked', async () => {
@@ -320,9 +373,7 @@ describe('MissingPackGroupRow', () => {
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
       const { user } = renderRow()
-      await user.click(
-        screen.getByRole('button', { name: /Install node pack/ })
-      )
+      await user.click(screen.getByRole('button', { name: 'Install' }))
       expect(mockInstallAllPacks).toHaveBeenCalledOnce()
     })
 
@@ -369,7 +420,7 @@ describe('MissingPackGroupRow', () => {
   describe('Edge Cases', () => {
     it('handles empty nodeTypes array', () => {
       renderRow({ group: makeGroup({ nodeTypes: [] }) })
-      expect(screen.getByText(/\(0\)/)).toBeInTheDocument()
+      expect(screen.getByText('0')).toBeInTheDocument()
     })
   })
 })

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -1,187 +1,221 @@
 <template>
-  <div class="mb-2 flex w-full flex-col">
-    <!-- Pack header row: pack name + info + chevron -->
-    <div class="flex h-8 w-full items-center">
-      <!-- Warning icon for unknown packs -->
-      <i
-        v-if="group.packId === null && !group.isResolving"
-        class="mr-1.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
-      />
-      <p
-        class="min-w-0 flex-1 truncate text-sm font-medium"
-        :class="
-          group.packId === null && !group.isResolving
-            ? 'text-warning-background'
-            : 'text-foreground'
-        "
-      >
-        <span v-if="group.isResolving" class="text-muted-foreground italic">
-          {{ t('g.loading') }}...
-        </span>
-        <span v-else>
-          {{
-            `${group.packId ?? t('rightSidePanel.missingNodePacks.unknownPack')} (${group.nodeTypes.length})`
-          }}
-        </span>
-      </p>
+  <div class="mb-1 flex w-full flex-col gap-0.5 last:mb-0">
+    <div class="flex min-h-8 w-full items-center gap-1">
       <Button
-        v-if="showInfoButton && group.packId !== null"
+        v-if="hasMultipleNodeTypes"
+        data-testid="missing-node-pack-expand"
         variant="textonly"
-        size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-        :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
-        @click="emit('openManagerInfo', group.packId ?? '')"
-      >
-        <i class="icon-[lucide--info] size-4" />
-      </Button>
-      <Button
-        variant="textonly"
-        size="icon-sm"
-        :class="
-          cn(
-            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
-            { 'rotate-180': expanded }
-          )
-        "
+        size="unset"
         :aria-label="
           expanded
             ? t('rightSidePanel.missingNodePacks.collapse')
             : t('rightSidePanel.missingNodePacks.expand')
         "
+        :aria-expanded="expanded"
+        :class="
+          cn(
+            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
+            expanded && 'rotate-90'
+          )
+        "
         @click="toggleExpand"
       >
         <i
-          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
+          aria-hidden="true"
+          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
         />
       </Button>
-    </div>
-
-    <!-- Sub-labels: individual node instances, each with their own Locate button -->
-    <TransitionCollapse>
-      <div
-        v-if="expanded"
-        class="mb-1 flex flex-col gap-0.5 overflow-hidden pl-2"
-      >
-        <div
-          v-for="nodeType in group.nodeTypes"
-          :key="getKey(nodeType)"
-          class="flex h-7 items-center"
-        >
-          <span
-            v-if="
-              showNodeIdBadge &&
-              typeof nodeType !== 'string' &&
-              nodeType.nodeId != null
+      <i
+        v-if="isUnknownPack"
+        class="icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
+      />
+      <span class="flex min-w-0 flex-1 items-center gap-2">
+        <span class="flex min-w-0 items-center gap-2.5">
+          <button
+            v-if="hasMultipleNodeTypes && !group.isResolving"
+            type="button"
+            :class="
+              cn(
+                packTextButtonClass,
+                isUnknownPack
+                  ? 'text-warning-background'
+                  : 'text-base-foreground'
+              )
             "
-            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
+            :aria-expanded="expanded"
+            @click="toggleExpand"
           >
-            #{{ nodeType.nodeId }}
+            {{ packDisplayName }}
+          </button>
+          <button
+            v-else-if="primaryLocatableNodeType"
+            type="button"
+            :class="
+              cn(
+                packTextButtonClass,
+                isUnknownPack
+                  ? 'text-warning-background'
+                  : 'text-base-foreground'
+              )
+            "
+            @click="handleLocateNode(primaryLocatableNodeType)"
+          >
+            {{ packDisplayName }}
+          </button>
+          <span
+            v-else
+            class="min-w-0 truncate text-sm/relaxed font-normal"
+            :class="
+              isUnknownPack ? 'text-warning-background' : 'text-base-foreground'
+            "
+          >
+            <span v-if="group.isResolving" class="text-muted-foreground italic">
+              {{ t('g.loading') }}...
+            </span>
+            <span v-else>
+              {{ packDisplayName }}
+            </span>
           </span>
-          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
-            {{ getLabel(nodeType) }}
-          </p>
           <Button
-            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
+            v-if="showInfoButton && group.packId !== null"
             variant="textonly"
             size="icon-sm"
-            class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
-            :aria-label="t('rightSidePanel.locateNode')"
-            @click="handleLocateNode(nodeType)"
+            class="size-7 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground"
+            :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
+            @click="emit('openManagerInfo', group.packId ?? '')"
           >
-            <i class="icon-[lucide--locate] size-3" />
+            <i class="icon-[lucide--info] size-4" />
           </Button>
-        </div>
-      </div>
-    </TransitionCollapse>
-
-    <!-- Install button: shown when manager enabled, registry knows the pack or it's already installed -->
-    <div
-      v-if="
-        shouldShowManagerButtons &&
-        group.packId !== null &&
-        (nodePack || comfyManagerStore.isPackInstalled(group.packId))
-      "
-      class="flex w-full items-start py-1"
-    >
-      <Button
-        variant="secondary"
-        size="md"
-        class="flex w-full flex-1 rounded-lg"
-        :disabled="
-          comfyManagerStore.isPackInstalled(group.packId) || isInstalling
-        "
-        @click="handlePackInstallClick"
-      >
-        <DotSpinner
-          v-if="isInstalling"
-          duration="1s"
-          :size="12"
-          class="mr-1.5 shrink-0"
-        />
-        <i
-          v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
-          class="text-foreground mr-1 icon-[lucide--check] size-4 shrink-0"
-        />
-        <i
-          v-else
-          class="text-foreground mr-1 icon-[lucide--download] size-4 shrink-0"
-        />
-        <span class="text-foreground min-w-0 truncate text-sm">
-          {{
-            isInstalling
-              ? t('rightSidePanel.missingNodePacks.installing')
-              : comfyManagerStore.isPackInstalled(group.packId)
-                ? t('rightSidePanel.missingNodePacks.installed')
-                : t('rightSidePanel.missingNodePacks.installNodePack')
-          }}
+          <span
+            v-if="showNodeCount"
+            data-testid="missing-node-pack-count"
+            class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
+          >
+            {{ group.nodeTypes.length }}
+          </span>
         </span>
-      </Button>
-    </div>
-
-    <!-- Registry still loading: packId known but result not yet available -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
-      class="flex w-full items-start py-1"
-    >
+      </span>
+      <div v-if="showInstallAction" class="ml-auto shrink-0">
+        <Button
+          variant="secondary"
+          size="sm"
+          class="h-8 shrink-0 rounded-lg text-sm"
+          :disabled="isPackInstalled || isInstalling"
+          @click="handlePackInstallClick"
+        >
+          <DotSpinner
+            v-if="isInstalling"
+            duration="1s"
+            :size="12"
+            class="mr-1.5 shrink-0"
+          />
+          <span class="text-foreground min-w-0 truncate">
+            {{
+              isInstalling
+                ? t('rightSidePanel.missingNodePacks.installing')
+                : isPackInstalled
+                  ? t('rightSidePanel.missingNodePacks.installed')
+                  : t('g.install')
+            }}
+          </span>
+        </Button>
+      </div>
       <div
-        class="flex h-8 min-w-0 flex-1 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background p-2 opacity-60 select-none"
+        v-else-if="showLoadingAction"
+        class="ml-auto flex h-8 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background px-2 py-1 text-sm opacity-60 select-none"
       >
         <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
         <span class="text-foreground min-w-0 truncate text-sm">
           {{ t('g.loading') }}
         </span>
       </div>
-    </div>
-
-    <!-- Search in Manager: fetch done but pack not found in registry -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons"
-      class="flex w-full items-start py-1"
-    >
+      <div v-else-if="showSearchAction" class="ml-auto shrink-0">
+        <Button
+          variant="secondary"
+          size="sm"
+          class="h-8 shrink-0 rounded-lg text-sm"
+          @click="
+            openManager({
+              initialTab: ManagerTab.All,
+              initialPackId: group.packId!
+            })
+          "
+        >
+          <span class="text-foreground min-w-0 truncate">
+            {{ t('g.search') }}
+          </span>
+        </Button>
+      </div>
       <Button
-        variant="secondary"
-        size="md"
-        class="flex w-full flex-1 rounded-lg"
-        @click="
-          openManager({
-            initialTab: ManagerTab.All,
-            initialPackId: group.packId!
-          })
-        "
+        v-if="primaryLocatableNodeType"
+        variant="textonly"
+        size="icon-sm"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        :aria-label="t('rightSidePanel.locateNode')"
+        @click="handleLocateNode(primaryLocatableNodeType)"
       >
-        <i class="text-foreground mr-1 icon-[lucide--search] size-4 shrink-0" />
-        <span class="text-foreground min-w-0 truncate text-sm">
-          {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
-        </span>
+        <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
       </Button>
     </div>
+
+    <TransitionCollapse>
+      <ul
+        v-if="showNodeTypeList"
+        :class="
+          cn(
+            'm-0 list-none space-y-1 p-0',
+            (hasMultipleNodeTypes || isUnknownPack) && 'pl-5'
+          )
+        "
+      >
+        <li
+          v-for="nodeType in group.nodeTypes"
+          :key="getKey(nodeType)"
+          class="min-w-0"
+        >
+          <div class="flex min-w-0 items-center gap-2">
+            <span class="flex min-w-0 flex-1 items-center gap-1">
+              <button
+                v-if="isLocatableNodeType(nodeType)"
+                type="button"
+                :class="
+                  cn(
+                    packTextButtonClass,
+                    'text-muted-foreground hover:text-base-foreground'
+                  )
+                "
+                @click="handleLocateNode(nodeType)"
+              >
+                {{ getLabel(nodeType) }}
+              </button>
+              <span
+                v-else
+                class="text-sm/relaxed wrap-break-word text-muted-foreground"
+              >
+                {{ getLabel(nodeType) }}
+              </span>
+            </span>
+            <Button
+              v-if="isLocatableNodeType(nodeType)"
+              variant="textonly"
+              size="icon-sm"
+              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+              :aria-label="t('rightSidePanel.locateNode')"
+              @click="handleLocateNode(nodeType)"
+            >
+              <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
+            </Button>
+          </div>
+        </li>
+      </ul>
+    </TransitionCollapse>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { cn } from '@comfyorg/tailwind-utils'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { cn } from '@comfyorg/tailwind-utils'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
@@ -193,10 +227,9 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 import type { MissingNodeType } from '@/types/comfy'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-const { group, showInfoButton, showNodeIdBadge } = defineProps<{
+const { group, showInfoButton } = defineProps<{
   group: MissingPackGroup
   showInfoButton: boolean
-  showNodeIdBadge: boolean
 }>()
 
 const emit = defineEmits<{
@@ -205,6 +238,10 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const expandedOverride = ref<boolean | null>(null)
+
+const packTextButtonClass =
+  'm-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word outline-none focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none'
 
 const { missingNodePacks, isLoading } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
@@ -219,17 +256,73 @@ const { isInstalling, installAllPacks } = usePackInstall(() =>
   nodePack.value ? [nodePack.value] : []
 )
 
+const isUnknownPack = computed(
+  () => group.packId === null && !group.isResolving
+)
+
+const packDisplayName = computed(() => {
+  if (group.packId === null) {
+    return t('rightSidePanel.missingNodePacks.unknownPack')
+  }
+  return nodePack.value?.name ?? group.packId
+})
+
+const isPackInstalled = computed(
+  () => group.packId !== null && comfyManagerStore.isPackInstalled(group.packId)
+)
+
+const showInstallAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    (nodePack.value !== null || isPackInstalled.value)
+)
+
+const showLoadingAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    !showInstallAction.value &&
+    isLoading.value
+)
+
+const showSearchAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    !showInstallAction.value &&
+    !showLoadingAction.value
+)
+
+const hasMultipleNodeTypes = computed(() => group.nodeTypes.length > 1)
+const showNodeCount = computed(() => group.nodeTypes.length !== 1)
+const expanded = computed(
+  () =>
+    expandedOverride.value ??
+    (isUnknownPack.value && hasMultipleNodeTypes.value)
+)
+const showNodeTypeList = computed(
+  () =>
+    (isUnknownPack.value && group.nodeTypes.length === 1) ||
+    (hasMultipleNodeTypes.value && expanded.value)
+)
+const primaryLocatableNodeType = computed(() => {
+  if (group.isResolving) return null
+  if (isUnknownPack.value) return null
+  if (group.nodeTypes.length !== 1) return null
+  const [nodeType] = group.nodeTypes
+  return isLocatableNodeType(nodeType) ? nodeType : null
+})
+
 function handlePackInstallClick() {
   if (!group.packId) return
-  if (!comfyManagerStore.isPackInstalled(group.packId)) {
+  if (!isPackInstalled.value) {
     void installAllPacks()
   }
 }
 
-const expanded = ref(false)
-
 function toggleExpand() {
-  expanded.value = !expanded.value
+  expandedOverride.value = !expanded.value
 }
 
 function getKey(nodeType: MissingNodeType): string {
@@ -241,10 +334,14 @@ function getLabel(nodeType: MissingNodeType): string {
   return typeof nodeType === 'string' ? nodeType : nodeType.type
 }
 
+function isLocatableNodeType(
+  nodeType: MissingNodeType
+): nodeType is Exclude<MissingNodeType, string> & { nodeId: string | number } {
+  return typeof nodeType !== 'string' && nodeType.nodeId != null
+}
+
 function handleLocateNode(nodeType: MissingNodeType) {
-  if (typeof nodeType === 'string') return
-  if (nodeType.nodeId != null) {
-    emit('locateNode', String(nodeType.nodeId))
-  }
+  if (!isLocatableNodeType(nodeType)) return
+  emit('locateNode', String(nodeType.nodeId))
 }
 </script>

src/components/rightSidePanel/errors/TabErrors.vue

@@ -148,7 +148,6 @@
           <MissingNodeCard
             v-if="group.type === 'missing_node'"
             :show-info-button="shouldShowManagerButtons"
-            :show-node-id-badge="showNodeIdBadge"
             :missing-pack-groups="missingPackGroups"
             @locate-node="handleLocateMissingNode"
             @open-manager-info="handleOpenManagerInfo"

src/components/rightSidePanel/settings/TabGlobalSettings.test.ts

@@ -0,0 +1,210 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { h, nextTick } from 'vue'
+import type { VNodeChild } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import TabGlobalSettings from './TabGlobalSettings.vue'
+
+type StubProps = Record<string, unknown>
+type StubEmit = (event: string, ...args: unknown[]) => void
+interface StubContext {
+  emit: StubEmit
+  slots: { default?: () => VNodeChild[] }
+}
+
+const store = vi.hoisted(() => ({ values: {} as Record<string, unknown> }))
+const settingsDialogShow = vi.hoisted(() => vi.fn())
+const reg = vi.hoisted(() => ({
+  items: [] as { name: string; props: StubProps; emit: StubEmit }[]
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: (key: string) => store.values[key],
+    set: vi.fn((key: string, value: unknown) => {
+      store.values[key] = value
+    })
+  })
+}))
+
+vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
+  useSettingsDialog: () => ({ show: settingsDialogShow })
+}))
+
+vi.mock('@/stores/workspace/colorPaletteStore', () => ({
+  useColorPaletteStore: () => ({
+    completedActivePalette: {
+      colors: { litegraph_base: { CLEAR_BACKGROUND_COLOR: '#222222' } }
+    }
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function modelStub(name: string) {
+  return {
+    name,
+    props: ['modelValue', 'disabled', 'options', 'label'],
+    emits: ['update:modelValue'],
+    setup(props: StubProps, { emit, slots }: StubContext) {
+      reg.items.push({ name, props, emit })
+      return () => h('div', {}, slots.default ? slots.default() : [])
+    }
+  }
+}
+
+const passthroughStub = (name: string) => ({
+  name,
+  setup(_: StubProps, { slots }: StubContext) {
+    return () => h('div', {}, slots.default ? slots.default() : [])
+  }
+})
+
+const ButtonStub = {
+  name: 'Button',
+  props: ['ariaLabel'],
+  emits: ['click'],
+  setup(props: StubProps, { emit, slots }: StubContext) {
+    return () =>
+      h(
+        'button',
+        {
+          'aria-label': props.ariaLabel as string,
+          onClick: () => emit('click')
+        },
+        slots.default ? slots.default() : []
+      )
+  }
+}
+
+function renderTab() {
+  reg.items = []
+  return render(TabGlobalSettings, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        PropertiesAccordionItem: passthroughStub('PropertiesAccordionItem'),
+        LayoutField: passthroughStub('LayoutField'),
+        FieldSwitch: modelStub('FieldSwitch'),
+        Select: modelStub('Select'),
+        ColorPicker: modelStub('ColorPicker'),
+        BackgroundImageUpload: modelStub('BackgroundImageUpload'),
+        Slider: modelStub('Slider'),
+        InputNumber: modelStub('InputNumber'),
+        Button: ButtonStub
+      }
+    }
+  })
+}
+
+const find = (name: string) => reg.items.find((i) => i.name === name)
+const backgroundSelect = () =>
+  reg.items.find(
+    (i) => i.name === 'Select' && typeof i.props.modelValue === 'string'
+  )!
+
+describe('TabGlobalSettings canvas background', () => {
+  beforeEach(() => {
+    store.values = {
+      'Comfy.Node.AlwaysShowAdvancedWidgets': false,
+      'Comfy.Canvas.SelectionToolbox': true,
+      'Comfy.VueNodes.Enabled': true,
+      'Comfy.Canvas.BackgroundImage': '',
+      'Comfy.Canvas.BackgroundPattern': 'dots',
+      'Comfy.Canvas.BackgroundColor': '',
+      'Comfy.SnapToGrid.GridSize': 20,
+      'pysssss.SnapToGrid': false,
+      'Comfy.Graph.LinkMarkers': 0,
+      'Comfy.LinkRenderMode': 2
+    }
+    settingsDialogShow.mockClear()
+  })
+
+  it('shows the color picker (not the image upload) in pattern mode', () => {
+    renderTab()
+    expect(find('ColorPicker')).toBeTruthy()
+    expect(find('BackgroundImageUpload')).toBeUndefined()
+  })
+
+  it('shows the image upload (not the color picker) when an image is set', () => {
+    store.values['Comfy.Canvas.BackgroundImage'] = '/api/view?filename=x.png'
+    renderTab()
+    expect(find('BackgroundImageUpload')).toBeTruthy()
+    expect(find('ColorPicker')).toBeUndefined()
+  })
+
+  it('keeps the selector on image when image mode is chosen without an image', async () => {
+    renderTab()
+    backgroundSelect().emit('update:modelValue', 'image')
+    expect(store.values['Comfy.Canvas.BackgroundPattern']).toBe('dots')
+  })
+
+  it('selecting a pattern clears any existing image and stores the pattern', () => {
+    store.values['Comfy.Canvas.BackgroundImage'] = '/api/view?filename=x.png'
+    renderTab()
+    backgroundSelect().emit('update:modelValue', 'grid')
+    expect(store.values['Comfy.Canvas.BackgroundImage']).toBe('')
+    expect(store.values['Comfy.Canvas.BackgroundPattern']).toBe('grid')
+  })
+
+  it('writes the background color without the leading hash', () => {
+    renderTab()
+    find('ColorPicker')!.emit('update:modelValue', '#aabbcc')
+    expect(store.values['Comfy.Canvas.BackgroundColor']).toBe('aabbcc')
+  })
+
+  it('clearing the background image keeps the selector in image mode', async () => {
+    store.values['Comfy.Canvas.BackgroundImage'] = '/api/view?filename=x.png'
+    renderTab()
+    find('BackgroundImageUpload')!.emit('update:modelValue', '')
+    await nextTick()
+
+    expect(store.values['Comfy.Canvas.BackgroundImage']).toBe('')
+    // The selector stays on image mode (upload shown, color picker hidden)
+    expect(backgroundSelect().props.modelValue).toBe('image')
+    expect(find('BackgroundImageUpload')).toBeTruthy()
+    expect(find('ColorPicker')).toBeUndefined()
+  })
+
+  it('resets the custom color from the reset button', async () => {
+    store.values['Comfy.Canvas.BackgroundColor'] = 'aabbcc'
+    renderTab()
+    const reset = screen.getByLabelText(
+      'Reset background color to theme default'
+    )
+    await userEvent.click(reset)
+    expect(store.values['Comfy.Canvas.BackgroundColor']).toBe('')
+  })
+
+  it('updates grid spacing from the slider and clamps the number input', () => {
+    renderTab()
+    const slider = reg.items.find((i) => i.name === 'Slider')!
+    slider.emit('update:modelValue', [35])
+    expect(store.values['Comfy.SnapToGrid.GridSize']).toBe(35)
+
+    const input = reg.items.find((i) => i.name === 'InputNumber')!
+    input.emit('update:modelValue', 9999)
+    expect(store.values['Comfy.SnapToGrid.GridSize']).toBe(100)
+  })
+
+  it('toggles boolean settings through the field switches', () => {
+    renderTab()
+    const switches = reg.items.filter((i) => i.name === 'FieldSwitch')
+    for (const s of switches) s.emit('update:modelValue', true)
+    expect(store.values['Comfy.VueNodes.Enabled']).toBe(true)
+  })
+
+  it('opens the full settings dialog from the footer button', async () => {
+    renderTab()
+    await userEvent.click(screen.getByText('View all settings'))
+    expect(settingsDialogShow).toHaveBeenCalled()
+  })
+})

src/components/rightSidePanel/settings/TabGlobalSettings.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import InputNumber from 'primevue/inputnumber'
 import Select from 'primevue/select'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue'
 import Button from '@/components/ui/button/Button.vue'
+import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
 import Slider from '@/components/ui/slider/Slider.vue'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LinkRenderType } from '@/lib/litegraph/src/types/globalEnums'
@@ -12,6 +14,9 @@ import { LinkMarkerShape } from '@/lib/litegraph/src/types/globalEnums'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { WidgetInputBaseClass } from '@/renderer/extensions/vueNodes/widgets/components/layout'
 import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import type { CanvasBackgroundPattern } from '@/utils/canvasPatternUtil'
+import { getEffectiveCanvasBackgroundColor } from '@/utils/canvasPatternUtil'
 import { cn } from '@comfyorg/tailwind-utils'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
@@ -40,6 +45,77 @@ const nodes2Enabled = computed({
 })
 
 // CANVAS settings
+const colorPaletteStore = useColorPaletteStore()
+
+type CanvasBackgroundMode = CanvasBackgroundPattern | 'image'
+
+// Keeps the Image option selected while no image is set, e.g. before the
+// first upload or right after removing the current one.
+const imageModeSelected = ref(false)
+
+const backgroundImage = computed({
+  get: () => settingStore.get('Comfy.Canvas.BackgroundImage') ?? '',
+  set: (value) => {
+    if (!value) imageModeSelected.value = true
+    settingStore.set('Comfy.Canvas.BackgroundImage', value)
+  }
+})
+
+const isBackgroundImageSet = computed(() => !!backgroundImage.value)
+
+const backgroundMode = computed<CanvasBackgroundMode>({
+  get: () =>
+    isBackgroundImageSet.value || imageModeSelected.value
+      ? 'image'
+      : settingStore.get('Comfy.Canvas.BackgroundPattern'),
+  set: (value) => {
+    if (value === 'image') {
+      imageModeSelected.value = true
+      return
+    }
+    imageModeSelected.value = false
+    if (isBackgroundImageSet.value) {
+      settingStore.set('Comfy.Canvas.BackgroundImage', '')
+    }
+    settingStore.set('Comfy.Canvas.BackgroundPattern', value)
+  }
+})
+
+const backgroundOptions = computed(() => [
+  {
+    value: 'dots',
+    label: t('settings.Comfy_Canvas_BackgroundPattern.options.Dots')
+  },
+  {
+    value: 'grid',
+    label: t('settings.Comfy_Canvas_BackgroundPattern.options.Grid')
+  },
+  { value: 'none', label: t('g.none') },
+  { value: 'image', label: t('rightSidePanel.globalSettings.image') }
+])
+
+const hasCustomBackgroundColor = computed(
+  () => settingStore.get('Comfy.Canvas.BackgroundColor') !== ''
+)
+
+const backgroundColor = computed({
+  get: () =>
+    getEffectiveCanvasBackgroundColor(
+      settingStore.get('Comfy.Canvas.BackgroundColor'),
+      colorPaletteStore.completedActivePalette.colors.litegraph_base
+        .CLEAR_BACKGROUND_COLOR
+    ),
+  set: (value) =>
+    settingStore.set(
+      'Comfy.Canvas.BackgroundColor',
+      value.replace(/^#/, '').slice(0, 6)
+    )
+})
+
+async function resetBackgroundColor() {
+  await settingStore.set('Comfy.Canvas.BackgroundColor', '')
+}
+
 const gridSpacing = computed({
   get: () => settingStore.get('Comfy.SnapToGrid.GridSize'),
   set: (value) => settingStore.set('Comfy.SnapToGrid.GridSize', value)
@@ -128,6 +204,55 @@ function openFullSettings() {
         {{ t('rightSidePanel.globalSettings.canvas') }}
       </template>
       <div class="space-y-4 px-4 py-3">
+        <LayoutField
+          :label="t('rightSidePanel.globalSettings.background')"
+          :tooltip="t('settings.Comfy_Canvas_BackgroundPattern.tooltip')"
+        >
+          <Select
+            v-model="backgroundMode"
+            :options="backgroundOptions"
+            :aria-label="t('rightSidePanel.globalSettings.background')"
+            :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+            size="small"
+            :pt="{
+              option: 'text-xs',
+              dropdown: 'w-8',
+              label: cn('min-w-[4ch] truncate', $slots.default && 'mr-5'),
+              overlay: 'w-fit min-w-full'
+            }"
+            data-capture-wheel="true"
+            option-label="label"
+            option-value="value"
+          />
+        </LayoutField>
+        <BackgroundImageUpload
+          v-if="backgroundMode === 'image'"
+          v-model="backgroundImage"
+        />
+        <LayoutField
+          v-else
+          :label="t('rightSidePanel.globalSettings.backgroundColor')"
+          :tooltip="t('settings.Comfy_Canvas_BackgroundColor.tooltip')"
+        >
+          <div class="flex items-center gap-1">
+            <ColorPicker
+              v-model="backgroundColor"
+              class="min-w-0 grow"
+              :aria-label="t('rightSidePanel.globalSettings.backgroundColor')"
+            />
+            <Button
+              v-if="hasCustomBackgroundColor"
+              variant="muted-textonly"
+              size="icon"
+              :aria-label="
+                t('rightSidePanel.globalSettings.resetBackgroundColor')
+              "
+              @click="resetBackgroundColor"
+            >
+              <i class="icon-[lucide--rotate-ccw] size-4" />
+            </Button>
+          </div>
+        </LayoutField>
         <LayoutField :label="t('rightSidePanel.globalSettings.gridSpacing')">
           <div
             :class="

src/components/ui/color-picker/ColorPicker.test.ts

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import ColorPicker from './ColorPicker.vue'
+
+describe('ColorPicker', () => {
+  it('does not echo a write back when the model is changed externally', async () => {
+    const onUpdate = vi.fn()
+    const { rerender } = render(ColorPicker, {
+      props: { modelValue: '#823182', 'onUpdate:modelValue': onUpdate }
+    })
+
+    await rerender({ modelValue: '' })
+    await nextTick()
+    await nextTick()
+
+    expect(onUpdate).not.toHaveBeenCalled()
+  })
+
+  it('shows the latest external color without writing back', async () => {
+    const onUpdate = vi.fn()
+    const { rerender } = render(ColorPicker, {
+      props: { modelValue: '#823182', 'onUpdate:modelValue': onUpdate }
+    })
+
+    await rerender({ modelValue: '#222222' })
+    await nextTick()
+    await nextTick()
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(screen.getByText('#222222')).toBeTruthy()
+  })
+})

src/components/ui/color-picker/ColorPicker.vue

@@ -5,6 +5,7 @@ import {
   PopoverRoot,
   PopoverTrigger
 } from 'reka-ui'
+import { ZIndex } from '@primeuix/utils/zindex'
 import { computed, ref, watch } from 'vue'
 
 import type { HSVA } from '@/utils/colorUtil'
@@ -23,9 +24,15 @@ const modelValue = defineModel<string>({ default: '#000000' })
 const hsva = ref<HSVA>(hexToHsva(modelValue.value || '#000000'))
 const displayMode = ref<'hex' | 'rgba'>('hex')
 
+// Guard against echoing external model changes back: hex -> hsva -> hex is
+// not an identity (rounding), so without the flag an outside write (e.g.
+// resetting a setting to '') would immediately be overwritten.
+let syncingFromModel = false
+
 watch(modelValue, (newVal) => {
   const current = hsvaToHex(hsva.value)
   if (newVal !== current) {
+    syncingFromModel = true
     hsva.value = hexToHsva(newVal || '#000000')
   }
 })
@@ -33,6 +40,10 @@ watch(modelValue, (newVal) => {
 watch(
   hsva,
   (newHsva) => {
+    if (syncingFromModel) {
+      syncingFromModel = false
+      return
+    }
     const hex = hsvaToHex(newHsva)
     if (hex !== modelValue.value) {
       modelValue.value = hex
@@ -60,10 +71,29 @@ const previewColor = computed(() => {
 const displayHex = computed(() => rgbToHex(baseRgb.value).toLowerCase())
 
 const isOpen = ref(false)
+
+// The popover portals to body, so a static z-index can lose to dialogs that
+// take theirs from the shared PrimeVue ZIndex counter (see vRekaZIndex.ts).
+// Reka copies the content's z-index onto its popper wrapper, so compute the
+// content z-index from the same counter on each open to stack above
+// whichever dialog opened the picker.
+const BASE_POPOVER_Z_INDEX = 1700
+const popoverZIndex = ref(BASE_POPOVER_Z_INDEX)
+
+watch(isOpen, (open) => {
+  if (open) {
+    popoverZIndex.value = Math.max(
+      BASE_POPOVER_Z_INDEX,
+      ZIndex.getCurrent('modal') + 1
+    )
+  }
+})
 </script>
 
 <template>
-  <PopoverRoot v-model:open="isOpen">
+  <!-- Modal so the click that dismisses the popover cannot fall through to
+       the canvas and start a drag-select marquee. -->
+  <PopoverRoot v-model:open="isOpen" modal>
     <PopoverTrigger as-child>
       <button
         type="button"
@@ -115,7 +145,7 @@ const isOpen = ref(false)
         align="start"
         :side-offset="7"
         :collision-padding="10"
-        class="z-1700"
+        :style="{ zIndex: popoverZIndex }"
       >
         <ColorPickerPanel
           v-model:hsva="hsva"

src/components/ui/image-upload/ImageUpload.stories.ts

@@ -0,0 +1,68 @@
+import type {
+  ComponentPropsAndSlots,
+  Meta,
+  StoryObj
+} from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ImageUpload from './ImageUpload.vue'
+
+const meta: Meta<ComponentPropsAndSlots<typeof ImageUpload>> = {
+  title: 'Components/ImageUpload',
+  component: ImageUpload,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div class="w-60"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { ImageUpload },
+    setup() {
+      const url = ref('')
+      return { url }
+    },
+    template: '<ImageUpload v-model="url" />'
+  })
+}
+
+export const WithImage: Story = {
+  render: () => ({
+    components: { ImageUpload },
+    setup() {
+      const url = ref('/api/view?filename=mountain+lake.png&type=input')
+      return { url }
+    },
+    template: '<ImageUpload v-model="url" />'
+  })
+}
+
+export const Loading: Story = {
+  render: () => ({
+    components: { ImageUpload },
+    setup() {
+      const url = ref('')
+      return { url }
+    },
+    template: '<ImageUpload v-model="url" loading />'
+  })
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { ImageUpload },
+    setup() {
+      const url = ref('')
+      return { url }
+    },
+    template: '<ImageUpload v-model="url" disabled />'
+  })
+}

src/components/ui/image-upload/ImageUpload.test.ts

@@ -0,0 +1,79 @@
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import ImageUpload from './ImageUpload.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function renderImageUpload(props: Record<string, unknown> = {}) {
+  return render(ImageUpload, {
+    props,
+    global: { plugins: [i18n] }
+  })
+}
+
+describe('ImageUpload', () => {
+  it('shows a placeholder when no image is set', () => {
+    renderImageUpload({ modelValue: '' })
+    expect(screen.getByText('Choose image')).toBeTruthy()
+    expect(screen.queryByLabelText('Remove image')).toBeNull()
+  })
+
+  it('shows the image base name extracted from the URL', () => {
+    renderImageUpload({
+      modelValue:
+        '/api/view?filename=backgrounds%2Fmountain+lake.png&type=input'
+    })
+    expect(screen.getByText('mountain lake.png')).toBeTruthy()
+  })
+
+  it('falls back to the icon when the preview image fails to load', async () => {
+    renderImageUpload({ modelValue: '/api/view?filename=missing.png' })
+    const img = screen.getByTestId('image-upload-preview')
+    await fireEvent.error(img)
+    expect(screen.queryByTestId('image-upload-preview')).toBeNull()
+  })
+
+  it('opens the file browser when the row is clicked', async () => {
+    const user = userEvent.setup({ applyAccept: false })
+    renderImageUpload({ modelValue: '' })
+    const fileInput = screen.getByTestId<HTMLInputElement>('image-upload-input')
+    const clickSpy = vi.spyOn(fileInput, 'click')
+
+    await user.click(screen.getByText('Choose image'))
+
+    expect(clickSpy).toHaveBeenCalled()
+  })
+
+  it('emits fileSelected when a file is picked', async () => {
+    const user = userEvent.setup({ applyAccept: false })
+    const { emitted } = renderImageUpload({ modelValue: '' })
+    const file = new File(['x'], 'photo.png', { type: 'image/png' })
+
+    await user.upload(
+      screen.getByTestId<HTMLInputElement>('image-upload-input'),
+      file
+    )
+
+    expect(emitted('fileSelected')).toEqual([[file]])
+  })
+
+  it('clears the model when the remove button is clicked', async () => {
+    const user = userEvent.setup()
+    const { emitted } = renderImageUpload({
+      modelValue: '/api/view?filename=bg.png'
+    })
+
+    await user.click(screen.getByLabelText('Remove image'))
+
+    expect(emitted('update:modelValue')).toEqual([['']])
+  })
+})

src/components/ui/image-upload/ImageUpload.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+const {
+  class: className,
+  disabled = false,
+  loading = false
+} = defineProps<{
+  class?: string
+  disabled?: boolean
+  loading?: boolean
+}>()
+
+const modelValue = defineModel<string>({ default: '' })
+
+const emit = defineEmits<{
+  fileSelected: [file: File]
+}>()
+
+const { t } = useI18n()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const previewFailed = ref(false)
+watch(modelValue, () => {
+  previewFailed.value = false
+})
+
+const imageBaseName = computed(() => {
+  if (!modelValue.value) return ''
+  try {
+    const url = new URL(modelValue.value, window.location.origin)
+    const filename =
+      url.searchParams.get('filename') ?? url.pathname.split('/').pop() ?? ''
+    return filename.split('/').pop() ?? ''
+  } catch {
+    return modelValue.value
+  }
+})
+
+function openFileBrowser() {
+  fileInput.value?.click()
+}
+
+function handleFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (file) emit('fileSelected', file)
+  input.value = ''
+}
+
+function clearImage() {
+  modelValue.value = ''
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex h-8 w-full items-center overflow-clip rounded-lg bg-component-node-widget-background hover:bg-component-node-widget-background-hovered',
+        (disabled || loading) && 'cursor-not-allowed opacity-50',
+        className
+      )
+    "
+  >
+    <button
+      type="button"
+      :disabled="disabled || loading"
+      class="flex h-full min-w-0 flex-1 cursor-pointer items-center border-none bg-transparent p-0 outline-none disabled:cursor-not-allowed"
+      @click="openFileBrowser"
+    >
+      <span class="flex size-8 shrink-0 items-center justify-center">
+        <i
+          v-if="loading"
+          class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground"
+        />
+        <img
+          v-else-if="modelValue && !previewFailed"
+          :src="modelValue"
+          alt=""
+          data-testid="image-upload-preview"
+          class="size-5 rounded-sm object-cover"
+          @error="previewFailed = true"
+        />
+        <i v-else class="icon-[lucide--image] size-4 text-muted-foreground" />
+      </span>
+      <span
+        :class="
+          cn(
+            'min-w-0 flex-1 truncate text-left text-xs',
+            imageBaseName
+              ? 'text-component-node-foreground'
+              : 'text-muted-foreground'
+          )
+        "
+      >
+        {{ imageBaseName || t('g.chooseImage') }}
+      </span>
+    </button>
+    <button
+      v-if="modelValue && !loading"
+      type="button"
+      :disabled="disabled"
+      :aria-label="t('g.removeImage')"
+      class="flex size-8 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent text-component-node-foreground outline-none disabled:cursor-not-allowed"
+      @click="clearImage"
+    >
+      <i class="icon-[lucide--x] size-4" />
+    </button>
+    <input
+      ref="fileInput"
+      data-testid="image-upload-input"
+      type="file"
+      class="hidden"
+      accept="image/*"
+      @change="handleFileChange"
+    />
+  </div>
+</template>

src/extensions/core/load3d.ts

@@ -22,6 +22,7 @@ import {
   LOAD3D_NONE_MODEL,
   SUPPORTED_EXTENSIONS_ACCEPT
 } from '@/extensions/core/load3d/constants'
+import { snapshotLoad3dState } from '@/extensions/core/load3d/load3dSerialize'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
@@ -413,16 +414,10 @@ useExtensionService().registerExtension({
             if (cached) return cached
           }
 
-          const cameraConfig: CameraConfig = (node.properties[
-            'Camera Config'
-          ] as CameraConfig | undefined) || {
-            cameraType: currentLoad3d.getCurrentCameraType(),
-            fov: currentLoad3d.cameraManager.perspectiveCamera.fov
-          }
-          cameraConfig.state = currentLoad3d.getCameraState()
-          node.properties['Camera Config'] = cameraConfig
-
-          currentLoad3d.stopRecording()
+          const { camera_info, model_3d_info } = snapshotLoad3dState(
+            node,
+            currentLoad3d
+          )
 
           const {
             scene: imageData,
@@ -441,16 +436,11 @@ useExtensionService().registerExtension({
 
           currentLoad3d.handleResize()
 
-          const modelInfo = currentLoad3d.getModelInfo()
-          const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
-
           const returnVal: Load3dCachedOutput = {
             image: `threed/${data.name} [temp]`,
             mask: `threed/${dataMask.name} [temp]`,
             normal: `threed/${dataNormal.name} [temp]`,
-            camera_info:
-              (node.properties['Camera Config'] as CameraConfig | undefined)
-                ?.state || null,
+            camera_info,
             recording: '',
             model_3d_info
           }

src/extensions/core/load3d/MeshModelAdapter.test.ts

@@ -23,6 +23,7 @@ const mtlLoaderStub = {
 const objLoaderStub = {
   setWorkerUrl: vi.fn(),
   setMaterials: vi.fn(),
+  setBaseObject3d: vi.fn(),
   loadAsync: vi.fn<(url: string) => Promise<THREE.Object3D>>()
 }
 
@@ -58,6 +59,7 @@ vi.mock('wwobjloader2', () => ({
   OBJLoader2Parallel: class {
     setWorkerUrl = objLoaderStub.setWorkerUrl
     setMaterials = objLoaderStub.setMaterials
+    setBaseObject3d = objLoaderStub.setBaseObject3d
     loadAsync = objLoaderStub.loadAsync
   },
   MtlObjBridge: {
@@ -247,6 +249,24 @@ describe('MeshModelAdapter', () => {
 
       expect(ctx.registerOriginalMaterial).toHaveBeenCalledTimes(1)
     })
+
+    it('resets baseObject3d on every load so meshes do not accumulate across calls', async () => {
+      objLoaderStub.loadAsync.mockResolvedValue(makeFbxLikeGroup())
+
+      const adapter = new MeshModelAdapter()
+      const ctx = makeContext('wireframe')
+      await adapter.load(ctx, '/api/view/', 'first.obj')
+      await adapter.load(ctx, '/api/view/', 'second.obj')
+
+      expect(objLoaderStub.setBaseObject3d).toHaveBeenCalledTimes(2)
+      const bases = objLoaderStub.setBaseObject3d.mock.calls.map(
+        ([base]) => base
+      )
+      expect(bases[0]).toBeInstanceOf(THREE.Object3D)
+      expect(bases[1]).toBeInstanceOf(THREE.Object3D)
+      // Each call should hand the loader a fresh container, not the same one.
+      expect(bases[0]).not.toBe(bases[1])
+    })
   })
 
   describe('GLTF loader path', () => {

src/extensions/core/load3d/MeshModelAdapter.ts

@@ -102,6 +102,8 @@ export class MeshModelAdapter implements ModelAdapter {
     path: string,
     filename: string
   ): Promise<THREE.Object3D> {
+    this.objLoader.setBaseObject3d(new THREE.Object3D())
+
     if (ctx.materialMode === 'original') {
       try {
         this.mtlLoader.setPath(path)

src/extensions/core/load3d/load3dSerialize.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type Load3d from '@/extensions/core/load3d/Load3d'
+import { snapshotLoad3dState } from '@/extensions/core/load3d/load3dSerialize'
+import type { CameraState } from '@/extensions/core/load3d/interfaces'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+
+function makeNode(props: Record<string, unknown> = {}): LGraphNode {
+  return { properties: { ...props } } as unknown as LGraphNode
+}
+
+const baseCameraState: CameraState = {
+  position: { x: 1, y: 2, z: 3 },
+  target: { x: 0, y: 0, z: 0 },
+  zoom: 1,
+  cameraType: 'perspective'
+} as unknown as CameraState
+
+function makeLoad3d({
+  cameraType = 'perspective',
+  fov = 35,
+  modelInfo = { transform: { position: [0, 0, 0] } } as unknown
+}: {
+  cameraType?: string
+  fov?: number
+  modelInfo?: unknown
+} = {}) {
+  return {
+    getCurrentCameraType: vi.fn(() => cameraType),
+    cameraManager: { perspectiveCamera: { fov } },
+    getCameraState: vi.fn(() => baseCameraState),
+    stopRecording: vi.fn(),
+    getModelInfo: vi.fn(() => modelInfo)
+  } as unknown as Load3d
+}
+
+describe('snapshotLoad3dState', () => {
+  it('returns only camera_info and model_3d_info', () => {
+    const result = snapshotLoad3dState(makeNode(), makeLoad3d())
+    expect(Object.keys(result).sort()).toEqual(['camera_info', 'model_3d_info'])
+  })
+
+  it('writes the camera state into properties["Camera Config"]', () => {
+    const node = makeNode()
+    snapshotLoad3dState(node, makeLoad3d({ fov: 42 }))
+    const cfg = node.properties['Camera Config'] as Record<string, unknown>
+    expect(cfg).toMatchObject({
+      cameraType: 'perspective',
+      fov: 42,
+      state: baseCameraState
+    })
+  })
+
+  it('preserves an existing Camera Config object instead of replacing it', () => {
+    const existing = { cameraType: 'orthographic', fov: 99 }
+    const node = makeNode({ 'Camera Config': existing })
+    snapshotLoad3dState(node, makeLoad3d())
+    // Same object reference (mutated in place), with state attached.
+    expect(node.properties['Camera Config']).toBe(existing)
+    expect(
+      (node.properties['Camera Config'] as Record<string, unknown>).state
+    ).toBe(baseCameraState)
+  })
+
+  it('stops in-progress recording as a side effect', () => {
+    const load3d = makeLoad3d()
+    snapshotLoad3dState(makeNode(), load3d)
+    expect(load3d.stopRecording).toHaveBeenCalledOnce()
+  })
+
+  it('returns model_3d_info as a single-element list when a model is loaded', () => {
+    const info = { transform: { position: [1, 2, 3] } }
+    const result = snapshotLoad3dState(
+      makeNode(),
+      makeLoad3d({ modelInfo: info })
+    )
+    expect(result.model_3d_info).toEqual([info])
+  })
+
+  it('returns an empty model_3d_info list when no model is loaded', () => {
+    const result = snapshotLoad3dState(
+      makeNode(),
+      makeLoad3d({ modelInfo: null })
+    )
+    expect(result.model_3d_info).toEqual([])
+  })
+})

src/extensions/core/load3d/load3dSerialize.ts

@@ -0,0 +1,36 @@
+import type Load3d from '@/extensions/core/load3d/Load3d'
+import type {
+  CameraConfig,
+  CameraState,
+  Model3DInfo
+} from '@/extensions/core/load3d/interfaces'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+
+export type Load3dSerializedBase = {
+  camera_info: CameraState | null
+  model_3d_info: Model3DInfo
+}
+
+export function snapshotLoad3dState(
+  node: LGraphNode,
+  load3d: Load3d
+): Load3dSerializedBase {
+  const cameraConfig: CameraConfig = (node.properties['Camera Config'] as
+    | CameraConfig
+    | undefined) || {
+    cameraType: load3d.getCurrentCameraType(),
+    fov: load3d.cameraManager.perspectiveCamera.fov
+  }
+  cameraConfig.state = load3d.getCameraState()
+  node.properties['Camera Config'] = cameraConfig
+
+  load3d.stopRecording()
+
+  const modelInfo = load3d.getModelInfo()
+  const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
+
+  return {
+    camera_info: cameraConfig.state ?? null,
+    model_3d_info
+  }
+}

src/extensions/core/load3d/nodeTypes.ts

@@ -9,7 +9,12 @@ const LOAD3D_PREVIEW_NODES = new Set([
   'PreviewPointCloud'
 ])
 
-const LOAD3D_ALL_NODES = new Set([...LOAD3D_PREVIEW_NODES, 'Load3D', 'SaveGLB'])
+const LOAD3D_ALL_NODES = new Set([
+  ...LOAD3D_PREVIEW_NODES,
+  'Load3D',
+  'Load3DAdvanced',
+  'SaveGLB'
+])
 
 export const isLoad3dPreviewNode = (nodeType: string): boolean =>
   LOAD3D_PREVIEW_NODES.has(nodeType)

src/extensions/core/load3dAdvanced.ts

@@ -0,0 +1,103 @@
+import { nextTick } from 'vue'
+
+import Load3DAdvanced from '@/components/load3d/Load3DAdvanced.vue'
+import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
+import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper'
+import type { CameraConfig } from '@/extensions/core/load3d/interfaces'
+import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
+import { snapshotLoad3dState } from '@/extensions/core/load3d/load3dSerialize'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import { useExtensionService } from '@/services/extensionService'
+import { useLoad3dService } from '@/services/load3dService'
+
+const inputSpecLoad3DAdvanced: CustomInputSpec = {
+  name: 'viewport_state',
+  type: 'LOAD_3D_ADVANCED',
+  isPreview: false
+}
+
+useExtensionService().registerExtension({
+  name: 'Comfy.Load3DAdvanced',
+
+  beforeRegisterNodeDef(_nodeType, nodeData) {
+    if (nodeData.name !== 'Load3DAdvanced') return
+    if (!nodeData.input?.required) return
+    nodeData.input.required.viewport_state = ['LOAD_3D_ADVANCED', {}]
+  },
+
+  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+    if (node.constructor.comfyClass !== 'Load3DAdvanced') return []
+
+    const load3d = useLoad3dService().getLoad3d(node)
+    if (!load3d) return []
+
+    return createExportMenuItems(load3d)
+  },
+
+  getCustomWidgets() {
+    return {
+      LOAD_3D_ADVANCED(node) {
+        const widget = new ComponentWidgetImpl({
+          node,
+          name: 'viewport_state',
+          component: Load3DAdvanced,
+          inputSpec: inputSpecLoad3DAdvanced,
+          options: {}
+        })
+
+        widget.type = 'load3DAdvanced'
+
+        addWidget(node, widget)
+
+        return { widget }
+      }
+    }
+  },
+
+  async nodeCreated(node: LGraphNode) {
+    if (node.constructor.comfyClass !== 'Load3DAdvanced') return
+
+    const [oldWidth, oldHeight] = node.size
+    node.setSize([Math.max(oldWidth, 300), Math.max(oldHeight, 600)])
+
+    await nextTick()
+
+    useLoad3d(node).onLoad3dReady((load3d) => {
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      const width = node.widgets?.find((w) => w.name === 'width')
+      const height = node.widgets?.find((w) => w.name === 'height')
+      if (!modelWidget || !width || !height) return
+
+      const cameraConfig = node.properties['Camera Config'] as
+        | CameraConfig
+        | undefined
+      const cameraState = cameraConfig?.state
+
+      const config = new Load3DConfiguration(load3d, node.properties)
+      config.configure({
+        loadFolder: 'input',
+        modelWidget,
+        cameraState,
+        width,
+        height
+      })
+    })
+
+    useLoad3d(node).waitForLoad3d(() => {
+      const sceneWidget = node.widgets?.find((w) => w.name === 'viewport_state')
+      if (!sceneWidget) return
+
+      sceneWidget.serializeValue = async () => {
+        const currentLoad3d = nodeToLoad3dMap.get(node)
+        if (!currentLoad3d) {
+          console.error('No load3d instance found for node')
+          return null
+        }
+        return snapshotLoad3dState(node, currentLoad3d)
+      }
+    })
+  }
+})

src/extensions/core/load3dLazy.ts

@@ -37,6 +37,7 @@ async function loadLoad3dExtensions(): Promise<ComfyExtension[]> {
     // Import extensions - they self-register via useExtensionService()
     await Promise.all([
       import('./load3d'),
+      import('./load3dAdvanced'),
       import('./load3dPreviewExtensions'),
       import('./saveMesh')
     ])
@@ -66,6 +67,12 @@ useExtensionService().registerExtension({
           modelFile[1].mesh_upload = true
           modelFile[1].upload_subfolder = '3d'
         }
+      } else if (nodeData.name === 'Load3DAdvanced') {
+        const modelFile = nodeData.input?.required?.model_file
+        if (modelFile?.[1]) {
+          modelFile[1].mesh_upload = true
+          modelFile[1].upload_subfolder = ''
+        }
       }
 
       // Load the 3D extensions and replay their beforeRegisterNodeDef hooks,

src/locales/en/main.json

@@ -204,6 +204,7 @@
     "control_after_generate": "control after generate",
     "control_before_generate": "control before generate",
     "choose_file_to_upload": "choose file to upload",
+    "chooseImage": "Choose image",
     "uploadAlreadyInProgress": "Upload already in progress",
     "uploadTimedOut": "Upload timed out. Please try again.",
     "capture": "capture",
@@ -2118,6 +2119,7 @@
     "errorSaveSetting": "Error saving setting {id}: {err}",
     "errorCopyImage": "Error copying image: {error}",
     "errorOpenImage": "Error opening image: {error}",
+    "errorUploadingBackgroundImage": "Error uploading background 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.",
@@ -2423,6 +2425,7 @@
     "member": "member",
     "usdPerMonth": "USD / mo",
     "usdPerMonthPerMember": "USD / mo / member",
+    "creditSliderSave": "Save {percent}% ({amount})",
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
@@ -3595,6 +3598,10 @@
       "showInfoBadges": "Show info badges",
       "showToolbox": "Show toolbox on selection",
       "nodes2": "Nodes 2.0",
+      "background": "Background",
+      "image": "Image",
+      "backgroundColor": "Background color",
+      "resetBackgroundColor": "Reset background color to theme default",
       "gridSpacing": "Grid spacing",
       "snapNodesToGrid": "Snap nodes to grid",
       "linkShape": "Link shape",
@@ -3629,12 +3636,10 @@
       "unsupportedTitle": "Unsupported Node Packs",
       "ossManagerDisabledHint": "To install missing nodes, first run {pipCmd} in your Python environment to install Node Manager, then restart ComfyUI with the {flag} flag.",
       "installAll": "Install All",
-      "installNodePack": "Install node pack",
       "unknownPack": "Unknown pack",
       "installing": "Installing...",
       "installed": "Installed",
       "applyChanges": "Apply Changes",
-      "searchInManager": "Search in Node Manager",
       "viewInManager": "View in Manager",
       "collapse": "Collapse",
       "expand": "Expand"

src/locales/en/settings.json

@@ -29,10 +29,23 @@
     "name": "Disable animations",
     "tooltip": "Turns off most CSS animations and transitions. Speeds up inference when the display GPU is also used for generation."
   },
+  "Comfy_Canvas_BackgroundColor": {
+    "name": "Canvas background color",
+    "tooltip": "Custom canvas background color. Leave empty to follow the active theme."
+  },
   "Comfy_Canvas_BackgroundImage": {
     "name": "Canvas background image",
     "tooltip": "Image URL for the canvas background. You can right-click an image in the outputs panel and select \"Set as Background\" to use it, or upload your own image using the upload button."
   },
+  "Comfy_Canvas_BackgroundPattern": {
+    "name": "Canvas background pattern",
+    "tooltip": "Pattern drawn on the canvas background. Not shown while a custom background image is set.",
+    "options": {
+      "Dots": "Dots",
+      "Grid": "Grid",
+      "None": "None"
+    }
+  },
   "Comfy_Canvas_LeftMouseClickBehavior": {
     "name": "Left Mouse Click Behavior",
     "options": {

src/platform/assets/schemas/assetSchema.ts

@@ -22,7 +22,7 @@ const zAsset = z.object({
 })
 
 const zAssetResponse = zListAssetsResponse
-  .pick({ total: true, has_more: true })
+  .pick({ total: true, has_more: true, next_cursor: true })
   .extend({
     assets: z.array(zAsset)
   })

src/platform/assets/services/assetService.test.ts

@@ -53,6 +53,7 @@ const fetchApiMock = vi.mocked(api.fetchApi)
 type AssetListResponseOptions = {
   hasMore?: AssetResponse['has_more']
   total?: AssetResponse['total']
+  nextCursor?: AssetResponse['next_cursor']
 }
 
 function buildResponse(
@@ -68,9 +69,18 @@ function buildResponse(
 
 function buildAssetListResponse(
   assets: AssetItem[],
-  { hasMore = false, total = assets.length }: AssetListResponseOptions = {}
+  {
+    hasMore = false,
+    total = assets.length,
+    nextCursor
+  }: AssetListResponseOptions = {}
 ): Response {
-  return buildResponse({ assets, total, has_more: hasMore })
+  return buildResponse({
+    assets,
+    total,
+    has_more: hasMore,
+    ...(nextCursor === undefined ? {} : { next_cursor: nextCursor })
+  })
 }
 
 function validAsset(overrides: Partial<AssetItem> = {}): AssetItem {
@@ -512,7 +522,7 @@ describe(assetService.getAllAssetsByTag, () => {
     vi.clearAllMocks()
   })
 
-  it('paginates tagged asset requests with include_public=true', async () => {
+  it('walks pages by keyset cursor with include_public=true', async () => {
     fetchApiMock
       .mockResolvedValueOnce(
         buildAssetListResponse(
@@ -520,7 +530,7 @@ describe(assetService.getAllAssetsByTag, () => {
             validAsset({ id: 'a', tags: ['input'] }),
             validAsset({ id: 'b', tags: ['input'] })
           ],
-          { hasMore: true }
+          { hasMore: true, nextCursor: 'cursor-page-2' }
         )
       )
       .mockResolvedValueOnce(
@@ -538,6 +548,8 @@ describe(assetService.getAllAssetsByTag, () => {
     expect(firstParams.get('include_public')).toBe('true')
     expect(firstParams.get('exclude_tags')).toBe(MISSING_TAG)
     expect(firstParams.get('limit')).toBe('2')
+    // First page carries neither a cursor nor an offset.
+    expect(firstParams.has('after')).toBe(false)
     expect(firstParams.has('offset')).toBe(false)
 
     const secondUrl = fetchApiMock.mock.calls[1]?.[0] as string
@@ -545,7 +557,9 @@ describe(assetService.getAllAssetsByTag, () => {
     expect(secondParams.get('include_public')).toBe('true')
     expect(secondParams.get('exclude_tags')).toBe(MISSING_TAG)
     expect(secondParams.get('limit')).toBe('2')
-    expect(secondParams.get('offset')).toBe('2')
+    // Subsequent pages resume from the prior response's next_cursor, never offset.
+    expect(secondParams.get('after')).toBe('cursor-page-2')
+    expect(secondParams.has('offset')).toBe(false)
   })
 
   it('honors has_more when walking tagged asset pages', async () => {
@@ -556,7 +570,7 @@ describe(assetService.getAllAssetsByTag, () => {
             validAsset({ id: 'first', tags: ['input'] }),
             validAsset({ id: 'second', tags: ['input'] })
           ],
-          { hasMore: true }
+          { hasMore: true, nextCursor: 'cursor-next' }
         )
       )
       .mockResolvedValueOnce(
@@ -577,7 +591,45 @@ describe(assetService.getAllAssetsByTag, () => {
       throw new Error('Expected a second asset request URL')
     }
     const secondParams = new URL(secondUrl, 'http://localhost').searchParams
-    expect(secondParams.get('offset')).toBe('2')
+    expect(secondParams.get('after')).toBe('cursor-next')
+  })
+
+  it('stops walking when next_cursor is absent even if has_more is true', async () => {
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([validAsset({ id: 'only', tags: ['input'] })], {
+        hasMore: true
+      })
+    )
+
+    const assets = await assetService.getAllAssetsByTag('input', true, {
+      limit: 2
+    })
+
+    expect(assets.map((a) => a.id)).toEqual(['only'])
+    expect(fetchApiMock).toHaveBeenCalledOnce()
+  })
+
+  it('stops walking when the server returns a non-advancing cursor', async () => {
+    fetchApiMock
+      .mockResolvedValueOnce(
+        buildAssetListResponse([validAsset({ id: 'a', tags: ['input'] })], {
+          hasMore: true,
+          nextCursor: 'stuck'
+        })
+      )
+      .mockResolvedValueOnce(
+        buildAssetListResponse([validAsset({ id: 'b', tags: ['input'] })], {
+          hasMore: true,
+          nextCursor: 'stuck'
+        })
+      )
+
+    const assets = await assetService.getAllAssetsByTag('input', true, {
+      limit: 1
+    })
+
+    expect(assets.map((a) => a.id)).toEqual(['a', 'b'])
+    expect(fetchApiMock).toHaveBeenCalledTimes(2)
   })
 
   it.for([
@@ -636,7 +688,7 @@ describe(assetService.getAllAssetsByTag, () => {
           validAsset({ id: 'a', tags: ['input'] }),
           validAsset({ id: 'b', tags: ['input'] })
         ],
-        { hasMore: true }
+        { hasMore: true, nextCursor: 'cursor-page-2' }
       )
     })
 

src/platform/assets/services/assetService.ts

@@ -31,6 +31,11 @@ export interface PaginationOptions {
 }
 
 interface AssetPaginationOptions extends PaginationOptions {
+  /**
+   * Opaque keyset cursor from a prior response's `next_cursor`. When set, the
+   * server resumes after that cursor and `offset` is ignored.
+   */
+  after?: string
   signal?: AbortSignal
 }
 
@@ -38,6 +43,7 @@ interface AssetRequestOptions extends PaginationOptions {
   includeTags: string[]
   excludeTags?: string[]
   includePublic?: boolean
+  after?: string
   signal?: AbortSignal
 }
 
@@ -286,6 +292,7 @@ function createAssetService() {
       excludeTags = DEFAULT_EXCLUDED_ASSET_TAGS,
       limit = DEFAULT_LIMIT,
       offset,
+      after,
       includePublic,
       signal
     } = options
@@ -299,7 +306,11 @@ function createAssetService() {
     if (normalizedExcludeTags.length > 0) {
       queryParams.set('exclude_tags', normalizedExcludeTags.join(','))
     }
-    if (offset !== undefined && offset > 0) {
+    // `after` (keyset cursor) takes precedence over `offset`; the server ignores
+    // `offset` when a cursor is supplied, so we avoid sending a redundant param.
+    if (after) {
+      queryParams.set('after', after)
+    } else if (offset !== undefined && offset > 0) {
       queryParams.set('offset', offset.toString())
     }
     if (includePublic !== undefined) {
@@ -481,11 +492,17 @@ function createAssetService() {
   async function getAssetsByTag(
     tag: string,
     includePublic: boolean = true,
-    { limit = DEFAULT_LIMIT, offset = 0, signal }: AssetPaginationOptions = {}
+    {
+      limit = DEFAULT_LIMIT,
+      offset = 0,
+      after,
+      signal
+    }: AssetPaginationOptions = {}
   ): Promise<AssetItem[]> {
     const data = await getAssetsPageByTag(tag, includePublic, {
       limit,
       offset,
+      after,
       signal
     })
 
@@ -498,17 +515,27 @@ function createAssetService() {
   async function getAssetsPageByTag(
     tag: string,
     includePublic: boolean = true,
-    { limit = DEFAULT_LIMIT, offset = 0, signal }: AssetPaginationOptions = {}
+    {
+      limit = DEFAULT_LIMIT,
+      offset = 0,
+      after,
+      signal
+    }: AssetPaginationOptions = {}
   ): Promise<AssetResponse> {
     return await handleAssetRequest(
-      { includeTags: [tag], limit, offset, includePublic, signal },
+      { includeTags: [tag], limit, offset, after, includePublic, signal },
       `assets for tag ${tag}`
     )
   }
 
   /**
    * Gets every asset for a tag by walking paginated asset API responses.
-   * Pagination follows the required server-provided `has_more` flag.
+   *
+   * Uses keyset (cursor) pagination: each page is fetched with the prior
+   * response's `next_cursor`, which is stable under concurrent inserts/deletes
+   * and avoids the duplicate/skip drift that offset paging exhibits when the
+   * underlying set changes mid-walk. Falls back to terminating on `has_more`
+   * when the server omits `next_cursor`.
    *
    * @param tag - The tag to filter by (e.g., 'models', 'input')
    * @param includePublic - Whether to include public assets (default: true)
@@ -520,18 +547,21 @@ function createAssetService() {
   async function getAllAssetsByTag(
     tag: string,
     includePublic: boolean = true,
-    { limit = DEFAULT_LIMIT, signal }: AssetPaginationOptions = {}
+    {
+      limit = DEFAULT_LIMIT,
+      signal
+    }: Pick<AssetPaginationOptions, 'limit' | 'signal'> = {}
   ): Promise<AssetItem[]> {
     const assets: AssetItem[] = []
     const pageSize = limit > 0 ? limit : DEFAULT_LIMIT
-    let offset = 0
+    let after: string | undefined
 
     while (true) {
       if (signal?.aborted) throw createAbortError()
 
       const data = await getAssetsPageByTag(tag, includePublic, {
         limit: pageSize,
-        offset,
+        after,
         signal
       })
       const batch = data.assets
@@ -541,11 +571,12 @@ function createAssetService() {
 
       assets.push(...batch)
 
-      if (!data.has_more) {
+      // A server that returns a non-advancing cursor would loop forever.
+      if (!data.has_more || !data.next_cursor || data.next_cursor === after) {
         return assets
       }
 
-      offset += batch.length
+      after = data.next_cursor
     }
   }
 

src/platform/cloud/subscription/components/CreditSlider.stories.ts

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CreditSlider from './CreditSlider.vue'
+
+const meta: Meta<typeof CreditSlider> = {
+  title: 'Platform/Subscription/CreditSlider',
+  component: CreditSlider,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    disabled: { control: 'boolean' }
+  },
+  args: {
+    disabled: false
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      // Previews at the real layout width: the Figma "Team Plan" card column is
+      // 512px wide with 32px padding (DES-197), i.e. a 448px content area — the
+      // width the slider actually renders into inside PricingTableWorkspace.
+      template: '<div class="w-[512px] px-8"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { CreditSlider },
+    setup() {
+      const value = ref(700)
+      return { args, value }
+    },
+    template: '<CreditSlider v-model="value" :disabled="args.disabled" />'
+  })
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => ({
+    components: { CreditSlider },
+    setup() {
+      const value = ref(700)
+      return { args, value }
+    },
+    template: '<CreditSlider v-model="value" :disabled="args.disabled" />'
+  })
+}
+
+// Sample `GET /api/billing/plans → team_credit_stops` payload (DES-197 yearly).
+// In production this comes from the API; here it shows the stops being driven
+// entirely through props rather than the hardcoded default constant.
+const apiTeamCreditStops = {
+  default_stop_index: 2,
+  stops: [
+    {
+      id: 'team_200',
+      credits: 42_200,
+      yearly: { price_cents: 20_000, discount_percent: 0 }
+    },
+    {
+      id: 'team_400',
+      credits: 84_400,
+      yearly: { price_cents: 38_000, discount_percent: 5 }
+    },
+    {
+      id: 'team_700',
+      credits: 147_700,
+      yearly: { price_cents: 63_000, discount_percent: 10 }
+    },
+    {
+      id: 'team_1400',
+      credits: 295_400,
+      yearly: { price_cents: 119_000, discount_percent: 15 }
+    },
+    {
+      id: 'team_2500',
+      credits: 527_500,
+      yearly: { price_cents: 200_000, discount_percent: 20 }
+    }
+  ]
+}
+
+// Reference adapter (FE-934 will own this in the data layer): API → CreditStop[].
+// The pre-discount list price is recovered as discounted / (1 - discount).
+const mappedStops = apiTeamCreditStops.stops.map((s) => ({
+  credits: s.credits,
+  discountPercentYearly: s.yearly.discount_percent,
+  usd: Math.round(
+    s.yearly.price_cents / 100 / (1 - s.yearly.discount_percent / 100)
+  )
+}))
+
+export const BackendDrivenStops: Story = {
+  name: 'Backend-driven stops (props)',
+  render: (args) => ({
+    components: { CreditSlider },
+    setup() {
+      const defaultStopIndex = apiTeamCreditStops.default_stop_index
+      const value = ref(mappedStops[defaultStopIndex].usd)
+      return { args, value, mappedStops, defaultStopIndex }
+    },
+    template:
+      '<CreditSlider v-model="value" :stops="mappedStops" :default-stop-index="defaultStopIndex" :disabled="args.disabled" />'
+  })
+}

src/platform/cloud/subscription/components/CreditSlider.test.ts

@@ -0,0 +1,189 @@
+import { render, screen, within } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { usdToCredits } from '@/base/credits/comfyCredits'
+import { TEAM_PLAN_CREDIT_STOPS } from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
+
+import CreditSlider from './CreditSlider.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      subscription: {
+        usdPerMonth: 'USD / mo',
+        billedYearly: '{total} Billed yearly',
+        creditSliderSave: 'Save {percent}% ({amount})'
+      }
+    }
+  }
+})
+
+function renderSlider(props: Record<string, unknown> = {}) {
+  return render(CreditSlider, { props, global: { plugins: [i18n] } })
+}
+
+async function flush() {
+  await nextTick()
+  await nextTick()
+}
+
+describe('CreditSlider', () => {
+  it('defaults to the $700 stop (index 2) when no value is bound', async () => {
+    renderSlider()
+    await flush()
+
+    const thumb = screen.getByRole('slider')
+    expect(thumb).toHaveAttribute('aria-valuemin', '0')
+    expect(thumb).toHaveAttribute('aria-valuemax', '4')
+    expect(thumb).toHaveAttribute('aria-valuenow', '2')
+  })
+
+  it('snaps to the next fixed stop on ArrowRight (never a value in between)', async () => {
+    const user = userEvent.setup()
+    const onUpdate = vi.fn<(usd: number) => void>()
+
+    renderSlider({ modelValue: 700, 'onUpdate:modelValue': onUpdate })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowRight}')
+
+    expect(onUpdate).toHaveBeenCalledWith(1400)
+  })
+
+  it('snaps to the previous fixed stop on ArrowLeft', async () => {
+    const user = userEvent.setup()
+    const onUpdate = vi.fn<(usd: number) => void>()
+
+    renderSlider({ modelValue: 700, 'onUpdate:modelValue': onUpdate })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowLeft}')
+
+    expect(onUpdate).toHaveBeenCalledWith(400)
+  })
+
+  it('emits change with the full {index, usd, credits} payload', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    renderSlider({ modelValue: 700, onChange })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowRight}')
+
+    expect(onChange).toHaveBeenCalledWith({
+      index: 3,
+      usd: 1400,
+      credits: 295_400
+    })
+  })
+
+  it('emits nothing when disabled (keyboard interaction suppressed)', async () => {
+    const user = userEvent.setup()
+    const onUpdate = vi.fn<(usd: number) => void>()
+    const onChange = vi.fn()
+
+    renderSlider({
+      modelValue: 700,
+      disabled: true,
+      'onUpdate:modelValue': onUpdate,
+      onChange
+    })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowRight}')
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('shows the discounted price, struck original, save badge and yearly total (DES-197)', async () => {
+    renderSlider() // default $700 stop → 10% yearly discount
+    await flush()
+
+    expect(screen.getByTestId('credit-slider-price')).toHaveTextContent('$630')
+    expect(
+      screen.getByTestId('credit-slider-original-price')
+    ).toHaveTextContent('$700')
+    expect(screen.getByTestId('credit-slider-save')).toHaveTextContent(
+      'Save 10% ($70)'
+    )
+    expect(screen.getByTestId('credit-slider-billed-yearly')).toHaveTextContent(
+      '$7,560'
+    )
+  })
+
+  it('hides the discount UI at the 0% stop ($200)', async () => {
+    renderSlider({ modelValue: 200 })
+    await flush()
+
+    expect(screen.getByTestId('credit-slider-price')).toHaveTextContent('$200')
+    expect(
+      screen.queryByTestId('credit-slider-original-price')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('credit-slider-save')).not.toBeInTheDocument()
+  })
+
+  it('renders all five fixed credit stop labels', async () => {
+    renderSlider({ modelValue: 700 })
+    await flush()
+
+    const stops = within(screen.getByTestId('credit-slider-stops'))
+    for (const label of ['42.2K', '84.4K', '147.7K', '295.4K', '527.5K']) {
+      expect(stops.getByText(label)).toBeInTheDocument()
+    }
+  })
+
+  it('renders nothing when stops is empty (defensive for BE-sourced data)', async () => {
+    renderSlider({ stops: [] })
+    await flush()
+
+    expect(screen.queryByRole('slider')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('credit-slider-price')).not.toBeInTheDocument()
+  })
+
+  it('renders stops + default index supplied via props (BE-sourced override)', async () => {
+    const stops = [
+      { usd: 50, credits: 10_550, discountPercentYearly: 0 },
+      { usd: 100, credits: 21_100, discountPercentYearly: 25 }
+    ]
+    // No modelValue → the model default ($700) matches no stop, so selectedIndex
+    // falls back to defaultStopIndex (here index 1 → $100).
+    renderSlider({ stops, defaultStopIndex: 1 })
+    await flush()
+
+    const thumb = screen.getByRole('slider')
+    expect(thumb).toHaveAttribute('aria-valuemax', '1') // 2 stops → max index 1
+    expect(thumb).toHaveAttribute('aria-valuenow', '1') // default index honored
+
+    // index 1 → $100 at 25% yearly → $75 discounted, struck $100, save $25
+    expect(screen.getByTestId('credit-slider-price')).toHaveTextContent('$75')
+    expect(
+      screen.getByTestId('credit-slider-original-price')
+    ).toHaveTextContent('$100')
+    expect(screen.getByTestId('credit-slider-save')).toHaveTextContent(
+      'Save 25% ($25)'
+    )
+
+    // Only the prop's labels render — none of the DES-197 defaults.
+    const labels = within(screen.getByTestId('credit-slider-stops'))
+    expect(labels.getByText('10.6K')).toBeInTheDocument()
+    expect(labels.getByText('21.1K')).toBeInTheDocument()
+    expect(labels.queryByText('147.7K')).not.toBeInTheDocument()
+  })
+
+  it('keeps every credit amount equal to usdToCredits(usd) (guards rate drift)', () => {
+    for (const stop of TEAM_PLAN_CREDIT_STOPS) {
+      expect(stop.credits).toBe(usdToCredits(stop.usd))
+    }
+  })
+})

src/platform/cloud/subscription/components/CreditSlider.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import {
+  TransitionPresets,
+  usePreferredReducedMotion,
+  useTransition
+} from '@vueuse/core'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+import Slider from '@/components/ui/slider/Slider.vue'
+import {
+  DEFAULT_TEAM_PLAN_STOP_INDEX,
+  TEAM_PLAN_CREDIT_STOPS
+} from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
+import type { CreditStop } from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
+
+const {
+  disabled = false,
+  class: rootClass,
+  stops = TEAM_PLAN_CREDIT_STOPS,
+  defaultStopIndex = DEFAULT_TEAM_PLAN_STOP_INDEX
+} = defineProps<{
+  disabled?: boolean
+  class?: HTMLAttributes['class']
+  /**
+   * The fixed credit stops the slider snaps to; when empty, the component
+   * renders nothing. Defaults to the hardcoded DES-197 set; pass the
+   * backend-sourced stops once the contract lands — map
+   * `GET /api/billing/plans → team_credit_stops.stops` to `CreditStop[]`
+   * (credits, the pre-discount `usd`, and `discountPercentYearly`).
+   */
+  stops?: readonly CreditStop[]
+  /**
+   * Stop selected when the bound value matches none (e.g. first render).
+   * Maps to `team_credit_stops.default_stop_index`. Defaults to DES-197 ($700).
+   */
+  defaultStopIndex?: number
+}>()
+
+const emit = defineEmits<{
+  /** Fired when the selected stop changes, with the full derived payload. */
+  change: [stop: { index: number; usd: number; credits: number }]
+}>()
+
+/**
+ * v-model carries the selected USD value (one of the `stops`). The literal
+ * default keeps `defineModel` statically analyzable; when custom `stops` are
+ * passed without a matching v-model, `selectedIndex` falls back to
+ * `defaultStopIndex`, so the displayed stop is still correct.
+ */
+const usd = defineModel<number>({
+  default: TEAM_PLAN_CREDIT_STOPS[DEFAULT_TEAM_PLAN_STOP_INDEX].usd
+})
+
+const selectedIndex = computed(() => {
+  const i = stops.findIndex((stop) => stop.usd === usd.value)
+  if (i !== -1) return i
+  // Fall back to the default stop, clamped into range: a backend-driven `stops`
+  // array can be shorter than expected (or `defaultStopIndex` out of bounds).
+  return Math.min(Math.max(defaultStopIndex, 0), Math.max(stops.length - 1, 0))
+})
+
+// Zero-stop fallback: `useTransition` reads its source eagerly at setup, so an
+// empty `stops` must not crash even though the template then renders nothing.
+const EMPTY_STOP: CreditStop = { usd: 0, credits: 0, discountPercentYearly: 0 }
+const current = computed(() => stops.at(selectedIndex.value) ?? EMPTY_STOP)
+
+// Yearly commitment (per DES-197): the discount applies to the monthly figure.
+// The card shows the discounted monthly price, the struck pre-discount price,
+// the saving, and the annual total.
+const discountedMonthly = computed(() =>
+  Math.round(
+    current.value.usd * (1 - current.value.discountPercentYearly / 100)
+  )
+)
+const saveAmount = computed(() => current.value.usd - discountedMonthly.value)
+const hasDiscount = computed(() => current.value.discountPercentYearly > 0)
+
+/**
+ * Smoothly count the price figures up/down as the slider moves between stops
+ * instead of snapping. Honors the user's reduced-motion preference. The save
+ * badge ("X% ($Y)") is intentionally left snapping — its percent is a discrete
+ * tier, so animating the bracketed amount alone would read inconsistently.
+ */
+const prefersReducedMotion = usePreferredReducedMotion()
+const priceTween = {
+  duration: 350,
+  easing: TransitionPresets.easeOutCubic,
+  disabled: computed(() => prefersReducedMotion.value === 'reduce')
+}
+// One vector tween keeps both figures in phase. Deriving the monthly from the
+// animated original instead would jump at the start of each move: the discount
+// tier snaps per stop while the base price is still mid-tween.
+const animatedPrices = useTransition(
+  () => [discountedMonthly.value, current.value.usd],
+  priceTween
+)
+
+const displayMonthly = computed(() => Math.round(animatedPrices.value[0]))
+const displayOriginal = computed(() => Math.round(animatedPrices.value[1]))
+// Derive the yearly total from the displayed monthly so it always reads as
+// exactly 12× the price shown — even mid-count — rather than drifting as a
+// second, independently-phased tween would.
+const displayBilledYearly = computed(() => displayMonthly.value * 12)
+
+/**
+ * Bridge the discrete stop index (0..n-1) to the reka-ui slider's `number[]`
+ * model. Driving the slider in index space with `step = 1` guarantees the
+ * thumb can only land on the fixed stops — never a value in between.
+ */
+const sliderModel = computed<number[]>({
+  get: () => [selectedIndex.value],
+  set: ([index]) => {
+    const stop = stops[index]
+    if (!stop) return
+    usd.value = stop.usd
+    emit('change', { index, usd: stop.usd, credits: stop.credits })
+  }
+})
+
+const lastIndex = computed(() => Math.max(stops.length - 1, 0))
+
+const formatUsd = (value: number) => `$${value.toLocaleString('en-US')}`
+const formatCreditsCompact = (value: number) =>
+  new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1
+  }).format(value)
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div
+    v-if="stops.length > 0"
+    :class="cn('flex w-full flex-col gap-3', rootClass)"
+  >
+    <!-- Price: discounted monthly + struck pre-discount + save badge -->
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+        <span class="flex shrink-0 items-baseline gap-1.5 whitespace-nowrap">
+          <span
+            class="text-[2rem] leading-none font-semibold text-base-foreground"
+            data-testid="credit-slider-price"
+          >
+            {{ formatUsd(displayMonthly) }}
+          </span>
+          <span
+            v-if="hasDiscount"
+            class="text-base text-muted-foreground line-through"
+            data-testid="credit-slider-original-price"
+          >
+            {{ formatUsd(displayOriginal) }}
+          </span>
+          <span class="text-base text-muted-foreground">
+            {{ t('subscription.usdPerMonth') }}
+          </span>
+        </span>
+        <!-- Save badge: outlined primary pill, pushed to the right (DES-197) -->
+        <span
+          v-if="hasDiscount"
+          data-testid="credit-slider-save"
+          class="ms-auto shrink-0 rounded-full border-2 border-primary-background px-2 py-1 text-sm font-bold whitespace-nowrap text-primary-background"
+        >
+          {{
+            t('subscription.creditSliderSave', {
+              percent: current.discountPercentYearly,
+              amount: formatUsd(saveAmount)
+            })
+          }}
+        </span>
+      </div>
+      <p
+        class="m-0 text-sm text-muted-foreground"
+        data-testid="credit-slider-billed-yearly"
+      >
+        {{
+          t('subscription.billedYearly', {
+            total: formatUsd(displayBilledYearly)
+          })
+        }}
+      </p>
+    </div>
+
+    <!-- Discrete slider: snaps to the 5 fixed DES-197 stops -->
+    <Slider
+      v-model="sliderModel"
+      :min="0"
+      :max="lastIndex"
+      :step="1"
+      :disabled="disabled"
+    />
+
+    <!-- Credit stop labels; the selected stop is emphasized -->
+    <ol
+      data-testid="credit-slider-stops"
+      class="m-0 flex list-none justify-between p-0"
+    >
+      <li
+        v-for="(stop, i) in stops"
+        :key="stop.usd"
+        :data-selected="i === selectedIndex ? '' : undefined"
+        :class="
+          cn(
+            'flex items-center gap-1 text-xs',
+            i === selectedIndex
+              ? 'font-semibold text-base-foreground'
+              : 'text-muted-foreground'
+          )
+        "
+      >
+        <i
+          :class="
+            cn(
+              'icon-[comfy--credits] size-3 shrink-0',
+              i === selectedIndex ? 'bg-amber-400' : 'bg-muted-foreground'
+            )
+          "
+          aria-hidden="true"
+        />
+        {{ formatCreditsCompact(stop.credits) }}
+      </li>
+    </ol>
+  </div>
+</template>

src/platform/cloud/subscription/constants/teamPlanCreditStops.ts

@@ -0,0 +1,39 @@
+export interface CreditStop {
+  /** Monthly subscription price in USD (pre-discount). */
+  usd: number
+  /** Monthly credit grant at this stop. */
+  credits: number
+  /**
+   * Yearly-commitment discount applied to `usd`, as a whole-number percent.
+   * Threshold-based per the pricing decision (Slack — Alex Tov, 2026-05-08):
+   * yearly tiers are 0 / 5 / 10 / 15 / 20% with nothing in between (monthly is
+   * halved, but still being iterated). Only the $700 → 10% tier is
+   * design-confirmed (DES-197 shows "Save 10% ($70)"); the rest follow the
+   * agreed 0/5/10/15/20 sequence and should be re-confirmed with design/BE.
+   */
+  discountPercentYearly: number
+}
+
+/**
+ * Team-plan credit-subscription slider stops.
+ *
+ * Hardcoded per Figma DES-197 (Updates to PricingTable dialog): the team-plan
+ * credit slider snaps to exactly these 5 fixed breakpoints — the user cannot
+ * select a value in between. The `credits` figures equal `usdToCredits(usd)` at
+ * the current rate (`CREDITS_PER_USD = 211`); a unit test guards against rate
+ * drift silently changing the designed values.
+ *
+ * TODO(FE-934): once the backend slider contract lands, these stops (and their
+ * discount tiers) will come from `GET /api/billing/plans` instead of being
+ * hardcoded here.
+ */
+export const TEAM_PLAN_CREDIT_STOPS: readonly CreditStop[] = [
+  { usd: 200, credits: 42_200, discountPercentYearly: 0 },
+  { usd: 400, credits: 84_400, discountPercentYearly: 5 },
+  { usd: 700, credits: 147_700, discountPercentYearly: 10 },
+  { usd: 1_400, credits: 295_400, discountPercentYearly: 15 },
+  { usd: 2_500, credits: 527_500, discountPercentYearly: 20 }
+] as const
+
+/** Default stop per DES-197: index 2 = $700 / 147,700 credits. */
+export const DEFAULT_TEAM_PLAN_STOP_INDEX = 2

src/platform/settings/constants/coreSettings.ts

@@ -1136,6 +1136,31 @@ export const CORE_SETTINGS: SettingParams[] = [
     versionAdded: '1.20.4',
     versionModified: '1.20.5'
   },
+  {
+    id: 'Comfy.Canvas.BackgroundPattern',
+    category: ['Appearance', 'Canvas', 'BackgroundPattern'],
+    name: 'Canvas background pattern',
+    type: 'combo',
+    options: [
+      { value: 'dots', text: 'Dots' },
+      { value: 'grid', text: 'Grid' },
+      { value: 'none', text: 'None' }
+    ],
+    tooltip:
+      'Pattern drawn on the canvas background. Not shown while a custom background image is set.',
+    defaultValue: 'dots',
+    versionAdded: '1.47.1'
+  },
+  {
+    id: 'Comfy.Canvas.BackgroundColor',
+    category: ['Appearance', 'Canvas', 'BackgroundColor'],
+    name: 'Canvas background color',
+    type: 'color',
+    tooltip:
+      'Custom canvas background color. Leave empty to follow the active theme.',
+    defaultValue: '',
+    versionAdded: '1.47.1'
+  },
   // Release data stored in settings
   {
     id: 'Comfy.Release.Version',

src/platform/updates/common/releaseService.test.ts

@@ -53,7 +53,8 @@ describe('useReleaseService', () => {
           project: 'comfyui',
           current_version: '1.0.0'
         },
-        signal: undefined
+        signal: undefined,
+        headers: undefined
       })
 
       expect(result).toEqual(mockReleases)
@@ -76,7 +77,8 @@ describe('useReleaseService', () => {
           current_version: '1.0.0',
           form_factor: 'desktop-windows'
         },
-        signal: undefined
+        signal: undefined,
+        headers: undefined
       })
 
       expect(result).toEqual(mockReleases)
@@ -86,11 +88,30 @@ describe('useReleaseService', () => {
       const abortController = new AbortController()
       mockAxiosInstance.get.mockResolvedValue({ data: mockReleases })
 
-      await service.getReleases({ project: 'comfyui' }, abortController.signal)
+      await service.getReleases(
+        { project: 'comfyui' },
+        { signal: abortController.signal }
+      )
 
       expect(mockAxiosInstance.get).toHaveBeenCalledWith('/releases', {
         params: { project: 'comfyui' },
-        signal: abortController.signal
+        signal: abortController.signal,
+        headers: undefined
+      })
+    })
+
+    it('should send Comfy-Env header when deployEnvironment is provided', async () => {
+      mockAxiosInstance.get.mockResolvedValue({ data: mockReleases })
+
+      await service.getReleases(
+        { project: 'comfyui' },
+        { deployEnvironment: 'local-desktop' }
+      )
+
+      expect(mockAxiosInstance.get).toHaveBeenCalledWith('/releases', {
+        params: { project: 'comfyui' },
+        signal: undefined,
+        headers: { 'Comfy-Env': 'local-desktop' }
       })
     })
 

src/platform/updates/common/releaseService.ts

@@ -98,8 +98,9 @@ export const useReleaseService = () => {
   // Fetch release notes from API
   const getReleases = async (
     params: GetReleasesParams,
-    signal?: AbortSignal
+    options: { signal?: AbortSignal; deployEnvironment?: string } = {}
   ): Promise<ReleaseNote[] | null> => {
+    const { signal, deployEnvironment } = options
     const endpoint = '/releases'
     const errorContext = 'Failed to get releases'
     const routeSpecificErrors = {
@@ -110,7 +111,10 @@ export const useReleaseService = () => {
       () =>
         releaseApiClient.get<ReleaseNote[]>(endpoint, {
           params,
-          signal
+          signal,
+          headers: deployEnvironment
+            ? { 'Comfy-Env': deployEnvironment }
+            : undefined
         }),
       errorContext,
       routeSpecificErrors

src/platform/updates/common/releaseStore.test.ts

@@ -228,12 +228,15 @@ describe('useReleaseStore', () => {
 
         await store.initialize()
 
-        expect(releaseService.getReleases).toHaveBeenCalledWith({
-          project: 'comfyui',
-          current_version: '1.0.0',
-          form_factor: 'git-windows',
-          locale: 'en'
-        })
+        expect(releaseService.getReleases).toHaveBeenCalledWith(
+          {
+            project: 'comfyui',
+            current_version: '1.0.0',
+            form_factor: 'git-windows',
+            locale: 'en'
+          },
+          { deployEnvironment: undefined }
+        )
       })
     })
 
@@ -300,12 +303,15 @@ describe('useReleaseStore', () => {
 
       await store.initialize()
 
-      expect(releaseService.getReleases).toHaveBeenCalledWith({
-        project: 'comfyui',
-        current_version: '1.0.0',
-        form_factor: 'git-windows',
-        locale: 'en'
-      })
+      expect(releaseService.getReleases).toHaveBeenCalledWith(
+        {
+          project: 'comfyui',
+          current_version: '1.0.0',
+          form_factor: 'git-windows',
+          locale: 'en'
+        },
+        { deployEnvironment: undefined }
+      )
       expect(store.releases).toEqual([mockRelease])
     })
 
@@ -318,12 +324,30 @@ describe('useReleaseStore', () => {
 
       await store.initialize()
 
-      expect(releaseService.getReleases).toHaveBeenCalledWith({
-        project: 'comfyui',
-        current_version: '1.0.0',
-        form_factor: 'desktop-mac',
-        locale: 'en'
-      })
+      expect(releaseService.getReleases).toHaveBeenCalledWith(
+        {
+          project: 'comfyui',
+          current_version: '1.0.0',
+          form_factor: 'desktop-mac',
+          locale: 'en'
+        },
+        { deployEnvironment: undefined }
+      )
+    })
+
+    it('should pass deploy_environment from system stats', async () => {
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.deploy_environment = 'local-desktop'
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
+
+      await store.initialize()
+
+      expect(releaseService.getReleases).toHaveBeenCalledWith(
+        expect.anything(),
+        { deployEnvironment: 'local-desktop' }
+      )
     })
 
     it('should skip fetching when --disable-api-nodes is present', async () => {

src/platform/updates/common/releaseStore.ts

@@ -266,12 +266,18 @@ export const useReleaseStore = defineStore('release', () => {
         await until(systemStatsStore.isInitialized)
       }
 
-      const fetchedReleases = await releaseService.getReleases({
-        project: isCloud ? 'cloud' : 'comfyui',
-        current_version: currentVersion.value,
-        form_factor: systemStatsStore.getFormFactor(),
-        locale: stringToLocale(locale.value)
-      })
+      const fetchedReleases = await releaseService.getReleases(
+        {
+          project: isCloud ? 'cloud' : 'comfyui',
+          current_version: currentVersion.value,
+          form_factor: systemStatsStore.getFormFactor(),
+          locale: stringToLocale(locale.value)
+        },
+        {
+          deployEnvironment:
+            systemStatsStore.systemStats?.system?.deploy_environment
+        }
+      )
 
       if (fetchedReleases !== null) {
         releases.value = fetchedReleases

src/platform/workspace/components/WorkspaceSwitcherPopover.test.ts

@@ -0,0 +1,94 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import WorkspaceSwitcherPopover from './WorkspaceSwitcherPopover.vue'
+
+vi.mock('@/platform/workspace/composables/useWorkspaceSwitch', () => ({
+  useWorkspaceSwitch: () => ({ switchWorkspace: vi.fn() })
+}))
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({ subscription: ref(null) })
+}))
+
+const LONG_WORKSPACE_NAME =
+  'Quantum Renaissance Collective for Hyperdimensional Latent Diffusion Research and Experimental Workflow Engineering'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      workspaceSwitcher: {
+        personal: 'Personal',
+        roleOwner: 'Owner',
+        roleMember: 'Member',
+        createWorkspace: 'Create new workspace',
+        maxWorkspacesReached:
+          'You can only own 10 workspaces. Delete one to create a new one.'
+      }
+    }
+  }
+})
+
+function createWorkspaceState(overrides: Record<string, unknown>) {
+  return {
+    created_at: '2026-01-01T00:00:00Z',
+    joined_at: '2026-01-01T00:00:00Z',
+    isSubscribed: false,
+    subscriptionPlan: null,
+    subscriptionTier: null,
+    members: [],
+    pendingInvites: [],
+    ...overrides
+  }
+}
+
+function renderComponent() {
+  return render(WorkspaceSwitcherPopover, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,
+          initialState: {
+            teamWorkspace: {
+              activeWorkspaceId: 'ws-personal',
+              isFetchingWorkspaces: false,
+              workspaces: [
+                createWorkspaceState({
+                  id: 'ws-personal',
+                  name: 'Personal Workspace',
+                  type: 'personal',
+                  role: 'owner'
+                }),
+                createWorkspaceState({
+                  id: 'ws-team-long',
+                  name: LONG_WORKSPACE_NAME,
+                  type: 'team',
+                  role: 'member'
+                })
+              ]
+            }
+          }
+        }),
+        i18n
+      ],
+      stubs: {
+        WorkspaceProfilePic: true
+      }
+    }
+  })
+}
+
+describe('WorkspaceSwitcherPopover', () => {
+  it('exposes the full team workspace name as a tooltip on the row', () => {
+    renderComponent()
+
+    const name = screen.getByText(LONG_WORKSPACE_NAME)
+
+    expect(name).toHaveAttribute('title', LONG_WORKSPACE_NAME)
+  })
+})

src/platform/workspace/components/WorkspaceSwitcherPopover.vue

@@ -34,21 +34,20 @@
                 @click="handleSelectWorkspace(workspace)"
               >
                 <WorkspaceProfilePic
-                  class="size-8 text-sm"
+                  class="size-8 shrink-0 text-sm"
                   :workspace-name="workspace.name"
                 />
                 <div class="flex min-w-0 flex-1 flex-col items-start gap-1">
-                  <div class="flex items-center gap-1.5">
-                    <span class="text-sm text-base-foreground">
-                      {{
-                        workspace.type === 'personal'
-                          ? $t('workspaceSwitcher.personal')
-                          : workspace.name
-                      }}
+                  <div class="flex max-w-full items-center gap-1.5">
+                    <span
+                      :title="getDisplayName(workspace)"
+                      class="truncate text-sm text-base-foreground"
+                    >
+                      {{ getDisplayName(workspace) }}
                     </span>
                     <span
                       v-if="resolveTierLabel(workspace)"
-                      class="rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
+                      class="shrink-0 rounded-full bg-base-foreground px-1 py-0.5 text-2xs font-bold text-base-background uppercase"
                     >
                       {{ resolveTierLabel(workspace) }}
                     </span>
@@ -59,7 +58,7 @@
                 </div>
                 <i
                   v-if="isCurrentWorkspace(workspace)"
-                  class="pi pi-check text-sm text-base-foreground"
+                  class="pi pi-check shrink-0 text-sm text-base-foreground"
                 />
               </button>
             </div>
@@ -171,6 +170,12 @@ function isCurrentWorkspace(workspace: AvailableWorkspace): boolean {
   return workspace.id === workspaceId.value
 }
 
+function getDisplayName(workspace: AvailableWorkspace): string {
+  return workspace.type === 'personal'
+    ? t('workspaceSwitcher.personal')
+    : workspace.name
+}
+
 function getRoleLabel(role: AvailableWorkspace['role']): string {
   if (role === 'owner') return t('workspaceSwitcher.roleOwner')
   if (role === 'member') return t('workspaceSwitcher.roleMember')

src/platform/workspace/stores/workspaceAuthStore.ts

@@ -33,6 +33,10 @@ const WorkspaceTokenResponseSchema = z.object({
   permissions: z.array(z.string())
 })
 
+export type WorkspaceTokenResponse = z.infer<
+  typeof WorkspaceTokenResponseSchema
+>
+
 export class WorkspaceAuthError extends Error {
   constructor(
     message: string,

src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts

@@ -51,6 +51,9 @@ const AudioPreviewPlayer = defineAsyncComponent(
 const Load3D = defineAsyncComponent(
   () => import('@/components/load3d/Load3D.vue')
 )
+const Load3DAdvanced = defineAsyncComponent(
+  () => import('@/components/load3d/Load3DAdvanced.vue')
+)
 const WidgetImageCrop = defineAsyncComponent(
   () => import('@/components/imagecrop/WidgetImageCrop.vue')
 )
@@ -169,6 +172,14 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
     }
   ],
   ['load3D', { component: Load3D, aliases: ['LOAD_3D'], essential: false }],
+  [
+    'load3DAdvanced',
+    {
+      component: Load3DAdvanced,
+      aliases: ['LOAD_3D_ADVANCED'],
+      essential: false
+    }
+  ],
   [
     'imagecrop',
     {
@@ -243,6 +254,7 @@ const EXPANDING_TYPES = [
   'textarea',
   'markdown',
   'load3D',
+  'load3DAdvanced',
   'curve',
   'painter',
   'imagecompare',

src/schemas/apiSchema.ts

@@ -252,6 +252,7 @@ const zSystemStats = z.object({
     python_version: z.string(),
     embedded_python: z.boolean(),
     comfyui_version: z.string(),
+    deploy_environment: z.string().optional(),
     pytorch_version: z.string(),
     required_frontend_version: z.string().optional(),
     argv: z.array(z.string()),
@@ -307,6 +308,8 @@ const zSettings = z.object({
   'Comfy.ColorPalette': z.string(),
   'Comfy.CustomColorPalettes': colorPalettesSchema,
   'Comfy.Canvas.BackgroundImage': z.string().optional(),
+  'Comfy.Canvas.BackgroundPattern': z.enum(['dots', 'grid', 'none']),
+  'Comfy.Canvas.BackgroundColor': z.string(),
   'Comfy.ConfirmClear': z.boolean(),
   'Comfy.DevMode': z.boolean(),
   'Comfy.Appearance.DisableAnimations': z.boolean(),

src/scripts/api.ts

@@ -108,6 +108,11 @@ interface QueuePromptRequestBody {
      * ```
      */
     api_key_comfy_org?: string
+    /**
+     * Identifies the client submitting the prompt. Forwarded by the backend
+     * to API nodes' upstream requests via the Comfy-Usage-Source header.
+     */
+    comfy_usage_source?: string
     /**
      * Override the preview method for this prompt execution.
      * 'default' uses the server's CLI setting.
@@ -867,6 +872,7 @@ export class ComfyApi extends EventTarget {
       extra_data: {
         auth_token_comfy_org: this.authToken,
         api_key_comfy_org: this.apiKey,
+        comfy_usage_source: 'comfyui-frontend',
         extra_pnginfo: { workflow },
         ...(options?.previewMethod &&
           options.previewMethod !== 'default' && {

src/services/colorPaletteService.test.ts

@@ -0,0 +1,90 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type * as canvasPatternUtil from '@/utils/canvasPatternUtil'
+
+const mockSettings = vi.hoisted(() => ({
+  values: {} as Record<string, unknown>
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: {
+      background_image: 'initial',
+      clear_background_color: 'initial',
+      _pattern: 'initial',
+      node_title_color: '',
+      default_link_color: '',
+      default_connection_color_byType: {},
+      setDirty: vi.fn()
+    }
+  }
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: (key: string) => mockSettings.values[key],
+    set: vi.fn()
+  })
+}))
+
+vi.mock('@/utils/canvasPatternUtil', async (importOriginal) => ({
+  ...(await importOriginal<typeof canvasPatternUtil>()),
+  generateCanvasPatternImage: vi.fn(
+    (pattern: string, color: string) => `tile:${pattern}:${color}`
+  )
+}))
+
+import { app } from '@/scripts/app'
+import { useColorPaletteService } from '@/services/colorPaletteService'
+
+describe('colorPaletteService canvas background', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    mockSettings.values = {
+      'Comfy.Canvas.BackgroundImage': '',
+      'Comfy.Canvas.BackgroundPattern': 'dots',
+      'Comfy.Canvas.BackgroundColor': ''
+    }
+    app.canvas.background_image = 'initial'
+    app.canvas.clear_background_color = 'initial'
+    app.canvas._pattern = 'initial' as unknown as undefined
+  })
+
+  it('renders the generated pattern over the palette color by default', async () => {
+    await useColorPaletteService().loadColorPalette('dark')
+
+    expect(app.canvas.background_image).toBe('tile:dots:#222222')
+    expect(app.canvas.clear_background_color).toBe('#222222')
+    expect(app.canvas._pattern).toBeUndefined()
+  })
+
+  it('uses the user background color when set', async () => {
+    mockSettings.values['Comfy.Canvas.BackgroundColor'] = 'aabbcc'
+    mockSettings.values['Comfy.Canvas.BackgroundPattern'] = 'grid'
+
+    await useColorPaletteService().loadColorPalette('dark')
+
+    expect(app.canvas.background_image).toBe('tile:grid:#aabbcc')
+    expect(app.canvas.clear_background_color).toBe('#aabbcc')
+  })
+
+  it('renders a solid tile when the pattern is none', async () => {
+    mockSettings.values['Comfy.Canvas.BackgroundPattern'] = 'none'
+
+    await useColorPaletteService().loadColorPalette('dark')
+
+    expect(app.canvas.background_image).toBe('tile:none:#222222')
+  })
+
+  it('lets a custom background image take precedence over patterns', async () => {
+    mockSettings.values['Comfy.Canvas.BackgroundImage'] = 'https://bg.png'
+
+    await useColorPaletteService().loadColorPalette('dark')
+
+    expect(app.canvas.background_image).toBe('')
+    expect(app.canvas.clear_background_color).toBe('transparent')
+    expect(app.canvas._pattern).toBeUndefined()
+  })
+})

src/services/colorPaletteService.ts

@@ -11,6 +11,10 @@ import type { Colors, Palette } from '@/schemas/colorPaletteSchema'
 import { app } from '@/scripts/app'
 import { uploadFile } from '@/scripts/utils'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import {
+  generateCanvasPatternImage,
+  getEffectiveCanvasBackgroundColor
+} from '@/utils/canvasPatternUtil'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 const THEME_PROPERTY_MAP = {
@@ -153,10 +157,18 @@ export const useColorPaletteService = () => {
     app.canvas.default_link_color = palette.LINK_COLOR
     const backgroundImage = settingStore.get('Comfy.Canvas.BackgroundImage')
     if (backgroundImage) {
+      app.canvas.background_image = ''
       app.canvas.clear_background_color = 'transparent'
     } else {
-      app.canvas.background_image = palette.BACKGROUND_IMAGE
-      app.canvas.clear_background_color = palette.CLEAR_BACKGROUND_COLOR
+      const backgroundColor = getEffectiveCanvasBackgroundColor(
+        settingStore.get('Comfy.Canvas.BackgroundColor'),
+        palette.CLEAR_BACKGROUND_COLOR
+      )
+      app.canvas.background_image = generateCanvasPatternImage(
+        settingStore.get('Comfy.Canvas.BackgroundPattern'),
+        backgroundColor
+      )
+      app.canvas.clear_background_color = backgroundColor
     }
     app.canvas._pattern = undefined
 

src/utils/canvasPatternUtil.test.ts

@@ -0,0 +1,140 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  generateCanvasPatternImage,
+  getEffectiveCanvasBackgroundColor,
+  getPatternMarkColor
+} from '@/utils/canvasPatternUtil'
+
+interface RecordingContext {
+  fillStyle: string
+  strokeStyle: string
+  lineWidth: number
+  groundColor: string
+  fillRect: ReturnType<typeof vi.fn>
+  beginPath: ReturnType<typeof vi.fn>
+  arc: ReturnType<typeof vi.fn>
+  fill: ReturnType<typeof vi.fn>
+  moveTo: ReturnType<typeof vi.fn>
+  lineTo: ReturnType<typeof vi.fn>
+  stroke: ReturnType<typeof vi.fn>
+}
+
+function createRecordingContext(): RecordingContext {
+  const ctx: RecordingContext = {
+    fillStyle: '',
+    strokeStyle: '',
+    lineWidth: 0,
+    groundColor: '',
+    fillRect: vi.fn(() => {
+      ctx.groundColor = ctx.fillStyle
+    }),
+    beginPath: vi.fn(),
+    arc: vi.fn(),
+    fill: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn()
+  }
+  return ctx
+}
+
+let contexts: RecordingContext[]
+let getContextSpy: ReturnType<typeof vi.spyOn>
+
+beforeEach(() => {
+  contexts = []
+  getContextSpy = vi
+    .spyOn(HTMLCanvasElement.prototype, 'getContext')
+    .mockImplementation(() => {
+      const ctx = createRecordingContext()
+      contexts.push(ctx)
+      return ctx as unknown as GPUCanvasContext
+    })
+  vi.spyOn(HTMLCanvasElement.prototype, 'toDataURL').mockReturnValue(
+    'data:image/png;base64,sentinel'
+  )
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('getPatternMarkColor', () => {
+  it('uses faint light marks on dark backgrounds', () => {
+    expect(getPatternMarkColor('#141414')).toBe('rgba(255, 255, 255, 0.10)')
+    expect(getPatternMarkColor('#0000ff')).toBe('rgba(255, 255, 255, 0.10)')
+  })
+
+  it('uses faint dark marks on light backgrounds', () => {
+    expect(getPatternMarkColor('#f0f0f0')).toBe('rgba(0, 0, 0, 0.13)')
+    expect(getPatternMarkColor('#ffffff')).toBe('rgba(0, 0, 0, 0.13)')
+  })
+})
+
+describe('getEffectiveCanvasBackgroundColor', () => {
+  it('prefers the user setting over the palette color', () => {
+    expect(getEffectiveCanvasBackgroundColor('aabbcc', '#222222')).toBe(
+      '#aabbcc'
+    )
+  })
+
+  it('falls back to the palette color when the setting is empty', () => {
+    expect(getEffectiveCanvasBackgroundColor('', '#222222')).toBe('#222222')
+  })
+
+  it('accepts a #-prefixed stored value', () => {
+    expect(getEffectiveCanvasBackgroundColor('#aabbcc', '#222222')).toBe(
+      '#aabbcc'
+    )
+  })
+
+  it('normalizes a non-hex palette color to a hex string', () => {
+    const result = getEffectiveCanvasBackgroundColor('', 'lightgray')
+    expect(result).toMatch(/^#[0-9a-f]{6}$/)
+  })
+})
+
+describe('generateCanvasPatternImage', () => {
+  it('fills the ground with the background color and draws no marks for none', () => {
+    generateCanvasPatternImage('none', '#101010')
+    const ctx = contexts.at(-1)!
+    expect(ctx.fillRect).toHaveBeenCalledExactlyOnceWith(0, 0, 100, 100)
+    expect(ctx.groundColor).toBe('#101010')
+    expect(ctx.arc).not.toHaveBeenCalled()
+    expect(ctx.stroke).not.toHaveBeenCalled()
+  })
+
+  it('draws a 5x5 grid of dots for the dots pattern', () => {
+    generateCanvasPatternImage('dots', '#111111')
+    const ctx = contexts.at(-1)!
+    expect(ctx.arc).toHaveBeenCalledTimes(25)
+    expect(ctx.fill).toHaveBeenCalledTimes(25)
+    expect(ctx.stroke).not.toHaveBeenCalled()
+  })
+
+  it('draws 5 vertical and 5 horizontal lines for the grid pattern', () => {
+    generateCanvasPatternImage('grid', '#121212')
+    const ctx = contexts.at(-1)!
+    expect(ctx.stroke).toHaveBeenCalledTimes(10)
+    expect(ctx.arc).not.toHaveBeenCalled()
+  })
+
+  it('returns a data URI', () => {
+    expect(generateCanvasPatternImage('dots', '#131313')).toBe(
+      'data:image/png;base64,sentinel'
+    )
+  })
+
+  it('strips alpha from 8-digit hex backgrounds', () => {
+    generateCanvasPatternImage('dots', '#101010ff')
+    expect(contexts.at(-1)!.groundColor).toBe('#101010')
+  })
+
+  it('memoizes tiles per pattern and color', () => {
+    generateCanvasPatternImage('grid', '#151515')
+    const callsAfterFirst = getContextSpy.mock.calls.length
+    generateCanvasPatternImage('grid', '#151515')
+    expect(getContextSpy.mock.calls.length).toBe(callsAfterFirst)
+  })
+})

src/utils/canvasPatternUtil.ts

@@ -0,0 +1,120 @@
+import { memoize } from 'es-toolkit/compat'
+
+import { isLightColor, parseToRgb, rgbToHex } from '@/utils/colorUtil'
+
+export type CanvasBackgroundPattern = 'dots' | 'grid' | 'none'
+
+const TILE_SIZE = 100
+const SPACING = 20
+const DOT_RADIUS = 1.25
+const GRID_LINE_WIDTH = 1
+
+const LIGHT_MARK_COLOR = 'rgba(255, 255, 255, 0.10)'
+const DARK_MARK_COLOR = 'rgba(0, 0, 0, 0.13)'
+
+let sharedContext: CanvasRenderingContext2D | null = null
+
+function getSharedContext(): CanvasRenderingContext2D {
+  sharedContext ??= document.createElement('canvas').getContext('2d')
+  if (!sharedContext) throw new Error('2D canvas context unavailable')
+  return sharedContext
+}
+
+/**
+ * Normalizes any CSS color (hex, rgb()/hsl(), named colors like `lightgray`)
+ * to opaque lowercase `#rrggbb`.
+ */
+function normalizeToHexColor(color: string): string {
+  const trimmed = color.trim()
+  if (trimmed.startsWith('#')) {
+    return rgbToHex(parseToRgb(trimmed)).toLowerCase()
+  }
+  const ctx = getSharedContext()
+  ctx.fillStyle = '#000000'
+  ctx.fillStyle = trimmed
+  const parsed = ctx.fillStyle
+  return parsed.startsWith('#')
+    ? parsed.toLowerCase()
+    : rgbToHex(parseToRgb(parsed)).toLowerCase()
+}
+
+/**
+ * Resolves the canvas background color: a user-set value (stored as hex
+ * without `#`) wins over the active palette's color.
+ */
+export function getEffectiveCanvasBackgroundColor(
+  settingValue: string,
+  paletteColor: string
+): string {
+  return normalizeToHexColor(
+    settingValue ? `#${settingValue.replace(/^#/, '')}` : paletteColor
+  )
+}
+
+/** Faint mark color auto-contrasted against the background. */
+export function getPatternMarkColor(backgroundColor: string): string {
+  return isLightColor(normalizeToHexColor(backgroundColor))
+    ? DARK_MARK_COLOR
+    : LIGHT_MARK_COLOR
+}
+
+function drawDots(ctx: CanvasRenderingContext2D) {
+  for (let x = SPACING / 2; x < TILE_SIZE; x += SPACING) {
+    for (let y = SPACING / 2; y < TILE_SIZE; y += SPACING) {
+      ctx.beginPath()
+      ctx.arc(x, y, DOT_RADIUS, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+}
+
+function drawGrid(ctx: CanvasRenderingContext2D) {
+  ctx.lineWidth = GRID_LINE_WIDTH
+  for (let offset = 0; offset < TILE_SIZE; offset += SPACING) {
+    ctx.beginPath()
+    ctx.moveTo(offset + 0.5, 0)
+    ctx.lineTo(offset + 0.5, TILE_SIZE)
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.moveTo(0, offset + 0.5)
+    ctx.lineTo(TILE_SIZE, offset + 0.5)
+    ctx.stroke()
+  }
+}
+
+function renderPatternImage(
+  pattern: CanvasBackgroundPattern,
+  backgroundColor: string
+): string {
+  const canvas = document.createElement('canvas')
+  canvas.width = TILE_SIZE
+  canvas.height = TILE_SIZE
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error('2D canvas context unavailable')
+
+  const ground = normalizeToHexColor(backgroundColor)
+  ctx.fillStyle = ground
+  ctx.fillRect(0, 0, TILE_SIZE, TILE_SIZE)
+
+  const markColor = getPatternMarkColor(ground)
+  ctx.fillStyle = markColor
+  ctx.strokeStyle = markColor
+  if (pattern === 'dots') drawDots(ctx)
+  if (pattern === 'grid') drawGrid(ctx)
+
+  return canvas.toDataURL('image/png')
+}
+
+/**
+ * Generates an opaque repeating background tile as a data URI. The tile is
+ * always opaque (including `none`) because LGraphCanvas paints only the tile
+ * at zoom levels >= 1.5.
+ */
+export const generateCanvasPatternImage: (
+  pattern: CanvasBackgroundPattern,
+  backgroundColor: string
+) => string = memoize(
+  renderPatternImage,
+  (pattern: CanvasBackgroundPattern, backgroundColor: string) =>
+    `${pattern}:${backgroundColor}`
+)

src/utils/colorUtil.test.ts

@@ -3,11 +3,13 @@ import { describe, expect, it, vi } from 'vitest'
 import type { ColorAdjustOptions } from '@/utils/colorUtil'
 import {
   adjustColor,
+  getRelativeLuminance,
   hexToHsva,
   hexToInt,
   hexToRgb,
   hsbToRgb,
   hsvaToHex,
+  isLightColor,
   isTransparent,
   parseToRgb,
   rgbToHex,
@@ -410,3 +412,28 @@ describe('colorUtil - adjustColor', () => {
     })
   })
 })
+
+describe('colorUtil - luminance', () => {
+  describe('getRelativeLuminance', () => {
+    it('returns 0 for black and 1 for white', () => {
+      expect(getRelativeLuminance('#000000')).toBe(0)
+      expect(getRelativeLuminance('#ffffff')).toBeCloseTo(1)
+    })
+
+    it('returns the WCAG luminance for mid gray', () => {
+      expect(getRelativeLuminance('#808080')).toBeCloseTo(0.2159, 3)
+    })
+  })
+
+  describe('isLightColor', () => {
+    it('classifies dark backgrounds as dark', () => {
+      expect(isLightColor('#141414')).toBe(false)
+      expect(isLightColor('#0000ff')).toBe(false)
+    })
+
+    it('classifies light backgrounds as light', () => {
+      expect(isLightColor('#f0f0f0')).toBe(true)
+      expect(isLightColor('#808080')).toBe(true)
+    })
+  })
+})

src/utils/colorUtil.ts

@@ -404,6 +404,26 @@ export function hsvaToHex(hsva: HSVA): string {
   return `${hex}${alphaHex}`.toLowerCase()
 }
 
+function linearizeSrgbChannel(channel: number): number {
+  const c = channel / 255
+  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+}
+
+/** WCAG relative luminance (0..1) of a parseable CSS color. */
+export function getRelativeLuminance(color: string): number {
+  const { r, g, b } = parseToRgb(color)
+  return (
+    0.2126 * linearizeSrgbChannel(r) +
+    0.7152 * linearizeSrgbChannel(g) +
+    0.0722 * linearizeSrgbChannel(b)
+  )
+}
+
+/** True when dark foreground marks should be used on this background. */
+export function isLightColor(color: string): boolean {
+  return getRelativeLuminance(color) > 0.179
+}
+
 const applyColorAdjustments = (
   color: string,
   options: ColorAdjustOptions