From 4d41fa54fd08e42ff39a2e565ae3ccec24335281 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Fri, 31 Jul 2026 08:58:11 -0700
Subject: [PATCH 1/9] Publish application lifecycle events over the team
 channel

---
 forge/comms/aclManager.js                     |  6 +-
 forge/comms/index.js                          |  6 ++
 forge/routes/api/application.js               | 19 ++++++-
 test/unit/forge/comms/authRoutesV2_spec.js    | 48 ++++++++++++++++
 .../unit/forge/routes/api/application_spec.js | 56 +++++++++++++++++++
 5 files changed, 132 insertions(+), 3 deletions(-)

diff --git a/forge/comms/aclManager.js b/forge/comms/aclManager.js
index a7d91da6eb..6e23f60eca 100644
--- a/forge/comms/aclManager.js
+++ b/forge/comms/aclManager.js
@@ -491,6 +491,8 @@ module.exports = function (app) {
                 { topic: /^ff\/v1\/[^/]+\/p\/[^/]+\/state$/ },
                 // - ff/v1/<team>/d/<device>/state
                 { topic: /^ff\/v1\/[^/]+\/d\/[^/]+\/state$/ },
+                // - ff/v1/<team>/a/<application>/created|updated|deleted
+                { topic: /^ff\/v1\/[^/]+\/a\/[^/]+\/(created|updated|deleted)$/ },
                 // ff/v1/platform/sync
                 { topic: /^ff\/v1\/platform\/sync$/ },
                 // ff/v1/platform/leader
@@ -560,7 +562,9 @@ module.exports = function (app) {
                 // - ff/v1/<team>/p/+/state
                 { topic: /^ff\/v1\/([^/]+)\/p\/([^/]+)\/state$/, verify: 'checkTeamStateSub' },
                 // - ff/v1/<team>/d/+/state
-                { topic: /^ff\/v1\/([^/]+)\/d\/([^/]+)\/state$/, verify: 'checkTeamStateSub' }
+                { topic: /^ff\/v1\/([^/]+)\/d\/([^/]+)\/state$/, verify: 'checkTeamStateSub' },
+                // - ff/v1/<team>/a/+/created|updated|deleted
+                { topic: /^ff\/v1\/([^/]+)\/a\/([^/]+)\/(created|updated|deleted)$/, verify: 'checkTeamStateSub' }
             ],
             pub: []
         },
diff --git a/forge/comms/index.js b/forge/comms/index.js
index 00dc08ce1b..fed0e78bf2 100644
--- a/forge/comms/index.js
+++ b/forge/comms/index.js
@@ -92,6 +92,12 @@ module.exports = fp(async function (app, _opts) {
                     const meta = { state }
                     if (versions) meta.versions = versions
                     client.publish(`ff/v1/${teamHash}/p/${id}/state`, JSON.stringify({ id, meta }))
+                },
+                notifyEntityLifecycle: function (teamHash, type, id, action, data) {
+                    if (!teamHash || !type || !id || !action) return
+                    const msg = { id, action }
+                    if (data !== undefined) msg.data = data
+                    client.publish(`ff/v1/${teamHash}/${type}/${id}/${action}`, JSON.stringify(msg))
                 }
             }
         })
diff --git a/forge/routes/api/application.js b/forge/routes/api/application.js
index ca7063f853..ec730896bd 100644
--- a/forge/routes/api/application.js
+++ b/forge/routes/api/application.js
@@ -78,7 +78,10 @@ module.exports = async function (app) {
         await app.auditLog.Team.application.created(request.session.User, null, team, application)
         await app.auditLog.Application.application.created(request.session.User, null, application)
 
-        reply.send(app.db.views.Application.application(application))
+        const applicationView = app.db.views.Application.application(application)
+        app.comms?.team?.notifyEntityLifecycle(team.hashid, 'a', application.hashid, 'created', applicationView)
+
+        reply.send(applicationView)
     })
 
     /**
@@ -178,7 +181,12 @@ module.exports = async function (app) {
         }
         await app.auditLog.Application.application.updated(request.session.User, null, request.application, updates)
 
-        reply.send(app.db.views.Application.application(request.application))
+        const applicationView = app.db.views.Application.application(request.application)
+        if (team) {
+            app.comms?.team?.notifyEntityLifecycle(team.hashid, 'a', request.application.hashid, 'updated', applicationView)
+        }
+
+        reply.send(applicationView)
     })
 
     /**
@@ -217,9 +225,16 @@ module.exports = async function (app) {
                 return reply.code(422).send({ code: 'invalid_application', error: 'Please delete the instances within the application first' })
             }
 
+            const teamHash = request.application.Team?.hashid
+            const applicationHash = request.application.hashid
+
             await request.application.destroy()
             await app.auditLog.Team.application.deleted(request.session.User, null, request.application.Team, request.application)
 
+            if (teamHash) {
+                app.comms?.team?.notifyEntityLifecycle(teamHash, 'a', applicationHash, 'deleted')
+            }
+
             reply.send({ status: 'okay' })
         } catch (err) {
             reply.code(500).send({ code: 'unexpected_error', error: err.toString() })
diff --git a/test/unit/forge/comms/authRoutesV2_spec.js b/test/unit/forge/comms/authRoutesV2_spec.js
index 5877bff938..9f9b8e2d39 100644
--- a/test/unit/forge/comms/authRoutesV2_spec.js
+++ b/test/unit/forge/comms/authRoutesV2_spec.js
@@ -1462,6 +1462,54 @@ describe('Broker Auth v2 API', async function () {
                     topic: `ff/v1/${TestObjects.ATeam.hashid}/p/+/state`
                 })
             })
+            it('allows a team member to subscribe to the application lifecycle wildcards', async function () {
+                await allowRead({
+                    username: teamFrontendUsername,
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/+/created`
+                })
+                await allowRead({
+                    username: teamFrontendUsername,
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/+/updated`
+                })
+                await allowRead({
+                    username: teamFrontendUsername,
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/+/deleted`
+                })
+            })
+            it('denies subscribe to another team\'s application lifecycle wildcard', async function () {
+                await denyRead({
+                    username: teamFrontendUsername,
+                    topic: `ff/v1/${otherTeam.hashid}/a/+/created`
+                })
+            })
+            it('denies application lifecycle subscribe for a user who is not a member of the team', async function () {
+                const erin = await factory.createUser({ username: 'erin', name: 'Erin', email: 'erin@example.com', password: 'eePassword1!' })
+                const erinUsername = `fe-team:${erin.hashid}:${TestObjects.ATeam.hashid}:session-1234567890`
+                await denyRead({
+                    username: erinUsername,
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/+/created`
+                })
+            })
+            it('denies fe-team from publishing application lifecycle topics (read-only client)', async function () {
+                await denyWrite({
+                    username: teamFrontendUsername,
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/+/created`
+                })
+            })
+            it('allows forge_platform to publish application lifecycle topics', async function () {
+                await allowWrite({
+                    username: 'forge_platform',
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/an-application/created`
+                })
+                await allowWrite({
+                    username: 'forge_platform',
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/an-application/updated`
+                })
+                await allowWrite({
+                    username: 'forge_platform',
+                    topic: `ff/v1/${TestObjects.ATeam.hashid}/a/an-application/deleted`
+                })
+            })
             it('denies fe-team from publishing to state (read-only client)', async function () {
                 await denyWrite({
                     username: teamFrontendUsername,
diff --git a/test/unit/forge/routes/api/application_spec.js b/test/unit/forge/routes/api/application_spec.js
index 6ae0cbf0fa..19d2e9155a 100644
--- a/test/unit/forge/routes/api/application_spec.js
+++ b/test/unit/forge/routes/api/application_spec.js
@@ -434,6 +434,62 @@ describe('Application API', function () {
         })
     })
 
+    describe('Lifecycle publishing', async function () {
+        let notifySpy
+
+        beforeEach(function () {
+            notifySpy = sinon.spy(app.comms.team, 'notifyEntityLifecycle')
+        })
+
+        afterEach(function () {
+            notifySpy.restore()
+        })
+
+        it('publishes created on create', async function () {
+            const sid = await login('bob', 'bbPassword')
+            const response = await app.inject({
+                method: 'POST',
+                url: '/api/v1/applications',
+                cookies: { sid },
+                payload: { name: generateName('lifecycle-app'), teamId: TestObjects.BTeam.hashid }
+            })
+            response.statusCode.should.equal(200)
+            const result = response.json()
+
+            notifySpy.calledWith(TestObjects.BTeam.hashid, 'a', result.id, 'created').should.be.true()
+            const data = notifySpy.getCall(0).args[4]
+            data.should.have.property('id', result.id)
+        })
+
+        it('publishes updated on update', async function () {
+            const sid = await login('bob', 'bbPassword')
+            const application = await app.factory.createApplication({ name: generateName('lifecycle-app') }, TestObjects.BTeam)
+            const response = await app.inject({
+                method: 'PUT',
+                url: `/api/v1/applications/${application.hashid}`,
+                cookies: { sid },
+                payload: { name: 'Renamed' }
+            })
+            response.statusCode.should.equal(200)
+
+            notifySpy.calledWith(TestObjects.BTeam.hashid, 'a', application.hashid, 'updated').should.be.true()
+        })
+
+        it('publishes deleted on delete without a data payload', async function () {
+            const sid = await login('bob', 'bbPassword')
+            const application = await app.factory.createApplication({ name: generateName('lifecycle-app') }, TestObjects.BTeam)
+            const response = await app.inject({
+                method: 'DELETE',
+                url: `/api/v1/applications/${application.hashid}`,
+                cookies: { sid }
+            })
+            response.statusCode.should.equal(200)
+
+            notifySpy.calledWith(TestObjects.BTeam.hashid, 'a', application.hashid, 'deleted').should.be.true()
+            should(notifySpy.getCall(0).args[4]).be.undefined()
+        })
+    })
+
     describe('List instances', async function () {
         it('Returns application instances - empty list', async function () {
             const sid = await login('bob', 'bbPassword')

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 2/9] 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)
+        })
+    })
+})

From da9223ff65d7ca6e0088cf97d36aaeec5cc29f98 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Mon, 3 Aug 2026 08:24:42 -0700
Subject: [PATCH 3/9] Add applications subscriber and connect to pinia store
 with specs

---
 frontend/src/stores/data-farm-applications.ts |  10 ++
 .../subscribers/applications.subscriber.ts    |  47 ++++++
 .../src/subscribers/subscriber.registry.ts    |   4 +-
 .../src/types/subscribers/subscriber.types.ts |   1 +
 .../stores/data-farm-applications.spec.js     |  49 +++++++
 .../applications.subscriber.spec.js           | 135 ++++++++++++++++++
 6 files changed, 245 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/subscribers/applications.subscriber.ts
 create mode 100644 test/unit/frontend/subscribers/applications.subscriber.spec.js

diff --git a/frontend/src/stores/data-farm-applications.ts b/frontend/src/stores/data-farm-applications.ts
index bc545356fb..3afc4ac662 100644
--- a/frontend/src/stores/data-farm-applications.ts
+++ b/frontend/src/stores/data-farm-applications.ts
@@ -72,6 +72,15 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         removeApplication(id)
     }
 
+    function applyRealtimeEvent (event: { id?: string, action?: string, data?: ApplicationSummary }): void {
+        if (!event?.id || !event.action) return
+        if (event.action === 'deleted') {
+            removeApplication(event.id)
+        } else if (event.data) {
+            upsertApplication(event.data)
+        }
+    }
+
     function reset (): void {
         applicationsById.value = {}
         teamApplicationIds.value = []
@@ -91,6 +100,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         createApplication,
         updateApplication,
         deleteApplication,
+        applyRealtimeEvent,
         reset
     }
 })
diff --git a/frontend/src/subscribers/applications.subscriber.ts b/frontend/src/subscribers/applications.subscriber.ts
new file mode 100644
index 0000000000..42ca891a95
--- /dev/null
+++ b/frontend/src/subscribers/applications.subscriber.ts
@@ -0,0 +1,47 @@
+import { defineSubscriberSingleton } from './subscriber.factory'
+import { SubscriberRoute, TeamSubscriber } from './team-subscriber.contract'
+
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
+import type { ApplicationSummary } from '@/types'
+import type { CreateSubscriberOptions, TeamSubscriberI } from '@/types/subscribers/subscriber.types'
+
+const APPLICATION_LIFECYCLE_TOPIC_REGEX = /^ff\/v1\/[^/]+\/a\/[^/]+\/(?:created|updated|deleted)$/
+
+class ApplicationsSubscriber extends TeamSubscriber implements TeamSubscriberI {
+    constructor ({ app, router, transport, subscribers }: CreateSubscriberOptions) {
+        super({
+            name: 'applications',
+            app,
+            router,
+            transport,
+            subscribers
+        })
+    }
+
+    protected _topics (teamId: string): string[] {
+        return [
+            `ff/v1/${teamId}/a/+/created`,
+            `ff/v1/${teamId}/a/+/updated`,
+            `ff/v1/${teamId}/a/+/deleted`
+        ]
+    }
+
+    protected _routes (): SubscriberRoute[] {
+        return [
+            { pattern: APPLICATION_LIFECYCLE_TOPIC_REGEX, handle: (payload) => this._onLifecycle(payload) }
+        ]
+    }
+
+    protected _onLifecycle (payload: { id?: string, action?: string, data?: ApplicationSummary }): void {
+        if (!payload?.id || !payload.action) return
+        try {
+            useDataFarmApplicationsStore().applyRealtimeEvent(payload)
+        } catch {}
+    }
+}
+
+const { create: createApplicationsSubscriber, destroy: destroyApplicationsSubscriber } = defineSubscriberSingleton(ApplicationsSubscriber)
+
+export { createApplicationsSubscriber, destroyApplicationsSubscriber }
+
+export default createApplicationsSubscriber
diff --git a/frontend/src/subscribers/subscriber.registry.ts b/frontend/src/subscribers/subscriber.registry.ts
index 50cf0f233c..911b68a4bc 100644
--- a/frontend/src/subscribers/subscriber.registry.ts
+++ b/frontend/src/subscribers/subscriber.registry.ts
@@ -1,7 +1,9 @@
+import { createApplicationsSubscriber } from './applications.subscriber'
 import { createLiveStatusSubscriber } from './live-status.subscriber'
 import { createTeamChannelSubscriber } from './team-channel.subscriber'
 
 export default [
     { key: 'teamChannel' as const, create: createTeamChannelSubscriber, requiredLifecycle: ['destroy'] as const },
-    { key: 'liveStatus' as const, create: createLiveStatusSubscriber, requiredLifecycle: ['destroy'] as const }
+    { key: 'liveStatus' as const, create: createLiveStatusSubscriber, requiredLifecycle: ['destroy'] as const },
+    { key: 'applications' as const, create: createApplicationsSubscriber, requiredLifecycle: ['destroy'] as const }
 ]
diff --git a/frontend/src/types/subscribers/subscriber.types.ts b/frontend/src/types/subscribers/subscriber.types.ts
index 1110bc68e8..244c668ee0 100644
--- a/frontend/src/types/subscribers/subscriber.types.ts
+++ b/frontend/src/types/subscribers/subscriber.types.ts
@@ -22,6 +22,7 @@ export interface TeamSubscriberI extends Subscriber {
 export type SubscriberInstances = {
     teamChannel: TeamSubscriberI | null
     liveStatus: TeamSubscriberI | null
+    applications: TeamSubscriberI | null
 }
 
 export interface CreateSubscriberOptions<TTransport extends Transport = Transport> {
diff --git a/test/unit/frontend/stores/data-farm-applications.spec.js b/test/unit/frontend/stores/data-farm-applications.spec.js
index c3b45ae77a..8d144926e2 100644
--- a/test/unit/frontend/stores/data-farm-applications.spec.js
+++ b/test/unit/frontend/stores/data-farm-applications.spec.js
@@ -147,6 +147,55 @@ describe('data-farm-applications store', () => {
         })
     })
 
+    describe('applyRealtimeEvent', () => {
+        it('upserts on a created event (cross-session add)', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1', name: 'One' }] })
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            store.applyRealtimeEvent({ id: 'a2', action: 'created', data: { id: 'a2', name: 'Two' } })
+
+            expect(store.teamApplicationIds).toEqual(['a1', 'a2'])
+            expect(store.teamApplications.map(a => a.name)).toEqual(['One', 'Two'])
+        })
+
+        it('merges on an updated event without dropping summary fields', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({
+                applications: [{ id: 'a1', name: 'Old', instanceCount: 3 }]
+            })
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            store.applyRealtimeEvent({ id: 'a1', action: 'updated', data: { id: 'a1', name: 'Renamed' } })
+
+            expect(store.applicationsById.a1).toEqual({ id: 'a1', name: 'Renamed', instanceCount: 3 })
+        })
+
+        it('removes on a deleted event (cross-session remove)', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1' }, { id: 'a2' }] })
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            store.applyRealtimeEvent({ id: 'a1', action: 'deleted' })
+
+            expect(store.teamApplicationIds).toEqual(['a2'])
+            expect(store.applicationsById.a1).toBeUndefined()
+        })
+
+        it('ignores an event missing id or action', () => {
+            const store = useDataFarmApplicationsStore()
+            store.applyRealtimeEvent({ action: 'created', data: { id: 'a1' } })
+            store.applyRealtimeEvent({ id: 'a1' })
+            expect(store.teamApplicationIds).toEqual([])
+        })
+
+        it('ignores a created/updated event with no data payload', () => {
+            const store = useDataFarmApplicationsStore()
+            store.applyRealtimeEvent({ id: 'a1', action: 'created' })
+            expect(store.teamApplicationIds).toEqual([])
+        })
+    })
+
     describe('reset', () => {
         it('resets all state (team-switch / logout teardown)', async () => {
             vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1' }] })
diff --git a/test/unit/frontend/subscribers/applications.subscriber.spec.js b/test/unit/frontend/subscribers/applications.subscriber.spec.js
new file mode 100644
index 0000000000..8fd8757db1
--- /dev/null
+++ b/test/unit/frontend/subscribers/applications.subscriber.spec.js
@@ -0,0 +1,135 @@
+/* eslint-env browser */
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+const getTeamCommsCreds = vi.fn()
+const useAccountAuthStore = vi.fn(() => ({ user: { id: 'user-hashid-1' }, getSessionId: () => 'session-test-id' }))
+const applyRealtimeEvent = vi.fn()
+const useDataFarmApplicationsStore = vi.fn(() => ({ applyRealtimeEvent }))
+
+vi.mock('@/api/team.js', () => ({
+    default: { getTeamCommsCreds: (...args) => getTeamCommsCreds(...args) }
+}))
+vi.mock('@/stores/account-auth.js', () => ({ useAccountAuthStore }))
+vi.mock('@/stores/data-farm-applications', () => ({ useDataFarmApplicationsStore }))
+
+function makeTransport () {
+    return {
+        attach: vi.fn().mockImplementation(async (key) => ({ key, id: 1 })),
+        subscribe: vi.fn().mockResolvedValue(undefined),
+        detach: vi.fn().mockResolvedValue(undefined)
+    }
+}
+
+describe('ApplicationsSubscriber', async () => {
+    const mod = await import('../../../../frontend/src/subscribers/applications.subscriber.ts')
+    const { createApplicationsSubscriber, destroyApplicationsSubscriber } = mod
+
+    function createSubscriber ({ transport = makeTransport() } = {}) {
+        const subscribers = { teamChannel: null, liveStatus: null, applications: null }
+        const subscriber = createApplicationsSubscriber({ app: {}, router: {}, transport, subscribers })
+        subscribers.applications = subscriber
+        return { subscriber, transport }
+    }
+
+    beforeEach(async () => {
+        getTeamCommsCreds.mockReset()
+        useAccountAuthStore.mockClear().mockReturnValue({ user: { id: 'user-hashid-1' }, getSessionId: () => 'session-test-id' })
+        applyRealtimeEvent.mockClear()
+        await destroyApplicationsSubscriber()
+    })
+
+    afterEach(async () => {
+        await destroyApplicationsSubscriber()
+    })
+
+    describe('subscribe on connect', () => {
+        async function connectAndCaptureOnConnect () {
+            const { subscriber, transport } = createSubscriber()
+            let onConnect
+            transport.attach.mockImplementation(async (key, opts) => {
+                onConnect = opts.onConnect
+                return { key, id: 1 }
+            })
+            await subscriber.connect({ id: 'team-1' })
+            return { subscriber, transport, onConnect }
+        }
+
+        test('subscribes to the a/+/created|updated|deleted wildcards with qos 1', async () => {
+            const { transport, onConnect } = await connectAndCaptureOnConnect()
+            await onConnect()
+            expect(transport.subscribe).toHaveBeenCalledWith(
+                'team:team-1',
+                [
+                    'ff/v1/team-1/a/+/created',
+                    'ff/v1/team-1/a/+/updated',
+                    'ff/v1/team-1/a/+/deleted'
+                ],
+                { qos: 1 }
+            )
+        })
+    })
+
+    describe('message routing (dispatches to the store)', () => {
+        async function connectAndCaptureOnMessage () {
+            const { subscriber, transport } = createSubscriber()
+            let onMessage
+            transport.attach.mockImplementation(async (key, opts) => {
+                onMessage = opts.onMessage
+                return { key, id: 1 }
+            })
+            await subscriber.connect({ id: 'team-1' })
+            return { subscriber, onMessage }
+        }
+
+        test('created topic forwards the event to applyRealtimeEvent', async () => {
+            const { onMessage } = await connectAndCaptureOnMessage()
+            const event = { id: 'a1', action: 'created', data: { id: 'a1', name: 'One' } }
+            onMessage('ff/v1/team-1/a/a1/created', Buffer.from(JSON.stringify(event)))
+            expect(applyRealtimeEvent).toHaveBeenCalledWith(event)
+        })
+
+        test('updated topic forwards the event to applyRealtimeEvent', async () => {
+            const { onMessage } = await connectAndCaptureOnMessage()
+            const event = { id: 'a1', action: 'updated', data: { id: 'a1', name: 'Renamed' } }
+            onMessage('ff/v1/team-1/a/a1/updated', Buffer.from(JSON.stringify(event)))
+            expect(applyRealtimeEvent).toHaveBeenCalledWith(event)
+        })
+
+        test('deleted topic forwards the event to applyRealtimeEvent', async () => {
+            const { onMessage } = await connectAndCaptureOnMessage()
+            const event = { id: 'a1', action: 'deleted' }
+            onMessage('ff/v1/team-1/a/a1/deleted', Buffer.from(JSON.stringify(event)))
+            expect(applyRealtimeEvent).toHaveBeenCalledWith(event)
+        })
+
+        test('ignores an event missing id or action', async () => {
+            const { onMessage } = await connectAndCaptureOnMessage()
+            onMessage('ff/v1/team-1/a/a1/created', Buffer.from(JSON.stringify({ action: 'created' })))
+            onMessage('ff/v1/team-1/a/a1/created', Buffer.from(JSON.stringify({ id: 'a1' })))
+            expect(applyRealtimeEvent).not.toHaveBeenCalled()
+        })
+
+        test('ignores unrelated topics (owned by other subscribers)', async () => {
+            const { onMessage } = await connectAndCaptureOnMessage()
+            onMessage('ff/v1/team-1/p/inst-1/state', Buffer.from(JSON.stringify({ id: 'inst-1', meta: { state: 'running' } })))
+            onMessage('ff/v1/team-1/t/updated', Buffer.from('{}'))
+            expect(applyRealtimeEvent).not.toHaveBeenCalled()
+        })
+
+        test('does not throw on malformed JSON payloads', async () => {
+            const { onMessage } = await connectAndCaptureOnMessage()
+            expect(() => onMessage('ff/v1/team-1/a/a1/created', Buffer.from('not json'))).not.toThrow()
+            expect(applyRealtimeEvent).not.toHaveBeenCalled()
+        })
+    })
+
+    describe('disconnect / destroy', () => {
+        test('disconnect detaches the transport', async () => {
+            const { subscriber, transport } = createSubscriber()
+            await subscriber.connect({ id: 'team-1' })
+            await subscriber.disconnect()
+            expect(transport.detach).toHaveBeenCalledWith(expect.objectContaining({ key: 'team:team-1' }))
+            expect(subscriber.isConnected()).toBe(false)
+        })
+    })
+})

From be80d675aa490ee8b0b6443dacdb8ee8c4cb3a05 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Mon, 3 Aug 2026 08:56:34 -0700
Subject: [PATCH 4/9] Update app.orchestrator spec

---
 .../unit/frontend/services/app.orchestrator.spec.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/test/unit/frontend/services/app.orchestrator.spec.js b/test/unit/frontend/services/app.orchestrator.spec.js
index d2f7d3a09d..41e9e98f83 100644
--- a/test/unit/frontend/services/app.orchestrator.spec.js
+++ b/test/unit/frontend/services/app.orchestrator.spec.js
@@ -6,6 +6,7 @@ const mockCreateMessagingService = vi.fn()
 const mockCreateMqttService = vi.fn()
 const mockCreateTeamChannelSubscriber = vi.fn()
 const mockCreateLiveStatusSubscriber = vi.fn()
+const mockCreateApplicationsSubscriber = vi.fn()
 const mockCreateMqttTransport = vi.fn()
 
 vi.mock('../../../../frontend/src/services/automations.service.js', () => {
@@ -50,6 +51,12 @@ vi.mock('../../../../frontend/src/subscribers/live-status.subscriber.js', () =>
     }
 })
 
+vi.mock('../../../../frontend/src/subscribers/applications.subscriber.js', () => {
+    return {
+        createApplicationsSubscriber: mockCreateApplicationsSubscriber
+    }
+})
+
 async function loadOrchestratorModule () {
     vi.resetModules()
     return await import('../../../../frontend/src/services/app.orchestrator.ts')
@@ -62,6 +69,7 @@ function seedServices () {
     const mqttService = { name: 'mqtt', destroy: vi.fn().mockResolvedValue() }
     const teamChannelSubscriber = { name: 'teamChannel', destroy: vi.fn().mockResolvedValue() }
     const liveStatusSubscriber = { name: 'liveStatus', destroy: vi.fn().mockResolvedValue() }
+    const applicationsSubscriber = { name: 'applications', destroy: vi.fn().mockResolvedValue() }
     const transport = { name: 'mqtt-transport' }
 
     mockCreateAutomationsService.mockReturnValue(automationsService)
@@ -71,8 +79,9 @@ function seedServices () {
     mockCreateMqttTransport.mockReturnValue(transport)
     mockCreateTeamChannelSubscriber.mockReturnValue(teamChannelSubscriber)
     mockCreateLiveStatusSubscriber.mockReturnValue(liveStatusSubscriber)
+    mockCreateApplicationsSubscriber.mockReturnValue(applicationsSubscriber)
 
-    return { automationsService, bootstrapService, postMessageService, mqttService, teamChannelSubscriber, liveStatusSubscriber, transport }
+    return { automationsService, bootstrapService, postMessageService, mqttService, teamChannelSubscriber, liveStatusSubscriber, applicationsSubscriber, transport }
 }
 
 describe('AppOrchestrator', () => {
@@ -154,7 +163,7 @@ describe('AppOrchestrator', () => {
             mqtt: null,
             automations: null
         })
-        expect(orchestrator.$subscribers).toEqual({ teamChannel: null, liveStatus: null })
+        expect(orchestrator.$subscribers).toEqual({ teamChannel: null, liveStatus: null, applications: null })
         expect(orchestrator.$app).toBeNull()
         expect(orchestrator.$router).toBeNull()
         expect(orchestrator.$cleanupRegistered).toBe(false)

From 815f5906239e6395578ea9801fb540400595527b Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Mon, 3 Aug 2026 11:02:55 -0700
Subject: [PATCH 5/9] Migrate single-application views to the data-farm store,
 remove the Application mixin, add a detail-page skeleton loader

---
 .../src/composables/useActiveApplication.ts   |  36 ++++++
 frontend/src/mixins/Application.js            | 113 ------------------
 .../application/CreateInstanceMultiStep.vue   |  13 +-
 .../components/ApplicationDetailSkeleton.vue  |  96 +++++++++++++++
 .../src/pages/application/createInstance.vue  |  13 +-
 frontend/src/pages/application/index.vue      |  87 ++++++++++++--
 frontend/src/stores/context.js                |  17 +--
 frontend/src/stores/data-farm-applications.ts |  24 +++-
 .../stores/data-farm-applications.spec.js     |  40 +++++++
 9 files changed, 299 insertions(+), 140 deletions(-)
 create mode 100644 frontend/src/composables/useActiveApplication.ts
 delete mode 100644 frontend/src/mixins/Application.js
 create mode 100644 frontend/src/pages/application/components/ApplicationDetailSkeleton.vue

diff --git a/frontend/src/composables/useActiveApplication.ts b/frontend/src/composables/useActiveApplication.ts
new file mode 100644
index 0000000000..2acbacc72f
--- /dev/null
+++ b/frontend/src/composables/useActiveApplication.ts
@@ -0,0 +1,36 @@
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+
+import applicationApi from '@/api/application.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
+import type { ApplicationSummary } from '@/types'
+
+export function useActiveApplication () {
+    const router = useRouter()
+    const applicationsStore = useDataFarmApplicationsStore()
+    const { activeApplication } = storeToRefs(applicationsStore)
+
+    async function loadActiveApplication (id: string): Promise<ApplicationSummary | null> {
+        if (!id) return null
+        try {
+            const application = await applicationApi.getApplication(id)
+            applicationsStore.setActiveApplication(application)
+            return application
+        } catch {
+            const current = router.currentRoute.value
+            router.push({
+                name: 'page-not-found',
+                params: { pathMatch: current.path.substring(1).split('/') },
+                query: current.query,
+                hash: current.hash
+            })
+            return null
+        }
+    }
+
+    function clearActiveApplication (): void {
+        applicationsStore.setActiveApplication(null)
+    }
+
+    return { application: activeApplication, loadActiveApplication, clearActiveApplication }
+}
diff --git a/frontend/src/mixins/Application.js b/frontend/src/mixins/Application.js
deleted file mode 100644
index 107112b806..0000000000
--- a/frontend/src/mixins/Application.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { mapActions } from 'pinia'
-
-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 () {
-        return {
-            application: {},
-            applicationInstances: new Map(),
-            loading: {
-                deleting: false,
-                suspend: false
-            }
-        }
-    },
-    computed: {
-        isLoading () {
-            return this.loading.deleting || this.loading.suspend
-        },
-        instancesArray () {
-            if (this.applicationInstances.size === 0) {
-                return []
-            }
-            return Array.from(this.applicationInstances.values()).filter(el => el)
-        }
-    },
-    watch: {
-        application (application) {
-            if (application) {
-                this.setContextualApplication(application)
-            }
-        }
-    },
-    methods: {
-        ...mapActions(useContextStore, { setContextualApplication: 'setApplication' }),
-        ...mapActions(useDataFarmApplicationsStore, { deleteApplicationEntity: 'deleteApplication' }),
-        async updateApplication () {
-            const applicationId = this.$route.params.id
-
-            // See https://github.com/FlowFuse/flowfuse/issues/2929
-            if (!applicationId) {
-                return
-            }
-
-            try {
-                this.applicationInstances = []
-                this.application = await ApplicationApi.getApplication(applicationId)
-                // Check to see if we have the right team loaded
-                if (this.team?.slug !== this.application.team.slug) {
-                    return
-                }
-                const instancesPromise = ApplicationApi.getApplicationInstances(applicationId) // To-do needs to be enriched with instance state
-                const applicationInstances = await instancesPromise
-
-                this.applicationInstances = new Map()
-                applicationInstances.forEach(instance => {
-                    this.applicationInstances.set(instance.id, instance)
-                })
-
-                // Not waited for, as loading status is slightly slower
-                ApplicationApi
-                    .getApplicationInstancesStatuses(applicationId)
-                    .then((instanceStatuses) => {
-                        instanceStatuses.forEach((instanceStatus) => {
-                            this.applicationInstances.set(instanceStatus.id, {
-                                ...this.applicationInstances.get(instanceStatus.id),
-                                ...instanceStatus
-                            })
-                        })
-                    })
-                    .catch((err) => {
-                        console.error(err)
-                    })
-            } catch (err) {
-                this.$router.push({
-                    name: 'page-not-found',
-                    params: { pathMatch: this.$router.currentRoute.value.path.substring(1).split('/') },
-                    // preserve existing query and hash if any
-                    query: this.$router.currentRoute.value.query,
-                    hash: this.$router.currentRoute.value.hash
-                })
-            }
-        },
-        async deleteApplication () {
-            this.loading.deleting = true
-
-            try {
-                await this.deleteApplicationEntity(this.application.id, this.team.id)
-                await useContextStore().refreshTeam()
-                this.$router.push({ name: 'Applications' })
-                alerts.emit('Application successfully deleted.', 'confirmation')
-            } catch (err) {
-                if (err.response.data.error) {
-                    alerts.emit(`Application failed to delete: ${err.response.data.error}`, 'warning', 10000)
-                } else {
-                    alerts.emit('Application failed to delete', 'warning')
-                }
-            }
-
-            this.loading.deleting = false
-        }
-    },
-    async created () {
-
-    },
-    beforeUnmount () {
-        this.setContextualApplication(null)
-    }
-}
diff --git a/frontend/src/pages/application/CreateInstanceMultiStep.vue b/frontend/src/pages/application/CreateInstanceMultiStep.vue
index 505c67723c..92ce4cac1f 100644
--- a/frontend/src/pages/application/CreateInstanceMultiStep.vue
+++ b/frontend/src/pages/application/CreateInstanceMultiStep.vue
@@ -45,8 +45,8 @@ import { mapState } from 'pinia'
 import MultiStepInstanceForm from '../../components/multi-step-forms/instance/MultiStepInstanceForm.vue'
 
 import { getTeamProperty } from '../../composables/TeamProperties.js'
-import applicationMixin from '../../mixins/Application.js'
 
+import { useActiveApplication } from '@/composables/useActiveApplication'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
@@ -55,9 +55,13 @@ export default {
     components: {
         MultiStepInstanceForm
     },
-    mixins: [applicationMixin],
     inheritAttrs: false,
     emits: ['application-updated'],
+    setup () {
+        const { application, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+
+        return { application, loadActiveApplication, clearActiveApplication }
+    },
     data () {
         return {
             loading: false,
@@ -107,7 +111,10 @@ export default {
             })
         }
 
-        await this.updateApplication()
+        await this.loadActiveApplication(this.$route.params.id)
+    },
+    beforeUnmount () {
+        this.clearActiveApplication()
     },
     methods: {
         async onInstanceCreated () {
diff --git a/frontend/src/pages/application/components/ApplicationDetailSkeleton.vue b/frontend/src/pages/application/components/ApplicationDetailSkeleton.vue
new file mode 100644
index 0000000000..529cafd4ca
--- /dev/null
+++ b/frontend/src/pages/application/components/ApplicationDetailSkeleton.vue
@@ -0,0 +1,96 @@
+<template>
+    <div class="ff-application-detail-skeleton" data-el="application-detail-skeleton">
+        <div class="ff-application-detail-skeleton--header">
+            <SkeletonBlock width="240px" height="20px" />
+            <div class="ff-application-detail-skeleton--tabs">
+                <SkeletonBlock v-for="n in tabCount" :key="n" width="88px" height="18px" />
+            </div>
+        </div>
+        <div class="ff-application-detail-skeleton--body">
+            <div class="ff-application-detail-skeleton--section-head">
+                <div class="ff-application-detail-skeleton--section-title">
+                    <SkeletonBlock width="180px" height="22px" />
+                    <SkeletonBlock width="340px" height="14px" />
+                </div>
+                <SkeletonBlock width="130px" height="36px" radius="6px" />
+            </div>
+            <SkeletonBlock height="40px" radius="6px" />
+            <div class="ff-application-detail-skeleton--table">
+                <SkeletonBlock v-for="n in rowCount" :key="n" height="52px" radius="4px" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import SkeletonBlock from '@/components/SkeletonBlock.vue'
+
+defineProps({
+    tabCount: {
+        type: Number,
+        default: 10
+    },
+    rowCount: {
+        type: Number,
+        default: 6
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.ff-application-detail-skeleton {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &--header {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 16px 12px;
+        border-bottom: 1px solid var(--ff-color-border-strong);
+
+        @media (min-width: 768px) {
+            padding-left: 24px;
+            padding-right: 24px;
+        }
+    }
+
+    &--tabs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 24px;
+    }
+
+    &--body {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 12px;
+
+        @media (min-width: 768px) {
+            padding: 24px;
+        }
+    }
+
+    &--section-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 16px;
+    }
+
+    &--section-title {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    &--table {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: 4px;
+    }
+}
+</style>
diff --git a/frontend/src/pages/application/createInstance.vue b/frontend/src/pages/application/createInstance.vue
index 084b57fde9..8930858d15 100644
--- a/frontend/src/pages/application/createInstance.vue
+++ b/frontend/src/pages/application/createInstance.vue
@@ -40,10 +40,10 @@ import { mapState } from 'pinia'
 
 import instanceApi from '../../api/instances.js'
 
-import applicationMixin from '../../mixins/Application.js'
 import Alerts from '../../services/alerts.js'
 import InstanceForm from '../instance/components/InstanceForm.vue'
 
+import { useActiveApplication } from '@/composables/useActiveApplication'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
@@ -52,7 +52,6 @@ export default {
     components: {
         InstanceForm
     },
-    mixins: [applicationMixin],
     inheritAttrs: false,
     props: {
         sourceInstanceId: {
@@ -61,6 +60,11 @@ export default {
         }
     },
     emits: ['application-updated'],
+    setup () {
+        const { application, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+
+        return { application, loadActiveApplication, clearActiveApplication }
+    },
     data () {
         return {
             icons: {
@@ -83,7 +87,7 @@ export default {
         }
     },
     async created () {
-        await this.updateApplication()
+        await this.loadActiveApplication(this.$route.params.id)
 
         if (this.sourceInstanceId) {
             instanceApi.getInstance(this.sourceInstanceId).then(instance => {
@@ -96,6 +100,9 @@ export default {
     async mounted () {
         this.mounted = true
     },
+    beforeUnmount () {
+        this.clearActiveApplication()
+    },
     methods: {
         async handleFormSubmit (formData, copyParts) {
             this.loading = true
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index 14d34abbf8..7e9d5ff0b0 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -1,8 +1,8 @@
 <template>
     <ff-loading v-if="loading.deleting" message="Deleting Application..." />
     <ff-loading v-else-if="loading.suspend" message="Suspending Application..." />
-    <main v-else-if="!application?.id">
-        <ff-loading message="Loading Application..." />
+    <main v-else-if="!application?.id" class="ff-with-status-header flex flex-col h-full w-full overflow-auto" data-el="application-page-loading">
+        <ApplicationDetailSkeleton />
     </main>
     <main v-else class="ff-with-status-header flex flex-col h-full w-full overflow-auto" data-el="application-page">
         <ConfirmApplicationDeleteDialog ref="confirmApplicationDeleteDialog" @confirm="deleteApplication" />
@@ -17,7 +17,7 @@
                 :application="application"
                 :instances="instancesArray"
                 :is-visiting-admin="isVisitingAdmin"
-                @application-updated="updateApplication"
+                @application-updated="loadApplicationData"
                 @application-delete="showConfirmDeleteApplicationDialog"
                 @instance-start="instanceStart"
                 @instance-restart="instanceRestart"
@@ -38,35 +38,64 @@ import { mapState } from 'pinia'
 import InstanceStatusPolling from '../../components/InstanceStatusPolling.vue'
 import usePermissions from '../../composables/Permissions.js'
 
-import applicationMixin from '../../mixins/Application.js'
 import instanceActionsMixin from '../../mixins/InstanceActions.js'
 import { applyLiveState } from '../../utils/applyLiveState.js'
 
 import ConfirmInstanceDeleteDialog from '../instance/Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
 
 import ConfirmApplicationDeleteDialog from './Settings/dialogs/ConfirmApplicationDeleteDialog.vue'
+import ApplicationDetailSkeleton from './components/ApplicationDetailSkeleton.vue'
 
+import applicationApi from '@/api/application.js'
+import { useActiveApplication } from '@/composables/useActiveApplication'
+import alerts from '@/services/alerts.js'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 import { useLiveStatusStore } from '@/stores/live-status'
 
 export default {
     name: 'ApplicationPage',
     components: {
+        ApplicationDetailSkeleton,
         ConfirmApplicationDeleteDialog,
         ConfirmInstanceDeleteDialog,
         InstanceStatusPolling
     },
-    mixins: [applicationMixin, instanceActionsMixin],
+    mixins: [instanceActionsMixin],
     setup () {
         const { hasPermission, isVisitingAdmin } = usePermissions()
+        const { application, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+        const applicationsStore = useDataFarmApplicationsStore()
 
-        return { hasPermission, isVisitingAdmin }
+        return {
+            hasPermission,
+            isVisitingAdmin,
+            application,
+            loadActiveApplication,
+            clearActiveApplication,
+            deleteApplicationEntity: applicationsStore.deleteApplication
+        }
+    },
+    data () {
+        return {
+            applicationInstances: new Map(),
+            loading: {
+                deleting: false,
+                suspend: false
+            }
+        }
     },
     computed: {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
         ...mapState(useLiveStatusStore, { liveInstanceMetadata: 'instanceMetadata', statusChannelLive: 'live' }),
+        instancesArray () {
+            if (this.applicationInstances.size === 0) {
+                return []
+            }
+            return Array.from(this.applicationInstances.values()).filter(el => el)
+        },
         navigation () {
             const routes = [
                 {
@@ -141,12 +170,56 @@ export default {
     },
     watch: {
         '$route.params': {
-            handler: 'updateApplication',
+            handler: 'loadApplicationData',
             immediate: true
         },
         liveInstanceMetadata: { handler: 'applyLiveStatus', deep: true }
     },
+    beforeUnmount () {
+        this.clearActiveApplication()
+    },
     methods: {
+        async loadApplicationData () {
+            const applicationId = this.$route.params.id
+            if (!applicationId) {
+                return
+            }
+            this.applicationInstances = new Map()
+            const application = await this.loadActiveApplication(applicationId)
+            if (!application) {
+                return
+            }
+            if (this.team?.slug !== application.team?.slug) {
+                return
+            }
+            const instances = await applicationApi.getApplicationInstances(applicationId)
+            const nextInstances = new Map()
+            instances.forEach(instance => nextInstances.set(instance.id, instance))
+            this.applicationInstances = nextInstances
+            applicationApi.getApplicationInstancesStatuses(applicationId)
+                .then(statuses => {
+                    statuses.forEach(status => {
+                        this.applicationInstances.set(status.id, { ...this.applicationInstances.get(status.id), ...status })
+                    })
+                })
+                .catch(err => console.error(err))
+        },
+        async deleteApplication () {
+            this.loading.deleting = true
+            try {
+                await this.deleteApplicationEntity(this.application.id, this.team.id)
+                await useContextStore().refreshTeam()
+                this.$router.push({ name: 'Applications' })
+                alerts.emit('Application successfully deleted.', 'confirmation')
+            } catch (err) {
+                if (err.response?.data?.error) {
+                    alerts.emit(`Application failed to delete: ${err.response.data.error}`, 'warning', 10000)
+                } else {
+                    alerts.emit('Application failed to delete', 'warning')
+                }
+            }
+            this.loading.deleting = false
+        },
         applyLiveStatus () {
             for (const id of this.applicationInstances.keys()) {
                 const meta = this.liveInstanceMetadata[id]
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index 2ed725b3a5..924df6ec81 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -7,19 +7,22 @@ import { Roles } from '../utils/roles.js'
 
 import { useAccountAuthStore } from './account-auth.js'
 import { useAccountSettingsStore } from './account-settings.js'
+import { useDataFarmApplicationsStore } from './data-farm-applications'
 import { useProductAssistantStore } from './product-assistant.js'
 import { useProductExpertStore } from './product-expert.js'
 
 export const useContextStore = defineStore('context', {
     state: () => ({
         route: null,
-        application: null,
         instance: null,
         device: null,
         team: null,
         teamMembership: null
     }),
     getters: {
+        application () {
+            return useDataFarmApplicationsStore().activeApplication
+        },
         isImmersive (state) {
             return state.route?.meta?.layout === 'immersive'
         },
@@ -93,7 +96,7 @@ export const useContextStore = defineStore('context', {
                 teamSlug: state.team?.slug || null,
                 instanceId: state.instance ? state.instance.id : null,
                 deviceId: state.device ? state.device.id : null,
-                applicationId: state.application ? state.application.id : null,
+                applicationId: this.application ? this.application.id : null,
                 deviceOwnerType: state.device?.ownerType ?? null,
                 isTrialAccount: this.isTrialAccount,
                 pageName: state.route.name,
@@ -131,15 +134,7 @@ export const useContextStore = defineStore('context', {
             this.setApplication(device?.application ?? null)
         },
         setApplication (application) {
-            if (application) {
-                this.application = {
-                    id: application.id,
-                    name: application.name,
-                    description: application.description,
-                }
-            } else {
-                this.application = null
-            }
+            useDataFarmApplicationsStore().setActiveApplication(application)
         },
         clearInstance () { this.setInstance(null) },
         setTeam (team) {
diff --git a/frontend/src/stores/data-farm-applications.ts b/frontend/src/stores/data-farm-applications.ts
index 3afc4ac662..d08e0c519b 100644
--- a/frontend/src/stores/data-farm-applications.ts
+++ b/frontend/src/stores/data-farm-applications.ts
@@ -1,9 +1,8 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import applicationApi from '../api/application.js'
-import teamApi from '../api/team.js'
-
+import applicationApi from '@/api/application.js'
+import teamApi from '@/api/team.js'
 import type { ApplicationSummary } from '@/types'
 
 export const useDataFarmApplicationsStore = defineStore('data-farm-applications', () => {
@@ -11,10 +10,15 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
     const teamApplicationIds = ref<string[]>([])
     const loadedTeamId = ref<string | null>(null)
     const isLoadingTeamApplications = ref(false)
+    const activeApplicationId = ref<string | null>(null)
 
     const teamApplications = computed(() => teamApplicationIds.value
         .map(id => applicationsById.value[id]))
 
+    const activeApplication = computed(() => (activeApplicationId.value
+        ? applicationsById.value[activeApplicationId.value] ?? null
+        : null))
+
     function upsertApplication (application: ApplicationSummary): void {
         if (!application?.id) return
         const existing = applicationsById.value[application.id]
@@ -72,6 +76,16 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         removeApplication(id)
     }
 
+    function setActiveApplication (application: ApplicationSummary | null): void {
+        if (!application?.id) {
+            activeApplicationId.value = null
+            return
+        }
+        const existing = applicationsById.value[application.id]
+        applicationsById.value[application.id] = { ...existing, ...application }
+        activeApplicationId.value = application.id
+    }
+
     function applyRealtimeEvent (event: { id?: string, action?: string, data?: ApplicationSummary }): void {
         if (!event?.id || !event.action) return
         if (event.action === 'deleted') {
@@ -86,6 +100,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         teamApplicationIds.value = []
         loadedTeamId.value = null
         isLoadingTeamApplications.value = false
+        activeApplicationId.value = null
     }
 
     return {
@@ -93,13 +108,16 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         teamApplicationIds,
         loadedTeamId,
         isLoadingTeamApplications,
+        activeApplicationId,
         teamApplications,
+        activeApplication,
         upsertApplication,
         removeApplication,
         ensureTeamApplicationsLoaded,
         createApplication,
         updateApplication,
         deleteApplication,
+        setActiveApplication,
         applyRealtimeEvent,
         reset
     }
diff --git a/test/unit/frontend/stores/data-farm-applications.spec.js b/test/unit/frontend/stores/data-farm-applications.spec.js
index 8d144926e2..3424f1ed6d 100644
--- a/test/unit/frontend/stores/data-farm-applications.spec.js
+++ b/test/unit/frontend/stores/data-farm-applications.spec.js
@@ -196,11 +196,50 @@ describe('data-farm-applications store', () => {
         })
     })
 
+    describe('setActiveApplication / activeApplication', () => {
+        it('returns null when no active application is set', () => {
+            const store = useDataFarmApplicationsStore()
+            expect(store.activeApplication).toBe(null)
+        })
+
+        it('sets the active application and caches it WITHOUT adding it to the team list', () => {
+            const store = useDataFarmApplicationsStore()
+
+            store.setActiveApplication({ id: 'a1', name: 'Detail' })
+
+            expect(store.activeApplication).toEqual({ id: 'a1', name: 'Detail' })
+            // the active app is not a list member — viewing it must not pollute teamApplications
+            expect(store.teamApplicationIds).toEqual([])
+            expect(store.teamApplications).toEqual([])
+        })
+
+        it('merges into an existing list entry without duplicating its id', async () => {
+            vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({
+                applications: [{ id: 'a1', name: 'One', instanceCount: 2 }]
+            })
+            const store = useDataFarmApplicationsStore()
+            await store.ensureTeamApplicationsLoaded('team-1')
+
+            store.setActiveApplication({ id: 'a1', name: 'One', description: 'd' })
+
+            expect(store.activeApplication).toEqual({ id: 'a1', name: 'One', description: 'd', instanceCount: 2 })
+            expect(store.teamApplicationIds).toEqual(['a1'])
+        })
+
+        it('clears the active application on null', () => {
+            const store = useDataFarmApplicationsStore()
+            store.setActiveApplication({ id: 'a1', name: 'Detail' })
+            store.setActiveApplication(null)
+            expect(store.activeApplication).toBe(null)
+        })
+    })
+
     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.setActiveApplication({ id: 'a1' })
 
             store.reset()
 
@@ -208,6 +247,7 @@ describe('data-farm-applications store', () => {
             expect(store.teamApplicationIds).toEqual([])
             expect(store.loadedTeamId).toBe(null)
             expect(store.isLoadingTeamApplications).toBe(false)
+            expect(store.activeApplication).toBe(null)
         })
     })
 })

From ea59d77cb7b38e2872b7f3610ea23c5ab119bb7c Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Mon, 3 Aug 2026 12:32:04 -0700
Subject: [PATCH 6/9] Drive single-application view loaders off the store's
 isLoadingActiveApplication flag

---
 .../src/composables/useActiveApplication.ts   |  9 +++----
 .../application/CreateInstanceMultiStep.vue   |  6 ++---
 .../src/pages/application/createInstance.vue  |  6 ++---
 frontend/src/pages/application/index.vue      |  5 ++--
 frontend/src/stores/data-farm-applications.ts | 16 +++++++++++++
 .../stores/data-farm-applications.spec.js     | 24 +++++++++++++++++++
 6 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/frontend/src/composables/useActiveApplication.ts b/frontend/src/composables/useActiveApplication.ts
index 2acbacc72f..eda5def706 100644
--- a/frontend/src/composables/useActiveApplication.ts
+++ b/frontend/src/composables/useActiveApplication.ts
@@ -1,21 +1,18 @@
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
 
-import applicationApi from '@/api/application.js'
 import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 import type { ApplicationSummary } from '@/types'
 
 export function useActiveApplication () {
     const router = useRouter()
     const applicationsStore = useDataFarmApplicationsStore()
-    const { activeApplication } = storeToRefs(applicationsStore)
+    const { activeApplication, isLoadingActiveApplication } = storeToRefs(applicationsStore)
 
     async function loadActiveApplication (id: string): Promise<ApplicationSummary | null> {
         if (!id) return null
         try {
-            const application = await applicationApi.getApplication(id)
-            applicationsStore.setActiveApplication(application)
-            return application
+            return await applicationsStore.loadActiveApplication(id)
         } catch {
             const current = router.currentRoute.value
             router.push({
@@ -32,5 +29,5 @@ export function useActiveApplication () {
         applicationsStore.setActiveApplication(null)
     }
 
-    return { application: activeApplication, loadActiveApplication, clearActiveApplication }
+    return { application: activeApplication, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication }
 }
diff --git a/frontend/src/pages/application/CreateInstanceMultiStep.vue b/frontend/src/pages/application/CreateInstanceMultiStep.vue
index 92ce4cac1f..7ca93f123d 100644
--- a/frontend/src/pages/application/CreateInstanceMultiStep.vue
+++ b/frontend/src/pages/application/CreateInstanceMultiStep.vue
@@ -58,9 +58,9 @@ export default {
     inheritAttrs: false,
     emits: ['application-updated'],
     setup () {
-        const { application, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+        const { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication } = useActiveApplication()
 
-        return { application, loadActiveApplication, clearActiveApplication }
+        return { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication }
     },
     data () {
         return {
@@ -79,7 +79,7 @@ export default {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
         isLoading () {
-            return this.loading || !this.team
+            return this.loading || !this.team || this.isLoadingActiveApplication
         }
     },
     async created () {
diff --git a/frontend/src/pages/application/createInstance.vue b/frontend/src/pages/application/createInstance.vue
index 8930858d15..0b75c25436 100644
--- a/frontend/src/pages/application/createInstance.vue
+++ b/frontend/src/pages/application/createInstance.vue
@@ -61,9 +61,9 @@ export default {
     },
     emits: ['application-updated'],
     setup () {
-        const { application, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+        const { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication } = useActiveApplication()
 
-        return { application, loadActiveApplication, clearActiveApplication }
+        return { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication }
     },
     data () {
         return {
@@ -83,7 +83,7 @@ export default {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
         isLoading () {
-            return this.loading || !this.team
+            return this.loading || !this.team || this.isLoadingActiveApplication
         }
     },
     async created () {
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index 7e9d5ff0b0..3a168ebd06 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -1,7 +1,7 @@
 <template>
     <ff-loading v-if="loading.deleting" message="Deleting Application..." />
     <ff-loading v-else-if="loading.suspend" message="Suspending Application..." />
-    <main v-else-if="!application?.id" class="ff-with-status-header flex flex-col h-full w-full overflow-auto" data-el="application-page-loading">
+    <main v-else-if="isLoadingActiveApplication || !application?.id" class="ff-with-status-header flex flex-col h-full w-full overflow-auto" data-el="application-page-loading">
         <ApplicationDetailSkeleton />
     </main>
     <main v-else class="ff-with-status-header flex flex-col h-full w-full overflow-auto" data-el="application-page">
@@ -65,13 +65,14 @@ export default {
     mixins: [instanceActionsMixin],
     setup () {
         const { hasPermission, isVisitingAdmin } = usePermissions()
-        const { application, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+        const { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication } = useActiveApplication()
         const applicationsStore = useDataFarmApplicationsStore()
 
         return {
             hasPermission,
             isVisitingAdmin,
             application,
+            isLoadingActiveApplication,
             loadActiveApplication,
             clearActiveApplication,
             deleteApplicationEntity: applicationsStore.deleteApplication
diff --git a/frontend/src/stores/data-farm-applications.ts b/frontend/src/stores/data-farm-applications.ts
index d08e0c519b..4c4e1f67b1 100644
--- a/frontend/src/stores/data-farm-applications.ts
+++ b/frontend/src/stores/data-farm-applications.ts
@@ -11,6 +11,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
     const loadedTeamId = ref<string | null>(null)
     const isLoadingTeamApplications = ref(false)
     const activeApplicationId = ref<string | null>(null)
+    const isLoadingActiveApplication = ref(false)
 
     const teamApplications = computed(() => teamApplicationIds.value
         .map(id => applicationsById.value[id]))
@@ -86,6 +87,18 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         activeApplicationId.value = application.id
     }
 
+    async function loadActiveApplication (id: string): Promise<ApplicationSummary | null> {
+        if (!id) return null
+        isLoadingActiveApplication.value = true
+        try {
+            const application = await applicationApi.getApplication(id)
+            setActiveApplication(application)
+            return application
+        } finally {
+            isLoadingActiveApplication.value = false
+        }
+    }
+
     function applyRealtimeEvent (event: { id?: string, action?: string, data?: ApplicationSummary }): void {
         if (!event?.id || !event.action) return
         if (event.action === 'deleted') {
@@ -101,6 +114,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         loadedTeamId.value = null
         isLoadingTeamApplications.value = false
         activeApplicationId.value = null
+        isLoadingActiveApplication.value = false
     }
 
     return {
@@ -109,6 +123,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         loadedTeamId,
         isLoadingTeamApplications,
         activeApplicationId,
+        isLoadingActiveApplication,
         teamApplications,
         activeApplication,
         upsertApplication,
@@ -118,6 +133,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         updateApplication,
         deleteApplication,
         setActiveApplication,
+        loadActiveApplication,
         applyRealtimeEvent,
         reset
     }
diff --git a/test/unit/frontend/stores/data-farm-applications.spec.js b/test/unit/frontend/stores/data-farm-applications.spec.js
index 3424f1ed6d..7842b40b5f 100644
--- a/test/unit/frontend/stores/data-farm-applications.spec.js
+++ b/test/unit/frontend/stores/data-farm-applications.spec.js
@@ -196,6 +196,30 @@ describe('data-farm-applications store', () => {
         })
     })
 
+    describe('loadActiveApplication', () => {
+        it('fetches the application, sets it active, and returns it', async () => {
+            vi.spyOn(applicationApi, 'getApplication').mockResolvedValue({ id: 'a1', name: 'Detail' })
+            const store = useDataFarmApplicationsStore()
+
+            const application = await store.loadActiveApplication('a1')
+
+            expect(applicationApi.getApplication).toHaveBeenCalledWith('a1')
+            expect(application).toEqual({ id: 'a1', name: 'Detail' })
+            expect(store.activeApplication).toEqual({ id: 'a1', name: 'Detail' })
+            expect(store.isLoadingActiveApplication).toBe(false)
+            // the active app is cached but not a member of the team list
+            expect(store.teamApplicationIds).toEqual([])
+        })
+
+        it('clears the loading flag even when the fetch rejects', async () => {
+            vi.spyOn(applicationApi, 'getApplication').mockRejectedValue(new Error('boom'))
+            const store = useDataFarmApplicationsStore()
+
+            await expect(store.loadActiveApplication('a1')).rejects.toThrow('boom')
+            expect(store.isLoadingActiveApplication).toBe(false)
+        })
+    })
+
     describe('setActiveApplication / activeApplication', () => {
         it('returns null when no active application is set', () => {
             const store = useDataFarmApplicationsStore()

From e7635c45bc85703f39e7c7e174baa05fc1d3e6db Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Mon, 3 Aug 2026 13:30:09 -0700
Subject: [PATCH 7/9] Update import paths to fix cypress

---
 frontend/src/pages/application/CreateInstanceMultiStep.vue | 3 ++-
 frontend/src/pages/application/createInstance.vue          | 2 +-
 frontend/src/pages/application/index.vue                   | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/application/CreateInstanceMultiStep.vue b/frontend/src/pages/application/CreateInstanceMultiStep.vue
index 7ca93f123d..14d4dfe9a6 100644
--- a/frontend/src/pages/application/CreateInstanceMultiStep.vue
+++ b/frontend/src/pages/application/CreateInstanceMultiStep.vue
@@ -46,7 +46,8 @@ import MultiStepInstanceForm from '../../components/multi-step-forms/instance/Mu
 
 import { getTeamProperty } from '../../composables/TeamProperties.js'
 
-import { useActiveApplication } from '@/composables/useActiveApplication'
+import { useActiveApplication } from '../../composables/useActiveApplication'
+
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
diff --git a/frontend/src/pages/application/createInstance.vue b/frontend/src/pages/application/createInstance.vue
index 0b75c25436..92adc24bef 100644
--- a/frontend/src/pages/application/createInstance.vue
+++ b/frontend/src/pages/application/createInstance.vue
@@ -40,10 +40,10 @@ import { mapState } from 'pinia'
 
 import instanceApi from '../../api/instances.js'
 
+import { useActiveApplication } from '../../composables/useActiveApplication'
 import Alerts from '../../services/alerts.js'
 import InstanceForm from '../instance/components/InstanceForm.vue'
 
-import { useActiveApplication } from '@/composables/useActiveApplication'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index 3a168ebd06..20aeb06597 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -35,10 +35,13 @@
 <script>
 import { mapState } from 'pinia'
 
+import applicationApi from '../../api/application.js'
 import InstanceStatusPolling from '../../components/InstanceStatusPolling.vue'
 import usePermissions from '../../composables/Permissions.js'
 
+import { useActiveApplication } from '../../composables/useActiveApplication'
 import instanceActionsMixin from '../../mixins/InstanceActions.js'
+import alerts from '../../services/alerts.js'
 import { applyLiveState } from '../../utils/applyLiveState.js'
 
 import ConfirmInstanceDeleteDialog from '../instance/Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
@@ -46,9 +49,6 @@ import ConfirmInstanceDeleteDialog from '../instance/Settings/dialogs/ConfirmIns
 import ConfirmApplicationDeleteDialog from './Settings/dialogs/ConfirmApplicationDeleteDialog.vue'
 import ApplicationDetailSkeleton from './components/ApplicationDetailSkeleton.vue'
 
-import applicationApi from '@/api/application.js'
-import { useActiveApplication } from '@/composables/useActiveApplication'
-import alerts from '@/services/alerts.js'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'

From 1a23c3dc2f2363a2f8ba8b496fb8344f6cbeb0ab Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 5 Aug 2026 06:35:28 -0700
Subject: [PATCH 8/9] Fix issues with null check for applicatios and stuck on
 loader for delete

---
 frontend/src/pages/application/createInstance.vue | 2 +-
 frontend/src/pages/application/index.vue          | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/application/createInstance.vue b/frontend/src/pages/application/createInstance.vue
index 92adc24bef..719a928a48 100644
--- a/frontend/src/pages/application/createInstance.vue
+++ b/frontend/src/pages/application/createInstance.vue
@@ -4,7 +4,7 @@
             <ff-page-header title="Instances">
                 <template #custom-breadcrumbs>
                     <ff-nav-breadcrumb v-if="team" :to="{name: 'Applications', params: {team_slug: team.slug}}">Applications</ff-nav-breadcrumb>
-                    <ff-nav-breadcrumb v-if="team" :to="{name: 'Application', params: {id: application.id}}">
+                    <ff-nav-breadcrumb v-if="team && application" :to="{name: 'Application', params: {id: application.id}}">
                         {{ application.name }}
                     </ff-nav-breadcrumb>
                     <ff-nav-breadcrumb>
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index 20aeb06597..c54ef3da9f 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -174,6 +174,12 @@ export default {
             handler: 'loadApplicationData',
             immediate: true
         },
+        application (application, previous) {
+            if (previous && !application && !this.loading.deleting && this.$route.params.id) {
+                alerts.emit('This application has been deleted.', 'warning')
+                this.$router.push({ name: 'Applications', params: { team_slug: this.team?.slug } })
+            }
+        },
         liveInstanceMetadata: { handler: 'applyLiveStatus', deep: true }
     },
     beforeUnmount () {

From 04dd47f120bbe826a6535561837bce76be5852e2 Mon Sep 17 00:00:00 2001
From: Noley Holland <63617269+n-lark@users.noreply.github.com>
Date: Fri, 7 Aug 2026 06:09:32 -0700
Subject: [PATCH 9/9] [8053] Data Farm > Applications 5 - UXStore Page Loader
 (#8063)

---
 frontend/src/components/SkeletonBlock.vue     | 29 ------
 .../src/composables/useActiveApplication.ts   |  8 +-
 frontend/src/layouts/Page.vue                 | 16 +++-
 .../application/CreateInstanceMultiStep.vue   | 13 ++-
 .../components/ApplicationDetailSkeleton.vue  | 96 -------------------
 .../src/pages/application/createInstance.vue  | 11 ++-
 frontend/src/pages/application/index.vue      | 70 ++++++++------
 .../components/ApplicationsListSkeleton.vue   | 77 ---------------
 .../src/pages/team/Applications/index.vue     | 46 +++++----
 frontend/src/stores/data-farm-applications.ts | 77 +++++++--------
 frontend/src/stores/ux-loading.js             |  8 +-
 .../composables/useActiveApplication.spec.js  | 66 +++++++++++++
 .../stores/data-farm-applications.spec.js     | 94 ++++++++++++------
 test/unit/frontend/stores/ux-loading.spec.js  | 34 +++++++
 14 files changed, 302 insertions(+), 343 deletions(-)
 delete mode 100644 frontend/src/components/SkeletonBlock.vue
 delete mode 100644 frontend/src/pages/application/components/ApplicationDetailSkeleton.vue
 delete mode 100644 frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue
 create mode 100644 test/unit/frontend/composables/useActiveApplication.spec.js

diff --git a/frontend/src/components/SkeletonBlock.vue b/frontend/src/components/SkeletonBlock.vue
deleted file mode 100644
index 89ab8d7c04..0000000000
--- a/frontend/src/components/SkeletonBlock.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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/composables/useActiveApplication.ts b/frontend/src/composables/useActiveApplication.ts
index eda5def706..1f7cad7209 100644
--- a/frontend/src/composables/useActiveApplication.ts
+++ b/frontend/src/composables/useActiveApplication.ts
@@ -1,4 +1,3 @@
-import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
 
 import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
@@ -7,7 +6,6 @@ import type { ApplicationSummary } from '@/types'
 export function useActiveApplication () {
     const router = useRouter()
     const applicationsStore = useDataFarmApplicationsStore()
-    const { activeApplication, isLoadingActiveApplication } = storeToRefs(applicationsStore)
 
     async function loadActiveApplication (id: string): Promise<ApplicationSummary | null> {
         if (!id) return null
@@ -25,9 +23,5 @@ export function useActiveApplication () {
         }
     }
 
-    function clearActiveApplication (): void {
-        applicationsStore.setActiveApplication(null)
-    }
-
-    return { application: activeApplication, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication }
+    return { loadActiveApplication }
 }
diff --git a/frontend/src/layouts/Page.vue b/frontend/src/layouts/Page.vue
index 6c9b758218..4baa4c85f0 100644
--- a/frontend/src/layouts/Page.vue
+++ b/frontend/src/layouts/Page.vue
@@ -1,11 +1,18 @@
 <template>
-    <slot name="header" />
-    <main :class="mainClasses">
-        <slot name="default" />
-    </main>
+    <div v-if="!pageLoader" class="flex flex-col flex-1 w-full min-h-0">
+        <slot name="header" />
+        <main :class="mainClasses">
+            <slot name="default" />
+        </main>
+    </div>
+    <ff-loading v-else :message="pageLoaderMessage" />
 </template>
 
 <script>
+import { mapState } from 'pinia'
+
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
+
 export default {
     name: 'PageLayout',
     props: {
@@ -15,6 +22,7 @@ export default {
         }
     },
     computed: {
+        ...mapState(useUxLoadingStore, ['pageLoader', 'pageLoaderMessage']),
         mainClasses () {
             const classes = ['flex-1', 'overflow-auto', 'h-full', 'w-full', 'flex', 'flex-col']
             if (!this.noPadding && !this.hasRouteDeclaredNoPadding) {
diff --git a/frontend/src/pages/application/CreateInstanceMultiStep.vue b/frontend/src/pages/application/CreateInstanceMultiStep.vue
index 14d4dfe9a6..a39281edae 100644
--- a/frontend/src/pages/application/CreateInstanceMultiStep.vue
+++ b/frontend/src/pages/application/CreateInstanceMultiStep.vue
@@ -30,7 +30,7 @@
         <ff-loading v-if="isLoading" />
 
         <MultiStepInstanceForm
-            v-else
+            v-else-if="application"
             ref="multiStepForm" :application="application" @instance-created="onInstanceCreated"
             @previous-step-state-changed="form.previousButtonState = $event"
             @next-step-state-changed="form.nextButtonState = $event"
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
 import MultiStepInstanceForm from '../../components/multi-step-forms/instance/MultiStepInstanceForm.vue'
 
@@ -50,6 +50,7 @@ import { useActiveApplication } from '../../composables/useActiveApplication'
 
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     name: 'ApplicationCreateInstance',
@@ -59,9 +60,9 @@ export default {
     inheritAttrs: false,
     emits: ['application-updated'],
     setup () {
-        const { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+        const { loadActiveApplication } = useActiveApplication()
 
-        return { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication }
+        return { loadActiveApplication }
     },
     data () {
         return {
@@ -79,8 +80,9 @@ export default {
     computed: {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
+        ...mapState(useDataFarmApplicationsStore, { application: 'activeApplication', applicationHydrated: 'applicationHydrated' }),
         isLoading () {
-            return this.loading || !this.team || this.isLoadingActiveApplication
+            return this.loading || !this.team || !this.applicationHydrated
         }
     },
     async created () {
@@ -118,6 +120,7 @@ export default {
         this.clearActiveApplication()
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['clearActiveApplication']),
         async onInstanceCreated () {
             await useContextStore().refreshTeam()
 
diff --git a/frontend/src/pages/application/components/ApplicationDetailSkeleton.vue b/frontend/src/pages/application/components/ApplicationDetailSkeleton.vue
deleted file mode 100644
index 529cafd4ca..0000000000
--- a/frontend/src/pages/application/components/ApplicationDetailSkeleton.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-    <div class="ff-application-detail-skeleton" data-el="application-detail-skeleton">
-        <div class="ff-application-detail-skeleton--header">
-            <SkeletonBlock width="240px" height="20px" />
-            <div class="ff-application-detail-skeleton--tabs">
-                <SkeletonBlock v-for="n in tabCount" :key="n" width="88px" height="18px" />
-            </div>
-        </div>
-        <div class="ff-application-detail-skeleton--body">
-            <div class="ff-application-detail-skeleton--section-head">
-                <div class="ff-application-detail-skeleton--section-title">
-                    <SkeletonBlock width="180px" height="22px" />
-                    <SkeletonBlock width="340px" height="14px" />
-                </div>
-                <SkeletonBlock width="130px" height="36px" radius="6px" />
-            </div>
-            <SkeletonBlock height="40px" radius="6px" />
-            <div class="ff-application-detail-skeleton--table">
-                <SkeletonBlock v-for="n in rowCount" :key="n" height="52px" radius="4px" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import SkeletonBlock from '@/components/SkeletonBlock.vue'
-
-defineProps({
-    tabCount: {
-        type: Number,
-        default: 10
-    },
-    rowCount: {
-        type: Number,
-        default: 6
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.ff-application-detail-skeleton {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    &--header {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        padding: 16px 12px;
-        border-bottom: 1px solid var(--ff-color-border-strong);
-
-        @media (min-width: 768px) {
-            padding-left: 24px;
-            padding-right: 24px;
-        }
-    }
-
-    &--tabs {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 24px;
-    }
-
-    &--body {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        padding: 12px;
-
-        @media (min-width: 768px) {
-            padding: 24px;
-        }
-    }
-
-    &--section-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        gap: 16px;
-    }
-
-    &--section-title {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    &--table {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        margin-top: 4px;
-    }
-}
-</style>
diff --git a/frontend/src/pages/application/createInstance.vue b/frontend/src/pages/application/createInstance.vue
index 719a928a48..805e3b1888 100644
--- a/frontend/src/pages/application/createInstance.vue
+++ b/frontend/src/pages/application/createInstance.vue
@@ -36,7 +36,7 @@
 
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/20/solid/index.js'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
 import instanceApi from '../../api/instances.js'
 
@@ -46,6 +46,7 @@ import InstanceForm from '../instance/components/InstanceForm.vue'
 
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
+import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 export default {
     name: 'ApplicationCreateInstance',
@@ -61,9 +62,9 @@ export default {
     },
     emits: ['application-updated'],
     setup () {
-        const { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+        const { loadActiveApplication } = useActiveApplication()
 
-        return { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication }
+        return { loadActiveApplication }
     },
     data () {
         return {
@@ -82,8 +83,9 @@ export default {
     computed: {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
+        ...mapState(useDataFarmApplicationsStore, { application: 'activeApplication', applicationHydrated: 'applicationHydrated' }),
         isLoading () {
-            return this.loading || !this.team || this.isLoadingActiveApplication
+            return this.loading || !this.team || !this.applicationHydrated
         }
     },
     async created () {
@@ -104,6 +106,7 @@ export default {
         this.clearActiveApplication()
     },
     methods: {
+        ...mapActions(useDataFarmApplicationsStore, ['clearActiveApplication']),
         async handleFormSubmit (formData, copyParts) {
             this.loading = true
 
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index c54ef3da9f..d3e42d5a81 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -1,18 +1,15 @@
 <template>
-    <ff-loading v-if="loading.deleting" message="Deleting Application..." />
-    <ff-loading v-else-if="loading.suspend" message="Suspending Application..." />
-    <main v-else-if="isLoadingActiveApplication || !application?.id" class="ff-with-status-header flex flex-col h-full w-full overflow-auto" data-el="application-page-loading">
-        <ApplicationDetailSkeleton />
-    </main>
-    <main v-else class="ff-with-status-header flex flex-col h-full w-full overflow-auto" data-el="application-page">
+    <ff-page no-padding>
+        <template #header>
+            <ff-page-header :title="application?.name" :tabs="navigation">
+                <template #breadcrumbs>
+                    <ff-nav-breadcrumb v-if="team" :to="{name: 'Applications', params: {team_slug: team.slug}}">Applications</ff-nav-breadcrumb>
+                </template>
+            </ff-page-header>
+        </template>
         <ConfirmApplicationDeleteDialog ref="confirmApplicationDeleteDialog" @confirm="deleteApplication" />
         <ConfirmInstanceDeleteDialog ref="confirmInstanceDeleteDialog" @confirm="onInstanceDeleted" />
-        <ff-page-header :title="application.name" :tabs="navigation">
-            <template #breadcrumbs>
-                <ff-nav-breadcrumb v-if="team" :to="{name: 'Applications', params: {team_slug: team.slug}}">Applications</ff-nav-breadcrumb>
-            </template>
-        </ff-page-header>
-        <div class="px-3 py-3 md:px-6 md:py-6 flex-1 flex flex-col h-full overflow-auto">
+        <div v-if="application" class="px-3 py-3 md:px-6 md:py-6 flex-1 flex flex-col h-full overflow-auto" data-el="application-page">
             <router-view
                 :application="application"
                 :instances="instancesArray"
@@ -29,11 +26,11 @@
                 <InstanceStatusPolling v-for="instance in instancesArray" :key="instance.id" :instance="instance" @instance-updated="instanceUpdated" />
             </template>
         </div>
-    </main>
+    </ff-page>
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 
 import applicationApi from '../../api/application.js'
 import InstanceStatusPolling from '../../components/InstanceStatusPolling.vue'
@@ -47,17 +44,16 @@ import { applyLiveState } from '../../utils/applyLiveState.js'
 import ConfirmInstanceDeleteDialog from '../instance/Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
 
 import ConfirmApplicationDeleteDialog from './Settings/dialogs/ConfirmApplicationDeleteDialog.vue'
-import ApplicationDetailSkeleton from './components/ApplicationDetailSkeleton.vue'
 
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 import { useLiveStatusStore } from '@/stores/live-status'
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
 
 export default {
     name: 'ApplicationPage',
     components: {
-        ApplicationDetailSkeleton,
         ConfirmApplicationDeleteDialog,
         ConfirmInstanceDeleteDialog,
         InstanceStatusPolling
@@ -65,32 +61,33 @@ export default {
     mixins: [instanceActionsMixin],
     setup () {
         const { hasPermission, isVisitingAdmin } = usePermissions()
-        const { application, isLoadingActiveApplication, loadActiveApplication, clearActiveApplication } = useActiveApplication()
+        const { loadActiveApplication } = useActiveApplication()
         const applicationsStore = useDataFarmApplicationsStore()
 
         return {
             hasPermission,
             isVisitingAdmin,
-            application,
-            isLoadingActiveApplication,
             loadActiveApplication,
-            clearActiveApplication,
             deleteApplicationEntity: applicationsStore.deleteApplication
         }
     },
     data () {
         return {
-            applicationInstances: new Map(),
-            loading: {
-                deleting: false,
-                suspend: false
-            }
+            applicationInstances: new Map()
         }
     },
     computed: {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountSettingsStore, ['features']),
         ...mapState(useLiveStatusStore, { liveInstanceMetadata: 'instanceMetadata', statusChannelLive: 'live' }),
+        ...mapState(useDataFarmApplicationsStore, { application: 'activeApplication', applicationHydrated: 'applicationHydrated', activeApplicationId: 'activeApplicationId' }),
+        ...mapState(useUxLoadingStore, ['pageLoader']),
+        routeApplicationHydrated () {
+            return this.applicationHydrated && this.activeApplicationId === this.$route.params.id
+        },
+        shouldShowPageLoader () {
+            return !this.routeApplicationHydrated
+        },
         instancesArray () {
             if (this.applicationInstances.size === 0) {
                 return []
@@ -170,12 +167,22 @@ export default {
         }
     },
     watch: {
-        '$route.params': {
-            handler: 'loadApplicationData',
+        routeApplicationHydrated: {
+            handler (isHydrated) {
+                if (!isHydrated && this.$route.params.id) {
+                    this.loadApplicationData()
+                }
+            },
+            immediate: true
+        },
+        shouldShowPageLoader: {
+            handler (show) {
+                this.setPageLoader(show, 'Loading Application...')
+            },
             immediate: true
         },
         application (application, previous) {
-            if (previous && !application && !this.loading.deleting && this.$route.params.id) {
+            if (previous && !application && !this.pageLoader && this.$route.params.id) {
                 alerts.emit('This application has been deleted.', 'warning')
                 this.$router.push({ name: 'Applications', params: { team_slug: this.team?.slug } })
             }
@@ -184,8 +191,11 @@ export default {
     },
     beforeUnmount () {
         this.clearActiveApplication()
+        this.setPageLoader(false)
     },
     methods: {
+        ...mapActions(useUxLoadingStore, ['setPageLoader']),
+        ...mapActions(useDataFarmApplicationsStore, ['clearActiveApplication']),
         async loadApplicationData () {
             const applicationId = this.$route.params.id
             if (!applicationId) {
@@ -212,7 +222,7 @@ export default {
                 .catch(err => console.error(err))
         },
         async deleteApplication () {
-            this.loading.deleting = true
+            this.setPageLoader(true, 'Deleting Application...')
             try {
                 await this.deleteApplicationEntity(this.application.id, this.team.id)
                 await useContextStore().refreshTeam()
@@ -225,7 +235,7 @@ export default {
                     alerts.emit('Application failed to delete', 'warning')
                 }
             }
-            this.loading.deleting = false
+            this.setPageLoader(false)
         },
         applyLiveStatus () {
             for (const id of this.applicationInstances.keys()) {
diff --git a/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue b/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue
deleted file mode 100644
index 5c978278db..0000000000
--- a/frontend/src/pages/team/Applications/components/ApplicationsListSkeleton.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<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 61e1dba3a9..3a826c364e 100644
--- a/frontend/src/pages/team/Applications/index.vue
+++ b/frontend/src/pages/team/Applications/index.vue
@@ -33,9 +33,7 @@
             </ff-page-header>
         </template>
         <div class="space-y-6">
-            <ApplicationsListSkeleton v-if="isLoadingTeamApplications" />
-
-            <template v-else-if="teamApplications.length > 0">
+            <template v-if="teamApplications.length > 0">
                 <ff-text-input
                     v-model="filterTerm"
                     class="ff-data-table--search"
@@ -109,17 +107,15 @@ 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'
+import { useUxLoadingStore } from '@/stores/ux-loading.js'
 
 export default {
     name: 'TeamApplications',
     components: {
         MagnifyingGlassIcon,
         ApplicationListItem,
-        ApplicationsListSkeleton,
         EmptyState,
         PlusSmallIcon
     },
@@ -138,8 +134,10 @@ export default {
         }
     },
     computed: {
-        ...mapState(useContextStore, ['team']),
-        ...mapState(useDataFarmApplicationsStore, ['teamApplications', 'isLoadingTeamApplications']),
+        ...mapState(useDataFarmApplicationsStore, ['teamApplications', 'applicationsListHydrated']),
+        shouldShowPageLoader () {
+            return !this.applicationsListHydrated
+        },
         filteredApplications () {
             if (this.filterTerm.length) {
                 return this.teamApplications
@@ -153,24 +151,32 @@ export default {
         }
     },
     watch: {
-        team: 'loadApplications'
+        applicationsListHydrated: {
+            handler (isHydrated) {
+                if (!isHydrated) {
+                    this.ensureTeamApplicationsLoaded()
+                }
+            },
+            immediate: true
+        },
+        shouldShowPageLoader: {
+            handler (show) {
+                this.setPageLoader(show, 'Loading Applications...')
+            },
+            immediate: true
+        }
     },
-    async mounted () {
-        await this.loadApplications()
-
+    mounted () {
         this.setSearchQuery()
     },
+    beforeUnmount () {
+        this.setPageLoader(false)
+    },
     methods: {
         ...mapActions(useDataFarmApplicationsStore, ['ensureTeamApplicationsLoaded']),
-        loadApplications () {
-            if (this.team?.id) {
-                return this.ensureTeamApplicationsLoaded(this.team.id)
-            }
-        },
+        ...mapActions(useUxLoadingStore, ['setPageLoader']),
         refreshApplications () {
-            if (this.team?.id) {
-                return this.ensureTeamApplicationsLoaded(this.team.id, { force: true })
-            }
+            return this.ensureTeamApplicationsLoaded({ force: true })
         },
         setSearchQuery () {
             if (this.$route?.query && Object.prototype.hasOwnProperty.call(this.$route.query, 'searchQuery')) {
diff --git a/frontend/src/stores/data-farm-applications.ts b/frontend/src/stores/data-farm-applications.ts
index 4c4e1f67b1..1cc290fe73 100644
--- a/frontend/src/stores/data-farm-applications.ts
+++ b/frontend/src/stores/data-farm-applications.ts
@@ -3,15 +3,15 @@ import { computed, ref } from 'vue'
 
 import applicationApi from '@/api/application.js'
 import teamApi from '@/api/team.js'
+import { useContextStore } from '@/stores/context.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 activeApplicationId = ref<string | null>(null)
-    const isLoadingActiveApplication = ref(false)
+    const applicationsListHydrated = ref(false)
+    const applicationHydrated = ref(false)
 
     const teamApplications = computed(() => teamApplicationIds.value
         .map(id => applicationsById.value[id]))
@@ -34,30 +34,26 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         teamApplicationIds.value = teamApplicationIds.value.filter(applicationId => applicationId !== id)
     }
 
-    async function ensureTeamApplicationsLoaded (teamId: string, { force = false } = {}): Promise<void> {
+    async function ensureTeamApplicationsLoaded ({ force = false } = {}): Promise<void> {
+        const teamId = useContextStore().team?.id
         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
-        }
+        if (!force && applicationsListHydrated.value) return
+
+        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
+        applicationsListHydrated.value = true
     }
 
     async function createApplication (payload: { name?: string, description?: string, teamId: string }): Promise<ApplicationSummary> {
@@ -80,6 +76,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
     function setActiveApplication (application: ApplicationSummary | null): void {
         if (!application?.id) {
             activeApplicationId.value = null
+            applicationHydrated.value = false
             return
         }
         const existing = applicationsById.value[application.id]
@@ -89,14 +86,15 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
 
     async function loadActiveApplication (id: string): Promise<ApplicationSummary | null> {
         if (!id) return null
-        isLoadingActiveApplication.value = true
-        try {
-            const application = await applicationApi.getApplication(id)
-            setActiveApplication(application)
-            return application
-        } finally {
-            isLoadingActiveApplication.value = false
-        }
+        applicationHydrated.value = false
+        const application = await applicationApi.getApplication(id)
+        setActiveApplication(application)
+        applicationHydrated.value = true
+        return application
+    }
+
+    function clearActiveApplication (): void {
+        setActiveApplication(null)
     }
 
     function applyRealtimeEvent (event: { id?: string, action?: string, data?: ApplicationSummary }): void {
@@ -111,19 +109,17 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
     function reset (): void {
         applicationsById.value = {}
         teamApplicationIds.value = []
-        loadedTeamId.value = null
-        isLoadingTeamApplications.value = false
         activeApplicationId.value = null
-        isLoadingActiveApplication.value = false
+        applicationsListHydrated.value = false
+        applicationHydrated.value = false
     }
 
     return {
         applicationsById,
         teamApplicationIds,
-        loadedTeamId,
-        isLoadingTeamApplications,
         activeApplicationId,
-        isLoadingActiveApplication,
+        applicationsListHydrated,
+        applicationHydrated,
         teamApplications,
         activeApplication,
         upsertApplication,
@@ -134,6 +130,7 @@ export const useDataFarmApplicationsStore = defineStore('data-farm-applications'
         deleteApplication,
         setActiveApplication,
         loadActiveApplication,
+        clearActiveApplication,
         applyRealtimeEvent,
         reset
     }
diff --git a/frontend/src/stores/ux-loading.js b/frontend/src/stores/ux-loading.js
index b7f00bc44a..dbd1978360 100644
--- a/frontend/src/stores/ux-loading.js
+++ b/frontend/src/stores/ux-loading.js
@@ -3,7 +3,9 @@ import { defineStore } from 'pinia'
 export const useUxLoadingStore = defineStore('ux-loading', {
     state: () => ({
         appLoader: true,
-        offline: null
+        offline: null,
+        pageLoader: false,
+        pageLoaderMessage: null
     }),
     actions: {
         setAppLoader (value) {
@@ -14,6 +16,10 @@ export const useUxLoadingStore = defineStore('ux-loading', {
         },
         setOffline (value) {
             this.offline = value
+        },
+        setPageLoader (value, message = null) {
+            this.pageLoader = value
+            this.pageLoaderMessage = value ? message : null
         }
     }
 })
diff --git a/test/unit/frontend/composables/useActiveApplication.spec.js b/test/unit/frontend/composables/useActiveApplication.spec.js
new file mode 100644
index 0000000000..29218ebbc0
--- /dev/null
+++ b/test/unit/frontend/composables/useActiveApplication.spec.js
@@ -0,0 +1,66 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useActiveApplication } from '../../../../frontend/src/composables/useActiveApplication.ts'
+import { useDataFarmApplicationsStore } from '../../../../frontend/src/stores/data-farm-applications.ts'
+
+const routerMock = vi.hoisted(() => ({
+    push: vi.fn(),
+    currentRoute: { value: { path: '/team/t1/applications/a1', query: { q: '1' }, hash: '#h' } }
+}))
+
+vi.mock('vue-router', async (importOriginal) => ({
+    ...await importOriginal(),
+    useRouter: () => routerMock
+}))
+
+describe('useActiveApplication', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+        routerMock.push.mockClear()
+    })
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+    })
+
+    it('returns null and does not touch the store or router when no id is given', async () => {
+        const store = useDataFarmApplicationsStore()
+        const spy = vi.spyOn(store, 'loadActiveApplication')
+        const { loadActiveApplication } = useActiveApplication()
+
+        const result = await loadActiveApplication('')
+
+        expect(result).toBe(null)
+        expect(spy).not.toHaveBeenCalled()
+        expect(routerMock.push).not.toHaveBeenCalled()
+    })
+
+    it('delegates to the store and returns the application', async () => {
+        const store = useDataFarmApplicationsStore()
+        vi.spyOn(store, 'loadActiveApplication').mockResolvedValue({ id: 'a1', name: 'Detail' })
+        const { loadActiveApplication } = useActiveApplication()
+
+        const result = await loadActiveApplication('a1')
+
+        expect(store.loadActiveApplication).toHaveBeenCalledWith('a1')
+        expect(result).toEqual({ id: 'a1', name: 'Detail' })
+        expect(routerMock.push).not.toHaveBeenCalled()
+    })
+
+    it('redirects to page-not-found and returns null when the fetch fails', async () => {
+        const store = useDataFarmApplicationsStore()
+        vi.spyOn(store, 'loadActiveApplication').mockRejectedValue(new Error('boom'))
+        const { loadActiveApplication } = useActiveApplication()
+
+        const result = await loadActiveApplication('a1')
+
+        expect(result).toBe(null)
+        expect(routerMock.push).toHaveBeenCalledWith({
+            name: 'page-not-found',
+            params: { pathMatch: ['team', 't1', 'applications', 'a1'] },
+            query: { q: '1' },
+            hash: '#h'
+        })
+    })
+})
diff --git a/test/unit/frontend/stores/data-farm-applications.spec.js b/test/unit/frontend/stores/data-farm-applications.spec.js
index 7842b40b5f..76ea4f45cb 100644
--- a/test/unit/frontend/stores/data-farm-applications.spec.js
+++ b/test/unit/frontend/stores/data-farm-applications.spec.js
@@ -3,11 +3,13 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import applicationApi from '@/api/application.js'
 import teamApi from '@/api/team.js'
+import { useContextStore } from '@/stores/context.js'
 import { useDataFarmApplicationsStore } from '@/stores/data-farm-applications'
 
 describe('data-farm-applications store', () => {
     beforeEach(() => {
         setActivePinia(createPinia())
+        useContextStore().team = { id: 'team-1' }
     })
 
     afterEach(() => {
@@ -18,9 +20,9 @@ describe('data-farm-applications store', () => {
         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([])
+        expect(store.applicationsListHydrated).toBe(false)
+        expect(store.applicationHydrated).toBe(false)
     })
 
     describe('ensureTeamApplicationsLoaded', () => {
@@ -30,21 +32,20 @@ describe('data-farm-applications store', () => {
             })
             const store = useDataFarmApplicationsStore()
 
-            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded()
 
             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)
+            expect(store.applicationsListHydrated).toBe(true)
         })
 
         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')
+            await store.ensureTeamApplicationsLoaded()
+            await store.ensureTeamApplicationsLoaded()
 
             expect(spy).toHaveBeenCalledTimes(1)
         })
@@ -53,31 +54,53 @@ describe('data-farm-applications store', () => {
             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 })
+            await store.ensureTeamApplicationsLoaded()
+            await store.ensureTeamApplicationsLoaded({ force: true })
 
             expect(spy).toHaveBeenCalledTimes(2)
         })
 
-        it('refetches and replaces the list when the team changes', async () => {
+        it('replaces the list after reset 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')
+            await store.ensureTeamApplicationsLoaded()
+            store.reset()
+            useContextStore().team = { id: 'team-2' }
+            await store.ensureTeamApplicationsLoaded()
 
-            expect(store.loadedTeamId).toBe('team-2')
             expect(store.teamApplicationIds).toEqual(['b1'])
         })
 
-        it('clears the loading flag even when the fetch rejects', async () => {
+        it('does not mark the list hydrated 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)
+            await expect(store.ensureTeamApplicationsLoaded()).rejects.toThrow('boom')
+            expect(store.applicationsListHydrated).toBe(false)
+        })
+
+        it('reads the current team from the context store', async () => {
+            const spy = vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [] })
+            useContextStore().team = { id: 'team-9' }
+            const store = useDataFarmApplicationsStore()
+
+            await store.ensureTeamApplicationsLoaded()
+
+            expect(spy).toHaveBeenCalledWith('team-9', expect.any(Object))
+        })
+
+        it('does nothing when no team is set in context', async () => {
+            const spy = vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [] })
+            useContextStore().team = null
+            const store = useDataFarmApplicationsStore()
+
+            await store.ensureTeamApplicationsLoaded()
+
+            expect(spy).not.toHaveBeenCalled()
+            expect(store.applicationsListHydrated).toBe(false)
         })
     })
 
@@ -86,7 +109,7 @@ describe('data-farm-applications store', () => {
             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')
+            await store.ensureTeamApplicationsLoaded()
 
             const created = await store.createApplication({ name: 'New', teamId: 'team-1' })
 
@@ -104,7 +127,7 @@ describe('data-farm-applications store', () => {
             })
             vi.spyOn(applicationApi, 'updateApplication').mockResolvedValue({ id: 'a1', name: 'Renamed', description: 'd' })
             const store = useDataFarmApplicationsStore()
-            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded()
 
             await store.updateApplication('a1', { name: 'Renamed', description: 'd' })
 
@@ -121,7 +144,7 @@ describe('data-farm-applications store', () => {
             })
             vi.spyOn(applicationApi, 'deleteApplication').mockResolvedValue(undefined)
             const store = useDataFarmApplicationsStore()
-            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded()
 
             await store.deleteApplication('a1', 'team-1')
 
@@ -151,7 +174,7 @@ describe('data-farm-applications store', () => {
         it('upserts on a created event (cross-session add)', async () => {
             vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1', name: 'One' }] })
             const store = useDataFarmApplicationsStore()
-            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded()
 
             store.applyRealtimeEvent({ id: 'a2', action: 'created', data: { id: 'a2', name: 'Two' } })
 
@@ -164,7 +187,7 @@ describe('data-farm-applications store', () => {
                 applications: [{ id: 'a1', name: 'Old', instanceCount: 3 }]
             })
             const store = useDataFarmApplicationsStore()
-            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded()
 
             store.applyRealtimeEvent({ id: 'a1', action: 'updated', data: { id: 'a1', name: 'Renamed' } })
 
@@ -174,7 +197,7 @@ describe('data-farm-applications store', () => {
         it('removes on a deleted event (cross-session remove)', async () => {
             vi.spyOn(teamApi, 'getTeamApplications').mockResolvedValue({ applications: [{ id: 'a1' }, { id: 'a2' }] })
             const store = useDataFarmApplicationsStore()
-            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded()
 
             store.applyRealtimeEvent({ id: 'a1', action: 'deleted' })
 
@@ -206,17 +229,17 @@ describe('data-farm-applications store', () => {
             expect(applicationApi.getApplication).toHaveBeenCalledWith('a1')
             expect(application).toEqual({ id: 'a1', name: 'Detail' })
             expect(store.activeApplication).toEqual({ id: 'a1', name: 'Detail' })
-            expect(store.isLoadingActiveApplication).toBe(false)
+            expect(store.applicationHydrated).toBe(true)
             // the active app is cached but not a member of the team list
             expect(store.teamApplicationIds).toEqual([])
         })
 
-        it('clears the loading flag even when the fetch rejects', async () => {
+        it('does not mark the application hydrated when the fetch rejects', async () => {
             vi.spyOn(applicationApi, 'getApplication').mockRejectedValue(new Error('boom'))
             const store = useDataFarmApplicationsStore()
 
             await expect(store.loadActiveApplication('a1')).rejects.toThrow('boom')
-            expect(store.isLoadingActiveApplication).toBe(false)
+            expect(store.applicationHydrated).toBe(false)
         })
     })
 
@@ -242,7 +265,7 @@ describe('data-farm-applications store', () => {
                 applications: [{ id: 'a1', name: 'One', instanceCount: 2 }]
             })
             const store = useDataFarmApplicationsStore()
-            await store.ensureTeamApplicationsLoaded('team-1')
+            await store.ensureTeamApplicationsLoaded()
 
             store.setActiveApplication({ id: 'a1', name: 'One', description: 'd' })
 
@@ -250,11 +273,22 @@ describe('data-farm-applications store', () => {
             expect(store.teamApplicationIds).toEqual(['a1'])
         })
 
-        it('clears the active application on null', () => {
+        it('clears the active application and its hydration flag on null', () => {
             const store = useDataFarmApplicationsStore()
             store.setActiveApplication({ id: 'a1', name: 'Detail' })
+            store.applicationHydrated = true
             store.setActiveApplication(null)
             expect(store.activeApplication).toBe(null)
+            expect(store.applicationHydrated).toBe(false)
+        })
+
+        it('clearActiveApplication resets the active application and its hydration flag', () => {
+            const store = useDataFarmApplicationsStore()
+            store.setActiveApplication({ id: 'a1', name: 'Detail' })
+            store.applicationHydrated = true
+            store.clearActiveApplication()
+            expect(store.activeApplication).toBe(null)
+            expect(store.applicationHydrated).toBe(false)
         })
     })
 
@@ -262,16 +296,16 @@ describe('data-farm-applications store', () => {
         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')
+            await store.ensureTeamApplicationsLoaded()
             store.setActiveApplication({ id: 'a1' })
 
             store.reset()
 
             expect(store.applicationsById).toEqual({})
             expect(store.teamApplicationIds).toEqual([])
-            expect(store.loadedTeamId).toBe(null)
-            expect(store.isLoadingTeamApplications).toBe(false)
             expect(store.activeApplication).toBe(null)
+            expect(store.applicationsListHydrated).toBe(false)
+            expect(store.applicationHydrated).toBe(false)
         })
     })
 })
diff --git a/test/unit/frontend/stores/ux-loading.spec.js b/test/unit/frontend/stores/ux-loading.spec.js
index d890c988bd..4caa3aef3b 100644
--- a/test/unit/frontend/stores/ux-loading.spec.js
+++ b/test/unit/frontend/stores/ux-loading.spec.js
@@ -42,14 +42,48 @@ describe('ux-loading store', () => {
         })
     })
 
+    describe('page loader', () => {
+        it('starts inactive with no message', () => {
+            const store = useUxLoadingStore()
+            expect(store.pageLoader).toBe(false)
+            expect(store.pageLoaderMessage).toBeNull()
+        })
+
+        it('setPageLoader with true stores the loader and message', () => {
+            const store = useUxLoadingStore()
+            store.setPageLoader(true, 'Loading Applications...')
+            expect(store.pageLoader).toBe(true)
+            expect(store.pageLoaderMessage).toBe('Loading Applications...')
+        })
+
+        it('setPageLoader with false clears the loader and message', () => {
+            const store = useUxLoadingStore()
+            store.setPageLoader(true, 'Loading Applications...')
+            store.setPageLoader(false)
+            expect(store.pageLoader).toBe(false)
+            expect(store.pageLoaderMessage).toBeNull()
+        })
+
+        it('setPageLoader with true and no message clears a previously-set message', () => {
+            const store = useUxLoadingStore()
+            store.setPageLoader(true, 'Loading Applications...')
+            store.setPageLoader(true)
+            expect(store.pageLoader).toBe(true)
+            expect(store.pageLoaderMessage).toBeNull()
+        })
+    })
+
     describe('$reset', () => {
         it('restores default state', () => {
             const store = useUxLoadingStore()
             store.appLoader = false
             store.offline = true
+            store.setPageLoader(true, 'Loading Applications...')
             store.$reset()
             expect(store.appLoader).toBe(true)
             expect(store.offline).toBeNull()
+            expect(store.pageLoader).toBe(false)
+            expect(store.pageLoaderMessage).toBeNull()
         })
     })
 })