From b317736263c06eb6e7b6454abdfe1695d3980f63 Mon Sep 17 00:00:00 2001
From: Kanav Dwevedi <kanav11dwevedi@gmail.com>
Date: Tue, 19 May 2026 22:52:22 +0530
Subject: [PATCH] fix(chat): add h1-h6 and hr ReactMarkdown overrides

card-bubble overrides p/ol/ul/li/strong/table* but not headings or
hr. With Tailwind preflight, `### heading` flattens to body text
(heading hierarchy lost) and `***` renders as a near-invisible rule.

Adds compact, bubble-styled h1-h6 (rendered as bold paragraphs,
tiered by level) and a visible hr. Defensive complement to the
backend prompt change that steers the agent away from headings/
tables/HR; this ensures graceful degradation if such Markdown
still reaches the UI.

Eval evidence (Shridhar OSS eval): 40 chat answers emit ###
headings that currently render with zero visual emphasis.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../components/bubbles/card-bubble.tsx        | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/screens-component/chat-screen/components/bubbles/card-bubble.tsx b/src/components/screens-component/chat-screen/components/bubbles/card-bubble.tsx
index e392757..338fb90 100644
--- a/src/components/screens-component/chat-screen/components/bubbles/card-bubble.tsx
+++ b/src/components/screens-component/chat-screen/components/bubbles/card-bubble.tsx
@@ -129,6 +129,27 @@ export function CardBubble({ message }: { readonly message: CardMessage }) {
 									td: ({ node, ...props }) => (
 										<td className="px-3 py-2 align-top text-sm text-[#111827]" {...props} />
 									),
+									h1: ({ node, ...props }) => (
+										<p className="mb-1.5 mt-2 text-lg font-bold leading-snug first:mt-0" {...props} />
+									),
+									h2: ({ node, ...props }) => (
+										<p className="mb-1.5 mt-2 text-base font-bold leading-snug first:mt-0" {...props} />
+									),
+									h3: ({ node, ...props }) => (
+										<p className="mb-1 mt-2 text-base font-semibold leading-snug first:mt-0" {...props} />
+									),
+									h4: ({ node, ...props }) => (
+										<p className="mb-1 mt-1.5 text-base font-semibold leading-snug first:mt-0" {...props} />
+									),
+									h5: ({ node, ...props }) => (
+										<p className="mb-1 mt-1.5 text-sm font-semibold leading-snug first:mt-0" {...props} />
+									),
+									h6: ({ node, ...props }) => (
+										<p className="mb-1 mt-1.5 text-sm font-semibold leading-snug first:mt-0" {...props} />
+									),
+									hr: ({ node, ...props }) => (
+										<hr className="my-3 border-t border-[#E5E7EB]" {...props} />
+									),
 								}}
 							>
 								{message.body}