From 8d95884c6557cd15b3aab7ff79e280a457d6e572 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 22 Jul 2026 06:22:13 -0700
Subject: [PATCH 01/13] Refactor immersive editor logic into a composable and
 move shared styles

---
 .../immersive-editor/EditorDrawer.vue         | 199 ++----------------
 frontend/src/composables/ImmersiveDrawer.ts   | 111 ++++++++++
 .../stylesheets/ff-immersive-editor.scss      |  93 ++++++++
 3 files changed, 216 insertions(+), 187 deletions(-)
 create mode 100644 frontend/src/composables/ImmersiveDrawer.ts

diff --git a/frontend/src/components/immersive-editor/EditorDrawer.vue b/frontend/src/components/immersive-editor/EditorDrawer.vue
index c0e5b6c549..4557b44c24 100644
--- a/frontend/src/components/immersive-editor/EditorDrawer.vue
+++ b/frontend/src/components/immersive-editor/EditorDrawer.vue
@@ -116,20 +116,15 @@
 import { HomeIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
 import { storeToRefs } from 'pinia'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, nextTick, onMounted, watch } from 'vue'
 
 import getAppOrchestrator from '../../services/app.orchestrator'
 import ResizeBar from '../ResizeBar.vue'
 
 import EditorDrawerSettings from './EditorDrawerSettings.vue'
 
+import { useImmersiveDrawer } from '@/composables/ImmersiveDrawer'
 import { useContextStore } from '@/stores/context.js'
-import { useUxDrawersStore } from '@/stores/ux-drawers.js'
-
-const DRAWER_MIN_WIDTH = 310
-const DRAWER_MAX_VIEWPORT_MARGIN = 200
-const DRAWER_MAX_WIDTH_RATIO = 0.9
 
 const props = defineProps({
     navigation: {
@@ -148,42 +143,19 @@ const props = defineProps({
 
 const emit = defineEmits(['resizing'])
 
-const drawersStore = useUxDrawersStore()
 const contextStore = useContextStore()
-const { editorImmersiveDrawer } = storeToRefs(drawersStore)
 const { editorEntityType } = storeToRefs(contextStore)
-const route = useRoute()
-
-const resizing = ref(false)
-const startX = ref(0)
-const startWidth = ref(0)
-const windowWidth = ref(window.innerWidth)
-
-const isEditorResizing = computed(() => resizing.value)
 
-const drawerStyle = computed(() => {
-    if (!editorImmersiveDrawer.value.state) return {}
-    const width = Math.min(
-        editorImmersiveDrawer.value.width,
-        windowWidth.value * DRAWER_MAX_WIDTH_RATIO,
-        windowWidth.value - DRAWER_MAX_VIEWPORT_MARGIN
-    )
-    return { width: `${width}px`, order: editorImmersiveDrawer.value.side === 'right' ? 1 : -1 }
-})
-
-const hasStackedView = computed(() => editorImmersiveDrawer.value.viewStack.length > 0)
-const currentStackView = computed(() => {
-    const stack = editorImmersiveDrawer.value.viewStack
-    return stack[stack.length - 1] || null
-})
-const stackedActions = computed(() => {
-    const view = currentStackView.value
-    if (!view?.actions) return []
-    return view.actions.filter(action => {
-        if (typeof action.hidden === 'function') return !action.hidden()
-        return !action.hidden
-    })
-})
+const {
+    drawersStore,
+    editorImmersiveDrawer,
+    isResizing: isEditorResizing,
+    drawerStyle,
+    hasStackedView,
+    currentStackView,
+    stackedActions,
+    startResize: startEditorResize
+} = useImmersiveDrawer({ onResizingChange: resizing => emit('resizing', resizing) })
 
 const homeRoute = computed(() => {
     if (!props.entity?.id) return null
@@ -211,160 +183,13 @@ function notifyDrawerState () {
     })
 }
 
-function handleResize (e) {
-    if (!resizing.value) return
-
-    const isLeftSide = editorImmersiveDrawer.value.side === 'left'
-    const delta = isLeftSide
-        ? e.clientX - startX.value
-        : startX.value - e.clientX
-
-    const newWidth = Math.min(
-        Math.max(DRAWER_MIN_WIDTH, startWidth.value + delta),
-        window.innerWidth * DRAWER_MAX_WIDTH_RATIO,
-        window.innerWidth - DRAWER_MAX_VIEWPORT_MARGIN
-    )
-
-    drawersStore.setEditorImmersiveDrawerWidth(newWidth)
-}
-
-function stopResize () {
-    resizing.value = false
-    emit('resizing', false)
-    document.removeEventListener('mousemove', handleResize)
-    document.removeEventListener('mouseup', stopResize)
-}
-
-function startEditorResize (e) {
-    resizing.value = true
-    emit('resizing', true)
-    startX.value = e.clientX
-    startWidth.value = editorImmersiveDrawer.value.width
-
-    document.addEventListener('mousemove', handleResize)
-    document.addEventListener('mouseup', stopResize)
-}
-
-function onWindowResize () {
-    windowWidth.value = window.innerWidth
-}
-
 watch(() => editorImmersiveDrawer.value.state, () => {
     nextTick(notifyDrawerState)
 })
 
-watch(() => route.name, () => {
-    drawersStore.clearEditorImmersiveViewStack()
-})
-
 onMounted(() => {
-    drawersStore.setEditorImmersiveActive(true)
-    window.addEventListener('resize', onWindowResize)
     nextTick(notifyDrawerState)
 })
 
-onUnmounted(() => {
-    drawersStore.setEditorImmersiveActive(false)
-    drawersStore.clearEditorImmersiveViewStack()
-    window.removeEventListener('resize', onWindowResize)
-    document.removeEventListener('mousemove', handleResize)
-    document.removeEventListener('mouseup', stopResize)
-})
-
 defineExpose({ notifyDrawerState })
 </script>
-
-<style lang="scss">
-.ff--immersive-editor-wrapper .tabs-wrapper.drawer {
-    &.pinned {
-        position: relative;
-        left: auto;
-        top: auto;
-        height: 100%;
-        transform: none;
-        box-shadow: none;
-
-        &.open {
-            border-right: 1px solid var(--ff-color-border);
-
-            &.side-right {
-                border-right: none;
-                border-left: 1px solid var(--ff-color-border);
-            }
-        }
-    }
-
-    &:not(.pinned).side-right {
-        left: auto;
-        right: 0;
-        transform: translateX(100%);
-
-        &.open {
-            transform: translateX(0);
-            box-shadow: -5px 0 8px rgba(0, 0, 0, 0.10);
-        }
-    }
-
-    .ff-layout--immersive--fullscreen &:not(.pinned) {
-        top: 0;
-        height: 100%;
-    }
-
-    &.side-right .resize-bar {
-        left: 0;
-        right: auto;
-        border-right: none;
-        border-left: 1px solid var(--ff-color-border-strong);
-
-        &::before {
-            left: -3px;
-        }
-    }
-
-    .header,
-    .header--stacked {
-        min-height: 46px;
-    }
-
-    .drawer-header-btn {
-        align-self: stretch;
-        background: none;
-        border: none;
-        padding: 0 15px;
-        color: var(--ff-color-text-subtle);
-        font: inherit;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        transition: all 0.2s ease;
-
-        .ff-btn--icon {
-            width: 18px;
-            height: 18px;
-        }
-
-        &:hover {
-            background: var(--ff-color-bg-surface-raised);
-            color: var(--ff-color-text-muted);
-        }
-
-        &:active {
-            background: var(--ff-color-bg-emphasis);
-        }
-    }
-
-    .editor-drawer-stack-title {
-        flex: 1;
-        font-weight: 600;
-        font-size: 14px;
-        color: var(--ff-color-text);
-        padding: 0 10px;
-        display: flex;
-        align-items: center;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-</style>
diff --git a/frontend/src/composables/ImmersiveDrawer.ts b/frontend/src/composables/ImmersiveDrawer.ts
new file mode 100644
index 0000000000..37530e1cfa
--- /dev/null
+++ b/frontend/src/composables/ImmersiveDrawer.ts
@@ -0,0 +1,111 @@
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
+const DRAWER_MIN_WIDTH = 310
+const DRAWER_MAX_VIEWPORT_MARGIN = 200
+const DRAWER_MAX_WIDTH_RATIO = 0.9
+
+interface ImmersiveDrawerOptions {
+    onResizingChange?: (resizing: boolean) => void
+}
+
+export function useImmersiveDrawer (options: ImmersiveDrawerOptions = {}) {
+    const { onResizingChange } = options
+    const drawersStore = useUxDrawersStore()
+    const { editorImmersiveDrawer } = storeToRefs(drawersStore)
+    const route = useRoute()
+
+    const resizing = ref(false)
+    const startX = ref(0)
+    const startWidth = ref(0)
+    const windowWidth = ref(window.innerWidth)
+
+    const isResizing = computed(() => resizing.value)
+
+    const drawerStyle = computed(() => {
+        if (!editorImmersiveDrawer.value.state) return {}
+        const width = Math.min(
+            editorImmersiveDrawer.value.width,
+            windowWidth.value * DRAWER_MAX_WIDTH_RATIO,
+            windowWidth.value - DRAWER_MAX_VIEWPORT_MARGIN
+        )
+        return { width: `${width}px`, order: editorImmersiveDrawer.value.side === 'right' ? 1 : -1 }
+    })
+
+    const hasStackedView = computed(() => editorImmersiveDrawer.value.viewStack.length > 0)
+    const currentStackView = computed(() => {
+        const stack = editorImmersiveDrawer.value.viewStack
+        return stack[stack.length - 1] || null
+    })
+    const stackedActions = computed(() => {
+        const view = currentStackView.value
+        if (!view?.actions) return []
+        return view.actions.filter((action: { hidden?: unknown }) => {
+            if (typeof action.hidden === 'function') return !action.hidden()
+            return !action.hidden
+        })
+    })
+
+    function handleResize (e: MouseEvent) {
+        if (!resizing.value) return
+        const isLeftSide = editorImmersiveDrawer.value.side === 'left'
+        const delta = isLeftSide ? e.clientX - startX.value : startX.value - e.clientX
+        const newWidth = Math.min(
+            Math.max(DRAWER_MIN_WIDTH, startWidth.value + delta),
+            window.innerWidth * DRAWER_MAX_WIDTH_RATIO,
+            window.innerWidth - DRAWER_MAX_VIEWPORT_MARGIN
+        )
+        drawersStore.setEditorImmersiveDrawerWidth(newWidth)
+    }
+
+    function stopResize () {
+        resizing.value = false
+        onResizingChange?.(false)
+        document.removeEventListener('mousemove', handleResize)
+        document.removeEventListener('mouseup', stopResize)
+    }
+
+    function startResize (e: MouseEvent) {
+        resizing.value = true
+        onResizingChange?.(true)
+        startX.value = e.clientX
+        startWidth.value = editorImmersiveDrawer.value.width
+        document.addEventListener('mousemove', handleResize)
+        document.addEventListener('mouseup', stopResize)
+    }
+
+    function onWindowResize () {
+        windowWidth.value = window.innerWidth
+    }
+
+    watch(() => route.name, () => {
+        drawersStore.clearEditorImmersiveViewStack()
+    })
+
+    onMounted(() => {
+        drawersStore.setEditorImmersiveActive(true)
+        window.addEventListener('resize', onWindowResize)
+    })
+
+    onUnmounted(() => {
+        drawersStore.setEditorImmersiveActive(false)
+        drawersStore.clearEditorImmersiveViewStack()
+        window.removeEventListener('resize', onWindowResize)
+        document.removeEventListener('mousemove', handleResize)
+        document.removeEventListener('mouseup', stopResize)
+    })
+
+    return {
+        drawersStore,
+        editorImmersiveDrawer,
+        isResizing,
+        drawerStyle,
+        hasStackedView,
+        currentStackView,
+        stackedActions,
+        startResize
+    }
+}
diff --git a/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss b/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss
index 6337b0507e..02515b6d4f 100644
--- a/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss
+++ b/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss
@@ -145,3 +145,96 @@
     }
   }
 }
+
+.ff--immersive-editor-wrapper .tabs-wrapper.drawer {
+  &.pinned {
+    position: relative;
+    left: auto;
+    top: auto;
+    height: 100%;
+    transform: none;
+    box-shadow: none;
+
+    &.open {
+      border-right: 1px solid var(--ff-color-border);
+
+      &.side-right {
+        border-right: none;
+        border-left: 1px solid var(--ff-color-border);
+      }
+    }
+  }
+
+  &:not(.pinned).side-right {
+    left: auto;
+    right: 0;
+    transform: translateX(100%);
+
+    &.open {
+      transform: translateX(0);
+      box-shadow: -5px 0 8px rgba(0, 0, 0, 0.10);
+    }
+  }
+
+  .ff-layout--immersive--fullscreen &:not(.pinned) {
+    top: 0;
+    height: 100%;
+  }
+
+  &.side-right .resize-bar {
+    left: 0;
+    right: auto;
+    border-right: none;
+    border-left: 1px solid var(--ff-color-border-strong);
+
+    &::before {
+      left: -3px;
+    }
+  }
+
+  .header,
+  .header--stacked {
+    min-height: 46px;
+  }
+
+  .drawer-header-btn {
+    align-self: stretch;
+    background: none;
+    border: none;
+    padding: 0 15px;
+    color: var(--ff-color-text-subtle);
+    font: inherit;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    .ff-btn--icon {
+      width: 18px;
+      height: 18px;
+    }
+
+    &:hover {
+      background: var(--ff-color-bg-surface-raised);
+      color: var(--ff-color-text-muted);
+    }
+
+    &:active {
+      background: var(--ff-color-bg-emphasis);
+    }
+  }
+
+  .editor-drawer-stack-title {
+    flex: 1;
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--ff-color-text);
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

From b5073c418647e6c65bb51de44b5c003696bb8699 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Tue, 21 Jul 2026 13:20:51 -0700
Subject: [PATCH 02/13] Implement dashboards drawer and side nav entry with
 shared helpers

---
 frontend/src/components/dashboard/index.vue   |  72 ++++----
 .../immersive-editor/DashboardDrawer.vue      | 123 +++++++++++++
 frontend/src/composables/TeamDashboards.ts    |  87 +++++++++
 frontend/src/pages/team/Dashboards/Viewer.vue | 168 ++++++++++++++++++
 frontend/src/pages/team/Dashboards/index.vue  |  78 ++++++++
 frontend/src/pages/team/index.vue             |  15 +-
 frontend/src/pages/team/routes.js             |  19 ++
 frontend/src/stores/product-expert.js         |  12 ++
 frontend/src/stores/ux-navigation.js          |  13 +-
 9 files changed, 547 insertions(+), 40 deletions(-)
 create mode 100644 frontend/src/components/immersive-editor/DashboardDrawer.vue
 create mode 100644 frontend/src/composables/TeamDashboards.ts
 create mode 100644 frontend/src/pages/team/Dashboards/Viewer.vue
 create mode 100644 frontend/src/pages/team/Dashboards/index.vue

diff --git a/frontend/src/components/dashboard/index.vue b/frontend/src/components/dashboard/index.vue
index 167346a7df..7bedff74d4 100644
--- a/frontend/src/components/dashboard/index.vue
+++ b/frontend/src/components/dashboard/index.vue
@@ -9,52 +9,48 @@
                 <p>The instance must be running to view the dashboard.</p>
             </template>
         </EmptyState>
-        <iframe v-else :src="dashboardURL" />
+        <iframe v-else :src="dashboardURL" :style="{ pointerEvents: disableEvents ? 'none' : 'auto' }" />
     </div>
 </template>
 
-<script>
+<script setup>
+import { computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
 import EmptyState from '@/components/EmptyState.vue'
 import { removeSlashes } from '@/composables/strings/String.js'
 
-export default {
-    name: 'DashboardView',
-    components: {
-        EmptyState
-    },
-    props: {
-        instance: {
-            required: true,
-            type: Object
-        }
-    },
-    computed: {
-        isRunning () {
-            return this.instance?.meta?.state === 'running'
-        },
-        hasDashboard () {
-            return !!this.instance?.settings?.dashboard2UI
-        },
-        dashboardURL () {
-            if (!this.isRunning || !this.hasDashboard) {
-                return null
-            }
-            const baseURL = new URL(removeSlashes(this.instance.url, false, true))
-            baseURL.pathname = removeSlashes(this.instance.settings.dashboard2UI, true, false)
-            return baseURL.toString()
-        }
+defineOptions({ name: 'DashboardView' })
+
+const props = defineProps({
+    instance: {
+        required: true,
+        type: Object
     },
-    watch: {
-        hasDashboard: {
-            handler (hasDashboard) {
-                if (!hasDashboard) {
-                    this.$router.push({ name: 'instance-overview', params: { id: this.instance.id } })
-                }
-            },
-            immediate: true
-        }
+    disableEvents: {
+        type: Boolean,
+        default: false
     }
-}
+})
+
+const router = useRouter()
+
+const isRunning = computed(() => props.instance?.meta?.state === 'running')
+const hasDashboard = computed(() => !!props.instance?.settings?.dashboard2UI)
+const dashboardURL = computed(() => {
+    if (!isRunning.value || !hasDashboard.value) {
+        return null
+    }
+    const baseURL = new URL(removeSlashes(props.instance.url, false, true))
+    baseURL.pathname = removeSlashes(props.instance.settings.dashboard2UI, true, false)
+    return baseURL.toString()
+})
+
+watch(hasDashboard, value => {
+    if (!value) {
+        router.push({ name: 'instance-overview', params: { id: props.instance.id } })
+    }
+}, { immediate: true })
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/immersive-editor/DashboardDrawer.vue b/frontend/src/components/immersive-editor/DashboardDrawer.vue
new file mode 100644
index 0000000000..ecb059e2cf
--- /dev/null
+++ b/frontend/src/components/immersive-editor/DashboardDrawer.vue
@@ -0,0 +1,123 @@
+<template>
+    <section
+        class="tabs-wrapper drawer"
+        :class="{
+            open: editorImmersiveDrawer.state,
+            pinned: editorImmersiveDrawer.pinned,
+            resizing: isResizing,
+            'side-left': editorImmersiveDrawer.side === 'left',
+            'side-right': editorImmersiveDrawer.side === 'right'
+        }"
+        :style="drawerStyle"
+        data-el="dashboard-drawer"
+    >
+        <resize-bar :is-resizing="isResizing" @mousedown="startResize" />
+
+        <div class="drawer-content">
+            <div v-if="hasStackedView && currentStackView.title" class="header header--stacked">
+                <button class="drawer-header-btn" title="Back" type="button" @click="drawersStore.popEditorImmersiveView">
+                    <ArrowLeftIcon class="ff-btn--icon" />
+                </button>
+                <span class="editor-drawer-stack-title">{{ currentStackView.title }}</span>
+                <div class="side-actions">
+                    <ff-button
+                        v-for="(action, $key) in stackedActions"
+                        :key="action.label + $key"
+                        :kind="action.kind ?? 'secondary'"
+                        :disabled="typeof action.disabled === 'function' ? action.disabled() : action.disabled"
+                        :has-left-icon="!!action.iconLeft"
+                        v-bind="action.bind"
+                        @click="action.handler"
+                    >
+                        <template v-if="!!action.iconLeft" #icon-left>
+                            <component :is="action.iconLeft" />
+                        </template>
+                        {{ action.label }}
+                    </ff-button>
+                    <button class="drawer-header-btn" title="Close drawer" type="button" aria-label="Close drawer" @click="drawersStore.toggleEditorImmersiveDrawer">
+                        <XMarkIcon class="ff-btn--icon" />
+                    </button>
+                </div>
+            </div>
+
+            <div v-if="!hasStackedView" class="header">
+                <div class="logo">
+                    <router-link v-if="homeRoute" title="Back" :to="homeRoute">
+                        <HomeIcon class="ff-btn--icon" style="width: 18px; height: 18px;" />
+                    </router-link>
+                </div>
+                <span class="dashboard-drawer--title">
+                    <ChartPieIcon class="dashboard-drawer--title-icon" />
+                    {{ title }}
+                </span>
+                <div class="side-actions">
+                    <EditorDrawerSettings />
+                    <button class="drawer-header-btn" title="Close drawer" type="button" aria-label="Close drawer" @click="drawersStore.toggleEditorImmersiveDrawer">
+                        <XMarkIcon class="ff-btn--icon" />
+                    </button>
+                </div>
+            </div>
+
+            <ff-page v-if="hasStackedView && currentStackView.title" :no-padding="true">
+                <component :is="currentStackView.component" v-bind="currentStackView.props" v-on="currentStackView.events || {}" />
+            </ff-page>
+            <component :is="currentStackView.component" v-else-if="hasStackedView" v-bind="currentStackView.props" v-on="currentStackView.events || {}" />
+            <ff-page v-else :no-padding="true">
+                <slot />
+            </ff-page>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { HomeIcon, XMarkIcon } from '@heroicons/vue/20/solid'
+import { ArrowLeftIcon, ChartPieIcon } from '@heroicons/vue/24/outline'
+
+import ResizeBar from '../ResizeBar.vue'
+
+import EditorDrawerSettings from './EditorDrawerSettings.vue'
+
+import { useImmersiveDrawer } from '@/composables/ImmersiveDrawer'
+
+defineProps({
+    homeRoute: {
+        type: Object,
+        default: null
+    },
+    title: {
+        type: String,
+        default: 'Dashboards'
+    }
+})
+
+const emit = defineEmits(['resizing'])
+
+const {
+    drawersStore,
+    editorImmersiveDrawer,
+    isResizing,
+    drawerStyle,
+    hasStackedView,
+    currentStackView,
+    stackedActions,
+    startResize
+} = useImmersiveDrawer({ onResizingChange: (resizing) => emit('resizing', resizing) })
+</script>
+
+<style scoped lang="scss">
+.dashboard-drawer--title {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: 8px;
+    font-weight: 600;
+    color: var(--ff-color-text);
+}
+
+.dashboard-drawer--title-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+}
+</style>
diff --git a/frontend/src/composables/TeamDashboards.ts b/frontend/src/composables/TeamDashboards.ts
new file mode 100644
index 0000000000..36a2637e8b
--- /dev/null
+++ b/frontend/src/composables/TeamDashboards.ts
@@ -0,0 +1,87 @@
+import { computed, ref, watch } from 'vue'
+
+import teamApi from '@/api/team.js'
+import Alerts from '@/services/alerts.js'
+import { useContextStore } from '@/stores/context.js'
+import { useLiveStatusStore } from '@/stores/live-status'
+import { applyLiveState } from '@/utils/applyLiveState.js'
+
+interface DashboardInstance {
+    id: string
+    status?: string
+    meta?: { state?: string, [key: string]: unknown }
+    settings?: { dashboard2UI?: string, [key: string]: unknown }
+    [key: string]: unknown
+}
+
+export function useTeamDashboards () {
+    const contextStore = useContextStore()
+    const liveStatusStore = useLiveStatusStore()
+
+    const loading = ref(false)
+    const instancesMap = ref<Map<string, DashboardInstance>>(new Map())
+
+    const team = computed(() => contextStore.team)
+    const statusChannelLive = computed(() => liveStatusStore.live)
+    const liveInstanceMetadata = computed(() => liveStatusStore.instanceMetadata)
+    const instances = computed(() => Array.from(instancesMap.value.values()))
+
+    function seedMeta (instance: DashboardInstance) {
+        if (!instance.meta) {
+            instance.meta = { state: instance.status }
+        }
+        return instance
+    }
+
+    function applyLiveStatus () {
+        const metadata = liveInstanceMetadata.value
+        for (const id of instancesMap.value.keys()) {
+            const meta = metadata[id]
+            if (!meta?.status) continue
+            const state = meta.status
+            const row = instancesMap.value.get(id)
+            if (!row) continue
+            if (row.status === state && row.meta?.state === state) continue
+            const updated = applyLiveState(row, state, { versions: meta.versions, clearFlags: true })
+            updated.meta = { ...(updated.meta || {}), state }
+            instancesMap.value.set(id, updated)
+        }
+    }
+
+    async function fetchData () {
+        if (!team.value?.id) {
+            loading.value = false
+            return
+        }
+        loading.value = true
+        try {
+            const response = await teamApi.getTeamDashboards(team.value.id)
+            const projects = response?.projects || []
+            const nextMap = new Map<string, DashboardInstance>()
+            projects.forEach((instance: DashboardInstance) => nextMap.set(instance.id, seedMeta(instance)))
+            instancesMap.value = nextMap
+            applyLiveStatus()
+        } catch {
+            Alerts.emit('Failed to load dashboards.', 'warning')
+        } finally {
+            loading.value = false
+        }
+    }
+
+    function instanceUpdated (newData: DashboardInstance) {
+        const existing = instancesMap.value.get(newData.id)
+        if (!existing) return
+        const state = newData.meta?.state || newData.status
+        instancesMap.value.set(newData.id, {
+            ...existing,
+            ...newData,
+            status: state,
+            meta: { ...(existing.meta || {}), ...(newData.meta || {}), state }
+        })
+    }
+
+    watch(team, fetchData)
+    watch(liveInstanceMetadata, applyLiveStatus, { deep: true })
+
+    return { instances, instancesMap, loading, statusChannelLive, fetchData, instanceUpdated }
+}
diff --git a/frontend/src/pages/team/Dashboards/Viewer.vue b/frontend/src/pages/team/Dashboards/Viewer.vue
new file mode 100644
index 0000000000..1965458adb
--- /dev/null
+++ b/frontend/src/pages/team/Dashboards/Viewer.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="ff--immersive-editor-wrapper team-dashboards" :class="{ resizing: isResizing }" data-el="team-dashboards-viewer">
+        <DashboardDrawer :home-route="homeRoute" @resizing="v => isResizing = v">
+            <ff-loading v-if="loading && instances.length === 0" message="Loading Dashboards..." />
+            <ul v-else-if="instances.length" class="team-dashboards--list">
+                <li
+                    v-for="instance in instances"
+                    :key="instance.id"
+                    class="team-dashboards--list-item"
+                    :class="{ selected: instance.id === selectedId }"
+                    data-el="dashboard-list-item"
+                    @click="selectDashboard(instance.id)"
+                >
+                    <span class="team-dashboards--list-item-name">{{ instance.name }}</span>
+                    <InstanceStatusBadge :status="instance.status" :instanceId="instance.id" instanceType="instance" />
+                </li>
+            </ul>
+        </DashboardDrawer>
+
+        <div class="ff-layout--immersive--content team-dashboards--content">
+            <DashboardView v-if="selectedInstance" :instance="selectedInstance" :disable-events="isResizing" />
+            <DrawerTrigger :is-hidden="drawerOpen" @toggle="drawersStore.toggleEditorImmersiveDrawer" />
+        </div>
+
+        <template v-if="!statusChannelLive">
+            <InstanceStatusPolling
+                v-for="instance in instances"
+                :key="instance.id"
+                :instance="instance"
+                @instance-updated="instanceUpdated"
+            />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import InstanceStatusBadge from '../../instance/components/InstanceStatusBadge.vue'
+
+import InstanceStatusPolling from '@/components/InstanceStatusPolling.vue'
+import DashboardView from '@/components/dashboard/index.vue'
+import DashboardDrawer from '@/components/immersive-editor/DashboardDrawer.vue'
+import DrawerTrigger from '@/components/immersive-editor/DrawerTrigger.vue'
+import { useTeamDashboards } from '@/composables/TeamDashboards'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+import { useUxDrawersStore } from '@/stores/ux-drawers.js'
+
+defineOptions({ name: 'TeamDashboardViewer' })
+
+const route = useRoute()
+const router = useRouter()
+const contextStore = useContextStore()
+const drawersStore = useUxDrawersStore()
+
+const { instances, instancesMap, loading, statusChannelLive, fetchData, instanceUpdated } = useTeamDashboards()
+
+const selectedId = ref<string | null>(null)
+const isResizing = ref(false)
+
+const team = computed(() => contextStore.team)
+const drawerOpen = computed(() => drawersStore.editorImmersiveDrawer.state)
+const selectedInstance = computed(() => instancesMap.value.get(selectedId.value) || null)
+const homeRoute = computed(() => {
+    if (!team.value) return null
+    return { name: 'team-dashboards', params: { team_slug: team.value.slug } }
+})
+
+function ensureTeam () {
+    const slug = route.params.team_slug
+    if (slug && contextStore.team?.slug !== slug) {
+        useAccountStore().setTeam(slug)
+    }
+}
+
+function selectDashboard (id) {
+    selectedId.value = id
+    if (route.params.instanceId !== id) {
+        router.replace({ name: 'team-dashboards-view', params: { ...route.params, instanceId: id } })
+    }
+}
+
+function resolveSelection () {
+    const ids = Array.from(instancesMap.value.keys())
+    if (ids.length === 0) {
+        selectedId.value = null
+        return
+    }
+    if (selectedId.value && instancesMap.value.has(selectedId.value)) {
+        return
+    }
+    const paramId = route.params.instanceId as string
+    if (paramId && instancesMap.value.has(paramId)) {
+        selectedId.value = paramId
+    } else {
+        selectDashboard(ids[0])
+    }
+}
+
+watch(instances, resolveSelection)
+watch(() => route.params.team_slug, ensureTeam)
+watch(() => route.params.instanceId as string, id => {
+    if (id && instancesMap.value.has(id)) {
+        selectedId.value = id
+    }
+})
+
+onMounted(() => {
+    ensureTeam()
+    contextStore.setIsImmersive(true)
+    fetchData()
+})
+
+onUnmounted(() => {
+    contextStore.setIsImmersive(false)
+})
+</script>
+
+<style scoped>
+.team-dashboards {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.team-dashboards--content {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    position: relative;
+}
+
+.team-dashboards--list {
+    padding: 12px;
+}
+
+.team-dashboards--list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 5px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    color: var(--ff-color-text);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+        background: var(--ff-color-bg-surface-raised);
+    }
+
+    &.selected {
+        background: var(--ff-color-accent-strong);
+        color: var(--ff-color-text-on-brand);
+    }
+}
+
+.team-dashboards--list-item-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>
diff --git a/frontend/src/pages/team/Dashboards/index.vue b/frontend/src/pages/team/Dashboards/index.vue
new file mode 100644
index 0000000000..be9a3fe9d8
--- /dev/null
+++ b/frontend/src/pages/team/Dashboards/index.vue
@@ -0,0 +1,78 @@
+<template>
+    <ff-page>
+        <template #header>
+            <ff-page-header title="Dashboards">
+                <template #context>
+                    A list of Node-RED instances with Dashboards belonging to this Team.
+                </template>
+            </ff-page-header>
+        </template>
+        <div class="flex-1 flex flex-col overflow-auto">
+            <ff-loading v-if="loading && instances.length === 0" message="Loading Dashboards..." />
+            <ff-data-table
+                v-else-if="instances.length"
+                data-el="dashboards-table"
+                :columns="columns"
+                :rows="instances"
+                :show-search="true"
+                search-placeholder="Search Dashboards..."
+                :rows-selectable="true"
+                @row-selected="openDashboard"
+            />
+            <EmptyState v-else>
+                <template #img>
+                    <img src="../../../images/empty-states/team-instances.png">
+                </template>
+                <template #header>There are no dashboards in this team.</template>
+                <template #message>
+                    <p>Dashboards appear here once an instance has the Dashboard installed.</p>
+                </template>
+            </EmptyState>
+        </div>
+        <template v-if="!statusChannelLive">
+            <InstanceStatusPolling
+                v-for="instance in instances"
+                :key="instance.id"
+                :instance="instance"
+                @instance-updated="instanceUpdated"
+            />
+        </template>
+    </ff-page>
+</template>
+
+<script setup lang="ts">
+import { markRaw, onMounted } from 'vue'
+
+import ApplicationLink from '../../application/components/cells/ApplicationLink.vue'
+import DeploymentName from '../../application/components/cells/DeploymentName.vue'
+import SimpleTextCell from '../../application/components/cells/SimpleTextCell.vue'
+import InstanceStatusBadge from '../../instance/components/InstanceStatusBadge.vue'
+
+import EmptyState from '@/components/EmptyState.vue'
+import InstanceStatusPolling from '@/components/InstanceStatusPolling.vue'
+import { useNavigationHelper } from '@/composables/NavigationHelper.js'
+import { useTeamDashboards } from '@/composables/TeamDashboards'
+import { useContextStore } from '@/stores/context.js'
+
+defineOptions({ name: 'TeamDashboards' })
+
+const contextStore = useContextStore()
+const { navigateTo } = useNavigationHelper()
+const { instances, loading, statusChannelLive, fetchData, instanceUpdated } = useTeamDashboards()
+
+const columns = [
+    { label: 'Name', class: ['grow'], key: 'name', sortable: true, component: { is: markRaw(DeploymentName), map: { url: 'url' }, extraProps: { copyable: true } } },
+    { label: 'Status', class: ['w-44'], component: { is: markRaw(InstanceStatusBadge), map: { instanceId: 'id', status: 'status' }, extraProps: { instanceType: 'instance' } } },
+    { label: 'Application', class: ['grow-[0.25]'], key: 'application.name', sortable: true, component: { is: markRaw(ApplicationLink), map: { id: 'application.id', name: 'application.name' } } },
+    { label: 'Last Updated', class: ['w-60'], key: 'flowLastUpdatedAt', sortable: true, component: { is: markRaw(SimpleTextCell), map: { text: 'flowLastUpdatedSince' } } }
+]
+
+function openDashboard (instance: { id: string }, event: MouseEvent) {
+    navigateTo({
+        name: 'team-dashboards-view',
+        params: { team_slug: contextStore.team.slug, instanceId: instance.id }
+    }, event)
+}
+
+onMounted(fetchData)
+</script>
diff --git a/frontend/src/pages/team/index.vue b/frontend/src/pages/team/index.vue
index e0f08c07c4..1b0ae8fe8d 100644
--- a/frontend/src/pages/team/index.vue
+++ b/frontend/src/pages/team/index.vue
@@ -11,6 +11,9 @@
         </Teleport>
         <router-view :key="team.id" />
     </template>
+    <template v-else-if="!canAccessTeam && isEmbeddedDashboardEnabled && isDashboardRoute && team">
+        <router-view :key="team.id" />
+    </template>
     <template v-else-if="!canAccessTeam">
         <TeamInstances :dashboard-role-only="true" />
     </template>
@@ -54,7 +57,7 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team', 'teamMembership']),
-        ...mapState(useAccountSettingsStore, ['requiresBilling']),
+        ...mapState(useAccountSettingsStore, ['requiresBilling', 'featuresCheck']),
         ...mapState(useAccountAuthStore, ['user', 'isAdminUser']),
         ...mapState(useUxToursStore, ['shouldPresentTour']),
         ...mapState(useProductExpertStore, ['shouldWakeUpAssistant']),
@@ -70,6 +73,12 @@ export default {
         },
         canAccessTeam: function () {
             return this.isAdminUser || this.teamMembership?.role >= Roles.Viewer
+        },
+        isEmbeddedDashboardEnabled: function () {
+            return this.featuresCheck?.isEmbeddedDashboardEnabled
+        },
+        isDashboardRoute: function () {
+            return this.$route.name === 'team-dashboards'
         }
     },
     watch: {
@@ -109,6 +118,10 @@ export default {
         ...mapActions(useProductExpertStore, ['wakeUpAssistant']),
         ...mapActions(useUxToursStore, ['setWelcomeTour', 'openModal']),
         checkRoute: async function (route) {
+            if (this.team && !this.canAccessTeam && this.isEmbeddedDashboardEnabled && route.name !== 'team-dashboards') {
+                this.$router.replace({ name: 'team-dashboards', params: { team_slug: this.team.slug } })
+                return
+            }
             const allowedRoutes = []
 
             if (this.team) {
diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index e43abc7374..0039388844 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -7,6 +7,8 @@ import TeamAuditLog from './AuditLog.vue'
 import TeamBillOfMaterials from './BOM/index.vue'
 import TeamBilling from './Billing/index.vue'
 import BrokersRoutes from './Brokers/routes.js'
+import TeamDashboardViewer from './Dashboards/Viewer.vue'
+import TeamDashboards from './Dashboards/index.vue'
 import DeviceGroups from './DeviceGroups/index.vue'
 import TeamDevices from './Devices/index.vue'
 import TeamHome from './Home/index.vue'
@@ -51,6 +53,14 @@ export default [
                         name: 'team-home',
                         component: TeamHome
                     },
+                    {
+                        name: 'team-dashboards',
+                        path: 'dashboards',
+                        component: TeamDashboards,
+                        meta: {
+                            title: 'Team - Dashboards'
+                        }
+                    },
                     {
                         path: 'applications',
                         children: [
@@ -234,6 +244,15 @@ export default [
             }
         ]
     },
+    {
+        name: 'team-dashboards-view',
+        path: '/team/:team_slug/dashboards/:instanceId',
+        component: TeamDashboardViewer,
+        meta: {
+            title: 'Team - Dashboards',
+            layout: 'immersive'
+        }
+    },
     {
         path: '/deploy/blueprint',
         component: CreateInstance,
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index b790a682b1..a895296055 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -159,6 +159,18 @@ export const useProductExpertStore = defineStore('product-expert', {
                 return router.push({ name: expertRouteName, params: contextStore.route.params })
             }
 
+            if (contextStore.route?.name === 'team-dashboards-view') {
+                const drawersStore = useUxDrawersStore()
+                if (!drawersStore.editorImmersiveDrawer.state) {
+                    drawersStore.openEditorImmersiveDrawer()
+                }
+                return import('../components/expert/Expert.vue')
+                    .then(({ default: ExpertPanel }) => drawersStore.openRightDrawer({
+                        component: markRaw(ExpertPanel),
+                        header: { title: 'Expert' }
+                    }))
+            }
+
             if (this.agentMode === INSIGHTS_AGENT) {
                 useProductExpertInsightsAgentStore().getCapabilities()
             }
diff --git a/frontend/src/stores/ux-navigation.js b/frontend/src/stores/ux-navigation.js
index fda328af33..c4933a05c1 100644
--- a/frontend/src/stores/ux-navigation.js
+++ b/frontend/src/stores/ux-navigation.js
@@ -1,5 +1,5 @@
 import {
-    BookOpenIcon, ChartBarIcon, ChatBubbleOvalLeftEllipsisIcon, ChevronLeftIcon, CircleStackIcon, Cog8ToothIcon,
+    BookOpenIcon, ChartBarIcon, ChartPieIcon, ChatBubbleOvalLeftEllipsisIcon, ChevronLeftIcon, CircleStackIcon, Cog8ToothIcon,
     ComputerDesktopIcon, CpuChipIcon, CurrencyDollarIcon,
     HomeIcon, LockClosedIcon, RectangleGroupIcon, RectangleStackIcon,
     RssIcon, SwatchIcon, TableCellsIcon, UserGroupIcon, UsersIcon
@@ -243,6 +243,17 @@ export const useUxNavigationStore = defineStore('ux-navigation', {
                                 icon: RectangleGroupIcon,
                                 disabled: requiresBilling
                             },
+                            {
+                                label: 'Dashboards',
+                                to: {
+                                    name: 'team-dashboards',
+                                    params: { team_slug: team.slug }
+                                },
+                                tag: 'team-dashboards',
+                                icon: ChartPieIcon,
+                                disabled: requiresBilling,
+                                hidden: features.isEmbeddedDashboardEnabled
+                            },
                             {
                                 label: 'Groups',
                                 to: {

From 7245b2194afd8ec31a3ec9f850892de641a48e91 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Tue, 21 Jul 2026 13:34:21 -0700
Subject: [PATCH 03/13] Update imports to use @/

---
 .../components/immersive-editor/DashboardDrawer.vue    |  6 ++----
 frontend/src/pages/team/Dashboards/Viewer.vue          |  3 +--
 frontend/src/pages/team/Dashboards/index.vue           | 10 +++++-----
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/immersive-editor/DashboardDrawer.vue b/frontend/src/components/immersive-editor/DashboardDrawer.vue
index ecb059e2cf..518806be03 100644
--- a/frontend/src/components/immersive-editor/DashboardDrawer.vue
+++ b/frontend/src/components/immersive-editor/DashboardDrawer.vue
@@ -73,10 +73,8 @@
 import { HomeIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 import { ArrowLeftIcon, ChartPieIcon } from '@heroicons/vue/24/outline'
 
-import ResizeBar from '../ResizeBar.vue'
-
-import EditorDrawerSettings from './EditorDrawerSettings.vue'
-
+import ResizeBar from '@/components/ResizeBar.vue'
+import EditorDrawerSettings from '@/components/immersive-editor/EditorDrawerSettings.vue'
 import { useImmersiveDrawer } from '@/composables/ImmersiveDrawer'
 
 defineProps({
diff --git a/frontend/src/pages/team/Dashboards/Viewer.vue b/frontend/src/pages/team/Dashboards/Viewer.vue
index 1965458adb..b37bccbd54 100644
--- a/frontend/src/pages/team/Dashboards/Viewer.vue
+++ b/frontend/src/pages/team/Dashboards/Viewer.vue
@@ -37,13 +37,12 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import InstanceStatusBadge from '../../instance/components/InstanceStatusBadge.vue'
-
 import InstanceStatusPolling from '@/components/InstanceStatusPolling.vue'
 import DashboardView from '@/components/dashboard/index.vue'
 import DashboardDrawer from '@/components/immersive-editor/DashboardDrawer.vue'
 import DrawerTrigger from '@/components/immersive-editor/DrawerTrigger.vue'
 import { useTeamDashboards } from '@/composables/TeamDashboards'
+import InstanceStatusBadge from '@/pages/instance/components/InstanceStatusBadge.vue'
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
diff --git a/frontend/src/pages/team/Dashboards/index.vue b/frontend/src/pages/team/Dashboards/index.vue
index be9a3fe9d8..91c12b5ef2 100644
--- a/frontend/src/pages/team/Dashboards/index.vue
+++ b/frontend/src/pages/team/Dashboards/index.vue
@@ -43,15 +43,15 @@
 <script setup lang="ts">
 import { markRaw, onMounted } from 'vue'
 
-import ApplicationLink from '../../application/components/cells/ApplicationLink.vue'
-import DeploymentName from '../../application/components/cells/DeploymentName.vue'
-import SimpleTextCell from '../../application/components/cells/SimpleTextCell.vue'
-import InstanceStatusBadge from '../../instance/components/InstanceStatusBadge.vue'
-
 import EmptyState from '@/components/EmptyState.vue'
 import InstanceStatusPolling from '@/components/InstanceStatusPolling.vue'
 import { useNavigationHelper } from '@/composables/NavigationHelper.js'
 import { useTeamDashboards } from '@/composables/TeamDashboards'
+import ApplicationLink from '@/pages/application/components/cells/ApplicationLink.vue'
+import DeploymentName from '@/pages/application/components/cells/DeploymentName.vue'
+import SimpleTextCell from '@/pages/application/components/cells/SimpleTextCell.vue'
+import InstanceStatusBadge from '@/pages/instance/components/InstanceStatusBadge.vue'
+
 import { useContextStore } from '@/stores/context.js'
 
 defineOptions({ name: 'TeamDashboards' })

From 2c64f7057d624aac42aea3a1d89fde2cfb10573e Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Tue, 21 Jul 2026 13:40:11 -0700
Subject: [PATCH 04/13] Remove sus redirect and render dashboards for dashboard
 only users

---
 frontend/src/pages/team/index.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/team/index.vue b/frontend/src/pages/team/index.vue
index 1b0ae8fe8d..8127c16615 100644
--- a/frontend/src/pages/team/index.vue
+++ b/frontend/src/pages/team/index.vue
@@ -11,11 +11,9 @@
         </Teleport>
         <router-view :key="team.id" />
     </template>
-    <template v-else-if="!canAccessTeam && isEmbeddedDashboardEnabled && isDashboardRoute && team">
-        <router-view :key="team.id" />
-    </template>
     <template v-else-if="!canAccessTeam">
-        <TeamInstances :dashboard-role-only="true" />
+        <TeamDashboards v-if="isEmbeddedDashboardEnabled" />
+        <TeamInstances v-else :dashboard-role-only="true" />
     </template>
 </template>
 
@@ -27,6 +25,7 @@ import TeamSuspendedBanner from '../../components/banners/TeamSuspended.vue'
 import TeamTrialBanner from '../../components/banners/TeamTrial.vue'
 import { Roles } from '../../utils/roles.js'
 
+import TeamDashboards from './Dashboards/index.vue'
 import TeamInstances from './Instances.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
@@ -39,6 +38,7 @@ import { useUxToursStore } from '@/stores/ux-tours.js'
 export default {
     name: 'TeamPage',
     components: {
+        TeamDashboards,
         TeamInstances,
         SubscriptionExpiredBanner,
         TeamSuspendedBanner,
@@ -76,9 +76,6 @@ export default {
         },
         isEmbeddedDashboardEnabled: function () {
             return this.featuresCheck?.isEmbeddedDashboardEnabled
-        },
-        isDashboardRoute: function () {
-            return this.$route.name === 'team-dashboards'
         }
     },
     watch: {
@@ -118,10 +115,6 @@ export default {
         ...mapActions(useProductExpertStore, ['wakeUpAssistant']),
         ...mapActions(useUxToursStore, ['setWelcomeTour', 'openModal']),
         checkRoute: async function (route) {
-            if (this.team && !this.canAccessTeam && this.isEmbeddedDashboardEnabled && route.name !== 'team-dashboards') {
-                this.$router.replace({ name: 'team-dashboards', params: { team_slug: this.team.slug } })
-                return
-            }
             const allowedRoutes = []
 
             if (this.team) {

From 2a80503051ff1f7583045c39a9fd91a03ce94136 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Tue, 21 Jul 2026 14:01:03 -0700
Subject: [PATCH 05/13] Restyle the list view for dashboards drawer

---
 frontend/src/pages/team/Dashboards/Viewer.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/team/Dashboards/Viewer.vue b/frontend/src/pages/team/Dashboards/Viewer.vue
index b37bccbd54..5d9a01c4d1 100644
--- a/frontend/src/pages/team/Dashboards/Viewer.vue
+++ b/frontend/src/pages/team/Dashboards/Viewer.vue
@@ -135,6 +135,9 @@ onUnmounted(() => {
 }
 
 .team-dashboards--list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     padding: 12px;
 }
 
@@ -142,9 +145,10 @@ onUnmounted(() => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 5px;
-    padding: 5px 10px;
-    border-radius: 5px;
+    gap: 8px;
+    min-height: 40px;
+    padding: 8px 12px;
+    border-radius: 6px;
     color: var(--ff-color-text);
     cursor: pointer;
     transition: background-color 0.15s ease;
@@ -154,8 +158,8 @@ onUnmounted(() => {
     }
 
     &.selected {
-        background: var(--ff-color-accent-strong);
-        color: var(--ff-color-text-on-brand);
+        background: var(--ff-color-bg-surface-raised);
+        font-weight: 600;
     }
 }
 

From f7b8497e3a1a593144890be2b712ecef06a2ed57 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Tue, 21 Jul 2026 14:02:59 -0700
Subject: [PATCH 06/13] Unbold the status on selection

---
 frontend/src/pages/team/Dashboards/Viewer.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/pages/team/Dashboards/Viewer.vue b/frontend/src/pages/team/Dashboards/Viewer.vue
index 5d9a01c4d1..197a7f0979 100644
--- a/frontend/src/pages/team/Dashboards/Viewer.vue
+++ b/frontend/src/pages/team/Dashboards/Viewer.vue
@@ -159,6 +159,9 @@ onUnmounted(() => {
 
     &.selected {
         background: var(--ff-color-bg-surface-raised);
+    }
+
+    &.selected .team-dashboards--list-item-name {
         font-weight: 600;
     }
 }

From 07e7f787e46b6ae26b7c025526026dd9e21670c9 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 22 Jul 2026 09:40:41 -0700
Subject: [PATCH 07/13] Add applications dashboard tab and update team
 dashboard components to be configurable

---
 frontend/src/api/application.js               | 16 ++++
 .../components/dashboard/DashboardList.vue    | 76 +++++++++++++++++++
 .../dashboard/DashboardViewer.vue}            | 56 +++++++-------
 .../{TeamDashboards.ts => Dashboards.ts}      | 69 ++++++++++++++---
 frontend/src/pages/application/Dashboards.vue | 11 +++
 frontend/src/pages/application/index.vue      |  8 +-
 frontend/src/pages/application/routes.js      |  9 +++
 frontend/src/pages/team/Dashboards/index.vue  | 66 +---------------
 frontend/src/pages/team/routes.js             | 17 ++++-
 frontend/src/stores/product-expert.js         |  2 +-
 10 files changed, 224 insertions(+), 106 deletions(-)
 create mode 100644 frontend/src/components/dashboard/DashboardList.vue
 rename frontend/src/{pages/team/Dashboards/Viewer.vue => components/dashboard/DashboardViewer.vue} (74%)
 rename frontend/src/composables/{TeamDashboards.ts => Dashboards.ts} (55%)
 create mode 100644 frontend/src/pages/application/Dashboards.vue

diff --git a/frontend/src/api/application.js b/frontend/src/api/application.js
index 96483c3a34..b19c4d9a3d 100644
--- a/frontend/src/api/application.js
+++ b/frontend/src/api/application.js
@@ -64,6 +64,21 @@ const getApplication = (applicationId) => {
     })
 }
 
+/**
+ * Get the instances within an application that have a dashboard installed
+ * @param {string} applicationId
+ */
+const getApplicationDashboards = async (applicationId) => {
+    const res = await client.get(`/api/v1/applications/${applicationId}/dashboard-instances`)
+    res.data.projects = res.data.projects.map(r => {
+        r.createdSince = daysSince(r.createdAt)
+        r.updatedSince = daysSince(r.updatedAt)
+        r.flowLastUpdatedSince = daysSince(r.flowLastUpdatedAt)
+        return r
+    })
+    return res.data
+}
+
 /**
  * Get the audit log for an application
  * @param {string} applicationId
@@ -371,6 +386,7 @@ export default {
     deleteApplication,
     getSnapshots,
     getApplication,
+    getApplicationDashboards,
     getApplicationAuditLog,
     getApplicationDevices,
     getApplicationInstances,
diff --git a/frontend/src/components/dashboard/DashboardList.vue b/frontend/src/components/dashboard/DashboardList.vue
new file mode 100644
index 0000000000..d74aaec145
--- /dev/null
+++ b/frontend/src/components/dashboard/DashboardList.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="dashboards-list flex-1 flex flex-col overflow-auto" data-el="dashboards-list">
+        <ff-loading v-if="loading && instances.length === 0" message="Loading Dashboards..." />
+        <ff-data-table
+            v-else-if="instances.length"
+            data-el="dashboards-table"
+            :columns="columns"
+            :rows="instances"
+            :show-search="true"
+            search-placeholder="Search Dashboards..."
+            :rows-selectable="true"
+            @row-selected="openDashboard"
+        />
+        <EmptyState v-else>
+            <template #img>
+                <img src="@/images/empty-states/team-instances.png">
+            </template>
+            <template #header>There are no dashboards {{ scope === 'application' ? 'in this application' : 'in this team' }}.</template>
+            <template #message>
+                <p>Dashboards appear here once an instance has the Dashboard installed.</p>
+            </template>
+        </EmptyState>
+        <template v-if="!statusChannelLive">
+            <InstanceStatusPolling
+                v-for="instance in instances"
+                :key="instance.id"
+                :instance="instance"
+                @instance-updated="instanceUpdated"
+            />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, markRaw, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+import EmptyState from '@/components/EmptyState.vue'
+import InstanceStatusPolling from '@/components/InstanceStatusPolling.vue'
+import { useDashboardScope, useDashboards } from '@/composables/Dashboards'
+import { useNavigationHelper } from '@/composables/NavigationHelper.js'
+import ApplicationLink from '@/pages/application/components/cells/ApplicationLink.vue'
+import DeploymentName from '@/pages/application/components/cells/DeploymentName.vue'
+import SimpleTextCell from '@/pages/application/components/cells/SimpleTextCell.vue'
+import InstanceStatusBadge from '@/pages/instance/components/InstanceStatusBadge.vue'
+
+defineOptions({ name: 'DashboardList' })
+
+const props = defineProps({
+    scope: {
+        type: String,
+        default: 'team'
+    }
+})
+
+const route = useRoute()
+const { navigateTo } = useNavigationHelper()
+const { context, fetch, viewerRouteName } = useDashboardScope(props.scope)
+const { instances, loading, statusChannelLive, fetchData, instanceUpdated } = useDashboards(fetch)
+
+const columns = computed(() => [
+    { label: 'Name', class: ['grow'], key: 'name', sortable: true, component: { is: markRaw(DeploymentName), map: { url: 'url' }, extraProps: { copyable: true } } },
+    { label: 'Status', class: ['w-44'], component: { is: markRaw(InstanceStatusBadge), map: { instanceId: 'id', status: 'status' }, extraProps: { instanceType: 'instance' } } },
+    ...(props.scope !== 'application'
+        ? [{ label: 'Application', class: ['grow-[0.25]'], key: 'application.name', sortable: true, component: { is: markRaw(ApplicationLink), map: { id: 'application.id', name: 'application.name' } } }]
+        : []),
+    { label: 'Last Updated', class: ['w-60'], key: 'flowLastUpdatedAt', sortable: true, component: { is: markRaw(SimpleTextCell), map: { text: 'flowLastUpdatedSince' } } }
+])
+
+function openDashboard (instance: { id: string }, event: MouseEvent) {
+    navigateTo({ name: viewerRouteName, params: { ...route.params, instanceId: instance.id } }, event)
+}
+
+watch(context, fetchData)
+onMounted(fetchData)
+</script>
diff --git a/frontend/src/pages/team/Dashboards/Viewer.vue b/frontend/src/components/dashboard/DashboardViewer.vue
similarity index 74%
rename from frontend/src/pages/team/Dashboards/Viewer.vue
rename to frontend/src/components/dashboard/DashboardViewer.vue
index 197a7f0979..dc1e8f47a6 100644
--- a/frontend/src/pages/team/Dashboards/Viewer.vue
+++ b/frontend/src/components/dashboard/DashboardViewer.vue
@@ -1,23 +1,23 @@
 <template>
-    <div class="ff--immersive-editor-wrapper team-dashboards" :class="{ resizing: isResizing }" data-el="team-dashboards-viewer">
+    <div class="ff--immersive-editor-wrapper dashboards-viewer" :class="{ resizing: isResizing }" data-el="dashboards-viewer">
         <DashboardDrawer :home-route="homeRoute" @resizing="v => isResizing = v">
             <ff-loading v-if="loading && instances.length === 0" message="Loading Dashboards..." />
-            <ul v-else-if="instances.length" class="team-dashboards--list">
+            <ul v-else-if="instances.length" class="dashboards-viewer--list">
                 <li
                     v-for="instance in instances"
                     :key="instance.id"
-                    class="team-dashboards--list-item"
+                    class="dashboards-viewer--list-item"
                     :class="{ selected: instance.id === selectedId }"
                     data-el="dashboard-list-item"
                     @click="selectDashboard(instance.id)"
                 >
-                    <span class="team-dashboards--list-item-name">{{ instance.name }}</span>
+                    <span class="dashboards-viewer--list-item-name">{{ instance.name }}</span>
                     <InstanceStatusBadge :status="instance.status" :instanceId="instance.id" instanceType="instance" />
                 </li>
             </ul>
         </DashboardDrawer>
 
-        <div class="ff-layout--immersive--content team-dashboards--content">
+        <div class="ff-layout--immersive--content dashboards-viewer--content">
             <DashboardView v-if="selectedInstance" :instance="selectedInstance" :disable-events="isResizing" />
             <DrawerTrigger :is-hidden="drawerOpen" @toggle="drawersStore.toggleEditorImmersiveDrawer" />
         </div>
@@ -41,43 +41,38 @@ import InstanceStatusPolling from '@/components/InstanceStatusPolling.vue'
 import DashboardView from '@/components/dashboard/index.vue'
 import DashboardDrawer from '@/components/immersive-editor/DashboardDrawer.vue'
 import DrawerTrigger from '@/components/immersive-editor/DrawerTrigger.vue'
-import { useTeamDashboards } from '@/composables/TeamDashboards'
+import { useDashboardScope, useDashboards } from '@/composables/Dashboards'
 import InstanceStatusBadge from '@/pages/instance/components/InstanceStatusBadge.vue'
-import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
-defineOptions({ name: 'TeamDashboardViewer' })
+defineOptions({ name: 'DashboardViewer' })
+
+const props = defineProps({
+    scope: {
+        type: String,
+        default: 'team'
+    }
+})
 
 const route = useRoute()
 const router = useRouter()
 const contextStore = useContextStore()
 const drawersStore = useUxDrawersStore()
 
-const { instances, instancesMap, loading, statusChannelLive, fetchData, instanceUpdated } = useTeamDashboards()
+const { context, fetch, viewerRouteName, homeRoute, ensureContext } = useDashboardScope(props.scope)
+const { instances, instancesMap, loading, statusChannelLive, fetchData, instanceUpdated } = useDashboards(fetch)
 
 const selectedId = ref<string | null>(null)
 const isResizing = ref(false)
 
-const team = computed(() => contextStore.team)
 const drawerOpen = computed(() => drawersStore.editorImmersiveDrawer.state)
 const selectedInstance = computed(() => instancesMap.value.get(selectedId.value) || null)
-const homeRoute = computed(() => {
-    if (!team.value) return null
-    return { name: 'team-dashboards', params: { team_slug: team.value.slug } }
-})
-
-function ensureTeam () {
-    const slug = route.params.team_slug
-    if (slug && contextStore.team?.slug !== slug) {
-        useAccountStore().setTeam(slug)
-    }
-}
 
 function selectDashboard (id) {
     selectedId.value = id
     if (route.params.instanceId !== id) {
-        router.replace({ name: 'team-dashboards-view', params: { ...route.params, instanceId: id } })
+        router.replace({ name: viewerRouteName, params: { ...route.params, instanceId: id } })
     }
 }
 
@@ -99,7 +94,8 @@ function resolveSelection () {
 }
 
 watch(instances, resolveSelection)
-watch(() => route.params.team_slug, ensureTeam)
+watch(context, fetchData)
+watch(() => route.params, ensureContext, { deep: true })
 watch(() => route.params.instanceId as string, id => {
     if (id && instancesMap.value.has(id)) {
         selectedId.value = id
@@ -107,7 +103,7 @@ watch(() => route.params.instanceId as string, id => {
 })
 
 onMounted(() => {
-    ensureTeam()
+    ensureContext()
     contextStore.setIsImmersive(true)
     fetchData()
 })
@@ -118,7 +114,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.team-dashboards {
+.dashboards-viewer {
     display: flex;
     flex-direction: row;
     flex: 1;
@@ -127,21 +123,21 @@ onUnmounted(() => {
     overflow: hidden;
 }
 
-.team-dashboards--content {
+.dashboards-viewer--content {
     flex: 1;
     min-width: 0;
     height: 100%;
     position: relative;
 }
 
-.team-dashboards--list {
+.dashboards-viewer--list {
     display: flex;
     flex-direction: column;
     gap: 2px;
     padding: 12px;
 }
 
-.team-dashboards--list-item {
+.dashboards-viewer--list-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -161,12 +157,12 @@ onUnmounted(() => {
         background: var(--ff-color-bg-surface-raised);
     }
 
-    &.selected .team-dashboards--list-item-name {
+    &.selected .dashboards-viewer--list-item-name {
         font-weight: 600;
     }
 }
 
-.team-dashboards--list-item-name {
+.dashboards-viewer--list-item-name {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/frontend/src/composables/TeamDashboards.ts b/frontend/src/composables/Dashboards.ts
similarity index 55%
rename from frontend/src/composables/TeamDashboards.ts
rename to frontend/src/composables/Dashboards.ts
index 36a2637e8b..9986a35ed8 100644
--- a/frontend/src/composables/TeamDashboards.ts
+++ b/frontend/src/composables/Dashboards.ts
@@ -1,7 +1,10 @@
 import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
+import applicationApi from '@/api/application.js'
 import teamApi from '@/api/team.js'
 import Alerts from '@/services/alerts.js'
+import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 import { useLiveStatusStore } from '@/stores/live-status'
 import { applyLiveState } from '@/utils/applyLiveState.js'
@@ -14,14 +17,14 @@ interface DashboardInstance {
     [key: string]: unknown
 }
 
-export function useTeamDashboards () {
-    const contextStore = useContextStore()
+type DashboardsResponse = { projects: DashboardInstance[] }
+
+export function useDashboards (fetchProjects: () => Promise<DashboardsResponse> | null) {
     const liveStatusStore = useLiveStatusStore()
 
     const loading = ref(false)
     const instancesMap = ref<Map<string, DashboardInstance>>(new Map())
 
-    const team = computed(() => contextStore.team)
     const statusChannelLive = computed(() => liveStatusStore.live)
     const liveInstanceMetadata = computed(() => liveStatusStore.instanceMetadata)
     const instances = computed(() => Array.from(instancesMap.value.values()))
@@ -49,13 +52,11 @@ export function useTeamDashboards () {
     }
 
     async function fetchData () {
-        if (!team.value?.id) {
-            loading.value = false
-            return
-        }
+        const request = fetchProjects()
+        if (!request) return
         loading.value = true
         try {
-            const response = await teamApi.getTeamDashboards(team.value.id)
+            const response = await request
             const projects = response?.projects || []
             const nextMap = new Map<string, DashboardInstance>()
             projects.forEach((instance: DashboardInstance) => nextMap.set(instance.id, seedMeta(instance)))
@@ -80,8 +81,58 @@ export function useTeamDashboards () {
         })
     }
 
-    watch(team, fetchData)
     watch(liveInstanceMetadata, applyLiveStatus, { deep: true })
 
     return { instances, instancesMap, loading, statusChannelLive, fetchData, instanceUpdated }
 }
+
+export function useDashboardScope (scope: string) {
+    const contextStore = useContextStore()
+    const route = useRoute()
+
+    if (scope === 'application') {
+        return {
+            context: computed(() => contextStore.application),
+            fetch: () => {
+                const id = contextStore.application?.id
+                return id ? applicationApi.getApplicationDashboards(id) : null
+            },
+            viewerRouteName: 'application-dashboards-view',
+            homeRoute: computed(() => {
+                const app = contextStore.application
+                if (!app) return null
+                return { name: 'ApplicationDashboards', params: { team_slug: route.params.team_slug, id: app.id } }
+            }),
+            ensureContext: () => {
+                const slug = route.params.team_slug as string
+                if (slug && contextStore.team?.slug !== slug) {
+                    useAccountStore().setTeam(slug)
+                }
+                const id = route.params.id as string
+                if (id && contextStore.application?.id !== id) {
+                    return applicationApi.getApplication(id).then(app => contextStore.setApplication(app))
+                }
+            }
+        }
+    }
+
+    return {
+        context: computed(() => contextStore.team),
+        fetch: () => {
+            const id = contextStore.team?.id
+            return id ? teamApi.getTeamDashboards(id) : null
+        },
+        viewerRouteName: 'team-dashboards-view',
+        homeRoute: computed(() => {
+            const team = contextStore.team
+            if (!team) return null
+            return { name: 'team-dashboards', params: { team_slug: team.slug } }
+        }),
+        ensureContext: () => {
+            const slug = route.params.team_slug as string
+            if (slug && contextStore.team?.slug !== slug) {
+                useAccountStore().setTeam(slug)
+            }
+        }
+    }
+}
diff --git a/frontend/src/pages/application/Dashboards.vue b/frontend/src/pages/application/Dashboards.vue
new file mode 100644
index 0000000000..5eadd633b2
--- /dev/null
+++ b/frontend/src/pages/application/Dashboards.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="flex-1 flex flex-col" data-el="application-dashboards">
+        <DashboardList scope="application" />
+    </div>
+</template>
+
+<script setup>
+import DashboardList from '@/components/dashboard/DashboardList.vue'
+
+defineOptions({ name: 'ApplicationDashboards' })
+</script>
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index d8cd3788d7..1c56ababcd 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -65,7 +65,7 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team']),
-        ...mapState(useAccountSettingsStore, ['features']),
+        ...mapState(useAccountSettingsStore, ['features', 'featuresCheck']),
         ...mapState(useLiveStatusStore, { liveInstanceMetadata: 'instanceMetadata', statusChannelLive: 'live' }),
         navigation () {
             const routes = [
@@ -81,6 +81,12 @@ export default {
                     tag: 'application-devices-overview'
                     // icon: CpuChipIcon
                 },
+                {
+                    label: 'Dashboards',
+                    to: { name: 'ApplicationDashboards' },
+                    tag: 'application-dashboards',
+                    hidden: !this.featuresCheck?.isEmbeddedDashboardEnabled
+                },
                 {
                     label: 'Device Groups',
                     to: { name: 'ApplicationDeviceGroups' },
diff --git a/frontend/src/pages/application/routes.js b/frontend/src/pages/application/routes.js
index 94615c8aef..6615337def 100644
--- a/frontend/src/pages/application/routes.js
+++ b/frontend/src/pages/application/routes.js
@@ -1,5 +1,6 @@
 import ApplicationActivity from './Activity.vue'
 import ApplicationCreateInstanceMultiStep from './CreateInstanceMultiStep.vue'
+import ApplicationDashboards from './Dashboards.vue'
 import Dependencies from './Dependencies/Dependencies.vue'
 import ApplicationDeviceGroupSettingsEnvironment from './DeviceGroup/Settings/Environment.vue'
 import ApplicationDeviceGroupSettingsGeneral from './DeviceGroup/Settings/General.vue'
@@ -48,6 +49,14 @@ export default [
                     title: 'Application - Instances'
                 }
             },
+            {
+                path: 'dashboards',
+                name: 'ApplicationDashboards',
+                component: ApplicationDashboards,
+                meta: {
+                    title: 'Application - Dashboards'
+                }
+            },
             {
                 path: 'devices',
                 name: 'ApplicationDevices',
diff --git a/frontend/src/pages/team/Dashboards/index.vue b/frontend/src/pages/team/Dashboards/index.vue
index 91c12b5ef2..7be4389aad 100644
--- a/frontend/src/pages/team/Dashboards/index.vue
+++ b/frontend/src/pages/team/Dashboards/index.vue
@@ -7,72 +7,12 @@
                 </template>
             </ff-page-header>
         </template>
-        <div class="flex-1 flex flex-col overflow-auto">
-            <ff-loading v-if="loading && instances.length === 0" message="Loading Dashboards..." />
-            <ff-data-table
-                v-else-if="instances.length"
-                data-el="dashboards-table"
-                :columns="columns"
-                :rows="instances"
-                :show-search="true"
-                search-placeholder="Search Dashboards..."
-                :rows-selectable="true"
-                @row-selected="openDashboard"
-            />
-            <EmptyState v-else>
-                <template #img>
-                    <img src="../../../images/empty-states/team-instances.png">
-                </template>
-                <template #header>There are no dashboards in this team.</template>
-                <template #message>
-                    <p>Dashboards appear here once an instance has the Dashboard installed.</p>
-                </template>
-            </EmptyState>
-        </div>
-        <template v-if="!statusChannelLive">
-            <InstanceStatusPolling
-                v-for="instance in instances"
-                :key="instance.id"
-                :instance="instance"
-                @instance-updated="instanceUpdated"
-            />
-        </template>
+        <DashboardList scope="team" />
     </ff-page>
 </template>
 
-<script setup lang="ts">
-import { markRaw, onMounted } from 'vue'
-
-import EmptyState from '@/components/EmptyState.vue'
-import InstanceStatusPolling from '@/components/InstanceStatusPolling.vue'
-import { useNavigationHelper } from '@/composables/NavigationHelper.js'
-import { useTeamDashboards } from '@/composables/TeamDashboards'
-import ApplicationLink from '@/pages/application/components/cells/ApplicationLink.vue'
-import DeploymentName from '@/pages/application/components/cells/DeploymentName.vue'
-import SimpleTextCell from '@/pages/application/components/cells/SimpleTextCell.vue'
-import InstanceStatusBadge from '@/pages/instance/components/InstanceStatusBadge.vue'
-
-import { useContextStore } from '@/stores/context.js'
+<script setup>
+import DashboardList from '@/components/dashboard/DashboardList.vue'
 
 defineOptions({ name: 'TeamDashboards' })
-
-const contextStore = useContextStore()
-const { navigateTo } = useNavigationHelper()
-const { instances, loading, statusChannelLive, fetchData, instanceUpdated } = useTeamDashboards()
-
-const columns = [
-    { label: 'Name', class: ['grow'], key: 'name', sortable: true, component: { is: markRaw(DeploymentName), map: { url: 'url' }, extraProps: { copyable: true } } },
-    { label: 'Status', class: ['w-44'], component: { is: markRaw(InstanceStatusBadge), map: { instanceId: 'id', status: 'status' }, extraProps: { instanceType: 'instance' } } },
-    { label: 'Application', class: ['grow-[0.25]'], key: 'application.name', sortable: true, component: { is: markRaw(ApplicationLink), map: { id: 'application.id', name: 'application.name' } } },
-    { label: 'Last Updated', class: ['w-60'], key: 'flowLastUpdatedAt', sortable: true, component: { is: markRaw(SimpleTextCell), map: { text: 'flowLastUpdatedSince' } } }
-]
-
-function openDashboard (instance: { id: string }, event: MouseEvent) {
-    navigateTo({
-        name: 'team-dashboards-view',
-        params: { team_slug: contextStore.team.slug, instanceId: instance.id }
-    }, event)
-}
-
-onMounted(fetchData)
 </script>
diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index 0039388844..9f9c59bf94 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -7,8 +7,8 @@ import TeamAuditLog from './AuditLog.vue'
 import TeamBillOfMaterials from './BOM/index.vue'
 import TeamBilling from './Billing/index.vue'
 import BrokersRoutes from './Brokers/routes.js'
-import TeamDashboardViewer from './Dashboards/Viewer.vue'
 import TeamDashboards from './Dashboards/index.vue'
+
 import DeviceGroups from './DeviceGroups/index.vue'
 import TeamDevices from './Devices/index.vue'
 import TeamHome from './Home/index.vue'
@@ -33,6 +33,8 @@ import CreateInstance from './createInstance.vue'
 
 import Team from './index.vue'
 
+import DashboardViewer from '@/components/dashboard/DashboardViewer.vue'
+
 export default [
     {
         path: '/team',
@@ -247,12 +249,23 @@ export default [
     {
         name: 'team-dashboards-view',
         path: '/team/:team_slug/dashboards/:instanceId',
-        component: TeamDashboardViewer,
+        component: DashboardViewer,
+        props: { scope: 'team' },
         meta: {
             title: 'Team - Dashboards',
             layout: 'immersive'
         }
     },
+    {
+        name: 'application-dashboards-view',
+        path: '/team/:team_slug/applications/:id/dashboards/:instanceId',
+        component: DashboardViewer,
+        props: { scope: 'application' },
+        meta: {
+            title: 'Application - Dashboards',
+            layout: 'immersive'
+        }
+    },
     {
         path: '/deploy/blueprint',
         component: CreateInstance,
diff --git a/frontend/src/stores/product-expert.js b/frontend/src/stores/product-expert.js
index a895296055..f1df68056f 100644
--- a/frontend/src/stores/product-expert.js
+++ b/frontend/src/stores/product-expert.js
@@ -159,7 +159,7 @@ export const useProductExpertStore = defineStore('product-expert', {
                 return router.push({ name: expertRouteName, params: contextStore.route.params })
             }
 
-            if (contextStore.route?.name === 'team-dashboards-view') {
+            if (['team-dashboards-view', 'application-dashboards-view'].includes(contextStore.route?.name)) {
                 const drawersStore = useUxDrawersStore()
                 if (!drawersStore.editorImmersiveDrawer.state) {
                     drawersStore.openEditorImmersiveDrawer()

From 1a691b707a69adcb96c95d1937ac60c48461b0e7 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 22 Jul 2026 11:15:19 -0700
Subject: [PATCH 08/13] Remove feature flag

---
 frontend/src/pages/application/index.vue |  5 ++---
 frontend/src/pages/instance/index.vue    |  2 +-
 frontend/src/pages/team/index.vue        | 10 ++--------
 frontend/src/stores/account-settings.js  |  4 +---
 frontend/src/stores/ux-navigation.js     |  3 +--
 5 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index 1c56ababcd..14d34abbf8 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -65,7 +65,7 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team']),
-        ...mapState(useAccountSettingsStore, ['features', 'featuresCheck']),
+        ...mapState(useAccountSettingsStore, ['features']),
         ...mapState(useLiveStatusStore, { liveInstanceMetadata: 'instanceMetadata', statusChannelLive: 'live' }),
         navigation () {
             const routes = [
@@ -84,8 +84,7 @@ export default {
                 {
                     label: 'Dashboards',
                     to: { name: 'ApplicationDashboards' },
-                    tag: 'application-dashboards',
-                    hidden: !this.featuresCheck?.isEmbeddedDashboardEnabled
+                    tag: 'application-dashboards'
                 },
                 {
                     label: 'Device Groups',
diff --git a/frontend/src/pages/instance/index.vue b/frontend/src/pages/instance/index.vue
index 007999ce57..fcf4720405 100644
--- a/frontend/src/pages/instance/index.vue
+++ b/frontend/src/pages/instance/index.vue
@@ -147,7 +147,7 @@ export default {
             return [
                 { label: 'Overview', to: { name: 'instance-overview', params: { id: this.instance.id } }, tag: 'instance-overview' },
                 { label: 'Devices', to: { name: 'instance-devices', params: { id: this.instance.id } }, tag: 'instance-remote' },
-                { label: 'Dashboard', to: { name: 'instance-dashboard', params: { id: this.instance.id } }, tag: 'instance-dashboard', hidden: !this.hasDashboard2 || !this.featuresCheck.isEmbeddedDashboardEnabled },
+                { label: 'Dashboard', to: { name: 'instance-dashboard', params: { id: this.instance.id } }, tag: 'instance-dashboard', hidden: !this.hasDashboard2 },
                 { label: 'Version History', to: versionHistoryRoute, tag: 'instance-version-history' },
                 { label: 'Assets', to: { name: 'instance-assets', params: { id: this.instance.id } }, tag: 'instance-assets', hidden: !this.hasPermission('project:files:list', { application: this.instance.application }) },
                 { label: 'Audit Log', to: { name: 'instance-audit-log', params: { id: this.instance.id } }, tag: 'instance-activity' },
diff --git a/frontend/src/pages/team/index.vue b/frontend/src/pages/team/index.vue
index 8127c16615..60a2fed9c5 100644
--- a/frontend/src/pages/team/index.vue
+++ b/frontend/src/pages/team/index.vue
@@ -12,8 +12,7 @@
         <router-view :key="team.id" />
     </template>
     <template v-else-if="!canAccessTeam">
-        <TeamDashboards v-if="isEmbeddedDashboardEnabled" />
-        <TeamInstances v-else :dashboard-role-only="true" />
+        <TeamDashboards />
     </template>
 </template>
 
@@ -26,7 +25,6 @@ import TeamTrialBanner from '../../components/banners/TeamTrial.vue'
 import { Roles } from '../../utils/roles.js'
 
 import TeamDashboards from './Dashboards/index.vue'
-import TeamInstances from './Instances.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useAccountSettingsStore } from '@/stores/account-settings.js'
@@ -39,7 +37,6 @@ export default {
     name: 'TeamPage',
     components: {
         TeamDashboards,
-        TeamInstances,
         SubscriptionExpiredBanner,
         TeamSuspendedBanner,
         TeamTrialBanner
@@ -57,7 +54,7 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team', 'teamMembership']),
-        ...mapState(useAccountSettingsStore, ['requiresBilling', 'featuresCheck']),
+        ...mapState(useAccountSettingsStore, ['requiresBilling']),
         ...mapState(useAccountAuthStore, ['user', 'isAdminUser']),
         ...mapState(useUxToursStore, ['shouldPresentTour']),
         ...mapState(useProductExpertStore, ['shouldWakeUpAssistant']),
@@ -73,9 +70,6 @@ export default {
         },
         canAccessTeam: function () {
             return this.isAdminUser || this.teamMembership?.role >= Roles.Viewer
-        },
-        isEmbeddedDashboardEnabled: function () {
-            return this.featuresCheck?.isEmbeddedDashboardEnabled
         }
     },
     watch: {
diff --git a/frontend/src/stores/account-settings.js b/frontend/src/stores/account-settings.js
index 0a520f2dc9..abfe19f6b3 100644
--- a/frontend/src/stores/account-settings.js
+++ b/frontend/src/stores/account-settings.js
@@ -6,8 +6,7 @@ import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useContextStore } from '@/stores/context.js'
 
 export const POSTHOG_FLAGS = {
-    FF_FEATURE_FLAGS: 'FF_FEATURE_FLAGS',
-    EMBEDDED_DASHBOARD_ENABLED: 'EMBEDDED_DASHBOARD_ENABLED'
+    FF_FEATURE_FLAGS: 'FF_FEATURE_FLAGS'
 }
 
 export const useAccountSettingsStore = defineStore('account-settings', {
@@ -50,7 +49,6 @@ export const useAccountSettingsStore = defineStore('account-settings', {
 
             // adding in PostHog Feature Flags
             checks.isPostHogFeatureFlagsEnabled = !!state.posthogFlags[POSTHOG_FLAGS.FF_FEATURE_FLAGS]
-            checks.isEmbeddedDashboardEnabled = !!state.posthogFlags[POSTHOG_FLAGS.EMBEDDED_DASHBOARD_ENABLED]
 
             return checks
         }
diff --git a/frontend/src/stores/ux-navigation.js b/frontend/src/stores/ux-navigation.js
index c4933a05c1..d21e718eea 100644
--- a/frontend/src/stores/ux-navigation.js
+++ b/frontend/src/stores/ux-navigation.js
@@ -251,8 +251,7 @@ export const useUxNavigationStore = defineStore('ux-navigation', {
                                 },
                                 tag: 'team-dashboards',
                                 icon: ChartPieIcon,
-                                disabled: requiresBilling,
-                                hidden: features.isEmbeddedDashboardEnabled
+                                disabled: requiresBilling
                             },
                             {
                                 label: 'Groups',

From 2ee6caff037c966349b47ea748c985be011f0ca3 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 22 Jul 2026 11:50:09 -0700
Subject: [PATCH 09/13] Simplify the Instances component and update specs to
 remove the dashboard role view

---
 frontend/src/pages/team/Instances.vue         | 27 +++++--------------
 .../cypress/tests/team/instances.spec.js      | 20 +++++++-------
 2 files changed, 15 insertions(+), 32 deletions(-)

diff --git a/frontend/src/pages/team/Instances.vue b/frontend/src/pages/team/Instances.vue
index 0364a5b9fa..b6e4290bb0 100644
--- a/frontend/src/pages/team/Instances.vue
+++ b/frontend/src/pages/team/Instances.vue
@@ -1,10 +1,9 @@
 <template>
     <ff-page>
         <template #header>
-            <ff-page-header :title="dashboardRoleOnly ? 'Dashboards' : 'Hosted Instances'">
+            <ff-page-header title="Hosted Instances">
                 <template #context>
-                    <span v-if="!dashboardRoleOnly">A list of all dashboards belonging to this Team.</span>
-                    <span v-else>A list of Node-RED instances with Dashboards belonging to this Team.</span>
+                    <span>A list of all dashboards belonging to this Team.</span>
                 </template>
                 <template #help-header>
                     Instances
@@ -14,14 +13,14 @@
                 </template>
                 <template #helptext>
                     <p>
-                        This is a list of <span v-if="!dashboardRoleOnly">all</span> Node-RED instances belonging to this team running
+                        This is a list of all Node-RED instances belonging to this team running
                         in this FlowFuse.
                     </p>
                     <p>
                         Each Instance is a customised version of Node-RED that includes various
                         FlowFuse plugins to integrate it with the platform.
                     </p>
-                    <p v-if="!dashboardRoleOnly">
+                    <p>
                         A number of the standard Node-RED settings are exposed for customisation,
                         and they can be preset by applying a Template upon creation of an Instance.
                     </p>
@@ -39,7 +38,7 @@
                     data-el="instances-table" :columns="columns" :rows="instances" :show-search="true"
                     search-placeholder="Search Instances..."
                     :initialSortKey="sort.key" :initialSortOrder="sort.order"
-                    :rows-selectable="!dashboardRoleOnly"
+                    :rows-selectable="true"
                     :pagination="paginationProps"
                     @row-selected="openInstance"
                     @update:search="updateSearch"
@@ -103,7 +102,7 @@
                         />
                     </template>
                 </ff-data-table>
-                <EmptyState v-else-if="!dashboardRoleOnly">
+                <EmptyState v-else>
                     <template #img>
                         <img src="../../images/empty-states/team-instances.png">
                     </template>
@@ -135,12 +134,6 @@
                         </ff-button>
                     </template>
                 </EmptyState>
-                <EmptyState v-else>
-                    <template #img>
-                        <img src="../../images/empty-states/team-instances.png">
-                    </template>
-                    <template #header>There are no dashboards in this team.</template>
-                </EmptyState>
             </template>
             <template v-else>
                 <EmptyState>
@@ -204,13 +197,6 @@ export default {
         FeatureUnavailableToTeam
     },
     mixins: [instanceActionsMixin],
-    props: {
-        dashboardRoleOnly: {
-            required: false,
-            default: false,
-            type: Boolean
-        }
-    },
     setup () {
         const { isRunningState } = useInstanceStates()
         const { navigateTo } = useNavigationHelper()
@@ -285,7 +271,6 @@ export default {
             return this.featuresCheck?.isHostedInstancesEnabledForTeam
         },
         paginationProps () {
-            if (this.dashboardRoleOnly) return null
             return {
                 page: this.page,
                 pageSize: this.pageSize,
diff --git a/test/e2e/frontend/cypress/tests/team/instances.spec.js b/test/e2e/frontend/cypress/tests/team/instances.spec.js
index 6ec7229dbe..a6cfb0355c 100644
--- a/test/e2e/frontend/cypress/tests/team/instances.spec.js
+++ b/test/e2e/frontend/cypress/tests/team/instances.spec.js
@@ -75,23 +75,21 @@ describe('Team - Instances', () => {
             cy.contains('There are no dashboards in this team.')
         })
 
-        it('are shown a list of instances when dashboard instances are found', () => {
+        it('are shown a list of dashboards and can open one in the viewer', () => {
             cy.login('dashboard-dave', 'ddPassword')
             cy.visit('/team/ateam')
 
             cy.wait('@getTeam')
 
-            cy.contains('instance-1-2')
-                .closest('tr')
-                .within(() => {
-                    cy.get('[data-action="open-dashboard"]').should('be.disabled')
-                })
+            cy.get('[data-el="dashboards-table"]').within(() => {
+                cy.contains('instance-1-1')
+                cy.contains('instance-1-2')
+            })
 
-            cy.contains('instance-1-1')
-                .closest('tr')
-                .within(() => {
-                    cy.get('[data-action="open-dashboard"]').should('not.be.disabled')
-                })
+            cy.contains('instance-1-1').closest('tr').click()
+
+            cy.url().should('include', '/dashboards/')
+            cy.get('[data-el="dashboards-viewer"]').should('exist')
         })
     })
 })

From 8d40c8f3d5d232f42b1d62fbffc4d1d54a73470c Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 22 Jul 2026 11:59:49 -0700
Subject: [PATCH 10/13] Remove fetch for dashboards from Instances

---
 frontend/src/pages/team/Instances.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/pages/team/Instances.vue b/frontend/src/pages/team/Instances.vue
index b6e4290bb0..c78d10f320 100644
--- a/frontend/src/pages/team/Instances.vue
+++ b/frontend/src/pages/team/Instances.vue
@@ -309,9 +309,6 @@ export default {
                         },
                         includeMeta: true
                     })
-                } else if (this.hasPermission('team:read')) {
-                    // Dashboards endpoint not paginated server-side; keep current behavior.
-                    response = await teamApi.getTeamDashboards(this.team.id)
                 }
                 const projects = response?.projects || []
                 this.totalRows = response?.meta?.total ?? response?.count ?? projects.length

From 17e580b98bc0bcf7ec2a9ba1ea2b894d38892f12 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 22 Jul 2026 12:26:16 -0700
Subject: [PATCH 11/13] Fix context template text

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

diff --git a/frontend/src/pages/team/Instances.vue b/frontend/src/pages/team/Instances.vue
index c78d10f320..a3f75ed6a7 100644
--- a/frontend/src/pages/team/Instances.vue
+++ b/frontend/src/pages/team/Instances.vue
@@ -3,7 +3,7 @@
         <template #header>
             <ff-page-header title="Hosted Instances">
                 <template #context>
-                    <span>A list of all dashboards belonging to this Team.</span>
+                    <span>A list of all Node-RED instances belonging to this Team.</span>
                 </template>
                 <template #help-header>
                     Instances

From 3c083af06b3d5f93185f6fe8828233dea8ac0ebf Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Wed, 22 Jul 2026 12:54:54 -0700
Subject: [PATCH 12/13] Update specs for new dashboard view

---
 .../tests-ee/rbac/rbac-management.spec.js        | 16 ++++++++--------
 .../cypress/tests/brokers/clients.spec.js        |  2 +-
 .../cypress/tests/brokers/hierarchy.spec.js      |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/rbac/rbac-management.spec.js b/test/e2e/frontend/cypress/tests-ee/rbac/rbac-management.spec.js
index b85d36b7bd..3a7a9b436c 100644
--- a/test/e2e/frontend/cypress/tests-ee/rbac/rbac-management.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/rbac/rbac-management.spec.js
@@ -303,16 +303,16 @@ describe('FlowFuse - RBAC GUI Management', () => {
             cy.get('[data-nav="user-access"]').should('not.exist')
 
             // checking that a plain dashboard user has access to all application instances when he has no additional rbac permissions set
-            cy.get('[data-el="instances-table"]').should('exist')
-            cy.get('[data-el="instances-table"] tbody tr').should('have.length', 5)
+            cy.get('[data-el="dashboards-table"]').should('exist')
+            cy.get('[data-el="dashboards-table"] tbody tr').should('have.length', 5)
             // application 1 should not be visible to anyone
-            cy.get('[data-el="instances-table"] [data-el="row-application-1-instance-1"]').should('not.exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-1-instance-1"]').should('not.exist')
             // application 2 should be visible to dashboard users
-            cy.get('[data-el="instances-table"] [data-el="row-application-2-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-3-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-4-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-5-instance-1"]').should('exist')
-            cy.get('[data-el="instances-table"] [data-el="row-application-6-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-2-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-3-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-4-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-5-instance-1"]').should('exist')
+            cy.get('[data-el="dashboards-table"] [data-el="row-application-6-instance-1"]').should('exist')
         })
     })
 })
diff --git a/test/e2e/frontend/cypress/tests/brokers/clients.spec.js b/test/e2e/frontend/cypress/tests/brokers/clients.spec.js
index 3e1004a24f..4e83f41670 100644
--- a/test/e2e/frontend/cypress/tests/brokers/clients.spec.js
+++ b/test/e2e/frontend/cypress/tests/brokers/clients.spec.js
@@ -29,7 +29,7 @@ describe('FlowFuse - Brokers Clients', () => {
             cy.get('[data-nav="team-brokers"]').should('not.exist')
             cy.visit('team/ateam/brokers/team-broker/clients')
 
-            cy.get('[data-el="instances-table"]').should('exist')
+            cy.get('[data-el="dashboards-list"]').should('exist')
         })
     })
 })
diff --git a/test/e2e/frontend/cypress/tests/brokers/hierarchy.spec.js b/test/e2e/frontend/cypress/tests/brokers/hierarchy.spec.js
index 9d70c5374b..0e52c41899 100644
--- a/test/e2e/frontend/cypress/tests/brokers/hierarchy.spec.js
+++ b/test/e2e/frontend/cypress/tests/brokers/hierarchy.spec.js
@@ -17,7 +17,7 @@ describe('FlowFuse - Brokers Hierarchy', () => {
             cy.get('[data-nav="team-unified-namespace"]').should('not.exist')
             cy.visit('team/ateam/brokers/team-broker/hierarchy')
 
-            cy.get('[data-el="instances-table"]').should('exist')
+            cy.get('[data-el="dashboards-list"]').should('exist')
         })
     })
 })

From 5b97185b0b91c57dd48b6e94f696363f22461e84 Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Thu, 23 Jul 2026 09:19:25 -0700
Subject: [PATCH 13/13] Removed orphaned file from merge

---
 .../immersive-editor/DashboardDrawer.vue      | 121 ------------------
 1 file changed, 121 deletions(-)
 delete mode 100644 frontend/src/components/immersive-editor/DashboardDrawer.vue

diff --git a/frontend/src/components/immersive-editor/DashboardDrawer.vue b/frontend/src/components/immersive-editor/DashboardDrawer.vue
deleted file mode 100644
index 518806be03..0000000000
--- a/frontend/src/components/immersive-editor/DashboardDrawer.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-    <section
-        class="tabs-wrapper drawer"
-        :class="{
-            open: editorImmersiveDrawer.state,
-            pinned: editorImmersiveDrawer.pinned,
-            resizing: isResizing,
-            'side-left': editorImmersiveDrawer.side === 'left',
-            'side-right': editorImmersiveDrawer.side === 'right'
-        }"
-        :style="drawerStyle"
-        data-el="dashboard-drawer"
-    >
-        <resize-bar :is-resizing="isResizing" @mousedown="startResize" />
-
-        <div class="drawer-content">
-            <div v-if="hasStackedView && currentStackView.title" class="header header--stacked">
-                <button class="drawer-header-btn" title="Back" type="button" @click="drawersStore.popEditorImmersiveView">
-                    <ArrowLeftIcon class="ff-btn--icon" />
-                </button>
-                <span class="editor-drawer-stack-title">{{ currentStackView.title }}</span>
-                <div class="side-actions">
-                    <ff-button
-                        v-for="(action, $key) in stackedActions"
-                        :key="action.label + $key"
-                        :kind="action.kind ?? 'secondary'"
-                        :disabled="typeof action.disabled === 'function' ? action.disabled() : action.disabled"
-                        :has-left-icon="!!action.iconLeft"
-                        v-bind="action.bind"
-                        @click="action.handler"
-                    >
-                        <template v-if="!!action.iconLeft" #icon-left>
-                            <component :is="action.iconLeft" />
-                        </template>
-                        {{ action.label }}
-                    </ff-button>
-                    <button class="drawer-header-btn" title="Close drawer" type="button" aria-label="Close drawer" @click="drawersStore.toggleEditorImmersiveDrawer">
-                        <XMarkIcon class="ff-btn--icon" />
-                    </button>
-                </div>
-            </div>
-
-            <div v-if="!hasStackedView" class="header">
-                <div class="logo">
-                    <router-link v-if="homeRoute" title="Back" :to="homeRoute">
-                        <HomeIcon class="ff-btn--icon" style="width: 18px; height: 18px;" />
-                    </router-link>
-                </div>
-                <span class="dashboard-drawer--title">
-                    <ChartPieIcon class="dashboard-drawer--title-icon" />
-                    {{ title }}
-                </span>
-                <div class="side-actions">
-                    <EditorDrawerSettings />
-                    <button class="drawer-header-btn" title="Close drawer" type="button" aria-label="Close drawer" @click="drawersStore.toggleEditorImmersiveDrawer">
-                        <XMarkIcon class="ff-btn--icon" />
-                    </button>
-                </div>
-            </div>
-
-            <ff-page v-if="hasStackedView && currentStackView.title" :no-padding="true">
-                <component :is="currentStackView.component" v-bind="currentStackView.props" v-on="currentStackView.events || {}" />
-            </ff-page>
-            <component :is="currentStackView.component" v-else-if="hasStackedView" v-bind="currentStackView.props" v-on="currentStackView.events || {}" />
-            <ff-page v-else :no-padding="true">
-                <slot />
-            </ff-page>
-        </div>
-    </section>
-</template>
-
-<script setup lang="ts">
-import { HomeIcon, XMarkIcon } from '@heroicons/vue/20/solid'
-import { ArrowLeftIcon, ChartPieIcon } from '@heroicons/vue/24/outline'
-
-import ResizeBar from '@/components/ResizeBar.vue'
-import EditorDrawerSettings from '@/components/immersive-editor/EditorDrawerSettings.vue'
-import { useImmersiveDrawer } from '@/composables/ImmersiveDrawer'
-
-defineProps({
-    homeRoute: {
-        type: Object,
-        default: null
-    },
-    title: {
-        type: String,
-        default: 'Dashboards'
-    }
-})
-
-const emit = defineEmits(['resizing'])
-
-const {
-    drawersStore,
-    editorImmersiveDrawer,
-    isResizing,
-    drawerStyle,
-    hasStackedView,
-    currentStackView,
-    stackedActions,
-    startResize
-} = useImmersiveDrawer({ onResizingChange: (resizing) => emit('resizing', resizing) })
-</script>
-
-<style scoped lang="scss">
-.dashboard-drawer--title {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-left: 8px;
-    font-weight: 600;
-    color: var(--ff-color-text);
-}
-
-.dashboard-drawer--title-icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-}
-</style>