fix(artifacts L5): never replace a shown MCP App consent strip (Codex r7 UKEM)

A newer consent request replaced the shown strip in place, so a view could swap the
payload between the user's pointerdown and click and the same Allow/Open/Add button
approved the new request. While a strip is shown, newer requests are now declined, and
the buttons settle only the request that is displayed (moved down from L9; the confirm
arming delay stays in L9).

---

_Generated with `xum` • Model: `anthropic:claude-opus-5-5` • Thinking: `high`_

<!-- mux-attribution: model=anthropic:claude-opus-5-5 thinking=high -->

Author: ThomasK33

src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.test.tsx

@@ -27,7 +27,12 @@ const VIEW: McpAppViewRef = {
 
 let invocation: McpAppView["invocation"] = null;
 let getViewCalls = 0;
-let toolCalls: Array<{ serverName: string; toolName: string; consented: boolean }> = [];
+let toolCalls: Array<{
+  serverName: string;
+  toolName: string;
+  arguments: unknown;
+  consented: boolean;
+}> = [];
 
 function Wrapper(props: { children: ReactNode }) {
   const api: TestApiOverrides<APIClient> = {
@@ -46,10 +51,16 @@ function Wrapper(props: { children: ReactNode }) {
           },
         });
       },
-      callTool: (input: { serverName: string; toolName: string; consented: boolean }) => {
+      callTool: (input: {
+        serverName: string;
+        toolName: string;
+        arguments: unknown;
+        consented: boolean;
+      }) => {
         toolCalls.push({
           serverName: input.serverName,
           toolName: input.toolName,
+          arguments: input.arguments,
           consented: input.consented,
         });
         return Promise.resolve({
@@ -172,6 +183,29 @@ describe("McpAppFrame", () => {
     expect(args).toContain('"city": "Berlin"');
   });
 
+  test("a request sent while a strip is shown cannot replace it under the user's press", async () => {
+    const { view, frame, posted } = await renderFrame();
+    const call = (id: number, amount: number) =>
+      postFromView(frame, {
+        jsonrpc: "2.0",
+        id,
+        method: "tools/call",
+        params: { name: "transfer", arguments: { amount } },
+      });
+    call(1, 1);
+    await view.findByRole("alert");
+    const allow = view.getByRole("button", { name: "Allow" });
+    fireEvent.pointerDown(allow);
+    // The view swaps in another request between the user's pointerdown and click.
+    call(2, 9999);
+    await waitFor(() => expect(posted.find((m) => m.id === 2)?.error).toBeDefined());
+    expect(view.getByTestId("mcp-app-consent-args").textContent).toContain('"amount": 1');
+    fireEvent.click(allow);
+    await waitFor(() => expect(posted.find((m) => m.id === 1)?.result).toBeDefined());
+    // Only the request the user saw was dispatched with consent.
+    expect(toolCalls.filter((c) => c.consented).map((c) => c.arguments)).toEqual([{ amount: 1 }]);
+  });
+
   test("a view message reaches the composer only after Add on the full text", async () => {
     const inserted: unknown[] = [];
     const onInsert = (event: Event) => inserted.push((event as CustomEvent).detail);

src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.tsx

@@ -135,6 +135,8 @@ function DesktopMcpAppFrame(props: { workspaceId: string; view: McpAppViewRef })
   const theme: "light" | "dark" = isLightThemeMode(themeMode) ? "light" : "dark";
   const [loaded, setLoaded] = useState<Loaded | null>(null);
   const [consent, setConsent] = useState<PendingConsent | null>(null);
+  // Set synchronously with `consent`, so a request arriving before the re-render sees the strip.
+  const consentRef = useRef<PendingConsent | null>(null);
   const [height, setHeight] = useState<number | null>(null);
   const [allowMessage] = useState(() => createBridgeRateLimiter());
   const frameRef = useRef<HTMLIFrameElement | null>(null);
@@ -228,11 +230,15 @@ function DesktopMcpAppFrame(props: { workspaceId: string; view: McpAppViewRef })
       },
       requestConsent: (request) =>
         new Promise<boolean>((resolve) => {
-          setConsent((previous) => {
-            // One strip at a time: a newer request replaces (and denies) an older one.
-            previous?.resolve(false);
-            return { request, resolve };
-          });
+          // One strip at a time, and a shown strip is never replaced: a frame could otherwise
+          // swap it between the user's pointerdown and click. Newer requests are declined.
+          if (consentRef.current != null) {
+            resolve(false);
+            return;
+          }
+          const pending = { request, resolve };
+          consentRef.current = pending;
+          setConsent(pending);
         }),
       insertIntoComposer: (text) =>
         window.dispatchEvent(
@@ -266,10 +272,9 @@ function DesktopMcpAppFrame(props: { workspaceId: string; view: McpAppViewRef })
       // Best effort when the view is switched away; Close waits for the reply instead.
       void host.teardown("unmount");
       hostRef.current = null;
-      setConsent((previous) => {
-        previous?.resolve(false);
-        return null;
-      });
+      consentRef.current?.resolve(false);
+      consentRef.current = null;
+      setConsent(null);
     };
     // The host lives as long as the document; `grant` is derived from the same inputs.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -280,6 +285,13 @@ function DesktopMcpAppFrame(props: { workspaceId: string; view: McpAppViewRef })
     hostRef.current?.sendHostContextChanged({ theme, styles: { variables: readStyleVariables() } });
   }, [theme]);
 
+  const settleConsent = (pending: PendingConsent, allowed: boolean) => {
+    if (consentRef.current !== pending) return;
+    consentRef.current = null;
+    setConsent(null);
+    pending.resolve(allowed);
+  };
+
   const close = async () => {
     await hostRef.current?.teardown("closed");
     closeMcpAppView(workspaceId, toolCallId);
@@ -325,20 +337,14 @@ function DesktopMcpAppFrame(props: { workspaceId: string; view: McpAppViewRef })
           </div>
           <button
             type="button"
-            onClick={() => {
-              consent.resolve(true);
-              setConsent(null);
-            }}
+            onClick={() => settleConsent(consent, true)}
             className="bg-accent text-background rounded px-2 py-0.5"
           >
             {CONSENT_ACCEPT_LABEL[consent.request.kind]}
           </button>
           <button
             type="button"
-            onClick={() => {
-              consent.resolve(false);
-              setConsent(null);
-            }}
+            onClick={() => settleConsent(consent, false)}
             className="border-border-light rounded border px-2 py-0.5"
           >
             {consent.request.kind === "tool" ? "Deny" : "Cancel"}