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

@@ -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

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

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);

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);
+	});
+});