From 481fc6d4a2ae49e34d1f419bfd0ed792a8574d60 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 10 Feb 2026 10:19:54 -0600
Subject: [PATCH] Add absolute format to timestamp component to fix render
 flash

---
 lib/towerops_web/components/core_components.ex   | 5 +++--
 lib/towerops_web/live/agent_live/index.html.heex | 4 ++--
 lib/towerops_web/live/agent_live/show.html.heex  | 6 +++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/lib/towerops_web/components/core_components.ex b/lib/towerops_web/components/core_components.ex
index 388e2ad4..818b8574 100644
--- a/lib/towerops_web/components/core_components.ex
+++ b/lib/towerops_web/components/core_components.ex
@@ -776,6 +776,7 @@ defmodule ToweropsWeb.CoreComponents do
   attr :datetime, :any, required: true, doc: "DateTime to display"
   attr :timezone, :string, default: "UTC", doc: "User's timezone for full timestamp"
   attr :class, :string, default: "", doc: "Additional CSS classes"
+  attr :format, :string, default: "relative", doc: "Display format: 'relative' or 'absolute'"
 
   def timestamp(assigns) do
     assigns =
@@ -784,8 +785,8 @@ defmodule ToweropsWeb.CoreComponents do
       |> assign(:full_time, ToweropsWeb.TimeHelpers.format_datetime(assigns.datetime, assigns.timezone))
 
     ~H"""
-    <span class={@class} title={@full_time}>
-      {@relative_time}
+    <span class={@class} title={if @format == "relative", do: @full_time, else: @relative_time}>
+      {if @format == "relative", do: @relative_time, else: @full_time}
     </span>
     """
   end
diff --git a/lib/towerops_web/live/agent_live/index.html.heex b/lib/towerops_web/live/agent_live/index.html.heex
index d5c49527..a898c583 100644
--- a/lib/towerops_web/live/agent_live/index.html.heex
+++ b/lib/towerops_web/live/agent_live/index.html.heex
@@ -116,7 +116,7 @@
           </div>
           <%= if agent.last_seen_at do %>
             <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-              {format_datetime(agent.last_seen_at, @timezone)}
+              <.timestamp datetime={agent.last_seen_at} timezone={@timezone} format="absolute" />
             </div>
           <% end %>
           <%= if agent.last_ip do %>
@@ -227,7 +227,7 @@
           </div>
           <%= if agent.last_seen_at do %>
             <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-              {format_datetime(agent.last_seen_at, @timezone)}
+              <.timestamp datetime={agent.last_seen_at} timezone={@timezone} format="absolute" />
             </div>
           <% end %>
           <%= if agent.last_ip do %>
diff --git a/lib/towerops_web/live/agent_live/show.html.heex b/lib/towerops_web/live/agent_live/show.html.heex
index a47352cf..cedeb554 100644
--- a/lib/towerops_web/live/agent_live/show.html.heex
+++ b/lib/towerops_web/live/agent_live/show.html.heex
@@ -171,7 +171,11 @@
             </p>
             <%= if @agent_token.last_seen_at do %>
               <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                {format_datetime(@agent_token.last_seen_at, @timezone)}
+                <.timestamp
+                  datetime={@agent_token.last_seen_at}
+                  timezone={@timezone}
+                  format="absolute"
+                />
               </p>
             <% end %>
             <%= if @agent_token.last_ip do %>