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", 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 +} 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 => { - 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 = { - ...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: (url: string, config?: { params?: Record }): Promise => { + syncBaseUrl(); + return httpClient.get(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 = { - 'Content-Type': 'application/json', - }; + post: (url: string, body?: unknown): Promise => { + syncBaseUrl(); + return httpClient.post(url, body); + }, - const options: RequestInit = { - method, - headers, - body: body ? JSON.stringify(body) : undefined, - }; + put: (url: string, body?: unknown): Promise => { + syncBaseUrl(); + return httpClient.put(url, body); + }, - try { - const apiUrl = getApiUrl(); - const response = await fetch(`${apiUrl}${url}`, options); + delete: (url: string): Promise => { + syncBaseUrl(); + return httpClient.del(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: (url: string, formData: FormData): Promise => { + syncBaseUrl(); + return httpClient.upload(url, formData); + }, -// Authenticated requests (with token) and login (without token) -export const apiClient = { - get: (url: string, config?: { params?: Record }) => { - const finalUrl = buildUrl(url, config?.params); - return fetchWithAuth(finalUrl, 'GET'); + login: (url: string, body?: unknown): Promise => { + syncBaseUrl(); + return httpClient.postWithoutAuth(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 { - 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( + fn: () => Promise, + maxRetries = 3, + baseDelay = 1000 +): Promise { + 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 { + data: T; + timestamp: number; + expiresAt: number; +} + +export class RequestCache { + private cache = new Map>(); + private pendingRequests = new Map>(); + + /** Get cached data or fetch it, deduplicating concurrent identical requests */ + async get( + key: string, + fetcher: () => Promise, + ttlMs = 30000 + ): Promise { + // 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; + } + + 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 void>( + fn: T, + delayMs: number +): (...args: Parameters) => void { + let timer: ReturnType; + return (...args: Parameters) => { + clearTimeout(timer); + timer = setTimeout(() => fn(...args), delayMs); + }; +} + +/** + * Throttle utility β€” ensures `fn` is called at most once per `limitMs`. + */ +export function throttle void>( + fn: T, + limitMs: number +): (...args: Parameters) => void { + let lastCall = 0; + return (...args: Parameters) => { + 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 { 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): Record { - 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; + +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 { + 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 } = {} + ): Promise { + 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( + path: string, + config?: { params?: Record; headers?: Record } + ): Promise { + 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( + path: string, + body?: unknown, + config?: { headers?: Record } + ): Promise { + 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( + path: string, + body?: unknown, + config?: { headers?: Record } + ): Promise { + 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(path: string): Promise { + 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(path: string, formData: FormData): Promise { + // 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(path: string, body?: unknown): Promise { + 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ placeholder="Search teams..." value={searchQuery} onChange={(e: React.ChangeEvent, data: InputOnChangeData) => { - console.log('Search changed:', data.value); setSearchQuery(data.value || ''); }} contentBefore={} diff --git a/src/frontend/src/components/content/HomeInput.tsx b/src/frontend/src/components/content/HomeInput.tsx index c4684918..22ca247a 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 = ({ selectedTeam }) => { input.trim(), selectedTeam?.team_id ); - console.log("Plan created:", response); setInput(""); if (textareaRef.current) { @@ -117,7 +116,6 @@ const HomeInput: React.FC = ({ 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 @@ -125,7 +123,7 @@ const HomeInput: React.FC = ({ selectedTeam }) => { // errorDetail = JSON.parse(error); errorMessage = error?.message || errorMessage; } catch (parseError) { - console.error("Error parsing error detail:", parseError); + console.error("Error parsing error response", parseError); } showToast(errorMessage, "error"); @@ -290,4 +288,6 @@ const HomeInput: React.FC = ({ 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 = ({ ); }; -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 = ({ ); } -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 = ({ 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 = ({ 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 = ({ 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 = ({ ); }; -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 = ({ ); }; -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 = ({ ); }; -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 = ({ ); }; -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..c5617b8d 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 = ({ } // 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 + console.log("Failed to load chat history for user"); } }; loadHistory(); @@ -102,8 +103,8 @@ const Chat: React.FC = ({ }; 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 +151,7 @@ const Chat: React.FC = ({ // 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 +169,9 @@ const Chat: React.FC = ({ // await chatService.clearChatHistory(userId); } setMessages([]); - } catch (err) { - console.log("Failed to clear chat history:", err); + } catch { + // clear history failed β€” silent + console.log("Failed to clear chat history for user"); } }; @@ -195,7 +196,7 @@ const Chat: React.FC = ({ icon={} />