From 6e145421efa281a2e150911ba84c7cff3a275886 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Sun, 26 May 2024 15:37:17 +0800
Subject: [PATCH 01/20] Add button to Message page to send a traceroute to a
 node.

As noted in meshtastic/web#179, it would be great to be able to
send traceroutes from the web application.

This patch adds a button to the messages page that sends a
traceroute to the selected node.
---
 src/pages/Messages.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 82325107..2a179208 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -7,11 +7,11 @@ import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
 import { getChannelName } from "@pages/Channels.js";
-import { HashIcon } from "lucide-react";
+import { HashIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware, messages } = useDevice();
+  const { channels, nodes, hardware, messages, connection } = useDevice();
   const [chatType, setChatType] =
     useState<Types.PacketDestination>("broadcast");
   const [activeChat, setActiveChat] = useState<number>(
@@ -72,6 +72,18 @@ export const MessagesPage = (): JSX.Element => {
               ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
               : "Loading..."
         }`}
+      actions={[
+          {
+            icon: WaypointsIcon,
+            async onClick() {
+              await connection?.traceRoute(nodes.get(activeChat)?.num).then(() =>
+                toast({
+                  title: `Traceroute sent.`,
+                }),
+              );
+            },
+           },
+         ]}
       >
         {allChannels.map(
           (channel) =>

From a7237bcb2bcf7bc19dc0602541c079292021ec0c Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Sun, 26 May 2024 15:40:55 +0800
Subject: [PATCH 02/20] Revert "Support floats in number fields"

This reverts commit 5fdd07ee68b14c687c71e785b517bdde18f2f910.
---
 src/components/Form/FormInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx
index 74cea240..af69d882 100644
--- a/src/components/Form/FormInput.tsx
+++ b/src/components/Form/FormInput.tsx
@@ -32,11 +32,11 @@ export function GenericInput<T extends FieldValues>({
         <Input
           type={field.type}
           step={field.properties?.step}
-          value={field.type === "number" ? Number.parseFloat(value) : value}
+          value={field.type === "number" ? Number.parseInt(value) : value}
           onChange={(e) =>
             onChange(
               field.type === "number"
-                ? Number.parseFloat(e.target.value)
+                ? Number.parseInt(e.target.value)
                 : e.target.value,
             )
           }

From 82c1d3e3f102726407f3fd12dbf506f75b459800 Mon Sep 17 00:00:00 2001
From: Chris Drackett <chris@drackett.com>
Date: Tue, 30 Apr 2024 10:35:09 -0700
Subject: [PATCH 03/20] Support floats in number fields

---
 src/components/Form/FormInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx
index af69d882..74cea240 100644
--- a/src/components/Form/FormInput.tsx
+++ b/src/components/Form/FormInput.tsx
@@ -32,11 +32,11 @@ export function GenericInput<T extends FieldValues>({
         <Input
           type={field.type}
           step={field.properties?.step}
-          value={field.type === "number" ? Number.parseInt(value) : value}
+          value={field.type === "number" ? Number.parseFloat(value) : value}
           onChange={(e) =>
             onChange(
               field.type === "number"
-                ? Number.parseInt(e.target.value)
+                ? Number.parseFloat(e.target.value)
                 : e.target.value,
             )
           }

From 97b9570196853b2e3f224a251eaeba0754d59f86 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Sun, 26 May 2024 15:41:37 +0800
Subject: [PATCH 04/20] Revert "Add button to Message page to send a traceroute
 to a node."

This reverts commit 6e145421efa281a2e150911ba84c7cff3a275886.
---
 src/pages/Messages.tsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 2a179208..82325107 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -7,11 +7,11 @@ import { useDevice } from "@core/stores/deviceStore.js";
 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 { HashIcon } from "lucide-react";
 import { useState } from "react";
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware, messages, connection } = useDevice();
+  const { channels, nodes, hardware, messages } = useDevice();
   const [chatType, setChatType] =
     useState<Types.PacketDestination>("broadcast");
   const [activeChat, setActiveChat] = useState<number>(
@@ -72,18 +72,6 @@ export const MessagesPage = (): JSX.Element => {
               ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
               : "Loading..."
         }`}
-      actions={[
-          {
-            icon: WaypointsIcon,
-            async onClick() {
-              await connection?.traceRoute(nodes.get(activeChat)?.num).then(() =>
-                toast({
-                  title: `Traceroute sent.`,
-                }),
-              );
-            },
-           },
-         ]}
       >
         {allChannels.map(
           (channel) =>

From 1458497fc3459cd3658a4729b5eddb549e26173b Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Sun, 26 May 2024 15:42:50 +0800
Subject: [PATCH 05/20] Add button to Message page to send a traceroute to a
 node.

As noted in meshtastic/web#179, it would be great to be able to
send traceroutes from the web application.

This patch adds a button to the messages page that sends a
traceroute to the selected node.
---
 src/pages/Messages.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 82325107..2a179208 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -7,11 +7,11 @@ import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
 import { getChannelName } from "@pages/Channels.js";
-import { HashIcon } from "lucide-react";
+import { HashIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware, messages } = useDevice();
+  const { channels, nodes, hardware, messages, connection } = useDevice();
   const [chatType, setChatType] =
     useState<Types.PacketDestination>("broadcast");
   const [activeChat, setActiveChat] = useState<number>(
@@ -72,6 +72,18 @@ export const MessagesPage = (): JSX.Element => {
               ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
               : "Loading..."
         }`}
+      actions={[
+          {
+            icon: WaypointsIcon,
+            async onClick() {
+              await connection?.traceRoute(nodes.get(activeChat)?.num).then(() =>
+                toast({
+                  title: `Traceroute sent.`,
+                }),
+              );
+            },
+           },
+         ]}
       >
         {allChannels.map(
           (channel) =>

From 390b16812ab5a47523997f701d4d32c40e80a18b Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Sun, 26 May 2024 18:41:13 +0800
Subject: [PATCH 06/20] Subscribe to and store traceroutePackets

---
 src/core/stores/deviceStore.ts | 24 ++++++++++++++++++++++++
 src/core/subscriptions.ts      |  6 ++++++
 2 files changed, 30 insertions(+)

diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index fee9fb8f..d350c154 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -73,6 +73,7 @@ export interface Device {
   addPosition: (position: Types.PacketMetadata<Protobuf.Mesh.Position>) => void;
   addConnection: (connection: Types.ConnectionType) => void;
   addMessage: (message: MessageWithState) => void;
+  addTraceRoute: (traceroute: Protobuf.Mesh.RouteDiscovery) => void;
   addMetadata: (from: number, metadata: Protobuf.Mesh.DeviceMetadata) => void;
   setMessageState: (
     type: "direct" | "broadcast",
@@ -119,6 +120,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
             direct: new Map(),
             broadcast: new Map(),
           },
+          traceroutes: new Map(),
           connection: undefined,
           activePage: "messages",
           activeNode: 0,
@@ -483,6 +485,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               }),
             );
           },
+
           addMetadata: (from, metadata) => {
             set(
               produce<DeviceState>((draft) => {
@@ -494,6 +497,27 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               }),
             );
           },
+          addTraceRoute: (traceroute) => {
+            set(
+              produce<DeviceState>((draft) => {
+                console.log("addTraceRoute called");
+                console.log(traceroute);
+                const device = draft.devices.get(id);
+                if (!device) {
+                  return;
+                }
+
+                const nodetraceroutes = device.traceroutes.get(traceroute.from)
+                if (nodetraceroutes) {
+                    nodetraceroutes.push(traceroute);
+                    device.traceroutes.set(traceroute.from, nodetraceroutes);
+                } else {
+                    device.traceroutes.set(traceroute.from, [traceroute]);
+                }
+                console.log(device.traceroutes);
+              }),
+            );
+          },
           setMessageState: (
             type: "direct" | "broadcast",
             channelIndex: Types.ChannelNumber,
diff --git a/src/core/subscriptions.ts b/src/core/subscriptions.ts
index cdbaa892..40febae9 100644
--- a/src/core/subscriptions.ts
+++ b/src/core/subscriptions.ts
@@ -86,6 +86,12 @@ export const subscribeAll = (
     });
   });
 
+  connection.events.onTraceRoutePacket.subscribe((traceRoutePacket) => {
+    device.addTraceRoute({
+      ...traceRoutePacket,
+    });
+  });
+
   connection.events.onPendingSettingsChange.subscribe((state) => {
     device.setPendingSettingsChanges(state);
   });

From 86263990e606146a2b45095dfb5629eebb0714c2 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Sun, 26 May 2024 18:41:48 +0800
Subject: [PATCH 07/20] Add Toast lib to Messages page

---
 src/pages/Messages.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 2a179208..29a5e9fa 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -9,6 +9,8 @@ import { Protobuf, Types } from "@meshtastic/js";
 import { getChannelName } from "@pages/Channels.js";
 import { HashIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
+import { useToast } from "@core/hooks/useToast.js";
+
 
 export const MessagesPage = (): JSX.Element => {
   const { channels, nodes, hardware, messages, connection } = useDevice();
@@ -25,6 +27,8 @@ export const MessagesPage = (): JSX.Element => {
     (ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
   );
   const currentChannel = channels.get(activeChat);
+  const { toast } = useToast();
+
 
   return (
     <>

From be3117651caf11de3bee7f89d858ee2ecec3f02c Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Sun, 26 May 2024 21:00:30 +0800
Subject: [PATCH 08/20] Add basic traceroute display

This patch adds basic traceroute display functionality on the
Messages page for an individual node.
---
 .../PageComponents/Messages/ChannelChat.tsx   | 18 ++++++++++
 .../PageComponents/Messages/TraceRoute.tsx    | 33 +++++++++++++++++++
 src/core/stores/deviceStore.ts                |  2 +-
 src/pages/Messages.tsx                        |  3 +-
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PageComponents/Messages/TraceRoute.tsx

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index e43ae196..438591c7 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -1,6 +1,7 @@
 import { Subtle } from "@app/components/UI/Typography/Subtle.js";
 import { MessageWithState, useDevice } from "@app/core/stores/deviceStore.js";
 import { Message } from "@components/PageComponents/Messages/Message.js";
+import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
 import type { Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
@@ -9,12 +10,14 @@ export interface ChannelChatProps {
   messages?: MessageWithState[];
   channel: Types.ChannelNumber;
   to: Types.Destination;
+  traceroutes?: Types.PacketMetadata[];
 }
 
 export const ChannelChat = ({
   messages,
   channel,
   to,
+  traceroutes,
 }: ChannelChatProps): JSX.Element => {
   const { nodes } = useDevice();
 
@@ -38,6 +41,21 @@ export const ChannelChat = ({
             <Subtle>No Messages</Subtle>
           </div>
         )}
+        {traceroutes ? (
+          traceroutes.map((traceroute, index) => (
+            <TraceRoute
+              key={traceroute.id}
+              from={nodes.get(traceroute.from)}
+              to={nodes.get(traceroute.to)}
+              route={traceroute.data.route}
+            />
+          ))
+        ) : (
+          <div className="m-auto">
+            <InboxIcon className="m-auto" />
+            <Subtle>No Traceroutes</Subtle>
+          </div>
+        )}
       </div>
       <div className="p-3">
         <MessageInput to={to} channel={channel} />
diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
new file mode 100644
index 00000000..86c4c8bb
--- /dev/null
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -0,0 +1,33 @@
+import type { MessageWithState } from "@app/core/stores/deviceStore.js";
+import type { Protobuf } from "@meshtastic/js";
+import {
+  WaypointsIcon,
+  ArrowRightLeft,
+} from "lucide-react";
+
+export interface TraceRouteProps {
+  from?: Protobuf.Mesh.NodeInfo;
+  to?: Protobuf.Mesh.NodeInfo;
+  route?: Protobuf.Mesh.RouteDiscovery;
+}
+
+export const TraceRoute = ({
+  from,
+  to,
+  route,
+}: TraceRouteProps): JSX.Element => {
+  return route.length == 0 ? (
+    <div className="ml-5 flex">
+      <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+      {from?.user?.longName}↔{to?.user?.longName}
+      </span>
+    </div>
+   ) : ( 
+    <div className="ml-5 flex">
+      <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+      {route}
+      </span>
+    </div>
+
+  );
+};
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index d350c154..a792fb4c 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -512,7 +512,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                     nodetraceroutes.push(traceroute);
                     device.traceroutes.set(traceroute.from, nodetraceroutes);
                 } else {
-                    device.traceroutes.set(traceroute.from, [traceroute]);
+                   device.traceroutes.set(traceroute.from, [traceroute]);
                 }
                 console.log(device.traceroutes);
               }),
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 29a5e9fa..4ac7ec64 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -13,7 +13,7 @@ import { useToast } from "@core/hooks/useToast.js";
 
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware, messages, connection } = useDevice();
+  const { channels, nodes, hardware, messages, traceroutes, connection } = useDevice();
   const [chatType, setChatType] =
     useState<Types.PacketDestination>("broadcast");
   const [activeChat, setActiveChat] = useState<number>(
@@ -108,6 +108,7 @@ export const MessagesPage = (): JSX.Element => {
                 to={activeChat}
                 messages={messages.direct.get(node.num)}
                 channel={Types.ChannelNumber.Primary}
+                traceroutes={traceroutes.get(node.num)}
               />
             ),
         )}

From 056a194ede338657300514da5732b27359edd35c Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 09:53:20 +0800
Subject: [PATCH 09/20] Add formatting logic for multi-hop traceroutes

---
 .../PageComponents/Messages/TraceRoute.tsx       | 16 +++++++++-------
 src/core/stores/deviceStore.ts                   |  1 -
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 86c4c8bb..e1857b79 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -1,9 +1,5 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.js";
+import { useDevice } from "@app/core/stores/deviceStore.js";
 import type { Protobuf } from "@meshtastic/js";
-import {
-  WaypointsIcon,
-  ArrowRightLeft,
-} from "lucide-react";
 
 export interface TraceRouteProps {
   from?: Protobuf.Mesh.NodeInfo;
@@ -11,11 +7,14 @@ export interface TraceRouteProps {
   route?: Protobuf.Mesh.RouteDiscovery;
 }
 
+
 export const TraceRoute = ({
   from,
   to,
   route,
 }: TraceRouteProps): JSX.Element => {
+  const { nodes } = useDevice();
+
   return route.length == 0 ? (
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
@@ -25,9 +24,12 @@ export const TraceRoute = ({
    ) : ( 
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {route}
+      {from?.user?.longName}↔
+      {route.map((hop) => (
+         nodes.get(hop).user?.longName + "↔"
+     ))}
+      {to?.user?.longName}
       </span>
     </div>
-
   );
 };
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index a792fb4c..dc82e1cb 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -514,7 +514,6 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                 } else {
                    device.traceroutes.set(traceroute.from, [traceroute]);
                 }
-                console.log(device.traceroutes);
               }),
             );
           },

From f16cce90c892d562f8c93073de20bb74bd727103 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 10:09:59 +0800
Subject: [PATCH 10/20] Fix case where intermediary node in traceroute is
 unknown.

---
 src/components/PageComponents/Messages/TraceRoute.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index e1857b79..9911e6cd 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -26,7 +26,7 @@ export const TraceRoute = ({
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
       {from?.user?.longName}↔
       {route.map((hop) => (
-         nodes.get(hop).user?.longName + "↔"
+         nodes.get(hop)?.user?.longName ?? "Unknown" + "↔"
      ))}
       {to?.user?.longName}
       </span>

From a728b848e120d448043e4524e8e1af7647adaf7a Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 10:39:45 +0800
Subject: [PATCH 11/20] Don't show traceroute button on Channels

It doesn't work, it's only for nodes!
---
 src/pages/Messages.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 4ac7ec64..f1d58173 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -76,7 +76,9 @@ export const MessagesPage = (): JSX.Element => {
               ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
               : "Loading..."
         }`}
-      actions={[
+      actions={
+         chatType === "direct"
+          ? [
           {
             icon: WaypointsIcon,
             async onClick() {
@@ -87,7 +89,9 @@ export const MessagesPage = (): JSX.Element => {
               );
             },
            },
-         ]}
+         ]
+         : []
+         }
       >
         {allChannels.map(
           (channel) =>

From 0f89e04bb05c0f1273797419aa6fee622a4552d6 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 10:56:34 +0800
Subject: [PATCH 12/20] Only show traceroutes on node direct message pageso

---
 src/components/PageComponents/Messages/ChannelChat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 438591c7..d1945832 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -41,7 +41,7 @@ export const ChannelChat = ({
             <Subtle>No Messages</Subtle>
           </div>
         )}
-        {traceroutes ? (
+        { to === "broadcast" ? null : traceroutes ? (
           traceroutes.map((traceroute, index) => (
             <TraceRoute
               key={traceroute.id}

From 7b6b8daeba72586197bc83d5d3a25a0e0b4ab2fe Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 11:40:59 +0800
Subject: [PATCH 13/20] Fix build errors

Several types were wrong.
---
 src/components/PageComponents/Messages/ChannelChat.tsx | 4 ++--
 src/components/PageComponents/Messages/TraceRoute.tsx  | 6 +++---
 src/core/stores/deviceStore.ts                         | 3 ++-
 src/pages/Nodes.tsx                                    | 8 ++++++++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index d1945832..650ee678 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -3,14 +3,14 @@ import { MessageWithState, useDevice } from "@app/core/stores/deviceStore.js";
 import { Message } from "@components/PageComponents/Messages/Message.js";
 import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
-import type { Types } from "@meshtastic/js";
+import type { Protobuf, Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
 
 export interface ChannelChatProps {
   messages?: MessageWithState[];
   channel: Types.ChannelNumber;
   to: Types.Destination;
-  traceroutes?: Types.PacketMetadata[];
+  traceroutes?: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[];
 }
 
 export const ChannelChat = ({
diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 9911e6cd..26f08bd4 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -2,9 +2,9 @@ import { useDevice } from "@app/core/stores/deviceStore.js";
 import type { Protobuf } from "@meshtastic/js";
 
 export interface TraceRouteProps {
-  from?: Protobuf.Mesh.NodeInfo;
-  to?: Protobuf.Mesh.NodeInfo;
-  route?: Protobuf.Mesh.RouteDiscovery;
+  from: Protobuf.Mesh.NodeInfo;
+  to: Protobuf.Mesh.NodeInfo;
+  route: Array<Number>;
 }
 
 
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index dc82e1cb..ecd1f7f0 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -41,6 +41,7 @@ export interface Device {
     direct: Map<number, MessageWithState[]>;
     broadcast: Map<Types.ChannelNumber, MessageWithState[]>;
   };
+  traceroutes: Map<number, Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[]>;
   connection?: Types.ConnectionType;
   activePage: Page;
   activeNode: number;
@@ -73,7 +74,7 @@ export interface Device {
   addPosition: (position: Types.PacketMetadata<Protobuf.Mesh.Position>) => void;
   addConnection: (connection: Types.ConnectionType) => void;
   addMessage: (message: MessageWithState) => void;
-  addTraceRoute: (traceroute: Protobuf.Mesh.RouteDiscovery) => void;
+  addTraceRoute: (traceroute: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>) => void;
   addMetadata: (from: number, metadata: Protobuf.Mesh.DeviceMetadata) => void;
   setMessageState: (
     type: "direct" | "broadcast",
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index 8b1c03a6..1ece9be5 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -26,6 +26,7 @@ export const NodesPage = (): JSX.Element => {
             { 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 },
           ]}
           rows={filteredNodes.map((node) => [
             <Hashicon size={24} value={node.num.toString()} />,
@@ -55,6 +56,13 @@ export const NodesPage = (): JSX.Element => {
               {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
               {(node.snr + 10) * 5}raw
             </Mono>,
+            <Mono>
+              {node.lastHeard != 0 ?
+                (node.viaMqtt === false && node.hopsAway === 0
+                  ? "Direct": node.hopsAway.toString() + " hops away")
+                  : "-"}
+              {node.viaMqtt === true? ", via MQTT": ""}
+            </Mono>
           ])}
         />
       </div>

From 54c983439cab1e27b906ebf47ba414c626510820 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 11:52:33 +0800
Subject: [PATCH 14/20] Fix type Number - number

---
 src/components/PageComponents/Messages/TraceRoute.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 26f08bd4..4f160991 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -4,7 +4,7 @@ import type { Protobuf } from "@meshtastic/js";
 export interface TraceRouteProps {
   from: Protobuf.Mesh.NodeInfo;
   to: Protobuf.Mesh.NodeInfo;
-  route: Array<Number>;
+  route: Array<number>;
 }
 
 

From e825a737b0dd9b82bdb41e5be0a2dc9bcd40df23 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 12:08:32 +0800
Subject: [PATCH 15/20] Fix build errors

---
 src/components/PageComponents/Messages/TraceRoute.tsx | 4 ++--
 src/pages/Messages.tsx                                | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 4f160991..513810dc 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -2,8 +2,8 @@ import { useDevice } from "@app/core/stores/deviceStore.js";
 import type { Protobuf } from "@meshtastic/js";
 
 export interface TraceRouteProps {
-  from: Protobuf.Mesh.NodeInfo;
-  to: Protobuf.Mesh.NodeInfo;
+  from?: Protobuf.Mesh.NodeInfo;
+  to?: Protobuf.Mesh.NodeInfo;
   route: Array<number>;
 }
 
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index f1d58173..81d0cd15 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -82,7 +82,8 @@ export const MessagesPage = (): JSX.Element => {
           {
             icon: WaypointsIcon,
             async onClick() {
-              await connection?.traceRoute(nodes.get(activeChat)?.num).then(() =>
+              if (nodes.get(activeChat)?.num === undefined) return;
+              await connection?.traceRoute(nodes.get(activeChat)?.num!).then(() =>
                 toast({
                   title: `Traceroute sent.`,
                 }),

From 569c2daa0950841a416c98d3067510a04da1c376 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 20:57:09 +0800
Subject: [PATCH 16/20] Fix traceroute ordering for multi-hop traceroutes

---
 src/components/PageComponents/Messages/TraceRoute.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 513810dc..593f8a58 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -18,17 +18,17 @@ export const TraceRoute = ({
   return route.length == 0 ? (
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {from?.user?.longName}↔{to?.user?.longName}
+      {to?.user?.longName}↔{from?.user?.longName}
       </span>
     </div>
    ) : ( 
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {from?.user?.longName}↔
+      {to?.user?.longName}↔
       {route.map((hop) => (
-         nodes.get(hop)?.user?.longName ?? "Unknown" + "↔"
+         nodes.get(hop)?.user?.longName + "↔" ?? "Unknown↔"
      ))}
-      {to?.user?.longName}
+      {from?.user?.longName}
       </span>
     </div>
   );

From 452f2581e239a93eef17798a82024344ace06cea Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 21:02:42 +0800
Subject: [PATCH 17/20] Fix incorrect use of operator build error.

---
 src/components/PageComponents/Messages/TraceRoute.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 593f8a58..9053d0d6 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -26,7 +26,7 @@ export const TraceRoute = ({
       <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↔"
+         (nodes.get(hop)?.user?.longName ?? "Unknown↔") + "↔"
      ))}
       {from?.user?.longName}
       </span>

From daff97a5e0d2cf6257749a58116feed1c8316425 Mon Sep 17 00:00:00 2001
From: Tom Fifield <tom@tomfifield.net>
Date: Mon, 27 May 2024 21:04:12 +0800
Subject: [PATCH 18/20] Fix double double arrow on unknown nodes in multi-hop
 traceroutes

---
 src/components/PageComponents/Messages/TraceRoute.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 9053d0d6..6bc0a1e5 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -26,7 +26,7 @@ export const TraceRoute = ({
       <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↔") + "↔"
+         (nodes.get(hop)?.user?.longName ?? "Unknown") + "↔"
      ))}
       {from?.user?.longName}
       </span>

From e9a681ab211c97ebbfdd764d9e35b3decbdb5594 Mon Sep 17 00:00:00 2001
From: Hunter Thornsberry <hunter@hunterthornsberry.com>
Date: Sun, 16 Jun 2024 11:01:39 -0400
Subject: [PATCH 19/20] Add tr column and Toast when starting tr

---
 src/components/PageComponents/Messages/ChannelChat.tsx | 6 +++++-
 src/pages/Messages.tsx                                 | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 650ee678..dd2959e1 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -23,7 +23,8 @@ export const ChannelChat = ({
 
   return (
     <div className="flex flex-grow flex-col">
-      <div className="flex flex-grow flex-col">
+      <div className="flex flex-grow">
+        <div className="flex flex-grow flex-col">
         {messages ? (
           messages.map((message, index) => (
             <Message
@@ -41,6 +42,8 @@ export const ChannelChat = ({
             <Subtle>No Messages</Subtle>
           </div>
         )}
+        </div>
+        <div className={"flex flex-grow flex-col border-slate-400 border-l " + (traceroutes == undefined ? "hidden" : "") }>
         { to === "broadcast" ? null : traceroutes ? (
           traceroutes.map((traceroute, index) => (
             <TraceRoute
@@ -57,6 +60,7 @@ export const ChannelChat = ({
           </div>
         )}
       </div>
+      </div>
       <div className="p-3">
         <MessageInput to={to} channel={channel} />
       </div>
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 81d0cd15..f8d51cd9 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -83,6 +83,9 @@ export const MessagesPage = (): JSX.Element => {
             icon: WaypointsIcon,
             async onClick() {
               if (nodes.get(activeChat)?.num === undefined) return;
+              toast({
+                title: "Sending Traceroute, please wait..."
+              })
               await connection?.traceRoute(nodes.get(activeChat)?.num!).then(() =>
                 toast({
                   title: `Traceroute sent.`,

From d42e8c10a03b078086f7b7481716a887ba4e51a7 Mon Sep 17 00:00:00 2001
From: Hunter Thornsberry <hunter@hunterthornsberry.com>
Date: Thu, 4 Jul 2024 17:29:40 -0400
Subject: [PATCH 20/20] minor changes and biome fixes

---
 .../PageComponents/Messages/ChannelChat.tsx   | 74 ++++++++++---------
 .../PageComponents/Messages/TraceRoute.tsx    | 15 ++--
 src/core/stores/deviceStore.ts                | 22 ++++--
 src/pages/Messages.tsx                        | 48 ++++++------
 4 files changed, 84 insertions(+), 75 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 8643446a..81ed007f 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -4,8 +4,8 @@ import {
   useDevice,
 } from "@app/core/stores/deviceStore.js";
 import { Message } from "@components/PageComponents/Messages/Message.js";
-import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
+import { TraceRoute } from "@components/PageComponents/Messages/TraceRoute.js";
 import type { Protobuf, Types } from "@meshtastic/js";
 import { InboxIcon } from "lucide-react";
 
@@ -28,41 +28,45 @@ export const ChannelChat = ({
     <div className="flex flex-grow flex-col">
       <div className="flex flex-grow">
         <div className="flex flex-grow flex-col">
-        {messages ? (
-          messages.map((message, index) => (
-            <Message
-              key={message.id}
-              message={message}
-              lastMsgSameUser={
-                index === 0 ? false : messages[index - 1].from === message.from
-              }
-              sender={nodes.get(message.from)}
-            />
-          ))
-        ) : (
-          <div className="m-auto">
-            <InboxIcon className="m-auto" />
-            <Subtle>No Messages</Subtle>
-          </div>
-        )}
+          {messages ? (
+            messages.map((message, index) => (
+              <Message
+                key={message.id}
+                message={message}
+                lastMsgSameUser={
+                  index === 0
+                    ? false
+                    : messages[index - 1].from === message.from
+                }
+                sender={nodes.get(message.from)}
+              />
+            ))
+          ) : (
+            <div className="m-auto">
+              <InboxIcon className="m-auto" />
+              <Subtle>No Messages</Subtle>
+            </div>
+          )}
+        </div>
+        <div
+          className={`flex flex-grow flex-col border-slate-400 border-l ${traceroutes === undefined ? "hidden" : ""}`}
+        >
+          {to === "broadcast" ? null : traceroutes ? (
+            traceroutes.map((traceroute, index) => (
+              <TraceRoute
+                key={traceroute.id}
+                from={nodes.get(traceroute.from)}
+                to={nodes.get(traceroute.to)}
+                route={traceroute.data.route}
+              />
+            ))
+          ) : (
+            <div className="m-auto">
+              <InboxIcon className="m-auto" />
+              <Subtle>No Traceroutes</Subtle>
+            </div>
+          )}
         </div>
-        <div className={"flex flex-grow flex-col border-slate-400 border-l " + (traceroutes == undefined ? "hidden" : "") }>
-        { to === "broadcast" ? null : traceroutes ? (
-          traceroutes.map((traceroute, index) => (
-            <TraceRoute
-              key={traceroute.id}
-              from={nodes.get(traceroute.from)}
-              to={nodes.get(traceroute.to)}
-              route={traceroute.data.route}
-            />
-          ))
-        ) : (
-          <div className="m-auto">
-            <InboxIcon className="m-auto" />
-            <Subtle>No Traceroutes</Subtle>
-          </div>
-        )}
-      </div>
       </div>
       <div className="p-3">
         <MessageInput to={to} channel={channel} />
diff --git a/src/components/PageComponents/Messages/TraceRoute.tsx b/src/components/PageComponents/Messages/TraceRoute.tsx
index 6bc0a1e5..15d3bdea 100644
--- a/src/components/PageComponents/Messages/TraceRoute.tsx
+++ b/src/components/PageComponents/Messages/TraceRoute.tsx
@@ -7,7 +7,6 @@ export interface TraceRouteProps {
   route: Array<number>;
 }
 
-
 export const TraceRoute = ({
   from,
   to,
@@ -15,20 +14,18 @@ export const TraceRoute = ({
 }: TraceRouteProps): JSX.Element => {
   const { nodes } = useDevice();
 
-  return route.length == 0 ? (
+  return route.length === 0 ? (
     <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-      {to?.user?.longName}↔{from?.user?.longName}
+        {to?.user?.longName}↔{from?.user?.longName}
       </span>
     </div>
-   ) : ( 
+  ) : (
     <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") + "↔"
-     ))}
-      {from?.user?.longName}
+        {to?.user?.longName}↔
+        {route.map((hop) => `${nodes.get(hop)?.user?.longName ?? "Unknown"}↔`)}
+        {from?.user?.longName}
       </span>
     </div>
   );
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index 193a4209..29ac6ee0 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -42,7 +42,10 @@ export interface Device {
     direct: Map<number, MessageWithState[]>;
     broadcast: Map<Types.ChannelNumber, MessageWithState[]>;
   };
-  traceroutes: Map<number, Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[]>;
+  traceroutes: Map<
+    number,
+    Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>[]
+  >;
   connection?: Types.ConnectionType;
   activePage: Page;
   activeNode: number;
@@ -76,7 +79,9 @@ export interface Device {
   addPosition: (position: Types.PacketMetadata<Protobuf.Mesh.Position>) => void;
   addConnection: (connection: Types.ConnectionType) => void;
   addMessage: (message: MessageWithState) => void;
-  addTraceRoute: (traceroute: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>) => void;
+  addTraceRoute: (
+    traceroute: Types.PacketMetadata<Protobuf.Mesh.RouteDiscovery>,
+  ) => void;
   addMetadata: (from: number, metadata: Protobuf.Mesh.DeviceMetadata) => void;
   removeNode: (nodeNum: number) => void;
   setMessageState: (
@@ -512,12 +517,12 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                   return;
                 }
 
-                const nodetraceroutes = device.traceroutes.get(traceroute.from)
+                const nodetraceroutes = device.traceroutes.get(traceroute.from);
                 if (nodetraceroutes) {
-                    nodetraceroutes.push(traceroute);
-                    device.traceroutes.set(traceroute.from, nodetraceroutes);
+                  nodetraceroutes.push(traceroute);
+                  device.traceroutes.set(traceroute.from, nodetraceroutes);
                 } else {
-                   device.traceroutes.set(traceroute.from, [traceroute]);
+                  device.traceroutes.set(traceroute.from, [traceroute]);
                 }
               }),
             );
@@ -525,7 +530,10 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           removeNode: (nodeNum) => {
             set(
               produce<DeviceState>((draft) => {
-
+                const device = draft.devices.get(id);
+                if (!device) {
+                  return;
+                }
                 device.nodes.delete(nodeNum);
               }),
             );
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index f8d51cd9..4afe1e62 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -3,17 +3,17 @@ 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 { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
 import { getChannelName } from "@pages/Channels.js";
 import { HashIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
-import { useToast } from "@core/hooks/useToast.js";
-
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, nodes, hardware, messages, traceroutes, connection } = useDevice();
+  const { channels, nodes, hardware, messages, traceroutes, connection } =
+    useDevice();
   const [chatType, setChatType] =
     useState<Types.PacketDestination>("broadcast");
   const [activeChat, setActiveChat] = useState<number>(
@@ -29,7 +29,6 @@ export const MessagesPage = (): JSX.Element => {
   const currentChannel = channels.get(activeChat);
   const { toast } = useToast();
 
-
   return (
     <>
       <Sidebar>
@@ -76,26 +75,27 @@ export const MessagesPage = (): JSX.Element => {
               ? nodes.get(activeChat)?.user?.longName ?? "Unknown"
               : "Loading..."
         }`}
-      actions={
-         chatType === "direct"
-          ? [
-          {
-            icon: WaypointsIcon,
-            async onClick() {
-              if (nodes.get(activeChat)?.num === undefined) return;
-              toast({
-                title: "Sending Traceroute, please wait..."
-              })
-              await connection?.traceRoute(nodes.get(activeChat)?.num!).then(() =>
-                toast({
-                  title: `Traceroute sent.`,
-                }),
-              );
-            },
-           },
-         ]
-         : []
-         }
+        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(() =>
+                      toast({
+                        title: "Traceroute sent.",
+                      }),
+                    );
+                  },
+                },
+              ]
+            : []
+        }
       >
         {allChannels.map(
           (channel) =>