From 0dfe36f1f899e06841c6e8dcc1c59931577fb235 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 12:54:35 -0800
Subject: [PATCH 01/23] style: Align card styles with Designs

---
 src/locales/en/main.json                      |  2 +-
 .../assets/components/AssetBadgeGroup.vue     |  2 +-
 .../assets/components/AssetBrowserModal.vue   |  2 +-
 src/platform/assets/components/AssetCard.vue  | 50 +++++++------------
 src/platform/assets/components/AssetGrid.vue  | 11 ++--
 src/utils/gridUtil.ts                         |  2 +
 6 files changed, 27 insertions(+), 42 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 3c27184290..dd58ab27ef 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -125,6 +125,7 @@
     "searchKeybindings": "Search Keybindings",
     "searchExtensions": "Search Extensions",
     "search": "Search",
+    "searchPlaceholder": "Search...",
     "noResultsFound": "No Results Found",
     "searchFailedMessage": "We couldn't find any settings matching your search. Try adjusting your search terms.",
     "noTasksFound": "No Tasks Found",
@@ -2093,7 +2094,6 @@
     "connectionError": "Please check your connection and try again",
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "noModelsInFolder": "No {type} available in this folder",
-    "searchAssetsPlaceholder": "Type to search...",
     "uploadModel": "Import model",
     "uploadModelFromCivitai": "Import a model from Civitai",
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index e94bf092ff..8d5e60e824 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-1">
+  <div class="absolute left-2 bottom-2 flex flex-wrap justify-end gap-1">
     <span
       v-for="badge in badges"
       :key="badge.label"
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 381a20b73f..f36654a11e 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -26,7 +26,7 @@
           v-model="searchQuery"
           :autofocus="true"
           size="lg"
-          :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
+          :placeholder="$t('g.searchPlaceholder')"
           class="max-w-96"
         />
         <IconTextButton
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index f312f85944..e8e455b6d5 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -4,7 +4,13 @@
     data-component-id="AssetCard"
     :data-asset-id="asset.id"
     v-bind="elementProps"
-    :class="cardClasses"
+    :class="
+      cn(
+        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2',
+        interactive &&
+          'group appearance-none bg-transparent m-0 outline-none cursor-pointer text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
+      )
+    "
     @click="interactive && $emit('select', asset)"
     @keydown.enter="interactive && $emit('select', asset)"
   >
@@ -12,11 +18,11 @@
       <img
         v-if="shouldShowImage"
         :src="asset.preview_url"
-        class="h-full w-full object-contain"
+        class="size-full object-contain"
       />
       <div
         v-else
-        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
+        class="flex size-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
       ></div>
       <AssetBadgeGroup :badges="asset.badges" />
     </div>
@@ -74,11 +80,15 @@ import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBro
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
+const { asset, interactive } = defineProps<{
   asset: AssetDisplayItem
   interactive?: boolean
 }>()
 
+defineEmits<{
+  select: [asset: AssetDisplayItem]
+}>()
+
 const settingStore = useSettingStore()
 
 const titleId = useId()
@@ -89,34 +99,14 @@ const tooltipDelay = computed<number>(() =>
 )
 
 const { error } = useImage({
-  src: props.asset.preview_url ?? '',
-  alt: props.asset.name
+  src: asset.preview_url ?? '',
+  alt: asset.name
 })
 
-const shouldShowImage = computed(() => props.asset.preview_url && !error.value)
-
-const cardClasses = computed(() => {
-  const base = cn(
-    'rounded-xl overflow-hidden transition-all duration-200 bg-modal-card-background'
-  )
-
-  if (!props.interactive) {
-    return base
-  }
-
-  return cn(
-    base,
-    'group',
-    'appearance-none bg-transparent p-0 m-0',
-    'font-inherit text-inherit outline-none cursor-pointer text-left',
-    'hover:bg-secondary-background',
-    'border-none',
-    'focus:outline-solid outline-azure-600 outline-4'
-  )
-})
+const shouldShowImage = computed(() => asset.preview_url && !error.value)
 
 const elementProps = computed(() =>
-  props.interactive
+  interactive
     ? {
         type: 'button',
         'aria-labelledby': titleId,
@@ -127,8 +117,4 @@ const elementProps = computed(() =>
         'aria-describedby': descId
       }
 )
-
-defineEmits<{
-  select: [asset: AssetDisplayItem]
-}>()
 </script>
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 58f786c0ba..6520636bf3 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -1,7 +1,9 @@
 <template>
   <div
     data-component-id="AssetGrid"
-    :style="gridStyle"
+    :class="
+      cn('grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-4 p-2')
+    "
     role="grid"
     :aria-label="$t('assetBrowser.assetCollection')"
     :aria-rowcount="-1"
@@ -34,7 +36,6 @@
         :key="asset.id"
         :asset="asset"
         :interactive="true"
-        role="gridcell"
         @select="$emit('assetSelect', $event)"
       />
     </template>
@@ -42,11 +43,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
 
 import AssetCard from '@/platform/assets/components/AssetCard.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { createGridStyle } from '@/utils/gridUtil'
 
 defineProps<{
   assets: AssetDisplayItem[]
@@ -56,7 +56,4 @@ defineProps<{
 defineEmits<{
   assetSelect: [asset: AssetDisplayItem]
 }>()
-
-// Use same grid style as BaseModalLayout
-const gridStyle = computed(() => createGridStyle())
 </script>
diff --git a/src/utils/gridUtil.ts b/src/utils/gridUtil.ts
index 5c13cfc8e1..95009af484 100644
--- a/src/utils/gridUtil.ts
+++ b/src/utils/gridUtil.ts
@@ -14,6 +14,8 @@ interface GridOptions {
 }
 
 /**
+ * @deprecated Just use tailwind utilities directly.
+ * TODO: Create a common grid layout component if needed.
  * Creates CSS grid styles for responsive grid layouts
  * @param options Grid configuration options
  * @returns CSS properties object for grid styling

From 0b7d0f1d35894cfce80fc7472a39992402f5c5a8 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 14:35:44 -0800
Subject: [PATCH 02/23] style: non-functional buttons and menu

---
 src/components/button/IconGroup.vue          | 16 ++--
 src/components/button/MoreButton.vue         | 28 ++++---
 src/platform/assets/components/AssetCard.vue | 83 +++++++++++++-------
 3 files changed, 79 insertions(+), 48 deletions(-)

diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index bec0ac7fb3..2575d37aea 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -1,17 +1,15 @@
 <template>
-  <div :class="iconGroupClasses">
+  <div
+    :class="
+      cn(
+        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg bg-secondary-background shadow-sm transition-all duration-200 cursor-pointer'
+      )
+    "
+  >
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
-
-const iconGroupClasses = cn(
-  'flex justify-center items-center shrink-0',
-  'outline-hidden border-none p-0 rounded-lg',
-  'bg-secondary-background shadow-sm',
-  'transition-all duration-200',
-  'cursor-pointer'
-)
 </script>
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 0b0e6f2094..d19fb474d0 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative inline-flex items-center">
-    <IconButton :size="size" :type="type" @click="toggle">
+    <IconButton :size="size" :type="type" @click="popover?.toggle">
       <i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
       <i v-else class="icon-[lucide--more-vertical] text-sm" />
     </IconButton>
@@ -25,8 +25,18 @@
           )
         }
       }"
-      @show="$emit('menuOpened')"
-      @hide="$emit('menuClosed')"
+      @show="
+        () => {
+          isOpen = true
+          $emit('menuOpened')
+        }
+      "
+      @hide="
+        () => {
+          isOpen = false
+          $emit('menuClosed')
+        }
+      "
     >
       <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
@@ -48,8 +58,6 @@ interface MoreButtonProps extends BaseButtonProps {
   isVertical?: boolean
 }
 
-const popover = ref<InstanceType<typeof Popover>>()
-
 const {
   size = 'md',
   type = 'secondary',
@@ -61,15 +69,15 @@ defineEmits<{
   menuClosed: []
 }>()
 
-const toggle = (event: Event) => {
-  popover.value?.toggle(event)
-}
+const isOpen = ref(false)
+const popover = ref<InstanceType<typeof Popover>>()
 
-const hide = () => {
+function hide() {
   popover.value?.hide()
 }
 
 defineExpose({
-  hide
+  hide,
+  isOpen
 })
 </script>
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index e8e455b6d5..1545d9496c 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -1,30 +1,62 @@
 <template>
-  <component
-    :is="interactive ? 'button' : 'div'"
+  <div
     data-component-id="AssetCard"
     :data-asset-id="asset.id"
-    v-bind="elementProps"
+    :aria-labelledby="titleId"
+    :aria-describedby="descId"
+    tabindex="1"
     :class="
       cn(
         'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2',
         interactive &&
-          'group appearance-none bg-transparent m-0 outline-none cursor-pointer text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
+          'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
       )
     "
-    @click="interactive && $emit('select', asset)"
     @keydown.enter="interactive && $emit('select', asset)"
   >
     <div class="relative aspect-square w-full overflow-hidden rounded-xl">
+      <div
+        v-if="isLoading || error"
+        class="flex size-full cursor-pointer items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
+        role="button"
+        @click="interactive && $emit('select', asset)"
+      />
       <img
-        v-if="shouldShowImage"
+        v-else
         :src="asset.preview_url"
-        class="size-full object-contain"
+        class="size-full object-contain cursor-pointer"
+        role="button"
+        @click="interactive && $emit('select', asset)"
       />
-      <div
-        v-else
-        class="flex size-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
-      ></div>
+
       <AssetBadgeGroup :badges="asset.badges" />
+      <IconGroup
+        ref="card-buttons"
+        :class="
+          cn(
+            'absolute top-2 right-2 invisible group-hover:visible',
+            dropdownMenuButton?.isOpen && 'visible'
+          )
+        "
+      >
+        <IconButton>
+          <i class="icon-[lucide--file-text]" />
+        </IconButton>
+        <MoreButton ref="dropdown-menu-button" size="sm">
+          <template #default="{}">
+            <IconTextButton :label="$t('g.rename')" type="secondary" size="md">
+              <template #icon>
+                <i class="icon-[lucide--pencil]" />
+              </template>
+            </IconTextButton>
+            <IconTextButton :label="$t('g.delete')" type="secondary" size="md">
+              <template #icon>
+                <i class="icon-[lucide--trash-2]" />
+              </template>
+            </IconTextButton>
+          </template>
+        </MoreButton>
+      </IconGroup>
     </div>
     <div :class="cn('p-4 h-32 flex flex-col justify-between')">
       <div>
@@ -68,13 +100,17 @@
         </span>
       </div>
     </div>
-  </component>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useImage } from '@vueuse/core'
-import { computed, useId } from 'vue'
+import { computed, useId, useTemplateRef } from 'vue'
 
+import IconButton from '@/components/button/IconButton.vue'
+import IconGroup from '@/components/button/IconGroup.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import MoreButton from '@/components/button/MoreButton.vue'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -91,6 +127,10 @@ defineEmits<{
 
 const settingStore = useSettingStore()
 
+const dropdownMenuButton = useTemplateRef<typeof MoreButton>(
+  'dropdown-menu-button'
+)
+
 const titleId = useId()
 const descId = useId()
 
@@ -98,23 +138,8 @@ const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')
 )
 
-const { error } = useImage({
+const { isLoading, error } = useImage({
   src: asset.preview_url ?? '',
   alt: asset.name
 })
-
-const shouldShowImage = computed(() => asset.preview_url && !error.value)
-
-const elementProps = computed(() =>
-  interactive
-    ? {
-        type: 'button',
-        'aria-labelledby': titleId,
-        'aria-describedby': descId
-      }
-    : {
-        'aria-labelledby': titleId,
-        'aria-describedby': descId
-      }
-)
 </script>

From 04ab767649ea43744d20770dc5b97f53c3644134 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 15:51:22 -0800
Subject: [PATCH 03/23] WIP: Renaming Assets, UI, not hooked up to backend.

---
 src/components/common/EditableText.vue       |  6 ++--
 src/platform/assets/components/AssetCard.vue | 37 +++++++++++++++++---
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 9ed0a92b44..8fafe55566 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -18,8 +18,8 @@
           ...inputAttrs
         }
       }"
-      @keyup.enter="blurInputElement"
-      @keyup.escape="cancelEditing"
+      @keyup.enter.capture.stop="blurInputElement"
+      @keyup.escape.stop="cancelEditing"
       @click.stop
       @pointerdown.stop.capture
       @pointermove.stop.capture
@@ -38,7 +38,7 @@ const {
 } = defineProps<{
   modelValue: string
   isEditing?: boolean
-  inputAttrs?: Record<string, any>
+  inputAttrs?: Record<string, string>
 }>()
 
 const emit = defineEmits(['update:modelValue', 'edit', 'cancel'])
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 1545d9496c..0ce1d92753 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -12,7 +12,7 @@
           'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
       )
     "
-    @keydown.enter="interactive && $emit('select', asset)"
+    @keydown.enter.self="interactive && $emit('select', asset)"
   >
     <div class="relative aspect-square w-full overflow-hidden rounded-xl">
       <div
@@ -44,7 +44,12 @@
         </IconButton>
         <MoreButton ref="dropdown-menu-button" size="sm">
           <template #default="{}">
-            <IconTextButton :label="$t('g.rename')" type="secondary" size="md">
+            <IconTextButton
+              :label="$t('g.rename')"
+              type="secondary"
+              size="md"
+              @click="startAssetRename"
+            >
               <template #icon>
                 <i class="icon-[lucide--pencil]" />
               </template>
@@ -70,7 +75,13 @@
             )
           "
         >
-          {{ asset.name }}
+          <EditableText
+            :model-value="newNameRef ?? asset.name"
+            :is-editing="isEditing"
+            :input-attrs="{ 'data-testid': 'asset-name-input' }"
+            @edit="assetRename"
+            @cancel="assetRename()"
+          />
         </h3>
         <p
           :id="descId"
@@ -105,12 +116,13 @@
 
 <script setup lang="ts">
 import { useImage } from '@vueuse/core'
-import { computed, useId, useTemplateRef } from 'vue'
+import { computed, ref, useId, useTemplateRef } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconGroup from '@/components/button/IconGroup.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import MoreButton from '@/components/button/MoreButton.vue'
+import EditableText from '@/components/common/EditableText.vue'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -127,13 +139,16 @@ defineEmits<{
 
 const settingStore = useSettingStore()
 
-const dropdownMenuButton = useTemplateRef<typeof MoreButton>(
+const dropdownMenuButton = useTemplateRef<InstanceType<typeof MoreButton>>(
   'dropdown-menu-button'
 )
 
 const titleId = useId()
 const descId = useId()
 
+const isEditing = ref(false)
+const newNameRef = ref<string>() // TEMPORARY: Replace with actual response from API
+
 const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')
 )
@@ -142,4 +157,16 @@ const { isLoading, error } = useImage({
   src: asset.preview_url ?? '',
   alt: asset.name
 })
+
+function startAssetRename() {
+  dropdownMenuButton.value?.hide()
+  isEditing.value = true
+}
+
+function assetRename(newName?: string) {
+  isEditing.value = false
+  if (newName) {
+    newNameRef.value = newName
+  }
+}
 </script>

From d4b993b16d90e4928d5f3774efef35cc124d9b64 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 17:16:56 -0800
Subject: [PATCH 04/23] style: Fix card padding

---
 src/platform/assets/components/AssetCard.vue | 65 ++++++++++----------
 1 file changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 0ce1d92753..c974dd643d 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -7,7 +7,7 @@
     tabindex="1"
     :class="
       cn(
-        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2',
+        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col',
         interactive &&
           'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
       )
@@ -63,39 +63,36 @@
         </MoreButton>
       </IconGroup>
     </div>
-    <div :class="cn('p-4 h-32 flex flex-col justify-between')">
-      <div>
-        <h3
-          :id="titleId"
-          v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
-          :class="
-            cn(
-              'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
-              'text-base-foreground'
-            )
-          "
-        >
-          <EditableText
-            :model-value="newNameRef ?? asset.name"
-            :is-editing="isEditing"
-            :input-attrs="{ 'data-testid': 'asset-name-input' }"
-            @edit="assetRename"
-            @cancel="assetRename()"
-          />
-        </h3>
-        <p
-          :id="descId"
-          v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
-          :class="
-            cn(
-              'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
-              'text-muted-foreground'
-            )
-          "
-        >
-          {{ asset.description }}
-        </p>
-      </div>
+    <div :class="cn('max-h-32 flex flex-col gap-2 justify-between')">
+      <h3
+        :id="titleId"
+        v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
+        :class="
+          cn(
+            'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
+            'text-base-foreground'
+          )
+        "
+      >
+        <EditableText
+          :model-value="newNameRef ?? asset.name"
+          :is-editing="isEditing"
+          :input-attrs="{ 'data-testid': 'asset-name-input' }"
+          @edit="assetRename"
+          @cancel="assetRename()"
+        />
+      </h3>
+      <p
+        :id="descId"
+        v-tooltip.top="{ value: asset.description, showDelay: tooltipDelay }"
+        :class="
+          cn(
+            'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
+          )
+        "
+      >
+        {{ asset.description }}
+      </p>
       <div :class="cn('flex gap-4 text-xs text-muted-foreground')">
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
           <i class="icon-[lucide--star] size-3" />

From df82698f1e32d89598e20d5639da10cd907907fa Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 17:19:03 -0800
Subject: [PATCH 05/23] type: Add component prop typesafety to dialogs

---
 src/services/dialogService.ts | 16 ++++++-------
 src/stores/dialogStore.ts     | 42 +++++++++++++++++++++++------------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index ff08ad1549..13e7eebf63 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -34,7 +34,7 @@ import NodeConflictDialogContent from '@/workbench/extensions/manager/components
 import NodeConflictFooter from '@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'
 import NodeConflictHeader from '@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'
 import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
-import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ComponentAttrs } from 'vue-component-type-helpers'
 
 export type ConfirmationDialogType =
   | 'default'
@@ -48,7 +48,7 @@ export const useDialogService = () => {
   const dialogStore = useDialogStore()
 
   function showLoadWorkflowWarning(
-    props: ComponentProps<typeof MissingNodesContent>
+    props: ComponentAttrs<typeof MissingNodesContent>
   ) {
     dialogStore.showDialog({
       key: 'global-missing-nodes',
@@ -74,7 +74,7 @@ export const useDialogService = () => {
   }
 
   function showMissingModelsWarning(
-    props: InstanceType<typeof MissingModelsWarning>['$props']
+    props: ComponentAttrs<typeof MissingModelsWarning>
   ) {
     dialogStore.showDialog({
       key: 'global-missing-models-warning',
@@ -115,7 +115,7 @@ export const useDialogService = () => {
   }
 
   function showExecutionErrorDialog(executionError: ExecutionErrorWsMessage) {
-    const props: InstanceType<typeof ErrorDialogContent>['$props'] = {
+    const props: ComponentAttrs<typeof ErrorDialogContent> = {
       error: {
         exceptionType: executionError.exception_type,
         exceptionMessage: executionError.exception_message,
@@ -141,7 +141,7 @@ export const useDialogService = () => {
   }
 
   function showManagerDialog(
-    props: InstanceType<typeof ManagerDialogContent>['$props'] = {}
+    props: ComponentAttrs<typeof ManagerDialogContent> = {}
   ) {
     dialogStore.showDialog({
       key: 'global-manager',
@@ -206,7 +206,7 @@ export const useDialogService = () => {
             errorMessage: String(error)
           }
 
-    const props: InstanceType<typeof ErrorDialogContent>['$props'] = {
+    const props: ComponentAttrs<typeof ErrorDialogContent> = {
       error: {
         exceptionType: options.title ?? 'Unknown Error',
         exceptionMessage: errorProps.errorMessage,
@@ -430,7 +430,7 @@ export const useDialogService = () => {
   }
 
   function toggleManagerDialog(
-    props?: InstanceType<typeof ManagerDialogContent>['$props']
+    props?: ComponentAttrs<typeof ManagerDialogContent>
   ) {
     if (dialogStore.isDialogOpen('global-manager')) {
       dialogStore.closeDialog({ key: 'global-manager' })
@@ -440,7 +440,7 @@ export const useDialogService = () => {
   }
 
   function toggleManagerProgressDialog(
-    props?: InstanceType<typeof ManagerProgressDialogContent>['$props']
+    props?: ComponentAttrs<typeof ManagerProgressDialogContent>
   ) {
     if (dialogStore.isDialogOpen('global-manager-progress-dialog')) {
       dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts
index d2bac36758..85fd13dbbc 100644
--- a/src/stores/dialogStore.ts
+++ b/src/stores/dialogStore.ts
@@ -7,6 +7,7 @@ import { markRaw, ref } from 'vue'
 import type { Component } from 'vue'
 
 import type GlobalDialog from '@/components/dialog/GlobalDialog.vue'
+import type { ComponentAttrs } from 'vue-component-type-helpers'
 
 type DialogPosition =
   | 'center'
@@ -33,30 +34,39 @@ interface CustomDialogComponentProps {
   headless?: boolean
 }
 
-export type DialogComponentProps = InstanceType<typeof GlobalDialog>['$props'] &
+export type DialogComponentProps = ComponentAttrs<typeof GlobalDialog> &
   CustomDialogComponentProps
 
-interface DialogInstance {
+interface DialogInstance<
+  H extends Component = Component,
+  B extends Component = Component,
+  F extends Component = Component
+> {
   key: string
   visible: boolean
   title?: string
-  headerComponent?: Component
-  component: Component
-  contentProps: Record<string, any>
-  footerComponent?: Component
-  footerProps?: Record<string, any>
+  headerComponent?: H
+  component: B
+  contentProps: ComponentAttrs<B>
+  footerComponent?: F
+  footerProps?: ComponentAttrs<F>
   dialogComponentProps: DialogComponentProps
   priority: number
 }
 
-export interface ShowDialogOptions {
+export interface ShowDialogOptions<
+  H extends Component = Component,
+  B extends Component = Component,
+  F extends Component = Component
+> {
   key?: string
   title?: string
-  headerComponent?: Component
-  footerComponent?: Component
-  component: Component
-  props?: Record<string, any>
-  footerProps?: Record<string, any>
+  headerComponent?: H
+  footerComponent?: F
+  component: B
+  props?: ComponentAttrs<B>
+  headerProps?: ComponentAttrs<H>
+  footerProps?: ComponentAttrs<F>
   dialogComponentProps?: DialogComponentProps
   /**
    * Optional priority for dialog stacking.
@@ -203,7 +213,11 @@ export const useDialogStore = defineStore('dialog', () => {
     })
   }
 
-  function showDialog(options: ShowDialogOptions) {
+  function showDialog<
+    H extends Component = Component,
+    B extends Component = Component,
+    F extends Component = Component
+  >(options: ShowDialogOptions<H, B, F>) {
     const dialogKey = options.key || genDialogKey()
 
     let dialog = dialogStack.value.find((d) => d.key === dialogKey)

From ba43494d3292cf1d03f012e95b20c7a7bcdee331 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 18:13:55 -0800
Subject: [PATCH 06/23] WIP: Deleting assets, UI only, also not wired up

---
 src/components/dialog/GlobalDialog.vue        |  1 +
 src/components/dialog/confirm/ConfirmBody.vue | 14 +++++++
 .../dialog/confirm/ConfirmFooter.vue          | 38 +++++++++++++++++++
 .../dialog/confirm/ConfirmHeader.vue          | 12 ++++++
 .../dialog/confirm/confirmDialog.ts           | 31 +++++++++++++++
 src/platform/assets/components/AssetCard.vue  | 36 +++++++++++++++++-
 .../assets/components/UploadModelDialog.vue   |  2 +-
 src/stores/dialogStore.ts                     | 18 ++++-----
 8 files changed, 139 insertions(+), 13 deletions(-)
 create mode 100644 src/components/dialog/confirm/ConfirmBody.vue
 create mode 100644 src/components/dialog/confirm/ConfirmFooter.vue
 create mode 100644 src/components/dialog/confirm/ConfirmHeader.vue
 create mode 100644 src/components/dialog/confirm/confirmDialog.ts

diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index 4566b06842..2074132b5b 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -14,6 +14,7 @@
         <component
           :is="item.headerComponent"
           v-if="item.headerComponent"
+          v-bind="item.headerProps"
           :id="item.key"
         />
         <h3 v-else :id="item.key">
diff --git a/src/components/dialog/confirm/ConfirmBody.vue b/src/components/dialog/confirm/ConfirmBody.vue
new file mode 100644
index 0000000000..30fe57c8ec
--- /dev/null
+++ b/src/components/dialog/confirm/ConfirmBody.vue
@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="flex flex-col px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
+  >
+    <p v-if="confirmationText">
+      {{ confirmationText }}
+    </p>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{
+  confirmationText?: string
+}>()
+</script>
diff --git a/src/components/dialog/confirm/ConfirmFooter.vue b/src/components/dialog/confirm/ConfirmFooter.vue
new file mode 100644
index 0000000000..51b275b3d0
--- /dev/null
+++ b/src/components/dialog/confirm/ConfirmFooter.vue
@@ -0,0 +1,38 @@
+<template>
+  <section class="w-full flex gap-2 justify-end px-2 pb-2">
+    <TextButton
+      :label="cancelTextX"
+      type="transparent"
+      autofocus
+      @click="$emit('cancel')"
+    />
+    <TextButton
+      :label="confirmTextX"
+      type="transparent"
+      :class="confirmClass"
+      @click="$emit('confirm')"
+    />
+  </section>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import TextButton from '@/components/button/TextButton.vue'
+
+const { t } = useI18n()
+
+const { cancelText, confirmText, confirmClass } = defineProps<{
+  cancelText?: string
+  confirmText?: string
+  confirmClass?: string
+}>()
+
+defineEmits<{
+  cancel: []
+  confirm: []
+}>()
+
+const confirmTextX = computed(() => confirmText || t('g.confirm'))
+const cancelTextX = computed(() => cancelText || t('g.cancel'))
+</script>
diff --git a/src/components/dialog/confirm/ConfirmHeader.vue b/src/components/dialog/confirm/ConfirmHeader.vue
new file mode 100644
index 0000000000..3c83377331
--- /dev/null
+++ b/src/components/dialog/confirm/ConfirmHeader.vue
@@ -0,0 +1,12 @@
+<template>
+  <div
+    class="flex items-center gap-2 p-4 font-bold text-sm text-base-foreground font-inter"
+  >
+    <span v-if="title" class="flex-auto">{{ title }}</span>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+</script>
diff --git a/src/components/dialog/confirm/confirmDialog.ts b/src/components/dialog/confirm/confirmDialog.ts
new file mode 100644
index 0000000000..c615e6475d
--- /dev/null
+++ b/src/components/dialog/confirm/confirmDialog.ts
@@ -0,0 +1,31 @@
+import ConfirmBody from '@/components/dialog/confirm/ConfirmBody.vue'
+import ConfirmFooter from '@/components/dialog/confirm/ConfirmFooter.vue'
+import ConfirmHeader from '@/components/dialog/confirm/ConfirmHeader.vue'
+import { useDialogStore } from '@/stores/dialogStore'
+import type { ComponentAttrs } from 'vue-component-type-helpers'
+
+interface ConfirmDialogOptions {
+  headerProps?: ComponentAttrs<typeof ConfirmHeader>
+  props?: ComponentAttrs<typeof ConfirmBody>
+  footerProps?: ComponentAttrs<typeof ConfirmFooter>
+}
+
+export function showConfirmDialog(options: ConfirmDialogOptions = {}) {
+  const dialogStore = useDialogStore()
+  const { headerProps, props, footerProps } = options
+  return dialogStore.showDialog({
+    headerComponent: ConfirmHeader,
+    component: ConfirmBody,
+    footerComponent: ConfirmFooter,
+    headerProps,
+    props,
+    footerProps,
+    dialogComponentProps: {
+      pt: {
+        header: 'py-0! px-0!',
+        content: 'p-0!',
+        footer: 'p-0!'
+      }
+    }
+  })
+}
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index c974dd643d..fabc076fc6 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -54,7 +54,12 @@
                 <i class="icon-[lucide--pencil]" />
               </template>
             </IconTextButton>
-            <IconTextButton :label="$t('g.delete')" type="secondary" size="md">
+            <IconTextButton
+              :label="$t('g.delete')"
+              type="secondary"
+              size="md"
+              @click="confirmDeletion"
+            >
               <template #icon>
                 <i class="icon-[lucide--trash-2]" />
               </template>
@@ -120,9 +125,11 @@ import IconGroup from '@/components/button/IconGroup.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import MoreButton from '@/components/button/MoreButton.vue'
 import EditableText from '@/components/common/EditableText.vue'
+import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
 const { asset, interactive } = defineProps<{
@@ -135,6 +142,7 @@ defineEmits<{
 }>()
 
 const settingStore = useSettingStore()
+const { closeDialog } = useDialogStore()
 
 const dropdownMenuButton = useTemplateRef<InstanceType<typeof MoreButton>>(
   'dropdown-menu-button'
@@ -155,6 +163,32 @@ const { isLoading, error } = useImage({
   alt: asset.name
 })
 
+async function confirmDeletion() {
+  dropdownMenuButton.value?.hide()
+  const confirmDialog = showConfirmDialog({
+    headerProps: {
+      title: 'Delete this model?'
+    },
+    props: {
+      confirmationText:
+        'This model will be permanently removed from your library.'
+    },
+    footerProps: {
+      confirmText: 'Delete',
+      // TODO: These need to be put into the new Button Variants once we have them.
+      confirmClass: cn(
+        'bg-danger-200 text-base-foreground hover:bg-danger-200/80 focus:bg-danger-200/80 focus:ring ring-base-foreground'
+      ),
+      onCancel: () => {
+        closeDialog(confirmDialog)
+      },
+      onConfirm: () => {
+        closeDialog(confirmDialog)
+      }
+    }
+  })
+}
+
 function startAssetRename() {
   dropdownMenuButton.value?.hide()
   isEditing.value = true
diff --git a/src/platform/assets/components/UploadModelDialog.vue b/src/platform/assets/components/UploadModelDialog.vue
index 159f852a23..e6c19e25e7 100644
--- a/src/platform/assets/components/UploadModelDialog.vue
+++ b/src/platform/assets/components/UploadModelDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6 border-t-[1px] border-border-default"
+    class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6 border-t border-border-default"
   >
     <!-- Step 1: Enter URL -->
     <UploadModelUrlInput
diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts
index 85fd13dbbc..333af1a0b7 100644
--- a/src/stores/dialogStore.ts
+++ b/src/stores/dialogStore.ts
@@ -46,6 +46,7 @@ interface DialogInstance<
   visible: boolean
   title?: string
   headerComponent?: H
+  headerProps?: ComponentAttrs<H>
   component: B
   contentProps: ComponentAttrs<B>
   footerComponent?: F
@@ -133,17 +134,11 @@ export const useDialogStore = defineStore('dialog', () => {
     updateCloseOnEscapeStates()
   }
 
-  function createDialog(options: {
-    key: string
-    title?: string
-    headerComponent?: Component
-    footerComponent?: Component
-    component: Component
-    props?: Record<string, any>
-    footerProps?: Record<string, any>
-    dialogComponentProps?: DialogComponentProps
-    priority?: number
-  }) {
+  function createDialog<
+    H extends Component = Component,
+    B extends Component = Component,
+    F extends Component = Component
+  >(options: ShowDialogOptions<H, B, F> & { key: string }) {
     if (dialogStack.value.length >= 10) {
       dialogStack.value.shift()
     }
@@ -159,6 +154,7 @@ export const useDialogStore = defineStore('dialog', () => {
         ? markRaw(options.footerComponent)
         : undefined,
       component: markRaw(options.component),
+      headerProps: { ...options.headerProps },
       contentProps: { ...options.props },
       footerProps: { ...options.footerProps },
       priority: options.priority ?? 1,

From bb9475fed65df9988ceceec7c1f7b719a7f3f980 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 18:21:19 -0800
Subject: [PATCH 07/23] Cleanup: Remove dark-theme variants in buttonTypes.
 Really need to migrate this to CVA and setup the right types.

---
 src/types/buttonTypes.ts | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/types/buttonTypes.ts b/src/types/buttonTypes.ts
index bfa0f50310..38d09b1f55 100644
--- a/src/types/buttonTypes.ts
+++ b/src/types/buttonTypes.ts
@@ -25,8 +25,7 @@ export const getButtonSizeClasses = (size: ButtonSize = 'md') => {
 
 export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
   const baseByType = {
-    primary:
-      'bg-neutral-900 border-none text-white dark-theme:bg-white dark-theme:text-neutral-900',
+    primary: 'bg-base-foreground border-none text-base-background',
     secondary: cn(
       'bg-secondary-background border-none text-base-foreground hover:bg-secondary-background-hover'
     ),
@@ -42,10 +41,8 @@ export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
 
 export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
   const baseByType = {
-    primary:
-      'bg-neutral-900 text-white dark-theme:bg-white dark-theme:text-neutral-900',
-    secondary:
-      'bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
+    primary: 'bg-base-background text-base-foreground',
+    secondary: 'bg-secondary-background text-base-foreground',
     transparent: cn(
       'bg-transparent text-base-foreground hover:bg-secondary-background-hover'
     ),
@@ -54,10 +51,9 @@ export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
   } as const
 
   const borderByType = {
-    primary: 'border border-solid border-white dark-theme:border-neutral-900',
-    secondary: 'border border-solid border-neutral-950 dark-theme:border-white',
-    transparent:
-      'border border-solid border-neutral-950 dark-theme:border-white',
+    primary: 'border border-solid border-base-background',
+    secondary: 'border border-solid border-base-foreground',
+    transparent: 'border border-solid border-base-foreground',
     accent: 'border border-solid border-primary-background'
   } as const
 

From ed68b085cce0e0aae105afe0e1b18545de5474df Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 18:39:51 -0800
Subject: [PATCH 08/23] style: Make sure extra properties hug the bottom of the
 card.

---
 src/platform/assets/components/AssetCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index fabc076fc6..ecd5bfe91c 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -7,7 +7,7 @@
     tabindex="1"
     :class="
       cn(
-        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col',
+        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
         interactive &&
           'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4'
       )
@@ -68,7 +68,7 @@
         </MoreButton>
       </IconGroup>
     </div>
-    <div :class="cn('max-h-32 flex flex-col gap-2 justify-between')">
+    <div class="max-h-32 flex flex-col gap-2 justify-between flex-auto">
       <h3
         :id="titleId"
         v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
@@ -98,7 +98,7 @@
       >
         {{ asset.description }}
       </p>
-      <div :class="cn('flex gap-4 text-xs text-muted-foreground')">
+      <div class="flex gap-4 text-xs text-muted-foreground mt-auto">
         <span v-if="asset.stats.stars" class="flex items-center gap-1">
           <i class="icon-[lucide--star] size-3" />
           {{ asset.stats.stars }}

From f9e8dfdbe767119e54f80472b98d3e0044e82cf5 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Wed, 26 Nov 2025 18:43:08 -0800
Subject: [PATCH 09/23] style: Hide details button for now

---
 src/platform/assets/components/AssetCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index ecd5bfe91c..70d54770e5 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -39,11 +39,11 @@
           )
         "
       >
-        <IconButton>
+        <IconButton v-if="false" size="sm">
           <i class="icon-[lucide--file-text]" />
         </IconButton>
         <MoreButton ref="dropdown-menu-button" size="sm">
-          <template #default="{}">
+          <template #default>
             <IconTextButton
               :label="$t('g.rename')"
               type="secondary"

From 3a18d27b9d7e02b69b3f1a94568ccbd0dcbec9fc Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Thu, 27 Nov 2025 02:52:08 -0800
Subject: [PATCH 10/23] WIP: Real API calls

---
 src/components/dialog/confirm/ConfirmBody.vue |  8 +++---
 src/platform/assets/components/AssetCard.vue  | 19 +++++++++----
 src/platform/assets/services/assetService.ts  | 27 +++++++++++++++++++
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/components/dialog/confirm/ConfirmBody.vue b/src/components/dialog/confirm/ConfirmBody.vue
index 30fe57c8ec..a0aaf1f139 100644
--- a/src/components/dialog/confirm/ConfirmBody.vue
+++ b/src/components/dialog/confirm/ConfirmBody.vue
@@ -2,13 +2,15 @@
   <div
     class="flex flex-col px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
   >
-    <p v-if="confirmationText">
-      {{ confirmationText }}
+    <p v-if="promptText">
+      {{ promptText }}
     </p>
   </div>
 </template>
 <script setup lang="ts">
+import type { MaybeRefOrGetter } from 'vue'
+
 defineProps<{
-  confirmationText?: string
+  promptText?: MaybeRefOrGetter<string>
 }>()
 </script>
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 70d54770e5..0d7d29934f 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -128,6 +128,7 @@ import EditableText from '@/components/common/EditableText.vue'
 import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { assetService } from '@/platform/assets/services/assetService'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
@@ -163,15 +164,14 @@ const { isLoading, error } = useImage({
   alt: asset.name
 })
 
-async function confirmDeletion() {
+function confirmDeletion() {
   dropdownMenuButton.value?.hide()
   const confirmDialog = showConfirmDialog({
     headerProps: {
       title: 'Delete this model?'
     },
     props: {
-      confirmationText:
-        'This model will be permanently removed from your library.'
+      promptText: 'This model will be permanently removed from your library.'
     },
     footerProps: {
       confirmText: 'Delete',
@@ -182,7 +182,13 @@ async function confirmDeletion() {
       onCancel: () => {
         closeDialog(confirmDialog)
       },
-      onConfirm: () => {
+      onConfirm: async () => {
+        try {
+          await assetService.deleteAsset(asset.id)
+          // TODO: Remove this from the list on success.
+        } catch (err: unknown) {
+          console.error(err)
+        }
         closeDialog(confirmDialog)
       }
     }
@@ -194,9 +200,12 @@ function startAssetRename() {
   isEditing.value = true
 }
 
-function assetRename(newName?: string) {
+async function assetRename(newName?: string) {
   isEditing.value = false
   if (newName) {
+    await assetService.updateAsset(asset.id, {
+      name: newName
+    })
     newNameRef.value = newName
   }
 }
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index 379b193dfb..e8ebe2a19f 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -281,6 +281,32 @@ function createAssetService() {
     }
   }
 
+  /**
+   * Updae metadata of an asset by ID
+   * Only available in cloud environment
+   *
+   * @param id - The asset ID (UUID)
+   * @param newData - The data to update
+   * @returns Promise<void>
+   * @throws Error if update fails
+   */
+  async function updateAsset(
+    id: string,
+    newData: Partial<AssetMetadata>
+  ): Promise<string> {
+    const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(newData)
+    })
+
+    if (!res.ok) {
+      throw new Error(
+        `Unable to update asset ${id}: Server returned ${res.status}`
+      )
+    }
+    return res.json()
+  }
+
   /**
    * Retrieves metadata from a download URL without downloading the file
    *
@@ -360,6 +386,7 @@ function createAssetService() {
     getAssetDetails,
     getAssetsByTag,
     deleteAsset,
+    updateAsset,
     getAssetMetadata,
     uploadAssetFromUrl
   }

From 57ed0afde6d75d040c6f0d8bf96e783e9a7b5819 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Sat, 29 Nov 2025 21:28:37 -0800
Subject: [PATCH 11/23] nits: Typo and unused ref

---
 src/platform/assets/components/AssetCard.vue | 1 -
 src/platform/assets/services/assetService.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 0d7d29934f..e0fc4b99b7 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -31,7 +31,6 @@
 
       <AssetBadgeGroup :badges="asset.badges" />
       <IconGroup
-        ref="card-buttons"
         :class="
           cn(
             'absolute top-2 right-2 invisible group-hover:visible',
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index e8ebe2a19f..1bf04400fd 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -282,7 +282,7 @@ function createAssetService() {
   }
 
   /**
-   * Updae metadata of an asset by ID
+   * Update metadata of an asset by ID
    * Only available in cloud environment
    *
    * @param id - The asset ID (UUID)

From aa13e4c385b9b8f698527c91b3b3393f675698dd Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 11:37:20 -0800
Subject: [PATCH 12/23] i18n: internationalize deletion confirmation

---
 src/locales/en/main.json                     |  4 ++++
 src/platform/assets/components/AssetCard.vue | 14 ++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index dd58ab27ef..f0beaf4485 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2152,6 +2152,10 @@
     "media": {
       "threeDModelPlaceholder": "3D Model",
       "audioPlaceholder": "Audio"
+    },
+    "deletion": {
+      "header": "Delete this model?",
+      "body": "This model will be permanently removed from your library."
     }
   },
   "mediaAsset": {
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index e0fc4b99b7..64ab6d5cd3 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -4,7 +4,7 @@
     :data-asset-id="asset.id"
     :aria-labelledby="titleId"
     :aria-describedby="descId"
-    tabindex="1"
+    tabindex="0"
     :class="
       cn(
         'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
@@ -19,14 +19,14 @@
         v-if="isLoading || error"
         class="flex size-full cursor-pointer items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
         role="button"
-        @click="interactive && $emit('select', asset)"
+        @click.self="interactive && $emit('select', asset)"
       />
       <img
         v-else
         :src="asset.preview_url"
         class="size-full object-contain cursor-pointer"
         role="button"
-        @click="interactive && $emit('select', asset)"
+        @click.self="interactive && $emit('select', asset)"
       />
 
       <AssetBadgeGroup :badges="asset.badges" />
@@ -118,6 +118,7 @@
 <script setup lang="ts">
 import { useImage } from '@vueuse/core'
 import { computed, ref, useId, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconGroup from '@/components/button/IconGroup.vue'
@@ -141,6 +142,7 @@ defineEmits<{
   select: [asset: AssetDisplayItem]
 }>()
 
+const { t } = useI18n()
 const settingStore = useSettingStore()
 const { closeDialog } = useDialogStore()
 
@@ -167,13 +169,13 @@ function confirmDeletion() {
   dropdownMenuButton.value?.hide()
   const confirmDialog = showConfirmDialog({
     headerProps: {
-      title: 'Delete this model?'
+      title: t('assetBrowser.deletion.header')
     },
     props: {
-      promptText: 'This model will be permanently removed from your library.'
+      promptText: t('assetBrowser.deletion.body')
     },
     footerProps: {
-      confirmText: 'Delete',
+      confirmText: t('g.delete'),
       // TODO: These need to be put into the new Button Variants once we have them.
       confirmClass: cn(
         'bg-danger-200 text-base-foreground hover:bg-danger-200/80 focus:bg-danger-200/80 focus:ring ring-base-foreground'

From 585e47f2df2817320f2a6a69d1e8f5225b50d101 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 11:45:12 -0800
Subject: [PATCH 13/23] We should remove that reexport and standardize the
 import

---
 src/locales/en/main.json                     | 1 -
 src/platform/assets/components/AssetGrid.vue | 3 +--
 src/platform/assets/services/assetService.ts | 5 ++++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index f0beaf4485..d8637a950d 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1,6 +1,5 @@
 {
   "g": {
-    "beta": "Beta",
     "user": "User",
     "currentUser": "Current user",
     "empty": "Empty",
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 6520636bf3..47fcc1fcdc 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -43,10 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
 import AssetCard from '@/platform/assets/components/AssetCard.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { cn } from '@/utils/tailwindUtil'
 
 defineProps<{
   assets: AssetDisplayItem[]
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index 1bf04400fd..42653b9a92 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -296,6 +296,9 @@ function createAssetService() {
   ): Promise<string> {
     const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}`, {
       method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json'
+      },
       body: JSON.stringify(newData)
     })
 
@@ -304,7 +307,7 @@ function createAssetService() {
         `Unable to update asset ${id}: Server returned ${res.status}`
       )
     }
-    return res.json()
+    return await res.json()
   }
 
   /**

From ca539a6fd0e94bc0494f0e5c434c224341b81596 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Mon, 1 Dec 2025 11:50:44 -0800
Subject: [PATCH 14/23] Update
 src/platform/assets/components/AssetBadgeGroup.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/platform/assets/components/AssetBadgeGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 8d5e60e824..e78fe3a605 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute left-2 bottom-2 flex flex-wrap justify-end gap-1">
+  <div class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1">
     <span
       v-for="badge in badges"
       :key="badge.label"

From a5bd37ef56044c9e8b610970af8ba85686350606 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 12:00:00 -0800
Subject: [PATCH 15/23] Properly resolve MaybeRef

---
 src/components/dialog/confirm/ConfirmBody.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog/confirm/ConfirmBody.vue b/src/components/dialog/confirm/ConfirmBody.vue
index a0aaf1f139..9a1cd5980d 100644
--- a/src/components/dialog/confirm/ConfirmBody.vue
+++ b/src/components/dialog/confirm/ConfirmBody.vue
@@ -2,15 +2,18 @@
   <div
     class="flex flex-col px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
   >
-    <p v-if="promptText">
-      {{ promptText }}
+    <p v-if="promptTextReal">
+      {{ promptTextReal }}
     </p>
   </div>
 </template>
 <script setup lang="ts">
+import { computed, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 
-defineProps<{
+const { promptText } = defineProps<{
   promptText?: MaybeRefOrGetter<string>
 }>()
+
+const promptTextReal = computed(() => toValue(promptText))
 </script>

From 64a7955ecac2608366d89ce5d5730daa8b1c6d15 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 13:09:08 -0800
Subject: [PATCH 16/23] UX: Add progress and confirmation to deletion

---
 .../dialog/confirm/ConfirmFooter.vue          |  9 ++++-
 src/i18n.ts                                   |  1 +
 src/locales/en/main.json                      |  5 ++-
 src/platform/assets/components/AssetCard.vue  | 37 +++++++++++++++----
 src/platform/assets/services/assetService.ts  | 19 ++++++++--
 5 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/src/components/dialog/confirm/ConfirmFooter.vue b/src/components/dialog/confirm/ConfirmFooter.vue
index 51b275b3d0..f7d68b6743 100644
--- a/src/components/dialog/confirm/ConfirmFooter.vue
+++ b/src/components/dialog/confirm/ConfirmFooter.vue
@@ -2,12 +2,14 @@
   <section class="w-full flex gap-2 justify-end px-2 pb-2">
     <TextButton
       :label="cancelTextX"
+      :disabled
       type="transparent"
       autofocus
       @click="$emit('cancel')"
     />
     <TextButton
       :label="confirmTextX"
+      :disabled
       type="transparent"
       :class="confirmClass"
       @click="$emit('confirm')"
@@ -15,17 +17,19 @@
   </section>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TextButton from '@/components/button/TextButton.vue'
 
 const { t } = useI18n()
 
-const { cancelText, confirmText, confirmClass } = defineProps<{
+const { cancelText, confirmText, confirmClass, optionsDisabled } = defineProps<{
   cancelText?: string
   confirmText?: string
   confirmClass?: string
+  optionsDisabled?: MaybeRefOrGetter<boolean>
 }>()
 
 defineEmits<{
@@ -35,4 +39,5 @@ defineEmits<{
 
 const confirmTextX = computed(() => confirmText || t('g.confirm'))
 const cancelTextX = computed(() => cancelText || t('g.cancel'))
+const disabled = computed(() => toValue(optionsDisabled))
 </script>
diff --git a/src/i18n.ts b/src/i18n.ts
index c0ffd1094e..0e26c655c7 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -163,6 +163,7 @@ export const i18n = createI18n({
   legacy: false,
   locale: navigator.language.split('-')[0] || 'en',
   fallbackLocale: 'en',
+  escapeParameter: true,
   messages,
   // Ignore warnings for locale options as each option is in its own language.
   // e.g. "English", "中文", "Русский", "日本語", "한국어", "Français", "Español"
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index d8637a950d..49039e748c 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2154,7 +2154,10 @@
     },
     "deletion": {
       "header": "Delete this model?",
-      "body": "This model will be permanently removed from your library."
+      "body": "This model will be permanently removed from your library.",
+      "inProgress": "Deleting {asset}...",
+      "complete": "{asset} has been deleted.",
+      "failed": "{asset} could not deleted."
     }
   },
   "mediaAsset": {
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 64ab6d5cd3..222a186f39 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -1,10 +1,11 @@
 <template>
   <div
+    v-if="!deletedLocal"
     data-component-id="AssetCard"
     :data-asset-id="asset.id"
     :aria-labelledby="titleId"
     :aria-describedby="descId"
-    tabindex="0"
+    :tabindex="interactive ? 0 : -1"
     :class="
       cn(
         'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
@@ -24,6 +25,7 @@
       <img
         v-else
         :src="asset.preview_url"
+        :alt="asset.name"
         class="size-full object-contain cursor-pointer"
         role="button"
         @click.self="interactive && $emit('select', asset)"
@@ -154,7 +156,8 @@ const titleId = useId()
 const descId = useId()
 
 const isEditing = ref(false)
-const newNameRef = ref<string>() // TEMPORARY: Replace with actual response from API
+const newNameRef = ref<string>()
+const deletedLocal = ref(false)
 
 const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')
@@ -167,12 +170,14 @@ const { isLoading, error } = useImage({
 
 function confirmDeletion() {
   dropdownMenuButton.value?.hide()
+  const promptText = ref<string>(t('assetBrowser.deletion.body'))
+  const optionsDisabled = ref(false)
   const confirmDialog = showConfirmDialog({
     headerProps: {
       title: t('assetBrowser.deletion.header')
     },
     props: {
-      promptText: t('assetBrowser.deletion.body')
+      promptText
     },
     footerProps: {
       confirmText: t('g.delete'),
@@ -180,17 +185,32 @@ function confirmDeletion() {
       confirmClass: cn(
         'bg-danger-200 text-base-foreground hover:bg-danger-200/80 focus:bg-danger-200/80 focus:ring ring-base-foreground'
       ),
+      optionsDisabled,
       onCancel: () => {
         closeDialog(confirmDialog)
       },
       onConfirm: async () => {
         try {
+          promptText.value = t('assetBrowser.deletion.inProgress', {
+            asset: asset.name
+          })
           await assetService.deleteAsset(asset.id)
-          // TODO: Remove this from the list on success.
+          promptText.value = t('assetBrowser.deletion.complete', {
+            asset: asset.name
+          })
+          // Give a second for the completion message
+          await new Promise((resolve) => setTimeout(resolve, 1_000))
+          deletedLocal.value = true
         } catch (err: unknown) {
           console.error(err)
+          promptText.value = t('assetBrowser.deletion.failed', {
+            asset: asset.name
+          })
+          // Give a second for the completion message
+          await new Promise((resolve) => setTimeout(resolve, 3_000))
+        } finally {
+          closeDialog(confirmDialog)
         }
-        closeDialog(confirmDialog)
       }
     }
   })
@@ -204,10 +224,13 @@ function startAssetRename() {
 async function assetRename(newName?: string) {
   isEditing.value = false
   if (newName) {
-    await assetService.updateAsset(asset.id, {
+    // Optimistic update
+    newNameRef.value = newName
+    const result = await assetService.updateAsset(asset.id, {
       name: newName
     })
-    newNameRef.value = newName
+    // Update with the actual name once the server responds
+    newNameRef.value = result.name
   }
 }
 </script>
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index 42653b9a92..cc8219a4a3 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -1,7 +1,10 @@
 import { fromZodError } from 'zod-validation-error'
 
 import { st } from '@/i18n'
-import { assetResponseSchema } from '@/platform/assets/schemas/assetSchema'
+import {
+  assetItemSchema,
+  assetResponseSchema
+} from '@/platform/assets/schemas/assetSchema'
 import type {
   AssetItem,
   AssetMetadata,
@@ -287,13 +290,13 @@ function createAssetService() {
    *
    * @param id - The asset ID (UUID)
    * @param newData - The data to update
-   * @returns Promise<void>
+   * @returns Promise<AssetItem>
    * @throws Error if update fails
    */
   async function updateAsset(
     id: string,
     newData: Partial<AssetMetadata>
-  ): Promise<string> {
+  ): Promise<AssetItem> {
     const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}`, {
       method: 'PUT',
       headers: {
@@ -307,7 +310,15 @@ function createAssetService() {
         `Unable to update asset ${id}: Server returned ${res.status}`
       )
     }
-    return await res.json()
+
+    const newAsset = assetItemSchema.safeParse(await res.json())
+    if (newAsset.success) {
+      return newAsset.data
+    }
+
+    throw new Error(
+      `Unable to update asset ${id}: Invalid response - ${newAsset.error}`
+    )
   }
 
   /**

From 23d01f0b3496f3b28741b6993e892e76aa73302d Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 13:24:24 -0800
Subject: [PATCH 17/23] UX: Handle failed update

---
 src/platform/assets/components/AssetCard.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 222a186f39..f12ed54909 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -226,11 +226,16 @@ async function assetRename(newName?: string) {
   if (newName) {
     // Optimistic update
     newNameRef.value = newName
-    const result = await assetService.updateAsset(asset.id, {
-      name: newName
-    })
-    // Update with the actual name once the server responds
-    newNameRef.value = result.name
+    try {
+      const result = await assetService.updateAsset(asset.id, {
+        name: newName
+      })
+      // Update with the actual name once the server responds
+      newNameRef.value = result.name
+    } catch (err: unknown) {
+      console.error(err)
+      newNameRef.value = undefined
+    }
   }
 }
 </script>

From 23d8ccd3948c2f6138bf96d41354ecfbdd24b12f Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 13:31:42 -0800
Subject: [PATCH 18/23] UX: Gate the buttons behind a feature flag

---
 src/composables/useFeatureFlags.ts           | 6 +++++-
 src/platform/assets/components/AssetCard.vue | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index 643bb103ff..a757e3ed88 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -9,7 +9,8 @@ export enum ServerFeatureFlag {
   SUPPORTS_PREVIEW_METADATA = 'supports_preview_metadata',
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
-  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled'
+  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
+  MODEL_EDIT_ENABLED = 'model_edit_enabled'
 }
 
 /**
@@ -31,6 +32,9 @@ export function useFeatureFlags() {
         ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
         false
       )
+    },
+    get modelEditEnabled() {
+      return api.getServerFeature(ServerFeatureFlag.MODEL_EDIT_ENABLED, false)
     }
   })
 
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index f12ed54909..3a14c7019c 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -33,6 +33,7 @@
 
       <AssetBadgeGroup :badges="asset.badges" />
       <IconGroup
+        v-if="flags.modelEditEnabled"
         :class="
           cn(
             'absolute top-2 right-2 invisible group-hover:visible',
@@ -128,6 +129,7 @@ import IconTextButton from '@/components/button/IconTextButton.vue'
 import MoreButton from '@/components/button/MoreButton.vue'
 import EditableText from '@/components/common/EditableText.vue'
 import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { assetService } from '@/platform/assets/services/assetService'
@@ -147,6 +149,7 @@ defineEmits<{
 const { t } = useI18n()
 const settingStore = useSettingStore()
 const { closeDialog } = useDialogStore()
+const { flags } = useFeatureFlags()
 
 const dropdownMenuButton = useTemplateRef<InstanceType<typeof MoreButton>>(
   'dropdown-menu-button'

From 38cc93b8f6d9c5fd49fff8d7bccceed6dcabe53c Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 13:35:24 -0800
Subject: [PATCH 19/23] Grammar is hard

---
 src/locales/en/main.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 49039e748c..f42cf503ae 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2157,7 +2157,7 @@
       "body": "This model will be permanently removed from your library.",
       "inProgress": "Deleting {asset}...",
       "complete": "{asset} has been deleted.",
-      "failed": "{asset} could not deleted."
+      "failed": "{asset} could not be deleted."
     }
   },
   "mediaAsset": {

From ff988cd6f1f3390d852d48a5f859ecc6526f21e7 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 13:39:14 -0800
Subject: [PATCH 20/23] cleanup: More consistent asset name

---
 src/locales/en/main.json                     |  6 +++---
 src/platform/assets/components/AssetCard.vue | 17 ++++++++++-------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index f42cf503ae..6d9fa352fc 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2155,9 +2155,9 @@
     "deletion": {
       "header": "Delete this model?",
       "body": "This model will be permanently removed from your library.",
-      "inProgress": "Deleting {asset}...",
-      "complete": "{asset} has been deleted.",
-      "failed": "{asset} could not be deleted."
+      "inProgress": "Deleting {assetName}...",
+      "complete": "{assetName} has been deleted.",
+      "failed": "{assetName} could not be deleted."
     }
   },
   "mediaAsset": {
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 3a14c7019c..66c01f4011 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -25,7 +25,7 @@
       <img
         v-else
         :src="asset.preview_url"
-        :alt="asset.name"
+        :alt="displayName"
         class="size-full object-contain cursor-pointer"
         role="button"
         @click.self="interactive && $emit('select', asset)"
@@ -73,7 +73,7 @@
     <div class="max-h-32 flex flex-col gap-2 justify-between flex-auto">
       <h3
         :id="titleId"
-        v-tooltip.top="{ value: asset.name, showDelay: tooltipDelay }"
+        v-tooltip.top="{ value: displayName, showDelay: tooltipDelay }"
         :class="
           cn(
             'mb-2 m-0 text-base font-semibold line-clamp-2 wrap-anywhere',
@@ -82,7 +82,7 @@
         "
       >
         <EditableText
-          :model-value="newNameRef ?? asset.name"
+          :model-value="displayName"
           :is-editing="isEditing"
           :input-attrs="{ 'data-testid': 'asset-name-input' }"
           @edit="assetRename"
@@ -120,7 +120,7 @@
 
 <script setup lang="ts">
 import { useImage } from '@vueuse/core'
-import { computed, ref, useId, useTemplateRef } from 'vue'
+import { computed, ref, toValue, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -162,6 +162,8 @@ const isEditing = ref(false)
 const newNameRef = ref<string>()
 const deletedLocal = ref(false)
 
+const displayName = computed(() => newNameRef.value ?? asset.name)
+
 const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')
 )
@@ -173,6 +175,7 @@ const { isLoading, error } = useImage({
 
 function confirmDeletion() {
   dropdownMenuButton.value?.hide()
+  const assetName = toValue(displayName)
   const promptText = ref<string>(t('assetBrowser.deletion.body'))
   const optionsDisabled = ref(false)
   const confirmDialog = showConfirmDialog({
@@ -195,11 +198,11 @@ function confirmDeletion() {
       onConfirm: async () => {
         try {
           promptText.value = t('assetBrowser.deletion.inProgress', {
-            asset: asset.name
+            assetName
           })
           await assetService.deleteAsset(asset.id)
           promptText.value = t('assetBrowser.deletion.complete', {
-            asset: asset.name
+            assetName
           })
           // Give a second for the completion message
           await new Promise((resolve) => setTimeout(resolve, 1_000))
@@ -207,7 +210,7 @@ function confirmDeletion() {
         } catch (err: unknown) {
           console.error(err)
           promptText.value = t('assetBrowser.deletion.failed', {
-            asset: asset.name
+            assetName
           })
           // Give a second for the completion message
           await new Promise((resolve) => setTimeout(resolve, 3_000))

From 4417b0d90706c9a9f12c93761411785f32a061bd Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 13:40:51 -0800
Subject: [PATCH 21/23] Update flag name

---
 src/composables/useFeatureFlags.ts           | 9 ++++++---
 src/platform/assets/components/AssetCard.vue | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index a757e3ed88..3c12ae93d4 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -10,7 +10,7 @@ export enum ServerFeatureFlag {
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
   MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
-  MODEL_EDIT_ENABLED = 'model_edit_enabled'
+  ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled'
 }
 
 /**
@@ -33,8 +33,11 @@ export function useFeatureFlags() {
         false
       )
     },
-    get modelEditEnabled() {
-      return api.getServerFeature(ServerFeatureFlag.MODEL_EDIT_ENABLED, false)
+    get assetUpdateOptionsEnabled() {
+      return api.getServerFeature(
+        ServerFeatureFlag.ASSET_UPDATE_OPTIONS_ENABLED,
+        false
+      )
     }
   })
 
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 66c01f4011..72e46d460d 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -33,7 +33,7 @@
 
       <AssetBadgeGroup :badges="asset.badges" />
       <IconGroup
-        v-if="flags.modelEditEnabled"
+        v-if="flags.assetUpdateOptionsEnabled"
         :class="
           cn(
             'absolute top-2 right-2 invisible group-hover:visible',

From c9b5bb596bbc0ce5667f400da8b2d25f2738b9a7 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 14:07:16 -0800
Subject: [PATCH 22/23] Missed disabling

---
 src/platform/assets/components/AssetCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 72e46d460d..5e76c3b2cb 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -196,6 +196,7 @@ function confirmDeletion() {
         closeDialog(confirmDialog)
       },
       onConfirm: async () => {
+        optionsDisabled.value = true
         try {
           promptText.value = t('assetBrowser.deletion.inProgress', {
             assetName

From 71d49dc76d677ac976fd1bd8475ea360ce563c57 Mon Sep 17 00:00:00 2001
From: DrJKL <DrJKL0424@gmail.com>
Date: Mon, 1 Dec 2025 14:22:32 -0800
Subject: [PATCH 23/23] Add toast on failed rename.

---
 src/locales/en/main.json                     | 3 +++
 src/platform/assets/components/AssetCard.vue | 7 +++++++
 2 files changed, 10 insertions(+)

diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 6d9fa352fc..1205517f4e 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2158,6 +2158,9 @@
       "inProgress": "Deleting {assetName}...",
       "complete": "{assetName} has been deleted.",
       "failed": "{assetName} could not be deleted."
+    },
+    "rename": {
+      "failed": "Could not rename asset."
     }
   },
   "mediaAsset": {
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 5e76c3b2cb..36b7723639 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -134,6 +134,7 @@ import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { assetService } from '@/platform/assets/services/assetService'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -150,6 +151,7 @@ const { t } = useI18n()
 const settingStore = useSettingStore()
 const { closeDialog } = useDialogStore()
 const { flags } = useFeatureFlags()
+const toastStore = useToastStore()
 
 const dropdownMenuButton = useTemplateRef<InstanceType<typeof MoreButton>>(
   'dropdown-menu-button'
@@ -241,6 +243,11 @@ async function assetRename(newName?: string) {
       newNameRef.value = result.name
     } catch (err: unknown) {
       console.error(err)
+      toastStore.add({
+        severity: 'error',
+        summary: t('assetBrowser.rename.failed'),
+        life: 10_000
+      })
       newNameRef.value = undefined
     }
   }