feat: Implement Observability 2.0 wide events

app/e2e/pitch-contour-alignment.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from './global-setup';
+import { API_BASE } from './test-utils';
 
 /**
  * PitchContour SVG Alignment Tests
@@ -48,7 +49,7 @@
     }
 
     // Wait for WebSocket connection before adding tracks
     await expect(page.locator('.connection-status--connected')).toBeVisible({ timeout: 10000 });
 
     // Add a track to get step cells (button has star prefix like "★ 808 Kick")
     const addTrackButton = page.getByRole('button', { name: /808 Kick/i });
@@ -129,10 +130,8 @@
       version: 1,
     };
 
-    // Post session to API (use same port as playwright webServer)
-    const apiBase = 'http://localhost:5175';
-
-    const createRes = await request.post(`${apiBase}/api/sessions`, {
+    // Post session to API (respects BASE_URL env for full-stack testing)
+    const createRes = await request.post(`${API_BASE}/api/sessions`, {
       data: sessionData,
     });
 
@@ -147,7 +146,7 @@
     await page.goto(`/s/${sessionId}`);
 
     // Wait for WebSocket connection to ensure state is fully synced
     await expect(page.locator('.connection-status--connected')).toBeVisible({ timeout: 10000 });
 
     // Wait for track row to appear
     await expect(page.locator('.track-row')).toBeVisible({ timeout: 10000 });

app/package.json

@@ -20,6 +20,8 @@
     "test:e2e:full": "npx playwright test --project=chromium --project=webkit",
     "test:e2e:mobile": "npx playwright test e2e/mobile-iphone.spec.ts --project=mobile-safari",
     "test:e2e:all-local": "npx playwright test --project=chromium && npm run test:e2e:mobile",
+    "test:e2e:full-stack": "tsx scripts/test-e2e-full-stack.ts",
+    "test:e2e:full-stack:smoke": "tsx scripts/test-e2e-full-stack.ts --smoke",
     "validate:sync": "tsx scripts/validate-sync-checklist.ts",
     "validate:samples": "bash scripts/validate-sample-volume.sh",
     "validate:manifests": "tsx scripts/validate-manifests.ts",

app/playwright.config.ts

@@ -37,7 +37,8 @@ export default defineConfig({
   ],
 
   use: {
-    baseURL: 'http://localhost:5175',
+    // Support PLAYWRIGHT_BASE_URL for full-stack testing against wrangler dev
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:5175',
     headless: true,
 
     // Tracing for debugging failures
@@ -79,12 +80,16 @@ export default defineConfig({
     },
   ],
 
-  webServer: {
-    command: process.env.USE_MOCK_API
-      ? 'USE_MOCK_API=1 npm run dev -- --port 5175'
-      : 'npm run dev -- --port 5175',
-    port: 5175,
-    reuseExistingServer: !process.env.CI,
-    timeout: 120000,
-  },
+  // Only start webServer when not using external server (PLAYWRIGHT_BASE_URL)
+  // Full-stack testing via test:e2e:full-stack manages wrangler dev externally
+  webServer: process.env.PLAYWRIGHT_BASE_URL
+    ? undefined
+    : {
+        command: process.env.USE_MOCK_API
+          ? 'USE_MOCK_API=1 npm run dev -- --port 5175'
+          : 'npm run dev -- --port 5175',
+        port: 5175,
+        reuseExistingServer: !process.env.CI,
+        timeout: 120000,
+      },
 });

app/scripts/test-e2e-full-stack.ts

@@ -0,0 +1,184 @@
+#!/usr/bin/env npx tsx
+/**
+ * Full-Stack E2E Test Runner
+ *
+ * Runs E2E tests against the real Cloudflare Worker (wrangler dev) instead of
+ * just the Vite dev server. This tests the complete stack including:
+ * - Cloudflare Worker API endpoints
+ * - Durable Objects (WebSocket, state persistence)
+ * - KV storage
+ * - Observability 2.0 wide events
+ *
+ * Usage:
+ *   npm run test:e2e:full-stack           # Run all E2E tests against wrangler dev
+ *   npm run test:e2e:full-stack -- --smoke # Run only smoke tests
+ *
+ * Prerequisites:
+ *   - Project must be built first (script handles this)
+ *   - Port 8787 must be available for wrangler dev
+ */
+
+import { spawn, execSync, ChildProcess } from 'child_process';
+
+const WRANGLER_PORT = 8787;
+const WRANGLER_URL = `http://localhost:${WRANGLER_PORT}`;
+const MAX_STARTUP_WAIT_MS = 120_000; // 2 minutes
+const HEALTH_CHECK_INTERVAL_MS = 1000;
+
+let wranglerProcess: ChildProcess | null = null;
+
+/**
+ * Check if wrangler dev is ready by hitting the health endpoint
+ */
+async function isWranglerReady(): Promise<boolean> {
+  try {
+    const response = await fetch(`${WRANGLER_URL}/api/health`, {
+      signal: AbortSignal.timeout(2000),
+    });
+    return response.ok;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Wait for wrangler dev to be ready
+ */
+async function waitForWrangler(): Promise<void> {
+  const startTime = Date.now();
+  console.log(`⏳ Waiting for wrangler dev to be ready on port ${WRANGLER_PORT}...`);
+
+  while (Date.now() - startTime < MAX_STARTUP_WAIT_MS) {
+    if (await isWranglerReady()) {
+      console.log(`✅ Wrangler dev is ready (took ${Math.round((Date.now() - startTime) / 1000)}s)`);
+      return;
+    }
+    await new Promise(resolve => setTimeout(resolve, HEALTH_CHECK_INTERVAL_MS));
+  }
+
+  throw new Error(`Wrangler dev failed to start within ${MAX_STARTUP_WAIT_MS / 1000}s`);
+}
+
+/**
+ * Start wrangler dev in the background
+ */
+function startWrangler(): ChildProcess {
+  console.log('🚀 Starting wrangler dev...');
+
+  const proc = spawn('npx', ['wrangler', 'dev', '--port', String(WRANGLER_PORT)], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+    detached: false,
+    shell: true,
+  });
+
+  // Log wrangler output with prefix
+  proc.stdout?.on('data', (data) => {
+    const lines = data.toString().split('\n').filter((l: string) => l.trim());
+    lines.forEach((line: string) => console.log(`  [wrangler] ${line}`));
+  });
+
+  proc.stderr?.on('data', (data) => {
+    const lines = data.toString().split('\n').filter((l: string) => l.trim());
+    lines.forEach((line: string) => console.log(`  [wrangler] ${line}`));
+  });
+
+  proc.on('error', (err) => {
+    console.error('❌ Failed to start wrangler:', err.message);
+  });
+
+  return proc;
+}
+
+/**
+ * Stop wrangler dev
+ */
+function stopWrangler(): void {
+  if (wranglerProcess) {
+    console.log('🛑 Stopping wrangler dev...');
+    wranglerProcess.kill('SIGTERM');
+    wranglerProcess = null;
+  }
+}
+
+/**
+ * Run playwright E2E tests
+ */
+function runE2ETests(smokeOnly: boolean): number {
+  console.log(`\n🧪 Running E2E tests against ${WRANGLER_URL}...\n`);
+
+  const args = smokeOnly
+    ? ['playwright', 'test', '--project=chromium', 'e2e/track-reorder.spec.ts', 'e2e/plock-editor.spec.ts', 'e2e/pitch-contour-alignment.spec.ts']
+    : ['playwright', 'test'];
+
+  try {
+    execSync(`npx ${args.join(' ')}`, {
+      stdio: 'inherit',
+      env: {
+        ...process.env,
+        // Override the base URL to point to wrangler dev
+        // PLAYWRIGHT_BASE_URL: Used by playwright.config.ts for browser navigation
+        // BASE_URL: Used by test-utils.ts for direct API requests
+        PLAYWRIGHT_BASE_URL: WRANGLER_URL,
+        BASE_URL: WRANGLER_URL,
+      },
+    });
+    return 0;
+  } catch {
+    // execSync throws on non-zero exit code
+    return 1;
+  }
+}
+
+/**
+ * Build the project
+ */
+function buildProject(): void {
+  console.log('📦 Building project...');
+  execSync('npm run build', { stdio: 'inherit' });
+  console.log('✅ Build complete\n');
+}
+
+/**
+ * Main entry point
+ */
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+  const smokeOnly = args.includes('--smoke');
+  let exitCode = 0;
+
+  // Cleanup handler
+  const cleanup = () => {
+    stopWrangler();
+    process.exit(exitCode);
+  };
+
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+
+  try {
+    // Step 1: Build
+    buildProject();
+
+    // Step 2: Start wrangler dev
+    wranglerProcess = startWrangler();
+
+    // Step 3: Wait for wrangler to be ready
+    await waitForWrangler();
+
+    // Step 4: Run E2E tests
+    exitCode = runE2ETests(smokeOnly);
+
+    if (exitCode === 0) {
+      console.log('\n✅ All E2E tests passed!');
+    } else {
+      console.log('\n❌ Some E2E tests failed');
+    }
+  } catch (error) {
+    console.error('\n❌ Error:', error instanceof Error ? error.message : error);
+    exitCode = 1;
+  } finally {
+    cleanup();
+  }
+}
+
+main();