Merge branch 'synap5e/disable-change-model-tag-on-core' into synap5e/assets-mode-sidebar

/view_metadata takes no path index and searches roots in order, so
metadata only misresolves on relative-path collisions; the root-0
targeting applies to preview URLs and row identity.

knip.config.ts

@@ -54,14 +54,6 @@ const config: KnipConfig = {
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
-    // Pending integration in the workspace-settings stacked PRs: consumed by
-    // split/auto-reload + split/allowlist (Switch) and split/member-auditing
-    // + split/allowlist (Pagination); each consumer removes its entry
-    'src/components/ui/switch/Switch.vue',
-    'src/components/ui/pagination/Pagination.vue',
-    // Pending integration: consumed by split/plan-credits-tabs (Overview) and
-    // split/allowlist (Models); each consumer removes this entry
-    'src/platform/workspace/composables/useAutoPageSize.ts',
     // Marketing media tooling — adopted by pages in a follow-up PR
     'apps/website/src/components/common/SiteVideo.vue',
     'apps/website/src/utils/marketingImage.ts',

src/components/common/DropdownMenu.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ZIndex } from '@primeuix/utils/zindex'
 import type { MenuItem } from 'primevue/menuitem'
 import {
   DropdownMenuArrow,
@@ -12,21 +11,15 @@ import { computed, ref, toValue } from 'vue'
 
 import DropdownItem from '@/components/common/DropdownItem.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useModalLiftedZIndex } from '@/composables/useModalLiftedZIndex'
 import { cn } from '@comfyorg/tailwind-utils'
 import type { ButtonVariants } from '../ui/button/button.variants'
 
-// Shared base for @primeuix's auto-incrementing 'modal' z-index counter.
-const MODAL_BASE_Z_INDEX = 1700
-
 defineOptions({
   inheritAttrs: false
 })
 
-const {
-  itemClass: itemProp,
-  contentClass: contentProp,
-  modal = true
-} = defineProps<{
+const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
   entries?: MenuItem[]
   icon?: string
   to?: string | HTMLElement
@@ -34,7 +27,6 @@ const {
   contentClass?: string
   buttonSize?: ButtonVariants['size']
   buttonClass?: string
-  modal?: boolean
 }>()
 
 const itemClass = computed(() =>
@@ -51,19 +43,12 @@ const contentClass = computed(() =>
   )
 )
 
-// Body-portaled content keeps its static z-1700 unless a dialog that joined
-// @primeuix's auto-incrementing 'modal' counter is open above it; then lift
-// past that dialog so the menu isn't hidden behind it.
 const open = ref(false)
-const contentStyle = computed(() => {
-  if (!open.value) return undefined
-  const topZIndex = ZIndex.getCurrent('modal')
-  return topZIndex >= MODAL_BASE_Z_INDEX ? { zIndex: topZIndex + 1 } : undefined
-})
+const contentStyle = useModalLiftedZIndex(open)
 </script>
 
 <template>
-  <DropdownMenuRoot v-model:open="open" :modal>
+  <DropdownMenuRoot v-model:open="open">
     <DropdownMenuTrigger as-child>
       <slot name="button">
         <Button :size="buttonSize ?? 'icon'" :class="buttonClass">

src/components/common/SelectionBar.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="relative mx-2">
-    <div
-      class="absolute bottom-6 left-1/2 z-40 flex w-full max-w-78 -translate-x-1/2 items-center gap-2 rounded-lg bg-base-foreground p-2 text-base-background shadow-interface"
-    >
-      <Button
-        v-tooltip.top="{ value: deselectLabel, showDelay: 300 }"
-        variant="inverted"
-        size="icon-lg"
-        type="button"
-        :aria-label="deselectLabel"
-        class="rounded-lg hover:bg-base-background/10"
-        @click="emit('deselect')"
-      >
-        <i class="icon-[lucide--x] size-4" />
-      </Button>
-      <span class="pr-6 text-sm font-bold whitespace-nowrap tabular-nums">
-        {{ label }}
-      </span>
-      <div class="ml-auto flex shrink-0 items-center gap-1">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-
-defineProps<{
-  /** The "N selected" text; the caller formats it (pluralization, wording). */
-  label: string
-  /** Accessible label + tooltip for the deselect button. */
-  deselectLabel: string
-}>()
-
-const emit = defineEmits<{
-  deselect: []
-}>()
-</script>

src/components/common/UserCredit.vue

@@ -14,7 +14,7 @@
       class="p-1 text-amber-400"
     >
       <template #icon>
-        <i class="icon-[lucide--coins]" />
+        <i class="icon-[lucide--component]" />
       </template>
     </Tag>
     <div :class="textClass">

src/components/dialog/GlobalDialog.test.ts

@@ -426,7 +426,7 @@ describe('shouldPreventRekaDismiss', () => {
     expect(event.defaultPrevented).toBe(true)
   })
 
-  it.for(['p-dialog', 'p-select-overlay'])(
+  it.for(['p-dialog', 'p-select-overlay', 'p-toast'])(
     'focus-outside on a sibling %s portal does not dismiss the parent',
     (className) => {
       const overlay = document.createElement('div')

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -86,7 +86,7 @@
           @max-reached="showCeilingWarning = true"
         >
           <template #prefix>
-            <i class="icon-[lucide--coins] size-4 shrink-0 text-gold-500" />
+            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
           </template>
         </FormattedNumberStepper>
       </div>
@@ -98,7 +98,7 @@
       v-if="isBelowMin"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
     >
-      <i class="icon-[lucide--coins] size-4" />
+      <i class="icon-[lucide--component] size-4" />
       {{
         $t('credits.topUp.minRequired', {
           credits: formatNumber(usdToCredits(MIN_AMOUNT))
@@ -109,7 +109,7 @@
       v-if="showCeilingWarning"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
     >
-      <i class="icon-[lucide--coins] size-4" />
+      <i class="icon-[lucide--component] size-4" />
       {{
         $t('credits.topUp.maxAllowed', {
           credits: formatNumber(usdToCredits(MAX_AMOUNT))

src/components/dialog/rekaPrimeVueBridge.ts

@@ -1,10 +1,13 @@
 // PrimeVue overlays (Select, ColorPicker, Popover, Autocomplete, stacked
-// PrimeVue Dialogs) teleport to body. Reka treats clicks on body-portaled
-// elements as outside its dialog and would auto-dismiss on the first
-// interaction, tearing the overlay down mid-interaction. Treat any
-// PrimeVue overlay click as inside.
+// PrimeVue Dialogs, Toasts) teleport to body. Reka treats clicks on
+// body-portaled elements as outside its dialog and would auto-dismiss on the
+// first interaction, tearing the overlay down mid-interaction. Treat any
+// PrimeVue overlay click as inside. Toasts matter for focus-outside: when a
+// button disables itself mid-action (e.g. a confirm entering its loading
+// state), the browser drops focus and recovery can land on the toast's close
+// button, which must not dismiss the dialog underneath.
 const PRIMEVUE_OVERLAY_SELECTORS =
-  '.p-select-overlay, .p-colorpicker-panel, .p-popover, .p-autocomplete-overlay, .p-overlay, .p-overlay-mask, .p-dialog'
+  '.p-select-overlay, .p-colorpicker-panel, .p-popover, .p-autocomplete-overlay, .p-overlay, .p-overlay-mask, .p-dialog, .p-toast'
 
 // Reka portals its own dialogs / popovers / menus into the body too. When a
 // nested Reka layer opens on top of a non-modal parent, the parent's
@@ -12,7 +15,7 @@ const PRIMEVUE_OVERLAY_SELECTORS =
 // dismiss itself. These selectors cover the portaled roots so we can treat
 // interactions on them as inside.
 const REKA_PORTAL_SELECTORS =
-  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"], [aria-haspopup="menu"], [aria-haspopup="dialog"], [aria-haspopup="listbox"]'
+  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]'
 
 const OUTSIDE_LAYER_SELECTORS = `${PRIMEVUE_OVERLAY_SELECTORS}, ${REKA_PORTAL_SELECTORS}`
 

src/components/node/CreditBadge.vue

@@ -7,7 +7,7 @@
       )
     "
   >
-    <i class="icon-[lucide--coins] h-full bg-amber-400" />
+    <i class="icon-[lucide--component] h-full bg-amber-400" />
     <span class="truncate" v-text="text" />
   </span>
   <span

src/components/searchbox/v2/NodeSearchListItem.vue

@@ -51,7 +51,7 @@
             >
               <i
                 aria-hidden="true"
-                class="icon-[lucide--coins] size-3 text-amber-400"
+                class="icon-[lucide--component] size-3 text-amber-400"
               />
               <i
                 aria-hidden="true"

src/components/sidebar/tabs/ModelLibrarySidebarTab.test.ts

@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { fromPartial } from '@total-typescript/shoehorn'
+import userEvent from '@testing-library/user-event'
 import { render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -18,7 +19,10 @@ const {
   mockGetNodeProvider,
   mockToggleNodeOnEvent,
   mockRefreshModelFolder,
-  downloadStoreState
+  mockLoadModels,
+  downloadStoreState,
+  settingState,
+  modelsState
 } = vi.hoisted(() => {
   let capturedRoot: TreeExplorerNode<unknown> | null = null
   return {
@@ -33,7 +37,13 @@ const {
     mockGetNodeProvider: vi.fn(),
     mockToggleNodeOnEvent: vi.fn(),
     mockRefreshModelFolder: vi.fn().mockResolvedValue(undefined),
-    downloadStoreState: { setLastCompleted: (_: unknown) => {} }
+    mockLoadModels: vi.fn().mockResolvedValue([]),
+    downloadStoreState: { setLastCompleted: (_: unknown) => {} },
+    settingState: { useAssetAPI: false, autoLoadAll: false },
+    modelsState: {
+      push: (_: unknown) => {},
+      reset: () => {}
+    }
   }
 })
 
@@ -54,20 +64,30 @@ const mockModel = fromPartial<ComfyModelDef>({
   searchable: 'checkpoints/model.safetensors'
 })
 
-vi.mock('@/stores/modelStore', () => ({
-  ResourceState: {
-    Loading: 'loading',
-    Loaded: 'loaded'
-  },
-  useModelStore: () => ({
-    modelFolders: [],
-    models: [mockModel],
-    loadModels: vi.fn().mockResolvedValue([]),
-    loadModelFolders: vi.fn().mockResolvedValue([]),
-    refresh: vi.fn().mockResolvedValue(undefined),
-    refreshModelFolder: mockRefreshModelFolder
-  })
-}))
+vi.mock('@/stores/modelStore', async () => {
+  const { reactive } = await import('vue')
+  const models = reactive<ComfyModelDef[]>([])
+  modelsState.push = (model: unknown) => {
+    models.push(model as ComfyModelDef)
+  }
+  modelsState.reset = () => {
+    models.splice(0, models.length, mockModel)
+  }
+  return {
+    ResourceState: {
+      Loading: 'loading',
+      Loaded: 'loaded'
+    },
+    useModelStore: () => ({
+      modelFolders: [],
+      models,
+      loadModels: mockLoadModels,
+      loadModelFolders: vi.fn().mockResolvedValue([]),
+      refresh: vi.fn().mockResolvedValue(undefined),
+      refreshModelFolder: mockRefreshModelFolder
+    })
+  }
+})
 
 vi.mock('@/stores/assetDownloadStore', async () => {
   const { ref } = await import('vue')
@@ -92,6 +112,10 @@ vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => ({
     get: vi.fn((key: string) => {
       if (key === 'Comfy.ModelLibrary.NameFormat') return 'filename'
+      if (key === 'Comfy.Assets.UseAssetAPI') return settingState.useAssetAPI
+      if (key === 'Comfy.ModelLibrary.AutoLoadAll') {
+        return settingState.autoLoadAll
+      }
       return false
     })
   })
@@ -104,26 +128,45 @@ vi.mock('@/composables/useTreeExpansion', () => ({
   })
 }))
 
-vi.mock('@/components/common/TreeExplorer.vue', () => ({
-  default: {
-    name: 'TreeExplorer',
-    template: '<div data-testid="tree-explorer" />',
-    props: ['root', 'expandedKeys'],
-    setup(props: { root: TreeExplorerNode<unknown> }) {
-      captureRoot(props.root)
+vi.mock('@/components/common/TreeExplorer.vue', async () => {
+  const { watchEffect } = await import('vue')
+  return {
+    default: {
+      name: 'TreeExplorer',
+      template: '<div data-testid="tree-explorer" />',
+      props: ['root', 'expandedKeys'],
+      setup(props: { root: TreeExplorerNode<unknown> }) {
+        watchEffect(() => captureRoot(props.root))
+      }
     }
   }
-}))
+})
 
 vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
   default: {
     name: 'SearchInput',
-    template: '<input data-testid="search-input" />',
+    template: '<input data-testid="search-input" @input="onInput" />',
     props: ['modelValue', 'placeholder'],
-    setup() {
-      return { focus: vi.fn() }
-    },
-    expose: ['focus']
+    emits: ['update:modelValue', 'search'],
+    setup(
+      _props: unknown,
+      {
+        emit,
+        expose
+      }: {
+        emit: (event: 'update:modelValue' | 'search', value: string) => void
+        expose: (exposed: Record<string, unknown>) => void
+      }
+    ) {
+      expose({ focus: vi.fn() })
+      return {
+        onInput: (event: Event) => {
+          const value = (event.target as HTMLInputElement).value
+          emit('update:modelValue', value)
+          emit('search', value)
+        }
+      }
+    }
   }
 }))
 
@@ -134,7 +177,8 @@ vi.mock('./SidebarTopArea.vue', () => ({
 vi.mock('./SidebarTabTemplate.vue', () => ({
   default: {
     name: 'SidebarTabTemplate',
-    template: '<div><slot name="header" /><slot name="body" /></div>'
+    template:
+      '<div><slot name="tool-buttons" /><slot name="header" /><slot name="body" /></div>'
   }
 }))
 
@@ -157,13 +201,17 @@ describe('ModelLibrarySidebarTab', () => {
     vi.clearAllMocks()
     resetRoot()
     downloadStoreState.setLastCompleted(null)
+    settingState.useAssetAPI = false
+    settingState.autoLoadAll = false
+    modelsState.reset()
   })
 
   function renderComponent() {
     return render(ModelLibrarySidebarTab, {
       global: {
         plugins: [createTestingPinia({ stubActions: false }), i18n],
-        stubs: { teleport: true }
+        stubs: { teleport: true },
+        directives: { tooltip: {} }
       }
     })
   }
@@ -236,4 +284,67 @@ describe('ModelLibrarySidebarTab', () => {
 
     expect(mockRefreshModelFolder).not.toHaveBeenCalled()
   })
+
+  describe('search', () => {
+    it('updates active search results when a reload adds a matching model', async () => {
+      const user = userEvent.setup()
+      renderComponent()
+      await nextTick()
+
+      await user.type(screen.getByTestId('search-input'), 'model')
+      await nextTick()
+
+      expect(mockLoadModels).toHaveBeenCalled()
+      const leafLabels = () => {
+        const { children: folders = [] } = getRoot()
+        return folders.flatMap(({ children: leaves = [] }) =>
+          leaves.map((leaf) => leaf.label)
+        )
+      }
+      expect(leafLabels()).toEqual(['model'])
+
+      // A completed scan reloads the store while the search is still active.
+      modelsState.push(
+        fromPartial<ComfyModelDef>({
+          key: 'checkpoints/model-new.safetensors',
+          file_name: 'model-new.safetensors',
+          simplified_file_name: 'model-new',
+          title: 'Model New',
+          directory: 'checkpoints',
+          searchable: 'checkpoints/model-new.safetensors'
+        })
+      )
+      await nextTick()
+
+      expect(leafLabels()).toEqual(['model', 'model-new'])
+    })
+  })
+
+  describe('asset mode', () => {
+    it('hides the load-all button and eager-loads models on mount', async () => {
+      settingState.useAssetAPI = true
+      renderComponent()
+      await nextTick()
+
+      expect(screen.queryByLabelText('g.loadAllFolders')).toBeNull()
+      expect(screen.getByLabelText('g.refresh')).toBeInTheDocument()
+      expect(mockLoadModels).toHaveBeenCalledTimes(1)
+    })
+
+    it('legacy mode keeps the load-all button and stays lazy by default', async () => {
+      renderComponent()
+      await nextTick()
+
+      expect(screen.getByLabelText('g.loadAllFolders')).toBeInTheDocument()
+      expect(mockLoadModels).not.toHaveBeenCalled()
+    })
+
+    it('legacy mode still honors AutoLoadAll', async () => {
+      settingState.autoLoadAll = true
+      renderComponent()
+      await nextTick()
+
+      expect(mockLoadModels).toHaveBeenCalledTimes(1)
+    })
+  })
 })

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -11,6 +11,7 @@
         <i class="icon-[lucide--refresh-cw] size-4" />
       </Button>
       <Button
+        v-if="!usesAssetAPI"
         v-tooltip.bottom="$t('g.loadAllFolders')"
         variant="muted-textonly"
         size="icon"
@@ -77,28 +78,28 @@ import { buildTree } from '@/utils/treeUtil'
 const modelStore = useModelStore()
 const modelToNodeStore = useModelToNodeStore()
 const settingStore = useSettingStore()
+const usesAssetAPI = computed(() =>
+  settingStore.get('Comfy.Assets.UseAssetAPI')
+)
 const assetDownloadStore = useAssetDownloadStore()
 const searchBoxRef = ref()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
-const filteredModels = ref<ComfyModelDef[]>([])
+const filteredModels = computed<ComfyModelDef[]>(() => {
+  const search = searchQuery.value.toLocaleLowerCase()
+  if (!search) return []
+  return modelStore.models.filter((model) => model.searchable.includes(search))
+})
+
 const handleSearch = async (query: string) => {
   if (!query) {
-    filteredModels.value = []
     expandedKeys.value = {}
     return
   }
-  // Load all models to ensure we have the latest data
+  // Load all models to ensure results cover folders not yet opened
   await modelStore.loadModels()
-  const search = query.toLocaleLowerCase()
-  filteredModels.value = modelStore.models.filter((model: ComfyModelDef) => {
-    return model.searchable.includes(search)
-  })
-
-  await nextTick()
-  expandNode(root.value)
 }
 
 type ModelOrFolder = ComfyModelDef | ModelFolder
@@ -112,6 +113,12 @@ const root = computed<TreeNode>(() => {
   )
 })
 
+watch(root, async (newRoot) => {
+  if (!searchQuery.value) return
+  await nextTick()
+  expandNode(newRoot)
+})
+
 const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
   const nameFormat = settingStore.get('Comfy.ModelLibrary.NameFormat')
   const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ModelOrFolder> => {
@@ -193,7 +200,13 @@ watch(
 
 onMounted(async () => {
   searchBoxRef.value?.focus()
-  if (settingStore.get('Comfy.ModelLibrary.AutoLoadAll')) {
+  // In asset mode the whole library resolves from one cached walk, so eager
+  // loading is cheap and keeps search and folder badges complete from the
+  // start; AutoLoadAll remains the opt-in for the request-per-folder legacy path.
+  if (
+    usesAssetAPI.value ||
+    settingStore.get('Comfy.ModelLibrary.AutoLoadAll')
+  ) {
     await modelStore.loadModels()
   }
 })

src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue

@@ -26,6 +26,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ComfyModelDef } from '@/stores/modelStore'
+import { getModelPreviewUrl } from '@/stores/modelStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 import ModelPreview from './ModelPreview.vue'
@@ -37,17 +38,7 @@ const props = defineProps<{
 // Note: The leaf node should always have a model definition on node.data.
 const modelDef = computed<ComfyModelDef>(() => props.node.data!)
 
-const modelPreviewUrl = computed(() => {
-  if (modelDef.value.image) {
-    return modelDef.value.image
-  }
-  const folder = modelDef.value.directory
-  const path_index = modelDef.value.path_index
-  const extension = modelDef.value.file_name.split('.').pop()
-  const filename = modelDef.value.file_name.replace(`.${extension}`, '.webp')
-  const encodedFilename = encodeURIComponent(filename).replace(/%2F/g, '/')
-  return `/api/experiment/models/preview/${folder}/${path_index}/${encodedFilename}`
-})
+const modelPreviewUrl = computed(() => getModelPreviewUrl(modelDef.value))
 
 const previewRef = ref<InstanceType<typeof ModelPreview> | null>(null)
 const modelPreviewStyle = ref<CSSProperties>({

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -31,7 +31,7 @@
 
     <!-- Credits Section -->
     <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
-      <i class="icon-[lucide--coins] text-sm text-amber-400" />
+      <i class="icon-[lucide--component] text-sm text-amber-400" />
       <Skeleton v-if="isLoading" width="4rem" height="1.25rem" class="w-full" />
       <span v-else class="text-base font-semibold text-base-foreground">{{
         formattedBalance

src/components/ui/pagination/Pagination.vue

@@ -1,72 +0,0 @@
-<template>
-  <PaginationRoot
-    :page="page"
-    :total="total"
-    :items-per-page="itemsPerPage"
-    :sibling-count="1"
-    show-edges
-    @update:page="(p: number) => emit('update:page', p)"
-  >
-    <div class="flex items-center gap-1">
-      <PaginationPrev as-child>
-        <Button variant="muted-textonly" size="md" class="text-sm">
-          <i class="icon-[lucide--chevron-left] size-4" />
-          {{ $t('g.previous') }}
-        </Button>
-      </PaginationPrev>
-      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-        <template v-for="(item, index) in items" :key="index">
-          <PaginationListItem
-            v-if="item.type === 'page'"
-            :value="item.value"
-            as-child
-          >
-            <Button
-              :variant="item.value === page ? 'secondary' : 'muted-textonly'"
-              size="icon"
-            >
-              {{ item.value }}
-            </Button>
-          </PaginationListItem>
-          <PaginationEllipsis v-else :index="index" :class="ellipsisClass">
-            …
-          </PaginationEllipsis>
-        </template>
-      </PaginationList>
-      <PaginationNext as-child>
-        <Button variant="muted-textonly" size="md" class="text-sm">
-          {{ $t('g.next') }}
-          <i class="icon-[lucide--chevron-right] size-4" />
-        </Button>
-      </PaginationNext>
-    </div>
-  </PaginationRoot>
-</template>
-
-<script setup lang="ts">
-import {
-  PaginationEllipsis,
-  PaginationList,
-  PaginationListItem,
-  PaginationNext,
-  PaginationPrev,
-  PaginationRoot
-} from 'reka-ui'
-
-import Button from '@/components/ui/button/Button.vue'
-
-const {
-  page = 1,
-  total,
-  itemsPerPage = 10
-} = defineProps<{
-  page?: number
-  total: number
-  itemsPerPage?: number
-}>()
-
-const emit = defineEmits<{ 'update:page': [page: number] }>()
-
-const ellipsisClass =
-  'inline-flex size-8 items-center justify-center text-sm text-muted-foreground'
-</script>

src/components/ui/search-input/searchInput.variants.ts

@@ -35,7 +35,7 @@ export const searchInputSizeConfig = {
     icon: 'size-4',
     iconPos: 'left-2.5',
     inputPl: 'pl-8',
-    inputText: 'text-sm',
+    inputText: 'text-xs',
     clearPos: 'left-2.5'
   },
   xl: {

src/components/ui/switch/Switch.vue

@@ -1,30 +0,0 @@
-<template>
-  <SwitchRoot
-    v-model="checked"
-    :disabled
-    :class="
-      cn(
-        'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent px-0.5 transition-colors focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-        checked ? 'bg-primary' : 'bg-interface-stroke'
-      )
-    "
-  >
-    <SwitchThumb
-      :class="
-        cn(
-          'pointer-events-none block size-4 rounded-full bg-white shadow-sm transition-transform',
-          checked ? 'translate-x-3.5' : 'translate-x-0'
-        )
-      "
-    />
-  </SwitchRoot>
-</template>
-
-<script setup lang="ts">
-import { SwitchRoot, SwitchThumb } from 'reka-ui'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { disabled = false } = defineProps<{ disabled?: boolean }>()
-const checked = defineModel<boolean>({ default: false })
-</script>

src/components/ui/table/Table.vue

@@ -1,17 +0,0 @@
-<template>
-  <div :class="cn('relative w-full overflow-auto', className)">
-    <table
-      class="w-full caption-bottom border-separate border-spacing-0 text-sm"
-    >
-      <slot />
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableBody.vue

@@ -1,13 +0,0 @@
-<template>
-  <tbody :class="cn('[&_tr:last-child]:border-0', className)">
-    <slot />
-  </tbody>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableCell.vue

@@ -1,13 +0,0 @@
-<template>
-  <td :class="cn('px-2 py-2.5 align-middle whitespace-nowrap', className)">
-    <slot />
-  </td>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableHead.vue

@@ -1,21 +0,0 @@
-<template>
-  <th
-    scope="col"
-    :class="
-      cn(
-        'h-10 px-2 text-left align-middle text-sm font-normal whitespace-nowrap text-muted-foreground',
-        className
-      )
-    "
-  >
-    <slot />
-  </th>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableHeader.vue

@@ -1,15 +0,0 @@
-<template>
-  <thead
-    :class="cn('[&_tr]:border-b [&_tr]:border-interface-stroke/60', className)"
-  >
-    <slot />
-  </thead>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableRow.vue

@@ -1,20 +0,0 @@
-<template>
-  <tr
-    :class="
-      cn(
-        'border-b border-interface-stroke/60 transition-colors hover:bg-secondary-background/50 data-[state=selected]:bg-secondary-background/50',
-        className
-      )
-    "
-  >
-    <slot />
-  </tr>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/widget/layout/BaseModalLayout.vue

@@ -14,12 +14,7 @@
       >
         <header
           data-component-id="LeftPanelHeader"
-          :class="
-            cn(
-              'flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6',
-              headerHeightClass
-            )
-          "
+          class="flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6"
         >
           <slot name="leftPanelHeaderTitle" />
           <Button
@@ -38,12 +33,7 @@
       <div class="flex flex-col overflow-hidden bg-base-background">
         <header
           v-if="$slots.header"
-          :class="
-            cn(
-              'flex h-18 w-full items-center justify-between gap-2 px-6',
-              headerHeightClass
-            )
-          "
+          class="flex h-18 w-full items-center justify-between gap-2 px-6"
         >
           <div class="flex min-w-0 flex-1 gap-2">
             <Button
@@ -161,22 +151,20 @@ const SIZE_CLASSES = {
 } as const
 
 type ModalSize = keyof typeof SIZE_CLASSES
-type ContentPadding = 'default' | 'compact' | 'none' | 'flush'
+type ContentPadding = 'default' | 'compact' | 'none'
 
 const {
   contentTitle,
   rightPanelTitle,
   size = 'lg',
   leftPanelWidth = '14rem',
-  contentPadding = 'default',
-  headerHeightClass = 'h-18'
+  contentPadding = 'default'
 } = defineProps<{
   contentTitle: string
   rightPanelTitle?: string
   size?: ModalSize
   leftPanelWidth?: string
   contentPadding?: ContentPadding
-  headerHeightClass?: string
 }>()
 
 const sizeClasses = computed(() => SIZE_CLASSES[size])
@@ -216,10 +204,7 @@ const contentContainerClass = computed(() =>
   cn(
     'flex scrollbar-custom min-h-0 flex-1 flex-col overflow-y-auto',
     contentPadding === 'default' && 'px-6 pt-0 pb-10',
-    contentPadding === 'compact' && 'px-6 pt-0 pb-2',
-    // Keep the horizontal inset but let content run to the bottom edge (it
-    // clips there instead of ending above a padding gap).
-    contentPadding === 'flush' && 'px-6 pt-0'
+    contentPadding === 'compact' && 'px-6 pt-0 pb-2'
   )
 )
 

src/composables/billing/types.ts

@@ -107,8 +107,6 @@ export interface BillingState {
 
 export interface BillingContext extends BillingState, BillingActions {
   type: ComputedRef<BillingType>
-  /** Subscription paused on a failed payment (`subscriptionStatus === 'paused'`). */
-  isPaused: ComputedRef<boolean>
   /**
    * True when the active team workspace is still on a pre-credit-slider
    * (legacy) per-member tier plan, which keeps the old team pricing table.

src/composables/billing/useBillingContext.ts

@@ -147,7 +147,6 @@ function useBillingContextInternal(): BillingContext {
   const subscriptionStatus = computed(() =>
     toValue(activeContext.value.subscriptionStatus)
   )
-  const isPaused = computed(() => subscriptionStatus.value === 'paused')
   const tier = computed(() => toValue(activeContext.value.tier))
   const renewalDate = computed(() => toValue(activeContext.value.renewalDate))
 
@@ -302,7 +301,6 @@ function useBillingContextInternal(): BillingContext {
     isLegacyTeamPlan,
     billingStatus,
     subscriptionStatus,
-    isPaused,
     tier,
     renewalDate,
     getMaxSeats,

src/composables/useExternalLink.ts

@@ -90,9 +90,7 @@ export function useExternalLink() {
     githubFrontend: 'https://github.com/Comfy-Org/ComfyUI_frontend',
     githubElectron: 'https://github.com/Comfy-Org/electron',
     forum: 'https://forum.comfy.org/',
-    comfyOrg: 'https://www.comfy.org/',
-    teamPlanRequests:
-      'https://comfy-org.portal.usepylon.com/forms/team-plan-requests'
+    comfyOrg: 'https://www.comfy.org/'
   }
 
   /** Common doc paths for use with buildDocsUrl */

src/composables/useFeatureFlags.ts

@@ -33,7 +33,8 @@ export enum ServerFeatureFlag {
   SHOW_SIGNIN_BUTTON = 'show_signin_button',
   UNIFIED_CLOUD_AUTH = 'unified_cloud_auth',
   CONSOLIDATED_BILLING_ENABLED = 'consolidated_billing_enabled',
-  SIGNUP_TURNSTILE = 'signup_turnstile'
+  SIGNUP_TURNSTILE = 'signup_turnstile',
+  SUPPORTS_MODEL_TYPE_TAGS = 'supports_model_type_tags'
 }
 
 /**
@@ -208,6 +209,12 @@ export function useFeatureFlags() {
         remoteConfig.value.signup_turnstile,
         'off'
       )
+    },
+    get supportsModelTypeTags() {
+      return api.getServerFeature(
+        ServerFeatureFlag.SUPPORTS_MODEL_TYPE_TAGS,
+        false
+      )
     }
   })
 

src/locales/en/main.json

@@ -2593,7 +2593,7 @@
     "additionalCreditsInfo": "About additional credits",
     "additionalCredits": "Additional credits",
     "additionalCreditsInUse": "In use",
-    "usedAfterMonthly": "Used after plan credits run out",
+    "usedAfterMonthly": "Used after monthly runs out",
     "monthlyCreditsUsedUpTitle": "Monthly credits are used up. Refills {date}",
     "monthlyCreditsUsedUpTitleNoDate": "Monthly credits are used up",
     "monthlyCreditsUsedUpDescription": "You're now spending additional credits.",
@@ -2831,10 +2831,7 @@
       "planUpdated": "Your plan has been successfully updated.",
       "receiptEmailed": "A receipt has been emailed to you.",
       "sendInvites": "Send invites"
-    },
-    "enterprisePlanName": "Enterprise",
-    "percentUsed": "{percent}% used",
-    "usageProgress": "{used} of {total} credits used"
+    }
   },
   "userSettings": {
     "title": "My Account Settings",
@@ -2849,7 +2846,7 @@
   "workspacePanel": {
     "invite": "Invite",
     "inviteMember": "Invite member",
-    "inviteLimitReached": "Your workspace is at the member limit",
+    "inviteLimitReached": "You've reached the maximum of {count} members",
     "tabs": {
       "dashboard": "Dashboard",
       "planCredits": "Plan & Credits",
@@ -2864,17 +2861,12 @@
       "pendingInvitesCount": "{count} pending invite | {count} pending invites",
       "tabs": {
         "active": "Active",
-        "pendingCount": "Pending ({count})",
-        "membersCount": "Members ({count})",
-        "pending": "Pending"
+        "pendingCount": "Pending ({count})"
       },
       "columns": {
         "inviteDate": "Invite date",
         "expiryDate": "Expiry date",
-        "role": "Role",
-        "creditsUsed": "Credits used this month",
-        "email": "Email",
-        "lastActivity": "Last activity"
+        "role": "Role"
       },
       "actions": {
         "resendInvite": "Resend invite",
@@ -2890,22 +2882,14 @@
       "contactUs": "Contact us",
       "noInvites": "No pending invites",
       "noMembers": "No members",
-      "searchPlaceholder": "Search...",
-      "activity": {
-        "daysAgo": "{count} day ago | {count} days ago",
-        "hoursAgo": "{n} hr ago",
-        "justNow": "just now",
-        "minutesAgo": "{n} min ago"
-      },
-      "membersUsage": "{count} of {max} total members."
+      "searchPlaceholder": "Search..."
     },
     "menu": {
       "editWorkspace": "Edit workspace details",
       "leaveWorkspace": "Leave Workspace",
       "deleteWorkspace": "Delete Workspace",
       "deleteWorkspaceDisabledTooltip": "Cancel your workspace's active subscription first",
-      "creatorCannotLeave": "The workspace creator can't leave the workspace they created",
-      "renameWorkspace": "Rename Workspace"
+      "creatorCannotLeave": "The workspace creator can't leave the workspace they created"
     },
     "editWorkspaceDialog": {
       "title": "Edit workspace details",
@@ -2994,71 +2978,6 @@
       "failedToDeleteWorkspace": "Failed to delete workspace",
       "failedToLeaveWorkspace": "Failed to leave workspace",
       "failedToFetchWorkspaces": "Failed to load workspaces"
-    },
-    "charactersLeft": "{count} character left | {count} characters left",
-    "doubleClickToRename": "Double-click to rename",
-    "editWorkspaceImage": "Edit workspace image",
-    "memberLimitDialog": {
-      "message": "All seats are filled. To invite someone new, remove a member, rescind an invite, or request more seats.",
-      "title": "Workspace is at the member limit"
-    },
-    "requestMore": "Request more",
-    "workflowQueuedDialog": {
-      "message": "Max workflow capacity reached. It'll start automatically as capacity opens up. If this happens often, you can also request for more capacity.",
-      "title": "Your workflow is queued"
-    },
-    "billingStatus": {
-      "ending": {
-        "body": "Members keep full access until then. Reactivate to keep your shared credits and seats.",
-        "reactivate": "Reactivate plan",
-        "title": "Your team plan ends on {date}"
-      },
-      "outOfCredits": {
-        "addCredits": "Add credits",
-        "body": "Your team has used all its credits. Add more credits to continue generating or wait until credits refill on {date}.",
-        "bodyNoDate": "Your team has used all its credits. Add more credits to continue generating.",
-        "dismiss": "Dismiss",
-        "title": "Out of credits"
-      },
-      "paused": {
-        "body": "This workspace's subscription is paused. Update payment to resume.",
-        "memberBody": "This workspace's subscription is paused. Your workspace admins need to update the payment method.",
-        "title": "Subscription paused"
-      },
-      "updatePayment": "Update payment",
-      "warning": {
-        "body": "Your last payment didn't go through. Your subscription will pause on {date} unless payment is updated.",
-        "title": "Payment declined"
-      }
-    },
-    "overview": {
-      "changePlan": "Change plan",
-      "inactive": {
-        "reactivate": "Reactivate plan",
-        "subtitle": "Reactivate your team plan to add more members and run workflows",
-        "subtitleEnterprise": "Reactivate your enterprise plan to add more members and run workflows",
-        "title": "Inactive team subscription",
-        "titleEnterprise": "Inactive enterprise subscription"
-      },
-      "learnMore": "Learn more",
-      "managePayment": "Manage payment",
-      "messageSupport": "Message support",
-      "paused": "Paused",
-      "perMonth": "mo",
-      "pricingTable": "Partner Nodes pricing table",
-      "renewsOn": "Renews on {date}",
-      "seeMore": "See more",
-      "snapshot": {
-        "creditsUsed": "Credits used",
-        "empty": {
-          "recentActivity": "No activity yet",
-          "topSpenders": "No credits used yet this month"
-        },
-        "lastActivity": "Last activity",
-        "recentActivity": "Recent activity",
-        "topSpenders": "Top spenders",
-        "user": "User"
-      }
     }
   },
   "teamWorkspacesDialog": {
@@ -3071,7 +2990,7 @@
     "newWorkspace": "New workspace",
     "namePlaceholder": "e.g. Marketing Team",
     "createWorkspace": "Create workspace",
-    "nameValidationError": "Name must be 1–30 characters using letters, numbers, spaces, or common punctuation."
+    "nameValidationError": "Name must be 1–50 characters using letters, numbers, spaces, or common punctuation."
   },
   "workspaceSwitcher": {
     "switchWorkspace": "Switch workspace",
@@ -3081,8 +3000,7 @@
     "roleMember": "Member",
     "createWorkspace": "Create a workspace",
     "maxWorkspacesReached": "You can only own 10 workspaces. Delete one to create a new one.",
-    "failedToSwitch": "Failed to switch workspace",
-    "roleAdmin": "Admin"
+    "failedToSwitch": "Failed to switch workspace"
   },
   "selectionToolbox": {
     "executeButton": {

src/platform/assets/components/AssetBrowserModal.test.ts

@@ -9,6 +9,20 @@ import { useAssetsStore } from '@/stores/assetsStore'
 
 const mockAssetsByKey = vi.hoisted(() => new Map<string, AssetItem[]>())
 const mockLoadingByKey = vi.hoisted(() => new Map<string, boolean>())
+const mockSupportsModelTypeTags = vi.hoisted(() => ({ value: false }))
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get supportsModelTypeTags() {
+        return mockSupportsModelTypeTags.value
+      },
+      get modelUploadButtonEnabled() {
+        return false
+      }
+    }
+  })
+}))
 
 vi.mock('@/i18n', () => ({
   t: (key: string, params?: Record<string, string>) =>
@@ -214,6 +228,7 @@ describe('AssetBrowserModal', () => {
     vi.resetAllMocks()
     mockAssetsByKey.clear()
     mockLoadingByKey.clear()
+    mockSupportsModelTypeTags.value = false
   })
 
   describe('Integration with useAssetBrowser', () => {
@@ -420,5 +435,20 @@ describe('AssetBrowserModal', () => {
         'assetBrowser.allCategory:{"category":"Checkpoints"}'
       )
     })
+
+    it('strips the model_type: prefix from the title when the flag is on', async () => {
+      mockSupportsModelTypeTags.value = true
+      const assets = [
+        createTestAsset('asset1', 'Model A', 'model_type:checkpoints')
+      ]
+      mockAssetsByKey.set('CheckpointLoaderSimple', assets)
+
+      renderModal({ nodeType: 'CheckpointLoaderSimple' })
+      await flushPromises()
+
+      expect(screen.getByTestId('modal-title').textContent).toBe(
+        'assetBrowser.allCategory:{"category":"Checkpoints"}'
+      )
+    })
   })
 })

src/platform/assets/components/AssetBrowserModal.vue

@@ -100,6 +100,7 @@ import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { usePrimeVueOverlayChildStyle } from '@/composables/usePopoverSizing'
 import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
 import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
@@ -109,12 +110,14 @@ import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
 import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { getPrimaryCategoryTag } from '@/platform/assets/utils/assetMetadataUtils'
 import { formatCategoryLabel } from '@/platform/assets/utils/categoryLabel'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { OnCloseKey } from '@/types/widgetTypes'
 
 const { t } = useI18n()
+const { flags } = useFeatureFlags()
 const assetStore = useAssetsStore()
 const modelToNodeStore = useModelToNodeStore()
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -191,9 +194,21 @@ const focusedAsset = ref<AssetDisplayItem | null>(null)
 const isRightPanelOpen = ref(false)
 
 const primaryCategoryTag = computed(() => {
+  const modelTypeMode = flags.supportsModelTypeTags
+  // A node-typed picker is FOR a category; title off that category rather
+  // than guessing from the first asset, whose first model_type value may be
+  // a different category it shares a root with.
+  if (modelTypeMode && props.nodeType) {
+    const mapped = modelToNodeStore.getCategoryForNodeType(props.nodeType)
+    if (mapped) return mapped
+  }
+
   const assets = fetchedAssets.value ?? []
+  // Covered assets title off the model_type value they group under (so title
+  // and grouping cannot diverge); uncovered assets keep the legacy verbatim
+  // first tag.
   const tagFromAssets = assets
-    .map((asset) => asset.tags?.find((tag) => tag !== 'models'))
+    .map((asset) => getPrimaryCategoryTag(asset, modelTypeMode))
     .find((tag): tag is string => typeof tag === 'string' && tag.length > 0)
 
   if (tagFromAssets) return tagFromAssets

src/platform/assets/components/MediaAssetSelectionBar.vue

@@ -1,48 +1,67 @@
 <template>
-  <SelectionBar
-    data-testid="assets-selection-bar"
-    :label="$t('mediaAsset.selection.selectedCount', { count })"
-    :deselect-label="$t('mediaAsset.selection.deselectAll')"
-    @deselect="emit('deselect')"
-  >
-    <Button
-      v-tooltip.top="{
-        value: $t('mediaAsset.selection.downloadSelected'),
-        showDelay: 300
-      }"
-      variant="inverted"
-      size="icon-lg"
-      type="button"
-      data-testid="assets-download-selected"
-      :aria-label="$t('mediaAsset.selection.downloadSelected')"
-      class="rounded-lg hover:bg-base-background/10"
-      @click="emit('download')"
+  <div class="relative mx-2">
+    <div
+      data-testid="assets-selection-bar"
+      class="absolute bottom-6 left-1/2 z-40 flex w-full max-w-78 -translate-x-1/2 items-center gap-2 rounded-lg bg-base-foreground p-2 text-base-background shadow-interface"
     >
-      <i class="icon-[lucide--download] size-4" />
-    </Button>
-    <template v-if="showDelete">
-      <span class="h-6 w-px bg-base-background/20" aria-hidden="true" />
       <Button
         v-tooltip.top="{
-          value: $t('mediaAsset.selection.deleteSelected'),
+          value: $t('mediaAsset.selection.deselectAll'),
           showDelay: 300
         }"
         variant="inverted"
         size="icon-lg"
         type="button"
-        data-testid="assets-delete-selected"
-        :aria-label="$t('mediaAsset.selection.deleteSelected')"
+        data-testid="assets-deselect-selected"
+        :aria-label="$t('mediaAsset.selection.deselectAll')"
         class="rounded-lg hover:bg-base-background/10"
-        @click="emit('delete')"
+        @click="emit('deselect')"
       >
-        <i class="icon-[lucide--trash-2] size-4" />
+        <i class="icon-[lucide--x] size-4" />
       </Button>
-    </template>
-  </SelectionBar>
+      <span class="pr-6 text-sm font-bold whitespace-nowrap tabular-nums">
+        {{ $t('mediaAsset.selection.selectedCount', { count }) }}
+      </span>
+      <div class="ml-auto flex shrink-0 items-center gap-1">
+        <Button
+          v-tooltip.top="{
+            value: $t('mediaAsset.selection.downloadSelected'),
+            showDelay: 300
+          }"
+          variant="inverted"
+          size="icon-lg"
+          type="button"
+          data-testid="assets-download-selected"
+          :aria-label="$t('mediaAsset.selection.downloadSelected')"
+          class="rounded-lg hover:bg-base-background/10"
+          @click="emit('download')"
+        >
+          <i class="icon-[lucide--download] size-4" />
+        </Button>
+        <template v-if="showDelete">
+          <span class="h-6 w-px bg-base-background/20" aria-hidden="true" />
+          <Button
+            v-tooltip.top="{
+              value: $t('mediaAsset.selection.deleteSelected'),
+              showDelay: 300
+            }"
+            variant="inverted"
+            size="icon-lg"
+            type="button"
+            data-testid="assets-delete-selected"
+            :aria-label="$t('mediaAsset.selection.deleteSelected')"
+            class="rounded-lg hover:bg-base-background/10"
+            @click="emit('delete')"
+          >
+            <i class="icon-[lucide--trash-2] size-4" />
+          </Button>
+        </template>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import SelectionBar from '@/components/common/SelectionBar.vue'
 import Button from '@/components/ui/button/Button.vue'
 
 const { count, showDelete = true } = defineProps<{

src/platform/assets/components/modelInfo/ModelInfoPanel.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import { render, screen } from '@testing-library/vue'
@@ -14,6 +14,14 @@ vi.mock('@/composables/useCopyToClipboard', () => ({
   })
 }))
 
+const mockDistribution = vi.hoisted(() => ({ isCloud: false }))
+vi.mock('@/platform/distribution/types', async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  get isCloud() {
+    return mockDistribution.isCloud
+  }
+}))
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -41,6 +49,10 @@ describe('ModelInfoPanel', () => {
     ...overrides
   })
 
+  afterEach(() => {
+    mockDistribution.isCloud = false
+  })
+
   function renderPanel(asset: AssetDisplayItem) {
     return render(ModelInfoPanel, {
       props: { asset },
@@ -138,6 +150,18 @@ describe('ModelInfoPanel', () => {
       ).toBeInTheDocument()
     })
 
+    it('shows an editable model type dropdown for a mutable asset on cloud', () => {
+      mockDistribution.isCloud = true
+      renderPanel(createMockAsset({ is_immutable: false }))
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('keeps the model type read-only on core even for a mutable asset', () => {
+      mockDistribution.isCloud = false
+      renderPanel(createMockAsset({ is_immutable: false }))
+      expect(screen.queryByRole('combobox')).not.toBeInTheDocument()
+    })
+
     it('renders base models field', () => {
       const asset = createMockAsset({
         user_metadata: { base_model: ['SDXL'] }

src/platform/assets/components/modelInfo/ModelInfoPanel.vue

@@ -71,7 +71,7 @@
         </span>
       </template>
       <ModelInfoField :label="t('assetBrowser.modelInfo.modelType')">
-        <Select v-if="!isImmutable" v-model="selectedModelType">
+        <Select v-if="isModelTypeEditable" v-model="selectedModelType">
           <SelectTrigger class="w-full">
             <SelectValue
               :placeholder="t('assetBrowser.modelInfo.selectModelType')"
@@ -215,6 +215,7 @@ import { useI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import Button from '@/components/ui/button/Button.vue'
 import Select from '@/components/ui/select/Select.vue'
@@ -229,17 +230,19 @@ import TagsInputItemDelete from '@/components/ui/tags-input/TagsInputItemDelete.
 import TagsInputItemText from '@/components/ui/tags-input/TagsInputItemText.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
+import { isCloud } from '@/platform/distribution/types'
 import type { AssetUserMetadata } from '@/platform/assets/schemas/assetSchema'
 import {
+  buildModelTypeTagUpdate,
   getAssetAdditionalTags,
   getAssetBaseModels,
   getAssetDescription,
   getAssetDisplayName,
   getAssetFilename,
-  getAssetModelType,
   getAssetSourceUrl,
   getAssetTriggerPhrases,
   getAssetUserDescription,
+  getEditableModelType,
   getSourceName
 } from '@/platform/assets/utils/assetMetadataUtils'
 import { useAssetsStore } from '@/stores/assetsStore'
@@ -265,6 +268,7 @@ const { asset, cacheKey, selectContentStyle } = defineProps<{
 }>()
 
 const assetsStore = useAssetsStore()
+const { flags } = useFeatureFlags()
 const { modelTypes } = useModelTypes()
 
 const pendingUpdates = ref<AssetUserMetadata>({})
@@ -272,6 +276,9 @@ const pendingModelType = ref<string | undefined>(undefined)
 const isEditingDisplayName = ref(false)
 
 const isImmutable = computed(() => asset.is_immutable ?? true)
+// Retagging a model rewrites its asset tags; core is filesystem-backed and does
+// not yet move the file to match, so the model type is read-only off-cloud.
+const isModelTypeEditable = computed(() => !isImmutable.value && isCloud)
 const displayName = computed(
   () => pendingUpdates.value.name ?? getAssetDisplayName(asset)
 )
@@ -318,12 +325,17 @@ function handleDisplayNameEdit(newName: string) {
 }
 
 const debouncedSaveModelType = useDebounceFn((newModelType: string) => {
-  if (isImmutable.value) return
-  const currentModelType = getAssetModelType(asset)
+  if (!isModelTypeEditable.value) return
+  const currentModelType = getEditableModelType(
+    asset,
+    flags.supportsModelTypeTags
+  )
   if (currentModelType === newModelType) return
-  const newTags = asset.tags
-    .filter((tag) => tag !== currentModelType)
-    .concat(newModelType)
+  const newTags = buildModelTypeTagUpdate(
+    asset,
+    newModelType,
+    flags.supportsModelTypeTags
+  )
   assetsStore.updateAssetTags(asset, newTags, cacheKey)
 }, 500)
 
@@ -345,7 +357,10 @@ const userDescription = computed({
 })
 
 const selectedModelType = computed({
-  get: () => pendingModelType.value ?? getAssetModelType(asset) ?? undefined,
+  get: () =>
+    pendingModelType.value ??
+    getEditableModelType(asset, flags.supportsModelTypeTags) ??
+    undefined,
   set: (value: string | undefined) => {
     if (!value) return
     pendingModelType.value = value

src/platform/assets/composables/useAssetBrowser.test.ts

@@ -25,10 +25,22 @@ vi.mock('@/i18n', () => ({
   d: (date: Date) => date.toLocaleDateString()
 }))
 
+const mockSupportsModelTypeTags = vi.hoisted(() => ({ value: false }))
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get supportsModelTypeTags() {
+        return mockSupportsModelTypeTags.value
+      }
+    }
+  })
+}))
+
 describe('useAssetBrowser', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     vi.restoreAllMocks()
+    mockSupportsModelTypeTags.value = false
   })
 
   // Test fixtures - minimal data focused on functionality being tested
@@ -138,6 +150,25 @@ describe('useAssetBrowser', () => {
       })
     })
 
+    it('strips the model_type: prefix from the badge when the flag is on', () => {
+      mockSupportsModelTypeTags.value = true
+      const apiAsset = createApiAsset({
+        tags: ['models', 'model_type:checkpoints', 'sdxl']
+      })
+
+      const { filteredAssets } = useAssetBrowser(ref([apiAsset]))
+      const result = filteredAssets.value[0]
+
+      expect(result.badges).toContainEqual({
+        label: 'checkpoints',
+        type: 'type'
+      })
+      expect(result.badges).not.toContainEqual({
+        label: 'model_type:checkpoints',
+        type: 'type'
+      })
+    })
+
     it('handles tags with multiple slashes in badges', () => {
       const apiAsset = createApiAsset({
         tags: ['models', 'checkpoint/subfolder/model-name']
@@ -668,6 +699,34 @@ describe('useAssetBrowser', () => {
       ])
     })
 
+    it('groups by model_type:* value and ignores other tags when the flag is on', () => {
+      mockSupportsModelTypeTags.value = true
+      const assets = [
+        createApiAsset({ tags: ['models', 'model_type:checkpoints', 'sdxl'] }),
+        createApiAsset({ tags: ['models', 'model_type:LLM'] })
+      ]
+
+      const { navItems } = useAssetBrowser(ref(assets))
+
+      const typeGroup = navItems.value[2] as { items: { id: string }[] }
+      expect(typeGroup.items.map((i) => i.id)).toEqual(['LLM', 'checkpoints'])
+    })
+
+    it('ignores model_type: and groups by bare tags when the flag is off', () => {
+      const assets = [
+        createApiAsset({ tags: ['models', 'model_type:checkpoints'] }),
+        createApiAsset({ tags: ['models', 'model_type:LLM'] })
+      ]
+
+      const { navItems } = useAssetBrowser(ref(assets))
+
+      const typeGroup = navItems.value[2] as { items: { id: string }[] }
+      expect(typeGroup.items.map((i) => i.id)).toEqual([
+        'model_type:LLM',
+        'model_type:checkpoints'
+      ])
+    })
+
     it('handles assets with no category tag', () => {
       const assets = [
         createApiAsset({ tags: ['models'] }), // No second tag

src/platform/assets/composables/useAssetBrowser.ts

@@ -19,10 +19,13 @@ import {
 } from '@/platform/assets/utils/assetFilterUtils'
 import {
   getAssetBaseModels,
-  getAssetFilename
+  getAssetCategories,
+  getAssetFilename,
+  getAssetTypeBadges
 } from '@/platform/assets/utils/assetMetadataUtils'
 import { MODELS_TAG } from '@/platform/assets/services/assetService'
 import { sortAssets } from '@/platform/assets/utils/assetSortUtils'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 
@@ -43,18 +46,19 @@ export interface AssetDisplayItem extends AssetItem {
   }
 }
 
-const displayItemCache = new WeakMap<AssetItem, AssetDisplayItem>()
+const displayItemCache = new WeakMap<
+  AssetItem,
+  { modelTypeMode: boolean; item: AssetDisplayItem }
+>()
 
-function buildDisplayItem(asset: AssetItem): AssetDisplayItem {
+function buildDisplayItem(
+  asset: AssetItem,
+  modelTypeMode: boolean
+): AssetDisplayItem {
   const badges: AssetBadge[] = []
 
-  const typeTag = asset.tags.find((tag) => tag !== 'models')
-  if (typeTag) {
-    const badgeLabel = typeTag.includes('/')
-      ? typeTag.substring(typeTag.indexOf('/') + 1)
-      : typeTag
-
-    badges.push({ label: badgeLabel, type: 'type' })
+  for (const typeBadge of getAssetTypeBadges(asset, modelTypeMode)) {
+    badges.push({ label: typeBadge, type: 'type' })
   }
 
   for (const model of getAssetBaseModels(asset)) {
@@ -75,12 +79,15 @@ function buildDisplayItem(asset: AssetItem): AssetDisplayItem {
   }
 }
 
-function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
+function transformAssetForDisplay(
+  asset: AssetItem,
+  modelTypeMode: boolean
+): AssetDisplayItem {
   const cached = displayItemCache.get(asset)
-  if (cached) return cached
-  const built = buildDisplayItem(asset)
-  displayItemCache.set(asset, built)
-  return built
+  if (cached && cached.modelTypeMode === modelTypeMode) return cached.item
+  const item = buildDisplayItem(asset, modelTypeMode)
+  displayItemCache.set(asset, { modelTypeMode, item })
+  return item
 }
 
 /**
@@ -93,6 +100,7 @@ export function useAssetBrowser(
   const assets = computed<AssetItem[]>(() => assetsSource.value ?? [])
   const assetDownloadStore = useAssetDownloadStore()
   const { sessionDownloadCount } = storeToRefs(assetDownloadStore)
+  const { flags } = useFeatureFlags()
 
   // State
   const searchQuery = ref('')
@@ -122,12 +130,10 @@ export function useAssetBrowser(
   })
 
   const typeCategories = computed<NavItemData[]>(() => {
+    const modelTypeMode = flags.supportsModelTypeTags
     const categories = assets.value
       .filter((asset) => asset.tags.includes(MODELS_TAG))
-      .flatMap((asset) =>
-        asset.tags.filter((tag) => tag !== MODELS_TAG && tag.length > 0)
-      )
-      .map((tag) => tag.split('/')[0])
+      .flatMap((asset) => getAssetCategories(asset, modelTypeMode))
 
     return Array.from(new Set(categories))
       .sort()
@@ -191,7 +197,9 @@ export function useAssetBrowser(
 
   // Category-filtered assets for filter options (before search/format/base model filters)
   const categoryFilteredAssets = computed(() => {
-    return assets.value.filter(filterByCategory(selectedCategory.value))
+    return assets.value.filter(
+      filterByCategory(selectedCategory.value, flags.supportsModelTypeTags)
+    )
   })
 
   const { availableFileFormats, availableBaseModels } = useAssetFilterOptions(
@@ -248,7 +256,10 @@ export function useAssetBrowser(
     const sortedAssets = sortAssets(filtered, filters.value.sortBy)
 
     // Transform to display format
-    return sortedAssets.map(transformAssetForDisplay)
+    const modelTypeMode = flags.supportsModelTypeTags
+    return sortedAssets.map((asset) =>
+      transformAssetForDisplay(asset, modelTypeMode)
+    )
   })
 
   function updateFilters(newFilters: AssetFilterState) {

src/platform/assets/composables/useUploadModelWizard.test.ts

@@ -38,7 +38,10 @@ vi.mock('@/scripts/api', () => ({
   api: {
     fetchApi: vi.fn(),
     addEventListener: vi.fn(),
-    apiURL: vi.fn((path: string) => path)
+    apiURL: vi.fn((path: string) => path),
+    getServerFeature: vi.fn(
+      (_name: string, defaultValue?: unknown) => defaultValue
+    )
   }
 }))
 
@@ -279,6 +282,43 @@ describe('useUploadModelWizard', () => {
     expect(result?.modelType).toBe('checkpoints')
   })
 
+  it('namespaces the tag but keeps user_metadata.model_type bare when the backend supports it', async () => {
+    const { assetService } =
+      await import('@/platform/assets/services/assetService')
+    const { api } = await import('@/scripts/api')
+    vi.mocked(assetService.uploadAssetAsync).mockResolvedValue({
+      type: 'sync',
+      asset: {
+        id: 'asset-1',
+        name: 'model.safetensors',
+        tags: ['models', 'model_type:checkpoints']
+      }
+    })
+    vi.mocked(api.getServerFeature).mockImplementation((name, defaultValue) =>
+      name === 'supports_model_type_tags' ? true : defaultValue
+    )
+
+    try {
+      const wizard = setupUploadModelWizard(modelTypes, {
+        requiredModelType: 'checkpoints'
+      })
+      wizard.wizardData.value.url = 'https://civitai.com/models/12345'
+
+      await wizard.uploadModel()
+
+      const uploadArg = vi.mocked(assetService.uploadAssetAsync).mock
+        .calls[0][0]
+      expect(uploadArg.tags).toEqual(['models', 'model_type:checkpoints'])
+      expect(uploadArg.user_metadata?.model_type).toBe('checkpoints')
+      // The namespaced returned tag must not trip the required-type guard.
+      expect(wizard.uploadTypeMismatch.value).toBeNull()
+    } finally {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (_name, defaultValue) => defaultValue
+      )
+    }
+  })
+
   it('returns the synced asset filename for sync imports', async () => {
     const { assetService } =
       await import('@/platform/assets/services/assetService')
@@ -347,6 +387,65 @@ describe('useUploadModelWizard', () => {
     })
   })
 
+  it('treats a namespaced model_type: tag as satisfying the required type', async () => {
+    const { assetService } =
+      await import('@/platform/assets/services/assetService')
+    vi.mocked(assetService.uploadAssetAsync).mockResolvedValue({
+      type: 'sync',
+      asset: {
+        id: 'asset-1',
+        name: 'model.safetensors',
+        tags: ['models', 'model_type:checkpoints']
+      }
+    })
+
+    const wizard = setupUploadModelWizard(
+      ref([
+        { name: 'Checkpoint', value: 'checkpoints' },
+        { name: 'LoRA', value: 'loras' }
+      ]),
+      { requiredModelType: 'checkpoints' }
+    )
+    wizard.wizardData.value.url = 'https://civitai.com/models/12345'
+
+    const result = await wizard.uploadModel()
+
+    expect(result).not.toBeNull()
+    expect(wizard.uploadTypeMismatch.value).toBeNull()
+  })
+
+  it('strips the model_type: prefix from the imported-type label on a real mismatch', async () => {
+    const { assetService } =
+      await import('@/platform/assets/services/assetService')
+    vi.mocked(assetService.uploadAssetAsync).mockResolvedValue({
+      type: 'sync',
+      asset: {
+        id: 'asset-lora',
+        name: 'model.safetensors',
+        tags: ['models', 'model_type:loras']
+      }
+    })
+
+    const wizard = setupUploadModelWizard(
+      ref([
+        { name: 'Checkpoint', value: 'checkpoints' },
+        { name: 'LoRA', value: 'loras' }
+      ]),
+      { requiredModelType: 'checkpoints' }
+    )
+    wizard.wizardData.value.url = 'https://civitai.com/models/12345'
+
+    const result = await wizard.uploadModel()
+
+    expect(result).toBeNull()
+    expect(wizard.uploadTypeMismatch.value).toEqual({
+      importedModelType: 'loras',
+      importedModelTypeLabel: 'LoRA',
+      requiredModelType: 'checkpoints',
+      requiredModelTypeLabel: 'Checkpoint'
+    })
+  })
+
   it('does not block sync imports as mismatches without a required model type', async () => {
     const { assetService } =
       await import('@/platform/assets/services/assetService')

src/platform/assets/composables/useUploadModelWizard.ts

@@ -2,6 +2,7 @@ import type { Ref } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { st } from '@/i18n'
 import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
 import { huggingfaceImportSource } from '@/platform/assets/importSources/huggingfaceImportSource'
@@ -11,7 +12,11 @@ import type {
 } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
 import type { ImportSource } from '@/platform/assets/types/importSource'
-import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
+import {
+  getAssetFilename,
+  stripModelTypePrefix,
+  toModelTypeTag
+} from '@/platform/assets/utils/assetMetadataUtils'
 import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
 import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import { useAssetsStore } from '@/stores/assetsStore'
@@ -68,6 +73,7 @@ export function useUploadModelWizard(
   options: UploadModelWizardOptions = {}
 ) {
   const { t } = useI18n()
+  const { flags } = useFeatureFlags()
   const assetsStore = useAssetsStore()
   const assetDownloadStore = useAssetDownloadStore()
   const modelToNodeStore = useModelToNodeStore()
@@ -271,19 +277,22 @@ export function useUploadModelWizard(
   }
 
   function getImportedModelType(asset: AssetItem): string | undefined {
-    const knownType = asset.tags.find(
-      (tag) =>
-        tag !== MODEL_ROOT_TAG &&
+    const subtypeTags = asset.tags
+      .filter((tag) => tag !== MODEL_ROOT_TAG)
+      .map(stripModelTypePrefix)
+    return (
+      subtypeTags.find((tag) =>
         modelTypes.value.some((type) => type.value === tag)
+      ) ?? subtypeTags[0]
     )
-    return knownType ?? asset.tags.find((tag) => tag !== MODEL_ROOT_TAG)
   }
 
   function blockMismatchedImportedModel(
     asset: AssetItem,
     requiredType: string
   ): boolean {
-    if (asset.tags.includes(requiredType)) return false
+    if (asset.tags.map(stripModelTypePrefix).includes(requiredType))
+      return false
 
     const importedType = getImportedModelType(asset)
     uploadStatus.value = 'error'
@@ -317,7 +326,11 @@ export function useUploadModelWizard(
 
     try {
       const modelType = resolvedModelType.value
-      const tags = modelType ? ['models', modelType] : ['models']
+      const subtypeTag =
+        modelType && flags.supportsModelTypeTags
+          ? toModelTypeTag(modelType)
+          : modelType
+      const tags = subtypeTag ? [MODEL_ROOT_TAG, subtypeTag] : [MODEL_ROOT_TAG]
       const filename =
         wizardData.value.metadata?.filename ||
         wizardData.value.metadata?.name ||

src/platform/assets/schemas/assetSchema.ts

@@ -11,6 +11,8 @@ const zAsset = z.object({
   tags: z.array(z.string()).optional().default([]),
   preview_id: z.string().nullable().optional(),
   display_name: z.string().optional(),
+  /** Path within the model's category folder, i.e. the value a loader widget expects. */
+  loader_path: z.string().nullish(),
   preview_url: z.string().optional(),
   thumbnail_url: z.string().optional(),
   created_at: z.string().optional(),
@@ -27,11 +29,6 @@ const zAssetResponse = zListAssetsResponse
     assets: z.array(zAsset)
   })
 
-const zModelFolder = z.object({
-  name: z.string(),
-  folders: z.array(z.string())
-})
-
 // Zod schema for ModelFile to align with interface
 const zModelFile = z.object({
   name: z.string(),
@@ -100,7 +97,6 @@ export type AssetItem = z.infer<typeof zAsset>
 export type AssetResponse = z.infer<typeof zAssetResponse>
 export type AssetMetadata = z.infer<typeof zAssetMetadata>
 export type AsyncUploadResponse = z.infer<typeof zAsyncUploadResponse>
-export type ModelFolder = z.infer<typeof zModelFolder>
 export type ModelFile = z.infer<typeof zModelFile>
 
 /** Payload for updating an asset via PUT /assets/:id */
@@ -132,4 +128,10 @@ export type TagsOperationResult = z.infer<typeof tagsOperationResultSchema>
 export interface ModelFolderInfo {
   name: string
   folders: string[]
+  /**
+   * The folder's raw registered extension allowlist from
+   * `/experiment/models`. An empty array means match-all; absent on older
+   * backends.
+   */
+  extensions?: string[]
 }

src/platform/assets/services/assetService.test.ts

@@ -12,6 +12,7 @@ import { api } from '@/scripts/api'
 
 const mockDistributionState = vi.hoisted(() => ({ isCloud: false }))
 const mockSettingStoreGet = vi.hoisted(() => vi.fn(() => false))
+const mockSupportsModelTypeTags = vi.hoisted(() => ({ value: true }))
 
 vi.mock('@/platform/distribution/types', () => ({
   get isCloud() {
@@ -19,6 +20,16 @@ vi.mock('@/platform/distribution/types', () => ({
   }
 }))
 
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get supportsModelTypeTags() {
+        return mockSupportsModelTypeTags.value
+      }
+    }
+  })
+}))
+
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
     get: mockSettingStoreGet
@@ -40,7 +51,9 @@ vi.mock('@/stores/modelToNodeStore', () => {
 
 vi.mock('@/scripts/api', () => ({
   api: {
-    fetchApi: vi.fn()
+    fetchApi: vi.fn(),
+    addCustomEventListener: vi.fn(),
+    removeCustomEventListener: vi.fn()
   }
 }))
 
@@ -87,6 +100,7 @@ function validAsset(overrides: Partial<AssetItem> = {}): AssetItem {
   return {
     id: 'asset-1',
     name: 'model.safetensors',
+    loader_path: overrides.name ?? 'model.safetensors',
     tags: ['models'],
     ...overrides
   }
@@ -416,32 +430,329 @@ describe(assetService.deleteAsset, () => {
   })
 })
 
-describe(assetService.getAssetModelFolders, () => {
+describe(assetService.getAssetModels, () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    assetService.invalidateModelBuckets()
+    mockSupportsModelTypeTags.value = true
+  })
+
+  it('walks the models tag once, excluding missing assets', async () => {
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({ id: 'a', tags: ['models', 'model_type:checkpoints'] })
+      ])
+    )
+
+    await assetService.getAssetModels('checkpoints')
+
+    expect(fetchApiMock).toHaveBeenCalledTimes(1)
+    const requestedUrl = fetchApiMock.mock.calls[0]?.[0] as string
+    const params = new URL(requestedUrl, 'http://localhost').searchParams
+    expect(params.get('include_tags')).toBe('models')
+    expect(params.get('exclude_tags')).toBe(MISSING_TAG)
+  })
+
+  it('buckets by bare tags when model_type tags are unsupported', async () => {
+    mockSupportsModelTypeTags.value = false
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'a',
+          name: 'a.safetensors',
+          tags: ['models', 'checkpoints']
+        })
+      ])
+    )
+
+    const models = await assetService.getAssetModels('checkpoints')
+
+    expect(models).toEqual([{ name: 'a.safetensors', pathIndex: 0 }])
+  })
+
+  it('drops uncategorized model assets with a warning', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'ok',
+          name: 'ok.safetensors',
+          tags: ['models', 'model_type:loras']
+        }),
+        validAsset({
+          id: 'uncat',
+          name: 'orphan.safetensors',
+          tags: ['models']
+        })
+      ])
+    )
+
+    const loras = await assetService.getAssetModels('loras')
+
+    expect(loras).toEqual([{ name: 'ok.safetensors', pathIndex: 0 }])
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('orphan.safetensors')
+    )
+    warn.mockRestore()
+  })
+
+  it('maps loader_path and drops unloadable assets without one', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'nested',
+          name: 'model.safetensors',
+          loader_path: 'sdxl/model.safetensors',
+          tags: ['models', 'model_type:checkpoints']
+        }),
+        validAsset({
+          id: 'orphan',
+          name: 'orphan.safetensors',
+          loader_path: null,
+          tags: ['models', 'model_type:checkpoints']
+        }),
+        validAsset({
+          id: 'other-folder',
+          name: 'lora.safetensors',
+          tags: ['models', 'model_type:loras']
+        })
+      ])
+    )
+
+    const models = await assetService.getAssetModels('checkpoints')
+
+    expect(models).toEqual([{ name: 'sdxl/model.safetensors', pathIndex: 0 }])
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('orphan.safetensors')
+    )
+    warn.mockRestore()
+  })
+
+  it('drops assets whose loader path is traversal-shaped', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'evil',
+          name: 'evil.safetensors',
+          loader_path: '../../secrets/evil.safetensors',
+          tags: ['models', 'model_type:checkpoints']
+        }),
+        validAsset({
+          id: 'ok',
+          name: 'fine.safetensors',
+          tags: ['models', 'model_type:checkpoints']
+        })
+      ])
+    )
+
+    const models = await assetService.getAssetModels('checkpoints')
+
+    expect(models).toEqual([{ name: 'fine.safetensors', pathIndex: 0 }])
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('unsafe'))
+    warn.mockRestore()
+  })
+
+  it('groups slashed bare tags by their top-level segment', async () => {
+    mockSupportsModelTypeTags.value = false
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'slashed',
+          name: 'model1.safetensors',
+          tags: ['models', 'Chatterbox/subfolder1/model1']
+        })
+      ])
+    )
+
+    const models = await assetService.getAssetModels('Chatterbox')
+
+    expect(models).toEqual([{ name: 'model1.safetensors', pathIndex: 0 }])
+  })
+
+  it('falls back to filename metadata then name on bare-tag backends', async () => {
+    mockSupportsModelTypeTags.value = false
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'cloud-hash',
+          name: 'blake3-content-hash',
+          loader_path: null,
+          user_metadata: { filename: 'sdxl/cloud-model.safetensors' },
+          tags: ['models', 'checkpoints']
+        }),
+        validAsset({
+          id: 'bare',
+          name: 'plain.safetensors',
+          loader_path: null,
+          tags: ['models', 'checkpoints']
+        })
+      ])
+    )
+
+    const models = await assetService.getAssetModels('checkpoints')
+
+    expect(models).toEqual([
+      { name: 'sdxl/cloud-model.safetensors', pathIndex: 0 },
+      { name: 'plain.safetensors', pathIndex: 0 }
+    ])
+  })
+
+  it('orders each folder subdirectories-first then files, alphabetically', async () => {
+    const checkpointAsset = (id: string, loaderPath: string) =>
+      validAsset({
+        id,
+        name: loaderPath.split('/').pop()!,
+        loader_path: loaderPath,
+        tags: ['models', 'model_type:checkpoints']
+      })
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        checkpointAsset('1', 'sdxl/base.safetensors'),
+        checkpointAsset('2', 'v1-5.safetensors'),
+        checkpointAsset('3', 'sdxl/refiner.safetensors'),
+        checkpointAsset('4', 'anything.safetensors'),
+        checkpointAsset('5', 'dynamicrafter/model.safetensors')
+      ])
+    )
+
+    const models = await assetService.getAssetModels('checkpoints')
+
+    expect(models.map((m) => m.name)).toEqual([
+      'dynamicrafter/model.safetensors',
+      'sdxl/base.safetensors',
+      'sdxl/refiner.safetensors',
+      'anything.safetensors',
+      'v1-5.safetensors'
+    ])
+  })
+
+  it('does not let a stale in-flight walk overwrite an invalidated cache', async () => {
+    let resolveStaleWalk!: (response: Response) => void
+    fetchApiMock.mockReturnValueOnce(
+      new Promise<Response>((resolve) => {
+        resolveStaleWalk = resolve
+      })
+    )
+    const staleRead = assetService.getAssetModels('checkpoints')
+
+    assetService.invalidateModelBuckets()
+
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'fresh',
+          name: 'fresh.safetensors',
+          tags: ['models', 'model_type:checkpoints']
+        })
+      ])
+    )
+    const freshModels = await assetService.getAssetModels('checkpoints')
+    expect(freshModels.map((m) => m.name)).toEqual(['fresh.safetensors'])
+
+    resolveStaleWalk(
+      buildAssetListResponse([
+        validAsset({
+          id: 'stale',
+          name: 'stale.safetensors',
+          tags: ['models', 'model_type:checkpoints']
+        })
+      ])
+    )
+    await staleRead
+
+    const cachedModels = await assetService.getAssetModels('checkpoints')
+    expect(cachedModels.map((m) => m.name)).toEqual(['fresh.safetensors'])
+    expect(fetchApiMock).toHaveBeenCalledTimes(2)
+  })
+
+  it('places multi-category assets in every folder from a single walk', async () => {
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([
+        validAsset({
+          id: 'shared',
+          name: 'dual_use.safetensors',
+          loader_path: 'dual_use.safetensors',
+          tags: [
+            'models',
+            'model_type:checkpoints',
+            'model_type:diffusion_models'
+          ]
+        })
+      ])
+    )
+
+    const checkpoints = await assetService.getAssetModels('checkpoints')
+    const diffusion = await assetService.getAssetModels('diffusion_models')
+
+    expect(checkpoints).toEqual([
+      { name: 'dual_use.safetensors', pathIndex: 0 }
+    ])
+    expect(diffusion).toEqual([{ name: 'dual_use.safetensors', pathIndex: 0 }])
+    // Both folder reads resolve from a single memoized models walk.
+    expect(fetchApiMock).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe(assetService.onModelsScanned, () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  it('requests missing-tag exclusion and returns alphabetical unique folders without include_public', async () => {
+  it('invokes the callback when the scan event fires and unsubscribes cleanly', () => {
+    const callback = vi.fn()
+
+    const unsubscribe = assetService.onModelsScanned(callback)
+
+    const [eventType, handler] = vi.mocked(api.addCustomEventListener).mock
+      .calls[0]!
+    expect(eventType).toBe('assets.seed.fast_complete')
+
+    handler!(new CustomEvent(eventType))
+    expect(callback).toHaveBeenCalledOnce()
+
+    unsubscribe()
+    expect(api.removeCustomEventListener).toHaveBeenCalledWith(
+      eventType,
+      handler
+    )
+  })
+})
+
+describe(assetService.seedModelAssets, () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('POSTs the models root to the seed endpoint', async () => {
     fetchApiMock.mockResolvedValueOnce(
-      buildAssetListResponse([
-        validAsset({ id: 'a', tags: ['models', 'loras'] }),
-        validAsset({ id: 'b', tags: ['models', 'checkpoints'] }),
-        validAsset({ id: 'c', tags: ['models', 'configs'] }),
-        validAsset({ id: 'e', tags: ['models', 'loras'] })
-      ])
+      buildResponse({ status: 'started' }, { status: 202 })
     )
 
-    const folders = await assetService.getAssetModelFolders()
+    await assetService.seedModelAssets()
 
-    expect(folders).toEqual([
-      { name: 'checkpoints', folders: [] },
-      { name: 'loras', folders: [] }
-    ])
+    expect(fetchApiMock).toHaveBeenCalledWith('/assets/seed', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ roots: ['models'] })
+    })
+  })
 
-    const requestedUrl = fetchApiMock.mock.calls[0]?.[0] as string
-    const params = new URL(requestedUrl, 'http://localhost').searchParams
-    expect(params.has('include_public')).toBe(false)
-    expect(params.get('exclude_tags')).toBe(MISSING_TAG)
+  it('treats an already-running scan (409) as success', async () => {
+    fetchApiMock.mockResolvedValueOnce(
+      buildResponse({ status: 'already_running' }, { ok: false, status: 409 })
+    )
+
+    await expect(assetService.seedModelAssets()).resolves.toBeUndefined()
+  })
+
+  it('throws on other error statuses', async () => {
+    fetchApiMock.mockResolvedValueOnce(
+      buildResponse({}, { ok: false, status: 500 })
+    )
+
+    await expect(assetService.seedModelAssets()).rejects.toThrow('500')
   })
 })
 

src/platform/assets/services/assetService.ts

@@ -1,9 +1,11 @@
 import { fromZodError } from 'zod-validation-error'
 import { z } from 'zod'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { st } from '@/i18n'
 
 import {
+  assetFilenameSchema,
   assetItemSchema,
   assetResponseSchema,
   asyncUploadResponseSchema,
@@ -17,9 +19,9 @@ import type {
   AssetUpdatePayload,
   AsyncUploadResponse,
   ModelFile,
-  ModelFolder,
   TagsOperationResult
 } from '@/platform/assets/schemas/assetSchema'
+import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
@@ -180,6 +182,7 @@ function getLocalizedErrorMessage(errorCode: string): string {
 }
 
 const ASSETS_ENDPOINT = '/assets'
+const ASSETS_SEED_ENDPOINT = '/assets/seed'
 const ASSETS_DOWNLOAD_ENDPOINT = '/assets/download'
 const ASSETS_EXPORT_ENDPOINT = '/assets/export'
 const EXPERIMENTAL_WARNING = `EXPERIMENTAL: If you are seeing this please make sure "Comfy.Assets.UseAssetAPI" is set to "false" in your ComfyUI Settings.\n`
@@ -187,6 +190,8 @@ const DEFAULT_LIMIT = 500
 const INPUT_ASSETS_WITH_PUBLIC_LIMIT = 500
 
 export const MODELS_TAG = 'models'
+/** Prefix for the namespaced tag that carries a model's folder category, e.g. `model_type:checkpoints`. */
+const MODEL_TYPE_TAG_PREFIX = 'model_type:'
 export const INPUT_TAG = 'input'
 export const OUTPUT_TAG = 'output'
 /** Asset tag used by the backend for placeholder records that are not installed. */
@@ -209,6 +214,48 @@ function normalizeAssetTags(tags: string[]): string[] {
   return tags.map((tag) => tag.trim()).filter(Boolean)
 }
 
+/**
+ * Resolves the model folder a tag represents, or undefined when the tag is not
+ * a folder category. `supports_model_type_tags` backends carry the category as
+ * a namespaced `model_type:<folder>` tag; older backends mint bare tags, which
+ * may carry subfolder paths (e.g. `Chatterbox/sub/model`) and group by their
+ * top-level segment, matching the asset browser's legacy grouping.
+ */
+function modelFolderFromTag(
+  tag: string,
+  modelTypeMode: boolean
+): string | undefined {
+  if (modelTypeMode) {
+    return tag.startsWith(MODEL_TYPE_TAG_PREFIX)
+      ? tag.slice(MODEL_TYPE_TAG_PREFIX.length)
+      : undefined
+  }
+  if (tag === MODELS_TAG || tag.length === 0) return undefined
+  return tag.split('/')[0]
+}
+
+/**
+ * Orders loader paths as subdirectories before files at every level,
+ * alphabetical within each group. The asset API returns models in storage
+ * order, which would otherwise interleave root-level files with folder
+ * contents in the sidebar tree.
+ */
+function compareLoaderPaths(a: string, b: string): number {
+  const aSegments = a.split('/')
+  const bSegments = b.split('/')
+  const sharedDepth = Math.min(aSegments.length, bSegments.length)
+  for (let i = 0; i < sharedDepth; i++) {
+    const aIsFile = i === aSegments.length - 1
+    const bIsFile = i === bSegments.length - 1
+    if (aIsFile !== bIsFile) return aIsFile ? 1 : -1
+    const order = aSegments[i].localeCompare(bSegments[i], undefined, {
+      numeric: true
+    })
+    if (order !== 0) return order
+  }
+  return 0
+}
+
 async function withCallerAbort<T>(
   promise: Promise<T>,
   signal?: AbortSignal
@@ -269,6 +316,26 @@ function createAssetService() {
   let inputAssetsIncludingPublicRequestId = 0
   let pendingInputAssetsIncludingPublic: Promise<AssetItem[]> | null = null
 
+  /**
+   * Model assets bucketed by folder category, built from a single walk of the
+   * `models` tag rather than a fetch per category. Shared by the folder list
+   * and per-folder listings so the sidebar loads every model in one pass.
+   */
+  let modelBuckets: Map<string, AssetItem[]> | null = null
+  let modelBucketsRequestId = 0
+  let pendingModelBuckets: Promise<Map<string, AssetItem[]>> | null = null
+
+  /**
+   * Discards the cached model buckets so the next read re-walks the models
+   * tag. Bumping the request id keeps a walk that was already in flight from
+   * repopulating the cache with pre-invalidation data.
+   */
+  function invalidateModelBuckets(): void {
+    modelBucketsRequestId++
+    modelBuckets = null
+    pendingModelBuckets = null
+  }
+
   /** Invalidates the cached public-inclusive input assets without aborting in-flight readers. */
   function invalidateInputAssetsIncludingPublic(): void {
     inputAssetsIncludingPublicRequestId++
@@ -330,51 +397,156 @@ function createAssetService() {
     return validateAssetResponse(data)
   }
   /**
-   * Gets a list of model folder keys from the asset API
-   *
-   * Logic:
-   * 1. Extract directory names directly from asset tags
-   * 2. Filter out blacklisted directories
-   * 3. Return alphabetically sorted directories with assets
-   *
-   * @returns The list of model folder keys
+   * Walks every `models`-tagged asset once and buckets each into the folder
+   * categories carried by its `model_type:` tags. A single asset lands in every
+   * category it is tagged with (e.g. a shared-root model in both `checkpoints`
+   * and `diffusion_models`). Which folders are actually shown is decided by
+   * `/experiment/models`; models with no category tag are dropped with a warning
+   * rather than hidden silently.
    */
-  async function getAssetModelFolders(): Promise<ModelFolder[]> {
-    const data = await handleAssetRequest(
-      { includeTags: [MODELS_TAG] },
-      'model folders'
-    )
+  async function buildModelBuckets(): Promise<Map<string, AssetItem[]>> {
+    const assets = await getAllAssetsByTag(MODELS_TAG, true)
+    const modelTypeMode = useFeatureFlags().flags.supportsModelTypeTags
+    const buckets = new Map<string, AssetItem[]>()
 
-    // Blacklist directories we don't want to show
-    const blacklistedDirectories = new Set(['configs'])
+    for (const asset of assets) {
+      const folders = asset.tags
+        .map((tag) => modelFolderFromTag(tag, modelTypeMode))
+        .filter((folder): folder is string => folder !== undefined)
 
-    const folderTags = data.assets
-      .flatMap((asset) => asset.tags)
-      .filter((tag) => tag !== MODELS_TAG && !blacklistedDirectories.has(tag))
-    const discoveredFolders = new Set<string>(folderTags)
+      if (folders.length === 0) {
+        console.warn(
+          `Asset ${asset.id} (${asset.name}) is tagged '${MODELS_TAG}' but has no model category; skipping.`
+        )
+        continue
+      }
 
-    // Return only discovered folders in alphabetical order
-    const sortedFolders = Array.from(discoveredFolders).toSorted()
-    return sortedFolders.map((name) => ({ name, folders: [] }))
+      // On loader_path-contract backends a null loader_path marks an
+      // unloadable asset (e.g. an orphan): it must not mint a widget value,
+      // and `name` is deprecated for path semantics.
+      if (modelTypeMode && !asset.loader_path) {
+        console.warn(
+          `Asset ${asset.id} (${asset.name}) has no loader_path; skipping.`
+        )
+        continue
+      }
+
+      // The loader value flows into viewMetadata URLs and widget values, so a
+      // traversal-shaped path must not pass through even if the backend's own
+      // validation ever regresses.
+      const loaderValue = asset.loader_path ?? getAssetFilename(asset)
+      if (!assetFilenameSchema.safeParse(loaderValue).success) {
+        console.warn(
+          `Asset ${asset.id} (${asset.name}) has an unsafe loader path ('${loaderValue}'); skipping.`
+        )
+        continue
+      }
+
+      for (const folder of folders) {
+        const bucket = buckets.get(folder)
+        if (bucket) bucket.push(asset)
+        else buckets.set(folder, [asset])
+      }
+    }
+
+    for (const bucket of buckets.values()) {
+      bucket.sort((a, b) =>
+        compareLoaderPaths(
+          a.loader_path ?? getAssetFilename(a),
+          b.loader_path ?? getAssetFilename(b)
+        )
+      )
+    }
+
+    return buckets
+  }
+
+  /** Returns the memoized model buckets, walking the models tag on first read. */
+  async function loadModelBuckets(): Promise<Map<string, AssetItem[]>> {
+    if (modelBuckets) return modelBuckets
+    if (pendingModelBuckets) return pendingModelBuckets
+
+    const requestId = ++modelBucketsRequestId
+    const walk = async () => {
+      try {
+        const buckets = await buildModelBuckets()
+        if (requestId === modelBucketsRequestId) {
+          modelBuckets = buckets
+        }
+        return buckets
+      } finally {
+        if (requestId === modelBucketsRequestId) {
+          pendingModelBuckets = null
+        }
+      }
+    }
+
+    pendingModelBuckets = walk()
+    return pendingModelBuckets
   }
 
   /**
-   * Gets a list of models in the specified folder from the asset API
+   * Gets the models in the specified folder from the single models walk.
    * @param folder The folder to list models from, such as 'checkpoints'
    * @returns The list of model filenames within the specified folder
    */
   async function getAssetModels(folder: string): Promise<ModelFile[]> {
-    const data = await handleAssetRequest(
-      { includeTags: [MODELS_TAG, folder] },
-      `models for ${folder}`
-    )
-
-    return data.assets.map((asset) => ({
-      name: asset.name,
+    const buckets = await loadModelBuckets()
+    return (buckets.get(folder) ?? []).map((asset) => ({
+      // `loader_path` is the category-relative path the loader widget expects
+      // and the source for the sidebar tree. Backends that predate it (bare-tag
+      // mode; today's cloud) fall back to the filename metadata — the same
+      // value the asset browser serializes — rather than `name`, which is a
+      // content hash on cloud.
+      name: asset.loader_path ?? getAssetFilename(asset),
+      // Asset records carry no root identity, so every model reports root 0.
+      // Known limitation on multi-root categories (extra_model_paths.yaml):
+      // preview reads target root 0 (wrong file or 404 for secondary-root
+      // files), and same-relative-path files in different roots collapse
+      // onto one sidebar row. Metadata is unaffected unless relative paths
+      // collide (/view_metadata searches roots in order without an index),
+      // as are loader widget values; lifting this needs the backend to carry
+      // root identity on assets.
       pathIndex: 0
     }))
   }
 
+  /**
+   * Asks the backend to rescan the model roots on disk so newly added files
+   * become assets. Fire-and-forget: the scan's fast (insert) phase already
+   * writes the category tags and filenames the sidebar needs and is announced
+   * by an `assets.seed.fast_complete` websocket event. A 409 means a scan is
+   * already running, which will emit the same event, so it is not an error.
+   */
+  async function seedModelAssets(): Promise<void> {
+    const res = await api.fetchApi(ASSETS_SEED_ENDPOINT, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ roots: ['models'] })
+    })
+    if (!res.ok && res.status !== 409) {
+      throw new Error(
+        `Unable to start asset scan: Server returned ${res.status}`
+      )
+    }
+  }
+
+  /**
+   * Subscribes to the backend's scan fast-phase completion broadcast — the
+   * moment newly scanned files' tags and loader paths become queryable. The
+   * wire-level event (`assets.seed.fast_complete`) is owned here; consumers
+   * receive a callback and an unsubscribe function.
+   */
+  function onModelsScanned(callback: () => void | Promise<void>): () => void {
+    const handler = () => {
+      void callback()
+    }
+    api.addCustomEventListener('assets.seed.fast_complete', handler)
+    return () => {
+      api.removeCustomEventListener('assets.seed.fast_complete', handler)
+    }
+  }
+
   /**
    * Checks if a widget input should use the asset browser based on both input name and node comfyClass
    *
@@ -971,8 +1143,10 @@ function createAssetService() {
   }
 
   return {
-    getAssetModelFolders,
     getAssetModels,
+    invalidateModelBuckets,
+    onModelsScanned,
+    seedModelAssets,
     isAssetAPIEnabled,
     isAssetBrowserEligible,
     shouldUseAssetBrowser,

src/platform/assets/utils/assetFilterUtils.property.test.ts

@@ -45,7 +45,7 @@ describe('assetFilterUtils properties', () => {
   it('filterByCategory("all") accepts every asset', () => {
     fc.assert(
       fc.property(arbAssetItem, (asset) => {
-        expect(filterByCategory('all')(asset)).toBe(true)
+        expect(filterByCategory('all', false)(asset)).toBe(true)
       })
     )
   })
@@ -56,7 +56,7 @@ describe('assetFilterUtils properties', () => {
         fc.array(arbAssetItem, { maxLength: 30 }),
         fc.stringMatching(/^[a-z]{1,8}$/),
         (assets, category) => {
-          const filter = filterByCategory(category)
+          const filter = filterByCategory(category, false)
           const result = assets.filter(filter)
           expect(result.length).toBeLessThanOrEqual(assets.length)
           for (const item of result) {

src/platform/assets/utils/assetFilterUtils.test.ts

@@ -26,19 +26,54 @@ function createAsset(
 
 describe('filterByCategory', () => {
   it.for([
-    { category: 'all', tags: ['checkpoint'], expected: true },
-    { category: 'checkpoint', tags: ['checkpoint'], expected: true },
-    { category: 'lora', tags: ['checkpoint'], expected: false },
+    { category: 'all', tags: ['checkpoint'], mode: false, expected: true },
+    {
+      category: 'checkpoint',
+      tags: ['checkpoint'],
+      mode: false,
+      expected: true
+    },
+    { category: 'lora', tags: ['checkpoint'], mode: false, expected: false },
     {
       category: 'checkpoint',
       tags: ['models', 'checkpoint/xl'],
+      mode: false,
       expected: true
     },
-    { category: 'xl', tags: ['models', 'checkpoint/xl'], expected: false }
+    {
+      category: 'xl',
+      tags: ['models', 'checkpoint/xl'],
+      mode: false,
+      expected: false
+    },
+    {
+      category: 'checkpoints',
+      tags: ['models', 'model_type:checkpoints'],
+      mode: true,
+      expected: true
+    },
+    {
+      category: 'LLM',
+      tags: ['models', 'model_type:LLM'],
+      mode: true,
+      expected: true
+    },
+    {
+      category: 'sdxl',
+      tags: ['models', 'model_type:checkpoints', 'sdxl'],
+      mode: true,
+      expected: false
+    },
+    {
+      category: 'checkpoints',
+      tags: ['models', 'model_type:checkpoints'],
+      mode: false,
+      expected: false
+    }
   ])(
-    'category=$category with tags=$tags returns $expected',
-    ({ category, tags, expected }) => {
-      const filter = filterByCategory(category)
+    'category=$category tags=$tags mode=$mode returns $expected',
+    ({ category, tags, mode, expected }) => {
+      const filter = filterByCategory(category, mode)
       const asset = createAsset('model.safetensors', { tags })
       expect(filter(asset)).toBe(expected)
     }

src/platform/assets/utils/assetFilterUtils.ts

@@ -1,21 +1,14 @@
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { OwnershipOption } from '@/platform/assets/types/filterTypes'
-import { getAssetBaseModels } from '@/platform/assets/utils/assetMetadataUtils'
+import {
+  getAssetBaseModels,
+  getAssetCategories
+} from '@/platform/assets/utils/assetMetadataUtils'
 
-export function filterByCategory(category: string) {
+export function filterByCategory(category: string, modelTypeMode: boolean) {
   return (asset: AssetItem) => {
     if (category === 'all') return true
-
-    // Check if any tag matches the category (for exact matches)
-    if (asset.tags.includes(category)) return true
-
-    // Check if any tag's top-level folder matches the category
-    return asset.tags.some((tag) => {
-      if (typeof tag === 'string' && tag.includes('/')) {
-        return tag.split('/')[0] === category
-      }
-      return false
-    })
+    return getAssetCategories(asset, modelTypeMode).includes(category)
   }
 }
 

src/platform/assets/utils/assetMetadataUtils.test.ts

@@ -2,22 +2,34 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import {
+  MISSING_TAG,
+  MODELS_TAG
+} from '@/platform/assets/services/assetService'
+import {
+  buildModelTypeTagUpdate,
   getAssetAdditionalTags,
   getAssetBaseModel,
   getAssetBaseModels,
   getAssetCardTitle,
+  getAssetCategories,
   getAssetDescription,
   getAssetDisplayFilename,
   getAssetDisplayName,
   getAssetFilename,
   getAssetMetadataDimensions,
   getAssetModelType,
+  getAssetNodeCategoryCandidates,
   getAssetSourceUrl,
+  getPrimaryCategoryTag,
   getAssetStoredFilename,
   getAssetTriggerPhrases,
+  getAssetTypeBadges,
   getAssetUserDescription,
+  getEditableModelType,
   getSourceName,
-  resolveDisplayImageDimensions
+  resolveDisplayImageDimensions,
+  stripModelTypePrefix,
+  toModelTypeTag
 } from '@/platform/assets/utils/assetMetadataUtils'
 
 const { isCloudRef } = vi.hoisted(() => ({
@@ -274,7 +286,17 @@ describe('assetMetadataUtils', () => {
         tags: ['models'],
         expected: null
       },
-      { name: 'returns null when tags empty', tags: [], expected: null }
+      { name: 'returns null when tags empty', tags: [], expected: null },
+      {
+        name: 'never returns a raw model_type: literal (no round-trip into edit widgets)',
+        tags: ['models', 'model_type:checkpoints'],
+        expected: null
+      },
+      {
+        name: 'skips model_type: tags in favour of the bare twin',
+        tags: ['models', 'model_type:checkpoints', 'checkpoints'],
+        expected: 'checkpoints'
+      }
     ])('$name', ({ tags, expected }) => {
       const asset = { ...mockAsset, tags }
       expect(getAssetModelType(asset)).toBe(expected)
@@ -540,3 +562,353 @@ describe('assetMetadataUtils', () => {
     })
   })
 })
+
+describe('getAssetCategories', () => {
+  const asset = (tags: string[]): AssetItem => ({
+    id: 'a',
+    name: 'model.safetensors',
+    tags
+  })
+
+  it('uses model_type:* values as the group and disregards other tags in model_type mode', () => {
+    expect(
+      getAssetCategories(
+        asset(['models', 'model_type:checkpoints', 'sdxl']),
+        true
+      )
+    ).toEqual(['checkpoints'])
+  })
+
+  it('preserves the model_type value casing', () => {
+    expect(
+      getAssetCategories(asset(['models', 'model_type:LLM']), true)
+    ).toEqual(['LLM'])
+  })
+
+  it('routes an uncovered asset by its bare tags in model_type mode', () => {
+    expect(getAssetCategories(asset(['models', 'checkpoints']), true)).toEqual([
+      'checkpoints'
+    ])
+  })
+
+  it('ignores model_type: and uses bare-tag grouping when mode is off', () => {
+    expect(
+      getAssetCategories(
+        asset(['models', 'model_type:checkpoints', 'sdxl']),
+        false
+      )
+    ).toEqual(['model_type:checkpoints', 'sdxl'])
+  })
+
+  it('never surfaces namespace residue as a category for uncovered assets in mode', () => {
+    expect(
+      getAssetCategories(asset(['models', 'model_type:', 'sdxl']), true)
+    ).toEqual(['sdxl'])
+  })
+})
+
+describe('getPrimaryCategoryTag', () => {
+  const asset = (tags: string[]): AssetItem => ({
+    id: 'a',
+    name: 'model.safetensors',
+    tags
+  })
+
+  it('uses the model_type value a covered asset groups under', () => {
+    expect(
+      getPrimaryCategoryTag(asset(['models', 'sdxl', 'model_type:vae']), true)
+    ).toBe('vae')
+  })
+
+  it('keeps the legacy verbatim tag for an uncovered hierarchical asset', () => {
+    expect(
+      getPrimaryCategoryTag(asset(['models', 'Chatterbox/sub/model']), true)
+    ).toBe('Chatterbox/sub/model')
+  })
+
+  it('skips namespace residue instead of titling off a raw model_type: tag', () => {
+    expect(
+      getPrimaryCategoryTag(asset(['models', 'model_type:']), true)
+    ).toBeUndefined()
+  })
+
+  it('returns the legacy first non-models tag when mode is off', () => {
+    expect(
+      getPrimaryCategoryTag(asset(['models', 'model_type:vae']), false)
+    ).toBe('model_type:vae')
+  })
+})
+
+describe('getAssetNodeCategoryCandidates', () => {
+  const asset = (tags: string[]): AssetItem => ({
+    id: 'a',
+    name: 'model.safetensors',
+    tags
+  })
+
+  it('orders the most specific (deepest) tag ahead of a flat model_type value', () => {
+    expect(
+      getAssetNodeCategoryCandidates(
+        asset(['models', 'model_type:LLM', 'LLM/Qwen-VL/Qwen3-0.6B']),
+        true
+      )
+    ).toEqual(['LLM/Qwen-VL/Qwen3-0.6B', 'LLM'])
+  })
+
+  it('strips the model_type: prefix when it is the only candidate', () => {
+    expect(
+      getAssetNodeCategoryCandidates(asset(['models', 'model_type:vae']), true)
+    ).toEqual(['vae'])
+  })
+
+  it('keeps a model_type value ahead of an equally-deep bare tag', () => {
+    expect(
+      getAssetNodeCategoryCandidates(
+        asset(['models', 'model_type:checkpoints', 'sdxl']),
+        true
+      )
+    ).toEqual(['checkpoints', 'sdxl'])
+  })
+
+  it('demotes an unrelated deeper bare tag below the model_type value', () => {
+    expect(
+      getAssetNodeCategoryCandidates(
+        asset(['models', 'model_type:vae', 'foo/bar']),
+        true
+      )
+    ).toEqual(['vae', 'foo/bar'])
+  })
+
+  it('keeps unrelated bare tags as trailing fallbacks rather than dropping them', () => {
+    expect(
+      getAssetNodeCategoryCandidates(
+        asset(['models', 'model_type:LLM', 'LLM/Qwen-VL', 'foo/bar/baz']),
+        true
+      )
+    ).toEqual(['LLM/Qwen-VL', 'LLM', 'foo/bar/baz'])
+  })
+
+  it('keeps a hierarchical tag intact', () => {
+    expect(
+      getAssetNodeCategoryCandidates(
+        asset(['models', 'chatterbox/chatterbox_vc']),
+        true
+      )
+    ).toEqual(['chatterbox/chatterbox_vc'])
+  })
+
+  it('returns no candidates when only reserved tags are present', () => {
+    expect(
+      getAssetNodeCategoryCandidates(asset(['models', 'missing']), true)
+    ).toEqual([])
+  })
+
+  it('uses the first non-reserved tag verbatim when mode is off', () => {
+    expect(
+      getAssetNodeCategoryCandidates(asset(['models', 'model_type:vae']), false)
+    ).toEqual(['model_type:vae'])
+    expect(
+      getAssetNodeCategoryCandidates(asset(['models', 'checkpoints']), false)
+    ).toEqual(['checkpoints'])
+  })
+})
+
+describe('getAssetTypeBadges', () => {
+  const asset = (tags: string[]): AssetItem => ({
+    id: 'a',
+    name: 'model.safetensors',
+    tags
+  })
+
+  it('strips the model_type: prefix in model_type mode (no raw leak)', () => {
+    expect(
+      getAssetTypeBadges(
+        asset(['models', 'model_type:checkpoints', 'sdxl']),
+        true
+      )
+    ).toEqual(['checkpoints'])
+  })
+
+  it('badges the model_type value even when a bare tag comes first, matching the grouping', () => {
+    expect(
+      getAssetTypeBadges(asset(['models', 'foo', 'model_type:bar']), true)
+    ).toEqual(['bar'])
+  })
+
+  it('badges every category a shared multi-type asset groups under', () => {
+    expect(
+      getAssetTypeBadges(
+        asset([
+          'models',
+          'model_type:checkpoints',
+          'model_type:diffusion_models'
+        ]),
+        true
+      )
+    ).toEqual(['checkpoints', 'diffusion_models'])
+  })
+
+  it('falls back to the bare tag for an uncovered asset in model_type mode', () => {
+    expect(getAssetTypeBadges(asset(['models', 'sdxl']), true)).toEqual([
+      'sdxl'
+    ])
+  })
+
+  it('returns no badge rather than a blank one for a malformed empty model_type: tag', () => {
+    expect(getAssetTypeBadges(asset(['models', 'model_type:']), true)).toEqual(
+      []
+    )
+  })
+
+  it('leaks the literal model_type: tag when mode is off', () => {
+    expect(
+      getAssetTypeBadges(asset(['models', 'model_type:checkpoints']), false)
+    ).toEqual(['model_type:checkpoints'])
+  })
+
+  it('shows the segment after the first slash for a bare hierarchical tag', () => {
+    expect(
+      getAssetTypeBadges(asset(['models', 'checkpoint/xl']), false)
+    ).toEqual(['xl'])
+  })
+
+  it('returns no badges when only the models tag is present', () => {
+    expect(getAssetTypeBadges(asset(['models']), true)).toEqual([])
+  })
+})
+
+describe('stripModelTypePrefix', () => {
+  it('removes the model_type: prefix when present', () => {
+    expect(stripModelTypePrefix('model_type:checkpoints')).toBe('checkpoints')
+  })
+
+  it('leaves a tag without the prefix unchanged', () => {
+    expect(stripModelTypePrefix('checkpoints')).toBe('checkpoints')
+    expect(stripModelTypePrefix('checkpoint/xl')).toBe('checkpoint/xl')
+  })
+})
+
+describe('toModelTypeTag', () => {
+  it('prefixes a folder_name with the model_type namespace', () => {
+    expect(toModelTypeTag('checkpoints')).toBe('model_type:checkpoints')
+    expect(toModelTypeTag('ultralytics_bbox')).toBe(
+      'model_type:ultralytics_bbox'
+    )
+  })
+})
+
+describe('getEditableModelType', () => {
+  const asset = (tags: string[]): AssetItem => ({
+    id: 'a',
+    name: 'model.safetensors',
+    tags
+  })
+
+  it('returns the stripped model_type value in model_type mode', () => {
+    expect(
+      getEditableModelType(
+        asset(['models', 'checkpoints', 'model_type:checkpoints']),
+        true
+      )
+    ).toBe('checkpoints')
+  })
+
+  it('falls back to the bare tag for an uncovered asset in model_type mode', () => {
+    expect(getEditableModelType(asset(['models', 'sam2']), true)).toBe('sam2')
+  })
+
+  it('uses the legacy first-non-models tag when mode is off', () => {
+    expect(
+      getEditableModelType(asset(['models', 'checkpoints', 'sdxl']), false)
+    ).toBe('checkpoints')
+  })
+
+  it('returns null when only the models tag is present', () => {
+    expect(getEditableModelType(asset(['models']), true)).toBeNull()
+  })
+})
+
+describe('buildModelTypeTagUpdate', () => {
+  const asset = (tags: string[]): AssetItem => ({
+    id: 'a',
+    name: 'model.safetensors',
+    tags
+  })
+
+  it('swaps the bare subtype tag when mode is off', () => {
+    expect(
+      buildModelTypeTagUpdate(asset(['models', 'checkpoints']), 'loras', false)
+    ).toEqual(['models', 'loras'])
+  })
+
+  it('preserves user labels and swaps only the subtype tag when mode is off', () => {
+    expect(
+      buildModelTypeTagUpdate(
+        asset(['models', 'checkpoints', 'sdxl']),
+        'loras',
+        false
+      )
+    ).toEqual(['models', 'sdxl', 'loras'])
+  })
+
+  it('writes only the model_type form for a covered asset, leaving the bare twin for the backend', () => {
+    expect(
+      buildModelTypeTagUpdate(
+        asset(['models', 'checkpoints', 'model_type:checkpoints']),
+        'loras',
+        true
+      )
+    ).toEqual(['models', 'checkpoints', 'model_type:loras'])
+  })
+
+  it('replaces every existing model_type form for a shared-path dual-tagged asset', () => {
+    expect(
+      buildModelTypeTagUpdate(
+        asset([
+          'models',
+          'diffusion_models',
+          'model_type:diffusion_models',
+          'model_type:unet_gguf'
+        ]),
+        'loras',
+        true
+      )
+    ).toEqual(['models', 'diffusion_models', 'model_type:loras'])
+  })
+
+  it('drops the bare current type for an uncovered asset in model_type mode', () => {
+    expect(
+      buildModelTypeTagUpdate(asset(['models', 'sam2']), 'loras', true)
+    ).toEqual(['models', 'model_type:loras'])
+  })
+
+  it('keeps user labels untouched in model_type mode', () => {
+    expect(
+      buildModelTypeTagUpdate(
+        asset(['models', 'checkpoints', 'model_type:checkpoints', 'sdxl']),
+        'loras',
+        true
+      )
+    ).toEqual(['models', 'checkpoints', 'sdxl', 'model_type:loras'])
+  })
+})
+
+describe('reserved tag mirrors', () => {
+  const asset = (tags: string[]): AssetItem => ({
+    id: 'a',
+    name: 'model.safetensors',
+    tags
+  })
+
+  it("treats assetService's canonical reserved tags as reserved (locals must not drift)", () => {
+    expect(getAssetCategories(asset([MODELS_TAG, 'x']), false)).toEqual(['x'])
+    expect(
+      getAssetNodeCategoryCandidates(
+        asset([MODELS_TAG, MISSING_TAG, 'x']),
+        true
+      )
+    ).toEqual(['x'])
+    expect(getAssetTypeBadges(asset([MODELS_TAG, 'x']), false)).toEqual(['x'])
+    expect(getAssetModelType(asset([MODELS_TAG]))).toBeNull()
+  })
+})

src/platform/assets/utils/assetMetadataUtils.ts

@@ -2,6 +2,11 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { isCloud } from '@/platform/distribution/types'
 import { isCivitaiUrl } from '@/utils/formatUtil'
 
+// Reserved tag literals (mirror assetService's MODELS_TAG/MISSING_TAG). Kept
+// local so this leaf util doesn't pull the heavier assetService -> i18n chain.
+const MODELS_TAG = 'models'
+const MISSING_TAG = 'missing'
+
 /**
  * Type-safe utilities for extracting metadata from assets.
  * These utilities check user_metadata first, then metadata, then fallback.
@@ -140,16 +145,236 @@ export function getSourceName(url: string): string {
   return 'Source'
 }
 
+export const MODEL_TYPE_TAG_PREFIX = 'model_type:'
+
 /**
- * Extracts the model type from asset tags
+ * Extracts the model type from asset tags as a bare (non-namespaced) value.
+ * Never returns a raw `model_type:*` literal: this value feeds edit widgets
+ * whose save path writes tags back verbatim, so a namespaced tag leaking
+ * through here would round-trip the prefixed literal into the tag set.
  * @param asset - The asset to extract model type from
  * @returns The model type string or null if not present
  */
 export function getAssetModelType(asset: AssetItem): string | null {
-  const typeTag = asset.tags?.find((tag) => tag && tag !== 'models')
+  const typeTag = asset.tags?.find(
+    (tag) => tag && tag !== MODELS_TAG && !tag.startsWith(MODEL_TYPE_TAG_PREFIX)
+  )
   return typeTag ?? null
 }
 
+/**
+ * Builds the namespaced subtype tag the backend stores in `model_type:` mode.
+ * The argument is a discovery folder_name (e.g. `checkpoints`,
+ * `ultralytics_bbox`); the backend keeps the bare directory-path twin in sync.
+ */
+export function toModelTypeTag(folderName: string): string {
+  return `${MODEL_TYPE_TAG_PREFIX}${folderName}`
+}
+
+/** Strips the `model_type:` prefix off each namespaced tag, dropping non-`model_type:` tags. */
+function getModelTypeTagValues(asset: AssetItem): string[] {
+  return asset.tags
+    .filter((tag) => tag.startsWith(MODEL_TYPE_TAG_PREFIX))
+    .map((tag) => tag.slice(MODEL_TYPE_TAG_PREFIX.length))
+    .filter((tag) => tag.length > 0)
+}
+
+/**
+ * Resolves the folder_name shown as the asset's current model type in the edit
+ * dropdown. In `modelTypeMode` the stripped `model_type:` value is authoritative
+ * (covered assets); an uncovered asset with no `model_type:` tag falls back to
+ * its bare subtype tag, mirroring the read-side grouping. Outside the mode this
+ * is the legacy first-non-`models` tag.
+ */
+export function getEditableModelType(
+  asset: AssetItem,
+  modelTypeMode: boolean
+): string | null {
+  if (modelTypeMode) {
+    const [modelType] = getModelTypeTagValues(asset)
+    if (modelType) return modelType
+  }
+  return getAssetModelType(asset)
+}
+
+/**
+ * Computes the tag set for re-typing a model asset to `newFolderName`. In
+ * `modelTypeMode` only the `model_type:` form is written — the backend keeps the
+ * bare directory-path twin in sync, so existing `model_type:` tags are dropped
+ * (covered assets) or the bare current type is dropped (uncovered assets) and
+ * the new `model_type:<folder_name>` is added. Outside the mode it swaps the
+ * legacy bare subtype tag, preserving the pre-namespace behavior.
+ */
+export function buildModelTypeTagUpdate(
+  asset: AssetItem,
+  newFolderName: string,
+  modelTypeMode: boolean
+): string[] {
+  if (!modelTypeMode) {
+    const currentType = getAssetModelType(asset)
+    return asset.tags.filter((tag) => tag !== currentType).concat(newFolderName)
+  }
+
+  const modelTypeTags = asset.tags.filter((tag) =>
+    tag.startsWith(MODEL_TYPE_TAG_PREFIX)
+  )
+  const currentBareType = getAssetModelType(asset)
+  const tagsToRemove =
+    modelTypeTags.length > 0
+      ? new Set(modelTypeTags)
+      : new Set(currentBareType ? [currentBareType] : [])
+
+  return asset.tags
+    .filter((tag) => !tagsToRemove.has(tag))
+    .concat(toModelTypeTag(newFolderName))
+}
+
+/** Legacy grouping: each non-`models` tag's top-level path segment. */
+function getBareTagCategories(asset: AssetItem): string[] {
+  return asset.tags
+    .filter((tag) => tag !== MODELS_TAG && tag.length > 0)
+    .map((tag) => tag.split('/')[0])
+}
+
+/**
+ * Resolves the category keys a model asset is grouped under.
+ *
+ * `modelTypeMode` reflects whether the backend declares the `model_type:` tag
+ * scheme (the `supports_model_type_tags` capability). When true, an asset's
+ * `model_type:*` values are authoritative; an asset with no `model_type:` tag
+ * still routes by its bare tags. When false (the default) categories come from
+ * the legacy bare-tag top-level grouping and `model_type:` is ignored.
+ */
+export function getAssetCategories(
+  asset: AssetItem,
+  modelTypeMode: boolean
+): string[] {
+  if (modelTypeMode) {
+    const modelTypes = getModelTypeTagValues(asset)
+    if (modelTypes.length > 0) return modelTypes
+    // Uncovered assets route by bare tags, but namespace residue (e.g. a
+    // malformed empty `model_type:`) must not surface as a raw category.
+    return getBareTagCategories(asset).filter(
+      (category) => !category.startsWith(MODEL_TYPE_TAG_PREFIX)
+    )
+  }
+
+  return getBareTagCategories(asset)
+}
+
+/**
+ * Resolves the primary tag a browser surface titles itself after. In
+ * `modelTypeMode` a covered asset uses its first `model_type:*` value — the
+ * key it groups under — while an uncovered asset keeps the legacy selection
+ * (first non-`models` tag, verbatim, hierarchical paths intact). Outside the
+ * mode this is exactly the legacy selection.
+ */
+export function getPrimaryCategoryTag(
+  asset: AssetItem,
+  modelTypeMode: boolean
+): string | undefined {
+  if (modelTypeMode) {
+    const [modelType] = getModelTypeTagValues(asset)
+    if (modelType) return modelType
+    return asset.tags.find(
+      (tag) => tag !== MODELS_TAG && !tag.startsWith(MODEL_TYPE_TAG_PREFIX)
+    )
+  }
+  return asset.tags.find((tag) => tag !== MODELS_TAG)
+}
+
+/** Number of `parent/child` segments in a tag, used to pick the most specific. */
+function pathDepth(tag: string): number {
+  return tag.split('/').length
+}
+
+/** Removes the `model_type:` namespace prefix from a tag when present. */
+export function stripModelTypePrefix(tag: string): string {
+  return tag.startsWith(MODEL_TYPE_TAG_PREFIX)
+    ? tag.slice(MODEL_TYPE_TAG_PREFIX.length)
+    : tag
+}
+
+/**
+ * Resolves the labels shown as an asset card's type badges.
+ *
+ * In `modelTypeMode` a covered asset badges every `model_type:*` value — the
+ * same keys it groups under (`getAssetCategories`) — so a shared-root asset
+ * tagged with several categories carries each of them; whichever category
+ * view the card appears in is represented on the card. Uncovered assets (and
+ * legacy mode) keep the original single selection: first non-`models` tag,
+ * with bare hierarchical tags showing the segment after the first `/`.
+ */
+export function getAssetTypeBadges(
+  asset: AssetItem,
+  modelTypeMode: boolean
+): string[] {
+  if (modelTypeMode) {
+    const modelTypes = getModelTypeTagValues(asset)
+    if (modelTypes.length > 0) return modelTypes
+  }
+  const typeTag = asset.tags.find(
+    (tag) =>
+      tag !== MODELS_TAG &&
+      !(modelTypeMode && tag.startsWith(MODEL_TYPE_TAG_PREFIX))
+  )
+  if (!typeTag) return []
+  return [
+    typeTag.includes('/') ? typeTag.slice(typeTag.indexOf('/') + 1) : typeTag
+  ]
+}
+
+/**
+ * Ordered node-category candidates for an asset, most specific first.
+ *
+ * Callers resolve a node provider by trying each candidate in order and taking
+ * the first that maps to a provider. The full (possibly hierarchical) value is
+ * kept so `modelToNodeStore`'s `parent/child` fallback still works.
+ *
+ * In `modelTypeMode` (backend declares `supports_model_type_tags`) candidates
+ * come in two tiers. Tier 1: the stripped `model_type:*` values plus bare tags
+ * *related* to one of them (equal to it, or extending it as a `parent/child`
+ * path), ordered by descending depth — so a resolvable `LLM/Qwen-VL/...` twin
+ * wins over a flat `model_type:LLM`, while ties keep `model_type:*` values
+ * ahead of bare tags. Tier 2: unrelated bare tags (e.g. a user-added
+ * `foo/bar`), tried only when nothing authoritative resolves — they can no
+ * longer pre-empt a resolvable `model_type:*` value however deep they are.
+ * An uncovered asset (no `model_type:` tag) routes by all its bare tags,
+ * deepest first. Outside `modelTypeMode` the legacy first-non-reserved tag is
+ * used verbatim.
+ */
+export function getAssetNodeCategoryCandidates(
+  asset: AssetItem,
+  modelTypeMode: boolean
+): string[] {
+  if (!modelTypeMode) {
+    const legacy = asset.tags.find(
+      (tag) => tag !== MODELS_TAG && tag !== MISSING_TAG
+    )
+    return legacy ? [legacy] : []
+  }
+
+  const bareTags = asset.tags.filter(
+    (tag) =>
+      tag !== MODELS_TAG &&
+      tag !== MISSING_TAG &&
+      !tag.startsWith(MODEL_TYPE_TAG_PREFIX)
+  )
+
+  const byDepthDesc = (a: string, b: string) => pathDepth(b) - pathDepth(a)
+
+  const modelTypes = getModelTypeTagValues(asset)
+  if (modelTypes.length === 0) return bareTags.toSorted(byDepthDesc)
+
+  const isRelated = (tag: string) =>
+    modelTypes.some((type) => tag === type || tag.startsWith(`${type}/`))
+
+  return [
+    ...[...modelTypes, ...bareTags.filter(isRelated)].sort(byDepthDesc),
+    ...bareTags.filter((tag) => !isRelated(tag)).sort(byDepthDesc)
+  ]
+}
+
 /**
  * Extracts user description from asset user_metadata
  * @param asset - The asset to extract user description from

src/platform/assets/utils/resolveModelNodeFromAsset.test.ts

@@ -1,14 +1,25 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { resolveModelNodeFromAsset } from '@/platform/assets/utils/resolveModelNodeFromAsset'
 
 const mockGetNodeProvider = vi.hoisted(() => vi.fn())
+const mockSupportsModelTypeTags = vi.hoisted(() => ({ value: false }))
 
 vi.mock('@/stores/modelToNodeStore', () => ({
   useModelToNodeStore: () => ({ getNodeProvider: mockGetNodeProvider })
 }))
 
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get supportsModelTypeTags() {
+        return mockSupportsModelTypeTags.value
+      }
+    }
+  })
+}))
+
 function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
   return {
     id: 'asset-123',
@@ -49,6 +60,11 @@ describe('resolveModelNodeFromAsset', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockSupportsModelTypeTags.value = false
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
   })
 
   describe('valid assets', () => {
@@ -68,6 +84,48 @@ describe('resolveModelNodeFromAsset', () => {
       }
     })
 
+    it('strips the model_type: prefix when resolving the provider in model_type mode', () => {
+      mockSupportsModelTypeTags.value = true
+      mockProvider(createMockNodeProvider())
+      const result = resolveModelNodeFromAsset(
+        createMockAsset({ tags: ['models', 'model_type:vae'] })
+      )
+
+      expect(result.success).toBe(true)
+      expect(mockGetNodeProvider).toHaveBeenCalledWith('vae')
+    })
+
+    it('skips an unresolvable incidental tag and resolves via the model_type value', () => {
+      mockSupportsModelTypeTags.value = true
+      mockGetNodeProvider.mockImplementation((category: string) =>
+        category === 'vae' ? createMockNodeProvider() : undefined
+      )
+      const result = resolveModelNodeFromAsset(
+        createMockAsset({ tags: ['models', 'model_type:vae', 'foo/bar'] })
+      )
+
+      expect(result.success).toBe(true)
+      expect(mockGetNodeProvider).toHaveBeenCalledWith('foo/bar')
+      expect(mockGetNodeProvider).toHaveBeenCalledWith('vae')
+    })
+
+    it('prefers the deepest resolvable path over a flat model_type value', () => {
+      mockSupportsModelTypeTags.value = true
+      mockGetNodeProvider.mockImplementation((category: string) =>
+        category === 'LLM/Qwen-VL/Qwen3-0.6B'
+          ? createMockNodeProvider()
+          : undefined
+      )
+      const result = resolveModelNodeFromAsset(
+        createMockAsset({
+          tags: ['models', 'model_type:LLM', 'LLM/Qwen-VL/Qwen3-0.6B']
+        })
+      )
+
+      expect(result.success).toBe(true)
+      expect(mockGetNodeProvider).toHaveBeenCalledWith('LLM/Qwen-VL/Qwen3-0.6B')
+    })
+
     it('falls back to metadata.filename when user_metadata.filename missing', () => {
       mockProvider(createMockNodeProvider())
       const result = resolveModelNodeFromAsset(
@@ -201,7 +259,7 @@ describe('resolveModelNodeFromAsset', () => {
       if (!result.success) {
         expect(result.error.code).toBe('NO_PROVIDER')
         expect(result.error.message).toContain('checkpoints')
-        expect(result.error.details?.category).toBe('checkpoints')
+        expect(result.error.details?.candidates).toEqual(['checkpoints'])
       }
     })
   })

src/platform/assets/utils/resolveModelNodeFromAsset.ts

@@ -4,7 +4,11 @@ import {
   MISSING_TAG,
   MODELS_TAG
 } from '@/platform/assets/services/assetService'
-import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
+import {
+  getAssetFilename,
+  getAssetNodeCategoryCandidates
+} from '@/platform/assets/utils/assetMetadataUtils'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { ModelNodeProvider } from '@/stores/modelToNodeStore'
 
@@ -81,10 +85,12 @@ export function resolveModelNodeFromAsset(
     }
   }
 
-  const category = validAsset.tags.find(
-    (tag) => tag !== MODELS_TAG && tag !== MISSING_TAG
+  const { flags } = useFeatureFlags()
+  const candidates = getAssetNodeCategoryCandidates(
+    validAsset,
+    flags.supportsModelTypeTags
   )
-  if (!category) {
+  if (candidates.length === 0) {
     console.error(
       `Asset ${validAsset.id} has no valid category tag. Available tags: ${validAsset.tags.join(', ')} (expected tag other than '${MODELS_TAG}' or '${MISSING_TAG}')`
     )
@@ -99,19 +105,31 @@ export function resolveModelNodeFromAsset(
     }
   }
 
-  const provider = useModelToNodeStore().getNodeProvider(category)
-  if (!provider) {
-    console.error(`No node provider registered for category: ${category}`)
+  const modelToNodeStore = useModelToNodeStore()
+  const resolved = candidates
+    .map((category) => ({
+      category,
+      provider: modelToNodeStore.getNodeProvider(category)
+    }))
+    .find((candidate) => candidate.provider !== undefined)
+
+  if (!resolved?.provider) {
+    // Known gap (out of scope for FE-1076): flat `model_type:LLM`-style tags
+    // whose loaders are only registered hierarchically land here until the
+    // backend emits a subtype-carrying tag.
+    console.error(
+      `No node provider registered for category: ${candidates.join(', ')}`
+    )
     return {
       success: false,
       error: {
         code: 'NO_PROVIDER',
-        message: `No node provider registered for category: ${category}`,
+        message: `No node provider registered for category: ${candidates.join(', ')}`,
         assetId: validAsset.id,
-        details: { category }
+        details: { candidates }
       }
     }
   }
 
-  return { success: true, value: { provider, filename } }
+  return { success: true, value: { provider: resolved.provider, filename } }
 }

src/platform/cloud/subscription/components/CreditsTile.test.ts

@@ -53,7 +53,6 @@ vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
     balance: computed(() => state.balance),
     subscription: computed(() => state.subscription),
-    isPaused: computed(() => false),
     isActiveSubscription: computed(() => state.isActiveSubscription),
     isFreeTier: computed(() => state.isFreeTier),
     currentTeamCreditStop: computed(() => state.currentTeamCreditStop),
@@ -98,14 +97,24 @@ const i18n = createI18n({
         remaining: 'remaining',
         refreshCredits: 'Refresh credits',
         monthly: 'Monthly',
-        yearly: 'Yearly',
-        percentUsed: '{percent}% used',
-        usageProgress: '{used} of {total} credits used',
+        refillsDate: 'Refills {date}',
+        refillsNextCycle: 'Refills next cycle',
+        creditsUsed: '{used} used',
+        creditsLeftOfTotal: '{remaining} left of {total}',
+        monthlyUsageProgress: '{used} of {total} monthly credits used',
         additionalCreditsInfo: 'About additional credits',
         additionalCreditsTooltip: 'Credits you add on top of your plan.',
         additionalCredits: 'Additional credits',
         additionalCreditsInUse: 'In use',
-        usedAfterMonthly: 'Used after plan credits run out',
+        usedAfterMonthly: 'Used after monthly runs out',
+        monthlyCreditsUsedUpTitle:
+          'Monthly credits are used up. Refills {date}',
+        monthlyCreditsUsedUpTitleNoDate: 'Monthly credits are used up',
+        monthlyCreditsUsedUpDescription:
+          "You're now spending additional credits.",
+        outOfCreditsTitle: "You're out of credits. Credits refill {date}",
+        outOfCreditsTitleNoDate: "You're out of credits",
+        outOfCreditsDescription: 'Add more credits to continue generating.',
         addCredits: 'Add credits',
         upgradeToAddCredits: 'Upgrade to add credits'
       }
@@ -169,19 +178,27 @@ describe('CreditsTile', () => {
   it('renders the monthly usage bar and additional breakdown', () => {
     activeProSubscription()
     const { container } = renderTile()
-    // PRO monthly allowance = 21,100; remaining 422 -> used 20,678 -> 98%.
+    // PRO monthly allowance = 21,100; remaining 422 -> used 20,678.
     expect(container.textContent).toContain('Monthly')
-    expect(container.textContent).toContain('98% used')
+    expect(container.textContent).toMatch(/Refills Feb/)
+    expect(container.textContent).toContain('20,678 used')
+    expect(container.textContent).toContain('422 left of 21,100')
     expect(container.textContent).toContain('Additional credits')
     expect(container.textContent).toContain('633')
-    expect(container.textContent).toContain('Used after plan credits run out')
+    expect(container.textContent).toContain('Used after monthly runs out')
   })
 
-  it('uses the team credit stop grant for a monthly allowance', () => {
+  it('renders a compact monthly summary for narrow containers', () => {
+    activeProSubscription()
+    const { container } = renderTile()
+    expect(container.textContent).toContain('422 left of 21K')
+  })
+
+  it('uses the team credit stop monthly grant for the monthly total', () => {
     state.isActiveSubscription = true
     state.subscription = {
       tier: 'TEAM',
-      duration: 'MONTHLY',
+      duration: 'ANNUAL',
       renewalDate: '2026-02-20T12:00:00Z'
     }
     state.currentTeamCreditStop = {
@@ -190,15 +207,13 @@ describe('CreditsTile', () => {
       stop_usd: 2500
     }
     state.balance = { amountMicros: 0, cloudCreditBalanceMicros: 200 }
-    renderTile()
-    // Allowance is the stop's grant, not the tier fallback.
-    expect(screen.getByRole('progressbar')).toHaveAttribute(
-      'aria-valuemax',
-      '527500'
-    )
+    const { container } = renderTile()
+    // Monthly total is the stop's raw monthly grant, not the tier fallback,
+    // and is not multiplied by 12 for annual billing.
+    expect(container.textContent).toContain('422 left of 527,500')
   })
 
-  it('grants the full year upfront for an annual plan', () => {
+  it('uses the per-month nominal grant for an annual personal tier', () => {
     state.isActiveSubscription = true
     state.subscription = {
       tier: 'PRO',
@@ -206,25 +221,35 @@ describe('CreditsTile', () => {
       renewalDate: '2026-02-20T12:00:00Z'
     }
     state.balance = { amountMicros: 0, cloudCreditBalanceMicros: 200 }
-    renderTile()
-    // Annual plans grant the whole year at once: 21,100 x 12.
-    expect(screen.getByRole('progressbar')).toHaveAttribute(
-      'aria-valuemax',
-      '253200'
-    )
+    const { container } = renderTile()
+    // Annual billing still grants the monthly nominal (21,100), not 12x.
+    expect(container.textContent).toContain('422 left of 21,100')
+    expect(container.textContent).not.toContain('253,200')
   })
 
-  it('labels the allowance by billing duration (yearly for annual)', () => {
-    state.isActiveSubscription = true
+  it('falls back to a dateless refills label when renewal date is missing', () => {
+    activeProSubscription()
+    state.subscription = { tier: 'PRO', duration: 'MONTHLY', renewalDate: null }
+    const { container } = renderTile()
+    expect(container.textContent).toContain('Refills next cycle')
+    expect(container.textContent).not.toContain('Refills Feb')
+  })
+
+  it('uses a dateless out-of-credits notice when renewal date is invalid', () => {
+    activeProSubscription()
     state.subscription = {
       tier: 'PRO',
-      duration: 'ANNUAL',
-      renewalDate: '2026-02-20T12:00:00Z'
+      duration: 'MONTHLY',
+      renewalDate: 'not-a-date'
     }
-    state.balance = { amountMicros: 0, cloudCreditBalanceMicros: 200 }
-    renderTile()
-    expect(screen.getByText('Yearly')).toBeInTheDocument()
-    expect(screen.queryByText('Monthly')).not.toBeInTheDocument()
+    state.balance = {
+      amountMicros: 0,
+      cloudCreditBalanceMicros: 0,
+      prepaidBalanceMicros: 0
+    }
+    const { container } = renderTile()
+    expect(container.textContent).toContain("You're out of credits")
+    expect(container.textContent).not.toContain('Credits refill')
   })
 
   it('hides the breakdown and forces zeros in the zero state', () => {
@@ -246,9 +271,11 @@ describe('CreditsTile', () => {
     expect(screen.queryByText('Add credits')).toBeNull()
   })
 
-  it('shows no in-use badge while monthly credits remain', () => {
+  it('shows no depletion notice or in-use badge while monthly credits remain', () => {
     activeProSubscription()
-    renderTile()
+    const { container } = renderTile()
+    expect(container.textContent).not.toContain('Monthly credits are used up')
+    expect(container.textContent).not.toContain("You're out of credits")
     expect(screen.queryByText('In use')).toBeNull()
   })
 
@@ -259,29 +286,42 @@ describe('CreditsTile', () => {
       cloudCreditBalanceMicros: 0,
       prepaidBalanceMicros: 300
     }
-    renderTile()
+    const { container } = renderTile()
+    expect(container.textContent).toContain(
+      'Monthly credits are used up. Refills Feb 20'
+    )
+    expect(container.textContent).toContain(
+      "You're now spending additional credits."
+    )
     expect(screen.getByText('In use')).toBeTruthy()
-    expect(screen.getByText('Add credits').dataset.variant).toBe('tertiary')
+    expect(screen.getByText('Add credits').dataset.variant).toBe('secondary')
   })
 
-  it('emphasizes add-credits when fully out of credits, without a punch-out notice', () => {
+  it('emphasizes add-credits when fully out of credits', () => {
     activeProSubscription()
     state.balance = {
       amountMicros: 0,
       cloudCreditBalanceMicros: 0,
       prepaidBalanceMicros: 0
     }
-    renderTile()
+    const { container } = renderTile()
+    expect(container.textContent).toContain(
+      "You're out of credits. Credits refill Feb 20"
+    )
+    expect(container.textContent).toContain(
+      'Add more credits to continue generating.'
+    )
     expect(screen.queryByText('In use')).toBeNull()
     expect(screen.getByText('Add credits').dataset.variant).toBe('inverted')
   })
 
-  it('shows no in-use badge until the balance has loaded', () => {
+  it('suppresses the depletion notice until the balance has loaded', () => {
     activeProSubscription()
     state.balance = null
     state.isLoading = true
-    renderTile()
-    expect(screen.queryByText('In use')).toBeNull()
+    const { container } = renderTile()
+    expect(container.textContent).not.toContain('Monthly credits are used up')
+    expect(container.textContent).not.toContain("You're out of credits")
   })
 
   it('routes add-credits through telemetry + the top-up dialog', async () => {

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

@@ -1,15 +1,6 @@
 <template>
   <div
-    :class="
-      cn(
-        '@container relative flex flex-col gap-6 rounded-2xl border border-interface-stroke bg-modal-panel-background px-6 py-5 transition-opacity',
-        // Paused subscriptions can't spend credits, so dim the whole tile to
-        // read as frozen and defer to the Update-payment banner. A lapsed plan
-        // (frozen) reads the same way.
-        (isPaused || frozen) && 'opacity-50',
-        customClass
-      )
-    "
+    class="@container relative flex flex-col gap-6 rounded-2xl border border-interface-stroke bg-modal-panel-background px-6 py-5"
   >
     <Button
       variant="muted-textonly"
@@ -28,10 +19,8 @@
       </div>
       <Skeleton v-if="isLoadingBalance" width="8rem" height="2rem" />
       <div v-else class="flex items-baseline gap-2">
-        <i class="icon-[lucide--coins] size-4 self-center text-credit" />
-        <span class="text-2xl leading-none font-bold tabular-nums">{{
-          displayTotal
-        }}</span>
+        <i class="icon-[lucide--component] size-4 self-center text-credit" />
+        <span class="text-2xl leading-none font-bold">{{ displayTotal }}</span>
         <span class="text-sm text-muted @max-[300px]:hidden">{{
           $t('subscription.remaining')
         }}</span>
@@ -39,22 +28,37 @@
     </div>
 
     <template v-if="showBreakdown">
+      <div
+        v-if="emptyStateNotice"
+        class="flex items-start gap-2 rounded-lg bg-base-background p-3 text-sm"
+      >
+        <i
+          class="mt-0.5 icon-[lucide--info] size-4 shrink-0 text-base-foreground"
+        />
+        <div class="flex flex-col gap-1">
+          <span class="text-base-foreground">{{ emptyStateNotice.title }}</span>
+          <span class="text-muted">{{ emptyStateNotice.description }}</span>
+        </div>
+      </div>
+
       <div
         v-if="showBar"
-        :class="cn('flex flex-col gap-2', isAllowanceDepleted && 'opacity-30')"
+        :class="cn('flex flex-col gap-2', isMonthlyDepleted && 'opacity-30')"
       >
         <div class="flex items-center justify-between text-sm">
-          <span class="text-muted">{{ cycleLabel }}</span>
+          <span class="text-text-primary">{{
+            $t('subscription.monthly')
+          }}</span>
           <span class="text-muted">
-            {{ cycleStatusLabel }}
+            {{ refillsLabel }}
           </span>
         </div>
         <div
           role="progressbar"
           :aria-valuenow="usage.used"
           :aria-valuemin="0"
-          :aria-valuemax="allowanceTotalCredits ?? 0"
-          :aria-valuetext="cycleUsageLabel"
+          :aria-valuemax="monthlyTotalCredits ?? 0"
+          :aria-valuetext="monthlyUsageLabel"
           class="h-2 w-full overflow-hidden rounded-full bg-secondary-background-hover"
         >
           <div
@@ -62,6 +66,40 @@
             :style="{ width: usedBarWidth }"
           />
         </div>
+        <div class="flex items-center justify-between gap-2 text-sm">
+          <Skeleton
+            v-if="isLoadingBalance"
+            class="@max-[300px]:hidden"
+            width="5rem"
+            height="1rem"
+          />
+          <span v-else class="text-muted @max-[300px]:hidden">
+            {{ $t('subscription.creditsUsed', { used: usedDisplay }) }}
+          </span>
+          <Skeleton v-if="isLoadingBalance" width="9rem" height="1rem" />
+          <span
+            v-else
+            class="flex items-center gap-1 font-bold text-text-primary"
+          >
+            <i class="icon-[lucide--component] size-4 text-credit" />
+            <span class="@max-[180px]:hidden">
+              {{
+                $t('subscription.creditsLeftOfTotal', {
+                  remaining: monthlyBonusCredits,
+                  total: monthlyTotalDisplay
+                })
+              }}
+            </span>
+            <span class="hidden @max-[180px]:inline">
+              {{
+                $t('subscription.creditsLeftOfTotal', {
+                  remaining: monthlyRemainingCompact,
+                  total: monthlyTotalCompact
+                })
+              }}
+            </span>
+          </span>
+        </div>
       </div>
 
       <div class="h-px w-full bg-interface-stroke" />
@@ -80,7 +118,7 @@
               variant="muted-textonly"
               size="icon-sm"
               :aria-label="$t('subscription.additionalCreditsInfo')"
-              class="flex cursor-help appearance-none items-center border-none bg-transparent p-0 text-muted transition-colors hover:text-text-primary"
+              class="text-muted"
             >
               <i class="icon-[lucide--info] size-4" />
             </Button>
@@ -94,9 +132,9 @@
           <Skeleton v-if="isLoadingBalance" width="3rem" height="1rem" />
           <span
             v-else
-            class="flex items-center gap-1 font-bold text-text-primary tabular-nums"
+            class="flex items-center gap-1 font-bold text-text-primary"
           >
-            <i class="icon-[lucide--coins] size-4 text-credit" />
+            <i class="icon-[lucide--component] size-4 text-credit" />
             {{ displayPrepaid }}
           </span>
         </div>
@@ -118,10 +156,15 @@
       </Button>
       <Button
         v-else
-        :variant="isOutOfCredits ? 'inverted' : 'tertiary'"
+        :variant="isOutOfCredits ? 'inverted' : 'secondary'"
         size="lg"
-        class="w-full font-normal"
-        :disabled="isPaused || frozen"
+        :class="
+          cn(
+            'w-full font-normal',
+            !isOutOfCredits &&
+              'bg-interface-menu-component-surface-selected text-text-primary'
+          )
+        "
         @click="handleAddCredits"
       >
         {{ $t('subscription.addCredits') }}
@@ -135,7 +178,6 @@ import { cn } from '@comfyorg/tailwind-utils'
 import { useEventListener } from '@vueuse/core'
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted } from 'vue'
-import type { HTMLAttributes } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatCredits } from '@/base/credits/comfyCredits'
@@ -144,45 +186,40 @@ import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import {
+  DEFAULT_TIER_KEY,
+  TIER_TO_KEY,
+  getTierCredits
+} from '@/platform/cloud/subscription/constants/tierPricing'
+import { computeMonthlyUsage } from '@/platform/cloud/subscription/utils/creditsProgress'
 import { useTelemetry } from '@/platform/telemetry'
 import { consumePendingTopup } from '@/platform/telemetry/topupTracker'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useDialogService } from '@/services/dialogService'
 
-const {
-  zeroState = false,
-  frozen = false,
-  class: customClass
-} = defineProps<{
+const { zeroState = false } = defineProps<{
   /** Forces the zero-credit display (e.g. unsubscribed / member view). */
   zeroState?: boolean
-  /**
-   * Renders the full breakdown but dimmed and non-interactive, for a lapsed
-   * subscription that still has a shape to show. Mirrors the paused treatment.
-   */
-  frozen?: boolean
-  class?: HTMLAttributes['class']
 }>()
 
 const { locale, t } = useI18n()
 
 const {
   subscription,
-  isPaused,
   balance,
   isActiveSubscription,
   isFreeTier,
+  currentTeamCreditStop,
   fetchBalance,
   fetchStatus
 } = useBillingContext()
 const {
+  monthlyBonusCredits,
   prepaidCredits,
   totalCredits,
   monthlyBonusCreditsValue,
   prepaidCreditsValue,
-  isLoadingBalance,
-  allowanceTotalCredits,
-  usage
+  isLoadingBalance
 } = useSubscriptionCredits()
 const { permissions } = useWorkspaceUI()
 const { showPricingTable } = useSubscriptionDialog()
@@ -190,18 +227,40 @@ const { wrapWithErrorHandlingAsync } = useErrorHandling()
 const dialogService = useDialogService()
 const telemetry = useTelemetry()
 
-const cycleLabel = computed(() =>
-  subscription.value?.duration === 'ANNUAL'
-    ? t('subscription.yearly')
-    : t('subscription.monthly')
+const tierKey = computed(() => {
+  const tier = subscription.value?.tier
+  if (!tier) return DEFAULT_TIER_KEY
+  return TIER_TO_KEY[tier] ?? DEFAULT_TIER_KEY
+})
+
+const monthlyTotalCredits = computed<number | null>(() => {
+  const teamStop = currentTeamCreditStop.value
+  if (teamStop) return teamStop.credits_monthly
+  return getTierCredits(tierKey.value)
+})
+
+const usage = computed(() =>
+  computeMonthlyUsage(
+    monthlyBonusCreditsValue.value,
+    monthlyTotalCredits.value ?? 0
+  )
 )
 
-const cycleUsedPercent = computed(() =>
-  Math.round(usage.value.usedFraction * 100)
-)
+const refillsDateShort = computed(() => {
+  const raw = subscription.value?.renewalDate
+  if (!raw) return ''
+  const date = new Date(raw)
+  return Number.isNaN(date.getTime())
+    ? ''
+    : date.toLocaleDateString(locale.value, { month: 'short', day: 'numeric' })
+})
 
-const cycleStatusLabel = computed(() =>
-  t('subscription.percentUsed', { percent: cycleUsedPercent.value })
+const hasRefillsDate = computed(() => refillsDateShort.value !== '')
+
+const refillsLabel = computed(() =>
+  hasRefillsDate.value
+    ? t('subscription.refillsDate', { date: refillsDateShort.value })
+    : t('subscription.refillsNextCycle')
 )
 
 const formatCreditCount = (value: number) =>
@@ -211,58 +270,82 @@ const formatCreditCount = (value: number) =>
     numberOptions: { maximumFractionDigits: 0 }
   })
 
-const allowanceTotalDisplay = computed(() => {
-  const total = allowanceTotalCredits.value
+const monthlyTotalDisplay = computed(() => {
+  const total = monthlyTotalCredits.value
   return total === null ? '—' : formatCreditCount(total)
 })
 
 const usedDisplay = computed(() => formatCreditCount(usage.value.used))
 
+const compactNumber = computed(
+  () => new Intl.NumberFormat(locale.value, { notation: 'compact' })
+)
+const monthlyRemainingCompact = computed(() =>
+  compactNumber.value.format(monthlyBonusCreditsValue.value)
+)
+const monthlyTotalCompact = computed(() => {
+  const total = monthlyTotalCredits.value
+  return total === null ? '—' : compactNumber.value.format(total)
+})
+
 const displayTotal = computed(() => (zeroState ? '0' : totalCredits.value))
 const displayPrepaid = computed(() => (zeroState ? '0' : prepaidCredits.value))
 const usedBarWidth = computed(
   () => `${(usage.value.usedFraction * 100).toFixed(2)}%`
 )
-const cycleUsageLabel = computed(() =>
-  t('subscription.usageProgress', {
+const monthlyUsageLabel = computed(() =>
+  t('subscription.monthlyUsageProgress', {
     used: usedDisplay.value,
-    total: allowanceTotalDisplay.value
+    total: monthlyTotalDisplay.value
   })
 )
 
-const showBreakdown = computed(
-  () => (isActiveSubscription.value || frozen) && !zeroState
-)
+const showBreakdown = computed(() => isActiveSubscription.value && !zeroState)
 const showBar = computed(
   () =>
     showBreakdown.value &&
-    allowanceTotalCredits.value !== null &&
-    allowanceTotalCredits.value > 0
+    monthlyTotalCredits.value !== null &&
+    monthlyTotalCredits.value > 0
 )
 const showActionButton = computed(
-  () =>
-    (isActiveSubscription.value || frozen) &&
-    !zeroState &&
-    permissions.value.canTopUp
+  () => isActiveSubscription.value && !zeroState && permissions.value.canTopUp
 )
 
-const isAllowanceDepleted = computed(
+const isMonthlyDepleted = computed(
   () =>
-    !isPaused.value &&
-    !frozen &&
     showBar.value &&
     !isLoadingBalance.value &&
     balance.value != null &&
     monthlyBonusCreditsValue.value <= 0
 )
-const isSpendingAdditional = computed(
-  () => isAllowanceDepleted.value && prepaidCreditsValue.value > 0
-)
-// Fully out (monthly depleted and no additional credits left): emphasize the
-// add-credits button. Spending-additional keeps the quieter tertiary.
 const isOutOfCredits = computed(
-  () => isAllowanceDepleted.value && prepaidCreditsValue.value <= 0
+  () => isMonthlyDepleted.value && prepaidCreditsValue.value <= 0
 )
+const isSpendingAdditional = computed(
+  () => isMonthlyDepleted.value && prepaidCreditsValue.value > 0
+)
+
+const emptyStateNotice = computed(() => {
+  if (isOutOfCredits.value) {
+    return {
+      title: hasRefillsDate.value
+        ? t('subscription.outOfCreditsTitle', { date: refillsDateShort.value })
+        : t('subscription.outOfCreditsTitleNoDate'),
+      description: t('subscription.outOfCreditsDescription')
+    }
+  }
+  if (isMonthlyDepleted.value) {
+    return {
+      title: hasRefillsDate.value
+        ? t('subscription.monthlyCreditsUsedUpTitle', {
+            date: refillsDateShort.value
+          })
+        : t('subscription.monthlyCreditsUsedUpTitleNoDate'),
+      description: t('subscription.monthlyCreditsUsedUpDescription')
+    }
+  }
+  return null
+})
 
 const handleRefresh = wrapWithErrorHandlingAsync(async () => {
   await Promise.all([fetchBalance(), fetchStatus()])

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

@@ -6,12 +6,6 @@ import {
   formatCreditsFromCents
 } from '@/base/credits/comfyCredits'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import {
-  DEFAULT_TIER_KEY,
-  TIER_TO_KEY,
-  getTierCredits
-} from '@/platform/cloud/subscription/constants/tierPricing'
-import { computeMonthlyUsage } from '@/platform/cloud/subscription/utils/creditsProgress'
 
 /**
  * Composable for handling subscription credit calculations and formatting.
@@ -70,44 +64,12 @@ export function useSubscriptionCredits() {
     creditsFromMicros(toValue(billingContext.balance)?.prepaidBalanceMicros)
   )
 
-  // Total credits granted for the current billing cycle. Team plans read the
-  // credit stop; personal tiers read the tier grant. Annual plans front-load the
-  // whole year, so multiply the monthly nominal by the cycle length.
-  const cycleMonths = computed(() =>
-    toValue(billingContext.subscription)?.duration === 'ANNUAL' ? 12 : 1
-  )
-  const allowanceTotalCredits = computed<number | null>(() => {
-    const teamStop = toValue(billingContext.currentTeamCreditStop)
-    const tier = toValue(billingContext.subscription)?.tier
-    const tierKey = tier
-      ? (TIER_TO_KEY[tier] ?? DEFAULT_TIER_KEY)
-      : DEFAULT_TIER_KEY
-    const monthly = teamStop
-      ? teamStop.credits_monthly
-      : getTierCredits(tierKey)
-    return monthly === null ? null : monthly * cycleMonths.value
-  })
-
-  // Usage of that allowance drives the credits bar. Paused plans read as unused
-  // (credits are frozen), so force it to zero.
-  const usage = computed(() => {
-    const base = computeMonthlyUsage(
-      monthlyBonusCreditsValue.value,
-      allowanceTotalCredits.value ?? 0
-    )
-    return toValue(billingContext.isPaused)
-      ? { ...base, used: 0, usedFraction: 0 }
-      : base
-  })
-
   return {
     totalCredits,
     monthlyBonusCredits,
     prepaidCredits,
     monthlyBonusCreditsValue,
     prepaidCreditsValue,
-    isLoadingBalance,
-    allowanceTotalCredits,
-    usage
+    isLoadingBalance
   }
 }

src/platform/settings/components/SettingDialog.vue

@@ -1,11 +1,5 @@
 <template>
-  <BaseModalLayout
-    content-title=""
-    data-testid="settings-dialog"
-    size="full"
-    header-height-class="h-22"
-    :content-padding="isWorkspacePanel ? 'flush' : 'default'"
-  >
+  <BaseModalLayout content-title="" data-testid="settings-dialog" size="full">
     <template #leftPanelHeaderTitle>
       <i class="icon-[lucide--settings]" />
       <h2 class="text-neutral text-base">{{ $t('g.settings') }}</h2>
@@ -54,7 +48,6 @@
         id="keybinding-panel-header"
         class="flex-1"
       />
-      <WorkspaceSettingsHeader v-else-if="isWorkspacePanel" />
     </template>
 
     <template #header-right-area>
@@ -62,7 +55,6 @@
         v-if="activeCategoryKey === 'keybinding'"
         id="keybinding-panel-actions"
       />
-      <WorkspaceMenuButton v-else-if="isWorkspacePanel" />
     </template>
 
     <template #content>
@@ -101,11 +93,8 @@ import NavTitle from '@/components/widget/nav/NavTitle.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
 import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
-import WorkspaceMenuButton from '@/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.vue'
-import WorkspaceSettingsHeader from '@/platform/workspace/components/dialogs/settings/WorkspaceSettingsHeader.vue'
 import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
 import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
-import { useSettingsNavigation } from '@/platform/settings/composables/useSettingsNavigation'
 import { useSearchQueryTracking } from '@/platform/telemetry/searchQuery/useSearchQueryTracking'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import type {
@@ -146,14 +135,6 @@ const { fetchBalance } = useBillingContext()
 const navRef = ref<HTMLElement | null>(null)
 const activeCategoryKey = ref<string | null>(defaultCategory.value?.key ?? null)
 
-// Let panels deep-link into a sibling panel (e.g. Overview → Members).
-const { requestedPanelKey } = useSettingsNavigation()
-watch(requestedPanelKey, (key) => {
-  if (!key) return
-  activeCategoryKey.value = key
-  requestedPanelKey.value = null
-})
-
 const searchableNavItems = computed(() =>
   navGroups.value.flatMap((g) =>
     g.items.map((item) => ({
@@ -191,17 +172,6 @@ const activePanel = computed(() => {
   return findPanelByKey(activeCategoryKey.value)
 })
 
-const WORKSPACE_PANEL_KEYS = [
-  'workspace',
-  'workspace-members',
-  'workspace-partner-nodes'
-]
-const isWorkspacePanel = computed(
-  () =>
-    !!activeCategoryKey.value &&
-    WORKSPACE_PANEL_KEYS.includes(activeCategoryKey.value)
-)
-
 const getGroupSortOrder = (group: SettingTreeNode): number =>
   Math.max(0, ...flattenTree<SettingParams>(group).map((s) => s.sortOrder ?? 0))
 

src/platform/settings/composables/useSettingUI.ts

@@ -188,18 +188,6 @@ export function useSettingUI(
     )
   }
 
-  const membersPanel: SettingPanelItem = {
-    node: {
-      key: 'workspace-members',
-      label: 'Members',
-      children: []
-    },
-    component: defineAsyncComponent(
-      () =>
-        import('@/platform/workspace/components/dialogs/settings/WorkspaceMembersPanelContent.vue')
-    )
-  }
-
   const shouldShowWorkspacePanel = computed(
     () => teamWorkspacesEnabled.value && isLoggedIn.value
   )
@@ -257,7 +245,7 @@ export function useSettingUI(
       aboutPanel,
       creditsPanel,
       userPanel,
-      ...(shouldShowWorkspacePanel.value ? [workspacePanel, membersPanel] : []),
+      ...(shouldShowWorkspacePanel.value ? [workspacePanel] : []),
       keybindingPanel,
       extensionPanel,
       ...(isDesktop ? [serverConfigPanel] : []),
@@ -307,9 +295,7 @@ export function useSettingUI(
       key: 'workspace',
       label: 'Workspace',
       children: [
-        ...(shouldShowWorkspacePanel.value
-          ? [workspacePanel.node, membersPanel.node]
-          : []),
+        ...(shouldShowWorkspacePanel.value ? [workspacePanel.node] : []),
         ...(isLoggedIn.value &&
         !(isCloud && window.__CONFIG__?.subscription_required)
           ? [creditsPanel.node]

src/platform/settings/composables/useSettingsNavigation.ts

@@ -1,13 +0,0 @@
-import { ref } from 'vue'
-
-// A one-shot request to switch the open Settings dialog to another panel, so a
-// panel's content can deep-link into a sibling panel (e.g. Overview → Members).
-const requestedPanelKey = ref<string | null>(null)
-
-export function useSettingsNavigation() {
-  function navigateToPanel(key: string) {
-    requestedPanelKey.value = key
-  }
-
-  return { requestedPanelKey, navigateToPanel }
-}

src/platform/settings/constants/coreSettings.ts

@@ -1215,6 +1215,15 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: isCloud ? true : false,
     experimental: true
   },
+  {
+    id: 'Comfy.ModelLibrary.UseAssetBrowser',
+    name: 'Use the asset browser for the model library',
+    type: 'hidden',
+    tooltip:
+      'When enabled alongside the asset API, the model library opens the asset browser. Otherwise it opens the sidebar tree.',
+    defaultValue: isCloud ? true : false,
+    experimental: true
+  },
   {
     id: 'Comfy.VersionCompatibility.DisableWarnings',
     name: 'Disable version compatibility warnings',

src/platform/settings/types.ts

@@ -87,5 +87,3 @@ export type SettingPanelType =
   | 'subscription'
   | 'user'
   | 'workspace'
-  | 'workspace-members'
-  | 'workspace-partner-nodes'

src/platform/workspace/api/workspaceApi.ts

@@ -37,11 +37,6 @@ export interface Member {
   // billing lifecycle actions (cancel / reactivate / downgrade).
   // Optional: the cloud OpenAPI does not carry this field yet.
   is_original_owner?: boolean
-  // Last time the member ran or interacted with the workspace, and the credits
-  // they've consumed in the current billing cycle. Optional: the cloud OpenAPI
-  // does not carry these fields yet.
-  last_active_at?: string | null
-  credits_used_this_month?: number
 }
 
 interface PaginationInfo {
@@ -249,7 +244,6 @@ export type BillingSubscriptionStatus =
   | 'scheduled'
   | 'ended'
   | 'canceled'
-  | 'paused'
 
 export type BillingStatus =
   | 'awaiting_payment_method'

src/platform/workspace/components/CurrentUserPopoverWorkspace.vue

@@ -59,7 +59,7 @@
     <!-- Credits Section -->
 
     <div class="flex items-center gap-2 px-4 py-2">
-      <i class="icon-[lucide--coins] text-sm text-amber-400" />
+      <i class="icon-[lucide--component] text-sm text-amber-400" />
       <Skeleton
         v-if="isLoadingBalance"
         width="4rem"

src/platform/workspace/components/PricingTableWorkspace.vue

@@ -129,7 +129,7 @@
                 {{ t('subscription.monthlyCreditsPerMemberLabel') }}
               </span>
               <div class="flex flex-row items-center gap-1">
-                <i class="icon-[lucide--coins] text-sm text-amber-400" />
+                <i class="icon-[lucide--component] text-sm text-amber-400" />
                 <span
                   class="font-inter text-sm/normal font-bold text-base-foreground"
                 >

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -3,7 +3,7 @@
     <!-- Loading state while subscription is being set up -->
     <div
       v-if="isSettingUp"
-      class="rounded-2xl border border-interface-stroke/60 p-6"
+      class="rounded-2xl border border-interface-stroke p-6"
     >
       <div class="flex items-center gap-2 py-4 text-muted-foreground">
         <i class="pi pi-spin pi-spinner" />
@@ -14,7 +14,7 @@
     <!-- Billing data still loading: avoid rendering a false Free/$0 plan -->
     <div
       v-else-if="isLoading && !subscription"
-      class="rounded-2xl border border-interface-stroke/60 p-6"
+      class="rounded-2xl border border-interface-stroke p-6"
     >
       <div class="flex items-center gap-2 py-4 text-muted-foreground">
         <i class="pi pi-spin pi-spinner" />
@@ -25,7 +25,7 @@
     <!-- Billing fetch failed: offer retry rather than a misleading Free plan -->
     <div
       v-else-if="error && !subscription"
-      class="flex flex-col items-start gap-3 rounded-2xl border border-interface-stroke/60 p-6"
+      class="flex flex-col items-start gap-3 rounded-2xl border border-interface-stroke p-6"
     >
       <div class="flex items-center gap-2 text-text-secondary">
         <i class="pi pi-exclamation-circle text-danger" />
@@ -67,7 +67,7 @@
         </div>
       </div>
 
-      <div class="rounded-2xl border border-interface-stroke/60 p-6">
+      <div class="rounded-2xl border border-interface-stroke p-6">
         <div>
           <div
             class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:gap-2"
@@ -439,13 +439,11 @@ const subscriptionTierName = computed(() => {
     : baseName
 })
 
-const planDisplayName = computed(() => {
-  if (isInPersonalWorkspace.value) return subscriptionTierName.value
-  // 'ENTERPRISE' is a wire tier not yet in the generated SubscriptionTier union.
-  return (subscription.value?.tier as string | null) === 'ENTERPRISE'
-    ? t('subscription.enterprisePlanName')
+const planDisplayName = computed(() =>
+  isInPersonalWorkspace.value
+    ? subscriptionTierName.value
     : t('subscription.teamPlanName')
-})
+)
 
 const tierKey = computed(() => {
   const tier = subscription.value?.tier

src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue

@@ -86,7 +86,7 @@
           @max-reached="showCeilingWarning = true"
         >
           <template #prefix>
-            <i class="icon-[lucide--coins] size-4 shrink-0 text-gold-500" />
+            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
           </template>
         </FormattedNumberStepper>
       </div>
@@ -98,7 +98,7 @@
       v-if="isBelowMin"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
     >
-      <i class="icon-[lucide--coins] size-4" />
+      <i class="icon-[lucide--component] size-4" />
       {{
         $t('credits.topUp.minRequired', {
           credits: formatNumber(usdToCredits(MIN_AMOUNT))
@@ -109,7 +109,7 @@
       v-if="showCeilingWarning"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
     >
-      <i class="icon-[lucide--coins] size-4" />
+      <i class="icon-[lucide--component] size-4" />
       {{
         $t('credits.topUp.maxAllowed', {
           credits: formatNumber(usdToCredits(MAX_AMOUNT))

src/platform/workspace/components/WorkspaceProfilePic.vue

@@ -1,37 +1,22 @@
 <template>
   <div
-    :class="
-      cn(
-        'flex aspect-square size-8 items-center justify-center overflow-hidden rounded-md text-base font-semibold text-white',
-        $attrs.class as string
-      )
-    "
-    :style="imageUrl ? undefined : { background: gradient, textShadow }"
+    class="flex aspect-square size-8 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)'
+    }"
   >
-    <img
-      v-if="imageUrl"
-      :src="imageUrl"
-      :alt="workspaceName"
-      class="size-full object-cover"
-    />
-    <template v-else>{{ letter }}</template>
+    {{ letter }}
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { cn } from '@comfyorg/tailwind-utils'
-
-defineOptions({ inheritAttrs: false })
-
-const { workspaceName, imageUrl } = defineProps<{
+const { workspaceName } = defineProps<{
   workspaceName: string
-  imageUrl?: string
 }>()
 
-const textShadow = '0 1px 2px rgba(0, 0, 0, 0.2)'
-
 const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
 
 const gradient = computed(() => {

src/platform/workspace/components/dialogs/ChangeMemberRoleDialogContent.test.ts

@@ -56,7 +56,7 @@ describe('ChangeMemberRoleDialogContent', () => {
     mockChangeMemberRole.mockResolvedValue(undefined)
   })
 
-  it('shows promote copy and confirms with Make admin', async () => {
+  it('shows promote copy and confirms with Make owner', async () => {
     const { user } = renderDialog('owner')
 
     expect(

src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue

@@ -64,7 +64,6 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const { onConfirm } = defineProps<{
@@ -81,11 +80,7 @@ const workspaceName = ref('')
 const isValidName = computed(() => {
   const name = workspaceName.value.trim()
   const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
-  return (
-    name.length >= 1 &&
-    name.length <= WORKSPACE_NAME_MAX_LENGTH &&
-    safeNameRegex.test(name)
-  )
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
 })
 
 function onCancel() {

src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue

@@ -58,7 +58,6 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const { t } = useI18n()
@@ -71,11 +70,7 @@ 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 <= WORKSPACE_NAME_MAX_LENGTH &&
-    safeNameRegex.test(name)
-  )
+  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
 })
 
 function onCancel() {

src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex w-132 max-w-full flex-col rounded-2xl border border-border-default bg-base-background"
+    class="flex w-full max-w-lg flex-col rounded-2xl border border-border-default bg-base-background"
   >
     <div
       class="flex h-12 items-center justify-between border-b border-border-default px-4"
@@ -35,7 +35,7 @@
             :value="email"
             :class="
               cn(
-                'rounded-full bg-tertiary-background-hover',
+                'rounded-full',
                 !EMAIL_REGEX.test(email) && 'bg-danger/20 text-danger'
               )
             "

src/platform/workspace/components/dialogs/RequestMoreDialogContent.vue

@@ -1,54 +0,0 @@
-<template>
-  <div
-    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
-  >
-    <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">{{ title }}</h2>
-      <button
-        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
-        :aria-label="$t('g.close')"
-        @click="close"
-      >
-        <i class="pi pi-times size-4" />
-      </button>
-    </div>
-
-    <div class="p-4">
-      <p class="m-0 text-sm text-muted-foreground">{{ message }}</p>
-    </div>
-
-    <div class="flex items-center justify-end gap-2 p-4">
-      <Button variant="muted-textonly" @click="close">
-        {{ $t('g.close') }}
-      </Button>
-      <Button variant="secondary" size="lg" @click="requestMore">
-        {{ $t('workspacePanel.requestMore') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const { dialogKey, onRequestMore } = defineProps<{
-  dialogKey: string
-  title: string
-  message: string
-  onRequestMore: () => void
-}>()
-
-const dialogStore = useDialogStore()
-
-function close() {
-  dialogStore.closeDialog({ key: dialogKey })
-}
-
-function requestMore() {
-  onRequestMore()
-  close()
-}
-</script>

src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.test.ts

@@ -232,7 +232,7 @@ describe('TeamWorkspacesDialogContent', () => {
       expect(findCreateButton(container)).toBeDisabled()
     })
 
-    it('disables create button for name exceeding the character limit', async () => {
+    it('disables create button for name exceeding 50 characters', async () => {
       const { container, user } = mountComponent()
       const input = container.querySelector(
         '#workspace-name-input'

src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.vue

@@ -145,7 +145,6 @@ import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfil
 import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspaceSwitch'
 import { useWorkspaceTierLabel } from '@/platform/workspace/composables/useWorkspaceTierLabel'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const { onConfirm } = defineProps<{
@@ -179,11 +178,7 @@ const tierLabels = computed(
 
 const isValidName = computed(() => {
   const name = workspaceName.value.trim()
-  return (
-    name.length >= 1 &&
-    name.length <= WORKSPACE_NAME_MAX_LENGTH &&
-    SAFE_NAME_REGEX.test(name)
-  )
+  return name.length >= 1 && name.length <= 50 && SAFE_NAME_REGEX.test(name)
 })
 
 function onCancel() {

src/platform/workspace/components/dialogs/settings/BillingStatusBanner.vue

@@ -1,174 +0,0 @@
-<template>
-  <div
-    v-if="banner"
-    role="status"
-    class="flex flex-col gap-3 rounded-2xl border border-interface-stroke/60 bg-base-background p-4 @2xl:flex-row @2xl:items-center @2xl:gap-2"
-  >
-    <div class="flex min-w-0 flex-1 flex-col gap-1">
-      <div class="flex items-center gap-2">
-        <i
-          :class="
-            cn(
-              'size-4 shrink-0',
-              // Muted circle for the calm plan-ending notice; amber triangle for
-              // every action-needed problem (paused, payment failed, out of credits).
-              banner.kind === 'ending'
-                ? 'icon-[lucide--circle-alert] text-muted-foreground'
-                : 'icon-[lucide--triangle-alert] text-warning-background'
-            )
-          "
-        />
-        <span class="text-sm text-base-foreground">{{ banner.title }}</span>
-      </div>
-      <p class="m-0 pl-6 text-sm text-muted-foreground">{{ banner.body }}</p>
-    </div>
-    <div
-      v-if="banner.showAction"
-      class="flex shrink-0 flex-wrap items-center gap-2 pl-6 @2xl:pl-0"
-    >
-      <slot name="actions" />
-      <template v-if="banner.kind === 'outOfCredits'">
-        <Button variant="textonly" size="lg" @click="dismiss">
-          {{ $t('workspacePanel.billingStatus.outOfCredits.dismiss') }}
-        </Button>
-        <Button variant="secondary" size="lg" @click="handleAddCredits">
-          {{ $t('workspacePanel.billingStatus.outOfCredits.addCredits') }}
-        </Button>
-      </template>
-      <Button
-        v-else-if="banner.kind === 'ending'"
-        variant="secondary"
-        size="lg"
-        :loading="isResubscribing"
-        @click="handleResubscribe"
-      >
-        {{ $t('workspacePanel.billingStatus.ending.reactivate') }}
-      </Button>
-      <Button v-else variant="inverted" size="lg">
-        {{ $t('workspacePanel.billingStatus.updatePayment') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useResubscribe } from '@/platform/workspace/composables/useResubscribe'
-import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
-import { useDialogService } from '@/services/dialogService'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { t, d } = useI18n()
-const {
-  billingStatus,
-  isPaused,
-  isActiveSubscription,
-  subscription,
-  renewalDate
-} = useBillingContext()
-const { permissions, isInPersonalWorkspace } = useWorkspaceUI()
-const dialogService = useDialogService()
-const { isResubscribing, handleResubscribe } = useResubscribe()
-
-const canManage = computed(() => permissions.value.canManageSubscription)
-
-const cycleResetDate = computed(() => {
-  const raw = renewalDate.value
-  return raw ? d(new Date(raw), { month: 'short', day: 'numeric' }) : ''
-})
-
-const planEndDate = computed(() => {
-  const raw = subscription.value?.endDate
-  return raw
-    ? d(new Date(raw), { year: 'numeric', month: 'long', day: 'numeric' })
-    : ''
-})
-
-// Out of credits: an active, non-paused team that has exhausted its balance.
-// Paused takes over this slot (see priority below). Dismissible for the session.
-const dismissed = ref(false)
-const isOutOfCredits = computed(
-  () =>
-    isActiveSubscription.value &&
-    !isPaused.value &&
-    subscription.value?.hasFunds === false
-)
-
-// A cancelled-but-still-active plan is winding down to its end date. Unlike the
-// states above it's a calm, owner-initiated notice (not a problem), so it sits
-// last and reads with the muted circle icon and a low-key secondary action.
-const isEnding = computed(
-  () =>
-    isActiveSubscription.value &&
-    !isPaused.value &&
-    (subscription.value?.isCancelled ?? false) &&
-    planEndDate.value !== ''
-)
-
-// One status banner slot across every workspace tab, in priority order: paused →
-// payment-failure warning → out of credits → plan ending. All owner/admin-only
-// (members can't act on any of them).
-const banner = computed(() => {
-  if (isInPersonalWorkspace.value) return null
-
-  if (isPaused.value) {
-    return {
-      kind: 'paused' as const,
-      title: t('workspacePanel.billingStatus.paused.title'),
-      body: canManage.value
-        ? t('workspacePanel.billingStatus.paused.body')
-        : t('workspacePanel.billingStatus.paused.memberBody'),
-      showAction: canManage.value
-    }
-  }
-
-  if (billingStatus.value === 'payment_failed' && canManage.value) {
-    return {
-      kind: 'warning' as const,
-      title: t('workspacePanel.billingStatus.warning.title'),
-      body: t('workspacePanel.billingStatus.warning.body', {
-        date: cycleResetDate.value
-      }),
-      showAction: true
-    }
-  }
-
-  if (isOutOfCredits.value && canManage.value && !dismissed.value) {
-    return {
-      kind: 'outOfCredits' as const,
-      title: t('workspacePanel.billingStatus.outOfCredits.title'),
-      body: cycleResetDate.value
-        ? t('workspacePanel.billingStatus.outOfCredits.body', {
-            date: cycleResetDate.value
-          })
-        : t('workspacePanel.billingStatus.outOfCredits.bodyNoDate'),
-      showAction: true
-    }
-  }
-
-  if (isEnding.value && canManage.value) {
-    return {
-      kind: 'ending' as const,
-      title: t('workspacePanel.billingStatus.ending.title', {
-        date: planEndDate.value
-      }),
-      body: t('workspacePanel.billingStatus.ending.body'),
-      showAction: true
-    }
-  }
-
-  return null
-})
-
-function dismiss() {
-  dismissed.value = true
-}
-
-function handleAddCredits() {
-  void dialogService.showTopUpCreditsDialog()
-}
-</script>

src/platform/workspace/components/dialogs/settings/MemberListItem.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    :data-testid="`member-row-${member.id}`"
+    :class="
+      cn(
+        'grid w-full items-center rounded-lg p-2',
+        isSingleSeatPlan ? 'grid-cols-1' : gridCols,
+        striped && 'bg-secondary-background/50'
+      )
+    "
+  >
+    <div class="flex items-center gap-3">
+      <UserAvatar
+        class="size-8"
+        :photo-url="isCurrentUser ? photoUrl : undefined"
+        :pt:icon:class="{ 'text-xl!': !isCurrentUser || !photoUrl }"
+      />
+      <div class="flex min-w-0 flex-1 flex-col gap-1">
+        <span class="text-sm text-base-foreground">
+          {{ member.name }}
+          <span v-if="isCurrentUser" class="text-muted-foreground">
+            ({{ $t('g.you') }})
+          </span>
+        </span>
+        <span class="text-sm text-muted-foreground">
+          {{ member.email }}
+        </span>
+      </div>
+    </div>
+    <span
+      v-if="showRoleColumn && !isSingleSeatPlan"
+      class="text-right text-sm text-muted-foreground"
+    >
+      {{
+        member.role === 'owner'
+          ? $t('workspaceSwitcher.roleOwner')
+          : $t('workspaceSwitcher.roleMember')
+      }}
+    </span>
+    <div
+      v-if="canManageMembers && !isSingleSeatPlan"
+      class="flex items-center justify-end"
+    >
+      <DropdownMenu
+        v-if="!isCurrentUser && !isOriginalOwner"
+        :entries="menuItems"
+      >
+        <template #button>
+          <Button
+            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+            variant="muted-textonly"
+            size="icon"
+            :aria-label="$t('g.moreOptions')"
+          >
+            <i class="pi pi-ellipsis-h" />
+          </Button>
+        </template>
+      </DropdownMenu>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+
+import DropdownMenu from '@/components/common/DropdownMenu.vue'
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import Button from '@/components/ui/button/Button.vue'
+import type { WorkspaceMember } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const {
+  showRoleColumn = false,
+  canManageMembers = false,
+  isSingleSeatPlan = false,
+  isOriginalOwner = false,
+  striped = false,
+  menuItems = []
+} = defineProps<{
+  member: WorkspaceMember
+  isCurrentUser: boolean
+  photoUrl?: string
+  gridCols: string
+  showRoleColumn?: boolean
+  canManageMembers?: boolean
+  isSingleSeatPlan?: boolean
+  isOriginalOwner?: boolean
+  striped?: boolean
+  menuItems?: MenuItem[]
+}>()
+</script>

src/platform/workspace/components/dialogs/settings/MemberTableRow.vue

@@ -1,117 +0,0 @@
-<template>
-  <TableRow
-    :data-testid="`member-row-${member.id}`"
-    class="group hover:bg-transparent [&:last-child>td]:border-b-0 [&>td]:border-b [&>td]:border-interface-stroke/20"
-  >
-    <TableCell>
-      <div class="flex items-center gap-3">
-        <span
-          class="flex size-8 shrink-0 items-center justify-center rounded-full"
-          :style="{
-            backgroundColor: userBadgeColor(member.name || member.email)
-          }"
-        >
-          <span class="text-sm font-bold text-base-foreground">
-            {{ initial }}
-          </span>
-        </span>
-        <div class="flex min-w-0 flex-1 flex-col gap-1">
-          <span class="text-sm text-base-foreground">
-            {{ member.name }}
-            <span v-if="isCurrentUser" class="text-muted-foreground">
-              ({{ $t('g.you') }})
-            </span>
-          </span>
-          <span class="truncate text-sm text-muted-foreground">
-            {{ member.email }}
-          </span>
-        </div>
-      </div>
-    </TableCell>
-    <TableCell class="text-sm text-muted-foreground">
-      {{ $t(roleLabelKey(member.role, isOriginalOwner)) }}
-    </TableCell>
-    <TableCell v-if="canManageMembers" class="text-sm text-muted-foreground">
-      {{ lastActivityLabel }}
-    </TableCell>
-    <TableCell
-      v-if="canManageMembers"
-      class="text-right text-sm text-muted-foreground tabular-nums"
-    >
-      {{ creditsLabel }}
-    </TableCell>
-    <TableCell v-if="canManageMembers" class="text-right" @click.stop>
-      <DropdownMenu
-        v-if="showMenu"
-        :entries="menuItems"
-        :modal="false"
-        content-class="min-w-44"
-      >
-        <template #button>
-          <Button
-            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-            variant="muted-textonly"
-            size="icon"
-            :aria-label="$t('g.moreOptions')"
-          >
-            <i class="pi pi-ellipsis-h" />
-          </Button>
-        </template>
-      </DropdownMenu>
-    </TableCell>
-  </TableRow>
-</template>
-
-<script setup lang="ts">
-import type { MenuItem } from 'primevue/menuitem'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import DropdownMenu from '@/components/common/DropdownMenu.vue'
-import Button from '@/components/ui/button/Button.vue'
-import TableCell from '@/components/ui/table/TableCell.vue'
-import TableRow from '@/components/ui/table/TableRow.vue'
-import type { WorkspaceMember } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { userBadgeColor } from '@/platform/workspace/utils/badgeColor'
-import { roleLabelKey } from '@/platform/workspace/utils/roleLabels'
-import { formatRelativeTime } from '@/platform/workspace/utils/relativeTime'
-
-const {
-  member,
-  isCurrentUser,
-  canManageMembers = false,
-  isOriginalOwner = false,
-  menuItems = []
-} = defineProps<{
-  member: WorkspaceMember
-  isCurrentUser: boolean
-  canManageMembers?: boolean
-  isOriginalOwner?: boolean
-  menuItems?: MenuItem[]
-}>()
-
-const { t } = useI18n()
-
-const initial = computed(() =>
-  (member.name || member.email).charAt(0).toUpperCase()
-)
-
-// The creator and the current user can't be managed from their own row.
-const showMenu = computed(
-  () => canManageMembers && !isCurrentUser && !isOriginalOwner
-)
-
-const lastActivityLabel = computed(() => {
-  if (!member.lastActivity) return '—'
-  return formatRelativeTime(member.lastActivity, new Date(), {
-    justNow: t('workspacePanel.members.activity.justNow'),
-    minutesAgo: (n) => t('workspacePanel.members.activity.minutesAgo', { n }),
-    hoursAgo: (n) => t('workspacePanel.members.activity.hoursAgo', { n }),
-    daysAgo: (n) => t('workspacePanel.members.activity.daysAgo', n)
-  })
-})
-
-const creditsLabel = computed(() =>
-  (member.creditsUsedThisMonth ?? 0).toLocaleString()
-)
-</script>

src/platform/workspace/components/dialogs/settings/MembersPanelContent.test.ts

@@ -1,7 +1,8 @@
 import { render, screen, within } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, ref } from 'vue'
+import type { Slots } from 'vue'
+import { computed, h, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import MembersPanelContent from './MembersPanelContent.vue'
@@ -17,7 +18,6 @@ const mockMemberMenuItems = vi.fn(() => [])
 const mockShowTeamPlans = vi.fn()
 const mockToggleSort = vi.fn()
 const mockHandleInviteMember = vi.fn()
-const mockFetchBalance = vi.fn()
 
 const {
   mockMembers,
@@ -27,14 +27,13 @@ const {
   mockFilteredPendingInvites,
   mockIsPersonalWorkspace,
   mockIsOnTeamPlan,
+  mockHasMultipleMembers,
   mockShowSearch,
   mockShowViewTabs,
   mockShowInviteButton,
   mockIsInviteDisabled,
   mockActiveView,
   mockSearchQuery,
-  mockSortField,
-  mockSortDirection,
   mockPermissions,
   mockUiConfig
 } = vi.hoisted(() => {
@@ -45,6 +44,7 @@ const {
     mockMembers: ref<WorkspaceMember[]>([]),
     mockPendingInvites: ref<PendingInvite[]>([]),
     mockOriginalOwnerId: ref<string | null>(null),
+    mockHasMultipleMembers: ref(true),
     mockShowSearch: ref(true),
     mockShowViewTabs: ref(true),
     mockShowInviteButton: ref(true),
@@ -55,36 +55,39 @@ const {
     mockIsOnTeamPlan: ref(true),
     mockActiveView: ref<'active' | 'pending'>('active'),
     mockSearchQuery: ref(''),
-    mockSortField: ref('role'),
-    mockSortDirection: ref('desc'),
     mockPermissions: ref({
+      canViewOtherMembers: true,
       canViewPendingInvites: true,
       canInviteMembers: true,
       canManageInvites: true,
-      canManageMembers: true
+      canManageMembers: true,
+      canLeaveWorkspace: true,
+      canAccessWorkspaceMenu: true,
+      canManageSubscription: true,
+      canTopUp: true
     }),
     mockUiConfig: ref({
       showMembersList: true,
       showPendingTab: true,
-      showSearch: true
+      showSearch: true,
+      showRoleColumn: true,
+      membersGridCols: 'grid-cols-[50%_40%_10%]',
+      pendingGridCols: 'grid-cols-[50%_20%_20%_10%]',
+      headerGridCols: 'grid-cols-[50%_40%_10%]',
+      showEditWorkspaceMenuItem: true,
+      workspaceMenuAction: 'delete' as 'leave' | 'delete' | null,
+      workspaceMenuDisabledTooltip: null as string | null
     })
   }
 })
 
-vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: () => ({ isPaused: computed(() => false) })
-}))
-
 vi.mock('@/platform/workspace/composables/useMembersPanel', () => ({
   useMembersPanel: () => ({
     searchQuery: mockSearchQuery,
     activeView: mockActiveView,
-    sortField: mockSortField,
-    sortDirection: mockSortDirection,
-    maxSeats: computed(() => 50),
-    memberCount: computed(() => mockMembers.value.length),
+    maxSeats: computed(() => 20),
     isOnTeamPlan: mockIsOnTeamPlan,
-    hasLapsedTeamPlan: computed(() => false),
+    hasMultipleMembers: mockHasMultipleMembers,
     showSearch: mockShowSearch,
     showViewTabs: mockShowViewTabs,
     showInviteButton: mockShowInviteButton,
@@ -101,6 +104,7 @@ vi.mock('@/platform/workspace/composables/useMembersPanel', () => ({
     })),
     filteredMembers: mockFilteredMembers,
     filteredPendingInvites: mockFilteredPendingInvites,
+    memberMenuItems: mockMemberMenuItems,
     memberMenus: computed(
       () =>
         new Map(
@@ -108,21 +112,28 @@ vi.mock('@/platform/workspace/composables/useMembersPanel', () => ({
         )
     ),
     isPersonalWorkspace: mockIsPersonalWorkspace,
+    members: mockMembers,
     pendingInvites: mockPendingInvites,
     permissions: mockPermissions,
     uiConfig: mockUiConfig,
     userPhotoUrl: ref(null),
-    fetchBalance: mockFetchBalance,
     isCurrentUser: (m: WorkspaceMember) =>
       m.email.toLowerCase() === 'owner@example.com',
     isOriginalOwner: (m: WorkspaceMember) => m.id === mockOriginalOwnerId.value,
     toggleSort: mockToggleSort,
     showTeamPlans: mockShowTeamPlans,
     handleResendInvite: mockHandleResendInvite,
-    handleRevokeInvite: mockHandleRevokeInvite
+    handleRevokeInvite: mockHandleRevokeInvite,
+    handleRemoveMember: vi.fn(),
+    handleChangeRole: vi.fn()
   })
 }))
 
+vi.mock('@/components/button/MoreButton.vue', () => ({
+  default: (_: unknown, { slots }: { slots: Slots }) =>
+    h('div', slots.default?.({ close: () => {} }))
+}))
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -146,15 +157,6 @@ const SearchInputStub = {
   emits: ['update:modelValue']
 }
 
-// Render the trigger slot (carries the g.moreOptions button) plus each entry as
-// a flat button, so menu items are assertable without opening a real overlay.
-const DropdownMenuStub = {
-  name: 'DropdownMenu',
-  props: ['entries', 'modal', 'contentClass'],
-  template:
-    '<div><slot name="button" /><button v-for="e in (entries || [])" :key="e.label" :aria-label="e.label" @click="e.command && e.command()">{{ e.label }}</button></div>'
-}
-
 function renderComponent() {
   return render(MembersPanelContent, {
     global: {
@@ -162,9 +164,8 @@ function renderComponent() {
       stubs: {
         Button: ButtonStub,
         SearchInput: SearchInputStub,
-        DropdownMenu: DropdownMenuStub,
         UserAvatar: true,
-        BillingStatusBanner: true
+        WorkspaceMenuButton: true
       },
       directives: { tooltip: () => {} }
     }
@@ -206,6 +207,7 @@ describe('MembersPanelContent', () => {
     mockFilteredPendingInvites.value = []
     mockIsPersonalWorkspace.value = false
     mockIsOnTeamPlan.value = true
+    mockHasMultipleMembers.value = true
     mockShowSearch.value = true
     mockShowViewTabs.value = true
     mockShowInviteButton.value = true
@@ -213,15 +215,27 @@ describe('MembersPanelContent', () => {
     mockActiveView.value = 'active'
     mockSearchQuery.value = ''
     mockPermissions.value = {
+      canViewOtherMembers: true,
       canViewPendingInvites: true,
       canInviteMembers: true,
       canManageInvites: true,
-      canManageMembers: true
+      canManageMembers: true,
+      canLeaveWorkspace: true,
+      canAccessWorkspaceMenu: true,
+      canManageSubscription: true,
+      canTopUp: true
     }
     mockUiConfig.value = {
       showMembersList: true,
       showPendingTab: true,
-      showSearch: true
+      showSearch: true,
+      showRoleColumn: true,
+      membersGridCols: 'grid-cols-[50%_40%_10%]',
+      pendingGridCols: 'grid-cols-[50%_20%_20%_10%]',
+      headerGridCols: 'grid-cols-[50%_40%_10%]',
+      showEditWorkspaceMenuItem: true,
+      workspaceMenuAction: 'delete',
+      workspaceMenuDisabledTooltip: null
     }
   })
 
@@ -229,9 +243,13 @@ describe('MembersPanelContent', () => {
     beforeEach(() => {
       mockIsPersonalWorkspace.value = true
       mockIsOnTeamPlan.value = false
+      mockHasMultipleMembers.value = false
       mockShowSearch.value = false
       mockShowViewTabs.value = false
       mockIsInviteDisabled.value = true
+      mockUiConfig.value.showMembersList = false
+      mockUiConfig.value.showSearch = false
+      mockUiConfig.value.showPendingTab = false
     })
 
     it('shows the upsell banner below the members card', () => {
@@ -257,7 +275,7 @@ describe('MembersPanelContent', () => {
     })
   })
 
-  describe('team workspace - member table', () => {
+  describe('team workspace - member list', () => {
     it('shows the Role column header and member roles', () => {
       mockFilteredMembers.value = [
         createMember({ role: 'owner', email: 'boss@test.com' }),
@@ -267,47 +285,18 @@ describe('MembersPanelContent', () => {
       expect(
         screen.getByText('workspacePanel.members.columns.role')
       ).toBeTruthy()
-      expect(screen.getByText('workspaceSwitcher.roleAdmin')).toBeTruthy()
-      expect(screen.getByText('workspaceSwitcher.roleMember')).toBeTruthy()
-    })
-
-    it('shows the Last activity and Credits columns', () => {
-      mockFilteredMembers.value = [createMember()]
-      renderComponent()
-      expect(
-        screen.getByText('workspacePanel.members.columns.lastActivity')
-      ).toBeTruthy()
-      expect(
-        screen.getByText('workspacePanel.members.columns.creditsUsed')
-      ).toBeTruthy()
-    })
-
-    it('renders the monthly credits for a member', () => {
-      mockFilteredMembers.value = [createMember({ creditsUsedThisMonth: 6532 })]
-      renderComponent()
-      expect(screen.getByText('6,532')).toBeTruthy()
-    })
-
-    it('labels the original owner as Owner and other owners as Admin', () => {
-      mockOriginalOwnerId.value = 'creator-1'
-      mockFilteredMembers.value = [
-        createMember({
-          id: 'creator-1',
-          email: 'creator@test.com',
-          role: 'owner',
-          isOriginalOwner: true
-        }),
-        createMember({ id: '2', email: 'admin@test.com', role: 'owner' })
-      ]
-      renderComponent()
       expect(screen.getByText('workspaceSwitcher.roleOwner')).toBeTruthy()
-      expect(screen.getByText('workspaceSwitcher.roleAdmin')).toBeTruthy()
+      expect(screen.getByText('workspaceSwitcher.roleMember')).toBeTruthy()
     })
 
     it('renders filtered members', () => {
       mockFilteredMembers.value = [
         createMember({ name: 'Alice', email: 'alice@test.com' }),
-        createMember({ id: '2', name: 'Bob', email: 'bob@test.com' })
+        createMember({
+          id: '2',
+          name: 'Bob',
+          email: 'bob@test.com'
+        })
       ]
       renderComponent()
       expect(screen.getByText('Alice')).toBeTruthy()
@@ -399,20 +388,34 @@ describe('MembersPanelContent', () => {
   describe('member role', () => {
     beforeEach(() => {
       mockPermissions.value = {
-        canViewPendingInvites: true,
+        canViewOtherMembers: true,
+        canViewPendingInvites: false,
         canInviteMembers: false,
         canManageInvites: false,
-        canManageMembers: false
+        canManageMembers: false,
+        canLeaveWorkspace: true,
+        canAccessWorkspaceMenu: true,
+        canManageSubscription: false,
+        canTopUp: false
       }
-      mockUiConfig.value.showPendingTab = true
+      mockUiConfig.value.showPendingTab = false
     })
 
-    it('shows the pending tab button (view-only)', () => {
+    it('hides the pending tab button', () => {
       mockPendingInvites.value = [createInvite()]
       renderComponent()
       expect(
-        screen.getByText(/workspacePanel\.members\.tabs\.pendingCount/)
-      ).toBeTruthy()
+        screen.queryByText(/workspacePanel\.members\.tabs\.pendingCount/)
+      ).toBeNull()
+    })
+
+    it('does not show the pending invites header', () => {
+      mockActiveView.value = 'pending'
+      mockPendingInvites.value = [createInvite()]
+      renderComponent()
+      expect(
+        screen.queryByText(/workspacePanel\.members\.pendingInvitesCount/)
+      ).toBeNull()
     })
 
     it('shows no action menus on member rows', () => {
@@ -448,6 +451,15 @@ describe('MembersPanelContent', () => {
       ).toBeNull()
     })
 
+    it('opens subscription dialog on upgrade click', async () => {
+      renderComponent()
+      const upgradeBtn = screen.getByRole('button', {
+        name: /workspacePanel\.members\.upgradeToTeam/
+      })
+      await userEvent.click(upgradeBtn)
+      expect(mockShowTeamPlans).toHaveBeenCalled()
+    })
+
     it('hides search input', () => {
       renderComponent()
       expect(screen.queryByRole('textbox')).toBeNull()
@@ -460,15 +472,17 @@ describe('MembersPanelContent', () => {
   })
 
   describe('contact us footer', () => {
-    it('opens the team-plan request form in a new tab for team workspaces on a team plan', async () => {
+    it('opens discord in a new tab for team workspaces on a team plan', async () => {
       const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
       renderComponent()
-      expect(screen.getByText(/needMoreMembers/)).toBeTruthy()
+      expect(
+        screen.getByText('workspacePanel.members.needMoreMembers')
+      ).toBeTruthy()
       await userEvent.click(
         screen.getByText('workspacePanel.members.contactUs')
       )
       expect(openSpy).toHaveBeenCalledWith(
-        'https://comfy-org.portal.usepylon.com/forms/team-plan-requests',
+        'https://www.comfy.org/discord',
         '_blank',
         'noopener,noreferrer'
       )
@@ -482,12 +496,16 @@ describe('MembersPanelContent', () => {
     })
   })
 
-  describe('member count tab', () => {
-    it('shows the members count tab for team workspace', () => {
-      mockMembers.value = [createMember({ id: '1' }), createMember({ id: '2' })]
+  describe('member count display', () => {
+    it('shows member count header for team workspace', () => {
+      mockFilteredMembers.value = [
+        createMember({ id: '1' }),
+        createMember({ id: '2' })
+      ]
+      mockMembers.value = mockFilteredMembers.value
       renderComponent()
       expect(
-        screen.getByText(/workspacePanel\.members\.tabs\.membersCount/)
+        screen.getByText(/workspacePanel\.members\.membersCount/)
       ).toBeTruthy()
     })
   })
@@ -522,7 +540,10 @@ describe('MembersPanelContent', () => {
       mockShowViewTabs.value = false
       renderComponent()
       expect(
-        screen.queryByText(/workspacePanel\.members\.tabs\.pendingCount/)
+        screen.queryByText('workspacePanel.members.tabs.active')
+      ).toBeNull()
+      expect(
+        screen.queryByText('workspacePanel.members.columns.role')
       ).toBeNull()
     })
   })

src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue

@@ -1,217 +1,209 @@
 <template>
-  <div class="@container flex min-h-0 flex-1 flex-col gap-4 pb-6">
-    <!-- Header: tabs (left) + search / invite (right), above the card -->
+  <div class="grow overflow-auto pt-6">
     <div
-      class="flex w-full flex-col gap-3 @2xl:flex-row @2xl:items-center @2xl:gap-9"
+      class="border-inter flex size-full flex-col gap-2 rounded-2xl border border-interface-stroke p-6"
     >
-      <div class="flex min-w-0 flex-1 items-center gap-2">
-        <template v-if="showViewTabs">
-          <Button
-            :variant="activeView === 'active' ? 'secondary' : 'muted-textonly'"
+      <!-- Section Header -->
+      <div class="flex w-full items-center gap-9">
+        <div class="flex min-w-0 flex-1 items-baseline gap-2">
+          <span class="text-base font-semibold text-base-foreground">
+            <template v-if="activeView === 'active'">
+              <template v-if="isOnTeamPlan && !isPersonalWorkspace">
+                {{
+                  $t('workspacePanel.members.membersCount', {
+                    count: members.length,
+                    maxSeats: maxSeats
+                  })
+                }}
+              </template>
+              <template v-else>
+                {{ $t('workspacePanel.members.header') }}
+              </template>
+            </template>
+            <template v-else-if="permissions.canViewPendingInvites">
+              {{
+                $t(
+                  'workspacePanel.members.pendingInvitesCount',
+                  pendingInvites.length
+                )
+              }}
+            </template>
+          </span>
+        </div>
+        <div class="flex items-center gap-2">
+          <SearchInput
+            v-if="showSearch"
+            v-model="searchQuery"
+            :placeholder="$t('workspacePanel.members.searchPlaceholder')"
             size="lg"
-            @click="activeView = 'active'"
-          >
-            {{ $t('workspacePanel.members.tabs.membersCount', memberCount) }}
-          </Button>
-          <Button
-            v-if="uiConfig.showPendingTab"
-            :variant="activeView === 'pending' ? 'secondary' : 'muted-textonly'"
-            size="lg"
-            @click="activeView = 'pending'"
-          >
-            {{
-              pendingInvites.length > 0
-                ? $t(
-                    'workspacePanel.members.tabs.pendingCount',
-                    pendingInvites.length
-                  )
-                : $t('workspacePanel.members.tabs.pending')
-            }}
-          </Button>
-        </template>
-        <span v-else class="text-base font-normal text-base-foreground">
-          {{ $t('workspacePanel.members.tabs.membersCount', memberCount) }}
-        </span>
-      </div>
-      <div class="flex w-full items-center gap-2 @2xl:w-auto">
-        <SearchInput
-          v-if="showSearch"
-          v-model="searchQuery"
-          :placeholder="$t('workspacePanel.members.searchPlaceholder')"
-          size="lg"
-          class="min-w-0 flex-1 @2xl:w-64 @2xl:flex-none"
-        />
-        <Button
-          v-if="showInviteButton"
-          v-tooltip="
-            inviteTooltip
-              ? { value: inviteTooltip, showDelay: 0 }
-              : { value: $t('workspacePanel.inviteMember'), showDelay: 300 }
-          "
-          variant="secondary"
-          size="lg"
-          class="shrink-0"
-          :disabled="isInviteDisabled"
-          :aria-label="$t('workspacePanel.inviteMember')"
-          @click="handleInviteMember"
-        >
-          {{ $t('workspacePanel.invite') }}
-          <i class="icon-[lucide--plus] size-4" />
-        </Button>
-      </div>
-    </div>
-
-    <BillingStatusBanner />
-
-    <!-- Card: fills height, table scrolls inside -->
-    <div
-      class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-interface-stroke/60"
-    >
-      <Table v-if="activeView === 'active'" class="min-h-0 flex-1 px-4">
-        <TableHeader class="sticky top-0 z-10 bg-base-background">
-          <TableRow
-            class="hover:bg-transparent [&>th]:h-14 [&>th]:border-b [&>th]:border-interface-stroke/60"
-          >
-            <TableHead :aria-sort="ariaSort('email')">
-              <button :class="sortHeaderClass" @click="toggleSort('email')">
-                {{ $t('workspacePanel.members.columns.email') }}
-                <i :class="sortIcon('email')" />
-              </button>
-            </TableHead>
-            <TableHead
-              :class="permissions.canManageMembers ? 'w-40' : undefined"
-              :aria-sort="ariaSort('role')"
-            >
-              <button :class="sortHeaderClass" @click="toggleSort('role')">
-                {{ $t('workspacePanel.members.columns.role') }}
-                <i :class="sortIcon('role')" />
-              </button>
-            </TableHead>
-            <TableHead
-              v-if="permissions.canManageMembers"
-              class="w-40"
-              :aria-sort="ariaSort('lastActivity')"
-            >
-              <button
-                :class="sortHeaderClass"
-                @click="toggleSort('lastActivity')"
-              >
-                {{ $t('workspacePanel.members.columns.lastActivity') }}
-                <i :class="sortIcon('lastActivity')" />
-              </button>
-            </TableHead>
-            <TableHead
-              v-if="permissions.canManageMembers"
-              class="w-64"
-              :aria-sort="ariaSort('credits')"
-            >
-              <button
-                :class="cn(sortHeaderClass, 'ml-auto')"
-                @click="toggleSort('credits')"
-              >
-                <i class="icon-[lucide--coins] size-4" />
-                {{ $t('workspacePanel.members.columns.creditsUsed') }}
-                <i :class="sortIcon('credits')" />
-              </button>
-            </TableHead>
-            <TableHead v-if="permissions.canManageMembers" class="w-12" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <MemberTableRow
-            v-if="isPersonalWorkspace"
-            :member="personalWorkspaceMember"
-            :is-current-user="true"
+            class="w-64"
           />
-          <template v-else>
-            <MemberTableRow
-              v-for="member in filteredMembers"
-              :key="member.id"
-              :member="member"
-              :is-current-user="isCurrentUser(member)"
-              :can-manage-members="permissions.canManageMembers"
-              :is-original-owner="isOriginalOwner(member)"
-              :menu-items="memberMenus.get(member.id)"
-            />
-          </template>
-        </TableBody>
-      </Table>
-
-      <Table v-else class="min-h-0 flex-1 px-4">
-        <TableHeader class="sticky top-0 z-10 bg-base-background">
-          <TableRow
-            class="hover:bg-transparent [&>th]:h-14 [&>th]:border-b [&>th]:border-interface-stroke/60"
+          <Button
+            v-if="showInviteButton"
+            v-tooltip="
+              inviteTooltip
+                ? { value: inviteTooltip, showDelay: 0 }
+                : { value: $t('workspacePanel.inviteMember'), showDelay: 300 }
+            "
+            variant="secondary"
+            size="lg"
+            :disabled="isInviteDisabled"
+            :aria-label="$t('workspacePanel.inviteMember')"
+            @click="handleInviteMember"
           >
-            <TableHead>
-              <span :class="sortHeaderClass">
-                {{ $t('workspacePanel.members.columns.email') }}
-              </span>
-            </TableHead>
-            <TableHead class="w-40" :aria-sort="ariaSort('inviteDate')">
-              <button
-                :class="sortHeaderClass"
-                @click="toggleSort('inviteDate')"
-              >
-                {{ $t('workspacePanel.members.columns.inviteDate') }}
-                <i :class="sortIcon('inviteDate')" />
-              </button>
-            </TableHead>
-            <TableHead class="w-40" :aria-sort="ariaSort('expiryDate')">
-              <button
-                :class="sortHeaderClass"
-                @click="toggleSort('expiryDate')"
-              >
-                {{ $t('workspacePanel.members.columns.expiryDate') }}
-                <i :class="sortIcon('expiryDate')" />
-              </button>
-            </TableHead>
-            <TableHead v-if="permissions.canManageInvites" class="w-12" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <PendingInviteRow
-            v-for="invite in filteredPendingInvites"
-            :key="invite.id"
-            :invite="invite"
-            :can-manage="permissions.canManageInvites"
+            {{ $t('workspacePanel.invite') }}
+            <i class="pi pi-plus text-sm" />
+          </Button>
+          <WorkspaceMenuButton v-if="permissions.canAccessWorkspaceMenu" />
+        </div>
+      </div>
+
+      <!-- Members Content -->
+      <div class="flex min-h-0 flex-1 flex-col">
+        <!-- Table Header with Tab Buttons and Column Headers -->
+        <div
+          v-if="uiConfig.showMembersList && showViewTabs"
+          :class="
+            cn(
+              'grid w-full items-center py-2',
+              activeView === 'pending'
+                ? uiConfig.pendingGridCols
+                : uiConfig.headerGridCols
+            )
+          "
+        >
+          <!-- Tab buttons in first column -->
+          <div class="flex items-center gap-2">
+            <Button
+              :variant="
+                activeView === 'active' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'active'"
+            >
+              {{ $t('workspacePanel.members.tabs.active') }}
+            </Button>
+            <Button
+              v-if="uiConfig.showPendingTab"
+              :variant="
+                activeView === 'pending' ? 'secondary' : 'muted-textonly'
+              "
+              size="md"
+              @click="activeView = 'pending'"
+            >
+              {{
+                $t(
+                  'workspacePanel.members.tabs.pendingCount',
+                  pendingInvites.length
+                )
+              }}
+            </Button>
+          </div>
+          <!-- Date column headers -->
+          <template v-if="activeView === 'pending'">
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('inviteDate')"
+            >
+              {{ $t('workspacePanel.members.columns.inviteDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-start"
+              @click="toggleSort('expiryDate')"
+            >
+              {{ $t('workspacePanel.members.columns.expiryDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <div />
+          </template>
+          <template v-else>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-end"
+              @click="toggleSort('role')"
+            >
+              {{ $t('workspacePanel.members.columns.role') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <!-- Empty cell for action column header (OWNER only) -->
+            <div v-if="permissions.canManageMembers" />
+          </template>
+        </div>
+
+        <!-- Members List -->
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <!-- Active Members -->
+          <template v-if="activeView === 'active'">
+            <!-- Personal Workspace: show only current user -->
+            <template v-if="isPersonalWorkspace">
+              <MemberListItem
+                :member="personalWorkspaceMember"
+                :is-current-user="true"
+                :photo-url="userPhotoUrl ?? undefined"
+                :grid-cols="uiConfig.membersGridCols"
+              />
+            </template>
+
+            <!-- Team Workspace: sorted list -->
+            <template v-else>
+              <MemberListItem
+                v-for="(member, index) in filteredMembers"
+                :key="member.id"
+                :member="member"
+                :is-current-user="isCurrentUser(member)"
+                :photo-url="
+                  isCurrentUser(member)
+                    ? (userPhotoUrl ?? undefined)
+                    : undefined
+                "
+                :grid-cols="uiConfig.membersGridCols"
+                :show-role-column="
+                  uiConfig.showRoleColumn && hasMultipleMembers
+                "
+                :can-manage-members="permissions.canManageMembers"
+                :is-single-seat-plan="!isOnTeamPlan"
+                :is-original-owner="isOriginalOwner(member)"
+                :striped="index % 2 === 1"
+                :menu-items="memberMenus.get(member.id)"
+              />
+            </template>
+          </template>
+
+          <!-- Pending Invites -->
+          <PendingInvitesList
+            v-if="activeView === 'pending'"
+            :invites="filteredPendingInvites"
+            :grid-cols="uiConfig.pendingGridCols"
             @resend="handleResendInvite"
             @revoke="handleRevokeInvite"
           />
-          <TableRow
-            v-if="filteredPendingInvites.length === 0"
-            class="hover:bg-transparent"
-          >
-            <TableCell
-              :colspan="permissions.canManageInvites ? 4 : 3"
-              class="py-6 text-center text-sm text-muted-foreground"
-            >
-              {{ $t('workspacePanel.members.noInvites') }}
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
+        </div>
+      </div>
     </div>
-
+    <!-- Upsell Banner -->
     <MemberUpsellBanner
       v-if="!isOnTeamPlan"
       :reactivate="hasLapsedTeamPlan"
       @show-plans="showTeamPlans()"
     />
+    <!-- Need More Members Footer -->
     <div
       v-if="isOnTeamPlan && !isPersonalWorkspace"
-      class="flex h-8 items-center"
+      class="flex items-center pt-2"
     >
       <p class="text-sm text-muted-foreground">
-        {{ membersUsageLabel }}
-        <template v-if="permissions.canInviteMembers">
-          {{ $t('workspacePanel.members.needMoreMembers') }}
-        </template>
+        {{ $t('workspacePanel.members.needMoreMembers') }}
       </p>
       <Button
-        v-if="permissions.canInviteMembers"
         variant="muted-textonly"
-        size="md"
-        class="text-sm text-base-foreground"
+        size="sm"
+        class="text-base-foreground"
         @click="handleContactUs"
       >
         {{ $t('workspacePanel.members.contactUs') }}
@@ -223,31 +215,21 @@
 <script setup lang="ts">
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
-import BillingStatusBanner from '@/platform/workspace/components/dialogs/settings/BillingStatusBanner.vue'
-import Table from '@/components/ui/table/Table.vue'
-import TableBody from '@/components/ui/table/TableBody.vue'
-import TableCell from '@/components/ui/table/TableCell.vue'
-import TableHead from '@/components/ui/table/TableHead.vue'
-import TableHeader from '@/components/ui/table/TableHeader.vue'
-import TableRow from '@/components/ui/table/TableRow.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
-import MemberTableRow from '@/platform/workspace/components/dialogs/settings/MemberTableRow.vue'
+import MemberListItem from '@/platform/workspace/components/dialogs/settings/MemberListItem.vue'
 import MemberUpsellBanner from '@/platform/workspace/components/dialogs/settings/MemberUpsellBanner.vue'
-import PendingInviteRow from '@/platform/workspace/components/dialogs/settings/PendingInviteRow.vue'
+import PendingInvitesList from '@/platform/workspace/components/dialogs/settings/PendingInvitesList.vue'
+import WorkspaceMenuButton from '@/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.vue'
 import { useMembersPanel } from '@/platform/workspace/composables/useMembersPanel'
 import { cn } from '@comfyorg/tailwind-utils'
-import { computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const {
   searchQuery,
   activeView,
-  sortField,
-  sortDirection,
   maxSeats,
-  memberCount,
   isOnTeamPlan,
   hasLapsedTeamPlan,
+  hasMultipleMembers,
   showSearch,
   showViewTabs,
   showInviteButton,
@@ -259,10 +241,11 @@ const {
   filteredPendingInvites,
   memberMenus,
   isPersonalWorkspace,
+  members,
   pendingInvites,
   permissions,
   uiConfig,
-  fetchBalance,
+  userPhotoUrl,
   isCurrentUser,
   isOriginalOwner,
   toggleSort,
@@ -272,38 +255,8 @@ const {
 } = useMembersPanel()
 
 const { staticUrls } = useExternalLink()
-const { t } = useI18n()
-
-// Owners get "Need more members?" after the count, where the period reads as a
-// separator; members see just the count, so drop the trailing period.
-const membersUsageLabel = computed(() => {
-  const label = t('workspacePanel.members.membersUsage', {
-    count: memberCount.value,
-    max: maxSeats.value
-  })
-  return permissions.value.canInviteMembers ? label : label.replace(/\.$/, '')
-})
-
-const sortHeaderClass =
-  'flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left font-[inherit] text-sm text-muted-foreground'
-
-function sortIcon(field: string) {
-  if (sortField.value !== field) return 'icon-[lucide--chevrons-up-down] size-3'
-  return sortDirection.value === 'asc'
-    ? 'icon-[lucide--chevron-up] size-3'
-    : 'icon-[lucide--chevron-down] size-3'
-}
-
-function ariaSort(field: string): 'ascending' | 'descending' | 'none' {
-  if (sortField.value !== field) return 'none'
-  return sortDirection.value === 'asc' ? 'ascending' : 'descending'
-}
 
 function handleContactUs() {
-  window.open(staticUrls.teamPlanRequests, '_blank', 'noopener,noreferrer')
+  window.open(staticUrls.discord, '_blank', 'noopener,noreferrer')
 }
-
-onMounted(() => {
-  void fetchBalance()
-})
 </script>

src/platform/workspace/components/dialogs/settings/PendingInviteRow.vue

@@ -1,88 +0,0 @@
-<template>
-  <TableRow
-    :data-testid="`invite-row-${invite.id}`"
-    class="group hover:bg-transparent"
-  >
-    <TableCell>
-      <div class="flex items-center gap-3">
-        <span
-          class="flex size-8 shrink-0 items-center justify-center rounded-full"
-          :style="{ backgroundColor: userBadgeColor(invite.email) }"
-        >
-          <span class="text-sm font-bold text-base-foreground">
-            {{ inviteInitial }}
-          </span>
-        </span>
-        <span class="min-w-0 flex-1 truncate text-sm text-base-foreground">
-          {{ invite.email }}
-        </span>
-      </div>
-    </TableCell>
-    <TableCell class="text-sm text-muted-foreground">
-      {{ formatDate(invite.inviteDate) }}
-    </TableCell>
-    <TableCell class="text-sm text-muted-foreground">
-      {{ formatDate(invite.expiryDate) }}
-    </TableCell>
-    <TableCell v-if="canManage" class="text-right" @click.stop>
-      <DropdownMenu
-        :entries="menuItems"
-        :modal="false"
-        content-class="min-w-44"
-      >
-        <template #button>
-          <Button
-            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-            variant="muted-textonly"
-            size="icon"
-            :aria-label="$t('g.moreOptions')"
-          >
-            <i class="pi pi-ellipsis-h" />
-          </Button>
-        </template>
-      </DropdownMenu>
-    </TableCell>
-  </TableRow>
-</template>
-
-<script setup lang="ts">
-import type { MenuItem } from 'primevue/menuitem'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import DropdownMenu from '@/components/common/DropdownMenu.vue'
-import Button from '@/components/ui/button/Button.vue'
-import TableCell from '@/components/ui/table/TableCell.vue'
-import TableRow from '@/components/ui/table/TableRow.vue'
-import type { PendingInvite } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { userBadgeColor } from '@/platform/workspace/utils/badgeColor'
-
-const { invite, canManage } = defineProps<{
-  invite: PendingInvite
-  canManage: boolean
-}>()
-
-const emit = defineEmits<{
-  resend: [invite: PendingInvite]
-  revoke: [invite: PendingInvite]
-}>()
-
-const { t, d } = useI18n()
-
-const inviteInitial = computed(() => invite.email.charAt(0).toUpperCase())
-
-const menuItems = computed<MenuItem[]>(() => [
-  {
-    label: t('workspacePanel.members.actions.resendInvite'),
-    command: () => emit('resend', invite)
-  },
-  {
-    label: t('workspacePanel.members.actions.cancelInvite'),
-    command: () => emit('revoke', invite)
-  }
-])
-
-function formatDate(date: Date): string {
-  return d(date, { dateStyle: 'medium' })
-}
-</script>

src/platform/workspace/components/dialogs/settings/PendingInvitesList.test.ts

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Slots } from 'vue'
+import { h } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import PendingInvitesList from './PendingInvitesList.vue'
+
+import type { PendingInvite } from '../../../stores/teamWorkspaceStore'
+
+const mockMenuClose = vi.hoisted(() => vi.fn())
+
+vi.mock('@/components/button/MoreButton.vue', () => ({
+  default: (_: unknown, { slots }: { slots: Slots }) =>
+    h('div', slots.default?.({ close: mockMenuClose }))
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+function createInvite(overrides: Partial<PendingInvite> = {}): PendingInvite {
+  return {
+    id: 'invite-1',
+    email: 'invitee@example.com',
+    inviteDate: new Date('2025-03-01'),
+    expiryDate: new Date('2025-04-01'),
+    ...overrides
+  }
+}
+
+function renderComponent(invites: PendingInvite[]) {
+  return render(PendingInvitesList, {
+    props: {
+      invites,
+      gridCols: 'grid-cols-[50%_20%_20%_10%]'
+    },
+    global: { plugins: [i18n] }
+  })
+}
+
+describe('PendingInvitesList', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('shows the empty state without action buttons when there are no invites', () => {
+    renderComponent([])
+
+    expect(screen.getByText('workspacePanel.members.noInvites')).toBeTruthy()
+    expect(screen.queryAllByRole('button')).toHaveLength(0)
+  })
+
+  it('emits resend with the invite and closes the menu', async () => {
+    const invite = createInvite({ id: 'inv-7' })
+    const { emitted } = renderComponent([invite])
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'workspacePanel.members.actions.resendInvite'
+      })
+    )
+
+    expect(emitted('resend')).toEqual([[invite]])
+    expect(mockMenuClose).toHaveBeenCalled()
+  })
+
+  it('emits revoke with the invite from the cancel item', async () => {
+    const invite = createInvite({ id: 'inv-8' })
+    const { emitted } = renderComponent([invite])
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'workspacePanel.members.actions.cancelInvite'
+      })
+    )
+
+    expect(emitted('revoke')).toEqual([[invite]])
+  })
+})

src/platform/workspace/components/dialogs/settings/PendingInvitesList.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div
+      v-for="(invite, index) in invites"
+      :key="invite.id"
+      :class="
+        cn(
+          'grid w-full items-center rounded-lg p-2',
+          gridCols,
+          index % 2 === 1 && 'bg-secondary-background/50'
+        )
+      "
+    >
+      <div class="flex items-center gap-3">
+        <div
+          class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
+        >
+          <span class="text-sm font-bold text-base-foreground">
+            {{ getInviteInitial(invite.email) }}
+          </span>
+        </div>
+        <div class="flex min-w-0 flex-1 flex-col gap-1">
+          <span class="text-sm text-base-foreground">
+            {{ getInviteDisplayName(invite.email) }}
+          </span>
+          <span class="text-sm text-muted-foreground">
+            {{ invite.email }}
+          </span>
+        </div>
+      </div>
+      <span class="text-sm text-muted-foreground">
+        {{ formatDate(invite.inviteDate) }}
+      </span>
+      <span class="text-sm text-muted-foreground">
+        {{ formatDate(invite.expiryDate) }}
+      </span>
+      <div class="flex items-center justify-end">
+        <MoreButton v-slot="{ close }" :aria-label="$t('g.moreOptions')">
+          <Button
+            variant="textonly"
+            size="unset"
+            :class="menuItemClass"
+            @click="
+              () => {
+                close()
+                $emit('resend', invite)
+              }
+            "
+          >
+            <i class="icon-[lucide--mail-plus] size-4" />
+            <span>{{ $t('workspacePanel.members.actions.resendInvite') }}</span>
+          </Button>
+          <Button
+            variant="textonly"
+            size="unset"
+            :class="menuItemClass"
+            @click="
+              () => {
+                close()
+                $emit('revoke', invite)
+              }
+            "
+          >
+            <i class="icon-[lucide--mail-x] size-4" />
+            <span>{{ $t('workspacePanel.members.actions.cancelInvite') }}</span>
+          </Button>
+        </MoreButton>
+      </div>
+    </div>
+    <div
+      v-if="invites.length === 0"
+      class="flex w-full items-center justify-center py-8 text-sm text-muted-foreground"
+    >
+      {{ $t('workspacePanel.members.noInvites') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import MoreButton from '@/components/button/MoreButton.vue'
+import Button from '@/components/ui/button/Button.vue'
+import type { PendingInvite } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const menuItemClass = 'w-full justify-start rounded-sm px-3 py-2'
+
+defineProps<{
+  invites: PendingInvite[]
+  gridCols: string
+}>()
+
+defineEmits<{
+  resend: [invite: PendingInvite]
+  revoke: [invite: PendingInvite]
+}>()
+
+const { d } = useI18n()
+
+function getInviteDisplayName(email: string): string {
+  return email.split('@')[0]
+}
+
+function getInviteInitial(email: string): string {
+  return email.charAt(0).toUpperCase()
+}
+
+function formatDate(date: Date): string {
+  return d(date, { dateStyle: 'medium' })
+}
+</script>

src/platform/workspace/components/dialogs/settings/WorkspaceMembersPanelContent.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="flex size-full flex-col">
-    <MembersPanelContent :key="workspaceRole" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue'
-
-import MembersPanelContent from '@/platform/workspace/components/dialogs/settings/MembersPanelContent.vue'
-import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-
-const { workspaceRole } = useWorkspaceUI()
-const { fetchMembers, fetchPendingInvites } = useTeamWorkspaceStore()
-
-onMounted(() => {
-  void fetchMembers()
-  void fetchPendingInvites()
-})
-</script>

src/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.test.ts

@@ -5,7 +5,6 @@ import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json'
-import { useWorkspaceRename } from '@/platform/workspace/composables/useWorkspaceRename'
 
 import WorkspaceMenuButton from './WorkspaceMenuButton.vue'
 
@@ -76,25 +75,6 @@ describe('WorkspaceMenuButton', () => {
     mockUiConfig.value = ownerConfig
     mockIsCurrentUserOriginalOwner.value = false
     mockIsWorkspaceSubscribed.value = false
-    useWorkspaceRename().stopRenaming()
-  })
-
-  it('offers Rename to an editor and starts inline renaming', async () => {
-    const user = userEvent.setup()
-    const { isRenaming } = useWorkspaceRename()
-    renderComponent()
-
-    await user.click(screen.getByRole('button', { name: 'Rename Workspace' }))
-    expect(isRenaming.value).toBe(true)
-  })
-
-  it('hides Rename from a member', () => {
-    mockUiConfig.value = memberConfig
-    renderComponent()
-
-    expect(
-      screen.queryByRole('button', { name: 'Rename Workspace' })
-    ).not.toBeInTheDocument()
   })
 
   it('lets a member leave and offers no destructive workspace actions', () => {

src/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.vue

@@ -1,16 +1,10 @@
 <template>
-  <DropdownMenu
-    v-if="menuItems.length > 0"
-    :entries="menuItems"
-    :modal="false"
-    @close-auto-focus="onMenuCloseAutoFocus"
-  >
+  <DropdownMenu :entries="menuItems">
     <template #button>
       <Button
         v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-        variant="secondary"
+        variant="muted-textonly"
         size="icon-lg"
-        class="rounded-lg"
         :aria-label="$t('g.moreOptions')"
       >
         <i class="pi pi-ellipsis-h" />
@@ -27,35 +21,20 @@ import { useI18n } from 'vue-i18n'
 
 import DropdownMenu from '@/components/common/DropdownMenu.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useWorkspaceRename } from '@/platform/workspace/composables/useWorkspaceRename'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogService } from '@/services/dialogService'
 
 const { t } = useI18n()
-const { showLeaveWorkspaceDialog, showDeleteWorkspaceDialog } =
-  useDialogService()
+const {
+  showLeaveWorkspaceDialog,
+  showDeleteWorkspaceDialog,
+  showEditWorkspaceDialog
+} = useDialogService()
 const { isWorkspaceSubscribed, isCurrentUserOriginalOwner } = storeToRefs(
   useTeamWorkspaceStore()
 )
 const { uiConfig } = useWorkspaceUI()
-const { startRenaming } = useWorkspaceRename()
-
-// Reka returns focus to the trigger when the menu closes, which would blur (and
-// so tear down) the rename input we're about to focus. Suppress that focus
-// restoration for the one close that kicks off a rename.
-let renameStarting = false
-
-function beginRename() {
-  renameStarting = true
-  startRenaming()
-}
-
-function onMenuCloseAutoFocus(event: Event) {
-  if (!renameStarting) return
-  renameStarting = false
-  event.preventDefault()
-}
 
 // Disable delete when the workspace has an active subscription (prevents
 // accidental deletion); uses the workspace's own status, not the global one.
@@ -72,21 +51,22 @@ const deleteTooltip = computed(() => {
 })
 
 const menuItems = computed<MenuItem[]>(() => {
-  const renameItems: MenuItem[] = uiConfig.value.showEditWorkspaceMenuItem
-    ? [
-        {
-          label: t('workspacePanel.menu.renameWorkspace'),
-          command: beginRename
-        }
-      ]
-    : []
+  const items: MenuItem[] = []
+
+  if (uiConfig.value.showEditWorkspaceMenuItem) {
+    items.push({
+      label: t('workspacePanel.menu.editWorkspace'),
+      icon: 'pi pi-pencil',
+      command: () => showEditWorkspaceDialog()
+    })
+  }
 
-  const destructiveItems: MenuItem[] = []
   const action = uiConfig.value.workspaceMenuAction
   if (action === 'delete') {
-    destructiveItems.push({
+    items.push({
       label: t('workspacePanel.menu.deleteWorkspace'),
-      class: isDeleteDisabled.value ? undefined : 'text-danger',
+      icon: 'pi pi-trash',
+      class: isDeleteDisabled.value ? 'text-danger/50' : 'text-danger',
       disabled: isDeleteDisabled.value,
       tooltip: deleteTooltip.value,
       command: isDeleteDisabled.value
@@ -97,23 +77,23 @@ const menuItems = computed<MenuItem[]>(() => {
 
   // Members and non-creator owners can leave; the creator sees it disabled.
   if (action === 'leave' || action === 'delete') {
-    destructiveItems.push(
+    items.push(
       isCurrentUserOriginalOwner.value
         ? {
             label: t('workspacePanel.menu.leaveWorkspace'),
+            icon: 'pi pi-sign-out',
+            class: 'opacity-50',
             disabled: true,
             tooltip: t('workspacePanel.menu.creatorCannotLeave')
           }
         : {
             label: t('workspacePanel.menu.leaveWorkspace'),
+            icon: 'pi pi-sign-out',
             command: () => showLeaveWorkspaceDialog()
           }
     )
   }
 
-  const divider: MenuItem[] =
-    renameItems.length && destructiveItems.length ? [{ separator: true }] : []
-
-  return [...renameItems, ...divider, ...destructiveItems]
+  return items
 })
 </script>

src/platform/workspace/components/dialogs/settings/WorkspaceSettingsHeader.vue

@@ -1,143 +0,0 @@
-<template>
-  <div class="flex min-w-0 items-center gap-4">
-    <div class="group relative size-12 shrink-0">
-      <WorkspaceProfilePic
-        class="size-12 rounded-lg text-2xl"
-        :workspace-name="workspaceName"
-        :image-url="imageUrl ?? undefined"
-      />
-      <button
-        v-if="canEdit"
-        type="button"
-        class="absolute inset-0 flex cursor-pointer items-center justify-center rounded-lg border-none bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
-        :aria-label="$t('workspacePanel.editWorkspaceImage')"
-        @click="pickImage"
-      >
-        <i class="icon-[lucide--pencil] size-4 text-white" />
-      </button>
-      <input
-        ref="fileInputRef"
-        type="file"
-        accept="image/*"
-        class="hidden"
-        @change="onFileChange"
-      />
-    </div>
-    <input
-      v-if="isRenaming"
-      ref="inputRef"
-      v-model="draftName"
-      :maxlength="MAX_NAME_LENGTH"
-      class="min-w-0 flex-1 appearance-none border-none bg-transparent p-0 font-[inherit] text-2xl font-semibold text-base-foreground outline-none"
-      @keydown.enter="commit"
-      @keydown.esc="cancel"
-      @blur="commit"
-    />
-    <h1
-      v-else
-      v-tooltip="
-        canEdit
-          ? { value: $t('workspacePanel.doubleClickToRename'), showDelay: 300 }
-          : undefined
-      "
-      class="truncate text-2xl font-semibold text-base-foreground"
-      @dblclick="beginRename"
-    >
-      {{ workspaceName }}
-    </h1>
-    <span
-      v-if="isRenaming && remaining <= 10"
-      class="shrink-0 text-sm text-muted-foreground tabular-nums"
-    >
-      {{ $t('workspacePanel.charactersLeft', remaining) }}
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useToast } from 'primevue/usetoast'
-import { storeToRefs } from 'pinia'
-import { computed, nextTick, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
-import { useWorkspaceRename } from '@/platform/workspace/composables/useWorkspaceRename'
-import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
-
-const { t } = useI18n()
-const toast = useToast()
-const store = useTeamWorkspaceStore()
-const { workspaceName } = storeToRefs(store)
-const { uiConfig } = useWorkspaceUI()
-
-const MAX_NAME_LENGTH = WORKSPACE_NAME_MAX_LENGTH
-
-// Renaming is gated to Owner + Admins (and the sole owner of a personal
-// workspace); Members never see the affordance.
-const canEdit = computed(() => uiConfig.value.showEditWorkspaceMenuItem)
-
-const { isRenaming, startRenaming, stopRenaming } = useWorkspaceRename()
-const draftName = ref('')
-const inputRef = ref<HTMLInputElement | null>(null)
-
-// A single entry point (double-click here or the "Rename" menu item) flips
-// `isRenaming`; seed the draft and focus the field once the input mounts.
-watch(isRenaming, (renaming) => {
-  if (!renaming) return
-  draftName.value = workspaceName.value
-  void nextTick(() => {
-    inputRef.value?.focus()
-    inputRef.value?.select()
-  })
-})
-
-// Surface the limit only as the user approaches it, to keep the header quiet.
-const remaining = computed(() => MAX_NAME_LENGTH - draftName.value.length)
-
-// Client-side only preview (prototype): the picked image is held locally, not
-// uploaded or persisted. Resets on reload.
-const imageUrl = ref<string | null>(null)
-const fileInputRef = ref<HTMLInputElement | null>(null)
-
-function pickImage() {
-  fileInputRef.value?.click()
-}
-
-function onFileChange(event: Event) {
-  const input = event.target as HTMLInputElement
-  const file = input.files?.[0]
-  input.value = ''
-  if (!file) return
-  const reader = new FileReader()
-  reader.onload = () => {
-    imageUrl.value = reader.result as string
-  }
-  reader.readAsDataURL(file)
-}
-
-function beginRename() {
-  if (!canEdit.value) return
-  startRenaming()
-}
-
-async function commit() {
-  if (!isRenaming.value) return
-  stopRenaming()
-  const name = draftName.value.trim()
-  if (!name || name === workspaceName.value) return
-  try {
-    await store.updateWorkspaceName(name)
-  } catch {
-    toast.add({
-      severity: 'error',
-      summary: t('workspacePanel.toast.failedToUpdateWorkspace')
-    })
-  }
-}
-
-function cancel() {
-  stopRenaming()
-}
-</script>

src/platform/workspace/composables/useAutoPageSize.ts

@@ -1,55 +0,0 @@
-import type { Ref } from 'vue'
-import { onScopeDispose, ref, watch } from 'vue'
-
-const FALLBACK_ROW_HEIGHT = 41
-const MIN_ROWS = 5
-
-/**
- * Derive a table's rows-per-page from the live height of its scroll container so
- * a taller dialog shows more rows instead of leaving empty space. Row and header
- * heights are read from the rendered table, so it adapts if the design changes.
- */
-export function useAutoPageSize(
-  containerRef: Ref<HTMLElement | null>,
-  min: number = MIN_ROWS
-) {
-  const pageSize = ref(min)
-
-  function measure() {
-    const container = containerRef.value
-    if (!container) return
-    // Use fractional (getBoundingClientRect) heights, not the integer
-    // offsetHeight: truncating each row's height makes the floor below think an
-    // extra partial row fits, which overflows the container by a few pixels and
-    // shows a scrollbar. Fractional heights keep a not-quite-fitting row out.
-    const rowHeight =
-      container.querySelector<HTMLElement>('tbody tr')?.getBoundingClientRect()
-        .height || FALLBACK_ROW_HEIGHT
-    const headerHeight =
-      container.querySelector<HTMLElement>('thead')?.getBoundingClientRect()
-        .height ?? 0
-    const fit = Math.floor((container.clientHeight - headerHeight) / rowHeight)
-    pageSize.value = Math.max(min, fit)
-  }
-
-  let observer: ResizeObserver | null = null
-  watch(
-    containerRef,
-    (el) => {
-      observer?.disconnect()
-      if (!el) return
-      observer = new ResizeObserver(() => measure())
-      observer.observe(el)
-      // Also observe the table itself: async-loaded rows change the table's
-      // height without resizing the container, so the initial measure (taken
-      // against an empty state or fallback row height) would otherwise stick.
-      // Re-measuring converges — pageSize stabilizes once real rows exist.
-      const table = el.querySelector('table')
-      if (table) observer.observe(table)
-    },
-    { immediate: true }
-  )
-  onScopeDispose(() => observer?.disconnect())
-
-  return { pageSize }
-}

src/platform/workspace/composables/useMembersPanel.test.ts

@@ -254,7 +254,6 @@ const mockShowChangeMemberRoleDialog = vi.fn()
 const mockShowSubscriptionDialog = vi.fn()
 const mockShowInviteMemberDialog = vi.fn()
 const mockShowInviteMemberUpsellDialog = vi.fn()
-const mockShowMemberLimitDialog = vi.fn()
 
 const {
   mockMembers,
@@ -367,9 +366,6 @@ vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
     isActiveSubscription: mockIsActiveSubscription,
     subscription: mockSubscription,
-    balance: { value: null },
-    renewalDate: { value: null },
-    fetchBalance: vi.fn(),
     getMaxSeats: (tierKey: string) => {
       const seats: Record<string, number> = {
         free: 1,
@@ -395,8 +391,7 @@ vi.mock('@/services/dialogService', () => ({
     showRevokeInviteDialog: mockShowRevokeInviteDialog,
     showChangeMemberRoleDialog: mockShowChangeMemberRoleDialog,
     showInviteMemberDialog: mockShowInviteMemberDialog,
-    showInviteMemberUpsellDialog: mockShowInviteMemberUpsellDialog,
-    showMemberLimitDialog: mockShowMemberLimitDialog
+    showInviteMemberUpsellDialog: mockShowInviteMemberUpsellDialog
   })
 }))
 
@@ -598,13 +593,13 @@ describe('useMembersPanel', () => {
 
       const roleItems = items[0].items ?? []
       expect(roleItems.map((i) => i.label)).toEqual([
-        'workspaceSwitcher.roleAdmin',
+        'workspaceSwitcher.roleOwner',
         'workspaceSwitcher.roleMember'
       ])
       expect(roleItems.map((i) => i.checked)).toEqual([false, true])
     })
 
-    it('checks Admin for owner-role rows', async () => {
+    it('checks Owner for owner rows', async () => {
       const panel = await setup()
       const items = panel.memberMenuItems(createMember({ role: 'owner' }))
       const roleItems = items[0].items ?? []
@@ -711,15 +706,14 @@ describe('useMembersPanel', () => {
       expect(mockShowInviteMemberDialog).not.toHaveBeenCalled()
     })
 
-    it('opens the member-limit dialog at the member cap (30)', async () => {
+    it('disables the invite button at the member cap (30)', async () => {
       mockTotalMemberSlots.value = 30
       const panel = await setup()
-      expect(panel.isInviteDisabled.value).toBe(false)
+      expect(panel.isInviteDisabled.value).toBe(true)
       expect(panel.inviteTooltip.value).toBe(
         'workspacePanel.inviteLimitReached'
       )
       panel.handleInviteMember()
-      expect(mockShowMemberLimitDialog).toHaveBeenCalled()
       expect(mockShowInviteMemberDialog).not.toHaveBeenCalled()
     })
 
@@ -730,12 +724,10 @@ describe('useMembersPanel', () => {
       expect(panel.inviteTooltip.value).toBeNull()
     })
 
-    it('opens the member-limit dialog at the flat backend member cap', async () => {
+    it('disables the invite button at the flat backend member cap', async () => {
       mockIsInviteLimitReached.value = true
       const panel = await setup()
-      expect(panel.isInviteDisabled.value).toBe(false)
-      panel.handleInviteMember()
-      expect(mockShowMemberLimitDialog).toHaveBeenCalled()
+      expect(panel.isInviteDisabled.value).toBe(true)
     })
 
     it('disables the invite button when not on a team plan', async () => {

src/platform/workspace/composables/useMembersPanel.ts

@@ -5,7 +5,6 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { WorkspaceRole } from '@/platform/workspace/api/workspaceApi'
 import { useTeamPlan } from '@/platform/workspace/composables/useTeamPlan'
@@ -21,37 +20,15 @@ import {
 import { useDialogService } from '@/services/dialogService'
 
 type ActiveView = 'active' | 'pending'
-type SortField =
-  | 'email'
-  | 'role'
-  | 'lastActivity'
-  | 'credits'
-  | 'inviteDate'
-  | 'expiryDate'
+type SortField = 'inviteDate' | 'expiryDate' | 'role'
 type SortDirection = 'asc' | 'desc'
 
 export function sortMembers(
   members: WorkspaceMember[],
   currentUserEmail: string | null,
   sortDirection: SortDirection,
-  originalOwnerId: string | null = null,
-  sortField: SortField = 'role'
+  originalOwnerId: string | null = null
 ): WorkspaceMember[] {
-  const dir = sortDirection === 'asc' ? 1 : -1
-
-  if (sortField === 'email') {
-    return [...members].sort((a, b) => dir * a.name.localeCompare(b.name))
-  }
-  if (sortField === 'lastActivity') {
-    const at = (m: WorkspaceMember) => m.lastActivity?.getTime() ?? 0
-    return [...members].sort((a, b) => dir * (at(a) - at(b)))
-  }
-  if (sortField === 'credits') {
-    const used = (m: WorkspaceMember) => m.creditsUsedThisMonth ?? 0
-    return [...members].sort((a, b) => dir * (used(a) - used(b)))
-  }
-
-  // Default (role) ordering pins the creator, then groups by role, then recency.
   return [...members].sort((a, b) => {
     const aIsOriginalOwner = a.id === originalOwnerId
     const bIsOriginalOwner = b.id === originalOwnerId
@@ -120,8 +97,7 @@ export function useMembersPanel() {
     showRevokeInviteDialog,
     showChangeMemberRoleDialog,
     showInviteMemberDialog,
-    showInviteMemberUpsellDialog,
-    showMemberLimitDialog
+    showInviteMemberUpsellDialog
   } = useDialogService()
   const workspaceStore = useTeamWorkspaceStore()
   const {
@@ -136,14 +112,11 @@ export function useMembersPanel() {
   const { permissions, uiConfig } = useWorkspaceUI()
   const { isOnTeamPlan, isCancelled, hasLapsedTeamPlan } = useTeamPlan()
   const subscriptionDialog = useSubscriptionDialog()
-  const { fetchBalance } = useBillingContext()
 
   // The team plan caps members at a flat MAX_WORKSPACE_MEMBERS, independent of
   // the subscription tier.
   const maxSeats = computed(() => MAX_WORKSPACE_MEMBERS)
 
-  const memberCount = computed(() => members.value.length)
-
   const hasMultipleMembers = computed(() => members.value.length > 1)
 
   const showSearch = computed(
@@ -165,16 +138,16 @@ export function useMembersPanel() {
     () => isInviteLimitReached.value || totalMemberSlots.value >= maxSeats.value
   )
 
-  // Invite stays enabled at the seat cap so the button can surface the
-  // "at the member limit" dialog; only an inactive/cancelled plan disables it.
+  // Invite is allowed only on an active (non-cancelled) team plan that is under
+  // the member cap.
   const isInviteDisabled = computed(
-    () => !isOnTeamPlan.value || isCancelled.value
+    () => !isOnTeamPlan.value || isCancelled.value || isMemberLimitReached.value
   )
 
   const inviteTooltip = computed(() => {
     if (!isOnTeamPlan.value) return null
     if (!isMemberLimitReached.value) return null
-    return t('workspacePanel.inviteLimitReached')
+    return t('workspacePanel.inviteLimitReached', { count: maxSeats.value })
   })
 
   function handleInviteMember() {
@@ -182,11 +155,7 @@ export function useMembersPanel() {
       void showInviteMemberUpsellDialog()
       return
     }
-    if (isCancelled.value) return
-    if (isMemberLimitReached.value) {
-      void showMemberLimitDialog()
-      return
-    }
+    if (isCancelled.value || isMemberLimitReached.value) return
     void showInviteMemberDialog()
   }
 
@@ -221,7 +190,7 @@ export function useMembersPanel() {
       {
         label: t('workspacePanel.members.actions.changeRole'),
         items: [
-          roleMenuItem(member, 'owner', t('workspaceSwitcher.roleAdmin')),
+          roleMenuItem(member, 'owner', t('workspaceSwitcher.roleOwner')),
           roleMenuItem(member, 'member', t('workspaceSwitcher.roleMember'))
         ]
       },
@@ -246,14 +215,13 @@ export function useMembersPanel() {
       searched,
       userEmail.value ?? null,
       sortDirection.value,
-      originalOwnerId.value,
-      sortField.value
+      originalOwnerId.value
     )
   })
 
   // Built once per member list rather than per row on every render, so an
   // unrelated re-render (e.g. typing in the search box) doesn't rebuild every
-  // row's menu and churn MemberTableRow's props.
+  // row's menu and churn MemberListItem's props.
   const memberMenus = computed(
     () => new Map(filteredMembers.value.map((m) => [m.id, memberMenuItems(m)]))
   )
@@ -318,11 +286,9 @@ export function useMembersPanel() {
     sortField,
     sortDirection,
     maxSeats,
-    memberCount,
     isOnTeamPlan,
     hasLapsedTeamPlan,
     hasMultipleMembers,
-    fetchBalance,
     showSearch,
     showViewTabs,
     showInviteButton,

src/platform/workspace/composables/useWorkspaceMenuItems.ts

@@ -11,7 +11,7 @@ import { useDialogService } from '@/services/dialogService'
  * Builds the Plan & Credits overflow-menu model for the workspace subscription
  * panel. Visibility and the Delete enable/disable policy are derived from the
  * shared useWorkspaceUI state so this menu can't desync with the sibling
- * Plan & Credits panel menu.
+ * WorkspacePanelContent menu.
  */
 export function useWorkspaceMenuItems() {
   const { t } = useI18n()

src/platform/workspace/composables/useWorkspaceRename.ts

@@ -1,17 +0,0 @@
-import { ref } from 'vue'
-
-// Shared inline-rename state so both the header (double-click) and the
-// workspace menu ("Rename") drive the same editing affordance.
-const isRenaming = ref(false)
-
-export function useWorkspaceRename() {
-  function startRenaming() {
-    isRenaming.value = true
-  }
-
-  function stopRenaming() {
-    isRenaming.value = false
-  }
-
-  return { isRenaming, startRenaming, stopRenaming }
-}

src/platform/workspace/composables/useWorkspaceUI.test.ts

@@ -209,7 +209,7 @@ describe('useWorkspaceUI', () => {
       expect(ui.workspaceRole.value).toBe('member')
       expect(ui.permissions.value).toMatchObject({
         canViewOtherMembers: true,
-        canViewPendingInvites: true,
+        canViewPendingInvites: false,
         canInviteMembers: false,
         canManageInvites: false,
         canManageMembers: false,
@@ -220,11 +220,11 @@ describe('useWorkspaceUI', () => {
       })
     })
 
-    it('shows members and pending but hides invite management and uses leave action', async () => {
+    it('shows members but hides invite management and uses leave action', async () => {
       const ui = await loadComposable()
 
       expect(ui.uiConfig.value.showMembersList).toBe(true)
-      expect(ui.uiConfig.value.showPendingTab).toBe(true)
+      expect(ui.uiConfig.value.showPendingTab).toBe(false)
       expect(ui.uiConfig.value.showEditWorkspaceMenuItem).toBe(false)
       expect(ui.uiConfig.value.workspaceMenuAction).toBe('leave')
       expect(ui.uiConfig.value.workspaceMenuDisabledTooltip).toBeNull()

src/platform/workspace/composables/useWorkspaceUI.ts

@@ -78,9 +78,7 @@ function getPermissions(
   // member role
   return {
     canViewOtherMembers: true,
-    // Members can see who's been invited (view-only); they still can't
-    // resend/revoke (canManageInvites) or invite (canInviteMembers).
-    canViewPendingInvites: true,
+    canViewPendingInvites: false,
     canInviteMembers: false,
     canManageInvites: false,
     canManageMembers: false,
@@ -130,7 +128,7 @@ function getUIConfig(
   // member role
   return {
     showMembersList: true,
-    showPendingTab: true,
+    showPendingTab: false,
     showSearch: true,
     showRoleColumn: true,
     membersGridCols: 'grid-cols-[1fr_auto]',

src/platform/workspace/stores/teamWorkspaceStore.test.ts

@@ -1463,8 +1463,8 @@ describe('useTeamWorkspaceStore', () => {
       expect(store.isInviteLimitReached).toBe(false)
     })
 
-    it('isInviteLimitReached enforces the flat 50-member backend cap, independent of plan seats', async () => {
-      const mockMembers = Array.from({ length: 48 }, (_, i) => ({
+    it('isInviteLimitReached enforces the flat 30-member backend cap, independent of plan seats', async () => {
+      const mockMembers = Array.from({ length: 28 }, (_, i) => ({
         id: `user-${i}`,
         name: `User ${i}`,
         email: `user${i}@test.com`,
@@ -1488,7 +1488,7 @@ describe('useTeamWorkspaceStore', () => {
       ]
       mockWorkspaceApi.listMembers.mockResolvedValue({
         members: mockMembers,
-        pagination: { offset: 0, limit: 50, total: 48 }
+        pagination: { offset: 0, limit: 50, total: 28 }
       })
       mockWorkspaceApi.listInvites.mockResolvedValue({ invites: mockInvites })
       mockWorkspaceAuthStore.initializeFromSession.mockReturnValue(true)
@@ -1499,7 +1499,7 @@ describe('useTeamWorkspaceStore', () => {
       await store.fetchMembers()
       await store.fetchPendingInvites()
 
-      expect(store.totalMemberSlots).toBe(50)
+      expect(store.totalMemberSlots).toBe(30)
       expect(store.isInviteLimitReached).toBe(true)
     })
   })

src/platform/workspace/stores/teamWorkspaceStore.ts

@@ -23,8 +23,6 @@ export interface WorkspaceMember {
   joinDate: Date
   role: 'owner' | 'member'
   isOriginalOwner: boolean
-  lastActivity?: Date | null
-  creditsUsedThisMonth?: number
 }
 
 export interface PendingInvite {
@@ -53,11 +51,7 @@ function mapApiMemberToWorkspaceMember(member: Member): WorkspaceMember {
     email: member.email,
     joinDate: new Date(member.joined_at),
     role: member.role,
-    isOriginalOwner: member.is_original_owner ?? false,
-    lastActivity: member.last_active_at
-      ? new Date(member.last_active_at)
-      : null,
-    creditsUsedThisMonth: member.credits_used_this_month ?? 0
+    isOriginalOwner: member.is_original_owner ?? false
   }
 }
 
@@ -118,7 +112,7 @@ function clearLastWorkspaceId(): void {
 }
 
 const MAX_OWNED_WORKSPACES = 10
-export const MAX_WORKSPACE_MEMBERS = 50
+export const MAX_WORKSPACE_MEMBERS = 30
 const MAX_INIT_RETRIES = 3
 const BASE_RETRY_DELAY_MS = 1000
 

src/platform/workspace/utils/badgeColor.ts

@@ -1,21 +0,0 @@
-// Muted, low-saturation badge palette (sampled from the Figma usage palette).
-// Dark tones that read against the dark surface with a white monogram.
-const BADGE_COLORS = [
-  '#956252', // terracotta
-  '#3e465f', // slate indigo
-  '#424f45', // olive green
-  '#90646e', // mauve rose
-  '#6d5a7a', // muted purple
-  '#4f6b6b', // muted teal
-  '#7a6a4a', // khaki
-  '#5a6270' // steel
-]
-
-/** Stable muted badge color for a user, keyed by name/email. */
-export function userBadgeColor(seed: string): string {
-  let hash = 0
-  for (let i = 0; i < seed.length; i++) {
-    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0
-  }
-  return BADGE_COLORS[hash % BADGE_COLORS.length]
-}

src/platform/workspace/utils/relativeTime.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { formatRelativeTime } from './relativeTime'
-
-const labels = {
-  justNow: 'just now',
-  minutesAgo: (n: number) => `${n} min ago`,
-  hoursAgo: (n: number) => `${n} hr ago`,
-  daysAgo: (n: number) => `${n} days ago`
-}
-
-const now = new Date('2026-07-03T12:00:00Z')
-const ago = (ms: number) => new Date(now.getTime() - ms)
-
-describe('formatRelativeTime', () => {
-  it('returns "just now" under a minute', () => {
-    expect(formatRelativeTime(ago(30 * 1000), now, labels)).toBe('just now')
-  })
-
-  it('floors to whole minutes', () => {
-    expect(formatRelativeTime(ago(6.9 * 60 * 1000), now, labels)).toBe(
-      '6 min ago'
-    )
-  })
-
-  it('floors to whole hours', () => {
-    expect(formatRelativeTime(ago(2 * 60 * 60 * 1000), now, labels)).toBe(
-      '2 hr ago'
-    )
-  })
-
-  it('floors to whole days past 24h', () => {
-    expect(formatRelativeTime(ago(3 * 24 * 60 * 60 * 1000), now, labels)).toBe(
-      '3 days ago'
-    )
-  })
-
-  it('clamps future dates to "just now"', () => {
-    expect(formatRelativeTime(ago(-5000), now, labels)).toBe('just now')
-  })
-})

src/platform/workspace/utils/relativeTime.ts

@@ -1,29 +0,0 @@
-const MINUTE_MS = 60 * 1000
-const HOUR_MS = 60 * MINUTE_MS
-const DAY_MS = 24 * HOUR_MS
-
-interface RelativeTimeLabels {
-  justNow: string
-  minutesAgo: (n: number) => string
-  hoursAgo: (n: number) => string
-  daysAgo: (n: number) => string
-}
-
-/**
- * Abbreviated "time ago" label (e.g. "6 min ago", "2 hr ago", "3 days ago"),
- * matching the member-list activity column. Copy is injected so callers can
- * supply localized, pluralized strings.
- */
-export function formatRelativeTime(
-  date: Date,
-  now: Date,
-  labels: RelativeTimeLabels
-): string {
-  const elapsed = Math.max(0, now.getTime() - date.getTime())
-
-  if (elapsed < MINUTE_MS) return labels.justNow
-  if (elapsed < HOUR_MS)
-    return labels.minutesAgo(Math.floor(elapsed / MINUTE_MS))
-  if (elapsed < DAY_MS) return labels.hoursAgo(Math.floor(elapsed / HOUR_MS))
-  return labels.daysAgo(Math.floor(elapsed / DAY_MS))
-}

src/platform/workspace/utils/roleLabels.test.ts

@@ -1,18 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { roleLabelKey } from '@/platform/workspace/utils/roleLabels'
-
-describe('roleLabelKey', () => {
-  it('labels the workspace creator as Owner', () => {
-    expect(roleLabelKey('owner', true)).toBe('workspaceSwitcher.roleOwner')
-  })
-
-  it('labels a non-creator owner-role member as Admin', () => {
-    expect(roleLabelKey('owner', false)).toBe('workspaceSwitcher.roleAdmin')
-  })
-
-  it('labels a member as Member regardless of creator flag', () => {
-    expect(roleLabelKey('member', false)).toBe('workspaceSwitcher.roleMember')
-    expect(roleLabelKey('member', true)).toBe('workspaceSwitcher.roleMember')
-  })
-})

src/platform/workspace/utils/roleLabels.ts

@@ -1,23 +0,0 @@
-import type { WorkspaceRole } from '@/platform/workspace/api/workspaceApi'
-
-export type RoleLabelKey =
-  | 'workspaceSwitcher.roleOwner'
-  | 'workspaceSwitcher.roleAdmin'
-  | 'workspaceSwitcher.roleMember'
-
-/**
- * Resolves the display label for a member's role.
- *
- * The backend role is `'owner' | 'member'`, where `'owner'` covers both the
- * workspace creator and elevated non-creators. V1 splits those visually:
- * the creator keeps "Owner"; every other `'owner'` becomes "Admin".
- */
-export function roleLabelKey(
-  role: WorkspaceRole,
-  isOriginalOwner: boolean
-): RoleLabelKey {
-  if (role === 'member') return 'workspaceSwitcher.roleMember'
-  return isOriginalOwner
-    ? 'workspaceSwitcher.roleOwner'
-    : 'workspaceSwitcher.roleAdmin'
-}

src/platform/workspace/workspaceConstants.ts

@@ -8,6 +8,3 @@ export const WORKSPACE_STORAGE_KEYS = {
 } as const
 
 export const TOKEN_REFRESH_BUFFER_MS = 5 * 60 * 1000
-
-/** Max length for a workspace name (create, rename, edit). */
-export const WORKSPACE_NAME_MAX_LENGTH = 30

src/renderer/extensions/linearMode/PartnerNodeItem.vue

@@ -7,7 +7,7 @@ defineProps<{ title: string; price: string }>()
     <span
       class="mt-2 flex h-5 max-w-max items-center rounded-full bg-component-node-widget-background p-2 py-3"
     >
-      <i class="mr-1 icon-[lucide--coins] h-4 bg-amber-400" />
+      <i class="mr-1 icon-[lucide--component] h-4 bg-amber-400" />
       {{ price }}
     </span>
   </div>

src/schemas/apiSchema.ts

@@ -428,6 +428,7 @@ const zSettings = z.object({
   'Comfy.VueNodes.Enabled': z.boolean(),
   'Comfy.AppBuilder.VueNodeSwitchDismissed': z.boolean(),
   'Comfy.Assets.UseAssetAPI': z.boolean(),
+  'Comfy.ModelLibrary.UseAssetBrowser': z.boolean(),
   'Comfy.Queue.QPOV2': z.boolean(),
   'Comfy.Queue.ShowRunProgressBar': z.boolean(),
   'Comfy-Desktop.AutoUpdate': z.boolean(),

src/services/dialogService.ts

@@ -10,7 +10,6 @@ import { t } from '@/i18n'
 import { useTelemetry } from '@/platform/telemetry'
 import { isCloud } from '@/platform/distribution/types'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useExternalLink } from '@/composables/useExternalLink'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import type {
@@ -583,46 +582,6 @@ export const useDialogService = () => {
     })
   }
 
-  async function showMemberLimitDialog() {
-    const { default: component } =
-      await import('@/platform/workspace/components/dialogs/RequestMoreDialogContent.vue')
-    const { staticUrls } = useExternalLink()
-    return dialogStore.showDialog({
-      key: 'member-limit',
-      component,
-      props: {
-        dialogKey: 'member-limit',
-        title: t('workspacePanel.memberLimitDialog.title'),
-        message: t('workspacePanel.memberLimitDialog.message'),
-        onRequestMore: () =>
-          window.open(
-            staticUrls.teamPlanRequests,
-            '_blank',
-            'noopener,noreferrer'
-          )
-      },
-      dialogComponentProps: workspaceDialogProps
-    })
-  }
-
-  async function showWorkflowQueuedDialog() {
-    const { default: component } =
-      await import('@/platform/workspace/components/dialogs/RequestMoreDialogContent.vue')
-    const { staticUrls } = useExternalLink()
-    return dialogStore.showDialog({
-      key: 'workflow-queued',
-      component,
-      props: {
-        dialogKey: 'workflow-queued',
-        title: t('workspacePanel.workflowQueuedDialog.title'),
-        message: t('workspacePanel.workflowQueuedDialog.message'),
-        onRequestMore: () =>
-          window.open(staticUrls.discord, '_blank', 'noopener,noreferrer')
-      },
-      dialogComponentProps: workspaceDialogProps
-    })
-  }
-
   async function showRevokeInviteDialog(inviteId: string) {
     const { default: component } =
       await import('@/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue')
@@ -773,8 +732,6 @@ export const useDialogService = () => {
     showRevokeInviteDialog,
     showInviteMemberDialog,
     showInviteMemberUpsellDialog,
-    showMemberLimitDialog,
-    showWorkflowQueuedDialog,
     showBillingComingSoonDialog,
     showCancelSubscriptionDialog,
     showDowngradeToPersonalDialog

src/stores/assetsStore.test.ts

@@ -875,6 +875,113 @@ describe('assetsStore - Model Assets Cache (Cloud)', () => {
     })
   })
 
+  describe('pagination safety', () => {
+    it('stops instead of looping when the backend ignores offset', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+
+      // A backend that ignores offset returns the same full page every time.
+      const fullPage = Array.from({ length: 500 }, (_, i) =>
+        createMockAsset(`asset-${i}`)
+      )
+      vi.mocked(assetService.getAssetsForNodeType).mockResolvedValue(fullPage)
+
+      await store.updateModelsForNodeType(nodeType)
+
+      await vi.waitFor(() => {
+        expect(
+          vi.mocked(assetService.getAssetsForNodeType)
+        ).toHaveBeenCalledTimes(2)
+      })
+
+      expect(
+        vi.mocked(assetService.getAssetsForNodeType)
+      ).toHaveBeenCalledTimes(2)
+      expect(store.getAssets(nodeType)).toHaveLength(500)
+    })
+
+    it('continues past an all-duplicate page whose content differs from the previous page', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+
+      // Concurrent writes can shift pagination windows so a page is all
+      // already-seen assets without the backend ignoring offset; later pages
+      // can still hold unseen assets.
+      const fullPage = Array.from({ length: 500 }, (_, i) =>
+        createMockAsset(`asset-${i}`)
+      )
+      const samePageReordered = [...fullPage].reverse()
+      const finalPage = [createMockAsset('late-arrival')]
+
+      let callCount = 0
+      vi.mocked(assetService.getAssetsForNodeType).mockImplementation(
+        async () => {
+          callCount++
+          if (callCount === 1) return fullPage
+          if (callCount === 2) return samePageReordered
+          return finalPage
+        }
+      )
+
+      await store.updateModelsForNodeType(nodeType)
+
+      await vi.waitFor(() => {
+        expect(
+          vi.mocked(assetService.getAssetsForNodeType)
+        ).toHaveBeenCalledTimes(3)
+      })
+      expect(store.getAssets(nodeType).map((a) => a.id)).toContain(
+        'late-arrival'
+      )
+    })
+
+    it('terminates when an offset-ignoring backend alternates page orderings', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+
+      // Same full page served forever with a nondeterministic ordering: no
+      // page ever contributes a new ID, and no two consecutive pages are
+      // identical. The walk must still stop.
+      const fullPage = Array.from({ length: 500 }, (_, i) =>
+        createMockAsset(`asset-${i}`)
+      )
+      const reversed = [...fullPage].reverse()
+      let callCount = 0
+      vi.mocked(assetService.getAssetsForNodeType).mockImplementation(
+        async () => {
+          callCount++
+          return callCount % 2 === 1 ? fullPage : reversed
+        }
+      )
+
+      await store.updateModelsForNodeType(nodeType)
+
+      expect(callCount).toBeLessThanOrEqual(5)
+      expect(store.getAssets(nodeType)).toHaveLength(500)
+    })
+  })
+
+  describe('refresh error surfacing', () => {
+    it('surfaces a failed refresh on the committed state consumers read', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+
+      vi.mocked(assetService.getAssetsForNodeType).mockResolvedValueOnce([
+        createMockAsset('existing')
+      ])
+      await store.updateModelsForNodeType(nodeType)
+      expect(store.getError(nodeType)).toBeUndefined()
+
+      vi.mocked(assetService.getAssetsForNodeType).mockRejectedValueOnce(
+        new Error('backend down')
+      )
+      await store.updateModelsForNodeType(nodeType)
+
+      expect(store.getAssets(nodeType).map((a) => a.id)).toEqual(['existing'])
+      expect(store.getError(nodeType)?.message).toBe('backend down')
+    })
+  })
+
   describe('concurrent request handling', () => {
     it('should short-circuit concurrent calls to prevent duplicate work', async () => {
       const store = useAssetsStore()
@@ -924,6 +1031,34 @@ describe('assetsStore - Model Assets Cache (Cloud)', () => {
         vi.mocked(assetService.getAssetsForNodeType)
       ).toHaveBeenCalledTimes(2)
     })
+
+    it('keeps a newer request single-flighted when a stale request finishes after invalidation', async () => {
+      const store = useAssetsStore()
+      const nodeType = 'CheckpointLoaderSimple'
+
+      let resolveFirst!: (assets: AssetItem[]) => void
+      const firstFetch = new Promise<AssetItem[]>((resolve) => {
+        resolveFirst = resolve
+      })
+      vi.mocked(assetService.getAssetsForNodeType)
+        .mockReturnValueOnce(firstFetch)
+        .mockReturnValue(new Promise<AssetItem[]>(() => {}))
+
+      const staleRequest = store.updateModelsForNodeType(nodeType)
+      store.invalidateCategory('checkpoints')
+      void store.updateModelsForNodeType(nodeType)
+
+      resolveFirst([createMockAsset('stale')])
+      await staleRequest
+
+      // The stale request's teardown must not evict the newer request's
+      // single-flight entry: a third call short-circuits instead of starting
+      // a duplicate walk.
+      void store.updateModelsForNodeType(nodeType)
+      expect(
+        vi.mocked(assetService.getAssetsForNodeType)
+      ).toHaveBeenCalledTimes(2)
+    })
   })
 
   describe('shallowReactive state reactivity', () => {
@@ -1435,6 +1570,35 @@ describe('assetsStore - Model Assets Cache (Cloud)', () => {
   })
 })
 
+describe('assetsStore - Model Assets Cache (non-cloud)', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    mockIsCloud.value = false
+    vi.clearAllMocks()
+  })
+
+  it('caches model assets fetched by tag on non-cloud builds', async () => {
+    const store = useAssetsStore()
+    vi.mocked(assetService.getAssetsByTag).mockResolvedValue([
+      {
+        id: 'm1',
+        name: 'sd_xl_base_1.0.safetensors',
+        tags: ['checkpoints', 'models']
+      },
+      { id: 'm2', name: 'lora.safetensors', tags: ['loras', 'models'] }
+    ])
+
+    await store.updateModelsForTag('models')
+
+    expect(assetService.getAssetsByTag).toHaveBeenCalledWith(
+      'models',
+      true,
+      expect.anything()
+    )
+    expect(store.getAssets('tag:models')).toHaveLength(2)
+  })
+})
+
 describe('assetsStore - Deletion State and Input Mapping', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))

src/stores/assetsStore.ts

@@ -394,421 +394,444 @@ export const useAssetsStore = defineStore('assets', () => {
    * Multiple node types sharing the same category share the same cache entry.
    * Public API accepts nodeType for backwards compatibility but translates
    * to category internally using modelToNodeStore.getCategoryForNodeType().
-   * Cloud-only feature - empty Maps in desktop builds
+   *
+   * Runs on every distribution; whether anything fetches through it is
+   * decided by consumers via `assetService.isAssetAPIEnabled()`, which stays
+   * the authoritative off-cloud gate.
    */
   const getModelState = () => {
-    if (isCloud) {
-      const modelStateByCategory = ref(new Map<string, ModelPaginationState>())
+    const modelStateByCategory = ref(new Map<string, ModelPaginationState>())
 
-      const assetsArrayCache = new Map<
-        string,
-        { source: Map<string, AssetItem>; array: AssetItem[] }
-      >()
+    const assetsArrayCache = new Map<
+      string,
+      { source: Map<string, AssetItem>; array: AssetItem[] }
+    >()
 
-      const pendingRequestByCategory = new Map<string, ModelPaginationState>()
-      const pendingPromiseByCategory = new Map<string, Promise<void>>()
+    const pendingRequestByCategory = new Map<string, ModelPaginationState>()
+    const pendingPromiseByCategory = new Map<string, Promise<void>>()
 
-      function createState(
-        existingAssets?: Map<string, AssetItem>
-      ): ModelPaginationState {
-        const assets = new Map(existingAssets)
-        return reactive({
-          assets,
-          offset: 0,
-          hasMore: true,
-          isLoading: true
-        })
+    function createState(
+      existingAssets?: Map<string, AssetItem>
+    ): ModelPaginationState {
+      const assets = new Map(existingAssets)
+      return reactive({
+        assets,
+        offset: 0,
+        hasMore: true,
+        isLoading: true
+      })
+    }
+
+    function isStale(category: string, state: ModelPaginationState): boolean {
+      const committed = modelStateByCategory.value.get(category)
+      const pending = pendingRequestByCategory.get(category)
+      return committed !== state && pending !== state
+    }
+
+    const EMPTY_ASSETS: AssetItem[] = []
+
+    /**
+     * Resolve a key to a category. Handles both nodeType and tag:xxx formats.
+     * @param key Either a nodeType (e.g., 'CheckpointLoaderSimple') or tag key (e.g., 'tag:models')
+     * @returns The category or undefined if not resolvable
+     */
+    function resolveCategory(key: string): string | undefined {
+      if (key.startsWith('tag:')) {
+        return key
+      }
+      return modelToNodeStore.getCategoryForNodeType(key)
+    }
+
+    /**
+     * Get assets by nodeType or tag key.
+     * Translates nodeType to category internally for cache lookup.
+     * @param key Either a nodeType (e.g., 'CheckpointLoaderSimple') or tag key (e.g., 'tag:models')
+     */
+    function getAssets(key: string): AssetItem[] {
+      const category = resolveCategory(key)
+      if (!category) return EMPTY_ASSETS
+
+      const state = modelStateByCategory.value.get(category)
+      const assetsMap = state?.assets
+      if (!assetsMap) return EMPTY_ASSETS
+
+      const cached = assetsArrayCache.get(category)
+      if (cached && cached.source === assetsMap) {
+        return cached.array
       }
 
-      function isStale(category: string, state: ModelPaginationState): boolean {
-        const committed = modelStateByCategory.value.get(category)
-        const pending = pendingRequestByCategory.get(category)
-        return committed !== state && pending !== state
+      const array = Array.from(assetsMap.values())
+      assetsArrayCache.set(category, { source: assetsMap, array })
+      return array
+    }
+
+    function isLoading(key: string): boolean {
+      const category = resolveCategory(key)
+      if (!category) return false
+      return modelStateByCategory.value.get(category)?.isLoading ?? false
+    }
+
+    function getError(key: string): Error | undefined {
+      const category = resolveCategory(key)
+      if (!category) return undefined
+      return modelStateByCategory.value.get(category)?.error
+    }
+
+    function hasMore(key: string): boolean {
+      const category = resolveCategory(key)
+      if (!category) return false
+      return modelStateByCategory.value.get(category)?.hasMore ?? false
+    }
+
+    function hasAssetKey(key: string): boolean {
+      const category = resolveCategory(key)
+      if (!category) return false
+      return modelStateByCategory.value.has(category)
+    }
+
+    /**
+     * Check if a category exists in the cache.
+     * Checks both direct category keys and tag-prefixed keys.
+     * @param category The category to check (e.g., 'checkpoints', 'loras')
+     */
+    function hasCategory(category: string): boolean {
+      return (
+        modelStateByCategory.value.has(category) ||
+        modelStateByCategory.value.has(`tag:${category}`)
+      )
+    }
+
+    /**
+     * Internal helper to fetch and cache assets for a category.
+     * Loads first batch immediately, then progressively loads remaining batches.
+     * Keeps existing data visible until new data is successfully fetched.
+     *
+     * Concurrent calls for the same category are short-circuited: if a request
+     * is already in progress (tracked via pendingRequestByCategory), subsequent
+     * calls return immediately to avoid redundant work.
+     */
+    async function updateModelsForCategory(
+      category: string,
+      fetcher: (options: PaginationOptions) => Promise<AssetItem[]>
+    ): Promise<void> {
+      if (pendingPromiseByCategory.has(category)) {
+        return pendingPromiseByCategory.get(category)!
       }
 
-      const EMPTY_ASSETS: AssetItem[] = []
+      const existingState = modelStateByCategory.value.get(category)
+      const state = createState(existingState?.assets)
 
-      /**
-       * Resolve a key to a category. Handles both nodeType and tag:xxx formats.
-       * @param key Either a nodeType (e.g., 'CheckpointLoaderSimple') or tag key (e.g., 'tag:models')
-       * @returns The category or undefined if not resolvable
-       */
-      function resolveCategory(key: string): string | undefined {
-        if (key.startsWith('tag:')) {
-          return key
-        }
-        return modelToNodeStore.getCategoryForNodeType(key)
+      const seenIds = new Set<string>()
+      const seenPageSignatures = new Set<string>()
+      let consecutiveNoProgressPages = 0
+
+      const hasExistingData = modelStateByCategory.value.has(category)
+      if (hasExistingData) {
+        pendingRequestByCategory.set(category, state)
+      } else {
+        // Also track in pending map for initial loads to prevent concurrent calls
+        pendingRequestByCategory.set(category, state)
+        modelStateByCategory.value.set(category, state)
       }
 
-      /**
-       * Get assets by nodeType or tag key.
-       * Translates nodeType to category internally for cache lookup.
-       * @param key Either a nodeType (e.g., 'CheckpointLoaderSimple') or tag key (e.g., 'tag:models')
-       */
-      function getAssets(key: string): AssetItem[] {
-        const category = resolveCategory(key)
-        if (!category) return EMPTY_ASSETS
+      async function loadBatches(): Promise<void> {
+        while (state.hasMore) {
+          try {
+            const newAssets = await fetcher({
+              limit: MODEL_BATCH_SIZE,
+              offset: state.offset
+            })
 
-        const state = modelStateByCategory.value.get(category)
-        const assetsMap = state?.assets
-        if (!assetsMap) return EMPTY_ASSETS
+            if (isStale(category, state)) return
 
-        const cached = assetsArrayCache.get(category)
-        if (cached && cached.source === assetsMap) {
-          return cached.array
-        }
-
-        const array = Array.from(assetsMap.values())
-        assetsArrayCache.set(category, { source: assetsMap, array })
-        return array
-      }
-
-      function isLoading(key: string): boolean {
-        const category = resolveCategory(key)
-        if (!category) return false
-        return modelStateByCategory.value.get(category)?.isLoading ?? false
-      }
-
-      function getError(key: string): Error | undefined {
-        const category = resolveCategory(key)
-        if (!category) return undefined
-        return modelStateByCategory.value.get(category)?.error
-      }
-
-      function hasMore(key: string): boolean {
-        const category = resolveCategory(key)
-        if (!category) return false
-        return modelStateByCategory.value.get(category)?.hasMore ?? false
-      }
-
-      function hasAssetKey(key: string): boolean {
-        const category = resolveCategory(key)
-        if (!category) return false
-        return modelStateByCategory.value.has(category)
-      }
-
-      /**
-       * Check if a category exists in the cache.
-       * Checks both direct category keys and tag-prefixed keys.
-       * @param category The category to check (e.g., 'checkpoints', 'loras')
-       */
-      function hasCategory(category: string): boolean {
-        return (
-          modelStateByCategory.value.has(category) ||
-          modelStateByCategory.value.has(`tag:${category}`)
-        )
-      }
-
-      /**
-       * Internal helper to fetch and cache assets for a category.
-       * Loads first batch immediately, then progressively loads remaining batches.
-       * Keeps existing data visible until new data is successfully fetched.
-       *
-       * Concurrent calls for the same category are short-circuited: if a request
-       * is already in progress (tracked via pendingRequestByCategory), subsequent
-       * calls return immediately to avoid redundant work.
-       */
-      async function updateModelsForCategory(
-        category: string,
-        fetcher: (options: PaginationOptions) => Promise<AssetItem[]>
-      ): Promise<void> {
-        if (pendingPromiseByCategory.has(category)) {
-          return pendingPromiseByCategory.get(category)!
-        }
-
-        const existingState = modelStateByCategory.value.get(category)
-        const state = createState(existingState?.assets)
-
-        const seenIds = new Set<string>()
-
-        const hasExistingData = modelStateByCategory.value.has(category)
-        if (hasExistingData) {
-          pendingRequestByCategory.set(category, state)
-        } else {
-          // Also track in pending map for initial loads to prevent concurrent calls
-          pendingRequestByCategory.set(category, state)
-          modelStateByCategory.value.set(category, state)
-        }
-
-        async function loadBatches(): Promise<void> {
-          while (state.hasMore) {
-            try {
-              const newAssets = await fetcher({
-                limit: MODEL_BATCH_SIZE,
-                offset: state.offset
-              })
-
-              if (isStale(category, state)) return
-
-              const isFirstBatch = state.offset === 0
-              if (isFirstBatch) {
-                assetsArrayCache.delete(category)
-                if (hasExistingData) {
-                  pendingRequestByCategory.delete(category)
-                  modelStateByCategory.value.set(category, state)
-                }
+            const isFirstBatch = state.offset === 0
+            if (isFirstBatch) {
+              assetsArrayCache.delete(category)
+              if (hasExistingData) {
+                pendingRequestByCategory.delete(category)
+                modelStateByCategory.value.set(category, state)
               }
-
-              // Merge new assets into existing map and track seen IDs
-              for (const asset of newAssets) {
-                seenIds.add(asset.id)
-                state.assets.set(asset.id, asset)
-              }
-              state.assets = new Map(state.assets)
-
-              state.offset += newAssets.length
-              state.hasMore = newAssets.length === MODEL_BATCH_SIZE
-
-              if (isFirstBatch) {
-                state.isLoading = false
-              }
-
-              if (state.hasMore) {
-                await new Promise((resolve) => setTimeout(resolve, 50))
-              }
-            } catch (err) {
-              if (isStale(category, state)) return
-              console.error(`Error loading batch for ${category}:`, err)
-
-              state.error = err instanceof Error ? err : new Error(String(err))
-              state.hasMore = false
-              state.isLoading = false
-              pendingRequestByCategory.delete(category)
-
-              return
             }
-          }
 
-          const staleIds = [...state.assets.keys()].filter(
-            (id) => !seenIds.has(id)
-          )
-          for (const id of staleIds) {
-            state.assets.delete(id)
+            // Merge new assets into existing map and track seen IDs
+            const uniqueIdsBefore = seenIds.size
+            for (const asset of newAssets) {
+              seenIds.add(asset.id)
+              state.assets.set(asset.id, asset)
+            }
+            state.assets = new Map(state.assets)
+
+            // Termination guards for backends that do not honour `offset`.
+            // A page whose exact ID sequence was already served means the
+            // walk is cycling, however the pages are ordered — stop. A single
+            // all-duplicate page with fresh content (concurrent writes
+            // shifting pagination windows) keeps going, but a run of them
+            // with no new IDs is treated as exhausted so reordered responses
+            // can never loop forever.
+            const batchSignature = newAssets.map((asset) => asset.id).join(',')
+            const isRepeatedPage =
+              newAssets.length > 0 && seenPageSignatures.has(batchSignature)
+            seenPageSignatures.add(batchSignature)
+            const madeProgress = seenIds.size > uniqueIdsBefore
+            consecutiveNoProgressPages = madeProgress
+              ? 0
+              : consecutiveNoProgressPages + 1
+            state.offset += newAssets.length
+            state.hasMore =
+              newAssets.length === MODEL_BATCH_SIZE &&
+              !isRepeatedPage &&
+              consecutiveNoProgressPages < 3
+
+            if (isFirstBatch) {
+              state.isLoading = false
+            }
+
+            if (state.hasMore) {
+              await new Promise((resolve) => setTimeout(resolve, 50))
+            }
+          } catch (err) {
+            if (isStale(category, state)) return
+            console.error(`Error loading batch for ${category}:`, err)
+
+            state.error = err instanceof Error ? err : new Error(String(err))
+            state.hasMore = false
+            state.isLoading = false
+            // A refresh that fails before its first batch never replaces the
+            // committed state, so mirror the error onto the state consumers
+            // actually read (getError) instead of only the discarded one.
+            const committed = modelStateByCategory.value.get(category)
+            if (committed && committed !== state) {
+              committed.error = state.error
+            }
+            if (pendingRequestByCategory.get(category) === state) {
+              pendingRequestByCategory.delete(category)
+            }
+
+            return
           }
-          assetsArrayCache.delete(category)
+        }
+
+        const staleIds = [...state.assets.keys()].filter(
+          (id) => !seenIds.has(id)
+        )
+        for (const id of staleIds) {
+          state.assets.delete(id)
+        }
+        assetsArrayCache.delete(category)
+        if (pendingRequestByCategory.get(category) === state) {
           pendingRequestByCategory.delete(category)
         }
+      }
 
-        const promise = loadBatches().finally(() => {
+      // Guard both cleanups: an invalidateCategory during an awaited fetch
+      // lets a newer request register its own entries before this one's
+      // teardown runs, and an unconditional delete would evict the newer
+      // request's entry and break single-flighting.
+      const promise = loadBatches().finally(() => {
+        if (pendingPromiseByCategory.get(category) === promise) {
           pendingPromiseByCategory.delete(category)
-        })
-        pendingPromiseByCategory.set(category, promise)
-        await promise
-      }
-
-      /**
-       * Fetch and cache model assets for a specific node type.
-       * Translates nodeType to category internally - multiple node types
-       * sharing the same category will share the same cache entry.
-       * @param nodeType The node type to fetch assets for (e.g., 'CheckpointLoaderSimple')
-       */
-      async function updateModelsForNodeType(nodeType: string): Promise<void> {
-        const category = modelToNodeStore.getCategoryForNodeType(nodeType)
-        if (!category) return
-
-        // Use category as cache key but fetch using nodeType for API compatibility
-        await updateModelsForCategory(category, (opts) =>
-          assetService.getAssetsForNodeType(nodeType, opts)
-        )
-      }
-
-      /**
-       * Fetch and cache model assets for a specific tag
-       * @param tag The tag to fetch assets for (e.g., 'models')
-       */
-      async function updateModelsForTag(tag: string): Promise<void> {
-        const category = `tag:${tag}`
-        await updateModelsForCategory(category, (opts) =>
-          assetService.getAssetsByTag(tag, true, opts)
-        )
-      }
-
-      /**
-       * Invalidate the cache for a specific category.
-       * Forces a refetch on next access.
-       * @param category The category to invalidate (e.g., 'checkpoints', 'loras')
-       */
-      function invalidateCategory(category: string): void {
-        modelStateByCategory.value.delete(category)
-        assetsArrayCache.delete(category)
-        pendingRequestByCategory.delete(category)
-        pendingPromiseByCategory.delete(category)
-      }
-
-      /**
-       * Optimistically update an asset in the cache
-       * @param assetId The asset ID to update
-       * @param updates Partial asset data to merge
-       * @param cacheKey Optional cache key to target (nodeType or 'tag:xxx')
-       */
-      function updateAssetInCache(
-        assetId: string,
-        updates: Partial<AssetItem>,
-        cacheKey?: string
-      ) {
-        const category = cacheKey ? resolveCategory(cacheKey) : undefined
-        if (cacheKey && !category) return
-
-        const categoriesToCheck = category
-          ? [category]
-          : Array.from(modelStateByCategory.value.keys())
-
-        for (const cat of categoriesToCheck) {
-          const state = modelStateByCategory.value.get(cat)
-          if (!state?.assets) continue
-
-          const existingAsset = state.assets.get(assetId)
-          if (existingAsset) {
-            const updatedAsset = { ...existingAsset, ...updates }
-            state.assets.set(assetId, updatedAsset)
-            assetsArrayCache.delete(cat)
-            if (cacheKey) return
-          }
         }
-      }
+      })
+      pendingPromiseByCategory.set(category, promise)
+      await promise
+    }
 
-      /**
-       * Update asset metadata with optimistic cache update
-       * @param asset The asset to update
-       * @param userMetadata The user_metadata to save
-       * @param cacheKey Optional cache key to target for optimistic update
-       */
-      async function updateAssetMetadata(
-        asset: AssetItem,
-        userMetadata: Record<string, unknown>,
-        cacheKey?: string
-      ) {
-        const originalMetadata = asset.user_metadata
-        updateAssetInCache(asset.id, { user_metadata: userMetadata }, cacheKey)
+    /**
+     * Fetch and cache model assets for a specific node type.
+     * Translates nodeType to category internally - multiple node types
+     * sharing the same category will share the same cache entry.
+     * @param nodeType The node type to fetch assets for (e.g., 'CheckpointLoaderSimple')
+     */
+    async function updateModelsForNodeType(nodeType: string): Promise<void> {
+      const category = modelToNodeStore.getCategoryForNodeType(nodeType)
+      if (!category) return
 
-        try {
-          const updatedAsset = await assetService.updateAsset(asset.id, {
-            user_metadata: userMetadata
-          })
-          updateAssetInCache(asset.id, updatedAsset, cacheKey)
-        } catch (error) {
-          console.error('Failed to update asset metadata:', error)
-          updateAssetInCache(
-            asset.id,
-            { user_metadata: originalMetadata },
-            cacheKey
-          )
+      // Use category as cache key but fetch using nodeType for API compatibility
+      await updateModelsForCategory(category, (opts) =>
+        assetService.getAssetsForNodeType(nodeType, opts)
+      )
+    }
+
+    /**
+     * Fetch and cache model assets for a specific tag
+     * @param tag The tag to fetch assets for (e.g., 'models')
+     */
+    async function updateModelsForTag(tag: string): Promise<void> {
+      const category = `tag:${tag}`
+      await updateModelsForCategory(category, (opts) =>
+        assetService.getAssetsByTag(tag, true, opts)
+      )
+    }
+
+    /**
+     * Invalidate the cache for a specific category.
+     * Forces a refetch on next access.
+     * @param category The category to invalidate (e.g., 'checkpoints', 'loras')
+     */
+    function invalidateCategory(category: string): void {
+      modelStateByCategory.value.delete(category)
+      assetsArrayCache.delete(category)
+      pendingRequestByCategory.delete(category)
+      pendingPromiseByCategory.delete(category)
+    }
+
+    /**
+     * Optimistically update an asset in the cache
+     * @param assetId The asset ID to update
+     * @param updates Partial asset data to merge
+     * @param cacheKey Optional cache key to target (nodeType or 'tag:xxx')
+     */
+    function updateAssetInCache(
+      assetId: string,
+      updates: Partial<AssetItem>,
+      cacheKey?: string
+    ) {
+      const category = cacheKey ? resolveCategory(cacheKey) : undefined
+      if (cacheKey && !category) return
+
+      const categoriesToCheck = category
+        ? [category]
+        : Array.from(modelStateByCategory.value.keys())
+
+      for (const cat of categoriesToCheck) {
+        const state = modelStateByCategory.value.get(cat)
+        if (!state?.assets) continue
+
+        const existingAsset = state.assets.get(assetId)
+        if (existingAsset) {
+          const updatedAsset = { ...existingAsset, ...updates }
+          state.assets.set(assetId, updatedAsset)
+          assetsArrayCache.delete(cat)
+          if (cacheKey) return
         }
       }
-
-      /**
-       * Update asset tags using add/remove endpoints
-       * @param asset The asset to update (used to read current tags)
-       * @param newTags The desired tags array
-       * @param cacheKey Optional cache key to target for optimistic update
-       */
-      async function updateAssetTags(
-        asset: AssetItem,
-        newTags: string[],
-        cacheKey?: string
-      ) {
-        const originalTags = asset.tags
-        const tagsToAdd = difference(newTags, originalTags)
-        const tagsToRemove = difference(originalTags, newTags)
-
-        if (tagsToAdd.length === 0 && tagsToRemove.length === 0) return
-
-        updateAssetInCache(asset.id, { tags: newTags }, cacheKey)
-
-        let removedTagsOnServer: string[] = []
-        try {
-          let removeResult: TagsOperationResult | undefined
-          if (tagsToRemove.length > 0) {
-            removeResult = await assetService.removeAssetTags(
-              asset.id,
-              tagsToRemove
-            )
-            removedTagsOnServer = removeResult.removed ?? tagsToRemove
-          }
-
-          const addResult =
-            tagsToAdd.length > 0
-              ? await assetService.addAssetTags(asset.id, tagsToAdd)
-              : undefined
-
-          const finalTags = (addResult ?? removeResult)?.total_tags
-          if (finalTags) {
-            updateAssetInCache(asset.id, { tags: finalTags }, cacheKey)
-          }
-        } catch (error) {
-          console.error('Failed to update asset tags:', error)
-          updateAssetInCache(asset.id, { tags: originalTags }, cacheKey)
-
-          if (removedTagsOnServer.length > 0) {
-            try {
-              await assetService.addAssetTags(asset.id, removedTagsOnServer)
-            } catch (compensationError) {
-              console.error(
-                'Failed to restore tags after partial failure; invalidating cache to force refetch:',
-                compensationError
-              )
-              const categoriesToInvalidate = new Set<string>()
-              const resolved = cacheKey ? resolveCategory(cacheKey) : undefined
-              if (resolved) {
-                categoriesToInvalidate.add(resolved)
-              }
-              for (const [
-                category,
-                state
-              ] of modelStateByCategory.value.entries()) {
-                if (state.assets?.has(asset.id)) {
-                  categoriesToInvalidate.add(category)
-                }
-              }
-              for (const category of categoriesToInvalidate) {
-                invalidateCategory(category)
-              }
-            }
-          }
-        }
-      }
-
-      /**
-       * Invalidate model caches for a given category (e.g., 'checkpoints', 'loras')
-       * Clears the category cache and tag-based caches so next access triggers refetch
-       * @param category The model category to invalidate (e.g., 'checkpoints')
-       */
-      function invalidateModelsForCategory(category: string): void {
-        invalidateCategory(category)
-        invalidateCategory(`tag:${category}`)
-        invalidateCategory('tag:models')
-      }
-
-      return {
-        getAssets,
-        isLoading,
-        getError,
-        hasMore,
-        hasAssetKey,
-        hasCategory,
-        updateModelsForNodeType,
-        updateModelsForTag,
-        invalidateCategory,
-        updateAssetMetadata,
-        updateAssetTags,
-        invalidateModelsForCategory
-      }
     }
 
-    const emptyAssets: AssetItem[] = []
+    /**
+     * Update asset metadata with optimistic cache update
+     * @param asset The asset to update
+     * @param userMetadata The user_metadata to save
+     * @param cacheKey Optional cache key to target for optimistic update
+     */
+    async function updateAssetMetadata(
+      asset: AssetItem,
+      userMetadata: Record<string, unknown>,
+      cacheKey?: string
+    ) {
+      const originalMetadata = asset.user_metadata
+      updateAssetInCache(asset.id, { user_metadata: userMetadata }, cacheKey)
+
+      try {
+        const updatedAsset = await assetService.updateAsset(asset.id, {
+          user_metadata: userMetadata
+        })
+        updateAssetInCache(asset.id, updatedAsset, cacheKey)
+      } catch (error) {
+        console.error('Failed to update asset metadata:', error)
+        updateAssetInCache(
+          asset.id,
+          { user_metadata: originalMetadata },
+          cacheKey
+        )
+      }
+    }
+
+    /**
+     * Update asset tags using add/remove endpoints
+     * @param asset The asset to update (used to read current tags)
+     * @param newTags The desired tags array
+     * @param cacheKey Optional cache key to target for optimistic update
+     */
+    async function updateAssetTags(
+      asset: AssetItem,
+      newTags: string[],
+      cacheKey?: string
+    ) {
+      const originalTags = asset.tags
+      const tagsToAdd = difference(newTags, originalTags)
+      const tagsToRemove = difference(originalTags, newTags)
+
+      if (tagsToAdd.length === 0 && tagsToRemove.length === 0) return
+
+      updateAssetInCache(asset.id, { tags: newTags }, cacheKey)
+
+      let removedTagsOnServer: string[] = []
+      try {
+        let removeResult: TagsOperationResult | undefined
+        if (tagsToRemove.length > 0) {
+          removeResult = await assetService.removeAssetTags(
+            asset.id,
+            tagsToRemove
+          )
+          removedTagsOnServer = removeResult.removed ?? tagsToRemove
+        }
+
+        const addResult =
+          tagsToAdd.length > 0
+            ? await assetService.addAssetTags(asset.id, tagsToAdd)
+            : undefined
+
+        const finalTags = (addResult ?? removeResult)?.total_tags
+        if (finalTags) {
+          updateAssetInCache(asset.id, { tags: finalTags }, cacheKey)
+        }
+      } catch (error) {
+        console.error('Failed to update asset tags:', error)
+        updateAssetInCache(asset.id, { tags: originalTags }, cacheKey)
+
+        if (removedTagsOnServer.length > 0) {
+          try {
+            await assetService.addAssetTags(asset.id, removedTagsOnServer)
+          } catch (compensationError) {
+            console.error(
+              'Failed to restore tags after partial failure; invalidating cache to force refetch:',
+              compensationError
+            )
+            const categoriesToInvalidate = new Set<string>()
+            const resolved = cacheKey ? resolveCategory(cacheKey) : undefined
+            if (resolved) {
+              categoriesToInvalidate.add(resolved)
+            }
+            for (const [
+              category,
+              state
+            ] of modelStateByCategory.value.entries()) {
+              if (state.assets?.has(asset.id)) {
+                categoriesToInvalidate.add(category)
+              }
+            }
+            for (const category of categoriesToInvalidate) {
+              invalidateCategory(category)
+            }
+          }
+        }
+      }
+    }
+
+    /**
+     * Invalidate model caches for a given category (e.g., 'checkpoints', 'loras')
+     * Clears the category cache and tag-based caches so next access triggers refetch
+     * @param category The model category to invalidate (e.g., 'checkpoints')
+     */
+    function invalidateModelsForCategory(category: string): void {
+      invalidateCategory(category)
+      invalidateCategory(`tag:${category}`)
+      invalidateCategory('tag:models')
+    }
+
     return {
-      getAssets: () => emptyAssets,
-      isLoading: () => false,
-      getError: () => undefined,
-      hasMore: () => false,
-      hasAssetKey: () => false,
-      hasCategory: () => false,
-      updateModelsForNodeType: async () => {},
-      invalidateCategory: () => {},
-      updateModelsForTag: async () => {},
-      updateAssetMetadata: async () => {},
-      updateAssetTags: async () => {},
-      invalidateModelsForCategory: () => {}
+      getAssets,
+      isLoading,
+      getError,
+      hasMore,
+      hasAssetKey,
+      hasCategory,
+      updateModelsForNodeType,
+      updateModelsForTag,
+      invalidateCategory,
+      updateAssetMetadata,
+      updateAssetTags,
+      invalidateModelsForCategory
     }
   }