From d10de739b3d154829dffb5208f19fcdb4bd4295c Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 30 Mar 2026 13:33:02 -0700
Subject: [PATCH] show indicator of stream expiring soon

---
 .../features/particles/particle-list-view.tsx | 32 +++++++++++++------
 js/src/features/particles/stream-card.tsx     | 10 ++++++
 js/src/hooks/use-expiring-soon.ts             | 20 ++++++++++++
 3 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 js/src/hooks/use-expiring-soon.ts

diff --git a/js/src/features/particles/particle-list-view.tsx b/js/src/features/particles/particle-list-view.tsx
index 8093e5b..786afab 100644
--- a/js/src/features/particles/particle-list-view.tsx
+++ b/js/src/features/particles/particle-list-view.tsx
@@ -9,6 +9,7 @@ import {
   FileText,
   CircleCheck,
   StickyNote,
+  Timer,
   type LucideIcon,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -26,6 +27,7 @@ import { Progress } from "@/components/ui/progress";
 import { Small } from "@/components/ui/typography";
 import type { Particle, StreamProperties } from "@/api/types";
 import { useNetwork } from "@/hooks/use-networks";
+import { useExpiringSoon } from "@/hooks/use-expiring-soon";
 import { useStreamParticles } from "@/hooks/use-stream-particles";
 import { useStreamAutoplay } from "@/hooks/use-stream-autoplay";
 
@@ -94,6 +96,11 @@ function StreamRow({
 
   useStreamAutoplay(latestChild, particle);
 
+  const expiringSoon = useExpiringSoon(
+    particle.last_child_created_at,
+    network?.message_retention_hours ?? 24,
+  );
+
   const isDM =
     particle.visible_to.length === 2 &&
     particle.visible_to.every((v) => v.startsWith("human:"));
@@ -181,16 +188,21 @@ function StreamRow({
           >
             {particle.properties.name}
           </p>
-          {latestChild && (
-            <Small
-              className={cn(
-                "shrink-0",
-                isUnseen ? "text-primary" : "text-muted-foreground",
-              )}
-            >
-              <RelativeTimestamp date={latestChild.created_at} />
-            </Small>
-          )}
+          <div className="flex shrink-0 items-center gap-1">
+            {expiringSoon && (
+              <Timer className="size-3 text-muted-foreground/60" />
+            )}
+            {latestChild && (
+              <Small
+                className={cn(
+                  "shrink-0",
+                  isUnseen ? "text-primary" : "text-muted-foreground",
+                )}
+              >
+                <RelativeTimestamp date={latestChild.created_at} />
+              </Small>
+            )}
+          </div>
         </div>
         <div className="flex items-center gap-1">
           <TypeIcon
diff --git a/js/src/features/particles/stream-card.tsx b/js/src/features/particles/stream-card.tsx
index 2f1a19d..30c67d2 100644
--- a/js/src/features/particles/stream-card.tsx
+++ b/js/src/features/particles/stream-card.tsx
@@ -1,10 +1,12 @@
 import { forwardRef, useMemo } from "react";
+import { Timer } from "lucide-react";
 import { cn, getInitials } from "@/lib/utils";
 import { useLiveLatestChild } from "@/hooks/use-particle";
 import { useAuthStore } from "@/stores/auth-store";
 import { particlePath } from "@/lib/particle-path";
 import type { Particle, StreamProperties } from "@/api/types";
 import { useStreamAutoplay } from "@/hooks/use-stream-autoplay";
+import { useExpiringSoon } from "@/hooks/use-expiring-soon";
 import { ParticlePreview } from "@/features/particles/particle-preview";
 import { useNetwork } from "@/hooks/use-networks";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -27,6 +29,11 @@ export const StreamCard = forwardRef<HTMLDivElement, StreamCardProps>(function S
 
   useStreamAutoplay(latestChild, particle);
 
+  const expiringSoon = useExpiringSoon(
+    particle.last_child_created_at,
+    network?.message_retention_hours ?? 24,
+  );
+
   const isDM =
     particle.visible_to.length === 2 &&
     particle.visible_to.every((v) => v.startsWith("human:"));
@@ -134,6 +141,9 @@ export const StreamCard = forwardRef<HTMLDivElement, StreamCardProps>(function S
           {particle.properties.name}
         </Small>
         <div className="ml-auto flex shrink-0 items-center gap-1.5">
+          {expiringSoon && (
+            <Timer className="size-3 text-muted-foreground/60" />
+          )}
           {latestChild && (
             <Small
               className={cn(
diff --git a/js/src/hooks/use-expiring-soon.ts b/js/src/hooks/use-expiring-soon.ts
new file mode 100644
index 0000000..b0c9f70
--- /dev/null
+++ b/js/src/hooks/use-expiring-soon.ts
@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+
+/**
+ * Returns true when a stream is within the last 10% of its retention window.
+ * For example, with 24h retention, this fires when < 2.4h remain.
+ */
+export function useExpiringSoon(
+  lastChildCreatedAt: Date | undefined,
+  retentionHours: number,
+): boolean {
+  return useMemo(() => {
+    if (!lastChildCreatedAt) return false;
+
+    const retentionMs = retentionHours * 60 * 60 * 1000;
+    const expiresAt = lastChildCreatedAt.getTime() + retentionMs;
+    const remaining = expiresAt - Date.now();
+
+    return remaining > 0 && remaining < retentionMs * 0.1;
+  }, [lastChildCreatedAt, retentionHours]);
+}