Refactor plan approval request event to use enum

Replaced hardcoded 'parsed_plan_approval_request' string with WebsocketMessageType.PLAN_APPROVAL_REQUEST enum across components, models, and services for improved type safety and maintainability.

Author: Fr4nc3

src/frontend/src/components/content/PlanChat.tsx

@@ -24,6 +24,7 @@ import ChatInput from "../../coral/modules/ChatInput";
 import InlineToaster, {
   useInlineToaster,
 } from "../toast/InlineToaster";
+import { WebsocketMessageType } from "@/models";
 interface SimplifiedPlanChatProps extends PlanChatProps {
   onPlanReceived?: (planData: MPlanData) => void;
   initialTask?: string;
@@ -60,7 +61,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
 
   // Listen for m_plan streaming
   useEffect(() => {
-    const unsubscribe = webSocketService.on('parsed_plan_approval_request', (approvalRequest: any) => {
+    const unsubscribe = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, (approvalRequest: any) => {
       console.log('📋 Plan received:', approvalRequest);
 
       let mPlanData: MPlanData | null = null;

src/frontend/src/models/messages.tsx

@@ -164,7 +164,7 @@ export interface PlanApprovalResponseData {
 
 // Structured plan approval request
 export interface ParsedPlanApprovalRequest {
-    type: 'parsed_plan_approval_request';
+    type: WebsocketMessageType.PLAN_APPROVAL_REQUEST;
     plan_id: string;
     parsedData: MPlanData;
     rawData: string;

src/frontend/src/pages/PlanPage.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState, useMemo } from "react"
 import { useParams, useNavigate } from "react-router-dom";
 import { Spinner, Text } from "@fluentui/react-components";
 import { PlanDataService } from "../services/PlanDataService";
-import { ProcessedPlanData, PlanWithSteps } from "../models";
+import { ProcessedPlanData, PlanWithSteps, WebsocketMessageType } from "../models";
 import PlanChat from "../components/content/PlanChat";
 import PlanPanelRight from "../components/content/PlanPanelRight";
 import PlanPanelLeft from "../components/content/PlanPanelLeft";
@@ -131,7 +131,7 @@ const PlanPage: React.FC = () => {
             const unsubscribeStreaming = webSocketService.on('agent_message', handleStreamingMessage);
             const unsubscribePlanApproval = webSocketService.on('plan_approval_response', handlePlanApprovalResponse);
             const unsubscribePlanApprovalRequest = webSocketService.on('plan_approval_request', handlePlanApprovalRequest);
-            const unsubscribeParsedPlanApprovalRequest = webSocketService.on('parsed_plan_approval_request', handlePlanApprovalRequest);
+            const unsubscribeParsedPlanApprovalRequest = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, handlePlanApprovalRequest);
 
             return () => {
                 console.log('🔌 Cleaning up WebSocket connections');

src/frontend/src/services/PlanDataService.tsx

@@ -5,7 +5,8 @@ import {
   ProcessedPlanData,
   PlanMessage,
   MPlanData,
-  StepStatus
+  StepStatus,
+  WebsocketMessageType
 } from "@/models";
 import { apiService } from "@/api";
 
@@ -156,7 +157,7 @@ export class PlanDataService {
       console.log('🔍 Parsing plan approval request:', rawData, 'Type:', typeof rawData);
 
       // Already parsed object passthrough
-      if (rawData && typeof rawData === 'object' && rawData.type === 'parsed_plan_approval_request') {
+      if (rawData && typeof rawData === 'object' && rawData.type === WebsocketMessageType.PLAN_APPROVAL_REQUEST) {
         return rawData.parsedData || null;
       }
 

src/frontend/src/services/WebSocketService.tsx

@@ -139,7 +139,7 @@ class WebSocketService {
     }
 
     onPlanApprovalRequest(callback: (approvalRequest: ParsedPlanApprovalRequest) => void): () => void {
-        return this.on('parsed_plan_approval_request', (message: StreamMessage) => {
+        return this.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, (message: StreamMessage) => {
             if (message.data) callback(message.data);
         });
     }
@@ -174,12 +174,12 @@ class WebSocketService {
                 const parsedData = PlanDataService.parsePlanApprovalRequest(message.data);
                 if (parsedData) {
                     const structuredMessage: ParsedPlanApprovalRequest = {
-                        type: 'parsed_plan_approval_request',
+                        type: WebsocketMessageType.PLAN_APPROVAL_REQUEST,
                         plan_id: parsedData.id,
                         parsedData,
                         rawData: message.data
                     };
-                    this.emit('parsed_plan_approval_request', structuredMessage);
+                    this.emit(WebsocketMessageType.PLAN_APPROVAL_REQUEST, structuredMessage);
                 } else {
                     this.emit('error', { error: 'Failed to parse plan approval request' });
                 }