fix: E2E test stability and UI performance improvements (#823)

apps/ui/tests/features/feature-deep-link.spec.ts

@@ -28,6 +28,7 @@ test.describe('Feature Deep Link', () => {
   let projectPath: string;
   let projectName: string;
 
+  // eslint-disable-next-line no-empty-pattern
   test.beforeEach(async ({}, testInfo) => {
     projectName = `test-project-${testInfo.workerIndex}-${Date.now()}`;
     projectPath = path.join(TEST_TEMP_DIR, projectName);

apps/ui/tests/features/responsive/agent-output-modal-responsive.spec.ts

@@ -13,6 +13,7 @@ import {
   waitForNetworkIdle,
   authenticateForTests,
   handleLoginScreenIfPresent,
+  dismissSandboxWarningIfVisible,
 } from '../../utils';
 
 const TEST_TEMP_DIR = createTempDirPath('responsive-modal-test');
@@ -100,6 +101,9 @@ test.describe('AgentOutputModal Responsive Behavior', () => {
 
     await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
 
+    // Dismiss sandbox warning dialog if it appears (blocks pointer events)
+    await dismissSandboxWarningIfVisible(page);
+
     // Wait for the verified feature card to appear
     const featureCard = page.locator(`[data-testid="kanban-card-${featureId}"]`);
     await expect(featureCard).toBeVisible({ timeout: 10000 });

apps/ui/tests/features/success-log-contrast.spec.ts

@@ -13,6 +13,7 @@ import {
   waitForNetworkIdle,
   authenticateForTests,
   handleLoginScreenIfPresent,
+  dismissSandboxWarningIfVisible,
 } from '../utils';
 
 /**
@@ -109,6 +110,9 @@ test.describe('Success log output contrast', () => {
 
     await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
 
+    // Dismiss sandbox warning dialog if it appears (blocks pointer events)
+    await dismissSandboxWarningIfVisible(page);
+
     // Wait for the verified feature card to appear
     const featureCard = page.locator(`[data-testid="kanban-card-${featureId}"]`);
     await expect(featureCard).toBeVisible({ timeout: 10000 });

apps/ui/tests/settings/event-hooks-settings.spec.ts

@@ -12,7 +12,7 @@
  */
 
 import { test, expect, type Page } from '@playwright/test';
-import { authenticateForTests, navigateToSettings } from '../utils';
+import { authenticateForTests, navigateToSettings, waitForSuccessToast } from '../utils';
 
 // Timeout constants for maintainability
 const TIMEOUTS = {
@@ -224,6 +224,9 @@ test.describe('Event Hooks Settings', () => {
     const addButton = dialog.locator('button:has-text("Add Endpoint")').last();
     await addButton.click();
 
+    // Wait for the success toast to confirm the save completed (including API call)
+    await waitForSuccessToast(page, 'Endpoint added', { timeout: 10000 });
+
     // Dialog should close
     await expect(dialog).toBeHidden({ timeout: TIMEOUTS.dialogHidden });
 
@@ -256,16 +259,13 @@ test.describe('Event Hooks Settings', () => {
     // The endpoints tab should show either existing endpoints or the empty state
     // The key is that it should NOT show "empty" if there are endpoints on the server
 
-    // Either we see "No endpoints configured" OR we see endpoint cards
-    const emptyState = page.locator('text=No endpoints configured');
+    // Either we see "No ntfy endpoints configured" OR we see endpoint cards
+    const emptyState = page.locator('text=No ntfy endpoints configured');
     const endpointCard = page.locator('[data-testid="endpoint-card"]').first();
 
-    // One of these should be visible
-    await expect(
-      Promise.race([
-        emptyState.waitFor({ state: 'visible', timeout: 5000 }).then(() => 'empty'),
-        endpointCard.waitFor({ state: 'visible', timeout: 5000 }).then(() => 'card'),
-      ])
-    ).resolves.toBeDefined();
+    // One of these should be visible (use Playwright's .or() to match either locator)
+    await expect(emptyState.or(endpointCard)).toBeVisible({
+      timeout: TIMEOUTS.endpointVisible,
+    });
   });
 });

apps/ui/tests/utils/components/dialogs.ts

@@ -2,6 +2,27 @@ import { Page, Locator } from '@playwright/test';
 import { clickElement } from '../core/interactions';
 import { waitForElement, waitForElementHidden } from '../core/waiting';
 
+/**
+ * Dismiss the sandbox warning dialog if it appears.
+ * This dialog blocks pointer events and must be accepted before interacting
+ * with elements behind it.
+ */
+export async function dismissSandboxWarningIfVisible(page: Page): Promise<void> {
+  const sandboxAcceptBtn = page.locator('button:has-text("I Accept the Risks")');
+  const sandboxVisible = await sandboxAcceptBtn
+    .waitFor({ state: 'visible', timeout: 2000 })
+    .then(() => true)
+    .catch(() => false);
+  if (sandboxVisible) {
+    await sandboxAcceptBtn.click();
+    await page
+      .locator('[role="dialog"][data-state="open"]')
+      .first()
+      .waitFor({ state: 'hidden', timeout: 3000 })
+      .catch(() => {});
+  }
+}
+
 /**
  * Check if the add feature dialog is visible
  */

apps/ui/tests/utils/project/setup.ts

@@ -242,6 +242,7 @@ export async function setupRealProject(
         theme: 'dark',
         sidebarOpen: true,
         maxConcurrency: 3,
+        skipSandboxWarning: true,
       };
       localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));