meshtastic · danditomaso · Jun 17, 2026 · Jun 16, 2026
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -1,13 +1,12 @@
 {
-	"name": "meshtastic-web",
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
-	"features": {
-		"ghcr.io/r3dpoint/devcontainer-features/tailwindcss-standalone-cli:1": {
-			"version": "latest"
-		},
-		"ghcr.io/devcontainers-extra/features/pnpm:2": {
-			"version": "latest"
-		}
-	}
+  "name": "meshtastic-web",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "features": {
+    "ghcr.io/r3dpoint/devcontainer-features/tailwindcss-standalone-cli:1": {
+      "version": "latest"
+    },
+    "ghcr.io/devcontainers-extra/features/pnpm:2": {
+      "version": "latest"
+    }
+  }
 }
-
diff --git a/.github/workflows/release-protobufs.yml b/.github/workflows/release-protobufs.yml
@@ -16,7 +16,7 @@ on:
 permissions: write-all
 
 env:
-  PROTOBUF_DIR: ./packages/protobufs 
+  PROTOBUF_DIR: ./packages/protobufs
 
 jobs:
   codegen:
@@ -70,7 +70,7 @@ jobs:
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v6
-      
+
       - name: Install workspace dependencies
         run: pnpm install --frozen-lockfile
 

diff --git a/.github/workflows/update-stable-from-master.yml b/.github/workflows/update-stable-from-master.yml
@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          fetch-tags: true  # IMPORTANT: we need tags to resolve the release commit
+          fetch-tags: true # IMPORTANT: we need tags to resolve the release commit
 
       - name: Configure Git author
         run: |

diff --git a/.oxfmtrc.json b/.oxfmtrc.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxfmt/configuration_schema.json",
   "useTabs": false,
   "tabWidth": 2,
   "printWidth": 80,

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,5 +2,5 @@
   "editor.formatOnSave": true,
   "search.exclude": {
     "**/i18n/locales/*-*/**": true
-  },
-}
+  }
+}
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-theme="system">
   <head>
     <!-- CookieYes banner -->
@@ -11,11 +11,7 @@
 
     <link rel="manifest" href="site.webmanifest" />
     <link rel="mask-icon" href="logo_black.svg" color="#67ea94" />
-    <link
-      rel="stylesheet"
-      href="src/index.css"
-      crossorigin="anonymous"
-    />
+    <link rel="stylesheet" href="src/index.css" crossorigin="anonymous" />
     <meta name="theme-color" content="#67ea94" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Meshtastic Web Client" />

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -1,17 +1,17 @@
 {
   "name": "meshtastic-web",
   "version": "2.6.6-0",
-  "type": "module",
   "description": "Meshtastic web client",
+  "homepage": "https://meshtastic.org",
+  "bugs": {
+    "url": "https://github.com/meshtastic/web/issues"
+  },
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/meshtastic/web.git"
   },
-  "bugs": {
-    "url": "https://github.com/meshtastic/web/issues"
-  },
-  "homepage": "https://meshtastic.org",
+  "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "setup:certs": "mkcert localhost 127.0.0.1 ::1",
@@ -41,7 +41,6 @@
     "@meshtastic/transport-web-serial": "workspace:*",
     "@noble/curves": "^1.9.2",
     "@preact/signals-core": "^1.8.0",
-    "better-result": "^2.9.2",
     "@radix-ui/react-accordion": "^1.2.13",
     "@radix-ui/react-alert-dialog": "^1.1.16",
     "@radix-ui/react-checkbox": "^1.3.4",
@@ -69,6 +68,7 @@
     "@types/node": "^25.9.3",
     "@types/web-bluetooth": "^0.0.21",
     "base64-js": "^1.5.1",
+    "better-result": "^2.9.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

diff --git a/apps/web/public/site.webmanifest b/apps/web/public/site.webmanifest
@@ -1,16 +1,16 @@
 {
-	"name": "Meshtastic",
-	"short_name": "Web Client",
-	"start_url": ".",
-	"description": "Meshtastic Web App",
-	"icons": [
-		{
-			"src": "/logo.svg",
-			"sizes": "any",
-			"type": "image/svg+xml"
-		}
-	],
-	"theme_color": "#67ea94",
-	"background_color": "#67ea94",
-	"display": "standalone"
+  "name": "Meshtastic",
+  "short_name": "Web Client",
+  "start_url": ".",
+  "description": "Meshtastic Web App",
+  "icons": [
+    {
+      "src": "/logo.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ],
+  "theme_color": "#67ea94",
+  "background_color": "#67ea94",
+  "display": "standalone"
 }
diff --git a/apps/web/src/DeviceWrapper.tsx b/apps/web/src/DeviceWrapper.tsx
@@ -8,6 +8,8 @@ export interface DeviceWrapperProps {
 
 export const DeviceWrapper = ({ children, deviceId }: DeviceWrapperProps) => {
   return (
-    <CurrentDeviceContext.Provider value={{ deviceId }}>{children}</CurrentDeviceContext.Provider>
+    <CurrentDeviceContext.Provider value={{ deviceId }}>
+      {children}
+    </CurrentDeviceContext.Provider>
   );
 };
diff --git a/apps/web/src/__mocks__/components/UI/Checkbox.tsx b/apps/web/src/__mocks__/components/UI/Checkbox.tsx
@@ -1,7 +1,21 @@
 import { vi } from "vitest";
 
 vi.mock("@components/UI/Checkbox.tsx", () => ({
-  Checkbox: ({ id, checked, onChange }: { id: string; checked: boolean; onChange: () => void }) => (
-    <input data-testid="checkbox" type="checkbox" id={id} checked={checked} onChange={onChange} />
+  Checkbox: ({
+    id,
+    checked,
+    onChange,
+  }: {
+    id: string;
+    checked: boolean;
+    onChange: () => void;
+  }) => (
+    <input
+      data-testid="checkbox"
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={onChange}
+    />
   ),
 }));
diff --git a/apps/web/src/components/BatteryStatus.tsx b/apps/web/src/components/BatteryStatus.tsx
@@ -1,4 +1,9 @@
-import { BatteryFullIcon, BatteryLowIcon, BatteryMediumIcon, PlugZapIcon } from "lucide-react";
+import {
+  BatteryFullIcon,
+  BatteryLowIcon,
+  BatteryMediumIcon,
+  PlugZapIcon,
+} from "lucide-react";
 import type React from "react";
 import { useTranslation } from "react-i18next";
 import type { DeviceMetrics } from "./types.ts";
@@ -38,7 +43,10 @@ export const getBatteryStatus = (level: number): BatteryStatusKey => {
 const BatteryStatus: React.FC<BatteryStatusProps> = ({ deviceMetrics }) => {
   const { t } = useTranslation();
 
-  if (deviceMetrics?.batteryLevel === undefined || deviceMetrics?.batteryLevel === null) {
+  if (
+    deviceMetrics?.batteryLevel === undefined ||
+    deviceMetrics?.batteryLevel === null
+  ) {
     return null;
   }
 

diff --git a/apps/web/src/components/CommandPalette/index.tsx b/apps/web/src/components/CommandPalette/index.tsx
@@ -58,8 +58,12 @@ export interface SubItem {
 }
 
 export const CommandPalette = () => {
-  const { commandPaletteOpen, setCommandPaletteOpen, setConnectDialogOpen, setSelectedDevice } =
-    useAppStore();
+  const {
+    commandPaletteOpen,
+    setCommandPaletteOpen,
+    setConnectDialogOpen,
+    setSelectedDevice,
+  } = useAppStore();
   const { getDevices } = useDeviceStore();
   const { setDialogOpen, connection } = useDevice();
   const allNodes = useNodesAsProto();
@@ -116,7 +120,9 @@ export const CommandPalette = () => {
           label: t("manage.command.switchNode"),
           icon: ArrowLeftRightIcon,
           subItems: getDevices().map((device) => ({
-            label: getNode(device.hardware.myNodeNum)?.user?.longName ?? t("unknown.shortName"),
+            label:
+              getNode(device.hardware.myNodeNum)?.user?.longName ??
+              t("unknown.shortName"),
             icon: <Avatar nodeNum={device.hardware.myNodeNum} />,
             action() {
               setSelectedDevice(device.id);
@@ -259,7 +265,10 @@ export const CommandPalette = () => {
   }, [setCommandPaletteOpen]);
 
   return (
-    <CommandDialog open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen}>
+    <CommandDialog
+      open={commandPaletteOpen}
+      onOpenChange={setCommandPaletteOpen}
+    >
       <CommandInput placeholder={t("search.commandPalette")} />
       <CommandList>
         <CommandEmpty>{t("emptyState")}</CommandEmpty>

diff --git a/apps/web/src/components/ConnectingOverlay.tsx b/apps/web/src/components/ConnectingOverlay.tsx
@@ -49,7 +49,7 @@
  // out of sync, etc.). Resets when a fresh attempt starts.
  const [showCancel, setShowCancel] = useState(false);
  useEffect(() => {
    if (!active) {
      setShowCancel(false);
      return;
    }
@@ -64,12 +64,21 @@
   const counters =
     progress.phase === "configuring" || progress.phase === "configured"
       ? progress.received
-      : { config: 0, modules: 0, channels: 0, nodes: 0, myInfo: false, metadata: false };
+      : {
+          config: 0,
+          modules: 0,
+          channels: 0,
+          nodes: 0,
+          myInfo: false,
+          metadata: false,
+        };
 
   const isConnecting = active.status === "connecting";
   const phaseLabel = isConnecting
     ? t("overlay.phase.connecting", { defaultValue: "Opening transport…" })
-    : t("overlay.phase.configuring", { defaultValue: "Streaming configuration…" });
+    : t("overlay.phase.configuring", {
+        defaultValue: "Streaming configuration…",
+      });
 
   return (
     <Dialog open>
@@ -133,7 +142,11 @@
                     "Taking longer than usual. The device may be in CLI / bootloader mode, or the firmware isn't responding to config requests.",
                 })}
               </p>
-              <Button type="button" variant="outline" onClick={() => void disconnect(active.id)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => void disconnect(active.id)}
+              >
                 {t("overlay.cancel", { defaultValue: "Cancel" })}
               </Button>
             </div>

diff --git a/apps/web/src/components/DeviceInfoPanel.tsx b/apps/web/src/components/DeviceInfoPanel.tsx
@@ -107,7 +107,9 @@ export const DeviceInfoPanel = ({
       label: t("batteryVoltage.title"),
       icon: ZapIcon,
       value:
-        voltage !== undefined ? `${voltage?.toPrecision(3)} V` : t("unknown.notAvailable", "N/A"),
+        voltage !== undefined
+          ? `${voltage?.toPrecision(3)} V`
+          : t("unknown.notAvailable", "N/A"),
     },
     {
       id: "firmware",
@@ -205,7 +207,9 @@ export const DeviceInfoPanel = ({
         </button>
       )}
 
-      {!isCollapsed && <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />}
+      {!isCollapsed && (
+        <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />
+      )}
 
       <div
         className={cn(
@@ -237,7 +241,9 @@ export const DeviceInfoPanel = ({
         })}
       </div>
 
-      {!isCollapsed && <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />}
+      {!isCollapsed && (
+        <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />
+      )}
 
       <div
         className={cn(
@@ -251,7 +257,9 @@ export const DeviceInfoPanel = ({
         {actionButtons.map((buttonItem) => {
           const Icon = buttonItem.icon;
           if (buttonItem.render) {
-            return <Fragment key={buttonItem.id}>{buttonItem.render()}</Fragment>;
+            return (
+              <Fragment key={buttonItem.id}>{buttonItem.render()}</Fragment>
+            );
           }
           return (
             <Button
@@ -273,15 +281,17 @@ export const DeviceInfoPanel = ({
                   "flex-shrink-0 w-4",
                   "text-gray-500 dark:text-gray-400",
                   "transition-colors duration-150",
-                  !disableHover && "group-hover:text-gray-700 dark:group-hover:text-gray-200",
+                  !disableHover &&
+                    "group-hover:text-gray-700 dark:group-hover:text-gray-200",
                 )}
               />
               <Subtle
                 className={cn(
                   "text-sm",
                   "text-gray-600 dark:text-gray-300",
                   "transition-colors duration-150",
-                  !disableHover && "group-hover:text-gray-800 dark:group-hover:text-gray-100",
+                  !disableHover &&
+                    "group-hover:text-gray-800 dark:group-hover:text-gray-100",
                 )}
               >
                 {buttonItem.label}