From 2063a799b05f3e4a225cd499a83062ee28d54119 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Wed, 18 Mar 2026 16:50:43 +0000
Subject: [PATCH] fix(flowpilot): render step content as markdown instead of
 plain text

FlowPilot AI sends markdown-formatted instructions but FlowPilotStepCard
was rendering them as plain <p> tags, producing an unreadable wall of text.
Switch to the existing MarkdownContent component for proper formatting.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/flowpilot/FlowPilotStepCard.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
index 2cf2b0d7..7355cf32 100644
--- a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { MessageSquare, Zap, CheckCircle2, SkipForward, ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { AISessionStepResponse, StepResponseRequest } from '@/types/ai-session'
+import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import { FlowPilotOptions } from './FlowPilotOptions'
 
 interface FlowPilotStepCardProps {
@@ -94,7 +95,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, onRespond
           </div>
           <ChevronUp size={14} className="text-muted-foreground" />
         </button>
-        <p className="text-sm text-foreground">{stepText}</p>
+        <MarkdownContent content={stepText} className="text-sm text-foreground" />
       </div>
     )
   }
@@ -122,8 +123,8 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, onRespond
         )}>
           <Icon size={14} />
         </span>
-        <div>
-          <p className="text-sm font-medium text-foreground">{stepText}</p>
+        <div className="min-w-0 flex-1">
+          <MarkdownContent content={stepText} className="text-sm" />
           {isResolutionSuggestion && typeof content.resolution_summary === 'string' && (
             <p className="mt-2 text-sm text-muted-foreground">
               {content.resolution_summary}