feat: render requirement descriptions as markdown

Author: luohaha

README.md

@@ -92,7 +92,7 @@ The bundled dashboard provides four views:
 - RD Session board: `Idle / Running / Waiting for human / Failed / Completed`
 - Timer board: `Active / Completed / Cancelled`, with each timer linked to its Requirement
 
-Opening a Requirement shows its description, linked PRs, run information, per-Run Agent trace, and unified Human/RD/Reviewer conversation. The Session board cards open this work surface directly; the latest Run trace is selected by default and shows Provider-emitted reasoning summaries, tool calls, command/tool results, messages, and errors in real time. Starting a TODO card opens that conversation first, so optional instructions and attachments can be included in the initial Run; it also offers an explicit start-without-instructions action. TODO cards can be deleted before execution; the action requires confirmation and removes the Requirement from active lists. Messages support images and file attachments. The chat composer can create and cancel one-time or recurring scheduled wake-ups in minutes, hours, or days, while the Timer board shows timers across the workspace and opens their associated Requirements. New input can be queued while RD is running, or the current run can be interrupted so the same session handles the correction immediately. Replying to a completed Requirement reactivates it and resumes its original RD Session in a new Run. Requirement and Reviewer forms provide provider-specific model dropdowns populated by an Agent Manager catalog that refreshes every 24 hours.
+Opening a Requirement shows its description, linked PRs, run information, per-Run Agent trace, and unified Human/RD/Reviewer conversation. Requirement descriptions and conversation messages render GitHub Flavored Markdown, including tables, lists, links, and code blocks. The Session board cards open this work surface directly; the latest Run trace is selected by default and shows Provider-emitted reasoning summaries, tool calls, command/tool results, messages, and errors in real time. Starting a TODO card opens that conversation first, so optional instructions and attachments can be included in the initial Run; it also offers an explicit start-without-instructions action. TODO cards can be deleted before execution; the action requires confirmation and removes the Requirement from active lists. Messages support images and file attachments. The chat composer can create and cancel one-time or recurring scheduled wake-ups in minutes, hours, or days, while the Timer board shows timers across the workspace and opens their associated Requirements. New input can be queued while RD is running, or the current run can be interrupted so the same session handles the correction immediately. Replying to a completed Requirement reactivates it and resumes its original RD Session in a new Run. Requirement and Reviewer forms provide provider-specific model dropdowns populated by an Agent Manager catalog that refreshes every 24 hours.
 
 The dashboard supports light and dark modes from the top-right theme control, remembers the selected theme, and follows the operating-system preference until one is selected. It also supports English and Simplified Chinese, remembers the selected locale, and initially follows the browser language. Its Agent Manager settings dialog persists workspace configuration, applies Requirement retention periods at runtime, and identifies changes that require a restart.
 

apps/web/app/page.tsx

@@ -341,7 +341,7 @@ function isWithinTimeRange(value: string, timeRange: TimeRange, now: number): bo
   return Number.isFinite(timestamp) && timestamp >= now - timeRangeMilliseconds[timeRange];
 }
 
-const MessageBody = memo(function MessageBody({ body, inverted = false }: { body: string; inverted?: boolean }) {
+const MarkdownBody = memo(function MarkdownBody({ body, inverted = false }: { body: string; inverted?: boolean }) {
   return (
     <div className={`message-markdown ${inverted ? 'message-markdown-inverted' : ''}`}>
       <ReactMarkdown
@@ -2001,7 +2001,9 @@ function RequirementDetail({
           <div className="px-5 py-5 sm:px-6">
             <section className="rounded-xl border border-border/80 bg-card px-4 py-3.5">
               <p className="text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase">{t('Requirement description')}</p>
-              <p className="mt-1.5 text-xs leading-5 whitespace-pre-wrap">{requirement.description}</p>
+              <div className="mt-1.5 text-xs leading-5">
+                <MarkdownBody body={requirement.description} />
+              </div>
               <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2 border-t border-border/70 pt-3 text-[10px] text-muted-foreground sm:grid-cols-3">
                 <div><dt className="sr-only">{t('Created at')}</dt><dd>{t('Created {time}', { time: formatTime(requirement.createdAt, locale) })}</dd></div>
                 <div><dt className="sr-only">{t('Run count')}</dt><dd>{t('{count} Runs', { count: runs.length })}</dd></div>
@@ -2075,7 +2077,7 @@ function RequirementDetail({
                         <span className="text-[10px] font-semibold">{t('System event')}</span>
                         <span className="shrink-0 text-[9px] text-muted-foreground">{formatTime(item.createdAt, locale)}</span>
                       </div>
-                      {item.body ? <div className="mt-1 text-[11px] leading-5 break-words"><MessageBody body={item.body} /></div> : null}
+                      {item.body ? <div className="mt-1 text-[11px] leading-5 break-words"><MarkdownBody body={item.body} /></div> : null}
                       {attachments.length > 0 ? <div className="mt-2"><MessageAttachments attachments={attachments} apiUrl={apiUrl} /></div> : null}
                     </div>
                   </article>
@@ -2095,7 +2097,7 @@ function RequirementDetail({
                       <span className="text-[9px] text-muted-foreground">{formatTime(item.createdAt, locale)}</span>
                     </div>
                     <div className={`mt-1.5 rounded-2xl px-3.5 py-2.5 text-left text-xs leading-5 break-words shadow-[0_1px_2px_oklch(0.18_0.02_255/0.04)] ${human ? 'rounded-tr-md bg-primary text-primary-foreground' : reviewer ? 'rounded-tl-md border border-violet-500/15 bg-violet-500/7' : 'rounded-tl-md border border-border/80 bg-card'}`}>
-                      {item.body ? <MessageBody body={item.body} inverted={human} /> : null}
+                      {item.body ? <MarkdownBody body={item.body} inverted={human} /> : null}
                       {attachments.length > 0 ? <div className={item.body ? 'mt-2.5' : ''}><MessageAttachments attachments={attachments} apiUrl={apiUrl} /></div> : null}
                     </div>
                   </div>