Merge pull request #336 from rcarteraz/master

Fix Title

.github/workflows/ci.yml

@@ -1,6 +1,9 @@
 name: CI
 
-on: push
+on:
+  push:
+    branches:
+      - master
 
 permissions:
   contents: write
@@ -21,42 +24,3 @@ jobs:
 
       - name: Build Package
         run: pnpm build
-
-      - name: Package Output
-        run: pnpm package
-
-      - name: Upload Artifact
-        uses: "marvinpinto/action-automatic-releases@latest"
-        with:
-          repo_token: "${{ secrets.GITHUB_TOKEN }}"
-          automatic_release_tag: "latest"
-          prerelease: false
-          files: |
-            ./dist/build.tar
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Buildah Build
-        id: build-container
-        uses: redhat-actions/buildah-build@v2
-        with:
-          containerfiles: |
-            ./Containerfile
-          image: ${{github.event.repository.full_name}}
-          tags: latest ${{ github.sha }}
-          oci: true
-          platforms: linux/amd64, linux/arm64
-
-      - name: Push To Registry
-        id: push-to-registry
-        uses: redhat-actions/push-to-registry@v2
-        with:
-          image: ${{ steps.build-container.outputs.image }}
-          tags: ${{ steps.build-container.outputs.tags }}
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Print image url
-        run: echo "Image pushed to ${{ steps.push-to-registry.outputs.registry-paths }}"

.github/workflows/pr.yml

@@ -19,3 +19,12 @@ jobs:
 
       - name: Build Package
         run: pnpm build
+
+      - name: Compress build
+        run: pnpm package
+
+      - name: Archive compressed build
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: dist/build.tar

.github/workflows/release.yml

@@ -0,0 +1,61 @@
+name: 'Release'
+
+on:
+  release:
+    types: [released]
+
+permissions:
+  contents: write
+  packages: write
+
+jobs:
+  build-and-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build Package
+        run: pnpm build
+
+      - name: Package Output
+        run: pnpm package
+
+      - name: Archive compressed build
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: dist/build.tar
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Buildah Build
+        id: build-container
+        uses: redhat-actions/buildah-build@v2
+        with:
+          containerfiles: |
+            ./Containerfile
+          image: ${{github.event.repository.full_name}}
+          tags: latest ${{ github.sha }}
+          oci: true
+          platforms: linux/amd64, linux/arm64
+
+      - name: Push To Registry
+        id: push-to-registry
+        uses: redhat-actions/push-to-registry@v2
+        with:
+          image: ${{ steps.build-container.outputs.image }}
+          tags: ${{ steps.build-container.outputs.tags }}
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Print image url
+        run: echo "Image pushed to ${{ steps.push-to-registry.outputs.registry-paths }}"

package.json

@@ -5,11 +5,12 @@
   "description": "Meshtastic web client",
   "license": "GPL-3.0-only",
   "scripts": {
-    "dev": "vite --host",
-    "build": "tsc && pnpm check && vite build ",
+    "build": "rsbuild build",
     "check": "biome check .",
     "check:fix": "pnpm check --write",
-    "preview": "vite preview",
+    "dev": "rsbuild dev --open",
+    "format": "biome format --write",
+    "preview": "rsbuild preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)"
   },
   "repository": {
@@ -23,7 +24,8 @@
   "dependencies": {
     "@bufbuild/protobuf": "^1.10.0",
     "@emeraldpay/hashicon-react": "^0.5.2",
-    "@meshtastic/js": "2.3.7-1",
+    "@meshtastic/js": "2.3.7-5",
+    "@noble/curves": "^1.5.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -48,7 +50,7 @@
     "crypto-random-string": "^5.0.0",
     "immer": "^10.1.1",
     "lucide-react": "^0.363.0",
-    "mapbox-gl": "npm:empty-npm-package@^1.0.0",
+    "mapbox-gl": "^3.6.0",
     "maplibre-gl": "4.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -59,18 +61,20 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "timeago-react": "^3.0.6",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "zustand": "4.5.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.2",
-    "@buf/meshtastic_protobufs.bufbuild_es": "1.10.0-20240820152623-fac6975bbc78.1",
+    "@buf/meshtastic_protobufs.bufbuild_es": "1.10.0-20240906232734-3da561588c55.1",
+    "@rsbuild/core": "^1.0.10",
+    "@rsbuild/plugin-react": "^1.0.3",
     "@types/chrome": "^0.0.263",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/w3c-web-serial": "^1.0.6",
     "@types/web-bluetooth": "^0.0.20",
-    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "gzipper": "^7.2.0",
     "postcss": "^8.4.38",
@@ -78,8 +82,6 @@
     "tailwindcss": "^3.4.4",
     "tar": "^6.2.1",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.1",
-    "vite-plugin-environment": "^1.1.3"
+    "typescript": "^5.5.2"
   }
 }

rsbuild.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginReact } from "@rsbuild/plugin-react";
+import { execSync } from "node:child_process";
+
+let hash = "";
+
+try {
+  hash = execSync("git rev-parse --short HEAD").toString().trim();
+} catch (error) {
+  hash = "DEV";
+}
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    define: {
+      "process.env.COMMIT_HASH": JSON.stringify(hash),
+    },
+    alias: {
+      "@app": "./src",
+      "@pages": "./src/pages",
+      "@components": "./src/components",
+      "@core": "./src/core",
+      "@layouts": "./src/layouts",
+    },
+  },
+  html: {
+    title: "Meshtastic Web",
+  },
+});

src/App.tsx

@@ -1,14 +1,15 @@
-import { DeviceWrapper } from "@app/DeviceWrapper.js";
-import { PageRouter } from "@app/PageRouter.js";
-import { CommandPalette } from "@components/CommandPalette.js";
-import { DeviceSelector } from "@components/DeviceSelector.js";
-import { DialogManager } from "@components/Dialog/DialogManager.js";
-import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.js";
-import { Toaster } from "@components/Toaster.js";
-import { ThemeController } from "@components/generic/ThemeController.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
-import { Dashboard } from "@pages/Dashboard/index.js";
+import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
+import { PageRouter } from "@app/PageRouter.tsx";
+import { CommandPalette } from "@components/CommandPalette.tsx";
+import { DeviceSelector } from "@components/DeviceSelector.tsx";
+import { DialogManager } from "@components/Dialog/DialogManager.tsx";
+import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.tsx";
+import { Toaster } from "@components/Toaster.tsx";
+import Footer from "@components/UI/Footer.tsx";
+import { ThemeController } from "@components/generic/ThemeController.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
+import { Dashboard } from "@pages/Dashboard/index.tsx";
 import { MapProvider } from "react-map-gl";
 
 export const App = (): JSX.Element => {
@@ -40,7 +41,11 @@ export const App = (): JSX.Element => {
                     <PageRouter />
                   </div>
                 ) : (
-                  <Dashboard />
+                  <>
+                    <Dashboard />
+                    <div className="flex flex-grow" />
+                    <Footer />
+                  </>
                 )}
               </div>
             </div>

src/DeviceWrapper.tsx

@@ -1,5 +1,5 @@
-import { DeviceContext } from "@core/stores/deviceStore.js";
-import type { Device } from "@core/stores/deviceStore.js";
+import { DeviceContext } from "@core/stores/deviceStore.ts";
+import type { Device } from "@core/stores/deviceStore.ts";
 import type { ReactNode } from "react";
 
 export interface DeviceWrapperProps {

src/PageRouter.tsx

@@ -1,9 +1,9 @@
-import { useDevice } from "@core/stores/deviceStore.js";
-import { ChannelsPage } from "@pages/Channels.js";
-import { ConfigPage } from "@pages/Config/index.js";
-import { MapPage } from "@pages/Map.js";
-import { MessagesPage } from "@pages/Messages.js";
-import { NodesPage } from "@pages/Nodes.js";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import { ChannelsPage } from "@pages/Channels.tsx";
+import { ConfigPage } from "@pages/Config/index.tsx";
+import { MapPage } from "@pages/Map.tsx";
+import { MessagesPage } from "@pages/Messages.tsx";
+import { NodesPage } from "@pages/Nodes.tsx";
 
 export const PageRouter = (): JSX.Element => {
   const { activePage } = useDevice();

src/components/CommandPalette.tsx

@@ -5,9 +5,9 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@components/UI/Command.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDevice, useDeviceStore } from "@core/stores/deviceStore.js";
+} from "@components/UI/Command.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDevice, useDeviceStore } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { useCommandState } from "cmdk";
 import {

src/components/DeviceSelector.tsx

@@ -1,8 +1,8 @@
-import { DeviceSelectorButton } from "@components/DeviceSelectorButton.js";
-import { Separator } from "@components/UI/Seperator.js";
-import { Code } from "@components/UI/Typography/Code.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDeviceStore } from "@core/stores/deviceStore.js";
+import { DeviceSelectorButton } from "@components/DeviceSelectorButton.tsx";
+import { Separator } from "@components/UI/Seperator.tsx";
+import { Code } from "@components/UI/Typography/Code.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
   HomeIcon,

src/components/Dialog/DeviceNameDialog.tsx

@@ -1,5 +1,5 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import { Button } from "@components/UI/Button.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
@@ -7,9 +7,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
-import { Input } from "@components/UI/Input.js";
-import { Label } from "@components/UI/Label.js";
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { Label } from "@components/UI/Label.tsx";
 import { Protobuf } from "@meshtastic/js";
 import { useForm } from "react-hook-form";
 

src/components/Dialog/DialogManager.tsx

@@ -1,10 +1,10 @@
-import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.js";
-import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.js";
-import { ImportDialog } from "@components/Dialog/ImportDialog.js";
-import { QRDialog } from "@components/Dialog/QRDialog.js";
-import { RebootDialog } from "@components/Dialog/RebootDialog.js";
-import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.tsx";
+import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.tsx";
+import { ImportDialog } from "@components/Dialog/ImportDialog.tsx";
+import { QRDialog } from "@components/Dialog/QRDialog.tsx";
+import { RebootDialog } from "@components/Dialog/RebootDialog.tsx";
+import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 
 export const DialogManager = (): JSX.Element => {
   const { channels, config, dialog, setDialogOpen } = useDevice();

src/components/Dialog/ImportDialog.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@components/UI/Button.js";
-import { Checkbox } from "@components/UI/Checkbox.js";
+import { Button } from "@components/UI/Button.tsx";
+import { Checkbox } from "@components/UI/Checkbox.tsx";
 import {
   Dialog,
   DialogContent,
@@ -7,11 +7,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
-import { Input } from "@components/UI/Input.js";
-import { Label } from "@components/UI/Label.js";
-import { Switch } from "@components/UI/Switch.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { Label } from "@components/UI/Label.tsx";
+import { Switch } from "@components/UI/Switch.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/js";
 import { toByteArray } from "base64-js";
 import { useEffect, useState } from "react";

src/components/Dialog/NewDeviceDialog.tsx

@@ -1,20 +1,20 @@
-import { BLE } from "@components/PageComponents/Connect/BLE.js";
-import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
-import { Serial } from "@components/PageComponents/Connect/Serial.js";
+import { BLE } from "@components/PageComponents/Connect/BLE.tsx";
+import { HTTP } from "@components/PageComponents/Connect/HTTP.tsx";
+import { Serial } from "@components/PageComponents/Connect/Serial.tsx";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
+} from "@components/UI/Dialog.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@components/UI/Tabs.js";
-import { Link } from "@components/UI/Typography/Link.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+} from "@components/UI/Tabs.tsx";
+import { Link } from "@components/UI/Typography/Link.tsx";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 
 export interface TabElementProps {
   closeDialog: () => void;

src/components/Dialog/PkiRegenerateDialog.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+
+export interface PkiRegenerateDialogProps {
+  open: boolean;
+  onOpenChange: () => void;
+  onSubmit: () => void;
+}
+
+export const PkiRegenerateDialog = ({
+  open,
+  onOpenChange,
+  onSubmit,
+}: PkiRegenerateDialogProps): JSX.Element => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Regenerate Key pair?</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to regenerate key pair?
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="destructive" onClick={() => onSubmit()}>
+            Regenerate
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/Dialog/QRDialog.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from "@components/UI/Checkbox.js";
+import { Checkbox } from "@components/UI/Checkbox.tsx";
 import {
   Dialog,
   DialogContent,
@@ -6,9 +6,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
-import { Input } from "@components/UI/Input.js";
-import { Label } from "@components/UI/Label.js";
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { Label } from "@components/UI/Label.tsx";
 import { Protobuf, type Types } from "@meshtastic/js";
 import { fromByteArray } from "base64-js";
 import { ClipboardIcon } from "lucide-react";

src/components/Dialog/RebootDialog.tsx

@@ -1,13 +1,13 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
-import { Input } from "@components/UI/Input.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { ClockIcon, RefreshCwIcon } from "lucide-react";
 import { useState } from "react";
 

src/components/Dialog/RemoveNodeDialog.tsx

@@ -1,6 +1,6 @@
 import { useAppStore } from "@app/core/stores/appStore";
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import { Button } from "@components/UI/Button.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
@@ -8,8 +8,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
-import { Label } from "@components/UI/Label.js";
+} from "@components/UI/Dialog.tsx";
+import { Label } from "@components/UI/Label.tsx";
 
 export interface RemoveNodeDialogProps {
   open: boolean;

src/components/Dialog/ShutdownDialog.tsx

@@ -1,13 +1,13 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@components/UI/Dialog.js";
-import { Input } from "@components/UI/Input.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { ClockIcon, PowerIcon } from "lucide-react";
 import { useState } from "react";
 

src/components/Form/DynamicForm.tsx

@@ -1,11 +1,11 @@
 import {
   DynamicFormField,
   type FieldProps,
-} from "@components/Form/DynamicFormField.js";
-import { FieldWrapper } from "@components/Form/FormWrapper.js";
-import { Button } from "@components/UI/Button.js";
-import { H4 } from "@components/UI/Typography/H4.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+} from "@components/Form/DynamicFormField.tsx";
+import { FieldWrapper } from "@components/Form/FormWrapper.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import { H4 } from "@components/UI/Typography/H4.tsx";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import {
   type Control,
   type DefaultValues,

src/components/Form/DynamicFormField.tsx

@@ -1,19 +1,19 @@
 import {
   GenericInput,
   type InputFieldProps,
-} from "@components/Form/FormInput.js";
+} from "@components/Form/FormInput.tsx";
 import {
   PasswordGenerator,
   type PasswordGeneratorProps,
-} from "@components/Form/FormPasswordGenerator.js";
+} from "@components/Form/FormPasswordGenerator.tsx";
 import {
   type SelectFieldProps,
   SelectInput,
-} from "@components/Form/FormSelect.js";
+} from "@components/Form/FormSelect.tsx";
 import {
   type ToggleFieldProps,
   ToggleInput,
-} from "@components/Form/FormToggle.js";
+} from "@components/Form/FormToggle.tsx";
 import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =

src/components/Form/FormInput.tsx

@@ -1,14 +1,19 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
-import { Input } from "@components/UI/Input.js";
+} from "@components/Form/DynamicForm.tsx";
+import { Input } from "@components/UI/Input.tsx";
 import type { LucideIcon } from "lucide-react";
+import { Eye, EyeOff } from "lucide-react";
+import type { ChangeEventHandler } from "react";
+import { useState } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "text" | "number" | "password";
+  inputChange?: ChangeEventHandler;
   properties?: {
+    value?: string;
     prefix?: string;
     suffix?: string;
     step?: number;
@@ -24,22 +29,38 @@ export function GenericInput<T extends FieldValues>({
   disabled,
   field,
 }: GenericFormElementProps<T, InputFieldProps<T>>) {
+  const [passwordShown, setPasswordShown] = useState(false);
+  const togglePasswordVisiblity = () => {
+    setPasswordShown(!passwordShown);
+  };
+
   return (
     <Controller
       name={field.name}
       control={control}
       render={({ field: { value, onChange, ...rest } }) => (
         <Input
-          type={field.type}
+          type={
+            field.type === "password" && passwordShown ? "text" : field.type
+          }
+          action={
+            field.type === "password"
+              ? {
+                  icon: passwordShown ? EyeOff : Eye,
+                  onClick: togglePasswordVisiblity,
+                }
+              : undefined
+          }
           step={field.properties?.step}
           value={field.type === "number" ? Number.parseFloat(value) : value}
-          onChange={(e) =>
+          onChange={(e) => {
+            if (field.inputChange) field.inputChange(e);
             onChange(
               field.type === "number"
                 ? Number.parseFloat(e.target.value)
                 : e.target.value,
-            )
-          }
+            );
+          }}
           {...field.properties}
           {...rest}
           disabled={disabled}

src/components/Form/FormPasswordGenerator.tsx

@@ -1,14 +1,17 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
-import { Generator } from "@components/UI/Generator.js";
+} from "@components/Form/DynamicForm.tsx";
+import { Generator } from "@components/UI/Generator.tsx";
+import { Eye, EyeOff } from "lucide-react";
 import type { ChangeEventHandler, MouseEventHandler } from "react";
+import { useState } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   type: "passwordGenerator";
   hide?: boolean;
+  bits?: { text: string; value: string; key: string }[];
   devicePSKBitCount: number;
   inputChange: ChangeEventHandler;
   selectChange: (event: string) => void;
@@ -20,14 +23,28 @@ export function PasswordGenerator<T extends FieldValues>({
   field,
   disabled,
 }: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
+  const [passwordShown, setPasswordShown] = useState(false);
+  const togglePasswordVisiblity = () => {
+    setPasswordShown(!passwordShown);
+  };
+
   return (
     <Controller
       name={field.name}
       control={control}
       render={({ field: { value, ...rest } }) => (
         <Generator
-          hide={field.hide}
+          type={field.hide && !passwordShown ? "password" : "text"}
+          action={
+            field.hide
+              ? {
+                  icon: passwordShown ? EyeOff : Eye,
+                  onClick: togglePasswordVisiblity,
+                }
+              : undefined
+          }
           devicePSKBitCount={field.devicePSKBitCount}
+          bits={field.bits}
           inputChange={field.inputChange}
           selectChange={field.selectChange}
           buttonClick={field.buttonClick}

src/components/Form/FormSelect.tsx

@@ -1,14 +1,14 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
+} from "@components/Form/DynamicForm.tsx";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@components/UI/Select.js";
+} from "@components/UI/Select.tsx";
 import { Controller, type FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {

src/components/Form/FormToggle.tsx

@@ -1,8 +1,8 @@
 import type {
   BaseFormBuilderProps,
   GenericFormElementProps,
-} from "@components/Form/DynamicForm.js";
-import { Switch } from "@components/UI/Switch.js";
+} from "@components/Form/DynamicForm.tsx";
+import { Switch } from "@components/UI/Switch.tsx";
 import type { ChangeEvent } from "react";
 import { Controller, type FieldValues } from "react-hook-form";
 

src/components/Form/FormWrapper.tsx

@@ -1,4 +1,4 @@
-import { Label } from "@components/UI/Label.js";
+import { Label } from "@components/UI/Label.tsx";
 
 export interface FieldWrapperProps {
   label: string;

src/components/PageComponents/Channel.tsx

@@ -1,7 +1,7 @@
-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";
@@ -111,10 +111,14 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               type: "select",
               name: "role",
               label: "Role",
+              disabled: channel.index === 0,
               description:
                 "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
               properties: {
-                enumValue: Protobuf.Channel.Channel_Role,
+                enumValue:
+                  channel.index === 0
+                    ? { PRIMARY: 1 }
+                    : { DISABLED: 0, SECONDARY: 2 },
               },
             },
             {
@@ -127,6 +131,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               inputChange: inputChangeEvent,
               selectChange: selectChangeEvent,
               buttonClick: clickEvent,
+              hide: true,
               properties: {
                 value: pass,
               },

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,6 +1,6 @@
-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";
 
 export const Bluetooth = (): JSX.Element => {

src/components/PageComponents/Config/Device.tsx

@@ -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,7 +32,22 @@ 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,
               },
             },

src/components/PageComponents/Config/Display.tsx

@@ -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 => {

src/components/PageComponents/Config/LoRa.tsx

@@ -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 => {
@@ -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",
+            },
           ],
         },
         {

src/components/PageComponents/Config/Network.tsx

@@ -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",

src/components/PageComponents/Config/Position.tsx

@@ -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",
-            },
           ],
         },
         {

src/components/PageComponents/Config/Power.tsx

@@ -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 => {

src/components/PageComponents/Config/Security.tsx

@@ -1,9 +1,13 @@
-import { DynamicForm } from "@app/components/Form/DynamicForm.js";
-import type { SecurityValidation } from "@app/validation/config/security.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+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 cryptoRandomString from "crypto-random-string";
 import { Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
 
@@ -15,7 +19,7 @@ export const Security = (): JSX.Element => {
   );
   const [privateKeyVisible, setPrivateKeyVisible] = useState<boolean>(false);
   const [privateKeyBitCount, setPrivateKeyBitCount] = useState<number>(
-    config.security?.privateKey.length ?? 16,
+    config.security?.privateKey.length ?? 32,
   );
   const [privateKeyValidationText, setPrivateKeyValidationText] =
     useState<string>();
@@ -23,14 +27,11 @@ export const Security = (): JSX.Element => {
     fromByteArray(config.security?.publicKey ?? new Uint8Array(0)),
   );
   const [adminKey, setAdminKey] = useState<string>(
-    fromByteArray(config.security?.adminKey ?? new Uint8Array(0)),
-  );
-  const [adminKeyVisible, setAdminKeyVisible] = useState<boolean>(false);
-  const [adminKeyBitCount, setAdminKeyBitCount] = useState<number>(
-    config.security?.adminKey.length ?? 16,
+    fromByteArray(config.security?.adminKey[0] ?? new Uint8Array(0)),
   );
   const [adminKeyValidationText, setAdminKeyValidationText] =
     useState<string>();
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
   const onSubmit = (data: SecurityValidation) => {
     if (privateKeyValidationText || adminKeyValidationText) return;
@@ -41,7 +42,7 @@ export const Security = (): JSX.Element => {
           case: "security",
           value: {
             ...data,
-            adminKey: toByteArray(adminKey),
+            adminKey: [toByteArray(adminKey)],
             privateKey: toByteArray(privateKey),
             publicKey: toByteArray(publicKey),
           },
@@ -50,191 +51,187 @@ export const Security = (): JSX.Element => {
     );
   };
 
-  const clickEvent = (
-    setKey: (value: React.SetStateAction<string>) => void,
-    bitCount: number,
-    setValidationText: (
-      value: React.SetStateAction<string | undefined>,
-    ) => void,
-  ) => {
-    setKey(
-      btoa(
-        cryptoRandomString({
-          length: bitCount ?? 0,
-          type: "alphanumeric",
-        }),
-      ),
-    );
-    setValidationText(undefined);
-  };
-
-  const validatePass = (
+  const validateKey = (
     input: string,
     count: number,
     setValidationText: (
       value: React.SetStateAction<string | undefined>,
     ) => void,
   ) => {
-    if (input.length % 4 !== 0 || toByteArray(input).length !== count) {
+    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.`);
-    } else {
-      setValidationText(undefined);
     }
   };
 
+  const privateKeyClickEvent = () => {
+    setDialogOpen(true);
+  };
+
+  const pkiRegenerate = () => {
+    const privateKey = getX25519PrivateKey();
+    const publicKey = getX25519PublicKey(privateKey);
+
+    setPrivateKey(fromByteArray(privateKey));
+    setPublicKey(fromByteArray(publicKey));
+    validateKey(
+      fromByteArray(privateKey),
+      privateKeyBitCount,
+      setPrivateKeyValidationText,
+    );
+
+    setDialogOpen(false);
+  };
+
   const privateKeyInputChangeEvent = (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
-    const psk = e.currentTarget?.value;
-    setPrivateKey(psk);
-    validatePass(psk, privateKeyBitCount, setPrivateKeyValidationText);
+    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);
-    validatePass(psk, privateKeyBitCount, setAdminKeyValidationText);
+    validateKey(psk, privateKeyBitCount, setAdminKeyValidationText);
   };
 
   const privateKeySelectChangeEvent = (e: string) => {
     const count = Number.parseInt(e);
     setPrivateKeyBitCount(count);
-    validatePass(privateKey, count, setPrivateKeyValidationText);
-  };
-
-  const adminKeySelectChangeEvent = (e: string) => {
-    const count = Number.parseInt(e);
-    setAdminKeyBitCount(count);
-    validatePass(privateKey, count, setAdminKeyValidationText);
+    validateKey(privateKey, count, setPrivateKeyValidationText);
   };
 
   return (
-    <DynamicForm<SecurityValidation>
-      onSubmit={onSubmit}
-      defaultValues={{
-        ...config.security,
-        ...{
-          adminKey: adminKey,
-          privateKey: privateKey,
-          publicKey: publicKey,
-        },
-      }}
-      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",
-              validationText: privateKeyValidationText,
-              devicePSKBitCount: privateKeyBitCount,
-              inputChange: privateKeyInputChangeEvent,
-              selectChange: privateKeySelectChangeEvent,
-              hide: !privateKeyVisible,
-              buttonClick: () =>
-                clickEvent(
-                  setPrivateKey,
-                  privateKeyBitCount,
-                  setPrivateKeyValidationText,
-                ),
-              disabledBy: [
-                {
-                  fieldName: "adminChannelEnabled",
-                  invert: true,
-                },
-              ],
-              properties: {
-                value: privateKey,
-                action: {
-                  icon: privateKeyVisible ? EyeOff : Eye,
-                  onClick: () => setPrivateKeyVisible(!privateKeyVisible),
+    <>
+      <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,
+                buttonClick: privateKeyClickEvent,
+                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",
-            },
-          ],
-        },
-        {
-          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 is considered to be "managed" by a mesh administrator via admin messages',
-            },
-            {
-              type: "passwordGenerator",
-              name: "adminKey",
-              label: "Admin Key",
-              description:
-                "The public key authorized to send admin messages to this node",
-              validationText: adminKeyValidationText,
-              devicePSKBitCount: adminKeyBitCount,
-              inputChange: adminKeyInputChangeEvent,
-              selectChange: adminKeySelectChangeEvent,
-              hide: !adminKeyVisible,
-              buttonClick: () =>
-                clickEvent(
-                  setAdminKey,
-                  adminKeyBitCount,
-                  setAdminKeyValidationText,
-                ),
-              disabledBy: [{ fieldName: "adminChannelEnabled" }],
-              properties: {
-                value: adminKey,
-                action: {
-                  icon: adminKeyVisible ? EyeOff : Eye,
-                  onClick: () => setAdminKeyVisible(!adminKeyVisible),
+              {
+                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: "Logging Settings",
-          description: "Settings for Logging",
-          fields: [
-            {
-              type: "toggle",
-              name: "bluetoothLoggingEnabled",
-              label: "Allow Bluetooth Logging",
-              description: "Enables device (serial style logs) over Bluetooth",
-            },
-            {
-              type: "toggle",
-              name: "debugLogApiEnabled",
-              label: "Enable Debug Log API",
-              description: "Output live debug logging over serial",
-            },
-            {
-              type: "toggle",
-              name: "serialEnabled",
-              label: "Serial Output Enabled",
-              description: "Serial Console over the Stream API",
-            },
-          ],
-        },
-      ]}
-    />
+            ],
+          },
+          {
+            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 is considered to be "managed" by a mesh administrator via admin messages',
+              },
+              {
+                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={dialogOpen}
+        onOpenChange={() => setDialogOpen(false)}
+        onSubmit={() => pkiRegenerate()}
+      />
+    </>
   );
 };

src/components/PageComponents/Connect/BLE.tsx

@@ -1,10 +1,10 @@
 import type { 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 { 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";
 

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,12 +1,12 @@
 import type { 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 { 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";

src/components/PageComponents/Connect/Serial.tsx

@@ -1,10 +1,10 @@
 import type { 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 { 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";
 

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,11 +1,11 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.js";
+import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
 import {
   type 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 { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
+} 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";
 
@@ -68,7 +68,7 @@ export const ChannelChat = ({
           )}
         </div>
       </div>
-      <div className="p-3">
+      <div className="pl-3 pr-3 pt-3 pb-1">
         <MessageInput to={to} channel={channel} />
       </div>
     </div>

src/components/PageComponents/Messages/Message.tsx

@@ -1,4 +1,4 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.js";
+import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import type { Protobuf } from "@meshtastic/js";
 import {

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,6 +1,6 @@
-import { Button } from "@components/UI/Button.js";
-import { Input } from "@components/UI/Input.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+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";
 

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -1,5 +1,6 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
+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;
@@ -24,7 +25,10 @@ export const TraceRoute = ({
     <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) => `${nodes.get(hop)?.user?.longName ?? "Unknown"}↔`)}
+        {route.map((hop) => {
+          const node = nodes.get(hop);
+          return `${node?.user?.longName ?? (node?.num ? numberToHexUnpadded(node.num) : "Unknown")}↔`;
+        })}
         {from?.user?.longName}
       </span>
     </div>

src/components/PageComponents/ModuleConfig/AmbientLighting.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/DetectionSensor.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/NeighborInfo.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/Paxcounter.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -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 => {

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -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",

src/components/PageLayout.tsx

@@ -1,5 +1,6 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
 import { AlignLeftIcon, type LucideIcon } from "lucide-react";
+import Footer from "./UI/Footer";
 
 export interface PageLayoutProps {
   label: string;
@@ -7,6 +8,7 @@ export interface PageLayoutProps {
   children: React.ReactNode;
   actions?: {
     icon: LucideIcon;
+    iconClasses?: string;
     onClick: () => void;
   }[];
 }
@@ -18,40 +20,43 @@ export const PageLayout = ({
   children,
 }: PageLayoutProps): JSX.Element => {
   return (
-    <div className="relative flex h-full w-full flex-col">
-      <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
-        <button
-          type="button"
-          className="pl-4 transition-all hover:text-accent md:hidden"
-        >
-          <AlignLeftIcon />
-        </button>
-        <div className="flex flex-1 items-center justify-between px-4 md:px-0">
-          <div className="flex w-full items-center">
-            <span className="w-full text-lg font-medium">{label}</span>
-            <div className="flex justify-end space-x-4">
-              {actions?.map((action, index) => (
-                <button
-                  key={action.icon.name}
-                  type="button"
-                  className="transition-all hover:text-accent"
-                  onClick={action.onClick}
-                >
-                  <action.icon />
-                </button>
-              ))}
+    <>
+      <div className="relative flex h-full w-full flex-col">
+        <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
+          <button
+            type="button"
+            className="pl-4 transition-all hover:text-accent md:hidden"
+          >
+            <AlignLeftIcon />
+          </button>
+          <div className="flex flex-1 items-center justify-between px-4 md:px-0">
+            <div className="flex w-full items-center">
+              <span className="w-full text-lg font-medium">{label}</span>
+              <div className="flex justify-end space-x-4">
+                {actions?.map((action, index) => (
+                  <button
+                    key={action.icon.name}
+                    type="button"
+                    className="transition-all hover:text-accent"
+                    onClick={action.onClick}
+                  >
+                    <action.icon className={action.iconClasses} />
+                  </button>
+                ))}
+              </div>
             </div>
           </div>
         </div>
+        <div
+          className={cn(
+            "flex h-full w-full flex-col overflow-y-auto",
+            !noPadding && "pl-3 pr-3 ",
+          )}
+        >
+          {children}
+          <Footer />
+        </div>
       </div>
-      <div
-        className={cn(
-          "flex h-full w-full flex-col overflow-y-auto",
-          !noPadding && "p-3",
-        )}
-      >
-        {children}
-      </div>
-    </div>
+    </>
   );
 };

src/components/Sidebar.tsx

@@ -1,8 +1,8 @@
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
-import { useDevice } from "@core/stores/deviceStore.js";
-import type { Page } from "@core/stores/deviceStore.js";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+import type { Page } from "@core/stores/deviceStore.ts";
 import {
   BatteryMediumIcon,
   CpuIcon,

src/components/Toaster.tsx

@@ -1,4 +1,4 @@
-import { useToast } from "@core/hooks/useToast.js";
+import { useToast } from "@core/hooks/useToast.ts";
 
 import {
   Toast,
@@ -7,7 +7,7 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@components/UI/Toast.js";
+} from "@components/UI/Toast.tsx";
 
 export function Toaster() {
   const { toasts } = useToast();

src/components/UI/Button.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",

src/components/UI/Checkbox.tsx

@@ -2,7 +2,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

src/components/UI/Command.tsx

@@ -3,8 +3,8 @@ import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
 
-import { Dialog, DialogContent } from "@components/UI/Dialog.js";
-import { cn } from "@core/utils/cn.js";
+import { Dialog, DialogContent } from "@components/UI/Dialog.tsx";
+import { cn } from "@core/utils/cn.ts";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

src/components/UI/Dialog.tsx

@@ -2,7 +2,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Dialog = DialogPrimitive.Root;
 

src/components/UI/DropdownMenu.tsx

@@ -2,7 +2,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

src/components/UI/Footer.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
+
+const Footer = React.forwardRef<HTMLElement, FooterProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <footer
+        className={`flex flex- justify-center p-2 ${className}`}
+        style={{
+          backgroundColor: "var(--backgroundPrimary)",
+          color: "var(--textPrimary)",
+        }}
+      >
+        <p>
+          <a
+            href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
+            className="hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            Powered by ▲ Vercel
+          </a>{" "}
+          | Meshtastic® is a registered trademark of Meshtastic LLC. |{" "}
+          <a
+            href="https://meshtastic.org/docs/legal"
+            className="hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            Legal Information
+          </a>
+        </p>
+      </footer>
+    );
+  },
+);
+
+export default Footer;

src/components/UI/Generator.tsx

@@ -1,22 +1,23 @@
 import * as React from "react";
 
-import { Button } from "@components/UI/Button.js";
-import { Input } from "@components/UI/Input.js";
+import { Button } from "@components/UI/Button.tsx";
+import { Input } from "@components/UI/Input.tsx";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@components/UI/Select.js";
+} from "@components/UI/Select.tsx";
 import type { LucideIcon } from "lucide-react";
 
 export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
-  hide?: boolean;
+  type: "text" | "password";
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
   buttonText?: string;
+  bits?: { text: string; value: string; key: string }[];
   selectChange: (event: string) => void;
   inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   buttonClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -30,11 +31,16 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
 const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
     {
-      hide = true,
+      type,
       devicePSKBitCount,
       variant,
       value,
       buttonText,
+      bits = [
+        { text: "256 bit", value: "32", key: "bit256" },
+        { text: "128 bit", value: "16", key: "bit128" },
+        { text: "8 bit", value: "1", key: "bit8" },
+      ],
       selectChange,
       inputChange,
       buttonClick,
@@ -44,40 +50,54 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
     },
     ref,
   ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    // Invokes onChange event on the input element when the value changes from the parent component
+    React.useEffect(() => {
+      if (!inputRef.current) return;
+      const setValue = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )?.set;
+
+      if (!setValue) return;
+      inputRef.current.value = "";
+      setValue.call(inputRef.current, value);
+      inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+    }, [value]);
     return (
       <>
         <Input
-          type={hide ? "password" : "text"}
+          type={type}
           id="pskInput"
           variant={variant}
           value={value}
           onChange={inputChange}
           action={action}
           disabled={disabled}
+          ref={inputRef}
         />
         <Select
           value={devicePSKBitCount?.toString()}
           onValueChange={(e) => selectChange(e)}
+          disabled={disabled}
         >
           <SelectTrigger className="!max-w-max">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem key="bit256" value="32">
-              256 bit
-            </SelectItem>
-            <SelectItem key="bit128" value="16">
-              128 bit
-            </SelectItem>
-            <SelectItem key="bit8" value="1">
-              8 bit
-            </SelectItem>
+            {bits.map(({ text, value, key }) => (
+              <SelectItem key={key} value={value}>
+                {text}
+              </SelectItem>
+            ))}
           </SelectContent>
         </Select>
         <Button
           type="button"
           variant="success"
           onClick={buttonClick}
+          disabled={disabled}
           {...props}
         >
           {buttonText}

src/components/UI/Input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 import { type VariantProps, cva } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 
@@ -31,7 +31,7 @@ export interface InputProps
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, variant, prefix, suffix, action, ...props }, ref) => {
+  ({ className, value, variant, prefix, suffix, action, ...props }, ref) => {
     return (
       <div className="relative w-full">
         {prefix && (
@@ -45,6 +45,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className,
             inputVariants({ variant }),
           )}
+          value={value}
           ref={ref}
           {...props}
         />

src/components/UI/Label.tsx

@@ -1,7 +1,7 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,

src/components/UI/Menubar.tsx

@@ -2,7 +2,7 @@ import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const MenubarMenu = MenubarPrimitive.Menu;
 

src/components/UI/Popover.tsx

@@ -1,7 +1,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Popover = PopoverPrimitive.Root;
 

src/components/UI/ScrollArea.tsx

@@ -1,7 +1,7 @@
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,

src/components/UI/Select.tsx

@@ -2,7 +2,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Select = SelectPrimitive.Root;
 

src/components/UI/Seperator.tsx

@@ -1,7 +1,7 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

src/components/UI/Sidebar/SidebarSection.tsx

@@ -1,4 +1,4 @@
-import { H4 } from "@components/UI/Typography/H4.js";
+import { H4 } from "@components/UI/Typography/H4.tsx";
 
 export interface SidebarSectionProps {
   label: string;

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@components/UI/Button.js";
+import { Button } from "@components/UI/Button.tsx";
 import type { LucideIcon } from "lucide-react";
 
 export interface SidebarButtonProps {

src/components/UI/Switch.tsx

@@ -1,7 +1,7 @@
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

src/components/UI/Tabs.tsx

@@ -1,7 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const Tabs = TabsPrimitive.Root;
 
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
+      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 mt-2 dark:bg-slate-800",
       className,
     )}
     {...props}

src/components/UI/Toast.tsx

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const ToastProvider = ToastPrimitives.Provider;
 

src/components/UI/Tooltip.tsx

@@ -1,7 +1,7 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
-import { cn } from "@core/utils/cn.js";
+import { cn } from "@core/utils/cn.ts";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

src/components/UI/Typography/H4.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
 
 export interface H4Props {
   className?: string;

src/components/UI/Typography/Subtle.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@app/core/utils/cn.js";
+import { cn } from "@app/core/utils/cn.ts";
 
 export interface SubtleProps {
   className?: string;

src/components/generic/ThemeController.tsx

@@ -1,4 +1,4 @@
-import { useAppStore } from "@core/stores/appStore.js";
+import { useAppStore } from "@core/stores/appStore.ts";
 import type { ReactNode } from "react";
 
 export interface ThemeControllerProps {

src/core/hooks/useToast.ts

@@ -1,6 +1,6 @@
 import { type ReactNode, useSyncExternalStore } from "react";
 
-import type { ToastActionElement, ToastProps } from "@components/UI/Toast.js";
+import type { ToastActionElement, ToastProps } from "@components/UI/Toast.tsx";
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
@@ -30,21 +30,21 @@ type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
+    type: ActionType["ADD_TOAST"];
+    toast: ToasterToast;
+  }
   | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
+    type: ActionType["UPDATE_TOAST"];
+    toast: Partial<ToasterToast>;
+  }
   | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
+    type: ActionType["DISMISS_TOAST"];
+    toastId?: ToasterToast["id"];
+  }
   | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
+    type: ActionType["REMOVE_TOAST"];
+    toastId?: ToasterToast["id"];
+  };
 
 interface State {
   toasts: ToasterToast[];
@@ -80,7 +80,7 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
         ),
       };
 
@@ -102,10 +102,10 @@ export const reducer = (state: State, action: Action): State => {
         toasts: state.toasts.map((t) =>
           t.id === toastId || toastId === undefined
             ? {
-                ...t,
-                open: false,
-              }
-            : t,
+              ...t,
+              open: false,
+            }
+            : t
         ),
       };
     }
@@ -190,4 +190,4 @@ function useToast() {
   };
 }
 
-export { useToast, toast };
+export { toast, useToast };

src/core/subscriptions.ts

@@ -1,4 +1,4 @@
-import type { Device } from "@core/stores/deviceStore.js";
+import type { Device } from "@core/stores/deviceStore.ts";
 import { Protobuf, type Types } from "@meshtastic/js";
 
 export const subscribeAll = (

src/core/utils/ip.ts

@@ -0,0 +1,14 @@
+export function convertIntToIpAddress(int: number): string {
+  return `${int & 0xff}.${(int >> 8) & 0xff}.${(int >> 16) & 0xff}.${(int >> 24) & 0xff}`;
+}
+
+export function convertIpAddressToInt(ip: string): number | null {
+  return (
+    ip
+      .split(".")
+      .reverse()
+      .reduce((ipnum, octet) => {
+        return (ipnum << 8) + Number.parseInt(octet);
+      }, 0) >>> 0
+  );
+}

src/core/utils/x25519.ts

@@ -0,0 +1,15 @@
+import { x25519 } from "@noble/curves/ed25519";
+
+export function getX25519PrivateKey(): Uint8Array {
+  const key = x25519.utils.randomPrivateKey();
+
+  key[0] &= 248;
+  key[31] &= 127;
+  key[31] |= 64;
+
+  return key;
+}
+
+export function getX25519PublicKey(privateKey: Uint8Array): Uint8Array {
+  return x25519.getPublicKey(privateKey);
+}

src/index.css

@@ -99,4 +99,4 @@
 img {
   -drag: none;
   -webkit-user-drag: none;
-}
+}

src/index.tsx

@@ -4,7 +4,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import { App } from "@app/App.js";
+import { App } from "@app/App.tsx";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);

src/pages/Channels.tsx

@@ -3,11 +3,11 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@app/components/UI/Tabs.js";
-import { Channel } from "@components/PageComponents/Channel.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+} from "@app/components/UI/Tabs.tsx";
+import { Channel } from "@components/PageComponents/Channel.tsx";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Types } from "@meshtastic/js";
 import type { Protobuf } from "@meshtastic/js";
 import { ImportIcon, QrCodeIcon } from "lucide-react";

src/pages/Config/DeviceConfig.tsx

@@ -1,18 +1,18 @@
-import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.js";
-import { Device } from "@components/PageComponents/Config/Device.js";
-import { Display } from "@components/PageComponents/Config/Display.js";
-import { LoRa } from "@components/PageComponents/Config/LoRa.js";
-import { Network } from "@components/PageComponents/Config/Network.js";
-import { Position } from "@components/PageComponents/Config/Position.js";
-import { Power } from "@components/PageComponents/Config/Power.js";
-import { Security } from "@components/PageComponents/Config/Security.js";
+import { Bluetooth } from "@components/PageComponents/Config/Bluetooth.tsx";
+import { Device } from "@components/PageComponents/Config/Device.tsx";
+import { Display } from "@components/PageComponents/Config/Display.tsx";
+import { LoRa } from "@components/PageComponents/Config/LoRa.tsx";
+import { Network } from "@components/PageComponents/Config/Network.tsx";
+import { Position } from "@components/PageComponents/Config/Position.tsx";
+import { Power } from "@components/PageComponents/Config/Power.tsx";
+import { Security } from "@components/PageComponents/Config/Security.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@components/UI/Tabs.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+} from "@components/UI/Tabs.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 
 export const DeviceConfig = (): JSX.Element => {
   const { metadata } = useDevice();

src/pages/Config/ModuleConfig.tsx

@@ -1,21 +1,21 @@
-import { AmbientLighting } from "@app/components/PageComponents/ModuleConfig/AmbientLighting.js";
-import { DetectionSensor } from "@app/components/PageComponents/ModuleConfig/DetectionSensor.js";
-import { NeighborInfo } from "@app/components/PageComponents/ModuleConfig/NeighborInfo.js";
-import { Audio } from "@components/PageComponents/ModuleConfig/Audio.js";
-import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.js";
-import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.js";
-import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
-import { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.js";
-import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.js";
-import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
-import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.js";
-import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.js";
+import { AmbientLighting } from "@app/components/PageComponents/ModuleConfig/AmbientLighting.tsx";
+import { DetectionSensor } from "@app/components/PageComponents/ModuleConfig/DetectionSensor.tsx";
+import { NeighborInfo } from "@app/components/PageComponents/ModuleConfig/NeighborInfo.tsx";
+import { Audio } from "@components/PageComponents/ModuleConfig/Audio.tsx";
+import { CannedMessage } from "@components/PageComponents/ModuleConfig/CannedMessage.tsx";
+import { ExternalNotification } from "@components/PageComponents/ModuleConfig/ExternalNotification.tsx";
+import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.tsx";
+import { Paxcounter } from "@components/PageComponents/ModuleConfig/Paxcounter.tsx";
+import { RangeTest } from "@components/PageComponents/ModuleConfig/RangeTest.tsx";
+import { Serial } from "@components/PageComponents/ModuleConfig/Serial.tsx";
+import { StoreForward } from "@components/PageComponents/ModuleConfig/StoreForward.tsx";
+import { Telemetry } from "@components/PageComponents/ModuleConfig/Telemetry.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@components/UI/Tabs.js";
+} from "@components/UI/Tabs.tsx";
 
 export const ModuleConfig = (): JSX.Element => {
   const tabs = [

src/pages/Config/index.tsx

@@ -1,11 +1,11 @@
-import { useDevice } from "@app/core/stores/deviceStore.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { useToast } from "@core/hooks/useToast.js";
-import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
-import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
+import { useDevice } from "@app/core/stores/deviceStore.ts";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
+import { useToast } from "@core/hooks/useToast.ts";
+import { DeviceConfig } from "@pages/Config/DeviceConfig.tsx";
+import { ModuleConfig } from "@pages/Config/ModuleConfig.tsx";
 import { BoxesIcon, SaveIcon, SettingsIcon } from "lucide-react";
 import { useState } from "react";
 

src/pages/Dashboard/index.tsx

@@ -1,9 +1,9 @@
-import { useAppStore } from "@app/core/stores/appStore.js";
-import { useDeviceStore } from "@app/core/stores/deviceStore.js";
-import { Button } from "@components/UI/Button.js";
-import { Separator } from "@components/UI/Seperator.js";
-import { H3 } from "@components/UI/Typography/H3.js";
-import { Subtle } from "@components/UI/Typography/Subtle.js";
+import { useAppStore } from "@app/core/stores/appStore.ts";
+import { useDeviceStore } from "@app/core/stores/deviceStore.ts";
+import { Button } from "@components/UI/Button.tsx";
+import { Separator } from "@components/UI/Seperator.tsx";
+import { H3 } from "@components/UI/Typography/H3.tsx";
+import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import {
   BluetoothIcon,
   ListPlusIcon,
@@ -21,79 +21,81 @@ export const Dashboard = () => {
   const devices = useMemo(() => getDevices(), [getDevices]);
 
   return (
-    <div className="flex flex-col gap-3 p-3">
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <H3>Connected Devices</H3>
-          <Subtle>Manage, connect and disconnect devices</Subtle>
+    <>
+      <div className="flex flex-col gap-3 p-3">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <H3>Connected Devices</H3>
+            <Subtle>Manage, connect and disconnect devices</Subtle>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
+          {devices.length ? (
+            <ul className="grow divide-y divide-gray-200">
+              {devices.map((device) => {
+                return (
+                  <li key={device.id}>
+                    <div className="px-4 py-4 sm:px-6">
+                      <div className="flex items-center justify-between">
+                        <p className="truncate text-sm font-medium text-accent">
+                          {device.nodes.get(device.hardware.myNodeNum)?.user
+                            ?.longName ?? "UNK"}
+                        </p>
+                        <div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
+                          {device.connection?.connType === "ble" && (
+                            <>
+                              <BluetoothIcon size={16} />
+                              BLE
+                            </>
+                          )}
+                          {device.connection?.connType === "serial" && (
+                            <>
+                              <UsbIcon size={16} />
+                              Serial
+                            </>
+                          )}
+                          {device.connection?.connType === "http" && (
+                            <>
+                              <NetworkIcon size={16} />
+                              Network
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      <div className="mt-2 sm:flex sm:justify-between">
+                        <div className="flex gap-2 text-sm text-gray-500">
+                          <UsersIcon
+                            size={20}
+                            className="text-gray-400"
+                            aria-hidden="true"
+                          />
+                          {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <div className="m-auto flex flex-col gap-3 text-center">
+              <ListPlusIcon size={48} className="mx-auto text-textSecondary" />
+              <H3>No Devices</H3>
+              <Subtle>Connect at least one device to get started</Subtle>
+              <Button
+                className="gap-2"
+                onClick={() => setConnectDialogOpen(true)}
+              >
+                <PlusIcon size={16} />
+                New Connection
+              </Button>
+            </div>
+          )}
         </div>
       </div>
-
-      <Separator />
-
-      <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
-        {devices.length ? (
-          <ul className="grow divide-y divide-gray-200">
-            {devices.map((device) => {
-              return (
-                <li key={device.id}>
-                  <div className="px-4 py-4 sm:px-6">
-                    <div className="flex items-center justify-between">
-                      <p className="truncate text-sm font-medium text-accent">
-                        {device.nodes.get(device.hardware.myNodeNum)?.user
-                          ?.longName ?? "UNK"}
-                      </p>
-                      <div className="inline-flex w-24 justify-center gap-2 rounded-full bg-slate-100 py-1 text-xs font-semibold text-slate-900 transition-colors hover:bg-slate-700 hover:text-slate-50">
-                        {device.connection?.connType === "ble" && (
-                          <>
-                            <BluetoothIcon size={16} />
-                            BLE
-                          </>
-                        )}
-                        {device.connection?.connType === "serial" && (
-                          <>
-                            <UsbIcon size={16} />
-                            Serial
-                          </>
-                        )}
-                        {device.connection?.connType === "http" && (
-                          <>
-                            <NetworkIcon size={16} />
-                            Network
-                          </>
-                        )}
-                      </div>
-                    </div>
-                    <div className="mt-2 sm:flex sm:justify-between">
-                      <div className="flex gap-2 text-sm text-gray-500">
-                        <UsersIcon
-                          size={20}
-                          className="text-gray-400"
-                          aria-hidden="true"
-                        />
-                        {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
-                      </div>
-                    </div>
-                  </div>
-                </li>
-              );
-            })}
-          </ul>
-        ) : (
-          <div className="m-auto flex flex-col gap-3 text-center">
-            <ListPlusIcon size={48} className="mx-auto text-textSecondary" />
-            <H3>No Devices</H3>
-            <Subtle>Connect atleast one device to get started</Subtle>
-            <Button
-              className="gap-2"
-              onClick={() => setConnectDialogOpen(true)}
-            >
-              <PlusIcon size={16} />
-              New Connection
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
+    </>
   );
 };

src/pages/Map.tsx

@@ -1,12 +1,13 @@
-import { Subtle } from "@app/components/UI/Typography/Subtle.js";
-import { cn } from "@app/core/utils/cn.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { useAppStore } from "@core/stores/appStore.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
+import { cn } from "@app/core/utils/cn.ts";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { bbox, lineString } from "@turf/turf";
 import {
   BoxSelectIcon,
@@ -180,7 +181,8 @@ export const MapPage = (): JSX.Element => {
                   <div className="flex cursor-pointer gap-2 rounded-md border bg-backgroundPrimary p-1.5">
                     <Hashicon value={node.num.toString()} size={22} />
                     <Subtle className={cn(zoom < 12 && "hidden")}>
-                      {node.user?.longName}
+                      {node.user?.longName ||
+                        `!${numberToHexUnpadded(node.num)}`}
                     </Subtle>
                   </div>
                 </Marker>

src/pages/Messages.tsx

@@ -1,14 +1,15 @@
-import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
-import { PageLayout } from "@components/PageLayout.js";
-import { Sidebar } from "@components/Sidebar.js";
-import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
-import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
-import { useToast } from "@core/hooks/useToast.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.tsx";
+import { PageLayout } from "@components/PageLayout.tsx";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
+import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.tsx";
+import { useToast } from "@core/hooks/useToast.ts";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
-import { getChannelName } from "@pages/Channels.js";
-import { HashIcon, WaypointsIcon } from "lucide-react";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import { getChannelName } from "@pages/Channels.tsx";
+import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
 
 export const MessagesPage = (): JSX.Element => {
@@ -28,6 +29,8 @@ export const MessagesPage = (): JSX.Element => {
   );
   const currentChannel = channels.get(activeChat);
   const { toast } = useToast();
+  const node = nodes.get(activeChat);
+  const nodeHex = node?.num ? numberToHexUnpadded(node.num) : "Unknown";
 
   return (
     <>
@@ -56,7 +59,7 @@ export const MessagesPage = (): JSX.Element => {
           {filteredNodes.map((node) => (
             <SidebarButton
               key={node.num}
-              label={node.user?.longName ?? "Unknown"}
+              label={node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`}
               active={activeChat === node.num}
               onClick={() => {
                 setChatType("direct");
@@ -67,60 +70,79 @@ export const MessagesPage = (): JSX.Element => {
           ))}
         </SidebarSection>
       </Sidebar>
-      <PageLayout
-        label={`Messages: ${
-          chatType === "broadcast" && currentChannel
-            ? getChannelName(currentChannel)
-            : chatType === "direct" && nodes.get(activeChat)
-              ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
-              : "Loading..."
-        }`}
-        actions={
-          chatType === "direct"
-            ? [
-                {
-                  icon: WaypointsIcon,
-                  async onClick() {
-                    const targetNode = nodes.get(activeChat)?.num;
-                    if (targetNode === undefined) return;
-                    toast({
-                      title: "Sending Traceroute, please wait...",
-                    });
-                    await connection?.traceRoute(targetNode).then(() =>
+      <div className="flex flex-col flex-grow">
+        <PageLayout
+          label={`Messages: ${
+            chatType === "broadcast" && currentChannel
+              ? getChannelName(currentChannel)
+              : chatType === "direct" && nodes.get(activeChat)
+                ? nodes.get(activeChat)?.user?.longName ?? nodeHex
+                : "Loading..."
+          }`}
+          actions={
+            chatType === "direct"
+              ? [
+                  {
+                    icon: nodes.get(activeChat)?.user?.publicKey.length
+                      ? LockIcon
+                      : LockOpenIcon,
+                    iconClasses: nodes.get(activeChat)?.user?.publicKey.length
+                      ? "text-green-600"
+                      : "text-yellow-300",
+                    async onClick() {
+                      const targetNode = nodes.get(activeChat)?.num;
+                      if (targetNode === undefined) return;
                       toast({
-                        title: "Traceroute sent.",
-                      }),
-                    );
+                        title: nodes.get(activeChat)?.user?.publicKey.length
+                          ? "Chat is using PKI encryption."
+                          : "Chat is using PSK encryption.",
+                      });
+                    },
                   },
-                },
-              ]
-            : []
-        }
-      >
-        {allChannels.map(
-          (channel) =>
-            activeChat === channel.index && (
-              <ChannelChat
-                key={channel.index}
-                to="broadcast"
-                messages={messages.broadcast.get(channel.index)}
-                channel={channel.index}
-              />
-            ),
-        )}
-        {filteredNodes.map(
-          (node) =>
-            activeChat === node.num && (
-              <ChannelChat
-                key={node.num}
-                to={activeChat}
-                messages={messages.direct.get(node.num)}
-                channel={Types.ChannelNumber.Primary}
-                traceroutes={traceroutes.get(node.num)}
-              />
-            ),
-        )}
-      </PageLayout>
+                  {
+                    icon: WaypointsIcon,
+                    async onClick() {
+                      const targetNode = nodes.get(activeChat)?.num;
+                      if (targetNode === undefined) return;
+                      toast({
+                        title: "Sending Traceroute, please wait...",
+                      });
+                      await connection?.traceRoute(targetNode).then(() =>
+                        toast({
+                          title: "Traceroute sent.",
+                        }),
+                      );
+                    },
+                  },
+                ]
+              : []
+          }
+        >
+          {allChannels.map(
+            (channel) =>
+              activeChat === channel.index && (
+                <ChannelChat
+                  key={channel.index}
+                  to="broadcast"
+                  messages={messages.broadcast.get(channel.index)}
+                  channel={channel.index}
+                />
+              ),
+          )}
+          {filteredNodes.map(
+            (node) =>
+              activeChat === node.num && (
+                <ChannelChat
+                  key={node.num}
+                  to={activeChat}
+                  messages={messages.direct.get(node.num)}
+                  channel={Types.ChannelNumber.Primary}
+                  traceroutes={traceroutes.get(node.num)}
+                />
+              ),
+          )}
+        </PageLayout>
+      </div>
     </>
   );
 };

src/pages/Nodes.tsx

@@ -1,13 +1,15 @@
+import Footer from "@app/components/UI/Footer";
 import { useAppStore } from "@app/core/stores/appStore";
-import { Sidebar } from "@components/Sidebar.js";
-import { Button } from "@components/UI/Button.js";
-import { Mono } from "@components/generic/Mono.js";
-import { Table } from "@components/generic/Table/index.js";
-import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
-import { useDevice } from "@core/stores/deviceStore.js";
+import { Sidebar } from "@components/Sidebar.tsx";
+import { Button } from "@components/UI/Button.tsx";
+import { Mono } from "@components/generic/Mono.tsx";
+import { Table } from "@components/generic/Table/index.tsx";
+import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
-import { TrashIcon } from "lucide-react";
+import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
+import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react";
 import { Fragment } from "react";
 import { base16 } from "rfc4648";
 
@@ -27,73 +29,84 @@ export const NodesPage = (): JSX.Element => {
   return (
     <>
       <Sidebar />
-      <div className="w-full overflow-y-auto">
-        <Table
-          headings={[
-            { title: "", type: "blank", sortable: false },
-            { title: "Name", type: "normal", sortable: true },
-            { title: "Model", type: "normal", sortable: true },
-            { title: "MAC Address", type: "normal", sortable: true },
-            { title: "Last Heard", type: "normal", sortable: true },
-            { title: "SNR", type: "normal", sortable: true },
-            { title: "Connection", type: "normal", sortable: true },
-            { title: "Remove", type: "normal", sortable: false },
-          ]}
-          rows={filteredNodes.map((node) => [
-            <Hashicon key="icon" size={24} value={node.num.toString()} />,
-            <h1 key="header">
-              {node.user?.longName ??
-                (node.user?.macaddr
-                  ? `Meshtastic ${base16
-                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                      .toLowerCase()}`
-                  : `UNK: ${node.num}`)}
-            </h1>,
+      <div className="flex flex-col w-full">
+        <div className="overflow-y-auto h-full">
+          <Table
+            headings={[
+              { title: "", type: "blank", sortable: false },
+              { title: "Name", type: "normal", sortable: true },
+              { title: "Model", type: "normal", sortable: true },
+              { title: "MAC Address", type: "normal", sortable: true },
+              { title: "Last Heard", type: "normal", sortable: true },
+              { title: "SNR", type: "normal", sortable: true },
+              { title: "Encryption", type: "normal", sortable: false },
+              { title: "Connection", type: "normal", sortable: true },
+              { title: "Remove", type: "normal", sortable: false },
+            ]}
+            rows={filteredNodes.map((node) => [
+              <Hashicon key="icon" size={24} value={node.num.toString()} />,
+              <h1 key="header">
+                {node.user?.longName ??
+                  (node.user?.macaddr
+                    ? `Meshtastic ${base16
+                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                        .toLowerCase()}`
+                    : `!${numberToHexUnpadded(node.num)}`)}
+              </h1>,
 
-            <Mono key="model">
-              {Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0]}
-            </Mono>,
-            <Mono key="addr">
-              {base16
-                .stringify(node.user?.macaddr ?? [])
-                .match(/.{1,2}/g)
-                ?.join(":") ?? "UNK"}
-            </Mono>,
-            <Fragment key="lastHeard">
-              {node.lastHeard === 0 ? (
-                <p>Never</p>
-              ) : (
-                <TimeAgo timestamp={node.lastHeard * 1000} />
-              )}
-            </Fragment>,
-            <Mono key="snr">
-              {node.snr}db/
-              {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
-              {(node.snr + 10) * 5}raw
-            </Mono>,
-            <Mono key="hops">
-              {node.lastHeard !== 0
-                ? node.viaMqtt === false && node.hopsAway === 0
-                  ? "Direct"
-                  : `${node.hopsAway.toString()} ${
-                      node.hopsAway > 1 ? "hops" : "hop"
-                    } away`
-                : "-"}
-              {node.viaMqtt === true ? ", via MQTT" : ""}
-            </Mono>,
-            <Button
-              key="remove"
-              variant="destructive"
-              onClick={() => {
-                setNodeNumToBeRemoved(node.num);
-                setDialogOpen("nodeRemoval", true);
-              }}
-            >
-              <TrashIcon />
-              Remove
-            </Button>,
-          ])}
-        />
+              <Mono key="model">
+                {Protobuf.Mesh.HardwareModel[node.user?.hwModel ?? 0]}
+              </Mono>,
+              <Mono key="addr">
+                {base16
+                  .stringify(node.user?.macaddr ?? [])
+                  .match(/.{1,2}/g)
+                  ?.join(":") ?? "UNK"}
+              </Mono>,
+              <Fragment key="lastHeard">
+                {node.lastHeard === 0 ? (
+                  <p>Never</p>
+                ) : (
+                  <TimeAgo timestamp={node.lastHeard * 1000} />
+                )}
+              </Fragment>,
+              <Mono key="snr">
+                {node.snr}db/
+                {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
+                {(node.snr + 10) * 5}raw
+              </Mono>,
+              <Mono key="pki">
+                {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
+                  <LockIcon className="text-green-600" />
+                ) : (
+                  <LockOpenIcon className="text-yellow-300" />
+                )}
+              </Mono>,
+              <Mono key="hops">
+                {node.lastHeard !== 0
+                  ? node.viaMqtt === false && node.hopsAway === 0
+                    ? "Direct"
+                    : `${node.hopsAway.toString()} ${
+                        node.hopsAway > 1 ? "hops" : "hop"
+                      } away`
+                  : "-"}
+                {node.viaMqtt === true ? ", via MQTT" : ""}
+              </Mono>,
+              <Button
+                key="remove"
+                variant="destructive"
+                onClick={() => {
+                  setNodeNumToBeRemoved(node.num);
+                  setDialogOpen("nodeRemoval", true);
+                }}
+              >
+                <TrashIcon />
+                Remove
+              </Button>,
+            ])}
+          />
+        </div>
+        <Footer />
       </div>
     </>
   );

src/validation/config/lora.ts

@@ -60,4 +60,7 @@ export class LoRaValidation
 
   @IsBoolean()
   ignoreMqtt: boolean;
+
+  @IsBoolean()
+  configOkToMqtt: boolean;
 }

src/validation/config/network.ts

@@ -41,21 +41,24 @@ export class NetworkValidation
 
 export class NetworkValidationIpV4Config
   implements
-    Omit<Protobuf.Config.Config_NetworkConfig_IpV4Config, keyof Message>
+    Omit<
+      Protobuf.Config.Config_NetworkConfig_IpV4Config,
+      keyof Message | "ip" | "gateway" | "subnet" | "dns"
+    >
 {
   @IsIP()
   @IsOptional()
-  ip: number;
+  ip: string;
 
   @IsIP()
   @IsOptional()
-  gateway: number;
+  gateway: string;
 
   @IsIP()
   @IsOptional()
-  subnet: number;
+  subnet: string;
 
   @IsIP()
   @IsOptional()
-  dns: number;
+  dns: string;
 }

src/validation/config/position.ts

@@ -43,7 +43,4 @@ export class PositionValidation
 
   @IsEnum(Protobuf.Config.Config_PositionConfig_GpsMode)
   gpsMode: Protobuf.Config.Config_PositionConfig_GpsMode;
-
-  @IsArray()
-  channelPrecision: number[];
 }

src/validation/rasterSource.ts

@@ -1,6 +1,6 @@
 import { IsArray, IsBoolean, IsNumber, IsString, IsUrl } from "class-validator";
 
-import type { RasterSource } from "@core/stores/appStore.js";
+import type { RasterSource } from "@core/stores/appStore.ts";
 
 export class MapValidation {
   @IsArray()

tsconfig.json

@@ -34,6 +34,7 @@
       "@types/w3c-web-serial"
     ],
     "strictPropertyInitialization": false,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "allowImportingTsExtensions": true,
   }
 }