update

Add additional interfaces and interface options

.github/workflows/bearer.yml

@@ -0,0 +1,36 @@
+name: Security Scan
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+  schedule:
+    - cron: '0 0 * * 0'  # Run weekly on Sunday
+
+permissions:
+  contents: read
+  security-events: write
+
+jobs:
+  security-scan:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Bearer Security Scan
+        uses: bearer/bearer-action@v2
+        with:
+          scanner: sast
+          format: sarif
+          output: bearer.sarif
+          severity: critical,high
+          path: .
+          exit-code: 0
+          
+      - name: Upload SARIF results
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: bearer.sarif

.github/workflows/build.yml

@@ -149,9 +149,9 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           tags: |
-            ghcr.io/liamcottle/reticulum-meshchat:latest
-            ghcr.io/liamcottle/reticulum-meshchat:${{ github.ref_name }}
+            ghcr.io/sudo-ivan/reticulum-meshchat:latest
+            ghcr.io/sudo-ivan/reticulum-meshchat:${{ github.ref_name }}
           labels: |
             org.opencontainers.image.title=Reticulum MeshChat
             org.opencontainers.image.description=Docker image for Reticulum MeshChat
-            org.opencontainers.image.url=https://github.com/liamcottle/reticulum-meshchat/pkgs/container/reticulum-meshchat/
+            org.opencontainers.image.url=https://github.com/Sudo-Ivan/reticulum-meshchat/pkgs/container/reticulum-meshchat/

.github/workflows/manual-docker-build.yml

@@ -33,10 +33,10 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           tags: |
-            ghcr.io/liamcottle/reticulum-meshchat:latest
-            ghcr.io/liamcottle/reticulum-meshchat:${{ github.ref_name }}
+            ghcr.io/sudo-ivan/reticulum-meshchat:latest
+            ghcr.io/sudo-ivan/reticulum-meshchat:${{ github.ref_name }}
           labels: |
             org.opencontainers.image.title=Reticulum MeshChat
             org.opencontainers.image.description=Docker image for Reticulum MeshChat
-            org.opencontainers.image.url=https://github.com/liamcottle/reticulum-meshchat/pkgs/container/reticulum-meshchat/
+            org.opencontainers.image.url=https://github.com/Sudo-Ivan/reticulum-meshchat/pkgs/container/reticulum-meshchat/
 

.gitignore

@@ -9,3 +9,7 @@ node_modules
 
 # local storage
 storage/
+
+__pycache__/
+
+config/

Dockerfile

@@ -1,33 +1,51 @@
 # Build the frontend
-FROM node:20-bookworm-slim AS build-frontend
+FROM node:20-alpine AS build-frontend
 
 WORKDIR /src
 
 # Copy required source files
-COPY *.json .
-COPY *.js .
-COPY src/frontend ./src/frontend
+COPY --chown=node:node *.json .
+COPY --chown=node:node *.js .
+COPY --chown=node:node src/frontend ./src/frontend
 
-# Install NodeJS deps, exluding electron
+# Fix permissions and install NodeJS deps
+USER root
+RUN chown -R node:node /src
+USER node
 RUN npm install --omit=dev && \
   npm run build-frontend
 
 # Main app build
-FROM python:3.11-bookworm
+FROM python:3.13-alpine
 
 WORKDIR /app
 
-# Install Python deps
-COPY ./requirements.txt .
-RUN pip install -r requirements.txt
+# Install system dependencies
+RUN apk add --no-cache \
+    gcc \
+    musl-dev \
+    python3-dev \
+    libffi-dev \
+    openssl-dev
 
-# Copy prebuilt frontend
-COPY --from=build-frontend /src/public public
+# Create config directories with proper permissions
+RUN mkdir -p /config/.reticulum /config/.meshchat && \
+    chown -R 1000:1000 /config
+
+# Install Python deps
+COPY --chown=1000:1000 ./requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Create public directory and copy frontend
+RUN mkdir -p /app/public
+COPY --from=build-frontend --chown=1000:1000 /src/public/ /app/public/
 
 # Copy other required source files
-COPY *.py .
-COPY src/__init__.py ./src/__init__.py
-COPY src/backend ./src/backend
-COPY *.json .
+COPY --chown=1000:1000 *.py .
+COPY --chown=1000:1000 src/__init__.py ./src/__init__.py
+COPY --chown=1000:1000 src/backend ./src/backend
+COPY --chown=1000:1000 *.json .
 
-CMD ["python", "meshchat.py", "--host=0.0.0.0", "--reticulum-config-dir=/config/.reticulum", "--storage-dir=/config/.meshchat", "--headless"]
+USER 1000
+ENTRYPOINT ["python"]
+CMD ["meshchat.py", "--host=0.0.0.0", "--reticulum-config-dir=/config/.reticulum", "--storage-dir=/config/.meshchat", "--headless"]

README.md

@@ -1,3 +1,19 @@
+# Ivans Fork Edition
+
+## Containers
+
+- Drop unnecassary permissions
+- Rootless
+- Resource Limits
+- Alpine Image Variants
+
+## Security
+
+- Bearer Security Scan Action
+- [Socket](https://socket.dev/) Supply Chain Security/Analysis
+
+---
+
 <p align="center">
 <a href="https://github.com/liamcottle/reticulum-meshchat"><img src="./logo/logo-chat-bubble.png" width="150"></a>
 </p>
@@ -9,7 +25,7 @@
 <a href="https://twitter.com/liamcottle"><img src="https://img.shields.io/badge/Twitter-@liamcottle-%231DA1F2?style=flat&logo=twitter" alt="twitter"/></a>
 <br/>
 <a href="https://ko-fi.com/liamcottle"><img src="https://img.shields.io/badge/Donate%20a%20Coffee-liamcottle-yellow?style=flat&logo=buy-me-a-coffee" alt="donate on ko-fi"/></a>
-<a href="./donate.md"><img src="https://img.shields.io/badge/Donate%20Bitcoin-3FPBfiEwioWHFix3kZqe5bdU9F5o8mG8dh-%23FF9900?style=flat&logo=bitcoin" alt="donate bitcoin"/></a>
+<a href="./donate.md"><img src="https://img.shields.io/badge/Donate%20Bitcoin-bc1qy22smke8n4c54evdxmp7lpy9p0e6m9tavtlg2q-%23FF9900?style=flat&logo=bitcoin" alt="donate bitcoin"/></a>
 </p>
 
 ## What is Reticulum MeshChat?
@@ -283,20 +299,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
 

docker-compose.dev.yml

@@ -0,0 +1,40 @@
+services:
+  reticulum-meshchat:
+    container_name: reticulum-meshchat-dev
+    build:
+      context: .
+      dockerfile: Dockerfile
+    pull_policy: never
+    restart: unless-stopped
+    user: "1000:1000"
+    # Make the meshchat web interface accessible from the host on port 8000
+    ports:
+      - 0.0.0.0:8000:8000
+    volumes:
+      - meshchat-config:/config:rw
+      - .:/app:delegated
+      - /app/public
+    # Uncomment if you have a USB device connected, such as an RNode
+    # devices:
+    #   - /dev/ttyUSB0:/dev/ttyUSB0
+    cap_drop:
+      - ALL
+    cap_add:
+      - NET_ADMIN
+      - NET_RAW
+    deploy:
+      resources:
+        limits:
+          cpus: '1'
+          memory: 512M
+        reservations:
+          cpus: '0.25'
+          memory: 128M
+
+volumes:
+    meshchat-config:
+      driver: local
+      driver_opts:
+        type: none
+        o: bind
+        device: ${PWD}/config 

docker-compose.yml

@@ -1,17 +1,31 @@
 services:
   reticulum-meshchat:
     container_name: reticulum-meshchat
-    image: ghcr.io/liamcottle/reticulum-meshchat:latest
+    image: ghcr.io/sudo-ivan/reticulum-meshchat:latest
     pull_policy: always
     restart: unless-stopped
+    user: "1000:1000"
     # Make the meshchat web interface accessible from the host on port 8000
     ports:
       - 0.0.0.0:8000:8000
     volumes:
-      - meshchat-config:/config
+      - meshchat-config:/config:rw
     # Uncomment if you have a USB device connected, such as an RNode
     # devices:
     #   - /dev/ttyUSB0:/dev/ttyUSB0
+    cap_drop:
+      - ALL
+    cap_add:
+      - NET_ADMIN
+      - NET_RAW
+    deploy:
+      resources:
+        limits:
+          cpus: '1'
+          memory: 512M
+        reservations:
+          cpus: '0.25'
+          memory: 128M
 
 volumes:
     meshchat-config:

donate.md

@@ -4,7 +4,7 @@ Thank you for considering donating, this helps support my work on this project
 
 ## How can I donate?
 
-- Bitcoin: 3FPBfiEwioWHFix3kZqe5bdU9F5o8mG8dh
+- Bitcoin: bc1qy22smke8n4c54evdxmp7lpy9p0e6m9tavtlg2q
 - Ethereum: 0xc64CFbA5D0BF7664158c5671F64d446395b3bF3D
 - Buy me a Coffee: [https://ko-fi.com/liamcottle](https://ko-fi.com/liamcottle)
 - Sponsor on GitHub: [https://github.com/sponsors/liamcottle](https://github.com/sponsors/liamcottle)

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

meshchat.py

@@ -23,9 +23,13 @@ from serial.tools import list_ports
 
 import database
 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
 
 
 # NOTE: this is required to be able to pack our app with cxfreeze as an exe, otherwise it can't access bundled assets
@@ -266,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",
         })))
 
@@ -326,8 +330,29 @@ 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
@@ -440,94 +465,178 @@ class ReticulumMeshChat:
             if "enabled" not in interface_details and "interface_enabled" not in interface_details:
                 interface_details["interface_enabled"] = "true"
 
-            # handle tcp client interface
+            # handle AutoInterface
+            if interface_type == "AutoInterface":
+
+                # 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":
 
-                interface_target_host = data.get('target_host')
-                interface_target_port = data.get('target_port')
-
                 # 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)
 
-                interface_details["target_host"] = data.get('target_host')
-                interface_details["target_port"] = data.get('target_port')
+                # set required TCPClientInterface options
+                interface_details["target_host"] = interface_target_host
+                interface_details["target_port"] = interface_target_port
+
+                # 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":
+                interface_details['connectable'] = "True"
+                interface_details["peers"] = data.get('peers')
 
             # handle tcp server interface
             if interface_type == "TCPServerInterface":
 
-                interface_listen_ip = data.get('listen_ip')
-                interface_listen_port = data.get('listen_port')
-
                 # 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)
 
-                interface_details["listen_ip"] = data.get('listen_ip')
-                interface_details["listen_port"] = data.get('listen_port')
+                # set required TCPServerInterface options
+                interface_details["listen_ip"] = interface_listen_ip
+                interface_details["listen_port"] = interface_listen_port
+
+                # 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":
 
-                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')
-
                 # 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)
 
-                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')
+                # 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
 
-            # handle rnode interface
+                # set optional UDPInterface options
+                InterfaceEditor.update_value(interface_details, data, "device")
+
+            # handle RNodeInterface
             if interface_type == "RNodeInterface":
 
+                # 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
+                interface_details["txpower"] = interface_txpower
+                interface_details["spreadingfactor"] = interface_spreadingfactor
+                interface_details["codingrate"] = interface_codingrate
+
+                # 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":
+
+                # required settings
+                interface_port = data.get("port")
+                sub_interfaces = data.get("sub_interfaces", [])
 
                 # ensure port provided
                 if interface_port is None or interface_port == "":
@@ -535,42 +644,114 @@ class ReticulumMeshChat:
                         "message": "Port is required",
                     }, status=422)
 
-                # ensure frequency provided
-                if interface_frequency is None or interface_frequency == "":
+                # ensure sub interfaces provided
+                if not isinstance(sub_interfaces, list) or not sub_interfaces:
                     return web.json_response({
-                        "message": "Frequency is required",
-                    }, status=422)
-
-                # ensure bandwidth provided
-                if interface_bandwidth is None or interface_bandwidth == "":
-                    return web.json_response({
-                        "message": "Bandwidth is required",
-                    }, status=422)
-
-                # ensure txpower provided
-                if interface_txpower is None or interface_txpower == "":
-                    return web.json_response({
-                        "message": "TX power is required",
-                    }, status=422)
-
-                # ensure spreading factor provided
-                if interface_spreadingfactor is None or interface_spreadingfactor == "":
-                    return web.json_response({
-                        "message": "Spreading Factor is required",
-                    }, status=422)
-
-                # ensure coding rate provided
-                if interface_codingrate is None or interface_codingrate == "":
-                    return web.json_response({
-                        "message": "Coding Rate is required",
+                        "message": "At least one sub-interface is required",
                     }, status=422)
 
+                # set required RNodeMultiInterface options
                 interface_details["port"] = interface_port
-                interface_details["frequency"] = interface_frequency
-                interface_details["bandwidth"] = interface_bandwidth
-                interface_details["txpower"] = interface_txpower
-                interface_details["spreadingfactor"] = interface_spreadingfactor
-                interface_details["codingrate"] = interface_codingrate
+
+                # 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):
+
+                    # ensure required fields for sub-interface provided
+                    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) is None 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)}"
+                        }, status=422)
+
+                    sub_interface_name = sub_interface.get("name")
+                    interface_details[sub_interface_name] = {
+                        "interface_enabled": "true",
+                        "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 SerialInterface, KISSInterface, and AX25KISSInterface
+            if interface_type == "SerialInterface" or interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
+
+                # 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)
+
+                # set required options
+                interface_details["port"] = interface_port
+
+                # 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":
+
+                    # 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
+            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 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)
+
+                # set required options
+                interface_details["command"] = interface_command
+                interface_details["respawn_delay"] = interface_respawn_delay
+
+            # 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
@@ -581,180 +762,141 @@ class ReticulumMeshChat:
 
             if allow_overwriting_interface:
                 return web.json_response({
-                    "message": "Interface has been saved",
+                    "message": "Interface has been saved. Please restart MeshChat for these changes to take effect.",
                 })
             else:
                 return web.json_response({
-                    "message": "Interface has been added",
+                    "message": "Interface has been added. Please restart MeshChat for these changes to take effect.",
                 })
         
-                # export interfaces
-        @routes.get("/api/v1/reticulum/interfaces/export")
+        # export interfaces
+        @routes.post("/api/v1/reticulum/interfaces/export")
         async def export_interfaces(request):
             try:
+
+                # get request data
+                selected_interface_names = None
+                try:
+                    data = await request.json()
+                    selected_interface_names = data.get('selected_interface_names')
+                except:
+                    # request data was not json, but we don't care
+                    pass
+
+                # format interfaces for export
                 output = []
-                for name, interface in self.reticulum.config["interfaces"].items():
-                    output.append(f"[[{name}]]")
+                for interface_name, interface in self.reticulum.config["interfaces"].items():
+
+                    # skip interface if not selected
+                    if selected_interface_names is not None and selected_interface_names != "":
+                        if interface_name not in selected_interface_names:
+                            continue
+
+                    # 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
+                    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",
                     headers={
-                        "Content-Disposition": "attachment; filename=reticulum_interfaces"
+                        "Content-Disposition": "attachment; filename=meshchat_interfaces"
                     }
                 )
+
             except Exception as e:
-                print(f"Export error: {str(e)}")
                 return web.json_response({
                     "message": f"Failed to export interfaces: {str(e)}"
                 }, status=500)
 
         # preview importable interfaces
-        @routes.post("/api/v1/reticulum/interfaces/preview")
-        async def preview_interfaces(request):
+        @routes.post("/api/v1/reticulum/interfaces/import-preview")
+        async def import_interfaces_preview(request):
             try:
-                reader = await request.multipart()
-                
-                field = await reader.next()
-                if field.name == 'config':
-                    config_text = ''
-                    while True:
-                        chunk = await field.read_chunk()
-                        if not chunk:
-                            break
-                        config_text += chunk.decode('utf-8')
-                
-                interfaces = []
-                current_interface = None
-                
-                for line in config_text.splitlines():
-                    line = line.strip()
-                    if not line or line.startswith("#"):
-                        continue
-                        
-                    if line.startswith("[[") and line.endswith("]]"):
-                        if current_interface:
-                            interfaces.append(current_interface)
-                        name = line[2:-2]
-                        current_interface = {
-                            "name": name,
-                            "type": None
-                        }
-                    elif current_interface is not None and "=" in line:
-                        key, value = [x.strip() for x in line.split("=", 1)]
-                        if key == "type":
-                            current_interface["type"] = value
-                
-                if current_interface:
-                    interfaces.append(current_interface)
+
+                # get request data
+                data = await request.json()
+                config = data.get('config')
+
+                # parse interfaces from config
+                interfaces = InterfaceConfigParser.parse(config)
                     
                 return web.json_response({
                     "interfaces": interfaces
                 })
                 
             except Exception as e:
-                print(f"Preview error: {str(e)}")
                 return web.json_response({
                     "message": f"Failed to parse config file: {str(e)}"
                 }, status=500)
+
         # import interfaces from config
         @routes.post("/api/v1/reticulum/interfaces/import")
         async def import_interfaces(request):
             try:
-                reader = await request.multipart()
-                config_text = None
-                selected_interfaces = None
-                
-                while True:
-                    field = await reader.next()
-                    if field is None:
-                        break
-                        
-                    if field.name == 'config':
-                        config_text = ''
-                        while True:
-                            chunk = await field.read_chunk()
-                            if not chunk:
-                                break
-                            config_text += chunk.decode('utf-8')
-                    elif field.name == 'selected_interfaces':
-                        data = await field.read(decode=True)
-                        selected_interfaces = json.loads(data)
-                
-                print(f"Selected interfaces: {selected_interfaces}")
-                current_interface = None
+
+                # get request data
+                data = await request.json()
+                config = data.get('config')
+                selected_interface_names = data.get('selected_interface_names')
+
+                # parse interfaces from config
+                interfaces = InterfaceConfigParser.parse(config)
+
+                # find selected interfaces
+                selected_interfaces = []
+                for interface in interfaces:
+                    if interface["name"] in selected_interface_names:
+                        selected_interfaces.append(interface)
+
+                # convert interfaces to object
                 interface_config = {}
-                
-                for line in config_text.splitlines():
-                    line = line.strip()
-                    if not line: 
-                        continue
-                    
-                    if line.startswith("[[") and line.endswith("]]"):
-                        if current_interface and current_interface["name"] in selected_interfaces:
-                            name = current_interface["name"]
-                            interface_config[name] = {
-                                "type": current_interface.get("type"),
-                                "interface_enabled": "true",
-                                "target_host": current_interface.get("target_host"),
-                                "target_port": current_interface.get("target_port"),
-                                "listen_ip": current_interface.get("listen_ip"),
-                                "listen_port": current_interface.get("listen_port"),
-                                "forward_ip": current_interface.get("forward_ip"),
-                                "forward_port": current_interface.get("forward_port"),
-                                "port": current_interface.get("port"),
-                                "frequency": current_interface.get("frequency"),
-                                "bandwidth": current_interface.get("bandwidth"),
-                                "txpower": current_interface.get("txpower"),
-                                "spreadingfactor": current_interface.get("spreadingfactor"),
-                                "codingrate": current_interface.get("codingrate")
-                            }
-                            interface_config[name] = {k: v for k, v in interface_config[name].items() if v is not None}
-                        
-                        name = line[2:-2]
-                        current_interface = {"name": name}
-                    elif current_interface is not None and "=" in line:
-                        key, value = [x.strip() for x in line.split("=", 1)]
-                        value = value.strip('"').strip("'")
-                        current_interface[key] = value
-                
-                if current_interface and current_interface["name"] in selected_interfaces:
-                    name = current_interface["name"]
-                    interface_config[name] = {
-                        "type": current_interface.get("type"),
-                        "interface_enabled": "true",
-                        "target_host": current_interface.get("target_host"),
-                        "target_port": current_interface.get("target_port"),
-                        "listen_ip": current_interface.get("listen_ip"),
-                        "listen_port": current_interface.get("listen_port"),
-                        "forward_ip": current_interface.get("forward_ip"),
-                        "forward_port": current_interface.get("forward_port"),
-                        "port": current_interface.get("port"),
-                        "frequency": current_interface.get("frequency"),
-                        "bandwidth": current_interface.get("bandwidth"),
-                        "txpower": current_interface.get("txpower"),
-                        "spreadingfactor": current_interface.get("spreadingfactor"),
-                        "codingrate": current_interface.get("codingrate")
-                    }
-                    interface_config[name] = {k: v for k, v in interface_config[name].items() if v is not None}
-                
+                for interface in selected_interfaces:
+
+                    # add interface and keys/values
+                    interface_name = interface["name"]
+                    interface_config[interface_name] = {}
+                    for key, value in interface.items():
+                        interface_config[interface_name][key] = value
+
+                    # unset name which isn't part of the config
+                    del interface_config[interface_name]["name"]
+
+                    # force imported interface to be enabled by default
+                    interface_config[interface_name]["interface_enabled"] = "true"
+
+                    # remove enabled config value in favour of interface_enabled
+                    if "enabled" in interface_config[interface_name]:
+                        del interface_config[interface_name]["enabled"]
+
                 # update reticulum config with new interfaces
                 self.reticulum.config["interfaces"].update(interface_config)
-                print("Final interfaces config:", self.reticulum.config["interfaces"])
                 self.reticulum.config.write()
-                return web.json_response({"message": "Interfaces imported successfully"})
+
+                return web.json_response({
+                    "message": "Interfaces imported successfully",
+                })
                 
             except Exception as e:
-                print(f"Import error: {str(e)}")
-                print(f"Config text: {config_text}")
                 return web.json_response({
                     "message": f"Failed to import interfaces: {str(e)}"
                 }, status=500)
 
-
         # handle websocket clients
         @routes.get("/ws")
         async def ws(request):
@@ -830,6 +972,30 @@ class ReticulumMeshChat:
                 "config": self.get_config_dict(),
             })
 
+        # enable transport mode
+        @routes.post("/api/v1/reticulum/enable-transport")
+        async def index(request):
+
+            # enable transport mode
+            self.reticulum.config["reticulum"]["enable_transport"] = True
+            self.reticulum.config.write()
+
+            return web.json_response({
+                "message": "Transport has been enabled. MeshChat must be restarted for this change to take effect.",
+            })
+
+        # disable transport mode
+        @routes.post("/api/v1/reticulum/disable-transport")
+        async def index(request):
+
+            # disable transport mode
+            self.reticulum.config["reticulum"]["enable_transport"] = False
+            self.reticulum.config.write()
+
+            return web.json_response({
+                "message": "Transport has been disabled. MeshChat must be restarted for this change to take effect.",
+            })
+
         # get calls
         @routes.get("/api/v1/calls")
         async def index(request):
@@ -949,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
@@ -958,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
@@ -1032,6 +1198,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
@@ -1045,6 +1212,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)
@@ -1562,6 +1733,30 @@ class ReticulumMeshChat:
                     "message": "Sending Failed: {}".format(str(e)),
                 }, status=503)
 
+        # cancel sending lxmf message
+        @routes.post("/api/v1/lxmf-messages/{hash}/cancel")
+        async def index(request):
+
+            # get path params
+            hash = request.match_info.get("hash", None)
+
+            # convert hash to bytes
+            hash_as_bytes = bytes.fromhex(hash)
+
+            # cancel outbound message by lxmf message hash
+            self.message_router.cancel_outbound(hash_as_bytes)
+
+            # get lxmf message from database
+            lxmf_message = None
+            db_lxmf_message = database.LxmfMessage.get_or_none(database.LxmfMessage.hash == hash)
+            if db_lxmf_message is not None:
+                lxmf_message = self.convert_db_lxmf_message_to_dict(db_lxmf_message)
+
+            return web.json_response({
+                "message": "ok",
+                "lxmf_message": lxmf_message,
+            })
+
         # delete lxmf message
         @routes.delete("/api/v1/lxmf-messages/{hash}")
         async def index(request):
@@ -1864,6 +2059,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 "{}":
@@ -1879,17 +2075,20 @@ class ReticulumMeshChat:
         
         return data
 
-
-
-
     # handle data received from websocket client
     async def on_websocket_data_received(self, client, data):
 
         # 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"]
@@ -1909,7 +2108,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",
@@ -1922,7 +2121,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",
@@ -1934,7 +2133,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",
@@ -1984,7 +2183,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",
@@ -1996,7 +2195,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",
@@ -2008,7 +2207,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",
@@ -2057,6 +2256,7 @@ class ReticulumMeshChat:
             "identity_hash": self.identity.hexhash,
             "lxmf_address_hash": self.local_lxmf_destination.hexhash,
             "audio_call_address_hash": self.audio_call_manager.audio_call_receiver.destination.hexhash,
+            "is_transport_enabled": self.reticulum.transport_enabled(),
             "auto_announce_enabled": self.config.auto_announce_enabled.get(),
             "auto_announce_interval_seconds": self.config.auto_announce_interval_seconds.get(),
             "last_announced_at": self.config.last_announced_at.get(),
@@ -2215,6 +2415,10 @@ class ReticulumMeshChat:
             lxmf_message_state = "sent"
         elif lxmf_message.state == LXMF.LXMessage.DELIVERED:
             lxmf_message_state = "delivered"
+        elif lxmf_message.state == LXMF.LXMessage.REJECTED:
+            lxmf_message_state = "rejected"
+        elif lxmf_message.state == LXMF.LXMessage.CANCELLED:
+            lxmf_message_state = "cancelled"
         elif lxmf_message.state == LXMF.LXMessage.FAILED:
             lxmf_message_state = "failed"
 
@@ -2353,6 +2557,19 @@ class ReticulumMeshChat:
     def on_lxmf_delivery(self, lxmf_message: LXMF.LXMessage):
         try:
 
+            # check if this lxmf message contains a telemetry request command from sideband
+            is_sideband_telemetry_request = False
+            lxmf_fields = lxmf_message.get_fields()
+            if LXMF.FIELD_COMMANDS in lxmf_fields:
+                for command in lxmf_fields[LXMF.FIELD_COMMANDS]:
+                    if SidebandCommands.TELEMETRY_REQUEST in command:
+                        is_sideband_telemetry_request = True
+
+            # ignore telemetry requests from sideband
+            if is_sideband_telemetry_request:
+                print("Ignoring received LXMF message as it is a telemetry request command")
+                return
+
             # upsert lxmf message to database
             self.db_upsert_lxmf_message(lxmf_message)
 
@@ -2376,7 +2593,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),
             })))
@@ -2392,7 +2609,7 @@ class ReticulumMeshChat:
         self.db_upsert_lxmf_message(lxmf_message)
 
         # send lxmf message state to all websocket clients
-        asyncio.run(self.websocket_broadcast(json.dumps({
+        AsyncUtils.run_async(self.websocket_broadcast(json.dumps({
             "type": "lxmf_message_state_updated",
             "lxmf_message": self.convert_lxmf_message_to_dict(lxmf_message),
         })))
@@ -2636,7 +2853,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
 
@@ -2664,9 +2881,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
@@ -2685,7 +2903,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),
         })))
@@ -2706,14 +2924,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
@@ -2731,7 +2949,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),
         })))
@@ -2815,7 +3033,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),
         })))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.17.0",
+  "version": "1.21.0",
   "description": "",
   "main": "electron/main.js",
   "scripts": {
@@ -96,22 +96,23 @@
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "@tailwindcss/forms": "^0.5.9",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^5.2.4",
     "autoprefixer": "^10.4.20",
-    "axios": "^1.7.9",
+    "axios": "^1.9.0",
     "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",
-    "protobufjs": "^7.4.0",
+    "protobufjs": "^7.5.1",
     "tailwindcss": "^3.4.17",
     "vis-data": "^7.1.9",
     "vis-network": "^9.1.9",
-    "vite": "^6.0.5",
+    "vite": "^6.3.5",
     "vite-plugin-vuetify": "^2.0.4",
-    "vue-router": "^4.5.0",
-    "vuetify": "^3.7.6"
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.8.4"
   }
 }

requirements.txt

@@ -1,6 +1,6 @@
-aiohttp>=3.9.5
+aiohttp>=3.11.18
 cx_freeze>=7.0.0
-lxmf>=0.5.8
-peewee>=3.17.3
-rns>=0.8.8
-websockets>=12.0
+lxmf>=0.6.3
+peewee>=3.18.1
+rns>=0.9.5
+websockets>=15.0.1

src/backend/async_utils.py

@@ -0,0 +1,25 @@
+import asyncio
+
+
+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
+    @staticmethod
+    def run_async(coroutine):
+
+        # 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
+
+        # 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)
+            return
+
+        # otherwise start a new event loop to run the coroutine
+        asyncio.run(coroutine)

src/backend/interface_config_parser.py

@@ -0,0 +1,31 @@
+import RNS.vendor.configobj
+
+
+class InterfaceConfigParser:
+
+    @staticmethod
+    def parse(text):
+
+        # 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 = []
+        for interface_name in config_interfaces:
+
+            # ensure interface has a name
+            interface_config = config_interfaces[interface_name]
+            interface_config["name"] = interface_name
+            interfaces.append(interface_config)
+
+        return interfaces

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]

src/backend/interfaces/WebsocketClientInterface.py

@@ -0,0 +1,134 @@
+import threading
+import time
+
+import RNS
+from RNS.Interfaces.Interface import Interface
+from websockets.sync.client import connect
+from websockets.sync.connection import Connection
+
+
+class WebsocketClientInterface(Interface):
+
+    # TODO: required?
+    DEFAULT_IFAC_SIZE = 16
+
+    RECONNECT_DELAY_SECONDS = 5
+
+    def __str__(self):
+        return f"WebsocketClientInterface[{self.name}/{self.target_url}]"
+
+    def __init__(self, owner, configuration, websocket: Connection = None):
+
+        super().__init__()
+
+        self.owner = owner
+        self.parent_interface = None
+
+        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_url = ifconf.get("target_url", None)
+
+        # 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
+        if self.websocket is None:
+            thread = threading.Thread(target=self.connect)
+            thread.daemon = True
+            thread.start()
+
+    # 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 offline or detached
+        if not self.online or self.detached:
+            return
+
+        # send to websocket server
+        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):
+
+        # do nothing if interface is detached
+        if self.detached:
+            return
+
+        # connect to websocket server
+        try:
+            RNS.log(f"Connecting to Websocket for {str(self)}...", RNS.LOG_DEBUG)
+            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:
+            RNS.log(f"{self} failed with error: {e}", RNS.LOG_ERROR)
+
+        # auto reconnect after delay
+        RNS.log(f"Websocket disconnected for {str(self)}...", RNS.LOG_DEBUG)
+        time.sleep(self.RECONNECT_DELAY_SECONDS)
+        self.connect()
+
+    def read_loop(self):
+
+        self.online = True
+
+        try:
+            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
+
+    def detach(self):
+
+        # 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

src/backend/interfaces/WebsocketServerInterface.py

@@ -0,0 +1,156 @@
+import threading
+import time
+
+import RNS
+from RNS.Interfaces.Interface import Interface
+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
+
+
+class WebsocketServerInterface(Interface):
+
+    # TODO: required?
+    DEFAULT_IFAC_SIZE = 16
+
+    RESTART_DELAY_SECONDS = 5
+
+    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.server: Server | None = None
+        self.spawned_interfaces: [WebsocketClientInterface] = []
+
+        # 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=self.serve)
+        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:
+            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())
+
+    # do nothing as the spawned child interface will take care of rx/tx
+    def process_incoming(self, data):
+        pass
+
+    # do nothing as the spawned child interface will take care of rx/tx
+    def process_outgoing(self, data):
+        pass
+
+    def serve(self):
+
+        # handle new websocket client connections
+        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 implement?
+            spawned_interface.announce_rate_target = None
+            spawned_interface.announce_rate_grace = None
+            spawned_interface.announce_rate_penalty = None
+
+            # 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
+            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:
+            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
+                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
+        self.online = False
+        RNS.log(f"Websocket server stopped for {str(self)}...", RNS.LOG_DEBUG)
+        time.sleep(self.RESTART_DELAY_SECONDS)
+        self.serve()
+
+    def detach(self):
+
+        # 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

src/backend/sideband_commands.py

@@ -0,0 +1,3 @@
+# https://github.com/markqvist/Sideband/blob/e515889e210037f881c201e0d627a7b09a48eb69/sbapp/sideband/sense.py#L11
+class SidebandCommands:
+    TELEMETRY_REQUEST = 0x01

src/frontend/components/DropDownMenu.vue

@@ -14,7 +14,7 @@
             leave-active-class="transition ease-in duration-75"
             leave-from-class="transform opacity-100 scale-100"
             leave-to-class="transform opacity-0 scale-95">
-            <div v-if="isShowingMenu" @click.stop="hideMenu" class="overflow-hidden absolute right-0 z-10 mr-4 w-56 rounded-md bg-white shadow-md border border-gray-200 focus:outline-none" :class="[ dropdownClass ]">
+            <div v-if="isShowingMenu" @click.stop="hideMenu" class="overflow-hidden absolute right-0 z-10 mr-4 w-56 rounded-md bg-white shadow-md border border-gray-200 focus:outline-none dark:border-zinc-700" :class="[ dropdownClass ]">
                 <slot name="items"/>
             </div>
         </Transition>

src/frontend/components/DropDownMenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cursor-pointer flex p-3 space-x-2 text-sm text-gray-500 hover:bg-gray-100">
+    <div class="cursor-pointer flex p-3 space-x-2 text-sm bg-white text-gray-500 hover:bg-gray-100 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700">
         <slot/>
     </div>
 </template>

src/frontend/components/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <button type="button" class="p-2 rounded-full text-gray-700 bg-gray-100 hover:bg-gray-200">
+    <button type="button" class="text-gray-700 bg-gray-100 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 hover:bg-gray-200 p-2 rounded-full">
         <slot/>
     </button>
 </template>

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'
             ]" 

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>

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>

src/frontend/components/interfaces/ExpandingSection.vue

@@ -0,0 +1,35 @@
+<template>
+    <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 text-gray-600 dark:text-gray-300">
+                    <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" fill="currentColor"/>
+                    </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>

src/frontend/components/interfaces/ImportInterfacesModal.vue

@@ -0,0 +1,240 @@
+<template>
+    <div v-if="isShowing" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity flex items-center justify-center">
+        <div class="flex w-full h-full p-4 overflow-y-auto">
+            <div v-click-outside="dismiss" class="my-auto mx-auto w-full bg-white dark:bg-zinc-900 rounded-lg shadow-xl max-w-2xl">
+
+                <!-- title -->
+                <div class="p-4 border-b dark:border-zinc-700">
+                    <h3 class="text-lg font-semibold dark:text-white">Import Interfaces</h3>
+                </div>
+
+                <!-- content -->
+                <div class="divide-y dark:divide-zinc-700">
+
+                    <!-- file input -->
+                    <div class="p-2">
+                        <div>
+                            <input ref="import-interfaces-file-input" type="file" @change="onFileSelected" accept="*" class="w-full text-sm text-gray-500 dark:text-zinc-400">
+                        </div>
+                        <div v-if="!selectedFile" class="mt-2 text-sm text-gray-700 dark:text-zinc-200">
+                            <ul class="list-disc list-inside">
+                                <li>You can import interfaces from a ~/.reticulum/config file.</li>
+                                <li>You can import interfaces from an exported interfaces file.</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- select interfaces -->
+                    <div v-if="importableInterfaces.length > 0" class="divide-y dark:divide-zinc-700">
+                        <div class="flex p-2">
+                            <div class="my-auto mr-auto text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</div>
+                            <div class="my-auto space-x-2">
+                                <button @click="selectAllInterfaces" class="text-sm text-blue-500 hover:underline">Select All</button>
+                                <button @click="deselectAllInterfaces" class="text-sm text-blue-500 hover:underline">Deselect All</button>
+                            </div>
+                        </div>
+                        <div class="bg-gray-200 p-2 space-y-2 max-h-80 overflow-y-auto dark:bg-zinc-800">
+                            <div @click="toggleSelectedInterface(iface.name)" v-for="iface in importableInterfaces" :key="iface.name" class="bg-white cursor-pointer flex items-center p-2 border rounded shadow dark:bg-zinc-900 dark:border-zinc-700">
+                                <div class="mr-auto text-sm">
+                                    <div class="font-semibold text-gray-700 dark:text-zinc-100">{{ iface.name }}</div>
+                                    <div class="text-sm text-gray-500 dark:text-zinc-100">
+
+                                        <!-- auto interface -->
+                                        <div v-if="iface.type === 'AutoInterface'">
+                                            <div>{{ iface.type }}</div>
+                                            <div>Ethernet and WiFi</div>
+                                        </div>
+
+                                        <!-- tcp client interface -->
+                                        <div v-else-if="iface.type === 'TCPClientInterface'">
+                                            <div>{{ iface.type }}</div>
+                                            <div>{{ iface.target_host }}:{{ iface.target_port }}</div>
+                                        </div>
+
+                                        <!-- tcp server interface -->
+                                        <div v-else-if="iface.type === 'TCPServerInterface'">
+                                            <div>{{ iface.type }}</div>
+                                            <div>{{ iface.listen_ip }}:{{ iface.listen_port }}</div>
+                                        </div>
+
+                                        <!-- udp interface -->
+                                        <div v-else-if="iface.type === 'UDPInterface'">
+                                            <div>{{ iface.type }}</div>
+                                            <div>Listen: {{ iface.listen_ip }}:{{ iface.listen_port }}</div>
+                                            <div>Forward: {{ iface.forward_ip }}:{{ iface.forward_port }}</div>
+                                        </div>
+
+                                        <!-- rnode interface details -->
+                                        <div v-else-if="iface.type === 'RNodeInterface'">
+                                            <div>{{ iface.type }}</div>
+                                            <div>Port: {{ iface.port }}</div>
+                                            <div>Frequency: {{ formatFrequency(iface.frequency) }}</div>
+                                            <div>Bandwidth: {{ formatFrequency(iface.bandwidth) }}</div>
+                                            <div>Spreading Factor: {{ iface.spreadingfactor }}</div>
+                                            <div>Coding Rate: {{ iface.codingrate }}</div>
+                                            <div>Transmit Power: {{ iface.txpower }}dBm</div>
+                                        </div>
+
+                                        <!-- other interface types -->
+                                        <div v-else>{{ iface.type }}</div>
+
+                                    </div>
+                                </div>
+                                <input @click.stop type="checkbox" v-model="selectedInterfaces" :value="iface.name" class="mx-2 h-4 w-4 text-blue-600 rounded border-gray-300 dark:border-zinc-600">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- actions -->
+                <div class="p-4 border-t dark:border-zinc-700 flex justify-end space-x-2">
+                    <button @click="dismiss" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-600 dark:hover:bg-zinc-700">
+                        Cancel
+                    </button>
+                    <button @click="importSelectedInterfaces" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
+                        Import Selected
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import DialogUtils from "../../js/DialogUtils";
+import Utils from "../../js/Utils";
+
+export default {
+    name: "ImportInterfacesModal",
+    emits: [
+        "dismissed",
+    ],
+    data() {
+        return {
+            isShowing: false,
+            selectedFile: null,
+            importableInterfaces: [],
+            selectedInterfaces: [],
+        };
+    },
+    methods: {
+        show() {
+            this.isShowing = true;
+            this.selectedFile = null;
+            this.importableInterfaces = [];
+            this.selectedInterfaces = [];
+        },
+        dismiss() {
+            this.isShowing = false;
+            this.$emit("dismissed");
+        },
+        clearSelectedFile() {
+            this.selectedFile = null;
+            this.$refs["import-interfaces-file-input"].value = null;
+        },
+        async onFileSelected(event) {
+
+            // get selected file
+            const file = event.target.files[0];
+            if(!file){
+                return;
+            }
+
+            // update ui
+            this.selectedFile = file;
+            this.importableInterfaces = [];
+            this.selectedInterfaces = [];
+
+            try {
+
+                // fetch preview of interfaces to import
+                const response = await window.axios.post('/api/v1/reticulum/interfaces/import-preview', {
+                    config: await file.text(),
+                });
+
+                // ensure there are some interfaces available to import
+                if(!response.data.interfaces || response.data.interfaces.length === 0){
+                    this.clearSelectedFile();
+                    DialogUtils.alert("No interfaces were found in the selected configuration file");
+                    return;
+                }
+
+                // update ui
+                this.importableInterfaces = response.data.interfaces;
+
+                // auto select all interfaces
+                this.selectAllInterfaces();
+
+            } catch(e) {
+                this.clearSelectedFile();
+                DialogUtils.alert("Failed to parse configuration file");
+                console.error(e);
+            }
+        },
+        isInterfaceSelected(name) {
+            return this.selectedInterfaces.includes(name);
+        },
+        selectInterface(name) {
+            if(!this.isInterfaceSelected(name)){
+                this.selectedInterfaces.push(name);
+            }
+        },
+        deselectInterface(name) {
+            this.selectedInterfaces = this.selectedInterfaces.filter((selectedInterfaceName) => {
+                return selectedInterfaceName !== name;
+            });
+        },
+        toggleSelectedInterface(name) {
+            if(this.isInterfaceSelected(name)){
+                this.deselectInterface(name);
+            } else {
+                this.selectInterface(name);
+            }
+        },
+        selectAllInterfaces() {
+            this.selectedInterfaces = this.importableInterfaces.map(i => i.name);
+        },
+        deselectAllInterfaces() {
+            this.selectedInterfaces = [];
+        },
+        async importSelectedInterfaces() {
+
+            // ensure user selected a file to import from
+            if(!this.selectedFile){
+                DialogUtils.alert("Please select a configuration file");
+                return;
+            }
+
+            // ensure user selected some interfaces
+            if(this.selectedInterfaces.length === 0){
+                DialogUtils.alert("Please select at least one interface to import");
+                return;
+            }
+
+            try {
+
+                // import interfaces
+                await window.axios.post('/api/v1/reticulum/interfaces/import', {
+                    config: await this.selectedFile.text(),
+                    selected_interface_names: this.selectedInterfaces,
+                });
+
+                // dismiss modal
+                this.dismiss();
+
+                // tell user interfaces were imported
+                DialogUtils.alert("Interfaces imported successfully. MeshChat must be restarted for these changes to take effect.");
+
+            } catch(e) {
+                const message = e.response?.data?.message || "Failed to import interfaces";
+                DialogUtils.alert(message);
+                console.error(e);
+            }
+        },
+        formatFrequency(hz) {
+            return Utils.formatFrequency(hz);
+        },
+    },
+}
+</script>

src/frontend/components/interfaces/Interface.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="border rounded bg-white shadow overflow-hidden dark:bg-zinc-800 dark:border-zinc-700">
+    <div class="border rounded bg-white shadow dark:bg-zinc-800 dark:border-zinc-700">
 
         <!-- IFAC info -->
         <div v-if="iface._stats?.ifac_signature != null" class="bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-b dark:bg-zinc-800  dark:border-zinc-700">
@@ -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>
@@ -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>
@@ -48,34 +56,22 @@
                 <div class="text-sm flex space-x-1 dark:text-zinc-100">
 
                     <!-- auto interface -->
-                    <span v-if="iface.type === 'AutoInterface'">
+                    <div v-if="iface.type === 'AutoInterface'">
                         {{ iface.type }} • Ethernet and WiFi
-                    </span>
+                    </div>
 
                     <!-- tcp client interface -->
-                    <span v-else-if="iface.type === 'TCPClientInterface'">
+                    <div v-else-if="iface.type === 'TCPClientInterface'">
                         {{ iface.type }} • {{ iface.target_host }}:{{ iface.target_port }}
-                    </span>
+                    </div>
 
                     <!-- tcp server interface -->
-                    <span v-else-if="iface.type === 'TCPServerInterface'">
+                    <div v-else-if="iface.type === 'TCPServerInterface'">
                         {{ iface.type }} • {{ iface.listen_ip }}:{{ iface.listen_port }}
-                    </span>
+                    </div>
 
-                    <!-- udp interface -->
-                    <span v-else-if="iface.type === 'UDPInterface'">
-                        {{ iface.type }} • {{ iface.listen_ip }}:{{ iface.listen_port }} • {{ iface.forward_ip }}:{{ iface.forward_port }}
-                    </span>
-
-                    <!-- rnode interface details -->
-                    <span v-else-if="iface.type === 'RNodeInterface'">
-                       {{ iface.type }} • {{ iface.port }} • freq={{ iface.frequency }} • bw={{ iface.bandwidth }} • power={{ iface.txpower }}dBm • sf={{ iface.spreadingfactor }} • cr={{ iface.codingrate }}
-                    </span>
-
-                    <!-- unknown interface types -->
-                    <span v-else>
-                       {{ iface.type ?? 'Unknown Interface Type' }}
-                    </span>
+                    <!-- other interface types -->
+                    <div v-else>{{ iface.type }}</div>
 
                 </div>
             </div>
@@ -96,7 +92,7 @@
                     </span>
                 </button>
                 <button v-else @click="enableInterface" type="button" class="cursor-pointer">
-                    <span class="flex text-gray-700 bg-gray-100 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 hover:bg-gray-200 p-2 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 rounded-full">
+                    <span class="flex text-gray-700 bg-gray-100 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 hover:bg-gray-200 p-2 rounded-full">
                         <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="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                         </svg>
@@ -104,31 +100,91 @@
                 </button>
             </div>
 
-            <!-- edit interface button -->
-            <div class="my-auto mr-1">
-                <button @click="editInterface" type="button" class="cursor-pointer">
-                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 rounded-full ">
-                        <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
-                        </svg>
-                    </span>
-                </button>
-            </div>
-
-            <!-- delete interface button -->
             <div class="my-auto mr-2">
-                <button @click="deleteInterface" type="button" class="cursor-pointer">
-                    <span class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500 rounded-full">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                        </svg>
-                    </span>
-                </button>
+                <DropDownMenu>
+                    <template v-slot:button>
+                        <IconButton>
+                            <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>
+
+                        <!-- enable/disable interface button -->
+                        <div class="border-b dark:border-zinc-700">
+
+                            <!-- enable interface button -->
+                            <DropDownMenuItem v-if="isInterfaceEnabled(iface)" @click="disableInterface">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                    <path fill-rule="evenodd" d="M12 2.25a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM6.166 5.106a.75.75 0 0 1 0 1.06 8.25 8.25 0 1 0 11.668 0 .75.75 0 1 1 1.06-1.06c3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+                                </svg>
+                                <span>Disable Interface</span>
+                            </DropDownMenuItem>
+
+                            <DropDownMenuItem v-else @click="enableInterface">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                    <path fill-rule="evenodd" d="M12 2.25a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM6.166 5.106a.75.75 0 0 1 0 1.06 8.25 8.25 0 1 0 11.668 0 .75.75 0 1 1 1.06-1.06c3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+                                </svg>
+                                <span>Enable Interface</span>
+                            </DropDownMenuItem>
+
+                        </div>
+
+                        <!-- edit interface button -->
+                        <DropDownMenuItem @click="editInterface">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                <path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
+                            </svg>
+                            <span>Edit Interface</span>
+                        </DropDownMenuItem>
+
+                        <!-- export interface button -->
+                        <DropDownMenuItem @click="exportInterface">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                <path fill-rule="evenodd" d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
+                            </svg>
+                            <span>Export Interface</span>
+                        </DropDownMenuItem>
+
+                        <!-- delete interface button -->
+                        <div class="border-t dark:border-zinc-700">
+                            <DropDownMenuItem @click="deleteInterface">
+                                <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">Delete Interface</span>
+                            </DropDownMenuItem>
+                        </div>
+
+                    </template>
+                </DropDownMenu>
             </div>
 
         </div>
 
-        <div class="flex bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-t dark:bg-zinc-800 dark:text-white dark:border-zinc-700">
+        <!-- extra interface details -->
+        <div v-if="['UDPInterface', 'RNodeInterface'].includes(iface.type)" class="p-1 text-sm border-t dark:text-zinc-100 dark:border-zinc-700">
+
+            <!-- udp interface -->
+            <div v-if="iface.type === 'UDPInterface'">
+                <div>Listen: {{ iface.listen_ip }}:{{ iface.listen_port }}</div>
+                <div>Forward: {{ iface.forward_ip }}:{{ iface.forward_port }}</div>
+            </div>
+
+            <!-- rnode interface details -->
+            <div v-else-if="iface.type === 'RNodeInterface'">
+                <div>Port: {{ iface.port }}</div>
+                <div>Frequency: {{ formatFrequency(iface.frequency) }}</div>
+                <div>Bandwidth: {{ formatFrequency(iface.bandwidth) }}</div>
+                <div>Spreading Factor: {{ iface.spreadingfactor }}</div>
+                <div>Coding Rate: {{ iface.codingrate }}</div>
+                <div>Transmit Power: {{ iface.txpower }}dBm</div>
+            </div>
+
+        </div>
+
+        <div class="flex bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-t rounded-b dark:bg-zinc-800 dark:text-white dark:border-zinc-700">
 
             <!-- status -->
             <div v-if="iface._stats?.status === true" class="text-sm text-green-500">Connected</div>
@@ -138,7 +194,11 @@
             <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._stats?.clients">• Clients: {{ iface._stats?.clients }}</div>
+            <div v-if="iface.type === 'RNodeInterface'">• Noise Floor: {{
+                iface._stats?.noise_floor
+              }} dBm
+            </div>
+            <div v-if="iface._stats?.clients != null">• Clients: {{ iface._stats?.clients }}</div>
 
         </div>
 
@@ -148,9 +208,17 @@
 <script>
 import DialogUtils from "../../js/DialogUtils";
 import Utils from "../../js/Utils";
+import DropDownMenuItem from "../DropDownMenuItem.vue";
+import IconButton from "../IconButton.vue";
+import DropDownMenu from "../DropDownMenu.vue";
 
 export default {
     name: 'Interface',
+    components: {
+        DropDownMenu,
+        IconButton,
+        DropDownMenuItem,
+    },
     props: {
         iface: Object,
     },
@@ -175,6 +243,9 @@ export default {
         editInterface() {
             this.$emit("edit");
         },
+        exportInterface() {
+            this.$emit("export");
+        },
         deleteInterface() {
             this.$emit("delete");
         },
@@ -184,6 +255,9 @@ export default {
         formatBytes: function(bytes) {
             return Utils.formatBytes(bytes);
         },
+        formatFrequency(hz) {
+            return Utils.formatFrequency(hz);
+        },
     },
 }
 </script>

src/frontend/components/interfaces/InterfacesPage.vue

@@ -1,6 +1,7 @@
 <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">
+
             <!-- 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">
                 <div class="my-auto">
@@ -17,7 +18,8 @@
                 </button>
             </div>
 
-            <div class="flex space-x-2">
+            <div class="flex space-x-1">
+
                 <!-- Add Interface button -->
                 <RouterLink :to="{ name: 'interfaces.add' }">
                     <button type="button" 
@@ -29,23 +31,26 @@
                     </button>
                 </RouterLink>
 
-                <!-- Export button -->
-                <button @click="exportInterfaces" type="button" 
-                    class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-                    </svg>
-                    <span>Export</span>
-                </button>
-
                 <!-- Import button -->
-                <button @click="showImportDialog" type="button" 
-                    class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
-                    </svg>
-                    <span>Import</span>
-                </button>
+                <div class="my-auto">
+                    <button @click="showImportInterfacesModal" type="button" class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                        </svg>
+                        <span>Import</span>
+                    </button>
+                </div>
+
+                <!-- Export button -->
+                <div class="my-auto">
+                    <button @click="exportInterfaces" type="button" class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 dark:bg-zinc-700 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 dark:hover:bg-zinc-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:focus-visible:outline-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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+                        </svg>
+                        <span>Export</span>
+                    </button>
+                </div>
+
             </div>
 
             <!-- enabled interfaces -->
@@ -55,6 +60,7 @@
                 @enable="enableInterface(iface._name)"
                 @disable="disableInterface(iface._name)"
                 @edit="editInterface(iface._name)"
+                @export="exportInterface(iface._name)"
                 @delete="deleteInterface(iface._name)"/>
 
             <!-- disabled interfaces -->
@@ -65,69 +71,15 @@
                 @enable="enableInterface(iface._name)"
                 @disable="disableInterface(iface._name)"
                 @edit="editInterface(iface._name)"
+                @export="exportInterface(iface._name)"
                 @delete="deleteInterface(iface._name)"/>
+
         </div>
     </div>
 
     <!-- Import Dialog -->
-    <div v-if="showingImportDialog" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity flex items-center justify-center">
-        <div class="bg-white dark:bg-zinc-900 rounded-lg shadow-xl max-w-2xl w-full mx-4">
-            <div class="p-4 border-b dark:border-zinc-700">
-                <h3 class="text-lg font-semibold dark:text-white">Import Interfaces</h3>
-            </div>
-            
-            <div class="p-4 space-y-4">
-                <!-- File Input -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-zinc-200">Select Configuration File</label>
-                    <input type="file" 
-                        @change="onFileSelected" 
-                        accept=".conf"
-                        class="mt-1 block w-full text-sm text-gray-500 dark:text-zinc-400
-                        file:mr-4 file:py-2 file:px-4
-                        file:rounded-md file:border-0
-                        file:text-sm file:font-semibold
-                        file:bg-gray-500 file:text-white
-                        hover:file:bg-gray-400
-                        dark:file:bg-zinc-700 dark:hover:file:bg-zinc-600">
-                </div>
+    <ImportInterfacesModal ref="import-interfaces-modal" @dismissed="onImportInterfacesModalDismissed"/>
 
-                <!-- Interface Selection -->
-                <div v-if="importableInterfaces.length > 0">
-                    <div class="flex justify-between mb-2">
-                        <label class="block text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</label>
-                        <div class="space-x-2">
-                            <button @click="selectAllInterfaces" class="text-sm text-blue-500">Select All</button>
-                            <button @click="deselectAllInterfaces" class="text-sm text-blue-500">Deselect All</button>
-                        </div>
-                    </div>
-                    <div class="space-y-2 max-h-60 overflow-y-auto">
-                        <div v-for="iface in importableInterfaces" :key="iface.name" 
-                            class="flex items-center p-2 border rounded dark:border-zinc-700">
-                            <input type="checkbox" 
-                                v-model="selectedInterfaces" 
-                                :value="iface.name"
-                                class="h-4 w-4 text-blue-600 rounded border-gray-300 dark:border-zinc-600">
-                            <label class="ml-2 text-sm text-gray-700 dark:text-zinc-200">
-                                {{ iface.name }} ({{ iface.type }})
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="p-4 border-t dark:border-zinc-700 flex justify-end space-x-2">
-                <button @click="closeImportDialog" 
-                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-600 dark:hover:bg-zinc-700">
-                    Cancel
-                </button>
-                <button @click="importSelectedInterfaces" 
-                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
-                    Import Selected
-                </button>
-            </div>
-        </div>
-    </div>
 </template>
 
 <script>
@@ -135,10 +87,13 @@ import DialogUtils from "../../js/DialogUtils";
 import ElectronUtils from "../../js/ElectronUtils";
 import Interface from "./Interface.vue";
 import Utils from "../../js/Utils";
+import ImportInterfacesModal from "./ImportInterfacesModal.vue";
+import DownloadUtils from "../../js/DownloadUtils";
 
 export default {
     name: 'InterfacesPage',
     components: {
+        ImportInterfacesModal,
         Interface,
     },
     data() {
@@ -146,10 +101,6 @@ export default {
             interfaces: {},
             interfaceStats: {},
             reloadInterval: null,
-            showingImportDialog: false,
-            importableInterfaces: [],
-            selectedInterfaces: [],
-            importFile: null
         };
     },
     beforeUnmount() {
@@ -190,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
@@ -304,89 +211,43 @@ export default {
         },
         async exportInterfaces() {
             try {
-                const response = await window.axios.get('/api/v1/reticulum/interfaces/export', {
-                    responseType: 'blob'
-                });
-                
-                const url = window.URL.createObjectURL(new Blob([response.data]));
-                const link = document.createElement('a');
-                link.href = url;
-                link.setAttribute('download', 'reticulum_interfaces');
-                document.body.appendChild(link);
-                link.click();
-                link.remove();
+
+                // fetch exported interfaces
+                const response = await window.axios.post('/api/v1/reticulum/interfaces/export');
+
+                // download file to browser
+                DownloadUtils.downloadFile("meshchat_interfaces.txt", new Blob([response.data]));
+
             } catch(e) {
                 DialogUtils.alert("Failed to export interfaces");
                 console.error(e);
             }
         },
-        showImportDialog() {
-            this.showingImportDialog = true;
-            this.importableInterfaces = [];
-            this.selectedInterfaces = [];
-            this.importFile = null;
-        },
-        closeImportDialog() {
-            this.showingImportDialog = false;
-        },
-        async onFileSelected(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-
-            this.importFile = file;
-            this.importableInterfaces = [];
-            this.selectedInterfaces = [];
-
-            const formData = new FormData();
-            formData.append('config', file);
-
+        async exportInterface(interfaceName) {
             try {
-                const response = await window.axios.post('/api/v1/reticulum/interfaces/preview', formData);
-                if (response.data.interfaces && response.data.interfaces.length > 0) {
-                    this.importableInterfaces = response.data.interfaces;
-                    this.selectedInterfaces = this.importableInterfaces.map(i => i.name);
-                } else {
-                    DialogUtils.alert("No valid interfaces found in configuration file");
-                    this.closeImportDialog();
-                }
+
+                // fetch exported interfaces
+                const response = await window.axios.post('/api/v1/reticulum/interfaces/export', {
+                    selected_interface_names: [
+                        interfaceName,
+                    ],
+                });
+
+                // download file to browser
+                DownloadUtils.downloadFile(`${interfaceName}.txt`, new Blob([response.data]));
+
             } catch(e) {
-                DialogUtils.alert("Failed to parse configuration file");
-                console.error(e);
-                this.closeImportDialog();
-            }
-        },
-        selectAllInterfaces() {
-            this.selectedInterfaces = this.importableInterfaces.map(i => i.name);
-        },
-        deselectAllInterfaces() {
-            this.selectedInterfaces = [];
-        },
-        async importSelectedInterfaces() {
-            if (!this.importFile) {
-                DialogUtils.alert("Please select a configuration file");
-                return;
-            }
-
-            if (this.selectedInterfaces.length === 0) {
-                DialogUtils.alert("Please select at least one interface to import");
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append('config', this.importFile);
-            formData.append('selected_interfaces', JSON.stringify(this.selectedInterfaces));
-
-            try {
-                await window.axios.post('/api/v1/reticulum/interfaces/import', formData);
-                await this.loadInterfaces();
-                this.closeImportDialog();
-                DialogUtils.alert("Interfaces imported successfully");
-            } catch(e) {
-                const message = e.response?.data?.message || "Failed to import interfaces";
-                DialogUtils.alert(message);
+                DialogUtils.alert("Failed to export interface");
                 console.error(e);
             }
-        }
+        },
+        showImportInterfacesModal() {
+            this.$refs["import-interfaces-modal"].show();
+        },
+        onImportInterfacesModalDismissed() {
+            // reload interfaces as something may have been imported
+            this.loadInterfaces();
+        },
     },
     computed: {
         isElectron() {
@@ -396,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;

src/frontend/components/messages/ConversationViewer.vue

@@ -72,15 +72,11 @@
 
             <!-- close button -->
             <div class="my-auto mr-2">
-                <div @click="close" class="cursor-pointer">
-                    <div class="flex text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                        <div>
-                            <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>
-                        </div>
-                    </div>
-                </div>
+                <IconButton @click="close">
+                    <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>
+                </IconButton>
             </div>
 
         </div>
@@ -93,7 +89,7 @@
                 <div v-for="chatItem of selectedPeerChatItemsReversed" :key="chatItem.lxmf_message.hash" class="flex flex-col max-w-xl mt-3" :class="{ 'ml-auto pl-4 md:pl-16 items-end': chatItem.is_outbound, 'mr-auto pr-4 md:pr-16 items-start': !chatItem.is_outbound }">
 
                     <!-- message content -->
-                    <div @click="onChatItemClick(chatItem)" class="border border-gray-300 dark:border-zinc-800 rounded-xl shadow overflow-hidden" :class="[ chatItem.lxmf_message.state === 'failed' ? 'bg-red-500 text-white' : chatItem.is_outbound ? 'bg-[#3b82f6] text-white' : 'bg-[#efefef]' ]">
+                    <div @click="onChatItemClick(chatItem)" class="border border-gray-300 dark:border-zinc-800 rounded-xl shadow overflow-hidden" :class="[ ['cancelled', 'failed'].includes(chatItem.lxmf_message.state) ? 'bg-red-500 text-white' : chatItem.is_outbound ? 'bg-[#3b82f6] text-white' : 'bg-[#efefef]' ]">
 
                         <div class="w-full space-y-0.5 px-2.5 py-1">
 
@@ -167,7 +163,7 @@
                     </div>
 
                     <!-- message state -->
-                    <div v-if="chatItem.is_outbound" class="flex text-right" :class="[ chatItem.lxmf_message.state === 'failed' ? 'text-red-500' : 'text-gray-500' ]">
+                    <div v-if="chatItem.is_outbound" class="flex text-right" :class="[ ['cancelled', 'failed'].includes(chatItem.lxmf_message.state) ? 'text-red-500' : 'text-gray-500' ]">
                         <div class="flex ml-auto space-x-1">
 
                             <!-- state label -->
@@ -179,6 +175,7 @@
                                     <span v-if="chatItem.lxmf_message.state === 'sent' && chatItem.lxmf_message.method === 'propagated'">to propagation node</span>
                                     <span v-if="chatItem.lxmf_message.state === 'sending'">{{ chatItem.lxmf_message.progress.toFixed(0) }}%</span>
                                 </span>
+                                <a v-if="chatItem.lxmf_message.state === 'outbound' || chatItem.lxmf_message.state === 'sending' || chatItem.lxmf_message.state === 'sent'" @click="cancelSendingMessage(chatItem)" class="ml-1 cursor-pointer underline text-blue-500">cancel?</a>
                                 <a v-if="chatItem.lxmf_message.state === 'failed'" @click="retrySendingMessage(chatItem)" class="ml-1 cursor-pointer underline text-blue-500">retry?</a>
                             </div>
 
@@ -189,6 +186,13 @@
                                 </svg>
                             </div>
 
+                            <!-- cancelled icon -->
+                            <div v-else-if="chatItem.lxmf_message.state === 'cancelled'" class="my-auto">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                    <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" />
+                                </svg>
+                            </div>
+
                             <!-- failed icon -->
                             <div v-else-if="chatItem.lxmf_message.state === 'failed'" class="my-auto">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
@@ -312,6 +316,7 @@
 
                     <!-- text input -->
                     <textarea
+                        ref="message-input"
                         id="message-input"
                         :readonly="isSendingMessage"
                         v-model="newMessageText"
@@ -379,6 +384,13 @@
         </div>
         <div class="font-semibold dark:text-white">No Active Chat</div>
         <div class='dark:text-zinc-300'>Select a Peer to start chatting!</div>
+        <div class="mx-auto mt-2">
+            <button @click.stop="openLXMFAddress" type="button"
+                    class="my-auto 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
+                dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+                Enter an LXMF Address
+            </button>
+        </div>
     </div>
 
 </template>
@@ -395,10 +407,13 @@ import SendMessageButton from "./SendMessageButton.vue";
 import MaterialDesignIcon from "../MaterialDesignIcon.vue";
 import ConversationDropDownMenu from "./ConversationDropDownMenu.vue";
 import AddImageButton from "./AddImageButton.vue";
+import IconButton from "../IconButton.vue";
+import GlobalEmitter from "../../js/GlobalEmitter";
 
 export default {
     name: 'ConversationViewer',
     components: {
+        IconButton,
         AddImageButton,
         ConversationDropDownMenu,
         MaterialDesignIcon,
@@ -596,6 +611,9 @@ export default {
                 }
             }
         },
+        openLXMFAddress() {
+            GlobalEmitter.emit("compose-new-message");
+        },
         onLxmfMessageReceived(lxmfMessage) {
 
             // add inbound message to ui
@@ -1106,6 +1124,38 @@ export default {
                 this.isSendingMessage = false;
             }
 
+        },
+        async cancelSendingMessage(chatItem) {
+
+            // get lxmf message hash else do nothing
+            const lxmfMessageHash = chatItem.lxmf_message.hash;
+            if(!lxmfMessageHash){
+                return;
+            }
+
+            try {
+
+                // cancel sending lxmf message
+                const response = await window.axios.post(`/api/v1/lxmf-messages/${lxmfMessageHash}/cancel`);
+
+                // get lxmf message from response
+                const lxmfMessage = response.data.lxmf_message;
+                if(!lxmfMessage){
+                    return;
+                }
+
+                // update lxmf message in ui
+                this.onLxmfMessageUpdated(lxmfMessage);
+
+            } catch(e) {
+
+                // show error
+                const message = e.response?.data?.message ?? "failed to cancel message";
+                DialogUtils.alert(message);
+                console.log(e);
+
+            }
+
         },
         async retrySendingMessage(chatItem) {
 
@@ -1353,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() {
 

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>
@@ -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) {
@@ -88,6 +96,14 @@ export default {
                 }
             }
 
+            // if user provided an address with an "lxmf@" prefix, lets remove that to get the raw destination hash
+            if(destinationHash.startsWith("lxmf@")){
+                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){
@@ -160,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`);
@@ -173,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) {
 
@@ -184,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() {

src/frontend/components/network-visualiser/NetworkVisualiser.vue

@@ -165,6 +165,60 @@ 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,
+                            },
+                        });
+
+                    }
+
+                    // 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,
+                            },
+                        });
+
+                    }
+
+                }
+
+            });
+
             // update network
             await this.update();
 
@@ -358,6 +412,9 @@ export default {
 
                 }
 
+                // attach announce to this node
+                node._announce = announce;
+
                 // add node
                 nodes.push(node);
 

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>
@@ -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="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>
+            </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 text-wrap"></pre>
+            <pre v-else v-html="renderedNodePageContent()" class="h-full break-words whitespace-pre-wrap"></pre>
         </div>
 
         <!-- file download bottom bar -->
@@ -93,6 +98,13 @@
         </div>
         <div class="font-semibold">No Active Node</div>
         <div>Select a Node to start browsing!</div>
+        <div class="mx-auto mt-2">
+            <button @click.stop="openUrl" type="button"
+                class="my-auto 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
+                dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+                Open a Nomadnet URL
+            </button>
+        </div>
     </div>
 </div>
 
@@ -123,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";
@@ -134,6 +146,9 @@ export default {
     components: {
         NomadNetworkSidebar,
     },
+    props: {
+        destinationHash: String,
+    },
     data() {
         return {
 
@@ -142,6 +157,8 @@ export default {
             selectedNodePath: null,
 
             isLoadingNodePage: false,
+            isShowingNodePageSource: false,
+            defaultNodePagePath: "/page/index.mu",
             nodePageRequestSequence: 0,
             nodePagePath: null,
             nodePagePathUrlInput: null,
@@ -150,7 +167,6 @@ export default {
             nodePagePathHistory: [],
             nodePageCache: {},
 
-
             isDownloadingNodeFile: false,
             nodeFilePath: null,
             nodeFileProgress: 0,
@@ -161,23 +177,51 @@ 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){
+            (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();
 
     },
     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){
@@ -286,11 +330,53 @@ 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;
         },
+        async openUrl() {
+
+            // ask for url
+            const url = await DialogUtils.prompt("Enter a Nomadnet URL");
+            if(!url){
+                return;
+            }
+
+            // navigate to the url
+            await this.onNodePageUrlClick(url);
+
+        },
         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;
 
@@ -324,6 +410,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;
                 }
@@ -332,31 +419,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
@@ -390,6 +467,35 @@ export default {
 
             });
         },
+        renderPageContent(path, content) {
+
+            // 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);
+                }
+
+            }
+
+            // 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;");
+
+        },
+        toggleNodePageSource() {
+            this.isShowingNodePageSource = !this.isShowingNodePageSource;
+        },
         async reloadNodePage() {
 
             // reload current node page without adding to history and without using cache
@@ -416,9 +522,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 {
@@ -448,7 +554,7 @@ export default {
             if(url.length === 32){
                 return {
                     destination_hash: url,
-                    path: "/page/index.mu",
+                    path: this.defaultNodePagePath,
                 };
             }
 
@@ -520,8 +626,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;
                 }
             }
@@ -620,8 +730,24 @@ export default {
 
         },
         onNodeClick: function(node) {
+
+            // update selected node
             this.selectedNode = node;
-            this.loadNodePage(node.destination_hash, "/page/index.mu");
+
+            // 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}`;
@@ -694,6 +820,9 @@ export default {
                 console.error(e);
             }
         },
+        renderedNodePageContent() {
+            return this.renderPageContent(this.nodePagePath, this.nodePageContent);
+        },
     },
 }
 </script>

src/frontend/components/settings/SettingsPage.vue

@@ -19,6 +19,25 @@
                 </div>
             </div>
 
+            <!-- transport mode -->
+            <div class="bg-white dark:bg-zinc-800 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Transport Mode</div>
+                <div class="divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100">
+
+                    <div class="p-2">
+                        <div class="flex items-start">
+                            <div class="flex items-center h-5">
+                                <input v-model="config.is_transport_enabled" @change="onIsTransportEnabledChange" type="checkbox" class="w-4 h-4 border border-gray-300 dark:border-zinc-600 rounded bg-gray-50 dark:bg-zinc-700 focus:ring-3 focus:ring-blue-300 dark:focus:ring-blue-600">
+                            </div>
+                            <label class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Enable Transport Mode</label>
+                        </div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">When enabled, MeshChat will route traffic for other peers, respond to path requests and pass announces over your interfaces.</div>
+                        <div class="text-sm text-gray-700 dark:text-gray-300">Changing this setting requires you to restart MeshChat.</div>
+                    </div>
+
+                </div>
+            </div>
+
             <!-- interfaces -->
             <div class="bg-white dark:bg-zinc-800 rounded shadow">
                 <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Interfaces</div>
@@ -150,6 +169,7 @@
 <script>
 import Utils from "../../js/Utils";
 import WebSocketConnection from "../../js/WebSocketConnection";
+import DialogUtils from "../../js/DialogUtils";
 
 export default {
     name: 'SettingsPage',
@@ -247,6 +267,25 @@ export default {
                 "lxmf_preferred_propagation_node_auto_sync_interval_seconds": this.config.lxmf_preferred_propagation_node_auto_sync_interval_seconds,
             });
         },
+        async onIsTransportEnabledChange() {
+            if(this.config.is_transport_enabled){
+                try {
+                    const response = await window.axios.post("/api/v1/reticulum/enable-transport");
+                    DialogUtils.alert(response.data.message);
+                } catch(e) {
+                    DialogUtils.alert("Failed to enable transport mode!");
+                    console.log(e);
+                }
+            } else {
+                try {
+                    const response = await window.axios.post("/api/v1/reticulum/disable-transport");
+                    DialogUtils.alert(response.data.message);
+                } catch(e) {
+                    DialogUtils.alert("Failed to disable transport mode!");
+                    console.log(e);
+                }
+            }
+        },
         formatSecondsAgo: function(seconds) {
             return Utils.formatSecondsAgo(seconds);
         },

src/frontend/js/DownloadUtils.js

@@ -0,0 +1,28 @@
+class DownloadUtils {
+
+    static downloadFile(filename, blob) {
+
+        // create object url for blob
+        const objectUrl = URL.createObjectURL(blob);
+
+        // create hidden link element to download blob
+        const link = document.createElement('a');
+        link.href = objectUrl;
+        link.download = filename;
+        link.style.display = "none";
+        document.body.append(link);
+
+        // click link to download file in browser
+        link.click();
+
+        // link element is no longer needed
+        link.remove();
+
+        // revoke object url to clear memory
+        setTimeout(() => URL.revokeObjectURL(objectUrl), 10000);
+
+    }
+
+}
+
+export default DownloadUtils;

src/frontend/js/Utils.js

@@ -143,7 +143,7 @@ class Utils {
 
     static isInterfaceEnabled(iface) {
         const rawValue = iface.enabled ?? iface.interface_enabled;
-        const value = rawValue?.toLowerCase();
+        const value = rawValue?.toString()?.toLowerCase();
         return value === "on" || value === "yes" || value === "true";
     }
 

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();

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")),
         },
         {
@@ -56,7 +57,8 @@ const router = createRouter({
         },
         {
             name: "nomadnetwork",
-            path: '/nomadnetwork',
+            path: '/nomadnetwork/:destinationHash?',
+            props: true,
             component: defineAsyncComponent(() => import("./components/nomadnetwork/NomadNetworkPage.vue")),
         },
         {

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();

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