Pinia Task 5 - context

[n-lark]

Task 5 — context (PR 6)

Gate: Phase 0 merged
Vuex module: frontend/src/store/modules/context/index.js
New file: frontend/src/stores/context.js
No persistence. No external dependencies for state/actions.
Note on expert getter: This getter reads from account, product.assistant, and product.expert — all still on Vuex at this point. Use the bridge pattern to read from Vuex during migration; update the getter in PR 12 when product-expert ships.

5.1 — Create the Pinia store

State and actions are simple — four properties, four actions. The expert getter is the only complex part. Port it with bridge reads for now:

// frontend/src/stores/context.js
import { defineStore } from 'pinia'
import store from '../store/index.js' // bridge — remove after all deps migrated

export const useContextStore = defineStore('context', {
    state: () => ({
        route: null,
        instance: null,
        device: null
    }),
    getters: {
        // Bridge version — reads from Vuex for account/assistant/expert data.
        // Update in PR 12 (product-expert) to use Pinia store imports directly.
        expert (state) {
            const rootState = store.state
            const rootGetters = store.getters

            if (!state.route) {
                return {
                    assistantVersion: rootState.product.assistant.version,
                    assistantFeatures: rootState.product.assistant.assistantFeatures,
                    palette: null,
                    debugLog: null,
                    userId: rootState.account?.user?.id || null,
                    teamId: rootState.account?.team?.id || null,
                    teamSlug: rootState.account?.team?.slug || null,
                    instanceId: null,
                    deviceId: null,
                    applicationId: null,
                    isTrialAccount: rootGetters['account/isTrialAccount'] || false,
                    nodeRedVersion: rootState.product.assistant.nodeRedVersion,
                    pageName: null,
                    rawRoute: {},
                    selectedNodes: null,
                    scope: 'ff-app'
                }
            }

            // ... paste full existing getter logic from context/index.js
            // replacing rootState/rootGetters references with store.state / store.getters
        }
    },
    actions: {
        updateRoute (route) { this.route = route },
        setInstance (instance) { this.instance = instance },
        setDevice (device) { this.device = device },
        clearInstance () { this.instance = null }
    }
})

5.2 — Find and update all consumers

grep -rl "context/updateRoute\|context/setInstance\|context/setDevice\|context/clearInstance\|mapState.*context\|mapActions.*context" frontend/src/

Key consumers:

• routes.js — calls context/updateRoute on every navigation
• pages/instance/ — calls setInstance / clearInstance
• pages/device/ — calls setDevice
• store/modules/product/expert/index.js — reads rootGetters['context/expert'] in sendQuery (this stays as-is until PR 12)

For each consumer, check if it's inside a mixin or rendered as <component :is="..."> inside <ff-dialog> — use Pattern C from PINIA_COMPONENT_PATTERNS.md (mapState / mapActions from Pinia) — this works correctly in all component types.

5.3 — Delete the Vuex module

Remove the context import and registration from frontend/src/store/index.js:

// Remove:
import context from './modules/context/index.js'

// Update modules:
modules: { account, product }  // context removed

Delete frontend/src/store/modules/context/index.js.

Logout bridge: uncomment useContextStore().$reset() in the Vuex logout action (Task 0.7).

5.4 — Write store tests

// frontend/src/tests/stores/context.spec.js
import { setActivePinia, createPinia } from 'pinia'
import { describe, it, expect, beforeEach } from 'vitest'
import { useContextStore } from '@/stores/context.js'

describe('context store', () => {
    beforeEach(() => {
        setActivePinia(createPinia())
    })

    it('initializes with null route, instance, device', () => {
        const store = useContextStore()
        expect(store.route).toBeNull()
        expect(store.instance).toBeNull()
        expect(store.device).toBeNull()
    })

    it('setInstance / clearInstance manage instance ref', () => {
        const store = useContextStore()
        const fakeInstance = { id: 'abc' }
        store.setInstance(fakeInstance)
        expect(store.instance).toEqual(fakeInstance)
        store.clearInstance()
        expect(store.instance).toBeNull()
    })

    it('setDevice sets the device ref', () => {
        const store = useContextStore()
        store.setDevice({ id: 'dev-1' })
        expect(store.device).toEqual({ id: 'dev-1' })
    })

    it('updateRoute updates the route', () => {
        const store = useContextStore()
        store.updateRoute({ name: 'Home' })
        expect(store.route).toEqual({ name: 'Home' })
    })
})

5.5 — Export from stores index

export { useContextStore } from './context.js'

[n-lark]

Task 5 Manual Test Plan — context Pinia Migration

Scope

Tests covering the areas affected by migrating the context Vuex module → useContextStore Pinia store. Covers route tracking, instance/device context, the expert getter bridge, and logout reset.

Not tested here: The expert getter's Vuex bridge reads (product.assistant, account) are covered by the product-expert task (PR 12). This plan only verifies that existing behaviour is unchanged.

---

1. Route context — navigation updates context.route

Files: App.vue

• Log in and navigate to any page → Pinia DevTools: context.route is set to the current route object (has name, fullPath, params)
• Navigate to a different page → context.route updates to the new route
• Pinia DevTools: context.route is never null after the first navigation

---

2. Instance context — set and clear on enter/leave

Files: pages/instance/Editor/index.vue

• Navigate to an instance editor page → Pinia DevTools: context.instance is set to the current instance object
• Navigate away from the instance editor → Pinia DevTools: context.instance returns to null
• Navigate between two different instance editors → context.instance updates to the new instance on each entry

---

3. Device context — set on enter

Files: pages/device/Editor/index.vue

• Navigate to a device editor page → Pinia DevTools: context.device is set to the current device object
• Navigate away from the device editor → Pinia DevTools: context.device retains the last set device (there is no clearDevice action — this matches the previous Vuex behaviour)

---

4. Logout — context store is reset

Files: store/modules/account/index.js

• While logged in and on an instance/device page (so context.instance or context.device is set), log out
• After logout: Pinia DevTools: context.route, context.instance, and context.device are all null
• Log back in → the context store re-hydrates correctly as you navigate

---

5. Expert getter — bridge reads (smoke test)

Files: stores/context.js (expert getter)

The expert getter reads from Vuex (product.assistant, account) via a bridge while those modules are still on Vuex.

• Open the Expert panel (if available on your environment) — no console errors related to context.expert
• Navigate to an instance editor → confirm the Expert drawer has access to the correct instance context (no blank or stale data)
• Pinia DevTools: inspect context getter expert — it has scope, instanceId, userId properties

Note: when you navigate from one instance Expert drawer to another, the messages from the previous conversation persist. This does appear to be the functionality on main, just wanted to note it here.