From 419c7453ba377b332e1de4083eed62e3f15c46a1 Mon Sep 17 00:00:00 2001
From: Charan Rathore <180254320+charan-rathore@users.noreply.github.com>
Date: Sun, 4 Oct 2026 19:46:36 +0530
Subject: [PATCH] fix: render Markdown tables in the page review card

The review card rendered the draft with react-markdown without GFM, so tables showed as raw pipe text. Add remark-gfm, which is already installed through the CopilotKit dependency tree, as a direct dependency and use it for the card.
---
 package-lock.json             |  1 +
 package.json                  |  1 +
 src/client/PageReviewCard.tsx |  2 ++
 tests/page-review.test.tsx    | 18 ++++++++++++++++++
 4 files changed, 22 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 895d8ce..d4f401f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "react": "^19.3.0",
         "react-dom": "^19.3.0",
         "react-markdown": "^10.1.0",
+        "remark-gfm": "^4.0.1",
         "rxjs": "^7.8.1",
         "zod": "^4.6.5"
       },
diff --git a/package.json b/package.json
index 3020c50..775b222 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "rxjs": "^7.8.1",
     "zod": "^4.6.5"
   },
diff --git a/src/client/PageReviewCard.tsx b/src/client/PageReviewCard.tsx
index 9962ce4..8d7eea1 100644
--- a/src/client/PageReviewCard.tsx
+++ b/src/client/PageReviewCard.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Check, FileText, ArrowUpRight } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { pageReviewSchema } from '../shared/page-review';
 import { decidePageReview, restorePageReview } from './page-review-decision';
 import { computerToolResult } from './ComputerToolCard';
@@ -123,6 +124,7 @@ export function PageReviewCard({
         <h3>{draft.success ? draft.data.title : 'Preparing your draft…'}</h3>
         {draft.success && (
           <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
             components={{
               img: ({ alt }) => <span>{alt}</span>,
               a: ({ href, children }) => (
diff --git a/tests/page-review.test.tsx b/tests/page-review.test.tsx
index 011791f..fcd9701 100644
--- a/tests/page-review.test.tsx
+++ b/tests/page-review.test.tsx
@@ -87,3 +87,21 @@ it('does not claim a canceled or declined review was unsaved before recovering i
     expect(html).not.toContain('Decline');
   }
 });
+
+it('renders a Markdown table in the draft as a table, not raw pipe text', () => {
+  const content = '| Category | Score |\n| --- | --- |\n| Speed | 9 |';
+  const html = renderToStaticMarkup(
+    <PageReviewCard
+      args={{ title: 'Brief', content, spaceId: 'space' }}
+      status="executing"
+      respond={async () => {}}
+      threadId="thread"
+      toolCallId="call"
+      onSaved={() => {}}
+    />,
+  );
+  expect(html).toContain('<table>');
+  expect(html).toContain('<th>Category</th>');
+  expect(html).toContain('<td>Speed</td>');
+  expect(html).not.toContain('| Category |');
+});