From 29c062d7016a738d7cf1b9a672be6aa6b86bb48d Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 20 Jan 2025 16:14:08 +1300
Subject: [PATCH 001/131] stop updating message state if message gets cancelled

---
 meshchat.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index f43201a..d2a4ce3 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -2681,9 +2681,10 @@ class ReticulumMeshChat:
             has_delivered = lxmf_message.state == LXMF.LXMessage.DELIVERED
             has_propagated = lxmf_message.state == LXMF.LXMessage.SENT and lxmf_message.method == LXMF.LXMessage.PROPAGATED
             has_failed = lxmf_message.state == LXMF.LXMessage.FAILED
+            is_cancelled = lxmf_message.state == LXMF.LXMessage.CANCELLED
 
             # check if we should stop updating
-            if has_delivered or has_propagated or has_failed:
+            if has_delivered or has_propagated or has_failed or is_cancelled:
                 should_update_message = False
 
     # handle an announce received from reticulum, for an audio call address

From 4ae83ca9800d3426dd85abd824029b16a704ae8e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 20 Jan 2025 21:14:53 +1300
Subject: [PATCH 002/131] fix formatting

---
 meshchat.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index d2a4ce3..99714c4 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1863,6 +1863,7 @@ class ReticulumMeshChat:
                 else:
                     print(f"unhandled field: {field}")
         return data
+
     def convert_nomadnet_field_data_to_map(self, field_data):
         data = {}
         if field_data is not None or "{}":
@@ -1878,9 +1879,6 @@ class ReticulumMeshChat:
         
         return data
 
-
-
-
     # handle data received from websocket client
     async def on_websocket_data_received(self, client, data):
 

From 580c9071384f56b769e70d02338c70695ff09535 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 21 Jan 2025 23:19:55 +1300
Subject: [PATCH 003/131] add ability to double click an lxmf.delivery node in
 network visualiser to open the conversation

---
 meshchat.py                                   |  5 +++
 .../components/messages/MessagesPage.vue      | 33 ++++++++++++++
 .../network-visualiser/NetworkVisualiser.vue  | 44 +++++++++++++++++++
 src/frontend/main.js                          |  3 +-
 4 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 99714c4..3ed2e6a 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1007,6 +1007,7 @@ class ReticulumMeshChat:
             # get query params
             aspect = request.query.get("aspect", None)
             identity_hash = request.query.get("identity_hash", None)
+            destination_hash = request.query.get("destination_hash", None)
             limit = request.query.get("limit", None)
 
             # build announces database query
@@ -1020,6 +1021,10 @@ class ReticulumMeshChat:
             if identity_hash is not None:
                 query = query.where(database.Announce.identity_hash == identity_hash)
 
+            # filter by provided destination hash
+            if destination_hash is not None:
+                query = query.where(database.Announce.destination_hash == destination_hash)
+
             # limit results
             if limit is not None:
                 query = query.limit(limit)
diff --git a/src/frontend/components/messages/MessagesPage.vue b/src/frontend/components/messages/MessagesPage.vue
index 0310fa4..4cba9f0 100644
--- a/src/frontend/components/messages/MessagesPage.vue
+++ b/src/frontend/components/messages/MessagesPage.vue
@@ -38,6 +38,9 @@ export default {
         ConversationViewer,
         MessagesSidebar,
     },
+    props: {
+        destinationHash: String,
+    },
     data() {
         return {
 
@@ -76,6 +79,11 @@ export default {
             this.getConversations();
         }, 5000);
 
+        // compose message if a destination hash was provided on page load
+        if(this.destinationHash){
+            this.onComposeNewMessage(this.destinationHash);
+        }
+
     },
     methods: {
         async onComposeNewMessage(destinationHash) {
@@ -93,6 +101,9 @@ export default {
                 destinationHash = destinationHash.replace("lxmf@", "");
             }
 
+            // fetch updated announce as we might be composing new message before we loaded the announces list
+            await this.getLxmfDeliveryAnnounce(destinationHash);
+
             // attempt to find existing peer so we can show their name
             const existingPeer = this.peers[destinationHash];
             if(existingPeer){
@@ -165,6 +176,28 @@ export default {
                 console.log(e);
             }
         },
+        async getLxmfDeliveryAnnounce(destinationHash) {
+            try {
+
+                // fetch announce for destination hash
+                const response = await window.axios.get(`/api/v1/announces`, {
+                    params: {
+                        destination_hash: destinationHash,
+                        limit: 1,
+                    },
+                });
+
+                // update ui
+                const lxmfDeliveryAnnounces = response.data.announces;
+                for(const lxmfDeliveryAnnounce of lxmfDeliveryAnnounces){
+                    this.updatePeerFromAnnounce(lxmfDeliveryAnnounce);
+                }
+
+            } catch(e) {
+                // do nothing if failed to load announce
+                console.log(e);
+            }
+        },
         async getConversations() {
             try {
                 const response = await window.axios.get(`/api/v1/lxmf/conversations`);
diff --git a/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index 9f3f971..9836536 100644
--- a/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -165,6 +165,47 @@ export default {
                 },
             });
 
+            // handle double click on a node
+            this.network.on("doubleClick", (params) => {
+
+                // get clicked node id
+                const clickedNodeId = params.nodes[0];
+                if(!clickedNodeId){
+                    return;
+                }
+
+                // find node by id
+                const node = this.network.body.nodes[clickedNodeId];
+                if(!node){
+                    return;
+                }
+
+                // handle double click on an announce node
+                if(node.options.group === "announce"){
+
+                    // get announce
+                    const announce = node.options._announce;
+                    if(!announce) {
+                        return;
+                    }
+
+                    // handle double click on lxmf.delivery node
+                    if(announce.aspect === "lxmf.delivery"){
+
+                        // go to messages page for this destination hash
+                        this.$router.push({
+                            name: "messages",
+                            params: {
+                                destinationHash: announce.destination_hash,
+                            },
+                        });
+
+                    }
+
+                }
+
+            });
+
             // update network
             await this.update();
 
@@ -358,6 +399,9 @@ export default {
 
                 }
 
+                // attach announce to this node
+                node._announce = announce;
+
                 // add node
                 nodes.push(node);
 
diff --git a/src/frontend/main.js b/src/frontend/main.js
index 3fdece6..664cf68 100644
--- a/src/frontend/main.js
+++ b/src/frontend/main.js
@@ -46,7 +46,8 @@ const router = createRouter({
         },
         {
             name: "messages",
-            path: '/messages',
+            path: '/messages/:destinationHash?',
+            props: true,
             component: defineAsyncComponent(() => import("./components/messages/MessagesPage.vue")),
         },
         {

From 7d1681fbf19ddf2091d3eab93e2c9bed23567d69 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 21 Jan 2025 23:28:00 +1300
Subject: [PATCH 004/131] auto update router url when navigating through
 conversations

---
 .../components/messages/MessagesPage.vue      | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/messages/MessagesPage.vue b/src/frontend/components/messages/MessagesPage.vue
index 4cba9f0..9f04790 100644
--- a/src/frontend/components/messages/MessagesPage.vue
+++ b/src/frontend/components/messages/MessagesPage.vue
@@ -15,7 +15,7 @@
             :my-lxmf-address-hash="config?.lxmf_address_hash"
             :selected-peer="selectedPeer"
             :conversations="conversations"
-            @close="selectedPeer = null"
+            @close="onCloseConversationViewer"
             @reload-conversations="getConversations"/>
 
     </div>
@@ -211,7 +211,18 @@ export default {
             this.peers[announce.destination_hash] = announce;
         },
         onPeerClick: function(peer) {
+
+            // update selected peer
             this.selectedPeer = peer;
+
+            // update current route
+            this.$router.replace({
+                name: "messages",
+                params: {
+                    destinationHash: peer.destination_hash,
+                },
+            });
+
         },
         onConversationClick: function(conversation) {
 
@@ -222,6 +233,17 @@ export default {
             this.$refs["conversation-viewer"].markConversationAsRead(conversation);
 
         },
+        onCloseConversationViewer: function() {
+
+            // clear selected peer
+            this.selectedPeer = null;
+
+            // update current route
+            this.$router.replace({
+                name: "messages",
+            });
+
+        },
     },
     watch: {
         conversations() {

From 558e4c8b3df268bec711cb0e05137a856dc72060 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 21 Jan 2025 23:32:48 +1300
Subject: [PATCH 005/131] use isActive instead of isExactActive to allow url
 props to still show link as active

---
 src/frontend/components/SidebarLink.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/SidebarLink.vue b/src/frontend/components/SidebarLink.vue
index 50e0dc8..c3d97d6 100644
--- a/src/frontend/components/SidebarLink.vue
+++ b/src/frontend/components/SidebarLink.vue
@@ -1,11 +1,11 @@
 <template>
-    <RouterLink :to="to" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
+    <RouterLink :to="to" v-slot="{ href, route, navigate, isActive }" custom>
         <a 
             :href="href" 
             @click="handleNavigate($event, navigate)" 
             type="button" 
             :class="[ 
-                isExactActive 
+                isActive
                     ? 'bg-blue-100 text-blue-800 group:text-blue-800 dark:bg-zinc-800 dark:text-blue-300' 
                     : 'hover:bg-gray-100 dark:hover:bg-zinc-700'
             ]" 

From 6af4e53de459d899f6739024688598004f82a5e6 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 21 Jan 2025 23:58:43 +1300
Subject: [PATCH 006/131] add ability to double click a nomadnetwork node in
 network visualiser to open the browser

---
 .../network-visualiser/NetworkVisualiser.vue  | 13 ++++
 .../nomadnetwork/NomadNetworkPage.vue         | 72 +++++++++++++++++--
 src/frontend/main.js                          |  3 +-
 3 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/src/frontend/components/network-visualiser/NetworkVisualiser.vue b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
index 9836536..2d3512e 100644
--- a/src/frontend/components/network-visualiser/NetworkVisualiser.vue
+++ b/src/frontend/components/network-visualiser/NetworkVisualiser.vue
@@ -202,6 +202,19 @@ export default {
 
                     }
 
+                    // handle double click on nomadnetwork.node node
+                    if(announce.aspect === "nomadnetwork.node"){
+
+                        // go to nomadnetwork page for this destination hash
+                        this.$router.push({
+                            name: "nomadnetwork",
+                            params: {
+                                destinationHash: announce.destination_hash,
+                            },
+                        });
+
+                    }
+
                 }
 
             });
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index c79fe76..0633845 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -19,7 +19,7 @@
 
             <!-- close button -->
             <div class="my-auto ml-auto mr-2">
-                <div @click="selectedNode = null" class="cursor-pointer">
+                <div @click="onCloseNodeViewer" class="cursor-pointer">
                     <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
                         <div>
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
@@ -33,7 +33,7 @@
 
         <!-- browser navigation -->
         <div class="flex w-full border-gray-300 dark:border-zinc-800 border-b p-2">
-            <button @click="loadNodePage(selectedNode.destination_hash, '/page/index.mu')" type="button" class="my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
+            <button @click="loadNodePage(selectedNode.destination_hash, defaultNodePagePath)" type="button" class="my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                     <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clip-rule="evenodd" />
                 </svg>
@@ -141,6 +141,9 @@ export default {
     components: {
         NomadNetworkSidebar,
     },
+    props: {
+        destinationHash: String,
+    },
     data() {
         return {
 
@@ -149,6 +152,7 @@ export default {
             selectedNodePath: null,
 
             isLoadingNodePage: false,
+            defaultNodePagePath: "/page/index.mu",
             nodePageRequestSequence: 0,
             nodePagePath: null,
             nodePagePathUrlInput: null,
@@ -157,7 +161,6 @@ export default {
             nodePagePathHistory: [],
             nodePageCache: {},
 
-
             isDownloadingNodeFile: false,
             nodeFilePath: null,
             nodeFileProgress: 0,
@@ -181,6 +184,15 @@ export default {
             this.onNodePageUrlClick(url, options);
         };
 
+        // load nomadnetwork node if a destination hash was provided on page load
+        if(this.destinationHash){
+            (async () => {
+                // fetch updated announce as we are probably loading node page before we loaded the announces list
+                await this.getNomadnetworkNodeAnnounce(this.destinationHash);
+                await this.onNodePageUrlClick(`${this.destinationHash}:${this.defaultNodePagePath}`);
+            })();
+        }
+
         this.getNomadnetworkNodeAnnounces();
 
     },
@@ -293,6 +305,28 @@ export default {
                 console.log(e);
             }
         },
+        async getNomadnetworkNodeAnnounce(destinationHash) {
+            try {
+
+                // fetch announces for "nomadnetwork.node" aspect
+                const response = await window.axios.get(`/api/v1/announces`, {
+                    params: {
+                        destination_hash: destinationHash,
+                        limit: 1,
+                    },
+                });
+
+                // update ui
+                const nodeAnnounces = response.data.announces;
+                for(const nodeAnnounce of nodeAnnounces){
+                    this.updateNodeFromAnnounce(nodeAnnounce);
+                }
+
+            } catch(e) {
+                // do nothing if failed to load announce
+                console.log(e);
+            }
+        },
         updateNodeFromAnnounce: function(announce) {
             this.nodes[announce.destination_hash] = announce;
         },
@@ -435,9 +469,9 @@ export default {
                 // remove leading ":"
                 var path = url.substring(1);
 
-                // if page path is empty we should load "/page/index.mu"
+                // if page path is empty we should load default page path
                 if(path === ""){
-                    path = "/page/index.mu";
+                    path = this.defaultNodePagePath;
                 }
 
                 return {
@@ -467,7 +501,7 @@ export default {
             if(url.length === 32){
                 return {
                     destination_hash: url,
-                    path: "/page/index.mu",
+                    path: this.defaultNodePagePath,
                 };
             }
 
@@ -639,8 +673,32 @@ export default {
 
         },
         onNodeClick: function(node) {
+
+            // update selected node
             this.selectedNode = node;
-            this.loadNodePage(node.destination_hash, "/page/index.mu");
+
+            // update current route
+            this.$router.replace({
+                name: "nomadnetwork",
+                params: {
+                    destinationHash: node.destination_hash,
+                },
+            });
+
+            // load default node page
+            this.loadNodePage(node.destination_hash, this.defaultNodePagePath);
+
+        },
+        onCloseNodeViewer: function() {
+
+            // clear selected node
+            this.selectedNode = null;
+
+            // update current route
+            this.$router.replace({
+                name: "nomadnetwork",
+            });
+
         },
         getNomadnetPageDownloadCallbackKey: function(destinationHash, pagePath) {
             return `${destinationHash}:${pagePath}`;
diff --git a/src/frontend/main.js b/src/frontend/main.js
index 664cf68..dbb5ca3 100644
--- a/src/frontend/main.js
+++ b/src/frontend/main.js
@@ -57,7 +57,8 @@ const router = createRouter({
         },
         {
             name: "nomadnetwork",
-            path: '/nomadnetwork',
+            path: '/nomadnetwork/:destinationHash?',
+            props: true,
             component: defineAsyncComponent(() => import("./components/nomadnetwork/NomadNetworkPage.vue")),
         },
         {

From b215c4ac31703845b631e0bab0ea72969d1f5e4e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Wed, 22 Jan 2025 00:03:38 +1300
Subject: [PATCH 007/131] update router url when a new nomadnetwork page is
 loaded

---
 .../components/nomadnetwork/NomadNetworkPage.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 0633845..657c10c 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -344,6 +344,14 @@ export default {
         },
         async loadNodePage(destinationHash, pagePath, fieldData = null, addToHistory = true, loadFromCache = true) {
 
+            // update current route
+            this.$router.replace({
+                name: "nomadnetwork",
+                params: {
+                    destinationHash: destinationHash,
+                },
+            });
+
             // get new sequence for this page load
             const seq = ++this.nodePageRequestSequence;
 
@@ -677,14 +685,6 @@ export default {
             // update selected node
             this.selectedNode = node;
 
-            // update current route
-            this.$router.replace({
-                name: "nomadnetwork",
-                params: {
-                    destinationHash: node.destination_hash,
-                },
-            });
-
             // load default node page
             this.loadNodePage(node.destination_hash, this.defaultNodePagePath);
 

From 1bad77553cca8bcf1bd32472f0a96fdb94026b59 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Wed, 22 Jan 2025 00:10:27 +1300
Subject: [PATCH 008/131] use router url params for navigating to lxmf
 conversation

---
 src/frontend/components/nomadnetwork/NomadNetworkPage.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 657c10c..c806642 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -581,8 +581,12 @@ export default {
             if(url.startsWith("lxmf@")){
                 const destinationHash = url.replace("lxmf@", "");
                 if(destinationHash.length === 32){
-                    await this.$router.push({ name: "messages" });
-                    GlobalEmitter.emit("compose-new-message", destinationHash);
+                    await this.$router.push({
+                        name: "messages",
+                        params: {
+                            destinationHash: destinationHash,
+                        },
+                    });
                     return;
                 }
             }

From 59eba2ff64289a4b4a28f81699f48625c4a8102f Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 28 Jan 2025 17:54:31 +1300
Subject: [PATCH 009/131] adding a new line in message composer should add it
 where the cursor is

---
 .../components/messages/ConversationViewer.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index d5158e1..ed8c976 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -316,6 +316,7 @@
 
                     <!-- text input -->
                     <textarea
+                        ref="message-input"
                         id="message-input"
                         :readonly="isSendingMessage"
                         v-model="newMessageText"
@@ -1402,7 +1403,22 @@ export default {
             });
         },
         addNewLine: function() {
-            this.newMessageText += "\n";
+
+            // get cursor position for message input
+            const input = this.$refs["message-input"];
+            const cursorPosition = input.selectionStart;
+
+            // insert a newline character after the cursor position
+            const text = this.newMessageText;
+            this.newMessageText = text.slice(0, cursorPosition) + '\n' + text.slice(cursorPosition);
+
+            // move cursor to the position after the added newline
+            const newCursorPosition = cursorPosition + 1;
+            this.$nextTick(() => {
+                input.selectionStart = newCursorPosition;
+                input.selectionEnd = newCursorPosition;
+            });
+
         },
         onEnterPressed: function() {
 

From adad97e9174d14a3f474d06afbfe5b5d46646ebf Mon Sep 17 00:00:00 2001
From: rfnx <zenith777777@protonmail.com>
Date: Sat, 1 Feb 2025 01:09:06 -0500
Subject: [PATCH 010/131] Add additional interfaces to AddInterfacePage

---
 meshchat.py                                   |  204 +-
 .../interfaces/AddInterfacePage.vue           | 1841 ++++++++++++++---
 .../components/interfaces/Interface.vue       |   12 +
 .../components/interfaces/InterfacesPage.vue  |    2 +-
 .../nomadnetwork/NomadNetworkPage.vue         |    2 +-
 src/frontend/js/Utils.js                      |    4 +
 6 files changed, 1731 insertions(+), 334 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index 3ed2e6a..5987477 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -329,8 +329,30 @@ class ReticulumMeshChat:
             if "interfaces" in self.reticulum.config:
                 interfaces = self.reticulum.config["interfaces"]
 
+            processed_interfaces = {}
+            for interface_name, interface in interfaces.items():
+                interface_data = interface.copy()
+
+                # handle sub-interfaces for RNodeMultiInterface
+                if interface_data.get("type") == "RNodeMultiInterface":
+                    sub_interfaces = []
+                    for sub_name, sub_config in interface_data.items():
+                        if sub_name not in {"type", "port", "interface_enabled", "selected_interface_mode",
+                                            "configured_bitrate"}:
+                            if isinstance(sub_config, dict):
+                                sub_config["name"] = sub_name
+                                sub_interfaces.append(sub_config)
+
+                    # add sub-interfaces to the main interface data
+                    interface_data["sub_interfaces"] = sub_interfaces
+
+                    for sub in sub_interfaces:
+                        del interface_data[sub["name"]]
+
+                processed_interfaces[interface_name] = interface_data
+
             return web.json_response({
-                "interfaces": interfaces,
+                "interfaces": processed_interfaces,
             })
 
         # enable reticulum interface
@@ -443,11 +465,32 @@ class ReticulumMeshChat:
             if "enabled" not in interface_details and "interface_enabled" not in interface_details:
                 interface_details["interface_enabled"] = "true"
 
+            # additional AutoInterface options
+            if interface_type == "AutoInterface":
+                if data.get("group_id"):
+                    interface_details["group_id"] = data.get("group_id")
+                if data.get("multicast_address_type"):
+                    interface_details["multicast_address_type"] = data.get("multicast_address_type")
+                if data.get("devices"):
+                    interface_details["devices"] = data.get("devices")
+                if data.get("ignored_devices"):
+                    interface_details["ignored_devices"] = data.get("ignored_devices")
+                if data.get("discovery_scope"):
+                    interface_details["discovery_scope"] = data.get("discovery_scope")
+                if data.get("discovery_port"):
+                    interface_details["discovery_port"] = data.get("discovery_port")
+                if data.get("data_port"):
+                    interface_details["data_port"] = data.get("data_port")
+
+
             # handle tcp client interface
             if interface_type == "TCPClientInterface":
 
                 interface_target_host = data.get('target_host')
                 interface_target_port = data.get('target_port')
+                # optional parameters for kiss_framing and i2p tunnelling
+                interface_kiss_framing = data.get('kiss_framing')
+                interface_i2p_tunneled = data.get('i2p_tunneled')
 
                 # ensure target host provided
                 if interface_target_host is None or interface_target_host == "":
@@ -463,6 +506,13 @@ class ReticulumMeshChat:
 
                 interface_details["target_host"] = data.get('target_host')
                 interface_details["target_port"] = data.get('target_port')
+                interface_details["kiss_framing"] = interface_kiss_framing
+                interface_details["i2p_tunneled"] = interface_i2p_tunneled
+
+                # handle I2P interface
+            if interface_type == "I2PInterface":
+                interface_details['connectable'] = "True"
+                interface_details["peers"] = data.get('peers')
 
             # handle tcp server interface
             if interface_type == "TCPServerInterface":
@@ -470,6 +520,9 @@ class ReticulumMeshChat:
                 interface_listen_ip = data.get('listen_ip')
                 interface_listen_port = data.get('listen_port')
 
+                interface_network_device = data.get('device')
+                interface_prefer_ipv6 = data.get('prefer_ipv6')
+
                 # ensure listen ip provided
                 if interface_listen_ip is None or interface_listen_ip == "":
                     return web.json_response({
@@ -485,6 +538,11 @@ class ReticulumMeshChat:
                 interface_details["listen_ip"] = data.get('listen_ip')
                 interface_details["listen_port"] = data.get('listen_port')
 
+                if interface_network_device is not None and interface_network_device != "":
+                    interface_details["device"] = interface_network_device
+                if interface_prefer_ipv6 is not None and interface_prefer_ipv6 != "" and interface_prefer_ipv6 != False:
+                    interface_details["prefer_ipv6"] = True
+
             # handle udp interface
             if interface_type == "UDPInterface":
 
@@ -492,6 +550,7 @@ class ReticulumMeshChat:
                 interface_listen_port = data.get('listen_port')
                 interface_forward_ip = data.get('forward_ip')
                 interface_forward_port = data.get('forward_port')
+                interface_network_device = data.get('device')
 
                 # ensure listen ip provided
                 if interface_listen_ip is None or interface_listen_ip == "":
@@ -522,6 +581,9 @@ class ReticulumMeshChat:
                 interface_details["forward_ip"] = data.get('forward_ip')
                 interface_details["forward_port"] = data.get('forward_port')
 
+                if interface_network_device is not None and interface_network_device != "":
+                    interface_details["network_device"] = interface_network_device
+
             # handle rnode interface
             if interface_type == "RNodeInterface":
 
@@ -575,6 +637,132 @@ class ReticulumMeshChat:
                 interface_details["spreadingfactor"] = interface_spreadingfactor
                 interface_details["codingrate"] = interface_codingrate
 
+            # Handle RNode Multi Interface
+            if interface_type == "RNodeMultiInterface":
+                interface_port = data.get("port")
+                sub_interfaces = data.get("sub_interfaces", [])
+
+                if not interface_port:
+                    return web.json_response({"message": "Port is required"}, status=422)
+
+                if not isinstance(sub_interfaces, list) or not sub_interfaces:
+                    return web.json_response({"message": "At least one sub-interface is required"}, status=422)
+
+                interface_details["type"] = interface_type
+                interface_details["interface_enabled"] = True
+                interface_details["port"] = interface_port
+
+                for idx, sub in enumerate(sub_interfaces):
+                    # validate required fields for each sub-interface
+                    required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor",
+                                                    "codingrate",
+                                                    "vport"]
+                    missing_fields = [field for field in required_subinterface_fields if not sub.get(field)]
+                    if missing_fields:
+                        return web.json_response({
+                            "message": f"Sub-interface {idx + 1} is missing required field(s): {', '.join(missing_fields)}"
+                        }, status=422)
+
+                    sub_interface_name = sub.get("name")
+                    interface_details[sub_interface_name] = {
+                        "interface_enabled": "true",
+                        "frequency": int(sub["frequency"]),
+                        "bandwidth": int(sub["bandwidth"]),
+                        "txpower": int(sub["txpower"]),
+                        "spreadingfactor": int(sub["spreadingfactor"]),
+                        "codingrate": int(sub["codingrate"]),
+                        "vport": int(sub["vport"]),
+                    }
+
+                interfaces[interface_name] = interface_details
+
+            # Handle Serial, KISS, and AX25KISS
+            if interface_type == "SerialInterface" or interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
+                interface_port = data.get('port')
+                interface_speed = data.get('speed')
+
+                required_fields = {
+                    interface_port: "Port is required",
+                    interface_speed: "Serial speed is required",
+                }
+
+                for field, error_message in required_fields.items():
+                    if field is None or field == "":
+                        return web.json_response({
+                            "message": error_message,
+                        }, status=422)
+
+                interface_details["port"] = interface_port
+                interface_details['connectable'] = "True"
+                interface_details["type"] = interface_type
+                interface_details["interface_enabled"] = True
+
+                interface_details["speed"] = interface_speed
+                interface_details["databits"] = data.get('databits')
+                interface_details['parity'] = data.get('parity')
+                interface_details['stopbits'] = data.get('stopbits')
+
+                # Handle KISS and AX25KISS specific options
+                if (interface_type == "KISSInterface" or interface_type == "AX25KISSInterface"):
+                    interface_details["preamble"] = data.get('preamble')
+                    interface_details["txtail"] = data.get('txtail')
+                    interface_details['persistence'] = data.get('persistence')
+                    interface_details['slottime'] = data.get('slottime')
+                    interface_details['callsign'] = data.get('callsign')
+                    interface_details['ssid'] = data.get('ssid')
+
+            # RNode Airtime limits and station ID
+            callsign = data.get('callsign')
+            id_interval = data.get('id_interval')
+            airtime_limit_long = data.get('airtime_limit_long')
+            airtime_limit_short = data.get('airtime_limit_short')
+
+            if callsign is not None and callsign != "":
+                interface_details["callsign"] = callsign
+            if id_interval is not None and id_interval != "":
+                interface_details["id_interval"] = id_interval
+            if airtime_limit_long is not None and airtime_limit_long != "":
+                interface_details["airtime_limit_long"] = airtime_limit_long
+            if airtime_limit_short is not None and airtime_limit_short != "":
+                interface_details["airtime_limit_short"] = airtime_limit_short
+
+            # Handle Pipe Interface
+            if interface_type == "PipeInterface":
+                interface_command = data.get('command')
+                interface_respawn_delay = data.get('respawn_delay')
+
+                required_fields = {
+                    interface_command: "Command is required",
+                    interface_respawn_delay: "Respawn delay is required",
+                }
+
+                for field, error_message in required_fields.items():
+                    if field is None or field == "":
+                        return web.json_response({
+                            "message": error_message,
+                        }, status=422)
+
+                interface_details["command"] = interface_command
+                interface_details["respawn_delay"] = interface_respawn_delay
+
+            # Common interface options
+            inferred_bitrate = data.get('bitrate')
+            transport_mode = data.get('mode')
+            network_name = data.get('network_name')
+            ifac_passphrase = data.get('passphrase')
+            ifac_size = data.get('ifac_size')
+
+            if inferred_bitrate is not None and inferred_bitrate != "":
+                interface_details["bitrate"] = inferred_bitrate
+            if transport_mode is not None and transport_mode != "":
+                interface_details["mode"] = transport_mode
+            if network_name is not None and network_name != "":
+                interface_details["network_name"] = network_name
+            if ifac_passphrase is not None and ifac_passphrase != "":
+                interface_details["passphrase"] = ifac_passphrase
+            if ifac_size is not None and ifac_size != "":
+                interface_details["ifac_size"] = ifac_size
+
             # merge new interface into existing interfaces
             interfaces[interface_name] = interface_details
             self.reticulum.config["interfaces"] = interfaces
@@ -619,7 +807,19 @@ class ReticulumMeshChat:
                     for key, value in interface.items():
                         output.append(f"    {key} = {value}")
                     output.append("")
-                
+
+                    # Handle sub-interfaces for RNodeMultiInterface
+                    if interface.get("type") == "RNodeMultiInterface":
+                        for sub_name, sub_config in interface.items():
+                            if sub_name in {"type", "port", "interface_enabled"}:
+                                continue
+                            if isinstance(sub_config, dict):
+                                output.append(f"  [[[ {sub_name} ]]]")
+                                for sub_key, sub_value in sub_config.items():
+                                    output.append(f"      {sub_key} = {sub_value}")
+                                output.append("")
+
+
                 return web.Response(
                     text="\n".join(output),
                     content_type="text/plain",
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 1ffafc2..f54580c 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -1,174 +1,1023 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
-        <div class="overflow-y-auto p-2 space-y-2">
+  <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
+    <div class="overflow-y-auto p-2 space-y-2">
 
-            <!-- community interfaces -->
-            <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces" class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
-                <div class="flex p-2">
-                    <div class="my-auto mr-auto">
-                        <div class="font-bold dark:text-white">Community Interfaces</div>
-                        <div class="text-sm  dark:text-gray-100">These TCP interfaces serve as a quick way to test Reticulum. We suggest running your own as these may not always be available.</div>
-                    </div>
-                    <div class="my-auto ml-2">
-                        <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button" class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                                <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 class="divide-y divide-gray-200 dark:text-white">
-
-                    <div class="flex px-2 py-1">
-                        <div class="my-auto mr-auto">
-                            <div>RNS Testnet Amsterdam</div>
-                            <div class="text-xs">amsterdam.connect.reticulum.network:4965</div>
-                        </div>
-                        <div class="ml-2 my-auto">
-                            <button @click="newInterfaceName='RNS Testnet Amsterdam';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='amsterdam.connect.reticulum.network';newInterfaceTargetPort='4965'" type="button" class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                                <span>Use Interface</span>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="flex px-2 py-1">
-                        <div class="my-auto mr-auto">
-                            <div>RNS Testnet BetweenTheBorders</div>
-                            <div class="text-xs">reticulum.betweentheborders.com:4242</div>
-                        </div>
-                        <div class="ml-2 my-auto">
-                            <button @click="newInterfaceName='RNS Testnet BetweenTheBorders';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='reticulum.betweentheborders.com';newInterfaceTargetPort='4242'" type="button" class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                                <span>Use Interface</span>
-                            </button>
-                        </div>
-                    </div>
-
-                </div>
+      <!-- community interfaces -->
+      <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces"
+           class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+        <div class="flex p-2">
+          <div class="my-auto mr-auto">
+            <div class="font-bold dark:text-white">Community Interfaces</div>
+            <div class="text-sm  dark:text-gray-100">These TCP interfaces serve as a quick way to test Reticulum. We
+              suggest running your own as these may not always be available.
             </div>
+          </div>
+          <div class="my-auto ml-2">
+            <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button"
+                    class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <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 class="divide-y divide-gray-200 dark:text-white">
 
-            <!-- add interface form -->
-            <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-950">
-                <div class="p-2 font-bold dark:text-white">
-                    <span v-if="isEditingInterface">Edit Interface</span>
-                    <span v-else>Add Interface</span>
-                </div>
-                <div class="p-2 space-y-3">
-
-                    <!-- interface name -->
-                    <div>
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
-                        <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name" v-model="newInterfaceName" class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white" :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
-                        <div class="text-xs text-gray-600">Interface names must be unique.</div>
-                    </div>
-
-                    <!-- interface type -->
-                    <div class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
-                        <select v-model="newInterfaceType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                            <option disabled selected>--</option>
-                            <option value="AutoInterface">AutoInterface</option>
-                            <option value="RNodeInterface">RNodeInterface</option>
-                            <option value="TCPClientInterface">TCPClientInterface</option>
-                            <option value="TCPServerInterface">TCPServerInterface</option>
-                            <option value="UDPInterface">UDPInterface</option>
-                        </select>
-                        <div class="text-xs text-gray-600">
-                            Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html" target="_blank">Reticulum Docs: Configuring Interfaces</a>
-                        </div>
-                    </div>
-
-                    <!-- interface target host -->
-                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
-                        <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface target port -->
-                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface listen ip -->
-                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
-                        <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface listen port -->
-                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface forward ip -->
-                    <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
-                        <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface listen port -->
-                    <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface port -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
-                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
-                        </select>
-                    </div>
-
-                    <!-- interface frequency -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency (Hz)</label>
-                        <input type="number" v-model="newInterfaceFrequency" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                        <div class="text-xs text-gray-600">{{ formatFrequency(newInterfaceFrequency) }}</div>
-                    </div>
-
-                    <!-- interface bandwidth -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
-                        <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
-                        </select>
-                    </div>
-
-                    <!-- interface txpower -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
-                        <input v-model="newInterfaceTxpower" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                    </div>
-
-                    <!-- interface spreading factor -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
-                        <select v-model="newInterfaceSpreadingFactor" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
-                        </select>
-                    </div>
-
-                    <!-- interface coding rate -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
-                        <select v-model="newInterfaceCodingRate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{ codingrate }}</option>
-                        </select>
-                    </div>
-
-                    <!-- add button -->
-                    <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                        <span v-if="isEditingInterface">Save Interface</span>
-                        <span v-else>Add Interface</span>
-                    </button>
-
-                </div>
+          <div class="flex px-2 py-1">
+            <div class="my-auto mr-auto">
+              <div>RNS Testnet Amsterdam</div>
+              <div class="text-xs">amsterdam.connect.reticulum.network:4965</div>
             </div>
+            <div class="ml-2 my-auto">
+              <button
+                  @click="newInterfaceName='RNS Testnet Amsterdam';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='amsterdam.connect.reticulum.network';newInterfaceTargetPort='4965'"
+                  type="button"
+                  class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                <span>Use Interface</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="flex px-2 py-1">
+            <div class="my-auto mr-auto">
+              <div>RNS Testnet BetweenTheBorders</div>
+              <div class="text-xs">reticulum.betweentheborders.com:4242</div>
+            </div>
+            <div class="ml-2 my-auto">
+              <button
+                  @click="newInterfaceName='RNS Testnet BetweenTheBorders';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='reticulum.betweentheborders.com';newInterfaceTargetPort='4242'"
+                  type="button"
+                  class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                <span>Use Interface</span>
+              </button>
+            </div>
+          </div>
 
         </div>
+      </div>
+
+      <!-- add interface form -->
+      <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+        <div class="p-2 font-bold dark:text-white">
+          <span v-if="isEditingInterface">Edit Interface</span>
+          <span v-else>Add Interface</span>
+        </div>
+        <div class="p-2 space-y-3">
+          <!-- iGeneric interface settings -->
+          <!-- interface name -->
+          <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
+            <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name"
+                   v-model="newInterfaceName"
+                   class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                   :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
+            <div class="text-xs text-gray-600 dark:text-zinc-300">Interface names must be unique.</div>
+          </div>
+
+          <!-- interface type -->
+          <div class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
+            <select v-model="newInterfaceType"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+              <option disabled selected>--</option>
+              <option value="AutoInterface">Auto Interface</option>
+              <option disabled selected>RNodes</option>
+              <option value="RNodeInterface">RNode Interface</option>
+              <option value="RNodeMultiInterface">RNode Multi Interface</option>
+              <option disabled selected>IP Networks</option>
+              <option value="TCPClientInterface">TCP Client Interface</option>
+              <option value="TCPServerInterface">TCP Server Interface</option>
+              <option value="UDPInterface">UDP Interface</option>
+              <option value="I2PInterface">I2P Interface</option>
+              <option disabled selected>Hardware</option>
+              <option value="SerialInterface">Serial Interface</option>
+              <option value="KISSInterface">KISS Interface</option>
+              <option hidden value="AX25KISSInterface">AX.25 KISS Interface</option>
+              <option disabled selected>Other</option>
+              <option value="PipeInterface">Pipe Interface</option>
+            </select>
+            <div class="text-xs text-gray-600 dark:text-zinc-300">
+              Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html"
+                            target="_blank">Reticulum Docs: Configuring Interfaces</a>
+            </div>
+          </div>
+
+
+              <div v-if="newInterfaceType === 'AutoInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional AutoInterface Settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+            >
+               <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional</p>
+                <div class="flex-1">
+                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Group ID</label>
+                    <input
+                        type="text"
+                        v-model="newInterfaceGroupID"
+                        placeholder="reticulum"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                    />
+                </div>
+
+                 <div class="flex-1">
+                      <label class="text-sm dark:text-zinc-100">Multicast Address Type</label>
+                      <select
+                          v-model="newInterfaceMulticastAddressType"
+                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                      >
+                        <option value="permanent">
+                            Permanent
+                        </option>
+                         <option value="temporary">
+                            Temporary
+                        </option>
+                      </select>
+                 </div>
+
+
+                <div class="flex items-center space-x-4 mt-4">
+                  <div class="flex-1">
+                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network devices</label>
+                    <input
+                        type="text"
+                        v-model="newInterfaceDevices"
+                        placeholder="wlan0,eth1"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                    />
+                  </div>
+                  <div class="flex-1">
+                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Ignored Devices</label>
+                    <input
+                        type="text"
+                        v-model="newInterfaceIgnoredDevices"
+                        placeholder="tun0,eth0"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                    />
+                  </div>
+              </div>
+
+             <div class="flex items-center space-x-4 mt-4">
+              <div class="flex-1">
+                <label class="text-sm dark:text-zinc-100">Discovery Scope</label>
+                      <select
+                          v-model="newInterfaceDiscoveryScope"
+                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                      >
+                        <option value="global">
+                            Global
+                        </option>
+                        <option value="admin">
+                            Admin
+                        </option>
+                        <option value="organisation">
+                            Organisation
+                        </option>
+                        <option value="site">
+                            Site
+                        </option>
+                        <option value="link">
+                            Link
+                        </option>
+
+                      </select>
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Discovery Port</label>
+                <input
+                    type="number"
+                    v-model="newInterfaceDiscoveryPort"
+                    placeholder="48555"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Data Port</label>
+                <input
+                    type="number"
+                    v-model="newInterfaceDataPort"
+                    placeholder="49555"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+             </div>
+           </div>
+          </div>
+
+          <!-- TCPClientInterface -->
+          <!-- interface target host -->
+          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
+            <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- interface target port -->
+          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
+            <input type="text" placeholder="1234" v-model="newInterfaceTargetPort"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional TCP Client Interface settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+            >
+              <div class="flex items-start">
+                <div class="flex flex-col">
+                  <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
+                    Enable KISS Framing
+                  </label>
+                  <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems.
+                                     For KISS connections through serial hardware select "KISS Interface" as the interface type.
+                                </span>
+                </div>
+                <input
+                    id="kiss-framing"
+                    type="checkbox"
+                    v-model="newInterfaceKISSFramingEnabled"
+                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                />
+              </div>
+              <div class="flex items-start">
+                <div class="flex flex-col">
+                  <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
+                    Enable I2P tunneling
+                  </label>
+                  <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface
+                                </span>
+                </div>
+                <input
+                    id="i2p-tunneled"
+                    type="checkbox"
+                    v-model="newInterfaceI2PTunnelingEnabled"
+                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                />
+              </div>
+
+            </div>
+          </div>
+
+          <!-- TCPServerInterface -->
+          <!-- interface listen ip -->
+          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
+            <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- interface listen port -->
+          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
+            <input type="text" placeholder="1234" v-model="newInterfaceListenPort"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+
+          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional Server Interface settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+
+              <div class="mb-2">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
+                <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Binds the interface to a specific network interface
+                </span>
+                <input type="text" placeholder="eth0" v-model="newInterfaceNetworkDevice"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              </div>
+              <div class="flex items-start">
+                <div class="flex flex-col">
+                  <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
+                    Prefer IPv6
+                  </label>
+                  <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Binds the TCP Server Interface to an IPv6 address
+                                </span>
+                </div>
+                <input
+                    id="prefer-ipv6"
+                    type="checkbox"
+                    value="1"
+                    v-model="newInterfacePreferIPV6"
+                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                />
+              </div>
+            </div>
+
+          </div>
+
+          <!-- UDPInterface -->
+          <!-- interface forward ip -->
+          <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
+            <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- interface listen port -->
+          <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
+            <input type="text" placeholder="1234" v-model="newInterfaceForwardPort"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- I2PInterface -->
+          <div v-if="newInterfaceType === 'I2PInterface'" class="mb-4">
+                    <span class="text-sm text-gray-500 dark:text-zinc-300">
+                        ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.
+                    </span>
+
+            <div class="mt-4">
+              <div
+                  @click="toggleI2PPeerAccordion"
+                  class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+              >
+                <span class="font-semibold text-gray-900 dark:text-gray-100">Manage Peers</span>
+                <span
+                    class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200"
+                    :class="{ 'rotate-180': I2PSettings.showPeerAccordion }"
+                >
+                                ▲
+                            </span>
+              </div>
+
+              <div
+                  v-show="I2PSettings.showPeerAccordion"
+                  class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+              >
+                <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index"
+                     class="flex items-center space-x-2">
+                  <input
+                      type="text"
+                      v-model="I2PSettings.newInterfacePeers[index]"
+                      placeholder="Enter peer address (ex: 5urvjicpzi7q3ybztsef4i5ow2aq4soktfj7zedz53s47r54jnqq.b32.i2p)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                  />
+                  <button
+                      @click="removeI2PPeer(index)"
+                      type="button"
+                      class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg"
+                  >
+                    Remove
+                  </button>
+                </div>
+                <button
+                    @click="addI2PPeer('')"
+                    type="button"
+                    class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg"
+                >
+                  Add Peer
+                </button>
+              </div>
+            </div>
+          </div>
+
+
+          <!-- RNode interface -->
+          <!-- interface port -->
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+            <select v-model="newInterfacePort"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
+                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
+              </option>
+            </select>
+          </div>
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
+            <!-- interface Frequency -->
+            <div class="flex-1">
+              <div class="mb-2">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency</label>
+                <div class="flex items-center gap-2">
+                  <div class="flex flex-col">
+                    <input
+                        type="number"
+                        v-model.number="RNodeGHzValue"
+                        min="0"
+                        placeholder="GHz"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    />
+                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">GHz</label>
+                  </div>
+                  <div class="flex flex-col">
+                    <input
+                        type="number"
+                        v-model.number="RNodeMHzValue"
+                        min="0"
+                        placeholder="MHz"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    />
+                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">MHz</label>
+                  </div>
+                  <div class="flex flex-col">
+                    <input
+                        type="number"
+                        v-model.number="RNodekHzValue"
+                        min="0"
+                        placeholder="kHz"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    />
+                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">kHz</label>
+                  </div>
+                </div>
+                <div class="text-sm text-gray-600 dark:text-zinc-100 mt-2 font-bold">
+                  Selected Frequency: {{ formattedFrequency }}
+                </div>
+              </div>
+            </div>
+
+            <!-- interface Bandwidth -->
+            <div class="flex-1">
+              <div class="mb-2">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
+                <select
+                    v-model="newInterfaceBandwidth"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                >
+                  <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">
+                    {{ bandwidth / 1000 }} KHz
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+
+          <!-- interface txpower -->
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
+            <input v-model="newInterfaceTxpower" type="number"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+          </div>
+
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
+            <!-- interface spreading factor -->
+            <div class="flex-1">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
+              <select v-model="newInterfaceSpreadingFactor"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">
+                  {{ spreadingfactor }}
+                </option>
+              </select>
+            </div>
+
+            <!-- interface coding rate -->
+            <div class="flex-1">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
+              <select v-model="newInterfaceCodingRate"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{
+                    codingrate
+                  }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <!--          RNode LoRa parameters-->
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
+
+            <div
+                @click="toggleRNodeLoRaParameters"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Show on-air RNode bitrate & link budget</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showRNodeLoRaParameters }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showRNodeLoRaParameters"
+                class="mt-3 space-y-6 p-6 border border-gray-300 rounded-lg bg-gray-50 dark:bg-zinc-900 dark:border-zinc-700"
+            >
+              <div class="space-y-2">
+                <div class="flex items-start space-x-2">
+                  <div class="w-1/4">
+                    <label class="block text-sm font-medium text-gray-800 dark:text-white">
+                      Antenna Gain (dBi)
+                    </label>
+                    <input
+                        type="number"
+                        v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
+                        placeholder="Enter gain"
+                        class="w-1/2 bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"
+                    />
+                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1
+                      dBi of
+                      gain, where a directional Yagi might have 5 dBi of gain.</p>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center">
+                  On-Air Calculations
+                </h3>
+                <div class="grid grid-cols-3 gap-4 text-center mt-2">
+                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
+                    <div class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ RNodeInterfaceLoRaParameters.sensitivity }}
+                    </div>
+                  </div>
+                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
+                    <div class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ RNodeInterfaceLoRaParameters.dataRate }}
+                    </div>
+                  </div>
+                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
+                    <div class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ RNodeInterfaceLoRaParameters.linkBudget }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional RNode Interface Settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+
+              <div class="flex items-center space-x-4">
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                  <input
+                      type="text"
+                      v-model="newInterfaceCallsign"
+                      placeholder="Enter callsign"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                  <input
+                      type="number"
+                      v-model="newInterfaceIDInterval"
+                      placeholder="Enter interval (seconds)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+              </div>
+
+              <div class="flex items-center space-x-4">
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit
+                    (Short)</label>
+                  <input
+                      type="number"
+                      v-model="newInterfaceAirtimeLimitShort"
+                      placeholder="Enter short airtime limit (seconds)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Long)</label>
+                  <input
+                      type="number"
+                      v-model="newInterfaceAirtimeLimitLong"
+                      placeholder="Enter long airtime limit (seconds)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <!--    RNodeMultiInterface      -->
+          <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom
+              devices
+              with multiple LoRa transceivers such as the openCom XL. </p>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+            <select v-model="newInterfacePort"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
+                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
+              </option>
+            </select>
+          </div>
+          <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-4">
+            <div
+                @click="toggleRNodeSubInterfaces"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+              <span class="font-semibold text-gray-900 dark:text-gray-100">Manage RNode Subinterfaces</span>
+              <span
+                  class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200"
+                  :class="{ 'rotate-180': showRNodeSubInterfaces }">
+            ▲
+          </span>
+            </div>
+            <div
+                v-show="showRNodeSubInterfaces"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+              <div
+                  v-for="(sub, idx) in RNodeMultiInterface.subInterfaces"
+                  :key="idx"
+                  class="space-y-2 border-b border-gray-200 dark:border-zinc-700 pb-4 mb-4">
+                <input
+                    v-model="sub.name"
+                    type="text"
+                    placeholder="Subinterface Name"
+                    class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                <div class="flex gap-2">
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Frequency (Hz)</label>
+                    <input
+                        v-model.number="sub.frequency"
+                        type="number"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                  </div>
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Bandwidth</label>
+                    <select
+                        v-model="sub.bandwidth"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    >
+                      <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">
+                        {{ bandwidth / 1000 }} KHz
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <div class="flex gap-2">
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Spreading Factor</label>
+                    <select
+                        v-model.number="sub.spreadingfactor"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                      <option
+                          v-for="sf in RNodeInterfaceDefaults.spreadingfactors"
+                          :key="sf"
+                          :value="sf">
+                        {{ sf }}
+                      </option>
+                    </select>
+                  </div>
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Coding Rate</label>
+                    <select
+                        v-model.number="sub.codingrate"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                      <option
+                          v-for="cr in RNodeInterfaceDefaults.codingrates"
+                          :key="cr"
+                          :value="cr">
+                        {{ cr }}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <div class="flex gap-2 items-center">
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">TX Power (dBm)</label>
+                    <input
+                        v-model.number="sub.txpower"
+                        type="number"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                  </div>
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Virtual Port</label>
+                    <input
+                        v-model.number="sub.vport"
+                        type="number"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                  </div>
+                </div>
+                <button
+                    @click="removeSubInterface(idx)"
+                    type="button"
+                    class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">
+                  Remove Subinterface
+                </button>
+              </div>
+              <button
+                  @click="addSubInterface"
+                  type="button"
+                  class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">
+                Add Subinterface
+              </button>
+            </div>
+          </div>
+
+          <!--   Serial, KISS, and AX25Kiss         -->
+          <div v-if="['SerialInterface', 'KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
+
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+            <select v-model="newInterfacePort"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
+                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
+              </option>
+            </select>
+
+            <div class="mb-2">
+              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Serial connection baud
+                rate (bps)</label>
+              <input v-model="newInterfaceSpeed" placeholder="115200" type="number"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+            <div class="mt-2">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Databits</label>
+              <input v-model="newInterfaceDatabits" type="number" placeholder="8"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+            <div class="mt-2">
+              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Parity </label>
+              <input v-model="newInterfaceParity" type="number" placeholder=""
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+            <div class="mt-2">
+              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Stopbits</label>
+              <input v-model="newInterfaceStopbits" type="number" placeholder="1"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+          </div>
+          <!--          KISS and AX.25 KISS-->
+          <div v-if="['KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
+
+            <div class="flex items-center">
+              <input
+                  id="use-ax25"
+                  type="checkbox"
+                  :checked="newInterfaceType === 'AX25KISSInterface'"
+                  @click="useKISSAX25"
+                  class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+              />
+              <label for="use-ax25" class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-100">
+                Use AX.25
+              </label>
+            </div>
+            <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">
+              ⓘ Enables AX.25 Framing
+            </span>
+
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  Preamble (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfacePreamble"
+                    type="number"
+                    placeholder="150"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  TX Tail (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfaceTXTail"
+                    type="number"
+                    placeholder="10"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  CDMA Persistence (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfacePersistence"
+                    type="number"
+                    placeholder="200"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  CDMA Slot Time (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfaceSlotTime"
+                    type="number"
+                    placeholder="20"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+            </div>
+            <div class="flex items-center space-x-4 mt-4">
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">SSID</label>
+                <input
+                    type="text"
+                    value="0"
+                    v-model="newInterfaceSSID"
+                    placeholder="Enter SSID"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                <input
+                    type="text"
+                    v-model="newInterfaceCallsign"
+                    placeholder="Enter callsign"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                <input
+                    type="number"
+                    v-model="newInterfaceIDInterval"
+                    placeholder="Enter interval (seconds)"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!--          Pipe Interface-->
+          <div v-if="newInterfaceType === 'PipeInterface'" class="mb-2">
+              <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">
+              ⓘ             Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be used
+            to easily create virtual interfaces, or to interface with custom hardware or other systems.
+            </span>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
+            <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+
+            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay
+              (seconds)</label>
+            <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+
+          </div>
+
+          <!-- Shared interface setings -->
+          <div v-if="newInterfaceType"
+               @click="toggleSharedInterfaceSettings"
+               class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+          >
+            <span class="font-semibold text-gray-900 dark:text-gray-100">Shared Interface Settings</span>
+            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                  :class="{ 'rotate-180': showSharedInterfaceSettings }"
+            >
+                            ▲
+                          </span>
+          </div>
+
+          <div
+              v-show="showSharedInterfaceSettings"
+              class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+          >
+            <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional.</p>
+            <div v-show="transportEnabled" class="mb-4">
+              <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Interface Mode</label>
+              <select
+                  v-model="sharedInterfaceSettings.mode"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+              >
+                <option value="full">Full</option>
+                <option value="gateway">Gateway</option>
+                <option value="access_point">Access Point</option>
+                <option value="roaming">Roaming</option>
+                <option value="boundary">Boundary</option>
+              </select>
+            </div>
+
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Inferred Interface
+                Bitrate</label>
+              <input
+                  v-model="sharedInterfaceSettings.bitrate"
+                  type="number"
+                  placeholder="Enter inferred bitrate"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+              />
+            </div>
+
+            <div class="mb-4">
+              <h3 class="text-lg font-semibold text-gray-900 dark:text-zinc-100 mb-2">IFAC Settings</h3>
+              <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ IFAC (Interface Access Code) settings are used
+                for creating
+                private
+                networks and can be configured on the interface level. </p>
+              <div class="grid grid-cols-3 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
+                  <input
+                      v-model="sharedInterfaceSettings.network_name"
+                      type="text"
+                      placeholder="Enter network name"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
+                  <input
+                      v-model="sharedInterfaceSettings.passphrase"
+                      type="text"
+                      placeholder="Enter passphrase"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
+                  <input
+                      v-model="sharedInterfaceSettings.ifac_size"
+                      type="number"
+                      min="8"
+                      max="512"
+                      placeholder="Enter size (8-512)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+
+        <!-- add button -->
+        <button @click="addInterface" type="button"
+                class="mb-4 bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          <span v-if="isEditingInterface">Save Interface</span>
+          <span v-else>Add Interface</span>
+        </button>
+      </div>
+
     </div>
+  </div>
 </template>
 
 <script>
@@ -176,202 +1025,534 @@ import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
 
 export default {
-    name: 'AddInterfacePage',
-    data() {
-        return {
+  name: 'AddInterfacePage',
+  data() {
+    return {
 
-            isEditingInterface: false,
-            config: null,
+      isEditingInterface: false,
+      showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
+      showSharedInterfaceSettings: false, // shared interface settings like IFAC, bitrate
+      showRNodeLoRaParameters: false, // accordion for displaying RNode physical LoRa parameters
+      showRNodeSubInterfaces: false, // accordion for adding multiple RNode interfaces
 
-            comports: [],
+      appInfo: null,
+      transportEnabled: false,
 
-            newInterfaceName: null,
-            newInterfaceType: null,
+      config: null,
 
-            newInterfaceTargetHost: null,
-            newInterfaceTargetPort: null,
+      comports: [],
 
-            newInterfaceListenIp: null,
-            newInterfaceListenPort: null,
+      newInterfaceName: null,
+      newInterfaceType: null,
 
-            newInterfaceForwardIp: null,
-            newInterfaceForwardPort: null,
+      newInterfaceGroupID: null,
+      newInterfaceMulticastAddressType: null,
+      newInterfaceDevices: null,
+      newInterfaceIgnoredDevices: null,
+      newInterfaceDiscoveryScope: null,
+      newInterfaceDiscoveryPort: null,
+      newInterfaceDataPort: null,
 
-            newInterfacePort: null,
-            newInterfaceFrequency: null,
-            newInterfaceBandwidth: null,
-            newInterfaceTxpower: null,
-            newInterfaceSpreadingFactor: null,
-            newInterfaceCodingRate: null,
+      newInterfaceTargetHost: null,
+      newInterfaceTargetPort: null,
 
-            RNodeInterfaceDefaults: {
-                // bandwidth in hz
-                bandwidths: [
-                    7800, // 7.8 kHz
-                    10400, // 10.4 kHz
-                    15600, // 15.6 kHz
-                    20800, // 20.8 kHz
-                    31250, // 31.25 kHz
-                    41700, // 41.7 kHz
-                    62500, // 62.5 kHz
-                    125000, // 125 kHz
-                    250000, // 250 kHz
-                    500000, // 500 kHz
-                    1625000, // 1625 kHz (for 2.4 GHz SX1280)
-                ],
-                codingrates: [
-                    5, // 4:5
-                    6, // 4:6
-                    7, // 4:7
-                    8, // 4:8
-                ],
-                spreadingfactors: [
-                    5,
-                    6,
-                    7,
-                    8,
-                    9,
-                    10,
-                    11,
-                    12,
-                ],
-            },
+      newInterfaceListenIp: null,
+      newInterfaceListenPort: null,
+      newInterfaceNetworkDevice: null,
+      newInterfacePreferIPV6: null,
+      newInterfaceKISSFramingEnabled: null,
+      newInterfaceI2PTunnelingEnabled: null,
 
-        };
+      sharedInterfaceSettings: {
+        "mode": null,
+        "network_name": null,
+        "passphrase": null,
+        "ifac_size": null,
+      },
+
+      newInterfaceForwardIp: null,
+      newInterfaceForwardPort: null,
+
+      I2PSettings: {
+        showPeerAccordion: false,
+        newInterfacePeers: [],
+      },
+
+      RNodeMultiInterface: {
+        port: null,
+        subInterfaces: [],
+      },
+
+      newInterfacePort: null,
+      RNodeGHzValue: 0,
+      RNodeMHzValue: 0,
+      RNodekHzValue: 0,
+      newInterfaceFrequency: null,
+      newInterfaceBandwidth: null,
+      newInterfaceTxpower: null,
+      newInterfaceSpreadingFactor: null,
+      newInterfaceCodingRate: null,
+
+      // Serial, KISS, and AX25KISS options
+      newInterfaceSpeed: null,
+      newInterfaceDatabits: null,
+      newInterfaceParity: null,
+      newInterfaceStopbits: null,
+
+      // KISS and AX25KISS
+      newInterfacePreamble: null,
+      newInterfaceTXTail: null,
+      newInterfacePersistence: null,
+      newInterfaceSlotTime: null,
+
+      // RNode and KISS
+      newInterfaceCallsign: null,
+      newInterfaceIDInterval: null,
+      newInterfaceFlowControl: null,
+      newInterfaceAirtimeLimitLong: null,
+      newInterfaceAirtimeLimitShort: null,
+
+      // Pipe interface
+      newInterfaceCommand: null,
+      newInterfaceRespawnDelay: null,
+
+      RNodeInterfaceDefaults: {
+        // bandwidth in hz
+        bandwidths: [
+          7800, // 7.8 kHz
+          10400, // 10.4 kHz
+          15600, // 15.6 kHz
+          20800, // 20.8 kHz
+          31250, // 31.25 kHz
+          41700, // 41.7 kHz
+          62500, // 62.5 kHz
+          125000, // 125 kHz
+          250000, // 250 kHz
+          500000, // 500 kHz
+          1625000, // 1625 kHz (for 2.4 GHz SX1280)
+        ],
+        codingrates: [
+          5, // 4:5
+          6, // 4:6
+          7, // 4:7
+          8, // 4:8
+        ],
+        spreadingfactors: [
+          5,
+          6,
+          7,
+          8,
+          9,
+          10,
+          11,
+          12,
+        ],
+      },
+      RNodeInterfaceLoRaParameters: {
+        antennaGain: 0,
+        noiseFloor: 5,
+        sensitivity: null,
+        dataRate: null,
+        linkBudget: null,
+      },
+    };
+  },
+  computed: {
+    formattedFrequency() {
+      const totalHz = this.calculateFrequencyInHz();
+      if (totalHz >= 1e9) {
+        return `${(totalHz / 1e9).toFixed(3)} GHz`;
+      } else if (totalHz >= 1e6) {
+        return `${(totalHz / 1e6).toFixed(3)} MHz`;
+      } else if (totalHz >= 1e3) {
+        return `${(totalHz / 1e3).toFixed(3)} kHz`;
+      }
+      return `${totalHz} Hz`;
     },
-    mounted() {
+  },
+  watch: {
+    newInterfaceBandwidth: "updateRNodeCalculations",
+    newInterfaceSpreadingFactor: "updateRNodeCalculations",
+    newInterfaceCodingRate: "updateRNodeCalculations",
+    newInterfaceTxpower: "updateRNodeCalculations",
+    'RNodeInterfaceLoRaParameters.antennaGain': "updateRNodeCalculations",
+  },
+  mounted() {
+    this.getAppInfo();
+    this.getConfig();
+    this.loadComports();
 
-        this.getConfig();
-        this.loadComports();
+    // check if we are editing an interface
+    const interfaceName = this.$route.query.interface_name;
+    if (interfaceName != null) {
+      this.isEditingInterface = true;
+      this.loadInterfaceToEdit(interfaceName);
+    }
 
-        // check if we are editing an interface
-        const interfaceName = this.$route.query.interface_name;
-        if(interfaceName != null){
-            this.isEditingInterface = true;
-            this.loadInterfaceToEdit(interfaceName);
+  },
+  methods: {
+    async getConfig() {
+      try {
+        const response = await window.axios.get(`/api/v1/config`);
+        this.config = response.data.config;
+      } catch (e) {
+        // do nothing if failed to load config
+        console.log(e);
+      }
+    },
+    async updateConfig(config) {
+      try {
+        const response = await window.axios.patch("/api/v1/config", config);
+        this.config = response.data.config;
+      } catch (e) {
+        alert("Failed to save config!");
+        console.log(e);
+      }
+    },
+    async loadComports() {
+      try {
+        const response = await window.axios.get(`/api/v1/comports`);
+        this.comports = response.data.comports;
+      } catch (e) {
+        // do nothing if failed to load interfaces
+      }
+    },
+    async loadInterfaceToEdit(interfaceName) {
+      try {
+
+        // fetch interfaces
+        const response = await window.axios.get(`/api/v1/reticulum/interfaces`);
+        const interfaces = response.data.interfaces;
+
+        // find interface, else show error and redirect to interfaces
+        const iface = interfaces[interfaceName];
+        if (!iface) {
+          DialogUtils.alert("The selected interface for editing could not be found.");
+          this.$router.push({
+            "name": "interfaces",
+          });
+          return;
         }
 
+        // set form values
+        this.newInterfaceName = interfaceName;
+        this.newInterfaceType = iface.type;
+
+        // AutoInterface additional settings
+        this.newInterfaceGroupID = iface.group_id;
+        this.newInterfaceMulticastAddressType = iface.multicast_address_type;
+        this.newInterfaceDevices = iface.devices;
+        this.newInterfaceIgnoredDevices = iface.ignored_devices;
+        this.newInterfaceDiscoveryScope = iface.discovery_scope;
+        this.newInterfaceDiscoveryPort = iface.discovery_port;
+        this.newInterfaceDataPort = iface.data_port;
+
+        // tcp client interface
+        this.newInterfaceTargetHost = iface.target_host;
+        this.newInterfaceTargetPort = iface.target_port;
+
+        if (iface.kiss_framing) {
+          this.newInterfaceKISSFramingEnabled = true;
+        }
+        if (iface.i2p_tunneled) {
+          this.newInterfaceI2PTunnelingEnabled = true;
+        }
+        if (iface.prefer_ipv6) {
+          this.newInterfacePreferIPV6 = true;
+        }
+
+
+        // tcp server interface & udp interface
+        this.newInterfaceNetworkDevice = iface.device;
+        this.newInterfaceListenIp = iface.listen_ip;
+        this.newInterfaceListenPort = iface.listen_port;
+
+        // I2P Interface
+        if (iface.peers) {
+          const peerstoAdd = iface.peers.split(',');
+          for (const address of peerstoAdd) {
+            this.addI2PPeer(address);
+          }
+        }
+
+
+        // udp interface
+        this.newInterfaceForwardIp = iface.forward_ip;
+        this.newInterfaceForwardPort = iface.forward_port;
+
+        // Port (For RNode, Serial, and KISS)
+        this.newInterfacePort = iface.port;
+
+        // RNode Interface
+        this.newInterfaceFrequency = iface.frequency;
+        this.RNodeGHzValue = Math.floor(iface.frequency / 1e9);
+        this.RNodeMHzValue = Math.floor((iface.frequency % 1e9) / 1e6);
+        this.RNodekHzValue = Math.floor((iface.frequency % 1e6) / 1e3);
+        this.newInterfaceBandwidth = iface.bandwidth;
+        this.newInterfaceTxpower = iface.txpower;
+        this.newInterfaceSpreadingFactor = iface.spreadingfactor;
+        this.newInterfaceCodingRate = iface.codingrate;
+
+        // RNode Multi Interface
+        this.RNodeMultiInterface.subInterfaces = iface.sub_interfaces;
+
+        // Serial, KISS, and AX25KISS
+        this.newInterfaceSpeed = iface.speed;
+        this.newInterfaceDatabits = iface.databits;
+        this.newInterfaceParity = iface.parity;
+        this.newInterfaceStopbits = iface.stopbits;
+
+        this.newInterfacePreamble = iface.preamble;
+        this.newInterfaceTXTail = iface.txtail;
+        this.newInterfacePersistence = iface.persistence;
+        this.newInterfaceSlotTime = iface.slottime;
+
+        this.newInterfaceCallsign = iface.callsign;
+        this.newInterfaceIDInterval = iface.id_interval;
+        this.newInterfaceSSID = iface.ssid;
+
+        // Airtime limit
+        this.newInterfaceAirtimeLimitLong = iface.airtime_limit_long;
+        this.newInterfaceAirtimeLimitShort = iface.airtime_limit_short;
+
+        // Pipe Interface
+        this.newInterfaceCommand = iface.command;
+        this.newInterfaceRespawnDelay = iface.respawn_delay;
+
+        // Shared interface settings
+        this.sharedInterfaceSettings.mode = iface.mode;
+        this.sharedInterfaceSettings.bitrate = iface.bitrate;
+        this.sharedInterfaceSettings.network_name = iface.network_name;
+        this.sharedInterfaceSettings.passphrase = iface.passphrase;
+        this.sharedInterfaceSettings.ifac_size = iface.ifac_size;
+
+      } catch (e) {
+        // do nothing if failed to load interfaces
+      }
     },
-    methods: {
-        async getConfig() {
-            try {
-                const response = await window.axios.get(`/api/v1/config`);
-                this.config = response.data.config;
-            } catch(e) {
-                // do nothing if failed to load config
-                console.log(e);
-            }
-        },
-        async updateConfig(config) {
-            try {
-                const response = await window.axios.patch("/api/v1/config", config);
-                this.config = response.data.config;
-            } catch(e) {
-                alert("Failed to save config!");
-                console.log(e);
-            }
-        },
-        async loadComports() {
-            try {
-                const response = await window.axios.get(`/api/v1/comports`);
-                this.comports = response.data.comports;
-            } catch(e) {
-                // do nothing if failed to load interfaces
-            }
-        },
-        async loadInterfaceToEdit(interfaceName) {
-            try {
+    async addInterface() {
+      try {
+        let subInterfacesData = null;
+        if (this.newInterfaceType === 'RNodeMultiInterface') {
+          subInterfacesData = this.RNodeMultiInterface.subInterfaces.map(s => ({
+            name: s.name,
+            frequency: s.frequency,
+            bandwidth: s.bandwidth,
+            txpower: s.txpower,
+            spreadingfactor: s.spreadingfactor,
+            codingrate: s.codingrate,
+            vport: s.vport
+          }));
+        }
+        // add interface
+        const response = await window.axios.post(`/api/v1/reticulum/interfaces/add`, {
+          allow_overwriting_interface: this.isEditingInterface,
+          // required values
+          name: this.newInterfaceName,
+          type: this.newInterfaceType,
 
-                // fetch interfaces
-                const response = await window.axios.get(`/api/v1/reticulum/interfaces`);
-                const interfaces = response.data.interfaces;
+          // AutoInterface
+          group_id: this.newInterfaceGroupID,
+          multicast_address_type: this.newInterfaceMulticastAddressType,
+          devices: this.newInterfaceDevices,
+          ignored_devices: this.newInterfaceIgnoredDevices,
+          discovery_scope: this.newInterfaceDiscoveryScope,
+          discovery_port:  this.newInterfaceDiscoveryPort,
+          data_port:       this.newInterfaceDataPort,
 
-                // find interface, else show error and redirect to interfaces
-                const iface = interfaces[interfaceName];
-                if(!iface){
-                    DialogUtils.alert("The selected interface for editing could not be found.");
-                    this.$router.push({
-                        "name": "interfaces",
-                    });
-                    return;
-                }
+          // tcp client interface
+          target_host: this.newInterfaceTargetHost,
+          target_port: this.newInterfaceTargetPort,
 
-                // set form values
-                this.newInterfaceName = interfaceName;
-                this.newInterfaceType = iface.type;
+          // TCP Client & Server interface
+          kiss_framing: this.newInterfaceKISSFramingEnabled,
+          i2p_tunneled: this.newInterfaceI2PTunnelingEnabled,
 
-                // tcp client interface
-                this.newInterfaceTargetHost = iface.target_host;
-                this.newInterfaceTargetPort = iface.target_port;
+          // tcp server interface & udp interface
+          listen_ip: this.newInterfaceListenIp,
+          listen_port: this.newInterfaceListenPort,
+          device: this.newInterfaceNetworkDevice,
+          prefer_ipv6: this.newInterfacePreferIPV6,
 
-                // tcp server interface & udp interface
-                this.newInterfaceListenIp = iface.listen_ip;
-                this.newInterfaceListenPort = iface.listen_port;
 
-                // udp interface
-                this.newInterfaceForwardIp = iface.forward_ip;
-                this.newInterfaceForwardPort = iface.forward_port;
+          // udp interface
+          forward_ip: this.newInterfaceForwardIp,
+          forward_port: this.newInterfaceForwardPort,
+          //  I2P Interface
+          peers: this.I2PSettings.newInterfacePeers.join(','),
+          // rnode interface
+          port: this.newInterfacePort,
+          frequency: this.calculateFrequencyInHz(),
+          bandwidth: this.newInterfaceBandwidth,
+          txpower: this.newInterfaceTxpower,
+          spreadingfactor: this.newInterfaceSpreadingFactor,
+          codingrate: this.newInterfaceCodingRate,
 
-                // rnode interface
-                this.newInterfacePort = iface.port;
-                this.newInterfaceFrequency = iface.frequency;
-                this.newInterfaceBandwidth = iface.bandwidth;
-                this.newInterfaceTxpower = iface.txpower;
-                this.newInterfaceSpreadingFactor = iface.spreadingfactor;
-                this.newInterfaceCodingRate = iface.codingrate;
+          // RNode Multi Interface
+          sub_interfaces: subInterfacesData,
 
-            } catch(e) {
-                // do nothing if failed to load interfaces
-            }
-        },
-        async addInterface() {
+          // Seiral, KISS, and AX25KISS
+          speed: this.newInterfaceSpeed,
+          databits: this.newInterfaceDatabits,
+          parity: this.newInterfaceParity,
+          stopbits: this.newInterfaceStopbits,
 
-            try {
+          // KISS and AX25KISS
+          preamble: this.newInterfacePreamble,
+          txtail: this.newInterfaceTXTail,
+          persistence: this.newInterfacePersistence,
+          slottime: this.newInterfaceSlotTime,
 
-                // add interface
-                const response = await window.axios.post(`/api/v1/reticulum/interfaces/add`, {
-                    allow_overwriting_interface: this.isEditingInterface,
-                    // required values
-                    name: this.newInterfaceName,
-                    type: this.newInterfaceType,
-                    // tcp client interface
-                    target_host: this.newInterfaceTargetHost,
-                    target_port: this.newInterfaceTargetPort,
-                    // tcp server interface & udp interface
-                    listen_ip: this.newInterfaceListenIp,
-                    listen_port: this.newInterfaceListenPort,
-                    // udp interface
-                    forward_ip: this.newInterfaceForwardIp,
-                    forward_port: this.newInterfaceForwardPort,
-                    // rnode interface
-                    port: this.newInterfacePort,
-                    frequency: this.newInterfaceFrequency,
-                    bandwidth: this.newInterfaceBandwidth,
-                    txpower: this.newInterfaceTxpower,
-                    spreadingfactor: this.newInterfaceSpreadingFactor,
-                    codingrate: this.newInterfaceCodingRate,
-                });
+          callsign: this.newInterfaceCallsign,
+          id_interval: this.newInterfaceIDInterval,
+          ssid: this.newInterfaceSSID,
 
-                // show success message
-                if(response.data.message){
-                    DialogUtils.alert(response.data.message);
-                }
+          // Pipe interface
+          command: this.newInterfaceCommand,
+          respawn_delay: this.newInterfaceRespawnDelay,
 
-                // go to interfaces page
-                this.$router.push({
-                    name: "interfaces",
-                });
+          // Airtime limit
+          airtime_limit_long: this.newInterfaceAirtimeLimitLong,
+          airtime_limit_short: this.newInterfaceAirtimeLimitShort,
 
-            } catch(e) {
-                const message = e.response?.data?.message ?? "failed to add interface";
-                DialogUtils.alert(message);
-                console.log(e);
-            }
+          // Shared interface settings
+          mode: this.sharedInterfaceSettings.mode,
+          bitrate: this.sharedInterfaceSettings.bitrate,
+          network_name: this.sharedInterfaceSettings.network_name,
+          passphrase: this.sharedInterfaceSettings.passphrase,
+          ifac_size: this.sharedInterfaceSettings.ifac_size,
+
+
+        });
+
+        // show success message
+        if (response.data.message) {
+          DialogUtils.alert(response.data.message);
+        }
+
+        // go to interfaces page
+        this.$router.push({
+          name: "interfaces",
+        });
+
+      } catch (e) {
+        const message = e.response?.data?.message ?? "failed to add interface";
+        DialogUtils.alert(message);
+        console.log(e);
+      }
 
-        },
-        formatFrequency(hz) {
-            return Utils.formatFrequency(hz);
-        },
     },
+    formatFrequency(hz) {
+      return Utils.formatFrequency(hz);
+    },
+    calculateFrequencyInHz() {
+      const ghzToHz = this.RNodeGHzValue * 1e9;
+      const mhzToHz = this.RNodeMHzValue * 1e6;
+      const khzToHz = this.RNodekHzValue * 1e3;
+      return ghzToHz + mhzToHz + khzToHz;
+    },
+    updateRNodeCalculations() {
+      this.calculateRNodeParameters(
+          this.newInterfaceBandwidth,
+          this.newInterfaceSpreadingFactor,
+          this.newInterfaceCodingRate,
+          this.RNodeInterfaceLoRaParameters.noiseFloor,
+          this.RNodeInterfaceLoRaParameters.antennaGain,
+          this.newInterfaceTxpower
+      );
+    },
+    calculateRNodeParameters(bandwidth, spreadingFactor, codingRate, noiseFloor, antennaGain, transmitPower) {
+      // https://unsigned.io/understanding-lora-parameters/
+      // "SX1272/3/6/7/8 LoRa Modem Design Guide" https://www.openhacks.com/uploadsproductos/loradesignguide_std.pdf
+      // 4:5 - 4:8
+      const crn = {
+        5: 1,
+        6: 2,
+        7: 3,
+        8: 4,
+      };
+
+      codingRate = crn[codingRate];
+
+      const sfn = {
+        5: -2.5,
+        6: -5,
+        7: -7.5,
+        8: -10,
+        9: -12.5,
+        10: -15,
+        11: -17.5,
+        12: -20
+      };
+
+      let dataRate = spreadingFactor * ((4 / (4 + codingRate)) / (Math.pow(2, spreadingFactor) / (bandwidth / 1000))) * 1000
+
+      let sensitivity = -174 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
+
+      if (bandwidth === 203125 || bandwidth === 406250 || bandwidth > 500000) {
+        sensitivity = -165.6 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
+      }
+
+      let linkBudget = (transmitPower - sensitivity) + antennaGain;
+      this.RNodeInterfaceLoRaParameters.dataRate = dataRate < 1000
+          ? `${dataRate.toFixed(0)} bps`
+          : `${(dataRate / 1000).toFixed(2)} kbps`;
+      this.RNodeInterfaceLoRaParameters.linkBudget = `${linkBudget.toFixed(1)} dB`;
+      this.RNodeInterfaceLoRaParameters.sensitivity = `${sensitivity.toFixed(1)} dBm`;
+    },
+
+
+    toggleI2PPeerAccordion() {
+      this.I2PSettings.showPeerAccordion = !this.I2PSettings.showPeerAccordion;
+    },
+    addI2PPeer(address = "") {
+      this.I2PSettings.newInterfacePeers.push(address);
+    },
+    removeI2PPeer(index) {
+      this.I2PSettings.newInterfacePeers.splice(index, 1);
+    },
+    toggleAllSettings() {
+      this.showAllSettings = !this.showAllSettings;
+    },
+    toggleSharedInterfaceSettings() {
+      this.showSharedInterfaceSettings = !this.showSharedInterfaceSettings;
+    },
+    toggleRNodeLoRaParameters() {
+      this.showRNodeLoRaParameters = !this.showRNodeLoRaParameters;
+    },
+    toggleRNodeSubInterfaces() {
+      this.showRNodeSubInterfaces = !this.showRNodeSubInterfaces;
+    },
+    addSubInterface() {
+      this.RNodeMultiInterface.subInterfaces.push({
+        name: '',
+        frequency: null,
+        bandwidth: null,
+        txpower: null,
+        spreadingfactor: null,
+        codingrate: null,
+        vport: null
+      });
+    },
+    useKISSAX25() {
+      if (this.newInterfaceType === 'AX25KISSInterface') {
+        this.newInterfaceType = "KISSInterface";
+      } else {
+        this.newInterfaceType = 'AX25KISSInterface';
+      }
+    },
+    removeSubInterface(idx) {
+      this.RNodeMultiInterface.subInterfaces.splice(idx, 1);
+    },
+    async getAppInfo() {
+      try {
+        const response = await window.axios.get("/api/v1/app/info");
+        this.appInfo = response.data.app_info;
+        this.transportEnabled = this.appInfo.is_transport_enabled;
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  },
 }
 </script>
diff --git a/src/frontend/components/interfaces/Interface.vue b/src/frontend/components/interfaces/Interface.vue
index 5aff14a..5eafded 100644
--- a/src/frontend/components/interfaces/Interface.vue
+++ b/src/frontend/components/interfaces/Interface.vue
@@ -36,6 +36,14 @@
                     <path d="M252.44,121.34l-48-32A8,8,0,0,0,192,96v24H72V72h33a32,32,0,1,0,0-16H72A16,16,0,0,0,56,72v48H8a8,8,0,0,0,0,16H56v48a16,16,0,0,0,16,16h32v8a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H120a16,16,0,0,0-16,16v8H72V136H192v24a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM136,48a16,16,0,1,1-16,16A16,16,0,0,1,136,48ZM120,176h32v32H120Zm88-30.95V111l25.58,17Z"></path>
                 </svg>
 
+                <svg v-else-if="iface.type === 'RNodeMultiInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Zm73.71,7.14a80,80,0,0,1-14.08,22.2,8,8,0,0,1-11.92-10.67,63.95,63.95,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67,80.08,80.08,0,0,1,14.08,84.47ZM69,103.09a64,64,0,0,0,11.26,67.58,8,8,0,0,1-11.92,10.67,79.93,79.93,0,0,1,0-106.67A8,8,0,1,1,80.29,85.34,63.77,63.77,0,0,0,69,103.09ZM248,128a119.58,119.58,0,0,1-34.29,84,8,8,0,1,1-11.42-11.2,103.9,103.9,0,0,0,0-145.56A8,8,0,1,1,213.71,44,119.58,119.58,0,0,1,248,128ZM53.71,200.78A8,8,0,1,1,42.29,212a119.87,119.87,0,0,1,0-168,8,8,0,1,1,11.42,11.2,103.9,103.9,0,0,0,0,145.56Z"></path></svg>
+
+                <svg v-else-if="iface.type === 'I2PInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M72,92A12,12,0,1,1,60,80,12,12,0,0,1,72,92Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,128,80Zm68,24a12,12,0,1,0-12-12A12,12,0,0,0,196,104ZM60,152a12,12,0,1,0,12,12A12,12,0,0,0,60,152Zm68,0a12,12,0,1,0,12,12A12,12,0,0,0,128,152Zm68,0a12,12,0,1,0,12,12A12,12,0,0,0,196,152Z"></path></svg>
+
+                <svg v-else-if="iface.type === 'KISSInterface' || iface.type === 'AX25KISSInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M104,168a8,8,0,0,1-8,8H64a8,8,0,0,1,0-16H96A8,8,0,0,1,104,168Zm-8-40H64a8,8,0,0,0,0,16H96a8,8,0,0,0,0-16Zm0-32H64a8,8,0,0,0,0,16H96a8,8,0,0,0,0-16ZM232,80V192a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V72a8,8,0,0,1,5.7-7.66l160-48a8,8,0,0,1,4.6,15.33L86.51,64H216A16,16,0,0,1,232,80ZM216,192V80H40V192H216Zm-16-56a40,40,0,1,1-40-40A40,40,0,0,1,200,136Zm-16,0a24,24,0,1,0-24,24A24,24,0,0,0,184,136Z"></path></svg>
+
+                <svg v-else-if="iface.type === 'PipeInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z"></path></svg>
+
                 <svg v-else xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white">
                     <path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
                 </svg>
@@ -186,6 +194,10 @@
             <div>• Bitrate: {{ formatBitsPerSecond(iface._stats?.bitrate ?? 0) }}</div>
             <div>• TX: {{ formatBytes(iface._stats?.txb ?? 0) }}</div>
             <div>• RX: {{ formatBytes(iface._stats?.rxb ?? 0) }}</div>
+            <div v-if="iface.type === 'RNodeInterface'">• Noise Floor: {{
+                iface._stats?.noise_floor
+              }} dBm
+            </div>
             <div v-if="iface._stats?.clients">• Clients: {{ iface._stats?.clients }}</div>
 
         </div>
diff --git a/src/frontend/components/interfaces/InterfacesPage.vue b/src/frontend/components/interfaces/InterfacesPage.vue
index c25c890..52d3f8f 100644
--- a/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/src/frontend/components/interfaces/InterfacesPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
-        <div class="overflow-y-auto p-2 space-y-2">
+        <div class="h-full  p-2 space-y-2">
 
             <!-- warning - keeping orange-500 for warning visibility in both modes -->
             <div class="flex bg-orange-500 p-2 text-sm font-semibold leading-6 text-white rounded shadow">
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index c806642..9f4feeb 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -69,7 +69,7 @@
                 </div>
                 <div class="my-auto">Loading {{ nodePageProgress }}%</div>
             </div>
-            <pre v-else v-html="nodePageContent" class="h-full text-wrap"></pre>
+            <pre v-else v-html="nodePageContent" class="h-full break-words whitespace-pre-wrap"></pre>
         </div>
 
         <!-- file download bottom bar -->
diff --git a/src/frontend/js/Utils.js b/src/frontend/js/Utils.js
index f63c9f3..4c8ca37 100644
--- a/src/frontend/js/Utils.js
+++ b/src/frontend/js/Utils.js
@@ -143,6 +143,10 @@ class Utils {
 
     static isInterfaceEnabled(iface) {
         const rawValue = iface.enabled ?? iface.interface_enabled;
+        if (rawValue === true) {
+            // when enabled or interface_enabled is True it needs to return true.
+            return true;
+        }
         const value = rawValue?.toLowerCase();
         return value === "on" || value === "yes" || value === "true";
     }

From d796722772850e5a813e174dd5cea9ff458b838d Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 1 Feb 2025 23:47:40 +1300
Subject: [PATCH 011/131] fix layout for save interface button

---
 .../components/interfaces/AddInterfacePage.vue   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index f54580c..8a2ba91 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -1007,13 +1007,17 @@
 
         </div>
 
+          <div class="p-2">
+
+              <!-- add button -->
+              <button @click="addInterface" type="button"
+                      class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                  <span v-if="isEditingInterface">Save Interface</span>
+                  <span v-else>Add Interface</span>
+              </button>
+
+          </div>
 
-        <!-- add button -->
-        <button @click="addInterface" type="button"
-                class="mb-4 bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-          <span v-if="isEditingInterface">Save Interface</span>
-          <span v-else>Add Interface</span>
-        </button>
       </div>
 
     </div>

From 5e068b73410d334036fc86b8b9c925049e096a68 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 00:28:54 +1300
Subject: [PATCH 012/131] initial formatting adjustments

---
 .../interfaces/AddInterfacePage.vue           | 2722 ++++++++---------
 1 file changed, 1232 insertions(+), 1490 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 8a2ba91..e3af836 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -1,1027 +1,765 @@
 <template>
-  <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
-    <div class="overflow-y-auto p-2 space-y-2">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
+        <div class="overflow-y-auto p-2 space-y-2">
 
-      <!-- community interfaces -->
-      <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces"
-           class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
-        <div class="flex p-2">
-          <div class="my-auto mr-auto">
-            <div class="font-bold dark:text-white">Community Interfaces</div>
-            <div class="text-sm  dark:text-gray-100">These TCP interfaces serve as a quick way to test Reticulum. We
-              suggest running your own as these may not always be available.
-            </div>
-          </div>
-          <div class="my-auto ml-2">
-            <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button"
-                    class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                <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 class="divide-y divide-gray-200 dark:text-white">
-
-          <div class="flex px-2 py-1">
-            <div class="my-auto mr-auto">
-              <div>RNS Testnet Amsterdam</div>
-              <div class="text-xs">amsterdam.connect.reticulum.network:4965</div>
-            </div>
-            <div class="ml-2 my-auto">
-              <button
-                  @click="newInterfaceName='RNS Testnet Amsterdam';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='amsterdam.connect.reticulum.network';newInterfaceTargetPort='4965'"
-                  type="button"
-                  class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                <span>Use Interface</span>
-              </button>
-            </div>
-          </div>
-
-          <div class="flex px-2 py-1">
-            <div class="my-auto mr-auto">
-              <div>RNS Testnet BetweenTheBorders</div>
-              <div class="text-xs">reticulum.betweentheborders.com:4242</div>
-            </div>
-            <div class="ml-2 my-auto">
-              <button
-                  @click="newInterfaceName='RNS Testnet BetweenTheBorders';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='reticulum.betweentheborders.com';newInterfaceTargetPort='4242'"
-                  type="button"
-                  class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                <span>Use Interface</span>
-              </button>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      <!-- add interface form -->
-      <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
-        <div class="p-2 font-bold dark:text-white">
-          <span v-if="isEditingInterface">Edit Interface</span>
-          <span v-else>Add Interface</span>
-        </div>
-        <div class="p-2 space-y-3">
-          <!-- iGeneric interface settings -->
-          <!-- interface name -->
-          <div>
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
-            <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name"
-                   v-model="newInterfaceName"
-                   class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                   :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
-            <div class="text-xs text-gray-600 dark:text-zinc-300">Interface names must be unique.</div>
-          </div>
-
-          <!-- interface type -->
-          <div class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
-            <select v-model="newInterfaceType"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-              <option disabled selected>--</option>
-              <option value="AutoInterface">Auto Interface</option>
-              <option disabled selected>RNodes</option>
-              <option value="RNodeInterface">RNode Interface</option>
-              <option value="RNodeMultiInterface">RNode Multi Interface</option>
-              <option disabled selected>IP Networks</option>
-              <option value="TCPClientInterface">TCP Client Interface</option>
-              <option value="TCPServerInterface">TCP Server Interface</option>
-              <option value="UDPInterface">UDP Interface</option>
-              <option value="I2PInterface">I2P Interface</option>
-              <option disabled selected>Hardware</option>
-              <option value="SerialInterface">Serial Interface</option>
-              <option value="KISSInterface">KISS Interface</option>
-              <option hidden value="AX25KISSInterface">AX.25 KISS Interface</option>
-              <option disabled selected>Other</option>
-              <option value="PipeInterface">Pipe Interface</option>
-            </select>
-            <div class="text-xs text-gray-600 dark:text-zinc-300">
-              Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html"
-                            target="_blank">Reticulum Docs: Configuring Interfaces</a>
-            </div>
-          </div>
-
-
-              <div v-if="newInterfaceType === 'AutoInterface'" class="mb-4">
-
-            <div
-                @click="toggleAllSettings"
-                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-            >
-              <span
-                  class="font-semibold text-gray-900 dark:text-gray-100">Additional AutoInterface Settings</span>
-              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
-                    :class="{ 'rotate-180': showAllSettings }"
-              >
-                            ▲
-                          </span>
-            </div>
-
-            <div
-                v-show="showAllSettings"
-                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
-            >
-               <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional</p>
-                <div class="flex-1">
-                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Group ID</label>
-                    <input
-                        type="text"
-                        v-model="newInterfaceGroupID"
-                        placeholder="reticulum"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                    />
-                </div>
-
-                 <div class="flex-1">
-                      <label class="text-sm dark:text-zinc-100">Multicast Address Type</label>
-                      <select
-                          v-model="newInterfaceMulticastAddressType"
-                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                      >
-                        <option value="permanent">
-                            Permanent
-                        </option>
-                         <option value="temporary">
-                            Temporary
-                        </option>
-                      </select>
-                 </div>
-
-
-                <div class="flex items-center space-x-4 mt-4">
-                  <div class="flex-1">
-                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network devices</label>
-                    <input
-                        type="text"
-                        v-model="newInterfaceDevices"
-                        placeholder="wlan0,eth1"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                    />
-                  </div>
-                  <div class="flex-1">
-                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Ignored Devices</label>
-                    <input
-                        type="text"
-                        v-model="newInterfaceIgnoredDevices"
-                        placeholder="tun0,eth0"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                    />
-                  </div>
-              </div>
-
-             <div class="flex items-center space-x-4 mt-4">
-              <div class="flex-1">
-                <label class="text-sm dark:text-zinc-100">Discovery Scope</label>
-                      <select
-                          v-model="newInterfaceDiscoveryScope"
-                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                      >
-                        <option value="global">
-                            Global
-                        </option>
-                        <option value="admin">
-                            Admin
-                        </option>
-                        <option value="organisation">
-                            Organisation
-                        </option>
-                        <option value="site">
-                            Site
-                        </option>
-                        <option value="link">
-                            Link
-                        </option>
-
-                      </select>
-              </div>
-              <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Discovery Port</label>
-                <input
-                    type="number"
-                    v-model="newInterfaceDiscoveryPort"
-                    placeholder="48555"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-              <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Data Port</label>
-                <input
-                    type="number"
-                    v-model="newInterfaceDataPort"
-                    placeholder="49555"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-             </div>
-           </div>
-          </div>
-
-          <!-- TCPClientInterface -->
-          <!-- interface target host -->
-          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
-            <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-          </div>
-
-          <!-- interface target port -->
-          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
-            <input type="text" placeholder="1234" v-model="newInterfaceTargetPort"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-          </div>
-
-          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-4">
-
-            <div
-                @click="toggleAllSettings"
-                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-            >
-              <span
-                  class="font-semibold text-gray-900 dark:text-gray-100">Additional TCP Client Interface settings</span>
-              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
-                    :class="{ 'rotate-180': showAllSettings }"
-              >
-                            ▲
-                          </span>
-            </div>
-
-            <div
-                v-show="showAllSettings"
-                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
-            >
-              <div class="flex items-start">
-                <div class="flex flex-col">
-                  <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
-                    Enable KISS Framing
-                  </label>
-                  <span class="text-sm text-gray-500 dark:text-zinc-300">
-                                  ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems.
-                                     For KISS connections through serial hardware select "KISS Interface" as the interface type.
-                                </span>
-                </div>
-                <input
-                    id="kiss-framing"
-                    type="checkbox"
-                    v-model="newInterfaceKISSFramingEnabled"
-                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
-                />
-              </div>
-              <div class="flex items-start">
-                <div class="flex flex-col">
-                  <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
-                    Enable I2P tunneling
-                  </label>
-                  <span class="text-sm text-gray-500 dark:text-zinc-300">
-                                  ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface
-                                </span>
-                </div>
-                <input
-                    id="i2p-tunneled"
-                    type="checkbox"
-                    v-model="newInterfaceI2PTunnelingEnabled"
-                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
-                />
-              </div>
-
-            </div>
-          </div>
-
-          <!-- TCPServerInterface -->
-          <!-- interface listen ip -->
-          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
-            <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-          </div>
-
-          <!-- interface listen port -->
-          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
-            <input type="text" placeholder="1234" v-model="newInterfaceListenPort"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-          </div>
-
-
-          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-4">
-
-            <div
-                @click="toggleAllSettings"
-                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-            >
-              <span
-                  class="font-semibold text-gray-900 dark:text-gray-100">Additional Server Interface settings</span>
-              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
-                    :class="{ 'rotate-180': showAllSettings }"
-              >
-                            ▲
-                          </span>
-            </div>
-
-            <div
-                v-show="showAllSettings"
-                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-
-              <div class="mb-2">
-                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
-                <span class="text-sm text-gray-500 dark:text-zinc-300">
-                                  ⓘ Binds the interface to a specific network interface
-                </span>
-                <input type="text" placeholder="eth0" v-model="newInterfaceNetworkDevice"
-                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-              </div>
-              <div class="flex items-start">
-                <div class="flex flex-col">
-                  <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
-                    Prefer IPv6
-                  </label>
-                  <span class="text-sm text-gray-500 dark:text-zinc-300">
-                                  ⓘ Binds the TCP Server Interface to an IPv6 address
-                                </span>
-                </div>
-                <input
-                    id="prefer-ipv6"
-                    type="checkbox"
-                    value="1"
-                    v-model="newInterfacePreferIPV6"
-                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
-                />
-              </div>
-            </div>
-
-          </div>
-
-          <!-- UDPInterface -->
-          <!-- interface forward ip -->
-          <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
-            <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-          </div>
-
-          <!-- interface listen port -->
-          <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
-            <input type="text" placeholder="1234" v-model="newInterfaceForwardPort"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-          </div>
-
-          <!-- I2PInterface -->
-          <div v-if="newInterfaceType === 'I2PInterface'" class="mb-4">
-                    <span class="text-sm text-gray-500 dark:text-zinc-300">
-                        ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.
-                    </span>
-
-            <div class="mt-4">
-              <div
-                  @click="toggleI2PPeerAccordion"
-                  class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-              >
-                <span class="font-semibold text-gray-900 dark:text-gray-100">Manage Peers</span>
-                <span
-                    class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200"
-                    :class="{ 'rotate-180': I2PSettings.showPeerAccordion }"
-                >
-                                ▲
-                            </span>
-              </div>
-
-              <div
-                  v-show="I2PSettings.showPeerAccordion"
-                  class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
-              >
-                <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index"
-                     class="flex items-center space-x-2">
-                  <input
-                      type="text"
-                      v-model="I2PSettings.newInterfacePeers[index]"
-                      placeholder="Enter peer address (ex: 5urvjicpzi7q3ybztsef4i5ow2aq4soktfj7zedz53s47r54jnqq.b32.i2p)"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                  />
-                  <button
-                      @click="removeI2PPeer(index)"
-                      type="button"
-                      class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg"
-                  >
-                    Remove
-                  </button>
-                </div>
-                <button
-                    @click="addI2PPeer('')"
-                    type="button"
-                    class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg"
-                >
-                  Add Peer
-                </button>
-              </div>
-            </div>
-          </div>
-
-
-          <!-- RNode interface -->
-          <!-- interface port -->
-          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
-            <select v-model="newInterfacePort"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
-                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
-              </option>
-            </select>
-          </div>
-          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
-            <!-- interface Frequency -->
-            <div class="flex-1">
-              <div class="mb-2">
-                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency</label>
-                <div class="flex items-center gap-2">
-                  <div class="flex flex-col">
-                    <input
-                        type="number"
-                        v-model.number="RNodeGHzValue"
-                        min="0"
-                        placeholder="GHz"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                    />
-                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">GHz</label>
-                  </div>
-                  <div class="flex flex-col">
-                    <input
-                        type="number"
-                        v-model.number="RNodeMHzValue"
-                        min="0"
-                        placeholder="MHz"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                    />
-                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">MHz</label>
-                  </div>
-                  <div class="flex flex-col">
-                    <input
-                        type="number"
-                        v-model.number="RNodekHzValue"
-                        min="0"
-                        placeholder="kHz"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                    />
-                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">kHz</label>
-                  </div>
-                </div>
-                <div class="text-sm text-gray-600 dark:text-zinc-100 mt-2 font-bold">
-                  Selected Frequency: {{ formattedFrequency }}
-                </div>
-              </div>
-            </div>
-
-            <!-- interface Bandwidth -->
-            <div class="flex-1">
-              <div class="mb-2">
-                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
-                <select
-                    v-model="newInterfaceBandwidth"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                >
-                  <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">
-                    {{ bandwidth / 1000 }} KHz
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-
-
-          <!-- interface txpower -->
-          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
-            <input v-model="newInterfaceTxpower" type="number"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-          </div>
-
-          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
-            <!-- interface spreading factor -->
-            <div class="flex-1">
-              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
-              <select v-model="newInterfaceSpreadingFactor"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">
-                  {{ spreadingfactor }}
-                </option>
-              </select>
-            </div>
-
-            <!-- interface coding rate -->
-            <div class="flex-1">
-              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
-              <select v-model="newInterfaceCodingRate"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{
-                    codingrate
-                  }}
-                </option>
-              </select>
-            </div>
-          </div>
-          <!--          RNode LoRa parameters-->
-          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
-
-            <div
-                @click="toggleRNodeLoRaParameters"
-                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-            >
-              <span
-                  class="font-semibold text-gray-900 dark:text-gray-100">Show on-air RNode bitrate & link budget</span>
-              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
-                    :class="{ 'rotate-180': showRNodeLoRaParameters }"
-              >
-                            ▲
-                          </span>
-            </div>
-
-            <div
-                v-show="showRNodeLoRaParameters"
-                class="mt-3 space-y-6 p-6 border border-gray-300 rounded-lg bg-gray-50 dark:bg-zinc-900 dark:border-zinc-700"
-            >
-              <div class="space-y-2">
-                <div class="flex items-start space-x-2">
-                  <div class="w-1/4">
-                    <label class="block text-sm font-medium text-gray-800 dark:text-white">
-                      Antenna Gain (dBi)
-                    </label>
-                    <input
-                        type="number"
-                        v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
-                        placeholder="Enter gain"
-                        class="w-1/2 bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"
-                    />
-                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1
-                      dBi of
-                      gain, where a directional Yagi might have 5 dBi of gain.</p>
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center">
-                  On-Air Calculations
-                </h3>
-                <div class="grid grid-cols-3 gap-4 text-center mt-2">
-                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
-                    <div class="text-xl font-bold text-gray-900 dark:text-white">
-                      {{ RNodeInterfaceLoRaParameters.sensitivity }}
+            <!-- community interfaces -->
+            <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces" class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+                <div class="flex p-2">
+                    <div class="my-auto mr-auto">
+                        <div class="font-bold dark:text-white">Community Interfaces</div>
+                        <div class="text-sm dark:text-gray-100">These TCP interfaces serve as a quick way to test Reticulum. We suggest running your own as these may not always be available.</div>
                     </div>
-                  </div>
-                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
-                    <div class="text-xl font-bold text-gray-900 dark:text-white">
-                      {{ RNodeInterfaceLoRaParameters.dataRate }}
+                    <div class="my-auto ml-2">
+                        <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button" class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                                <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 class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
-                    <div class="text-xl font-bold text-gray-900 dark:text-white">
-                      {{ RNodeInterfaceLoRaParameters.linkBudget }}
+                </div>
+                <div class="divide-y divide-gray-200 dark:text-white">
+
+                    <div class="flex px-2 py-1">
+                        <div class="my-auto mr-auto">
+                            <div>RNS Testnet Amsterdam</div>
+                            <div class="text-xs">amsterdam.connect.reticulum.network:4965</div>
+                        </div>
+                        <div class="ml-2 my-auto">
+                            <button
+                                @click="newInterfaceName='RNS Testnet Amsterdam';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='amsterdam.connect.reticulum.network';newInterfaceTargetPort='4965'"
+                                type="button"
+                                class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                                <span>Use Interface</span>
+                            </button>
+                        </div>
                     </div>
-                  </div>
+
+                    <div class="flex px-2 py-1">
+                        <div class="my-auto mr-auto">
+                            <div>RNS Testnet BetweenTheBorders</div>
+                            <div class="text-xs">reticulum.betweentheborders.com:4242</div>
+                        </div>
+                        <div class="ml-2 my-auto">
+                            <button
+                                @click="newInterfaceName='RNS Testnet BetweenTheBorders';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='reticulum.betweentheborders.com';newInterfaceTargetPort='4242'"
+                                type="button"
+                                class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                                <span>Use Interface</span>
+                            </button>
+                        </div>
+                    </div>
+
                 </div>
-              </div>
             </div>
 
-          </div>
-          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
-
-            <div
-                @click="toggleAllSettings"
-                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-            >
-              <span
-                  class="font-semibold text-gray-900 dark:text-gray-100">Additional RNode Interface Settings</span>
-              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
-                    :class="{ 'rotate-180': showAllSettings }"
-              >
-                            ▲
-                          </span>
-            </div>
-
-            <div
-                v-show="showAllSettings"
-                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-
-              <div class="flex items-center space-x-4">
-                <div class="flex-1">
-                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
-                  <input
-                      type="text"
-                      v-model="newInterfaceCallsign"
-                      placeholder="Enter callsign"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                  />
+            <!-- add interface form -->
+            <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+                <div class="p-2 font-bold dark:text-white">
+                    <span v-if="isEditingInterface">Edit Interface</span>
+                    <span v-else>Add Interface</span>
                 </div>
-                <div class="flex-1">
-                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
-                  <input
-                      type="number"
-                      v-model="newInterfaceIDInterval"
-                      placeholder="Enter interval (seconds)"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                  />
+                <div class="p-2 space-y-3">
+
+                    <!-- iGeneric interface settings -->
+                    <!-- interface name -->
+                    <div>
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
+                        <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name"
+                               v-model="newInterfaceName"
+                               class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                               :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
+                        <div class="text-xs text-gray-600 dark:text-zinc-300">Interface names must be unique.</div>
+                    </div>
+
+                    <!-- interface type -->
+                    <div class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
+                        <select v-model="newInterfaceType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                            <option disabled selected>--</option>
+                            <option value="AutoInterface">Auto Interface</option>
+                            <option disabled selected>RNodes</option>
+                            <option value="RNodeInterface">RNode Interface</option>
+                            <option value="RNodeMultiInterface">RNode Multi Interface</option>
+                            <option disabled selected>IP Networks</option>
+                            <option value="TCPClientInterface">TCP Client Interface</option>
+                            <option value="TCPServerInterface">TCP Server Interface</option>
+                            <option value="UDPInterface">UDP Interface</option>
+                            <option value="I2PInterface">I2P Interface</option>
+                            <option disabled selected>Hardware</option>
+                            <option value="SerialInterface">Serial Interface</option>
+                            <option value="KISSInterface">KISS Interface</option>
+                            <option hidden value="AX25KISSInterface">AX.25 KISS Interface</option>
+                            <option disabled selected>Other</option>
+                            <option value="PipeInterface">Pipe Interface</option>
+                        </select>
+                        <div class="text-xs text-gray-600 dark:text-zinc-300">
+                            Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html" target="_blank">Reticulum Docs: Configuring Interfaces</a>
+                        </div>
+                    </div>
+
+                    <div v-if="newInterfaceType === 'AutoInterface'" class="mb-4">
+
+                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional AutoInterface Settings</span>
+                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showAllSettings }">▲</span>
+                        </div>
+
+                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+
+                            <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional</p>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Group ID</label>
+                                <input
+                                    type="text"
+                                    v-model="newInterfaceGroupID"
+                                    placeholder="reticulum"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+
+                            <div class="flex-1">
+                                <label class="text-sm dark:text-zinc-100">Multicast Address Type</label>
+                                <select v-model="newInterfaceMulticastAddressType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                    <option value="permanent">Permanent</option>
+                                    <option value="temporary">Temporary</option>
+                                </select>
+                            </div>
+
+                            <div class="flex items-center space-x-4 mt-4">
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network devices</label>
+                                    <input
+                                        type="text"
+                                        v-model="newInterfaceDevices"
+                                        placeholder="wlan0,eth1"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Ignored Devices</label>
+                                    <input
+                                        type="text"
+                                        v-model="newInterfaceIgnoredDevices"
+                                        placeholder="tun0,eth0"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                            </div>
+
+                            <div class="flex items-center space-x-4 mt-4">
+                                <div class="flex-1">
+                                    <label class="text-sm dark:text-zinc-100">Discovery Scope</label>
+                                    <select v-model="newInterfaceDiscoveryScope" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                        <option value="global">Global</option>
+                                        <option value="admin">Admin</option>
+                                        <option value="organisation">Organisation</option>
+                                        <option value="site">Site</option>
+                                        <option value="link">Link</option>
+                                    </select>
+                                </div>
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Discovery Port</label>
+                                    <input
+                                        type="number"
+                                        v-model="newInterfaceDiscoveryPort"
+                                        placeholder="48555"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Data Port</label>
+                                    <input
+                                        type="number"
+                                        v-model="newInterfaceDataPort"
+                                        placeholder="49555"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- TCPClientInterface -->
+                    <!-- interface target host -->
+                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
+                        <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    </div>
+
+                    <!-- interface target port -->
+                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
+                        <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    </div>
+
+                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-4">
+                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional TCP Client Interface settings</span>
+                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showAllSettings }">▲</span>
+                        </div>
+                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+                            <div class="flex items-start">
+                                <div class="flex flex-col">
+                                    <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable KISS Framing</label>
+                                    <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
+                                </div>
+                                <input id="kiss-framing" type="checkbox" v-model="newInterfaceKISSFramingEnabled" class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="flex flex-col">
+                                    <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable I2P tunneling</label>
+                                    <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
+                                </div>
+                                <input id="i2p-tunneled" type="checkbox" v-model="newInterfaceI2PTunnelingEnabled" class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- TCPServerInterface -->
+                    <!-- interface listen ip -->
+                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
+                        <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    </div>
+
+                    <!-- interface listen port -->
+                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
+                        <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    </div>
+
+                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-4">
+                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional Server Interface settings</span>
+                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 " :class="{ 'rotate-180': showAllSettings }">▲</span>
+                        </div>
+                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+                            <div class="mb-2">
+                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Binds the interface to a specific network interface</span>
+                                <input type="text" placeholder="eth0" v-model="newInterfaceNetworkDevice" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                            </div>
+                            <div class="flex items-start">
+                                <div class="flex flex-col">
+                                    <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Prefer IPv6</label>
+                                    <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Binds the TCP Server Interface to an IPv6 address</span>
+                                </div>
+                                <input
+                                    id="prefer-ipv6"
+                                    type="checkbox"
+                                    value="1"
+                                    v-model="newInterfacePreferIPV6"
+                                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- UDPInterface -->
+                    <!-- interface forward ip -->
+                    <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
+                        <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    </div>
+
+                    <!-- interface listen port -->
+                    <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
+                        <input type="text" placeholder="1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    </div>
+
+                    <!-- I2PInterface -->
+                    <div v-if="newInterfaceType === 'I2PInterface'" class="mb-4">
+                        <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.</span>
+                        <div class="mt-4">
+                            <div @click="toggleI2PPeerAccordion" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                                <span class="font-semibold text-gray-900 dark:text-gray-100">Manage Peers</span>
+                                <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': I2PSettings.showPeerAccordion }">▲</span>
+                            </div>
+                            <div v-show="I2PSettings.showPeerAccordion" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+                                <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index" class="flex items-center space-x-2">
+                                    <input
+                                        type="text"
+                                        v-model="I2PSettings.newInterfacePeers[index]"
+                                        placeholder="Enter peer address (ex: 5urvjicpzi7q3ybztsef4i5ow2aq4soktfj7zedz53s47r54jnqq.b32.i2p)"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                    />
+                                    <button @click="removeI2PPeer(index)" type="button" class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">Remove</button>
+                                </div>
+                                <button @click="addI2PPeer('')" type="button" class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">Add Peer</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- RNode interface -->
+                    <!-- interface port -->
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                            <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
+                        </select>
+                    </div>
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
+
+                        <!-- interface Frequency -->
+                        <div class="flex-1">
+                            <div class="mb-2">
+                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency</label>
+                                <div class="flex items-center gap-2">
+                                    <div class="flex flex-col">
+                                        <input
+                                            type="number"
+                                            v-model.number="RNodeGHzValue"
+                                            min="0"
+                                            placeholder="GHz"
+                                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                        />
+                                        <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">GHz</label>
+                                    </div>
+                                    <div class="flex flex-col">
+                                        <input
+                                            type="number"
+                                            v-model.number="RNodeMHzValue"
+                                            min="0"
+                                            placeholder="MHz"
+                                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                        />
+                                        <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">MHz</label>
+                                    </div>
+                                    <div class="flex flex-col">
+                                        <input
+                                            type="number"
+                                            v-model.number="RNodekHzValue"
+                                            min="0"
+                                            placeholder="kHz"
+                                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                        />
+                                        <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">kHz</label>
+                                    </div>
+                                </div>
+                                <div class="text-sm text-gray-600 dark:text-zinc-100 mt-2 font-bold">
+                                    Selected Frequency: {{ formattedFrequency }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- interface Bandwidth -->
+                        <div class="flex-1">
+                            <div class="mb-2">
+                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
+                                <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                    <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
+                                </select>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <!-- interface txpower -->
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
+                        <input v-model="newInterfaceTxpower" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                    </div>
+
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
+
+                        <!-- interface spreading factor -->
+                        <div class="flex-1">
+                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
+                            <select v-model="newInterfaceSpreadingFactor" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
+                            </select>
+                        </div>
+
+                        <!-- interface coding rate -->
+                        <div class="flex-1">
+                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
+                            <select v-model="newInterfaceCodingRate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{ codingrate }}</option>
+                            </select>
+                        </div>
+
+                    </div>
+
+                    <!-- RNode LoRa parameters -->
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
+
+                        <div @click="toggleRNodeLoRaParameters" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                            <span class="font-semibold text-gray-900 dark:text-gray-100">Show on-air RNode bitrate & link budget</span>
+                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showRNodeLoRaParameters }">▲</span>
+                        </div>
+
+                        <div v-show="showRNodeLoRaParameters" class="mt-3 space-y-6 p-6 border border-gray-300 rounded-lg bg-gray-50 dark:bg-zinc-900 dark:border-zinc-700">
+
+                            <div class="space-y-2">
+                                <div class="flex items-start space-x-2">
+                                    <div class="w-1/4">
+                                        <label class="block text-sm font-medium text-gray-800 dark:text-white">Antenna Gain (dBi)</label>
+                                        <input
+                                            type="number"
+                                            v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
+                                            placeholder="Enter gain"
+                                            class="w-1/2 bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"
+                                        />
+                                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1 dBi of gain, where a directional Yagi might have 5 dBi of gain.</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div>
+                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center">On-Air Calculations</h3>
+                                <div class="grid grid-cols-3 gap-4 text-center mt-2">
+                                    <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
+                                        <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.sensitivity }}</div>
+                                    </div>
+                                    <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
+                                        <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.dataRate }}</div>
+                                    </div>
+                                    <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
+                                        <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.linkBudget }}</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
+
+                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional RNode Interface Settings</span>
+                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showAllSettings }">▲</span>
+                        </div>
+
+                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+
+                            <div class="flex items-center space-x-4">
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                                    <input
+                                        type="text"
+                                        v-model="newInterfaceCallsign"
+                                        placeholder="Enter callsign"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                                    <input
+                                        type="number"
+                                        v-model="newInterfaceIDInterval"
+                                        placeholder="Enter interval (seconds)"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                            </div>
+
+                            <div class="flex items-center space-x-4">
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Short)</label>
+                                    <input
+                                        type="number"
+                                        v-model="newInterfaceAirtimeLimitShort"
+                                        placeholder="Enter short airtime limit (seconds)"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                                <div class="flex-1">
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Long)</label>
+                                    <input
+                                        type="number"
+                                        v-model="newInterfaceAirtimeLimitLong"
+                                        placeholder="Enter long airtime limit (seconds)"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <!-- RNodeMultiInterface -->
+                    <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
+                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom devices with multiple LoRa transceivers such as the openCom XL.</p>
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                            <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
+                        </select>
+                    </div>
+
+                    <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-4">
+                        <div @click="toggleRNodeSubInterfaces" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                            <span class="font-semibold text-gray-900 dark:text-gray-100">Manage RNode Subinterfaces</span>
+                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showRNodeSubInterfaces }">▲</span>
+                        </div>
+                        <div v-show="showRNodeSubInterfaces" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+                            <div :key="idx" v-for="(sub, idx) in RNodeMultiInterface.subInterfaces" class="space-y-2 border-b border-gray-200 dark:border-zinc-700 pb-4 mb-4">
+                                <input
+                                    v-model="sub.name"
+                                    type="text"
+                                    placeholder="Subinterface Name"
+                                    class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                <div class="flex gap-2">
+                                    <div class="flex-1">
+                                        <label class="text-sm dark:text-zinc-100">Frequency (Hz)</label>
+                                        <input
+                                            v-model.number="sub.frequency"
+                                            type="number"
+                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                    </div>
+                                    <div class="flex-1">
+                                        <label class="text-sm dark:text-zinc-100">Bandwidth</label>
+                                        <select v-model="sub.bandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                            <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="flex gap-2">
+                                    <div class="flex-1">
+                                        <label class="text-sm dark:text-zinc-100">Spreading Factor</label>
+                                        <select v-model.number="sub.spreadingfactor" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                            <option :key="sf" v-for="sf in RNodeInterfaceDefaults.spreadingfactors" :value="sf">{{ sf }}</option>
+                                        </select>
+                                    </div>
+                                    <div class="flex-1">
+                                        <label class="text-sm dark:text-zinc-100">Coding Rate</label>
+                                        <select v-model.number="sub.codingrate" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                            <option :key="cr" v-for="cr in RNodeInterfaceDefaults.codingrates" :value="cr">{{ cr }}</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="flex gap-2 items-center">
+                                    <div class="flex-1">
+                                        <label class="text-sm dark:text-zinc-100">TX Power (dBm)</label>
+                                        <input
+                                            v-model.number="sub.txpower"
+                                            type="number"
+                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                    </div>
+                                    <div class="flex-1">
+                                        <label class="text-sm dark:text-zinc-100">Virtual Port</label>
+                                        <input
+                                            v-model.number="sub.vport"
+                                            type="number"
+                                            class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                    </div>
+                                </div>
+                                <button @click="removeSubInterface(idx)" type="button" class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">Remove Subinterface</button>
+                            </div>
+                            <button @click="addSubInterface" type="button" class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">Add Subinterface</button>
+                        </div>
+                    </div>
+
+                    <!-- Serial, KISS, and AX25Kiss -->
+                    <div v-if="['SerialInterface', 'KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
+
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                            <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
+                        </select>
+
+                        <div class="mb-2">
+                            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Serial connection baud rate (bps)</label>
+                            <input v-model="newInterfaceSpeed" placeholder="115200" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                        </div>
+
+                        <div class="mt-2">
+                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Databits</label>
+                            <input v-model="newInterfaceDatabits" type="number" placeholder="8" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                        </div>
+
+                        <div class="mt-2">
+                            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Parity </label>
+                            <input v-model="newInterfaceParity" type="number" placeholder="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                        </div>
+
+                        <div class="mt-2">
+                            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Stopbits</label>
+                            <input v-model="newInterfaceStopbits" type="number" placeholder="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                        </div>
+
+                    </div>
+
+                    <!-- KISS and AX.25 KISS -->
+                    <div v-if="['KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
+
+                        <div class="flex items-center">
+                            <input
+                                id="use-ax25"
+                                type="checkbox"
+                                :checked="newInterfaceType === 'AX25KISSInterface'"
+                                @click="useKISSAX25"
+                                class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                            />
+                            <label for="use-ax25" class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Use AX.25</label>
+                        </div>
+                        <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Enables AX.25 Framing</span>
+
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Preamble (milliseconds)</label>
+                                <input
+                                    v-model="this.newInterfacePreamble"
+                                    type="number"
+                                    placeholder="150"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">TX Tail (milliseconds)</label>
+                                <input
+                                    v-model="this.newInterfaceTXTail"
+                                    type="number"
+                                    placeholder="10"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Persistence (milliseconds)</label>
+                                <input
+                                    v-model="this.newInterfacePersistence"
+                                    type="number"
+                                    placeholder="200"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Slot Time (milliseconds)</label>
+                                <input
+                                    v-model="this.newInterfaceSlotTime"
+                                    type="number"
+                                    placeholder="20"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="flex items-center space-x-4 mt-4">
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">SSID</label>
+                                <input
+                                    type="text"
+                                    value="0"
+                                    v-model="newInterfaceSSID"
+                                    placeholder="Enter SSID"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                                <input
+                                    type="text"
+                                    v-model="newInterfaceCallsign"
+                                    placeholder="Enter callsign"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                                <input
+                                    type="number"
+                                    v-model="newInterfaceIDInterval"
+                                    placeholder="Enter interval (seconds)"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <!-- Pipe Interface -->
+                    <div v-if="newInterfaceType === 'PipeInterface'" class="mb-2">
+                        <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</span>
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
+                        <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay (seconds)</label>
+                        <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    </div>
+
+                    <!-- Shared interface setings -->
+                    <div v-if="newInterfaceType" @click="toggleSharedInterfaceSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+                        <span class="font-semibold text-gray-900 dark:text-gray-100">Shared Interface Settings</span>
+                        <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showSharedInterfaceSettings }">▲</span>
+                    </div>
+
+                    <div v-show="showSharedInterfaceSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional.</p>
+                        <div v-show="transportEnabled" class="mb-4">
+                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Interface Mode</label>
+                            <select v-model="sharedInterfaceSettings.mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                <option value="full">Full</option>
+                                <option value="gateway">Gateway</option>
+                                <option value="access_point">Access Point</option>
+                                <option value="roaming">Roaming</option>
+                                <option value="boundary">Boundary</option>
+                            </select>
+                        </div>
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Inferred Interface Bitrate</label>
+                            <input
+                                v-model="sharedInterfaceSettings.bitrate"
+                                type="number"
+                                placeholder="Enter inferred bitrate"
+                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                            />
+                        </div>
+                        <div class="mb-4">
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-zinc-100 mb-2">IFAC Settings</h3>
+                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ IFAC (Interface Access Code) settings are used for creating private networks and can be configured on the interface level.</p>
+                            <div class="grid grid-cols-3 gap-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
+                                    <input
+                                        v-model="sharedInterfaceSettings.network_name"
+                                        type="text"
+                                        placeholder="Enter network name"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
+                                    <input
+                                        v-model="sharedInterfaceSettings.passphrase"
+                                        type="text"
+                                        placeholder="Enter passphrase"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
+                                    <input
+                                        v-model="sharedInterfaceSettings.ifac_size"
+                                        type="number"
+                                        min="8"
+                                        max="512"
+                                        placeholder="Enter size (8-512)"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
-              </div>
 
-              <div class="flex items-center space-x-4">
-                <div class="flex-1">
-                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit
-                    (Short)</label>
-                  <input
-                      type="number"
-                      v-model="newInterfaceAirtimeLimitShort"
-                      placeholder="Enter short airtime limit (seconds)"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                  />
+                <div class="p-2">
+
+                    <!-- add/save interface button -->
+                    <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <span v-if="isEditingInterface">Save Interface</span>
+                        <span v-else>Add Interface</span>
+                    </button>
+
                 </div>
-                <div class="flex-1">
-                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Long)</label>
-                  <input
-                      type="number"
-                      v-model="newInterfaceAirtimeLimitLong"
-                      placeholder="Enter long airtime limit (seconds)"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                  />
-                </div>
-              </div>
 
             </div>
-          </div>
-
-          <!--    RNodeMultiInterface      -->
-          <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
-            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom
-              devices
-              with multiple LoRa transceivers such as the openCom XL. </p>
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
-            <select v-model="newInterfacePort"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
-                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
-              </option>
-            </select>
-          </div>
-          <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-4">
-            <div
-                @click="toggleRNodeSubInterfaces"
-                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-              <span class="font-semibold text-gray-900 dark:text-gray-100">Manage RNode Subinterfaces</span>
-              <span
-                  class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200"
-                  :class="{ 'rotate-180': showRNodeSubInterfaces }">
-            ▲
-          </span>
-            </div>
-            <div
-                v-show="showRNodeSubInterfaces"
-                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-              <div
-                  v-for="(sub, idx) in RNodeMultiInterface.subInterfaces"
-                  :key="idx"
-                  class="space-y-2 border-b border-gray-200 dark:border-zinc-700 pb-4 mb-4">
-                <input
-                    v-model="sub.name"
-                    type="text"
-                    placeholder="Subinterface Name"
-                    class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                <div class="flex gap-2">
-                  <div class="flex-1">
-                    <label class="text-sm dark:text-zinc-100">Frequency (Hz)</label>
-                    <input
-                        v-model.number="sub.frequency"
-                        type="number"
-                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                  </div>
-                  <div class="flex-1">
-                    <label class="text-sm dark:text-zinc-100">Bandwidth</label>
-                    <select
-                        v-model="sub.bandwidth"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                    >
-                      <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">
-                        {{ bandwidth / 1000 }} KHz
-                      </option>
-                    </select>
-                  </div>
-                </div>
-                <div class="flex gap-2">
-                  <div class="flex-1">
-                    <label class="text-sm dark:text-zinc-100">Spreading Factor</label>
-                    <select
-                        v-model.number="sub.spreadingfactor"
-                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                      <option
-                          v-for="sf in RNodeInterfaceDefaults.spreadingfactors"
-                          :key="sf"
-                          :value="sf">
-                        {{ sf }}
-                      </option>
-                    </select>
-                  </div>
-                  <div class="flex-1">
-                    <label class="text-sm dark:text-zinc-100">Coding Rate</label>
-                    <select
-                        v-model.number="sub.codingrate"
-                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                      <option
-                          v-for="cr in RNodeInterfaceDefaults.codingrates"
-                          :key="cr"
-                          :value="cr">
-                        {{ cr }}
-                      </option>
-                    </select>
-                  </div>
-                </div>
-                <div class="flex gap-2 items-center">
-                  <div class="flex-1">
-                    <label class="text-sm dark:text-zinc-100">TX Power (dBm)</label>
-                    <input
-                        v-model.number="sub.txpower"
-                        type="number"
-                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                  </div>
-                  <div class="flex-1">
-                    <label class="text-sm dark:text-zinc-100">Virtual Port</label>
-                    <input
-                        v-model.number="sub.vport"
-                        type="number"
-                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                  </div>
-                </div>
-                <button
-                    @click="removeSubInterface(idx)"
-                    type="button"
-                    class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">
-                  Remove Subinterface
-                </button>
-              </div>
-              <button
-                  @click="addSubInterface"
-                  type="button"
-                  class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">
-                Add Subinterface
-              </button>
-            </div>
-          </div>
-
-          <!--   Serial, KISS, and AX25Kiss         -->
-          <div v-if="['SerialInterface', 'KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
-
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
-            <select v-model="newInterfacePort"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
-                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
-              </option>
-            </select>
-
-            <div class="mb-2">
-              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Serial connection baud
-                rate (bps)</label>
-              <input v-model="newInterfaceSpeed" placeholder="115200" type="number"
-                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-            </div>
-
-            <div class="mt-2">
-              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Databits</label>
-              <input v-model="newInterfaceDatabits" type="number" placeholder="8"
-                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-            </div>
-
-            <div class="mt-2">
-              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Parity </label>
-              <input v-model="newInterfaceParity" type="number" placeholder=""
-                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-            </div>
-
-            <div class="mt-2">
-              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Stopbits</label>
-              <input v-model="newInterfaceStopbits" type="number" placeholder="1"
-                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-            </div>
-
-          </div>
-          <!--          KISS and AX.25 KISS-->
-          <div v-if="['KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
-
-            <div class="flex items-center">
-              <input
-                  id="use-ax25"
-                  type="checkbox"
-                  :checked="newInterfaceType === 'AX25KISSInterface'"
-                  @click="useKISSAX25"
-                  class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
-              />
-              <label for="use-ax25" class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-100">
-                Use AX.25
-              </label>
-            </div>
-            <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">
-              ⓘ Enables AX.25 Framing
-            </span>
-
-            <div class="grid grid-cols-2 gap-4">
-              <div>
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
-                  Preamble (milliseconds)
-                </label>
-                <input
-                    v-model="this.newInterfacePreamble"
-                    type="number"
-                    placeholder="150"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
-                  TX Tail (milliseconds)
-                </label>
-                <input
-                    v-model="this.newInterfaceTXTail"
-                    type="number"
-                    placeholder="10"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
-                  CDMA Persistence (milliseconds)
-                </label>
-                <input
-                    v-model="this.newInterfacePersistence"
-                    type="number"
-                    placeholder="200"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
-                  CDMA Slot Time (milliseconds)
-                </label>
-                <input
-                    v-model="this.newInterfaceSlotTime"
-                    type="number"
-                    placeholder="20"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-            </div>
-            <div class="flex items-center space-x-4 mt-4">
-              <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">SSID</label>
-                <input
-                    type="text"
-                    value="0"
-                    v-model="newInterfaceSSID"
-                    placeholder="Enter SSID"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-              <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
-                <input
-                    type="text"
-                    v-model="newInterfaceCallsign"
-                    placeholder="Enter callsign"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-              <div class="flex-1">
-                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
-                <input
-                    type="number"
-                    v-model="newInterfaceIDInterval"
-                    placeholder="Enter interval (seconds)"
-                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!--          Pipe Interface-->
-          <div v-if="newInterfaceType === 'PipeInterface'" class="mb-2">
-              <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">
-              ⓘ             Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be used
-            to easily create virtual interfaces, or to interface with custom hardware or other systems.
-            </span>
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
-            <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-
-            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay
-              (seconds)</label>
-            <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-
-          </div>
-
-          <!-- Shared interface setings -->
-          <div v-if="newInterfaceType"
-               @click="toggleSharedInterfaceSettings"
-               class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-          >
-            <span class="font-semibold text-gray-900 dark:text-gray-100">Shared Interface Settings</span>
-            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
-                  :class="{ 'rotate-180': showSharedInterfaceSettings }"
-            >
-                            ▲
-                          </span>
-          </div>
-
-          <div
-              v-show="showSharedInterfaceSettings"
-              class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
-          >
-            <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional.</p>
-            <div v-show="transportEnabled" class="mb-4">
-              <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Interface Mode</label>
-              <select
-                  v-model="sharedInterfaceSettings.mode"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-              >
-                <option value="full">Full</option>
-                <option value="gateway">Gateway</option>
-                <option value="access_point">Access Point</option>
-                <option value="roaming">Roaming</option>
-                <option value="boundary">Boundary</option>
-              </select>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Inferred Interface
-                Bitrate</label>
-              <input
-                  v-model="sharedInterfaceSettings.bitrate"
-                  type="number"
-                  placeholder="Enter inferred bitrate"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-              />
-            </div>
-
-            <div class="mb-4">
-              <h3 class="text-lg font-semibold text-gray-900 dark:text-zinc-100 mb-2">IFAC Settings</h3>
-              <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ IFAC (Interface Access Code) settings are used
-                for creating
-                private
-                networks and can be configured on the interface level. </p>
-              <div class="grid grid-cols-3 gap-4">
-                <div>
-                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
-                  <input
-                      v-model="sharedInterfaceSettings.network_name"
-                      type="text"
-                      placeholder="Enter network name"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                  />
-                </div>
-                <div>
-                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
-                  <input
-                      v-model="sharedInterfaceSettings.passphrase"
-                      type="text"
-                      placeholder="Enter passphrase"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                  />
-                </div>
-                <div>
-                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
-                  <input
-                      v-model="sharedInterfaceSettings.ifac_size"
-                      type="number"
-                      min="8"
-                      max="512"
-                      placeholder="Enter size (8-512)"
-                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                  />
-                </div>
-              </div>
-            </div>
-
-          </div>
 
         </div>
-
-          <div class="p-2">
-
-              <!-- add button -->
-              <button @click="addInterface" type="button"
-                      class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                  <span v-if="isEditingInterface">Save Interface</span>
-                  <span v-else>Add Interface</span>
-              </button>
-
-          </div>
-
-      </div>
-
     </div>
-  </div>
 </template>
 
 <script>
@@ -1029,534 +767,538 @@ import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
 
 export default {
-  name: 'AddInterfacePage',
-  data() {
-    return {
+    name: 'AddInterfacePage',
+    data() {
+        return {
 
-      isEditingInterface: false,
-      showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
-      showSharedInterfaceSettings: false, // shared interface settings like IFAC, bitrate
-      showRNodeLoRaParameters: false, // accordion for displaying RNode physical LoRa parameters
-      showRNodeSubInterfaces: false, // accordion for adding multiple RNode interfaces
+            isEditingInterface: false,
+            showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
+            showSharedInterfaceSettings: false, // shared interface settings like IFAC, bitrate
+            showRNodeLoRaParameters: false, // accordion for displaying RNode physical LoRa parameters
+            showRNodeSubInterfaces: false, // accordion for adding multiple RNode interfaces
 
-      appInfo: null,
-      transportEnabled: false,
+            appInfo: null,
+            transportEnabled: false,
 
-      config: null,
+            config: null,
 
-      comports: [],
+            comports: [],
 
-      newInterfaceName: null,
-      newInterfaceType: null,
+            newInterfaceName: null,
+            newInterfaceType: null,
 
-      newInterfaceGroupID: null,
-      newInterfaceMulticastAddressType: null,
-      newInterfaceDevices: null,
-      newInterfaceIgnoredDevices: null,
-      newInterfaceDiscoveryScope: null,
-      newInterfaceDiscoveryPort: null,
-      newInterfaceDataPort: null,
+            newInterfaceGroupID: null,
+            newInterfaceMulticastAddressType: null,
+            newInterfaceDevices: null,
+            newInterfaceIgnoredDevices: null,
+            newInterfaceDiscoveryScope: null,
+            newInterfaceDiscoveryPort: null,
+            newInterfaceDataPort: null,
 
-      newInterfaceTargetHost: null,
-      newInterfaceTargetPort: null,
+            newInterfaceTargetHost: null,
+            newInterfaceTargetPort: null,
 
-      newInterfaceListenIp: null,
-      newInterfaceListenPort: null,
-      newInterfaceNetworkDevice: null,
-      newInterfacePreferIPV6: null,
-      newInterfaceKISSFramingEnabled: null,
-      newInterfaceI2PTunnelingEnabled: null,
+            newInterfaceListenIp: null,
+            newInterfaceListenPort: null,
+            newInterfaceNetworkDevice: null,
+            newInterfacePreferIPV6: null,
+            newInterfaceKISSFramingEnabled: null,
+            newInterfaceI2PTunnelingEnabled: null,
 
-      sharedInterfaceSettings: {
-        "mode": null,
-        "network_name": null,
-        "passphrase": null,
-        "ifac_size": null,
-      },
+            sharedInterfaceSettings: {
+                "mode": null,
+                "network_name": null,
+                "passphrase": null,
+                "ifac_size": null,
+            },
 
-      newInterfaceForwardIp: null,
-      newInterfaceForwardPort: null,
+            newInterfaceForwardIp: null,
+            newInterfaceForwardPort: null,
 
-      I2PSettings: {
-        showPeerAccordion: false,
-        newInterfacePeers: [],
-      },
+            I2PSettings: {
+                showPeerAccordion: false,
+                newInterfacePeers: [],
+            },
 
-      RNodeMultiInterface: {
-        port: null,
-        subInterfaces: [],
-      },
+            RNodeMultiInterface: {
+                port: null,
+                subInterfaces: [],
+            },
 
-      newInterfacePort: null,
-      RNodeGHzValue: 0,
-      RNodeMHzValue: 0,
-      RNodekHzValue: 0,
-      newInterfaceFrequency: null,
-      newInterfaceBandwidth: null,
-      newInterfaceTxpower: null,
-      newInterfaceSpreadingFactor: null,
-      newInterfaceCodingRate: null,
+            newInterfacePort: null,
+            RNodeGHzValue: 0,
+            RNodeMHzValue: 0,
+            RNodekHzValue: 0,
+            newInterfaceFrequency: null,
+            newInterfaceBandwidth: null,
+            newInterfaceTxpower: null,
+            newInterfaceSpreadingFactor: null,
+            newInterfaceCodingRate: null,
 
-      // Serial, KISS, and AX25KISS options
-      newInterfaceSpeed: null,
-      newInterfaceDatabits: null,
-      newInterfaceParity: null,
-      newInterfaceStopbits: null,
+            // Serial, KISS, and AX25KISS options
+            newInterfaceSpeed: null,
+            newInterfaceDatabits: null,
+            newInterfaceParity: null,
+            newInterfaceStopbits: null,
 
-      // KISS and AX25KISS
-      newInterfacePreamble: null,
-      newInterfaceTXTail: null,
-      newInterfacePersistence: null,
-      newInterfaceSlotTime: null,
+            // KISS and AX25KISS
+            newInterfacePreamble: null,
+            newInterfaceTXTail: null,
+            newInterfacePersistence: null,
+            newInterfaceSlotTime: null,
 
-      // RNode and KISS
-      newInterfaceCallsign: null,
-      newInterfaceIDInterval: null,
-      newInterfaceFlowControl: null,
-      newInterfaceAirtimeLimitLong: null,
-      newInterfaceAirtimeLimitShort: null,
+            // RNode and KISS
+            newInterfaceCallsign: null,
+            newInterfaceIDInterval: null,
+            newInterfaceFlowControl: null,
+            newInterfaceAirtimeLimitLong: null,
+            newInterfaceAirtimeLimitShort: null,
 
-      // Pipe interface
-      newInterfaceCommand: null,
-      newInterfaceRespawnDelay: null,
+            // Pipe interface
+            newInterfaceCommand: null,
+            newInterfaceRespawnDelay: null,
 
-      RNodeInterfaceDefaults: {
-        // bandwidth in hz
-        bandwidths: [
-          7800, // 7.8 kHz
-          10400, // 10.4 kHz
-          15600, // 15.6 kHz
-          20800, // 20.8 kHz
-          31250, // 31.25 kHz
-          41700, // 41.7 kHz
-          62500, // 62.5 kHz
-          125000, // 125 kHz
-          250000, // 250 kHz
-          500000, // 500 kHz
-          1625000, // 1625 kHz (for 2.4 GHz SX1280)
-        ],
-        codingrates: [
-          5, // 4:5
-          6, // 4:6
-          7, // 4:7
-          8, // 4:8
-        ],
-        spreadingfactors: [
-          5,
-          6,
-          7,
-          8,
-          9,
-          10,
-          11,
-          12,
-        ],
-      },
-      RNodeInterfaceLoRaParameters: {
-        antennaGain: 0,
-        noiseFloor: 5,
-        sensitivity: null,
-        dataRate: null,
-        linkBudget: null,
-      },
-    };
-  },
-  computed: {
-    formattedFrequency() {
-      const totalHz = this.calculateFrequencyInHz();
-      if (totalHz >= 1e9) {
-        return `${(totalHz / 1e9).toFixed(3)} GHz`;
-      } else if (totalHz >= 1e6) {
-        return `${(totalHz / 1e6).toFixed(3)} MHz`;
-      } else if (totalHz >= 1e3) {
-        return `${(totalHz / 1e3).toFixed(3)} kHz`;
-      }
-      return `${totalHz} Hz`;
+            RNodeInterfaceDefaults: {
+                // bandwidth in hz
+                bandwidths: [
+                    7800, // 7.8 kHz
+                    10400, // 10.4 kHz
+                    15600, // 15.6 kHz
+                    20800, // 20.8 kHz
+                    31250, // 31.25 kHz
+                    41700, // 41.7 kHz
+                    62500, // 62.5 kHz
+                    125000, // 125 kHz
+                    250000, // 250 kHz
+                    500000, // 500 kHz
+                    1625000, // 1625 kHz (for 2.4 GHz SX1280)
+                ],
+                codingrates: [
+                    5, // 4:5
+                    6, // 4:6
+                    7, // 4:7
+                    8, // 4:8
+                ],
+                spreadingfactors: [
+                    5,
+                    6,
+                    7,
+                    8,
+                    9,
+                    10,
+                    11,
+                    12,
+                ],
+            },
+
+            RNodeInterfaceLoRaParameters: {
+                antennaGain: 0,
+                noiseFloor: 5,
+                sensitivity: null,
+                dataRate: null,
+                linkBudget: null,
+            },
+
+        };
     },
-  },
-  watch: {
-    newInterfaceBandwidth: "updateRNodeCalculations",
-    newInterfaceSpreadingFactor: "updateRNodeCalculations",
-    newInterfaceCodingRate: "updateRNodeCalculations",
-    newInterfaceTxpower: "updateRNodeCalculations",
-    'RNodeInterfaceLoRaParameters.antennaGain': "updateRNodeCalculations",
-  },
-  mounted() {
-    this.getAppInfo();
-    this.getConfig();
-    this.loadComports();
-
-    // check if we are editing an interface
-    const interfaceName = this.$route.query.interface_name;
-    if (interfaceName != null) {
-      this.isEditingInterface = true;
-      this.loadInterfaceToEdit(interfaceName);
-    }
-
-  },
-  methods: {
-    async getConfig() {
-      try {
-        const response = await window.axios.get(`/api/v1/config`);
-        this.config = response.data.config;
-      } catch (e) {
-        // do nothing if failed to load config
-        console.log(e);
-      }
+    computed: {
+        formattedFrequency() {
+            const totalHz = this.calculateFrequencyInHz();
+            if(totalHz >= 1e9){
+                return `${(totalHz / 1e9).toFixed(3)} GHz`;
+            } else if(totalHz >= 1e6) {
+                return `${(totalHz / 1e6).toFixed(3)} MHz`;
+            } else if(totalHz >= 1e3) {
+                return `${(totalHz / 1e3).toFixed(3)} kHz`;
+            }
+            return `${totalHz} Hz`;
+        },
     },
-    async updateConfig(config) {
-      try {
-        const response = await window.axios.patch("/api/v1/config", config);
-        this.config = response.data.config;
-      } catch (e) {
-        alert("Failed to save config!");
-        console.log(e);
-      }
+    watch: {
+        newInterfaceBandwidth: "updateRNodeCalculations",
+        newInterfaceSpreadingFactor: "updateRNodeCalculations",
+        newInterfaceCodingRate: "updateRNodeCalculations",
+        newInterfaceTxpower: "updateRNodeCalculations",
+        'RNodeInterfaceLoRaParameters.antennaGain': "updateRNodeCalculations",
     },
-    async loadComports() {
-      try {
-        const response = await window.axios.get(`/api/v1/comports`);
-        this.comports = response.data.comports;
-      } catch (e) {
-        // do nothing if failed to load interfaces
-      }
-    },
-    async loadInterfaceToEdit(interfaceName) {
-      try {
+    mounted() {
 
-        // fetch interfaces
-        const response = await window.axios.get(`/api/v1/reticulum/interfaces`);
-        const interfaces = response.data.interfaces;
+        this.getAppInfo();
+        this.getConfig();
+        this.loadComports();
 
-        // find interface, else show error and redirect to interfaces
-        const iface = interfaces[interfaceName];
-        if (!iface) {
-          DialogUtils.alert("The selected interface for editing could not be found.");
-          this.$router.push({
-            "name": "interfaces",
-          });
-          return;
+        // check if we are editing an interface
+        const interfaceName = this.$route.query.interface_name;
+        if(interfaceName != null){
+            this.isEditingInterface = true;
+            this.loadInterfaceToEdit(interfaceName);
         }
 
-        // set form values
-        this.newInterfaceName = interfaceName;
-        this.newInterfaceType = iface.type;
-
-        // AutoInterface additional settings
-        this.newInterfaceGroupID = iface.group_id;
-        this.newInterfaceMulticastAddressType = iface.multicast_address_type;
-        this.newInterfaceDevices = iface.devices;
-        this.newInterfaceIgnoredDevices = iface.ignored_devices;
-        this.newInterfaceDiscoveryScope = iface.discovery_scope;
-        this.newInterfaceDiscoveryPort = iface.discovery_port;
-        this.newInterfaceDataPort = iface.data_port;
-
-        // tcp client interface
-        this.newInterfaceTargetHost = iface.target_host;
-        this.newInterfaceTargetPort = iface.target_port;
-
-        if (iface.kiss_framing) {
-          this.newInterfaceKISSFramingEnabled = true;
-        }
-        if (iface.i2p_tunneled) {
-          this.newInterfaceI2PTunnelingEnabled = true;
-        }
-        if (iface.prefer_ipv6) {
-          this.newInterfacePreferIPV6 = true;
-        }
-
-
-        // tcp server interface & udp interface
-        this.newInterfaceNetworkDevice = iface.device;
-        this.newInterfaceListenIp = iface.listen_ip;
-        this.newInterfaceListenPort = iface.listen_port;
-
-        // I2P Interface
-        if (iface.peers) {
-          const peerstoAdd = iface.peers.split(',');
-          for (const address of peerstoAdd) {
-            this.addI2PPeer(address);
-          }
-        }
-
-
-        // udp interface
-        this.newInterfaceForwardIp = iface.forward_ip;
-        this.newInterfaceForwardPort = iface.forward_port;
-
-        // Port (For RNode, Serial, and KISS)
-        this.newInterfacePort = iface.port;
-
-        // RNode Interface
-        this.newInterfaceFrequency = iface.frequency;
-        this.RNodeGHzValue = Math.floor(iface.frequency / 1e9);
-        this.RNodeMHzValue = Math.floor((iface.frequency % 1e9) / 1e6);
-        this.RNodekHzValue = Math.floor((iface.frequency % 1e6) / 1e3);
-        this.newInterfaceBandwidth = iface.bandwidth;
-        this.newInterfaceTxpower = iface.txpower;
-        this.newInterfaceSpreadingFactor = iface.spreadingfactor;
-        this.newInterfaceCodingRate = iface.codingrate;
-
-        // RNode Multi Interface
-        this.RNodeMultiInterface.subInterfaces = iface.sub_interfaces;
-
-        // Serial, KISS, and AX25KISS
-        this.newInterfaceSpeed = iface.speed;
-        this.newInterfaceDatabits = iface.databits;
-        this.newInterfaceParity = iface.parity;
-        this.newInterfaceStopbits = iface.stopbits;
-
-        this.newInterfacePreamble = iface.preamble;
-        this.newInterfaceTXTail = iface.txtail;
-        this.newInterfacePersistence = iface.persistence;
-        this.newInterfaceSlotTime = iface.slottime;
-
-        this.newInterfaceCallsign = iface.callsign;
-        this.newInterfaceIDInterval = iface.id_interval;
-        this.newInterfaceSSID = iface.ssid;
-
-        // Airtime limit
-        this.newInterfaceAirtimeLimitLong = iface.airtime_limit_long;
-        this.newInterfaceAirtimeLimitShort = iface.airtime_limit_short;
-
-        // Pipe Interface
-        this.newInterfaceCommand = iface.command;
-        this.newInterfaceRespawnDelay = iface.respawn_delay;
-
-        // Shared interface settings
-        this.sharedInterfaceSettings.mode = iface.mode;
-        this.sharedInterfaceSettings.bitrate = iface.bitrate;
-        this.sharedInterfaceSettings.network_name = iface.network_name;
-        this.sharedInterfaceSettings.passphrase = iface.passphrase;
-        this.sharedInterfaceSettings.ifac_size = iface.ifac_size;
-
-      } catch (e) {
-        // do nothing if failed to load interfaces
-      }
     },
-    async addInterface() {
-      try {
-        let subInterfacesData = null;
-        if (this.newInterfaceType === 'RNodeMultiInterface') {
-          subInterfacesData = this.RNodeMultiInterface.subInterfaces.map(s => ({
-            name: s.name,
-            frequency: s.frequency,
-            bandwidth: s.bandwidth,
-            txpower: s.txpower,
-            spreadingfactor: s.spreadingfactor,
-            codingrate: s.codingrate,
-            vport: s.vport
-          }));
-        }
-        // add interface
-        const response = await window.axios.post(`/api/v1/reticulum/interfaces/add`, {
-          allow_overwriting_interface: this.isEditingInterface,
-          // required values
-          name: this.newInterfaceName,
-          type: this.newInterfaceType,
+    methods: {
+        async getConfig() {
+            try {
+                const response = await window.axios.get(`/api/v1/config`);
+                this.config = response.data.config;
+            } catch (e) {
+                // do nothing if failed to load config
+                console.log(e);
+            }
+        },
+        async updateConfig(config) {
+            try {
+                const response = await window.axios.patch("/api/v1/config", config);
+                this.config = response.data.config;
+            } catch (e) {
+                alert("Failed to save config!");
+                console.log(e);
+            }
+        },
+        async loadComports() {
+            try {
+                const response = await window.axios.get(`/api/v1/comports`);
+                this.comports = response.data.comports;
+            } catch (e) {
+                // do nothing if failed to load interfaces
+            }
+        },
+        async loadInterfaceToEdit(interfaceName) {
+            try {
 
-          // AutoInterface
-          group_id: this.newInterfaceGroupID,
-          multicast_address_type: this.newInterfaceMulticastAddressType,
-          devices: this.newInterfaceDevices,
-          ignored_devices: this.newInterfaceIgnoredDevices,
-          discovery_scope: this.newInterfaceDiscoveryScope,
-          discovery_port:  this.newInterfaceDiscoveryPort,
-          data_port:       this.newInterfaceDataPort,
+                // fetch interfaces
+                const response = await window.axios.get(`/api/v1/reticulum/interfaces`);
+                const interfaces = response.data.interfaces;
 
-          // tcp client interface
-          target_host: this.newInterfaceTargetHost,
-          target_port: this.newInterfaceTargetPort,
+                // find interface, else show error and redirect to interfaces
+                const iface = interfaces[interfaceName];
+                if (!iface) {
+                    DialogUtils.alert("The selected interface for editing could not be found.");
+                    this.$router.push({
+                        "name": "interfaces",
+                    });
+                    return;
+                }
 
-          // TCP Client & Server interface
-          kiss_framing: this.newInterfaceKISSFramingEnabled,
-          i2p_tunneled: this.newInterfaceI2PTunnelingEnabled,
+                // set form values
+                this.newInterfaceName = interfaceName;
+                this.newInterfaceType = iface.type;
 
-          // tcp server interface & udp interface
-          listen_ip: this.newInterfaceListenIp,
-          listen_port: this.newInterfaceListenPort,
-          device: this.newInterfaceNetworkDevice,
-          prefer_ipv6: this.newInterfacePreferIPV6,
+                // AutoInterface additional settings
+                this.newInterfaceGroupID = iface.group_id;
+                this.newInterfaceMulticastAddressType = iface.multicast_address_type;
+                this.newInterfaceDevices = iface.devices;
+                this.newInterfaceIgnoredDevices = iface.ignored_devices;
+                this.newInterfaceDiscoveryScope = iface.discovery_scope;
+                this.newInterfaceDiscoveryPort = iface.discovery_port;
+                this.newInterfaceDataPort = iface.data_port;
+
+                // tcp client interface
+                this.newInterfaceTargetHost = iface.target_host;
+                this.newInterfaceTargetPort = iface.target_port;
+
+                if (iface.kiss_framing) {
+                    this.newInterfaceKISSFramingEnabled = true;
+                }
+                if (iface.i2p_tunneled) {
+                    this.newInterfaceI2PTunnelingEnabled = true;
+                }
+                if (iface.prefer_ipv6) {
+                    this.newInterfacePreferIPV6 = true;
+                }
 
 
-          // udp interface
-          forward_ip: this.newInterfaceForwardIp,
-          forward_port: this.newInterfaceForwardPort,
-          //  I2P Interface
-          peers: this.I2PSettings.newInterfacePeers.join(','),
-          // rnode interface
-          port: this.newInterfacePort,
-          frequency: this.calculateFrequencyInHz(),
-          bandwidth: this.newInterfaceBandwidth,
-          txpower: this.newInterfaceTxpower,
-          spreadingfactor: this.newInterfaceSpreadingFactor,
-          codingrate: this.newInterfaceCodingRate,
+                // tcp server interface & udp interface
+                this.newInterfaceNetworkDevice = iface.device;
+                this.newInterfaceListenIp = iface.listen_ip;
+                this.newInterfaceListenPort = iface.listen_port;
 
-          // RNode Multi Interface
-          sub_interfaces: subInterfacesData,
+                // I2P Interface
+                if(iface.peers){
+                    const peersToAdd = iface.peers.split(',');
+                    for(const address of peersToAdd){
+                        this.addI2PPeer(address);
+                    }
+                }
 
-          // Seiral, KISS, and AX25KISS
-          speed: this.newInterfaceSpeed,
-          databits: this.newInterfaceDatabits,
-          parity: this.newInterfaceParity,
-          stopbits: this.newInterfaceStopbits,
+                // udp interface
+                this.newInterfaceForwardIp = iface.forward_ip;
+                this.newInterfaceForwardPort = iface.forward_port;
 
-          // KISS and AX25KISS
-          preamble: this.newInterfacePreamble,
-          txtail: this.newInterfaceTXTail,
-          persistence: this.newInterfacePersistence,
-          slottime: this.newInterfaceSlotTime,
+                // Port (For RNode, Serial, and KISS)
+                this.newInterfacePort = iface.port;
 
-          callsign: this.newInterfaceCallsign,
-          id_interval: this.newInterfaceIDInterval,
-          ssid: this.newInterfaceSSID,
+                // RNode Interface
+                this.newInterfaceFrequency = iface.frequency;
+                this.RNodeGHzValue = Math.floor(iface.frequency / 1e9);
+                this.RNodeMHzValue = Math.floor((iface.frequency % 1e9) / 1e6);
+                this.RNodekHzValue = Math.floor((iface.frequency % 1e6) / 1e3);
+                this.newInterfaceBandwidth = iface.bandwidth;
+                this.newInterfaceTxpower = iface.txpower;
+                this.newInterfaceSpreadingFactor = iface.spreadingfactor;
+                this.newInterfaceCodingRate = iface.codingrate;
 
-          // Pipe interface
-          command: this.newInterfaceCommand,
-          respawn_delay: this.newInterfaceRespawnDelay,
+                // RNode Multi Interface
+                this.RNodeMultiInterface.subInterfaces = iface.sub_interfaces;
 
-          // Airtime limit
-          airtime_limit_long: this.newInterfaceAirtimeLimitLong,
-          airtime_limit_short: this.newInterfaceAirtimeLimitShort,
+                // Serial, KISS, and AX25KISS
+                this.newInterfaceSpeed = iface.speed;
+                this.newInterfaceDatabits = iface.databits;
+                this.newInterfaceParity = iface.parity;
+                this.newInterfaceStopbits = iface.stopbits;
 
-          // Shared interface settings
-          mode: this.sharedInterfaceSettings.mode,
-          bitrate: this.sharedInterfaceSettings.bitrate,
-          network_name: this.sharedInterfaceSettings.network_name,
-          passphrase: this.sharedInterfaceSettings.passphrase,
-          ifac_size: this.sharedInterfaceSettings.ifac_size,
+                this.newInterfacePreamble = iface.preamble;
+                this.newInterfaceTXTail = iface.txtail;
+                this.newInterfacePersistence = iface.persistence;
+                this.newInterfaceSlotTime = iface.slottime;
 
+                this.newInterfaceCallsign = iface.callsign;
+                this.newInterfaceIDInterval = iface.id_interval;
+                this.newInterfaceSSID = iface.ssid;
 
-        });
+                // Airtime limit
+                this.newInterfaceAirtimeLimitLong = iface.airtime_limit_long;
+                this.newInterfaceAirtimeLimitShort = iface.airtime_limit_short;
 
-        // show success message
-        if (response.data.message) {
-          DialogUtils.alert(response.data.message);
-        }
+                // Pipe Interface
+                this.newInterfaceCommand = iface.command;
+                this.newInterfaceRespawnDelay = iface.respawn_delay;
 
-        // go to interfaces page
-        this.$router.push({
-          name: "interfaces",
-        });
+                // Shared interface settings
+                this.sharedInterfaceSettings.mode = iface.mode;
+                this.sharedInterfaceSettings.bitrate = iface.bitrate;
+                this.sharedInterfaceSettings.network_name = iface.network_name;
+                this.sharedInterfaceSettings.passphrase = iface.passphrase;
+                this.sharedInterfaceSettings.ifac_size = iface.ifac_size;
 
-      } catch (e) {
-        const message = e.response?.data?.message ?? "failed to add interface";
-        DialogUtils.alert(message);
-        console.log(e);
-      }
+            } catch (e) {
+                // do nothing if failed to load interfaces
+            }
+        },
+        async addInterface() {
+            try {
+                let subInterfacesData = null;
+                if(this.newInterfaceType === 'RNodeMultiInterface'){
+                    subInterfacesData = this.RNodeMultiInterface.subInterfaces.map(s => ({
+                        name: s.name,
+                        frequency: s.frequency,
+                        bandwidth: s.bandwidth,
+                        txpower: s.txpower,
+                        spreadingfactor: s.spreadingfactor,
+                        codingrate: s.codingrate,
+                        vport: s.vport
+                    }));
+                }
+                // add interface
+                const response = await window.axios.post(`/api/v1/reticulum/interfaces/add`, {
 
+                    allow_overwriting_interface: this.isEditingInterface,
+
+                    // required values
+                    name: this.newInterfaceName,
+                    type: this.newInterfaceType,
+
+                    // AutoInterface
+                    group_id: this.newInterfaceGroupID,
+                    multicast_address_type: this.newInterfaceMulticastAddressType,
+                    devices: this.newInterfaceDevices,
+                    ignored_devices: this.newInterfaceIgnoredDevices,
+                    discovery_scope: this.newInterfaceDiscoveryScope,
+                    discovery_port:  this.newInterfaceDiscoveryPort,
+                    data_port:       this.newInterfaceDataPort,
+
+                    // tcp client interface
+                    target_host: this.newInterfaceTargetHost,
+                    target_port: this.newInterfaceTargetPort,
+
+                    // TCP Client & Server interface
+                    kiss_framing: this.newInterfaceKISSFramingEnabled,
+                    i2p_tunneled: this.newInterfaceI2PTunnelingEnabled,
+
+                    // tcp server interface & udp interface
+                    listen_ip: this.newInterfaceListenIp,
+                    listen_port: this.newInterfaceListenPort,
+                    device: this.newInterfaceNetworkDevice,
+                    prefer_ipv6: this.newInterfacePreferIPV6,
+
+                    // udp interface
+                    forward_ip: this.newInterfaceForwardIp,
+                    forward_port: this.newInterfaceForwardPort,
+
+                    //  I2P Interface
+                    peers: this.I2PSettings.newInterfacePeers.join(','),
+
+                    // rnode interface
+                    port: this.newInterfacePort,
+                    frequency: this.calculateFrequencyInHz(),
+                    bandwidth: this.newInterfaceBandwidth,
+                    txpower: this.newInterfaceTxpower,
+                    spreadingfactor: this.newInterfaceSpreadingFactor,
+                    codingrate: this.newInterfaceCodingRate,
+
+                    // RNode Multi Interface
+                    sub_interfaces: subInterfacesData,
+
+                    // Seiral, KISS, and AX25KISS
+                    speed: this.newInterfaceSpeed,
+                    databits: this.newInterfaceDatabits,
+                    parity: this.newInterfaceParity,
+                    stopbits: this.newInterfaceStopbits,
+
+                    // KISS and AX25KISS
+                    preamble: this.newInterfacePreamble,
+                    txtail: this.newInterfaceTXTail,
+                    persistence: this.newInterfacePersistence,
+                    slottime: this.newInterfaceSlotTime,
+
+                    callsign: this.newInterfaceCallsign,
+                    id_interval: this.newInterfaceIDInterval,
+                    ssid: this.newInterfaceSSID,
+
+                    // Pipe interface
+                    command: this.newInterfaceCommand,
+                    respawn_delay: this.newInterfaceRespawnDelay,
+
+                    // Airtime limit
+                    airtime_limit_long: this.newInterfaceAirtimeLimitLong,
+                    airtime_limit_short: this.newInterfaceAirtimeLimitShort,
+
+                    // Shared interface settings
+                    mode: this.sharedInterfaceSettings.mode,
+                    bitrate: this.sharedInterfaceSettings.bitrate,
+                    network_name: this.sharedInterfaceSettings.network_name,
+                    passphrase: this.sharedInterfaceSettings.passphrase,
+                    ifac_size: this.sharedInterfaceSettings.ifac_size,
+
+                });
+
+                // show success message
+                if(response.data.message){
+                    DialogUtils.alert(response.data.message);
+                }
+
+                // go to interfaces page
+                this.$router.push({
+                    name: "interfaces",
+                });
+
+            } catch (e) {
+                const message = e.response?.data?.message ?? "failed to add interface";
+                DialogUtils.alert(message);
+                console.log(e);
+            }
+
+        },
+        formatFrequency(hz) {
+            return Utils.formatFrequency(hz);
+        },
+        calculateFrequencyInHz() {
+            const ghzToHz = this.RNodeGHzValue * 1e9;
+            const mhzToHz = this.RNodeMHzValue * 1e6;
+            const khzToHz = this.RNodekHzValue * 1e3;
+            return ghzToHz + mhzToHz + khzToHz;
+        },
+        updateRNodeCalculations() {
+            this.calculateRNodeParameters(
+                this.newInterfaceBandwidth,
+                this.newInterfaceSpreadingFactor,
+                this.newInterfaceCodingRate,
+                this.RNodeInterfaceLoRaParameters.noiseFloor,
+                this.RNodeInterfaceLoRaParameters.antennaGain,
+                this.newInterfaceTxpower
+            );
+        },
+        calculateRNodeParameters(bandwidth, spreadingFactor, codingRate, noiseFloor, antennaGain, transmitPower) {
+
+            // https://unsigned.io/understanding-lora-parameters/
+            // "SX1272/3/6/7/8 LoRa Modem Design Guide" https://www.openhacks.com/uploadsproductos/loradesignguide_std.pdf
+            // 4:5 - 4:8
+            const crn = {
+                5: 1,
+                6: 2,
+                7: 3,
+                8: 4,
+            };
+
+            codingRate = crn[codingRate];
+
+            const sfn = {
+                5: -2.5,
+                6: -5,
+                7: -7.5,
+                8: -10,
+                9: -12.5,
+                10: -15,
+                11: -17.5,
+                12: -20
+            };
+
+            let dataRate = spreadingFactor * ((4 / (4 + codingRate)) / (Math.pow(2, spreadingFactor) / (bandwidth / 1000))) * 1000;
+
+            let sensitivity = -174 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
+
+            if(bandwidth === 203125 || bandwidth === 406250 || bandwidth > 500000){
+                sensitivity = -165.6 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
+            }
+
+            let linkBudget = (transmitPower - sensitivity) + antennaGain;
+            this.RNodeInterfaceLoRaParameters.dataRate = dataRate < 1000
+                ? `${dataRate.toFixed(0)} bps`
+                : `${(dataRate / 1000).toFixed(2)} kbps`;
+            this.RNodeInterfaceLoRaParameters.linkBudget = `${linkBudget.toFixed(1)} dB`;
+            this.RNodeInterfaceLoRaParameters.sensitivity = `${sensitivity.toFixed(1)} dBm`;
+
+        },
+        toggleI2PPeerAccordion() {
+            this.I2PSettings.showPeerAccordion = !this.I2PSettings.showPeerAccordion;
+        },
+        addI2PPeer(address = "") {
+            this.I2PSettings.newInterfacePeers.push(address);
+        },
+        removeI2PPeer(index) {
+            this.I2PSettings.newInterfacePeers.splice(index, 1);
+        },
+        toggleAllSettings() {
+            this.showAllSettings = !this.showAllSettings;
+        },
+        toggleSharedInterfaceSettings() {
+            this.showSharedInterfaceSettings = !this.showSharedInterfaceSettings;
+        },
+        toggleRNodeLoRaParameters() {
+            this.showRNodeLoRaParameters = !this.showRNodeLoRaParameters;
+        },
+        toggleRNodeSubInterfaces() {
+            this.showRNodeSubInterfaces = !this.showRNodeSubInterfaces;
+        },
+        addSubInterface() {
+            this.RNodeMultiInterface.subInterfaces.push({
+                name: '',
+                frequency: null,
+                bandwidth: null,
+                txpower: null,
+                spreadingfactor: null,
+                codingrate: null,
+                vport: null,
+            });
+        },
+        useKISSAX25() {
+            if(this.newInterfaceType === 'AX25KISSInterface'){
+                this.newInterfaceType = "KISSInterface";
+            } else {
+                this.newInterfaceType = 'AX25KISSInterface';
+            }
+        },
+        removeSubInterface(idx) {
+            this.RNodeMultiInterface.subInterfaces.splice(idx, 1);
+        },
+        async getAppInfo() {
+            try {
+                const response = await window.axios.get("/api/v1/app/info");
+                this.appInfo = response.data.app_info;
+                this.transportEnabled = this.appInfo.is_transport_enabled;
+            } catch (e) {
+                console.log(e);
+            }
+        },
     },
-    formatFrequency(hz) {
-      return Utils.formatFrequency(hz);
-    },
-    calculateFrequencyInHz() {
-      const ghzToHz = this.RNodeGHzValue * 1e9;
-      const mhzToHz = this.RNodeMHzValue * 1e6;
-      const khzToHz = this.RNodekHzValue * 1e3;
-      return ghzToHz + mhzToHz + khzToHz;
-    },
-    updateRNodeCalculations() {
-      this.calculateRNodeParameters(
-          this.newInterfaceBandwidth,
-          this.newInterfaceSpreadingFactor,
-          this.newInterfaceCodingRate,
-          this.RNodeInterfaceLoRaParameters.noiseFloor,
-          this.RNodeInterfaceLoRaParameters.antennaGain,
-          this.newInterfaceTxpower
-      );
-    },
-    calculateRNodeParameters(bandwidth, spreadingFactor, codingRate, noiseFloor, antennaGain, transmitPower) {
-      // https://unsigned.io/understanding-lora-parameters/
-      // "SX1272/3/6/7/8 LoRa Modem Design Guide" https://www.openhacks.com/uploadsproductos/loradesignguide_std.pdf
-      // 4:5 - 4:8
-      const crn = {
-        5: 1,
-        6: 2,
-        7: 3,
-        8: 4,
-      };
-
-      codingRate = crn[codingRate];
-
-      const sfn = {
-        5: -2.5,
-        6: -5,
-        7: -7.5,
-        8: -10,
-        9: -12.5,
-        10: -15,
-        11: -17.5,
-        12: -20
-      };
-
-      let dataRate = spreadingFactor * ((4 / (4 + codingRate)) / (Math.pow(2, spreadingFactor) / (bandwidth / 1000))) * 1000
-
-      let sensitivity = -174 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
-
-      if (bandwidth === 203125 || bandwidth === 406250 || bandwidth > 500000) {
-        sensitivity = -165.6 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
-      }
-
-      let linkBudget = (transmitPower - sensitivity) + antennaGain;
-      this.RNodeInterfaceLoRaParameters.dataRate = dataRate < 1000
-          ? `${dataRate.toFixed(0)} bps`
-          : `${(dataRate / 1000).toFixed(2)} kbps`;
-      this.RNodeInterfaceLoRaParameters.linkBudget = `${linkBudget.toFixed(1)} dB`;
-      this.RNodeInterfaceLoRaParameters.sensitivity = `${sensitivity.toFixed(1)} dBm`;
-    },
-
-
-    toggleI2PPeerAccordion() {
-      this.I2PSettings.showPeerAccordion = !this.I2PSettings.showPeerAccordion;
-    },
-    addI2PPeer(address = "") {
-      this.I2PSettings.newInterfacePeers.push(address);
-    },
-    removeI2PPeer(index) {
-      this.I2PSettings.newInterfacePeers.splice(index, 1);
-    },
-    toggleAllSettings() {
-      this.showAllSettings = !this.showAllSettings;
-    },
-    toggleSharedInterfaceSettings() {
-      this.showSharedInterfaceSettings = !this.showSharedInterfaceSettings;
-    },
-    toggleRNodeLoRaParameters() {
-      this.showRNodeLoRaParameters = !this.showRNodeLoRaParameters;
-    },
-    toggleRNodeSubInterfaces() {
-      this.showRNodeSubInterfaces = !this.showRNodeSubInterfaces;
-    },
-    addSubInterface() {
-      this.RNodeMultiInterface.subInterfaces.push({
-        name: '',
-        frequency: null,
-        bandwidth: null,
-        txpower: null,
-        spreadingfactor: null,
-        codingrate: null,
-        vport: null
-      });
-    },
-    useKISSAX25() {
-      if (this.newInterfaceType === 'AX25KISSInterface') {
-        this.newInterfaceType = "KISSInterface";
-      } else {
-        this.newInterfaceType = 'AX25KISSInterface';
-      }
-    },
-    removeSubInterface(idx) {
-      this.RNodeMultiInterface.subInterfaces.splice(idx, 1);
-    },
-    async getAppInfo() {
-      try {
-        const response = await window.axios.get("/api/v1/app/info");
-        this.appInfo = response.data.app_info;
-        this.transportEnabled = this.appInfo.is_transport_enabled;
-      } catch (e) {
-        console.log(e);
-      }
-    },
-  },
 }
 </script>

From 8b2520f3fa34492a1cdfa6f1a60c202578dcba49 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 00:58:10 +1300
Subject: [PATCH 013/131] refactor interface section dropdown to a custom
 expanding section header component

---
 .../interfaces/AddInterfacePage.vue           | 63 +++++++++----------
 .../interfaces/ExpandingSectionHeader.vue     | 21 +++++++
 2 files changed, 50 insertions(+), 34 deletions(-)
 create mode 100644 src/frontend/components/interfaces/ExpandingSectionHeader.vue

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index e3af836..aaa2833 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -98,12 +98,9 @@
                     </div>
 
                     <div v-if="newInterfaceType === 'AutoInterface'" class="mb-4">
-
-                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional AutoInterface Settings</span>
-                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showAllSettings }">▲</span>
-                        </div>
-
+                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
+                            Additional AutoInterface Settings
+                        </ExpandingSectionHeader>
                         <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
 
                             <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional</p>
@@ -193,10 +190,9 @@
                     </div>
 
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-4">
-                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional TCP Client Interface settings</span>
-                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showAllSettings }">▲</span>
-                        </div>
+                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
+                            Additional TCP Client Interface settings
+                        </ExpandingSectionHeader>
                         <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
                             <div class="flex items-start">
                                 <div class="flex flex-col">
@@ -229,10 +225,9 @@
                     </div>
 
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-4">
-                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional Server Interface settings</span>
-                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 " :class="{ 'rotate-180': showAllSettings }">▲</span>
-                        </div>
+                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
+                            Additional Server Interface settings
+                        </ExpandingSectionHeader>
                         <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
                             <div class="mb-2">
                                 <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
@@ -272,10 +267,9 @@
                     <div v-if="newInterfaceType === 'I2PInterface'" class="mb-4">
                         <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.</span>
                         <div class="mt-4">
-                            <div @click="toggleI2PPeerAccordion" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                                <span class="font-semibold text-gray-900 dark:text-gray-100">Manage Peers</span>
-                                <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': I2PSettings.showPeerAccordion }">▲</span>
-                            </div>
+                            <ExpandingSectionHeader @click="toggleI2PPeerAccordion" :is-expanded="I2PSettings.showPeerAccordion">
+                                Manage Peers
+                            </ExpandingSectionHeader>
                             <div v-show="I2PSettings.showPeerAccordion" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
                                 <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index" class="flex items-center space-x-2">
                                     <input
@@ -384,10 +378,10 @@
                     <!-- RNode LoRa parameters -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
 
-                        <div @click="toggleRNodeLoRaParameters" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                            <span class="font-semibold text-gray-900 dark:text-gray-100">Show on-air RNode bitrate & link budget</span>
-                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showRNodeLoRaParameters }">▲</span>
-                        </div>
+                        <!-- Shared interface setings -->
+                        <ExpandingSectionHeader @click="toggleRNodeLoRaParameters" :is-expanded="showRNodeLoRaParameters">
+                            Show on-air RNode bitrate & link budget
+                        </ExpandingSectionHeader>
 
                         <div v-show="showRNodeLoRaParameters" class="mt-3 space-y-6 p-6 border border-gray-300 rounded-lg bg-gray-50 dark:bg-zinc-900 dark:border-zinc-700">
 
@@ -430,10 +424,9 @@
 
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
 
-                        <div @click="toggleAllSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                            <span class="font-semibold text-gray-900 dark:text-gray-100">Additional RNode Interface Settings</span>
-                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showAllSettings }">▲</span>
-                        </div>
+                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
+                            Additional RNode Interface Settings
+                        </ExpandingSectionHeader>
 
                         <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
 
@@ -492,10 +485,9 @@
                     </div>
 
                     <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-4">
-                        <div @click="toggleRNodeSubInterfaces" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                            <span class="font-semibold text-gray-900 dark:text-gray-100">Manage RNode Subinterfaces</span>
-                            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showRNodeSubInterfaces }">▲</span>
-                        </div>
+                        <ExpandingSectionHeader @click="toggleRNodeSubInterfaces" :is-expanded="showRNodeSubInterfaces">
+                            Manage RNode Sub-Interfaces
+                        </ExpandingSectionHeader>
                         <div v-show="showRNodeSubInterfaces" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
                             <div :key="idx" v-for="(sub, idx) in RNodeMultiInterface.subInterfaces" class="space-y-2 border-b border-gray-200 dark:border-zinc-700 pb-4 mb-4">
                                 <input
@@ -681,10 +673,9 @@
                     </div>
 
                     <!-- Shared interface setings -->
-                    <div v-if="newInterfaceType" @click="toggleSharedInterfaceSettings" class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-                        <span class="font-semibold text-gray-900 dark:text-gray-100">Shared Interface Settings</span>
-                        <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-180': showSharedInterfaceSettings }">▲</span>
-                    </div>
+                    <ExpandingSectionHeader v-if="newInterfaceType" @click="toggleSharedInterfaceSettings" :is-expanded="showSharedInterfaceSettings">
+                        Shared Interface Settings
+                    </ExpandingSectionHeader>
 
                     <div v-show="showSharedInterfaceSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
                         <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional.</p>
@@ -765,9 +756,13 @@
 <script>
 import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
+import ExpandingSectionHeader from "./ExpandingSectionHeader.vue";
 
 export default {
     name: 'AddInterfacePage',
+    components: {
+        ExpandingSectionHeader,
+    },
     data() {
         return {
 
diff --git a/src/frontend/components/interfaces/ExpandingSectionHeader.vue b/src/frontend/components/interfaces/ExpandingSectionHeader.vue
new file mode 100644
index 0000000..a2e01e8
--- /dev/null
+++ b/src/frontend/components/interfaces/ExpandingSectionHeader.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+        <span class="font-semibold text-gray-900 dark:text-gray-100">
+            <slot/>
+        </span>
+        <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-90': isExpanded }">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-5">
+                <rect width="256" height="256" fill="none"/>
+                <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z"/>
+            </svg>
+        </span>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ExpandingSectionHeader',
+    props: {
+        isExpanded: false,
+    },
+}
+</script>
\ No newline at end of file

From 68ebe4a1c94b54f62d31610b0ba8640015488392 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 01:01:10 +1300
Subject: [PATCH 014/131] remove comment

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index aaa2833..8416c77 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -378,7 +378,6 @@
                     <!-- RNode LoRa parameters -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
 
-                        <!-- Shared interface setings -->
                         <ExpandingSectionHeader @click="toggleRNodeLoRaParameters" :is-expanded="showRNodeLoRaParameters">
                             Show on-air RNode bitrate & link budget
                         </ExpandingSectionHeader>

From d7375081f3dda345e42de83752044f7671c1e158 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 01:38:00 +1300
Subject: [PATCH 015/131] move ifac settings to its own card section

---
 .../interfaces/AddInterfacePage.vue           | 93 ++++++++++---------
 .../interfaces/ExpandingSection.vue           | 35 +++++++
 .../interfaces/ExpandingSectionHeader.vue     |  2 +-
 3 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 src/frontend/components/interfaces/ExpandingSection.vue

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 8416c77..8ccf0be 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -697,55 +697,58 @@
                                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                             />
                         </div>
-                        <div class="mb-4">
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-zinc-100 mb-2">IFAC Settings</h3>
-                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ IFAC (Interface Access Code) settings are used for creating private networks and can be configured on the interface level.</p>
-                            <div class="grid grid-cols-3 gap-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
-                                    <input
-                                        v-model="sharedInterfaceSettings.network_name"
-                                        type="text"
-                                        placeholder="Enter network name"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
-                                    <input
-                                        v-model="sharedInterfaceSettings.passphrase"
-                                        type="text"
-                                        placeholder="Enter passphrase"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
-                                    <input
-                                        v-model="sharedInterfaceSettings.ifac_size"
-                                        type="number"
-                                        min="8"
-                                        max="512"
-                                        placeholder="Enter size (8-512)"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                            </div>
-                        </div>
                     </div>
 
                 </div>
+            </div>
 
-                <div class="p-2">
-
-                    <!-- add/save interface button -->
-                    <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                        <span v-if="isEditingInterface">Save Interface</span>
-                        <span v-else>Add Interface</span>
-                    </button>
-
-                </div>
+            <!-- ifac settings -->
+            <ExpandingSection>
+                <template v-slot:title>IFAC Settings</template>
+                <template v-slot:subtitle>Interface Access Code settings are used for creating private networks and can be configured on the interface level.</template>
+                <template v-slot:content>
+                    <div class="p-2">
+                        <div class="grid grid-cols-3 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
+                                <input
+                                    v-model="sharedInterfaceSettings.network_name"
+                                    type="text"
+                                    placeholder="Enter network name"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
+                                <input
+                                    v-model="sharedInterfaceSettings.passphrase"
+                                    type="text"
+                                    placeholder="Enter passphrase"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
+                                <input
+                                    v-model="sharedInterfaceSettings.ifac_size"
+                                    type="number"
+                                    min="8"
+                                    max="512"
+                                    placeholder="Enter size (8-512)"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </ExpandingSection>
 
+            <!-- add/save interface button -->
+            <div class="p-2 bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+                <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                    <span v-if="isEditingInterface">Save Interface</span>
+                    <span v-else>Add Interface</span>
+                </button>
             </div>
 
         </div>
@@ -756,10 +759,12 @@
 import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
 import ExpandingSectionHeader from "./ExpandingSectionHeader.vue";
+import ExpandingSection from "./ExpandingSection.vue";
 
 export default {
     name: 'AddInterfacePage',
     components: {
+        ExpandingSection,
         ExpandingSectionHeader,
     },
     data() {
diff --git a/src/frontend/components/interfaces/ExpandingSection.vue b/src/frontend/components/interfaces/ExpandingSection.vue
new file mode 100644
index 0000000..f171864
--- /dev/null
+++ b/src/frontend/components/interfaces/ExpandingSection.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+        <div @click="isExpanded = !isExpanded" class="flex p-2 justify-between cursor-pointer">
+            <div class="my-auto mr-auto">
+                <div class="font-bold dark:text-white">
+                    <slot name="title"/>
+                </div>
+                <div class="text-sm dark:text-white">
+                    <slot name="subtitle"/>
+                </div>
+            </div>
+            <div class="my-auto ml-2">
+                <div class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-90': isExpanded }">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-5">
+                        <rect width="256" height="256" fill="none"/>
+                        <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div v-if="isExpanded" class="divide-y divide-gray-200 dark:text-white">
+            <slot name="content"/>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ExpandingSection',
+    data() {
+        return {
+            isExpanded: false,
+        };
+    },
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/components/interfaces/ExpandingSectionHeader.vue b/src/frontend/components/interfaces/ExpandingSectionHeader.vue
index a2e01e8..e3121b6 100644
--- a/src/frontend/components/interfaces/ExpandingSectionHeader.vue
+++ b/src/frontend/components/interfaces/ExpandingSectionHeader.vue
@@ -15,7 +15,7 @@
 export default {
     name: 'ExpandingSectionHeader',
     props: {
-        isExpanded: false,
+        isExpanded: Boolean,
     },
 }
 </script>
\ No newline at end of file

From 3a13442bb96e6914a2f54e0e1e81eba3dccbb581 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 01:43:32 +1300
Subject: [PATCH 016/131] collapse ifac grid on small screens

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 8ccf0be..4f7f884 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -708,7 +708,7 @@
                 <template v-slot:subtitle>Interface Access Code settings are used for creating private networks and can be configured on the interface level.</template>
                 <template v-slot:content>
                     <div class="p-2">
-                        <div class="grid grid-cols-3 gap-4">
+                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-y-2 lg:gap-x-2">
                             <div>
                                 <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
                                 <input

From 812ff6b88772f6adc5044a6e9513e009aba3637c Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 01:54:44 +1300
Subject: [PATCH 017/131] fix styles

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 2 +-
 src/frontend/components/interfaces/ExpandingSection.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 4f7f884..b69f64c 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -53,7 +53,7 @@
             </div>
 
             <!-- add interface form -->
-            <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+            <div class="bg-white rounded shadow divide-y divide-gray-300 dark:divide-zinc-700 dark:bg-zinc-900">
                 <div class="p-2 font-bold dark:text-white">
                     <span v-if="isEditingInterface">Edit Interface</span>
                     <span v-else>Add Interface</span>
diff --git a/src/frontend/components/interfaces/ExpandingSection.vue b/src/frontend/components/interfaces/ExpandingSection.vue
index f171864..9d23a17 100644
--- a/src/frontend/components/interfaces/ExpandingSection.vue
+++ b/src/frontend/components/interfaces/ExpandingSection.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
-        <div @click="isExpanded = !isExpanded" class="flex p-2 justify-between cursor-pointer">
+    <div class="bg-white rounded shadow divide-y divide-gray-300 dark:divide-zinc-700 dark:bg-zinc-900 overflow-hidden">
+        <div @click="isExpanded = !isExpanded" class="flex p-2 justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-zinc-800">
             <div class="my-auto mr-auto">
                 <div class="font-bold dark:text-white">
                     <slot name="title"/>
                 </div>
-                <div class="text-sm dark:text-white">
+                <div class="text-sm text-gray-600 dark:text-gray-300">
                     <slot name="subtitle"/>
                 </div>
             </div>
@@ -13,7 +13,7 @@
                 <div class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-90': isExpanded }">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-5">
                         <rect width="256" height="256" fill="none"/>
-                        <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z"/>
+                        <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z" fill="currentColor"/>
                     </svg>
                 </div>
             </div>

From 0dc3dc955f785fdd331c475f53e9b307ad70e8d9 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 02:07:18 +1300
Subject: [PATCH 018/131] move optional auto interface settings to own section

---
 .../interfaces/AddInterfacePage.vue           | 159 +++++++++---------
 1 file changed, 80 insertions(+), 79 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index b69f64c..72ba6d8 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -97,85 +97,6 @@
                         </div>
                     </div>
 
-                    <div v-if="newInterfaceType === 'AutoInterface'" class="mb-4">
-                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
-                            Additional AutoInterface Settings
-                        </ExpandingSectionHeader>
-                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-
-                            <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional</p>
-                            <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Group ID</label>
-                                <input
-                                    type="text"
-                                    v-model="newInterfaceGroupID"
-                                    placeholder="reticulum"
-                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                />
-                            </div>
-
-                            <div class="flex-1">
-                                <label class="text-sm dark:text-zinc-100">Multicast Address Type</label>
-                                <select v-model="newInterfaceMulticastAddressType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                                    <option value="permanent">Permanent</option>
-                                    <option value="temporary">Temporary</option>
-                                </select>
-                            </div>
-
-                            <div class="flex items-center space-x-4 mt-4">
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network devices</label>
-                                    <input
-                                        type="text"
-                                        v-model="newInterfaceDevices"
-                                        placeholder="wlan0,eth1"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Ignored Devices</label>
-                                    <input
-                                        type="text"
-                                        v-model="newInterfaceIgnoredDevices"
-                                        placeholder="tun0,eth0"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                            </div>
-
-                            <div class="flex items-center space-x-4 mt-4">
-                                <div class="flex-1">
-                                    <label class="text-sm dark:text-zinc-100">Discovery Scope</label>
-                                    <select v-model="newInterfaceDiscoveryScope" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                                        <option value="global">Global</option>
-                                        <option value="admin">Admin</option>
-                                        <option value="organisation">Organisation</option>
-                                        <option value="site">Site</option>
-                                        <option value="link">Link</option>
-                                    </select>
-                                </div>
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Discovery Port</label>
-                                    <input
-                                        type="number"
-                                        v-model="newInterfaceDiscoveryPort"
-                                        placeholder="48555"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Data Port</label>
-                                    <input
-                                        type="number"
-                                        v-model="newInterfaceDataPort"
-                                        placeholder="49555"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
                     <!-- TCPClientInterface -->
                     <!-- interface target host -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
@@ -702,6 +623,86 @@
                 </div>
             </div>
 
+            <!-- optional AutoInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'AutoInterface'">
+                <template v-slot:title>Optional AutoInterface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div class="flex-1">
+                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Group ID</label>
+                            <input
+                                type="text"
+                                v-model="newInterfaceGroupID"
+                                placeholder="reticulum"
+                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                            />
+                        </div>
+
+                        <div class="flex-1">
+                            <label class="text-sm dark:text-zinc-100">Multicast Address Type</label>
+                            <select v-model="newInterfaceMulticastAddressType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                <option value="permanent">Permanent</option>
+                                <option value="temporary">Temporary</option>
+                            </select>
+                        </div>
+
+                        <div class="flex items-center space-x-4 mt-4">
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network devices</label>
+                                <input
+                                    type="text"
+                                    v-model="newInterfaceDevices"
+                                    placeholder="wlan0,eth1"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Ignored Devices</label>
+                                <input
+                                    type="text"
+                                    v-model="newInterfaceIgnoredDevices"
+                                    placeholder="tun0,eth0"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="flex items-center space-x-4 mt-4">
+                            <div class="flex-1">
+                                <label class="text-sm dark:text-zinc-100">Discovery Scope</label>
+                                <select v-model="newInterfaceDiscoveryScope" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                    <option value="global">Global</option>
+                                    <option value="admin">Admin</option>
+                                    <option value="organisation">Organisation</option>
+                                    <option value="site">Site</option>
+                                    <option value="link">Link</option>
+                                </select>
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Discovery Port</label>
+                                <input
+                                    type="number"
+                                    v-model="newInterfaceDiscoveryPort"
+                                    placeholder="48555"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Data Port</label>
+                                <input
+                                    type="number"
+                                    v-model="newInterfaceDataPort"
+                                    placeholder="49555"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- ifac settings -->
             <ExpandingSection>
                 <template v-slot:title>IFAC Settings</template>

From c555d8f15b605a75d0999ef814ea715249a58c26 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 02:18:57 +1300
Subject: [PATCH 019/131] move optional tcp client interface settings to own
 section

---
 .../interfaces/AddInterfacePage.vue           | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 72ba6d8..4ab6646 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -110,28 +110,6 @@
                         <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
-                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-4">
-                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
-                            Additional TCP Client Interface settings
-                        </ExpandingSectionHeader>
-                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-                            <div class="flex items-start">
-                                <div class="flex flex-col">
-                                    <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable KISS Framing</label>
-                                    <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
-                                </div>
-                                <input id="kiss-framing" type="checkbox" v-model="newInterfaceKISSFramingEnabled" class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="flex flex-col">
-                                    <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable I2P tunneling</label>
-                                    <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
-                                </div>
-                                <input id="i2p-tunneled" type="checkbox" v-model="newInterfaceI2PTunnelingEnabled" class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
-                            </div>
-                        </div>
-                    </div>
-
                     <!-- TCPServerInterface -->
                     <!-- interface listen ip -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
@@ -703,6 +681,32 @@
                 </template>
             </ExpandingSection>
 
+            <!-- optional TCPClientInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'TCPClientInterface'">
+                <template v-slot:title>Optional TCPClientInterface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div class="flex">
+                            <div class="flex flex-col mr-auto">
+                                <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable KISS Framing</label>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
+                            </div>
+                            <input id="kiss-framing" type="checkbox" v-model="newInterfaceKISSFramingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
+                        </div>
+
+                        <div class="flex">
+                            <div class="flex flex-col mr-auto">
+                                <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable I2P tunneling</label>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
+                            </div>
+                            <input id="i2p-tunneled" type="checkbox" v-model="newInterfaceI2PTunnelingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- ifac settings -->
             <ExpandingSection>
                 <template v-slot:title>IFAC Settings</template>

From e2b844f2c2ae72ef7b26f543fe19784caee50366 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 02:24:12 +1300
Subject: [PATCH 020/131] move shared interface settings to own common
 interface settings section

---
 .../interfaces/AddInterfacePage.vue           | 63 +++++++++----------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 4ab6646..41fb285 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -570,34 +570,6 @@
                         <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
-                    <!-- Shared interface setings -->
-                    <ExpandingSectionHeader v-if="newInterfaceType" @click="toggleSharedInterfaceSettings" :is-expanded="showSharedInterfaceSettings">
-                        Shared Interface Settings
-                    </ExpandingSectionHeader>
-
-                    <div v-show="showSharedInterfaceSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-                        <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional.</p>
-                        <div v-show="transportEnabled" class="mb-4">
-                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Interface Mode</label>
-                            <select v-model="sharedInterfaceSettings.mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                                <option value="full">Full</option>
-                                <option value="gateway">Gateway</option>
-                                <option value="access_point">Access Point</option>
-                                <option value="roaming">Roaming</option>
-                                <option value="boundary">Boundary</option>
-                            </select>
-                        </div>
-                        <div class="mb-4">
-                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Inferred Interface Bitrate</label>
-                            <input
-                                v-model="sharedInterfaceSettings.bitrate"
-                                type="number"
-                                placeholder="Enter inferred bitrate"
-                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                            />
-                        </div>
-                    </div>
-
                 </div>
             </div>
 
@@ -707,6 +679,37 @@
                 </template>
             </ExpandingSection>
 
+            <!-- common interface settings -->
+            <ExpandingSection>
+                <template v-slot:title>Common Interface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div v-show="transportEnabled">
+                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Interface Mode</label>
+                            <select v-model="sharedInterfaceSettings.mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                <option value="full">Full</option>
+                                <option value="gateway">Gateway</option>
+                                <option value="access_point">Access Point</option>
+                                <option value="roaming">Roaming</option>
+                                <option value="boundary">Boundary</option>
+                            </select>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Inferred Interface Bitrate</label>
+                            <input
+                                v-model="sharedInterfaceSettings.bitrate"
+                                type="number"
+                                placeholder="Enter inferred bitrate"
+                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                            />
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- ifac settings -->
             <ExpandingSection>
                 <template v-slot:title>IFAC Settings</template>
@@ -777,7 +780,6 @@ export default {
 
             isEditingInterface: false,
             showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
-            showSharedInterfaceSettings: false, // shared interface settings like IFAC, bitrate
             showRNodeLoRaParameters: false, // accordion for displaying RNode physical LoRa parameters
             showRNodeSubInterfaces: false, // accordion for adding multiple RNode interfaces
 
@@ -1264,9 +1266,6 @@ export default {
         toggleAllSettings() {
             this.showAllSettings = !this.showAllSettings;
         },
-        toggleSharedInterfaceSettings() {
-            this.showSharedInterfaceSettings = !this.showSharedInterfaceSettings;
-        },
         toggleRNodeLoRaParameters() {
             this.showRNodeLoRaParameters = !this.showRNodeLoRaParameters;
         },

From 01562aff75cccab1ae3bbe327a1bf638db3632ff Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 02:33:05 +1300
Subject: [PATCH 021/131] move optional rnode interface settings to own section

---
 .../interfaces/AddInterfacePage.vue           | 105 +++++++++---------
 1 file changed, 52 insertions(+), 53 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 41fb285..2155487 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -320,59 +320,6 @@
 
                     </div>
 
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
-
-                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
-                            Additional RNode Interface Settings
-                        </ExpandingSectionHeader>
-
-                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-
-                            <div class="flex items-center space-x-4">
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
-                                    <input
-                                        type="text"
-                                        v-model="newInterfaceCallsign"
-                                        placeholder="Enter callsign"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
-                                    <input
-                                        type="number"
-                                        v-model="newInterfaceIDInterval"
-                                        placeholder="Enter interval (seconds)"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                            </div>
-
-                            <div class="flex items-center space-x-4">
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Short)</label>
-                                    <input
-                                        type="number"
-                                        v-model="newInterfaceAirtimeLimitShort"
-                                        placeholder="Enter short airtime limit (seconds)"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                                <div class="flex-1">
-                                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Long)</label>
-                                    <input
-                                        type="number"
-                                        v-model="newInterfaceAirtimeLimitLong"
-                                        placeholder="Enter long airtime limit (seconds)"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
-                                    />
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-
                     <!-- RNodeMultiInterface -->
                     <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
                         <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom devices with multiple LoRa transceivers such as the openCom XL.</p>
@@ -679,6 +626,58 @@
                 </template>
             </ExpandingSection>
 
+            <!-- optional RNodeInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
+                <template v-slot:title>Optional RNodeInterface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div class="flex items-center space-x-4">
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                                <input
+                                    type="text"
+                                    v-model="newInterfaceCallsign"
+                                    placeholder="Enter callsign"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                                <input
+                                    type="number"
+                                    v-model="newInterfaceIDInterval"
+                                    placeholder="Enter interval (seconds)"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="flex items-center space-x-4">
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Short)</label>
+                                <input
+                                    type="number"
+                                    v-model="newInterfaceAirtimeLimitShort"
+                                    placeholder="Enter short airtime limit (seconds)"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                            <div class="flex-1">
+                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Long)</label>
+                                <input
+                                    type="number"
+                                    v-model="newInterfaceAirtimeLimitLong"
+                                    placeholder="Enter long airtime limit (seconds)"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                                />
+                            </div>
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- common interface settings -->
             <ExpandingSection>
                 <template v-slot:title>Common Interface Settings</template>

From 019ba93d8061373c5a63c7b820c7fc0e42823ef9 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 15:22:08 +1300
Subject: [PATCH 022/131] move optional rnode interface settings to own section

---
 .../interfaces/AddInterfacePage.vue           | 93 +++++++++----------
 1 file changed, 43 insertions(+), 50 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 2155487..1527155 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -274,52 +274,6 @@
 
                     </div>
 
-                    <!-- RNode LoRa parameters -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
-
-                        <ExpandingSectionHeader @click="toggleRNodeLoRaParameters" :is-expanded="showRNodeLoRaParameters">
-                            Show on-air RNode bitrate & link budget
-                        </ExpandingSectionHeader>
-
-                        <div v-show="showRNodeLoRaParameters" class="mt-3 space-y-6 p-6 border border-gray-300 rounded-lg bg-gray-50 dark:bg-zinc-900 dark:border-zinc-700">
-
-                            <div class="space-y-2">
-                                <div class="flex items-start space-x-2">
-                                    <div class="w-1/4">
-                                        <label class="block text-sm font-medium text-gray-800 dark:text-white">Antenna Gain (dBi)</label>
-                                        <input
-                                            type="number"
-                                            v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
-                                            placeholder="Enter gain"
-                                            class="w-1/2 bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"
-                                        />
-                                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1 dBi of gain, where a directional Yagi might have 5 dBi of gain.</p>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div>
-                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center">On-Air Calculations</h3>
-                                <div class="grid grid-cols-3 gap-4 text-center mt-2">
-                                    <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
-                                        <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.sensitivity }}</div>
-                                    </div>
-                                    <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
-                                        <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.dataRate }}</div>
-                                    </div>
-                                    <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                                        <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
-                                        <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.linkBudget }}</div>
-                                    </div>
-                                </div>
-                            </div>
-
-                        </div>
-
-                    </div>
-
                     <!-- RNodeMultiInterface -->
                     <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
                         <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom devices with multiple LoRa transceivers such as the openCom XL.</p>
@@ -678,6 +632,49 @@
                 </template>
             </ExpandingSection>
 
+            <!-- RNodeInterface bitrate & link budget -->
+            <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
+                <template v-slot:title>Calculated On-Air RNode Bitrate & Link Budget</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div class="space-y-2">
+                            <div class="flex items-start space-x-2">
+                                <div class="w-1/4">
+                                    <label class="block text-sm font-medium text-gray-800 dark:text-white">Antenna Gain (dBi)</label>
+                                    <input
+                                        type="number"
+                                        v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
+                                        placeholder="Enter gain"
+                                        class="w-1/2 bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"
+                                    />
+                                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1 dBi of gain, where a directional Yagi might have 5 dBi of gain.</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div>
+                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center">On-Air Calculations</h3>
+                            <div class="grid grid-cols-3 gap-4 text-center mt-2">
+                                <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
+                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.sensitivity }}</div>
+                                </div>
+                                <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
+                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.dataRate }}</div>
+                                </div>
+                                <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
+                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.linkBudget }}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- common interface settings -->
             <ExpandingSection>
                 <template v-slot:title>Common Interface Settings</template>
@@ -779,7 +776,6 @@ export default {
 
             isEditingInterface: false,
             showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
-            showRNodeLoRaParameters: false, // accordion for displaying RNode physical LoRa parameters
             showRNodeSubInterfaces: false, // accordion for adding multiple RNode interfaces
 
             appInfo: null,
@@ -1265,9 +1261,6 @@ export default {
         toggleAllSettings() {
             this.showAllSettings = !this.showAllSettings;
         },
-        toggleRNodeLoRaParameters() {
-            this.showRNodeLoRaParameters = !this.showRNodeLoRaParameters;
-        },
         toggleRNodeSubInterfaces() {
             this.showRNodeSubInterfaces = !this.showRNodeSubInterfaces;
         },

From 9b62f60e189dd30847c735a39cd269c1c90f2c42 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 15:35:02 +1300
Subject: [PATCH 023/131] simplify ui for ip2 interface peers

---
 .../interfaces/AddInterfacePage.vue           | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 1527155..244d2fa 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -163,24 +163,21 @@
                     </div>
 
                     <!-- I2PInterface -->
-                    <div v-if="newInterfaceType === 'I2PInterface'" class="mb-4">
-                        <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.</span>
-                        <div class="mt-4">
-                            <ExpandingSectionHeader @click="toggleI2PPeerAccordion" :is-expanded="I2PSettings.showPeerAccordion">
-                                Manage Peers
-                            </ExpandingSectionHeader>
-                            <div v-show="I2PSettings.showPeerAccordion" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-                                <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index" class="flex items-center space-x-2">
-                                    <input
-                                        type="text"
-                                        v-model="I2PSettings.newInterfacePeers[index]"
-                                        placeholder="Enter peer address (ex: 5urvjicpzi7q3ybztsef4i5ow2aq4soktfj7zedz53s47r54jnqq.b32.i2p)"
-                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                                    />
-                                    <button @click="removeI2PPeer(index)" type="button" class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">Remove</button>
-                                </div>
-                                <button @click="addI2PPeer('')" type="button" class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">Add Peer</button>
+                    <!-- peers -->
+                    <div v-if="newInterfaceType === 'I2PInterface'">
+                        <div class="mb-2 text-sm text-gray-500 dark:text-zinc-300">ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.</div>
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Peers</label>
+                        <div class="space-y-2">
+                            <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index" class="flex items-center space-x-2">
+                                <input
+                                    type="text"
+                                    v-model="I2PSettings.newInterfacePeers[index]"
+                                    placeholder="Enter peer address (e.g: 5urvjicpzi7q3ybztsef4i5ow2aq4soktfj7zedz53s47r54jnqq.b32.i2p)"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                />
+                                <button @click="removeI2PPeer(index)" type="button" class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">Remove</button>
                             </div>
+                            <button @click="addI2PPeer('')" type="button" class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">Add Peer</button>
                         </div>
                     </div>
 
@@ -749,7 +746,7 @@
 
             <!-- add/save interface button -->
             <div class="p-2 bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
-                <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     <span v-if="isEditingInterface">Save Interface</span>
                     <span v-else>Add Interface</span>
                 </button>

From f87a360d5c558070b2ccfac0e8d17c69570fd6c7 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 15:49:29 +1300
Subject: [PATCH 024/131] move optional tcp server interface and udp interface
 settings to own section

---
 .../interfaces/AddInterfacePage.vue           | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 244d2fa..f9e36b3 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -123,32 +123,6 @@
                         <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
-                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-4">
-                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
-                            Additional Server Interface settings
-                        </ExpandingSectionHeader>
-                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-                            <div class="mb-2">
-                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
-                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Binds the interface to a specific network interface</span>
-                                <input type="text" placeholder="eth0" v-model="newInterfaceNetworkDevice" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            </div>
-                            <div class="flex items-start">
-                                <div class="flex flex-col">
-                                    <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Prefer IPv6</label>
-                                    <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Binds the TCP Server Interface to an IPv6 address</span>
-                                </div>
-                                <input
-                                    id="prefer-ipv6"
-                                    type="checkbox"
-                                    value="1"
-                                    v-model="newInterfacePreferIPV6"
-                                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
-                                />
-                            </div>
-                        </div>
-                    </div>
-
                     <!-- UDPInterface -->
                     <!-- interface forward ip -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
@@ -461,7 +435,7 @@
 
                     <!-- Pipe Interface -->
                     <div v-if="newInterfaceType === 'PipeInterface'" class="mb-2">
-                        <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</span>
+                        <div class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</div>
                         <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
                         <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay (seconds)</label>
@@ -560,7 +534,7 @@
                         <div class="flex">
                             <div class="flex flex-col mr-auto">
                                 <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable KISS Framing</label>
-                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">Enable this when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
                             </div>
                             <input id="kiss-framing" type="checkbox" v-model="newInterfaceKISSFramingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
                         </div>
@@ -568,7 +542,7 @@
                         <div class="flex">
                             <div class="flex flex-col mr-auto">
                                 <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable I2P tunneling</label>
-                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
                             </div>
                             <input id="i2p-tunneled" type="checkbox" v-model="newInterfaceI2PTunnelingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
                         </div>
@@ -577,6 +551,36 @@
                 </template>
             </ExpandingSection>
 
+            <!-- optional TCPClientInterface and UDPInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'">
+                <template v-slot:title>Optional {{ newInterfaceType }} settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
+                            <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the interface to a specific network interface</span>
+                            <input type="text" placeholder="e.g: eth0" v-model="newInterfaceNetworkDevice" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        </div>
+
+                        <div class="flex items-start">
+                            <div class="flex flex-col mr-auto">
+                                <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Prefer IPv6</label>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the TCP Server Interface to an IPv6 address</span>
+                            </div>
+                            <input
+                                id="prefer-ipv6"
+                                type="checkbox"
+                                value="1"
+                                v-model="newInterfacePreferIPV6"
+                                class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                            />
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- optional RNodeInterface settings -->
             <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
                 <template v-slot:title>Optional RNodeInterface Settings</template>

From 9741cdcd604f6402b98525ad83b5a58b5511a1e1 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 16:12:23 +1300
Subject: [PATCH 025/131] adjust rnode subinterfaces ui

---
 .../interfaces/AddInterfacePage.vue           | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index f9e36b3..5a82883 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -254,17 +254,18 @@
                         </select>
                     </div>
 
-                    <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-4">
-                        <ExpandingSectionHeader @click="toggleRNodeSubInterfaces" :is-expanded="showRNodeSubInterfaces">
-                            Manage RNode Sub-Interfaces
-                        </ExpandingSectionHeader>
-                        <div v-show="showRNodeSubInterfaces" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-                            <div :key="idx" v-for="(sub, idx) in RNodeMultiInterface.subInterfaces" class="space-y-2 border-b border-gray-200 dark:border-zinc-700 pb-4 mb-4">
+                    <!-- RNodeMultiInterface: Sub Interfaces -->
+                    <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Sub-Interfaces</label>
+                        <div class="space-y-3">
+                            <div :key="idx" v-for="(sub, idx) in RNodeMultiInterface.subInterfaces" class="p-2 space-y-2 border border-gray-200 rounded-lg dark:border-zinc-700">
+
                                 <input
                                     v-model="sub.name"
                                     type="text"
-                                    placeholder="Subinterface Name"
+                                    placeholder="Sub-Interface Name"
                                     class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+
                                 <div class="flex gap-2">
                                     <div class="flex-1">
                                         <label class="text-sm dark:text-zinc-100">Frequency (Hz)</label>
@@ -280,6 +281,7 @@
                                         </select>
                                     </div>
                                 </div>
+
                                 <div class="flex gap-2">
                                     <div class="flex-1">
                                         <label class="text-sm dark:text-zinc-100">Spreading Factor</label>
@@ -294,6 +296,7 @@
                                         </select>
                                     </div>
                                 </div>
+
                                 <div class="flex gap-2 items-center">
                                     <div class="flex-1">
                                         <label class="text-sm dark:text-zinc-100">TX Power (dBm)</label>
@@ -310,9 +313,11 @@
                                             class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                                     </div>
                                 </div>
-                                <button @click="removeSubInterface(idx)" type="button" class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">Remove Subinterface</button>
+
+                                <button @click="removeSubInterface(idx)" type="button" class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">Remove Sub-Interface</button>
+
                             </div>
-                            <button @click="addSubInterface" type="button" class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">Add Subinterface</button>
+                            <button @click="addSubInterface" type="button" class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">Add Sub-Interface</button>
                         </div>
                     </div>
 
@@ -777,7 +782,6 @@ export default {
 
             isEditingInterface: false,
             showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
-            showRNodeSubInterfaces: false, // accordion for adding multiple RNode interfaces
 
             appInfo: null,
             transportEnabled: false,
@@ -1262,9 +1266,6 @@ export default {
         toggleAllSettings() {
             this.showAllSettings = !this.showAllSettings;
         },
-        toggleRNodeSubInterfaces() {
-            this.showRNodeSubInterfaces = !this.showRNodeSubInterfaces;
-        },
         addSubInterface() {
             this.RNodeMultiInterface.subInterfaces.push({
                 name: '',

From dacd2ea3f2ed8b6938bf6d6bfe7423aedb394a8c Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 16:13:54 +1300
Subject: [PATCH 026/131] remove unused component

---
 .../interfaces/AddInterfacePage.vue           |  2 --
 .../interfaces/ExpandingSectionHeader.vue     | 21 -------------------
 2 files changed, 23 deletions(-)
 delete mode 100644 src/frontend/components/interfaces/ExpandingSectionHeader.vue

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 5a82883..02e34b7 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -768,14 +768,12 @@
 <script>
 import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
-import ExpandingSectionHeader from "./ExpandingSectionHeader.vue";
 import ExpandingSection from "./ExpandingSection.vue";
 
 export default {
     name: 'AddInterfacePage',
     components: {
         ExpandingSection,
-        ExpandingSectionHeader,
     },
     data() {
         return {
diff --git a/src/frontend/components/interfaces/ExpandingSectionHeader.vue b/src/frontend/components/interfaces/ExpandingSectionHeader.vue
deleted file mode 100644
index e3121b6..0000000
--- a/src/frontend/components/interfaces/ExpandingSectionHeader.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
-        <span class="font-semibold text-gray-900 dark:text-gray-100">
-            <slot/>
-        </span>
-        <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-90': isExpanded }">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-5">
-                <rect width="256" height="256" fill="none"/>
-                <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z"/>
-            </svg>
-        </span>
-    </div>
-</template>
-<script>
-export default {
-    name: 'ExpandingSectionHeader',
-    props: {
-        isExpanded: Boolean,
-    },
-}
-</script>
\ No newline at end of file

From dabd6c4a3735eb265a7ea65b9ef5039e661422a6 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 16:35:57 +1300
Subject: [PATCH 027/131] ui adjustments

---
 .../interfaces/AddInterfacePage.vue           | 93 ++++++++++---------
 1 file changed, 51 insertions(+), 42 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 02e34b7..cad3425 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -63,7 +63,7 @@
                     <!-- iGeneric interface settings -->
                     <!-- interface name -->
                     <div>
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
                         <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name"
                                v-model="newInterfaceName"
                                class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
@@ -73,7 +73,7 @@
 
                     <!-- interface type -->
                     <div class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
                         <select v-model="newInterfaceType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                             <option disabled selected>--</option>
                             <option value="AutoInterface">Auto Interface</option>
@@ -100,39 +100,39 @@
                     <!-- TCPClientInterface -->
                     <!-- interface target host -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
                         <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface target port -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
                         <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- TCPServerInterface -->
                     <!-- interface listen ip -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
                         <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
                         <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- UDPInterface -->
                     <!-- interface forward ip -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
                         <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
                         <input type="text" placeholder="1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
@@ -140,7 +140,7 @@
                     <!-- peers -->
                     <div v-if="newInterfaceType === 'I2PInterface'">
                         <div class="mb-2 text-sm text-gray-500 dark:text-zinc-300">ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.</div>
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Peers</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Peers</label>
                         <div class="space-y-2">
                             <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index" class="flex items-center space-x-2">
                                 <input
@@ -158,7 +158,7 @@
                     <!-- RNode interface -->
                     <!-- interface port -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
                         <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
@@ -168,7 +168,7 @@
                         <!-- interface Frequency -->
                         <div class="flex-1">
                             <div class="mb-2">
-                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency</label>
                                 <div class="flex items-center gap-2">
                                     <div class="flex flex-col">
                                         <input
@@ -210,7 +210,7 @@
                         <!-- interface Bandwidth -->
                         <div class="flex-1">
                             <div class="mb-2">
-                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
                                 <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                     <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
                                 </select>
@@ -221,7 +221,7 @@
 
                     <!-- interface txpower -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
                         <input v-model="newInterfaceTxpower" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                     </div>
 
@@ -229,7 +229,7 @@
 
                         <!-- interface spreading factor -->
                         <div class="flex-1">
-                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
                             <select v-model="newInterfaceSpreadingFactor" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                 <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
                             </select>
@@ -237,7 +237,7 @@
 
                         <!-- interface coding rate -->
                         <div class="flex-1">
-                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
                             <select v-model="newInterfaceCodingRate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                 <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{ codingrate }}</option>
                             </select>
@@ -248,7 +248,7 @@
                     <!-- RNodeMultiInterface -->
                     <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
                         <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom devices with multiple LoRa transceivers such as the openCom XL.</p>
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
                         <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
@@ -256,7 +256,7 @@
 
                     <!-- RNodeMultiInterface: Sub Interfaces -->
                     <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Sub-Interfaces</label>
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Sub-Interfaces</label>
                         <div class="space-y-3">
                             <div :key="idx" v-for="(sub, idx) in RNodeMultiInterface.subInterfaces" class="p-2 space-y-2 border border-gray-200 rounded-lg dark:border-zinc-700">
 
@@ -324,28 +324,30 @@
                     <!-- Serial, KISS, and AX25Kiss -->
                     <div v-if="['SerialInterface', 'KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
 
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
-                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
-                        </select>
+                        <div class="mb-2">
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                            <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
+                            </select>
+                        </div>
 
                         <div class="mb-2">
-                            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Serial connection baud rate (bps)</label>
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Serial connection baud rate (bps)</label>
                             <input v-model="newInterfaceSpeed" placeholder="115200" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
-                        <div class="mt-2">
-                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Databits</label>
+                        <div class="mb-2">
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Databits</label>
                             <input v-model="newInterfaceDatabits" type="number" placeholder="8" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
-                        <div class="mt-2">
-                            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Parity </label>
+                        <div class="mb-2">
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Parity </label>
                             <input v-model="newInterfaceParity" type="number" placeholder="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
-                        <div class="mt-2">
-                            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Stopbits</label>
+                        <div>
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Stopbits</label>
                             <input v-model="newInterfaceStopbits" type="number" placeholder="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
@@ -354,7 +356,7 @@
                     <!-- KISS and AX.25 KISS -->
                     <div v-if="['KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
 
-                        <div class="flex items-center">
+                        <div class="flex items-center mb-2">
                             <input
                                 id="use-ax25"
                                 type="checkbox"
@@ -362,13 +364,12 @@
                                 @click="useKISSAX25"
                                 class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
                             />
-                            <label for="use-ax25" class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Use AX.25</label>
+                            <label for="use-ax25" class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Enable AX.25 Framing</label>
                         </div>
-                        <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Enables AX.25 Framing</span>
 
                         <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Preamble (milliseconds)</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Preamble (milliseconds)</label>
                                 <input
                                     v-model="this.newInterfacePreamble"
                                     type="number"
@@ -377,7 +378,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">TX Tail (milliseconds)</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">TX Tail (milliseconds)</label>
                                 <input
                                     v-model="this.newInterfaceTXTail"
                                     type="number"
@@ -386,7 +387,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Persistence (milliseconds)</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Persistence (milliseconds)</label>
                                 <input
                                     v-model="this.newInterfacePersistence"
                                     type="number"
@@ -395,7 +396,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Slot Time (milliseconds)</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Slot Time (milliseconds)</label>
                                 <input
                                     v-model="this.newInterfaceSlotTime"
                                     type="number"
@@ -407,7 +408,7 @@
 
                         <div class="flex items-center space-x-4 mt-4">
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">SSID</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">SSID</label>
                                 <input
                                     type="text"
                                     value="0"
@@ -417,7 +418,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
                                 <input
                                     type="text"
                                     v-model="newInterfaceCallsign"
@@ -426,7 +427,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
                                 <input
                                     type="number"
                                     v-model="newInterfaceIDInterval"
@@ -440,11 +441,19 @@
 
                     <!-- Pipe Interface -->
                     <div v-if="newInterfaceType === 'PipeInterface'" class="mb-2">
+
                         <div class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</div>
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
-                        <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                        <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay (seconds)</label>
-                        <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+
+                        <div class="mb-2">
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
+                            <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        </div>
+
+                        <div>
+                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay (seconds)</label>
+                            <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        </div>
+
                     </div>
 
                 </div>

From c5e4776dc12709250101fb295b12f0ada60ed612 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 17:00:37 +1300
Subject: [PATCH 028/131] tidy ui for on air rnode bitrate and link budget

---
 .../interfaces/AddInterfacePage.vue           | 82 +++++++++----------
 1 file changed, 39 insertions(+), 43 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index cad3425..1891ae1 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -459,6 +459,45 @@
                 </div>
             </div>
 
+            <!-- RNodeInterface bitrate & link budget -->
+            <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
+                <template v-slot:title>Calculated On-Air RNode Bitrate & Link Budget</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <label class="block mb-1 text-sm font-medium text-gray-800 dark:text-white">Antenna Gain (dBi)</label>
+                            <input
+                                type="number"
+                                v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
+                                placeholder="Enter gain"
+                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                            />
+                            <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1 dBi of gain, where a directional Yagi might have 5 dBi of gain.</p>
+                        </div>
+
+                        <div>
+                            <label class="block mb-1 text-sm font-medium text-gray-800 dark:text-white">On-Air Calculations</label>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-center">
+                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800">
+                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
+                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.sensitivity ?? "???" }}</div>
+                                </div>
+                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800">
+                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
+                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.dataRate ?? "???" }}</div>
+                                </div>
+                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800">
+                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
+                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.linkBudget ?? "???" }}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- optional AutoInterface settings -->
             <ExpandingSection v-if="newInterfaceType === 'AutoInterface'">
                 <template v-slot:title>Optional AutoInterface Settings</template>
@@ -647,49 +686,6 @@
                 </template>
             </ExpandingSection>
 
-            <!-- RNodeInterface bitrate & link budget -->
-            <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
-                <template v-slot:title>Calculated On-Air RNode Bitrate & Link Budget</template>
-                <template v-slot:content>
-                    <div class="p-2 space-y-3">
-
-                        <div class="space-y-2">
-                            <div class="flex items-start space-x-2">
-                                <div class="w-1/4">
-                                    <label class="block text-sm font-medium text-gray-800 dark:text-white">Antenna Gain (dBi)</label>
-                                    <input
-                                        type="number"
-                                        v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
-                                        placeholder="Enter gain"
-                                        class="w-1/2 bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"
-                                    />
-                                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1 dBi of gain, where a directional Yagi might have 5 dBi of gain.</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div>
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center">On-Air Calculations</h3>
-                            <div class="grid grid-cols-3 gap-4 text-center mt-2">
-                                <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
-                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.sensitivity }}</div>
-                                </div>
-                                <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
-                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.dataRate }}</div>
-                                </div>
-                                <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
-                                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
-                                    <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.linkBudget }}</div>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                </template>
-            </ExpandingSection>
-
             <!-- common interface settings -->
             <ExpandingSection>
                 <template v-slot:title>Common Interface Settings</template>

From 6c43c2cc4fba62e041c2867e69ffb604e0c5c134 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 17:02:43 +1300
Subject: [PATCH 029/131] revert so interfaces page can scroll

---
 src/frontend/components/interfaces/InterfacesPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/components/interfaces/InterfacesPage.vue b/src/frontend/components/interfaces/InterfacesPage.vue
index 52d3f8f..c25c890 100644
--- a/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/src/frontend/components/interfaces/InterfacesPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
-        <div class="h-full  p-2 space-y-2">
+        <div class="overflow-y-auto p-2 space-y-2">
 
             <!-- warning - keeping orange-500 for warning visibility in both modes -->
             <div class="flex bg-orange-500 p-2 text-sm font-semibold leading-6 text-white rounded shadow">

From ce52532522a3c86ddcad179448f64a10f034ab27 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 17:21:01 +1300
Subject: [PATCH 030/131] ui adjustments for rnode interface

---
 .../interfaces/AddInterfacePage.vue           | 100 ++++++++----------
 1 file changed, 46 insertions(+), 54 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 1891ae1..e6ca1c3 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -163,60 +163,52 @@
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
                     </div>
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
 
-                        <!-- interface Frequency -->
-                        <div class="flex-1">
-                            <div class="mb-2">
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency</label>
-                                <div class="flex items-center gap-2">
-                                    <div class="flex flex-col">
-                                        <input
-                                            type="number"
-                                            v-model.number="RNodeGHzValue"
-                                            min="0"
-                                            placeholder="GHz"
-                                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                                        />
-                                        <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">GHz</label>
-                                    </div>
-                                    <div class="flex flex-col">
-                                        <input
-                                            type="number"
-                                            v-model.number="RNodeMHzValue"
-                                            min="0"
-                                            placeholder="MHz"
-                                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                                        />
-                                        <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">MHz</label>
-                                    </div>
-                                    <div class="flex flex-col">
-                                        <input
-                                            type="number"
-                                            v-model.number="RNodekHzValue"
-                                            min="0"
-                                            placeholder="kHz"
-                                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
-                                        />
-                                        <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">kHz</label>
-                                    </div>
-                                </div>
-                                <div class="text-sm text-gray-600 dark:text-zinc-100 mt-2 font-bold">
-                                    Selected Frequency: {{ formattedFrequency }}
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- interface Bandwidth -->
-                        <div class="flex-1">
-                            <div class="mb-2">
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
-                                <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                                    <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
-                                </select>
+                    <!-- interface Frequency -->
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">
+                            <span>Frequency</span><span v-if="formattedFrequency">: {{ formattedFrequency }}</span>
+                        </label>
+                        <div class="flex items-center">
+                            <div class="flex flex-col">
+                                <input
+                                    type="number"
+                                    v-model.number="RNodeGHzValue"
+                                    min="0"
+                                    placeholder="GHz"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                />
+                                <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">GHz</label>
+                            </div>
+                            <div class="flex flex-col">
+                                <input
+                                    type="number"
+                                    v-model.number="RNodeMHzValue"
+                                    min="0"
+                                    placeholder="MHz"
+                                    class="bg-gray-50 border-y border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                />
+                                <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">MHz</label>
+                            </div>
+                            <div class="flex flex-col">
+                                <input
+                                    type="number"
+                                    v-model.number="RNodekHzValue"
+                                    min="0"
+                                    placeholder="kHz"
+                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                                />
+                                <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">kHz</label>
                             </div>
                         </div>
+                    </div>
 
+                    <!-- interface bandwidth -->
+                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
+                        <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                            <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
+                        </select>
                     </div>
 
                     <!-- interface txpower -->
@@ -461,7 +453,7 @@
 
             <!-- RNodeInterface bitrate & link budget -->
             <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
-                <template v-slot:title>Calculated On-Air RNode Bitrate & Link Budget</template>
+                <template v-slot:title>Calculated RNode Bitrate & Link Budget</template>
                 <template v-slot:content>
                     <div class="p-2 space-y-3">
 
@@ -479,15 +471,15 @@
                         <div>
                             <label class="block mb-1 text-sm font-medium text-gray-800 dark:text-white">On-Air Calculations</label>
                             <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-center">
-                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800">
+                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800 dark:border-zinc-600">
                                     <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
                                     <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.sensitivity ?? "???" }}</div>
                                 </div>
-                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800">
+                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800 dark:border-zinc-600">
                                     <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
                                     <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.dataRate ?? "???" }}</div>
                                 </div>
-                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800">
+                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800 dark:border-zinc-600">
                                     <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
                                     <div class="text-xl font-bold text-gray-900 dark:text-white">{{ RNodeInterfaceLoRaParameters.linkBudget ?? "???" }}</div>
                                 </div>

From d4b5b99045ea94ebe2e8e02c97305a78c68c3ad9 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 17:26:10 +1300
Subject: [PATCH 031/131] add e.g to ui for example values

---
 .../components/interfaces/AddInterfacePage.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index e6ca1c3..9bec90a 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -101,39 +101,39 @@
                     <!-- interface target host -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
                         <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
-                        <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <input type="text" placeholder="e.g: example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface target port -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
                         <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <input type="text" placeholder="e.g: 1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- TCPServerInterface -->
                     <!-- interface listen ip -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
                         <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
-                        <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <input type="text" placeholder="e.g: 0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
                         <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <input type="text" placeholder="e.g: 1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- UDPInterface -->
                     <!-- interface forward ip -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
                         <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
-                        <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <input type="text" placeholder="e.g: 255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
                         <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        <input type="text" placeholder="e.g: 1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- I2PInterface -->
@@ -438,7 +438,7 @@
 
                         <div class="mb-2">
                             <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
-                            <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                            <input type="text" placeholder="e.g: netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         </div>
 
                         <div>
@@ -520,7 +520,7 @@
                                 <input
                                     type="text"
                                     v-model="newInterfaceDevices"
-                                    placeholder="wlan0,eth1"
+                                    placeholder="e.g: wlan0,eth1"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                 />
                             </div>
@@ -529,7 +529,7 @@
                                 <input
                                     type="text"
                                     v-model="newInterfaceIgnoredDevices"
-                                    placeholder="tun0,eth0"
+                                    placeholder="e.g: tun0,eth0"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                 />
                             </div>

From 1e2d4387e72dff2e1df789dbc480bfdbc7fdc005 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 17:34:10 +1300
Subject: [PATCH 032/131] move ifac subtitle inside of collapsible section

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 9bec90a..e048368 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -712,9 +712,9 @@
             <!-- ifac settings -->
             <ExpandingSection>
                 <template v-slot:title>IFAC Settings</template>
-                <template v-slot:subtitle>Interface Access Code settings are used for creating private networks and can be configured on the interface level.</template>
                 <template v-slot:content>
                     <div class="p-2">
+                        <div class="text-sm text-gray-500 dark:text-zinc-300 mb-2">ⓘ Interface Access Code settings are used for creating private networks and can be configured on the interface level.</div>
                         <div class="grid grid-cols-1 lg:grid-cols-3 gap-y-2 lg:gap-x-2">
                             <div>
                                 <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>

From abd70ae606e2b23676e85dca2f50f040a268e30e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 18:00:41 +1300
Subject: [PATCH 033/131] refactor to reusable form label component

---
 src/frontend/components/forms/FormLabel.vue   |  10 ++
 .../interfaces/AddInterfacePage.vue           | 124 +++++++++---------
 2 files changed, 73 insertions(+), 61 deletions(-)
 create mode 100644 src/frontend/components/forms/FormLabel.vue

diff --git a/src/frontend/components/forms/FormLabel.vue b/src/frontend/components/forms/FormLabel.vue
new file mode 100644
index 0000000..367ece7
--- /dev/null
+++ b/src/frontend/components/forms/FormLabel.vue
@@ -0,0 +1,10 @@
+<template>
+    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+        <slot/>
+    </label>
+</template>
+<script>
+export default {
+    name: 'FormLabel',
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index e048368..bb6700d 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -63,7 +63,7 @@
                     <!-- iGeneric interface settings -->
                     <!-- interface name -->
                     <div>
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
+                        <FormLabel class="mb-1">Name</FormLabel>
                         <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name"
                                v-model="newInterfaceName"
                                class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
@@ -73,7 +73,7 @@
 
                     <!-- interface type -->
                     <div class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
+                        <FormLabel class="mb-1">Type</FormLabel>
                         <select v-model="newInterfaceType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                             <option disabled selected>--</option>
                             <option value="AutoInterface">Auto Interface</option>
@@ -100,39 +100,39 @@
                     <!-- TCPClientInterface -->
                     <!-- interface target host -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
+                        <FormLabel class="mb-1">Target Host</FormLabel>
                         <input type="text" placeholder="e.g: example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface target port -->
                     <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
+                        <FormLabel class="mb-1">Target Port</FormLabel>
                         <input type="text" placeholder="e.g: 1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- TCPServerInterface -->
                     <!-- interface listen ip -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
+                        <FormLabel class="mb-1">Listen IP</FormLabel>
                         <input type="text" placeholder="e.g: 0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
+                        <FormLabel class="mb-1">Listen Port</FormLabel>
                         <input type="text" placeholder="e.g: 1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- UDPInterface -->
                     <!-- interface forward ip -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
+                        <FormLabel class="mb-1">Forward IP</FormLabel>
                         <input type="text" placeholder="e.g: 255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
                     <!-- interface listen port -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
+                        <FormLabel class="mb-1">Forward Port</FormLabel>
                         <input type="text" placeholder="e.g: 1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
@@ -140,7 +140,7 @@
                     <!-- peers -->
                     <div v-if="newInterfaceType === 'I2PInterface'">
                         <div class="mb-2 text-sm text-gray-500 dark:text-zinc-300">ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.</div>
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Peers</label>
+                        <FormLabel class="mb-1">Peers</FormLabel>
                         <div class="space-y-2">
                             <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index" class="flex items-center space-x-2">
                                 <input
@@ -158,7 +158,7 @@
                     <!-- RNode interface -->
                     <!-- interface port -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <FormLabel class="mb-1">Port</FormLabel>
                         <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
@@ -166,9 +166,9 @@
 
                     <!-- interface Frequency -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">
+                        <FormLabel class="mb-1">
                             <span>Frequency</span><span v-if="formattedFrequency">: {{ formattedFrequency }}</span>
-                        </label>
+                        </FormLabel>
                         <div class="flex items-center">
                             <div class="flex flex-col">
                                 <input
@@ -205,7 +205,7 @@
 
                     <!-- interface bandwidth -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
+                        <FormLabel class="mb-1">Bandwidth</FormLabel>
                         <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
                         </select>
@@ -213,7 +213,7 @@
 
                     <!-- interface txpower -->
                     <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
+                        <FormLabel class="mb-1">Transmit Power (dBm)</FormLabel>
                         <input v-model="newInterfaceTxpower" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                     </div>
 
@@ -221,7 +221,7 @@
 
                         <!-- interface spreading factor -->
                         <div class="flex-1">
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
+                            <FormLabel class="mb-1">Spreading Factor</FormLabel>
                             <select v-model="newInterfaceSpreadingFactor" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                 <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
                             </select>
@@ -229,7 +229,7 @@
 
                         <!-- interface coding rate -->
                         <div class="flex-1">
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
+                            <FormLabel class="mb-1">Coding Rate</FormLabel>
                             <select v-model="newInterfaceCodingRate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                 <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{ codingrate }}</option>
                             </select>
@@ -240,7 +240,7 @@
                     <!-- RNodeMultiInterface -->
                     <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
                         <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom devices with multiple LoRa transceivers such as the openCom XL.</p>
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                        <FormLabel class="mb-1">Port</FormLabel>
                         <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
@@ -248,7 +248,7 @@
 
                     <!-- RNodeMultiInterface: Sub Interfaces -->
                     <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
-                        <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Sub-Interfaces</label>
+                        <FormLabel class="mb-1">Sub-Interfaces</FormLabel>
                         <div class="space-y-3">
                             <div :key="idx" v-for="(sub, idx) in RNodeMultiInterface.subInterfaces" class="p-2 space-y-2 border border-gray-200 rounded-lg dark:border-zinc-700">
 
@@ -260,14 +260,14 @@
 
                                 <div class="flex gap-2">
                                     <div class="flex-1">
-                                        <label class="text-sm dark:text-zinc-100">Frequency (Hz)</label>
+                                        <FormLabel class="mb-1">Frequency (Hz)</FormLabel>
                                         <input
                                             v-model.number="sub.frequency"
                                             type="number"
                                             class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                                     </div>
                                     <div class="flex-1">
-                                        <label class="text-sm dark:text-zinc-100">Bandwidth</label>
+                                        <FormLabel class="mb-1">Bandwidth</FormLabel>
                                         <select v-model="sub.bandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                             <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
                                         </select>
@@ -276,13 +276,13 @@
 
                                 <div class="flex gap-2">
                                     <div class="flex-1">
-                                        <label class="text-sm dark:text-zinc-100">Spreading Factor</label>
+                                        <FormLabel class="mb-1">Spreading Factor</FormLabel>
                                         <select v-model.number="sub.spreadingfactor" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                                             <option :key="sf" v-for="sf in RNodeInterfaceDefaults.spreadingfactors" :value="sf">{{ sf }}</option>
                                         </select>
                                     </div>
                                     <div class="flex-1">
-                                        <label class="text-sm dark:text-zinc-100">Coding Rate</label>
+                                        <FormLabel class="mb-1">Coding Rate</FormLabel>
                                         <select v-model.number="sub.codingrate" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                                             <option :key="cr" v-for="cr in RNodeInterfaceDefaults.codingrates" :value="cr">{{ cr }}</option>
                                         </select>
@@ -291,14 +291,14 @@
 
                                 <div class="flex gap-2 items-center">
                                     <div class="flex-1">
-                                        <label class="text-sm dark:text-zinc-100">TX Power (dBm)</label>
+                                        <FormLabel class="mb-1">TX Power (dBm)</FormLabel>
                                         <input
                                             v-model.number="sub.txpower"
                                             type="number"
                                             class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                                     </div>
                                     <div class="flex-1">
-                                        <label class="text-sm dark:text-zinc-100">Virtual Port</label>
+                                        <FormLabel class="mb-1">Virtual Port</FormLabel>
                                         <input
                                             v-model.number="sub.vport"
                                             type="number"
@@ -317,29 +317,29 @@
                     <div v-if="['SerialInterface', 'KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
 
                         <div class="mb-2">
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+                            <FormLabel class="mb-1">Port</FormLabel>
                             <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                 <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                             </select>
                         </div>
 
                         <div class="mb-2">
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Serial connection baud rate (bps)</label>
+                            <FormLabel class="mb-1">Serial connection baud rate (bps)</FormLabel>
                             <input v-model="newInterfaceSpeed" placeholder="115200" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
                         <div class="mb-2">
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Databits</label>
+                            <FormLabel class="mb-1">Databits</FormLabel>
                             <input v-model="newInterfaceDatabits" type="number" placeholder="8" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
                         <div class="mb-2">
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Parity </label>
+                            <FormLabel class="mb-1">Parity</FormLabel>
                             <input v-model="newInterfaceParity" type="number" placeholder="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
                         <div>
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Stopbits</label>
+                            <FormLabel class="mb-1">Stopbits</FormLabel>
                             <input v-model="newInterfaceStopbits" type="number" placeholder="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
@@ -356,12 +356,12 @@
                                 @click="useKISSAX25"
                                 class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
                             />
-                            <label for="use-ax25" class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Enable AX.25 Framing</label>
+                            <FormLabel for="use-ax25" class="ml-2">Enable AX.25 Framing</FormLabel>
                         </div>
 
                         <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Preamble (milliseconds)</label>
+                                <FormLabel class="mb-1">Preamble (milliseconds)</FormLabel>
                                 <input
                                     v-model="this.newInterfacePreamble"
                                     type="number"
@@ -370,7 +370,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">TX Tail (milliseconds)</label>
+                                <FormLabel class="mb-1">TX Tail (milliseconds)</FormLabel>
                                 <input
                                     v-model="this.newInterfaceTXTail"
                                     type="number"
@@ -379,7 +379,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Persistence (milliseconds)</label>
+                                <FormLabel class="mb-1">CDMA Persistence (milliseconds)</FormLabel>
                                 <input
                                     v-model="this.newInterfacePersistence"
                                     type="number"
@@ -388,7 +388,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">CDMA Slot Time (milliseconds)</label>
+                                <FormLabel class="mb-1">CDMA Slot Time (milliseconds)</FormLabel>
                                 <input
                                     v-model="this.newInterfaceSlotTime"
                                     type="number"
@@ -400,7 +400,7 @@
 
                         <div class="flex items-center space-x-4 mt-4">
                             <div class="flex-1">
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">SSID</label>
+                                <FormLabel class="mb-1">SSID</FormLabel>
                                 <input
                                     type="text"
                                     value="0"
@@ -410,7 +410,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                                <FormLabel class="mb-1">Callsign</FormLabel>
                                 <input
                                     type="text"
                                     v-model="newInterfaceCallsign"
@@ -419,7 +419,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                                <FormLabel class="mb-1">Callsign ID Interval</FormLabel>
                                 <input
                                     type="number"
                                     v-model="newInterfaceIDInterval"
@@ -437,12 +437,12 @@
                         <div class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</div>
 
                         <div class="mb-2">
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
+                            <FormLabel class="mb-1">Command</FormLabel>
                             <input type="text" placeholder="e.g: netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         </div>
 
                         <div>
-                            <label class="block mb-1 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay (seconds)</label>
+                            <FormLabel class="mb-1">Respawn Delay (seconds)</FormLabel>
                             <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         </div>
 
@@ -458,7 +458,7 @@
                     <div class="p-2 space-y-3">
 
                         <div>
-                            <label class="block mb-1 text-sm font-medium text-gray-800 dark:text-white">Antenna Gain (dBi)</label>
+                            <FormLabel class="mb-1">Antenna Gain (dBi)</FormLabel>
                             <input
                                 type="number"
                                 v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
@@ -469,7 +469,7 @@
                         </div>
 
                         <div>
-                            <label class="block mb-1 text-sm font-medium text-gray-800 dark:text-white">On-Air Calculations</label>
+                            <FormLabel class="mb-1">On-Air Calculations</FormLabel>
                             <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-center">
                                 <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800 dark:border-zinc-600">
                                     <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
@@ -497,7 +497,7 @@
                     <div class="p-2 space-y-3">
 
                         <div class="flex-1">
-                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Group ID</label>
+                            <FormLabel class="mb-1">Group ID</FormLabel>
                             <input
                                 type="text"
                                 v-model="newInterfaceGroupID"
@@ -507,7 +507,7 @@
                         </div>
 
                         <div class="flex-1">
-                            <label class="text-sm dark:text-zinc-100">Multicast Address Type</label>
+                            <FormLabel class="mb-1">Multicast Address Type</FormLabel>
                             <select v-model="newInterfaceMulticastAddressType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                 <option value="permanent">Permanent</option>
                                 <option value="temporary">Temporary</option>
@@ -516,7 +516,7 @@
 
                         <div class="flex items-center space-x-4 mt-4">
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network devices</label>
+                                <FormLabel class="mb-1">Network devices</FormLabel>
                                 <input
                                     type="text"
                                     v-model="newInterfaceDevices"
@@ -525,7 +525,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Ignored Devices</label>
+                                <FormLabel class="mb-1">Ignored Devices</FormLabel>
                                 <input
                                     type="text"
                                     v-model="newInterfaceIgnoredDevices"
@@ -537,7 +537,7 @@
 
                         <div class="flex items-center space-x-4 mt-4">
                             <div class="flex-1">
-                                <label class="text-sm dark:text-zinc-100">Discovery Scope</label>
+                                <FormLabel class="mb-1">Discovery Scope</FormLabel>
                                 <select v-model="newInterfaceDiscoveryScope" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                     <option value="global">Global</option>
                                     <option value="admin">Admin</option>
@@ -547,7 +547,7 @@
                                 </select>
                             </div>
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Discovery Port</label>
+                                <FormLabel class="mb-1">Discovery Port</FormLabel>
                                 <input
                                     type="number"
                                     v-model="newInterfaceDiscoveryPort"
@@ -556,7 +556,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Data Port</label>
+                                <FormLabel class="mb-1">Data Port</FormLabel>
                                 <input
                                     type="number"
                                     v-model="newInterfaceDataPort"
@@ -578,7 +578,7 @@
 
                         <div class="flex">
                             <div class="flex flex-col mr-auto">
-                                <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable KISS Framing</label>
+                                <FormLabel for="kiss-framing">Enable KISS Framing</FormLabel>
                                 <span class="text-sm text-gray-500 dark:text-zinc-300">Enable this when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
                             </div>
                             <input id="kiss-framing" type="checkbox" v-model="newInterfaceKISSFramingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
@@ -586,7 +586,7 @@
 
                         <div class="flex">
                             <div class="flex flex-col mr-auto">
-                                <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable I2P tunneling</label>
+                                <FormLabel for="i2p-tunneled">Enable I2P tunneling</FormLabel>
                                 <span class="text-sm text-gray-500 dark:text-zinc-300">Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
                             </div>
                             <input id="i2p-tunneled" type="checkbox" v-model="newInterfaceI2PTunnelingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
@@ -603,14 +603,14 @@
                     <div class="p-2 space-y-3">
 
                         <div>
-                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
+                            <FormLabel>Network device</FormLabel>
                             <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the interface to a specific network interface</span>
                             <input type="text" placeholder="e.g: eth0" v-model="newInterfaceNetworkDevice" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         </div>
 
                         <div class="flex items-start">
                             <div class="flex flex-col mr-auto">
-                                <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Prefer IPv6</label>
+                                <FormLabel for="prefer-ipv6">Prefer IPv6</FormLabel>
                                 <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the TCP Server Interface to an IPv6 address</span>
                             </div>
                             <input
@@ -634,7 +634,7 @@
 
                         <div class="flex items-center space-x-4">
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                                <FormLabel class="mb-1">Callsign</FormLabel>
                                 <input
                                     type="text"
                                     v-model="newInterfaceCallsign"
@@ -643,7 +643,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                                <FormLabel class="mb-1">Callsign ID Interval</FormLabel>
                                 <input
                                     type="number"
                                     v-model="newInterfaceIDInterval"
@@ -655,7 +655,7 @@
 
                         <div class="flex items-center space-x-4">
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Short)</label>
+                                <FormLabel class="mb-1">Airtime Limit (Short)</FormLabel>
                                 <input
                                     type="number"
                                     v-model="newInterfaceAirtimeLimitShort"
@@ -664,7 +664,7 @@
                                 />
                             </div>
                             <div class="flex-1">
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Long)</label>
+                                <FormLabel class="mb-1">Airtime Limit (Long)</FormLabel>
                                 <input
                                     type="number"
                                     v-model="newInterfaceAirtimeLimitLong"
@@ -685,7 +685,7 @@
                     <div class="p-2 space-y-3">
 
                         <div v-show="transportEnabled">
-                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Interface Mode</label>
+                            <FormLabel class="mb-1">Interface Mode</FormLabel>
                             <select v-model="sharedInterfaceSettings.mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                                 <option value="full">Full</option>
                                 <option value="gateway">Gateway</option>
@@ -696,7 +696,7 @@
                         </div>
 
                         <div>
-                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Inferred Interface Bitrate</label>
+                            <FormLabel class="mb-1">Inferred Interface Bitrate</FormLabel>
                             <input
                                 v-model="sharedInterfaceSettings.bitrate"
                                 type="number"
@@ -717,7 +717,7 @@
                         <div class="text-sm text-gray-500 dark:text-zinc-300 mb-2">ⓘ Interface Access Code settings are used for creating private networks and can be configured on the interface level.</div>
                         <div class="grid grid-cols-1 lg:grid-cols-3 gap-y-2 lg:gap-x-2">
                             <div>
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
+                                <FormLabel class="mb-1">Network Name</FormLabel>
                                 <input
                                     v-model="sharedInterfaceSettings.network_name"
                                     type="text"
@@ -726,7 +726,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
+                                <FormLabel class="mb-1">Passphrase</FormLabel>
                                 <input
                                     v-model="sharedInterfaceSettings.passphrase"
                                     type="text"
@@ -735,7 +735,7 @@
                                 />
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
+                                <FormLabel class="mb-1">IFAC Size</FormLabel>
                                 <input
                                     v-model="sharedInterfaceSettings.ifac_size"
                                     type="number"
@@ -766,10 +766,12 @@
 import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
 import ExpandingSection from "./ExpandingSection.vue";
+import FormLabel from "../forms/FormLabel.vue";
 
 export default {
     name: 'AddInterfacePage',
     components: {
+        FormLabel,
         ExpandingSection,
     },
     data() {

From b21e3fc02689766a25a1eb1ee0c2fd6189da62cc Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 18:06:08 +1300
Subject: [PATCH 034/131] add link to docs for interface modes

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index bb6700d..8304539 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -693,6 +693,9 @@
                                 <option value="roaming">Roaming</option>
                                 <option value="boundary">Boundary</option>
                             </select>
+                            <div class="text-xs text-gray-600 dark:text-zinc-300">
+                                Unsure which mode to select? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html#interface-modes" target="_blank">Reticulum Docs: Interface Modes</a>
+                            </div>
                         </div>
 
                         <div>

From 9d2f3eebc89376004d783d9155a3d6c68ede373b Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 18:13:45 +1300
Subject: [PATCH 035/131] refactor to reusable form sub label component

---
 src/frontend/components/forms/FormSubLabel.vue | 10 ++++++++++
 .../components/interfaces/AddInterfacePage.vue | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/components/forms/FormSubLabel.vue

diff --git a/src/frontend/components/forms/FormSubLabel.vue b/src/frontend/components/forms/FormSubLabel.vue
new file mode 100644
index 0000000..84741e6
--- /dev/null
+++ b/src/frontend/components/forms/FormSubLabel.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="text-xs text-gray-600 dark:text-zinc-300">
+        <slot/>
+    </div>
+</template>
+<script>
+export default {
+    name: 'FormSubLabel',
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 8304539..5195cc2 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -68,7 +68,7 @@
                                v-model="newInterfaceName"
                                class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
-                        <div class="text-xs text-gray-600 dark:text-zinc-300">Interface names must be unique.</div>
+                        <FormSubLabel>Interface names must be unique.</FormSubLabel>
                     </div>
 
                     <!-- interface type -->
@@ -92,9 +92,9 @@
                             <option disabled selected>Other</option>
                             <option value="PipeInterface">Pipe Interface</option>
                         </select>
-                        <div class="text-xs text-gray-600 dark:text-zinc-300">
+                        <FormSubLabel>
                             Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html" target="_blank">Reticulum Docs: Configuring Interfaces</a>
-                        </div>
+                        </FormSubLabel>
                     </div>
 
                     <!-- TCPClientInterface -->
@@ -178,7 +178,7 @@
                                     placeholder="GHz"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
                                 />
-                                <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">GHz</label>
+                                <FormSubLabel class="text-center">GHz</FormSubLabel>
                             </div>
                             <div class="flex flex-col">
                                 <input
@@ -188,7 +188,7 @@
                                     placeholder="MHz"
                                     class="bg-gray-50 border-y border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
                                 />
-                                <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">MHz</label>
+                                <FormSubLabel class="text-center">MHz</FormSubLabel>
                             </div>
                             <div class="flex flex-col">
                                 <input
@@ -198,7 +198,7 @@
                                     placeholder="kHz"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
                                 />
-                                <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">kHz</label>
+                                <FormSubLabel class="text-center">kHz</FormSubLabel>
                             </div>
                         </div>
                     </div>
@@ -693,9 +693,9 @@
                                 <option value="roaming">Roaming</option>
                                 <option value="boundary">Boundary</option>
                             </select>
-                            <div class="text-xs text-gray-600 dark:text-zinc-300">
+                            <FormSubLabel>
                                 Unsure which mode to select? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html#interface-modes" target="_blank">Reticulum Docs: Interface Modes</a>
-                            </div>
+                            </FormSubLabel>
                         </div>
 
                         <div>
@@ -770,10 +770,12 @@ import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
 import ExpandingSection from "./ExpandingSection.vue";
 import FormLabel from "../forms/FormLabel.vue";
+import FormSubLabel from "../forms/FormSubLabel.vue";
 
 export default {
     name: 'AddInterfacePage',
     components: {
+        FormSubLabel,
         FormLabel,
         ExpandingSection,
     },

From 842dbeb0b41f322357093188c1e02eb4dc8d2cd8 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 18:17:23 +1300
Subject: [PATCH 036/131] make naming consistent and remove unused functions

---
 .../components/interfaces/AddInterfacePage.vue       | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 5195cc2..2eb6ce7 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -678,9 +678,9 @@
                 </template>
             </ExpandingSection>
 
-            <!-- common interface settings -->
+            <!-- optional interface settings -->
             <ExpandingSection>
-                <template v-slot:title>Common Interface Settings</template>
+                <template v-slot:title>Optional Interface Settings</template>
                 <template v-slot:content>
                     <div class="p-2 space-y-3">
 
@@ -783,7 +783,6 @@ export default {
         return {
 
             isEditingInterface: false,
-            showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
 
             appInfo: null,
             transportEnabled: false,
@@ -824,7 +823,6 @@ export default {
             newInterfaceForwardPort: null,
 
             I2PSettings: {
-                showPeerAccordion: false,
                 newInterfacePeers: [],
             },
 
@@ -1256,18 +1254,12 @@ export default {
             this.RNodeInterfaceLoRaParameters.sensitivity = `${sensitivity.toFixed(1)} dBm`;
 
         },
-        toggleI2PPeerAccordion() {
-            this.I2PSettings.showPeerAccordion = !this.I2PSettings.showPeerAccordion;
-        },
         addI2PPeer(address = "") {
             this.I2PSettings.newInterfacePeers.push(address);
         },
         removeI2PPeer(index) {
             this.I2PSettings.newInterfacePeers.splice(index, 1);
         },
-        toggleAllSettings() {
-            this.showAllSettings = !this.showAllSettings;
-        },
         addSubInterface() {
             this.RNodeMultiInterface.subInterfaces.push({
                 name: '',

From 4555de58361455b81834319dacb79a9ee7a82d6e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 18:21:04 +1300
Subject: [PATCH 037/131] add button to reload comports

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 2eb6ce7..cd76163 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -162,6 +162,9 @@
                         <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
+                        <FormSubLabel>
+                            <div @click="loadComports" class="text-blue-500 underline cursor-pointer">Reload Ports</div>
+                        </FormSubLabel>
                     </div>
 
                     <!-- interface Frequency -->
@@ -244,6 +247,9 @@
                         <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                             <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                         </select>
+                        <FormSubLabel>
+                            <div @click="loadComports" class="text-blue-500 underline cursor-pointer">Reload Ports</div>
+                        </FormSubLabel>
                     </div>
 
                     <!-- RNodeMultiInterface: Sub Interfaces -->
@@ -321,6 +327,9 @@
                             <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                                 <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
                             </select>
+                            <FormSubLabel>
+                                <div @click="loadComports" class="text-blue-500 underline cursor-pointer">Reload Ports</div>
+                            </FormSubLabel>
                         </div>
 
                         <div class="mb-2">

From 620c147dbd3af00742e6801a41b5b8d564537c82 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 18:30:43 +1300
Subject: [PATCH 038/131] if interface enable is a boolean, check it as a
 string

---
 src/frontend/js/Utils.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/frontend/js/Utils.js b/src/frontend/js/Utils.js
index 4c8ca37..0a92957 100644
--- a/src/frontend/js/Utils.js
+++ b/src/frontend/js/Utils.js
@@ -143,11 +143,7 @@ class Utils {
 
     static isInterfaceEnabled(iface) {
         const rawValue = iface.enabled ?? iface.interface_enabled;
-        if (rawValue === true) {
-            // when enabled or interface_enabled is True it needs to return true.
-            return true;
-        }
-        const value = rawValue?.toLowerCase();
+        const value = rawValue?.toString().toLowerCase();
         return value === "on" || value === "yes" || value === "true";
     }
 

From 43a5a907c097ef406ed0709872503d61c29a7c35 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 18:31:18 +1300
Subject: [PATCH 039/131] check if null

---
 src/frontend/js/Utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/js/Utils.js b/src/frontend/js/Utils.js
index 0a92957..9362eca 100644
--- a/src/frontend/js/Utils.js
+++ b/src/frontend/js/Utils.js
@@ -143,7 +143,7 @@ class Utils {
 
     static isInterfaceEnabled(iface) {
         const rawValue = iface.enabled ?? iface.interface_enabled;
-        const value = rawValue?.toString().toLowerCase();
+        const value = rawValue?.toString()?.toLowerCase();
         return value === "on" || value === "yes" || value === "true";
     }
 

From 408a62dffe9027a1fdd8fa506914c0f2d2602b2f Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 20:01:27 +1300
Subject: [PATCH 040/131] slight adjustments

---
 meshchat.py                                   | 70 ++++++++++++-------
 .../interfaces/AddInterfacePage.vue           | 29 ++++----
 2 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index 5987477..4fdbdfd 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -482,13 +482,14 @@ class ReticulumMeshChat:
                 if data.get("data_port"):
                     interface_details["data_port"] = data.get("data_port")
 
-
             # handle tcp client interface
             if interface_type == "TCPClientInterface":
 
+                # required settings
                 interface_target_host = data.get('target_host')
                 interface_target_port = data.get('target_port')
-                # optional parameters for kiss_framing and i2p tunnelling
+
+                # optional settings for kiss_framing and i2p tunnelling
                 interface_kiss_framing = data.get('kiss_framing')
                 interface_i2p_tunneled = data.get('i2p_tunneled')
 
@@ -504,12 +505,12 @@ class ReticulumMeshChat:
                         "message": "Target Port is required",
                     }, status=422)
 
-                interface_details["target_host"] = data.get('target_host')
-                interface_details["target_port"] = data.get('target_port')
+                interface_details["target_host"] = interface_target_host
+                interface_details["target_port"] = interface_target_port
                 interface_details["kiss_framing"] = interface_kiss_framing
                 interface_details["i2p_tunneled"] = interface_i2p_tunneled
 
-                # handle I2P interface
+            # handle I2P interface
             if interface_type == "I2PInterface":
                 interface_details['connectable'] = "True"
                 interface_details["peers"] = data.get('peers')
@@ -517,9 +518,11 @@ class ReticulumMeshChat:
             # handle tcp server interface
             if interface_type == "TCPServerInterface":
 
+                # required settings
                 interface_listen_ip = data.get('listen_ip')
                 interface_listen_port = data.get('listen_port')
 
+                # optional settings
                 interface_network_device = data.get('device')
                 interface_prefer_ipv6 = data.get('prefer_ipv6')
 
@@ -535,21 +538,25 @@ class ReticulumMeshChat:
                         "message": "Listen Port is required",
                     }, status=422)
 
-                interface_details["listen_ip"] = data.get('listen_ip')
-                interface_details["listen_port"] = data.get('listen_port')
+                interface_details["listen_ip"] = interface_listen_ip
+                interface_details["listen_port"] = interface_listen_port
 
                 if interface_network_device is not None and interface_network_device != "":
                     interface_details["device"] = interface_network_device
+
                 if interface_prefer_ipv6 is not None and interface_prefer_ipv6 != "" and interface_prefer_ipv6 != False:
                     interface_details["prefer_ipv6"] = True
 
             # handle udp interface
             if interface_type == "UDPInterface":
 
+                # required settings
                 interface_listen_ip = data.get('listen_ip')
                 interface_listen_port = data.get('listen_port')
                 interface_forward_ip = data.get('forward_ip')
                 interface_forward_port = data.get('forward_port')
+
+                # optional settings
                 interface_network_device = data.get('device')
 
                 # ensure listen ip provided
@@ -576,10 +583,10 @@ class ReticulumMeshChat:
                         "message": "Forward Port is required",
                     }, status=422)
 
-                interface_details["listen_ip"] = data.get('listen_ip')
-                interface_details["listen_port"] = data.get('listen_port')
-                interface_details["forward_ip"] = data.get('forward_ip')
-                interface_details["forward_port"] = data.get('forward_port')
+                interface_details["listen_ip"] = interface_listen_ip
+                interface_details["listen_port"] = interface_listen_port
+                interface_details["forward_ip"] = interface_forward_ip
+                interface_details["forward_port"] = interface_forward_port
 
                 if interface_network_device is not None and interface_network_device != "":
                     interface_details["network_device"] = interface_network_device
@@ -587,6 +594,7 @@ class ReticulumMeshChat:
             # handle rnode interface
             if interface_type == "RNodeInterface":
 
+                # required settings
                 interface_port = data.get('port')
                 interface_frequency = data.get('frequency')
                 interface_bandwidth = data.get('bandwidth')
@@ -639,45 +647,53 @@ class ReticulumMeshChat:
 
             # Handle RNode Multi Interface
             if interface_type == "RNodeMultiInterface":
+
+                # required settings
                 interface_port = data.get("port")
                 sub_interfaces = data.get("sub_interfaces", [])
 
-                if not interface_port:
-                    return web.json_response({"message": "Port is required"}, status=422)
+                # ensure port provided
+                if interface_port is None or interface_port == "":
+                    return web.json_response({
+                        "message": "Port is required",
+                    }, status=422)
 
+                # ensure sub interfaces provided
                 if not isinstance(sub_interfaces, list) or not sub_interfaces:
-                    return web.json_response({"message": "At least one sub-interface is required"}, status=422)
+                    return web.json_response({
+                        "message": "At least one sub-interface is required",
+                    }, status=422)
 
                 interface_details["type"] = interface_type
                 interface_details["interface_enabled"] = True
                 interface_details["port"] = interface_port
 
-                for idx, sub in enumerate(sub_interfaces):
-                    # validate required fields for each sub-interface
-                    required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor",
-                                                    "codingrate",
-                                                    "vport"]
-                    missing_fields = [field for field in required_subinterface_fields if not sub.get(field)]
+                for idx, sub_interface in enumerate(sub_interfaces):
+
+                    # ensure required fields for each sub-interface provided
+                    required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor", "codingrate", "vport"]
+                    missing_fields = [field for field in required_subinterface_fields if not sub_interface.get(field)]
                     if missing_fields:
                         return web.json_response({
                             "message": f"Sub-interface {idx + 1} is missing required field(s): {', '.join(missing_fields)}"
                         }, status=422)
 
-                    sub_interface_name = sub.get("name")
+                    sub_interface_name = sub_interface.get("name")
                     interface_details[sub_interface_name] = {
                         "interface_enabled": "true",
-                        "frequency": int(sub["frequency"]),
-                        "bandwidth": int(sub["bandwidth"]),
-                        "txpower": int(sub["txpower"]),
-                        "spreadingfactor": int(sub["spreadingfactor"]),
-                        "codingrate": int(sub["codingrate"]),
-                        "vport": int(sub["vport"]),
+                        "frequency": int(sub_interface["frequency"]),
+                        "bandwidth": int(sub_interface["bandwidth"]),
+                        "txpower": int(sub_interface["txpower"]),
+                        "spreadingfactor": int(sub_interface["spreadingfactor"]),
+                        "codingrate": int(sub_interface["codingrate"]),
+                        "vport": int(sub_interface["vport"]),
                     }
 
                 interfaces[interface_name] = interface_details
 
             # Handle Serial, KISS, and AX25KISS
             if interface_type == "SerialInterface" or interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
+
                 interface_port = data.get('port')
                 interface_speed = data.get('speed')
 
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index cd76163..e58d37a 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -1091,18 +1091,23 @@ export default {
         },
         async addInterface() {
             try {
+
+                // process sub interfaces for RNodeMultiInterface
                 let subInterfacesData = null;
                 if(this.newInterfaceType === 'RNodeMultiInterface'){
-                    subInterfacesData = this.RNodeMultiInterface.subInterfaces.map(s => ({
-                        name: s.name,
-                        frequency: s.frequency,
-                        bandwidth: s.bandwidth,
-                        txpower: s.txpower,
-                        spreadingfactor: s.spreadingfactor,
-                        codingrate: s.codingrate,
-                        vport: s.vport
-                    }));
+                    subInterfacesData = this.RNodeMultiInterface.subInterfaces.map((subInterface) => {
+                        return {
+                            name: subInterface.name,
+                            frequency: subInterface.frequency,
+                            bandwidth: subInterface.bandwidth,
+                            txpower: subInterface.txpower,
+                            spreadingfactor: subInterface.spreadingfactor,
+                            codingrate: subInterface.codingrate,
+                            vport: subInterface.vport,
+                        };
+                    });
                 }
+
                 // add interface
                 const response = await window.axios.post(`/api/v1/reticulum/interfaces/add`, {
 
@@ -1118,8 +1123,8 @@ export default {
                     devices: this.newInterfaceDevices,
                     ignored_devices: this.newInterfaceIgnoredDevices,
                     discovery_scope: this.newInterfaceDiscoveryScope,
-                    discovery_port:  this.newInterfaceDiscoveryPort,
-                    data_port:       this.newInterfaceDataPort,
+                    discovery_port: this.newInterfaceDiscoveryPort,
+                    data_port: this.newInterfaceDataPort,
 
                     // tcp client interface
                     target_host: this.newInterfaceTargetHost,
@@ -1177,7 +1182,7 @@ export default {
                     airtime_limit_long: this.newInterfaceAirtimeLimitLong,
                     airtime_limit_short: this.newInterfaceAirtimeLimitShort,
 
-                    // Shared interface settings
+                    // settings that can be added to any interface type
                     mode: this.sharedInterfaceSettings.mode,
                     bitrate: this.sharedInterfaceSettings.bitrate,
                     network_name: this.sharedInterfaceSettings.network_name,

From 33e48887371d7e2386d589f2e8997b66e0eb2e35 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 20:13:52 +1300
Subject: [PATCH 041/131] prevent crash caused by interface settings being set
 to none

---
 meshchat.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index 4fdbdfd..4d2df61 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -507,8 +507,12 @@ class ReticulumMeshChat:
 
                 interface_details["target_host"] = interface_target_host
                 interface_details["target_port"] = interface_target_port
-                interface_details["kiss_framing"] = interface_kiss_framing
-                interface_details["i2p_tunneled"] = interface_i2p_tunneled
+
+                if interface_kiss_framing is not None:
+                    interface_details["kiss_framing"] = interface_kiss_framing
+
+                if interface_i2p_tunneled is not None:
+                    interface_details["i2p_tunneled"] = interface_i2p_tunneled
 
             # handle I2P interface
             if interface_type == "I2PInterface":

From 734eaeed1b0f6e70fd6d74d0d5757a65254b72e6 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 23:06:06 +1300
Subject: [PATCH 042/131] refactor updating of interface settings to allow
 removing values when saving an existing interface

---
 meshchat.py                                   | 235 ++++++++----------
 src/backend/interface_editor.py               |  14 ++
 .../interfaces/AddInterfacePage.vue           |  30 ++-
 3 files changed, 137 insertions(+), 142 deletions(-)
 create mode 100644 src/backend/interface_editor.py

diff --git a/meshchat.py b/meshchat.py
index 4d2df61..141f441 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -26,6 +26,7 @@ from src.backend.announce_handler import AnnounceHandler
 from src.backend.async_utils import AsyncUtils
 from src.backend.colour_utils import ColourUtils
 from src.backend.interface_config_parser import InterfaceConfigParser
+from src.backend.interface_editor import InterfaceEditor
 from src.backend.lxmf_message_fields import LxmfImageField, LxmfFileAttachmentsField, LxmfFileAttachment, LxmfAudioField
 from src.backend.audio_call_manager import AudioCall, AudioCallManager
 from src.backend.sideband_commands import SidebandCommands
@@ -337,8 +338,7 @@ class ReticulumMeshChat:
                 if interface_data.get("type") == "RNodeMultiInterface":
                     sub_interfaces = []
                     for sub_name, sub_config in interface_data.items():
-                        if sub_name not in {"type", "port", "interface_enabled", "selected_interface_mode",
-                                            "configured_bitrate"}:
+                        if sub_name not in {"type", "port", "interface_enabled", "selected_interface_mode", "configured_bitrate"}:
                             if isinstance(sub_config, dict):
                                 sub_config["name"] = sub_name
                                 sub_interfaces.append(sub_config)
@@ -465,54 +465,42 @@ class ReticulumMeshChat:
             if "enabled" not in interface_details and "interface_enabled" not in interface_details:
                 interface_details["interface_enabled"] = "true"
 
-            # additional AutoInterface options
+            # handle AutoInterface
             if interface_type == "AutoInterface":
-                if data.get("group_id"):
-                    interface_details["group_id"] = data.get("group_id")
-                if data.get("multicast_address_type"):
-                    interface_details["multicast_address_type"] = data.get("multicast_address_type")
-                if data.get("devices"):
-                    interface_details["devices"] = data.get("devices")
-                if data.get("ignored_devices"):
-                    interface_details["ignored_devices"] = data.get("ignored_devices")
-                if data.get("discovery_scope"):
-                    interface_details["discovery_scope"] = data.get("discovery_scope")
-                if data.get("discovery_port"):
-                    interface_details["discovery_port"] = data.get("discovery_port")
-                if data.get("data_port"):
-                    interface_details["data_port"] = data.get("data_port")
 
-            # handle tcp client interface
+                # set optional AutoInterface options
+                InterfaceEditor.update_value(interface_details, data, "group_id")
+                InterfaceEditor.update_value(interface_details, data, "multicast_address_type")
+                InterfaceEditor.update_value(interface_details, data, "devices")
+                InterfaceEditor.update_value(interface_details, data, "ignored_devices")
+                InterfaceEditor.update_value(interface_details, data, "discovery_scope")
+                InterfaceEditor.update_value(interface_details, data, "discovery_port")
+                InterfaceEditor.update_value(interface_details, data, "data_port")
+
+            # handle TCPClientInterface
             if interface_type == "TCPClientInterface":
 
-                # required settings
-                interface_target_host = data.get('target_host')
-                interface_target_port = data.get('target_port')
-
-                # optional settings for kiss_framing and i2p tunnelling
-                interface_kiss_framing = data.get('kiss_framing')
-                interface_i2p_tunneled = data.get('i2p_tunneled')
-
                 # ensure target host provided
+                interface_target_host = data.get('target_host')
                 if interface_target_host is None or interface_target_host == "":
                     return web.json_response({
                         "message": "Target Host is required",
                     }, status=422)
 
                 # ensure target port provided
+                interface_target_port = data.get('target_port')
                 if interface_target_port is None or interface_target_port == "":
                     return web.json_response({
                         "message": "Target Port is required",
                     }, status=422)
 
+                # set required TCPClientInterface options
                 interface_details["target_host"] = interface_target_host
                 interface_details["target_port"] = interface_target_port
 
-                if interface_kiss_framing is not None:
-                    interface_details["kiss_framing"] = interface_kiss_framing
-
-                if interface_i2p_tunneled is not None:
-                    interface_details["i2p_tunneled"] = interface_i2p_tunneled
+                # set optional TCPClientInterface options
+                InterfaceEditor.update_value(interface_details, data, "kiss_framing")
+                InterfaceEditor.update_value(interface_details, data, "i2p_tunneled")
 
             # handle I2P interface
             if interface_type == "I2PInterface":
@@ -522,126 +510,114 @@ class ReticulumMeshChat:
             # handle tcp server interface
             if interface_type == "TCPServerInterface":
 
-                # required settings
-                interface_listen_ip = data.get('listen_ip')
-                interface_listen_port = data.get('listen_port')
-
-                # optional settings
-                interface_network_device = data.get('device')
-                interface_prefer_ipv6 = data.get('prefer_ipv6')
-
                 # ensure listen ip provided
+                interface_listen_ip = data.get('listen_ip')
                 if interface_listen_ip is None or interface_listen_ip == "":
                     return web.json_response({
                         "message": "Listen IP is required",
                     }, status=422)
 
                 # ensure listen port provided
+                interface_listen_port = data.get('listen_port')
                 if interface_listen_port is None or interface_listen_port == "":
                     return web.json_response({
                         "message": "Listen Port is required",
                     }, status=422)
 
+                # set required TCPServerInterface options
                 interface_details["listen_ip"] = interface_listen_ip
                 interface_details["listen_port"] = interface_listen_port
 
-                if interface_network_device is not None and interface_network_device != "":
-                    interface_details["device"] = interface_network_device
-
-                if interface_prefer_ipv6 is not None and interface_prefer_ipv6 != "" and interface_prefer_ipv6 != False:
-                    interface_details["prefer_ipv6"] = True
+                # set optional TCPServerInterface options
+                InterfaceEditor.update_value(interface_details, data, "device")
+                InterfaceEditor.update_value(interface_details, data, "prefer_ipv6")
 
             # handle udp interface
             if interface_type == "UDPInterface":
 
-                # required settings
-                interface_listen_ip = data.get('listen_ip')
-                interface_listen_port = data.get('listen_port')
-                interface_forward_ip = data.get('forward_ip')
-                interface_forward_port = data.get('forward_port')
-
-                # optional settings
-                interface_network_device = data.get('device')
-
                 # ensure listen ip provided
+                interface_listen_ip = data.get('listen_ip')
                 if interface_listen_ip is None or interface_listen_ip == "":
                     return web.json_response({
                         "message": "Listen IP is required",
                     }, status=422)
 
                 # ensure listen port provided
+                interface_listen_port = data.get('listen_port')
                 if interface_listen_port is None or interface_listen_port == "":
                     return web.json_response({
                         "message": "Listen Port is required",
                     }, status=422)
 
                 # ensure forward ip provided
+                interface_forward_ip = data.get('forward_ip')
                 if interface_forward_ip is None or interface_forward_ip == "":
                     return web.json_response({
                         "message": "Forward IP is required",
                     }, status=422)
 
                 # ensure forward port provided
+                interface_forward_port = data.get('forward_port')
                 if interface_forward_port is None or interface_forward_port == "":
                     return web.json_response({
                         "message": "Forward Port is required",
                     }, status=422)
 
+                # set required UDPInterface options
                 interface_details["listen_ip"] = interface_listen_ip
                 interface_details["listen_port"] = interface_listen_port
                 interface_details["forward_ip"] = interface_forward_ip
                 interface_details["forward_port"] = interface_forward_port
 
-                if interface_network_device is not None and interface_network_device != "":
-                    interface_details["network_device"] = interface_network_device
+                # set optional UDPInterface options
+                InterfaceEditor.update_value(interface_details, data, "device")
 
-            # handle rnode interface
+            # handle RNodeInterface
             if interface_type == "RNodeInterface":
 
-                # required settings
-                interface_port = data.get('port')
-                interface_frequency = data.get('frequency')
-                interface_bandwidth = data.get('bandwidth')
-                interface_txpower = data.get('txpower')
-                interface_spreadingfactor = data.get('spreadingfactor')
-                interface_codingrate = data.get('codingrate')
-
                 # ensure port provided
+                interface_port = data.get('port')
                 if interface_port is None or interface_port == "":
                     return web.json_response({
                         "message": "Port is required",
                     }, status=422)
 
                 # ensure frequency provided
+                interface_frequency = data.get('frequency')
                 if interface_frequency is None or interface_frequency == "":
                     return web.json_response({
                         "message": "Frequency is required",
                     }, status=422)
 
                 # ensure bandwidth provided
+                interface_bandwidth = data.get('bandwidth')
                 if interface_bandwidth is None or interface_bandwidth == "":
                     return web.json_response({
                         "message": "Bandwidth is required",
                     }, status=422)
 
                 # ensure txpower provided
+                interface_txpower = data.get('txpower')
                 if interface_txpower is None or interface_txpower == "":
                     return web.json_response({
                         "message": "TX power is required",
                     }, status=422)
 
                 # ensure spreading factor provided
+                interface_spreadingfactor = data.get('spreadingfactor')
                 if interface_spreadingfactor is None or interface_spreadingfactor == "":
                     return web.json_response({
                         "message": "Spreading Factor is required",
                     }, status=422)
 
                 # ensure coding rate provided
+                interface_codingrate = data.get('codingrate')
                 if interface_codingrate is None or interface_codingrate == "":
                     return web.json_response({
                         "message": "Coding Rate is required",
                     }, status=422)
 
+                # set required RNodeInterface options
                 interface_details["port"] = interface_port
                 interface_details["frequency"] = interface_frequency
                 interface_details["bandwidth"] = interface_bandwidth
@@ -649,9 +625,17 @@ class ReticulumMeshChat:
                 interface_details["spreadingfactor"] = interface_spreadingfactor
                 interface_details["codingrate"] = interface_codingrate
 
-            # Handle RNode Multi Interface
+                # set optional RNodeInterface options
+                InterfaceEditor.update_value(interface_details, data, "callsign")
+                InterfaceEditor.update_value(interface_details, data, "id_interval")
+                InterfaceEditor.update_value(interface_details, data, "airtime_limit_long")
+                InterfaceEditor.update_value(interface_details, data, "airtime_limit_short")
+
+            # handle RNodeMultiInterface
             if interface_type == "RNodeMultiInterface":
 
+                # FIXME: currently not possible to remove a sub interface after it has already been saved
+
                 # required settings
                 interface_port = data.get("port")
                 sub_interfaces = data.get("sub_interfaces", [])
@@ -668,13 +652,13 @@ class ReticulumMeshChat:
                         "message": "At least one sub-interface is required",
                     }, status=422)
 
-                interface_details["type"] = interface_type
-                interface_details["interface_enabled"] = True
+                # set required RNodeMultiInterface options
                 interface_details["port"] = interface_port
 
+                # process each provided sub interface
                 for idx, sub_interface in enumerate(sub_interfaces):
 
-                    # ensure required fields for each sub-interface provided
+                    # ensure required fields for sub-interface provided
                     required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor", "codingrate", "vport"]
                     missing_fields = [field for field in required_subinterface_fields if not sub_interface.get(field)]
                     if missing_fields:
@@ -695,93 +679,70 @@ class ReticulumMeshChat:
 
                 interfaces[interface_name] = interface_details
 
-            # Handle Serial, KISS, and AX25KISS
+            # handle SerialInterface, KISSInterface, and AX25KISSInterface
             if interface_type == "SerialInterface" or interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
 
+                # ensure port provided
                 interface_port = data.get('port')
-                interface_speed = data.get('speed')
-
-                required_fields = {
-                    interface_port: "Port is required",
-                    interface_speed: "Serial speed is required",
-                }
-
-                for field, error_message in required_fields.items():
-                    if field is None or field == "":
-                        return web.json_response({
-                            "message": error_message,
-                        }, status=422)
+                if interface_port is None or interface_port == "":
+                    return web.json_response({
+                        "message": "Port is required",
+                    }, status=422)
 
+                # set required options
                 interface_details["port"] = interface_port
-                interface_details['connectable'] = "True"
-                interface_details["type"] = interface_type
-                interface_details["interface_enabled"] = True
 
-                interface_details["speed"] = interface_speed
-                interface_details["databits"] = data.get('databits')
-                interface_details['parity'] = data.get('parity')
-                interface_details['stopbits'] = data.get('stopbits')
+                # set optional options
+                InterfaceEditor.update_value(interface_details, data, "speed")
+                InterfaceEditor.update_value(interface_details, data, "databits")
+                InterfaceEditor.update_value(interface_details, data, "parity")
+                InterfaceEditor.update_value(interface_details, data, "stopbits")
 
                 # Handle KISS and AX25KISS specific options
-                if (interface_type == "KISSInterface" or interface_type == "AX25KISSInterface"):
-                    interface_details["preamble"] = data.get('preamble')
-                    interface_details["txtail"] = data.get('txtail')
-                    interface_details['persistence'] = data.get('persistence')
-                    interface_details['slottime'] = data.get('slottime')
-                    interface_details['callsign'] = data.get('callsign')
-                    interface_details['ssid'] = data.get('ssid')
+                if interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
 
+                    # set optional options
+                    InterfaceEditor.update_value(interface_details, data, "preamble")
+                    InterfaceEditor.update_value(interface_details, data, "txtail")
+                    InterfaceEditor.update_value(interface_details, data, "persistence")
+                    InterfaceEditor.update_value(interface_details, data, "slottime")
+                    InterfaceEditor.update_value(interface_details, data, "callsign")
+                    InterfaceEditor.update_value(interface_details, data, "ssid")
+
+            # FIXME: move to own sections
             # RNode Airtime limits and station ID
-            callsign = data.get('callsign')
-            id_interval = data.get('id_interval')
-            airtime_limit_long = data.get('airtime_limit_long')
-            airtime_limit_short = data.get('airtime_limit_short')
+            InterfaceEditor.update_value(interface_details, data, "callsign")
+            InterfaceEditor.update_value(interface_details, data, "id_interval")
+            InterfaceEditor.update_value(interface_details, data, "airtime_limit_long")
+            InterfaceEditor.update_value(interface_details, data, "airtime_limit_short")
 
-            if callsign is not None and callsign != "":
-                interface_details["callsign"] = callsign
-            if id_interval is not None and id_interval != "":
-                interface_details["id_interval"] = id_interval
-            if airtime_limit_long is not None and airtime_limit_long != "":
-                interface_details["airtime_limit_long"] = airtime_limit_long
-            if airtime_limit_short is not None and airtime_limit_short != "":
-                interface_details["airtime_limit_short"] = airtime_limit_short
-
-            # Handle Pipe Interface
+            # handle Pipe Interface
             if interface_type == "PipeInterface":
+
+                # ensure command provided
                 interface_command = data.get('command')
+                if interface_command is None or interface_command == "":
+                    return web.json_response({
+                        "message": "Command is required",
+                    }, status=422)
+
+                # ensure command provided
                 interface_respawn_delay = data.get('respawn_delay')
+                if interface_respawn_delay is None or interface_respawn_delay == "":
+                    return web.json_response({
+                        "message": "Respawn delay is required",
+                    }, status=422)
 
-                required_fields = {
-                    interface_command: "Command is required",
-                    interface_respawn_delay: "Respawn delay is required",
-                }
-
-                for field, error_message in required_fields.items():
-                    if field is None or field == "":
-                        return web.json_response({
-                            "message": error_message,
-                        }, status=422)
-
+                # set required options
                 interface_details["command"] = interface_command
                 interface_details["respawn_delay"] = interface_respawn_delay
 
-            # Common interface options
-            inferred_bitrate = data.get('bitrate')
-            transport_mode = data.get('mode')
-            network_name = data.get('network_name')
-            ifac_passphrase = data.get('passphrase')
-            ifac_size = data.get('ifac_size')
-
-            if inferred_bitrate is not None and inferred_bitrate != "":
-                interface_details["bitrate"] = inferred_bitrate
-            if transport_mode is not None and transport_mode != "":
-                interface_details["mode"] = transport_mode
-            if network_name is not None and network_name != "":
-                interface_details["network_name"] = network_name
-            if ifac_passphrase is not None and ifac_passphrase != "":
-                interface_details["passphrase"] = ifac_passphrase
-            if ifac_size is not None and ifac_size != "":
-                interface_details["ifac_size"] = ifac_size
+            # set common interface options
+            InterfaceEditor.update_value(interface_details, data, "bitrate")
+            InterfaceEditor.update_value(interface_details, data, "mode")
+            InterfaceEditor.update_value(interface_details, data, "network_name")
+            InterfaceEditor.update_value(interface_details, data, "passphrase")
+            InterfaceEditor.update_value(interface_details, data, "ifac_size")
 
             # merge new interface into existing interfaces
             interfaces[interface_name] = interface_details
diff --git a/src/backend/interface_editor.py b/src/backend/interface_editor.py
new file mode 100644
index 0000000..e836eb9
--- /dev/null
+++ b/src/backend/interface_editor.py
@@ -0,0 +1,14 @@
+class InterfaceEditor:
+
+    @staticmethod
+    def update_value(interface_details: dict, data: dict, key: str):
+
+        # update value if provided and not empty
+        value = data.get(key)
+        if value is not None and value != "":
+            interface_details[key] = value
+            return
+
+        # otherwise remove existing value
+        if key in interface_details:
+            del interface_details[key]
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index e58d37a..e46e8ec 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -334,7 +334,7 @@
 
                         <div class="mb-2">
                             <FormLabel class="mb-1">Serial connection baud rate (bps)</FormLabel>
-                            <input v-model="newInterfaceSpeed" placeholder="115200" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                            <input v-model="newInterfaceSpeed" placeholder="9600" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                         </div>
 
                         <div class="mb-2">
@@ -344,7 +344,11 @@
 
                         <div class="mb-2">
                             <FormLabel class="mb-1">Parity</FormLabel>
-                            <input v-model="newInterfaceParity" type="number" placeholder="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                            <select v-model="newInterfaceParity" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                <option :value="undefined">None</option>
+                                <option value="even">Even</option>
+                                <option value="odd">Odd</option>
+                            </select>
                         </div>
 
                         <div>
@@ -605,9 +609,9 @@
                 </template>
             </ExpandingSection>
 
-            <!-- optional TCPClientInterface and UDPInterface settings -->
-            <ExpandingSection v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'">
-                <template v-slot:title>Optional {{ newInterfaceType }} settings</template>
+            <!-- optional TCPClientInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'TCPServerInterface'">
+                <template v-slot:title>Optional TCPServerInterface settings</template>
                 <template v-slot:content>
                     <div class="p-2 space-y-3">
 
@@ -635,6 +639,22 @@
                 </template>
             </ExpandingSection>
 
+            <!-- optional UDPInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'UDPInterface'">
+                <template v-slot:title>Optional UDPInterface settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <FormLabel>Network device</FormLabel>
+                            <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the interface to a specific network interface</span>
+                            <input type="text" placeholder="e.g: eth0" v-model="newInterfaceNetworkDevice" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- optional RNodeInterface settings -->
             <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
                 <template v-slot:title>Optional RNodeInterface Settings</template>

From d95878c6596c71b01814c91d9c3e3412284222bf Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 23:16:53 +1300
Subject: [PATCH 043/131] allow removing custom select settings

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index e46e8ec..f3e21c6 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -522,6 +522,7 @@
                         <div class="flex-1">
                             <FormLabel class="mb-1">Multicast Address Type</FormLabel>
                             <select v-model="newInterfaceMulticastAddressType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                <option :value="undefined">(not set)</option>
                                 <option value="permanent">Permanent</option>
                                 <option value="temporary">Temporary</option>
                             </select>
@@ -552,6 +553,7 @@
                             <div class="flex-1">
                                 <FormLabel class="mb-1">Discovery Scope</FormLabel>
                                 <select v-model="newInterfaceDiscoveryScope" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                                    <option :value="undefined">(not set)</option>
                                     <option value="global">Global</option>
                                     <option value="admin">Admin</option>
                                     <option value="organisation">Organisation</option>
@@ -716,6 +718,7 @@
                         <div v-show="transportEnabled">
                             <FormLabel class="mb-1">Interface Mode</FormLabel>
                             <select v-model="sharedInterfaceSettings.mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                                <option :value="undefined">(not set)</option>
                                 <option value="full">Full</option>
                                 <option value="gateway">Gateway</option>
                                 <option value="access_point">Access Point</option>

From e48c26042c1fb6c317cfbefc03de561d6e7decd8 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 23:19:49 +1300
Subject: [PATCH 044/131] always show interface mode setting even if transport
 is disabled

---
 .../components/interfaces/AddInterfacePage.vue  | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index f3e21c6..593e608 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -715,7 +715,7 @@
                 <template v-slot:content>
                     <div class="p-2 space-y-3">
 
-                        <div v-show="transportEnabled">
+                        <div>
                             <FormLabel class="mb-1">Interface Mode</FormLabel>
                             <select v-model="sharedInterfaceSettings.mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
                                 <option :value="undefined">(not set)</option>
@@ -726,7 +726,7 @@
                                 <option value="boundary">Boundary</option>
                             </select>
                             <FormSubLabel>
-                                Unsure which mode to select? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html#interface-modes" target="_blank">Reticulum Docs: Interface Modes</a>
+                                This setting requires Transport Mode to be enabled. <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html#interface-modes" target="_blank">Reticulum Docs: Interface Modes</a>
                             </FormSubLabel>
                         </div>
 
@@ -816,9 +816,6 @@ export default {
 
             isEditingInterface: false,
 
-            appInfo: null,
-            transportEnabled: false,
-
             config: null,
 
             comports: [],
@@ -961,7 +958,6 @@ export default {
     },
     mounted() {
 
-        this.getAppInfo();
         this.getConfig();
         this.loadComports();
 
@@ -1318,15 +1314,6 @@ export default {
         removeSubInterface(idx) {
             this.RNodeMultiInterface.subInterfaces.splice(idx, 1);
         },
-        async getAppInfo() {
-            try {
-                const response = await window.axios.get("/api/v1/app/info");
-                this.appInfo = response.data.app_info;
-                this.transportEnabled = this.appInfo.is_transport_enabled;
-            } catch (e) {
-                console.log(e);
-            }
-        },
     },
 }
 </script>

From ba118f7a9cc3adb7265c91e16cdd514081cfe9a3 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 23:56:55 +1300
Subject: [PATCH 045/131] allow vport 0

---
 meshchat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 141f441..4e616c3 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -660,7 +660,7 @@ class ReticulumMeshChat:
 
                     # ensure required fields for sub-interface provided
                     required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor", "codingrate", "vport"]
-                    missing_fields = [field for field in required_subinterface_fields if not sub_interface.get(field)]
+                    missing_fields = [field for field in required_subinterface_fields if field not in sub_interface or sub_interface.get(field) == ""]
                     if missing_fields:
                         return web.json_response({
                             "message": f"Sub-interface {idx + 1} is missing required field(s): {', '.join(missing_fields)}"

From 54b1d561075e6476a636589cbe5f47e85f7415cf Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 23:58:58 +1300
Subject: [PATCH 046/131] make for loop more readable

---
 meshchat.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 4e616c3..fa9e297 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -659,8 +659,11 @@ class ReticulumMeshChat:
                 for idx, sub_interface in enumerate(sub_interfaces):
 
                     # ensure required fields for sub-interface provided
+                    missing_fields = []
                     required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor", "codingrate", "vport"]
-                    missing_fields = [field for field in required_subinterface_fields if field not in sub_interface or sub_interface.get(field) == ""]
+                    for field in required_subinterface_fields:
+                        if field not in sub_interface or sub_interface.get(field) == "":
+                            missing_fields.append(field)
                     if missing_fields:
                         return web.json_response({
                             "message": f"Sub-interface {idx + 1} is missing required field(s): {', '.join(missing_fields)}"

From df8e98366bc9a0b9e54cc7add78db70d628f1a2b Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 3 Feb 2025 00:13:00 +1300
Subject: [PATCH 047/131] remove existing sub interfaces when saving an rnode
 multi interface

---
 meshchat.py | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index fa9e297..11a3ae3 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -634,8 +634,6 @@ class ReticulumMeshChat:
             # handle RNodeMultiInterface
             if interface_type == "RNodeMultiInterface":
 
-                # FIXME: currently not possible to remove a sub interface after it has already been saved
-
                 # required settings
                 interface_port = data.get("port")
                 sub_interfaces = data.get("sub_interfaces", [])
@@ -655,6 +653,14 @@ class ReticulumMeshChat:
                 # set required RNodeMultiInterface options
                 interface_details["port"] = interface_port
 
+                # remove any existing sub interfaces, which can be found by finding keys that contain a dict value
+                # this allows us to replace all sub interfaces with the ones we are about to add, while also ensuring
+                # that we do not remove any existing config values from the main interface config
+                for key in interface_details:
+                    value = interface_details[key]
+                    if isinstance(value, dict):
+                        del interface_details[key]
+
                 # process each provided sub interface
                 for idx, sub_interface in enumerate(sub_interfaces):
 

From 4d816ae87ccaeb015daa7421e1d1152a7ae324c2 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 3 Feb 2025 01:07:18 +1300
Subject: [PATCH 048/131] fix validation

---
 meshchat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 11a3ae3..c6b0b81 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -668,7 +668,7 @@ class ReticulumMeshChat:
                     missing_fields = []
                     required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor", "codingrate", "vport"]
                     for field in required_subinterface_fields:
-                        if field not in sub_interface or sub_interface.get(field) == "":
+                        if field not in sub_interface or sub_interface.get(field) is None or sub_interface.get(field) == "":
                             missing_fields.append(field)
                     if missing_fields:
                         return web.json_response({

From 4f497620c810a1497927932486fcd346462c35b6 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 3 Feb 2025 01:20:53 +1300
Subject: [PATCH 049/131] dont export json dict

---
 meshchat.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index c6b0b81..ecddcfa 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -795,7 +795,8 @@ class ReticulumMeshChat:
                     # add interface to output
                     output.append(f"[[{interface_name}]]")
                     for key, value in interface.items():
-                        output.append(f"    {key} = {value}")
+                        if not isinstance(value, dict):
+                            output.append(f"    {key} = {value}")
                     output.append("")
 
                     # Handle sub-interfaces for RNodeMultiInterface

From f6b1c65faa1eceb778515249bda865a6ae0e5748 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 3 Feb 2025 01:23:26 +1300
Subject: [PATCH 050/131] use built in rns config parser for parsing interface
 config files

---
 src/backend/interface_config_parser.py | 63 +++++++++-----------------
 1 file changed, 22 insertions(+), 41 deletions(-)

diff --git a/src/backend/interface_config_parser.py b/src/backend/interface_config_parser.py
index 75ab0b2..94bf823 100644
--- a/src/backend/interface_config_parser.py
+++ b/src/backend/interface_config_parser.py
@@ -1,50 +1,31 @@
+import RNS.vendor.configobj
+
+
 class InterfaceConfigParser:
 
     @staticmethod
     def parse(text):
 
-        # process config
+        # get lines from provided text
+        lines = text.splitlines()
+
+        # ensure [interfaces] section exists
+        if "[interfaces]" not in lines:
+            lines.insert(0, "[interfaces]")
+
+        # parse lines as rns config object
+        config = RNS.vendor.configobj.ConfigObj(lines)
+
+        # get interfaces from config
+        config_interfaces = config.get("interfaces")
+
+        # process interfaces
         interfaces = []
-        current_interface = None
-        for line in text.splitlines():
+        for interface_name in config_interfaces:
 
-            # strip whitespace from either side of string
-            line = line.strip()
-
-            # skip empty lines and commented out lines
-            if not line or line.startswith("#"):
-                continue
-
-            # check if we found a line containing an interface name
-            if line.startswith("[[") and line.endswith("]]"):
-
-                # we found a new interface, so add the previously parsed one to the interfaces list
-                if current_interface:
-                    interfaces.append(current_interface)
-
-                # get interface name by removing the "[[" and "]]"
-                interface_name = line[2:-2]
-                current_interface = {
-                    "name": interface_name,
-                }
-
-            # we found a key=value line, so we will set these values on the interface
-            elif current_interface is not None and "=" in line:
-
-                # parse key and value
-                line_parts = line.split("=", 1)
-                key = line_parts[0].strip()
-                value = line_parts[1].strip().strip('"').strip("'")
-
-                # skip empty values or values equal to "None"
-                if value is None or value == "None":
-                    continue
-
-                # set key/value on interface
-                current_interface[key] = value
-
-        # add the final interface to the list
-        if current_interface:
-            interfaces.append(current_interface)
+            # ensure interface has a name
+            interface_config = config_interfaces[interface_name]
+            interface_config["name"] = interface_name
+            interfaces.append(interface_config)
 
         return interfaces

From e1ae122297678d1628a71abe435955f8912d298e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 3 Feb 2025 01:25:27 +1300
Subject: [PATCH 051/131] remove spaces so config format is the same as normal
 file saving

---
 meshchat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index ecddcfa..f63d06a 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -805,7 +805,7 @@ class ReticulumMeshChat:
                             if sub_name in {"type", "port", "interface_enabled"}:
                                 continue
                             if isinstance(sub_config, dict):
-                                output.append(f"  [[[ {sub_name} ]]]")
+                                output.append(f"  [[[{sub_name}]]]")
                                 for sub_key, sub_value in sub_config.items():
                                     output.append(f"      {sub_key} = {sub_value}")
                                 output.append("")

From 2c518d1b31d2c9038e89d8050bae718cdabc4ae1 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 3 Feb 2025 13:13:11 +1300
Subject: [PATCH 052/131] fix for calling async functions in sync callbacks
 from different threads

---
 meshchat.py | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index f63d06a..e3f9bb2 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -270,7 +270,7 @@ class ReticulumMeshChat:
     # handle receiving a new audio call
     def on_incoming_audio_call(self, audio_call: AudioCall):
         print("on_incoming_audio_call: {}".format(audio_call.link.hash.hex()))
-        asyncio.run(self.websocket_broadcast(json.dumps({
+        AsyncUtils.run_async(self.websocket_broadcast(json.dumps({
             "type": "incoming_audio_call",
         })))
 
@@ -1115,7 +1115,7 @@ class ReticulumMeshChat:
             def on_audio_packet(data):
                 if websocket_response.closed is False:
                     try:
-                        asyncio.run(websocket_response.send_bytes(data))
+                        AsyncUtils.run_async(websocket_response.send_bytes(data))
                     except:
                         # ignore errors sending audio packets to websocket
                         pass
@@ -1124,7 +1124,7 @@ class ReticulumMeshChat:
             def on_hangup():
                 if websocket_response.closed is False:
                     try:
-                        asyncio.run(websocket_response.close(code=WSCloseCode.GOING_AWAY))
+                        AsyncUtils.run_async(websocket_response.close(code=WSCloseCode.GOING_AWAY))
                     except:
                         # ignore errors closing websocket
                         pass
@@ -2102,7 +2102,7 @@ class ReticulumMeshChat:
 
             # handle successful file download
             def on_file_download_success(file_name, file_bytes):
-                asyncio.run(client.send_str(json.dumps({
+                AsyncUtils.run_async(client.send_str(json.dumps({
                     "type": "nomadnet.file.download",
                     "nomadnet_file_download": {
                         "status": "success",
@@ -2115,7 +2115,7 @@ class ReticulumMeshChat:
 
             # handle file download failure
             def on_file_download_failure(failure_reason):
-                asyncio.create_task(client.send_str(json.dumps({
+                AsyncUtils.run_async(client.send_str(json.dumps({
                     "type": "nomadnet.file.download",
                     "nomadnet_file_download": {
                         "status": "failure",
@@ -2127,7 +2127,7 @@ class ReticulumMeshChat:
 
             # handle file download progress
             def on_file_download_progress(progress):
-                asyncio.run(client.send_str(json.dumps({
+                AsyncUtils.run_async(client.send_str(json.dumps({
                     "type": "nomadnet.file.download",
                     "nomadnet_file_download": {
                         "status": "progress",
@@ -2177,7 +2177,7 @@ class ReticulumMeshChat:
 
             # handle successful page download
             def on_page_download_success(page_content):
-                asyncio.run(client.send_str(json.dumps({
+                AsyncUtils.run_async(client.send_str(json.dumps({
                     "type": "nomadnet.page.download",
                     "nomadnet_page_download": {
                         "status": "success",
@@ -2189,7 +2189,7 @@ class ReticulumMeshChat:
 
             # handle page download failure
             def on_page_download_failure(failure_reason):
-                asyncio.create_task(client.send_str(json.dumps({
+                AsyncUtils.run_async(client.send_str(json.dumps({
                     "type": "nomadnet.page.download",
                     "nomadnet_page_download": {
                         "status": "failure",
@@ -2201,7 +2201,7 @@ class ReticulumMeshChat:
 
             # handle page download progress
             def on_page_download_progress(progress):
-                asyncio.run(client.send_str(json.dumps({
+                AsyncUtils.run_async(client.send_str(json.dumps({
                     "type": "nomadnet.page.download",
                     "nomadnet_page_download": {
                         "status": "progress",
@@ -2587,7 +2587,7 @@ class ReticulumMeshChat:
                 return
 
             # send received lxmf message data to all websocket clients
-            asyncio.run(self.websocket_broadcast(json.dumps({
+            AsyncUtils.run_async(self.websocket_broadcast(json.dumps({
                 "type": "lxmf.delivery",
                 "lxmf_message": self.convert_db_lxmf_message_to_dict(db_lxmf_message),
             })))
@@ -2847,7 +2847,7 @@ class ReticulumMeshChat:
         # handle lxmf message progress loop without blocking or awaiting
         # otherwise other incoming websocket packets will not be processed until sending is complete
         # which results in the next message not showing up until the first message is finished
-        asyncio.create_task(self.handle_lxmf_message_progress(lxmf_message))
+        AsyncUtils.run_async(self.handle_lxmf_message_progress(lxmf_message))
 
         return lxmf_message
 
@@ -2897,7 +2897,7 @@ class ReticulumMeshChat:
             return
 
         # send database announce to all websocket clients
-        asyncio.run(self.websocket_broadcast(json.dumps({
+        AsyncUtils.run_async(self.websocket_broadcast(json.dumps({
             "type": "announce",
             "announce": self.convert_db_announce_to_dict(announce),
         })))
@@ -2918,14 +2918,14 @@ class ReticulumMeshChat:
             return
 
         # send database announce to all websocket clients
-        asyncio.run(self.websocket_broadcast(json.dumps({
+        AsyncUtils.run_async(self.websocket_broadcast(json.dumps({
             "type": "announce",
             "announce": self.convert_db_announce_to_dict(announce),
         })))
 
         # resend all failed messages that were intended for this destination
         if self.config.auto_resend_failed_messages_when_announce_received.get():
-            asyncio.run(self.resend_failed_messages_for_destination(destination_hash.hex()))
+            AsyncUtils.run_async(self.resend_failed_messages_for_destination(destination_hash.hex()))
 
     # handle an announce received from reticulum, for an lxmf propagation node address
     # NOTE: cant be async, as Reticulum doesn't await it
@@ -2943,7 +2943,7 @@ class ReticulumMeshChat:
             return
 
         # send database announce to all websocket clients
-        asyncio.run(self.websocket_broadcast(json.dumps({
+        AsyncUtils.run_async(self.websocket_broadcast(json.dumps({
             "type": "announce",
             "announce": self.convert_db_announce_to_dict(announce),
         })))
@@ -3027,7 +3027,7 @@ class ReticulumMeshChat:
             return
 
         # send database announce to all websocket clients
-        asyncio.run(self.websocket_broadcast(json.dumps({
+        AsyncUtils.run_async(self.websocket_broadcast(json.dumps({
             "type": "announce",
             "announce": self.convert_db_announce_to_dict(announce),
         })))

From 0f31c9f8c0edeb259e4357e9870ad368bb4be1d6 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 3 Feb 2025 13:57:41 +1300
Subject: [PATCH 053/131] show network name in interfaces list if ifac is
 enabled

---
 src/frontend/components/interfaces/Interface.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/components/interfaces/Interface.vue b/src/frontend/components/interfaces/Interface.vue
index 5eafded..e45cc55 100644
--- a/src/frontend/components/interfaces/Interface.vue
+++ b/src/frontend/components/interfaces/Interface.vue
@@ -10,7 +10,7 @@
                     </svg>
                 </div>
                 <span class="ml-1 my-auto">
-                    <span class="text-green-500">{{ iface._stats.ifac_size * 8 }}-bit IFAC</span> with sig <span @click="onIFACSignatureClick(iface._stats.ifac_signature)" class="cursor-pointer">&lt;{{ iface._stats.ifac_signature.slice(0, 6) }}...{{ iface._stats.ifac_signature.slice(-6) }}&gt;</span>
+                    <span class="text-green-500">{{ iface._stats.ifac_size * 8 }}-bit IFAC</span> <span v-if="iface._stats?.ifac_netname != null">• Network Name: <span class="text-purple-500">{{ iface._stats.ifac_netname }}</span></span> • Signature <span @click="onIFACSignatureClick(iface._stats.ifac_signature)" class="cursor-pointer">&lt;{{ iface._stats.ifac_signature.slice(0, 6) }}...{{ iface._stats.ifac_signature.slice(-6) }}&gt;</span>
                 </span>
             </div>
         </div>

From 10bef61a90c44855778c084f216ac5eccc1f002d Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 12:54:49 +1300
Subject: [PATCH 054/131] use short interface name to find interface stats

---
 .../components/interfaces/InterfacesPage.vue  | 48 +------------------
 1 file changed, 2 insertions(+), 46 deletions(-)

diff --git a/src/frontend/components/interfaces/InterfacesPage.vue b/src/frontend/components/interfaces/InterfacesPage.vue
index c25c890..8b58d9d 100644
--- a/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/src/frontend/components/interfaces/InterfacesPage.vue
@@ -141,57 +141,13 @@ export default {
                 // update data
                 const interfaces = response.data.interface_stats?.interfaces ?? [];
                 for(const iface of interfaces){
-                    this.interfaceStats[iface.name] = iface;
+                    this.interfaceStats[iface.short_name] = iface;
                 }
 
             } catch(e) {
                 // do nothing if failed to load interfaces
             }
         },
-        findInterfaceStats(interfaceName) {
-            const interfaceDescription = this.getInterfaceDescription(interfaceName);
-            return this.interfaceStats[interfaceDescription];
-        },
-        getInterfaceDescription(interfaceName) {
-
-            // the interface-stats api returns interface names like the following;
-            //
-            // "AutoInterface[Default Interface]"
-            // "RNodeInterface[RNode LoRa Interface Fast]"
-            // "TCPInterface[RNS Testnet Amsterdam/amsterdam.connect.reticulum.network:4965]"
-            //
-            // however, the interfaces api just returns;
-            // "Default Interface"
-            // "RNode LoRa Interface Fast"
-            // "RNS Testnet Amsterdam"
-            //
-            // so we need to map the basic interface name to the former, so we can lookup stats for the interface
-            const iface = this.interfaces[interfaceName];
-            if(iface){
-                switch(iface.type){
-                    case "TCPClientInterface": {
-                        // yes, this is meant to be passed as TCPInterface, even though the interface type includes client...
-                        // example: "TCPInterface[RNS Testnet Amsterdam/amsterdam.connect.reticulum.network:4965]";
-                        return `TCPInterface[${interfaceName}/${iface.target_host}:${iface.target_port}]`;
-                    }
-                    case "TCPServerInterface": {
-                        // example: "TCPServerInterface[TCP Server Interface/0.0.0.0:4242]";
-                        return `TCPServerInterface[${interfaceName}/${iface.listen_ip}:${iface.listen_port}]`;
-                    }
-                    case "UDPInterface": {
-                        // example: "UDPInterface[UDP Interface/0.0.0.0:1234]";
-                        return `UDPInterface[${interfaceName}/${iface.listen_ip}:${iface.listen_port}]`;
-                    }
-                    default: {
-                        // example: "RNodeInterface[RNode LoRa Interface Fast]",
-                        return `${iface.type}[${interfaceName}]`;
-                    }
-                }
-            }
-
-            return null;
-
-        },
         async enableInterface(interfaceName) {
 
             // enable interface
@@ -301,7 +257,7 @@ export default {
             const results = [];
             for(const [interfaceName, iface] of Object.entries(this.interfaces)){
                 iface._name = interfaceName;
-                iface._stats = this.findInterfaceStats(interfaceName);
+                iface._stats = this.interfaceStats[interfaceName];
                 results.push(iface);
             }
             return results;

From 93b6104aef7f070a6c2e850384da400ee1d65ff1 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 21 Jan 2025 03:52:47 +1300
Subject: [PATCH 055/131] initial implementation of a WebsocketClientInterface
 and a WebsocketServerInterface for RNS

---
 .../interfaces/WebsocketClientInterface.py    | 109 ++++++++++++++
 .../interfaces/WebsocketServerInterface.py    | 133 ++++++++++++++++++
 2 files changed, 242 insertions(+)
 create mode 100644 src/backend/interfaces/WebsocketClientInterface.py
 create mode 100644 src/backend/interfaces/WebsocketServerInterface.py

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
new file mode 100644
index 0000000..a423cbe
--- /dev/null
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -0,0 +1,109 @@
+import asyncio
+import threading
+
+import RNS
+import websockets
+from RNS.Interfaces.Interface import Interface
+from websockets.asyncio.connection import Connection
+
+from src.backend.async_utils import AsyncUtils
+
+
+class WebsocketClientInterface(Interface):
+
+    # TODO: required?
+    DEFAULT_IFAC_SIZE = 16
+
+    def __str__(self):
+        return f"WebsocketClientInterface[{self.name}/{self.target_host}:{self.target_port}]"
+
+    def __init__(self, owner, configuration, websocket: Connection = None):
+
+        super().__init__()
+
+        self.owner = owner
+
+        self.IN = True
+        self.OUT = False
+        self.HW_MTU = 262144 # 256KiB
+        self.bitrate = 1_000_000_000 # 1Gbps
+        self.mode = RNS.Interfaces.Interface.Interface.MODE_FULL
+
+        # parse config
+        ifconf = Interface.get_config_obj(configuration)
+        self.name = ifconf.get("name")
+        self.target_host = ifconf.get("target_host", None)
+        self.target_port = ifconf.get("target_port", None)
+
+        # ensure target host is provided
+        if self.target_host is None:
+            raise SystemError(f"target_host is required for interface '{self.name}'")
+
+        # ensure target port is provided
+        if self.target_port is None:
+            raise SystemError(f"target_port is required for interface '{self.name}'")
+
+        # convert target port to int
+        self.target_port = int(self.target_port)
+
+        # connect to websocket server if an existing connection was not provided
+        self.websocket = websocket
+        if self.websocket is None:
+            thread = threading.Thread(target=asyncio.run, args=(self.connect(),))
+            thread.daemon = True
+            thread.start()
+
+    # called when a full packet has been received over the websocket
+    def process_incoming(self, data):
+
+        print(f"{self} process_incoming: {data.hex()}")
+
+        # update received bytes counter
+        self.rxb += len(data)
+
+        # send received data to transport instance
+        self.owner.inbound(data, self)
+
+    # the running reticulum transport instance will call this method whenever the interface must transmit a packet
+    def process_outgoing(self, data):
+
+        # do nothing if not online
+        if not self.online:
+            return
+
+        # send to websocket server
+        print(f"{self} process_outgoing: {data.hex()}")
+        AsyncUtils.run_async(self.websocket.send(data))
+
+        # update sent bytes counter
+        self.txb += len(data)
+
+    # connect to the configured websocket server
+    async def connect(self):
+
+        try:
+            # todo: ws:// and wss:// support in config file?
+            async with websockets.connect(f"ws://{self.target_host}:{self.target_port}", max_size=None, compression=None) as websocket:
+                self.websocket = websocket
+                await self.read_loop()
+        except Exception as e:
+            RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)
+
+        # todo implement reconnect delay
+        await self.connect()
+
+    async def read_loop(self):
+
+        self.online = True
+
+        try:
+            async for message in self.websocket:
+                self.process_incoming(message)
+        except Exception as e:
+            RNS.log(f"{self} read loop error: {e}", RNS.LOG_ERROR)
+
+        self.online = False
+
+
+# set interface class RNS should use when importing this external interface
+interface_class = WebsocketClientInterface
diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
new file mode 100644
index 0000000..14ce4f8
--- /dev/null
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -0,0 +1,133 @@
+import asyncio
+import threading
+import time
+
+import RNS
+import websockets
+from RNS.Interfaces.Interface import Interface
+from websockets import ServerConnection
+
+from src.backend.interfaces.WebsocketClientInterface import WebsocketClientInterface
+
+
+class WebsocketServerInterface(Interface):
+
+    # TODO: required?
+    DEFAULT_IFAC_SIZE = 16
+
+    def __str__(self):
+        return f"WebsocketServerInterface[{self.name}/{self.listen_ip}:{self.listen_port}]"
+
+    def __init__(self, owner, configuration):
+
+        super().__init__()
+
+        self.owner = owner
+
+        self.IN = True
+        self.OUT = False
+        self.HW_MTU = 262144 # 256KiB
+        self.bitrate = 1_000_000_000 # 1Gbps
+        self.mode = RNS.Interfaces.Interface.Interface.MODE_FULL
+        self.spawned_interfaces = []
+
+        # parse config
+        ifconf = Interface.get_config_obj(configuration)
+        self.name = ifconf.get("name")
+        self.listen_ip = ifconf.get("listen_ip", None)
+        self.listen_port = ifconf.get("listen_port", None)
+
+        # ensure listen ip is provided
+        if self.listen_ip is None:
+            raise SystemError(f"listen_ip is required for interface '{self.name}'")
+
+        # ensure listen port is provided
+        if self.listen_port is None:
+            raise SystemError(f"listen_port is required for interface '{self.name}'")
+
+        # convert listen port to int
+        self.listen_port = int(self.listen_port)
+
+        # run websocket server
+        thread = threading.Thread(target=asyncio.run, args=(self.serve(),))
+        thread.daemon = True
+        thread.start()
+
+    # todo docs
+    def received_announce(self, from_spawned=False):
+        if from_spawned:
+            self.ia_freq_deque.append(time.time())
+
+    # todo docs
+    def sent_announce(self, from_spawned=False):
+        if from_spawned:
+            self.oa_freq_deque.append(time.time())
+
+    # called when a full packet has been received from a websocket client
+    def process_incoming(self, data):
+
+        print(f"{self} process_incoming: {data.hex()}")
+
+        # Update our received bytes counter
+        self.rxb += len(data)
+
+        # And send the data packet to the Transport instance for processing.
+        self.owner.inbound(data, self)
+
+    # do nothing as the spawned child interface will take care of rx/tx
+    def process_outgoing(self, data):
+        pass
+
+    async def serve(self):
+
+        # handle new websocket client connections
+        async def on_websocket_client_connected(websocket: ServerConnection):
+
+            # create new child interface
+            RNS.log("Accepting incoming WebSocket connection", RNS.LOG_VERBOSE)
+            spawned_interface = WebsocketClientInterface(self.owner, {
+                "name": f"Client on {self.name}",
+                "target_host": websocket.remote_address[0],
+                "target_port": str(websocket.remote_address[1]),
+            }, websocket=websocket)
+
+            # configure child interface
+            spawned_interface.IN = self.IN
+            spawned_interface.OUT = self.OUT
+            spawned_interface.HW_MTU = self.HW_MTU
+            spawned_interface.bitrate = self.bitrate
+            spawned_interface.mode = self.mode
+            spawned_interface.parent_interface = self
+            spawned_interface.online = True
+
+            # todo ifac?
+            # todo announce rates?
+
+            # activate child interface
+            RNS.log(f"Spawned new WebsocketClientInterface: {spawned_interface}", RNS.LOG_VERBOSE)
+            RNS.Transport.interfaces.append(spawned_interface)
+
+            # associate child interface with this interface
+            while spawned_interface in self.spawned_interfaces:
+                self.spawned_interfaces.remove(spawned_interface)
+            self.spawned_interfaces.append(spawned_interface)
+
+            # run read loop
+            await spawned_interface.read_loop()
+
+        # run websocket server
+        try:
+            async with websockets.serve(on_websocket_client_connected, self.listen_ip, self.listen_port, compression=None) as server:
+                self.online = True
+                await server.serve_forever()
+        except Exception as e:
+            RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)
+
+        # websocket server is no longer running, let's restart it
+        # todo implement retry delay
+        self.online = False
+        await self.serve()
+
+
+# set interface class RNS should use when importing this external interface
+interface_class = WebsocketServerInterface

From 94179f97798c8b2d5366fe63cee46db3020bce5f Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 21 Jan 2025 04:23:36 +1300
Subject: [PATCH 056/131] add todos for detaching

---
 src/backend/interfaces/WebsocketClientInterface.py | 6 ++++++
 src/backend/interfaces/WebsocketServerInterface.py | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index a423cbe..6dfecf2 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -104,6 +104,12 @@ class WebsocketClientInterface(Interface):
 
         self.online = False
 
+    # todo implement
+    def detach(self):
+        # todo mark as offline
+        # todo close websocket
+        # todo mark as detached
+        pass
 
 # set interface class RNS should use when importing this external interface
 interface_class = WebsocketClientInterface
diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
index 14ce4f8..75a68c6 100644
--- a/src/backend/interfaces/WebsocketServerInterface.py
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -128,6 +128,12 @@ class WebsocketServerInterface(Interface):
         self.online = False
         await self.serve()
 
+    # todo implement
+    def detach(self):
+        # todo mark as offline
+        # todo stop websocket server and all existing connections
+        # todo mark as detached
+        pass
 
 # set interface class RNS should use when importing this external interface
 interface_class = WebsocketServerInterface

From a500b58d05ebb37f734d643b3eedf10307528a19 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 27 Jan 2025 22:55:52 +1300
Subject: [PATCH 057/131] fix missing object values

---
 src/backend/interfaces/WebsocketServerInterface.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
index 75a68c6..8ffcdc4 100644
--- a/src/backend/interfaces/WebsocketServerInterface.py
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -100,6 +100,11 @@ class WebsocketServerInterface(Interface):
             spawned_interface.parent_interface = self
             spawned_interface.online = True
 
+            # todo implement?
+            spawned_interface.announce_rate_target = None
+            spawned_interface.announce_rate_grace = None
+            spawned_interface.announce_rate_penalty = None
+
             # todo ifac?
             # todo announce rates?
 

From a81c6787c708812f18d419c6725f2d97d04da8d0 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 17:00:37 +1300
Subject: [PATCH 058/131] refactor websocket interfaces to use threading and
 implement detach

---
 .../interfaces/WebsocketClientInterface.py    | 50 +++++++++++--------
 .../interfaces/WebsocketServerInterface.py    | 44 +++++++++-------
 2 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index 6dfecf2..5a7e74f 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -1,12 +1,10 @@
-import asyncio
 import threading
+import time
 
 import RNS
-import websockets
 from RNS.Interfaces.Interface import Interface
-from websockets.asyncio.connection import Connection
-
-from src.backend.async_utils import AsyncUtils
+from websockets.sync.client import connect
+from websockets.sync.connection import Connection
 
 
 class WebsocketClientInterface(Interface):
@@ -14,6 +12,8 @@ class WebsocketClientInterface(Interface):
     # TODO: required?
     DEFAULT_IFAC_SIZE = 16
 
+    RECONNECT_DELAY_MILLIS = 5000
+
     def __str__(self):
         return f"WebsocketClientInterface[{self.name}/{self.target_host}:{self.target_port}]"
 
@@ -49,7 +49,7 @@ class WebsocketClientInterface(Interface):
         # connect to websocket server if an existing connection was not provided
         self.websocket = websocket
         if self.websocket is None:
-            thread = threading.Thread(target=asyncio.run, args=(self.connect(),))
+            thread = threading.Thread(target=self.connect)
             thread.daemon = True
             thread.start()
 
@@ -73,43 +73,53 @@ class WebsocketClientInterface(Interface):
 
         # send to websocket server
         print(f"{self} process_outgoing: {data.hex()}")
-        AsyncUtils.run_async(self.websocket.send(data))
+        self.websocket.send(data)
 
         # update sent bytes counter
         self.txb += len(data)
 
     # connect to the configured websocket server
-    async def connect(self):
+    def connect(self):
 
+        # do nothing if interface is detached
+        if self.detached:
+            return
+
+        # connect to websocket server
         try:
             # todo: ws:// and wss:// support in config file?
-            async with websockets.connect(f"ws://{self.target_host}:{self.target_port}", max_size=None, compression=None) as websocket:
-                self.websocket = websocket
-                await self.read_loop()
+            self.websocket = connect(f"ws://{self.target_host}:{self.target_port}", max_size=None, compression=None)
+            self.read_loop()
         except Exception as e:
             RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)
 
-        # todo implement reconnect delay
-        await self.connect()
+        # auto reconnect after delay
+        time.sleep(self.RECONNECT_DELAY_MILLIS)
+        self.connect()
 
-    async def read_loop(self):
+    def read_loop(self):
 
         self.online = True
 
         try:
-            async for message in self.websocket:
+            for message in self.websocket:
                 self.process_incoming(message)
         except Exception as e:
             RNS.log(f"{self} read loop error: {e}", RNS.LOG_ERROR)
 
         self.online = False
 
-    # todo implement
     def detach(self):
-        # todo mark as offline
-        # todo close websocket
-        # todo mark as detached
-        pass
+
+        # mark as offline
+        self.online = False
+
+        # close websocket
+        if self.websocket is not None:
+            self.websocket.close()
+
+        # mark as detached
+        self.detached = True
 
 # set interface class RNS should use when importing this external interface
 interface_class = WebsocketClientInterface
diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
index 8ffcdc4..52b15d7 100644
--- a/src/backend/interfaces/WebsocketServerInterface.py
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -1,11 +1,11 @@
-import asyncio
 import threading
 import time
 
 import RNS
-import websockets
 from RNS.Interfaces.Interface import Interface
-from websockets import ServerConnection
+from websockets.sync.server import Server
+from websockets.sync.server import serve
+from websockets.sync.server import ServerConnection
 
 from src.backend.interfaces.WebsocketClientInterface import WebsocketClientInterface
 
@@ -15,6 +15,8 @@ class WebsocketServerInterface(Interface):
     # TODO: required?
     DEFAULT_IFAC_SIZE = 16
 
+    RESTART_DELAY_MILLIS = 5000
+
     def __str__(self):
         return f"WebsocketServerInterface[{self.name}/{self.listen_ip}:{self.listen_port}]"
 
@@ -29,7 +31,9 @@ class WebsocketServerInterface(Interface):
         self.HW_MTU = 262144 # 256KiB
         self.bitrate = 1_000_000_000 # 1Gbps
         self.mode = RNS.Interfaces.Interface.Interface.MODE_FULL
-        self.spawned_interfaces = []
+
+        self.server: Server | None = None
+        self.spawned_interfaces: [WebsocketClientInterface] = []
 
         # parse config
         ifconf = Interface.get_config_obj(configuration)
@@ -49,7 +53,7 @@ class WebsocketServerInterface(Interface):
         self.listen_port = int(self.listen_port)
 
         # run websocket server
-        thread = threading.Thread(target=asyncio.run, args=(self.serve(),))
+        thread = threading.Thread(target=self.serve)
         thread.daemon = True
         thread.start()
 
@@ -78,10 +82,10 @@ class WebsocketServerInterface(Interface):
     def process_outgoing(self, data):
         pass
 
-    async def serve(self):
+    def serve(self):
 
         # handle new websocket client connections
-        async def on_websocket_client_connected(websocket: ServerConnection):
+        def on_websocket_client_connected(websocket: ServerConnection):
 
             # create new child interface
             RNS.log("Accepting incoming WebSocket connection", RNS.LOG_VERBOSE)
@@ -118,27 +122,33 @@ class WebsocketServerInterface(Interface):
             self.spawned_interfaces.append(spawned_interface)
 
             # run read loop
-            await spawned_interface.read_loop()
+            spawned_interface.read_loop()
 
         # run websocket server
         try:
-            async with websockets.serve(on_websocket_client_connected, self.listen_ip, self.listen_port, compression=None) as server:
+            with serve(on_websocket_client_connected, self.listen_ip, self.listen_port, compression=None) as server:
                 self.online = True
-                await server.serve_forever()
+                self.server = server
+                server.serve_forever()
         except Exception as e:
             RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)
 
         # websocket server is no longer running, let's restart it
-        # todo implement retry delay
         self.online = False
-        await self.serve()
+        time.sleep(self.RESTART_DELAY_MILLIS)
+        self.serve()
 
-    # todo implement
     def detach(self):
-        # todo mark as offline
-        # todo stop websocket server and all existing connections
-        # todo mark as detached
-        pass
+
+        # mark as offline
+        self.online = False
+
+        # stop websocket server
+        if self.server is not None:
+            self.server.shutdown()
+
+        # mark as detached
+        self.detached = True
 
 # set interface class RNS should use when importing this external interface
 interface_class = WebsocketServerInterface

From 03d7b669aed652ddbf0a267f75f825fd4c29d011 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 17:17:46 +1300
Subject: [PATCH 059/131] show connected clients count for websocket server
 interface

---
 src/backend/interfaces/WebsocketServerInterface.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
index 52b15d7..26f1cae 100644
--- a/src/backend/interfaces/WebsocketServerInterface.py
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -57,6 +57,10 @@ class WebsocketServerInterface(Interface):
         thread.daemon = True
         thread.start()
 
+    @property
+    def clients(self):
+        return len(self.spawned_interfaces)
+
     # todo docs
     def received_announce(self, from_spawned=False):
         if from_spawned:
@@ -124,6 +128,9 @@ class WebsocketServerInterface(Interface):
             # run read loop
             spawned_interface.read_loop()
 
+            # client must have disconnected as the read loop finished, so forget the spawned interface
+            self.spawned_interfaces.remove(spawned_interface)
+
         # run websocket server
         try:
             with serve(on_websocket_client_connected, self.listen_ip, self.listen_port, compression=None) as server:

From 5802671e0db00050273d9713f09d0ac705c936d4 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 17:28:22 +1300
Subject: [PATCH 060/131] allow setting target protocol type to ws or wss

---
 src/backend/interfaces/WebsocketClientInterface.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index 5a7e74f..60c05eb 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -34,6 +34,7 @@ class WebsocketClientInterface(Interface):
         self.name = ifconf.get("name")
         self.target_host = ifconf.get("target_host", None)
         self.target_port = ifconf.get("target_port", None)
+        self.target_type = ifconf.get("target_type", "ws")
 
         # ensure target host is provided
         if self.target_host is None:
@@ -87,8 +88,7 @@ class WebsocketClientInterface(Interface):
 
         # connect to websocket server
         try:
-            # todo: ws:// and wss:// support in config file?
-            self.websocket = connect(f"ws://{self.target_host}:{self.target_port}", max_size=None, compression=None)
+            self.websocket = connect(f"{self.target_type}://{self.target_host}:{self.target_port}", max_size=None, compression=None)
             self.read_loop()
         except Exception as e:
             RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)

From 030a1e64a9535e757a7d1a503ccd827c731932e5 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 17:31:25 +1300
Subject: [PATCH 061/131] always show clients count for interfaces that provide
 a count

---
 src/frontend/components/interfaces/Interface.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/components/interfaces/Interface.vue b/src/frontend/components/interfaces/Interface.vue
index e45cc55..afa9595 100644
--- a/src/frontend/components/interfaces/Interface.vue
+++ b/src/frontend/components/interfaces/Interface.vue
@@ -198,7 +198,7 @@
                 iface._stats?.noise_floor
               }} dBm
             </div>
-            <div v-if="iface._stats?.clients">• Clients: {{ iface._stats?.clients }}</div>
+            <div v-if="iface._stats?.clients != null">• Clients: {{ iface._stats?.clients }}</div>
 
         </div>
 

From b6e41b3027a38c9b75660ad8a1f812501599a166 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 17:46:45 +1300
Subject: [PATCH 062/131] remove packet logs

---
 src/backend/interfaces/WebsocketClientInterface.py | 3 ---
 src/backend/interfaces/WebsocketServerInterface.py | 2 --
 2 files changed, 5 deletions(-)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index 60c05eb..b0088da 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -57,8 +57,6 @@ class WebsocketClientInterface(Interface):
     # called when a full packet has been received over the websocket
     def process_incoming(self, data):
 
-        print(f"{self} process_incoming: {data.hex()}")
-
         # update received bytes counter
         self.rxb += len(data)
 
@@ -73,7 +71,6 @@ class WebsocketClientInterface(Interface):
             return
 
         # send to websocket server
-        print(f"{self} process_outgoing: {data.hex()}")
         self.websocket.send(data)
 
         # update sent bytes counter
diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
index 26f1cae..066665f 100644
--- a/src/backend/interfaces/WebsocketServerInterface.py
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -74,8 +74,6 @@ class WebsocketServerInterface(Interface):
     # called when a full packet has been received from a websocket client
     def process_incoming(self, data):
 
-        print(f"{self} process_incoming: {data.hex()}")
-
         # Update our received bytes counter
         self.rxb += len(data)
 

From c0bb0763a1aabcc4d6e3fcbe7717441e1c54fdfa Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 19:39:24 +1300
Subject: [PATCH 063/131] fix tx rx stats for web socket server and don't tx
 and rx when offline or detached

---
 .../interfaces/WebsocketClientInterface.py    | 24 ++++++++++++++++---
 .../interfaces/WebsocketServerInterface.py    |  9 ++-----
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index b0088da..d3bd59c 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -22,6 +22,7 @@ class WebsocketClientInterface(Interface):
         super().__init__()
 
         self.owner = owner
+        self.parent_interface = None
 
         self.IN = True
         self.OUT = False
@@ -57,25 +58,42 @@ class WebsocketClientInterface(Interface):
     # called when a full packet has been received over the websocket
     def process_incoming(self, data):
 
+        # do nothing if offline or detached
+        if not self.online or self.detached:
+            return
+
         # update received bytes counter
         self.rxb += len(data)
 
+        # update received bytes counter for parent interface
+        if self.parent_interface is not None:
+            self.parent_interface.rxb += len(data)
+
         # send received data to transport instance
         self.owner.inbound(data, self)
 
     # the running reticulum transport instance will call this method whenever the interface must transmit a packet
     def process_outgoing(self, data):
 
-        # do nothing if not online
-        if not self.online:
+        # do nothing if offline or detached
+        if not self.online or self.detached:
             return
 
         # send to websocket server
-        self.websocket.send(data)
+        try:
+            self.websocket.send(data)
+        except Exception as e:
+            RNS.log(f"Exception occurred while transmitting via {str(self)}", RNS.LOG_ERROR)
+            RNS.log(f"The contained exception was: {str(e)}", RNS.LOG_ERROR)
+            return
 
         # update sent bytes counter
         self.txb += len(data)
 
+        # update received bytes counter for parent interface
+        if self.parent_interface is not None:
+            self.parent_interface.txb += len(data)
+
     # connect to the configured websocket server
     def connect(self):
 
diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
index 066665f..ed73c72 100644
--- a/src/backend/interfaces/WebsocketServerInterface.py
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -71,14 +71,9 @@ class WebsocketServerInterface(Interface):
         if from_spawned:
             self.oa_freq_deque.append(time.time())
 
-    # called when a full packet has been received from a websocket client
+    # do nothing as the spawned child interface will take care of rx/tx
     def process_incoming(self, data):
-
-        # Update our received bytes counter
-        self.rxb += len(data)
-
-        # And send the data packet to the Transport instance for processing.
-        self.owner.inbound(data, self)
+        pass
 
     # do nothing as the spawned child interface will take care of rx/tx
     def process_outgoing(self, data):

From ee08a5619c7ba53aaac69e3c128ac6aec75eeef5 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 19:49:20 +1300
Subject: [PATCH 064/131] time.sleep uses seconds not millis

---
 src/backend/interfaces/WebsocketClientInterface.py | 6 ++++--
 src/backend/interfaces/WebsocketServerInterface.py | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index d3bd59c..b7810cd 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -12,7 +12,7 @@ class WebsocketClientInterface(Interface):
     # TODO: required?
     DEFAULT_IFAC_SIZE = 16
 
-    RECONNECT_DELAY_MILLIS = 5000
+    RECONNECT_DELAY_SECONDS = 5
 
     def __str__(self):
         return f"WebsocketClientInterface[{self.name}/{self.target_host}:{self.target_port}]"
@@ -103,13 +103,15 @@ class WebsocketClientInterface(Interface):
 
         # connect to websocket server
         try:
+            RNS.log(f"Establishing Websocket connection for {str(self)}...", RNS.LOG_DEBUG)
             self.websocket = connect(f"{self.target_type}://{self.target_host}:{self.target_port}", max_size=None, compression=None)
             self.read_loop()
         except Exception as e:
             RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)
 
         # auto reconnect after delay
-        time.sleep(self.RECONNECT_DELAY_MILLIS)
+        RNS.log(f"Websocket disconnected for {str(self)}...", RNS.LOG_DEBUG)
+        time.sleep(self.RECONNECT_DELAY_SECONDS)
         self.connect()
 
     def read_loop(self):
diff --git a/src/backend/interfaces/WebsocketServerInterface.py b/src/backend/interfaces/WebsocketServerInterface.py
index ed73c72..19819f5 100644
--- a/src/backend/interfaces/WebsocketServerInterface.py
+++ b/src/backend/interfaces/WebsocketServerInterface.py
@@ -15,7 +15,7 @@ class WebsocketServerInterface(Interface):
     # TODO: required?
     DEFAULT_IFAC_SIZE = 16
 
-    RESTART_DELAY_MILLIS = 5000
+    RESTART_DELAY_SECONDS = 5
 
     def __str__(self):
         return f"WebsocketServerInterface[{self.name}/{self.listen_ip}:{self.listen_port}]"
@@ -126,6 +126,7 @@ class WebsocketServerInterface(Interface):
 
         # run websocket server
         try:
+            RNS.log(f"Starting Websocket server for {str(self)}...", RNS.LOG_DEBUG)
             with serve(on_websocket_client_connected, self.listen_ip, self.listen_port, compression=None) as server:
                 self.online = True
                 self.server = server
@@ -135,7 +136,8 @@ class WebsocketServerInterface(Interface):
 
         # websocket server is no longer running, let's restart it
         self.online = False
-        time.sleep(self.RESTART_DELAY_MILLIS)
+        RNS.log(f"Websocket server stopped for {str(self)}...", RNS.LOG_DEBUG)
+        time.sleep(self.RESTART_DELAY_SECONDS)
         self.serve()
 
     def detach(self):

From e6ff5097c07fe09e90a392acb516f033b2a637de Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 7 Feb 2025 20:10:13 +1300
Subject: [PATCH 065/131] update logging

---
 src/backend/interfaces/WebsocketClientInterface.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index b7810cd..143a14e 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -103,8 +103,9 @@ class WebsocketClientInterface(Interface):
 
         # connect to websocket server
         try:
-            RNS.log(f"Establishing Websocket connection for {str(self)}...", RNS.LOG_DEBUG)
+            RNS.log(f"Connecting to Websocket for {str(self)}...", RNS.LOG_DEBUG)
             self.websocket = connect(f"{self.target_type}://{self.target_host}:{self.target_port}", max_size=None, compression=None)
+            RNS.log(f"Connected to Websocket for {str(self)}", RNS.LOG_DEBUG)
             self.read_loop()
         except Exception as e:
             RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)

From 9e7d0cdfeb9ba8481a16067e3e3737f01646a85f Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 11:53:10 +1300
Subject: [PATCH 066/131] add ping pong to make sure websocket connection
 doesn't go stale

---
 meshchat.py                            |  8 +++++++-
 src/frontend/js/WebSocketConnection.js | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index e3f9bb2..4d4b984 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -2081,8 +2081,14 @@ class ReticulumMeshChat:
         # get type from client data
         _type = data["type"]
 
+        # handle ping
+        if _type == "ping":
+            AsyncUtils.run_async(client.send_str(json.dumps({
+                "type": "pong",
+            })))
+
         # handle updating config
-        if _type == "config.set":
+        elif _type == "config.set":
 
             # get config from websocket
             config = data["config"]
diff --git a/src/frontend/js/WebSocketConnection.js b/src/frontend/js/WebSocketConnection.js
index d4622b8..f379213 100644
--- a/src/frontend/js/WebSocketConnection.js
+++ b/src/frontend/js/WebSocketConnection.js
@@ -3,8 +3,18 @@ import mitt from 'mitt';
 class WebSocketConnection {
 
     constructor() {
+
         this.emitter = mitt();
         this.reconnect();
+
+        /**
+         * ping websocket server every 30 seconds
+         * this helps to prevent the underlying tcp connection from going stale when there's no traffic for a long time
+         */
+        setInterval(() => {
+            this.ping();
+        }, 30000);
+
     }
 
     // add event listener
@@ -47,6 +57,16 @@ class WebSocketConnection {
         }
     }
 
+    ping() {
+        try {
+            this.send(JSON.stringify({
+                "type": "ping",
+            }));
+        } catch(e) {
+            // ignore error
+        }
+    }
+
 }
 
 export default new WebSocketConnection();

From 59c185354b03a338478fc5ebd5149414a40b875e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 11:57:47 +1300
Subject: [PATCH 067/131] remove todos

---
 README.md | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/README.md b/README.md
index 6c5e0e3..6f25ccc 100644
--- a/README.md
+++ b/README.md
@@ -283,20 +283,6 @@ I build the vite app everytime without hot reload, since MeshChat expects everyt
 ## TODO
 
 - [ ] button to forget announces
-- [ ] support for managing Reticulum interfaces via the web ui
-  - [x] AutoInterface
-  - [x] RNodeInterface
-  - [x] TCPClientInterface
-  - [x] TCPServerInterface
-  - [x] UDPInterface
-  - [ ] I2PInterface
-  - [ ] SerialInterface
-  - [ ] PipeInterface
-  - [ ] KISSInterface
-  - [ ] AX25KISSInterface
-  - [ ] Other Options
-    - [ ] network_name
-    - [ ] passphrase
 
 # Notes
 

From d13b395a2c80aae37a672049662ce8882e368a8e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 12:37:13 +1300
Subject: [PATCH 068/131] simplify config for webocket client interface

---
 .../interfaces/WebsocketClientInterface.py    | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/backend/interfaces/WebsocketClientInterface.py b/src/backend/interfaces/WebsocketClientInterface.py
index 143a14e..01258a2 100644
--- a/src/backend/interfaces/WebsocketClientInterface.py
+++ b/src/backend/interfaces/WebsocketClientInterface.py
@@ -15,7 +15,7 @@ class WebsocketClientInterface(Interface):
     RECONNECT_DELAY_SECONDS = 5
 
     def __str__(self):
-        return f"WebsocketClientInterface[{self.name}/{self.target_host}:{self.target_port}]"
+        return f"WebsocketClientInterface[{self.name}/{self.target_url}]"
 
     def __init__(self, owner, configuration, websocket: Connection = None):
 
@@ -33,20 +33,11 @@ class WebsocketClientInterface(Interface):
         # parse config
         ifconf = Interface.get_config_obj(configuration)
         self.name = ifconf.get("name")
-        self.target_host = ifconf.get("target_host", None)
-        self.target_port = ifconf.get("target_port", None)
-        self.target_type = ifconf.get("target_type", "ws")
+        self.target_url = ifconf.get("target_url", None)
 
-        # ensure target host is provided
-        if self.target_host is None:
-            raise SystemError(f"target_host is required for interface '{self.name}'")
-
-        # ensure target port is provided
-        if self.target_port is None:
-            raise SystemError(f"target_port is required for interface '{self.name}'")
-
-        # convert target port to int
-        self.target_port = int(self.target_port)
+        # ensure target url is provided
+        if self.target_url is None:
+            raise SystemError(f"target_url is required for interface '{self.name}'")
 
         # connect to websocket server if an existing connection was not provided
         self.websocket = websocket
@@ -104,7 +95,7 @@ class WebsocketClientInterface(Interface):
         # connect to websocket server
         try:
             RNS.log(f"Connecting to Websocket for {str(self)}...", RNS.LOG_DEBUG)
-            self.websocket = connect(f"{self.target_type}://{self.target_host}:{self.target_port}", max_size=None, compression=None)
+            self.websocket = connect(f"{self.target_url}", max_size=None, compression=None)
             RNS.log(f"Connected to Websocket for {str(self)}", RNS.LOG_DEBUG)
             self.read_loop()
         except Exception as e:

From c59ed015ce0a5b5143746f682d9c2ff3d604a9e7 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 13:10:24 +1300
Subject: [PATCH 069/131] update websockets to v14.2

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 95ba564..a6eeba6 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -3,4 +3,4 @@ cx_freeze>=7.0.0
 lxmf>=0.6.0
 peewee>=3.17.3
 rns>=0.9.1
-websockets>=12.0
+websockets>=14.2

From eaf1b75c5490bc5560c418395339f6fc1b799617 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 13:11:38 +1300
Subject: [PATCH 070/131] update lxmf to v0.6.2

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index a6eeba6..fbb087a 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.9.5
 cx_freeze>=7.0.0
-lxmf>=0.6.0
+lxmf>=0.6.2
 peewee>=3.17.3
 rns>=0.9.1
 websockets>=14.2

From 6f321741d7e21ffeae3511450ed8a57c5d9b5e2e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 13:14:48 +1300
Subject: [PATCH 071/131] update rnode flasher

---
 src/frontend/public/rnode-flasher/index.html  | 349 ++++++++++-------
 src/frontend/public/rnode-flasher/js/rnode.js | 358 ++++++++++--------
 2 files changed, 413 insertions(+), 294 deletions(-)

diff --git a/src/frontend/public/rnode-flasher/index.html b/src/frontend/public/rnode-flasher/index.html
index 0aa3aef..e231d84 100644
--- a/src/frontend/public/rnode-flasher/index.html
+++ b/src/frontend/public/rnode-flasher/index.html
@@ -110,7 +110,7 @@
         <div class="border-t px-2 py-1 text-sm">
             <div>
                 <span>Download Firmware</span>
-                <span v-if="selectedProduct && selectedModel && recommendedFirmwareFilename">: {{ recommendedFirmwareFilename }}</span>
+                <span v-if="selectedProduct && selectedModel && recommendedFirmwareFilename">: <a target="_blank" :href="`https://github.com/markqvist/RNode_Firmware/releases/latest/download/${recommendedFirmwareFilename}`" class="text-blue-500 hover:underline">{{ recommendedFirmwareFilename }}</a></span>
             </div>
             <div class="space-x-1">
                 <a target="_blank" href="https://github.com/markqvist/RNode_Firmware/releases" class="text-blue-500 hover:underline">Official Firmware</a>
@@ -312,6 +312,48 @@
 
     </div>
 
+    <div class="border bg-gray-50 rounded shadow">
+
+        <div class="border-b px-2 py-1">
+            Configure Display (optional)
+        </div>
+
+        <div class="p-3 space-y-2">
+
+            <div class="flex space-x-1">
+                <div class="my-auto">Rotation</div>
+                <button @click="setDisplayRotation(0)" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
+                    0
+                </button>
+                <button @click="setDisplayRotation(1)" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
+                    1
+                </button>
+                <button @click="setDisplayRotation(2)" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
+                    2
+                </button>
+                <button @click="setDisplayRotation(3)" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
+                    3
+                </button>
+            </div>
+
+            <div class="flex space-x-1">
+                <div class="my-auto">Reconditioning</div>
+                <button @click="startDisplayReconditioning" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
+                    Start
+                </button>
+                <button @click="reboot" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
+                    Stop
+                </button>
+            </div>
+
+        </div>
+
+        <div class="border-t px-2 py-1 text-sm">
+            <div>Setting display rotation requires firmware v1.80+</div>
+        </div>
+
+    </div>
+
 </div>
 
 <!-- setup web-serial-polyfill -->
@@ -334,6 +376,8 @@
         data() {
             return {
 
+                rnode: null,
+
                 isFlashing: false,
                 flashingProgress: 0,
 
@@ -397,6 +441,22 @@
                             },
                         },
                     },
+                    {
+                        name: "Heltec T114",
+                        id: ROM.PRODUCT_HELTEC_T114,
+                        platform: ROM.PLATFORM_NRF52,
+                        models: [
+                            {
+                                id: ROM.MODEL_C6,
+                                name: "470-510 MHz (HT-n5262-LF)",
+                            },
+                            {
+                                id: ROM.MODEL_C7,
+                                name: "863-928 MHz (HT-n5262-HF)",
+                            },
+                        ],
+                        firmware_filename: "rnode_firmware_heltec_t114.zip",
+                    },
                     {
                         name: "LilyGO LoRa32 v1.0",
                         id: ROM.PRODUCT_T32_10,
@@ -587,6 +647,21 @@
                                     },
                                 },
                             },
+                            {
+                                id: ROM.MODEL_AC,
+                                name: "2.4 GHz (with SX1280 chip)",
+                                firmware_filename: "rnode_firmware_t3s3_sx1280_pa.zip",
+                                flash_config: {
+                                    flash_size: "4MB",
+                                    flash_files: {
+                                        "0xe000": "rnode_firmware_t3s3_sx1280_pa.boot_app0",
+                                        "0x0": "rnode_firmware_t3s3_sx1280_pa.bootloader",
+                                        "0x10000": "rnode_firmware_t3s3_sx1280_pa.bin",
+                                        "0x210000": "console_image.bin",
+                                        "0x8000": "rnode_firmware_t3s3_sx1280_pa.partitions",
+                                    },
+                                },
+                            },
                         ],
                     },
                     {
@@ -714,11 +789,11 @@
                         platform: ROM.PLATFORM_NRF52,
                         models: [
                             {
-                                id: ROM.MODEL_T4,
+                                id: ROM.MODEL_16,
                                 name: "433 MHz",
                             },
                             {
-                                id: ROM.MODEL_T9,
+                                id: ROM.MODEL_17,
                                 name: "868 MHz / 915 MHz / 923 MHz",
                             },
                         ],
@@ -858,11 +933,37 @@
                     return null;
                 }
 
+                // close any existing rnode connection
+                if(this.rnode){
+                    await this.rnode.close();
+                    this.rnode = null;
+                }
+
                 // ask user to select device
                 return await navigator.serial.requestPort({
                     filters: [],
                 });
 
+            },
+            async askForRNode() {
+
+                // ask for serial port
+                const serialPort = await this.askForSerialPort();
+                if(!serialPort){
+                    return false;
+                }
+
+                // check if device is an rnode
+                this.rnode = await RNode.fromSerialPort(serialPort);
+                const isRNode = await this.rnode.detect();
+                if(!isRNode){
+                    await this.rnode.close();
+                    alert("Selected device is not an RNode!");
+                    return false;
+                }
+
+                return this.rnode;
+
             },
             async enterDfuMode() {
 
@@ -1069,17 +1170,9 @@
             },
             async detect() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1122,17 +1215,9 @@
             },
             async reboot() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1210,17 +1295,9 @@
             },
             async readDisplay() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1236,17 +1313,9 @@
             },
             async dumpEeprom() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1264,22 +1333,15 @@
             },
             async wipeEeprom() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
                 // ask user to confirm
                 if(!confirm("Are you sure you want to wipe the eeprom on this device? This will take about 30 seconds. An alert will show when the eeprom wipe has finished.")){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                    await rnode.close();
                     return;
                 }
 
@@ -1298,18 +1360,9 @@
             },
             async provision() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
-                    await rnode.close();
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1489,17 +1542,9 @@
             },
             async setFirmwareHash() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1546,17 +1591,9 @@
             },
             async enableTncMode() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1602,17 +1639,9 @@
             },
             async disableTncMode() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1643,17 +1672,9 @@
             },
             async enableBluetooth() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1671,26 +1692,18 @@
                 await rnode.enableBluetooth();
                 console.log("enabling bluetooth: done");
 
-                await Utils.sleepMillis(1000);
+                alert("Bluetooth has been enabled!");
 
                 // done
+                await Utils.sleepMillis(1000);
                 await rnode.close();
-                alert("Bluetooth has been enabled!");
 
             },
             async disableBluetooth() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1707,27 +1720,18 @@
                 console.log("disabling bluetooth");
                 await rnode.disableBluetooth();
                 console.log("disabling bluetooth: done");
-
-                await Utils.sleepMillis(1000);
+                alert("Bluetooth has been disabled!");
 
                 // done
+                await Utils.sleepMillis(1000);
                 await rnode.close();
-                alert("Bluetooth has been disabled!");
 
             },
             async startBluetoothPairing() {
 
-                // ask for serial port
-                const serialPort = await this.askForSerialPort();
-                if(!serialPort){
-                    return;
-                }
-
-                // check if device is an rnode
-                const rnode = await RNode.fromSerialPort(serialPort);
-                const isRNode = await rnode.detect();
-                if(!isRNode){
-                    alert("Selected device is not an RNode!");
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
                     return;
                 }
 
@@ -1743,13 +1747,72 @@
                 // start bluetooth pairing
                 try {
                     console.log("start bluetooth pairing");
-                    const pin = await rnode.startBluetoothPairing();
+                    await rnode.startBluetoothPairing(async (pin) => {
+                        alert("Bluetooth Pairing Pin: " + pin);
+                        await rnode.close();
+                    });
                     console.log("start bluetooth pairing: done");
                 } catch(error) {
                     alert(error);
                 }
 
-                alert("RNode should now be in Bluetooth Pairing mode. A pin will be shown on the screen when you pair with it from Android bluetooth settings.");
+                // tell user device is in pairing mode, and how to pair
+                alert([
+                    "- RNode is in Bluetooth Pairing Mode for 30 seconds.",
+                    "- Close this alert before performing the next steps.",
+                    "- Open bluetooth settings on your Android device.",
+                    "- Click pair on the RNode device that shows up.",
+                    "- Bluetooth pin will shown on your RNode screen and on this page.",
+                ].join("\n"));
+
+            },
+            async setDisplayRotation(rotation) {
+
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
+                    return;
+                }
+
+                // check if device has been provisioned
+                const rom = await rnode.getRomAsObject();
+                const details = rom.parse();
+                if(!details || !details.is_provisioned){
+                    alert("Eeprom is not provisioned. You must do this first!");
+                    await rnode.close();
+                    return;
+                }
+
+                // configure
+                console.log("setting display rotation");
+                await rnode.setDisplayRotation(rotation);
+                console.log("setting display rotation: done");
+
+                // done
+                await rnode.close();
+
+            },
+            async startDisplayReconditioning() {
+
+                // ask for rnode
+                const rnode = await this.askForRNode();
+                if(!rnode){
+                    return;
+                }
+
+                // check if device has been provisioned
+                const rom = await rnode.getRomAsObject();
+                const details = rom.parse();
+                if(!details || !details.is_provisioned){
+                    alert("Eeprom is not provisioned. You must do this first!");
+                    await rnode.close();
+                    return;
+                }
+
+                // configure
+                console.log("starting display reconditioning");
+                await rnode.startDisplayReconditioning();
+                console.log("starting display reconditioning: done");
 
                 // done
                 await rnode.close();
diff --git a/src/frontend/public/rnode-flasher/js/rnode.js b/src/frontend/public/rnode-flasher/js/rnode.js
index 9fe0233..2eec41e 100644
--- a/src/frontend/public/rnode-flasher/js/rnode.js
+++ b/src/frontend/public/rnode-flasher/js/rnode.js
@@ -79,6 +79,8 @@ class RNode {
     ROM_UNLOCK_BYTE = 0xF8;
     CMD_HASHES = 0x60;
     CMD_FW_UPD = 0x61;
+    CMD_DISP_ROT = 0x67;
+    CMD_DISP_RCND = 0x68;
 
     CMD_BT_CTRL = 0x46;
     CMD_BT_PIN = 0x62;
@@ -121,8 +123,10 @@ class RNode {
 
     constructor(serialPort) {
         this.serialPort = serialPort;
-        this.readable = serialPort.readable;
+        this.reader = serialPort.readable.getReader();
         this.writable = serialPort.writable;
+        this.callbacks = {};
+        this.readLoop();
     }
 
     static async fromSerialPort(serialPort) {
@@ -137,11 +141,21 @@ class RNode {
     }
 
     async close() {
+
+        // release reader lock
+        try {
+            this.reader.releaseLock();
+        } catch(e) {
+            //console.log("failed to release lock on serial port readable, ignoring...", e);
+        }
+
+        // close serial port
         try {
             await this.serialPort.close();
         } catch(e) {
-            console.log("failed to close serial port, ignoring...", e);
+            //console.log("failed to close serial port, ignoring...", e);
         }
+
     }
 
     async write(bytes) {
@@ -153,79 +167,100 @@ class RNode {
         }
     }
 
-    async readFromSerialPort(timeoutMillis) {
-        return new Promise(async (resolve, reject) => {
+    async readLoop() {
+        try {
+            let buffer = [];
+            let inFrame = false;
+            while(true){
 
-            // create reader
-            const reader = this.readable.getReader();
+                // read kiss frames until reader indicates it's done
+                const { value, done } = await this.reader.read();
+                if(done){
+                    break;
+                }
 
-            // timeout after provided millis
-            if(timeoutMillis != null){
-                setTimeout(() => {
-                    reader.releaseLock();
-                    reject("timeout");
-                }, timeoutMillis);
-            }
-
-            // attempt to read kiss frame
-            try {
-                let buffer = [];
-                while(true){
-                    const { value, done } = await reader.read();
-                    if(done){
-                        break;
-                    }
-                    if(value){
-                        for(let byte of value){
-                            buffer.push(byte);
-                            if(byte === this.KISS_FEND){
-                                if(buffer.length > 1){
-                                    resolve(this.handleKISSFrame(buffer));
-                                    return;
-                                }
-                                buffer = [this.KISS_FEND]; // Start new frame
+                // read kiss frames
+                for(const byte of value){
+                    if(byte === this.KISS_FEND){
+                        if(inFrame){
+                            // End of frame
+                            const decodedFrame = this.decodeKissFrame(buffer);
+                            if(decodedFrame){
+                                this.onCommandReceived(decodedFrame);
+                            } else {
+                                console.warn("Invalid frame ignored.");
                             }
+                            buffer = [];
                         }
+                        inFrame = !inFrame;
+                    } else if(inFrame) {
+                        buffer.push(byte);
                     }
                 }
-            } catch (error) {
-                console.error('Error reading from serial port: ', error);
-            } finally {
-                reader.releaseLock();
+
+            }
+        } catch(error) {
+
+            // ignore error if reader was released
+            if(error instanceof TypeError){
+                return;
             }
 
-        });
+            console.error('Error reading from serial port: ', error);
+
+        } finally {
+            this.reader.releaseLock();
+        }
     }
 
-    handleKISSFrame(frame) {
+    onCommandReceived(data) {
+        try {
 
-        let data = [];
+            // get received command and bytes from data
+            const [ command, ...bytes ] = data;
+            console.log("onCommandReceived", "0x" + command.toString(16), bytes);
+
+            // find callback for received command
+            const callback = this.callbacks[command];
+            if(!callback){
+                return;
+            }
+
+            // fire callback
+            callback(bytes);
+
+            // forget callback
+            delete this.callbacks[command];
+
+        } catch(e) {
+            console.log("failed to handle received command", data, e);
+        }
+    }
+
+    decodeKissFrame(frame) {
+
+        const data = [];
         let escaping = false;
 
-        // Skip the initial 0xC0 and process the rest
-        for(let i = 1; i < frame.length; i++){
-            let byte = frame[i];
-            if (escaping) {
-                if (byte === this.KISS_TFEND) {
+        for(const byte of frame){
+            if(escaping){
+                if(byte === this.KISS_TFEND){
                     data.push(this.KISS_FEND);
-                } else if (byte === this.KISS_TFESC) {
+                } else if(byte === this.KISS_TFESC) {
                     data.push(this.KISS_FESC);
+                } else {
+                    return null; // Invalid escape sequence
                 }
                 escaping = false;
+            } else if(byte === this.KISS_FESC) {
+                escaping = true;
             } else {
-                if (byte === this.KISS_FESC) {
-                    escaping = true;
-                } else if (byte === this.KISS_FEND) {
-                    // Ignore the end frame delimiter
-                    break;
-                } else {
-                    data.push(byte);
-                }
+                data.push(byte);
             }
         }
 
-        //console.log('Received KISS frame data:', new Uint8Array(data));
-        return data;
+        // return null if incomplete escape at end
+        return escaping ? null : data;
 
     }
 
@@ -248,6 +283,28 @@ class RNode {
         await this.write(this.createKissFrame(data));
     }
 
+    // sends a command to the rnode, and resolves the promise with the result
+    async sendCommand(command, data) {
+        return new Promise(async (resolve, reject) => {
+            try {
+
+                // listen for response
+                this.callbacks[command] = (response) => {
+                    resolve(response);
+                };
+
+                // send command
+                await this.sendKissCommand([
+                    command,
+                    ...data,
+                ]);
+
+            } catch(e) {
+                reject(e);
+            }
+        });
+    }
+
     async reset() {
         await this.sendKissCommand([
             this.CMD_RESET,
@@ -256,30 +313,42 @@ class RNode {
     }
 
     async detect() {
+        return new Promise(async (resolve) => {
+            try {
 
-        // ask if device is rnode
-        await this.sendKissCommand([
-            this.CMD_DETECT,
-            this.DETECT_REQ,
-        ]);
+                // timeout after provided millis
+                const timeout = setTimeout(() => {
+                    resolve(false);
+                }, 2000);
 
-        // read response from device
-        const [ command, responseByte ] = await this.readFromSerialPort();
+                // detect rnode
+                const response = await this.sendCommand(this.CMD_DETECT, [
+                    this.DETECT_REQ,
+                ]);
 
-        // device is an rnode if response is as expected
-        return command === this.CMD_DETECT && responseByte === this.DETECT_RESP;
+                // we no longer want to timeout
+                clearTimeout(timeout);
+
+                // device is an rnode if response is as expected
+                const [ responseByte ] = response;
+                const isRnode = responseByte === this.DETECT_RESP;
+                resolve(isRnode);
+
+            } catch(e) {
+                resolve(false);
+            }
+        });
 
     }
 
     async getFirmwareVersion() {
 
-        await this.sendKissCommand([
-            this.CMD_FW_VERSION,
+        const response = await this.sendCommand(this.CMD_FW_VERSION, [
             0x00,
         ]);
 
         // read response from device
-        var [ command, majorVersion, minorVersion ] = await this.readFromSerialPort();
+        var [ majorVersion, minorVersion ] = response;
         if(minorVersion.length === 1){
             minorVersion = "0" + minorVersion;
         }
@@ -291,99 +360,91 @@ class RNode {
 
     async getPlatform() {
 
-        await this.sendKissCommand([
-            this.CMD_PLATFORM,
+        const response = await this.sendCommand(this.CMD_PLATFORM, [
             0x00,
         ]);
 
         // read response from device
-        const [ command, platformByte ] = await this.readFromSerialPort();
+        const [ platformByte ] = response;
         return platformByte;
 
     }
 
     async getMcu() {
 
-        await this.sendKissCommand([
-            this.CMD_MCU,
+        const response = await this.sendCommand(this.CMD_MCU, [
             0x00,
         ]);
 
         // read response from device
-        const [ command, mcuByte ] = await this.readFromSerialPort();
+        const [ mcuByte ] = response;
         return mcuByte;
 
     }
 
     async getBoard() {
 
-        await this.sendKissCommand([
-            this.CMD_BOARD,
+        const response = await this.sendCommand(this.CMD_BOARD, [
             0x00,
         ]);
 
         // read response from device
-        const [ command, boardByte ] = await this.readFromSerialPort();
+        const [ boardByte ] = response;
         return boardByte;
 
     }
 
     async getDeviceHash() {
 
-        await this.sendKissCommand([
-            this.CMD_DEV_HASH,
+        const response = await this.sendCommand(this.CMD_DEV_HASH, [
             0x01, // anything != 0x00
         ]);
 
         // read response from device
-        const [ command, ...deviceHash ] = await this.readFromSerialPort();
+        const [ ...deviceHash ] = response;
         return deviceHash;
 
     }
 
     async getTargetFirmwareHash() {
 
-        await this.sendKissCommand([
-            this.CMD_HASHES,
+        const response = await this.sendCommand(this.CMD_HASHES, [
             this.HASH_TYPE_TARGET_FIRMWARE,
         ]);
 
         // read response from device
-        const [ command, hashType, ...targetFirmwareHash ] = await this.readFromSerialPort();
+        const [ hashType, ...targetFirmwareHash ] = response;
         return targetFirmwareHash;
 
     }
 
     async getFirmwareHash() {
 
-        await this.sendKissCommand([
-            this.CMD_HASHES,
+        const response = await this.sendCommand(this.CMD_HASHES, [
             this.HASH_TYPE_FIRMWARE,
         ]);
 
         // read response from device
-        const [ command, hashType, ...firmwareHash ] = await this.readFromSerialPort();
+        const [ hashType, ...firmwareHash ] = response;
         return firmwareHash;
 
     }
 
     async getRom() {
 
-        await this.sendKissCommand([
-            this.CMD_ROM_READ,
+        const response = await this.sendCommand(this.CMD_ROM_READ, [
             0x00,
         ]);
 
         // read response from device
-        const [ command, ...eepromBytes ] = await this.readFromSerialPort();
+        const [ ...eepromBytes ] = response;
         return eepromBytes;
 
     }
 
     async getFrequency() {
 
-        await this.sendKissCommand([
-            this.CMD_FREQUENCY,
+        const response = await this.sendCommand(this.CMD_FREQUENCY, [
             // request frequency by sending zero as 4 bytes
             0x00,
             0x00,
@@ -392,7 +453,7 @@ class RNode {
         ]);
 
         // read response from device
-        const [ command, ...frequencyBytes ] = await this.readFromSerialPort();
+        const [ ...frequencyBytes ] = response;
 
         // convert 4 bytes to 32bit integer representing frequency in hertz
         const frequencyInHz = frequencyBytes[0] << 24 | frequencyBytes[1] << 16 | frequencyBytes[2] << 8 | frequencyBytes[3];
@@ -402,8 +463,7 @@ class RNode {
 
     async getBandwidth() {
 
-        await this.sendKissCommand([
-            this.CMD_BANDWIDTH,
+        const response = await this.sendCommand(this.CMD_BANDWIDTH, [
             // request bandwidth by sending zero as 4 bytes
             0x00,
             0x00,
@@ -412,7 +472,7 @@ class RNode {
         ]);
 
         // read response from device
-        const [ command, ...bandwidthBytes ] = await this.readFromSerialPort();
+        const [ ...bandwidthBytes ] = response;
 
         // convert 4 bytes to 32bit integer representing bandwidth in hertz
         const bandwidthInHz = bandwidthBytes[0] << 24 | bandwidthBytes[1] << 16 | bandwidthBytes[2] << 8 | bandwidthBytes[3];
@@ -422,69 +482,60 @@ class RNode {
 
     async getTxPower() {
 
-        await this.sendKissCommand([
-            this.CMD_TXPOWER,
+        const response = await this.sendCommand(this.CMD_TXPOWER, [
             0xFF, // request tx power
         ]);
 
         // read response from device
-        const [ command, txPower ] = await this.readFromSerialPort();
-
+        const [ txPower ] = response;
         return txPower;
 
     }
 
     async getSpreadingFactor() {
 
-        await this.sendKissCommand([
-            this.CMD_SF,
+        const response = await this.sendCommand(this.CMD_SF, [
             0xFF, // request spreading factor
         ]);
 
         // read response from device
-        const [ command, spreadingFactor ] = await this.readFromSerialPort();
-
+        const [ spreadingFactor ] = response;
         return spreadingFactor;
 
     }
 
     async getCodingRate() {
 
-        await this.sendKissCommand([
-            this.CMD_CR,
+        const response = await this.sendCommand(this.CMD_CR, [
             0xFF, // request coding rate
         ]);
 
         // read response from device
-        const [ command, codingRate ] = await this.readFromSerialPort();
-
+        const [ codingRate ] = response;
         return codingRate;
 
     }
 
     async getRadioState() {
 
-        await this.sendKissCommand([
-            this.CMD_RADIO_STATE,
+        const response = await this.sendCommand(this.CMD_RADIO_STATE, [
             0xFF, // request radio state
         ]);
 
         // read response from device
-        const [ command, radioState ] = await this.readFromSerialPort();
-
+        const [ radioState ] = response;
         return radioState;
 
     }
 
     async getRxStat() {
 
-        await this.sendKissCommand([
-            this.CMD_STAT_RX,
+        const response = await this.sendCommand(this.CMD_STAT_RX, [
             0x00,
         ]);
 
         // read response from device
-        const [ command, ...statBytes ] = await this.readFromSerialPort();
+        const [ ...statBytes ] = response;
 
         // convert 4 bytes to 32bit integer
         const stat = statBytes[0] << 24 | statBytes[1] << 16 | statBytes[2] << 8 | statBytes[3];
@@ -494,13 +545,12 @@ class RNode {
 
     async getTxStat() {
 
-        await this.sendKissCommand([
-            this.CMD_STAT_TX,
+        const response = await this.sendCommand(this.CMD_STAT_TX, [
             0x00,
         ]);
 
         // read response from device
-        const [ command, ...statBytes ] = await this.readFromSerialPort();
+        const [ ...statBytes ] = response;
 
         // convert 4 bytes to 32bit integer
         const stat = statBytes[0] << 24 | statBytes[1] << 16 | statBytes[2] << 8 | statBytes[3];
@@ -510,14 +560,12 @@ class RNode {
 
     async getRssiStat() {
 
-        await this.sendKissCommand([
-            this.CMD_STAT_RSSI,
+        const response = await this.sendCommand(this.CMD_STAT_RSSI, [
             0x00,
         ]);
 
         // read response from device
-        const [ command, rssi ] = await this.readFromSerialPort();
-
+        const [ rssi ] = response;
         return rssi;
 
     }
@@ -536,7 +584,23 @@ class RNode {
         ]);
     }
 
-    async startBluetoothPairing() {
+    async startBluetoothPairing(pinCallback) {
+
+        // listen for bluetooth pin
+        // pin will be available once the user has initiated pairing from an Android device
+        this.callbacks[this.CMD_BT_PIN] = (response) => {
+
+            // read response from device
+            const [ ...pinBytes ] = response;
+
+            // convert 4 bytes to 32bit integer
+            const pin = pinBytes[0] << 24 | pinBytes[1] << 16 | pinBytes[2] << 8 | pinBytes[3];
+
+            // tell user what the bluetooth pin is
+            console.log("Bluetooth Pairing Pin: " + pin);
+            pinCallback(pin);
+
+        };
 
         // enable pairing
         await this.sendKissCommand([
@@ -544,43 +608,16 @@ class RNode {
             0x02, // enable pairing
         ]);
 
-        // todo: listen for packets, pin will be available once user has initiated pairing from Android device
-
-        // // attempt to get bluetooth pairing pin
-        // try {
-        //
-        //     // read response from device
-        //     const [ command, ...pinBytes ] = await this.readFromSerialPort(5000);
-        //     if(command !== this.CMD_BT_PIN){
-        //         throw `unexpected command response: ${command}`;
-        //     }
-        //
-        //     // convert 4 bytes to 32bit integer
-        //     const pin = pinBytes[0] << 24 | pinBytes[1] << 16 | pinBytes[2] << 8 | pinBytes[3];
-        //
-        //     // todo: remove logs
-        //     console.log(pinBytes);
-        //     console.log(pin);
-        //
-        //     // todo: convert to string
-        //     return pin;
-        //
-        // } catch(error) {
-        //     throw `failed to get bluetooth pin: ${error}`;
-        // }
-
     }
 
     async readDisplay() {
 
-        await this.sendKissCommand([
-            this.CMD_DISP_READ,
+        const response = await this.sendCommand(this.CMD_DISP_READ, [
             0x01,
         ]);
 
         // read response from device
-        const [ command, ...displayBuffer ] = await this.readFromSerialPort();
-
+        const [ ...displayBuffer ] = response;
         return displayBuffer;
 
     }
@@ -715,6 +752,20 @@ class RNode {
         return new ROM(rom);
     }
 
+    async setDisplayRotation(rotation) {
+        await this.sendKissCommand([
+            this.CMD_DISP_ROT,
+            rotation & 0xFF,
+        ]);
+    }
+
+    async startDisplayReconditioning() {
+        await this.sendKissCommand([
+            this.CMD_DISP_RCND,
+            0x01,
+        ]);
+    }
+
 }
 
 class ROM {
@@ -743,6 +794,7 @@ class ROM {
     static MODEL_A7       = 0xA7
     static MODEL_A5       = 0xA5;
     static MODEL_AA       = 0xAA;
+    static MODEL_AC       = 0xAC;
 
     static PRODUCT_T32_10 = 0xB2
     static MODEL_BA       = 0xBA
@@ -766,6 +818,10 @@ class ROM {
     static MODEL_C5       = 0xC5
     static MODEL_CA       = 0xCA
 
+    static PRODUCT_HELTEC_T114 = 0xC2
+    static MODEL_C6       = 0xC6
+    static MODEL_C7       = 0xC7
+
     static PRODUCT_TBEAM  = 0xE0
     static MODEL_E4       = 0xE4
     static MODEL_E9       = 0xE9
@@ -781,8 +837,8 @@ class ROM {
     static MODEL_D9       = 0xD9;
 
     static PRODUCT_TECHO  = 0x15;
-    static MODEL_T4       = 0x16;
-    static MODEL_T9       = 0x17;
+    static MODEL_16       = 0x16;
+    static MODEL_17       = 0x17;
 
     static PRODUCT_HMBRW  = 0xF0
     static MODEL_FF       = 0xFF

From 9d60707515da25a49137474e416ad1237a8d3fe8 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 13:16:02 +1300
Subject: [PATCH 072/131] 1.20.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d193e2f..bc55c89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "1.19.0",
+      "version": "1.20.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index a13b5b6..c55b974 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From 59deac6d07d4d473f380cc8c246cab308cc104a1 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 8 Feb 2025 22:38:47 +1300
Subject: [PATCH 073/131] allow passing --headless to compiled electron binary
 to avoid launching gui

---
 electron/main.js | 97 +++++++++++++++++++++++++-----------------------
 1 file changed, 51 insertions(+), 46 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index d58ce1d..853dbee 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -48,6 +48,9 @@ ipcMain.handle('showPathInFolder', (event, path) => {
 
 function log(message) {
 
+    // log to stdout of this process
+    console.log(message);
+
     // make sure main window exists
     if(!mainWindow){
         return;
@@ -58,9 +61,6 @@ function log(message) {
         return;
     }
 
-    // log to electron console
-    console.log(message);
-
     // log to web console
     mainWindow.webContents.send('log', message);
 
@@ -98,50 +98,63 @@ function getDefaultReticulumConfigDir() {
 
 app.whenReady().then(async () => {
 
-    // create browser window
-    mainWindow = new BrowserWindow({
-        width: 1500,
-        height: 800,
-        webPreferences: {
-            // used to inject logging over ipc
-            preload: path.join(__dirname, 'preload.js'),
-        },
-    });
+    // get arguments passed to application, and remove the provided application path
+    const userProvidedArguments = process.argv.slice(1);
+    const shouldLaunchHeadless = userProvidedArguments.includes("--headless");
 
-    // open external links in default web browser instead of electron
-    mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    if(!shouldLaunchHeadless){
 
-        var shouldShowInNewElectronWindow = false;
+        // create browser window
+        mainWindow = new BrowserWindow({
+            width: 1500,
+            height: 800,
+            webPreferences: {
+                // used to inject logging over ipc
+                preload: path.join(__dirname, 'preload.js'),
+            },
+        });
 
-        // we want to open call.html in a new electron window
-        // but all other target="_blank" links should open in the system web browser
-        // we don't want /rnode-flasher/index.html to open in electron, otherwise user can't select usb devices...
-        if(url.startsWith("http://localhost") && url.includes("/call.html")){
-            shouldShowInNewElectronWindow = true;
-        }
+        // open external links in default web browser instead of electron
+        mainWindow.webContents.setWindowOpenHandler(({ url }) => {
 
-        // we want to open blob urls in a new electron window
-        else if(url.startsWith("blob:")) {
-            shouldShowInNewElectronWindow = true;
-        }
+            var shouldShowInNewElectronWindow = false;
 
-        // open in new electron window
-        if(shouldShowInNewElectronWindow){
+            // we want to open call.html in a new electron window
+            // but all other target="_blank" links should open in the system web browser
+            // we don't want /rnode-flasher/index.html to open in electron, otherwise user can't select usb devices...
+            if(url.startsWith("http://localhost") && url.includes("/call.html")){
+                shouldShowInNewElectronWindow = true;
+            }
+
+            // we want to open blob urls in a new electron window
+            else if(url.startsWith("blob:")) {
+                shouldShowInNewElectronWindow = true;
+            }
+
+            // open in new electron window
+            if(shouldShowInNewElectronWindow){
+                return {
+                    action: "allow",
+                };
+            }
+
+            // fallback to opening any other url in external browser
+            shell.openExternal(url);
             return {
-                action: "allow",
+                action: "deny",
             };
+
+        });
+
+        // navigate to loading page
+        await mainWindow.loadFile(path.join(__dirname, 'loading.html'));
+
+        // ask mac users for microphone access for audio calls to work
+        if(process.platform === "darwin"){
+            await systemPreferences.askForMediaAccess('microphone');
         }
 
-        // fallback to opening any other url in external browser
-        shell.openExternal(url);
-        return {
-            action: "deny",
-        };
-
-    });
-
-    // navigate to loading page
-    await mainWindow.loadFile(path.join(__dirname, 'loading.html'));
+    }
 
     // find path to python/cxfreeze reticulum meshchat executable
     const exeName = process.platform === "win32" ? "ReticulumMeshChat.exe" : "ReticulumMeshChat";
@@ -152,16 +165,8 @@ app.whenReady().then(async () => {
         exe = path.join(__dirname, '..', `build/exe/${exeName}`);
     }
 
-    // ask mac users for microphone access for audio calls to work
-    if(process.platform === "darwin"){
-        await systemPreferences.askForMediaAccess('microphone');
-    }
-
     try {
 
-        // get arguments passed to application, and remove the provided application path
-        const userProvidedArguments = process.argv.slice(1);
-
         // arguments we always want to pass in
         const requiredArguments = [
             '--headless', // reticulum meshchat usually launches default web browser, we don't want this when using electron

From 2662f96c8b576477dd17b164b9ef7d04b19f95ae Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 9 Feb 2025 16:19:44 +1300
Subject: [PATCH 074/131] add button to view source of a node page

---
 .../nomadnetwork/NomadNetworkPage.vue         | 60 ++++++++++++++-----
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 9f4feeb..43ced77 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -43,6 +43,11 @@
                     <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
                 </svg>
             </button>
+            <button @click="showNodePageSource" type="button" class="ml-1 my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
+                </svg>
+            </button>
             <button @click="loadPreviousNodePage" type="button" :disabled="nodePagePathHistory.length === 0" :class="[ nodePagePathHistory.length > 0 ? 'text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700' : 'text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-zinc-900']" class="ml-1 my-auto rounded p-1 cursor-pointer">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                     <path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
@@ -69,7 +74,7 @@
                 </div>
                 <div class="my-auto">Loading {{ nodePageProgress }}%</div>
             </div>
-            <pre v-else v-html="nodePageContent" class="h-full break-words whitespace-pre-wrap"></pre>
+            <pre v-else v-html="renderedNodePageContent()" class="h-full break-words whitespace-pre-wrap"></pre>
         </div>
 
         <!-- file download bottom bar -->
@@ -385,6 +390,7 @@ export default {
                 // if page is cache, we can just return it now
                 if(cachedNodePageContent != null){
                     this.nodePageContent = cachedNodePageContent;
+                    this.renderPageContent(pagePath, cachedNodePageContent);
                     this.isLoadingNodePage = false;
                     return;
                 }
@@ -393,31 +399,21 @@ export default {
 
             this.downloadNomadNetPage(destinationHash, pagePath, fieldData, (pageContent) => {
 
-                const muParser = new MicronParser();
-                
                 // do nothing if callback is for a previous request
                 if(seq !== this.nodePageRequestSequence){
                     console.log("ignoring page content callback for previous page request")
                     return;
                 }
 
-                // check if page url ends with .mu but remove page data first
-                // address:/page/index.mu`Data=123
-                const [ pagePathWithoutData, pageData ] = pagePath.split("`");
-
-                // convert micron to html if page ends with .mu extension
-                // otherwise, we will just serve the content as is
-                if(pagePathWithoutData.endsWith(".mu")){
-                    this.nodePageContent = muParser.convertMicronToHtml(pageContent);
-                } else {
-                    this.nodePageContent = pageContent;
-                }
+                // update page content
+                this.nodePageContent = pageContent;
 
                 // update cache
                 const nodePagePathCacheKey = `${destinationHash}:${pagePath}`;
                 this.nodePageCache[nodePagePathCacheKey] = this.nodePageContent;
 
                 // update page content
+                this.renderPageContent(pagePath, pageContent);
                 this.isLoadingNodePage = false;
 
                 // update node path
@@ -451,6 +447,39 @@ export default {
 
             });
         },
+        renderPageContent(path, content) {
+
+            // check if page url ends with .mu but remove page data first
+            // address:/page/index.mu`Data=123
+            const [ pagePathWithoutData ] = path.split("`");
+
+            // convert micron to html if page ends with .mu extension
+            if(pagePathWithoutData.endsWith(".mu")){
+                const muParser = new MicronParser();
+                return muParser.convertMicronToHtml(content);
+            }
+
+            // otherwise, we will just serve the content as is
+            return content;
+
+        },
+        showNodePageSource() {
+
+            // create blob containing page content
+            const blob = new Blob([this.nodePageContent], {
+                type: "text/plain",
+            });
+
+            // create object url for blob
+            const objectUrl = URL.createObjectURL(blob);
+
+            // open blob in new tab
+            window.open(objectUrl, "_blank");
+
+            // revoke object url to clear memory
+            setTimeout(() => URL.revokeObjectURL(objectUrl), 10000);
+
+        },
         async reloadNodePage() {
 
             // reload current node page without adding to history and without using cache
@@ -775,6 +804,9 @@ export default {
                 console.error(e);
             }
         },
+        renderedNodePageContent() {
+            return this.renderPageContent(this.nodePagePath, this.nodePageContent);
+        }
     },
 }
 </script>

From 9ea98eb0f045dbf4b4c2177c355db79a78c12bc3 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 9 Feb 2025 16:59:08 +1300
Subject: [PATCH 075/131] toggle page source in place rather than opening in a
 new tab

---
 .../nomadnetwork/NomadNetworkPage.vue         | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 43ced77..d881c5e 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -43,7 +43,7 @@
                     <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
                 </svg>
             </button>
-            <button @click="showNodePageSource" type="button" class="ml-1 my-auto text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded p-1 cursor-pointer">
+            <button @click="toggleNodePageSource" type="button" title="Toggle Source Code" class="ml-1 my-auto text-gray-500 dark:text-gray-300 rounded p-1 cursor-pointer" :class="[ isShowingNodePageSource ? 'bg-green-500 hover:bg-green-600 text-white' : 'bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700' ]">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
                 </svg>
@@ -157,6 +157,7 @@ export default {
             selectedNodePath: null,
 
             isLoadingNodePage: false,
+            isShowingNodePageSource: false,
             defaultNodePagePath: "/page/index.mu",
             nodePageRequestSequence: 0,
             nodePagePath: null,
@@ -449,36 +450,32 @@ export default {
         },
         renderPageContent(path, content) {
 
-            // check if page url ends with .mu but remove page data first
-            // address:/page/index.mu`Data=123
-            const [ pagePathWithoutData ] = path.split("`");
+            // render page content if we aren't viewing source
+            if(!this.isShowingNodePageSource){
+
+                // check if page url ends with .mu but remove page data first
+                // address:/page/index.mu`Data=123
+                const [ pagePathWithoutData ] = path.split("`");
+
+                // convert micron to html if page ends with .mu extension
+                if(pagePathWithoutData.endsWith(".mu")){
+                    const muParser = new MicronParser();
+                    return muParser.convertMicronToHtml(content);
+                }
 
-            // convert micron to html if page ends with .mu extension
-            if(pagePathWithoutData.endsWith(".mu")){
-                const muParser = new MicronParser();
-                return muParser.convertMicronToHtml(content);
             }
 
-            // otherwise, we will just serve the content as is
-            return content;
+            // otherwise, we will just serve the raw content, making sure to prevent injecting html
+            return content
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
 
         },
-        showNodePageSource() {
-
-            // create blob containing page content
-            const blob = new Blob([this.nodePageContent], {
-                type: "text/plain",
-            });
-
-            // create object url for blob
-            const objectUrl = URL.createObjectURL(blob);
-
-            // open blob in new tab
-            window.open(objectUrl, "_blank");
-
-            // revoke object url to clear memory
-            setTimeout(() => URL.revokeObjectURL(objectUrl), 10000);
-
+        toggleNodePageSource() {
+            this.isShowingNodePageSource = !this.isShowingNodePageSource;
         },
         async reloadNodePage() {
 
@@ -806,7 +803,7 @@ export default {
         },
         renderedNodePageContent() {
             return this.renderPageContent(this.nodePagePath, this.nodePageContent);
-        }
+        },
     },
 }
 </script>

From 10c85cdba0180b845187ad878d88a4d3d324159a Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 15 Mar 2025 10:47:04 +1300
Subject: [PATCH 076/131] update lxmf to v0.6.3

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index fbb087a..5aa5e11 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.9.5
 cx_freeze>=7.0.0
-lxmf>=0.6.2
+lxmf>=0.6.3
 peewee>=3.17.3
 rns>=0.9.1
 websockets>=14.2

From c6eeab97e6bd50ad3b052fa27e5709e5376a5179 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 15 Mar 2025 10:52:02 +1300
Subject: [PATCH 077/131] update rns to v0.9.3

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 5aa5e11..a115c45 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,5 @@ aiohttp>=3.9.5
 cx_freeze>=7.0.0
 lxmf>=0.6.3
 peewee>=3.17.3
-rns>=0.9.1
+rns>=0.9.3
 websockets>=14.2

From 7c20529d624eace501a93765429b33caf7b77f53 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 15 Mar 2025 11:17:34 +1300
Subject: [PATCH 078/131] migrate to using micron-parser from npm

---
 package-lock.json                             | 23 +++++++++++++++++++
 package.json                                  |  1 +
 .../nomadnetwork/NomadNetworkPage.vue         |  2 +-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index bc55c89..4223311 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "click-outside-vue3": "^4.0.1",
         "compressorjs": "^1.2.1",
         "electron-prompt": "^1.7.0",
+        "micron-parser": "^1.0.1",
         "mitt": "^3.0.1",
         "moment": "^2.30.1",
         "postcss": "^8.4.49",
@@ -1405,6 +1406,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "optional": true
+    },
     "node_modules/@types/verror": {
       "version": "1.10.10",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz",
@@ -2785,6 +2792,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
+      "integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dotenv": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-9.0.2.tgz",
@@ -4168,6 +4183,14 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/micron-parser": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/micron-parser/-/micron-parser-1.0.1.tgz",
+      "integrity": "sha512-fh3BWIoowiYtSnXg7O8cYnF+qZhGmxTU0S1fwVGtSXb6j04MSfe+8R0KzOgIn2eAij682QGqoeaz5mM2+kCl6Q==",
+      "dependencies": {
+        "dompurify": "*"
+      }
+    },
     "node_modules/mime": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
diff --git a/package.json b/package.json
index c55b974..cfec22e 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "click-outside-vue3": "^4.0.1",
     "compressorjs": "^1.2.1",
     "electron-prompt": "^1.7.0",
+    "micron-parser": "^1.0.1",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
     "postcss": "^8.4.49",
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index d881c5e..53e7ba0 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -135,7 +135,7 @@ pre a:hover {
 
 <script>
 
-import MicronParser from "../../js/MicronParser";
+import MicronParser from "micron-parser";
 import DialogUtils from "../../js/DialogUtils";
 import WebSocketConnection from "../../js/WebSocketConnection";
 import NomadNetworkSidebar from "./NomadNetworkSidebar.vue";

From d7080c8ca1517ee4894c432b9d429ef5c2653b8b Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 15 Mar 2025 12:18:30 +1300
Subject: [PATCH 079/131] migrate to data attributes for micron parser links

---
 .../nomadnetwork/NomadNetworkPage.vue         | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 53e7ba0..efca11e 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -177,18 +177,21 @@ export default {
         };
     },
     beforeUnmount() {
+
         // stop listening for websocket messages
         WebSocketConnection.off("message", this.onWebsocketMessage);
+
+        // stop listening for element clicks
+        window.document.removeEventListener('click', this.onElementClick);
+
     },
     mounted() {
 
         // listen for websocket messages
         WebSocketConnection.on("message", this.onWebsocketMessage);
 
-        // fixme: this is called by the micron-parser.js
-        window.onNodePageUrlClick = (url, options = null) => {
-            this.onNodePageUrlClick(url, options);
-        };
+        // listen for element clicks
+        window.document.addEventListener('click', this.onElementClick);
 
         // load nomadnetwork node if a destination hash was provided on page load
         if(this.destinationHash){
@@ -203,6 +206,22 @@ export default {
 
     },
     methods: {
+        onElementClick(event) {
+
+            // find the closest ancestor (or the clicked element itself) with data-action="openNode"
+            const element = event.target.closest('[data-action="openNode"]');
+            if(!element){
+                return;
+            }
+
+            // get the destination and fields
+            const destination = element.getAttribute("data-destination");
+            const fields = element.getAttribute("data-fields");
+
+            // navigate to destination
+            this.onNodePageUrlClick(destination, fields);
+
+        },
         async onWebsocketMessage(message) {
             const json = JSON.parse(message.data);
             switch(json.type){

From b8d388fa56d4528b1e7311e4210edcc0c15ee959 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 15 Mar 2025 12:19:10 +1300
Subject: [PATCH 080/131] 1.21.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4223311..f034898 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "1.20.0",
+      "version": "1.21.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index cfec22e..437edf0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From e9a9e9f831974e6eed1a562a30d952c5036cc700 Mon Sep 17 00:00:00 2001
From: Stephen Smith <stephen304@gmail.com>
Date: Thu, 17 Apr 2025 18:52:32 -0400
Subject: [PATCH 081/131] filter out known flags that should not be passed to
 python. fixes #61

---
 electron/main.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/electron/main.js b/electron/main.js
index 853dbee..edd8bc2 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -99,7 +99,9 @@ function getDefaultReticulumConfigDir() {
 app.whenReady().then(async () => {
 
     // get arguments passed to application, and remove the provided application path
-    const userProvidedArguments = process.argv.slice(1);
+    const ignoredArguments = ["--no-sandbox"];
+    const userProvidedArguments = process.argv.slice(1)
+        .filter(arg => !ignoredArguments.includes(arg));
     const shouldLaunchHeadless = userProvidedArguments.includes("--headless");
 
     if(!shouldLaunchHeadless){

From 07a41215be7a0f96679e18ae8d608191d72da536 Mon Sep 17 00:00:00 2001
From: Amlor <github@amlor.at>
Date: Sun, 20 Apr 2025 13:31:21 +0400
Subject: [PATCH 082/131] Fix Airtime Limit fields placeholders

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 593e608..b1c9e4e 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -690,7 +690,7 @@
                                 <input
                                     type="number"
                                     v-model="newInterfaceAirtimeLimitShort"
-                                    placeholder="Enter short airtime limit (seconds)"
+                                    placeholder="Enter short airtime limit (% of a rolling 15 seconds window)"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                 />
                             </div>
@@ -699,7 +699,7 @@
                                 <input
                                     type="number"
                                     v-model="newInterfaceAirtimeLimitLong"
-                                    placeholder="Enter long airtime limit (seconds)"
+                                    placeholder="Enter long airtime limit (% of a rolling 60 seconds window)"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                 />
                             </div>

From 458a38751716bb21e8d0c22a037246f37dc39697 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 11 May 2025 21:02:35 +1200
Subject: [PATCH 083/131] update rns to v0.9.5

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index a115c45..8484006 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,5 @@ aiohttp>=3.9.5
 cx_freeze>=7.0.0
 lxmf>=0.6.3
 peewee>=3.17.3
-rns>=0.9.3
+rns>=0.9.5
 websockets>=14.2

From 66b619c3980ec11dff1034723a8bbdc7766efdb2 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 11 May 2025 21:04:26 +1200
Subject: [PATCH 084/131] single line

---
 electron/main.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index edd8bc2..604748f 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -100,8 +100,7 @@ app.whenReady().then(async () => {
 
     // get arguments passed to application, and remove the provided application path
     const ignoredArguments = ["--no-sandbox"];
-    const userProvidedArguments = process.argv.slice(1)
-        .filter(arg => !ignoredArguments.includes(arg));
+    const userProvidedArguments = process.argv.slice(1).filter((arg) => !ignoredArguments.includes(arg));
     const shouldLaunchHeadless = userProvidedArguments.includes("--headless");
 
     if(!shouldLaunchHeadless){

From ce56c205c6dd692dcc7ff32dcad19c6dc0fc1e0f Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 11 May 2025 21:42:06 +1200
Subject: [PATCH 085/131] 1.22.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f034898..3fabffa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "1.21.0",
+      "version": "1.22.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index 437edf0..cd379c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From e757a2f022d4499abb23ab9094168e399ad9747a Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 16 May 2025 02:46:35 +1200
Subject: [PATCH 086/131] update lxmf to v0.7.0

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 8484006..c84c82d 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.9.5
 cx_freeze>=7.0.0
-lxmf>=0.6.3
+lxmf>=0.7.0
 peewee>=3.17.3
 rns>=0.9.5
 websockets>=14.2

From df533fb1bf3a7bcc25ef84104307816035397415 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 24 May 2025 17:00:16 +1200
Subject: [PATCH 087/131] update lxmf to v0.7.1

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index c84c82d..e65a9df 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.9.5
 cx_freeze>=7.0.0
-lxmf>=0.7.0
+lxmf>=0.7.1
 peewee>=3.17.3
 rns>=0.9.5
 websockets>=14.2

From 5b783399f827a3007b08cf73c61be3182be5d1d6 Mon Sep 17 00:00:00 2001
From: Viacheslav Komarov <github@amlor.at>
Date: Sat, 7 Jun 2025 11:48:54 +0400
Subject: [PATCH 088/131] Fix long window placeholder to say minutes

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index b1c9e4e..39fb56f 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -699,7 +699,7 @@
                                 <input
                                     type="number"
                                     v-model="newInterfaceAirtimeLimitLong"
-                                    placeholder="Enter long airtime limit (% of a rolling 60 seconds window)"
+                                    placeholder="Enter long airtime limit (% of a rolling 60 minutes window)"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                 />
                             </div>

From 588780d632c9db3e5306ec16c825cec04dacc72f Mon Sep 17 00:00:00 2001
From: Nikolai Vincent Vaags <nikolai@nikolaivincent.no>
Date: Wed, 9 Jul 2025 11:22:14 +0200
Subject: [PATCH 089/131] add `ozone-platform-hint=auto` to known flags

This allows electron to run natively under wayland
---
 electron/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/electron/main.js b/electron/main.js
index 604748f..1c70182 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -99,7 +99,7 @@ function getDefaultReticulumConfigDir() {
 app.whenReady().then(async () => {
 
     // get arguments passed to application, and remove the provided application path
-    const ignoredArguments = ["--no-sandbox"];
+    const ignoredArguments = ["--no-sandbox", "--ozone-platform-hint=auto"];
     const userProvidedArguments = process.argv.slice(1).filter((arg) => !ignoredArguments.includes(arg));
     const shouldLaunchHeadless = userProvidedArguments.includes("--headless");
 

From 47a84fc1102980804c0ab5113205e0a5e1df4b40 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 13 Jul 2025 18:20:39 +1200
Subject: [PATCH 090/131] update rns to v0.9.6

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index e65a9df..33ba855 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,5 @@ aiohttp>=3.9.5
 cx_freeze>=7.0.0
 lxmf>=0.7.1
 peewee>=3.17.3
-rns>=0.9.5
+rns>=0.9.6
 websockets>=14.2

From 6b3639dcd2d938e6160ac9867025844a7e289ce4 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 13 Jul 2025 19:28:29 +1200
Subject: [PATCH 091/131] 2.0.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3fabffa..0c850c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.22.0",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "1.22.0",
+      "version": "2.0.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index cd379c6..1530940 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.22.0",
+  "version": "2.0.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From a58f73357aac1722cf43112deaa74a4d68b3ae9d Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 16:16:36 +1200
Subject: [PATCH 092/131] update rns to v1.0.0

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 33ba855..9abb8be 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,5 @@ aiohttp>=3.9.5
 cx_freeze>=7.0.0
 lxmf>=0.7.1
 peewee>=3.17.3
-rns>=0.9.6
+rns>=1.0.0
 websockets>=14.2

From 97071c7edbcbad97ec806254539df289c3019c0a Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 16:19:28 +1200
Subject: [PATCH 093/131] update lxmf to v0.8.0

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 9abb8be..7b3f950 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.9.5
 cx_freeze>=7.0.0
-lxmf>=0.7.1
+lxmf>=0.8.0
 peewee>=3.17.3
 rns>=1.0.0
 websockets>=14.2

From 86cfddce5254879ed0bbdb94b644e20da99e0e98 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 16:21:56 +1200
Subject: [PATCH 094/131] update micron-parser to v1.0.2

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0c850c1..8c8012c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "click-outside-vue3": "^4.0.1",
         "compressorjs": "^1.2.1",
         "electron-prompt": "^1.7.0",
-        "micron-parser": "^1.0.1",
+        "micron-parser": "^1.0.2",
         "mitt": "^3.0.1",
         "moment": "^2.30.1",
         "postcss": "^8.4.49",
@@ -4184,9 +4184,9 @@
       }
     },
     "node_modules/micron-parser": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/micron-parser/-/micron-parser-1.0.1.tgz",
-      "integrity": "sha512-fh3BWIoowiYtSnXg7O8cYnF+qZhGmxTU0S1fwVGtSXb6j04MSfe+8R0KzOgIn2eAij682QGqoeaz5mM2+kCl6Q==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/micron-parser/-/micron-parser-1.0.2.tgz",
+      "integrity": "sha512-lYrEolylOUXeSISYrPRW/ZZAH1dpZRyTJ0VzQIA4cWJy0yNCXUUs+ujuAwV2OYlAPH8tCE1Z22+zg04Ilp/JWg==",
       "dependencies": {
         "dompurify": "*"
       }
diff --git a/package.json b/package.json
index 1530940..d1aa4e9 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "click-outside-vue3": "^4.0.1",
     "compressorjs": "^1.2.1",
     "electron-prompt": "^1.7.0",
-    "micron-parser": "^1.0.1",
+    "micron-parser": "^1.0.2",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
     "postcss": "^8.4.49",

From 24acbaf22388bb56045f810ea509de0d9410cbb1 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 19:16:57 +1200
Subject: [PATCH 095/131] update axios to v1.10.0

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8c8012c..8a19d84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@tailwindcss/forms": "^0.5.9",
         "@vitejs/plugin-vue": "^5.2.1",
         "autoprefixer": "^10.4.20",
-        "axios": "^1.7.9",
+        "axios": "^1.10.0",
         "click-outside-vue3": "^4.0.1",
         "compressorjs": "^1.2.1",
         "electron-prompt": "^1.7.0",
@@ -1915,9 +1915,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.9",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
-      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
diff --git a/package.json b/package.json
index d1aa4e9..cc1e94e 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "@tailwindcss/forms": "^0.5.9",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
-    "axios": "^1.7.9",
+    "axios": "^1.10.0",
     "click-outside-vue3": "^4.0.1",
     "compressorjs": "^1.2.1",
     "electron-prompt": "^1.7.0",

From a094a741a8641c93e5365b876eb70d7af772de5f Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 19:37:59 +1200
Subject: [PATCH 096/131] don't use await in websocket handler as it blocks all
 other requests

---
 meshchat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 4d4b984..b76fb0e 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -2221,7 +2221,7 @@ class ReticulumMeshChat:
 
             # download the page
             downloader = NomadnetPageDownloader(destination_hash, page_path_to_download, combined_data, on_page_download_success, on_page_download_failure, on_page_download_progress)
-            await downloader.download()
+            AsyncUtils.run_async(downloader.download())
 
         # unhandled type
         else:

From 817d5b5e597142ab62b09552476be40ce0849e0e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 19:47:47 +1200
Subject: [PATCH 097/131] don't use await in websocket handler as it blocks all
 other requests

---
 meshchat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index b76fb0e..5bc8f1a 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -2147,7 +2147,7 @@ class ReticulumMeshChat:
 
             # download the file
             downloader = NomadnetFileDownloader(destination_hash, file_path, on_file_download_success, on_file_download_failure, on_file_download_progress)
-            await downloader.download()
+            AsyncUtils.run_async(downloader.download())
 
         # handle downloading a page from a nomadnet node
         elif _type == "nomadnet.page.download":

From 51bdd35f01afd01ccbdce570984763f9c3ad58c7 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 20:29:10 +1200
Subject: [PATCH 098/131] fix downloading files from nomadnet by handling
 buffered reader responses

---
 meshchat.py | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index 5bc8f1a..fc05097 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1,6 +1,7 @@
 #!/usr/bin/env python
 
 import argparse
+import io
 import json
 import os
 import sys
@@ -3271,7 +3272,7 @@ class Config:
 nomadnet_cached_links = {}
 class NomadnetDownloader:
 
-    def __init__(self, destination_hash: bytes, path: str, data: str|None, on_download_success: Callable[[bytes], None], on_download_failure: Callable[[str], None], on_progress_update: Callable[[float], None], timeout: int|None = None):
+    def __init__(self, destination_hash: bytes, path: str, data: str|None, on_download_success: Callable[[RNS.RequestReceipt], None], on_download_failure: Callable[[str], None], on_progress_update: Callable[[float], None], timeout: int|None = None):
         self.app_name = "nomadnetwork"
         self.aspects = "node"
         self.destination_hash = destination_hash
@@ -3353,8 +3354,8 @@ class NomadnetDownloader:
         )
 
     # handle successful download
-    def on_response(self, request_receipt):
-        self.on_download_success(request_receipt.response)
+    def on_response(self, request_receipt: RNS.RequestReceipt):
+        self.on_download_success(request_receipt)
 
     # handle failure
     def on_failed(self, request_receipt=None):
@@ -3373,8 +3374,8 @@ class NomadnetPageDownloader(NomadnetDownloader):
         super().__init__(destination_hash, page_path, data, self.on_download_success, self.on_download_failure, on_progress_update, timeout)
 
     # page download was successful, decode the response and send to provided callback
-    def on_download_success(self, response_bytes):
-        micron_markup_response = response_bytes.decode("utf-8")
+    def on_download_success(self, request_receipt: RNS.RequestReceipt):
+        micron_markup_response = request_receipt.response.decode("utf-8")
         self.on_page_download_success(micron_markup_response)
 
     # page download failed, send error to provided callback
@@ -3390,7 +3391,30 @@ class NomadnetFileDownloader(NomadnetDownloader):
         super().__init__(destination_hash, page_path, None, self.on_download_success, self.on_download_failure, on_progress_update, timeout)
 
     # file download was successful, decode the response and send to provided callback
-    def on_download_success(self, response):
+    def on_download_success(self, request_receipt: RNS.RequestReceipt):
+
+        # get response
+        response = request_receipt.response
+
+        # handle buffered reader response
+        if isinstance(response, io.BufferedReader):
+
+            # get file name from metadata
+            file_name = "downloaded_file"
+            metadata = request_receipt.metadata
+            if metadata is not None and "name" in metadata:
+                file_path = metadata["name"].decode("utf-8")
+                file_name = os.path.basename(file_path)
+
+            # get file data
+            file_data: bytes = response.read()
+
+            self.on_file_download_success(file_name, file_data)
+            return
+
+        # original response format
+        # unsure if this is actually used anymore now that a buffered reader is provided
+        # have left here just in case...
         file_name: str = response[0]
         file_data: bytes = response[1]
         self.on_file_download_success(file_name, file_data)

From 90445467e12fa88eaed6e96ceac7b0d89501a55c Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 20:34:26 +1200
Subject: [PATCH 099/131] remove todos

---
 meshchat.py | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index fc05097..871df15 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -2144,8 +2144,6 @@ class ReticulumMeshChat:
                     },
                 })))
 
-            # todo: handle file download progress
-
             # download the file
             downloader = NomadnetFileDownloader(destination_hash, file_path, on_file_download_success, on_file_download_failure, on_file_download_progress)
             AsyncUtils.run_async(downloader.download())
@@ -2218,8 +2216,6 @@ class ReticulumMeshChat:
                     },
                 })))
 
-            # todo: handle page download progress
-
             # download the page
             downloader = NomadnetPageDownloader(destination_hash, page_path_to_download, combined_data, on_page_download_success, on_page_download_failure, on_page_download_progress)
             AsyncUtils.run_async(downloader.download())

From f3bf0abd84f54bf6103f172a2b435343bd555c14 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 18 Jul 2025 21:45:35 +1200
Subject: [PATCH 100/131] 2.1.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8a19d84..d3477e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "2.0.0",
+      "version": "2.1.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index cc1e94e..7b71765 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From 37cc6aa158b7e5511b28474ec05ad9e42e4cb030 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 25 Jul 2025 21:56:02 +1200
Subject: [PATCH 101/131] add button to identify self to nomad network node

---
 meshchat.py                                   | 24 ++++++++++++++
 .../nomadnetwork/NomadNetworkPage.vue         | 33 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 871df15..7026906 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1758,6 +1758,30 @@ class ReticulumMeshChat:
                 "lxmf_message": lxmf_message,
             })
 
+        # identify self on existing nomadnetwork link
+        @routes.post("/api/v1/nomadnetwork/{destination_hash}/identify")
+        async def index(request):
+
+            # get path params
+            destination_hash = request.match_info.get("destination_hash", "")
+
+            # convert destination hash to bytes
+            destination_hash = bytes.fromhex(destination_hash)
+
+            # identify to existing active link
+            if destination_hash in nomadnet_cached_links:
+                link = nomadnet_cached_links[destination_hash]
+                if link.status is RNS.Link.ACTIVE:
+                    link.identify(self.identity)
+                    return web.json_response({
+                        "message": "Identity has been sent!",
+                    })
+
+            # failed to identify
+            return web.json_response({
+                "message": "Failed to identify. No active link to destination.",
+            }, status=500)
+
         # delete lxmf message
         @routes.delete("/api/v1/lxmf-messages/{hash}")
         async def index(request):
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index efca11e..ff06cf3 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -17,8 +17,21 @@
                 <span v-if="selectedNodePath" @click="onDestinationPathClick(selectedNodePath)" class="text-sm cursor-pointer"> - {{ selectedNodePath.hops }} {{ selectedNodePath.hops === 1 ? 'hop' : 'hops' }} away</span>
             </div>
 
-            <!-- close button -->
+            <!-- identify button -->
             <div class="my-auto ml-auto mr-2">
+                <div @click="identify(selectedNode.destination_hash)" class="cursor-pointer">
+                    <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- close button -->
+            <div class="my-auto mr-2">
                 <div @click="onCloseNodeViewer" class="cursor-pointer">
                     <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
                         <div>
@@ -773,6 +786,24 @@ export default {
             }
 
         },
+        async identify(destinationHash) {
+            try {
+
+                // ask user to confirm
+                if(!confirm("Are you sure you want to identify yourself to this NomadNetwork Node? The page will reload after your identity has been sent.")){
+                    return;
+                }
+
+                // identify self to nomadnetwork node
+                await window.axios.post(`/api/v1/nomadnetwork/${destinationHash}/identify`);
+
+                // reload page
+                this.reloadNodePage();
+
+            } catch(e) {
+                DialogUtils.alert(e.response?.data?.message ?? "Failed to identify!");
+            }
+        },
         downloadNomadNetFile(destinationHash, filePath, onSuccessCallback, onFailureCallback, onProgressCallback) {
             try {
 

From 4734e6246833adf785aab83485136e977a1d8024 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 25 Jul 2025 23:02:05 +1200
Subject: [PATCH 102/131] implement favourites system for nomadnetwork nodes

---
 database.py                                   |  15 +++
 meshchat.py                                   | 101 ++++++++++++++++++
 .../nomadnetwork/NomadNetworkPage.vue         |  84 +++++++++++++++
 .../nomadnetwork/NomadNetworkSidebar.vue      |  82 +++++++++++++-
 src/frontend/js/Utils.js                      |   7 ++
 5 files changed, 288 insertions(+), 1 deletion(-)

diff --git a/database.py b/database.py
index 11a7427..c9ad27c 100644
--- a/database.py
+++ b/database.py
@@ -95,6 +95,21 @@ class CustomDestinationDisplayName(BaseModel):
         table_name = "custom_destination_display_names"
 
 
+class FavouriteDestination(BaseModel):
+
+    id = BigAutoField()
+    destination_hash = CharField(unique=True)  # unique destination hash
+    display_name = CharField()  # custom display name for the destination hash
+    aspect = CharField()  # e.g: nomadnetwork.node
+
+    created_at = DateTimeField(default=lambda: datetime.now(timezone.utc))
+    updated_at = DateTimeField(default=lambda: datetime.now(timezone.utc))
+
+    # define table name
+    class Meta:
+        table_name = "favourite_destinations"
+
+
 class LxmfMessage(BaseModel):
 
     id = BigAutoField()
diff --git a/meshchat.py b/meshchat.py
index 7026906..5e08686 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -78,6 +78,7 @@ class ReticulumMeshChat:
             database.Config,
             database.Announce,
             database.CustomDestinationDisplayName,
+            database.FavouriteDestination,
             database.LxmfMessage,
             database.LxmfConversationReadState,
             database.LxmfUserIcon,
@@ -1233,6 +1234,79 @@ class ReticulumMeshChat:
                 "announces": announces,
             })
 
+        # serve favourites
+        @routes.get("/api/v1/favourites")
+        async def index(request):
+
+            # get query params
+            aspect = request.query.get("aspect", None)
+
+            # build favourites database query
+            query = database.FavouriteDestination.select()
+
+            # filter by provided aspect
+            if aspect is not None:
+                query = query.where(database.FavouriteDestination.aspect == aspect)
+
+            # order favourites alphabetically
+            query_results = query.order_by(database.FavouriteDestination.display_name.asc())
+
+            # process favourites
+            favourites = []
+            for favourite in query_results:
+                favourites.append(self.convert_db_favourite_to_dict(favourite))
+
+            return web.json_response({
+                "favourites": favourites,
+            })
+
+        # add favourite
+        @routes.post("/api/v1/favourites/add")
+        async def index(request):
+
+            # get request data
+            data = await request.json()
+            destination_hash = data.get("destination_hash", None)
+            display_name = data.get("display_name", None)
+            aspect = data.get("aspect", None)
+
+            # destination hash is required
+            if destination_hash is None:
+                return web.json_response({
+                    "message": "destination_hash is required",
+                }, status=422)
+
+            # display name is required
+            if display_name is None:
+                return web.json_response({
+                    "message": "display_name is required",
+                }, status=422)
+
+            # aspect is required
+            if aspect is None:
+                return web.json_response({
+                    "message": "aspect is required",
+                }, status=422)
+
+            # upsert favourite
+            self.db_upsert_favourite(destination_hash, display_name, aspect)
+            return web.json_response({
+                "message": "Favourite has been added!",
+            })
+
+        # delete favourite
+        @routes.delete("/api/v1/favourites/{destination_hash}")
+        async def index(request):
+
+            # get path params
+            destination_hash = request.match_info.get("destination_hash", "")
+
+            # delete favourite
+            database.FavouriteDestination.delete().where(database.FavouriteDestination.destination_hash == destination_hash).execute()
+            return web.json_response({
+                "message": "Favourite has been added!",
+            })
+
         # propagation node status
         @routes.get("/api/v1/lxmf/propagation-node/status")
         async def index(request):
@@ -2528,6 +2602,17 @@ class ReticulumMeshChat:
             "updated_at": announce.updated_at,
         }
 
+    # convert database favourite to a dictionary
+    def convert_db_favourite_to_dict(self, favourite: database.FavouriteDestination):
+        return {
+            "id": favourite.id,
+            "destination_hash": favourite.destination_hash,
+            "display_name": favourite.display_name,
+            "aspect": favourite.aspect,
+            "created_at": favourite.created_at,
+            "updated_at": favourite.updated_at,
+        }
+
     # convert database lxmf message to a dictionary
     def convert_db_lxmf_message_to_dict(self, db_lxmf_message: database.LxmfMessage):
 
@@ -2738,6 +2823,22 @@ class ReticulumMeshChat:
         query = query.on_conflict(conflict_target=[database.CustomDestinationDisplayName.destination_hash], update=data)
         query.execute()
 
+    # upserts a custom destination display name to the database
+    def db_upsert_favourite(self, destination_hash: str, display_name: str, aspect: str):
+
+        # prepare data to insert or update
+        data = {
+            "destination_hash": destination_hash,
+            "display_name": display_name,
+            "aspect": aspect,
+            "updated_at": datetime.now(timezone.utc),
+        }
+
+        # upsert to database
+        query = database.FavouriteDestination.insert(data)
+        query = query.on_conflict(conflict_target=[database.FavouriteDestination.destination_hash], update=data)
+        query.execute()
+
     # upserts lxmf conversation read state to the database
     def db_mark_lxmf_conversation_as_read(self, destination_hash: str):
 
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index ff06cf3..9a4964c 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -3,6 +3,7 @@
     <!-- nomadnetwork sidebar -->
     <NomadNetworkSidebar
         :nodes="nodes"
+        :favourites="favourites"
         :selected-destination-hash="selectedNode?.destination_hash"
         @node-click="onNodeClick"/>
 
@@ -11,6 +12,29 @@
     <div v-if="selectedNode" class="flex flex-col h-full bg-white dark:bg-zinc-950 overflow-hidden sm:m-2 sm:border dark:border-zinc-800 sm:rounded-xl sm:shadow dark:shadow-zinc-900">
         <!-- header -->
         <div class="flex p-2 border-b border-gray-300 dark:border-zinc-800">
+
+            <!-- favourite button -->
+            <div class="my-auto mr-2">
+                <div v-if="isFavourite(selectedNode.destination_hash)" @click="removeFavourite(selectedNode)" class="cursor-pointer">
+                    <div class="flex text-yellow-500 dark:text-yellow-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div v-else @click="addFavourite(selectedNode)" class="cursor-pointer">
+                    <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- node info -->
             <div class="my-auto dark:text-gray-100">
                 <span class="font-semibold">{{ selectedNode.display_name }}</span>
@@ -165,10 +189,14 @@ export default {
     data() {
         return {
 
+            reloadInterval: null,
+
             nodes: {},
             selectedNode: null,
             selectedNodePath: null,
 
+            favourites: [],
+
             isLoadingNodePage: false,
             isShowingNodePageSource: false,
             defaultNodePagePath: "/page/index.mu",
@@ -191,6 +219,8 @@ export default {
     },
     beforeUnmount() {
 
+        clearInterval(this.reloadInterval);
+
         // stop listening for websocket messages
         WebSocketConnection.off("message", this.onWebsocketMessage);
 
@@ -215,8 +245,14 @@ export default {
             })();
         }
 
+        this.getFavourites();
         this.getNomadnetworkNodeAnnounces();
 
+        // update info every few seconds
+        this.reloadInterval = setInterval(() => {
+            this.getFavourites();
+        }, 5000);
+
     },
     methods: {
         onElementClick(event) {
@@ -322,6 +358,54 @@ export default {
         onDestinationPathClick: function(path) {
             DialogUtils.alert(`${path.hops} ${ path.hops === 1 ? 'hop' : 'hops' } away via ${path.next_hop_interface}`);
         },
+        async getFavourites() {
+            try {
+                const response = await window.axios.get("/api/v1/favourites", {
+                    params: {
+                        aspect: "nomadnetwork.node",
+                    },
+                });
+                this.favourites = response.data.favourites;
+            } catch(e) {
+                // do nothing if failed to load favourites
+                console.log(e);
+            }
+        },
+        isFavourite(destinationHash) {
+            return this.favourites.find((favourite) => {
+                return favourite.destination_hash === destinationHash;
+            }) != null;
+        },
+        async addFavourite(node) {
+
+            // add to favourites
+            try {
+                await window.axios.post("/api/v1/favourites/add", {
+                    destination_hash: node.destination_hash,
+                    display_name: node.display_name,
+                    aspect: "nomadnetwork.node",
+                });
+            } catch(e) {
+                console.log(e);
+            }
+
+            // update favourites
+            this.getFavourites();
+
+        },
+        async removeFavourite(node) {
+
+            // remove from favourites
+            try {
+                await window.axios.delete(`/api/v1/favourites/${node.destination_hash}`);
+            } catch(e) {
+                console.log(e);
+            }
+
+            // update favourites
+            this.getFavourites();
+
+        },
         async getNomadnetworkNodeAnnounces() {
             try {
 
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue b/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
index 48561c8..a24ec30 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
@@ -1,6 +1,67 @@
 <template>
     <div class="flex flex-col w-80 min-w-80">
-        <div class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r dark:border-zinc-800 overflow-hidden">
+
+        <!-- tabs -->
+        <div class="bg-white dark:bg-zinc-950 border-b border-r border-gray-200 dark:border-zinc-700">
+            <div class="-mb-px flex">
+                <div @click="tab = 'favourites'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'favourites' ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-zinc-600 hover:text-gray-700 dark:hover:text-gray-300']">Favourites</div>
+                <div @click="tab = 'announces'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'announces' ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-zinc-600 hover:text-gray-700 dark:hover:text-gray-300']">Announces</div>
+            </div>
+        </div>
+
+        <!-- favourites -->
+        <div v-if="tab === 'favourites'" class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r border-gray-200 dark:border-zinc-700 overflow-hidden">
+
+            <!-- search -->
+            <div v-if="favourites.length > 0" class="p-1 border-b border-gray-300 dark:border-zinc-700">
+                <input v-model="favouritesSearchTerm" type="text" :placeholder="`Search ${favourites.length} Favourites...`" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 dark:focus:ring-blue-600 focus:border-blue-500 dark:focus:border-blue-600 block w-full p-2.5">
+            </div>
+
+            <!-- peers -->
+            <div class="flex h-full overflow-y-auto">
+                <div v-if="searchedFavourites.length > 0" class="w-full">
+                    <div @click="onFavouriteClick(favourite)" v-for="favourite of searchedFavourites" class="flex cursor-pointer p-2 border-l-2" :class="[ favourite.destination_hash === selectedDestinationHash ? 'bg-gray-100 dark:bg-zinc-700 border-blue-500 dark:border-blue-400' : 'bg-white dark:bg-zinc-950 border-transparent hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-gray-200 dark:hover:border-zinc-600' ]">
+                        <div class="my-auto mr-2">
+                            <div class="bg-gray-200 dark:bg-zinc-800 text-gray-500 dark:text-gray-400 p-2 rounded">
+                                <MaterialDesignIcon icon-name="server-network-outline" class="w-6 h-6"/>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="text-gray-900 dark:text-gray-100">{{ favourite.display_name }}</div>
+                            <div class="text-gray-500 dark:text-gray-400 text-sm">{{ formatDestinationHash(favourite.destination_hash) }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="mx-auto my-auto text-center leading-5">
+
+                    <!-- no favourites at all -->
+                    <div v-if="favourites.length === 0" class="flex flex-col text-gray-900 dark:text-gray-100">
+                        <div class="mx-auto mb-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+                            </svg>
+                        </div>
+                        <div class="font-semibold">No Favourites</div>
+                        <div>Discover nodes on the Announces tab.</div>
+                    </div>
+
+                    <!-- is searching, but no results -->
+                    <div v-if="favouritesSearchTerm !== '' && favourites.length > 0" class="flex flex-col text-gray-900 dark:text-gray-100">
+                        <div class="mx-auto mb-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                            </svg>
+                        </div>
+                        <div class="font-semibold">No Search Results</div>
+                        <div>Your search didn't match any Favourites!</div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <!-- announces -->
+        <div v-if="tab === 'announces'" class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r dark:border-zinc-800 overflow-hidden">
             <!-- search -->
             <div v-if="nodesCount > 0" class="p-1 border-b border-gray-300 dark:border-zinc-800">
                 <input 
@@ -58,6 +119,7 @@
                 </div>
             </div>
         </div>
+
     </div>
 </template>
 
@@ -71,10 +133,13 @@ export default {
     components: {MaterialDesignIcon},
     props: {
         nodes: Object,
+        favourites: Array,
         selectedDestinationHash: String,
     },
     data() {
         return {
+            tab: "favourites",
+            favouritesSearchTerm: "",
             nodesSearchTerm: "",
         };
     },
@@ -82,9 +147,15 @@ export default {
         onNodeClick(node) {
             this.$emit("node-click", node);
         },
+        onFavouriteClick(favourite) {
+            this.onNodeClick(favourite);
+        },
         formatTimeAgo: function(datetimeString) {
             return Utils.formatTimeAgo(datetimeString);
         },
+        formatDestinationHash: function(destinationHash) {
+            return Utils.formatDestinationHash(destinationHash);
+        },
     },
     computed: {
         nodesCount() {
@@ -107,6 +178,15 @@ export default {
                 return matchesDisplayName || matchesDestinationHash;
             });
         },
+        searchedFavourites() {
+            return this.favourites.filter((favourite) => {
+                const search = this.favouritesSearchTerm.toLowerCase();
+                const matchesDisplayName = favourite.display_name.toLowerCase().includes(search);
+                const matchesCustomDisplayName = favourite.custom_display_name?.toLowerCase()?.includes(search) === true;
+                const matchesDestinationHash = favourite.destination_hash.toLowerCase().includes(search);
+                return matchesDisplayName || matchesCustomDisplayName || matchesDestinationHash;
+            });
+        },
     },
 }
 </script>
diff --git a/src/frontend/js/Utils.js b/src/frontend/js/Utils.js
index 9362eca..74fcf6a 100644
--- a/src/frontend/js/Utils.js
+++ b/src/frontend/js/Utils.js
@@ -2,6 +2,13 @@ import moment from "moment";
 
 class Utils {
 
+    static formatDestinationHash(destinationHashHex) {
+        const bytesPerSide = 4;
+        const leftSide = destinationHashHex.substring(0, bytesPerSide * 2);
+        const rightSide = destinationHashHex.substring(destinationHashHex.length - bytesPerSide * 2);
+        return `<${leftSide}...${rightSide}>`
+    }
+
     static formatBytes(bytes) {
 
         if(bytes === 0){

From 64adad27f886e6dce8f91c6943c6dd6fedaa1f0c Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 25 Jul 2025 23:22:56 +1200
Subject: [PATCH 103/131] limit nomadnetwork announces list to 500 recent nodes

---
 src/frontend/components/nomadnetwork/NomadNetworkPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 9a4964c..2229636 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -413,6 +413,7 @@ export default {
                 const response = await window.axios.get(`/api/v1/announces`, {
                     params: {
                         aspect: "nomadnetwork.node",
+                        limit: 500, // limit ui to showing 500 latest announces
                     },
                 });
 

From 9031c1a3d7009456ea156e447f90e1a5dd40983e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 27 Jul 2025 20:17:08 +1200
Subject: [PATCH 104/131] add dropdown menu to nomadnetwork favourites list to
 rename and remove

---
 meshchat.py                                   | 19 ++++++++
 .../nomadnetwork/NomadNetworkPage.vue         | 38 +++++++++++++++-
 .../nomadnetwork/NomadNetworkSidebar.vue      | 43 ++++++++++++++++++-
 3 files changed, 98 insertions(+), 2 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index 5e08686..a6d92db 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1294,6 +1294,25 @@ class ReticulumMeshChat:
                 "message": "Favourite has been added!",
             })
 
+        # rename favourite
+        @routes.post("/api/v1/favourites/{destination_hash}/rename")
+        async def index(request):
+
+            # get path params
+            destination_hash = request.match_info.get("destination_hash", "")
+
+            # get request data
+            data = await request.json()
+            display_name = data.get("display_name")
+
+            # update display name if provided
+            if len(display_name) > 0:
+                database.FavouriteDestination.update(display_name=display_name).where(database.FavouriteDestination.destination_hash == destination_hash).execute()
+
+            return web.json_response({
+                "message": "Favourite has been renamed",
+            })
+
         # delete favourite
         @routes.delete("/api/v1/favourites/{destination_hash}")
         async def index(request):
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 2229636..6958a86 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -5,7 +5,9 @@
         :nodes="nodes"
         :favourites="favourites"
         :selected-destination-hash="selectedNode?.destination_hash"
-        @node-click="onNodeClick"/>
+        @node-click="onNodeClick"
+        @rename-favourite="onRenameFavourite"
+        @remove-favourite="onRemoveFavourite"/>
 
    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
     <!-- node -->
@@ -835,6 +837,40 @@ export default {
             // load default node page
             this.loadNodePage(node.destination_hash, this.defaultNodePagePath);
 
+        },
+        async onRenameFavourite(favourite) {
+
+            // ask user for new display name
+            const displayName = await DialogUtils.prompt("Rename this favourite");
+            if(displayName == null){
+                return;
+            }
+
+            try {
+
+                // rename on server
+                await axios.post(`/api/v1/favourites/${favourite.destination_hash}/rename`, {
+                    display_name: displayName,
+                });
+
+                // reload favourites
+                await this.getFavourites();
+
+            } catch(e) {
+                console.log(e);
+                DialogUtils.alert("Failed to rename favourite");
+            }
+
+        },
+        onRemoveFavourite: function(favourite) {
+
+            // ask user to confirm
+            if(!confirm("Are you sure you want to remove this favourite?")){
+                return;
+            }
+
+            this.removeFavourite(favourite);
+
         },
         onCloseNodeViewer: function() {
 
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue b/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
index a24ec30..62812e5 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue
@@ -30,6 +30,38 @@
                             <div class="text-gray-900 dark:text-gray-100">{{ favourite.display_name }}</div>
                             <div class="text-gray-500 dark:text-gray-400 text-sm">{{ formatDestinationHash(favourite.destination_hash) }}</div>
                         </div>
+                        <div class="ml-auto my-auto">
+                            <DropDownMenu>
+                                <template v-slot:button>
+                                    <IconButton class="bg-transparent dark:bg-transparent">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+                                        </svg>
+                                    </IconButton>
+                                </template>
+                                <template v-slot:items>
+
+                                    <!-- rename button -->
+                                    <DropDownMenuItem @click="onRenameFavourite(favourite)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                            <path fill-rule="evenodd" d="M5.25 2.25a3 3 0 0 0-3 3v4.318a3 3 0 0 0 .879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 0 0 5.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 0 0-2.122-.879H5.25ZM6.375 7.5a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd" />
+                                        </svg>
+                                        <span>Rename Favourite</span>
+                                    </DropDownMenuItem>
+
+                                    <!-- remove favourite button -->
+                                    <div>
+                                        <DropDownMenuItem @click="onRemoveFavourite(favourite)">
+                                            <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                                                <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+                                            </svg>
+                                            <span class="text-red-500">Remove Favourite</span>
+                                        </DropDownMenuItem>
+                                    </div>
+
+                                </template>
+                            </DropDownMenu>
+                        </div>
                     </div>
                 </div>
                 <div v-else class="mx-auto my-auto text-center leading-5">
@@ -127,10 +159,13 @@
 
 import Utils from "../../js/Utils";
 import MaterialDesignIcon from "../MaterialDesignIcon.vue";
+import DropDownMenu from "../DropDownMenu.vue";
+import IconButton from "../IconButton.vue";
+import DropDownMenuItem from "../DropDownMenuItem.vue";
 
 export default {
     name: 'NomadNetworkSidebar',
-    components: {MaterialDesignIcon},
+    components: {DropDownMenuItem, IconButton, DropDownMenu, MaterialDesignIcon},
     props: {
         nodes: Object,
         favourites: Array,
@@ -150,6 +185,12 @@ export default {
         onFavouriteClick(favourite) {
             this.onNodeClick(favourite);
         },
+        onRenameFavourite(favourite) {
+            this.$emit("rename-favourite", favourite);
+        },
+        onRemoveFavourite(favourite) {
+            this.$emit("remove-favourite", favourite);
+        },
         formatTimeAgo: function(datetimeString) {
             return Utils.formatTimeAgo(datetimeString);
         },

From 0c0f059ec444db9514ce9e889427f6bd7cd2b46d Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 27 Jul 2025 20:18:38 +1200
Subject: [PATCH 105/131] 2.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d3477e1..c31e9de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "2.1.0",
+      "version": "2.2.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index 7b71765..9f66a11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From 094f6cb5ec12914f0fe45275f4e2a81613af3679 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 27 Jul 2025 21:45:27 +1200
Subject: [PATCH 106/131] added custom confirm dialog as js confirm in electron
 on windows causes all text fields to be disabled

---
 electron/main.js                              | 21 +++++++++++++++++++
 electron/preload.js                           |  5 +++++
 src/frontend/components/App.vue               |  4 ++--
 src/frontend/components/call/CallPage.vue     |  7 ++++---
 .../components/interfaces/InterfacesPage.vue  |  2 +-
 .../messages/ConversationDropDownMenu.vue     |  2 +-
 .../messages/ConversationViewer.vue           | 14 ++++++-------
 .../nomadnetwork/NomadNetworkPage.vue         |  6 +++---
 .../components/profile/ProfileIconPage.vue    |  4 ++--
 src/frontend/js/DialogUtils.js                | 10 +++++++++
 10 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 1c70182..bdaa0cc 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -22,6 +22,27 @@ ipcMain.handle('alert', async(event, message) => {
     });
 });
 
+// add support for showing a confirm window via ipc
+ipcMain.handle('confirm', async(event, message) => {
+
+    // show confirm dialog
+    const result = await dialog.showMessageBox(mainWindow, {
+        type: "question",
+        title: "Confirm",
+        message: message,
+        cancelId: 0, // esc key should press cancel button
+        defaultId: 1, // enter key should press ok button
+        buttons: [
+            "Cancel", // 0
+            "OK", // 1
+        ],
+    });
+
+    // check if user clicked OK
+    return result.response === 1;
+
+});
+
 // add support for showing a prompt window via ipc
 ipcMain.handle('prompt', async(event, message) => {
     return await electronPrompt({
diff --git a/electron/preload.js b/electron/preload.js
index 8abc460..5465420 100644
--- a/electron/preload.js
+++ b/electron/preload.js
@@ -15,6 +15,11 @@ contextBridge.exposeInMainWorld('electron', {
         return await ipcRenderer.invoke('alert', message);
     },
 
+    // show a confirm dialog in electron browser window, this fixes a bug where confirm breaks input fields on windows
+    confirm: async function(message) {
+        return await ipcRenderer.invoke('confirm', message);
+    },
+
     // add support for using "prompt" in electron browser window
     prompt: async function(message) {
         return await ipcRenderer.invoke('prompt', message);
diff --git a/src/frontend/components/App.vue b/src/frontend/components/App.vue
index ff92964..3e69308 100644
--- a/src/frontend/components/App.vue
+++ b/src/frontend/components/App.vue
@@ -448,7 +448,7 @@ export default {
 
             // ask to stop syncing if already syncing
             if(this.isSyncingPropagationNode){
-                if(confirm("Are you sure you want to stop syncing?")){
+                if(await DialogUtils.confirm("Are you sure you want to stop syncing?")){
                     await this.stopSyncingPropagationNode();
                 }
                 return;
@@ -529,7 +529,7 @@ export default {
         async hangupAllCalls() {
 
             // confirm user wants to hang up calls
-            if(!confirm("Are you sure you want to hang up all incoming and outgoing calls?")){
+            if(!await DialogUtils.confirm("Are you sure you want to hang up all incoming and outgoing calls?")){
                 return;
             }
 
diff --git a/src/frontend/components/call/CallPage.vue b/src/frontend/components/call/CallPage.vue
index 509c3bc..cc74d2c 100644
--- a/src/frontend/components/call/CallPage.vue
+++ b/src/frontend/components/call/CallPage.vue
@@ -259,6 +259,7 @@
 
 <script>
 import protobuf from "protobufjs";
+import DialogUtils from "../../js/DialogUtils";
 export default {
     name: 'CallPage',
     data() {
@@ -488,7 +489,7 @@ export default {
         async hangupCall(callHash) {
 
             // confirm user wants to hang up call
-            if(!confirm("Are you sure you want to hang up this call?")){
+            if(!await DialogUtils.confirm("Are you sure you want to hang up this call?")){
                 return;
             }
 
@@ -681,7 +682,7 @@ export default {
         async deleteCall(callHash) {
 
             // confirm user wants to delete call
-            if(!confirm("Are you sure you want to delete this call?")){
+            if(!await DialogUtils.confirm("Are you sure you want to delete this call?")){
                 return;
             }
 
@@ -701,7 +702,7 @@ export default {
         async clearCallHistory() {
 
             // confirm user wants to clear call history
-            if(!confirm("Are you sure you want to clear your call history?")){
+            if(!await DialogUtils.confirm("Are you sure you want to clear your call history?")){
                 return;
             }
 
diff --git a/src/frontend/components/interfaces/InterfacesPage.vue b/src/frontend/components/interfaces/InterfacesPage.vue
index 8b58d9d..ccd4f8c 100644
--- a/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/src/frontend/components/interfaces/InterfacesPage.vue
@@ -191,7 +191,7 @@ export default {
         async deleteInterface(interfaceName) {
 
             // ask user to confirm deleting conversation history
-            if(!confirm("Are you sure you want to delete this interface? This can not be undone!")){
+            if(!await DialogUtils.confirm("Are you sure you want to delete this interface? This can not be undone!")){
                 return;
             }
 
diff --git a/src/frontend/components/messages/ConversationDropDownMenu.vue b/src/frontend/components/messages/ConversationDropDownMenu.vue
index 5c1b3a0..4788744 100644
--- a/src/frontend/components/messages/ConversationDropDownMenu.vue
+++ b/src/frontend/components/messages/ConversationDropDownMenu.vue
@@ -73,7 +73,7 @@ export default {
         async onDeleteMessageHistory() {
 
             // ask user to confirm deleting conversation history
-            if(!confirm("Are you sure you want to delete all messages in this conversation? This can not be undone!")){
+            if(!await DialogUtils.confirm("Are you sure you want to delete all messages in this conversation? This can not be undone!")){
                 return;
             }
 
diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index ed8c976..8eea16a 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -997,7 +997,7 @@ export default {
             try {
 
                 // ask user to confirm deleting message
-                if(shouldConfirm && !confirm("Are you sure you want to delete this message? This can not be undone!")){
+                if(shouldConfirm && !await DialogUtils.confirm("Are you sure you want to delete this message? This can not be undone!")){
                     return;
                 }
 
@@ -1078,7 +1078,7 @@ export default {
 
                 // ask user if they still want to send message if it may be rejected by sender
                 if(totalMessageSize > 1000 * 900){ // actual limit in LXMF Router is 1mb
-                    if(!confirm(`Your message exceeds 900KB (It's ${this.formatBytes(totalMessageSize)}). It may be rejected by the recipient unless they have increased their delivery limit. Do you want to try sending anyway?`)){
+                    if(!await DialogUtils.confirm(`Your message exceeds 900KB (It's ${this.formatBytes(totalMessageSize)}). It may be rejected by the recipient unless they have increased their delivery limit. Do you want to try sending anyway?`)){
                         return;
                     }
                 }
@@ -1209,10 +1209,10 @@ export default {
         clearFileInput: function() {
             this.$refs["file-input"].value = null;
         },
-        removeImageAttachment: function() {
+        async removeImageAttachment() {
 
             // ask user to confirm removing image attachment
-            if(!confirm("Are you sure you want to remove this image attachment?")){
+            if(!await DialogUtils.confirm("Are you sure you want to remove this image attachment?")){
                 return;
             }
 
@@ -1244,7 +1244,7 @@ export default {
             }
 
             // ask user to confirm recording new audio attachment, if an existing audio attachment exists
-            if(this.newMessageAudio && !confirm("An audio recording is already attached. A new recording will replace it. Do you want to continue?")){
+            if(this.newMessageAudio && !await DialogUtils.confirm("An audio recording is already attached. A new recording will replace it. Do you want to continue?")){
                 return;
             }
 
@@ -1386,10 +1386,10 @@ export default {
             }
 
         },
-        removeAudioAttachment: function() {
+        async removeAudioAttachment() {
 
             // ask user to confirm removing audio attachment
-            if(!confirm("Are you sure you want to remove this audio attachment?")){
+            if(!await DialogUtils.confirm("Are you sure you want to remove this audio attachment?")){
                 return;
             }
 
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index 6958a86..fb88e92 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -862,10 +862,10 @@ export default {
             }
 
         },
-        onRemoveFavourite: function(favourite) {
+        async onRemoveFavourite(favourite) {
 
             // ask user to confirm
-            if(!confirm("Are you sure you want to remove this favourite?")){
+            if(!await DialogUtils.confirm("Are you sure you want to remove this favourite?")){
                 return;
             }
 
@@ -911,7 +911,7 @@ export default {
             try {
 
                 // ask user to confirm
-                if(!confirm("Are you sure you want to identify yourself to this NomadNetwork Node? The page will reload after your identity has been sent.")){
+                if(!await DialogUtils.confirm("Are you sure you want to identify yourself to this NomadNetwork Node? The page will reload after your identity has been sent.")){
                     return;
                 }
 
diff --git a/src/frontend/components/profile/ProfileIconPage.vue b/src/frontend/components/profile/ProfileIconPage.vue
index a8ac567..d9a13bf 100644
--- a/src/frontend/components/profile/ProfileIconPage.vue
+++ b/src/frontend/components/profile/ProfileIconPage.vue
@@ -145,7 +145,7 @@ export default {
             }
 
             // confirm user wants to update their icon
-            if(!confirm("Are you sure you want to set this as your profile icon?")){
+            if(!await DialogUtils.confirm("Are you sure you want to set this as your profile icon?")){
                 return;
             }
 
@@ -160,7 +160,7 @@ export default {
         async removeProfileIcon() {
 
             // confirm user wants to remove their icon
-            if(!confirm("Are you sure you want to remove your profile icon? Anyone that has already received it will continue to see it until you send them a new icon.")){
+            if(!await DialogUtils.confirm("Are you sure you want to remove your profile icon? Anyone that has already received it will continue to see it until you send them a new icon.")){
                 return;
             }
 
diff --git a/src/frontend/js/DialogUtils.js b/src/frontend/js/DialogUtils.js
index 69d73a7..7233f71 100644
--- a/src/frontend/js/DialogUtils.js
+++ b/src/frontend/js/DialogUtils.js
@@ -10,6 +10,16 @@ class DialogUtils {
         }
     }
 
+    static confirm(message) {
+        if(window.electron){
+            // running inside electron, use ipc confirm
+            return window.electron.confirm(message);
+        } else {
+            // running inside normal browser, use browser alert
+            return window.confirm(message);
+        }
+    }
+
     static async prompt(message) {
         if(window.electron){
             // running inside electron, use ipc prompt

From dcaffe2594c392e07f7263ae900d88f117940e74 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 27 Jul 2025 21:52:08 +1200
Subject: [PATCH 107/131] 2.2.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c31e9de..8bd17e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "2.2.0",
+      "version": "2.2.1",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index 9f66a11..546432c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From 4e55006084cc74c3e59a9e53407f4bb0cc2eaf46 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 28 Jul 2025 17:21:52 +1200
Subject: [PATCH 108/131] fix bug where downloading files from cicada forums
 was not working

---
 meshchat.py | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/meshchat.py b/meshchat.py
index a6d92db..a970e7e 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -3552,6 +3552,22 @@ class NomadnetFileDownloader(NomadnetDownloader):
             self.on_file_download_success(file_name, file_data)
             return
 
+        # check for list response with bytes in position 0, and metadata dict in position 1
+        # e.g: [file_bytes, {name: "filename.ext"}]
+        if isinstance(response, list) and isinstance(response[1], dict):
+
+            file_data: bytes = response[0]
+            metadata: dict = response[1]
+
+            # get file name from metadata
+            file_name = "downloaded_file"
+            if metadata is not None and "name" in metadata:
+                file_path = metadata["name"].decode("utf-8")
+                file_name = os.path.basename(file_path)
+
+            self.on_file_download_success(file_name, file_data)
+            return
+
         # original response format
         # unsure if this is actually used anymore now that a buffered reader is provided
         # have left here just in case...

From 747236ae8bb3871beeec674d5154c8b28d0ca22d Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 28 Jul 2025 17:23:03 +1200
Subject: [PATCH 109/131] add try catch for fallback file download parsing, so
 client can show as unsupported

---
 meshchat.py | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index a970e7e..e7470d7 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -3568,12 +3568,15 @@ class NomadnetFileDownloader(NomadnetDownloader):
             self.on_file_download_success(file_name, file_data)
             return
 
-        # original response format
+        # try using original response format
         # unsure if this is actually used anymore now that a buffered reader is provided
         # have left here just in case...
-        file_name: str = response[0]
-        file_data: bytes = response[1]
-        self.on_file_download_success(file_name, file_data)
+        try:
+            file_name: str = response[0]
+            file_data: bytes = response[1]
+            self.on_file_download_success(file_name, file_data)
+        except:
+            self.on_download_failure("unsupported_response")
 
     # page download failed, send error to provided callback
     def on_download_failure(self, failure_reason):

From 65df111b876dd06baa1e4887df9e870586db3808 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 28 Jul 2025 19:01:15 +1200
Subject: [PATCH 110/131] rework async utils to always use main event loop in
 threadsafe manner

---
 meshchat.py                |  3 +++
 src/backend/async_utils.py | 30 +++++++++++++++---------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index e7470d7..ca44997 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -2038,6 +2038,9 @@ class ReticulumMeshChat:
         # called when web app has started
         async def on_startup(app):
 
+            # remember main event loop
+            AsyncUtils.set_main_loop(asyncio.get_event_loop())
+
             # auto launch web browser
             if launch_browser:
                 try:
diff --git a/src/backend/async_utils.py b/src/backend/async_utils.py
index d20d507..b8feaca 100644
--- a/src/backend/async_utils.py
+++ b/src/backend/async_utils.py
@@ -1,25 +1,25 @@
 import asyncio
+from typing import Coroutine
 
 
 class AsyncUtils:
 
-    # this method allows running the provided async coroutine from within a sync function
-    # it will run the async function on the existing event loop if available, otherwise it will start a new event loop
+    # remember main loop
+    main_loop: asyncio.AbstractEventLoop | None = None
+
     @staticmethod
-    def run_async(coroutine):
+    def set_main_loop(loop: asyncio.AbstractEventLoop):
+        AsyncUtils.main_loop = loop
 
-        # attempt to get existing event loop
-        existing_event_loop = None
-        try:
-            existing_event_loop = asyncio.get_running_loop()
-        except RuntimeError:
-            # 'RuntimeError: no running event loop'
-            pass
+    # this method allows running the provided async coroutine from within a sync function
+    # it will run the async function on the main event loop if possible, otherwise it logs a warning
+    @staticmethod
+    def run_async(coroutine: Coroutine):
 
-        # if there is an existing event loop running, submit the coroutine to that loop
-        if existing_event_loop and existing_event_loop.is_running():
-            existing_event_loop.create_task(coroutine)
+        # run provided coroutine on main event loop, ensuring thread safety
+        if AsyncUtils.main_loop and AsyncUtils.main_loop.is_running():
+            asyncio.run_coroutine_threadsafe(coroutine, AsyncUtils.main_loop)
             return
 
-        # otherwise start a new event loop to run the coroutine
-        asyncio.run(coroutine)
+        # main event loop not running...
+        print("WARNING: Main event loop not available. Could not schedule task.")

From d6847d262a8ea58258928d30fcb0076ad203726a Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 28 Jul 2025 21:38:43 +1200
Subject: [PATCH 111/131] add python version to about screen

---
 meshchat.py                                 | 2 ++
 src/frontend/components/about/AboutPage.vue | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index ca44997..a7a7b32 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -4,6 +4,7 @@ import argparse
 import io
 import json
 import os
+import platform
 import sys
 import threading
 import time
@@ -944,6 +945,7 @@ class ReticulumMeshChat:
                     "version": self.get_app_version(),
                     "lxmf_version": LXMF.__version__,
                     "rns_version": RNS.__version__,
+                    "python_version": platform.python_version(),
                     "storage_path": self.storage_path,
                     "database_path": self.database_path,
                     "database_file_size": os.path.getsize(self.database_path),
diff --git a/src/frontend/components/about/AboutPage.vue b/src/frontend/components/about/AboutPage.vue
index d12c96d..1a5bc36 100644
--- a/src/frontend/components/about/AboutPage.vue
+++ b/src/frontend/components/about/AboutPage.vue
@@ -12,7 +12,7 @@
                         <div class="mr-auto">
                             <div>Versions</div>
                             <div class="text-sm text-gray-700 dark:text-zinc-400">
-                                MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }}
+                                MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }} • Python v{{ appInfo.python_version }}
                             </div>
                         </div>
                         <div class="hidden sm:block mx-2 my-auto">

From ffe2cb884df5bf7a372f26cc6457e1d13c8bf79e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 28 Jul 2025 22:11:24 +1200
Subject: [PATCH 112/131] update aiohttp to v3.12.14

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 7b3f950..9a7c5c6 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,4 @@
-aiohttp>=3.9.5
+aiohttp>=3.12.14
 cx_freeze>=7.0.0
 lxmf>=0.8.0
 peewee>=3.17.3

From c9f4ef64c19d005f5612c90f808bb51bfd373e28 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 28 Jul 2025 22:34:39 +1200
Subject: [PATCH 113/131] update peewee to v3.18.1

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 9a7c5c6..5a6305e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.12.14
 cx_freeze>=7.0.0
 lxmf>=0.8.0
-peewee>=3.17.3
+peewee>=3.18.1
 rns>=1.0.0
 websockets>=14.2

From 002360399cbb517461e0bc366ee45255c754a1a5 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 1 Aug 2025 23:34:27 +1200
Subject: [PATCH 114/131] add docs

---
 src/frontend/components/messages/ConversationViewer.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index 8eea16a..3450705 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -1056,7 +1056,11 @@ export default {
                 if(this.newMessageImage){
                     imageTotalSize = this.newMessageImage.size;
                     fields["image"] = {
-                        // Reticulum sends image type as "jpg" or "png" and not "image/jpg" or "image/png"
+                        // Reticulum sends image type as "jpg", "png", "webp" etc and not "image/jpg" or "image/png"
+                        // From memory, Sideband would not display images if the image type has the "image/" prefix
+                        // https://github.com/markqvist/Sideband/blob/354fb08297835eab04ac69d15081a18baf0583ac/docs/example_plugins/view.py#L78
+                        // https://github.com/markqvist/Sideband/blob/354fb08297835eab04ac69d15081a18baf0583ac/sbapp/main.py#L1900
+                        // https://github.com/markqvist/Sideband/blob/354fb08297835eab04ac69d15081a18baf0583ac/sbapp/ui/messages.py#L783
                         "image_type": this.newMessageImage.type.replace("image/", ""),
                         "image_bytes": Utils.arrayBufferToBase64(await this.newMessageImage.arrayBuffer()),
                     };

From c2ee9be39a4304441883f93f94199815336d69d0 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 11 Nov 2025 22:56:57 +1300
Subject: [PATCH 115/131] update lxmf to v0.9.2

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 5a6305e..bc033f8 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.12.14
 cx_freeze>=7.0.0
-lxmf>=0.8.0
+lxmf>=0.9.2
 peewee>=3.18.1
 rns>=1.0.0
 websockets>=14.2

From e3dae8aea966462e81ea33c8d8bb09dac704ea71 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 11 Nov 2025 22:57:46 +1300
Subject: [PATCH 116/131] update rns to v1.0.2

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index bc033f8..ecf2d0d 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,5 @@ aiohttp>=3.12.14
 cx_freeze>=7.0.0
 lxmf>=0.9.2
 peewee>=3.18.1
-rns>=1.0.0
+rns>=1.0.2
 websockets>=14.2

From 011876bec5e9233030af62ccc17225d9f9de3bc2 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 11 Nov 2025 23:09:01 +1300
Subject: [PATCH 117/131] 2.3.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8bd17e5..c19ecb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "2.2.1",
+      "version": "2.3.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index 546432c..94911c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From 4ef57593e90bb053cab8acfb9d652b0a32a72f50 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 13 Mar 2026 00:28:07 +1300
Subject: [PATCH 118/131] update lxmf to v0.9.3

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index ecf2d0d..49df8d5 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.12.14
 cx_freeze>=7.0.0
-lxmf>=0.9.2
+lxmf>=0.9.3
 peewee>=3.18.1
 rns>=1.0.2
 websockets>=14.2

From 2c6d316801840294be785d70cd85f32be0f5e62d Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 13 Mar 2026 00:28:32 +1300
Subject: [PATCH 119/131] update rns to v1.1.4

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 49df8d5..838be55 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,5 @@ aiohttp>=3.12.14
 cx_freeze>=7.0.0
 lxmf>=0.9.3
 peewee>=3.18.1
-rns>=1.0.2
+rns>=1.1.4
 websockets>=14.2

From 42db0fdb232e7fb981e93682e5f9faa66b5e8cf8 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 13 Mar 2026 00:29:06 +1300
Subject: [PATCH 120/131] update websockets to v16.0

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 838be55..7404e75 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -3,4 +3,4 @@ cx_freeze>=7.0.0
 lxmf>=0.9.3
 peewee>=3.18.1
 rns>=1.1.4
-websockets>=14.2
+websockets>=16.0

From 946d113e699cc0d0d085c19bef359bdf29d4f26e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 13 Mar 2026 00:31:08 +1300
Subject: [PATCH 121/131] update aiohttp to v3.13.3

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 7404e75..fc679e6 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,4 @@
-aiohttp>=3.12.14
+aiohttp>=3.13.3
 cx_freeze>=7.0.0
 lxmf>=0.9.3
 peewee>=3.18.1

From 97be61e36c19ee4d43c9b1c225ac6850c8aafe27 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Fri, 13 Mar 2026 00:38:53 +1300
Subject: [PATCH 122/131] prevent peewee >=4.0.0 for now due to breaking
 changes with datetime field

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index fc679e6..22a94ea 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.13.3
 cx_freeze>=7.0.0
 lxmf>=0.9.3
-peewee>=3.18.1
+peewee>=3.18.1,<4.0.0
 rns>=1.1.4
 websockets>=16.0

From e49df24360b9febcbf97e3837e6351454a075a67 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 23 Mar 2026 12:41:50 +1300
Subject: [PATCH 123/131] ensure network_id is converted to hex in interface
 stats api response

---
 meshchat.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/meshchat.py b/meshchat.py
index a7a7b32..68ab43a 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1725,6 +1725,10 @@ class ReticulumMeshChat:
             if "transport_id" in interface_stats:
                 interface_stats["transport_id"] = interface_stats["transport_id"].hex()
 
+            # ensure network_id is hex as json_response can't serialize bytes
+            if "network_id" in interface_stats:
+                interface_stats["network_id"] = interface_stats["network_id"].hex()
+
             # ensure probe_responder is hex as json_response can't serialize bytes
             if "probe_responder" in interface_stats and interface_stats["probe_responder"] is not None:
                 interface_stats["probe_responder"] = interface_stats["probe_responder"].hex()

From 6b45c3239d03bce301e43ceccc88b3856bc9e68f Mon Sep 17 00:00:00 2001
From: Sergey Bubnov <omgbebebe@gmail.com>
Date: Sun, 5 Apr 2026 10:42:00 +0400
Subject: [PATCH 124/131] check if network_id is not None

---
 meshchat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 68ab43a..28d8ed5 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1726,7 +1726,7 @@ class ReticulumMeshChat:
                 interface_stats["transport_id"] = interface_stats["transport_id"].hex()
 
             # ensure network_id is hex as json_response can't serialize bytes
-            if "network_id" in interface_stats:
+            if "network_id" in interface_stats and interface_stats["network_id"]:
                 interface_stats["network_id"] = interface_stats["network_id"].hex()
 
             # ensure probe_responder is hex as json_response can't serialize bytes

From 3baa5cd19a92c22d1f6a2f11a53ce825e3d87453 Mon Sep 17 00:00:00 2001
From: Sergey Bubnov <omgbebebe@gmail.com>
Date: Sun, 5 Apr 2026 17:15:39 +0400
Subject: [PATCH 125/131] explicitly check for not None value

---
 meshchat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index 28d8ed5..b3207dc 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -1726,7 +1726,7 @@ class ReticulumMeshChat:
                 interface_stats["transport_id"] = interface_stats["transport_id"].hex()
 
             # ensure network_id is hex as json_response can't serialize bytes
-            if "network_id" in interface_stats and interface_stats["network_id"]:
+            if "network_id" in interface_stats and interface_stats["network_id"] is not None:
                 interface_stats["network_id"] = interface_stats["network_id"].hex()
 
             # ensure probe_responder is hex as json_response can't serialize bytes

From db264742732451c111da1132ae4fd338aa781107 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 6 Jul 2026 20:28:48 +1200
Subject: [PATCH 126/131] update lxmf to v1.0.1

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 22a94ea..7df1612 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 aiohttp>=3.13.3
 cx_freeze>=7.0.0
-lxmf>=0.9.3
+lxmf>=1.0.1
 peewee>=3.18.1,<4.0.0
 rns>=1.1.4
 websockets>=16.0

From f9d930ed87c5ddb30fa387569c3ddc7ae96e0669 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 6 Jul 2026 20:38:56 +1200
Subject: [PATCH 127/131] update rns to v1.3.7

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 7df1612..a72e138 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,5 @@ aiohttp>=3.13.3
 cx_freeze>=7.0.0
 lxmf>=1.0.1
 peewee>=3.18.1,<4.0.0
-rns>=1.1.4
+rns>=1.3.7
 websockets>=16.0

From ecb1efc5a4dbe06a8445a375b1b4be638b0d4895 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 6 Jul 2026 21:20:18 +1200
Subject: [PATCH 128/131] update from macos-13 to macos-15 build runner and add
 support for apple silicon builds

---
 .github/workflows/build.yml | 7 +++++--
 package.json                | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 18c3502..d517940 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -45,7 +45,10 @@ jobs:
           artifacts: "dist/*-win-installer.exe,dist/*-win-portable.exe"
 
   build_mac:
-    runs-on: macos-13
+    strategy:
+      matrix:
+        os: [ macos-15, macos-15-intel ]
+    runs-on: ${{ matrix.os }}
     permissions:
       contents: write
     steps:
@@ -80,7 +83,7 @@ jobs:
           replacesArtifacts: true
           omitDraftDuringUpdate: true
           omitNameDuringUpdate: true
-          artifacts: "dist/*-mac.dmg"
+          artifacts: "dist/*-mac-*.dmg"
 
   build_linux:
     runs-on: ubuntu-latest
diff --git a/package.json b/package.json
index 94911c3..fc6ecb7 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "mac": {
       "target": "dmg",
       "identity": null,
-      "artifactName": "ReticulumMeshChat-v${version}-${os}.${ext}",
+      "artifactName": "ReticulumMeshChat-v${version}-${os}-${arch}.${ext}",
       "extendInfo": {
         "NSMicrophoneUsageDescription": "Microphone access is only needed for Audio Calls",
         "com.apple.security.device.audio-input": true

From 45f89a8fca79f63501659d192577e880380e6cc0 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 6 Jul 2026 21:20:58 +1200
Subject: [PATCH 129/131] 2.4.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c19ecb2..2ebcf4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reticulum-meshchat",
-      "version": "2.3.0",
+      "version": "2.4.0",
       "license": "MIT",
       "dependencies": {
         "@mdi/js": "^7.4.47",
diff --git a/package.json b/package.json
index fc6ecb7..87ac588 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {

From 7e88277abdebc3c8a345b49da67973ac111028de Mon Sep 17 00:00:00 2001
From: Jascha <jaschadub@gmail.com>
Date: Fri, 14 Aug 2026 14:22:12 -0700
Subject: [PATCH 130/131] Stop message progress loop when message is rejected

The progress loop in handle_lxmf_message_progress upserts the message
to the database every second until it reaches a terminal state, but
REJECTED was missing from the stop conditions. A rejected message kept
re-inserting itself forever, so deleting the conversation history had
no effect and the message reappeared on page reload.
---
 meshchat.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/meshchat.py b/meshchat.py
index b3207dc..d574dda 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -3031,10 +3031,11 @@ class ReticulumMeshChat:
             has_delivered = lxmf_message.state == LXMF.LXMessage.DELIVERED
             has_propagated = lxmf_message.state == LXMF.LXMessage.SENT and lxmf_message.method == LXMF.LXMessage.PROPAGATED
             has_failed = lxmf_message.state == LXMF.LXMessage.FAILED
+            has_rejected = lxmf_message.state == LXMF.LXMessage.REJECTED
             is_cancelled = lxmf_message.state == LXMF.LXMessage.CANCELLED
 
             # check if we should stop updating
-            if has_delivered or has_propagated or has_failed or is_cancelled:
+            if has_delivered or has_propagated or has_failed or has_rejected or is_cancelled:
                 should_update_message = False
 
     # handle an announce received from reticulum, for an audio call address

From 3190f3e5a6f61c86341b21c8d65fddcd7e5862f5 Mon Sep 17 00:00:00 2001
From: Andreev Kirill Andreevich <andreev.gh2017@yandex.ru>
Date: Tue, 6 Oct 2026 21:52:10 +0300
Subject: [PATCH 131/131] Fix bug where toggling transport fails if reticulum
 config section is missing

Fixes #173

Signed-off-by: Andreev Kirill Andreevich <andreev.gh2017@yandex.ru>
---
 meshchat.py | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/meshchat.py b/meshchat.py
index d574dda..448c7a3 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -980,6 +980,10 @@ class ReticulumMeshChat:
         @routes.post("/api/v1/reticulum/enable-transport")
         async def index(request):
 
+            # ensure reticulum section exists
+            if "reticulum" not in self.reticulum.config:
+                self.reticulum.config["reticulum"] = {}
+
             # enable transport mode
             self.reticulum.config["reticulum"]["enable_transport"] = True
             self.reticulum.config.write()
@@ -992,6 +996,10 @@ class ReticulumMeshChat:
         @routes.post("/api/v1/reticulum/disable-transport")
         async def index(request):
 
+            # ensure reticulum section exists
+            if "reticulum" not in self.reticulum.config:
+                self.reticulum.config["reticulum"] = {}
+
             # disable transport mode
             self.reticulum.config["reticulum"]["enable_transport"] = False
             self.reticulum.config.write()