spec: Add AudioWorklet engine spec for scheduling, LFO, metering, and pitch-shifting

.gitignore

@@ -1,2 +1,3 @@
+node_modules/
 app/.wrangler/
 app/test-output.mid

app/e2e/feature-flags.spec.ts

@@ -42,22 +42,21 @@ function isWebkit(browserName: string): boolean {
 }
 
 test.describe('Feature Flags', () => {
-  test.describe('Loop Ruler (default: OFF)', () => {
+  test.describe('Loop Ruler (default: ON)', () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/');
       await waitForAppReady(page);
     });
 
-    test('loop ruler is NOT visible by default', async ({ page }) => {
-      // Loop ruler should not be rendered when feature flag is off (default)
+    test('loop ruler is visible by default', async ({ page }) => {
       const loopRuler = page.locator('.loop-ruler');
-      await expect(loopRuler).toHaveCount(0);
+      await expect(loopRuler).toHaveCount(1);
     });
 
-    test('loop handles are NOT visible by default', async ({ page }) => {
-      // Loop handles should not exist when feature flag is off
-      const loopHandles = page.locator('.loop-handle');
-      await expect(loopHandles).toHaveCount(0);
+    test('loop ruler supports drag interaction', async ({ page }) => {
+      // The loop ruler is interactive — dragging defines a loop region
+      const loopRuler = page.locator('.loop-ruler');
+      await expect(loopRuler).toBeVisible();
     });
   });
 

app/e2e/landscape-alignment.spec.ts

@@ -1,3 +1,3 @@
 /**
  * Landscape Mobile Alignment E2E Tests
  *
@@ -29,7 +29,7 @@
 
   // Click the instrument button by name
   const sampleBtn = page.getByRole('button', { name: instrumentName }).first();
   await expect(sampleBtn).toBeVisible({ timeout: 5000 });
   await sampleBtn.click();
 
   // Wait for track row to appear
@@ -152,10 +152,10 @@
   });
 
   test('all track rows should have consistent vertical alignment', async ({ page }) => {
-    // Add multiple tracks
-    await addTrack(page);
-    await addTrack(page);
-    await addTrack(page);
+    // Add multiple tracks using different instruments
+    await addTrack(page, /808 Kick/);
+    await addTrack(page, /808 Snare/);
+    await addTrack(page, /808 Clap/);
 
     // Wait for all track rows
     const trackRows = page.locator('.track-row');
@@ -222,8 +222,8 @@
   });
 
   test('screenshot comparison - visual alignment check', async ({ page }) => {
-    await addTrack(page);
-    await addTrack(page);
+    await addTrack(page, /808 Kick/);
+    await addTrack(page, /808 Snare/);
 
     // Wait for tracks to be ready
     await expect(page.locator('.track-row')).toHaveCount(2, { timeout: 5000 });

app/e2e/mixer-layout.spec.ts

@@ -0,0 +1,199 @@
+/**
+ * Mixer Panel Layout Tests
+ *
+ * Verifies that VU meters and other mixer channel elements are properly
+ * contained within their channel boundaries and scroll correctly.
+ *
+ * Bug: .track-meter has height: 100% which causes it to overflow
+ * the mixer channel, pushing the fader and volume controls outside
+ * the channel's visible bounds.
+ */
+
+import { test as base, expect, type Page } from '@playwright/test';
+
+const test = base;
+
+/**
+ * Navigate to the app, create a session, and add tracks.
+ */
+async function setupSession(page: Page) {
+  await page.goto('/');
+  await page.waitForLoadState('domcontentloaded');
+
+  const startButton = page.locator(
+    '.landing-btn.primary, button:has-text("Start Session"), button:has-text("Start"), button:has-text("Create")'
+  ).first();
+  const isLanding = await startButton.isVisible({ timeout: 3000 }).catch(() => false);
+
+  if (isLanding) {
+    await startButton.click();
+    await page.waitForURL(/\/s\//, { timeout: 15000 });
+  }
+
+  // Wait for app to be ready — sample picker should be visible at bottom
+  await page.locator('.sample-picker, .track-row, .app').first().waitFor({
+    state: 'visible',
+    timeout: 15000,
+  });
+
+  // Wait for WebSocket connection (best-effort in mock mode)
+  await page.locator('.connection-status--connected').waitFor({
+    state: 'visible',
+    timeout: 10000,
+  }).catch(() => { /* mock mode may not have WS */ });
+
+  // Add first track via sample picker
+  const kickBtn = page.locator('button:has-text("808 Kick"), button:has-text("Kick")').first();
+  if (await kickBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
+    await kickBtn.click();
+    await page.locator('.track-row').first().waitFor({ state: 'visible', timeout: 5000 });
+  }
+
+  // Add second track
+  const snareBtn = page.locator('button:has-text("808 Snare"), button:has-text("Snare")').first();
+  if (await snareBtn.isVisible({ timeout: 2000 }).catch(() => false)) {
+    await snareBtn.click();
+    await expect(page.locator('.track-row')).toHaveCount(2, { timeout: 5000 });
+  }
+}
+
+test.describe('Mixer Panel Layout', () => {
+  test('VU meter stays within mixer channel bounds', async ({ page }) => {
+    await setupSession(page);
+
+    // Open the mixer panel
+    const mixerBtn = page.locator('.mixer-btn, button:has-text("Mixer")').first();
+    await expect(mixerBtn).toBeVisible({ timeout: 5000 });
+    await mixerBtn.click();
+    await expect(page.locator('.mixer-panel-container.expanded')).toBeVisible({ timeout: 5000 });
+
+    // Check that all channel children stay within the channel bounds
+    const layoutCheck = await page.evaluate(() => {
+      const channels = document.querySelectorAll('.mixer-channel');
+      const results: Array<{
+        channelIndex: number;
+        channelHeight: number;
+        overflowingChildren: Array<{ class: string; height: number; bottom: number; channelBottom: number }>;
+      }> = [];
+
+      channels.forEach((channel, i) => {
+        const channelRect = channel.getBoundingClientRect();
+        const overflowing: Array<{ class: string; height: number; bottom: number; channelBottom: number }> = [];
+
+        Array.from(channel.children).forEach(child => {
+          const childRect = child.getBoundingClientRect();
+          // Allow 1px tolerance for rounding
+          if (childRect.bottom > channelRect.bottom + 1) {
+            overflowing.push({
+              class: child.className,
+              height: Math.round(childRect.height),
+              bottom: Math.round(childRect.bottom),
+              channelBottom: Math.round(channelRect.bottom),
+            });
+          }
+        });
+
+        results.push({
+          channelIndex: i,
+          channelHeight: Math.round(channelRect.height),
+          overflowingChildren: overflowing,
+        });
+      });
+
+      return results;
+    });
+
+    // No channel should have overflowing children
+    for (const channel of layoutCheck) {
+      expect(
+        channel.overflowingChildren,
+        `Channel ${channel.channelIndex} has children overflowing: ${JSON.stringify(channel.overflowingChildren)}`
+      ).toHaveLength(0);
+    }
+  });
+
+  test('fader has non-zero height in each channel', async ({ page }) => {
+    await setupSession(page);
+
+    await page.locator('.mixer-btn, button:has-text("Mixer")').first().click();
+    await expect(page.locator('.mixer-panel-container.expanded')).toBeVisible({ timeout: 5000 });
+
+    // Each fader container should have its designed height (120px)
+    const faderHeights = await page.evaluate(() => {
+      const faders = document.querySelectorAll('.channel-fader-container');
+      return Array.from(faders).map(f => Math.round(f.getBoundingClientRect().height));
+    });
+
+    expect(faderHeights.length).toBeGreaterThanOrEqual(1);
+    for (const height of faderHeights) {
+      expect(height, 'Fader should have its designed height (not collapsed to 0)').toBeGreaterThanOrEqual(100);
+    }
+  });
+
+  test('mixer channel elements scroll together with page', async ({ page }) => {
+    await setupSession(page);
+
+    await page.locator('.mixer-btn, button:has-text("Mixer")').first().click();
+    await expect(page.locator('.mixer-panel-container.expanded')).toBeVisible({ timeout: 5000 });
+
+    // Verify we have at least one channel
+    await expect(page.locator('.mixer-channel').first()).toBeVisible({ timeout: 5000 });
+
+    // Get initial positions of channel elements
+    const initialPositions = await page.evaluate(() => {
+      const channel = document.querySelector('.mixer-channel');
+      const mixerPanel = document.querySelector('.mixer-panel');
+      if (!channel || !mixerPanel) return null;
+
+      // Get first track-meter if exists, otherwise use channel name
+      const meterOrName = document.querySelector('.track-meter') || document.querySelector('.channel-name');
+      const fader = document.querySelector('.channel-fader-container');
+
+      return {
+        channelTop: channel.getBoundingClientRect().top,
+        panelTop: mixerPanel.getBoundingClientRect().top,
+        innerTop: meterOrName ? meterOrName.getBoundingClientRect().top : null,
+        faderTop: fader ? fader.getBoundingClientRect().top : null,
+      };
+    });
+
+    expect(initialPositions).not.toBeNull();
+
+    // Scroll the page
+    await page.evaluate(() => window.scrollBy(0, 150));
+    await page.waitForTimeout(100);
+
+    const afterPositions = await page.evaluate(() => {
+      const channel = document.querySelector('.mixer-channel');
+      const mixerPanel = document.querySelector('.mixer-panel');
+      if (!channel || !mixerPanel) return null;
+
+      const meterOrName = document.querySelector('.track-meter') || document.querySelector('.channel-name');
+      const fader = document.querySelector('.channel-fader-container');
+
+      return {
+        channelTop: channel.getBoundingClientRect().top,
+        panelTop: mixerPanel.getBoundingClientRect().top,
+        innerTop: meterOrName ? meterOrName.getBoundingClientRect().top : null,
+        faderTop: fader ? fader.getBoundingClientRect().top : null,
+      };
+    });
+
+    expect(afterPositions).not.toBeNull();
+
+    // All elements should have moved by the same amount (within 2px tolerance)
+    const panelDelta = afterPositions!.panelTop - initialPositions!.panelTop;
+    const channelDelta = afterPositions!.channelTop - initialPositions!.channelTop;
+    expect(Math.abs(channelDelta - panelDelta)).toBeLessThan(2);
+
+    if (initialPositions!.innerTop !== null && afterPositions!.innerTop !== null) {
+      const innerDelta = afterPositions!.innerTop - initialPositions!.innerTop;
+      expect(Math.abs(innerDelta - panelDelta)).toBeLessThan(2);
+    }
+
+    if (initialPositions!.faderTop !== null && afterPositions!.faderTop !== null) {
+      const faderDelta = afterPositions!.faderTop - initialPositions!.faderTop;
+      expect(Math.abs(faderDelta - panelDelta)).toBeLessThan(2);
+    }
+  });
+});

app/e2e/playback.spec.ts

@@ -58,14 +58,19 @@ test.describe('Playback stability', () => {
 
   test('should not flicker during playback - step changes are monotonic', async ({ page }) => {
 
-    // Track step changes via DOM mutations
+    // Track step changes via DOM mutations (scoped to step grid, excluding VU meters)
     await page.evaluate(() => {
       const win = window as Window & {
         __stepChanges: Array<{ count: number; time: number }>;
         __observer: MutationObserver;
       };
       win.__stepChanges = [];
-      const observer = new MutationObserver(() => {
+      const observer = new MutationObserver((mutations) => {
+        // Ignore mutations from VU meter elements (high-frequency style updates)
+        const isRelevant = mutations.some(m =>
+          !(m.target as Element).closest?.('.track-meter')
+        );
+        if (!isRelevant) return;
         const playingIndicators = document.querySelectorAll('.playing, [data-playing="true"]');
         win.__stepChanges.push({
           count: playingIndicators.length,