diff --git a/.github/workflows/update-locales.yaml b/.github/workflows/update-locales.yaml
index a612130a7..9ffa702ca 100644
--- a/.github/workflows/update-locales.yaml
+++ b/.github/workflows/update-locales.yaml
@@ -18,14 +18,14 @@ jobs:
       uses: actions/checkout@v5
 
     # Setup playwright environment
-    - name: Setup ComfyUI Server
-      uses: ./.github/actions/setup-comfyui-server
-      with:
-        launch_server: true
     - name: Setup ComfyUI Frontend
       uses: ./.github/actions/setup-frontend
       with:
         include_build_step: true
+    - name: Setup ComfyUI Server
+      uses: ./.github/actions/setup-comfyui-server
+      with:
+        launch_server: true
     - name: Setup Playwright
       uses: ./.github/actions/setup-playwright
 
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index 19796f4c4..d46b31a98 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -1,6 +1,5 @@
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-import { test as base } from '@playwright/test'
+import { test as base, expect } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
@@ -130,7 +129,8 @@ export class ComfyPage {
 
   // Buttons
   public readonly resetViewButton: Locator
-  public readonly queueButton: Locator
+  public readonly queueButton: Locator // Run button in Legacy UI
+  public readonly runButton: Locator // Run button (renamed "Queue" -> "Run")
 
   // Inputs
   public readonly workflowUploadInput: Locator
@@ -165,6 +165,9 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
+    this.runButton = page
+      .getByTestId('queue-button')
+      .getByRole('button', { name: 'Run' })
     this.workflowUploadInput = page.locator('#comfy-file-input')
     this.visibleToasts = page.locator('.p-toast-message:visible')
 
@@ -1086,12 +1089,6 @@ export class ComfyPage {
 
     const targetPosition = await targetSlot.getPosition()
 
-    // Debug: Log the positions we're trying to use
-    console.log('Drag positions:', {
-      source: sourcePosition,
-      target: targetPosition
-    })
-
     await this.dragAndDrop(sourcePosition, targetPosition)
     await this.nextFrame()
   }
diff --git a/browser_tests/fixtures/VueNodeHelpers.ts b/browser_tests/fixtures/VueNodeHelpers.ts
index 64c03b156..86d715bfd 100644
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -3,6 +3,8 @@
  */
 import type { Locator, Page } from '@playwright/test'
 
+import { VueNodeFixture } from './utils/vueNodeFixtures'
+
 export class VueNodeHelpers {
   constructor(private page: Page) {}
 
@@ -106,6 +108,24 @@ export class VueNodeHelpers {
     await this.page.keyboard.press('Backspace')
   }
 
+  /**
+   * Return a DOM-focused VueNodeFixture for the first node matching the title.
+   * Resolves the node id up front so subsequent interactions survive title changes.
+   */
+  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
+    const node = this.getNodeByTitle(title).first()
+    await node.waitFor({ state: 'visible' })
+
+    const nodeId = await node.evaluate((el) => el.getAttribute('data-node-id'))
+    if (!nodeId) {
+      throw new Error(
+        `Vue node titled "${title}" is missing its data-node-id attribute`
+      )
+    }
+
+    return new VueNodeFixture(this.getNodeLocator(nodeId))
+  }
+
   /**
    * Wait for Vue nodes to be rendered
    */
diff --git a/browser_tests/fixtures/utils/vueNodeFixtures.ts b/browser_tests/fixtures/utils/vueNodeFixtures.ts
index 5c4541b92..fca464405 100644
--- a/browser_tests/fixtures/utils/vueNodeFixtures.ts
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -1,131 +1,66 @@
-import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
 
-import type { NodeReference } from './litegraphUtils'
-
-/**
- * VueNodeFixture provides Vue-specific testing utilities for interacting with
- * Vue node components. It bridges the gap between litegraph node references
- * and Vue UI components.
- */
+/** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
-  constructor(
-    private readonly nodeRef: NodeReference,
-    private readonly page: Page
-  ) {}
+  constructor(private readonly locator: Locator) {}
 
-  /**
-   * Get the node's header element using data-testid
-   */
-  async getHeader(): Promise<Locator> {
-    const nodeId = this.nodeRef.id
-    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  get header(): Locator {
+    return this.locator.locator('[data-testid^="node-header-"]')
   }
 
-  /**
-   * Get the node's title element
-   */
-  async getTitleElement(): Promise<Locator> {
-    const header = await this.getHeader()
-    return header.locator('[data-testid="node-title"]')
+  get title(): Locator {
+    return this.locator.locator('[data-testid="node-title"]')
+  }
+
+  get titleInput(): Locator {
+    return this.locator.locator('[data-testid="node-title-input"]')
+  }
+
+  get body(): Locator {
+    return this.locator.locator('[data-testid^="node-body-"]')
+  }
+
+  get collapseButton(): Locator {
+    return this.locator.locator('[data-testid="node-collapse-button"]')
+  }
+
+  get collapseIcon(): Locator {
+    return this.collapseButton.locator('i')
+  }
+
+  get root(): Locator {
+    return this.locator
   }
 
-  /**
-   * Get the current title text
-   */
   async getTitle(): Promise<string> {
-    const titleElement = await this.getTitleElement()
-    return (await titleElement.textContent()) || ''
+    return (await this.title.textContent()) ?? ''
   }
 
-  /**
-   * Set a new title by double-clicking and entering text
-   */
-  async setTitle(newTitle: string): Promise<void> {
-    const titleElement = await this.getTitleElement()
-    await titleElement.dblclick()
-
-    const input = (await this.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
-    await input.fill(newTitle)
+  async setTitle(value: string): Promise<void> {
+    await this.header.dblclick()
+    const input = this.titleInput
+    await expect(input).toBeVisible()
+    await input.fill(value)
     await input.press('Enter')
   }
 
-  /**
-   * Cancel title editing
-   */
   async cancelTitleEdit(): Promise<void> {
-    const titleElement = await this.getTitleElement()
-    await titleElement.dblclick()
-
-    const input = (await this.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
+    await this.header.dblclick()
+    const input = this.titleInput
+    await expect(input).toBeVisible()
     await input.press('Escape')
   }
 
-  /**
-   * Check if the title is currently being edited
-   */
-  async isEditingTitle(): Promise<boolean> {
-    const header = await this.getHeader()
-    const input = header.locator('[data-testid="node-title-input"]')
-    return await input.isVisible()
-  }
-
-  /**
-   * Get the collapse/expand button
-   */
-  async getCollapseButton(): Promise<Locator> {
-    const header = await this.getHeader()
-    return header.locator('[data-testid="node-collapse-button"]')
-  }
-
-  /**
-   * Toggle the node's collapsed state
-   */
   async toggleCollapse(): Promise<void> {
-    const button = await this.getCollapseButton()
-    await button.click()
+    await this.collapseButton.click()
   }
 
-  /**
-   * Get the collapse icon element
-   */
-  async getCollapseIcon(): Promise<Locator> {
-    const button = await this.getCollapseButton()
-    return button.locator('i')
-  }
-
-  /**
-   * Get the collapse icon's CSS classes
-   */
   async getCollapseIconClass(): Promise<string> {
-    const icon = await this.getCollapseIcon()
-    return (await icon.getAttribute('class')) || ''
+    return (await this.collapseIcon.getAttribute('class')) ?? ''
   }
 
-  /**
-   * Check if the collapse button is visible
-   */
-  async isCollapseButtonVisible(): Promise<boolean> {
-    const button = await this.getCollapseButton()
-    return await button.isVisible()
-  }
-
-  /**
-   * Get the node's body/content element
-   */
-  async getBody(): Promise<Locator> {
-    const nodeId = this.nodeRef.id
-    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
-  }
-
-  /**
-   * Check if the node body is visible (not collapsed)
-   */
-  async isBodyVisible(): Promise<boolean> {
-    const body = await this.getBody()
-    return await body.isVisible()
+  boundingBox(): ReturnType<Locator['boundingBox']> {
+    return this.locator.boundingBox()
   }
 }
diff --git a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
index 02c2e31a2..cb8e7c17f 100644
Binary files a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png and b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts b/browser_tests/tests/graphCanvasMenu.spec.ts
index daa165fa4..fc8385e49 100644
--- a/browser_tests/tests/graphCanvasMenu.spec.ts
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts
@@ -39,15 +39,15 @@ test.describe('Graph Canvas Menu', () => {
     )
   })
 
-  test('Focus mode button is clickable and has correct test id', async ({
+  test('Toggle minimap button is clickable and has correct test id', async ({
     comfyPage
   }) => {
-    const focusButton = comfyPage.page.getByTestId('focus-mode-button')
-    await expect(focusButton).toBeVisible()
-    await expect(focusButton).toBeEnabled()
+    const minimapButton = comfyPage.page.getByTestId('toggle-minimap-button')
+    await expect(minimapButton).toBeVisible()
+    await expect(minimapButton).toBeEnabled()
 
     // Test that the button can be clicked without error
-    await focusButton.click()
+    await minimapButton.click()
     await comfyPage.nextFrame()
   })
 
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
index 2736a50c5..382a7d03f 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
index fd72c2d0a..8a87725f3 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts b/browser_tests/tests/interaction.spec.ts
index 2fc753490..d1afc696f 100644
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -3,10 +3,10 @@ import { expect } from '@playwright/test'
 import type { Position } from '@vueuse/core'
 
 import {
-  type ComfyPage,
   comfyPageFixture as test,
   testComfySnapToGridGridSize
 } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
@@ -786,16 +786,8 @@ test.describe('Viewport settings', () => {
     // Screenshot the canvas element
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
 
-    // Open zoom controls dropdown first
-    const zoomControlsButton = comfyPage.page.getByTestId(
-      'zoom-controls-button'
-    )
-    await zoomControlsButton.click()
-
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
     await toggleButton.click()
-    // close zoom menu
-    await zoomControlsButton.click()
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
 
     await comfyPage.menu.topbar.saveWorkflow('Workflow A')
diff --git a/browser_tests/tests/minimap.spec.ts b/browser_tests/tests/minimap.spec.ts
index d1ab05fc5..cea5fe9a8 100644
--- a/browser_tests/tests/minimap.spec.ts
+++ b/browser_tests/tests/minimap.spec.ts
@@ -35,12 +35,6 @@ test.describe('Minimap', () => {
   })
 
   test('Validate minimap toggle button state', async ({ comfyPage }) => {
-    // Open zoom controls dropdown first
-    const zoomControlsButton = comfyPage.page.getByTestId(
-      'zoom-controls-button'
-    )
-    await zoomControlsButton.click()
-
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
 
     await expect(toggleButton).toBeVisible()
@@ -51,13 +45,6 @@ test.describe('Minimap', () => {
 
   test('Validate minimap can be toggled off and on', async ({ comfyPage }) => {
     const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
-
-    // Open zoom controls dropdown first
-    const zoomControlsButton = comfyPage.page.getByTestId(
-      'zoom-controls-button'
-    )
-    await zoomControlsButton.click()
-
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
 
     await expect(minimapContainer).toBeVisible()
@@ -67,22 +54,10 @@ test.describe('Minimap', () => {
 
     await expect(minimapContainer).not.toBeVisible()
 
-    // Open zoom controls dropdown again
-    await zoomControlsButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(toggleButton).toContainText('Show Minimap')
-
     await toggleButton.click()
     await comfyPage.nextFrame()
 
     await expect(minimapContainer).toBeVisible()
-
-    // Open zoom controls dropdown again to verify button text
-    await zoomControlsButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(toggleButton).toContainText('Hide Minimap')
   })
 
   test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
index d66ea8927..2dca958d5 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png
index 96f6507e1..bcc9e7e30 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png
index af92221f3..ce3118790 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
index f9b9b012c..3e804b0ab 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png
index 2548e66ae..74c9f0b4b 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
index 9377c7e7a..b5583be8f 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
index ec0efa7b5..2091d962f 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
index e1b527186..f1b14b491 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
index 15065b8f2..e4edbc459 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
index 8989dc632..2da4b1122 100644
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
@@ -60,7 +60,6 @@ async function getInputLinkDetails(
   )
 }
 
-// Test helpers to reduce repetition across cases
 function slotLocator(
   page: Page,
   nodeId: NodeId,
@@ -789,6 +788,45 @@ test.describe('Vue Node Link Interaction', () => {
     })
   })
 
+  test('should batch disconnect all links with ctrl+alt+click on slot', async ({
+    comfyPage
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 1 },
+      () => comfyPage.nextFrame()
+    )
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 2 },
+      () => comfyPage.nextFrame()
+    )
+
+    const clipOutput = await clipNode.getOutput(0)
+    expect(await clipOutput.getLinkCount()).toBe(2)
+
+    const clipOutputSlot = slotLocator(comfyPage.page, clipNode.id, 0, false)
+
+    await clipOutputSlot.dispatchEvent('pointerdown', {
+      button: 0,
+      buttons: 1,
+      ctrlKey: true,
+      altKey: true,
+      shiftKey: false,
+      bubbles: true,
+      cancelable: true
+    })
+    await comfyPage.nextFrame()
+
+    expect(await clipOutput.getLinkCount()).toBe(0)
+  })
+
   test.describe('Release actions (Shift-drop)', () => {
     test('Context menu opens and endpoint is pinned on Shift-drop', async ({
       comfyPage,
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
index 9a240d6f5..49d875ac2 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
index 55467f622..b3dd3c9e3 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
index 2e7b63cb7..f923dd0f4 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
index 0d679ac5e..c55cf2f89 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
index 23ada3e2d..051c2e3ee 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
index fa12ec0f4..62d043713 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
index d810cdb9c..625caa9af 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
index 27b4fe6f8..465a9e7c0 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
index e0a53ef0c..60ab7ea0d 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
index d4ff35400..dd727958e 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts b/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts
index 3984989e1..5cd6b2fea 100644
--- a/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/rename.spec.ts
@@ -2,70 +2,46 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
-import { VueNodeFixture } from '../../../../fixtures/utils/vueNodeFixtures'
 
 test.describe('Vue Nodes Renaming', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.setup()
+    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should display node title', async ({ comfyPage }) => {
-    // Get the KSampler node from the default workflow
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(nodes.length).toBeGreaterThanOrEqual(1)
-
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    const title = await vueNode.getTitle()
-    expect(title).toBe('KSampler')
-
-    // Verify title is visible in the header
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('KSampler')
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.header).toContainText('KSampler')
   })
 
   test('should allow title renaming by double clicking on the node header', async ({
     comfyPage
   }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
     // Test renaming with Enter
     await vueNode.setTitle('My Custom Sampler')
-    const newTitle = await vueNode.getTitle()
-    expect(newTitle).toBe('My Custom Sampler')
-
-    // Verify the title is displayed
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('My Custom Sampler')
+    await expect(await vueNode.getTitle()).toBe('My Custom Sampler')
+    await expect(vueNode.header).toContainText('My Custom Sampler')
 
     // Test cancel with Escape
-    const titleElement = await vueNode.getTitleElement()
-    await titleElement.dblclick()
+    await vueNode.title.dblclick()
     await comfyPage.nextFrame()
-
-    // Type a different value but cancel
-    const input = (await vueNode.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
-    await input.fill('This Should Be Cancelled')
-    await input.press('Escape')
+    await vueNode.titleInput.fill('This Should Be Cancelled')
+    await vueNode.titleInput.press('Escape')
     await comfyPage.nextFrame()
 
     // Title should remain as the previously saved value
-    const titleAfterCancel = await vueNode.getTitle()
-    expect(titleAfterCancel).toBe('My Custom Sampler')
+    await expect(await vueNode.getTitle()).toBe('My Custom Sampler')
   })
 
   test('Double click node body does not trigger edit', async ({
     comfyPage
   }) => {
-    const loadCheckpointNode =
-      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const loadCheckpointNode = comfyPage.vueNodes
+      .getNodeByTitle('Load Checkpoint')
+      .first()
     const nodeBbox = await loadCheckpointNode.boundingBox()
     if (!nodeBbox) throw new Error('Node not found')
     await loadCheckpointNode.dblclick()
diff --git a/browser_tests/tests/vueNodes/interactions/node/select.spec.ts b/browser_tests/tests/vueNodes/interactions/node/select.spec.ts
index 4402236d2..98b0a63f6 100644
--- a/browser_tests/tests/vueNodes/interactions/node/select.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/select.spec.ts
@@ -50,15 +50,23 @@ test.describe('Vue Node Selection', () => {
     })
   }
 
+  test('should select all nodes with ctrl+a', async ({ comfyPage }) => {
+    const initialCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialCount).toBeGreaterThan(0)
+
+    await comfyPage.canvas.press('Control+a')
+
+    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
+    expect(selectedCount).toBe(initialCount)
+  })
+
   test('should select pinned node without dragging', async ({ comfyPage }) => {
     const PIN_HOTKEY = 'p'
     const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
 
-    // Select a node by clicking its title
     const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
     await checkpointNodeHeader.click()
 
-    // Pin it using the hotkey (as a user would)
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
index 74ec17cc9..2d67ca99f 100644
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
@@ -20,6 +20,9 @@ test.describe('Vue Node Bypass', () => {
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-bypassed-state.png'
+    )
 
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
     await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
new file mode 100644
index 000000000..b0d14bfa8
Binary files /dev/null and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts b/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts
index fb5fc3c17..8e8e22995 100644
--- a/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/collapse.spec.ts
@@ -2,7 +2,6 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
-import { VueNodeFixture } from '../../../fixtures/utils/vueNodeFixtures'
 
 test.describe('Vue Node Collapse', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -10,43 +9,50 @@ test.describe('Vue Node Collapse', () => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.setup()
+    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should allow collapsing node with collapse icon', async ({
     comfyPage
   }) => {
-    // Get the KSampler node from the default workflow
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.root).toBeVisible()
 
     // Initially should not be collapsed
-    expect(await node.isCollapsed()).toBe(false)
-    const body = await vueNode.getBody()
+    const body = vueNode.body
     await expect(body).toBeVisible()
+    const expandedBoundingBox = await vueNode.boundingBox()
+    if (!expandedBoundingBox)
+      throw new Error('Failed to get node bounding box before collapse')
 
     // Collapse the node
     await vueNode.toggleCollapse()
-    expect(await node.isCollapsed()).toBe(true)
+    await comfyPage.nextFrame()
 
     // Verify node content is hidden
-    const collapsedSize = await node.getSize()
     await expect(body).not.toBeVisible()
+    const collapsedBoundingBox = await vueNode.boundingBox()
+    if (!collapsedBoundingBox)
+      throw new Error('Failed to get node bounding box after collapse')
+    expect(collapsedBoundingBox.height).toBeLessThan(expandedBoundingBox.height)
 
     // Expand again
     await vueNode.toggleCollapse()
-    expect(await node.isCollapsed()).toBe(false)
+    await comfyPage.nextFrame()
     await expect(body).toBeVisible()
 
     // Size should be restored
-    const expandedSize = await node.getSize()
-    expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
+    const expandedBoundingBoxAfter = await vueNode.boundingBox()
+    if (!expandedBoundingBoxAfter)
+      throw new Error('Failed to get node bounding box after expand')
+    expect(expandedBoundingBoxAfter.height).toBeGreaterThanOrEqual(
+      collapsedBoundingBox.height
+    )
   })
 
   test('should show collapse/expand icon state', async ({ comfyPage }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.root).toBeVisible()
 
     // Check initial expanded state icon
     let iconClass = await vueNode.getCollapseIconClass()
@@ -66,9 +72,8 @@ test.describe('Vue Node Collapse', () => {
   test('should preserve title when collapsing/expanding', async ({
     comfyPage
   }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
+    const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await expect(vueNode.root).toBeVisible()
 
     // Set custom title
     await vueNode.setTitle('Test Sampler')
@@ -83,7 +88,6 @@ test.describe('Vue Node Collapse', () => {
     expect(await vueNode.getTitle()).toBe('Test Sampler')
 
     // Verify title is still displayed
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('Test Sampler')
+    await expect(vueNode.header).toContainText('Test Sampler')
   })
 })
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
index a82bc9297..d75aaa7ad 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
index 9680ae0f2..ca65a1de1 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
index e1b517c95..0485a92d4 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
index f4f8e10fe..b8c718239 100644
--- a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
@@ -3,7 +3,7 @@ import {
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
 
-const ERROR_CLASS = /border-error/
+const ERROR_CLASS = /border-node-stroke-error/
 
 test.describe('Vue Node Error', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -17,16 +17,21 @@ test.describe('Vue Node Error', () => {
     await comfyPage.setup()
     await comfyPage.loadWorkflow('missing/missing_nodes')
 
-    // Close missing nodes warning dialog
-    await comfyPage.page.getByRole('button', { name: 'Close' }).click()
-    await comfyPage.page.waitForSelector('.comfy-missing-nodes', {
-      state: 'hidden'
-    })
-
     // Expect error state on missing unknown node
     const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
       hasText: 'UNKNOWN NODE'
     })
     await expect(unknownNode).toHaveClass(ERROR_CLASS)
   })
+
+  test('should display error state when node causes execution error', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('nodes/execution_error')
+    await comfyPage.runButton.click()
+
+    const raiseErrorNode = comfyPage.vueNodes.getNodeByTitle('Raise Error')
+    await expect(raiseErrorNode).toHaveClass(ERROR_CLASS)
+  })
 })
diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png
index 347f432b6..795cc4c8d 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png
index 6ca10feb4..e2552e33b 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
index 37dcfd37b..3fe656ebc 100644
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
@@ -4,7 +4,7 @@ import {
 } from '../../../fixtures/ComfyPage'
 
 const MUTE_HOTKEY = 'Control+m'
-const MUTE_CLASS = /opacity-50/
+const MUTE_OPACITY = '0.5'
 
 test.describe('Vue Node Mute', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +19,11 @@ test.describe('Vue Node Mute', () => {
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-muted-state.png')
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
   })
 
   test('should allow toggling mute on multiple selected nodes with hotkey', async ({
@@ -35,11 +36,11 @@ test.describe('Vue Node Mute', () => {
     const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
-    await expect(ksamplerNode).toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(ksamplerNode).toHaveCSS('opacity', MUTE_OPACITY)
 
     await comfyPage.page.keyboard.press(MUTE_HOTKEY)
-    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
-    await expect(ksamplerNode).not.toHaveClass(MUTE_CLASS)
+    await expect(checkpointNode).not.toHaveCSS('opacity', MUTE_OPACITY)
+    await expect(ksamplerNode).not.toHaveCSS('opacity', MUTE_OPACITY)
   })
 })
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
new file mode 100644
index 000000000..4018175b1
Binary files /dev/null and b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
index 2bf70f0d2..1c4bacd6d 100644
Binary files a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png and b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts b/browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts
new file mode 100644
index 000000000..6f3701c12
--- /dev/null
+++ b/browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts
@@ -0,0 +1,51 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.describe('Vue Widget Reactivity', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+  test('Should display added widgets', async ({ comfyPage }) => {
+    const loadCheckpointNode = comfyPage.page.locator(
+      'css=[data-testid="node-body-4"] > .lg-node-widgets > div'
+    )
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['4']
+      node.widgets.push(node.widgets[0])
+    })
+    await expect(loadCheckpointNode).toHaveCount(2)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['4']
+      node.widgets[2] = node.widgets[0]
+    })
+    await expect(loadCheckpointNode).toHaveCount(3)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['4']
+      node.widgets.splice(0, 0, node.widgets[0])
+    })
+    await expect(loadCheckpointNode).toHaveCount(4)
+  })
+  test('Should hide removed widgets', async ({ comfyPage }) => {
+    const loadCheckpointNode = comfyPage.page.locator(
+      'css=[data-testid="node-body-3"] > .lg-node-widgets > div'
+    )
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['3']
+      node.widgets.pop()
+    })
+    await expect(loadCheckpointNode).toHaveCount(5)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['3']
+      node.widgets.length--
+    })
+    await expect(loadCheckpointNode).toHaveCount(4)
+    await comfyPage.page.evaluate(() => {
+      const node = window['graph']._nodes_by_id['3']
+      node.widgets.splice(0, 1)
+    })
+    await expect(loadCheckpointNode).toHaveCount(3)
+  })
+})
diff --git a/package.json b/package.json
index fc6194ba8..b28d7b9de 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.29.1",
+  "version": "1.29.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -11,6 +11,7 @@
     "build:desktop": "nx build @comfyorg/desktop-ui",
     "build-storybook": "storybook build",
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
+    "build:analyze": "cross-env ANALYZE_BUNDLE=true pnpm build",
     "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build",
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
@@ -90,6 +91,7 @@
     "nx": "catalog:",
     "postcss-html": "catalog:",
     "prettier": "catalog:",
+    "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
     "stylelint": "catalog:",
     "tailwindcss": "catalog:",
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index df630d226..769f52d55 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -24,11 +24,14 @@
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
+  /* Spacing */
+  --spacing-xs: 8px;
+
   /* Font Families */
   --font-inter: 'Inter', sans-serif;
 
   /* Palette Colors */
-  --color-charcoal-100: #55565e;
+  --color-charcoal-100: #171718;
   --color-charcoal-200: #494a50;
   --color-charcoal-300: #3c3d42;
   --color-charcoal-400: #313235;
@@ -85,10 +88,29 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+  --text-xxxs: 0.5625rem;
+  --text-xxxs--line-height: calc(1 / 0.5625);
+
   --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
   --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
+  --color-alpha-charcoal-600-30: color-mix(
+    in srgb,
+    var(--color-charcoal-600) 30%,
+    transparent
+  );
+  --color-alpha-stone-100-20: color-mix(
+    in srgb,
+    var(--color-stone-100) 20%,
+    transparent
+  );
+  --color-alpha-gray-500-50: color-mix(
+    in srgb,
+    var(--color-gray-500) 50%,
+    transparent
+  );
 
   /* PrimeVue pulled colors */
   --color-muted: var(--p-text-muted-color);
@@ -129,9 +151,20 @@
 
   /* --- */
 
+  --accent-primary: var(--color-charcoal-700);
   --backdrop: var(--color-white);
+  --button-hover-surface: var(--color-gray-200);
+  --button-active-surface: var(--color-gray-400);
   --dialog-surface: var(--color-neutral-200);
+  --interface-menu-component-surface-hovered: var(--color-gray-200);
+  --interface-menu-component-surface-selected: var(--color-gray-400);
+  --interface-menu-keybind-surface-default: var(--color-gray-500);
+  --interface-panel-surface: var(--color-pure-white);
+  --interface-stroke: var(--color-gray-300);
+  --nav-background: var(--color-pure-white);
+  --node-border: var(--color-gray-300);
   --node-component-border: var(--color-gray-400);
+  --node-component-disabled: var(--color-alpha-stone-100-20);
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
   --node-component-header-icon: var(--color-stone-200);
@@ -143,7 +176,7 @@
   --node-component-slot-dot-outline: var(--color-black);
   --node-component-slot-text: var(--color-stone-200);
   --node-component-surface-highlight: var(--color-stone-100);
-  --node-component-surface-hovered: var(--color-charcoal-400);
+  --node-component-surface-hovered: var(--color-gray-200);
   --node-component-surface-selected: var(--color-charcoal-200);
   --node-component-surface: var(--color-white);
   --node-component-tooltip: var(--color-charcoal-700);
@@ -154,13 +187,34 @@
     from var(--color-zinc-500) r g b / 10%
   );
   --node-component-widget-skeleton-surface: var(--color-zinc-300);
-  --node-stroke: var(--color-stone-100);
+  --node-divider: var(--color-sand-100);
+  --node-icon-disabled: var(--color-alpha-gray-500-50);
+  --node-stroke: var(--color-gray-400);
+  --node-stroke-selected: var(--color-accent-primary);
+  --node-stroke-error: var(--color-error);
+  --node-stroke-executing: var(--color-blue-100);
+  --text-secondary: var(--color-stone-100);
+  --text-primary: var(--color-charcoal-700);
+  --input-surface: rgba(0, 0, 0, 0.15);
 }
 
 .dark-theme {
+  --accent-primary: var(--color-pure-white);
   --backdrop: var(--color-neutral-900);
+  --button-hover-surface: var(--color-charcoal-600);
+  --button-active-surface: var(--color-charcoal-600);
   --dialog-surface: var(--color-neutral-700);
+  --interface-menu-component-surface-hovered: var(--color-charcoal-400);
+  --interface-menu-component-surface-selected: var(--color-charcoal-300);
+  --interface-menu-keybind-surface-default: var(--color-charcoal-200);
+  --interface-panel-surface: var(--color-charcoal-100);
+  --interface-stroke: var(--color-charcoal-400);
+  --nav-background: var(--color-charcoal-100);
+  --node-border: var(--color-charcoal-500);
   --node-component-border: var(--color-stone-200);
+  --node-component-border-error: var(--color-danger-100);
+  --node-component-border-executing: var(--color-blue-500);
+  --node-component-border-selected: var(--color-charcoal-200);
   --node-component-header-icon: var(--color-slate-300);
   --node-component-header-surface: var(--color-charcoal-800);
   --node-component-outline: var(--color-white);
@@ -169,19 +223,37 @@
   --node-component-slot-dot-outline: var(--color-white);
   --node-component-slot-text: var(--color-slate-200);
   --node-component-surface-highlight: var(--color-slate-100);
-  --node-component-surface-hovered: var(--color-charcoal-400);
+  --node-component-surface-hovered: var(--color-charcoal-600);
   --node-component-surface-selected: var(--color-charcoal-200);
   --node-component-surface: var(--color-charcoal-800);
   --node-component-tooltip: var(--color-white);
   --node-component-tooltip-border: var(--color-slate-300);
   --node-component-tooltip-surface: var(--color-charcoal-800);
   --node-component-widget-skeleton-surface: var(--color-zinc-800);
-  --node-stroke: var(--color-slate-100);
+  --node-component-disabled: var(--color-alpha-charcoal-600-30);
+  --node-divider: var(--color-charcoal-500);
+  --node-icon-disabled: var(--color-alpha-stone-100-20);
+  --node-stroke: var(--color-stone-200);
+  --node-stroke-selected: var(--color-pure-white);
+  --node-stroke-error: var(--color-error);
+  --node-stroke-executing: var(--color-blue-100);
+  --text-secondary: var(--color-slate-100);
+  --text-primary: var(--color-pure-white);
+  --input-surface: rgba(130, 130, 130, 0.1);
 }
 
 @theme inline {
   --color-backdrop: var(--backdrop);
+  --color-button-hover-surface: var(--button-hover-surface);
+  --color-button-active-surface: var(--button-active-surface);
   --color-dialog-surface: var(--dialog-surface);
+  --color-interface-menu-component-surface-hovered: var(--interface-menu-component-surface-hovered);
+  --color-interface-menu-component-surface-selected: var(--interface-menu-component-surface-selected);
+  --color-interface-menu-keybind-surface-default: var(--interface-menu-keybind-surface-default);
+  --color-interface-panel-surface: var(--interface-panel-surface);
+  --color-interface-stroke: var(--interface-stroke);
+  --color-nav-background: var(--nav-background);
+  --color-node-border: var(--node-border);
   --color-node-component-border: var(--node-component-border);
   --color-node-component-executing: var(--node-component-executing);
   --color-node-component-header: var(--node-component-header);
@@ -213,7 +285,16 @@
   --color-node-component-widget-skeleton-surface: var(
     --node-component-widget-skeleton-surface
   );
+  --color-node-component-disabled: var(--node-component-disabled);
+  --color-node-divider: var(--node-divider);
+  --color-node-icon-disabled: var(--node-icon-disabled);
   --color-node-stroke: var(--node-stroke);
+  --color-node-stroke-selected: var(--node-stroke-selected);
+  --color-node-stroke-error: var(--node-stroke-error);
+  --color-node-stroke-executing: var(--node-stroke-executing);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-primary: var(--text-primary);
+  --color-input-surface: var(--input-surface);
 }
 
 @custom-variant dark-theme {
diff --git a/packages/design-system/src/icons/play.svg b/packages/design-system/src/icons/play.svg
new file mode 100644
index 000000000..19c709083
--- /dev/null
+++ b/packages/design-system/src/icons/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="m4 2 9.333 6L4 14V2Z"/></svg>
\ No newline at end of file
diff --git a/packages/shared-frontend-utils/src/formatUtil.ts b/packages/shared-frontend-utils/src/formatUtil.ts
index a5d525c82..658498f1f 100644
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -82,7 +82,7 @@ export function formatSize(value?: number) {
  * - filename: 'file'
  * - suffix: 'txt'
  */
-function getFilenameDetails(fullFilename: string) {
+export function getFilenameDetails(fullFilename: string) {
   if (fullFilename.includes('.')) {
     return {
       filename: fullFilename.split('.').slice(0, -1).join('.'),
@@ -451,3 +451,26 @@ export function stringToLocale(locale: string): SupportedLocale {
     ? (locale as SupportedLocale)
     : 'en'
 }
+
+export function formatDuration(milliseconds: number): string {
+  if (!milliseconds || milliseconds < 0) return '0s'
+
+  const totalSeconds = Math.floor(milliseconds / 1000)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const remainingSeconds = Math.floor(totalSeconds % 60)
+
+  const parts: string[] = []
+
+  if (hours > 0) {
+    parts.push(`${hours}h`)
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`)
+  }
+  if (remainingSeconds > 0 || parts.length === 0) {
+    parts.push(`${remainingSeconds}s`)
+  }
+
+  return parts.join(' ')
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b362bc15..de05d7d7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -201,6 +201,9 @@ catalogs:
     primevue:
       specifier: ^4.2.5
       version: 4.2.5
+    rollup-plugin-visualizer:
+      specifier: ^6.0.4
+      version: 6.0.4
     storybook:
       specifier: ^9.1.6
       version: 9.1.6
@@ -591,6 +594,9 @@ importers:
       prettier:
         specifier: 'catalog:'
         version: 3.3.2
+      rollup-plugin-visualizer:
+        specifier: 'catalog:'
+        version: 6.0.4(rollup@4.22.4)
       storybook:
         specifier: 'catalog:'
         version: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
@@ -6668,6 +6674,19 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
+  rollup-plugin-visualizer@6.0.4:
+    resolution: {integrity: sha512-q8Q7J/6YofkmaGW1sH/fPRAz37x/+pd7VBuaUU7lwvOS/YikuiiEU9jeb9PH8XHiq50XFrUsBbOxeAMYQ7KZkg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x || ^1.0.0-beta
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
   rollup@4.22.4:
     resolution: {integrity: sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -6822,6 +6841,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
   speakingurl@14.0.1:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
@@ -14733,6 +14756,15 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  rollup-plugin-visualizer@6.0.4(rollup@4.22.4):
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.3
+      source-map: 0.7.6
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.22.4
+
   rollup@4.22.4:
     dependencies:
       '@types/estree': 1.0.5
@@ -14924,6 +14956,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  source-map@0.7.6: {}
+
   speakingurl@14.0.1: {}
 
   sprintf-js@1.0.3: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f3b1ce376..10eadc424 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -68,6 +68,7 @@ catalog:
   prettier: ^3.3.2
   primeicons: ^7.0.0
   primevue: ^4.2.5
+  rollup-plugin-visualizer: ^6.0.4
   storybook: ^9.1.6
   stylelint: ^16.24.0
   tailwindcss: ^4.1.12
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index 9c5bbd40c..9e73edfab 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -12,6 +12,7 @@ const iconGroupClasses = cn(
   'outline-hidden border-none p-0 rounded-lg',
   'bg-white dark-theme:bg-zinc-700',
   'text-neutral-950 dark-theme:text-white',
+  'transition-all duration-200',
   'cursor-pointer'
 )
 </script>
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 71693ea3a..2cdf394fe 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="relative inline-flex items-center">
-    <IconButton @click="toggle">
-      <i class="icon-[lucide--more-vertical] text-sm" />
+    <IconButton :size="size" :type="type" @click="toggle">
+      <i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
+      <i v-else class="icon-[lucide--more-vertical] text-sm" />
     </IconButton>
 
     <Popover
@@ -13,6 +14,8 @@
       :close-on-escape="true"
       unstyled
       :pt="pt"
+      @show="$emit('menuOpened')"
+      @hide="$emit('menuClosed')"
     >
       <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
@@ -25,12 +28,28 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
+import type { BaseButtonProps } from '@/types/buttonTypes'
 import { cn } from '@/utils/tailwindUtil'
 
 import IconButton from './IconButton.vue'
 
+interface MoreButtonProps extends BaseButtonProps {
+  isVertical?: boolean
+}
+
 const popover = ref<InstanceType<typeof Popover>>()
 
+const {
+  size = 'md',
+  type = 'secondary',
+  isVertical = false
+} = defineProps<MoreButtonProps>()
+
+defineEmits<{
+  menuOpened: []
+  menuClosed: []
+}>()
+
 const toggle = (event: Event) => {
   popover.value?.toggle(event)
 }
@@ -45,7 +64,7 @@ const pt = computed(() => ({
   },
   content: {
     class: cn(
-      'mt-2 rounded-lg',
+      'mt-1 rounded-lg',
       'bg-white dark-theme:bg-zinc-800',
       'text-neutral dark-theme:text-white',
       'shadow-lg',
diff --git a/src/components/card/Card.stories.ts b/src/components/card/Card.stories.ts
index f4252644e..cabc44d0d 100644
--- a/src/components/card/Card.stories.ts
+++ b/src/components/card/Card.stories.ts
@@ -11,7 +11,15 @@ import CardTop from './CardTop.vue'
 
 interface CardStoryArgs {
   // CardContainer props
-  containerRatio: 'square' | 'portrait' | 'tallPortrait'
+  containerSize: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
+  variant: 'default' | 'ghost' | 'outline'
+  rounded: 'none' | 'sm' | 'lg' | 'xl'
+  customAspectRatio?: string
+  hasBorder: boolean
+  hasBackground: boolean
+  hasShadow: boolean
+  hasCursor: boolean
+  customClass: string
   maxWidth: number
   minWidth: number
 
@@ -44,10 +52,44 @@ interface CardStoryArgs {
 const meta: Meta<CardStoryArgs> = {
   title: 'Components/Card/Card',
   argTypes: {
-    containerRatio: {
+    containerSize: {
       control: 'select',
-      options: ['square', 'portrait', 'tallPortrait'],
-      description: 'Card container aspect ratio'
+      options: ['mini', 'compact', 'regular', 'portrait', 'tall'],
+      description: 'Card container size preset'
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'ghost', 'outline'],
+      description: 'Card visual variant'
+    },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'lg', 'xl'],
+      description: 'Border radius size'
+    },
+    customAspectRatio: {
+      control: 'text',
+      description: 'Custom aspect ratio (e.g., "16/9")'
+    },
+    hasBorder: {
+      control: 'boolean',
+      description: 'Add border styling'
+    },
+    hasBackground: {
+      control: 'boolean',
+      description: 'Add background styling'
+    },
+    hasShadow: {
+      control: 'boolean',
+      description: 'Add shadow styling'
+    },
+    hasCursor: {
+      control: 'boolean',
+      description: 'Add cursor pointer'
+    },
+    customClass: {
+      control: 'text',
+      description: 'Additional custom CSS classes'
     },
     topRatio: {
       control: 'select',
@@ -149,8 +191,15 @@ const createCardTemplate = (args: CardStoryArgs) => ({
   template: `
     <div class="min-h-screen">
       <CardContainer 
-        :ratio="args.containerRatio" 
-        class="max-w-[320px] mx-auto"
+        :size="args.containerSize"
+        :variant="args.variant"
+        :rounded="args.rounded"
+        :custom-aspect-ratio="args.customAspectRatio"
+        :has-border="args.hasBorder"
+        :has-background="args.hasBackground"
+        :has-shadow="args.hasShadow"
+        :has-cursor="args.hasCursor"
+        :class="args.customClass || 'max-w-[320px] mx-auto'"
       >
         <template #top>
           <CardTop :ratio="args.topRatio">
@@ -205,7 +254,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
         </template>
         
         <template #bottom>
-          <CardBottom class="p-3 bg-neutral-100">
+          <CardBottom>
             <CardTitle v-if="args.showTitle">{{ args.title }}</CardTitle>
             <CardDescription v-if="args.showDescription">{{ args.description }}</CardDescription>
           </CardBottom>
@@ -218,7 +267,15 @@ const createCardTemplate = (args: CardStoryArgs) => ({
 export const Default: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'portrait',
+    containerSize: 'portrait',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -243,7 +300,15 @@ export const Default: Story = {
 export const SquareCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'square',
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: true,
@@ -268,7 +333,15 @@ export const SquareCard: Story = {
 export const TallPortraitCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'tallPortrait',
+    containerSize: 'tall',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,
@@ -293,7 +366,15 @@ export const TallPortraitCard: Story = {
 export const ImageCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'portrait',
+    containerSize: 'portrait',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -314,10 +395,50 @@ export const ImageCard: Story = {
   }
 }
 
+export const MiniCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'mini',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: false,
+    title: 'Mini Asset',
+    description: '',
+    backgroundColor: '#06b6d4',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Asset'],
+    showFileSize: true,
+    fileSize: '124 KB',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
 export const MinimalCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'square',
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: false,
@@ -338,10 +459,209 @@ export const MinimalCard: Story = {
   }
 }
 
+export const GhostVariant: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'compact',
+    variant: 'ghost',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Workflow Template',
+    description: 'Ghost variant for workflow templates',
+    backgroundColor: '#10b981',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Template'],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const OutlineVariant: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'outline',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: true,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Outline Card',
+    description: 'Card with outline variant styling',
+    backgroundColor: '#f59e0b',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const CustomAspectRatio: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    customAspectRatio: '16/9',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: false,
+    title: 'Wide Format Card',
+    description: '',
+    backgroundColor: '#8b5cf6',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Wide'],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const RoundedNone: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'none',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Sharp Corners',
+    description: 'Card with no border radius',
+    backgroundColor: '#dc2626',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const RoundedXL: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'xl',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Extra Rounded',
+    description: 'Card with extra large border radius',
+    backgroundColor: '#059669',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const NoStylesCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerSize: 'regular',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: false,
+    hasBackground: false,
+    hasShadow: false,
+    hasCursor: true,
+    customClass: 'bg-gradient-to-br from-blue-500 to-purple-600',
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: true,
+    title: 'Custom Styled Card',
+    description: 'Card with all default styles removed and custom gradient',
+    backgroundColor: 'transparent',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
 export const FullFeaturedCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
-    containerRatio: 'tallPortrait',
+    containerSize: 'tall',
+    variant: 'default',
+    rounded: 'lg',
+    customAspectRatio: '',
+    hasBorder: true,
+    hasBackground: true,
+    hasShadow: true,
+    hasCursor: true,
+    customClass: '',
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index 390e441a0..7b0822aec 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -8,26 +8,78 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const { ratio = 'square', type } = defineProps<{
-  ratio?: 'smallSquare' | 'square' | 'portrait' | 'tallPortrait'
-  type?: string
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  size = 'regular',
+  variant = 'default',
+  rounded = 'md',
+  customAspectRatio,
+  hasBorder = true,
+  hasBackground = true,
+  hasShadow = true,
+  hasCursor = true,
+  class: customClass = ''
+} = defineProps<{
+  size?: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
+  variant?: 'default' | 'ghost' | 'outline'
+  rounded?: 'none' | 'md' | 'lg' | 'xl'
+  customAspectRatio?: string
+  hasBorder?: boolean
+  hasBackground?: boolean
+  hasShadow?: boolean
+  hasCursor?: boolean
+  class?: string
 }>()
 
+// Base structure classes
+const structureClasses = 'flex flex-col overflow-hidden'
+
+// Rounded corners
+const roundedClasses = {
+  none: 'rounded-none',
+  md: 'rounded',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl'
+} as const
+
 const containerClasses = computed(() => {
-  const baseClasses =
-    'cursor-pointer flex flex-col bg-white dark-theme:bg-zinc-800 rounded-lg shadow-sm border border-zinc-200 dark-theme:border-zinc-700 overflow-hidden'
-
-  if (type === 'workflow-template-card') {
-    return `cursor-pointer p-2 flex flex-col hover:bg-white dark-theme:hover:bg-zinc-800 rounded-lg transition-background duration-200 ease-in-out`
+  // Variant styles
+  const variantClasses = {
+    default: cn(
+      hasBackground && 'bg-white dark-theme:bg-zinc-800',
+      hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
+      hasShadow && 'shadow-sm',
+      hasCursor && 'cursor-pointer'
+    ),
+    ghost: cn(
+      hasCursor && 'cursor-pointer',
+      'p-2 transition-colors duration-200'
+    ),
+    outline: cn(
+      hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
+      hasCursor && 'cursor-pointer',
+      'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
+    )
   }
 
-  const ratioClasses = {
-    smallSquare: 'aspect-240/311',
-    square: 'aspect-256/308',
-    portrait: 'aspect-256/325',
-    tallPortrait: 'aspect-256/353'
-  }
+  // Size/aspect ratio
+  const aspectRatio = customAspectRatio
+    ? `aspect-[${customAspectRatio}]`
+    : {
+        mini: 'aspect-100/120',
+        compact: 'aspect-240/311',
+        regular: 'aspect-256/308',
+        portrait: 'aspect-256/325',
+        tall: 'aspect-256/353'
+      }[size]
 
-  return `${baseClasses} ${ratioClasses[ratio]}`
+  return cn(
+    structureClasses,
+    roundedClasses[rounded],
+    variantClasses[variant],
+    aspectRatio,
+    customClass
+  )
 })
 </script>
diff --git a/src/components/card/CardTop.vue b/src/components/card/CardTop.vue
index d7df34198..6d26d5336 100644
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -2,31 +2,27 @@
   <div :class="topStyle">
     <slot class="absolute top-0 left-0 h-full w-full"></slot>
 
-    <div
-      v-if="slots['top-left']"
-      class="absolute top-2 left-2 flex flex-wrap justify-start gap-2"
-    >
+    <div v-if="slots['top-left']" :class="slotClasses['top-left']">
       <slot name="top-left"></slot>
     </div>
 
-    <div
-      v-if="slots['top-right']"
-      class="absolute top-2 right-2 flex flex-wrap justify-end gap-2"
-    >
+    <div v-if="slots['top-right']" :class="slotClasses['top-right']">
       <slot name="top-right"></slot>
     </div>
 
-    <div
-      v-if="slots['bottom-left']"
-      class="absolute bottom-2 left-2 flex flex-wrap justify-start gap-2"
-    >
+    <div v-if="slots['center-left']" :class="slotClasses['center-left']">
+      <slot name="center-left"></slot>
+    </div>
+
+    <div v-if="slots['center-right']" :class="slotClasses['center-right']">
+      <slot name="center-right"></slot>
+    </div>
+
+    <div v-if="slots['bottom-left']" :class="slotClasses['bottom-left']">
       <slot name="bottom-left"></slot>
     </div>
 
-    <div
-      v-if="slots['bottom-right']"
-      class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"
-    >
+    <div v-if="slots['bottom-right']" :class="slotClasses['bottom-right']">
       <slot name="bottom-right"></slot>
     </div>
   </div>
@@ -35,10 +31,26 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 const slots = useSlots()
 
-const { ratio = 'square' } = defineProps<{
+const {
+  ratio = 'square',
+  topLeftClass,
+  topRightClass,
+  centerLeftClass,
+  centerRightClass,
+  bottomLeftClass,
+  bottomRightClass
+} = defineProps<{
   ratio?: 'square' | 'landscape'
+  topLeftClass?: string
+  topRightClass?: string
+  centerLeftClass?: string
+  centerRightClass?: string
+  bottomLeftClass?: string
+  bottomRightClass?: string
 }>()
 
 const topStyle = computed(() => {
@@ -51,4 +63,26 @@ const topStyle = computed(() => {
 
   return `${baseClasses} ${ratioClasses[ratio]}`
 })
+
+// Get default classes for each slot position
+const defaultSlotClasses = {
+  'top-left': 'absolute top-2 left-2 flex flex-wrap justify-start gap-2',
+  'top-right': 'absolute top-2 right-2 flex flex-wrap justify-end gap-2',
+  'center-left':
+    'absolute top-1/2 left-2 flex -translate-y-1/2 flex-wrap justify-start gap-2',
+  'center-right':
+    'absolute top-1/2 right-2 flex -translate-y-1/2 flex-wrap justify-end gap-2',
+  'bottom-left': 'absolute bottom-2 left-2 flex flex-wrap justify-start gap-2',
+  'bottom-right': 'absolute right-2 bottom-2 flex flex-wrap justify-end gap-2'
+}
+
+// Compute all slot classes once and cache them
+const slotClasses = computed(() => ({
+  'top-left': cn(defaultSlotClasses['top-left'], topLeftClass),
+  'top-right': cn(defaultSlotClasses['top-right'], topRightClass),
+  'center-left': cn(defaultSlotClasses['center-left'], centerLeftClass),
+  'center-right': cn(defaultSlotClasses['center-right'], centerRightClass),
+  'bottom-left': cn(defaultSlotClasses['bottom-left'], bottomLeftClass),
+  'bottom-right': cn(defaultSlotClasses['bottom-right'], bottomRightClass)
+}))
 </script>
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index d4d16f6bc..6a47bb643 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -1,13 +1,28 @@
 <template>
-  <div
-    class="inline-flex shrink-0 items-center justify-center gap-1 rounded bg-[#D9D9D966]/40 px-2 py-1 text-xs font-bold text-white/90"
-  >
-    <slot name="icon" class="text-xs text-white/90"></slot>
+  <div :class="chipClasses">
+    <slot name="icon"></slot>
     <span>{{ label }}</span>
   </div>
 </template>
 <script setup lang="ts">
-const { label } = defineProps<{
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { label, variant = 'dark' } = defineProps<{
   label: string
+  variant?: 'dark' | 'light'
 }>()
+
+const baseClasses =
+  'inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold'
+
+const variantStyles = {
+  dark: 'bg-zinc-500/40 text-white/90',
+  light: 'backdrop-blur-[2px] bg-white/50 text-zinc-900 dark-theme:text-white'
+}
+
+const chipClasses = computed(() => {
+  return cn(baseClasses, variantStyles[variant])
+})
 </script>
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
index dd41247d7..0716beee7 100644
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -2,6 +2,7 @@
   <div
     ref="containerRef"
     class="relative flex h-full w-full items-center justify-center overflow-hidden"
+    :class="containerClass"
   >
     <Skeleton
       v-if="!isImageLoaded"
@@ -41,17 +42,20 @@ import { computed, onUnmounted, ref, watch } from 'vue'
 
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useMediaCache } from '@/services/mediaCacheService'
+import type { ClassValue } from '@/utils/tailwindUtil'
 
 const {
   src,
   alt = '',
+  containerClass = '',
   imageClass = '',
   imageStyle,
   rootMargin = '300px'
 } = defineProps<{
   src: string
   alt?: string
-  imageClass?: string | string[] | Record<string, boolean>
+  containerClass?: ClassValue
+  imageClass?: ClassValue
   imageStyle?: Record<string, any>
   rootMargin?: string
 }>()
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index 12e9490ed..c64a8e19d 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -141,8 +141,10 @@
           <CardContainer
             v-for="n in isLoading ? 12 : 0"
             :key="`initial-skeleton-${n}`"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
           >
             <template #top>
               <CardTop ratio="landscape">
@@ -172,9 +174,11 @@
             v-for="template in isLoading ? [] : displayTemplates"
             :key="template.name"
             ref="cardRefs"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
             @mouseenter="hoveredTemplate = template.name"
             @mouseleave="hoveredTemplate = null"
             @click="onLoadWorkflow(template)"
@@ -316,8 +320,10 @@
           <CardContainer
             v-for="n in isLoadingMore ? 6 : 0"
             :key="`skeleton-${n}`"
-            ratio="smallSquare"
-            type="workflow-template-card"
+            size="compact"
+            variant="ghost"
+            rounded="lg"
+            class="hover:bg-white dark-theme:hover:bg-zinc-800"
           >
             <template #top>
               <CardTop ratio="square">
diff --git a/src/components/graph/CanvasModeSelector.vue b/src/components/graph/CanvasModeSelector.vue
new file mode 100644
index 000000000..0644269e1
--- /dev/null
+++ b/src/components/graph/CanvasModeSelector.vue
@@ -0,0 +1,126 @@
+<template>
+  <Button
+    ref="buttonRef"
+    severity="secondary"
+    class="group h-8 rounded-none! bg-interface-panel-surface p-0 transition-none! hover:rounded-lg! hover:bg-button-hover-surface!"
+    :style="buttonStyles"
+    @click="toggle"
+  >
+    <template #default>
+      <div class="flex items-center gap-1 pr-0.5">
+        <div
+          class="rounded-lg bg-button-active-surface p-2 group-hover:bg-button-hover-surface"
+        >
+          <i :class="currentModeIcon" class="block h-4 w-4" />
+        </div>
+        <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+      </div>
+    </template>
+  </Button>
+
+  <Popover
+    ref="popover"
+    :auto-z-index="true"
+    :base-z-index="1000"
+    :dismissable="true"
+    :close-on-escape="true"
+    unstyled
+    :pt="popoverPt"
+  >
+    <div class="flex flex-col gap-1">
+      <div
+        class="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        @click="setMode('select')"
+      >
+        <div class="flex items-center gap-2">
+          <i class="icon-[lucide--mouse-pointer-2] h-4 w-4" />
+          <span>{{ $t('graphCanvasMenu.select') }}</span>
+        </div>
+        <span class="text-[9px] text-text-primary">{{
+          unlockCommandText
+        }}</span>
+      </div>
+
+      <div
+        class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        @click="setMode('hand')"
+      >
+        <div class="flex items-center gap-2">
+          <i class="icon-[lucide--hand] h-4 w-4" />
+          <span>{{ $t('graphCanvasMenu.hand') }}</span>
+        </div>
+        <span class="text-[9px] text-text-primary">{{ lockCommandText }}</span>
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+interface Props {
+  buttonStyles?: Record<string, string>
+}
+
+defineProps<Props>()
+const buttonRef = ref<InstanceType<typeof Button>>()
+const popover = ref<InstanceType<typeof Popover>>()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isCanvasReadOnly = computed(() => canvasStore.canvas?.read_only ?? false)
+
+const currentModeIcon = computed(() =>
+  isCanvasReadOnly.value
+    ? 'icon-[lucide--hand]'
+    : 'icon-[lucide--mouse-pointer-2]'
+)
+
+const unlockCommandText = computed(() =>
+  commandStore
+    .formatKeySequence(commandStore.getCommand('Comfy.Canvas.Unlock'))
+    .toUpperCase()
+)
+
+const lockCommandText = computed(() =>
+  commandStore
+    .formatKeySequence(commandStore.getCommand('Comfy.Canvas.Lock'))
+    .toUpperCase()
+)
+
+const toggle = (event: Event) => {
+  const el = (buttonRef.value as any)?.$el || buttonRef.value
+  popover.value?.toggle(event, el)
+}
+
+const setMode = (mode: 'select' | 'hand') => {
+  if (mode === 'select' && isCanvasReadOnly.value) {
+    void commandStore.execute('Comfy.Canvas.Unlock')
+  } else if (mode === 'hand' && !isCanvasReadOnly.value) {
+    void commandStore.execute('Comfy.Canvas.Lock')
+  }
+  popover.value?.hide()
+}
+
+const popoverPt = computed(() => ({
+  root: {
+    class: 'absolute z-50 -translate-y-2'
+  },
+  content: {
+    class: [
+      'mb-2 text-text-primary',
+      'shadow-lg border border-node-border',
+      'bg-nav-background',
+      'rounded-lg',
+      'p-2 px-3',
+      'min-w-39',
+      'select-none'
+    ]
+  }
+}))
+</script>
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index f0f2d61d4..b4172cdcc 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -10,41 +10,15 @@
     ></div>
 
     <ButtonGroup
-      class="p-buttongroup-vertical absolute right-2 bottom-4 p-1 md:right-4"
+      class="absolute right-2 bottom-2 z-[1200] flex-row gap-1 border-[1px] border-node-border bg-interface-panel-surface p-2"
       :style="stringifiedMinimapStyles.buttonGroupStyles"
       @wheel="canvasInteractions.handleWheel"
     >
-      <Button
-        v-tooltip.top="selectTooltip"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        severity="secondary"
-        :aria-label="selectTooltip"
-        :pressed="isCanvasReadOnly"
-        icon="i-material-symbols:pan-tool-outline"
-        :class="selectButtonClass"
-        @click="() => commandStore.execute('Comfy.Canvas.Unlock')"
-      >
-        <template #icon>
-          <i class="icon-[lucide--mouse-pointer-2]" />
-        </template>
-      </Button>
+      <CanvasModeSelector
+        :button-styles="stringifiedMinimapStyles.buttonStyles"
+      />
 
-      <Button
-        v-tooltip.top="handTooltip"
-        severity="secondary"
-        :aria-label="handTooltip"
-        :pressed="isCanvasUnlocked"
-        :class="handButtonClass"
-        :style="stringifiedMinimapStyles.buttonStyles"
-        @click="() => commandStore.execute('Comfy.Canvas.Lock')"
-      >
-        <template #icon>
-          <i class="icon-[lucide--hand]" />
-        </template>
-      </Button>
-
-      <!-- vertical line with bg E1DED5 -->
-      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
+      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
 
       <Button
         v-tooltip.top="fitViewTooltip"
@@ -52,11 +26,11 @@
         icon="pi pi-expand"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
-        class="hover:bg-[#E7E6E6]! dark-theme:hover:bg-[#444444]!"
+        class="h-8 w-8 bg-interface-panel-surface p-0 hover:bg-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
         <template #icon>
-          <i class="icon-[lucide--focus]" />
+          <i class="icon-[lucide--focus] h-4 w-4" />
         </template>
       </Button>
 
@@ -71,26 +45,26 @@
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="toggleModal"
       >
-        <span class="inline-flex text-xs">
+        <span class="inline-flex items-center gap-1 px-2 text-xs">
           <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i class="icon-[lucide--chevron-down]" />
+          <i class="icon-[lucide--chevron-down] h-4 w-4" />
         </span>
       </Button>
 
-      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
+      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
 
       <Button
-        ref="focusButton"
-        v-tooltip.top="focusModeTooltip"
+        ref="minimapButton"
+        v-tooltip.top="minimapTooltip"
         severity="secondary"
-        :aria-label="focusModeTooltip"
-        data-testid="focus-mode-button"
+        :aria-label="minimapTooltip"
+        data-testid="toggle-minimap-button"
         :style="stringifiedMinimapStyles.buttonStyles"
-        :class="focusButtonClass"
-        @click="() => commandStore.execute('Workspace.ToggleFocusMode')"
+        :class="minimapButtonClass"
+        @click="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
       >
         <template #icon>
-          <i class="icon-[lucide--lightbulb]" />
+          <i class="icon-[lucide--map] h-4 w-4" />
         </template>
       </Button>
 
@@ -111,7 +85,7 @@
         @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
       >
         <template #icon>
-          <i class="icon-[lucide--route-off]" />
+          <i class="icon-[lucide--route-off] h-4 w-4" />
         </template>
       </Button>
     </ButtonGroup>
@@ -131,8 +105,8 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import CanvasModeSelector from './CanvasModeSelector.vue'
 import ZoomControlsModal from './modals/ZoomControlsModal.vue'
 
 const { t } = useI18n()
@@ -141,21 +115,16 @@ const { formatKeySequence } = useCommandStore()
 const canvasStore = useCanvasStore()
 const settingStore = useSettingStore()
 const canvasInteractions = useCanvasInteractions()
-const workspaceStore = useWorkspaceStore()
 const minimap = useMinimap()
 
 const { isModalVisible, toggleModal, hideModal, hasActivePopup } =
   useZoomControls()
 
 const stringifiedMinimapStyles = computed(() => {
-  const buttonGroupKeys = ['backgroundColor', 'borderRadius', '']
-  const buttonKeys = ['backgroundColor', 'borderRadius']
+  const buttonGroupKeys = ['borderRadius']
+  const buttonKeys = ['borderRadius']
   const additionalButtonStyles = {
-    border: 'none',
-    width: '35px',
-    height: '35px',
-    'margin-right': '2px',
-    'margin-left': '2px'
+    border: 'none'
   }
 
   const containerStyles = minimap.containerStyles.value
@@ -176,72 +145,56 @@ const stringifiedMinimapStyles = computed(() => {
 })
 
 // Computed properties for reactive states
-const isCanvasReadOnly = computed(() => canvasStore.canvas?.read_only ?? false)
-const isCanvasUnlocked = computed(() => !isCanvasReadOnly.value)
 const linkHidden = computed(
   () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
 )
 
 // Computed properties for command text
-const unlockCommandText = computed(() =>
-  formatKeySequence(
-    commandStore.getCommand('Comfy.Canvas.Unlock')
-  ).toUpperCase()
-)
-const lockCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.Lock')).toUpperCase()
-)
 const fitViewCommandText = computed(() =>
   formatKeySequence(
     commandStore.getCommand('Comfy.Canvas.FitView')
   ).toUpperCase()
 )
-const focusCommandText = computed(() =>
+const minimapCommandText = computed(() =>
   formatKeySequence(
-    commandStore.getCommand('Workspace.ToggleFocusMode')
+    commandStore.getCommand('Comfy.Canvas.ToggleMinimap')
   ).toUpperCase()
 )
 
 // Computed properties for button classes and states
-const selectButtonClass = computed(() =>
-  isCanvasUnlocked.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : ''
-)
-
-const handButtonClass = computed(() =>
-  isCanvasReadOnly.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : ''
-)
-
 const zoomButtonClass = computed(() => [
-  'w-16!',
-  isModalVisible.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : '',
-  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!'
+  'bg-interface-panel-surface',
+  isModalVisible.value ? 'not-active:bg-button-active-surface!' : '',
+  'hover:bg-button-hover-surface!',
+  'p-0',
+  'h-8',
+  'w-15'
 ])
 
-const focusButtonClass = computed(() => ({
-  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!': true,
-  'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!':
-    workspaceStore.focusMode
+const minimapButtonClass = computed(() => ({
+  'bg-interface-panel-surface': true,
+  'hover:bg-button-hover-surface!': true,
+  'not-active:bg-button-active-surface!': settingStore.get(
+    'Comfy.Minimap.Visible'
+  ),
+  'p-0': true,
+  'w-8': true,
+  'h-8': true
 }))
 
 // Computed properties for tooltip and aria-label texts
-const selectTooltip = computed(
-  () => `${t('graphCanvasMenu.select')} (${unlockCommandText.value})`
-)
-const handTooltip = computed(
-  () => `${t('graphCanvasMenu.hand')} (${lockCommandText.value})`
-)
-const fitViewTooltip = computed(
-  () => `${t('graphCanvasMenu.fitView')} (${fitViewCommandText.value})`
-)
-const focusModeTooltip = computed(
-  () => `${t('graphCanvasMenu.focusMode')} (${focusCommandText.value})`
-)
+const fitViewTooltip = computed(() => {
+  const label = t('graphCanvasMenu.fitView')
+  const shortcut = fitViewCommandText.value
+  return shortcut ? `${label} (${shortcut})` : label
+})
+const minimapTooltip = computed(() => {
+  const label = settingStore.get('Comfy.Minimap.Visible')
+    ? t('zoomControls.hideMinimap')
+    : t('zoomControls.showMinimap')
+  const shortcut = minimapCommandText.value
+  return shortcut ? `${label} (${shortcut})` : label
+})
 const linkVisibilityTooltip = computed(() =>
   linkHidden.value
     ? t('graphCanvasMenu.showLinks')
@@ -253,10 +206,12 @@ const linkVisibilityAriaLabel = computed(() =>
     : t('graphCanvasMenu.hideLinks')
 )
 const linkVisibleClass = computed(() => [
-  linkHidden.value
-    ? 'not-active:dark-theme:bg-[#262729]! not-active:bg-[#E7E6E6]!'
-    : '',
-  'dark-theme:hover:bg-[#262729]! hover:bg-[#E7E6E6]!'
+  'bg-interface-panel-surface',
+  linkHidden.value ? 'not-active:bg-button-active-surface!' : '',
+  'hover:bg-button-hover-surface!',
+  'p-0',
+  'w-8',
+  'h-8'
 ])
 
 onMounted(() => {
@@ -267,19 +222,3 @@ onBeforeUnmount(() => {
   canvasStore.cleanupScaleSync()
 })
 </script>
-
-<style scoped>
-.p-buttongroup-vertical {
-  display: flex;
-  flex-direction: row;
-  z-index: 1200;
-  border-radius: var(--p-button-border-radius);
-  overflow: hidden;
-  border: 1px solid var(--p-panel-border-color);
-}
-
-.p-buttongroup-vertical .p-button {
-  margin: 0;
-  border-radius: 0;
-}
-</style>
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index 3fc0a661a..06626ab1e 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -7,11 +7,10 @@
     <Transition name="slide-up">
       <Panel
         v-if="visible"
-        class="selection-toolbox pointer-events-auto rounded-lg"
-        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
+        class="selection-toolbox pointer-events-auto rounded-lg border border-interface-stroke bg-interface-panel-surface"
         :pt="{
           header: 'hidden',
-          content: 'p-1 h-10 flex flex-row gap-1'
+          content: 'p-2 h-12 flex flex-row gap-1'
         }"
         @wheel="canvasInteractions.forwardEventToCanvas"
       >
@@ -65,7 +64,6 @@ import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionTo
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
 import { useCommandStore } from '@/stores/commandStore'
 import type { ComfyCommandImpl } from '@/stores/commandStore'
@@ -78,8 +76,6 @@ const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
-const minimap = useMinimap()
-const containerStyles = minimap.containerStyles
 
 const toolboxRef = ref<HTMLElement | undefined>()
 const { visible } = useSelectionToolboxPosition(toolboxRef)
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index b4c9781a7..8170cdf95 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -1,118 +1,51 @@
 <template>
   <div
     v-if="visible"
-    class="absolute right-2 bottom-[66px] z-1300 flex w-[250px] justify-center border-0! bg-inherit! md:right-11"
+    class="absolute right-2 bottom-[66px] z-1300 flex w-[250px] justify-center border-0! bg-inherit!"
   >
     <div
-      class="w-4/5 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark-theme:border-gray-700 dark-theme:bg-[#2b2b2b]"
+      class="w-4/5 rounded-lg border border-node-border bg-interface-panel-surface p-2 text-text-primary shadow-lg select-none"
       :style="filteredMinimapStyles"
       @click.stop
     >
-      <div>
-        <Button
-          severity="secondary"
-          text
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
+      <div class="flex flex-col gap-1">
+        <div
+          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomIn')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
         >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              $t('graphCanvasMenu.zoomIn')
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              zoomInCommandText
-            }}</span>
-          </template>
-        </Button>
+          <span class="font-medium">{{ $t('graphCanvasMenu.zoomIn') }}</span>
+          <span class="text-[9px] text-text-primary">{{
+            zoomInCommandText
+          }}</span>
+        </div>
 
-        <Button
-          severity="secondary"
-          text
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
+        <div
+          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomOut')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
         >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              $t('graphCanvasMenu.zoomOut')
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              zoomOutCommandText
-            }}</span>
-          </template>
-        </Button>
+          <span class="font-medium">{{ $t('graphCanvasMenu.zoomOut') }}</span>
+          <span class="text-[9px] text-text-primary">{{
+            zoomOutCommandText
+          }}</span>
+        </div>
 
-        <Button
-          severity="secondary"
-          text
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
+        <div
+          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              $t('zoomControls.zoomToFit')
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              zoomToFitCommandText
-            }}</span>
-          </template>
-        </Button>
-        <hr class="mb-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
-        <Button
-          severity="secondary"
-          text
-          data-testid="toggle-minimap-button"
-          :pt="{
-            root: {
-              class:
-                'flex items-center justify-between cursor-pointer p-2 rounded w-full text-left hover:bg-transparent! focus:bg-transparent! active:bg-transparent!'
-            },
-            label: {
-              class: 'flex flex-col items-start w-full'
-            }
-          }"
-          @click="executeCommand('Comfy.Canvas.ToggleMinimap')"
-        >
-          <template #default>
-            <span class="block text-sm font-medium">{{
-              minimapToggleText
-            }}</span>
-            <span class="block text-sm text-gray-500">{{
-              showMinimapCommandText
-            }}</span>
-          </template>
-        </Button>
-        <hr class="mt-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
+          <span class="font-medium">{{ $t('zoomControls.zoomToFit') }}</span>
+          <span class="text-[9px] text-text-primary">{{
+            zoomToFitCommandText
+          }}</span>
+        </div>
+
         <div
           ref="zoomInputContainer"
-          class="zoomInputContainer flex items-center rounded bg-[#E7E6E6] p-2 px-2 focus-within:bg-[#F3F3F3] dark-theme:bg-[#8282821A]"
+          class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
         >
           <InputNumber
             ref="zoomInput"
@@ -122,12 +55,12 @@
             :show-buttons="false"
             :use-grouping="false"
             :unstyled="true"
-            input-class="flex-1 bg-transparent border-none outline-hidden text-sm shadow-none my-0 "
+            input-class="bg-transparent border-none outline-hidden text-sm shadow-none my-0 w-full"
             fluid
             @input="applyZoom"
             @keyup.enter="applyZoom"
           />
-          <span class="-ml-4 text-sm text-gray-500">%</span>
+          <span class="flex-shrink-0 text-sm text-text-primary">%</span>
         </div>
       </div>
     </div>
@@ -136,18 +69,14 @@
 
 <script setup lang="ts">
 import type { InputNumberInputEvent } from 'primevue'
-import { Button, InputNumber } from 'primevue'
+import { InputNumber } from 'primevue'
 import { computed, nextTick, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
 
-const { t } = useI18n()
 const minimap = useMinimap()
-const settingStore = useSettingStore()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const { formatKeySequence } = useCommandStore()
@@ -158,19 +87,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const emit = defineEmits<{
-  close: []
-}>()
-
 const interval = ref<number | null>(null)
 
-// Computed properties for reactive states
-const minimapToggleText = computed(() =>
-  settingStore.get('Comfy.Minimap.Visible')
-    ? t('zoomControls.hideMinimap')
-    : t('zoomControls.showMinimap')
-)
-
 const applyZoom = (val: InputNumberInputEvent) => {
   const inputValue = val.value as number
   if (isNaN(inputValue) || inputValue < 1 || inputValue > 1000) {
@@ -181,9 +99,6 @@ const applyZoom = (val: InputNumberInputEvent) => {
 
 const executeCommand = (command: string) => {
   void commandStore.execute(command)
-  if (command === 'Comfy.Canvas.ToggleMinimap') {
-    emit('close')
-  }
 }
 
 const startRepeat = (command: string) => {
@@ -215,9 +130,6 @@ const zoomOutCommandText = computed(() =>
 const zoomToFitCommandText = computed(() =>
   formatKeySequence(commandStore.getCommand('Comfy.Canvas.FitView'))
 )
-const showMinimapCommandText = computed(() =>
-  formatKeySequence(commandStore.getCommand('Comfy.Canvas.ToggleMinimap'))
-)
 const zoomInput = ref<InstanceType<typeof InputNumber> | null>(null)
 const zoomInputContainer = ref<HTMLDivElement | null>(null)
 
@@ -236,10 +148,6 @@ watch(
 </script>
 <style>
 .zoomInputContainer:focus-within {
-  border: 1px solid rgb(204 204 204);
-}
-
-.dark-theme .zoomInputContainer:focus-within {
-  border: 1px solid rgb(204 204 204);
+  border: 1px solid var(--color-pure-white);
 }
 </style>
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index 52a32a3b6..57e6595d7 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -6,12 +6,15 @@
   <div
     v-else
     role="button"
-    class="flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700"
+    class="group flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm text-text-primary hover:bg-interface-menu-component-surface-hovered"
     @click="handleClick"
   >
     <i v-if="option.icon" :class="[option.icon, 'h-4 w-4']" />
     <span class="flex-1">{{ option.label }}</span>
-    <span v-if="option.shortcut" class="text-xs opacity-60">
+    <span
+      v-if="option.shortcut"
+      class="flex h-3.5 min-w-3.5 items-center justify-center rounded bg-interface-menu-keybind-surface-default px-1 py-0 text-xxs"
+    >
       {{ option.shortcut }}
     </span>
     <i
diff --git a/src/components/graph/selectionToolbox/NodeOptions.vue b/src/components/graph/selectionToolbox/NodeOptions.vue
index f7b9e995f..9965ffa6d 100644
--- a/src/components/graph/selectionToolbox/NodeOptions.vue
+++ b/src/components/graph/selectionToolbox/NodeOptions.vue
@@ -28,7 +28,6 @@
       :key="`submenu-${option.label}`"
       :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
       :option="option"
-      :container-styles="containerStyles"
       @submenu-click="handleSubmenuClick"
     />
   </div>
@@ -55,7 +54,6 @@ import type {
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 
 import MenuOptionItem from './MenuOptionItem.vue'
 import SubmenuPopover from './SubmenuPopover.vue'
@@ -75,8 +73,6 @@ const currentSubmenu = ref<string | null>(null)
 const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
 const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
 const canvasInteractions = useCanvasInteractions()
-const minimap = useMinimap()
-const containerStyles = minimap.containerStyles
 
 let lastLogTs = 0
 const LOG_INTERVAL = 120 // ms
@@ -264,11 +260,9 @@ const pt = computed(() => ({
   content: {
     class: [
       'mt-2 text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ],
-    style: {
-      backgroundColor: containerStyles.value.backgroundColor
-    }
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
+      'bg-interface-panel-surface'
+    ]
   }
 }))
 
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index 3de200c2f..fd376df97 100644
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -56,13 +56,6 @@ import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
 
 interface Props {
   option: MenuOption
-  containerStyles: {
-    width: string
-    height: string
-    backgroundColor: string
-    border: string
-    borderRadius: string
-  }
 }
 
 interface Emits {
@@ -117,11 +110,9 @@ const submenuPt = computed(() => ({
   content: {
     class: [
       'text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ],
-    style: {
-      backgroundColor: props.containerStyles.backgroundColor
-    }
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700',
+      'bg-interface-panel-surface'
+    ]
   }
 }))
 </script>
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index a58cb4a76..bfa1cbc96 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -135,6 +135,7 @@ import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
@@ -265,7 +266,7 @@ const moreMenuItem = computed(() =>
 )
 
 const menuItems = computed<MenuItem[]>(() => {
-  return [
+  const items: MenuItem[] = [
     {
       key: 'docs',
       type: 'item',
@@ -305,8 +306,12 @@ const menuItems = computed<MenuItem[]>(() => {
         void commandStore.execute('Comfy.ContactSupport')
         emit('close')
       }
-    },
-    {
+    }
+  ]
+
+  // Extension manager - only in non-cloud distributions
+  if (!isCloud) {
+    items.push({
       key: 'manager',
       type: 'item',
       icon: PuzzleIcon,
@@ -319,17 +324,20 @@ const menuItems = computed<MenuItem[]>(() => {
         })
         emit('close')
       }
-    },
-    {
-      key: 'more',
-      type: 'item',
-      icon: '',
-      label: t('helpCenter.more'),
-      visible: hasVisibleMoreItems.value,
-      action: () => {}, // No action for more item
-      items: moreItems.value
-    }
-  ]
+    })
+  }
+
+  items.push({
+    key: 'more',
+    type: 'item',
+    icon: '',
+    label: t('helpCenter.more'),
+    visible: hasVisibleMoreItems.value,
+    action: () => {}, // No action for more item
+    items: moreItems.value
+  })
+
+  return items
 })
 
 // Utility Functions
@@ -420,6 +428,9 @@ const formatReleaseDate = (dateString?: string): string => {
 }
 
 const shouldShowUpdateButton = (release: ReleaseNote): boolean => {
+  // Hide update buttons in cloud distribution
+  if (isCloud) return false
+
   return (
     releaseStore.shouldShowUpdateButton &&
     release === releaseStore.recentReleases[0]
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index d5909766e..8e9bf015f 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -2,15 +2,16 @@
   <div>
     <div
       v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="z-1001 flex h-[38px] w-full content-end"
+      class="z-1001 flex h-9.5 w-full content-end"
       style="background: var(--border-color)"
     >
       <WorkflowTabs />
+      <TopbarBadges />
     </div>
     <div
       v-show="showTopMenu"
       ref="topMenuRef"
-      class="comfyui-menu flex items-center"
+      class="comfyui-menu flex items-center bg-gray-100"
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
       <CommandMenubar />
@@ -44,9 +45,10 @@ import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
+import TopbarBadges from './TopbarBadges.vue'
+
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
-
 const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
 const betaMenuEnabled = computed(() => menuSetting.value !== 'Disabled')
 const showTopMenu = computed(
diff --git a/src/components/topbar/TopbarBadge.vue b/src/components/topbar/TopbarBadge.vue
new file mode 100644
index 000000000..4ec12dffc
--- /dev/null
+++ b/src/components/topbar/TopbarBadge.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
+    <div
+      v-if="badge.label"
+      class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
+    >
+      {{ badge.label }}
+    </div>
+    <div class="font-inter text-sm font-extrabold text-slate-100">
+      {{ badge.text }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { TopbarBadge } from '@/types/comfy'
+
+defineProps<{
+  badge: TopbarBadge
+}>()
+</script>
diff --git a/src/components/topbar/TopbarBadges.vue b/src/components/topbar/TopbarBadges.vue
new file mode 100644
index 000000000..381b4d13c
--- /dev/null
+++ b/src/components/topbar/TopbarBadges.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex">
+    <TopbarBadge
+      v-for="badge in topbarBadgeStore.badges"
+      :key="badge.text"
+      :badge
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
+
+import TopbarBadge from './TopbarBadge.vue'
+
+const topbarBadgeStore = useTopbarBadgeStore()
+</script>
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index 4abc18365..d89413316 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -88,7 +88,7 @@
     <template #content>
       <!-- Card Examples -->
       <div :style="gridStyle">
-        <CardContainer v-for="i in 100" :key="i" ratio="square">
+        <CardContainer v-for="i in 100" :key="i" size="regular">
           <template #top>
             <CardTop ratio="landscape">
               <template #default>
diff --git a/src/composables/bottomPanelTabs/useTerminal.ts b/src/composables/bottomPanelTabs/useTerminal.ts
index d353294f0..ed7fb3fa8 100644
--- a/src/composables/bottomPanelTabs/useTerminal.ts
+++ b/src/composables/bottomPanelTabs/useTerminal.ts
@@ -5,12 +5,14 @@ import { debounce } from 'es-toolkit/compat'
 import type { Ref } from 'vue'
 import { markRaw, onMounted, onUnmounted } from 'vue'
 
+import { isDesktop } from '@/platform/distribution/types'
+
 export function useTerminal(element: Ref<HTMLElement | undefined>) {
   const fitAddon = new FitAddon()
   const terminal = markRaw(
     new Terminal({
       convertEol: true,
-      theme: { background: '#171717' }
+      theme: isDesktop ? { background: '#171717' } : undefined
     })
   )
   terminal.loadAddon(fitAddon)
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index be96d85cc..522c06ef1 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -2,13 +2,15 @@
  * Vue node lifecycle management for LiteGraph integration
  * Provides event-driven reactivity with performance optimizations
  */
-import { reactive } from 'vue'
+import { reactiveComputed } from '@vueuse/core'
+import { reactive, shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type {
   INodeInputSlot,
   INodeOutputSlot
 } from '@/lib/litegraph/src/interfaces'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -132,44 +134,57 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       })
     })
 
-    const safeWidgets = node.widgets?.map((widget) => {
-      try {
-        // TODO: Use widget.getReactiveData() once TypeScript types are updated
-        let value = widget.value
-
-        // For combo widgets, if value is undefined, use the first option as default
-        if (
-          value === undefined &&
-          widget.type === 'combo' &&
-          widget.options?.values &&
-          Array.isArray(widget.options.values) &&
-          widget.options.values.length > 0
-        ) {
-          value = widget.options.values[0]
-        }
-        const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
-        const slotInfo = slotMetadata.get(widget.name)
-
-        return {
-          name: widget.name,
-          type: widget.type,
-          value: value,
-          label: widget.label,
-          options: widget.options ? { ...widget.options } : undefined,
-          callback: widget.callback,
-          spec,
-          slotMetadata: slotInfo,
-          isDOMWidget: isDOMWidget(widget)
-        }
-      } catch (error) {
-        return {
-          name: widget.name || 'unknown',
-          type: widget.type || 'text',
-          value: undefined
-        }
+    const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
+    Object.defineProperty(node, 'widgets', {
+      get() {
+        return reactiveWidgets
+      },
+      set(v) {
+        reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
       }
     })
 
+    const safeWidgets = reactiveComputed<SafeWidgetData[]>(
+      () =>
+        node.widgets?.map((widget) => {
+          try {
+            // TODO: Use widget.getReactiveData() once TypeScript types are updated
+            let value = widget.value
+
+            // For combo widgets, if value is undefined, use the first option as default
+            if (
+              value === undefined &&
+              widget.type === 'combo' &&
+              widget.options?.values &&
+              Array.isArray(widget.options.values) &&
+              widget.options.values.length > 0
+            ) {
+              value = widget.options.values[0]
+            }
+            const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
+            const slotInfo = slotMetadata.get(widget.name)
+
+            return {
+              name: widget.name,
+              type: widget.type,
+              value: value,
+              label: widget.label,
+              options: widget.options ? { ...widget.options } : undefined,
+              callback: widget.callback,
+              spec,
+              slotMetadata: slotInfo,
+              isDOMWidget: isDOMWidget(widget)
+            }
+          } catch (error) {
+            return {
+              name: widget.name || 'unknown',
+              type: widget.type || 'text',
+              value: undefined
+            }
+          }
+        }) ?? []
+    )
+
     const nodeType =
       node.type ||
       node.constructor?.comfyClass ||
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index a2590101c..c1eedd3fe 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -1141,9 +1141,15 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         const generateAudio =
           String(generateAudioWidget.value).toLowerCase() === 'true'
 
-        if (model.includes('veo-3.0-fast-generate-001')) {
+        if (
+          model.includes('veo-3.0-fast-generate-001') ||
+          model.includes('veo-3.1-fast-generate')
+        ) {
           return generateAudio ? '$1.20/Run' : '$0.80/Run'
-        } else if (model.includes('veo-3.0-generate-001')) {
+        } else if (
+          model.includes('veo-3.0-generate-001') ||
+          model.includes('veo-3.1-generate')
+        ) {
           return generateAudio ? '$3.20/Run' : '$1.60/Run'
         }
 
diff --git a/src/constants/coreKeybindings.ts b/src/constants/coreKeybindings.ts
index fe2bde835..3ab1ba51d 100644
--- a/src/constants/coreKeybindings.ts
+++ b/src/constants/coreKeybindings.ts
@@ -162,12 +162,6 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
     },
     commandId: 'Workspace.ToggleBottomPanelTab.logs-terminal'
   },
-  {
-    combo: {
-      key: 'f'
-    },
-    commandId: 'Workspace.ToggleFocusMode'
-  },
   {
     combo: {
       key: 'e',
diff --git a/src/core/graph/subgraph/proxyWidget.ts b/src/core/graph/subgraph/proxyWidget.ts
index 65191e828..74e0c733d 100644
--- a/src/core/graph/subgraph/proxyWidget.ts
+++ b/src/core/graph/subgraph/proxyWidget.ts
@@ -115,11 +115,14 @@ const onConfigure = function (
       this.arrange()
     }
   })
-  if (serialisedNode.properties?.proxyWidgets)
+  if (serialisedNode.properties?.proxyWidgets) {
     this.properties.proxyWidgets = serialisedNode.properties.proxyWidgets
-  serialisedNode.widgets_values?.forEach((v, index) => {
-    if (v !== null) this.widgets[index].value = v
-  })
+    const parsed = parseProxyWidgets(serialisedNode.properties.proxyWidgets)
+    serialisedNode.widgets_values?.forEach((v, index) => {
+      const widget = this.widgets.find((w) => w.name == parsed[index][1])
+      if (v !== null && widget) widget.value = v
+    })
+  }
 }
 
 function newProxyWidget(
diff --git a/src/extensions/core/cloudBadge.ts b/src/extensions/core/cloudBadge.ts
new file mode 100644
index 000000000..5f2b569fa
--- /dev/null
+++ b/src/extensions/core/cloudBadge.ts
@@ -0,0 +1,16 @@
+import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { useExtensionService } from '@/services/extensionService'
+
+useExtensionService().registerExtension({
+  name: 'Comfy.CloudBadge',
+  // Only show badge when running in cloud environment
+  topbarBadges: isCloud
+    ? [
+        {
+          label: t('g.beta'),
+          text: 'Comfy Cloud'
+        }
+      ]
+    : undefined
+})
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index 5354ef4e9..011502f44 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -1,3 +1,5 @@
+import { isCloud } from '@/platform/distribution/types'
+
 import './clipspace'
 import './contextMenuFilter'
 import './dynamicPrompts'
@@ -21,3 +23,7 @@ import './uploadAudio'
 import './uploadImage'
 import './webcamCapture'
 import './widgetInputs'
+
+if (isCloud) {
+  import('./cloudBadge')
+}
diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
index bde5af6c1..d6bec005a 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -178,8 +178,9 @@ app.registerExtension({
         audioUIWidget.options.canvasOnly = true
 
         const onAudioWidgetUpdate = () => {
+          if (typeof audioWidget.value !== 'string') return
           audioUIWidget.element.src = api.apiURL(
-            getResourceURL(...splitFilePath(audioWidget.value as string))
+            getResourceURL(...splitFilePath(audioWidget.value))
           )
         }
         // Initially load default audio file to audioUIWidget.
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 11d915f2f..c5ac3ca34 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -9,8 +9,19 @@
     "downloadImage": "Download image",
     "downloadVideo": "Download video",
     "editOrMaskImage": "Edit or mask image",
+    "editImage": "Edit image",
+    "deleteImage": "Delete image",
+    "deleteAudioFile": "Delete audio file",
     "removeImage": "Remove image",
     "removeVideo": "Remove video",
+    "chart": "Chart",
+    "chartLowercase": "chart",
+    "file": "file",
+    "selectedFile": "Selected file",
+    "none": "None",
+    "markdown": "markdown",
+    "content": "content",
+    "audioProgress": "Audio progress",
     "viewImageOfTotal": "View image {index} of {total}",
     "viewVideoOfTotal": "View video {index} of {total}",
     "imagePreview": "Image preview - Use arrow keys to navigate between images",
@@ -193,7 +204,8 @@
     "volume": "Volume",
     "halfSpeed": "0.5x",
     "1x": "1x",
-    "2x": "2x"
+    "2x": "2x",
+    "beta": "BETA"
   },
   "manager": {
     "title": "Custom Nodes Manager",
diff --git a/src/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json
index a3e2da72f..87780e516 100644
--- a/src/locales/en/nodeDefs.json
+++ b/src/locales/en/nodeDefs.json
@@ -832,6 +832,11 @@
       "guidance": {
         "name": "guidance"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "CLIPTextEncodeHiDream": {
@@ -871,6 +876,11 @@
       "mt5xl": {
         "name": "mt5xl"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "CLIPTextEncodeLumina2": {
@@ -937,6 +947,11 @@
       "empty_padding": {
         "name": "empty_padding"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "CLIPTextEncodeSDXL": {
@@ -1475,10 +1490,12 @@
     },
     "outputs": {
       "0": {
-        "name": "positive"
+        "name": "positive",
+        "tooltip": null
       },
       "1": {
-        "name": "negative"
+        "name": "negative",
+        "tooltip": null
       }
     }
   },
@@ -1974,6 +1991,11 @@
       "batch_size": {
         "name": "batch_size"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "EmptyHunyuanLatentVideo": {
@@ -1991,6 +2013,11 @@
       "batch_size": {
         "name": "batch_size"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "EmptyImage": {
@@ -2113,6 +2140,11 @@
       "batch_size": {
         "name": "batch_size"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "Epsilon Scaling": {
@@ -2200,6 +2232,11 @@
       "conditioning": {
         "name": "conditioning"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "FluxGuidance": {
@@ -2211,6 +2248,11 @@
       "guidance": {
         "name": "guidance"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "FluxKontextImageScale": {
@@ -2220,6 +2262,11 @@
       "image": {
         "name": "image"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "FluxKontextMaxImageNode": {
@@ -2272,6 +2319,11 @@
       "reference_latents_method": {
         "name": "reference_latents_method"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "FluxKontextProImageNode": {
@@ -2629,6 +2681,10 @@
         "name": "files",
         "tooltip": "Optional file(s) to use as context for the model. Accepts inputs from the Gemini Generate Content Input Files node."
       },
+      "aspect_ratio": {
+        "name": "aspect_ratio",
+        "tooltip": "Defaults to matching the output image size to that of your input image, or otherwise generates 1:1 squares."
+      },
       "control_after_generate": {
         "name": "control after generate"
       }
@@ -2870,10 +2926,12 @@
     },
     "outputs": {
       "0": {
-        "name": "positive"
+        "name": "positive",
+        "tooltip": null
       },
       "1": {
-        "name": "latent"
+        "name": "latent",
+        "tooltip": null
       }
     }
   },
@@ -2895,13 +2953,16 @@
     },
     "outputs": {
       "0": {
-        "name": "positive"
+        "name": "positive",
+        "tooltip": null
       },
       "1": {
-        "name": "negative"
+        "name": "negative",
+        "tooltip": null
       },
       "2": {
-        "name": "latent"
+        "name": "latent",
+        "tooltip": null
       }
     }
   },
@@ -3478,6 +3539,11 @@
       "image": {
         "name": "image"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "ImageYUVToRGB": {
@@ -3582,6 +3648,11 @@
       "alpha": {
         "name": "alpha"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "KarrasScheduler": {
@@ -4209,6 +4280,11 @@
       "samples2": {
         "name": "samples2"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentApplyOperation": {
@@ -4220,6 +4296,11 @@
       "operation": {
         "name": "operation"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentApplyOperationCFG": {
@@ -4231,6 +4312,11 @@
       "operation": {
         "name": "operation"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentBatch": {
@@ -4242,6 +4328,11 @@
       "samples2": {
         "name": "samples2"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentBatchSeedBehavior": {
@@ -4253,6 +4344,11 @@
       "seed_behavior": {
         "name": "seed_behavior"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentBlend": {
@@ -4324,6 +4420,11 @@
       "dim": {
         "name": "dim"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentCrop": {
@@ -4361,6 +4462,11 @@
       "amount": {
         "name": "amount"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentFlip": {
@@ -4400,6 +4506,11 @@
       "ratio": {
         "name": "ratio"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentMultiply": {
@@ -4411,6 +4522,11 @@
       "multiplier": {
         "name": "multiplier"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentOperationSharpen": {
@@ -4425,6 +4541,11 @@
       "alpha": {
         "name": "alpha"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentOperationTonemapReinhard": {
@@ -4433,6 +4554,11 @@
       "multiplier": {
         "name": "multiplier"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentRotate": {
@@ -4455,6 +4581,11 @@
       "samples2": {
         "name": "samples2"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "LatentUpscale": {
@@ -7701,6 +7832,10 @@
         "name": "video",
         "tooltip": "The reference video used to generate the output video. Must be at least 5 seconds long. Videos longer than 5s will be automatically trimmed. Only MP4 format supported."
       },
+      "steps": {
+        "name": "steps",
+        "tooltip": "Number of inference steps"
+      },
       "control_type": {
         "name": "control_type"
       },
@@ -8106,6 +8241,11 @@
       "upscale_method": {
         "name": "upscale_method"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "PerpNeg": {
@@ -8407,7 +8547,7 @@
       },
       "mask": {
         "name": "mask",
-        "tooltip": "Use the mask to define areas in the video to replace"
+        "tooltip": "Use the mask to define areas in the video to replace."
       },
       "prompt_text": {
         "name": "prompt_text"
@@ -8418,6 +8558,10 @@
       "seed": {
         "name": "seed"
       },
+      "region_to_modify": {
+        "name": "region_to_modify",
+        "tooltip": "Plaintext description of the object / region to modify."
+      },
       "control_after_generate": {
         "name": "control after generate"
       }
@@ -8635,6 +8779,14 @@
       "mode": {
         "name": "mode"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "tooltip": null
+      }
     }
   },
   "Preview3D": {
@@ -10248,6 +10400,11 @@
       "rescaling_scale": {
         "name": "rescaling_scale"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "SkipLayerGuidanceDiTSimple": {
@@ -10269,6 +10426,11 @@
       "end_percent": {
         "name": "end_percent"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "SkipLayerGuidanceSD3": {
@@ -10290,6 +10452,11 @@
       "end_percent": {
         "name": "end_percent"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "SolidMask": {
@@ -10329,6 +10496,14 @@
       "image": {
         "name": "image"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "tooltip": null
+      }
     }
   },
   "SplitSigmas": {
@@ -11152,6 +11327,11 @@
         "name": "image_interleave",
         "tooltip": "How much the image influences things vs the text prompt. Higher number means more influence from the text prompt."
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "TextEncodeQwenImageEdit": {
@@ -11379,6 +11559,11 @@
       "clip_name3": {
         "name": "clip_name3"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "TripoConversionNode": {
@@ -11760,6 +11945,11 @@
       "model_name": {
         "name": "model_name"
       }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
     }
   },
   "USOStyleReference": {
diff --git a/src/locales/zh/commands.json b/src/locales/zh/commands.json
index 6b5ae1c9e..76ea151d0 100644
--- a/src/locales/zh/commands.json
+++ b/src/locales/zh/commands.json
@@ -171,10 +171,10 @@
     "label": "自定义节点（测试版）"
   },
   "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
-    "label": "自訂節點（舊版）"
+    "label": "自定义节点（旧版）"
   },
   "Comfy_Manager_ShowLegacyManagerMenu": {
-    "label": "管理員選單（舊版）"
+    "label": "管理员菜单（旧版）"
   },
   "Comfy_Manager_ShowMissingPacks": {
     "label": "安装缺失的包"
@@ -279,13 +279,13 @@
     "label": "切换日志底部面板"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-essentials": {
-    "label": "切換基本下方面板"
+    "label": "切换基本下方面板"
   },
   "Workspace_ToggleBottomPanelTab_shortcuts-view-controls": {
-    "label": "切換檢視控制底部面板"
+    "label": "切换检视控制底部面板"
   },
   "Workspace_ToggleBottomPanel_Shortcuts": {
-    "label": "顯示快捷鍵對話框"
+    "label": "显示快捷键对话框"
   },
   "Workspace_ToggleFocusMode": {
     "label": "切换焦点模式"
diff --git a/src/platform/assets/components/Media3DBottom.vue b/src/platform/assets/components/Media3DBottom.vue
new file mode 100644
index 000000000..4d3c15c0b
--- /dev/null
+++ b/src/platform/assets/components/Media3DBottom.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col items-center gap-1">
+    <h3
+      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      :title="asset.name"
+    >
+      {{ fileName }}
+    </h3>
+    <div class="flex items-center gap-2 text-xs text-zinc-400">
+      <span>{{ formatSize(asset.size) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
+
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+
+const { asset } = defineProps<{
+  asset: AssetMeta
+}>()
+
+const fileName = computed(() => {
+  return getFilenameDetails(asset.name).filename
+})
+</script>
diff --git a/src/platform/assets/components/Media3DTop.vue b/src/platform/assets/components/Media3DTop.vue
new file mode 100644
index 000000000..535e5de6c
--- /dev/null
+++ b/src/platform/assets/components/Media3DTop.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="relative h-full w-full overflow-hidden rounded">
+    <div
+      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+    >
+      <i
+        class="icon-[lucide--box] text-3xl text-zinc-600 dark-theme:text-zinc-200"
+      />
+      <span class="text-zinc-600 dark-theme:text-zinc-200">{{
+        $t('3D Model')
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/platform/assets/components/MediaAssetActions.vue b/src/platform/assets/components/MediaAssetActions.vue
new file mode 100644
index 000000000..73144d4d2
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetActions.vue
@@ -0,0 +1,50 @@
+<template>
+  <IconGroup>
+    <IconButton size="sm" @click="handleDelete">
+      <i class="icon-[lucide--trash-2] size-4" />
+    </IconButton>
+    <IconButton size="sm" @click="handleDownload">
+      <i class="icon-[lucide--download] size-4" />
+    </IconButton>
+    <MoreButton
+      size="sm"
+      @menu-opened="emit('menuStateChanged', true)"
+      @menu-closed="emit('menuStateChanged', false)"
+    >
+      <template #default="{ close }">
+        <MediaAssetMoreMenu :close="close" />
+      </template>
+    </MoreButton>
+  </IconGroup>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconGroup from '@/components/button/IconGroup.vue'
+import MoreButton from '@/components/button/MoreButton.vue'
+
+import { useMediaAssetActions } from '../composables/useMediaAssetActions'
+import { MediaAssetKey } from '../schemas/mediaAssetSchema'
+import MediaAssetMoreMenu from './MediaAssetMoreMenu.vue'
+
+const emit = defineEmits<{
+  menuStateChanged: [isOpen: boolean]
+}>()
+
+const { asset } = inject(MediaAssetKey)!
+const actions = useMediaAssetActions()
+
+const handleDelete = () => {
+  if (asset.value) {
+    actions.deleteAsset(asset.value.id)
+  }
+}
+
+const handleDownload = () => {
+  if (asset.value) {
+    actions.downloadAsset(asset.value.id)
+  }
+}
+</script>
diff --git a/src/platform/assets/components/MediaAssetButtonDivider.vue b/src/platform/assets/components/MediaAssetButtonDivider.vue
new file mode 100644
index 000000000..d395ca099
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetButtonDivider.vue
@@ -0,0 +1,4 @@
+<template>
+  <div class="h-[1px] bg-neutral-200 dark-theme:bg-neutral-700"></div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/platform/assets/components/MediaAssetCard.stories.ts b/src/platform/assets/components/MediaAssetCard.stories.ts
new file mode 100644
index 000000000..231b86a9b
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetCard.stories.ts
@@ -0,0 +1,339 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+
+import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaAssetCard from './MediaAssetCard.vue'
+
+const meta: Meta<typeof MediaAssetCard> = {
+  title: 'Platform/Assets/MediaAssetCard',
+  component: MediaAssetCard,
+  decorators: [
+    () => ({
+      components: { ResultGallery },
+      setup() {
+        const galleryStore = useMediaAssetGalleryStore()
+        return { galleryStore }
+      },
+      template: `
+        <div>
+          <story />
+          <ResultGallery 
+            v-model:active-index="galleryStore.activeIndex"
+            :all-gallery-items="galleryStore.items"
+          />
+        </div>
+      `
+    })
+  ],
+  argTypes: {
+    context: {
+      control: 'select',
+      options: ['input', 'output']
+    },
+    loading: {
+      control: 'boolean'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Public sample media URLs
+const SAMPLE_MEDIA = {
+  image1: 'https://i.imgur.com/OB0y6MR.jpg',
+  image2: 'https://i.imgur.com/CzXTtJV.jpg',
+  image3: 'https://farm9.staticflickr.com/8505/8441256181_4e98d8bff5_z_d.jpg',
+  video:
+    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+  videoThumbnail:
+    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+  audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
+}
+
+const sampleAsset: AssetMeta = {
+  id: 'asset-1',
+  name: 'sample-image.png',
+  kind: 'image',
+  duration: 3345,
+  size: 2048576,
+  created_at: Date.now().toString(),
+  src: SAMPLE_MEDIA.image1,
+  dimensions: {
+    width: 1920,
+    height: 1080
+  },
+  tags: []
+}
+
+export const ImageAsset: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'output', outputCount: 3 },
+    asset: sampleAsset,
+    loading: false
+  }
+}
+
+export const VideoAsset: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'input' },
+    asset: {
+      ...sampleAsset,
+      id: 'asset-2',
+      name: 'Big_Buck_Bunny.mp4',
+      kind: 'video',
+      size: 10485760,
+      duration: 13425,
+      preview_url: SAMPLE_MEDIA.videoThumbnail, // Poster image
+      src: SAMPLE_MEDIA.video, // Actual video file
+      dimensions: {
+        width: 1280,
+        height: 720
+      }
+    }
+  }
+}
+
+export const Model3DAsset: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'input' },
+    asset: {
+      ...sampleAsset,
+      id: 'asset-3',
+      name: 'Asset-3d-model.glb',
+      kind: '3D',
+      size: 7340032,
+      src: '',
+      dimensions: undefined,
+      duration: 18023
+    }
+  }
+}
+
+export const AudioAsset: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'input' },
+    asset: {
+      ...sampleAsset,
+      id: 'asset-3',
+      name: 'SoundHelix-Song.mp3',
+      kind: 'audio',
+      size: 5242880,
+      src: SAMPLE_MEDIA.audio,
+      dimensions: undefined,
+      duration: 23180
+    }
+  }
+}
+
+export const LoadingState: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'input' },
+    asset: sampleAsset,
+    loading: true
+  }
+}
+
+export const LongFileName: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'input' },
+    asset: {
+      ...sampleAsset,
+      name: 'very-long-file-name-that-should-be-truncated-in-the-ui-to-prevent-overflow.png'
+    }
+  }
+}
+
+export const SelectedState: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'output', outputCount: 2 },
+    asset: sampleAsset,
+    selected: true
+  }
+}
+
+export const WebMVideo: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'input' },
+    asset: {
+      id: 'asset-webm',
+      name: 'animated-clip.webm',
+      kind: 'video',
+      size: 3145728,
+      created_at: Date.now().toString(),
+      preview_url: SAMPLE_MEDIA.image1, // Poster image
+      src: 'https://www.w3schools.com/html/movie.mp4', // Actual video
+      duration: 620,
+      dimensions: {
+        width: 640,
+        height: 360
+      },
+      tags: []
+    }
+  }
+}
+
+export const GifAnimation: Story = {
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 280px;"><story /></div>'
+    })
+  ],
+  args: {
+    context: { type: 'input' },
+    asset: {
+      id: 'asset-gif',
+      name: 'animation.gif',
+      kind: 'image',
+      size: 1572864,
+      duration: 1345,
+      created_at: Date.now().toString(),
+      src: 'https://media.giphy.com/media/3o7aCTPPm4OHfRLSH6/giphy.gif',
+      dimensions: {
+        width: 480,
+        height: 270
+      },
+      tags: []
+    }
+  }
+}
+
+export const GridLayout: Story = {
+  render: () => ({
+    components: { MediaAssetCard },
+    setup() {
+      const assets: AssetMeta[] = [
+        {
+          id: 'grid-1',
+          name: 'image-file.jpg',
+          kind: 'image',
+          size: 2097152,
+          duration: 4500,
+          created_at: Date.now().toString(),
+          src: SAMPLE_MEDIA.image1,
+          dimensions: { width: 1920, height: 1080 },
+          tags: []
+        },
+        {
+          id: 'grid-2',
+          name: 'image-file.jpg',
+          kind: 'image',
+          size: 2097152,
+          duration: 4500,
+          created_at: Date.now().toString(),
+          src: SAMPLE_MEDIA.image2,
+          dimensions: { width: 1920, height: 1080 },
+          tags: []
+        },
+        {
+          id: 'grid-3',
+          name: 'video-file.mp4',
+          kind: 'video',
+          size: 10485760,
+          duration: 13425,
+          created_at: Date.now().toString(),
+          preview_url: SAMPLE_MEDIA.videoThumbnail, // Poster image
+          src: SAMPLE_MEDIA.video, // Actual video
+          dimensions: { width: 1280, height: 720 },
+          tags: []
+        },
+        {
+          id: 'grid-4',
+          name: 'audio-file.mp3',
+          kind: 'audio',
+          size: 5242880,
+          duration: 180,
+          created_at: Date.now().toString(),
+          src: SAMPLE_MEDIA.audio,
+          tags: []
+        },
+        {
+          id: 'grid-5',
+          name: 'animation.gif',
+          kind: 'image',
+          size: 3145728,
+          duration: 1345,
+          created_at: Date.now().toString(),
+          src: 'https://media.giphy.com/media/l0HlNaQ6gWfllcjDO/giphy.gif',
+          dimensions: { width: 480, height: 360 },
+          tags: []
+        },
+        {
+          id: 'grid-6',
+          name: 'Asset-3d-model.glb',
+          kind: '3D',
+          size: 7340032,
+          src: '',
+          dimensions: undefined,
+          duration: 18023,
+          created_at: Date.now().toString(),
+          tags: []
+        },
+        {
+          id: 'grid-7',
+          name: 'image-file.jpg',
+          kind: 'image',
+          size: 2097152,
+          duration: 4500,
+          created_at: Date.now().toString(),
+          src: SAMPLE_MEDIA.image3,
+          dimensions: { width: 1920, height: 1080 },
+          tags: []
+        }
+      ]
+      return { assets }
+    },
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 16px;">
+        <MediaAssetCard
+          v-for="asset in assets"
+          :key="asset.id"
+          :context="{ type: Math.random() > 0.5 ? 'input' : 'output', outputCount: Math.floor(Math.random() * 5) }"
+          :asset="asset"
+        />
+      </div>
+    `
+  })
+}
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
new file mode 100644
index 000000000..1681dcf3e
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -0,0 +1,278 @@
+<template>
+  <CardContainer
+    ref="cardContainerRef"
+    role="button"
+    :aria-label="
+      asset ? `${asset.name} - ${asset.kind} asset` : 'Loading asset'
+    "
+    :tabindex="loading ? -1 : 0"
+    size="mini"
+    variant="ghost"
+    rounded="lg"
+    :class="containerClasses"
+    @click="handleCardClick"
+    @keydown.enter="handleCardClick"
+    @keydown.space.prevent="handleCardClick"
+  >
+    <template #top>
+      <CardTop
+        ratio="square"
+        :bottom-left-class="durationChipClasses"
+        :bottom-right-class="durationChipClasses"
+      >
+        <!-- Loading State -->
+        <template v-if="loading">
+          <div
+            class="h-full w-full animate-pulse rounded-lg bg-zinc-200 dark-theme:bg-zinc-700"
+          />
+        </template>
+
+        <!-- Content based on asset type -->
+        <template v-else-if="asset">
+          <component
+            :is="getTopComponent(asset.kind)"
+            :asset="asset"
+            :context="context"
+            @view="handleZoomClick"
+            @download="actions.downloadAsset(asset!.id)"
+            @play="actions.playAsset(asset!.id)"
+            @video-playing-state-changed="isVideoPlaying = $event"
+            @video-controls-changed="showVideoControls = $event"
+          />
+        </template>
+
+        <!-- Actions overlay (top-left) - show on hover or when menu is open -->
+        <template v-if="showActionsOverlay" #top-left>
+          <MediaAssetActions
+            @menu-state-changed="isMenuOpen = $event"
+            @mouseenter="handleOverlayMouseEnter"
+            @mouseleave="handleOverlayMouseLeave"
+          />
+        </template>
+
+        <!-- Zoom button (top-right) - show on hover for all media types -->
+        <template v-if="showZoomOverlay" #top-right>
+          <IconButton
+            size="sm"
+            @click.stop="handleZoomClick"
+            @mouseenter="handleOverlayMouseEnter"
+            @mouseleave="handleOverlayMouseLeave"
+          >
+            <i class="icon-[lucide--zoom-in] size-4" />
+          </IconButton>
+        </template>
+
+        <!-- Duration/Format chips (bottom-left) - show on hover even when playing -->
+        <template v-if="showDurationChips" #bottom-left>
+          <div
+            class="flex flex-wrap items-center gap-1"
+            @mouseenter="handleOverlayMouseEnter"
+            @mouseleave="handleOverlayMouseLeave"
+          >
+            <SquareChip variant="light" :label="formattedDuration" />
+            <SquareChip v-if="fileFormat" variant="light" :label="fileFormat" />
+          </div>
+        </template>
+
+        <!-- Output count (bottom-right) - show on hover even when playing -->
+        <template v-if="showOutputCount" #bottom-right>
+          <IconTextButton
+            type="secondary"
+            size="sm"
+            :label="context?.outputCount?.toString() ?? '0'"
+            @click.stop="actions.openMoreOutputs(asset?.id || '')"
+            @mouseenter="handleOverlayMouseEnter"
+            @mouseleave="handleOverlayMouseLeave"
+          >
+            <template #icon>
+              <i class="icon-[lucide--layers] size-4" />
+            </template>
+          </IconTextButton>
+        </template>
+      </CardTop>
+    </template>
+
+    <template #bottom>
+      <CardBottom>
+        <!-- Loading State -->
+        <template v-if="loading">
+          <div class="flex flex-col items-center justify-between gap-1">
+            <div
+              class="h-4 w-2/3 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
+            />
+            <div
+              class="h-3 w-1/2 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
+            />
+          </div>
+        </template>
+
+        <!-- Content based on asset type -->
+        <template v-else-if="asset">
+          <component
+            :is="getBottomComponent(asset.kind)"
+            :asset="asset"
+            :context="context"
+          />
+        </template>
+      </CardBottom>
+    </template>
+  </CardContainer>
+</template>
+
+<script setup lang="ts">
+import { useElementHover } from '@vueuse/core'
+import { computed, defineAsyncComponent, provide, ref, toRef } from 'vue'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import CardBottom from '@/components/card/CardBottom.vue'
+import CardContainer from '@/components/card/CardContainer.vue'
+import CardTop from '@/components/card/CardTop.vue'
+import SquareChip from '@/components/chip/SquareChip.vue'
+import { formatDuration } from '@/utils/formatUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+import { useMediaAssetActions } from '../composables/useMediaAssetActions'
+import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
+import type {
+  AssetContext,
+  AssetMeta,
+  MediaKind
+} from '../schemas/mediaAssetSchema'
+import { MediaAssetKey } from '../schemas/mediaAssetSchema'
+import MediaAssetActions from './MediaAssetActions.vue'
+
+const mediaComponents = {
+  top: {
+    video: defineAsyncComponent(() => import('./MediaVideoTop.vue')),
+    audio: defineAsyncComponent(() => import('./MediaAudioTop.vue')),
+    image: defineAsyncComponent(() => import('./MediaImageTop.vue')),
+    '3D': defineAsyncComponent(() => import('./Media3DTop.vue'))
+  },
+  bottom: {
+    video: defineAsyncComponent(() => import('./MediaVideoBottom.vue')),
+    audio: defineAsyncComponent(() => import('./MediaAudioBottom.vue')),
+    image: defineAsyncComponent(() => import('./MediaImageBottom.vue')),
+    '3D': defineAsyncComponent(() => import('./Media3DBottom.vue'))
+  }
+}
+
+function getTopComponent(kind: MediaKind) {
+  return mediaComponents.top[kind] || mediaComponents.top.image
+}
+
+function getBottomComponent(kind: MediaKind) {
+  return mediaComponents.bottom[kind] || mediaComponents.bottom.image
+}
+
+const { context, asset, loading, selected } = defineProps<{
+  context: AssetContext
+  asset?: AssetMeta
+  loading?: boolean
+  selected?: boolean
+}>()
+
+const cardContainerRef = ref<HTMLElement>()
+
+const isVideoPlaying = ref(false)
+const isMenuOpen = ref(false)
+const showVideoControls = ref(false)
+const isOverlayHovered = ref(false)
+
+const isHovered = useElementHover(cardContainerRef)
+
+const actions = useMediaAssetActions()
+const galleryStore = useMediaAssetGalleryStore()
+
+provide(MediaAssetKey, {
+  asset: toRef(() => asset),
+  context: toRef(() => context),
+  isVideoPlaying,
+  showVideoControls
+})
+
+const containerClasses = computed(() =>
+  cn(
+    'gap-1',
+    selected
+      ? 'border-3 border-zinc-900 dark-theme:border-white bg-zinc-200 dark-theme:bg-zinc-700'
+      : 'hover:bg-zinc-100 dark-theme:hover:bg-zinc-800'
+  )
+)
+
+const formattedDuration = computed(() => {
+  if (!asset?.duration) return ''
+  return formatDuration(asset.duration)
+})
+
+const fileFormat = computed(() => {
+  if (!asset?.name) return ''
+  const parts = asset.name.split('.')
+  return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : ''
+})
+
+const durationChipClasses = computed(() => {
+  if (asset?.kind === 'audio') {
+    return '-translate-y-11'
+  }
+  if (asset?.kind === 'video' && showVideoControls.value) {
+    return '-translate-y-16'
+  }
+  return ''
+})
+
+const isCardOrOverlayHovered = computed(
+  () => isHovered.value || isOverlayHovered.value || isMenuOpen.value
+)
+
+const showHoverActions = computed(
+  () => !loading && !!asset && isCardOrOverlayHovered.value
+)
+
+const showActionsOverlay = computed(
+  () =>
+    showHoverActions.value &&
+    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
+)
+
+const showZoomOverlay = computed(
+  () =>
+    showHoverActions.value &&
+    asset?.kind !== '3D' &&
+    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
+)
+
+const showDurationChips = computed(
+  () =>
+    !loading &&
+    asset?.duration &&
+    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
+)
+
+const showOutputCount = computed(
+  () =>
+    !loading &&
+    context?.outputCount &&
+    (!isVideoPlaying.value || isCardOrOverlayHovered.value)
+)
+
+const handleCardClick = () => {
+  if (asset) {
+    actions.selectAsset(asset)
+  }
+}
+
+const handleOverlayMouseEnter = () => {
+  isOverlayHovered.value = true
+}
+
+const handleOverlayMouseLeave = () => {
+  isOverlayHovered.value = false
+}
+
+const handleZoomClick = () => {
+  if (asset) {
+    galleryStore.openSingle(asset)
+  }
+}
+</script>
diff --git a/src/platform/assets/components/MediaAssetMoreMenu.vue b/src/platform/assets/components/MediaAssetMoreMenu.vue
new file mode 100644
index 000000000..62f793aa2
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetMoreMenu.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="flex flex-col">
+    <IconTextButton
+      v-if="asset?.kind !== '3D'"
+      type="transparent"
+      class="dark-theme:text-white"
+      label="Inspect asset"
+      @click="handleInspect"
+    >
+      <template #icon>
+        <i class="icon-[lucide--zoom-in] size-4" />
+      </template>
+    </IconTextButton>
+
+    <IconTextButton
+      type="transparent"
+      class="dark-theme:text-white"
+      label="Add to current workflow"
+      @click="handleAddToWorkflow"
+    >
+      <template #icon>
+        <i class="icon-[comfy--node] size-4" />
+      </template>
+    </IconTextButton>
+
+    <IconTextButton
+      type="transparent"
+      class="dark-theme:text-white"
+      label="Download"
+      @click="handleDownload"
+    >
+      <template #icon>
+        <i class="icon-[lucide--download] size-4" />
+      </template>
+    </IconTextButton>
+
+    <MediaAssetButtonDivider />
+
+    <IconTextButton
+      v-if="showWorkflowOptions"
+      type="transparent"
+      class="dark-theme:text-white"
+      label="Open as workflow in new tab"
+      @click="handleOpenWorkflow"
+    >
+      <template #icon>
+        <i class="icon-[comfy--workflow] size-4" />
+      </template>
+    </IconTextButton>
+
+    <IconTextButton
+      v-if="showWorkflowOptions"
+      type="transparent"
+      class="dark-theme:text-white"
+      label="Export workflow"
+      @click="handleExportWorkflow"
+    >
+      <template #icon>
+        <i class="icon-[lucide--file-output] size-4" />
+      </template>
+    </IconTextButton>
+
+    <MediaAssetButtonDivider v-if="showWorkflowOptions" />
+
+    <IconTextButton
+      type="transparent"
+      class="dark-theme:text-white"
+      label="Copy job ID"
+      @click="handleCopyJobId"
+    >
+      <template #icon>
+        <i class="icon-[lucide--copy] size-4" />
+      </template>
+    </IconTextButton>
+
+    <MediaAssetButtonDivider />
+
+    <IconTextButton
+      type="transparent"
+      class="dark-theme:text-white"
+      label="Delete"
+      @click="handleDelete"
+    >
+      <template #icon>
+        <i class="icon-[lucide--trash-2] size-4" />
+      </template>
+    </IconTextButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+import IconTextButton from '@/components/button/IconTextButton.vue'
+
+import { useMediaAssetActions } from '../composables/useMediaAssetActions'
+import { useMediaAssetGalleryStore } from '../composables/useMediaAssetGalleryStore'
+import { MediaAssetKey } from '../schemas/mediaAssetSchema'
+import MediaAssetButtonDivider from './MediaAssetButtonDivider.vue'
+
+const { close } = defineProps<{
+  close: () => void
+}>()
+
+const { asset, context } = inject(MediaAssetKey)!
+const actions = useMediaAssetActions()
+const galleryStore = useMediaAssetGalleryStore()
+
+const showWorkflowOptions = computed(() => context.value.type)
+
+const handleInspect = () => {
+  if (asset.value) {
+    galleryStore.openSingle(asset.value)
+  }
+  close()
+}
+
+const handleAddToWorkflow = () => {
+  if (asset.value) {
+    actions.addWorkflow(asset.value.id)
+  }
+  close()
+}
+
+const handleDownload = () => {
+  if (asset.value) {
+    actions.downloadAsset(asset.value.id)
+  }
+  close()
+}
+
+const handleOpenWorkflow = () => {
+  if (asset.value) {
+    actions.openWorkflow(asset.value.id)
+  }
+  close()
+}
+
+const handleExportWorkflow = () => {
+  if (asset.value) {
+    actions.exportWorkflow(asset.value.id)
+  }
+  close()
+}
+
+const handleCopyJobId = () => {
+  if (asset.value) {
+    actions.copyAssetUrl(asset.value.id)
+  }
+  close()
+}
+
+const handleDelete = () => {
+  if (asset.value) {
+    actions.deleteAsset(asset.value.id)
+  }
+  close()
+}
+</script>
diff --git a/src/platform/assets/components/MediaAudioBottom.vue b/src/platform/assets/components/MediaAudioBottom.vue
new file mode 100644
index 000000000..9b9e103fa
--- /dev/null
+++ b/src/platform/assets/components/MediaAudioBottom.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col items-center gap-1">
+    <h3
+      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      :title="asset.name"
+    >
+      {{ fileName }}
+    </h3>
+    <div class="flex items-center gap-2 text-xs text-zinc-400">
+      <span>{{ formatSize(asset.size) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
+
+import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+
+const { asset } = defineProps<{
+  asset: AssetMeta
+  context: AssetContext
+}>()
+
+const fileName = computed(() => {
+  return getFilenameDetails(asset.name).filename
+})
+</script>
diff --git a/src/platform/assets/components/MediaAudioTop.vue b/src/platform/assets/components/MediaAudioTop.vue
new file mode 100644
index 000000000..038aaf290
--- /dev/null
+++ b/src/platform/assets/components/MediaAudioTop.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="relative h-full w-full overflow-hidden rounded">
+    <div
+      class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+    >
+      <i
+        class="icon-[lucide--music] text-3xl text-zinc-600 dark-theme:text-zinc-200"
+      />
+      <span class="text-zinc-600 dark-theme:text-zinc-200">{{
+        $t('Audio')
+      }}</span>
+    </div>
+    <audio
+      controls
+      class="absolute bottom-0 left-0 w-full p-2"
+      :src="asset.src"
+      @click.stop
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+
+const { asset } = defineProps<{
+  asset: AssetMeta
+}>()
+</script>
diff --git a/src/platform/assets/components/MediaImageBottom.vue b/src/platform/assets/components/MediaImageBottom.vue
new file mode 100644
index 000000000..295c5bd6e
--- /dev/null
+++ b/src/platform/assets/components/MediaImageBottom.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col items-center gap-1">
+    <h3
+      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      :title="asset.name"
+    >
+      {{ fileName }}
+    </h3>
+    <div class="flex items-center text-xs text-zinc-400">
+      <span>{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { getFilenameDetails } from '@/utils/formatUtil'
+
+import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+
+const { asset } = defineProps<{
+  asset: AssetMeta
+  context: AssetContext
+}>()
+
+const fileName = computed(() => {
+  return getFilenameDetails(asset.name).filename
+})
+</script>
diff --git a/src/platform/assets/components/MediaImageTop.vue b/src/platform/assets/components/MediaImageTop.vue
new file mode 100644
index 000000000..40adba435
--- /dev/null
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="relative h-full w-full overflow-hidden rounded">
+    <LazyImage
+      v-if="asset.src"
+      :src="asset.src"
+      :alt="asset.name"
+      :container-class="'aspect-square'"
+      :image-class="'w-full h-full object-cover'"
+    />
+    <div
+      v-else
+      class="flex h-full w-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
+    >
+      <i class="pi pi-image text-3xl text-gray-400" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LazyImage from '@/components/common/LazyImage.vue'
+
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+
+const { asset } = defineProps<{
+  asset: AssetMeta
+}>()
+</script>
diff --git a/src/platform/assets/components/MediaVideoBottom.vue b/src/platform/assets/components/MediaVideoBottom.vue
new file mode 100644
index 000000000..295c5bd6e
--- /dev/null
+++ b/src/platform/assets/components/MediaVideoBottom.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col items-center gap-1">
+    <h3
+      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+      :title="asset.name"
+    >
+      {{ fileName }}
+    </h3>
+    <div class="flex items-center text-xs text-zinc-400">
+      <span>{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { getFilenameDetails } from '@/utils/formatUtil'
+
+import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+
+const { asset } = defineProps<{
+  asset: AssetMeta
+  context: AssetContext
+}>()
+
+const fileName = computed(() => {
+  return getFilenameDetails(asset.name).filename
+})
+</script>
diff --git a/src/platform/assets/components/MediaVideoTop.vue b/src/platform/assets/components/MediaVideoTop.vue
new file mode 100644
index 000000000..2477de99d
--- /dev/null
+++ b/src/platform/assets/components/MediaVideoTop.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="relative h-full w-full overflow-hidden rounded bg-black"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <video
+      ref="videoRef"
+      :controls="shouldShowControls"
+      preload="none"
+      :poster="asset.preview_url"
+      class="relative h-full w-full object-contain"
+      @click.stop
+      @play="onVideoPlay"
+      @pause="onVideoPause"
+      @ended="onVideoEnded"
+    >
+      <source :src="asset.src || ''" />
+    </video>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+
+import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+
+const { asset } = defineProps<{
+  asset: AssetMeta
+  context: AssetContext
+}>()
+
+const emit = defineEmits<{
+  play: [assetId: string]
+  videoPlayingStateChanged: [isPlaying: boolean]
+  videoControlsChanged: [showControls: boolean]
+}>()
+
+const videoRef = ref<HTMLVideoElement>()
+const isHovered = ref(false)
+const isPlaying = ref(false)
+
+// Always show controls when not playing, hide/show based on hover when playing
+const shouldShowControls = computed(() => !isPlaying.value || isHovered.value)
+
+watch(shouldShowControls, (controlsVisible) => {
+  emit('videoControlsChanged', controlsVisible)
+})
+
+onMounted(() => {
+  emit('videoControlsChanged', shouldShowControls.value)
+})
+
+const onVideoPlay = () => {
+  isPlaying.value = true
+  emit('videoPlayingStateChanged', true)
+}
+
+const onVideoPause = () => {
+  isPlaying.value = false
+  emit('videoPlayingStateChanged', false)
+}
+
+const onVideoEnded = () => {
+  isPlaying.value = false
+  emit('videoPlayingStateChanged', false)
+}
+</script>
diff --git a/src/platform/assets/composables/useMediaAssetActions.ts b/src/platform/assets/composables/useMediaAssetActions.ts
new file mode 100644
index 000000000..8a3166393
--- /dev/null
+++ b/src/platform/assets/composables/useMediaAssetActions.ts
@@ -0,0 +1,57 @@
+/* eslint-disable no-console */
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+
+export function useMediaAssetActions() {
+  const selectAsset = (asset: AssetMeta) => {
+    console.log('Asset selected:', asset)
+  }
+
+  const downloadAsset = (assetId: string) => {
+    console.log('Downloading asset:', assetId)
+  }
+
+  const deleteAsset = (assetId: string) => {
+    console.log('Deleting asset:', assetId)
+  }
+
+  const playAsset = (assetId: string) => {
+    console.log('Playing asset:', assetId)
+  }
+
+  const copyAssetUrl = (assetId: string) => {
+    console.log('Copy asset URL:', assetId)
+  }
+
+  const copyJobId = (jobId: string) => {
+    console.log('Copy job ID:', jobId)
+  }
+
+  const addWorkflow = (assetId: string) => {
+    console.log('Adding asset to workflow:', assetId)
+  }
+
+  const openWorkflow = (assetId: string) => {
+    console.log('Opening workflow for asset:', assetId)
+  }
+
+  const exportWorkflow = (assetId: string) => {
+    console.log('Exporting workflow for asset:', assetId)
+  }
+
+  const openMoreOutputs = (assetId: string) => {
+    console.log('Opening more outputs for asset:', assetId)
+  }
+
+  return {
+    selectAsset,
+    downloadAsset,
+    deleteAsset,
+    playAsset,
+    copyAssetUrl,
+    copyJobId,
+    addWorkflow,
+    openWorkflow,
+    exportWorkflow,
+    openMoreOutputs
+  }
+}
diff --git a/src/platform/assets/composables/useMediaAssetGalleryStore.test.ts b/src/platform/assets/composables/useMediaAssetGalleryStore.test.ts
new file mode 100644
index 000000000..6897e7b0d
--- /dev/null
+++ b/src/platform/assets/composables/useMediaAssetGalleryStore.test.ts
@@ -0,0 +1,179 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ResultItemImpl } from '@/stores/queueStore'
+
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import { useMediaAssetGalleryStore } from './useMediaAssetGalleryStore'
+
+vi.mock('@/stores/queueStore', () => ({
+  ResultItemImpl: vi.fn().mockImplementation((data) => ({
+    ...data,
+    url: ''
+  }))
+}))
+
+describe('useMediaAssetGalleryStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('openSingle', () => {
+    it('should convert AssetMeta to ResultItemImpl format', () => {
+      const store = useMediaAssetGalleryStore()
+      const mockAsset: AssetMeta = {
+        id: 'test-1',
+        name: 'test-image.png',
+        kind: 'image',
+        src: 'https://example.com/image.png',
+        size: 1024,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+
+      store.openSingle(mockAsset)
+
+      expect(ResultItemImpl).toHaveBeenCalledWith({
+        filename: 'test-image.png',
+        subfolder: '',
+        type: 'output',
+        nodeId: '0',
+        mediaType: 'images'
+      })
+      expect(store.items).toHaveLength(1)
+      expect(store.activeIndex).toBe(0)
+    })
+
+    it('should set correct mediaType for video assets', () => {
+      const store = useMediaAssetGalleryStore()
+      const mockVideoAsset: AssetMeta = {
+        id: 'test-2',
+        name: 'test-video.mp4',
+        kind: 'video',
+        src: 'https://example.com/video.mp4',
+        size: 2048,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+
+      store.openSingle(mockVideoAsset)
+
+      expect(ResultItemImpl).toHaveBeenCalledWith(
+        expect.objectContaining({
+          filename: 'test-video.mp4',
+          mediaType: 'video'
+        })
+      )
+    })
+
+    it('should set correct mediaType for audio assets', () => {
+      const store = useMediaAssetGalleryStore()
+      const mockAudioAsset: AssetMeta = {
+        id: 'test-3',
+        name: 'test-audio.mp3',
+        kind: 'audio',
+        src: 'https://example.com/audio.mp3',
+        size: 512,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+
+      store.openSingle(mockAudioAsset)
+
+      expect(ResultItemImpl).toHaveBeenCalledWith(
+        expect.objectContaining({
+          filename: 'test-audio.mp3',
+          mediaType: 'audio'
+        })
+      )
+    })
+
+    it('should override url getter with asset.src', () => {
+      const store = useMediaAssetGalleryStore()
+      const mockAsset: AssetMeta = {
+        id: 'test-4',
+        name: 'test.png',
+        kind: 'image',
+        src: 'https://example.com/custom-url.png',
+        size: 1024,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+
+      store.openSingle(mockAsset)
+
+      const resultItem = store.items[0]
+      expect(resultItem.url).toBe('https://example.com/custom-url.png')
+    })
+
+    it('should handle assets without src gracefully', () => {
+      const store = useMediaAssetGalleryStore()
+      const mockAsset: AssetMeta = {
+        id: 'test-5',
+        name: 'no-src.png',
+        kind: 'image',
+        src: '',
+        size: 1024,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+
+      store.openSingle(mockAsset)
+
+      const resultItem = store.items[0]
+      expect(resultItem.url).toBe('')
+    })
+
+    it('should update activeIndex and items when called multiple times', () => {
+      const store = useMediaAssetGalleryStore()
+      const asset1: AssetMeta = {
+        id: '1',
+        name: 'first.png',
+        kind: 'image',
+        src: 'url1',
+        size: 100,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+      const asset2: AssetMeta = {
+        id: '2',
+        name: 'second.png',
+        kind: 'image',
+        src: 'url2',
+        size: 200,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+
+      store.openSingle(asset1)
+      expect(store.items).toHaveLength(1)
+      expect(store.items[0].filename).toBe('first.png')
+
+      store.openSingle(asset2)
+      expect(store.items).toHaveLength(1)
+      expect(store.items[0].filename).toBe('second.png')
+      expect(store.activeIndex).toBe(0)
+    })
+  })
+
+  describe('close', () => {
+    it('should reset activeIndex to -1', () => {
+      const store = useMediaAssetGalleryStore()
+      const mockAsset: AssetMeta = {
+        id: 'test',
+        name: 'test.png',
+        kind: 'image',
+        src: 'test-url',
+        size: 1024,
+        tags: [],
+        created_at: '2025-01-01'
+      }
+
+      store.openSingle(mockAsset)
+      expect(store.activeIndex).toBe(0)
+
+      store.close()
+      expect(store.activeIndex).toBe(-1)
+    })
+  })
+})
diff --git a/src/platform/assets/composables/useMediaAssetGalleryStore.ts b/src/platform/assets/composables/useMediaAssetGalleryStore.ts
new file mode 100644
index 000000000..e7bd5d5c3
--- /dev/null
+++ b/src/platform/assets/composables/useMediaAssetGalleryStore.ts
@@ -0,0 +1,47 @@
+import { defineStore } from 'pinia'
+import { ref, shallowRef } from 'vue'
+
+import { ResultItemImpl } from '@/stores/queueStore'
+
+import type { AssetMeta } from '../schemas/mediaAssetSchema'
+
+export const useMediaAssetGalleryStore = defineStore(
+  'mediaAssetGallery',
+  () => {
+    const activeIndex = ref(-1)
+    const items = shallowRef<ResultItemImpl[]>([])
+
+    const close = () => {
+      activeIndex.value = -1
+    }
+
+    const openSingle = (asset: AssetMeta) => {
+      // Convert AssetMeta to ResultItemImpl format
+      const resultItem = new ResultItemImpl({
+        filename: asset.name,
+        subfolder: '',
+        type: 'output',
+        nodeId: '0',
+        mediaType: asset.kind === 'image' ? 'images' : asset.kind
+      })
+
+      // Override the url getter to use asset.src
+      Object.defineProperty(resultItem, 'url', {
+        get() {
+          return asset.src || ''
+        },
+        configurable: true
+      })
+
+      items.value = [resultItem]
+      activeIndex.value = 0
+    }
+
+    return {
+      activeIndex,
+      items,
+      close,
+      openSingle
+    }
+  }
+)
diff --git a/src/platform/assets/schemas/mediaAssetSchema.ts b/src/platform/assets/schemas/mediaAssetSchema.ts
new file mode 100644
index 000000000..d35dad6c5
--- /dev/null
+++ b/src/platform/assets/schemas/mediaAssetSchema.ts
@@ -0,0 +1,46 @@
+import type { InjectionKey, Ref } from 'vue'
+import { z } from 'zod'
+
+import { assetItemSchema } from './assetSchema'
+
+const zMediaKindSchema = z.enum(['video', 'audio', 'image', '3D'])
+export type MediaKind = z.infer<typeof zMediaKindSchema>
+
+const zDimensionsSchema = z.object({
+  width: z.number().positive(),
+  height: z.number().positive()
+})
+
+// Extend the base asset schema with media-specific fields
+const zMediaAssetDisplayItemSchema = assetItemSchema.extend({
+  // New required fields
+  kind: zMediaKindSchema,
+  src: z.string().url(),
+
+  // New optional fields
+  duration: z.number().nonnegative().optional(),
+  dimensions: zDimensionsSchema.optional(),
+  jobId: z.string().optional(),
+  isMulti: z.boolean().optional()
+})
+
+// Asset context schema
+const zAssetContextSchema = z.object({
+  type: z.enum(['input', 'output']),
+  outputCount: z.number().positive().optional() // Only for output context
+})
+
+// Export the inferred types
+export type AssetMeta = z.infer<typeof zMediaAssetDisplayItemSchema>
+export type AssetContext = z.infer<typeof zAssetContextSchema>
+
+// Injection key for MediaAsset provide/inject pattern
+interface MediaAssetProviderValue {
+  asset: Ref<AssetMeta | undefined>
+  context: Ref<AssetContext>
+  isVideoPlaying: Ref<boolean>
+  showVideoControls: Ref<boolean>
+}
+
+export const MediaAssetKey: InjectionKey<MediaAssetProviderValue> =
+  Symbol('mediaAsset')
diff --git a/src/platform/distribution/types.ts b/src/platform/distribution/types.ts
new file mode 100644
index 000000000..2ddeb1343
--- /dev/null
+++ b/src/platform/distribution/types.ts
@@ -0,0 +1,20 @@
+import { isElectron } from '@/utils/envUtil'
+
+/**
+ * Distribution types and compile-time constants for managing
+ * multi-distribution builds (Desktop, Localhost, Cloud)
+ */
+
+type Distribution = 'desktop' | 'localhost' | 'cloud'
+
+declare global {
+  const __DISTRIBUTION__: Distribution
+}
+
+/** Current distribution - replaced at compile time */
+const DISTRIBUTION: Distribution = __DISTRIBUTION__
+
+/** Distribution type checks */
+export const isDesktop = DISTRIBUTION === 'desktop' || isElectron() // TODO: replace with build var
+export const isCloud = DISTRIBUTION === 'cloud'
+// export const isLocalhost = !isDesktop && !isCloud
diff --git a/src/renderer/core/canvas/links/linkConnectorAdapter.ts b/src/renderer/core/canvas/links/linkConnectorAdapter.ts
index 0537bd91e..860d365f6 100644
--- a/src/renderer/core/canvas/links/linkConnectorAdapter.ts
+++ b/src/renderer/core/canvas/links/linkConnectorAdapter.ts
@@ -5,6 +5,7 @@ import type { LinkConnector } from '@/lib/litegraph/src/canvas/LinkConnector'
 import type { RenderLink } from '@/lib/litegraph/src/canvas/RenderLink'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { app } from '@/scripts/app'
+import { isSubgraph } from '@/utils/typeGuardUtil'
 
 // Keep one adapter per graph so rendering and interaction share state.
 const adapterByGraph = new WeakMap<LGraph, LinkConnectorAdapter>()
@@ -130,6 +131,15 @@ export class LinkConnectorAdapter {
 
   /** Drops moving links onto the canvas (no target). */
   dropOnCanvas(event: CanvasPointerEvent): void {
+    //Add extra check for connection to subgraphInput/subgraphOutput
+    if (isSubgraph(this.network)) {
+      const { canvasX, canvasY } = event
+      const ioNode = this.network.getIoNodeOnPos?.(canvasX, canvasY)
+      if (ioNode) {
+        this.linkConnector.dropOnIoNode(ioNode, event)
+        return
+      }
+    }
     this.linkConnector.dropOnNothing(event)
   }
 
diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index eb72d40de..12f8d8c13 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -2,7 +2,7 @@
   <div
     v-if="visible && initialized"
     ref="minimapRef"
-    class="minimap-main-container absolute right-2 bottom-[66px] z-1000 flex md:right-11"
+    class="minimap-main-container absolute right-2 bottom-[66px] z-1000 flex"
   >
     <MiniMapPanel
       v-if="showOptionsPanel"
@@ -17,11 +17,11 @@
 
     <div
       ref="containerRef"
-      class="litegraph-minimap relative"
+      class="litegraph-minimap relative bg-interface-panel-surface"
       :style="containerStyles"
     >
       <Button
-        class="absolute z-10"
+        class="absolute top-1 left-1 z-10 hover:bg-button-hover-surface!"
         size="small"
         text
         severity="secondary"
@@ -32,7 +32,7 @@
         </template>
       </Button>
       <Button
-        class="absolute right-0 z-10"
+        class="absolute top-1 right-1 z-10 hover:bg-button-hover-surface!"
         size="small"
         text
         severity="secondary"
@@ -45,7 +45,7 @@
       </Button>
 
       <hr
-        class="absolute top-5 h-px border-0 bg-node-component-border"
+        class="absolute top-7 h-px border-0 bg-node-component-border"
         :style="{
           width: containerStyles.width
         }"
diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
index 4f23ccc40..7cc9416de 100644
--- a/src/renderer/extensions/minimap/MiniMapPanel.vue
+++ b/src/renderer/extensions/minimap/MiniMapPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="minimap-panel mr-2 flex flex-col gap-3 p-3 text-sm"
+    class="minimap-panel mr-2 flex flex-col gap-2 bg-interface-panel-surface p-3 text-sm"
     :style="panelStyles"
   >
     <div class="flex items-center gap-2">
diff --git a/src/renderer/extensions/minimap/composables/useMinimapSettings.ts b/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
index cb5db2aa7..4b85be000 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
@@ -25,7 +25,7 @@ export function useMinimapSettings() {
     settingStore.get('Comfy.Minimap.RenderErrorState')
   )
 
-  const width = 250
+  const width = 253
   const height = 200
 
   // Theme-aware colors
@@ -36,16 +36,14 @@ export function useMinimapSettings() {
   const containerStyles = computed(() => ({
     width: `${width}px`,
     height: `${height}px`,
-    backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
-    border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
+    border: '1px solid var(--interface-stroke)',
     borderRadius: '8px'
   }))
 
   const panelStyles = computed(() => ({
     width: `210px`,
     height: `${height}px`,
-    backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
-    border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
+    border: '1px solid var(--interface-stroke)',
     borderRadius: '8px'
   }))
 
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index aa7c27100..52f7c8a0b 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -32,6 +32,7 @@
       <!-- Main Image -->
       <img
         v-else
+        ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
         class="block size-full object-contain"
@@ -118,6 +119,7 @@ import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { downloadFile } from '@/base/common/downloadUtil'
+import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
@@ -143,6 +145,8 @@ const actualDimensions = ref<string | null>(null)
 const imageError = ref(false)
 const isLoading = ref(false)
 
+const currentImageEl = ref<HTMLImageElement>()
+
 // Computed values
 const currentImageUrl = computed(() => props.imageUrls[currentIndex.value])
 const hasMultipleImages = computed(() => props.imageUrls.length > 1)
@@ -182,7 +186,18 @@ const handleImageError = () => {
   actualDimensions.value = null
 }
 
+// In vueNodes mode, we need to set them manually before opening the mask editor.
+const setupNodeForMaskEditor = () => {
+  if (!props.nodeId || !currentImageEl.value) return
+  const node = app.rootGraph?.getNodeById(props.nodeId)
+  if (!node) return
+  node.imageIndex = currentIndex.value
+  node.imgs = [currentImageEl.value]
+  app.canvas?.select(node)
+}
+
 const handleEditMask = () => {
+  setupNodeForMaskEditor()
   void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
 }
 
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index f739cea42..e6d1f8504 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -5,7 +5,7 @@
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="cn('-translate-x-1/2', errorClassesDot)"
+      :class="cn('-translate-x-1/2', 'w-3', errorClassesDot)"
       @pointerdown="onPointerDown"
     />
 
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 8054a7415..7ec7be296 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -19,9 +19,9 @@
         outlineClass,
         {
           'animate-pulse': executing,
-          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
+          'before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
             bypassed,
-          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:inset-0':
+          'before:rounded-2xl before:pointer-events-none before:absolute before:inset-0':
             muted,
           'will-change-transform': isDragging
         },
@@ -174,9 +174,6 @@ const {
 
 useVueElementTracking(() => nodeData.id, 'node')
 
-const { selectedNodeIds } = storeToRefs(useCanvasStore())
-
-// Inject transform state for coordinate conversion
 const transformState = inject(TransformStateKey)
 if (!transformState) {
   throw new Error(
@@ -184,16 +181,13 @@ if (!transformState) {
   )
 }
 
-// Computed selection state - only this node re-evaluates when its selection changes
+const { selectedNodeIds } = storeToRefs(useCanvasStore())
 const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
 })
 
-// Use execution state composable
 const nodeLocatorId = computed(() => getLocatorIdFromNodeData(nodeData))
 const { executing, progress } = useNodeExecutionState(nodeLocatorId)
-
-// Direct access to execution store for error state
 const executionStore = useExecutionStore()
 const hasExecutionError = computed(
   () => executionStore.lastExecutionErrorNodeId === nodeData.id
@@ -225,9 +219,16 @@ const nodeBodyBackgroundColor = computed(() => {
   )
 })
 
-const nodeOpacity = computed(
-  () => useSettingStore().get('Comfy.Node.Opacity') ?? 1
-)
+const nodeOpacity = computed(() => {
+  const globalOpacity = useSettingStore().get('Comfy.Node.Opacity') ?? 1
+
+  // For muted/bypassed nodes, apply the 0.5 multiplier on top of global opacity
+  if (bypassed.value || muted.value) {
+    return globalOpacity * 0.5
+  }
+
+  return globalOpacity
+})
 
 // Use canvas interactions for proper wheel event handling and pointer event capture control
 const { handleWheel, shouldHandleNodePointerEvents } = useCanvasInteractions()
@@ -319,10 +320,9 @@ const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(
 )
 
 const borderClass = computed(() => {
-  return (
-    (hasAnyError.value && 'border-error') ||
-    (executing.value && 'border-node-executing')
-  )
+  if (hasAnyError.value) return 'border-node-stroke-error'
+  if (executing.value) return 'border-node-stroke-executing'
+  return 'border-node-stroke'
 })
 
 const outlineClass = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 9685a2a9c..312c9300b 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -6,7 +6,7 @@
     v-else
     :class="
       cn(
-        'lg-node-widgets flex flex-col gap-2 pr-4',
+        'lg-node-widgets flex flex-col gap-2 pr-3',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index bc5be6bf7..a00e31c29 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -15,7 +15,7 @@
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      class="translate-x-1/2"
+      class="w-3 translate-x-1/2"
       @pointerdown="onPointerDown"
     />
   </div>
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
index 902c5a34e..618f992de 100644
--- a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
+++ b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
@@ -595,6 +595,13 @@ export function useSlotLinkInteraction({
       event.altKey &&
       !event.shiftKey
 
+    const shouldBatchDisconnectOutputLinks =
+      isOutputSlot &&
+      hasExistingOutputLink &&
+      ctrlOrMeta &&
+      event.altKey &&
+      !event.shiftKey
+
     const existingInputLink =
       isInputSlot && inputLinkId != null
         ? graph.getLink(inputLinkId)
@@ -604,6 +611,14 @@ export function useSlotLinkInteraction({
       resolvedNode.disconnectInput(index, true)
     }
 
+    if (shouldBatchDisconnectOutputLinks && resolvedNode) {
+      resolvedNode.disconnectOutput(index)
+      app.canvas?.setDirty(true, true)
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
+
     const baseDirection = isInputSlot
       ? inputSlot?.dir ?? LinkDirection.LEFT
       : outputSlot?.dir ?? LinkDirection.RIGHT
diff --git a/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts b/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
index 10905624c..136f26812 100644
--- a/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
+++ b/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
@@ -17,14 +17,17 @@ export const useNodeExecutionState = (
   nodeLocatorIdMaybe: MaybeRefOrGetter<string | undefined>
 ) => {
   const locatorId = computed(() => toValue(nodeLocatorIdMaybe) ?? '')
-  const { nodeLocationProgressStates } = storeToRefs(useExecutionStore())
+  const { nodeLocationProgressStates, isIdle } =
+    storeToRefs(useExecutionStore())
 
   const progressState = computed(() => {
     const id = locatorId.value
     return id ? nodeLocationProgressStates.value[id] : undefined
   })
 
-  const executing = computed(() => progressState.value?.state === 'running')
+  const executing = computed(
+    () => !isIdle.value && progressState.value?.state === 'running'
+  )
 
   const progress = computed(() => {
     const state = progressState.value
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 7a0ce4ff5..56666f833 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -3,7 +3,12 @@
     <label v-if="widget.name" class="text-sm opacity-80">{{
       widget.name
     }}</label>
-    <Button v-bind="filteredProps" size="small" @click="handleClick" />
+    <Button
+      v-bind="filteredProps"
+      :aria-label="widget.name || widget.label"
+      size="small"
+      @click="handleClick"
+    />
   </div>
 </template>
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index 77ec2fc87..afa290e48 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -3,7 +3,12 @@
     <div
       class="max-h-[48rem] rounded border border-gray-300 p-4 dark-theme:border-gray-600"
     >
-      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
+      <Chart
+        :type="chartType"
+        :data="chartData"
+        :options="chartOptions"
+        :aria-label="`${widget.name || $t('g.chart')} - ${chartType} ${$t('g.chartLowercase')}`"
+      />
     </div>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index 1e29b23aa..333966996 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -10,6 +10,7 @@
         v-model="localValue"
         v-bind="filteredProps"
         class="h-4 w-8 overflow-hidden !rounded-full border-none"
+        :aria-label="widget.name"
         :pt="{
           preview: '!w-full !h-full !border-none'
         }"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 65bf2849f..0ef51cce2 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -20,6 +20,7 @@
           :model-value="selectedFile?.name"
           :options="[selectedFile?.name || '']"
           :disabled="true"
+          :aria-label="`${$t('g.selectedFile')}: ${selectedFile?.name || $t('g.none')}`"
           v-bind="transformCompatProps"
           class="max-w-[20em] min-w-[8em] text-xs"
           size="small"
@@ -50,6 +51,7 @@
       >
         <!-- Edit button -->
         <button
+          :aria-label="$t('g.editImage')"
           class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
           style="background-color: #262729"
           @click="handleEdit"
@@ -58,6 +60,7 @@
         </button>
         <!-- Delete button -->
         <button
+          :aria-label="$t('g.deleteImage')"
           class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
           style="background-color: #262729"
           @click="clearFile"
@@ -87,6 +90,7 @@
           :model-value="selectedFile?.name"
           :options="[selectedFile?.name || '']"
           :disabled="true"
+          :aria-label="`${$t('g.selectedFile')}: ${selectedFile?.name || $t('g.none')}`"
           v-bind="transformCompatProps"
           class="max-w-[20em] min-w-[8em] text-xs"
           size="small"
@@ -128,6 +132,7 @@
         <div class="flex gap-1">
           <!-- Delete button -->
           <button
+            :aria-label="$t('g.deleteAudioFile')"
             class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-[#262729] focus:outline-none"
             @click="clearFile"
           >
@@ -168,6 +173,7 @@
     type="file"
     class="hidden"
     :accept="widget.options?.accept"
+    :aria-label="`${$t('g.upload')} ${widget.name || $t('g.file')}`"
     :multiple="false"
     @change="handleFileChange"
   />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index bf8571475..ad1624f2d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -10,6 +10,7 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { useNumberWidgetButtonPt } from '../composables/useNumberWidgetButtonPt'
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
@@ -65,17 +66,24 @@ const useGrouping = computed(() => {
 
 // Check if increment/decrement buttons should be disabled due to precision limits
 const buttonsDisabled = computed(() => {
-  const currentValue = localValue.value || 0
-  return !Number.isSafeInteger(currentValue)
+  const currentValue = localValue.value ?? 0
+  return (
+    !Number.isFinite(currentValue) ||
+    Math.abs(currentValue) > Number.MAX_SAFE_INTEGER
+  )
 })
 
-// Tooltip message for disabled buttons
 const buttonTooltip = computed(() => {
   if (buttonsDisabled.value) {
     return 'Increment/decrement disabled: value exceeds JavaScript precision limit (±2^53)'
   }
   return null
 })
+
+const inputNumberPt = useNumberWidgetButtonPt({
+  roundedLeft: true,
+  roundedRight: true
+})
 </script>
 
 <template>
@@ -84,19 +92,14 @@ const buttonTooltip = computed(() => {
       <InputNumber
         v-model="localValue"
         v-bind="filteredProps"
-        :show-buttons="!buttonsDisabled"
         button-layout="horizontal"
         size="small"
         :step="stepValue"
         :use-grouping="useGrouping"
         :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
         :aria-label="widget.name"
-        :pt="{
-          incrementButton:
-            '!rounded-r-lg bg-transparent border-none hover:bg-zinc-500/30 active:bg-zinc-500/40',
-          decrementButton:
-            '!rounded-l-lg bg-transparent border-none hover:bg-zinc-500/30 active:bg-zinc-500/40'
-        }"
+        :show-buttons="!buttonsDisabled"
+        :pt="inputNumberPt"
         @update:model-value="onChange"
       >
         <template #incrementicon>
@@ -113,11 +116,16 @@ const buttonTooltip = computed(() => {
 <style scoped>
 :deep(.p-inputnumber-input) {
   background-color: transparent;
-  border: 1px solid color-mix(in oklab, #d4d4d8 10%, transparent);
+  border: 1px solid var(--node-stroke);
   border-top: transparent;
   border-bottom: transparent;
   height: 1.625rem;
   margin: 1px 0;
   box-shadow: none;
 }
+
+:deep(.p-inputnumber-button.p-disabled .pi),
+:deep(.p-inputnumber-button.p-disabled .p-icon) {
+  color: var(--color-node-icon-disabled) !important;
+}
 </style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index 70ced5d46..e8d55741a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -10,6 +10,7 @@
         v-bind="filteredProps"
         class="flex-grow text-xs"
         :step="stepValue"
+        :aria-label="widget.name"
         @update:model-value="updateLocalValue"
       />
       <InputNumber
@@ -19,9 +20,12 @@
         :step="stepValue"
         :min-fraction-digits="precision"
         :max-fraction-digits="precision"
+        :aria-label="widget.name"
         size="small"
         pt:pc-input-text:root="min-w-full bg-transparent border-none text-center"
         class="w-16"
+        :show-buttons="!buttonsDisabled"
+        :pt="sliderNumberPt"
         @update:model-value="handleNumberInputUpdate"
       />
     </div>
@@ -41,6 +45,7 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { useNumberWidgetButtonPt } from '../composables/useNumberWidgetButtonPt'
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
@@ -101,4 +106,24 @@ const stepValue = computed(() => {
   // precision 1 → 0.1, precision 2 → 0.01, etc.
   return 1 / Math.pow(10, precision.value)
 })
+
+const buttonsDisabled = computed(() => {
+  const currentValue = localValue.value ?? 0
+  return (
+    !Number.isFinite(currentValue) ||
+    Math.abs(currentValue) > Number.MAX_SAFE_INTEGER
+  )
+})
+
+const sliderNumberPt = useNumberWidgetButtonPt({
+  roundedLeft: true,
+  roundedRight: true
+})
 </script>
+
+<style scoped>
+:deep(.p-inputnumber-button.p-disabled .pi),
+:deep(.p-inputnumber-button.p-disabled .p-icon) {
+  color: var(--color-node-icon-disabled) !important;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index a7f43cd6f..882ce2474 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -4,6 +4,7 @@
       v-model="localValue"
       v-bind="filteredProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')"
+      :aria-label="widget.name"
       size="small"
       @update:model-value="onChange"
     />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
index 8e1d7af50..aaa29489b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
@@ -3,7 +3,9 @@ import PrimeVue from 'primevue/config'
 import Textarea from 'primevue/textarea'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
 
+import enMessages from '@/locales/en/main.json'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetMarkdown from './WidgetMarkdown.vue'
@@ -39,9 +41,19 @@ describe('WidgetMarkdown Dual Mode Display', () => {
     modelValue: string,
     readonly = false
   ) => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: {
+        en: {
+          ...enMessages
+        }
+      }
+    })
+
     return mount(WidgetMarkdown, {
       global: {
-        plugins: [PrimeVue],
+        plugins: [PrimeVue, i18n],
         components: { Textarea }
       },
       props: {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 0b4097bc3..423e139c8 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -15,6 +15,7 @@
       v-show="isEditing"
       ref="textareaRef"
       v-model="localValue"
+      :aria-label="`${$t('g.edit')} ${widget.name || $t('g.markdown')} ${$t('g.content')}`"
       class="absolute inset-0 min-h-[60px] w-full resize-none"
       :pt="{
         root: {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
index 9bec51938..b9d9876a1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -5,6 +5,7 @@
       :options="multiSelectOptions"
       v-bind="combinedProps"
       class="w-full text-xs"
+      :aria-label="widget.name"
       size="small"
       display="chip"
       :pt="{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
index 76b23eeaf..20a7f0f6d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
@@ -5,6 +5,7 @@
       :options="selectOptions"
       v-bind="combinedProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+      :aria-label="widget.name"
       size="small"
       :pt="{
         option: 'text-xs'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 510dead1f..a501b27e6 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -5,6 +5,7 @@
       v-bind="filteredProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs lod-toggle')"
       :placeholder="placeholder || widget.name || ''"
+      :aria-label="widget.name"
       size="small"
       rows="3"
       data-capture-wheel="true"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 9232ccad0..3b857688b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -3,6 +3,7 @@
     <ToggleSwitch
       v-model="localValue"
       v-bind="filteredProps"
+      :aria-label="widget.name"
       @update:model-value="onChange"
     />
   </WidgetLayoutField>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
index 5dde88f35..f1b570994 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -4,6 +4,7 @@
       v-model="localValue"
       v-bind="combinedProps"
       class="w-full text-xs"
+      :aria-label="widget.name"
       size="small"
       @update:model-value="onChange"
     />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index f520b4b0f..59ed07bde 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -59,6 +59,7 @@
           min="0"
           max="100"
           step="0.1"
+          :aria-label="$t('g.audioProgress')"
           class="absolute inset-0 w-full cursor-pointer opacity-0"
           @input="handleSeek"
         />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 02f5e6857..e596ba290 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -14,10 +14,10 @@ defineProps<{
   <div
     class="flex h-[30px] items-center justify-between gap-2 overscroll-contain"
   >
-    <div class="relative mr-4 flex h-6 items-center">
+    <div class="relative flex h-6 items-center">
       <p
         v-if="widget.name"
-        class="lod-toggle w-20 flex-1 truncate text-sm font-normal text-node-component-slot-text"
+        class="lod-toggle w-28 flex-1 truncate text-sm font-normal text-node-component-slot-text"
       >
         {{ widget.label || widget.name }}
       </p>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
index 3fe46f52e..197605066 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
@@ -6,7 +6,7 @@ export const WidgetInputBaseClass = cn([
   'text-node-component-widget-input',
   // Outline
   'border-none',
-  'outline outline-offset-[-1px] outline-zinc-300/10',
+  'outline outline-offset-[-1px] outline-node-stroke',
   // Rounded
   'rounded-lg',
   // Hover
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
new file mode 100644
index 000000000..5ce18d8f9
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
@@ -0,0 +1,23 @@
+const sharedButtonClasses =
+  '!inline-flex !items-center !justify-center !border-0 !bg-transparent text-inherit transition-colors duration-150 ease-in-out ' +
+  'hover:!bg-[var(--color-node-component-surface-hovered)] active:!bg-[var(--color-node-component-surface-selected)] ' +
+  'disabled:!bg-[var(--color-node-component-disabled)] disabled:!text-[var(--color-node-icon-disabled)] disabled:cursor-not-allowed'
+
+export function useNumberWidgetButtonPt(options?: {
+  roundedLeft?: boolean
+  roundedRight?: boolean
+}) {
+  const { roundedLeft = false, roundedRight = false } = options ?? {}
+
+  const increment = `${sharedButtonClasses}${roundedRight ? ' !rounded-r-lg' : ''}`
+  const decrement = `${sharedButtonClasses}${roundedLeft ? ' !rounded-l-lg' : ''}`
+
+  return {
+    incrementButton: {
+      class: increment.trim()
+    },
+    decrementButton: {
+      class: decrement.trim()
+    }
+  }
+}
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index c962fd1eb..043c76862 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -380,11 +380,15 @@ export class ComfyApp {
     const paintedIndex = selectedIndex + 1
     const combinedIndex = selectedIndex + 2
 
+    // for vueNodes mode
+    const images =
+      node.images ?? useNodeOutputStore().getNodeOutputs(node)?.images
+
     ComfyApp.clipspace = {
       widgets: widgets,
       imgs: imgs,
       original_imgs: orig_imgs,
-      images: node.images,
+      images: images,
       selectedIndex: selectedIndex,
       img_paste_mode: 'selected', // reset to default im_paste_mode state on copy action
       paintedIndex: paintedIndex,
@@ -411,7 +415,8 @@ export class ComfyApp {
           ComfyApp.clipspace.imgs[ComfyApp.clipspace.combinedIndex].src
       }
       if (ComfyApp.clipspace.imgs && node.imgs) {
-        if (node.images && ComfyApp.clipspace.images) {
+        // Update node.images even if it's initially undefined (vueNodes mode)
+        if (ComfyApp.clipspace.images) {
           if (ComfyApp.clipspace['img_paste_mode'] == 'selected') {
             node.images = [
               ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]
@@ -513,6 +518,8 @@ export class ComfyApp {
       }
 
       app.graph.setDirtyCanvas(true)
+
+      useNodeOutputStore().updateNodeImages(node)
     }
   }
 
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index af482cc8a..51e182640 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -239,6 +239,7 @@ export const useExecutionStore = defineStore('execution', () => {
     api.addEventListener('execution_start', handleExecutionStart)
     api.addEventListener('execution_cached', handleExecutionCached)
     api.addEventListener('execution_interrupted', handleExecutionInterrupted)
+    api.addEventListener('execution_success', handleExecutionSuccess)
     api.addEventListener('executed', handleExecuted)
     api.addEventListener('executing', handleExecuting)
     api.addEventListener('progress', handleProgress)
@@ -253,6 +254,7 @@ export const useExecutionStore = defineStore('execution', () => {
     api.removeEventListener('execution_start', handleExecutionStart)
     api.removeEventListener('execution_cached', handleExecutionCached)
     api.removeEventListener('execution_interrupted', handleExecutionInterrupted)
+    api.removeEventListener('execution_success', handleExecutionSuccess)
     api.removeEventListener('executed', handleExecuted)
     api.removeEventListener('executing', handleExecuting)
     api.removeEventListener('progress', handleProgress)
@@ -277,7 +279,7 @@ export const useExecutionStore = defineStore('execution', () => {
   }
 
   function handleExecutionInterrupted() {
-    nodeProgressStates.value = {}
+    resetExecutionState()
   }
 
   function handleExecuted(e: CustomEvent<ExecutedWsMessage>) {
@@ -285,6 +287,10 @@ export const useExecutionStore = defineStore('execution', () => {
     activePrompt.value.nodes[e.detail.node] = true
   }
 
+  function handleExecutionSuccess() {
+    resetExecutionState()
+  }
+
   function handleExecuting(e: CustomEvent<NodeId | null>): void {
     // Clear the current node progress when a new node starts executing
     _executingNodeProgress.value = null
@@ -346,6 +352,19 @@ export const useExecutionStore = defineStore('execution', () => {
 
   function handleExecutionError(e: CustomEvent<ExecutionErrorWsMessage>) {
     lastExecutionError.value = e.detail
+    resetExecutionState()
+  }
+
+  /**
+   * Reset execution-related state after a run completes or is stopped.
+   */
+  function resetExecutionState() {
+    nodeProgressStates.value = {}
+    if (activePromptId.value) {
+      delete queuedPrompts.value[activePromptId.value]
+    }
+    activePromptId.value = null
+    _executingNodeProgress.value = null
   }
 
   function getNodeIdIfExecuting(nodeId: string | number) {
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index 848eb0ae7..300c532c9 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -331,6 +331,26 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     nodeOutputs.value = outputs
   }
 
+  function updateNodeImages(node: LGraphNode) {
+    if (!node.images?.length) return
+
+    const nodeLocatorId = nodeIdToNodeLocatorId(node.id)
+
+    if (nodeLocatorId) {
+      const existingOutputs = app.nodeOutputs[nodeLocatorId]
+
+      if (existingOutputs) {
+        const updatedOutputs = {
+          ...existingOutputs,
+          images: node.images
+        }
+
+        app.nodeOutputs[nodeLocatorId] = updatedOutputs
+        nodeOutputs.value[nodeLocatorId] = updatedOutputs
+      }
+    }
+  }
+
   function resetAllOutputsAndPreviews() {
     app.nodeOutputs = {}
     nodeOutputs.value = {}
@@ -349,6 +369,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     setNodeOutputsByExecutionId,
     setNodePreviewsByExecutionId,
     setNodePreviewsByNodeId,
+    updateNodeImages,
 
     // Cleanup
     revokePreviewsByExecutionId,
diff --git a/src/stores/topbarBadgeStore.ts b/src/stores/topbarBadgeStore.ts
new file mode 100644
index 000000000..e4547ae46
--- /dev/null
+++ b/src/stores/topbarBadgeStore.ts
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+import type { TopbarBadge } from '@/types/comfy'
+
+import { useExtensionStore } from './extensionStore'
+
+export const useTopbarBadgeStore = defineStore('topbarBadge', () => {
+  const extensionStore = useExtensionStore()
+
+  const badges = computed<TopbarBadge[]>(() =>
+    extensionStore.extensions.flatMap((e) => e.topbarBadges ?? [])
+  )
+
+  return {
+    badges
+  }
+})
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index 184aa7a4e..f11488380 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -33,6 +33,14 @@ type MenuCommandGroup = {
   commands: string[]
 }
 
+export interface TopbarBadge {
+  text: string
+  /**
+   * Optional badge label (e.g., "BETA", "ALPHA", "NEW")
+   */
+  label?: string
+}
+
 export type MissingNodeType =
   | string
   // Primarily used by group nodes.
@@ -74,6 +82,10 @@ export interface ComfyExtension {
    * Badges to add to the about page
    */
   aboutPageBadges?: AboutPageBadge[]
+  /**
+   * Badges to add to the top bar
+   */
+  topbarBadges?: TopbarBadge[]
   /**
    * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
    * @param app The ComfyUI app instance
diff --git a/tests-ui/tests/components/graph/ZoomControlsModal.test.ts b/tests-ui/tests/components/graph/ZoomControlsModal.test.ts
index adc71d018..65abf52b7 100644
--- a/tests-ui/tests/components/graph/ZoomControlsModal.test.ts
+++ b/tests-ui/tests/components/graph/ZoomControlsModal.test.ts
@@ -76,7 +76,7 @@ describe('ZoomControlsModal', () => {
   it('should execute zoom in command when zoom in button is clicked', async () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     const zoomInButton = buttons.find((btn) =>
       btn.text().includes('graphCanvasMenu.zoomIn')
     )
@@ -90,7 +90,7 @@ describe('ZoomControlsModal', () => {
   it('should execute zoom out command when zoom out button is clicked', async () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     const zoomOutButton = buttons.find((btn) =>
       btn.text().includes('graphCanvasMenu.zoomOut')
     )
@@ -104,7 +104,7 @@ describe('ZoomControlsModal', () => {
   it('should execute fit view command when fit view button is clicked', async () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     const fitViewButton = buttons.find((btn) =>
       btn.text().includes('zoomControls.zoomToFit')
     )
@@ -115,34 +115,6 @@ describe('ZoomControlsModal', () => {
     expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
   })
 
-  it('should emit close when minimap toggle button is clicked', async () => {
-    const wrapper = createWrapper()
-
-    const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
-    expect(minimapButton.exists()).toBe(true)
-
-    await minimapButton.trigger('click')
-
-    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ToggleMinimap')
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')).toHaveLength(1)
-  })
-
-  it('should not emit close when other command buttons are clicked', async () => {
-    const wrapper = createWrapper()
-
-    const buttons = wrapper.findAll('button')
-    const fitViewButton = buttons.find((btn) =>
-      btn.text().includes('zoomControls.zoomToFit')
-    )
-
-    expect(fitViewButton).toBeDefined()
-    await fitViewButton!.trigger('click')
-
-    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
-    expect(wrapper.emitted('close')).toBeFalsy()
-  })
-
   it('should call setAppZoomFromPercentage with valid zoom input values', async () => {
     const wrapper = createWrapper()
 
@@ -169,26 +141,10 @@ describe('ZoomControlsModal', () => {
     expect(mockSetAppZoom).not.toHaveBeenCalled()
   })
 
-  it('should display "Hide Minimap" when minimap is visible', () => {
-    mockSettingGet.mockReturnValue(true)
-    const wrapper = createWrapper()
-
-    const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
-    expect(minimapButton.text()).toContain('zoomControls.hideMinimap')
-  })
-
-  it('should display "Show Minimap" when minimap is hidden', () => {
-    mockSettingGet.mockReturnValue(false)
-    const wrapper = createWrapper()
-
-    const minimapButton = wrapper.find('[data-testid="toggle-minimap-button"]')
-    expect(minimapButton.text()).toContain('zoomControls.showMinimap')
-  })
-
   it('should display keyboard shortcuts for commands', () => {
     const wrapper = createWrapper()
 
-    const buttons = wrapper.findAll('button')
+    const buttons = wrapper.findAll('.cursor-pointer')
     expect(buttons.length).toBeGreaterThan(0)
 
     // Each command button should show the keyboard shortcut
diff --git a/tests-ui/tests/composables/useMinimap.test.ts b/tests-ui/tests/composables/useMinimap.test.ts
index fdfb8a611..6a8eb5b76 100644
--- a/tests-ui/tests/composables/useMinimap.test.ts
+++ b/tests-ui/tests/composables/useMinimap.test.ts
@@ -898,10 +898,9 @@ describe('useMinimap', () => {
       const minimap = useMinimap()
       const styles = minimap.containerStyles.value
 
-      expect(styles.width).toBe('250px')
+      expect(styles.width).toBe('253px')
       expect(styles.height).toBe('200px')
-      expect(styles.backgroundColor).toBe('#15161C')
-      expect(styles.border).toBe('1px solid #333')
+      expect(styles.border).toBe('1px solid var(--interface-stroke)')
       expect(styles.borderRadius).toBe('8px')
     })
   })
diff --git a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
index b845218d1..b74ec9ff3 100644
--- a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
+++ b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
@@ -55,10 +55,10 @@ describe('useMinimapSettings', () => {
     const settings = useMinimapSettings()
     const styles = settings.containerStyles.value
 
-    expect(styles.width).toBe('250px')
+    expect(styles.width).toBe('253px')
     expect(styles.height).toBe('200px')
-    expect(styles.backgroundColor).toBe('#15161C') // dark theme color
-    expect(styles.border).toBe('1px solid #333')
+    expect(styles.border).toBe('1px solid var(--interface-stroke)')
+    expect(styles.borderRadius).toBe('8px')
   })
 
   it('should generate light theme container styles', () => {
@@ -74,8 +74,10 @@ describe('useMinimapSettings', () => {
     const settings = useMinimapSettings()
     const styles = settings.containerStyles.value
 
-    expect(styles.backgroundColor).toBe('#FAF9F5') // light theme color
-    expect(styles.border).toBe('1px solid #ccc')
+    expect(styles.width).toBe('253px')
+    expect(styles.height).toBe('200px')
+    expect(styles.border).toBe('1px solid var(--interface-stroke)')
+    expect(styles.borderRadius).toBe('8px')
   })
 
   it('should generate panel styles based on theme', () => {
@@ -91,8 +93,9 @@ describe('useMinimapSettings', () => {
     const settings = useMinimapSettings()
     const styles = settings.panelStyles.value
 
-    expect(styles.backgroundColor).toBe('#15161C')
-    expect(styles.border).toBe('1px solid #333')
+    expect(styles.width).toBe('210px')
+    expect(styles.height).toBe('200px')
+    expect(styles.border).toBe('1px solid var(--interface-stroke)')
     expect(styles.borderRadius).toBe('8px')
   })
 
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts
index ccf61ebcf..5b9d658df 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts
@@ -203,9 +203,8 @@ describe('ImagePreview', () => {
     await navigationDots[1].trigger('click')
     await nextTick()
 
-    // After clicking, component shows loading state (Skeleton), not img
+    // After clicking, component shows loading state (Skeleton)
     expect(wrapper.find('skeleton-stub').exists()).toBe(true)
-    expect(wrapper.find('img').exists()).toBe(false)
 
     // Simulate image load event to clear loading state
     const component = wrapper.vm as any
diff --git a/tools/devtools/__init__.py b/tools/devtools/__init__.py
index 3ac47cb18..f9b457896 100644
--- a/tools/devtools/__init__.py
+++ b/tools/devtools/__init__.py
@@ -97,4 +97,4 @@ async def set_settings(request: Request):
         return web.Response(status=500, text=f"Error: {str(e)}")
 
 
-__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS"]
\ No newline at end of file
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS"]
diff --git a/tools/devtools/dev_nodes.py b/tools/devtools/dev_nodes.py
index 15311d74b..660518d84 100644
--- a/tools/devtools/dev_nodes.py
+++ b/tools/devtools/dev_nodes.py
@@ -1,673 +1,67 @@
-import torch
-import comfy.utils as utils
-from comfy.model_patcher import ModelPatcher
-import nodes
-import time
-import os
-import folder_paths
-
-
-class ErrorRaiseNode:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {}}
-
-    RETURN_TYPES = ("IMAGE",)
-    FUNCTION = "raise_error"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "Raise an error for development purposes"
-
-    def raise_error(self):
-        raise Exception("Error node was called!")
-
-
-class ErrorRaiseNodeWithMessage:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {"message": ("STRING", {"multiline": True})}}
-
-    RETURN_TYPES = ()
-    OUTPUT_NODE = True
-
-    FUNCTION = "raise_error"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "Raise an error with message for development purposes"
-
-    def raise_error(self, message: str):
-        raise Exception(message)
-
-
-class ExperimentalNode:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {}}
-
-    RETURN_TYPES = ()
-    OUTPUT_NODE = True
-    FUNCTION = "experimental_function"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A experimental node"
-
-    EXPERIMENTAL = True
-
-    def experimental_function(self):
-        print("Experimental node was called!")
-
-
-class DeprecatedNode:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {}}
-
-    RETURN_TYPES = ()
-    OUTPUT_NODE = True
-    FUNCTION = "deprecated_function"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A deprecated node"
-
-    DEPRECATED = True
-
-    def deprecated_function(self):
-        print("Deprecated node was called!")
-
-
-class LongComboDropdown:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {"option": ([f"Option {i}" for i in range(1_000)],)}}
-
-    RETURN_TYPES = ()
-    OUTPUT_NODE = True
-    FUNCTION = "long_combo_dropdown"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A long combo dropdown"
-
-    def long_combo_dropdown(self, option: str):
-        print(option)
-
-
-class NodeWithOptionalInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {"required_input": ("IMAGE",)},
-            "optional": {"optional_input": ("IMAGE", {"default": None})},
-        }
-
-    RETURN_TYPES = ("IMAGE",)
-    FUNCTION = "node_with_optional_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with an optional input"
-
-    def node_with_optional_input(self, required_input, optional_input=None):
-        print(
-            f"Calling node with required_input: {required_input} and optional_input: {optional_input}"
-        )
-        return (required_input,)
-
-
-class NodeWithOptionalComboInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "optional": {
-                "optional_combo_input": (
-                    [f"Random Unique Option {time.time()}" for _ in range(8)],
-                    {"default": None},
-                )
-            },
-        }
-
-    RETURN_TYPES = ("STRING",)
-    FUNCTION = "node_with_optional_combo_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with an optional combo input that returns unique values every time INPUT_TYPES is called"
-
-    def node_with_optional_combo_input(self, optional_combo_input=None):
-        print(f"Calling node with optional_combo_input: {optional_combo_input}")
-        return (optional_combo_input,)
-
-
-class NodeWithOnlyOptionalInput:
-    @classmethod
-    def INPUT_TYPES(s):
-        return {
-            "optional": {
-                "text": ("STRING", {"multiline": True, "dynamicPrompts": True}),
-                "clip": ("CLIP", {}),
-            }
-        }
-
-    RETURN_TYPES = ()
-    FUNCTION = "node_with_only_optional_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with only optional input"
-
-    def node_with_only_optional_input(self, clip=None, text=None):
-        pass
-
-
-class NodeWithOutputList:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {}}
-
-    RETURN_TYPES = (
-        "INT",
-        "INT",
-    )
-    RETURN_NAMES = (
-        "INTEGER OUTPUT",
-        "INTEGER LIST OUTPUT",
-    )
-    OUTPUT_IS_LIST = (
-        False,
-        True,
-    )
-    FUNCTION = "node_with_output_list"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with an output list"
-
-    def node_with_output_list(self):
-        return (1, [1, 2, 3])
-
-
-class NodeWithForceInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "int_input": ("INT", {"forceInput": True}),
-                "int_input_widget": ("INT", {"default": 1}),
-            },
-            "optional": {"float_input": ("FLOAT", {"forceInput": True})},
-        }
-
-    RETURN_TYPES = ()
-    OUTPUT_NODE = True
-    FUNCTION = "node_with_force_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with a forced input"
-
-    def node_with_force_input(
-        self, int_input: int, int_input_widget: int, float_input: float = 0.0
-    ):
-        print(
-            f"int_input: {int_input}, int_input_widget: {int_input_widget}, float_input: {float_input}"
-        )
-
-
-class NodeWithDefaultInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "int_input": ("INT", {"defaultInput": True}),
-                "int_input_widget": ("INT", {"default": 1}),
-            },
-            "optional": {"float_input": ("FLOAT", {"defaultInput": True})},
-        }
-
-    RETURN_TYPES = ()
-    OUTPUT_NODE = True
-    FUNCTION = "node_with_default_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with a default input"
-
-    def node_with_default_input(
-        self, int_input: int, int_input_widget: int, float_input: float = 0.0
-    ):
-        print(
-            f"int_input: {int_input}, int_input_widget: {int_input_widget}, float_input: {float_input}"
-        )
-
-
-class NodeWithStringInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {"string_input": ("STRING",)}}
-
-    RETURN_TYPES = ()
-    FUNCTION = "node_with_string_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with a string input"
-
-    def node_with_string_input(self, string_input: str):
-        print(f"string_input: {string_input}")
-
-
-class NodeWithUnionInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "optional": {
-                "string_or_int_input": ("STRING,INT",),
-                "string_input": ("STRING", {"forceInput": True}),
-                "int_input": ("INT", {"forceInput": True}),
-            }
-        }
-
-    RETURN_TYPES = ()
-    OUTPUT_NODE = True
-    FUNCTION = "node_with_union_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with a union input"
-
-    def node_with_union_input(
-        self,
-        string_or_int_input: str | int = "",
-        string_input: str = "",
-        int_input: int = 0,
-    ):
-        print(
-            f"string_or_int_input: {string_or_int_input}, string_input: {string_input}, int_input: {int_input}"
-        )
-        return {
-            "ui": {
-                "text": string_or_int_input,
-            }
-        }
-
-
-class NodeWithBooleanInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {"boolean_input": ("BOOLEAN",)}}
-
-    RETURN_TYPES = ()
-    FUNCTION = "node_with_boolean_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with a boolean input"
-
-    def node_with_boolean_input(self, boolean_input: bool):
-        print(f"boolean_input: {boolean_input}")
-
-
-class SimpleSlider:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "value": (
-                    "FLOAT",
-                    {
-                        "display": "slider",
-                        "default": 0.5,
-                        "min": 0.0,
-                        "max": 1.0,
-                        "step": 0.001,
-                    },
-                ),
-            },
-        }
-
-    RETURN_TYPES = ("FLOAT",)
-    FUNCTION = "execute"
-    CATEGORY = "DevTools"
-
-    def execute(self, value):
-        return (value,)
-
-
-class NodeWithSeedInput:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {"required": {"seed": ("INT", {"default": 0})}}
-
-    RETURN_TYPES = ()
-    FUNCTION = "node_with_seed_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node with a seed input"
-    OUTPUT_NODE = True
-
-    def node_with_seed_input(self, seed: int):
-        print(f"seed: {seed}")
-
-
-class DummyPatch(torch.nn.Module):
-    def __init__(self, module: torch.nn.Module, dummy_float: float = 0.0):
-        super().__init__()
-        self.module = module
-        self.dummy_float = dummy_float
-
-    def forward(self, *args, **kwargs):
-        if isinstance(self.module, DummyPatch):
-            raise Exception(f"Calling nested dummy patch! {self.dummy_float}")
-
-        return self.module(*args, **kwargs)
-
-
-class ObjectPatchNode:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "model": ("MODEL",),
-                "target_module": ("STRING", {"multiline": True}),
-            },
-            "optional": {
-                "dummy_float": ("FLOAT", {"default": 0.0}),
-            },
-        }
-
-    RETURN_TYPES = ("MODEL",)
-    FUNCTION = "apply_patch"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that applies an object patch"
-
-    def apply_patch(
-        self, model: ModelPatcher, target_module: str, dummy_float: float = 0.0
-    ) -> ModelPatcher:
-        module = utils.get_attr(model.model, target_module)
-        work_model = model.clone()
-        work_model.add_object_patch(target_module, DummyPatch(module, dummy_float))
-        return (work_model,)
-
-
-class RemoteWidgetNode:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "remote_widget_value": (
-                    "COMBO",
-                    {
-                        "remote": {
-                            "route": "/api/models/checkpoints",
-                        },
-                    },
-                ),
-            },
-        }
-
-    FUNCTION = "remote_widget"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that lazily fetches options from a remote endpoint"
-    RETURN_TYPES = ("STRING",)
-
-    def remote_widget(self, remote_widget_value: str):
-        return (remote_widget_value,)
-
-
-class RemoteWidgetNodeWithParams:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "remote_widget_value": (
-                    "COMBO",
-                    {
-                        "remote": {
-                            "route": "/api/models/checkpoints",
-                            "query_params": {
-                                "sort": "true",
-                            },
-                        },
-                    },
-                ),
-            },
-        }
-
-    FUNCTION = "remote_widget"
-    CATEGORY = "DevTools"
-    DESCRIPTION = (
-        "A node that lazily fetches options from a remote endpoint with query params"
-    )
-    RETURN_TYPES = ("STRING",)
-
-    def remote_widget(self, remote_widget_value: str):
-        return (remote_widget_value,)
-
-
-class RemoteWidgetNodeWithRefresh:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "remote_widget_value": (
-                    "COMBO",
-                    {
-                        "remote": {
-                            "route": "/api/models/checkpoints",
-                            "refresh": 300,
-                            "max_retries": 10,
-                            "timeout": 256,
-                        },
-                    },
-                ),
-            },
-        }
-
-    FUNCTION = "remote_widget"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and refresh the options every 300 ms"
-    RETURN_TYPES = ("STRING",)
-
-    def remote_widget(self, remote_widget_value: str):
-        return (remote_widget_value,)
-
-
-class RemoteWidgetNodeWithRefreshButton:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "remote_widget_value": (
-                    "COMBO",
-                    {
-                        "remote": {
-                            "route": "/api/models/checkpoints",
-                            "refresh_button": True,
-                        },
-                    },
-                ),
-            },
-        }
-
-    FUNCTION = "remote_widget"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and has a refresh button to manually reload options"
-    RETURN_TYPES = ("STRING",)
-
-    def remote_widget(self, remote_widget_value: str):
-        return (remote_widget_value,)
-
-
-class RemoteWidgetNodeWithControlAfterRefresh:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "remote_widget_value": (
-                    "COMBO",
-                    {
-                        "remote": {
-                            "route": "/api/models/checkpoints",
-                            "refresh_button": True,
-                            "control_after_refresh": "first",
-                        },
-                    },
-                ),
-            },
-        }
-
-    FUNCTION = "remote_widget"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and has a refresh button to manually reload options and select the first option on refresh"
-    RETURN_TYPES = ("STRING",)
-
-    def remote_widget(self, remote_widget_value: str):
-        return (remote_widget_value,)
-
-
-class NodeWithOutputCombo:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "subset_options": (["A", "B"], {"forceInput": True}),
-                "subset_options_v2": (
-                    "COMBO",
-                    {"options": ["A", "B"], "forceInput": True},
-                ),
-            }
-        }
-
-    RETURN_TYPES = (["A", "B", "C"],)
-    FUNCTION = "node_with_output_combo"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that outputs a combo type"
-
-    def node_with_output_combo(self, subset_options: str):
-        return (subset_options,)
-
-
-class MultiSelectNode:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "foo": (
-                    "COMBO",
-                    {
-                        "options": ["A", "B", "C"],
-                        "multi_select": {
-                            "placeholder": "Choose foos",
-                            "chip": True,
-                        },
-                    },
-                )
-            }
-        }
-
-    RETURN_TYPES = ("STRING",)
-    OUTPUT_IS_LIST = [True]
-    FUNCTION = "multi_select_node"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that outputs a multi select type"
-
-    def multi_select_node(self, foo: list[str]) -> list[str]:
-        return (foo,)
-
-
-class LoadAnimatedImageTest(nodes.LoadImage):
-    @classmethod
-    def INPUT_TYPES(s):
-        input_dir = folder_paths.get_input_directory()
-        files = [
-            f
-            for f in os.listdir(input_dir)
-            if os.path.isfile(os.path.join(input_dir, f)) and f.endswith(".webp")
-        ]
-        files = folder_paths.filter_files_content_types(files, ["image"])
-        return {
-            "required": {"image": (sorted(files), {"animated_image_upload": True})},
-        }
-
-
-class NodeWithValidation:
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {"int_input": ("INT",)},
-        }
-
-    @classmethod
-    def VALIDATE_INPUTS(cls, int_input: int):
-        if int_input < 0:
-            raise ValueError("int_input must be greater than 0")
-        return True
-
-    RETURN_TYPES = ()
-    FUNCTION = "execute"
-    CATEGORY = "DevTools"
-    DESCRIPTION = "A node that validates an input"
-    OUTPUT_NODE = True
-
-    def execute(self, int_input: int):
-        print(f"int_input: {int_input}")
-        return tuple()
-
-class NodeWithV2ComboInput:
-
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "combo_input": (
-                    "COMBO",
-                    {"options": ["A", "B"]},
-                ),
-            }
-        }
-
-    RETURN_TYPES = ("COMBO",)
-    FUNCTION = "node_with_v2_combo_input"
-    CATEGORY = "DevTools"
-    DESCRIPTION = (
-        "A node that outputs a combo type that adheres to the v2 combo input spec"
-    )
-
-    def node_with_v2_combo_input(self, combo_input: str):
-        return (combo_input,)
-
-
-NODE_CLASS_MAPPINGS = {
-    "DevToolsErrorRaiseNode": ErrorRaiseNode,
-    "DevToolsErrorRaiseNodeWithMessage": ErrorRaiseNodeWithMessage,
-    "DevToolsExperimentalNode": ExperimentalNode,
-    "DevToolsDeprecatedNode": DeprecatedNode,
-    "DevToolsLongComboDropdown": LongComboDropdown,
-    "DevToolsNodeWithOptionalInput": NodeWithOptionalInput,
-    "DevToolsNodeWithOptionalComboInput": NodeWithOptionalComboInput,
-    "DevToolsNodeWithOnlyOptionalInput": NodeWithOnlyOptionalInput,
-    "DevToolsNodeWithOutputList": NodeWithOutputList,
-    "DevToolsNodeWithForceInput": NodeWithForceInput,
-    "DevToolsNodeWithDefaultInput": NodeWithDefaultInput,
-    "DevToolsNodeWithStringInput": NodeWithStringInput,
-    "DevToolsNodeWithUnionInput": NodeWithUnionInput,
-    "DevToolsSimpleSlider": SimpleSlider,
-    "DevToolsNodeWithSeedInput": NodeWithSeedInput,
-    "DevToolsObjectPatchNode": ObjectPatchNode,
-    "DevToolsNodeWithBooleanInput": NodeWithBooleanInput,
-    "DevToolsRemoteWidgetNode": RemoteWidgetNode,
-    "DevToolsRemoteWidgetNodeWithParams": RemoteWidgetNodeWithParams,
-    "DevToolsRemoteWidgetNodeWithRefresh": RemoteWidgetNodeWithRefresh,
-    "DevToolsRemoteWidgetNodeWithRefreshButton": RemoteWidgetNodeWithRefreshButton,
-    "DevToolsRemoteWidgetNodeWithControlAfterRefresh": RemoteWidgetNodeWithControlAfterRefresh,
-    "DevToolsNodeWithOutputCombo": NodeWithOutputCombo,
-    "DevToolsMultiSelectNode": MultiSelectNode,
-    "DevToolsLoadAnimatedImageTest": LoadAnimatedImageTest,
-    "DevToolsNodeWithValidation": NodeWithValidation,
-    "DevToolsNodeWithV2ComboInput": NodeWithV2ComboInput,
-}
-
-NODE_DISPLAY_NAME_MAPPINGS = {
-    "DevToolsErrorRaiseNode": "Raise Error",
-    "DevToolsErrorRaiseNodeWithMessage": "Raise Error with Message",
-    "DevToolsExperimentalNode": "Experimental Node",
-    "DevToolsDeprecatedNode": "Deprecated Node",
-    "DevToolsLongComboDropdown": "Long Combo Dropdown",
-    "DevToolsNodeWithOptionalInput": "Node With Optional Input",
-    "DevToolsNodeWithOptionalComboInput": "Node With Optional Combo Input",
-    "DevToolsNodeWithOnlyOptionalInput": "Node With Only Optional Input",
-    "DevToolsNodeWithOutputList": "Node With Output List",
-    "DevToolsNodeWithForceInput": "Node With Force Input",
-    "DevToolsNodeWithDefaultInput": "Node With Default Input",
-    "DevToolsNodeWithStringInput": "Node With String Input",
-    "DevToolsNodeWithUnionInput": "Node With Union Input",
-    "DevToolsSimpleSlider": "Simple Slider",
-    "DevToolsNodeWithSeedInput": "Node With Seed Input",
-    "DevToolsObjectPatchNode": "Object Patch Node",
-    "DevToolsNodeWithBooleanInput": "Node With Boolean Input",
-    "DevToolsRemoteWidgetNode": "Remote Widget Node",
-    "DevToolsRemoteWidgetNodeWithParams": "Remote Widget Node With Sort Query Param",
-    "DevToolsRemoteWidgetNodeWithRefresh": "Remote Widget Node With 300ms Refresh",
-    "DevToolsRemoteWidgetNodeWithRefreshButton": "Remote Widget Node With Refresh Button",
-    "DevToolsRemoteWidgetNodeWithControlAfterRefresh": "Remote Widget Node With Refresh Button and Control After Refresh",
-    "DevToolsNodeWithOutputCombo": "Node With Output Combo",
-    "DevToolsMultiSelectNode": "Multi Select Node",
-    "DevToolsLoadAnimatedImageTest": "Load Animated Image",
-    "DevToolsNodeWithValidation": "Node With Validation",
-    "DevToolsNodeWithV2ComboInput": "Node With V2 Combo Input",
-}
\ No newline at end of file
+from __future__ import annotations
+
+from .nodes import (
+    DeprecatedNode,
+    DummyPatch,
+    ErrorRaiseNode,
+    ErrorRaiseNodeWithMessage,
+    ExperimentalNode,
+    LoadAnimatedImageTest,
+    LongComboDropdown,
+    MultiSelectNode,
+    NodeWithBooleanInput,
+    NodeWithDefaultInput,
+    NodeWithForceInput,
+    NodeWithOptionalComboInput,
+    NodeWithOptionalInput,
+    NodeWithOnlyOptionalInput,
+    NodeWithOutputCombo,
+    NodeWithOutputList,
+    NodeWithSeedInput,
+    NodeWithStringInput,
+    NodeWithUnionInput,
+    NodeWithValidation,
+    NodeWithV2ComboInput,
+    ObjectPatchNode,
+    RemoteWidgetNode,
+    RemoteWidgetNodeWithControlAfterRefresh,
+    RemoteWidgetNodeWithParams,
+    RemoteWidgetNodeWithRefresh,
+    RemoteWidgetNodeWithRefreshButton,
+    SimpleSlider,
+    NODE_CLASS_MAPPINGS,
+    NODE_DISPLAY_NAME_MAPPINGS,
+)
+
+__all__ = [
+    "DeprecatedNode",
+    "DummyPatch",
+    "ErrorRaiseNode",
+    "ErrorRaiseNodeWithMessage",
+    "ExperimentalNode",
+    "LoadAnimatedImageTest",
+    "LongComboDropdown",
+    "MultiSelectNode",
+    "NodeWithBooleanInput",
+    "NodeWithDefaultInput",
+    "NodeWithForceInput",
+    "NodeWithOptionalComboInput",
+    "NodeWithOptionalInput",
+    "NodeWithOnlyOptionalInput",
+    "NodeWithOutputCombo",
+    "NodeWithOutputList",
+    "NodeWithSeedInput",
+    "NodeWithStringInput",
+    "NodeWithUnionInput",
+    "NodeWithValidation",
+    "NodeWithV2ComboInput",
+    "ObjectPatchNode",
+    "RemoteWidgetNode",
+    "RemoteWidgetNodeWithControlAfterRefresh",
+    "RemoteWidgetNodeWithParams",
+    "RemoteWidgetNodeWithRefresh",
+    "RemoteWidgetNodeWithRefreshButton",
+    "SimpleSlider",
+    "NODE_CLASS_MAPPINGS",
+    "NODE_DISPLAY_NAME_MAPPINGS",
+]
diff --git a/tools/devtools/nodes/__init__.py b/tools/devtools/nodes/__init__.py
new file mode 100644
index 000000000..f0ac2d8ee
--- /dev/null
+++ b/tools/devtools/nodes/__init__.py
@@ -0,0 +1,93 @@
+from __future__ import annotations
+
+from .errors import (
+    DeprecatedNode,
+    ErrorRaiseNode,
+    ErrorRaiseNodeWithMessage,
+    ExperimentalNode,
+    NODE_CLASS_MAPPINGS as errors_class_mappings,
+    NODE_DISPLAY_NAME_MAPPINGS as errors_display_name_mappings,
+)
+from .inputs import (
+    LongComboDropdown,
+    NodeWithBooleanInput,
+    NodeWithDefaultInput,
+    NodeWithForceInput,
+    NodeWithOptionalComboInput,
+    NodeWithOptionalInput,
+    NodeWithOnlyOptionalInput,
+    NodeWithOutputList,
+    NodeWithSeedInput,
+    NodeWithStringInput,
+    NodeWithUnionInput,
+    NodeWithValidation,
+    NodeWithV2ComboInput,
+    SimpleSlider,
+    NODE_CLASS_MAPPINGS as inputs_class_mappings,
+    NODE_DISPLAY_NAME_MAPPINGS as inputs_display_name_mappings,
+)
+from .models import (
+    DummyPatch,
+    LoadAnimatedImageTest,
+    ObjectPatchNode,
+    NODE_CLASS_MAPPINGS as models_class_mappings,
+    NODE_DISPLAY_NAME_MAPPINGS as models_display_name_mappings,
+)
+from .remote import (
+    MultiSelectNode,
+    NodeWithOutputCombo,
+    RemoteWidgetNode,
+    RemoteWidgetNodeWithControlAfterRefresh,
+    RemoteWidgetNodeWithParams,
+    RemoteWidgetNodeWithRefresh,
+    RemoteWidgetNodeWithRefreshButton,
+    NODE_CLASS_MAPPINGS as remote_class_mappings,
+    NODE_DISPLAY_NAME_MAPPINGS as remote_display_name_mappings,
+)
+
+NODE_CLASS_MAPPINGS = {
+    **errors_class_mappings,
+    **inputs_class_mappings,
+    **remote_class_mappings,
+    **models_class_mappings,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    **errors_display_name_mappings,
+    **inputs_display_name_mappings,
+    **remote_display_name_mappings,
+    **models_display_name_mappings,
+}
+
+__all__ = [
+    "DeprecatedNode",
+    "DummyPatch",
+    "ErrorRaiseNode",
+    "ErrorRaiseNodeWithMessage",
+    "ExperimentalNode",
+    "LoadAnimatedImageTest",
+    "LongComboDropdown",
+    "MultiSelectNode",
+    "NodeWithBooleanInput",
+    "NodeWithDefaultInput",
+    "NodeWithForceInput",
+    "NodeWithOptionalComboInput",
+    "NodeWithOptionalInput",
+    "NodeWithOnlyOptionalInput",
+    "NodeWithOutputCombo",
+    "NodeWithOutputList",
+    "NodeWithSeedInput",
+    "NodeWithStringInput",
+    "NodeWithUnionInput",
+    "NodeWithValidation",
+    "NodeWithV2ComboInput",
+    "ObjectPatchNode",
+    "RemoteWidgetNode",
+    "RemoteWidgetNodeWithControlAfterRefresh",
+    "RemoteWidgetNodeWithParams",
+    "RemoteWidgetNodeWithRefresh",
+    "RemoteWidgetNodeWithRefreshButton",
+    "SimpleSlider",
+    "NODE_CLASS_MAPPINGS",
+    "NODE_DISPLAY_NAME_MAPPINGS",
+]
diff --git a/tools/devtools/nodes/errors.py b/tools/devtools/nodes/errors.py
new file mode 100644
index 000000000..0725208fb
--- /dev/null
+++ b/tools/devtools/nodes/errors.py
@@ -0,0 +1,89 @@
+from __future__ import annotations
+
+
+class ErrorRaiseNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "raise_error"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "Raise an error for development purposes"
+
+    def raise_error(self):
+        raise Exception("Error node was called!")
+
+
+class ErrorRaiseNodeWithMessage:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"message": ("STRING", {"multiline": True})}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+
+    FUNCTION = "raise_error"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "Raise an error with message for development purposes"
+
+    def raise_error(self, message: str):
+        raise Exception(message)
+
+
+class ExperimentalNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "experimental_function"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A experimental node"
+
+    EXPERIMENTAL = True
+
+    def experimental_function(self):
+        print("Experimental node was called!")
+
+
+class DeprecatedNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "deprecated_function"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A deprecated node"
+
+    DEPRECATED = True
+
+    def deprecated_function(self):
+        print("Deprecated node was called!")
+
+
+NODE_CLASS_MAPPINGS = {
+    "DevToolsErrorRaiseNode": ErrorRaiseNode,
+    "DevToolsErrorRaiseNodeWithMessage": ErrorRaiseNodeWithMessage,
+    "DevToolsExperimentalNode": ExperimentalNode,
+    "DevToolsDeprecatedNode": DeprecatedNode,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "DevToolsErrorRaiseNode": "Raise Error",
+    "DevToolsErrorRaiseNodeWithMessage": "Raise Error with Message",
+    "DevToolsExperimentalNode": "Experimental Node",
+    "DevToolsDeprecatedNode": "Deprecated Node",
+}
+
+__all__ = [
+    "ErrorRaiseNode",
+    "ErrorRaiseNodeWithMessage",
+    "ExperimentalNode",
+    "DeprecatedNode",
+    "NODE_CLASS_MAPPINGS",
+    "NODE_DISPLAY_NAME_MAPPINGS",
+]
diff --git a/tools/devtools/nodes/inputs.py b/tools/devtools/nodes/inputs.py
new file mode 100644
index 000000000..ac31056ca
--- /dev/null
+++ b/tools/devtools/nodes/inputs.py
@@ -0,0 +1,357 @@
+from __future__ import annotations
+
+import time
+
+
+class LongComboDropdown:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"option": ([f"Option {i}" for i in range(1_000)],)}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "long_combo_dropdown"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A long combo dropdown"
+
+    def long_combo_dropdown(self, option: str):
+        print(option)
+
+
+class NodeWithOptionalInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {"required_input": ("IMAGE",)},
+            "optional": {"optional_input": ("IMAGE", {"default": None})},
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "node_with_optional_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with an optional input"
+
+    def node_with_optional_input(self, required_input, optional_input=None):
+        print(
+            f"Calling node with required_input: {required_input} and optional_input: {optional_input}"
+        )
+        return (required_input,)
+
+
+class NodeWithOptionalComboInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "optional": {
+                "optional_combo_input": (
+                    [f"Random Unique Option {time.time()}" for _ in range(8)],
+                    {"default": None},
+                )
+            },
+        }
+
+    RETURN_TYPES = ("STRING",)
+    FUNCTION = "node_with_optional_combo_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with an optional combo input that returns unique values every time INPUT_TYPES is called"
+
+    def node_with_optional_combo_input(self, optional_combo_input=None):
+        print(f"Calling node with optional_combo_input: {optional_combo_input}")
+        return (optional_combo_input,)
+
+
+class NodeWithOnlyOptionalInput:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "optional": {
+                "text": ("STRING", {"multiline": True, "dynamicPrompts": True}),
+                "clip": ("CLIP", {}),
+            }
+        }
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_only_optional_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with only optional input"
+
+    def node_with_only_optional_input(self, clip=None, text=None):
+        pass
+
+
+class NodeWithOutputList:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = (
+        "INT",
+        "INT",
+    )
+    RETURN_NAMES = (
+        "INTEGER OUTPUT",
+        "INTEGER LIST OUTPUT",
+    )
+    OUTPUT_IS_LIST = (
+        False,
+        True,
+    )
+    FUNCTION = "node_with_output_list"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with an output list"
+
+    def node_with_output_list(self):
+        return (1, [1, 2, 3])
+
+
+class NodeWithForceInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "int_input": ("INT", {"forceInput": True}),
+                "int_input_widget": ("INT", {"default": 1}),
+            },
+            "optional": {"float_input": ("FLOAT", {"forceInput": True})},
+        }
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "node_with_force_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a forced input"
+
+    def node_with_force_input(
+        self, int_input: int, int_input_widget: int, float_input: float = 0.0
+    ):
+        print(
+            f"int_input: {int_input}, int_input_widget: {int_input_widget}, float_input: {float_input}"
+        )
+
+
+class NodeWithDefaultInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "int_input": ("INT", {"defaultInput": True}),
+                "int_input_widget": ("INT", {"default": 1}),
+            },
+            "optional": {"float_input": ("FLOAT", {"defaultInput": True})},
+        }
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "node_with_default_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a default input"
+
+    def node_with_default_input(
+        self, int_input: int, int_input_widget: int, float_input: float = 0.0
+    ):
+        print(
+            f"int_input: {int_input}, int_input_widget: {int_input_widget}, float_input: {float_input}"
+        )
+
+
+class NodeWithStringInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"string_input": ("STRING",)}}
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_string_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a string input"
+
+    def node_with_string_input(self, string_input: str):
+        print(f"string_input: {string_input}")
+
+
+class NodeWithUnionInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "optional": {
+                "string_or_int_input": ("STRING,INT",),
+                "string_input": ("STRING", {"forceInput": True}),
+                "int_input": ("INT", {"forceInput": True}),
+            }
+        }
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "node_with_union_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a union input"
+
+    def node_with_union_input(
+        self,
+        string_or_int_input: str | int = "",
+        string_input: str = "",
+        int_input: int = 0,
+    ):
+        print(
+            f"string_or_int_input: {string_or_int_input}, string_input: {string_input}, int_input: {int_input}"
+        )
+        return {
+            "ui": {
+                "text": string_or_int_input,
+            }
+        }
+
+
+class NodeWithBooleanInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"boolean_input": ("BOOLEAN",)}}
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_boolean_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a boolean input"
+
+    def node_with_boolean_input(self, boolean_input: bool):
+        print(f"boolean_input: {boolean_input}")
+
+
+class SimpleSlider:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "value": (
+                    "FLOAT",
+                    {
+                        "display": "slider",
+                        "default": 0.5,
+                        "min": 0.0,
+                        "max": 1.0,
+                        "step": 0.001,
+                    },
+                ),
+            },
+        }
+
+    RETURN_TYPES = ("FLOAT",)
+    FUNCTION = "execute"
+    CATEGORY = "DevTools"
+
+    def execute(self, value):
+        return (value,)
+
+
+class NodeWithSeedInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"seed": ("INT", {"default": 0})}}
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_seed_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a seed input"
+    OUTPUT_NODE = True
+
+    def node_with_seed_input(self, seed: int):
+        print(f"seed: {seed}")
+
+
+class NodeWithValidation:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {"int_input": ("INT",)},
+        }
+
+    @classmethod
+    def VALIDATE_INPUTS(cls, int_input: int):
+        if int_input < 0:
+            raise ValueError("int_input must be greater than 0")
+        return True
+
+    RETURN_TYPES = ()
+    FUNCTION = "execute"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that validates an input"
+    OUTPUT_NODE = True
+
+    def execute(self, int_input: int):
+        print(f"int_input: {int_input}")
+        return tuple()
+
+
+class NodeWithV2ComboInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "combo_input": (
+                    "COMBO",
+                    {"options": ["A", "B"]},
+                ),
+            }
+        }
+
+    RETURN_TYPES = ("COMBO",)
+    FUNCTION = "node_with_v2_combo_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = (
+        "A node that outputs a combo type that adheres to the v2 combo input spec"
+    )
+
+    def node_with_v2_combo_input(self, combo_input: str):
+        return (combo_input,)
+
+
+NODE_CLASS_MAPPINGS = {
+    "DevToolsLongComboDropdown": LongComboDropdown,
+    "DevToolsNodeWithOptionalInput": NodeWithOptionalInput,
+    "DevToolsNodeWithOptionalComboInput": NodeWithOptionalComboInput,
+    "DevToolsNodeWithOnlyOptionalInput": NodeWithOnlyOptionalInput,
+    "DevToolsNodeWithOutputList": NodeWithOutputList,
+    "DevToolsNodeWithForceInput": NodeWithForceInput,
+    "DevToolsNodeWithDefaultInput": NodeWithDefaultInput,
+    "DevToolsNodeWithStringInput": NodeWithStringInput,
+    "DevToolsNodeWithUnionInput": NodeWithUnionInput,
+    "DevToolsNodeWithBooleanInput": NodeWithBooleanInput,
+    "DevToolsSimpleSlider": SimpleSlider,
+    "DevToolsNodeWithSeedInput": NodeWithSeedInput,
+    "DevToolsNodeWithValidation": NodeWithValidation,
+    "DevToolsNodeWithV2ComboInput": NodeWithV2ComboInput,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "DevToolsLongComboDropdown": "Long Combo Dropdown",
+    "DevToolsNodeWithOptionalInput": "Node With Optional Input",
+    "DevToolsNodeWithOptionalComboInput": "Node With Optional Combo Input",
+    "DevToolsNodeWithOnlyOptionalInput": "Node With Only Optional Input",
+    "DevToolsNodeWithOutputList": "Node With Output List",
+    "DevToolsNodeWithForceInput": "Node With Force Input",
+    "DevToolsNodeWithDefaultInput": "Node With Default Input",
+    "DevToolsNodeWithStringInput": "Node With String Input",
+    "DevToolsNodeWithUnionInput": "Node With Union Input",
+    "DevToolsNodeWithBooleanInput": "Node With Boolean Input",
+    "DevToolsSimpleSlider": "Simple Slider",
+    "DevToolsNodeWithSeedInput": "Node With Seed Input",
+    "DevToolsNodeWithValidation": "Node With Validation",
+    "DevToolsNodeWithV2ComboInput": "Node With V2 Combo Input",
+}
+
+__all__ = [
+    "LongComboDropdown",
+    "NodeWithOptionalInput",
+    "NodeWithOptionalComboInput",
+    "NodeWithOnlyOptionalInput",
+    "NodeWithOutputList",
+    "NodeWithForceInput",
+    "NodeWithDefaultInput",
+    "NodeWithStringInput",
+    "NodeWithUnionInput",
+    "NodeWithBooleanInput",
+    "SimpleSlider",
+    "NodeWithSeedInput",
+    "NodeWithValidation",
+    "NodeWithV2ComboInput",
+    "NODE_CLASS_MAPPINGS",
+    "NODE_DISPLAY_NAME_MAPPINGS",
+]
diff --git a/tools/devtools/nodes/models.py b/tools/devtools/nodes/models.py
new file mode 100644
index 000000000..f40b1b0f5
--- /dev/null
+++ b/tools/devtools/nodes/models.py
@@ -0,0 +1,84 @@
+from __future__ import annotations
+
+import os
+
+import torch
+
+import comfy.utils as utils
+from comfy.model_patcher import ModelPatcher
+import nodes
+import folder_paths
+
+
+class DummyPatch(torch.nn.Module):
+    def __init__(self, module: torch.nn.Module, dummy_float: float = 0.0):
+        super().__init__()
+        self.module = module
+        self.dummy_float = dummy_float
+
+    def forward(self, *args, **kwargs):
+        if isinstance(self.module, DummyPatch):
+            raise Exception(f"Calling nested dummy patch! {self.dummy_float}")
+
+        return self.module(*args, **kwargs)
+
+
+class ObjectPatchNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "model": ("MODEL",),
+                "target_module": ("STRING", {"multiline": True}),
+            },
+            "optional": {
+                "dummy_float": ("FLOAT", {"default": 0.0}),
+            },
+        }
+
+    RETURN_TYPES = ("MODEL",)
+    FUNCTION = "apply_patch"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that applies an object patch"
+
+    def apply_patch(
+        self, model: ModelPatcher, target_module: str, dummy_float: float = 0.0
+    ) -> ModelPatcher:
+        module = utils.get_attr(model.model, target_module)
+        work_model = model.clone()
+        work_model.add_object_patch(target_module, DummyPatch(module, dummy_float))
+        return (work_model,)
+
+
+class LoadAnimatedImageTest(nodes.LoadImage):
+    @classmethod
+    def INPUT_TYPES(s):
+        input_dir = folder_paths.get_input_directory()
+        files = [
+            f
+            for f in os.listdir(input_dir)
+            if os.path.isfile(os.path.join(input_dir, f)) and f.endswith(".webp")
+        ]
+        files = folder_paths.filter_files_content_types(files, ["image"])
+        return {
+            "required": {"image": (sorted(files), {"animated_image_upload": True})},
+        }
+
+
+NODE_CLASS_MAPPINGS = {
+    "DevToolsObjectPatchNode": ObjectPatchNode,
+    "DevToolsLoadAnimatedImageTest": LoadAnimatedImageTest,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "DevToolsObjectPatchNode": "Object Patch Node",
+    "DevToolsLoadAnimatedImageTest": "Load Animated Image",
+}
+
+__all__ = [
+    "DummyPatch",
+    "ObjectPatchNode",
+    "LoadAnimatedImageTest",
+    "NODE_CLASS_MAPPINGS",
+    "NODE_DISPLAY_NAME_MAPPINGS",
+]
diff --git a/tools/devtools/nodes/remote.py b/tools/devtools/nodes/remote.py
new file mode 100644
index 000000000..12561ec8d
--- /dev/null
+++ b/tools/devtools/nodes/remote.py
@@ -0,0 +1,220 @@
+from __future__ import annotations
+
+
+class RemoteWidgetNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithParams:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "query_params": {
+                                "sort": "true",
+                            },
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = (
+        "A node that lazily fetches options from a remote endpoint with query params"
+    )
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithRefresh:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "refresh": 300,
+                            "max_retries": 10,
+                            "timeout": 256,
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and refresh the options every 300 ms"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithRefreshButton:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "refresh_button": True,
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and has a refresh button to manually reload options"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithControlAfterRefresh:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "refresh_button": True,
+                            "control_after_refresh": "first",
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and has a refresh button to manually reload options and select the first option on refresh"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class NodeWithOutputCombo:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "subset_options": (["A", "B"], {"forceInput": True}),
+                "subset_options_v2": (
+                    "COMBO",
+                    {"options": ["A", "B"], "forceInput": True},
+                ),
+            }
+        }
+
+    RETURN_TYPES = (["A", "B", "C"],)
+    FUNCTION = "node_with_output_combo"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that outputs a combo type"
+
+    def node_with_output_combo(self, subset_options: str):
+        return (subset_options,)
+
+
+class MultiSelectNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "foo": (
+                    "COMBO",
+                    {
+                        "options": ["A", "B", "C"],
+                        "multi_select": {
+                            "placeholder": "Choose foos",
+                            "chip": True,
+                        },
+                    },
+                )
+            }
+        }
+
+    RETURN_TYPES = ("STRING",)
+    OUTPUT_IS_LIST = [True]
+    FUNCTION = "multi_select_node"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that outputs a multi select type"
+
+    def multi_select_node(self, foo: list[str]) -> list[str]:
+        return (foo,)
+
+
+NODE_CLASS_MAPPINGS = {
+    "DevToolsRemoteWidgetNode": RemoteWidgetNode,
+    "DevToolsRemoteWidgetNodeWithParams": RemoteWidgetNodeWithParams,
+    "DevToolsRemoteWidgetNodeWithRefresh": RemoteWidgetNodeWithRefresh,
+    "DevToolsRemoteWidgetNodeWithRefreshButton": RemoteWidgetNodeWithRefreshButton,
+    "DevToolsRemoteWidgetNodeWithControlAfterRefresh": RemoteWidgetNodeWithControlAfterRefresh,
+    "DevToolsNodeWithOutputCombo": NodeWithOutputCombo,
+    "DevToolsMultiSelectNode": MultiSelectNode,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "DevToolsRemoteWidgetNode": "Remote Widget Node",
+    "DevToolsRemoteWidgetNodeWithParams": "Remote Widget Node With Sort Query Param",
+    "DevToolsRemoteWidgetNodeWithRefresh": "Remote Widget Node With 300ms Refresh",
+    "DevToolsRemoteWidgetNodeWithRefreshButton": "Remote Widget Node With Refresh Button",
+    "DevToolsRemoteWidgetNodeWithControlAfterRefresh": "Remote Widget Node With Refresh Button and Control After Refresh",
+    "DevToolsNodeWithOutputCombo": "Node With Output Combo",
+    "DevToolsMultiSelectNode": "Multi Select Node",
+}
+
+__all__ = [
+    "RemoteWidgetNode",
+    "RemoteWidgetNodeWithParams",
+    "RemoteWidgetNodeWithRefresh",
+    "RemoteWidgetNodeWithRefreshButton",
+    "RemoteWidgetNodeWithControlAfterRefresh",
+    "NodeWithOutputCombo",
+    "MultiSelectNode",
+    "NODE_CLASS_MAPPINGS",
+    "NODE_DISPLAY_NAME_MAPPINGS",
+]
diff --git a/tsconfig.json b/tsconfig.json
index e233d3d70..bc5bc61a5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -59,6 +59,7 @@
     "src/types/**/*.d.ts",
     "tailwind.config.ts",
     "tests-ui/**/*",
+    "vite.config.mts",
     "vitest.config.ts",
     // "vitest.setup.ts",
   ]
diff --git a/vite.config.mts b/vite.config.mts
index 32de5f6ed..ce22bf0a4 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,6 +1,7 @@
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import dotenv from 'dotenv'
+import { visualizer } from 'rollup-plugin-visualizer'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
@@ -16,6 +17,7 @@ dotenv.config()
 
 const IS_DEV = process.env.NODE_ENV === 'development'
 const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true'
+const ANALYZE_BUNDLE = process.env.ANALYZE_BUNDLE === 'true'
 // vite dev server will listen on all addresses, including LAN and public addresses
 const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
 const DISABLE_TEMPLATES_PROXY = process.env.DISABLE_TEMPLATES_PROXY === 'true'
@@ -24,6 +26,11 @@ const DISABLE_VUE_PLUGINS = process.env.DISABLE_VUE_PLUGINS === 'true'
 const DEV_SERVER_COMFYUI_URL =
   process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
 
+const DISTRIBUTION = (process.env.DISTRIBUTION || 'localhost') as
+  | 'desktop'
+  | 'localhost'
+  | 'cloud'
+
 export default defineConfig({
   base: '',
   server: {
@@ -158,7 +165,21 @@ export default defineConfig({
       deep: true,
       extensions: ['vue'],
       directoryAsNamespace: true
-    })
+    }),
+
+    // Bundle analyzer - generates dist/stats.html after build
+    // Only enabled when ANALYZE_BUNDLE=true
+    ...(ANALYZE_BUNDLE
+      ? [
+          visualizer({
+            filename: 'dist/stats.html',
+            open: false,
+            gzipSize: true,
+            brotliSize: true,
+            template: 'treemap' // or 'sunburst', 'network'
+          })
+        ]
+      : [])
   ],
 
   build: {
@@ -195,7 +216,8 @@ export default defineConfig({
     __SENTRY_DSN__: JSON.stringify(process.env.SENTRY_DSN || ''),
     __ALGOLIA_APP_ID__: JSON.stringify(process.env.ALGOLIA_APP_ID || ''),
     __ALGOLIA_API_KEY__: JSON.stringify(process.env.ALGOLIA_API_KEY || ''),
-    __USE_PROD_CONFIG__: process.env.USE_PROD_CONFIG === 'true'
+    __USE_PROD_CONFIG__: process.env.USE_PROD_CONFIG === 'true',
+    __DISTRIBUTION__: JSON.stringify(DISTRIBUTION)
   },
 
   resolve: {
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 56b24693e..86e72cf52 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -8,6 +8,7 @@ globalThis.__SENTRY_DSN__ = ''
 globalThis.__ALGOLIA_APP_ID__ = ''
 globalThis.__ALGOLIA_API_KEY__ = ''
 globalThis.__USE_PROD_CONFIG__ = false
+globalThis.__DISTRIBUTION__ = 'localhost'
 
 // Mock Worker for extendable-media-recorder
 globalThis.Worker = vi.fn().mockImplementation(() => ({