Replace custom markdown renderer with react-markdown

- Add react-markdown and remark-gfm dependencies
- Remove hacky regex-based renderMarkdown function
- Full GFM support: tables, task lists, strikethrough, autolinks
- Update CSS for react-markdown output (task lists, blockquotes, hr)
- Cleaner, more maintainable code

1 files changed, 59 insertions, 124 deletions

diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index c2e1b2c..95d7d03 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -1,4 +1,6 @@
-import React, { useState, useMemo } from "react";
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import type { Phase } from "../types";
 
 interface DocumentPaneProps {
@@ -9,108 +11,6 @@ interface DocumentPaneProps {
   showOnboarding?: boolean;
 }
 
-function renderTable(tableLines: string[]): string {
-  if (tableLines.length < 2) return tableLines.join("\n");
-  
-  const parseRow = (line: string): string[] => {
-    return line
-      .split("|")
-      .slice(1, -1) // Remove empty first/last from |col|col|
-      .map((cell) => cell.trim());
-  };
-
-  const headerCells = parseRow(tableLines[0]);
-  // Skip separator row (index 1)
-  const bodyRows = tableLines.slice(2);
-
-  let html = '<table><thead><tr>';
-  headerCells.forEach((cell) => {
-    html += `<th>${cell}</th>`;
-  });
-  html += '</tr></thead><tbody>';
-  
-  bodyRows.forEach((row) => {
-    if (row.trim()) {
-      html += '<tr>';
-      parseRow(row).forEach((cell) => {
-        html += `<td>${cell}</td>`;
-      });
-      html += '</tr>';
-    }
-  });
-  
-  html += '</tbody></table>';
-  return html;
-}
-
-function renderMarkdown(md: string): string {
-  // First, handle tables (before other transformations)
-  const lines = md.split("\n");
-  const processedLines: string[] = [];
-  let tableBuffer: string[] = [];
-  let inTable = false;
-
-  for (const line of lines) {
-    const isTableLine = /^\|.*\|$/.test(line.trim());
-    
-    if (isTableLine) {
-      inTable = true;
-      tableBuffer.push(line);
-    } else {
-      if (inTable && tableBuffer.length > 0) {
-        processedLines.push(renderTable(tableBuffer));
-        tableBuffer = [];
-        inTable = false;
-      }
-      processedLines.push(line);
-    }
-  }
-  
-  // Handle table at end of content
-  if (tableBuffer.length > 0) {
-    processedLines.push(renderTable(tableBuffer));
-  }
-
-  let result = processedLines.join("\n");
-
-  return (
-    result
-      // Headers
-      .replace(/^### (.*$)/gm, "<h3>$1</h3>")
-      .replace(/^## (.*$)/gm, "<h2>$1</h2>")
-      .replace(/^# (.*$)/gm, "<h1>$1</h1>")
-      // Bold/italic
-      .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
-      .replace(/\*([^*]+)\*/g, "<em>$1</em>")
-      // Code blocks
-      .replace(
-        /```(\w*)\n([\s\S]*?)```/g,
-        '<pre><code class="language-$1">$2</code></pre>'
-      )
-      .replace(/`([^`]+)`/g, "<code>$1</code>")
-      // Lists
-      .replace(/^- \[x\] (.*$)/gm, '<li class="task done">☑ $1</li>')
-      .replace(/^- \[ \] (.*$)/gm, '<li class="task">☐ $1</li>')
-      .replace(/^- (.*$)/gm, "<li>$1</li>")
-      // Review comments (highlight them)
-      .replace(/(\/\/ REVIEW:.*$)/gm, '<mark class="review">$1</mark>')
-      .replace(/(\/\/ NOTE:.*$)/gm, '<mark class="note">$1</mark>')
-      // Paragraphs
-      .replace(/\n\n/g, "</p><p>")
-      .replace(/^(.+)$/gm, "<p>$1</p>")
-      // Clean up
-      .replace(/<p><\/p>/g, "")
-      .replace(/<p>(<h[1-3]>)/g, "$1")
-      .replace(/(<\/h[1-3]>)<\/p>/g, "$1")
-      .replace(/<p>(<pre>)/g, "$1")
-      .replace(/(<\/pre>)<\/p>/g, "$1")
-      .replace(/<p>(<li)/g, "$1")
-      .replace(/(<\/li>)<\/p>/g, "$1")
-      .replace(/<p>(<table>)/g, "$1")
-      .replace(/(<\/table>)<\/p>/g, "$1")
-  );
-}
-
 export function DocumentPane({
   content,
   onChange,
@@ -119,7 +19,6 @@ export function DocumentPane({
   showOnboarding,
 }: DocumentPaneProps) {
   const [isEditing, setIsEditing] = useState(false);
-  const renderedHtml = useMemo(() => renderMarkdown(content), [content]);
 
   if (showOnboarding) {
     return (
@@ -130,27 +29,61 @@ export function DocumentPane({
         <div className="document-content rendered onboarding">
           <h1>Claude Flow</h1>
           <p>
-            A structured workflow for AI-assisted coding: <strong>Research → Plan → Implement</strong>.
+            A structured workflow for AI-assisted coding:{" "}
+            <strong>Research → Plan → Implement</strong>.
           </p>
 
           <h2>Setup</h2>
           <p>Export your Anthropic API key:</p>
-          <pre><code>export ANTHROPIC_API_KEY=your-key-here</code></pre>
-          <p>Get one at <a href="https://platform.claude.com" target="_blank" rel="noopener">platform.claude.com</a></p>
+          <pre>
+            <code>export ANTHROPIC_API_KEY=your-key-here</code>
+          </pre>
+          <p>
+            Get one at{" "}
+            <a
+              href="https://platform.claude.com"
+              target="_blank"
+              rel="noopener"
+            >
+              platform.claude.com
+            </a>
+          </p>
 
           <h2>Getting Started</h2>
           <ol>
-            <li><strong>Add a project</strong> — Select a codebase folder</li>
-            <li><strong>Create a session</strong> — Start a new task</li>
-            <li><strong>Describe your work</strong> — Tell Claude what you want to build</li>
+            <li>
+              <strong>Add a project</strong> — Select a codebase folder
+            </li>
+            <li>
+              <strong>Create a session</strong> — Start a new task
+            </li>
+            <li>
+              <strong>Describe your work</strong> — Tell Claude what you want to
+              build
+            </li>
           </ol>
 
           <h2>Workflow</h2>
-          <p><strong>Research:</strong> Claude analyzes your codebase and writes findings to <code>research.md</code>. Add notes like <code>// REVIEW: check this</code> — click <strong>Review</strong> when done.</p>
-          <p><strong>Plan:</strong> Claude drafts an implementation plan in <code>plan.md</code> with code snippets and a TODO list. Iterate the same way.</p>
-          <p><strong>Implement:</strong> Claude executes the plan, marking tasks complete as it goes.</p>
+          <p>
+            <strong>Research:</strong> Claude analyzes your codebase and writes
+            findings to <code>research.md</code>. Add notes like{" "}
+            <code>// REVIEW: check this</code> — click <strong>Review</strong>{" "}
+            when done.
+          </p>
+          <p>
+            <strong>Plan:</strong> Claude drafts an implementation plan in{" "}
+            <code>plan.md</code> with code snippets and a TODO list. Iterate the
+            same way.
+          </p>
+          <p>
+            <strong>Implement:</strong> Claude executes the plan, marking tasks
+            complete as it goes.
+          </p>
 
-          <p className="onboarding-tip">Iterate on research and plan docs as long as you want. Click <strong>Submit</strong> when happy to move to the next phase.</p>
+          <p className="onboarding-tip">
+            Iterate on research and plan docs as long as you want. Click{" "}
+            <strong>Submit</strong> when happy to move to the next phase.
+          </p>
         </div>
       </div>
     );
@@ -163,10 +96,9 @@ export function DocumentPane({
           <span>plan.md</span>
           <span className="badge">Implementing...</span>
         </div>
-        <div
-          className="document-content rendered"
-          dangerouslySetInnerHTML={{ __html: renderedHtml }}
-        />
+        <div className="document-content rendered">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </div>
       </div>
     );
   }
@@ -193,13 +125,16 @@ export function DocumentPane({
       ) : (
         <div
           className="document-content rendered"
-          dangerouslySetInnerHTML={{
-            __html:
-              renderedHtml ||
-              '<p class="empty">Document will appear here after Claude generates it...</p>',
-          }}
           onClick={() => !disabled && setIsEditing(true)}
-        />
+        >
+          {content ? (
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+          ) : (
+            <p className="empty">
+              Document will appear here after Claude generates it...
+            </p>
+          )}
+        </div>
       )}
     </div>
   );