story-kit: merge 196_story_render_code_fences_in_user_chat_messages

frontend/src/components/MessageItem.test.tsx

@@ -71,3 +71,45 @@ describe("MessageItem component (Story 178 AC3)", () => {
 		expect(typeofStr).toContain("memo");
 	});
 });
+
+describe("MessageItem user message code fence rendering (Story 196)", () => {
+	it("renders code fences in user messages as code blocks", () => {
+		const { container } = render(
+			<MessageItem
+				msg={{
+					role: "user",
+					content: "Here is some code:\n```js\nconsole.log('hi');\n```",
+				}}
+			/>,
+		);
+
+		// Syntax highlighter renders a pre > div > code structure
+		const codeEl = container.querySelector("pre code");
+		expect(codeEl).toBeInTheDocument();
+		expect(codeEl?.textContent).toContain("console.log");
+	});
+
+	it("renders inline code with single backticks in user messages", () => {
+		render(
+			<MessageItem
+				msg={{ role: "user", content: "Use `npm install` to install." }}
+			/>,
+		);
+
+		const codeEl = screen.getByText("npm install");
+		expect(codeEl.tagName.toLowerCase()).toBe("code");
+	});
+
+	it("renders user messages with code blocks inside user-markdown-body class", () => {
+		const { container } = render(
+			<MessageItem
+				msg={{
+					role: "user",
+					content: "```js\nconsole.log('hi');\n```",
+				}}
+			/>,
+		);
+
+		expect(container.querySelector(".user-markdown-body")).toBeTruthy();
+	});
+});