feat(ui): render GFM and embedded HTML in project READMEs

ReactMarkdown was running with no plugins, so README headers full of
raw <div align=center>, tables, <details>/<summary>, and other GFM
markup rendered as escaped text. Wire in remark-gfm for tables and
GFM features, rehype-raw for embedded HTML, and rehype-sanitize with
an extended schema that permits README-typical tags and attributes
(align, target, width/height, picture/source, etc.) while still
blocking script/iframe/object — READMEs come from external repos so
they need adversarial-input handling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/src/pages/ProjectPage.tsx

@@ -4,6 +4,9 @@ import { useQuery } from '@tanstack/react-query';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
 import { VerticalTimeline } from 'react-vertical-timeline-component';
 
 import { fetchEvents, fetchReadme, fetchRepoLanguages, fetchProjects, type Source } from '../api/client';
@@ -82,7 +85,12 @@ export function ProjectPage() {
         <Row className="mb-4">
           <Col>
             <div className="project-readme">
-              <ReactMarkdown>{readmeQ.data}</ReactMarkdown>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeRaw, [rehypeSanitize, readmeSanitizeSchema]]}
+              >
+                {readmeQ.data}
+              </ReactMarkdown>
             </div>
           </Col>
         </Row>
@@ -126,3 +134,49 @@ function forgeIcon(source: string): string {
   }
 }
 
+// rehype-sanitize defaults are conservative — README authors lean on raw
+// HTML for layout (centered headers, collapsible sections, image
+// dimensions). Extend the schema to permit those tags/attributes while
+// still blocking script-y or interactive content (iframe, object, etc.).
+const readmeSanitizeSchema = {
+  ...defaultSchema,
+  tagNames: [
+    ...(defaultSchema.tagNames ?? []),
+    'details',
+    'summary',
+    'picture',
+    'source',
+    'kbd',
+    'sub',
+    'sup',
+    'mark',
+    'abbr',
+    'cite',
+    'figure',
+    'figcaption',
+    'center',
+  ],
+  attributes: {
+    ...defaultSchema.attributes,
+    '*': [
+      ...((defaultSchema.attributes && defaultSchema.attributes['*']) || []),
+      'align',
+      'style',
+    ],
+    a: [
+      ...((defaultSchema.attributes && defaultSchema.attributes.a) || []),
+      'target',
+      'rel',
+    ],
+    img: [
+      ...((defaultSchema.attributes && defaultSchema.attributes.img) || []),
+      'width',
+      'height',
+      'align',
+      'srcset',
+    ],
+    source: ['srcset', 'media', 'type'],
+    details: ['open'],
+  },
+};
+