feat: TASK-001 - Playwright E2E test setup + baseline tests

- Added @playwright/test as dev dependency
- Created playwright.config.ts with Chromium config and webServer setup
- Created e2e/combat.spec.ts (5 tests for spire mode, floor display)
- Created e2e/enchanting.spec.ts (4 tests for design/crafting tab, enchant flow)
- Created e2e/equipment.spec.ts (5 tests for equip, slots, 2H blocking)
- Created docs/tasks/TASK-001-playwright-setup.md
- All 13 E2E tests passing

e2e/combat.spec.ts

@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * E2E tests for combat system:
+ * - Entering spire mode (climbing)
+ * - Casting spells and seeing progress
+ */
+
+test.describe('Combat System', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    // Clear game state to ensure a fresh start
+    await page.evaluate(() => {
+      Object.keys(localStorage)
+        .filter((k) => k.startsWith('mana-loop-'))
+        .forEach((k) => localStorage.removeItem(k));
+    });
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+  });
+
+  test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
+    // Verify Spire tab exists (uses ⚔️ icon)
+    const spireTab = page.getByRole('tab').filter({ hasText: '⚔️' });
+    await expect(spireTab).toBeVisible();
+
+    // Main page should show "Climb the Spire" button
+    const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
+    await expect(climbBtn).toBeVisible();
+  });
+
+  test('can enter Spire mode by clicking Climb button', async ({ page }) => {
+    // Click "Climb the Spire" button on the main page
+    await page.getByRole('button', { name: 'Climb the Spire' }).click();
+
+    // After clicking, spire mode activates and tab auto-switches to Spire tab.
+    // Since spireMode is now true, the Spire tab shows "Exit Spire Mode"
+    const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
+    await expect(exitBtn).toBeVisible({ timeout: 10000 });
+  });
+
+  test('can navigate to Spire tab and enter spire mode', async ({ page }) => {
+    // Click the Spire tab
+    await page.getByRole('tab').filter({ hasText: '⚔️' }).click();
+
+    // Should see the "Enter Spire Mode" button
+    const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
+    await expect(enterBtn).toBeVisible({ timeout: 5000 });
+  });
+
+  test('shows floor information after entering spire mode', async ({ page }) => {
+    // Navigate to spire mode first
+    await page.getByRole('button', { name: 'Climb the Spire' }).click();
+
+    // Now on spire tab with spire mode active
+    // The SpireHeader in simpleMode shows "Current Floor" section
+    // with the floor number, room badge, and stats
+    
+    // Check that we're on the spire tab
+    const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
+    await expect(spireTab).toBeVisible({ timeout: 5000 });
+
+    // The SpireHeader shows "Current Floor" in spire mode
+    const currentFloorLabel = page.getByText('Current Floor');
+    await expect(currentFloorLabel).toBeVisible({ timeout: 5000 });
+
+    // The floor number should be displayed (it's a text element)
+    // And "Best:" label is rendered alongside the floor count
+    const bestLabel = page.locator('text=Best:').first();
+    await expect(bestLabel).toBeVisible({ timeout: 5000 });
+  });
+
+  test('can navigate to Spire tab and see stats', async ({ page }) => {
+    await page.getByRole('tab').filter({ hasText: '⚔️' }).click();
+
+    // Spire stats section shows key info
+    expect(await page.getByText('Best Floor').count()).toBeGreaterThan(0);
+    expect(await page.getByText('Pacts Signed').count()).toBeGreaterThan(0);
+  });
+});