From d0db79e4e4ab2b3bc5d0e8ad02d8b66c6e872a43 Mon Sep 17 00:00:00 2001
From: Sudo-Ivan <ivan@quad4.io>
Date: Sun, 4 Jan 2026 00:04:18 -0600
Subject: [PATCH] feat(RNodeFlasherPage): add new RNode Flasher page component
 and update ToolsPage to link to it

---
 .../components/tools/RNodeFlasherPage.vue     | 47 +++++++++++++++++++
 .../frontend/components/tools/ToolsPage.vue   | 16 +++++--
 2 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue

diff --git a/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
new file mode 100644
index 0000000..e06bc66
--- /dev/null
+++ b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="flex flex-col h-full w-full bg-white dark:bg-zinc-950 overflow-hidden">
+        <!-- header -->
+        <div
+            class="flex items-center px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/50 backdrop-blur-lg z-10 relative"
+        >
+            <div class="flex items-center space-x-2">
+                <v-icon icon="mdi-chip" color="purple" size="24"></v-icon>
+                <h1 class="text-xl font-black text-gray-900 dark:text-white">{{ $t("tools.rnode_flasher.title") }}</h1>
+            </div>
+
+            <div class="ml-auto flex items-center space-x-2">
+                <a
+                    href="/rnode-flasher/index.html"
+                    target="_blank"
+                    class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
+                    title="Open in new tab"
+                >
+                    <MaterialDesignIcon icon-name="open-in-new" class="size-5" />
+                    <span class="hidden sm:inline">Open in new tab</span>
+                </a>
+                <button
+                    class="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                    @click="$router.push({ name: 'tools' })"
+                >
+                    <MaterialDesignIcon icon-name="close" class="size-5" />
+                </button>
+            </div>
+        </div>
+
+        <!-- content -->
+        <div class="flex-1 min-h-0 relative">
+            <iframe src="/rnode-flasher/index.html" class="w-full h-full border-0" allow="serial"></iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+import MaterialDesignIcon from "../MaterialDesignIcon.vue";
+
+export default {
+    name: "RNodeFlasherPage",
+    components: {
+        MaterialDesignIcon,
+    },
+};
+</script>
diff --git a/meshchatx/src/frontend/components/tools/ToolsPage.vue b/meshchatx/src/frontend/components/tools/ToolsPage.vue
index ff3c8bb..bb8a85d 100644
--- a/meshchatx/src/frontend/components/tools/ToolsPage.vue
+++ b/meshchatx/src/frontend/components/tools/ToolsPage.vue
@@ -137,7 +137,7 @@
                     <MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
                 </RouterLink>
 
-                <a target="_blank" href="/rnode-flasher/index.html" class="tool-card glass-card">
+                <RouterLink :to="{ name: 'rnode-flasher' }" class="tool-card glass-card">
                     <div
                         class="tool-card__icon bg-purple-50 text-purple-500 dark:bg-purple-900/30 dark:text-purple-200"
                     >
@@ -149,8 +149,18 @@
                             {{ $t("tools.rnode_flasher.description") }}
                         </div>
                     </div>
-                    <MaterialDesignIcon icon-name="open-in-new" class="tool-card__chevron" />
-                </a>
+                    <div class="flex items-center gap-2">
+                        <a
+                            href="/rnode-flasher/index.html"
+                            target="_blank"
+                            class="p-2 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition-colors text-gray-400 hover:text-blue-500"
+                            @click.stop
+                        >
+                            <MaterialDesignIcon icon-name="open-in-new" class="size-5" />
+                        </a>
+                        <MaterialDesignIcon icon-name="chevron-right" class="tool-card__chevron" />
+                    </div>
+                </RouterLink>
 
                 <RouterLink :to="{ name: 'debug-logs' }" class="tool-card glass-card border-dashed border-2">
                     <div class="tool-card__icon bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">