From 6b7e5ec9da05d495eb5fc0489f0e367f3fb55244 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Wed, 4 Mar 2026 15:03:06 +0000
Subject: [PATCH 01/11] Add UI for device apiMaxLength

fixes #6795
---
 frontend/src/pages/device/Settings/Editor.vue | 158 ++++++++++++++++++
 frontend/src/pages/device/Settings/index.vue  |   1 +
 frontend/src/pages/device/routes.js           |   6 +
 3 files changed, 165 insertions(+)
 create mode 100644 frontend/src/pages/device/Settings/Editor.vue

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
new file mode 100644
index 0000000000..38e1073ba4
--- /dev/null
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -0,0 +1,158 @@
+<template>
+    <form class="space-y-4" data-el="instance-editor" @submit.prevent>
+        <FormHeading>Editor</FormHeading>
+        <FormHeading class="pt-8">Limits</FormHeading>
+        <div v-if="limitAvailable">
+            <div v-if="limitsLauncherEnabled">
+                <div class="flex flex-col sm:flex-row">
+                    <div class="w-full max-w-md sm:mr-8">
+                        <FormRow v-model="editable.settings.apiMaxLength" :error="editable.errors.apiMaxLength" type="text">
+                            Max HTTP Payload Size
+                            <template #description>
+                                The maximum number of bytes allowed in a HTTP Request in bytes ('kb','mb' modifiers allowed)
+                            </template>
+                            <template #append><ChangeIndicator :value="editable.changed.apiMaxLength" /></template>
+                        </FormRow>
+                    </div>
+                </div>
+            </div>
+            <div v-else class="flex flex-col sm:flex-row">
+                <div class="space-y-4 w-full max-w-md sm:mr-8">
+                    Upgrade your Device Agent to be able to set apiMaxLength or debugMaxLength
+                </div>
+            </div>
+        </div>
+        <div v-if="hasPermission('device:edit-env')" class="space-x-4 whitespace-nowrap">
+            <ff-button data-el="submit" size="small" :disabled="!unsavedChanges || editable.hasErrors" @click="saveSettings()">
+                Save Settings
+            </ff-button>
+        </div>
+    </form>
+</template>
+
+<script>
+import semver from 'semver'
+
+import { mapState } from 'vuex'
+
+import deviceApi from '../../../api/devices.js'
+import usePermissions from '../../../composables/Permissions.js'
+
+import Alerts from '../../../services/alerts.js'
+
+import FormHeading from '../../../components/FormHeading.vue'
+import FormRow from '../../../components/FormRow.vue'
+import ChangeIndicator from '../../admin/Template/components/ChangeIndicator.vue'
+
+export default {
+    name: 'DeviceSettingsEditor',
+    components: {
+        FormRow,
+        FormHeading,
+        ChangeIndicator
+    },
+    props: {
+        device: { type: Object, default: null }
+    },
+    emits: ['device-updated', 'assign-device'],
+    setup () {
+        const { hasPermission } = usePermissions()
+
+        return { hasPermission }
+    },
+    data () {
+        return {
+            editable: {
+                settings: {
+                    apiMaxLength: ''
+                },
+                changed: {
+                    apiMaxLength: false
+                },
+                errors: {
+                    apiMaxLength: ''
+                }
+            },
+            original: {
+                apiMaxLength: '',
+                nodeRedVersion: ''
+            }
+        }
+    },
+    computed: {
+        ...mapState('account', ['features']),
+        limitsLauncherEnabled () {
+            if (!this.device.agentVersion) {
+                // Device has not called home yet - so we don't know what agent
+                // version it is running.
+                return false
+            }
+            return semver.gte(this.device.agentVersion, '3.8.3')
+        },
+        limitAvailable () {
+            return true
+        },
+        unsavedChanges () {
+            return this.editable.changed.apiMaxLength
+        }
+    },
+    watch: {
+        device: {
+            handler () {
+                this.getSettings()
+            },
+            deep: true
+        },
+        'editable.settings': {
+            handler () {
+                this.validate()
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        this.getSettings()
+    },
+    methods: {
+        saveSettings : async function () {
+            if (!this.validate()){
+                return
+            }
+            const settings = {
+                editor: {
+                    apiMaxLength: this.editable.settings.apiMaxLength,
+                    nodeRedVersion: this.original.nodeRedVersion
+                }
+            }
+            await deviceApi.updateSettings(this.device.id, settings)
+            this.$emit('device-updated')
+            Alerts.emit('Device settings successfully updated. NOTE: changes will be applied once the device restarts.', 'confirmation', 6000)
+
+        },
+        getSettings: async function () {
+            if (this.device) {
+                const settings = await deviceApi.getSettings(this.device.id)
+                this.editable.settings.apiMaxLength = settings.editor?.apiMaxLength || '5mb'
+                this.original.apiMaxLength = this.editable.settings.apiMaxLength
+                this.original.nodeRedVersion = settings.editor?.nodeRedVersion
+                this.editable.changed.apiMaxLength = false
+            }
+        },
+        validate: function () {
+            this.editable.changed.apiMaxLength = (this.editable.settings.apiMaxLength !== this.original.apiMaxLength)
+            const pattern = /^\d+([km]b)?$/
+            if (this.editable.settings.apiMaxLength.length > 0) {
+                if (pattern.test(this.editable.settings.apiMaxLength)) {
+                    this.editable.errors.apiMaxLength = ''
+                    return true
+                } else {
+                    this.editable.errors.apiMaxLength = 'Invalid Value'
+                    return false
+                }
+            }
+            this.editable.errors.apiMaxLength = ''
+            return true
+        }
+    }
+}
+</script>
diff --git a/frontend/src/pages/device/Settings/index.vue b/frontend/src/pages/device/Settings/index.vue
index 1f36ec86fd..38177b93ae 100644
--- a/frontend/src/pages/device/Settings/index.vue
+++ b/frontend/src/pages/device/Settings/index.vue
@@ -50,6 +50,7 @@ export default {
             ]
             if (this.hasPermission('device:edit', { application: this.device.application })) {
                 if (this.device.ownerType === 'application') {
+                    this.sideNavigation.push({ name: 'Editor', path: './editor' })
                     this.sideNavigation.push({ name: 'Security', path: './security' })
                     this.sideNavigation.push({ name: 'Palette', path: './palette' })
                 }
diff --git a/frontend/src/pages/device/routes.js b/frontend/src/pages/device/routes.js
index 0d46eaa663..162702677d 100644
--- a/frontend/src/pages/device/routes.js
+++ b/frontend/src/pages/device/routes.js
@@ -8,6 +8,7 @@ import DeviceOverview from './Overview.vue'
 import DevicePerformance from './Performance.vue'
 import DeviceSettingsDanger from './Settings/Danger.vue'
 import DeviceSettingsEnvironment from './Settings/Environment.vue'
+import DeviceSettingsEditor from './Settings/Editor.vue'
 import DeviceSettingsGeneral from './Settings/General.vue'
 import DeviceSettingsPalette from './Settings/Palette.vue'
 import DeviceSettingsSecurity from './Settings/Security.vue'
@@ -44,6 +45,11 @@ const children = [
                 path: 'environment',
                 component: DeviceSettingsEnvironment
             },
+            {
+                name: 'device-settings-editor',
+                path: 'editor',
+                component: DeviceSettingsEditor
+            },
             {
                 name: 'device-settings-security',
                 path: 'security',

From 8aac5d57c1657747291101c6f442c3084ec0967b Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Wed, 4 Mar 2026 18:13:50 +0000
Subject: [PATCH 02/11] Add unavailable banner

---
 frontend/src/pages/device/Settings/Editor.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index 38e1073ba4..ce1b244b02 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -1,6 +1,5 @@
 <template>
     <form class="space-y-4" data-el="instance-editor" @submit.prevent>
-        <FormHeading>Editor</FormHeading>
         <FormHeading class="pt-8">Limits</FormHeading>
         <div v-if="limitAvailable">
             <div v-if="limitsLauncherEnabled">
@@ -18,10 +17,11 @@
             </div>
             <div v-else class="flex flex-col sm:flex-row">
                 <div class="space-y-4 w-full max-w-md sm:mr-8">
-                    Upgrade your Device Agent to be able to set apiMaxLength or debugMaxLength
+                    Please upgrade your Device Agent to v3.8.4 be able to set apiMaxLength or debugMaxLength
                 </div>
             </div>
         </div>
+        <FeatureUnavailableToTeam v-if="!limitAvailable" featureName="Set API Size Limits" />
         <div v-if="hasPermission('device:edit-env')" class="space-x-4 whitespace-nowrap">
             <ff-button data-el="submit" size="small" :disabled="!unsavedChanges || editable.hasErrors" @click="saveSettings()">
                 Save Settings
@@ -43,10 +43,12 @@ import Alerts from '../../../services/alerts.js'
 import FormHeading from '../../../components/FormHeading.vue'
 import FormRow from '../../../components/FormRow.vue'
 import ChangeIndicator from '../../admin/Template/components/ChangeIndicator.vue'
+import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
 
 export default {
     name: 'DeviceSettingsEditor',
     components: {
+        FeatureUnavailableToTeam,
         FormRow,
         FormHeading,
         ChangeIndicator
@@ -80,7 +82,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features']),
+        ...mapState('account', ['features', 'team']),
         limitsLauncherEnabled () {
             if (!this.device.agentVersion) {
                 // Device has not called home yet - so we don't know what agent
@@ -90,7 +92,8 @@ export default {
             return semver.gte(this.device.agentVersion, '3.8.3')
         },
         limitAvailable () {
-            return true
+            const flag = this.features.editorLimits && this.team.type.properties.features?.editorLimits
+            return !!flag
         },
         unsavedChanges () {
             return this.editable.changed.apiMaxLength

From ff5bddb69801a54b3be0ad1310a9812b41c115db Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Wed, 4 Mar 2026 18:34:37 +0000
Subject: [PATCH 03/11] fix lint

---
 frontend/src/pages/device/Settings/Editor.vue | 11 +++++------
 frontend/src/pages/device/routes.js           |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index ce1b244b02..693bdba6dc 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -36,14 +36,14 @@ import semver from 'semver'
 import { mapState } from 'vuex'
 
 import deviceApi from '../../../api/devices.js'
+import FormHeading from '../../../components/FormHeading.vue'
+import FormRow from '../../../components/FormRow.vue'
+import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
 import usePermissions from '../../../composables/Permissions.js'
 
 import Alerts from '../../../services/alerts.js'
 
-import FormHeading from '../../../components/FormHeading.vue'
-import FormRow from '../../../components/FormRow.vue'
 import ChangeIndicator from '../../admin/Template/components/ChangeIndicator.vue'
-import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
 
 export default {
     name: 'DeviceSettingsEditor',
@@ -117,8 +117,8 @@ export default {
         this.getSettings()
     },
     methods: {
-        saveSettings : async function () {
-            if (!this.validate()){
+        saveSettings: async function () {
+            if (!this.validate()) {
                 return
             }
             const settings = {
@@ -130,7 +130,6 @@ export default {
             await deviceApi.updateSettings(this.device.id, settings)
             this.$emit('device-updated')
             Alerts.emit('Device settings successfully updated. NOTE: changes will be applied once the device restarts.', 'confirmation', 6000)
-
         },
         getSettings: async function () {
             if (this.device) {
diff --git a/frontend/src/pages/device/routes.js b/frontend/src/pages/device/routes.js
index 162702677d..31922fa07f 100644
--- a/frontend/src/pages/device/routes.js
+++ b/frontend/src/pages/device/routes.js
@@ -7,8 +7,8 @@ import DeviceLogs from './Logs.vue'
 import DeviceOverview from './Overview.vue'
 import DevicePerformance from './Performance.vue'
 import DeviceSettingsDanger from './Settings/Danger.vue'
-import DeviceSettingsEnvironment from './Settings/Environment.vue'
 import DeviceSettingsEditor from './Settings/Editor.vue'
+import DeviceSettingsEnvironment from './Settings/Environment.vue'
 import DeviceSettingsGeneral from './Settings/General.vue'
 import DeviceSettingsPalette from './Settings/Palette.vue'
 import DeviceSettingsSecurity from './Settings/Security.vue'

From 4cf8b84733795ca105a6cd9c9825346fdfd98b33 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 4 Mar 2026 11:51:28 -0800
Subject: [PATCH 04/11] Update spacing, padding, fix typo and disable save
 button when errors on form

---
 frontend/src/pages/device/Settings/Editor.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index 693bdba6dc..cc082056e4 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -1,6 +1,6 @@
 <template>
-    <form class="space-y-4" data-el="instance-editor" @submit.prevent>
-        <FormHeading class="pt-8">Limits</FormHeading>
+    <form class="space-y-6" data-el="instance-editor" @submit.prevent>
+        <FormHeading>Limits</FormHeading>
         <div v-if="limitAvailable">
             <div v-if="limitsLauncherEnabled">
                 <div class="flex flex-col sm:flex-row">
@@ -17,7 +17,7 @@
             </div>
             <div v-else class="flex flex-col sm:flex-row">
                 <div class="space-y-4 w-full max-w-md sm:mr-8">
-                    Please upgrade your Device Agent to v3.8.4 be able to set apiMaxLength or debugMaxLength
+                    Please upgrade your Device Agent to v3.8.4 to be able to set apiMaxLength or debugMaxLength
                 </div>
             </div>
         </div>
@@ -73,7 +73,8 @@ export default {
                 },
                 errors: {
                     apiMaxLength: ''
-                }
+                },
+                hasErrors: false
             },
             original: {
                 apiMaxLength: '',
@@ -146,14 +147,14 @@ export default {
             if (this.editable.settings.apiMaxLength.length > 0) {
                 if (pattern.test(this.editable.settings.apiMaxLength)) {
                     this.editable.errors.apiMaxLength = ''
-                    return true
                 } else {
                     this.editable.errors.apiMaxLength = 'Invalid Value'
-                    return false
                 }
+            } else {
+                this.editable.errors.apiMaxLength = ''
             }
-            this.editable.errors.apiMaxLength = ''
-            return true
+            this.editable.hasErrors = !!this.editable.errors.apiMaxLength
+            return !this.editable.hasErrors
         }
     }
 }

From ea2f9df5297cd0d53baf13e6c56e534632943d61 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Thu, 5 Mar 2026 10:02:03 +0000
Subject: [PATCH 05/11] Allow setting if not connected yet

---
 frontend/src/pages/device/Settings/Editor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index cc082056e4..54c7d58d00 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -87,8 +87,8 @@ export default {
         limitsLauncherEnabled () {
             if (!this.device.agentVersion) {
                 // Device has not called home yet - so we don't know what agent
-                // version it is running.
-                return false
+                // version it is running, so assume it will be new version
+                return true
             }
             return semver.gte(this.device.agentVersion, '3.8.3')
         },

From 7096027273923f59e6ef27d79af34e0a12191577 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Mar 2026 14:13:01 +0200
Subject: [PATCH 06/11] Refactor side navigation in device settings

---
 frontend/src/pages/device/Settings/index.vue | 45 +++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/device/Settings/index.vue b/frontend/src/pages/device/Settings/index.vue
index 38177b93ae..492f7812c1 100644
--- a/frontend/src/pages/device/Settings/index.vue
+++ b/frontend/src/pages/device/Settings/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col sm:flex-row flex-1 overflow-auto">
-        <SectionSideMenu :options="sideNavigation" />
+        <SectionSideMenu :options="sideNav" />
         <div class="flex-grow flex-1 flex flex-col overflow-auto">
             <router-view :device="device" @device-updated="$emit('device-updated')" @assign-device="$emit('assign-device')" />
         </div>
@@ -29,9 +29,35 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['teamMembership'])
+        ...mapState('account', ['teamMembership']),
+        sideNav () {
+            const canEditDevice = this.hasPermission('device:edit', { application: this.device.application })
+            const isApplicationOwned = this.device.ownerType === 'application'
+
+            const nav = [
+                { name: 'General', path: { name: 'device-settings-general', props: { id: this.device.id } } },
+                { name: 'Environment', path: { name: 'device-settings-environment' } },
+                { name: 'Editor', path: { name: 'device-settings-editor' }, hidden: !(canEditDevice && isApplicationOwned) },
+                { name: 'Security', path: { name: 'device-settings-security' }, hidden: !(canEditDevice && isApplicationOwned) },
+                { name: 'Palette', path: { name: 'device-settings-palette' }, hidden: !(canEditDevice && isApplicationOwned) },
+                { name: 'Danger', path: { name: 'device-settings-danger' }, hidden: !canEditDevice }
+            ]
+
+            if (!this.$route.name.includes('-editor-')) return nav
+
+            return nav.map(route => ({
+                ...route,
+                path: {
+                    ...route.path,
+                    name: route.path.name.replace('device-', 'device-editor-')
+                }
+            }))
+        }
     },
-    mounted () {
+    async mounted () {
+        // compensate for the time it takes for the device to load when reloading the page or accessing the page via URL
+        while (!this.device) await new Promise(resolve => setTimeout(resolve, 250))
+
         if (this.checkAccess()) {
             // device state polling is disabled on settings pages (in ../index.vue:pollTimer())
             // so we need to manually refresh the device upon mounting
@@ -44,19 +70,6 @@ export default {
                 useRouter().push({ replace: true, path: 'overview' })
                 return false
             }
-            this.sideNavigation = [
-                { name: 'General', path: './general' },
-                { name: 'Environment', path: './environment' }
-            ]
-            if (this.hasPermission('device:edit', { application: this.device.application })) {
-                if (this.device.ownerType === 'application') {
-                    this.sideNavigation.push({ name: 'Editor', path: './editor' })
-                    this.sideNavigation.push({ name: 'Security', path: './security' })
-                    this.sideNavigation.push({ name: 'Palette', path: './palette' })
-                }
-                this.sideNavigation.push({ name: 'Danger', path: './danger' })
-            }
-            return true
         }
     },
     watch: {

From c2d7e665b31100059bbc6f6f9ce94b4158fa003e Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Mar 2026 14:14:16 +0200
Subject: [PATCH 07/11] Simplify nested template structure in `Editor.vue` by
 removing redundant `div` wrapping for `limitsLauncherEnabled`.

---
 frontend/src/pages/device/Settings/Editor.vue | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index 54c7d58d00..a49e7dd83a 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -2,17 +2,15 @@
     <form class="space-y-6" data-el="instance-editor" @submit.prevent>
         <FormHeading>Limits</FormHeading>
         <div v-if="limitAvailable">
-            <div v-if="limitsLauncherEnabled">
-                <div class="flex flex-col sm:flex-row">
-                    <div class="w-full max-w-md sm:mr-8">
-                        <FormRow v-model="editable.settings.apiMaxLength" :error="editable.errors.apiMaxLength" type="text">
-                            Max HTTP Payload Size
-                            <template #description>
-                                The maximum number of bytes allowed in a HTTP Request in bytes ('kb','mb' modifiers allowed)
-                            </template>
-                            <template #append><ChangeIndicator :value="editable.changed.apiMaxLength" /></template>
-                        </FormRow>
-                    </div>
+            <div v-if="limitsLauncherEnabled" class="flex flex-col sm:flex-row">
+                <div class="w-full max-w-md sm:mr-8">
+                    <FormRow v-model="editable.settings.apiMaxLength" :error="editable.errors.apiMaxLength" type="text">
+                        Max HTTP Payload Size
+                        <template #description>
+                            The maximum number of bytes allowed in a HTTP Request in bytes ('kb','mb' modifiers allowed)
+                        </template>
+                        <template #append><ChangeIndicator :value="editable.changed.apiMaxLength" /></template>
+                    </FormRow>
                 </div>
             </div>
             <div v-else class="flex flex-col sm:flex-row">

From 424e44e50c81132798f5ec7bd7d728b4d974a882 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Mar 2026 14:18:58 +0200
Subject: [PATCH 08/11] Replace `div` with `NoticeBanner` to improve clarity in
 upgrade message display in `Editor.vue`.

---
 frontend/src/pages/device/Settings/Editor.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index a49e7dd83a..31c0f351d6 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -13,11 +13,11 @@
                     </FormRow>
                 </div>
             </div>
-            <div v-else class="flex flex-col sm:flex-row">
-                <div class="space-y-4 w-full max-w-md sm:mr-8">
-                    Please upgrade your Device Agent to v3.8.4 to be able to set apiMaxLength or debugMaxLength
-                </div>
-            </div>
+            <notice-banner
+                v-else
+                title="Upgrade Required"
+                text="Please upgrade your Device Agent to v3.8.4 to be able to set apiMaxLength or debugMaxLength"
+            />
         </div>
         <FeatureUnavailableToTeam v-if="!limitAvailable" featureName="Set API Size Limits" />
         <div v-if="hasPermission('device:edit-env')" class="space-x-4 whitespace-nowrap">
@@ -37,6 +37,7 @@ import deviceApi from '../../../api/devices.js'
 import FormHeading from '../../../components/FormHeading.vue'
 import FormRow from '../../../components/FormRow.vue'
 import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
+import NoticeBanner from '../../../components/notices/NoticeBanner.vue'
 import usePermissions from '../../../composables/Permissions.js'
 
 import Alerts from '../../../services/alerts.js'
@@ -46,6 +47,7 @@ import ChangeIndicator from '../../admin/Template/components/ChangeIndicator.vue
 export default {
     name: 'DeviceSettingsEditor',
     components: {
+        NoticeBanner,
         FeatureUnavailableToTeam,
         FormRow,
         FormHeading,

From 83751713493d3e71d696cbeb55ba111e7952a056 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Thu, 5 Mar 2026 14:47:02 +0000
Subject: [PATCH 09/11] Fix version number

---
 frontend/src/pages/device/Settings/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index 31c0f351d6..f990e2d5cb 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -16,7 +16,7 @@
             <notice-banner
                 v-else
                 title="Upgrade Required"
-                text="Please upgrade your Device Agent to v3.8.4 to be able to set apiMaxLength or debugMaxLength"
+                text="Please upgrade your Device Agent to v3.8.3 to be able to set apiMaxLength or debugMaxLength"
             />
         </div>
         <FeatureUnavailableToTeam v-if="!limitAvailable" featureName="Set API Size Limits" />

From a585e6a79e7875cbc9f624ff838fefd02cfd8694 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Thu, 5 Mar 2026 15:02:46 +0000
Subject: [PATCH 10/11] Fix Upgrade banner

---
 frontend/src/pages/device/Settings/Editor.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index f990e2d5cb..ba876ab6bc 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -13,11 +13,11 @@
                     </FormRow>
                 </div>
             </div>
-            <notice-banner
-                v-else
-                title="Upgrade Required"
-                text="Please upgrade your Device Agent to v3.8.3 to be able to set apiMaxLength or debugMaxLength"
-            />
+            <notice-banner v-else title="Upgrade Required">
+                <p>
+                    Please <a target="_blank" class="underline" href="https://flowfuse.com/docs/device-agent/install/device-agent-installer/#device-agent">upgrade</a> your Device Agent to v3.8.3 to be able to set apiMaxLength
+                </p>
+            </notice-banner>
         </div>
         <FeatureUnavailableToTeam v-if="!limitAvailable" featureName="Set API Size Limits" />
         <div v-if="hasPermission('device:edit-env')" class="space-x-4 whitespace-nowrap">

From 587d18016472500a39f189d37f6f88be4afbdcab Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Mar 2026 17:13:40 +0200
Subject: [PATCH 11/11] Update link style in upgrade notice to use `ff-link`
 class for consistency in `Editor.vue`

---
 frontend/src/pages/device/Settings/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index ba876ab6bc..e63f6bc8c8 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -15,7 +15,7 @@
             </div>
             <notice-banner v-else title="Upgrade Required">
                 <p>
-                    Please <a target="_blank" class="underline" href="https://flowfuse.com/docs/device-agent/install/device-agent-installer/#device-agent">upgrade</a> your Device Agent to v3.8.3 to be able to set apiMaxLength
+                    Please <a target="_blank" class="ff-link" href="https://flowfuse.com/docs/device-agent/install/device-agent-installer/#device-agent">upgrade</a> your Device Agent to v3.8.3 to be able to set apiMaxLength
                 </p>
             </notice-banner>
         </div>