From 330970cce9f2aa420cb224d6bb38ddca0a8469f7 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Fri, 24 Apr 2026 15:26:53 +0000
Subject: [PATCH] feat(ui): show separate Last Status and Last Packet columns
 for observers

- observers.js: rename 'Last Seen' column to 'Last Status', add 'Last Packet'
  column with a warning badge when no packets observed or packets lag behind
  status by >10min
- observer-detail.js: add 'Last Status Update' and 'Last Packet Observation'
  stat cards with relative + absolute timestamps
---
 public/observer-detail.js |  8 ++++++++
 public/observers.js       | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/public/observer-detail.js b/public/observer-detail.js
index fb2fc4a1..640d74e3 100644
--- a/public/observer-detail.js
+++ b/public/observer-detail.js
@@ -150,6 +150,14 @@
           <div class="stat-label">First Seen</div>
           <div class="stat-value" style="font-size:0.85em">${obs.first_seen ? new Date(obs.first_seen).toLocaleDateString() : '—'}</div>
         </div>
+        <div class="stat-card">
+          <div class="stat-label">Last Status Update</div>
+          <div class="stat-value" style="font-size:0.85em">${obs.last_seen ? timeAgo(obs.last_seen) + '<br><span style="font-size:0.8em;color:var(--text-muted)">' + new Date(obs.last_seen).toLocaleString() + '</span>' : '—'}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Last Packet Observation</div>
+          <div class="stat-value" style="font-size:0.85em">${obs.last_packet_at ? timeAgo(obs.last_packet_at) + '<br><span style="font-size:0.8em;color:var(--text-muted)">' + new Date(obs.last_packet_at).toLocaleString() + '</span>' : '<span style="color:var(--text-muted)">never</span>'}</div>
+        </div>
       </div>
       <div class="mono" style="font-size:0.75em;color:var(--text-muted);margin-bottom:20px;word-break:break-all">
         ID: ${obs.id}
diff --git a/public/observers.js b/public/observers.js
index 3619eaf7..3a46ecef 100644
--- a/public/observers.js
+++ b/public/observers.js
@@ -75,6 +75,17 @@
     return { cls: 'health-red', label: 'Offline' };
   }
 
+  function packetBadge(o) {
+    if (!o.last_packet_at) return '<span title="No packets ever observed">📡⚠ never</span>';
+    const pktAgo = Date.now() - new Date(o.last_packet_at).getTime();
+    const statusAgo = o.last_seen ? Date.now() - new Date(o.last_seen).getTime() : Infinity;
+    const gap = pktAgo - statusAgo;
+    if (gap > 600000) {
+      return `<span title="Last packet ${timeAgo(o.last_packet_at)} — status is newer by ${Math.round(gap/60000)}min. Observer may be alive but not forwarding packets.">📡⚠ ${timeAgo(o.last_packet_at)}</span>`;
+    }
+    return timeAgo(o.last_packet_at);
+  }
+
   function uptimeStr(firstSeen) {
     if (!firstSeen) return '—';
     const ms = Date.now() - new Date(firstSeen).getTime();
@@ -123,7 +134,7 @@
       <div class="obs-table-scroll"><table class="data-table obs-table" id="obsTable">
         <caption class="sr-only">Observer status and statistics</caption>
         <thead><tr>
-          <th scope="col">Status</th><th scope="col">Name</th><th scope="col">Region</th><th scope="col">Last Seen</th>
+          <th scope="col">Status</th><th scope="col">Name</th><th scope="col">Region</th><th scope="col">Last Status</th><th scope="col">Last Packet</th>
           <th scope="col">Packets</th><th scope="col">Packets/Hour</th><th scope="col">Uptime</th>
         </tr></thead>
         <tbody>${filtered.map(o => {
@@ -134,6 +145,7 @@
             <td class="mono">${o.name || o.id}</td>
             <td>${o.iata ? `<span class="badge-region">${o.iata}</span>` : '—'}</td>
             <td>${timeAgo(o.last_seen)}</td>
+            <td>${packetBadge(o)}</td>
             <td>${(o.packet_count || 0).toLocaleString()}</td>
             <td>${sparkBar(o.packetsLastHour || 0, maxPktsHr)}</td>
             <td>${uptimeStr(o.first_seen)}</td>