From 42b3e12ba6d5ad205f2ea071116249455d870c12 Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 4 Mar 2026 14:21:24 +0530
Subject: [PATCH 01/10] Reafctor MACAE-V4 UI

---
 src/frontend/src/api/apiClient.tsx            | 138 +--
 src/frontend/src/api/apiService.tsx           |  10 -
 src/frontend/src/api/apiUtils.ts              | 149 +++
 src/frontend/src/api/config.tsx               |  23 -
 src/frontend/src/api/httpClient.ts            | 246 +++++
 src/frontend/src/api/index.tsx                |   6 +
 .../src/components/common/TeamSelector.tsx    |  10 +-
 .../src/components/content/HomeInput.tsx      |  10 +-
 .../src/components/content/PlanChat.tsx       |   4 +-
 .../src/components/content/PlanChatBody.tsx   |   5 +-
 .../src/components/content/PlanPanelLeft.tsx  |   8 +-
 .../src/components/content/PlanPanelRight.tsx |   4 +-
 .../src/components/content/TaskList.tsx       |   4 +-
 .../streaming/StreamingBufferMessage.tsx      |   4 +-
 src/frontend/src/coral/modules/Chat.tsx       |  17 +-
 src/frontend/src/hooks/index.tsx              |   5 +-
 src/frontend/src/hooks/useAutoScroll.tsx      |  22 +
 src/frontend/src/hooks/usePlanActions.tsx     |  91 ++
 .../src/hooks/usePlanCancellationAlert.tsx    |   3 +-
 src/frontend/src/hooks/usePlanWebSocket.tsx   | 313 ++++++
 src/frontend/src/hooks/useTeamSelection.tsx   |   5 -
 src/frontend/src/hooks/useWebSocket.tsx       |   6 +-
 src/frontend/src/index.tsx                    |  19 +-
 src/frontend/src/models/taskDetails.tsx       |   2 +-
 src/frontend/src/pages/HomePage.tsx           | 237 ++---
 src/frontend/src/pages/PlanPage.tsx           | 890 +++++-------------
 src/frontend/src/services/PlanDataService.tsx |   7 +-
 src/frontend/src/services/TeamService.tsx     |  13 +-
 .../src/services/WebSocketService.tsx         |  63 +-
 src/frontend/src/state/hooks.ts               |  14 +
 src/frontend/src/state/index.ts               |  13 +
 src/frontend/src/state/slices/appSlice.ts     |  49 +
 src/frontend/src/state/slices/chatSlice.ts    |  82 ++
 src/frontend/src/state/slices/planSlice.ts    | 282 ++++++
 .../src/state/slices/streamingSlice.ts        |  76 ++
 src/frontend/src/state/slices/teamSlice.ts    |  60 ++
 src/frontend/src/state/store.ts               |  42 +
 src/frontend/src/utils/index.ts               |  20 +
 src/frontend/src/utils/messageUtils.ts        |  48 +
 39 files changed, 1979 insertions(+), 1021 deletions(-)
 create mode 100644 src/frontend/src/api/apiUtils.ts
 create mode 100644 src/frontend/src/api/httpClient.ts
 create mode 100644 src/frontend/src/hooks/useAutoScroll.tsx
 create mode 100644 src/frontend/src/hooks/usePlanActions.tsx
 create mode 100644 src/frontend/src/hooks/usePlanWebSocket.tsx
 create mode 100644 src/frontend/src/state/hooks.ts
 create mode 100644 src/frontend/src/state/index.ts
 create mode 100644 src/frontend/src/state/slices/appSlice.ts
 create mode 100644 src/frontend/src/state/slices/chatSlice.ts
 create mode 100644 src/frontend/src/state/slices/planSlice.ts
 create mode 100644 src/frontend/src/state/slices/streamingSlice.ts
 create mode 100644 src/frontend/src/state/slices/teamSlice.ts
 create mode 100644 src/frontend/src/state/store.ts
 create mode 100644 src/frontend/src/utils/index.ts
 create mode 100644 src/frontend/src/utils/messageUtils.ts

diff --git a/src/frontend/src/api/apiClient.tsx b/src/frontend/src/api/apiClient.tsx
index 88bc4d60..7eaab10f 100644
--- a/src/frontend/src/api/apiClient.tsx
+++ b/src/frontend/src/api/apiClient.tsx
@@ -1,104 +1,52 @@
-import { headerBuilder, getApiUrl } from './config';
-
-// Helper function to build URL with query parameters
-const buildUrl = (url: string, params?: Record<string, any>): string => {
-    if (!params) return url;
-
-    const searchParams = new URLSearchParams();
-    Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined && value !== null) {
-            searchParams.append(key, String(value));
-        }
-    });
-
-    const queryString = searchParams.toString();
-    return queryString ? `${url}?${queryString}` : url;
-};
-
-// Fetch with Authentication Headers
-const fetchWithAuth = async (url: string, method: string = "GET", body: BodyInit | null = null) => {
-    const token = localStorage.getItem('token'); // Get the token from localStorage
-    const authHeaders = headerBuilder(); // Get authentication headers
-
-    const headers: Record<string, string> = {
-        ...authHeaders, // Include auth headers from headerBuilder
-    };
-
-    if (token) {
-        headers['Authorization'] = `Bearer ${token}`; // Add the token to the Authorization header
-    }
-
-    // If body is FormData, do not set Content-Type header
-    if (body && body instanceof FormData) {
-        delete headers['Content-Type'];
-    } else {
-        headers['Content-Type'] = 'application/json';
-        body = body ? JSON.stringify(body) : null;
+/**
+ * API Client — thin adapter over the centralized httpClient.
+ * 
+ * Auth headers (x-ms-client-principal-id, Authorization) are now injected
+ * automatically by httpClient's request interceptor, eliminating all manual
+ * headerBuilder() / localStorage.getItem('token') calls.
+ */
+import httpClient from './httpClient';
+import { getApiUrl } from './config';
+
+/**
+ * Ensure httpClient's base URL stays in sync with the runtime config.
+ * Called lazily on every request so it picks up late-initialized API_URL.
+ */
+function syncBaseUrl(): void {
+    const apiUrl = getApiUrl();
+    if (apiUrl && httpClient.getBaseUrl() !== apiUrl) {
+        httpClient.setBaseUrl(apiUrl);
     }
+}
 
-    const options: RequestInit = {
-        method,
-        headers,
-        body: body || undefined,
-    };
-
-    try {
-        const apiUrl = getApiUrl();
-        const finalUrl = `${apiUrl}${url}`;
-        // Log the request details
-        const response = await fetch(finalUrl, options);
-
-        if (!response.ok) {
-            const errorText = await response.text();
-            throw new Error(errorText || 'Something went wrong');
-        }
-
-        const isJson = response.headers.get('content-type')?.includes('application/json');
-        const responseData = isJson ? await response.json() : null;
-        return responseData;
-    } catch (error) {
-        console.info('API Error:', (error as Error).message);
-        throw error;
-    }
-};
+export const apiClient = {
+    get: <T = any>(url: string, config?: { params?: Record<string, unknown> }): Promise<T> => {
+        syncBaseUrl();
+        return httpClient.get<T>(url, { params: config?.params });
+    },
 
-// Vanilla Fetch without Auth for Login
-const fetchWithoutAuth = async (url: string, method: string = "POST", body: BodyInit | null = null) => {
-    const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-    };
+    post: <T = any>(url: string, body?: unknown): Promise<T> => {
+        syncBaseUrl();
+        return httpClient.post<T>(url, body);
+    },
 
-    const options: RequestInit = {
-        method,
-        headers,
-        body: body ? JSON.stringify(body) : undefined,
-    };
+    put: <T = any>(url: string, body?: unknown): Promise<T> => {
+        syncBaseUrl();
+        return httpClient.put<T>(url, body);
+    },
 
-    try {
-        const apiUrl = getApiUrl();
-        const response = await fetch(`${apiUrl}${url}`, options);
+    delete: <T = any>(url: string): Promise<T> => {
+        syncBaseUrl();
+        return httpClient.del<T>(url);
+    },
 
-        if (!response.ok) {
-            const errorText = await response.text();
-            throw new Error(errorText || 'Login failed');
-        }
-        const isJson = response.headers.get('content-type')?.includes('application/json');
-        return isJson ? await response.json() : null;
-    } catch (error) {
-        console.log('Login Error:', (error as Error).message);
-        throw error;
-    }
-};
+    upload: <T = any>(url: string, formData: FormData): Promise<T> => {
+        syncBaseUrl();
+        return httpClient.upload<T>(url, formData);
+    },
 
-// Authenticated requests (with token) and login (without token)
-export const apiClient = {
-    get: (url: string, config?: { params?: Record<string, any> }) => {
-        const finalUrl = buildUrl(url, config?.params);
-        return fetchWithAuth(finalUrl, 'GET');
+    login: <T = any>(url: string, body?: unknown): Promise<T> => {
+        syncBaseUrl();
+        return httpClient.postWithoutAuth<T>(url, body);
     },
-    post: (url: string, body?: any) => fetchWithAuth(url, 'POST', body),
-    put: (url: string, body?: any) => fetchWithAuth(url, 'PUT', body),
-    delete: (url: string) => fetchWithAuth(url, 'DELETE'),
-    upload: (url: string, formData: FormData) => fetchWithAuth(url, 'POST', formData),
-    login: (url: string, body?: any) => fetchWithoutAuth(url, 'POST', body), // For login without auth
 };
diff --git a/src/frontend/src/api/apiService.tsx b/src/frontend/src/api/apiService.tsx
index 06415442..f6f6ba3d 100644
--- a/src/frontend/src/api/apiService.tsx
+++ b/src/frontend/src/api/apiService.tsx
@@ -156,7 +156,6 @@ export class APIService {
             if (!data) {
                 throw new Error(`Plan with ID ${planId} not found`);
             }
-            console.log('Fetched plan by ID:', data);
             const results = {
                 plan: data.plan as Plan,
                 messages: data.messages as AgentMessageBE[],
@@ -190,8 +189,6 @@ export class APIService {
         const requestKey = `approve-plan-${planApprovalData.m_plan_id}`;
 
         return this._requestTracker.trackRequest(requestKey, async () => {
-            console.log('📤 Approving plan via v4 API:', planApprovalData);
-
             const response = await apiClient.post(API_ENDPOINTS.PLAN_APPROVAL, planApprovalData);
 
             // Invalidate cache since plan execution will start
@@ -200,7 +197,6 @@ export class APIService {
                 this._cache.invalidate(new RegExp(`^plan.*_${planApprovalData.plan_id}`));
             }
 
-            console.log('✅ Plan approval successful:', response);
             return response;
         });
     }
@@ -260,13 +256,7 @@ export class APIService {
         return response;
     }
     async sendAgentMessage(data: AgentMessageResponse): Promise<AgentMessage> {
-        const t0 = performance.now();
         const result = await apiClient.post(API_ENDPOINTS.AGENT_MESSAGE, data);
-        console.log('[agent_message] sent', {
-            ms: +(performance.now() - t0).toFixed(1),
-            agent: data.agent,
-            type: data.agent_type
-        });
         return result;
     }
 }
diff --git a/src/frontend/src/api/apiUtils.ts b/src/frontend/src/api/apiUtils.ts
new file mode 100644
index 00000000..f3872025
--- /dev/null
+++ b/src/frontend/src/api/apiUtils.ts
@@ -0,0 +1,149 @@
+/**
+ * API Utility Functions
+ * 
+ * Centralized helpers for error response construction, retry logic,
+ * and request deduplication. Single source of truth — eliminates
+ * duplicated error patterns across API functions.
+ */
+
+/**
+ * Create a standardized error response object.
+ * Replaces repeated `{ ...new Response(), ok: false, status: 500 }` patterns.
+ */
+export function createErrorResponse(status: number, message: string): Response {
+    return new Response(JSON.stringify({ error: message }), {
+        status,
+        statusText: message,
+        headers: { 'Content-Type': 'application/json' },
+    });
+}
+
+/**
+ * Retry a request with exponential backoff.
+ * @param fn - The async function to retry
+ * @param maxRetries - Maximum number of retry attempts (default: 3)
+ * @param baseDelay - Base delay in ms before exponential increase (default: 1000)
+ */
+export async function retryRequest<T>(
+    fn: () => Promise<T>,
+    maxRetries = 3,
+    baseDelay = 1000
+): Promise<T> {
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        try {
+            return await fn();
+        } catch (error) {
+            if (attempt === maxRetries) throw error;
+            const delay = baseDelay * Math.pow(2, attempt);
+            await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+    }
+    throw new Error('Max retries exceeded');
+}
+
+/**
+ * Request cache with TTL and deduplication of in-flight requests.
+ * Prevents duplicate API calls for the same data.
+ */
+interface CacheEntry<T> {
+    data: T;
+    timestamp: number;
+    expiresAt: number;
+}
+
+export class RequestCache {
+    private cache = new Map<string, CacheEntry<unknown>>();
+    private pendingRequests = new Map<string, Promise<unknown>>();
+
+    /** Get cached data or fetch it, deduplicating concurrent identical requests */
+    async get<T>(
+        key: string,
+        fetcher: () => Promise<T>,
+        ttlMs = 30000
+    ): Promise<T> {
+        // Return cached data if still fresh
+        const cached = this.cache.get(key);
+        if (cached && Date.now() < cached.expiresAt) {
+            return cached.data as T;
+        }
+
+        // Deduplicate concurrent identical requests
+        const pending = this.pendingRequests.get(key);
+        if (pending) {
+            return pending as Promise<T>;
+        }
+
+        const request = fetcher()
+            .then((data) => {
+                this.cache.set(key, {
+                    data,
+                    timestamp: Date.now(),
+                    expiresAt: Date.now() + ttlMs,
+                });
+                this.pendingRequests.delete(key);
+                return data;
+            })
+            .catch((error) => {
+                this.pendingRequests.delete(key);
+                throw error;
+            });
+
+        this.pendingRequests.set(key, request);
+        return request;
+    }
+
+    /** Invalidate cached entries matching a key pattern */
+    invalidate(pattern?: string | RegExp): void {
+        if (!pattern) {
+            this.cache.clear();
+            return;
+        }
+        for (const key of this.cache.keys()) {
+            const matches = typeof pattern === 'string'
+                ? key.includes(pattern)
+                : pattern.test(key);
+            if (matches) this.cache.delete(key);
+        }
+    }
+
+    /** Clear all cached data */
+    clear(): void {
+        this.cache.clear();
+        this.pendingRequests.clear();
+    }
+}
+
+/** Shared request cache singleton */
+export const requestCache = new RequestCache();
+
+/**
+ * Debounce utility — delays calling `fn` until `delayMs` has elapsed
+ * since the last invocation.
+ */
+export function debounce<T extends (...args: unknown[]) => void>(
+    fn: T,
+    delayMs: number
+): (...args: Parameters<T>) => void {
+    let timer: ReturnType<typeof setTimeout>;
+    return (...args: Parameters<T>) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), delayMs);
+    };
+}
+
+/**
+ * Throttle utility — ensures `fn` is called at most once per `limitMs`.
+ */
+export function throttle<T extends (...args: unknown[]) => void>(
+    fn: T,
+    limitMs: number
+): (...args: Parameters<T>) => void {
+    let lastCall = 0;
+    return (...args: Parameters<T>) => {
+        const now = Date.now();
+        if (now - lastCall >= limitMs) {
+            lastCall = now;
+            fn(...args);
+        }
+    };
+}
diff --git a/src/frontend/src/api/config.tsx b/src/frontend/src/api/config.tsx
index b7609e7e..d3b216ee 100644
--- a/src/frontend/src/api/config.tsx
+++ b/src/frontend/src/api/config.tsx
@@ -52,9 +52,6 @@ export async function getUserInfo(): Promise<UserInfo> {
     try {
         const response = await fetch("/.auth/me");
         if (!response.ok) {
-            console.log(
-                "No identity provider found. Access to chat will be blocked."
-            );
             return {} as UserInfo;
         }
         const payload = await response.json();
@@ -97,7 +94,6 @@ export function getUserInfoGlobal() {
     }
 
     if (!USER_INFO) {
-        // console.info('User info not yet configured');
         return null;
     }
 
@@ -105,7 +101,6 @@ export function getUserInfoGlobal() {
 }
 
 export function getUserId(): string {
-    // USER_ID = getUserInfoGlobal()?.user_id || null;
     if (!USER_ID) {
         USER_ID = getUserInfoGlobal()?.user_id || null;
     }
@@ -113,24 +108,6 @@ export function getUserId(): string {
     return userId;
 }
 
-/**
- * Build headers with authentication information
- * @param headers Optional additional headers to merge
- * @returns Combined headers object with authentication
- */
-export function headerBuilder(headers?: Record<string, string>): Record<string, string> {
-    let userId = getUserId();
-    //console.log('headerBuilder: Using user ID:', userId);
-    let defaultHeaders = {
-        "x-ms-client-principal-id": String(userId) || "",  // Custom header
-    };
-    //console.log('headerBuilder: Created headers:', defaultHeaders);
-    return {
-        ...defaultHeaders,
-        ...(headers ? headers : {})
-    };
-}
-
 export const toBoolean = (value: any): boolean => {
     if (typeof value !== 'string') {
         return false;
diff --git a/src/frontend/src/api/httpClient.ts b/src/frontend/src/api/httpClient.ts
new file mode 100644
index 00000000..866709c3
--- /dev/null
+++ b/src/frontend/src/api/httpClient.ts
@@ -0,0 +1,246 @@
+/**
+ * Centralized HTTP Client with Interceptors
+ * 
+ * Singleton class that wraps all API calls with:
+ * - Automatic auth header injection via request interceptors
+ * - Uniform error handling via response interceptors
+ * - Built-in timeout, configurable base URL, and params serialization
+ * 
+ * Eliminates duplicated localStorage/header logic across API functions.
+ */
+import { getUserId } from './config';
+
+type RequestConfig = RequestInit & { url: string };
+type RequestInterceptor = (config: RequestConfig) => RequestConfig;
+type ResponseInterceptor = (response: Response) => Response | Promise<Response>;
+
+class HttpClient {
+    private baseUrl: string;
+    private requestInterceptors: RequestInterceptor[] = [];
+    private responseInterceptors: ResponseInterceptor[] = [];
+    private timeout: number;
+
+    constructor(baseUrl = '', timeout = 30000) {
+        this.baseUrl = baseUrl;
+        this.timeout = timeout;
+    }
+
+    /** Set or update the base URL at runtime (after config is loaded) */
+    setBaseUrl(url: string): void {
+        this.baseUrl = url;
+    }
+
+    getBaseUrl(): string {
+        return this.baseUrl;
+    }
+
+    /** Register a request interceptor (runs before every request) */
+    addRequestInterceptor(interceptor: RequestInterceptor): void {
+        this.requestInterceptors.push(interceptor);
+    }
+
+    /** Register a response interceptor (runs after every response) */
+    addResponseInterceptor(interceptor: ResponseInterceptor): void {
+        this.responseInterceptors.push(interceptor);
+    }
+
+    /** Build URL with query parameters */
+    private buildUrl(path: string, params?: Record<string, unknown>): string {
+        const base = this.baseUrl ? `${this.baseUrl}${path}` : path;
+        if (!params) return base;
+
+        const searchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                searchParams.append(key, String(value));
+            }
+        });
+
+        const queryString = searchParams.toString();
+        return queryString ? `${base}?${queryString}` : base;
+    }
+
+    /** Core request method — applies interceptors, timeout, and error handling */
+    private async request(
+        path: string,
+        options: RequestInit & { params?: Record<string, unknown> } = {}
+    ): Promise<Response> {
+        const { params, ...fetchOptions } = options;
+        const url = this.buildUrl(path, params);
+
+        // Build initial config
+        let config: RequestConfig = { url, ...fetchOptions };
+
+        // Run request interceptors
+        for (const interceptor of this.requestInterceptors) {
+            config = interceptor(config);
+        }
+
+        const { url: finalUrl, ...rest } = config;
+
+        // Timeout via AbortController
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+
+        try {
+            let response = await fetch(finalUrl, {
+                ...rest,
+                signal: controller.signal,
+            });
+
+            // Run response interceptors
+            for (const interceptor of this.responseInterceptors) {
+                response = await interceptor(response);
+            }
+
+            return response;
+        } finally {
+            clearTimeout(timeoutId);
+        }
+    }
+
+    /** HTTP GET */
+    async get<T = unknown>(
+        path: string,
+        config?: { params?: Record<string, unknown>; headers?: Record<string, string> }
+    ): Promise<T> {
+        const response = await this.request(path, {
+            method: 'GET',
+            params: config?.params,
+            headers: config?.headers,
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(errorText || 'Request failed');
+        }
+
+        const isJson = response.headers.get('content-type')?.includes('application/json');
+        return isJson ? response.json() : (null as T);
+    }
+
+    /** HTTP POST */
+    async post<T = unknown>(
+        path: string,
+        body?: unknown,
+        config?: { headers?: Record<string, string> }
+    ): Promise<T> {
+        const response = await this.request(path, {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+                'Content-Type': 'application/json',
+                ...config?.headers,
+            },
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(errorText || 'Request failed');
+        }
+
+        const isJson = response.headers.get('content-type')?.includes('application/json');
+        return isJson ? response.json() : (null as T);
+    }
+
+    /** HTTP PUT */
+    async put<T = unknown>(
+        path: string,
+        body?: unknown,
+        config?: { headers?: Record<string, string> }
+    ): Promise<T> {
+        const response = await this.request(path, {
+            method: 'PUT',
+            body: JSON.stringify(body),
+            headers: {
+                'Content-Type': 'application/json',
+                ...config?.headers,
+            },
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(errorText || 'Request failed');
+        }
+
+        const isJson = response.headers.get('content-type')?.includes('application/json');
+        return isJson ? response.json() : (null as T);
+    }
+
+    /** HTTP DELETE */
+    async del<T = unknown>(path: string): Promise<T> {
+        const response = await this.request(path, { method: 'DELETE' });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(errorText || 'Request failed');
+        }
+
+        const isJson = response.headers.get('content-type')?.includes('application/json');
+        return isJson ? response.json() : (null as T);
+    }
+
+    /** Upload a FormData payload (multipart/form-data) */
+    async upload<T = unknown>(path: string, formData: FormData): Promise<T> {
+        // Don't set Content-Type — browser sets multipart boundary automatically
+        const response = await this.request(path, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(errorText || 'Upload failed');
+        }
+
+        const isJson = response.headers.get('content-type')?.includes('application/json');
+        return isJson ? response.json() : (null as T);
+    }
+
+    /** HTTP POST without auth (used for login) */
+    async postWithoutAuth<T = unknown>(path: string, body?: unknown): Promise<T> {
+        const url = this.baseUrl ? `${this.baseUrl}${path}` : path;
+
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: body ? JSON.stringify(body) : undefined,
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(errorText || 'Request failed');
+        }
+
+        const isJson = response.headers.get('content-type')?.includes('application/json');
+        return isJson ? response.json() : (null as T);
+    }
+}
+
+// ──────────────────────────────────────────────
+// Singleton instance with interceptors
+// ──────────────────────────────────────────────
+
+const httpClient = new HttpClient();
+
+/**
+ * Auth interceptor — single source of truth for userId header.
+ * Eliminates repeated localStorage.getItem("userId") and manual headerBuilder() calls.
+ */
+httpClient.addRequestInterceptor((config) => {
+    const userId = getUserId();
+    const token = localStorage.getItem('token');
+
+    const headers = new Headers(config.headers as HeadersInit);
+
+    if (userId) {
+        headers.set('x-ms-client-principal-id', String(userId));
+    }
+    if (token) {
+        headers.set('Authorization', `Bearer ${token}`);
+    }
+
+    return { ...config, headers };
+});
+
+export default httpClient;
diff --git a/src/frontend/src/api/index.tsx b/src/frontend/src/api/index.tsx
index 462775be..c88cde5f 100644
--- a/src/frontend/src/api/index.tsx
+++ b/src/frontend/src/api/index.tsx
@@ -1,5 +1,11 @@
 // Export our API services and utilities
 export * from './apiClient';
 
+// Centralized HTTP client with interceptors (Point 2)
+export { default as httpClient } from './httpClient';
+
+// API utilities: createErrorResponse, retryRequest, RequestCache (Points 6, 8)
+export * from './apiUtils';
+
 // Unified API service - recommended for all new code
 export { apiService } from './apiService';
diff --git a/src/frontend/src/components/common/TeamSelector.tsx b/src/frontend/src/components/common/TeamSelector.tsx
index 9c9aeadd..2709d550 100644
--- a/src/frontend/src/components/common/TeamSelector.tsx
+++ b/src/frontend/src/components/common/TeamSelector.tsx
@@ -116,7 +116,6 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
     try {
       // If this team was just uploaded, skip the selection API call and go directly to homepage
       if (uploadedTeam && uploadedTeam.team_id === tempSelectedTeam.team_id) {
-        console.log('Uploaded team selected, going directly to homepage:', tempSelectedTeam.name);
         onTeamSelect?.(tempSelectedTeam);
         setIsOpen(false);
         return; // Skip the selectTeam API call
@@ -126,14 +125,12 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
       const result = await TeamService.selectTeam(tempSelectedTeam.team_id);
 
       if (result.success) {
-        console.log('Team selected:', result.data);
         onTeamSelect?.(tempSelectedTeam);
         setIsOpen(false);
       } else {
         setError(result.error || 'Failed to select team');
       }
-    } catch (err: any) {
-      console.error('Error selecting team:', err);
+    } catch {
       setError('Failed to select team. Please try again.');
     } finally {
       setSelectionLoading(false);
@@ -243,7 +240,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
       let teamData;
       try {
         teamData = JSON.parse(fileText);
-      } catch (parseError) {
+      } catch {
         throw new Error('Invalid JSON file format');
       }
 
@@ -344,7 +341,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
       let teamData;
       try {
         teamData = JSON.parse(fileText);
-      } catch (parseError) {
+      } catch {
         throw new Error('Invalid JSON file format');
       }
 
@@ -563,7 +560,6 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
                           placeholder="Search teams..."
                           value={searchQuery}
                           onChange={(e: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                            console.log('Search changed:', data.value);
                             setSearchQuery(data.value || '');
                           }}
                           contentBefore={<Search20Regular />}
diff --git a/src/frontend/src/components/content/HomeInput.tsx b/src/frontend/src/components/content/HomeInput.tsx
index c4684918..4dd2a2ac 100644
--- a/src/frontend/src/components/content/HomeInput.tsx
+++ b/src/frontend/src/components/content/HomeInput.tsx
@@ -100,7 +100,6 @@ const HomeInput: React.FC<HomeInputProps> = ({ selectedTeam }) => {
           input.trim(),
           selectedTeam?.team_id
         );
-        console.log("Plan created:", response);
         setInput("");
 
         if (textareaRef.current) {
@@ -117,15 +116,14 @@ const HomeInput: React.FC<HomeInputProps> = ({ selectedTeam }) => {
           dismissToast(id);
         }
       } catch (error: any) {
-        console.log("Error creating plan:", error);
         let errorMessage = "Unable to create plan. Please try again.";
         dismissToast(id);
         // Check if this is an RAI validation error
         try {
           // errorDetail = JSON.parse(error);
           errorMessage = error?.message || errorMessage;
-        } catch (parseError) {
-          console.error("Error parsing error detail:", parseError);
+        } catch {
+          // ignore parse error
         }
 
         showToast(errorMessage, "error");
@@ -290,4 +288,6 @@ const HomeInput: React.FC<HomeInputProps> = ({ selectedTeam }) => {
   );
 };
 
-export default HomeInput;
+const MemoizedHomeInput = React.memo(HomeInput);
+MemoizedHomeInput.displayName = 'HomeInput';
+export default MemoizedHomeInput;
diff --git a/src/frontend/src/components/content/PlanChat.tsx b/src/frontend/src/components/content/PlanChat.tsx
index 81193d74..2a61e21c 100644
--- a/src/frontend/src/components/content/PlanChat.tsx
+++ b/src/frontend/src/components/content/PlanChat.tsx
@@ -108,4 +108,6 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
   );
 };
 
-export default PlanChat;
\ No newline at end of file
+const MemoizedPlanChat = React.memo(PlanChat);
+MemoizedPlanChat.displayName = 'PlanChat';
+export default MemoizedPlanChat;
\ No newline at end of file
diff --git a/src/frontend/src/components/content/PlanChatBody.tsx b/src/frontend/src/components/content/PlanChatBody.tsx
index d91b3728..210b61b7 100644
--- a/src/frontend/src/components/content/PlanChatBody.tsx
+++ b/src/frontend/src/components/content/PlanChatBody.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import ChatInput from "@/coral/modules/ChatInput";
 import { PlanChatProps } from "@/models";
 import { Button } from "@fluentui/react-components";
@@ -74,4 +75,6 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
     );
 }
 
-export default PlanChatBody;
\ No newline at end of file
+const MemoizedPlanChatBody = React.memo(PlanChatBody);
+MemoizedPlanChatBody.displayName = 'PlanChatBody';
+export default MemoizedPlanChatBody;
\ No newline at end of file
diff --git a/src/frontend/src/components/content/PlanPanelLeft.tsx b/src/frontend/src/components/content/PlanPanelLeft.tsx
index 437fb1ed..ffa48b9d 100644
--- a/src/frontend/src/components/content/PlanPanelLeft.tsx
+++ b/src/frontend/src/components/content/PlanPanelLeft.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import PanelLeft from "@/coral/components/Panels/PanelLeft";
 import PanelLeftToolbar from "@/coral/components/Panels/PanelLeftToolbar";
 import {
@@ -56,7 +57,6 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
 
   const loadPlansData = useCallback(async (forceRefresh = false) => {
     try {
-      console.log("Loading plans, forceRefresh:", forceRefresh);
       setPlansLoading(true);
       setPlansError(null);
       const plansData = await apiService.getPlans(undefined, !forceRefresh); // Invert forceRefresh for useCache
@@ -67,7 +67,6 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
         restReload();
       }
     } catch (error) {
-      console.log("Failed to load plans:", error);
       setPlansError(
         error instanceof Error ? error : new Error("Failed to load plans")
       );
@@ -92,7 +91,6 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
 
 
   useEffect(() => {
-    console.log("Reload tasks changed:", reloadTasks);
     if (reloadTasks) {
       loadPlansData(true); // Force refresh when reloadTasks is true
     }
@@ -265,4 +263,6 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
   );
 };
 
-export default PlanPanelLeft;
+const MemoizedPlanPanelLeft = React.memo(PlanPanelLeft);
+MemoizedPlanPanelLeft.displayName = 'PlanPanelLeft';
+export default MemoizedPlanPanelLeft;
diff --git a/src/frontend/src/components/content/PlanPanelRight.tsx b/src/frontend/src/components/content/PlanPanelRight.tsx
index 48442578..6072b471 100644
--- a/src/frontend/src/components/content/PlanPanelRight.tsx
+++ b/src/frontend/src/components/content/PlanPanelRight.tsx
@@ -136,4 +136,6 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
   );
 };
 
-export default PlanPanelRight;
\ No newline at end of file
+const MemoizedPlanPanelRight = React.memo(PlanPanelRight);
+MemoizedPlanPanelRight.displayName = 'PlanPanelRight';
+export default MemoizedPlanPanelRight;
\ No newline at end of file
diff --git a/src/frontend/src/components/content/TaskList.tsx b/src/frontend/src/components/content/TaskList.tsx
index aadb626c..4a26f027 100644
--- a/src/frontend/src/components/content/TaskList.tsx
+++ b/src/frontend/src/components/content/TaskList.tsx
@@ -98,4 +98,6 @@ const TaskList: React.FC<TaskListProps> = ({
   );
 };
 
-export default TaskList;
+const MemoizedTaskList = React.memo(TaskList);
+MemoizedTaskList.displayName = 'TaskList';
+export default MemoizedTaskList;
diff --git a/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx b/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx
index c3bd7c56..6c611754 100644
--- a/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx
+++ b/src/frontend/src/components/content/streaming/StreamingBufferMessage.tsx
@@ -225,4 +225,6 @@ const StreamingBufferMessage: React.FC<StreamingBufferMessageProps> = ({
     );
 };
 
-export default StreamingBufferMessage;
\ No newline at end of file
+const MemoizedStreamingBufferMessage = React.memo(StreamingBufferMessage);
+MemoizedStreamingBufferMessage.displayName = 'StreamingBufferMessage';
+export default MemoizedStreamingBufferMessage;
\ No newline at end of file
diff --git a/src/frontend/src/coral/modules/Chat.tsx b/src/frontend/src/coral/modules/Chat.tsx
index e178cc10..d7516f96 100644
--- a/src/frontend/src/coral/modules/Chat.tsx
+++ b/src/frontend/src/coral/modules/Chat.tsx
@@ -62,8 +62,8 @@ const Chat: React.FC<ChatProps> = ({
         }
         // const chatMessages = await chatService.getUserHistory(userId);
         // setMessages(chatMessages);
-      } catch (err) {
-        console.log("Failed to load chat history.", err);
+      } catch {
+        // Failed to load history — silent fail
       }
     };
     loadHistory();
@@ -102,8 +102,8 @@ const Chat: React.FC<ChatProps> = ({
   };
 
   const handleCopy = (text: string) => {
-    navigator.clipboard.writeText(text).catch((err) => {
-      console.log("Failed to copy text:", err);
+    navigator.clipboard.writeText(text).catch(() => {
+      // clipboard copy failed — silent
     });
   };
 
@@ -150,8 +150,7 @@ const Chat: React.FC<ChatProps> = ({
         // const assistantMessage = { role: "assistant", content: response.assistant_response };
         // setMessages([...updatedMessages, assistantMessage]);
       }
-    } catch (err) {
-      console.log("Send Message Error:", err);
+    } catch {
       setMessages([
         ...updatedMessages,
         { role: "assistant", content: "Oops! Something went wrong sending your message." },
@@ -169,8 +168,8 @@ const Chat: React.FC<ChatProps> = ({
         // await chatService.clearChatHistory(userId);
       }
       setMessages([]);
-    } catch (err) {
-      console.log("Failed to clear chat history:", err);
+    } catch {
+      // clear history failed — silent
     }
   };
 
@@ -195,7 +194,7 @@ const Chat: React.FC<ChatProps> = ({
                         icon={<Copy />}
                       />
                       <Button
-                        onClick={() => console.log("Heart clicked for response:", msg.content)}
+                        onClick={() => {}}
                         title="Like"
                         appearance="subtle"
                         style={{ height: 28, width: 28 }}
diff --git a/src/frontend/src/hooks/index.tsx b/src/frontend/src/hooks/index.tsx
index 70bfbf9c..d00ff6ef 100644
--- a/src/frontend/src/hooks/index.tsx
+++ b/src/frontend/src/hooks/index.tsx
@@ -1,2 +1,5 @@
 export { default as useRAIErrorHandling } from './useRAIErrorHandling';
-export { useWebSocket } from './useWebSocket';
\ No newline at end of file
+export { useWebSocket } from './useWebSocket';
+export { usePlanWebSocket } from './usePlanWebSocket';
+export { usePlanActions } from './usePlanActions';
+export { useAutoScroll } from './useAutoScroll';
\ No newline at end of file
diff --git a/src/frontend/src/hooks/useAutoScroll.tsx b/src/frontend/src/hooks/useAutoScroll.tsx
new file mode 100644
index 00000000..518559bd
--- /dev/null
+++ b/src/frontend/src/hooks/useAutoScroll.tsx
@@ -0,0 +1,22 @@
+/**
+ * useAutoScroll — smooth-scrolls a container to the bottom.
+ * Extracted from PlanPage to be reusable.
+ */
+import { useCallback, useRef } from 'react';
+
+export function useAutoScroll() {
+    const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = useCallback(() => {
+        setTimeout(() => {
+            messagesContainerRef.current?.scrollTo({
+                top: messagesContainerRef.current.scrollHeight,
+                behavior: 'smooth',
+            });
+        }, 100);
+    }, []);
+
+    return { messagesContainerRef, scrollToBottom };
+}
+
+export default useAutoScroll;
diff --git a/src/frontend/src/hooks/usePlanActions.tsx b/src/frontend/src/hooks/usePlanActions.tsx
new file mode 100644
index 00000000..53a740ac
--- /dev/null
+++ b/src/frontend/src/hooks/usePlanActions.tsx
@@ -0,0 +1,91 @@
+/**
+ * usePlanData — encapsulates fetching a plan by ID
+ * and dispatching the result into the Redux store.
+ * Uses createAsyncThunk (fetchPlanData) for automatic
+ * pending / fulfilled / rejected lifecycle.
+ *
+ * P1: AbortController — cancels in-flight fetch when a new one starts
+ * or when the component unmounts, preventing stale dispatches.
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import { useAppDispatch } from '@/state/hooks';
+import { ProcessedPlanData, PlanStatus } from '@/models';
+import {
+    fetchPlanData,
+    resetPlan,
+} from '@/state/slices/planSlice';
+import {
+    setAgentMessages,
+    resetChat,
+} from '@/state/slices/chatSlice';
+import {
+    setStreamingMessageBuffer,
+    setShowBufferingText,
+    resetStreaming,
+} from '@/state/slices/streamingSlice';
+import { setWsConnected } from '@/state/slices/appSlice';
+
+/** Return type of dispatch(createAsyncThunk()) — has .abort() */
+type ThunkPromise = ReturnType<typeof fetchPlanData> extends (...args: any[]) => infer R ? R : never;
+
+export function usePlanActions() {
+    const dispatch = useAppDispatch();
+    /** Ref holding the in-flight thunk promise so we can abort it */
+    const fetchPromiseRef = useRef<ReturnType<ReturnType<typeof fetchPlanData>> | null>(null);
+
+    /** Abort any in-flight fetch on unmount */
+    useEffect(() => {
+        return () => {
+            fetchPromiseRef.current?.abort();
+        };
+    }, []);
+
+    /** Reset every piece of plan-related state across all slices */
+    const resetPlanVariables = useCallback(() => {
+        dispatch(resetPlan());
+        dispatch(resetChat());
+        dispatch(resetStreaming());
+        dispatch(setWsConnected(false));
+    }, [dispatch]);
+
+    /**
+     * Fetch plan data from API via createAsyncThunk and hydrate cross-slice state.
+     * The core plan state (planData, loading, errorLoading) is handled
+     * automatically by extraReducers in planSlice.
+     */
+    const loadPlanData = useCallback(
+        async (planId: string, useCache = true): Promise<ProcessedPlanData | null> => {
+            /* P1: Cancel any previous in-flight fetch before starting a new one */
+            fetchPromiseRef.current?.abort();
+
+            resetPlanVariables();
+
+            const promise = dispatch(fetchPlanData({ planId, useCache }));
+            fetchPromiseRef.current = promise;
+
+            const resultAction = await promise;
+
+            if (fetchPlanData.fulfilled.match(resultAction)) {
+                const planResult = resultAction.payload;
+
+                // Hydrate cross-slice state that extraReducers can't reach
+                if (planResult?.messages) {
+                    dispatch(setAgentMessages(planResult.messages));
+                }
+
+                if (planResult?.streaming_message?.trim()) {
+                    dispatch(setStreamingMessageBuffer(planResult.streaming_message));
+                    dispatch(setShowBufferingText(true));
+                }
+
+                return planResult;
+            }
+            return null;
+        },
+        [dispatch, resetPlanVariables],
+    );
+
+    return { resetPlanVariables, loadPlanData };
+}
+
+export default usePlanActions;
diff --git a/src/frontend/src/hooks/usePlanCancellationAlert.tsx b/src/frontend/src/hooks/usePlanCancellationAlert.tsx
index 49f36683..67defa8c 100644
--- a/src/frontend/src/hooks/usePlanCancellationAlert.tsx
+++ b/src/frontend/src/hooks/usePlanCancellationAlert.tsx
@@ -58,8 +58,7 @@ export const usePlanCancellationAlert = ({
 
       // Navigate after successful cancellation
       onNavigate();
-    } catch (error) {
-      console.error('❌ Failed to cancel plan:', error);
+    } catch {
       // Show error but still allow navigation
       alert('Failed to cancel the plan properly, but navigation will continue.');
       onNavigate();
diff --git a/src/frontend/src/hooks/usePlanWebSocket.tsx b/src/frontend/src/hooks/usePlanWebSocket.tsx
new file mode 100644
index 00000000..371846b3
--- /dev/null
+++ b/src/frontend/src/hooks/usePlanWebSocket.tsx
@@ -0,0 +1,313 @@
+/**
+ * usePlanWebSocket — extracts all WebSocket event subscriptions
+ * from PlanPage into one reusable hook.
+ *
+ * Dispatches Redux actions for each event type so PlanPage no longer
+ * needs 7+ useEffect blocks for WebSocket handling.
+ */
+import React, { useEffect } from 'react';
+import webSocketService from '@/services/WebSocketService';
+import { PlanDataService } from '@/services/PlanDataService';
+import { useAppDispatch, useAppSelector } from '@/state/hooks';
+import {
+    setWaitingForPlan,
+    setShowProcessingPlanSpinner,
+    setPlanApprovalRequest,
+    setShowApprovalButtons,
+    setContinueWithWebsocketFlow,
+    setReloadLeftList,
+    markPlanCompleted,
+    selectPlanData,
+    selectContinueWithWebsocketFlow,
+    selectPlanApproved,
+    approvalRequestReceived,
+    planCompletedFinal,
+} from '@/state/slices/planSlice';
+import {
+    setSubmittingChatDisableInput,
+    setClarificationMessage,
+    addAgentMessage,
+    selectAgentMessages,
+} from '@/state/slices/chatSlice';
+import {
+    appendToStreamingBuffer,
+    setShowBufferingText,
+    addStreamingMessage,
+    selectStreamingMessageBuffer,
+} from '@/state/slices/streamingSlice';
+import { setWsConnected } from '@/state/slices/appSlice';
+import { setSelectedTeam } from '@/state/slices/teamSlice';
+import {
+    WebsocketMessageType,
+    MPlanData,
+    AgentMessageData,
+    AgentMessageType,
+    AgentType,
+    PlanStatus,
+    ParsedUserClarification,
+    StreamMessage,
+} from '@/models';
+import { APIService } from '@/api/apiService';
+
+const apiService = new APIService();
+
+import { ToastIntent } from '@/components/toast/InlineToaster';
+
+interface UsePlanWebSocketProps {
+    planId: string | undefined;
+    scrollToBottom: () => void;
+    formatErrorMessage: (content: string) => string;
+    showToast: (content: React.ReactNode, intent?: ToastIntent, options?: { dismissible?: boolean; timeoutMs?: number | null }) => number;
+}
+
+/**
+ * Creates an AgentMessageResponse and persists it, then optionally reloads the task list.
+ */
+function persistAgentMessage(
+    agentMessageData: AgentMessageData,
+    planData: any,
+    dispatch: ReturnType<typeof useAppDispatch>,
+    isFinal = false,
+    streamingMessage = '',
+) {
+    const agentMessageResponse = PlanDataService.createAgentMessageResponse(
+        agentMessageData,
+        planData,
+        isFinal,
+        streamingMessage,
+    );
+    apiService
+        .sendAgentMessage(agentMessageResponse)
+        .then(() => {
+            if (isFinal) {
+                setTimeout(() => dispatch(setReloadLeftList(true)), 1000);
+            }
+        })
+        .catch(() => {
+            if (isFinal) {
+                setTimeout(() => dispatch(setReloadLeftList(true)), 1000);
+            }
+        });
+}
+
+export function usePlanWebSocket({
+    planId,
+    scrollToBottom,
+    formatErrorMessage,
+    showToast,
+}: UsePlanWebSocketProps) {
+    const dispatch = useAppDispatch();
+    const planData = useAppSelector(selectPlanData);
+    const planApproved = useAppSelector(selectPlanApproved);
+    const continueWithWebsocketFlow = useAppSelector(selectContinueWithWebsocketFlow);
+    const streamingMessageBuffer = useAppSelector(selectStreamingMessageBuffer);
+
+    // ── PLAN_APPROVAL_REQUEST ─────────────────────────────────────
+    useEffect(() => {
+        const unsub = webSocketService.on(
+            WebsocketMessageType.PLAN_APPROVAL_REQUEST,
+            (approvalRequest: any) => {
+                let mPlanData: MPlanData | null = null;
+                if (approvalRequest.parsedData) {
+                    mPlanData = approvalRequest.parsedData;
+                } else if (approvalRequest.data?.parsedData) {
+                    mPlanData = approvalRequest.data.parsedData;
+                } else if (approvalRequest.data && typeof approvalRequest.data === 'object') {
+                    mPlanData = approvalRequest.data;
+                } else if (approvalRequest.rawData) {
+                    mPlanData = PlanDataService.parsePlanApprovalRequest(approvalRequest.rawData);
+                } else {
+                    mPlanData = PlanDataService.parsePlanApprovalRequest(approvalRequest);
+                }
+                if (mPlanData) {
+                    /* P0: single compound action replaces 4 separate dispatches */
+                    dispatch(approvalRequestReceived(mPlanData));
+                    scrollToBottom();
+                }
+            },
+        );
+        return unsub;
+    }, [dispatch, scrollToBottom]);
+
+    // ── AGENT_MESSAGE_STREAMING ───────────────────────────────────
+    useEffect(() => {
+        const unsub = webSocketService.on(
+            WebsocketMessageType.AGENT_MESSAGE_STREAMING,
+            (msg: any) => {
+                const line = PlanDataService.simplifyHumanClarification(msg.data.content);
+                dispatch(setShowBufferingText(true));
+                dispatch(appendToStreamingBuffer(line));
+            },
+        );
+        return unsub;
+    }, [dispatch]);
+
+    // ── USER_CLARIFICATION_REQUEST ────────────────────────────────
+    useEffect(() => {
+        const unsub = webSocketService.on(
+            WebsocketMessageType.USER_CLARIFICATION_REQUEST,
+            (msg: any) => {
+                if (!msg) return;
+                const agentMessageData: AgentMessageData = {
+                    agent: AgentType.GROUP_CHAT_MANAGER,
+                    agent_type: AgentMessageType.AI_AGENT,
+                    timestamp: msg.timestamp || Date.now(),
+                    steps: [],
+                    next_steps: [],
+                    content: msg.data.question || '',
+                    raw_data: msg.data || '',
+                };
+                dispatch(setClarificationMessage(msg.data as ParsedUserClarification));
+                dispatch(addAgentMessage(agentMessageData));
+                dispatch(setShowBufferingText(false));
+                dispatch(setShowProcessingPlanSpinner(false));
+                dispatch(setSubmittingChatDisableInput(false));
+                scrollToBottom();
+                persistAgentMessage(agentMessageData, planData, dispatch);
+            },
+        );
+        return unsub;
+    }, [dispatch, scrollToBottom, planData]);
+
+    // ── AGENT_TOOL_MESSAGE (currently no-op, kept for future) ─────
+    useEffect(() => {
+        const unsub = webSocketService.on(WebsocketMessageType.AGENT_TOOL_MESSAGE, () => {});
+        return unsub;
+    }, []);
+
+    // ── FINAL_RESULT_MESSAGE ──────────────────────────────────────
+    useEffect(() => {
+        const unsub = webSocketService.on(
+            WebsocketMessageType.FINAL_RESULT_MESSAGE,
+            (finalMessage: any) => {
+                if (!finalMessage) return;
+                const agentMessageData: AgentMessageData = {
+                    agent: AgentType.GROUP_CHAT_MANAGER,
+                    agent_type: AgentMessageType.AI_AGENT,
+                    timestamp: Date.now(),
+                    steps: [],
+                    next_steps: [],
+                    content: '\u{1F389}\u{1F389} ' + (finalMessage.data?.content || ''),
+                    raw_data: finalMessage,
+                };
+                if (finalMessage?.data?.status === PlanStatus.COMPLETED) {
+                    dispatch(setShowBufferingText(true));
+                    dispatch(addAgentMessage(agentMessageData));
+                    dispatch(setSelectedTeam(planData?.team || null));
+                    /* P0: single compound action replaces setShowProcessingPlanSpinner(false) + markPlanCompleted() */
+                    dispatch(planCompletedFinal());
+                    scrollToBottom();
+                    webSocketService.disconnect();
+                    persistAgentMessage(agentMessageData, planData, dispatch, true, streamingMessageBuffer);
+                }
+            },
+        );
+        return unsub;
+    }, [dispatch, scrollToBottom, planData, streamingMessageBuffer]);
+
+    // ── ERROR_MESSAGE ─────────────────────────────────────────────
+    useEffect(() => {
+        const unsub = webSocketService.on(
+            WebsocketMessageType.ERROR_MESSAGE,
+            (errorMessage: any) => {
+                let errorContent = 'An unexpected error occurred. Please try again later.';
+                if (errorMessage?.data?.data?.content) {
+                    const c = errorMessage.data.data.content.trim();
+                    if (c.length > 0) errorContent = c;
+                } else if (errorMessage?.data?.content) {
+                    const c = errorMessage.data.content.trim();
+                    if (c.length > 0) errorContent = c;
+                } else if (errorMessage?.content) {
+                    const c = errorMessage.content.trim();
+                    if (c.length > 0) errorContent = c;
+                } else if (typeof errorMessage === 'string') {
+                    const c = errorMessage.trim();
+                    if (c.length > 0) errorContent = c;
+                }
+                const errorAgent: AgentMessageData = {
+                    agent: 'system',
+                    agent_type: AgentMessageType.SYSTEM_AGENT,
+                    timestamp: Date.now(),
+                    steps: [],
+                    next_steps: [],
+                    content: formatErrorMessage(errorContent),
+                    raw_data: errorMessage || '',
+                };
+                dispatch(addAgentMessage(errorAgent));
+                dispatch(setShowProcessingPlanSpinner(false));
+                dispatch(setShowBufferingText(false));
+                dispatch(setSubmittingChatDisableInput(false));
+                scrollToBottom();
+                showToast(errorContent, 'error');
+            },
+        );
+        return unsub;
+    }, [dispatch, scrollToBottom, showToast, formatErrorMessage]);
+
+    // ── AGENT_MESSAGE ─────────────────────────────────────────────
+    useEffect(() => {
+        const unsub = webSocketService.on(
+            WebsocketMessageType.AGENT_MESSAGE,
+            (agentMessage: any) => {
+                // Only process agent messages after the user has approved the plan
+                if (!planApproved) return;
+
+                const agentMessageData = agentMessage.data as AgentMessageData;
+                if (agentMessageData) {
+                    agentMessageData.content = PlanDataService.simplifyHumanClarification(
+                        agentMessageData?.content,
+                    );
+                    dispatch(addAgentMessage(agentMessageData));
+                    dispatch(setShowProcessingPlanSpinner(true));
+                    scrollToBottom();
+                    persistAgentMessage(agentMessageData, planData, dispatch);
+                }
+            },
+        );
+        return unsub;
+    }, [dispatch, scrollToBottom, planData, planApproved]);
+
+    // ── WebSocket connect / disconnect lifecycle ──────────────────
+    useEffect(() => {
+        if (!planId || !continueWithWebsocketFlow) return;
+
+        const connectWebSocket = async () => {
+            try {
+                await webSocketService.connect(planId);
+            } catch {
+                // Continue without WebSocket — the app should still work
+            }
+        };
+        connectWebSocket();
+
+        const handleConnectionChange = (connected: boolean) => {
+            dispatch(setWsConnected(connected));
+        };
+
+        const handleStreamingMessage = (message: StreamMessage) => {
+            if (message.data?.plan_id) {
+                dispatch(addStreamingMessage(message.data));
+            }
+        };
+
+        const unsubConnection = webSocketService.on('connection_status', (msg) =>
+            handleConnectionChange(msg.data?.connected || false),
+        );
+        const unsubStreaming = webSocketService.on(
+            WebsocketMessageType.AGENT_MESSAGE,
+            handleStreamingMessage,
+        );
+        const unsubApproval = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_RESPONSE, () => {});
+        const unsubApprovalReq = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, () => {});
+
+        return () => {
+            unsubConnection();
+            unsubStreaming();
+            unsubApproval();
+            unsubApprovalReq();
+            webSocketService.disconnect();
+        };
+    }, [dispatch, planId, continueWithWebsocketFlow]);
+}
+
+export default usePlanWebSocket;
diff --git a/src/frontend/src/hooks/useTeamSelection.tsx b/src/frontend/src/hooks/useTeamSelection.tsx
index bed0af48..87d20981 100644
--- a/src/frontend/src/hooks/useTeamSelection.tsx
+++ b/src/frontend/src/hooks/useTeamSelection.tsx
@@ -36,13 +36,10 @@ export const useTeamSelection = ({
     setError(null);
 
     try {
-      console.log('Selecting team:', team.name, 'with session ID:', sessionId);
-
       const result = await TeamService.selectTeam(team.team_id);
 
       if (result.success) {
         setSelectedTeam(team);
-        console.log('Team selection successful:', result.data);
 
         // Call success callback
         onTeamSelected?.(team, result.data);
@@ -61,8 +58,6 @@ export const useTeamSelection = ({
       const errorMessage = err.message || 'Failed to select team';
       setError(errorMessage);
 
-      console.error('Team selection error:', err);
-
       // Call error callback
       onError?.(errorMessage);
 
diff --git a/src/frontend/src/hooks/useWebSocket.tsx b/src/frontend/src/hooks/useWebSocket.tsx
index 349eb6b9..e00d959f 100644
--- a/src/frontend/src/hooks/useWebSocket.tsx
+++ b/src/frontend/src/hooks/useWebSocket.tsx
@@ -47,8 +47,7 @@ export const useWebSocket = () => {
         isConnecting: false,
         error: null
       }));
-    } catch (error) {
-      console.error('Failed to connect to WebSocket:', error);
+    } catch {
       isConnectedRef.current = false;
       isConnectingRef.current = false;
       setState(prev => ({
@@ -73,8 +72,7 @@ export const useWebSocket = () => {
         isReconnecting: false,
         error: null
       }));
-    } catch (error) {
-      console.error('Failed to reconnect to WebSocket:', error);
+    } catch {
       isConnectedRef.current = false;
       setState(prev => ({
         ...prev,
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index 5b01831f..2f07a049 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -6,6 +6,8 @@ import reportWebVitals from './reportWebVitals';
 import { FluentProvider, teamsLightTheme, teamsDarkTheme } from "@fluentui/react-components";
 import { setEnvData, setApiUrl, config as defaultConfig, toBoolean, getUserInfo, setUserInfoGlobal } from './api/config';
 import { apiService } from './api';
+import { Provider as ReduxProvider } from 'react-redux';
+import { store } from './state/store';
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 const AppWrapper = () => {
@@ -38,8 +40,8 @@ const AppWrapper = () => {
         window.userInfo = defaultUserInfo;
         setUserInfoGlobal(defaultUserInfo);
         await apiService.sendUserBrowserLanguage();
-      } catch (error) {
-        console.info("frontend config did not load from python", error);
+      } catch {
+        // Config endpoint not available — using defaults
       } finally {
         setIsConfigLoaded(true);
         setIsUserInfoLoaded(true);
@@ -54,7 +56,7 @@ const AppWrapper = () => {
 
     const handleThemeChange = (event: MediaQueryListEvent) => {
       setIsDarkMode(event.matches);
-      document.body.classList.toggle("dark-mode", event.matches); // ✅ Add this
+      document.body.classList.toggle("dark-mode", event.matches);
     };
 
     // Apply dark-mode class initially
@@ -66,14 +68,13 @@ const AppWrapper = () => {
   if (!isConfigLoaded || !isUserInfoLoaded) return <div>Loading...</div>;
   return (
     <StrictMode>
-      <FluentProvider theme={isDarkMode ? teamsDarkTheme : teamsLightTheme} style={{ height: "100vh" }}>
-        <App />
-      </FluentProvider>
+      <ReduxProvider store={store}>
+        <FluentProvider theme={isDarkMode ? teamsDarkTheme : teamsLightTheme} style={{ height: "100vh" }}>
+          <App />
+        </FluentProvider>
+      </ReduxProvider>
     </StrictMode>
   );
 };
 root.render(<AppWrapper />);
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/src/frontend/src/models/taskDetails.tsx b/src/frontend/src/models/taskDetails.tsx
index e68ef4ca..7759d886 100644
--- a/src/frontend/src/models/taskDetails.tsx
+++ b/src/frontend/src/models/taskDetails.tsx
@@ -21,7 +21,7 @@ export interface Human {
 }
 
 export interface PlanDetailsProps {
-    planData: ProcessedPlanData;
+    planData: ProcessedPlanData | null;
     loading: boolean;
     planApprovalRequest: MPlanData | null;
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/HomePage.tsx b/src/frontend/src/pages/HomePage.tsx
index f61ca96f..42d72393 100644
--- a/src/frontend/src/pages/HomePage.tsx
+++ b/src/frontend/src/pages/HomePage.tsx
@@ -1,7 +1,5 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import {
-    Spinner
-} from '@fluentui/react-components';
+import React, { useEffect, useCallback } from 'react';
+import { Spinner } from '@fluentui/react-components';
 import '../styles/PlanPage.css';
 import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
 import CoralShellRow from '../coral/components/Layout/CoralShellRow';
@@ -12,180 +10,128 @@ import PlanPanelLeft from '@/components/content/PlanPanelLeft';
 import ContentToolbar from '@/coral/components/Content/ContentToolbar';
 import { TeamConfig } from '../models/Team';
 import { TeamService } from '../services/TeamService';
-import InlineToaster, { useInlineToaster } from "../components/toast/InlineToaster";
+import InlineToaster, { useInlineToaster } from '../components/toast/InlineToaster';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import {
+    selectSelectedTeam,
+    selectIsLoadingTeam,
+    setSelectedTeam,
+    setIsLoadingTeam,
+} from '../state/slices/teamSlice';
+import { selectReloadLeftList, setReloadLeftList } from '../state/slices/planSlice';
 
 /**
  * HomePage component - displays task lists and provides navigation
  * Accessible via the route "/"
  */
 const HomePage: React.FC = () => {
+    const dispatch = useAppDispatch();
     const { showToast } = useInlineToaster();
-    const [selectedTeam, setSelectedTeam] = useState<TeamConfig | null>(null);
-    const [isLoadingTeam, setIsLoadingTeam] = useState<boolean>(true);
-    const [reloadLeftList, setReloadLeftList] = useState<boolean>(true);
+    const selectedTeam = useAppSelector(selectSelectedTeam);
+    const isLoadingTeam = useAppSelector(selectIsLoadingTeam);
+    const reloadLeftList = useAppSelector(selectReloadLeftList);
 
     useEffect(() => {
         const initTeam = async () => {
-            setIsLoadingTeam(true);
-
+            dispatch(setIsLoadingTeam(true));
             try {
-                console.log('Initializing team from backend...');
-                // Call the backend init_team endpoint (takes ~20 seconds)
                 const initResponse = await TeamService.initializeTeam();
 
-                // Handle successful team initialization
                 if (initResponse.data?.status === 'Request started successfully' && initResponse.data?.team_id) {
-                    console.log('Team initialization completed:', initResponse.data?.team_id);
-
-                    // Now fetch the actual team details using the team_id
                     const teams = await TeamService.getUserTeams();
                     const initializedTeam = teams.find(team => team.team_id === initResponse.data?.team_id);
 
                     if (initializedTeam) {
-                        setSelectedTeam(initializedTeam);
+                        dispatch(setSelectedTeam(initializedTeam));
                         TeamService.storageTeam(initializedTeam);
-
-                        console.log('Team loaded successfully:', initializedTeam.name);
-                        console.log('Team agents:', initializedTeam.agents?.length || 0);
-
                         showToast(
                             `${initializedTeam.name} team initialized successfully with ${initializedTeam.agents?.length || 0} agents`,
-                            "success"
+                            'success',
                         );
-                    } else {
-                        // Fallback: if we can't find the specific team, use first available
-                        console.log('Specific team not found, using default selection logic');
-                        if (teams.length > 0) {
-                            const defaultTeam = teams[0];
-                            setSelectedTeam(defaultTeam);
-                            TeamService.storageTeam(defaultTeam);
-                            showToast(
-                                `${defaultTeam.name} team loaded as default`,
-                                "success"
-                            );
-                        }
+                    } else if (teams.length > 0) {
+                        const defaultTeam = teams[0];
+                        dispatch(setSelectedTeam(defaultTeam));
+                        TeamService.storageTeam(defaultTeam);
+                        showToast(`${defaultTeam.name} team loaded as default`, 'success');
                     }
+                } else if (initResponse.data?.requires_team_upload) {
+                    dispatch(setSelectedTeam(null));
+                    showToast('Welcome! Please upload a team configuration file to get started.', 'info');
+                } else if (!initResponse.success) {
+                    // API call failed — surface the error
+                    console.error('Team init failed:', initResponse.error);
+                    showToast(initResponse.error || 'Team initialization failed. Please try again.', 'warning');
                 }
-                // Handle case when no teams are configured
-                else if (initResponse.data?.requires_team_upload) {
-                    console.log('No teams configured. User needs to upload a team configuration.');
-                    setSelectedTeam(null);
-                    showToast(
-                        "Welcome! Please upload a team configuration file to get started.",
-                        "info"
-                    );
-                }
-
             } catch (error) {
-                console.error('Error initializing team from backend:', error);
-                showToast("Team initialization failed. You can still upload a custom team configuration.", "info");
-
-                // Don't block the user - allow them to upload custom teams
-                setSelectedTeam(null);
+                console.error('Team initialization error:', error);
+                showToast('Team initialization failed. You can still upload a custom team configuration.', 'info');
+                dispatch(setSelectedTeam(null));
             } finally {
-                setIsLoadingTeam(false);
+                dispatch(setIsLoadingTeam(false));
             }
         };
 
         initTeam();
-    }, []);
+    }, [dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    /**
-    * Handle new task creation from the "New task" button
-    * Resets textarea to empty state on HomePage
-    */
     const handleNewTaskButton = useCallback(() => {
         NewTaskService.handleNewTaskFromHome();
     }, []);
 
-    /**
-     * Handle team selection from the Settings button
-     */
-    const handleTeamSelect = useCallback(async (team: TeamConfig | null) => {
-        setSelectedTeam(team);
-        setReloadLeftList(true);
-        console.log('handleTeamSelect called with team:', true);
-        if (team) {
-
-            try {
-                setIsLoadingTeam(true);
-                const initResponse = await TeamService.initializeTeam(true);
-
-                if (initResponse.data?.status === 'Request started successfully' && initResponse.data?.team_id) {
-                    console.log('handleTeamSelect:', initResponse.data?.team_id);
-
-                    // Now fetch the actual team details using the team_id
-                    const teams = await TeamService.getUserTeams();
-                    const initializedTeam = teams.find(team => team.team_id === initResponse.data?.team_id);
-
-                    if (initializedTeam) {
-                        setSelectedTeam(initializedTeam);
-                        TeamService.storageTeam(initializedTeam);
-                        setReloadLeftList(true);
-                        console.log('Team loaded successfully handleTeamSelect:', initializedTeam.name);
-                        console.log('Team agents handleTeamSelect:', initializedTeam.agents?.length || 0);
-
-                        showToast(
-                            `${initializedTeam.name} team initialized successfully with ${initializedTeam.agents?.length || 0} agents`,
-                            "success"
-                        );
+    const handleTeamSelect = useCallback(
+        async (team: TeamConfig | null) => {
+            dispatch(setSelectedTeam(team));
+            dispatch(setReloadLeftList(true));
+            if (team) {
+                try {
+                    dispatch(setIsLoadingTeam(true));
+                    const initResponse = await TeamService.initializeTeam(true);
+
+                    if (initResponse.data?.status === 'Request started successfully' && initResponse.data?.team_id) {
+                        const teams = await TeamService.getUserTeams();
+                        const initializedTeam = teams.find(t => t.team_id === initResponse.data?.team_id);
+
+                        if (initializedTeam) {
+                            dispatch(setSelectedTeam(initializedTeam));
+                            TeamService.storageTeam(initializedTeam);
+                            dispatch(setReloadLeftList(true));
+                            showToast(
+                                `${initializedTeam.name} team initialized successfully with ${initializedTeam.agents?.length || 0} agents`,
+                                'success',
+                            );
+                        }
+                    } else if (initResponse.data?.requires_team_upload) {
+                        dispatch(setSelectedTeam(null));
+                        showToast('No teams are configured. Please upload a team configuration to continue.', 'info');
+                    } else {
+                        throw new Error('Invalid response from init_team endpoint');
                     }
-                } else if (initResponse.data?.requires_team_upload) {
-                    // Handle case when no teams are available
-                    setSelectedTeam(null);
-                    showToast(
-                        "No teams are configured. Please upload a team configuration to continue.",
-                        "info"
-                    );
-                } else {
-                    throw new Error('Invalid response from init_team endpoint');
+                } catch {
+                    showToast('Error switching team. Please try again.', 'warning');
+                } finally {
+                    dispatch(setIsLoadingTeam(false));
                 }
-            } catch (error) {
-                console.error('Error setting current team:', error);
-                showToast("Error switching team. Please try again.", "warning");
-            } finally {
-                setIsLoadingTeam(false);
+                showToast(`${team.name} team has been selected with ${team.agents.length} agents`, 'success');
+            } else {
+                showToast('No team is currently selected', 'info');
             }
+        },
+        [dispatch, showToast],
+    );
 
-
-            showToast(
-                `${team.name} team has been selected with ${team.agents.length} agents`,
-                "success"
-            );
-        } else {
-            showToast(
-                "No team is currently selected",
-                "info"
-            );
-        }
-    }, [showToast, setReloadLeftList]);
-
-
-    /**
-     * Handle team upload completion - refresh team list and keep Business Operations Team as default
-     */
     const handleTeamUpload = useCallback(async () => {
         try {
             const teams = await TeamService.getUserTeams();
-            console.log('Teams refreshed after upload:', teams.length);
-
             if (teams.length > 0) {
-                // Always keep "Human Resources Team" as default, even after new uploads
-                const hrTeam = teams.find(team => team.name === "Human Resources Team");
+                const hrTeam = teams.find(team => team.name === 'Human Resources Team');
                 const defaultTeam = hrTeam || teams[0];
-                setSelectedTeam(defaultTeam);
-                console.log('Default team after upload:', defaultTeam.name);
-                console.log('Human Resources Team remains default');
-                showToast(
-                    `Team uploaded successfully! ${defaultTeam.name} remains your default team.`,
-                    "success"
-                );
+                dispatch(setSelectedTeam(defaultTeam));
+                showToast(`Team uploaded successfully! ${defaultTeam.name} remains your default team.`, 'success');
             }
-        } catch (error) {
-            console.error('Error refreshing teams after upload:', error);
+        } catch {
+            // Silently handle — toast was already shown for upload success
         }
-    }, [showToast]);
-
+    }, [dispatch, showToast]);
 
     return (
         <>
@@ -202,29 +148,28 @@ const HomePage: React.FC = () => {
                         isLoadingTeam={isLoadingTeam}
                     />
                     <Content>
-                        <ContentToolbar
-                            panelTitle={"Multi-Agent Planner"}
-                        ></ContentToolbar>
+                        <ContentToolbar panelTitle="Multi-Agent Planner" />
                         {!isLoadingTeam ? (
-                            <HomeInput
-                                selectedTeam={selectedTeam}
-                            />
+                            <HomeInput selectedTeam={selectedTeam} />
                         ) : (
-                            <div style={{
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                height: '200px'
-                            }}>
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    height: '200px',
+                                }}
+                            >
                                 <Spinner label="Loading team configuration..." />
                             </div>
                         )}
                     </Content>
-
                 </CoralShellRow>
             </CoralShellColumn>
         </>
     );
 };
 
-export default HomePage;
\ No newline at end of file
+const MemoizedHomePage = React.memo(HomePage);
+MemoizedHomePage.displayName = 'HomePage';
+export default MemoizedHomePage;
\ No newline at end of file
diff --git a/src/frontend/src/pages/PlanPage.tsx b/src/frontend/src/pages/PlanPage.tsx
index 8945ad99..ffd2580e 100644
--- a/src/frontend/src/pages/PlanPage.tsx
+++ b/src/frontend/src/pages/PlanPage.tsx
@@ -1,726 +1,307 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { Spinner, Text } from "@fluentui/react-components";
-import { PlanDataService } from "../services/PlanDataService";
-import { ProcessedPlanData, WebsocketMessageType, MPlanData, AgentMessageData, AgentMessageType, ParsedUserClarification, AgentType, PlanStatus, TeamConfig } from "../models";
-import PlanChat from "../components/content/PlanChat";
-import PlanPanelRight from "../components/content/PlanPanelRight";
-import PlanPanelLeft from "../components/content/PlanPanelLeft";
-import CoralShellColumn from "../coral/components/Layout/CoralShellColumn";
-import CoralShellRow from "../coral/components/Layout/CoralShellRow";
-import Content from "../coral/components/Content/Content";
-import ContentToolbar from "../coral/components/Content/ContentToolbar";
-import {
-    useInlineToaster,
-} from "../components/toast/InlineToaster";
-import Octo from "../coral/imports/Octopus.png";
-import LoadingMessage, { loadingMessages } from "../coral/components/LoadingMessage";
-import webSocketService from "../services/WebSocketService";
-import { APIService } from "../api/apiService";
-import { StreamMessage, StreamingPlanUpdate } from "../models";
-import { usePlanCancellationAlert } from "../hooks/usePlanCancellationAlert";
-import PlanCancellationDialog from "../components/common/PlanCancellationDialog";
-import "../styles/PlanPage.css"
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Spinner, Text } from '@fluentui/react-components';
+
+/* ── Services / API ──────────────────────────────────────────── */
+import { APIService } from '../api/apiService';
+import { PlanDataService } from '../services/PlanDataService';
+import webSocketService from '../services/WebSocketService';
 
-// Create API service instance
+/* ── Models ──────────────────────────────────────────────────── */
+import {
+    AgentMessageData,
+    AgentMessageType,
+    PlanStatus,
+    PlanApprovalRequest,
+} from '../models';
+
+/* ── Redux ───────────────────────────────────────────────────── */
+import { useAppDispatch, useAppSelector } from '../state/hooks';
+import {
+    selectPlanData,
+    selectPlanLoading,
+    selectErrorLoading,
+    selectPlanApprovalRequest,
+    selectProcessingApproval,
+    selectShowApprovalButtons,
+    selectShowProcessingPlanSpinner,
+    selectShowCancellationDialog,
+    selectCancellingPlan,
+    selectLoadingMessage,
+    selectReloadLeftList,
+    selectWaitingForPlan,
+    setReloadLeftList,
+    setProcessingApproval,
+    setShowProcessingPlanSpinner,
+    setShowCancellationDialog,
+    setCancellingPlan,
+    setLoadingMessage,
+    setErrorLoading,
+    setPlanData,
+    planApprovalAccepted,
+    planApprovalRejected,
+} from '../state/slices/planSlice';
+import {
+    selectInput,
+    selectSubmittingChatDisable,
+    selectClarificationMessage,
+    selectAgentMessages,
+    setInput,
+    setSubmittingChatDisableInput,
+    addAgentMessage,
+} from '../state/slices/chatSlice';
+import {
+    selectStreamingMessages,
+    selectStreamingMessageBuffer,
+    selectShowBufferingText,
+} from '../state/slices/streamingSlice';
+import { selectWsConnected } from '../state/slices/appSlice';
+import { selectSelectedTeam } from '../state/slices/teamSlice';
+
+/* ── Custom Hooks ────────────────────────────────────────────── */
+import { usePlanWebSocket } from '../hooks/usePlanWebSocket';
+import { usePlanActions } from '../hooks/usePlanActions';
+import { useAutoScroll } from '../hooks/useAutoScroll';
+import { usePlanCancellationAlert } from '../hooks/usePlanCancellationAlert';
+
+/* ── Components ──────────────────────────────────────────────── */
+import PlanChat from '../components/content/PlanChat';
+import PlanPanelRight from '../components/content/PlanPanelRight';
+import PlanPanelLeft from '../components/content/PlanPanelLeft';
+import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
+import CoralShellRow from '../coral/components/Layout/CoralShellRow';
+import Content from '../coral/components/Content/Content';
+import ContentToolbar from '../coral/components/Content/ContentToolbar';
+import { useInlineToaster } from '../components/toast/InlineToaster';
+import Octo from '../coral/imports/Octopus.png';
+import LoadingMessage, { loadingMessages } from '../coral/components/LoadingMessage';
+import PlanCancellationDialog from '../components/common/PlanCancellationDialog';
+import '../styles/PlanPage.css';
+
+// Singleton API service
 const apiService = new APIService();
 
-/**
- * Page component for displaying a specific plan
- * Accessible via the route /plan/{plan_id}
- */
+/* ================================================================
+ *  PlanPage — refactored to use Redux + extracted hooks
+ * ================================================================ */
 const PlanPage: React.FC = () => {
     const { planId } = useParams<{ planId: string }>();
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
     const { showToast, dismissToast } = useInlineToaster();
-    const messagesContainerRef = useRef<HTMLDivElement>(null);
-    const [input, setInput] = useState<string>("");
-    const [planData, setPlanData] = useState<ProcessedPlanData | any>(null);
-    const [loading, setLoading] = useState<boolean>(true);
-    const [submittingChatDisableInput, setSubmittingChatDisableInput] = useState<boolean>(true);
-    const [errorLoading, setErrorLoading] = useState<boolean>(false);
-    const [clarificationMessage, setClarificationMessage] = useState<ParsedUserClarification | null>(null);
-    const [processingApproval, setProcessingApproval] = useState<boolean>(false);
-    const [planApprovalRequest, setPlanApprovalRequest] = useState<MPlanData | null>(null);
-    const [reloadLeftList, setReloadLeftList] = useState<boolean>(true);
-    const [waitingForPlan, setWaitingForPlan] = useState<boolean>(true);
-    const [showProcessingPlanSpinner, setShowProcessingPlanSpinner] = useState<boolean>(false);
-    const [showApprovalButtons, setShowApprovalButtons] = useState<boolean>(true);
-    const [continueWithWebsocketFlow, setContinueWithWebsocketFlow] = useState<boolean>(false);
-    const [selectedTeam, setSelectedTeam] = useState<TeamConfig | null>(null);
-    // WebSocket connection state
-    const [wsConnected, setWsConnected] = useState<boolean>(false);
-    const [streamingMessages, setStreamingMessages] = useState<StreamingPlanUpdate[]>([]);
-    const [streamingMessageBuffer, setStreamingMessageBuffer] = useState<string>("");
-    const [showBufferingText, setShowBufferingText] = useState<boolean>(false);
-    const [agentMessages, setAgentMessages] = useState<AgentMessageData[]>([]);
-    const formatErrorMessage = useCallback((content: string): string => {
-        // Split content by newlines and add proper indentation
-        const lines = content.split('\n');
-        const formattedLines = lines.map((line, index) => {
-            if (index === 0) {
-                return `⚠️ ${line}`;
-            } else if (line.trim() === '') {
-                return ''; // Preserve blank lines
-            } else {
-                return `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${line}`;
-            }
-        });
-        return formattedLines.join('\n');
-    }, []);
-
-    // Plan cancellation dialog state
-    const [showCancellationDialog, setShowCancellationDialog] = useState<boolean>(false);
-    const [pendingNavigation, setPendingNavigation] = useState<(() => void) | null>(null);
-    const [cancellingPlan, setCancellingPlan] = useState<boolean>(false);
-
-    const [loadingMessage, setLoadingMessage] = useState<string>(loadingMessages[0]);
+    const { messagesContainerRef, scrollToBottom } = useAutoScroll();
+    const { loadPlanData, resetPlanVariables } = usePlanActions();
+
+    /* ── Redux Selectors (granular — Point 10) ──────────────── */
+    const planData = useAppSelector(selectPlanData);
+    const loading = useAppSelector(selectPlanLoading);
+    const errorLoading = useAppSelector(selectErrorLoading);
+    const planApprovalRequest = useAppSelector(selectPlanApprovalRequest);
+    const processingApproval = useAppSelector(selectProcessingApproval);
+    const showApprovalButtons = useAppSelector(selectShowApprovalButtons);
+    const showProcessingPlanSpinner = useAppSelector(selectShowProcessingPlanSpinner);
+    const showCancellationDialog = useAppSelector(selectShowCancellationDialog);
+    const cancellingPlan = useAppSelector(selectCancellingPlan);
+    const loadingMessage = useAppSelector(selectLoadingMessage);
+    const reloadLeftList = useAppSelector(selectReloadLeftList);
+    const waitingForPlan = useAppSelector(selectWaitingForPlan);
+    const input = useAppSelector(selectInput);
+    const submittingChatDisableInput = useAppSelector(selectSubmittingChatDisable);
+    const clarificationMessage = useAppSelector(selectClarificationMessage);
+    const agentMessages = useAppSelector(selectAgentMessages);
+    const streamingMessages = useAppSelector(selectStreamingMessages);
+    const streamingMessageBuffer = useAppSelector(selectStreamingMessageBuffer);
+    const showBufferingText = useAppSelector(selectShowBufferingText);
+    const wsConnected = useAppSelector(selectWsConnected);
+    const selectedTeam = useAppSelector(selectSelectedTeam);
+
+    /* ── Cancellation alert hook ────────────────────────────── */
+    const [pendingNavigation, setPendingNavigation] = React.useState<(() => void) | null>(null);
 
-    // Plan cancellation alert hook
     const { isPlanActive } = usePlanCancellationAlert({
         planData,
         planApprovalRequest,
-        onNavigate: pendingNavigation || (() => { })
+        onNavigate: pendingNavigation || (() => {}),
     });
 
-    // Handle navigation with plan cancellation check
-    const handleNavigationWithAlert = useCallback((navigationFn: () => void) => {
-        if (!isPlanActive()) {
-            // Plan is not active, proceed with navigation
-            navigationFn();
-            return;
-        }
+    /* ── Memoized formatErrorMessage ────────────────────────── */
+    const formatErrorMessage = useCallback((content: string): string => {
+        const lines = content.split('\n');
+        return lines
+            .map((line, idx) => {
+                if (idx === 0) return `\u26A0\uFE0F ${line}`;
+                if (line.trim() === '') return '';
+                return `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${line}`;
+            })
+            .join('\n');
+    }, []);
 
-        // Plan is active, show confirmation dialog
-        setPendingNavigation(() => navigationFn);
-        setShowCancellationDialog(true);
-    }, [isPlanActive]);
+    /* ── WebSocket subscriptions (extracted hook) ───────────── */
+    usePlanWebSocket({ planId, scrollToBottom, formatErrorMessage, showToast });
 
-    // Handle confirmation dialog response
-    const handleConfirmCancellation = useCallback(async () => {
-        setCancellingPlan(true);
+    /* ── Navigation with cancellation check ─────────────────── */
+    const handleNavigationWithAlert = useCallback(
+        (navigationFn: () => void) => {
+            if (!isPlanActive()) {
+                navigationFn();
+                return;
+            }
+            setPendingNavigation(() => navigationFn);
+            dispatch(setShowCancellationDialog(true));
+        },
+        [isPlanActive, dispatch],
+    );
 
+    const handleConfirmCancellation = useCallback(async () => {
+        dispatch(setCancellingPlan(true));
         try {
             if (planApprovalRequest?.id) {
                 await apiService.approvePlan({
                     m_plan_id: planApprovalRequest.id,
-                    plan_id: planData?.plan?.id,
+                    plan_id: planData?.plan?.id ?? '',
                     approved: false,
-                    feedback: 'Plan cancelled by user navigation'
+                    feedback: 'Plan cancelled by user navigation',
                 });
             }
-
-            // Execute the pending navigation
-            if (pendingNavigation) {
-                pendingNavigation();
-            }
+            pendingNavigation?.();
             webSocketService.disconnect();
-        } catch (error) {
-            console.error('❌ Failed to cancel plan:', error);
+        } catch {
             showToast('Failed to cancel the plan properly, but navigation will continue.', 'error');
-            // Still proceed with navigation even if cancellation failed
-            if (pendingNavigation) {
-                pendingNavigation();
-            }
+            pendingNavigation?.();
         } finally {
-            setCancellingPlan(false);
-            setShowCancellationDialog(false);
+            dispatch(setCancellingPlan(false));
+            dispatch(setShowCancellationDialog(false));
             setPendingNavigation(null);
         }
-    }, [planApprovalRequest, planData, pendingNavigation, showToast]);
+    }, [planApprovalRequest, planData, pendingNavigation, showToast, dispatch]);
 
     const handleCancelDialog = useCallback(() => {
-        setShowCancellationDialog(false);
+        dispatch(setShowCancellationDialog(false));
         setPendingNavigation(null);
-    }, []);
-
-
-
-    const processAgentMessage = useCallback((agentMessageData: AgentMessageData, planData: ProcessedPlanData, is_final: boolean = false, streaming_message: string = '') => {
-
-        // Persist / forward to backend (fire-and-forget with logging)
-        const agentMessageResponse = PlanDataService.createAgentMessageResponse(agentMessageData, planData, is_final, streaming_message);
-        console.log('📤 Persisting agent message:', agentMessageResponse);
-        const sendPromise = apiService.sendAgentMessage(agentMessageResponse)
-            .then(saved => {
-                console.log('[agent_message][persisted]', {
-                    agent: agentMessageData.agent,
-                    type: agentMessageData.agent_type,
-                    ts: agentMessageData.timestamp
-                });
-
-                // If this is a final message, refresh the task list after successful persistence
-                if (is_final) {
-                    // Single refresh with a delay to ensure backend processing is complete
-                    setTimeout(() => {
-                        setReloadLeftList(true);
-                    }, 1000);
-                }
-            })
-            .catch(err => {
-                console.warn('[agent_message][persist-failed]', err);
-                // Even if persistence fails, still refresh the task list for final messages
-                // The local plan data has been updated, so the UI should reflect that
-                if (is_final) {
-                    setTimeout(() => {
-                        setReloadLeftList(true);
-                    }, 1000);
-                }
-            });
-
-        return sendPromise;
-
-    }, [setReloadLeftList]);
-
-    const resetPlanVariables = useCallback(() => {
-        setInput("");
-        setPlanData(null);
-        setLoading(true);
-        setSubmittingChatDisableInput(true);
-        setErrorLoading(false);
-        setClarificationMessage(null);
-        setProcessingApproval(false);
-        setPlanApprovalRequest(null);
-        setReloadLeftList(true);
-        setWaitingForPlan(true);
-        setShowProcessingPlanSpinner(false);
-        setShowApprovalButtons(true);
-        setContinueWithWebsocketFlow(false);
-        setWsConnected(false);
-        setStreamingMessages([]);
-        setStreamingMessageBuffer("");
-        setShowBufferingText(false);
-        setAgentMessages([]);
-    }, [
-        setInput,
-        setPlanData,
-        setLoading,
-        setSubmittingChatDisableInput,
-        setErrorLoading,
-        setClarificationMessage,
-        setProcessingApproval,
-        setPlanApprovalRequest,
-        setReloadLeftList,
-        setWaitingForPlan,
-        setShowProcessingPlanSpinner,
-        setShowApprovalButtons,
-        setContinueWithWebsocketFlow,
-        setWsConnected,
-        setStreamingMessages,
-        setStreamingMessageBuffer,
-        setShowBufferingText,
-        setAgentMessages
-    ]);
-
-    // Auto-scroll helper
-    const scrollToBottom = useCallback(() => {
-        setTimeout(() => {
-            if (messagesContainerRef.current) {
-                //messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
-                messagesContainerRef.current?.scrollTo({
-                    top: messagesContainerRef.current.scrollHeight,
-                    behavior: "smooth",
-                });
-            }
-        }, 100);
-    }, []);
-
-
-    //WebsocketMessageType.PLAN_APPROVAL_REQUEST
-    useEffect(() => {
-        const unsubscribe = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, (approvalRequest: any) => {
-            console.log('📋 Plan received:', approvalRequest);
-
-            let mPlanData: MPlanData | null = null;
-
-            // Handle the different message structures
-            if (approvalRequest.parsedData) {
-                // Direct parsedData property
-                mPlanData = approvalRequest.parsedData;
-            } else if (approvalRequest.data && typeof approvalRequest.data === 'object') {
-                // Data property with nested object
-                if (approvalRequest.data.parsedData) {
-                    mPlanData = approvalRequest.data.parsedData;
-                } else {
-                    // Try to parse the data object directly
-                    mPlanData = approvalRequest.data;
-                }
-            } else if (approvalRequest.rawData) {
-                // Parse the raw data string
-                mPlanData = PlanDataService.parsePlanApprovalRequest(approvalRequest.rawData);
-            } else {
-                // Try to parse the entire object
-                mPlanData = PlanDataService.parsePlanApprovalRequest(approvalRequest);
-            }
-
-            if (mPlanData) {
-                console.log('✅ Parsed plan data:', mPlanData);
-                setPlanApprovalRequest(mPlanData);
-                setWaitingForPlan(false);
-                setShowProcessingPlanSpinner(false);
-                scrollToBottom();
-            } else {
-                console.error('❌ Failed to parse plan data', approvalRequest);
-            }
-        });
-
-        return () => unsubscribe();
-    }, [scrollToBottom]);
-
-    //(WebsocketMessageType.AGENT_MESSAGE_STREAMING
-    useEffect(() => {
-        const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE_STREAMING, (streamingMessage: any) => {
-            
-            //console.log('📋 Streaming Message', streamingMessage);
-            // if is final true clear buffer and add final message to agent messages
-            const line = PlanDataService.simplifyHumanClarification(streamingMessage.data.content);
-            setShowBufferingText(true);
-            setStreamingMessageBuffer(prev => prev + line);
-            //scrollToBottom();
-
-        });
-
-        return () => unsubscribe();
-    }, [scrollToBottom]);
-
-    //WebsocketMessageType.USER_CLARIFICATION_REQUEST
-    useEffect(() => {
-        const unsubscribe = webSocketService.on(WebsocketMessageType.USER_CLARIFICATION_REQUEST, (clarificationMessage: any) => {
-            console.log('📋 Clarification Message', clarificationMessage);
-            console.log('📋 Current plan data User clarification', planData);
-            if (!clarificationMessage) {
-                console.warn('⚠️ clarification message missing data:', clarificationMessage);
-                return;
-            }
-            const agentMessageData = {
-                agent: AgentType.GROUP_CHAT_MANAGER,
-                agent_type: AgentMessageType.AI_AGENT,
-                timestamp: clarificationMessage.timestamp || Date.now(),
-                steps: [],   // intentionally always empty
-                next_steps: [],  // intentionally always empty
-                content: clarificationMessage.data.question || '',
-                raw_data: clarificationMessage.data || '',
-            } as AgentMessageData;
-            console.log('✅ Parsed clarification message:', agentMessageData);
-            setClarificationMessage(clarificationMessage.data as ParsedUserClarification | null);
-            setAgentMessages(prev => [...prev, agentMessageData]);
-            setShowBufferingText(false);
-            setShowProcessingPlanSpinner(false);
-            setSubmittingChatDisableInput(false);
-            scrollToBottom();
-            // Persist the agent message
-            processAgentMessage(agentMessageData, planData);
-
-        });
-
-        return () => unsubscribe();
-    }, [scrollToBottom, planData, processAgentMessage]);
-    //WebsocketMessageType.AGENT_TOOL_MESSAGE
-    useEffect(() => {
-        const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_TOOL_MESSAGE, (toolMessage: any) => {
-            console.log('📋 Tool Message', toolMessage);
-            // scrollToBottom()
-
-        });
-
-        return () => unsubscribe();
-    }, [scrollToBottom]);
-
-
-    //WebsocketMessageType.FINAL_RESULT_MESSAGE
-    useEffect(() => {
-        const unsubscribe = webSocketService.on(WebsocketMessageType.FINAL_RESULT_MESSAGE, (finalMessage: any) => {
-            console.log('📋 Final Result Message', finalMessage);
-            if (!finalMessage) {
-
-                console.warn('⚠️ Final result message missing data:', finalMessage);
-                return;
-            }
-            const agentMessageData = {
-                agent: AgentType.GROUP_CHAT_MANAGER,
-                agent_type: AgentMessageType.AI_AGENT,
-                timestamp: Date.now(),
-                steps: [],   // intentionally always empty
-                next_steps: [],  // intentionally always empty
-                content: "🎉🎉 " + (finalMessage.data?.content || ''),
-                raw_data: finalMessage,
-            } as AgentMessageData;
-
-
-            console.log('✅ Parsed final result message:', agentMessageData);
-            // we ignore the terminated message 
-            if (finalMessage?.data?.status === PlanStatus.COMPLETED) {
+    }, [dispatch]);
 
-                setShowBufferingText(true);
-                setShowProcessingPlanSpinner(false);
-                setAgentMessages(prev => [...prev, agentMessageData]);
-                setSelectedTeam(planData?.team || null);
-                scrollToBottom();
-                // Persist the agent message
-                const is_final = true;
-                if (planData?.plan) {
-                    planData.plan.overall_status = PlanStatus.COMPLETED;
-                    setPlanData({ ...planData });
-                }
-
-                // Wait for the agent message to be processed and persisted
-                // The processAgentMessage function will handle refreshing the task list
-                webSocketService.disconnect();
-                processAgentMessage(agentMessageData, planData, is_final, streamingMessageBuffer);
-
-            }
-
-
-        });
-
-        return () => unsubscribe();
-    }, [scrollToBottom, planData, processAgentMessage, streamingMessageBuffer, setSelectedTeam]);
-
-    // WebsocketMessageType.ERROR_MESSAGE
-    useEffect(() => {
-        const unsubscribe = webSocketService.on(WebsocketMessageType.ERROR_MESSAGE, (errorMessage: any) => {
-            console.log('❌ Received ERROR_MESSAGE:', errorMessage);
-            console.log('❌ Error message data:', errorMessage?.data);
-            
-            // Try multiple ways to extract the error message
-            let errorContent = "An unexpected error occurred. Please try again later.";
-            
-            // Check for double-nested data structure
-            if (errorMessage?.data?.data?.content) {
-                const content = errorMessage.data.data.content.trim();
-                if (content.length > 0) {
-                    errorContent = content;
-                }
-            } else if (errorMessage?.data?.content) {
-                const content = errorMessage.data.content.trim();
-                if (content.length > 0) {
-                    errorContent = content;
-                }
-            } else if (errorMessage?.content) {
-                const content = errorMessage.content.trim();
-                if (content.length > 0) {
-                    errorContent = content;
-                }
-            } else if (typeof errorMessage === 'string') {
-                const content = errorMessage.trim();
-                if (content.length > 0) {
-                    errorContent = content;
-                }
-            }
-
-            console.log('❌ Final error content to display:', errorContent);
-
-            const errorAgentMessage: AgentMessageData = {
-                agent: 'system',
-                agent_type: AgentMessageType.SYSTEM_AGENT,
-                timestamp: Date.now(),
-                steps: [],
-                next_steps: [],
-                content: formatErrorMessage(errorContent),
-                raw_data: errorMessage || '',
-            };
-
-            setAgentMessages(prev => [...prev, errorAgentMessage]);
-            setShowProcessingPlanSpinner(false);
-            setShowBufferingText(false);
-            setSubmittingChatDisableInput(false);
-            scrollToBottom();
-            showToast(errorContent, "error");
-        });
-
-        return () => unsubscribe();
-    }, [scrollToBottom, showToast, formatErrorMessage]);
-
-    //WebsocketMessageType.AGENT_MESSAGE
-    useEffect(() => {
-        const unsubscribe = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE, (agentMessage: any) => {
-            console.log('📋 Agent Message', agentMessage)
-            console.log('📋 Current plan data', planData);
-            const agentMessageData = agentMessage.data as AgentMessageData;
-            if (agentMessageData) {
-                agentMessageData.content = PlanDataService.simplifyHumanClarification(agentMessageData?.content);
-                setAgentMessages(prev => [...prev, agentMessageData]);
-                setShowProcessingPlanSpinner(true);
-                scrollToBottom();
-                processAgentMessage(agentMessageData, planData);
-            }
-
-        });
-
-        return () => unsubscribe();
-    }, [scrollToBottom, planData, processAgentMessage]); //onPlanReceived, scrollToBottom
-
-    // Loading message rotation effect
-    useEffect(() => {
-        let interval: NodeJS.Timeout;
-        if (loading) {
-            let index = 0;
-            interval = setInterval(() => {
-                index = (index + 1) % loadingMessages.length;
-                setLoadingMessage(loadingMessages[index]);
-            }, 3000);
-        }
-        return () => clearInterval(interval);
-    }, [loading]);
-
-    // WebSocket connection with proper error handling and v4 backend compatibility
-    useEffect(() => {
-        if (planId && continueWithWebsocketFlow) {
-            console.log('🔌 Connecting WebSocket:', { planId, continueWithWebsocketFlow });
-
-            const connectWebSocket = async () => {
-                try {
-                    await webSocketService.connect(planId);
-                    console.log('✅ WebSocket connected successfully');
-                } catch (error) {
-                    console.error('❌ WebSocket connection failed:', error);
-                    // Continue without WebSocket - the app should still work
-                }
-            };
-
-            connectWebSocket();
-
-            const handleConnectionChange = (connected: boolean) => {
-                setWsConnected(connected);
-                console.log('🔗 WebSocket connection status:', connected);
-            };
-
-            const handleStreamingMessage = (message: StreamMessage) => {
-                console.log('📨 Received streaming message:', message);
-                if (message.data && message.data.plan_id) {
-                    setStreamingMessages(prev => [...prev, message.data]);
-                }
-            };
-
-            const handlePlanApprovalResponse = (message: StreamMessage) => {
-                console.log('✅ Plan approval response received:', message);
-            };
-
-            const handlePlanApprovalRequest = (message: StreamMessage) => {
-                console.log('📥 Plan approval request received:', message);
-                // This is handled by PlanChat component through its own listener
-            };
-
-            // Subscribe to all relevant v4 backend events
-            const unsubscribeConnection = webSocketService.on('connection_status', (message) => {
-                handleConnectionChange(message.data?.connected || false);
-            });
-
-            const unsubscribeStreaming = webSocketService.on(WebsocketMessageType.AGENT_MESSAGE, handleStreamingMessage);
-            const unsubscribePlanApproval = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_RESPONSE, handlePlanApprovalResponse);
-            const unsubscribePlanApprovalRequest = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, handlePlanApprovalRequest);
-            const unsubscribeParsedPlanApprovalRequest = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, handlePlanApprovalRequest);
-
-            return () => {
-                console.log('🔌 Cleaning up WebSocket connections');
-                unsubscribeConnection();
-                unsubscribeStreaming();
-                unsubscribePlanApproval();
-                unsubscribePlanApprovalRequest();
-                unsubscribeParsedPlanApprovalRequest();
-                webSocketService.disconnect();
-            };
-        }
-    }, [planId, loading, continueWithWebsocketFlow]);
-
-    // Create loadPlanData function with useCallback to memoize it
-    const loadPlanData = useCallback(
-        async (useCache = true): Promise<ProcessedPlanData | null> => {
-            if (!planId) return null;
-            resetPlanVariables();
-            setLoading(true);
-            try {
-
-                let planResult: ProcessedPlanData | null = null;
-                console.log("Fetching plan with ID:", planId);
-                planResult = await PlanDataService.fetchPlanData(planId, useCache);
-                console.log("Plan data fetched:", planResult);
-                if (planResult?.plan?.overall_status === PlanStatus.IN_PROGRESS) {
-                    setShowApprovalButtons(true);
-
-                } else {
-                    setShowApprovalButtons(false);
-                    setWaitingForPlan(false);
-                }
-                if (planResult?.plan?.overall_status !== PlanStatus.COMPLETED) {
-                    setContinueWithWebsocketFlow(true);
-                }
-                if (planResult?.messages) {
-                    setAgentMessages(planResult.messages);
-                }
-                if (planResult?.mplan) {
-                    setPlanApprovalRequest(planResult.mplan);
-                }
-                if (planResult?.streaming_message && planResult.streaming_message.trim() !== "") {
-                    setStreamingMessageBuffer(planResult.streaming_message);
-                    setShowBufferingText(true);
-                }
-                setPlanData(planResult);
-                return planResult;
-            } catch (err) {
-                console.log("Failed to load plan data:", err);
-                setErrorLoading(true);
-                setPlanData(null);
-                return null;
-            } finally {
-                setLoading(false);
-            }
-        },
-        [planId, navigate, resetPlanVariables]
-    );
-
-
-    // Handle plan approval
+    /* ── Plan Approval / Rejection ──────────────────────────── */
     const handleApprovePlan = useCallback(async () => {
         if (!planApprovalRequest) return;
-
-        setProcessingApproval(true);
-        let id = showToast("Submitting Approval", "progress");
-
+        dispatch(setProcessingApproval(true));
+        const id = showToast('Submitting Approval', 'progress');
         try {
             await apiService.approvePlan({
                 m_plan_id: planApprovalRequest.id,
-                plan_id: planData?.plan?.id,
+                plan_id: planData?.plan?.id ?? '',
                 approved: true,
-                feedback: 'Plan approved by user'
+                feedback: 'Plan approved by user',
             });
-            
             dismissToast(id);
-            setShowProcessingPlanSpinner(true);
-            setShowApprovalButtons(false);
-
-        } catch (error) {
+            /* P0: single compound action replaces 3 separate dispatches */
+            dispatch(planApprovalAccepted());
+        } catch {
             dismissToast(id);
-            showToast("Failed to submit approval", "error");
-            console.error('❌ Failed to approve plan:', error);
+            showToast('Failed to submit approval', 'error');
         } finally {
-            setProcessingApproval(false);
+            dispatch(setProcessingApproval(false));
         }
-    }, [planApprovalRequest, planData, setProcessingApproval]);
+    }, [planApprovalRequest, planData, showToast, dismissToast, dispatch]);
 
-    // Handle plan rejection  
     const handleRejectPlan = useCallback(async () => {
         if (!planApprovalRequest) return;
-
-        setProcessingApproval(true);
-        let id = showToast("Submitting cancellation", "progress");
+        dispatch(setProcessingApproval(true));
+        const id = showToast('Submitting cancellation', 'progress');
         try {
             await apiService.approvePlan({
                 m_plan_id: planApprovalRequest.id,
-                plan_id: planData?.plan?.id,
+                plan_id: planData?.plan?.id ?? '',
                 approved: false,
-                feedback: 'Plan rejected by user'
+                feedback: 'Plan rejected by user',
             });
-
             dismissToast(id);
-
             navigate('/');
-
-        } catch (error) {
+        } catch {
             dismissToast(id);
-            showToast("Failed to submit cancellation", "error");
-            console.error('❌ Failed to reject plan:', error);
+            showToast('Failed to submit cancellation', 'error');
             navigate('/');
         } finally {
-            setProcessingApproval(false);
+            /* P0: single compound action replaces multiple state resets */
+            dispatch(planApprovalRejected());
         }
-    }, [planApprovalRequest, planData, navigate, setProcessingApproval]);
-    // Chat submission handler - updated for v4 backend compatibility
+    }, [planApprovalRequest, planData, navigate, showToast, dismissToast, dispatch]);
 
+    /* ── Chat submission ────────────────────────────────────── */
     const handleOnchatSubmit = useCallback(
         async (chatInput: string) => {
             if (!chatInput.trim()) {
-                showToast("Please enter a clarification", "error");
+                showToast('Please enter a clarification', 'error');
                 return;
             }
-            setInput("");
-
+            dispatch(setInput(''));
             if (!planData?.plan) return;
-            setSubmittingChatDisableInput(true);
-            let id = showToast("Submitting clarification", "progress");
-
+            dispatch(setSubmittingChatDisableInput(true));
+            const id = showToast('Submitting clarification', 'progress');
             try {
-                // Use legacy method for non-v4 backends
-                const response = await PlanDataService.submitClarification({
-                    request_id: clarificationMessage?.request_id || "",
+                await PlanDataService.submitClarification({
+                    request_id: clarificationMessage?.request_id || '',
                     answer: chatInput,
-                    plan_id: planData?.plan.id,
-                    m_plan_id: planApprovalRequest?.id || ""
+                    plan_id: planData.plan.id,
+                    m_plan_id: planApprovalRequest?.id || '',
                 });
-
-                console.log("Clarification submitted successfully:", response);
-                setInput("");
+                dispatch(setInput(''));
                 dismissToast(id);
-                showToast("Clarification submitted successfully", "success");
-
-                const agentMessageData = {
+                showToast('Clarification submitted successfully', 'success');
+                const agentMessageData: AgentMessageData = {
                     agent: 'human',
                     agent_type: AgentMessageType.HUMAN_AGENT,
                     timestamp: Date.now(),
-                    steps: [],   // intentionally always empty
-                    next_steps: [],  // intentionally always empty
-                    content: chatInput || '',
-                    raw_data: chatInput || '',
-                } as AgentMessageData;
-
-                setAgentMessages(prev => [...prev, agentMessageData]);
-                setSubmittingChatDisableInput(true);
-                setShowProcessingPlanSpinner(true);
+                    steps: [],
+                    next_steps: [],
+                    content: chatInput,
+                    raw_data: chatInput,
+                };
+                dispatch(addAgentMessage(agentMessageData));
+                dispatch(setSubmittingChatDisableInput(true));
+                dispatch(setShowProcessingPlanSpinner(true));
                 scrollToBottom();
-
-            } catch (error: any) {
-                setShowProcessingPlanSpinner(false);
+            } catch {
+                dispatch(setShowProcessingPlanSpinner(false));
                 dismissToast(id);
-                setSubmittingChatDisableInput(false);
-                showToast(
-                    "Failed to submit clarification",
-                    "error"
-                );
-
-            } finally {
-
+                dispatch(setSubmittingChatDisableInput(false));
+                showToast('Failed to submit clarification', 'error');
             }
         },
-        [planData?.plan, showToast, dismissToast, loadPlanData]
+        [planData, clarificationMessage, planApprovalRequest, showToast, dismissToast, dispatch, scrollToBottom],
     );
 
-
-    // ✅ Handlers for PlanPanelLeft with plan cancellation protection
+    /* ── Left-panel handlers ────────────────────────────────── */
     const handleNewTaskButton = useCallback(() => {
-        handleNavigationWithAlert(() => {
-            navigate("/", { state: { focusInput: true } });
-        });
+        handleNavigationWithAlert(() => navigate('/', { state: { focusInput: true } }));
     }, [navigate, handleNavigationWithAlert]);
 
-
     const resetReload = useCallback(() => {
-        setReloadLeftList(false);
-    }, []);
+        dispatch(setReloadLeftList(false));
+    }, [dispatch]);
 
+    /* ── Loading message rotation ───────────────────────────── */
     useEffect(() => {
-        const initializePlanLoading = async () => {
-            if (!planId) {
-                resetPlanVariables();
-                setErrorLoading(true);
-                return;
-            }
-
-            try {
-                await loadPlanData(false);
-            } catch (err) {
-                console.error("Failed to initialize plan loading:", err);
-            }
-        };
-
-        initializePlanLoading();
-    }, [planId, loadPlanData, resetPlanVariables, setErrorLoading]);
+        if (!loading) return;
+        let index = 0;
+        dispatch(setLoadingMessage(loadingMessages[0]));
+        const interval = setInterval(() => {
+            index = (index + 1) % loadingMessages.length;
+            dispatch(setLoadingMessage(loadingMessages[index]));
+        }, 3000);
+        return () => clearInterval(interval);
+    }, [loading, dispatch]);
 
+    /* ── Initial plan load ──────────────────────────────────── */
     useEffect(() => {
-        if (planData?.team) {
-            setSelectedTeam(planData.team);
+        if (!planId) {
+            resetPlanVariables();
+            dispatch(setErrorLoading(true));
+            return;
         }
-    }, [planData, setSelectedTeam]);
+        loadPlanData(planId, false);
+    }, [planId, loadPlanData, resetPlanVariables, dispatch]);
 
+    /* ── Render: Error state ────────────────────────────────── */
     if (errorLoading) {
         return (
             <CoralShellColumn>
@@ -729,17 +310,15 @@ const PlanPage: React.FC = () => {
                         reloadTasks={reloadLeftList}
                         onNewTaskButton={handleNewTaskButton}
                         restReload={resetReload}
-                        onTeamSelect={() => { }}
-                        onTeamUpload={async () => { }}
+                        onTeamSelect={() => {}}
+                        onTeamUpload={async () => {}}
                         isHomePage={false}
                         selectedTeam={selectedTeam}
                         onNavigationWithAlert={handleNavigationWithAlert}
                     />
                     <Content>
                         <div className="plan-error-message">
-                            <Text size={500}>
-                                {"An error occurred while loading the plan"}
-                            </Text>
+                            <Text size={500}>An error occurred while loading the plan</Text>
                         </div>
                     </Content>
                 </CoralShellRow>
@@ -747,16 +326,16 @@ const PlanPage: React.FC = () => {
         );
     }
 
+    /* ── Render: Normal state ───────────────────────────────── */
     return (
         <CoralShellColumn>
             <CoralShellRow>
-                {/* ✅ RESTORED: PlanPanelLeft for navigation */}
                 <PlanPanelLeft
                     reloadTasks={reloadLeftList}
                     onNewTaskButton={handleNewTaskButton}
                     restReload={resetReload}
-                    onTeamSelect={() => { }}
-                    onTeamUpload={async () => { }}
+                    onTeamSelect={() => {}}
+                    onTeamUpload={async () => {}}
                     isHomePage={false}
                     selectedTeam={selectedTeam}
                     onNavigationWithAlert={handleNavigationWithAlert}
@@ -769,27 +348,16 @@ const PlanPage: React.FC = () => {
                                 <Spinner size="medium" />
                                 <Text>Loading plan data...</Text>
                             </div>
-                            <LoadingMessage
-                                loadingMessage={loadingMessage}
-                                iconSrc={Octo}
-                            />
+                            <LoadingMessage loadingMessage={loadingMessage} iconSrc={Octo} />
                         </>
                     ) : (
                         <>
-                            
-                            <ContentToolbar
-                                panelTitle="Multi-Agent Planner"
-                            >
-                                {/* <PanelRightToggles>
-                                    <TaskListSquareLtr />
-                                </PanelRightToggles> */}
-                            </ContentToolbar>
-                            
+                            <ContentToolbar panelTitle="Multi-Agent Planner" />
                             <PlanChat
                                 planData={planData}
                                 OnChatSubmit={handleOnchatSubmit}
                                 loading={loading}
-                                setInput={setInput}
+                                setInput={(val: string) => dispatch(setInput(val))}
                                 submittingChatDisableInput={submittingChatDisableInput}
                                 input={input}
                                 streamingMessages={streamingMessages}
@@ -805,7 +373,6 @@ const PlanPage: React.FC = () => {
                                 processingApproval={processingApproval}
                                 handleApprovePlan={handleApprovePlan}
                                 handleRejectPlan={handleRejectPlan}
-
                             />
                         </>
                     )}
@@ -818,7 +385,6 @@ const PlanPage: React.FC = () => {
                 />
             </CoralShellRow>
 
-            {/* Plan Cancellation Confirmation Dialog */}
             <PlanCancellationDialog
                 isOpen={showCancellationDialog}
                 onConfirm={handleConfirmCancellation}
@@ -829,4 +395,6 @@ const PlanPage: React.FC = () => {
     );
 };
 
-export default PlanPage;
\ No newline at end of file
+const MemoizedPlanPage = React.memo(PlanPage);
+MemoizedPlanPage.displayName = 'PlanPage';
+export default MemoizedPlanPage;
diff --git a/src/frontend/src/services/PlanDataService.tsx b/src/frontend/src/services/PlanDataService.tsx
index 2960965a..ee4b1187 100644
--- a/src/frontend/src/services/PlanDataService.tsx
+++ b/src/frontend/src/services/PlanDataService.tsx
@@ -38,10 +38,9 @@ export class PlanDataService {
     try {
       // Use optimized getPlanById method for better performance
       const planBody = await apiService.getPlanById(planId, useCache);
-      console.log('Raw plan data fetched:', planBody);
       return this.processPlanData(planBody);
     } catch (error) {
-      console.log("Failed to fetch plan data:", error);
+      console.error("Failed to fetch plan data:", error);
       throw error;
     }
   }
@@ -230,7 +229,7 @@ export class PlanDataService {
     streaming_message: string = ''
   ): AgentMessageResponse {
     if (!planData || !planData.plan) {
-      console.log("Invalid plan data provided to createAgentMessageResponse");
+      console.warn("Invalid plan data provided to createAgentMessageResponse");
     }
     return {
       plan_id: planData.plan.plan_id,
@@ -264,7 +263,7 @@ export class PlanDataService {
     try {
       return apiService.submitClarification(request_id, answer, plan_id, m_plan_id);
     } catch (error) {
-      console.log("Failed to submit clarification:", error);
+      console.error("Failed to submit clarification:", error);
       throw error;
     }
   }
diff --git a/src/frontend/src/services/TeamService.tsx b/src/frontend/src/services/TeamService.tsx
index 9b68118c..6241bfa1 100644
--- a/src/frontend/src/services/TeamService.tsx
+++ b/src/frontend/src/services/TeamService.tsx
@@ -34,22 +34,17 @@ export class TeamService {
         error?: string;
     }> {
         try {
-            console.log('Calling /v4/init_team endpoint...');
             const response = await apiClient.get('/v4/init_team', {
                 params: {
                     team_switched
                 }
             });
 
-            console.log('Team initialization response:', response);
-
             return {
                 success: true,
                 data: response
             };
         } catch (error: any) {
-            console.error('Team initialization failed:', error);
-
             let errorMessage = 'Failed to initialize team';
 
             if (error.response?.data?.detail) {
@@ -58,6 +53,7 @@ export class TeamService {
                 errorMessage = error.message;
             }
 
+            console.error('TeamService.initializeTeam failed:', errorMessage);
             return {
                 success: false,
                 error: errorMessage
@@ -83,7 +79,6 @@ export class TeamService {
         try {
             const formData = new FormData();
             formData.append('file', teamFile);
-            console.log(formData);
             const response = await apiClient.upload('/v4/upload_team_config', formData);
 
             return {
@@ -143,7 +138,7 @@ export class TeamService {
             const teams = Array.isArray(response) ? response : [];
 
             return teams;
-        } catch (error: any) {
+        } catch {
             return [];
         }
     }
@@ -156,7 +151,7 @@ export class TeamService {
             const teams = await this.getUserTeams();
             const team = teams.find(t => t.team_id === teamId);
             return team || null;
-        } catch (error: any) {
+        } catch {
             return null;
         }
     }
@@ -168,7 +163,7 @@ export class TeamService {
         try {
             await apiClient.delete(`/v4/team_configs/${teamId}`);
             return true;
-        } catch (error: any) {
+        } catch {
             return false;
         }
     }
diff --git a/src/frontend/src/services/WebSocketService.tsx b/src/frontend/src/services/WebSocketService.tsx
index dbbf9137..cf93739d 100644
--- a/src/frontend/src/services/WebSocketService.tsx
+++ b/src/frontend/src/services/WebSocketService.tsx
@@ -7,11 +7,14 @@ class WebSocketService {
     private ws: WebSocket | null = null;
     private reconnectAttempts = 0;
     private maxReconnectAttempts = 5;
-    private reconnectDelay = 12000;
+    private reconnectDelay = 1000; // 1s base, exponential: 1s, 2s, 4s, 8s, 16s
     private listeners: Map<string, Set<(message: StreamMessage) => void>> = new Map();
     private planSubscriptions: Set<string> = new Set();
     private reconnectTimer: NodeJS.Timeout | null = null;
     private isConnecting = false;
+    private intentionalDisconnect = false;
+    private lastPlanId: string | undefined;
+    private lastProcessId: string | undefined;
 
 
     private buildSocketUrl(processId?: string, planId?: string): string {
@@ -29,7 +32,6 @@ class WebSocketService {
         const hasApiSegment = /\/api(\/|$)/i.test(base);
         const socketPath = hasApiSegment ? '/v4/socket' : '/api/v4/socket';
         const url = `${base}${socketPath}${processId ? `/${processId}` : `/${planId}`}?user_id=${userId || ''}`;
-        console.log("Constructed WebSocket URL:", url);
         return url;
     }
     connect(planId: string, processId?: string): Promise<void> {
@@ -44,6 +46,9 @@ class WebSocketService {
             }
             try {
                 this.isConnecting = true;
+                this.intentionalDisconnect = false;
+                this.lastPlanId = planId;
+                this.lastProcessId = processId;
                 const wsUrl = this.buildSocketUrl(processId, planId);
                 this.ws = new WebSocket(wsUrl);
 
@@ -71,7 +76,9 @@ class WebSocketService {
                     this.isConnecting = false;
                     this.ws = null;
                     this.emit('connection_status', { connected: false });
-                    if (this.reconnectAttempts < this.maxReconnectAttempts && event.code !== 1000) {
+                    /* P1: Only auto-reconnect if not intentional and not a clean close */
+                    if (!this.intentionalDisconnect && event.code !== 1000 &&
+                        this.reconnectAttempts < this.maxReconnectAttempts) {
                         this.attemptReconnect();
                     }
                 };
@@ -91,15 +98,32 @@ class WebSocketService {
     }
 
     disconnect(): void {
-        console.log('WebSocketService: Disconnecting WebSocket');
+        this.intentionalDisconnect = true;
         if (this.reconnectTimer) {
             clearTimeout(this.reconnectTimer);
             this.reconnectTimer = null;
         }
         this.reconnectAttempts = this.maxReconnectAttempts;
         if (this.ws) {
-            this.ws.close(1000, 'Manual disconnect');
+            const socket = this.ws;
             this.ws = null;
+
+            // Detach handlers so no stale callbacks fire during/after close
+            socket.onopen = null;
+            socket.onmessage = null;
+            socket.onerror = null;
+            socket.onclose = null;
+
+            if (socket.readyState === WebSocket.OPEN) {
+                // Normal close
+                socket.close(1000, 'Manual disconnect');
+            } else if (socket.readyState === WebSocket.CONNECTING) {
+                // Still handshaking — wait for open then close cleanly.
+                // This avoids the "WebSocket closed before connection established" warning.
+                socket.addEventListener('open', () => socket.close(1000, 'Manual disconnect'), { once: true });
+                socket.addEventListener('error', () => { /* handshake failed — nothing to close */ }, { once: true });
+            }
+            // CLOSING / CLOSED — no action needed
         }
         this.planSubscriptions.clear();
         this.isConnecting = false;
@@ -176,7 +200,6 @@ class WebSocketService {
 
         switch (message.type) {
             case WebsocketMessageType.PLAN_APPROVAL_REQUEST: {
-                console.log("Message Plan Approval Request':", message);
                 const parsedData = PlanDataService.parsePlanApprovalRequest(message.data);
                 if (parsedData) {
                     const structuredMessage: ParsedPlanApprovalRequest = {
@@ -193,11 +216,8 @@ class WebSocketService {
             }
 
             case WebsocketMessageType.AGENT_MESSAGE: {
-                console.log("Message Agent':", message);
                 if (message.data) {
-                    console.log('WebSocket message received:', message);
                     const transformed = PlanDataService.parseAgentMessage(message);
-                    console.log('Transformed AGENT_MESSAGE:', transformed);
                     this.emit(WebsocketMessageType.AGENT_MESSAGE, transformed);
 
                 }
@@ -205,20 +225,16 @@ class WebSocketService {
             }
 
             case WebsocketMessageType.AGENT_MESSAGE_STREAMING: {
-                console.log("Message streamming agent buffer:", message);
                 if (message.data) {
                     const streamedMessage = PlanDataService.parseAgentMessageStreaming(message);
-                    console.log('WebSocket AGENT_MESSAGE_STREAMING message received:', streamedMessage);
                     this.emit(WebsocketMessageType.AGENT_MESSAGE_STREAMING, streamedMessage);
                 }
                 break;
             }
 
             case WebsocketMessageType.USER_CLARIFICATION_REQUEST: {
-                console.log("Message clarification':", message);
                 if (message.data) {
                     const transformed = PlanDataService.parseUserClarificationRequest(message);
-                    console.log('WebSocket USER_CLARIFICATION_REQUEST message received:', transformed);
                     this.emit(WebsocketMessageType.USER_CLARIFICATION_REQUEST, transformed);
                 }
                 break;
@@ -226,7 +242,6 @@ class WebSocketService {
 
 
             case WebsocketMessageType.AGENT_TOOL_MESSAGE: {
-                console.log("Message agent tool':", message);
                 if (message.data) {
                     //const transformed = PlanDataService.parseUserClarificationRequest(message);
                     this.emit(WebsocketMessageType.AGENT_TOOL_MESSAGE, message);
@@ -234,16 +249,13 @@ class WebSocketService {
                 break;
             }
             case WebsocketMessageType.FINAL_RESULT_MESSAGE: {
-                console.log("Message final result':", message);
                 if (message.data) {
                     const transformed = PlanDataService.parseFinalResultMessage(message);
-                    console.log('WebSocket FINAL_RESULT_MESSAGE received:', transformed);
                     this.emit(WebsocketMessageType.FINAL_RESULT_MESSAGE, transformed);
                 }
                 break;
             }
             case WebsocketMessageType.ERROR_MESSAGE: {
-            console.log("Received ERROR_MESSAGE:", message);
             this.emit(WebsocketMessageType.ERROR_MESSAGE, message.data); // Emit the data
             break;
             }
@@ -254,13 +266,11 @@ class WebSocketService {
             case WebsocketMessageType.AGENT_STREAM_START:
             case WebsocketMessageType.AGENT_STREAM_END:
             case WebsocketMessageType.SYSTEM_MESSAGE: {
-                console.log("Message other types':", message);
                 this.emit(message.type, message);
                 break;
             }
 
             default: {
-                console.log("Message default':", message);
                 this.emit(message.type, message);
                 break;
             }
@@ -274,10 +284,21 @@ class WebSocketService {
         }
         if (this.isConnecting || this.reconnectTimer) return;
         this.reconnectAttempts++;
-        const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+        /* P1: exponential backoff — 1s, 2s, 4s, 8s, 16s (capped) */
+        const delay = Math.min(
+            this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1),
+            16000,
+        );
         this.reconnectTimer = setTimeout(() => {
             this.reconnectTimer = null;
-            this.emit('error', { error: 'Connection lost - manual reconnection required' });
+            if (this.intentionalDisconnect) return;
+            if (this.lastPlanId) {
+                this.connect(this.lastPlanId, this.lastProcessId).catch(() => {
+                    /* If reconnect fails, onclose will trigger another attempt */
+                });
+            } else {
+                this.emit('error', { error: 'Connection lost — no planId available for reconnection' });
+            }
         }, delay);
     }
 
diff --git a/src/frontend/src/state/hooks.ts b/src/frontend/src/state/hooks.ts
new file mode 100644
index 00000000..00f0fab7
--- /dev/null
+++ b/src/frontend/src/state/hooks.ts
@@ -0,0 +1,14 @@
+/**
+ * Typed Redux Hooks
+ *
+ * Pre-typed versions of useDispatch and useSelector so every component
+ * automatically gets correct RootState / AppDispatch types.
+ */
+import { useDispatch, useSelector, type TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+/** Use throughout the app instead of plain `useDispatch` */
+export const useAppDispatch: () => AppDispatch = useDispatch;
+
+/** Use throughout the app instead of plain `useSelector` */
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/frontend/src/state/index.ts b/src/frontend/src/state/index.ts
new file mode 100644
index 00000000..abba5a9f
--- /dev/null
+++ b/src/frontend/src/state/index.ts
@@ -0,0 +1,13 @@
+/**
+ * State barrel export
+ */
+export { store } from './store';
+export type { RootState, AppDispatch } from './store';
+export { useAppDispatch, useAppSelector } from './hooks';
+
+// Slice actions & selectors
+export * from './slices/planSlice';
+export * from './slices/chatSlice';
+export * from './slices/appSlice';
+export * from './slices/teamSlice';
+export * from './slices/streamingSlice';
diff --git a/src/frontend/src/state/slices/appSlice.ts b/src/frontend/src/state/slices/appSlice.ts
new file mode 100644
index 00000000..6fdebc91
--- /dev/null
+++ b/src/frontend/src/state/slices/appSlice.ts
@@ -0,0 +1,49 @@
+/**
+ * App Slice — global application state: config, theme, WebSocket connection.
+ */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+
+export interface AppState {
+    /** Has the runtime config been loaded from /config? */
+    configLoaded: boolean;
+    /** Is dark mode active? */
+    isDarkMode: boolean;
+    /** Is the global WebSocket connected? */
+    wsConnected: boolean;
+}
+
+const initialState: AppState = {
+    configLoaded: false,
+    isDarkMode: window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false,
+    wsConnected: false,
+};
+
+const appSlice = createSlice({
+    name: 'app',
+    initialState,
+    reducers: {
+        setConfigLoaded(state, action: PayloadAction<boolean>) {
+            state.configLoaded = action.payload;
+        },
+        setIsDarkMode(state, action: PayloadAction<boolean>) {
+            state.isDarkMode = action.payload;
+        },
+        setWsConnected(state, action: PayloadAction<boolean>) {
+            state.wsConnected = action.payload;
+        },
+    },
+});
+
+export const {
+    setConfigLoaded,
+    setIsDarkMode,
+    setWsConnected,
+} = appSlice.actions;
+
+/* ── Granular Selectors ───────────────────────────────────────── */
+export const selectConfigLoaded = (s: RootState) => s.app.configLoaded;
+export const selectIsDarkMode = (s: RootState) => s.app.isDarkMode;
+export const selectWsConnected = (s: RootState) => s.app.wsConnected;
+
+export default appSlice.reducer;
diff --git a/src/frontend/src/state/slices/chatSlice.ts b/src/frontend/src/state/slices/chatSlice.ts
new file mode 100644
index 00000000..9c1ad991
--- /dev/null
+++ b/src/frontend/src/state/slices/chatSlice.ts
@@ -0,0 +1,82 @@
+/**
+ * Chat Slice — user input, submission state, agent messages,
+ * and clarification handling.
+ */
+import { createSlice, createSelector, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+import { AgentMessageData, ParsedUserClarification } from '@/models';
+
+export interface ChatState {
+    /** Current chat input value */
+    input: string;
+    /** Disable the input while a submission is in flight */
+    submittingChatDisableInput: boolean;
+    /** Clarification request from the backend */
+    clarificationMessage: ParsedUserClarification | null;
+    /** All agent messages rendered in the chat panel */
+    agentMessages: AgentMessageData[];
+}
+
+const initialState: ChatState = {
+    input: '',
+    submittingChatDisableInput: true,
+    clarificationMessage: null,
+    agentMessages: [],
+};
+
+const chatSlice = createSlice({
+    name: 'chat',
+    initialState,
+    reducers: {
+        setInput(state, action: PayloadAction<string>) {
+            state.input = action.payload;
+        },
+        setSubmittingChatDisableInput(state, action: PayloadAction<boolean>) {
+            state.submittingChatDisableInput = action.payload;
+        },
+        setClarificationMessage(state, action: PayloadAction<ParsedUserClarification | null>) {
+            state.clarificationMessage = action.payload as any;
+        },
+        setAgentMessages(state, action: PayloadAction<AgentMessageData[]>) {
+            state.agentMessages = action.payload as any;
+        },
+        addAgentMessage(state, action: PayloadAction<AgentMessageData>) {
+            state.agentMessages.push(action.payload as any);
+        },
+        /** Reset chat state (used when navigating to a new plan) */
+        resetChat() {
+            return { ...initialState };
+        },
+    },
+});
+
+export const {
+    setInput,
+    setSubmittingChatDisableInput,
+    setClarificationMessage,
+    setAgentMessages,
+    addAgentMessage,
+    resetChat,
+} = chatSlice.actions;
+
+/* ── Granular Selectors ───────────────────────────────────────── */
+export const selectInput = (s: RootState) => s.chat.input;
+export const selectSubmittingChatDisable = (s: RootState) => s.chat.submittingChatDisableInput;
+export const selectClarificationMessage = (s: RootState) => s.chat.clarificationMessage;
+export const selectAgentMessages = (s: RootState) => s.chat.agentMessages;
+
+/* ── Memoized Derived Selectors ───────────────────────────────── */
+
+/** Number of agent messages (avoids re-render on array identity change when count is same) */
+export const selectAgentMessageCount = createSelector(
+    selectAgentMessages,
+    (messages) => messages.length,
+);
+
+/** Whether a clarification is currently pending */
+export const selectHasPendingClarification = createSelector(
+    selectClarificationMessage,
+    (msg) => msg !== null,
+);
+
+export default chatSlice.reducer;
diff --git a/src/frontend/src/state/slices/planSlice.ts b/src/frontend/src/state/slices/planSlice.ts
new file mode 100644
index 00000000..a10edee9
--- /dev/null
+++ b/src/frontend/src/state/slices/planSlice.ts
@@ -0,0 +1,282 @@
+/**
+ * Plan Slice — centralises all plan-level state that was previously
+ * scattered across 10+ useState calls in PlanPage.
+ */
+import { createSlice, createAsyncThunk, createSelector, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+import { ProcessedPlanData, MPlanData, PlanStatus } from '@/models';
+import { PlanDataService } from '@/services/PlanDataService';
+
+/* ── Async Thunks (Point 9 — createAsyncThunk for API‑driven state) ── */
+
+/**
+ * Fetch plan data from the API by planId.
+ * Automatically dispatches pending / fulfilled / rejected actions
+ * that are handled in extraReducers below.
+ */
+export const fetchPlanData = createAsyncThunk<
+    ProcessedPlanData | null,
+    { planId: string; useCache?: boolean },
+    { rejectValue: string }
+>(
+    'plan/fetchPlanData',
+    async ({ planId, useCache = true }, { rejectWithValue }) => {
+        try {
+            return await PlanDataService.fetchPlanData(planId, useCache);
+        } catch {
+            return rejectWithValue('Failed to load plan data');
+        }
+    },
+);
+
+export interface PlanState {
+    /** Fully processed plan (null when not loaded) */
+    planData: ProcessedPlanData | null;
+    /** Is the initial plan load in flight? */
+    loading: boolean;
+    /** Did the plan load fail? */
+    errorLoading: boolean;
+    /** Waiting for the backend to produce a plan */
+    waitingForPlan: boolean;
+    /** Plan-approval payload received from WebSocket */
+    planApprovalRequest: MPlanData | null;
+    /** Is an approval/reject API call in progress? */
+    processingApproval: boolean;
+    /** Should the approval buttons be visible? */
+    showApprovalButtons: boolean;
+    /** Show a spinner while the plan is being executed */
+    showProcessingPlanSpinner: boolean;
+    /** Should we continue with WebSocket flow? */
+    continueWithWebsocketFlow: boolean;
+    /** Has the user approved the plan (or is the plan already post-approval)? */
+    planApproved: boolean;
+    /** Trigger to reload the left-panel task list */
+    reloadLeftList: boolean;
+    /** Cancellation dialog state */
+    showCancellationDialog: boolean;
+    /** Is a cancellation API call in progress? */
+    cancellingPlan: boolean;
+    /** Loading message for spinners */
+    loadingMessage: string;
+}
+
+const initialState: PlanState = {
+    planData: null,
+    loading: true,
+    errorLoading: false,
+    waitingForPlan: true,
+    planApprovalRequest: null,
+    processingApproval: false,
+    showApprovalButtons: true,
+    showProcessingPlanSpinner: false,
+    continueWithWebsocketFlow: false,
+    planApproved: false,
+    reloadLeftList: true,
+    showCancellationDialog: false,
+    cancellingPlan: false,
+    loadingMessage: '',
+};
+
+const planSlice = createSlice({
+    name: 'plan',
+    initialState,
+    reducers: {
+        setPlanData(state, action: PayloadAction<ProcessedPlanData | null>) {
+            state.planData = action.payload as any;
+        },
+        setLoading(state, action: PayloadAction<boolean>) {
+            state.loading = action.payload;
+        },
+        setErrorLoading(state, action: PayloadAction<boolean>) {
+            state.errorLoading = action.payload;
+        },
+        setWaitingForPlan(state, action: PayloadAction<boolean>) {
+            state.waitingForPlan = action.payload;
+        },
+        setPlanApprovalRequest(state, action: PayloadAction<MPlanData | null>) {
+            state.planApprovalRequest = action.payload as any;
+        },
+        setProcessingApproval(state, action: PayloadAction<boolean>) {
+            state.processingApproval = action.payload;
+        },
+        setShowApprovalButtons(state, action: PayloadAction<boolean>) {
+            state.showApprovalButtons = action.payload;
+        },
+        setShowProcessingPlanSpinner(state, action: PayloadAction<boolean>) {
+            state.showProcessingPlanSpinner = action.payload;
+        },
+        setContinueWithWebsocketFlow(state, action: PayloadAction<boolean>) {
+            state.continueWithWebsocketFlow = action.payload;
+        },
+        setPlanApproved(state, action: PayloadAction<boolean>) {
+            state.planApproved = action.payload;
+        },
+        setReloadLeftList(state, action: PayloadAction<boolean>) {
+            state.reloadLeftList = action.payload;
+        },
+        setShowCancellationDialog(state, action: PayloadAction<boolean>) {
+            state.showCancellationDialog = action.payload;
+        },
+        setCancellingPlan(state, action: PayloadAction<boolean>) {
+            state.cancellingPlan = action.payload;
+        },
+        setLoadingMessage(state, action: PayloadAction<string>) {
+            state.loadingMessage = action.payload;
+        },
+        /** Mark plan completed and update local state in one dispatch */
+        markPlanCompleted(state) {
+            if (state.planData?.plan) {
+                (state.planData as any).plan.overall_status = PlanStatus.COMPLETED;
+            }
+        },
+
+        /* ── Compound Actions (Optimization — batch multiple state changes) ── */
+
+        /** Single dispatch after user approves a plan (replaces 4 separate dispatches) */
+        planApprovalAccepted(state) {
+            state.planApproved = true;
+            state.showApprovalButtons = false;
+            state.showProcessingPlanSpinner = true;
+            state.processingApproval = false;
+        },
+        /** Single dispatch after user rejects a plan (replaces 3 separate dispatches) */
+        planApprovalRejected(state) {
+            state.planApproved = false;
+            state.showApprovalButtons = false;
+            state.showProcessingPlanSpinner = false;
+            state.processingApproval = false;
+        },
+        /** Single dispatch when PLAN_APPROVAL_REQUEST arrives via WebSocket */
+        approvalRequestReceived(state, action: PayloadAction<MPlanData>) {
+            state.planApprovalRequest = action.payload as any;
+            state.waitingForPlan = false;
+            state.showProcessingPlanSpinner = false;
+            state.showApprovalButtons = true;
+        },
+        /** Single dispatch when FINAL_RESULT_MESSAGE arrives and plan is complete */
+        planCompletedFinal(state) {
+            state.showProcessingPlanSpinner = false;
+            if (state.planData?.plan) {
+                (state.planData as any).plan.overall_status = PlanStatus.COMPLETED;
+            }
+        },
+
+        /** Reset everything back to initial state (used when navigating to a new plan) */
+        resetPlan() {
+            return { ...initialState };
+        },
+    },
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchPlanData.pending, (state) => {
+                state.loading = true;
+                state.errorLoading = false;
+            })
+            .addCase(fetchPlanData.fulfilled, (state, action) => {
+                const planResult = action.payload;
+                state.loading = false;
+
+                if (planResult?.plan?.overall_status === PlanStatus.IN_PROGRESS) {
+                    state.showApprovalButtons = true;
+                } else {
+                    state.showApprovalButtons = false;
+                    state.waitingForPlan = false;
+                }
+
+                if (planResult?.plan?.overall_status !== PlanStatus.COMPLETED) {
+                    state.continueWithWebsocketFlow = true;
+                }
+
+                // Mark plan as already approved if it's past the approval stage
+                if (
+                    planResult?.plan?.overall_status === PlanStatus.APPROVED ||
+                    planResult?.plan?.overall_status === PlanStatus.COMPLETED
+                ) {
+                    state.planApproved = true;
+                }
+
+                if (planResult?.mplan) {
+                    state.planApprovalRequest = planResult.mplan as any;
+                }
+
+                state.planData = planResult as any;
+            })
+            .addCase(fetchPlanData.rejected, (state) => {
+                state.loading = false;
+                state.errorLoading = true;
+                state.planData = null;
+            });
+    },
+});
+
+export const {
+    setPlanData,
+    setLoading,
+    setErrorLoading,
+    setWaitingForPlan,
+    setPlanApprovalRequest,
+    setProcessingApproval,
+    setShowApprovalButtons,
+    setShowProcessingPlanSpinner,
+    setContinueWithWebsocketFlow,
+    setPlanApproved,
+    setReloadLeftList,
+    setShowCancellationDialog,
+    setCancellingPlan,
+    setLoadingMessage,
+    markPlanCompleted,
+    planApprovalAccepted,
+    planApprovalRejected,
+    approvalRequestReceived,
+    planCompletedFinal,
+    resetPlan,
+} = planSlice.actions;
+
+/* ── Granular Selectors (Point 10) ────────────────────────────────── */
+export const selectPlanData = (s: RootState) => s.plan.planData;
+export const selectPlanLoading = (s: RootState) => s.plan.loading;
+export const selectErrorLoading = (s: RootState) => s.plan.errorLoading;
+export const selectWaitingForPlan = (s: RootState) => s.plan.waitingForPlan;
+export const selectPlanApprovalRequest = (s: RootState) => s.plan.planApprovalRequest;
+export const selectProcessingApproval = (s: RootState) => s.plan.processingApproval;
+export const selectShowApprovalButtons = (s: RootState) => s.plan.showApprovalButtons;
+export const selectShowProcessingPlanSpinner = (s: RootState) => s.plan.showProcessingPlanSpinner;
+export const selectContinueWithWebsocketFlow = (s: RootState) => s.plan.continueWithWebsocketFlow;
+export const selectReloadLeftList = (s: RootState) => s.plan.reloadLeftList;
+export const selectShowCancellationDialog = (s: RootState) => s.plan.showCancellationDialog;
+export const selectCancellingPlan = (s: RootState) => s.plan.cancellingPlan;
+export const selectLoadingMessage = (s: RootState) => s.plan.loadingMessage;
+export const selectPlanStatus = (s: RootState) => s.plan.planData?.plan?.overall_status ?? null;
+export const selectPlanApproved = (s: RootState) => s.plan.planApproved;
+
+/* ── Memoized Derived Selectors (createSelector) ─────────────────── */
+
+/** Is the plan currently active (not completed / failed / canceled)? */
+export const selectIsPlanActive = createSelector(
+    selectPlanStatus,
+    (status): boolean =>
+        status !== null &&
+        status !== PlanStatus.COMPLETED &&
+        status !== PlanStatus.FAILED &&
+        status !== PlanStatus.CANCELED,
+);
+
+/** Plan team (memoized — avoids new reference on unrelated planData changes) */
+export const selectPlanTeam = createSelector(
+    selectPlanData,
+    (planData) => planData?.team ?? null,
+);
+
+/** Plan ID extracted from planData (avoids drilling into nested object each render) */
+export const selectPlanId = createSelector(
+    selectPlanData,
+    (planData) => planData?.plan?.id ?? null,
+);
+
+/** mplan from planData (avoids new object reference when planData changes) */
+export const selectMPlan = createSelector(
+    selectPlanData,
+    (planData) => planData?.mplan ?? null,
+);
+
+export default planSlice.reducer;
diff --git a/src/frontend/src/state/slices/streamingSlice.ts b/src/frontend/src/state/slices/streamingSlice.ts
new file mode 100644
index 00000000..52724f7c
--- /dev/null
+++ b/src/frontend/src/state/slices/streamingSlice.ts
@@ -0,0 +1,76 @@
+/**
+ * Streaming Slice — WebSocket streaming buffer and related flags.
+ */
+import { createSlice, createSelector, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+import { StreamingPlanUpdate } from '@/models';
+
+export interface StreamingState {
+    /** Streaming plan updates from WebSocket */
+    streamingMessages: StreamingPlanUpdate[];
+    /** Buffered streaming text (accumulated agent output) */
+    streamingMessageBuffer: string;
+    /** Should the buffering text indicator be visible? */
+    showBufferingText: boolean;
+}
+
+const initialState: StreamingState = {
+    streamingMessages: [],
+    streamingMessageBuffer: '',
+    showBufferingText: false,
+};
+
+const streamingSlice = createSlice({
+    name: 'streaming',
+    initialState,
+    reducers: {
+        setStreamingMessages(state, action: PayloadAction<StreamingPlanUpdate[]>) {
+            state.streamingMessages = action.payload as any;
+        },
+        addStreamingMessage(state, action: PayloadAction<StreamingPlanUpdate>) {
+            state.streamingMessages.push(action.payload as any);
+        },
+        setStreamingMessageBuffer(state, action: PayloadAction<string>) {
+            state.streamingMessageBuffer = action.payload;
+        },
+        appendToStreamingBuffer(state, action: PayloadAction<string>) {
+            state.streamingMessageBuffer += action.payload;
+        },
+        setShowBufferingText(state, action: PayloadAction<boolean>) {
+            state.showBufferingText = action.payload;
+        },
+        resetStreaming() {
+            return { ...initialState };
+        },
+    },
+});
+
+export const {
+    setStreamingMessages,
+    addStreamingMessage,
+    setStreamingMessageBuffer,
+    appendToStreamingBuffer,
+    setShowBufferingText,
+    resetStreaming,
+} = streamingSlice.actions;
+
+/* ── Granular Selectors ───────────────────────────────────────── */
+export const selectStreamingMessages = (s: RootState) => s.streaming.streamingMessages;
+export const selectStreamingMessageBuffer = (s: RootState) => s.streaming.streamingMessageBuffer;
+export const selectShowBufferingText = (s: RootState) => s.streaming.showBufferingText;
+
+/* ── Memoized Derived Selectors ───────────────────────────────── */
+
+/** Number of streaming messages (stable primitive — avoids child re-renders) */
+export const selectStreamingMessageCount = createSelector(
+    selectStreamingMessages,
+    (messages) => messages.length,
+);
+
+/** Whether we have buffered content ready to display */
+export const selectHasStreamingBuffer = createSelector(
+    selectStreamingMessageBuffer,
+    (buffer) => buffer.length > 0,
+);
+
+export default streamingSlice.reducer;
diff --git a/src/frontend/src/state/slices/teamSlice.ts b/src/frontend/src/state/slices/teamSlice.ts
new file mode 100644
index 00000000..d7eb2093
--- /dev/null
+++ b/src/frontend/src/state/slices/teamSlice.ts
@@ -0,0 +1,60 @@
+/**
+ * Team Slice — selected team and loading state.
+ */
+import { createSlice, createSelector, PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+import { TeamConfig } from '@/models/Team';
+
+export interface TeamState {
+    /** Currently selected team */
+    selectedTeam: TeamConfig | null;
+    /** Is the team being loaded / initialised? */
+    isLoadingTeam: boolean;
+}
+
+const initialState: TeamState = {
+    selectedTeam: null,
+    isLoadingTeam: true,
+};
+
+const teamSlice = createSlice({
+    name: 'team',
+    initialState,
+    reducers: {
+        setSelectedTeam(state, action: PayloadAction<TeamConfig | null>) {
+            state.selectedTeam = action.payload as any;
+        },
+        setIsLoadingTeam(state, action: PayloadAction<boolean>) {
+            state.isLoadingTeam = action.payload;
+        },
+        resetTeam() {
+            return { ...initialState };
+        },
+    },
+});
+
+export const {
+    setSelectedTeam,
+    setIsLoadingTeam,
+    resetTeam,
+} = teamSlice.actions;
+
+/* ── Granular Selectors ───────────────────────────────────────── */
+export const selectSelectedTeam = (s: RootState) => s.team.selectedTeam;
+export const selectIsLoadingTeam = (s: RootState) => s.team.isLoadingTeam;
+
+/* ── Memoized Derived Selectors ───────────────────────────────── */
+
+/** Team name (primitive — prevents child re-renders when other team fields change) */
+export const selectTeamName = createSelector(
+    selectSelectedTeam,
+    (team) => team?.name ?? null,
+);
+
+/** Number of agents in the selected team */
+export const selectTeamAgentCount = createSelector(
+    selectSelectedTeam,
+    (team) => team?.agents?.length ?? 0,
+);
+
+export default teamSlice.reducer;
diff --git a/src/frontend/src/state/store.ts b/src/frontend/src/state/store.ts
new file mode 100644
index 00000000..15c1e9b2
--- /dev/null
+++ b/src/frontend/src/state/store.ts
@@ -0,0 +1,42 @@
+/**
+ * Redux Store Configuration
+ *
+ * Single source of truth for all application state.
+ * Uses Redux Toolkit's configureStore with typed hooks.
+ */
+import { configureStore } from '@reduxjs/toolkit';
+import planReducer from './slices/planSlice';
+import chatReducer from './slices/chatSlice';
+import appReducer from './slices/appSlice';
+import teamReducer from './slices/teamSlice';
+import streamingReducer from './slices/streamingSlice';
+
+export const store = configureStore({
+    reducer: {
+        plan: planReducer,
+        chat: chatReducer,
+        app: appReducer,
+        team: teamReducer,
+        streaming: streamingReducer,
+    },
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware({
+            serializableCheck: {
+                // Ignore non-serializable values in specific paths
+                ignoredActions: [
+                    'plan/setPlanData',
+                    'streaming/addStreamingMessage',
+                    'chat/setMessagesContainerRef',
+                ],
+                ignoredPaths: [
+                    'plan.planData.raw_data',
+                    'streaming.streamingMessages',
+                    'chat.messagesContainerRef',
+                ],
+            },
+        }),
+    devTools: import.meta.env.DEV,
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/frontend/src/utils/index.ts b/src/frontend/src/utils/index.ts
new file mode 100644
index 00000000..2de953bd
--- /dev/null
+++ b/src/frontend/src/utils/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Utils barrel export
+ *
+ * Domain-based organization:
+ *  - utils        → date formatting helpers
+ *  - errorUtils   → user-friendly error messages & styles
+ *  - messageUtils → message formatting / truncation
+ *  - agentIconUtils → agent-to-icon mapping
+ */
+
+export { formatDate } from './utils';
+export { getErrorMessage, getErrorStyle } from './errorUtils';
+export { formatErrorMessage, extractPlainAnswer, truncate } from './messageUtils';
+export {
+    getAgentIcon,
+    clearAgentIconAssignments,
+    getAgentDisplayName,
+    getAgentDisplayNameWithSuffix,
+    getStyledAgentIcon,
+} from './agentIconUtils';
diff --git a/src/frontend/src/utils/messageUtils.ts b/src/frontend/src/utils/messageUtils.ts
new file mode 100644
index 00000000..e1614070
--- /dev/null
+++ b/src/frontend/src/utils/messageUtils.ts
@@ -0,0 +1,48 @@
+/**
+ * Message Utility Functions
+ *
+ * Extracted formatting helpers that were previously inline in PlanPage
+ * and streaming components.
+ */
+
+/**
+ * Format an error message for display in the chat panel.
+ * Adds a warning emoji prefix and indentation for multi-line errors.
+ */
+export function formatErrorMessage(content: string): string {
+    const lines = content.split('\n');
+    return lines
+        .map((line, idx) => {
+            if (idx === 0) return `\u26A0\uFE0F ${line}`;
+            if (line.trim() === '') return '';
+            return `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${line}`;
+        })
+        .join('\n');
+}
+
+/**
+ * Extract a plain-text answer from a potentially markdown-wrapped string.
+ * Strips leading/trailing whitespace and common markdown wrappers.
+ */
+export function extractPlainAnswer(raw: string): string {
+    if (!raw) return '';
+    let text = raw.trim();
+    // Strip markdown code block wrappers
+    if (text.startsWith('```') && text.endsWith('```')) {
+        text = text.slice(3, -3).trim();
+        // Remove optional language hint on first line
+        const firstNewline = text.indexOf('\n');
+        if (firstNewline > -1 && firstNewline < 20) {
+            text = text.slice(firstNewline + 1).trim();
+        }
+    }
+    return text;
+}
+
+/**
+ * Truncate a string to maxLen characters, appending "…" if truncated.
+ */
+export function truncate(str: string, maxLen: number): string {
+    if (!str || str.length <= maxLen) return str;
+    return str.slice(0, maxLen - 1) + '\u2026';
+}

From 2bb1a62c5acefd20ff115a5fee4436cbd54a4948 Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 12:46:23 +0530
Subject: [PATCH 02/10] resolve copilot comment

---
 src/frontend/Dockerfile                           |  2 +-
 src/frontend/src/components/content/HomeInput.tsx |  4 ++--
 src/frontend/src/coral/modules/Chat.tsx           |  4 +++-
 src/frontend/src/hooks/usePlanWebSocket.tsx       | 15 ++++++---------
 src/frontend/src/index.tsx                        |  4 ++--
 src/frontend/src/pages/HomePage.tsx               |  2 +-
 src/frontend/src/pages/PlanPage.tsx               |  5 +----
 7 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
index bed65fc5..a4c9a46f 100644
--- a/src/frontend/Dockerfile
+++ b/src/frontend/Dockerfile
@@ -1,7 +1,7 @@
 # Multi-stage Dockerfile for React frontend with Python backend support using UV
 
 # Stage 1: Node build environment for React
-FROM node:18-alpine AS frontend-builder
+FROM node:20-alpine AS frontend-builder
 
 WORKDIR /app/frontend
 
diff --git a/src/frontend/src/components/content/HomeInput.tsx b/src/frontend/src/components/content/HomeInput.tsx
index 4dd2a2ac..22ca247a 100644
--- a/src/frontend/src/components/content/HomeInput.tsx
+++ b/src/frontend/src/components/content/HomeInput.tsx
@@ -122,8 +122,8 @@ const HomeInput: React.FC<HomeInputProps> = ({ selectedTeam }) => {
         try {
           // errorDetail = JSON.parse(error);
           errorMessage = error?.message || errorMessage;
-        } catch {
-          // ignore parse error
+        } catch (parseError) {
+          console.error("Error parsing error response", parseError);
         }
 
         showToast(errorMessage, "error");
diff --git a/src/frontend/src/coral/modules/Chat.tsx b/src/frontend/src/coral/modules/Chat.tsx
index d7516f96..7052cda9 100644
--- a/src/frontend/src/coral/modules/Chat.tsx
+++ b/src/frontend/src/coral/modules/Chat.tsx
@@ -62,8 +62,9 @@ const Chat: React.FC<ChatProps> = ({
         }
         // const chatMessages = await chatService.getUserHistory(userId);
         // setMessages(chatMessages);
-      } catch {
+      } catch (error) {
         // Failed to load history — silent fail
+        console.log("Failed to load chat history for user", userId);
       }
     };
     loadHistory();
@@ -170,6 +171,7 @@ const Chat: React.FC<ChatProps> = ({
       setMessages([]);
     } catch {
       // clear history failed — silent
+      console.log("Failed to clear chat history for user", userId);
     }
   };
 
diff --git a/src/frontend/src/hooks/usePlanWebSocket.tsx b/src/frontend/src/hooks/usePlanWebSocket.tsx
index 371846b3..43bb5b9f 100644
--- a/src/frontend/src/hooks/usePlanWebSocket.tsx
+++ b/src/frontend/src/hooks/usePlanWebSocket.tsx
@@ -10,13 +10,8 @@ import webSocketService from '@/services/WebSocketService';
 import { PlanDataService } from '@/services/PlanDataService';
 import { useAppDispatch, useAppSelector } from '@/state/hooks';
 import {
-    setWaitingForPlan,
     setShowProcessingPlanSpinner,
-    setPlanApprovalRequest,
-    setShowApprovalButtons,
-    setContinueWithWebsocketFlow,
     setReloadLeftList,
-    markPlanCompleted,
     selectPlanData,
     selectContinueWithWebsocketFlow,
     selectPlanApproved,
@@ -27,7 +22,6 @@ import {
     setSubmittingChatDisableInput,
     setClarificationMessage,
     addAgentMessage,
-    selectAgentMessages,
 } from '@/state/slices/chatSlice';
 import {
     appendToStreamingBuffer,
@@ -46,6 +40,7 @@ import {
     PlanStatus,
     ParsedUserClarification,
     StreamMessage,
+    ProcessedPlanData,
 } from '@/models';
 import { APIService } from '@/api/apiService';
 
@@ -65,11 +60,13 @@ interface UsePlanWebSocketProps {
  */
 function persistAgentMessage(
     agentMessageData: AgentMessageData,
-    planData: any,
+    planData: ProcessedPlanData | null,
     dispatch: ReturnType<typeof useAppDispatch>,
     isFinal = false,
     streamingMessage = '',
 ) {
+    if (!planData?.plan) return;
+
     const agentMessageResponse = PlanDataService.createAgentMessageResponse(
         agentMessageData,
         planData,
@@ -274,8 +271,8 @@ export function usePlanWebSocket({
         const connectWebSocket = async () => {
             try {
                 await webSocketService.connect(planId);
-            } catch {
-                // Continue without WebSocket — the app should still work
+            } catch (error) {
+                console.log('WebSocket connection failed, continuing without real-time updates', error);
             }
         };
         connectWebSocket();
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
index 2f07a049..69ff686f 100644
--- a/src/frontend/src/index.tsx
+++ b/src/frontend/src/index.tsx
@@ -40,8 +40,8 @@ const AppWrapper = () => {
         window.userInfo = defaultUserInfo;
         setUserInfoGlobal(defaultUserInfo);
         await apiService.sendUserBrowserLanguage();
-      } catch {
-        // Config endpoint not available — using defaults
+      } catch (error) {
+          console.info("frontend config did not load from python", error);
       } finally {
         setIsConfigLoaded(true);
         setIsUserInfoLoaded(true);
diff --git a/src/frontend/src/pages/HomePage.tsx b/src/frontend/src/pages/HomePage.tsx
index 42d72393..e7160206 100644
--- a/src/frontend/src/pages/HomePage.tsx
+++ b/src/frontend/src/pages/HomePage.tsx
@@ -129,7 +129,7 @@ const HomePage: React.FC = () => {
                 showToast(`Team uploaded successfully! ${defaultTeam.name} remains your default team.`, 'success');
             }
         } catch {
-            // Silently handle — toast was already shown for upload success
+            console.error('Team upload failed');
         }
     }, [dispatch, showToast]);
 
diff --git a/src/frontend/src/pages/PlanPage.tsx b/src/frontend/src/pages/PlanPage.tsx
index ffd2580e..7e9e1f21 100644
--- a/src/frontend/src/pages/PlanPage.tsx
+++ b/src/frontend/src/pages/PlanPage.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect} from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Spinner, Text } from '@fluentui/react-components';
 
@@ -11,8 +11,6 @@ import webSocketService from '../services/WebSocketService';
 import {
     AgentMessageData,
     AgentMessageType,
-    PlanStatus,
-    PlanApprovalRequest,
 } from '../models';
 
 /* ── Redux ───────────────────────────────────────────────────── */
@@ -37,7 +35,6 @@ import {
     setCancellingPlan,
     setLoadingMessage,
     setErrorLoading,
-    setPlanData,
     planApprovalAccepted,
     planApprovalRejected,
 } from '../state/slices/planSlice';

From 85a1ef4d145b8cfd8b30b6d85d3ce7804ebcda6e Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 13:33:18 +0530
Subject: [PATCH 03/10] fix docker file error

---
 src/frontend/Dockerfile | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
index a4c9a46f..03373a76 100644
--- a/src/frontend/Dockerfile
+++ b/src/frontend/Dockerfile
@@ -8,14 +8,12 @@ WORKDIR /app/frontend
 # Copy package files first for better caching
 COPY package*.json ./
 
-# Install dependencies
-RUN npm ci --silent
+# Install all dependencies (including devDependencies needed for tsc/vite build)
+RUN npm ci
 
 # Copy source files
 COPY . ./
 
-RUN rm -rf node_modules && npm ci && npm rebuild esbuild --force
-
 # Build the React app
 RUN npm run build
 

From 6039776b9874edb858c1a2afad7720e1d770fc8d Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 13:44:30 +0530
Subject: [PATCH 04/10] revert fix for docker file error

---
 src/frontend/Dockerfile | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
index 03373a76..bed65fc5 100644
--- a/src/frontend/Dockerfile
+++ b/src/frontend/Dockerfile
@@ -1,19 +1,21 @@
 # Multi-stage Dockerfile for React frontend with Python backend support using UV
 
 # Stage 1: Node build environment for React
-FROM node:20-alpine AS frontend-builder
+FROM node:18-alpine AS frontend-builder
 
 WORKDIR /app/frontend
 
 # Copy package files first for better caching
 COPY package*.json ./
 
-# Install all dependencies (including devDependencies needed for tsc/vite build)
-RUN npm ci
+# Install dependencies
+RUN npm ci --silent
 
 # Copy source files
 COPY . ./
 
+RUN rm -rf node_modules && npm ci && npm rebuild esbuild --force
+
 # Build the React app
 RUN npm run build
 

From f2d7e0e59e7e2e7d650af463a1928161109c368e Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 13:52:56 +0530
Subject: [PATCH 05/10] fix for docker file error in pipeline

---
 src/frontend/Dockerfile | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
index bed65fc5..1604bac2 100644
--- a/src/frontend/Dockerfile
+++ b/src/frontend/Dockerfile
@@ -1,23 +1,19 @@
 # Multi-stage Dockerfile for React frontend with Python backend support using UV
 
 # Stage 1: Node build environment for React
-FROM node:18-alpine AS frontend-builder
+FROM node:20-alpine AS frontend-builder
 
 WORKDIR /app/frontend
 
 # Copy package files first for better caching
 COPY package*.json ./
 
-# Install dependencies
-RUN npm ci --silent
-
-# Copy source files
+# Copy all source files
 COPY . ./
 
-RUN rm -rf node_modules && npm ci && npm rebuild esbuild --force
-
-# Build the React app
-RUN npm run build
+# Install dependencies and build in a single layer to avoid BuildKit overlay issues
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci && npm run build
 
 # Stage 2: Python build environment with UV
 FROM python:3.11-slim-bullseye AS python-builder

From d691a46d42ad6b5c669066fa5f8cf5d3ac8e20ae Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 14:12:17 +0530
Subject: [PATCH 06/10] revert fix for docker file error 1

---
 src/frontend/Dockerfile | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
index 1604bac2..bed65fc5 100644
--- a/src/frontend/Dockerfile
+++ b/src/frontend/Dockerfile
@@ -1,19 +1,23 @@
 # Multi-stage Dockerfile for React frontend with Python backend support using UV
 
 # Stage 1: Node build environment for React
-FROM node:20-alpine AS frontend-builder
+FROM node:18-alpine AS frontend-builder
 
 WORKDIR /app/frontend
 
 # Copy package files first for better caching
 COPY package*.json ./
 
-# Copy all source files
+# Install dependencies
+RUN npm ci --silent
+
+# Copy source files
 COPY . ./
 
-# Install dependencies and build in a single layer to avoid BuildKit overlay issues
-RUN --mount=type=cache,target=/root/.npm \
-    npm ci && npm run build
+RUN rm -rf node_modules && npm ci && npm rebuild esbuild --force
+
+# Build the React app
+RUN npm run build
 
 # Stage 2: Python build environment with UV
 FROM python:3.11-slim-bullseye AS python-builder

From 8dc16033e70fec7e4e43d86e021f6ffdc010727b Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 14:13:59 +0530
Subject: [PATCH 07/10] update package.json file with redux toolkit

---
 src/frontend/package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/package.json b/src/frontend/package.json
index fd512e0b..7fc41962 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -7,6 +7,7 @@
     "@fluentui/merge-styles": "^8.6.14",
     "@fluentui/react-components": "^9.64.0",
     "@fluentui/react-icons": "^2.0.300",
+    "@reduxjs/toolkit": "^2.11.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -19,6 +20,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^7.12.0",
     "rehype-prism": "^2.3.3",
     "remark-gfm": "^4.0.1",
@@ -68,4 +70,4 @@
     "vite": "^7.1.2",
     "vitest": "^3.2.4"
   }
-}
\ No newline at end of file
+}

From c3962e44cfd9325b3c5eb2f283a1f14f1afdbef2 Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 14:27:51 +0530
Subject: [PATCH 08/10] update package-lock.json file

---
 src/frontend/package-lock.json | 127 ++++++++++++++++++++++++++++++++-
 1 file changed, 126 insertions(+), 1 deletion(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index cec7e962..507c41a2 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "@fluentui/merge-styles": "^8.6.14",
         "@fluentui/react-components": "^9.64.0",
         "@fluentui/react-icons": "^2.0.300",
+        "@reduxjs/toolkit": "^2.11.2",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
@@ -23,6 +24,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-markdown": "^10.1.0",
+        "react-redux": "^9.2.0",
         "react-router-dom": "^7.12.0",
         "rehype-prism": "^2.3.3",
         "remark-gfm": "^4.0.1",
@@ -99,6 +101,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -466,6 +469,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -489,6 +493,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1036,6 +1041,7 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
       "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.3",
         "@floating-ui/utils": "^0.2.10"
@@ -2773,6 +2779,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -3073,6 +3105,18 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
@@ -3087,6 +3131,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3308,6 +3353,7 @@
       "integrity": "sha512-yCAeZl7a0DxgNVteXFHt9+uyFbqXGy/ShC4BlcHkoE0AfGXYv/BUiplV72DjMYXHDBXFjhvr6DD1NiRVfB4j8g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3323,6 +3369,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz",
       "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3333,6 +3380,7 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -3350,6 +3398,12 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -3391,6 +3445,7 @@
       "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
         "@typescript-eslint/types": "5.62.0",
@@ -3679,6 +3734,7 @@
       "integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/utils": "3.2.4",
         "fflate": "^0.8.2",
@@ -3716,6 +3772,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4068,6 +4125,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001737",
         "electron-to-chromium": "^1.5.211",
@@ -4653,7 +4711,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-autoplay": {
       "version": "8.6.0",
@@ -4937,6 +4996,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -5916,6 +5976,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
+      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -6552,6 +6622,7 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -8237,6 +8308,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8249,6 +8321,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8299,6 +8372,30 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -8376,6 +8473,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -8518,6 +8631,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -9302,6 +9421,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9567,6 +9687,7 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9606,6 +9727,7 @@
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
       "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/unist": "^3.0.0",
         "bail": "^2.0.0",
@@ -9803,6 +9925,7 @@
       "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -9919,6 +10042,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9932,6 +10056,7 @@
       "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/chai": "^5.2.2",
         "@vitest/expect": "3.2.4",

From 43ef8ddebc24742adf2f36d4524127e7db588543 Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 15:07:53 +0530
Subject: [PATCH 09/10] Resolve copilot comments

---
 src/frontend/src/pages/HomePage.tsx            | 1 -
 src/frontend/src/services/WebSocketService.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/HomePage.tsx b/src/frontend/src/pages/HomePage.tsx
index e7160206..bd743708 100644
--- a/src/frontend/src/pages/HomePage.tsx
+++ b/src/frontend/src/pages/HomePage.tsx
@@ -111,7 +111,6 @@ const HomePage: React.FC = () => {
                 } finally {
                     dispatch(setIsLoadingTeam(false));
                 }
-                showToast(`${team.name} team has been selected with ${team.agents.length} agents`, 'success');
             } else {
                 showToast('No team is currently selected', 'info');
             }
diff --git a/src/frontend/src/services/WebSocketService.tsx b/src/frontend/src/services/WebSocketService.tsx
index cf93739d..7fff80a5 100644
--- a/src/frontend/src/services/WebSocketService.tsx
+++ b/src/frontend/src/services/WebSocketService.tsx
@@ -10,7 +10,7 @@ class WebSocketService {
     private reconnectDelay = 1000; // 1s base, exponential: 1s, 2s, 4s, 8s, 16s
     private listeners: Map<string, Set<(message: StreamMessage) => void>> = new Map();
     private planSubscriptions: Set<string> = new Set();
-    private reconnectTimer: NodeJS.Timeout | null = null;
+    private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
     private isConnecting = false;
     private intentionalDisconnect = false;
     private lastPlanId: string | undefined;

From 65620e03f8471a0847d7be8465c101a8af889a7a Mon Sep 17 00:00:00 2001
From: "Niraj Chaudhari (Persistent Systems Inc)" <v-nirajcha@microsoft.com>
Date: Wed, 11 Mar 2026 16:21:33 +0530
Subject: [PATCH 10/10] update console.log content

---
 src/frontend/src/coral/modules/Chat.tsx     | 6 +++---
 src/frontend/src/hooks/usePlanWebSocket.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/coral/modules/Chat.tsx b/src/frontend/src/coral/modules/Chat.tsx
index 7052cda9..c5617b8d 100644
--- a/src/frontend/src/coral/modules/Chat.tsx
+++ b/src/frontend/src/coral/modules/Chat.tsx
@@ -62,9 +62,9 @@ const Chat: React.FC<ChatProps> = ({
         }
         // const chatMessages = await chatService.getUserHistory(userId);
         // setMessages(chatMessages);
-      } catch (error) {
+      } catch {
         // Failed to load history — silent fail
-        console.log("Failed to load chat history for user", userId);
+        console.log("Failed to load chat history for user");
       }
     };
     loadHistory();
@@ -171,7 +171,7 @@ const Chat: React.FC<ChatProps> = ({
       setMessages([]);
     } catch {
       // clear history failed — silent
-      console.log("Failed to clear chat history for user", userId);
+      console.log("Failed to clear chat history for user");
     }
   };
 
diff --git a/src/frontend/src/hooks/usePlanWebSocket.tsx b/src/frontend/src/hooks/usePlanWebSocket.tsx
index 43bb5b9f..3db2f3f7 100644
--- a/src/frontend/src/hooks/usePlanWebSocket.tsx
+++ b/src/frontend/src/hooks/usePlanWebSocket.tsx
@@ -271,8 +271,8 @@ export function usePlanWebSocket({
         const connectWebSocket = async () => {
             try {
                 await webSocketService.connect(planId);
-            } catch (error) {
-                console.log('WebSocket connection failed, continuing without real-time updates', error);
+            } catch {
+                console.log('WebSocket connection failed, continuing without real-time updates');
             }
         };
         connectWebSocket();