Render the assistant's replies as Markdown

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

web/package.json

@@ -22,6 +22,8 @@
     "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^9.1.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.24.1",
     "zustand": "^5.0.14"

web/src/editor/ChatPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { Suspense, lazy, useEffect, useRef, useState, type ReactNode } from 'react'
 import { Alert } from '@/components/ui/Alert'
 import { errorMessage } from '@/lib/api'
 import { Button } from '@/components/ui/Button'
@@ -16,6 +16,12 @@ import {
 import { useUndo } from '@/lib/history'
 import { UndoButton } from './UndoButton'
 
+// 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(() =>
+  import('./MarkdownMessage').then((m) => ({ default: m.MarkdownMessage })),
+)
+
 /**
  * Talk to the garden assistant, in the editor beside the canvas.
  *
@@ -227,11 +233,24 @@ function Bubble({
     <div className={cn('flex flex-col', mine ? 'items-end' : 'items-start')}>
       <div
         className={cn(
-          'max-w-[90%] whitespace-pre-wrap rounded-lg px-2.5 py-2 text-sm',
-          mine ? 'bg-accent/15 text-fg' : 'border border-border text-fg',
+          'rounded-lg px-2.5 py-2 text-sm',
+          // The user's own text is literal (their `*` shouldn't become a bullet)
+          // and hugs the right; the assistant's Markdown is rendered and gets the
+          // full width so a table has room.
+          mine
+            ? 'max-w-[90%] whitespace-pre-wrap bg-accent/15 text-fg'
+            : 'w-full border border-border text-fg',
         )}
       >
-        {body}
+        {mine ? (
+          body
+        ) : (
+          // Show the raw text until the renderer chunk arrives, so a message never
+          // flashes blank.
+          <Suspense fallback={<span className="whitespace-pre-wrap">{body}</span>}>
+            <MarkdownMessage>{body}</MarkdownMessage>
+          </Suspense>
+        )}
       </div>
       {children}
     </div>

web/src/editor/MarkdownMessage.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MarkdownMessage } from './MarkdownMessage'
+
+// renderToStaticMarkup needs no DOM, so this runs in the default (node) env and
+// proves the assistant's Markdown — GFM tables in particular — actually renders.
+function render(md: string): string {
+  return renderToStaticMarkup(<MarkdownMessage>{md}</MarkdownMessage>)
+}
+
+describe('MarkdownMessage', () => {
+  it('renders a GFM table with styled cells', () => {
+    const html = render('| Bed | Plant |\n| --- | --- |\n| North | Garlic |')
+    expect(html).toContain('<table')
+    expect(html).toContain('border-collapse')
+    expect(html).toContain('<th')
+    expect(html).toContain('<td')
+    expect(html).toContain('Garlic')
+    // Wide tables scroll inside their own box rather than blowing out the bubble.
+    expect(html).toContain('overflow-x-auto')
+  })
+
+  it('renders inline formatting and lists', () => {
+    const html = render('**bold** and *italic*\n\n- one\n- two')
+    expect(html).toContain('<strong')
+    expect(html).toContain('<em')
+    expect(html).toContain('<ul')
+    expect(html).toContain('<li')
+  })
+
+  it('does not emit raw HTML from the model (no rehype-raw)', () => {
+    const html = render('Hi <script>alert(1)</script> <b>x</b>')
+    expect(html).not.toContain('<script>')
+    expect(html).not.toContain('<b>x</b>') // the literal tag is escaped, not rendered
+  })
+
+  it('opens links safely in a new tab', () => {
+    const html = render('[seeds](https://example.com)')
+    expect(html).toContain('href="https://example.com"')
+    expect(html).toContain('rel="noopener noreferrer"')
+  })
+})

web/src/editor/MarkdownMessage.tsx

@@ -0,0 +1,73 @@
+import ReactMarkdown, { type Components } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+// The assistant answers in Markdown — including GFM tables — so render it as such
+// instead of showing the raw source. react-markdown does NOT emit raw HTML (no
+// rehype-raw), so an LLM reply can't inject markup; remark-gfm adds tables,
+// strikethrough and task lists. Tailwind's reset strips default list/table
+// 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 = {
+  p: ({ children }) => <p className="my-1.5 first:mt-0 last:mb-0">{children}</p>,
+  a: ({ href, children }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-accent-strong underline underline-offset-2"
+    >
+      {children}
+    </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>,
+  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>,
+  h2: ({ children }) => <h3 className="mb-1 mt-2 text-sm font-semibold first:mt-0">{children}</h3>,
+  h3: ({ children }) => <h4 className="mb-1 mt-2 text-sm font-semibold first:mt-0">{children}</h4>,
+  h4: ({ children }) => (
+    <h5 className="mb-1 mt-1.5 text-xs font-semibold uppercase tracking-wide text-muted first:mt-0">
+      {children}
+    </h5>
+  ),
+  blockquote: ({ children }) => (
+    <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 }) => {
+    // A fenced block carries a language- class and is wrapped by <pre> (styled
+    // below); inline code is a bare <code> and gets the pill treatment here.
+    if (/language-/.test(className ?? '')) return <code className={className}>{children}</code>
+    return (
+      <code className="rounded bg-border/60 px-1 py-0.5 font-mono text-[0.85em]">{children}</code>
+    )
+  },
+  pre: ({ children }) => (
+    <pre className="my-1.5 overflow-x-auto rounded-md bg-border/40 p-2 font-mono text-xs">
+      {children}
+    </pre>
+  ),
+  table: ({ children }) => (
+    <div className="my-1.5 overflow-x-auto">
+      <table className="w-full border-collapse text-xs">{children}</table>
+    </div>
+  ),
+  th: ({ children }) => (
+    <th className="border border-border px-2 py-1 text-left font-semibold">{children}</th>
+  ),
+  td: ({ children }) => <td className="border border-border px-2 py-1 align-top">{children}</td>,
+}
+
+/** Render one assistant message body as Markdown (GFM). */
+export function MarkdownMessage({ children }: { children: string }) {
+  return (
+    <div className="leading-relaxed">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {children}
+      </ReactMarkdown>
+    </div>
+  )
+}

web/vite.config.ts

@@ -31,22 +31,25 @@ export default defineConfig(({ mode }) => {
       sourcemap: true,
       rollupOptions: {
         output: {
-          // One vendor chunk for ALL node_modules: it's rarely-changing, so it
-          // caches across app deploys while the tiny app chunk churns. Kept as a
-          // SINGLE chunk on purpose — splitting react-dom/scheduler into their own
-          // chunk reorders their module init across chunk boundaries and breaks
-          // React 19 at load ("Cannot set 'Activity' of undefined"). The heavy
-          // routes are code-split separately via React.lazy (router.tsx), which is
-          // where the real first-paint win is.
+          // The app-wide core goes in ONE cached vendor chunk (rarely changes, so
+          // it survives deploys while the tiny app chunk churns). react + react-dom
+          // + scheduler MUST stay together — splitting react-dom into its own chunk
+          // reorders module init across chunk boundaries and breaks React 19 at
+          // load ("Cannot set 'Activity' of undefined"). Everything else — the
+          // gesture engine, the assistant's markdown renderer + its ecosystem —
+          // rides with whatever imports it, so a lazily-loaded route/feature keeps
+          // it out of the eager first paint. The routes are code-split via
+          // React.lazy (router.tsx), where the real first-paint win is.
           manualChunks(id) {
             if (!id.includes('node_modules')) return undefined
-            // Editor-only libs (the gesture engine) ride with the lazy editor
-            // chunk instead of the eager vendor one, so the first paint doesn't
-            // pay for code only the canvas needs. Everything else — react, tanstack
-            // and the rest — stays in ONE vendor chunk; splitting react-dom out
-            // reorders its init across chunks and breaks React 19 at load.
-            if (id.includes('@use-gesture')) return undefined
+            if (
+              /[/\\]node_modules[/\\](react|react-dom|scheduler|@tanstack|zustand|zod|clsx|tailwind-merge)[/\\]/.test(
+                id,
+              )
+            ) {
               return 'vendor'
+            }
+            return undefined
           },
         },
       },