From 209fd275f3ee618c80dfd7576c0194820cba0d2a Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Sun, 25 Jan 2026 04:45:08 +1000
Subject: [PATCH] feat(skills): use Streamdown to render markdown in question
 detail page

---
 .../skills/questions/[questionId]/QuestionDetailClient.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/(profile)/[username]/collections/[slug]/skills/questions/[questionId]/QuestionDetailClient.tsx b/apps/web/src/app/(profile)/[username]/collections/[slug]/skills/questions/[questionId]/QuestionDetailClient.tsx
index 8e18087..892b8fb 100644
--- a/apps/web/src/app/(profile)/[username]/collections/[slug]/skills/questions/[questionId]/QuestionDetailClient.tsx
+++ b/apps/web/src/app/(profile)/[username]/collections/[slug]/skills/questions/[questionId]/QuestionDetailClient.tsx
@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@tpmjs/ui/Card/Card';
 import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useState } from 'react';
+import { Streamdown } from 'streamdown';
 import { AppHeader } from '~/components/AppHeader';
 
 function formatDate(dateString: string): string {
@@ -163,8 +164,8 @@ export function QuestionDetailClient({
                 </CardTitle>
               </CardHeader>
               <CardContent padding="md" className="pt-0">
-                <div className="prose prose-sm max-w-none text-foreground">
-                  <p className="whitespace-pre-wrap leading-relaxed">{question.answer}</p>
+                <div className="prose prose-sm max-w-none text-foreground leading-relaxed">
+                  <Streamdown isAnimating={false}>{question.answer}</Streamdown>
                 </div>
                 {question.answerTokens > 0 && (
                   <p className="mt-4 text-xs text-foreground-tertiary">