Dembrane · ussaama · Feb 18, 2026 · Feb 18, 2026
diff --git a/echo/frontend/src/components/chat/ChatAccordion.tsx b/echo/frontend/src/components/chat/ChatAccordion.tsx
@@ -247,9 +247,9 @@ export const ChatAccordionMain = ({ projectId }: { projectId: string }) => {
 
 	return (
 		<Accordion.Item value="chat" {...testId("chat-accordion")}>
-			<Accordion.Control>
+			<Accordion.Control {...testId("chat-accordion-control")}>
 				<Group justify="space-between">
-					<Title order={3}>
+					<Title order={3} {...testId("chat-accordion-title")}>
 						<span className="min-w-[48px] pr-2 font-normal text-gray-500">
 							{totalChats}
 						</span>
@@ -270,11 +270,11 @@ export const ChatAccordionMain = ({ projectId }: { projectId: string }) => {
 					{allChats.map((item, index) => {
 						const chatMode = (item as ProjectChat & { chat_mode?: string })
 							.chat_mode as
-								| "overview"
-								| "deep_dive"
-								| "agentic"
-								| null
-								| undefined;
+							| "overview"
+							| "deep_dive"
+							| "agentic"
+							| null
+							| undefined;
 						const isActive = item.id === activeChatId;
 
 						return (
@@ -293,7 +293,11 @@ export const ChatAccordionMain = ({ projectId }: { projectId: string }) => {
 							>
 								<Stack gap="xs">
 									<Group gap="xs" wrap="nowrap">
-										<Text size="sm" lineClamp={1}>
+										<Text
+											size="sm"
+											lineClamp={1}
+											{...testId(`chat-item-name-${item.id}`)}
+										>
 											{item.name
 												? item.name
 												: formatRelative(
@@ -305,7 +309,11 @@ export const ChatAccordionMain = ({ projectId }: { projectId: string }) => {
 
 									<Group gap="xs">
 										{item.name && (
-											<Text size="xs" c="gray.6">
+											<Text
+												size="xs"
+												c="gray.6"
+												{...testId(`chat-item-date-${item.id}`)}
+											>
 												{formatRelative(
 													new Date(item.date_created ?? new Date()),
 													new Date(),

diff --git a/echo/frontend/src/components/conversation/ConversationAccordion.tsx b/echo/frontend/src/components/conversation/ConversationAccordion.tsx
@@ -1070,7 +1070,7 @@ export const ConversationAccordion = ({
 		<Accordion.Item value="conversations">
 			<Accordion.Control>
 				<Group justify="space-between">
-					<Title order={3}>
+					<Title order={3} {...testId("conversations-accordion-title")}>
 						<span className="min-w-[48px] pr-2 font-normal text-gray-500">
 							{conversationsCountQuery.isLoading ? (
 								<Loader size="xs" />
@@ -1442,7 +1442,7 @@ export const ConversationAccordion = ({
           )} */}
 
 					{allConversations.length === 0 && !conversationsQuery.isLoading && (
-						<Text size="sm">
+						<Text size="sm" {...testId("conversations-accordion-empty-text")}>
 							<Trans>
 								No conversations found. Start a conversation using the
 								participation invite link from the{" "}

diff --git a/echo/frontend/src/components/layout/Header.tsx b/echo/frontend/src/components/layout/Header.tsx
@@ -41,14 +41,15 @@ const User = ({ name, email }: { name: string; email: string }) => (
 			borderRadius: "var(--mantine-radius-sm)",
 			color: "var(--mantine-color-text)",
 		}}
+		{...testId("header-user-info")}
 	>
 		<Group gap="sm">
 			<div style={{ flex: 1 }} className="hidden md:block">
-				<Text size="sm" fw={500}>
+				<Text size="sm" fw={500} {...testId("header-user-name")}>
 					{name}
 				</Text>
 
-				<Text c="dimmed" size="xs">
+				<Text c="dimmed" size="xs" {...testId("header-user-email")}>
 					{email}
 				</Text>
 			</div>

diff --git a/echo/frontend/src/components/participant/ParticipantBody.tsx b/echo/frontend/src/components/participant/ParticipantBody.tsx
@@ -121,7 +121,10 @@ export const ParticipantBody = ({
 			<Toaster position="top-center" richColors />
 
 			{!isRecording && (
-				<h2 className="text-center text-3xl transition-opacity duration-500 ease-in-out">
+				<h2
+					className="text-center text-3xl transition-opacity duration-500 ease-in-out"
+					{...testId("portal-welcome-heading")}
+				>
 					<Trans>Welcome</Trans>
 				</h2>
 			)}
@@ -167,19 +170,22 @@ export const ParticipantBody = ({
 				className={`w-full object-contain ${isOnline ? "animate-pulse duration-1000" : "grayscale filter"} ${ENABLE_CONVERSATION_HEALTH && conversationIssueBanner ? "opacity-50" : "saturate-200"}`}
 				src={WelcomeImage}
 				alt="Welcome pattern"
+				{...testId("portal-welcome-image")}
 			/>
 			{projectQuery.data && (
 				<Stack ref={chatRef} py="md" pb={9}>
-					<Title order={3}>
+					<Title order={3} {...testId("portal-conversation-title")}>
 						{projectQuery.data.default_conversation_title}
 					</Title>
 
 					{projectQuery.data.default_conversation_description && (
-						<SystemMessage
-							markdown={
-								projectQuery.data.default_conversation_description ?? ""
-							}
-						/>
+						<div {...testId("portal-conversation-description")}>
+							<SystemMessage
+								markdown={
+									projectQuery.data.default_conversation_description ?? ""
+								}
+							/>
+						</div>
 					)}
 
 					<SystemMessage

diff --git a/echo/frontend/src/components/project/ProjectCard.tsx b/echo/frontend/src/components/project/ProjectCard.tsx
@@ -4,6 +4,7 @@ import { IconExternalLink } from "@tabler/icons-react";
 import { formatRelative } from "date-fns";
 import type { PropsWithChildren } from "react";
 import { Icons } from "@/icons";
+import { testId } from "@/lib/testUtils";
 import { I18nLink } from "../common/i18nLink";
 
 export const ProjectCard = ({
@@ -14,13 +15,22 @@ export const ProjectCard = ({
 	const link = `/projects/${project.id}/overview`;
 
 	return (
-		<Paper p="md" className="h-full" withBorder>
+		<Paper
+			p="md"
+			className="h-full"
+			withBorder
+			{...testId(`project-card-${project.id}`)}
+		>
 			<Stack className="h-full" justify="space-between">
 				<Stack gap="xs">
 					<Group justify="space-between" wrap="nowrap">
 						<Group align="center">
 							<Icons.Calendar />
-							<Text className="font-semibold" size="lg">
+							<Text
+								className="font-semibold"
+								size="lg"
+								{...testId(`project-card-name-${project.id}`)}
+							>
 								{project.name}
 							</Text>
 						</Group>
@@ -45,6 +55,7 @@ export const ProjectCard = ({
 						rightSection={<IconExternalLink size={20} />}
 						fullWidth
 						variant="light"
+						{...testId(`project-card-open-button-${project.id}`)}
 					>
 						<Trans>Open</Trans>
 					</Button>

diff --git a/echo/frontend/src/components/project/ProjectDangerZone.tsx b/echo/frontend/src/components/project/ProjectDangerZone.tsx
@@ -148,7 +148,11 @@ export const ProjectDangerZone = ({ project }: { project: Project }) => {
 						{...testId("project-clone-name-input")}
 					/>
 					<Group justify="flex-end">
-						<Button variant="subtle" onClick={closeCloneModal}>
+						<Button
+							variant="subtle"
+							onClick={closeCloneModal}
+							{...testId("project-clone-cancel-button")}
+						>
 							<Trans>Cancel</Trans>
 						</Button>
 						<Button
@@ -176,7 +180,11 @@ export const ProjectDangerZone = ({ project }: { project: Project }) => {
 					</Text>
 				</Stack>
 				<Group justify="flex-end">
-					<Button variant="subtle" onClick={closeDeleteModal}>
+					<Button
+						variant="subtle"
+						onClick={closeDeleteModal}
+						{...testId("project-delete-cancel-button")}
+					>
 						<Trans>Cancel</Trans>
 					</Button>
 					<Button

diff --git a/echo/frontend/src/components/project/ProjectListItem.tsx b/echo/frontend/src/components/project/ProjectListItem.tsx
@@ -3,6 +3,7 @@ import { Group, Paper, Stack, Text } from "@mantine/core";
 import { formatRelative } from "date-fns";
 import type { PropsWithChildren } from "react";
 import { Icons } from "@/icons";
+import { testId } from "@/lib/testUtils";
 import { I18nLink } from "../common/i18nLink";
 
 export const ProjectListItem = ({
@@ -19,12 +20,17 @@ export const ProjectListItem = ({
 				p="sm"
 				className="relative hover:!border-primary-400"
 				withBorder
+				{...testId(`project-list-item-${project.id}`)}
 			>
 				<Group justify="space-between">
 					<Stack gap="0">
 						<Group align="center">
 							<Icons.Calendar />
-							<Text className="font-semibold" size="lg">
+							<Text
+								className="font-semibold"
+								size="lg"
+								{...testId(`project-list-item-name-${project.id}`)}
+							>
 								{project.name}
 							</Text>
 						</Group>

diff --git a/echo/frontend/src/components/report/ReportRenderer.tsx b/echo/frontend/src/components/report/ReportRenderer.tsx
@@ -10,7 +10,7 @@ import { ReportEditor } from "./ReportEditor";
 
 const ContributeToReportCTA = ({ href }: { href: string }) => {
 	return (
-		<Paper p="xl" className="bg-gray-100">
+		<Paper p="xl" className="bg-gray-100" {...testId("report-contribute-cta")}>
 			<Stack className="text-center text-2xl font-semibold" align="center">
 				<Trans>Do you want to contribute to this project?</Trans>
 
@@ -19,6 +19,7 @@ const ContributeToReportCTA = ({ href }: { href: string }) => {
 					href={href}
 					target="_blank"
 					className="rounded-3xl print:hidden"
+					{...testId("report-contribute-share-button")}
 				>
 					<Trans>Share your voice</Trans>
 				</Button>

diff --git a/echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx b/echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx
@@ -170,15 +170,17 @@ export const ProjectConversationOverviewRoute = () => {
 							</Group>
 						</Group>
 
-						<Markdown
-							content={
-								conversationQuery.data?.summary ??
-								(useHandleGenerateSummaryManually.data &&
-								"summary" in useHandleGenerateSummaryManually.data
-									? useHandleGenerateSummaryManually.data.summary
-									: "")
-							}
-						/>
+						<div {...testId("conversation-overview-summary-content")}>
+							<Markdown
+								content={
+									conversationQuery.data?.summary ??
+									(useHandleGenerateSummaryManually.data &&
+									"summary" in useHandleGenerateSummaryManually.data
+										? useHandleGenerateSummaryManually.data.summary
+										: "")
+								}
+							/>
+						</div>
 
 						{!conversationQuery.isFetching &&
 							!conversationQuery.data?.summary && (