From 707046b6898a18da89be3b370b0d35ea7571b9b8 Mon Sep 17 00:00:00 2001
From: roboomp <omp@can.ac>
Date: Wed, 15 Jul 2026 09:34:36 +0000
Subject: [PATCH] fix(collab-web): rendered transcript messages as markdown

- Routed user and custom message text through the sanitized Markdown renderer.
- Increased spacing between adjacent assistant content blocks.
- Added host and guest Markdown regression coverage.

Fixes #5559
---
 packages/collab-web/CHANGELOG.md              |  4 +++
 .../src/components/transcript/Transcript.tsx  | 10 ++----
 .../src/components/transcript/transcript.css  | 11 +++----
 packages/collab-web/test/transcript.test.tsx  | 33 +++++++++++++++++++
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/packages/collab-web/CHANGELOG.md b/packages/collab-web/CHANGELOG.md
index 642dcee90..1d586449d 100644
--- a/packages/collab-web/CHANGELOG.md
+++ b/packages/collab-web/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Rendered user and host transcript messages as Markdown and separated adjacent assistant content blocks. ([#5559](https://github.com/can1357/oh-my-pi/issues/5559))
+
 ## [16.5.1] - 2026-07-14
 
 ### Fixed
diff --git a/packages/collab-web/src/components/transcript/Transcript.tsx b/packages/collab-web/src/components/transcript/Transcript.tsx
index 947883ee1..1e8e960ee 100644
--- a/packages/collab-web/src/components/transcript/Transcript.tsx
+++ b/packages/collab-web/src/components/transcript/Transcript.tsx
@@ -54,19 +54,15 @@ function ThinkingBlock({ text, redacted }: { text: string; redacted?: boolean })
 	);
 }
 
-/** Plain text + image thumbnails for user / custom message content. */
+/** Markdown + image thumbnails for user / custom message content. */
 function MsgContent({ content }: { content: string | readonly (TextContent | ImageContent)[] }): ReactNode {
-	if (typeof content === "string") return <div className="tr-text">{content}</div>;
+	if (typeof content === "string") return <Markdown text={content} />;
 	return (
 		<>
 			{content.map((block, i) => {
 				switch (block.type) {
 					case "text":
-						return (
-							<div key={i} className="tr-text">
-								{block.text}
-							</div>
-						);
+						return <Markdown key={i} text={block.text} />;
 					case "image":
 						return (
 							<img
diff --git a/packages/collab-web/src/components/transcript/transcript.css b/packages/collab-web/src/components/transcript/transcript.css
index 227731683..21ded879b 100644
--- a/packages/collab-web/src/components/transcript/transcript.css
+++ b/packages/collab-web/src/components/transcript/transcript.css
@@ -52,15 +52,14 @@
 	gap: 4px;
 }
 
-.tr-body > .tr-md,
-.tr-body > .tr-text {
+.tr-row--assistant .tr-body {
+	gap: 8px;
+}
+
+.tr-body > .tr-md {
 	align-self: stretch;
 }
 
-.tr-text {
-	white-space: pre-wrap;
-	word-break: break-word;
-}
 
 .tr-row--custom .tr-body {
 	color: var(--fg-muted);
diff --git a/packages/collab-web/test/transcript.test.tsx b/packages/collab-web/test/transcript.test.tsx
index 1d3d60d99..6b1e8af5e 100644
--- a/packages/collab-web/test/transcript.test.tsx
+++ b/packages/collab-web/test/transcript.test.tsx
@@ -112,3 +112,36 @@ describe("Transcript live tool rendering", () => {
 		expect(html).toContain("thinking…");
 	});
 });
+
+describe("Transcript message Markdown", () => {
+	it("renders host strings and guest text blocks as Markdown", () => {
+		const entries: SessionEntry[] = [
+			{
+				type: "message",
+				id: "host-markdown",
+				parentId: null,
+				timestamp: "2026-07-15T00:00:00Z",
+				message: {
+					role: "user",
+					content: "Use `381866285601915778`",
+					timestamp: 1,
+				},
+			},
+			{
+				type: "custom_message",
+				id: "guest-markdown",
+				parentId: "host-markdown",
+				timestamp: "2026-07-15T00:00:01Z",
+				customType: "collab-prompt",
+				content: [{ type: "text", text: "Guest uses **Markdown**" }],
+				details: { from: "guest" },
+				display: true,
+			},
+		];
+
+		const html = renderTranscript({ entries, working: false });
+
+		expect(countElements(html, ".tr-row--user .tr-md code")).toBe(1);
+		expect(countElements(html, ".tr-row--user .tr-md strong")).toBe(1);
+	});
+});