fix: stale time ago in streams list

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())}</>;
+}

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>