Add comprehensive diagnostic test for login issues

Created diagnostic test that:
- Captures all console logs from browser
- Tracks all network requests/responses
- Checks what's actually rendered on page
- Takes screenshot
- Tests API access from browser context

This will show us exactly what the browser sees vs what curl sees.

Note: These integration tests were added Nov 11 and have never worked.
Need to diagnose and fix before they can be useful.

Related to #695

.github/workflows/release.yml

@@ -137,41 +137,8 @@ jobs:
           echo "Testing login page loads:"
           curl -s http://localhost:7655/login | head -20
 
-          echo "Testing API access from Playwright context..."
-          cat > test-api-access.spec.ts <<'EOF'
-          import { test, expect } from '@playwright/test';
-
-          test('API is accessible from browser', async ({ page }) => {
-            console.log('Navigating to login page...');
-            await page.goto('http://localhost:7655/login');
-            console.log('Page loaded');
-
-            console.log('Fetching security status from browser context...');
-            const response = await page.evaluate(async () => {
-              try {
-                const res = await fetch('/api/security/status');
-                const data = await res.json();
-                return { ok: res.ok, status: res.status, data };
-              } catch (err) {
-                return { error: String(err) };
-              }
-            });
-            console.log('Security status from browser:', JSON.stringify(response, null, 2));
-
-            console.log('Checking for username field...');
-            const usernameField = page.locator('input[name="username"]');
-            const isVisible = await usernameField.isVisible({ timeout: 15000 }).catch(() => false);
-            console.log('Username field visible:', isVisible);
-
-            if (!isVisible) {
-              console.log('Taking screenshot of what IS visible...');
-              await page.screenshot({ path: '/tmp/login-page.png', fullPage: true });
-              const bodyText = await page.locator('body').textContent();
-              console.log('Page text content:', bodyText);
-            }
-          });
-          EOF
-          npx playwright test test-api-access.spec.ts --reporter=list || true
+          echo "Running diagnostic test..."
+          npx playwright test tests/00-diagnostic.spec.ts --reporter=list
 
           echo "Running integration tests..."
           npx playwright test tests/01-happy-path.spec.ts tests/02-bad-checksums.spec.ts --reporter=list

tests/integration/tests/00-diagnostic.spec.ts

@@ -0,0 +1,80 @@
+/**
+ * Diagnostic test to understand why login is failing
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Login Diagnostic', () => {
+  test('diagnose login page and API access', async ({ page }) => {
+    // Enable console logging
+    page.on('console', msg => console.log('BROWSER CONSOLE:', msg.text()));
+
+    // Track network requests
+    page.on('request', req => {
+      if (req.url().includes('/api/')) {
+        console.log('REQUEST:', req.method(), req.url());
+      }
+    });
+
+    page.on('response', async res => {
+      if (res.url().includes('/api/')) {
+        console.log('RESPONSE:', res.status(), res.url());
+        if (res.url().includes('/api/security/status')) {
+          try {
+            const body = await res.json();
+            console.log('SECURITY STATUS RESPONSE:', JSON.stringify(body, null, 2));
+          } catch (e) {
+            console.log('Failed to parse response:', e);
+          }
+        }
+      }
+    });
+
+    console.log('\n=== Navigating to login page ===');
+    await page.goto('http://localhost:7655/login');
+    console.log('Page loaded');
+
+    // Wait a bit for any async operations
+    await page.waitForTimeout(3000);
+
+    console.log('\n=== Checking page state ===');
+    const url = page.url();
+    console.log('Current URL:', url);
+
+    // Check what's actually on the page
+    const bodyText = await page.locator('body').textContent();
+    console.log('Page contains:', bodyText?.substring(0, 500));
+
+    // Check for various elements
+    const usernameField = page.locator('input[name="username"]');
+    const usernameVisible = await usernameField.isVisible().catch(() => false);
+    console.log('Username field visible:', usernameVisible);
+
+    const setupHeading = page.locator('h1, h2').filter({ hasText: /setup|bootstrap|getting started/i });
+    const setupVisible = await setupHeading.isVisible().catch(() => false);
+    console.log('Setup/bootstrap heading visible:', setupVisible);
+
+    const loginHeading = page.locator('h1, h2').filter({ hasText: /login|sign in/i });
+    const loginVisible = await loginHeading.isVisible().catch(() => false);
+    console.log('Login heading visible:', loginVisible);
+
+    // Take screenshot
+    await page.screenshot({ path: 'test-results/login-diagnostic.png', fullPage: true });
+    console.log('Screenshot saved to test-results/login-diagnostic.png');
+
+    console.log('\n=== Fetching API from browser context ===');
+    const apiResponse = await page.evaluate(async () => {
+      try {
+        const res = await fetch('/api/security/status');
+        const data = await res.json();
+        return { ok: res.ok, status: res.status, data };
+      } catch (err) {
+        return { error: String(err) };
+      }
+    });
+    console.log('Browser fetch result:', JSON.stringify(apiResponse, null, 2));
+
+    // This test always passes - it's just for diagnostics
+    expect(true).toBe(true);
+  });
+});