test: add missing mocks to useJobMenu.test.ts

- Add isCloud mock for Cloud environment handling
- Add ComfyWorkflow export to workflowStore mock
- Add executionStore mock for clearInitializationByPromptId

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

browser_tests/tests/templates.spec.ts

@@ -189,7 +189,9 @@ test.describe('Templates', () => {
     const templateGrid = comfyPage.page.locator(
       '[data-testid="template-workflows-content"]'
     )
-    const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
+    const nav = comfyPage.page
+      .locator('header')
+      .filter({ hasText: 'Templates' })
 
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
@@ -199,8 +201,7 @@ test.describe('Templates', () => {
     await comfyPage.page.setViewportSize(mobileSize)
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
-    // Nav header is clipped by overflow-hidden parent at mobile size
-    await expect(nav).not.toBeInViewport()
+    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)

build/plugins/comfyAPIPlugin.ts

@@ -76,7 +76,6 @@ function getModuleName(id: string): string {
 export function comfyAPIPlugin(isDev: boolean): Plugin {
   return {
     name: 'comfy-api-plugin',
-    apply: 'build',
     transform(code: string, id: string) {
       if (isDev) return null
 

build/tsconfig.json

@@ -5,7 +5,7 @@
     "noEmit": true,
     "strict": true,
     "esModuleInterop": true,
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

docs/testing/vitest-patterns.md

@@ -30,10 +30,6 @@ describe('MyStore', () => {
 
 **Why `stubActions: false`?** By default, testing pinia stubs all actions. Set to `false` when testing actual store behavior.
 
-## i18n in Component Tests
-
-Use real `createI18n` with empty messages instead of mocking `vue-i18n`. See `SearchBox.test.ts` for example.
-
 ## Mock Patterns
 
 ### Reset all mocks at once

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.38.9",
+  "version": "1.38.8",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -169,7 +169,6 @@
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
-    "jsonata": "catalog:",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",

packages/design-system/src/icons/nodeSlot2.svg

@@ -0,0 +1,19 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="hollow">
+      <path
+    d="M -50 50
+       A 100 100, 0, 0, 1, 150 50
+       A 100 100, 0, 0, 1, -50 50
+       M 30 50
+       A 20 20, 0, 0, 0, 70 50
+       A 20 20, 0, 0, 0, 30 50"/>
+    </clipPath>
+  </defs>
+  <g clip-path="var(--shape)" stroke-width="4">
+    <path d="M 50 0 A 50 50, 0, 0, 1, 50 100" fill="var(--type1, red)"/>
+    <path d="M 50 100 A 50 50, 0, 0, 1, 50 0" fill="var(--type2, blue)"/>
+    <path d="M50 0L50 100" stroke="var(--inner-stroke, black)"/>
+    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
+  </g>
+</svg>

packages/design-system/src/icons/nodeSlot3.svg

@@ -0,0 +1,20 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="hollow">
+        <path
+    d="M-50 50
+       A100 100 0 0 1 150 50
+       A100 100 0 0 1 -50 50
+       M30 50
+       A20 20 0 0 0 70 50
+       A20 20 0 0 0 30 50"/>
+    </clipPath>
+  </defs>
+  <g clip-path="var(--shape)" stroke-width="4">
+    <path d="M50 0A50 50 0 0 1 93 75L50 50" fill="var(--type1, red)"/>
+    <path d="M93 75A50 50 0 0 1 7 75L50 50" fill="var(--type2, blue)"/>
+    <path d="M7 75A50 50 0 0 1 50 0L50 50" fill="var(--type3, green)"/>
+    <path d="M50 50L50 0M50 50L93 75M50 50L7 75" stroke="var(--inner-stroke, black)"/>
+    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
+  </g>
+</svg>

pnpm-lock.yaml

@@ -186,9 +186,6 @@ catalogs:
     jsdom:
       specifier: ^27.4.0
       version: 27.4.0
-    jsonata:
-      specifier: ^2.1.0
-      version: 2.1.0
     knip:
       specifier: ^5.75.1
       version: 5.75.1
@@ -452,9 +449,6 @@ importers:
       glob:
         specifier: ^11.0.3
         version: 11.0.3
-      jsonata:
-        specifier: 'catalog:'
-        version: 2.1.0
       jsondiffpatch:
         specifier: ^0.6.0
         version: 0.6.0
@@ -6051,10 +6045,6 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonata@2.1.0:
-    resolution: {integrity: sha512-OCzaRMK8HobtX8fp37uIVmL8CY1IGc/a6gLsDqz3quExFR09/U78HUzWYr7T31UEB6+Eu0/8dkVD5fFDOl9a8w==}
-    engines: {node: '>= 8'}
-
   jsonc-eslint-parser@2.4.0:
     resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -14413,8 +14403,6 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsonata@2.1.0: {}
-
   jsonc-eslint-parser@2.4.0:
     dependencies:
       acorn: 8.15.0

pnpm-workspace.yaml

@@ -62,7 +62,6 @@ catalog:
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
-  jsonata: ^2.1.0
   jsdom: ^27.4.0
   knip: ^5.75.1
   lint-staged: ^16.2.7

src/components/TopMenuSection.test.ts

@@ -1,17 +1,12 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, nextTick } from 'vue'
+import { computed } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
-import type {
-  JobListItem,
-  JobStatus
-} from '@/platform/remote/comfyui/jobs/jobTypes'
-import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { isElectron } from '@/utils/envUtil'
 
 const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
@@ -41,8 +36,7 @@ function createWrapper() {
         sideToolbar: {
           queueProgressOverlay: {
             viewJobHistory: 'View job history',
-            expandCollapsedQueue: 'Expand collapsed queue',
-            activeJobsShort: '{count} active | {count} active'
+            expandCollapsedQueue: 'Expand collapsed queue'
           }
         }
       }
@@ -65,19 +59,6 @@ function createWrapper() {
   })
 }
 
-function createJob(id: string, status: JobStatus): JobListItem {
-  return {
-    id,
-    status,
-    create_time: 0,
-    priority: 0
-  }
-}
-
-function createTask(id: string, status: JobStatus): TaskItemImpl {
-  return new TaskItemImpl(createJob(id, status))
-}
-
 describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -119,19 +100,4 @@ describe('TopMenuSection', () => {
       })
     })
   })
-
-  it('shows the active jobs label with the current count', async () => {
-    const wrapper = createWrapper()
-    const queueStore = useQueueStore()
-    queueStore.pendingTasks = [createTask('pending-1', 'pending')]
-    queueStore.runningTasks = [
-      createTask('running-1', 'in_progress'),
-      createTask('running-2', 'in_progress')
-    ]
-
-    await nextTick()
-
-    const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
-    expect(queueButton.text()).toContain('3 active')
-  })
 })

src/components/TopMenuSection.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="!workspaceStore.focusMode" class="ml-1 flex gap-x-0.5 pt-1">
+  <div
+    v-if="!workspaceStore.focusMode"
+    class="ml-1 flex gap-x-0.5 pt-1"
+    @mouseenter="isTopMenuHovered = true"
+    @mouseleave="isTopMenuHovered = false"
+  >
     <div class="min-w-0 flex-1">
       <SubgraphBreadcrumb />
     </div>
@@ -39,17 +44,19 @@
           <Button
             v-tooltip.bottom="queueHistoryTooltipConfig"
             type="destructive"
-            size="md"
+            size="icon"
             :aria-pressed="isQueueOverlayExpanded"
-            class="px-3"
-            data-testid="queue-overlay-toggle"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+            "
             @click="toggleQueueOverlay"
           >
-            <span class="text-sm font-normal tabular-nums">
-              {{ activeJobsLabel }}
-            </span>
-            <span class="sr-only">
-              {{ t('sideToolbar.queueProgressOverlay.expandCollapsedQueue') }}
+            <i class="icon-[lucide--history] size-4" />
+            <span
+              v-if="queuedCount > 0"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
+            >
+              {{ queuedCount }}
             </span>
           </Button>
           <CurrentUserButton
@@ -69,7 +76,10 @@
           </Button>
         </div>
       </div>
-      <QueueProgressOverlay v-model:expanded="isQueueOverlayExpanded" />
+      <QueueProgressOverlay
+        v-model:expanded="isQueueOverlayExpanded"
+        :menu-hovered="isTopMenuHovered"
+      />
     </div>
   </div>
 </template>
@@ -107,25 +117,18 @@ const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
-const { t, n } = useI18n()
+const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
 const queueUIStore = useQueueUIStore()
-const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const releaseStore = useReleaseStore()
 const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
-const activeJobsLabel = computed(() => {
-  const count = activeJobsCount.value
-  return t(
-    'sideToolbar.queueProgressOverlay.activeJobsShort',
-    { count: n(count) },
-    count
-  )
-})
+const isTopMenuHovered = ref(false)
+const queuedCount = computed(() => queueStore.pendingTasks.length)
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )

src/components/common/EditableText.test.ts

@@ -51,7 +51,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await wrapper.findComponent(InputText).setValue('New Text')
-    await wrapper.findComponent(InputText).trigger('keydown.enter')
+    await wrapper.findComponent(InputText).trigger('keyup.enter')
     // Blur event should have been triggered
     expect(wrapper.findComponent(InputText).element).not.toBe(
       document.activeElement
@@ -79,7 +79,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape
-    await wrapper.findComponent(InputText).trigger('keydown.escape')
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
 
     // Should emit cancel event
     expect(wrapper.emitted('cancel')).toBeTruthy()
@@ -103,7 +103,7 @@ describe('EditableText', () => {
     await wrapper.findComponent(InputText).setValue('Modified Text')
 
     // Press escape (which triggers blur internally)
-    await wrapper.findComponent(InputText).trigger('keydown.escape')
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
 
     // Manually trigger blur to simulate the blur that happens after escape
     await wrapper.findComponent(InputText).trigger('blur')
@@ -120,7 +120,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await enterWrapper.findComponent(InputText).setValue('Saved Text')
-    await enterWrapper.findComponent(InputText).trigger('keydown.enter')
+    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
     // Trigger blur that happens after enter
     await enterWrapper.findComponent(InputText).trigger('blur')
     expect(enterWrapper.emitted('edit')).toBeTruthy()
@@ -133,7 +133,7 @@ describe('EditableText', () => {
       isEditing: true
     })
     await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
-    await escapeWrapper.findComponent(InputText).trigger('keydown.escape')
+    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
     expect(escapeWrapper.emitted('cancel')).toBeTruthy()
     expect(escapeWrapper.emitted('edit')).toBeFalsy()
   })

src/components/common/EditableText.vue

@@ -3,7 +3,7 @@
     <span v-if="!isEditing">
       {{ modelValue }}
     </span>
-    <!-- Avoid double triggering finishEditing event when keydown.enter is triggered -->
+    <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
     <InputText
       v-else
       ref="inputRef"
@@ -18,8 +18,8 @@
           ...inputAttrs
         }
       }"
-      @keydown.enter.capture.stop="blurInputElement"
-      @keydown.escape.capture.stop="cancelEditing"
+      @keyup.enter.capture.stop="blurInputElement"
+      @keyup.escape.stop="cancelEditing"
       @click.stop
       @contextmenu.stop
       @pointerdown.stop.capture

src/components/common/StatusBadge.stories.ts

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import StatusBadge from './StatusBadge.vue'
-
-const meta = {
-  title: 'Common/StatusBadge',
-  component: StatusBadge,
-  tags: ['autodocs'],
-  argTypes: {
-    label: { control: 'text' },
-    severity: {
-      control: 'select',
-      options: ['default', 'secondary', 'warn', 'danger', 'contrast']
-    },
-    variant: {
-      control: 'select',
-      options: ['label', 'dot', 'circle']
-    }
-  },
-  args: {
-    label: 'Status',
-    severity: 'default'
-  }
-} satisfies Meta<typeof StatusBadge>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const Failed: Story = {
-  args: {
-    label: 'Failed',
-    severity: 'danger'
-  }
-}
-
-export const Finished: Story = {
-  args: {
-    label: 'Finished',
-    severity: 'contrast'
-  }
-}
-
-export const Dot: Story = {
-  args: {
-    label: undefined,
-    variant: 'dot',
-    severity: 'danger'
-  }
-}
-
-export const Circle: Story = {
-  args: {
-    label: '3',
-    variant: 'circle'
-  }
-}
-
-export const AllSeverities: Story = {
-  render: () => ({
-    components: { StatusBadge },
-    template: `
-      <div class="flex items-center gap-2">
-        <StatusBadge label="Default" severity="default" />
-        <StatusBadge label="Secondary" severity="secondary" />
-        <StatusBadge label="Warn" severity="warn" />
-        <StatusBadge label="Danger" severity="danger" />
-        <StatusBadge label="Contrast" severity="contrast" />
-      </div>
-    `
-  })
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: { StatusBadge },
-    template: `
-      <div class="flex items-center gap-4">
-        <div class="flex flex-col items-center gap-1">
-          <StatusBadge label="Label" variant="label" />
-          <span class="text-xs text-muted">label</span>
-        </div>
-        <div class="flex flex-col items-center gap-1">
-          <StatusBadge variant="dot" severity="danger" />
-          <span class="text-xs text-muted">dot</span>
-        </div>
-        <div class="flex flex-col items-center gap-1">
-          <StatusBadge label="5" variant="circle" />
-          <span class="text-xs text-muted">circle</span>
-        </div>
-      </div>
-    `
-  })
-}

src/components/common/StatusBadge.vue

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

src/components/common/VirtualGrid.vue

@@ -1,20 +1,16 @@
 <template>
-  <div
-    ref="container"
-    class="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
-  >
-    <div :style="topSpacerStyle" />
-    <div :style="mergedGridStyle">
-      <div
-        v-for="item in renderedItems"
-        :key="item.key"
-        class="transition-[width] duration-150 ease-out"
-        data-virtual-grid-item
-      >
+  <div ref="container" class="scroll-container">
+    <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
+    <div :style="gridStyle">
+      <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
         <slot name="item" :item="item" />
       </div>
     </div>
-    <div :style="bottomSpacerStyle" />
+    <div
+      :style="{
+        height: `${((items.length - state.end) / cols) * itemHeight}px`
+      }"
+    />
   </div>
 </template>
 
@@ -32,22 +28,19 @@ type GridState = {
 
 const {
   items,
-  gridStyle,
   bufferRows = 1,
   scrollThrottle = 64,
   resizeDebounce = 64,
   defaultItemHeight = 200,
-  defaultItemWidth = 200,
-  maxColumns = Infinity
+  defaultItemWidth = 200
 } = defineProps<{
   items: (T & { key: string })[]
-  gridStyle: CSSProperties
+  gridStyle: Partial<CSSProperties>
   bufferRows?: number
   scrollThrottle?: number
   resizeDebounce?: number
   defaultItemHeight?: number
   defaultItemWidth?: number
-  maxColumns?: number
 }>()
 
 const emit = defineEmits<{
@@ -66,18 +59,7 @@ const { y: scrollY } = useScroll(container, {
   eventListenerOptions: { passive: true }
 })
 
-const cols = computed(() =>
-  Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
-)
-
-const mergedGridStyle = computed<CSSProperties>(() => {
-  if (maxColumns === Infinity) return gridStyle
-  return {
-    ...gridStyle,
-    gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr))`
-  }
-})
-
+const cols = computed(() => Math.floor(width.value / itemWidth.value) || 1)
 const viewRows = computed(() => Math.ceil(height.value / itemHeight.value))
 const offsetRows = computed(() => Math.floor(scrollY.value / itemHeight.value))
 const isValidGrid = computed(() => height.value && width.value && items?.length)
@@ -101,16 +83,6 @@ const renderedItems = computed(() =>
   isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
 )
 
-function rowsToHeight(rows: number): string {
-  return `${(rows / cols.value) * itemHeight.value}px`
-}
-const topSpacerStyle = computed<CSSProperties>(() => ({
-  height: rowsToHeight(state.value.start)
-}))
-const bottomSpacerStyle = computed<CSSProperties>(() => ({
-  height: rowsToHeight(items.length - state.value.end)
-}))
-
 whenever(
   () => state.value.isNearEnd,
   () => {
@@ -137,6 +109,15 @@ const onResize = debounce(updateItemSize, resizeDebounce)
 watch([width, height], onResize, { flush: 'post' })
 whenever(() => items, updateItemSize, { flush: 'post' })
 onBeforeUnmount(() => {
-  onResize.cancel()
+  onResize.cancel() // Clear pending debounced calls
 })
 </script>
+
+<style scoped>
+.scroll-container {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dialog-surface) transparent;
+}
+</style>

src/components/common/WorkspaceProfilePic.vue

@@ -1,43 +0,0 @@
-<template>
-  <div
-    class="flex size-6 items-center justify-center rounded-md text-base font-semibold text-white"
-    :style="{
-      background: gradient,
-      textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
-    }"
-  >
-    {{ letter }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const { workspaceName } = defineProps<{
-  workspaceName: string
-}>()
-
-const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
-
-const gradient = computed(() => {
-  const seed = letter.value.charCodeAt(0)
-
-  function mulberry32(a: number) {
-    return function () {
-      let t = (a += 0x6d2b79f5)
-      t = Math.imul(t ^ (t >>> 15), t | 1)
-      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
-      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
-    }
-  }
-
-  const rand = mulberry32(seed)
-
-  const hue1 = Math.floor(rand() * 360)
-  const hue2 = (hue1 + 40 + Math.floor(rand() * 80)) % 360
-  const sat = 65 + Math.floor(rand() * 20)
-  const light = 55 + Math.floor(rand() * 15)
-
-  return `linear-gradient(135deg, hsl(${hue1}, ${sat}%, ${light}%), hsl(${hue2}, ${sat}%, ${light}%))`
-})
-</script>

src/components/common/statusBadge.variants.ts

@@ -1,26 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const statusBadgeVariants = cva({
-  base: 'inline-flex items-center justify-center rounded-full',
-  variants: {
-    severity: {
-      default: 'bg-primary-background text-base-foreground',
-      secondary: 'bg-secondary-background text-base-foreground',
-      warn: 'bg-warning-background text-base-background',
-      danger: 'bg-destructive-background text-white',
-      contrast: 'bg-base-foreground text-base-background'
-    },
-    variant: {
-      label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
-      dot: 'size-2',
-      circle: 'size-3.5 text-xxxs font-semibold'
-    }
-  },
-  defaultVariants: {
-    severity: 'default',
-    variant: 'label'
-  }
-})
-
-export type StatusBadgeVariants = VariantProps<typeof statusBadgeVariants>

src/components/dialog/GlobalDialog.vue

@@ -4,12 +4,7 @@
     v-for="item in dialogStore.dialogStack"
     :key="item.key"
     v-model:visible="item.visible"
-    :class="[
-      'global-dialog',
-      item.key === 'global-settings' && teamWorkspacesEnabled
-        ? 'settings-dialog-workspace'
-        : ''
-    ]"
+    class="global-dialog"
     v-bind="item.dialogComponentProps"
     :pt="item.dialogComponentProps.pt"
     :aria-labelledby="item.key"
@@ -43,15 +38,7 @@
 <script setup lang="ts">
 import Dialog from 'primevue/dialog'
 
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
-import { computed } from 'vue'
-
-const { flags } = useFeatureFlags()
-const teamWorkspacesEnabled = computed(
-  () => isCloud && flags.teamWorkspacesEnabled
-)
 
 const dialogStore = useDialogStore()
 </script>
@@ -68,27 +55,4 @@ const dialogStore = useDialogStore()
   @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
   @apply pt-0;
 }
-
-/* Workspace mode: wider settings dialog */
-.settings-dialog-workspace {
-  width: 100%;
-  max-width: 1440px;
-}
-
-.settings-dialog-workspace .p-dialog-content {
-  width: 100%;
-}
-
-.manager-dialog {
-  height: 80vh;
-  max-width: 1724px;
-  max-height: 1026px;
-}
-
-@media (min-width: 3000px) {
-  .manager-dialog {
-    max-width: 2200px;
-    max-height: 1320px;
-  }
-}
 </style>

src/components/dialog/content/setting/WorkspacePanel.vue

@@ -1,11 +0,0 @@
-<template>
-  <TabPanel value="Workspace" class="h-full">
-    <WorkspacePanelContent />
-  </TabPanel>
-</template>
-
-<script setup lang="ts">
-import TabPanel from 'primevue/tabpanel'
-
-import WorkspacePanelContent from '@/components/dialog/content/setting/WorkspacePanelContent.vue'
-</script>

src/components/dialog/content/setting/WorkspacePanelContent.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="flex h-full w-full flex-col">
-    <div class="pb-8 flex items-center gap-4">
-      <WorkspaceProfilePic
-        class="size-12 !text-3xl"
-        :workspace-name="workspaceName"
-      />
-      <h1 class="text-3xl text-base-foreground">
-        {{ workspaceName }}
-      </h1>
-    </div>
-    <Tabs :value="activeTab" @update:value="setActiveTab">
-      <div class="flex w-full items-center">
-        <TabList class="w-full">
-          <Tab value="plan">{{ $t('workspacePanel.tabs.planCredits') }}</Tab>
-        </TabList>
-
-        <template v-if="permissions.canAccessWorkspaceMenu">
-          <Button
-            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-            variant="muted-textonly"
-            size="icon"
-            :aria-label="$t('g.moreOptions')"
-            @click="menu?.toggle($event)"
-          >
-            <i class="pi pi-ellipsis-h" />
-          </Button>
-          <Menu ref="menu" :model="menuItems" :popup="true">
-            <template #item="{ item }">
-              <div
-                v-tooltip="
-                  item.disabled && deleteTooltip
-                    ? { value: deleteTooltip, showDelay: 0 }
-                    : null
-                "
-                :class="[
-                  'flex items-center gap-2 px-3 py-2',
-                  item.class,
-                  item.disabled ? 'pointer-events-auto' : ''
-                ]"
-                @click="
-                  item.command?.({
-                    originalEvent: $event,
-                    item
-                  })
-                "
-              >
-                <i :class="item.icon" />
-                <span>{{ item.label }}</span>
-              </div>
-            </template>
-          </Menu>
-        </template>
-      </div>
-
-      <TabPanels>
-        <TabPanel value="plan">
-          <SubscriptionPanelContent />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Menu from 'primevue/menu'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
-import Button from '@/components/ui/button/Button.vue'
-import SubscriptionPanelContent from '@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue'
-import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogService } from '@/services/dialogService'
-
-const { defaultTab = 'plan' } = defineProps<{
-  defaultTab?: string
-}>()
-
-const { t } = useI18n()
-const {
-  showLeaveWorkspaceDialog,
-  showDeleteWorkspaceDialog,
-  showEditWorkspaceDialog
-} = useDialogService()
-const workspaceStore = useTeamWorkspaceStore()
-const { workspaceName, isWorkspaceSubscribed } = storeToRefs(workspaceStore)
-
-const { activeTab, setActiveTab, permissions, uiConfig } = useWorkspaceUI()
-
-const menu = ref<InstanceType<typeof Menu> | null>(null)
-
-function handleLeaveWorkspace() {
-  showLeaveWorkspaceDialog()
-}
-
-function handleDeleteWorkspace() {
-  showDeleteWorkspaceDialog()
-}
-
-function handleEditWorkspace() {
-  showEditWorkspaceDialog()
-}
-
-// Disable delete when workspace has an active subscription (to prevent accidental deletion)
-// Use workspace's own subscription status, not the global isActiveSubscription
-const isDeleteDisabled = computed(
-  () =>
-    uiConfig.value.workspaceMenuAction === 'delete' &&
-    isWorkspaceSubscribed.value
-)
-
-const deleteTooltip = computed(() => {
-  if (!isDeleteDisabled.value) return null
-  const tooltipKey = uiConfig.value.workspaceMenuDisabledTooltip
-  return tooltipKey ? t(tooltipKey) : null
-})
-
-const menuItems = computed(() => {
-  const items = []
-
-  // Add edit option for owners
-  if (uiConfig.value.showEditWorkspaceMenuItem) {
-    items.push({
-      label: t('workspacePanel.menu.editWorkspace'),
-      icon: 'pi pi-pencil',
-      command: handleEditWorkspace
-    })
-  }
-
-  const action = uiConfig.value.workspaceMenuAction
-  if (action === 'delete') {
-    items.push({
-      label: t('workspacePanel.menu.deleteWorkspace'),
-      icon: 'pi pi-trash',
-      class: isDeleteDisabled.value
-        ? 'text-danger/50 cursor-not-allowed'
-        : 'text-danger',
-      disabled: isDeleteDisabled.value,
-      command: isDeleteDisabled.value ? undefined : handleDeleteWorkspace
-    })
-  } else if (action === 'leave') {
-    items.push({
-      label: t('workspacePanel.menu.leaveWorkspace'),
-      icon: 'pi pi-sign-out',
-      command: handleLeaveWorkspace
-    })
-  }
-
-  return items
-})
-
-onMounted(() => {
-  setActiveTab(defaultTab)
-})
-</script>

src/components/dialog/content/setting/WorkspaceSidebarItem.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="flex items-center gap-2">
-    <WorkspaceProfilePic
-      class="size-6 text-xs"
-      :workspace-name="workspaceName"
-    />
-
-    <span>{{ workspaceName }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
-import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-
-const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
-</script>

src/components/dialog/content/workspace/CreateWorkspaceDialogContent.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
-  >
-    <!-- Header -->
-    <div
-      class="flex h-12 items-center justify-between border-b border-border-default px-4"
-    >
-      <h2 class="m-0 text-sm font-normal text-base-foreground">
-        {{ $t('workspacePanel.createWorkspaceDialog.title') }}
-      </h2>
-      <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
-        :aria-label="$t('g.close')"
-        @click="onCancel"
-      >
-        <i class="pi pi-times size-4" />
-      </button>
-    </div>
-
-    <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
-      <p class="m-0 text-sm text-muted-foreground">
-        {{ $t('workspacePanel.createWorkspaceDialog.message') }}
-      </p>
-      <div class="flex flex-col gap-2">
-        <label class="text-sm text-base-foreground">
-          {{ $t('workspacePanel.createWorkspaceDialog.nameLabel') }}
-        </label>
-        <input
-          v-model="workspaceName"
-          type="text"
-          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
-          :placeholder="
-            $t('workspacePanel.createWorkspaceDialog.namePlaceholder')
-          "
-          @keydown.enter="isValidName && onCreate()"
-        />
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
-      <Button variant="muted-textonly" @click="onCancel">
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button
-        variant="primary"
-        size="lg"
-        :loading
-        :disabled="!isValidName"
-        @click="onCreate"
-      >
-        {{ $t('workspacePanel.createWorkspaceDialog.create') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const { onConfirm } = defineProps<{
-  onConfirm?: (name: string) => void | Promise<void>
-}>()
-
-const { t } = useI18n()
-const dialogStore = useDialogStore()
-const toast = useToast()
-const workspaceStore = useTeamWorkspaceStore()
-const loading = ref(false)
-const workspaceName = ref('')
-
-const isValidName = computed(() => {
-  const name = workspaceName.value.trim()
-  // Allow alphanumeric, spaces, hyphens, underscores (safe characters)
-  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_]*$/
-  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
-})
-
-function onCancel() {
-  dialogStore.closeDialog({ key: 'create-workspace' })
-}
-
-async function onCreate() {
-  if (!isValidName.value) return
-  loading.value = true
-  try {
-    const name = workspaceName.value.trim()
-    // Call optional callback if provided
-    await onConfirm?.(name)
-    dialogStore.closeDialog({ key: 'create-workspace' })
-    // Create workspace and switch to it (triggers reload internally)
-    await workspaceStore.createWorkspace(name)
-  } catch (error) {
-    console.error('[CreateWorkspaceDialog] Failed to create workspace:', error)
-    toast.add({
-      severity: 'error',
-      summary: t('workspacePanel.toast.failedToCreateWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
-    })
-  } finally {
-    loading.value = false
-  }
-}
-</script>

src/components/dialog/content/workspace/DeleteWorkspaceDialogContent.vue

@@ -1,89 +0,0 @@
-<template>
-  <div
-    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
-  >
-    <!-- Header -->
-    <div
-      class="flex h-12 items-center justify-between border-b border-border-default px-4"
-    >
-      <h2 class="m-0 text-sm font-normal text-base-foreground">
-        {{ $t('workspacePanel.deleteDialog.title') }}
-      </h2>
-      <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
-        :aria-label="$t('g.close')"
-        @click="onCancel"
-      >
-        <i class="pi pi-times size-4" />
-      </button>
-    </div>
-
-    <!-- Body -->
-    <div class="px-4 py-4">
-      <p class="m-0 text-sm text-muted-foreground">
-        {{
-          workspaceName
-            ? $t('workspacePanel.deleteDialog.messageWithName', {
-                name: workspaceName
-              })
-            : $t('workspacePanel.deleteDialog.message')
-        }}
-      </p>
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
-      <Button variant="muted-textonly" @click="onCancel">
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button variant="destructive" size="lg" :loading @click="onDelete">
-        {{ $t('g.delete') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const { workspaceId, workspaceName } = defineProps<{
-  workspaceId?: string
-  workspaceName?: string
-}>()
-
-const { t } = useI18n()
-const toast = useToast()
-const dialogStore = useDialogStore()
-const workspaceStore = useTeamWorkspaceStore()
-const loading = ref(false)
-
-function onCancel() {
-  dialogStore.closeDialog({ key: 'delete-workspace' })
-}
-
-async function onDelete() {
-  loading.value = true
-  try {
-    // Delete workspace (uses workspaceId if provided, otherwise current workspace)
-    await workspaceStore.deleteWorkspace(workspaceId)
-    dialogStore.closeDialog({ key: 'delete-workspace' })
-    window.location.reload()
-  } catch (error) {
-    console.error('[DeleteWorkspaceDialog] Failed to delete workspace:', error)
-    toast.add({
-      severity: 'error',
-      summary: t('workspacePanel.toast.failedToDeleteWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
-    })
-  } finally {
-    loading.value = false
-  }
-}
-</script>

src/components/dialog/content/workspace/EditWorkspaceDialogContent.vue

@@ -1,104 +0,0 @@
-<template>
-  <div
-    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
-  >
-    <!-- Header -->
-    <div
-      class="flex h-12 items-center justify-between border-b border-border-default px-4"
-    >
-      <h2 class="m-0 text-sm font-normal text-base-foreground">
-        {{ $t('workspacePanel.editWorkspaceDialog.title') }}
-      </h2>
-      <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
-        :aria-label="$t('g.close')"
-        @click="onCancel"
-      >
-        <i class="pi pi-times size-4" />
-      </button>
-    </div>
-
-    <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
-      <div class="flex flex-col gap-2">
-        <label class="text-sm text-base-foreground">
-          {{ $t('workspacePanel.editWorkspaceDialog.nameLabel') }}
-        </label>
-        <input
-          v-model="newWorkspaceName"
-          type="text"
-          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
-          @keydown.enter="isValidName && onSave()"
-        />
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
-      <Button variant="muted-textonly" @click="onCancel">
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button
-        variant="primary"
-        size="lg"
-        :loading
-        :disabled="!isValidName"
-        @click="onSave"
-      >
-        {{ $t('workspacePanel.editWorkspaceDialog.save') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const { t } = useI18n()
-const toast = useToast()
-const dialogStore = useDialogStore()
-const workspaceStore = useTeamWorkspaceStore()
-const loading = ref(false)
-const newWorkspaceName = ref(workspaceStore.workspaceName)
-
-const isValidName = computed(() => {
-  const name = newWorkspaceName.value.trim()
-  const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_]*$/
-  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
-})
-
-function onCancel() {
-  dialogStore.closeDialog({ key: 'edit-workspace' })
-}
-
-async function onSave() {
-  if (!isValidName.value) return
-  loading.value = true
-  try {
-    await workspaceStore.updateWorkspaceName(newWorkspaceName.value.trim())
-    dialogStore.closeDialog({ key: 'edit-workspace' })
-    toast.add({
-      severity: 'success',
-      summary: t('workspacePanel.toast.workspaceUpdated.title'),
-      detail: t('workspacePanel.toast.workspaceUpdated.message'),
-      life: 5000
-    })
-  } catch (error) {
-    console.error('[EditWorkspaceDialog] Failed to update workspace:', error)
-    toast.add({
-      severity: 'error',
-      summary: t('workspacePanel.toast.failedToUpdateWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
-    })
-  } finally {
-    loading.value = false
-  }
-}
-</script>

src/components/dialog/content/workspace/LeaveWorkspaceDialogContent.vue

@@ -1,78 +0,0 @@
-<template>
-  <div
-    class="flex w-full max-w-[360px] flex-col rounded-2xl border border-border-default bg-base-background"
-  >
-    <!-- Header -->
-    <div
-      class="flex h-12 items-center justify-between border-b border-border-default px-4"
-    >
-      <h2 class="m-0 text-sm font-normal text-base-foreground">
-        {{ $t('workspacePanel.leaveDialog.title') }}
-      </h2>
-      <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
-        :aria-label="$t('g.close')"
-        @click="onCancel"
-      >
-        <i class="pi pi-times size-4" />
-      </button>
-    </div>
-
-    <!-- Body -->
-    <div class="px-4 py-4">
-      <p class="m-0 text-sm text-muted-foreground">
-        {{ $t('workspacePanel.leaveDialog.message') }}
-      </p>
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
-      <Button variant="muted-textonly" @click="onCancel">
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button variant="destructive" size="lg" :loading @click="onLeave">
-        {{ $t('workspacePanel.leaveDialog.leave') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const { t } = useI18n()
-const toast = useToast()
-const dialogStore = useDialogStore()
-const workspaceStore = useTeamWorkspaceStore()
-const loading = ref(false)
-
-function onCancel() {
-  dialogStore.closeDialog({ key: 'leave-workspace' })
-}
-
-async function onLeave() {
-  loading.value = true
-  try {
-    // leaveWorkspace() handles switching to personal workspace internally and reloads
-    await workspaceStore.leaveWorkspace()
-    dialogStore.closeDialog({ key: 'leave-workspace' })
-    window.location.reload()
-  } catch (error) {
-    console.error('[LeaveWorkspaceDialog] Failed to leave workspace:', error)
-    toast.add({
-      severity: 'error',
-      summary: t('workspacePanel.toast.failedToLeaveWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
-    })
-  } finally {
-    loading.value = false
-  }
-}
-</script>

src/components/queue/QueueOverlayActive.test.ts

@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import QueueOverlayActive from './QueueOverlayActive.vue'
+import * as tooltipConfig from '@/composables/useTooltipConfig'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      sideToolbar: {
+        queueProgressOverlay: {
+          total: 'Total: {percent}',
+          currentNode: 'Current node:',
+          running: 'running',
+          interruptAll: 'Interrupt all running jobs',
+          queuedSuffix: 'queued',
+          clearQueued: 'Clear queued',
+          viewAllJobs: 'View all jobs',
+          cancelJobTooltip: 'Cancel job',
+          clearQueueTooltip: 'Clear queue'
+        }
+      }
+    }
+  }
+})
+
+const tooltipDirectiveStub = {
+  mounted: vi.fn(),
+  updated: vi.fn()
+}
+
+const SELECTORS = {
+  interruptAllButton: 'button[aria-label="Interrupt all running jobs"]',
+  clearQueuedButton: 'button[aria-label="Clear queued"]',
+  summaryRow: '.flex.items-center.gap-2',
+  currentNodeRow: '.flex.items-center.gap-1.text-text-secondary'
+}
+
+const COPY = {
+  viewAllJobs: 'View all jobs'
+}
+
+const mountComponent = (props: Record<string, unknown> = {}) =>
+  mount(QueueOverlayActive, {
+    props: {
+      totalProgressStyle: { width: '65%' },
+      currentNodeProgressStyle: { width: '40%' },
+      totalPercentFormatted: '65%',
+      currentNodePercentFormatted: '40%',
+      currentNodeName: 'Sampler',
+      runningCount: 1,
+      queuedCount: 2,
+      bottomRowClass: 'flex custom-bottom-row',
+      ...props
+    },
+    global: {
+      plugins: [i18n],
+      directives: {
+        tooltip: tooltipDirectiveStub
+      }
+    }
+  })
+
+describe('QueueOverlayActive', () => {
+  it('renders progress metrics and emits actions when buttons clicked', async () => {
+    const wrapper = mountComponent({ runningCount: 2, queuedCount: 3 })
+
+    const progressBars = wrapper.findAll('.absolute.inset-0')
+    expect(progressBars[0].attributes('style')).toContain('width: 65%')
+    expect(progressBars[1].attributes('style')).toContain('width: 40%')
+
+    const content = wrapper.text().replace(/\s+/g, ' ')
+    expect(content).toContain('Total: 65%')
+
+    const [runningSection, queuedSection] = wrapper.findAll(
+      SELECTORS.summaryRow
+    )
+    expect(runningSection.text()).toContain('2')
+    expect(runningSection.text()).toContain('running')
+    expect(queuedSection.text()).toContain('3')
+    expect(queuedSection.text()).toContain('queued')
+
+    const currentNodeSection = wrapper.find(SELECTORS.currentNodeRow)
+    expect(currentNodeSection.text()).toContain('Current node:')
+    expect(currentNodeSection.text()).toContain('Sampler')
+    expect(currentNodeSection.text()).toContain('40%')
+
+    const interruptButton = wrapper.get(SELECTORS.interruptAllButton)
+    await interruptButton.trigger('click')
+    expect(wrapper.emitted('interruptAll')).toHaveLength(1)
+
+    const clearQueuedButton = wrapper.get(SELECTORS.clearQueuedButton)
+    await clearQueuedButton.trigger('click')
+    expect(wrapper.emitted('clearQueued')).toHaveLength(1)
+
+    const buttons = wrapper.findAll('button')
+    const viewAllButton = buttons.find((btn) =>
+      btn.text().includes(COPY.viewAllJobs)
+    )
+    expect(viewAllButton).toBeDefined()
+    await viewAllButton!.trigger('click')
+    expect(wrapper.emitted('viewAllJobs')).toHaveLength(1)
+
+    expect(wrapper.find('.custom-bottom-row').exists()).toBe(true)
+  })
+
+  it('hides action buttons when counts are zero', () => {
+    const wrapper = mountComponent({ runningCount: 0, queuedCount: 0 })
+
+    expect(wrapper.find(SELECTORS.interruptAllButton).exists()).toBe(false)
+    expect(wrapper.find(SELECTORS.clearQueuedButton).exists()).toBe(false)
+  })
+
+  it('builds tooltip configs with translated strings', () => {
+    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
+
+    mountComponent()
+
+    expect(spy).toHaveBeenCalledWith('Cancel job')
+    expect(spy).toHaveBeenCalledWith('Clear queue')
+  })
+})

src/components/queue/QueueOverlayActive.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="flex flex-col gap-3 p-2">
+    <div class="flex flex-col gap-1">
+      <div
+        class="relative h-2 w-full overflow-hidden rounded-full border border-interface-stroke bg-interface-panel-surface"
+      >
+        <div
+          class="absolute inset-0 h-full rounded-full transition-[width]"
+          :style="totalProgressStyle"
+        />
+        <div
+          class="absolute inset-0 h-full rounded-full transition-[width]"
+          :style="currentNodeProgressStyle"
+        />
+      </div>
+      <div class="flex items-start justify-end gap-4 text-[12px] leading-none">
+        <div class="flex items-center gap-1 text-text-primary opacity-90">
+          <i18n-t keypath="sideToolbar.queueProgressOverlay.total">
+            <template #percent>
+              <span class="font-bold">{{ totalPercentFormatted }}</span>
+            </template>
+          </i18n-t>
+        </div>
+        <div class="flex items-center gap-1 text-text-secondary">
+          <span>{{ t('sideToolbar.queueProgressOverlay.currentNode') }}</span>
+          <span class="inline-block max-w-[10rem] truncate">{{
+            currentNodeName
+          }}</span>
+          <span class="flex items-center gap-1">
+            <span>{{ currentNodePercentFormatted }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div :class="bottomRowClass">
+      <div class="flex items-center gap-4 text-[12px] text-text-primary">
+        <div class="flex items-center gap-2">
+          <span class="opacity-90">
+            <span class="font-bold">{{ runningCount }}</span>
+            <span class="ml-1">{{
+              t('sideToolbar.queueProgressOverlay.running')
+            }}</span>
+          </span>
+          <Button
+            v-if="runningCount > 0"
+            v-tooltip.top="cancelJobTooltip"
+            variant="destructive"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
+            @click="$emit('interruptAll')"
+          >
+            <i
+              class="icon-[lucide--x] block size-4 leading-none text-text-primary"
+            />
+          </Button>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <span class="opacity-90">
+            <span class="font-bold">{{ queuedCount }}</span>
+            <span class="ml-1">{{
+              t('sideToolbar.queueProgressOverlay.queuedSuffix')
+            }}</span>
+          </span>
+          <Button
+            v-if="queuedCount > 0"
+            v-tooltip.top="clearQueueTooltip"
+            variant="destructive"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+            @click="$emit('clearQueued')"
+          >
+            <i
+              class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
+            />
+          </Button>
+        </div>
+      </div>
+
+      <Button
+        class="min-w-30 flex-1 px-2 py-0"
+        variant="secondary"
+        size="md"
+        @click="$emit('viewAllJobs')"
+      >
+        {{ t('sideToolbar.queueProgressOverlay.viewAllJobs') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+
+defineProps<{
+  totalProgressStyle: Record<string, string>
+  currentNodeProgressStyle: Record<string, string>
+  totalPercentFormatted: string
+  currentNodePercentFormatted: string
+  currentNodeName: string
+  runningCount: number
+  queuedCount: number
+  bottomRowClass: string
+}>()
+
+defineEmits<{
+  (e: 'interruptAll'): void
+  (e: 'clearQueued'): void
+  (e: 'viewAllJobs'): void
+}>()
+
+const { t } = useI18n()
+const cancelJobTooltip = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.cancelJobTooltip'))
+)
+const clearQueueTooltip = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearQueueTooltip'))
+)
+</script>

src/components/queue/QueueProgressOverlay.vue

@@ -1,11 +1,15 @@
 <template>
   <div
-    v-if="isOverlayVisible"
-    class="flex justify-end w-full pointer-events-none"
+    v-show="isVisible"
+    :class="['flex', 'justify-end', 'w-full', 'pointer-events-none']"
   >
     <div
-      class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border border-interface-stroke bg-interface-panel-surface font-inter shadow-interface"
+      class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
+      :class="containerClass"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
     >
+      <!-- Expanded state -->
       <QueueOverlayExpanded
         v-if="isExpanded"
         v-model:selected-job-tab="selectedJobTab"
@@ -25,6 +29,22 @@
         @delete-item="onDeleteItem"
         @view-item="inspectJobAsset"
       />
+
+      <QueueOverlayActive
+        v-else-if="hasActiveJob"
+        :total-progress-style="totalProgressStyle"
+        :current-node-progress-style="currentNodeProgressStyle"
+        :total-percent-formatted="totalPercentFormatted"
+        :current-node-percent-formatted="currentNodePercentFormatted"
+        :current-node-name="currentNodeName"
+        :running-count="runningCount"
+        :queued-count="queuedCount"
+        :bottom-row-class="bottomRowClass"
+        @interrupt-all="interruptAll"
+        @clear-queued="cancelQueuedWorkflows"
+        @view-all-jobs="viewAllJobs"
+      />
+
       <QueueOverlayEmpty
         v-else-if="completionSummary"
         :summary="completionSummary"
@@ -43,6 +63,7 @@
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
 import QueueOverlayEmpty from '@/components/queue/QueueOverlayEmpty.vue'
 import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
 import QueueClearHistoryDialog from '@/components/queue/dialogs/QueueClearHistoryDialog.vue'
@@ -50,6 +71,7 @@ import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import { useCompletionSummary } from '@/composables/queue/useCompletionSummary'
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobListItem } from '@/composables/queue/useJobList'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
@@ -62,9 +84,17 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
-const { expanded } = defineProps<{
-  expanded?: boolean
-}>()
+type OverlayState = 'hidden' | 'empty' | 'active' | 'expanded'
+
+const props = withDefaults(
+  defineProps<{
+    expanded?: boolean
+    menuHovered?: boolean
+  }>(),
+  {
+    menuHovered: false
+  }
+)
 
 const emit = defineEmits<{
   (e: 'update:expanded', value: boolean): void
@@ -80,11 +110,20 @@ const assetsStore = useAssetsStore()
 const assetSelectionStore = useAssetSelectionStore()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
+const {
+  totalPercentFormatted,
+  currentNodePercentFormatted,
+  totalProgressStyle,
+  currentNodeProgressStyle
+} = useQueueProgress()
+const isHovered = ref(false)
+const isOverlayHovered = computed(() => isHovered.value || props.menuHovered)
 const internalExpanded = ref(false)
 const isExpanded = computed({
-  get: () => (expanded === undefined ? internalExpanded.value : expanded),
+  get: () =>
+    props.expanded === undefined ? internalExpanded.value : props.expanded,
   set: (value) => {
-    if (expanded === undefined) {
+    if (props.expanded === undefined) {
       internalExpanded.value = value
     }
     emit('update:expanded', value)
@@ -92,15 +131,44 @@ const isExpanded = computed({
 })
 
 const { summary: completionSummary, clearSummary } = useCompletionSummary()
-const isOverlayVisible = computed(
-  () => isExpanded.value || completionSummary.value !== null
-)
+const hasCompletionSummary = computed(() => completionSummary.value !== null)
 
 const runningCount = computed(() => queueStore.runningTasks.length)
 const queuedCount = computed(() => queueStore.pendingTasks.length)
 const isExecuting = computed(() => !executionStore.isIdle)
 const hasActiveJob = computed(() => runningCount.value > 0 || isExecuting.value)
 const activeJobsCount = computed(() => runningCount.value + queuedCount.value)
+
+const overlayState = computed<OverlayState>(() => {
+  if (isExpanded.value) return 'expanded'
+  if (hasActiveJob.value) return 'active'
+  if (hasCompletionSummary.value) return 'empty'
+  return 'hidden'
+})
+
+const showBackground = computed(
+  () =>
+    overlayState.value === 'expanded' ||
+    overlayState.value === 'empty' ||
+    (overlayState.value === 'active' && isOverlayHovered.value)
+)
+
+const isVisible = computed(() => overlayState.value !== 'hidden')
+
+const containerClass = computed(() =>
+  showBackground.value
+    ? 'border-interface-stroke bg-interface-panel-surface shadow-interface'
+    : 'border-transparent bg-transparent shadow-none'
+)
+
+const bottomRowClass = computed(
+  () =>
+    `flex items-center justify-end gap-4 transition-opacity duration-200 ease-in-out ${
+      overlayState.value === 'active' && isOverlayHovered.value
+        ? 'opacity-100 pointer-events-auto'
+        : 'opacity-0 pointer-events-none'
+    }`
+)
 const headerTitle = computed(() =>
   hasActiveJob.value
     ? `${activeJobsCount.value} ${t('sideToolbar.queueProgressOverlay.activeJobsSuffix')}`
@@ -120,7 +188,8 @@ const {
   selectedSortMode,
   hasFailedJobs,
   filteredTasks,
-  groupedJobItems
+  groupedJobItems,
+  currentNodeName
 } = useJobList()
 
 const displayedJobGroups = computed(() => groupedJobItems.value)
@@ -157,8 +226,20 @@ const {
   onViewItem: openResultGallery
 } = useResultGallery(() => filteredTasks.value)
 
+const setExpanded = (expanded: boolean) => {
+  isExpanded.value = expanded
+}
+
+const openExpandedFromEmpty = () => {
+  setExpanded(true)
+}
+
+const viewAllJobs = () => {
+  setExpanded(true)
+}
+
 const onSummaryClick = () => {
-  isExpanded.value = true
+  openExpandedFromEmpty()
   clearSummary()
 }
 
@@ -204,6 +285,29 @@ const cancelQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
   executionStore.clearInitializationByPromptIds(pendingPromptIds)
 })
 
+const interruptAll = wrapWithErrorHandlingAsync(async () => {
+  const tasks = queueStore.runningTasks
+  const promptIds = tasks
+    .map((task) => task.promptId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  if (!promptIds.length) return
+
+  // Cloud backend supports cancelling specific jobs via /queue delete,
+  // while /interrupt always targets the "first" job. Use the targeted API
+  // on cloud to ensure we cancel the workflow the user clicked.
+  if (isCloud) {
+    await Promise.all(promptIds.map((id) => api.deleteItem('queue', id)))
+    executionStore.clearInitializationByPromptIds(promptIds)
+    await queueStore.update()
+    return
+  }
+
+  await Promise.all(promptIds.map((id) => api.interrupt(id)))
+  executionStore.clearInitializationByPromptIds(promptIds)
+  await queueStore.update()
+})
+
 const showClearHistoryDialog = () => {
   dialogStore.showDialog({
     key: 'queue-clear-history',

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -5,32 +5,25 @@ import { cn } from '@/utils/tailwindUtil'
 
 import TransitionCollapse from './TransitionCollapse.vue'
 
-const {
-  disabled,
-  label,
-  enableEmptyState,
-  tooltip,
-  class: className
-} = defineProps<{
+const props = defineProps<{
   disabled?: boolean
   label?: string
   enableEmptyState?: boolean
   tooltip?: string
-  class?: string
 }>()
 
 const isCollapse = defineModel<boolean>('collapse', { default: false })
 
-const isExpanded = computed(() => !isCollapse.value && !disabled)
+const isExpanded = computed(() => !isCollapse.value && !props.disabled)
 
 const tooltipConfig = computed(() => {
-  if (!tooltip) return undefined
-  return { value: tooltip, showDelay: 1000 }
+  if (!props.tooltip) return undefined
+  return { value: props.tooltip, showDelay: 1000 }
 })
 </script>
 
 <template>
-  <div :class="cn('flex flex-col bg-comfy-menu-bg', className)">
+  <div class="flex flex-col bg-comfy-menu-bg">
     <div
       class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
     >

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -43,7 +43,7 @@ const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const isEditing = ref(false)
 
 const widgetComponent = computed(() => {
-  const component = getComponent(widget.type)
+  const component = getComponent(widget.type, widget.name)
   return component || WidgetLegacy
 })
 

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="flex h-full flex-col">
-    <!-- Active Jobs Grid -->
-    <div
-      v-if="activeJobItems.length"
-      class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
-      :style="gridStyle"
-    >
-      <ActiveJobCard v-for="job in activeJobItems" :key="job.id" :job="job" />
-    </div>
-
-    <!-- Assets Header -->
-    <div
-      v-if="assets.length"
-      :class="cn('px-2 2xl:px-4', activeJobItems.length && 'mt-2')"
-    >
-      <div
-        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
-      >
-        {{
-          t(
-            assetType === 'input'
-              ? 'sideToolbar.importedAssetsHeader'
-              : 'sideToolbar.generatedAssetsHeader'
-          )
-        }}
-      </div>
-    </div>
-
-    <!-- Assets Grid -->
-    <VirtualGrid
-      class="flex-1"
-      :items="assetItems"
-      :grid-style="gridStyle"
-      @approach-end="emit('approach-end')"
-    >
-      <template #item="{ item }">
-        <MediaAssetCard
-          :asset="item.asset"
-          :selected="isSelected(item.asset.id)"
-          :show-output-count="showOutputCount(item.asset)"
-          :output-count="getOutputCount(item.asset)"
-          @click="emit('select-asset', item.asset)"
-          @context-menu="emit('context-menu', $event, item.asset)"
-          @zoom="emit('zoom', item.asset)"
-          @output-count-click="emit('output-count-click', item.asset)"
-        />
-      </template>
-    </VirtualGrid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import ActiveJobCard from '@/components/sidebar/tabs/assets/ActiveJobCard.vue'
-import { useJobList } from '@/composables/queue/useJobList'
-import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { isActiveJobState } from '@/utils/queueUtil'
-import { cn } from '@/utils/tailwindUtil'
-
-const {
-  assets,
-  isSelected,
-  assetType = 'output',
-  showOutputCount,
-  getOutputCount
-} = defineProps<{
-  assets: AssetItem[]
-  isSelected: (assetId: string) => boolean
-  assetType?: 'input' | 'output'
-  showOutputCount: (asset: AssetItem) => boolean
-  getOutputCount: (asset: AssetItem) => number
-}>()
-
-const emit = defineEmits<{
-  (e: 'select-asset', asset: AssetItem): void
-  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
-  (e: 'approach-end'): void
-  (e: 'zoom', asset: AssetItem): void
-  (e: 'output-count-click', asset: AssetItem): void
-}>()
-
-const { t } = useI18n()
-const { jobItems } = useJobList()
-
-type AssetGridItem = { key: string; asset: AssetItem }
-
-const activeJobItems = computed(() =>
-  jobItems.value.filter((item) => isActiveJobState(item.state))
-)
-
-const assetItems = computed<AssetGridItem[]>(() =>
-  assets.map((asset) => ({
-    key: `asset-${asset.id}`,
-    asset
-  }))
-)
-
-const gridStyle = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-  padding: '0 0.5rem',
-  gap: '0.5rem'
-}
-</script>

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -2,7 +2,7 @@
   <div class="flex h-full flex-col">
     <div
       v-if="activeJobItems.length"
-      class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
+      class="flex max-h-[50%] flex-col gap-2 overflow-y-auto px-2"
     >
       <AssetsListItem
         v-for="job in activeJobItems"
@@ -114,7 +114,7 @@ import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
-import { isActiveJobState } from '@/utils/queueUtil'
+import type { JobState } from '@/types/queue'
 import {
   formatDuration,
   formatSize,
@@ -172,6 +172,12 @@ const listGridStyle = {
   gap: '0.5rem'
 }
 
+function isActiveJobState(state: JobState): boolean {
+  return (
+    state === 'pending' || state === 'initialization' || state === 'running'
+  )
+}
+
 function getAssetPrimaryText(asset: AssetItem): string {
   return truncateFilename(asset.name)
 }

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -105,19 +105,30 @@
           @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
-        <AssetsSidebarGridView
+        <VirtualGrid
           v-else
-          :assets="displayAssets"
-          :is-selected="isSelected"
-          :asset-type="activeTab"
-          :show-output-count="shouldShowOutputCount"
-          :get-output-count="getOutputCount"
-          @select-asset="handleAssetSelect"
-          @context-menu="handleAssetContextMenu"
+          :items="mediaAssetsWithKey"
+          :grid-style="{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            padding: '0 0.5rem',
+            gap: '0.5rem'
+          }"
           @approach-end="handleApproachEnd"
-          @zoom="handleZoomClick"
-          @output-count-click="enterFolderView"
-        />
+        >
+          <template #item="{ item }">
+            <MediaAssetCard
+              :asset="item"
+              :selected="isSelected(item.id)"
+              :show-output-count="shouldShowOutputCount(item)"
+              :output-count="getOutputCount(item)"
+              @click="handleAssetSelect(item)"
+              @context-menu="handleAssetContextMenu"
+              @zoom="handleZoomClick(item)"
+              @output-count-click="enterFolderView(item)"
+            />
+          </template>
+        </VirtualGrid>
       </div>
     </template>
     <template #footer>
@@ -202,7 +213,6 @@
 
 <script setup lang="ts">
 import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
@@ -210,14 +220,15 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
-import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridView.vue'
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
+import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
 import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
@@ -247,7 +258,6 @@ interface JobOutputItem {
 const { t, n } = useI18n()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
-const { activeJobsCount } = storeToRefs(queueStore)
 const executionStore = useExecutionStore()
 const settingStore = useSettingStore()
 
@@ -294,6 +304,9 @@ const formattedExecutionTime = computed(() => {
 })
 
 const queuedCount = computed(() => queueStore.pendingTasks.length)
+const activeJobsCount = computed(
+  () => queueStore.pendingTasks.length + queueStore.runningTasks.length
+)
 const activeJobsLabel = computed(() => {
   const count = activeJobsCount.value
   return t(
@@ -394,14 +407,14 @@ const showLoadingState = computed(
   () =>
     loading.value &&
     displayAssets.value.length === 0 &&
-    activeJobsCount.value === 0
+    (!isListView.value || activeJobsCount.value === 0)
 )
 
 const showEmptyState = computed(
   () =>
     !loading.value &&
     displayAssets.value.length === 0 &&
-    activeJobsCount.value === 0
+    (!isListView.value || activeJobsCount.value === 0)
 )
 
 watch(displayAssets, (newAssets) => {
@@ -443,6 +456,14 @@ const galleryItems = computed(() => {
   })
 })
 
+// Add key property for VirtualGrid
+const mediaAssetsWithKey = computed(() => {
+  return displayAssets.value.map((asset) => ({
+    ...asset,
+    key: asset.id
+  }))
+})
+
 const refreshAssets = async () => {
   await currentAssets.value.fetchMediaList()
   if (error.value) {

src/components/sidebar/tabs/assets/ActiveJobCard.test.ts

@@ -1,111 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import ActiveJobCard from './ActiveJobCard.vue'
-
-import type { JobListItem } from '@/composables/queue/useJobList'
-
-vi.mock('@/composables/useProgressBarBackground', () => ({
-  useProgressBarBackground: () => ({
-    progressBarPrimaryClass: 'bg-blue-500',
-    hasProgressPercent: (val: number | undefined) => typeof val === 'number',
-    progressPercentStyle: (val: number) => ({ width: `${val}%` })
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      sideToolbar: {
-        activeJobStatus: 'Active job: {status}'
-      }
-    }
-  }
-})
-
-const createJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
-  id: 'test-job-1',
-  title: 'Running...',
-  meta: 'Step 5/10',
-  state: 'running',
-  progressTotalPercent: 50,
-  progressCurrentPercent: 75,
-  ...overrides
-})
-
-const mountComponent = (job: JobListItem) =>
-  mount(ActiveJobCard, {
-    props: { job },
-    global: {
-      plugins: [i18n]
-    }
-  })
-
-describe('ActiveJobCard', () => {
-  it('displays percentage and progress bar when job is running', () => {
-    const wrapper = mountComponent(
-      createJob({ state: 'running', progressTotalPercent: 65 })
-    )
-
-    expect(wrapper.text()).toContain('65%')
-    const progressBar = wrapper.find('.bg-blue-500')
-    expect(progressBar.exists()).toBe(true)
-    expect(progressBar.attributes('style')).toContain('width: 65%')
-  })
-
-  it('displays status text when job is pending', () => {
-    const wrapper = mountComponent(
-      createJob({
-        state: 'pending',
-        title: 'In queue...',
-        progressTotalPercent: undefined
-      })
-    )
-
-    expect(wrapper.text()).toContain('In queue...')
-    const progressBar = wrapper.find('.bg-blue-500')
-    expect(progressBar.exists()).toBe(false)
-  })
-
-  it('shows spinner for pending state', () => {
-    const wrapper = mountComponent(createJob({ state: 'pending' }))
-
-    const spinner = wrapper.find('.icon-\\[lucide--loader-circle\\]')
-    expect(spinner.exists()).toBe(true)
-    expect(spinner.classes()).toContain('animate-spin')
-  })
-
-  it('shows error icon for failed state', () => {
-    const wrapper = mountComponent(
-      createJob({ state: 'failed', title: 'Failed' })
-    )
-
-    const errorIcon = wrapper.find('.icon-\\[lucide--circle-alert\\]')
-    expect(errorIcon.exists()).toBe(true)
-    expect(wrapper.text()).toContain('Failed')
-  })
-
-  it('shows preview image when running with iconImageUrl', () => {
-    const wrapper = mountComponent(
-      createJob({
-        state: 'running',
-        iconImageUrl: 'https://example.com/preview.jpg'
-      })
-    )
-
-    const img = wrapper.find('img')
-    expect(img.exists()).toBe(true)
-    expect(img.attributes('src')).toBe('https://example.com/preview.jpg')
-  })
-
-  it('has proper accessibility attributes', () => {
-    const wrapper = mountComponent(createJob({ title: 'Generating...' }))
-
-    const container = wrapper.find('[role="status"]')
-    expect(container.exists()).toBe(true)
-    expect(container.attributes('aria-label')).toBe('Active job: Generating...')
-  })
-})

src/components/sidebar/tabs/assets/ActiveJobCard.vue

@@ -1,85 +0,0 @@
-<template>
-  <div
-    role="status"
-    :aria-label="t('sideToolbar.activeJobStatus', { status: statusText })"
-    class="flex flex-col gap-2 p-2 rounded-lg"
-  >
-    <!-- Thumbnail -->
-    <div class="relative aspect-square overflow-hidden rounded-lg">
-      <!-- Running state with preview image -->
-      <img
-        v-if="isRunning && job.iconImageUrl"
-        :src="job.iconImageUrl"
-        :alt="statusText"
-        class="size-full object-cover"
-      />
-      <!-- Placeholder for queued/failed states or running without preview -->
-      <div
-        v-else
-        class="absolute inset-0 flex items-center justify-center bg-modal-card-placeholder-background"
-      >
-        <!-- Spinner for queued/initialization states -->
-        <i
-          v-if="isQueued"
-          class="icon-[lucide--loader-circle] size-8 animate-spin text-muted-foreground"
-        />
-        <!-- Error icon for failed state -->
-        <i
-          v-else-if="isFailed"
-          class="icon-[lucide--circle-alert] size-8 text-red-500"
-        />
-        <!-- Spinner for running without preview -->
-        <i
-          v-else
-          class="icon-[lucide--loader-circle] size-8 animate-spin text-muted-foreground"
-        />
-      </div>
-    </div>
-
-    <!-- Footer: Progress bar or status text -->
-    <div class="flex gap-1.5 items-center h-5">
-      <!-- Running state: percentage + progress bar -->
-      <template v-if="isRunning && hasProgressPercent(progressPercent)">
-        <span class="shrink-0 text-sm text-muted-foreground">
-          {{ Math.round(progressPercent ?? 0) }}%
-        </span>
-        <div class="flex-1 relative h-1 rounded-sm bg-secondary-background">
-          <div
-            :class="progressBarPrimaryClass"
-            :style="progressPercentStyle(progressPercent)"
-          />
-        </div>
-      </template>
-      <!-- Non-running states: status text only -->
-      <template v-else>
-        <div class="w-full truncate text-center text-sm text-muted-foreground">
-          {{ statusText }}
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import type { JobListItem } from '@/composables/queue/useJobList'
-import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
-
-const { job } = defineProps<{ job: JobListItem }>()
-
-const { t } = useI18n()
-
-const { progressBarPrimaryClass, hasProgressPercent, progressPercentStyle } =
-  useProgressBarBackground()
-
-const statusText = computed(() => job.title)
-const progressPercent = computed(() => job.progressTotalPercent)
-
-const isQueued = computed(
-  () => job.state === 'pending' || job.state === 'initialization'
-)
-const isRunning = computed(() => job.state === 'running')
-const isFailed = computed(() => job.state === 'failed')
-</script>

src/components/topbar/CurrentUserButton.vue

@@ -1,4 +1,4 @@
-<!-- A button that shows workspace icon (Cloud) or user avatar -->
+<!-- A button that shows current authenticated user's avatar -->
 <template>
   <div>
     <Button
@@ -16,16 +16,7 @@
           )
         "
       >
-        <WorkspaceProfilePic
-          v-if="showWorkspaceIcon"
-          :workspace-name="workspaceName"
-          :class="compact && 'size-full'"
-        />
-        <UserAvatar
-          v-else
-          :photo-url="photoURL"
-          :class="compact && 'size-full'"
-        />
+        <UserAvatar :photo-url="photoURL" :class="compact && 'size-full'" />
 
         <i v-if="showArrow" class="icon-[lucide--chevron-down] size-3 px-1" />
       </div>
@@ -36,65 +27,38 @@
       :show-arrow="false"
       :pt="{
         root: {
-          class: 'rounded-lg w-80'
+          class: 'rounded-lg'
         }
       }"
     >
-      <!-- Workspace mode: workspace-aware popover -->
-      <CurrentUserPopoverWorkspace
-        v-if="teamWorkspacesEnabled"
-        @close="closePopover"
-      />
-      <!-- Legacy mode: original popover -->
-      <CurrentUserPopover v-else @close="closePopover" />
+      <CurrentUserPopover @close="closePopover" />
     </Popover>
   </div>
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import Popover from 'primevue/popover'
-import { computed, defineAsyncComponent, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
-import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import CurrentUserPopover from './CurrentUserPopover.vue'
 
-const CurrentUserPopoverWorkspace = defineAsyncComponent(
-  () => import('./CurrentUserPopoverWorkspace.vue')
-)
-
 const { showArrow = true, compact = false } = defineProps<{
   showArrow?: boolean
   compact?: boolean
 }>()
 
-const { flags } = useFeatureFlags()
-const teamWorkspacesEnabled = computed(() => flags.teamWorkspacesEnabled)
-
 const { isLoggedIn, userPhotoUrl } = useCurrentUser()
 
+const popover = ref<InstanceType<typeof Popover> | null>(null)
 const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
 
-const showWorkspaceIcon = computed(() => isCloud && teamWorkspacesEnabled.value)
-
-const workspaceName = computed(() => {
-  if (!showWorkspaceIcon.value) return ''
-  const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
-  return workspaceName.value
-})
-
-const popover = ref<InstanceType<typeof Popover> | null>(null)
-
 const closePopover = () => {
   popover.value?.hide()
 }

src/components/topbar/CurrentUserPopoverWorkspace.vue

@@ -1,337 +0,0 @@
-<!-- A popover that shows current user information and actions -->
-<template>
-  <div
-    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
-  >
-    <!-- User Info Section -->
-    <div class="flex flex-col items-center px-0 py-3 mb-4">
-      <UserAvatar
-        class="mb-1"
-        :photo-url="userPhotoUrl"
-        :pt:icon:class="{
-          'text-2xl!': !userPhotoUrl
-        }"
-        size="large"
-      />
-
-      <!-- User Details -->
-      <h3 class="my-0 mb-1 truncate text-base font-bold text-base-foreground">
-        {{ userDisplayName || $t('g.user') }}
-      </h3>
-      <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
-        {{ userEmail }}
-      </p>
-    </div>
-
-    <!-- Workspace Selector -->
-    <div
-      class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 hover:bg-secondary-background-hover"
-      @click="toggleWorkspaceSwitcher"
-    >
-      <div class="flex min-w-0 flex-1 items-center gap-2">
-        <WorkspaceProfilePic
-          class="size-6 shrink-0 text-xs"
-          :workspace-name="workspaceName"
-        />
-        <span class="truncate text-sm text-base-foreground">{{
-          workspaceName
-        }}</span>
-        <div
-          v-if="workspaceTierName"
-          class="shrink-0 rounded bg-secondary-background-hover px-1.5 py-0.5 text-xs"
-        >
-          {{ workspaceTierName }}
-        </div>
-        <span v-else class="shrink-0 text-xs text-muted-foreground">
-          {{ $t('workspaceSwitcher.subscribe') }}
-        </span>
-      </div>
-      <i class="pi pi-chevron-down shrink-0 text-sm text-muted-foreground" />
-    </div>
-
-    <Popover
-      ref="workspaceSwitcherPopover"
-      append-to="body"
-      :pt="{
-        content: {
-          class: 'p-0'
-        }
-      }"
-    >
-      <WorkspaceSwitcherPopover
-        @select="workspaceSwitcherPopover?.hide()"
-        @create="handleCreateWorkspace"
-      />
-    </Popover>
-
-    <!-- Credits Section (PERSONAL and OWNER only) -->
-    <template v-if="showCreditsSection">
-      <div class="flex items-center gap-2 px-4 py-2">
-        <i class="icon-[lucide--component] text-sm text-amber-400" />
-        <Skeleton
-          v-if="isLoadingBalance"
-          width="4rem"
-          height="1.25rem"
-          class="w-full"
-        />
-        <span v-else class="text-base font-semibold text-base-foreground">{{
-          displayedCredits
-        }}</span>
-        <i
-          v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-          class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
-        />
-        <!-- Subscribed: Show Add Credits button -->
-        <Button
-          v-if="isActiveSubscription && isWorkspaceSubscribed"
-          variant="secondary"
-          size="sm"
-          class="text-base-foreground"
-          data-testid="add-credits-button"
-          @click="handleTopUp"
-        >
-          {{ $t('subscription.addCredits') }}
-        </Button>
-        <!-- Unsubscribed: Show Subscribe button (disabled until billing is ready) -->
-        <SubscribeButton
-          v-else
-          disabled
-          :fluid="false"
-          :label="$t('workspaceSwitcher.subscribe')"
-          size="sm"
-          variant="gradient"
-        />
-      </div>
-
-      <Divider class="mx-0 my-2" />
-    </template>
-
-    <!-- Plans & Pricing (PERSONAL and OWNER only) -->
-    <div
-      v-if="showPlansAndPricing"
-      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
-      data-testid="plans-pricing-menu-item"
-      @click="handleOpenPlansAndPricing"
-    >
-      <i class="icon-[lucide--receipt-text] text-sm text-muted-foreground" />
-      <span class="flex-1 text-sm text-base-foreground">{{
-        $t('subscription.plansAndPricing')
-      }}</span>
-      <span
-        v-if="canUpgrade"
-        class="rounded-full bg-base-foreground px-1.5 py-0.5 text-xs font-bold text-base-background"
-      >
-        {{ $t('subscription.upgrade') }}
-      </span>
-    </div>
-
-    <!-- Manage Plan (PERSONAL and OWNER, only if subscribed) -->
-    <div
-      v-if="showManagePlan"
-      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
-      data-testid="manage-plan-menu-item"
-      @click="handleOpenPlanAndCreditsSettings"
-    >
-      <i class="icon-[lucide--file-text] text-sm text-muted-foreground" />
-      <span class="flex-1 text-sm text-base-foreground">{{
-        $t('subscription.managePlan')
-      }}</span>
-    </div>
-
-    <!-- Partner Nodes Pricing (always shown) -->
-    <div
-      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
-      data-testid="partner-nodes-menu-item"
-      @click="handleOpenPartnerNodesInfo"
-    >
-      <i class="icon-[lucide--tag] text-sm text-muted-foreground" />
-      <span class="flex-1 text-sm text-base-foreground">{{
-        $t('subscription.partnerNodesCredits')
-      }}</span>
-    </div>
-
-    <Divider class="mx-0 my-2" />
-
-    <!-- Workspace Settings (always shown) -->
-    <div
-      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
-      data-testid="workspace-settings-menu-item"
-      @click="handleOpenWorkspaceSettings"
-    >
-      <i class="icon-[lucide--users] text-sm text-muted-foreground" />
-      <span class="flex-1 text-sm text-base-foreground">{{
-        $t('userSettings.workspaceSettings')
-      }}</span>
-    </div>
-
-    <!-- Account Settings (always shown) -->
-    <div
-      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
-      data-testid="user-settings-menu-item"
-      @click="handleOpenUserSettings"
-    >
-      <i class="icon-[lucide--settings-2] text-sm text-muted-foreground" />
-      <span class="flex-1 text-sm text-base-foreground">{{
-        $t('userSettings.accountSettings')
-      }}</span>
-    </div>
-
-    <Divider class="mx-0 my-2" />
-
-    <!-- Logout (always shown) -->
-    <div
-      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
-      data-testid="logout-menu-item"
-      @click="handleLogout"
-    >
-      <i class="icon-[lucide--log-out] text-sm text-muted-foreground" />
-      <span class="flex-1 text-sm text-base-foreground">{{
-        $t('auth.signOut.signOut')
-      }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import Divider from 'primevue/divider'
-import Popover from 'primevue/popover'
-import Skeleton from 'primevue/skeleton'
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import UserAvatar from '@/components/common/UserAvatar.vue'
-import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
-import WorkspaceSwitcherPopover from '@/components/topbar/WorkspaceSwitcherPopover.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useExternalLink } from '@/composables/useExternalLink'
-import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
-import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
-import { isCloud } from '@/platform/distribution/types'
-import { useTelemetry } from '@/platform/telemetry'
-import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogService } from '@/services/dialogService'
-
-const workspaceStore = useTeamWorkspaceStore()
-const {
-  workspaceName,
-  isInPersonalWorkspace: isPersonalWorkspace,
-  isWorkspaceSubscribed,
-  subscriptionPlan
-} = storeToRefs(workspaceStore)
-const { workspaceRole } = useWorkspaceUI()
-const workspaceSwitcherPopover = ref<InstanceType<typeof Popover> | null>(null)
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const { buildDocsUrl, docsPaths } = useExternalLink()
-
-const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
-  useCurrentUser()
-const authActions = useFirebaseAuthActions()
-const dialogService = useDialogService()
-const { isActiveSubscription } = useSubscription()
-const { totalCredits, isLoadingBalance } = useSubscriptionCredits()
-const subscriptionDialog = useSubscriptionDialog()
-const { t } = useI18n()
-
-const displayedCredits = computed(() =>
-  isWorkspaceSubscribed.value ? totalCredits.value : '0'
-)
-
-// Workspace subscription tier name (not user tier)
-const workspaceTierName = computed(() => {
-  if (!isWorkspaceSubscribed.value) return null
-  if (!subscriptionPlan.value) return null
-  // Convert plan to display name
-  if (subscriptionPlan.value === 'PRO_MONTHLY')
-    return t('subscription.tiers.pro.name')
-  if (subscriptionPlan.value === 'PRO_YEARLY')
-    return t('subscription.tierNameYearly', {
-      name: t('subscription.tiers.pro.name')
-    })
-  return null
-})
-
-const canUpgrade = computed(() => {
-  // PRO is currently the only/highest tier, so no upgrades available
-  // This will need updating when additional tiers are added
-  return false
-})
-
-const showPlansAndPricing = computed(
-  () => isPersonalWorkspace.value || workspaceRole.value === 'owner'
-)
-const showManagePlan = computed(
-  () => showPlansAndPricing.value && isActiveSubscription.value
-)
-const showCreditsSection = computed(
-  () => isPersonalWorkspace.value || workspaceRole.value === 'owner'
-)
-
-const handleOpenUserSettings = () => {
-  dialogService.showSettingsDialog('user')
-  emit('close')
-}
-
-const handleOpenWorkspaceSettings = () => {
-  dialogService.showSettingsDialog('workspace')
-  emit('close')
-}
-
-const handleOpenPlansAndPricing = () => {
-  subscriptionDialog.show()
-  emit('close')
-}
-
-const handleOpenPlanAndCreditsSettings = () => {
-  if (isCloud) {
-    dialogService.showSettingsDialog('workspace')
-  } else {
-    dialogService.showSettingsDialog('credits')
-  }
-
-  emit('close')
-}
-
-const handleTopUp = () => {
-  // Track purchase credits entry from avatar popover
-  useTelemetry()?.trackAddApiCreditButtonClicked()
-  dialogService.showTopUpCreditsDialog()
-  emit('close')
-}
-
-const handleOpenPartnerNodesInfo = () => {
-  window.open(
-    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
-    '_blank'
-  )
-  emit('close')
-}
-
-const handleLogout = async () => {
-  await handleSignOut()
-  emit('close')
-}
-
-const handleCreateWorkspace = () => {
-  workspaceSwitcherPopover.value?.hide()
-  dialogService.showCreateWorkspaceDialog()
-  emit('close')
-}
-
-const toggleWorkspaceSwitcher = (event: MouseEvent) => {
-  workspaceSwitcherPopover.value?.toggle(event)
-}
-
-onMounted(() => {
-  void authActions.fetchBalance()
-})
-</script>

src/components/topbar/WorkspaceSwitcherPopover.vue

@@ -1,166 +0,0 @@
-<template>
-  <div class="flex w-80 flex-col overflow-hidden rounded-lg">
-    <div class="flex flex-col overflow-y-auto">
-      <!-- Loading state -->
-      <div v-if="isFetchingWorkspaces" class="flex flex-col gap-2 p-2">
-        <div
-          v-for="i in 2"
-          :key="i"
-          class="flex h-[54px] animate-pulse items-center gap-2 rounded px-2 py-4"
-        >
-          <div class="size-8 rounded-full bg-secondary-background" />
-          <div class="flex flex-1 flex-col gap-1">
-            <div class="h-4 w-24 rounded bg-secondary-background" />
-            <div class="h-3 w-16 rounded bg-secondary-background" />
-          </div>
-        </div>
-      </div>
-
-      <!-- Workspace list -->
-      <template v-else>
-        <template v-for="workspace in availableWorkspaces" :key="workspace.id">
-          <div class="border-b border-border-default p-2">
-            <div
-              :class="
-                cn(
-                  'group flex h-[54px] w-full items-center gap-2 rounded px-2 py-4',
-                  'hover:bg-secondary-background-hover',
-                  isCurrentWorkspace(workspace) && 'bg-secondary-background'
-                )
-              "
-            >
-              <button
-                class="flex flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0"
-                @click="handleSelectWorkspace(workspace)"
-              >
-                <WorkspaceProfilePic
-                  class="size-8 text-sm"
-                  :workspace-name="workspace.name"
-                />
-                <div class="flex min-w-0 flex-1 flex-col items-start gap-1">
-                  <span class="text-sm text-base-foreground">
-                    {{ workspace.name }}
-                  </span>
-                  <span
-                    v-if="workspace.type !== 'personal'"
-                    class="text-sm text-muted-foreground"
-                  >
-                    {{ getRoleLabel(workspace.role) }}
-                  </span>
-                </div>
-                <i
-                  v-if="isCurrentWorkspace(workspace)"
-                  class="pi pi-check text-sm text-base-foreground"
-                />
-              </button>
-            </div>
-          </div>
-        </template>
-      </template>
-
-      <!-- <Divider class="mx-0 my-0" /> -->
-
-      <!-- Create workspace button -->
-      <div class="px-2 py-2">
-        <div
-          :class="
-            cn(
-              'flex h-12 w-full items-center gap-2 rounded px-2 py-2',
-              canCreateWorkspace
-                ? 'cursor-pointer hover:bg-secondary-background-hover'
-                : 'cursor-default'
-            )
-          "
-          @click="canCreateWorkspace && handleCreateWorkspace()"
-        >
-          <div
-            :class="
-              cn(
-                'flex size-8 items-center justify-center rounded-full bg-secondary-background',
-                !canCreateWorkspace && 'opacity-50'
-              )
-            "
-          >
-            <i class="pi pi-plus text-sm text-muted-foreground" />
-          </div>
-          <div class="flex min-w-0 flex-1 flex-col">
-            <span
-              v-if="canCreateWorkspace"
-              class="text-sm text-muted-foreground"
-            >
-              {{ $t('workspaceSwitcher.createWorkspace') }}
-            </span>
-            <span v-else class="text-sm text-muted-foreground">
-              {{ $t('workspaceSwitcher.maxWorkspacesReached') }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
-import { useWorkspaceSwitch } from '@/platform/auth/workspace/useWorkspaceSwitch'
-import type {
-  WorkspaceRole,
-  WorkspaceType
-} from '@/platform/workspace/api/workspaceApi'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-
-import { cn } from '@/utils/tailwindUtil'
-
-interface AvailableWorkspace {
-  id: string
-  name: string
-  type: WorkspaceType
-  role: WorkspaceRole
-}
-
-const emit = defineEmits<{
-  select: [workspace: AvailableWorkspace]
-  create: []
-}>()
-
-const { t } = useI18n()
-const { switchWithConfirmation } = useWorkspaceSwitch()
-
-const workspaceStore = useTeamWorkspaceStore()
-const { workspaceId, workspaces, canCreateWorkspace, isFetchingWorkspaces } =
-  storeToRefs(workspaceStore)
-
-const availableWorkspaces = computed<AvailableWorkspace[]>(() =>
-  workspaces.value.map((w) => ({
-    id: w.id,
-    name: w.name,
-    type: w.type,
-    role: w.role
-  }))
-)
-
-function isCurrentWorkspace(workspace: AvailableWorkspace): boolean {
-  return workspace.id === workspaceId.value
-}
-
-function getRoleLabel(role: AvailableWorkspace['role']): string {
-  if (role === 'owner') return t('workspaceSwitcher.roleOwner')
-  if (role === 'member') return t('workspaceSwitcher.roleMember')
-  return ''
-}
-
-async function handleSelectWorkspace(workspace: AvailableWorkspace) {
-  const success = await switchWithConfirmation(workspace.id)
-  if (success) {
-    emit('select', workspace)
-  }
-}
-
-function handleCreateWorkspace() {
-  emit('create')
-}
-</script>

src/components/ui/AGENTS.md

@@ -1,19 +0,0 @@
-# UI Component Guidelines
-
-## Adding New Components
-
-```bash
-pnpm dlx shadcn-vue@latest add <component-name> --yes
-```
-
-After adding, create `ComponentName.stories.ts` with Default, Disabled, and variant stories.
-
-## Reka UI Wrapper Components
-
-- Use reactive props destructuring with rest: `const { class: className, ...restProps } = defineProps<Props>()`
-- Use `useForwardProps(restProps)` for prop forwarding, or `computed()` if adding defaults
-- Import siblings directly (`./Component.vue`), not from barrel (`'.'`)
-- Use `cn()` for class merging with `className`
-- Use Iconify icons: `<i class="icon-[lucide--check]" />`
-- Use design tokens: `bg-secondary-background`, `text-muted-foreground`, `border-border-default`
-- Tailwind 4 CSS variables use parentheses: `h-(--my-var)` not `h-[--my-var]`

src/components/ui/select/Select.stories.ts

@@ -1,261 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import Select from './Select.vue'
-import SelectContent from './SelectContent.vue'
-import SelectGroup from './SelectGroup.vue'
-import SelectItem from './SelectItem.vue'
-import SelectLabel from './SelectLabel.vue'
-import SelectSeparator from './SelectSeparator.vue'
-import SelectTrigger from './SelectTrigger.vue'
-import SelectValue from './SelectValue.vue'
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text',
-      description: 'Selected value'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'When true, disables the select'
-    },
-    'onUpdate:modelValue': { action: 'update:modelValue' }
-  }
-} satisfies Meta<typeof Select>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref(args.modelValue || '')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="cherry">Cherry</SelectItem>
-          <SelectItem value="grape">Grape</SelectItem>
-          <SelectItem value="orange">Orange</SelectItem>
-        </SelectContent>
-      </Select>
-      <div class="mt-4 text-sm text-muted-foreground">
-        Selected: {{ value || 'None' }}
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const WithPlaceholder: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Choose an option..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-          <SelectItem value="option3">Option 3</SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const Disabled: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('apple')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" disabled>
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="cherry">Cherry</SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  })
-}
-
-export const WithGroups: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectGroup,
-      SelectItem,
-      SelectLabel,
-      SelectSeparator,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select a model type" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Checkpoints</SelectLabel>
-            <SelectItem value="sd15">SD 1.5</SelectItem>
-            <SelectItem value="sdxl">SDXL</SelectItem>
-            <SelectItem value="flux">Flux</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>LoRAs</SelectLabel>
-            <SelectItem value="lora-style">Style LoRA</SelectItem>
-            <SelectItem value="lora-character">Character LoRA</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Other</SelectLabel>
-            <SelectItem value="vae">VAE</SelectItem>
-            <SelectItem value="embedding">Embedding</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <div class="mt-4 text-sm text-muted-foreground">
-        Selected: {{ value || 'None' }}
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const Scrollable: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      const items = Array.from({ length: 20 }, (_, i) => ({
-        value: `item-${i + 1}`,
-        label: `Option ${i + 1}`
-      }))
-      return { value, items, args }
-    },
-    template: `
-      <Select v-model="value" :disabled="args.disabled">
-        <SelectTrigger class="w-56">
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem
-            v-for="item in items"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.label }}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}
-
-export const CustomWidth: Story = {
-  render: (args) => ({
-    components: {
-      Select,
-      SelectContent,
-      SelectItem,
-      SelectTrigger,
-      SelectValue
-    },
-    setup() {
-      const value = ref('')
-      return { value, args }
-    },
-    template: `
-      <div class="space-y-4">
-        <Select v-model="value" :disabled="args.disabled">
-          <SelectTrigger class="w-32">
-            <SelectValue placeholder="Small" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="a">A</SelectItem>
-            <SelectItem value="b">B</SelectItem>
-            <SelectItem value="c">C</SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Select v-model="value" :disabled="args.disabled">
-          <SelectTrigger class="w-full">
-            <SelectValue placeholder="Full width select" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    `
-  }),
-  args: {
-    disabled: false
-  }
-}

src/components/ui/select/Select.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
-import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
-
-// eslint-disable-next-line vue/no-unused-properties
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <SelectRoot v-bind="forwarded">
-    <slot />
-  </SelectRoot>
-</template>

src/components/ui/select/SelectContent.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
-import {
-  SelectContent,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits
-} from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-import SelectScrollDownButton from './SelectScrollDownButton.vue'
-import SelectScrollUpButton from './SelectScrollUpButton.vue'
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const {
-  position = 'popper',
-  class: className,
-  ...restProps
-} = defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<SelectContentEmits>()
-
-const delegatedProps = computed(() => ({
-  position,
-  ...restProps
-}))
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SelectPortal>
-    <SelectContent
-      v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-        cn(
-          'relative z-3000 max-h-96 min-w-32 overflow-hidden',
-          'mt-2 rounded-lg p-2',
-          'bg-base-background text-base-foreground',
-          'border border-solid border-border-default',
-          'shadow-md',
-          'data-[state=open]:animate-in data-[state=closed]:animate-out',
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className
-        )
-      "
-    >
-      <SelectScrollUpButton />
-      <SelectViewport
-        :class="
-          cn(
-            'scrollbar-custom flex flex-col gap-0',
-            position === 'popper' &&
-              'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)'
-          )
-        "
-      >
-        <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
-    </SelectContent>
-  </SelectPortal>
-</template>

src/components/ui/select/SelectGroup.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { SelectGroupProps } from 'reka-ui'
-import { SelectGroup } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectGroupProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectGroup :class="cn('w-full', className)" v-bind="restProps">
-    <slot />
-  </SelectGroup>
-</template>

src/components/ui/select/SelectItem.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import type { SelectItemProps } from 'reka-ui'
-import { SelectItem, SelectItemIndicator, SelectItemText } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectItemProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectItem
-    v-bind="restProps"
-    :class="
-      cn(
-        'relative flex w-full cursor-pointer select-none items-center justify-between',
-        'gap-3 rounded px-2 py-3 text-sm outline-none',
-        'hover:bg-secondary-background-hover',
-        'focus:bg-secondary-background-hover',
-        'data-[state=checked]:bg-secondary-background-selected',
-        'data-[state=checked]:hover:bg-secondary-background-selected',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        className
-      )
-    "
-  >
-    <SelectItemText class="truncate">
-      <slot />
-    </SelectItemText>
-
-    <SelectItemIndicator class="flex shrink-0 items-center justify-center">
-      <i class="icon-[lucide--check] text-base-foreground" aria-hidden="true" />
-    </SelectItemIndicator>
-  </SelectItem>
-</template>

src/components/ui/select/SelectLabel.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { SelectLabelProps } from 'reka-ui'
-import { SelectLabel } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectLabelProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectLabel
-    v-bind="restProps"
-    :class="
-      cn(
-        'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground',
-        className
-      )
-    "
-  >
-    <slot />
-  </SelectLabel>
-</template>

src/components/ui/select/SelectScrollDownButton.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { SelectScrollDownButtonProps } from 'reka-ui'
-import { SelectScrollDownButton } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectScrollDownButton
-    v-bind="restProps"
-    :class="
-      cn(
-        'flex cursor-default items-center justify-center py-1 text-muted-foreground',
-        className
-      )
-    "
-  >
-    <slot>
-      <i class="icon-[lucide--chevron-down]" />
-    </slot>
-  </SelectScrollDownButton>
-</template>

src/components/ui/select/SelectScrollUpButton.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { SelectScrollUpButtonProps } from 'reka-ui'
-import { SelectScrollUpButton } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectScrollUpButton
-    v-bind="restProps"
-    :class="
-      cn(
-        'flex cursor-default items-center justify-center py-1 text-muted-foreground',
-        className
-      )
-    "
-  >
-    <slot>
-      <i class="icon-[lucide--chevron-up]" />
-    </slot>
-  </SelectScrollUpButton>
-</template>

src/components/ui/select/SelectSeparator.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { SelectSeparatorProps } from 'reka-ui'
-import { SelectSeparator } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectSeparator
-    v-bind="restProps"
-    :class="cn('-mx-1 my-1 h-px bg-border-default', className)"
-  />
-</template>

src/components/ui/select/SelectTrigger.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { SelectTriggerProps } from 'reka-ui'
-import { SelectIcon, SelectTrigger } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restProps } = defineProps<
-  SelectTriggerProps & { class?: HTMLAttributes['class'] }
->()
-</script>
-
-<template>
-  <SelectTrigger
-    v-bind="restProps"
-    :class="
-      cn(
-        'flex h-10 w-full cursor-pointer select-none items-center justify-between',
-        'rounded-lg px-4 py-2 text-sm',
-        'bg-secondary-background text-base-foreground',
-        'border-[2.5px] border-solid border-transparent',
-        'transition-all duration-200 ease-in-out',
-        'focus:border-node-component-border focus:outline-none',
-        'data-[placeholder]:text-muted-foreground',
-        'disabled:cursor-not-allowed disabled:opacity-60',
-        '[&>span]:truncate',
-        className
-      )
-    "
-  >
-    <slot />
-    <SelectIcon as-child>
-      <i class="icon-[lucide--chevron-down] shrink-0 text-muted-foreground" />
-    </SelectIcon>
-  </SelectTrigger>
-</template>

src/components/ui/select/SelectValue.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { SelectValueProps } from 'reka-ui'
-import { SelectValue } from 'reka-ui'
-
-const props = defineProps<SelectValueProps>()
-</script>
-
-<template>
-  <SelectValue v-bind="props">
-    <slot />
-  </SelectValue>
-</template>

src/components/ui/tags-input/TagsInputInput.vue

@@ -23,11 +23,6 @@ const showInput = computed(() => isEditing.value || isEmpty)
 const { forwardRef, currentElement } = useForwardExpose()
 const registerFocus = inject(tagsInputFocusKey, undefined)
 
-function handleEscape() {
-  currentElement.value?.blur()
-  isEditing.value = false
-}
-
 onMounted(() => {
   registerFocus?.(() => currentElement.value?.focus())
 })
@@ -49,6 +44,5 @@ onUnmounted(() => {
         className
       )
     "
-    @keydown.escape.stop="handleEscape"
   />
 </template>

src/components/widget/layout/BaseModalLayout.vue

@@ -1,128 +1,100 @@
 <template>
-  <div
-    class="base-widget-layout rounded-2xl overflow-hidden relative"
-    @keydown.esc.capture="handleEscape"
-  >
-    <div
-      class="grid h-full w-full transition-[grid-template-columns] duration-300 ease-out"
-      :style="gridStyle"
+  <div class="base-widget-layout rounded-2xl overflow-hidden relative">
+    <Button
+      v-show="!isRightPanelOpen && hasRightPanel"
+      size="lg"
+      :class="
+        cn('absolute top-4 right-18 z-10', 'transition-opacity duration-200', {
+          'opacity-0 pointer-events-none': isRightPanelOpen || !hasRightPanel
+        })
+      "
+      @click="toggleRightPanel"
     >
-      <nav
-        class="h-full overflow-hidden"
-        :inert="!showLeftPanel"
-        :aria-hidden="!showLeftPanel"
-      >
-        <div v-if="hasLeftPanel" class="h-full min-w-40 max-w-56">
-          <slot name="leftPanel" />
-        </div>
-      </nav>
-
-      <div class="flex flex-col bg-base-background overflow-hidden">
-        <header
-          v-if="$slots.header"
-          class="w-full h-18 px-6 flex items-center justify-between gap-2"
+      <i class="icon-[lucide--panel-right]" />
+    </Button>
+    <Button
+      size="lg"
+      class="absolute top-4 right-6 z-10 transition-opacity duration-200 w-10"
+      @click="closeDialog"
+    >
+      <i class="pi pi-times" />
+    </Button>
+    <div class="flex h-full w-full">
+      <Transition name="slide-panel">
+        <nav
+          v-if="$slots.leftPanel && showLeftPanel"
+          :class="[
+            PANEL_SIZES.width,
+            PANEL_SIZES.minWidth,
+            PANEL_SIZES.maxWidth
+          ]"
         >
-          <div class="flex flex-1 shrink-0 gap-2">
-            <Button
-              v-if="!notMobile"
-              size="icon"
-              :aria-label="
-                showLeftPanel ? t('g.hideLeftPanel') : t('g.showLeftPanel')
-              "
-              @click="toggleLeftPanel"
-            >
-              <i
-                :class="
-                  cn(
-                    showLeftPanel
-                      ? 'icon-[lucide--panel-left]'
-                      : 'icon-[lucide--panel-left-close]'
-                  )
-                "
-              />
-            </Button>
-            <slot name="header" />
-          </div>
-          <slot name="header-right-area" />
-          <template v-if="!isRightPanelOpen">
-            <Button
-              v-if="hasRightPanel"
-              size="lg"
-              class="w-10 p-0"
-              :aria-label="t('g.showRightPanel')"
-              @click="toggleRightPanel"
-            >
-              <i class="icon-[lucide--panel-right] size-4" />
-            </Button>
-            <Button
-              size="lg"
-              class="w-10"
-              :aria-label="t('g.closeDialog')"
-              @click="closeDialog"
-            >
-              <i class="pi pi-times" />
-            </Button>
-          </template>
-        </header>
+          <slot name="leftPanel"></slot>
+        </nav>
+      </Transition>
 
-        <main class="flex min-h-0 flex-1 flex-col">
-          <slot name="contentFilter" />
-          <h2
-            v-if="!hasLeftPanel"
-            class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
-          >
-            {{ contentTitle }}
-          </h2>
-          <div
-            class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
-          >
-            <slot name="content" />
-          </div>
-        </main>
-      </div>
-
-      <aside
-        v-if="hasRightPanel"
-        class="overflow-hidden"
-        :inert="!isRightPanelOpen"
-        :aria-hidden="!isRightPanelOpen"
-      >
-        <div
-          class="min-w-72 w-72 flex flex-col bg-modal-panel-background h-full"
-        >
+      <div class="flex-1 flex bg-base-background">
+        <div class="flex h-full w-full flex-col">
           <header
-            data-component-id="RightPanelHeader"
-            class="flex h-18 shrink-0 items-center gap-2 px-6"
+            v-if="$slots.header"
+            class="w-full h-18 px-6 flex items-center justify-between gap-2"
           >
-            <h2 v-if="rightPanelTitle" class="flex-1 text-base font-semibold">
-              {{ rightPanelTitle }}
-            </h2>
-            <div v-else class="flex-1">
-              <slot name="rightPanelHeaderTitle" />
+            <div class="flex flex-1 shrink-0 gap-2">
+              <Button v-if="!notMobile" size="icon" @click="toggleLeftPanel">
+                <i
+                  :class="
+                    cn(
+                      showLeftPanel
+                        ? 'icon-[lucide--panel-left]'
+                        : 'icon-[lucide--panel-left-close]'
+                    )
+                  "
+                />
+              </Button>
+              <slot name="header"></slot>
             </div>
-            <slot name="rightPanelHeaderActions" />
-            <Button
-              size="lg"
-              class="w-10 p-0"
-              :aria-label="t('g.hideRightPanel')"
-              @click="toggleRightPanel"
+            <slot name="header-right-area"></slot>
+            <div
+              :class="
+                cn(
+                  'flex justify-end gap-2 w-0',
+                  hasRightPanel && !isRightPanelOpen ? 'min-w-22' : 'min-w-10'
+                )
+              "
             >
-              <i class="icon-[lucide--panel-right-close] size-4" />
-            </Button>
-            <Button
-              size="lg"
-              class="w-10 p-0"
-              :aria-label="t('g.closeDialog')"
-              @click="closeDialog"
-            >
-              <i class="pi pi-times" />
-            </Button>
+              <Button
+                v-if="isRightPanelOpen && hasRightPanel"
+                size="lg"
+                @click="toggleRightPanel"
+              >
+                <i class="icon-[lucide--panel-right-close]" />
+              </Button>
+            </div>
           </header>
-          <div class="min-h-0 flex-1 overflow-y-auto">
-            <slot name="rightPanel" />
-          </div>
+
+          <main class="flex min-h-0 flex-1 flex-col">
+            <!-- Fallback title bar when no leftPanel is provided -->
+            <slot name="contentFilter"></slot>
+            <h2
+              v-if="!$slots.leftPanel"
+              class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
+            >
+              {{ contentTitle }}
+            </h2>
+            <div
+              class="min-h-0 flex-1 px-6 pt-0 pb-10 overflow-y-auto scrollbar-custom"
+            >
+              <slot name="content"></slot>
+            </div>
+          </main>
         </div>
-      </aside>
+        <aside
+          v-if="hasRightPanel && isRightPanelOpen"
+          class="w-1/4 min-w-40 max-w-80 pt-16 pb-8"
+        >
+          <slot name="rightPanel"></slot>
+        </aside>
+      </div>
     </div>
   </div>
 </template>
@@ -130,29 +102,27 @@
 <script setup lang="ts">
 import { useBreakpoints } from '@vueuse/core'
 import { computed, inject, ref, useSlots, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { OnCloseKey } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 
-const { t } = useI18n()
-
-const { contentTitle, rightPanelTitle } = defineProps<{
+const { contentTitle } = defineProps<{
   contentTitle: string
-  rightPanelTitle?: string
 }>()
 
 const isRightPanelOpen = defineModel<boolean>('rightPanelOpen', {
   default: false
 })
 
-const slots = useSlots()
-const hasLeftPanel = computed(() => !!slots.leftPanel)
-const hasRightPanel = computed(() => !!slots.rightPanel)
-
 const BREAKPOINTS = { md: 880 }
+const PANEL_SIZES = {
+  width: 'w-1/3',
+  minWidth: 'min-w-40',
+  maxWidth: 'max-w-56'
+}
 
+const slots = useSlots()
 const closeDialog = inject(OnCloseKey, () => {})
 
 const breakpoints = useBreakpoints(BREAKPOINTS)
@@ -161,6 +131,8 @@ const notMobile = breakpoints.greater('md')
 const isLeftPanelOpen = ref<boolean>(true)
 const mobileMenuOpen = ref<boolean>(false)
 
+const hasRightPanel = computed(() => !!slots.rightPanel)
+
 watch(notMobile, (isDesktop) => {
   if (!isDesktop) {
     mobileMenuOpen.value = false
@@ -174,12 +146,6 @@ const showLeftPanel = computed(() => {
   return shouldShow
 })
 
-const gridStyle = computed(() => ({
-  gridTemplateColumns: hasRightPanel.value
-    ? `${hasLeftPanel.value && showLeftPanel.value ? '14rem' : '0rem'} 1fr ${isRightPanelOpen.value ? '18rem' : '0rem'}`
-    : `${hasLeftPanel.value && showLeftPanel.value ? '14rem' : '0rem'} 1fr`
-}))
-
 const toggleLeftPanel = () => {
   if (notMobile.value) {
     isLeftPanelOpen.value = !isLeftPanelOpen.value
@@ -191,23 +157,6 @@ const toggleLeftPanel = () => {
 const toggleRightPanel = () => {
   isRightPanelOpen.value = !isRightPanelOpen.value
 }
-
-function handleEscape(event: KeyboardEvent) {
-  const target = event.target
-  if (!(target instanceof HTMLElement)) return
-  if (
-    target instanceof HTMLInputElement ||
-    target instanceof HTMLTextAreaElement ||
-    target instanceof HTMLSelectElement ||
-    target.isContentEditable
-  ) {
-    return
-  }
-  if (isRightPanelOpen.value) {
-    event.stopPropagation()
-    isRightPanelOpen.value = false
-  }
-}
 </script>
 <style scoped>
 .base-widget-layout {
@@ -222,4 +171,28 @@ function handleEscape(event: KeyboardEvent) {
     max-width: 1724px;
   }
 }
+
+/* Fade transition for buttons */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide transition for left panel */
+.slide-panel-enter-active,
+.slide-panel-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
+.slide-panel-enter-from,
+.slide-panel-leave-to {
+  transform: translateX(-100%);
+}
 </style>

src/components/widget/nav/NavItem.vue

@@ -5,7 +5,7 @@
       disabled: !isOverflowing,
       pt: { text: { class: 'whitespace-nowrap' } }
     }"
-    class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
@@ -15,32 +15,25 @@
     @mouseenter="checkOverflow"
     @click="onClick"
   >
-    <NavIcon v-if="icon" :icon="icon" />
+    <div v-if="icon" class="pt-0.5">
+      <NavIcon :icon="icon" />
+    </div>
     <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
     <span ref="textRef" class="min-w-0 truncate">
-      <slot />
+      <slot></slot>
     </span>
-    <StatusBadge
-      v-if="badge !== undefined"
-      :label="String(badge)"
-      severity="contrast"
-      variant="circle"
-      class="ml-auto"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
 import type { NavItemData } from '@/types/navTypes'
 
 import NavIcon from './NavIcon.vue'
 
-const { icon, badge, active, onClick } = defineProps<{
+const { icon, active, onClick } = defineProps<{
   icon: NavItemData['icon']
-  badge?: NavItemData['badge']
   active?: boolean
   onClick: () => void
 }>()

src/components/widget/panel/LeftSidePanel.vue

@@ -22,7 +22,6 @@
               v-for="subItem in item.items"
               :key="subItem.id"
               :icon="subItem.icon"
-              :badge="subItem.badge"
               :active="activeItem === subItem.id"
               @click="activeItem = subItem.id"
             >
@@ -33,7 +32,6 @@
         <div v-else class="flex flex-col gap-2">
           <NavItem
             :icon="item.icon"
-            :badge="item.badge"
             :active="activeItem === item.id"
             @click="activeItem = item.id"
           >

src/composables/graph/useGraphNodeManager.ts

@@ -77,7 +77,6 @@ export interface VueNodeData {
   outputs?: INodeOutputSlot[]
   resizable?: boolean
   shape?: number
-  showAdvanced?: boolean
   subgraphId?: string | null
   titleMode?: TitleMode
   widgets?: SafeWidgetData[]
@@ -315,8 +314,7 @@ export function extractVueNodeData(node: LGraphNode): VueNodeData {
     color: node.color || undefined,
     bgcolor: node.bgcolor || undefined,
     resizable: node.resizable,
-    shape: node.shape,
-    showAdvanced: node.showAdvanced
+    shape: node.shape
   }
 }
 
@@ -570,13 +568,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                     ? propertyEvent.newValue
                     : undefined
               })
-              break
-            case 'showAdvanced':
-              vueNodeData.set(nodeId, {
-                ...currentData,
-                showAdvanced: Boolean(propertyEvent.newValue)
-              })
-              break
           }
         }
       },

src/composables/node/useNodeBadge.ts

@@ -73,14 +73,6 @@ export const useNodeBadge = () => {
   onMounted(() => {
     const nodePricing = useNodePricing()
 
-    watch(
-      () => nodePricing.pricingRevision.value,
-      () => {
-        if (!showApiPricingBadge.value) return
-        app.canvas?.setDirty(true, true)
-      }
-    )
-
     extensionStore.registerExtension({
       name: 'Comfy.NodeBadge',
       nodeCreated(node: LGraphNode) {
@@ -119,16 +111,17 @@ export const useNodeBadge = () => {
         node.badges.push(() => badge.value)
 
         if (node.constructor.nodeData?.api_node && showApiPricingBadge.value) {
-          // JSONata rules are dynamic if they depend on any widgets/inputs/input_groups
+          // Get the pricing function to determine if this node has dynamic pricing
           const pricingConfig = nodePricing.getNodePricingConfig(node)
           const hasDynamicPricing =
-            !!pricingConfig &&
-            ((pricingConfig.depends_on?.widgets?.length ?? 0) > 0 ||
-              (pricingConfig.depends_on?.inputs?.length ?? 0) > 0 ||
-              (pricingConfig.depends_on?.input_groups?.length ?? 0) > 0)
+            typeof pricingConfig?.displayPrice === 'function'
+
+          let creditsBadge
+          const createBadge = () => {
+            const price = nodePricing.getNodeDisplayPrice(node)
+            return priceBadge.getCreditsBadge(price)
+          }
 
-          // Keep the existing widget-watch wiring ONLY to trigger redraws on widget change.
-          // (We no longer rely on it to hold the current badge value.)
           if (hasDynamicPricing) {
             // For dynamic pricing nodes, use computed that watches widget changes
             const relevantWidgetNames = nodePricing.getRelevantWidgetNames(
@@ -140,63 +133,13 @@ export const useNodeBadge = () => {
               triggerCanvasRedraw: true
             })
 
-            // Ensure watchers are installed; ignore the returned value.
-            // (This call is what registers the widget listeners in most implementations.)
-            computedWithWidgetWatch(() => 0)
-
-            // Hook into connection changes to trigger price recalculation
-            // This handles both connect and disconnect in VueNodes mode
-            const relevantInputs = pricingConfig?.depends_on?.inputs ?? []
-            const inputGroupPrefixes =
-              pricingConfig?.depends_on?.input_groups ?? []
-            const hasRelevantInputs =
-              relevantInputs.length > 0 || inputGroupPrefixes.length > 0
-
-            if (hasRelevantInputs) {
-              const originalOnConnectionsChange = node.onConnectionsChange
-              node.onConnectionsChange = function (
-                type,
-                slotIndex,
-                isConnected,
-                link,
-                ioSlot
-              ) {
-                originalOnConnectionsChange?.call(
-                  this,
-                  type,
-                  slotIndex,
-                  isConnected,
-                  link,
-                  ioSlot
-                )
-                // Only trigger if this input affects pricing
-                const inputName = ioSlot?.name
-                if (!inputName) return
-                const isRelevantInput =
-                  relevantInputs.includes(inputName) ||
-                  inputGroupPrefixes.some((prefix) =>
-                    inputName.startsWith(prefix + '.')
-                  )
-                if (isRelevantInput) {
-                  nodePricing.triggerPriceRecalculation(node)
-                }
-              }
-            }
+            creditsBadge = computedWithWidgetWatch(createBadge)
+          } else {
+            // For static pricing nodes, use regular computed
+            creditsBadge = computed(createBadge)
           }
 
-          let lastLabel = nodePricing.getNodeDisplayPrice(node)
-          let lastBadge = priceBadge.getCreditsBadge(lastLabel)
-
-          const creditsBadgeGetter: () => LGraphBadge = () => {
-            const label = nodePricing.getNodeDisplayPrice(node)
-            if (label !== lastLabel) {
-              lastLabel = label
-              lastBadge = priceBadge.getCreditsBadge(label)
-            }
-            return lastBadge
-          }
-
-          node.badges.push(creditsBadgeGetter)
+          node.badges.push(() => creditsBadge.value)
         }
       },
       init() {

src/composables/queue/useJobList.test.ts

@@ -305,40 +305,24 @@ describe('useJobList', () => {
     expect(vi.getTimerCount()).toBe(0)
   })
 
-  it('sorts all tasks by create time', async () => {
+  it('sorts all tasks by priority descending', async () => {
     queueStoreMock.pendingTasks = [
-      createTask({
-        promptId: 'p',
-        queueIndex: 1,
-        mockState: 'pending',
-        createTime: 3000
-      })
+      createTask({ promptId: 'p', queueIndex: 1, mockState: 'pending' })
     ]
     queueStoreMock.runningTasks = [
-      createTask({
-        promptId: 'r',
-        queueIndex: 5,
-        mockState: 'running',
-        createTime: 2000
-      })
+      createTask({ promptId: 'r', queueIndex: 5, mockState: 'running' })
     ]
     queueStoreMock.historyTasks = [
-      createTask({
-        promptId: 'h',
-        queueIndex: 3,
-        mockState: 'completed',
-        createTime: 1000,
-        executionEndTimestamp: 5000
-      })
+      createTask({ promptId: 'h', queueIndex: 3, mockState: 'completed' })
     ]
 
     const { allTasksSorted } = initComposable()
     await flush()
 
     expect(allTasksSorted.value.map((task) => task.promptId)).toEqual([
-      'p',
       'r',
-      'h'
+      'h',
+      'p'
     ])
   })
 

src/composables/queue/useJobList.ts

@@ -1,4 +1,3 @@
-import { orderBy } from 'es-toolkit/array'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -198,15 +197,13 @@ export function useJobList() {
   const selectedWorkflowFilter = ref<'all' | 'current'>('all')
   const selectedSortMode = ref<JobSortMode>('mostRecent')
 
-  const mostRecentTimestamp = (task: TaskItemImpl) => task.createTime ?? 0
-
   const allTasksSorted = computed<TaskItemImpl[]>(() => {
     const all = [
       ...queueStore.pendingTasks,
       ...queueStore.runningTasks,
       ...queueStore.historyTasks
     ]
-    return orderBy(all, [mostRecentTimestamp], ['desc'])
+    return all.sort((a, b) => b.queueIndex - a.queueIndex)
   })
 
   const tasksWithJobState = computed<TaskWithState[]>(() =>

src/core/graph/widgets/dynamicWidgets.test.ts

@@ -175,32 +175,4 @@ describe('Autogrow', () => {
     await nextTick()
     expect(node.inputs.length).toBe(5)
   })
-  test('Can deserialize a complex node', async () => {
-    const graph = new LGraph()
-    const node = testNode()
-    graph.add(node)
-    addAutogrow(node, { min: 1, input: inputsSpec, prefix: 'a' })
-    addAutogrow(node, { min: 1, input: inputsSpec, prefix: 'b' })
-    addNodeInput(node, { name: 'aa', isOptional: false, type: 'IMAGE' })
-
-    connectInput(node, 0, graph)
-    connectInput(node, 1, graph)
-    connectInput(node, 3, graph)
-    connectInput(node, 4, graph)
-
-    const serialized = graph.serialize()
-    graph.clear()
-    graph.configure(serialized)
-    const newNode = graph.nodes[0]!
-
-    expect(newNode.inputs.map((i) => i.name)).toStrictEqual([
-      '0.a0',
-      '0.a1',
-      '0.a2',
-      '1.b0',
-      '1.b1',
-      '1.b2',
-      'aa'
-    ])
-  })
 })

src/core/graph/widgets/dynamicWidgets.ts

@@ -1,5 +1,4 @@
 import { remove } from 'es-toolkit'
-import { shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type {
@@ -343,9 +342,7 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   //ensure outputs get updated
   const index = node.inputs.length - 1
   requestAnimationFrame(() => {
-    const input = node.inputs[index]
-    if (!input) return
-    node.inputs[index] = shallowReactive(input)
+    const input = node.inputs.at(index)!
     node.onConnectionsChange?.(
       LiteGraph.INPUT,
       index,
@@ -388,32 +385,20 @@ function addAutogrowGroup(
     ...autogrowOrdinalToName(ordinal, input.name, groupName, node)
   }))
 
-  const newInputs = namedSpecs.map((namedSpec) => {
-    addNodeInput(node, namedSpec)
-    const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
-    if (inputSpecs.length !== 1 || (INLINE_INPUTS && !input.widget))
-      ensureWidgetForInput(node, input)
-    return input
-  })
+  const newInputs = namedSpecs
+    .filter(
+      (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
+    )
+    .map((namedSpec) => {
+      addNodeInput(node, namedSpec)
+      const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
+      if (inputSpecs.length !== 1 || (INLINE_INPUTS && !input.widget))
+        ensureWidgetForInput(node, input)
+      return input
+    })
 
-  for (const newInput of newInputs) {
-    for (const existingInput of remove(
-      node.inputs,
-      (inp) => inp.name === newInput.name
-    )) {
-      //NOTE: link.target_slot is updated on spliceInputs call
-      newInput.link ??= existingInput.link
-    }
-  }
-
-  const targetName = autogrowOrdinalToName(
-    ordinal - 1,
-    inputSpecs.at(-1)!.name,
-    groupName,
-    node
-  ).name
   const lastIndex = node.inputs.findLastIndex((inp) =>
-    inp.name.startsWith(targetName)
+    inp.name.startsWith(groupName)
   )
   const insertionIndex = lastIndex === -1 ? node.inputs.length : lastIndex + 1
   spliceInputs(node, insertionIndex, 0, ...newInputs)
@@ -442,14 +427,13 @@ function autogrowInputConnected(index: number, node: AutogrowNode) {
   const input = node.inputs[index]
   const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
   const lastInput = node.inputs.findLast((inp) =>
-    inp.name.startsWith(groupName + '.')
+    inp.name.startsWith(groupName)
   )
   const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
   if (
     !lastInput ||
     ordinal == undefined ||
-    (ordinal !== resolveAutogrowOrdinal(lastInput.name, groupName, node) &&
-      !app.configuringGraph)
+    ordinal !== resolveAutogrowOrdinal(lastInput.name, groupName, node)
   )
     return
   addAutogrowGroup(ordinal + 1, groupName, node)
@@ -469,7 +453,6 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
       inp.name.lastIndexOf('.') === groupName.length
   )
   const stride = inputSpecs.length
-  if (stride + index >= node.inputs.length) return
   if (groupInputs.length % stride !== 0) {
     console.error('Failed to group multi-input autogrow inputs')
     return
@@ -490,24 +473,10 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
       const curIndex = node.inputs.findIndex((inp) => inp === curInput)
       if (curIndex === -1) throw new Error('missing input')
       link.target_slot = curIndex
-      node.onConnectionsChange?.(
-        LiteGraph.INPUT,
-        curIndex,
-        true,
-        link,
-        curInput
-      )
     }
     const lastInput = groupInputs.at(column - stride)
     if (!lastInput) continue
     lastInput.link = null
-    node.onConnectionsChange?.(
-      LiteGraph.INPUT,
-      node.inputs.length + column - stride,
-      false,
-      null,
-      lastInput
-    )
   }
   const removalChecks = groupInputs.slice((min - 1) * stride)
   let i
@@ -595,6 +564,5 @@ function applyAutogrow(node: LGraphNode, inputSpecV2: InputSpecV2) {
     prefix,
     inputSpecs: inputsV2
   }
-  for (let i = 0; i === 0 || i < min; i++)
-    addAutogrowGroup(i, inputSpecV2.name, node)
+  for (let i = 0; i < min; i++) addAutogrowGroup(i, inputSpecV2.name, node)
 }

src/extensions/core/customCombo.ts

@@ -98,19 +98,6 @@ function onNodeCreated(this: LGraphNode) {
       }
     })
   }
-  const widgets = this.widgets!
-  widgets.push({
-    name: 'index',
-    type: 'hidden',
-    get value() {
-      return widgets.slice(2).findIndex((w) => w.value === comboWidget.value)
-    },
-    set value(_) {},
-    draw: () => undefined,
-    computeSize: () => [0, -4],
-    options: { hidden: true },
-    y: 0
-  })
   addOption(this)
 }
 

src/extensions/core/index.ts

@@ -1,4 +1,4 @@
-import { isCloud, isNightly } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 
 import './clipspace'
 import './contextMenuFilter'
@@ -38,8 +38,3 @@ if (isCloud) {
     await import('./cloudSubscription')
   }
 }
-
-// Nightly-only extensions
-if (isNightly && !isCloud) {
-  await import('./nightlyBadges')
-}

src/extensions/core/nightlyBadges.ts

@@ -1,17 +0,0 @@
-import { t } from '@/i18n'
-import { useExtensionService } from '@/services/extensionService'
-import type { TopbarBadge } from '@/types/comfy'
-
-const badges: TopbarBadge[] = [
-  {
-    text: t('nightly.badge.label'),
-    label: t('g.nightly'),
-    variant: 'warning',
-    tooltip: t('nightly.badge.tooltip')
-  }
-]
-
-useExtensionService().registerExtension({
-  name: 'Comfy.Nightly.Badges',
-  topbarBadges: badges
-})

src/extensions/core/uploadAudio.ts

@@ -1,5 +1,6 @@
 import { MediaRecorder as ExtendableMediaRecorder } from 'extendable-media-recorder'
 
+import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import { useNodePaste } from '@/composables/node/useNodePaste'
@@ -24,17 +25,6 @@ import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 
-function updateUIWidget(
-  audioUIWidget: DOMWidget<HTMLAudioElement, string>,
-  url: string = ''
-) {
-  audioUIWidget.element.src = url
-  audioUIWidget.value = url
-  audioUIWidget.callback?.(url)
-  if (url) audioUIWidget.element.classList.remove('empty-audio-widget')
-  else audioUIWidget.element.classList.add('empty-audio-widget')
-}
-
 async function uploadFile(
   audioWidget: IStringWidget,
   audioUIWidget: DOMWidget<HTMLAudioElement, string>,
@@ -65,10 +55,10 @@ async function uploadFile(
       }
 
       if (updateNode) {
-        updateUIWidget(
-          audioUIWidget,
-          api.apiURL(getResourceURL(...splitFilePath(path)))
+        audioUIWidget.element.src = api.apiURL(
+          getResourceURL(...splitFilePath(path))
         )
+        audioWidget.value = path
 
         // Manually trigger the callback to update VueNodes
         audioWidget.callback?.(path)
@@ -128,18 +118,26 @@ app.registerExtension({
             const audios = output.audio
             if (!audios?.length) return
             const audio = audios[0]
-            const resourceUrl = getResourceURL(
-              audio.subfolder ?? '',
-              audio.filename ?? '',
-              audio.type
+            audioUIWidget.element.src = api.apiURL(
+              getResourceURL(
+                audio.subfolder ?? '',
+                audio.filename ?? '',
+                audio.type
+              )
             )
-            updateUIWidget(audioUIWidget, api.apiURL(resourceUrl))
+            audioUIWidget.element.classList.remove('empty-audio-widget')
           }
         }
 
-        let value = ''
-        audioUIWidget.options.getValue = () => value
-        audioUIWidget.options.setValue = (v) => (value = v)
+        audioUIWidget.onRemove = useChainCallback(
+          audioUIWidget.onRemove,
+          () => {
+            if (!audioUIWidget.element) return
+            audioUIWidget.element.pause()
+            audioUIWidget.element.src = ''
+            audioUIWidget.element.remove()
+          }
+        )
 
         return { widget: audioUIWidget }
       }
@@ -158,12 +156,10 @@ app.registerExtension({
         (w) => w.name === 'audioUI'
       ) as unknown as DOMWidget<HTMLAudioElement, string>
       const audio = output.audio[0]
-      const resourceUrl = getResourceURL(
-        audio.subfolder ?? '',
-        audio.filename ?? '',
-        audio.type
+      audioUIWidget.element.src = api.apiURL(
+        getResourceURL(audio.subfolder ?? '', audio.filename ?? '', audio.type)
       )
-      updateUIWidget(audioUIWidget, api.apiURL(resourceUrl))
+      audioUIWidget.element.classList.remove('empty-audio-widget')
     }
   }
 })
@@ -187,18 +183,18 @@ app.registerExtension({
         const audioUIWidget = node.widgets.find(
           (w) => w.name === 'audioUI'
         ) as unknown as DOMWidget<HTMLAudioElement, string>
+        audioUIWidget.options.canvasOnly = true
 
         const onAudioWidgetUpdate = () => {
-          updateUIWidget(
-            audioUIWidget,
-            api.apiURL(
-              getResourceURL(...splitFilePath(audioWidget.value ?? ''))
-            )
+          if (typeof audioWidget.value !== 'string') return
+          audioUIWidget.element.src = api.apiURL(
+            getResourceURL(...splitFilePath(audioWidget.value))
           )
         }
         // Initially load default audio file to audioUIWidget.
-        onAudioWidgetUpdate()
-
+        if (audioWidget.value) {
+          onAudioWidgetUpdate()
+        }
         audioWidget.callback = onAudioWidgetUpdate
 
         // Load saved audio file widget values if restoring from workflow
@@ -206,7 +202,9 @@ app.registerExtension({
         node.onGraphConfigured = function () {
           // @ts-expect-error fixme ts strict error
           onGraphConfigured?.apply(this, arguments)
-          onAudioWidgetUpdate()
+          if (audioWidget.value) {
+            onAudioWidgetUpdate()
+          }
         }
 
         const handleUpload = async (files: File[]) => {
@@ -330,7 +328,7 @@ app.registerExtension({
                     URL.revokeObjectURL(audioUIWidget.element.src)
                   }
 
-                  updateUIWidget(audioUIWidget, URL.createObjectURL(audioBlob))
+                  audioUIWidget.element.src = URL.createObjectURL(audioBlob)
 
                   isRecording = false
 

src/lib/litegraph/src/LGraphNodeProperties.ts

@@ -13,9 +13,7 @@ const DEFAULT_TRACKED_PROPERTIES: string[] = [
   'flags.pinned',
   'mode',
   'color',
-  'bgcolor',
-  'shape',
-  'showAdvanced'
+  'bgcolor'
 ]
 /**
  * Manages node properties with optional change tracking and instrumentation.

src/lib/litegraph/src/node/NodeSlot.ts

@@ -30,7 +30,7 @@ export interface IDrawOptions {
   highlight?: boolean
 }
 
-const ROTATION_OFFSET = -Math.PI
+const ROTATION_OFFSET = -Math.PI / 2
 
 /** Shared base class for {@link LGraphNode} input and output slots. */
 export abstract class NodeSlot extends SlotBase implements INodeSlot {

src/locales/ar/main.json

@@ -24,7 +24,6 @@
     "assets": "الأصول",
     "baseModels": "النماذج الأساسية",
     "browseAssets": "تصفح الأصول",
-    "byType": "حسب النوع",
     "checkpoints": "نقاط التحقق",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "مثال:",
@@ -46,10 +45,6 @@
       "failed": "فشل التنزيل",
       "inProgress": "جاري تنزيل {assetName}..."
     },
-    "emptyImported": {
-      "canImport": "لا توجد نماذج مستوردة بعد. انقر على \"استيراد نموذج\" لإضافة نموذجك الخاص.",
-      "restricted": "النماذج الشخصية متاحة فقط لمستوى Creator وما فوق."
-    },
     "errorFileTooLarge": "الملف يتجاوز الحد الأقصى المسموح به للحجم",
     "errorFormatNotAllowed": "يسمح فقط بصيغة SafeTensor",
     "errorModelTypeNotSupported": "نوع النموذج هذا غير مدعوم",
@@ -66,7 +61,6 @@
     "finish": "إنهاء",
     "genericLinkPlaceholder": "الصق الرابط هنا",
     "importAnother": "استيراد آخر",
-    "imported": "مستوردة",
     "jobId": "معرّف المهمة",
     "loadingModels": "جارٍ تحميل {type}...",
     "maxFileSize": "الحد الأقصى لحجم الملف: {size}",
@@ -76,29 +70,6 @@
       "threeDModelPlaceholder": "نموذج ثلاثي الأبعاد"
     },
     "modelAssociatedWithLink": "النموذج المرتبط بالرابط الذي قدمته:",
-    "modelInfo": {
-      "addBaseModel": "أضف نموذجًا أساسيًا...",
-      "addTag": "أضف وسمًا...",
-      "additionalTags": "وسوم إضافية",
-      "baseModelUnknown": "النموذج الأساسي غير معروف",
-      "basicInfo": "معلومات أساسية",
-      "compatibleBaseModels": "نماذج أساسية متوافقة",
-      "description": "الوصف",
-      "descriptionNotSet": "لم يتم تعيين وصف",
-      "descriptionPlaceholder": "أضف وصفًا لهذا النموذج...",
-      "displayName": "اسم العرض",
-      "fileName": "اسم الملف",
-      "modelDescription": "وصف النموذج",
-      "modelTagging": "تصنيف النموذج",
-      "modelType": "نوع النموذج",
-      "noAdditionalTags": "لا توجد وسوم إضافية",
-      "selectModelPrompt": "اختر نموذجًا لعرض معلوماته",
-      "selectModelType": "اختر نوع النموذج...",
-      "source": "المصدر",
-      "title": "معلومات النموذج",
-      "triggerPhrases": "عبارات التفعيل",
-      "viewOnSource": "عرض على {source}"
-    },
     "modelName": "اسم النموذج",
     "modelNamePlaceholder": "أدخل اسمًا لهذا النموذج",
     "modelTypeSelectorLabel": "ما نوع هذا النموذج؟",
@@ -713,7 +684,6 @@
     "clearAll": "مسح الكل",
     "clearFilters": "مسح الفلاتر",
     "close": "إغلاق",
-    "closeDialog": "إغلاق الحوار",
     "color": "اللون",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "شعار ComfyOrg",
@@ -792,8 +762,6 @@
     "goToNode": "الانتقال إلى العقدة",
     "graphNavigation": "التنقل في الرسم البياني",
     "halfSpeed": "0.5x",
-    "hideLeftPanel": "إخفاء اللوحة اليسرى",
-    "hideRightPanel": "إخفاء اللوحة اليمنى",
     "icon": "أيقونة",
     "imageFailedToLoad": "فشل تحميل الصورة",
     "imagePreview": "معاينة الصورة - استخدم مفاتيح الأسهم للتنقل بين الصور",
@@ -835,7 +803,6 @@
     "name": "الاسم",
     "newFolder": "مجلد جديد",
     "next": "التالي",
-    "nightly": "NIGHTLY",
     "no": "لا",
     "noAudioRecorded": "لم يتم تسجيل أي صوت",
     "noItems": "لا توجد عناصر",
@@ -925,9 +892,7 @@
     "selectedFile": "الملف المحدد",
     "setAsBackground": "تعيين كخلفية",
     "settings": "الإعدادات",
-    "showLeftPanel": "إظهار اللوحة اليسرى",
     "showReport": "عرض التقرير",
-    "showRightPanel": "إظهار اللوحة اليمنى",
     "singleSelectDropdown": "قائمة منسدلة اختيار واحد",
     "sort": "فرز",
     "source": "المصدر",
@@ -950,7 +915,6 @@
     "updating": "جارٍ التحديث",
     "upload": "رفع",
     "usageHint": "تلميح الاستخدام",
-    "use": "استخدم",
     "user": "المستخدم",
     "versionMismatchWarning": "تحذير توافق الإصدارات",
     "versionMismatchWarningMessage": "{warning}: {detail} زر https://docs.comfy.org/installation/update_comfyui#common-update-issues للحصول على تعليمات التحديث.",
@@ -1654,12 +1618,6 @@
       "title": "سير العمل هذا يحتوي على عقد مفقودة"
     }
   },
-  "nightly": {
-    "badge": {
-      "label": "إصدار معاينة",
-      "tooltip": "أنت تستخدم إصدارًا ليليًا من ComfyUI. يرجى استخدام زر الملاحظات لمشاركة آرائك حول هذه الميزات."
-    }
-  },
   "nodeCategories": {
     "": "",
     "3d": "ثلاثي الأبعاد",
@@ -2174,14 +2132,12 @@
     "viewControls": "عناصر تحكم العرض"
   },
   "sideToolbar": {
-    "activeJobStatus": "المهمة النشطة: {status}",
     "assets": "الأصول",
     "backToAssets": "العودة إلى جميع الأصول",
     "browseTemplates": "تصفح القوالب المثال",
     "downloads": "التنزيلات",
     "generatedAssetsHeader": "الأصول المُولدة",
     "helpCenter": "مركز المساعدة",
-    "importedAssetsHeader": "الأصول المستوردة",
     "labels": {
       "assets": "الأصول",
       "console": "وحدة التحكم",
@@ -2226,7 +2182,6 @@
     "queue": "قائمة الانتظار",
     "queueProgressOverlay": {
       "activeJobs": "{count} مهمة نشطة | {count} مهام نشطة",
-      "activeJobsShort": "{count} نشط | {count} نشط",
       "activeJobsSuffix": "مهام نشطة",
       "cancelJobTooltip": "إلغاء المهمة",
       "clearHistory": "مسح سجل قائمة الانتظار",

src/locales/en/main.json

@@ -100,11 +100,6 @@
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
-    "closeDialog": "Close dialog",
-    "showLeftPanel": "Show left panel",
-    "hideLeftPanel": "Hide left panel",
-    "showRightPanel": "Show right panel",
-    "hideRightPanel": "Hide right panel",
     "or": "or",
     "pressKeysForNewBinding": "Press keys for new binding",
     "defaultBanner": "default banner",
@@ -184,7 +179,6 @@
     "source": "Source",
     "filter": "Filter",
     "apply": "Apply",
-    "use": "Use",
     "enabled": "Enabled",
     "installed": "Installed",
     "restart": "Restart",
@@ -276,7 +270,6 @@
     "1x": "1x",
     "2x": "2x",
     "beta": "BETA",
-    "nightly": "NIGHTLY",
     "profile": "Profile",
     "noItems": "No items"
   },
@@ -711,7 +704,6 @@
     "noGeneratedFiles": "No generated files found",
     "generatedAssetsHeader": "Generated assets",
     "importedAssetsHeader": "Imported assets",
-    "activeJobStatus": "Active job: {status}",
     "noFilesFoundMessage": "Upload files or generate content to see them here",
     "browseTemplates": "Browse example templates",
     "openWorkflow": "Open workflow in local file system",
@@ -761,7 +753,6 @@
       "sortJobs": "Sort jobs",
       "sortBy": "Sort by",
       "activeJobs": "{count} active job | {count} active jobs",
-      "activeJobsShort": "{count} active | {count} active",
       "activeJobsSuffix": "active jobs",
       "jobQueue": "Job Queue",
       "expandCollapsedQueue": "Expand job queue",
@@ -1286,10 +1277,7 @@
     "VueNodes": "Nodes 2.0",
     "Nodes 2_0": "Nodes 2.0",
     "Execution": "Execution",
-    "PLY": "PLY",
-    "Workspace": "Workspace",
-    "General": "General",
-    "Other": "Other"
+    "PLY": "PLY"
   },
   "serverConfigItems": {
     "listen": {
@@ -2013,8 +2001,6 @@
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
-    "managePayment": "Manage Payment",
-    "cancelSubscription": "Cancel Subscription",
     "partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
     "partnerNodesDescription": "For running commercial/proprietary models",
     "totalCredits": "Total credits",
@@ -2069,9 +2055,6 @@
     "subscribeToRunFull": "Subscribe to Run",
     "subscribeNow": "Subscribe Now",
     "subscribeToComfyCloud": "Subscribe to Comfy Cloud",
-    "workspaceNotSubscribed": "This workspace is not on a subscription",
-    "subscriptionRequiredMessage": "A subscription is required for members to run workflows on Cloud",
-    "contactOwnerToSubscribe": "Contact the workspace owner to subscribe",
     "description": "Choose the best plan for you",
     "haveQuestions": "Have questions or wondering about enterprise?",
     "contactUs": "Contact us",
@@ -2107,64 +2090,12 @@
   "userSettings": {
     "title": "My Account Settings",
     "accountSettings": "Account settings",
-    "workspaceSettings": "Workspace settings",
     "name": "Name",
     "email": "Email",
     "provider": "Sign-in Provider",
     "notSet": "Not set",
     "updatePassword": "Update Password"
   },
-  "workspacePanel": {
-    "tabs": {
-      "planCredits": "Plan & Credits"
-    },
-    "menu": {
-      "editWorkspace": "Edit workspace details",
-      "leaveWorkspace": "Leave Workspace",
-      "deleteWorkspace": "Delete Workspace",
-      "deleteWorkspaceDisabledTooltip": "Cancel your workspace's active subscription first"
-    },
-    "editWorkspaceDialog": {
-      "title": "Edit workspace details",
-      "nameLabel": "Workspace name",
-      "save": "Save"
-    },
-    "leaveDialog": {
-      "title": "Leave this workspace?",
-      "message": "You won't be able to join again unless you contact the workspace owner.",
-      "leave": "Leave"
-    },
-    "deleteDialog": {
-      "title": "Delete this workspace?",
-      "message": "Any unused credits or unsaved assets will be lost. This action cannot be undone.",
-      "messageWithName": "Delete \"{name}\"? Any unused credits or unsaved assets will be lost. This action cannot be undone."
-    },
-    "createWorkspaceDialog": {
-      "title": "Create a new workspace",
-      "message": "Workspaces let members share a single credits pool. You'll become the owner after creating this.",
-      "nameLabel": "Workspace name*",
-      "namePlaceholder": "Enter workspace name",
-      "create": "Create"
-    },
-    "toast": {
-      "workspaceUpdated": {
-        "title": "Workspace updated",
-        "message": "Workspace details have been saved."
-      },
-      "failedToUpdateWorkspace": "Failed to update workspace",
-      "failedToCreateWorkspace": "Failed to create workspace",
-      "failedToDeleteWorkspace": "Failed to delete workspace",
-      "failedToLeaveWorkspace": "Failed to leave workspace"
-    }
-  },
-  "workspaceSwitcher": {
-    "switchWorkspace": "Switch workspace",
-    "subscribe": "Subscribe",
-    "roleOwner": "Owner",
-    "roleMember": "Member",
-    "createWorkspace": "Create new workspace",
-    "maxWorkspacesReached": "You can only own 10 workspaces. Delete one to create a new one."
-  },
   "selectionToolbox": {
     "executeButton": {
       "tooltip": "Execute to selected output nodes (Highlighted with orange border)",
@@ -2379,12 +2310,6 @@
   "assetBrowser": {
     "allCategory": "All {category}",
     "allModels": "All Models",
-    "byType": "By type",
-    "emptyImported": {
-      "canImport": "No imported models yet. Click \"Import Model\" to add your own.",
-      "restricted": "Personal models are only available at Creator tier and above."
-    },
-    "imported": "Imported",
     "assetCollection": "Asset collection",
     "assets": "Assets",
     "baseModels": "Base models",
@@ -2475,29 +2400,6 @@
       "assetCard": "{name} - {type} asset",
       "loadingAsset": "Loading asset"
     },
-    "modelInfo": {
-      "title": "Model Info",
-      "selectModelPrompt": "Select a model to see its information",
-      "basicInfo": "Basic Info",
-      "displayName": "Display Name",
-      "fileName": "File Name",
-      "source": "Source",
-      "viewOnSource": "View on {source}",
-      "modelTagging": "Model Tagging",
-      "modelType": "Model Type",
-      "selectModelType": "Select model type...",
-      "compatibleBaseModels": "Compatible Base Models",
-      "addBaseModel": "Add base model...",
-      "baseModelUnknown": "Base model unknown",
-      "additionalTags": "Additional Tags",
-      "addTag": "Add tag...",
-      "noAdditionalTags": "No additional tags",
-      "modelDescription": "Model Description",
-      "triggerPhrases": "Trigger Phrases",
-      "description": "Description",
-      "descriptionNotSet": "No description set",
-      "descriptionPlaceholder": "Add a description for this model..."
-    },
     "media": {
       "threeDModelPlaceholder": "3D Model",
       "audioPlaceholder": "Audio"
@@ -2720,11 +2622,5 @@
       "workspaceNotFound": "Workspace not found",
       "tokenExchangeFailed": "Failed to authenticate with workspace: {error}"
     }
-  },
-  "nightly": {
-    "badge": {
-      "label": "Preview Version",
-      "tooltip": "You are using a nightly version of ComfyUI. Please use the feedback button to share your thoughts about these features."
-    }
   }
-}
+}

src/locales/es/main.json

@@ -24,7 +24,6 @@
     "assets": "Recursos",
     "baseModels": "Modelos base",
     "browseAssets": "Explorar recursos",
-    "byType": "Por tipo",
     "checkpoints": "Checkpoints",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "Ejemplo:",
@@ -46,10 +45,6 @@
       "failed": "La descarga falló",
       "inProgress": "Descargando {assetName}..."
     },
-    "emptyImported": {
-      "canImport": "Aún no hay modelos importados. Haz clic en \"Importar modelo\" para añadir el tuyo.",
-      "restricted": "Los modelos personales solo están disponibles en el nivel Creador o superior."
-    },
     "errorFileTooLarge": "El archivo excede el tamaño máximo permitido",
     "errorFormatNotAllowed": "Solo se permite el formato SafeTensor",
     "errorModelTypeNotSupported": "Este tipo de modelo no es compatible",
@@ -66,7 +61,6 @@
     "finish": "Finalizar",
     "genericLinkPlaceholder": "Pega el enlace aquí",
     "importAnother": "Importar otro",
-    "imported": "Importado",
     "jobId": "ID de tarea",
     "loadingModels": "Cargando {type}...",
     "maxFileSize": "Tamaño máximo de archivo: {size}",
@@ -76,29 +70,6 @@
       "threeDModelPlaceholder": "Modelo 3D"
     },
     "modelAssociatedWithLink": "El modelo asociado con el enlace que proporcionaste:",
-    "modelInfo": {
-      "addBaseModel": "Agregar modelo base...",
-      "addTag": "Agregar etiqueta...",
-      "additionalTags": "Etiquetas adicionales",
-      "baseModelUnknown": "Modelo base desconocido",
-      "basicInfo": "Información básica",
-      "compatibleBaseModels": "Modelos base compatibles",
-      "description": "Descripción",
-      "descriptionNotSet": "Sin descripción",
-      "descriptionPlaceholder": "Agrega una descripción para este modelo...",
-      "displayName": "Nombre para mostrar",
-      "fileName": "Nombre de archivo",
-      "modelDescription": "Descripción del modelo",
-      "modelTagging": "Etiquetado del modelo",
-      "modelType": "Tipo de modelo",
-      "noAdditionalTags": "Sin etiquetas adicionales",
-      "selectModelPrompt": "Selecciona un modelo para ver su información",
-      "selectModelType": "Selecciona el tipo de modelo...",
-      "source": "Fuente",
-      "title": "Información del modelo",
-      "triggerPhrases": "Frases de activación",
-      "viewOnSource": "Ver en {source}"
-    },
     "modelName": "Nombre del modelo",
     "modelNamePlaceholder": "Introduce un nombre para este modelo",
     "modelTypeSelectorLabel": "¿Qué tipo de modelo es este?",
@@ -713,7 +684,6 @@
     "clearAll": "Borrar todo",
     "clearFilters": "Borrar filtros",
     "close": "Cerrar",
-    "closeDialog": "Cerrar diálogo",
     "color": "Color",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "Logo de ComfyOrg",
@@ -792,8 +762,6 @@
     "goToNode": "Ir al nodo",
     "graphNavigation": "Navegación de gráficos",
     "halfSpeed": "0.5x",
-    "hideLeftPanel": "Ocultar panel izquierdo",
-    "hideRightPanel": "Ocultar panel derecho",
     "icon": "Icono",
     "imageFailedToLoad": "Falló la carga de la imagen",
     "imagePreview": "Vista previa de imagen - Usa las teclas de flecha para navegar entre imágenes",
@@ -835,7 +803,6 @@
     "name": "Nombre",
     "newFolder": "Nueva carpeta",
     "next": "Siguiente",
-    "nightly": "NIGHTLY",
     "no": "No",
     "noAudioRecorded": "No se grabó audio",
     "noItems": "Sin elementos",
@@ -925,9 +892,7 @@
     "selectedFile": "Archivo seleccionado",
     "setAsBackground": "Establecer como fondo",
     "settings": "Configuraciones",
-    "showLeftPanel": "Mostrar panel izquierdo",
     "showReport": "Mostrar informe",
-    "showRightPanel": "Mostrar panel derecho",
     "singleSelectDropdown": "Menú desplegable de selección única",
     "sort": "Ordenar",
     "source": "Fuente",
@@ -950,7 +915,6 @@
     "updating": "Actualizando",
     "upload": "Subir",
     "usageHint": "Sugerencia de uso",
-    "use": "Usar",
     "user": "Usuario",
     "versionMismatchWarning": "Advertencia de compatibilidad de versión",
     "versionMismatchWarningMessage": "{warning}: {detail} Visita https://docs.comfy.org/installation/update_comfyui#common-update-issues para obtener instrucciones de actualización.",
@@ -1654,12 +1618,6 @@
       "title": "Este flujo de trabajo tiene nodos faltantes"
     }
   },
-  "nightly": {
-    "badge": {
-      "label": "Versión preliminar",
-      "tooltip": "Estás usando una versión nightly de ComfyUI. Por favor, utiliza el botón de comentarios para compartir tus opiniones sobre estas funciones."
-    }
-  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
@@ -2174,14 +2132,12 @@
     "viewControls": "Controles de vista"
   },
   "sideToolbar": {
-    "activeJobStatus": "Trabajo activo: {status}",
     "assets": "Recursos",
     "backToAssets": "Volver a todos los recursos",
     "browseTemplates": "Explorar plantillas de ejemplo",
     "downloads": "Descargas",
     "generatedAssetsHeader": "Recursos generados",
     "helpCenter": "Centro de ayuda",
-    "importedAssetsHeader": "Recursos importados",
     "labels": {
       "assets": "Recursos",
       "console": "Consola",
@@ -2226,7 +2182,6 @@
     "queue": "Cola",
     "queueProgressOverlay": {
       "activeJobs": "{count} trabajo activo | {count} trabajos activos",
-      "activeJobsShort": "{count} activo(s) | {count} activo(s)",
       "activeJobsSuffix": "trabajos activos",
       "cancelJobTooltip": "Cancelar trabajo",
       "clearHistory": "Limpiar historial de la cola de trabajos",

src/locales/fa/main.json

@@ -24,7 +24,6 @@
     "assets": "دارایی‌ها",
     "baseModels": "مدل‌های پایه",
     "browseAssets": "مرور دارایی‌ها",
-    "byType": "بر اساس نوع",
     "checkpoints": "چک‌پوینت‌ها",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "مثال:",
@@ -46,10 +45,6 @@
       "failed": "دانلود ناموفق بود",
       "inProgress": "در حال دانلود {assetName}..."
     },
-    "emptyImported": {
-      "canImport": "هنوز مدلی وارد نشده است. برای افزودن مدل خود، روی «وارد کردن مدل» کلیک کنید.",
-      "restricted": "مدل‌های شخصی فقط برای سطح Creator و بالاتر در دسترس هستند."
-    },
     "errorFileTooLarge": "فایل از حداکثر اندازه مجاز بزرگ‌تر است",
     "errorFormatNotAllowed": "فقط فرمت SafeTensor مجاز است",
     "errorModelTypeNotSupported": "این نوع مدل پشتیبانی نمی‌شود",
@@ -66,7 +61,6 @@
     "finish": "پایان",
     "genericLinkPlaceholder": "لینک را اینجا وارد کنید",
     "importAnother": "وارد کردن مورد دیگر",
-    "imported": "وارد شده",
     "jobId": "شناسه کار: {jobId}",
     "loadingModels": "در حال بارگذاری {type}...",
     "maxFileSize": "حداکثر اندازه فایل: {size}",
@@ -76,29 +70,6 @@
       "threeDModelPlaceholder": "مدل سه‌بعدی"
     },
     "modelAssociatedWithLink": "مدل مرتبط با لینکی که وارد کردید:",
-    "modelInfo": {
-      "addBaseModel": "افزودن مدل پایه...",
-      "addTag": "افزودن برچسب...",
-      "additionalTags": "برچسب‌های اضافی",
-      "baseModelUnknown": "مدل پایه نامشخص",
-      "basicInfo": "اطلاعات پایه",
-      "compatibleBaseModels": "مدل‌های پایه سازگار",
-      "description": "توضیحات",
-      "descriptionNotSet": "توضیحی تنظیم نشده است",
-      "descriptionPlaceholder": "یک توضیح برای این مدل اضافه کنید...",
-      "displayName": "نام نمایشی",
-      "fileName": "نام فایل",
-      "modelDescription": "توضیحات مدل",
-      "modelTagging": "برچسب‌گذاری مدل",
-      "modelType": "نوع مدل",
-      "noAdditionalTags": "برچسب اضافی وجود ندارد",
-      "selectModelPrompt": "یک مدل را برای مشاهده اطلاعات آن انتخاب کنید",
-      "selectModelType": "انتخاب نوع مدل...",
-      "source": "منبع",
-      "title": "اطلاعات مدل",
-      "triggerPhrases": "عبارات فعال‌ساز",
-      "viewOnSource": "مشاهده در {source}"
-    },
     "modelName": "نام مدل",
     "modelNamePlaceholder": "یک نام برای این مدل وارد کنید",
     "modelTypeSelectorLabel": "نوع مدل چیست؟",
@@ -713,7 +684,6 @@
     "clearAll": "پاک‌سازی همه",
     "clearFilters": "پاک‌سازی فیلترها",
     "close": "بستن",
-    "closeDialog": "بستن پنجره",
     "color": "رنگ",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "لوگوی ComfyOrg",
@@ -792,8 +762,6 @@
     "goToNode": "رفتن به node",
     "graphNavigation": "ناوبری گراف",
     "halfSpeed": "۰.۵x",
-    "hideLeftPanel": "پنهان کردن پنل چپ",
-    "hideRightPanel": "پنهان کردن پنل راست",
     "icon": "آیکون",
     "imageFailedToLoad": "بارگذاری تصویر ناموفق بود",
     "imagePreview": "پیش‌نمایش تصویر - برای جابجایی بین تصاویر از کلیدهای جهت‌دار استفاده کنید",
@@ -835,7 +803,6 @@
     "name": "نام",
     "newFolder": "پوشه جدید",
     "next": "بعدی",
-    "nightly": "نسخه شبانه",
     "no": "خیر",
     "noAudioRecorded": "هیچ صدایی ضبط نشد",
     "noItems": "هیچ موردی وجود ندارد",
@@ -925,9 +892,7 @@
     "selectedFile": "فایل انتخاب‌شده",
     "setAsBackground": "تنظیم به عنوان پس‌زمینه",
     "settings": "تنظیمات",
-    "showLeftPanel": "نمایش پنل چپ",
     "showReport": "نمایش گزارش",
-    "showRightPanel": "نمایش پنل راست",
     "singleSelectDropdown": "لیست کشویی تک‌انتخابی",
     "sort": "مرتب‌سازی",
     "source": "منبع",
@@ -950,7 +915,6 @@
     "updating": "در حال به‌روزرسانی {id}",
     "upload": "بارگذاری",
     "usageHint": "راهنمای استفاده",
-    "use": "استفاده",
     "user": "کاربر",
     "versionMismatchWarning": "هشدار ناسازگاری نسخه",
     "versionMismatchWarningMessage": "{warning}: {detail} برای راهنمای به‌روزرسانی به https://docs.comfy.org/installation/update_comfyui#common-update-issues مراجعه کنید.",
@@ -1654,12 +1618,6 @@
       "title": "این workflow دارای nodeهای مفقود است"
     }
   },
-  "nightly": {
-    "badge": {
-      "label": "نسخه پیش‌نمایش",
-      "tooltip": "شما در حال استفاده از نسخه شبانه ComfyUI هستید. لطفاً با استفاده از دکمه بازخورد، نظرات خود را درباره این قابلیت‌ها به اشتراک بگذارید."
-    }
-  },
   "nodeCategories": {
     "": "",
     "3d": "سه‌بعدی",
@@ -2174,14 +2132,12 @@
     "viewControls": "کنترل‌های نمایش"
   },
   "sideToolbar": {
-    "activeJobStatus": "وضعیت کار فعال: {status}",
     "assets": "دارایی‌ها",
     "backToAssets": "بازگشت به همه دارایی‌ها",
     "browseTemplates": "مرور قالب‌های نمونه",
     "downloads": "دانلودها",
     "generatedAssetsHeader": "دارایی‌های تولیدشده",
     "helpCenter": "مرکز راهنما",
-    "importedAssetsHeader": "دارایی‌های واردشده",
     "labels": {
       "assets": "دارایی‌ها",
       "console": "کنسول",
@@ -2237,7 +2193,6 @@
     "queue": "صف",
     "queueProgressOverlay": {
       "activeJobs": "{count} کار فعال",
-      "activeJobsShort": "{count} فعال | {count} فعال",
       "activeJobsSuffix": "کار فعال",
       "cancelJobTooltip": "لغو کار",
       "clearHistory": "پاک‌سازی تاریخچه صف کار",

src/locales/fr/main.json

@@ -24,7 +24,6 @@
     "assets": "Ressources",
     "baseModels": "Modèles de base",
     "browseAssets": "Parcourir les ressources",
-    "byType": "Par type",
     "checkpoints": "Checkpoints",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "Exemple :",
@@ -46,10 +45,6 @@
       "failed": "Échec du téléchargement",
       "inProgress": "Téléchargement de {assetName}..."
     },
-    "emptyImported": {
-      "canImport": "Aucun modèle importé pour le moment. Cliquez sur « Importer un modèle » pour ajouter le vôtre.",
-      "restricted": "Les modèles personnels sont disponibles uniquement à partir du niveau Creator."
-    },
     "errorFileTooLarge": "Le fichier dépasse la taille maximale autorisée",
     "errorFormatNotAllowed": "Seul le format SafeTensor est autorisé",
     "errorModelTypeNotSupported": "Ce type de modèle n'est pas pris en charge",
@@ -66,7 +61,6 @@
     "finish": "Terminer",
     "genericLinkPlaceholder": "Collez le lien ici",
     "importAnother": "Importer un autre",
-    "imported": "Importé",
     "jobId": "ID de tâche",
     "loadingModels": "Chargement de {type}...",
     "maxFileSize": "Taille maximale du fichier : {size}",
@@ -76,29 +70,6 @@
       "threeDModelPlaceholder": "Modèle 3D"
     },
     "modelAssociatedWithLink": "Le modèle associé au lien que vous avez fourni :",
-    "modelInfo": {
-      "addBaseModel": "Ajouter un modèle de base...",
-      "addTag": "Ajouter un tag...",
-      "additionalTags": "Tags supplémentaires",
-      "baseModelUnknown": "Modèle de base inconnu",
-      "basicInfo": "Informations de base",
-      "compatibleBaseModels": "Modèles de base compatibles",
-      "description": "Description",
-      "descriptionNotSet": "Aucune description définie",
-      "descriptionPlaceholder": "Ajoutez une description pour ce modèle...",
-      "displayName": "Nom d'affichage",
-      "fileName": "Nom du fichier",
-      "modelDescription": "Description du modèle",
-      "modelTagging": "Étiquetage du modèle",
-      "modelType": "Type de modèle",
-      "noAdditionalTags": "Aucun tag supplémentaire",
-      "selectModelPrompt": "Sélectionnez un modèle pour voir ses informations",
-      "selectModelType": "Sélectionner le type de modèle...",
-      "source": "Source",
-      "title": "Infos du modèle",
-      "triggerPhrases": "Phrases déclencheuses",
-      "viewOnSource": "Voir sur {source}"
-    },
     "modelName": "Nom du modèle",
     "modelNamePlaceholder": "Entrez un nom pour ce modèle",
     "modelTypeSelectorLabel": "Quel type de modèle est-ce ?",
@@ -713,7 +684,6 @@
     "clearAll": "Tout effacer",
     "clearFilters": "Effacer les filtres",
     "close": "Fermer",
-    "closeDialog": "Fermer la boîte de dialogue",
     "color": "Couleur",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "Logo ComfyOrg",
@@ -792,8 +762,6 @@
     "goToNode": "Aller au nœud",
     "graphNavigation": "Navigation dans le graphe",
     "halfSpeed": "0.5x",
-    "hideLeftPanel": "Masquer le panneau de gauche",
-    "hideRightPanel": "Masquer le panneau de droite",
     "icon": "Icône",
     "imageFailedToLoad": "Échec du chargement de l'image",
     "imagePreview": "Aperçu de l'image - Utilisez les flèches pour naviguer entre les images",
@@ -835,7 +803,6 @@
     "name": "Nom",
     "newFolder": "Nouveau dossier",
     "next": "Suivant",
-    "nightly": "NIGHTLY",
     "no": "Non",
     "noAudioRecorded": "Aucun audio enregistré",
     "noItems": "Aucun élément",
@@ -925,9 +892,7 @@
     "selectedFile": "Fichier sélectionné",
     "setAsBackground": "Définir comme arrière-plan",
     "settings": "Paramètres",
-    "showLeftPanel": "Afficher le panneau de gauche",
     "showReport": "Afficher le rapport",
-    "showRightPanel": "Afficher le panneau de droite",
     "singleSelectDropdown": "Menu déroulant à sélection unique",
     "sort": "Trier",
     "source": "Source",
@@ -950,7 +915,6 @@
     "updating": "Mise à jour",
     "upload": "Téléverser",
     "usageHint": "Conseil d'utilisation",
-    "use": "Utiliser",
     "user": "Utilisateur",
     "versionMismatchWarning": "Avertissement de compatibilité de version",
     "versionMismatchWarningMessage": "{warning} : {detail} Consultez https://docs.comfy.org/installation/update_comfyui#common-update-issues pour les instructions de mise à jour.",
@@ -1654,12 +1618,6 @@
       "title": "Ce flux de travail a des nœuds manquants"
     }
   },
-  "nightly": {
-    "badge": {
-      "label": "Version de prévisualisation",
-      "tooltip": "Vous utilisez une version nightly de ComfyUI. Veuillez utiliser le bouton de retour pour partager vos impressions sur ces fonctionnalités."
-    }
-  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
@@ -2174,14 +2132,12 @@
     "viewControls": "Contrôles d'affichage"
   },
   "sideToolbar": {
-    "activeJobStatus": "Tâche active : {status}",
     "assets": "Ressources",
     "backToAssets": "Retour à toutes les ressources",
     "browseTemplates": "Parcourir les modèles d'exemple",
     "downloads": "Téléchargements",
     "generatedAssetsHeader": "Ressources générées",
     "helpCenter": "Centre d'aide",
-    "importedAssetsHeader": "Ressources importées",
     "labels": {
       "assets": "Ressources",
       "console": "Console",
@@ -2226,7 +2182,6 @@
     "queue": "File d'attente",
     "queueProgressOverlay": {
       "activeJobs": "{count} travail actif | {count} travaux actifs",
-      "activeJobsShort": "{count} actif(s) | {count} actif(s)",
       "activeJobsSuffix": "travaux actifs",
       "cancelJobTooltip": "Annuler le travail",
       "clearHistory": "Effacer l’historique de la file d’attente",

src/locales/ja/main.json

@@ -24,7 +24,6 @@
     "assets": "アセット",
     "baseModels": "ベースモデル",
     "browseAssets": "アセットを閲覧",
-    "byType": "タイプ別",
     "checkpoints": "チェックポイント",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "例：",
@@ -46,10 +45,6 @@
       "failed": "ダウンロードに失敗しました",
       "inProgress": "{assetName}をダウンロード中..."
     },
-    "emptyImported": {
-      "canImport": "まだインポートされたモデルはありません。「モデルをインポート」をクリックして追加してください。",
-      "restricted": "パーソナルモデルはCreator以上のプランでのみ利用可能です。"
-    },
     "errorFileTooLarge": "ファイルが許可された最大サイズを超えています",
     "errorFormatNotAllowed": "SafeTensor形式のみ許可されています",
     "errorModelTypeNotSupported": "このモデルタイプはサポートされていません",
@@ -66,7 +61,6 @@
     "finish": "完了",
     "genericLinkPlaceholder": "ここにリンクを貼り付けてください",
     "importAnother": "別のファイルをインポート",
-    "imported": "インポート済み",
     "jobId": "ジョブID",
     "loadingModels": "{type}を読み込み中...",
     "maxFileSize": "最大ファイルサイズ：{size}",
@@ -76,29 +70,6 @@
       "threeDModelPlaceholder": "3Dモデル"
     },
     "modelAssociatedWithLink": "ご提供いただいたリンクに関連付けられているモデル：",
-    "modelInfo": {
-      "addBaseModel": "ベースモデルを追加...",
-      "addTag": "タグを追加...",
-      "additionalTags": "追加タグ",
-      "baseModelUnknown": "ベースモデル不明",
-      "basicInfo": "基本情報",
-      "compatibleBaseModels": "互換性のあるベースモデル",
-      "description": "説明",
-      "descriptionNotSet": "説明が設定されていません",
-      "descriptionPlaceholder": "このモデルの説明を追加...",
-      "displayName": "表示名",
-      "fileName": "ファイル名",
-      "modelDescription": "モデル説明",
-      "modelTagging": "モデルタグ付け",
-      "modelType": "モデルタイプ",
-      "noAdditionalTags": "追加タグなし",
-      "selectModelPrompt": "モデルを選択して情報を表示してください",
-      "selectModelType": "モデルタイプを選択...",
-      "source": "ソース",
-      "title": "モデル情報",
-      "triggerPhrases": "トリガーフレーズ",
-      "viewOnSource": "{source} で表示"
-    },
     "modelName": "モデル名",
     "modelNamePlaceholder": "このモデルの名前を入力してください",
     "modelTypeSelectorLabel": "モデルの種類は何ですか？",
@@ -713,7 +684,6 @@
     "clearAll": "すべてクリア",
     "clearFilters": "フィルターをクリア",
     "close": "閉じる",
-    "closeDialog": "ダイアログを閉じる",
     "color": "色",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "ComfyOrgロゴ",
@@ -792,8 +762,6 @@
     "goToNode": "ノードに移動",
     "graphNavigation": "グラフナビゲーション",
     "halfSpeed": "0.5倍速",
-    "hideLeftPanel": "左パネルを非表示",
-    "hideRightPanel": "右パネルを非表示",
     "icon": "アイコン",
     "imageFailedToLoad": "画像の読み込みに失敗しました",
     "imagePreview": "画像プレビュー - 矢印キーで画像を切り替え",
@@ -835,7 +803,6 @@
     "name": "名前",
     "newFolder": "新しいフォルダー",
     "next": "次へ",
-    "nightly": "NIGHTLY",
     "no": "いいえ",
     "noAudioRecorded": "音声が録音されていません",
     "noItems": "項目がありません",
@@ -925,9 +892,7 @@
     "selectedFile": "選択されたファイル",
     "setAsBackground": "背景として設定",
     "settings": "設定",
-    "showLeftPanel": "左パネルを表示",
     "showReport": "レポートを表示",
-    "showRightPanel": "右パネルを表示",
     "singleSelectDropdown": "単一選択ドロップダウン",
     "sort": "並び替え",
     "source": "ソース",
@@ -950,7 +915,6 @@
     "updating": "更新中",
     "upload": "アップロード",
     "usageHint": "使用ヒント",
-    "use": "使用",
     "user": "ユーザー",
     "versionMismatchWarning": "バージョン互換性の警告",
     "versionMismatchWarningMessage": "{warning}: {detail} 更新手順については https://docs.comfy.org/installation/update_comfyui#common-update-issues をご覧ください。",
@@ -1654,12 +1618,6 @@
       "title": "このワークフローには不足しているノードがあります"
     }
   },
-  "nightly": {
-    "badge": {
-      "label": "プレビュー版",
-      "tooltip": "現在、ComfyUI のナイトリーバージョンを使用しています。これらの機能についてご意見があれば、フィードバックボタンからお知らせください。"
-    }
-  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
@@ -2174,14 +2132,12 @@
     "viewControls": "ビューコントロール"
   },
   "sideToolbar": {
-    "activeJobStatus": "アクティブジョブ: {status}",
     "assets": "アセット",
     "backToAssets": "すべてのアセットに戻る",
     "browseTemplates": "サンプルテンプレートを表示",
     "downloads": "ダウンロード",
     "generatedAssetsHeader": "生成されたアセット",
     "helpCenter": "ヘルプセンター",
-    "importedAssetsHeader": "インポート済みアセット",
     "labels": {
       "assets": "アセット",
       "console": "コンソール",
@@ -2226,7 +2182,6 @@
     "queue": "キュー",
     "queueProgressOverlay": {
       "activeJobs": "{count}件のアクティブジョブ",
-      "activeJobsShort": "{count} 件のアクティブ | {count} 件のアクティブ",
       "activeJobsSuffix": "アクティブジョブ",
       "cancelJobTooltip": "ジョブをキャンセル",
       "clearHistory": "ジョブキュー履歴をクリア",

src/locales/ko/main.json

@@ -24,7 +24,6 @@
     "assets": "에셋",
     "baseModels": "베이스 모델",
     "browseAssets": "에셋 탐색",
-    "byType": "유형별",
     "checkpoints": "체크포인트",
     "civitaiLinkExample": "{example} {link}",
     "civitaiLinkExampleStrong": "예시:",
@@ -46,10 +45,6 @@
       "failed": "다운로드 실패",
       "inProgress": "{assetName} 다운로드 중..."
     },
-    "emptyImported": {
-      "canImport": "아직 가져온 모델이 없습니다. \"모델 가져오기\"를 클릭하여 직접 추가하세요.",
-      "restricted": "개인 모델은 Creator 등급 이상에서만 사용할 수 있습니다."
-    },
     "errorFileTooLarge": "파일이 허용된 최대 크기 제한을 초과했습니다",
     "errorFormatNotAllowed": "SafeTensor 형식만 허용됩니다",
     "errorModelTypeNotSupported": "이 모델 유형은 지원되지 않습니다",
@@ -66,7 +61,6 @@
     "finish": "완료",
     "genericLinkPlaceholder": "여기에 링크를 붙여넣으세요",
     "importAnother": "다른 항목 가져오기",
-    "imported": "가져온 항목",
     "jobId": "작업 ID",
     "loadingModels": "{type} 불러오는 중...",
     "maxFileSize": "최대 파일 크기: {size}",
@@ -76,29 +70,6 @@
       "threeDModelPlaceholder": "3D 모델"
     },
     "modelAssociatedWithLink": "제공하신 링크와 연결된 모델:",
-    "modelInfo": {
-      "addBaseModel": "베이스 모델 추가...",
-      "addTag": "태그 추가...",
-      "additionalTags": "추가 태그",
-      "baseModelUnknown": "베이스 모델 알 수 없음",
-      "basicInfo": "기본 정보",
-      "compatibleBaseModels": "호환 가능한 베이스 모델",
-      "description": "설명",
-      "descriptionNotSet": "설정된 설명 없음",
-      "descriptionPlaceholder": "이 모델에 대한 설명을 추가하세요...",
-      "displayName": "표시 이름",
-      "fileName": "파일 이름",
-      "modelDescription": "모델 설명",
-      "modelTagging": "모델 태깅",
-      "modelType": "모델 유형",
-      "noAdditionalTags": "추가 태그 없음",
-      "selectModelPrompt": "모델을 선택하여 정보를 확인하세요",
-      "selectModelType": "모델 유형 선택...",
-      "source": "소스",
-      "title": "모델 정보",
-      "triggerPhrases": "트리거 문구",
-      "viewOnSource": "{source}에서 보기"
-    },
     "modelName": "모델 이름",
     "modelNamePlaceholder": "이 모델의 이름을 입력하세요",
     "modelTypeSelectorLabel": "모델 유형은 무엇인가요?",
@@ -713,7 +684,6 @@
     "clearAll": "모두 지우기",
     "clearFilters": "필터 지우기",
     "close": "닫기",
-    "closeDialog": "대화 상자 닫기",
     "color": "색상",
     "comfy": "Comfy",
     "comfyOrgLogoAlt": "ComfyOrg 로고",
@@ -792,8 +762,6 @@
     "goToNode": "노드로 이동",
     "graphNavigation": "그래프 탐색",
     "halfSpeed": "0.5배속",
-    "hideLeftPanel": "왼쪽 패널 숨기기",
-    "hideRightPanel": "오른쪽 패널 숨기기",
     "icon": "아이콘",
     "imageFailedToLoad": "이미지를 로드하지 못했습니다.",
     "imagePreview": "이미지 미리보기 - 화살표 키를 사용하여 이미지 간 이동",
@@ -835,7 +803,6 @@
     "name": "이름",
     "newFolder": "새 폴더",
     "next": "다음",
-    "nightly": "NIGHTLY",
     "no": "아니오",
     "noAudioRecorded": "녹음된 오디오가 없습니다",
     "noItems": "항목 없음",
@@ -925,9 +892,7 @@
     "selectedFile": "선택된 파일",
     "setAsBackground": "배경으로 설정",
     "settings": "설정",
-    "showLeftPanel": "왼쪽 패널 표시",
     "showReport": "보고서 보기",
-    "showRightPanel": "오른쪽 패널 표시",
     "singleSelectDropdown": "단일 선택 드롭다운",
     "sort": "정렬",
     "source": "소스",
@@ -950,7 +915,6 @@
     "updating": "업데이트 중",
     "upload": "업로드",
     "usageHint": "사용 힌트",
-    "use": "사용",
     "user": "사용자",
     "versionMismatchWarning": "버전 호환성 경고",
     "versionMismatchWarningMessage": "{warning}: {detail} 업데이트 지침은 https://docs.comfy.org/installation/update_comfyui#common-update-issues 를 방문하세요.",
@@ -1654,12 +1618,6 @@
       "title": "이 워크플로우에 누락된 노드가 있습니다"
     }
   },
-  "nightly": {
-    "badge": {
-      "label": "미리보기 버전",
-      "tooltip": "현재 ComfyUI의 나이트리 버전을 사용 중입니다. 이 기능들에 대한 의견을 피드백 버튼을 통해 공유해 주세요."
-    }
-  },
   "nodeCategories": {
     "": "",
     "3d": "3d",
@@ -2174,14 +2132,12 @@
     "viewControls": "보기 컨트롤"
   },
   "sideToolbar": {
-    "activeJobStatus": "진행 중인 작업: {status}",
     "assets": "에셋",
     "backToAssets": "모든 에셋으로 돌아가기",
     "browseTemplates": "예제 템플릿 탐색",
     "downloads": "다운로드",
     "generatedAssetsHeader": "생성된 에셋",
     "helpCenter": "도움말 센터",
-    "importedAssetsHeader": "가져온 에셋",
     "labels": {
       "assets": "에셋",
       "console": "콘솔",
@@ -2226,7 +2182,6 @@
     "queue": "실행 대기열",
     "queueProgressOverlay": {
       "activeJobs": "{count}개의 활성 작업",
-      "activeJobsShort": "{count}개 활성",
       "activeJobsSuffix": "활성 작업",
       "cancelJobTooltip": "작업 취소",
       "clearHistory": "작업 대기열 기록 삭제",