Merge branch 'master' into issue-249-cors

2025-01-28 21:32:34 -05:00
parent d8261a649b c7e2baea1b
commit eb0ea4ea24
131 changed files with 8485 additions and 5245 deletions
@@ -1,9 +1,12 @@
-import type{ ChannelValidation } from "@app/validation/channel.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useToast } from "@core/hooks/useToast.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { ChannelValidation } from "@app/validation/channel.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useToast } from "@core/hooks/useToast.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 import { fromByteArray, toByteArray } from "base64-js";
+import cryptoRandomString from "crypto-random-string";
+import { useState } from "react";
+import { PkiRegenerateDialog } from "../Dialog/PkiRegenerateDialog";

 export interface SettingsPanelProps {
  channel: Protobuf.Channel.Channel;
@@ -13,15 +16,29 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
  const { config, connection, addChannel } = useDevice();
  const { toast } = useToast();

+  const [pass, setPass] = useState<string>(
+    fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
+  );
+  const [bitCount, setBits] = useState<number>(
+    channel?.settings?.psk.length ?? 16,
+  );
+  const [validationText, setValidationText] = useState<string>();
+  const [preSharedDialogOpen, setPreSharedDialogOpen] =
+    useState<boolean>(false);
+
  const onSubmit = (data: ChannelValidation) => {
    const channel = new Protobuf.Channel.Channel({
      ...data,
      settings: {
        ...data.settings,
-        psk: toByteArray(data.settings.psk ?? ""),
+        psk: toByteArray(pass),
        moduleSettings: {
-          positionPrecision: data.settings.positionEnabled ? data.settings.preciseLocation ? 32 : data.settings.positionPrecision : 0,
-        }
+          positionPrecision: data.settings.positionEnabled
+            ? data.settings.preciseLocation
+              ? 32
+              : data.settings.positionPrecision
+            : 0,
+        },
      },
    });
    connection?.setChannel(channel).then(() => {
@@ -32,93 +49,185 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
    });
  };

+  const preSharedKeyRegenerate = () => {
+    setPass(
+      btoa(
+        cryptoRandomString({
+          length: bitCount ?? 0,
+          type: "alphanumeric",
+        }),
+      ),
+    );
+    setValidationText(undefined);
+    setPreSharedDialogOpen(false);
+  };
+
+  const preSharedClickEvent = () => {
+    setPreSharedDialogOpen(true);
+  };
+
+  const validatePass = (input: string, count: number) => {
+    if (input.length % 4 !== 0 || toByteArray(input).length !== count) {
+      setValidationText(`Please enter a valid ${count * 8} bit PSK.`);
+    } else {
+      setValidationText(undefined);
+    }
+  };
+
+  const inputChangeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const psk = e.currentTarget?.value;
+    setPass(psk);
+    validatePass(psk, bitCount);
+  };
+
+  const selectChangeEvent = (e: string) => {
+    const count = Number.parseInt(e);
+    setBits(count);
+    validatePass(pass, count);
+  };
+
  return (
-    <DynamicForm<ChannelValidation>
-      onSubmit={onSubmit}
-      submitType="onSubmit"
-      hasSubmitButton={true}
-      defaultValues={{
-        ...channel,
-        ...{
-          settings: {
-            ...channel?.settings,
-            psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
-            positionEnabled: channel?.settings?.moduleSettings?.positionPrecision != undefined && channel?.settings?.moduleSettings?.positionPrecision > 0,
-            preciseLocation: channel?.settings?.moduleSettings?.positionPrecision == 32,
-            positionPrecision: channel?.settings?.moduleSettings?.positionPrecision == undefined ? 10 : channel?.settings?.moduleSettings?.positionPrecision
+    <>
+      <DynamicForm<ChannelValidation>
+        onSubmit={onSubmit}
+        submitType="onSubmit"
+        hasSubmitButton={true}
+        defaultValues={{
+          ...channel,
+          ...{
+            settings: {
+              ...channel?.settings,
+              psk: pass,
+              positionEnabled:
+                channel?.settings?.moduleSettings?.positionPrecision !==
+                  undefined &&
+                channel?.settings?.moduleSettings?.positionPrecision > 0,
+              preciseLocation:
+                channel?.settings?.moduleSettings?.positionPrecision === 32,
+              positionPrecision:
+                channel?.settings?.moduleSettings?.positionPrecision ===
+                undefined
+                  ? 10
+                  : channel?.settings?.moduleSettings?.positionPrecision,
+            },
          },
-        },
-      }}
-      fieldGroups={[
-        {
-          label: "Channel Settings",
-          description: "Crypto, MQTT & misc settings",
-          fields: [
-            {
-              type: "select",
-              name: "role",
-              label: "Role",
-              description:
-                "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
-              properties: {
-                enumValue: Protobuf.Channel.Channel_Role,
+        }}
+        fieldGroups={[
+          {
+            label: "Channel Settings",
+            description: "Crypto, MQTT & misc settings",
+            fields: [
+              {
+                type: "select",
+                name: "role",
+                label: "Role",
+                disabled: channel.index === 0,
+                description:
+                  "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
+                properties: {
+                  enumValue:
+                    channel.index === 0
+                      ? { PRIMARY: 1 }
+                      : { DISABLED: 0, SECONDARY: 2 },
+                },
              },
-            },
-            {
-              type: "password",
-              name: "settings.psk",
-              label: "pre-Shared Key",
-              description: "16, or 32 bytes",
-              properties: {
-                // act
+              {
+                type: "passwordGenerator",
+                name: "settings.psk",
+                label: "Pre-Shared Key",
+                description:
+                  "Supported PSK lengths: 256-bit, 128-bit, 8-bit, Empty (0-bit)",
+                validationText: validationText,
+                devicePSKBitCount: bitCount ?? 0,
+                inputChange: inputChangeEvent,
+                selectChange: selectChangeEvent,
+                actionButtons: [
+                  {
+                    text: "Generate",
+                    variant: "success",
+                    onClick: preSharedClickEvent,
+                  },
+                ],
+                hide: true,
+                properties: {
+                  value: pass,
+                },
              },
-            },
-            {
-              type: "text",
-              name: "settings.name",
-              label: "Name",
-              description:
-                "A unique name for the channel <12 bytes, leave blank for default",
-            },
-            {
-              type: "toggle",
-              name: "settings.uplinkEnabled",
-              label: "Uplink Enabled",
-              description: "Send messages from the local mesh to MQTT",
-            },
-            {
-              type: "toggle",
-              name: "settings.downlinkEnabled",
-              label: "Downlink Enabled",
-              description: "Send messages from MQTT to the local mesh",
-            },
-            {
-              type: "toggle",
-              name: "settings.positionEnabled",
-              label: "Allow Position Requests",
-              description: "Send position to channel",
-            },
-            {
-              type: "toggle",
-              name: "settings.preciseLocation",
-              label: "Precise Location",
-              description: "Send precise location to channel",
-            },
-            {
-              type: "select",
-              name: "settings.positionPrecision",
-              label: "Approximate Location",
-              description:
-                "If not sharing precise location, position shared on channel will be accurate within this distance",
-              properties: {
-                enumValue: config.display?.units == 0 ?
-                { "Within 23 km":10, "Within 12 km":11, "Within 5.8 km":12, "Within 2.9 km":13, "Within 1.5 km":14, "Within 700 m":15, "Within 350 m":16, "Within 200 m":17, "Within 90 m":18, "Within 50 m":19 } :
-                { "Within 15 miles":10, "Within 7.3 miles":11, "Within 3.6 miles":12, "Within 1.8 miles":13, "Within 0.9 miles":14, "Within 0.5 miles":15, "Within 0.2 miles":16, "Within 600 feet":17, "Within 300 feet":18, "Within 150 feet":19 }
+              {
+                type: "text",
+                name: "settings.name",
+                label: "Name",
+                description:
+                  "A unique name for the channel <12 bytes, leave blank for default",
              },
-            },
-          ],
-        },
-      ]}
-    />
+              {
+                type: "toggle",
+                name: "settings.uplinkEnabled",
+                label: "Uplink Enabled",
+                description: "Send messages from the local mesh to MQTT",
+              },
+              {
+                type: "toggle",
+                name: "settings.downlinkEnabled",
+                label: "Downlink Enabled",
+                description: "Send messages from MQTT to the local mesh",
+              },
+              {
+                type: "toggle",
+                name: "settings.positionEnabled",
+                label: "Allow Position Requests",
+                description: "Send position to channel",
+              },
+              {
+                type: "toggle",
+                name: "settings.preciseLocation",
+                label: "Precise Location",
+                description: "Send precise location to channel",
+              },
+              {
+                type: "select",
+                name: "settings.positionPrecision",
+                label: "Approximate Location",
+                description:
+                  "If not sharing precise location, position shared on channel will be accurate within this distance",
+                properties: {
+                  enumValue:
+                    config.display?.units === 0
+                      ? {
+                          "Within 23 km": 10,
+                          "Within 12 km": 11,
+                          "Within 5.8 km": 12,
+                          "Within 2.9 km": 13,
+                          "Within 1.5 km": 14,
+                          "Within 700 m": 15,
+                          "Within 350 m": 16,
+                          "Within 200 m": 17,
+                          "Within 90 m": 18,
+                          "Within 50 m": 19,
+                        }
+                      : {
+                          "Within 15 miles": 10,
+                          "Within 7.3 miles": 11,
+                          "Within 3.6 miles": 12,
+                          "Within 1.8 miles": 13,
+                          "Within 0.9 miles": 14,
+                          "Within 0.5 miles": 15,
+                          "Within 0.2 miles": 16,
+                          "Within 600 feet": 17,
+                          "Within 300 feet": 18,
+                          "Within 150 feet": 19,
+                        },
+                },
+              },
+            ],
+          },
+        ]}
+      />
+      <PkiRegenerateDialog
+        open={preSharedDialogOpen}
+        onOpenChange={() => setPreSharedDialogOpen(false)}
+        onSubmit={() => preSharedKeyRegenerate()}
+      />
+    </>
  );
 };
@@ -1,10 +1,21 @@
-import type { BluetoothValidation } from "@app/validation/config/bluetooth.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
+import { useState } from "react";

 export const Bluetooth = (): JSX.Element => {
  const { config, setWorkingConfig } = useDevice();
+  const [bluetoothValidationText, setBluetoothValidationText] =
+    useState<string>();
+
+  const bluetoothPinChangeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value[0] === "0") {
+      setBluetoothValidationText("Bluetooth Pin cannot start with 0.");
+    } else {
+      setBluetoothValidationText("");
+    }
+  };

  const onSubmit = (data: BluetoothValidation) => {
    setWorkingConfig(
@@ -52,6 +63,8 @@ export const Bluetooth = (): JSX.Element => {
              name: "fixedPin",
              label: "Pin",
              description: "Pin to use when pairing",
+              validationText: bluetoothValidationText,
+              inputChange: bluetoothPinChangeEvent,
              disabledBy: [
                {
                  fieldName: "mode",
@@ -1,6 +1,6 @@
-import type { DeviceValidation } from "@app/validation/config/device.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { DeviceValidation } from "@app/validation/config/device.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Device = (): JSX.Element => {
@@ -32,23 +32,25 @@ export const Device = (): JSX.Element => {
              label: "Role",
              description: "What role the device performs on the mesh",
              properties: {
-                enumValue: Protobuf.Config.Config_DeviceConfig_Role,
+                enumValue: {
+                  Client: Protobuf.Config.Config_DeviceConfig_Role.CLIENT,
+                  "Client Mute":
+                    Protobuf.Config.Config_DeviceConfig_Role.CLIENT_MUTE,
+                  Router: Protobuf.Config.Config_DeviceConfig_Role.ROUTER,
+                  Repeater: Protobuf.Config.Config_DeviceConfig_Role.REPEATER,
+                  Tracker: Protobuf.Config.Config_DeviceConfig_Role.TRACKER,
+                  Sensor: Protobuf.Config.Config_DeviceConfig_Role.SENSOR,
+                  TAK: Protobuf.Config.Config_DeviceConfig_Role.TAK,
+                  "Client Hidden":
+                    Protobuf.Config.Config_DeviceConfig_Role.CLIENT_HIDDEN,
+                  "Lost and Found":
+                    Protobuf.Config.Config_DeviceConfig_Role.LOST_AND_FOUND,
+                  "TAK Tracker":
+                    Protobuf.Config.Config_DeviceConfig_Role.SENSOR,
+                },
                formatEnumName: true,
              },
            },
-            {
-              type: "toggle",
-              name: "serialEnabled",
-              label: "Serial Output Enabled",
-              description: "Enable the device's serial console",
-            },
-            {
-              type: "toggle",
-              name: "debugLogEnabled",
-              label: "Enabled Debug Log",
-              description:
-                "Output debugging information to the device's serial port (auto disables when serial client is connected)",
-            },
            {
              type: "number",
              name: "buttonGpio",
@@ -86,18 +88,18 @@ export const Device = (): JSX.Element => {
              label: "Double Tap as Button Press",
              description: "Treat double tap as button press",
            },
-            {
-              type: "toggle",
-              name: "isManaged",
-              label: "Managed",
-              description: "Is this device managed by a mesh administator",
-            },
            {
              type: "toggle",
              name: "disableTripleClick",
              label: "Disable Triple Click",
              description: "Disable triple click",
            },
+            {
+              type: "toggle",
+              name: "ledHeartbeatDisabled",
+              label: "LED Heartbeat Disabled",
+              description: "Disable default blinking LED",
+            },
          ],
        },
      ]}
@@ -1,6 +1,6 @@
-import type { DisplayValidation } from "@app/validation/config/display.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { DisplayValidation } from "@app/validation/config/display.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Display = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import type { LoRaValidation } from "@app/validation/config/lora.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { LoRaValidation } from "@app/validation/config/lora.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const LoRa = (): JSX.Element => {
@@ -41,7 +41,7 @@ export const LoRa = (): JSX.Element => {
              label: "Hop Limit",
              description: "Maximum number of hops",
              properties: {
-                enumValue: {1:1, 2:2, 3:3, 4:4, 5:5, 6:6, 7:7}
+                enumValue: { 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7 },
              },
            },
            {
@@ -56,6 +56,13 @@ export const LoRa = (): JSX.Element => {
              label: "Ignore MQTT",
              description: "Don't forward MQTT messages over the mesh",
            },
+            {
+              type: "toggle",
+              name: "configOkToMqtt",
+              label: "OK to MQTT",
+              description:
+                "When set to true, this configuration indicates that the user approves the packet to be uploaded to MQTT. If set to false, remote nodes are requested not to forward packets to MQTT",
+            },
          ],
        },
        {
@@ -1,6 +1,10 @@
-import type { NetworkValidation } from "@app/validation/config/network.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { NetworkValidation } from "@app/validation/config/network.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import {
+  convertIntToIpAddress,
+  convertIpAddressToInt,
+} from "@core/utils/ip.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Network = (): JSX.Element => {
@@ -13,9 +17,12 @@ export const Network = (): JSX.Element => {
          case: "network",
          value: {
            ...data,
-            ipv4Config: new Protobuf.Config.Config_NetworkConfig_IpV4Config(
-              data.ipv4Config,
-            ),
+            ipv4Config: new Protobuf.Config.Config_NetworkConfig_IpV4Config({
+              ip: convertIpAddressToInt(data.ipv4Config.ip) ?? 0,
+              gateway: convertIpAddressToInt(data.ipv4Config.gateway) ?? 0,
+              subnet: convertIpAddressToInt(data.ipv4Config.subnet) ?? 0,
+              dns: convertIpAddressToInt(data.ipv4Config.dns) ?? 0,
+            }),
          },
        },
      }),
@@ -25,7 +32,19 @@ export const Network = (): JSX.Element => {
  return (
    <DynamicForm<NetworkValidation>
      onSubmit={onSubmit}
-      defaultValues={config.network}
+      defaultValues={{
+        ...config.network,
+        ipv4Config: {
+          ip: convertIntToIpAddress(config.network?.ipv4Config?.ip ?? 0),
+          gateway: convertIntToIpAddress(
+            config.network?.ipv4Config?.gateway ?? 0,
+          ),
+          subnet: convertIntToIpAddress(
+            config.network?.ipv4Config?.subnet ?? 0,
+          ),
+          dns: convertIntToIpAddress(config.network?.ipv4Config?.dns ?? 0),
+        },
+      }}
      fieldGroups={[
        {
          label: "WiFi Config",
@@ -1,6 +1,6 @@
-import type { PositionValidation } from "@app/validation/config/position.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { PositionValidation } from "@app/validation/config/position.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Position = (): JSX.Element => {
@@ -77,12 +77,6 @@ export const Position = (): JSX.Element => {
              label: "Enable Pin",
              description: "GPS module enable pin override",
            },
-            {
-              type: "number",
-              name: "channelPrecision",
-              label: "Channel Precision",
-              description: "GPS channel precision",
-            },
          ],
        },
        {
@@ -1,6 +1,6 @@
-import type { PowerValidation } from "@app/validation/config/power.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { PowerValidation } from "@app/validation/config/power.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Power = (): JSX.Element => {
@@ -0,0 +1,254 @@
+import { PkiRegenerateDialog } from "@app/components/Dialog/PkiRegenerateDialog";
+import { DynamicForm } from "@app/components/Form/DynamicForm.tsx";
+import {
+  getX25519PrivateKey,
+  getX25519PublicKey,
+} from "@app/core/utils/x25519";
+import type { SecurityValidation } from "@app/validation/config/security.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { Protobuf } from "@meshtastic/js";
+import { fromByteArray, toByteArray } from "base64-js";
+import { Eye, EyeOff } from "lucide-react";
+import { useState } from "react";
+
+export const Security = (): JSX.Element => {
+  const { config, nodes, hardware, setWorkingConfig, setDialogOpen } =
+    useDevice();
+
+  const [privateKey, setPrivateKey] = useState<string>(
+    fromByteArray(config.security?.privateKey ?? new Uint8Array(0)),
+  );
+  const [privateKeyVisible, setPrivateKeyVisible] = useState<boolean>(false);
+  const [privateKeyBitCount, setPrivateKeyBitCount] = useState<number>(
+    config.security?.privateKey.length ?? 32,
+  );
+  const [privateKeyValidationText, setPrivateKeyValidationText] =
+    useState<string>();
+  const [publicKey, setPublicKey] = useState<string>(
+    fromByteArray(config.security?.publicKey ?? new Uint8Array(0)),
+  );
+  const [adminKey, setAdminKey] = useState<string>(
+    fromByteArray(config.security?.adminKey[0] ?? new Uint8Array(0)),
+  );
+  const [adminKeyValidationText, setAdminKeyValidationText] =
+    useState<string>();
+  const [privateKeyDialogOpen, setPrivateKeyDialogOpen] =
+    useState<boolean>(false);
+
+  const onSubmit = (data: SecurityValidation) => {
+    if (privateKeyValidationText || adminKeyValidationText) return;
+
+    setWorkingConfig(
+      new Protobuf.Config.Config({
+        payloadVariant: {
+          case: "security",
+          value: {
+            ...data,
+            adminKey: [toByteArray(adminKey)],
+            privateKey: toByteArray(privateKey),
+            publicKey: toByteArray(publicKey),
+          },
+        },
+      }),
+    );
+  };
+
+  const validateKey = (
+    input: string,
+    count: number,
+    setValidationText: (
+      value: React.SetStateAction<string | undefined>,
+    ) => void,
+  ) => {
+    try {
+      if (input.length % 4 !== 0 || toByteArray(input).length !== count) {
+        setValidationText(`Please enter a valid ${count * 8} bit PSK.`);
+      } else {
+        setValidationText(undefined);
+      }
+    } catch (e) {
+      console.error(e);
+      setValidationText(`Please enter a valid ${count * 8} bit PSK.`);
+    }
+  };
+
+  const privateKeyClickEvent = () => {
+    setPrivateKeyDialogOpen(true);
+  };
+
+  const pkiBackupClickEvent = () => {
+    setDialogOpen("pkiBackup", true);
+  };
+
+  const pkiRegenerate = () => {
+    const privateKey = getX25519PrivateKey();
+    const publicKey = getX25519PublicKey(privateKey);
+
+    setPrivateKey(fromByteArray(privateKey));
+    setPublicKey(fromByteArray(publicKey));
+    validateKey(
+      fromByteArray(privateKey),
+      privateKeyBitCount,
+      setPrivateKeyValidationText,
+    );
+
+    setPrivateKeyDialogOpen(false);
+  };
+
+  const privateKeyInputChangeEvent = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const privateKeyB64String = e.target.value;
+    setPrivateKey(privateKeyB64String);
+    validateKey(
+      privateKeyB64String,
+      privateKeyBitCount,
+      setPrivateKeyValidationText,
+    );
+
+    const publicKey = getX25519PublicKey(toByteArray(privateKeyB64String));
+    setPublicKey(fromByteArray(publicKey));
+  };
+
+  const adminKeyInputChangeEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const psk = e.currentTarget?.value;
+    setAdminKey(psk);
+    validateKey(psk, privateKeyBitCount, setAdminKeyValidationText);
+  };
+
+  const privateKeySelectChangeEvent = (e: string) => {
+    const count = Number.parseInt(e);
+    setPrivateKeyBitCount(count);
+    validateKey(privateKey, count, setPrivateKeyValidationText);
+  };
+
+  return (
+    <>
+      <DynamicForm<SecurityValidation>
+        onSubmit={onSubmit}
+        submitType="onChange"
+        defaultValues={{
+          ...config.security,
+          ...{
+            adminKey: adminKey,
+            privateKey: privateKey,
+            publicKey: publicKey,
+            adminChannelEnabled: config.security?.adminChannelEnabled ?? false,
+            isManaged: config.security?.isManaged ?? false,
+            debugLogApiEnabled: config.security?.debugLogApiEnabled ?? false,
+            serialEnabled: config.security?.serialEnabled ?? false,
+          },
+        }}
+        fieldGroups={[
+          {
+            label: "Security Settings",
+            description: "Settings for the Security configuration",
+            fields: [
+              {
+                type: "passwordGenerator",
+                name: "privateKey",
+                label: "Private Key",
+                description: "Used to create a shared key with a remote device",
+                bits: [{ text: "256 bit", value: "32", key: "bit256" }],
+                validationText: privateKeyValidationText,
+                devicePSKBitCount: privateKeyBitCount,
+                inputChange: privateKeyInputChangeEvent,
+                selectChange: privateKeySelectChangeEvent,
+                hide: !privateKeyVisible,
+                actionButtons: [
+                  {
+                    text: "Generate",
+                    onClick: privateKeyClickEvent,
+                    variant: "success",
+                  },
+                  {
+                    text: "Backup Key",
+                    onClick: pkiBackupClickEvent,
+                    variant: "subtle",
+                  },
+                ],
+                properties: {
+                  value: privateKey,
+                  action: {
+                    icon: privateKeyVisible ? EyeOff : Eye,
+                    onClick: () => setPrivateKeyVisible(!privateKeyVisible),
+                  },
+                },
+              },
+              {
+                type: "text",
+                name: "publicKey",
+                label: "Public Key",
+                disabled: true,
+                description:
+                  "Sent out to other nodes on the mesh to allow them to compute a shared secret key",
+                properties: {
+                  value: publicKey,
+                },
+              },
+            ],
+          },
+          {
+            label: "Admin Settings",
+            description: "Settings for Admin",
+            fields: [
+              {
+                type: "toggle",
+                name: "adminChannelEnabled",
+                label: "Allow Legacy Admin",
+                description:
+                  "Allow incoming device control over the insecure legacy admin channel",
+              },
+              {
+                type: "toggle",
+                name: "isManaged",
+                label: "Managed",
+                description:
+                  "If true, device configuration options are only able to be changed remotely by a Remote Admin node via admin messages. Do not enable this option unless a suitable Remote Admin node has been setup, and the public key stored in the field below.",
+              },
+              {
+                type: "text",
+                name: "adminKey",
+                label: "Admin Key",
+                description:
+                  "The public key authorized to send admin messages to this node",
+                validationText: adminKeyValidationText,
+                inputChange: adminKeyInputChangeEvent,
+                disabledBy: [
+                  { fieldName: "adminChannelEnabled", invert: true },
+                ],
+                properties: {
+                  value: adminKey,
+                },
+              },
+            ],
+          },
+          {
+            label: "Logging Settings",
+            description: "Settings for Logging",
+            fields: [
+              {
+                type: "toggle",
+                name: "debugLogApiEnabled",
+                label: "Enable Debug Log API",
+                description:
+                  "Output live debug logging over serial, view and export position-redacted device logs over Bluetooth",
+              },
+              {
+                type: "toggle",
+                name: "serialEnabled",
+                label: "Serial Output Enabled",
+                description: "Serial Console over the Stream API",
+              },
+            ],
+          },
+        ]}
+      />
+      <PkiRegenerateDialog
+        open={privateKeyDialogOpen}
+        onOpenChange={() => setPrivateKeyDialogOpen(false)}
+        onSubmit={() => pkiRegenerate()}
+      />
+    </>
+  );
+};
@@ -1,10 +1,10 @@
-import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
-import { Button } from "@components/UI/Button.js";
-import { Mono } from "@components/generic/Mono.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { subscribeAll } from "@core/subscriptions.js";
-import { randId } from "@core/utils/randId.js";
+import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import { Button } from "@components/UI/Button.tsx";
+import { Mono } from "@components/generic/Mono.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
+import { subscribeAll } from "@core/subscriptions.ts";
+import { randId } from "@core/utils/randId.ts";
 import { BleConnection, Constants } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
-import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
-import { Button } from "@components/UI/Button.js";
-import { Input } from "@components/UI/Input.js";
-import { Label } from "@components/UI/Label.js";
-import { Switch } from "@components/UI/Switch.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { subscribeAll } from "@core/subscriptions.js";
-import { randId } from "@core/utils/randId.js";
+import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import { Button } from "@components/UI/Button.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { Label } from "@components/UI/Label.tsx";
+import { Switch } from "@components/UI/Switch.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
+import { subscribeAll } from "@core/subscriptions.ts";
+import { randId } from "@core/utils/randId.ts";
 import { HttpConnection } from "@meshtastic/js";
+import { useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";

 export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
@@ -20,7 +20,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
  }>({
    defaultValues: {
      ip: ["client.meshtastic.org", "localhost"].includes(
-        window.location.hostname
+        window.location.hostname,
      )
        ? "meshtastic.local"
        : window.location.hostname,
@@ -34,7 +34,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {

  const onSubmit = handleSubmit(async (data) => {
    setConnectionInProgress(true);
-    
+
    const id = randId();
    const device = addDevice(id);
    const connection = new HttpConnection(id);
@@ -69,7 +69,12 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
              <Label>Use HTTPS</Label>
              <Switch
                onCheckedChange={(checked) => {checked ? setHTTPS(true) : setHTTPS(false) }}
-                disabled={connectionInProgress}
+                // label="Use TLS"
+                // description="Description"
+                disabled={
+                  location.protocol === "https:" || connectionInProgress
+                }
+                checked={value}
                {...rest}
              />
            </>
@@ -77,7 +82,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
        />
      </div>
      <Button type="submit" disabled={connectionInProgress}>
-        <span>{connectionInProgress ? 'Connecting...' : 'Connect' }</span>
+        <span>{connectionInProgress ? "Connecting..." : "Connect"}</span>
      </Button>
    </form>
  );
@@ -1,10 +1,10 @@
-import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
-import { Button } from "@components/UI/Button.js";
-import { Mono } from "@components/generic/Mono.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { subscribeAll } from "@core/subscriptions.js";
-import { randId } from "@core/utils/randId.js";
+import type { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
+import { Button } from "@components/UI/Button.tsx";
+import { Mono } from "@components/generic/Mono.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
+import { subscribeAll } from "@core/subscriptions.ts";
+import { randId } from "@core/utils/randId.ts";
 import { SerialConnection } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";

@@ -14,13 +14,13 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
  const { setSelectedDevice } = useAppStore();

  const updateSerialPortList = useCallback(async () => {
-    setSerialPorts(await navigator.serial.getPorts());
+    setSerialPorts(await navigator?.serial.getPorts());
  }, []);

-  navigator.serial.addEventListener("connect", () => {
+  navigator?.serial?.addEventListener("connect", () => {
    updateSerialPortList();
  });
-  navigator.serial.addEventListener("disconnect", () => {
+  navigator?.serial?.addEventListener("disconnect", () => {
    updateSerialPortList();
  });
  useEffect(() => {
@@ -48,19 +48,22 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
  return (
    <div className="flex w-full flex-col gap-2 p-4">
      <div className="flex h-48 flex-col gap-2 overflow-y-auto">
-        {serialPorts.map((port, index) => (
-          <Button
-            key={index}
-            disabled={port.readable !== null}
-            onClick={async () => {
-              await onConnect(port);
-            }}
-          >
-            {`# ${index} - ${port.getInfo().usbVendorId ?? "UNK"} - ${
-              port.getInfo().usbProductId ?? "UNK"
-            }`}
-          </Button>
-        ))}
+        {serialPorts.map((port, index) => {
+          const { usbProductId, usbVendorId } = port.getInfo();
+          return (
+            <Button
+              key={`${usbVendorId ?? "UNK"}-${usbProductId ?? "UNK"}-${index}`}
+              disabled={port.readable !== null}
+              onClick={async () => {
+                await onConnect(port);
+              }}
+            >
+              {`# ${index} - ${usbVendorId ?? "UNK"} - ${
+                usbProductId ?? "UNK"
+              }`}
+            </Button>
+          );
+        })}
        {serialPorts.length === 0 && (
          <Mono className="m-auto select-none">No devices paired yet.</Mono>
        )}
@@ -0,0 +1,171 @@
+import { Separator } from "@app/components/UI/Seperator";
+import { H5 } from "@app/components/UI/Typography/H5.tsx";
+import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import { Avatar } from "@components/UI/Avatar";
+import { Mono } from "@components/generic/Mono.tsx";
+import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
+import { Protobuf } from "@meshtastic/js";
+import type { Protobuf as ProtobufType } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import {
+  BatteryChargingIcon,
+  BatteryFullIcon,
+  BatteryLowIcon,
+  BatteryMediumIcon,
+  Dot,
+  LockIcon,
+  LockOpenIcon,
+  MountainSnow,
+  Star,
+} from "lucide-react";
+
+export interface NodeDetailProps {
+  node: ProtobufType.Mesh.NodeInfo;
+}
+
+export const NodeDetail = ({ node }: NodeDetailProps) => {
+  const name = node.user?.longName || `!${numberToHexUnpadded(node.num)}`;
+  const hardwareType = Protobuf.Mesh.HardwareModel[
+    node.user?.hwModel ?? 0
+  ].replaceAll("_", " ");
+
+  return (
+    <div className="dark:text-black">
+      <div className="flex gap-2">
+        <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
+          <Avatar text={node.user?.shortName} />
+
+          <div>
+            {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
+              <LockIcon
+                className="text-green-600"
+                size={12}
+                strokeWidth={3}
+                aria-label="Public Key Enabled"
+              />
+            ) : (
+              <LockOpenIcon
+                className="text-yellow-500"
+                size={12}
+                strokeWidth={3}
+                aria-label="No Public Key"
+              />
+            )}
+          </div>
+
+          <Star
+            fill={node.isFavorite ? "black" : "none"}
+            size={15}
+            aria-label={node.isFavorite ? "Favorite" : "Not a Favorite"}
+          />
+        </div>
+
+        <div>
+          <H5>{name}</H5>
+
+          {hardwareType !== "UNSET" && <Subtle>{hardwareType}</Subtle>}
+
+          {!!node.deviceMetrics?.batteryLevel && (
+            <div
+              className="flex items-center gap-1"
+              title={`${
+                node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
+              } volts`}
+            >
+              {node.deviceMetrics?.batteryLevel > 100 ? (
+                <BatteryChargingIcon size={22} />
+              ) : node.deviceMetrics?.batteryLevel > 80 ? (
+                <BatteryFullIcon size={22} />
+              ) : node.deviceMetrics?.batteryLevel > 20 ? (
+                <BatteryMediumIcon size={22} />
+              ) : (
+                <BatteryLowIcon size={22} />
+              )}
+              <Subtle aria-label="Battery">
+                {node.deviceMetrics?.batteryLevel > 100
+                  ? "Charging"
+                  : `${node.deviceMetrics?.batteryLevel}%`}
+              </Subtle>
+            </div>
+          )}
+
+          <div className="flex gap-2 items-center">
+            {node.user?.shortName && <div>"{node.user?.shortName}"</div>}
+            {node.user?.id && <div>{node.user?.id}</div>}
+          </div>
+
+          <div
+            className="flex gap-1"
+            title={new Date(node.lastHeard * 1000).toLocaleString(
+              navigator.language,
+            )}
+          >
+            <div>
+              {node.lastHeard > 0 && (
+                <div>
+                  Heard <TimeAgo timestamp={node.lastHeard * 1000} />
+                </div>
+              )}
+            </div>
+            {node.viaMqtt && (
+              <div style={{ color: "#660066" }} className="font-medium">
+                MQTT
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Separator className="my-1" />
+
+      <div className="flex mt-2 text-sm">
+        <div className="flex items-center flex-grow">
+          <div className="border-2 border-black rounded px-0.5 mr-1">
+            {Number.isNaN(node.hopsAway) ? "?" : node.hopsAway}
+          </div>
+          <div>{node.hopsAway === 1 ? "Hop" : "Hops"}</div>
+        </div>
+        {node.position?.altitude && (
+          <div className="flex items-center flex-grow">
+            <MountainSnow
+              size={15}
+              className="ml-2 mr-1"
+              aria-label="Elevation"
+            />
+            <div>{node.position?.altitude} ft</div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex mt-2">
+        {!!node.deviceMetrics?.channelUtilization && (
+          <div className="flex-grow">
+            <div>Channel Util</div>
+            <Mono>
+              {node.deviceMetrics?.channelUtilization.toPrecision(3)}%
+            </Mono>
+          </div>
+        )}
+        {!!node.deviceMetrics?.airUtilTx && (
+          <div className="flex-grow">
+            <div>Airtime Util</div>
+            <Mono>{node.deviceMetrics?.airUtilTx.toPrecision(3)}%</Mono>
+          </div>
+        )}
+      </div>
+
+      {node.snr !== 0 && (
+        <div className="mt-2">
+          <div>SNR</div>
+          <Mono className="flex items-center text-xs">
+            {node.snr}db
+            <Dot />
+            {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%
+            <Dot />
+            {(node.snr + 10) * 5}raw
+          </Mono>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -1,45 +1,74 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.js";
-import { MessageWithState, useDevice } from "@app/core/stores/deviceStore.js";
-import { Message } from "@components/PageComponents/Messages/Message.js";
-import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
-import type { Types } from "@meshtastic/js";
+import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import {
+  type MessageWithState,
+  useDevice,
+} from "@app/core/stores/deviceStore.ts";
+import { Message } from "@components/PageComponents/Messages/Message.tsx";
+import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
+import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.tsx";
+import type { Protobuf, Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";

 export interface ChannelChatProps {
  messages?: MessageWithState[];
  channel: Types.ChannelNumber;
  to: Types.Destination;
+  traceroutes?: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[];
 }

 export const ChannelChat = ({
  messages,
  channel,
  to,
+  traceroutes,
 }: ChannelChatProps): JSX.Element => {
  const { nodes } = useDevice();

  return (
    <div className="flex flex-grow flex-col">
-      <div className="flex flex-grow flex-col">
-        {messages ? (
-          messages.map((message, index) => (
-            <Message
-              key={message.id}
-              message={message}
-              lastMsgSameUser={
-                index === 0 ? false : messages[index - 1].from === message.from
-              }
-              sender={nodes.get(message.from)}
-            />
-          ))
-        ) : (
-          <div className="m-auto">
-            <InboxIcon className="m-auto" />
-            <Subtle>No Messages</Subtle>
-          </div>
-        )}
+      <div className="flex flex-grow">
+        <div className="flex flex-grow flex-col">
+          {messages ? (
+            messages.map((message, index) => (
+              <Message
+                key={message.id}
+                message={message}
+                lastMsgSameUser={
+                  index === 0
+                    ? false
+                    : messages[index - 1].from === message.from
+                }
+                sender={nodes.get(message.from)}
+              />
+            ))
+          ) : (
+            <div className="m-auto">
+              <InboxIcon className="m-auto" />
+              <Subtle>No Messages</Subtle>
+            </div>
+          )}
+        </div>
+        <div
+          className={`flex flex-grow flex-col border-slate-400 border-l ${traceroutes === undefined ? "hidden" : ""}`}
+        >
+          {to === "broadcast" ? null : traceroutes ? (
+            traceroutes.map((traceroute, index) => (
+              <TraceRoute
+                key={traceroute.id}
+                from={nodes.get(traceroute.from)}
+                to={nodes.get(traceroute.to)}
+                route={traceroute.data.route}
+              />
+            ))
+          ) : (
+            <div className="m-auto">
+              <InboxIcon className="m-auto" />
+              <Subtle>No Traceroutes</Subtle>
+            </div>
+          )}
+        </div>
      </div>
-      <div className="p-3">
+      <div className="pl-3 pr-3 pt-3 pb-1">
        <MessageInput to={to} channel={channel} />
      </div>
    </div>
@@ -1,5 +1,5 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.js";
-import { Hashicon } from "@emeraldpay/hashicon-react";
+import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
+import { Avatar } from "@components/UI/Avatar";
 import type { Protobuf } from "@meshtastic/js";
 import {
  AlertCircleIcon,
@@ -13,11 +13,7 @@ export interface MessageProps {
  sender?: Protobuf.Mesh.NodeInfo;
 }

-export const Message = ({
-  lastMsgSameUser,
-  message,
-  sender,
-}: MessageProps): JSX.Element => {
+export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
  return lastMsgSameUser ? (
    <div className="ml-5 flex">
      {message.state === "ack" ? (
@@ -39,11 +35,14 @@ export const Message = ({
    <div className="mx-4 mt-2 gap-2">
      <div className="flex gap-2">
        <div className="w-6 cursor-pointer">
-          <Hashicon value={(sender?.num ?? 0).toString()} size={32} />
+          <Avatar text={sender?.user?.shortName ?? "UNK"} />
        </div>
        <span className="cursor-pointer font-medium text-textPrimary">
          {sender?.user?.longName ?? "UNK"}
        </span>
+        <span className="mt-1 font-mono text-xs text-textSecondary">
+          {message.rxTime.toLocaleDateString()}
+        </span>
        <span className="mt-1 font-mono text-xs text-textSecondary">
          {message.rxTime.toLocaleTimeString(undefined, {
            hour: "2-digit",
@@ -1,8 +1,10 @@
-import { Button } from "@components/UI/Button.js";
-import { Input } from "@components/UI/Input.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { debounce } from "@app/core/utils/debounce";
+import { Button } from "@components/UI/Button.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/js";
 import { SendIcon } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";

 export interface MessageInputProps {
  to: Types.Destination;
@@ -20,32 +22,46 @@ export const MessageInput = ({
    setMessageDraft,
    hardware,
  } = useDevice();
-
  const myNodeNum = hardware.myNodeNum;
+  const [localDraft, setLocalDraft] = useState(messageDraft);

-  const sendText = async (message: string) => {
-    await connection
-      ?.sendText(message, to, true, channel)
-      .then((id) =>
-        setMessageState(
-          to === "broadcast" ? "broadcast" : "direct",
-          channel,
-          to as number,
-          myNodeNum,
-          id,
-          "ack",
-        ),
-      )
-      .catch((e: Types.PacketError) =>
-        setMessageState(
-          to === "broadcast" ? "broadcast" : "direct",
-          channel,
-          to as number,
-          myNodeNum,
-          e.id,
-          e.error,
-        ),
-      );
+  const debouncedSetMessageDraft = useMemo(
+    () => debounce(setMessageDraft, 300),
+    [setMessageDraft],
+  );
+
+  const sendText = useCallback(
+    async (message: string) => {
+      await connection
+        ?.sendText(message, to, true, channel)
+        .then((id) =>
+          setMessageState(
+            to === "broadcast" ? "broadcast" : "direct",
+            channel,
+            to as number,
+            myNodeNum,
+            id,
+            "ack",
+          ),
+        )
+        .catch((e: Types.PacketError) =>
+          setMessageState(
+            to === "broadcast" ? "broadcast" : "direct",
+            channel,
+            to as number,
+            myNodeNum,
+            e.id,
+            e.error,
+          ),
+        );
+    },
+    [channel, connection, myNodeNum, setMessageState, to],
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setLocalDraft(newValue);
+    debouncedSetMessageDraft(newValue);
  };

  return (
@@ -54,7 +70,8 @@ export const MessageInput = ({
        className="w-full"
        onSubmit={(e) => {
          e.preventDefault();
-          sendText(messageDraft);
+          sendText(localDraft);
+          setLocalDraft("");
          setMessageDraft("");
        }}
      >
@@ -62,10 +79,10 @@ export const MessageInput = ({
          <span className="w-full">
            <Input
              autoFocus={true}
-              minLength={2}
+              minLength={1}
              placeholder="Enter Message"
-              value={messageDraft}
-              onChange={(e) => setMessageDraft(e.target.value)}
+              value={localDraft}
+              onChange={handleInputChange}
            />
          </span>
          <Button type="submit">
@@ -0,0 +1,36 @@
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import type { Protobuf } from "@meshtastic/js";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+
+export interface TraceRouteProps {
+  from?: Protobuf.Mesh.NodeInfo;
+  to?: Protobuf.Mesh.NodeInfo;
+  route: Array<number>;
+}
+
+export const TraceRoute = ({
+  from,
+  to,
+  route,
+}: TraceRouteProps): JSX.Element => {
+  const { nodes } = useDevice();
+
+  return route.length === 0 ? (
+    <div className="ml-5 flex">
+      <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+        {to?.user?.longName}↔{from?.user?.longName}
+      </span>
+    </div>
+  ) : (
+    <div className="ml-5 flex">
+      <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+        {to?.user?.longName}↔
+        {route.map((hop) => {
+          const node = nodes.get(hop);
+          return `${node?.user?.longName ?? (node?.num ? numberToHexUnpadded(node.num) : "Unknown")}↔`;
+        })}
+        {from?.user?.longName}
+      </span>
+    </div>
+  );
+};
@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import type { AmbientLightingValidation } from "@app/validation/moduleConfig/ambientLighting.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import type { AmbientLightingValidation } from "@app/validation/moduleConfig/ambientLighting.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";

 export const AmbientLighting = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import type { AudioValidation } from "@app/validation/moduleConfig/audio.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { AudioValidation } from "@app/validation/moduleConfig/audio.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Audio = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { CannedMessageValidation } from "@app/validation/moduleConfig/cannedMessage.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const CannedMessage = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import type { DetectionSensorValidation } from "@app/validation/moduleConfig/detectionSensor.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import type { DetectionSensorValidation } from "@app/validation/moduleConfig/detectionSensor.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";

 export const DetectionSensor = (): JSX.Element => {
@@ -38,9 +38,9 @@ export const DetectionSensor = (): JSX.Element => {
              label: "Minimum Broadcast Seconds",
              description:
                "The interval in seconds of how often we can send a message to the mesh when a state change is detected",
-                properties: {
-                  suffix: "Seconds",
-                },  
+              properties: {
+                suffix: "Seconds",
+              },
              disabledBy: [
                {
                  fieldName: "enabled",
@@ -1,6 +1,6 @@
-import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { ExternalNotificationValidation } from "@app/validation/moduleConfig/externalNotification.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const ExternalNotification = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import type { MqttValidation } from "@app/validation/moduleConfig/mqtt.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import type { MqttValidation } from "@app/validation/moduleConfig/mqtt.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";

 export const MQTT = (): JSX.Element => {
@@ -11,7 +11,13 @@ export const MQTT = (): JSX.Element => {
      new Protobuf.ModuleConfig.ModuleConfig({
        payloadVariant: {
          case: "mqtt",
-          value: data,
+          value: {
+            ...data,
+            mapReportSettings:
+              new Protobuf.ModuleConfig.ModuleConfig_MapReportSettings(
+                data.mapReportSettings,
+              ),
+          },
        },
      }),
    );
@@ -70,7 +76,8 @@ export const MQTT = (): JSX.Element => {
              type: "toggle",
              name: "encryptionEnabled",
              label: "Encryption Enabled",
-              description: "Enable or disable MQTT encryption. Note: All messages are sent to the MQTT broker unencrypted if this option is not enabled, even when your uplink channels have encryption keys set. This includes position data.",
+              description:
+                "Enable or disable MQTT encryption. Note: All messages are sent to the MQTT broker unencrypted if this option is not enabled, even when your uplink channels have encryption keys set. This includes position data.",
              disabledBy: [
                {
                  fieldName: "enabled",
@@ -157,9 +164,32 @@ export const MQTT = (): JSX.Element => {
              description:
                "Position shared will be accurate within this distance",
              properties: {
-                enumValue: config.display?.units == 0 ?
-                { "Within 23 km":10, "Within 12 km":11, "Within 5.8 km":12, "Within 2.9 km":13, "Within 1.5 km":14, "Within 700 m":15, "Within 350 m":16, "Within 200 m":17, "Within 90 m":18, "Within 50 m":19 } :
-                { "Within 15 miles":10, "Within 7.3 miles":11, "Within 3.6 miles":12, "Within 1.8 miles":13, "Within 0.9 miles":14, "Within 0.5 miles":15, "Within 0.2 miles":16, "Within 600 feet":17, "Within 300 feet":18, "Within 150 feet":19 }
+                enumValue:
+                  config.display?.units === 0
+                    ? {
+                        "Within 23 km": 10,
+                        "Within 12 km": 11,
+                        "Within 5.8 km": 12,
+                        "Within 2.9 km": 13,
+                        "Within 1.5 km": 14,
+                        "Within 700 m": 15,
+                        "Within 350 m": 16,
+                        "Within 200 m": 17,
+                        "Within 90 m": 18,
+                        "Within 50 m": 19,
+                      }
+                    : {
+                        "Within 15 miles": 10,
+                        "Within 7.3 miles": 11,
+                        "Within 3.6 miles": 12,
+                        "Within 1.8 miles": 13,
+                        "Within 0.9 miles": 14,
+                        "Within 0.5 miles": 15,
+                        "Within 0.2 miles": 16,
+                        "Within 600 feet": 17,
+                        "Within 300 feet": 18,
+                        "Within 150 feet": 19,
+                      },
              },
              disabledBy: [
                {
@@ -1,6 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import type { NeighborInfoValidation } from "@app/validation/moduleConfig/neighborInfo.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import type { NeighborInfoValidation } from "@app/validation/moduleConfig/neighborInfo.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { Protobuf } from "@meshtastic/js";

 export const NeighborInfo = (): JSX.Element => {
@@ -36,7 +36,7 @@ export const NeighborInfo = (): JSX.Element => {
              type: "number",
              name: "updateInterval",
              label: "Update Interval",
-              description: 
+              description:
                "Interval in seconds of how often we should try to send our Neighbor Info to the mesh",
              properties: {
                suffix: "Seconds",
@@ -1,6 +1,6 @@
-import type { PaxcounterValidation } from "@app/validation/moduleConfig/paxcounter.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { PaxcounterValidation } from "@app/validation/moduleConfig/paxcounter.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Paxcounter = (): JSX.Element => {
@@ -36,7 +36,8 @@ export const Paxcounter = (): JSX.Element => {
              type: "number",
              name: "paxcounterUpdateInterval",
              label: "Update Interval (seconds)",
-              description: "How long to wait between sending paxcounter packets",
+              description:
+                "How long to wait between sending paxcounter packets",
              properties: {
                suffix: "Seconds",
              },
@@ -1,6 +1,6 @@
-import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const RangeTest = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import type { SerialValidation } from "@app/validation/moduleConfig/serial.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { SerialValidation } from "@app/validation/moduleConfig/serial.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Serial = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeForward.ts";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const StoreForward = (): JSX.Element => {
@@ -1,6 +1,6 @@
-import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.js";
-import { DynamicForm } from "@components/Form/DynamicForm.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry.tsx";
+import { DynamicForm } from "@components/Form/DynamicForm.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";

 export const Telemetry = (): JSX.Element => {
@@ -87,7 +87,7 @@ export const Telemetry = (): JSX.Element => {
              description: "How often to send Power data over the mesh",
            },
            {
-              type: "text",
+              type: "toggle",
              name: "powerScreenEnabled",
              label: "Power Screen Enabled",
              description: "Enable the Power Telemetry Screen",