[feat] Add ownership filter to model browser

src/locales/en/main.json

@@ -2136,6 +2136,10 @@
     "sortZA": "Z-A",
     "sortRecent": "Recent",
     "sortPopular": "Popular",
+    "ownership": "Ownership",
+    "ownershipAll": "All",
+    "ownershipMyModels": "My models",
+    "ownershipPublicModels": "Public models",
     "selectFrameworks": "Select Frameworks",
     "selectProjects": "Select Projects",
     "sortingType": "Sorting Type",

src/platform/assets/components/AssetBrowserModal.vue

@@ -48,6 +48,7 @@
     <template #contentFilter>
       <AssetFilterBar
         :assets="categoryFilteredAssets"
+        :all-assets="fetchedAssets"
         @filter-change="updateFilters"
       />
     </template>

src/platform/assets/components/AssetFilterBar.vue

@@ -26,6 +26,16 @@
         data-component-id="asset-filter-base-models"
         @update:model-value="handleFilterChange"
       />
+
+      <SingleSelect
+        v-if="hasMutableAssets"
+        v-model="ownership"
+        :label="$t('assetBrowser.ownership')"
+        :options="ownershipOptions"
+        class="min-w-42"
+        data-component-id="asset-filter-ownership"
+        @update:model-value="handleFilterChange"
+      />
     </div>
 
     <div class="flex items-center" data-component-id="asset-filter-bar-right">
@@ -46,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
@@ -55,12 +65,6 @@ import { t } from '@/i18n'
 import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
-export interface FilterState {
-  fileFormats: string[]
-  baseModels: string[]
-  sortBy: string
-}
-
 const SORT_OPTIONS = [
   { name: t('assetBrowser.sortRecent'), value: 'recent' },
   { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
@@ -71,17 +75,40 @@ type SortOption = (typeof SORT_OPTIONS)[number]['value']
 
 const sortOptions = [...SORT_OPTIONS]
 
-const { assets = [] } = defineProps<{
+const OWNERSHIP_OPTIONS = [
+  { name: t('assetBrowser.ownershipAll'), value: 'all' },
+  { name: t('assetBrowser.ownershipMyModels'), value: 'my-models' },
+  { name: t('assetBrowser.ownershipPublicModels'), value: 'public-models' }
+] as const
+
+type OwnershipOption = (typeof OWNERSHIP_OPTIONS)[number]['value']
+
+const ownershipOptions = [...OWNERSHIP_OPTIONS]
+
+export interface FilterState {
+  fileFormats: string[]
+  baseModels: string[]
+  sortBy: string
+  ownership: OwnershipOption
+}
+
+const { assets = [], allAssets = [] } = defineProps<{
   assets?: AssetItem[]
+  allAssets?: AssetItem[]
 }>()
 
 const fileFormats = ref<SelectOption[]>([])
 const baseModels = ref<SelectOption[]>([])
 const sortBy = ref<SortOption>('recent')
+const ownership = ref<OwnershipOption>('all')
 
 const { availableFileFormats, availableBaseModels } =
   useAssetFilterOptions(assets)
 
+const hasMutableAssets = computed(() =>
+  allAssets.some((asset) => asset.is_immutable === false)
+)
+
 const emit = defineEmits<{
   filterChange: [filters: FilterState]
 }>()
@@ -90,7 +117,8 @@ function handleFilterChange() {
   emit('filterChange', {
     fileFormats: fileFormats.value.map((option: SelectOption) => option.value),
     baseModels: baseModels.value.map((option: SelectOption) => option.value),
-    sortBy: sortBy.value
+    sortBy: sortBy.value,
+    ownership: ownership.value
   })
 }
 </script>

src/platform/assets/composables/useAssetBrowser.ts

@@ -35,6 +35,15 @@ function filterByBaseModels(models: string[]) {
   }
 }
 
+function filterByOwnership(ownership: string) {
+  return (asset: AssetItem) => {
+    if (ownership === 'all') return true
+    if (ownership === 'my-models') return asset.is_immutable === false
+    if (ownership === 'public-models') return asset.is_immutable === true
+    return true
+  }
+}
+
 type AssetBadge = {
   label: string
   type: 'type' | 'base' | 'size'
@@ -65,7 +74,8 @@ export function useAssetBrowser(
   const filters = ref<FilterState>({
     sortBy: 'recent',
     fileFormats: [],
-    baseModels: []
+    baseModels: [],
+    ownership: 'all'
   })
 
   // Transform API asset to display asset
@@ -176,6 +186,7 @@ export function useAssetBrowser(
     const filtered = searchFiltered.value
       .filter(filterByFileFormats(filters.value.fileFormats))
       .filter(filterByBaseModels(filters.value.baseModels))
+      .filter(filterByOwnership(filters.value.ownership))
 
     const sortedAssets = [...filtered]
     sortedAssets.sort((a, b) => {

src/platform/assets/fixtures/ui-mock-assets.ts

@@ -146,9 +146,15 @@ export function createAssetWithoutUserMetadata() {
   return asset
 }
 
-export function createAssetWithSpecificExtension(extension: string) {
+export function createAssetWithSpecificExtension(
+  extension: string,
+  isImmutable?: boolean
+) {
   const asset = createMockAssets(1)[0]
   asset.name = `test-model.${extension}`
+  if (isImmutable !== undefined) {
+    asset.is_immutable = isImmutable
+  }
   return asset
 }
 

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

@@ -105,8 +105,11 @@ describe('AssetFilterBar', () => {
       await nextTick()
 
       // Update sort
-      const sortSelect = wrapper.findComponent({ name: 'SingleSelect' })
-      await sortSelect.vm.$emit('update:modelValue', 'popular')
+      const sortSelect = wrapper
+        .findAllComponents({ name: 'SingleSelect' })
+        .find((component) => component.props('label') === 'assetBrowser.sortBy')
+      expect(sortSelect).toBeTruthy()
+      await sortSelect!.vm.$emit('update:modelValue', 'popular')
 
       await nextTick()
 
@@ -247,5 +250,95 @@ describe('AssetFilterBar', () => {
       const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
       expect(multiSelects).toHaveLength(0)
     })
+
+    it('hides ownership filter when no mutable assets', () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors', true) // immutable
+      ]
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const ownershipSelects = wrapper
+        .findAllComponents({ name: 'SingleSelect' })
+        .filter(
+          (component) => component.props('label') === 'assetBrowser.ownership'
+        )
+
+      expect(ownershipSelects).toHaveLength(0)
+    })
+
+    it('shows ownership filter when mutable assets exist', () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors', false) // mutable
+      ]
+      const wrapper = mountAssetFilterBar({ assets, allAssets: assets })
+
+      const ownershipSelects = wrapper
+        .findAllComponents({ name: 'SingleSelect' })
+        .filter(
+          (component) => component.props('label') === 'assetBrowser.ownership'
+        )
+
+      expect(ownershipSelects).toHaveLength(1)
+    })
+
+    it('shows ownership filter when mixed assets exist', () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors', true), // immutable
+        createAssetWithSpecificExtension('ckpt', false) // mutable
+      ]
+      const wrapper = mountAssetFilterBar({ assets, allAssets: assets })
+
+      const ownershipSelects = wrapper
+        .findAllComponents({ name: 'SingleSelect' })
+        .filter(
+          (component) => component.props('label') === 'assetBrowser.ownership'
+        )
+
+      expect(ownershipSelects).toHaveLength(1)
+    })
+  })
+
+  describe('Ownership Filter', () => {
+    it('emits ownership filter changes', async () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors', false) // mutable
+      ]
+      const wrapper = mountAssetFilterBar({ assets, allAssets: assets })
+
+      const ownershipSelect = wrapper
+        .findAllComponents({ name: 'SingleSelect' })
+        .find(
+          (component) => component.props('label') === 'assetBrowser.ownership'
+        )
+
+      expect(ownershipSelect).toBeTruthy()
+      await ownershipSelect!.vm.$emit('update:modelValue', 'my-models')
+      await nextTick()
+
+      const emitted = wrapper.emitted('filterChange')
+      expect(emitted).toHaveLength(1)
+
+      const filterState = emitted![0][0] as FilterState
+      expect(filterState.ownership).toBe('my-models')
+    })
+
+    it('ownership filter defaults to "all"', async () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors', false) // mutable
+      ]
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const sortSelect = wrapper
+        .findAllComponents({ name: 'SingleSelect' })
+        .find((component) => component.props('label') === 'assetBrowser.sortBy')
+
+      expect(sortSelect).toBeTruthy()
+      await sortSelect!.vm.$emit('update:modelValue', 'recent')
+      await nextTick()
+
+      const emitted = wrapper.emitted('filterChange')
+      const filterState = emitted![0][0] as FilterState
+      expect(filterState.ownership).toBe('all')
+    })
   })
 })