diff --git a/FEATURE_FLAGS_EXPLANATION.md b/FEATURE_FLAGS_EXPLANATION.md
new file mode 100644
index 0000000000..9e6f3599a4
--- /dev/null
+++ b/FEATURE_FLAGS_EXPLANATION.md
@@ -0,0 +1,229 @@
+# Feature Flags System Explanation
+
+## Overview
+
+The `useFeatureFlag` hook (actually named `useFeatureFlags`) is a Vue 3 composable that provides **reactive access to server-side feature flags** received via WebSocket from the backend. It enables capability negotiation between frontend and backend, allowing the UI to adapt based on what features the server supports.
+
+## Architecture Flow
+
+```
+1. Frontend connects via WebSocket
+2. Frontend sends client feature flags (first message)
+3. Backend responds with server feature flags
+4. Frontend stores flags in api.serverFeatureFlags
+5. Components use useFeatureFlags() to access flags reactively
+```
+
+## Core Implementation
+
+### 1. The `useFeatureFlags` Composable
+
+**Location:** `src/composables/useFeatureFlags.ts`
+
+The composable returns two things:
+
+#### A. Predefined `flags` Object
+A reactive object with getter properties for commonly-used feature flags:
+
+```typescript
+const { flags } = useFeatureFlags()
+
+// Access predefined flags
+flags.supportsPreviewMetadata  // boolean | undefined
+flags.maxUploadSize            // number | undefined
+flags.supportsManagerV4        // boolean | undefined
+flags.modelUploadButtonEnabled // boolean (checks remoteConfig first)
+flags.assetUpdateOptionsEnabled // boolean (checks remoteConfig first)
+```
+
+**Key Points:**
+- Uses Vue's `reactive()` to make the object reactive
+- Each getter calls `api.getServerFeature()` which reads from `api.serverFeatureFlags`
+- Some flags (like `modelUploadButtonEnabled`) check `remoteConfig` first (from `/api/features` endpoint) before falling back to WebSocket flags
+- Returns a `readonly()` wrapper to prevent external mutation
+
+#### B. Generic `featureFlag` Function
+A function that creates a computed ref for any feature flag path:
+
+```typescript
+const { featureFlag } = useFeatureFlags()
+
+// Create a reactive computed ref for any flag
+const myFlag = featureFlag('custom.feature.path', false) // defaultValue is optional
+// myFlag is a ComputedRef that updates when serverFeatureFlags changes
+```
+
+**Key Points:**
+- Accepts any string path (supports dot notation for nested values)
+- Returns a `computed()` ref that automatically updates when flags change
+- Generic type parameter allows type safety: `featureFlag<boolean>('flag', false)`
+
+### 2. The Underlying API Layer
+
+**Location:** `src/scripts/api.ts`
+
+The `ComfyApi` class manages feature flags:
+
+```typescript
+class ComfyApi {
+  // Stores flags received from backend
+  serverFeatureFlags: Record<string, unknown> = {}
+  
+  // Retrieves a flag value using dot notation
+  getServerFeature<T>(featureName: string, defaultValue?: T): T {
+    return get(this.serverFeatureFlags, featureName, defaultValue) as T
+  }
+}
+```
+
+**How Flags Are Received:**
+1. WebSocket connection is established
+2. Frontend sends client feature flags as first message
+3. Backend responds with a `feature_flags` message type
+4. The message handler stores it: `this.serverFeatureFlags = msg.data`
+
+**The `get` Function:**
+- Uses `es-toolkit/compat`'s `get` function (lodash-style)
+- Supports dot notation: `'extension.manager.supports_v4'` accesses nested objects
+- Returns `defaultValue` if the path doesn't exist
+
+### 3. Remote Config Integration
+
+**Location:** `src/platform/remoteConfig/remoteConfig.ts`
+
+Some flags check `remoteConfig` first (loaded from `/api/features` endpoint):
+
+```typescript
+// Example from modelUploadButtonEnabled
+return (
+  remoteConfig.value.model_upload_button_enabled ??  // Check remote config first
+  api.getServerFeature(ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED, false)  // Fallback
+)
+```
+
+**Why Two Sources?**
+- `remoteConfig`: Fetched via HTTP at app startup, can be updated without WebSocket
+- WebSocket flags: Real-time capability negotiation, updated on reconnection
+
+## Usage Patterns
+
+### Pattern 1: Using Predefined Flags
+
+```typescript
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+
+const { flags } = useFeatureFlags()
+
+// In template
+if (flags.supportsPreviewMetadata) {
+  // Use enhanced preview feature
+}
+
+// In script
+const maxSize = flags.maxUploadSize ?? 100 * 1024 * 1024 // Default 100MB
+```
+
+### Pattern 2: Using Generic featureFlag Function
+
+```typescript
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+
+const { featureFlag } = useFeatureFlags()
+
+// Create a reactive computed ref
+const customFeature = featureFlag<boolean>('extension.custom.feature', false)
+
+// Use in template (automatically reactive)
+// <div v-if="customFeature">New Feature UI</div>
+
+// Use in script
+watch(customFeature, (enabled) => {
+  if (enabled) {
+    // Feature was enabled
+  }
+})
+```
+
+### Pattern 3: Direct API Access (Non-Reactive)
+
+```typescript
+import { api } from '@/scripts/api'
+
+// Direct access (not reactive, use sparingly)
+if (api.serverSupportsFeature('supports_preview_metadata')) {
+  // Feature is supported
+}
+
+const maxSize = api.getServerFeature('max_upload_size', 100 * 1024 * 1024)
+```
+
+## Reactivity Explained
+
+The composable is **reactive** because:
+
+1. **Predefined flags**: Use `reactive()` with getters, so when `api.serverFeatureFlags` changes, Vue's reactivity system detects it
+2. **Generic featureFlag**: Returns `computed()`, which automatically tracks `api.getServerFeature()` calls and re-evaluates when flags change
+3. **WebSocket updates**: When flags are updated via WebSocket, `api.serverFeatureFlags` is reassigned, triggering reactivity
+
+## Adding New Feature Flags
+
+### Step 1: Add to Enum (if it's a core flag)
+
+```typescript
+// In useFeatureFlags.ts
+export enum ServerFeatureFlag {
+  // ... existing flags
+  MY_NEW_FEATURE = 'my_new_feature'
+}
+```
+
+### Step 2: Add to flags Object (if commonly used)
+
+```typescript
+// In useFeatureFlags.ts flags object
+get myNewFeature() {
+  return api.getServerFeature(ServerFeatureFlag.MY_NEW_FEATURE, false)
+}
+```
+
+### Step 3: Use in Components
+
+```typescript
+const { flags } = useFeatureFlags()
+if (flags.myNewFeature) {
+  // Use the feature
+}
+```
+
+**OR** use the generic function without modifying the composable:
+
+```typescript
+const { featureFlag } = useFeatureFlags()
+const myFeature = featureFlag('my_new_feature', false)
+```
+
+## Important Notes
+
+1. **Flags are server-driven**: The backend controls which flags are available
+2. **Default values**: Always provide sensible defaults when using `getServerFeature()`
+3. **Reactivity**: The composable ensures UI updates automatically when flags change (e.g., on WebSocket reconnection)
+4. **Type safety**: Use TypeScript generics with `featureFlag<T>()` for type safety
+5. **Dot notation**: Feature flags can be nested, use dot notation: `'extension.manager.supports_v4'`
+6. **Remote config priority**: Some flags check `remoteConfig` first, then fall back to WebSocket flags
+
+## Testing
+
+See `tests-ui/tests/composables/useFeatureFlags.test.ts` for examples of:
+- Mocking `api.getServerFeature()`
+- Testing reactive behavior
+- Testing default values
+- Testing nested paths
+
+## Related Files
+
+- `src/composables/useFeatureFlags.ts` - The main composable
+- `src/scripts/api.ts` - API layer with `getServerFeature()` method
+- `src/platform/remoteConfig/remoteConfig.ts` - Remote config integration
+- `docs/FEATURE_FLAGS.md` - Full system documentation
+- `tests-ui/tests/composables/useFeatureFlags.test.ts` - Unit tests
+
diff --git a/FEATURE_FLAG_PAYLOAD.md b/FEATURE_FLAG_PAYLOAD.md
new file mode 100644
index 0000000000..421e14321d
--- /dev/null
+++ b/FEATURE_FLAG_PAYLOAD.md
@@ -0,0 +1,196 @@
+# Feature Flag Payload Shape
+
+## Feature Flag Key
+`demo-run-button-experiment`
+
+## Expected Structure
+
+The feature flag value should be either:
+
+### Control (Original Button)
+- `false`
+- `null`
+- `undefined`
+- Not set
+
+When any of these values are present, the original SplitButton will be displayed.
+
+### Experiment (Experimental Button)
+An object with the following structure:
+
+```typescript
+{
+  variant: string,           // Required: variant name (e.g., "bold-gradient", "animated", "playful", "minimal")
+  payload?: {                // Optional: styling and content overrides
+    label?: string,          // Button text (default: "Run")
+    icon?: string,           // Icon class (default: variant-specific)
+    backgroundColor?: string, // Background color/class (default: variant-specific)
+    textColor?: string,      // Text color/class (default: variant-specific)
+    borderRadius?: string,   // Border radius class (default: variant-specific)
+    padding?: string         // Padding class (default: "px-4 py-2")
+  }
+}
+```
+
+## Example Payloads
+
+### Bold Gradient Variant
+```json
+{
+  "variant": "bold-gradient",
+  "payload": {
+    "label": "Run",
+    "icon": "icon-[lucide--zap]",
+    "backgroundColor": "transparent",
+    "textColor": "white",
+    "borderRadius": "rounded-xl"
+  }
+}
+```
+
+### Animated Variant
+```json
+{
+  "variant": "animated",
+  "payload": {
+    "label": "Launch",
+    "icon": "icon-[lucide--rocket]",
+    "backgroundColor": "bg-primary-background",
+    "textColor": "white",
+    "borderRadius": "rounded-full"
+  }
+}
+```
+
+### Playful Variant
+```json
+{
+  "variant": "playful",
+  "payload": {
+    "label": "Go!",
+    "icon": "icon-[lucide--sparkles]",
+    "backgroundColor": "bg-gradient-to-br from-yellow-400 to-orange-500",
+    "textColor": "white",
+    "borderRadius": "rounded-2xl"
+  }
+}
+```
+
+### Minimal Variant
+```json
+{
+  "variant": "minimal",
+  "payload": {
+    "label": "Run",
+    "icon": "icon-[lucide--play]",
+    "backgroundColor": "bg-white",
+    "textColor": "text-gray-800",
+    "borderRadius": "rounded-md"
+  }
+}
+```
+
+## Payload Properties
+
+### `variant` (required)
+- Type: `string`
+- Description: The variant name that determines the base styling and behavior
+- Supported values:
+  - `"bold-gradient"` - Gradient background with animated effect
+  - `"animated"` - Pulsing animation effect
+  - `"playful"` - Sparkle effects with playful styling
+  - `"minimal"` - Clean, minimal design
+  - Any custom variant name (will use default styling)
+
+### `payload.label` (optional)
+- Type: `string`
+- Default: `"Run"` (or variant-specific default)
+- Description: The text displayed on the button
+
+### `payload.icon` (optional)
+- Type: `string`
+- Default: Variant-specific icon
+- Description: Icon class name (e.g., `"icon-[lucide--play]"`)
+- Examples:
+  - `"icon-[lucide--play]"` - Play icon
+  - `"icon-[lucide--zap]"` - Lightning bolt
+  - `"icon-[lucide--rocket]"` - Rocket
+  - `"icon-[lucide--sparkles]"` - Sparkles
+
+### `payload.backgroundColor` (optional)
+- Type: `string`
+- Default: Variant-specific background
+- Description: Tailwind CSS class or CSS color value for background
+- Examples:
+  - `"bg-primary-background"` - Primary background color
+  - `"bg-white"` - White background
+  - `"transparent"` - Transparent (for gradient overlays)
+  - `"bg-gradient-to-br from-yellow-400 to-orange-500"` - Gradient
+
+### `payload.textColor` (optional)
+- Type: `string`
+- Default: Variant-specific text color
+- Description: Tailwind CSS class or CSS color value for text
+- Examples:
+  - `"white"` - White text (CSS color)
+  - `"text-white"` - White text (Tailwind class)
+  - `"text-gray-800"` - Dark gray text
+
+### `payload.borderRadius` (optional)
+- Type: `string`
+- Default: Variant-specific border radius
+- Description: Tailwind CSS border radius class
+- Examples:
+  - `"rounded-md"` - Medium border radius
+  - `"rounded-xl"` - Extra large border radius
+  - `"rounded-full"` - Fully rounded (pill shape)
+  - `"rounded-2xl"` - 2x extra large border radius
+
+### `payload.padding` (optional)
+- Type: `string`
+- Default: `"px-4 py-2"`
+- Description: Tailwind CSS padding classes
+- Examples:
+  - `"px-4 py-2"` - Standard padding
+  - `"px-6 py-3"` - Larger padding
+  - `"px-2 py-1"` - Smaller padding
+
+## Backend Integration
+
+The backend should send this feature flag via WebSocket in the `feature_flags` message:
+
+```json
+{
+  "type": "feature_flags",
+  "data": {
+    "demo-run-button-experiment": {
+      "variant": "bold-gradient",
+      "payload": {
+        "label": "Run",
+        "icon": "icon-[lucide--zap]",
+        "textColor": "white",
+        "borderRadius": "rounded-xl"
+      }
+    }
+  }
+}
+```
+
+Or to show the control (original button):
+
+```json
+{
+  "type": "feature_flags",
+  "data": {
+    "demo-run-button-experiment": false
+  }
+}
+```
+
+## Notes
+
+- All `payload` properties are optional - if omitted, variant-specific defaults will be used
+- The `variant` property is required when the flag is truthy
+- Color values can be either Tailwind classes (e.g., `"text-white"`) or CSS color values (e.g., `"white"`)
+- The component will automatically handle both formats
+
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 db48e79237..c642e6bed4 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 879d866284..2180922d9a 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/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 0bfc41ae25..b3faaced03 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-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 7971b70119..b66692cdb2 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 9b6c23c5e1..adf81b55c4 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 fee337f287..9ded7395f6 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 3cb8614c18..36cdb4ffba 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 7da0164d6b..31a6219b4b 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 55d488c821..4951feb36c 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 75c2b82e8e..fdfd695397 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 bd292f07fb..2df57ff550 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 ebb8299532..3a004a7b86 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/resize.spec.ts b/browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
new file mode 100644
index 0000000000..7ea5bf965b
--- /dev/null
+++ b/browser_tests/tests/vueNodes/interactions/node/resize.spec.ts
@@ -0,0 +1,54 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Node Resizing', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should resize node without position drift after selecting', async ({
+    comfyPage
+  }) => {
+    // Get a Vue node fixture
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    const initialBox = await node.boundingBox()
+    if (!initialBox) throw new Error('Node bounding box not found')
+
+    // Select the node first (this was causing the bug)
+    await node.header.click()
+    await comfyPage.page.waitForTimeout(100) // Brief pause after selection
+
+    // Get position after selection
+    const selectedBox = await node.boundingBox()
+    if (!selectedBox)
+      throw new Error('Node bounding box not found after select')
+
+    // Verify position unchanged after selection
+    expect(selectedBox.x).toBeCloseTo(initialBox.x, 1)
+    expect(selectedBox.y).toBeCloseTo(initialBox.y, 1)
+
+    // Now resize from bottom-right corner
+    const resizeStartX = selectedBox.x + selectedBox.width - 5
+    const resizeStartY = selectedBox.y + selectedBox.height - 5
+
+    await comfyPage.page.mouse.move(resizeStartX, resizeStartY)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(resizeStartX + 50, resizeStartY + 30)
+    await comfyPage.page.mouse.up()
+
+    // Get final position and size
+    const finalBox = await node.boundingBox()
+    if (!finalBox) throw new Error('Node bounding box not found after resize')
+
+    // Position should NOT have changed (the bug was position drift)
+    expect(finalBox.x).toBeCloseTo(initialBox.x, 1)
+    expect(finalBox.y).toBeCloseTo(initialBox.y, 1)
+
+    // Size should have increased
+    expect(finalBox.width).toBeGreaterThan(initialBox.width)
+    expect(finalBox.height).toBeGreaterThan(initialBox.height)
+  })
+})
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
index 465933484f..3049bf7192 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png 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/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 d8bcc4d257..73c8450986 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 68fd80359f..5776f8871e 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 557837747c..24a30c3f66 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/lod.spec.ts b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
deleted file mode 100644
index 96ab721cad..0000000000
--- a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
-
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
-
-test.describe('Vue Nodes - LOD', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.loadWorkflow('default')
-    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
-  })
-
-  test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
-
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-default.png')
-
-    const vueNodesContainer = comfyPage.vueNodes.nodes
-    const textboxesInNodes = vueNodesContainer.getByRole('textbox')
-    const comboboxesInNodes = vueNodesContainer.getByRole('combobox')
-
-    await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(comboboxesInNodes.first()).toBeVisible()
-
-    await comfyPage.zoom(120, 10)
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
-
-    await expect(textboxesInNodes.first()).toBeHidden()
-    await expect(comboboxesInNodes.first()).toBeHidden()
-
-    await comfyPage.zoom(-120, 10)
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-nodes-lod-inactive.png'
-    )
-    await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(comboboxesInNodes.first()).toBeVisible()
-  })
-})
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
index e2ff270455..cf91eb87b2 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png 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 4950f265b9..7cc08fbc55 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/build/plugins/comfyAPIPlugin.ts b/build/plugins/comfyAPIPlugin.ts
index 3e9a9e5b98..1a3b8d93d5 100644
--- a/build/plugins/comfyAPIPlugin.ts
+++ b/build/plugins/comfyAPIPlugin.ts
@@ -88,12 +88,14 @@ export function comfyAPIPlugin(isDev: boolean): Plugin {
 
         if (result.exports.length > 0) {
           const projectRoot = process.cwd()
-          const relativePath = path.relative(path.join(projectRoot, 'src'), id)
+          const relativePath = path
+            .relative(path.join(projectRoot, 'src'), id)
+            .replace(/\\/g, '/')
           const shimFileName = relativePath.replace(/\.ts$/, '.js')
 
           let shimContent = `// Shim for ${relativePath}\n`
 
-          const fileKey = relativePath.replace(/\.ts$/, '').replace(/\\/g, '/')
+          const fileKey = relativePath.replace(/\.ts$/, '')
           const warningMessage = getWarningMessage(fileKey, shimFileName)
 
           if (warningMessage) {
diff --git a/cloud-loader-dropdown.md b/cloud-loader-dropdown.md
new file mode 100644
index 0000000000..84ef263857
--- /dev/null
+++ b/cloud-loader-dropdown.md
@@ -0,0 +1,24 @@
+Fixes loader dropdown placeholder
+===============================
+
+Cloud loader dropdowns hydrate via `useAssetWidgetData(nodeType)`, so `dropdownItems` stays empty until the Asset API returns friendly filenames. Meanwhile `modelValue` already holds the saved asset and the watcher at [WidgetSelectDropdown.vue#L215-L227](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue#L215-L227) only tracks `modelValue`. It runs before assets load, fails to find a match, clears `selectedSet`, and the placeholder persists.
+
+```ts
+watch(
+  modelValue,
+  (currentValue) => {
+    if (currentValue === undefined) {
+      selectedSet.value.clear()
+      return
+    }
+    const item = dropdownItems.value.find((item) => item.name === currentValue)
+    if (item) {
+      selectedSet.value.clear()
+      selectedSet.value.add(item.id)
+    }
+  },
+  { immediate: true }
+)
+```
+
+Once the API resolves, `dropdownItems` recomputes but nothing resyncs because the watcher never sees that change. Desktop doesn’t hit this because it still reads from `widget.options.values` immediately.
diff --git a/frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue b/frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue
new file mode 100644
index 0000000000..4f231bb100
--- /dev/null
+++ b/frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue
@@ -0,0 +1,56 @@
+<template>
+  <!-- If user has active subscription, show ComfyQueueButton (which already has FeatureFlaggedRunButton) -->
+  <ComfyQueueButton v-if="isActiveSubscription" />
+
+  <!-- If subscription required but not active, wrap SubscribeToRunButton with feature flag -->
+  <FeatureFlaggedRunButton
+    v-else
+    flag-key="demo-run-button-experiment"
+    :on-click="handleSubscribeClick"
+  >
+    <template #control>
+      <!-- SubscribeToRunButton handles its own click (shows subscription dialog) -->
+      <SubscribeToRunButton />
+    </template>
+  </FeatureFlaggedRunButton>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+import ComfyQueueButton from './ComfyQueueButton.vue'
+import FeatureFlaggedRunButton from './FeatureFlaggedRunButton.vue'
+import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
+
+// Get subscription status - replace with actual subscription store/composable
+const isActiveSubscription = computed(() => {
+  // TODO: Replace with actual subscription check
+  // Example: return useSubscriptionStore().isActiveSubscription
+  // For now, this would typically come from a store or composable
+  return false
+})
+
+const commandStore = useCommandStore()
+
+// Handle click for experimental button when SubscribeToRunButton is shown
+// For experimental variants, trigger queue prompt (same as ComfyQueueButton)
+// For control, SubscribeToRunButton handles its own click (shows subscription dialog)
+const handleSubscribeClick = async (e: Event) => {
+  // If this is called from the experimental button, trigger queue prompt
+  // If called from SubscribeToRunButton (control), it will handle its own logic
+  const isShiftPressed = 'shiftKey' in e && e.shiftKey
+  const commandId = isShiftPressed
+    ? 'Comfy.QueuePromptFront'
+    : 'Comfy.QueuePrompt'
+
+  await commandStore.execute(commandId, {
+    metadata: {
+      subscribe_to_run: false,
+      trigger_source: 'button'
+    }
+  })
+}
+</script>
+
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 9c75987f6d..082d1baf11 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -1329,57 +1329,6 @@ audio.comfy-audio.empty-audio-widget {
   will-change: transform;
 }
 
-/* START LOD specific styles */
-/* LOD styles - Custom CSS avoids 100+ Tailwind selectors that would slow style recalculation when .isLOD toggles */
-
-.isLOD .lg-node {
-  box-shadow: none;
-  filter: none;
-  backdrop-filter: none;
-  text-shadow: none;
-  mask-image: none;
-  clip-path: none;
-  background-image: none;
-  text-rendering: optimizeSpeed;
-  border-radius: 0;
-  contain: layout style;
-  transition: none;
-}
-
-.isLOD .lg-node-header {
-  border-radius: 0;
-  pointer-events: none;
-}
-
-.isLOD .lg-node-widgets {
-  pointer-events: none;
-}
-
-.lod-toggle {
-  visibility: visible;
-}
-
-.isLOD .lod-toggle {
-  visibility: hidden;
-}
-
-.lod-fallback {
-  display: none;
-}
-
-.isLOD .lod-fallback {
-  display: block;
-}
-
-.isLOD .image-preview img {
-  image-rendering: pixelated;
-}
-
-.isLOD .slot-dot {
-  border-radius: 0;
-}
-/* END LOD specific styles */
-
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
   #maskEditor_brush {
diff --git a/public/assets/images/cloud-subscription.webm b/public/assets/images/cloud-subscription.webm
index ec81ab6d1e..f26392a66e 100644
Binary files a/public/assets/images/cloud-subscription.webm and b/public/assets/images/cloud-subscription.webm differ
diff --git a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
index db28d980c7..3c02303a00 100644
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -1,35 +1,42 @@
 <template>
   <div class="queue-button-group flex">
-    <SplitButton
-      v-tooltip.bottom="{
-        value: queueButtonTooltip,
-        showDelay: 600
-      }"
-      class="comfyui-queue-button"
-      :label="String(activeQueueModeMenuItem?.label ?? '')"
-      severity="primary"
-      size="small"
-      :model="queueModeMenuItems"
-      data-testid="queue-button"
-      @click="queuePrompt"
+    <FeatureFlaggedRunButton
+      flag-key="demo-run-button-experiment"
+      :on-click="queuePrompt"
     >
-      <template #icon>
-        <i :class="iconClass" />
-      </template>
-      <template #item="{ item }">
-        <Button
-          v-tooltip="{
-            value: item.tooltip,
+      <template #control>
+        <SplitButton
+          v-tooltip.bottom="{
+            value: queueButtonTooltip,
             showDelay: 600
           }"
-          :label="String(item.label ?? '')"
-          :icon="item.icon"
-          :severity="item.key === queueMode ? 'primary' : 'secondary'"
+          class="comfyui-queue-button"
+          :label="String(activeQueueModeMenuItem?.label ?? '')"
+          severity="primary"
           size="small"
-          text
-        />
+          :model="queueModeMenuItems"
+          data-testid="queue-button"
+          @click="queuePrompt"
+        >
+          <template #icon>
+            <i :class="iconClass" />
+          </template>
+          <template #item="{ item }">
+            <Button
+              v-tooltip="{
+                value: item.tooltip,
+                showDelay: 600
+              }"
+              :label="String(item.label ?? '')"
+              :icon="item.icon"
+              :severity="item.key === queueMode ? 'primary' : 'secondary'"
+              size="small"
+              text
+            />
+          </template>
+        </SplitButton>
       </template>
-    </SplitButton>
+    </FeatureFlaggedRunButton>
     <BatchCountEdit />
   </div>
 </template>
@@ -44,17 +51,23 @@ import { useI18n } from 'vue-i18n'
 
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 import BatchCountEdit from '../BatchCountEdit.vue'
+import FeatureFlaggedRunButton from './FeatureFlaggedRunButton.vue'
 
 const workspaceStore = useWorkspaceStore()
 const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
-const { hasMissingNodes } = useMissingNodes()
+const nodeDefStore = useNodeDefStore()
+const hasMissingNodes = computed(() =>
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+)
 
 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {
diff --git a/src/components/actionbar/ComfyRunButton/ExperimentalRunButton.vue b/src/components/actionbar/ComfyRunButton/ExperimentalRunButton.vue
new file mode 100644
index 0000000000..32bdd600d2
--- /dev/null
+++ b/src/components/actionbar/ComfyRunButton/ExperimentalRunButton.vue
@@ -0,0 +1,252 @@
+<template>
+  <div
+    :class="buttonClasses"
+    :style="buttonStyles"
+    class="experimental-run-button relative overflow-hidden transition-all duration-300"
+    @click="handleClick"
+  >
+    <!-- Animated background for gradient variant -->
+    <div
+      v-if="variantName === 'bold-gradient'"
+      class="absolute inset-0 animate-gradient bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 opacity-90"
+    />
+
+    <!-- Pulsing animation for animated variant -->
+    <div
+      v-if="variantName === 'animated'"
+      class="absolute inset-0 animate-pulse bg-primary-background opacity-20"
+    />
+
+    <!-- Sparkle effect for playful variant -->
+    <div
+      v-if="variantName === 'playful'"
+      class="absolute inset-0 overflow-hidden"
+    >
+      <i
+        v-for="i in 3"
+        :key="i"
+        :class="sparkleClasses[i - 1]"
+        class="absolute animate-sparkle text-yellow-300"
+        :style="sparkleStyles[i - 1]"
+      >
+        ✨
+      </i>
+    </div>
+
+    <!-- Button content -->
+    <div class="relative z-10 flex items-center justify-center gap-2">
+      <i :class="iconClass" class="text-lg" />
+      <span :class="labelClasses" :style="labelStyles" class="font-semibold">
+        {{ label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { FeatureFlagVariant } from '@/composables/useFeatureFlags'
+
+const props = defineProps<{
+  variant: FeatureFlagVariant
+  onClick: () => void
+}>()
+
+const variantName = computed(() => props.variant.variant)
+const payload = computed(() => props.variant.payload || {})
+
+// Extract styling from payload with defaults
+const backgroundColor = computed(
+  () => (payload.value.backgroundColor as string) || getDefaultColor()
+)
+const textColor = computed(
+  () => (payload.value.textColor as string) || getDefaultTextColor()
+)
+const borderRadius = computed(
+  () => (payload.value.borderRadius as string) || getDefaultBorderRadius()
+)
+const icon = computed(() => (payload.value.icon as string) || getDefaultIcon())
+const label = computed(() => (payload.value.label as string) || 'Run')
+const padding = computed(() => (payload.value.padding as string) || 'px-4 py-2')
+
+// Size matching - should match PrimeVue small button size
+const buttonSize = computed(() => {
+  return 'text-sm' // Match PrimeVue small button
+})
+
+function getDefaultColor(): string {
+  switch (variantName.value) {
+    case 'bold-gradient':
+      return 'transparent' // Gradient overlay handles it
+    case 'animated':
+      return 'bg-primary-background'
+    case 'playful':
+      return 'bg-gradient-to-br from-yellow-400 to-orange-500'
+    case 'minimal':
+      return 'bg-white border-2 border-gray-300'
+    default:
+      return 'bg-primary-background'
+  }
+}
+
+function getDefaultTextColor(): string {
+  switch (variantName.value) {
+    case 'bold-gradient':
+      return 'text-white'
+    case 'animated':
+      return 'text-white'
+    case 'playful':
+      return 'text-white'
+    case 'minimal':
+      return 'text-gray-800'
+    default:
+      return 'text-white'
+  }
+}
+
+function getDefaultBorderRadius(): string {
+  switch (variantName.value) {
+    case 'bold-gradient':
+      return 'rounded-xl'
+    case 'animated':
+      return 'rounded-full'
+    case 'playful':
+      return 'rounded-2xl'
+    case 'minimal':
+      return 'rounded-md'
+    default:
+      return 'rounded-lg'
+  }
+}
+
+function getDefaultIcon(): string {
+  switch (variantName.value) {
+    case 'bold-gradient':
+      return 'icon-[lucide--zap]'
+    case 'animated':
+      return 'icon-[lucide--rocket]'
+    case 'playful':
+      return 'icon-[lucide--sparkles]'
+    case 'minimal':
+      return 'icon-[lucide--play]'
+    default:
+      return 'icon-[lucide--play]'
+  }
+}
+
+const buttonClasses = computed(() => {
+  const base = [
+    'cursor-pointer',
+    'select-none',
+    'flex',
+    'items-center',
+    'justify-center',
+    padding.value,
+    borderRadius.value,
+    'shadow-lg',
+    'hover:scale-105',
+    'active:scale-95',
+    'transition-transform',
+    buttonSize.value
+  ]
+
+  // Add variant-specific classes
+  if (variantName.value === 'bold-gradient') {
+    base.push('text-white', 'font-bold')
+  } else if (variantName.value === 'animated') {
+    base.push('text-white', 'font-bold', 'hover:shadow-2xl')
+  } else if (variantName.value === 'playful') {
+    base.push('text-white', 'font-bold', 'hover:rotate-1')
+  } else if (variantName.value === 'minimal') {
+    base.push('bg-white', 'text-gray-800', 'hover:bg-gray-50')
+  } else {
+    base.push(backgroundColor.value, textColor.value)
+  }
+
+  return base.join(' ')
+})
+
+const buttonStyles = computed(() => {
+  const styles: Record<string, string> = {}
+
+  // Apply custom styles from payload
+  if (payload.value.backgroundColor && variantName.value !== 'bold-gradient') {
+    styles.backgroundColor = backgroundColor.value
+  }
+  if (payload.value.textColor) {
+    styles.color = textColor.value
+  }
+  if (payload.value.borderRadius && !borderRadius.value.includes('rounded')) {
+    styles.borderRadius = borderRadius.value
+  }
+
+  return styles
+})
+
+const iconClass = computed(() => icon.value)
+
+// Text color handling - can be a CSS class or a color value
+const labelClasses = computed(() => {
+  // If textColor is a Tailwind class, return it; otherwise it's handled by inline styles
+  if (textColor.value.startsWith('text-')) {
+    return textColor.value
+  }
+  return ''
+})
+
+const labelStyles = computed(() => {
+  const styles: Record<string, string> = {}
+  // If textColor is not a Tailwind class, use it as a color value
+  if (!textColor.value.startsWith('text-')) {
+    styles.color = textColor.value
+  }
+  return styles
+})
+
+// Sparkle animation positions for playful variant
+const sparkleClasses = ['top-2 left-4', 'top-4 right-6', 'bottom-2 left-1/2']
+
+const sparkleStyles = [
+  { animationDelay: '0s', animationDuration: '2s' },
+  { animationDelay: '0.5s', animationDuration: '2.5s' },
+  { animationDelay: '1s', animationDuration: '3s' }
+]
+
+function handleClick() {
+  props.onClick()
+}
+</script>
+
+<style scoped>
+@keyframes gradient {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient 3s ease infinite;
+}
+
+@keyframes sparkle {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0) rotate(0deg);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1) rotate(180deg);
+  }
+}
+
+.animate-sparkle {
+  animation: sparkle 2s ease-in-out infinite;
+}
+</style>
diff --git a/src/components/actionbar/ComfyRunButton/FeatureFlaggedRunButton.vue b/src/components/actionbar/ComfyRunButton/FeatureFlaggedRunButton.vue
new file mode 100644
index 0000000000..13caff89ca
--- /dev/null
+++ b/src/components/actionbar/ComfyRunButton/FeatureFlaggedRunButton.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="feature-flagged-run-button">
+    <!-- Control: Original button -->
+    <slot v-if="!isExperimentActive" name="control" />
+
+    <!-- Experiment: Experimental button -->
+    <ExperimentalRunButton
+      v-else-if="variant"
+      :variant="variant"
+      :on-click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import type { FeatureFlagVariant } from '@/composables/useFeatureFlags'
+
+import ExperimentalRunButton from './ExperimentalRunButton.vue'
+
+const props = defineProps<{
+  flagKey?: string
+  onClick: (e: Event) => void | Promise<void>
+}>()
+
+const flagKey = computed(() => props.flagKey || 'demo-run-button-experiment')
+
+const { featureFlag } = useFeatureFlags()
+const flagValue = featureFlag<FeatureFlagVariant | boolean | null>(
+  flagKey.value,
+  false
+)
+
+const variant = computed<FeatureFlagVariant | null>(() => {
+  const value = flagValue.value
+  if (
+    typeof value === 'object' &&
+    value !== null &&
+    'variant' in value &&
+    typeof (value as FeatureFlagVariant).variant === 'string'
+  ) {
+    return value as FeatureFlagVariant
+  }
+  return null
+})
+
+const isExperimentActive = computed(() => {
+  return variant.value !== null
+})
+
+const handleClick = () => {
+  // Create a synthetic event for the onClick handler
+  const syntheticEvent = new Event('click') as Event
+  props.onClick(syntheticEvent)
+}
+</script>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index 2e86925585..2181cce1b0 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -64,11 +64,13 @@ import {
   ComfyWorkflow,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { appendJsonExt } from '@/utils/formatUtil'
-import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 interface Props {
   item: MenuItem
@@ -79,7 +81,10 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 })
 
-const { hasMissingNodes } = useMissingNodes()
+const nodeDefStore = useNodeDefStore()
+const hasMissingNodes = computed(() =>
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+)
 
 const { t } = useI18n()
 const menu = ref<InstanceType<typeof Menu> & MenuState>()
diff --git a/src/components/sidebar/ComfyMenuButton.vue b/src/components/sidebar/ComfyMenuButton.vue
index b1eb5cc9df..8af51fb694 100644
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -73,6 +73,7 @@
         @click.stop="handleNodes2ToggleClick"
       >
         <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
+        <Tag severity="info" class="ml-2 text-xs">{{ $t('g.beta') }}</Tag>
         <ToggleSwitch
           v-model="nodes2Enabled"
           class="ml-4"
@@ -101,6 +102,7 @@
 
 <script setup lang="ts">
 import type { MenuItem } from 'primevue/menuitem'
+import Tag from 'primevue/tag'
 import TieredMenu from 'primevue/tieredmenu'
 import type { TieredMenuMethods, TieredMenuState } from 'primevue/tieredmenu'
 import ToggleSwitch from 'primevue/toggleswitch'
diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts
index 7f17440149..dfc2ac06aa 100644
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -3,7 +3,6 @@ import { shallowRef, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
-import { useRenderModeSetting } from '@/composables/settings/useRenderModeSetting'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -11,6 +10,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
+import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
 import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
 import { app as comfyApp } from '@/scripts/app'
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -26,11 +26,6 @@ function useVueNodeLifecycleIndividual() {
 
   let hasShownMigrationToast = false
 
-  useRenderModeSetting(
-    { setting: 'LiteGraph.Canvas.MinFontSizeForLOD', vue: 0, litegraph: 8 },
-    shouldRenderVueNodes
-  )
-
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
     const activeGraph = comfyApp.canvas?.graph
@@ -44,7 +39,10 @@ function useVueNodeLifecycleIndividual() {
     const nodes = activeGraph._nodes.map((node: LGraphNode) => ({
       id: node.id.toString(),
       pos: [node.pos[0], node.pos[1]] as [number, number],
-      size: [node.size[0], node.size[1]] as [number, number]
+      size: [node.size[0], removeNodeTitleHeight(node.size[1])] as [
+        number,
+        number
+      ]
     }))
     layoutStore.initializeFromLiteGraph(nodes)
 
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index 8e9811e37c..b8c4da046d 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -49,6 +49,21 @@ const calculateRunwayDurationPrice = (node: LGraphNode): string => {
   return `$${cost}/Run`
 }
 
+const makeOmniProDurationCalculator =
+  (pricePerSecond: number): PricingFunction =>
+  (node: LGraphNode): string => {
+    const durationWidget = node.widgets?.find(
+      (w) => w.name === 'duration'
+    ) as IComboWidget
+    if (!durationWidget) return `$${pricePerSecond.toFixed(3)}/second`
+
+    const seconds = parseFloat(String(durationWidget.value))
+    if (!Number.isFinite(seconds)) return `$${pricePerSecond.toFixed(3)}/second`
+
+    const cost = pricePerSecond * seconds
+    return `$${cost.toFixed(2)}/Run`
+  }
+
 const pixversePricingCalculator = (node: LGraphNode): string => {
   const durationWidget = node.widgets?.find(
     (w) => w.name === 'duration_seconds'
@@ -131,6 +146,11 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
       '720p': [0.51, 0.56],
       '1080p': [1.18, 1.22]
     },
+    'seedance-1-0-pro-fast': {
+      '480p': [0.09, 0.1],
+      '720p': [0.21, 0.23],
+      '1080p': [0.47, 0.49]
+    },
     'seedance-1-0-lite': {
       '480p': [0.17, 0.18],
       '720p': [0.37, 0.41],
@@ -138,11 +158,13 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
     }
   }
 
-  const modelKey = model.includes('seedance-1-0-pro')
-    ? 'seedance-1-0-pro'
-    : model.includes('seedance-1-0-lite')
-      ? 'seedance-1-0-lite'
-      : ''
+  const modelKey = model.includes('seedance-1-0-pro-fast')
+    ? 'seedance-1-0-pro-fast'
+    : model.includes('seedance-1-0-pro')
+      ? 'seedance-1-0-pro'
+      : model.includes('seedance-1-0-lite')
+        ? 'seedance-1-0-lite'
+        : ''
 
   const resKey = resolution.includes('1080')
     ? '1080p'
@@ -699,6 +721,21 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     KlingVirtualTryOnNode: {
       displayPrice: '$0.07/Run'
     },
+    KlingOmniProTextToVideoNode: {
+      displayPrice: makeOmniProDurationCalculator(0.112)
+    },
+    KlingOmniProFirstLastFrameNode: {
+      displayPrice: makeOmniProDurationCalculator(0.112)
+    },
+    KlingOmniProImageToVideoNode: {
+      displayPrice: makeOmniProDurationCalculator(0.112)
+    },
+    KlingOmniProVideoToVideoNode: {
+      displayPrice: makeOmniProDurationCalculator(0.168)
+    },
+    KlingOmniProEditVideoNode: {
+      displayPrice: '$0.168/second'
+    },
     LumaImageToVideoNode: {
       displayPrice: (node: LGraphNode): string => {
         // Same pricing as LumaVideoNode per CSV
@@ -1873,6 +1910,10 @@ export const useNodePricing = () => {
       KlingDualCharacterVideoEffectNode: ['mode', 'model_name', 'duration'],
       KlingSingleImageVideoEffectNode: ['effect_scene'],
       KlingStartEndFrameNode: ['mode', 'model_name', 'duration'],
+      KlingOmniProTextToVideoNode: ['duration'],
+      KlingOmniProFirstLastFrameNode: ['duration'],
+      KlingOmniProImageToVideoNode: ['duration'],
+      KlingOmniProVideoToVideoNode: ['duration'],
       MinimaxHailuoVideoNode: ['resolution', 'duration'],
       OpenAIDalle3: ['size', 'quality'],
       OpenAIDalle2: ['size', 'n'],
diff --git a/src/composables/queue/useJobList.ts b/src/composables/queue/useJobList.ts
index 290cabc681..47996636be 100644
--- a/src/composables/queue/useJobList.ts
+++ b/src/composables/queue/useJobList.ts
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { st } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
@@ -263,7 +264,8 @@ export function useJobList() {
         totalPercent: isActive ? totalPercent.value : undefined,
         currentNodePercent: isActive ? currentNodePercent.value : undefined,
         currentNodeName: isActive ? currentNodeName.value : undefined,
-        showAddedHint
+        showAddedHint,
+        isCloud
       })
 
       return {
diff --git a/src/composables/settings/useRenderModeSetting.ts b/src/composables/settings/useRenderModeSetting.ts
deleted file mode 100644
index 6e97471e25..0000000000
--- a/src/composables/settings/useRenderModeSetting.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { ComputedRef } from 'vue'
-import { ref, watch } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { Settings } from '@/schemas/apiSchema'
-
-interface RenderModeSettingConfig<TSettingKey extends keyof Settings> {
-  setting: TSettingKey
-  vue: Settings[TSettingKey]
-  litegraph: Settings[TSettingKey]
-}
-
-export function useRenderModeSetting<TSettingKey extends keyof Settings>(
-  config: RenderModeSettingConfig<TSettingKey>,
-  isVueMode: ComputedRef<boolean>
-) {
-  const settingStore = useSettingStore()
-  const vueValue = ref(config.vue)
-  const litegraphValue = ref(config.litegraph)
-  const lastWasVue = ref<boolean | null>(null)
-
-  const load = async (vue: boolean) => {
-    if (lastWasVue.value === vue) return
-
-    if (lastWasVue.value !== null) {
-      const currentValue = settingStore.get(config.setting)
-      if (lastWasVue.value) {
-        vueValue.value = currentValue
-      } else {
-        litegraphValue.value = currentValue
-      }
-    }
-
-    await settingStore.set(
-      config.setting,
-      vue ? vueValue.value : litegraphValue.value
-    )
-    lastWasVue.value = vue
-  }
-
-  watch(isVueMode, load, { immediate: true })
-}
diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index 643bb103ff..2fb7ff9671 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -1,5 +1,6 @@
-import { computed, reactive, readonly } from 'vue'
+import { computed, reactive, readonly, ref } from 'vue'
 
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 
 /**
@@ -9,9 +10,21 @@ export enum ServerFeatureFlag {
   SUPPORTS_PREVIEW_METADATA = 'supports_preview_metadata',
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
-  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled'
+  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
+  ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled'
 }
 
+/**
+ * Feature flag variant structure for experiments
+ */
+export interface FeatureFlagVariant {
+  variant: string
+  payload?: Record<string, unknown>
+}
+
+// Demo mode: allows manual override for demonstration
+const demoOverrides = ref<Record<string, unknown>>({})
+
 /**
  * Composable for reactive access to server-side feature flags
  */
@@ -27,15 +40,57 @@ export function useFeatureFlags() {
       return api.getServerFeature(ServerFeatureFlag.MANAGER_SUPPORTS_V4)
     },
     get modelUploadButtonEnabled() {
-      return api.getServerFeature(
-        ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
-        false
+      // Check remote config first (from /api/features), fall back to websocket feature flags
+      return (
+        remoteConfig.value.model_upload_button_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
+          false
+        )
+      )
+    },
+    get assetUpdateOptionsEnabled() {
+      // Check remote config first (from /api/features), fall back to websocket feature flags
+      return (
+        remoteConfig.value.asset_update_options_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.ASSET_UPDATE_OPTIONS_ENABLED,
+          false
+        )
       )
     }
   })
 
   const featureFlag = <T = unknown>(featurePath: string, defaultValue?: T) =>
-    computed(() => api.getServerFeature(featurePath, defaultValue))
+    computed(() => {
+      // Check demo overrides first
+      if (demoOverrides.value[featurePath] !== undefined) {
+        return demoOverrides.value[featurePath] as T
+      }
+      // Check remote config (from /api/features) - convert hyphens to underscores for lookup
+      const remoteConfigKey = featurePath.replace(/-/g, '_')
+      const remoteValue = (remoteConfig.value as Record<string, unknown>)[
+        remoteConfigKey
+      ]
+      if (remoteValue !== undefined) {
+        return remoteValue as T
+      }
+      // Fall back to server feature flags (WebSocket) - try both hyphen and underscore versions
+      const wsValue = api.getServerFeature(featurePath, undefined)
+      if (wsValue !== undefined) {
+        return wsValue as T
+      }
+      // Try underscore version for WebSocket flags
+      const wsValueUnderscore = api.getServerFeature(
+        featurePath.replace(/-/g, '_'),
+        undefined
+      )
+      if (wsValueUnderscore !== undefined) {
+        return wsValueUnderscore as T
+      }
+      // Return default if nothing found
+      return defaultValue as T
+    })
 
   return {
     flags: readonly(flags),
diff --git a/src/extensions/core/cloudRemoteConfig.ts b/src/extensions/core/cloudRemoteConfig.ts
index a40ac401b1..8716269fba 100644
--- a/src/extensions/core/cloudRemoteConfig.ts
+++ b/src/extensions/core/cloudRemoteConfig.ts
@@ -9,7 +9,7 @@ useExtensionService().registerExtension({
   name: 'Comfy.Cloud.RemoteConfig',
 
   setup: async () => {
-    // Poll for config updates every 30 seconds
-    setInterval(() => void loadRemoteConfig(), 30000)
+    // Poll for config updates every 10 minutes
+    setInterval(() => void loadRemoteConfig(), 600_000)
   }
 })
diff --git a/src/extensions/core/widgetInputs.ts b/src/extensions/core/widgetInputs.ts
index 2c2376b11f..2024a41c7c 100644
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -7,9 +7,9 @@ import type {
   INodeInputSlot,
   INodeOutputSlot,
   ISlotType,
-  LLink,
-  Point
+  LLink
 } from '@/lib/litegraph/src/litegraph'
+import { NodeSlot } from '@/lib/litegraph/src/node/NodeSlot'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
@@ -37,15 +37,15 @@ export class PrimitiveNode extends LGraphNode {
   }
 
   override applyToGraph(extraLinks: LLink[] = []) {
-    if (!this.outputs[0].links?.length) return
+    if (!this.outputs[0].links?.length || !this.graph) return
 
     const links = [
-      ...this.outputs[0].links.map((l) => app.graph.links[l]),
+      ...this.outputs[0].links.map((l) => this.graph!.links[l]),
       ...extraLinks
     ]
     let v = this.widgets?.[0].value
     if (v && this.properties[replacePropertyName]) {
-      v = applyTextReplacements(app.graph, v as string)
+      v = applyTextReplacements(this.graph, v as string)
     }
 
     // For each output link copy our value over the original widget value
@@ -331,13 +331,13 @@ export class PrimitiveNode extends LGraphNode {
     const config1 = (output.widget?.[GET_CONFIG] as () => InputSpec)?.()
     if (!config1) return
     const isNumber = config1[0] === 'INT' || config1[0] === 'FLOAT'
-    if (!isNumber) return
+    if (!isNumber || !this.graph) return
 
     for (const linkId of links) {
-      const link = app.graph.links[linkId]
+      const link = this.graph.links[linkId]
       if (!link) continue // Can be null when removing a node
 
-      const theirNode = app.graph.getNodeById(link.target_id)
+      const theirNode = this.graph.getNodeById(link.target_id)
       if (!theirNode) continue
       const theirInput = theirNode.inputs[link.target_slot]
 
@@ -441,10 +441,7 @@ function getWidgetType(config: InputSpec) {
   return { type }
 }
 
-export function setWidgetConfig(
-  slot: INodeInputSlot | INodeOutputSlot,
-  config?: InputSpec
-) {
+export function setWidgetConfig(slot: INodeInputSlot, config?: InputSpec) {
   if (!slot.widget) return
   if (config) {
     slot.widget[GET_CONFIG] = () => config
@@ -452,19 +449,18 @@ export function setWidgetConfig(
     delete slot.widget
   }
 
-  if ('link' in slot) {
-    const link = app.graph.links[slot.link ?? -1]
-    if (link) {
-      const originNode = app.graph.getNodeById(link.origin_id)
-      if (originNode && isPrimitiveNode(originNode)) {
-        if (config) {
-          originNode.recreateWidget()
-        } else if (!app.configuringGraph) {
-          originNode.disconnectOutput(0)
-          originNode.onLastDisconnect()
-        }
-      }
-    }
+  if (!(slot instanceof NodeSlot)) return
+  const graph = slot.node.graph
+  if (!graph) return
+  const link = graph.links[slot.link ?? -1]
+  if (!link) return
+  const originNode = graph.getNodeById(link.origin_id)
+  if (!originNode || !isPrimitiveNode(originNode)) return
+  if (config) {
+    originNode.recreateWidget()
+  } else if (!app.configuringGraph) {
+    originNode.disconnectOutput(0)
+    originNode.onLastDisconnect()
   }
 }
 
@@ -555,15 +551,6 @@ app.registerExtension({
       }
     )
 
-    function isNodeAtPos(pos: Point) {
-      for (const n of app.graph.nodes) {
-        if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
-          return true
-        }
-      }
-      return false
-    }
-
     // Double click a widget input to automatically attach a primitive
     const origOnInputDblClick = nodeType.prototype.onInputDblClick
     nodeType.prototype.onInputDblClick = function (
@@ -589,18 +576,18 @@ app.registerExtension({
 
       // Create a primitive node
       const node = LiteGraph.createNode('PrimitiveNode')
-      if (!node) return r
+      const graph = app.canvas.graph
+      if (!node || !graph) return r
 
-      this.graph?.add(node)
+      graph?.add(node)
 
       // Calculate a position that won't directly overlap another node
       const pos: [number, number] = [
         this.pos[0] - node.size[0] - 30,
         this.pos[1]
       ]
-      while (isNodeAtPos(pos)) {
+      while (graph.getNodeOnPos(pos[0], pos[1], graph.nodes))
         pos[1] += LiteGraph.NODE_TITLE_HEIGHT
-      }
 
       node.pos = pos
       node.connect(0, this, slot)
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index fb21e72b53..d1d2062c94 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -7,6 +7,7 @@ import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculatio
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
 
 import { CanvasPointer } from './CanvasPointer'
 import type { ContextMenu } from './ContextMenu'
@@ -4043,16 +4044,25 @@ export class LGraphCanvas
 
     // TODO: Report failures, i.e. `failedNodes`
 
-    const newPositions = created.map((node) => ({
-      nodeId: String(node.id),
-      bounds: {
-        x: node.pos[0],
-        y: node.pos[1],
-        width: node.size?.[0] ?? 100,
-        height: node.size?.[1] ?? 200
-      }
-    }))
+    const newPositions = created
+      .filter((item): item is LGraphNode => item instanceof LGraphNode)
+      .map((node) => {
+        const fullHeight = node.size?.[1] ?? 200
+        const layoutHeight = LiteGraph.vueNodesMode
+          ? removeNodeTitleHeight(fullHeight)
+          : fullHeight
+        return {
+          nodeId: String(node.id),
+          bounds: {
+            x: node.pos[0],
+            y: node.pos[1],
+            width: node.size?.[0] ?? 100,
+            height: layoutHeight
+          }
+        }
+      })
 
+    if (newPositions.length) layoutStore.setSource(LayoutSource.Canvas)
     layoutStore.batchUpdateNodeBounds(newPositions)
 
     this.selectItems(created)
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index d3a34c8f17..45a04ba3dd 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1,5 +1,6 @@
 {
   "g": {
+    "beta": "Beta",
     "user": "User",
     "currentUser": "Current user",
     "empty": "Empty",
@@ -984,6 +985,7 @@
     "initializingAlmostReady": "Initializing - Almost ready",
     "inQueue": "In queue...",
     "jobAddedToQueue": "Job added to queue",
+    "completedIn": "Finished in {duration}",
     "jobMenu": {
       "openAsWorkflowNewTab": "Open as workflow in new tab",
       "openWorkflowNewTab": "Open workflow in new tab",
diff --git a/src/platform/remoteConfig/types.ts b/src/platform/remoteConfig/types.ts
index 43bfbd70fe..8d2c400f37 100644
--- a/src/platform/remoteConfig/types.ts
+++ b/src/platform/remoteConfig/types.ts
@@ -1,3 +1,5 @@
+import type { TelemetryEventName } from '@/platform/telemetry/types'
+
 /**
  * Server health alert configuration from the backend
  */
@@ -31,4 +33,7 @@ export type RemoteConfig = {
   comfy_api_base_url?: string
   comfy_platform_base_url?: string
   firebase_config?: FirebaseRuntimeConfig
+  telemetry_disabled_events?: TelemetryEventName[]
+  model_upload_button_enabled?: boolean
+  asset_update_options_enabled?: boolean
 }
diff --git a/src/platform/settings/composables/useSettingSearch.ts b/src/platform/settings/composables/useSettingSearch.ts
index c2bf3cfe87..a2d29f2a64 100644
--- a/src/platform/settings/composables/useSettingSearch.ts
+++ b/src/platform/settings/composables/useSettingSearch.ts
@@ -8,9 +8,11 @@ import {
 } from '@/platform/settings/settingStore'
 import type { ISettingGroup, SettingParams } from '@/platform/settings/types'
 import { normalizeI18nKey } from '@/utils/formatUtil'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 
 export function useSettingSearch() {
   const settingStore = useSettingStore()
+  const { shouldRenderVueNodes } = useVueFeatureFlags()
 
   const searchQuery = ref<string>('')
   const filteredSettingIds = ref<string[]>([])
@@ -54,7 +56,11 @@ export function useSettingSearch() {
     const allSettings = Object.values(settingStore.settingsById)
     const filteredSettings = allSettings.filter((setting) => {
       // Filter out hidden and deprecated settings, just like in normal settings tree
-      if (setting.type === 'hidden' || setting.deprecated) {
+      if (
+        setting.type === 'hidden' ||
+        setting.deprecated ||
+        (shouldRenderVueNodes.value && setting.hideInVueNodes)
+      ) {
         return false
       }
 
diff --git a/src/platform/settings/composables/useSettingUI.ts b/src/platform/settings/composables/useSettingUI.ts
index a49cccf191..cfeb571dbd 100644
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -10,6 +10,7 @@ import type { SettingParams } from '@/platform/settings/types'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 
 interface SettingPanelItem {
   node: SettingTreeNode
@@ -31,10 +32,14 @@ export function useSettingUI(
   const settingStore = useSettingStore()
   const activeCategory = ref<SettingTreeNode | null>(null)
 
+  const { shouldRenderVueNodes } = useVueFeatureFlags()
+
   const settingRoot = computed<SettingTreeNode>(() => {
     const root = buildTree(
       Object.values(settingStore.settingsById).filter(
-        (setting: SettingParams) => setting.type !== 'hidden'
+        (setting: SettingParams) =>
+          setting.type !== 'hidden' &&
+          !(shouldRenderVueNodes.value && setting.hideInVueNodes)
       ),
       (setting: SettingParams) => setting.category || setting.id.split('.')
     )
diff --git a/src/platform/settings/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts
index 66cb9c310e..0931733ea4 100644
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -919,7 +919,8 @@ export const CORE_SETTINGS: SettingParams[] = [
       step: 1
     },
     defaultValue: 8,
-    versionAdded: '1.26.7'
+    versionAdded: '1.26.7',
+    hideInVueNodes: true
   },
   {
     id: 'Comfy.Canvas.SelectionToolbox',
diff --git a/src/platform/settings/types.ts b/src/platform/settings/types.ts
index b1efbe9a1b..9bd48fc8c9 100644
--- a/src/platform/settings/types.ts
+++ b/src/platform/settings/types.ts
@@ -47,6 +47,7 @@ export interface SettingParams<TValue = unknown> extends FormItem {
   // sortOrder for sorting settings within a group. Higher values appear first.
   // Default is 0 if not specified.
   sortOrder?: number
+  hideInVueNodes?: boolean
 }
 
 /**
diff --git a/src/platform/workflow/templates/composables/useTemplateUrlLoader.ts b/src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
index ea5f97302a..0305acaf7e 100644
--- a/src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
+++ b/src/platform/workflow/templates/composables/useTemplateUrlLoader.ts
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { clearPreservedQuery } from '@/platform/navigation/preservedQueryManager'
 import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 import { useTemplateWorkflows } from './useTemplateWorkflows'
 
@@ -13,9 +14,10 @@ import { useTemplateWorkflows } from './useTemplateWorkflows'
  * Supports URLs like:
  * - /?template=flux_simple (loads with default source)
  * - /?template=flux_simple&source=custom (loads from custom source)
+ * - /?template=flux_simple&mode=linear (loads template in linear mode)
  *
  * Input validation:
- * - Template and source parameters must match: ^[a-zA-Z0-9_-]+$
+ * - Template, source, and mode parameters must match: ^[a-zA-Z0-9_-]+$
  * - Invalid formats are rejected with console warnings
  */
 export function useTemplateUrlLoader() {
@@ -24,7 +26,10 @@ export function useTemplateUrlLoader() {
   const { t } = useI18n()
   const toast = useToast()
   const templateWorkflows = useTemplateWorkflows()
+  const canvasStore = useCanvasStore()
   const TEMPLATE_NAMESPACE = PRESERVED_QUERY_NAMESPACES.TEMPLATE
+  const SUPPORTED_MODES = ['linear'] as const
+  type SupportedMode = (typeof SUPPORTED_MODES)[number]
 
   /**
    * Validates parameter format to prevent path traversal and injection attacks
@@ -34,12 +39,20 @@ export function useTemplateUrlLoader() {
   }
 
   /**
-   * Removes template and source parameters from URL
+   * Type guard to check if a value is a supported mode
+   */
+  const isSupportedMode = (mode: string): mode is SupportedMode => {
+    return SUPPORTED_MODES.includes(mode as SupportedMode)
+  }
+
+  /**
+   * Removes template, source, and mode parameters from URL
    */
   const cleanupUrlParams = () => {
     const newQuery = { ...route.query }
     delete newQuery.template
     delete newQuery.source
+    delete newQuery.mode
     void router.replace({ query: newQuery })
   }
 
@@ -70,6 +83,24 @@ export function useTemplateUrlLoader() {
       return
     }
 
+    const modeParam = route.query.mode as string | undefined
+
+    if (
+      modeParam &&
+      (typeof modeParam !== 'string' || !isValidParameter(modeParam))
+    ) {
+      console.warn(
+        `[useTemplateUrlLoader] Invalid mode parameter format: ${modeParam}`
+      )
+      return
+    }
+
+    if (modeParam && !isSupportedMode(modeParam)) {
+      console.warn(
+        `[useTemplateUrlLoader] Unsupported mode parameter: ${modeParam}. Supported modes: ${SUPPORTED_MODES.join(', ')}`
+      )
+    }
+
     try {
       await templateWorkflows.loadTemplates()
 
@@ -87,6 +118,9 @@ export function useTemplateUrlLoader() {
           }),
           life: 3000
         })
+      } else if (modeParam === 'linear') {
+        // Set linear mode after successful template load
+        canvasStore.linearMode = true
       }
     } catch (error) {
       console.error(
diff --git a/src/renderer/core/layout/__tests__/TransformPane.test.ts b/src/renderer/core/layout/__tests__/TransformPane.test.ts
index ae18ffbacb..310294c5ce 100644
--- a/src/renderer/core/layout/__tests__/TransformPane.test.ts
+++ b/src/renderer/core/layout/__tests__/TransformPane.test.ts
@@ -29,12 +29,6 @@ vi.mock('@/renderer/core/layout/transform/useTransformState', () => {
   }
 })
 
-vi.mock('@/renderer/extensions/vueNodes/lod/useLOD', () => ({
-  useLOD: vi.fn(() => ({
-    isLOD: false
-  }))
-}))
-
 function createMockCanvas(): LGraphCanvas {
   return {
     canvas: {
diff --git a/src/renderer/core/layout/store/layoutStore.ts b/src/renderer/core/layout/store/layoutStore.ts
index a3449ce823..b6e139e6bc 100644
--- a/src/renderer/core/layout/store/layoutStore.ts
+++ b/src/renderer/core/layout/store/layoutStore.ts
@@ -9,6 +9,8 @@ import { computed, customRef, ref } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import * as Y from 'yjs'
 
+import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
+
 import { ACTOR_CONFIG } from '@/renderer/core/layout/constants'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type {
@@ -136,6 +138,8 @@ class LayoutStoreImpl implements LayoutStore {
 
   // Vue dragging state for selection toolbox (public ref for direct mutation)
   public isDraggingVueNodes = ref(false)
+  // Vue resizing state to prevent drag from activating during resize
+  public isResizingVueNodes = ref(false)
 
   constructor() {
     // Initialize Yjs data structures
@@ -1414,8 +1418,8 @@ class LayoutStoreImpl implements LayoutStore {
   batchUpdateNodeBounds(updates: NodeBoundsUpdate[]): void {
     if (updates.length === 0) return
 
-    // Set source to Vue for these DOM-driven updates
     const originalSource = this.currentSource
+    const shouldNormalizeHeights = originalSource === LayoutSource.DOM
     this.currentSource = LayoutSource.Vue
 
     const nodeIds: NodeId[] = []
@@ -1426,8 +1430,15 @@ class LayoutStoreImpl implements LayoutStore {
       if (!ynode) continue
       const currentLayout = yNodeToLayout(ynode)
 
+      const normalizedBounds = shouldNormalizeHeights
+        ? {
+            ...bounds,
+            height: removeNodeTitleHeight(bounds.height)
+          }
+        : bounds
+
       boundsRecord[nodeId] = {
-        bounds,
+        bounds: normalizedBounds,
         previousBounds: currentLayout.bounds
       }
       nodeIds.push(nodeId)
diff --git a/src/renderer/core/layout/sync/useLayoutSync.ts b/src/renderer/core/layout/sync/useLayoutSync.ts
index c3cbb9ebd7..b51aeafeee 100644
--- a/src/renderer/core/layout/sync/useLayoutSync.ts
+++ b/src/renderer/core/layout/sync/useLayoutSync.ts
@@ -8,6 +8,7 @@ import { onUnmounted, ref } from 'vue'
 
 import type { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { addNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
 
 /**
  * Composable for syncing LiteGraph with the Layout system
@@ -43,12 +44,13 @@ export function useLayoutSync() {
           liteNode.pos[1] = layout.position.y
         }
 
+        const targetHeight = addNodeTitleHeight(layout.size.height)
         if (
           liteNode.size[0] !== layout.size.width ||
-          liteNode.size[1] !== layout.size.height
+          liteNode.size[1] !== targetHeight
         ) {
           // Use setSize() to trigger onResize callback
-          liteNode.setSize([layout.size.width, layout.size.height])
+          liteNode.setSize([layout.size.width, targetHeight])
         }
       }
 
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index e1287e5996..edc6835729 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -4,8 +4,7 @@
     :class="
       cn(
         'absolute inset-0 w-full h-full pointer-events-none',
-        isInteracting ? 'transform-pane--interacting' : 'will-change-auto',
-        isLOD && 'isLOD'
+        isInteracting ? 'transform-pane--interacting' : 'will-change-auto'
       )
     "
     :style="transformStyle"
@@ -22,7 +21,6 @@ import { computed } from 'vue'
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
-import { useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { cn } from '@/utils/tailwindUtil'
 
 interface TransformPaneProps {
@@ -31,9 +29,7 @@ interface TransformPaneProps {
 
 const props = defineProps<TransformPaneProps>()
 
-const { camera, transformStyle, syncWithCanvas } = useTransformState()
-
-const { isLOD } = useLOD(camera)
+const { transformStyle, syncWithCanvas } = useTransformState()
 
 const canvasElement = computed(() => props.canvas?.canvas)
 const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
diff --git a/src/renderer/core/layout/types.ts b/src/renderer/core/layout/types.ts
index 0af4112c71..4332059f5e 100644
--- a/src/renderer/core/layout/types.ts
+++ b/src/renderer/core/layout/types.ts
@@ -10,6 +10,7 @@ import type { ComputedRef, Ref } from 'vue'
 export enum LayoutSource {
   Canvas = 'canvas',
   Vue = 'vue',
+  DOM = 'dom',
   External = 'external'
 }
 
diff --git a/src/renderer/core/layout/utils/nodeSizeUtil.ts b/src/renderer/core/layout/utils/nodeSizeUtil.ts
new file mode 100644
index 0000000000..811240cd09
--- /dev/null
+++ b/src/renderer/core/layout/utils/nodeSizeUtil.ts
@@ -0,0 +1,7 @@
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+
+export const removeNodeTitleHeight = (height: number) =>
+  Math.max(0, height - (LiteGraph.NODE_TITLE_HEIGHT || 0))
+
+export const addNodeTitleHeight = (height: number) =>
+  height + LiteGraph.NODE_TITLE_HEIGHT
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index df1609e682..e02d9f15df 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -83,20 +83,17 @@
       </div>
     </div>
 
-    <div class="relative">
-      <!-- Video Dimensions -->
-      <div class="mt-2 text-center text-xs text-white">
-        <span v-if="videoError" class="text-red-400">
-          {{ $t('g.errorLoadingVideo') }}
-        </span>
-        <span v-else-if="isLoading" class="text-smoke-400">
-          {{ $t('g.loading') }}...
-        </span>
-        <span v-else>
-          {{ actualDimensions || $t('g.calculatingDimensions') }}
-        </span>
-      </div>
-      <LODFallback />
+    <!-- Video Dimensions -->
+    <div class="mt-2 text-center text-xs text-white">
+      <span v-if="videoError" class="text-red-400">
+        {{ $t('g.errorLoadingVideo') }}
+      </span>
+      <span v-else-if="isLoading" class="text-smoke-400">
+        {{ $t('g.loading') }}...
+      </span>
+      <span v-else>
+        {{ actualDimensions || $t('g.calculatingDimensions') }}
+      </span>
     </div>
   </div>
 </template>
@@ -110,8 +107,6 @@ import { useI18n } from 'vue-i18n'
 import { downloadFile } from '@/base/common/downloadUtil'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
-import LODFallback from './components/LODFallback.vue'
-
 interface VideoPreviewProps {
   /** Array of video URLs to display */
   readonly imageUrls: readonly string[] // Named imageUrls for consistency with parent components
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 9b1020f94c..b7b9bd7b46 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -93,20 +93,17 @@
       </div>
     </div>
 
-    <div class="relative">
-      <!-- Image Dimensions -->
-      <div class="mt-2 text-center text-xs text-white">
-        <span v-if="imageError" class="text-red-400">
-          {{ $t('g.errorLoadingImage') }}
-        </span>
-        <span v-else-if="isLoading" class="text-smoke-400">
-          {{ $t('g.loading') }}...
-        </span>
-        <span v-else>
-          {{ actualDimensions || $t('g.calculatingDimensions') }}
-        </span>
-      </div>
-      <LODFallback />
+    <!-- Image Dimensions -->
+    <div class="mt-2 text-center text-xs text-white">
+      <span v-if="imageError" class="text-red-400">
+        {{ $t('g.errorLoadingImage') }}
+      </span>
+      <span v-else-if="isLoading" class="text-smoke-400">
+        {{ $t('g.loading') }}...
+      </span>
+      <span v-else>
+        {{ actualDimensions || $t('g.calculatingDimensions') }}
+      </span>
     </div>
   </div>
 </template>
@@ -122,8 +119,6 @@ import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
-import LODFallback from './LODFallback.vue'
-
 interface ImagePreviewProps {
   /** Array of image URLs to display */
   readonly imageUrls: readonly string[]
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 238a60027b..9edeacbf8b 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -10,14 +10,13 @@
     />
 
     <!-- Slot Name -->
-    <div class="relative h-full flex items-center min-w-0">
+    <div class="h-full flex items-center min-w-0">
       <span
         v-if="!dotOnly"
-        :class="cn('truncate text-xs font-normal lod-toggle', labelClasses)"
+        :class="cn('truncate text-xs font-normal', labelClasses)"
       >
         {{ slotData.localized_name || slotData.name || `Input ${index}` }}
       </span>
-      <LODFallback />
     </div>
   </div>
 </template>
@@ -37,7 +36,6 @@ import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composabl
 import { useExecutionStore } from '@/stores/executionStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import LODFallback from './LODFallback.vue'
 import SlotConnectionDot from './SlotConnectionDot.vue'
 
 interface InputSlotProps {
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 28aa3ac118..109d0c5629 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -99,18 +99,14 @@
         />
       </div>
 
-      <!-- Node Body - rendered based on LOD level and collapsed state -->
       <div
         class="flex flex-1 flex-col gap-1 pb-2"
         :data-testid="`node-body-${nodeData.id}`"
       >
-        <!-- Slots only rendered at full detail -->
         <NodeSlots :node-data="nodeData" />
 
-        <!-- Widgets rendered at reduced+ detail -->
         <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
 
-        <!-- Custom content at reduced+ detail -->
         <div v-if="hasCustomContent" class="min-h-0 flex-1 flex">
           <NodeContent :node-data="nodeData" :media="nodeMedia" />
         </div>
@@ -121,17 +117,14 @@
       </div>
     </template>
 
-    <!-- Resize handles -->
-    <template v-if="!isCollapsed">
-      <div
-        v-for="handle in cornerResizeHandles"
-        :key="handle.id"
-        role="button"
-        :aria-label="handle.ariaLabel"
-        :class="cn(baseResizeHandleClasses, handle.classes)"
-        @pointerdown.stop="handleResizePointerDown(handle.direction)($event)"
-      />
-    </template>
+    <!-- Resize handle (bottom-right only) -->
+    <div
+      v-if="!isCollapsed"
+      role="button"
+      :aria-label="t('g.resizeFromBottomRight')"
+      :class="cn(baseResizeHandleClasses, 'right-0 bottom-0 cursor-se-resize')"
+      @pointerdown.stop="handleResizePointerDown"
+    />
   </div>
 </template>
 
@@ -175,7 +168,6 @@ import {
 } from '@/utils/graphTraversalUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-import type { ResizeHandleDirection } from '../interactions/resize/resizeMath'
 import { useNodeResize } from '../interactions/resize/useNodeResize'
 import LivePreview from './LivePreview.vue'
 import NodeContent from './NodeContent.vue'
@@ -267,7 +259,7 @@ onErrorCaptured((error) => {
   return false // Prevent error propagation
 })
 
-const { position, size, zIndex, moveNodeTo } = useNodeLayout(() => nodeData.id)
+const { position, size, zIndex } = useNodeLayout(() => nodeData.id)
 const { pointerHandlers } = useNodePointerInteractions(() => nodeData.id)
 const { onPointerdown, ...remainingPointerHandlers } = pointerHandlers
 const { startDrag } = useNodeDrag()
@@ -318,41 +310,6 @@ onMounted(() => {
 
 const baseResizeHandleClasses =
   'absolute h-3 w-3 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40'
-const POSITION_EPSILON = 0.01
-
-type CornerResizeHandle = {
-  id: string
-  direction: ResizeHandleDirection
-  classes: string
-  ariaLabel: string
-}
-
-const cornerResizeHandles: CornerResizeHandle[] = [
-  {
-    id: 'se',
-    direction: { horizontal: 'right', vertical: 'bottom' },
-    classes: 'right-0 bottom-0 cursor-se-resize',
-    ariaLabel: t('g.resizeFromBottomRight')
-  },
-  {
-    id: 'ne',
-    direction: { horizontal: 'right', vertical: 'top' },
-    classes: 'right-0 top-0 cursor-ne-resize',
-    ariaLabel: t('g.resizeFromTopRight')
-  },
-  {
-    id: 'sw',
-    direction: { horizontal: 'left', vertical: 'bottom' },
-    classes: 'left-0 bottom-0 cursor-sw-resize',
-    ariaLabel: t('g.resizeFromBottomLeft')
-  },
-  {
-    id: 'nw',
-    direction: { horizontal: 'left', vertical: 'top' },
-    classes: 'left-0 top-0 cursor-nw-resize',
-    ariaLabel: t('g.resizeFromTopLeft')
-  }
-]
 
 const MIN_NODE_WIDTH = 225
 
@@ -365,22 +322,11 @@ const { startResize } = useNodeResize((result, element) => {
   // Apply size directly to DOM element - ResizeObserver will pick this up
   element.style.setProperty('--node-width', `${clampedWidth}px`)
   element.style.setProperty('--node-height', `${result.size.height}px`)
-
-  const currentPosition = position.value
-  const deltaX = Math.abs(result.position.x - currentPosition.x)
-  const deltaY = Math.abs(result.position.y - currentPosition.y)
-
-  if (deltaX > POSITION_EPSILON || deltaY > POSITION_EPSILON) {
-    moveNodeTo(result.position)
-  }
 })
 
-const handleResizePointerDown = (direction: ResizeHandleDirection) => {
-  return (event: PointerEvent) => {
-    if (nodeData.flags?.pinned) return
-
-    startResize(event, direction, { ...position.value })
-  }
+const handleResizePointerDown = (event: PointerEvent) => {
+  if (nodeData.flags?.pinned) return
+  startResize(event)
 }
 
 watch(isCollapsed, (collapsed) => {
diff --git a/src/renderer/extensions/vueNodes/components/LODFallback.vue b/src/renderer/extensions/vueNodes/components/LODFallback.vue
deleted file mode 100644
index fcf7ae7a0d..0000000000
--- a/src/renderer/extensions/vueNodes/components/LODFallback.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div
-    class="lod-fallback absolute inset-0 h-full w-full bg-node-component-widget-skeleton-surface"
-  ></div>
-</template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index b7f4d9ab78..bb1273e81c 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -18,7 +18,7 @@
     <div class="flex items-center justify-between gap-2.5 min-w-0">
       <!-- Collapse/Expand Button -->
       <div class="relative grow-1 flex items-center gap-2.5 min-w-0 flex-1">
-        <div class="lod-toggle flex shrink-0 items-center px-0.5">
+        <div class="flex shrink-0 items-center px-0.5">
           <IconButton
             size="fit-content"
             type="transparent"
@@ -44,7 +44,7 @@
         <!-- Node Title -->
         <div
           v-tooltip.top="tooltipConfig"
-          class="lod-toggle flex min-w-0 flex-1 items-center gap-2 text-sm font-bold"
+          class="flex min-w-0 flex-1 items-center gap-2 text-sm font-bold"
           data-testid="node-title"
         >
           <div class="truncate min-w-0 flex-1">
@@ -57,10 +57,9 @@
             />
           </div>
         </div>
-        <LODFallback />
       </div>
 
-      <div class="lod-toggle flex shrink-0 items-center justify-between gap-2">
+      <div class="flex shrink-0 items-center justify-between gap-2">
         <NodeBadge
           v-for="badge of nodeBadges"
           :key="badge.text"
@@ -112,7 +111,6 @@ import {
 } from '@/utils/graphTraversalUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-import LODFallback from './LODFallback.vue'
 import type { NodeBadgeProps } from './NodeBadge.vue'
 
 interface NodeHeaderProps {
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 7d892e37bf..18df757f97 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -5,11 +5,10 @@
       <!-- Slot Name -->
       <span
         v-if="!dotOnly"
-        class="lod-toggle text-xs font-normal truncate text-node-component-slot-text"
+        class="text-xs font-normal truncate text-node-component-slot-text"
       >
         {{ slotData.localized_name || slotData.name || `Output ${index}` }}
       </span>
-      <LODFallback />
     </div>
     <!-- Connection Dot -->
     <SlotConnectionDot
@@ -35,7 +34,6 @@ import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composabl
 import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
 import { cn } from '@/utils/tailwindUtil'
 
-import LODFallback from './LODFallback.vue'
 import SlotConnectionDot from './SlotConnectionDot.vue'
 
 interface OutputSlotProps {
diff --git a/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
deleted file mode 100644
index 370393e58a..0000000000
--- a/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# ComfyUI Widget LOD System: Architecture and Implementation
-
-## Executive Summary
-
-The ComfyUI widget Level of Detail (LOD) system has evolved from a reactive, Vue-based approach to a CSS-driven, non-reactive implementation. This architectural shift was driven by performance requirements at scale (300-500+ nodes) and a deeper understanding of browser rendering pipelines. The current system prioritizes consistent performance over granular control, leveraging CSS visibility rules rather than component mounting/unmounting.
-
-## The Two Approaches: Reactive vs. Static LOD
-
-### Approach 1: Reactive LOD (Original Design)
-
-The original design envisioned a system where each widget would reactively respond to zoom level changes, controlling its own detail level through Vue's reactivity system. Widgets would import LOD utilities, compute what to show based on zoom level, and conditionally render elements using `v-if` and `v-show` directives.
-
-**The promise of this approach was compelling:** widgets could intelligently manage their complexity, progressively revealing detail as users zoomed in, much like how mapping applications work. Developers would have fine-grained control over performance optimization.
-
-### Approach 2: Static LOD with CSS (Current Implementation)
-
-The implemented system takes a fundamentally different approach. All widget content is loaded and remains in the DOM at all times. Visual simplification happens through CSS rules, primarily using `visibility: hidden` and simplified visual representations (gray rectangles) at distant zoom levels. No reactive updates occur when zoom changes—only CSS rules apply differently.
-
-**This approach seems counterintuitive at first:** aren't we wasting resources by keeping everything loaded? The answer reveals a deeper truth about modern browser rendering.
-
-## The GPU Texture Bottleneck
-
-The key insight driving the current architecture comes from understanding how browsers handle CSS transforms:
-
-When you apply a CSS transform to a parent element (the "transformpane" in ComfyUI's case), the browser promotes that entire subtree to a compositor layer. This creates a single GPU texture containing all the transformed content. Here's where traditional performance intuitions break down:
-
-### Traditional Assumption
-
-"If we render less content, we get better performance. Therefore, hiding complex widgets should improve zoom/pan performance."
-
-### Actual Browser Behavior
-
-When all nodes are children of a single transformed parent:
-
-1. The browser creates one large GPU texture for the entire node graph
-2. The texture dimensions are determined by the bounding box of all content
-3. Whether individual pixels are simple (solid rectangles) or complex (detailed widgets) has minimal impact
-4. The performance bottleneck is the texture size itself, not the complexity of rasterization
-
-This means that even if we reduce every node to a simple gray rectangle, we're still paying the cost of a massive GPU texture when viewing hundreds of nodes simultaneously. The texture dimensions remain the same whether it contains simple or complex content.
-
-## Two Distinct Performance Concerns
-
-The analysis reveals two often-conflated performance considerations that should be understood separately:
-
-### 1. Rendering Performance
-
-**Question:** How fast can the browser paint and composite the node graph during interactions?
-
-**Traditional thinking:** Show less content → render faster  
-**Reality with CSS transforms:** GPU texture size dominates performance, not content complexity
-
-The CSS transform approach means that zoom, pan, and drag operations are already optimized—they're just transforming an existing GPU texture. The cost is in the initial rasterization and texture upload, which happens regardless of content complexity when texture dimensions are fixed.
-
-### 2. Memory and Lifecycle Management
-
-**Question:** How much memory do widget instances consume, and what's the cost of maintaining them?
-
-This is where unmounting widgets might theoretically help:
-
-- Complex widgets (3D viewers, chart renderers) might hold significant memory
-- Event listeners and reactive watchers consume resources
-- Some widgets might run background processes or animations
-
-However, the cost of mounting/unmounting hundreds of widgets on zoom changes could create worse performance problems than the memory savings provide. Vue's virtual DOM diffing for hundreds of nodes is expensive, potentially causing noticeable lag during zoom transitions.
-
-## Design Philosophy and Trade-offs
-
-The current CSS-based approach makes several deliberate trade-offs:
-
-### What We Optimize For
-
-1. **Consistent, predictable performance** - No reactivity means no sudden performance cliffs
-2. **Smooth zoom/pan interactions** - CSS transforms are hardware-accelerated
-3. **Simple widget development** - Widget authors don't need to implement LOD logic
-4. **Reliable state preservation** - Widgets never lose state from unmounting
-
-### What We Accept
-
-1. **Higher baseline memory usage** - All widgets remain mounted
-2. **Less granular control** - Widgets can't optimize their own LOD behavior
-3. **Potential waste for exotic widgets** - A 3D renderer widget still runs when hidden
-
-## Open Questions and Future Considerations
-
-### Should widgets have any LOD control?
-
-The current system provides a uniform gray rectangle fallback with CSS visibility hiding. This works for 99% of widgets, but raises questions:
-
-**Scenario:** A widget renders a complex 3D scene or runs expensive computations  
-**Current behavior:** Hidden via CSS but still mounted  
-**Question:** Should such widgets be able to opt into unmounting at distance?
-
-The challenge is that introducing selective unmounting would require:
-
-- Maintaining widget state across mount/unmount cycles
-- Accepting the performance cost of remounting when zooming in
-- Adding complexity to the widget API
-
-### Could we reduce GPU texture size?
-
-Since texture dimensions are the limiting factor, could we:
-
-- Use multiple compositor layers for different regions (chunk the transformpane)?
-- Render the nodes using the canvas fallback when 500+ nodes and < 30% zoom.
-
-These approaches would require significant architectural changes and might introduce their own performance trade-offs.
-
-### Is there a hybrid approach?
-
-Could we identify specific threshold scenarios where reactive LOD makes sense?
-
-- When node count is low (< 50 nodes)
-- For specifically registered "expensive" widgets
-- At extreme zoom levels only
-
-## Implementation Guidelines
-
-Given the current architecture, here's how to work within the system:
-
-### For Widget Developers
-
-1. **Build widgets assuming they're always visible** - Don't rely on mount/unmount for cleanup
-2. **Use CSS classes for zoom-responsive styling** - Let CSS handle visual changes
-3. **Minimize background processing** - Assume your widget is always running
-4. **Consider requestAnimationFrame throttling** - For animations that won't be visible when zoomed out
-
-### For System Architects
-
-1. **Monitor GPU memory usage** - The single texture approach has memory implications
-2. **Consider viewport culling** - Not rendering off-screen nodes could reduce texture size
-3. **Profile real-world workflows** - Theoretical performance differs from actual usage patterns
-4. **Document the architecture clearly** - The non-obvious performance characteristics need explanation
-
-## Conclusion
-
-The ComfyUI LOD system represents a pragmatic choice: accepting higher memory usage and less granular control in exchange for predictable performance and implementation simplicity. By understanding that GPU texture dimensions—not rasterization complexity—drive performance in a CSS-transform-based architecture, the team has chosen an approach that may seem counterintuitive but actually aligns with browser rendering realities.
-
-The system works well for the common case of hundreds of relatively simple widgets. Edge cases involving genuinely expensive widgets may need future consideration, but the current approach provides a solid foundation that avoids the performance pitfalls of reactive LOD at scale.
-
-The key insight—that showing less doesn't necessarily mean rendering faster when everything lives in a single GPU texture—challenges conventional web performance wisdom and demonstrates the importance of understanding the full rendering pipeline when making architectural decisions.
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
index 5108a781b3..eb96ff8c84 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.test.ts
@@ -92,12 +92,14 @@ const mockData = vi.hoisted(() => {
 
 vi.mock('@/renderer/core/layout/store/layoutStore', () => {
   const isDraggingVueNodes = ref(false)
+  const isResizingVueNodes = ref(false)
   const fakeNodeLayoutRef = ref(mockData.fakeNodeLayout)
   const getNodeLayoutRef = vi.fn(() => fakeNodeLayoutRef)
   const setSource = vi.fn()
   return {
     layoutStore: {
       isDraggingVueNodes,
+      isResizingVueNodes,
       getNodeLayoutRef,
       setSource
     }
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
index 33369bc064..26d2b8a4b0 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -63,6 +63,9 @@ export function useNodePointerInteractions(
   function onPointermove(event: PointerEvent) {
     if (forwardMiddlePointerIfNeeded(event)) return
 
+    // Don't activate drag while resizing
+    if (layoutStore.isResizingVueNodes.value) return
+
     const nodeId = toValue(nodeIdRef)
 
     if (nodeManager.value?.getNode(nodeId)?.flags?.pinned) {
diff --git a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
index 9b18e1582c..4d4e274d3c 100644
--- a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
+++ b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
@@ -107,7 +107,7 @@ const resizeObserver = new ResizeObserver((entries) => {
       x: topLeftCanvas.x,
       y: topLeftCanvas.y + LiteGraph.NODE_TITLE_HEIGHT,
       width: Math.max(0, width),
-      height: Math.max(0, height - LiteGraph.NODE_TITLE_HEIGHT)
+      height: Math.max(0, height)
     }
 
     let updates = updatesByType.get(elementType)
@@ -123,8 +123,7 @@ const resizeObserver = new ResizeObserver((entries) => {
     }
   }
 
-  // Set source to Vue before processing DOM-driven updates
-  layoutStore.setSource(LayoutSource.Vue)
+  layoutStore.setSource(LayoutSource.DOM)
 
   // Flush per-type
   for (const [type, updates] of updatesByType) {
diff --git a/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts b/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts
deleted file mode 100644
index a837d59c58..0000000000
--- a/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { Point, Size } from '@/renderer/core/layout/types'
-
-export type ResizeHandleDirection = {
-  horizontal: 'left' | 'right'
-  vertical: 'top' | 'bottom'
-}
-
-function applyHandleDelta(
-  startSize: Size,
-  delta: Point,
-  handle: ResizeHandleDirection
-): Size {
-  const horizontalMultiplier = handle.horizontal === 'right' ? 1 : -1
-  const verticalMultiplier = handle.vertical === 'bottom' ? 1 : -1
-
-  return {
-    width: startSize.width + delta.x * horizontalMultiplier,
-    height: startSize.height + delta.y * verticalMultiplier
-  }
-}
-
-function computeAdjustedPosition(
-  startPosition: Point,
-  startSize: Size,
-  nextSize: Size,
-  handle: ResizeHandleDirection
-): Point {
-  const widthDelta = startSize.width - nextSize.width
-  const heightDelta = startSize.height - nextSize.height
-
-  return {
-    x:
-      handle.horizontal === 'left'
-        ? startPosition.x + widthDelta
-        : startPosition.x,
-    y:
-      handle.vertical === 'top'
-        ? startPosition.y + heightDelta
-        : startPosition.y
-  }
-}
-
-/**
- * Computes the resulting size and position of a node given pointer movement
- * and handle orientation.
- */
-export function computeResizeOutcome({
-  startSize,
-  startPosition,
-  delta,
-  handle,
-  snapFn
-}: {
-  startSize: Size
-  startPosition: Point
-  delta: Point
-  handle: ResizeHandleDirection
-  snapFn?: (size: Size) => Size
-}): { size: Size; position: Point } {
-  const resized = applyHandleDelta(startSize, delta, handle)
-  const snapped = snapFn?.(resized) ?? resized
-  const position = computeAdjustedPosition(
-    startPosition,
-    startSize,
-    snapped,
-    handle
-  )
-
-  return {
-    size: snapped,
-    position
-  }
-}
-
-export function createResizeSession(config: {
-  startSize: Size
-  startPosition: Point
-  handle: ResizeHandleDirection
-}) {
-  const startSize = { ...config.startSize }
-  const startPosition = { ...config.startPosition }
-  const handle = config.handle
-
-  return (delta: Point, snapFn?: (size: Size) => Size) =>
-    computeResizeOutcome({
-      startSize,
-      startPosition,
-      handle,
-      delta,
-      snapFn
-    })
-}
-
-export function toCanvasDelta(
-  startPointer: Point,
-  currentPointer: Point,
-  scale: number
-): Point {
-  const safeScale = scale === 0 ? 1 : scale
-  return {
-    x: (currentPointer.x - startPointer.x) / safeScale,
-    y: (currentPointer.y - startPointer.y) / safeScale
-  }
-}
diff --git a/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts b/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts
index 4d63e00ab2..75749e8121 100644
--- a/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts
+++ b/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts
@@ -2,20 +2,17 @@ import { useEventListener } from '@vueuse/core'
 import { ref } from 'vue'
 
 import type { Point, Size } from '@/renderer/core/layout/types'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useNodeSnap } from '@/renderer/extensions/vueNodes/composables/useNodeSnap'
 import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useShiftKeySync'
-
-import type { ResizeHandleDirection } from './resizeMath'
-import { createResizeSession, toCanvasDelta } from './resizeMath'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 
 interface ResizeCallbackPayload {
   size: Size
-  position: Point
 }
 
 /**
- * Composable for node resizing functionality
+ * Composable for node resizing functionality (bottom-right corner only)
  *
  * Provides resize handle interaction that integrates with the layout system.
  * Handles pointer capture, coordinate calculations, and size constraints.
@@ -27,16 +24,7 @@ export function useNodeResize(
 
   const isResizing = ref(false)
   const resizeStartPointer = ref<Point | null>(null)
-  const resizeSession = ref<
-    | ((
-        delta: Point,
-        snapFn?: (size: Size) => Size
-      ) => {
-        size: Size
-        position: Point
-      })
-    | null
-  >(null)
+  const resizeStartSize = ref<Size | null>(null)
 
   // Snap-to-grid functionality
   const { shouldSnap, applySnapToSize } = useNodeSnap()
@@ -44,11 +32,7 @@ export function useNodeResize(
   // Shift key sync for LiteGraph canvas preview
   const { trackShiftKey } = useShiftKeySync()
 
-  const startResize = (
-    event: PointerEvent,
-    handle: ResizeHandleDirection,
-    startPosition: Point
-  ) => {
+  const startResize = (event: PointerEvent) => {
     event.preventDefault()
     event.stopPropagation()
 
@@ -72,47 +56,49 @@ export function useNodeResize(
     // Capture pointer to ensure we get all move/up events
     target.setPointerCapture(event.pointerId)
 
+    // Mark as resizing to prevent drag from activating
+    layoutStore.isResizingVueNodes.value = true
     isResizing.value = true
     resizeStartPointer.value = { x: event.clientX, y: event.clientY }
-    resizeSession.value = createResizeSession({
-      startSize,
-      startPosition: { ...startPosition },
-      handle
-    })
+    resizeStartSize.value = startSize
 
     const handlePointerMove = (moveEvent: PointerEvent) => {
       if (
         !isResizing.value ||
         !resizeStartPointer.value ||
-        !resizeSession.value
-      )
+        !resizeStartSize.value
+      ) {
         return
+      }
+
+      const scale = transformState.camera.z
+      const deltaX =
+        (moveEvent.clientX - resizeStartPointer.value.x) / (scale || 1)
+      const deltaY =
+        (moveEvent.clientY - resizeStartPointer.value.y) / (scale || 1)
 
-      const startPointer = resizeStartPointer.value
-      const session = resizeSession.value
+      let newSize: Size = {
+        width: resizeStartSize.value.width + deltaX,
+        height: resizeStartSize.value.height + deltaY
+      }
 
-      const delta = toCanvasDelta(
-        startPointer,
-        { x: moveEvent.clientX, y: moveEvent.clientY },
-        transformState.camera.z
-      )
+      // Apply snap if shift is held
+      if (shouldSnap(moveEvent)) {
+        newSize = applySnapToSize(newSize)
+      }
 
       const nodeElement = target.closest('[data-node-id]')
       if (nodeElement instanceof HTMLElement) {
-        const outcome = session(
-          delta,
-          shouldSnap(moveEvent) ? applySnapToSize : undefined
-        )
-
-        resizeCallback(outcome, nodeElement)
+        resizeCallback({ size: newSize }, nodeElement)
       }
     }
 
     const handlePointerUp = (upEvent: PointerEvent) => {
       if (isResizing.value) {
         isResizing.value = false
+        layoutStore.isResizingVueNodes.value = false
         resizeStartPointer.value = null
-        resizeSession.value = null
+        resizeStartSize.value = null
 
         // Stop tracking shift key state
         stopShiftSync()
diff --git a/src/renderer/extensions/vueNodes/lod/useLOD.ts b/src/renderer/extensions/vueNodes/lod/useLOD.ts
deleted file mode 100644
index 2f59ba020b..0000000000
--- a/src/renderer/extensions/vueNodes/lod/useLOD.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Level of Detail (LOD) composable for Vue-based node rendering
- *
- * Provides dynamic quality adjustment based on zoom level to maintain
- * performance with large node graphs. Uses zoom threshold based on DPR
- * to determine how much detail to render for each node component.
- * Default minFontSize = 8px
- * Default zoomThreshold = 0.57 (On a DPR = 1 monitor)
- **/
-import { useDevicePixelRatio } from '@vueuse/core'
-import { computed } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-
-interface Camera {
-  z: number // zoom level
-}
-
-export function useLOD(camera: Camera) {
-  const isLOD = computed(() => {
-    const { pixelRatio } = useDevicePixelRatio()
-    const baseFontSize = 14
-    const dprAdjustment = Math.sqrt(pixelRatio.value)
-
-    const settingStore = useSettingStore()
-    const minFontSize = settingStore.get('LiteGraph.Canvas.MinFontSizeForLOD') //default 8
-    const threshold =
-      Math.round((minFontSize / (baseFontSize * dprAdjustment)) * 100) / 100 //round to 2 decimal places i.e 0.86
-
-    return camera.z < threshold
-  })
-
-  return { isLOD }
-}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 8138d75384..c980cba9ab 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -5,7 +5,7 @@
   >
     <!-- Display mode: Rendered markdown -->
     <div
-      class="comfy-markdown-content lod-toggle size-full min-h-[60px] overflow-y-auto rounded-lg text-sm"
+      class="comfy-markdown-content size-full min-h-[60px] overflow-y-auto rounded-lg text-sm"
       :class="isEditing === false ? 'visible' : 'invisible'"
       v-html="renderedHtml"
     />
@@ -27,7 +27,6 @@
       @click.stop
       @keydown.stop
     />
-    <LODFallback />
   </div>
 </template>
 
@@ -38,8 +37,6 @@ import { computed, nextTick, ref } from 'vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
-import LODFallback from '../../components/LODFallback.vue'
-
 const { widget } = defineProps<{
   widget: SimplifiedWidget<string>
 }>()
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index fb556ee71e..c3efc30423 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -78,7 +78,6 @@
       @ended="playback.onPlaybackEnded"
       @loadedmetadata="playback.onMetadataLoaded"
     />
-    <LODFallback />
   </div>
 </template>
 
@@ -91,7 +90,6 @@ import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import LODFallback from '@/renderer/extensions/vueNodes/components/LODFallback.vue'
 import { app } from '@/scripts/app'
 import { useAudioService } from '@/services/audioService'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
index 1a8c2bdb5b..df3381f534 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
@@ -3,6 +3,7 @@
     <Select
       v-model="modelValue"
       :invalid
+      :filter="selectOptions.length > 4"
       :options="selectOptions"
       v-bind="combinedProps"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
index e891b9bbdb..78702bafa5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
@@ -213,12 +213,13 @@ const acceptTypes = computed(() => {
 const layoutMode = ref<LayoutMode>(props.defaultLayoutMode ?? 'grid')
 
 watch(
-  modelValue,
-  (currentValue) => {
+  [modelValue, dropdownItems],
+  ([currentValue, _dropdownItems]) => {
     if (currentValue === undefined) {
       selectedSet.value.clear()
       return
     }
+
     const item = dropdownItems.value.find((item) => item.name === currentValue)
     if (item) {
       selectedSet.value.clear()
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 645549f3f4..42bf3d77c2 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -3,9 +3,7 @@
     <Textarea
       v-model="modelValue"
       v-bind="filteredProps"
-      :class="
-        cn(WidgetInputBaseClass, 'size-full text-xs lod-toggle resize-none')
-      "
+      :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
       :placeholder="placeholder || widget.name || ''"
       :aria-label="widget.name"
       :readonly="widget.options?.read_only"
@@ -17,7 +15,6 @@
       @pointerup.capture.stop
       @contextmenu.capture.stop
     />
-    <LODFallback />
   </div>
 </template>
 
@@ -32,7 +29,6 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-import LODFallback from '../../components/LODFallback.vue'
 import { WidgetInputBaseClass } from './layout'
 
 const { widget, placeholder = '' } = defineProps<{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index e3d0a2e1a7..16044b27c9 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -132,7 +132,6 @@
         </template>
       </TieredMenu>
     </div>
-    <LODFallback />
   </div>
 </template>
 
@@ -143,7 +142,6 @@ import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import LODFallback from '@/renderer/extensions/vueNodes/components/LODFallback.vue'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 02e8646ad9..0632524924 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -3,8 +3,6 @@ import { noop } from 'es-toolkit'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-import LODFallback from '../../../components/LODFallback.vue'
-
 defineProps<{
   widget: Pick<SimplifiedWidget<string | number | undefined>, 'name' | 'label'>
 }>()
@@ -17,23 +15,21 @@ defineProps<{
     <div class="relative flex h-full min-w-0 items-center">
       <p
         v-if="widget.name"
-        class="lod-toggle flex-1 truncate text-xs font-normal text-node-component-slot-text"
+        class="flex-1 truncate text-xs font-normal text-node-component-slot-text"
       >
         {{ widget.label || widget.name }}
       </p>
-      <LODFallback />
     </div>
     <!-- basis-full grow -->
     <div class="relative min-w-0 flex-1">
       <div
-        class="lod-toggle cursor-default min-w-0"
+        class="cursor-default min-w-0"
         @pointerdown.stop="noop"
         @pointermove.stop="noop"
         @pointerup.stop="noop"
       >
         <slot />
       </div>
-      <LODFallback />
     </div>
   </div>
 </template>
diff --git a/src/router.ts b/src/router.ts
index bb9addcfde..d1291e079b 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -80,7 +80,7 @@ const router = createRouter({
 installPreservedQueryTracker(router, [
   {
     namespace: PRESERVED_QUERY_NAMESPACES.TEMPLATE,
-    keys: ['template', 'source']
+    keys: ['template', 'source', 'mode']
   }
 ])
 
diff --git a/src/utils/queueDisplay.ts b/src/utils/queueDisplay.ts
index d743c1b2fc..4056256229 100644
--- a/src/utils/queueDisplay.ts
+++ b/src/utils/queueDisplay.ts
@@ -1,5 +1,6 @@
 import type { TaskItemImpl } from '@/stores/queueStore'
 import type { JobState } from '@/types/queue'
+import { formatDuration } from '@/utils/formatUtil'
 import { clampPercentInt, formatPercent0 } from '@/utils/numberUtil'
 
 type BuildJobDisplayCtx = {
@@ -11,6 +12,8 @@ type BuildJobDisplayCtx = {
   currentNodePercent?: number
   currentNodeName?: string
   showAddedHint?: boolean
+  /** Whether the app is running in cloud distribution */
+  isCloud?: boolean
 }
 
 type JobDisplay = {
@@ -122,13 +125,20 @@ export const buildJobDisplay = (
     const time = task.executionTimeInSeconds
     const preview = task.previewOutput
     const iconImageUrl = preview && preview.isImage ? preview.url : undefined
+
+    // Cloud shows "Completed in Xh Ym Zs", non-cloud shows filename
+    const primary = ctx.isCloud
+      ? ctx.t('queue.completedIn', {
+          duration: formatDuration(task.executionTime ?? 0)
+        })
+      : preview?.filename && preview.filename.length
+        ? preview.filename
+        : buildTitle(task, ctx.t)
+
     return {
       iconName: iconForJobState(state),
       iconImageUrl,
-      primary:
-        preview?.filename && preview.filename.length
-          ? preview.filename
-          : buildTitle(task, ctx.t),
+      primary,
       secondary: time !== undefined ? `${time.toFixed(2)}s` : '',
       showClear: false
     }
diff --git a/src/workbench/extensions/manager/utils/graphHasMissingNodes.ts b/src/workbench/extensions/manager/utils/graphHasMissingNodes.ts
new file mode 100644
index 0000000000..ddf3180ab2
--- /dev/null
+++ b/src/workbench/extensions/manager/utils/graphHasMissingNodes.ts
@@ -0,0 +1,37 @@
+import { unref } from 'vue'
+import type { MaybeRef } from 'vue'
+
+import type {
+  LGraph,
+  LGraphNode,
+  Subgraph
+} from '@/lib/litegraph/src/litegraph'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
+
+export type NodeDefLookup = Record<string, ComfyNodeDefImpl | undefined>
+
+const isNodeMissingDefinition = (
+  node: LGraphNode,
+  nodeDefsByName: NodeDefLookup
+) => {
+  const nodeName = node?.type
+  if (!nodeName) return false
+  return !nodeDefsByName[nodeName]
+}
+
+export const collectMissingNodes = (
+  graph: LGraph | Subgraph | null | undefined,
+  nodeDefsByName: MaybeRef<NodeDefLookup>
+): LGraphNode[] => {
+  if (!graph) return []
+  const lookup = unref(nodeDefsByName)
+  return collectAllNodes(graph, (node) => isNodeMissingDefinition(node, lookup))
+}
+
+export const graphHasMissingNodes = (
+  graph: LGraph | Subgraph | null | undefined,
+  nodeDefsByName: MaybeRef<NodeDefLookup>
+) => {
+  return collectMissingNodes(graph, nodeDefsByName).length > 0
+}
diff --git a/tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts b/tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
index 5036cd7300..650fa817c1 100644
--- a/tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
+++ b/tests-ui/tests/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts
@@ -8,8 +8,9 @@ import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/
  * Tests the behavior of loading templates via URL query parameters:
  * - ?template=flux_simple loads the template
  * - ?template=flux_simple&source=custom loads from custom source
+ * - ?template=flux_simple&mode=linear loads template in linear mode
  * - Invalid template shows error toast
- * - Input validation for template and source parameters
+ * - Input validation for template, source, and mode parameters
  */
 
 const preservedQueryMocks = vi.hoisted(() => ({
@@ -70,10 +71,20 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
+// Mock canvas store
+const mockCanvasStore = {
+  linearMode: false
+}
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => mockCanvasStore
+}))
+
 describe('useTemplateUrlLoader', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockQueryParams = {}
+    mockCanvasStore.linearMode = false
   })
 
   it('does not load template when no query param present', () => {
@@ -236,6 +247,7 @@ describe('useTemplateUrlLoader', () => {
     mockQueryParams = {
       template: 'flux_simple',
       source: 'custom',
+      mode: 'linear',
       other: 'param'
     }
 
@@ -270,4 +282,121 @@ describe('useTemplateUrlLoader', () => {
       query: { other: 'param' }
     })
   })
+
+  it('sets linear mode when mode=linear and template loads successfully', async () => {
+    mockQueryParams = { template: 'flux_simple', mode: 'linear' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+      'flux_simple',
+      'default'
+    )
+    expect(mockCanvasStore.linearMode).toBe(true)
+  })
+
+  it('does not set linear mode when template loading fails', async () => {
+    mockQueryParams = { template: 'invalid-template', mode: 'linear' }
+    mockLoadWorkflowTemplate.mockResolvedValueOnce(false)
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockCanvasStore.linearMode).toBe(false)
+  })
+
+  it('does not set linear mode when mode parameter is not linear', async () => {
+    mockQueryParams = { template: 'flux_simple', mode: 'graph' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+      'flux_simple',
+      'default'
+    )
+    expect(mockCanvasStore.linearMode).toBe(false)
+  })
+
+  it('rejects invalid mode parameter with special characters', () => {
+    mockQueryParams = { template: 'flux_simple', mode: '../malicious' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    void loadTemplateFromUrl()
+
+    expect(mockLoadTemplates).not.toHaveBeenCalled()
+  })
+
+  it('handles array mode params correctly', () => {
+    // Vue Router can return string[] for duplicate params
+    mockQueryParams = {
+      template: 'flux_simple',
+      mode: ['linear', 'graph'] as any
+    }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    void loadTemplateFromUrl()
+
+    // Should not load when mode param is an array
+    expect(mockLoadTemplates).not.toHaveBeenCalled()
+  })
+
+  it('warns about unsupported mode values but continues loading', async () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mockQueryParams = { template: 'flux_simple', mode: 'unsupported' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      '[useTemplateUrlLoader] Unsupported mode parameter: unsupported. Supported modes: linear'
+    )
+    expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+      'flux_simple',
+      'default'
+    )
+    expect(mockCanvasStore.linearMode).toBe(false)
+
+    consoleSpy.mockRestore()
+  })
+
+  it('accepts supported mode parameter: linear', async () => {
+    mockQueryParams = { template: 'flux_simple', mode: 'linear' }
+
+    const { loadTemplateFromUrl } = useTemplateUrlLoader()
+    await loadTemplateFromUrl()
+
+    expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+      'flux_simple',
+      'default'
+    )
+    expect(mockCanvasStore.linearMode).toBe(true)
+  })
+
+  it('accepts valid format but warns about unsupported modes', async () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const unsupportedModes = ['graph', 'mode123', 'my_mode-2']
+
+    for (const mode of unsupportedModes) {
+      vi.clearAllMocks()
+      consoleSpy.mockClear()
+      mockCanvasStore.linearMode = false
+      mockQueryParams = { template: 'flux_simple', mode }
+
+      const { loadTemplateFromUrl } = useTemplateUrlLoader()
+      await loadTemplateFromUrl()
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        `[useTemplateUrlLoader] Unsupported mode parameter: ${mode}. Supported modes: linear`
+      )
+      expect(mockLoadWorkflowTemplate).toHaveBeenCalledWith(
+        'flux_simple',
+        'default'
+      )
+      expect(mockCanvasStore.linearMode).toBe(false)
+    }
+
+    consoleSpy.mockRestore()
+  })
 })
diff --git a/tests-ui/tests/renderer/core/layout/layoutStore.test.ts b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
index 993bde8664..ff7ee1fa06 100644
--- a/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
+++ b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
@@ -1,11 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import {
-  type LayoutChange,
-  LayoutSource,
-  type NodeLayout
-} from '@/renderer/core/layout/types'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import type { LayoutChange, NodeLayout } from '@/renderer/core/layout/types'
 
 describe('layoutStore CRDT operations', () => {
   beforeEach(() => {
@@ -304,4 +302,108 @@ describe('layoutStore CRDT operations', () => {
     expect(recentOps.length).toBeGreaterThanOrEqual(1)
     expect(recentOps[0].type).toBe('moveNode')
   })
+
+  it('normalizes DOM-sourced heights before storing', () => {
+    const nodeId = 'dom-node'
+    const layout = createTestNode(nodeId)
+
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    layoutStore.setSource(LayoutSource.DOM)
+    layoutStore.batchUpdateNodeBounds([
+      {
+        nodeId,
+        bounds: {
+          x: layout.bounds.x,
+          y: layout.bounds.y,
+          width: layout.size.width,
+          height: layout.size.height + LiteGraph.NODE_TITLE_HEIGHT
+        }
+      }
+    ])
+
+    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+    expect(nodeRef.value?.size.height).toBe(layout.size.height)
+    expect(nodeRef.value?.size.width).toBe(layout.size.width)
+    expect(nodeRef.value?.position).toEqual(layout.position)
+  })
+
+  it('normalizes very small DOM-sourced heights safely', () => {
+    const nodeId = 'small-dom-node'
+    const layout = createTestNode(nodeId)
+    layout.size.height = 10
+
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    layoutStore.setSource(LayoutSource.DOM)
+    layoutStore.batchUpdateNodeBounds([
+      {
+        nodeId,
+        bounds: {
+          x: layout.bounds.x,
+          y: layout.bounds.y,
+          width: layout.size.width,
+          height: layout.size.height + LiteGraph.NODE_TITLE_HEIGHT
+        }
+      }
+    ])
+
+    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+    expect(nodeRef.value?.size.height).toBeGreaterThanOrEqual(0)
+  })
+
+  it('handles undefined NODE_TITLE_HEIGHT without NaN results', () => {
+    const nodeId = 'undefined-title-height'
+    const layout = createTestNode(nodeId)
+
+    layoutStore.applyOperation({
+      type: 'createNode',
+      entity: 'node',
+      nodeId,
+      layout,
+      timestamp: Date.now(),
+      source: LayoutSource.External,
+      actor: 'test'
+    })
+
+    const originalTitleHeight = LiteGraph.NODE_TITLE_HEIGHT
+    // @ts-expect-error – intentionally simulate undefined runtime value
+    LiteGraph.NODE_TITLE_HEIGHT = undefined
+
+    try {
+      layoutStore.setSource(LayoutSource.DOM)
+      layoutStore.batchUpdateNodeBounds([
+        {
+          nodeId,
+          bounds: {
+            x: layout.bounds.x,
+            y: layout.bounds.y,
+            width: layout.size.width,
+            height: layout.size.height
+          }
+        }
+      ])
+
+      const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
+      expect(nodeRef.value?.size.height).toBe(layout.size.height)
+    } finally {
+      LiteGraph.NODE_TITLE_HEIGHT = originalTitleHeight
+    }
+  })
 })
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts
index f9c669cd4e..e22ec69703 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts
@@ -5,7 +5,9 @@ import { LayoutSource } from '@/renderer/core/layout/types'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
 
 // Mock the layout mutations module
-vi.mock('@/renderer/core/layout/operations/layoutMutations')
+vi.mock('@/renderer/core/layout/operations/layoutMutations', () => ({
+  useLayoutMutations: vi.fn()
+}))
 
 const mockedUseLayoutMutations = vi.mocked(useLayoutMutations)
 
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts
deleted file mode 100644
index d954e59b48..0000000000
--- a/tests-ui/tests/renderer/extensions/vueNodes/interactions/resize/resizeMath.test.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import {
-  computeResizeOutcome,
-  createResizeSession,
-  toCanvasDelta
-} from '@/renderer/extensions/vueNodes/interactions/resize/resizeMath'
-
-describe('nodeResizeMath', () => {
-  const startSize = { width: 200, height: 120 }
-  const startPosition = { x: 80, y: 160 }
-
-  it('computes resize from bottom-right corner without moving position', () => {
-    const outcome = computeResizeOutcome({
-      startSize,
-      startPosition,
-      delta: { x: 40, y: 20 },
-      handle: { horizontal: 'right', vertical: 'bottom' }
-    })
-
-    expect(outcome.size).toEqual({ width: 240, height: 140 })
-    expect(outcome.position).toEqual(startPosition)
-  })
-
-  it('computes resize from top-left corner adjusting position', () => {
-    const outcome = computeResizeOutcome({
-      startSize,
-      startPosition,
-      delta: { x: -30, y: -20 },
-      handle: { horizontal: 'left', vertical: 'top' }
-    })
-
-    expect(outcome.size).toEqual({ width: 230, height: 140 })
-    expect(outcome.position).toEqual({ x: 50, y: 140 })
-  })
-
-  it('supports reusable resize sessions with snapping', () => {
-    const session = createResizeSession({
-      startSize,
-      startPosition,
-      handle: { horizontal: 'right', vertical: 'bottom' }
-    })
-
-    const snapFn = vi.fn((size: typeof startSize) => ({
-      width: Math.round(size.width / 25) * 25,
-      height: Math.round(size.height / 25) * 25
-    }))
-
-    const applied = session({ x: 13, y: 17 }, snapFn)
-
-    expect(applied.size).toEqual({ width: 225, height: 125 })
-    expect(applied.position).toEqual(startPosition)
-    expect(snapFn).toHaveBeenCalled()
-  })
-
-  it('converts screen delta to canvas delta using scale', () => {
-    const delta = toCanvasDelta({ x: 50, y: 75 }, { x: 150, y: 135 }, 2)
-
-    expect(delta).toEqual({ x: 50, y: 30 })
-  })
-
-  describe('edge cases', () => {
-    it('handles zero scale by using fallback scale of 1', () => {
-      const delta = toCanvasDelta({ x: 50, y: 75 }, { x: 150, y: 135 }, 0)
-
-      expect(delta).toEqual({ x: 100, y: 60 })
-    })
-
-    it('handles negative deltas when resizing from right/bottom', () => {
-      const outcome = computeResizeOutcome({
-        startSize,
-        startPosition,
-        delta: { x: -50, y: -30 },
-        handle: { horizontal: 'right', vertical: 'bottom' }
-      })
-
-      expect(outcome.size).toEqual({ width: 150, height: 90 })
-      expect(outcome.position).toEqual(startPosition)
-    })
-
-    it('handles very large deltas without overflow', () => {
-      const outcome = computeResizeOutcome({
-        startSize,
-        startPosition,
-        delta: { x: 10000, y: 10000 },
-        handle: { horizontal: 'right', vertical: 'bottom' }
-      })
-
-      expect(outcome.size.width).toBe(10200)
-      expect(outcome.size.height).toBe(10120)
-      expect(outcome.position).toEqual(startPosition)
-    })
-  })
-})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
deleted file mode 100644
index 77d035a676..0000000000
--- a/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, reactive } from 'vue'
-
-import { useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
-
-const mockSettingStore = reactive({
-  get: vi.fn(() => 8)
-})
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => mockSettingStore
-}))
-
-describe('useLOD', () => {
-  beforeEach(() => {
-    vi.restoreAllMocks()
-    vi.unstubAllGlobals()
-
-    mockSettingStore.get.mockReturnValue(8)
-  })
-
-  it('should calculate isLOD value based on zoom threshold correctly', async () => {
-    vi.stubGlobal('devicePixelRatio', 1)
-
-    const camera = reactive({ z: 1 })
-    const { isLOD } = useLOD(camera)
-
-    await nextTick()
-    expect(isLOD.value).toBe(false)
-
-    camera.z = 0.55
-    await nextTick()
-    expect(isLOD.value).toBe(true)
-
-    camera.z = 0.87
-    await nextTick()
-    expect(isLOD.value).toBe(false)
-  })
-
-  it('should handle a different devicePixelRatio value', async () => {
-    vi.stubGlobal('devicePixelRatio', 3) //Threshold with 8px minFontsize = 0.19
-
-    const camera = reactive({ z: 1 })
-    const { isLOD } = useLOD(camera)
-
-    await nextTick()
-    expect(isLOD.value).toBe(false)
-
-    camera.z = 0.18
-    await nextTick()
-    expect(isLOD.value).toBe(true)
-  })
-
-  it('should respond to different minFontSize settings', async () => {
-    vi.stubGlobal('devicePixelRatio', 1)
-
-    mockSettingStore.get.mockReturnValue(16) //Now threshold is 1.14
-
-    const camera = reactive({ z: 1 })
-    const { isLOD } = useLOD(camera)
-
-    await nextTick()
-    expect(isLOD.value).toBe(true)
-
-    camera.z = 1.15
-    await nextTick()
-    expect(isLOD.value).toBe(false)
-  })
-})
diff --git a/tests-ui/tests/workbench/extensions/manager/utils/graphHasMissingNodes.test.ts b/tests-ui/tests/workbench/extensions/manager/utils/graphHasMissingNodes.test.ts
new file mode 100644
index 0000000000..2badaa7cc3
--- /dev/null
+++ b/tests-ui/tests/workbench/extensions/manager/utils/graphHasMissingNodes.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest'
+
+import type {
+  LGraph,
+  LGraphNode,
+  Subgraph
+} from '@/lib/litegraph/src/litegraph'
+import {
+  collectMissingNodes,
+  graphHasMissingNodes
+} from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
+import type { NodeDefLookup } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+type NodeDefs = NodeDefLookup
+
+let nodeIdCounter = 0
+const mockNodeDef = {} as ComfyNodeDefImpl
+
+const createGraph = (nodes: LGraphNode[] = []): LGraph => {
+  return { nodes } as Partial<LGraph> as LGraph
+}
+
+const createSubgraph = (nodes: LGraphNode[]): Subgraph => {
+  return { nodes } as Partial<Subgraph> as Subgraph
+}
+
+const createNode = (
+  type?: string,
+  subgraphNodes?: LGraphNode[]
+): LGraphNode => {
+  return {
+    id: nodeIdCounter++,
+    type,
+    isSubgraphNode: subgraphNodes ? () => true : undefined,
+    subgraph: subgraphNodes ? createSubgraph(subgraphNodes) : undefined
+  } as unknown as LGraphNode
+}
+
+describe('graphHasMissingNodes', () => {
+  it('returns false when graph is null', () => {
+    expect(graphHasMissingNodes(null, {})).toBe(false)
+  })
+
+  it('returns false when graph is undefined', () => {
+    expect(graphHasMissingNodes(undefined, {})).toBe(false)
+  })
+
+  it('returns false when graph has no nodes', () => {
+    expect(graphHasMissingNodes(createGraph(), {})).toBe(false)
+  })
+
+  it('returns false when every node has a definition', () => {
+    const graph = createGraph([createNode('FooNode'), createNode('BarNode')])
+    const nodeDefs: NodeDefs = {
+      FooNode: mockNodeDef,
+      BarNode: mockNodeDef
+    }
+
+    expect(graphHasMissingNodes(graph, nodeDefs)).toBe(false)
+  })
+
+  it('returns true when at least one node is missing', () => {
+    const graph = createGraph([
+      createNode('FooNode'),
+      createNode('MissingNode')
+    ])
+    const nodeDefs: NodeDefs = {
+      FooNode: mockNodeDef
+    }
+
+    expect(graphHasMissingNodes(graph, nodeDefs)).toBe(true)
+  })
+
+  it('checks nodes nested in subgraphs', () => {
+    const graph = createGraph([
+      createNode('ContainerNode', [createNode('InnerMissing')])
+    ])
+    const nodeDefs: NodeDefs = {
+      ContainerNode: mockNodeDef
+    }
+
+    const missingNodes = collectMissingNodes(graph, nodeDefs)
+    expect(missingNodes).toHaveLength(1)
+    expect(missingNodes[0]?.type).toBe('InnerMissing')
+  })
+
+  it('ignores nodes without a type', () => {
+    const graph = createGraph([
+      createNode(undefined),
+      createNode(null as unknown as string)
+    ])
+
+    expect(graphHasMissingNodes(graph, {})).toBe(false)
+  })
+
+  it('traverses deeply nested subgraphs', () => {
+    const deepGraph = createGraph([
+      createNode('Layer1', [
+        createNode('Layer2', [
+          createNode('Layer3', [createNode('MissingDeep')])
+        ])
+      ])
+    ])
+    const nodeDefs: NodeDefs = {
+      Layer1: mockNodeDef,
+      Layer2: mockNodeDef,
+      Layer3: mockNodeDef
+    }
+
+    const missingNodes = collectMissingNodes(deepGraph, nodeDefs)
+    expect(missingNodes).toHaveLength(1)
+    expect(missingNodes[0]?.type).toBe('MissingDeep')
+  })
+})