From 0ab2ec2bb8b2d646b57aa28badb811b6e9ef0b51 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Wed, 25 Mar 2026 15:53:35 -0700
Subject: [PATCH] fix: stale time ago in streams list

---
 js/src/components/relative-timestamp.tsx      | 22 +++++++++++++++++++
 .../features/particles/particle-list-view.tsx |  4 ++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 js/src/components/relative-timestamp.tsx

diff --git a/js/src/components/relative-timestamp.tsx b/js/src/components/relative-timestamp.tsx
new file mode 100644
index 0000000..f926bdf
--- /dev/null
+++ b/js/src/components/relative-timestamp.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { formatDistanceToNow } from "@/lib/time-utils";
+
+const TICK_MS = 30_000;
+
+interface RelativeTimestampProps {
+  date: Date;
+}
+
+/**
+ * Displays a relative timestamp (e.g. "5m ago") that auto-refreshes every 30s.
+ */
+export function RelativeTimestamp({ date }: RelativeTimestampProps) {
+  const [, setTick] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), TICK_MS);
+    return () => clearInterval(id);
+  }, []);
+
+  return <>{formatDistanceToNow(date.toISOString())}</>;
+}
diff --git a/js/src/features/particles/particle-list-view.tsx b/js/src/features/particles/particle-list-view.tsx
index daf120c..8809d00 100644
--- a/js/src/features/particles/particle-list-view.tsx
+++ b/js/src/features/particles/particle-list-view.tsx
@@ -21,7 +21,7 @@ import {
   type ParticlePath,
 } from "@/lib/particle-path";
 import { getInitials } from "@/lib/utils";
-import { formatDistanceToNow } from "@/lib/time-utils";
+import { RelativeTimestamp } from "@/components/relative-timestamp";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Separator } from "@/components/ui/separator";
 import { Progress } from "@/components/ui/progress";
@@ -205,7 +205,7 @@ function StreamRow({
                 isUnseen ? "text-primary" : "text-muted-foreground",
               )}
             >
-              {formatDistanceToNow(latestChild.created_at.toISOString())}
+              <RelativeTimestamp date={latestChild.created_at} />
             </Small>
           )}
         </div>