The assistant answers in Markdown — tables, lists, bold, links — but the
chat bubble showed the raw source (whitespace-pre-wrap), so a table came
through as a wall of pipes.

- New MarkdownMessage: react-markdown + remark-gfm (for GFM tables). It does
  NOT enable raw HTML (no rehype-raw), so a model reply can't inject markup;
  every element the assistant actually uses is Tailwind-styled for a chat
  bubble, and wide content (tables, code) scrolls in its own box so the
  bubble can't blow out.
- Only ASSISTANT bubbles render as Markdown; the user's own text stays
  literal (their `*` shouldn't become a bullet) and the assistant bubble goes
  full-width so a table has room.
- Lazy-loaded: the renderer + its ecosystem (~150 KB) is its own async chunk,
  loaded only when an assistant message renders — not for everyone who opens
  the editor. To keep it out of the eager first paint, manualChunks now
  vendors only the app-wide core (react/react-dom/scheduler kept together —
  splitting react-dom breaks React 19 at load) and lets everything else ride
  with its importer.

Tested via renderToStaticMarkup (node, no DOM): a GFM table renders with
styled cells + horizontal scroll; **bold**/lists render; raw <script>/<b> are
escaped not emitted; links get rel="noopener noreferrer". App re-verified to
mount cleanly with the re-chunk (no React-19 init-order break). tsc + vitest
(99) + build green, no >500 KB warning.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ

@@ -18,1 +18,4 @@
 
+// Lazy so the markdown renderer + its ecosystem (~150 KB) loads only when an
+// assistant message actually renders, not for everyone who opens the editor.
+const MarkdownMessage = lazy(() =>

@@ -235,0 +245,4 @@
+        {mine ? (
+          body
+        ) : (
+          // Show the raw text until the renderer chunk arrives, so a message never

@@ -0,0 +8,4 @@
+// styling, so every element the assistant actually uses is restyled here, scaled
+// for a chat bubble. Wide content (tables, code) scrolls inside its own box so
+// the bubble never blows out.
+const components: Components = {

@@ -0,0 +21,4 @@
+    </a>
+  ),
+  ul: ({ children }) => <ul className="my-1.5 list-disc pl-5">{children}</ul>,
+  ol: ({ children }) => <ol className="my-1.5 list-decimal pl-5">{children}</ol>,

@@ -0,0 +25,4 @@
+  li: ({ children }) => <li className="my-0.5">{children}</li>,
+  strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+  em: ({ children }) => <em className="italic">{children}</em>,
+  h1: ({ children }) => <h3 className="mb-1 mt-2 text-sm font-semibold first:mt-0">{children}</h3>,

@@ -0,0 +31,4 @@
+  h4: ({ children }) => (
+    <h5 className="mb-1 mt-1.5 text-xs font-semibold uppercase tracking-wide text-muted first:mt-0">
+      {children}
+    </h5>

@@ -0,0 +37,4 @@
+    <blockquote className="my-1.5 border-l-2 border-border pl-2 text-muted">{children}</blockquote>
+  ),
+  hr: () => <hr className="my-2 border-border" />,
+  code: ({ className, children }) => {

@@ -0,0 +55,4 @@
+      <table className="w-full border-collapse text-xs">{children}</table>
+    </div>
+  ),
+  th: ({ children }) => (

@@ -0,0 +62,4 @@
+}
+
+/** Render one assistant message body as Markdown (GFM). */
+export function MarkdownMessage({ children }: { children: string }) {