From e0e643877b08d3b00c69d68c97c44d015da8e2c2 Mon Sep 17 00:00:00 2001
From: Oliver Browne <oliver@posthog.com>
Date: Wed, 20 May 2026 11:30:57 +0300
Subject: [PATCH] feat(inbox): show relative timestamp on signal cards

Adds a reusable RelativeTimestamp component (relative "n ago" text with
the exact locale datetime in a hover tooltip) and renders it in the
signal card header so every signal in the report detail view shows when
it was created.

Generated-By: PostHog Code
Task-Id: 7f669e63-b71c-4b2d-b7ba-c6178112ad57
---
 .../components/ui/RelativeTimestamp.tsx       | 34 +++++++++++++++++++
 .../inbox/components/detail/SignalCard.tsx    |  5 ++-
 2 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 apps/code/src/renderer/components/ui/RelativeTimestamp.tsx

diff --git a/apps/code/src/renderer/components/ui/RelativeTimestamp.tsx b/apps/code/src/renderer/components/ui/RelativeTimestamp.tsx
new file mode 100644
index 000000000..b184b2ff6
--- /dev/null
+++ b/apps/code/src/renderer/components/ui/RelativeTimestamp.tsx
@@ -0,0 +1,34 @@
+import { Tooltip } from "@components/ui/Tooltip";
+import { Text } from "@radix-ui/themes";
+import { formatRelativeTimeLong } from "@utils/time";
+
+interface RelativeTimestampProps {
+  timestamp: string | number | Date | null | undefined;
+  className?: string;
+}
+
+export function RelativeTimestamp({
+  timestamp,
+  className,
+}: RelativeTimestampProps) {
+  const date =
+    timestamp instanceof Date
+      ? timestamp
+      : timestamp !== null && timestamp !== undefined
+        ? new Date(timestamp)
+        : null;
+
+  if (date === null || Number.isNaN(date.getTime())) {
+    return null;
+  }
+
+  return (
+    <Tooltip content={date.toLocaleString()}>
+      <Text
+        className={`shrink-0 text-(--gray-10) text-[11px] ${className ?? ""}`}
+      >
+        {formatRelativeTimeLong(date.getTime())}
+      </Text>
+    </Tooltip>
+  );
+}
diff --git a/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx b/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
index 14dfaeb9f..5396ed897 100644
--- a/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
+++ b/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
@@ -1,3 +1,4 @@
+import { RelativeTimestamp } from "@components/ui/RelativeTimestamp";
 import { useAuthStateValue } from "@features/auth/hooks/authQueries";
 import { MarkdownRenderer } from "@features/editor/components/MarkdownRenderer";
 import { SOURCE_PRODUCT_META } from "@features/inbox/components/utils/source-product-icons";
@@ -261,6 +262,7 @@ function SignalCardHeader({
         {signalCardSourceLine(signal)}
       </Text>
       <span className="flex-1" />
+      <RelativeTimestamp timestamp={signal.timestamp} />
       {verified === true && <VerificationBadge />}
     </Flex>
   );
@@ -769,9 +771,6 @@ function GenericSignalCard({
     <Box className="min-w-0 overflow-hidden rounded-lg border border-gray-6 bg-gray-1 p-3">
       <SignalCardHeader signal={signal} verified={verified} />
       <CollapsibleBody body={signal.content} />
-      <Text className="mt-2 block text-(--gray-10) text-[11px]">
-        {new Date(signal.timestamp).toLocaleString()}
-      </Text>
       <CodePathsCollapsible paths={codePaths ?? []} />
       <DataQueriedCollapsible text={dataQueried ?? ""} />
     </Box>