feat: enhance test authentication and context navigation

- Added `authenticateForTests` utility to streamline API key authentication in tests, using a fallback for local testing.
- Updated context image test to include authentication step before navigation, ensuring proper session handling.
- Increased timeout for context view visibility to accommodate slower server responses.
- Introduced a test API key in the Playwright configuration for consistent testing environments.

apps/ui/playwright.config.ts

@@ -39,6 +39,8 @@ export default defineConfig({
               PORT: String(serverPort),
               // Enable mock agent in CI to avoid real API calls
               AUTOMAKER_MOCK_AGENT: mockAgent ? 'true' : 'false',
+              // Set a test API key for web mode authentication
+              AUTOMAKER_API_KEY: process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests',
               // No ALLOWED_ROOT_DIRECTORY restriction - allow all paths for testing
             },
           },

apps/ui/tests/context/add-context-image.spec.ts

@@ -14,6 +14,7 @@ import {
   navigateToContext,
   waitForContextFile,
   waitForNetworkIdle,
+  authenticateForTests,
 } from '../utils';
 
 test.describe('Add Context Image', () => {
@@ -117,13 +118,29 @@ test.describe('Add Context Image', () => {
 
   test('should import an image file to context', async ({ page }) => {
     await setupProjectWithFixture(page, getFixturePath());
+
+    // Authenticate with the server before navigating
+    await authenticateForTests(page);
+
     await page.goto('/');
     await waitForNetworkIdle(page);
 
+    // Check if we're on the login screen and authenticate if needed
+    const loginInput = page.locator('input[type="password"][placeholder*="API key"]');
+    const isLoginScreen = await loginInput.isVisible({ timeout: 2000 }).catch(() => false);
+    if (isLoginScreen) {
+      const apiKey = process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests';
+      await loginInput.fill(apiKey);
+      await page.locator('button:has-text("Login")').click();
+      await page.waitForURL('**/', { timeout: 5000 });
+      await waitForNetworkIdle(page);
+    }
+
     await navigateToContext(page);
 
-    // Get the file input element and set the file
+    // Wait for the file input to be attached to the DOM before setting files
     const fileInput = page.locator('[data-testid="file-import-input"]');
+    await expect(fileInput).toBeAttached({ timeout: 10000 });
 
     // Use setInputFiles to upload the image
     await fileInput.setInputFiles(testImagePath);

apps/ui/tests/utils/api/client.ts

@@ -4,7 +4,7 @@
  */
 
 import { Page, APIResponse } from '@playwright/test';
-import { API_ENDPOINTS } from '../core/constants';
+import { API_BASE_URL, API_ENDPOINTS } from '../core/constants';
 
 // ============================================================================
 // Types
@@ -270,3 +270,33 @@ export async function apiListBranches(
 ): Promise<{ response: APIResponse; data: ListBranchesResponse }> {
   return new WorktreeApiClient(page).listBranches(worktreePath);
 }
+
+// ============================================================================
+// Authentication Utilities
+// ============================================================================
+
+/**
+ * Authenticate with the server using an API key
+ * This sets a session cookie that will be used for subsequent requests
+ */
+export async function authenticateWithApiKey(page: Page, apiKey: string): Promise<boolean> {
+  try {
+    const response = await page.request.post(`${API_BASE_URL}/api/auth/login`, {
+      data: { apiKey },
+    });
+    const data = await response.json();
+    return data.success === true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Authenticate using the API key from environment variable
+ * Falls back to a test default if AUTOMAKER_API_KEY is not set
+ */
+export async function authenticateForTests(page: Page): Promise<boolean> {
+  // Use the API key from environment, or a test default
+  const apiKey = process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests';
+  return authenticateWithApiKey(page, apiKey);
+}

apps/ui/tests/utils/navigation/views.ts

@@ -37,7 +37,8 @@ export async function navigateToContext(page: Page): Promise<void> {
   }
 
   // Wait for the context view to be visible
-  await waitForElement(page, 'context-view', { timeout: 10000 });
+  // Increase timeout to handle slower server startup
+  await waitForElement(page, 'context-view', { timeout: 15000 });
 }
 
 /**