fix: Stop button now sends correct CSRF token, fixing silent cancel failures (#157)

When a user clicks Stop in the AI editor, handleCancel() was using a global
document.querySelector for the CSRF token instead of scoping it to the form.
The Twig template renders multiple CSRF tokens (one per form), and the global
query returned the first match (Finish Session form's token with action
conversation_finish) instead of the correct one (AI form's token with action
chat_based_content_editor_run).

The backend validates against the expected action, so a wrong token triggered
a 403 response. Since fetch() only throws on network errors—not HTTP errors—
the error was silently swallowed and the cancel button remained stuck in
"Stopping…" state forever, while the generation continued uninterrupted.

Changes:
- Changed CSRF lookup in handleCancel() to use form-scoped query, matching
  the correct pattern already used in handleSubmit()
- Added response.ok check after fetch to throw an error on non-2xx responses,
  allowing the catch block to re-enable the button for retry
- Added integration tests verifying the CSRF token is sourced from the
  correct form and that button state recovers on cancel failure

This ensures cancel requests use the correct CSRF token and any future
failures (network or server) re-enable the button so users can retry.

Fixes #94.

Author: manuelkiessling

src/ChatBasedContentEditor/Presentation/Resources/assets/controllers/chat_based_content_editor_controller.ts

@@ -326,19 +326,24 @@ export default class extends Controller {
         }
 
         try {
-            const csrfInput = document.querySelector('input[name="_csrf_token"]') as HTMLInputElement | null;
+            const form = this.cancelButtonTarget.closest("form");
+            const csrfInput = form?.querySelector<HTMLInputElement>('input[name="_csrf_token"]') ?? null;
 
             const formData = new FormData();
             if (csrfInput) {
                 formData.append("_csrf_token", csrfInput.value);
             }
 
-            await fetch(cancelUrl, {
+            const cancelResponse = await fetch(cancelUrl, {
                 method: "POST",
                 headers: { "X-Requested-With": "XMLHttpRequest" },
                 body: formData,
             });
 
+            if (!cancelResponse.ok) {
+                throw new Error(`Cancel request failed with status ${cancelResponse.status}`);
+            }
+
             // Don't stop polling — let the polling loop detect the cancelled status
             // and done chunk naturally, so all pre-cancellation output is displayed.
         } catch {

tests/frontend/integration/ChatBasedContentEditor/chat_editor_controller.test.ts

@@ -99,7 +99,7 @@ describe("ChatBasedContentEditorController", () => {
                 <input type="hidden" name="_csrf_token" value="csrf-123">
                 <textarea data-chat-based-content-editor-target="instruction"></textarea>
                 <button type="submit" data-chat-based-content-editor-target="submit">Make changes</button>
-                <button type="button" data-chat-based-content-editor-target="cancelButton" class="hidden">Stop</button>
+                <button type="button" data-chat-based-content-editor-target="cancelButton" data-action="click->chat-based-content-editor#handleCancel" class="hidden">Stop</button>
             </form>
         `;
 
@@ -277,5 +277,95 @@ describe("ChatBasedContentEditorController", () => {
                 }),
             );
         });
+
+        it("stop button sends correct CSRF token from AI form, not global", async () => {
+            createChatEditorFixture();
+            await waitForController();
+
+            const controller = application.getControllerForElementAndIdentifier(
+                document.querySelector('[data-controller="chat-based-content-editor"]') as HTMLElement,
+                "chat-based-content-editor",
+            ) as InstanceType<typeof ChatEditorController>;
+
+            // Set up a mock polling state
+            const mockContainer = document.createElement("div");
+            (controller as unknown as Record<string, unknown>).currentPollingState = {
+                sessionId: "test-sess-123",
+                container: mockContainer,
+                lastId: 0,
+                pollUrl: "/api/poll/test-sess-123",
+            };
+
+            const fetchMock = vi.fn(async () => {
+                return {
+                    ok: true,
+                    status: 200,
+                    json: async () => ({}),
+                };
+            });
+
+            vi.stubGlobal("fetch", fetchMock);
+
+            // Call handleCancel
+            await controller.handleCancel();
+
+            // Verify cancel request was made
+            expect(fetchMock).toHaveBeenCalledWith(
+                "/api/cancel/test-sess-123",
+                expect.objectContaining({
+                    method: "POST",
+                    headers: { "X-Requested-With": "XMLHttpRequest" },
+                }),
+            );
+
+            // Verify the CSRF token from the form was used
+            const mockCalls = fetchMock.mock.calls as unknown as Array<[unknown, unknown]>;
+            const cancelCall = mockCalls.find((call) => String(call[0]) === "/api/cancel/test-sess-123");
+            if (cancelCall) {
+                const formData = (cancelCall[1] as Record<string, unknown>)?.body as FormData | undefined;
+                expect(formData?.get("_csrf_token")).toBe("csrf-123");
+            }
+        });
+
+        it("stop button re-enables on cancel failure and shows error state", async () => {
+            createChatEditorFixture();
+            await waitForController();
+
+            const controller = application.getControllerForElementAndIdentifier(
+                document.querySelector('[data-controller="chat-based-content-editor"]') as HTMLElement,
+                "chat-based-content-editor",
+            ) as InstanceType<typeof ChatEditorController>;
+
+            // Set up a mock polling state
+            const mockContainer = document.createElement("div");
+            (controller as unknown as Record<string, unknown>).currentPollingState = {
+                sessionId: "test-sess-fail",
+                container: mockContainer,
+                lastId: 0,
+                pollUrl: "/api/poll/test-sess-fail",
+            };
+
+            const fetchMock = vi.fn(async () => {
+                return {
+                    ok: false,
+                    status: 403,
+                    json: async () => ({ error: "Forbidden" }),
+                };
+            });
+
+            vi.stubGlobal("fetch", fetchMock);
+
+            // Get the cancel button and verify it's disabled
+            const cancelButton = document.querySelector(
+                "[data-chat-based-content-editor-target='cancelButton']",
+            ) as HTMLButtonElement;
+
+            // Call handleCancel
+            await controller.handleCancel();
+
+            // The catch block should re-enable the button
+            expect(cancelButton.disabled).toBe(false);
+            expect(cancelButton.textContent).toBe(translations.stop);
+        });
     });
 });