test(webui): measure the shared dialog after its entrance has settled

The shared presentation layer replaced the message dialog with the shared
dialog, and the shared dialog enters over 200ms: the entrance translates and
scales it, so a geometry measured while the entrance runs is not the
dialog's geometry.

- The rewind dialog's surface and action row are the shared dialog's classes
  now; the message dialog's own classes are gone
- The two geometry measurements wait for the entrance to finish, the way the
  plugin catalogue's own dialog measurement already does
- The session leading marker's column is 24px wide because the disclosure
  inside it is a 24px target; the stylesheet says so where the rule is
  written, and the assertion still said 18px

Author: stevenjj33

packages/webui/test/integration/agent-transcript.test.ts

@@ -577,12 +577,16 @@ it("a real agent turn resumes after refresh and drains a queued message in order
     await persistedSourceActions.getByRole("button", { name: "回退" }).click();
     const persistedSourceRewindDialog = page.getByTestId("rewind-preview-dialog");
     await browserExpect(persistedSourceRewindDialog).toBeVisible();
+    // The shared dialog enters over 200ms, and the entrance moves it. The
+    // geometry is the dialog's own geometry only once the entrance has
+    // settled, so the measurement waits for it.
+    await persistedSourceRewindDialog.evaluate((node) => Promise.all(node.getAnimations({ subtree: true }).map((animation) => animation.finished)));
     const rewindGeometry = await persistedSourceRewindDialog.evaluate((node) => {
       const viewportWidth = document.body.clientWidth;
       const viewportHeight = document.body.clientHeight;
       const dialog = node.getBoundingClientRect();
-      const surface = node.querySelector(".webui-message-dialog-surface")!.getBoundingClientRect();
-      const buttons = [...node.querySelectorAll<HTMLButtonElement>(".webui-message-dialog-actions button")];
+      const surface = node.querySelector(".webui-dialog-surface")!.getBoundingClientRect();
+      const buttons = [...node.querySelectorAll<HTMLButtonElement>(".webui-dialog-actions button")];
       return {
         fixedBackdrop: getComputedStyle(node).position === "fixed",
         backdropCoversViewport: dialog.left <= 0 && dialog.top <= 0 &&
@@ -1193,6 +1197,10 @@ it("a real agent turn resumes after refresh and drains a queued message in order
     await page.getByRole("menuitem", { name: "添加 MCP server" }).click();
     const mcpDialog = page.getByRole("dialog", { name: "MCP Server" });
     await browserExpect(mcpDialog).toBeVisible();
+    // The shared dialog enters over 200ms, and the entrance moves it. The
+    // geometry is the dialog's own geometry only once the entrance has
+    // settled, so the measurement waits for it.
+    await mcpDialog.evaluate((node) => Promise.all(node.getAnimations({ subtree: true }).map((animation) => animation.finished)));
     const mcpGeometry = await mcpDialog.evaluate((node) => {
       const backdrop = node.parentElement;
       const rect = node.getBoundingClientRect();

packages/webui/test/integration/real-host-loopback.test.ts

@@ -343,6 +343,10 @@ describe("real host over the loopback service", () => {
       await page.getByRole("menuitem", { name: "添加 MCP server" }).click();
       const dialog = page.getByRole("dialog", { name: "MCP Server" });
       await browserExpect(dialog).toBeVisible();
+      // The shared dialog enters over 200ms, and the entrance moves it. The
+      // geometry is the dialog's own geometry only once the entrance has
+      // settled, so the measurement waits for it.
+      await dialog.evaluate((node) => Promise.all(node.getAnimations({ subtree: true }).map((animation) => animation.finished)));
       const geometry = await dialog.evaluate((node) => {
         const backdrop = node.parentElement!;
         const backdropRect = backdrop.getBoundingClientRect();

packages/webui/test/unit/webui-shell.test.ts

@@ -948,8 +948,11 @@ describe("WebUI shell", () => {
       /\.webui-session-leading-marker\s*\{([^}]*)\}/u,
     );
     expect(leadingMarkerRule, "session leading marker rule is missing").not.toBeNull();
-    expect(leadingMarkerRule![1]).toMatch(/width:\s*18px/u);
-    expect(leadingMarkerRule![1]).toMatch(/flex:\s*0\s+0\s+18px/u);
+    // The column is 24px wide because the disclosure inside it is a 24px
+    // target; an 18px column clipped the one place a session row is opened
+    // from. The stylesheet says so where the rule is written.
+    expect(leadingMarkerRule![1]).toMatch(/width:\s*24px/u);
+    expect(leadingMarkerRule![1]).toMatch(/flex:\s*0\s+0\s+24px/u);
   });
 
   it("keeps subagent sessions visibly nested under their parent session", () => {