From 6554bd26aeabda327c4fd778f5b247a07c58e68d Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 4 Feb 2026 14:14:05 +0200
Subject: [PATCH 1/5] Integrate drawer and navigation enhancements into
 immersive editor, adding advanced route handling, dynamic resizing, and
 developer mode support.

---
 frontend/src/pages/device/Editor/index.vue | 123 ++++++++++++++++++++-
 frontend/src/pages/device/Editor/routes.js |  16 ++-
 2 files changed, 133 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/device/Editor/index.vue b/frontend/src/pages/device/Editor/index.vue
index 9d798e6022..c2ce4dd1fd 100644
--- a/frontend/src/pages/device/Editor/index.vue
+++ b/frontend/src/pages/device/Editor/index.vue
@@ -2,9 +2,12 @@
     <div ref="resizeTarget" class="ff--immersive-editor-wrapper" :class="{resizing: isEditorResizing}">
         <EditorWrapper
             :url="device?.editor?.url"
+            :disable-events="isEditorResizing"
             :device="device"
         />
 
+        <DrawerTrigger :is-hidden="drawer.open" @toggle="toggleDrawer" />
+
         <section
             class="tabs-wrapper drawer"
             :class="{'open': drawer.open, resizing: isEditorResizing}"
@@ -16,25 +19,64 @@
             <resize-bar
                 @mousedown="startEditorResize"
             />
+
+            <div class="header">
+                <div class="logo">
+                    <router-link title="Back to remote instance overview" :to="{ name: 'device-overview', params: {id: device.id} }">
+                        <ArrowLeftIcon class="ff-btn--icon" />
+                    </router-link>
+                </div>
+                <ff-tabs :tabs="navigation" class="tabs" />
+                <div class="side-actions">
+                    <button
+                        title="Close drawer"
+                        type="button"
+                        class="close-drawer-button"
+                        aria-label="Close drawer"
+                        @click="toggleDrawer"
+                    >
+                        <XIcon class="ff-btn--icon" />
+                    </button>
+                </div>
+            </div>
+
+            <ff-page :no-padding="isExpertRoute">
+                <router-view
+                    :device="device"
+                    :instance="device.instance"
+                />
+            </ff-page>
         </section>
     </div>
 </template>
 
 <script>
 
+import { ArrowLeftIcon, XIcon } from '@heroicons/vue/solid/index.js'
 import semver from 'semver'
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 
 import deviceApi from '../../../api/devices.js'
 import ResizeBar from '../../../components/ResizeBar.vue'
+import DrawerTrigger from '../../../components/immersive-editor/DrawerTrigger.vue'
 import EditorWrapper from '../../../components/immersive-editor/RemoteInstanceEditorWrapper.vue'
 import { useDrawerHelper } from '../../../composables/DrawerHelper.js'
 import { useResizingHelper } from '../../../composables/ResizingHelper.js'
+import FfPage from '../../../layouts/Page.vue'
 import Alerts from '../../../services/alerts.js'
 
+const DRAWER_DEFAULT_WIDTH = 550 // Default drawer width in pixels
+const DRAWER_MAX_VIEWPORT_MARGIN = 200 // Space to preserve when drawer is at max width
+const DRAWER_MAX_WIDTH_RATIO = 0.9 // Maximum drawer width as percentage of viewport (desktop)
+const DRAWER_MIN_WIDTH = 310 // Minimum drawer width in pixels
+
 export default {
     name: 'DeviceEditor',
     components: {
+        XIcon,
+        ArrowLeftIcon,
+        FfPage,
+        DrawerTrigger,
         ResizeBar,
         EditorWrapper
     },
@@ -54,11 +96,13 @@ export default {
             startResize: startEditorResize,
             widthStyle: editorWidthStyle,
             bindResizer: bindDrawerResizer,
-            isResizing: isEditorResizing
+            isResizing: isEditorResizing,
+            setEditorWidth: setDeviceEditorWidth
         } = useResizingHelper()
 
         return {
             startEditorResize,
+            setDeviceEditorWidth,
             bindDrawerResizer,
             editorWidthStyle,
             drawer,
@@ -82,7 +126,56 @@ export default {
         }
     },
     computed: {
-
+        ...mapState('account', ['features']),
+        isExpertRoute () {
+            return this.$route.name === 'instance-editor-expert'
+        },
+        isDevModeAvailable: function () {
+            return !!this.features.deviceEditor
+        },
+        navigation () {
+            return [
+                {
+                    label: 'Overview',
+                    to: { name: 'device-editor-overview' },
+                    tag: 'device-overview'
+                },
+                {
+                    label: 'Version History',
+                    to: {
+                        name: 'device-editor-version-history',
+                        params: { id: this.$route.params.id }
+                    },
+                    tag: 'version-history'
+                },
+                {
+                    label: 'Audit Log',
+                    to: { name: 'device-editor-audit-log' },
+                    tag: 'device-audit-log'
+                },
+                {
+                    label: 'Node-RED Logs',
+                    to: { name: 'device-editor-logs' },
+                    tag: 'device-logs'
+                },
+                {
+                    label: 'Performance',
+                    to: { name: 'device-editor-performance' },
+                    tag: 'device-performance'
+                },
+                {
+                    label: 'Settings',
+                    to: { name: 'device-editor-settings' },
+                    tag: 'device-settings'
+                },
+                {
+                    label: 'Developer Mode',
+                    to: { name: 'device-editor-developer-mode' },
+                    tag: 'device-devmode',
+                    hidden: !(this.isDevModeAvailable && this.device.mode === 'developer')
+                }
+            ]
+        }
     },
     watch: {
         device (device) {
@@ -96,7 +189,28 @@ export default {
         }
     },
     mounted () {
-        this.loadDevice().catch(err => err)
+        this.loadDevice()
+            .then(() => {
+                this.bindDrawer({
+                    containerEl: this.$el,
+                    getInstance: () => this.device,
+                    setEditorWidth: this.setDeviceEditorWidth,
+                    defaultWidth: DRAWER_DEFAULT_WIDTH
+                })
+            })
+            .then(() => {
+                this.bindDrawerResizer({
+                    component: this.$refs.resizeTarget,
+                    initialWidth: DRAWER_DEFAULT_WIDTH,
+                    minWidth: DRAWER_MIN_WIDTH,
+                    maxViewportMarginX: DRAWER_MAX_VIEWPORT_MARGIN,
+                    maxWidthRatio: DRAWER_MAX_WIDTH_RATIO
+                })
+            })
+            .catch(err => err)
+            .finally(() => {
+                this.runInitialTease()
+            })
     },
     methods: {
         ...mapActions('context', { setContextDevice: 'setDevice' }),
@@ -105,7 +219,6 @@ export default {
                 this.device = await deviceApi.getDevice(this.$route.params.id)
             } catch (err) {
                 if (err.status === 403) {
-                    clearTimeout(this.openTunnelTimeout)
                     return this.$router.push({ name: 'Home' })
                 }
             } finally {
diff --git a/frontend/src/pages/device/Editor/routes.js b/frontend/src/pages/device/Editor/routes.js
index 0cfe6dd8ec..72518bbdb2 100644
--- a/frontend/src/pages/device/Editor/routes.js
+++ b/frontend/src/pages/device/Editor/routes.js
@@ -1,3 +1,6 @@
+// import store from '../../../store/index.js'
+import { children } from '../routes.js'
+
 import DeviceEditor from './index.vue'
 
 export default [
@@ -8,6 +11,17 @@ export default [
         meta: {
             title: 'Device - Editor',
             layout: 'plain'
-        }
+        },
+        redirect: to => {
+            return { name: 'device-editor-overview', params: { id: to.params.id } }
+
+            // const name = store.getters['account/featuresCheck'].isExpertAssistantFeatureEnabled
+            //     ? 'device-editor-expert'
+            //     : 'device-editor-overview'
+            // return { name, params: { id: to.params.id } }
+        },
+        children: [
+            ...children.map(child => ({ ...child, name: child.name.replace('device-', 'device-editor-') }))
+        ]
     }
 ]

From 6c0ddaa7ecc68afdff1b6a3dfd8c088c0aa365c2 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 4 Feb 2026 14:24:47 +0200
Subject: [PATCH 2/5] Add expert route and navigation support for the immersive
 device editor

---
 frontend/src/pages/device/Editor/index.vue   | 13 ++++++++++--
 frontend/src/pages/device/Editor/routes.js   | 22 +++++++++++++-------
 frontend/src/pages/instance/Editor/routes.js |  2 +-
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/device/Editor/index.vue b/frontend/src/pages/device/Editor/index.vue
index c2ce4dd1fd..d5e35a0356 100644
--- a/frontend/src/pages/device/Editor/index.vue
+++ b/frontend/src/pages/device/Editor/index.vue
@@ -54,10 +54,11 @@
 
 import { ArrowLeftIcon, XIcon } from '@heroicons/vue/solid/index.js'
 import semver from 'semver'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 
 import deviceApi from '../../../api/devices.js'
 import ResizeBar from '../../../components/ResizeBar.vue'
+import ExpertTabIcon from '../../../components/icons/ff-minimal-grey.js'
 import DrawerTrigger from '../../../components/immersive-editor/DrawerTrigger.vue'
 import EditorWrapper from '../../../components/immersive-editor/RemoteInstanceEditorWrapper.vue'
 import { useDrawerHelper } from '../../../composables/DrawerHelper.js'
@@ -127,14 +128,22 @@ export default {
     },
     computed: {
         ...mapState('account', ['features']),
+        ...mapGetters('account', ['featuresCheck']),
         isExpertRoute () {
-            return this.$route.name === 'instance-editor-expert'
+            return this.$route.name === 'device-editor-expert'
         },
         isDevModeAvailable: function () {
             return !!this.features.deviceEditor
         },
         navigation () {
             return [
+                {
+                    label: 'Expert',
+                    to: { name: 'device-editor-expert', params: { id: this.device.id } },
+                    tag: 'device-expert',
+                    icon: ExpertTabIcon,
+                    hidden: !this.featuresCheck.isExpertAssistantFeatureEnabled
+                },
                 {
                     label: 'Overview',
                     to: { name: 'device-editor-overview' },
diff --git a/frontend/src/pages/device/Editor/routes.js b/frontend/src/pages/device/Editor/routes.js
index 72518bbdb2..d07680c52d 100644
--- a/frontend/src/pages/device/Editor/routes.js
+++ b/frontend/src/pages/device/Editor/routes.js
@@ -1,4 +1,4 @@
-// import store from '../../../store/index.js'
+import store from '../../../store/index.js'
 import { children } from '../routes.js'
 
 import DeviceEditor from './index.vue'
@@ -13,15 +13,21 @@ export default [
             layout: 'plain'
         },
         redirect: to => {
-            return { name: 'device-editor-overview', params: { id: to.params.id } }
-
-            // const name = store.getters['account/featuresCheck'].isExpertAssistantFeatureEnabled
-            //     ? 'device-editor-expert'
-            //     : 'device-editor-overview'
-            // return { name, params: { id: to.params.id } }
+            const name = store.getters['account/featuresCheck'].isExpertAssistantFeatureEnabled
+                ? 'device-editor-expert'
+                : 'device-editor-overview'
+            return { name, params: { id: to.params.id } }
         },
         children: [
-            ...children.map(child => ({ ...child, name: child.name.replace('device-', 'device-editor-') }))
+            ...children.map(child => ({ ...child, name: child.name.replace('device-', 'device-editor-') })),
+            {
+                path: 'expert',
+                name: 'device-editor-expert',
+                component: () => import('../../../components/expert/Expert.vue'),
+                meta: {
+                    title: 'Remote Instance - Expert'
+                }
+            }
         ]
     }
 ]
diff --git a/frontend/src/pages/instance/Editor/routes.js b/frontend/src/pages/instance/Editor/routes.js
index 8bcc9202d1..b5d6eca7c4 100644
--- a/frontend/src/pages/instance/Editor/routes.js
+++ b/frontend/src/pages/instance/Editor/routes.js
@@ -72,7 +72,7 @@ export default [
                 name: 'instance-editor-expert',
                 component: () => import('../../../components/expert/Expert.vue'),
                 meta: {
-                    title: 'Instance - Expert'
+                    title: 'Hosted Instance - Expert'
                 }
             }
         ]

From 1299491d1a78d2b7bd4249922bc8a3dbf46a0bfe Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Feb 2026 22:45:56 +0200
Subject: [PATCH 3/5] rename nested remote instance immersive editor nested
 routes dynamically

---
 frontend/src/pages/device/Editor/routes.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/device/Editor/routes.js b/frontend/src/pages/device/Editor/routes.js
index d07680c52d..34c0f642dd 100644
--- a/frontend/src/pages/device/Editor/routes.js
+++ b/frontend/src/pages/device/Editor/routes.js
@@ -3,6 +3,14 @@ import { children } from '../routes.js'
 
 import DeviceEditor from './index.vue'
 
+const renameRoute = (child) => {
+    return {
+        ...child,
+        name: child.name.replace('device-', 'device-editor-'),
+        ...(child.children ? { children: child.children.map(renameRoute) } : {})
+    }
+}
+
 export default [
     {
         path: '/device/:id/editor',
@@ -19,7 +27,7 @@ export default [
             return { name, params: { id: to.params.id } }
         },
         children: [
-            ...children.map(child => ({ ...child, name: child.name.replace('device-', 'device-editor-') })),
+            ...children.map(child => renameRoute(child)),
             {
                 path: 'expert',
                 name: 'device-editor-expert',

From c73d3b165bb1f404614a8ec969402851eb6dbd7e Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Feb 2026 22:56:22 +0200
Subject: [PATCH 4/5] Update device route redirection logic to support
 immersive editor mode

---
 frontend/src/pages/device/routes.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/device/routes.js b/frontend/src/pages/device/routes.js
index f06043e27f..d6b8f762c4 100644
--- a/frontend/src/pages/device/routes.js
+++ b/frontend/src/pages/device/routes.js
@@ -90,9 +90,14 @@ const children = [
         meta: {
             title: 'Device - Version History'
         },
-        redirect: to => {
+        redirect: (to, from) => {
             const features = store.getters['account/featuresCheck']
-            const name = features.isTimelineFeatureEnabled ? 'device-version-history-timeline' : 'device-snapshots'
+            let name = features.isTimelineFeatureEnabled ? 'device-version-history-timeline' : 'device-snapshots'
+
+            if (to.name.startsWith('device-editor-')) { // redirect to immersive mode when needed
+                name = name.replace('device-', 'device-editor-')
+            }
+
             return {
                 name,
                 params: to.params

From a25cdadf8bea5ec071143f9e9b7349612089d78f Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Feb 2026 23:01:51 +0200
Subject: [PATCH 5/5] handle device settings immersive mode redirect

---
 frontend/src/pages/device/routes.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/device/routes.js b/frontend/src/pages/device/routes.js
index d6b8f762c4..0d46eaa663 100644
--- a/frontend/src/pages/device/routes.js
+++ b/frontend/src/pages/device/routes.js
@@ -30,7 +30,9 @@ const children = [
         meta: {
             title: 'Device - Settings'
         },
-        redirect: { name: 'device-settings-general' },
+        redirect: to => {
+            return to.name.startsWith('device-editor-') ? { name: 'device-editor-settings-general' } : { name: 'device-settings-general' }
+        },
         children: [
             {
                 name: 'device-settings-general',
@@ -90,7 +92,7 @@ const children = [
         meta: {
             title: 'Device - Version History'
         },
-        redirect: (to, from) => {
+        redirect: to => {
             const features = store.getters['account/featuresCheck']
             let name = features.isTimelineFeatureEnabled ? 'device-version-history-timeline' : 'device-snapshots'