[backport cloud/1.36] feat: local/legacy settings dialog fix (#8004)

Backport of #7990 to `cloud/1.36`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8004-backport-cloud-1-36-feat-local-legacy-settings-dialog-fix-2e76d73d3650814398aff135890ee1cb)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>

.github/actions/start-comfyui-server/action.yml

@@ -0,0 +1,23 @@
+name: Start ComfyUI Server
+description: 'Start ComfyUI server in a container environment (assumes ComfyUI is pre-installed)'
+
+inputs:
+  front_end_root:
+    description: 'Path to frontend dist directory'
+    required: false
+    default: '$GITHUB_WORKSPACE/dist'
+  timeout:
+    description: 'Timeout in seconds for server startup'
+    required: false
+    default: '600'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Copy devtools and start server
+      shell: bash
+      run: |
+        set -euo pipefail
+        cp -r ./tools/devtools/* /ComfyUI/custom_nodes/ComfyUI_devtools/
+        cd /ComfyUI && python3 main.py --cpu --multi-user --front-end-root "${{ inputs.front_end_root }}" &
+        wait-for-it --service 127.0.0.1:8188 -t ${{ inputs.timeout }}

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

@@ -15,66 +15,56 @@ concurrency:
 jobs:
   setup:
     runs-on: ubuntu-latest
-    outputs:
-      cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v5
-
-      # Setup Test Environment, build frontend but do not start server yet
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright  # Setup Playwright and cache browsers
 
-      # Save the entire workspace as cache for later test jobs to restore
-      - name: Generate cache key
-        id: cache-key
-        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
-      - name: Save cache
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
+      # Upload only built dist/ (containerized test jobs will pnpm install without cache)
+      - name: Upload built frontend
+        uses: actions/upload-artifact@v4
         with:
-          path: .
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+          name: frontend-dist
+          path: dist/
+          retention-days: 1
 
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
     timeout-minutes: 60
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
+      packages: read
     strategy:
       fail-fast: false
       matrix:
         shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
         shardTotal: [8]
     steps:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Checkout repository
+        uses: actions/checkout@v5
+      - name: Download built frontend
+        uses: actions/download-artifact@v4
         with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/
 
-      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+      - name: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server
 
-      # Run sharded tests and upload sharded reports
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile
+
+      # Run sharded tests (browsers pre-installed in container)
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
         run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
@@ -94,39 +84,37 @@ jobs:
     timeout-minutes: 15
     needs: setup
     runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
+      packages: read
     strategy:
       fail-fast: false
       matrix:
         browser: [chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Checkout repository
+        uses: actions/checkout@v5
+      - name: Download built frontend
+        uses: actions/download-artifact@v4
         with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/
 
-      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+      - name: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server
 
-      # Run tests and upload reports
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile
+
+      # Run tests (browsers pre-installed in container)
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: |
-          # Run tests with blob reporter first
-          pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
+        run: pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
 
@@ -147,7 +135,7 @@ jobs:
           path: ./playwright-report/
           retention-days: 30
 
-  # Merge sharded test reports
+  # Merge sharded test reports (no container needed - only runs CLI)
   merge-reports:
     needs: [playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
@@ -156,11 +144,9 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      # Setup Test Environment, we only need playwright to merge reports
+      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
 
       - name: Download blob reports
         uses: actions/download-artifact@v4

.github/workflows/pr-update-playwright-expectations.yaml

@@ -25,7 +25,6 @@ jobs:
         ) &&
         startsWith(github.event.comment.body, '/update-playwright') )
     outputs:
-      cache-key: ${{ steps.cache-key.outputs.key }}
       pr-number: ${{ steps.pr-info.outputs.pr-number }}
       branch: ${{ steps.pr-info.outputs.branch }}
       comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
@@ -64,70 +63,63 @@ jobs:
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
-      # Save expensive build artifacts (Python env, built frontend, node_modules)
-      # Source code will be checked out fresh in sharded jobs
-      - name: Generate cache key
-        id: cache-key
-        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
-      - name: Save cache
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
+
+      # Upload built dist/ (containerized test jobs will pnpm install without cache)
+      - name: Upload built frontend
+        uses: actions/upload-artifact@v4
         with:
-          path: |
-            ComfyUI
-            dist
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+          name: frontend-dist
+          path: dist/
+          retention-days: 1
 
   # Sharded snapshot updates
   update-snapshots-sharded:
     needs: setup
     runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+    permissions:
+      contents: read
+      packages: read
     strategy:
       fail-fast: false
       matrix:
         shardIndex: [1, 2, 3, 4]
         shardTotal: [4]
     steps:
-      # Checkout source code fresh (not cached)
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
           ref: ${{ needs.setup.outputs.branch }}
-
-      # Restore expensive build artifacts from setup job
-      - name: Restore cached artifacts
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Download built frontend
+        uses: actions/download-artifact@v4
         with:
-          fail-on-cache-miss: true
-          path: |
-            ComfyUI
-            dist
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/
 
-      - name: Setup ComfyUI server (from cache)
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
+      - name: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server
 
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile
 
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
-
-      # Run sharded tests with snapshot updates
+      # Run sharded tests with snapshot updates (browsers pre-installed in container)
       - name: Update snapshots (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright-tests
         run: pnpm exec playwright test --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         continue-on-error: true
 
-      # Identify and stage only changed snapshot files
       - name: Stage changed snapshot files
         id: changed-snapshots
+        shell: bash
         run: |
           set -euo pipefail
-          echo "=========================================="
-          echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
-          echo "=========================================="
+
+          # Configure git safe.directory for container environment
+          git config --global --add safe.directory "$(pwd)"
 
           # Get list of changed snapshot files (including untracked/new files)
           changed_files=$( (
@@ -136,43 +128,25 @@ jobs:
           ) | sort -u | grep -E '\-snapshots/' || true )
 
           if [ -z "$changed_files" ]; then
-            echo "No snapshot changes in this shard"
+            echo "No snapshot changes in shard ${{ matrix.shardIndex }}"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
           fi
 
-          echo "✓ Found changed files:"
-          echo "$changed_files"
           file_count=$(echo "$changed_files" | wc -l)
-          echo "Count: $file_count"
+          echo "Shard ${{ matrix.shardIndex }}: $file_count changed snapshot(s):"
+          echo "$changed_files"
           echo "has-changes=true" >> $GITHUB_OUTPUT
-          echo ""
 
-          # Create staging directory
+          # Copy changed files to staging directory
           mkdir -p /tmp/changed_snapshots_shard
-
-          # Copy only changed files, preserving directory structure
-          # Strip 'browser_tests/' prefix to avoid double nesting
-          echo "Copying changed files to staging directory..."
           while IFS= read -r file; do
-            # Skip paths that no longer exist (e.g. deletions)
-            if [ ! -f "$file" ]; then
-              echo "  → (skipped; not a file) $file"
-              continue
-            fi
-            # Remove 'browser_tests/' prefix
+            [ -f "$file" ] || continue
             file_without_prefix="${file#browser_tests/}"
-            # Create parent directories
             mkdir -p "/tmp/changed_snapshots_shard/$(dirname "$file_without_prefix")"
-            # Copy file
             cp "$file" "/tmp/changed_snapshots_shard/$file_without_prefix"
-            echo "  → $file_without_prefix"
           done <<< "$changed_files"
 
-          echo ""
-          echo "Staged files for upload:"
-          find /tmp/changed_snapshots_shard -type f
-
       # Upload ONLY the changed files from this shard
       - name: Upload changed snapshots
         uses: actions/upload-artifact@v4
@@ -213,9 +187,15 @@ jobs:
           echo "=========================================="
           echo "DOWNLOADED SNAPSHOT FILES"
           echo "=========================================="
-          find ./downloaded-snapshots -type f
-          echo ""
-          echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
+          if [ -d "./downloaded-snapshots" ]; then
+            find ./downloaded-snapshots -type f
+            echo ""
+            echo "Total files: $(find ./downloaded-snapshots -type f | wc -l)"
+          else
+            echo "No snapshot artifacts downloaded (no changes in any shard)"
+            echo ""
+            echo "Total files: 0"
+          fi
 
       # Merge only the changed files into browser_tests
       - name: Merge changed snapshots
@@ -226,6 +206,16 @@ jobs:
           echo "MERGING CHANGED SNAPSHOTS"
           echo "=========================================="
 
+          # Check if any artifacts were downloaded
+          if [ ! -d "./downloaded-snapshots" ]; then
+            echo "No snapshot artifacts to merge"
+            echo "=========================================="
+            echo "MERGE COMPLETE"
+            echo "=========================================="
+            echo "Shards merged: 0"
+            exit 0
+          fi
+
           # Verify target directory exists
           if [ ! -d "browser_tests" ]; then
             echo "::error::Target directory 'browser_tests' does not exist"

.i18nrc.cjs

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

.storybook/main.ts

@@ -7,7 +7,7 @@ import type { InlineConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-mcp'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}

AGENTS.md

@@ -63,6 +63,9 @@ The project uses **Nx** for build orchestration and task management
 - Imports:
   - sorted/grouped by plugin
   - run `pnpm format` before committing
+  - use separate `import type` statements, not inline `type` in mixed imports
+    - ✅ `import type { Foo } from './foo'` + `import { bar } from './foo'`
+    - ❌ `import { bar, type Foo } from './foo'`
 - ESLint:
   - Vue + TS rules
   - no floating promises
@@ -119,7 +122,10 @@ The project uses **Nx** for build orchestration and task management
   - Prefer reactive props destructuring to `const props = defineProps<...>`
   - Do not use `withDefaults` or runtime props declaration
   - Do not import Vue macros unnecessarily
-  - Prefer `useModel` to separately defining a prop and emit
+  - Prefer `defineModel` to separately defining a prop and emit for v-model bindings
+  - Define slots via template usage, not `defineSlots`
+  - Use same-name shorthand for slot prop bindings: `:isExpanded` instead of `:is-expanded="isExpanded"`
+  - Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
   - Be judicious with addition of new refs or other state
     - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
     - If it's possible to use the `ref` or prop directly, don't add a `computed`
@@ -137,7 +143,7 @@ The project uses **Nx** for build orchestration and task management
 8. Implement proper error handling
 9. Follow Vue 3 style guide and naming conventions
 10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. Use the plurals system in i18n instead of hardcoding pluralization in templates.
 12. Avoid new usage of PrimeVue components
 13. Write tests for all changes, especially bug fixes to catch future regressions
 14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
@@ -155,6 +161,8 @@ The project uses **Nx** for build orchestration and task management
 
 ## Testing Guidelines
 
+See @docs/testing/*.md for detailed patterns.
+
 - Frameworks:
   - Vitest (unit/component, happy-dom)
   - Playwright (E2E)
@@ -268,6 +276,8 @@ When referencing Comfy-Org repos:
   - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
 - NEVER use `!important` or the `!` important prefix for tailwind classes
   - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
+- NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
+  - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
 
 ## Agent-only rules
 

package.json

@@ -65,6 +65,7 @@
     "@prettier/plugin-oxc": "catalog:",
     "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
+    "@storybook/addon-mcp": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",

pnpm-workspace.yaml

@@ -29,6 +29,7 @@ catalog:
   '@sentry/vue': ^8.48.0
   '@sparkjsdev/spark': ^0.1.10
   '@storybook/addon-docs': ^10.1.9
+  '@storybook/addon-mcp': 0.1.6
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
   '@tailwindcss/vite': ^4.1.12

src/components/common/StatusBadge.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
+
+const { label, severity = 'default' } = defineProps<{
+  label: string
+  severity?: Severity
+}>()
+
+function badgeClasses(sev: Severity): string {
+  const baseClasses =
+    'inline-flex h-3.5 items-center justify-center rounded-full px-1 text-xxxs font-semibold uppercase'
+
+  switch (sev) {
+    case 'danger':
+      return `${baseClasses} bg-destructive-background text-white`
+    case 'contrast':
+      return `${baseClasses} bg-base-foreground text-base-background`
+    case 'warn':
+      return `${baseClasses} bg-warning-background text-base-background`
+    case 'secondary':
+      return `${baseClasses} bg-secondary-background text-base-foreground`
+    default:
+      return `${baseClasses} bg-primary-background text-base-foreground`
+  }
+}
+</script>
+
+<template>
+  <span :class="badgeClasses(severity)">{{ label }}</span>
+</template>

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,133 +1,264 @@
 <template>
-  <div class="flex w-112 flex-col gap-8 p-8">
+  <div
+    class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
     <!-- Header -->
-    <div class="flex flex-col gap-4">
-      <h1 class="text-2xl font-semibold text-base-foreground m-0">
+    <div class="flex py-8 items-center justify-between px-8">
+      <h2 class="text-lg font-bold text-base-foreground m-0">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
             : $t('credits.topUp.addMoreCredits')
         }}
-      </h1>
-      <div v-if="isInsufficientCredits" class="flex flex-col gap-2">
-        <p class="text-sm text-muted-foreground m-0 w-96">
-          {{ $t('credits.topUp.insufficientWorkflowMessage') }}
-        </p>
-      </div>
-      <div v-else class="flex flex-col gap-2">
-        <p class="text-sm text-muted-foreground m-0">
-          {{ $t('credits.topUp.creditsDescription') }}
-        </p>
-      </div>
+      </h2>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        @click="() => handleClose()"
+      >
+        <i class="icon-[lucide--x] size-6" />
+      </button>
     </div>
-
-    <!-- Current Balance Section -->
-    <div class="flex flex-col gap-4">
-      <div class="flex items-baseline gap-2">
-        <UserCredit text-class="text-3xl font-bold" show-credits-only />
-        <span class="text-sm text-muted-foreground">{{
-          $t('credits.creditsAvailable')
-        }}</span>
-      </div>
-      <div v-if="formattedRenewalDate" class="text-sm text-muted-foreground">
-        {{ $t('credits.refreshes', { date: formattedRenewalDate }) }}
-      </div>
-    </div>
-
-    <!-- Credit Options Section -->
-    <div class="flex flex-col gap-4">
-      <span class="text-sm text-muted-foreground">
-        {{ $t('credits.topUp.howManyCredits') }}
-      </span>
-      <div class="flex flex-col gap-2">
-        <CreditTopUpOption
-          v-for="option in creditOptions"
-          :key="option.credits"
-          :credits="option.credits"
-          :description="option.description"
-          :selected="selectedCredits === option.credits"
-          @select="selectedCredits = option.credits"
-        />
-      </div>
-      <div class="text-xs text-muted-foreground w-96">
-        {{ $t('credits.topUp.templateNote') }}
-      </div>
-    </div>
-
-    <!-- Buy Button -->
-    <Button
-      :disabled="!selectedCredits || loading"
-      :loading="loading"
-      variant="primary"
-      :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
-      @click="handleBuy"
+    <p
+      v-if="isInsufficientCredits"
+      class="text-sm text-muted-foreground m-0 px-8"
     >
-      {{ $t('credits.topUp.buy') }}
-    </Button>
+      {{ $t('credits.topUp.insufficientWorkflowMessage') }}
+    </p>
+
+    <!-- Preset amount buttons -->
+    <div class="px-8">
+      <h3 class="m-0 text-sm font-normal text-muted-foreground">
+        {{ $t('credits.topUp.selectAmount') }}
+      </h3>
+      <div class="flex gap-2 pt-3">
+        <Button
+          v-for="amount in PRESET_AMOUNTS"
+          :key="amount"
+          :autofocus="amount === 50"
+          variant="secondary"
+          size="lg"
+          :class="
+            cn(
+              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
+              selectedPreset === amount && 'bg-secondary-background-selected'
+            )
+          "
+          @click="handlePresetClick(amount)"
+        >
+          ${{ amount }}
+        </Button>
+      </div>
+    </div>
+    <!-- Amount (USD) / Credits -->
+    <div class="flex gap-2 px-8 pt-8">
+      <!-- You Pay -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youPay') }}
+        </div>
+        <FormattedNumberStepper
+          :model-value="payAmount"
+          :min="0"
+          :max="MAX_AMOUNT"
+          :step="getStepAmount"
+          @update:model-value="handlePayAmountChange"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <span class="shrink-0 text-base font-semibold text-base-foreground"
+              >$</span
+            >
+          </template>
+        </FormattedNumberStepper>
+      </div>
+
+      <!-- You Get -->
+      <div class="flex flex-1 flex-col gap-3">
+        <div class="text-sm text-muted-foreground">
+          {{ $t('credits.topUp.youGet') }}
+        </div>
+        <FormattedNumberStepper
+          v-model="creditsModel"
+          :min="0"
+          :max="usdToCredits(MAX_AMOUNT)"
+          :step="getCreditsStepAmount"
+          @max-reached="showCeilingWarning = true"
+        >
+          <template #prefix>
+            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
+          </template>
+        </FormattedNumberStepper>
+      </div>
+    </div>
+
+    <!-- Warnings -->
+
+    <p
+      v-if="isBelowMin"
+      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.minRequired', {
+          credits: formatNumber(usdToCredits(MIN_AMOUNT))
+        })
+      }}
+    </p>
+    <p
+      v-if="showCeilingWarning"
+      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+    >
+      <i class="icon-[lucide--component] size-4" />
+      {{
+        $t('credits.topUp.maxAllowed', {
+          credits: formatNumber(usdToCredits(MAX_AMOUNT))
+        })
+      }}
+      <span>{{ $t('credits.topUp.needMore') }}</span>
+      <a
+        href="https://www.comfy.org/cloud/enterprise"
+        target="_blank"
+        class="ml-1 text-inherit"
+        >{{ $t('credits.topUp.contactUs') }}</a
+      >
+    </p>
+
+    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+      <Button
+        :disabled="!isValidAmount || loading"
+        :loading="loading"
+        variant="primary"
+        size="lg"
+        class="h-10 justify-center"
+        @click="handleBuy"
+      >
+        {{ $t('credits.topUp.buyCredits') }}
+      </Button>
+      <div class="flex items-center justify-center gap-1">
+        <a
+          :href="pricingUrl"
+          target="_blank"
+          class="flex items-center gap-1 text-sm text-muted-foreground no-underline transition-colors hover:text-base-foreground"
+        >
+          {{ $t('credits.topUp.viewPricing') }}
+          <i class="icon-[lucide--external-link] size-4" />
+        </a>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { creditsToUsd } from '@/base/credits/comfyCredits'
-import UserCredit from '@/components/common/UserCredit.vue'
+import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
 import Button from '@/components/ui/button/Button.vue'
+import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
+import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import CreditTopUpOption from './credit/CreditTopUpOption.vue'
-
-interface CreditOption {
-  credits: number
-  description: string
-}
-
 const { isInsufficientCredits = false } = defineProps<{
   isInsufficientCredits?: boolean
 }>()
 
-const { formattedRenewalDate } = useSubscription()
-
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
+const dialogStore = useDialogStore()
+const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
+const { buildDocsUrl, docsPaths } = useExternalLink()
+const { isSubscriptionEnabled } = useSubscription()
 
-const selectedCredits = ref<number | null>(null)
+// Constants
+const PRESET_AMOUNTS = [10, 25, 50, 100]
+const MIN_AMOUNT = 5
+const MAX_AMOUNT = 10000
+
+// State
+const selectedPreset = ref<number | null>(50)
+const payAmount = ref(50)
+const showCeilingWarning = ref(false)
 const loading = ref(false)
 
-const creditOptions: CreditOption[] = [
-  {
-    credits: 1055, // $5.00
-    description: t('credits.topUp.videosEstimate', { count: 41 })
-  },
-  {
-    credits: 2110, // $10.00
-    description: t('credits.topUp.videosEstimate', { count: 82 })
-  },
-  {
-    credits: 4220, // $20.00
-    description: t('credits.topUp.videosEstimate', { count: 184 })
-  },
-  {
-    credits: 10550, // $50.00
-    description: t('credits.topUp.videosEstimate', { count: 412 })
-  }
-]
+// Computed
+const pricingUrl = computed(() =>
+  buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true })
+)
 
-const handleBuy = async () => {
-  if (!selectedCredits.value) return
+const creditsModel = computed({
+  get: () => usdToCredits(payAmount.value),
+  set: (newCredits: number) => {
+    payAmount.value = Math.round(creditsToUsd(newCredits))
+    selectedPreset.value = null
+  }
+})
+
+const isValidAmount = computed(
+  () => payAmount.value >= MIN_AMOUNT && payAmount.value <= MAX_AMOUNT
+)
+
+const isBelowMin = computed(() => payAmount.value < MIN_AMOUNT)
+
+// Utility functions
+function formatNumber(num: number): string {
+  return num.toLocaleString('en-US')
+}
+
+// Step amount functions
+function getStepAmount(currentAmount: number): number {
+  if (currentAmount < 100) return 5
+  if (currentAmount < 1000) return 50
+  return 100
+}
+
+function getCreditsStepAmount(currentCredits: number): number {
+  const usdAmount = creditsToUsd(currentCredits)
+  return usdToCredits(getStepAmount(usdAmount))
+}
+
+// Event handlers
+function handlePayAmountChange(value: number) {
+  payAmount.value = value
+  selectedPreset.value = null
+  showCeilingWarning.value = false
+}
+
+function handlePresetClick(amount: number) {
+  showCeilingWarning.value = false
+  payAmount.value = amount
+  selectedPreset.value = amount
+}
+
+function handleClose(clearTracking = true) {
+  if (clearTracking) {
+    clearTopupTracking()
+  }
+  dialogStore.closeDialog({ key: 'top-up-credits' })
+}
+
+async function handleBuy() {
+  // Prevent double-clicks
+  if (loading.value || !isValidAmount.value) return
 
   loading.value = true
   try {
-    const usdAmount = creditsToUsd(selectedCredits.value)
-    telemetry?.trackApiCreditTopupButtonPurchaseClicked(usdAmount)
-    await authActions.purchaseCredits(usdAmount)
+    telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
+    await authActions.purchaseCredits(payAmount.value)
+
+    // Close top-up dialog (keep tracking) and open credits panel to show updated balance
+    handleClose(false)
+    dialogService.showSettingsDialog(
+      isSubscriptionEnabled() ? 'subscription' : 'credits'
+    )
   } catch (error) {
     console.error('Purchase failed:', error)
 

src/components/honeyToast/HoneyToast.stories.ts

@@ -0,0 +1,293 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ProgressToastItem from '@/components/toast/ProgressToastItem.vue'
+import Button from '@/components/ui/button/Button.vue'
+import type { AssetDownload } from '@/stores/assetDownloadStore'
+import { cn } from '@/utils/tailwindUtil'
+
+import HoneyToast from './HoneyToast.vue'
+
+function createMockJob(overrides: Partial<AssetDownload> = {}): AssetDownload {
+  return {
+    taskId: 'task-1',
+    assetId: 'asset-1',
+    assetName: 'model-v1.safetensors',
+    bytesTotal: 1000000,
+    bytesDownloaded: 0,
+    progress: 0,
+    status: 'created',
+    lastUpdate: Date.now(),
+    ...overrides
+  }
+}
+
+const meta: Meta<typeof HoneyToast> = {
+  title: 'Toast/HoneyToast',
+  component: HoneyToast,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  decorators: [
+    () => ({
+      template: '<div class="h-screen bg-base-background p-8"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(false)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          status: 'completed',
+          progress: 1
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetName: 'lora-style.safetensors',
+          status: 'running',
+          progress: 0.45
+        }),
+        createMockJob({
+          taskId: 'task-3',
+          assetName: 'vae-decoder.safetensors',
+          status: 'created'
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
+              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-muted-foreground">1 of 3</span>
+              <div class="flex items-center">
+                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const Expanded: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(true)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          status: 'completed',
+          progress: 1
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetName: 'lora-style.safetensors',
+          status: 'running',
+          progress: 0.45
+        }),
+        createMockJob({
+          taskId: 'task-3',
+          assetName: 'vae-decoder.safetensors',
+          status: 'created'
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
+              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-muted-foreground">1 of 3</span>
+              <div class="flex items-center">
+                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const Completed: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(false)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          bytesDownloaded: 1000000,
+          progress: 1,
+          status: 'completed'
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetId: 'asset-2',
+          assetName: 'lora-style.safetensors',
+          bytesTotal: 500000,
+          bytesDownloaded: 500000,
+          progress: 1,
+          status: 'completed'
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--check-circle] size-4 text-jade-600" />
+              <span class="font-bold text-base-foreground">All downloads completed</span>
+            </div>
+            <div class="flex items-center">
+              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+              </Button>
+              <Button variant="muted-textonly" size="icon">
+                <i class="icon-[lucide--x] size-4" />
+              </Button>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const WithError: Story = {
+  render: () => ({
+    components: { HoneyToast, Button, ProgressToastItem },
+    setup() {
+      const isExpanded = ref(true)
+      const jobs = [
+        createMockJob({
+          taskId: 'task-1',
+          assetName: 'model-v1.safetensors',
+          status: 'failed',
+          progress: 0.23
+        }),
+        createMockJob({
+          taskId: 'task-2',
+          assetName: 'lora-style.safetensors',
+          status: 'completed',
+          progress: 1
+        })
+      ]
+      return { isExpanded, cn, jobs }
+    },
+    template: `
+      <HoneyToast v-model:expanded="isExpanded" :visible="true">
+        <template #default>
+          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
+            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
+          </div>
+          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
+            <div class="flex flex-col gap-2">
+              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
+            </div>
+          </div>
+        </template>
+        
+        <template #footer="{ toggle }">
+          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
+            <div class="flex items-center gap-2 text-sm">
+              <i class="icon-[lucide--circle-alert] size-4 text-destructive-background" />
+              <span class="font-bold text-base-foreground">1 download failed</span>
+            </div>
+            <div class="flex items-center">
+              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
+                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
+              </Button>
+              <Button variant="muted-textonly" size="icon">
+                <i class="icon-[lucide--x] size-4" />
+              </Button>
+            </div>
+          </div>
+        </template>
+      </HoneyToast>
+    `
+  })
+}
+
+export const Hidden: Story = {
+  render: () => ({
+    components: { HoneyToast },
+    template: `
+      <div>
+        <p class="text-base-foreground">HoneyToast is hidden when visible=false. Nothing appears at the bottom.</p>
+        
+        <HoneyToast :visible="false">
+          <template #default>
+            <div class="px-4 py-4">Content</div>
+          </template>
+          <template #footer>
+            <div class="h-12 px-4">Footer</div>
+          </template>
+        </HoneyToast>
+      </div>
+    `
+  })
+}

src/components/honeyToast/HoneyToast.test.ts

@@ -0,0 +1,137 @@
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick, ref } from 'vue'
+
+import HoneyToast from './HoneyToast.vue'
+
+describe('HoneyToast', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.body.innerHTML = ''
+  })
+
+  function mountComponent(
+    props: { visible: boolean; expanded?: boolean } = { visible: true }
+  ): VueWrapper {
+    return mount(HoneyToast, {
+      props,
+      slots: {
+        default: (slotProps: { isExpanded: boolean }) =>
+          h(
+            'div',
+            { 'data-testid': 'content' },
+            slotProps.isExpanded ? 'expanded' : 'collapsed'
+          ),
+        footer: (slotProps: { isExpanded: boolean; toggle: () => void }) =>
+          h(
+            'button',
+            {
+              'data-testid': 'toggle-btn',
+              onClick: slotProps.toggle
+            },
+            slotProps.isExpanded ? 'Collapse' : 'Expand'
+          )
+      },
+      attachTo: document.body
+    })
+  }
+
+  it('renders when visible is true', async () => {
+    const wrapper = mountComponent({ visible: true })
+    await nextTick()
+
+    const toast = document.body.querySelector('[role="status"]')
+    expect(toast).toBeTruthy()
+
+    wrapper.unmount()
+  })
+
+  it('does not render when visible is false', async () => {
+    const wrapper = mountComponent({ visible: false })
+    await nextTick()
+
+    const toast = document.body.querySelector('[role="status"]')
+    expect(toast).toBeFalsy()
+
+    wrapper.unmount()
+  })
+
+  it('passes is-expanded=false to slots by default', async () => {
+    const wrapper = mountComponent({ visible: true })
+    await nextTick()
+
+    const content = document.body.querySelector('[data-testid="content"]')
+    expect(content?.textContent).toBe('collapsed')
+
+    wrapper.unmount()
+  })
+
+  it('applies collapsed max-height class when collapsed', async () => {
+    const wrapper = mountComponent({ visible: true, expanded: false })
+    await nextTick()
+
+    const expandableArea = document.body.querySelector(
+      '[role="status"] > div:first-child'
+    )
+    expect(expandableArea?.classList.contains('max-h-0')).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('has aria-live="polite" for accessibility', async () => {
+    const wrapper = mountComponent({ visible: true })
+    await nextTick()
+
+    const toast = document.body.querySelector('[role="status"]')
+    expect(toast?.getAttribute('aria-live')).toBe('polite')
+
+    wrapper.unmount()
+  })
+
+  it('supports v-model:expanded with reactive parent state', async () => {
+    const TestWrapper = defineComponent({
+      components: { HoneyToast },
+      setup() {
+        const expanded = ref(false)
+        return { expanded }
+      },
+      template: `
+        <HoneyToast :visible="true" v-model:expanded="expanded">
+          <template #default="slotProps">
+            <div data-testid="content">{{ slotProps.isExpanded ? 'expanded' : 'collapsed' }}</div>
+          </template>
+          <template #footer="slotProps">
+            <button data-testid="toggle-btn" @click="slotProps.toggle">
+              {{ slotProps.isExpanded ? 'Collapse' : 'Expand' }}
+            </button>
+          </template>
+        </HoneyToast>
+      `
+    })
+
+    const wrapper = mount(TestWrapper, { attachTo: document.body })
+    await nextTick()
+
+    const content = document.body.querySelector('[data-testid="content"]')
+    expect(content?.textContent).toBe('collapsed')
+
+    const toggleBtn = document.body.querySelector(
+      '[data-testid="toggle-btn"]'
+    ) as HTMLButtonElement
+    expect(toggleBtn?.textContent?.trim()).toBe('Expand')
+
+    toggleBtn?.click()
+    await nextTick()
+
+    expect(content?.textContent).toBe('expanded')
+    expect(toggleBtn?.textContent?.trim()).toBe('Collapse')
+
+    const expandableArea = document.body.querySelector(
+      '[role="status"] > div:first-child'
+    )
+    expect(expandableArea?.classList.contains('max-h-[400px]')).toBe(true)
+
+    wrapper.unmount()
+  })
+})

src/components/honeyToast/HoneyToast.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+const { visible } = defineProps<{
+  visible: boolean
+}>()
+
+const isExpanded = defineModel<boolean>('expanded', { default: false })
+
+function toggle() {
+  isExpanded.value = !isExpanded.value
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="translate-y-full opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-full opacity-0"
+    >
+      <div
+        v-if="visible"
+        role="status"
+        aria-live="polite"
+        class="fixed inset-x-0 bottom-6 z-9999 mx-auto w-4/5 max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg"
+      >
+        <div
+          :class="
+            cn(
+              'overflow-hidden transition-all duration-300',
+              isExpanded ? 'max-h-[400px]' : 'max-h-0'
+            )
+          "
+        >
+          <slot :is-expanded />
+        </div>
+
+        <slot name="footer" :is-expanded :toggle />
+      </div>
+    </Transition>
+  </Teleport>
+</template>

src/components/load3d/Load3DScene.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="relative h-full w-full"
+    class="relative h-full w-full min-h-[200px]"
     data-capture-wheel="true"
     @pointerdown.stop
     @pointermove.stop

src/components/toast/ProgressToastItem.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { AssetDownload } from '@/stores/assetDownloadStore'
+
+import ProgressToastItem from './ProgressToastItem.vue'
+
+const meta: Meta<typeof ProgressToastItem> = {
+  title: 'Toast/ProgressToastItem',
+  component: ProgressToastItem,
+  parameters: {
+    layout: 'padded'
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-[400px] bg-base-background p-4"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function createMockJob(overrides: Partial<AssetDownload> = {}): AssetDownload {
+  return {
+    taskId: 'task-1',
+    assetId: 'asset-1',
+    assetName: 'model-v1.safetensors',
+    bytesTotal: 1000000,
+    bytesDownloaded: 0,
+    progress: 0,
+    status: 'created',
+    lastUpdate: Date.now(),
+    ...overrides
+  }
+}
+
+export const Pending: Story = {
+  args: {
+    job: createMockJob({
+      status: 'created',
+      assetName: 'sd-xl-base-1.0.safetensors'
+    })
+  }
+}
+
+export const Running: Story = {
+  args: {
+    job: createMockJob({
+      status: 'running',
+      progress: 0.45,
+      assetName: 'lora-detail-enhancer.safetensors'
+    })
+  }
+}
+
+export const RunningAlmostComplete: Story = {
+  args: {
+    job: createMockJob({
+      status: 'running',
+      progress: 0.92,
+      assetName: 'vae-ft-mse-840000.safetensors'
+    })
+  }
+}
+
+export const Completed: Story = {
+  args: {
+    job: createMockJob({
+      status: 'completed',
+      progress: 1,
+      assetName: 'controlnet-canny.safetensors'
+    })
+  }
+}
+
+export const Failed: Story = {
+  args: {
+    job: createMockJob({
+      status: 'failed',
+      progress: 0.23,
+      assetName: 'unreachable-model.safetensors'
+    })
+  }
+}
+
+export const LongFileName: Story = {
+  args: {
+    job: createMockJob({
+      status: 'running',
+      progress: 0.67,
+      assetName:
+        'very-long-model-name-with-lots-of-descriptive-text-v2.1-final-release.safetensors'
+    })
+  }
+}

src/components/toast/ProgressToastItem.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import StatusBadge from '@/components/common/StatusBadge.vue'
+import type { AssetDownload } from '@/stores/assetDownloadStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const { job } = defineProps<{
+  job: AssetDownload
+}>()
+
+const { t } = useI18n()
+
+const progressPercent = computed(() => Math.round(job.progress * 100))
+const isCompleted = computed(() => job.status === 'completed')
+const isFailed = computed(() => job.status === 'failed')
+const isRunning = computed(() => job.status === 'running')
+const isPending = computed(() => job.status === 'created')
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex items-center justify-between rounded-lg bg-modal-card-background px-4 py-3',
+        isCompleted && 'opacity-50'
+      )
+    "
+  >
+    <div class="min-w-0 flex-1">
+      <span class="block truncate text-sm text-base-foreground">{{
+        job.assetName
+      }}</span>
+    </div>
+
+    <div class="flex flex-shrink-0 items-center gap-2">
+      <template v-if="isFailed">
+        <i
+          class="icon-[lucide--circle-alert] size-4 text-destructive-background"
+        />
+        <StatusBadge :label="t('progressToast.failed')" severity="danger" />
+      </template>
+
+      <template v-else-if="isCompleted">
+        <StatusBadge :label="t('progressToast.finished')" severity="contrast" />
+      </template>
+
+      <template v-else-if="isRunning">
+        <i
+          class="icon-[lucide--loader-circle] size-4 animate-spin text-base-foreground"
+        />
+        <span class="text-xs text-base-foreground">
+          {{ progressPercent }}%
+        </span>
+      </template>
+
+      <template v-else-if="isPending">
+        <span class="text-xs text-muted-foreground">
+          {{ t('progressToast.pending') }}
+        </span>
+      </template>
+    </div>
+  </div>
+</template>

src/components/ui/button/button.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:

src/components/ui/stepper/FormattedNumberStepper.vue

@@ -0,0 +1,181 @@
+<template>
+  <label
+    :for="inputId"
+    :class="
+      cn(
+        'flex h-10 cursor-text items-center rounded-lg bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover focus-within:ring-1 focus-within:ring-secondary-foreground',
+        disabled && 'opacity-50 pointer-events-none'
+      )
+    "
+  >
+    <button
+      type="button"
+      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
+      :disabled="disabled || modelValue <= min"
+      :aria-label="$t('g.decrement')"
+      @click="handleStep(-1)"
+    >
+      <i class="icon-[lucide--minus] size-4" />
+    </button>
+    <div
+      class="flex flex-1 items-center justify-center gap-0.5 overflow-hidden"
+    >
+      <slot name="prefix" />
+      <input
+        :id="inputId"
+        ref="inputRef"
+        v-model="inputValue"
+        type="text"
+        inputmode="numeric"
+        :style="{ width: `${inputWidth}ch` }"
+        class="min-w-0 rounded border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
+        :disabled="disabled"
+        @input="handleInputChange"
+        @blur="handleInputBlur"
+        @focus="handleInputFocus"
+      />
+      <slot name="suffix" />
+    </div>
+    <button
+      type="button"
+      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
+      :disabled="disabled || modelValue >= max"
+      :aria-label="$t('g.increment')"
+      @click="handleStep(1)"
+    >
+      <i class="icon-[lucide--plus] size-4" />
+    </button>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId, watch } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  min = 0,
+  max = Infinity,
+  step = 1,
+  formatOptions = { useGrouping: true },
+  disabled = false
+} = defineProps<{
+  min?: number
+  max?: number
+  step?: number | ((value: number) => number)
+  formatOptions?: Intl.NumberFormatOptions
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'max-reached': []
+}>()
+
+const modelValue = defineModel<number>({ required: true })
+
+const inputId = useId()
+const inputRef = ref<HTMLInputElement | null>(null)
+const inputValue = ref(formatNumber(modelValue.value))
+
+const inputWidth = computed(() =>
+  Math.min(Math.max(inputValue.value.length, 1) + 0.5, 9)
+)
+
+watch(modelValue, (newValue) => {
+  if (document.activeElement !== inputRef.value) {
+    inputValue.value = formatNumber(newValue)
+  }
+})
+
+function formatNumber(num: number): string {
+  return num.toLocaleString('en-US', formatOptions)
+}
+
+function parseFormattedNumber(str: string): number {
+  const cleaned = str.replace(/[^0-9]/g, '')
+  return cleaned === '' ? 0 : parseInt(cleaned, 10)
+}
+
+function clamp(value: number, minVal: number, maxVal: number): number {
+  return Math.min(Math.max(value, minVal), maxVal)
+}
+
+function formatWithCursor(
+  value: string,
+  cursorPos: number
+): { formatted: string; newCursor: number } {
+  const num = parseFormattedNumber(value)
+  const formatted = formatNumber(num)
+
+  const digitsBeforeCursor = value
+    .slice(0, cursorPos)
+    .replace(/[^0-9]/g, '').length
+
+  let digitCount = 0
+  let newCursor = 0
+  for (let i = 0; i < formatted.length; i++) {
+    if (/[0-9]/.test(formatted[i])) {
+      digitCount++
+    }
+    if (digitCount >= digitsBeforeCursor) {
+      newCursor = i + 1
+      break
+    }
+  }
+
+  if (digitCount < digitsBeforeCursor) {
+    newCursor = formatted.length
+  }
+
+  return { formatted, newCursor }
+}
+
+function getStepAmount(): number {
+  return typeof step === 'function' ? step(modelValue.value) : step
+}
+
+function handleInputChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const raw = input.value
+  const cursorPos = input.selectionStart ?? raw.length
+  const num = parseFormattedNumber(raw)
+
+  const clamped = Math.min(num, max)
+  const wasClamped = num > max
+
+  if (wasClamped) {
+    emit('max-reached')
+  }
+
+  modelValue.value = clamped
+
+  const { formatted, newCursor } = formatWithCursor(
+    wasClamped ? formatNumber(clamped) : raw,
+    wasClamped ? formatNumber(clamped).length : cursorPos
+  )
+  inputValue.value = formatted
+
+  requestAnimationFrame(() => {
+    inputRef.value?.setSelectionRange(newCursor, newCursor)
+  })
+}
+
+function handleInputBlur() {
+  const clamped = clamp(modelValue.value, min, max)
+  modelValue.value = clamped
+  inputValue.value = formatNumber(clamped)
+}
+
+function handleInputFocus(e: FocusEvent) {
+  const input = e.target as HTMLInputElement
+  const len = input.value.length
+  input.setSelectionRange(len, len)
+}
+
+function handleStep(direction: 1 | -1) {
+  const stepAmount = getStepAmount()
+  const newValue = clamp(modelValue.value + stepAmount * direction, min, max)
+  modelValue.value = newValue
+  inputValue.value = formatNumber(newValue)
+}
+</script>

src/components/widget/layout/BaseModalLayout.vue

@@ -13,10 +13,11 @@
       <i class="icon-[lucide--panel-right] text-sm" />
     </Button>
     <Button
-      class="absolute top-4 right-6 z-10 transition-opacity duration-200"
+      size="lg"
+      class="absolute top-4 right-6 z-10 transition-opacity duration-200 w-10"
       @click="closeDialog"
     >
-      <i class="pi pi-times text-sm"></i>
+      <i class="pi pi-times" />
     </Button>
     <div class="flex h-full w-full">
       <Transition name="slide-panel">
@@ -80,7 +81,9 @@
             >
               {{ contentTitle }}
             </h2>
-            <div class="min-h-0 px-6 pt-0 pb-10 overflow-y-auto">
+            <div
+              class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
+            >
               <slot name="content"></slot>
             </div>
           </main>

src/components/widget/nav/NavIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i :class="icon" class="text-neutral text-sm" />
+  <i :class="icon" class="text-neutral text-sm shrink-0" />
 </template>
 
 <script setup lang="ts">

src/components/widget/nav/NavItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
@@ -9,9 +9,11 @@
     role="button"
     @click="onClick"
   >
-    <NavIcon v-if="icon" :icon="icon" />
-    <i v-else class="text-neutral icon-[lucide--folder] text-xs" />
-    <span class="flex items-center">
+    <div v-if="icon" class="pt-0.5">
+      <NavIcon :icon="icon" />
+    </div>
+    <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
+    <span class="flex items-center break-all">
       <slot></slot>
     </span>
   </div>

src/composables/graph/useGraphNodeManager.ts

@@ -34,6 +34,7 @@ import type {
 } from '@/lib/litegraph/src/litegraph'
 import type { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
 import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
+import { app } from '@/scripts/app'
 
 export interface WidgetSlotMetadata {
   index: number
@@ -47,6 +48,7 @@ export interface SafeWidgetData {
   borderStyle?: string
   callback?: ((value: unknown) => void) | undefined
   controlWidget?: SafeControlWidget
+  hasLayoutSize?: boolean
   isDOMWidget?: boolean
   label?: string
   nodeType?: string
@@ -73,6 +75,7 @@ export interface VueNodeData {
   hasErrors?: boolean
   inputs?: INodeInputSlot[]
   outputs?: INodeOutputSlot[]
+  resizable?: boolean
   shape?: number
   subgraphId?: string | null
   titleMode?: TitleMode
@@ -171,7 +174,12 @@ export function safeWidgetMapper(
       const callback = (v: unknown) => {
         const value = normalizeWidgetValue(v)
         widget.value = value ?? undefined
-        widget.callback?.(value)
+        // Match litegraph callback signature: (value, canvas, node, pos, event)
+        // Some extensions (e.g., Impact Pack) expect node as the 3rd parameter
+        widget.callback?.(value, app.canvas, node)
+        // Trigger redraw for all legacy widgets on this node (e.g., mask preview)
+        // This ensures widgets that depend on other widget values get updated
+        node.widgets?.forEach((w) => w.triggerDraw?.())
       }
 
       return {
@@ -181,6 +189,7 @@ export function safeWidgetMapper(
         borderStyle,
         callback,
         controlWidget: getControlWidget(widget),
+        hasLayoutSize: typeof widget.computeLayoutSize === 'function',
         isDOMWidget: isDOMWidget(widget),
         label: widget.label,
         nodeType: getNodeType(node, widget),
@@ -236,17 +245,10 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     })
 
     // Update only widgets with new slot metadata, keeping other widget data intact
-    const updatedWidgets = currentData.widgets?.map((widget) => {
+    for (const widget of currentData.widgets ?? []) {
       const slotInfo = slotMetadata.get(widget.name)
-      return slotInfo ? { ...widget, slotMetadata: slotInfo } : widget
-    })
-
-    vueNodeData.set(nodeId, {
-      ...currentData,
-      widgets: updatedWidgets,
-      inputs: nodeRef.inputs ? [...nodeRef.inputs] : undefined,
-      outputs: nodeRef.outputs ? [...nodeRef.outputs] : undefined
-    })
+      if (slotInfo) widget.slotMetadata = slotInfo
+    }
   }
 
   // Extract safe data from LiteGraph node for Vue consumption
@@ -317,6 +319,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       flags: node.flags ? { ...node.flags } : undefined,
       color: node.color || undefined,
       bgcolor: node.bgcolor || undefined,
+      resizable: node.resizable,
       shape: node.shape
     }
   }

src/composables/maskeditor/useMaskEditorLoader.ts

@@ -104,7 +104,8 @@ export function useMaskEditorLoader() {
       // If we have a widget filename, we should prioritize it over the node image
       // because the node image might be stale (e.g. from a previous save)
       // while the widget value reflects the current selection.
-      if (widgetFilename) {
+      // Skip internal reference formats (e.g. "$35-0" used by some plugins like Impact-Pack)
+      if (widgetFilename && !widgetFilename.startsWith('$')) {
         try {
           // Parse the widget value which might be in format "subfolder/filename [type]" or just "filename"
           let filename = widgetFilename

src/composables/node/useNodePricing.ts

@@ -1823,28 +1823,35 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
 
         const model = String(modelWidget.value)
 
-        // Google Veo video generation
-        if (model.includes('veo-2.0')) {
-          return formatCreditsLabel(0.5, { suffix: '/second' })
-        } else if (model.includes('gemini-2.5-flash-preview-04-17')) {
+        if (model.includes('gemini-2.5-flash-preview-04-17')) {
           return formatCreditsListLabel([0.0003, 0.0025], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gemini-2.5-flash')) {
           return formatCreditsListLabel([0.0003, 0.0025], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gemini-2.5-pro-preview-05-06')) {
           return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gemini-2.5-pro')) {
           return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gemini-3-pro-preview')) {
           return formatCreditsListLabel([0.002, 0.012], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         }
         // For other Gemini models, show token-based pricing info
@@ -1899,51 +1906,75 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         // Specific pricing for exposed models based on official pricing data (converted to per 1K tokens)
         if (model.includes('o4-mini')) {
           return formatCreditsListLabel([0.0011, 0.0044], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('o1-pro')) {
           return formatCreditsListLabel([0.15, 0.6], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('o1')) {
           return formatCreditsListLabel([0.015, 0.06], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('o3-mini')) {
           return formatCreditsListLabel([0.0011, 0.0044], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('o3')) {
           return formatCreditsListLabel([0.01, 0.04], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gpt-4o')) {
           return formatCreditsListLabel([0.0025, 0.01], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gpt-4.1-nano')) {
           return formatCreditsListLabel([0.0001, 0.0004], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gpt-4.1-mini')) {
           return formatCreditsListLabel([0.0004, 0.0016], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gpt-4.1')) {
           return formatCreditsListLabel([0.002, 0.008], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gpt-5-nano')) {
           return formatCreditsListLabel([0.00005, 0.0004], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gpt-5-mini')) {
           return formatCreditsListLabel([0.00025, 0.002], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         } else if (model.includes('gpt-5')) {
           return formatCreditsListLabel([0.00125, 0.01], {
-            suffix: ' per 1K tokens'
+            suffix: ' per 1K tokens',
+            approximate: true,
+            separator: '-'
           })
         }
         return 'Token-based'
@@ -2101,6 +2132,267 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     },
     LtxvApiImageToVideo: {
       displayPrice: ltxvPricingCalculator
+    },
+    WanReferenceVideoApi: {
+      displayPrice: (node: LGraphNode): string => {
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const sizeWidget = node.widgets?.find(
+          (w) => w.name === 'size'
+        ) as IComboWidget
+
+        if (!durationWidget || !sizeWidget) {
+          return formatCreditsRangeLabel(0.7, 1.5, {
+            note: '(varies with size & duration)'
+          })
+        }
+
+        const seconds = parseFloat(String(durationWidget.value))
+        const sizeStr = String(sizeWidget.value).toLowerCase()
+
+        const rate = sizeStr.includes('1080p') ? 0.15 : 0.1
+        const inputMin = 2 * rate
+        const inputMax = 5 * rate
+        const outputPrice = seconds * rate
+
+        const minTotal = inputMin + outputPrice
+        const maxTotal = inputMax + outputPrice
+
+        return formatCreditsRangeLabel(minTotal, maxTotal)
+      }
+    },
+    Vidu2TextToVideoNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'resolution'
+        ) as IComboWidget
+
+        if (!durationWidget || !resolutionWidget) {
+          return formatCreditsRangeLabel(0.075, 0.6, {
+            note: '(varies with duration & resolution)'
+          })
+        }
+
+        const duration = parseFloat(String(durationWidget.value))
+        const resolution = String(resolutionWidget.value).toLowerCase()
+
+        // Text-to-Video uses Q2 model only
+        // 720P: Starts at $0.075, +$0.025/sec
+        // 1080P: Starts at $0.10, +$0.05/sec
+        let basePrice: number
+        let pricePerSecond: number
+
+        if (resolution.includes('1080')) {
+          basePrice = 0.1
+          pricePerSecond = 0.05
+        } else {
+          // 720P default
+          basePrice = 0.075
+          pricePerSecond = 0.025
+        }
+
+        if (!Number.isFinite(duration) || duration <= 0) {
+          return formatCreditsRangeLabel(0.075, 0.6, {
+            note: '(varies with duration & resolution)'
+          })
+        }
+
+        const cost = basePrice + pricePerSecond * (duration - 1)
+        return formatCreditsLabel(cost)
+      }
+    },
+    Vidu2ImageToVideoNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const modelWidget = node.widgets?.find(
+          (w) => w.name === 'model'
+        ) as IComboWidget
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'resolution'
+        ) as IComboWidget
+
+        if (!modelWidget || !durationWidget || !resolutionWidget) {
+          return formatCreditsRangeLabel(0.04, 1.0, {
+            note: '(varies with model, duration & resolution)'
+          })
+        }
+
+        const model = String(modelWidget.value).toLowerCase()
+        const duration = parseFloat(String(durationWidget.value))
+        const resolution = String(resolutionWidget.value).toLowerCase()
+        const is1080p = resolution.includes('1080')
+
+        let basePrice: number
+        let pricePerSecond: number
+
+        if (model.includes('q2-pro-fast')) {
+          // Q2-pro-fast: 720P $0.04+$0.01/sec, 1080P $0.08+$0.02/sec
+          basePrice = is1080p ? 0.08 : 0.04
+          pricePerSecond = is1080p ? 0.02 : 0.01
+        } else if (model.includes('q2-pro')) {
+          // Q2-pro: 720P $0.075+$0.05/sec, 1080P $0.275+$0.075/sec
+          basePrice = is1080p ? 0.275 : 0.075
+          pricePerSecond = is1080p ? 0.075 : 0.05
+        } else if (model.includes('q2-turbo')) {
+          // Q2-turbo: 720P special pricing, 1080P $0.175+$0.05/sec
+          if (is1080p) {
+            basePrice = 0.175
+            pricePerSecond = 0.05
+          } else {
+            // 720P: $0.04 at 1s, $0.05 at 2s, +$0.05/sec beyond 2s
+            if (duration <= 1) {
+              return formatCreditsLabel(0.04)
+            }
+            if (duration <= 2) {
+              return formatCreditsLabel(0.05)
+            }
+            const cost = 0.05 + 0.05 * (duration - 2)
+            return formatCreditsLabel(cost)
+          }
+        } else {
+          return formatCreditsRangeLabel(0.04, 1.0, {
+            note: '(varies with model, duration & resolution)'
+          })
+        }
+
+        if (!Number.isFinite(duration) || duration <= 0) {
+          return formatCreditsRangeLabel(0.04, 1.0, {
+            note: '(varies with model, duration & resolution)'
+          })
+        }
+
+        const cost = basePrice + pricePerSecond * (duration - 1)
+        return formatCreditsLabel(cost)
+      }
+    },
+    Vidu2ReferenceVideoNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'resolution'
+        ) as IComboWidget
+        const audioWidget = node.widgets?.find(
+          (w) => w.name === 'audio'
+        ) as IComboWidget
+
+        if (!durationWidget) {
+          return formatCreditsRangeLabel(0.125, 1.5, {
+            note: '(varies with duration, resolution & audio)'
+          })
+        }
+
+        const duration = parseFloat(String(durationWidget.value))
+        const resolution = String(resolutionWidget?.value ?? '').toLowerCase()
+        const is1080p = resolution.includes('1080')
+
+        // Check if audio is enabled (adds $0.75)
+        const audioValue = audioWidget?.value
+        const hasAudio =
+          audioValue !== undefined &&
+          audioValue !== null &&
+          String(audioValue).toLowerCase() !== 'false' &&
+          String(audioValue).toLowerCase() !== 'none' &&
+          audioValue !== ''
+
+        // Reference-to-Video uses Q2 model
+        // 720P: Starts at $0.125, +$0.025/sec
+        // 1080P: Starts at $0.375, +$0.05/sec
+        let basePrice: number
+        let pricePerSecond: number
+
+        if (is1080p) {
+          basePrice = 0.375
+          pricePerSecond = 0.05
+        } else {
+          // 720P default
+          basePrice = 0.125
+          pricePerSecond = 0.025
+        }
+
+        let cost = basePrice
+        if (Number.isFinite(duration) && duration > 0) {
+          cost = basePrice + pricePerSecond * (duration - 1)
+        }
+
+        // Audio adds $0.75 on top
+        if (hasAudio) {
+          cost += 0.075
+        }
+
+        return formatCreditsLabel(cost)
+      }
+    },
+    Vidu2StartEndToVideoNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const modelWidget = node.widgets?.find(
+          (w) => w.name === 'model'
+        ) as IComboWidget
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'resolution'
+        ) as IComboWidget
+
+        if (!modelWidget || !durationWidget || !resolutionWidget) {
+          return formatCreditsRangeLabel(0.04, 1.0, {
+            note: '(varies with model, duration & resolution)'
+          })
+        }
+
+        const model = String(modelWidget.value).toLowerCase()
+        const duration = parseFloat(String(durationWidget.value))
+        const resolution = String(resolutionWidget.value).toLowerCase()
+        const is1080p = resolution.includes('1080')
+
+        let basePrice: number
+        let pricePerSecond: number
+
+        if (model.includes('q2-pro-fast')) {
+          // Q2-pro-fast: 720P $0.04+$0.01/sec, 1080P $0.08+$0.02/sec
+          basePrice = is1080p ? 0.08 : 0.04
+          pricePerSecond = is1080p ? 0.02 : 0.01
+        } else if (model.includes('q2-pro')) {
+          // Q2-pro: 720P $0.075+$0.05/sec, 1080P $0.275+$0.075/sec
+          basePrice = is1080p ? 0.275 : 0.075
+          pricePerSecond = is1080p ? 0.075 : 0.05
+        } else if (model.includes('q2-turbo')) {
+          // Q2-turbo: 720P special pricing, 1080P $0.175+$0.05/sec
+          if (is1080p) {
+            basePrice = 0.175
+            pricePerSecond = 0.05
+          } else {
+            // 720P: $0.04 at 1s, $0.05 at 2s, +$0.05/sec beyond 2s
+            if (!Number.isFinite(duration) || duration <= 1) {
+              return formatCreditsLabel(0.04)
+            }
+            if (duration <= 2) {
+              return formatCreditsLabel(0.05)
+            }
+            const cost = 0.05 + 0.05 * (duration - 2)
+            return formatCreditsLabel(cost)
+          }
+        } else {
+          return formatCreditsRangeLabel(0.04, 1.0, {
+            note: '(varies with model, duration & resolution)'
+          })
+        }
+
+        if (!Number.isFinite(duration) || duration <= 0) {
+          return formatCreditsLabel(basePrice)
+        }
+
+        const cost = basePrice + pricePerSecond * (duration - 1)
+        return formatCreditsLabel(cost)
+      }
     }
   }
 
@@ -2254,8 +2546,13 @@ export const useNodePricing = () => {
       ByteDanceImageReferenceNode: ['model', 'duration', 'resolution'],
       WanTextToVideoApi: ['duration', 'size'],
       WanImageToVideoApi: ['duration', 'resolution'],
+      WanReferenceVideoApi: ['duration', 'size'],
       LtxvApiTextToVideo: ['model', 'duration', 'resolution'],
-      LtxvApiImageToVideo: ['model', 'duration', 'resolution']
+      LtxvApiImageToVideo: ['model', 'duration', 'resolution'],
+      Vidu2TextToVideoNode: ['model', 'duration', 'resolution'],
+      Vidu2ImageToVideoNode: ['model', 'duration', 'resolution'],
+      Vidu2ReferenceVideoNode: ['audio', 'duration', 'resolution'],
+      Vidu2StartEndToVideoNode: ['model', 'duration', 'resolution']
     }
     return widgetMap[nodeType] || []
   }

src/composables/useCoreCommands.ts

@@ -881,15 +881,6 @@ export function useCoreCommands(): ComfyCommand[] {
         })
       }
     },
-    {
-      id: 'Comfy.Manager.ToggleManagerProgressDialog',
-      icon: 'pi pi-spinner',
-      label: 'Toggle the Custom Nodes Manager Progress Bar',
-      versionAdded: '1.13.9',
-      function: () => {
-        dialogService.toggleManagerProgressDialog()
-      }
-    },
     {
       id: 'Comfy.User.OpenSignInDialog',
       icon: 'pi pi-user',

src/composables/useFeatureFlags.ts

@@ -11,10 +11,12 @@ export enum ServerFeatureFlag {
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
   MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
-  ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled',
+  ASSET_DELETION_ENABLED = 'asset_deletion_enabled',
+  ASSET_RENAME_ENABLED = 'asset_rename_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
-  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled'
+  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
+  ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled'
 }
 
 /**
@@ -41,14 +43,16 @@ export function useFeatureFlags() {
         )
       )
     },
-    get assetUpdateOptionsEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
+    get assetDeletionEnabled() {
       return (
-        remoteConfig.value.asset_update_options_enabled ??
-        api.getServerFeature(
-          ServerFeatureFlag.ASSET_UPDATE_OPTIONS_ENABLED,
-          false
-        )
+        remoteConfig.value.asset_deletion_enabled ??
+        api.getServerFeature(ServerFeatureFlag.ASSET_DELETION_ENABLED, false)
+      )
+    },
+    get assetRenameEnabled() {
+      return (
+        remoteConfig.value.asset_rename_enabled ??
+        api.getServerFeature(ServerFeatureFlag.ASSET_RENAME_ENABLED, false)
       )
     },
     get privateModelsEnabled() {
@@ -65,7 +69,6 @@ export function useFeatureFlags() {
       )
     },
     get huggingfaceModelImportEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
       return (
         remoteConfig.value.huggingface_model_import_enabled ??
         api.getServerFeature(
@@ -73,6 +76,15 @@ export function useFeatureFlags() {
           false
         )
       )
+    },
+    get asyncModelUploadEnabled() {
+      return (
+        remoteConfig.value.async_model_upload_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.ASYNC_MODEL_UPLOAD_ENABLED,
+          false
+        )
+      )
     }
   })
 

src/core/graph/widgets/dynamicWidgets.ts

@@ -94,7 +94,7 @@ function dynamicComboWidget(
     const newSpec = value ? options[value] : undefined
 
     const removedInputs = remove(node.inputs, isInGroup)
-    remove(node.widgets, isInGroup)
+    for (const widget of remove(node.widgets, isInGroup)) widget.onRemove?.()
 
     if (!newSpec) return
 
@@ -341,10 +341,16 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   //TODO: instead apply on output add?
   //ensure outputs get updated
   const index = node.inputs.length - 1
-  const input = node.inputs.at(-1)!
-  requestAnimationFrame(() =>
-    node.onConnectionsChange(LiteGraph.INPUT, index, false, undefined, input)
-  )
+  requestAnimationFrame(() => {
+    const input = node.inputs.at(index)!
+    node.onConnectionsChange?.(
+      LiteGraph.INPUT,
+      index,
+      !!input.link,
+      input.link ? node.graph?.links?.[input.link] : undefined,
+      input
+    )
+  })
 }
 
 function autogrowOrdinalToName(
@@ -482,7 +488,8 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
   for (const input of toRemove) {
     const widgetName = input?.widget?.name
     if (!widgetName) continue
-    remove(node.widgets, (w) => w.name === widgetName)
+    for (const widget of remove(node.widgets, (w) => w.name === widgetName))
+      widget.onRemove?.()
   }
   node.size[1] = node.computeSize([...node.size])[1]
 }

src/extensions/core/load3d/Load3d.ts

@@ -392,7 +392,8 @@ class Load3d {
       this.STATUS_MOUSE_ON_SCENE ||
       this.STATUS_MOUSE_ON_VIEWER ||
       this.isRecording() ||
-      !this.INITIAL_RENDER_DONE
+      !this.INITIAL_RENDER_DONE ||
+      this.animationManager.isAnimationPlaying
     )
   }
 

src/extensions/core/load3d/LoaderManager.ts

@@ -160,6 +160,10 @@ export class LoaderManager implements LoaderManagerInterface {
         fbxModel.traverse((child) => {
           if (child instanceof THREE.Mesh) {
             this.modelManager.originalMaterials.set(child, child.material)
+
+            if (child instanceof THREE.SkinnedMesh) {
+              child.frustumCulled = false
+            }
           }
         })
         break
@@ -203,6 +207,10 @@ export class LoaderManager implements LoaderManagerInterface {
           if (child instanceof THREE.Mesh) {
             child.geometry.computeVertexNormals()
             this.modelManager.originalMaterials.set(child, child.material)
+
+            if (child instanceof THREE.SkinnedMesh) {
+              child.frustumCulled = false
+            }
           }
         })
         break

src/extensions/core/maskeditor.ts

@@ -1,7 +1,7 @@
 import _ from 'es-toolkit/compat'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-import { app } from '@/scripts/app'
+import { app, ComfyApp } from '@/scripts/app'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
@@ -20,6 +20,18 @@ function openMaskEditor(node: LGraphNode): void {
   useMaskEditor().openMaskEditor(node)
 }
 
+// Open mask editor from clipspace (for plugin compatibility)
+// This is called when ComfyApp.open_maskeditor() is invoked without arguments
+function openMaskEditorFromClipspace(): void {
+  const node = ComfyApp.clipspace_return_node as LGraphNode | null
+  if (!node) {
+    console.error('[MaskEditor] No clipspace_return_node found')
+    return
+  }
+
+  openMaskEditor(node)
+}
+
 // Check if the dialog is already opened
 function isOpened(): boolean {
   return useDialogStore().isDialogOpen('global-mask-editor')
@@ -78,7 +90,16 @@ app.registerExtension({
       label: 'Decrease Brush Size in MaskEditor',
       function: () => changeBrushSize((old) => _.clamp(old - 4, 1, 100))
     }
-  ]
+  ],
+  init() {
+    // Set up ComfyApp static methods for plugin compatibility (deprecated)
+    ComfyApp.open_maskeditor = openMaskEditorFromClipspace
+
+    console.warn(
+      '[MaskEditor] ComfyApp.open_maskeditor is deprecated. ' +
+        'Plugins should migrate to using the command system or direct node context menu integration.'
+    )
+  }
 })
 
 const changeBrushSize = async (sizeChanger: (oldSize: number) => number) => {

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -28,6 +28,7 @@ import type {
 } from '@/lib/litegraph/src/types/serialisation'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
+import { AssetWidget } from '@/lib/litegraph/src/widgets/AssetWidget'
 import { toConcreteWidget } from '@/lib/litegraph/src/widgets/widgetMap'
 
 import { ExecutableNodeDTO } from './ExecutableNodeDTO'
@@ -333,6 +334,8 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     const promotedWidget = toConcreteWidget(widget, this).createCopyForNode(
       this
     )
+    if (widget instanceof AssetWidget)
+      promotedWidget.options.nodeType ??= widget.node.type
 
     Object.assign(promotedWidget, {
       get name() {

src/lib/litegraph/src/types/widgets.ts

@@ -27,6 +27,8 @@ export interface IWidgetOptions<TValues = unknown[]> {
   socketless?: boolean
   /** If `true`, the widget will not be rendered by the Vue renderer. */
   canvasOnly?: boolean
+  /** Used as a temporary override for determining the asset type in vue mode*/
+  nodeType?: string
 
   values?: TValues
   /** Optional function to format values for display (e.g., hash → human-readable name) */

src/locales/en/main.json

@@ -10,8 +10,10 @@
     "downloadVideo": "Download video",
     "editOrMaskImage": "Edit or mask image",
     "editImage": "Edit image",
+    "decrement": "Decrement",
     "deleteImage": "Delete image",
     "deleteAudioFile": "Delete audio file",
+    "increment": "Increment",
     "removeImage": "Remove image",
     "removeVideo": "Remove video",
     "chart": "Chart",
@@ -181,6 +183,7 @@
     "missing": "Missing",
     "inProgress": "In progress",
     "completed": "Completed",
+    "downloading": "Downloading",
     "interrupted": "Interrupted",
     "queued": "Queued",
     "running": "Running",
@@ -1896,12 +1899,27 @@
       "insufficientWorkflowMessage": "You don't have enough credits to run this workflow.",
       "creditsDescription": "Credits are used to run workflows or partner nodes.",
       "howManyCredits": "How many credits would you like to add?",
+      "usdAmount": "${amount}",
       "videosEstimate": "~{count} videos*",
       "templateNote": "*Generated with Wan Fun Control template",
       "buy": "Buy",
       "purchaseError": "Purchase Failed",
       "purchaseErrorDetail": "Failed to purchase credits: {error}",
-      "unknownError": "An unknown error occurred"
+      "unknownError": "An unknown error occurred",
+      "viewPricing": "View pricing details",
+      "youPay": "Amount (USD)",
+      "youGet": "Credits",
+      "buyCredits": "Continue to payment",
+      "minimumPurchase": "${amount} minimum ({credits} credits)",
+      "maximumAmount": "${amount} max.",
+      "minRequired": "{credits} credits minimum",
+      "maxAllowed": "{credits} credits maximum.",
+      "creditsPerDollar": "credits per dollar",
+      "amountToPayLabel": "Amount to pay in dollars",
+      "creditsToReceiveLabel": "Credits to receive",
+      "selectAmount": "Select amount",
+      "needMore": "Need more?",
+      "contactUs": "Contact us"
     },
     "creditsAvailable": "Credits available",
     "refreshes": "Refreshes {date}",
@@ -1938,9 +1956,9 @@
     "monthlyBonusDescription": "Monthly credit bonus",
     "prepaidDescription": "Pre-paid credits",
     "prepaidCreditsInfo": "Pre-paid credits expire after 1 year from purchase date.",
-    "creditsRemainingThisMonth": "Credits remaining this month",
-    "creditsRemainingThisYear": "Credits remaining this year",
-    "creditsYouveAdded": "Credits you've added",
+    "creditsRemainingThisMonth": "Included (Refills {date})",
+    "creditsRemainingThisYear": "Included (Refills {date})",
+    "creditsYouveAdded": "Additional",
     "monthlyCreditsInfo": "These credits refresh monthly and don't roll over",
     "viewMoreDetailsPlans": "View more details about plans & pricing",
     "nextBillingCycle": "next billing cycle",
@@ -1995,7 +2013,7 @@
     "subscribeTo": "Subscribe to {plan}",
     "monthlyCreditsLabel": "Monthly credits",
     "yearlyCreditsLabel": "Total yearly credits",
-    "maxDurationLabel": "Max duration of each workflow run",
+    "maxDurationLabel": "Max run duration",
     "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
     "addCreditsLabel": "Add more credits whenever",
     "customLoRAsLabel": "Import your own LoRAs",
@@ -2261,6 +2279,7 @@
     "filterBy": "Filter by",
     "findInLibrary": "Find it in the {type} section of the models library.",
     "finish": "Finish",
+    "importAnother": "Import Another",
     "genericLinkPlaceholder": "Paste link here",
     "jobId": "Job ID",
     "loadingModels": "Loading {type}...",
@@ -2275,14 +2294,16 @@
     "noAssetsFound": "No assets found",
     "noModelsInFolder": "No {type} available in this folder",
     "notSureLeaveAsIs": "Not sure? Just leave this as is",
+    "noValidSourceDetected": "No valid import source detected",
     "onlyCivitaiUrlsSupported": "Only Civitai URLs are supported",
     "ownership": "Ownership",
     "ownershipAll": "All",
     "ownershipMyModels": "My models",
     "ownershipPublicModels": "Public models",
+    "processingModel": "Download started",
+    "processingModelDescription": "You can close this dialog. The download will continue in the background.",
     "providerCivitai": "Civitai",
     "providerHuggingFace": "Hugging Face",
-    "noValidSourceDetected": "No valid import source detected",
     "selectFrameworks": "Select Frameworks",
     "selectModelType": "Select model type",
     "selectProjects": "Select Projects",
@@ -2307,8 +2328,8 @@
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
     "uploadModelDescription1Generic": "Paste a model download link to add it to your library.",
     "uploadModelDescription2": "Only links from {link} are supported at the moment",
-    "uploadModelDescription2Link": "https://civitai.com/models",
     "uploadModelDescription2Generic": "Only URLs from the following providers are supported:",
+    "uploadModelDescription2Link": "https://civitai.com/models",
     "uploadModelDescription3": "Max file size: {size}",
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
     "uploadModelFromCivitai": "Import a model from Civitai",
@@ -2332,6 +2353,11 @@
       "complete": "{assetName} has been deleted.",
       "failed": "{assetName} could not be deleted."
     },
+    "download": {
+      "complete": "Download complete",
+      "failed": "Download failed",
+      "inProgress": "Downloading {assetName}..."
+    },
     "rename": {
       "failed": "Could not rename asset."
     }
@@ -2448,5 +2474,21 @@
   "help": {
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
+  },
+  "progressToast": {
+    "importingModels": "Importing Models",
+    "downloadingModel": "Downloading model...",
+    "downloadsFailed": "{count} downloads failed | {count} download failed | {count} downloads failed",
+    "allDownloadsCompleted": "All downloads completed",
+    "noImportsInQueue": "No {filter} in queue",
+    "failed": "Failed",
+    "finished": "Finished",
+    "pending": "Pending",
+    "progressCount": "{completed} of {total}",
+    "filter": {
+      "all": "All",
+      "completed": "Completed",
+      "failed": "Failed"
+    }
   }
 }

src/platform/assets/components/AssetBadgeGroup.vue

@@ -5,7 +5,7 @@
       :key="badge.label"
       :class="
         cn(
-          'px-2 py-1 rounded text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background'
+          'px-2 py-1 rounded text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
         )
       "
     >

src/platform/assets/components/AssetBrowserModal.vue

@@ -32,7 +32,7 @@
         <Button
           v-if="isUploadButtonEnabled"
           variant="primary"
-          :size="breakpoints.md ? 'md' : 'icon'"
+          :size="breakpoints.md ? 'lg' : 'icon'"
           data-attr="upload-model-button"
           @click="showUploadDialog"
         >
@@ -57,18 +57,15 @@
         :assets="filteredAssets"
         :loading="isLoading"
         @asset-select="handleAssetSelectAndEmit"
+        @asset-deleted="refreshAssets"
       />
     </template>
   </BaseModalLayout>
 </template>
 
 <script setup lang="ts">
-import {
-  breakpointsTailwind,
-  useAsyncState,
-  useBreakpoints
-} from '@vueuse/core'
-import { computed, provide, watch } from 'vue'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
@@ -81,56 +78,68 @@ import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBro
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { assetService } from '@/platform/assets/services/assetService'
 import { formatCategoryLabel } from '@/platform/assets/utils/categoryLabel'
+import { useAssetsStore } from '@/stores/assetsStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { OnCloseKey } from '@/types/widgetTypes'
 
+const { t } = useI18n()
+const assetStore = useAssetsStore()
+const modelToNodeStore = useModelToNodeStore()
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
 const props = defineProps<{
   nodeType?: string
+  assetType?: string
   onSelect?: (asset: AssetItem) => void
   onClose?: () => void
   showLeftPanel?: boolean
   title?: string
-  assetType?: string
 }>()
 
-const { t } = useI18n()
-
 const emit = defineEmits<{
   'asset-select': [asset: AssetDisplayItem]
   close: []
 }>()
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
 provide(OnCloseKey, props.onClose ?? (() => {}))
 
-const fetchAssets = async () => {
+// Compute the cache key based on nodeType or assetType
+const cacheKey = computed(() => {
+  if (props.nodeType) return props.nodeType
+  if (props.assetType) return `tag:${props.assetType}`
+  return ''
+})
+
+// Read directly from store cache - reactive to any store updates
+const fetchedAssets = computed(
+  () => assetStore.modelAssetsByNodeType.get(cacheKey.value) ?? []
+)
+
+const isStoreLoading = computed(
+  () => assetStore.modelLoadingByNodeType.get(cacheKey.value) ?? false
+)
+
+// Only show loading spinner when loading AND no cached data
+const isLoading = computed(
+  () => isStoreLoading.value && fetchedAssets.value.length === 0
+)
+
+async function refreshAssets(): Promise<AssetItem[]> {
   if (props.nodeType) {
-    return (await assetService.getAssetsForNodeType(props.nodeType)) ?? []
+    return await assetStore.updateModelsForNodeType(props.nodeType)
   }
-
   if (props.assetType) {
-    return (await assetService.getAssetsByTag(props.assetType)) ?? []
+    return await assetStore.updateModelsForTag(props.assetType)
   }
-
   return []
 }
 
-const {
-  state: fetchedAssets,
-  isLoading,
-  execute
-} = useAsyncState<AssetItem[]>(fetchAssets, [], { immediate: false })
+// Trigger background refresh on mount
+void refreshAssets()
 
-watch(
-  () => [props.nodeType, props.assetType],
-  async () => {
-    await execute()
-  },
-  { immediate: true }
-)
+const { isUploadButtonEnabled, showUploadDialog } =
+  useModelUpload(refreshAssets)
 
 const {
   searchQuery,
@@ -141,8 +150,6 @@ const {
   updateFilters
 } = useAssetBrowser(fetchedAssets)
 
-const modelToNodeStore = useModelToNodeStore()
-
 const primaryCategoryTag = computed(() => {
   const assets = fetchedAssets.value ?? []
   const tagFromAssets = assets
@@ -190,6 +197,4 @@ function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
   // It handles the appropriate transformation (filename extraction or full asset)
   props.onSelect?.(asset)
 }
-
-const { isUploadButtonEnabled, showUploadDialog } = useModelUpload(execute)
 </script>

src/platform/assets/components/AssetCard.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="!deletedLocal"
     data-component-id="AssetCard"
     :data-asset-id="asset.id"
     :aria-labelledby="titleId"
@@ -33,7 +32,7 @@
 
       <AssetBadgeGroup :badges="asset.badges" />
       <IconGroup
-        v-if="flags.assetUpdateOptionsEnabled && !(asset.is_immutable ?? true)"
+        v-if="showAssetOptions"
         :class="
           cn(
             'absolute top-2 right-2 invisible group-hover:visible',
@@ -44,6 +43,7 @@
         <MoreButton ref="dropdown-menu-button" size="sm">
           <template #default>
             <Button
+              v-if="flags.assetRenameEnabled"
               variant="secondary"
               size="md"
               class="justify-start"
@@ -53,6 +53,7 @@
               <span>{{ $t('g.rename') }}</span>
             </Button>
             <Button
+              v-if="flags.assetDeletionEnabled"
               variant="secondary"
               size="md"
               class="justify-start"
@@ -137,8 +138,9 @@ const { asset, interactive } = defineProps<{
   interactive?: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   select: [asset: AssetDisplayItem]
+  deleted: [asset: AssetDisplayItem]
 }>()
 
 const { t } = useI18n()
@@ -156,10 +158,15 @@ const descId = useId()
 
 const isEditing = ref(false)
 const newNameRef = ref<string>()
-const deletedLocal = ref(false)
 
 const displayName = computed(() => newNameRef.value ?? asset.name)
 
+const showAssetOptions = computed(
+  () =>
+    (flags.assetDeletionEnabled || flags.assetRenameEnabled) &&
+    !(asset.is_immutable ?? true)
+)
+
 const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')
 )
@@ -203,7 +210,7 @@ function confirmDeletion() {
           })
           // Give a second for the completion message
           await new Promise((resolve) => setTimeout(resolve, 1_000))
-          deletedLocal.value = true
+          emit('deleted', asset)
         } catch (err: unknown) {
           console.error(err)
           promptText.value = t('assetBrowser.deletion.failed', {

src/platform/assets/components/AssetFilterBar.vue

@@ -48,7 +48,7 @@
         @update:model-value="handleFilterChange"
       >
         <template #icon>
-          <i class="icon-[lucide--arrow-up-down] size-3" />
+          <i class="icon-[lucide--arrow-up-down]" />
         </template>
       </SingleSelect>
     </div>

src/platform/assets/components/AssetGrid.vue

@@ -1,28 +1,21 @@
 <template>
   <div
     data-component-id="AssetGrid"
-    :class="
-      cn('grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-4 p-2')
-    "
+    class="h-full"
     role="grid"
     :aria-label="$t('assetBrowser.assetCollection')"
     :aria-rowcount="-1"
     :aria-colcount="-1"
     :aria-setsize="assets.length"
   >
-    <!-- Loading state -->
-    <div
-      v-if="loading"
-      class="col-span-full flex items-center justify-center py-20"
-    >
+    <div v-if="loading" class="flex h-full items-center justify-center py-20">
       <i
         class="icon-[lucide--loader] size-12 animate-spin text-muted-foreground"
       />
     </div>
-    <!-- Empty state -->
     <div
       v-else-if="assets.length === 0"
-      class="col-span-full flex flex-col items-center justify-center py-16 text-muted-foreground"
+      class="flex h-full flex-col items-center justify-center py-16 text-muted-foreground"
     >
       <i class="mb-4 icon-[lucide--search] size-10" />
       <h3 class="mb-2 text-lg font-medium">
@@ -30,29 +23,51 @@
       </h3>
       <p class="text-sm">{{ $t('assetBrowser.tryAdjustingFilters') }}</p>
     </div>
-    <template v-else>
-      <AssetCard
-        v-for="asset in assets"
-        :key="asset.id"
-        :asset="asset"
-        :interactive="true"
-        @select="$emit('assetSelect', $event)"
-      />
-    </template>
+    <VirtualGrid
+      v-else
+      :items="assetsWithKey"
+      :grid-style="gridStyle"
+      :default-item-height="320"
+      :default-item-width="240"
+    >
+      <template #item="{ item }">
+        <AssetCard
+          :asset="item"
+          :interactive="true"
+          @select="$emit('assetSelect', $event)"
+          @deleted="$emit('assetDeleted', $event)"
+        />
+      </template>
+    </VirtualGrid>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { computed } from 'vue'
+
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import AssetCard from '@/platform/assets/components/AssetCard.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { cn } from '@/utils/tailwindUtil'
 
-defineProps<{
+const { assets } = defineProps<{
   assets: AssetDisplayItem[]
   loading?: boolean
 }>()
 
 defineEmits<{
   assetSelect: [asset: AssetDisplayItem]
+  assetDeleted: [asset: AssetDisplayItem]
 }>()
+
+const assetsWithKey = computed(() =>
+  assets.map((asset) => ({ ...asset, key: asset.id }))
+)
+
+const gridStyle: Partial<CSSProperties> = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(15rem, 1fr))',
+  gap: '1rem',
+  padding: '0.5rem'
+}
 </script>

src/platform/assets/components/ModelImportProgressDialog.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { whenever } from '@vueuse/core'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import HoneyToast from '@/components/honeyToast/HoneyToast.vue'
+import ProgressToastItem from '@/components/toast/ProgressToastItem.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()
+const assetDownloadStore = useAssetDownloadStore()
+
+const visible = computed(() => assetDownloadStore.hasDownloads)
+
+const isExpanded = ref(false)
+const activeFilter = ref<'all' | 'completed' | 'failed'>('all')
+const filterPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+
+whenever(
+  () => !isExpanded.value,
+  () => filterPopoverRef.value?.hide()
+)
+
+const filterOptions = [
+  { value: 'all', label: 'all' },
+  { value: 'completed', label: 'completed' },
+  { value: 'failed', label: 'failed' }
+] as const
+
+function onFilterClick(event: Event) {
+  filterPopoverRef.value?.toggle(event)
+}
+
+function setFilter(filter: typeof activeFilter.value) {
+  activeFilter.value = filter
+  filterPopoverRef.value?.hide()
+}
+
+const downloadJobs = computed(() => assetDownloadStore.downloadList)
+const completedJobs = computed(() =>
+  assetDownloadStore.finishedDownloads.filter((d) => d.status === 'completed')
+)
+const failedJobs = computed(() =>
+  assetDownloadStore.finishedDownloads.filter((d) => d.status === 'failed')
+)
+
+const isInProgress = computed(() => assetDownloadStore.hasActiveDownloads)
+const currentJobName = computed(() => {
+  const activeJob = downloadJobs.value.find((job) => job.status === 'running')
+  return activeJob?.assetName || t('progressToast.downloadingModel')
+})
+
+const completedCount = computed(
+  () => completedJobs.value.length + failedJobs.value.length
+)
+const totalCount = computed(() => downloadJobs.value.length)
+
+const filteredJobs = computed(() => {
+  switch (activeFilter.value) {
+    case 'completed':
+      return completedJobs.value
+    case 'failed':
+      return failedJobs.value
+    default:
+      return downloadJobs.value
+  }
+})
+
+const activeFilterLabel = computed(() => {
+  const option = filterOptions.find((f) => f.value === activeFilter.value)
+  return option
+    ? t(`progressToast.filter.${option.label}`)
+    : t('progressToast.filter.all')
+})
+
+function closeDialog() {
+  assetDownloadStore.clearFinishedDownloads()
+  isExpanded.value = false
+}
+</script>
+
+<template>
+  <HoneyToast v-model:expanded="isExpanded" :visible>
+    <template #default>
+      <div
+        class="flex h-12 items-center justify-between border-b border-border-default px-4"
+      >
+        <h3 class="text-sm font-bold text-base-foreground">
+          {{ t('progressToast.importingModels') }}
+        </h3>
+        <div class="flex items-center gap-2">
+          <Button
+            variant="secondary"
+            size="md"
+            class="gap-1.5 px-2"
+            @click="onFilterClick"
+          >
+            <i class="icon-[lucide--list-filter] size-4" />
+            <span>{{ activeFilterLabel }}</span>
+            <i class="icon-[lucide--chevron-down] size-3" />
+          </Button>
+          <Popover
+            ref="filterPopoverRef"
+            :dismissable="true"
+            :close-on-escape="true"
+            unstyled
+            :base-z-index="9999"
+            :pt="{
+              root: { class: 'absolute z-50' },
+              content: {
+                class:
+                  'bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg'
+              }
+            }"
+          >
+            <div
+              class="flex min-w-30 flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3"
+            >
+              <Button
+                v-for="option in filterOptions"
+                :key="option.value"
+                variant="textonly"
+                size="sm"
+                :class="
+                  cn(
+                    'w-full justify-start bg-transparent',
+                    activeFilter === option.value &&
+                      'bg-secondary-background-selected'
+                  )
+                "
+                @click="setFilter(option.value)"
+              >
+                {{ t(`progressToast.filter.${option.label}`) }}
+              </Button>
+            </div>
+          </Popover>
+        </div>
+      </div>
+
+      <div class="relative max-h-75 overflow-y-auto px-4 py-4">
+        <div
+          v-if="filteredJobs.length > 3"
+          class="absolute right-1 top-4 h-12 w-1 rounded-full bg-muted-foreground"
+        />
+
+        <div class="flex flex-col gap-2">
+          <ProgressToastItem
+            v-for="job in filteredJobs"
+            :key="job.taskId"
+            :job="job"
+          />
+        </div>
+
+        <div
+          v-if="filteredJobs.length === 0"
+          class="flex flex-col items-center justify-center py-6 text-center"
+        >
+          <span class="text-sm text-muted-foreground">
+            {{
+              t('progressToast.noImportsInQueue', {
+                filter: activeFilterLabel
+              })
+            }}
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <template #footer="{ toggle }">
+      <div
+        class="flex h-12 items-center justify-between gap-2 border-t border-border-default px-4"
+      >
+        <div class="flex min-w-0 flex-1 items-center gap-2 text-sm">
+          <template v-if="isInProgress">
+            <i
+              class="icon-[lucide--loader-circle] size-4 flex-shrink-0 animate-spin text-muted-foreground"
+            />
+            <span
+              class="min-w-0 flex-1 truncate font-bold text-base-foreground"
+            >
+              {{ currentJobName }}
+            </span>
+          </template>
+          <template v-else-if="failedJobs.length > 0">
+            <i
+              class="icon-[lucide--circle-alert] size-4 flex-shrink-0 text-destructive-background"
+            />
+            <span class="min-w-0 truncate font-bold text-base-foreground">
+              {{
+                t('progressToast.downloadsFailed', {
+                  count: failedJobs.length
+                })
+              }}
+            </span>
+          </template>
+          <template v-else>
+            <i
+              class="icon-[lucide--check-circle] size-4 flex-shrink-0 text-jade-600"
+            />
+            <span class="min-w-0 truncate font-bold text-base-foreground">
+              {{ t('progressToast.allDownloadsCompleted') }}
+            </span>
+          </template>
+        </div>
+
+        <div class="flex flex-shrink-0 items-center gap-2">
+          <span
+            v-if="isInProgress"
+            class="whitespace-nowrap text-sm text-muted-foreground"
+          >
+            {{
+              t('progressToast.progressCount', {
+                completed: completedCount,
+                total: totalCount
+              })
+            }}
+          </span>
+
+          <div class="flex items-center">
+            <Button
+              variant="muted-textonly"
+              size="icon"
+              :aria-label="
+                isExpanded ? t('contextMenu.Collapse') : t('contextMenu.Expand')
+              "
+              @click.stop="toggle"
+            >
+              <i
+                :class="
+                  cn(
+                    'size-4',
+                    isExpanded
+                      ? 'icon-[lucide--chevron-down]'
+                      : 'icon-[lucide--chevron-up]'
+                  )
+                "
+              />
+            </Button>
+
+            <Button
+              v-if="!isInProgress"
+              variant="muted-textonly"
+              size="icon"
+              :aria-label="t('g.close')"
+              @click.stop="closeDialog"
+            >
+              <i class="icon-[lucide--x] size-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </HoneyToast>
+</template>

src/platform/assets/components/UploadModelConfirmation.vue

@@ -5,15 +5,15 @@
         {{ $t('assetBrowser.modelAssociatedWithLink') }}
       </p>
       <div
-        class="flex items-center gap-3 bg-secondary-background p-3 rounded-lg"
+        class="flex items-center gap-3 rounded-lg bg-secondary-background px-4 py-2"
       >
         <img
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="w-14 h-14 rounded object-cover flex-shrink-0"
+          class="size-14 flex-shrink-0 rounded object-cover"
         />
-        <p class="m-0 text-base-foreground">
+        <p class="m-0 min-w-0 flex-1 truncate text-base-foreground">
           {{ metadata?.filename || metadata?.name }}
         </p>
       </div>
@@ -21,9 +21,15 @@
 
     <!-- Model Type Selection -->
     <div class="flex flex-col gap-2">
-      <label class="">
-        {{ $t('assetBrowser.modelTypeSelectorLabel') }}
-      </label>
+      <div class="flex items-center gap-2">
+        <label>
+          {{ $t('assetBrowser.modelTypeSelectorLabel') }}
+        </label>
+        <i class="icon-[lucide--circle-question-mark] text-muted-foreground" />
+        <span class="text-muted-foreground">
+          {{ $t('assetBrowser.notSureLeaveAsIs') }}
+        </span>
+      </div>
       <SingleSelect
         v-model="modelValue"
         :label="
@@ -35,10 +41,6 @@
         :disabled="isLoading"
         data-attr="upload-model-step2-type-selector"
       />
-      <div class="flex items-center gap-2">
-        <i class="icon-[lucide--circle-question-mark]" />
-        <span>{{ $t('assetBrowser.notSureLeaveAsIs') }}</span>
-      </div>
     </div>
   </div>
 </template>

src/platform/assets/components/UploadModelDialog.vue

@@ -1,40 +1,43 @@
 <template>
   <div
-    class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6 border-t border-border-default"
+    class="upload-model-dialog flex flex-col gap-6 border-t border-border-default p-4 pt-6"
   >
-    <!-- Step 1: Enter URL -->
-    <UploadModelUrlInput
-      v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
-      v-model="wizardData.url"
-      :error="uploadError"
-      class="flex-1"
-    />
-    <UploadModelUrlInputCivitai
-      v-else-if="currentStep === 1"
-      v-model="wizardData.url"
-      :error="uploadError"
-    />
+    <!-- Scrollable content area -->
+    <div class="min-h-0 flex-auto basis-0 overflow-y-auto">
+      <!-- Step 1: Enter URL -->
+      <UploadModelUrlInput
+        v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
+        v-model="wizardData.url"
+        :error="uploadError"
+      />
+      <UploadModelUrlInputCivitai
+        v-else-if="currentStep === 1"
+        v-model="wizardData.url"
+        :error="uploadError"
+      />
 
-    <!-- Step 2: Confirm Metadata -->
-    <UploadModelConfirmation
-      v-else-if="currentStep === 2"
-      v-model="selectedModelType"
-      :metadata="wizardData.metadata"
-      :preview-image="wizardData.previewImage"
-    />
+      <!-- Step 2: Confirm Metadata -->
+      <UploadModelConfirmation
+        v-else-if="currentStep === 2"
+        v-model="selectedModelType"
+        :metadata="wizardData.metadata"
+        :preview-image="wizardData.previewImage"
+      />
 
-    <!-- Step 3: Upload Progress -->
-    <UploadModelProgress
-      v-else-if="currentStep === 3"
-      :status="uploadStatus"
-      :error="uploadError"
-      :metadata="wizardData.metadata"
-      :model-type="selectedModelType"
-      :preview-image="wizardData.previewImage"
-    />
+      <!-- Step 3: Upload Progress -->
+      <UploadModelProgress
+        v-else-if="currentStep === 3 && uploadStatus != null"
+        :result="uploadStatus"
+        :error="uploadError"
+        :metadata="wizardData.metadata"
+        :model-type="selectedModelType"
+        :preview-image="wizardData.previewImage"
+      />
+    </div>
 
-    <!-- Navigation Footer -->
+    <!-- Navigation Footer - always visible -->
     <UploadModelFooter
+      class="flex-shrink-0"
       :current-step="currentStep"
       :is-fetching-metadata="isFetchingMetadata"
       :is-uploading="isUploading"
@@ -45,6 +48,7 @@
       @fetch-metadata="handleFetchMetadata"
       @upload="handleUploadModel"
       @close="handleClose"
+      @import-another="resetWizard"
     />
   </div>
 </template>
@@ -82,7 +86,8 @@ const {
   canUploadModel,
   fetchMetadata,
   uploadModel,
-  goToPreviousStep
+  goToPreviousStep,
+  resetWizard
 } = useUploadModelWizard(modelTypes)
 
 async function handleFetchMetadata() {
@@ -109,7 +114,8 @@ onMounted(() => {
 .upload-model-dialog {
   width: 90vw;
   max-width: 800px;
-  min-height: 400px;
+  min-height: min(400px, 80vh);
+  max-height: 90vh;
 }
 
 @media (min-width: 640px) {

src/platform/assets/components/UploadModelFooter.vue

@@ -80,14 +80,33 @@
       <i v-if="isUploading" class="icon-[lucide--loader-circle] animate-spin" />
       <span>{{ $t('assetBrowser.upload') }}</span>
     </Button>
-    <Button
-      v-else-if="currentStep === 3 && uploadStatus === 'success'"
-      variant="secondary"
-      data-attr="upload-model-step3-finish-button"
-      @click="emit('close')"
+    <template
+      v-else-if="
+        currentStep === 3 &&
+        (uploadStatus === 'success' || uploadStatus === 'processing')
+      "
     >
-      {{ $t('assetBrowser.finish') }}
-    </Button>
+      <Button
+        variant="muted-textonly"
+        size="lg"
+        data-attr="upload-model-step3-import-another-button"
+        @click="emit('importAnother')"
+      >
+        {{ $t('assetBrowser.importAnother') }}
+      </Button>
+      <Button
+        variant="secondary"
+        size="lg"
+        data-attr="upload-model-step3-finish-button"
+        @click="emit('close')"
+      >
+        {{
+          uploadStatus === 'processing'
+            ? $t('g.close')
+            : $t('assetBrowser.finish')
+        }}
+      </Button>
+    </template>
     <VideoHelpDialog
       v-model="showCivitaiHelp"
       video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
@@ -119,7 +138,7 @@ defineProps<{
   isUploading: boolean
   canFetchMetadata: boolean
   canUploadModel: boolean
-  uploadStatus: 'idle' | 'uploading' | 'success' | 'error'
+  uploadStatus?: 'processing' | 'success' | 'error'
 }>()
 
 const emit = defineEmits<{
@@ -127,5 +146,6 @@ const emit = defineEmits<{
   (e: 'fetchMetadata'): void
   (e: 'upload'): void
   (e: 'close'): void
+  (e: 'importAnother'): void
 }>()
 </script>

src/platform/assets/components/UploadModelProgress.vue

@@ -1,22 +1,38 @@
 <template>
   <div class="flex flex-1 flex-col gap-6 text-sm text-muted-foreground">
-    <!-- Uploading State -->
-    <div
-      v-if="status === 'uploading'"
-      class="flex flex-1 flex-col items-center justify-center gap-2"
-    >
-      <i
-        class="icon-[lucide--loader-circle] animate-spin text-6xl text-muted-foreground"
-      />
-      <div class="text-center">
-        <p class="m-0 font-bold">
-          {{ $t('assetBrowser.uploadingModel') }}
-        </p>
+    <!-- Processing State (202 async download in progress) -->
+    <div v-if="result === 'processing'" class="flex flex-col gap-2">
+      <p class="m-0 font-bold">
+        {{ $t('assetBrowser.processingModel') }}
+      </p>
+      <p class="m-0">
+        {{ $t('assetBrowser.processingModelDescription') }}
+      </p>
+
+      <div
+        class="flex flex-row items-center gap-3 rounded-lg bg-modal-card-background p-4"
+      >
+        <img
+          v-if="previewImage"
+          :src="previewImage"
+          :alt="metadata?.filename || metadata?.name || 'Model preview'"
+          class="size-14 flex-shrink-0 rounded object-cover"
+        />
+        <div
+          class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
+        >
+          <p class="m-0 w-full truncate text-base-foreground">
+            {{ metadata?.filename || metadata?.name }}
+          </p>
+          <p class="m-0 text-sm text-muted">
+            {{ modelType }}
+          </p>
+        </div>
       </div>
     </div>
 
     <!-- Success State -->
-    <div v-else-if="status === 'success'" class="flex flex-col gap-2">
+    <div v-else-if="result === 'success'" class="flex flex-col gap-2">
       <p class="m-0 font-bold">
         {{ $t('assetBrowser.modelUploaded') }}
       </p>
@@ -25,20 +41,21 @@
       </p>
 
       <div
-        class="flex flex-row items-center gap-3 p-4 bg-modal-card-background rounded-lg"
+        class="flex flex-row items-center gap-3 rounded-lg bg-modal-card-background p-4"
       >
         <img
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="w-14 h-14 rounded object-cover flex-shrink-0"
+          class="size-14 flex-shrink-0 rounded object-cover"
         />
-        <div class="flex flex-col justify-center items-start gap-1 flex-1">
-          <p class="text-base-foreground m-0">
+        <div
+          class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
+        >
+          <p class="m-0 w-full truncate text-base-foreground">
             {{ metadata?.filename || metadata?.name }}
           </p>
-          <p class="text-sm text-muted m-0">
-            <!-- Going to want to add another translation here to get a nice display name. -->
+          <p class="m-0 text-sm text-muted">
             {{ modelType }}
           </p>
         </div>
@@ -47,7 +64,7 @@
 
     <!-- Error State -->
     <div
-      v-else-if="status === 'error'"
+      v-else-if="result === 'error'"
       class="flex flex-1 flex-col items-center justify-center gap-6"
     >
       <i class="icon-[lucide--x-circle] text-6xl text-error" />
@@ -66,8 +83,8 @@
 <script setup lang="ts">
 import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
 
-defineProps<{
-  status: 'idle' | 'uploading' | 'success' | 'error'
+const { result } = defineProps<{
+  result: 'processing' | 'success' | 'error'
   error?: string
   metadata?: AssetMetadata
   modelType?: string

src/platform/assets/components/UploadModelUrlInput.vue

@@ -20,7 +20,7 @@
                 :href="civitaiUrl"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-muted underline"
+                class="text-muted-foreground underline"
               >
                 {{ $t('assetBrowser.providerCivitai') }}</a
               ><span>,</span>
@@ -35,7 +35,7 @@
                 :href="huggingFaceUrl"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-muted underline"
+                class="text-muted-foreground underline"
               >
                 {{ $t('assetBrowser.providerHuggingFace') }}
               </a>
@@ -45,17 +45,23 @@
       </div>
 
       <div class="flex flex-col gap-2">
-        <InputText
-          v-model="url"
-          autofocus
-          :placeholder="$t('assetBrowser.genericLinkPlaceholder')"
-          class="w-full bg-secondary-background border-0 p-4"
-          data-attr="upload-model-step1-url-input"
-        />
-        <p v-if="error" class="text-xs text-error">
+        <div class="relative">
+          <InputText
+            v-model="url"
+            autofocus
+            :placeholder="$t('assetBrowser.genericLinkPlaceholder')"
+            class="w-full border-0 bg-secondary-background p-4 pr-10"
+            data-attr="upload-model-step1-url-input"
+          />
+          <i
+            v-if="isValidUrl"
+            class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
+          />
+        </div>
+        <p v-if="error" class="text-sm text-error">
           {{ error }}
         </p>
-        <p v-else class="text-foreground">
+        <p v-else-if="!flags.asyncModelUploadEnabled" class="text-foreground">
           <i18n-t keypath="assetBrowser.maxFileSize" tag="span">
             <template #size>
               <span class="font-bold italic">{{
@@ -77,6 +83,13 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
+import { huggingfaceImportSource } from '@/platform/assets/importSources/huggingfaceImportSource'
+import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
+
+const { flags } = useFeatureFlags()
+
 const props = defineProps<{
   modelValue: string
   error?: string
@@ -91,6 +104,14 @@ const url = computed({
   set: (value: string) => emit('update:modelValue', value)
 })
 
+const importSources = [civitaiImportSource, huggingfaceImportSource]
+
+const isValidUrl = computed(() => {
+  const trimmedUrl = url.value.trim()
+  if (!trimmedUrl) return false
+  return importSources.some((source) => validateSourceUrl(trimmedUrl, source))
+})
+
 const civitaiIcon = '/assets/images/civitai.svg'
 const civitaiUrl = 'https://civitai.com/models'
 const huggingFaceIcon = '/assets/images/hf-logo.svg'

src/platform/assets/components/UploadModelUrlInputCivitai.vue

@@ -11,14 +11,14 @@
               <a
                 href="https://civitai.com/models"
                 target="_blank"
-                class="text-muted-foreground"
+                class="text-muted-foreground underline"
               >
                 {{ $t('assetBrowser.uploadModelDescription2Link') }}
               </a>
             </template>
           </i18n-t>
         </li>
-        <li>
+        <li v-if="!flags.asyncModelUploadEnabled">
           <i18n-t keypath="assetBrowser.uploadModelDescription3" tag="span">
             <template #size>
               <span class="font-bold italic">{{
@@ -38,21 +38,27 @@
           }}</span>
         </template>
       </i18n-t>
-      <InputText
-        v-model="url"
-        autofocus
-        :placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
-        class="w-full bg-secondary-background border-0 p-4"
-        data-attr="upload-model-step1-url-input"
-      />
-      <p v-if="error" class="text-xs text-error">
+      <div class="relative">
+        <InputText
+          v-model="url"
+          autofocus
+          :placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
+          class="w-full border-0 bg-secondary-background p-4 pr-10"
+          data-attr="upload-model-step1-url-input"
+        />
+        <i
+          v-if="isValidUrl"
+          class="icon-[lucide--circle-check-big] absolute top-1/2 right-3 size-5 -translate-y-1/2 text-green-500"
+        />
+      </div>
+      <p v-if="error" class="text-sm text-error">
         {{ error }}
       </p>
       <i18n-t
         v-else
         keypath="assetBrowser.civitaiLinkExample"
         tag="p"
-        class="text-xs"
+        class="text-sm"
       >
         <template #example>
           <strong>{{ $t('assetBrowser.civitaiLinkExampleStrong') }}</strong>
@@ -61,7 +67,7 @@
           <a
             href="https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295"
             target="_blank"
-            class="text-muted-foreground"
+            class="text-muted-foreground underline"
           >
             {{ $t('assetBrowser.civitaiLinkExampleUrl') }}
           </a>
@@ -73,10 +79,23 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
+import { computed } from 'vue'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
+import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
+
+const { flags } = useFeatureFlags()
 
 defineProps<{
   error?: string
 }>()
 
 const url = defineModel<string>({ required: true })
+
+const isValidUrl = computed(() => {
+  const trimmedUrl = url.value.trim()
+  if (!trimmedUrl) return false
+  return validateSourceUrl(trimmedUrl, civitaiImportSource)
+})
 </script>

src/platform/assets/components/VideoHelpDialog.vue

@@ -11,7 +11,7 @@
       content: { class: '!p-0' },
       mask: { class: '!bg-black/70' }
     }"
-    :style="{ width: '90vw', maxWidth: '800px' }"
+    :style="{ width: '90vw' }"
   >
     <div class="relative">
       <Button

src/platform/assets/composables/useAssetBrowser.ts

@@ -15,7 +15,18 @@ export type OwnershipOption = 'all' | 'my-models' | 'public-models'
 
 function filterByCategory(category: string) {
   return (asset: AssetItem) => {
-    return category === 'all' || asset.tags.includes(category)
+    if (category === 'all') return true
+
+    // Check if any tag matches the category (for exact matches)
+    if (asset.tags.includes(category)) return true
+
+    // Check if any tag's top-level folder matches the category
+    return asset.tags.some((tag) => {
+      if (typeof tag === 'string' && tag.includes('/')) {
+        return tag.split('/')[0] === category
+      }
+      return false
+    })
   }
 }
 
@@ -93,7 +104,12 @@ export function useAssetBrowser(
 
     // Type badge from non-root tag
     if (typeTag) {
-      badges.push({ label: typeTag, type: 'type' })
+      // Remove category prefix from badge label (e.g. "checkpoint/model" → "model")
+      const badgeLabel = typeTag.includes('/')
+        ? typeTag.substring(typeTag.indexOf('/') + 1)
+        : typeTag
+
+      badges.push({ label: badgeLabel, type: 'type' })
     }
 
     // Base model badge from metadata
@@ -125,6 +141,7 @@ export function useAssetBrowser(
       .filter((asset) => asset.tags[0] === 'models')
       .map((asset) => asset.tags[1])
       .filter((tag): tag is string => typeof tag === 'string' && tag.length > 0)
+      .map((tag) => tag.split('/')[0]) // Extract top-level folder name
 
     const uniqueCategories = Array.from(new Set(categories))
       .sort()

src/platform/assets/composables/useModelTypes.ts

@@ -37,6 +37,8 @@ interface ModelTypeOption {
   value: string // Actual tag value
 }
 
+const DISALLOWED_MODEL_TYPES = ['nlf'] as const
+
 /**
  * Composable for fetching and managing model types from the API
  * Uses shared state to ensure data is only fetched once
@@ -51,6 +53,12 @@ export const useModelTypes = createSharedComposable(() => {
     async (): Promise<ModelTypeOption[]> => {
       const response = await api.getModelFolders()
       return response
+        .filter(
+          (folder) =>
+            !DISALLOWED_MODEL_TYPES.includes(
+              folder.name as (typeof DISALLOWED_MODEL_TYPES)[number]
+            )
+        )
         .map((folder) => ({
           name: formatDisplayName(folder.name),
           value: folder.name

src/platform/assets/composables/useModelUpload.ts

@@ -3,13 +3,11 @@ import UploadModelDialog from '@/platform/assets/components/UploadModelDialog.vu
 import UploadModelDialogHeader from '@/platform/assets/components/UploadModelDialogHeader.vue'
 import UploadModelUpgradeModal from '@/platform/assets/components/UploadModelUpgradeModal.vue'
 import UploadModelUpgradeModalHeader from '@/platform/assets/components/UploadModelUpgradeModalHeader.vue'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { UseAsyncStateReturn } from '@vueuse/core'
 import { computed } from 'vue'
 
 export function useModelUpload(
-  execute?: UseAsyncStateReturn<AssetItem[], [], true>['execute']
+  onUploadSuccess?: () => Promise<unknown> | void
 ) {
   const dialogStore = useDialogStore()
   const { flags } = useFeatureFlags()
@@ -25,7 +23,7 @@ export function useModelUpload(
         dialogComponentProps: {
           pt: {
             header: 'py-0! pl-0!',
-            content: 'p-0!'
+            content: 'p-0! overflow-y-hidden!'
           }
         }
       })
@@ -37,13 +35,13 @@ export function useModelUpload(
         component: UploadModelDialog,
         props: {
           onUploadSuccess: async () => {
-            await execute?.()
+            await onUploadSuccess?.()
           }
         },
         dialogComponentProps: {
           pt: {
             header: 'py-0! pl-0!',
-            content: 'p-0!'
+            content: 'p-0! overflow-y-hidden!'
           }
         }
       })

src/platform/assets/composables/useUploadModelWizard.ts

@@ -10,6 +10,7 @@ import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
 import type { ImportSource } from '@/platform/assets/types/importSource'
 import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
+import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
@@ -29,12 +30,13 @@ interface ModelTypeOption {
 export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
   const { t } = useI18n()
   const assetsStore = useAssetsStore()
+  const assetDownloadStore = useAssetDownloadStore()
   const modelToNodeStore = useModelToNodeStore()
   const { flags } = useFeatureFlags()
   const currentStep = ref(1)
   const isFetchingMetadata = ref(false)
   const isUploading = ref(false)
-  const uploadStatus = ref<'idle' | 'uploading' | 'success' | 'error'>('idle')
+  const uploadStatus = ref<'processing' | 'success' | 'error'>()
   const uploadError = ref('')
 
   const wizardData = ref<WizardData>({
@@ -154,11 +156,59 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
   }
 
-  async function uploadModel() {
-    if (!canUploadModel.value) return
+  async function uploadPreviewImage(
+    filename: string
+  ): Promise<string | undefined> {
+    if (!wizardData.value.previewImage) return undefined
+
+    try {
+      const baseFilename = filename.split('.')[0]
+      let extension = 'png'
+      const mimeMatch = wizardData.value.previewImage.match(
+        /^data:image\/([^;]+);/
+      )
+      if (mimeMatch) {
+        extension = mimeMatch[1] === 'jpeg' ? 'jpg' : mimeMatch[1]
+      }
+
+      const previewAsset = await assetService.uploadAssetFromBase64({
+        data: wizardData.value.previewImage,
+        name: `${baseFilename}_preview.${extension}`,
+        tags: ['preview']
+      })
+      return previewAsset.id
+    } catch (error) {
+      console.error('Failed to upload preview image:', error)
+      return undefined
+    }
+  }
+
+  async function refreshModelCaches() {
+    if (!selectedModelType.value) return
+
+    const providers = modelToNodeStore.getAllNodeProviders(
+      selectedModelType.value
+    )
+    const results = await Promise.allSettled(
+      providers.map((provider) =>
+        assetsStore.updateModelsForNodeType(provider.nodeDef.name)
+      )
+    )
+    results.forEach((result, index) => {
+      if (result.status === 'rejected') {
+        console.error(
+          `Failed to refresh ${providers[index].nodeDef.name}:`,
+          result.reason
+        )
+      }
+    })
+  }
+
+  async function uploadModel(): Promise<boolean> {
+    if (!canUploadModel.value) {
+      return false
+    }
 
-    // Defensive check: detectedSource should be valid after fetchMetadata validation,
-    // but guard against edge cases (e.g., URL modified between steps)
     const source = detectedSource.value
     if (!source) {
       uploadError.value = t('assetBrowser.noValidSourceDetected')
@@ -166,7 +216,6 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
 
     isUploading.value = true
-    uploadStatus.value = 'uploading'
 
     try {
       const tags = selectedModelType.value
@@ -177,72 +226,57 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
         wizardData.value.metadata?.name ||
         'model'
 
-      let previewId: string | undefined
-
-      // Upload preview image first if available
-      if (wizardData.value.previewImage) {
-        try {
-          const baseFilename = filename.split('.')[0]
-
-          // Extract extension from data URL MIME type
-          let extension = 'png'
-          const mimeMatch = wizardData.value.previewImage.match(
-            /^data:image\/([^;]+);/
-          )
-          if (mimeMatch) {
-            extension = mimeMatch[1] === 'jpeg' ? 'jpg' : mimeMatch[1]
-          }
-
-          const previewAsset = await assetService.uploadAssetFromBase64({
-            data: wizardData.value.previewImage,
-            name: `${baseFilename}_preview.${extension}`,
-            tags: ['preview']
-          })
-          previewId = previewAsset.id
-        } catch (error) {
-          console.error('Failed to upload preview image:', error)
-          // Continue with model upload even if preview fails
-        }
+      const previewId = await uploadPreviewImage(filename)
+      const userMetadata = {
+        source: source.type,
+        source_url: wizardData.value.url,
+        model_type: selectedModelType.value
       }
 
-      await assetService.uploadAssetFromUrl({
-        url: wizardData.value.url,
-        name: filename,
-        tags,
-        user_metadata: {
-          source: source.type,
+      if (flags.asyncModelUploadEnabled) {
+        const result = await assetService.uploadAssetAsync({
           source_url: wizardData.value.url,
-          model_type: selectedModelType.value
-        },
-        preview_id: previewId
-      })
+          tags,
+          user_metadata: userMetadata,
+          preview_id: previewId
+        })
 
-      uploadStatus.value = 'success'
-      currentStep.value = 3
-
-      // Refresh model caches for all node types that use this model category
-      if (selectedModelType.value) {
-        const providers = modelToNodeStore.getAllNodeProviders(
-          selectedModelType.value
-        )
-        await Promise.all(
-          providers.map((provider) =>
-            assetsStore.updateModelsForNodeType(provider.nodeDef.name)
-          )
-        )
+        if (result.type === 'async' && result.task.status !== 'completed') {
+          if (selectedModelType.value) {
+            assetDownloadStore.trackDownload(
+              result.task.task_id,
+              selectedModelType.value,
+              filename
+            )
+          }
+          uploadStatus.value = 'processing'
+        } else {
+          uploadStatus.value = 'success'
+          await refreshModelCaches()
+        }
+        currentStep.value = 3
+      } else {
+        await assetService.uploadAssetFromUrl({
+          url: wizardData.value.url,
+          name: filename,
+          tags,
+          user_metadata: userMetadata,
+          preview_id: previewId
+        })
+        uploadStatus.value = 'success'
+        await refreshModelCaches()
+        currentStep.value = 3
       }
-
-      return true
     } catch (error) {
       console.error('Failed to upload asset:', error)
       uploadStatus.value = 'error'
       uploadError.value =
         error instanceof Error ? error.message : 'Failed to upload model'
       currentStep.value = 3
-      return false
     } finally {
       isUploading.value = false
     }
+    return uploadStatus.value !== 'error'
   }
 
   function goToPreviousStep() {
@@ -251,6 +285,20 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
   }
 
+  function resetWizard() {
+    currentStep.value = 1
+    isFetchingMetadata.value = false
+    isUploading.value = false
+    uploadStatus.value = undefined
+    uploadError.value = ''
+    wizardData.value = {
+      url: '',
+      name: '',
+      tags: []
+    }
+    selectedModelType.value = undefined
+  }
+
   return {
     // State
     currentStep,
@@ -269,6 +317,7 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     // Actions
     fetchMetadata,
     uploadModel,
-    goToPreviousStep
+    goToPreviousStep,
+    resetWizard
   }
 }

src/platform/assets/schemas/assetSchema.ts

@@ -58,6 +58,17 @@ const zAssetMetadata = z.object({
   validation: zValidationResult.optional()
 })
 
+const zAsyncUploadTask = z.object({
+  task_id: z.string(),
+  status: z.enum(['created', 'running', 'completed', 'failed']),
+  message: z.string().optional()
+})
+
+const zAsyncUploadResponse = z.discriminatedUnion('type', [
+  z.object({ type: z.literal('sync'), asset: zAsset }),
+  z.object({ type: z.literal('async'), task: zAsyncUploadTask })
+])
+
 // Filename validation schema
 export const assetFilenameSchema = z
   .string()
@@ -69,11 +80,13 @@ export const assetFilenameSchema = z
 // Export schemas following repository patterns
 export const assetItemSchema = zAsset
 export const assetResponseSchema = zAssetResponse
+export const asyncUploadResponseSchema = zAsyncUploadResponse
 
 // Export types derived from Zod schemas
 export type AssetItem = z.infer<typeof zAsset>
 export type AssetResponse = z.infer<typeof zAssetResponse>
 export type AssetMetadata = z.infer<typeof zAssetMetadata>
+export type AsyncUploadResponse = z.infer<typeof zAsyncUploadResponse>
 export type ModelFolder = z.infer<typeof zModelFolder>
 export type ModelFile = z.infer<typeof zModelFile>
 

src/platform/assets/services/assetService.ts

@@ -3,12 +3,14 @@ import { fromZodError } from 'zod-validation-error'
 import { st } from '@/i18n'
 import {
   assetItemSchema,
-  assetResponseSchema
+  assetResponseSchema,
+  asyncUploadResponseSchema
 } from '@/platform/assets/schemas/assetSchema'
 import type {
   AssetItem,
   AssetMetadata,
   AssetResponse,
+  AsyncUploadResponse,
   ModelFile,
   ModelFolder
 } from '@/platform/assets/schemas/assetSchema'
@@ -46,6 +48,7 @@ function getLocalizedErrorMessage(errorCode: string): string {
 }
 
 const ASSETS_ENDPOINT = '/assets'
+const ASSETS_DOWNLOAD_ENDPOINT = '/assets/download'
 const EXPERIMENTAL_WARNING = `EXPERIMENTAL: If you are seeing this please make sure "Comfy.Assets.UseAssetAPI" is set to "false" in your ComfyUI Settings.\n`
 const DEFAULT_LIMIT = 500
 
@@ -445,6 +448,72 @@ function createAssetService() {
     return await res.json()
   }
 
+  /**
+   * Uploads an asset asynchronously using the /api/assets/download endpoint
+   * Returns immediately with either the asset (if already exists) or a task to track
+   *
+   * @param params - Upload parameters
+   * @param params.source_url - HTTP/HTTPS URL to download from
+   * @param params.tags - Optional freeform tags
+   * @param params.user_metadata - Optional custom metadata object
+   * @param params.preview_id - Optional UUID for preview asset
+   * @returns Promise<AsyncUploadResponse> - Either sync asset or async task info
+   * @throws Error if upload fails
+   */
+  async function uploadAssetAsync(params: {
+    source_url: string
+    tags?: string[]
+    user_metadata?: Record<string, unknown>
+    preview_id?: string
+  }): Promise<AsyncUploadResponse> {
+    const res = await api.fetchApi(ASSETS_DOWNLOAD_ENDPOINT, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    })
+
+    if (!res.ok) {
+      throw new Error(
+        st(
+          'assetBrowser.errorUploadFailed',
+          'Failed to upload asset. Please try again.'
+        )
+      )
+    }
+
+    const data = await res.json()
+
+    if (res.status === 202) {
+      const result = asyncUploadResponseSchema.safeParse({
+        type: 'async',
+        task: data
+      })
+      if (!result.success) {
+        throw new Error(
+          st(
+            'assetBrowser.errorUploadFailed',
+            'Failed to parse async upload response. Please try again.'
+          )
+        )
+      }
+      return result.data
+    }
+
+    const result = asyncUploadResponseSchema.safeParse({
+      type: 'sync',
+      asset: data
+    })
+    if (!result.success) {
+      throw new Error(
+        st(
+          'assetBrowser.errorUploadFailed',
+          'Failed to parse sync upload response. Please try again.'
+        )
+      )
+    }
+    return result.data
+  }
+
   return {
     getAssetModelFolders,
     getAssetModels,
@@ -456,7 +525,8 @@ function createAssetService() {
     updateAsset,
     getAssetMetadata,
     uploadAssetFromUrl,
-    uploadAssetFromBase64
+    uploadAssetFromBase64,
+    uploadAssetAsync
   }
 }
 

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

@@ -258,6 +258,8 @@ import type {
   TierKey,
   TierPricing
 } from '@/platform/cloud/subscription/constants/tierPricing'
+import { isPlanDowngrade } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
+import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import { isCloud } from '@/platform/distribution/types'
 import {
   FirebaseAuthStoreError,
@@ -269,8 +271,6 @@ type SubscriptionTier = components['schemas']['SubscriptionTier']
 type CheckoutTierKey = Exclude<TierKey, 'founder'>
 type CheckoutTier = CheckoutTierKey | `${CheckoutTierKey}-yearly`
 
-type BillingCycle = 'monthly' | 'yearly'
-
 const getCheckoutTier = (
   tierKey: CheckoutTierKey,
   billingCycle: BillingCycle
@@ -342,6 +342,15 @@ const currentTierKey = computed<TierKey | null>(() =>
   subscriptionTier.value ? TIER_TO_KEY[subscriptionTier.value] : null
 )
 
+const currentPlanDescriptor = computed(() => {
+  if (!currentTierKey.value) return null
+
+  return {
+    tierKey: currentTierKey.value,
+    billingCycle: isYearlySubscription.value ? 'yearly' : 'monthly'
+  } as const
+})
+
 const isCurrentPlan = (tierKey: CheckoutTierKey): boolean => {
   if (!currentTierKey.value) return false
 
@@ -443,7 +452,23 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
       if (isActiveSubscription.value) {
         // Pass the target tier to create a deep link to subscription update confirmation
         const checkoutTier = getCheckoutTier(tierKey, currentBillingCycle.value)
-        await accessBillingPortal(checkoutTier)
+        const targetPlan = {
+          tierKey,
+          billingCycle: currentBillingCycle.value
+        }
+        const downgrade =
+          currentPlanDescriptor.value &&
+          isPlanDowngrade({
+            current: currentPlanDescriptor.value,
+            target: targetPlan
+          })
+
+        if (downgrade) {
+          // TODO(COMFY-StripeProration): Remove once backend checkout creation mirrors portal proration ("change at billing end")
+          await accessBillingPortal()
+        } else {
+          await accessBillingPortal(checkoutTier)
+        }
       } else {
         const response = await initiateCheckout(tierKey)
         if (response.checkout_url) {

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

@@ -84,8 +84,8 @@
             </div>
           </div>
 
-          <div class="grid grid-cols-1 gap-6 pt-9 lg:grid-cols-2">
-            <div class="flex flex-col flex-1">
+          <div class="flex flex-col lg:flex-row gap-6 pt-9">
+            <div class="flex flex-col shrink-0">
               <div class="flex flex-col gap-3">
                 <div
                   :class="
@@ -98,11 +98,11 @@
                   <Button
                     variant="muted-textonly"
                     size="icon-sm"
-                    class="absolute top-0.5 right-0"
+                    class="absolute top-4 right-4"
                     :loading="isLoadingBalance"
                     @click="handleRefresh"
                   >
-                    <i class="pi pi-sync text-text-secondary text-xs" />
+                    <i class="pi pi-sync text-text-secondary text-sm" />
                   </Button>
 
                   <div class="flex flex-col gap-2">
@@ -120,60 +120,39 @@
                   </div>
 
                   <!-- Credit Breakdown -->
-                  <div class="flex flex-col gap-1">
-                    <div class="flex items-center gap-4">
-                      <Skeleton
-                        v-if="isLoadingBalance"
-                        width="3rem"
-                        height="1rem"
-                      />
-                      <div
-                        v-else
-                        class="text-sm font-bold w-12 shrink-0 text-left text-muted"
-                      >
-                        {{ monthlyBonusCredits }}
-                      </div>
-                      <div class="flex items-center gap-1 min-w-0">
-                        <div
-                          class="text-sm truncate text-muted"
-                          :title="creditsRemainingLabel"
-                        >
+                  <table class="text-sm text-muted">
+                    <tbody>
+                      <tr>
+                        <td class="pr-4 font-bold text-left align-middle">
+                          <Skeleton
+                            v-if="isLoadingBalance"
+                            width="5rem"
+                            height="1rem"
+                          />
+                          <span v-else>{{ includedCreditsDisplay }}</span>
+                        </td>
+                        <td class="align-middle" :title="creditsRemainingLabel">
                           {{ creditsRemainingLabel }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="flex items-center gap-4">
-                      <Skeleton
-                        v-if="isLoadingBalance"
-                        width="3rem"
-                        height="1rem"
-                      />
-                      <div
-                        v-else
-                        class="text-sm font-bold w-12 shrink-0 text-left text-muted"
-                      >
-                        {{ prepaidCredits }}
-                      </div>
-                      <div class="flex items-center gap-1 min-w-0">
-                        <div
-                          class="text-sm truncate text-muted"
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="pr-4 font-bold text-left align-middle">
+                          <Skeleton
+                            v-if="isLoadingBalance"
+                            width="3rem"
+                            height="1rem"
+                          />
+                          <span v-else>{{ prepaidCredits }}</span>
+                        </td>
+                        <td
+                          class="align-middle"
                           :title="$t('subscription.creditsYouveAdded')"
                         >
                           {{ $t('subscription.creditsYouveAdded') }}
-                        </div>
-                        <Button
-                          v-tooltip="$t('subscription.prepaidCreditsInfo')"
-                          variant="muted-textonly"
-                          size="icon-sm"
-                          class="h-4 w-4 shrink-0 rounded-full"
-                        >
-                          <i
-                            class="pi pi-question-circle text-text-secondary text-xs"
-                          />
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
 
                   <div class="flex items-center justify-between">
                     <a
@@ -197,7 +176,7 @@
               </div>
             </div>
 
-            <div class="flex flex-col gap-2 flex-1">
+            <div class="flex flex-col gap-2">
               <div class="text-sm text-text-primary">
                 {{ $t('subscription.yourPlanIncludes') }}
               </div>
@@ -288,7 +267,7 @@
 <script setup lang="ts">
 import Skeleton from 'primevue/skeleton'
 import TabPanel from 'primevue/tabpanel'
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
@@ -320,6 +299,7 @@ const {
   formattedEndDate,
   subscriptionTier,
   subscriptionTierName,
+  subscriptionStatus,
   isYearlySubscription,
   handleInvoiceHistory
 } = useSubscription()
@@ -334,10 +314,34 @@ const tierKey = computed(() => {
 const tierPrice = computed(() =>
   getTierPrice(tierKey.value, isYearlySubscription.value)
 )
+
+const refillsDate = computed(() => {
+  if (!subscriptionStatus.value?.renewal_date) return ''
+  const date = new Date(subscriptionStatus.value.renewal_date)
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = String(date.getFullYear()).slice(-2)
+  return `${month}/${day}/${year}`
+})
+
 const creditsRemainingLabel = computed(() =>
   isYearlySubscription.value
-    ? t('subscription.creditsRemainingThisYear')
-    : t('subscription.creditsRemainingThisMonth')
+    ? t('subscription.creditsRemainingThisYear', {
+        date: refillsDate.value
+      })
+    : t('subscription.creditsRemainingThisMonth', {
+        date: refillsDate.value
+      })
+)
+
+const planTotalCredits = computed(() => {
+  const credits = getTierCredits(tierKey.value)
+  const total = isYearlySubscription.value ? credits * 12 : credits
+  return n(total)
+})
+
+const includedCreditsDisplay = computed(
+  () => `${monthlyBonusCredits.value} / ${planTotalCredits.value}`
 )
 
 // Tier benefits for v-for loop
@@ -354,14 +358,6 @@ const tierBenefits = computed((): Benefit[] => {
   const key = tierKey.value
 
   const benefits: Benefit[] = [
-    {
-      key: 'monthlyCredits',
-      type: 'metric',
-      value: n(getTierCredits(key)),
-      label: isYearlySubscription.value
-        ? t('subscription.yearlyCreditsLabel')
-        : t('subscription.monthlyCreditsLabel')
-    },
     {
       key: 'maxDuration',
       type: 'metric',
@@ -402,6 +398,35 @@ const {
   handleLearnMoreClick
 } = useSubscriptionActions()
 
+// Focus-based polling: refresh balance when user returns from Stripe checkout
+const PENDING_TOPUP_KEY = 'pending_topup_timestamp'
+const TOPUP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes
+
+function handleWindowFocus() {
+  const timestampStr = localStorage.getItem(PENDING_TOPUP_KEY)
+  if (!timestampStr) return
+
+  const timestamp = parseInt(timestampStr, 10)
+
+  // Clear expired tracking (older than 5 minutes)
+  if (Date.now() - timestamp > TOPUP_EXPIRY_MS) {
+    localStorage.removeItem(PENDING_TOPUP_KEY)
+    return
+  }
+
+  // Refresh and clear tracking to prevent repeated calls
+  void handleRefresh()
+  localStorage.removeItem(PENDING_TOPUP_KEY)
+}
+
+onMounted(() => {
+  window.addEventListener('focus', handleWindowFocus)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('focus', handleWindowFocus)
+})
+
 const handleOpenPartnerNodesInfo = () => {
   window.open(
     buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),

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

@@ -128,7 +128,6 @@ import PricingTable from '@/platform/cloud/subscription/components/PricingTable.
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 
@@ -140,7 +139,8 @@ const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const { fetchStatus, isActiveSubscription } = useSubscription()
+const { fetchStatus, isActiveSubscription, isSubscriptionEnabled } =
+  useSubscription()
 
 // Legacy price for non-tier flow with locale-aware formatting
 const formattedMonthlyPrice = new Intl.NumberFormat(
@@ -156,9 +156,7 @@ const commandStore = useCommandStore()
 const telemetry = useTelemetry()
 
 // Always show custom pricing table for cloud subscriptions
-const showCustomPricingTable = computed(
-  () => isCloud && window.__CONFIG__?.subscription_required
-)
+const showCustomPricingTable = computed(() => isSubscriptionEnabled())
 
 const POLL_INTERVAL_MS = 3000
 const MAX_POLL_ATTEMPTS = 3

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -121,7 +121,11 @@ function useSubscriptionInternal() {
     void showSubscriptionRequiredDialog()
   }
 
-  const shouldWatchCancellation = (): boolean =>
+  /**
+   * Whether cloud subscription mode is enabled (cloud distribution with subscription_required config).
+   * Use to determine which UI to show (SubscriptionPanel vs LegacyCreditsPanel).
+   */
+  const isSubscriptionEnabled = (): boolean =>
     Boolean(isCloud && window.__CONFIG__?.subscription_required)
 
   const { startCancellationWatcher, stopCancellationWatcher } =
@@ -130,7 +134,7 @@ function useSubscriptionInternal() {
       isActiveSubscription: isSubscribedOrIsNotCloud,
       subscriptionStatus,
       telemetry,
-      shouldWatchCancellation
+      shouldWatchCancellation: isSubscriptionEnabled
     })
 
   const manageSubscription = async () => {
@@ -249,6 +253,9 @@ function useSubscriptionInternal() {
     subscriptionTierName,
     subscriptionStatus,
 
+    // Utilities
+    isSubscriptionEnabled,
+
     // Actions
     subscribe,
     fetchStatus,

src/platform/cloud/subscription/utils/subscriptionTierRank.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+
+import { getPlanRank, isPlanDowngrade } from './subscriptionTierRank'
+
+describe('subscriptionTierRank', () => {
+  it('returns consistent order for ranked plans', () => {
+    const yearlyPro = getPlanRank({ tierKey: 'pro', billingCycle: 'yearly' })
+    const monthlyStandard = getPlanRank({
+      tierKey: 'standard',
+      billingCycle: 'monthly'
+    })
+
+    expect(yearlyPro).toBeLessThan(monthlyStandard)
+  })
+
+  it('identifies downgrades correctly', () => {
+    const result = isPlanDowngrade({
+      current: { tierKey: 'pro', billingCycle: 'yearly' },
+      target: { tierKey: 'creator', billingCycle: 'monthly' }
+    })
+
+    expect(result).toBe(true)
+  })
+
+  it('treats lateral or upgrade moves as non-downgrades', () => {
+    expect(
+      isPlanDowngrade({
+        current: { tierKey: 'standard', billingCycle: 'monthly' },
+        target: { tierKey: 'creator', billingCycle: 'monthly' }
+      })
+    ).toBe(false)
+
+    expect(
+      isPlanDowngrade({
+        current: { tierKey: 'creator', billingCycle: 'monthly' },
+        target: { tierKey: 'creator', billingCycle: 'monthly' }
+      })
+    ).toBe(false)
+  })
+
+  it('treats unknown plans (e.g., founder) as non-downgrade cases', () => {
+    const result = isPlanDowngrade({
+      current: { tierKey: 'founder', billingCycle: 'monthly' },
+      target: { tierKey: 'standard', billingCycle: 'monthly' }
+    })
+
+    expect(result).toBe(false)
+  })
+})

src/platform/cloud/subscription/utils/subscriptionTierRank.ts

@@ -0,0 +1,58 @@
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+
+export type BillingCycle = 'monthly' | 'yearly'
+
+type RankedTierKey = Exclude<TierKey, 'founder'>
+type RankedPlanKey = `${BillingCycle}-${RankedTierKey}`
+
+interface PlanDescriptor {
+  tierKey: TierKey
+  billingCycle: BillingCycle
+}
+
+const PLAN_ORDER: RankedPlanKey[] = [
+  'yearly-pro',
+  'yearly-creator',
+  'yearly-standard',
+  'monthly-pro',
+  'monthly-creator',
+  'monthly-standard'
+]
+
+const PLAN_RANK = PLAN_ORDER.reduce<Map<RankedPlanKey, number>>(
+  (acc, plan, index) => acc.set(plan, index),
+  new Map()
+)
+
+const toRankedPlanKey = (
+  tierKey: TierKey,
+  billingCycle: BillingCycle
+): RankedPlanKey | null => {
+  if (tierKey === 'founder') return null
+  return `${billingCycle}-${tierKey}` as RankedPlanKey
+}
+
+export const getPlanRank = ({
+  tierKey,
+  billingCycle
+}: PlanDescriptor): number => {
+  const planKey = toRankedPlanKey(tierKey, billingCycle)
+  if (!planKey) return Number.POSITIVE_INFINITY
+
+  return PLAN_RANK.get(planKey) ?? Number.POSITIVE_INFINITY
+}
+
+interface DowngradeCheckParams {
+  current: PlanDescriptor
+  target: PlanDescriptor
+}
+
+export const isPlanDowngrade = ({
+  current,
+  target
+}: DowngradeCheckParams): boolean => {
+  const currentRank = getPlanRank(current)
+  const targetRank = getPlanRank(target)
+
+  return targetRank > currentRank
+}

src/platform/remoteConfig/types.ts

@@ -35,8 +35,10 @@ export type RemoteConfig = {
   firebase_config?: FirebaseRuntimeConfig
   telemetry_disabled_events?: TelemetryEventName[]
   model_upload_button_enabled?: boolean
-  asset_update_options_enabled?: boolean
+  asset_deletion_enabled?: boolean
+  asset_rename_enabled?: boolean
   private_models_enabled?: boolean
   onboarding_survey_enabled?: boolean
   huggingface_model_import_enabled?: boolean
+  async_model_upload_enabled?: boolean
 }

src/platform/settings/constants/coreSettings.ts

@@ -27,7 +27,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Validation.Workflows',
     name: 'Validate workflows',
     type: 'boolean',
-    defaultValue: isCloud ? false : true
+    defaultValue: false
   },
   {
     id: 'Comfy.NodeSearchBoxImpl',

src/platform/tasks/services/taskService.ts

@@ -0,0 +1,70 @@
+/**
+ * Task Service for polling background task status.
+ *
+ * CAVEAT: The `payload` and `result` schemas below are specific to
+ * `task:download_file` tasks. Other task types may have different
+ * payload/result structures. We are not generalizing this until
+ * additional use cases arise.
+ */
+import { z } from 'zod'
+import { fromZodError } from 'zod-validation-error'
+
+import { api } from '@/scripts/api'
+
+const TASKS_ENDPOINT = '/tasks'
+
+const zTaskStatus = z.enum(['created', 'running', 'completed', 'failed'])
+
+const zDownloadFileResult = z.object({
+  success: z.boolean(),
+  file_path: z.string().optional(),
+  bytes_downloaded: z.number().optional(),
+  content_type: z.string().optional(),
+  hash: z.string().optional(),
+  filename: z.string().optional(),
+  asset_id: z.string().optional(),
+  metadata: z.record(z.unknown()).optional(),
+  error: z.string().optional()
+})
+
+const zTaskResponse = z.object({
+  id: z.string().uuid(),
+  idempotency_key: z.string(),
+  task_name: z.string(),
+  payload: z.record(z.unknown()),
+  status: zTaskStatus,
+  result: zDownloadFileResult.optional(),
+  error_message: z.string().optional(),
+  create_time: z.string().datetime(),
+  update_time: z.string().datetime(),
+  started_at: z.string().datetime().optional(),
+  completed_at: z.string().datetime().optional()
+})
+
+export type TaskResponse = z.infer<typeof zTaskResponse>
+
+function createTaskService() {
+  async function getTask(taskId: string): Promise<TaskResponse> {
+    const res = await api.fetchApi(`${TASKS_ENDPOINT}/${taskId}`)
+
+    if (!res.ok) {
+      if (res.status === 404) {
+        throw new Error(`Task not found: ${taskId}`)
+      }
+      throw new Error(`Failed to get task ${taskId}: ${res.status}`)
+    }
+
+    const data = await res.json()
+    const result = zTaskResponse.safeParse(data)
+
+    if (!result.success) {
+      throw new Error(fromZodError(result.error).message)
+    }
+
+    return result.data
+  }
+
+  return { getTask }
+}
+
+export const taskService = createTaskService()

src/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -99,7 +99,10 @@
       </span>
     </div>
     <!-- Multiple Images Navigation -->
-    <div v-if="hasMultipleImages" class="flex justify-center gap-1 pt-4">
+    <div
+      v-if="hasMultipleImages"
+      class="flex flex-wrap justify-center gap-1 pt-4"
+    >
       <button
         v-for="(_, index) in imageUrls"
         :key="index"

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -124,7 +124,7 @@
 
     <!-- Resize handle (bottom-right only) -->
     <div
-      v-if="!isCollapsed"
+      v-if="!isCollapsed && nodeData.resizable !== false"
       role="button"
       :aria-label="t('g.resizeFromBottomRight')"
       :class="cn(baseResizeHandleClasses, 'right-0 bottom-0 cursor-se-resize')"
@@ -341,6 +341,7 @@ const handleResizePointerDown = (event: PointerEvent) => {
   if (event.button !== 0) return
   if (!shouldHandleNodePointerEvents.value) return
   if (nodeData.flags?.pinned) return
+  if (nodeData.resizable === false) return
   startResize(event)
 }
 

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -203,10 +203,13 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 })
 
 const gridTemplateRows = computed((): string => {
-  const widgets = toValue(processedWidgets)
-  return widgets
-    .filter((w) => !w.simplified.options?.hidden)
-    .map((w) => (shouldExpand(w.type) ? 'auto' : 'min-content'))
+  if (!nodeData?.widgets) return ''
+  const processedNames = new Set(toValue(processedWidgets).map((w) => w.name))
+  return nodeData.widgets
+    .filter((w) => processedNames.has(w.name) && !w.options?.hidden)
+    .map((w) =>
+      shouldExpand(w.type) || w.hasLayoutSize ? 'auto' : 'min-content'
+    )
     .join(' ')
 })
 </script>

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

@@ -31,10 +31,17 @@ const precision = computed(() => {
 
 // Calculate the step value based on precision or widget options
 const stepValue = computed(() => {
-  // Use step2 (correct input spec value) instead of step (legacy 10x value)
+  // Use step2 (correct input spec value) if available
   if (props.widget.options?.step2 !== undefined) {
     return Number(props.widget.options.step2)
   }
+  // Use step / 10 for custom large step values (> 10) to match litegraph behavior
+  // This is important for extensions like Impact Pack that use custom step values (e.g., 640)
+  // We skip default step values (1, 10) to avoid affecting normal widgets
+  const step = props.widget.options?.step
+  if (step !== undefined && step > 10) {
+    return Number(step) / 10
+  }
   // Otherwise, derive from precision
   if (precision.value !== undefined) {
     if (precision.value === 0) {

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

@@ -17,6 +17,7 @@ const props = defineProps<{
 }>()
 
 const canvasEl = ref()
+const containerHeight = ref(20)
 
 const canvas: LGraphCanvas = useCanvasStore().canvas as LGraphCanvas
 let node: LGraphNode | undefined
@@ -52,9 +53,19 @@ onBeforeUnmount(() => {
 function draw() {
   if (!widgetInstance || !node) return
   const width = canvasEl.value.parentElement.clientWidth
-  const height = widgetInstance.computeSize
-    ? widgetInstance.computeSize(width)[1]
-    : 20
+  // Priority: computedHeight (from litegraph) > computeLayoutSize > computeSize
+  let height = 20
+  if (widgetInstance.computedHeight) {
+    height = widgetInstance.computedHeight
+  } else if (widgetInstance.computeLayoutSize) {
+    height = widgetInstance.computeLayoutSize(node).minHeight
+  } else if (widgetInstance.computeSize) {
+    height = widgetInstance.computeSize(width)[1]
+  }
+  containerHeight.value = height
+  // Set node.canvasHeight for legacy widgets that use it (e.g., Impact Pack)
+  // @ts-expect-error canvasHeight is a custom property used by some extensions
+  node.canvasHeight = height
   widgetInstance.y = 0
   canvasEl.value.height = (height + 2) * scaleFactor
   canvasEl.value.width = width * scaleFactor
@@ -87,10 +98,13 @@ function handleMove(e: PointerEvent) {
 }
 </script>
 <template>
-  <div class="relative mx-[-12px] min-w-0 basis-0">
+  <div
+    class="relative mx-[-12px] min-w-0 basis-0"
+    :style="{ minHeight: `${containerHeight}px` }"
+  >
     <canvas
       ref="canvasEl"
-      class="absolute mt-[-13px] w-full cursor-crosshair"
+      class="absolute w-full cursor-crosshair"
       @pointerdown="handleDown"
       @pointerup="handleUp"
       @pointermove="handleMove"

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

@@ -12,6 +12,7 @@
   />
   <WidgetWithControl
     v-else-if="widget.controlWidget"
+    v-model="modelValue"
     :component="WidgetSelectDefault"
     :widget="widget as StringControlWidget"
   />

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

@@ -60,8 +60,9 @@ const combinedProps = computed(() => ({
 }))
 
 const getAssetData = () => {
-  if (props.isAssetMode && props.nodeType) {
-    return useAssetWidgetData(toRef(() => props.nodeType))
+  const nodeType = props.widget.options?.nodeType ?? props.nodeType
+  if (props.isAssetMode && nodeType) {
+    return useAssetWidgetData(toRef(nodeType))
   }
   return null
 }

src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts

@@ -368,7 +368,8 @@ export const useImagePreviewWidget = () => {
   ) => {
     return node.addCustomWidget(
       new ImagePreviewWidget(node, inputSpec.name, {
-        serialize: false
+        serialize: false,
+        canvasOnly: true
       })
     )
   }

src/renderer/extensions/vueNodes/widgets/composables/useNumberStepCalculation.ts

@@ -2,6 +2,7 @@ import { computed, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 
 interface NumberWidgetOptions {
+  step?: number
   step2?: number
   precision?: number
 }
@@ -17,10 +18,17 @@ export function useNumberStepCalculation(
 ) {
   return computed(() => {
     const precision = toValue(precisionArg)
-    // Use step2 (correct input spec value) instead of step (legacy 10x value)
+    // Use step2 (correct input spec value) if available
     if (options?.step2 !== undefined) {
       return Number(options.step2)
     }
+    // Use step / 10 for custom large step values (> 10) to match litegraph behavior
+    // This is important for extensions like Impact Pack that use custom step values (e.g., 640)
+    // We skip default step values (1, 10) to avoid affecting normal widgets
+    const step = options?.step
+    if (step !== undefined && step > 10) {
+      return Number(step) / 10
+    }
 
     if (precision === undefined) {
       return returnUndefinedForDefault ? undefined : 0
@@ -29,7 +37,9 @@ export function useNumberStepCalculation(
     if (precision === 0) return 1
 
     // For precision > 0, step = 1 / (10^precision)
-    const step = 1 / Math.pow(10, precision)
-    return returnUndefinedForDefault ? step : Number(step.toFixed(precision))
+    const calculatedStep = 1 / Math.pow(10, precision)
+    return returnUndefinedForDefault
+      ? calculatedStep
+      : Number(calculatedStep.toFixed(precision))
   })
 }

src/schemas/apiSchema.ts

@@ -135,6 +135,17 @@ const zLogRawResponse = z.object({
 
 const zFeatureFlagsWsMessage = z.record(z.string(), z.any())
 
+const zAssetDownloadWsMessage = z.object({
+  task_id: z.string(),
+  asset_name: z.string(),
+  bytes_total: z.number(),
+  bytes_downloaded: z.number(),
+  progress: z.number(),
+  status: z.enum(['created', 'running', 'completed', 'failed']),
+  asset_id: z.string().optional(),
+  error: z.string().optional()
+})
+
 export type StatusWsMessageStatus = z.infer<typeof zStatusWsMessageStatus>
 export type StatusWsMessage = z.infer<typeof zStatusWsMessage>
 export type ProgressWsMessage = z.infer<typeof zProgressWsMessage>
@@ -154,6 +165,7 @@ export type ProgressTextWsMessage = z.infer<typeof zProgressTextWsMessage>
 export type NodeProgressState = z.infer<typeof zNodeProgressState>
 export type ProgressStateWsMessage = z.infer<typeof zProgressStateWsMessage>
 export type FeatureFlagsWsMessage = z.infer<typeof zFeatureFlagsWsMessage>
+export type AssetDownloadWsMessage = z.infer<typeof zAssetDownloadWsMessage>
 // End of ws messages
 
 export type NotificationWsMessage = z.infer<typeof zNotificationWsMessage>

src/scripts/api.ts

@@ -17,6 +17,7 @@ import type {
   NodeId
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type {
+  AssetDownloadWsMessage,
   EmbeddingsResponse,
   ExecutedWsMessage,
   ExecutingWsMessage,
@@ -153,6 +154,7 @@ interface BackendApiCalls {
   progress_text: ProgressTextWsMessage
   progress_state: ProgressStateWsMessage
   feature_flags: FeatureFlagsWsMessage
+  asset_download: AssetDownloadWsMessage
 }
 
 /** Dictionary of all api calls */
@@ -664,6 +666,7 @@ export class ComfyApi extends EventTarget {
             case 'logs':
             case 'b_preview':
             case 'notification':
+            case 'asset_download':
               this.dispatchCustomEvent(msg.type, msg.data)
               break
             case 'feature_flags':

src/services/dialogService.ts

@@ -25,9 +25,7 @@ import type {
   DialogComponentProps,
   ShowDialogOptions
 } from '@/stores/dialogStore'
-import ManagerProgressDialogContent from '@/workbench/extensions/manager/components/ManagerProgressDialogContent.vue'
-import ManagerProgressFooter from '@/workbench/extensions/manager/components/ManagerProgressFooter.vue'
-import ManagerProgressHeader from '@/workbench/extensions/manager/components/ManagerProgressHeader.vue'
+
 import ManagerDialogContent from '@/workbench/extensions/manager/components/manager/ManagerDialogContent.vue'
 import ManagerHeader from '@/workbench/extensions/manager/components/manager/ManagerHeader.vue'
 import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
@@ -229,30 +227,6 @@ export const useDialogService = () => {
     })
   }
 
-  function showManagerProgressDialog(options?: {
-    props?: InstanceType<typeof ManagerProgressDialogContent>['$props']
-  }) {
-    return dialogStore.showDialog({
-      key: 'global-manager-progress-dialog',
-      component: ManagerProgressDialogContent,
-      headerComponent: ManagerProgressHeader,
-      footerComponent: ManagerProgressFooter,
-      props: options?.props,
-      priority: 2,
-      dialogComponentProps: {
-        closable: false,
-        modal: false,
-        position: 'bottom',
-        pt: {
-          root: { class: 'w-[80%] max-w-2xl mx-auto border-none' },
-          content: { class: 'p-0!' },
-          header: { class: 'p-0! border-none' },
-          footer: { class: 'p-0! border-none' }
-        }
-      }
-    })
-  }
-
   /**
    * Shows a dialog requiring sign in for API nodes
    * @returns Promise that resolves to true if user clicks login, false if cancelled
@@ -391,7 +365,8 @@ export const useDialogService = () => {
         headless: true,
         pt: {
           header: { class: 'p-0! hidden' },
-          content: { class: 'p-0! m-0!' }
+          content: { class: 'p-0! m-0! rounded-2xl' },
+          root: { class: 'rounded-2xl' }
         }
       }
     })
@@ -440,16 +415,6 @@ export const useDialogService = () => {
     }
   }
 
-  function toggleManagerProgressDialog(
-    props?: ComponentAttrs<typeof ManagerProgressDialogContent>
-  ) {
-    if (dialogStore.isDialogOpen('global-manager-progress-dialog')) {
-      dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
-    } else {
-      showManagerProgressDialog({ props })
-    }
-  }
-
   function showLayoutDialog(options: {
     key: string
     component: Component
@@ -548,7 +513,6 @@ export const useDialogService = () => {
     showAboutDialog,
     showExecutionErrorDialog,
     showManagerDialog,
-    showManagerProgressDialog,
     showApiNodesSignInDialog,
     showSignInDialog,
     showSubscriptionRequiredDialog,
@@ -559,7 +523,6 @@ export const useDialogService = () => {
     showErrorDialog,
     confirm,
     toggleManagerDialog,
-    toggleManagerProgressDialog,
     showLayoutDialog,
     showNodeConflictDialog
   }

src/stores/README.md

@@ -109,7 +109,6 @@ The following table lists ALL 46 store instances in the system as of 2025-09-01:
 | aboutPanelStore.ts | useAboutPanelStore | Manages the About panel state and badges | UI |
 | apiKeyAuthStore.ts | useApiKeyAuthStore | Handles API key authentication | Auth |
 | comfyManagerStore.ts | useComfyManagerStore | Manages ComfyUI application state | Core |
-| comfyManagerStore.ts | useManagerProgressDialogStore | Manages manager progress dialog state | UI |
 | comfyRegistryStore.ts | useComfyRegistryStore | Handles extensions registry | Registry |
 | commandStore.ts | useCommandStore | Manages commands and command execution | Core |
 | dialogStore.ts | useDialogStore | Controls dialog/modal display and state | UI |

src/stores/assetDownloadStore.test.ts

@@ -0,0 +1,239 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { TaskResponse } from '@/platform/tasks/services/taskService'
+import { taskService } from '@/platform/tasks/services/taskService'
+import type { AssetDownloadWsMessage } from '@/schemas/apiSchema'
+import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
+
+type DownloadEventHandler = (e: CustomEvent<AssetDownloadWsMessage>) => void
+
+const eventHandler = vi.hoisted(() => {
+  const state: { current: DownloadEventHandler | null } = { current: null }
+  return state
+})
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    addEventListener: vi.fn((_event: string, handler: DownloadEventHandler) => {
+      eventHandler.current = handler
+    }),
+    removeEventListener: vi.fn()
+  }
+}))
+
+vi.mock('@/platform/tasks/services/taskService', () => ({
+  taskService: {
+    getTask: vi.fn()
+  }
+}))
+
+function createDownloadMessage(
+  overrides: Partial<AssetDownloadWsMessage> = {}
+): AssetDownloadWsMessage {
+  return {
+    task_id: 'task-123',
+    asset_id: 'asset-456',
+    asset_name: 'model.safetensors',
+    bytes_total: 1000,
+    bytes_downloaded: 500,
+    progress: 50,
+    status: 'running',
+    ...overrides
+  }
+}
+
+function dispatch(msg: AssetDownloadWsMessage) {
+  if (!eventHandler.current) {
+    throw new Error(
+      'Event handler not registered. Call useAssetDownloadStore() first.'
+    )
+  }
+  eventHandler.current(new CustomEvent('asset_download', { detail: msg }))
+}
+
+describe('useAssetDownloadStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.useFakeTimers({ shouldAdvanceTime: false })
+    vi.resetAllMocks()
+    eventHandler.current = null
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('handleAssetDownload', () => {
+    it('tracks running downloads', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(createDownloadMessage())
+
+      expect(store.activeDownloads).toHaveLength(1)
+      expect(store.activeDownloads[0].taskId).toBe('task-123')
+      expect(store.activeDownloads[0].progress).toBe(50)
+    })
+
+    it('moves download to finished when completed', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(createDownloadMessage({ status: 'running' }))
+      expect(store.activeDownloads).toHaveLength(1)
+
+      dispatch(createDownloadMessage({ status: 'completed', progress: 100 }))
+
+      expect(store.activeDownloads).toHaveLength(0)
+      expect(store.finishedDownloads).toHaveLength(1)
+      expect(store.finishedDownloads[0].status).toBe('completed')
+    })
+
+    it('moves download to finished when failed', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(createDownloadMessage({ status: 'running' }))
+      dispatch(
+        createDownloadMessage({ status: 'failed', error: 'Network error' })
+      )
+
+      expect(store.activeDownloads).toHaveLength(0)
+      expect(store.finishedDownloads).toHaveLength(1)
+      expect(store.finishedDownloads[0].status).toBe('failed')
+      expect(store.finishedDownloads[0].error).toBe('Network error')
+    })
+
+    it('ignores duplicate terminal state messages', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(createDownloadMessage({ status: 'completed', progress: 100 }))
+      dispatch(createDownloadMessage({ status: 'completed', progress: 100 }))
+
+      expect(store.finishedDownloads).toHaveLength(1)
+    })
+  })
+
+  describe('trackDownload', () => {
+    it('associates task with model type for completion tracking', () => {
+      const store = useAssetDownloadStore()
+
+      store.trackDownload('task-123', 'checkpoints', 'model.safetensors')
+      dispatch(createDownloadMessage({ status: 'completed', progress: 100 }))
+
+      expect(store.lastCompletedDownload).toMatchObject({
+        taskId: 'task-123',
+        modelType: 'checkpoints'
+      })
+    })
+
+    it('handles out-of-order messages where completed arrives before progress', () => {
+      const store = useAssetDownloadStore()
+
+      store.trackDownload('task-123', 'checkpoints', 'model.safetensors')
+
+      dispatch(createDownloadMessage({ status: 'completed', progress: 100 }))
+
+      dispatch(createDownloadMessage({ status: 'running', progress: 50 }))
+
+      expect(store.activeDownloads).toHaveLength(0)
+      expect(store.finishedDownloads).toHaveLength(1)
+      expect(store.finishedDownloads[0].status).toBe('completed')
+      expect(store.lastCompletedDownload?.modelType).toBe('checkpoints')
+    })
+  })
+
+  describe('stale download polling', () => {
+    function createTaskResponse(
+      overrides: Partial<TaskResponse> = {}
+    ): TaskResponse {
+      return {
+        id: 'task-123',
+        idempotency_key: 'key-123',
+        task_name: 'task:download_file',
+        payload: {},
+        status: 'completed',
+        create_time: new Date().toISOString(),
+        update_time: new Date().toISOString(),
+        result: {
+          success: true,
+          asset_id: 'asset-456',
+          filename: 'model.safetensors',
+          bytes_downloaded: 1000
+        },
+        ...overrides
+      }
+    }
+
+    it('polls and completes stale downloads', async () => {
+      const store = useAssetDownloadStore()
+
+      vi.mocked(taskService.getTask).mockResolvedValue(createTaskResponse())
+
+      dispatch(createDownloadMessage({ status: 'running' }))
+      expect(store.activeDownloads).toHaveLength(1)
+
+      await vi.advanceTimersByTimeAsync(45_000)
+
+      expect(taskService.getTask).toHaveBeenCalledWith('task-123')
+      expect(store.activeDownloads).toHaveLength(0)
+      expect(store.finishedDownloads[0].status).toBe('completed')
+    })
+
+    it('polls and marks failed downloads', async () => {
+      const store = useAssetDownloadStore()
+
+      vi.mocked(taskService.getTask).mockResolvedValue(
+        createTaskResponse({
+          status: 'failed',
+          error_message: 'Download failed',
+          result: { success: false, error: 'Network error' }
+        })
+      )
+
+      dispatch(createDownloadMessage({ status: 'running' }))
+      await vi.advanceTimersByTimeAsync(45_000)
+
+      expect(store.activeDownloads).toHaveLength(0)
+      expect(store.finishedDownloads[0].status).toBe('failed')
+      expect(store.finishedDownloads[0].error).toBe('Download failed')
+    })
+
+    it('does not complete if task still running', async () => {
+      const store = useAssetDownloadStore()
+
+      vi.mocked(taskService.getTask).mockResolvedValue(
+        createTaskResponse({ status: 'running', result: undefined })
+      )
+
+      dispatch(createDownloadMessage({ status: 'running' }))
+      await vi.advanceTimersByTimeAsync(45_000)
+
+      expect(taskService.getTask).toHaveBeenCalled()
+      expect(store.activeDownloads).toHaveLength(1)
+    })
+
+    it('continues tracking on polling error', async () => {
+      const store = useAssetDownloadStore()
+
+      vi.mocked(taskService.getTask).mockRejectedValue(new Error('Not found'))
+      dispatch(createDownloadMessage({ status: 'running' }))
+
+      await vi.advanceTimersByTimeAsync(45_000)
+
+      expect(store.activeDownloads).toHaveLength(1)
+    })
+  })
+
+  describe('clearFinishedDownloads', () => {
+    it('removes all finished downloads', () => {
+      const store = useAssetDownloadStore()
+
+      dispatch(createDownloadMessage({ status: 'completed', progress: 100 }))
+      expect(store.finishedDownloads).toHaveLength(1)
+
+      store.clearFinishedDownloads()
+
+      expect(store.finishedDownloads).toHaveLength(0)
+    })
+  })
+})

src/stores/assetDownloadStore.ts

@@ -0,0 +1,178 @@
+import { useIntervalFn } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { taskService } from '@/platform/tasks/services/taskService'
+import type { AssetDownloadWsMessage } from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
+
+export interface AssetDownload {
+  taskId: string
+  assetName: string
+  bytesTotal: number
+  bytesDownloaded: number
+  progress: number
+  status: 'created' | 'running' | 'completed' | 'failed'
+  lastUpdate: number
+  assetId?: string
+  error?: string
+  modelType?: string
+}
+
+interface CompletedDownload {
+  taskId: string
+  modelType: string
+  timestamp: number
+}
+const STALE_THRESHOLD_MS = 10_000
+const POLL_INTERVAL_MS = 10_000
+
+function generateDownloadTrackingPlaceholder(
+  taskId: string,
+  modelType: string,
+  assetName: string
+): AssetDownload {
+  return {
+    taskId,
+    modelType,
+    assetName,
+    bytesTotal: 0,
+    bytesDownloaded: 0,
+    progress: 0,
+    status: 'created',
+    lastUpdate: Date.now()
+  }
+}
+
+export const useAssetDownloadStore = defineStore('assetDownload', () => {
+  const downloads = ref<Map<string, AssetDownload>>(new Map())
+  const lastCompletedDownload = ref<CompletedDownload | null>(null)
+
+  const downloadList = computed(() => Array.from(downloads.value.values()))
+  const activeDownloads = computed(() =>
+    downloadList.value.filter(
+      (d) => d.status === 'created' || d.status === 'running'
+    )
+  )
+  const finishedDownloads = computed(() =>
+    downloadList.value.filter(
+      (d) => d.status === 'completed' || d.status === 'failed'
+    )
+  )
+  const hasActiveDownloads = computed(() => activeDownloads.value.length > 0)
+  const hasDownloads = computed(() => downloads.value.size > 0)
+
+  function trackDownload(taskId: string, modelType: string, assetName: string) {
+    if (downloads.value.has(taskId)) return
+
+    downloads.value.set(
+      taskId,
+      generateDownloadTrackingPlaceholder(taskId, modelType, assetName)
+    )
+  }
+
+  function handleAssetDownload(e: CustomEvent<AssetDownloadWsMessage>) {
+    const data = e.detail
+    const existing = downloads.value.get(data.task_id)
+
+    // Skip if already in terminal state
+    if (existing?.status === 'completed' || existing?.status === 'failed') {
+      return
+    }
+
+    const download: AssetDownload = {
+      taskId: data.task_id,
+      assetId: data.asset_id,
+      assetName: data.asset_name,
+      bytesTotal: data.bytes_total,
+      bytesDownloaded: data.bytes_downloaded,
+      progress: data.progress,
+      status: data.status,
+      error: data.error,
+      lastUpdate: Date.now(),
+      modelType: existing?.modelType
+    }
+
+    downloads.value.set(data.task_id, download)
+
+    if (data.status === 'completed' && download.modelType) {
+      lastCompletedDownload.value = {
+        taskId: data.task_id,
+        modelType: download.modelType,
+        timestamp: Date.now()
+      }
+    }
+  }
+
+  async function pollStaleDownloads() {
+    const now = Date.now()
+    const staleDownloads = activeDownloads.value.filter(
+      (d) => now - d.lastUpdate >= STALE_THRESHOLD_MS
+    )
+
+    if (staleDownloads.length === 0) return
+
+    async function pollSingleDownload(download: AssetDownload) {
+      try {
+        const task = await taskService.getTask(download.taskId)
+
+        if (task.status === 'completed' || task.status === 'failed') {
+          const result = task.result
+          handleAssetDownload(
+            new CustomEvent('asset_download', {
+              detail: {
+                task_id: download.taskId,
+                asset_id: result?.asset_id ?? download.assetId,
+                asset_name: result?.filename ?? download.assetName,
+                bytes_total: download.bytesTotal,
+                bytes_downloaded:
+                  result?.bytes_downloaded ?? download.bytesTotal,
+                progress: task.status === 'completed' ? 100 : download.progress,
+                status: task.status,
+                error: task.error_message ?? result?.error
+              }
+            })
+          )
+        }
+      } catch {
+        // Task not ready or not found
+      }
+    }
+
+    await Promise.all(staleDownloads.map(pollSingleDownload))
+  }
+
+  const { pause, resume } = useIntervalFn(
+    () => void pollStaleDownloads(),
+    POLL_INTERVAL_MS,
+    { immediate: false }
+  )
+
+  watch(
+    hasActiveDownloads,
+    (hasActive) => {
+      if (hasActive) resume()
+      else pause()
+    },
+    { immediate: true }
+  )
+
+  api.addEventListener('asset_download', handleAssetDownload)
+
+  function clearFinishedDownloads() {
+    for (const download of finishedDownloads.value) {
+      downloads.value.delete(download.taskId)
+    }
+  }
+
+  return {
+    activeDownloads,
+    finishedDownloads,
+    hasActiveDownloads,
+    hasDownloads,
+    downloadList,
+    lastCompletedDownload,
+    trackDownload,
+    clearFinishedDownloads
+  }
+})

src/stores/assetsStore.ts

@@ -1,4 +1,5 @@
-import { useAsyncState } from '@vueuse/core'
+import { useAsyncState, whenever } from '@vueuse/core'
+import { isEqual } from 'es-toolkit'
 import { defineStore } from 'pinia'
 import { computed, shallowReactive, ref } from 'vue'
 import {
@@ -12,6 +13,8 @@ import type { TaskItem } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 
 import { TaskItemImpl } from './queueStore'
+import { useAssetDownloadStore } from './assetDownloadStore'
+import { useModelToNodeStore } from './modelToNodeStore'
 
 const INPUT_LIMIT = 100
 
@@ -93,6 +96,9 @@ const BATCH_SIZE = 200
 const MAX_HISTORY_ITEMS = 1000 // Maximum items to keep in memory
 
 export const useAssetsStore = defineStore('assets', () => {
+  const assetDownloadStore = useAssetDownloadStore()
+  const modelToNodeStore = useModelToNodeStore()
+
   // Pagination state
   const historyOffset = ref(0)
   const hasMoreHistory = ref(true)
@@ -274,59 +280,81 @@ export const useAssetsStore = defineStore('assets', () => {
         new Map<string, ReturnType<typeof useAsyncState<AssetItem[]>>>()
       )
 
+      /**
+       * Internal helper to fetch and cache assets with a given key and fetcher
+       */
+      async function updateModelsForKey(
+        key: string,
+        fetcher: () => Promise<AssetItem[]>
+      ): Promise<AssetItem[]> {
+        if (!stateByNodeType.has(key)) {
+          stateByNodeType.set(
+            key,
+            useAsyncState(fetcher, [], {
+              immediate: false,
+              resetOnExecute: false,
+              onError: (err) => {
+                console.error(`Error fetching model assets for ${key}:`, err)
+              }
+            })
+          )
+        }
+
+        const state = stateByNodeType.get(key)!
+
+        modelLoadingByNodeType.set(key, true)
+        modelErrorByNodeType.set(key, null)
+
+        try {
+          await state.execute()
+        } finally {
+          modelLoadingByNodeType.set(key, state.isLoading.value)
+        }
+
+        const assets = state.state.value
+        const existingAssets = modelAssetsByNodeType.get(key)
+
+        if (!isEqual(existingAssets, assets)) {
+          modelAssetsByNodeType.set(key, assets)
+        }
+
+        modelErrorByNodeType.set(
+          key,
+          state.error.value instanceof Error ? state.error.value : null
+        )
+
+        return assets
+      }
+
       /**
        * Fetch and cache model assets for a specific node type
-       * Uses VueUse's useAsyncState for automatic loading/error tracking
        * @param nodeType The node type to fetch assets for (e.g., 'CheckpointLoaderSimple')
        * @returns Promise resolving to the fetched assets
        */
       async function updateModelsForNodeType(
         nodeType: string
       ): Promise<AssetItem[]> {
-        if (!stateByNodeType.has(nodeType)) {
-          stateByNodeType.set(
-            nodeType,
-            useAsyncState(
-              () => assetService.getAssetsForNodeType(nodeType),
-              [],
-              {
-                immediate: false,
-                resetOnExecute: false,
-                onError: (err) => {
-                  console.error(
-                    `Error fetching model assets for ${nodeType}:`,
-                    err
-                  )
-                }
-              }
-            )
-          )
-        }
+        return updateModelsForKey(nodeType, () =>
+          assetService.getAssetsForNodeType(nodeType)
+        )
+      }
 
-        const state = stateByNodeType.get(nodeType)!
-
-        modelLoadingByNodeType.set(nodeType, true)
-        modelErrorByNodeType.set(nodeType, null)
-
-        try {
-          await state.execute()
-          const assets = state.state.value
-          modelAssetsByNodeType.set(nodeType, assets)
-          modelErrorByNodeType.set(
-            nodeType,
-            state.error.value instanceof Error ? state.error.value : null
-          )
-          return assets
-        } finally {
-          modelLoadingByNodeType.set(nodeType, state.isLoading.value)
-        }
+      /**
+       * Fetch and cache model assets for a specific tag
+       * @param tag The tag to fetch assets for (e.g., 'models')
+       * @returns Promise resolving to the fetched assets
+       */
+      async function updateModelsForTag(tag: string): Promise<AssetItem[]> {
+        const key = `tag:${tag}`
+        return updateModelsForKey(key, () => assetService.getAssetsByTag(tag))
       }
 
       return {
         modelAssetsByNodeType,
         modelLoadingByNodeType,
         modelErrorByNodeType,
-        updateModelsForNodeType
+        updateModelsForNodeType,
+        updateModelsForTag
       }
     }
 
@@ -334,7 +362,8 @@ export const useAssetsStore = defineStore('assets', () => {
       modelAssetsByNodeType: shallowReactive(new Map<string, AssetItem[]>()),
       modelLoadingByNodeType: shallowReactive(new Map<string, boolean>()),
       modelErrorByNodeType: shallowReactive(new Map<string, Error | null>()),
-      updateModelsForNodeType: async () => []
+      updateModelsForNodeType: async () => [],
+      updateModelsForTag: async () => []
     }
   }
 
@@ -342,9 +371,47 @@ export const useAssetsStore = defineStore('assets', () => {
     modelAssetsByNodeType,
     modelLoadingByNodeType,
     modelErrorByNodeType,
-    updateModelsForNodeType
+    updateModelsForNodeType,
+    updateModelsForTag
   } = getModelState()
 
+  // Watch for completed downloads and refresh model caches
+  whenever(
+    () => assetDownloadStore.lastCompletedDownload,
+    async (latestDownload) => {
+      const { modelType } = latestDownload
+
+      const providers = modelToNodeStore
+        .getAllNodeProviders(modelType)
+        .filter((provider) => provider.nodeDef?.name)
+
+      const nodeTypeUpdates = providers.map((provider) =>
+        updateModelsForNodeType(provider.nodeDef.name).then(
+          () => provider.nodeDef.name
+        )
+      )
+
+      // Also update by tag in case modal was opened with assetType
+      const tagUpdates = [
+        updateModelsForTag(modelType),
+        updateModelsForTag('models')
+      ]
+
+      const results = await Promise.allSettled([
+        ...nodeTypeUpdates,
+        ...tagUpdates
+      ])
+
+      for (const result of results) {
+        if (result.status === 'rejected') {
+          console.error(
+            `Failed to refresh model cache for provider: ${result.reason}`
+          )
+        }
+      }
+    }
+  )
+
   return {
     // States
     inputAssets,
@@ -369,6 +436,7 @@ export const useAssetsStore = defineStore('assets', () => {
     modelAssetsByNodeType,
     modelLoadingByNodeType,
     modelErrorByNodeType,
-    updateModelsForNodeType
+    updateModelsForNodeType,
+    updateModelsForTag
   }
 })

src/views/GraphView.vue

@@ -17,6 +17,8 @@
 
   <GlobalToast />
   <RerouteMigrationToast />
+  <ModelImportProgressDialog />
+  <ManagerProgressToast />
   <UnloadWindowConfirmDialog v-if="!isElectron()" />
   <MenuHamburger />
 </template>
@@ -49,6 +51,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { i18n, loadLocale } from '@/i18n'
+import ModelImportProgressDialog from '@/platform/assets/components/ModelImportProgressDialog.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -78,6 +81,7 @@ import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import LinearView from '@/views/LinearView.vue'
+import ManagerProgressToast from '@/workbench/extensions/manager/components/ManagerProgressToast.vue'
 
 setupAutoQueueHandler()
 useProgressFavicon()

src/workbench/extensions/manager/components/ManagerProgressDialogContent.test.ts

@@ -1,186 +0,0 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import Button from '@/components/ui/button/Button.vue'
-import PrimeVue from 'primevue/config'
-import Panel from 'primevue/panel'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-
-import ManagerProgressDialogContent from './ManagerProgressDialogContent.vue'
-
-type ComponentInstance = InstanceType<typeof ManagerProgressDialogContent> & {
-  lastPanelRef: HTMLElement | null
-  onLogsAdded: () => void
-  handleScroll: (e: { target: HTMLElement }) => void
-  isUserScrolling: boolean
-  resetUserScrolling: () => void
-  collapsedPanels: Record<number, boolean>
-  togglePanel: (index: number) => void
-}
-
-const mockCollapse = vi.fn()
-
-const defaultMockTaskLogs = [
-  { taskName: 'Task 1', logs: ['Log 1', 'Log 2'] },
-  { taskName: 'Task 2', logs: ['Log 3', 'Log 4'] }
-]
-
-vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
-  useComfyManagerStore: vi.fn(() => ({
-    taskLogs: [...defaultMockTaskLogs],
-    succeededTasksLogs: [...defaultMockTaskLogs],
-    failedTasksLogs: [...defaultMockTaskLogs],
-    managerQueue: { historyCount: 2 },
-    isLoading: false
-  })),
-  useManagerProgressDialogStore: vi.fn(() => ({
-    isExpanded: true,
-    activeTabIndex: 0,
-    getActiveTabIndex: vi.fn(() => 0),
-    setActiveTabIndex: vi.fn(),
-    toggle: vi.fn(),
-    collapse: mockCollapse,
-    expand: vi.fn()
-  }))
-}))
-
-describe('ManagerProgressDialogContent', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockCollapse.mockReset()
-  })
-
-  const mountComponent = ({
-    props = {}
-  }: Record<string, any> = {}): VueWrapper<ComponentInstance> => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-
-    return mount(ManagerProgressDialogContent, {
-      props: {
-        ...props
-      },
-      global: {
-        plugins: [PrimeVue, createPinia(), i18n],
-        components: {
-          Panel,
-          Button
-        }
-      }
-    }) as VueWrapper<ComponentInstance>
-  }
-
-  it('renders the correct number of panels', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-    expect(wrapper.findAllComponents(Panel).length).toBe(2)
-  })
-
-  it('expands the last panel by default', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-    expect(wrapper.vm.collapsedPanels[1]).toBeFalsy()
-  })
-
-  it('toggles panel expansion when toggle method is called', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    // Initial state - first panel should be collapsed
-    expect(wrapper.vm.collapsedPanels[0]).toBeFalsy()
-
-    wrapper.vm.togglePanel(0)
-    await nextTick()
-
-    // After toggle - first panel should be expanded
-    expect(wrapper.vm.collapsedPanels[0]).toBe(true)
-
-    wrapper.vm.togglePanel(0)
-    await nextTick()
-
-    expect(wrapper.vm.collapsedPanels[0]).toBeFalsy()
-  })
-
-  it('displays the correct status for each panel', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    // Expand all panels to see status text
-    const panels = wrapper.findAllComponents(Panel)
-    for (let i = 0; i < panels.length; i++) {
-      if (!wrapper.vm.collapsedPanels[i]) {
-        wrapper.vm.togglePanel(i)
-        await nextTick()
-      }
-    }
-
-    const panelsText = wrapper
-      .findAllComponents(Panel)
-      .map((panel) => panel.text())
-
-    expect(panelsText[0]).toContain('Completed ✓')
-    expect(panelsText[1]).toContain('Completed ✓')
-  })
-
-  it('auto-scrolls to bottom when new logs are added', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    const mockScrollElement = document.createElement('div')
-    Object.defineProperty(mockScrollElement, 'scrollHeight', { value: 200 })
-    Object.defineProperty(mockScrollElement, 'clientHeight', { value: 100 })
-    Object.defineProperty(mockScrollElement, 'scrollTop', {
-      value: 0,
-      writable: true
-    })
-
-    wrapper.vm.lastPanelRef = mockScrollElement
-
-    wrapper.vm.onLogsAdded()
-    await nextTick()
-
-    // Check if scrollTop is set to scrollHeight (scrolled to bottom)
-    expect(mockScrollElement.scrollTop).toBe(200)
-  })
-
-  it('does not auto-scroll when user is manually scrolling', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-
-    const mockScrollElement = document.createElement('div')
-    Object.defineProperty(mockScrollElement, 'scrollHeight', { value: 200 })
-    Object.defineProperty(mockScrollElement, 'clientHeight', { value: 100 })
-    Object.defineProperty(mockScrollElement, 'scrollTop', {
-      value: 50,
-      writable: true
-    })
-
-    wrapper.vm.lastPanelRef = mockScrollElement
-
-    wrapper.vm.handleScroll({ target: mockScrollElement })
-    await nextTick()
-
-    expect(wrapper.vm.isUserScrolling).toBe(true)
-
-    // Now trigger the log update
-    wrapper.vm.onLogsAdded()
-    await nextTick()
-
-    // Check that scrollTop is not changed (should still be 50)
-    expect(mockScrollElement.scrollTop).toBe(50)
-  })
-
-  it('calls collapse method when component is unmounted', async () => {
-    const wrapper = mountComponent()
-    await nextTick()
-    wrapper.unmount()
-    expect(mockCollapse).toHaveBeenCalled()
-  })
-})

src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue

@@ -1,182 +0,0 @@
-<template>
-  <div
-    class="overflow-hidden transition-all duration-300"
-    :class="{
-      'max-h-[500px]': isExpanded,
-      'm-0 max-h-0 p-0': !isExpanded
-    }"
-  >
-    <div
-      ref="sectionsContainerRef"
-      class="scroll-container max-h-[450px] overflow-y-auto px-6 py-4"
-      :style="{
-        scrollbarWidth: 'thin',
-        scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
-      }"
-      :class="{
-        'max-h-[450px]': isExpanded,
-        'max-h-0': !isExpanded
-      }"
-    >
-      <div v-for="(log, index) in focusedLogs" :key="index">
-        <Panel
-          :expanded="collapsedPanels[index] === true"
-          toggleable
-          class="shadow-elevation-1 mt-2 rounded-lg"
-        >
-          <template #header>
-            <div class="flex w-full items-center justify-between py-2">
-              <div class="flex flex-col text-sm leading-normal font-medium">
-                <span>{{ log.taskName }}</span>
-                <span class="text-muted">
-                  {{
-                    isInProgress(index)
-                      ? $t('g.inProgress')
-                      : $t('g.completed') + ' ✓'
-                  }}
-                </span>
-              </div>
-            </div>
-          </template>
-          <template #toggleicon>
-            <Button
-              variant="textonly"
-              class="text-neutral-300"
-              @click="togglePanel(index)"
-            >
-              <i
-                :class="
-                  collapsedPanels[index]
-                    ? 'pi pi-chevron-right'
-                    : 'pi pi-chevron-down'
-                "
-              />
-            </Button>
-          </template>
-          <div
-            :ref="
-              index === focusedLogs.length - 1
-                ? (el) => (lastPanelRef = el as HTMLElement)
-                : undefined
-            "
-            class="h-64 overflow-y-auto rounded-lg bg-black"
-            :class="{
-              'h-64': index !== focusedLogs.length - 1,
-              grow: index === focusedLogs.length - 1
-            }"
-            @scroll="handleScroll"
-          >
-            <div class="h-full">
-              <div
-                v-for="(logLine, logIndex) in log.logs"
-                :key="logIndex"
-                class="text-muted"
-              >
-                <pre class="break-words whitespace-pre-wrap">{{ logLine }}</pre>
-              </div>
-            </div>
-          </div>
-        </Panel>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useScroll, whenever } from '@vueuse/core'
-import Panel from 'primevue/panel'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-
-import Button from '@/components/ui/button/Button.vue'
-import {
-  useComfyManagerStore,
-  useManagerProgressDialogStore
-} from '@/workbench/extensions/manager/stores/comfyManagerStore'
-
-const comfyManagerStore = useComfyManagerStore()
-const progressDialogContent = useManagerProgressDialogStore()
-
-const isInProgress = (index: number) => {
-  const log = focusedLogs.value[index]
-  if (!log) return false
-
-  // Check if this task is in the running or pending queue
-  const taskQueue = comfyManagerStore.taskQueue
-  if (!taskQueue) return false
-
-  const allQueueTasks = [
-    ...(taskQueue.running_queue || []),
-    ...(taskQueue.pending_queue || [])
-  ]
-
-  return allQueueTasks.some((task) => task.ui_id === log.taskId)
-}
-
-const focusedLogs = computed(() => {
-  if (progressDialogContent.getActiveTabIndex() === 0) {
-    return comfyManagerStore.succeededTasksLogs
-  }
-  return comfyManagerStore.failedTasksLogs
-})
-const isExpanded = computed(() => progressDialogContent.isExpanded)
-const isCollapsed = computed(() => !isExpanded.value)
-
-const collapsedPanels = ref<Record<number, boolean>>({})
-const togglePanel = (index: number) => {
-  collapsedPanels.value[index] = !collapsedPanels.value[index]
-}
-
-const sectionsContainerRef = ref<HTMLElement | null>(null)
-const { y: scrollY } = useScroll(sectionsContainerRef, {
-  eventListenerOptions: {
-    passive: true
-  }
-})
-
-const lastPanelRef = ref<HTMLElement | null>(null)
-const isUserScrolling = ref(false)
-const lastPanelLogs = computed(() => focusedLogs.value?.at(-1)?.logs)
-
-const isAtBottom = (el: HTMLElement | null) => {
-  if (!el) return false
-  const threshold = 20
-  return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < threshold
-}
-
-const scrollLastPanelToBottom = () => {
-  if (!lastPanelRef.value || isUserScrolling.value) return
-  lastPanelRef.value.scrollTop = lastPanelRef.value.scrollHeight
-}
-const scrollContentToBottom = () => {
-  scrollY.value = sectionsContainerRef.value?.scrollHeight ?? 0
-}
-
-const resetUserScrolling = () => {
-  isUserScrolling.value = false
-}
-const handleScroll = (e: Event) => {
-  const target = e.target as HTMLElement
-  if (target !== lastPanelRef.value) return
-
-  isUserScrolling.value = !isAtBottom(target)
-}
-
-const onLogsAdded = () => {
-  // If user is scrolling manually, don't automatically scroll to bottom
-  if (isUserScrolling.value) return
-
-  scrollLastPanelToBottom()
-}
-
-whenever(lastPanelLogs, onLogsAdded, { flush: 'post', deep: true })
-whenever(() => isExpanded.value, scrollContentToBottom)
-whenever(isCollapsed, resetUserScrolling)
-
-onMounted(() => {
-  scrollContentToBottom()
-})
-
-onBeforeUnmount(() => {
-  progressDialogContent.collapse()
-})
-</script>

src/workbench/extensions/manager/components/ManagerProgressFooter.vue

@@ -1,195 +0,0 @@
-<template>
-  <div
-    class="flex w-full items-center justify-between px-6 py-2 shadow-lg"
-    :class="{
-      'rounded-t-none': progressDialogContent.isExpanded,
-      'rounded-lg': !progressDialogContent.isExpanded
-    }"
-  >
-    <div class="flex items-center text-base leading-none">
-      <div class="flex items-center">
-        <template v-if="isInProgress">
-          <DotSpinner duration="1s" class="mr-2" />
-          <span>{{ currentTaskName }}</span>
-        </template>
-        <template v-else-if="isRestartCompleted">
-          <span class="mr-2">🎉</span>
-          <span>{{ currentTaskName }}</span>
-        </template>
-        <template v-else>
-          <span class="mr-2">✅</span>
-          <span>{{ $t('manager.restartToApplyChanges') }}</span>
-        </template>
-      </div>
-    </div>
-    <div class="flex items-center gap-4">
-      <span v-if="isInProgress" class="text-sm text-neutral-700">
-        {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
-        {{ totalTasksCount }}
-      </span>
-      <div class="flex items-center">
-        <Button
-          v-if="!isInProgress && !isRestartCompleted"
-          variant="secondary"
-          class="mr-4 rounded-full border-2 border-base-foreground px-3 text-base-foreground hover:bg-secondary-background-hover"
-          @click="handleRestart"
-        >
-          {{ $t('manager.applyChanges') }}
-        </Button>
-        <Button
-          v-else-if="!isRestartCompleted"
-          variant="muted-textonly"
-          size="sm"
-          class="rounded-full font-bold"
-          :aria-label="
-            $t(
-              progressDialogContent.isExpanded
-                ? 'contextMenu.Collapse'
-                : 'contextMenu.Expand'
-            )
-          "
-          @click.stop="progressDialogContent.toggle"
-        >
-          <i
-            :class="
-              progressDialogContent.isExpanded
-                ? 'pi pi-chevron-up'
-                : 'pi pi-chevron-down'
-            "
-          />
-        </Button>
-        <Button
-          variant="muted-textonly"
-          size="sm"
-          class="rounded-full font-bold"
-          :aria-label="$t('g.close')"
-          @click.stop="closeDialog"
-        >
-          <i class="pi pi-times" />
-        </Button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import DotSpinner from '@/components/common/DotSpinner.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { api } from '@/scripts/api'
-import { useCommandStore } from '@/stores/commandStore'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
-import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
-import {
-  useComfyManagerStore,
-  useManagerProgressDialogStore
-} from '@/workbench/extensions/manager/stores/comfyManagerStore'
-
-const { t } = useI18n()
-const dialogStore = useDialogStore()
-const progressDialogContent = useManagerProgressDialogStore()
-const comfyManagerStore = useComfyManagerStore()
-const settingStore = useSettingStore()
-const { runFullConflictAnalysis } = useConflictDetection()
-
-// State management for restart process
-const isRestarting = ref<boolean>(false)
-const isRestartCompleted = ref<boolean>(false)
-
-const isInProgress = computed(
-  () => comfyManagerStore.isProcessingTasks || isRestarting.value
-)
-
-const completedTasksCount = computed(() => {
-  return (
-    comfyManagerStore.succeededTasksIds.length +
-    comfyManagerStore.failedTasksIds.length
-  )
-})
-
-const totalTasksCount = computed(() => {
-  const completedTasks = Object.keys(comfyManagerStore.taskHistory).length
-  const taskQueue = comfyManagerStore.taskQueue
-  const queuedTasks = taskQueue
-    ? (taskQueue.running_queue?.length || 0) +
-      (taskQueue.pending_queue?.length || 0)
-    : 0
-  return completedTasks + queuedTasks
-})
-
-const closeDialog = () => {
-  dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
-}
-
-const fallbackTaskName = t('manager.installingDependencies')
-const currentTaskName = computed(() => {
-  if (isRestarting.value) {
-    return t('manager.restartingBackend')
-  }
-  if (isRestartCompleted.value) {
-    return t('manager.extensionsSuccessfullyInstalled')
-  }
-  if (!comfyManagerStore.taskLogs.length) return fallbackTaskName
-  const task = comfyManagerStore.taskLogs.at(-1)
-  return task?.taskName ?? fallbackTaskName
-})
-
-const handleRestart = async () => {
-  // Store original toast setting value
-  const originalToastSetting = settingStore.get(
-    'Comfy.Toast.DisableReconnectingToast'
-  )
-
-  try {
-    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)
-
-    isRestarting.value = true
-
-    const onReconnect = async () => {
-      try {
-        comfyManagerStore.setStale()
-
-        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
-
-        await useWorkflowService().reloadCurrentWorkflow()
-
-        // Run conflict detection in background after restart completion
-        void runFullConflictAnalysis()
-      } finally {
-        await settingStore.set(
-          'Comfy.Toast.DisableReconnectingToast',
-          originalToastSetting
-        )
-
-        isRestarting.value = false
-        isRestartCompleted.value = true
-
-        setTimeout(() => {
-          closeDialog()
-          comfyManagerStore.resetTaskState()
-        }, 3000)
-      }
-    }
-
-    useEventListener(api, 'reconnected', onReconnect, { once: true })
-
-    await useComfyManagerService().rebootComfyUI()
-  } catch (error) {
-    // If restart fails, restore settings and reset state
-    await settingStore.set(
-      'Comfy.Toast.DisableReconnectingToast',
-      originalToastSetting
-    )
-    isRestarting.value = false
-    isRestartCompleted.value = false
-    closeDialog() // Close dialog on error
-    throw error
-  }
-}
-</script>

src/workbench/extensions/manager/components/ManagerProgressHeader.vue

@@ -1,44 +0,0 @@
-<template>
-  <div
-    v-if="progressDialogContent.isExpanded"
-    class="flex items-center px-4 py-2"
-  >
-    <TabMenu
-      v-model:active-index="activeTabIndex"
-      :model="tabs"
-      class="w-full border-none"
-      :pt="{
-        menu: { class: 'border-none' },
-        menuitem: { class: 'font-medium' },
-        action: { class: 'px-4 py-2' }
-      }"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import TabMenu from 'primevue/tabmenu'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  useComfyManagerStore,
-  useManagerProgressDialogStore
-} from '@/workbench/extensions/manager/stores/comfyManagerStore'
-
-const progressDialogContent = useManagerProgressDialogStore()
-const comfyManagerStore = useComfyManagerStore()
-const activeTabIndex = computed({
-  get: () => progressDialogContent.getActiveTabIndex(),
-  set: (value) => progressDialogContent.setActiveTabIndex(value)
-})
-const { t } = useI18n()
-const tabs = computed(() => [
-  { label: t('manager.installationQueue') },
-  {
-    label: t('manager.failed', {
-      count: comfyManagerStore.failedTasksIds.length
-    })
-  }
-])
-</script>

src/workbench/extensions/manager/components/ManagerProgressToast.vue

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { useEventListener, useScroll, whenever } from '@vueuse/core'
+import Panel from 'primevue/panel'
+import TabMenu from 'primevue/tabmenu'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import DotSpinner from '@/components/common/DotSpinner.vue'
+import HoneyToast from '@/components/honeyToast/HoneyToast.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { api } from '@/scripts/api'
+import { useCommandStore } from '@/stores/commandStore'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+const { t } = useI18n()
+const comfyManagerStore = useComfyManagerStore()
+const settingStore = useSettingStore()
+const { runFullConflictAnalysis } = useConflictDetection()
+
+const isExpanded = ref(false)
+const activeTabIndex = ref(0)
+
+const tabs = computed(() => [
+  { label: t('manager.installationQueue') },
+  {
+    label: t('manager.failed', {
+      count: comfyManagerStore.failedTasksIds.length
+    })
+  }
+])
+
+const focusedLogs = computed(() => {
+  if (activeTabIndex.value === 0) {
+    return comfyManagerStore.succeededTasksLogs
+  }
+  return comfyManagerStore.failedTasksLogs
+})
+
+const visible = computed(() => comfyManagerStore.taskLogs.length > 0)
+
+const isRestarting = ref(false)
+const isRestartCompleted = ref(false)
+
+const isInProgress = computed(
+  () => comfyManagerStore.isProcessingTasks || isRestarting.value
+)
+
+const isTaskInProgress = (index: number) => {
+  const log = focusedLogs.value[index]
+  if (!log) return false
+
+  const taskQueue = comfyManagerStore.taskQueue
+  if (!taskQueue) return false
+
+  const allQueueTasks = [
+    ...(taskQueue.running_queue || []),
+    ...(taskQueue.pending_queue || [])
+  ]
+
+  return allQueueTasks.some((task) => task.ui_id === log.taskId)
+}
+
+const completedTasksCount = computed(() => {
+  return (
+    comfyManagerStore.succeededTasksIds.length +
+    comfyManagerStore.failedTasksIds.length
+  )
+})
+
+const totalTasksCount = computed(() => {
+  const completedTasks = Object.keys(comfyManagerStore.taskHistory).length
+  const taskQueue = comfyManagerStore.taskQueue
+  const queuedTasks = taskQueue
+    ? (taskQueue.running_queue?.length || 0) +
+      (taskQueue.pending_queue?.length || 0)
+    : 0
+  return completedTasks + queuedTasks
+})
+
+const currentTaskName = computed(() => {
+  if (isRestarting.value) {
+    return t('manager.restartingBackend')
+  }
+  if (isRestartCompleted.value) {
+    return t('manager.extensionsSuccessfullyInstalled')
+  }
+  if (!comfyManagerStore.taskLogs.length)
+    return t('manager.installingDependencies')
+  const task = comfyManagerStore.taskLogs.at(-1)
+  return task?.taskName ?? t('manager.installingDependencies')
+})
+
+const collapsedPanels = ref<Record<number, boolean>>({})
+function togglePanel(index: number) {
+  collapsedPanels.value[index] = !collapsedPanels.value[index]
+}
+
+const sectionsContainerRef = ref<HTMLElement | null>(null)
+const { y: scrollY } = useScroll(sectionsContainerRef, {
+  eventListenerOptions: { passive: true }
+})
+
+const lastPanelRef = ref<HTMLElement | null>(null)
+const isUserScrolling = ref(false)
+const lastPanelLogs = computed(() => focusedLogs.value?.at(-1)?.logs)
+
+function isAtBottom(el: HTMLElement | null) {
+  if (!el) return false
+  const threshold = 20
+  return Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight) < threshold
+}
+
+function scrollLastPanelToBottom() {
+  if (!lastPanelRef.value || isUserScrolling.value) return
+  lastPanelRef.value.scrollTop = lastPanelRef.value.scrollHeight
+}
+
+function scrollContentToBottom() {
+  scrollY.value = sectionsContainerRef.value?.scrollHeight ?? 0
+}
+
+function resetUserScrolling() {
+  isUserScrolling.value = false
+}
+
+function handleScroll(e: Event) {
+  const target = e.target as HTMLElement
+  if (target !== lastPanelRef.value) return
+  isUserScrolling.value = !isAtBottom(target)
+}
+
+function onLogsAdded() {
+  if (isUserScrolling.value) return
+  scrollLastPanelToBottom()
+}
+
+whenever(lastPanelLogs, onLogsAdded, { flush: 'post', deep: true })
+whenever(() => isExpanded.value, scrollContentToBottom)
+whenever(() => !isExpanded.value, resetUserScrolling)
+
+function closeToast() {
+  comfyManagerStore.resetTaskState()
+  isExpanded.value = false
+}
+
+async function handleRestart() {
+  const originalToastSetting = settingStore.get(
+    'Comfy.Toast.DisableReconnectingToast'
+  )
+
+  try {
+    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)
+
+    isRestarting.value = true
+
+    const onReconnect = async () => {
+      try {
+        comfyManagerStore.setStale()
+        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+        await useWorkflowService().reloadCurrentWorkflow()
+        void runFullConflictAnalysis()
+      } finally {
+        await settingStore.set(
+          'Comfy.Toast.DisableReconnectingToast',
+          originalToastSetting
+        )
+        isRestarting.value = false
+        isRestartCompleted.value = true
+
+        setTimeout(() => {
+          closeToast()
+        }, 3000)
+      }
+    }
+
+    useEventListener(api, 'reconnected', onReconnect, { once: true })
+
+    await useComfyManagerService().rebootComfyUI()
+  } catch (error) {
+    await settingStore.set(
+      'Comfy.Toast.DisableReconnectingToast',
+      originalToastSetting
+    )
+    isRestarting.value = false
+    isRestartCompleted.value = false
+    closeToast()
+    throw error
+  }
+}
+
+onMounted(() => {
+  scrollContentToBottom()
+})
+
+onBeforeUnmount(() => {
+  isExpanded.value = false
+})
+</script>
+
+<template>
+  <HoneyToast v-model:expanded="isExpanded" :visible>
+    <template #default>
+      <div v-if="isExpanded" class="flex items-center px-4 py-2">
+        <TabMenu
+          v-model:active-index="activeTabIndex"
+          :model="tabs"
+          class="w-full border-none"
+          :pt="{
+            menu: { class: 'border-none' },
+            menuitem: { class: 'font-medium' },
+            action: { class: 'px-4 py-2' }
+          }"
+        />
+      </div>
+
+      <div
+        ref="sectionsContainerRef"
+        class="scroll-container max-h-[450px] overflow-y-auto px-6 py-4"
+        :style="{
+          scrollbarWidth: 'thin',
+          scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
+        }"
+      >
+        <div v-for="(log, index) in focusedLogs" :key="index">
+          <Panel
+            :expanded="collapsedPanels[index] === true"
+            toggleable
+            class="shadow-elevation-1 mt-2 rounded-lg"
+          >
+            <template #header>
+              <div class="flex w-full items-center justify-between py-2">
+                <div class="flex flex-col text-sm leading-normal font-medium">
+                  <span>{{ log.taskName }}</span>
+                  <span class="text-muted">
+                    {{
+                      isTaskInProgress(index)
+                        ? t('g.inProgress')
+                        : t('g.completed') + ' ✓'
+                    }}
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template #toggleicon>
+              <Button
+                variant="textonly"
+                class="text-neutral-300"
+                @click="togglePanel(index)"
+              >
+                <i
+                  :class="
+                    collapsedPanels[index]
+                      ? 'pi pi-chevron-right'
+                      : 'pi pi-chevron-down'
+                  "
+                />
+              </Button>
+            </template>
+            <div
+              :ref="
+                index === focusedLogs.length - 1
+                  ? (el) => (lastPanelRef = el as HTMLElement)
+                  : undefined
+              "
+              class="h-64 overflow-y-auto rounded-lg bg-black"
+              :class="{
+                'h-64': index !== focusedLogs.length - 1,
+                grow: index === focusedLogs.length - 1
+              }"
+              @scroll="handleScroll"
+            >
+              <div class="h-full">
+                <div
+                  v-for="(logLine, logIndex) in log.logs"
+                  :key="logIndex"
+                  class="text-muted"
+                >
+                  <pre class="break-words whitespace-pre-wrap">{{
+                    logLine
+                  }}</pre>
+                </div>
+              </div>
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </template>
+
+    <template #footer="{ toggle }">
+      <div class="flex w-full items-center justify-between px-6 py-2 shadow-lg">
+        <div class="flex items-center text-base leading-none">
+          <div class="flex items-center">
+            <template v-if="isInProgress">
+              <DotSpinner duration="1s" class="mr-2" />
+              <span>{{ currentTaskName }}</span>
+            </template>
+            <template v-else-if="isRestartCompleted">
+              <span class="mr-2">🎉</span>
+              <span>{{ currentTaskName }}</span>
+            </template>
+            <template v-else>
+              <span class="mr-2">✅</span>
+              <span>{{ t('manager.restartToApplyChanges') }}</span>
+            </template>
+          </div>
+        </div>
+        <div class="flex items-center gap-4">
+          <span v-if="isInProgress" class="text-sm text-muted-foreground">
+            {{ completedTasksCount }} {{ t('g.progressCountOf') }}
+            {{ totalTasksCount }}
+          </span>
+          <div class="flex items-center">
+            <Button
+              v-if="!isInProgress && !isRestartCompleted"
+              variant="secondary"
+              class="mr-4 rounded-full border-2 border-base-foreground px-3 text-base-foreground hover:bg-secondary-background-hover"
+              @click="handleRestart"
+            >
+              {{ t('manager.applyChanges') }}
+            </Button>
+            <Button
+              v-else-if="!isRestartCompleted"
+              variant="muted-textonly"
+              size="sm"
+              class="rounded-full font-bold"
+              :aria-label="
+                t(isExpanded ? 'contextMenu.Collapse' : 'contextMenu.Expand')
+              "
+              @click.stop="toggle"
+            >
+              <i
+                :class="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+              />
+            </Button>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="rounded-full font-bold"
+              :aria-label="t('g.close')"
+              @click.stop="closeToast"
+            >
+              <i class="pi pi-times" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </HoneyToast>
+</template>

src/workbench/extensions/manager/composables/useManagerQueue.ts

@@ -4,7 +4,6 @@ import type { Ref } from 'vue'
 import { computed, ref } from 'vue'
 
 import { app } from '@/scripts/app'
-import { useDialogService } from '@/services/dialogService'
 import { normalizePackKeys } from '@/utils/packUtils'
 import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
@@ -27,8 +26,6 @@ export const useManagerQueue = (
   taskQueue: Ref<ManagerTaskQueue>,
   installedPacks: Ref<Record<string, any>>
 ) => {
-  const { showManagerProgressDialog } = useDialogService()
-
   // Task queue state (read-only from server)
   const maxHistoryItems = ref(64)
   const isLoading = ref(false)
@@ -113,15 +110,6 @@ export const useManagerQueue = (
     (event: CustomEvent<ManagerWsTaskDoneMsg>) => {
       if (event?.type === MANAGER_WS_TASK_DONE_NAME && event.detail?.state) {
         updateTaskState(event.detail.state)
-
-        // If no more tasks are running/pending, hide the progress dialog
-        if (allTasksDone.value) {
-          setTimeout(() => {
-            if (allTasksDone.value) {
-              showManagerProgressDialog()
-            }
-          }, 1000) // Small delay to let users see completion
-        }
       }
     }
   )
@@ -133,9 +121,6 @@ export const useManagerQueue = (
     (event: CustomEvent<ManagerWsTaskStartedMsg>) => {
       if (event?.type === MANAGER_WS_TASK_STARTED_NAME && event.detail?.state) {
         updateTaskState(event.detail.state)
-
-        // Show progress dialog when a task starts
-        showManagerProgressDialog()
       }
     }
   )

src/workbench/extensions/manager/stores/comfyManagerStore.ts

@@ -8,7 +8,7 @@ import { useCachedRequest } from '@/composables/useCachedRequest'
 import { useServerLogs } from '@/composables/useServerLogs'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useDialogService } from '@/services/dialogService'
+
 import { normalizePackKeys } from '@/utils/packUtils'
 import { useManagerQueue } from '@/workbench/extensions/manager/composables/useManagerQueue'
 import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
@@ -32,7 +32,6 @@ type UpdateAllPacksParams = components['schemas']['UpdateAllPacksParams']
 export const useComfyManagerStore = defineStore('comfyManager', () => {
   const { t } = useI18n()
   const managerService = useComfyManagerService()
-  const { showManagerProgressDialog } = useDialogService()
 
   const installedPacks = ref<InstalledPacksResponse>({})
   const enabledPacksIds = ref<Set<string>>(new Set())
@@ -204,8 +203,6 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     })
 
     try {
-      // Show progress dialog immediately when task is queued
-      showManagerProgressDialog()
       managerQueue.isProcessing.value = true
 
       // Prepare logging hook
@@ -392,44 +389,3 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     enablePack
   }
 })
-
-/**
- * Store for state of the manager progress dialog content.
- * The dialog itself is managed by the dialog store. This store is used to
- * manage the visibility of the dialog's content, header, footer.
- */
-export const useManagerProgressDialogStore = defineStore(
-  'managerProgressDialog',
-  () => {
-    const isExpanded = ref(false)
-    const activeTabIndex = ref(0)
-
-    const setActiveTabIndex = (index: number) => {
-      activeTabIndex.value = index
-    }
-
-    const getActiveTabIndex = () => {
-      return activeTabIndex.value
-    }
-
-    const toggle = () => {
-      isExpanded.value = !isExpanded.value
-    }
-
-    const collapse = () => {
-      isExpanded.value = false
-    }
-
-    const expand = () => {
-      isExpanded.value = true
-    }
-    return {
-      isExpanded,
-      toggle,
-      collapse,
-      expand,
-      setActiveTabIndex,
-      getActiveTabIndex
-    }
-  }
-)

tests-ui/platform/assets/components/AssetBrowserModal.test.ts

@@ -4,20 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-const mockAssetService = vi.hoisted(() => ({
-  getAssetsForNodeType: vi.fn(),
-  getAssetsByTag: vi.fn(),
-  getAssetDetails: vi.fn((id: string) =>
-    Promise.resolve({
-      id,
-      name: 'Test Model',
-      user_metadata: {
-        filename: 'Test Model'
-      }
-    })
-  )
-}))
+import { useAssetsStore } from '@/stores/assetsStore'
 
 vi.mock('@/i18n', () => ({
   t: (key: string, params?: Record<string, string>) =>
@@ -25,9 +12,15 @@ vi.mock('@/i18n', () => ({
   d: (date: Date) => date.toLocaleDateString()
 }))
 
-vi.mock('@/platform/assets/services/assetService', () => ({
-  assetService: mockAssetService
-}))
+vi.mock('@/stores/assetsStore', () => {
+  const store = {
+    modelAssetsByNodeType: new Map<string, AssetItem[]>(),
+    modelLoadingByNodeType: new Map<string, boolean>(),
+    updateModelsForNodeType: vi.fn(),
+    updateModelsForTag: vi.fn()
+  }
+  return { useAssetsStore: () => store }
+})
 
 vi.mock('@/stores/modelToNodeStore', () => ({
   useModelToNodeStore: () => ({
@@ -190,9 +183,12 @@ describe('AssetBrowserModal', () => {
     })
   }
 
+  const mockStore = useAssetsStore()
+
   beforeEach(() => {
-    mockAssetService.getAssetsForNodeType.mockReset()
-    mockAssetService.getAssetsByTag.mockReset()
+    vi.resetAllMocks()
+    mockStore.modelAssetsByNodeType.clear()
+    mockStore.modelLoadingByNodeType.clear()
   })
 
   describe('Integration with useAssetBrowser', () => {
@@ -201,7 +197,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
@@ -218,7 +214,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('c1', 'model.safetensors', 'checkpoints'),
         createTestAsset('l1', 'lora.pt', 'loras')
       ]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
@@ -234,31 +230,54 @@ describe('AssetBrowserModal', () => {
   })
 
   describe('Data fetching', () => {
-    it('fetches assets for node type', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
+    it('triggers store refresh for node type on mount', async () => {
       createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
-      expect(mockAssetService.getAssetsForNodeType).toHaveBeenCalledWith(
+      expect(mockStore.updateModelsForNodeType).toHaveBeenCalledWith(
         'CheckpointLoaderSimple'
       )
     })
 
-    it('fetches assets for tag when node type not provided', async () => {
-      mockAssetService.getAssetsByTag.mockResolvedValueOnce([])
+    it('displays cached assets immediately from store', async () => {
+      const assets = [createTestAsset('asset1', 'Cached Model', 'checkpoints')]
+      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
 
-      createWrapper({ assetType: 'loras' })
+      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      const gridAssets = assetGrid.props('assets') as AssetItem[]
+
+      expect(gridAssets).toHaveLength(1)
+      expect(gridAssets[0].name).toBe('Cached Model')
+    })
+
+    it('triggers store refresh for asset type (tag) on mount', async () => {
+      createWrapper({ assetType: 'models' })
       await flushPromises()
 
-      expect(mockAssetService.getAssetsByTag).toHaveBeenCalledWith('loras')
+      expect(mockStore.updateModelsForTag).toHaveBeenCalledWith('models')
+    })
+
+    it('uses tag: prefix for cache key when assetType is provided', async () => {
+      const assets = [createTestAsset('asset1', 'Tagged Model', 'models')]
+      mockStore.modelAssetsByNodeType.set('tag:models', assets)
+
+      const wrapper = createWrapper({ assetType: 'models' })
+      await flushPromises()
+
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      const gridAssets = assetGrid.props('assets') as AssetItem[]
+
+      expect(gridAssets).toHaveLength(1)
+      expect(gridAssets[0].name).toBe('Tagged Model')
     })
   })
 
   describe('Asset Selection', () => {
     it('emits asset-select event when asset is selected', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
@@ -271,7 +290,7 @@ describe('AssetBrowserModal', () => {
 
     it('executes onSelect callback when provided', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
 
       const onSelect = vi.fn()
       const wrapper = createWrapper({
@@ -289,8 +308,6 @@ describe('AssetBrowserModal', () => {
 
   describe('Left Panel Conditional Logic', () => {
     it('hides left panel by default when showLeftPanel is undefined', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
@@ -299,8 +316,6 @@ describe('AssetBrowserModal', () => {
     })
 
     it('shows left panel when showLeftPanel prop is explicitly true', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
         showLeftPanel: true
@@ -318,7 +333,7 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
@@ -339,8 +354,6 @@ describe('AssetBrowserModal', () => {
 
   describe('Title Management', () => {
     it('passes custom title to BaseModalLayout when title prop provided', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
         title: 'Custom Title'
@@ -353,7 +366,7 @@ describe('AssetBrowserModal', () => {
 
     it('passes computed contentTitle to BaseModalLayout when no title prop', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockStore.modelAssetsByNodeType.set('CheckpointLoaderSimple', assets)
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()

tests-ui/platform/assets/composables/useAssetBrowser.test.ts

@@ -98,6 +98,48 @@ describe('useAssetBrowser', () => {
 
       expect(result.description).toBe('loras model')
     })
+
+    it('removes category prefix from badge labels', () => {
+      const apiAsset = createApiAsset({
+        tags: ['models', 'checkpoint/stable-diffusion-v1-5']
+      })
+
+      const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
+      const result = filteredAssets.value[0]
+
+      expect(result.badges).toContainEqual({
+        label: 'stable-diffusion-v1-5',
+        type: 'type'
+      })
+    })
+
+    it('handles tags without slash for badges', () => {
+      const apiAsset = createApiAsset({
+        tags: ['models', 'checkpoints']
+      })
+
+      const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
+      const result = filteredAssets.value[0]
+
+      expect(result.badges).toContainEqual({
+        label: 'checkpoints',
+        type: 'type'
+      })
+    })
+
+    it('handles tags with multiple slashes in badges', () => {
+      const apiAsset = createApiAsset({
+        tags: ['models', 'checkpoint/subfolder/model-name']
+      })
+
+      const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
+      const result = filteredAssets.value[0]
+
+      expect(result.badges).toContainEqual({
+        label: 'subfolder/model-name',
+        type: 'type'
+      })
+    })
   })
 
   describe('Tag-Based Filtering', () => {
@@ -533,5 +575,58 @@ describe('useAssetBrowser', () => {
       selectedCategory.value = 'unknown'
       expect(contentTitle.value).toBe('Assets')
     })
+
+    it('groups models by top-level folder name', () => {
+      const assets = [
+        createApiAsset({
+          id: 'asset-1',
+          tags: ['models', 'Chatterbox/subfolder1/model1']
+        }),
+        createApiAsset({
+          id: 'asset-2',
+          tags: ['models', 'Chatterbox/subfolder2/model2']
+        }),
+        createApiAsset({
+          id: 'asset-3',
+          tags: ['models', 'Chatterbox/subfolder3/model3']
+        }),
+        createApiAsset({
+          id: 'asset-4',
+          tags: ['models', 'OtherFolder/subfolder1/model4']
+        })
+      ]
+
+      const { availableCategories, selectedCategory, categoryFilteredAssets } =
+        useAssetBrowser(ref(assets))
+
+      // Should group all Chatterbox subfolders under single category
+      expect(availableCategories.value).toEqual([
+        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
+        {
+          id: 'Chatterbox',
+          label: 'Chatterbox',
+          icon: 'icon-[lucide--package]'
+        },
+        {
+          id: 'OtherFolder',
+          label: 'OtherFolder',
+          icon: 'icon-[lucide--package]'
+        }
+      ])
+
+      // When selecting Chatterbox category, should include all models from its subfolders
+      selectedCategory.value = 'Chatterbox'
+      expect(categoryFilteredAssets.value).toHaveLength(3)
+      expect(categoryFilteredAssets.value.map((a) => a.id)).toEqual([
+        'asset-1',
+        'asset-2',
+        'asset-3'
+      ])
+
+      // When selecting OtherFolder category, should include only its models
+      selectedCategory.value = 'OtherFolder'
+      expect(categoryFilteredAssets.value).toHaveLength(1)
+      expect(categoryFilteredAssets.value[0].id).toBe('asset-4')
+    })
   })
 })

tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts

@@ -1,486 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
-import { useDialogStore } from '@/stores/dialogStore'
-import ManagerProgressFooter from '@/workbench/extensions/manager/components/ManagerProgressFooter.vue'
-import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
-import {
-  useComfyManagerStore,
-  useManagerProgressDialogStore
-} from '@/workbench/extensions/manager/stores/comfyManagerStore'
-import type { TaskLog } from '@/workbench/extensions/manager/types/comfyManagerTypes'
-
-// Mock modules
-vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore')
-vi.mock('@/stores/dialogStore')
-vi.mock('@/platform/settings/settingStore')
-vi.mock('@/stores/commandStore')
-vi.mock('@/workbench/extensions/manager/services/comfyManagerService')
-vi.mock(
-  '@/workbench/extensions/manager/composables/useConflictDetection',
-  () => ({
-    useConflictDetection: vi.fn(() => ({
-      conflictedPackages: { value: [] },
-      runFullConflictAnalysis: vi.fn().mockResolvedValue(undefined)
-    }))
-  })
-)
-
-// Mock useEventListener to capture the event handler
-let reconnectHandler: (() => void) | null = null
-vi.mock('@vueuse/core', async () => {
-  const actual = await vi.importActual('@vueuse/core')
-  return {
-    ...actual,
-    useEventListener: vi.fn(
-      (_target: any, event: string, handler: any, _options: any) => {
-        if (event === 'reconnected') {
-          reconnectHandler = handler
-        }
-      }
-    )
-  }
-})
-vi.mock('@/platform/workflow/core/services/workflowService', () => ({
-  useWorkflowService: vi.fn(() => ({
-    reloadCurrentWorkflow: vi.fn().mockResolvedValue(undefined)
-  }))
-}))
-vi.mock('@/stores/workspace/colorPaletteStore', () => ({
-  useColorPaletteStore: vi.fn(() => ({
-    completedActivePalette: {
-      light_theme: false
-    }
-  }))
-}))
-
-// Helper function to mount component with required setup
-const mountComponent = (options: { captureError?: boolean } = {}) => {
-  const pinia = createPinia()
-  setActivePinia(pinia)
-
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        g: {
-          close: 'Close',
-          progressCountOf: 'of'
-        },
-        contextMenu: {
-          Collapse: 'Collapse',
-          Expand: 'Expand'
-        },
-        manager: {
-          clickToFinishSetup: 'Click',
-          applyChanges: 'Apply Changes',
-          toFinishSetup: 'to finish setup',
-          restartingBackend: 'Restarting backend to apply changes...',
-          extensionsSuccessfullyInstalled:
-            'Extension(s) successfully installed and are ready to use!',
-          restartToApplyChanges: 'To apply changes, please restart ComfyUI',
-          installingDependencies: 'Installing dependencies...'
-        }
-      }
-    }
-  })
-
-  const config: any = {
-    global: {
-      plugins: [pinia, PrimeVue, i18n]
-    }
-  }
-
-  // Add error handler for tests that expect errors
-  if (options.captureError) {
-    config.global.config = {
-      errorHandler: () => {
-        // Suppress error in test
-      }
-    }
-  }
-
-  return mount(ManagerProgressFooter, config)
-}
-
-describe('ManagerProgressFooter', () => {
-  const mockTaskLogs: TaskLog[] = []
-
-  const mockComfyManagerStore = {
-    taskLogs: mockTaskLogs,
-    allTasksDone: true,
-    isProcessingTasks: false,
-    succeededTasksIds: [] as string[],
-    failedTasksIds: [] as string[],
-    taskHistory: {} as Record<string, any>,
-    taskQueue: null,
-    resetTaskState: vi.fn(),
-    clearLogs: vi.fn(),
-    setStale: vi.fn(),
-    // Add other required properties
-    isLoading: { value: false },
-    error: { value: null },
-    statusMessage: { value: 'DONE' },
-    installedPacks: {},
-    installedPacksIds: new Set(),
-    isPackInstalled: vi.fn(),
-    isPackEnabled: vi.fn(),
-    getInstalledPackVersion: vi.fn(),
-    refreshInstalledList: vi.fn(),
-    installPack: vi.fn(),
-    uninstallPack: vi.fn(),
-    updatePack: vi.fn(),
-    updateAllPacks: vi.fn(),
-    disablePack: vi.fn(),
-    enablePack: vi.fn()
-  }
-
-  const mockDialogStore = {
-    closeDialog: vi.fn(),
-    // Add other required properties
-    dialogStack: { value: [] },
-    showDialog: vi.fn(),
-    $id: 'dialog',
-    $state: {} as any,
-    $patch: vi.fn(),
-    $reset: vi.fn(),
-    $subscribe: vi.fn(),
-    $dispose: vi.fn(),
-    $onAction: vi.fn()
-  }
-
-  const mockSettingStore = {
-    get: vi.fn().mockReturnValue(false),
-    set: vi.fn(),
-    // Add other required properties
-    settingValues: { value: {} },
-    settingsById: { value: {} },
-    exists: vi.fn(),
-    getDefaultValue: vi.fn(),
-    loadSettingValues: vi.fn(),
-    updateValue: vi.fn(),
-    $id: 'setting',
-    $state: {} as any,
-    $patch: vi.fn(),
-    $reset: vi.fn(),
-    $subscribe: vi.fn(),
-    $dispose: vi.fn(),
-    $onAction: vi.fn()
-  }
-
-  const mockProgressDialogStore = {
-    isExpanded: false,
-    toggle: vi.fn(),
-    collapse: vi.fn(),
-    expand: vi.fn()
-  }
-
-  const mockCommandStore = {
-    execute: vi.fn().mockResolvedValue(undefined)
-  }
-
-  const mockComfyManagerService = {
-    rebootComfyUI: vi.fn().mockResolvedValue(null)
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    // Create new pinia instance for each test
-    const pinia = createPinia()
-    setActivePinia(pinia)
-
-    // Reset task logs
-    mockTaskLogs.length = 0
-    mockComfyManagerStore.taskLogs = mockTaskLogs
-    // Reset event handler
-    reconnectHandler = null
-
-    vi.mocked(useComfyManagerStore).mockReturnValue(
-      mockComfyManagerStore as any
-    )
-    vi.mocked(useDialogStore).mockReturnValue(mockDialogStore as any)
-    vi.mocked(useSettingStore).mockReturnValue(mockSettingStore as any)
-    vi.mocked(useManagerProgressDialogStore).mockReturnValue(
-      mockProgressDialogStore as any
-    )
-    vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
-    vi.mocked(useComfyManagerService).mockReturnValue(
-      mockComfyManagerService as any
-    )
-  })
-
-  describe('State 1: Queue Running', () => {
-    it('should display loading spinner and progress counter when queue is running', async () => {
-      // Setup queue running state
-      mockComfyManagerStore.isProcessingTasks = true
-      mockComfyManagerStore.succeededTasksIds = ['1', '2']
-      mockComfyManagerStore.failedTasksIds = []
-      mockComfyManagerStore.taskHistory = {
-        '1': { taskName: 'Installing pack1' },
-        '2': { taskName: 'Installing pack2' },
-        '3': { taskName: 'Installing pack3' }
-      }
-      mockTaskLogs.push(
-        { taskName: 'Installing pack1', taskId: '1', logs: [] },
-        { taskName: 'Installing pack2', taskId: '2', logs: [] },
-        { taskName: 'Installing pack3', taskId: '3', logs: [] }
-      )
-
-      const wrapper = mountComponent()
-
-      // Check loading spinner exists (DotSpinner component)
-      expect(wrapper.find('.inline-flex').exists()).toBe(true)
-
-      // Check current task name is displayed
-      expect(wrapper.text()).toContain('Installing pack3')
-
-      // Check progress counter (completed: 2 of 3)
-      expect(wrapper.text()).toMatch(/2.*of.*3/)
-
-      // Check expand/collapse button exists
-      const expandButton = wrapper.find('[aria-label="Expand"]')
-      expect(expandButton.exists()).toBe(true)
-
-      // Check Apply Changes button is NOT shown
-      expect(wrapper.text()).not.toContain('Apply Changes')
-    })
-
-    it('should toggle expansion when expand button is clicked', async () => {
-      mockComfyManagerStore.isProcessingTasks = true
-      mockTaskLogs.push({ taskName: 'Installing', taskId: '1', logs: [] })
-
-      const wrapper = mountComponent()
-
-      const expandButton = wrapper.find('[aria-label="Expand"]')
-      await expandButton.trigger('click')
-
-      expect(mockProgressDialogStore.toggle).toHaveBeenCalled()
-    })
-  })
-
-  describe('State 2: Tasks Completed (Waiting for Restart)', () => {
-    it('should display check mark and Apply Changes button when all tasks are done', async () => {
-      // Setup tasks completed state
-      mockComfyManagerStore.isProcessingTasks = false
-      mockTaskLogs.push(
-        { taskName: 'Installed pack1', taskId: '1', logs: [] },
-        { taskName: 'Installed pack2', taskId: '2', logs: [] }
-      )
-      mockComfyManagerStore.allTasksDone = true
-
-      const wrapper = mountComponent()
-
-      // Check check mark emoji
-      expect(wrapper.text()).toContain('✅')
-
-      // Check restart message
-      expect(wrapper.text()).toContain(
-        'To apply changes, please restart ComfyUI'
-      )
-      expect(wrapper.text()).toContain('Apply Changes')
-
-      // Check Apply Changes button exists
-      const applyButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Apply Changes'))
-      expect(applyButton).toBeTruthy()
-
-      // Check no progress counter
-      expect(wrapper.text()).not.toMatch(/\d+.*of.*\d+/)
-    })
-  })
-
-  describe('State 3: Restarting', () => {
-    it('should display restarting message and spinner during restart', async () => {
-      // Setup completed state first
-      mockComfyManagerStore.isProcessingTasks = false
-      mockComfyManagerStore.allTasksDone = true
-
-      const wrapper = mountComponent()
-
-      // Click Apply Changes to trigger restart
-      const applyButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Apply Changes'))
-      await applyButton?.trigger('click')
-
-      // Wait for state update
-      await nextTick()
-
-      // Check restarting message
-      expect(wrapper.text()).toContain('Restarting backend to apply changes...')
-
-      // Check loading spinner during restart
-      expect(wrapper.find('.inline-flex').exists()).toBe(true)
-
-      // Check Apply Changes button is hidden
-      expect(wrapper.text()).not.toContain('Apply Changes')
-    })
-  })
-
-  describe('State 4: Restart Completed', () => {
-    it('should display success message and auto-close after 3 seconds', async () => {
-      vi.useFakeTimers()
-
-      // Setup completed state
-      mockComfyManagerStore.isProcessingTasks = false
-      mockComfyManagerStore.allTasksDone = true
-
-      const wrapper = mountComponent()
-
-      // Trigger restart
-      const applyButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Apply Changes'))
-      await applyButton?.trigger('click')
-
-      // Wait for event listener to be set up
-      await nextTick()
-
-      // Trigger the reconnect handler directly
-      if (reconnectHandler) {
-        await reconnectHandler()
-      }
-
-      // Wait for restart completed state
-      await nextTick()
-
-      // Check success message
-      expect(wrapper.text()).toContain('🎉')
-      expect(wrapper.text()).toContain(
-        'Extension(s) successfully installed and are ready to use!'
-      )
-
-      // Check dialog closes after 3 seconds
-      vi.advanceTimersByTime(3000)
-
-      await nextTick()
-
-      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
-        key: 'global-manager-progress-dialog'
-      })
-      expect(mockComfyManagerStore.resetTaskState).toHaveBeenCalled()
-
-      vi.useRealTimers()
-    })
-  })
-
-  describe('Common Features', () => {
-    it('should always display close button', async () => {
-      const wrapper = mountComponent()
-
-      const closeButton = wrapper.find('[aria-label="Close"]')
-      expect(closeButton.exists()).toBe(true)
-    })
-
-    it('should close dialog when close button is clicked', async () => {
-      const wrapper = mountComponent()
-
-      const closeButton = wrapper.find('[aria-label="Close"]')
-      await closeButton.trigger('click')
-
-      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
-        key: 'global-manager-progress-dialog'
-      })
-    })
-  })
-
-  describe('Toast Management', () => {
-    it('should suppress reconnection toasts during restart', async () => {
-      mockComfyManagerStore.isProcessingTasks = false
-      mockComfyManagerStore.allTasksDone = true
-      mockSettingStore.get.mockReturnValue(false) // Original setting
-
-      const wrapper = mountComponent()
-
-      // Click Apply Changes
-      const applyButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Apply Changes'))
-      await applyButton?.trigger('click')
-
-      // Check toast setting was disabled
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
-        'Comfy.Toast.DisableReconnectingToast',
-        true
-      )
-    })
-
-    it('should restore toast settings after restart completes', async () => {
-      mockComfyManagerStore.isProcessingTasks = false
-      mockComfyManagerStore.allTasksDone = true
-      mockSettingStore.get.mockReturnValue(false) // Original setting
-
-      const wrapper = mountComponent()
-
-      // Click Apply Changes
-      const applyButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Apply Changes'))
-      await applyButton?.trigger('click')
-
-      // Wait for event listener to be set up
-      await nextTick()
-
-      // Trigger the reconnect handler directly
-      if (reconnectHandler) {
-        await reconnectHandler()
-      }
-
-      // Wait for settings restoration
-      await nextTick()
-
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
-        'Comfy.Toast.DisableReconnectingToast',
-        false // Restored to original
-      )
-    })
-  })
-
-  describe('Error Handling', () => {
-    it('should restore state and close dialog on restart error', async () => {
-      mockComfyManagerStore.isProcessingTasks = false
-      mockComfyManagerStore.allTasksDone = true
-
-      // Mock restart to throw error
-      mockComfyManagerService.rebootComfyUI.mockRejectedValue(
-        new Error('Restart failed')
-      )
-
-      const wrapper = mountComponent({ captureError: true })
-
-      // Click Apply Changes
-      const applyButton = wrapper
-        .findAll('button')
-        .find((btn) => btn.text().includes('Apply Changes'))
-
-      expect(applyButton).toBeTruthy()
-
-      // The component throws the error but Vue Test Utils catches it
-      // We need to check if the error handling logic was executed
-      await applyButton!.trigger('click').catch(() => {
-        // Error is expected, ignore it
-      })
-
-      // Wait for error handling
-      await nextTick()
-
-      // Check dialog was closed on error
-      expect(mockDialogStore.closeDialog).toHaveBeenCalled()
-      // Check toast settings were restored
-      expect(mockSettingStore.set).toHaveBeenCalledWith(
-        'Comfy.Toast.DisableReconnectingToast',
-        false
-      )
-      // Check that the error handler was called
-      expect(mockComfyManagerService.rebootComfyUI).toHaveBeenCalled()
-    })
-  })
-})

tests-ui/tests/composables/graph/useGraphNodeManager.test.ts

@@ -0,0 +1,49 @@
+import { setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick, watch } from 'vue'
+
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
+
+setActivePinia(createTestingPinia())
+
+function createTestGraph() {
+  const graph = new LGraph()
+  const node = new LGraphNode('test')
+  node.addInput('input', 'INT')
+  node.addWidget('number', 'testnum', 2, () => undefined, {})
+  graph.add(node)
+
+  const { vueNodeData } = useGraphNodeManager(graph)
+  const onReactivityUpdate = vi.fn()
+  watch(vueNodeData, onReactivityUpdate)
+
+  return [node, graph, onReactivityUpdate] as const
+}
+
+describe('Node Reactivity', () => {
+  it('should trigger on callback', async () => {
+    const [node, , onReactivityUpdate] = createTestGraph()
+
+    node.widgets![0].callback!(2)
+    await nextTick()
+    expect(onReactivityUpdate).toHaveBeenCalledTimes(1)
+  })
+
+  it('should remain reactive after a connection is made', async () => {
+    const [node, graph, onReactivityUpdate] = createTestGraph()
+
+    graph.trigger('node:slot-links:changed', {
+      nodeId: '1',
+      slotType: NodeSlotType.INPUT
+    })
+    await nextTick()
+    onReactivityUpdate.mockClear()
+
+    node.widgets![0].callback!(2)
+    await nextTick()
+    expect(onReactivityUpdate).toHaveBeenCalledTimes(1)
+  })
+})

tests-ui/tests/composables/node/useNodePricing.test.ts

@@ -1664,31 +1664,41 @@ describe('useNodePricing', () => {
           {
             model: 'gemini-2.5-pro-preview-05-06',
             expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gemini-2.5-pro',
             expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gemini-3-pro-preview',
             expected: creditsListLabel([0.002, 0.012], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gemini-2.5-flash-preview-04-17',
             expected: creditsListLabel([0.0003, 0.0025], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gemini-2.5-flash',
             expected: creditsListLabel([0.0003, 0.0025], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           { model: 'unknown-gemini-model', expected: 'Token-based' }
@@ -1702,16 +1712,6 @@ describe('useNodePricing', () => {
         })
       })
 
-      it('should return per-second pricing for Gemini Veo models', () => {
-        const { getNodeDisplayPrice } = useNodePricing()
-        const node = createMockNode('GeminiNode', [
-          { name: 'model', value: 'veo-2.0-generate-001' }
-        ])
-
-        const price = getNodeDisplayPrice(node)
-        expect(price).toBe(creditsLabel(0.5, { suffix: '/second' }))
-      })
-
       it('should return fallback for GeminiNode without model widget', () => {
         const { getNodeDisplayPrice } = useNodePricing()
         const node = createMockNode('GeminiNode', [])
@@ -1737,73 +1737,97 @@ describe('useNodePricing', () => {
           {
             model: 'o4-mini',
             expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'o1-pro',
             expected: creditsListLabel([0.15, 0.6], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'o1',
             expected: creditsListLabel([0.015, 0.06], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'o3-mini',
             expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'o3',
             expected: creditsListLabel([0.01, 0.04], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-4o',
             expected: creditsListLabel([0.0025, 0.01], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-4.1-nano',
             expected: creditsListLabel([0.0001, 0.0004], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-4.1-mini',
             expected: creditsListLabel([0.0004, 0.0016], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-4.1',
             expected: creditsListLabel([0.002, 0.008], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-5-nano',
             expected: creditsListLabel([0.00005, 0.0004], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-5-mini',
             expected: creditsListLabel([0.00025, 0.002], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-5',
             expected: creditsListLabel([0.00125, 0.01], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           }
         ]
@@ -1824,37 +1848,49 @@ describe('useNodePricing', () => {
           {
             model: 'gpt-4.1-nano-test',
             expected: creditsListLabel([0.0001, 0.0004], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-4.1-mini-test',
             expected: creditsListLabel([0.0004, 0.0016], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'gpt-4.1-test',
             expected: creditsListLabel([0.002, 0.008], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'o1-pro-test',
             expected: creditsListLabel([0.15, 0.6], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'o1-test',
             expected: creditsListLabel([0.015, 0.06], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           {
             model: 'o3-mini-test',
             expected: creditsListLabel([0.0011, 0.0044], {
-              suffix: ' per 1K tokens'
+              suffix: ' per 1K tokens',
+              approximate: true,
+              separator: '-'
             })
           },
           { model: 'unknown-model', expected: 'Token-based' }

tests-ui/tests/composables/useManagerQueue.test.ts

@@ -4,13 +4,6 @@ import { ref } from 'vue'
 import { useManagerQueue } from '@/workbench/extensions/manager/composables/useManagerQueue'
 import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
-// Mock dialog service
-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => ({
-    showManagerProgressDialog: vi.fn()
-  })
-}))
-
 // Mock the app API
 vi.mock('@/scripts/app', () => ({
   app: {

tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts

@@ -33,6 +33,9 @@ const mockSubscriptionData = {
     const baseName = TIER_TO_NAME[mockSubscriptionTier.value]
     return mockIsYearlySubscription.value ? `${baseName} Yearly` : baseName
   }),
+  subscriptionStatus: computed(() => ({
+    renewal_date: '2024-12-31T00:00:00Z'
+  })),
   isYearlySubscription: computed(() => mockIsYearlySubscription.value),
   handleInvoiceHistory: vi.fn()
 }

tests-ui/tests/store/assetsStore.test.ts

@@ -15,6 +15,9 @@ vi.mock('@/scripts/api', () => ({
   api: {
     getHistory: vi.fn(),
     internalURL: vi.fn((path) => `http://localhost:3000${path}`),
+    apiURL: vi.fn((path) => `http://localhost:3000/api${path}`),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
     user: 'test-user'
   }
 }))

tests-ui/tests/store/comfyManagerStore.test.ts

@@ -17,12 +17,6 @@ vi.mock('@/workbench/extensions/manager/services/comfyManagerService', () => ({
   useComfyManagerService: vi.fn()
 }))
 
-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => ({
-    showManagerProgressDialog: vi.fn()
-  })
-}))
-
 vi.mock('@/workbench/extensions/manager/composables/useManagerQueue', () => {
   const enqueueTaskMock = vi.fn()
 

tests-ui/vitest-patterns.md

@@ -0,0 +1,138 @@
+---
+globs:
+  - '**/*.test.ts'
+  - '**/*.spec.ts'
+---
+
+# Vitest Patterns
+
+## Setup
+
+Use `createTestingPinia` from `@pinia/testing`, not `createPinia`:
+
+```typescript
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('MyStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.useFakeTimers()
+    vi.resetAllMocks()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+})
+```
+
+**Why `stubActions: false`?** By default, testing pinia stubs all actions. Set to `false` when testing actual store behavior.
+
+## Mock Patterns
+
+### Reset all mocks at once
+
+```typescript
+beforeEach(() => {
+  vi.resetAllMocks()  // Not individual mock.mockReset() calls
+})
+```
+
+### Module mocks with vi.mock()
+
+```typescript
+vi.mock('@/scripts/api', () => ({
+  api: {
+    addEventListener: vi.fn(),
+    fetchData: vi.fn()
+  }
+}))
+
+vi.mock('@/services/myService', () => ({
+  myService: {
+    doThing: vi.fn()
+  }
+}))
+```
+
+### Configure mocks in tests
+
+```typescript
+import { api } from '@/scripts/api'
+import { myService } from '@/services/myService'
+
+it('handles success', () => {
+  vi.mocked(myService.doThing).mockResolvedValue({ data: 'test' })
+  // ... test code
+})
+```
+
+## Testing Event Listeners
+
+When a store registers event listeners at module load time:
+
+```typescript
+function getEventHandler() {
+  const call = vi.mocked(api.addEventListener).mock.calls.find(
+    ([event]) => event === 'my_event'
+  )
+  return call?.[1] as (e: CustomEvent<MyEventType>) => void
+}
+
+function dispatch(data: MyEventType) {
+  const handler = getEventHandler()
+  handler(new CustomEvent('my_event', { detail: data }))
+}
+
+it('handles events', () => {
+  const store = useMyStore()
+  dispatch({ field: 'value' })
+  expect(store.items).toHaveLength(1)
+})
+```
+
+## Testing with Fake Timers
+
+For stores with intervals, timeouts, or polling:
+
+```typescript
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+it('polls after delay', async () => {
+  const store = useMyStore()
+  store.startPolling()
+
+  await vi.advanceTimersByTimeAsync(30000)
+
+  expect(mockService.fetch).toHaveBeenCalled()
+})
+```
+
+## Assertion Style
+
+Prefer `.toHaveLength()` over `.length.toBe()`:
+
+```typescript
+// Good
+expect(store.items).toHaveLength(1)
+
+// Avoid
+expect(store.items.length).toBe(1)
+```
+
+Use `.toMatchObject()` for partial matching:
+
+```typescript
+expect(store.completedItems[0]).toMatchObject({
+  id: 'task-123',
+  status: 'done'
+})
+```