","```tsx","Replace the plain message paragraph inside `MessageBody` with:","import { MessageMarkdown } from \"./markdown\";","In `apps/web/src/chat/transcript.tsx`, import the new view:","- [ ] **Step 4: Route participant prose through the renderer**","}","\tfont-size: var(--text-sm);","\tfont-family: var(--font-mono);",".chat-markdown pre code {","\tpadding: 0.75rem;","\tbackground: var(--color-inset);","\tborder-radius: var(--radius-md);","\toverflow-x: auto;",".chat-markdown pre {","\tpadding: 0.125rem 0.25rem;","\tborder-radius: var(--radius-sm);",".chat-markdown :not(pre) > code {","\ttext-underline-offset: 0.125rem;","\ttext-decoration: underline;","\tcolor: var(--color-brand-ink);",".chat-markdown a {","\tcolor: var(--color-text-secondary);","\tpadding-inline-start: 0.75rem;","\tborder-inline-start: 2px solid var(--color-edge);",".chat-markdown blockquote {","\tmargin-block-start: 0.125rem;",".chat-markdown li + li {","\tlist-style: decimal;",".chat-markdown ol {","\tlist-style: disc;",".chat-markdown ul {","\tpadding-inline-start: 1.25rem;",".chat-markdown ul,","\tmargin-block: 0.5rem;",".chat-markdown blockquote,",".chat-markdown ol,",".chat-markdown p,","\tmargin-block-end: 0;",".chat-markdown > :last-child {","\tmargin-block-start: 0;",".chat-markdown > :first-child {","\tline-height: 1.5;","\tfont-size: var(--text-base);","\toverflow-wrap: anywhere;","\tmin-width: 0;",".chat-markdown {","```css","Create `apps/web/src/chat/markdown.css`:","- [ ] **Step 3: Add compact rail typography**","The allowlist admits only the approved chat syntax. Heading nodes are retained long enough to keep their text, then rendered as ordinary paragraphs. Images and horizontal rules are removed; raw HTML is skipped; the library's default URL transform rejects unsafe protocols.","\t);","\t\t

","\t\t\t","\t\t\t\t{source}","\t\t\t>","\t\t\t\tunwrapDisallowed","\t\t\t\tskipHtml","\t\t\t\tcomponents={COMPONENTS}","\t\t\t\tallowedElements={ELEMENTS}","\t\t\t","\treturn (","export function MessageMarkdown({ source }: { source: string }) {","};","\th6: paragraph,","\th5: paragraph,","\th4: paragraph,","\th3: paragraph,","\th2: paragraph,","\th1: paragraph,","\t),","\t\t","\t\t\t{children}","\t\t","\ta: ({ children, href }) => (","const COMPONENTS: Components = {","let paragraph: Components[\"p\"] = ({ children }) =>

{children}

","\t\t\t\t\t\t{message.streaming && ▍}","\t\t\t\t\t\t","\t\t\t\t\t

","\t\t\t\t\t\t{text}","\t\t\t\t\t

","\t\t\t\t

","\t\t\t{text && (","\t\t

{children}