use new packages for imports & new webserial transport

bun.lock

@@ -5,7 +5,9 @@
       "name": "meshtastic-web",
       "dependencies": {
         "@bufbuild/protobuf": "^2.2.3",
+        "@meshtastic/core": "npm:@jsr/meshtastic__core@2.6.0-0",
         "@meshtastic/js": "npm:@jsr/meshtastic__js@2.6.0-0",
+        "@meshtastic/transport-web-serial": "npm:@jsr/meshtastic__transport-web-serial",
         "@noble/curves": "^1.8.1",
         "@radix-ui/react-accordion": "^1.2.3",
         "@radix-ui/react-checkbox": "^1.1.4",
@@ -359,6 +361,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
 
+    "@jsr/meshtastic__core": ["@jsr/meshtastic__core@2.6.0-0", "https://npm.jsr.io/~/11/@jsr/meshtastic__core/2.6.0-0.tgz", { "dependencies": { "@bufbuild/protobuf": "^2.2.3", "@jsr/meshtastic__protobufs": "^2.6.0", "crc": "^4.3.2", "ste-simple-events": "^3.0.11", "tslog": "^4.9.3" } }, "sha512-Ks71sRagbBipotznULpsJZ1EMcQIqCEJQx6mf628dmCNVf2YECi2zi/i/5zErp1hGPgfbDvCz9oPogvsd/7fMA=="],
+
     "@jsr/meshtastic__protobufs": ["@jsr/meshtastic__protobufs@2.6.0", "https://npm.jsr.io/~/11/@jsr/meshtastic__protobufs/2.6.0.tgz", { "dependencies": { "@bufbuild/protobuf": "^2.2.3" } }, "sha512-CGlgBdzAuQCZuGPrnzP8zU+EcLlmyYeeMbqFHuJ834cYfArWXDjDh1UYaPo2rI03LTjqa3MeWpfqDlzBR8kIMg=="],
 
     "@mapbox/geojson-rewind": ["@mapbox/geojson-rewind@0.5.2", "", { "dependencies": { "get-stream": "^6.0.1", "minimist": "^1.2.6" }, "bin": { "geojson-rewind": "geojson-rewind" } }, "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA=="],
@@ -379,8 +383,12 @@
 
     "@maplibre/maplibre-gl-style-spec": ["@maplibre/maplibre-gl-style-spec@23.1.0", "", { "dependencies": { "@mapbox/jsonlint-lines-primitives": "~2.0.2", "@mapbox/unitbezier": "^0.0.1", "json-stringify-pretty-compact": "^4.0.0", "minimist": "^1.2.8", "quickselect": "^3.0.0", "rw": "^1.3.3", "tinyqueue": "^3.0.0" }, "bin": { "gl-style-migrate": "dist/gl-style-migrate.mjs", "gl-style-validate": "dist/gl-style-validate.mjs", "gl-style-format": "dist/gl-style-format.mjs" } }, "sha512-R6/ihEuC5KRexmKIYkWqUv84Gm+/QwsOUgHyt1yy2XqCdGdLvlBWVWIIeTZWN4NGdwmY6xDzdSGU2R9oBLNg2w=="],
 
+    "@meshtastic/core": ["@jsr/meshtastic__core@2.6.0-0", "https://npm.jsr.io/~/11/@jsr/meshtastic__core/2.6.0-0.tgz", { "dependencies": { "@bufbuild/protobuf": "^2.2.3", "@jsr/meshtastic__protobufs": "^2.6.0", "crc": "^4.3.2", "ste-simple-events": "^3.0.11", "tslog": "^4.9.3" } }, "sha512-Ks71sRagbBipotznULpsJZ1EMcQIqCEJQx6mf628dmCNVf2YECi2zi/i/5zErp1hGPgfbDvCz9oPogvsd/7fMA=="],
+
     "@meshtastic/js": ["@jsr/meshtastic__js@2.6.0-0", "https://npm.jsr.io/~/11/@jsr/meshtastic__js/2.6.0-0.tgz", { "dependencies": { "@bufbuild/protobuf": "^2.2.3", "@jsr/meshtastic__protobufs": "^2.6.0", "crc": "^4.3.2", "ste-simple-events": "^3.0.11", "tslog": "^4.9.3" } }, "sha512-+xpZpxK6oUIVOuEs7C+LyxRr2druvc7UNNNTK9Rl8ioXj63Jz1uQXlYe2Gj0xjnRAiSQLR7QVaPef21BR/YTxA=="],
 
+    "@meshtastic/transport-web-serial": ["@jsr/meshtastic__transport-web-serial@0.2.0", "https://npm.jsr.io/~/11/@jsr/meshtastic__transport-web-serial/0.2.0.tgz", { "dependencies": { "@jsr/meshtastic__core": "^2.6.0-0" } }, "sha512-mP/nxOj0syABh3FkG5iIolWhUMiFh/qtJtvqihxLkaRoxdabUyW62mOtfhCMBEjxgVnKg4Gy7GkaXfC/eFy19Q=="],
+
     "@noble/curves": ["@noble/curves@1.8.1", "", { "dependencies": { "@noble/hashes": "1.7.1" } }, "sha512-warwspo+UYUPep0Q+vtdVB4Ugn8GGQj8iyB3gnRWsztmUHTI3S1nhdiWNsPUGL0vud7JlRRk1XEu7Lq1KGTnMQ=="],
 
     "@noble/hashes": ["@noble/hashes@1.7.1", "", {}, "sha512-B8XBPsn4vT/KJAGqDzbwztd+6Yte3P4V7iafm24bxgDe/mlRuK6xmWPuCNrKt2vDafZ8MfJLlchDG/vYafQEjQ=="],

package.json

@@ -38,7 +38,9 @@
   "homepage": "https://meshtastic.org",
   "dependencies": {
     "@bufbuild/protobuf": "^2.2.3",
+    "@meshtastic/core": "npm:@jsr/meshtastic__core@2.6.0-0",
     "@meshtastic/js": "npm:@jsr/meshtastic__js@2.6.0-0",
+    "@meshtastic/transport-web-serial": "npm:@jsr/meshtastic__transport-web-serial",
     "@noble/curves": "^1.8.1",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-checkbox": "^1.1.4",

src/components/Dialog/DeviceNameDialog.tsx

@@ -11,7 +11,7 @@ import {
 } 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 { Protobuf } from "@meshtastic/core";
 import { useForm } from "react-hook-form";
 
 export interface User {

src/components/Dialog/ImportDialog.tsx

@@ -13,7 +13,7 @@ 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 { Protobuf } from "@meshtastic/core";
 import { toByteArray } from "base64-js";
 import { type JSX, useEffect, useState } from "react";
 
@@ -73,8 +73,7 @@ export const ImportDialog = ({
       connection?.setChannel(
         create(Protobuf.Channel.ChannelSchema, {
           index,
-          role:
+          role: index === 0
-            index === 0
             ? Protobuf.Channel.Channel_Role.PRIMARY
             : Protobuf.Channel.Channel_Role.SECONDARY,
           settings: ch,
@@ -123,21 +122,25 @@ export const ImportDialog = ({
                     checked={channelSet?.loraConfig?.usePreset ?? true}
                   />
                 </div>
-                {/* <Select
+                {
+                  /* <Select
                   label="Modem Preset"
                   disabled
                   value={channelSet?.loraConfig?.modemPreset}
                 >
                   {renderOptions(Protobuf.Config_LoRaConfig_ModemPreset)}
-                </Select> */}
+                </Select> */
+                }
               </div>
-              {/* <Select
+              {
+                /* <Select
                 label="Region"
                 disabled
                 value={channelSet?.loraConfig?.region}
               >
                 {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
-              </Select> */}
+              </Select> */
+              }
 
               <span className="text-md block font-medium text-text-primary">
                 Channels:

src/components/Dialog/LocationResponseDialog.tsx

@@ -6,7 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog";
-import type { Protobuf, Types } from "@meshtastic/js";
+import type { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import type { JSX } from "react";
 
@@ -24,11 +24,9 @@ export const LocationResponseDialog = ({
   const { nodes } = useDevice();
 
   const from = nodes.get(location?.from ?? 0);
-  const longName =
+  const longName = from?.user?.longName ??
-    from?.user?.longName ??
     (from ? `!${numberToHexUnpadded(from?.num)}` : "Unknown");
-  const shortName =
+  const shortName = from?.user?.shortName ??
-    from?.user?.shortName ??
     (from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : "UNK");
 
   return (
@@ -44,7 +42,9 @@ export const LocationResponseDialog = ({
                 Coordinates:{" "}
                 <a
                   className="text-blue-500 dark:text-blue-400"
-                  href={`https://www.openstreetmap.org/?mlat=${location?.data.latitudeI / 1e7}&mlon=${location?.data.longitudeI / 1e7}&layers=N`}
+                  href={`https://www.openstreetmap.org/?mlat=${
+                    location?.data.latitudeI / 1e7
+                  }&mlon=${location?.data.longitudeI / 1e7}&layers=N`}
                   target="_blank"
                   rel="noreferrer"
                 >

src/components/Dialog/NodeDetailsDialog.tsx

@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { DeviceImage } from "../generic/DeviceImage";
 import { TimeAgo } from "../generic/TimeAgo";
@@ -32,7 +32,8 @@ export const NodeDetailsDialog = ({
   const { nodeNumDetails } = useAppStore();
   const device: Protobuf.Mesh.NodeInfo = nodes.get(nodeNumDetails);
 
-  return device ? (
+  return device
+    ? (
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent>
           <DialogHeader>
@@ -45,9 +46,8 @@ export const NodeDetailsDialog = ({
             <div className="w-full">
               <DeviceImage
                 className="w-32 h-32 mx-auto rounded-lg border-4 border-slate-200 dark:border-slate-800"
-              deviceType={
+                deviceType={Protobuf.Mesh
-                Protobuf.Mesh.HardwareModel[device.user?.hwModel ?? 0]
+                  .HardwareModel[device.user?.hwModel ?? 0]}
-              }
               />
               <div className="bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
                 <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
@@ -60,34 +60,36 @@ export const NodeDetailsDialog = ({
                 <p>Node Number: {device.num}</p>
                 <p>Node HEX: !{numberToHexUnpadded(device.num)}</p>
                 <p>
-                Role:{" "}
+                  Role: {Protobuf.Config.Config_DeviceConfig_Role[
-                {
-                  Protobuf.Config.Config_DeviceConfig_Role[
                     device.user?.role ?? 0
-                  ]
+                  ]}
-                }
                 </p>
                 <p>
-                Last Heard:{" "}
+                  Last Heard: {device.lastHeard === 0
-                {device.lastHeard === 0 ? (
+                    ? (
                       "Never"
-                ) : (
+                    )
-                  <TimeAgo timestamp={device.lastHeard * 1000} />
+                    : <TimeAgo timestamp={device.lastHeard * 1000} />}
-                )}
                 </p>
               </div>
 
-            {device.position ? (
+              {device.position
+                ? (
                   <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
                     <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
                       Position:
                     </p>
-                {device.position.latitudeI && device.position.longitudeI ? (
+                    {device.position.latitudeI && device.position.longitudeI
+                      ? (
                         <p>
                           Coordinates:{" "}
                           <a
                             className="text-blue-500 dark:text-blue-400"
-                      href={`https://www.openstreetmap.org/?mlat=${device.position.latitudeI / 1e7}&mlon=${device.position.longitudeI / 1e7}&layers=N`}
+                            href={`https://www.openstreetmap.org/?mlat=${
+                              device.position.latitudeI / 1e7
+                            }&mlon=${
+                              device.position.longitudeI / 1e7
+                            }&layers=N`}
                             target="_blank"
                             rel="noreferrer"
                           >
@@ -95,51 +97,74 @@ export const NodeDetailsDialog = ({
                             {device.position.longitudeI / 1e7}
                           </a>
                         </p>
-                ) : null}
+                      )
-                {device.position.altitude ? (
+                      : null}
-                  <p>Altitude: {device.position.altitude}m</p>
+                    {device.position.altitude
-                ) : null}
+                      ? <p>Altitude: {device.position.altitude}m</p>
+                      : null}
                   </div>
-            ) : null}
+                )
+                : null}
 
-            {device.deviceMetrics ? (
+              {device.deviceMetrics
+                ? (
                   <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
                     <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
                       Device Metrics:
                     </p>
-                {device.deviceMetrics.airUtilTx ? (
+                    {device.deviceMetrics.airUtilTx
+                      ? (
                         <p>
                           Air TX utilization:{" "}
                           {device.deviceMetrics.airUtilTx.toFixed(2)}%
                         </p>
-                ) : null}
+                      )
-                {device.deviceMetrics.channelUtilization ? (
+                      : null}
+                    {device.deviceMetrics.channelUtilization
+                      ? (
                         <p>
                           Channel utilization:{" "}
                           {device.deviceMetrics.channelUtilization.toFixed(2)}%
                         </p>
-                ) : null}
+                      )
-                {device.deviceMetrics.batteryLevel ? (
+                      : null}
+                    {device.deviceMetrics.batteryLevel
+                      ? (
                         <p>
                           Battery level:{" "}
                           {device.deviceMetrics.batteryLevel.toFixed(2)}%
                         </p>
-                ) : null}
+                      )
-                {device.deviceMetrics.voltage ? (
+                      : null}
-                  <p>Voltage: {device.deviceMetrics.voltage.toFixed(2)}V</p>
+                    {device.deviceMetrics.voltage
-                ) : null}
+                      ? (
-                {device.deviceMetrics.uptimeSeconds ? (
+                        <p>
+                          Voltage: {device.deviceMetrics.voltage.toFixed(2)}V
+                        </p>
+                      )
+                      : null}
+                    {device.deviceMetrics.uptimeSeconds
+                      ? (
                         <p>
                           Uptime:{" "}
-                    <Uptime seconds={device.deviceMetrics.uptimeSeconds} />
+                          <Uptime
+                            seconds={device.deviceMetrics.uptimeSeconds}
+                          />
                         </p>
-                ) : null}
+                      )
+                      : null}
                   </div>
-            ) : null}
+                )
+                : null}
 
-            {device ? (
+              {device
+                ? (
                   <div className="mt-5 w-full max-w-[464px] bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                <Accordion className="AccordionRoot" type="single" collapsible>
+                    <Accordion
+                      className="AccordionRoot"
+                      type="single"
+                      collapsible
+                    >
                       <AccordionItem className="AccordionItem" value="item-1">
                         <AccordionTrigger>
                           <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
@@ -154,10 +179,12 @@ export const NodeDetailsDialog = ({
                       </AccordionItem>
                     </Accordion>
                   </div>
-            ) : null}
+                )
+                : null}
             </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>
-  ) : null;
+    )
+    : null;
 };

src/components/Dialog/NodeOptionsDialog.tsx

@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { TrashIcon } from "lucide-react";
 import type { JSX } from "react";
@@ -31,11 +31,9 @@ export const NodeOptionsDialog = ({
     setChatType,
     setActiveChat,
   } = useAppStore();
-  const longName =
+  const longName = node?.user?.longName ??
-    node?.user?.longName ??
     (node ? `!${numberToHexUnpadded(node?.num)}` : "Unknown");
-  const shortName =
+  const shortName = node?.user?.shortName ??
-    node?.user?.shortName ??
     (node ? `${numberToHexUnpadded(node?.num).substring(0, 4)}` : "UNK");
 
   function handleDirectMessage() {
@@ -53,7 +51,7 @@ export const NodeOptionsDialog = ({
     connection?.requestPosition(node.num).then(() =>
       toast({
         title: "Position request sent.",
-      }),
+      })
     );
     onOpenChange();
   }
@@ -66,7 +64,7 @@ export const NodeOptionsDialog = ({
     connection?.traceRoute(node.num).then(() =>
       toast({
         title: "Traceroute sent.",
-      }),
+      })
     );
     onOpenChange();
   }

src/components/Dialog/QRDialog.tsx

@@ -10,7 +10,7 @@ import {
 } 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 { Protobuf, type Types } from "@meshtastic/core";
 import { fromByteArray } from "base64-js";
 import { ClipboardIcon } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
@@ -86,7 +86,9 @@ export const QRDialog = ({
                     onCheckedChange={() => {
                       if (selectedChannels.includes(channel.index)) {
                         setSelectedChannels(
-                          selectedChannels.filter((c) => c !== channel.index),
+                          selectedChannels.filter((c) =>
+                            c !== channel.index
+                          ),
                         );
                       } else {
                         setSelectedChannels([

src/components/Dialog/TracerouteResponseDialog.tsx

@@ -6,7 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@components/UI/Dialog";
-import type { Protobuf, Types } from "@meshtastic/js";
+import type { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import type { JSX } from "react";
 import { TraceRoute } from "../PageComponents/Messages/TraceRoute";
@@ -28,11 +28,9 @@ export const TracerouteResponseDialog = ({
   const snrTowards = traceroute?.data.snrTowards ?? [];
   const snrBack = traceroute?.data.snrBack ?? [];
   const from = nodes.get(traceroute?.from ?? 0);
-  const longName =
+  const longName = from?.user?.longName ??
-    from?.user?.longName ??
     (from ? `!${numberToHexUnpadded(from?.num)}` : "Unknown");
-  const shortName =
+  const shortName = from?.user?.shortName ??
-    from?.user?.shortName ??
     (from ? `${numberToHexUnpadded(from?.num).substring(0, 4)}` : "UNK");
   const to = nodes.get(traceroute?.to ?? 0);
   return (

src/components/PageComponents/Channel.tsx

@@ -3,7 +3,7 @@ import { create } from "@bufbuild/protobuf";
 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 { Protobuf } from "@meshtastic/core";
 import { fromByteArray, toByteArray } from "base64-js";
 import cryptoRandomString from "crypto-random-string";
 import { useState } from "react";
@@ -24,8 +24,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
     channel?.settings?.psk.length ?? 16,
   );
   const [validationText, setValidationText] = useState<string>();
-  const [preSharedDialogOpen, setPreSharedDialogOpen] =
+  const [preSharedDialogOpen, setPreSharedDialogOpen] = useState<boolean>(
-    useState<boolean>(false);
+    false,
+  );
 
   const onSubmit = (data: ChannelValidation) => {
     const channel = create(Protobuf.Channel.ChannelSchema, {
@@ -126,8 +127,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                 description:
                   "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
                 properties: {
-                  enumValue:
+                  enumValue: channel.index === 0
-                    channel.index === 0
                     ? { PRIMARY: 1 }
                     : { DISABLED: 0, SECONDARY: 2 },
                 },
@@ -192,8 +192,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                 description:
                   "If not sharing precise location, position shared on channel will be accurate within this distance",
                 properties: {
-                  enumValue:
+                  enumValue: config.display?.units === 0
-                    config.display?.units === 0
                     ? {
                       "Within 23 km": 10,
                       "Within 12 km": 11,

src/components/PageComponents/Config/Bluetooth.tsx

@@ -3,7 +3,7 @@ import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { useState } from "react";
 
 export const Bluetooth = () => {
@@ -111,8 +111,7 @@ export const Bluetooth = () => {
               disabledBy: [
                 {
                   fieldName: "mode",
-                  selector:
+                  selector: Protobuf.Config.Config_BluetoothConfig_PairingMode
-                    Protobuf.Config.Config_BluetoothConfig_PairingMode
                     .FIXED_PIN,
                   invert: true,
                 },

src/components/PageComponents/Config/Device.tsx

@@ -2,7 +2,7 @@ import type { DeviceValidation } from "@app/validation/config/device.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Device = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Config/Display.tsx

@@ -2,7 +2,7 @@ import type { DisplayValidation } from "@app/validation/config/display.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Display = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Config/LoRa.tsx

@@ -2,7 +2,7 @@ import type { LoRaValidation } from "@app/validation/config/lora.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const LoRa = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Config/Network.tsx

@@ -6,7 +6,7 @@ import {
   convertIntToIpAddress,
   convertIpAddressToInt,
 } from "@core/utils/ip.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Network = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Config/Position.tsx

@@ -6,7 +6,7 @@ import type { PositionValidation } from "@app/validation/config/position.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { useCallback } from "react";
 
 export const Position = () => {

src/components/PageComponents/Config/Power.tsx

@@ -2,7 +2,7 @@ import type { PowerValidation } from "@app/validation/config/power.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Power = (): JSX.Element => {
   const { config, setWorkingConfig } = useDevice();

src/components/PageComponents/Config/Security/Security.tsx

@@ -8,7 +8,7 @@ import {
 import type { SecurityValidation } from "@app/validation/config/security.tsx";
 import { create } from "@bufbuild/protobuf";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { fromByteArray, toByteArray } from "base64-js";
 import { Eye, EyeOff } from "lucide-react";
 import { useReducer } from "react";

src/components/PageComponents/Connect/Serial.tsx

@@ -5,7 +5,8 @@ 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 { MeshDevice } from "@meshtastic/core";
+import { TransportWebSerial } from "@meshtastic/transport-web-serial";
 import { useCallback, useEffect, useState } from "react";
 
 export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
@@ -31,14 +32,9 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
     const id = randId();
     const device = addDevice(id);
     setSelectedDevice(id);
-    const connection = new SerialConnection(id);
+    const transport = await TransportWebSerial.createFromPort(port);
-    await connection
+    const connection = new MeshDevice(transport, id);
-      .connect({
+    connection.configure();
-        port,
-        baudRate: undefined,
-        concurrentLogOutput: true,
-      })
-      .catch((e: Error) => console.log(`Unable to Connect: ${e.message}`));
     device.addConnection(connection);
     subscribeAll(device, connection);
 

src/components/PageComponents/Map/NodeDetail.tsx

@@ -5,8 +5,8 @@ import { formatQuantity } from "@app/core/utils/string";
 import { Avatar } from "@components/UI/Avatar";
 import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
-import type { Protobuf as ProtobufType } from "@meshtastic/js";
+import type { Protobuf as ProtobufType } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import {
   BatteryChargingIcon,
@@ -37,14 +37,16 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
           <Avatar text={node.user?.shortName} />
 
           <div>
-            {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
+            {node.user?.publicKey && node.user?.publicKey.length > 0
+              ? (
                 <LockIcon
                   className="text-green-600"
                   size={12}
                   strokeWidth={3}
                   aria-label="Public Key Enabled"
                 />
-            ) : (
+              )
+              : (
                 <LockOpenIcon
                   className="text-yellow-500"
                   size={12}
@@ -73,15 +75,13 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
                 node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
               } volts`}
             >
-              {node.deviceMetrics?.batteryLevel > 100 ? (
+              {node.deviceMetrics?.batteryLevel > 100
-                <BatteryChargingIcon size={22} />
+                ? <BatteryChargingIcon size={22} />
-              ) : node.deviceMetrics?.batteryLevel > 80 ? (
+                : node.deviceMetrics?.batteryLevel > 80
-                <BatteryFullIcon size={22} />
+                ? <BatteryFullIcon size={22} />
-              ) : node.deviceMetrics?.batteryLevel > 20 ? (
+                : node.deviceMetrics?.batteryLevel > 20
-                <BatteryMediumIcon size={22} />
+                ? <BatteryMediumIcon size={22} />
-              ) : (
+                : <BatteryLowIcon size={22} />}
-                <BatteryLowIcon size={22} />
-              )}
               <Subtle aria-label="Battery">
                 {node.deviceMetrics?.batteryLevel > 100
                   ? "Charging"

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -4,7 +4,7 @@ import {
 } from "@app/core/stores/deviceStore.ts";
 import { Message } from "@components/PageComponents/Messages/Message.tsx";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
-import type { Types } from "@meshtastic/js";
+import type { Types } from "@meshtastic/core";
 import { InboxIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import type { JSX } from "react";
@@ -34,8 +34,7 @@ export const ChannelChat = ({
   const scrollToBottom = useCallback(() => {
     const scrollContainer = scrollContainerRef.current;
     if (scrollContainer) {
-      const isNearBottom =
+      const isNearBottom = scrollContainer.scrollHeight -
-        scrollContainer.scrollHeight -
           scrollContainer.scrollTop -
           scrollContainer.clientHeight <
         100;
@@ -72,9 +71,8 @@ export const ChannelChat = ({
                 key={message.id}
                 message={message}
                 sender={nodes.get(message.from)}
-                lastMsgSameUser={
+                lastMsgSameUser={index > 0 &&
-                  index > 0 && messages[index - 1].from === message.from
+                  messages[index - 1].from === message.from}
-                }
               />
             );
           })}

src/components/PageComponents/Messages/Message.tsx

@@ -12,7 +12,7 @@ import {
 } from "@app/core/stores/deviceStore.ts";
 import { cn } from "@app/core/utils/cn";
 import { Avatar } from "@components/UI/Avatar";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { useMemo } from "react";

src/components/PageComponents/Messages/MessageInput.tsx

@@ -2,7 +2,7 @@ import { debounce } from "@app/core/utils/debounce";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import type { Types } from "@meshtastic/js";
+import type { Types } from "@meshtastic/core";
 import { SendIcon } from "lucide-react";
 import {
   type JSX,
@@ -51,7 +51,7 @@ export const MessageInput = ({
             myNodeNum,
             id,
             "ack",
-          ),
+          )
         )
         .catch((e: Types.PacketError) =>
           setMessageState(
@@ -61,7 +61,7 @@ export const MessageInput = ({
             myNodeNum,
             e.id,
             e.error,
-          ),
+          )
         );
     },
     [channel, connection, myNodeNum, setMessageState, to],

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -1,5 +1,5 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import type { JSX } from "react";
 
@@ -38,7 +38,8 @@ export const TraceRoute = ({
         ))}
         {from?.user?.longName}
       </span>
-      {routeBack ? (
+      {routeBack
+        ? (
           <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
             <p className="font-semibold">Route back:</p>
             <p>{from?.user?.longName}</p>
@@ -54,7 +55,8 @@ export const TraceRoute = ({
             ))}
             {to?.user?.longName}
           </span>
-      ) : null}
+        )
+        : null}
     </div>
   );
 };

src/components/PageComponents/ModuleConfig/AmbientLighting.tsx

@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { AmbientLightingValidation } from "@app/validation/moduleConfig/ambientLighting.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const AmbientLighting = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/Audio.tsx

@@ -2,7 +2,7 @@ import type { AudioValidation } from "@app/validation/moduleConfig/audio.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Audio = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/CannedMessage.tsx

@@ -2,7 +2,7 @@ import type { CannedMessageValidation } from "@app/validation/moduleConfig/canne
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const CannedMessage = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/DetectionSensor.tsx

@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { DetectionSensorValidation } from "@app/validation/moduleConfig/detectionSensor.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const DetectionSensor = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/ExternalNotification.tsx

@@ -2,7 +2,7 @@ import type { ExternalNotificationValidation } from "@app/validation/moduleConfi
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const ExternalNotification = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { MqttValidation } from "@app/validation/moduleConfig/mqtt.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const MQTT = (): JSX.Element => {
   const { config, moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/NeighborInfo.tsx

@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { NeighborInfoValidation } from "@app/validation/moduleConfig/neighborInfo.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const NeighborInfo = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/Paxcounter.tsx

@@ -2,7 +2,7 @@ import type { PaxcounterValidation } from "@app/validation/moduleConfig/paxcount
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Paxcounter = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/RangeTest.tsx

@@ -2,7 +2,7 @@ import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const RangeTest = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/Serial.tsx

@@ -2,7 +2,7 @@ import type { SerialValidation } from "@app/validation/moduleConfig/serial.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Serial = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/StoreForward.tsx

@@ -2,7 +2,7 @@ import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeF
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const StoreForward = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/components/PageComponents/ModuleConfig/Telemetry.tsx

@@ -2,7 +2,7 @@ import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 
 export const Telemetry = (): JSX.Element => {
   const { moduleConfig, setWorkingModuleConfig } = useDevice();

src/core/stores/appStore.ts

@@ -1,4 +1,4 @@
-import { Types } from "@meshtastic/js";
+import { Types } from "@meshtastic/core";
 import { produce } from "immer";
 import { create } from "zustand";
 

src/core/stores/deviceStore.ts

@@ -1,5 +1,5 @@
 import { create } from "@bufbuild/protobuf";
-import { Protobuf, Types } from "@meshtastic/js";
+import { Protobuf, Types } from "@meshtastic/core";
 import { produce } from "immer";
 import { createContext, useContext } from "react";
 import { create as createStore } from "zustand";
@@ -299,8 +299,8 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
                 if (!device) {
                   return;
                 }
-                const workingModuleConfigIndex =
+                const workingModuleConfigIndex = device?.workingModuleConfig
-                  device?.workingModuleConfig.findIndex(
+                  .findIndex(
                     (wmc) =>
                       wmc.payloadVariant.case ===
                         moduleConfig.payloadVariant.case,
@@ -445,8 +445,7 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
                 if (!device) {
                   return;
                 }
-                const currentNode =
+                const currentNode = device.nodes.get(user.from) ??
-                  device.nodes.get(user.from) ??
                   create(Protobuf.Mesh.NodeInfoSchema);
                 currentNode.user = user.data;
                 device.nodes.set(user.from, currentNode);
@@ -460,8 +459,7 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
                 if (!device) {
                   return;
                 }
-                const currentNode =
+                const currentNode = device.nodes.get(position.from) ??
-                  device.nodes.get(position.from) ??
                   create(Protobuf.Mesh.NodeInfoSchema);
                 currentNode.position = position.data;
                 device.nodes.set(position.from, currentNode);
@@ -486,8 +484,7 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
                   return;
                 }
                 const messageGroup = device.messages[message.type];
-                const messageIndex =
+                const messageIndex = message.type === "direct"
-                  message.type === "direct"
                   ? message.from === device.hardware.myNodeNum
                     ? message.to
                     : message.from
@@ -564,11 +561,8 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
                 }
                 const messageGroup = device.messages[type];
 
-                const messageIndex =
+                const messageIndex = type === "direct"
-                  type === "direct"
+                  ? from === device.hardware.myNodeNum ? to : from
-                    ? from === device.hardware.myNodeNum
-                      ? to
-                      : from
                   : channelIndex;
                 const messages = messageGroup.get(messageIndex);
 

src/core/subscriptions.ts

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

src/pages/Channels.tsx

@@ -8,8 +8,8 @@ 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 { Types } from "@meshtastic/core";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { ImportIcon, QrCodeIcon } from "lucide-react";
 import { useState } from "react";
 

src/pages/Map/index.tsx

@@ -4,7 +4,7 @@ import { useTheme } from "@app/core/hooks/useTheme";
 import { PageLayout } from "@components/PageLayout.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { bbox, lineString } from "@turf/turf";
 import { current } from "immer";
 import { MapPinIcon } from "lucide-react";

src/pages/Messages.tsx

@@ -7,7 +7,7 @@ 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 { Protobuf, Types } from "@meshtastic/js";
+import { Protobuf, Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { getChannelName } from "@pages/Channels.tsx";
 import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
@@ -39,13 +39,11 @@ export const MessagesPage = () => {
           {filteredChannels.map((channel) => (
             <SidebarButton
               key={channel.index}
-              label={
+              label={channel.settings?.name.length
-                channel.settings?.name.length
                 ? channel.settings?.name
                 : channel.index === 0
                 ? "Primary"
-                    : `Ch ${channel.index}`
+                : `Ch ${channel.index}`}
-              }
               active={activeChat === channel.index}
               onClick={() => {
                 setChatType("broadcast");
@@ -69,9 +67,8 @@ export const MessagesPage = () => {
             {filteredNodes.map((node) => (
               <SidebarButton
                 key={node.num}
-                label={
+                label={node.user?.longName ??
-                  node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`
+                  `!${numberToHexUnpadded(node.num)}`}
-                }
                 active={activeChat === node.num}
                 onClick={() => {
                   setChatType("direct");
@@ -97,8 +94,7 @@ export const MessagesPage = () => {
               ? (nodes.get(activeChat)?.user?.longName ?? nodeHex)
               : "Loading..."
           }`}
-          actions={
+          actions={chatType === "direct"
-            chatType === "direct"
             ? [
               {
                 icon: nodes.get(activeChat)?.user?.publicKey.length
@@ -118,8 +114,7 @@ export const MessagesPage = () => {
                 },
               },
             ]
-              : []
+            : []}
-          }
         >
           {allChannels.map(
             (channel) =>

src/pages/Nodes.tsx

@@ -8,7 +8,7 @@ import { Mono } from "@components/generic/Mono.tsx";
 import { Table } from "@components/generic/Table/index.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf, type Types } from "@meshtastic/js";
+import { Protobuf, type Types } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import { LockIcon, LockOpenIcon } from "lucide-react";
 import { Fragment, type JSX, useCallback, useEffect, useState } from "react";
@@ -107,9 +107,11 @@ const NodesPage = (): JSX.Element => {
               >
                 {node.user?.shortName ??
                   (node.user?.macaddr
-                    ? `${base16
+                    ? `${
+                      base16
                         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .toLowerCase()}`
+                        .toLowerCase()
+                    }`
                     : `${numberToHexUnpadded(node.num).slice(-4)}`)}
               </h1>,
 
@@ -120,9 +122,11 @@ const NodesPage = (): JSX.Element => {
               >
                 {node.user?.longName ??
                   (node.user?.macaddr
-                    ? `Meshtastic ${base16
+                    ? `Meshtastic ${
+                      base16
                         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .toLowerCase()}`
+                        .toLowerCase()
+                    }`
                     : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
 
@@ -136,11 +140,9 @@ const NodesPage = (): JSX.Element => {
                   ?.join(":") ?? "UNK"}
               </Mono>,
               <Fragment key="lastHeard">
-                {node.lastHeard === 0 ? (
+                {node.lastHeard === 0
-                  <p>Never</p>
+                  ? <p>Never</p>
-                ) : (
+                  : <TimeAgo timestamp={node.lastHeard * 1000} />}
-                  <TimeAgo timestamp={node.lastHeard * 1000} />
-                )}
               </Fragment>,
               <Mono key="snr">
                 {node.snr}db/
@@ -148,11 +150,9 @@ const NodesPage = (): JSX.Element => {
                 {(node.snr + 10) * 5}raw
               </Mono>,
               <Mono key="pki">
-                {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
+                {node.user?.publicKey && node.user?.publicKey.length > 0
-                  <LockIcon className="text-green-600" />
+                  ? <LockIcon className="text-green-600" />
-                ) : (
+                  : <LockOpenIcon className="text-yellow-300 mx-auto" />}
-                  <LockOpenIcon className="text-yellow-300 mx-auto" />
-                )}
               </Mono>,
               <Mono key="hops">
                 {node.lastHeard !== 0

src/validation/channel.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import {
   IsBoolean,
   IsEnum,
@@ -10,8 +10,7 @@ import {
 } from "class-validator";
 
 export class ChannelValidation
-  implements Omit<Protobuf.Channel.Channel, keyof Message | "settings">
+  implements Omit<Protobuf.Channel.Channel, keyof Message | "settings"> {
-{
   @IsNumber()
   index: number;
 
@@ -22,8 +21,7 @@ export class ChannelValidation
 }
 
 export class Channel_SettingsValidation
-  implements Omit<Protobuf.Channel.ChannelSettings, keyof Message | "psk">
+  implements Omit<Protobuf.Channel.ChannelSettings, keyof Message | "psk"> {
-{
   @IsNumber()
   channelNum: number;
 

src/validation/config/bluetooth.ts

@@ -1,14 +1,12 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsEnum, IsInt } from "class-validator";
 
-export class BluetoothValidation
+export class BluetoothValidation implements
-  implements
   Omit<
     Protobuf.Config.Config_BluetoothConfig,
     keyof Message | "deviceLoggingEnabled"
-    >
+  > {
-{
   @IsBoolean()
   enabled: boolean;
 

src/validation/config/device.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsEnum, IsInt, IsString } from "class-validator";
 
 export class DeviceValidation

src/validation/config/display.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsEnum, IsInt } from "class-validator";
 
 export class DisplayValidation

src/validation/config/lora.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsArray, IsBoolean, IsEnum, IsInt, Max, Min } from "class-validator";
 
 export class LoRaValidation

src/validation/config/network.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import {
   IsBoolean,
   IsEnum,

src/validation/config/position.ts

@@ -1,16 +1,14 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsArray, IsBoolean, IsEnum, IsInt } from "class-validator";
 
 const DeprecatedPositionValidationFields = ["gpsEnabled", "gpsAttemptTime"];
 
-export class PositionValidation
+export class PositionValidation implements
-  implements
   Omit<
     Protobuf.Config.Config_PositionConfig,
     keyof Message | (typeof DeprecatedPositionValidationFields)[number]
-    >
+  > {
-{
   @IsInt()
   positionBroadcastSecs: number;
 

src/validation/config/power.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt, IsNumber, Max, Min } from "class-validator";
 
 export class PowerValidation

src/validation/config/security.ts

@@ -1,14 +1,12 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsString } from "class-validator";
 
-export class SecurityValidation
+export class SecurityValidation implements
-  implements
   Omit<
     Protobuf.Config.Config_SecurityConfig,
     keyof Message | "adminKey" | "privateKey" | "publicKey"
-    >
+  > {
-{
   @IsBoolean()
   adminChannelEnabled: boolean;
 

src/validation/moduleConfig/ambientLighting.ts

@@ -1,14 +1,12 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt } from "class-validator";
 
-export class AmbientLightingValidation
+export class AmbientLightingValidation implements
-  implements
   Omit<
     Protobuf.ModuleConfig.ModuleConfig_AmbientLightingConfig,
     keyof Message
-    >
+  > {
-{
   @IsBoolean()
   ledState: boolean;
 

src/validation/moduleConfig/audio.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsEnum, IsInt } from "class-validator";
 
 export class AudioValidation

src/validation/moduleConfig/cannedMessage.ts

@@ -1,11 +1,13 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsEnum, IsInt, Length } from "class-validator";
 
 export class CannedMessageValidation
   implements
-    Omit<Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig, keyof Message>
+    Omit<
-{
+      Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig,
+      keyof Message
+    > {
   @IsBoolean()
   rotary1Enabled: boolean;
 
@@ -19,13 +21,16 @@ export class CannedMessageValidation
   inputbrokerPinPress: number;
 
   @IsEnum(Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar)
-  inputbrokerEventCw: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar;
+  inputbrokerEventCw:
+    Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar;
 
   @IsEnum(Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar)
-  inputbrokerEventCcw: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar;
+  inputbrokerEventCcw:
+    Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar;
 
   @IsEnum(Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar)
-  inputbrokerEventPress: Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar;
+  inputbrokerEventPress:
+    Protobuf.ModuleConfig.ModuleConfig_CannedMessageConfig_InputEventChar;
 
   @IsBoolean()
   updown1Enabled: boolean;

src/validation/moduleConfig/detectionSensor.ts

@@ -1,14 +1,12 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt, Length } from "class-validator";
 
-export class DetectionSensorValidation
+export class DetectionSensorValidation implements
-  implements
   Omit<
     Protobuf.ModuleConfig.ModuleConfig_DetectionSensorConfig,
     keyof Message
-    >
+  > {
-{
   @IsBoolean()
   enabled: boolean;
 

src/validation/moduleConfig/externalNotification.ts

@@ -1,14 +1,12 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt } from "class-validator";
 
-export class ExternalNotificationValidation
+export class ExternalNotificationValidation implements
-  implements
   Omit<
     Protobuf.ModuleConfig.ModuleConfig_ExternalNotificationConfig,
     keyof Message
-    >
+  > {
-{
   @IsBoolean()
   enabled: boolean;
 

src/validation/moduleConfig/mqtt.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import {
   IsBoolean,
   IsNumber,

src/validation/moduleConfig/neighborInfo.ts

@@ -1,11 +1,10 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt } from "class-validator";
 
 export class NeighborInfoValidation
   implements
-    Omit<Protobuf.ModuleConfig.ModuleConfig_NeighborInfoConfig, keyof Message>
+    Omit<Protobuf.ModuleConfig.ModuleConfig_NeighborInfoConfig, keyof Message> {
-{
   @IsBoolean()
   enabled: boolean;
 

src/validation/moduleConfig/paxcounter.ts

@@ -1,11 +1,10 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt } from "class-validator";
 
 export class PaxcounterValidation
   implements
-    Omit<Protobuf.ModuleConfig.ModuleConfig_PaxcounterConfig, keyof Message>
+    Omit<Protobuf.ModuleConfig.ModuleConfig_PaxcounterConfig, keyof Message> {
-{
   @IsBoolean()
   enabled: boolean;
 

src/validation/moduleConfig/rangeTest.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt } from "class-validator";
 
 export class RangeTestValidation

src/validation/moduleConfig/serial.ts

@@ -1,11 +1,10 @@
 import type { Message } from "@bufbuild/protobuf";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsEnum, IsInt } from "class-validator";
 
 export class SerialValidation
   implements
-    Omit<Protobuf.ModuleConfig.ModuleConfig_SerialConfig, keyof Message>
+    Omit<Protobuf.ModuleConfig.ModuleConfig_SerialConfig, keyof Message> {
-{
   @IsBoolean()
   enabled: boolean;
 

src/validation/moduleConfig/storeForward.ts

@@ -1,5 +1,5 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt } from "class-validator";
 
 export class StoreForwardValidation

src/validation/moduleConfig/telemetry.ts

@@ -1,11 +1,10 @@
 import type { Message } from "@bufbuild/protobuf";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { IsBoolean, IsInt } from "class-validator";
 
 export class TelemetryValidation
   implements
-    Omit<Protobuf.ModuleConfig.ModuleConfig_TelemetryConfig, keyof Message>
+    Omit<Protobuf.ModuleConfig.ModuleConfig_TelemetryConfig, keyof Message> {
-{
   @IsInt()
   deviceUpdateInterval: number;