From 8ade296fb16b8f8e145f0c83e97179c456325be3 Mon Sep 17 00:00:00 2001
From: Ivan <ivan@quad4.io>
Date: Tue, 14 Apr 2026 19:33:37 -0500
Subject: [PATCH] feat(frontend): improve UI with loading overlay, legend, and
 toolbar components for better user experience

---
 meshchatx/src/frontend/components/App.vue     |  129 ++
 .../frontend/components/CommandPalette.vue    |   56 +-
 .../components/debug/DebugLogsPage.vue        |   26 +-
 .../components/forwarder/ForwarderPage.vue    |   12 +-
 .../messages/ConversationViewer.vue           |   63 +-
 .../components/messages/MessagesPage.vue      |   28 +
 .../micron-editor/MicronEditorPage.vue        |   16 +-
 .../network-visualiser/NetworkVisualiser.vue  | 1501 ++++++++++++-----
 .../internal/NetworkVisualiserLegend.vue      |   35 +
 .../NetworkVisualiserLoadingOverlay.vue       |   49 +
 .../internal/NetworkVisualiserToolbar.vue     |  252 +++
 11 files changed, 1661 insertions(+), 506 deletions(-)
 create mode 100644 meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLegend.vue
 create mode 100644 meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLoadingOverlay.vue
 create mode 100644 meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue

diff --git a/meshchatx/src/frontend/components/App.vue b/meshchatx/src/frontend/components/App.vue
index a158745..56e6239 100644
--- a/meshchatx/src/frontend/components/App.vue
+++ b/meshchatx/src/frontend/components/App.vue
@@ -14,6 +14,23 @@
             </div>
         </div>
 
+        <div
+            v-if="showWsDisconnectedBanner"
+            class="relative z-[100] bg-red-700 text-white px-4 py-2 text-center text-sm font-medium shadow-md border-b border-red-800/80"
+            role="status"
+            aria-live="polite"
+        >
+            {{ $t("app.backend_disconnected") }} · {{ wsDisconnectedDurationText }}
+        </div>
+        <div
+            v-if="wsReconnectedBanner"
+            class="relative z-[100] bg-emerald-700 text-white px-4 py-2 text-center text-sm font-medium shadow-md border-b border-emerald-800/80 transition-opacity duration-300"
+            role="status"
+            aria-live="polite"
+        >
+            {{ $t("app.backend_reconnected") }}
+        </div>
+
         <RouterView v-if="$route.name === 'auth'" />
 
         <template v-else>
@@ -573,6 +590,7 @@ import { useTheme } from "vuetify";
 import SidebarLink from "./SidebarLink.vue";
 import DialogUtils from "../js/DialogUtils";
 import WebSocketConnection from "../js/WebSocketConnection";
+import { formatDisconnectedDuration } from "../js/wsConnectionSupport";
 import GlobalState, { mergeGlobalConfig } from "../js/GlobalState";
 import Utils from "../js/Utils";
 import GlobalEmitter from "../js/GlobalEmitter";
@@ -657,6 +675,13 @@ export default {
             initiationTargetHash: null,
             initiationTargetName: null,
             isCallWindowOpen: false,
+
+            wsDisconnected: false,
+            wsDisconnectedAt: null,
+            wsDisconnectedDurationText: "",
+            wsReconnectedBanner: false,
+            wsDisconnectTickTimer: null,
+            wsReconnectedHideTimer: null,
         };
     },
     computed: {
@@ -685,6 +710,9 @@ export default {
         activeCallTab() {
             return GlobalState.activeCallTab;
         },
+        showWsDisconnectedBanner() {
+            return this.shellRunning && this.wsDisconnected && this.$route?.name !== "auth";
+        },
     },
     watch: {
         $route(to, from) {
@@ -715,6 +743,7 @@ export default {
             this._shellAuthWatchStop = null;
         }
         this.stopShell();
+        this.clearWsShellUiTimers();
         if (this.endedTimeout) clearTimeout(this.endedTimeout);
         this.stopRingtone();
         this.toneGenerator.stop();
@@ -769,6 +798,8 @@ export default {
             this.shellRunning = true;
             WebSocketConnection.connect();
             WebSocketConnection.on("message", this.onWebsocketMessage);
+            WebSocketConnection.on("disconnected", this.onWsShellDisconnected);
+            WebSocketConnection.on("connected", this.onWsShellConnected);
             GlobalEmitter.on("identity-switching-start", this.onIdentitySwitchingStartShell);
             GlobalEmitter.on("sync-propagation-node", this.onSyncPropagationNodeShell);
             GlobalEmitter.on("config-updated", this.onConfigUpdatedExternally);
@@ -803,6 +834,8 @@ export default {
             clearInterval(this.appInfoInterval);
             this.appInfoInterval = null;
             WebSocketConnection.off("message", this.onWebsocketMessage);
+            WebSocketConnection.off("disconnected", this.onWsShellDisconnected);
+            WebSocketConnection.off("connected", this.onWsShellConnected);
             GlobalEmitter.off("identity-switching-start", this.onIdentitySwitchingStartShell);
             GlobalEmitter.off("sync-propagation-node", this.onSyncPropagationNodeShell);
             GlobalEmitter.off("config-updated", this.onConfigUpdatedExternally);
@@ -810,8 +843,104 @@ export default {
             GlobalEmitter.off("block-status-changed", this.onBlockStatusChangedShell);
             GlobalEmitter.off("show-changelog", this.onShowChangelogShell);
             GlobalEmitter.off("show-tutorial", this.onShowTutorialShell);
+            this.clearWsShellUiTimers();
+            this.wsDisconnected = false;
+            this.wsDisconnectedAt = null;
+            this.wsDisconnectedDurationText = "";
+            this.wsReconnectedBanner = false;
             WebSocketConnection.destroy();
         },
+        clearWsShellUiTimers() {
+            if (this.wsDisconnectTickTimer != null) {
+                clearInterval(this.wsDisconnectTickTimer);
+                this.wsDisconnectTickTimer = null;
+            }
+            if (this.wsReconnectedHideTimer != null) {
+                clearTimeout(this.wsReconnectedHideTimer);
+                this.wsReconnectedHideTimer = null;
+            }
+        },
+        onWsShellDisconnected() {
+            if (!this.shellRunning) {
+                return;
+            }
+            this.wsDisconnected = true;
+            this.wsDisconnectedAt = Date.now();
+            this._tickWsDisconnectedLabel();
+            if (this.wsDisconnectTickTimer != null) {
+                clearInterval(this.wsDisconnectTickTimer);
+            }
+            this.wsDisconnectTickTimer = setInterval(() => this._tickWsDisconnectedLabel(), 1000);
+        },
+        _tickWsDisconnectedLabel() {
+            if (!this.wsDisconnectedAt) {
+                this.wsDisconnectedDurationText = "";
+                return;
+            }
+            this.wsDisconnectedDurationText = formatDisconnectedDuration(Date.now() - this.wsDisconnectedAt);
+        },
+        async onWsShellConnected(payload = {}) {
+            if (!this.shellRunning) {
+                return;
+            }
+            this.wsDisconnected = false;
+            this.wsDisconnectedAt = null;
+            this.wsDisconnectedDurationText = "";
+            if (this.wsDisconnectTickTimer != null) {
+                clearInterval(this.wsDisconnectTickTimer);
+                this.wsDisconnectTickTimer = null;
+            }
+            const isReconnect = payload.isReconnect === true;
+            if (isReconnect) {
+                await this.resyncShellAfterWebsocketReconnect();
+                this.wsReconnectedBanner = true;
+                if (this.wsReconnectedHideTimer != null) {
+                    clearTimeout(this.wsReconnectedHideTimer);
+                }
+                this.wsReconnectedHideTimer = setTimeout(() => {
+                    this.wsReconnectedBanner = false;
+                    this.wsReconnectedHideTimer = null;
+                }, 4500);
+            }
+        },
+        async resyncShellAfterWebsocketReconnect() {
+            try {
+                await this.getAppInfo();
+            } catch {
+                // ignore
+            }
+            try {
+                await this.getConfig();
+            } catch {
+                // ignore
+            }
+            try {
+                await this.getBlockedDestinations();
+            } catch {
+                // ignore
+            }
+            try {
+                await this.getKeyboardShortcuts();
+            } catch {
+                // ignore
+            }
+            try {
+                await this.updateRingtonePlayer();
+            } catch {
+                // ignore
+            }
+            try {
+                await this.updateTelephoneStatus();
+            } catch {
+                // ignore
+            }
+            try {
+                await this.updatePropagationNodeStatus();
+            } catch {
+                // ignore
+            }
+            GlobalEmitter.emit("websocket-reconnected");
+        },
         onIdentitySwitchingStartShell() {
             this.isSwitchingIdentity = true;
             setTimeout(() => {
diff --git a/meshchatx/src/frontend/components/CommandPalette.vue b/meshchatx/src/frontend/components/CommandPalette.vue
index eee01be..d2b481d 100644
--- a/meshchatx/src/frontend/components/CommandPalette.vue
+++ b/meshchatx/src/frontend/components/CommandPalette.vue
@@ -116,6 +116,14 @@ import LxmfUserIcon from "./LxmfUserIcon.vue";
 import GlobalEmitter from "../js/GlobalEmitter";
 import ToastUtils from "../js/ToastUtils";
 
+const VISUALISER_ONLY_ACTIONS = new Set([
+    "toggle-orbit",
+    "toggle-bouncing-balls",
+    "toggle-falling-skies",
+    "toggle-snake",
+    "toggle-pong",
+]);
+
 export default {
     name: "CommandPalette",
     components: { MaterialDesignIcon, LxmfUserIcon },
@@ -303,6 +311,30 @@ export default {
                     type: "action",
                     action: "toggle-bouncing-balls",
                 },
+                {
+                    id: "action-falling-skies",
+                    title: "action_falling_skies",
+                    description: "action_falling_skies_desc",
+                    icon: "weather-pouring",
+                    type: "action",
+                    action: "toggle-falling-skies",
+                },
+                {
+                    id: "action-snake",
+                    title: "action_snake",
+                    description: "action_snake_desc",
+                    icon: "snake",
+                    type: "action",
+                    action: "toggle-snake",
+                },
+                {
+                    id: "action-pong",
+                    title: "action_pong",
+                    description: "action_pong_desc",
+                    icon: "table-tennis",
+                    type: "action",
+                    action: "toggle-pong",
+                },
                 {
                     id: "action-getting-started",
                     title: "action_getting_started",
@@ -324,11 +356,19 @@ export default {
     },
     computed: {
         allResults() {
-            const results = this.actions.map((action) => ({
-                ...action,
-                title: this.$t(`command_palette.${action.title}`),
-                description: this.$t(`command_palette.${action.description}`),
-            }));
+            const onVisualiser = this.$route?.name === "network-visualiser";
+            const results = this.actions
+                .filter((action) => {
+                    if (action.type === "action" && VISUALISER_ONLY_ACTIONS.has(action.action)) {
+                        return onVisualiser;
+                    }
+                    return true;
+                })
+                .map((action) => ({
+                    ...action,
+                    title: this.$t(`command_palette.${action.title}`),
+                    description: this.$t(`command_palette.${action.description}`),
+                }));
 
             // add peers
             if (Array.isArray(this.peers)) {
@@ -477,6 +517,12 @@ export default {
                     GlobalEmitter.emit("toggle-orbit");
                 } else if (result.action === "toggle-bouncing-balls") {
                     GlobalEmitter.emit("toggle-bouncing-balls");
+                } else if (result.action === "toggle-falling-skies") {
+                    GlobalEmitter.emit("toggle-falling-skies");
+                } else if (result.action === "toggle-snake") {
+                    GlobalEmitter.emit("toggle-snake");
+                } else if (result.action === "toggle-pong") {
+                    GlobalEmitter.emit("toggle-pong");
                 } else if (result.action === "show-tutorial") {
                     GlobalEmitter.emit("show-tutorial");
                 } else if (result.action === "show-changelog") {
diff --git a/meshchatx/src/frontend/components/debug/DebugLogsPage.vue b/meshchatx/src/frontend/components/debug/DebugLogsPage.vue
index ba59297..88ec074 100644
--- a/meshchatx/src/frontend/components/debug/DebugLogsPage.vue
+++ b/meshchatx/src/frontend/components/debug/DebugLogsPage.vue
@@ -1,15 +1,15 @@
 <template>
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex flex-col h-full overflow-hidden w-full px-4 md:px-5 lg:px-8 py-6">
-            <div class="flex flex-col mb-4 w-full max-w-6xl mx-auto space-y-4">
-                <div class="flex items-center justify-between">
-                    <div class="space-y-1">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex flex-col h-full overflow-hidden w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
+            <div class="flex flex-col mb-4 w-full max-w-6xl mx-auto space-y-4 min-w-0">
+                <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between min-w-0">
+                    <div class="space-y-1 min-w-0">
                         <div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Diagnostics</div>
-                        <div class="text-3xl font-semibold text-gray-900 dark:text-white">Debug Logs</div>
+                        <div class="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white">Debug Logs</div>
                     </div>
-                    <div class="flex gap-2">
+                    <div class="flex flex-wrap gap-2 shrink-0">
                         <button type="button" class="secondary-chip px-4 py-2 text-sm" @click="refreshActive">
                             <MaterialDesignIcon icon-name="refresh" class="w-4 h-4" />
                             Refresh
@@ -21,10 +21,12 @@
                     </div>
                 </div>
 
-                <div class="flex flex-wrap gap-2 border-b border-gray-200 dark:border-zinc-700 pb-2">
+                <div
+                    class="flex flex-nowrap sm:flex-wrap gap-2 border-b border-gray-200 dark:border-zinc-700 pb-2 overflow-x-auto overscroll-x-contain -mx-4 px-4 sm:mx-0 sm:px-0 no-scrollbar"
+                >
                     <button
                         type="button"
-                        class="px-4 py-2 text-sm rounded-md transition-colors"
+                        class="shrink-0 px-4 py-2 text-sm rounded-md transition-colors"
                         :class="
                             activeTab === 'logs'
                                 ? 'bg-blue-600 text-white'
@@ -36,7 +38,7 @@
                     </button>
                     <button
                         type="button"
-                        class="px-4 py-2 text-sm rounded-md transition-colors"
+                        class="shrink-0 px-4 py-2 text-sm rounded-md transition-colors"
                         :class="
                             activeTab === 'access'
                                 ? 'bg-blue-600 text-white'
diff --git a/meshchatx/src/frontend/components/forwarder/ForwarderPage.vue b/meshchatx/src/frontend/components/forwarder/ForwarderPage.vue
index 9761d00..c7b2f78 100644
--- a/meshchatx/src/frontend/components/forwarder/ForwarderPage.vue
+++ b/meshchatx/src/frontend/components/forwarder/ForwarderPage.vue
@@ -1,8 +1,6 @@
 <template>
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex-1 overflow-y-auto w-full">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div class="flex-1 overflow-y-auto w-full pb-[max(1.5rem,env(safe-area-inset-bottom))]">
             <div class="space-y-4 p-4 md:p-6 max-w-5xl mx-auto w-full">
                 <div class="glass-card space-y-3">
                     <div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
@@ -228,9 +226,3 @@ export default {
     },
 };
 </script>
-
-<style scoped>
-.glass-card {
-    @apply bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md border border-gray-200 dark:border-zinc-800 p-6 rounded-3xl shadow-sm;
-}
-</style>
diff --git a/meshchatx/src/frontend/components/messages/ConversationViewer.vue b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
index b0dc321..3b322b3 100644
--- a/meshchatx/src/frontend/components/messages/ConversationViewer.vue
+++ b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
@@ -736,8 +736,40 @@
                                 <span>{{ formatAttachmentSize(chatItem.lxmf_message.fields.image, "image") }}</span>
                             </div>
                         </div>
+                        <!-- image-only: inline timestamp overlay (no bubble) -->
+                        <div
+                            v-if="isImageOnlyMessage(chatItem)"
+                            class="flex items-center gap-1.5 select-none mt-0.5"
+                            :class="chatItem.is_outbound ? 'justify-end' : 'justify-start'"
+                        >
+                            <span class="text-[9px] opacity-50 font-medium">
+                                {{ formatTimeAgo(chatItem.lxmf_message.created_at) }}
+                            </span>
+                            <template v-if="chatItem.is_outbound">
+                                <MaterialDesignIcon
+                                    v-if="chatItem.lxmf_message.state === 'delivered'"
+                                    icon-name="check-all"
+                                    class="size-3 opacity-50"
+                                />
+                                <MaterialDesignIcon
+                                    v-else-if="['sent', 'propagated', 'unknown'].includes(chatItem.lxmf_message.state)"
+                                    icon-name="check"
+                                    class="size-3 opacity-50"
+                                />
+                                <span
+                                    v-else-if="
+                                        ['failed', 'cancelled', 'rejected'].includes(chatItem.lxmf_message.state)
+                                    "
+                                    class="text-[9px] font-bold uppercase tracking-wider text-red-500"
+                                >
+                                    {{ chatItem.lxmf_message.state === "rejected" ? "Rejected" : "Failed" }}
+                                </span>
+                            </template>
+                        </div>
+
                         <!-- message content -->
                         <div
+                            v-if="!isImageOnlyMessage(chatItem)"
                             class="relative rounded-2xl overflow-hidden transition-all duration-200 hover:shadow-md min-w-0"
                             :class="[
                                 ['cancelled', 'failed'].includes(chatItem.lxmf_message.state)
@@ -2590,6 +2622,7 @@ export default {
             void GlobalState.detailedOutboundSendStatus;
             void this.sendStatusUiMs;
             void this.usesThemeOutboundBubbleColor;
+            void GlobalState.config?.theme;
             const useThemeOutbound = this.usesThemeOutboundBubbleColor;
             return (chatItem) => {
                 const styles = {};
@@ -2608,7 +2641,11 @@ export default {
                     styles["color"] = "#ffffff";
                 } else if (chatItem.is_outbound) {
                     if (chatItem.lxmf_message?._pendingPathfinding) {
-                        const hex = cfg?.message_waiting_bubble_color || "#e5e7eb";
+                        const raw = cfg?.message_waiting_bubble_color;
+                        let hex = raw != null && String(raw).trim() !== "" ? String(raw).trim() : "#e5e7eb";
+                        if (cfg?.theme === "dark" && /^#e5e7eb$/i.test(hex)) {
+                            hex = "#3f3f46";
+                        }
                         styles["background-color"] = hex;
                         styles["color"] = this.pickTextColorForBubbleBackground(hex);
                         styles["border"] = this.waitingBubbleBorderForHex(hex);
@@ -2752,6 +2789,10 @@ export default {
                             return false;
                         }
 
+                        if (!this.hasRenderableContent(chatItem.lxmf_message)) {
+                            return false;
+                        }
+
                         return true;
                     }
 
@@ -5036,6 +5077,26 @@ export default {
 
             return !hasContent && !hasAttachments && (hasTelemetry || hasCommands);
         },
+        hasRenderableContent(msg) {
+            if (msg.content && msg.content.trim() !== "") return true;
+            if (msg.fields?.image) return true;
+            if (msg.fields?.audio) return true;
+            if (msg.fields?.file_attachments) return true;
+            if (msg.fields?.telemetry || msg.fields?.telemetry_stream) return true;
+            if (msg.fields?.commands && msg.fields.commands.some((c) => c["0x01"] || c["1"] || c["0x1"])) return true;
+            return false;
+        },
+        isImageOnlyMessage(chatItem) {
+            const msg = chatItem.lxmf_message;
+            if (!msg.fields?.image) return false;
+            if (msg.fields?.audio || msg.fields?.file_attachments) return false;
+            const content = (msg.content || "").trim();
+            if (content && !this.shouldHideAutoImageCaption(chatItem)) return false;
+            if (msg.reply_to_hash) return false;
+            if (msg.fields?.telemetry || msg.fields?.telemetry_stream) return false;
+            if (msg.fields?.commands && msg.fields.commands.some((c) => c["0x01"] || c["1"] || c["0x1"])) return false;
+            return true;
+        },
         async toggleTracking() {
             if (!this.selectedPeer) return;
             const hash = this.selectedPeer.destination_hash;
diff --git a/meshchatx/src/frontend/components/messages/MessagesPage.vue b/meshchatx/src/frontend/components/messages/MessagesPage.vue
index e455677..704c5f1 100644
--- a/meshchatx/src/frontend/components/messages/MessagesPage.vue
+++ b/meshchatx/src/frontend/components/messages/MessagesPage.vue
@@ -155,6 +155,9 @@ export default {
         return {
             reloadInterval: null,
             conversationRefreshTimeout: null,
+            peersRefreshTimeout: null,
+            conversationsAbortController: null,
+            announcesAbortController: null,
 
             config: snapshotGlobalConfig(),
             hasLoadedConversations: false,
@@ -214,16 +217,21 @@ export default {
     beforeUnmount() {
         clearInterval(this.reloadInterval);
         clearTimeout(this.conversationRefreshTimeout);
+        clearTimeout(this.peersRefreshTimeout);
+        this.conversationsAbortController?.abort();
+        this.announcesAbortController?.abort();
 
         // stop listening for websocket messages
         WebSocketConnection.off("message", this.onWebsocketMessage);
         GlobalEmitter.off("compose-new-message", this.onComposeNewMessage);
         GlobalEmitter.off("refresh-conversations", this.requestConversationsRefresh);
+        GlobalEmitter.off("websocket-reconnected", this.requestConversationsRefresh);
     },
     mounted() {
         // listen for websocket messages
         WebSocketConnection.on("message", this.onWebsocketMessage);
         GlobalEmitter.on("compose-new-message", this.onComposeNewMessage);
+        GlobalEmitter.on("websocket-reconnected", this.requestConversationsRefresh);
 
         this.getConfig();
         this.getConversations();
@@ -350,6 +358,14 @@ export default {
         },
         async getLxmfDeliveryAnnounces(append = false) {
             try {
+                if (!append) {
+                    if (this.announcesAbortController) {
+                        this.announcesAbortController.abort();
+                    }
+                    this.announcesAbortController = new AbortController();
+                } else if (!this.announcesAbortController) {
+                    this.announcesAbortController = new AbortController();
+                }
                 const offset = append ? Object.keys(this.peers).length : 0;
                 const response = await window.api.get(`/api/v1/announces`, {
                     params: {
@@ -358,6 +374,7 @@ export default {
                         offset: offset,
                         search: this.peersSearchTerm,
                     },
+                    signal: this.announcesAbortController.signal,
                 });
 
                 const newAnnounces = response.data.announces;
@@ -373,6 +390,7 @@ export default {
 
                 this.hasMoreAnnounces = newAnnounces.length === this.pageSize;
             } catch (e) {
+                if (window.api.isCancel?.(e)) return;
                 console.log(e);
             } finally {
                 this.isLoadingMoreAnnounces = false;
@@ -405,6 +423,14 @@ export default {
         },
         async getConversations(append = false) {
             try {
+                if (!append) {
+                    if (this.conversationsAbortController) {
+                        this.conversationsAbortController.abort();
+                    }
+                    this.conversationsAbortController = new AbortController();
+                } else if (!this.conversationsAbortController) {
+                    this.conversationsAbortController = new AbortController();
+                }
                 const shouldShowInitialLoading =
                     !append && !this.hasLoadedConversations && this.conversations.length === 0;
                 if (shouldShowInitialLoading) {
@@ -418,6 +444,7 @@ export default {
                         limit: this.pageSize,
                         offset: offset,
                     },
+                    signal: this.conversationsAbortController.signal,
                 });
 
                 const newConversations = response.data.conversations;
@@ -453,6 +480,7 @@ export default {
                 this.hasLoadedConversations = true;
                 this.hasMoreConversations = newConversations.length === this.pageSize;
             } catch (e) {
+                if (window.api.isCancel?.(e)) return;
                 console.log(e);
             } finally {
                 this.isLoadingConversations = false;
diff --git a/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue b/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
index a3ac1aa..29d2c17 100644
--- a/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
+++ b/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
@@ -2,9 +2,9 @@
     <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
         <!-- Compact Header -->
         <div
-            class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm shrink-0"
+            class="flex flex-wrap items-center justify-between gap-2 px-3 sm:px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-slate-50/95 dark:bg-zinc-950/95 backdrop-blur-sm shrink-0 min-w-0"
         >
-            <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2 sm:gap-3 min-w-0">
                 <div class="bg-teal-100 dark:bg-teal-900/30 p-1.5 rounded-xl shrink-0">
                     <MaterialDesignIcon icon-name="code-tags" class="size-5 text-teal-600 dark:text-teal-400" />
                 </div>
@@ -89,7 +89,7 @@
 
         <!-- Tab Bar -->
         <div
-            class="flex items-center px-4 py-1 gap-1 border-b border-gray-200 dark:border-zinc-800 bg-slate-100 dark:bg-zinc-900 overflow-x-auto scrollbar-hide shrink-0"
+            class="flex items-center px-3 sm:px-4 py-1 gap-1 border-b border-gray-200 dark:border-zinc-800 bg-slate-100 dark:bg-zinc-900 overflow-x-auto no-scrollbar shrink-0"
         >
             <div
                 v-for="(tab, index) in tabs"
@@ -128,7 +128,7 @@
             </button>
         </div>
 
-        <div class="flex-1 flex overflow-hidden">
+        <div class="flex-1 flex overflow-hidden min-w-0 pb-[env(safe-area-inset-bottom)]">
             <!-- Editor Pane -->
             <div
                 v-if="tabs.length > 0"
@@ -892,12 +892,4 @@ ${b}=
 :deep(a:hover) {
     text-decoration: underline;
 }
-
-.scrollbar-hide::-webkit-scrollbar {
-    display: none;
-}
-.scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
 </style>
diff --git a/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index 79bc6de..6037be6 100644
--- a/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/meshchatx/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -3,287 +3,39 @@
         <!-- network -->
         <div id="network" class="w-full h-full"></div>
 
-        <!-- loading overlay -->
-        <div
-            v-if="isLoading"
-            class="absolute inset-0 z-20 flex items-center justify-center bg-zinc-950/10 backdrop-blur-[2px] transition-all duration-300"
-        >
-            <div
-                class="bg-white/90 dark:bg-zinc-900/90 border border-gray-200 dark:border-zinc-800 rounded-2xl px-6 py-4 flex flex-col items-center gap-3"
-            >
-                <div class="relative">
-                    <div
-                        class="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"
-                    ></div>
-                    <div class="absolute inset-0 flex items-center justify-center">
-                        <div
-                            class="w-6 h-6 border-4 border-emerald-500/20 border-b-emerald-500 rounded-full animate-spin-reverse"
-                        ></div>
-                    </div>
-                </div>
-                <div class="text-sm font-medium text-gray-900 dark:text-zinc-100">{{ loadingStatus }}</div>
-                <div v-if="totalNodesToLoad > 0" class="w-48 space-y-2">
-                    <div class="h-1.5 bg-gray-200 dark:bg-zinc-800 rounded-full overflow-hidden">
-                        <div
-                            class="h-full bg-blue-500 transition-all duration-300 shadow-[0_0_8px_rgba(59,130,246,0.5)]"
-                            :style="{ width: `${(loadedNodesCount / totalNodesToLoad) * 100}%` }"
-                        ></div>
-                    </div>
-                    <div
-                        v-if="totalBatches > 0"
-                        class="flex justify-between items-center text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider"
-                    >
-                        <span>{{ $t("visualiser.batch") }} {{ currentBatch }} / {{ totalBatches }}</span>
-                        <span>{{ Math.round((loadedNodesCount / totalNodesToLoad) * 100) }}%</span>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <NetworkVisualiserLoadingOverlay
+            :is-loading="isLoading"
+            :loading-status="loadingStatus"
+            :total-nodes-to-load="totalNodesToLoad"
+            :loaded-nodes-count="loadedNodesCount"
+            :current-batch="currentBatch"
+            :total-batches="totalBatches"
+        />
 
-        <!-- controls & search -->
-        <div
-            class="absolute top-2 left-2 right-2 sm:top-4 sm:left-4 sm:right-4 z-10 flex flex-col sm:flex-row gap-2 pointer-events-none"
-        >
-            <!-- header glass card -->
-            <div
-                class="pointer-events-auto border border-gray-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl rounded-2xl overflow-hidden w-full sm:min-w-[280px] sm:w-auto transition-all duration-300"
-            >
-                <div
-                    class="flex items-center px-4 sm:px-5 py-3 sm:py-4 cursor-pointer hover:bg-gray-50/50 dark:hover:bg-zinc-800/50 transition-colors"
-                    @click="isShowingControls = !isShowingControls"
-                >
-                    <div class="flex-1 flex flex-col min-w-0 mr-2">
-                        <span class="font-bold text-gray-900 dark:text-zinc-100 tracking-tight truncate">{{
-                            $t("visualiser.reticulum_mesh")
-                        }}</span>
-                        <span
-                            class="text-[10px] uppercase font-bold text-gray-500 dark:text-zinc-500 tracking-widest truncate"
-                            >{{ $t("visualiser.network_visualizer") }}</span
-                        >
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <button
-                            type="button"
-                            class="inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white transition-all active:scale-95"
-                            :disabled="isUpdating || isLoading"
-                            @click.stop="manualUpdate"
-                        >
-                            <svg
-                                v-if="!isUpdating && !isLoading"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke-width="2"
-                                stroke="currentColor"
-                                class="w-4 h-4 sm:w-5 sm:h-5"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-                                />
-                            </svg>
-                            <svg
-                                v-else
-                                class="animate-spin h-4 w-4 sm:h-5 sm:w-5"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                            >
-                                <circle
-                                    class="opacity-25"
-                                    cx="12"
-                                    cy="12"
-                                    r="10"
-                                    stroke="currentColor"
-                                    stroke-width="4"
-                                ></circle>
-                                <path
-                                    class="opacity-75"
-                                    fill="currentColor"
-                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                ></path>
-                            </svg>
-                        </button>
-                        <div class="w-5 sm:w-6 flex justify-center">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                                class="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 transition-transform duration-300"
-                                :class="{ 'rotate-180': isShowingControls }"
-                            >
-                                <path
-                                    fill-rule="evenodd"
-                                    d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-                                    clip-rule="evenodd"
-                                />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-
-                <div
-                    v-show="isShowingControls"
-                    class="px-5 pb-5 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300"
-                >
-                    <!-- divider -->
-                    <div
-                        class="h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent"
-                    ></div>
-
-                    <!-- auto update toggle -->
-                    <div class="flex items-center justify-between">
-                        <label
-                            for="auto-reload"
-                            class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
-                            >Auto Update</label
-                        >
-                        <Toggle id="auto-reload" v-model="autoReload" />
-                    </div>
-
-                    <!-- physics toggle -->
-                    <div class="flex items-center justify-between">
-                        <label
-                            for="enable-physics"
-                            class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
-                            >Live Layout</label
-                        >
-                        <Toggle id="enable-physics" v-model="enablePhysics" />
-                    </div>
-
-                    <!-- max hops filter -->
-                    <div class="space-y-2">
-                        <div class="flex items-center justify-between gap-2">
-                            <label
-                                for="hop-filter-slider"
-                                class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
-                                >{{ $t("visualiser.max_hops_filter") }}</label
-                            >
-                            <span
-                                class="text-xs font-bold text-blue-600 dark:text-blue-400 tabular-nums min-w-[4rem] text-right"
-                                >{{ hopFilterSlider === 0 ? $t("visualiser.all") : hopFilterSlider }}</span
-                            >
-                        </div>
-                        <input
-                            id="hop-filter-slider"
-                            v-model.number="hopFilterSlider"
-                            type="range"
-                            min="0"
-                            :max="hopSliderMax"
-                            step="1"
-                            class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 dark:bg-zinc-700 accent-blue-600 dark:accent-blue-500"
-                        />
-                    </div>
-
-                    <!-- stats -->
-                    <div class="grid grid-cols-2 gap-3 pt-2">
-                        <div
-                            class="bg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
-                        >
-                            <div
-                                class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1"
-                            >
-                                Nodes
-                            </div>
-                            <div class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ nodes.length }}</div>
-                        </div>
-                        <div
-                            class="bg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
-                        >
-                            <div
-                                class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1"
-                            >
-                                Links
-                            </div>
-                            <div class="text-lg font-bold text-emerald-600 dark:text-emerald-400">
-                                {{ edges.length }}
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        class="bg-zinc-950/5 dark:bg-white/5 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
-                    >
-                        <div
-                            class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-2"
-                        >
-                            Interfaces
-                        </div>
-                        <div class="flex items-center gap-4">
-                            <div class="flex items-center gap-1.5">
-                                <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
-                                <span class="text-xs font-bold text-gray-700 dark:text-zinc-300"
-                                    >{{ onlineInterfaces.length }} Online</span
-                                >
-                            </div>
-                            <div class="flex items-center gap-1.5">
-                                <div class="w-2 h-2 rounded-full bg-red-500"></div>
-                                <span class="text-xs font-bold text-gray-700 dark:text-zinc-300"
-                                    >{{ offlineInterfaces.length }} Offline</span
-                                >
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- search box -->
-            <div class="sm:ml-auto w-full sm:w-auto pointer-events-auto">
-                <div class="relative group">
-                    <div
-                        class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-500 transition-colors"
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
-                            <path
-                                fill-rule="evenodd"
-                                d="M9 3.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM2.25 10a7.75 7.75 0 1 1 14.03 4.5l3.47 3.47a.75.75 0 0 1-1.06 1.06l-3.47-3.47A7.75 7.75 0 0 1 2.25 10Z"
-                                clip-rule="evenodd"
-                            />
-                        </svg>
-                    </div>
-                    <input
-                        v-model="searchQuery"
-                        type="text"
-                        :placeholder="`Search nodes (${nodes.length})...`"
-                        class="block w-full sm:w-64 pl-9 pr-10 py-2.5 sm:py-3 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border border-gray-200/50 dark:border-zinc-800/50 rounded-2xl text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500/50 sm:focus:w-80 md:max-lg:focus:w-72 lg:focus:w-80 transition-all dark:text-zinc-100 shadow-sm"
-                    />
-                    <button
-                        v-if="searchQuery"
-                        class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-zinc-200 transition-colors"
-                        @click="searchQuery = ''"
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
-                            <path
-                                d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-                            />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <!-- navigation breadcrumb style legend -->
-        <div
-            class="absolute bottom-4 right-4 z-10 hidden sm:flex items-center gap-2 px-4 py-2 rounded-full border border-gray-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl"
-        >
-            <div class="flex items-center gap-1.5">
-                <div class="w-3 h-3 rounded-full border-2 border-emerald-500 bg-emerald-500/20"></div>
-                <span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase">Direct</span>
-            </div>
-            <div class="w-px h-3 bg-gray-200 dark:bg-zinc-800 mx-1"></div>
-            <div class="flex items-center gap-1.5">
-                <div class="w-3 h-3 rounded-full border-2 border-blue-500/50 bg-blue-500/10"></div>
-                <span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase">Multi-Hop</span>
-            </div>
-            <div v-if="discoveredInterfaces.length > 0" class="w-px h-3 bg-gray-200 dark:bg-zinc-800 mx-1"></div>
-            <div v-if="discoveredInterfaces.length > 0" class="flex items-center gap-1.5">
-                <div class="w-3 h-3 rounded-full border-2 border-cyan-500/50 bg-cyan-500/10"></div>
-                <span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase"
-                    >Discovered ({{ discoveredInterfaces.length }})</span
-                >
-            </div>
-        </div>
+        <NetworkVisualiserToolbar
+            :is-showing-controls="isShowingControls"
+            :is-updating="isUpdating"
+            :is-loading="isLoading"
+            :auto-reload="autoReload"
+            :enable-physics="enablePhysics"
+            :hop-filter-slider="hopFilterSlider"
+            :hop-slider-max="hopSliderMax"
+            :node-count="nodes.length"
+            :edge-count="edges.length"
+            :online-interface-count="onlineInterfaces.length"
+            :offline-interface-count="offlineInterfaces.length"
+            :search-query="searchQuery"
+            @update:is-showing-controls="isShowingControls = $event"
+            @update:auto-reload="autoReload = $event"
+            @update:enable-physics="enablePhysics = $event"
+            @update:hop-filter-slider="hopFilterSlider = $event"
+            @update:search-query="searchQuery = $event"
+            @manual-update="manualUpdate"
+        />
+        <NetworkVisualiserLegend
+            :show-discovered-interfaces="showDiscoveredInterfaces"
+            :discovered-count="discoveredInterfaces.length"
+        />
     </div>
 </template>
 
@@ -294,12 +46,18 @@ import { DataSet } from "vis-data";
 import * as mdi from "@mdi/js";
 import Utils from "../../js/Utils";
 import GlobalEmitter from "../../js/GlobalEmitter";
-import Toggle from "../forms/Toggle.vue";
+import ToastUtils from "../../js/ToastUtils";
+import { PONG_NODE_IDS } from "./internal/visualiserConstants.js";
+import NetworkVisualiserLoadingOverlay from "./internal/NetworkVisualiserLoadingOverlay.vue";
+import NetworkVisualiserToolbar from "./internal/NetworkVisualiserToolbar.vue";
+import NetworkVisualiserLegend from "./internal/NetworkVisualiserLegend.vue";
 
 export default {
     name: "NetworkVisualiser",
     components: {
-        Toggle,
+        NetworkVisualiserLoadingOverlay,
+        NetworkVisualiserToolbar,
+        NetworkVisualiserLegend,
     },
     data() {
         return {
@@ -313,8 +71,16 @@ export default {
             enablePhysics: true,
             enableOrbit: false,
             enableBouncingBalls: false,
+            enableFallingSkies: false,
+            enableSnake: false,
+            enablePong: false,
             orbitAnimationFrame: null,
             bouncingBallsAnimationFrame: null,
+            fallingSkiesAnimationFrame: null,
+            snakeAnimationFrame: null,
+            pongAnimationFrame: null,
+            showDisabledInterfaces: false,
+            showDiscoveredInterfaces: false,
             loadingStatus: "Initializing...",
             loadedNodesCount: 0,
             totalNodesToLoad: 0,
@@ -339,6 +105,9 @@ export default {
             hopFilterDebounceTimer: null,
             abortController: new AbortController(),
             currentLOD: "high",
+            lastVizKeys: [],
+            vizHadOneLayout: false,
+            didDisableStabilization: false,
         };
     },
     computed: {
@@ -366,14 +135,18 @@ export default {
                 this.manualUpdate();
             }
         },
-        enablePhysics(val) {
-            if (this.network) {
-                this.network.setOptions({ physics: { enabled: val && !this.enableOrbit } });
-            }
+        enablePhysics() {
+            this.refreshPhysicsEnabled();
         },
         enableOrbit(val) {
             if (val) {
                 this.enableBouncingBalls = false;
+                this.enableFallingSkies = false;
+                this.enableSnake = false;
+                this.enablePong = false;
+                this.stopFallingSkies();
+                this.stopSnake();
+                this.stopPong();
                 this.startOrbit();
             } else {
                 this.stopOrbit();
@@ -382,11 +155,62 @@ export default {
         enableBouncingBalls(val) {
             if (val) {
                 this.enableOrbit = false;
+                this.enableFallingSkies = false;
+                this.enableSnake = false;
+                this.enablePong = false;
+                this.stopFallingSkies();
+                this.stopSnake();
+                this.stopPong();
                 this.startBouncingBalls();
             } else {
                 this.stopBouncingBalls();
             }
         },
+        enableFallingSkies(val) {
+            if (val) {
+                this.enableOrbit = false;
+                this.enableBouncingBalls = false;
+                this.enableSnake = false;
+                this.enablePong = false;
+                this.stopOrbit();
+                this.stopBouncingBalls();
+                this.stopSnake();
+                this.stopPong();
+                this.startFallingSkies();
+            } else {
+                this.stopFallingSkies();
+            }
+        },
+        enableSnake(val) {
+            if (val) {
+                this.enableOrbit = false;
+                this.enableBouncingBalls = false;
+                this.enableFallingSkies = false;
+                this.enablePong = false;
+                this.stopOrbit();
+                this.stopBouncingBalls();
+                this.stopFallingSkies();
+                this.stopPong();
+                this.startSnake();
+            } else {
+                this.stopSnake();
+            }
+        },
+        enablePong(val) {
+            if (val) {
+                this.enableOrbit = false;
+                this.enableBouncingBalls = false;
+                this.enableFallingSkies = false;
+                this.enableSnake = false;
+                this.stopOrbit();
+                this.stopBouncingBalls();
+                this.stopFallingSkies();
+                this.stopSnake();
+                this.startPong();
+            } else {
+                this.stopPong();
+            }
+        },
         searchQuery() {
             // we don't want to trigger a full update from server, just re-run the filtering on existing data
             this.processVisualization();
@@ -414,8 +238,24 @@ export default {
         if (this._toggleBouncingBallsHandler) {
             GlobalEmitter.off("toggle-bouncing-balls", this._toggleBouncingBallsHandler);
         }
+        if (this._toggleFallingSkiesHandler) {
+            GlobalEmitter.off("toggle-falling-skies", this._toggleFallingSkiesHandler);
+        }
+        if (this._visualiserPrefsHandler) {
+            GlobalEmitter.off("visualiser-display-prefs-changed", this._visualiserPrefsHandler);
+        }
+        if (this._toggleSnakeHandler) {
+            GlobalEmitter.off("toggle-snake", this._toggleSnakeHandler);
+        }
+        if (this._togglePongHandler) {
+            GlobalEmitter.off("toggle-pong", this._togglePongHandler);
+        }
+        this.detachGameKeyListeners();
         this.stopOrbit();
         this.stopBouncingBalls();
+        this.stopFallingSkies();
+        this.stopSnake(false);
+        this.stopPong(false);
         clearInterval(this.reloadInterval);
         if (this.hopFilterDebounceTimer) {
             clearTimeout(this.hopFilterDebounceTimer);
@@ -453,6 +293,30 @@ export default {
         };
         GlobalEmitter.on("toggle-bouncing-balls", this._toggleBouncingBallsHandler);
 
+        this._toggleFallingSkiesHandler = () => {
+            this.enableFallingSkies = !this.enableFallingSkies;
+        };
+        GlobalEmitter.on("toggle-falling-skies", this._toggleFallingSkiesHandler);
+
+        this._visualiserPrefsHandler = () => {
+            this.loadVisualiserDisplayPrefs();
+            if (this.network) {
+                this.processVisualization();
+            }
+        };
+        GlobalEmitter.on("visualiser-display-prefs-changed", this._visualiserPrefsHandler);
+
+        this._toggleSnakeHandler = () => {
+            this.enableSnake = !this.enableSnake;
+        };
+        GlobalEmitter.on("toggle-snake", this._toggleSnakeHandler);
+
+        this._togglePongHandler = () => {
+            this.enablePong = !this.enablePong;
+        };
+        GlobalEmitter.on("toggle-pong", this._togglePongHandler);
+
+        this.loadVisualiserDisplayPrefs();
         this.init();
     },
     methods: {
@@ -710,73 +574,163 @@ export default {
 
             return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="${foregroundColor}" d="${iconPath}"/></svg>`;
         },
+        loadVisualiserDisplayPrefs() {
+            try {
+                if (typeof localStorage !== "undefined") {
+                    if (localStorage.getItem("meshchatx.visualiser.showDisabledInterfaces") === "true") {
+                        this.showDisabledInterfaces = true;
+                    }
+                    if (localStorage.getItem("meshchatx.visualiser.showDiscoveredInterfaces") === "true") {
+                        this.showDiscoveredInterfaces = true;
+                    }
+                }
+            } catch {
+                /* localStorage unavailable */
+            }
+        },
+        refreshPhysicsEnabled() {
+            if (!this.network) return;
+            const on =
+                this.enablePhysics &&
+                !this.enableOrbit &&
+                !this.enableBouncingBalls &&
+                !this.enableFallingSkies &&
+                !this.enableSnake &&
+                !this.enablePong;
+            this.network.setOptions({ physics: { enabled: on } });
+        },
+        pickStablePosition(id, posById, initialFn) {
+            const prev = posById[id];
+            if (prev && Number.isFinite(prev.x) && Number.isFinite(prev.y)) {
+                return { x: prev.x, y: prev.y };
+            }
+            const v = initialFn();
+            posById[id] = { x: v.x, y: v.y };
+            return v;
+        },
+        edgeHiddenForMode(peerNodeId) {
+            if (this.enableBouncingBalls || this.enableSnake || this.enablePong) {
+                return true;
+            }
+            if (
+                peerNodeId != null &&
+                this.enableFallingSkies &&
+                this._fallingPendingIds &&
+                this._fallingPendingIds.has(peerNodeId)
+            ) {
+                return true;
+            }
+            return false;
+        },
+        edgesHiddenForOverlayGames() {
+            return this.enableBouncingBalls || this.enableSnake || this.enablePong;
+        },
         startOrbit() {
             if (!this.network) return;
             this.stopOrbit();
             this.stopBouncingBalls();
+            this.stopSnake(false);
+            this.stopPong(false);
 
-            // Disable physics while orbiting
-            this.network.setOptions({ physics: { enabled: false } });
+            this.refreshPhysicsEnabled();
 
-            // Hide edges
-            const edges = this.edges.get();
-            const updatedEdges = edges.map((edge) => ({ id: edge.id, hidden: true }));
-            this.edges.update(updatedEdges);
-
-            // Get current positions of nodes to start orbit from where they are
             const nodeIds = this.nodes.getIds();
-            const positions = this.network.getPositions(nodeIds);
+            const positions = this.network.getPositions(nodeIds) || {};
             const mePos = positions["me"] || { x: 0, y: 0 };
 
-            this._orbitNodes = nodeIds
-                .filter((id) => id !== "me")
-                .map((id) => {
-                    const pos = positions[id] || {
-                        x: Math.random() * 1000 - 500,
-                        y: Math.random() * 1000 - 500,
-                    };
+            this._orbitAroundMe = [];
+            this._orbitAroundIface = [];
+
+            for (const id of nodeIds) {
+                if (id === "me") continue;
+                const n = this.nodes.get(id);
+                if (!n || !n.group) continue;
+                const pos = positions[id] || { x: mePos.x, y: mePos.y };
+                if (n.group === "interface" || n.group === "discovered") {
                     const dx = pos.x - mePos.x;
                     const dy = pos.y - mePos.y;
-                    const radius = Math.sqrt(dx * dx + dy * dy) || Math.random() * 500 + 100;
-                    return {
-                        id: id,
-                        radius: radius,
+                    const r = Math.hypot(dx, dy) || 400;
+                    this._orbitAroundMe.push({
+                        id,
+                        radius: r,
                         angle: Math.atan2(dy, dx),
-                        // Random speed based on radius - further nodes move slower usually, but let's make it more dynamic
-                        speed: (0.002 + Math.random() * 0.005) * (Math.random() > 0.5 ? 1 : -1),
-                    };
-                });
+                        speed: (0.0012 + Math.random() * 0.0024) * (Math.random() > 0.5 ? 1 : -1),
+                    });
+                } else if (n.group === "announce" && n._parentInterface) {
+                    const parentId = n._parentInterface;
+                    const pPos = positions[parentId] || mePos;
+                    const dx = pos.x - pPos.x;
+                    const dy = pos.y - pPos.y;
+                    const r = Math.hypot(dx, dy) || 140;
+                    this._orbitAroundIface.push({
+                        id,
+                        parentId,
+                        radius: r,
+                        angle: Math.atan2(dy, dx),
+                        speed: (0.002 + Math.random() * 0.004) * (Math.random() > 0.5 ? 1 : -1),
+                    });
+                }
+            }
 
             const animate = () => {
                 if (!this.enableOrbit) return;
 
-                // Get current position of 'me' node in case it was dragged
-                const positions = this.network.getPositions(["me"]);
-                const mePos = positions["me"] || { x: 0, y: 0 };
+                const meP = this.network.getPositions(["me"])["me"] || { x: 0, y: 0 };
 
-                const updates = this._orbitNodes.map((data) => {
+                const ifacePos = { me: meP };
+                const batch = [];
+
+                for (const data of this._orbitAroundMe) {
                     if (data.id === this._draggingNodeId) {
-                        // If dragging, update our internal radius/angle to match new position
-                        const nodePositions = this.network.getPositions([data.id]);
-                        const pos = nodePositions[data.id];
-                        if (pos) {
-                            const dx = pos.x - mePos.x;
-                            const dy = pos.y - mePos.y;
-                            data.radius = Math.sqrt(dx * dx + dy * dy);
+                        const p = this.network.getPositions([data.id])[data.id];
+                        if (p) {
+                            const dx = p.x - meP.x;
+                            const dy = p.y - meP.y;
+                            data.radius = Math.hypot(dx, dy) || data.radius;
+                            data.angle = Math.atan2(dy, dx);
+                            ifacePos[data.id] = p;
+                        }
+                        continue;
+                    }
+                    data.angle += data.speed;
+                    const x = meP.x + Math.cos(data.angle) * data.radius;
+                    const y = meP.y + Math.sin(data.angle) * data.radius;
+                    batch.push({ id: data.id, x, y });
+                    ifacePos[data.id] = { x, y };
+                }
+
+                if (batch.length > 0) {
+                    this.nodes.update(batch);
+                }
+
+                const annBatch = [];
+                for (const data of this._orbitAroundIface) {
+                    if (data.id === this._draggingNodeId) {
+                        const p = this.network.getPositions([data.id])[data.id];
+                        const parent =
+                            ifacePos[data.parentId] || this.network.getPositions([data.parentId])[data.parentId];
+                        if (p && parent) {
+                            const dx = p.x - parent.x;
+                            const dy = p.y - parent.y;
+                            data.radius = Math.hypot(dx, dy) || data.radius;
                             data.angle = Math.atan2(dy, dx);
                         }
-                        return { id: data.id, x: pos.x, y: pos.y };
+                        continue;
                     }
-
+                    const parent =
+                        ifacePos[data.parentId] || this.network.getPositions([data.parentId])[data.parentId] || meP;
                     data.angle += data.speed;
-                    return {
+                    annBatch.push({
                         id: data.id,
-                        x: mePos.x + Math.cos(data.angle) * data.radius,
-                        y: mePos.y + Math.sin(data.angle) * data.radius,
-                    };
-                });
+                        x: parent.x + Math.cos(data.angle) * data.radius,
+                        y: parent.y + Math.sin(data.angle) * data.radius,
+                    });
+                }
+
+                if (annBatch.length > 0) {
+                    this.nodes.update(annBatch);
+                }
 
-                this.nodes.update(updates);
                 this.orbitAnimationFrame = requestAnimationFrame(animate);
             };
 
@@ -787,21 +741,78 @@ export default {
                 cancelAnimationFrame(this.orbitAnimationFrame);
                 this.orbitAnimationFrame = null;
             }
-
-            // Restore edges visibility
-            const edges = this.edges.get();
-            const updatedEdges = edges.map((edge) => ({ id: edge.id, hidden: false }));
-            this.edges.update(updatedEdges);
-
-            // Re-enable physics if it was enabled
-            if (this.network) {
-                this.network.setOptions({ physics: { enabled: this.enablePhysics } });
+            this._orbitAroundMe = [];
+            this._orbitAroundIface = [];
+            this.refreshPhysicsEnabled();
+        },
+        startFallingSkies() {
+            if (!this.network) return;
+            this.stopSnake(false);
+            this.stopPong(false);
+            this.refreshPhysicsEnabled();
+            if (this._fallingById && this._fallingById.size > 0) {
+                this.scheduleFallingTick();
             }
         },
+        stopFallingSkies() {
+            if (this.fallingSkiesAnimationFrame) {
+                cancelAnimationFrame(this.fallingSkiesAnimationFrame);
+                this.fallingSkiesAnimationFrame = null;
+            }
+            this._fallingById = new Map();
+            this._fallingPendingIds = new Set();
+            this.refreshPhysicsEnabled();
+            if (this.network) {
+                this.processVisualization();
+            }
+        },
+        scheduleFallingTick() {
+            if (!this.enableFallingSkies || !this.network) return;
+            if (this.fallingSkiesAnimationFrame != null) return;
+            const tick = () => {
+                this.fallingSkiesAnimationFrame = null;
+                if (!this.enableFallingSkies || !this._fallingById || this._fallingById.size === 0) {
+                    return;
+                }
+                const gravity = 0.55;
+                const updates = [];
+                const done = [];
+
+                for (const [id, st] of this._fallingById) {
+                    st.vy += gravity;
+                    st.y += st.vy;
+                    if (st.y >= st.ty - 2) {
+                        updates.push({ id, x: st.tx, y: st.ty });
+                        done.push({ id, edgeIds: st.edgeIds || [] });
+                    } else {
+                        updates.push({ id, x: st.tx, y: st.y });
+                    }
+                }
+
+                if (updates.length > 0) {
+                    this.nodes.update(updates);
+                }
+                const edgeUnhide = [];
+                for (const { id, edgeIds } of done) {
+                    this._fallingById.delete(id);
+                    this._fallingPendingIds.delete(id);
+                    edgeUnhide.push(...edgeIds);
+                }
+                if (edgeUnhide.length > 0) {
+                    this.edges.update(edgeUnhide.map((eid) => ({ id: eid, hidden: this.enableBouncingBalls })));
+                }
+                if (this._fallingById.size > 0) {
+                    this.fallingSkiesAnimationFrame = requestAnimationFrame(tick);
+                }
+            };
+            this.fallingSkiesAnimationFrame = requestAnimationFrame(tick);
+        },
         startBouncingBalls() {
             if (!this.network) return;
             this.stopBouncingBalls();
             this.stopOrbit();
+            this.stopSnake(false);
+            this.stopPong(false);
 
             // Disable physics
             this.network.setOptions({ physics: { enabled: false } });
@@ -909,14 +920,469 @@ export default {
                 this.bouncingBallsAnimationFrame = null;
             }
 
-            // Restore edges visibility
             const edges = this.edges.get();
             const updatedEdges = edges.map((edge) => ({ id: edge.id, hidden: false }));
             this.edges.update(updatedEdges);
 
-            // Re-enable physics if it was enabled
-            if (this.network) {
-                this.network.setOptions({ physics: { enabled: this.enablePhysics } });
+            this.refreshPhysicsEnabled();
+        },
+        getViewCanvasBounds() {
+            const container = document.getElementById("network");
+            if (!container || !this.network) return null;
+            const scale = this.network.getScale();
+            const vp = this.network.getViewPosition();
+            const w = container.clientWidth;
+            const h = container.clientHeight;
+            const halfW = w / (2 * scale);
+            const halfH = h / (2 * scale);
+            return {
+                left: vp.x - halfW,
+                right: vp.x + halfW,
+                top: vp.y - halfH,
+                bottom: vp.y + halfH,
+                scale,
+            };
+        },
+        attachGameKeyListeners(mode) {
+            this.detachGameKeyListeners();
+            this._gameKeyMode = mode;
+            this._snakeKeys = { u: 0, d: 0, l: 0, r: 0, w: 0, s: 0 };
+            this._onGameKeyDown = (e) => {
+                const tag = (e.target && e.target.tagName) || "";
+                if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+                if (mode === "snake") {
+                    if (["ArrowUp", "w", "W"].includes(e.key)) {
+                        e.preventDefault();
+                        this._snakeKeys.u = 1;
+                    }
+                    if (["ArrowDown", "s", "S"].includes(e.key)) {
+                        e.preventDefault();
+                        this._snakeKeys.d = 1;
+                    }
+                    if (["ArrowLeft", "a", "A"].includes(e.key)) {
+                        e.preventDefault();
+                        this._snakeKeys.l = 1;
+                    }
+                    if (["ArrowRight", "d", "D"].includes(e.key)) {
+                        e.preventDefault();
+                        this._snakeKeys.r = 1;
+                    }
+                } else if (mode === "pong") {
+                    if (e.key === "w" || e.key === "W") {
+                        e.preventDefault();
+                        this._snakeKeys.w = 1;
+                    }
+                    if (e.key === "s" || e.key === "S") {
+                        e.preventDefault();
+                        this._snakeKeys.s = 1;
+                    }
+                }
+            };
+            this._onGameKeyUp =
+                mode === "snake"
+                    ? (e) => {
+                          if (["ArrowUp", "w", "W"].includes(e.key)) this._snakeKeys.u = 0;
+                          if (["ArrowDown", "s", "S"].includes(e.key)) this._snakeKeys.d = 0;
+                          if (["ArrowLeft", "a", "A"].includes(e.key)) this._snakeKeys.l = 0;
+                          if (["ArrowRight", "d", "D"].includes(e.key)) this._snakeKeys.r = 0;
+                      }
+                    : (e) => {
+                          if (e.key === "w" || e.key === "W") this._snakeKeys.w = 0;
+                          if (e.key === "s" || e.key === "S") this._snakeKeys.s = 0;
+                      };
+            window.addEventListener("keydown", this._onGameKeyDown, true);
+            window.addEventListener("keyup", this._onGameKeyUp, true);
+        },
+        detachGameKeyListeners() {
+            if (this._onGameKeyDown) {
+                window.removeEventListener("keydown", this._onGameKeyDown, true);
+                this._onGameKeyDown = null;
+            }
+            if (this._onGameKeyUp) {
+                window.removeEventListener("keyup", this._onGameKeyUp, true);
+                this._onGameKeyUp = null;
+            }
+            this._gameKeyMode = null;
+        },
+        getPositionAlongTrail(trail, distBehind) {
+            if (!trail || trail.length === 0) return { x: 0, y: 0 };
+            if (trail.length === 1) return { ...trail[0] };
+            let d = 0;
+            for (let i = trail.length - 1; i > 0; i--) {
+                const p = trail[i];
+                const q = trail[i - 1];
+                const seg = Math.hypot(p.x - q.x, p.y - q.y);
+                if (d + seg >= distBehind) {
+                    const t = seg > 0 ? (distBehind - d) / seg : 0;
+                    return { x: p.x + (q.x - p.x) * t, y: p.y + (q.y - p.y) * t };
+                }
+                d += seg;
+            }
+            return { ...trail[0] };
+        },
+        startSnake() {
+            if (!this.network) return;
+            this.stopSnake(false);
+            this.stopPong(false);
+            this.stopOrbit();
+            this.stopBouncingBalls();
+            this.stopFallingSkies();
+            this.network.setOptions({ physics: { enabled: false } });
+            const edges = this.edges.get();
+            this.edges.update(edges.map((edge) => ({ id: edge.id, hidden: true })));
+
+            const me = this.network.getPositions(["me"]).me || { x: 0, y: 0 };
+            this._snakeVx = 7;
+            this._snakeVy = 0;
+            this._snakeHeadX = me.x;
+            this._snakeHeadY = me.y;
+            this._snakeTrail = [{ x: me.x, y: me.y }];
+            this._snakeEatenIds = [];
+            this._snakeFoodIds = new Set();
+            for (const id of this.nodes.getIds()) {
+                if (id !== "me") this._snakeFoodIds.add(id);
+            }
+            this.attachGameKeyListeners("snake");
+            ToastUtils.info(this.$t("visualiser.snake_hint"));
+
+            const speed = 8;
+            const margin = 40;
+            const headR = 28;
+            const tailGap = 42;
+
+            const tick = () => {
+                if (!this.enableSnake || !this.network) return;
+                const b = this.getViewCanvasBounds();
+                if (!b) return;
+
+                let vx = 0;
+                let vy = 0;
+                const k = this._snakeKeys || {};
+                if (k.u) vy -= 1;
+                if (k.d) vy += 1;
+                if (k.l) vx -= 1;
+                if (k.r) vx += 1;
+                if (vx !== 0 || vy !== 0) {
+                    const len = Math.hypot(vx, vy) || 1;
+                    this._snakeVx = (vx / len) * speed;
+                    this._snakeVy = (vy / len) * speed;
+                }
+
+                let hx = this._snakeHeadX + this._snakeVx;
+                let hy = this._snakeHeadY + this._snakeVy;
+                hx = Math.max(b.left + margin, Math.min(b.right - margin, hx));
+                hy = Math.max(b.top + margin, Math.min(b.bottom - margin, hy));
+                this._snakeHeadX = hx;
+                this._snakeHeadY = hy;
+
+                this.nodes.update([{ id: "me", x: hx, y: hy }]);
+
+                const last = this._snakeTrail[this._snakeTrail.length - 1];
+                if (!last || Math.hypot(hx - last.x, hy - last.y) > 3) {
+                    this._snakeTrail.push({ x: hx, y: hy });
+                    if (this._snakeTrail.length > 8000) {
+                        this._snakeTrail.splice(0, 1500);
+                    }
+                }
+
+                const updates = [];
+                for (let i = 0; i < this._snakeEatenIds.length; i++) {
+                    const id = this._snakeEatenIds[i];
+                    const pos = this.getPositionAlongTrail(this._snakeTrail, (i + 1) * tailGap);
+                    updates.push({ id, x: pos.x, y: pos.y });
+                }
+                if (updates.length > 0) this.nodes.update(updates);
+
+                const foodArr = [...this._snakeFoodIds];
+                const posMap = foodArr.length > 0 ? this.network.getPositions(foodArr) : {};
+                for (const fid of foodArr) {
+                    const fp = posMap[fid];
+                    if (!fp) {
+                        this._snakeFoodIds.delete(fid);
+                        continue;
+                    }
+                    const n = this.nodes.get(fid);
+                    const nr = n && n.size ? n.size * 0.45 : 14;
+                    if (Math.hypot(hx - fp.x, hy - fp.y) < headR + nr) {
+                        this._snakeFoodIds.delete(fid);
+                        this._snakeEatenIds.push(fid);
+                    }
+                }
+
+                for (let i = 0; i < this._snakeEatenIds.length; i++) {
+                    const pos = this.getPositionAlongTrail(this._snakeTrail, (i + 1) * tailGap);
+                    if (Math.hypot(hx - pos.x, hy - pos.y) < headR * 0.55) {
+                        if (this.snakeAnimationFrame) {
+                            cancelAnimationFrame(this.snakeAnimationFrame);
+                            this.snakeAnimationFrame = null;
+                        }
+                        ToastUtils.info(this.$t("visualiser.snake_hit_self"));
+                        this.enableSnake = false;
+                        return;
+                    }
+                }
+
+                if (this._snakeFoodIds.size === 0 && this._snakeEatenIds.length > 0) {
+                    if (this.snakeAnimationFrame) {
+                        cancelAnimationFrame(this.snakeAnimationFrame);
+                        this.snakeAnimationFrame = null;
+                    }
+                    ToastUtils.success(this.$t("visualiser.snake_win"));
+                    this.enableSnake = false;
+                    return;
+                }
+
+                this.snakeAnimationFrame = requestAnimationFrame(tick);
+            };
+
+            this.snakeAnimationFrame = requestAnimationFrame(tick);
+        },
+        stopSnake(runProcessViz = true) {
+            if (this.snakeAnimationFrame) {
+                cancelAnimationFrame(this.snakeAnimationFrame);
+                this.snakeAnimationFrame = null;
+            }
+            this.detachGameKeyListeners();
+            this._snakeTrail = [];
+            this._snakeFoodIds = null;
+            this._snakeEatenIds = [];
+            const edges = this.edges.get();
+            this.edges.update(edges.map((edge) => ({ id: edge.id, hidden: false })));
+            this.refreshPhysicsEnabled();
+            if (runProcessViz && this.network) {
+                this.processVisualization();
+            }
+        },
+        startPong() {
+            if (!this.network) return;
+            this.stopPong(false);
+            this.stopSnake(false);
+            this.stopOrbit();
+            this.stopBouncingBalls();
+            this.stopFallingSkies();
+            this.network.setOptions({ physics: { enabled: false } });
+            const edges = this.edges.get();
+            this.edges.update(edges.map((edge) => ({ id: edge.id, hidden: true })));
+
+            const b = this.getViewCanvasBounds();
+            if (!b) return;
+            const midX = (b.left + b.right) / 2;
+            const midY = (b.top + b.bottom) / 2;
+            const padH = 100;
+            const padW = 14;
+            const ballR = 10;
+
+            this._pongBall = { x: midX, y: midY, vx: 9, vy: 6, r: ballR };
+            this._pongPadL = { x: b.left + 36, y: midY, w: padW, h: padH };
+            this._pongPadR = { x: b.right - 36, y: midY, w: padW, h: padH };
+            this._pongScoreYou = 0;
+            this._pongScoreAi = 0;
+            this._pongWinPoints = 7;
+
+            const isDark = document.documentElement.classList.contains("dark");
+            const padBg = isDark ? "#1e40af" : "#60a5fa";
+            const padBr = isDark ? "#3b82f6" : "#2563eb";
+            const hudFg = isDark ? "#fafafa" : "#18181b";
+            const hudBg = isDark ? "#27272a" : "#f4f4f5";
+
+            this.nodes.update([
+                {
+                    id: "__pong_ball",
+                    group: "pong",
+                    shape: "dot",
+                    size: ballR * 2,
+                    color: this.nodeColor("#e2e8f0", isDark ? "#f8fafc" : "#0f172a"),
+                    label: "",
+                    font: { size: 0 },
+                    x: this._pongBall.x,
+                    y: this._pongBall.y,
+                    physics: false,
+                },
+                {
+                    id: "__pong_hud",
+                    group: "pong",
+                    shape: "box",
+                    label: `0 - 0`,
+                    font: { size: 16, color: hudFg, bold: true },
+                    margin: 10,
+                    color: {
+                        background: hudBg,
+                        border: padBr,
+                        highlight: { background: hudBg, border: padBr },
+                        hover: { background: hudBg, border: padBr },
+                    },
+                    x: midX,
+                    y: b.top + 44,
+                    physics: false,
+                },
+                {
+                    id: "__pong_pad_l",
+                    group: "pong",
+                    shape: "box",
+                    label: "",
+                    font: { size: 0 },
+                    margin: 6,
+                    widthConstraint: { minimum: padW * 2, maximum: padW * 2 },
+                    heightConstraint: { minimum: padH, maximum: padH },
+                    color: { background: padBg, border: padBr, highlight: { background: padBg, border: padBr } },
+                    x: this._pongPadL.x,
+                    y: this._pongPadL.y,
+                    physics: false,
+                },
+                {
+                    id: "__pong_pad_r",
+                    group: "pong",
+                    shape: "box",
+                    label: "",
+                    font: { size: 0 },
+                    margin: 6,
+                    widthConstraint: { minimum: padW * 2, maximum: padW * 2 },
+                    heightConstraint: { minimum: padH, maximum: padH },
+                    color: {
+                        background: isDark ? "#4c1d95" : "#a78bfa",
+                        border: padBr,
+                        highlight: { background: padBg, border: padBr },
+                    },
+                    x: this._pongPadR.x,
+                    y: this._pongPadR.y,
+                    physics: false,
+                },
+            ]);
+
+            this.attachGameKeyListeners("pong");
+            ToastUtils.info(this.$t("visualiser.pong_hint"));
+
+            const paddleSpeed = 11;
+            const aiMaxStep = paddleSpeed * 0.92;
+
+            const resetBall = (bounds, towardSign) => {
+                const bb = this._pongBall;
+                bb.x = (bounds.left + bounds.right) / 2;
+                bb.y = (bounds.top + bounds.bottom) / 2;
+                const ramp = Math.min(5, this._pongScoreYou + this._pongScoreAi);
+                const base = 8.5 + ramp * 0.35;
+                bb.vx = towardSign * base * (0.95 + Math.random() * 0.1);
+                bb.vy = (Math.random() * 8 + 3) * (Math.random() > 0.5 ? 1 : -1);
+            };
+
+            const loop = () => {
+                if (!this.enablePong || !this.network || !this._pongBall) return;
+                const bounds = this.getViewCanvasBounds();
+                if (!bounds) return;
+                const ball = this._pongBall;
+                const pl = this._pongPadL;
+                const pr = this._pongPadR;
+
+                if (this._snakeKeys.w) pl.y -= paddleSpeed;
+                if (this._snakeKeys.s) pl.y += paddleSpeed;
+
+                const ph = padH / 2;
+                const dy = ball.y - pr.y;
+                const step = Math.min(aiMaxStep, Math.abs(dy) * 0.22);
+                if (dy < -1.5) pr.y -= step;
+                else if (dy > 1.5) pr.y += step;
+
+                pl.y = Math.max(bounds.top + ph + 8, Math.min(bounds.bottom - ph - 8, pl.y));
+                pr.y = Math.max(bounds.top + ph + 8, Math.min(bounds.bottom - ph - 8, pr.y));
+
+                ball.x += ball.vx;
+                ball.y += ball.vy;
+
+                if (ball.y - ball.r < bounds.top) {
+                    ball.y = bounds.top + ball.r;
+                    ball.vy *= -1;
+                } else if (ball.y + ball.r > bounds.bottom) {
+                    ball.y = bounds.bottom - ball.r;
+                    ball.vy *= -1;
+                }
+
+                if (ball.vx < 0 && ball.x - ball.r <= pl.x + padW && ball.y >= pl.y - ph && ball.y <= pl.y + ph) {
+                    ball.x = pl.x + padW + ball.r;
+                    ball.vx *= -1.025;
+                    ball.vy += (Math.random() - 0.5) * 2.2;
+                } else if (
+                    ball.vx > 0 &&
+                    ball.x + ball.r >= pr.x - padW &&
+                    ball.y >= pr.y - ph &&
+                    ball.y <= pr.y + ph
+                ) {
+                    ball.x = pr.x - padW - ball.r;
+                    ball.vx *= -1.025;
+                    ball.vy += (Math.random() - 0.5) * 2.2;
+                }
+
+                const edgeMargin = 18;
+                if (ball.x - ball.r < bounds.left - edgeMargin) {
+                    this._pongScoreAi++;
+                    if (this._pongScoreAi >= this._pongWinPoints) {
+                        if (this.pongAnimationFrame) {
+                            cancelAnimationFrame(this.pongAnimationFrame);
+                            this.pongAnimationFrame = null;
+                        }
+                        ToastUtils.info(this.$t("visualiser.pong_win_ai"));
+                        this.enablePong = false;
+                        return;
+                    }
+                    resetBall(bounds, -1);
+                } else if (ball.x + ball.r > bounds.right + edgeMargin) {
+                    this._pongScoreYou++;
+                    if (this._pongScoreYou >= this._pongWinPoints) {
+                        if (this.pongAnimationFrame) {
+                            cancelAnimationFrame(this.pongAnimationFrame);
+                            this.pongAnimationFrame = null;
+                        }
+                        ToastUtils.success(this.$t("visualiser.pong_win_you"));
+                        this.enablePong = false;
+                        return;
+                    }
+                    resetBall(bounds, 1);
+                }
+
+                const hudLabel = `${this._pongScoreYou} - ${this._pongScoreAi}`;
+
+                this.nodes.update([
+                    { id: "__pong_ball", x: ball.x, y: ball.y },
+                    { id: "__pong_pad_l", x: pl.x, y: pl.y },
+                    { id: "__pong_pad_r", x: pr.x, y: pr.y },
+                    { id: "__pong_hud", label: hudLabel, x: (bounds.left + bounds.right) / 2, y: bounds.top + 44 },
+                ]);
+
+                this.pongAnimationFrame = requestAnimationFrame(loop);
+            };
+            this.pongAnimationFrame = requestAnimationFrame(loop);
+        },
+        stopPong(runProcessViz = true) {
+            if (this.pongAnimationFrame) {
+                cancelAnimationFrame(this.pongAnimationFrame);
+                this.pongAnimationFrame = null;
+            }
+            this.detachGameKeyListeners();
+            this._pongBall = null;
+            for (const id of PONG_NODE_IDS) {
+                try {
+                    this.nodes.remove(id);
+                } catch {
+                    /* node may already be removed */
+                }
+            }
+            const edges = this.edges.get();
+            this.edges.update(edges.map((edge) => ({ id: edge.id, hidden: false })));
+            this.refreshPhysicsEnabled();
+            if (runProcessViz && this.network) {
+                this.processVisualization();
+            }
+        },
+        reconcileSnakeFoodAfterViz() {
+            if (!this._snakeFoodIds || !this._snakeEatenIds) return;
+            const ids = new Set(this.nodes.getIds());
+            this._snakeEatenIds = this._snakeEatenIds.filter((id) => ids.has(id));
+            const eaten = new Set(this._snakeEatenIds);
+            for (const id of [...this._snakeFoodIds]) {
+                if (!ids.has(id)) this._snakeFoodIds.delete(id);
+            }
+            for (const id of ids) {
+                if (id === "me" || eaten.has(id) || PONG_NODE_IDS.includes(id)) continue;
+                this._snakeFoodIds.add(id);
             }
         },
         async init() {
@@ -1013,8 +1479,17 @@ export default {
                 }
             });
 
+            this.refreshPhysicsEnabled();
+
             this.network.on("dragStart", (params) => {
-                if ((this.enableBouncingBalls || this.enableOrbit) && params.nodes.length > 0) {
+                if (
+                    (this.enableBouncingBalls ||
+                        this.enableOrbit ||
+                        this.enableFallingSkies ||
+                        this.enableSnake ||
+                        this.enablePong) &&
+                    params.nodes.length > 0
+                ) {
                     this._draggingNodeId = params.nodes[0];
                     this.network.setOptions({ physics: { enabled: false } });
                 }
@@ -1031,9 +1506,7 @@ export default {
                             node.x = canvasPos.x;
                             node.y = canvasPos.y;
                         }
-                    } else if (this.enableOrbit) {
-                        // For orbit mode, just update the node position in vis-network DataSet
-                        // though it might be overwritten by orbit animation loop
+                    } else if (this.enableOrbit || this.enableFallingSkies || this.enableSnake || this.enablePong) {
                         this.nodes.update({ id: this._draggingNodeId, x: canvasPos.x, y: canvasPos.y });
                     }
                 }
@@ -1041,6 +1514,7 @@ export default {
 
             this.network.on("dragEnd", () => {
                 this._draggingNodeId = null;
+                this.refreshPhysicsEnabled();
             });
 
             this.network.on("zoom", () => {
@@ -1064,6 +1538,7 @@ export default {
             }
         },
         async onAutoReload() {
+            if (this.enableSnake || this.enablePong) return;
             if (!this.autoReload || this.isUpdating || this.isLoading) return;
             this.isUpdating = true;
             try {
@@ -1073,7 +1548,8 @@ export default {
             }
         },
         updateLOD() {
-            if (!this.network) return;
+            if (!this.network || this.enableSnake || this.enablePong) return;
+            if (typeof this.network.getScale !== "function") return;
             const scale = this.network.getScale();
             let newLOD = "high";
             if (scale < 0.2) {
@@ -1163,16 +1639,49 @@ export default {
             const processedNodeIds = new Set();
             const processedEdgeIds = new Set();
 
+            const posById = {};
+            const prevIds = new Set(this.lastVizKeys);
+
+            if (!this.enableFallingSkies) {
+                this._fallingById = new Map();
+                if (!this._fallingPendingIds) {
+                    this._fallingPendingIds = new Set();
+                } else {
+                    this._fallingPendingIds.clear();
+                }
+            } else {
+                if (!this._fallingById) {
+                    this._fallingById = new Map();
+                }
+                if (!this._fallingPendingIds) {
+                    this._fallingPendingIds = new Set();
+                }
+            }
+
+            const allowAnnounceFall = this.enableFallingSkies && this.vizHadOneLayout;
+
+            const existingNodeIds = this.nodes.getIds();
+            if (this.network) {
+                const snap = this.network.getPositions(existingNodeIds);
+                if (snap) {
+                    for (const id of existingNodeIds) {
+                        const p = snap[id];
+                        if (p && Number.isFinite(p.x) && Number.isFinite(p.y)) {
+                            posById[id] = { x: p.x, y: p.y };
+                        }
+                    }
+                }
+            }
+
             const isDarkMode = document.documentElement.classList.contains("dark");
             const fontColor = isDarkMode ? "#ffffff" : "#000000";
 
-            // search filter helper
             const searchLower = this.searchQuery.toLowerCase();
             const matchesSearch = (text) => !this.searchQuery || (text && text.toLowerCase().includes(searchLower));
 
-            // Add me
             const meLabel = this.config?.display_name ?? "Local Node";
             if (matchesSearch(meLabel) || matchesSearch(this.config?.identity_hash)) {
+                const mp = this.pickStablePosition("me", posById, () => ({ x: 0, y: 0 }));
                 let meNode = {
                     id: "me",
                     group: "me",
@@ -1185,134 +1694,147 @@ export default {
                     title: `Local Node: ${meLabel}\nIdentity: ${this.config?.identity_hash ?? "Unknown"}`,
                     color: this.nodeColor("#3b82f6", isDarkMode ? "#1e40af" : "#eff6ff"),
                     font: { color: fontColor, size: 16, bold: true },
-                    x: 0,
-                    y: 0,
+                    x: mp.x,
+                    y: mp.y,
                 };
                 meNode = { ...meNode, ...this.getNodeLODProps(meNode, this.currentLOD) };
                 this.nodes.update([meNode]);
                 processedNodeIds.add("me");
             }
 
-            // Add interfaces
             const interfaceNodes = [];
             const interfaceEdges = [];
-            const interfaceCount = this.interfaces.length;
-            const radius = 400; // Start interfaces at 400px from center
+            const ifaceEntries = [];
+            const radius = 400;
 
-            for (let idx = 0; idx < interfaceCount; idx++) {
+            for (let idx = 0; idx < this.interfaces.length; idx++) {
                 const entry = this.interfaces[idx];
+                if (!this.showDisabledInterfaces && !entry.status) {
+                    continue;
+                }
                 let label = entry.interface_name ?? entry.name;
                 if (entry.type === "LocalServerInterface" || entry.parent_interface_name != null) {
                     label = entry.name;
                 }
-
                 if (matchesSearch(label) || matchesSearch(entry.name)) {
-                    // Distribute interfaces in a circle
-                    const angle = (idx / interfaceCount) * 2 * Math.PI;
-                    const initialX = Math.cos(angle) * radius;
-                    const initialY = Math.sin(angle) * radius;
-
-                    let interfaceNode = {
-                        id: entry.name,
-                        group: "interface",
-                        label: label,
-                        title: `${entry.name}\nState: ${entry.status ? "Online" : "Offline"}\nBitrate: ${Utils.formatBitsPerSecond(entry.bitrate)}\nTX: ${Utils.formatBytes(entry.txb)}\nRX: ${Utils.formatBytes(entry.rxb)}`,
-                        size: 35,
-                        _originalSize: 35,
-                        shape: "circularImage",
-                        _originalShape: "circularImage",
-                        image: entry.status
-                            ? "/assets/images/network-visualiser/interface_connected.png"
-                            : "/assets/images/network-visualiser/interface_disconnected.png",
-                        color: this.nodeColor(entry.status ? "#10b981" : "#ef4444", isDarkMode ? "#064e3b" : "#ecfdf5"),
-                        font: { color: fontColor, size: 12, bold: true },
-                        x: initialX,
-                        y: initialY,
-                    };
-                    interfaceNode = { ...interfaceNode, ...this.getNodeLODProps(interfaceNode, this.currentLOD) };
-                    interfaceNodes.push(interfaceNode);
-                    processedNodeIds.add(entry.name);
-
-                    const edgeId = `me~${entry.name}`;
-                    interfaceEdges.push({
-                        id: edgeId,
-                        from: "me",
-                        to: entry.name,
-                        color: entry.status ? (isDarkMode ? "#065f46" : "#10b981") : isDarkMode ? "#7f1d1d" : "#ef4444",
-                        width: 3,
-                        length: 200,
-                        arrows: { to: { enabled: true, scaleFactor: 0.5 } },
-                        hidden: this.enableOrbit,
-                    });
-                    processedEdgeIds.add(edgeId);
+                    ifaceEntries.push({ entry, label });
                 }
             }
+
+            const nIface = ifaceEntries.length;
+            for (let j = 0; j < nIface; j++) {
+                const { entry, label } = ifaceEntries[j];
+                const angle = nIface > 0 ? (j / nIface) * 2 * Math.PI : 0;
+                const initialX = Math.cos(angle) * radius;
+                const initialY = Math.sin(angle) * radius;
+                const pos = this.pickStablePosition(entry.name, posById, () => ({ x: initialX, y: initialY }));
+
+                let interfaceNode = {
+                    id: entry.name,
+                    group: "interface",
+                    label: label,
+                    title: `${entry.name}\nState: ${entry.status ? "Online" : "Offline"}\nBitrate: ${Utils.formatBitsPerSecond(entry.bitrate)}\nTX: ${Utils.formatBytes(entry.txb)}\nRX: ${Utils.formatBytes(entry.rxb)}`,
+                    size: 35,
+                    _originalSize: 35,
+                    shape: "circularImage",
+                    _originalShape: "circularImage",
+                    image: entry.status
+                        ? "/assets/images/network-visualiser/interface_connected.png"
+                        : "/assets/images/network-visualiser/interface_disconnected.png",
+                    color: this.nodeColor(entry.status ? "#10b981" : "#ef4444", isDarkMode ? "#064e3b" : "#ecfdf5"),
+                    font: { color: fontColor, size: 12, bold: true },
+                    x: pos.x,
+                    y: pos.y,
+                };
+                interfaceNode = { ...interfaceNode, ...this.getNodeLODProps(interfaceNode, this.currentLOD) };
+                interfaceNodes.push(interfaceNode);
+                processedNodeIds.add(entry.name);
+
+                const edgeId = `me~${entry.name}`;
+                interfaceEdges.push({
+                    id: edgeId,
+                    from: "me",
+                    to: entry.name,
+                    color: entry.status ? (isDarkMode ? "#065f46" : "#10b981") : isDarkMode ? "#7f1d1d" : "#ef4444",
+                    width: 3,
+                    length: 200,
+                    arrows: { to: { enabled: true, scaleFactor: 0.5 } },
+                    hidden: this.edgesHiddenForOverlayGames(),
+                });
+                processedEdgeIds.add(edgeId);
+            }
             if (interfaceNodes.length > 0) this.nodes.update(interfaceNodes);
             if (interfaceEdges.length > 0) this.edges.update(interfaceEdges);
 
             const discoveredNodes = [];
             const discoveredEdges = [];
-            for (const disc of this.discoveredInterfaces) {
-                const discId = `discovered~${disc.discovery_hash || disc.name}`;
-                const discLabel = disc.name || disc.reachable_on || "Unknown";
-                if (
-                    !matchesSearch(discLabel) &&
-                    !matchesSearch(disc.reachable_on) &&
-                    !matchesSearch(disc.transport_id)
-                ) {
-                    continue;
+            if (this.showDiscoveredInterfaces) {
+                for (const disc of this.discoveredInterfaces) {
+                    const discId = `discovered~${disc.discovery_hash || disc.name}`;
+                    const discLabel = disc.name || disc.reachable_on || "Unknown";
+                    if (
+                        !matchesSearch(discLabel) &&
+                        !matchesSearch(disc.reachable_on) &&
+                        !matchesSearch(disc.transport_id)
+                    ) {
+                        continue;
+                    }
+
+                    if (this.hopFilterMax != null && disc.hops != null && disc.hops > this.hopFilterMax) {
+                        continue;
+                    }
+
+                    const isConnected = this.discoveredActive.some((a) => {
+                        const aHost = a.target_host || a.remote || a.listen_ip;
+                        const aPort = a.target_port || a.listen_port;
+                        return aHost && aPort && disc.reachable_on === aHost && String(disc.port) === String(aPort);
+                    });
+
+                    const angle = Math.random() * 2 * Math.PI;
+                    const dist = 800 + Math.random() * 200;
+                    const dp = this.pickStablePosition(discId, posById, () => ({
+                        x: Math.cos(angle) * dist,
+                        y: Math.sin(angle) * dist,
+                    }));
+                    let discNode = {
+                        id: discId,
+                        group: "discovered",
+                        label: discLabel,
+                        title: `Discovered: ${discLabel}\nType: ${disc.type || "Unknown"}\nHops: ${disc.hops ?? "?"}\nStatus: ${isConnected ? "Connected" : disc.status || "Available"}${disc.reachable_on ? `\nAddress: ${disc.reachable_on}:${disc.port}` : ""}`,
+                        size: 25,
+                        _originalSize: 25,
+                        shape: "circularImage",
+                        _originalShape: "circularImage",
+                        image: isConnected
+                            ? "/assets/images/network-visualiser/interface_connected.png"
+                            : "/assets/images/network-visualiser/interface_disconnected.png",
+                        color: this.nodeColor(
+                            isConnected ? "#06b6d4" : "#64748b",
+                            isDarkMode ? (isConnected ? "#164e63" : "#1e293b") : isConnected ? "#ecfeff" : "#f1f5f9"
+                        ),
+                        font: { color: fontColor, size: 10 },
+                        x: dp.x,
+                        y: dp.y,
+                    };
+                    discNode = { ...discNode, ...this.getNodeLODProps(discNode, this.currentLOD) };
+                    discoveredNodes.push(discNode);
+                    processedNodeIds.add(discId);
+
+                    const edgeId = `me~${discId}`;
+                    discoveredEdges.push({
+                        id: edgeId,
+                        from: "me",
+                        to: discId,
+                        color: {
+                            color: isDarkMode ? "#155e75" : "#06b6d4",
+                            opacity: 0.4,
+                        },
+                        width: 1,
+                        dashes: true,
+                        hidden: this.edgesHiddenForOverlayGames(),
+                    });
+                    processedEdgeIds.add(edgeId);
                 }
-
-                if (this.hopFilterMax != null && disc.hops != null && disc.hops > this.hopFilterMax) {
-                    continue;
-                }
-
-                const isConnected = this.discoveredActive.some((a) => {
-                    const aHost = a.target_host || a.remote || a.listen_ip;
-                    const aPort = a.target_port || a.listen_port;
-                    return aHost && aPort && disc.reachable_on === aHost && String(disc.port) === String(aPort);
-                });
-
-                const angle = Math.random() * 2 * Math.PI;
-                const dist = 800 + Math.random() * 200;
-                let discNode = {
-                    id: discId,
-                    group: "discovered",
-                    label: discLabel,
-                    title: `Discovered: ${discLabel}\nType: ${disc.type || "Unknown"}\nHops: ${disc.hops ?? "?"}\nStatus: ${isConnected ? "Connected" : disc.status || "Available"}${disc.reachable_on ? `\nAddress: ${disc.reachable_on}:${disc.port}` : ""}`,
-                    size: 25,
-                    _originalSize: 25,
-                    shape: "circularImage",
-                    _originalShape: "circularImage",
-                    image: isConnected
-                        ? "/assets/images/network-visualiser/interface_connected.png"
-                        : "/assets/images/network-visualiser/interface_disconnected.png",
-                    color: this.nodeColor(
-                        isConnected ? "#06b6d4" : "#64748b",
-                        isDarkMode ? (isConnected ? "#164e63" : "#1e293b") : isConnected ? "#ecfeff" : "#f1f5f9"
-                    ),
-                    font: { color: fontColor, size: 10 },
-                    x: Math.cos(angle) * dist,
-                    y: Math.sin(angle) * dist,
-                };
-                discNode = { ...discNode, ...this.getNodeLODProps(discNode, this.currentLOD) };
-                discoveredNodes.push(discNode);
-                processedNodeIds.add(discId);
-
-                const edgeId = `me~${discId}`;
-                discoveredEdges.push({
-                    id: edgeId,
-                    from: "me",
-                    to: discId,
-                    color: {
-                        color: isDarkMode ? "#155e75" : "#06b6d4",
-                        opacity: 0.4,
-                    },
-                    width: 1,
-                    dashes: true,
-                    hidden: this.enableOrbit,
-                });
-                processedEdgeIds.add(edgeId);
             }
             if (discoveredNodes.length > 0) this.nodes.update(discoveredNodes);
             if (discoveredEdges.length > 0) this.edges.update(discoveredEdges);
@@ -1356,35 +1878,61 @@ export default {
                     }
 
                     const conversation = this.conversations[announce.destination_hash];
-                    const interfaceNode = this.nodes.get(entry.interface);
-                    let initX = 0,
-                        initY = 0;
+                    const ip = posById[entry.interface];
+                    let initX = 0;
+                    let initY = 0;
 
-                    if (interfaceNode && interfaceNode.x !== undefined) {
-                        // Place around their parent interface with some randomness to avoid stacking
+                    if (ip && Number.isFinite(ip.x) && Number.isFinite(ip.y)) {
                         const angle = Math.random() * 2 * Math.PI;
                         const dist = 150 + Math.random() * 150;
-                        initX = interfaceNode.x + Math.cos(angle) * dist;
-                        initY = interfaceNode.y + Math.sin(angle) * dist;
+                        initX = ip.x + Math.cos(angle) * dist;
+                        initY = ip.y + Math.sin(angle) * dist;
                     } else {
-                        // Fallback far from center
                         const angle = Math.random() * 2 * Math.PI;
                         const dist = 600 + Math.random() * 200;
                         initX = Math.cos(angle) * dist;
                         initY = Math.sin(angle) * dist;
                     }
 
+                    const targetXY = this.pickStablePosition(entry.hash, posById, () => ({ x: initX, y: initY }));
+                    const edgeId = `${entry.interface}~${entry.hash}`;
+                    const shouldFall = allowAnnounceFall && !prevIds.has(entry.hash);
+
                     let node = {
                         id: entry.hash,
                         group: "announce",
                         size: 25,
                         _originalSize: 25,
                         _announce: announce,
+                        _parentInterface: entry.interface,
                         font: { color: fontColor, size: 11 },
-                        x: initX,
-                        y: initY,
+                        x: targetXY.x,
+                        y: targetXY.y,
                     };
 
+                    if (shouldFall) {
+                        this._fallingPendingIds.add(entry.hash);
+                        let topY = targetXY.y - 1100;
+                        const container = document.getElementById("network");
+                        if (container && this.network) {
+                            const scale = this.network.getScale();
+                            const vp = this.network.getViewPosition();
+                            const halfH = container.clientHeight / (2 * scale);
+                            topY = vp.y - halfH - 60;
+                        }
+                        node.x = targetXY.x;
+                        node.y = topY;
+                        posById[entry.hash] = { x: targetXY.x, y: targetXY.y };
+                        this._fallingById.set(entry.hash, {
+                            tx: targetXY.x,
+                            ty: targetXY.y,
+                            x: targetXY.x,
+                            y: topY,
+                            vy: 0,
+                            edgeIds: [edgeId],
+                        });
+                    }
+
                     node.label = displayName;
                     node.title = `${displayName}\nAspect: ${announce.aspect}\nHops: ${entry.hops}\nVia: ${entry.interface}\nLast Seen: ${Utils.convertDateTimeToLocalDateTimeString(new Date(announce.updated_at))}`;
 
@@ -1435,7 +1983,6 @@ export default {
                     batchNodes.push(node);
                     processedNodeIds.add(node.id);
 
-                    const edgeId = `${entry.interface}~${entry.hash}`;
                     batchEdges.push({
                         id: edgeId,
                         from: entry.interface,
@@ -1453,7 +2000,7 @@ export default {
                         },
                         width: entry.hops === 1 ? 2 : 1,
                         dashes: entry.hops > 1,
-                        hidden: this.enableOrbit,
+                        hidden: this.edgeHiddenForMode(entry.hash),
                     });
                     processedEdgeIds.add(edgeId);
                 }
@@ -1471,6 +2018,12 @@ export default {
                 if (this.abortController.signal.aborted) return;
             }
 
+            if (this.enablePong) {
+                for (const id of PONG_NODE_IDS) {
+                    processedNodeIds.add(id);
+                }
+            }
+
             // Cleanup: remove nodes/edges that are no longer in the network
             const nodesToRemove = this.nodes.getIds().filter((id) => !processedNodeIds.has(id));
             if (nodesToRemove.length > 0) this.nodes.remove(nodesToRemove);
@@ -1483,6 +2036,22 @@ export default {
             this.currentBatch = 0;
             this.totalBatches = 0;
 
+            this.lastVizKeys = [...processedNodeIds];
+            this.vizHadOneLayout = true;
+
+            if (this.network && !this.didDisableStabilization) {
+                this.didDisableStabilization = true;
+                this.network.setOptions({ physics: { stabilization: { enabled: false } } });
+            }
+
+            if (this.enableFallingSkies && this._fallingById && this._fallingById.size > 0) {
+                this.scheduleFallingTick();
+            }
+
+            if (this.enableSnake && this._snakeFoodIds) {
+                this.reconcileSnakeFoodAfterViz();
+            }
+
             if (this.enableOrbit) {
                 this.startOrbit();
             }
diff --git a/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLegend.vue b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLegend.vue
new file mode 100644
index 0000000..e69ad38
--- /dev/null
+++ b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLegend.vue
@@ -0,0 +1,35 @@
+<template>
+    <div
+        class="absolute bottom-4 right-4 z-10 hidden sm:flex items-center gap-2 px-4 py-2 rounded-full border border-gray-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl"
+    >
+        <div class="flex items-center gap-1.5">
+            <div class="w-3 h-3 rounded-full border-2 border-emerald-500 bg-emerald-500/20"></div>
+            <span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase">Direct</span>
+        </div>
+        <div class="w-px h-3 bg-gray-200 dark:bg-zinc-800 mx-1"></div>
+        <div class="flex items-center gap-1.5">
+            <div class="w-3 h-3 rounded-full border-2 border-blue-500/50 bg-blue-500/10"></div>
+            <span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase">Multi-Hop</span>
+        </div>
+        <div
+            v-if="showDiscoveredInterfaces && discoveredCount > 0"
+            class="w-px h-3 bg-gray-200 dark:bg-zinc-800 mx-1"
+        ></div>
+        <div v-if="showDiscoveredInterfaces && discoveredCount > 0" class="flex items-center gap-1.5">
+            <div class="w-3 h-3 rounded-full border-2 border-cyan-500/50 bg-cyan-500/10"></div>
+            <span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase"
+                >Discovered ({{ discoveredCount }})</span
+            >
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "NetworkVisualiserLegend",
+    props: {
+        showDiscoveredInterfaces: { type: Boolean, default: false },
+        discoveredCount: { type: Number, default: 0 },
+    },
+};
+</script>
diff --git a/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLoadingOverlay.vue b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLoadingOverlay.vue
new file mode 100644
index 0000000..b50831a
--- /dev/null
+++ b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserLoadingOverlay.vue
@@ -0,0 +1,49 @@
+<template>
+    <div
+        v-if="isLoading"
+        class="absolute inset-0 z-20 flex items-center justify-center bg-zinc-950/10 backdrop-blur-[2px] transition-all duration-300"
+    >
+        <div
+            class="bg-white/90 dark:bg-zinc-900/90 border border-gray-200 dark:border-zinc-800 rounded-2xl px-6 py-4 flex flex-col items-center gap-3"
+        >
+            <div class="relative">
+                <div class="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <div
+                        class="w-6 h-6 border-4 border-emerald-500/20 border-b-emerald-500 rounded-full animate-spin-reverse"
+                    ></div>
+                </div>
+            </div>
+            <div class="text-sm font-medium text-gray-900 dark:text-zinc-100">{{ loadingStatus }}</div>
+            <div v-if="totalNodesToLoad > 0" class="w-48 space-y-2">
+                <div class="h-1.5 bg-gray-200 dark:bg-zinc-800 rounded-full overflow-hidden">
+                    <div
+                        class="h-full bg-blue-500 transition-all duration-300 shadow-[0_0_8px_rgba(59,130,246,0.5)]"
+                        :style="{ width: `${(loadedNodesCount / totalNodesToLoad) * 100}%` }"
+                    ></div>
+                </div>
+                <div
+                    v-if="totalBatches > 0"
+                    class="flex justify-between items-center text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider"
+                >
+                    <span>{{ $t("visualiser.batch") }} {{ currentBatch }} / {{ totalBatches }}</span>
+                    <span>{{ Math.round((loadedNodesCount / totalNodesToLoad) * 100) }}%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "NetworkVisualiserLoadingOverlay",
+    props: {
+        isLoading: { type: Boolean, default: false },
+        loadingStatus: { type: String, default: "" },
+        totalNodesToLoad: { type: Number, default: 0 },
+        loadedNodesCount: { type: Number, default: 0 },
+        currentBatch: { type: Number, default: 0 },
+        totalBatches: { type: Number, default: 0 },
+    },
+};
+</script>
diff --git a/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue
new file mode 100644
index 0000000..d72ecbe
--- /dev/null
+++ b/meshchatx/src/frontend/components/network-visualiser/internal/NetworkVisualiserToolbar.vue
@@ -0,0 +1,252 @@
+<template>
+    <div
+        class="absolute top-2 left-2 right-2 sm:top-4 sm:left-4 sm:right-4 z-10 flex flex-col sm:flex-row gap-2 pointer-events-none"
+    >
+        <div
+            class="pointer-events-auto border border-gray-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl rounded-2xl overflow-hidden w-full sm:min-w-[280px] sm:w-auto transition-all duration-300"
+        >
+            <div
+                class="flex items-center px-4 sm:px-5 py-3 sm:py-4 cursor-pointer hover:bg-gray-50/50 dark:hover:bg-zinc-800/50 transition-colors"
+                @click="$emit('update:isShowingControls', !isShowingControls)"
+            >
+                <div class="flex-1 flex flex-col min-w-0 mr-2">
+                    <span class="font-bold text-gray-900 dark:text-zinc-100 tracking-tight truncate">{{
+                        $t("visualiser.reticulum_mesh")
+                    }}</span>
+                    <span
+                        class="text-[10px] uppercase font-bold text-gray-500 dark:text-zinc-500 tracking-widest truncate"
+                        >{{ $t("visualiser.network_visualizer") }}</span
+                    >
+                </div>
+                <div class="flex items-center gap-2">
+                    <button
+                        type="button"
+                        class="inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white transition-all active:scale-95"
+                        :disabled="isUpdating || isLoading"
+                        @click.stop="$emit('manual-update')"
+                    >
+                        <svg
+                            v-if="!isUpdating && !isLoading"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke="currentColor"
+                            class="w-4 h-4 sm:w-5 sm:h-5"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+                            />
+                        </svg>
+                        <svg
+                            v-else
+                            class="animate-spin h-4 w-4 sm:w-5 sm:h-5"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                        >
+                            <circle
+                                class="opacity-25"
+                                cx="12"
+                                cy="12"
+                                r="10"
+                                stroke="currentColor"
+                                stroke-width="4"
+                            ></circle>
+                            <path
+                                class="opacity-75"
+                                fill="currentColor"
+                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                            ></path>
+                        </svg>
+                    </button>
+                    <div class="w-5 sm:w-6 flex justify-center">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            class="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 transition-transform duration-300"
+                            :class="{ 'rotate-180': isShowingControls }"
+                        >
+                            <path
+                                fill-rule="evenodd"
+                                d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+                                clip-rule="evenodd"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </div>
+
+            <div
+                v-show="isShowingControls"
+                class="px-5 pb-5 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300"
+            >
+                <div class="h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent"></div>
+
+                <div class="flex items-center justify-between">
+                    <label
+                        for="auto-reload"
+                        class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
+                        >Auto Update</label
+                    >
+                    <Toggle
+                        id="auto-reload"
+                        :model-value="autoReload"
+                        @update:model-value="$emit('update:autoReload', $event)"
+                    />
+                </div>
+
+                <div class="flex items-center justify-between">
+                    <label
+                        for="enable-physics"
+                        class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
+                        >Live Layout</label
+                    >
+                    <Toggle
+                        id="enable-physics"
+                        :model-value="enablePhysics"
+                        @update:model-value="$emit('update:enablePhysics', $event)"
+                    />
+                </div>
+
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between gap-2">
+                        <label
+                            for="hop-filter-slider"
+                            class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
+                            >{{ $t("visualiser.max_hops_filter") }}</label
+                        >
+                        <span
+                            class="text-xs font-bold text-blue-600 dark:text-blue-400 tabular-nums min-w-[4rem] text-right"
+                            >{{ hopFilterSlider === 0 ? $t("visualiser.all") : hopFilterSlider }}</span
+                        >
+                    </div>
+                    <input
+                        id="hop-filter-slider"
+                        :value="hopFilterSlider"
+                        type="range"
+                        min="0"
+                        :max="hopSliderMax"
+                        step="1"
+                        class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 dark:bg-zinc-700 accent-blue-600 dark:accent-blue-500"
+                        @input="$emit('update:hopFilterSlider', Number($event.target.value))"
+                    />
+                </div>
+
+                <div class="grid grid-cols-2 gap-3 pt-2">
+                    <div
+                        class="bg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
+                    >
+                        <div
+                            class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1"
+                        >
+                            Nodes
+                        </div>
+                        <div class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ nodeCount }}</div>
+                    </div>
+                    <div
+                        class="bg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
+                    >
+                        <div
+                            class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1"
+                        >
+                            Links
+                        </div>
+                        <div class="text-lg font-bold text-emerald-600 dark:text-emerald-400">{{ edgeCount }}</div>
+                    </div>
+                </div>
+
+                <div
+                    class="bg-zinc-950/5 dark:bg-white/5 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
+                >
+                    <div class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-2">
+                        Interfaces
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <div class="flex items-center gap-1.5">
+                            <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
+                            <span class="text-xs font-bold text-gray-700 dark:text-zinc-300"
+                                >{{ onlineInterfaceCount }} Online</span
+                            >
+                        </div>
+                        <div class="flex items-center gap-1.5">
+                            <div class="w-2 h-2 rounded-full bg-red-500"></div>
+                            <span class="text-xs font-bold text-gray-700 dark:text-zinc-300"
+                                >{{ offlineInterfaceCount }} Offline</span
+                            >
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="sm:ml-auto w-full sm:w-auto pointer-events-auto">
+            <div class="relative group">
+                <div
+                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-500 transition-colors"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                        <path
+                            fill-rule="evenodd"
+                            d="M9 3.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM2.25 10a7.75 7.75 0 1 1 14.03 4.5l3.47 3.47a.75.75 0 0 1-1.06 1.06l-3.47-3.47A7.75 7.75 0 0 1 2.25 10Z"
+                            clip-rule="evenodd"
+                        />
+                    </svg>
+                </div>
+                <input
+                    :value="searchQuery"
+                    type="text"
+                    :placeholder="`Search nodes (${nodeCount})...`"
+                    class="block w-full sm:w-64 pl-9 pr-10 py-2.5 sm:py-3 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border border-gray-200/50 dark:border-zinc-800/50 rounded-2xl text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500/50 sm:focus:w-80 md:max-lg:focus:w-72 lg:focus:w-80 transition-all dark:text-zinc-100 shadow-sm"
+                    @input="$emit('update:searchQuery', $event.target.value)"
+                />
+                <button
+                    v-if="searchQuery"
+                    type="button"
+                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-zinc-200 transition-colors"
+                    @click="$emit('update:searchQuery', '')"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+                        <path
+                            d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Toggle from "../../forms/Toggle.vue";
+
+export default {
+    name: "NetworkVisualiserToolbar",
+    components: { Toggle },
+    props: {
+        isShowingControls: { type: Boolean, default: true },
+        isUpdating: { type: Boolean, default: false },
+        isLoading: { type: Boolean, default: false },
+        autoReload: { type: Boolean, default: false },
+        enablePhysics: { type: Boolean, default: true },
+        hopFilterSlider: { type: Number, default: 0 },
+        hopSliderMax: { type: Number, default: 1 },
+        nodeCount: { type: Number, default: 0 },
+        edgeCount: { type: Number, default: 0 },
+        onlineInterfaceCount: { type: Number, default: 0 },
+        offlineInterfaceCount: { type: Number, default: 0 },
+        searchQuery: { type: String, default: "" },
+    },
+    emits: [
+        "update:isShowingControls",
+        "update:autoReload",
+        "update:enablePhysics",
+        "update:hopFilterSlider",
+        "update:searchQuery",
+        "manual-update",
+    ],
+};
+</script>