From 82845450eb6e181352e6c79aeaf79fc10691c5a0 Mon Sep 17 00:00:00 2001
From: Sam <sameer+bot@dembrane.com>
Date: Tue, 21 Jul 2026 17:48:14 +0200
Subject: [PATCH] feat(frontend): add date recording started to conversation
 overview

---
 .../conversation/ProjectConversationRoute.tsx | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/echo/frontend/src/routes/project/conversation/ProjectConversationRoute.tsx b/echo/frontend/src/routes/project/conversation/ProjectConversationRoute.tsx
index 747ea976..1b4c50f4 100644
--- a/echo/frontend/src/routes/project/conversation/ProjectConversationRoute.tsx
+++ b/echo/frontend/src/routes/project/conversation/ProjectConversationRoute.tsx
@@ -159,7 +159,7 @@ export const ProjectConversationRoute = () => {
 		<Stack gap="2rem" className="relative px-8 py-4">
 			<LoadingOverlay visible={conversationQuery.isLoading} />
 
-			{/* Header: name, title, tags. Created-on and duration live on the list page only. */}
+			{/* Header: name, title, created-at, tags. Duration lives on the list page only. */}
 			<Stack gap="xs" {...testId("conversation-detail-header")}>
 				<Group gap="sm" align="center" wrap="wrap">
 					<Title order={1}>{primary}</Title>
@@ -207,26 +207,40 @@ export const ProjectConversationRoute = () => {
 						{conversation.participant_name}
 					</Text>
 				)}
-				{tags.length > 0 && (
-					<Group gap={6} wrap="wrap">
-						{tags.map((tag) => {
-							const tagText = getTagText(tag);
-							if (!tagText) return null;
-							return (
-								<Badge
-									key={tag.id}
-									size="xs"
-									variant="light"
-									color="gray"
-									radius="sm"
-									classNames={{ label: "!text-graphite" }}
-								>
-									{tagText}
-								</Badge>
-							);
-						})}
-					</Group>
-				)}
+				<Group gap="sm" wrap="wrap" align="center">
+					{conversation?.created_at && (
+						<Text size="xs" c="dimmed">
+							<Trans>Created on</Trans>:{" "}
+							{new Date(conversation.created_at).toLocaleString(undefined, {
+								day: "numeric",
+								month: "short",
+								year: "numeric",
+								hour: "2-digit",
+								minute: "2-digit",
+							})}
+						</Text>
+					)}
+					{tags.length > 0 && (
+						<Group gap={6} wrap="wrap">
+							{tags.map((tag) => {
+								const tagText = getTagText(tag);
+								if (!tagText) return null;
+								return (
+									<Badge
+										key={tag.id}
+										size="xs"
+										variant="light"
+										color="gray"
+										radius="sm"
+										classNames={{ label: "!text-graphite" }}
+									>
+										{tagText}
+									</Badge>
+								);
+							})}
+						</Group>
+					)}
+				</Group>
 			</Stack>
 
 			{/*