Chore: Frontend Quality Refactor & Test Suite DRY-ing (#8)

* chore(docs): update devops-agent.md to include CI/CD workflow review and deployment roadmap

* chore(fe): replace window with globalThis for better compatibility

* chore(docker): update production image to use specific SHA for consistency

* chore(tests): improve credential verification in BFF integration tests to avoid dead stores variables   requestMadeWithCredentials

* feat(agent): add git-worktree-manager skill

Adds a new agent skill for managing git worktrees safely. This enables parallel development workflows by allowing the agent to create, manage, and remove sibling worktrees for isolated tasks.

* refactor(frontend): use Readonly type for AuthProvider props

Updates the AuthProvider component to use Readonly<AuthProviderProps>. This enforces immutability for the component props, aligning with React best practices and improving type safety.

Author: VictorHueni

.gemini/skills/git-worktree-manager/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: git-worktree-manager
+description: Manages the lifecycle of Git worktrees for parallel development tasks. Handles creation, safe removal, and branch management to keep the main working directory clean.
+---
+
+# Git Worktree Manager Skill
+
+This skill enables the agent to safely create, manage, and destroy Git worktrees. This allows for parallel development (e.g., fixing a bug while in the middle of a feature) without disrupting the main working directory.
+
+## 1. Directory Strategy
+To prevent path resolution issues and nesting conflicts, all worktrees MUST be created as **siblings** to the current project root.
+
+*   **Current Root**: `../project-name`
+*   **Worktree Root**: `../project-name-<feature>`
+
+**Example:**
+If working in `P:/dev/my-app`, a worktree for a "auth-fix" should be at `P:/dev/my-app-auth-fix`.
+
+## 2. Worktree Protocols
+
+### <PROTOCOL:WORKTREE_CREATE>
+**Trigger**: When the user needs to switch contexts (e.g., "fix this bug" while changes are unstaged) or explicitly requests a clean environment.
+
+1.  **Analyze Request**: Determine the target branch name and the purpose.
+2.  **Determine Path**: Construct the sibling path `../<current_folder_name>-<short-description>`.
+3.  **Execute Creation**:
+    *   *New Branch*: `git worktree add ../<path> -b <branch-name>`
+    *   *Existing Branch*: `git worktree add ../<path> <branch-name>`
+4.  **Confirm**: Report the location of the new worktree and remind the user that dependencies (like `node_modules`) may need to be re-installed there.
+
+### <PROTOCOL:WORKTREE_REMOVE>
+**Trigger**: When the task in the worktree is complete and changes are committed.
+
+1.  **Verify State**: Ensure changes in the worktree are committed or stashable.
+2.  **Execute Removal**:
+    *   Attempt standard removal: `git worktree remove <path>`
+    *   *Handle Untracked Files*: If the command fails because of untracked files (e.g., `node_modules`, `target/`), and the work is definitely saved/committed, use force: `git worktree remove --force <path>`.
+3.  **Prune**: Run `git worktree prune` to clean up references.
+
+## 3. Operational Guidelines
+
+*   **Dependency Awareness**: A new worktree is a fresh checkout. It does **not** share `node_modules`, `target`, or `venv` folders. You MUST check for their existence and run install commands (`npm install`, `./mvnw compile`) before running tests in the new worktree.
+*   **Path Context**: When operating in a worktree, always use absolute paths or relative paths carefully calculated from the worktree root.
+*   **Shell Context**: When running shell commands, explicitly `cd` into the worktree directory: `cd ../<worktree-path>; <command>`.

backend/Dockerfile

@@ -58,7 +58,7 @@ ENTRYPOINT ["java","-jar","/app/app.jar"]
 # This drastically reduces CVE count and eliminates the shell/package manager.
 # This is the default stage when building without --target flag
 # Usage locally: docker build -t demo-backend:latest .
-FROM gcr.io/distroless/java25-debian13:latest AS production
+FROM gcr.io/distroless/java25-debian13@sha256:cc3bb44755599d4c25c26c43b05761eeb1da2e779172cee258c2202ca071abfa AS production
 
 # --- SECURITY & UTILITIES (AS NON-ROOT BY DEFAULT) ---
 # NOTE: No need to install wget or create a user. Distroless runs as 'nonroot'.

frontend/e2e/bff-integration.spec.ts

@@ -399,7 +399,6 @@ test.describe("BFF Integration - Credentials Configuration", () => {
             },
         ]);
 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         let requestMadeWithCredentials = false;
 
         await page.route("**/api/v1/greetings**", (route) => {
@@ -423,10 +422,8 @@ test.describe("BFF Integration - Credentials Configuration", () => {
         await page.goto("/");
         await page.waitForTimeout(1000);
 
-        // Note: Playwright route interception may not show cookies in all cases,
-        // but the application is configured with credentials: "include"
-        // This is verified in unit tests (config.test.ts)
-        expect(true).toBe(true); // Placeholder assertion - see config.test.ts for full verification
+        // Verify that the request actually included the credentials
+        expect(requestMadeWithCredentials).toBe(true);
     });
 });
 

frontend/src/App.tsx

@@ -96,7 +96,7 @@ export default function App() {
 
     const handleDelete = useCallback(
         async (id: string) => {
-            if (window.confirm("Are you sure you want to delete this greeting?")) {
+            if (globalThis.confirm("Are you sure you want to delete this greeting?")) {
                 const success = await deleteGreeting(id);
                 if (success) {
                     await refreshList();

frontend/src/api/config.test.ts

@@ -183,7 +183,7 @@ describe("api/config initApiClient", () => {
 
     it("dispatches session-expired event on 401 response", async () => {
         const eventListener = vi.fn();
-        window.addEventListener("auth:session-expired", eventListener);
+        globalThis.addEventListener("auth:session-expired", eventListener);
 
         const fetchStub = vi.fn(
             async () =>
@@ -203,6 +203,6 @@ describe("api/config initApiClient", () => {
 
         expect(eventListener).toHaveBeenCalled();
 
-        window.removeEventListener("auth:session-expired", eventListener);
+        globalThis.removeEventListener("auth:session-expired", eventListener);
     });
 });

frontend/src/api/config.ts

@@ -37,7 +37,10 @@ export function getApiBasePath(): string {
 
     // Ensure absolute URL for environments where `Request` requires it (e.g., Vitest/node).
     // In the browser, same-origin absolute URLs work with Vite proxy and production nginx.
-    const origin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+    const origin =
+        typeof globalThis !== "undefined" && globalThis.location
+            ? globalThis.location.origin
+            : "http://localhost";
     return new URL("/api", origin).toString();
 }
 
@@ -108,8 +111,12 @@ export function initApiClient(options: InitApiClientOptions = {}): void {
     });
 
     client.interceptors.response.use((response) => {
-        if (response.status === 401 && typeof window !== "undefined") {
-            window.dispatchEvent(new CustomEvent("auth:session-expired"));
+        if (
+            response.status === 401 &&
+            typeof globalThis !== "undefined" &&
+            globalThis.dispatchEvent
+        ) {
+            globalThis.dispatchEvent(new CustomEvent("auth:session-expired"));
         }
         return response;
     });

frontend/src/features/auth/AuthProvider.test.tsx

@@ -130,7 +130,7 @@ describe("AuthProvider", () => {
 
         await waitFor(() => expect(screen.getByTestId("status").textContent).toBe("authenticated"));
 
-        window.dispatchEvent(new CustomEvent("auth:session-expired"));
+        globalThis.dispatchEvent(new CustomEvent("auth:session-expired"));
 
         await waitFor(() => expect(screen.getByTestId("status").textContent).toBe("anonymous"));
         expect(screen.getByTestId("username").textContent).toBe("");
@@ -139,7 +139,7 @@ describe("AuthProvider", () => {
 
 describe("AuthProvider logout", () => {
     const originalFetch = global.fetch;
-    const originalLocation = window.location;
+    const originalLocation = globalThis.location;
     let cookieValue = "";
 
     beforeEach(() => {
@@ -154,7 +154,7 @@ describe("AuthProvider logout", () => {
             configurable: true,
         });
         // Mock window.location for redirect testing
-        Object.defineProperty(window, "location", {
+        Object.defineProperty(globalThis, "location", {
             value: {
                 href: "http://localhost:3000",
                 origin: "http://localhost:3000",
@@ -167,7 +167,7 @@ describe("AuthProvider logout", () => {
 
     afterEach(() => {
         global.fetch = originalFetch;
-        Object.defineProperty(window, "location", {
+        Object.defineProperty(globalThis, "location", {
             value: originalLocation,
             writable: true,
         });
@@ -292,7 +292,7 @@ describe("AuthProvider logout", () => {
         await user.click(screen.getByTestId("logout-btn"));
 
         await waitFor(() => {
-            expect(window.location.href).toBe(keycloakLogoutUrl);
+            expect(globalThis.location.href).toBe(keycloakLogoutUrl);
         });
     });
 
@@ -320,7 +320,7 @@ describe("AuthProvider logout", () => {
         await user.click(screen.getByTestId("logout-btn"));
 
         await waitFor(() => {
-            expect(window.location.reload).toHaveBeenCalled();
+            expect(globalThis.location.reload).toHaveBeenCalled();
         });
     });
 
@@ -348,7 +348,7 @@ describe("AuthProvider logout", () => {
 
         await waitFor(() => {
             expect(consoleErrorSpy).toHaveBeenCalledWith("Logout failed:", expect.any(Error));
-            expect(window.location.href).toBe("/");
+            expect(globalThis.location.href).toBe("/");
         });
 
         consoleErrorSpy.mockRestore();

frontend/src/features/auth/AuthProvider.tsx

@@ -7,7 +7,7 @@ import { AuthContext } from "./hooks";
 import type { AuthContextValue, AuthProviderProps, AuthStatus } from "./types";
 import { resolveAuthMode, resolveLoginUri } from "./utils";
 
-export function AuthProvider({ children, mode, mockUser }: AuthProviderProps) {
+export function AuthProvider({ children, mode, mockUser }: Readonly<AuthProviderProps>) {
     const resolvedMode = resolveAuthMode(mode);
 
     const [status, setStatus] = useState<AuthStatus>("loading");
@@ -71,7 +71,7 @@ export function AuthProvider({ children, mode, mockUser }: AuthProviderProps) {
     }, [load]);
 
     useEffect(() => {
-        if (resolvedMode === "mock" || typeof window === "undefined") {
+        if (resolvedMode === "mock" || typeof globalThis === "undefined") {
             return;
         }
 
@@ -81,9 +81,9 @@ export function AuthProvider({ children, mode, mockUser }: AuthProviderProps) {
             setError(null);
         };
 
-        window.addEventListener("auth:session-expired", onSessionExpired);
+        globalThis.addEventListener("auth:session-expired", onSessionExpired);
         return () => {
-            window.removeEventListener("auth:session-expired", onSessionExpired);
+            globalThis.removeEventListener("auth:session-expired", onSessionExpired);
         };
     }, [resolvedMode]);
 
@@ -107,7 +107,7 @@ export function AuthProvider({ children, mode, mockUser }: AuthProviderProps) {
         }
 
         const loginUri = await resolveLoginUri();
-        window.location.assign(loginUri);
+        globalThis.location.assign(loginUri);
     }, [mockUser, resolvedMode, user]);
 
     const logout = useCallback(async () => {
@@ -127,7 +127,7 @@ export function AuthProvider({ children, mode, mockUser }: AuthProviderProps) {
                 ?.substring("XSRF-TOKEN=".length);
 
             const headers: Record<string, string> = {
-                "X-POST-LOGOUT-SUCCESS-URI": window.location.origin,
+                "X-POST-LOGOUT-SUCCESS-URI": globalThis.location.origin,
             };
 
             if (csrfToken) {
@@ -142,14 +142,14 @@ export function AuthProvider({ children, mode, mockUser }: AuthProviderProps) {
 
             const logoutUri = response.headers.get("Location");
             if (logoutUri) {
-                window.location.href = logoutUri;
+                globalThis.location.href = logoutUri;
             } else {
-                window.location.reload();
+                globalThis.location.reload();
             }
         } catch (error) {
             // eslint-disable-next-line no-console
             console.error("Logout failed:", error);
-            window.location.href = "/";
+            globalThis.location.href = "/";
         }
     }, [resolvedMode]);
 

website/docs/agent/prompts/devops-agent.md

@@ -21,8 +21,18 @@ Analyze
 - `*.config` in the frontend 
 - all nginx files (incl for the ./webiste) are configured correctly 
 - `template-realm.json` for Keycloak setup and user creation
+- all `.github/workflows/*.yml` for CI/CD pipelines
 
 We need to make sure every variable is injected properly and all ports, hostnames are set up properly.
+I need a clear roadmap to move from local development to a infomaniak jelastic deployment. What do i need to implement ? configure etc... to be able to create then a complete CI/CD pipeline to deploy the app to jelastic from github actions.
+
+# Output Format
+Please provide the review in this Markdown format:
+1.  **Jelastic Compatibility Risks:** (e.g., Hardcoded memory settings, localhost usage).
+2.  **Dockerfile Optimization:** (e.g Layer caching, distroless suggestions).
+3.  **Network & SSL Config:** (e.gProxy settings for OAuth2).
+4.  **Ready-to-Deploy Fixes:** specific code blocks to update `compose.yaml` or `Dockerfile`.
+5.  **Manual tests procedure on local docker-compose:** (e.g curl commands to verify service connectivity).
 
 ## 1. Jelastic & Docker Compatibility (Critical)
 * **Base Images:** Verify we are using valid, public Docker Hub images for Java 25 (e.g., `eclipse-temurin:25` or `openjdk:25-slim`). Jelastic requires the image to be pullable from a registry if not built locally.
@@ -51,11 +61,3 @@ We need to make sure every variable is injected properly and all ports, hostname
 ## 4. Compose to Jelastic Translation
 * **Volume Mounts:** Check for local volume binds (e.g., `./config:/app/config`). These will break on Jelastic unless you are using specific "Add-on" storage configurations. Suggest converting these to Environment Variables or ConfigMaps where possible.
 * **Restart Policy:** Ensure `restart: always` or `unless-stopped` is defined.
-
-# Output Format
-Please provide the review in this Markdown format:
-1.  **Jelastic Compatibility Risks:** (e.g., Hardcoded memory settings, localhost usage).
-2.  **Dockerfile Optimization:** (e.g Layer caching, distroless suggestions).
-3.  **Network & SSL Config:** (e.gProxy settings for OAuth2).
-4.  **Ready-to-Deploy Fixes:** specific code blocks to update `compose.yaml` or `Dockerfile`.
-5.  **Manual tests procedure on local docker-compose:** (e.g curl commands to verify service connectivity).

website/docs/agent/prompts/fe-agent.md

@@ -1,5 +1,5 @@
 # Role & Objective
-Act as a Senior Frontend Security Architect specialized in React 19, TypeScript 5.9, and OpenAPI-driven development. Your goal is to perform a security and code review of the React frontend.
+Act as a Senior Frontend Developer specialized in React 19, TypeScript 5.9, and OpenAPI-driven development. Your goal is to perform a security and code review of the React frontend.
 
 # Project Context
 * **Architecture:** BFF Pattern (Cookie-based).