feat: add ownership filter to model browser

Add dropdown to filter models by ownership (All/My models/Public models).
The filter only appears when user has uploaded models.

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

Co-Authored-By: Claude <[email protected]>

Author: luke-mino-altherr

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/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'
@@ -59,6 +69,7 @@ export interface FilterState {
   fileFormats: string[]
   baseModels: string[]
   sortBy: string
+  ownership: string
 }
 
 const SORT_OPTIONS = [
@@ -71,17 +82,32 @@ type SortOption = (typeof SORT_OPTIONS)[number]['value']
 
 const sortOptions = [...SORT_OPTIONS]
 
+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]
+
 const { assets = [] } = defineProps<{
   assets?: 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(() =>
+  assets.some((asset) => !asset.is_immutable)
+)
+
 const emit = defineEmits<{
   filterChange: [filters: FilterState]
 }>()
@@ -90,7 +116,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
+    if (ownership === 'public-models') return asset.is_immutable
+    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

@@ -247,5 +247,93 @@ 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 })
+
+      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 })
+
+      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 })
+
+      const ownershipSelect = wrapper
+        .findAllComponents({ name: 'SingleSelect' })
+        .find(
+          (component) => component.props('label') === 'assetBrowser.ownership'
+        )
+
+      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')
+
+      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')
+    })
   })
 })

tests-ui/platform/assets/composables/useAssetBrowser.test.ts

@@ -249,7 +249,8 @@ describe('useAssetBrowser', () => {
       updateFilters({
         sortBy: 'name-asc',
         fileFormats: ['safetensors'],
-        baseModels: []
+        baseModels: [],
+        ownership: 'all'
       })
       await nextTick()
 
@@ -284,7 +285,8 @@ describe('useAssetBrowser', () => {
       updateFilters({
         sortBy: 'name-asc',
         fileFormats: [],
-        baseModels: ['SDXL']
+        baseModels: ['SDXL'],
+        ownership: 'all'
       })
       await nextTick()
 
@@ -335,7 +337,12 @@ describe('useAssetBrowser', () => {
 
       const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
 
-      updateFilters({ sortBy: 'name', fileFormats: [], baseModels: [] })
+      updateFilters({
+        sortBy: 'name',
+        fileFormats: [],
+        baseModels: [],
+        ownership: 'all'
+      })
       await nextTick()
 
       const names = filteredAssets.value.map((asset) => asset.name)
@@ -355,7 +362,12 @@ describe('useAssetBrowser', () => {
 
       const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
 
-      updateFilters({ sortBy: 'recent', fileFormats: [], baseModels: [] })
+      updateFilters({
+        sortBy: 'recent',
+        fileFormats: [],
+        baseModels: [],
+        ownership: 'all'
+      })
       await nextTick()
 
       const dates = filteredAssets.value.map((asset) => asset.created_at)
@@ -365,6 +377,90 @@ describe('useAssetBrowser', () => {
         '2024-01-01T00:00:00Z'
       ])
     })
+
+    it('filters by ownership - all', async () => {
+      const assets = [
+        createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
+        createApiAsset({
+          name: 'public-model.safetensors',
+          is_immutable: true
+        }),
+        createApiAsset({
+          name: 'another-my-model.safetensors',
+          is_immutable: false
+        })
+      ]
+
+      const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
+
+      updateFilters({
+        sortBy: 'name-asc',
+        fileFormats: [],
+        baseModels: [],
+        ownership: 'all'
+      })
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(3)
+    })
+
+    it('filters by ownership - my models only', async () => {
+      const assets = [
+        createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
+        createApiAsset({
+          name: 'public-model.safetensors',
+          is_immutable: true
+        }),
+        createApiAsset({
+          name: 'another-my-model.safetensors',
+          is_immutable: false
+        })
+      ]
+
+      const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
+
+      updateFilters({
+        sortBy: 'name-asc',
+        fileFormats: [],
+        baseModels: [],
+        ownership: 'my-models'
+      })
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(2)
+      expect(filteredAssets.value.every((asset) => !asset.is_immutable)).toBe(
+        true
+      )
+    })
+
+    it('filters by ownership - public models only', async () => {
+      const assets = [
+        createApiAsset({ name: 'my-model.safetensors', is_immutable: false }),
+        createApiAsset({
+          name: 'public-model.safetensors',
+          is_immutable: true
+        }),
+        createApiAsset({
+          name: 'another-public-model.safetensors',
+          is_immutable: true
+        })
+      ]
+
+      const { updateFilters, filteredAssets } = useAssetBrowser(ref(assets))
+
+      updateFilters({
+        sortBy: 'name-asc',
+        fileFormats: [],
+        baseModels: [],
+        ownership: 'public-models'
+      })
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(2)
+      expect(filteredAssets.value.every((asset) => asset.is_immutable)).toBe(
+        true
+      )
+    })
   })
 
   describe('Dynamic Category Extraction', () => {