From 8469acbf07d920b968a0fa8c38d2fae336e6d1f7 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Fri, 31 Jul 2026 11:41:05 -0700
Subject: [PATCH] Centralize team applications in a data-farm store, migrate
 the list + mutations

---
 frontend/src/components/SkeletonBlock.vue     |  29 ++++
 .../device/MultiStepDeviceForm.vue            |   7 +-
 .../MultiStepApplicationsInstanceForm.vue     |   7 +-
 frontend/src/mixins/Application.js            |   4 +-
 .../pages/application/Settings/General.vue    |   9 +-
 .../components/ApplicationsListSkeleton.vue   |  77 ++++++++
 .../src/pages/team/Applications/index.vue     |  59 +++----
 frontend/src/stores/account-auth.js           |   2 +
 frontend/src/stores/account.js                |   2 +
 frontend/src/stores/data-farm-applications.ts |  96 ++++++++++
 .../stores/data-farm-applications.spec.js     | 164 ++++++++++++++++++
 11 files changed, 409 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/SkeletonBlock.vue
 create mode 100644 frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue
 create mode 100644 frontend/src/stores/data-farm-applications.ts
 create mode 100644 test/unit/frontend/stores/data-farm-applications.spec.js

diff --git a/frontend/src/components/SkeletonBlock.vue b/frontend/src/components/SkeletonBlock.vue
new file mode 100644
index 0000000000..89ab8d7c04
--- /dev/null
+++ b/frontend/src/components/SkeletonBlock.vue
@@ -0,0 +1,29 @@
+<template>
+    <div
+        class="ff-skeleton-block animate-pulse"
+        :style="{ width, height, borderRadius: radius }"
+    />
+</template>
+
+<script setup>
+defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '20px'
+    },
+    radius: {
+        type: String,
+        default: '4px'
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.ff-skeleton-block {
+    background-color: var(--ff-color-bg-emphasis);
+}
+</style>
diff --git a/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue b/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue
index 949822c8f3..89d694b62a 100644
--- a/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue
+++ b/frontend/src/components/multi-step-forms/device/MultiStepDeviceForm.vue
@@ -17,9 +17,8 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
-import applicationApi from '../../../api/application.js'
 import deviceApi from '../../../api/devices.js'
 import Alerts from '../../../services/alerts.js'
 import MultiStepForm from '../MultiStepForm.vue'
@@ -31,6 +30,7 @@ import TeamStep from './steps/TeamStep.vue'
 
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 const TEAM_STEP_SLUG = 'team'
 const APPLICATION_SLUG = 'application'
@@ -128,6 +128,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['createApplication']),
         updateForm (payload, stepKey) {
             this.currentStepKey = stepKey
             this.form = { ...this.form, ...payload }
@@ -139,7 +140,7 @@ export default {
 
             return new Promise((resolve) => {
                 if (this.hasToCreateAnApplication) {
-                    return applicationApi.createApplication({
+                    return this.createApplication({
                         ...this.form[APPLICATION_SLUG].input,
                         teamId: this.team.id
                     })
diff --git a/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue b/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue
index 7552ac1a81..6275c4a28f 100644
--- a/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue
+++ b/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue
@@ -17,9 +17,8 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
-import applicationApi from '../../../api/application.js'
 import flowBlueprintsApi from '../../../api/flowBlueprints.js'
 import instanceApi from '../../../api/instances.js'
 import Alerts from '../../../services/alerts.js'
@@ -32,6 +31,7 @@ import FlowsStep from './steps/flows-step/index.vue'
 
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 const TEAM_STEP_SLUG = 'team'
 const APPLICATION_SLUG = 'application'
@@ -178,6 +178,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['createApplication']),
         updateForm (payload, stepKey) {
             this.currentStepKey = stepKey
             this.form = { ...this.form, ...payload }
@@ -189,7 +190,7 @@ export default {
 
             return new Promise((resolve) => {
                 if (this.hasToCreateAnApplication) {
-                    return applicationApi.createApplication({
+                    return this.createApplication({
                         ...this.form[APPLICATION_SLUG].input,
                         teamId: this.team.id
                     })
diff --git a/frontend/src/mixins/Application.js b/frontend/src/mixins/Application.js
index 7812450172..107112b806 100644
--- a/frontend/src/mixins/Application.js
+++ b/frontend/src/mixins/Application.js
@@ -4,6 +4,7 @@ import ApplicationApi from '../api/application.js'
 import alerts from '../services/alerts.js'
 
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     data () {
@@ -36,6 +37,7 @@ export default {
     },
     methods: {
         ...mapActions(useContextStore, { setContextualApplication: 'setApplication' }),
+        ...mapActions(useDataFarmApplicationsStore, { deleteApplicationEntity: 'deleteApplication' }),
         async updateApplication () {
             const applicationId = this.$route.params.id
 
@@ -87,7 +89,7 @@ export default {
             this.loading.deleting = true
 
             try {
-                await ApplicationApi.deleteApplication(this.application.id, this.team.id)
+                await this.deleteApplicationEntity(this.application.id, this.team.id)
                 await useContextStore().refreshTeam()
                 this.$router.push({ name: 'Applications' })
                 alerts.emit('Application successfully deleted.', 'confirmation')
diff --git a/frontend/src/pages/application/Settings/General.vue b/frontend/src/pages/application/Settings/General.vue
index a1318f19be..9dad9af88a 100644
--- a/frontend/src/pages/application/Settings/General.vue
+++ b/frontend/src/pages/application/Settings/General.vue
@@ -57,6 +57,7 @@
 </template>
 
 <script>
+import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 
 import ApplicationAPI from '../../../api/application.js'
@@ -66,6 +67,8 @@ import FormRow from '../../../components/FormRow.vue'
 import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
+
 export default defineComponent({
     name: 'ApplicationSettingsGeneral',
     components: {
@@ -114,6 +117,7 @@ export default defineComponent({
         this.loadInstances(this.application.id)
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['updateApplication']),
         editName () {
             this.editing = true
             this.$refs.appName.focus()
@@ -125,10 +129,9 @@ export default defineComponent({
             this.input.projectDescription = this.application.description
         },
         saveApplication () {
-            ApplicationAPI.updateApplication(
+            this.updateApplication(
                 this.application.id,
-                this.input.projectName,
-                this.input.projectDescription
+                { name: this.input.projectName, description: this.input.projectDescription }
             )
                 .then(() => {
                     this.$emit('application-updated')
diff --git a/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue b/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue
new file mode 100644
index 0000000000..5c978278db
--- /dev/null
+++ b/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue
@@ -0,0 +1,77 @@
+<template>
+    <ul class="ff-applications-list" data-el="applications-list-skeleton">
+        <li v-for="n in count" :key="n" class="ff-application-skeleton">
+            <div class="ff-application-skeleton--header">
+                <SkeletonBlock width="200px" height="20px" />
+                <div class="ff-application-skeleton--badges">
+                    <SkeletonBlock v-for="b in 5" :key="b" width="34px" height="22px" radius="6px" />
+                </div>
+            </div>
+            <div class="ff-application-skeleton--body">
+                <div v-for="section in 2" :key="section" class="ff-application-skeleton--section">
+                    <SkeletonBlock width="120px" height="14px" />
+                    <div class="ff-application-skeleton--tiles">
+                        <SkeletonBlock v-for="tile in 3" :key="tile" height="68px" radius="6px" />
+                    </div>
+                </div>
+            </div>
+        </li>
+    </ul>
+</template>
+
+<script setup>
+import SkeletonBlock from '@/components/SkeletonBlock.vue'
+
+defineProps({
+    count: {
+        type: Number,
+        default: 4
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.ff-application-skeleton {
+    border: 1px solid var(--ff-color-border-strong);
+    border-radius: 6px;
+    margin-bottom: 12px;
+    background-color: var(--ff-color-bg-app);
+
+    &--header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+        padding: 12px;
+    }
+
+    &--badges {
+        display: flex;
+        gap: 6px;
+    }
+
+    &--body {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    &--section {
+        flex: 1;
+        min-width: 240px;
+        padding: 12px;
+        padding-top: 6px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    &--tiles {
+        display: flex;
+        gap: 8px;
+
+        :deep(.ff-skeleton-block) {
+            flex: 1;
+        }
+    }
+}
+</style>
diff --git a/frontend/src/pages/team/Applications/index.vue b/frontend/src/pages/team/Applications/index.vue
index d98e84c02c..61e1dba3a9 100644
--- a/frontend/src/pages/team/Applications/index.vue
+++ b/frontend/src/pages/team/Applications/index.vue
@@ -33,9 +33,9 @@
             </ff-page-header>
         </template>
         <div class="space-y-6">
-            <ff-loading v-if="loading" message="Loading Applications..." />
+            <ApplicationsListSkeleton v-if="isLoadingTeamApplications" />
 
-            <template v-else-if="!loading && applications.size > 0">
+            <template v-else-if="teamApplications.length > 0">
                 <ff-text-input
                     v-model="filterTerm"
                     class="ff-data-table--search"
@@ -51,8 +51,8 @@
                             :key="application.id"
                             data-el="application-item"
                             :application="application"
-                            @instance-deleted="fetchData(false)"
-                            @device-deleted="fetchData(false)"
+                            @instance-deleted="refreshApplications"
+                            @device-deleted="refreshApplications"
                         />
                     </transition-group>
                 </ul>
@@ -103,21 +103,23 @@
 <script>
 import { MagnifyingGlassIcon, PlusSmallIcon } from '@heroicons/vue/24/outline'
 
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
-import teamApi from '../../../api/team.js'
 import EmptyState from '../../../components/EmptyState.vue'
 import usePermissions from '../../../composables/Permissions.js'
 
 import ApplicationListItem from './components/Application.vue'
+import ApplicationsListSkeleton from './components/ApplicationsListSkeleton.vue'
 
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     name: 'TeamApplications',
     components: {
         MagnifyingGlassIcon,
         ApplicationListItem,
+        ApplicationsListSkeleton,
         EmptyState,
         PlusSmallIcon
     },
@@ -128,8 +130,6 @@ export default {
     },
     data () {
         return {
-            loading: false,
-            applications: new Map(),
             columns: [
                 { label: 'Name', class: ['grow'], key: 'name', sortable: true }
             ],
@@ -139,52 +139,37 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team']),
-        applicationsList () {
-            return Array.from(this.applications.values())
-        },
+        ...mapState(useDataFarmApplicationsStore, ['teamApplications', 'isLoadingTeamApplications']),
         filteredApplications () {
             if (this.filterTerm.length) {
-                return this.applicationsList
+                return this.teamApplications
                     .filter(app => {
                         return [
                             app?.name?.toLowerCase().includes(this.filterTerm.toLowerCase()),
                             app?.id?.toLowerCase().includes(this.filterTerm.toLowerCase())
                         ].includes(true)
                     })
-            } return this.applicationsList
+            } return this.teamApplications
         }
     },
     watch: {
-        team: 'fetchData'
+        team: 'loadApplications'
     },
     async mounted () {
-        await this.fetchData()
+        await this.loadApplications()
 
         this.setSearchQuery()
     },
     methods: {
-        async fetchData (withLoading = true) {
-            this.loading = withLoading
-            if (this.team.id) {
-                const applicationsMap = new Map()
-
-                teamApi.getTeamApplications(this.team.id,
-                    {
-                        includeApplicationSummary: true,
-                        includeInstances: false,
-                        includeApplicationDevices: false
-                    }
-                ).then((response) => {
-                    const applications = response.applications
-                    applications.forEach((applicationData) => {
-                        applicationsMap.set(applicationData.id, applicationData)
-                    })
-                    this.applications = applicationsMap
-                })
-                    .catch(e => e)
-                    .finally(() => {
-                        this.loading = false
-                    })
+        ...mapActions(useDataFarmApplicationsStore, ['ensureTeamApplicationsLoaded']),
+        loadApplications () {
+            if (this.team?.id) {
+                return this.ensureTeamApplicationsLoaded(this.team.id)
+            }
+        },
+        refreshApplications () {
+            if (this.team?.id) {
+                return this.ensureTeamApplicationsLoaded(this.team.id, { force: true })
             }
         },
         setSearchQuery () {
diff --git a/frontend/src/stores/account-auth.js b/frontend/src/stores/account-auth.js
index dcc098b156..ae931e51a8 100644
--- a/frontend/src/stores/account-auth.js
+++ b/frontend/src/stores/account-auth.js
@@ -11,6 +11,7 @@ import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 import { useCookieConsentStore } from '@/stores/cookie-consent'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
@@ -232,6 +233,7 @@ export const useAccountAuthStore = defineStore('account-auth', {
             useUxStore().$reset()
             useContextStore().$reset()
             useCookieConsentStore().reset()
+            useDataFarmApplicationsStore().reset()
             useProductTablesStore().$reset()
             useProductBrokersStore().$reset()
             useProductAssistantStore().$reset()
diff --git a/frontend/src/stores/account.js b/frontend/src/stores/account.js
index 3efb821243..4326f90868 100644
--- a/frontend/src/stores/account.js
+++ b/frontend/src/stores/account.js
@@ -7,6 +7,7 @@ import getAppOrchestrator from '@/services/app.orchestrator'
 import product from '@/services/product.js'
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 import { useProductTablesStore } from '@/stores/product-tables.js'
 
 function ensureTeamChannelConnected (team) {
@@ -132,6 +133,7 @@ export const useAccountStore = defineStore('account', {
         },
         clearOtherStores () {
             useProductTablesStore().clearState()
+            useDataFarmApplicationsStore().reset()
         }
     }
 })
diff --git a/frontend/src/stores/data-farm-applications.ts b/frontend/src/stores/data-farm-applications.ts
new file mode 100644
index 0000000000..bc545356fb
--- /dev/null
+++ b/frontend/src/stores/data-farm-applications.ts
@@ -0,0 +1,96 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+import applicationApi from '../api/application.js'
+import teamApi from '../api/team.js'
+
+import type { ApplicationSummary } from '@/types'
+
+export const useDataFarmApplicationsStore = defineStore('data-farm-applications', () => {
+    const applicationsById = ref<Record<string, ApplicationSummary>>({})
+    const teamApplicationIds = ref<string[]>([])
+    const loadedTeamId = ref<string | null>(null)
+    const isLoadingTeamApplications = ref(false)
+
+    const teamApplications = computed(() => teamApplicationIds.value
+        .map(id => applicationsById.value[id]))
+
+    function upsertApplication (application: ApplicationSummary): void {
+        if (!application?.id) return
+        const existing = applicationsById.value[application.id]
+        applicationsById.value[application.id] = { ...existing, ...application }
+        if (!teamApplicationIds.value.includes(application.id)) {
+            teamApplicationIds.value.push(application.id)
+        }
+    }
+
+    function removeApplication (id: string): void {
+        delete applicationsById.value[id]
+        teamApplicationIds.value = teamApplicationIds.value.filter(applicationId => applicationId !== id)
+    }
+
+    async function ensureTeamApplicationsLoaded (teamId: string, { force = false } = {}): Promise<void> {
+        if (!teamId) return
+        if (!force && loadedTeamId.value === teamId) return
+
+        isLoadingTeamApplications.value = true
+        try {
+            const response = await teamApi.getTeamApplications(teamId, {
+                includeApplicationSummary: true,
+                includeInstances: false,
+                includeApplicationDevices: false
+            })
+            const applications: ApplicationSummary[] = response.applications ?? []
+            const byId: Record<string, ApplicationSummary> = {}
+            const ids: string[] = []
+            applications.forEach(application => {
+                byId[application.id] = application
+                ids.push(application.id)
+            })
+            applicationsById.value = byId
+            teamApplicationIds.value = ids
+            loadedTeamId.value = teamId
+        } finally {
+            isLoadingTeamApplications.value = false
+        }
+    }
+
+    async function createApplication (payload: { name?: string, description?: string, teamId: string }): Promise<ApplicationSummary> {
+        const application = await applicationApi.createApplication(payload)
+        upsertApplication(application)
+        return application
+    }
+
+    async function updateApplication (id: string, changes: { name?: string, description?: string }): Promise<ApplicationSummary> {
+        const application = await applicationApi.updateApplication(id, changes.name, changes.description)
+        upsertApplication(application)
+        return application
+    }
+
+    async function deleteApplication (id: string, teamId: string): Promise<void> {
+        await applicationApi.deleteApplication(id, teamId)
+        removeApplication(id)
+    }
+
+    function reset (): void {
+        applicationsById.value = {}
+        teamApplicationIds.value = []
+        loadedTeamId.value = null
+        isLoadingTeamApplications.value = false
+    }
+
+    return {
+        applicationsById,
+        teamApplicationIds,
+        loadedTeamId,
+        isLoadingTeamApplications,
+        teamApplications,
+        upsertApplication,
+        removeApplication,
+        ensureTeamApplicationsLoaded,
+        createApplication,
+        updateApplication,
+        deleteApplication,
+        reset
+    }
+})
diff --git a/test/unit/frontend/stores/data-farm-applications.spec.js b/test/unit/frontend/stores/data-farm-applications.spec.js
new file mode 100644
index 0000000000..c3b45ae77a
--- /dev/null
+++ b/test/unit/frontend/stores/data-farm-applications.spec.js
@@ -0,0 +1,164 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import applicationApi from '@/api/application.js'
+import teamApi from '@/api/team.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
+
+describe('data-farm-applications store', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+    })
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+    })
+
+    it('starts empty and unloaded', () => {
+        const store = useDataFarmApplicationsStore()
+        expect(store.applicationsById).toEqual({})
+        expect(store.teamApplicationIds).toEqual([])
+        expect(store.loadedTeamId).toBe(null)
+        expect(store.isLoadingTeamApplications).toBe(false)
+        expect(store.teamApplications).toEqual([])
+    })
+
+    describe('ensureTeamApplicationsLoaded', () => {
+        it('fetches the team applications and normalises them', async () => {
+            const spy = vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({
+                applications: [{ id: 'a1', name: 'One' }, { id: 'a2', name: 'Two' }]
+            })
+            const store = useDataFarmApplicationsStore()
+
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            expect(spy).toHaveBeenCalledWith('team-1', expect.objectContaining({ includeApplicationSummary: true }))
+            expect(store.loadedTeamId).toBe('team-1')
+            expect(store.teamApplicationIds).toEqual(['a1', 'a2'])
+            expect(store.teamApplications.map(a => a.name)).toEqual(['One', 'Two'])
+            expect(store.isLoadingTeamApplications).toBe(false)
+        })
+
+        it('does not refetch when the team is already loaded', async () => {
+            const spy = vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1' }] })
+            const store = useDataFarmApplicationsStore()
+
+            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            expect(spy).toHaveBeenCalledTimes(1)
+        })
+
+        it('refetches the same team when forced', async () => {
+            const spy = vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1' }] })
+            const store = useDataFarmApplicationsStore()
+
+            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded('team-1', { force: true })
+
+            expect(spy).toHaveBeenCalledTimes(2)
+        })
+
+        it('refetches and replaces the list when the team changes', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications')
+                .mockResolvedValueOnce({ applications: [{ id: 'a1' }] })
+                .mockResolvedValueOnce({ applications: [{ id: 'b1' }] })
+            const store = useDataFarmApplicationsStore()
+
+            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded('team-2')
+
+            expect(store.loadedTeamId).toBe('team-2')
+            expect(store.teamApplicationIds).toEqual(['b1'])
+        })
+
+        it('clears the loading flag even when the fetch rejects', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockRejectedValue(new Error('boom'))
+            const store = useDataFarmApplicationsStore()
+
+            await expect(store.ensureTeamApplicationsLoaded('team-1')).rejects.toThrow('boom')
+            expect(store.isLoadingTeamApplications).toBe(false)
+        })
+    })
+
+    describe('createApplication', () => {
+        it('adds the created application to the list (same-session)', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1', name: 'One' }] })
+            vi.spyOn(applicationApi, 'createApplication').mockResolvedValue({ id: 'a2', name: 'New' })
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            const created = await store.createApplication({ name: 'New', teamId: 'team-1' })
+
+            expect(applicationApi.createApplication).toHaveBeenCalledWith({ name: 'New', teamId: 'team-1' })
+            expect(created).toEqual({ id: 'a2', name: 'New' })
+            expect(store.teamApplicationIds).toEqual(['a1', 'a2'])
+            expect(store.teamApplications.map(a => a.name)).toEqual(['One', 'New'])
+        })
+    })
+
+    describe('updateApplication', () => {
+        it('merges changes without dropping existing summary fields', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({
+                applications: [{ id: 'a1', name: 'Old', instanceCount: 3 }]
+            })
+            vi.spyOn(applicationApi, 'updateApplication').mockResolvedValue({ id: 'a1', name: 'Renamed', description: 'd' })
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            await store.updateApplication('a1', { name: 'Renamed', description: 'd' })
+
+            expect(applicationApi.updateApplication).toHaveBeenCalledWith('a1', 'Renamed', 'd')
+            expect(store.applicationsById.a1).toEqual({ id: 'a1', name: 'Renamed', description: 'd', instanceCount: 3 })
+            expect(store.teamApplicationIds).toEqual(['a1'])
+        })
+    })
+
+    describe('deleteApplication', () => {
+        it('removes the application from the list (same-session)', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({
+                applications: [{ id: 'a1' }, { id: 'a2' }]
+            })
+            vi.spyOn(applicationApi, 'deleteApplication').mockResolvedValue(undefined)
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            await store.deleteApplication('a1', 'team-1')
+
+            expect(applicationApi.deleteApplication).toHaveBeenCalledWith('a1', 'team-1')
+            expect(store.teamApplicationIds).toEqual(['a2'])
+            expect(store.applicationsById.a1).toBeUndefined()
+        })
+    })
+
+    describe('upsertApplication / removeApplication', () => {
+        it('ignores an upsert without an id', () => {
+            const store = useDataFarmApplicationsStore()
+            store.upsertApplication({ name: 'no id' })
+            expect(store.teamApplicationIds).toEqual([])
+        })
+
+        it('upsert updates an existing entry in place without duplicating the id', () => {
+            const store = useDataFarmApplicationsStore()
+            store.upsertApplication({ id: 'a1', name: 'One' })
+            store.upsertApplication({ id: 'a1', name: 'One prime' })
+            expect(store.teamApplicationIds).toEqual(['a1'])
+            expect(store.applicationsById.a1.name).toBe('One prime')
+        })
+    })
+
+    describe('reset', () => {
+        it('resets all state (team-switch / logout teardown)', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1' }] })
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            store.reset()
+
+            expect(store.applicationsById).toEqual({})
+            expect(store.teamApplicationIds).toEqual([])
+            expect(store.loadedTeamId).toBe(null)
+            expect(store.isLoadingTeamApplications).toBe(false)
+        })
+    })
+})