From 09d977801f99f83a6bcdcb1168d758d281a50706 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 5 Feb 2026 15:56:45 +0200
Subject: [PATCH 1/6] Enhance remote instance editor with connection polling,
 communication handling via WebSocket, and failover for disconnected states.

---
 .../RemoteInstanceEditorWrapper.vue           |  8 ++-
 frontend/src/pages/device/Editor/index.vue    | 66 ++++++++++++++-----
 2 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/immersive-editor/RemoteInstanceEditorWrapper.vue b/frontend/src/components/immersive-editor/RemoteInstanceEditorWrapper.vue
index 3079d4604d..08e396c945 100644
--- a/frontend/src/components/immersive-editor/RemoteInstanceEditorWrapper.vue
+++ b/frontend/src/components/immersive-editor/RemoteInstanceEditorWrapper.vue
@@ -41,8 +41,14 @@ export default {
         isDeviceRunning () {
             return this.computedStatus === 'running'
         },
+        isEditorAvailable () {
+            return Object.prototype.hasOwnProperty.call(this.device, 'editor') &&
+                Object.prototype.hasOwnProperty.call(this.device.editor, 'connected') &&
+                this.device.editor.connected
+        },
         computedStatus () {
-            if (!this.device || !Object.prototype.hasOwnProperty.call(this.device, 'editor')) {
+            if (!this.device || !this.isEditorAvailable) {
+                // forces the loading animation while loading
                 return 'loading'
             }
 
diff --git a/frontend/src/pages/device/Editor/index.vue b/frontend/src/pages/device/Editor/index.vue
index d5e35a0356..b46d3b2462 100644
--- a/frontend/src/pages/device/Editor/index.vue
+++ b/frontend/src/pages/device/Editor/index.vue
@@ -1,7 +1,6 @@
 <template>
     <div ref="resizeTarget" class="ff--immersive-editor-wrapper" :class="{resizing: isEditorResizing}">
         <EditorWrapper
-            :url="device?.editor?.url"
             :disable-events="isEditorResizing"
             :device="device"
         />
@@ -22,7 +21,10 @@
 
             <div class="header">
                 <div class="logo">
-                    <router-link title="Back to remote instance overview" :to="{ name: 'device-overview', params: {id: device.id} }">
+                    <router-link
+                        title="Back to remote instance overview"
+                        :to="{ name: 'device-overview', params: {id: device.id} }"
+                    >
                         <ArrowLeftIcon class="ff-btn--icon" />
                     </router-link>
                 </div>
@@ -123,7 +125,7 @@ export default {
             agentSupportsActions: null,
             device: null,
             openingTunnel: false,
-            openTunnelTimeout: null
+            ws: null
         }
     },
     computed: {
@@ -135,11 +137,20 @@ export default {
         isDevModeAvailable: function () {
             return !!this.features.deviceEditor
         },
+        isEditorAvailable () {
+            return this.device &&
+                Object.prototype.hasOwnProperty.call(this.device, 'editor') &&
+                Object.prototype.hasOwnProperty.call(this.device.editor, 'connected') &&
+                this.device.editor.connected
+        },
         navigation () {
             return [
                 {
                     label: 'Expert',
-                    to: { name: 'device-editor-expert', params: { id: this.device.id } },
+                    to: {
+                        name: 'device-editor-expert',
+                        params: { id: this.device.id }
+                    },
                     tag: 'device-expert',
                     icon: ExpertTabIcon,
                     hidden: !this.featuresCheck.isExpertAssistantFeatureEnabled
@@ -188,12 +199,14 @@ export default {
     },
     watch: {
         device (device) {
-            if (device && Object.prototype.hasOwnProperty.call(device, 'editor')) {
+            if (device && this.isEditorAvailable) {
                 this.setContextDevice(device)
+                this.pollDeviceComms()
+                this.runInitialTease()
             } else {
-                Alerts.emit('Unable to connect to the Remote Instance', 'warning')
-
-                setTimeout(() => this.$router.push({ name: 'device-overview' }), 2000)
+                this.$router.push({ name: 'device-overview' })
+                    .then(() => Alerts.emit('Unable to connect to the Remote Instance', 'warning'))
+                    .catch(e => e)
             }
         }
     },
@@ -217,9 +230,9 @@ export default {
                 })
             })
             .catch(err => err)
-            .finally(() => {
-                this.runInitialTease()
-            })
+    },
+    beforeUnmount () {
+        this.closeComms()
     },
     methods: {
         ...mapActions('context', { setContextDevice: 'setDevice' }),
@@ -228,10 +241,8 @@ export default {
                 this.device = await deviceApi.getDevice(this.$route.params.id)
             } catch (err) {
                 if (err.status === 403) {
-                    return this.$router.push({ name: 'Home' })
+                    return this.$router.push({ name: 'device-overview' })
                 }
-            } finally {
-                this.loading = false
             }
 
             this.agentSupportsDeviceAccess = this.device.agentVersion && semver.gte(this.device.agentVersion, '0.8.0')
@@ -239,11 +250,30 @@ export default {
 
             // todo we first need to get the device and set the team afterwards
             await this.$store.dispatch('account/setTeam', this.device.team.slug)
+        },
+        pollDeviceComms () {
+            if (!this.isEditorAvailable || this.ws) return
+
+            const uri = `/api/v1/devices/${this.device.id}/editor/proxy/comms`
+
+            this.ws = new WebSocket(uri)
+
+            this.ws.addEventListener('error', this.handleCommsDisconnect)
+            this.ws.addEventListener('close', this.handleCommsDisconnect)
+        },
+        handleCommsDisconnect () {
+            this.$router.push({ name: 'device-overview' })
+                .then(() => Alerts.emit('Disconnected from remote instance.', 'warning'))
+                .catch(e => e)
+        },
+        closeComms () {
+            if (this.ws) {
+                this.ws.removeEventListener('error', this.handleCommsDisconnect)
+                this.ws.removeEventListener('close', this.handleCommsDisconnect)
+                this.ws.close()
+                this.ws = null
+            }
         }
     }
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

From 9664732abf485a44b83b1e9bdbdebdb7cbaa6f06 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 6 Feb 2026 13:44:30 +0200
Subject: [PATCH 2/6] Improve responsive behavior and dynamic route handling
 for version history and device overview components.

---
 frontend/src/pages/device/Overview.vue        |  6 +-
 .../src/pages/device/VersionHistory/index.vue | 72 +++++++++++++++++--
 .../pages/instance/VersionHistory/index.vue   | 20 +++++-
 3 files changed, 86 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/device/Overview.vue b/frontend/src/pages/device/Overview.vue
index c686d3be70..c91fc55ca6 100644
--- a/frontend/src/pages/device/Overview.vue
+++ b/frontend/src/pages/device/Overview.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="ff-device-overview grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <div class="flex flex-col gap-4">
+    <div class="ff-device-overview flex gap-4 flex-wrap">
+        <div class="flex flex-1 flex-col gap-4">
             <InfoCard header="Connection:">
                 <template #icon>
                     <WifiIcon />
@@ -154,7 +154,7 @@
                 </template>
             </InfoCard>
         </div>
-        <div>
+        <div class="flex-1">
             <FormHeading>
                 <div class="flex gap-2 items-center text-xl">
                     <TrendingUpIcon class="ff-icon" />Recent Activity
diff --git a/frontend/src/pages/device/VersionHistory/index.vue b/frontend/src/pages/device/VersionHistory/index.vue
index 863762717c..38354e401e 100644
--- a/frontend/src/pages/device/VersionHistory/index.vue
+++ b/frontend/src/pages/device/VersionHistory/index.vue
@@ -1,7 +1,7 @@
 <template>
     <SectionTopMenu>
         <template #hero>
-            <toggle-button-group :buttons="pageToggle" data-nav="page-toggle" title="View" />
+            <toggle-button-group :buttons="pageToggle" data-nav="page-toggle" title="View" :visually-hide-title="true" />
         </template>
         <template #pictogram>
             <img v-if="$route.name.includes('timeline')" alt="info" src="../../../images/pictograms/timeline_red.png">
@@ -20,13 +20,13 @@
             </template>
         </template>
         <template #tools>
-            <section class="flex gap-2 items-center self-center">
+            <section class="flex gap-2 items-center self-center flex-wrap">
                 <ff-checkbox
                     v-model="showDeviceSnapshotsOnly"
                     v-ff-tooltip:left="'Untick this to show snapshots from other Instances within this application'"
                     data-form="device-only-snapshots"
                     label="Instance Snapshots Only"
-                    class="truncate"
+                    class="truncate device-only-snapshots"
                 />
                 <ff-button
                     v-if="hasPermission('snapshot:import', { application: device.application })"
@@ -35,7 +35,8 @@
                     :disabled="busy || isOwnedByAnInstance || isUnassigned"
                     @click="showImportSnapshotDialog"
                 >
-                    <template #icon-left><UploadIcon /></template>Upload Snapshot
+                    <template #icon-left><UploadIcon /></template>
+                    <span class="hidden sm:inline upload-snapshot-text">Upload Snapshot</span>
                 </ff-button>
                 <ff-button
                     v-if="hasPermission('device:snapshot:create', { application: device.application })"
@@ -46,7 +47,8 @@
                     :disabled="!canCreateSnapshot"
                     @click="showCreateSnapshotDialog"
                 >
-                    <template #icon-left><PlusSmIcon /></template>Create Snapshot
+                    <template #icon-left><PlusSmIcon /></template>
+                    <span class="hidden sm:inline create-snapshot-text">Create Snapshot</span>
                 </ff-button>
             </section>
         </template>
@@ -128,8 +130,24 @@ export default {
         return {
             reloadHooks: [],
             pageToggle: [
-                { title: 'Snapshots', to: { name: 'device-snapshots', params: this.$route.params } },
-                { title: 'Timeline', to: { name: 'device-version-history-timeline', params: this.$route.params } }
+                {
+                    title: 'Snapshots',
+                    to: {
+                        name: (() => (this.$route.name.startsWith('device-editor')
+                            ? 'device-editor-snapshots'
+                            : 'device-snapshots'))(),
+                        params: this.$route.params
+                    }
+                },
+                {
+                    title: 'Timeline',
+                    to: {
+                        name: (() => (this.$route.name.startsWith('device-editor')
+                            ? 'device-editor-version-history-timeline'
+                            : 'device-version-history-timeline'))(),
+                        params: this.$route.params
+                    }
+                }
             ],
             showDeviceSnapshotsOnly: true,
             busyMakingSnapshot: false,
@@ -211,4 +229,44 @@ export default {
 .page-fade-enter, .page-fade-leave-to {
     opacity: 0;
 }
+
+// Viewport-based responsive behavior (matches Tailwind sm: breakpoint)
+// Hide button text on narrow viewports (< 640px)
+@media (max-width: 639px) {
+    .upload-snapshot-text,
+    .create-snapshot-text,
+    .device-only-snapshots {
+        display: none;
+    }
+}
+
+// Show button text on wider viewports (>= 640px)
+@media (min-width: 640px) {
+    .upload-snapshot-text,
+    .create-snapshot-text {
+        display: inline;
+    }
+}
+
+// Container query for drawer context - responsive button behavior
+// Breakpoint matches DRAWER_MOBILE_BREAKPOINT constant in Editor/index.vue
+// These override viewport-based rules when inside the drawer
+@container drawer (max-width: 639px) {
+    // Hide text when drawer is narrow - icon-only mode
+    .upload-snapshot-text,
+    .create-snapshot-text,
+    .device-only-snapshots {
+        display: none;
+    }
+}
+
+@container drawer (min-width: 640px) {
+    // Show text when drawer is wide enough
+    .upload-snapshot-text,
+    .create-snapshot-text,
+    .device-only-snapshots {
+        display: inline;
+    }
+}
+
 </style>
diff --git a/frontend/src/pages/instance/VersionHistory/index.vue b/frontend/src/pages/instance/VersionHistory/index.vue
index 63bdd9e8c4..2d37768605 100644
--- a/frontend/src/pages/instance/VersionHistory/index.vue
+++ b/frontend/src/pages/instance/VersionHistory/index.vue
@@ -121,8 +121,24 @@ export default {
         pageToggle () {
             if (this.$route.name.includes('editor')) {
                 return [
-                    { title: 'Snapshots', to: { path: './snapshots', params: this.$route.params } },
-                    { title: 'Timeline', to: { path: './timeline', params: this.$route.params } }
+                    {
+                        title: 'Snapshots',
+                        to: {
+                            name: (() => (this.$route.name.startsWith('instance-editor')
+                                ? 'instance-editor-snapshots'
+                                : 'instance-snapshots'))(),
+                            params: this.$route.params
+                        }
+                    },
+                    {
+                        title: 'Timeline',
+                        to: {
+                            name: (() => (this.$route.name.startsWith('instance-editor')
+                                ? 'instance-editor-version-history-timeline'
+                                : 'instance-version-history-timeline'))(),
+                            params: this.$route.params
+                        }
+                    }
                 ]
             }
 

From bd77424648a1ec548823dbc3621a478307a9836c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 6 Feb 2026 15:34:09 +0200
Subject: [PATCH 3/6] Disable Developer Mode option in navigation and improve
 handling of immersive mode for Version History components.

---
 frontend/src/pages/device/Editor/index.vue    | 12 +++++------
 .../src/pages/device/VersionHistory/index.vue | 20 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/device/Editor/index.vue b/frontend/src/pages/device/Editor/index.vue
index b46d3b2462..70a61145cd 100644
--- a/frontend/src/pages/device/Editor/index.vue
+++ b/frontend/src/pages/device/Editor/index.vue
@@ -187,13 +187,13 @@ export default {
                     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')
                 }
+                // {
+                //     label: 'Developer Mode',
+                //     to: { name: 'device-editor-developer-mode' },
+                //     tag: 'device-devmode',
+                //     hidden: !(this.isDevModeAvailable && this.device.mode === 'developer')
+                // }
             ]
         }
     },
diff --git a/frontend/src/pages/device/VersionHistory/index.vue b/frontend/src/pages/device/VersionHistory/index.vue
index 38354e401e..5b8df8e15c 100644
--- a/frontend/src/pages/device/VersionHistory/index.vue
+++ b/frontend/src/pages/device/VersionHistory/index.vue
@@ -1,13 +1,13 @@
 <template>
     <SectionTopMenu>
-        <template #hero>
+        <template v-if="!isInImmersiveMode" #hero>
             <toggle-button-group :buttons="pageToggle" data-nav="page-toggle" title="View" :visually-hide-title="true" />
         </template>
-        <template #pictogram>
+        <template v-if="!isInImmersiveMode" #pictogram>
             <img v-if="$route.name.includes('timeline')" alt="info" src="../../../images/pictograms/timeline_red.png">
             <img v-else-if="$route.name.includes('snapshots')" alt="info" src="../../../images/pictograms/snapshot_red.png">
         </template>
-        <template #helptext>
+        <template v-if="!isInImmersiveMode" #helptext>
             <template v-if="$route.name.includes('timeline')">
                 <p>The <b>Timeline</b> provides a concise, chronological view of key activities within your Node-RED instance.</p>
                 <p>It tracks various events such as pipeline stage deployments, snapshot restorations, flow deployments, snapshot creations, and updates to instance settings.</p>
@@ -26,7 +26,7 @@
                     v-ff-tooltip:left="'Untick this to show snapshots from other Instances within this application'"
                     data-form="device-only-snapshots"
                     label="Instance Snapshots Only"
-                    class="truncate device-only-snapshots"
+                    class="truncate"
                 />
                 <ff-button
                     v-if="hasPermission('snapshot:import', { application: device.application })"
@@ -181,6 +181,9 @@ export default {
                 return 'Instance must be owned by an Application to create a Snapshot'
             }
             return !this.canCreateSnapshot ? 'Instance must be in \'Developer Mode\' to create a Snapshot' : 'Capture a Snapshot of this Instance.'
+        },
+        isInImmersiveMode () {
+            return this.$route.name.startsWith('device-editor-')
         }
     },
     methods: {
@@ -234,8 +237,7 @@ export default {
 // Hide button text on narrow viewports (< 640px)
 @media (max-width: 639px) {
     .upload-snapshot-text,
-    .create-snapshot-text,
-    .device-only-snapshots {
+    .create-snapshot-text {
         display: none;
     }
 }
@@ -254,8 +256,7 @@ export default {
 @container drawer (max-width: 639px) {
     // Hide text when drawer is narrow - icon-only mode
     .upload-snapshot-text,
-    .create-snapshot-text,
-    .device-only-snapshots {
+    .create-snapshot-text {
         display: none;
     }
 }
@@ -263,8 +264,7 @@ export default {
 @container drawer (min-width: 640px) {
     // Show text when drawer is wide enough
     .upload-snapshot-text,
-    .create-snapshot-text,
-    .device-only-snapshots {
+    .create-snapshot-text {
         display: inline;
     }
 }

From 21d63b3732e880f2d8a479dadc043a09b76c5491 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 6 Feb 2026 15:50:49 +0200
Subject: [PATCH 4/6] Add resizing state handling to resize bars and enhance
 styling for active resize states

---
 frontend/src/components/ResizeBar.vue                     | 6 +++++-
 frontend/src/components/expert/ExpertChatInput.vue        | 6 ++++--
 frontend/src/pages/instance/Editor/index.vue              | 1 +
 .../ui-components/stylesheets/ff-immersive-editor.scss    | 8 ++++----
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ResizeBar.vue b/frontend/src/components/ResizeBar.vue
index 064107714e..704fbc47e5 100644
--- a/frontend/src/components/ResizeBar.vue
+++ b/frontend/src/components/ResizeBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="resize-bar" :class="{horizontal: isHorizontal}" />
+    <div class="resize-bar" :class="{horizontal: isHorizontal, resizing: isResizing}" />
 </template>
 
 <script>
@@ -9,6 +9,10 @@ export default {
         direction: {
             type: String,
             default: 'vertical' // vertical || horizontal
+        },
+        isResizing: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
diff --git a/frontend/src/components/expert/ExpertChatInput.vue b/frontend/src/components/expert/ExpertChatInput.vue
index 78a32805d0..f11dda0a2e 100644
--- a/frontend/src/components/expert/ExpertChatInput.vue
+++ b/frontend/src/components/expert/ExpertChatInput.vue
@@ -1,6 +1,7 @@
 <template>
     <div ref="resizeTarget" class="ff-expert-input" :style="{height: heightStyle}">
         <resize-bar
+            :is-resizing="isInputResizing"
             direction="horizontal"
             @mousedown="startResize"
         />
@@ -105,12 +106,13 @@ export default {
     },
     emits: ['send', 'stop', 'start-over'],
     setup () {
-        const { startResize, heightStyle, bindResizer } = useResizingHelper()
+        const { startResize, heightStyle, bindResizer, isResizing: isInputResizing } = useResizingHelper()
 
         return {
             startResize,
             bindResizer,
-            heightStyle
+            heightStyle,
+            isInputResizing
         }
     },
     data () {
diff --git a/frontend/src/pages/instance/Editor/index.vue b/frontend/src/pages/instance/Editor/index.vue
index da39875b08..d0fb4be8c7 100644
--- a/frontend/src/pages/instance/Editor/index.vue
+++ b/frontend/src/pages/instance/Editor/index.vue
@@ -19,6 +19,7 @@
             @mouseleave="handleDrawerMouseLeave"
         >
             <resize-bar
+                :is-resizing="isEditorResizing"
                 @mousedown="startEditorResize"
             />
 
diff --git a/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss b/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss
index 3cb5b9b664..3b934a51fe 100644
--- a/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss
+++ b/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss
@@ -127,6 +127,10 @@
     }
   }
 
+  .resize-bar.resizing {
+    background-color: $ff-blue-500;
+  }
+
   &.resizing {
     cursor: ew-resize;
     user-select: none;
@@ -134,10 +138,6 @@
     -webkit-user-select: none;
     -ms-user-select: none;
 
-    .resize-bar {
-      background-color: $ff-blue-500;
-    }
-
     .tabs-wrapper {
       transition: none;
     }

From c1b8efa3ce38b4f09ec1de7acec67059d882a717 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 6 Feb 2026 16:01:43 +0200
Subject: [PATCH 5/6] Enable the remote instance immersive editor

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

diff --git a/frontend/src/pages/device/index.vue b/frontend/src/pages/device/index.vue
index 517c409a50..77c32e7c21 100644
--- a/frontend/src/pages/device/index.vue
+++ b/frontend/src/pages/device/index.vue
@@ -427,7 +427,7 @@ export default {
         },
         openEditor () {
             this.$store.dispatch('ux/validateUserAction', 'hasOpenedDeviceEditor')
-            window.open(this.deviceEditorURL, `device-editor-${this.device.id}`)
+            this.$router.push({ name: 'device-editor' })
         },
         async openTunnel (launchEditor = false) {
             try {

From cc38006a7ed1f97e58cbdae22d61ef85fb911464 Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Fri, 6 Feb 2026 16:39:21 +0200
Subject: [PATCH 6/6] Update frontend/src/pages/device/Editor/index.vue

Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
---
 frontend/src/pages/device/Editor/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/device/Editor/index.vue b/frontend/src/pages/device/Editor/index.vue
index b46d3b2462..ab347cc101 100644
--- a/frontend/src/pages/device/Editor/index.vue
+++ b/frontend/src/pages/device/Editor/index.vue
@@ -204,6 +204,7 @@ export default {
                 this.pollDeviceComms()
                 this.runInitialTease()
             } else {
+                this.closeComms()
                 this.$router.push({ name: 'device-overview' })
                     .then(() => Alerts.emit('Unable to connect to the Remote Instance', 'warning'))
                     .catch(e => e)