Start debug log

package.json

@@ -15,7 +15,7 @@
     "@emeraldpay/hashicon-react": "^0.5.2",
     "@floating-ui/react-dom": "^0.4.3",
     "@meshtastic/components": "^1.0.23",
-    "@meshtastic/meshtasticjs": "^0.6.39",
+    "@meshtastic/meshtasticjs": "^0.6.42",
     "@reduxjs/toolkit": "^1.7.2",
     "base64-js": "^1.5.1",
     "framer-motion": "^6.2.6",

pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@emeraldpay/hashicon-react': ^0.5.2
   '@floating-ui/react-dom': ^0.4.3
   '@meshtastic/components': ^1.0.23
-  '@meshtastic/meshtasticjs': ^0.6.39
+  '@meshtastic/meshtasticjs': ^0.6.42
   '@reduxjs/toolkit': ^1.7.2
   '@types/mapbox-gl': ^2.6.1
   '@types/react': ^17.0.39
@@ -62,7 +62,7 @@ dependencies:
   '@emeraldpay/hashicon-react': 0.5.2
   '@floating-ui/react-dom': 0.4.3_b8fdba992ce7d797017dc07106486496
   '@meshtastic/components': 1.0.23_@types+react@17.0.39
-  '@meshtastic/meshtasticjs': 0.6.39
+  '@meshtastic/meshtasticjs': 0.6.42
   '@reduxjs/toolkit': 1.7.2_react-redux@7.2.6+react@17.0.2
   base64-js: 1.5.1
   framer-motion: 6.2.6_react-dom@17.0.2+react@17.0.2
@@ -1587,8 +1587,8 @@ packages:
       - '@types/react'
     dev: false
 
-  /@meshtastic/meshtasticjs/0.6.39:
-    resolution: {integrity: sha512-L2m+0erT2niz2UhPPa8LI3bt3/WdISilzHgMF2Akz5VmkUrllxFfug/ITQuxifQfApl3xoo7TA1LQdBF1xy1oA==}
+  /@meshtastic/meshtasticjs/0.6.42:
+    resolution: {integrity: sha512-sZLsOZXyrMUIVk4HSRsOAtk50IcWb9qEeIfq4i92khbXQvb52yRMAXrt4BBjc3HgnFK4F5gb1KUdLnCpM9QN+A==}
     dependencies:
       '@protobuf-ts/runtime': 2.2.2
       sub-events: 1.8.9

src/components/Connection.tsx

@@ -57,7 +57,7 @@ export const Connection = (): JSX.Element => {
           }}
         >
           <Card>
-            <div className="w-full max-w-3xl p-10">
+            <div className="flex w-full max-w-3xl justify-between p-10">
               {state.deviceStatus ===
               Types.DeviceStatusEnum.DEVICE_DISCONNECTED ? (
                 <div className="space-y-2">
@@ -89,6 +89,21 @@ export const Connection = (): JSX.Element => {
                   )}
                 </div>
               )}
+              <div className="rounded-md bg-secondaryDark p-2">
+                {state.logs.map((log, index) => (
+                  <div className="flex">
+                    <div>
+                      [
+                      {log.date.toLocaleTimeString(undefined, {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                      })}
+                      ]
+                    </div>
+                    <div key={index}>{log.message}</div>
+                  </div>
+                ))}
+              </div>
             </div>
           </Card>
         </Modal>

src/core/connection.ts

@@ -2,6 +2,7 @@ import { connType } from '@core/slices/appSlice';
 import {
   addChannel,
   addChat,
+  addLogEvent,
   addMessage,
   addNode,
   addPosition,
@@ -86,6 +87,10 @@ export const cleanupListeners = (): void => {
 const registerListeners = (): void => {
   SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
 
+  connection.onLogEvent.subscribe((log) => {
+    store.dispatch(addLogEvent(log));
+  });
+
   connection.onMeshPacket.subscribe((packet) => {
     store.dispatch(
       addRoute({

src/core/slices/meshtasticSlice.ts

@@ -58,6 +58,7 @@ interface MeshtasticState {
   hostOverrideEnabled: boolean;
   hostOverride: string;
   chats: ChatEntries;
+  logs: Types.LogEventPacket[];
 }
 
 const initialState: MeshtasticState = {
@@ -76,12 +77,16 @@ const initialState: MeshtasticState = {
     localStorage.getItem('hostOverrideEnabled') === 'true' ?? false,
   hostOverride: localStorage.getItem('hostOverride') ?? '',
   chats: {},
+  logs: [],
 };
 
 export const meshtasticSlice = createSlice({
   name: 'meshtastic',
   initialState,
   reducers: {
+    addLogEvent: (state, action: PayloadAction<Types.LogEventPacket>) => {
+      state.logs.push(action.payload);
+    },
     setDeviceStatus: (state, action: PayloadAction<Types.DeviceStatusEnum>) => {
       state.deviceStatus = action.payload;
     },
@@ -276,6 +281,7 @@ export const meshtasticSlice = createSlice({
 });
 
 export const {
+  addLogEvent,
   setDeviceStatus,
   setLastMeshInterraction,
   setReady,