From 0d1d8218b933e5b118ac04298fe35f422aa709b9 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Fri, 20 Mar 2026 05:05:53 +0000
Subject: [PATCH] fix(flowpilot): render markdown in context messages + fix
 action bar height chain
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two issues:
1. AI context messages (teal bubble) rendered raw markdown (**bold** etc.)
   instead of parsed markdown — switched from <p> to <MarkdownContent>
2. Action bar still hidden — added h-0 to flex-1 wrapper to force explicit
   height allocation so h-full on FlowPilotSession resolves correctly

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

diff --git a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
index 73d19650..998825a4 100644
--- a/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotStepCard.tsx
@@ -116,7 +116,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
       {/* Context message */}
       {step.context_message && (
         <div className="mb-3 rounded-lg bg-primary/5 px-3 py-2 border border-primary/10">
-          <p className="text-xs text-muted-foreground">{step.context_message}</p>
+          <MarkdownContent content={step.context_message} className="text-xs text-muted-foreground" />
         </div>
       )}
 
diff --git a/frontend/src/pages/FlowPilotSessionPage.tsx b/frontend/src/pages/FlowPilotSessionPage.tsx
index 1e138719..d3d808b0 100644
--- a/frontend/src/pages/FlowPilotSessionPage.tsx
+++ b/frontend/src/pages/FlowPilotSessionPage.tsx
@@ -160,8 +160,8 @@ export default function FlowPilotSessionPage() {
         </span>
       </div>
 
-      {/* Session content */}
-      <div className="flex-1 min-h-0 flex flex-col">
+      {/* Session content — flex-1 fills remaining height, min-h-0 allows shrinking */}
+      <div className="flex-1 min-h-0 flex flex-col h-0">
         <FlowPilotSession
           session={fp.session}
           allSteps={fp.allSteps}