From e67ea430637f61fa672fde9f4bf9c61d809d85ce Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Fri, 20 Mar 2026 13:56:10 -0700
Subject: [PATCH] Convert vuex store to pinia for product brokers

---
 frontend/src/App.vue                          |   3 +-
 frontend/src/layouts/Platform.vue             |   6 +-
 .../src/pages/team/Brokers/ChooseBroker.vue   |   5 +-
 .../Brokers/Clients/dialogs/ClientDialog.vue  |  13 +-
 .../src/pages/team/Brokers/Clients/index.vue  |  15 +-
 .../Hierarchy/TopicHierarchy/index.vue        |   8 +-
 frontend/src/pages/team/Brokers/NewBroker.vue |   6 +-
 .../src/pages/team/Brokers/Settings/index.vue |  12 +-
 frontend/src/pages/team/Brokers/index.vue     |  18 +-
 frontend/src/store/modules/account/index.js   |   3 +-
 frontend/src/store/modules/product/index.js   | 211 +-----------------
 frontend/src/stores/index.js                  |   1 +
 frontend/src/stores/product-brokers.js        | 101 +++++++++
 .../frontend/stores/product-brokers.spec.js   | 179 +++++++++++++++
 14 files changed, 343 insertions(+), 238 deletions(-)
 create mode 100644 frontend/src/stores/product-brokers.js
 create mode 100644 test/unit/frontend/stores/product-brokers.spec.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d1b0544010..dc66abd26b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -79,6 +79,7 @@ import TermsAndConditions from './pages/TermsAndConditions.vue'
 import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 
 import { useContextStore } from '@/stores/context.js'
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -142,7 +143,7 @@ export default {
     },
     mounted () {
         this.$store.dispatch('account/checkState')
-        this.$store.dispatch('product/checkFlags')
+        useProductBrokersStore().checkFlags()
     },
     methods: {
         ...mapActions(useContextStore, ['updateRoute'])
diff --git a/frontend/src/layouts/Platform.vue b/frontend/src/layouts/Platform.vue
index 66c81e287a..8938a4d778 100644
--- a/frontend/src/layouts/Platform.vue
+++ b/frontend/src/layouts/Platform.vue
@@ -63,7 +63,7 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import InterviewPopup from '../components/InterviewPopup.vue'
 import PageHeader from '../components/PageHeader.vue'
@@ -73,8 +73,8 @@ import NoticeBanner from '../components/notices/NoticeBanner.vue'
 import AlertsMixin from '../mixins/Alerts.js'
 import dialogService from '../services/dialog.js'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
-
 import { useUxStore } from '@/stores/ux.js'
 
 export default {
@@ -90,7 +90,7 @@ export default {
     computed: {
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxStore, ['overlay']),
-        ...mapVuexState('product', ['interview']),
+        ...mapState(useProductBrokersStore, ['interview']),
         ...mapGetters('account', ['hasAvailableTeams'])
     },
     watch: {
diff --git a/frontend/src/pages/team/Brokers/ChooseBroker.vue b/frontend/src/pages/team/Brokers/ChooseBroker.vue
index aaeea74bd0..8acb0c28c7 100644
--- a/frontend/src/pages/team/Brokers/ChooseBroker.vue
+++ b/frontend/src/pages/team/Brokers/ChooseBroker.vue
@@ -48,10 +48,13 @@
 <script>
 
 import { CheckIcon, MinusIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import MediumTile from '../../../components/tiles/MediumTile.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'ChooseBroker',
     components: {
@@ -60,7 +63,7 @@ export default {
         MinusIcon
     },
     computed: {
-        ...mapGetters('product', ['hasFfUnsClients', 'hasBrokers']),
+        ...mapState(useProductBrokersStore, ['hasFfUnsClients', 'hasBrokers']),
         ...mapGetters('account', ['featuresCheck']),
         options () {
             return [
diff --git a/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue b/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue
index 31c0bfadce..3abe1c3e96 100644
--- a/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue
+++ b/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue
@@ -72,7 +72,8 @@
 
 <script>
 import { PlusIcon } from '@heroicons/vue/solid'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import brokerApi from '../../../../../api/broker.js'
 import FormRow from '../../../../../components/FormRow.vue'
@@ -80,6 +81,8 @@ import { generateUuid } from '../../../../../composables/strings/String.js'
 
 import AclItem from './AclItem.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'ClientDialog',
     components: {
@@ -146,8 +149,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
-        ...mapState('product', {
+        ...mapVuexState('account', ['team']),
+        ...mapState(useProductBrokersStore, {
             clients: state => state.UNS.clients
         }),
         disableConfirm () {
@@ -180,7 +183,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('product', ['fetchUnsClients']),
+        ...mapActions(useProductBrokersStore, ['fetchUnsClients', 'addFfBroker']),
         async confirm () {
             if (!this.validateForm()) {
                 return
@@ -210,7 +213,7 @@ export default {
                     this.input.acls
                 )
                     .then(() => this.fetchUnsClients())
-                    .then(() => this.$store.dispatch('product/addFfBroker'))
+                    .then(() => this.addFfBroker())
                     .then(() => this.$router.push({
                         name: 'team-brokers-clients',
                         params: { ...this.$route.params, brokerId: 'team-broker' }
diff --git a/frontend/src/pages/team/Brokers/Clients/index.vue b/frontend/src/pages/team/Brokers/Clients/index.vue
index 526e8709d3..697fae2c6b 100644
--- a/frontend/src/pages/team/Brokers/Clients/index.vue
+++ b/frontend/src/pages/team/Brokers/Clients/index.vue
@@ -94,7 +94,8 @@
 
 <script>
 import { PlusSmIcon, RssIcon, SearchIcon } from '@heroicons/vue/outline'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import brokerApi from '../../../../api/broker.js'
 import EmptyState from '../../../../components/EmptyState.vue'
@@ -112,6 +113,8 @@ import BrokerClient from './components/BrokerClient.vue'
 
 import ClientDialog from './dialogs/ClientDialog.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'BrokerClients',
     components: {
@@ -139,8 +142,8 @@ export default {
         Roles () {
             return Roles
         },
-        ...mapState('account', ['user', 'team', 'features']),
-        ...mapState('product', {
+        ...mapVuexState('account', ['user', 'team', 'features']),
+        ...mapState(useProductBrokersStore, {
             clients: state => state.UNS.clients
         }),
         filteredClients () {
@@ -173,7 +176,7 @@ export default {
     },
     methods: {
         slugify,
-        ...mapActions('product', ['fetchUnsClients']),
+        ...mapActions(useProductBrokersStore, ['fetchUnsClients', 'removeFfBroker']),
         async createClient () {
             this.$refs.clientDialog.showCreate()
         },
@@ -188,11 +191,11 @@ export default {
                 confirmLabel: 'Delete'
             }, async () => {
                 brokerApi.deleteClient(this.team.id, client.username)
-                    .then(() => this.$store.dispatch('product/fetchUnsClients'))
+                    .then(() => this.fetchUnsClients())
                     .then(() => Alerts.emit('Successfully deleted Client.', 'confirmation'))
                     .then(async () => {
                         if (this.clients.length === 0) {
-                            await this.$store.dispatch('product/removeFfBroker')
+                            this.removeFfBroker()
                             await this.$router.push({ name: 'team-brokers' })
                         }
                     })
diff --git a/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue b/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue
index 93b5798434..497a2a6107 100644
--- a/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue
+++ b/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue
@@ -80,6 +80,7 @@
 <script>
 import { SearchIcon, StatusOnlineIcon, XIcon } from '@heroicons/vue/outline'
 import { RefreshIcon } from '@heroicons/vue/solid'
+import { mapActions, mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import EmptyState from '../../../../../components/EmptyState.vue'
@@ -88,6 +89,8 @@ import MainTitle from '../components/MainTitle.vue'
 
 import TopicSegment from '../components/TopicSegment.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'TopicHierarchy',
     components: {
@@ -125,7 +128,7 @@ export default {
     },
     computed: {
         ...mapGetters('account', ['featuresCheck', 'team']),
-        ...mapGetters('product', ['brokerExpandedTopics']),
+        ...mapState(useProductBrokersStore, ['brokerExpandedTopics']),
         brokerId () {
             return this.$route.params.brokerId
         },
@@ -217,7 +220,7 @@ export default {
             set (segment) {
                 const keys = segment.topic.split('/')
                 let current = this.hierarchy
-                this.$store.dispatch('product/handleBrokerTopicState', { topic: segment.topic, brokerId: this.brokerId })
+                this.handleBrokerTopicState({ topic: segment.topic, brokerId: this.brokerId })
 
                 for (let i = 0; i < keys.length; i++) {
                     const key = keys[i]
@@ -253,6 +256,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useProductBrokersStore, ['handleBrokerTopicState']),
         checkIfTopicOpen (topic) {
             return Object.prototype.hasOwnProperty.call(this.expandedTopics, topic)
         },
diff --git a/frontend/src/pages/team/Brokers/NewBroker.vue b/frontend/src/pages/team/Brokers/NewBroker.vue
index 3c9bdc2066..be3d515b98 100644
--- a/frontend/src/pages/team/Brokers/NewBroker.vue
+++ b/frontend/src/pages/team/Brokers/NewBroker.vue
@@ -4,10 +4,13 @@
 
 <script>
 
+import { mapActions } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import BrokerForm from './components/BrokerForm.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'NewBroker',
     components: { BrokerForm },
@@ -20,8 +23,9 @@ export default {
         }
     },
     methods: {
+        ...mapActions(useProductBrokersStore, ['createBroker']),
         onSubmit (payload) {
-            return this.$store.dispatch('product/createBroker', payload)
+            return this.createBroker(payload)
                 .then(res => this.$router.push({
                     name: 'team-brokers-hierarchy',
                     params: { brokerId: res.id }
diff --git a/frontend/src/pages/team/Brokers/Settings/index.vue b/frontend/src/pages/team/Brokers/Settings/index.vue
index 18b1adb799..2918547b64 100644
--- a/frontend/src/pages/team/Brokers/Settings/index.vue
+++ b/frontend/src/pages/team/Brokers/Settings/index.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import Alerts from '../../../../services/alerts.js'
 
@@ -15,6 +15,8 @@ import Dialog from '../../../../services/dialog.js'
 import BrokerError from '../components/BrokerError.vue'
 import BrokerForm from '../components/BrokerForm.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'BrokerSettings',
     components: { BrokerForm, BrokerError },
@@ -30,8 +32,8 @@ export default {
     },
     emits: ['broker-updated'],
     computed: {
-        ...mapGetters('product', ['hasFfUnsClients']),
-        ...mapState('product', {
+        ...mapState(useProductBrokersStore, ['hasFfUnsClients']),
+        ...mapState(useProductBrokersStore, {
             brokers: state => state.UNS.brokers
         }),
         activeBroker () {
@@ -52,7 +54,7 @@ export default {
                 .catch(e => e)
         },
         deleteBroker () {
-            return this.$store.dispatch('product/deleteBroker', this.activeBroker.id)
+            return useProductBrokersStore().deleteBroker(this.activeBroker.id)
                 .then(() => {
                     let name = 'team-brokers'
 
@@ -67,7 +69,7 @@ export default {
             if (payload.credentials.username.length && payload.credentials.password.length) {
                 delete payload.credentials
             }
-            return this.$store.dispatch('product/updateBroker', { payload, brokerId: this.activeBroker.id })
+            return useProductBrokersStore().updateBroker({ payload, brokerId: this.activeBroker.id })
                 .then((res) => {
                     this.$emit('broker-updated')
                     Alerts.emit(`Broker ${res.name} updated successfully.`, 'confirmation')
diff --git a/frontend/src/pages/team/Brokers/index.vue b/frontend/src/pages/team/Brokers/index.vue
index ec8c52e7a6..15694a51f3 100644
--- a/frontend/src/pages/team/Brokers/index.vue
+++ b/frontend/src/pages/team/Brokers/index.vue
@@ -77,7 +77,8 @@
 <script>
 
 import { PlusIcon } from '@heroicons/vue/outline'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapGetters } from 'vuex'
 
 import brokerAPI from '../../../api/broker.js'
 
@@ -89,6 +90,8 @@ import { Roles } from '../../../utils/roles.js'
 
 import BrokerStatusBadge from './components/BrokerStatusBadge.vue'
 
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
 export default {
     name: 'TeamBrokers',
     components: { BrokerStatusBadge, FfLoading, EmptyState, PlusIcon },
@@ -112,8 +115,8 @@ export default {
     },
     computed: {
         ...mapGetters('account', ['featuresCheck', 'team', 'pendingTeamChange']),
-        ...mapGetters('product', ['hasFfUnsClients', 'hasBrokers']),
-        ...mapState('product', {
+        ...mapState(useProductBrokersStore, ['hasFfUnsClients', 'hasBrokers']),
+        ...mapState(useProductBrokersStore, {
             brokers: state => state.UNS.brokers
         }),
         activeBrokerId: {
@@ -293,13 +296,13 @@ export default {
         this.clearBrokerStatusPollingInterval()
     },
     methods: {
-        ...mapActions('product', ['fetchUnsClients']),
+        ...mapActions(useProductBrokersStore, ['fetchUnsClients', 'getBrokers', 'clearUns']),
         async fetchData () {
             this.loading = true
             if (this.featuresCheck.isMqttBrokerFeatureEnabled) {
-                return this.$store.dispatch('product/fetchUnsClients')
+                return this.fetchUnsClients()
                     .catch(err => console.error(err))
-                    .then(() => this.$store.dispatch('product/getBrokers'))
+                    .then(() => this.getBrokers())
                     .then(() => {
                         if (
                             Object.prototype.hasOwnProperty.call(this.$route.params, 'brokerId') &&
@@ -348,9 +351,6 @@ export default {
                  // no redirect
             }
         },
-        clearUns () {
-            this.$store.dispatch('product/clearUns')
-        },
         getBrokerState () {
             return brokerAPI.getBrokerStatus(this.team.id, this.activeBrokerId)
                 .then(response => {
diff --git a/frontend/src/store/modules/account/index.js b/frontend/src/store/modules/account/index.js
index 641ad1c2f3..2b90c52378 100644
--- a/frontend/src/store/modules/account/index.js
+++ b/frontend/src/store/modules/account/index.js
@@ -12,6 +12,7 @@ import product from '../../../services/product.js'
 
 import { useContextStore } from '@/stores/context.js'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useProductExpertFfAgentStore } from '@/stores/product-expert-ff-agent.js'
 import { useProductExpertOperatorAgentStore } from '@/stores/product-expert-operator-agent.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
@@ -531,7 +532,7 @@ const actions = {
                     useUxStore().$reset()
                     useContextStore().$reset()
                     useProductTablesStore().$reset()
-                    // Task 7:  useProductBrokersStore().$reset()
+                    useProductBrokersStore().$reset()
                     useProductAssistantStore().$reset()
                     useProductExpertFfAgentStore().$reset()
                     useProductExpertOperatorAgentStore().$reset()
diff --git a/frontend/src/store/modules/product/index.js b/frontend/src/store/modules/product/index.js
index cbb195e244..39b639d58c 100644
--- a/frontend/src/store/modules/product/index.js
+++ b/frontend/src/store/modules/product/index.js
@@ -1,211 +1,15 @@
-import brokerApi from '../../../api/broker.js'
+// TODO: Remove this module shell once product-expert (PR 12) is merged.
+// All state/actions have been migrated to Pinia stores.
 
-// initial state
-const initialState = () => ({
-    flags: null,
-    interview: null,
-    UNS: {
-        clients: [],
-        brokers: []
-    },
-    brokers: {
-        expandedTopics: {}
-    }
-})
-
-const meta = {
-    persistence: {
-        brokers: {
-            storage: 'localStorage'
-            // clearOnLogout: true (cleared by default)
-        }
-    }
-}
+const initialState = () => ({})
 
 const state = initialState
 
-// getters
-const getters = {
-    hasFfUnsClients: state => state.UNS.clients.length > 0,
-    hasBrokers: state => state.UNS.brokers.length > 0,
-    brokerExpandedTopics: (state, getters, rootState) => (brokerId) => {
-        const team = rootState.account.team
-
-        if (
-            !team ||
-            !brokerId ||
-            !Object.prototype.hasOwnProperty.call(state.brokers.expandedTopics, team.slug) ||
-            !Object.prototype.hasOwnProperty.call(state.brokers.expandedTopics[team.slug], brokerId)
-        ) {
-            return {}
-        }
-
-        return state.brokers.expandedTopics[team.slug][brokerId]
-    }
-}
-
-// mutations
-const mutations = {
-    setFlags (state, flags) {
-        state.flags = flags
-    },
-    setInterview (state, payload) {
-        state.interview = payload
-    },
-    setUnsClients (state, payload) {
-        state.UNS.clients = payload
-    },
-    setUnsBrokers (state, payload) {
-        state.UNS.brokers = payload
-    },
-    pushBroker (state, payload) {
-        state.UNS.brokers.push(payload)
-    },
-    pushFfBroker (state, payload) {
-        if (!state.UNS.brokers.find(b => b.local) && state.UNS.clients.length > 0) {
-            // Artificially adding the flowfuse broker in the list
-            state.UNS.brokers.push({
-                local: true,
-                id: 'team-broker',
-                name: 'FlowFuse Broker',
-                clientId: 'team-broker',
-                host: '??',
-                port: 0,
-                protocol: '',
-                ssl: false,
-                verifySSL: true
-            })
-        }
-    },
-    removeFfBroker (state, payload) {
-        state.UNS.brokers = state.UNS.brokers.filter(b => !b.local)
-    },
-    updateBroker (state, payload) {
-        for (let i = 0; i < state.UNS.brokers.length; i++) {
-            if (state.UNS.brokers[i].id === payload.id) {
-                state.UNS.brokers[i] = { ...state.UNS.brokers[i], ...payload }
-            }
-        }
-    },
-    removeBroker (state, payload) {
-        const index = state.UNS.brokers.findIndex(br => br.id === payload)
-        if (index !== -1) {
-            state.UNS.brokers.splice(index, 1)
-        }
-    },
-    clearUns (state, payload) {
-        state.UNS.brokers = []
-        state.UNS.clients = []
-    },
-    toggleOpenTopic (state, { topic, team, brokerId }) {
-        if (!Object.prototype.hasOwnProperty.call(state.brokers.expandedTopics, team.slug)) {
-            // console.log('no team slug, creating empty team object')
-            state.brokers.expandedTopics[team.slug] = {}
-        }
-
-        if (!Object.prototype.hasOwnProperty.call(state.brokers.expandedTopics[team.slug], brokerId)) {
-            state.brokers.expandedTopics[team.slug][brokerId] = {}
-            state.brokers.expandedTopics[team.slug][brokerId][topic] = ''
-            return
-        }
+const getters = {}
 
-        if (Object.prototype.hasOwnProperty.call(state.brokers.expandedTopics[team.slug][brokerId], topic)) {
-            delete state.brokers.expandedTopics[team.slug][brokerId][topic]
-            return
-        }
+const mutations = {}
 
-        state.brokers.expandedTopics[team.slug][brokerId][topic] = ''
-    }
-}
-
-// actions
-const actions = {
-    async checkFlags (state) {
-        try {
-            window.posthog?.onFeatureFlags((flags, values) => {
-                const storeFlags = {}
-                for (const flagName of flags) {
-                    const payload = window.posthog?.getFeatureFlagPayload(flagName)
-                    storeFlags[flagName] = {
-                        value: values[flagName],
-                        payload
-                    }
-
-                    /*
-                        Check if an interview flag
-                    */
-
-                    const flagStartsWithKeyword = flagName.startsWith('interview-')
-                    const flagEnabled = window.posthog?.isFeatureEnabled(flagName, { send_event: false })
-                    const flagNotShownBefore = !localStorage.getItem('ph-$interview-popup-seen')
-
-                    if (flagStartsWithKeyword && flagEnabled && flagNotShownBefore) {
-                        const interview = {
-                            flag: flagName,
-                            enabled: flagEnabled,
-                            payload
-                        }
-                        state.commit('setInterview', interview)
-                    }
-                }
-                state.commit('setFlags', storeFlags)
-            })
-        } catch (err) {
-            console.error('posthog error logging feature flags')
-        }
-    },
-    async fetchUnsClients ({ commit, rootState }) {
-        const team = rootState.account?.team
-        return brokerApi.getClients(team.id)
-            .then(response => commit('setUnsClients', response.clients))
-    },
-    async getBrokers ({ commit, rootState, getters }) {
-        const team = rootState.account?.team
-        return brokerApi.getBrokers(team.id)
-            .then(response => response.brokers)
-            .then(brokers => commit('setUnsBrokers', brokers))
-            .then(() => commit('pushFfBroker'))
-    },
-    async createBroker ({ commit, rootState }, payload) {
-        const team = rootState.account?.team
-        return brokerApi.createBroker(team.id, payload)
-            .then(broker => {
-                commit('pushBroker', broker)
-                return broker
-            })
-            .catch(e => e)
-    },
-    async updateBroker ({ commit, rootState }, { payload, brokerId }) {
-        const team = rootState.account?.team
-        return brokerApi.updateBroker(team.id, brokerId, payload)
-            .then(broker => {
-                commit('updateBroker', broker)
-                return broker
-            })
-            .catch(e => e)
-    },
-    deleteBroker ({ commit, rootState }, brokerId) {
-        const team = rootState.account?.team
-        return brokerApi.deleteBroker(team.id, brokerId)
-            .then(commit('removeBroker', brokerId))
-    },
-    addFfBroker ({ commit }) {
-        commit('pushFfBroker')
-    },
-    removeFfBroker ({ commit }) {
-        commit('removeFfBroker')
-    },
-    clearUns ({ commit }) {
-        commit('clearUns')
-    },
-    handleBrokerTopicState ({ commit, rootState }, { topic, brokerId }) {
-        commit('toggleOpenTopic', {
-            topic,
-            brokerId,
-            team: rootState.account.team
-        })
-    }
-}
+const actions = {}
 
 export default {
     namespaced: true,
@@ -214,6 +18,5 @@ export default {
     initialState: initialState(),
     getters,
     actions,
-    mutations,
-    meta
+    mutations
 }
diff --git a/frontend/src/stores/index.js b/frontend/src/stores/index.js
index 49b960bbc9..aa37dbe90f 100644
--- a/frontend/src/stores/index.js
+++ b/frontend/src/stores/index.js
@@ -1,5 +1,6 @@
 // Barrel export — add store exports here as each task is merged
 export { useContextStore } from './context.js'
+export { useProductBrokersStore } from './product-brokers.js'
 export { useProductTablesStore } from './product-tables.js'
 export { useProductAssistantStore } from './product-assistant.js'
 export { useProductExpertFfAgentStore } from './product-expert-ff-agent.js'
diff --git a/frontend/src/stores/product-brokers.js b/frontend/src/stores/product-brokers.js
new file mode 100644
index 0000000000..390a392faa
--- /dev/null
+++ b/frontend/src/stores/product-brokers.js
@@ -0,0 +1,101 @@
+import { defineStore } from 'pinia'
+
+import brokerApi from '../api/broker.js'
+
+import { useAccountBridge } from './_account_bridge.js'
+
+export const useProductBrokersStore = defineStore('product-brokers', {
+    state: () => ({
+        flags: null,
+        interview: null,
+        UNS: { clients: [], brokers: [] },
+        brokers: { expandedTopics: {} }
+    }),
+    getters: {
+        hasFfUnsClients: (state) => state.UNS.clients.length > 0,
+        hasBrokers: (state) => state.UNS.brokers.length > 0,
+        brokerExpandedTopics: (state) => (brokerId) => {
+            const { team } = useAccountBridge()
+            if (!team || !brokerId) return {}
+            return state.brokers.expandedTopics?.[team.slug]?.[brokerId] ?? {}
+        }
+    },
+    actions: {
+        checkFlags () {
+            try {
+                window.posthog?.onFeatureFlags((flags, values) => {
+                    const storeFlags = {}
+                    for (const flagName of flags) {
+                        const payload = window.posthog?.getFeatureFlagPayload(flagName)
+                        storeFlags[flagName] = { value: values[flagName], payload }
+                        const flagStartsWithKeyword = flagName.startsWith('interview-')
+                        const flagEnabled = window.posthog?.isFeatureEnabled(flagName, { send_event: false })
+                        const flagNotShownBefore = !localStorage.getItem('ph-$interview-popup-seen')
+                        if (flagStartsWithKeyword && flagEnabled && flagNotShownBefore) {
+                            this.interview = { flag: flagName, enabled: flagEnabled, payload }
+                        }
+                    }
+                    this.flags = storeFlags
+                })
+            } catch (err) {
+                console.error('posthog error logging feature flags')
+            }
+        },
+        async fetchUnsClients () {
+            const { team } = useAccountBridge()
+            const response = await brokerApi.getClients(team.id)
+            this.UNS.clients = response.clients
+        },
+        async getBrokers () {
+            const { team } = useAccountBridge()
+            const response = await brokerApi.getBrokers(team.id)
+            this.UNS.brokers = response.brokers
+            this.addFfBroker()
+        },
+        async createBroker (payload) {
+            const { team } = useAccountBridge()
+            const broker = await brokerApi.createBroker(team.id, payload).catch(e => e)
+            this.UNS.brokers.push(broker)
+            return broker
+        },
+        async updateBroker ({ payload, brokerId }) {
+            const { team } = useAccountBridge()
+            const broker = await brokerApi.updateBroker(team.id, brokerId, payload).catch(e => e)
+            const i = this.UNS.brokers.findIndex(b => b.id === broker.id)
+            if (i !== -1) this.UNS.brokers[i] = { ...this.UNS.brokers[i], ...broker }
+            return broker
+        },
+        deleteBroker (brokerId) {
+            const { team } = useAccountBridge()
+            return brokerApi.deleteBroker(team.id, brokerId).then(() => {
+                const i = this.UNS.brokers.findIndex(b => b.id === brokerId)
+                if (i !== -1) this.UNS.brokers.splice(i, 1)
+            })
+        },
+        addFfBroker () {
+            if (!this.UNS.brokers.find(b => b.local) && this.UNS.clients.length > 0) {
+                this.UNS.brokers.push({ local: true, id: 'team-broker', name: 'FlowFuse Broker', clientId: 'team-broker', host: '??', port: 0, protocol: '', ssl: false, verifySSL: true })
+            }
+        },
+        removeFfBroker () { this.UNS.brokers = this.UNS.brokers.filter(b => !b.local) },
+        clearUns () { this.UNS.brokers = []; this.UNS.clients = [] },
+        handleBrokerTopicState ({ topic, brokerId }) {
+            const { team } = useAccountBridge()
+            if (!this.brokers.expandedTopics[team.slug]) this.brokers.expandedTopics[team.slug] = {}
+            if (!this.brokers.expandedTopics[team.slug][brokerId]) {
+                this.brokers.expandedTopics[team.slug][brokerId] = {}
+                this.brokers.expandedTopics[team.slug][brokerId][topic] = ''
+                return
+            }
+            if (Object.prototype.hasOwnProperty.call(this.brokers.expandedTopics[team.slug][brokerId], topic)) {
+                delete this.brokers.expandedTopics[team.slug][brokerId][topic]
+            } else {
+                this.brokers.expandedTopics[team.slug][brokerId][topic] = ''
+            }
+        }
+    },
+    persist: {
+        pick: ['brokers'],
+        storage: localStorage
+    }
+})
diff --git a/test/unit/frontend/stores/product-brokers.spec.js b/test/unit/frontend/stores/product-brokers.spec.js
new file mode 100644
index 0000000000..9352ba5550
--- /dev/null
+++ b/test/unit/frontend/stores/product-brokers.spec.js
@@ -0,0 +1,179 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import * as bridge from '@/stores/_account_bridge.js'
+import { useProductBrokersStore } from '@/stores/product-brokers.js'
+
+vi.mock('@/stores/_account_bridge.js', () => ({
+    useAccountBridge: vi.fn()
+}))
+
+describe('product-brokers store', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+        vi.spyOn(bridge, 'useAccountBridge').mockReturnValue({ team: { id: 'team-1', slug: 'my-team' } })
+    })
+
+    describe('initial state', () => {
+        it('initializes with null flags and interview', () => {
+            const store = useProductBrokersStore()
+            expect(store.flags).toBeNull()
+            expect(store.interview).toBeNull()
+        })
+
+        it('initializes with empty UNS clients and brokers', () => {
+            const store = useProductBrokersStore()
+            expect(store.UNS.clients).toEqual([])
+            expect(store.UNS.brokers).toEqual([])
+        })
+
+        it('initializes with empty expandedTopics', () => {
+            const store = useProductBrokersStore()
+            expect(store.brokers.expandedTopics).toEqual({})
+        })
+    })
+
+    describe('getters', () => {
+        it('hasFfUnsClients returns false when no clients', () => {
+            const store = useProductBrokersStore()
+            expect(store.hasFfUnsClients).toBe(false)
+        })
+
+        it('hasFfUnsClients returns true when clients exist', () => {
+            const store = useProductBrokersStore()
+            store.UNS.clients = [{ id: 'client-1' }]
+            expect(store.hasFfUnsClients).toBe(true)
+        })
+
+        it('hasBrokers returns false when no brokers', () => {
+            const store = useProductBrokersStore()
+            expect(store.hasBrokers).toBe(false)
+        })
+
+        it('hasBrokers returns true when brokers exist', () => {
+            const store = useProductBrokersStore()
+            store.UNS.brokers = [{ id: 'broker-1' }]
+            expect(store.hasBrokers).toBe(true)
+        })
+
+        it('brokerExpandedTopics returns empty object when no team', () => {
+            vi.spyOn(bridge, 'useAccountBridge').mockReturnValue({ team: null })
+            const store = useProductBrokersStore()
+            expect(store.brokerExpandedTopics('broker-1')).toEqual({})
+        })
+
+        it('brokerExpandedTopics returns empty object when no brokerId', () => {
+            const store = useProductBrokersStore()
+            expect(store.brokerExpandedTopics(null)).toEqual({})
+        })
+
+        it('brokerExpandedTopics returns empty object when path not initialized', () => {
+            const store = useProductBrokersStore()
+            expect(store.brokerExpandedTopics('broker-1')).toEqual({})
+        })
+
+        it('brokerExpandedTopics returns topics for the given broker', () => {
+            const store = useProductBrokersStore()
+            store.brokers.expandedTopics['my-team'] = { 'broker-1': { 'sensors/#': '' } }
+            expect(store.brokerExpandedTopics('broker-1')).toEqual({ 'sensors/#': '' })
+        })
+    })
+
+    describe('addFfBroker', () => {
+        it('does not add FF broker when no clients exist', () => {
+            const store = useProductBrokersStore()
+            store.addFfBroker()
+            expect(store.UNS.brokers).toEqual([])
+        })
+
+        it('adds FF broker when clients exist and no local broker present', () => {
+            const store = useProductBrokersStore()
+            store.UNS.clients = [{ id: 'client-1' }]
+            store.addFfBroker()
+            expect(store.UNS.brokers).toHaveLength(1)
+            expect(store.UNS.brokers[0]).toMatchObject({ id: 'team-broker', local: true, name: 'FlowFuse Broker' })
+        })
+
+        it('does not add FF broker when one already exists', () => {
+            const store = useProductBrokersStore()
+            store.UNS.clients = [{ id: 'client-1' }]
+            store.UNS.brokers = [{ id: 'team-broker', local: true }]
+            store.addFfBroker()
+            expect(store.UNS.brokers).toHaveLength(1)
+        })
+    })
+
+    describe('removeFfBroker', () => {
+        it('removes the local FF broker', () => {
+            const store = useProductBrokersStore()
+            store.UNS.brokers = [{ id: 'team-broker', local: true }, { id: 'external-1' }]
+            store.removeFfBroker()
+            expect(store.UNS.brokers).toEqual([{ id: 'external-1' }])
+        })
+    })
+
+    describe('clearUns', () => {
+        it('clears UNS brokers and clients', () => {
+            const store = useProductBrokersStore()
+            store.UNS.brokers = [{ id: 'b1' }]
+            store.UNS.clients = [{ id: 'c1' }]
+            store.clearUns()
+            expect(store.UNS.brokers).toEqual([])
+            expect(store.UNS.clients).toEqual([])
+        })
+    })
+
+    describe('handleBrokerTopicState', () => {
+        it('creates team/broker path and adds topic on first call', () => {
+            const store = useProductBrokersStore()
+            store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-1' })
+            expect(store.brokers.expandedTopics['my-team']['broker-1']).toHaveProperty('sensors/#')
+        })
+
+        it('removes topic on second call (toggle off)', () => {
+            const store = useProductBrokersStore()
+            store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-1' })
+            store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-1' })
+            expect(store.brokers.expandedTopics['my-team']['broker-1']).not.toHaveProperty('sensors/#')
+        })
+
+        it('adds a second topic without removing the first', () => {
+            const store = useProductBrokersStore()
+            store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-1' })
+            store.handleBrokerTopicState({ topic: 'actuators/#', brokerId: 'broker-1' })
+            expect(store.brokers.expandedTopics['my-team']['broker-1']).toHaveProperty('sensors/#')
+            expect(store.brokers.expandedTopics['my-team']['broker-1']).toHaveProperty('actuators/#')
+        })
+
+        it('scopes topics per broker', () => {
+            const store = useProductBrokersStore()
+            store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-1' })
+            store.handleBrokerTopicState({ topic: 'sensors/#', brokerId: 'broker-2' })
+            expect(store.brokers.expandedTopics['my-team']['broker-1']).toHaveProperty('sensors/#')
+            expect(store.brokers.expandedTopics['my-team']['broker-2']).toHaveProperty('sensors/#')
+        })
+    })
+
+    describe('fetchUnsClients', () => {
+        it('sets UNS.clients from API response', async () => {
+            const store = useProductBrokersStore()
+            const mockClients = [{ id: 'c1' }, { id: 'c2' }]
+            const brokerApi = await import('@/api/broker.js')
+            vi.spyOn(brokerApi.default, 'getClients').mockResolvedValue({ clients: mockClients })
+            await store.fetchUnsClients()
+            expect(store.UNS.clients).toEqual(mockClients)
+        })
+    })
+
+    describe('getBrokers', () => {
+        it('sets UNS.brokers and calls addFfBroker', async () => {
+            const store = useProductBrokersStore()
+            store.UNS.clients = [{ id: 'c1' }]
+            const mockBrokers = [{ id: 'b1' }]
+            const brokerApi = await import('@/api/broker.js')
+            vi.spyOn(brokerApi.default, 'getBrokers').mockResolvedValue({ brokers: mockBrokers })
+            await store.getBrokers()
+            expect(store.UNS.brokers).toHaveLength(2) // b1 + FF broker
+        })
+    })
+})