Plan Approval Dialog: Tool calls and tables render incorrectly

[stefandevo]

Problem Summary

When a feature is pushed to "in progress" with "require approval" enabled, the review dialog shows mixed/broken rendering:

1. Tool calls showing as raw text - Lines like 🔧 Tool: Task Input: { "description": "..." } are not formatted, JSON appears inline as plain text
2. Markdown tables not rendering - Tables show as pipe-separated text (| Metric | Measurement |...) instead of actual tables
3. Markdown headings/lists render correctly - ## Phase 1, bold text, and lists work fine

Screenshots

The review dialog shows:

• Tool calls at the top rendered as raw unformatted text
• Middle section with markdown rendered correctly (headings, bold, lists)
• Tables rendered as pipe-separated text instead of actual tables
• More tool calls at the bottom as raw text

Root Cause Analysis

Issue 1: Tool Calls as Raw Text

File: apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx:139

The plan content contains tool call output in plain text format (🔧 Tool: Read\nInput: {...}), but the Markdown component just passes content through react-markdown which has no parsing for these custom formats.

The LogViewer component (apps/ui/src/components/ui/log-viewer.tsx) already handles this properly via parseLogOutput in log-parser.ts - it detects tool calls, formats them with collapsible sections, and highlights JSON.

Issue 2: Tables Not Rendering

File: apps/ui/src/components/ui/markdown.tsx:48

<ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{children}</ReactMarkdown>

The Markdown component is missing remark-gfm plugin which is required for GitHub Flavored Markdown features including:

• Tables
• Task lists (- [ ])
• Strikethrough
• Autolinks

Proposed Solution

Fix both issues:

1. Use LogViewer in plan approval dialog for proper tool call formatting
2. Add remark-gfm to Markdown component for table support

Implementation Plan

Files to Modify

1. apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx

   • Import LogViewer from @/components/ui/log-viewer
   • Replace <Markdown> in view mode with <LogViewer>

2. apps/ui/package.json

   • Install remark-gfm dependency

3. apps/ui/src/components/ui/markdown.tsx

   • Import and add remark-gfm plugin for table support
   • Add table styling classes

Step 1: Install remark-gfm

npm install remark-gfm --workspace=@automaker/ui

Step 2: plan-approval-dialog.tsx

// Add import
import { LogViewer } from '@/components/ui/log-viewer';

// Replace line 137-141:
// FROM:
<div className="p-4 overflow-auto">
  <Markdown>{editedPlan || 'No plan content available.'}</Markdown>
</div>

// TO:
<LogViewer
  output={editedPlan || 'No plan content available.'}
  className="p-4"
/>

Step 3: markdown.tsx

import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import remarkGfm from 'remark-gfm';  // Add this import
import { cn } from '@/lib/utils';

// In the component, add remarkPlugins:
<ReactMarkdown
  remarkPlugins={[remarkGfm]}  // Add this
  rehypePlugins={[rehypeRaw, rehypeSanitize]}
>
  {children}
</ReactMarkdown>

// Add table styling classes to the className:
// Tables
'[&_table]:w-full [&_table]:border-collapse [&_table]:my-4',
'[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:text-foreground [&_th]:font-semibold',
'[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:text-foreground-secondary',

Verification

1. Run npm run dev:web to start the development server
2. Create a feature with "require approval" enabled
3. Push the feature to "in progress"
4. Wait for the plan to be generated
5. Verify the review dialog shows:
   • Tool calls in collapsible sections with proper formatting
   • JSON inputs properly syntax highlighted
   • Tables rendered as actual tables (not pipe-separated text)
   • Markdown content (headings, lists, bold) rendered correctly
6. Verify edit mode still works (textarea unchanged)
7. Test view-only mode