perf(app): keep composer typing within the frame budget (#3450)

* perf(app): keep composer typing responsive The controlled web textarea pushed every keystroke through the draft store and broad composer tree before paint. Keep live text in the focused DOM input and publish draft and selection state after paint so persistence and reactive features remain intact without blocking the typed character. * fix(app): preserve live composer state at actions * fix(app): use live input for autocomplete clicks * fix(app): keep submit activity atomic
2026-08-16 16:05:29 +02:00
parent 42245d139a
commit 8c4e54eace
15 changed files with 1185 additions and 182 deletions
@@ -544,6 +544,88 @@ test.describe("Composer autocomplete", () => {
    }
  });

+  test("uses the live cursor when accepting a slash command", async ({ page }) => {
+    await installListCommandsStub(page);
+    const agent = await openReadyMockAgent(page);
+
+    try {
+      const input = composerLocator(page);
+      await expect(input).toBeEditable({ timeout: 30_000 });
+      await input.fill("/tdd");
+      await expect(
+        page
+          .getByTestId("composer-autocomplete-popover")
+          .getByText("/tdd", { exact: true })
+          .first(),
+      ).toBeVisible({ timeout: 30_000 });
+
+      await input.evaluate((element) => {
+        if (!(element instanceof HTMLTextAreaElement)) {
+          throw new Error("Composer input is not a textarea");
+        }
+        element.setSelectionRange(0, 0);
+        element.dispatchEvent(new Event("select", { bubbles: true }));
+        element.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "Tab",
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+      });
+
+      await expect(input).toHaveValue("/tdd");
+      const selectionStart = await input.evaluate(
+        (element) => (element as HTMLTextAreaElement).selectionStart,
+      );
+      expect(selectionStart).toBe(0);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("uses the live input when clicking a slash command", async ({ page }) => {
+    await installListCommandsStub(page);
+    const agent = await openReadyMockAgent(page);
+
+    try {
+      const input = composerLocator(page);
+      await expect(input).toBeEditable({ timeout: 30_000 });
+      await input.fill("/td");
+      const option = page
+        .getByTestId("composer-autocomplete-popover")
+        .getByText("/tdd", { exact: true })
+        .first();
+      await expect(option).toBeVisible({ timeout: 30_000 });
+
+      await option.evaluate((element) => {
+        const textarea = document.querySelector('textarea[aria-label="Message agent..."]');
+        if (!(textarea instanceof HTMLTextAreaElement)) {
+          throw new Error("Composer input is not a textarea");
+        }
+        const valueSetter = Object.getOwnPropertyDescriptor(
+          HTMLTextAreaElement.prototype,
+          "value",
+        )?.set;
+        if (!valueSetter) throw new Error("Textarea value setter is unavailable");
+        valueSetter.call(textarea, "/tdd suffix");
+        textarea.setSelectionRange(4, 4);
+        textarea.dispatchEvent(
+          new InputEvent("input", {
+            bubbles: true,
+            data: "d suffix",
+            inputType: "insertText",
+          }),
+        );
+        (element as HTMLElement).click();
+      });
+
+      await expect(input).toHaveValue("/tdd suffix");
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
  test("stays anchored to the composer when the desktop sidebar is open", async ({ page }) => {
    await installListCommandsStub(page);
    const agent = await openReadyMockAgent(page);
@@ -1,4 +1,4 @@
-import { test } from "../support/fixtures";
+import { expect, test } from "../support/fixtures";
 import { gotoAppShell } from "../support/helpers/app";
 import { getE2EDaemonPort } from "../support/helpers/daemon-port";
 import {
@@ -85,4 +85,52 @@ test.describe("New workspace composer draft", () => {
      await project.cleanup();
    }
  });
+
+  test("does not restore a submitted draft after deferred publication", async ({ page }) => {
+    const project = await seedWorkspace({ repoPrefix: "new-workspace-submitted-draft-" });
+
+    try {
+      await gotoAppShell(page);
+      await waitForSidebarHydration(page);
+      await openNewWorkspaceComposer(page, {
+        projectKey: project.projectKey,
+        projectDisplayName: project.projectDisplayName,
+      });
+
+      const composer = page.getByRole("textbox", { name: "Message agent..." });
+      const createButton = page.getByTestId("workspace-create-submit");
+      await expect(composer).toBeEditable({ timeout: 30_000 });
+      await expect(createButton).toBeEnabled({ timeout: 30_000 });
+
+      await composer.evaluate((element, draft) => {
+        if (!(element instanceof HTMLTextAreaElement)) {
+          throw new Error("Composer input is not a textarea");
+        }
+        const valueSetter = Object.getOwnPropertyDescriptor(
+          HTMLTextAreaElement.prototype,
+          "value",
+        )?.set;
+        if (!valueSetter) throw new Error("Textarea value setter is unavailable");
+        valueSetter.call(element, draft);
+        element.dispatchEvent(
+          new InputEvent("input", {
+            bubbles: true,
+            data: draft,
+            inputType: "insertText",
+          }),
+        );
+        const button = document.querySelector('[data-testid="workspace-create-submit"]');
+        if (!(button instanceof HTMLElement)) {
+          throw new Error("Create button is unavailable");
+        }
+        button.click();
+      }, DRAFT);
+
+      await page.waitForURL((url) => url.pathname.includes("/workspace/"), { timeout: 30_000 });
+      await openGlobalNewWorkspaceComposer(page);
+      await expectNewWorkspaceDraft(page, "");
+    } finally {
+      await project.cleanup();
+    }
+  });
 });