Pinia Task 8 - product-assistant

[n-lark]

Task 8 — product-assistant (PR 9)

Gate: Phase 0 merged
Vuex module: frontend/src/store/modules/product/assistant/index.js
New file: frontend/src/stores/product-assistant.js
No persistence.
Cross-store dependency: immersiveInstance and immersiveDevice getters read from context store (already on Pinia after PR 6). allowedInboundOrigins getter depends on these. sendMessage action posts to the instance iframe.

8.1 — Create the Pinia store

The state and all actions are a direct port. The key things to note:

• immersiveInstance and immersiveDevice getters now import useContextStore() directly instead of reading rootState.context
• sendMessage uses messagingService() — no change needed there
• The eventsRegistry constant and ALL_CONTEXT_OPTIONS array can be moved to a separate product-assistant.constants.js file or kept at the top of the store file

// frontend/src/stores/product-assistant.js
import { defineStore } from 'pinia'
import messagingService from '../services/messaging.service.js'
import { useContextStore } from './context.js'

// eventsRegistry and ALL_CONTEXT_OPTIONS copied verbatim from Vuex module...

export const useProductAssistantStore = defineStore('product-assistant', {
    state: () => ({
        version: null,
        supportedActions: {},
        assistantFeatures: {},
        palette: {},
        scope: { target: 'nr-assistant', scope: 'flowfuse-expert', source: 'flowfuse-expert' },
        nodeRedVersion: null,
        selectedNodes: [],
        selectedContext: [...ALL_CONTEXT_OPTIONS],
        debugLog: [],
        editorState: { /* initialised from eventsRegistry */ }
    }),
    getters: {
        immersiveInstance: () => useContextStore().instance,   // ← direct Pinia import
        immersiveDevice: () => useContextStore().device,       // ← direct Pinia import
        hasUserSelection: (state) => state.selectedNodes.length > 0,
        hasContextSelection: (state) => state.selectedContext.length > 0,
        isFeaturePaletteEnabled: (state) => state.assistantFeatures?.commands?.['get-palette']?.enabled ?? false,
        isFeatureDebugLogEnabled: (state) => state.assistantFeatures?.debugLog?.enabled ?? false,
        availableContextOptions (state) { /* same logic */ },
        paletteContribOnly (state) { /* same logic */ },
        debugLog (state) { /* same logic */ },
        allowedInboundOrigins () {
            const allowed = [window.origin]
            const instance = useContextStore().instance
            const device = useContextStore().device
            if (instance?.url) allowed.push(instance.url)
            if (device?.editor?.url) allowed.push(device.editor.url)
            return allowed
        },
        isEditorRunning: (state) => state.editorState?.flowsLoaded || state.editorState?.runtimeState?.state === 'start'
    },
    actions: {
        handleMessage (payload) { /* same switch logic, dispatch → this.actionName() */ },
        sendMessage (payload) {
            const service = messagingService()
            return service.sendMessage({
                message: { ...payload, ...this.scope },
                target: window.frames['immersive-editor-iframe'],
                targetOrigin: this.immersiveInstance?.url
            })
        },
        // all other actions are simple state assignments — port directly
        reset () { Object.assign(this, initialState()) }
    }
})

8.2 — Find and update all consumers

grep -rl "product/assistant\|mapState.*assistant\|mapGetters.*assistant\|mapActions.*assistant" frontend/src/

Primary consumers: expert assistant Vue components in frontend/src/components/expert/.

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.

Also update messaging.service.js:112: replace this.$store.dispatch('product/assistant/handleMessage', event) with useProductAssistantStore().handleMessage(event).

8.3 — Update context.js expert getter (partial)

Now that product-assistant is on Pinia, update the expert getter in context.js to import useProductAssistantStore() directly instead of reading from store.state.product.assistant. Remove the bridge reads for assistant data.

8.4 — Delete the Vuex module

Remove assistant from store/modules/product/index.js modules registration. Delete frontend/src/store/modules/product/assistant/index.js.

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

8.5 — Write store tests

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

describe('product-assistant store', () => {
    beforeEach(() => {
        setActivePinia(createPinia())
    })

    it('immersiveInstance reads from contextStore', () => {
        const store = useProductAssistantStore()
        const contextStore = useContextStore()
        contextStore.setInstance({ id: 'inst-1', url: 'http://localhost' })
        expect(store.immersiveInstance).toEqual({ id: 'inst-1', url: 'http://localhost' })
    })

    it('allowedInboundOrigins includes window.origin and instance url', () => {
        const store = useProductAssistantStore()
        const contextStore = useContextStore()
        contextStore.setInstance({ id: 'inst-1', url: 'http://node-red.local' })
        const origins = store.allowedInboundOrigins
        expect(origins).toContain(window.origin)
        expect(origins).toContain('http://node-red.local')
    })

    it('reset clears state back to initial values', () => {
        const store = useProductAssistantStore()
        store.version = '2.0'
        store.reset()
        expect(store.version).toBeNull()
    })
})

8.6 — Export from stores index

export { useProductAssistantStore } from './product-assistant.js'

[n-lark]

Task 8 Manual Test Plan — product-assistant Pinia Migration

Scope

Tests covering the areas affected by migrating the product/assistant Vuex module → useProductAssistantStore Pinia store. Covers the Expert panel, immersive editor assistant integration, context selector, palette/debug log features, and logout reset.

Not tested here: The product/expert Vuex module is still in place and is not migrated in this task. The context.expert getter still bridges to Vuex for account and product/expert data — those are covered in later PRs.

---

1. Expert panel — opens and displays correctly

Files: components/expert/Expert.vue, stores/product-assistant.js

• Navigate to an instance editor → open the Expert drawer
• Pinia DevTools: product-assistant store is present and version is populated once the assistant connects
• Chat input is enabled and placeholder text displays
• Sending a message shows a response (or loading indicator) with no console errors

---

2. Assistant connects from the immersive editor iframe

Files: components/immersive-editor/HostedInstanceEditorWrapper.vue, services/messaging.service.js

• Open an instance editor — Pinia DevTools: product-assistant.version and product-assistant.nodeRedVersion populate once the iframe loads
• Pinia DevTools: product-assistant.supportedActions and product-assistant.palette are populated
• Navigate away from the instance editor (unmount) → no console errors; reset() fires cleanly

---

3. Context selector — palette and debug log options

Files: components/expert/components/ContextSelector.vue, components/expert/components/IncludeContextItem.vue

• Open the Expert panel context selector → options load (Palette, and debug log options if NR version ≥ 4.1.6)
• Select "Add Palette to context" → chip appears in chat input; Pinia DevTools: product-assistant.selectedContext updates
• Deselect the chip → selectedContext updates
• Options with onSelectAction (debug log entries) trigger the correct store action when selected — no $store.dispatch errors

---

4. Include debug context button

Files: components/expert/components/IncludeDebugContextButton.vue

• With NR version ≥ 4.1.6 and debugLogContext feature enabled: debug log button is visible in chat input
• Triggering it clears and then populates product-assistant.debugLogEntries via messages from the iframe
• Remove a debug log entry → debugLogEntries shrinks; count chip updates

---

5. Include selection button

Files: components/expert/components/IncludeSelectionButton.vue

• Select nodes on the Node-RED canvas → product-assistant.selectedNodes updates in Pinia DevTools
• Toggle the selection off → selectedNodes is cleared; count chip disappears

---

6. Update banner — palette package management

Files: components/expert/components/UpdateBanner.vue

Easiest state to test — not installed (via Pinia DevTools):

• Open an instance editor with the Expert panel visible
• Pinia DevTools → product-assistant: set palette to { "some-other-package": {} } and set editorState.flowsLoaded to true
• A yellow warning banner appears at the bottom of the Expert panel with title "FlowFuse Expert Not Installed" and an "Install..." button
• Click "Install..." → the Node-RED palette manager opens to the install tab filtered to @flowfuse/nr-assistant; no console errors

Update available state (via Pinia DevTools):

• Open an instance editor with the Expert panel visible (assistant must be connected so version is set)
• Pinia DevTools → product-assistant: set editorState.updatesAvailable to { "palette": [{ "package": "@flowfuse/nr-assistant", "latest": "99.0.0" }] } and set editorState.flowsLoaded to true
• Banner shows "New FlowFuse Expert Version Available" with a "V99.0.0 available" chip and an "Update..." button
• Click "Update..." → the Node-RED palette manager opens to the nodes tab filtered to @flowfuse/nr-assistant; no console errors

Happy path (smoke test):

• Open an instance with @flowfuse/nr-assistant installed, enabled, and up to date → no banner is shown at the bottom of the Expert panel

---

7. Flow and package resource cards

Files: components/expert/resource-cards/FlowResourceCard.vue, components/expert/resource-cards/PackageResourceCard.vue

• In the Expert panel resource view, flow cards display import buttons when canImportFlows is true
• Clicking "Import" on a flow card sends it to the assistant (no $store errors in console)
• Package cards show install/manage buttons based on canManagePalette
• isPackageInstalled correctly reflects packages present in product-assistant.palette

---

8. Logout — product-assistant store is reset

Files: store/modules/account/index.js

• While the Expert panel is open and has messages, log out
• After logout: Pinia DevTools: product-assistant store is reset — version, palette, debugLogEntries, selectedNodes all return to initial values
• Log back in → assistant re-connects cleanly with fresh state

---

9. Expert context — instanceId is correct

Files: stores/context.js (expert getter), store/modules/product/expert/index.js

• Navigate to Instance A editor → Pinia DevTools: context.expert.instanceId matches Instance A's ID
• Send a message to the Expert — network request payload: context.instanceId matches the correct instance
• Navigate to Instance B editor → context.expert.instanceId updates to Instance B's ID; subsequent messages use the correct ID

---