chore(deps): remediate Mend scan findings on release-1.11.4 (backport of #14555)

src/frontend/jest.setup.js

@@ -73,6 +73,14 @@ if (typeof global.URL === "undefined") {
   global.URL = require("url").URL;
 }
 
+// jsdom does not expose TextEncoder/TextDecoder, but react-router v7 reads them
+// at module load, so every suite importing react-router-dom fails without these.
+if (typeof global.TextEncoder === "undefined") {
+  const { TextEncoder, TextDecoder } = require("util");
+  global.TextEncoder = TextEncoder;
+  global.TextDecoder = TextDecoder;
+}
+
 // Mock localStorage
 const localStorageMock = {
   getItem: jest.fn(),

src/frontend/package.json

@@ -125,7 +125,7 @@
     "react-icons": "^5.2.1",
     "react-markdown": "^9.1.0",
     "react-pdf": "^9.0.0",
-    "react-router-dom": "^6.30.4",
+    "react-router-dom": "^7.18.2",
     "react-sortablejs": "^6.1.4",
     "react-syntax-highlighter": "^16.1.0",
     "reactflow": "^11.11.3",

src/frontend/src/hooks/flows/__tests__/use-flow-events.test.ts

@@ -201,6 +201,82 @@ describe("useFlowEvents", () => {
     );
   });
 
+  it("should seed the cursor in the past so events posted just before mount survive", async () => {
+    await mountHook();
+
+    const [, config] = apiGetMock.mock.calls[0];
+    // Anything posted between the route committing and this hook mounting must
+    // still be newer than `since`, or the API drops it for good.
+    expect(config.params.since).toBeLessThan(Date.now() / 1000);
+  });
+
+  it("should surface an event posted just before mount on the first poll", async () => {
+    apiGetMock.mockResolvedValueOnce({
+      data: {
+        events: [
+          {
+            type: "component_added",
+            timestamp: Date.now() / 1000 - 1,
+            summary: "Added OpenAI Model",
+          },
+        ],
+        settled: false,
+      },
+    });
+
+    const { result } = await mountHook();
+
+    expect(result.current.isAgentWorking).toBe(true);
+    expect(result.current.events).toHaveLength(1);
+  });
+
+  it("should stay quiet when the catch-up poll only finds finished work", async () => {
+    apiGetMock.mockResolvedValueOnce({
+      data: {
+        events: [
+          {
+            type: "component_added",
+            timestamp: Date.now() / 1000 - 8,
+            summary: "Added OpenAI Model",
+          },
+        ],
+        settled: true,
+      },
+    });
+
+    const { result } = await mountHook();
+
+    expect(result.current.isAgentWorking).toBe(false);
+    expect(result.current.events).toEqual([]);
+    expect(result.current.lastSettledAt).toBeNull();
+  });
+
+  it("should re-arm the catch-up poll when flowId changes", async () => {
+    const { result, rerender } = await mountHook();
+
+    apiGetMock.mockResolvedValueOnce({
+      data: {
+        events: [
+          {
+            type: "component_added",
+            timestamp: Date.now() / 1000 - 8,
+            summary: "Added on flow-2",
+          },
+        ],
+        settled: true,
+      },
+    });
+
+    await act(async () => {
+      rerender({ id: "flow-2" });
+    });
+
+    // The first poll after the switch is a catch-up poll again, so already
+    // settled work on the new flow stays quiet too.
+    expect(result.current.isAgentWorking).toBe(false);
+    expect(result.current.events).toEqual([]);
+  });
+
   it("should reset state when flowId changes", async () => {
     const { result, rerender } = await mountHook();
 

src/frontend/src/hooks/flows/use-flow-events.ts

@@ -6,6 +6,14 @@ import type { FlowEvent, FlowEventsResponse } from "@/types/flow-events";
 const IDLE_INTERVAL = 5000;
 const ACTIVE_INTERVAL = 1000;
 const MIN_BANNER_DISPLAY_MS = 2000;
+// Seeding the cursor with "now" drops every event posted between the route
+// committing and this hook mounting with the new flow id -- the API only returns
+// events strictly newer than `since`, so a dropped event never comes back. Start
+// the cursor in the past instead and let the server's `settled` flag decide
+// whether what we catch up on is still worth showing.
+const INITIAL_LOOKBACK_SECONDS = 10;
+
+const startingCursor = () => Date.now() / 1000 - INITIAL_LOOKBACK_SECONDS;
 
 type UseFlowEventsReturn = {
   isAgentWorking: boolean;
@@ -19,9 +27,10 @@ export function useFlowEvents(flowId: string | undefined): UseFlowEventsReturn {
   const [events, setEvents] = useState<FlowEvent[]>([]);
   const [lastSettledAt, setLastSettledAt] = useState<number | null>(null);
 
-  const cursorRef = useRef<number>(Date.now() / 1000);
+  const cursorRef = useRef<number>(startingCursor());
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const isActiveRef = useRef(false);
+  const isCatchUpPollRef = useRef(true);
   const isPollingRef = useRef(false);
   const mountedRef = useRef(true);
   const activeSinceRef = useRef<number>(0);
@@ -57,6 +66,9 @@ export function useFlowEvents(flowId: string | undefined): UseFlowEventsReturn {
   const poll = useCallback(async () => {
     if (!flowId || isPollingRef.current) return;
 
+    const isCatchUpPoll = isCatchUpPollRef.current;
+    isCatchUpPollRef.current = false;
+
     isPollingRef.current = true;
     try {
       const response = await api.get<FlowEventsResponse>(
@@ -72,16 +84,24 @@ export function useFlowEvents(flowId: string | undefined): UseFlowEventsReturn {
         const maxTs = Math.max(...newEvents.map((e) => e.timestamp));
         cursorRef.current = maxTs;
 
-        setEvents((prev) => [...prev, ...newEvents]);
-
-        if (!isActiveRef.current) {
-          isActiveRef.current = true;
-          activeSinceRef.current = Date.now();
-          setIsAgentWorking(true);
-          clearInterval_();
-          intervalRef.current = setInterval(() => {
-            pollRef.current?.();
-          }, ACTIVE_INTERVAL);
+        // The catch-up poll reaches back before mount, so it can surface work
+        // that is already over. Advance the cursor past it but stay quiet --
+        // flashing a banner (and re-fetching the flow on the settle that
+        // follows) for finished work is worse than showing nothing.
+        const isFinishedWork = isCatchUpPoll && settled && !isActiveRef.current;
+
+        if (!isFinishedWork) {
+          setEvents((prev) => [...prev, ...newEvents]);
+
+          if (!isActiveRef.current) {
+            isActiveRef.current = true;
+            activeSinceRef.current = Date.now();
+            setIsAgentWorking(true);
+            clearInterval_();
+            intervalRef.current = setInterval(() => {
+              pollRef.current?.();
+            }, ACTIVE_INTERVAL);
+          }
         }
       }
 
@@ -129,11 +149,12 @@ export function useFlowEvents(flowId: string | undefined): UseFlowEventsReturn {
     if (!flowId) return;
 
     mountedRef.current = true;
-    cursorRef.current = Date.now() / 1000;
+    cursorRef.current = startingCursor();
     setEvents([]);
     setIsAgentWorking(false);
     setLastSettledAt(null);
     isActiveRef.current = false;
+    isCatchUpPollRef.current = true;
     isPollingRef.current = false;
     activeSinceRef.current = 0;
 

src/frontend/src/pages/FlowPage/hooks/__tests__/use-load-flow-for-route.test.ts

@@ -28,17 +28,10 @@ const deferred = <T>(): Deferred<T> => {
   return { promise, resolve, reject };
 };
 
+// react-router v7 makes the former v7_relativeSplatPath / v7_startTransition
+// opt-ins the default behavior, so the `future` prop no longer exists.
 const RouterWrapper = ({ children }: PropsWithChildren) =>
-  createElement(
-    MemoryRouter,
-    {
-      future: {
-        v7_relativeSplatPath: true,
-        v7_startTransition: true,
-      },
-    },
-    children,
-  );
+  createElement(MemoryRouter, null, children);
 
 const renderRouteLoader = (
   options: {

src/frontend/tests/core/features/keyboardComponentSearch.spec.ts

@@ -8,8 +8,18 @@ test(
     // Navigate to homepage and handle initial modal
     await awaitBootstrapTest(page);
 
-    // Start with blank flow
+    // Start with blank flow. The click creates the flow and navigates, but the
+    // canvas we are leaving has a sidebar search input too -- so waiting on that
+    // selector alone can resolve against the outgoing page, which is then torn
+    // down mid-test and takes the focus set below with it. Wait for the new
+    // flow's own load to land before touching the keyboard.
+    const newFlowLoaded = page.waitForResponse(
+      (response) =>
+        response.request().method() === "GET" &&
+        /\/api\/v1\/flows\/[0-9a-f-]{36}$/.test(response.url()),
+    );
     await page.getByTestId("blank-flow").click();
+    await newFlowLoaded;
     await page.waitForTimeout(500);
     await page.waitForSelector('[data-testid="sidebar-search-input"]', {
       timeout: 3000,