fix: normalize queue estimate durations from ms to seconds

## Summary
Make the Queue Progress Overlay header clear action label static text
(`Clear queue`) and remove queued-count text from that header area.

## Changes
- Replace dynamic header text (`{count} queued`) with static `Clear
queue` text.
- Keep the existing icon clear button behavior/style in the header.
- Keep the clear action visible when queue is empty, but disabled.
- Add disabled visual treatment for the static text when queue is empty.
- Update `QueueOverlayHeader` tests to cover the new static label and
disabled behavior.

<img width="630" height="103" alt="image"
src="https://github.com/user-attachments/assets/0a5870fc-2ad6-4241-a12d-f8c4ef72a5fa"
/>


Design:
https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=4024-28153&m=dev

<img width="528" height="105" alt="image"
src="https://github.com/user-attachments/assets/3d03a4ac-a0f1-449d-afc7-b9a6cb1c8820"
/>
<img width="529" height="124" alt="image"
src="https://github.com/user-attachments/assets/7452cd17-e388-4b6a-b164-fce0b0d55ca1"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9031-fix-keep-queue-overlay-clear-action-static-30d6d73d365081f8b908fa54775ab4d4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>

.github/workflows/ci-tests-e2e-forks.yaml

@@ -6,9 +6,6 @@ on:
     workflows: ['CI: Tests E2E']
     types: [requested, completed]
 
-env:
-  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
-
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -63,8 +60,7 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting" \
-            "$(date -u '${{ env.DATE_FORMAT }}')"
+            "starting"
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'

.github/workflows/ci-tests-e2e.yaml

@@ -182,10 +182,6 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Get start time
-        id: start-time
-        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
-
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -194,8 +190,7 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting" \
-            "${{ steps.start-time.outputs.time }}"
+            "starting"
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:

.github/workflows/ci-tests-storybook-forks.yaml

@@ -6,9 +6,6 @@ on:
     workflows: ['CI: Tests Storybook']
     types: [requested, completed]
 
-env:
-  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
-
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -63,8 +60,7 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting" \
-            "$(date -u '${{ env.DATE_FORMAT }}')"
+            "starting"
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'

.github/workflows/ci-tests-storybook.yaml

@@ -24,8 +24,7 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting" \
-            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
+            "starting"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:

browser_tests/assets/subgraphs/subgraph-duplicate-links.json

@@ -0,0 +1,183 @@
+{
+  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
+      "pos": [600, 400],
+      "size": [200, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 5,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph With Duplicate Links",
+        "inputNode": {
+          "id": -10,
+          "bounding": [200, 400, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [900, 400, 120, 60]
+        },
+        "inputs": [],
+        "outputs": [
+          {
+            "id": "out-latent-1",
+            "name": "LATENT",
+            "type": "LATENT",
+            "linkIds": [2],
+            "pos": [920, 420]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "KSampler",
+            "pos": [400, 100],
+            "size": [270, 262],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          },
+          {
+            "id": 2,
+            "type": "EmptyLatentImage",
+            "pos": [100, 200],
+            "size": [200, 106],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [1, 3, 4, 5]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptyLatentImage"
+            },
+            "widgets_values": [512, 512, 1]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "LATENT"
+          },
+          {
+            "id": 3,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 4,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 5,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.38.14"
+  },
+  "version": 0.4
+}

browser_tests/tests/subgraph.spec.ts

@@ -375,6 +375,45 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
     })
   })
 
+  test.describe('Subgraph Unpacking', () => {
+    test('Unpacking subgraph with duplicate links does not create extra links', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-duplicate-links'
+      )
+
+      const result = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
+        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
+        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
+          return { error: 'No subgraph node found' }
+        }
+
+        graph.unpackSubgraph(subgraphNode)
+
+        const linkCount = graph.links.size
+        const nodes = graph.nodes
+        const ksampler = nodes.find((n) => n.type === 'KSampler')
+        if (!ksampler) return { error: 'No KSampler found after unpack' }
+
+        const linkedInputCount = ksampler.inputs.filter(
+          (i) => i.link != null
+        ).length
+
+        return { linkCount, linkedInputCount, nodeCount: nodes.length }
+      })
+
+      expect(result).not.toHaveProperty('error')
+      // Should have exactly 1 link (EmptyLatentImage→KSampler)
+      // not 4 (with 3 duplicates). The KSampler→output link is dropped
+      // because the subgraph output has no downstream connection.
+      expect(result.linkCount).toBe(1)
+      // KSampler should have exactly 1 linked input (latent_image)
+      expect(result.linkedInputCount).toBe(1)
+    })
+  })
+
   test.describe('Subgraph Creation and Deletion', () => {
     test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('default')

scripts/cicd/pr-playwright-deploy-and-comment.sh

@@ -2,7 +2,7 @@
 set -e
 
 # Deploy Playwright test reports to Cloudflare Pages and comment on PR
-# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
+# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status>
 
 # Input validation
 # Validate PR number is numeric
@@ -31,8 +31,6 @@ case "$STATUS" in
         ;;
 esac
 
-START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
-
 # Required environment variables
 : "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
 : "${GITHUB_REPOSITORY:?GITHUB_REPOSITORY is required}"
@@ -135,23 +133,8 @@ post_comment() {
 # Main execution
 if [ "$STATUS" = "starting" ]; then
     # Post concise starting comment
-    comment=$(cat <<EOF
-$COMMENT_MARKER
-## 🎭 Playwright Tests: ⏳ Running...
-
-Tests started at $START_TIME UTC
-
-<details>
-<summary>📊 Browser Tests</summary>
-
-- **chromium**: Running...
-- **chromium-0.5x**: Running...
-- **chromium-2x**: Running...
-- **mobile-chrome**: Running...
-
-</details>
-EOF
-)
+    comment="$COMMENT_MARKER
+## 🎭 Playwright: ⏳ Running..."
     post_comment "$comment"
     
 else
@@ -300,7 +283,7 @@ else
     
     # Generate compact single-line comment
     comment="$COMMENT_MARKER
-**Playwright:** $status_icon $total_passed passed, $total_failed failed$flaky_note"
+## 🎭 Playwright: $status_icon $total_passed passed, $total_failed failed$flaky_note"
 
     # Extract and display failed tests from all browsers (flaky tests are treated as passing)
     if [ $total_failed -gt 0 ]; then

scripts/cicd/pr-storybook-deploy-and-comment.sh

@@ -2,7 +2,7 @@
 set -e
 
 # Deploy Storybook to Cloudflare Pages and comment on PR
-# Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
+# Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status>
 
 # Input validation
 # Validate PR number is numeric
@@ -31,7 +31,6 @@ case "$STATUS" in
         ;;
 esac
 
-START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
 
 # Required environment variables
 : "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
@@ -120,50 +119,9 @@ post_comment() {
 
 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # Check if this is a version-bump branch
-    IS_VERSION_BUMP="false"
-    if echo "$BRANCH_NAME" | grep -q "^version-bump-"; then
-        IS_VERSION_BUMP="true"
-    fi
-    
-    # Post starting comment with appropriate message
-    if [ "$IS_VERSION_BUMP" = "true" ]; then
-        comment=$(cat <<EOF
-$COMMENT_MARKER
-## 🎨 Storybook Build Status
-
-<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
-
-⏰ Started at: $START_TIME UTC
-
-### 🚀 Building Storybook
-- 📦 Installing dependencies...
-- 🔧 Building Storybook components...
-- 🎨 Running Chromatic visual tests...
-
----
-⏱️ Please wait while the Storybook build is in progress...
-EOF
-)
-    else
-        comment=$(cat <<EOF
-$COMMENT_MARKER
-## 🎨 Storybook Build Status
-
-<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
-
-⏰ Started at: $START_TIME UTC
-
-### 🚀 Building Storybook
-- 📦 Installing dependencies...
-- 🔧 Building Storybook components...
-- 🌐 Preparing deployment to Cloudflare Pages...
-
----
-⏱️ Please wait while the Storybook build is in progress...
-EOF
-)
-    fi
+    # Post starting comment
+    comment="$COMMENT_MARKER
+## 🎨 Storybook: <img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> Building..."
     post_comment "$comment"
     
 elif [ "$STATUS" = "completed" ]; then
@@ -192,56 +150,57 @@ elif [ "$STATUS" = "completed" ]; then
     WORKFLOW_CONCLUSION="${WORKFLOW_CONCLUSION:-success}"
     WORKFLOW_URL="${WORKFLOW_URL:-}"
     
-    # Generate completion comment based on conclusion
+    # Generate compact header based on conclusion
     if [ "$WORKFLOW_CONCLUSION" = "success" ]; then
         status_icon="✅"
-        status_text="Build completed successfully!"
-        footer_text="🎉 Your Storybook is ready for review!"
+        status_text="Built"
     elif [ "$WORKFLOW_CONCLUSION" = "skipped" ]; then
         status_icon="⏭️"
-        status_text="Build skipped."
-        footer_text="ℹ️ Chromatic was skipped for this PR."
+        status_text="Skipped"
     elif [ "$WORKFLOW_CONCLUSION" = "cancelled" ]; then
         status_icon="🚫"
-        status_text="Build cancelled."
-        footer_text="ℹ️ The Chromatic run was cancelled."
+        status_text="Cancelled"
     else
         status_icon="❌"
-        status_text="Build failed!"
-        footer_text="⚠️ Please check the workflow logs for error details."
+        status_text="Failed"
     fi
-    
-    comment="$COMMENT_MARKER
-## 🎨 Storybook Build Status
 
-$status_icon **$status_text**
+    # Build compact header with optional storybook link
+    header="## 🎨 Storybook: $status_icon $status_text"
+    if [ "$deployment_url" != "Not deployed" ] && [ "$deployment_url" != "Deployment failed" ] && [ "$WORKFLOW_CONCLUSION" = "success" ]; then
+        header="$header — $deployment_url"
+    fi
+
+    # Build details section
+    details="<details>
+<summary>Details</summary>
 
 ⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC
 
-### 🔗 Links
+**Links**
 - [📊 View Workflow Run]($WORKFLOW_URL)"
-    
-    # Add deployment status
+
     if [ "$deployment_url" != "Not deployed" ]; then
         if [ "$deployment_url" = "Deployment failed" ]; then
-            comment="$comment
+            details="$details
 - ❌ Storybook deployment failed"
-        elif [ "$WORKFLOW_CONCLUSION" = "success" ]; then
-            comment="$comment
-- 🎨 $deployment_url"
-        else
-            comment="$comment
-- ⚠️ Build failed - $deployment_url"
+        elif [ "$WORKFLOW_CONCLUSION" != "success" ]; then
+            details="$details
+- ⚠️ Build failed — $deployment_url"
         fi
     elif [ "$WORKFLOW_CONCLUSION" != "success" ]; then
-        comment="$comment
+        details="$details
 - ⏭️ Storybook deployment skipped (build did not succeed)"
     fi
-    
-    comment="$comment
 
----
-$footer_text"
+    details="$details
+
+</details>"
+
+    comment="$COMMENT_MARKER
+$header
+
+$details"
     
     post_comment "$comment"
 fi

src/components/common/VirtualGrid.test.ts

@@ -0,0 +1,189 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Ref } from 'vue'
+import { nextTick, ref } from 'vue'
+
+import VirtualGrid from './VirtualGrid.vue'
+
+type TestItem = { key: string; name: string }
+
+let mockedWidth: Ref<number>
+let mockedHeight: Ref<number>
+let mockedScrollY: Ref<number>
+
+vi.mock('@vueuse/core', async () => {
+  const actual = await vi.importActual<Record<string, unknown>>('@vueuse/core')
+  return {
+    ...actual,
+    useElementSize: () => ({ width: mockedWidth, height: mockedHeight }),
+    useScroll: () => ({ y: mockedScrollY })
+  }
+})
+
+beforeEach(() => {
+  mockedWidth = ref(400)
+  mockedHeight = ref(200)
+  mockedScrollY = ref(0)
+})
+
+function createItems(count: number): TestItem[] {
+  return Array.from({ length: count }, (_, i) => ({
+    key: `item-${i}`,
+    name: `Item ${i}`
+  }))
+}
+
+describe('VirtualGrid', () => {
+  const defaultGridStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)',
+    gap: '1rem'
+  }
+
+  it('renders items within the visible range', async () => {
+    const items = createItems(100)
+    mockedWidth.value = 400
+    mockedHeight.value = 200
+    mockedScrollY.value = 0
+
+    const wrapper = mount(VirtualGrid<TestItem>, {
+      props: {
+        items,
+        gridStyle: defaultGridStyle,
+        defaultItemHeight: 100,
+        defaultItemWidth: 100,
+        maxColumns: 4,
+        bufferRows: 1
+      },
+      slots: {
+        item: `<template #item="{ item }">
+          <div class="test-item">{{ item.name }}</div>
+        </template>`
+      },
+      attachTo: document.body
+    })
+
+    await nextTick()
+
+    const renderedItems = wrapper.findAll('.test-item')
+    expect(renderedItems.length).toBeGreaterThan(0)
+    expect(renderedItems.length).toBeLessThan(items.length)
+
+    wrapper.unmount()
+  })
+
+  it('provides correct index in slot props', async () => {
+    const items = createItems(20)
+    const receivedIndices: number[] = []
+    mockedWidth.value = 400
+    mockedHeight.value = 200
+    mockedScrollY.value = 0
+
+    const wrapper = mount(VirtualGrid<TestItem>, {
+      props: {
+        items,
+        gridStyle: defaultGridStyle,
+        defaultItemHeight: 50,
+        defaultItemWidth: 100,
+        maxColumns: 1,
+        bufferRows: 0
+      },
+      slots: {
+        item: ({ index }: { index: number }) => {
+          receivedIndices.push(index)
+          return null
+        }
+      },
+      attachTo: document.body
+    })
+
+    await nextTick()
+
+    expect(receivedIndices.length).toBeGreaterThan(0)
+    expect(receivedIndices[0]).toBe(0)
+    for (let i = 1; i < receivedIndices.length; i++) {
+      expect(receivedIndices[i]).toBe(receivedIndices[i - 1] + 1)
+    }
+
+    wrapper.unmount()
+  })
+
+  it('respects maxColumns prop', async () => {
+    const items = createItems(10)
+    mockedWidth.value = 400
+    mockedHeight.value = 200
+    mockedScrollY.value = 0
+
+    const wrapper = mount(VirtualGrid<TestItem>, {
+      props: {
+        items,
+        gridStyle: defaultGridStyle,
+        maxColumns: 2
+      },
+      attachTo: document.body
+    })
+
+    await nextTick()
+
+    const gridElement = wrapper.find('[style*="display: grid"]')
+    expect(gridElement.exists()).toBe(true)
+
+    const gridEl = gridElement.element as HTMLElement
+    expect(gridEl.style.gridTemplateColumns).toBe('repeat(2, minmax(0, 1fr))')
+
+    wrapper.unmount()
+  })
+
+  it('renders empty when no items provided', async () => {
+    const wrapper = mount(VirtualGrid<TestItem>, {
+      props: {
+        items: [],
+        gridStyle: defaultGridStyle
+      },
+      slots: {
+        item: `<template #item="{ item }">
+          <div class="test-item">{{ item.name }}</div>
+        </template>`
+      }
+    })
+
+    await nextTick()
+
+    const renderedItems = wrapper.findAll('.test-item')
+    expect(renderedItems.length).toBe(0)
+
+    wrapper.unmount()
+  })
+
+  it('forces cols to maxColumns when maxColumns is finite', async () => {
+    mockedWidth.value = 100
+    mockedHeight.value = 200
+    mockedScrollY.value = 0
+
+    const items = createItems(20)
+    const wrapper = mount(VirtualGrid<TestItem>, {
+      props: {
+        items,
+        gridStyle: defaultGridStyle,
+        defaultItemHeight: 50,
+        defaultItemWidth: 200,
+        maxColumns: 4,
+        bufferRows: 0
+      },
+      slots: {
+        item: `<template #item="{ item }">
+          <div class="test-item">{{ item.name }}</div>
+        </template>`
+      },
+      attachTo: document.body
+    })
+
+    await nextTick()
+
+    const renderedItems = wrapper.findAll('.test-item')
+    expect(renderedItems.length).toBeGreaterThan(0)
+    expect(renderedItems.length % 4).toBe(0)
+
+    wrapper.unmount()
+  })
+})

src/components/common/VirtualGrid.vue

@@ -1,17 +1,16 @@
 <template>
   <div
     ref="container"
-    class="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
+    class="h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable] scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
   >
     <div :style="topSpacerStyle" />
     <div :style="mergedGridStyle">
       <div
-        v-for="item in renderedItems"
+        v-for="(item, i) in renderedItems"
         :key="item.key"
-        class="transition-[width] duration-150 ease-out"
         data-virtual-grid-item
       >
-        <slot name="item" :item="item" />
+        <slot name="item" :item :index="state.start + i" />
       </div>
     </div>
     <div :style="bottomSpacerStyle" />
@@ -66,9 +65,10 @@ const { y: scrollY } = useScroll(container, {
   eventListenerOptions: { passive: true }
 })
 
-const cols = computed(() =>
-  Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
-)
+const cols = computed(() => {
+  if (maxColumns !== Infinity) return maxColumns
+  return Math.floor(width.value / itemWidth.value) || 1
+})
 
 const mergedGridStyle = computed<CSSProperties>(() => {
   if (maxColumns === Infinity) return gridStyle
@@ -101,8 +101,9 @@ const renderedItems = computed(() =>
   isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
 )
 
-function rowsToHeight(rows: number): string {
-  return `${(rows / cols.value) * itemHeight.value}px`
+function rowsToHeight(itemsCount: number): string {
+  const rows = Math.ceil(itemsCount / cols.value)
+  return `${rows * itemHeight.value}px`
 }
 const topSpacerStyle = computed<CSSProperties>(() => ({
   height: rowsToHeight(state.value.start)
@@ -118,11 +119,10 @@ whenever(
   }
 )
 
-const updateItemSize = () => {
+function updateItemSize(): void {
   if (container.value) {
     const firstItem = container.value.querySelector('[data-virtual-grid-item]')
 
-    // Don't update item size if the first item is not rendered yet
     if (!firstItem?.clientHeight || !firstItem?.clientWidth) return
 
     if (itemHeight.value !== firstItem.clientHeight) {

src/components/queue/QueueOverlayHeader.test.ts

@@ -54,6 +54,8 @@ const i18n = createI18n({
           running: 'running',
           queuedSuffix: 'queued',
           clearQueued: 'Clear queued',
+          clearQueueTooltip: 'Clear queue',
+          clearAllJobsTooltip: 'Cancel all running jobs',
           moreOptions: 'More options',
           clearHistory: 'Clear history',
           dockedJobHistory: 'Docked Job History'
@@ -101,23 +103,23 @@ describe('QueueOverlayHeader', () => {
     expect(wrapper.find('.inline-flex.items-center.gap-1').exists()).toBe(false)
   })
 
-  it('shows queued summary and emits clear queued', async () => {
+  it('shows clear queue text and emits clear queued', async () => {
     const wrapper = mountHeader({ queuedCount: 4 })
 
-    expect(wrapper.text()).toContain('4')
-    expect(wrapper.text()).toContain('queued')
+    expect(wrapper.text()).toContain('Clear queue')
+    expect(wrapper.text()).not.toContain('4 queued')
 
     const clearQueuedButton = wrapper.get('button[aria-label="Clear queued"]')
     await clearQueuedButton.trigger('click')
     expect(wrapper.emitted('clearQueued')).toHaveLength(1)
   })
 
-  it('hides clear queued button when queued count is zero', () => {
+  it('disables clear queued button when queued count is zero', () => {
     const wrapper = mountHeader({ queuedCount: 0 })
+    const clearQueuedButton = wrapper.get('button[aria-label="Clear queued"]')
 
-    expect(wrapper.find('button[aria-label="Clear queued"]').exists()).toBe(
-      false
-    )
+    expect(clearQueuedButton.attributes('disabled')).toBeDefined()
+    expect(wrapper.text()).toContain('Clear queue')
   })
 
   it('emits clear history from the menu', async () => {

src/components/queue/QueueOverlayHeader.vue

@@ -20,18 +20,15 @@
     <div
       class="inline-flex h-6 items-center gap-2 text-[12px] leading-none text-text-primary"
     >
-      <span class="opacity-90">
-        <span class="font-bold">{{ queuedCount }}</span>
-        <span class="ml-1">{{
-          t('sideToolbar.queueProgressOverlay.queuedSuffix')
-        }}</span>
-      </span>
+      <span :class="{ 'opacity-50': queuedCount === 0 }">{{
+        t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
+      }}</span>
       <Button
-        v-if="queuedCount > 0"
         v-tooltip.top="clearAllJobsTooltip"
         variant="destructive"
         size="icon"
         :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+        :disabled="queuedCount === 0"
         @click="$emit('clearQueued')"
       >
         <i class="icon-[lucide--list-x] size-4" />

src/components/queue/job/useQueueEstimates.test.ts

@@ -11,10 +11,10 @@ type QueueStore = UseQueueEstimatesOptions['queueStore']
 type ExecutionStore = UseQueueEstimatesOptions['executionStore']
 
 const makeHistoryTask = (
-  executionTimeInSeconds: number | string | undefined
+  executionTimeInMilliseconds: number | string | undefined
 ): TaskItemImpl =>
   ({
-    executionTimeInSeconds
+    executionTimeInSeconds: executionTimeInMilliseconds
   }) as TaskItemImpl
 
 const makeRunningTask = (executionStartTimestamp?: number): TaskItemImpl =>
@@ -116,13 +116,13 @@ describe('useQueueEstimates', () => {
   })
 
   it('uses the last 20 valid durations to estimate queued batches', () => {
-    const durations = Array.from({ length: 25 }, (_, idx) => idx + 1)
+    const durationsMs = Array.from({ length: 25 }, (_, idx) => (idx + 1) * 1000)
     const queueStore = createQueueStore({
       historyTasks: [
-        ...durations.slice(0, 5).map((value) => makeHistoryTask(value)),
+        ...durationsMs.slice(0, 5).map((value) => makeHistoryTask(value)),
         makeHistoryTask('not-a-number'),
         makeHistoryTask(undefined),
-        ...durations.slice(5).map((value) => makeHistoryTask(value))
+        ...durationsMs.slice(5).map((value) => makeHistoryTask(value))
       ]
     })
 
@@ -144,7 +144,7 @@ describe('useQueueEstimates', () => {
 
     const missingAhead = createHarness({
       queueStore: createQueueStore({
-        historyTasks: [makeHistoryTask(10)]
+        historyTasks: [makeHistoryTask(10_000)]
       })
     })
     expect(missingAhead.estimateRangeSeconds.value).toBeNull()
@@ -153,7 +153,9 @@ describe('useQueueEstimates', () => {
   it('falls back to the running remaining range when there are no jobs ahead', () => {
     const now = 20000
     const queueStore = createQueueStore({
-      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value)),
+      historyTasks: [10_000, 20_000, 30_000].map((value) =>
+        makeHistoryTask(value)
+      ),
       runningTasks: [
         makeRunningTask(now - 5000),
         makeRunningTask(now - 15000),
@@ -173,7 +175,9 @@ describe('useQueueEstimates', () => {
   it('subtracts elapsed time when estimating a running job', () => {
     const now = 25000
     const queueStore = createQueueStore({
-      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value))
+      historyTasks: [10_000, 20_000, 30_000].map((value) =>
+        makeHistoryTask(value)
+      )
     })
 
     const { estimateRemainingRangeSeconds } = createHarness({
@@ -189,7 +193,9 @@ describe('useQueueEstimates', () => {
 
   it('uses the first-seen timestamp for pending jobs and clamps negatives to zero', () => {
     const queueStore = createQueueStore({
-      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value))
+      historyTasks: [10_000, 20_000, 30_000].map((value) =>
+        makeHistoryTask(value)
+      )
     })
 
     const harness = createHarness({
@@ -207,6 +213,19 @@ describe('useQueueEstimates', () => {
     expect(harness.estimateRemainingRangeSeconds.value).toEqual([0, 0])
   })
 
+  it('converts execution durations from milliseconds to seconds', () => {
+    const queueStore = createQueueStore({
+      historyTasks: [2_000, 4_000].map((value) => makeHistoryTask(value))
+    })
+
+    const { estimateRangeSeconds } = createHarness({
+      queueStore,
+      jobsAhead: 1
+    })
+
+    expect(estimateRangeSeconds.value).toEqual([3, 4])
+  })
+
   it('computes the elapsed label using execution start, then first-seen timestamp', () => {
     const harness = createHarness()
 

src/components/queue/job/useQueueEstimates.ts

@@ -30,10 +30,8 @@ export const formatElapsedTime = (ms: number): string => {
 const pickRecentDurations = (queueStore: QueueStore) =>
   queueStore.historyTasks
     .map((task: TaskItemImpl) => Number(task.executionTimeInSeconds))
-    .filter(
-      (value: number | undefined) =>
-        typeof value === 'number' && !Number.isNaN(value)
-    ) as number[]
+    .filter((value: number) => Number.isFinite(value) && value >= 0)
+    .map((durationMilliseconds: number) => durationMilliseconds / 1000)
 
 export const useQueueEstimates = ({
   queueStore,

src/components/searchbox/v2/NodeSearchCategorySidebar.vue

@@ -53,6 +53,7 @@ import NodeSearchCategoryTreeNode, {
   CATEGORY_UNSELECTED_CLASS
 } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
 import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { nodeOrganizationService } from '@/services/nodeOrganizationService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
@@ -64,6 +65,7 @@ const selectedCategory = defineModel<string>('selectedCategory', {
 })
 
 const { t } = useI18n()
+const { flags } = useFeatureFlags()
 const nodeDefStore = useNodeDefStore()
 
 const topCategories = computed(() => [
@@ -79,7 +81,7 @@ const hasEssentialNodes = computed(() =>
 
 const sourceCategories = computed(() => {
   const categories = []
-  if (hasEssentialNodes.value) {
+  if (flags.nodeLibraryEssentialsEnabled && hasEssentialNodes.value) {
     categories.push({ id: 'essentials', label: t('g.essentials') })
   }
   categories.push({ id: 'custom', label: t('g.custom') })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -153,7 +153,7 @@ function getAssetPreviewUrl(asset: AssetItem): string {
 function getAssetSecondaryText(asset: AssetItem): string {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (typeof metadata?.executionTimeInSeconds === 'number') {
-    return `${metadata.executionTimeInSeconds.toFixed(2)}s`
+    return formatDuration(metadata.executionTimeInSeconds)
   }
 
   const duration = asset.user_metadata?.duration

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -293,7 +293,7 @@ const shouldShowOutputCount = (item: AssetItem): boolean => {
 
 const formattedExecutionTime = computed(() => {
   if (!folderExecutionTime.value) return ''
-  return formatDuration(folderExecutionTime.value * 1000)
+  return formatDuration(folderExecutionTime.value)
 })
 
 const toast = useToast()

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -52,7 +52,7 @@
             :value="tab.value"
             :class="
               cn(
-                'select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
+                'flex-1 text-center select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
                 'text-sm text-foreground transition-colors',
                 selectedTab === tab.value
                   ? 'bg-comfy-input font-bold'
@@ -70,7 +70,9 @@
       <!-- Tab content (scrollable) -->
       <TabsRoot v-model="selectedTab" class="h-full">
         <EssentialNodesPanel
-          v-if="selectedTab === 'essentials'"
+          v-if="
+            flags.nodeLibraryEssentialsEnabled && selectedTab === 'essentials'
+          "
           v-model:expanded-keys="expandedKeys"
           :root="renderedEssentialRoot"
           @node-click="handleNodeClick"
@@ -109,10 +111,11 @@ import {
   TabsRoot,
   TabsTrigger
 } from 'reka-ui'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBoxV2.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
 import { usePerTabState } from '@/composables/usePerTabState'
 import {
@@ -136,11 +139,22 @@ import EssentialNodesPanel from './nodeLibrary/EssentialNodesPanel.vue'
 import NodeDragPreview from './nodeLibrary/NodeDragPreview.vue'
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 
+const { flags } = useFeatureFlags()
+
 const selectedTab = useLocalStorage<TabId>(
   'Comfy.NodeLibrary.Tab',
   DEFAULT_TAB_ID
 )
 
+watchEffect(() => {
+  if (
+    !flags.nodeLibraryEssentialsEnabled &&
+    selectedTab.value === 'essentials'
+  ) {
+    selectedTab.value = DEFAULT_TAB_ID
+  }
+})
+
 const sortOrderByTab = useLocalStorage<Record<TabId, SortingStrategyId>>(
   'Comfy.NodeLibrary.SortByTab',
   {
@@ -324,11 +338,21 @@ async function handleSearch() {
   expandedKeys.value = allKeys
 }
 
-const tabs = computed(() => [
-  { value: 'essentials', label: t('sideToolbar.nodeLibraryTab.essentials') },
-  { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
-  { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
-])
+const tabs = computed(() => {
+  const baseTabs: Array<{ value: TabId; label: string }> = [
+    { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
+    { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
+  ]
+  return flags.nodeLibraryEssentialsEnabled
+    ? [
+        {
+          value: 'essentials' as TabId,
+          label: t('sideToolbar.nodeLibraryTab.essentials')
+        },
+        ...baseTabs
+      ]
+    : baseTabs
+})
 
 onMounted(() => {
   searchBoxRef.value?.focus()

src/components/ui/textarea/Textarea.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Textarea from './Textarea.vue'
+
+const meta: Meta<typeof Textarea> = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof Textarea>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Textarea },
+    setup() {
+      const value = ref('Hello world')
+      return { value }
+    },
+    template:
+      '<Textarea v-model="value" placeholder="Type something..." class="max-w-sm" />'
+  })
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { Textarea },
+    template:
+      '<Textarea model-value="Disabled textarea" disabled class="max-w-sm" />'
+  })
+}
+
+export const WithLabel: Story = {
+  render: () => ({
+    components: { Textarea },
+    setup() {
+      const value = ref('Content that sits below the label')
+      return { value }
+    },
+    template: `
+      <div class="relative max-w-sm rounded-lg bg-component-node-widget-background">
+        <label class="pointer-events-none absolute left-3 top-1.5 text-xxs text-muted-foreground z-10">
+          Prompt
+        </label>
+        <Textarea
+          v-model="value"
+          class="size-full resize-none border-none bg-transparent pt-5 text-xs"
+        />
+      </div>
+    `
+  })
+}

src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const { class: className, ...restAttrs } = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const modelValue = defineModel<string | number>()
+</script>
+
+<template>
+  <textarea
+    v-bind="restAttrs"
+    v-model="modelValue"
+    :class="
+      cn(
+        'flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )
+    "
+  />
+</template>

src/composables/useFeatureFlags.ts

@@ -22,7 +22,8 @@ export enum ServerFeatureFlag {
   LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled',
   TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled',
   USER_SECRETS_ENABLED = 'user_secrets_enabled',
-  NODE_REPLACEMENTS = 'node_replacements'
+  NODE_REPLACEMENTS = 'node_replacements',
+  NODE_LIBRARY_ESSENTIALS_ENABLED = 'node_library_essentials_enabled'
 }
 
 /**
@@ -118,6 +119,17 @@ export function useFeatureFlags() {
     },
     get nodeReplacementsEnabled() {
       return api.getServerFeature(ServerFeatureFlag.NODE_REPLACEMENTS, false)
+    },
+    get nodeLibraryEssentialsEnabled() {
+      if (isNightly || import.meta.env.DEV) return true
+
+      return (
+        remoteConfig.value.node_library_essentials_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.NODE_LIBRARY_ESSENTIALS_ENABLED,
+          false
+        )
+      )
     }
   })
 

src/lib/litegraph/src/LGraph.test.ts

@@ -484,3 +484,110 @@ describe('ensureGlobalIdUniqueness', () => {
     expect(subNode.id).toBe(subId)
   })
 })
+
+describe('Subgraph Unpacking', () => {
+  class TestNode extends LGraphNode {
+    constructor(title?: string) {
+      super(title ?? 'TestNode')
+      this.addInput('input_0', 'number')
+      this.addOutput('output_0', 'number')
+    }
+  }
+
+  class MultiInputNode extends LGraphNode {
+    constructor(title?: string) {
+      super(title ?? 'MultiInputNode')
+      this.addInput('input_0', 'number')
+      this.addInput('input_1', 'number')
+      this.addOutput('output_0', 'number')
+    }
+  }
+
+  function registerTestNodes() {
+    LiteGraph.registerNodeType('test/TestNode', TestNode)
+    LiteGraph.registerNodeType('test/MultiInputNode', MultiInputNode)
+  }
+
+  function createSubgraphOnGraph(rootGraph: LGraph) {
+    return rootGraph.createSubgraph(createTestSubgraphData())
+  }
+
+  it('deduplicates links when unpacking subgraph with duplicate links', () => {
+    registerTestNodes()
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const sourceNode = LiteGraph.createNode('test/TestNode', 'Source')!
+    const targetNode = LiteGraph.createNode('test/TestNode', 'Target')!
+    subgraph.add(sourceNode)
+    subgraph.add(targetNode)
+
+    // Create a legitimate link
+    sourceNode.connect(0, targetNode, 0)
+    expect(subgraph._links.size).toBe(1)
+
+    // Manually add duplicate links (simulating the bug)
+    const existingLink = subgraph._links.values().next().value!
+    for (let i = 0; i < 3; i++) {
+      const dupLink = new LLink(
+        ++subgraph.state.lastLinkId,
+        existingLink.type,
+        existingLink.origin_id,
+        existingLink.origin_slot,
+        existingLink.target_id,
+        existingLink.target_slot
+      )
+      subgraph._links.set(dupLink.id, dupLink)
+      sourceNode.outputs[0].links!.push(dupLink.id)
+    }
+    expect(subgraph._links.size).toBe(4)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
+    rootGraph.add(subgraphNode)
+
+    rootGraph.unpackSubgraph(subgraphNode)
+
+    // After unpacking, there should be exactly 1 link (not 4)
+    expect(rootGraph.links.size).toBe(1)
+  })
+
+  it('preserves correct link connections when unpacking with duplicate links', () => {
+    registerTestNodes()
+    const rootGraph = new LGraph()
+    const subgraph = createSubgraphOnGraph(rootGraph)
+
+    const sourceNode = LiteGraph.createNode('test/MultiInputNode', 'Source')!
+    const targetNode = LiteGraph.createNode('test/MultiInputNode', 'Target')!
+    subgraph.add(sourceNode)
+    subgraph.add(targetNode)
+
+    // Connect source output 0 → target input 0
+    sourceNode.connect(0, targetNode, 0)
+
+    // Add duplicate links to the same connection
+    const existingLink = subgraph._links.values().next().value!
+    const dupLink = new LLink(
+      ++subgraph.state.lastLinkId,
+      existingLink.type,
+      existingLink.origin_id,
+      existingLink.origin_slot,
+      existingLink.target_id,
+      existingLink.target_slot
+    )
+    subgraph._links.set(dupLink.id, dupLink)
+    sourceNode.outputs[0].links!.push(dupLink.id)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
+    rootGraph.add(subgraphNode)
+
+    rootGraph.unpackSubgraph(subgraphNode)
+
+    // Verify only 1 link exists
+    expect(rootGraph.links.size).toBe(1)
+
+    // Verify target input 1 does NOT have a link (no spurious connection)
+    const unpackedTarget = rootGraph.nodes.find((n) => n.title === 'Target')!
+    expect(unpackedTarget.inputs[0].link).not.toBeNull()
+    expect(unpackedTarget.inputs[1].link).toBeNull()
+  })
+})

src/lib/litegraph/src/LGraph.ts

@@ -1929,15 +1929,20 @@ export class LGraph
       node.id = this.last_node_id
       n_info.id = this.last_node_id
 
+      // Strip links from serialized data before configure to prevent
+      // onConnectionsChange from resolving subgraph-internal link IDs
+      // against the parent graph's link map (which may contain unrelated
+      // links with the same numeric IDs).
+      for (const input of n_info.inputs ?? []) {
+        input.link = null
+      }
+      for (const output of n_info.outputs ?? []) {
+        output.links = []
+      }
+
       this.add(node, true)
       node.configure(n_info)
       node.setPos(node.pos[0] + offsetX, node.pos[1] + offsetY)
-      for (const input of node.inputs) {
-        input.link = null
-      }
-      for (const output of node.outputs) {
-        output.links = []
-      }
       toSelect.push(node)
     }
     const groups = structuredClone(
@@ -2043,8 +2048,19 @@ export class LGraph
     }
     this.remove(subgraphNode)
     this.subgraphs.delete(subgraphNode.subgraph.id)
+
+    // Deduplicate links by (oid, oslot, tid, tslot) to prevent repeated
+    // disconnect/reconnect cycles on widget inputs that can shift slot indices.
+    const seenLinks = new Set<string>()
+    const dedupedNewLinks = newLinks.filter((link) => {
+      const key = `${link.oid}:${link.oslot}:${link.tid}:${link.tslot}`
+      if (seenLinks.has(key)) return false
+      seenLinks.add(key)
+      return true
+    })
+
     const linkIdMap = new Map<LinkId, LinkId[]>()
-    for (const newLink of newLinks) {
+    for (const newLink of dedupedNewLinks) {
       let created: LLink | null | undefined
       if (newLink.oid == SUBGRAPH_INPUT_ID) {
         if (!(this instanceof Subgraph)) {
@@ -2102,7 +2118,7 @@ export class LGraph
       toSelect.push(migratedReroute)
     }
     //iterate over newly created links to update reroute parentIds
-    for (const newLink of newLinks) {
+    for (const newLink of dedupedNewLinks) {
       const linkInstance = this.links.get(newLink.id)
       if (!linkInstance) {
         continue
@@ -2657,6 +2673,8 @@ export class Subgraph
 
   /** The display name of the subgraph. */
   name: string = 'Unnamed Subgraph'
+  /** Optional description shown as tooltip when hovering over the subgraph node. */
+  description?: string
 
   readonly inputNode = new SubgraphInputNode(this)
   readonly outputNode = new SubgraphOutputNode(this)
@@ -2707,9 +2725,10 @@ export class Subgraph
       | (ISerialisedGraph & ExportedSubgraph)
       | (SerialisableGraph & ExportedSubgraph)
   ): void {
-    const { name, inputs, outputs, widgets } = data
+    const { name, description, inputs, outputs, widgets } = data
 
     this.name = name
+    this.description = description
     if (inputs) {
       this.inputs.length = 0
       for (const input of inputs) {
@@ -2920,6 +2939,7 @@ export class Subgraph
       revision: this.revision,
       config: this.config,
       name: this.name,
+      ...(this.description && { description: this.description }),
       inputNode: this.inputNode.asSerialisable(),
       outputNode: this.outputNode.asSerialisable(),
       inputs: this.inputs.map((x) => x.asSerialisable()),

src/lib/litegraph/src/subgraph/SubgraphSerialization.test.ts

@@ -76,7 +76,6 @@ describe.skip('SubgraphSerialization - Basic Serialization', () => {
     // Verify core properties
     expect(restored.id).toBe(original.id)
     expect(restored.name).toBe(original.name)
-    // @ts-expect-error description property not in type definition
     expect(restored.description).toBe(original.description)
 
     // Verify I/O structure

src/lib/litegraph/src/types/serialisation.ts

@@ -139,6 +139,8 @@ export interface ExportedSubgraph extends SerialisableGraph {
   name: string
   /** Optional category for organizing subgraph blueprints in the node library. */
   category?: string
+  /** Optional description shown as tooltip when hovering over the subgraph node. */
+  description?: string
   inputNode: ExportedSubgraphIONode
   outputNode: ExportedSubgraphIONode
   /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */

src/locales/en/main.json

@@ -2459,7 +2459,8 @@
       "placeholderVideo": "Select video...",
       "placeholderMesh": "Select mesh...",
       "placeholderModel": "Select model...",
-      "placeholderUnknown": "Select media..."
+      "placeholderUnknown": "Select media...",
+      "maxSelectionReached": "Maximum selection limit reached"
     },
     "valueControl": {
       "header": {

src/platform/assets/components/MediaAssetCard.vue

@@ -255,7 +255,7 @@ const formattedDuration = computed(() => {
   // Check for execution time first (from history API)
   const executionTime = asset?.user_metadata?.executionTimeInSeconds
   if (executionTime !== undefined && executionTime !== null) {
-    return `${Number(executionTime).toFixed(2)}s`
+    return formatDuration(Number(executionTime))
   }
 
   // Fall back to duration for media files

src/platform/remoteConfig/types.ts

@@ -43,4 +43,5 @@ export type RemoteConfig = {
   linear_toggle_enabled?: boolean
   team_workspaces_enabled?: boolean
   user_secrets_enabled?: boolean
+  node_library_essentials_enabled?: boolean
 }

src/platform/workflow/validation/schemas/workflowSchema.ts

@@ -396,6 +396,8 @@ interface SubgraphDefinitionBase<
   id: string
   revision: number
   name: string
+  /** Optional description shown as tooltip when hovering over the subgraph node. */
+  description?: string
   category?: string
   /** Custom metadata for the subgraph (description, searchAliases, etc.) */
   extra?: T extends ComfyWorkflow1BaseInput
@@ -432,6 +434,8 @@ const zSubgraphDefinition = zComfyWorkflow1
     id: z.string().uuid(),
     revision: z.number(),
     name: z.string(),
+    /** Optional description shown as tooltip when hovering over the subgraph node. */
+    description: z.string().optional(),
     category: z.string().optional(),
     inputNode: zExportedSubgraphIONode,
     outputNode: zExportedSubgraphIONode,

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts

@@ -1,6 +1,4 @@
 import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import Textarea from 'primevue/textarea'
 import { describe, expect, it } from 'vitest'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -28,10 +26,6 @@ function mountComponent(
   placeholder?: string
 ) {
   return mount(WidgetTextarea, {
-    global: {
-      plugins: [PrimeVue],
-      components: { Textarea }
-    },
     props: {
       widget,
       modelValue,

src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue

@@ -1,37 +1,45 @@
 <template>
-  <FloatLabel
-    variant="in"
-    :unstyled="hideLayoutField"
+  <div
     :class="
       cn(
-        'rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+        'relative rounded-lg focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
         widget.borderStyle
       )
     "
   >
+    <label
+      v-if="!hideLayoutField"
+      :for="id"
+      class="pointer-events-none absolute left-3 top-1.5 z-10 text-xxs text-muted-foreground"
+    >
+      {{ displayName }}
+    </label>
     <Textarea
       v-bind="filteredProps"
       :id
       v-model="modelValue"
-      :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
+      :class="
+        cn(
+          WidgetInputBaseClass,
+          'size-full text-xs resize-none',
+          !hideLayoutField && 'pt-5'
+        )
+      "
       :placeholder
       :readonly="isReadOnly"
-      fluid
       data-capture-wheel="true"
       @pointerdown.capture.stop
       @pointermove.capture.stop
       @pointerup.capture.stop
       @contextmenu.capture.stop
     />
-    <label v-if="!hideLayoutField" :for="id">{{ displayName }}</label>
-  </FloatLabel>
+  </div>
 </template>
 
 <script setup lang="ts">
-import FloatLabel from 'primevue/floatlabel'
-import Textarea from 'primevue/textarea'
 import { computed, useId } from 'vue'
 
+import Textarea from '@/components/ui/textarea/Textarea.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -161,7 +161,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
       sel.clear()
       sel.add(item.id)
     } else {
-      toastStore.addAlert(`Maximum selection limit reached`)
+      toastStore.addAlert(t('widgets.uploadSelect.maxSelectionReached'))
       return
     }
   }

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -49,7 +49,7 @@ const theButtonStyle = computed(() =>
   <div
     :class="
       cn(WidgetInputBaseClass, 'flex text-base leading-none', {
-        'opacity-50 cursor-not-allowed !outline-zinc-300/10': disabled
+        'opacity-50 cursor-not-allowed outline-zinc-300/10': disabled
       })
     "
   >

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts

@@ -0,0 +1,113 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+
+import FormDropdownMenu from './FormDropdownMenu.vue'
+import type { FormDropdownItem, LayoutMode } from './types'
+
+function createItem(id: string, name: string): FormDropdownItem {
+  return {
+    id,
+    preview_url: '',
+    name,
+    label: name
+  }
+}
+
+describe('FormDropdownMenu', () => {
+  const defaultProps = {
+    items: [createItem('1', 'Item 1'), createItem('2', 'Item 2')],
+    isSelected: () => false,
+    filterOptions: [],
+    sortOptions: []
+  }
+
+  it('renders empty state when no items', async () => {
+    const wrapper = mount(FormDropdownMenu, {
+      props: {
+        ...defaultProps,
+        items: []
+      },
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        },
+        mocks: {
+          $t: (key: string) => key
+        }
+      }
+    })
+
+    await nextTick()
+
+    const emptyIcon = wrapper.find('.icon-\\[lucide--circle-off\\]')
+    expect(emptyIcon.exists()).toBe(true)
+  })
+
+  it('renders VirtualGrid when items exist', async () => {
+    const wrapper = mount(FormDropdownMenu, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        }
+      }
+    })
+
+    await nextTick()
+
+    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
+    expect(virtualGrid.exists()).toBe(true)
+  })
+
+  it('transforms items to include key property for VirtualGrid', async () => {
+    const items = [createItem('1', 'Item 1'), createItem('2', 'Item 2')]
+    const wrapper = mount(FormDropdownMenu, {
+      props: {
+        ...defaultProps,
+        items
+      },
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        }
+      }
+    })
+
+    await nextTick()
+
+    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
+    const virtualItems = virtualGrid.props('items')
+
+    expect(virtualItems).toHaveLength(2)
+    expect(virtualItems[0]).toHaveProperty('key', '1')
+    expect(virtualItems[1]).toHaveProperty('key', '2')
+  })
+
+  it('uses single column layout for list modes', async () => {
+    const wrapper = mount(FormDropdownMenu, {
+      props: {
+        ...defaultProps,
+        layoutMode: 'list' as LayoutMode
+      },
+      global: {
+        stubs: {
+          FormDropdownMenuFilter: true,
+          FormDropdownMenuActions: true,
+          VirtualGrid: true
+        }
+      }
+    })
+
+    await nextTick()
+
+    const virtualGrid = wrapper.findComponent({ name: 'VirtualGrid' })
+    expect(virtualGrid.props('maxColumns')).toBe(1)
+  })
+})

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { MaybeRefOrGetter } from 'vue'
+import type { CSSProperties, MaybeRefOrGetter } from 'vue'
+import { computed } from 'vue'
 
-import { cn } from '@/utils/tailwindUtil'
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
 
 import type {
   FilterOption,
@@ -30,7 +31,18 @@ interface Props {
   baseModelOptions?: FilterOption[]
 }
 
-defineProps<Props>()
+const {
+  items,
+  isSelected,
+  filterOptions,
+  sortOptions,
+  searcher,
+  updateKey,
+  showOwnershipFilter,
+  ownershipOptions,
+  showBaseModelFilter,
+  baseModelOptions
+} = defineProps<Props>()
 const emit = defineEmits<{
   (e: 'item-click', item: FormDropdownItem, index: number): void
 }>()
@@ -41,11 +53,48 @@ const sortSelected = defineModel<string>('sortSelected')
 const searchQuery = defineModel<string>('searchQuery')
 const ownershipSelected = defineModel<OwnershipOption>('ownershipSelected')
 const baseModelSelected = defineModel<Set<string>>('baseModelSelected')
+
+type LayoutConfig = {
+  maxColumns: number
+  itemHeight: number
+  itemWidth: number
+  gap: string
+}
+
+const LAYOUT_CONFIGS: Record<LayoutMode, LayoutConfig> = {
+  grid: { maxColumns: 4, itemHeight: 120, itemWidth: 89, gap: '1rem 0.5rem' },
+  list: { maxColumns: 1, itemHeight: 64, itemWidth: 380, gap: '0.5rem' },
+  'list-small': {
+    maxColumns: 1,
+    itemHeight: 40,
+    itemWidth: 380,
+    gap: '0.25rem'
+  }
+}
+
+const layoutConfig = computed<LayoutConfig>(
+  () => LAYOUT_CONFIGS[layoutMode.value ?? 'grid']
+)
+
+const gridStyle = computed<CSSProperties>(() => ({
+  display: 'grid',
+  gap: layoutConfig.value.gap,
+  padding: '1rem',
+  width: '100%'
+}))
+
+type VirtualDropdownItem = FormDropdownItem & { key: string }
+const virtualItems = computed<VirtualDropdownItem[]>(() =>
+  items.map((item) => ({
+    ...item,
+    key: String(item.id)
+  }))
+)
 </script>
 
 <template>
   <div
-    class="flex max-h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline outline-offset-[-1px] outline-node-component-border"
+    class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline outline-offset-[-1px] outline-node-component-border"
   >
     <FormDropdownMenuFilter
       v-if="filterOptions.length > 0"
@@ -66,34 +115,30 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected')
       :show-base-model-filter
       :base-model-options
     />
-    <div class="relative flex h-full mt-2 overflow-y-scroll">
-      <div
-        :class="
-          cn(
-            'h-full max-h-full grid gap-x-2 gap-y-4 overflow-y-auto px-4 pt-4 pb-4 w-full',
-            {
-              'grid-cols-4': layoutMode === 'grid',
-              'grid-cols-1 gap-y-2': layoutMode === 'list',
-              'grid-cols-1 gap-y-1': layoutMode === 'list-small'
-            }
-          )
-        "
-      >
-        <div class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5" />
-        <div
-          v-if="items.length === 0"
-          class="h-50 col-span-full flex items-center justify-center"
-        >
-          <i
-            :title="$t('g.noItems')"
-            :aria-label="$t('g.noItems')"
-            class="icon-[lucide--circle-off] size-30 text-zinc-500/20"
-          />
-        </div>
+    <div
+      v-if="items.length === 0"
+      class="flex h-50 items-center justify-center"
+    >
+      <i
+        :title="$t('g.noItems')"
+        :aria-label="$t('g.noItems')"
+        class="icon-[lucide--circle-off] size-30 text-muted-foreground/20"
+      />
+    </div>
+    <VirtualGrid
+      v-else
+      :key="layoutMode"
+      :items="virtualItems"
+      :grid-style
+      :max-columns="layoutConfig.maxColumns"
+      :default-item-height="layoutConfig.itemHeight"
+      :default-item-width="layoutConfig.itemWidth"
+      :buffer-rows="2"
+      class="mt-2 min-h-0 flex-1"
+    >
+      <template #item="{ item, index }">
         <FormDropdownMenuItem
-          v-for="(item, index) in items"
-          :key="item.id"
-          :index="index"
+          :index
           :selected="isSelected(item, index)"
           :preview-url="item.preview_url ?? ''"
           :name="item.name"
@@ -101,7 +146,7 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected')
           :layout="layoutMode"
           @click="emit('item-click', item, index)"
         />
-      </div>
-    </div>
+      </template>
+    </VirtualGrid>
   </div>
 </template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue'
 
-import LazyImage from '@/components/common/LazyImage.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { AssetKindKey } from './types'
@@ -57,7 +56,7 @@ function handleVideoLoad(event: Event) {
     :class="
       cn(
         'flex gap-1 select-none group/item cursor-pointer bg-component-node-widget-background',
-        'transition-all duration-150',
+        'transition-[transform,box-shadow,background-color] duration-150',
         {
           'flex-col text-center': layout === 'grid',
           'flex-row text-left max-h-16 rounded-lg hover:scale-102 active:scale-98':
@@ -79,7 +78,7 @@ function handleVideoLoad(event: Event) {
         cn(
           'relative',
           'w-full aspect-square overflow-hidden outline-1 outline-offset-[-1px] outline-interface-stroke',
-          'transition-all duration-150',
+          'transition-[transform,box-shadow] duration-150',
           {
             'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
             'rounded-sm group-hover/item:scale-108 group-active/item:scale-95':
@@ -108,11 +107,12 @@ function handleVideoLoad(event: Event) {
         muted
         @loadeddata="handleVideoLoad"
       />
-      <LazyImage
+      <img
         v-else-if="previewUrl"
         :src="previewUrl"
         :alt="name"
-        image-class="size-full object-cover"
+        draggable="false"
+        class="size-full object-cover"
         @load="handleImageLoad"
       />
       <div

src/services/subgraphService.ts

@@ -49,7 +49,7 @@ export const useSubgraphService = () => {
       output_tooltips: [],
       name: id,
       display_name: name,
-      description: `Subgraph node for ${name}`,
+      description: exportedSubgraph.description || `Subgraph node for ${name}`,
       category: 'subgraph',
       output_node: false,
       python_module: 'nodes'

src/stores/executionStore.ts

@@ -215,26 +215,9 @@ export const useExecutionStore = defineStore('execution', () => {
 
   function handleExecutionStart(e: CustomEvent<ExecutionStartWsMessage>) {
     executionErrorStore.clearAllErrors()
-    const jobId = e.detail.prompt_id
-    queuedJobs.value[jobId] ??= { nodes: {} }
-    clearInitializationByJobId(jobId)
-
-    // Only set activeJobId if idle or if this job's workflow matches the current canvas
-    if (!activeJobId.value) {
-      activeJobId.value = jobId
-    } else {
-      const newJobWorkflowId = jobIdToWorkflowId.value.get(jobId)
-      const currentWorkflow = workflowStore.activeWorkflow
-      if (
-        newJobWorkflowId &&
-        currentWorkflow &&
-        String(
-          currentWorkflow.activeState?.id ?? currentWorkflow.initialState?.id
-        ) === newJobWorkflowId
-      ) {
-        activeJobId.value = jobId
-      }
-    }
+    activeJobId.value = e.detail.prompt_id
+    queuedJobs.value[activeJobId.value] ??= { nodes: {} }
+    clearInitializationByJobId(activeJobId.value)
   }
 
   function handleExecutionCached(e: CustomEvent<ExecutionCachedWsMessage>) {
@@ -299,16 +282,12 @@ export const useExecutionStore = defineStore('execution', () => {
       }
     }
 
-    // Update per-job progress (always)
+    // Update the progress states for all nodes
     nodeProgressStatesByJob.value = {
       ...nodeProgressStatesByJob.value,
       [jobId]: nodes
     }
-
-    // Only update the "active" progress states if this is the active job
-    if (jobId === activeJobId.value) {
-      nodeProgressStates.value = nodes
-    }
+    nodeProgressStates.value = nodes
 
     // If we have progress for the currently executing node, update it for backwards compatibility
     if (executingNodeId.value && nodes[executingNodeId.value]) {
@@ -445,30 +424,20 @@ export const useExecutionStore = defineStore('execution', () => {
    * Reset execution-related state after a run completes or is stopped.
    */
   function resetExecutionState(jobIdParam?: string | null) {
+    nodeProgressStates.value = {}
     const jobId = jobIdParam ?? activeJobId.value ?? null
     if (jobId) {
       const map = { ...nodeProgressStatesByJob.value }
       delete map[jobId]
       nodeProgressStatesByJob.value = map
       useJobPreviewStore().clearPreview(jobId)
-      delete queuedJobs.value[jobId]
     }
-
-    // Only clear active state if this was the active job
-    if (jobId && jobId === activeJobId.value) {
-      // Promote next running job if any
-      const nextRunning = runningJobIds.value.find((id) => id !== jobId)
-      if (nextRunning) {
-        activeJobId.value = nextRunning
-        nodeProgressStates.value =
-          nodeProgressStatesByJob.value[nextRunning] ?? {}
-      } else {
-        activeJobId.value = null
-        nodeProgressStates.value = {}
-        _executingNodeProgress.value = null
-      }
-      executionErrorStore.clearPromptError()
+    if (activeJobId.value) {
+      delete queuedJobs.value[activeJobId.value]
     }
+    activeJobId.value = null
+    _executingNodeProgress.value = null
+    executionErrorStore.clearPromptError()
   }
 
   function getNodeIdIfExecuting(nodeId: string | number) {

src/stores/queueStore.ts

@@ -391,9 +391,7 @@ export class TaskItemImpl {
   }
 
   get executionTimeInSeconds() {
-    return this.executionTime !== undefined
-      ? this.executionTime / 1000
-      : undefined
+    return this.executionTime
   }
 
   /**

src/utils/queueDisplay.ts

@@ -139,7 +139,7 @@ export const buildJobDisplay = (
       iconName: iconForJobState(state),
       iconImageUrl,
       primary,
-      secondary: time !== undefined ? `${time.toFixed(2)}s` : '',
+      secondary: time !== undefined ? formatDuration(time) : '',
       showClear: false
     }
   }