From 26bb3d5ca130733737fca0fb59042c1565a3ef7e Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Wed, 11 Feb 2026 15:41:50 -0600
Subject: [PATCH] color network map nodes by device status

green for online, yellow for unknown, red for offline. previously
nodes were colored by device type which didn't convey health state.
also remove agent last_seen_at display from device detail page since
the offline badge already communicates agent health.
---
 assets/js/app.ts                              | 13 +++++++-----
 lib/towerops_web/live/device_live/show.ex     | 13 ------------
 .../live/network_map_live.html.heex           | 20 ++++++-------------
 3 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/assets/js/app.ts b/assets/js/app.ts
index 05105329..9dfcb56b 100644
--- a/assets/js/app.ts
+++ b/assets/js/app.ts
@@ -658,7 +658,10 @@ const NetworkMap = {
           selector: 'node',
           style: {
             'background-color': function(ele: any) {
-              return deviceColors[ele.data('type')] || deviceColors.unknown
+              const status = ele.data('status')
+              if (status === 'down') return '#ef4444'    // red
+              if (status === 'unknown') return '#eab308'  // yellow
+              return '#22c55e'                            // green (up/online)
             },
             'label': 'data(label)',
             'color': isDark ? '#fff' : '#000',
@@ -671,9 +674,10 @@ const NetworkMap = {
             'height': 40,
             'border-width': 2,
             'border-color': function(ele: any) {
-              if (ele.data('status') === 'down') return '#ef4444'
-              if (ele.data('status') === 'unknown') return '#6b7280'
-              return deviceColors[ele.data('type')] || deviceColors.unknown
+              const status = ele.data('status')
+              if (status === 'down') return '#dc2626'     // darker red
+              if (status === 'unknown') return '#ca8a04'   // darker yellow
+              return '#16a34a'                             // darker green
             }
           }
         },
@@ -689,7 +693,6 @@ const NetworkMap = {
         {
           selector: 'node.down',
           style: {
-            'border-color': '#ef4444',
             'border-width': 3
           }
         },
diff --git a/lib/towerops_web/live/device_live/show.ex b/lib/towerops_web/live/device_live/show.ex
index 225e21e5..25d5058a 100644
--- a/lib/towerops_web/live/device_live/show.ex
+++ b/lib/towerops_web/live/device_live/show.ex
@@ -618,19 +618,6 @@ defmodule ToweropsWeb.DeviceLive.Show do
     format_duration(diff) <> " ago"
   end
 
-  defp format_relative_time(nil), do: "never"
-
-  defp format_relative_time(datetime) do
-    diff = DateTime.diff(DateTime.utc_now(), datetime, :second)
-
-    cond do
-      diff < 60 -> "just now"
-      diff < 3600 -> "#{div(diff, 60)} min ago"
-      diff < 86_400 -> "#{div(diff, 3600)} hours ago"
-      true -> format_duration(diff) <> " ago"
-    end
-  end
-
   defp format_event_type(event_type) do
     event_type
     |> String.replace("_", " ")
diff --git a/lib/towerops_web/live/network_map_live.html.heex b/lib/towerops_web/live/network_map_live.html.heex
index 2ad5a6af..6d4ff3cb 100644
--- a/lib/towerops_web/live/network_map_live.html.heex
+++ b/lib/towerops_web/live/network_map_live.html.heex
@@ -199,26 +199,18 @@
       <div class="p-4 border-t border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-gray-900">
         <div class="flex items-center justify-between">
           <div class="flex items-center space-x-6 text-xs">
-            <div class="flex items-center space-x-2">
-              <div class="w-3 h-3 rounded-full bg-blue-500"></div>
-              <span class="text-gray-700 dark:text-gray-300">Router</span>
-            </div>
-            <div class="flex items-center space-x-2">
-              <div class="w-3 h-3 rounded-full bg-purple-500"></div>
-              <span class="text-gray-700 dark:text-gray-300">Switch</span>
-            </div>
             <div class="flex items-center space-x-2">
               <div class="w-3 h-3 rounded-full bg-green-500"></div>
-              <span class="text-gray-700 dark:text-gray-300">Wireless</span>
+              <span class="text-gray-700 dark:text-gray-300">Online</span>
             </div>
             <div class="flex items-center space-x-2">
-              <div class="w-3 h-3 rounded-full bg-orange-500"></div>
-              <span class="text-gray-700 dark:text-gray-300">Server</span>
-            </div>
-            <div class="flex items-center space-x-2">
-              <div class="w-3 h-3 rounded-full bg-gray-500"></div>
+              <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
               <span class="text-gray-700 dark:text-gray-300">Unknown</span>
             </div>
+            <div class="flex items-center space-x-2">
+              <div class="w-3 h-3 rounded-full bg-red-500"></div>
+              <span class="text-gray-700 dark:text-gray-300">Offline</span>
+            </div>
             <div class="flex items-center space-x-2">
               <div class="w-3 h-3 rounded-full border-2 border-dashed border-gray-400"></div>
               <span class="text-gray-700 dark:text-gray-300">Discovered (Not Added)</span>