feat(frontend): add blue border to Planning Agent events (#11788)

frontend/src/components/features/chat/chat-message.tsx

@@ -19,6 +19,7 @@ interface ChatMessageProps {
     onClick: () => void;
     tooltip?: string;
   }>;
+  isFromPlanningAgent?: boolean;
 }
 
 export function ChatMessage({
@@ -26,6 +27,7 @@ export function ChatMessage({
   message,
   children,
   actions,
+  isFromPlanningAgent = false,
 }: React.PropsWithChildren<ChatMessageProps>) {
   const [isHovering, setIsHovering] = React.useState(false);
   const [isCopy, setIsCopy] = React.useState(false);
@@ -59,6 +61,7 @@ export function ChatMessage({
         "flex flex-col gap-2",
         type === "user" && " p-4 bg-tertiary self-end",
         type === "agent" && "mt-6 w-full max-w-full bg-transparent",
+        isFromPlanningAgent && "border border-[#597ff4] bg-tertiary p-4",
       )}
     >
       <div

frontend/src/components/v1/chat/event-message-components/user-assistant-event-message.tsx

@@ -22,6 +22,7 @@ interface UserAssistantEventMessageProps {
     tooltip?: string;
   }>;
   isLastMessage: boolean;
+  isFromPlanningAgent: boolean;
 }
 
 export function UserAssistantEventMessage({
@@ -31,6 +32,7 @@ export function UserAssistantEventMessage({
   microagentPRUrl,
   actions,
   isLastMessage,
+  isFromPlanningAgent,
 }: UserAssistantEventMessageProps) {
   const message = parseMessageFromEvent(event);
 
@@ -46,7 +48,12 @@ export function UserAssistantEventMessage({
 
   return (
     <>
-      <ChatMessage type={event.source} message={message} actions={actions}>
+      <ChatMessage
+        type={event.source}
+        message={message}
+        actions={actions}
+        isFromPlanningAgent={isFromPlanningAgent}
+      >
         {imageUrls.length > 0 && (
           <ImageCarousel size="small" images={imageUrls} />
         )}

frontend/src/components/v1/chat/event-message.tsx

@@ -19,7 +19,7 @@ import {
 } from "./event-message-components";
 
 interface EventMessageProps {
-  event: OpenHandsEvent;
+  event: OpenHandsEvent & { isFromPlanningAgent?: boolean };
   messages: OpenHandsEvent[];
   isLastMessage: boolean;
   microagentStatus?: MicroagentStatus | null;
@@ -51,6 +51,9 @@ export function EventMessage({
   const feedbackData = { exists: false };
   const isCheckingFeedback = false;
 
+  // Read isFromPlanningAgent directly from the event object
+  const isFromPlanningAgent = event.isFromPlanningAgent || false;
+
   // Common props for components that need them
   const commonProps = {
     microagentStatus,
@@ -62,6 +65,7 @@ export function EventMessage({
     config,
     isCheckingFeedback,
     feedbackData,
+    isFromPlanningAgent,
   };
 
   // Agent error events

frontend/src/contexts/conversation-websocket-context.tsx

@@ -343,7 +343,12 @@ export function ConversationWebSocketProvider({
 
         // Use type guard to validate v1 event structure
         if (isV1Event(event)) {
-          addEvent(event);
+          // Mark this event as coming from the planning agent
+          const eventWithPlanningFlag = {
+            ...event,
+            isFromPlanningAgent: true,
+          };
+          addEvent(eventWithPlanningFlag);
 
           // Handle AgentErrorEvent specifically
           if (isAgentErrorEvent(event)) {

frontend/src/stores/use-event-store.ts

@@ -5,7 +5,9 @@ import { OpenHandsParsedEvent } from "#/types/core";
 import { isV1Event } from "#/types/v1/type-guards";
 
 // While we transition to v1 events, our store can handle both v0 and v1 events
-type OHEvent = OpenHandsEvent | OpenHandsParsedEvent;
+type OHEvent = (OpenHandsEvent | OpenHandsParsedEvent) & {
+  isFromPlanningAgent?: boolean;
+};
 
 interface EventState {
   events: OHEvent[];