feat: Add loading state to PackInstallButton and improve UI (#5153)

* fix: api.ts file is different with main branch

* Update locales [skip ci]

* fix: restore support dotprop access

* fix: apply locales based on manager/menu-items-migration

* fix: Add missing shortcuts translation section for CI tests

- Added shortcuts section with keyboardShortcuts key
- Fixes failing Playwright test looking for 'Keyboard Shortcuts' aria-label
- Issue was caused by incomplete rebase from main branch

🤖 Generated with [Claude Code](https://claude.ai/code)

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

* fix: Add missing versionMismatchWarning translations for CI tests

- Added versionMismatchWarning section with all required keys
- Added general versionMismatch related keys (updateFrontend, dismiss, etc.)
- Fixes failing Playwright tests for version mismatch warnings
- These keys were lost during the rebase from main branch

🤖 Generated with [Claude Code](https://claude.ai/code)

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

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Claude <noreply@anthropic.com>

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -1,6 +1,5 @@
 name: Bug Report
 description: 'Report something that is not working correctly'
-title: '[Bug]: '
 labels: ['Potential Bug']
 type: Bug
 

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -1,7 +1,6 @@
 name: Feature Request
 description: Report a problem or limitation you're experiencing
-title: '[Feature]: '
-labels: ['enhancement']
+labels: []
 type: Feature
 
 body:

.github/workflows/test-ui.yaml

@@ -162,6 +162,9 @@ jobs:
         run: npx playwright install chromium --with-deps
         working-directory: ComfyUI_frontend
 
+      - name: Install Wrangler
+        run: npm install -g wrangler
+
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
         run: npx playwright test --project=${{ matrix.browser }} --reporter=html
@@ -177,11 +180,35 @@ jobs:
       - name: Deploy to Cloudflare Pages (${{ matrix.browser }})
         id: cloudflare-deploy
         if: always()
-        uses: cloudflare/wrangler-action@v3
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: pages deploy ComfyUI_frontend/playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}
+        run: |
+          # Retry logic for wrangler deploy (3 attempts)
+          RETRY_COUNT=0
+          MAX_RETRIES=3
+          SUCCESS=false
+          
+          while [ $RETRY_COUNT -lt $MAX_RETRIES ] && [ $SUCCESS = false ]; do
+            RETRY_COUNT=$((RETRY_COUNT + 1))
+            echo "Deployment attempt $RETRY_COUNT of $MAX_RETRIES..."
+            
+            if npx wrangler pages deploy ComfyUI_frontend/playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}; then
+              SUCCESS=true
+              echo "Deployment successful on attempt $RETRY_COUNT"
+            else
+              echo "Deployment failed on attempt $RETRY_COUNT"
+              if [ $RETRY_COUNT -lt $MAX_RETRIES ]; then
+                echo "Retrying in 10 seconds..."
+                sleep 10
+              fi
+            fi
+          done
+          
+          if [ $SUCCESS = false ]; then
+            echo "All deployment attempts failed"
+            exit 1
+          fi
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
 
       - name: Save deployment info for summary
         if: always()

.storybook/README.md

@@ -93,6 +93,44 @@ export const WithVariant: Story = {
 
 ## Development Tips
 
+## ComfyUI Storybook Guidelines
+
+### Scope – When to Create Stories
+- **PrimeVue components**:  
+  No need to create stories. Just refer to the official PrimeVue documentation.
+- **Custom shared components (design system components)**:  
+  Always create stories. These components are built in collaboration with designers, and Storybook serves as both documentation and a communication tool.
+- **Container components (logic-heavy)**:  
+  Do not create stories. Only the underlying pure UI components should be included in Storybook.
+
+### Maintenance Philosophy
+- Stories are lightweight and generally stable.  
+  Once created, they rarely need updates unless:
+  - The design changes
+  - New props (e.g. size, color variants) are introduced
+- For existing usage patterns, simply copy real code examples into Storybook to create stories.
+
+### File Placement
+- Keep `*.stories.ts` files at the **same level as the component** (similar to test files).  
+- This makes it easier to check usage examples without navigating to another directory.
+
+### Developer/Designer Workflow
+- **UI vs Container**: Separate pure UI components from container components.  
+  Only UI components should live in Storybook.
+- **Communication Tool**: Storybook is not just about code quality—it enables designers and developers to see:
+  - Which props exist
+  - What cases are covered
+  - How variants (e.g. size, colors) look in isolation
+- **Example**:  
+  `PackActionButton.vue` wraps a PrimeVue button with additional logic.  
+  → Only create a story for the base UI button, not for the wrapper.
+
+### Suggested Workflow
+1. Use PrimeVue docs for standard components  
+2. Use Storybook for **shared/custom components** that define our design system  
+3. Keep story files alongside components  
+4. When in doubt, focus on components reused across the app or those that need to be showcased to designers
+
 ### Best Practices
 
 1. **Keep Stories Simple**: Each story should demonstrate one specific use case
@@ -135,6 +173,7 @@ export const WithLongText: Story = {
 - **`main.ts`**: Core Storybook configuration and Vite integration
 - **`preview.ts`**: Global decorators, parameters, and Vue app setup
 - **`manager.ts`**: Storybook UI customization (if needed)
+- **`preview-head.html`**: Injects custom HTML into the `<head>` of every Storybook iframe (used for global styles, fonts, or fixes for iframe-specific issues)
 
 ## Chromatic Visual Testing
 
@@ -170,4 +209,22 @@ This Storybook setup includes:
 - PrimeVue component library integration
 - Proper alias resolution for `@/` imports
 
-For component-specific examples, see the NodePreview stories in `src/components/node/`.
+## Icon Usage in Storybook
+
+In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.  
+
+**Example:**
+
+```vue
+<script setup lang="ts">
+import { Trophy, Settings } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Trophy :size="16" class="text-neutral" />
+  <Settings :size="16" class="text-neutral" />
+</template>
+```
+
+This approach ensures icons render correctly in Storybook and remain consistent with the rest of the app.
+

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.26.5",
+  "version": "1.26.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.26.5",
+      "version": "1.26.6",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -84,6 +84,7 @@
         "identity-obj-proxy": "^3.0.0",
         "knip": "^5.62.0",
         "lint-staged": "^15.2.7",
+        "lucide-vue-next": "^0.540.0",
         "postcss": "^8.4.39",
         "prettier": "^3.3.2",
         "storybook": "^9.1.1",
@@ -12224,6 +12225,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.540.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.540.0.tgz",
+      "integrity": "sha512-H7qhKVNKLyoFMo05pWcGSWBiLPiI3zJmWV65SuXWHlrIGIcvDer10xAyWcRJ0KLzIH5k5+yi7AGw/Xi1VF8Pbw==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.26.5",
+  "version": "1.26.6",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -84,7 +84,8 @@
     "vitest": "^2.0.0",
     "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
-    "zod-to-json-schema": "^3.24.1"
+    "zod-to-json-schema": "^3.24.1",
+    "lucide-vue-next": "^0.540.0"
   },
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",

src/components/button/IconButton.stories.ts

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Bell, Download, Heart, Settings, Trophy, X } from 'lucide-vue-next'
+
+import IconButton from './IconButton.vue'
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/Button/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md']
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'transparent']
+    },
+    border: {
+      control: 'boolean',
+      description: 'Toggle border attribute'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle disable status'
+    },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { IconButton, Trophy },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <Trophy :size="16" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'primary',
+    size: 'md'
+  }
+}
+
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { IconButton, Settings },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <Settings :size="16" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'secondary',
+    size: 'md'
+  }
+}
+
+export const Transparent: Story = {
+  render: (args) => ({
+    components: { IconButton, X },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <X :size="16" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'transparent',
+    size: 'md'
+  }
+}
+
+export const Small: Story = {
+  render: (args) => ({
+    components: { IconButton, Bell },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <Bell :size="12" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'secondary',
+    size: 'sm'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { IconButton, Trophy, Settings, X, Bell, Heart, Download },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-2 items-center">
+          <IconButton type="primary" size="sm" @click="() => {}">
+            <Trophy :size="12" />
+          </IconButton>
+          <IconButton type="primary" size="md" @click="() => {}">
+            <Trophy :size="16" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="secondary" size="sm" @click="() => {}">
+            <Settings :size="12" />
+          </IconButton>
+          <IconButton type="secondary" size="md" @click="() => {}">
+            <Settings :size="16" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="transparent" size="sm" @click="() => {}">
+            <X :size="12" />
+          </IconButton>
+          <IconButton type="transparent" size="md" @click="() => {}">
+            <X :size="16" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="primary" size="md" @click="() => {}">
+            <Bell :size="16" />
+          </IconButton>
+          <IconButton type="secondary" size="md" @click="() => {}">
+            <Heart :size="16" />
+          </IconButton>
+          <IconButton type="transparent" size="md" @click="() => {}">
+            <Download :size="16" />
+          </IconButton>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/button/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button unstyled :class="buttonStyle" @click="onClick">
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <slot></slot>
   </Button>
 </template>
@@ -11,6 +11,7 @@ import { computed } from 'vue'
 import type { BaseButtonProps } from '@/types/buttonTypes'
 import {
   getBaseButtonClasses,
+  getBorderButtonTypeClasses,
   getButtonTypeClasses,
   getIconButtonSizeClasses
 } from '@/types/buttonTypes'
@@ -22,6 +23,8 @@ interface IconButtonProps extends BaseButtonProps {
 const {
   size = 'md',
   type = 'secondary',
+  border = false,
+  disabled = false,
   class: className,
   onClick
 } = defineProps<IconButtonProps>()
@@ -29,7 +32,9 @@ const {
 const buttonStyle = computed(() => {
   const baseClasses = `${getBaseButtonClasses()} p-0`
   const sizeClasses = getIconButtonSizeClasses(size)
-  const typeClasses = getButtonTypeClasses(type)
+  const typeClasses = border
+    ? getBorderButtonTypeClasses(type)
+    : getButtonTypeClasses(type)
 
   return [baseClasses, sizeClasses, typeClasses, className]
     .filter(Boolean)

src/components/button/IconGroup.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, ExternalLink, Heart } from 'lucide-vue-next'
+
+import IconButton from './IconButton.vue'
+import IconGroup from './IconGroup.vue'
+
+const meta: Meta<typeof IconGroup> = {
+  title: 'Components/Button/IconGroup',
+  component: IconGroup,
+  parameters: {
+    layout: 'centered'
+  }
+}
+export default meta
+
+type Story = StoryObj<typeof IconGroup>
+
+export const Basic: Story = {
+  render: () => ({
+    components: { IconGroup, IconButton, Download, ExternalLink, Heart },
+    template: `
+      <IconGroup>
+        <IconButton @click="console.log('Hello World!!')">
+          <Heart :size="16" />
+        </IconButton>
+        <IconButton @click="console.log('Hello World!!')">
+          <Download :size="16" />
+        </IconButton>
+        <IconButton @click="console.log('Hello World!!')">
+          <ExternalLink :size="16" />
+        </IconButton>
+      </IconGroup>
+    `
+  })
+}

src/components/button/IconTextButton.stories.ts

@@ -0,0 +1,229 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Package,
+  Save,
+  Settings,
+  Trash2,
+  X
+} from 'lucide-vue-next'
+
+import IconTextButton from './IconTextButton.vue'
+
+const meta: Meta<typeof IconTextButton> = {
+  title: 'Components/Button/IconTextButton',
+  component: IconTextButton,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md']
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'transparent']
+    },
+    border: {
+      control: 'boolean',
+      description: 'Toggle border attribute'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle disable status'
+    },
+    iconPosition: {
+      control: { type: 'select' },
+      options: ['left', 'right']
+    },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { IconTextButton, Package },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <Package :size="16" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Deploy',
+    type: 'primary',
+    size: 'md'
+  }
+}
+
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { IconTextButton, Settings },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <Settings :size="16" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Settings',
+    type: 'secondary',
+    size: 'md'
+  }
+}
+
+export const Transparent: Story = {
+  render: (args) => ({
+    components: { IconTextButton, X },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <X :size="16" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Cancel',
+    type: 'transparent',
+    size: 'md'
+  }
+}
+
+export const WithIconRight: Story = {
+  render: (args) => ({
+    components: { IconTextButton, ChevronRight },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <ChevronRight :size="16" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Next',
+    type: 'primary',
+    size: 'md',
+    iconPosition: 'right'
+  }
+}
+
+export const Small: Story = {
+  render: (args) => ({
+    components: { IconTextButton, Save },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconTextButton v-bind="args">
+        <template #icon>
+          <Save :size="12" />
+        </template>
+      </IconTextButton>
+    `
+  }),
+  args: {
+    label: 'Save',
+    type: 'primary',
+    size: 'sm'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: {
+      IconTextButton,
+      Download,
+      Settings,
+      Trash2,
+      ChevronRight,
+      ChevronLeft,
+      Save
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Download" type="primary" size="sm" @click="() => {}">
+            <template #icon>
+              <Download :size="12" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Download" type="primary" size="md" @click="() => {}">
+            <template #icon>
+              <Download :size="16" />
+            </template>
+          </IconTextButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Settings" type="secondary" size="sm" @click="() => {}">
+            <template #icon>
+              <Settings :size="12" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Settings" type="secondary" size="md" @click="() => {}">
+            <template #icon>
+              <Settings :size="16" />
+            </template>
+          </IconTextButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Delete" type="transparent" size="sm" @click="() => {}">
+            <template #icon>
+              <Trash2 :size="12" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Delete" type="transparent" size="md" @click="() => {}">
+            <template #icon>
+              <Trash2 :size="16" />
+            </template>
+          </IconTextButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconTextButton label="Next" type="primary" size="md" iconPosition="right" @click="() => {}">
+            <template #icon>
+              <ChevronRight :size="16" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Previous" type="secondary" size="md" @click="() => {}">
+            <template #icon>
+              <ChevronLeft :size="16" />
+            </template>
+          </IconTextButton>
+          <IconTextButton label="Save File" type="primary" size="md" @click="() => {}">
+            <template #icon>
+              <Save :size="16" />
+            </template>
+          </IconTextButton>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/button/IconTextButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button unstyled :class="buttonStyle" @click="onClick">
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <slot v-if="iconPosition !== 'right'" name="icon"></slot>
     <span>{{ label }}</span>
     <slot v-if="iconPosition === 'right'" name="icon"></slot>
@@ -13,6 +13,7 @@ import { computed } from 'vue'
 import type { BaseButtonProps } from '@/types/buttonTypes'
 import {
   getBaseButtonClasses,
+  getBorderButtonTypeClasses,
   getButtonSizeClasses,
   getButtonTypeClasses
 } from '@/types/buttonTypes'
@@ -26,6 +27,8 @@ interface IconTextButtonProps extends BaseButtonProps {
 const {
   size = 'md',
   type = 'primary',
+  border = false,
+  disabled = false,
   class: className,
   iconPosition = 'left',
   label,
@@ -35,7 +38,9 @@ const {
 const buttonStyle = computed(() => {
   const baseClasses = `${getBaseButtonClasses()} !justify-start gap-2`
   const sizeClasses = getButtonSizeClasses(size)
-  const typeClasses = getButtonTypeClasses(type)
+  const typeClasses = border
+    ? getBorderButtonTypeClasses(type)
+    : getButtonTypeClasses(type)
 
   return [baseClasses, sizeClasses, typeClasses, className]
     .filter(Boolean)

src/components/button/MoreButton.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, ScrollText } from 'lucide-vue-next'
+
+import IconTextButton from './IconTextButton.vue'
+import MoreButton from './MoreButton.vue'
+
+const meta: Meta<typeof MoreButton> = {
+  title: 'Components/Button/MoreButton',
+  component: MoreButton,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {}
+}
+export default meta
+
+type Story = StoryObj<typeof MoreButton>
+
+export const Basic: Story = {
+  render: () => ({
+    components: { MoreButton, IconTextButton, Download, ScrollText },
+    template: `
+      <div style="height: 200px; display: flex; align-items: center; justify-content: center;">
+        <MoreButton>
+          <template #default="{ close }">
+            <IconTextButton
+              type="secondary"
+              label="Settings"
+              @click="() => { close() }"
+            >
+              <template #icon>
+                <Download />
+              </template>
+            </IconTextButton>
+
+            <IconTextButton
+              type="primary"
+              label="Profile"
+              @click="() => { close() }"
+            >
+              <template #icon>
+                <ScrollText />
+              </template>
+            </IconTextButton>
+          </template>
+        </MoreButton>
+      </div>
+    `
+  })
+}

src/components/button/TextButton.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import TextButton from './TextButton.vue'
+
+const meta: Meta<typeof TextButton> = {
+  title: 'Components/Button/TextButton',
+  component: TextButton,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'Click me'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+      defaultValue: 'md'
+    },
+    border: {
+      control: 'boolean',
+      description: 'Toggle border attribute'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle disable status'
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'transparent'],
+      defaultValue: 'primary'
+    },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    type: 'primary',
+    size: 'md'
+  }
+}
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary Button',
+    type: 'secondary',
+    size: 'md'
+  }
+}
+
+export const Transparent: Story = {
+  args: {
+    label: 'Transparent Button',
+    type: 'transparent',
+    size: 'md'
+  }
+}
+
+export const Small: Story = {
+  args: {
+    label: 'Small Button',
+    type: 'primary',
+    size: 'sm'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { TextButton },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-2 items-center">
+          <TextButton label="Primary Small" type="primary" size="sm" @click="() => {}" />
+          <TextButton label="Primary Medium" type="primary" size="md" @click="() => {}" />
+        </div>
+        <div class="flex gap-2 items-center">
+          <TextButton label="Secondary Small" type="secondary" size="sm" @click="() => {}" />
+          <TextButton label="Secondary Medium" type="secondary" size="md" @click="() => {}" />
+        </div>
+        <div class="flex gap-2 items-center">
+          <TextButton label="Transparent Small" type="transparent" size="sm" @click="() => {}" />
+          <TextButton label="Transparent Medium" type="transparent" size="md" @click="() => {}" />
+        </div>
+      </div>
+    `
+  })
+}

src/components/button/TextButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button unstyled :class="buttonStyle" role="button" @click="onClick">
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <span>{{ label }}</span>
   </Button>
 </template>
@@ -11,6 +11,7 @@ import { computed } from 'vue'
 import type { BaseButtonProps } from '@/types/buttonTypes'
 import {
   getBaseButtonClasses,
+  getBorderButtonTypeClasses,
   getButtonSizeClasses,
   getButtonTypeClasses
 } from '@/types/buttonTypes'
@@ -23,6 +24,8 @@ interface TextButtonProps extends BaseButtonProps {
 const {
   size = 'md',
   type = 'primary',
+  border = false,
+  disabled = false,
   class: className,
   label,
   onClick
@@ -31,7 +34,9 @@ const {
 const buttonStyle = computed(() => {
   const baseClasses = getBaseButtonClasses()
   const sizeClasses = getButtonSizeClasses(size)
-  const typeClasses = getButtonTypeClasses(type)
+  const typeClasses = border
+    ? getBorderButtonTypeClasses(type)
+    : getButtonTypeClasses(type)
 
   return [baseClasses, sizeClasses, typeClasses, className]
     .filter(Boolean)

src/components/card/Card.stories.ts

@@ -0,0 +1,665 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  Download,
+  Folder,
+  Heart,
+  Info,
+  MoreVertical,
+  Star,
+  Upload
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+import IconButton from '../button/IconButton.vue'
+import SquareChip from '../chip/SquareChip.vue'
+import CardBottom from './CardBottom.vue'
+import CardContainer from './CardContainer.vue'
+import CardDescription from './CardDescription.vue'
+import CardTitle from './CardTitle.vue'
+import CardTop from './CardTop.vue'
+
+interface CardStoryArgs {
+  // CardContainer props
+  containerRatio: 'square' | 'portrait' | 'tallPortrait'
+  maxWidth: number
+  minWidth: number
+
+  // CardTop props
+  topRatio: 'square' | 'landscape'
+
+  // Content props
+  showTopLeft: boolean
+  showTopRight: boolean
+  showBottomLeft: boolean
+  showBottomRight: boolean
+  showTitle: boolean
+  showDescription: boolean
+  title: string
+  description: string
+
+  // Visual props
+  backgroundColor: string
+  showImage: boolean
+  imageUrl: string
+
+  // Tag props
+  tags: string[]
+  showFileSize: boolean
+  fileSize: string
+  showFileType: boolean
+  fileType: string
+}
+
+const meta: Meta<CardStoryArgs> = {
+  title: 'Components/Card/Card',
+  argTypes: {
+    containerRatio: {
+      control: 'select',
+      options: ['square', 'portrait', 'tallPortrait'],
+      description: 'Card container aspect ratio'
+    },
+    maxWidth: {
+      control: { type: 'range', min: 200, max: 600, step: 10 },
+      description: 'Maximum width in pixels'
+    },
+    minWidth: {
+      control: { type: 'range', min: 150, max: 400, step: 10 },
+      description: 'Minimum width in pixels'
+    },
+    topRatio: {
+      control: 'select',
+      options: ['square', 'landscape'],
+      description: 'Top section aspect ratio'
+    },
+    showTopLeft: {
+      control: 'boolean',
+      description: 'Show top-left slot content'
+    },
+    showTopRight: {
+      control: 'boolean',
+      description: 'Show top-right slot content'
+    },
+    showBottomLeft: {
+      control: 'boolean',
+      description: 'Show bottom-left slot content'
+    },
+    showBottomRight: {
+      control: 'boolean',
+      description: 'Show bottom-right slot content'
+    },
+    showTitle: {
+      control: 'boolean',
+      description: 'Show card title'
+    },
+    showDescription: {
+      control: 'boolean',
+      description: 'Show card description'
+    },
+    title: {
+      control: 'text',
+      description: 'Card title text'
+    },
+    description: {
+      control: 'text',
+      description: 'Card description text'
+    },
+    backgroundColor: {
+      control: 'color',
+      description: 'Background color for card top'
+    },
+    showImage: {
+      control: 'boolean',
+      description: 'Show image instead of color background'
+    },
+    imageUrl: {
+      control: 'text',
+      description: 'Image URL for card top'
+    },
+    tags: {
+      control: 'object',
+      description: 'Tags to display (array of strings)'
+    },
+    showFileSize: {
+      control: 'boolean',
+      description: 'Show file size tag'
+    },
+    fileSize: {
+      control: 'text',
+      description: 'File size text'
+    },
+    showFileType: {
+      control: 'boolean',
+      description: 'Show file type tag'
+    },
+    fileType: {
+      control: 'text',
+      description: 'File type text'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const createCardTemplate = (args: CardStoryArgs) => ({
+  components: {
+    CardContainer,
+    CardTop,
+    CardBottom,
+    CardTitle,
+    CardDescription,
+    IconButton,
+    SquareChip,
+    Info,
+    Folder,
+    Heart,
+    Download,
+    Star,
+    Upload,
+    MoreVertical
+  },
+  setup() {
+    const favorited = ref(false)
+    const toggleFavorite = () => {
+      favorited.value = !favorited.value
+    }
+
+    return {
+      args,
+      favorited,
+      toggleFavorite
+    }
+  },
+  template: `
+    <div class="p-4 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
+      <CardContainer 
+        :ratio="args.containerRatio" 
+        :max-width="args.maxWidth"
+        :min-width="args.minWidth"
+      >
+        <template #top>
+          <CardTop :ratio="args.topRatio">
+            <template #default>
+              <div 
+                v-if="!args.showImage"
+                class="w-full h-full"
+                :style="{ backgroundColor: args.backgroundColor }"
+              ></div>
+              <img 
+                v-else
+                :src="args.imageUrl || 'https://via.placeholder.com/400'"
+                class="w-full h-full object-cover"
+                alt="Card image"
+              />
+            </template>
+            
+            <template v-if="args.showTopLeft" #top-left>
+              <SquareChip label="Featured" />
+            </template>
+            
+            <template v-if="args.showTopRight" #top-right>
+              <IconButton
+                class="!bg-white/90 !text-neutral-900"
+                @click="() => console.log('Info clicked')"
+              >
+                <Info :size="16" />
+              </IconButton>
+              <IconButton
+                class="!bg-white/90"
+                :class="favorited ? '!text-red-500' : '!text-neutral-900'"
+                @click="toggleFavorite"
+              >
+                <Heart :size="16" :fill="favorited ? 'currentColor' : 'none'" />
+              </IconButton>
+            </template>
+            
+            <template v-if="args.showBottomLeft" #bottom-left>
+              <SquareChip label="New" />
+            </template>
+            
+            <template v-if="args.showBottomRight" #bottom-right>
+              <SquareChip v-if="args.showFileType" :label="args.fileType" />
+              <SquareChip v-if="args.showFileSize" :label="args.fileSize" />
+              <SquareChip v-for="tag in args.tags" :key="tag" :label="tag">
+                <template v-if="tag === 'LoRA'" #icon>
+                  <Folder :size="12" />
+                </template>
+              </SquareChip>
+            </template>
+          </CardTop>
+        </template>
+        
+        <template #bottom>
+          <CardBottom class="p-3">
+            <CardTitle v-if="args.showTitle">{{ args.title }}</CardTitle>
+            <CardDescription v-if="args.showDescription">{{ args.description }}</CardDescription>
+          </CardBottom>
+        </template>
+      </CardContainer>
+    </div>
+  `
+})
+
+export const Default: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerRatio: 'portrait',
+    maxWidth: 300,
+    minWidth: 200,
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: true,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Model Name',
+    description:
+      'This is a detailed description of the model that can span multiple lines',
+    backgroundColor: '#3b82f6',
+    showImage: false,
+    imageUrl: '',
+    tags: ['LoRA', 'SDXL'],
+    showFileSize: true,
+    fileSize: '1.2 MB',
+    showFileType: true,
+    fileType: 'safetensors'
+  }
+}
+
+export const SquareCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerRatio: 'square',
+    maxWidth: 400,
+    minWidth: 250,
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: true,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Workflow Bundle',
+    description:
+      'Complete workflow for image generation with all necessary nodes',
+    backgroundColor: '#10b981',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Workflow'],
+    showFileSize: true,
+    fileSize: '245 KB',
+    showFileType: true,
+    fileType: 'json'
+  }
+}
+
+export const TallPortraitCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerRatio: 'tallPortrait',
+    maxWidth: 280,
+    minWidth: 180,
+    topRatio: 'square',
+    showTopLeft: true,
+    showTopRight: true,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Premium Model',
+    description:
+      'High-quality photorealistic model trained on professional photography',
+    backgroundColor: '#8b5cf6',
+    showImage: false,
+    imageUrl: '',
+    tags: ['SD 1.5', 'Checkpoint'],
+    showFileSize: true,
+    fileSize: '2.1 GB',
+    showFileType: true,
+    fileType: 'ckpt'
+  }
+}
+
+export const ImageCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerRatio: 'portrait',
+    maxWidth: 350,
+    minWidth: 220,
+    topRatio: 'square',
+    showTopLeft: false,
+    showTopRight: true,
+    showBottomLeft: false,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Generated Image',
+    description: 'Created with DreamShaper XL',
+    backgroundColor: '#3b82f6',
+    showImage: true,
+    imageUrl: 'https://picsum.photos/400/400',
+    tags: ['Output'],
+    showFileSize: true,
+    fileSize: '856 KB',
+    showFileType: true,
+    fileType: 'png'
+  }
+}
+
+export const MinimalCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerRatio: 'square',
+    maxWidth: 300,
+    minWidth: 200,
+    topRatio: 'landscape',
+    showTopLeft: false,
+    showTopRight: false,
+    showBottomLeft: false,
+    showBottomRight: false,
+    showTitle: true,
+    showDescription: false,
+    title: 'Simple Card',
+    description: '',
+    backgroundColor: '#64748b',
+    showImage: false,
+    imageUrl: '',
+    tags: [],
+    showFileSize: false,
+    fileSize: '',
+    showFileType: false,
+    fileType: ''
+  }
+}
+
+export const FullFeaturedCard: Story = {
+  render: (args: CardStoryArgs) => createCardTemplate(args),
+  args: {
+    containerRatio: 'tallPortrait',
+    maxWidth: 320,
+    minWidth: 240,
+    topRatio: 'square',
+    showTopLeft: true,
+    showTopRight: true,
+    showBottomLeft: true,
+    showBottomRight: true,
+    showTitle: true,
+    showDescription: true,
+    title: 'Ultimate Model Pack',
+    description:
+      'Complete collection with checkpoints, LoRAs, embeddings, and VAE models for professional use',
+    backgroundColor: '#ef4444',
+    showImage: false,
+    imageUrl: '',
+    tags: ['Bundle', 'Premium', 'SDXL'],
+    showFileSize: true,
+    fileSize: '5.4 GB',
+    showFileType: true,
+    fileType: 'pack'
+  }
+}
+
+export const GridOfCards: Story = {
+  render: () => ({
+    components: {
+      CardContainer,
+      CardTop,
+      CardBottom,
+      CardTitle,
+      CardDescription,
+      IconButton,
+      SquareChip,
+      Info,
+      Folder,
+      Heart,
+      Download
+    },
+    setup() {
+      const cards = ref([
+        {
+          id: 1,
+          title: 'Realistic Vision',
+          description: 'Photorealistic model for portraits',
+          color: 'from-blue-400 to-blue-600',
+          ratio: 'portrait' as const,
+          tags: ['SD 1.5'],
+          size: '2.1 GB'
+        },
+        {
+          id: 2,
+          title: 'DreamShaper XL',
+          description: 'Artistic style model with enhanced details',
+          color: 'from-purple-400 to-pink-600',
+          ratio: 'portrait' as const,
+          tags: ['SDXL'],
+          size: '6.5 GB'
+        },
+        {
+          id: 3,
+          title: 'Anime LoRA',
+          description: 'Character style LoRA',
+          color: 'from-green-400 to-teal-600',
+          ratio: 'portrait' as const,
+          tags: ['LoRA'],
+          size: '144 MB'
+        },
+        {
+          id: 4,
+          title: 'VAE Model',
+          description: 'Enhanced color VAE',
+          color: 'from-orange-400 to-red-600',
+          ratio: 'portrait' as const,
+          tags: ['VAE'],
+          size: '335 MB'
+        },
+        {
+          id: 5,
+          title: 'Workflow Bundle',
+          description: 'Complete workflow setup',
+          color: 'from-indigo-400 to-blue-600',
+          ratio: 'portrait' as const,
+          tags: ['Workflow'],
+          size: '45 KB'
+        },
+        {
+          id: 6,
+          title: 'Embedding Pack',
+          description: 'Negative embeddings collection',
+          color: 'from-yellow-400 to-orange-600',
+          ratio: 'portrait' as const,
+          tags: ['Embedding'],
+          size: '2.3 MB'
+        }
+      ])
+
+      return { cards }
+    },
+    template: `
+      <div class="p-4 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
+        <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Model Gallery</h3>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
+          <CardContainer 
+            v-for="card in cards" 
+            :key="card.id"
+            :ratio="card.ratio"
+            :max-width="300"
+            :min-width="180"
+          >
+            <template #top>
+              <CardTop ratio="square">
+                <template #default>
+                  <div 
+                    class="w-full h-full bg-gray-600"
+                    :class="card.color"
+                  ></div>
+                </template>
+                
+                <template #top-right>
+                  <IconButton
+                    class="!bg-white/90 !text-neutral-900"
+                    @click="() => console.log('Info:', card.title)"
+                  >
+                    <Info :size="16" />
+                  </IconButton>
+                </template>
+                
+                <template #bottom-right>
+                  <SquareChip 
+                    v-for="tag in card.tags" 
+                    :key="tag" 
+                    :label="tag"
+                  >
+                    <template v-if="tag === 'LoRA'" #icon>
+                      <Folder :size="12" />
+                    </template>
+                  </SquareChip>
+                  <SquareChip :label="card.size" />
+                </template>
+              </CardTop>
+            </template>
+            
+            <template #bottom>
+              <CardBottom class="p-3">
+                <CardTitle>{{ card.title }}</CardTitle>
+                <CardDescription>{{ card.description }}</CardDescription>
+              </CardBottom>
+            </template>
+          </CardContainer>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const ResponsiveGrid: Story = {
+  render: () => ({
+    components: {
+      CardContainer,
+      CardTop,
+      CardBottom,
+      CardTitle,
+      CardDescription,
+      SquareChip
+    },
+    setup() {
+      const generateCards = (
+        count: number,
+        ratio: 'square' | 'portrait' | 'tallPortrait'
+      ) => {
+        return Array.from({ length: count }, (_, i) => ({
+          id: i + 1,
+          title: `Model ${i + 1}`,
+          description: `Description for model ${i + 1}`,
+          ratio,
+          color: `hsl(${(i * 60) % 360}, 70%, 60%)`
+        }))
+      }
+
+      const squareCards = ref(generateCards(4, 'square'))
+      const portraitCards = ref(generateCards(6, 'portrait'))
+      const tallCards = ref(generateCards(5, 'tallPortrait'))
+
+      return {
+        squareCards,
+        portraitCards,
+        tallCards
+      }
+    },
+    template: `
+      <div class="p-4 space-y-8 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Square Cards (1:1)</h3>
+          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <CardContainer 
+              v-for="card in squareCards" 
+              :key="card.id"
+              :ratio="card.ratio"
+              :max-width="400"
+              :min-width="200"
+            >
+              <template #top>
+                <CardTop ratio="landscape">
+                  <div 
+                    class="w-full h-full"
+                    :style="{ backgroundColor: card.color }"
+                  ></div>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom class="p-3">
+                  <CardTitle>{{ card.title }}</CardTitle>
+                  <CardDescription>{{ card.description }}</CardDescription>
+                </CardBottom>
+              </template>
+            </CardContainer>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Portrait Cards (2:3)</h3>
+          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            <CardContainer 
+              v-for="card in portraitCards" 
+              :key="card.id"
+              :ratio="card.ratio"
+              :max-width="280"
+              :min-width="160"
+            >
+              <template #top>
+                <CardTop ratio="square">
+                  <div 
+                    class="w-full h-full"
+                    :style="{ backgroundColor: card.color }"
+                  ></div>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom class="p-2">
+                  <CardTitle>{{ card.title }}</CardTitle>
+                </CardBottom>
+              </template>
+            </CardContainer>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Tall Portrait Cards (2:4)</h3>
+          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            <CardContainer 
+              v-for="card in tallCards" 
+              :key="card.id"
+              :ratio="card.ratio"
+              :max-width="260"
+              :min-width="150"
+            >
+              <template #top>
+                <CardTop ratio="square">
+                  <template #default>
+                    <div 
+                      class="w-full h-full"
+                      :style="{ backgroundColor: card.color }"
+                    ></div>
+                  </template>
+                  <template #bottom-right>
+                    <SquareChip :label="'#' + card.id" />
+                  </template>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom class="p-3">
+                  <CardTitle>{{ card.title }}</CardTitle>
+                  <CardDescription>{{ card.description }}</CardDescription>
+                </CardBottom>
+              </template>
+            </CardContainer>
+          </div>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/card/CardContainer.vue

@@ -13,8 +13,8 @@ const {
   maxWidth,
   minWidth
 } = defineProps<{
-  maxWidth: number
-  minWidth: number
+  maxWidth?: number
+  minWidth?: number
   ratio?: 'square' | 'portrait' | 'tallPortrait'
 }>()
 
@@ -31,8 +31,12 @@ const containerClasses = computed(() => {
   return `${baseClasses} ${ratioClasses[ratio]}`
 })
 
-const containerStyle = computed(() => ({
-  maxWidth: `${maxWidth}px`,
-  minWidth: `${minWidth}px`
-}))
+const containerStyle = computed(() =>
+  maxWidth || minWidth
+    ? {
+        maxWidth: `${maxWidth}px`,
+        minWidth: `${minWidth}px`
+      }
+    : {}
+)
 </script>

src/components/chip/SquareChip.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import SquareChip from './SquareChip.vue'
+
+const meta: Meta<typeof SquareChip> = {
+  title: 'Components/SquareChip',
+  component: SquareChip,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'Tag'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TagList: Story = {
+  render: () => ({
+    components: { SquareChip },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <SquareChip label="JavaScript" />
+        <SquareChip label="TypeScript" />
+        <SquareChip label="Vue.js" />
+        <SquareChip label="React" />
+        <SquareChip label="Node.js" />
+        <SquareChip label="Python" />
+        <SquareChip label="Docker" />
+        <SquareChip label="Kubernetes" />
+      </div>
+    `
+  })
+}

src/components/common/DotSpinner.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="inline-flex items-center justify-center"
+    :style="{ width: size + 'px', height: size + 'px' }"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      viewBox="0 0 14 14"
+      fill="none"
+      class="animate-spin"
+      :style="{ animationDuration: duration }"
+    >
+      <g clip-path="url(#clip0_776_9582)">
+        <!-- Top dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7 2.21053C7.61042 2.21053 8.10526 1.71568 8.10526 1.10526C8.10526 0.494843 7.61042 0 7 0C6.38958 0 5.89474 0.494843 5.89474 1.10526C5.89474 1.71568 6.38958 2.21053 7 2.21053Z"
+          :fill="color"
+        />
+        <!-- Left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.25s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.21053 7C2.21053 7.61042 1.71568 8.10526 1.10526 8.10526C0.494843 8.10526 0 7.61042 0 7C0 6.38958 0.494843 5.89474 1.10526 5.89474C1.71568 5.89474 2.21053 6.38958 2.21053 7Z"
+          :fill="color"
+        />
+        <!-- Right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.5s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14 7C14 7.61042 13.5052 8.10526 12.8947 8.10526C12.2843 8.10526 11.7895 7.61042 11.7895 7C11.7895 6.38958 12.2843 5.89474 12.8947 5.89474C13.5052 5.89474 14 6.38958 14 7Z"
+          :fill="color"
+        />
+        <!-- Bottom dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.75s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.10526 12.8947C8.10526 13.5052 7.61041 14 6.99999 14C6.38957 14 5.89473 13.5052 5.89473 12.8947C5.89473 12.2843 6.38957 11.7895 6.99999 11.7895C7.61041 11.7895 8.10526 12.2843 8.10526 12.8947Z"
+          :fill="color"
+        />
+        <!-- Top-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.125s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 3.61349C2.48203 4.04513 3.18184 4.04513 3.61347 3.61349C4.0451 3.18186 4.0451 2.48205 3.61347 2.05042C3.18184 1.61878 2.48203 1.61878 2.05039 2.05042C1.61876 2.48205 1.61876 3.18186 2.05039 3.61349Z"
+          :fill="color"
+        />
+        <!-- Bottom-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.625s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 11.9496C11.518 12.3812 10.8182 12.3812 10.3865 11.9496C9.9549 11.5179 9.9549 10.8181 10.3865 10.3865C10.8182 9.95485 11.518 9.95485 11.9496 10.3865C12.3812 10.8181 12.3812 11.5179 11.9496 11.9496Z"
+          :fill="color"
+        />
+        <!-- Bottom-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.875s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 11.9496C2.48203 12.3812 3.18184 12.3812 3.61347 11.9496C4.0451 11.5179 4.0451 10.8181 3.61347 10.3865C3.18184 9.95485 2.48203 9.95485 2.05039 10.3865C1.61876 10.8181 1.61876 11.5179 2.05039 11.9496Z"
+          :fill="color"
+        />
+        <!-- Top-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.375s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 3.61349C11.518 4.04513 10.8182 4.04513 10.3865 3.61349C9.9549 3.18186 9.9549 2.48205 10.3865 2.05042C10.8182 1.61878 11.518 1.61878 11.9496 2.05042C12.3812 2.48205 12.3812 3.18186 11.9496 3.61349Z"
+          :fill="color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_776_9582">
+          <rect width="14" height="14" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const { size = 24, duration = '2s' } = defineProps<{
+  size?: number
+  duration?: string
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+
+const color = computed(() =>
+  colorPaletteStore.completedActivePalette.light_theme ? '#2C2B30' : '#D4D4D4'
+)
+</script>
+
+<style scoped>
+.dot-animation {
+  animation: dot-pulse 1s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+
+  40% {
+    opacity: 1;
+  }
+}
+</style>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -31,12 +31,18 @@
       </div>
     </template>
   </ListBox>
-  <div v-if="isManagerInstalled" class="flex justify-end py-3">
+  <div v-if="!isLegacyManager" class="flex justify-end py-3">
     <PackInstallButton
-      :disabled="isLoading || !!error || missingNodePacks.length === 0"
+      size="md"
+      :disabled="!!error || missingNodePacks.length === 0"
+      :is-loading="isLoading"
+      :is-installing="isInstalling"
       :node-packs="missingNodePacks"
-      variant="black"
-      :label="$t('manager.installAllMissingNodes')"
+      :label="
+        isLoading
+          ? $t('manager.gettingInfo')
+          : $t('manager.installAllMissingNodes')
+      "
     />
     <Button label="Open Manager" size="small" outlined @click="openManager" />
   </div>
@@ -45,35 +51,35 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
-import { useAboutPanelStore } from '@/stores/aboutPanelStore'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
+import PackInstallButton from './manager/button/PackInstallButton.vue'
+
 const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
-const aboutPanelStore = useAboutPanelStore()
-
 // Get missing node packs from workflow with loading and error states
 const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
-// Determines if ComfyUI-Manager is installed by checking for its badge in the about panel
-// This allows us to conditionally show the Manager button only when the extension is available
-// TODO: Remove this check when Manager functionality is fully migrated into core
-const isManagerInstalled = computed(() => {
-  return aboutPanelStore.badges.some(
-    (badge) =>
-      badge.label.includes('ComfyUI-Manager') ||
-      badge.url.includes('ComfyUI-Manager')
+const comfyManagerStore = useComfyManagerStore()
+const isLegacyManager = ref(false)
+
+// Check if any of the missing packs are currently being installed
+const isInstalling = computed(() => {
+  if (!missingNodePacks.value?.length) return false
+  return missingNodePacks.value.some((pack) =>
+    comfyManagerStore.isPackInstalling(pack.id)
   )
 })
 
@@ -103,6 +109,13 @@ const openManager = () => {
     initialTab: ManagerTab.Missing
   })
 }
+
+onMounted(async () => {
+  const isLegacyResponse = await useComfyManagerService().isLegacyManagerUI()
+  if (isLegacyResponse?.is_legacy_manager_ui) {
+    isLegacyManager.value = true
+  }
+})
 </script>
 
 <style scoped>

src/components/dialog/content/manager/ManagerHeader.test.ts

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tag from 'primevue/tag'
+import Tooltip from 'primevue/tooltip'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import ManagerHeader from './ManagerHeader.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: enMessages
+  }
+})
+
+describe('ManagerHeader', () => {
+  const createWrapper = () => {
+    return mount(ManagerHeader, {
+      global: {
+        plugins: [createPinia(), PrimeVue, i18n],
+        directives: {
+          tooltip: Tooltip
+        },
+        components: {
+          Tag
+        }
+      }
+    })
+  }
+
+  it('renders the component title', () => {
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('h2').text()).toBe(
+      enMessages.manager.discoverCommunityContent
+    )
+  })
+
+  it('displays the legacy manager UI tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.exists()).toBe(true)
+    expect(tag.text()).toContain(enMessages.manager.legacyManagerUI)
+  })
+
+  it('applies info severity to the tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.classes()).toContain('p-tag-info')
+  })
+
+  it('displays info icon in the tag', () => {
+    const wrapper = createWrapper()
+
+    const icon = wrapper.find('.pi-info-circle')
+    expect(icon.exists()).toBe(true)
+  })
+
+  it('has cursor-help class on the tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.classes()).toContain('cursor-help')
+  })
+
+  it('has proper structure with flex container', () => {
+    const wrapper = createWrapper()
+
+    const flexContainer = wrapper.find('.flex.justify-end.ml-auto.pr-4')
+    expect(flexContainer.exists()).toBe(true)
+
+    const tag = flexContainer.find('[data-pc-name="tag"]')
+    expect(tag.exists()).toBe(true)
+  })
+})

src/components/dialog/content/manager/ManagerHeader.vue

@@ -4,6 +4,22 @@
       <h2 class="text-lg font-normal text-left">
         {{ $t('manager.discoverCommunityContent') }}
       </h2>
+      <div class="flex justify-end ml-auto pr-4">
+        <Tag
+          v-tooltip.left="$t('manager.legacyManagerUIDescription')"
+          severity="info"
+          icon="pi pi-info-circle"
+          :value="$t('manager.legacyManagerUI')"
+          class="cursor-help"
+          :pt="{
+            root: { class: 'text-xs' }
+          }"
+        />
+      </div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+</script>

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -12,11 +12,10 @@
     >
       <i
         v-if="isUpdateAvailable"
-        class="pi pi-arrow-circle-up text-blue-600"
-        style="font-size: 8px"
+        class="pi pi-arrow-circle-up text-blue-600 text-xs"
       />
       <span>{{ installedVersion }}</span>
-      <i class="pi pi-chevron-right" style="font-size: 8px" />
+      <i class="pi pi-chevron-right text-xxs" />
     </div>
 
     <Popover

src/components/dialog/content/manager/button/PackActionButton.vue

@@ -1,53 +0,0 @@
-<template>
-  <Button
-    outlined
-    class="!m-0 p-0 rounded-lg text-gray-900 dark-theme:text-gray-50"
-    :class="[
-      variant === 'black'
-        ? 'bg-neutral-900 text-white border-neutral-900'
-        : 'border-neutral-700',
-      fullWidth ? 'w-full' : 'w-min-content'
-    ]"
-    :disabled="loading"
-    v-bind="$attrs"
-    @click="onClick"
-  >
-    <span class="py-2 px-3 whitespace-nowrap">
-      <template v-if="loading">
-        {{ loadingMessage ?? $t('g.loading') }}
-      </template>
-      <template v-else>
-        {{ label }}
-      </template>
-    </span>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-const {
-  label,
-  loadingMessage,
-  fullWidth = false,
-  variant = 'default'
-} = defineProps<{
-  label: string
-  loading?: boolean
-  loadingMessage?: string
-  fullWidth?: boolean
-  variant?: 'default' | 'black'
-}>()
-
-const emit = defineEmits<{
-  action: []
-}>()
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const onClick = (): void => {
-  emit('action')
-}
-</script>

src/components/dialog/content/manager/button/PackInstallButton.vue

@@ -1,26 +1,28 @@
 <template>
-  <PackActionButton
+  <IconTextButton
     v-bind="$attrs"
-    :label="
-      label ??
-      (nodePacks.length > 1 ? $t('manager.installSelected') : $t('g.install'))
-    "
-    :severity="variant === 'black' ? undefined : 'secondary'"
-    :variant="variant"
-    :loading="isInstalling"
-    :loading-message="$t('g.installing')"
-    @action="installAllPacks"
-    @click="onClick"
-  />
+    type="transparent"
+    :label="computedLabel"
+    :border="true"
+    :size="size"
+    :disabled="isLoading || isInstalling"
+    @click="installAllPacks"
+  >
+    <template v-if="isLoading || isInstalling" #icon>
+      <DotSpinner duration="1s" :size="size === 'sm' ? 12 : 16" />
+    </template>
+  </IconTextButton>
 </template>
 
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { computed } from 'vue'
 
-import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import DotSpinner from '@/components/common/DotSpinner.vue'
+import { t } from '@/i18n'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { ButtonSize } from '@/types/buttonTypes'
 import {
-  IsInstallingKey,
   ManagerChannel,
   ManagerDatabaseSource,
   SelectedVersion
@@ -29,18 +31,20 @@ import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks, variant, label } = defineProps<{
+const {
+  nodePacks,
+  isLoading = false,
+  isInstalling = false,
+  label = 'Install',
+  size = 'sm'
+} = defineProps<{
   nodePacks: NodePack[]
-  variant?: 'default' | 'black'
+  isLoading?: boolean
+  isInstalling?: boolean
   label?: string
+  size?: ButtonSize
 }>()
 
-const isInstalling = inject(IsInstallingKey, ref(false))
-
-const onClick = (): void => {
-  isInstalling.value = true
-}
-
 const managerStore = useComfyManagerStore()
 
 const createPayload = (installItem: NodePack) => {
@@ -65,8 +69,6 @@ const installPack = (item: NodePack) =>
 const installAllPacks = async () => {
   if (!nodePacks?.length) return
 
-  isInstalling.value = true
-
   const uninstalledPacks = nodePacks.filter(
     (pack) => !managerStore.isPackInstalled(pack.id)
   )
@@ -75,4 +77,11 @@ const installAllPacks = async () => {
   await Promise.all(uninstalledPacks.map(installPack))
   managerStore.installPack.clear()
 }
+
+const computedLabel = computed(() =>
+  isInstalling
+    ? t('g.installing')
+    : label ??
+      (nodePacks.length > 1 ? t('manager.installSelected') : t('g.install'))
+)
 </script>

src/components/dialog/content/manager/button/PackUninstallButton.vue

@@ -1,27 +1,30 @@
 <template>
-  <PackActionButton
+  <IconTextButton
     v-bind="$attrs"
+    type="transparent"
     :label="
       nodePacks.length > 1
         ? $t('manager.uninstallSelected')
         : $t('manager.uninstall')
     "
-    severity="danger"
-    :loading-message="$t('manager.uninstalling')"
-    @action="uninstallItems"
+    :border="true"
+    :size="size"
+    class="border-red-500"
+    @click="uninstallItems"
   />
 </template>
 
 <script setup lang="ts">
-import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { ButtonSize } from '@/types/buttonTypes'
 import type { ManagerPackInfo } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks } = defineProps<{
+const { nodePacks, size } = defineProps<{
   nodePacks: NodePack[]
+  size?: ButtonSize
 }>()
 
 const managerStore = useComfyManagerStore()

src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue

@@ -16,9 +16,16 @@
         <PackUninstallButton
           v-if="isAllInstalled"
           v-bind="$attrs"
+          size="md"
+          :node-packs="nodePacks"
+        />
+        <PackInstallButton
+          v-else
+          v-bind="$attrs"
+          size="md"
+          :is-installing="isInstalling"
           :node-packs="nodePacks"
         />
-        <PackInstallButton v-else v-bind="$attrs" :node-packs="nodePacks" />
       </slot>
     </div>
   </div>
@@ -31,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
@@ -56,4 +63,10 @@ watch(
   },
   { immediate: true }
 )
+
+// Check if any of the packs are currently being installed
+const isInstalling = computed(() => {
+  if (!nodePacks?.length) return false
+  return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
+})
 </script>

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -10,7 +10,19 @@
           {{ $t('manager.packsSelected') }}
         </template>
         <template #install-button>
-          <PackInstallButton :full-width="true" :node-packs="nodePacks" />
+          <PackUninstallButton
+            v-if="isAllInstalled"
+            v-bind="$attrs"
+            size="md"
+            :node-packs="nodePacks"
+          />
+          <PackInstallButton
+            v-else
+            v-bind="$attrs"
+            size="md"
+            :is-installing="isInstalling"
+            :node-packs="nodePacks"
+          />
         </template>
       </InfoPanelHeader>
       <div class="mb-6">
@@ -31,13 +43,15 @@
 
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
-import { computed, onUnmounted } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 
 import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import PackUninstallButton from '@/components/dialog/content/manager/button/PackUninstallButton.vue'
 import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
 import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
 import PackIconStacked from '@/components/dialog/content/manager/packIcon/PackIconStacked.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { components } from '@/types/comfyRegistryTypes'
 
@@ -46,6 +60,24 @@ const { nodePacks } = defineProps<{
 }>()
 
 const { getNodeDefs } = useComfyRegistryStore()
+const managerStore = useComfyManagerStore()
+
+const isAllInstalled = ref(false)
+watch(
+  [() => nodePacks, () => managerStore.installedPacks],
+  () => {
+    isAllInstalled.value = nodePacks.every((nodePack) =>
+      managerStore.isPackInstalled(nodePack.id)
+    )
+  },
+  { immediate: true }
+)
+
+// Check if any of the packs are currently being installed
+const isInstalling = computed(() => {
+  if (!nodePacks?.length) return false
+  return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
+})
 
 const getPackNodes = async (pack: components['schemas']['Node']) => {
   if (!pack.latest_version?.version) return []

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -21,61 +21,48 @@
       <PackBanner :node-pack="nodePack" />
     </template>
     <template #content>
-      <template v-if="isInstalling">
-        <div
-          class="self-stretch inline-flex flex-col justify-center items-center gap-2 h-full"
-        >
-          <ProgressSpinner />
-          <div
-            class="self-stretch text-center justify-start text-sm font-medium leading-none"
+      <div class="pt-4 px-4 pb-3 w-full h-full">
+        <div class="flex flex-col gap-y-1 w-full h-full">
+          <span
+            class="text-sm font-bold truncate overflow-hidden text-ellipsis"
           >
-            {{ $t('g.installing') }}...
-          </div>
-        </div>
-      </template>
-      <template v-else>
-        <div class="pt-4 px-4 pb-3 w-full h-full">
-          <div class="flex flex-col gap-y-1 w-full h-full">
-            <span
-              class="text-sm font-bold truncate overflow-hidden text-ellipsis"
-            >
-              {{ nodePack.name }}
-            </span>
-            <p
-              v-if="nodePack.description"
-              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
-            >
-              {{ nodePack.description }}
-            </p>
-            <div class="flex flex-col gap-y-2">
-              <div class="flex-1 flex items-center gap-2">
-                <div v-if="nodesCount" class="p-2 pl-0 text-xs">
-                  {{ nodesCount }} {{ $t('g.nodes') }}
-                </div>
-                <PackVersionBadge
-                  :node-pack="nodePack"
-                  :is-selected="isSelected"
-                  :fill="false"
-                />
-                <div
-                  v-if="formattedLatestVersionDate"
-                  class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
-                >
-                  {{ formattedLatestVersionDate }}
-                </div>
+            {{ nodePack.name }}
+          </span>
+          <p
+            v-if="nodePack.description"
+            class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
+          >
+            {{ nodePack.description }}
+          </p>
+          <div class="flex flex-col gap-y-2">
+            <div class="flex-1 flex items-center gap-2">
+              <div v-if="nodesCount" class="p-2 pl-0 text-xs">
+                {{ nodesCount }} {{ $t('g.nodes') }}
               </div>
-              <div class="flex">
-                <span
-                  v-if="publisherName"
-                  class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
-                >
-                  {{ publisherName }}
-                </span>
+              <PackVersionBadge
+                :node-pack="nodePack"
+                :is-selected="isSelected"
+                :fill="false"
+                :class="isInstalling ? 'pointer-events-none' : ''"
+              />
+              <div
+                v-if="formattedLatestVersionDate"
+                class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
+              >
+                {{ formattedLatestVersionDate }}
               </div>
             </div>
+            <div class="flex">
+              <span
+                v-if="publisherName"
+                class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
+              >
+                {{ publisherName }}
+              </span>
+            </div>
           </div>
         </div>
-      </template>
+      </div>
     </template>
     <template #footer>
       <PackCardFooter :node-pack="nodePack" />
@@ -84,10 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
 import Card from 'primevue/card'
-import ProgressSpinner from 'primevue/progressspinner'
-import { computed, provide, ref } from 'vue'
+import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
@@ -114,18 +99,17 @@ const isLightTheme = computed(
   () => colorPaletteStore.completedActivePalette.light_theme
 )
 
-const isInstalling = ref(false)
-provide(IsInstallingKey, isInstalling)
+const { isPackInstalled, isPackEnabled, isPackInstalling } =
+  useComfyManagerStore()
 
-const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
+const isInstalling = computed(() => isPackInstalling(nodePack?.id))
+provide(IsInstallingKey, isInstalling)
 
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 const isDisabled = computed(
   () => isInstalled.value && !isPackEnabled(nodePack?.id)
 )
 
-whenever(isInstalled, () => (isInstalling.value = false))
-
 const nodesCount = computed(() =>
   isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined
 )

src/components/dialog/content/manager/packCard/PackCardFooter.vue

@@ -6,18 +6,23 @@
       <i class="pi pi-download text-muted"></i>
       <span>{{ formattedDownloads }}</span>
     </div>
-    <PackInstallButton v-if="!isInstalled" :node-packs="[nodePack]" />
+    <PackInstallButton
+      v-if="!isInstalled"
+      :node-packs="[nodePack]"
+      :is-installing="isInstalling"
+    />
     <PackEnableToggle v-else :node-pack="nodePack" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 
 const { nodePack } = defineProps<{
@@ -26,6 +31,7 @@ const { nodePack } = defineProps<{
 
 const { isPackInstalled } = useComfyManagerStore()
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+const isInstalling = inject(IsInstallingKey)
 
 const { n } = useI18n()
 

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -28,8 +28,8 @@
       </div>
       <PackInstallButton
         v-if="isMissingTab && missingNodePacks.length > 0"
-        variant="black"
         :disabled="isLoading || !!error"
+        :is-installing="isInstalling"
         :node-packs="missingNodePacks"
         :label="$t('manager.installAllMissingNodes')"
       />
@@ -67,6 +67,7 @@ import { useI18n } from 'vue-i18n'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import {
   type SearchOption,
   SortableAlgoliaField
@@ -96,6 +97,16 @@ const { t } = useI18n()
 // Get missing node packs from workflow with loading and error states
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 
+const comfyManagerStore = useComfyManagerStore()
+
+// Check if any of the missing packs are currently being installed
+const isInstalling = computed(() => {
+  if (!missingNodePacks.value?.length) return false
+  return missingNodePacks.value.some((pack) =>
+    comfyManagerStore.isPackInstalling(pack.id)
+  )
+})
+
 const hasResults = computed(
   () => searchQuery.value?.trim() && searchResults?.length
 )

src/components/dialog/footer/ManagerProgressFooter.vue

@@ -1,40 +1,47 @@
 <template>
   <div
-    class="w-full px-6 py-4 shadow-lg flex items-center justify-between"
+    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
     :class="{
       'rounded-t-none': progressDialogContent.isExpanded,
       'rounded-lg': !progressDialogContent.isExpanded
     }"
   >
-    <div class="justify-center text-sm font-bold leading-none">
+    <div class="flex items-center text-base leading-none">
       <div class="flex items-center">
-        <template v-if="isInProgress">
-          <i class="pi pi-spin pi-spinner mr-2 text-3xl" />
+        <!-- 1. Queue running (install/enable/disable etc.) -->
+        <template v-if="isQueueRunning">
+          <DotSpinner duration="1s" class="mr-2" />
           <span>{{ currentTaskName }}</span>
         </template>
+        <!-- 3. Restarting -->
+        <template v-else-if="isRestarting">
+          <DotSpinner duration="1s" class="mr-2" />
+          <span>{{ $t('manager.restartingBackend') }}</span>
+        </template>
+        <!-- 4. Restart completed -->
+        <template v-else-if="isRestartCompleted">
+          <span class="mr-2">🎉</span>
+          <span>{{ $t('manager.extensionsSuccessfullyInstalled') }}</span>
+        </template>
+        <!-- 2. Tasks completed (waiting for restart) -->
         <template v-else>
-          <i class="pi pi-check-circle mr-2 text-green-500" />
-          <span class="leading-none">{{
-            $t('manager.restartToApplyChanges')
-          }}</span>
+          <span class="mr-2">✅</span>
+          <span>
+            {{ $t('manager.clickToFinishSetup') }}
+            '{{ $t('manager.applyChanges') }}'
+            {{ $t('manager.toFinishSetup') }}
+          </span>
         </template>
       </div>
     </div>
+
     <div class="flex items-center gap-4">
-      <span v-if="isInProgress" class="text-xs font-bold text-neutral-600">
-        {{ comfyManagerStore.uncompletedCount }} {{ $t('g.progressCountOf') }}
-        {{ comfyManagerStore.taskLogs.length }}
-      </span>
-      <div class="flex items-center">
-        <Button
-          v-if="!isInProgress"
-          rounded
-          outlined
-          class="px-4 py-2 rounded-md mr-4"
-          @click="handleRestart"
-        >
-          {{ $t('g.restart') }}
-        </Button>
+      <!-- 1. Queue running -->
+      <template v-if="isQueueRunning">
+        <span class="text-sm text-neutral-700 dark-theme:text-neutral-400">
+          {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
+          {{ taskLogs }}
+        </span>
         <Button
           :icon="
             progressDialogContent.isExpanded
@@ -44,20 +51,46 @@
           text
           rounded
           size="small"
+          class="font-bold"
           severity="secondary"
           :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
           @click.stop="progressDialogContent.toggle"
         />
+      </template>
+
+      <!-- 2. Tasks completed (waiting for restart) -->
+      <template v-else-if="!isRestarting && !isRestartCompleted">
         <Button
-          icon="pi pi-times"
-          text
           rounded
-          size="small"
-          severity="secondary"
-          aria-label="Close"
-          @click.stop="closeDialog"
-        />
-      </div>
+          outlined
+          class="rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 dark-theme:bg-none dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-700"
+          @click="handleRestart"
+        >
+          {{ $t('manager.applyChanges') }}
+        </Button>
+      </template>
+
+      <!-- 3. Restarting -->
+      <template v-else-if="isRestarting">
+        <!-- No buttons during restart -->
+      </template>
+
+      <!-- 4. Restart completed -->
+      <template v-else-if="isRestartCompleted">
+        <!-- No buttons after restart completed (auto-close after 3 seconds) -->
+      </template>
+
+      <!-- Common: Close button -->
+      <Button
+        icon="pi pi-times"
+        text
+        rounded
+        size="small"
+        class="font-bold"
+        severity="secondary"
+        aria-label="Close"
+        @click.stop="closeDialog"
+      />
     </div>
   </div>
 </template>
@@ -65,9 +98,10 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import DotSpinner from '@/components/common/DotSpinner.vue'
 import { api } from '@/scripts/api'
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useWorkflowService } from '@/services/workflowService'
@@ -77,19 +111,34 @@ import {
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const dialogStore = useDialogStore()
 const progressDialogContent = useManagerProgressDialogStore()
 const comfyManagerStore = useComfyManagerStore()
+const settingStore = useSettingStore()
 
-const isInProgress = computed(() => comfyManagerStore.uncompletedCount > 0)
+// State management for restart process
+const isRestarting = ref<boolean>(false)
+const isRestartCompleted = ref<boolean>(false)
+
+// Computed states
+const isQueueRunning = computed(() => comfyManagerStore.uncompletedCount > 0)
+const taskLogs = computed(() => comfyManagerStore.taskLogs.length)
+
+const completedTasksCount = computed(() => {
+  if (isQueueRunning.value && taskLogs.value > 0) {
+    return taskLogs.value - 1
+  }
+  return taskLogs.value
+})
 
 const closeDialog = () => {
   dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
 }
 
-const fallbackTaskName = t('g.installing')
+const fallbackTaskName = t('manager.installingDependencies')
 const currentTaskName = computed(() => {
   if (!comfyManagerStore.taskLogs.length) return fallbackTaskName
   const task = comfyManagerStore.taskLogs.at(-1)
@@ -97,21 +146,52 @@ const currentTaskName = computed(() => {
 })
 
 const handleRestart = async () => {
-  const onReconnect = async () => {
-    // Refresh manager state
+  // Store original toast setting value
+  const originalToastSetting = settingStore.get(
+    'Comfy.Toast.DisableReconnectingToast'
+  )
 
-    comfyManagerStore.clearLogs()
-    comfyManagerStore.setStale()
+  try {
+    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)
 
-    // Refresh node definitions
-    await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+    isRestarting.value = true
 
-    // Reload workflow
-    await useWorkflowService().reloadCurrentWorkflow()
+    const onReconnect = async () => {
+      try {
+        comfyManagerStore.setStale()
+
+        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+
+        await useWorkflowService().reloadCurrentWorkflow()
+      } finally {
+        await settingStore.set(
+          'Comfy.Toast.DisableReconnectingToast',
+          originalToastSetting
+        )
+
+        isRestarting.value = false
+        isRestartCompleted.value = true
+
+        setTimeout(() => {
+          closeDialog()
+          comfyManagerStore.clearLogs()
+        }, 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
   }
-  useEventListener(api, 'reconnected', onReconnect, { once: true })
-
-  await useComfyManagerService().rebootComfyUI()
-  closeDialog()
 }
 </script>

src/components/input/MultiSelect.stories.ts

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import MultiSelect from './MultiSelect.vue'
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/Input/MultiSelect',
+  component: MultiSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    options: {
+      control: 'object'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selected = ref([])
+      const options = [
+        { name: 'Vue', value: 'vue' },
+        { name: 'React', value: 'react' },
+        { name: 'Angular', value: 'angular' },
+        { name: 'Svelte', value: 'svelte' }
+      ]
+      return { selected, options, args }
+    },
+    template: `
+      <div>
+        <MultiSelect 
+          v-model="selected" 
+          :options="options"
+          label="Select Frameworks"
+          v-bind="args"
+        />
+        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+          <p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const WithPreselectedValues: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const options = [
+        { name: 'JavaScript', value: 'js' },
+        { name: 'TypeScript', value: 'ts' },
+        { name: 'Python', value: 'python' },
+        { name: 'Go', value: 'go' },
+        { name: 'Rust', value: 'rust' }
+      ]
+      const selected = ref([options[0], options[1]])
+      return { selected, options }
+    },
+    template: `
+      <div>
+        <MultiSelect 
+          v-model="selected" 
+          :options="options"
+          label="Select Languages"
+        />
+        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+          <p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const MultipleSelectors: Story = {
+  render: () => ({
+    components: { MultiSelect },
+    setup() {
+      const frameworkOptions = ref([
+        { name: 'Vue', value: 'vue' },
+        { name: 'React', value: 'react' },
+        { name: 'Angular', value: 'angular' },
+        { name: 'Svelte', value: 'svelte' }
+      ])
+
+      const projectOptions = ref([
+        { name: 'Project A', value: 'proj-a' },
+        { name: 'Project B', value: 'proj-b' },
+        { name: 'Project C', value: 'proj-c' },
+        { name: 'Project D', value: 'proj-d' }
+      ])
+
+      const tagOptions = ref([
+        { name: 'Frontend', value: 'frontend' },
+        { name: 'Backend', value: 'backend' },
+        { name: 'Database', value: 'database' },
+        { name: 'DevOps', value: 'devops' },
+        { name: 'Testing', value: 'testing' }
+      ])
+
+      const selectedFrameworks = ref([])
+      const selectedProjects = ref([])
+      const selectedTags = ref([])
+
+      return {
+        frameworkOptions,
+        projectOptions,
+        tagOptions,
+        selectedFrameworks,
+        selectedProjects,
+        selectedTags
+      }
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex gap-2">
+          <MultiSelect 
+            v-model="selectedFrameworks" 
+            :options="frameworkOptions"
+            label="Select Frameworks"
+          />
+          <MultiSelect 
+            v-model="selectedProjects" 
+            :options="projectOptions"
+            label="Select Projects"
+          />
+          <MultiSelect 
+            v-model="selectedTags" 
+            :options="tagOptions"
+            label="Select Tags"
+          />
+        </div>
+        
+        <div class="p-4 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+          <h4 class="font-medium mb-2">Current Selection:</h4>
+          <div class="space-y-1 text-sm">
+            <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
+            <p>Projects: {{ selectedProjects.length > 0 ? selectedProjects.map(s => s.name).join(', ') : 'None' }}</p>
+            <p>Tags: {{ selectedTags.length > 0 ? selectedTags.map(s => s.name).join(', ') : 'None' }}</p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}

src/components/input/MultiSelect.vue

@@ -9,6 +9,41 @@
       :max-selected-labels="0"
       :pt="pt"
     >
+      <template
+        v-if="hasSearchBox || showSelectedCount || hasClearButton"
+        #header
+      >
+        <div class="p-2 flex flex-col gap-y-4 pb-0">
+          <SearchBox
+            v-if="hasSearchBox"
+            v-model="searchQuery"
+            :has-border="true"
+            :place-holder="searchPlaceholder"
+          />
+          <div class="flex items-center justify-between">
+            <span
+              v-if="showSelectedCount"
+              class="text-sm text-neutral-400 dark-theme:text-zinc-500 px-1"
+            >
+              {{
+                selectedCount > 0
+                  ? $t('g.itemsSelected', { selectedCount })
+                  : $t('g.itemSelected', { selectedCount })
+              }}
+            </span>
+            <TextButton
+              v-if="hasClearButton"
+              :label="$t('g.clearAll')"
+              type="transparent"
+              size="fit-content"
+              class="text-sm !text-blue-500 !dark-theme:text-blue-600"
+              @click.stop="selectedItems = []"
+            />
+          </div>
+          <div class="h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
+        </div>
+      </template>
+
       <!-- Trigger value (keep text scale identical) -->
       <template #value>
         <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
@@ -42,7 +77,7 @@
       </template>
     </MultiSelect>
 
-    <!-- Selected count badge (unchanged) -->
+    <!-- Selected count badge -->
     <div
       v-if="selectedCount > 0"
       class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
@@ -58,22 +93,41 @@ import MultiSelect, {
 } from 'primevue/multiselect'
 import { computed } from 'vue'
 
-const { label, options } = defineProps<{
-  label?: string
-  options: { name: string; value: string }[]
-}>()
+import SearchBox from '@/components/input/SearchBox.vue'
 
-const selectedItems = defineModel<{ name: string; value: string }[]>({
+import TextButton from '../button/TextButton.vue'
+
+type Option = { name: string; value: string }
+
+interface Props {
+  /** Input label shown on the trigger button */
+  label?: string
+  /** Static options for the multiselect (when not using async search) */
+  options: Option[]
+  /** Show search box in the panel header */
+  hasSearchBox?: boolean
+  /** Show selected count text in the panel header */
+  showSelectedCount?: boolean
+  /** Show "Clear all" action in the panel header */
+  hasClearButton?: boolean
+  /** Placeholder for the search input */
+  searchPlaceholder?: string
+}
+const {
+  label,
+  options,
+  hasSearchBox = false,
+  showSelectedCount = false,
+  hasClearButton = false,
+  searchPlaceholder = 'Search...'
+} = defineProps<Props>()
+
+const selectedItems = defineModel<Option[]>({
   required: true
 })
-
+const searchQuery = defineModel<string>('searchQuery')
 const selectedCount = computed(() => selectedItems.value.length)
 
-/**
- * Pure unstyled mode using only the PrimeVue PT API.
- * All PrimeVue built-in checkboxes/headers are hidden via PT (no :deep hacks).
- * Visual output matches the previous version exactly.
- */
 const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
     class: [
@@ -97,19 +151,19 @@ const pt = computed(() => ({
   dropdown: {
     class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
   },
-  header: { class: 'hidden' },
-
+  header: () => ({
+    class:
+      hasSearchBox || showSelectedCount || hasClearButton ? 'block' : 'hidden'
+  }),
   // Overlay & list visuals unchanged
   overlay:
-    'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg border border-solid border-zinc-100',
+    'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg border border-solid border-zinc-100 dark-theme:border-zinc-700',
   list: {
     class: 'flex flex-col gap-1 p-0 list-none border-none text-xs'
   },
-
   // Option row hover tone identical
   option:
     'flex gap-1 items-center p-2 hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
-
   // Hide built-in checkboxes entirely via PT (no :deep)
   pcHeaderCheckbox: {
     root: { class: 'hidden' },

src/components/input/SearchBox.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SearchBox from './SearchBox.vue'
+
+const meta: Meta<typeof SearchBox> = {
+  title: 'Components/Input/SearchBox',
+  component: SearchBox,
+  tags: ['autodocs'],
+  argTypes: {
+    placeHolder: {
+      control: 'text'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SearchBox },
+    setup() {
+      const searchText = ref('')
+      return { searchText, args }
+    },
+    template: `
+      <div>
+        <SearchBox v-model:="searchQuery" />
+      </div>
+    `
+  })
+}

src/components/input/SearchBox.vue

@@ -1,8 +1,6 @@
 <template>
-  <div
-    class="flex w-full items-center rounded-lg px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800"
-  >
-    <i-lucide:search class="text-neutral" />
+  <div :class="wrapperStyle">
+    <i-lucide:search :class="iconColorStyle" />
     <InputText
       v-model="searchQuery"
       :placeholder="placeHolder || 'Search...'"
@@ -15,10 +13,21 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import { defineModel } from 'vue'
+import { computed, defineModel } from 'vue'
 
-const { placeHolder } = defineProps<{
+const { placeHolder, hasBorder = false } = defineProps<{
   placeHolder?: string
+  hasBorder?: boolean
 }>()
 const searchQuery = defineModel<string>('')
+
+const wrapperStyle = computed(() => {
+  return hasBorder
+    ? 'flex w-full items-center rounded gap-2 bg-white dark-theme:bg-zinc-800 p-1 border border-solid border-zinc-200 dark-theme:border-zinc-700'
+    : 'flex w-full items-center rounded px-2 py-1.5 gap-2 bg-white dark-theme:bg-zinc-800'
+})
+
+const iconColorStyle = computed(() => {
+  return !hasBorder ? 'text-neutral' : 'text-zinc-300 dark-theme:text-zinc-700'
+})
 </script>

src/components/input/SingleSelect.stories.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ArrowUpDown } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+import SingleSelect from './SingleSelect.vue'
+
+const meta: Meta<typeof SingleSelect> = {
+  title: 'Components/Input/SingleSelect',
+  component: SingleSelect,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' }
+  }
+}
+
+export default meta
+export type Story = StoryObj<typeof meta>
+
+const sampleOptions = [
+  { name: 'Popular', value: 'popular' },
+  { name: 'Newest', value: 'newest' },
+  { name: 'Oldest', value: 'oldest' },
+  { name: 'A → Z', value: 'az' },
+  { name: 'Z → A', value: 'za' }
+]
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>(null)
+      const options = sampleOptions
+      return { selected, options, args }
+    },
+    template: `
+      <div>
+        <SingleSelect v-model="selected" :options="options" :label="args.label || 'Sorting Type'" />
+        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+          <p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
+        </div>
+      </div>
+    `
+  }),
+  args: { label: 'Sorting Type' }
+}
+
+export const WithIcon: Story = {
+  render: () => ({
+    components: { SingleSelect, ArrowUpDown },
+    setup() {
+      const selected = ref<string | null>('popular')
+      const options = sampleOptions
+      return { selected, options }
+    },
+    template: `
+      <div>
+        <SingleSelect v-model="selected" :options="options" label="Sorting Type">
+          <template #icon>
+            <ArrowUpDown :size="14" />
+          </template>
+        </SingleSelect>
+        <div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
+          <p class="text-sm">Selected: {{ selected }}</p>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const Preselected: Story = {
+  render: () => ({
+    components: { SingleSelect },
+    setup() {
+      const selected = ref<string | null>('newest')
+      const options = sampleOptions
+      return { selected, options }
+    },
+    template: `
+      <SingleSelect v-model="selected" :options="options" label="Sorting Type" />
+    `
+  })
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { SingleSelect, ArrowUpDown },
+    setup() {
+      const options = sampleOptions
+      const a = ref<string | null>(null)
+      const b = ref<string | null>('popular')
+      const c = ref<string | null>('az')
+      return { options, a, b, c }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-3">
+          <SingleSelect v-model="a" :options="options" label="No Icon" />
+        </div>
+        <div class="flex items-center gap-3">
+          <SingleSelect v-model="b" :options="options" label="With Icon">
+            <template #icon>
+              <ArrowUpDown :size="14" />
+            </template>
+          </SingleSelect>
+        </div>
+        <div class="flex items-center gap-3">
+          <SingleSelect v-model="c" :options="options" label="Preselected (A→Z)" />
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/input/SingleSelect.vue

@@ -99,7 +99,7 @@ const pt = computed(() => ({
   overlay: {
     class: [
       // dropdown panel
-      'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg'
+      'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg border border-solid border-zinc-100 dark-theme:border-zinc-700'
     ]
   },
   list: {

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -224,7 +224,7 @@ const cancelledWithoutResults = computed(() => {
 
 .task-item-details {
   position: absolute;
-  bottom: 0;
+  top: 0.5rem;
   padding: 0.6rem;
   display: flex;
   justify-content: space-between;

src/components/widget/ModelSelector.vue

@@ -59,6 +59,10 @@
       <div class="relative px-6 pt-2 pb-4 flex gap-2">
         <MultiSelect
           v-model="selectedFrameworks"
+          class="w-[250px]"
+          :has-search-box="true"
+          :show-selected-count="true"
+          :has-clear-button="true"
           label="Select Frameworks"
           :options="frameworkOptions"
         />

src/components/widget/layout/BaseWidget.stories.ts

@@ -0,0 +1,556 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  Download,
+  Filter,
+  Folder,
+  Info,
+  PanelLeft,
+  PanelLeftClose,
+  PanelRight,
+  PanelRightClose,
+  Puzzle,
+  Scroll,
+  Settings,
+  Upload,
+  X
+} from 'lucide-vue-next'
+import { provide, ref } from 'vue'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import MoreButton from '@/components/button/MoreButton.vue'
+import CardBottom from '@/components/card/CardBottom.vue'
+import CardContainer from '@/components/card/CardContainer.vue'
+import CardTop from '@/components/card/CardTop.vue'
+import SquareChip from '@/components/chip/SquareChip.vue'
+import MultiSelect from '@/components/input/MultiSelect.vue'
+import SearchBox from '@/components/input/SearchBox.vue'
+import SingleSelect from '@/components/input/SingleSelect.vue'
+import type { NavGroupData, NavItemData } from '@/types/navTypes'
+import { OnCloseKey } from '@/types/widgetTypes'
+
+import LeftSidePanel from '../panel/LeftSidePanel.vue'
+import RightSidePanel from '../panel/RightSidePanel.vue'
+import BaseWidgetLayout from './BaseWidgetLayout.vue'
+
+interface StoryArgs {
+  contentTitle: string
+  hasLeftPanel: boolean
+  hasRightPanel: boolean
+  hasHeader: boolean
+  hasContentFilter: boolean
+  hasHeaderRightArea: boolean
+  cardCount: number
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Components/Widget/Layout/BaseWidgetLayout',
+  argTypes: {
+    contentTitle: {
+      control: 'text',
+      description: 'Title shown when no left panel is present'
+    },
+    hasLeftPanel: {
+      control: 'boolean',
+      description: 'Toggle left panel visibility'
+    },
+    hasRightPanel: {
+      control: 'boolean',
+      description: 'Toggle right panel visibility'
+    },
+    hasHeader: {
+      control: 'boolean',
+      description: 'Toggle header visibility'
+    },
+    hasContentFilter: {
+      control: 'boolean',
+      description: 'Toggle content filter visibility'
+    },
+    hasHeaderRightArea: {
+      control: 'boolean',
+      description: 'Toggle header right area visibility'
+    },
+    cardCount: {
+      control: { type: 'range', min: 0, max: 50, step: 1 },
+      description: 'Number of cards to display in content'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const createStoryTemplate = (args: StoryArgs) => ({
+  components: {
+    BaseWidgetLayout,
+    LeftSidePanel,
+    RightSidePanel,
+    SearchBox,
+    MultiSelect,
+    SingleSelect,
+    IconButton,
+    IconTextButton,
+    MoreButton,
+    CardContainer,
+    CardTop,
+    CardBottom,
+    SquareChip,
+    Settings,
+    Upload,
+    Download,
+    Scroll,
+    Info,
+    Filter,
+    Folder,
+    Puzzle,
+    PanelLeft,
+    PanelLeftClose,
+    PanelRight,
+    PanelRightClose,
+    X
+  },
+  setup() {
+    const t = (k: string) => k
+
+    const onClose = () => {
+      console.log('OnClose invoked')
+    }
+    provide(OnCloseKey, onClose)
+
+    const tempNavigation = ref<(NavItemData | NavGroupData)[]>([
+      { id: 'installed', label: 'Installed' },
+      {
+        title: 'TAGS',
+        items: [
+          { id: 'tag-sd15', label: 'SD 1.5' },
+          { id: 'tag-sdxl', label: 'SDXL' },
+          { id: 'tag-utility', label: 'Utility' }
+        ]
+      },
+      {
+        title: 'CATEGORIES',
+        items: [
+          { id: 'cat-models', label: 'Models' },
+          { id: 'cat-nodes', label: 'Nodes' }
+        ]
+      }
+    ])
+    const selectedNavItem = ref<string | null>('installed')
+
+    const searchQuery = ref<string>('')
+
+    const frameworkOptions = ref([
+      { name: 'Vue', value: 'vue' },
+      { name: 'React', value: 'react' },
+      { name: 'Angular', value: 'angular' },
+      { name: 'Svelte', value: 'svelte' }
+    ])
+    const projectOptions = ref([
+      { name: 'Project A', value: 'proj-a' },
+      { name: 'Project B', value: 'proj-b' },
+      { name: 'Project C', value: 'proj-c' }
+    ])
+    const sortOptions = ref([
+      { name: 'Popular', value: 'popular' },
+      { name: 'Latest', value: 'latest' },
+      { name: 'A → Z', value: 'az' }
+    ])
+
+    const selectedFrameworks = ref<string[]>([])
+    const selectedProjects = ref<string[]>([])
+    const selectedSort = ref<string>('popular')
+
+    return {
+      args,
+      t,
+      tempNavigation,
+      selectedNavItem,
+      searchQuery,
+      frameworkOptions,
+      projectOptions,
+      sortOptions,
+      selectedFrameworks,
+      selectedProjects,
+      selectedSort
+    }
+  },
+  template: `
+    <div>
+      <BaseWidgetLayout v-if="!args.hasRightPanel" :content-title="args.contentTitle || 'Content Title'">
+        <!-- Left Panel -->
+        <template v-if="args.hasLeftPanel" #leftPanel>
+          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
+            <template #header-icon>
+              <Puzzle :size="16" class="text-neutral" />
+            </template>
+            <template #header-title>
+              <span class="text-neutral text-base">Title</span>
+            </template>
+          </LeftSidePanel>
+        </template>
+
+        <!-- Header -->
+        <template v-if="args.hasHeader" #header>
+          <SearchBox
+            class="max-w-[384px]"
+            :modelValue="searchQuery"
+            @update:modelValue="searchQuery = $event"
+          />
+        </template>
+
+        <!-- Header Right Area -->
+        <template v-if="args.hasHeaderRightArea" #header-right-area>
+          <div class="flex gap-2">
+            <IconTextButton type="primary" label="Upload Model" @click="() => {}">
+              <template #icon>
+                <Upload :size="12" />
+              </template>
+            </IconTextButton>
+
+            <MoreButton>
+              <template #default="{ close }">
+                <IconTextButton
+                  type="secondary"
+                  label="Settings"
+                  @click="() => { close() }"
+                >
+                  <template #icon>
+                    <Download :size="12" />
+                  </template>
+                </IconTextButton>
+
+                <IconTextButton
+                  type="primary"
+                  label="Profile"
+                  @click="() => { close() }"
+                >
+                  <template #icon>
+                    <Scroll :size="12" />
+                  </template>
+                </IconTextButton>
+              </template>
+            </MoreButton>
+          </div>
+        </template>
+
+        <!-- Content Filter -->
+        <template v-if="args.hasContentFilter" #contentFilter>
+          <div class="relative px-6 pt-2 pb-4 flex gap-2">
+            <MultiSelect
+              v-model="selectedFrameworks"
+              label="Select Frameworks"
+              :options="frameworkOptions"
+            />
+            <MultiSelect
+              v-model="selectedProjects"
+              label="Select Projects"
+              :options="projectOptions"
+            />
+            <SingleSelect
+              v-model="selectedSort"
+              label="Sorting Type"
+              :options="sortOptions"
+              class="w-[135px]"
+            >
+              <template #icon>
+                <Filter :size="12" />
+              </template>
+            </SingleSelect>
+          </div>
+        </template>
+
+        <!-- Content -->
+        <template #content>
+          <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))">
+            <CardContainer
+              v-for="i in args.cardCount"
+              :key="i"
+              ratio="square"
+            >
+              <template #top>
+                <CardTop ratio="landscape">
+                  <template #default>
+                    <div class="w-full h-full bg-blue-500"></div>
+                  </template>
+                  <template #top-right>
+                    <IconButton class="!bg-white !text-neutral-900" @click="() => {}">
+                      <Info :size="16" />
+                    </IconButton>
+                  </template>
+                  <template #bottom-right>
+                    <SquareChip label="png" />
+                    <SquareChip label="1.2 MB" />
+                    <SquareChip label="LoRA">
+                      <template #icon>
+                        <Folder :size="12" />
+                      </template>
+                    </SquareChip>
+                  </template>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom />
+              </template>
+            </CardContainer>
+          </div>
+        </template>
+      </BaseWidgetLayout>
+
+      <BaseWidgetLayout v-else :content-title="args.contentTitle || 'Content Title'">
+        <!-- Same content but WITH right panel -->
+        <!-- Left Panel -->
+        <template v-if="args.hasLeftPanel" #leftPanel>
+          <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
+            <template #header-icon>
+              <Puzzle :size="16" class="text-neutral" />
+            </template>
+            <template #header-title>
+              <span class="text-neutral text-base">Title</span>
+            </template>
+          </LeftSidePanel>
+        </template>
+
+        <!-- Header -->
+        <template v-if="args.hasHeader" #header>
+          <SearchBox
+            class="max-w-[384px]"
+            :modelValue="searchQuery"
+            @update:modelValue="searchQuery = $event"
+          />
+        </template>
+
+        <!-- Header Right Area -->
+        <template v-if="args.hasHeaderRightArea" #header-right-area>
+          <div class="flex gap-2">
+            <IconTextButton type="primary" label="Upload Model" @click="() => {}">
+              <template #icon>
+                <Upload :size="12" />
+              </template>
+            </IconTextButton>
+
+            <MoreButton>
+              <template #default="{ close }">
+                <IconTextButton
+                  type="secondary"
+                  label="Settings"
+                  @click="() => { close() }"
+                >
+                  <template #icon>
+                    <Download :size="12" />
+                  </template>
+                </IconTextButton>
+
+                <IconTextButton
+                  type="primary"
+                  label="Profile"
+                  @click="() => { close() }"
+                >
+                  <template #icon>
+                    <Scroll :size="12" />
+                  </template>
+                </IconTextButton>
+              </template>
+            </MoreButton>
+          </div>
+        </template>
+
+        <!-- Content Filter -->
+        <template v-if="args.hasContentFilter" #contentFilter>
+          <div class="relative px-6 pt-2 pb-4 flex gap-2">
+            <MultiSelect
+              v-model="selectedFrameworks"
+              label="Select Frameworks"
+              :options="frameworkOptions"
+            />
+            <MultiSelect
+              v-model="selectedProjects"
+              label="Select Projects"
+              :options="projectOptions"
+            />
+            <SingleSelect
+              v-model="selectedSort"
+              label="Sorting Type"
+              :options="sortOptions"
+              class="w-[135px]"
+            >
+              <template #icon>
+                <Filter :size="12" />
+              </template>
+            </SingleSelect>
+          </div>
+        </template>
+
+        <!-- Content -->
+        <template #content>
+          <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))">
+            <CardContainer
+              v-for="i in args.cardCount"
+              :key="i"
+              ratio="square"
+            >
+              <template #top>
+                <CardTop ratio="landscape">
+                  <template #default>
+                    <div class="w-full h-full bg-blue-500"></div>
+                  </template>
+                  <template #top-right>
+                    <IconButton class="!bg-white !text-neutral-900" @click="() => {}">
+                      <Info :size="16" />
+                    </IconButton>
+                  </template>
+                  <template #bottom-right>
+                    <SquareChip label="png" />
+                    <SquareChip label="1.2 MB" />
+                    <SquareChip label="LoRA">
+                      <template #icon>
+                        <Folder :size="12" />
+                      </template>
+                    </SquareChip>
+                  </template>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom />
+              </template>
+            </CardContainer>
+          </div>
+        </template>
+
+        <!-- Right Panel - Only when hasRightPanel is true -->
+        <template #rightPanel>
+          <RightSidePanel />
+        </template>
+      </BaseWidgetLayout>
+    </div>
+  `
+})
+
+export const Default: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Content Title',
+    hasLeftPanel: true,
+    hasRightPanel: true,
+    hasHeader: true,
+    hasContentFilter: true,
+    hasHeaderRightArea: true,
+    cardCount: 12
+  }
+}
+
+export const BothPanels: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Content Title',
+    hasLeftPanel: true,
+    hasRightPanel: true,
+    hasHeader: true,
+    hasContentFilter: true,
+    hasHeaderRightArea: true,
+    cardCount: 12
+  }
+}
+
+export const LeftPanelOnly: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Content Title',
+    hasLeftPanel: true,
+    hasRightPanel: false,
+    hasHeader: true,
+    hasContentFilter: true,
+    hasHeaderRightArea: true,
+    cardCount: 12
+  }
+}
+
+export const RightPanelOnly: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Content Title',
+    hasLeftPanel: false,
+    hasRightPanel: true,
+    hasHeader: true,
+    hasContentFilter: true,
+    hasHeaderRightArea: true,
+    cardCount: 12
+  }
+}
+
+export const NoPanels: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Content Title',
+    hasLeftPanel: false,
+    hasRightPanel: false,
+    hasHeader: true,
+    hasContentFilter: true,
+    hasHeaderRightArea: true,
+    cardCount: 12
+  }
+}
+
+export const MinimalLayout: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Simple Content',
+    hasLeftPanel: false,
+    hasRightPanel: false,
+    hasHeader: false,
+    hasContentFilter: false,
+    hasHeaderRightArea: false,
+    cardCount: 6
+  }
+}
+
+export const NoContent: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Empty State',
+    hasLeftPanel: true,
+    hasRightPanel: true,
+    hasHeader: true,
+    hasContentFilter: true,
+    hasHeaderRightArea: true,
+    cardCount: 0
+  }
+}
+
+export const HeaderOnly: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Header Layout',
+    hasLeftPanel: false,
+    hasRightPanel: false,
+    hasHeader: true,
+    hasContentFilter: false,
+    hasHeaderRightArea: true,
+    cardCount: 8
+  }
+}
+
+export const FilterOnly: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Filter Layout',
+    hasLeftPanel: false,
+    hasRightPanel: false,
+    hasHeader: false,
+    hasContentFilter: true,
+    hasHeaderRightArea: false,
+    cardCount: 8
+  }
+}
+
+export const MaxContent: Story = {
+  render: (args: StoryArgs) => createStoryTemplate(args),
+  args: {
+    contentTitle: 'Full Content',
+    hasLeftPanel: true,
+    hasRightPanel: true,
+    hasHeader: true,
+    hasContentFilter: true,
+    hasHeaderRightArea: true,
+    cardCount: 50
+  }
+}

src/components/widget/nav/Navigation.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  BarChart3,
+  Bell,
+  BookOpen,
+  FolderOpen,
+  GraduationCap,
+  Home,
+  LogOut,
+  MessageSquare,
+  Settings,
+  User,
+  Users
+} from 'lucide-vue-next'
+import { ref } from 'vue'
+
+import LeftSidePanel from '../panel/LeftSidePanel.vue'
+import NavItem from './NavItem.vue'
+import NavTitle from './NavTitle.vue'
+
+const meta: Meta = {
+  title: 'Components/Widget/Navigation',
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const NavigationItem: Story = {
+  render: () => ({
+    components: { NavItem },
+    template: `
+      <div class="space-y-2">
+        <NavItem>Dashboard</NavItem>
+        <NavItem>Projects</NavItem>
+        <NavItem>Messages</NavItem>
+        <NavItem>Settings</NavItem>
+      </div>
+    `
+  })
+}
+
+export const CustomNavigation: Story = {
+  render: () => ({
+    components: {
+      NavTitle,
+      NavItem,
+      Home,
+      FolderOpen,
+      BarChart3,
+      Users,
+      BookOpen,
+      GraduationCap,
+      MessageSquare,
+      Settings,
+      User,
+      Bell,
+      LogOut
+    },
+    template: `
+      <nav class="w-64 p-4 bg-white dark-theme:bg-zinc-800 rounded-lg">
+        <NavTitle title="Main Menu" />
+        <div class="mt-4 space-y-2">
+          <NavItem :hasFolderIcon="false"><Home :size="16" class="inline mr-2" />Dashboard</NavItem>
+          <NavItem :hasFolderIcon="false"><FolderOpen :size="16" class="inline mr-2" />Projects</NavItem>
+          <NavItem :hasFolderIcon="false"><BarChart3 :size="16" class="inline mr-2" />Analytics</NavItem>
+          <NavItem :hasFolderIcon="false"><Users :size="16" class="inline mr-2" />Team</NavItem>
+        </div>
+        <div class="mt-6">
+          <NavTitle title="Resources" />
+          <div class="mt-4 space-y-2">
+            <NavItem :hasFolderIcon="false"><BookOpen :size="16" class="inline mr-2" />Documentation</NavItem>
+            <NavItem :hasFolderIcon="false"><GraduationCap :size="16" class="inline mr-2" />Tutorials</NavItem>
+            <NavItem :hasFolderIcon="false"><MessageSquare :size="16" class="inline mr-2" />Community</NavItem>
+          </div>
+        </div>
+        <div class="mt-6">
+          <NavTitle title="Account" />
+          <div class="mt-4 space-y-2">
+            <NavItem :hasFolderIcon="false"><Settings :size="16" class="inline mr-2" />Settings</NavItem>
+            <NavItem :hasFolderIcon="false"><User :size="16" class="inline mr-2" />Profile</NavItem>
+            <NavItem :hasFolderIcon="false"><Bell :size="16" class="inline mr-2" />Notifications</NavItem>
+            <NavItem :hasFolderIcon="false"><LogOut :size="16" class="inline mr-2" />Logout</NavItem>
+          </div>
+        </div>
+      </nav>
+    `
+  })
+}
+
+export const LeftSidePanelDemo: Story = {
+  render: () => ({
+    components: { LeftSidePanel, FolderOpen },
+    setup() {
+      const navItems = [
+        {
+          title: 'Workspace',
+          items: [
+            { id: 'dashboard', label: 'Dashboard' },
+            { id: 'projects', label: 'Projects' },
+            { id: 'workflows', label: 'Workflows' },
+            { id: 'models', label: 'Models' }
+          ]
+        },
+        {
+          title: 'Tools',
+          items: [
+            { id: 'node-editor', label: 'Node Editor' },
+            { id: 'image-browser', label: 'Image Browser' },
+            { id: 'queue-manager', label: 'Queue Manager' },
+            { id: 'extensions', label: 'Extensions' }
+          ]
+        },
+        { id: 'settings', label: 'Settings' }
+      ]
+      const active = ref<string | null>(null)
+      return { navItems, active }
+    },
+    template: `
+      <div class="w-full h-[560px] flex">
+        <div class="w-64 rounded-lg">
+          <LeftSidePanel v-model="active" :nav-items="navItems">
+            <template #header-icon>
+              <FolderOpen :size="14" />
+            </template>
+            <template #header-title>
+              Navigation
+            </template>
+          </LeftSidePanel>
+        </div>
+
+        <div class="flex-1 p-3 text-sm bg-gray-50 dark-theme:bg-zinc-900 border-t border-zinc-200 dark-theme:border-zinc-700">
+          Active: {{ active ?? 'None' }}
+        </div>
+      </div>
+    `
+  })
+}

src/composables/useCopyToClipboard.ts

@@ -4,32 +4,64 @@ import { useToast } from 'primevue/usetoast'
 import { t } from '@/i18n'
 
 export function useCopyToClipboard() {
-  const { copy, isSupported } = useClipboard()
+  const { copy, copied } = useClipboard()
   const toast = useToast()
+  const showSuccessToast = () => {
+    toast.add({
+      severity: 'success',
+      summary: t('g.success'),
+      detail: t('clipboard.successMessage'),
+      life: 3000
+    })
+  }
+  const showErrorToast = () => {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: t('clipboard.errorMessage')
+    })
+  }
+
+  function fallbackCopy(text: string) {
+    const textarea = document.createElement('textarea')
+    textarea.setAttribute('readonly', '')
+    textarea.value = text
+    textarea.style.position = 'absolute'
+    textarea.style.left = '-9999px'
+    textarea.setAttribute('aria-hidden', 'true')
+    textarea.setAttribute('tabindex', '-1')
+    textarea.style.width = '1px'
+    textarea.style.height = '1px'
+    document.body.appendChild(textarea)
+    textarea.select()
+
+    try {
+      // using legacy document.execCommand for fallback for old and linux browsers
+      const successful = document.execCommand('copy')
+      if (successful) {
+        showSuccessToast()
+      } else {
+        showErrorToast()
+      }
+    } catch (err) {
+      showErrorToast()
+    } finally {
+      textarea.remove()
+    }
+  }
 
   const copyToClipboard = async (text: string) => {
-    if (isSupported) {
-      try {
-        await copy(text)
-        toast.add({
-          severity: 'success',
-          summary: t('g.success'),
-          detail: t('clipboard.successMessage'),
-          life: 3000
-        })
-      } catch (err) {
-        toast.add({
-          severity: 'error',
-          summary: t('g.error'),
-          detail: t('clipboard.errorMessage')
-        })
+    try {
+      await copy(text)
+      if (copied.value) {
+        showSuccessToast()
+      } else {
+        // If VueUse copy failed, try fallback
+        fallbackCopy(text)
       }
-    } else {
-      toast.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: t('clipboard.errorNotSupported')
-      })
+    } catch (err) {
+      // VueUse copy failed, try fallback
+      fallbackCopy(text)
     }
   }
 

src/composables/useCoreCommands.ts

@@ -16,10 +16,12 @@ import {
 import { Point } from '@/lib/litegraph/src/litegraph'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
@@ -33,6 +35,7 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { ManagerTab } from '@/types/comfyManagerTypes'
 import {
   getAllNonIoNodesInSubgraph,
   getExecutionIdsForSelectedNodes
@@ -711,12 +714,54 @@ export function useCoreCommands(): ComfyCommand[] {
       }
     },
     {
-      id: 'Comfy.Manager.CustomNodesManager',
-      icon: 'pi pi-puzzle',
-      label: 'Toggle the Custom Nodes Manager',
+      id: 'Comfy.Manager.CustomNodesManager.ShowCustomNodesMenu',
+      icon: 'pi pi-objects-column',
+      label: 'Custom Nodes Manager',
       versionAdded: '1.12.10',
+      function: async () => {
+        const { is_legacy_manager_ui } =
+          (await useComfyManagerService().isLegacyManagerUI()) ?? {}
+
+        if (is_legacy_manager_ui === true) {
+          try {
+            await useCommandStore().execute(
+              'Comfy.Manager.Menu.ToggleVisibility' // This command is registered by legacy manager FE extension
+            )
+          } catch (error) {
+            console.error('error', error)
+            useToastStore().add({
+              severity: 'error',
+              summary: t('g.error'),
+              detail: t('manager.legacyMenuNotAvailable'),
+              life: 3000
+            })
+            dialogService.showManagerDialog()
+          }
+        } else {
+          dialogService.showManagerDialog()
+        }
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowUpdateAvailablePacks',
+      icon: 'pi pi-sync',
+      label: 'Check for Custom Node Updates',
+      versionAdded: '1.17.0',
       function: () => {
-        dialogService.toggleManagerDialog()
+        dialogService.showManagerDialog({
+          initialTab: ManagerTab.UpdateAvailable
+        })
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowMissingPacks',
+      icon: 'pi pi-exclamation-circle',
+      label: 'Install Missing Custom Nodes',
+      versionAdded: '1.17.0',
+      function: () => {
+        dialogService.showManagerDialog({
+          initialTab: ManagerTab.Missing
+        })
       }
     },
     {
@@ -880,6 +925,84 @@ export function useCoreCommands(): ComfyCommand[] {
         const modelSelectorDialog = useModelSelectorDialog()
         modelSelectorDialog.show()
       }
+    },
+    {
+      id: 'Comfy.Manager.CustomNodesManager.ShowLegacyCustomNodesMenu',
+      icon: 'pi pi-bars',
+      label: 'Custom Nodes (Legacy)',
+      versionAdded: '1.16.4',
+      function: async () => {
+        try {
+          await useCommandStore().execute(
+            'Comfy.Manager.CustomNodesManager.ToggleVisibility'
+          )
+        } catch (error) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.legacyMenuNotAvailable'),
+            life: 3000
+          })
+        }
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowLegacyManagerMenu',
+      icon: 'mdi mdi-puzzle',
+      label: 'Manager Menu (Legacy)',
+      versionAdded: '1.16.4',
+      function: async () => {
+        try {
+          await useCommandStore().execute('Comfy.Manager.Menu.ToggleVisibility')
+        } catch (error) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.legacyMenuNotAvailable'),
+            life: 3000
+          })
+        }
+      }
+    },
+    {
+      id: 'Comfy.Memory.UnloadModels',
+      icon: 'mdi mdi-vacuum-outline',
+      label: 'Unload Models',
+      versionAdded: '1.16.4',
+      function: async () => {
+        if (!useSettingStore().get('Comfy.Memory.AllowManualUnload')) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('g.commandProhibited', {
+              command: 'Comfy.Memory.UnloadModels'
+            }),
+            life: 3000
+          })
+          return
+        }
+        await api.freeMemory({ freeExecutionCache: false })
+      }
+    },
+    {
+      id: 'Comfy.Memory.UnloadModelsAndExecutionCache',
+      icon: 'mdi mdi-vacuum-outline',
+      label: 'Unload Models and Execution Cache',
+      versionAdded: '1.16.4',
+      function: async () => {
+        if (!useSettingStore().get('Comfy.Memory.AllowManualUnload')) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('g.commandProhibited', {
+              command: 'Comfy.Memory.UnloadModelsAndExecutionCache'
+            }),
+            life: 3000
+          })
+          return
+        }
+        await api.freeMemory({ freeExecutionCache: true })
+      }
     }
   ]
 

src/composables/useFeatureFlags.ts

@@ -0,0 +1,36 @@
+import { computed, reactive, readonly } from 'vue'
+
+import { api } from '@/scripts/api'
+
+/**
+ * Known server feature flags (top-level, not extensions)
+ */
+export enum ServerFeatureFlag {
+  SUPPORTS_PREVIEW_METADATA = 'supports_preview_metadata',
+  MAX_UPLOAD_SIZE = 'max_upload_size'
+}
+
+/**
+ * Composable for reactive access to feature flags
+ */
+export function useFeatureFlags() {
+  // Create reactive state that tracks server feature flags
+  const flags = reactive({
+    get supportsPreviewMetadata() {
+      return api.getServerFeature(ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA)
+    },
+    get maxUploadSize() {
+      return api.getServerFeature(ServerFeatureFlag.MAX_UPLOAD_SIZE)
+    }
+  })
+
+  // Create a reactive computed for any feature flag
+  const featureFlag = <T = unknown>(featurePath: string, defaultValue?: T) => {
+    return computed(() => api.getServerFeature(featurePath, defaultValue))
+  }
+
+  return {
+    flags: readonly(flags),
+    featureFlag
+  }
+}

src/constants/coreMenuCommands.ts

@@ -13,6 +13,14 @@ export const CORE_MENU_COMMANDS = [
   ],
   [['Edit'], ['Comfy.Undo', 'Comfy.Redo']],
   [['Edit'], ['Comfy.OpenClipspace']],
+  [
+    ['Manager'],
+    [
+      'Comfy.Manager.CustomNodesManager.ShowCustomNodesMenu',
+      'Comfy.Manager.ShowMissingPacks',
+      'Comfy.Manager.ShowUpdateAvailablePacks'
+    ]
+  ],
   [
     ['Help'],
     [

src/constants/coreSettings.ts

@@ -13,6 +13,13 @@ import type { SettingParams } from '@/types/settingTypes'
  * when they are no longer needed.
  */
 export const CORE_SETTINGS: SettingParams[] = [
+  {
+    id: 'Comfy.Memory.AllowManualUnload',
+    name: 'Allow manual unload of models and execution cache via user command',
+    type: 'hidden',
+    defaultValue: true,
+    versionAdded: '1.18.0'
+  },
   {
     id: 'Comfy.Validation.Workflows',
     name: 'Validate workflows',

src/lib/litegraph/src/CanvasPointer.ts

@@ -54,7 +54,10 @@ export class CanvasPointer {
    * After a flick gesture is complete, the automatic wheel events are sent with
    * reduced frequency, but much higher deltaX and deltaY values.
    */
-  static trackpadMaxGap = 200
+  static trackpadMaxGap = 500
+
+  /** The maximum time in milliseconds to buffer a high-res wheel event. */
+  static maxHighResBufferTime = 10
 
   /** The element this PointerState should capture input against when dragging. */
   element: Element
@@ -90,8 +93,23 @@ export class CanvasPointer {
   /** The last pointerup event for the primary button */
   eUp?: CanvasPointerEvent
 
-  /** The last pointermove event that was treated as a trackpad gesture. */
-  lastTrackpadEvent?: WheelEvent
+  /** Currently detected input device type */
+  detectedDevice: 'mouse' | 'trackpad' = 'mouse'
+
+  /** Timestamp of last wheel event for cooldown tracking */
+  lastWheelEventTime: number = 0
+
+  /** Flag to track if we've received the first wheel event */
+  hasReceivedWheelEvent: boolean = false
+
+  /** Buffered Linux wheel event awaiting confirmation */
+  bufferedLinuxEvent?: WheelEvent
+
+  /** Timestamp when Linux event was buffered */
+  bufferedLinuxEventTime: number = 0
+
+  /** Timer ID for Linux buffer clearing */
+  linuxBufferTimeoutId?: ReturnType<typeof setTimeout>
 
   /**
    * If set, as soon as the mouse moves outside the click drift threshold, this action is run once.
@@ -273,33 +291,179 @@ export class CanvasPointer {
     delete this.onDragStart
   }
 
-  /**
-   * Checks if the given wheel event is part of a continued trackpad gesture.
-   * @param e The wheel event to check
-   * @returns `true` if the event is part of a continued trackpad gesture, otherwise `false`
-   */
-  #isContinuationOfGesture(e: WheelEvent): boolean {
-    const { lastTrackpadEvent } = this
-    if (!lastTrackpadEvent) return false
-
-    return (
-      e.timeStamp - lastTrackpadEvent.timeStamp < CanvasPointer.trackpadMaxGap
-    )
-  }
-
   /**
    * Checks if the given wheel event is part of a trackpad gesture.
+   * This method now uses the new device detection internally for improved accuracy.
    * @param e The wheel event to check
    * @returns `true` if the event is part of a trackpad gesture, otherwise `false`
    */
   isTrackpadGesture(e: WheelEvent): boolean {
-    if (this.#isContinuationOfGesture(e)) {
-      this.lastTrackpadEvent = e
+    // Use the new device detection
+    const now = performance.now()
+    const timeSinceLastEvent = Math.max(0, now - this.lastWheelEventTime)
+    this.lastWheelEventTime = now
+
+    if (this.#isHighResWheelEvent(e, now)) {
+      this.detectedDevice = 'mouse'
+    } else if (this.#isWithinCooldown(timeSinceLastEvent)) {
+      if (this.#shouldBufferLinuxEvent(e)) {
+        this.#bufferLinuxEvent(e, now)
+      }
+    } else {
+      this.#updateDeviceMode(e, now)
+      this.hasReceivedWheelEvent = true
+    }
+
+    return this.detectedDevice === 'trackpad'
+  }
+
+  /**
+   * Validates buffered high res wheel events and switches to mouse mode if pattern matches.
+   * @returns `true` if switched to mouse mode
+   */
+  #isHighResWheelEvent(event: WheelEvent, now: number): boolean {
+    if (!this.bufferedLinuxEvent || this.bufferedLinuxEventTime <= 0) {
+      return false
+    }
+
+    const timeSinceBuffer = now - this.bufferedLinuxEventTime
+
+    if (timeSinceBuffer > CanvasPointer.maxHighResBufferTime) {
+      this.#clearLinuxBuffer()
+      return false
+    }
+
+    if (
+      event.deltaX === 0 &&
+      this.#isLinuxWheelPattern(this.bufferedLinuxEvent.deltaY, event.deltaY)
+    ) {
+      this.#clearLinuxBuffer()
       return true
     }
 
-    const threshold = CanvasPointer.trackpadThreshold
-    return Math.abs(e.deltaX) < threshold && Math.abs(e.deltaY) < threshold
+    return false
+  }
+
+  /**
+   * Checks if we're within the cooldown period where mode switching is disabled.
+   */
+  #isWithinCooldown(timeSinceLastEvent: number): boolean {
+    const isFirstEvent = !this.hasReceivedWheelEvent
+    const cooldownExpired = timeSinceLastEvent >= CanvasPointer.trackpadMaxGap
+    return !isFirstEvent && !cooldownExpired
+  }
+
+  /**
+   * Updates the device mode based on event patterns.
+   */
+  #updateDeviceMode(event: WheelEvent, now: number): void {
+    if (this.#isTrackpadPattern(event)) {
+      this.detectedDevice = 'trackpad'
+    } else if (this.#isMousePattern(event)) {
+      this.detectedDevice = 'mouse'
+    } else if (
+      this.detectedDevice === 'trackpad' &&
+      this.#shouldBufferLinuxEvent(event)
+    ) {
+      this.#bufferLinuxEvent(event, now)
+    }
+  }
+
+  /**
+   * Clears the buffered Linux wheel event and associated timer.
+   */
+  #clearLinuxBuffer(): void {
+    this.bufferedLinuxEvent = undefined
+    this.bufferedLinuxEventTime = 0
+    if (this.linuxBufferTimeoutId !== undefined) {
+      clearTimeout(this.linuxBufferTimeoutId)
+      this.linuxBufferTimeoutId = undefined
+    }
+  }
+
+  /**
+   * Checks if the event matches trackpad input patterns.
+   * @param event The wheel event to check
+   */
+  #isTrackpadPattern(event: WheelEvent): boolean {
+    // Two-finger panning: non-zero deltaX AND deltaY
+    if (event.deltaX !== 0 && event.deltaY !== 0) return true
+
+    // Pinch-to-zoom: ctrlKey with small deltaY
+    if (event.ctrlKey && Math.abs(event.deltaY) < 10) return true
+
+    return false
+  }
+
+  /**
+   * Checks if the event matches mouse wheel input patterns.
+   * @param event The wheel event to check
+   */
+  #isMousePattern(event: WheelEvent): boolean {
+    const absoluteDeltaY = Math.abs(event.deltaY)
+
+    // Primary threshold for switching from trackpad to mouse
+    if (absoluteDeltaY > 80) return true
+
+    // Secondary threshold when already in mouse mode
+    return (
+      absoluteDeltaY >= 60 &&
+      event.deltaX === 0 &&
+      this.detectedDevice === 'mouse'
+    )
+  }
+
+  /**
+   * Checks if the event should be buffered as a potential Linux wheel event.
+   * @param event The wheel event to check
+   */
+  #shouldBufferLinuxEvent(event: WheelEvent): boolean {
+    const absoluteDeltaY = Math.abs(event.deltaY)
+    const isInLinuxRange = absoluteDeltaY >= 10 && absoluteDeltaY < 60
+    const isVerticalOnly = event.deltaX === 0
+    const hasIntegerDelta = Number.isInteger(event.deltaY)
+
+    return (
+      this.detectedDevice === 'trackpad' &&
+      isInLinuxRange &&
+      isVerticalOnly &&
+      hasIntegerDelta
+    )
+  }
+
+  /**
+   * Buffers a potential Linux wheel event for later confirmation.
+   * @param event The event to buffer
+   * @param now The current timestamp
+   */
+  #bufferLinuxEvent(event: WheelEvent, now: number): void {
+    if (this.linuxBufferTimeoutId !== undefined) {
+      clearTimeout(this.linuxBufferTimeoutId)
+    }
+
+    this.bufferedLinuxEvent = event
+    this.bufferedLinuxEventTime = now
+
+    // Set timeout to clear buffer after 10ms
+    this.linuxBufferTimeoutId = setTimeout(() => {
+      this.#clearLinuxBuffer()
+    }, CanvasPointer.maxHighResBufferTime)
+  }
+
+  /**
+   * Checks if two deltaY values follow a Linux wheel pattern (divisibility).
+   * @param deltaY1 The first deltaY value
+   * @param deltaY2 The second deltaY value
+   */
+  #isLinuxWheelPattern(deltaY1: number, deltaY2: number): boolean {
+    const absolute1 = Math.abs(deltaY1)
+    const absolute2 = Math.abs(deltaY2)
+
+    if (absolute1 === 0 || absolute2 === 0) return false
+    if (absolute1 === absolute2) return true
+
+    // Check if one value is a multiple of the other
+    return absolute1 % absolute2 === 0 || absolute2 % absolute1 === 0
   }
 
   /**

src/lib/litegraph/src/LGraphCanvas.ts

@@ -36,6 +36,7 @@ import type {
   INodeSlot,
   INodeSlotContextItem,
   ISlotType,
+  LinkNetwork,
   LinkSegment,
   NullableProperties,
   Point,
@@ -2575,16 +2576,27 @@ export class LGraphCanvas
     } else if (!node.flags.collapsed) {
       const { inputs, outputs } = node
 
+      function hasRelevantOutputLinks(
+        output: INodeOutputSlot,
+        network: LinkNetwork
+      ): boolean {
+        const outputLinks = [
+          ...(output.links ?? []),
+          ...[...(output._floatingLinks ?? new Set())]
+        ]
+        return outputLinks.some(
+          (linkId) =>
+            typeof linkId === 'number' && network.getLink(linkId) !== undefined
+        )
+      }
+
       // Outputs
       if (outputs) {
         for (const [i, output] of outputs.entries()) {
           const link_pos = node.getOutputPos(i)
           if (isInRectangle(x, y, link_pos[0] - 15, link_pos[1] - 10, 30, 20)) {
             // Drag multiple output links
-            if (
-              e.shiftKey &&
-              (output.links?.length || output._floatingLinks?.size)
-            ) {
+            if (e.shiftKey && hasRelevantOutputLinks(output, graph)) {
               linkConnector.moveOutputLink(graph, output)
               this.#linkConnectorDrop()
               return
@@ -3486,8 +3498,11 @@ export class LGraphCanvas
 
     // Detect if this is a trackpad gesture or mouse wheel
     const isTrackpad = this.pointer.isTrackpadGesture(e)
+    const isCtrlOrMacMeta =
+      e.ctrlKey || (e.metaKey && navigator.platform.includes('Mac'))
+    const isZoomModifier = isCtrlOrMacMeta && !e.altKey && !e.shiftKey
 
-    if (e.ctrlKey || LiteGraph.canvasNavigationMode === 'legacy') {
+    if (isZoomModifier || LiteGraph.canvasNavigationMode === 'legacy') {
       // Legacy mode or standard mode with ctrl - use wheel for zoom
       if (isTrackpad) {
         // Trackpad gesture - use smooth scaling

src/lib/litegraph/src/canvas/LinkConnector.ts

@@ -314,6 +314,27 @@ export class LinkConnector {
         this.outputLinks.push(link)
 
         try {
+          if (link.target_id === SUBGRAPH_OUTPUT_ID) {
+            if (!(network instanceof Subgraph)) {
+              console.warn(
+                'Subgraph output link found in non-subgraph network.'
+              )
+              continue
+            }
+
+            const output = network.outputs.at(link.target_slot)
+            if (!output) throw new Error('No subgraph output found for link.')
+
+            const renderLink = new ToOutputFromIoNodeLink(
+              network,
+              network.outputNode,
+              output
+            )
+            renderLink.fromDirection = LinkDirection.NONE
+            renderLinks.push(renderLink)
+
+            continue
+          }
           const renderLink = new MovingOutputLink(
             network,
             link,

src/lib/litegraph/src/litegraph.ts

@@ -187,7 +187,7 @@ export { LGraphButton, type LGraphButtonOptions } from './LGraphButton'
 export { MovingOutputLink } from './canvas/MovingOutputLink'
 export { ToOutputRenderLink } from './canvas/ToOutputRenderLink'
 export { ToInputFromIoNodeLink } from './canvas/ToInputFromIoNodeLink'
-export type { TWidgetType, IWidgetOptions } from './types/widgets'
+export type { TWidgetType, TWidgetValue, IWidgetOptions } from './types/widgets'
 export {
   findUsedSubgraphIds,
   getDirectSubgraphIds,

src/locales/ar/main.json

@@ -272,6 +272,7 @@
     "category": "الفئة",
     "choose_file_to_upload": "اختر ملفاً للرفع",
     "clear": "مسح",
+    "clearAll": "مسح الكل",
     "clearFilters": "مسح الفلاتر",
     "close": "إغلاق",
     "color": "اللون",
@@ -327,6 +328,8 @@
     "installed": "مثبت",
     "installing": "جارٍ التثبيت",
     "interrupted": "تمت المقاطعة",
+    "itemSelected": "تم تحديد عنصر واحد",
+    "itemsSelected": "تم تحديد {selectedCount} عناصر",
     "keybinding": "اختصار لوحة المفاتيح",
     "keybindingAlreadyExists": "الاختصار موجود بالفعل في",
     "learnMore": "اعرف المزيد",

src/locales/en/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Load Default Workflow"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Toggle the Custom Nodes Manager"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Custom Nodes Manager"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Custom Nodes (Legacy)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Manager Menu (Legacy)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Install Missing Custom Nodes"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Check for Custom Node Updates"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Toggle the Custom Nodes Manager Progress Bar"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Open Mask Editor for Selected Node"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Unload Models"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Unload Models and Execution Cache"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "New Blank Workflow"
   },

src/locales/en/main.json

@@ -25,7 +25,6 @@
     "confirmed": "Confirmed",
     "reset": "Reset",
     "resetAll": "Reset All",
-    "clearFilters": "Clear Filters",
     "resetAllKeybindingsTooltip": "Reset all keybindings to default",
     "customizeFolder": "Customize Folder",
     "icon": "Icon",
@@ -137,19 +136,25 @@
     "copy": "Copy",
     "imageUrl": "Image URL",
     "clear": "Clear",
+    "clearAll": "Clear all",
     "copyURL": "Copy URL",
     "releaseTitle": "{package} {version} Release",
+    "itemSelected": "{selectedCount} item selected",
+    "itemsSelected": "{selectedCount} items selected",
     "progressCountOf": "of",
     "keybindingAlreadyExists": "Keybinding already exists on",
+    "commandProhibited": "Command {command} is prohibited. Contact an administrator for more information.",
     "startRecording": "Start Recording",
     "stopRecording": "Stop Recording",
     "micPermissionDenied": "Microphone permission denied",
     "noAudioRecorded": "No audio recorded",
-    "nodesRunning": "nodes running",
-    "duplicate": "Duplicate"
+    "nodesRunning": "nodes running"
   },
   "manager": {
     "title": "Custom Nodes Manager",
+    "legacyMenuNotAvailable": "Legacy manager menu is not available, defaulting to the new manager menu.",
+    "legacyManagerUI": "Use Legacy UI",
+    "legacyManagerUIDescription": "To use the legacy Manager UI, start ComfyUI with --enable-manager-legacy-ui",
     "failed": "Failed ({count})",
     "noNodesFound": "No nodes found",
     "noNodesFoundDescription": "The pack's nodes either could not be parsed, or the pack is a frontend extension only and doesn't have any nodes.",
@@ -159,6 +164,12 @@
     "inWorkflow": "In Workflow",
     "infoPanelEmpty": "Click an item to see the info",
     "restartToApplyChanges": "To apply changes, please restart ComfyUI",
+    "clickToFinishSetup": "Click",
+    "toFinishSetup": "to finish setup",
+    "applyChanges": "Apply Changes",
+    "restartingBackend": "Restarting backend to apply changes...",
+    "extensionsSuccessfullyInstalled": "Extension(s) successfully installed and are ready to use!",
+    "installingDependencies": "Installing dependencies...",
     "loadingVersions": "Loading versions...",
     "selectVersion": "Select Version",
     "downloads": "Downloads",
@@ -178,6 +189,7 @@
     "noResultsFound": "No results found matching your search.",
     "tryDifferentSearch": "Please try a different search query.",
     "tryAgainLater": "Please try again later.",
+    "gettingInfo": "Getting info...",
     "nodePack": "Node Pack",
     "searchPlaceholder": "Search",
     "version": "Version",
@@ -426,25 +438,32 @@
       "error": "Unable to start ComfyUI Desktop"
     }
   },
+  "shortcuts": {
+    "essentials": "Essential",
+    "viewControls": "View Controls",
+    "manageShortcuts": "Manage Shortcuts",
+    "noKeybinding": "No keybinding",
+    "keyboardShortcuts": "Keyboard Shortcuts",
+    "subcategories": {
+      "workflow": "Workflow",
+      "node": "Node",
+      "queue": "Queue",
+      "view": "View",
+      "panelControls": "Panel Controls"
+    }
+  },
   "serverConfig": {
     "modifiedConfigs": "You have modified the following server configurations. Restart to apply changes.",
     "revertChanges": "Revert Changes",
     "restart": "Restart"
   },
   "sideToolbar": {
+    "themeToggle": "Toggle Theme",
     "helpCenter": "Help Center",
     "logout": "Logout",
     "queue": "Queue",
     "nodeLibrary": "Node Library",
     "workflows": "Workflows",
-    "templates": "Templates",
-    "labels": {
-      "queue": "Queue",
-      "nodes": "Nodes",
-      "models": "Models",
-      "workflows": "Workflows",
-      "templates": "Templates"
-    },
     "browseTemplates": "Browse example templates",
     "openWorkflow": "Open workflow in local file system",
     "newBlankWorkflow": "Create a new blank workflow",
@@ -540,14 +559,7 @@
     "clipspace": "Open Clipspace",
     "resetView": "Reset canvas view",
     "clear": "Clear workflow",
-    "toggleBottomPanel": "Toggle Bottom Panel",
-    "theme": "Theme",
-    "dark": "Dark",
-    "light": "Light",
-    "manageExtensions": "Manage Extensions",
-    "settings": "Settings",
-    "help": "Help",
-    "queue": "Queue Panel"
+    "toggleBottomPanel": "Toggle Bottom Panel"
   },
   "tabMenu": {
     "duplicateTab": "Duplicate Tab",
@@ -891,8 +903,7 @@
     "fitView": "Fit View",
     "selectMode": "Select Mode",
     "panMode": "Pan Mode",
-    "toggleLinkVisibility": "Toggle Link Visibility",
-    "toggleMinimap": "Toggle Minimap"
+    "toggleLinkVisibility": "Toggle Link Visibility"
   },
   "groupNode": {
     "create": "Create group node",
@@ -941,8 +952,9 @@
     "Image Layer": "Image Layer"
   },
   "menuLabels": {
-    "File": "File",
+    "Workflow": "Workflow",
     "Edit": "Edit",
+    "Manager": "Manager",
     "Help": "Help",
     "Check for Updates": "Check for Updates",
     "Open Custom Nodes Folder": "Open Custom Nodes Folder",
@@ -956,19 +968,17 @@
     "Quit": "Quit",
     "Reinstall": "Reinstall",
     "Restart": "Restart",
-    "Open 3D Viewer (Beta) for Selected Node": "Open 3D Viewer (Beta) for Selected Node",
     "Browse Templates": "Browse Templates",
     "Delete Selected Items": "Delete Selected Items",
-    "Zoom to fit": "Zoom to fit",
+    "Fit view to selected nodes": "Fit view to selected nodes",
     "Move Selected Nodes Down": "Move Selected Nodes Down",
     "Move Selected Nodes Left": "Move Selected Nodes Left",
     "Move Selected Nodes Right": "Move Selected Nodes Right",
     "Move Selected Nodes Up": "Move Selected Nodes Up",
     "Reset View": "Reset View",
     "Resize Selected Nodes": "Resize Selected Nodes",
-    "Node Links": "Node Links",
+    "Canvas Toggle Link Visibility": "Canvas Toggle Link Visibility",
     "Canvas Toggle Lock": "Canvas Toggle Lock",
-    "Minimap": "Minimap",
     "Pin/Unpin Selected Items": "Pin/Unpin Selected Items",
     "Bypass/Unbypass Selected Nodes": "Bypass/Unbypass Selected Nodes",
     "Collapse/Expand Selected Nodes": "Collapse/Expand Selected Nodes",
@@ -985,10 +995,8 @@
     "Export (API)": "Export (API)",
     "Give Feedback": "Give Feedback",
     "Convert Selection to Subgraph": "Convert Selection to Subgraph",
-    "Exit Subgraph": "Exit Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
-    "Unpack the selected Subgraph": "Unpack the selected Subgraph",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
     "Manage group nodes": "Manage group nodes",
     "Ungroup selected group nodes": "Ungroup selected group nodes",
@@ -999,14 +1007,17 @@
     "ComfyUI Issues": "ComfyUI Issues",
     "Interrupt": "Interrupt",
     "Load Default Workflow": "Load Default Workflow",
-    "Toggle the Custom Nodes Manager": "Toggle the Custom Nodes Manager",
+    "Custom Nodes Manager": "Custom Nodes Manager",
+    "Custom Nodes (Legacy)": "Custom Nodes (Legacy)",
+    "Manager Menu (Legacy)": "Manager Menu (Legacy)",
+    "Install Missing Custom Nodes": "Install Missing Custom Nodes",
+    "Check for Custom Node Updates": "Check for Custom Node Updates",
     "Toggle the Custom Nodes Manager Progress Bar": "Toggle the Custom Nodes Manager Progress Bar",
-    "Decrease Brush Size in MaskEditor": "Decrease Brush Size in MaskEditor",
-    "Increase Brush Size in MaskEditor": "Increase Brush Size in MaskEditor",
     "Open Mask Editor for Selected Node": "Open Mask Editor for Selected Node",
+    "Unload Models": "Unload Models",
+    "Unload Models and Execution Cache": "Unload Models and Execution Cache",
     "New": "New",
     "Clipspace": "Clipspace",
-    "Manager": "Manager",
     "Open": "Open",
     "Queue Prompt": "Queue Prompt",
     "Queue Prompt (Front)": "Queue Prompt (Front)",
@@ -1016,8 +1027,6 @@
     "Save": "Save",
     "Save As": "Save As",
     "Show Settings Dialog": "Show Settings Dialog",
-    "Canvas Performance": "Canvas Performance",
-    "Help Center": "Help Center",
     "Toggle Theme (Dark/Light)": "Toggle Theme (Dark/Light)",
     "Undo": "Undo",
     "Open Sign In Dialog": "Open Sign In Dialog",
@@ -1026,17 +1035,14 @@
     "Next Opened Workflow": "Next Opened Workflow",
     "Previous Opened Workflow": "Previous Opened Workflow",
     "Toggle Search Box": "Toggle Search Box",
-    "Bottom Panel": "Bottom Panel",
-    "Show Keybindings Dialog": "Show Keybindings Dialog",
+    "Toggle Bottom Panel": "Toggle Bottom Panel",
     "Toggle Terminal Bottom Panel": "Toggle Terminal Bottom Panel",
     "Toggle Logs Bottom Panel": "Toggle Logs Bottom Panel",
-    "Toggle Essential Bottom Panel": "Toggle Essential Bottom Panel",
-    "Toggle View Controls Bottom Panel": "Toggle View Controls Bottom Panel",
-    "Focus Mode": "Focus Mode",
-    "Model Library": "Model Library",
-    "Node Library": "Node Library",
-    "Queue Panel": "Queue Panel",
-    "Workflows": "Workflows"
+    "Toggle Focus Mode": "Toggle Focus Mode",
+    "Toggle Model Library Sidebar": "Toggle Model Library Sidebar",
+    "Toggle Node Library Sidebar": "Toggle Node Library Sidebar",
+    "Toggle Queue Sidebar": "Toggle Queue Sidebar",
+    "Toggle Workflows Sidebar": "Toggle Workflows Sidebar"
   },
   "desktopMenu": {
     "reinstall": "Reinstall",
@@ -1095,8 +1101,7 @@
     "User": "User",
     "Credits": "Credits",
     "API Nodes": "API Nodes",
-    "Notification Preferences": "Notification Preferences",
-    "3DViewer": "3DViewer"
+    "Notification Preferences": "Notification Preferences"
   },
   "serverConfigItems": {
     "listen": {
@@ -1448,31 +1453,12 @@
       "depth": "Depth",
       "lineart": "Lineart"
     },
-    "upDirections": {
-      "original": "Original"
-    },
     "startRecording": "Start Recording",
     "stopRecording": "Stop Recording",
     "exportRecording": "Export Recording",
     "clearRecording": "Clear Recording",
     "resizeNodeMatchOutput": "Resize Node to match output",
-    "loadingBackgroundImage": "Loading Background Image",
-    "cameraType": {
-      "perspective": "Perspective",
-      "orthographic": "Orthographic"
-    },
-    "viewer": {
-      "title": "3D Viewer (Beta)",
-      "apply": "Apply",
-      "cancel": "Cancel",
-      "cameraType": "Camera Type",
-      "sceneSettings": "Scene Settings",
-      "cameraSettings": "Camera Settings",
-      "lightSettings": "Light Settings",
-      "exportSettings": "Export Settings",
-      "modelSettings": "Model Settings"
-    },
-    "openIn3DViewer": "Open in 3D Viewer"
+    "loadingBackgroundImage": "Loading Background Image"
   },
   "toastMessages": {
     "nothingToQueue": "Nothing to queue",
@@ -1510,8 +1496,7 @@
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
     "nothingSelected": "Nothing selected",
     "cannotCreateSubgraph": "Cannot create subgraph",
-    "failedToConvertToSubgraph": "Failed to convert items to subgraph",
-    "failedToInitializeLoad3dViewer": "Failed to initialize 3D Viewer"
+    "failedToConvertToSubgraph": "Failed to convert items to subgraph"
   },
   "auth": {
     "apiKey": {
@@ -1664,32 +1649,5 @@
   "whatsNewPopup": {
     "learnMore": "Learn more",
     "noReleaseNotes": "No release notes available."
-  },
-  "breadcrumbsMenu": {
-    "duplicate": "Duplicate",
-    "clearWorkflow": "Clear Workflow",
-    "deleteWorkflow": "Delete Workflow",
-    "enterNewName": "Enter new name"
-  },
-  "shortcuts": {
-    "essentials": "Essential",
-    "viewControls": "View Controls",
-    "manageShortcuts": "Manage Shortcuts",
-    "noKeybinding": "No keybinding",
-    "keyboardShortcuts": "Keyboard Shortcuts",
-    "subcategories": {
-      "workflow": "Workflow",
-      "node": "Node",
-      "queue": "Queue",
-      "view": "View",
-      "panelControls": "Panel Controls"
-    }
-  },
-  "minimap": {
-    "nodeColors": "Node Colors",
-    "showLinks": "Show Links",
-    "showGroups": "Show Frames/Groups",
-    "renderBypassState": "Render Bypass State",
-    "renderErrorState": "Render Error State"
   }
 }

src/locales/es/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Cargar flujo de trabajo predeterminado"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Administrador de nodos personalizados"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Nodos personalizados (Beta)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Nodos personalizados (heredados)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Menú del administrador (heredado)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Instalar faltantes"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Buscar actualizaciones"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Alternar diálogo de progreso del administrador"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Abrir editor de máscara para el nodo seleccionado"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Descargar modelos"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Descargar modelos y caché de ejecución"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Nuevo flujo de trabajo en blanco"
   },

src/locales/es/main.json

@@ -272,11 +272,13 @@
     "category": "Categoría",
     "choose_file_to_upload": "elige archivo para subir",
     "clear": "Limpiar",
+    "clearAll": "Borrar todo",
     "clearFilters": "Borrar filtros",
     "close": "Cerrar",
     "color": "Color",
     "comingSoon": "Próximamente",
     "command": "Comando",
+    "commandProhibited": "El comando {command} está prohibido. Contacta a un administrador para más información.",
     "community": "Comunidad",
     "completed": "Completado",
     "confirm": "Confirmar",
@@ -299,7 +301,6 @@
     "disabling": "Deshabilitando",
     "dismiss": "Descartar",
     "download": "Descargar",
-    "duplicate": "Duplicar",
     "edit": "Editar",
     "empty": "Vacío",
     "enableAll": "Habilitar todo",
@@ -327,6 +328,8 @@
     "installed": "Instalado",
     "installing": "Instalando",
     "interrupted": "Interrumpido",
+    "itemSelected": "{selectedCount} elemento seleccionado",
+    "itemsSelected": "{selectedCount} elementos seleccionados",
     "keybinding": "Combinación de teclas",
     "keybindingAlreadyExists": "La combinación de teclas ya existe en",
     "learnMore": "Aprende más",
@@ -570,10 +573,6 @@
     "applyingTexture": "Aplicando textura...",
     "backgroundColor": "Color de fondo",
     "camera": "Cámara",
-    "cameraType": {
-      "orthographic": "Ortográfica",
-      "perspective": "Perspectiva"
-    },
     "clearRecording": "Borrar grabación",
     "edgeThreshold": "Umbral de borde",
     "export": "Exportar",
@@ -594,7 +593,6 @@
       "wireframe": "Malla"
     },
     "model": "Modelo",
-    "openIn3DViewer": "Abrir en el visor 3D",
     "previewOutput": "Vista previa de salida",
     "removeBackgroundImage": "Eliminar imagen de fondo",
     "resizeNodeMatchOutput": "Redimensionar nodo para coincidir con la salida",
@@ -605,22 +603,8 @@
     "switchCamera": "Cambiar cámara",
     "switchingMaterialMode": "Cambiando modo de material...",
     "upDirection": "Dirección hacia arriba",
-    "upDirections": {
-      "original": "Original"
-    },
     "uploadBackgroundImage": "Subir imagen de fondo",
-    "uploadTexture": "Subir textura",
-    "viewer": {
-      "apply": "Aplicar",
-      "cameraSettings": "Configuración de la cámara",
-      "cameraType": "Tipo de cámara",
-      "cancel": "Cancelar",
-      "exportSettings": "Configuración de exportación",
-      "lightSettings": "Configuración de la luz",
-      "modelSettings": "Configuración del modelo",
-      "sceneSettings": "Configuración de la escena",
-      "title": "Visor 3D (Beta)"
-    }
+    "uploadTexture": "Subir textura"
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "Requiere ComfyUI {version}:",
@@ -667,6 +651,9 @@
     "installationQueue": "Cola de Instalación",
     "lastUpdated": "Última Actualización",
     "latestVersion": "Última",
+    "legacyManagerUI": "Usar UI antigua",
+    "legacyManagerUIDescription": "Para usar la UI antigua del Manager, inicia ComfyUI con --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "El menú del administrador antiguo no está disponible en esta versión de ComfyUI. Por favor, utiliza el nuevo menú del administrador en su lugar.",
     "license": "Licencia",
     "loadingVersions": "Cargando versiones...",
     "nightlyVersion": "Nocturna",
@@ -749,7 +736,6 @@
     "manageExtensions": "Gestionar extensiones",
     "onChange": "Al cambiar",
     "onChangeTooltip": "El flujo de trabajo se encolará una vez que se haga un cambio",
-    "queue": "Panel de cola",
     "refresh": "Actualizar definiciones de nodos",
     "resetView": "Restablecer vista del lienzo",
     "run": "Ejecutar",
@@ -765,8 +751,10 @@
     "Bottom Panel": "Panel inferior",
     "Browse Templates": "Explorar plantillas",
     "Bypass/Unbypass Selected Nodes": "Evitar/No evitar nodos seleccionados",
-    "Canvas Performance": "Rendimiento del lienzo",
+    "Canvas Toggle Link Visibility": "Alternar visibilidad de enlace en lienzo",
     "Canvas Toggle Lock": "Alternar bloqueo en lienzo",
+    "Canvas Toggle Minimap": "Lienzo: Alternar minimapa",
+    "Check for Custom Node Updates": "Buscar actualizaciones de nodos personalizados",
     "Check for Updates": "Buscar actualizaciones",
     "Clear Pending Tasks": "Borrar tareas pendientes",
     "Clear Workflow": "Borrar flujo de trabajo",
@@ -780,28 +768,27 @@
     "Contact Support": "Contactar soporte",
     "Convert Selection to Subgraph": "Convertir selección en subgrafo",
     "Convert selected nodes to group node": "Convertir nodos seleccionados en nodo de grupo",
+    "Custom Nodes (Legacy)": "Nodos personalizados (heredado)",
+    "Custom Nodes Manager": "Administrador de Nodos Personalizados",
     "Decrease Brush Size in MaskEditor": "Disminuir tamaño del pincel en MaskEditor",
     "Delete Selected Items": "Eliminar elementos seleccionados",
     "Desktop User Guide": "Guía de usuario de escritorio",
     "Duplicate Current Workflow": "Duplicar flujo de trabajo actual",
     "Edit": "Editar",
-    "Exit Subgraph": "Salir de subgrafo",
     "Export": "Exportar",
     "Export (API)": "Exportar (API)",
-    "File": "Archivo",
     "Fit Group To Contents": "Ajustar grupo a contenidos",
-    "Focus Mode": "Modo de enfoque",
+    "Fit view to selected nodes": "Ajustar vista a los nodos seleccionados",
     "Give Feedback": "Dar retroalimentación",
     "Group Selected Nodes": "Agrupar nodos seleccionados",
     "Help": "Ayuda",
-    "Help Center": "Centro de ayuda",
     "Increase Brush Size in MaskEditor": "Aumentar tamaño del pincel en MaskEditor",
+    "Install Missing Custom Nodes": "Instalar nodos personalizados faltantes",
     "Interrupt": "Interrumpir",
     "Load Default Workflow": "Cargar flujo de trabajo predeterminado",
     "Manage group nodes": "Gestionar nodos de grupo",
     "Manager": "Administrador",
-    "Minimap": "Minimapa",
-    "Model Library": "Biblioteca de modelos",
+    "Manager Menu (Legacy)": "Menú de gestión (heredado)",
     "Move Selected Nodes Down": "Mover nodos seleccionados hacia abajo",
     "Move Selected Nodes Left": "Mover nodos seleccionados hacia la izquierda",
     "Move Selected Nodes Right": "Mover nodos seleccionados hacia la derecha",
@@ -809,10 +796,7 @@
     "Mute/Unmute Selected Nodes": "Silenciar/Activar sonido de nodos seleccionados",
     "New": "Nuevo",
     "Next Opened Workflow": "Siguiente flujo de trabajo abierto",
-    "Node Library": "Biblioteca de nodos",
-    "Node Links": "Enlaces de nodos",
     "Open": "Abrir",
-    "Open 3D Viewer (Beta) for Selected Node": "Abrir visor 3D (Beta) para el nodo seleccionado",
     "Open Custom Nodes Folder": "Abrir carpeta de nodos personalizados",
     "Open DevTools": "Abrir DevTools",
     "Open Inputs Folder": "Abrir carpeta de entradas",
@@ -825,7 +809,6 @@
     "Pin/Unpin Selected Items": "Anclar/Desanclar elementos seleccionados",
     "Pin/Unpin Selected Nodes": "Anclar/Desanclar nodos seleccionados",
     "Previous Opened Workflow": "Flujo de trabajo abierto anterior",
-    "Queue Panel": "Panel de cola",
     "Queue Prompt": "Indicador de cola",
     "Queue Prompt (Front)": "Indicador de cola (Frente)",
     "Queue Selected Output Nodes": "Encolar nodos de salida seleccionados",
@@ -842,28 +825,24 @@
     "Show Model Selector (Dev)": "Mostrar selector de modelo (Desarrollo)",
     "Show Settings Dialog": "Mostrar diálogo de configuración",
     "Sign Out": "Cerrar sesión",
-    "Toggle Essential Bottom Panel": "Alternar panel inferior esencial",
+    "Toggle Bottom Panel": "Alternar panel inferior",
+    "Toggle Focus Mode": "Alternar modo de enfoque",
     "Toggle Logs Bottom Panel": "Alternar panel inferior de registros",
+    "Toggle Model Library Sidebar": "Alternar barra lateral de la biblioteca de modelos",
+    "Toggle Node Library Sidebar": "Alternar barra lateral de la biblioteca de nodos",
+    "Toggle Queue Sidebar": "Alternar barra lateral de la cola",
     "Toggle Search Box": "Alternar caja de búsqueda",
     "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
     "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
-    "Toggle View Controls Bottom Panel": "Alternar panel inferior de controles de vista",
-    "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
+    "Toggle Workflows Sidebar": "Alternar barra lateral de los flujos de trabajo",
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
-    "Unpack the selected Subgraph": "Desempaquetar el Subgrafo seleccionado",
-    "Workflows": "Flujos de trabajo",
+    "Unload Models": "Descargar modelos",
+    "Unload Models and Execution Cache": "Descargar modelos y caché de ejecución",
+    "Workflow": "Flujo de trabajo",
     "Zoom In": "Acercar",
-    "Zoom Out": "Alejar",
-    "Zoom to fit": "Ajustar al tamaño"
-  },
-  "minimap": {
-    "nodeColors": "Colores de nodos",
-    "renderBypassState": "Mostrar estado de omisión",
-    "renderErrorState": "Mostrar estado de error",
-    "showGroups": "Mostrar marcos/grupos",
-    "showLinks": "Mostrar enlaces"
+    "Zoom Out": "Alejar"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "No mostrar esto de nuevo",
@@ -1131,7 +1110,6 @@
   },
   "settingsCategories": {
     "3D": "3D",
-    "3DViewer": "Visor 3D",
     "API Nodes": "Nodos API",
     "About": "Acerca de",
     "Appearance": "Apariencia",
@@ -1183,31 +1161,10 @@
     "Window": "Ventana",
     "Workflow": "Flujo de Trabajo"
   },
-  "shortcuts": {
-    "essentials": "Esenciales",
-    "keyboardShortcuts": "Atajos de teclado",
-    "manageShortcuts": "Gestionar atajos",
-    "noKeybinding": "Sin asignación de tecla",
-    "subcategories": {
-      "node": "Nodo",
-      "panelControls": "Controles del panel",
-      "queue": "Cola",
-      "view": "Vista",
-      "workflow": "Flujo de trabajo"
-    },
-    "viewControls": "Controles de vista"
-  },
   "sideToolbar": {
     "browseTemplates": "Explorar plantillas de ejemplo",
     "downloads": "Descargas",
     "helpCenter": "Centro de ayuda",
-    "labels": {
-      "models": "Modelos",
-      "nodes": "Nodos",
-      "queue": "Cola",
-      "templates": "Plantillas",
-      "workflows": "Flujos de trabajo"
-    },
     "logout": "Cerrar sesión",
     "modelLibrary": "Biblioteca de modelos",
     "newBlankWorkflow": "Crear un nuevo flujo de trabajo en blanco",
@@ -1245,7 +1202,6 @@
       },
       "showFlatList": "Mostrar lista plana"
     },
-    "templates": "Plantillas",
     "workflowTab": {
       "confirmDelete": "¿Estás seguro de que quieres eliminar este flujo de trabajo?",
       "confirmDeleteTitle": "¿Eliminar flujo de trabajo?",
@@ -1292,8 +1248,6 @@
       "Video": "Video",
       "Video API": "API de Video"
     },
-    "loadingMore": "Cargando más plantillas...",
-    "searchPlaceholder": "Buscar plantillas...",
     "template": {
       "3D": {
         "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
@@ -1616,7 +1570,6 @@
     "failedToExportModel": "Error al exportar modelo como {format}",
     "failedToFetchBalance": "No se pudo obtener el saldo: {error}",
     "failedToFetchLogs": "Error al obtener los registros del servidor",
-    "failedToInitializeLoad3dViewer": "No se pudo inicializar el visor 3D",
     "failedToInitiateCreditPurchase": "No se pudo iniciar la compra de créditos: {error}",
     "failedToPurchaseCredits": "No se pudo comprar créditos: {error}",
     "fileLoadError": "No se puede encontrar el flujo de trabajo en {fileName}",

src/locales/fr/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Charger le flux de travail par défaut"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Gestionnaire de Nœuds Personnalisés"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Nœuds personnalisés (Beta)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Nœuds personnalisés (hérités)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Menu du gestionnaire (héritage)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Installer manquants"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Vérifier les mises à jour"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Basculer la boîte de dialogue de progression"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Ouvrir l'éditeur de masque pour le nœud sélectionné"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Décharger les modèles"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Décharger les modèles et le cache d'exécution"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Nouveau flux de travail vierge"
   },

src/locales/fr/main.json

@@ -272,11 +272,13 @@
     "category": "Catégorie",
     "choose_file_to_upload": "choisissez le fichier à télécharger",
     "clear": "Effacer",
+    "clearAll": "Tout effacer",
     "clearFilters": "Effacer les filtres",
     "close": "Fermer",
     "color": "Couleur",
     "comingSoon": "Bientôt disponible",
     "command": "Commande",
+    "commandProhibited": "La commande {command} est interdite. Contactez un administrateur pour plus d'informations.",
     "community": "Communauté",
     "completed": "Terminé",
     "confirm": "Confirmer",
@@ -299,7 +301,6 @@
     "disabling": "Désactivation",
     "dismiss": "Fermer",
     "download": "Télécharger",
-    "duplicate": "Dupliquer",
     "edit": "Modifier",
     "empty": "Vide",
     "enableAll": "Activer tout",
@@ -327,6 +328,8 @@
     "installed": "Installé",
     "installing": "Installation",
     "interrupted": "Interrompu",
+    "itemSelected": "{selectedCount} élément sélectionné",
+    "itemsSelected": "{selectedCount} éléments sélectionnés",
     "keybinding": "Raccourci clavier",
     "keybindingAlreadyExists": "Le raccourci clavier existe déjà",
     "learnMore": "En savoir plus",
@@ -570,10 +573,6 @@
     "applyingTexture": "Application de la texture...",
     "backgroundColor": "Couleur de fond",
     "camera": "Caméra",
-    "cameraType": {
-      "orthographic": "Orthographique",
-      "perspective": "Perspective"
-    },
     "clearRecording": "Effacer l'enregistrement",
     "edgeThreshold": "Seuil de Bordure",
     "export": "Exportation",
@@ -594,7 +593,6 @@
       "wireframe": "Fil de fer"
     },
     "model": "Modèle",
-    "openIn3DViewer": "Ouvrir dans la visionneuse 3D",
     "previewOutput": "Aperçu de la sortie",
     "removeBackgroundImage": "Supprimer l'image de fond",
     "resizeNodeMatchOutput": "Redimensionner le nœud pour correspondre à la sortie",
@@ -605,22 +603,8 @@
     "switchCamera": "Changer de caméra",
     "switchingMaterialMode": "Changement de mode de matériau...",
     "upDirection": "Direction Haut",
-    "upDirections": {
-      "original": "Original"
-    },
     "uploadBackgroundImage": "Télécharger l'image de fond",
-    "uploadTexture": "Télécharger Texture",
-    "viewer": {
-      "apply": "Appliquer",
-      "cameraSettings": "Paramètres de la caméra",
-      "cameraType": "Type de caméra",
-      "cancel": "Annuler",
-      "exportSettings": "Paramètres d’exportation",
-      "lightSettings": "Paramètres de l’éclairage",
-      "modelSettings": "Paramètres du modèle",
-      "sceneSettings": "Paramètres de la scène",
-      "title": "Visionneuse 3D (Bêta)"
-    }
+    "uploadTexture": "Télécharger Texture"
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "Nécessite ComfyUI {version} :",
@@ -667,6 +651,9 @@
     "installationQueue": "File d'attente d'installation",
     "lastUpdated": "Dernière mise à jour",
     "latestVersion": "Dernière",
+    "legacyManagerUI": "Utiliser l'interface utilisateur héritée",
+    "legacyManagerUIDescription": "Pour utiliser l'interface utilisateur de gestion héritée, démarrez ComfyUI avec --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "Le menu du gestionnaire de l'ancienne version n'est pas disponible dans cette version de ComfyUI. Veuillez utiliser le nouveau menu du gestionnaire à la place.",
     "license": "Licence",
     "loadingVersions": "Chargement des versions...",
     "nightlyVersion": "Nocturne",
@@ -749,7 +736,6 @@
     "manageExtensions": "Gérer les extensions",
     "onChange": "Sur modification",
     "onChangeTooltip": "Le flux de travail sera mis en file d'attente une fois une modification effectuée",
-    "queue": "Panneau de file d’attente",
     "refresh": "Actualiser les définitions des nœuds",
     "resetView": "Réinitialiser la vue du canevas",
     "run": "Exécuter",
@@ -765,8 +751,10 @@
     "Bottom Panel": "Panneau inférieur",
     "Browse Templates": "Parcourir les modèles",
     "Bypass/Unbypass Selected Nodes": "Contourner/Ne pas contourner les nœuds sélectionnés",
-    "Canvas Performance": "Performance du canevas",
+    "Canvas Toggle Link Visibility": "Basculer la visibilité du lien de la toile",
     "Canvas Toggle Lock": "Basculer le verrouillage de la toile",
+    "Canvas Toggle Minimap": "Basculer la mini-carte du canevas",
+    "Check for Custom Node Updates": "Vérifier les mises à jour des nœuds personnalisés",
     "Check for Updates": "Vérifier les mises à jour",
     "Clear Pending Tasks": "Effacer les tâches en attente",
     "Clear Workflow": "Effacer le flux de travail",
@@ -780,28 +768,27 @@
     "Contact Support": "Contacter le support",
     "Convert Selection to Subgraph": "Convertir la sélection en sous-graphe",
     "Convert selected nodes to group node": "Convertir les nœuds sélectionnés en nœud de groupe",
+    "Custom Nodes (Legacy)": "Nœuds personnalisés (héritage)",
+    "Custom Nodes Manager": "Gestionnaire de Nœuds Personnalisés",
     "Decrease Brush Size in MaskEditor": "Réduire la taille du pinceau dans MaskEditor",
     "Delete Selected Items": "Supprimer les éléments sélectionnés",
     "Desktop User Guide": "Guide de l'utilisateur de bureau",
     "Duplicate Current Workflow": "Dupliquer le flux de travail actuel",
     "Edit": "Éditer",
-    "Exit Subgraph": "Quitter le sous-graphe",
     "Export": "Exporter",
     "Export (API)": "Exporter (API)",
-    "File": "Fichier",
     "Fit Group To Contents": "Ajuster le groupe au contenu",
-    "Focus Mode": "Mode focus",
+    "Fit view to selected nodes": "Ajuster la vue aux nœuds sélectionnés",
     "Give Feedback": "Donnez votre avis",
     "Group Selected Nodes": "Grouper les nœuds sélectionnés",
     "Help": "Aide",
-    "Help Center": "Centre d’aide",
     "Increase Brush Size in MaskEditor": "Augmenter la taille du pinceau dans MaskEditor",
+    "Install Missing Custom Nodes": "Installer les nœuds personnalisés manquants",
     "Interrupt": "Interrompre",
     "Load Default Workflow": "Charger le flux de travail par défaut",
     "Manage group nodes": "Gérer les nœuds de groupe",
     "Manager": "Gestionnaire",
-    "Minimap": "Minicarte",
-    "Model Library": "Bibliothèque de modèles",
+    "Manager Menu (Legacy)": "Menu du gestionnaire (héritage)",
     "Move Selected Nodes Down": "Déplacer les nœuds sélectionnés vers le bas",
     "Move Selected Nodes Left": "Déplacer les nœuds sélectionnés vers la gauche",
     "Move Selected Nodes Right": "Déplacer les nœuds sélectionnés vers la droite",
@@ -809,10 +796,7 @@
     "Mute/Unmute Selected Nodes": "Mettre en sourdine/Activer le son des nœuds sélectionnés",
     "New": "Nouveau",
     "Next Opened Workflow": "Prochain flux de travail ouvert",
-    "Node Library": "Bibliothèque de nœuds",
-    "Node Links": "Liens de nœuds",
     "Open": "Ouvrir",
-    "Open 3D Viewer (Beta) for Selected Node": "Ouvrir le visualiseur 3D (bêta) pour le nœud sélectionné",
     "Open Custom Nodes Folder": "Ouvrir le dossier des nœuds personnalisés",
     "Open DevTools": "Ouvrir DevTools",
     "Open Inputs Folder": "Ouvrir le dossier des entrées",
@@ -825,7 +809,6 @@
     "Pin/Unpin Selected Items": "Épingler/Désépingler les éléments sélectionnés",
     "Pin/Unpin Selected Nodes": "Épingler/Désépingler les nœuds sélectionnés",
     "Previous Opened Workflow": "Flux de travail ouvert précédent",
-    "Queue Panel": "Panneau de file d’attente",
     "Queue Prompt": "Invite de file d'attente",
     "Queue Prompt (Front)": "Invite de file d'attente (Front)",
     "Queue Selected Output Nodes": "Mettre en file d’attente les nœuds de sortie sélectionnés",
@@ -844,6 +827,9 @@
     "Sign Out": "Se déconnecter",
     "Toggle Essential Bottom Panel": "Basculer le panneau inférieur essentiel",
     "Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
+    "Toggle Model Library Sidebar": "Afficher/Masquer la barre latérale de la bibliothèque de modèles",
+    "Toggle Node Library Sidebar": "Afficher/Masquer la barre latérale de la bibliothèque de nœuds",
+    "Toggle Queue Sidebar": "Afficher/Masquer la barre latérale de la file d’attente",
     "Toggle Search Box": "Basculer la boîte de recherche",
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
@@ -852,18 +838,11 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
-    "Unpack the selected Subgraph": "Décompresser le Subgraph sélectionné",
-    "Workflows": "Flux de travail",
+    "Unload Models": "Décharger les modèles",
+    "Unload Models and Execution Cache": "Décharger les modèles et le cache d'exécution",
+    "Workflow": "Flux de travail",
     "Zoom In": "Zoom avant",
-    "Zoom Out": "Zoom arrière",
-    "Zoom to fit": "Ajuster à l’écran"
-  },
-  "minimap": {
-    "nodeColors": "Couleurs des nœuds",
-    "renderBypassState": "Afficher l’état de contournement",
-    "renderErrorState": "Afficher l’état d’erreur",
-    "showGroups": "Afficher les cadres/groupes",
-    "showLinks": "Afficher les liens"
+    "Zoom Out": "Zoom arrière"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Ne plus afficher ce message",
@@ -1131,7 +1110,6 @@
   },
   "settingsCategories": {
     "3D": "3D",
-    "3DViewer": "Visionneuse 3D",
     "API Nodes": "Nœuds API",
     "About": "À Propos",
     "Appearance": "Apparence",
@@ -1183,31 +1161,10 @@
     "Window": "Fenêtre",
     "Workflow": "Flux de Travail"
   },
-  "shortcuts": {
-    "essentials": "Essentiel",
-    "keyboardShortcuts": "Raccourcis clavier",
-    "manageShortcuts": "Gérer les raccourcis",
-    "noKeybinding": "Aucun raccourci",
-    "subcategories": {
-      "node": "Nœud",
-      "panelControls": "Contrôles du panneau",
-      "queue": "File d’attente",
-      "view": "Vue",
-      "workflow": "Flux de travail"
-    },
-    "viewControls": "Contrôles d’affichage"
-  },
   "sideToolbar": {
     "browseTemplates": "Parcourir les modèles d'exemple",
     "downloads": "Téléchargements",
     "helpCenter": "Centre d'aide",
-    "labels": {
-      "models": "Modèles",
-      "nodes": "Nœuds",
-      "queue": "File d’attente",
-      "templates": "Modèles",
-      "workflows": "Flux de travail"
-    },
     "logout": "Déconnexion",
     "modelLibrary": "Bibliothèque de modèles",
     "newBlankWorkflow": "Créer un nouveau flux de travail vierge",
@@ -1245,7 +1202,6 @@
       },
       "showFlatList": "Afficher la liste plate"
     },
-    "templates": "Modèles",
     "workflowTab": {
       "confirmDelete": "Êtes-vous sûr de vouloir supprimer ce flux de travail ?",
       "confirmDeleteTitle": "Supprimer le flux de travail ?",
@@ -1292,8 +1248,6 @@
       "Video": "Vidéo",
       "Video API": "API vidéo"
     },
-    "loadingMore": "Chargement de plus de modèles...",
-    "searchPlaceholder": "Rechercher des modèles...",
     "template": {
       "3D": {
         "3d_hunyuan3d_image_to_model": "Hunyuan3D",
@@ -1616,7 +1570,6 @@
     "failedToExportModel": "Échec de l'exportation du modèle en {format}",
     "failedToFetchBalance": "Échec de la récupération du solde : {error}",
     "failedToFetchLogs": "Échec de la récupération des journaux du serveur",
-    "failedToInitializeLoad3dViewer": "Échec de l'initialisation du visualiseur 3D",
     "failedToInitiateCreditPurchase": "Échec de l'initiation de l'achat de crédits : {error}",
     "failedToPurchaseCredits": "Échec de l'achat de crédits : {error}",
     "fileLoadError": "Impossible de trouver le flux de travail dans {fileName}",

src/locales/ja/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "デフォルトのワークフローを読み込む"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "カスタムノードマネージャ"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "カスタムノード（ベータ版）"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "カスタムノード（レガシー）"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "マネージャーメニュー（レガシー）"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "不足しているパックをインストール"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "更新を確認"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "プログレスダイアログの切り替え"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "選択したノードのマスクエディタを開く"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "モデルのアンロード"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "モデルと実行キャッシュのアンロード"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新しい空のワークフロー"
   },

src/locales/ja/main.json

@@ -272,11 +272,13 @@
     "category": "カテゴリ",
     "choose_file_to_upload": "アップロードするファイルを選択",
     "clear": "クリア",
+    "clearAll": "すべてクリア",
     "clearFilters": "フィルターをクリア",
     "close": "閉じる",
     "color": "色",
     "comingSoon": "近日公開",
     "command": "コマンド",
+    "commandProhibited": "コマンド {command} は禁止されています。詳細は管理者にお問い合わせください。",
     "community": "コミュニティ",
     "completed": "完了",
     "confirm": "確認",
@@ -299,7 +301,6 @@
     "disabling": "無効化",
     "dismiss": "閉じる",
     "download": "ダウンロード",
-    "duplicate": "複製",
     "edit": "編集",
     "empty": "空",
     "enableAll": "すべて有効にする",
@@ -327,6 +328,8 @@
     "installed": "インストール済み",
     "installing": "インストール中",
     "interrupted": "中断されました",
+    "itemSelected": "{selectedCount}件選択済み",
+    "itemsSelected": "{selectedCount}件選択済み",
     "keybinding": "キーバインディング",
     "keybindingAlreadyExists": "このキー割り当てはすでに存在します",
     "learnMore": "詳細を学ぶ",
@@ -570,10 +573,6 @@
     "applyingTexture": "テクスチャを適用中...",
     "backgroundColor": "背景色",
     "camera": "カメラ",
-    "cameraType": {
-      "orthographic": "オルソグラフィック",
-      "perspective": "パースペクティブ"
-    },
     "clearRecording": "録画をクリア",
     "edgeThreshold": "エッジ閾値",
     "export": "エクスポート",
@@ -594,7 +593,6 @@
       "wireframe": "ワイヤーフレーム"
     },
     "model": "モデル",
-    "openIn3DViewer": "3Dビューアで開く",
     "previewOutput": "出力のプレビュー",
     "removeBackgroundImage": "背景画像を削除",
     "resizeNodeMatchOutput": "ノードを出力に合わせてリサイズ",
@@ -605,22 +603,8 @@
     "switchCamera": "カメラを切り替える",
     "switchingMaterialMode": "マテリアルモードの切り替え中...",
     "upDirection": "上方向",
-    "upDirections": {
-      "original": "オリジナル"
-    },
     "uploadBackgroundImage": "背景画像をアップロード",
-    "uploadTexture": "テクスチャをアップロード",
-    "viewer": {
-      "apply": "適用",
-      "cameraSettings": "カメラ設定",
-      "cameraType": "カメラタイプ",
-      "cancel": "キャンセル",
-      "exportSettings": "エクスポート設定",
-      "lightSettings": "ライト設定",
-      "modelSettings": "モデル設定",
-      "sceneSettings": "シーン設定",
-      "title": "3Dビューア（ベータ）"
-    }
+    "uploadTexture": "テクスチャをアップロード"
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "ComfyUI {version} が必要です：",
@@ -667,6 +651,9 @@
     "installationQueue": "インストールキュー",
     "lastUpdated": "最終更新日",
     "latestVersion": "最新",
+    "legacyManagerUI": "レガシーUIを使用する",
+    "legacyManagerUIDescription": "レガシーManager UIを使用するには、--enable-manager-legacy-uiを付けてComfyUIを起動してください",
+    "legacyMenuNotAvailable": "このバージョンのComfyUIでは、レガシーマネージャーメニューは利用できません。新しいマネージャーメニューを使用してください。",
     "license": "ライセンス",
     "loadingVersions": "バージョンを読み込んでいます...",
     "nightlyVersion": "ナイトリー",
@@ -749,7 +736,6 @@
     "manageExtensions": "拡張機能の管理",
     "onChange": "変更時",
     "onChangeTooltip": "変更が行われるとワークフローがキューに追加されます",
-    "queue": "キューパネル",
     "refresh": "ノードを更新",
     "resetView": "ビューをリセット",
     "run": "実行する",
@@ -765,8 +751,10 @@
     "Bottom Panel": "下部パネル",
     "Browse Templates": "テンプレートを参照",
     "Bypass/Unbypass Selected Nodes": "選択したノードのバイパス/バイパス解除",
-    "Canvas Performance": "キャンバスパフォーマンス",
+    "Canvas Toggle Link Visibility": "キャンバスのリンク表示を切り替え",
     "Canvas Toggle Lock": "キャンバスのロックを切り替え",
+    "Canvas Toggle Minimap": "キャンバス ミニマップの切り替え",
+    "Check for Custom Node Updates": "カスタムノードのアップデートを確認",
     "Check for Updates": "更新を確認する",
     "Clear Pending Tasks": "保留中のタスクをクリア",
     "Clear Workflow": "ワークフローをクリア",
@@ -780,28 +768,27 @@
     "Contact Support": "サポートに連絡",
     "Convert Selection to Subgraph": "選択範囲をサブグラフに変換",
     "Convert selected nodes to group node": "選択したノードをグループノードに変換",
+    "Custom Nodes (Legacy)": "カスタムノード（レガシー）",
+    "Custom Nodes Manager": "カスタムノードマネージャ",
     "Decrease Brush Size in MaskEditor": "マスクエディタでブラシサイズを小さくする",
     "Delete Selected Items": "選択したアイテムを削除",
     "Desktop User Guide": "デスクトップユーザーガイド",
     "Duplicate Current Workflow": "現在のワークフローを複製",
     "Edit": "編集",
-    "Exit Subgraph": "サブグラフを終了",
     "Export": "エクスポート",
     "Export (API)": "エクスポート (API)",
-    "File": "ファイル",
     "Fit Group To Contents": "グループを内容に合わせる",
-    "Focus Mode": "フォーカスモード",
+    "Fit view to selected nodes": "選択したノードにビューを合わせる",
     "Give Feedback": "フィードバックを送る",
     "Group Selected Nodes": "選択したノードをグループ化",
     "Help": "ヘルプ",
-    "Help Center": "ヘルプセンター",
     "Increase Brush Size in MaskEditor": "マスクエディタでブラシサイズを大きくする",
+    "Install Missing Custom Nodes": "不足しているカスタムノードをインストール",
     "Interrupt": "中断",
     "Load Default Workflow": "デフォルトワークフローを読み込む",
     "Manage group nodes": "グループノードを管理",
     "Manager": "マネージャー",
-    "Minimap": "ミニマップ",
-    "Model Library": "モデルライブラリ",
+    "Manager Menu (Legacy)": "マネージャーメニュー（レガシー）",
     "Move Selected Nodes Down": "選択したノードを下へ移動",
     "Move Selected Nodes Left": "選択したノードを左へ移動",
     "Move Selected Nodes Right": "選択したノードを右へ移動",
@@ -809,10 +796,7 @@
     "Mute/Unmute Selected Nodes": "選択したノードのミュート/ミュート解除",
     "New": "新規",
     "Next Opened Workflow": "次に開いたワークフロー",
-    "Node Library": "ノードライブラリ",
-    "Node Links": "ノードリンク",
     "Open": "開く",
-    "Open 3D Viewer (Beta) for Selected Node": "選択したノードの3Dビューアー（ベータ）を開く",
     "Open Custom Nodes Folder": "カスタムノードフォルダを開く",
     "Open DevTools": "DevToolsを開く",
     "Open Inputs Folder": "入力フォルダを開く",
@@ -825,7 +809,6 @@
     "Pin/Unpin Selected Items": "選択したアイテムのピン留め/ピン留め解除",
     "Pin/Unpin Selected Nodes": "選択したノードのピン留め/ピン留め解除",
     "Previous Opened Workflow": "前に開いたワークフロー",
-    "Queue Panel": "キューパネル",
     "Queue Prompt": "キューのプロンプト",
     "Queue Prompt (Front)": "キューのプロンプト (前面)",
     "Queue Selected Output Nodes": "選択した出力ノードをキューに追加",
@@ -847,23 +830,15 @@
     "Toggle Search Box": "検索ボックスの切り替え",
     "Toggle Terminal Bottom Panel": "ターミナル下部パネルの切り替え",
     "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
-    "Toggle View Controls Bottom Panel": "ビューコントロール下部パネルの切り替え",
-    "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",
+    "Toggle Workflows Sidebar": "ワークフローサイドバーを切り替え",
     "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
-    "Unpack the selected Subgraph": "選択したサブグラフを展開",
-    "Workflows": "ワークフロー",
+    "Unload Models": "モデルのアンロード",
+    "Unload Models and Execution Cache": "モデルと実行キャッシュのアンロード",
+    "Workflow": "ワークフロー",
     "Zoom In": "ズームイン",
-    "Zoom Out": "ズームアウト",
-    "Zoom to fit": "全体表示にズーム"
-  },
-  "minimap": {
-    "nodeColors": "ノードの色",
-    "renderBypassState": "バイパス状態を表示",
-    "renderErrorState": "エラー状態を表示",
-    "showGroups": "フレーム／グループを表示",
-    "showLinks": "リンクを表示"
+    "Zoom Out": "ズームアウト"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "再度表示しない",
@@ -1131,7 +1106,6 @@
   },
   "settingsCategories": {
     "3D": "3D",
-    "3DViewer": "3Dビューア",
     "API Nodes": "APIノード",
     "About": "情報",
     "Appearance": "外観",
@@ -1183,31 +1157,10 @@
     "Window": "ウィンドウ",
     "Workflow": "ワークフロー"
   },
-  "shortcuts": {
-    "essentials": "基本",
-    "keyboardShortcuts": "キーボードショートカット",
-    "manageShortcuts": "ショートカットの管理",
-    "noKeybinding": "キー割り当てなし",
-    "subcategories": {
-      "node": "ノード",
-      "panelControls": "パネルコントロール",
-      "queue": "キュー",
-      "view": "ビュー",
-      "workflow": "ワークフロー"
-    },
-    "viewControls": "表示コントロール"
-  },
   "sideToolbar": {
     "browseTemplates": "サンプルテンプレートを表示",
     "downloads": "ダウンロード",
     "helpCenter": "ヘルプセンター",
-    "labels": {
-      "models": "モデル",
-      "nodes": "ノード",
-      "queue": "キュー",
-      "templates": "テンプレート",
-      "workflows": "ワークフロー"
-    },
     "logout": "ログアウト",
     "modelLibrary": "モデルライブラリ",
     "newBlankWorkflow": "新しい空のワークフローを作成",
@@ -1245,7 +1198,6 @@
       },
       "showFlatList": "フラットリストを表示"
     },
-    "templates": "テンプレート",
     "workflowTab": {
       "confirmDelete": "このワークフローを削除してもよろしいですか？",
       "confirmDeleteTitle": "ワークフローを削除しますか？",
@@ -1292,8 +1244,6 @@
       "Video": "ビデオ",
       "Video API": "動画API"
     },
-    "loadingMore": "さらにテンプレートを読み込み中...",
-    "searchPlaceholder": "テンプレートを検索...",
     "template": {
       "3D": {
         "3d_hunyuan3d_image_to_model": "Hunyuan3D",
@@ -1616,7 +1566,6 @@
     "failedToExportModel": "{format}としてモデルのエクスポートに失敗しました",
     "failedToFetchBalance": "残高の取得に失敗しました: {error}",
     "failedToFetchLogs": "サーバーログの取得に失敗しました",
-    "failedToInitializeLoad3dViewer": "3Dビューアの初期化に失敗しました",
     "failedToInitiateCreditPurchase": "クレジット購入の開始に失敗しました: {error}",
     "failedToPurchaseCredits": "クレジットの購入に失敗しました: {error}",
     "fileLoadError": "{fileName}でワークフローが見つかりません",

src/locales/ko/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "기본 워크플로 로드"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "사용자 정의 노드 관리자"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "사용자 정의 노드 (베타)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "커스텀 노드 (레거시)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "매니저 메뉴 (레거시)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "누락된 팩 설치"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "업데이트 확인"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "진행 상황 대화 상자 전환"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "선택한 노드 마스크 편집기 열기"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "모델 언로드"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "모델 및 실행 캐시 언로드"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "새로운 빈 워크플로"
   },

src/locales/ko/main.json

@@ -272,11 +272,13 @@
     "category": "카테고리",
     "choose_file_to_upload": "업로드할 파일 선택",
     "clear": "지우기",
+    "clearAll": "모두 지우기",
     "clearFilters": "필터 지우기",
     "close": "닫기",
     "color": "색상",
     "comingSoon": "곧 출시 예정",
     "command": "명령",
+    "commandProhibited": "명령 {command}은 금지되었습니다. 자세한 정보는 관리자에게 문의하십시오.",
     "community": "커뮤니티",
     "completed": "완료됨",
     "confirm": "확인",
@@ -299,7 +301,6 @@
     "disabling": "비활성화 중",
     "dismiss": "닫기",
     "download": "다운로드",
-    "duplicate": "복제",
     "edit": "편집",
     "empty": "비어 있음",
     "enableAll": "모두 활성화",
@@ -327,6 +328,8 @@
     "installed": "설치됨",
     "installing": "설치 중",
     "interrupted": "중단됨",
+    "itemSelected": "{selectedCount}개 선택됨",
+    "itemsSelected": "{selectedCount}개 선택됨",
     "keybinding": "키 바인딩",
     "keybindingAlreadyExists": "단축키가 이미 존재합니다",
     "learnMore": "더 알아보기",
@@ -570,10 +573,6 @@
     "applyingTexture": "텍스처 적용 중...",
     "backgroundColor": "배경색",
     "camera": "카메라",
-    "cameraType": {
-      "orthographic": "직교",
-      "perspective": "원근"
-    },
     "clearRecording": "녹화 지우기",
     "edgeThreshold": "엣지 임계값",
     "export": "내보내기",
@@ -594,7 +593,6 @@
       "wireframe": "와이어프레임"
     },
     "model": "모델",
-    "openIn3DViewer": "3D 뷰어에서 열기",
     "previewOutput": "출력 미리보기",
     "removeBackgroundImage": "배경 이미지 제거",
     "resizeNodeMatchOutput": "노드 크기를 출력에 맞추기",
@@ -605,22 +603,8 @@
     "switchCamera": "카메라 전환",
     "switchingMaterialMode": "재질 모드 전환 중...",
     "upDirection": "위 방향",
-    "upDirections": {
-      "original": "원본"
-    },
     "uploadBackgroundImage": "배경 이미지 업로드",
-    "uploadTexture": "텍스처 업로드",
-    "viewer": {
-      "apply": "적용",
-      "cameraSettings": "카메라 설정",
-      "cameraType": "카메라 유형",
-      "cancel": "취소",
-      "exportSettings": "내보내기 설정",
-      "lightSettings": "조명 설정",
-      "modelSettings": "모델 설정",
-      "sceneSettings": "씬 설정",
-      "title": "3D 뷰어 (베타)"
-    }
+    "uploadTexture": "텍스처 업로드"
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "ComfyUI {version} 이상 필요:",
@@ -667,6 +651,9 @@
     "installationQueue": "설치 대기열",
     "lastUpdated": "마지막 업데이트",
     "latestVersion": "최신",
+    "legacyManagerUI": "레거시 UI 사용",
+    "legacyManagerUIDescription": "레거시 매니저 UI를 사용하려면, ComfyUI를 --enable-manager-legacy-ui로 시작하세요",
+    "legacyMenuNotAvailable": "이 버전의 ComfyUI에서는 레거시 매니저 메뉴를 사용할 수 없습니다. 대신 새로운 매니저 메뉴를 사용하십시오.",
     "license": "라이선스",
     "loadingVersions": "버전 로딩 중...",
     "nightlyVersion": "최신 테스트 버전(nightly)",
@@ -749,7 +736,6 @@
     "manageExtensions": "확장 프로그램 관리",
     "onChange": "변경 시",
     "onChangeTooltip": "변경이 있는 경우에만 워크플로를 실행 대기열에 추가합니다.",
-    "queue": "대기열 패널",
     "refresh": "노드 정의 새로 고침",
     "resetView": "캔버스 보기 재설정",
     "run": "실행",
@@ -765,8 +751,10 @@
     "Bottom Panel": "하단 패널",
     "Browse Templates": "템플릿 탐색",
     "Bypass/Unbypass Selected Nodes": "선택한 노드 우회/우회 해제",
-    "Canvas Performance": "캔버스 성능",
+    "Canvas Toggle Link Visibility": "캔버스 토글 링크 가시성",
     "Canvas Toggle Lock": "캔버스 토글 잠금",
+    "Canvas Toggle Minimap": "캔버스 미니맵 전환",
+    "Check for Custom Node Updates": "커스텀 노드 업데이트 확인",
     "Check for Updates": "업데이트 확인",
     "Clear Pending Tasks": "보류 중인 작업 제거하기",
     "Clear Workflow": "워크플로 지우기",
@@ -780,28 +768,27 @@
     "Contact Support": "고객 지원 문의",
     "Convert Selection to Subgraph": "선택 영역을 서브그래프로 변환",
     "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
+    "Custom Nodes (Legacy)": "커스텀 노드(레거시)",
+    "Custom Nodes Manager": "사용자 정의 노드 관리자",
     "Decrease Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 줄이기",
     "Delete Selected Items": "선택한 항목 삭제",
     "Desktop User Guide": "데스크톱 사용자 가이드",
     "Duplicate Current Workflow": "현재 워크플로 복제",
     "Edit": "편집",
-    "Exit Subgraph": "서브그래프 종료",
     "Export": "내보내기",
     "Export (API)": "내보내기 (API)",
-    "File": "파일",
     "Fit Group To Contents": "그룹을 내용에 맞게 조정",
-    "Focus Mode": "포커스 모드",
+    "Fit view to selected nodes": "선택한 노드에 맞게 보기 조정",
     "Give Feedback": "피드백 제공",
     "Group Selected Nodes": "선택한 노드 그룹화",
     "Help": "도움말",
-    "Help Center": "도움말 센터",
     "Increase Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 늘리기",
+    "Install Missing Custom Nodes": "누락된 커스텀 노드 설치",
     "Interrupt": "중단",
     "Load Default Workflow": "기본 워크플로 불러오기",
     "Manage group nodes": "그룹 노드 관리",
     "Manager": "매니저",
-    "Minimap": "미니맵",
-    "Model Library": "모델 라이브러리",
+    "Manager Menu (Legacy)": "매니저 메뉴(레거시)",
     "Move Selected Nodes Down": "선택한 노드 아래로 이동",
     "Move Selected Nodes Left": "선택한 노드 왼쪽으로 이동",
     "Move Selected Nodes Right": "선택한 노드 오른쪽으로 이동",
@@ -809,10 +796,7 @@
     "Mute/Unmute Selected Nodes": "선택한 노드 활성화/비활성화",
     "New": "새로 만들기",
     "Next Opened Workflow": "다음 열린 워크플로",
-    "Node Library": "노드 라이브러리",
-    "Node Links": "노드 링크",
     "Open": "열기",
-    "Open 3D Viewer (Beta) for Selected Node": "선택한 노드에 대해 3D 뷰어(베타) 열기",
     "Open Custom Nodes Folder": "사용자 정의 노드 폴더 열기",
     "Open DevTools": "개발자 도구 열기",
     "Open Inputs Folder": "입력 폴더 열기",
@@ -825,7 +809,6 @@
     "Pin/Unpin Selected Items": "선택한 항목 고정/고정 해제",
     "Pin/Unpin Selected Nodes": "선택한 노드 고정/고정 해제",
     "Previous Opened Workflow": "이전 열린 워크플로",
-    "Queue Panel": "대기열 패널",
     "Queue Prompt": "실행 대기열에 프롬프트 추가",
     "Queue Prompt (Front)": "실행 대기열 맨 앞에 프롬프트 추가",
     "Queue Selected Output Nodes": "선택한 출력 노드 대기열에 추가",
@@ -842,28 +825,24 @@
     "Show Model Selector (Dev)": "모델 선택기 표시 (개발자용)",
     "Show Settings Dialog": "설정 대화상자 표시",
     "Sign Out": "로그아웃",
-    "Toggle Essential Bottom Panel": "필수 하단 패널 전환",
+    "Toggle Bottom Panel": "하단 패널 전환",
+    "Toggle Focus Mode": "포커스 모드 전환",
     "Toggle Logs Bottom Panel": "로그 하단 패널 전환",
+    "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
+    "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
+    "Toggle Queue Sidebar": "실행 대기열 사이드바 전환",
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
-    "Toggle View Controls Bottom Panel": "뷰 컨트롤 하단 패널 전환",
-    "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
+    "Toggle Workflows Sidebar": "워크플로우 사이드바 전환",
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
-    "Unpack the selected Subgraph": "선택한 서브그래프 풀기",
-    "Workflows": "워크플로우",
+    "Unload Models": "모델 언로드",
+    "Unload Models and Execution Cache": "모델 및 실행 캐시 언로드",
+    "Workflow": "워크플로",
     "Zoom In": "확대",
-    "Zoom Out": "축소",
-    "Zoom to fit": "화면에 맞추기"
-  },
-  "minimap": {
-    "nodeColors": "노드 색상",
-    "renderBypassState": "바이패스 상태 렌더링",
-    "renderErrorState": "에러 상태 렌더링",
-    "showGroups": "프레임/그룹 표시",
-    "showLinks": "링크 표시"
+    "Zoom Out": "축소"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "다시 보지 않기",
@@ -1131,7 +1110,6 @@
   },
   "settingsCategories": {
     "3D": "3D",
-    "3DViewer": "3D뷰어",
     "API Nodes": "API 노드",
     "About": "정보",
     "Appearance": "모양",
@@ -1183,31 +1161,10 @@
     "Window": "창",
     "Workflow": "워크플로"
   },
-  "shortcuts": {
-    "essentials": "필수",
-    "keyboardShortcuts": "키보드 단축키",
-    "manageShortcuts": "단축키 관리",
-    "noKeybinding": "단축키 없음",
-    "subcategories": {
-      "node": "노드",
-      "panelControls": "패널 컨트롤",
-      "queue": "대기열",
-      "view": "보기",
-      "workflow": "워크플로우"
-    },
-    "viewControls": "보기 컨트롤"
-  },
   "sideToolbar": {
     "browseTemplates": "예제 템플릿 탐색",
     "downloads": "다운로드",
     "helpCenter": "도움말 센터",
-    "labels": {
-      "models": "모델",
-      "nodes": "노드",
-      "queue": "대기열",
-      "templates": "템플릿",
-      "workflows": "워크플로우"
-    },
     "logout": "로그아웃",
     "modelLibrary": "모델 라이브러리",
     "newBlankWorkflow": "새 빈 워크플로 만들기",
@@ -1245,7 +1202,6 @@
       },
       "showFlatList": "평면 목록 표시"
     },
-    "templates": "템플릿",
     "workflowTab": {
       "confirmDelete": "정말로 이 워크플로를 삭제하시겠습니까?",
       "confirmDeleteTitle": "워크플로 삭제",
@@ -1292,8 +1248,6 @@
       "Video": "비디오",
       "Video API": "비디오 API"
     },
-    "loadingMore": "템플릿을 더 불러오는 중...",
-    "searchPlaceholder": "템플릿 검색...",
     "template": {
       "3D": {
         "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
@@ -1616,7 +1570,6 @@
     "failedToExportModel": "{format} 형식으로 모델 내보내기에 실패했습니다",
     "failedToFetchBalance": "잔액을 가져오지 못했습니다: {error}",
     "failedToFetchLogs": "서버 로그를 가져오는 데 실패했습니다",
-    "failedToInitializeLoad3dViewer": "3D 뷰어 초기화에 실패했습니다",
     "failedToInitiateCreditPurchase": "크레딧 구매를 시작하지 못했습니다: {error}",
     "failedToPurchaseCredits": "크레딧 구매에 실패했습니다: {error}",
     "fileLoadError": "{fileName}에서 워크플로를 찾을 수 없습니다",

src/locales/ru/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Загрузить стандартный рабочий процесс"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Менеджер Пользовательских Узлов"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Пользовательские узлы (Бета)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Пользовательские узлы (устаревшие)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Меню менеджера (устаревшее)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Установить отсутствующие"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Проверить наличие обновлений"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Переключить диалоговое окно прогресса"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Открыть редактор масок для выбранной ноды"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Выгрузить модели"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Выгрузить модели и кэш выполнения"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Новый пустой рабочий процесс"
   },

src/locales/ru/main.json

@@ -272,11 +272,13 @@
     "category": "Категория",
     "choose_file_to_upload": "выберите файл для загрузки",
     "clear": "Очистить",
+    "clearAll": "Очистить всё",
     "clearFilters": "Сбросить фильтры",
     "close": "Закрыть",
     "color": "Цвет",
     "comingSoon": "Скоро будет",
     "command": "Команда",
+    "commandProhibited": "Команда {command} запрещена. Свяжитесь с администратором для получения дополнительной информации.",
     "community": "Сообщество",
     "completed": "Завершено",
     "confirm": "Подтвердить",
@@ -299,7 +301,6 @@
     "disabling": "Отключение",
     "dismiss": "Закрыть",
     "download": "Скачать",
-    "duplicate": "Дублировать",
     "edit": "Редактировать",
     "empty": "Пусто",
     "enableAll": "Включить все",
@@ -327,6 +328,8 @@
     "installed": "Установлено",
     "installing": "Установка",
     "interrupted": "Прервано",
+    "itemSelected": "Выбран {selectedCount} элемент",
+    "itemsSelected": "Выбрано {selectedCount} элементов",
     "keybinding": "Привязка клавиш",
     "keybindingAlreadyExists": "Горячая клавиша уже существует",
     "learnMore": "Узнать больше",
@@ -570,10 +573,6 @@
     "applyingTexture": "Применение текстуры...",
     "backgroundColor": "Цвет фона",
     "camera": "Камера",
-    "cameraType": {
-      "orthographic": "Ортографическая",
-      "perspective": "Перспективная"
-    },
     "clearRecording": "Очистить запись",
     "edgeThreshold": "Пороговое значение края",
     "export": "Экспорт",
@@ -594,7 +593,6 @@
       "wireframe": "Каркас"
     },
     "model": "Модель",
-    "openIn3DViewer": "Открыть в 3D просмотрщике",
     "previewOutput": "Предварительный просмотр",
     "removeBackgroundImage": "Удалить фоновое изображение",
     "resizeNodeMatchOutput": "Изменить размер узла под вывод",
@@ -605,22 +603,8 @@
     "switchCamera": "Переключить камеру",
     "switchingMaterialMode": "Переключение режима материала...",
     "upDirection": "Направление Вверх",
-    "upDirections": {
-      "original": "Оригинал"
-    },
     "uploadBackgroundImage": "Загрузить фоновое изображение",
-    "uploadTexture": "Загрузить текстуру",
-    "viewer": {
-      "apply": "Применить",
-      "cameraSettings": "Настройки камеры",
-      "cameraType": "Тип камеры",
-      "cancel": "Отмена",
-      "exportSettings": "Настройки экспорта",
-      "lightSettings": "Настройки освещения",
-      "modelSettings": "Настройки модели",
-      "sceneSettings": "Настройки сцены",
-      "title": "3D Просмотрщик (Бета)"
-    }
+    "uploadTexture": "Загрузить текстуру"
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "Требуется ComfyUI {version}:",
@@ -667,6 +651,9 @@
     "installationQueue": "Очередь установки",
     "lastUpdated": "Последнее обновление",
     "latestVersion": "Последняя",
+    "legacyManagerUI": "Использовать устаревший UI",
+    "legacyManagerUIDescription": "Чтобы использовать устаревший UI менеджера, запустите ComfyUI с --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "Устаревшее меню менеджера недоступно в этой версии ComfyUI. Пожалуйста, используйте новое меню менеджера.",
     "license": "Лицензия",
     "loadingVersions": "Загрузка версий...",
     "nightlyVersion": "Ночная",
@@ -749,7 +736,6 @@
     "manageExtensions": "Управление расширениями",
     "onChange": "При изменении",
     "onChangeTooltip": "Рабочий процесс будет поставлен в очередь после внесения изменений",
-    "queue": "Панель очереди",
     "refresh": "Обновить определения нод",
     "resetView": "Сбросить вид холста",
     "run": "Запустить",
@@ -765,8 +751,10 @@
     "Bottom Panel": "Нижняя панель",
     "Browse Templates": "Просмотреть шаблоны",
     "Bypass/Unbypass Selected Nodes": "Обойти/восстановить выбранные ноды",
-    "Canvas Performance": "Производительность холста",
+    "Canvas Toggle Link Visibility": "Переключение видимости ссылки на холст",
     "Canvas Toggle Lock": "Переключение блокировки холста",
+    "Canvas Toggle Minimap": "Показать/скрыть миникарту на холсте",
+    "Check for Custom Node Updates": "Проверить обновления пользовательских узлов",
     "Check for Updates": "Проверить наличие обновлений",
     "Clear Pending Tasks": "Очистить ожидающие задачи",
     "Clear Workflow": "Очистить рабочий процесс",
@@ -780,28 +768,27 @@
     "Contact Support": "Связаться с поддержкой",
     "Convert Selection to Subgraph": "Преобразовать выделенное в подграф",
     "Convert selected nodes to group node": "Преобразовать выбранные ноды в групповую ноду",
+    "Custom Nodes (Legacy)": "Пользовательские узлы (устаревшие)",
+    "Custom Nodes Manager": "Менеджер Пользовательских Узлов",
     "Decrease Brush Size in MaskEditor": "Уменьшить размер кисти в MaskEditor",
     "Delete Selected Items": "Удалить выбранные элементы",
     "Desktop User Guide": "Руководство пользователя для настольных ПК",
     "Duplicate Current Workflow": "Дублировать текущий рабочий процесс",
     "Edit": "Редактировать",
-    "Exit Subgraph": "Выйти из подграфа",
     "Export": "Экспортировать",
     "Export (API)": "Экспорт (API)",
-    "File": "Файл",
     "Fit Group To Contents": "Подогнать группу под содержимое",
-    "Focus Mode": "Режим фокуса",
+    "Fit view to selected nodes": "Подогнать вид под выбранные ноды",
     "Give Feedback": "Оставить отзыв",
     "Group Selected Nodes": "Сгруппировать выбранные ноды",
     "Help": "Помощь",
-    "Help Center": "Центр поддержки",
     "Increase Brush Size in MaskEditor": "Увеличить размер кисти в MaskEditor",
+    "Install Missing Custom Nodes": "Установить отсутствующие пользовательские узлы",
     "Interrupt": "Прервать",
     "Load Default Workflow": "Загрузить стандартный рабочий процесс",
     "Manage group nodes": "Управление групповыми нодами",
     "Manager": "Менеджер",
-    "Minimap": "Мини-карта",
-    "Model Library": "Библиотека моделей",
+    "Manager Menu (Legacy)": "Меню управления (устаревшее)",
     "Move Selected Nodes Down": "Переместить выбранные узлы вниз",
     "Move Selected Nodes Left": "Переместить выбранные узлы влево",
     "Move Selected Nodes Right": "Переместить выбранные узлы вправо",
@@ -809,10 +796,7 @@
     "Mute/Unmute Selected Nodes": "Отключить/включить звук для выбранных нод",
     "New": "Новый",
     "Next Opened Workflow": "Следующий открытый рабочий процесс",
-    "Node Library": "Библиотека узлов",
-    "Node Links": "Связи узлов",
     "Open": "Открыть",
-    "Open 3D Viewer (Beta) for Selected Node": "Открыть 3D-просмотрщик (бета) для выбранного узла",
     "Open Custom Nodes Folder": "Открыть папку пользовательских нод",
     "Open DevTools": "Открыть инструменты разработчика",
     "Open Inputs Folder": "Открыть папку входных данных",
@@ -825,7 +809,6 @@
     "Pin/Unpin Selected Items": "Закрепить/открепить выбранные элементы",
     "Pin/Unpin Selected Nodes": "Закрепить/открепить выбранные ноды",
     "Previous Opened Workflow": "Предыдущий открытый рабочий процесс",
-    "Queue Panel": "Панель очереди",
     "Queue Prompt": "Запрос в очереди",
     "Queue Prompt (Front)": "Запрос в очереди (спереди)",
     "Queue Selected Output Nodes": "Добавить выбранные выходные узлы в очередь",
@@ -852,18 +835,11 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
-    "Unpack the selected Subgraph": "Распаковать выбранный подграф",
-    "Workflows": "Рабочие процессы",
+    "Unload Models": "Выгрузить модели",
+    "Unload Models and Execution Cache": "Выгрузить модели и кэш выполнения",
+    "Workflow": "Рабочий процесс",
     "Zoom In": "Увеличить",
-    "Zoom Out": "Уменьшить",
-    "Zoom to fit": "Масштабировать по размеру"
-  },
-  "minimap": {
-    "nodeColors": "Цвета узлов",
-    "renderBypassState": "Отображать состояние обхода",
-    "renderErrorState": "Отображать состояние ошибки",
-    "showGroups": "Показать фреймы/группы",
-    "showLinks": "Показать связи"
+    "Zoom Out": "Уменьшить"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "Больше не показывать это",
@@ -1131,7 +1107,6 @@
   },
   "settingsCategories": {
     "3D": "3D",
-    "3DViewer": "3D-просмотрщик",
     "API Nodes": "API-узлы",
     "About": "О программе",
     "Appearance": "Внешний вид",
@@ -1183,31 +1158,10 @@
     "Window": "Окно",
     "Workflow": "Рабочий процесс"
   },
-  "shortcuts": {
-    "essentials": "Основные",
-    "keyboardShortcuts": "Горячие клавиши",
-    "manageShortcuts": "Управление горячими клавишами",
-    "noKeybinding": "Нет сочетания клавиш",
-    "subcategories": {
-      "node": "Узел",
-      "panelControls": "Управление панелью",
-      "queue": "Очередь",
-      "view": "Просмотр",
-      "workflow": "Рабочий процесс"
-    },
-    "viewControls": "Управление просмотром"
-  },
   "sideToolbar": {
     "browseTemplates": "Просмотреть примеры шаблонов",
     "downloads": "Загрузки",
     "helpCenter": "Центр поддержки",
-    "labels": {
-      "models": "Модели",
-      "nodes": "Узлы",
-      "queue": "Очередь",
-      "templates": "Шаблоны",
-      "workflows": "Воркфлоу"
-    },
     "logout": "Выйти",
     "modelLibrary": "Библиотека моделей",
     "newBlankWorkflow": "Создайте новый пустой рабочий процесс",
@@ -1245,7 +1199,6 @@
       },
       "showFlatList": "Показать плоский список"
     },
-    "templates": "Шаблоны",
     "workflowTab": {
       "confirmDelete": "Вы уверены, что хотите удалить этот рабочий процесс?",
       "confirmDeleteTitle": "Удалить рабочий процесс?",
@@ -1292,8 +1245,6 @@
       "Video": "Видео",
       "Video API": "Video API"
     },
-    "loadingMore": "Загрузка дополнительных шаблонов...",
-    "searchPlaceholder": "Поиск шаблонов...",
     "template": {
       "3D": {
         "3d_hunyuan3d_image_to_model": "Hunyuan3D",
@@ -1616,7 +1567,6 @@
     "failedToExportModel": "Не удалось экспортировать модель как {format}",
     "failedToFetchBalance": "Не удалось получить баланс: {error}",
     "failedToFetchLogs": "Не удалось получить серверные логи",
-    "failedToInitializeLoad3dViewer": "Не удалось инициализировать 3D просмотрщик",
     "failedToInitiateCreditPurchase": "Не удалось начать покупку кредитов: {error}",
     "failedToPurchaseCredits": "Не удалось купить кредиты: {error}",
     "fileLoadError": "Не удалось найти рабочий процесс в {fileName}",

src/locales/zh-TW/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "載入預設工作流程"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "切換自訂節點管理器"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "自訂節點管理器"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "自訂節點（舊版）"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "管理選單（舊版）"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "安裝缺少的自訂節點"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "檢查自訂節點更新"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "切換自訂節點管理器進度條"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "為選取的節點開啟 Mask 編輯器"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "卸載模型"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "卸載模型與執行快取"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新增空白工作流程"
   },

src/locales/zh-TW/main.json

@@ -272,11 +272,13 @@
     "category": "分類",
     "choose_file_to_upload": "選擇要上傳的檔案",
     "clear": "清除",
+    "clearAll": "全部清除",
     "clearFilters": "清除篩選",
     "close": "關閉",
     "color": "顏色",
     "comingSoon": "即將推出",
     "command": "指令",
+    "commandProhibited": "指令 {command} 已被禁止。如需更多資訊，請聯絡管理員。",
     "community": "社群",
     "completed": "已完成",
     "confirm": "確認",
@@ -299,7 +301,6 @@
     "disabling": "停用中",
     "dismiss": "關閉",
     "download": "下載",
-    "duplicate": "複製",
     "edit": "編輯",
     "empty": "空",
     "enableAll": "全部啟用",
@@ -327,6 +328,8 @@
     "installed": "已安裝",
     "installing": "安裝中",
     "interrupted": "已中斷",
+    "itemSelected": "已選取 {selectedCount} 項",
+    "itemsSelected": "已選取 {selectedCount} 項",
     "keybinding": "快捷鍵",
     "keybindingAlreadyExists": "快捷鍵已存在於",
     "learnMore": "了解更多",
@@ -570,10 +573,6 @@
     "applyingTexture": "正在套用材質貼圖...",
     "backgroundColor": "背景顏色",
     "camera": "相機",
-    "cameraType": {
-      "orthographic": "正交",
-      "perspective": "透視"
-    },
     "clearRecording": "清除錄影",
     "edgeThreshold": "邊緣閾值",
     "export": "匯出",
@@ -594,7 +593,6 @@
       "wireframe": "線框"
     },
     "model": "模型",
-    "openIn3DViewer": "在 3D 檢視器中開啟",
     "previewOutput": "預覽輸出",
     "removeBackgroundImage": "移除背景圖片",
     "resizeNodeMatchOutput": "調整節點以符合輸出",
@@ -605,22 +603,8 @@
     "switchCamera": "切換相機",
     "switchingMaterialMode": "正在切換材質模式...",
     "upDirection": "上方方向",
-    "upDirections": {
-      "original": "原始"
-    },
     "uploadBackgroundImage": "上傳背景圖片",
-    "uploadTexture": "上傳材質貼圖",
-    "viewer": {
-      "apply": "套用",
-      "cameraSettings": "相機設定",
-      "cameraType": "相機類型",
-      "cancel": "取消",
-      "exportSettings": "匯出設定",
-      "lightSettings": "燈光設定",
-      "modelSettings": "模型設定",
-      "sceneSettings": "場景設定",
-      "title": "3D 檢視器（測試版）"
-    }
+    "uploadTexture": "上傳材質貼圖"
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "需要 ComfyUI {version}：",
@@ -667,6 +651,9 @@
     "installationQueue": "安裝佇列",
     "lastUpdated": "最後更新",
     "latestVersion": "最新版本",
+    "legacyManagerUI": "使用舊版介面",
+    "legacyManagerUIDescription": "若要使用舊版管理介面，請以 --enable-manager-legacy-ui 啟動 ComfyUI",
+    "legacyMenuNotAvailable": "舊版管理選單不可用，已預設切換至新版管理選單。",
     "license": "授權條款",
     "loadingVersions": "正在載入版本...",
     "nightlyVersion": "每夜建置版",
@@ -749,7 +736,6 @@
     "manageExtensions": "管理擴充功能",
     "onChange": "變更時",
     "onChangeTooltip": "每當有變更時，工作流程會排入佇列",
-    "queue": "佇列面板",
     "refresh": "重新整理節點定義",
     "resetView": "重設畫布視圖",
     "run": "執行",
@@ -765,8 +751,10 @@
     "Bottom Panel": "底部面板",
     "Browse Templates": "瀏覽範本",
     "Bypass/Unbypass Selected Nodes": "繞過/取消繞過選取節點",
-    "Canvas Performance": "畫布效能",
+    "Canvas Toggle Link Visibility": "切換連結可見性",
     "Canvas Toggle Lock": "切換畫布鎖定",
+    "Canvas Toggle Minimap": "畫布切換小地圖",
+    "Check for Custom Node Updates": "檢查自訂節點更新",
     "Check for Updates": "檢查更新",
     "Clear Pending Tasks": "清除待處理任務",
     "Clear Workflow": "清除工作流程",
@@ -780,28 +768,27 @@
     "Contact Support": "聯絡支援",
     "Convert Selection to Subgraph": "將選取內容轉為子圖",
     "Convert selected nodes to group node": "將選取節點轉為群組節點",
+    "Custom Nodes (Legacy)": "自訂節點（舊版）",
+    "Custom Nodes Manager": "自訂節點管理員",
     "Decrease Brush Size in MaskEditor": "在 MaskEditor 中減小筆刷大小",
     "Delete Selected Items": "刪除選取項目",
     "Desktop User Guide": "桌面應用程式使用指南",
     "Duplicate Current Workflow": "複製目前工作流程",
     "Edit": "編輯",
-    "Exit Subgraph": "離開子圖",
     "Export": "匯出",
     "Export (API)": "匯出（API）",
-    "File": "檔案",
     "Fit Group To Contents": "群組貼合內容",
-    "Focus Mode": "專注模式",
+    "Fit view to selected nodes": "視圖貼合選取節點",
     "Give Feedback": "提供意見回饋",
     "Group Selected Nodes": "群組選取節點",
     "Help": "說明",
-    "Help Center": "說明中心",
     "Increase Brush Size in MaskEditor": "在 MaskEditor 中增大筆刷大小",
+    "Install Missing Custom Nodes": "安裝缺少的自訂節點",
     "Interrupt": "中斷",
     "Load Default Workflow": "載入預設工作流程",
     "Manage group nodes": "管理群組節點",
     "Manager": "管理員",
-    "Minimap": "縮圖地圖",
-    "Model Library": "模型庫",
+    "Manager Menu (Legacy)": "管理員選單（舊版）",
     "Move Selected Nodes Down": "選取節點下移",
     "Move Selected Nodes Left": "選取節點左移",
     "Move Selected Nodes Right": "選取節點右移",
@@ -809,10 +796,7 @@
     "Mute/Unmute Selected Nodes": "靜音/取消靜音選取節點",
     "New": "新增",
     "Next Opened Workflow": "下一個已開啟的工作流程",
-    "Node Library": "節點庫",
-    "Node Links": "節點連結",
     "Open": "開啟",
-    "Open 3D Viewer (Beta) for Selected Node": "為選取的節點開啟 3D 檢視器（Beta 版）",
     "Open Custom Nodes Folder": "開啟自訂節點資料夾",
     "Open DevTools": "開啟開發者工具",
     "Open Inputs Folder": "開啟輸入資料夾",
@@ -825,7 +809,6 @@
     "Pin/Unpin Selected Items": "釘選/取消釘選選取項目",
     "Pin/Unpin Selected Nodes": "釘選/取消釘選選取節點",
     "Previous Opened Workflow": "上一個已開啟的工作流程",
-    "Queue Panel": "佇列面板",
     "Queue Prompt": "加入提示至佇列",
     "Queue Prompt (Front)": "將提示加入佇列前端",
     "Queue Selected Output Nodes": "將選取的輸出節點加入佇列",
@@ -852,18 +835,11 @@
     "Toggle the Custom Nodes Manager Progress Bar": "切換自訂節點管理器進度條",
     "Undo": "復原",
     "Ungroup selected group nodes": "取消群組選取的群組節點",
-    "Unpack the selected Subgraph": "解包所選子圖",
-    "Workflows": "工作流程",
+    "Unload Models": "卸載模型",
+    "Unload Models and Execution Cache": "卸載模型與執行快取",
+    "Workflow": "工作流程",
     "Zoom In": "放大",
-    "Zoom Out": "縮小",
-    "Zoom to fit": "縮放至適合大小"
-  },
-  "minimap": {
-    "nodeColors": "節點顏色",
-    "renderBypassState": "顯示繞過狀態",
-    "renderErrorState": "顯示錯誤狀態",
-    "showGroups": "顯示框架／群組",
-    "showLinks": "顯示連結"
+    "Zoom Out": "縮小"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "不要再顯示此訊息",
@@ -1131,7 +1107,6 @@
   },
   "settingsCategories": {
     "3D": "3D",
-    "3DViewer": "3D 檢視器",
     "API Nodes": "API 節點",
     "About": "關於",
     "Appearance": "外觀",
@@ -1183,31 +1158,10 @@
     "Window": "視窗",
     "Workflow": "工作流程"
   },
-  "shortcuts": {
-    "essentials": "基本",
-    "keyboardShortcuts": "鍵盤快捷鍵",
-    "manageShortcuts": "管理快捷鍵",
-    "noKeybinding": "無快捷鍵",
-    "subcategories": {
-      "node": "節點",
-      "panelControls": "面板控制",
-      "queue": "佇列",
-      "view": "檢視",
-      "workflow": "工作流程"
-    },
-    "viewControls": "檢視控制"
-  },
   "sideToolbar": {
     "browseTemplates": "瀏覽範例模板",
     "downloads": "下載",
     "helpCenter": "說明中心",
-    "labels": {
-      "models": "模型",
-      "nodes": "節點",
-      "queue": "佇列",
-      "templates": "範本",
-      "workflows": "工作流程"
-    },
     "logout": "登出",
     "modelLibrary": "模型庫",
     "newBlankWorkflow": "建立新的空白工作流程",
@@ -1245,7 +1199,6 @@
       },
       "showFlatList": "顯示平面清單"
     },
-    "templates": "範本",
     "workflowTab": {
       "confirmDelete": "您確定要刪除這個工作流程嗎？",
       "confirmDeleteTitle": "刪除工作流程？",
@@ -1292,8 +1245,6 @@
       "Video": "影片",
       "Video API": "影片 API"
     },
-    "loadingMore": "正在載入更多範本...",
-    "searchPlaceholder": "搜尋範本...",
     "template": {
       "3D": {
         "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
@@ -1616,7 +1567,6 @@
     "failedToExportModel": "無法將模型匯出為 {format}",
     "failedToFetchBalance": "取得餘額失敗：{error}",
     "failedToFetchLogs": "無法取得伺服器日誌",
-    "failedToInitializeLoad3dViewer": "初始化 3D 檢視器失敗",
     "failedToInitiateCreditPurchase": "啟動點數購買失敗：{error}",
     "failedToPurchaseCredits": "購買點數失敗：{error}",
     "fileLoadError": "無法在 {fileName} 中找到工作流程",

src/locales/zh/commands.json

@@ -164,8 +164,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "加载默认工作流"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "自定义节点管理器"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "自定义节点（测试版）"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "自訂節點（舊版）"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "管理員選單（舊版）"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "安装缺失的包"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "检查更新"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "切换进度对话框"
@@ -179,6 +191,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "打开选中节点的遮罩编辑器"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "卸载模型"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "卸载模型和执行缓存"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新建空白工作流"
   },

src/locales/zh/main.json

@@ -84,9 +84,9 @@
   },
   "breadcrumbsMenu": {
     "clearWorkflow": "清除工作流程",
-    "deleteWorkflow": "删除工作流程",
-    "duplicate": "复制",
-    "enterNewName": "输入新名称"
+    "deleteWorkflow": "刪除工作流程",
+    "duplicate": "複製",
+    "enterNewName": "輸入新名稱"
   },
   "chatHistory": {
     "cancelEdit": "取消",
@@ -272,11 +272,13 @@
     "category": "类别",
     "choose_file_to_upload": "选择要上传的文件",
     "clear": "清除",
+    "clearAll": "全部清除",
     "clearFilters": "清除筛选",
     "close": "关闭",
     "color": "颜色",
     "comingSoon": "即将推出",
     "command": "指令",
+    "commandProhibited": "命令 {command} 被禁止。请联系管理员获取更多信息。",
     "community": "社区",
     "completed": "已完成",
     "confirm": "确认",
@@ -297,9 +299,8 @@
     "devices": "设备",
     "disableAll": "禁用全部",
     "disabling": "禁用中",
-    "dismiss": "关闭",
+    "dismiss": "關閉",
     "download": "下载",
-    "duplicate": "复制",
     "edit": "编辑",
     "empty": "空",
     "enableAll": "启用全部",
@@ -314,7 +315,7 @@
     "findIssues": "查找问题",
     "firstTimeUIMessage": "这是您第一次使用新界面。选择 \"菜单 > 使用新菜单 > 禁用\" 来恢复旧界面。",
     "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
-    "frontendOutdated": "前端版本 {frontendVersion} 已过时。后端需要 {requiredVersion} 或更高版本。",
+    "frontendOutdated": "前端版本 {frontendVersion} 已過時。後端需要 {requiredVersion} 或更高版本。",
     "goToNode": "转到节点",
     "help": "帮助",
     "icon": "图标",
@@ -327,6 +328,8 @@
     "installed": "已安装",
     "installing": "正在安装",
     "interrupted": "已中断",
+    "itemSelected": "已选择 {selectedCount} 项",
+    "itemsSelected": "已选择 {selectedCount} 项",
     "keybinding": "按键绑定",
     "keybindingAlreadyExists": "快捷键已存在",
     "learnMore": "了解更多",
@@ -401,7 +404,7 @@
     "usageHint": "使用提示",
     "user": "用户",
     "versionMismatchWarning": "版本相容性警告",
-    "versionMismatchWarningMessage": "{warning}：{detail} 请参阅 https://docs.comfy.org/installation/update_comfyui#common-update-issues 以取得更新说明。",
+    "versionMismatchWarningMessage": "{warning}：{detail} 請參閱 https://docs.comfy.org/installation/update_comfyui#common-update-issues 以取得更新說明。",
     "videoFailedToLoad": "视频加载失败",
     "workflow": "工作流"
   },
@@ -411,7 +414,7 @@
     "resetView": "重置视图",
     "selectMode": "选择模式",
     "toggleLinkVisibility": "切换连线可见性",
-    "toggleMinimap": "切换小地图",
+    "toggleMinimap": "切換小地圖",
     "zoomIn": "放大",
     "zoomOut": "缩小"
   },
@@ -570,10 +573,6 @@
     "applyingTexture": "应用纹理中...",
     "backgroundColor": "背景颜色",
     "camera": "摄影机",
-    "cameraType": {
-      "orthographic": "正交",
-      "perspective": "透视"
-    },
     "clearRecording": "清除录制",
     "edgeThreshold": "边缘阈值",
     "export": "导出",
@@ -594,7 +593,6 @@
       "wireframe": "线框"
     },
     "model": "模型",
-    "openIn3DViewer": "在 3D 查看器中打开",
     "previewOutput": "预览输出",
     "removeBackgroundImage": "移除背景图片",
     "resizeNodeMatchOutput": "调整节点以匹配输出",
@@ -605,22 +603,8 @@
     "switchCamera": "切换摄影机类型",
     "switchingMaterialMode": "切换材质模式中...",
     "upDirection": "上方向",
-    "upDirections": {
-      "original": "原始"
-    },
     "uploadBackgroundImage": "上传背景图片",
-    "uploadTexture": "上传纹理",
-    "viewer": {
-      "apply": "应用",
-      "cameraSettings": "相机设置",
-      "cameraType": "相机类型",
-      "cancel": "取消",
-      "exportSettings": "导出设置",
-      "lightSettings": "灯光设置",
-      "modelSettings": "模型设置",
-      "sceneSettings": "场景设置",
-      "title": "3D 查看器（测试版）"
-    }
+    "uploadTexture": "上传纹理"
   },
   "loadWorkflowWarning": {
     "coreNodesFromVersion": "需要 ComfyUI {version}：",
@@ -667,6 +651,9 @@
     "installationQueue": "安装队列",
     "lastUpdated": "最后更新",
     "latestVersion": "最新",
+    "legacyManagerUI": "使用旧版UI",
+    "legacyManagerUIDescription": "要使用旧版的管理器UI，请启动ComfyUI并使用 --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "在此版本的ComfyUI中，不提供旧版的管理器菜单。请使用新的管理器菜单。",
     "license": "许可证",
     "loadingVersions": "正在加载版本...",
     "nightlyVersion": "每夜",
@@ -740,7 +727,7 @@
     "disabled": "禁用",
     "disabledTooltip": "工作流将不会自动执行",
     "execute": "执行",
-    "help": "说明",
+    "help": "說明",
     "hideMenu": "隐藏菜单",
     "instant": "实时",
     "instantTooltip": "工作流将会在生成完成后立即执行",
@@ -749,15 +736,14 @@
     "manageExtensions": "管理擴充功能",
     "onChange": "更改时",
     "onChangeTooltip": "一旦进行更改，工作流将添加到执行队列",
-    "queue": "队列面板",
     "refresh": "刷新节点",
     "resetView": "重置视图",
     "run": "运行",
     "runWorkflow": "运行工作流程（Shift排在前面）",
     "runWorkflowFront": "运行工作流程（排在前面）",
-    "settings": "设定",
+    "settings": "設定",
     "showMenu": "显示菜单",
-    "theme": "主题",
+    "theme": "主題",
     "toggleBottomPanel": "底部面板"
   },
   "menuLabels": {
@@ -765,8 +751,10 @@
     "Bottom Panel": "底部面板",
     "Browse Templates": "浏览模板",
     "Bypass/Unbypass Selected Nodes": "忽略/取消忽略选定节点",
-    "Canvas Performance": "画布性能",
+    "Canvas Toggle Link Visibility": "切换连线可见性",
     "Canvas Toggle Lock": "切换视图锁定",
+    "Canvas Toggle Minimap": "畫布切換小地圖",
+    "Check for Custom Node Updates": "檢查自訂節點更新",
     "Check for Updates": "检查更新",
     "Clear Pending Tasks": "清除待处理任务",
     "Clear Workflow": "清除工作流",
@@ -780,28 +768,27 @@
     "Contact Support": "联系支持",
     "Convert Selection to Subgraph": "将选中内容转换为子图",
     "Convert selected nodes to group node": "将选中节点转换为组节点",
-    "Decrease Brush Size in MaskEditor": "在 MaskEditor 中减小笔刷大小",
+    "Custom Nodes (Legacy)": "自訂節點（舊版）",
+    "Custom Nodes Manager": "自定义节点管理器",
+    "Decrease Brush Size in MaskEditor": "在 MaskEditor 中減小筆刷大小",
     "Delete Selected Items": "删除选定的项目",
     "Desktop User Guide": "桌面端用户指南",
     "Duplicate Current Workflow": "复制当前工作流",
     "Edit": "编辑",
-    "Exit Subgraph": "退出子图",
     "Export": "导出",
     "Export (API)": "导出 (API)",
-    "File": "文件",
     "Fit Group To Contents": "适应组内容",
-    "Focus Mode": "专注模式",
+    "Fit view to selected nodes": "适应视图到选中节点",
     "Give Feedback": "提供反馈",
     "Group Selected Nodes": "将选中节点转换为组节点",
     "Help": "帮助",
-    "Help Center": "帮助中心",
-    "Increase Brush Size in MaskEditor": "在 MaskEditor 中增大笔刷大小",
+    "Increase Brush Size in MaskEditor": "在 MaskEditor 中增大筆刷大小",
+    "Install Missing Custom Nodes": "安裝缺少的自訂節點",
     "Interrupt": "中断",
     "Load Default Workflow": "加载默认工作流",
     "Manage group nodes": "管理组节点",
     "Manager": "管理器",
-    "Minimap": "小地图",
-    "Model Library": "模型库",
+    "Manager Menu (Legacy)": "管理選單（舊版）",
     "Move Selected Nodes Down": "下移所选节点",
     "Move Selected Nodes Left": "左移所选节点",
     "Move Selected Nodes Right": "右移所选节点",
@@ -809,10 +796,7 @@
     "Mute/Unmute Selected Nodes": "静音/取消静音选定节点",
     "New": "新建",
     "Next Opened Workflow": "下一个打开的工作流",
-    "Node Library": "节点库",
-    "Node Links": "节点连接",
     "Open": "打开",
-    "Open 3D Viewer (Beta) for Selected Node": "为选中节点打开3D查看器（测试版）",
     "Open Custom Nodes Folder": "打开自定义节点文件夹",
     "Open DevTools": "打开开发者工具",
     "Open Inputs Folder": "打开输入文件夹",
@@ -825,7 +809,6 @@
     "Pin/Unpin Selected Items": "固定/取消固定选定项目",
     "Pin/Unpin Selected Nodes": "固定/取消固定选定节点",
     "Previous Opened Workflow": "上一个打开的工作流",
-    "Queue Panel": "队列面板",
     "Queue Prompt": "执行提示词",
     "Queue Prompt (Front)": "执行提示词 (优先执行)",
     "Queue Selected Output Nodes": "将所选输出节点加入队列",
@@ -842,28 +825,24 @@
     "Show Model Selector (Dev)": "顯示模型選擇器（開發用）",
     "Show Settings Dialog": "显示设置对话框",
     "Sign Out": "退出登录",
-    "Toggle Essential Bottom Panel": "切换基础底部面板",
+    "Toggle Bottom Panel": "切换底部面板",
+    "Toggle Focus Mode": "切换专注模式",
     "Toggle Logs Bottom Panel": "切换日志底部面板",
+    "Toggle Model Library Sidebar": "切換模型庫側邊欄",
+    "Toggle Node Library Sidebar": "切換節點庫側邊欄",
+    "Toggle Queue Sidebar": "切換佇列側邊欄",
     "Toggle Search Box": "切换搜索框",
     "Toggle Terminal Bottom Panel": "切换终端底部面板",
     "Toggle Theme (Dark/Light)": "切换主题（暗/亮）",
-    "Toggle View Controls Bottom Panel": "切换视图控制底部面板",
-    "Toggle the Custom Nodes Manager": "切换自定义节点管理器",
+    "Toggle Workflows Sidebar": "切換工作流程側邊欄",
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
-    "Unpack the selected Subgraph": "解包选中子图",
-    "Workflows": "工作流",
+    "Unload Models": "卸载模型",
+    "Unload Models and Execution Cache": "卸载模型和执行缓存",
+    "Workflow": "工作流",
     "Zoom In": "放大画面",
-    "Zoom Out": "缩小画面",
-    "Zoom to fit": "缩放以适应"
-  },
-  "minimap": {
-    "nodeColors": "节点颜色",
-    "renderBypassState": "渲染绕过状态",
-    "renderErrorState": "渲染错误状态",
-    "showGroups": "显示框架/分组",
-    "showLinks": "显示连接"
+    "Zoom Out": "缩小画面"
   },
   "missingModelsDialog": {
     "doNotAskAgain": "不再显示此消息",
@@ -1131,7 +1110,6 @@
   },
   "settingsCategories": {
     "3D": "3D",
-    "3DViewer": "3D查看器",
     "API Nodes": "API 节点",
     "About": "关于",
     "Appearance": "外观",
@@ -1183,31 +1161,10 @@
     "Window": "窗口",
     "Workflow": "工作流"
   },
-  "shortcuts": {
-    "essentials": "常用",
-    "keyboardShortcuts": "键盘快捷键",
-    "manageShortcuts": "管理快捷键",
-    "noKeybinding": "无快捷键",
-    "subcategories": {
-      "node": "节点",
-      "panelControls": "面板控制",
-      "queue": "队列",
-      "view": "视图",
-      "workflow": "工作流"
-    },
-    "viewControls": "视图控制"
-  },
   "sideToolbar": {
     "browseTemplates": "浏览示例模板",
     "downloads": "下载",
     "helpCenter": "帮助中心",
-    "labels": {
-      "models": "模型",
-      "nodes": "节点",
-      "queue": "队列",
-      "templates": "模板",
-      "workflows": "工作流"
-    },
     "logout": "登出",
     "modelLibrary": "模型库",
     "newBlankWorkflow": "创建空白工作流",
@@ -1245,7 +1202,6 @@
       },
       "showFlatList": "平铺结果"
     },
-    "templates": "模板",
     "workflowTab": {
       "confirmDelete": "您确定要删除此工作流吗？",
       "confirmDeleteTitle": "删除工作流？",
@@ -1292,8 +1248,6 @@
       "Video": "视频生成",
       "Video API": "视频 API"
     },
-    "loadingMore": "正在加载更多模板...",
-    "searchPlaceholder": "搜索模板...",
     "template": {
       "3D": {
         "3d_hunyuan3d_image_to_model": "混元3D 2.0 图生模型",
@@ -1616,7 +1570,6 @@
     "failedToExportModel": "无法将模型导出为 {format}",
     "failedToFetchBalance": "获取余额失败：{error}",
     "failedToFetchLogs": "无法获取服务器日志",
-    "failedToInitializeLoad3dViewer": "初始化3D查看器失败",
     "failedToInitiateCreditPurchase": "发起积分购买失败：{error}",
     "failedToPurchaseCredits": "购买积分失败：{error}",
     "fileLoadError": "无法在 {fileName} 中找到工作流",
@@ -1673,9 +1626,9 @@
     "required": "必填"
   },
   "versionMismatchWarning": {
-    "dismiss": "关闭",
+    "dismiss": "關閉",
     "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
-    "frontendOutdated": "前端版本 {frontendVersion} 已过时。後端需要 {requiredVersion} 版或更高版本。",
+    "frontendOutdated": "前端版本 {frontendVersion} 已過時。後端需要 {requiredVersion} 版或更高版本。",
     "title": "版本相容性警告",
     "updateFrontend": "更新前端"
   },

src/schemas/apiSchema.ts

@@ -495,6 +495,7 @@ const zSettings = z.object({
   'Comfy.Load3D.LightAdjustmentIncrement': z.number(),
   'Comfy.Load3D.CameraType': z.enum(['perspective', 'orthographic']),
   'Comfy.Load3D.3DViewerEnable': z.boolean(),
+  'Comfy.Memory.AllowManualUnload': z.boolean(),
   'pysssss.SnapToGrid': z.boolean(),
   /** VHS setting is used for queue video preview support. */
   'VHS.AdvancedPreviews': z.string(),

src/schemas/nodeDefSchema.ts

@@ -232,7 +232,13 @@ export const zComfyNodeDef = z.object({
    * Comfy Org account.
    * https://docs.comfy.org/tutorials/api-nodes/overview
    */
-  api_node: z.boolean().optional()
+  api_node: z.boolean().optional(),
+  /**
+   * Specifies the order of inputs for each input category.
+   * Used to ensure consistent widget ordering regardless of JSON serialization.
+   * Keys are 'required', 'optional', etc., values are arrays of input names.
+   */
+  input_order: z.record(z.array(z.string())).optional()
 })
 
 // `/object_info`

src/scripts/api.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { get } from 'es-toolkit/compat'
 
 import defaultClientFeatureFlags from '@/config/clientFeatureFlags.json'
 import type {
@@ -35,6 +36,7 @@ import type {
   NodeId
 } from '@/schemas/comfyWorkflowSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { useToastStore } from '@/stores/toastStore'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { WorkflowTemplates } from '@/types/workflowTemplateTypes'
 
@@ -1020,6 +1022,56 @@ export class ComfyApi extends EventTarget {
     return (await axios.get(this.internalURL('/folder_paths'))).data
   }
 
+  /* Frees memory by unloading models and optionally freeing execution cache
+   * @param {Object} options - The options object
+   * @param {boolean} options.freeExecutionCache - If true, also frees execution cache
+   */
+  async freeMemory(options: { freeExecutionCache: boolean }) {
+    try {
+      let mode = ''
+      if (options.freeExecutionCache) {
+        mode = '{"unload_models": true, "free_memory": true}'
+      } else {
+        mode = '{"unload_models": true}'
+      }
+
+      const res = await this.fetchApi(`/free`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: mode
+      })
+
+      if (res.status === 200) {
+        if (options.freeExecutionCache) {
+          useToastStore().add({
+            severity: 'success',
+            summary: 'Models and Execution Cache have been cleared.',
+            life: 3000
+          })
+        } else {
+          useToastStore().add({
+            severity: 'success',
+            summary: 'Models have been unloaded.',
+            life: 3000
+          })
+        }
+      } else {
+        useToastStore().add({
+          severity: 'error',
+          summary:
+            'Unloading of models failed. Installed ComfyUI may be an outdated version.',
+          life: 5000
+        })
+      }
+    } catch (error) {
+      useToastStore().add({
+        severity: 'error',
+        summary: 'An error occurred while trying to unload models.',
+        life: 5000
+      })
+    }
+  }
+
   /**
    * Gets the custom nodes i18n data from the server.
    *
@@ -1031,21 +1083,21 @@ export class ComfyApi extends EventTarget {
 
   /**
    * Checks if the server supports a specific feature.
-   * @param featureName The name of the feature to check
+   * @param featureName The name of the feature to check (supports dot notation for nested values)
    * @returns true if the feature is supported, false otherwise
    */
   serverSupportsFeature(featureName: string): boolean {
-    return this.serverFeatureFlags[featureName] === true
+    return get(this.serverFeatureFlags, featureName) === true
   }
 
   /**
    * Gets a server feature flag value.
-   * @param featureName The name of the feature to get
+   * @param featureName The name of the feature to get (supports dot notation for nested values)
    * @param defaultValue The default value if the feature is not found
    * @returns The feature value or default
    */
   getServerFeature<T = unknown>(featureName: string, defaultValue?: T): T {
-    return (this.serverFeatureFlags[featureName] ?? defaultValue) as T
+    return get(this.serverFeatureFlags, featureName, defaultValue) as T
   }
 
   /**

src/services/comfyManagerService.ts

@@ -27,16 +27,16 @@ enum ManagerRoute {
   UPDATE_ALL = 'manager/queue/update_all',
   UNINSTALL = 'manager/queue/uninstall',
   DISABLE = 'manager/queue/disable',
+  // FIX_NODE is currently unused but kept for potential future implementation
   FIX_NODE = 'manager/queue/fix',
   LIST_INSTALLED = 'customnode/installed',
-  GET_NODES = 'customnode/getmappings',
-  GET_PACKS = 'customnode/getlist',
   IMPORT_FAIL_INFO = 'customnode/import_fail_info',
-  REBOOT = 'manager/reboot'
+  REBOOT = 'manager/reboot',
+  IS_LEGACY_MANAGER_UI = 'manager/is_legacy_manager_ui'
 }
 
 const managerApiClient = axios.create({
-  baseURL: api.apiURL(''),
+  baseURL: api.apiURL('/v2/'),
   headers: {
     'Content-Type': 'application/json'
   }
@@ -247,6 +247,15 @@ export const useComfyManagerService = () => {
     )
   }
 
+  const isLegacyManagerUI = async (signal?: AbortSignal) => {
+    const errorContext = 'Checking if user set Manager to use the legacy UI'
+
+    return executeRequest<{ is_legacy_manager_ui: boolean }>(
+      () => managerApiClient.get(ManagerRoute.IS_LEGACY_MANAGER_UI, { signal }),
+      { errorContext }
+    )
+  }
+
   return {
     // State
     isLoading,
@@ -268,6 +277,7 @@ export const useComfyManagerService = () => {
     updateAllPacks,
 
     // System operations
-    rebootComfyUI
+    rebootComfyUI,
+    isLegacyManagerUI
   }
 }

src/services/litegraphService.ts

@@ -50,6 +50,7 @@ import {
   isVideoNode,
   migrateWidgetsValues
 } from '@/utils/litegraphUtil'
+import { getOrderedInputSpecs } from '@/utils/nodeDefOrderingUtil'
 
 import { useExtensionService } from './extensionService'
 
@@ -248,9 +249,14 @@ export const useLitegraphService = () => {
        * @internal Add inputs to the node.
        */
       #addInputs(inputs: Record<string, InputSpec>) {
-        for (const inputSpec of Object.values(inputs))
+        // Use input_order if available to ensure consistent widget ordering
+        const nodeDefImpl = ComfyNode.nodeData as ComfyNodeDefImpl
+        const orderedInputSpecs = getOrderedInputSpecs(nodeDefImpl, inputs)
+
+        // Create sockets and widgets in the determined order
+        for (const inputSpec of orderedInputSpecs)
           this.#addInputSocket(inputSpec)
-        for (const inputSpec of Object.values(inputs))
+        for (const inputSpec of orderedInputSpecs)
           this.#addInputWidget(inputSpec)
       }
 
@@ -508,9 +514,14 @@ export const useLitegraphService = () => {
        * @internal Add inputs to the node.
        */
       #addInputs(inputs: Record<string, InputSpec>) {
-        for (const inputSpec of Object.values(inputs))
+        // Use input_order if available to ensure consistent widget ordering
+        const nodeDefImpl = ComfyNode.nodeData as ComfyNodeDefImpl
+        const orderedInputSpecs = getOrderedInputSpecs(nodeDefImpl, inputs)
+
+        // Create sockets and widgets in the determined order
+        for (const inputSpec of orderedInputSpecs)
           this.#addInputSocket(inputSpec)
-        for (const inputSpec of Object.values(inputs))
+        for (const inputSpec of orderedInputSpecs)
           this.#addInputWidget(inputSpec)
       }
 

src/stores/comfyManagerStore.ts

@@ -29,6 +29,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
   const enabledPacksIds = ref<Set<string>>(new Set())
   const disabledPacksIds = ref<Set<string>>(new Set())
   const installedPacksIds = ref<Set<string>>(new Set())
+  const installingPacksIds = ref<Set<string>>(new Set())
   const isStale = ref(true)
   const taskLogs = ref<TaskLog[]>([])
 
@@ -49,6 +50,9 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     isInstalledPackId(packName) &&
     enabledPacksIds.value.has(packName)
 
+  const isInstallingPackId = (packName: string | undefined): boolean =>
+    !!packName && installingPacksIds.value.has(packName)
+
   const packsToIdSet = (packs: ManagerPackInstalled[]) =>
     packs.reduce((acc, pack) => {
       const id = pack.cnr_id || pack.aux_id
@@ -117,7 +121,11 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
   whenever(isStale, refreshInstalledList, { immediate: true })
   whenever(uncompletedCount, () => showManagerProgressDialog())
 
-  const withLogs = (task: () => Promise<null>, taskName: string) => {
+  const withLogs = (
+    task: () => Promise<null>,
+    taskName: string,
+    packId?: string
+  ) => {
     const { startListening, stopListening, logs } = useServerLogs()
 
     const loggedTask = async () => {
@@ -128,6 +136,9 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
 
     const onComplete = async () => {
       await stopListening()
+      if (packId) {
+        installingPacksIds.value.delete(packId)
+      }
       setStale()
     }
 
@@ -152,8 +163,11 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
         }
       }
 
+      installingPacksIds.value.add(params.id)
       const task = () => managerService.installPack(params, signal)
-      enqueueTask(withLogs(task, `${actionDescription} ${params.id}`))
+      enqueueTask(
+        withLogs(task, `${actionDescription} ${params.id}`, params.id)
+      )
     },
     { maxSize: 1 }
   )
@@ -162,14 +176,16 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     installPack.clear()
     installPack.cancel()
     const task = () => managerService.uninstallPack(params, signal)
-    enqueueTask(withLogs(task, t('manager.uninstalling', { id: params.id })))
+    enqueueTask(
+      withLogs(task, t('manager.uninstalling', { id: params.id }), params.id)
+    )
   }
 
   const updatePack = useCachedRequest<ManagerPackInfo, void>(
     async (params: ManagerPackInfo, signal?: AbortSignal) => {
       updateAllPacks.cancel()
       const task = () => managerService.updatePack(params, signal)
-      enqueueTask(withLogs(task, t('g.updating', { id: params.id })))
+      enqueueTask(withLogs(task, t('g.updating', { id: params.id }), params.id))
     },
     { maxSize: 1 }
   )
@@ -184,7 +200,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
 
   const disablePack = (params: ManagerPackInfo, signal?: AbortSignal) => {
     const task = () => managerService.disablePack(params, signal)
-    enqueueTask(withLogs(task, t('g.disabling', { id: params.id })))
+    enqueueTask(withLogs(task, t('g.disabling', { id: params.id }), params.id))
   }
 
   const getInstalledPackVersion = (packId: string) => {
@@ -212,6 +228,7 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     installedPacksIds,
     isPackInstalled: isInstalledPackId,
     isPackEnabled: isEnabledPackId,
+    isPackInstalling: isInstallingPackId,
     getInstalledPackVersion,
     refreshInstalledList,
 

src/stores/nodeDefStore.ts

@@ -63,6 +63,10 @@ export class ComfyNodeDefImpl
    * @deprecated Use `outputs[n].tooltip` instead
    */
   readonly output_tooltips?: string[]
+  /**
+   * Order of inputs for each category (required, optional, hidden)
+   */
+  readonly input_order?: Record<string, string[]>
 
   // V2 fields
   readonly inputs: Record<string, InputSpecV2>
@@ -130,6 +134,7 @@ export class ComfyNodeDefImpl
     this.output_is_list = obj.output_is_list
     this.output_name = obj.output_name
     this.output_tooltips = obj.output_tooltips
+    this.input_order = obj.input_order
 
     // Initialize V2 fields
     const defV2 = transformNodeDefV1ToV2(obj)

src/types/buttonTypes.ts

@@ -1,36 +1,61 @@
 import type { HTMLAttributes } from 'vue'
 
+export type ButtonSize = 'fit-content' | 'sm' | 'md'
+export type ButtonType = 'primary' | 'secondary' | 'transparent'
+export type ButtonBorder = boolean
+
 export interface BaseButtonProps {
-  size?: 'sm' | 'md'
-  type?: 'primary' | 'secondary' | 'transparent'
+  size?: ButtonSize
+  type?: ButtonType
+  border?: ButtonBorder
+  disabled?: boolean
   class?: HTMLAttributes['class']
 }
 
-export const getButtonSizeClasses = (size: BaseButtonProps['size'] = 'md') => {
+export const getButtonSizeClasses = (size: ButtonSize = 'md') => {
   const sizeClasses = {
+    'fit-content': '',
     sm: 'px-2 py-1.5 text-xs',
     md: 'px-2.5 py-2 text-sm'
   }
   return sizeClasses[size]
 }
 
-export const getButtonTypeClasses = (
-  type: BaseButtonProps['type'] = 'primary'
-) => {
-  const typeClasses = {
+export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
+  const baseByType = {
+    primary:
+      'bg-neutral-900 border-none text-white dark-theme:bg-white dark-theme:text-neutral-900',
+    secondary:
+      'bg-white border-none text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
+    transparent:
+      'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-400'
+  } as const
+
+  return baseByType[type]
+}
+
+export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
+  const baseByType = {
     primary:
       'bg-neutral-900 text-white dark-theme:bg-white dark-theme:text-neutral-900',
     secondary:
       'bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
     transparent: 'bg-transparent text-neutral-600 dark-theme:text-neutral-400'
-  }
-  return typeClasses[type]
+  } as const
+
+  const borderByType = {
+    primary: 'border border-solid border-white dark-theme:border-neutral-900',
+    secondary: 'border border-solid border-neutral-950 dark-theme:border-white',
+    transparent:
+      'border border-solid border-neutral-950 dark-theme:border-white'
+  } as const
+
+  return `${baseByType[type]} ${borderByType[type]}`
 }
 
-export const getIconButtonSizeClasses = (
-  size: BaseButtonProps['size'] = 'md'
-) => {
+export const getIconButtonSizeClasses = (size: ButtonSize = 'md') => {
   const sizeClasses = {
+    'fit-content': 'w-auto h-auto',
     sm: 'w-6 h-6 text-xs !rounded-md',
     md: 'w-8 h-8 text-sm'
   }
@@ -38,5 +63,9 @@ export const getIconButtonSizeClasses = (
 }
 
 export const getBaseButtonClasses = () => {
-  return 'flex items-center justify-center flex-shrink-0 outline-none border-none rounded-lg cursor-pointer transition-all duration-200'
+  return [
+    'flex items-center justify-center flex-shrink-0',
+    'outline-none rounded-lg cursor-pointer transition-all duration-200',
+    'disabled:opacity-50 disabled:pointer-events-none'
+  ].join(' ')
 }

src/types/comfyManagerTypes.ts

@@ -19,7 +19,7 @@ export const IsInstallingKey: InjectionKey<Ref<boolean>> =
   Symbol('isInstalling')
 
 export enum ManagerWsQueueStatus {
-  DONE = 'done',
+  DONE = 'all-done',
   IN_PROGRESS = 'in_progress'
 }
 

src/utils/nodeDefOrderingUtil.ts

@@ -0,0 +1,108 @@
+import { TWidgetValue } from '@/lib/litegraph/src/litegraph'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+/**
+ * Gets an ordered array of InputSpec objects based on input_order.
+ * This is designed to work with V2 format used by litegraphService.
+ *
+ * @param nodeDefImpl - The ComfyNodeDefImpl containing both V1 and V2 formats
+ * @param inputs - The V2 format inputs (flat Record<string, InputSpec>)
+ * @returns Array of InputSpec objects in the correct order
+ */
+export function getOrderedInputSpecs(
+  nodeDefImpl: ComfyNodeDefImpl,
+  inputs: Record<string, InputSpec>
+): InputSpec[] {
+  const orderedInputSpecs: InputSpec[] = []
+
+  // If no input_order, return default Object.values order
+  if (!nodeDefImpl.input_order) {
+    return Object.values(inputs)
+  }
+
+  // Process required inputs in specified order
+  if (nodeDefImpl.input_order.required) {
+    for (const name of nodeDefImpl.input_order.required) {
+      const inputSpec = inputs[name]
+      if (inputSpec && !inputSpec.isOptional) {
+        orderedInputSpecs.push(inputSpec)
+      }
+    }
+  }
+
+  // Process optional inputs in specified order
+  if (nodeDefImpl.input_order.optional) {
+    for (const name of nodeDefImpl.input_order.optional) {
+      const inputSpec = inputs[name]
+      if (inputSpec && inputSpec.isOptional) {
+        orderedInputSpecs.push(inputSpec)
+      }
+    }
+  }
+
+  // Add any remaining inputs not specified in input_order
+  const processedNames = new Set(orderedInputSpecs.map((spec) => spec.name))
+  for (const inputSpec of Object.values(inputs)) {
+    if (!processedNames.has(inputSpec.name)) {
+      orderedInputSpecs.push(inputSpec)
+    }
+  }
+
+  return orderedInputSpecs
+}
+
+/**
+ * Reorders widget values based on the input_order to match expected widget order.
+ * This is used when widgets were created in a different order than input_order specifies.
+ *
+ * @param widgetValues - The current widget values array
+ * @param currentWidgetOrder - The current order of widget names
+ * @param inputOrder - The desired order from input_order
+ * @returns Reordered widget values array
+ */
+export function sortWidgetValuesByInputOrder(
+  widgetValues: TWidgetValue[],
+  currentWidgetOrder: string[],
+  inputOrder: string[]
+): TWidgetValue[] {
+  if (!inputOrder || inputOrder.length === 0) {
+    return widgetValues
+  }
+
+  // Create a map of widget name to value
+  const valueMap = new Map<string, TWidgetValue>()
+  currentWidgetOrder.forEach((name, index) => {
+    if (index < widgetValues.length) {
+      valueMap.set(name, widgetValues[index])
+    }
+  })
+
+  // Reorder based on input_order
+  const reordered: TWidgetValue[] = []
+  const usedNames = new Set<string>()
+
+  // First, add values in the order specified by input_order
+  for (const name of inputOrder) {
+    if (valueMap.has(name)) {
+      reordered.push(valueMap.get(name))
+      usedNames.add(name)
+    }
+  }
+
+  // Then add any remaining values not in input_order
+  for (const [name, value] of valueMap.entries()) {
+    if (!usedNames.has(name)) {
+      reordered.push(value)
+    }
+  }
+
+  // If there are extra values not in the map, append them
+  if (widgetValues.length > currentWidgetOrder.length) {
+    for (let i = currentWidgetOrder.length; i < widgetValues.length; i++) {
+      reordered.push(widgetValues[i])
+    }
+  }
+
+  return reordered
+}

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

@@ -0,0 +1,440 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import ManagerProgressFooter from '@/components/dialog/footer/ManagerProgressFooter.vue'
+import { useComfyManagerService } from '@/services/comfyManagerService'
+import {
+  useComfyManagerStore,
+  useManagerProgressDialogStore
+} from '@/stores/comfyManagerStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { TaskLog } from '@/types/comfyManagerTypes'
+
+// Mock modules
+vi.mock('@/stores/comfyManagerStore')
+vi.mock('@/stores/dialogStore')
+vi.mock('@/stores/settingStore')
+vi.mock('@/stores/commandStore')
+vi.mock('@/services/comfyManagerService')
+
+// 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('@/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 i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {}
+    }
+  })
+
+  const config: any = {
+    global: {
+      plugins: [PrimeVue, i18n],
+      mocks: {
+        $t: (key: string) => key // Mock i18n translation
+      }
+    }
+  }
+
+  // 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 = {
+    uncompletedCount: 0,
+    taskLogs: mockTaskLogs,
+    allTasksDone: true,
+    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()
+    // 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.uncompletedCount = 3
+      mockTaskLogs.push(
+        { taskName: 'Installing pack1', logs: [] },
+        { taskName: 'Installing pack2', logs: [] },
+        { taskName: 'Installing pack3', 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.*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('manager.applyChanges')
+    })
+
+    it('should toggle expansion when expand button is clicked', async () => {
+      mockComfyManagerStore.uncompletedCount = 1
+      mockTaskLogs.push({ taskName: 'Installing', 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.uncompletedCount = 0
+      mockTaskLogs.push(
+        { taskName: 'Installed pack1', logs: [] },
+        { taskName: 'Installed pack2', logs: [] }
+      )
+      mockComfyManagerStore.allTasksDone = true
+
+      const wrapper = mountComponent()
+
+      // Check check mark emoji
+      expect(wrapper.text()).toContain('✅')
+
+      // Check restart message (split into 3 parts)
+      expect(wrapper.text()).toContain('manager.clickToFinishSetup')
+      expect(wrapper.text()).toContain('manager.applyChanges')
+      expect(wrapper.text()).toContain('manager.toFinishSetup')
+
+      // Check Apply Changes button exists
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      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.uncompletedCount = 0
+      mockComfyManagerStore.allTasksDone = true
+
+      const wrapper = mountComponent()
+
+      // Click Apply Changes to trigger restart
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      await applyButton?.trigger('click')
+
+      // Wait for state update
+      await nextTick()
+
+      // Check restarting message
+      expect(wrapper.text()).toContain('manager.restartingBackend')
+
+      // Check loading spinner during restart
+      expect(wrapper.find('.inline-flex').exists()).toBe(true)
+
+      // Check Apply Changes button is hidden
+      expect(wrapper.text()).not.toContain('manager.applyChanges')
+    })
+  })
+
+  describe('State 4: Restart Completed', () => {
+    it('should display success message and auto-close after 3 seconds', async () => {
+      vi.useFakeTimers()
+
+      // Setup completed state
+      mockComfyManagerStore.uncompletedCount = 0
+      mockComfyManagerStore.allTasksDone = true
+
+      const wrapper = mountComponent()
+
+      // Trigger restart
+      const applyButton = wrapper
+        .findAll('button')
+        .find((btn) => btn.text().includes('manager.applyChanges'))
+      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(
+        'manager.extensionsSuccessfullyInstalled'
+      )
+
+      // Check dialog closes after 3 seconds
+      vi.advanceTimersByTime(3000)
+
+      await nextTick()
+
+      expect(mockDialogStore.closeDialog).toHaveBeenCalledWith({
+        key: 'global-manager-progress-dialog'
+      })
+      expect(mockComfyManagerStore.clearLogs).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.uncompletedCount = 0
+      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('manager.applyChanges'))
+      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.uncompletedCount = 0
+      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('manager.applyChanges'))
+      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.uncompletedCount = 0
+      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('manager.applyChanges'))
+
+      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/useFeatureFlags.test.ts

@@ -0,0 +1,121 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { isReactive, isReadonly } from 'vue'
+
+import {
+  ServerFeatureFlag,
+  useFeatureFlags
+} from '@/composables/useFeatureFlags'
+import { api } from '@/scripts/api'
+
+// Mock the API module
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getServerFeature: vi.fn()
+  }
+}))
+
+describe('useFeatureFlags', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('flags object', () => {
+    it('should provide reactive readonly flags', () => {
+      const { flags } = useFeatureFlags()
+
+      expect(isReadonly(flags)).toBe(true)
+      expect(isReactive(flags)).toBe(true)
+    })
+
+    it('should access supportsPreviewMetadata', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA)
+            return true as any
+          return defaultValue
+        }
+      )
+
+      const { flags } = useFeatureFlags()
+      expect(flags.supportsPreviewMetadata).toBe(true)
+      expect(api.getServerFeature).toHaveBeenCalledWith(
+        ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA
+      )
+    })
+
+    it('should access maxUploadSize', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE)
+            return 209715200 as any // 200MB
+          return defaultValue
+        }
+      )
+
+      const { flags } = useFeatureFlags()
+      expect(flags.maxUploadSize).toBe(209715200)
+      expect(api.getServerFeature).toHaveBeenCalledWith(
+        ServerFeatureFlag.MAX_UPLOAD_SIZE
+      )
+    })
+
+    it('should return undefined when features are not available and no default provided', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (_path, defaultValue) => defaultValue as any
+      )
+
+      const { flags } = useFeatureFlags()
+      expect(flags.supportsPreviewMetadata).toBeUndefined()
+      expect(flags.maxUploadSize).toBeUndefined()
+    })
+  })
+
+  describe('featureFlag', () => {
+    it('should create reactive computed for custom feature flags', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === 'custom.feature') return 'custom-value' as any
+          return defaultValue
+        }
+      )
+
+      const { featureFlag } = useFeatureFlags()
+      const customFlag = featureFlag('custom.feature', 'default')
+
+      expect(customFlag.value).toBe('custom-value')
+      expect(api.getServerFeature).toHaveBeenCalledWith(
+        'custom.feature',
+        'default'
+      )
+    })
+
+    it('should handle nested paths', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === 'extension.custom.nested.feature') return true as any
+          return defaultValue
+        }
+      )
+
+      const { featureFlag } = useFeatureFlags()
+      const nestedFlag = featureFlag('extension.custom.nested.feature', false)
+
+      expect(nestedFlag.value).toBe(true)
+    })
+
+    it('should work with ServerFeatureFlag enum', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE)
+            return 104857600 as any
+          return defaultValue
+        }
+      )
+
+      const { featureFlag } = useFeatureFlags()
+      const maxUploadSize = featureFlag(ServerFeatureFlag.MAX_UPLOAD_SIZE)
+
+      expect(maxUploadSize.value).toBe(104857600)
+    })
+  })
+})

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

@@ -28,7 +28,7 @@ describe('useManagerQueue', () => {
   const getEventListenerCallback = () =>
     vi.mocked(api.addEventListener).mock.calls[0][1]
 
-  const simulateServerStatus = async (status: 'done' | 'in_progress') => {
+  const simulateServerStatus = async (status: 'all-done' | 'in_progress') => {
     const event = new CustomEvent('cm-queue-status', {
       detail: { status }
     })
@@ -49,7 +49,7 @@ describe('useManagerQueue', () => {
       const queue = useManagerQueue()
 
       expect(queue.queueLength.value).toBe(0)
-      expect(queue.statusMessage.value).toBe('done')
+      expect(queue.statusMessage.value).toBe('all-done')
       expect(queue.allTasksDone.value).toBe(true)
     })
   })
@@ -104,7 +104,7 @@ describe('useManagerQueue', () => {
       await nextTick()
 
       // Should maintain the default status
-      expect(queue.statusMessage.value).toBe('done')
+      expect(queue.statusMessage.value).toBe('all-done')
     })
 
     it('should handle missing status property gracefully', async () => {
@@ -119,7 +119,7 @@ describe('useManagerQueue', () => {
       await nextTick()
 
       // Should maintain the default status
-      expect(queue.statusMessage.value).toBe('done')
+      expect(queue.statusMessage.value).toBe('all-done')
     })
   })
 
@@ -127,7 +127,7 @@ describe('useManagerQueue', () => {
     it('should start the next task when server is idle and queue has items', async () => {
       const { queue, mockTask } = createQueueWithMockTask()
 
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
 
       // Task should have been started
       expect(mockTask.task).toHaveBeenCalled()
@@ -138,7 +138,7 @@ describe('useManagerQueue', () => {
       const { mockTask } = createQueueWithMockTask()
 
       // Start the task
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask.task).toHaveBeenCalled()
 
       // Simulate task completion
@@ -148,7 +148,7 @@ describe('useManagerQueue', () => {
       await simulateServerStatus('in_progress')
       expect(mockTask.onComplete).not.toHaveBeenCalled()
 
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask.onComplete).toHaveBeenCalled()
     })
 
@@ -159,7 +159,7 @@ describe('useManagerQueue', () => {
       queue.enqueueTask(mockTask)
 
       // Start the task
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask.task).toHaveBeenCalled()
 
       // Simulate task completion
@@ -167,7 +167,7 @@ describe('useManagerQueue', () => {
 
       // Simulate server cycle
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
 
       // Should not throw errors even without onComplete
       expect(queue.allTasksDone.value).toBe(true)
@@ -184,14 +184,14 @@ describe('useManagerQueue', () => {
       expect(queue.queueLength.value).toBe(2)
 
       // Process first task
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask1.task).toHaveBeenCalled()
       expect(queue.queueLength.value).toBe(1)
 
       // Complete first task
       await mockTask1.task.mock.results[0].value
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask1.onComplete).toHaveBeenCalled()
 
       // Process second task
@@ -201,7 +201,7 @@ describe('useManagerQueue', () => {
       // Complete second task
       await mockTask2.task.mock.results[0].value
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask2.onComplete).toHaveBeenCalled()
 
       // Queue should be empty and all tasks done
@@ -219,7 +219,7 @@ describe('useManagerQueue', () => {
       queue.enqueueTask(mockTask)
 
       // Start the task
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask.task).toHaveBeenCalled()
 
       // Let the promise rejection happen
@@ -231,7 +231,7 @@ describe('useManagerQueue', () => {
 
       // Simulate server cycle
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
 
       // onComplete should still be called for failed tasks
       expect(mockTask.onComplete).toHaveBeenCalled()
@@ -252,7 +252,7 @@ describe('useManagerQueue', () => {
       ])
 
       // Task 1
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask1.task).toHaveBeenCalled()
 
       // Verify state of onComplete callbacks
@@ -266,7 +266,7 @@ describe('useManagerQueue', () => {
 
       // Task 2
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask2.task).toHaveBeenCalled()
 
       // Verify state of onComplete callbacks
@@ -279,7 +279,7 @@ describe('useManagerQueue', () => {
 
       // Task 3
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
 
       // Verify state of onComplete callbacks
       expect(mockTask3.task).toHaveBeenCalled()
@@ -297,7 +297,7 @@ describe('useManagerQueue', () => {
 
       // Add first task and start processing
       queue.enqueueTask(mockTask1)
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       expect(mockTask1.task).toHaveBeenCalled()
 
       // Add second task while first is processing
@@ -307,7 +307,7 @@ describe('useManagerQueue', () => {
       // Complete first task
       await mockTask1.task.mock.results[0].value
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
 
       // Second task should now be processed
       expect(mockTask2.task).toHaveBeenCalled()
@@ -318,9 +318,9 @@ describe('useManagerQueue', () => {
 
       // Cycle server status without any tasks
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
       await simulateServerStatus('in_progress')
-      await simulateServerStatus('done')
+      await simulateServerStatus('all-done')
 
       // Should not cause any errors
       expect(queue.allTasksDone.value).toBe(true)

tests-ui/tests/litegraph/core/LGraphNode.widgetOrder.test.ts

@@ -0,0 +1,162 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ISerialisedNode } from '@/lib/litegraph/src/types/serialisation'
+import { sortWidgetValuesByInputOrder } from '@/utils/nodeDefOrderingUtil'
+
+describe('LGraphNode widget ordering', () => {
+  let node: LGraphNode
+
+  beforeEach(() => {
+    node = new LGraphNode('TestNode')
+  })
+
+  describe('configure with widgets_values', () => {
+    it('should apply widget values in correct order when widgets order matches input_order', () => {
+      // Create node with widgets
+      node.addWidget('number', 'steps', 20, null, {})
+      node.addWidget('number', 'seed', 0, null, {})
+      node.addWidget('text', 'prompt', '', null, {})
+
+      // Configure with widget values
+      const info: ISerialisedNode = {
+        id: 1,
+        type: 'TestNode',
+        pos: [0, 0],
+        size: [200, 100],
+        flags: {},
+        order: 0,
+        mode: 0,
+        widgets_values: [30, 12345, 'test prompt']
+      }
+
+      node.configure(info)
+
+      // Check widget values are applied correctly
+      expect(node.widgets![0].value).toBe(30) // steps
+      expect(node.widgets![1].value).toBe(12345) // seed
+      expect(node.widgets![2].value).toBe('test prompt') // prompt
+    })
+
+    it('should handle mismatched widget order with input_order', () => {
+      // Simulate widgets created in wrong order (e.g., from unordered Object.entries)
+      // but widgets_values is in the correct order according to input_order
+      node.addWidget('number', 'seed', 0, null, {})
+      node.addWidget('text', 'prompt', '', null, {})
+      node.addWidget('number', 'steps', 20, null, {})
+
+      // Widget values are in input_order: [steps, seed, prompt]
+      const info: ISerialisedNode = {
+        id: 1,
+        type: 'TestNode',
+        pos: [0, 0],
+        size: [200, 100],
+        flags: {},
+        order: 0,
+        mode: 0,
+        widgets_values: [30, 12345, 'test prompt']
+      }
+
+      // This would apply values incorrectly without proper ordering
+      node.configure(info)
+
+      // Without fix, values would be applied in wrong order:
+      // seed (widget[0]) would get 30 (should be 12345)
+      // prompt (widget[1]) would get 12345 (should be 'test prompt')
+      // steps (widget[2]) would get 'test prompt' (should be 30)
+
+      // This test demonstrates the bug - values are applied in wrong order
+      expect(node.widgets![0].value).toBe(30) // seed gets steps value (WRONG)
+      expect(node.widgets![1].value).toBe(12345) // prompt gets seed value (WRONG)
+      expect(node.widgets![2].value).toBe('test prompt') // steps gets prompt value (WRONG)
+    })
+
+    it('should skip widgets with serialize: false', () => {
+      node.addWidget('number', 'steps', 20, null, {})
+      node.addWidget('button', 'action', 'Click', null, {})
+      node.widgets![1].serialize = false // button should not serialize
+      node.addWidget('number', 'seed', 0, null, {})
+
+      const info: ISerialisedNode = {
+        id: 1,
+        type: 'TestNode',
+        pos: [0, 0],
+        size: [200, 100],
+        flags: {},
+        order: 0,
+        mode: 0,
+        widgets_values: [30, 12345] // Only serializable widgets
+      }
+
+      node.configure(info)
+
+      expect(node.widgets![0].value).toBe(30) // steps
+      expect(node.widgets![1].value).toBe('Click') // button unchanged
+      expect(node.widgets![2].value).toBe(12345) // seed
+    })
+  })
+})
+
+describe('sortWidgetValuesByInputOrder', () => {
+  it('should reorder widget values based on input_order', () => {
+    const inputOrder = ['steps', 'seed', 'prompt']
+    const currentWidgetOrder = ['seed', 'prompt', 'steps']
+    const widgetValues = [12345, 'test prompt', 30]
+
+    const reordered = sortWidgetValuesByInputOrder(
+      widgetValues,
+      currentWidgetOrder,
+      inputOrder
+    )
+
+    // Should reorder to match input_order: [steps, seed, prompt]
+    expect(reordered).toEqual([30, 12345, 'test prompt'])
+  })
+
+  it('should handle widgets not in input_order', () => {
+    const inputOrder = ['steps', 'seed']
+    const currentWidgetOrder = ['seed', 'prompt', 'steps', 'cfg']
+    const widgetValues = [12345, 'test prompt', 30, 7.5]
+
+    const reordered = sortWidgetValuesByInputOrder(
+      widgetValues,
+      currentWidgetOrder,
+      inputOrder
+    )
+
+    // Should put ordered items first, then unordered
+    expect(reordered).toEqual([30, 12345, 'test prompt', 7.5])
+  })
+
+  it('should handle empty input_order', () => {
+    const inputOrder: string[] = []
+    const currentWidgetOrder = ['seed', 'prompt', 'steps']
+    const widgetValues = [12345, 'test prompt', 30]
+
+    const reordered = sortWidgetValuesByInputOrder(
+      widgetValues,
+      currentWidgetOrder,
+      inputOrder
+    )
+
+    // Should return values unchanged
+    expect(reordered).toEqual([12345, 'test prompt', 30])
+  })
+
+  it('should handle mismatched array lengths', () => {
+    const inputOrder = ['steps', 'seed', 'prompt']
+    const currentWidgetOrder = ['seed', 'prompt']
+    const widgetValues = [12345, 'test prompt', 30] // Extra value
+
+    const reordered = sortWidgetValuesByInputOrder(
+      widgetValues,
+      currentWidgetOrder,
+      inputOrder
+    )
+
+    // Should handle gracefully, keeping extra values at the end
+    // Since 'steps' is not in currentWidgetOrder, it won't be reordered
+    // Only 'seed' and 'prompt' will be reordered based on input_order
+    expect(reordered).toEqual([12345, 'test prompt', 30])
+  })
+})

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

@@ -6,6 +6,8 @@ import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import {
   InstalledPacksResponse,
+  ManagerChannel,
+  ManagerDatabaseSource,
   ManagerPackInstalled
 } from '@/types/comfyManagerTypes'
 
@@ -13,6 +15,34 @@ vi.mock('@/services/comfyManagerService', () => ({
   useComfyManagerService: vi.fn()
 }))
 
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showManagerProgressDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/useManagerQueue', () => {
+  const enqueueTaskMock = vi.fn()
+
+  return {
+    useManagerQueue: () => ({
+      statusMessage: ref(''),
+      allTasksDone: ref(false),
+      enqueueTask: enqueueTaskMock,
+      uncompletedCount: ref(0)
+    }),
+    enqueueTask: enqueueTaskMock
+  }
+})
+
+vi.mock('@/composables/useServerLogs', () => ({
+  useServerLogs: () => ({
+    startListening: vi.fn(),
+    stopListening: vi.fn(),
+    logs: ref([])
+  })
+}))
+
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
     t: vi.fn((key) => key)
@@ -33,11 +63,7 @@ interface EnabledDisabledTestCase {
 }
 
 describe('useComfyManagerStore', () => {
-  let mockManagerService: {
-    isLoading: ReturnType<typeof ref<boolean>>
-    error: ReturnType<typeof ref<string | null>>
-    listInstalledPacks: ReturnType<typeof vi.fn>
-  }
+  let mockManagerService: ReturnType<typeof useComfyManagerService>
 
   const triggerPacksChange = async (
     installedPacks: InstalledPacksResponse,
@@ -55,10 +81,21 @@ describe('useComfyManagerStore', () => {
     mockManagerService = {
       isLoading: ref(false),
       error: ref(null),
-      listInstalledPacks: vi.fn().mockResolvedValue({})
+      startQueue: vi.fn().mockResolvedValue(null),
+      resetQueue: vi.fn().mockResolvedValue(null),
+      getQueueStatus: vi.fn().mockResolvedValue(null),
+      listInstalledPacks: vi.fn().mockResolvedValue({}),
+      getImportFailInfo: vi.fn().mockResolvedValue(null),
+      installPack: vi.fn().mockResolvedValue(null),
+      uninstallPack: vi.fn().mockResolvedValue(null),
+      enablePack: vi.fn().mockResolvedValue(null),
+      disablePack: vi.fn().mockResolvedValue(null),
+      updatePack: vi.fn().mockResolvedValue(null),
+      updateAllPacks: vi.fn().mockResolvedValue(null),
+      rebootComfyUI: vi.fn().mockResolvedValue(null),
+      isLegacyManagerUI: vi.fn().mockResolvedValue(false)
     }
 
-    // @ts-expect-error Mocking the return type of useComfyManagerService
     vi.mocked(useComfyManagerService).mockReturnValue(mockManagerService)
   })
 
@@ -313,4 +350,90 @@ describe('useComfyManagerStore', () => {
       }
     )
   })
+
+  describe('isPackInstalling', () => {
+    it('should return false for packs not being installed', () => {
+      const store = useComfyManagerStore()
+      expect(store.isPackInstalling('test-pack')).toBe(false)
+      expect(store.isPackInstalling(undefined)).toBe(false)
+      expect(store.isPackInstalling('')).toBe(false)
+    })
+
+    it('should track pack as installing when installPack is called', async () => {
+      const store = useComfyManagerStore()
+
+      // Call installPack
+      await store.installPack.call({
+        id: 'test-pack',
+        repository: 'https://github.com/test/test-pack',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Check that the pack is marked as installing
+      expect(store.isPackInstalling('test-pack')).toBe(true)
+    })
+
+    it('should remove pack from installing list when explicitly removed', async () => {
+      const store = useComfyManagerStore()
+
+      // Call installPack
+      await store.installPack.call({
+        id: 'test-pack',
+        repository: 'https://github.com/test/test-pack',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Verify pack is installing
+      expect(store.isPackInstalling('test-pack')).toBe(true)
+
+      // Call installPack again for another pack to demonstrate multiple installs
+      await store.installPack.call({
+        id: 'another-pack',
+        repository: 'https://github.com/test/another-pack',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Both should be installing
+      expect(store.isPackInstalling('test-pack')).toBe(true)
+      expect(store.isPackInstalling('another-pack')).toBe(true)
+    })
+
+    it('should track multiple packs installing independently', async () => {
+      const store = useComfyManagerStore()
+
+      // Install pack 1
+      await store.installPack.call({
+        id: 'pack-1',
+        repository: 'https://github.com/test/pack-1',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Install pack 2
+      await store.installPack.call({
+        id: 'pack-2',
+        repository: 'https://github.com/test/pack-2',
+        channel: ManagerChannel.DEV,
+        mode: ManagerDatabaseSource.CACHE,
+        selected_version: 'latest',
+        version: 'latest'
+      })
+
+      // Both should be installing
+      expect(store.isPackInstalling('pack-1')).toBe(true)
+      expect(store.isPackInstalling('pack-2')).toBe(true)
+      expect(store.isPackInstalling('pack-3')).toBe(false)
+    })
+  })
 })

tests-ui/tests/utils/nodeDefOrderingUtil.test.ts

@@ -0,0 +1,274 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import {
+  getOrderedInputSpecs,
+  sortWidgetValuesByInputOrder
+} from '@/utils/nodeDefOrderingUtil'
+
+describe('nodeDefOrderingUtil', () => {
+  describe('getOrderedInputSpecs', () => {
+    it('should maintain order when no input_order is specified', () => {
+      const nodeDef: ComfyNodeDef = {
+        name: 'TestNode',
+        display_name: 'Test Node',
+        category: 'test',
+        python_module: 'test',
+        description: 'Test node',
+        output_node: false,
+        input: {
+          required: {
+            image: ['IMAGE', {}],
+            seed: ['INT', { default: 0 }],
+            steps: ['INT', { default: 20 }]
+          }
+        }
+      }
+
+      const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
+      const result = getOrderedInputSpecs(nodeDefImpl, nodeDefImpl.inputs)
+
+      // Should maintain Object.values order when no input_order
+      const names = result.map((spec) => spec.name)
+      expect(names).toEqual(['image', 'seed', 'steps'])
+    })
+
+    it('should sort inputs according to input_order', () => {
+      const nodeDef: ComfyNodeDef = {
+        name: 'TestNode',
+        display_name: 'Test Node',
+        category: 'test',
+        python_module: 'test',
+        description: 'Test node',
+        output_node: false,
+        input: {
+          required: {
+            image: ['IMAGE', {}],
+            seed: ['INT', { default: 0 }],
+            steps: ['INT', { default: 20 }]
+          }
+        },
+        input_order: {
+          required: ['steps', 'seed', 'image']
+        }
+      }
+
+      const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
+      const result = getOrderedInputSpecs(nodeDefImpl, nodeDefImpl.inputs)
+
+      const names = result.map((spec) => spec.name)
+      expect(names).toEqual(['steps', 'seed', 'image'])
+    })
+
+    it('should handle missing inputs in input_order gracefully', () => {
+      const nodeDef: ComfyNodeDef = {
+        name: 'TestNode',
+        display_name: 'Test Node',
+        category: 'test',
+        python_module: 'test',
+        description: 'Test node',
+        output_node: false,
+        input: {
+          required: {
+            image: ['IMAGE', {}],
+            seed: ['INT', { default: 0 }],
+            steps: ['INT', { default: 20 }]
+          }
+        },
+        input_order: {
+          required: ['steps', 'nonexistent', 'seed']
+        }
+      }
+
+      const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
+      const result = getOrderedInputSpecs(nodeDefImpl, nodeDefImpl.inputs)
+
+      // Should skip nonexistent and include image at the end
+      const names = result.map((spec) => spec.name)
+      expect(names).toEqual(['steps', 'seed', 'image'])
+    })
+
+    it('should handle inputs not in input_order', () => {
+      const nodeDef: ComfyNodeDef = {
+        name: 'TestNode',
+        display_name: 'Test Node',
+        category: 'test',
+        python_module: 'test',
+        description: 'Test node',
+        output_node: false,
+        input: {
+          required: {
+            image: ['IMAGE', {}],
+            seed: ['INT', { default: 0 }],
+            steps: ['INT', { default: 20 }],
+            cfg: ['FLOAT', { default: 7.0 }]
+          }
+        },
+        input_order: {
+          required: ['steps', 'seed']
+        }
+      }
+
+      const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
+      const result = getOrderedInputSpecs(nodeDefImpl, nodeDefImpl.inputs)
+
+      // Should have ordered ones first, then remaining
+      const names = result.map((spec) => spec.name)
+      expect(names).toEqual(['steps', 'seed', 'image', 'cfg'])
+    })
+
+    it('should handle both required and optional inputs', () => {
+      const nodeDef: ComfyNodeDef = {
+        name: 'TestNode',
+        display_name: 'Test Node',
+        category: 'test',
+        python_module: 'test',
+        description: 'Test node',
+        output_node: false,
+        input: {
+          required: {
+            image: ['IMAGE', {}],
+            seed: ['INT', { default: 0 }]
+          },
+          optional: {
+            mask: ['MASK', {}],
+            strength: ['FLOAT', { default: 1.0 }]
+          }
+        },
+        input_order: {
+          required: ['seed', 'image'],
+          optional: ['strength', 'mask']
+        }
+      }
+
+      const nodeDefImpl = new ComfyNodeDefImpl(nodeDef)
+      const result = getOrderedInputSpecs(nodeDefImpl, nodeDefImpl.inputs)
+
+      const names = result.map((spec) => spec.name)
+      const optionalFlags = result.map((spec) => spec.isOptional)
+
+      expect(names).toEqual(['seed', 'image', 'strength', 'mask'])
+      expect(optionalFlags).toEqual([false, false, true, true])
+    })
+
+    it('should work with real KSampler node example', () => {
+      // Simulating different backend orderings
+      const kSamplerDefBackendA: ComfyNodeDef = {
+        name: 'KSampler',
+        display_name: 'KSampler',
+        category: 'sampling',
+        python_module: 'nodes',
+        description: 'KSampler node',
+        output_node: false,
+        input: {
+          required: {
+            // Alphabetical order from backend A
+            cfg: ['FLOAT', { default: 8, min: 0, max: 100 }],
+            denoise: ['FLOAT', { default: 1, min: 0, max: 1 }],
+            latent_image: ['LATENT', {}],
+            model: ['MODEL', {}],
+            negative: ['CONDITIONING', {}],
+            positive: ['CONDITIONING', {}],
+            sampler_name: [['euler', 'euler_cfg_pp'], {}],
+            scheduler: [['simple', 'sgm_uniform'], {}],
+            seed: ['INT', { default: 0, min: 0, max: Number.MAX_SAFE_INTEGER }],
+            steps: ['INT', { default: 20, min: 1, max: 10000 }]
+          }
+        },
+        input_order: {
+          required: [
+            'model',
+            'seed',
+            'steps',
+            'cfg',
+            'sampler_name',
+            'scheduler',
+            'positive',
+            'negative',
+            'latent_image',
+            'denoise'
+          ]
+        }
+      }
+
+      const nodeDefImpl = new ComfyNodeDefImpl(kSamplerDefBackendA)
+      const result = getOrderedInputSpecs(nodeDefImpl, nodeDefImpl.inputs)
+
+      const names = result.map((spec) => spec.name)
+      // Should follow input_order, not alphabetical
+      expect(names).toEqual([
+        'model',
+        'seed',
+        'steps',
+        'cfg',
+        'sampler_name',
+        'scheduler',
+        'positive',
+        'negative',
+        'latent_image',
+        'denoise'
+      ])
+    })
+  })
+
+  describe('sortWidgetValuesByInputOrder', () => {
+    it('should reorder widget values to match input_order', () => {
+      const widgetValues = [0, 'model_ref', 5, 1]
+      const currentWidgetOrder = ['momentum', 'model', 'norm_threshold', 'eta']
+      const correctOrder = ['model', 'eta', 'norm_threshold', 'momentum']
+
+      const result = sortWidgetValuesByInputOrder(
+        widgetValues,
+        currentWidgetOrder,
+        correctOrder
+      )
+
+      expect(result).toEqual(['model_ref', 1, 5, 0])
+    })
+
+    it('should handle missing widgets in input_order', () => {
+      const widgetValues = [1, 2, 3, 4]
+      const currentWidgetOrder = ['a', 'b', 'c', 'd']
+      const inputOrder = ['b', 'd'] // Only partial order
+
+      const result = sortWidgetValuesByInputOrder(
+        widgetValues,
+        currentWidgetOrder,
+        inputOrder
+      )
+
+      // b=2, d=4, then a=1, c=3
+      expect(result).toEqual([2, 4, 1, 3])
+    })
+
+    it('should handle extra widget values', () => {
+      const widgetValues = [1, 2, 3, 4, 5] // More values than names
+      const currentWidgetOrder = ['a', 'b', 'c']
+      const inputOrder = ['c', 'a', 'b']
+
+      const result = sortWidgetValuesByInputOrder(
+        widgetValues,
+        currentWidgetOrder,
+        inputOrder
+      )
+
+      // c=3, a=1, b=2, then extras 4, 5
+      expect(result).toEqual([3, 1, 2, 4, 5])
+    })
+
+    it('should return unchanged when no input_order', () => {
+      const widgetValues = [1, 2, 3]
+      const currentWidgetOrder = ['a', 'b', 'c']
+      const inputOrder: string[] = []
+
+      const result = sortWidgetValuesByInputOrder(
+        widgetValues,
+        currentWidgetOrder,
+        inputOrder
+      )
+
+      expect(result).toEqual([1, 2, 3])
+    })
+  })
+})