refactor: device connection logic, added nonce to get config only

.gitignore

@@ -9,6 +9,7 @@ __screenshots__*
 npm/
 .idea
 **/LICENSE
+.DS_Store
 
 packages/protobufs/packages/ts/dist
 

packages/core/src/utils/eventSystem.ts

@@ -387,4 +387,12 @@ export class EventSystem {
    */
   public readonly onQueueStatus: SimpleEventDispatcher<Protobuf.Mesh.QueueStatus> =
     new SimpleEventDispatcher<Protobuf.Mesh.QueueStatus>();
+
+  /**
+   * Fires when a configCompleteId message is received from the device
+   *
+   * @event onConfigComplete
+   */
+  public readonly onConfigComplete: SimpleEventDispatcher<number> =
+    new SimpleEventDispatcher<number>();
 }

packages/core/src/utils/transform/decodePacket.ts

@@ -135,21 +135,27 @@ export const decodePacket = (device: MeshDevice) =>
             }
 
             case "configCompleteId": {
-              if (decodedMessage.payloadVariant.value !== device.configId) {
-                device.log.error(
-                  Types.Emitter[Types.Emitter.HandleFromRadio],
-                  `❌ Invalid config id received from device, expected ${device.configId} but received ${decodedMessage.payloadVariant.value}`,
-                );
-              }
-
               device.log.info(
                 Types.Emitter[Types.Emitter.HandleFromRadio],
-                `⚙️ Valid config id received from device: ${device.configId}`,
+                `⚙️ Received config complete id: ${decodedMessage.payloadVariant.value}`,
               );
 
-              device.updateDeviceStatus(
-                Types.DeviceStatusEnum.DeviceConfigured,
+              // Emit the configCompleteId event for MeshService to handle two-stage flow
+              device.events.onConfigComplete.dispatch(
+                decodedMessage.payloadVariant.value,
               );
+
+              // For backward compatibility: if configId matches, update device status
+              // MeshService will override this behavior for two-stage flow
+              if (decodedMessage.payloadVariant.value === device.configId) {
+                device.log.info(
+                  Types.Emitter[Types.Emitter.HandleFromRadio],
+                  `⚙️ Config id matches device.configId: ${device.configId}`,
+                );
+                device.updateDeviceStatus(
+                  Types.DeviceStatusEnum.DeviceConfigured,
+                );
+              }
               break;
             }
 

packages/web/src/components/DeviceInfoPanel.tsx

@@ -26,7 +26,7 @@ interface DeviceInfoPanelProps {
   isCollapsed: boolean;
   deviceMetrics: DeviceMetrics;
   firmwareVersion: string;
-  user: Protobuf.Mesh.User;
+  user?: Protobuf.Mesh.User;
   setDialogOpen: () => void;
   setCommandPaletteOpen: () => void;
   disableHover?: boolean;
@@ -70,8 +70,12 @@ export const DeviceInfoPanel = ({
     }
     switch (status) {
       case "connected":
+      case "configured":
+      case "online":
         return "bg-emerald-500";
       case "connecting":
+      case "configuring":
+      case "disconnecting":
         return "bg-amber-500";
       case "error":
         return "bg-red-500";
@@ -135,28 +139,30 @@ export const DeviceInfoPanel = ({
 
   return (
     <>
-      <div
-        className={cn(
-          "flex items-center gap-3 p-1 flex-shrink-0",
-          isCollapsed && "justify-center",
-        )}
-      >
-        <Avatar
-          nodeNum={parseInt(user.id.slice(1), 16)}
-          className={cn("flex-shrink-0", isCollapsed && "")}
-          size="sm"
-        />
-        {!isCollapsed && (
-          <p
-            className={cn(
-              "text-sm font-medium text-gray-800 dark:text-gray-200",
-              "transition-opacity duration-300 ease-in-out truncate",
-            )}
-          >
-            {user.longName}
-          </p>
-        )}
-      </div>
+      {user && (
+        <div
+          className={cn(
+            "flex items-center gap-3 p-1 flex-shrink-0",
+            isCollapsed && "justify-center",
+          )}
+        >
+          <Avatar
+            nodeNum={parseInt(user.id.slice(1), 16)}
+            className={cn("flex-shrink-0", isCollapsed && "")}
+            size="sm"
+          />
+          {!isCollapsed && (
+            <p
+              className={cn(
+                "text-sm font-medium text-gray-800 dark:text-gray-200",
+                "transition-opacity duration-300 ease-in-out truncate",
+              )}
+            >
+              {user.longName}
+            </p>
+          )}
+        </div>
+      )}
 
       {connectionStatus && (
         <button

packages/web/src/components/Dialog/AddConnectionDialog/AddConnectionDialog.tsx

@@ -1,6 +1,9 @@
 import { SupportBadge } from "@app/components/Badge/SupportedBadge.tsx";
 import { Switch } from "@app/components/UI/Switch.tsx";
-import type { NewConnection } from "@app/core/stores/deviceStore/types.ts";
+import type {
+  ConnectionType,
+  NewConnection,
+} from "@app/core/stores/deviceStore/types.ts";
 import { testHttpReachable } from "@app/pages/Connections/utils";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
@@ -34,7 +37,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { DialogWrapper } from "../DialogWrapper.tsx";
 import { urlOrIpv4Schema } from "./validation.ts";
 
-type TabKey = "http" | "bluetooth" | "serial";
+type TabKey = ConnectionType;
 type TestingStatus = "idle" | "testing" | "success" | "failure";
 type DialogState = {
   tab: TabKey;

packages/web/src/components/PageComponents/Map/Markers/NodeMarker.tsx

@@ -16,7 +16,6 @@ export const NodeMarker = memo(function NodeMarker({
   id,
   lng,
   lat,
-  label,
   longLabel,
   tooltipLabel,
   hasError,