test(e2e): wire Playwright to the UI Lab with scenario smoke tests

tests/example.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/')
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/)
-})
-
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/')
-
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click()
-
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible()
-})

tests/ui-lab.spec.ts

@@ -0,0 +1,93 @@
+import { test, expect, type Page } from '@playwright/test'
+
+// Smoke tests against the Phokus UI Lab (docs/ui-lab.md) — a browser-only dev
+// mode that runs the real App.tsx/store/components against seeded, in-memory
+// mock fixtures selected via the `?scenario=` query param.
+
+const browserErrors = new WeakMap<Page, string[]>()
+
+test.beforeEach(async ({ page }) => {
+  const errors: string[] = []
+  browserErrors.set(page, errors)
+
+  page.on('console', (message) => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  page.on('pageerror', (error) => errors.push(error.message))
+})
+
+test.afterEach(async ({ page }) => {
+  expect(browserErrors.get(page) ?? []).toEqual([])
+})
+
+test.describe('gallery scenarios', () => {
+  test('rich scenario renders the gallery grid with folders in the sidebar', async ({ page }) => {
+    await page.goto('/?scenario=rich')
+
+    await expect(page.getByText('Camera Roll', { exact: true })).toBeVisible()
+    await expect(page.getByText('Client Selects', { exact: true })).toBeVisible()
+    await expect(page.getByText('Video Archive', { exact: true })).toBeVisible()
+
+    await expect(page.getByRole('button', { name: /^Open / }).first()).toBeVisible()
+  })
+
+  test('filename search filters the visible gallery results', async ({ page }) => {
+    await page.goto('/?scenario=rich')
+
+    const search = page.getByPlaceholder('Search files, or use /s /t')
+    await search.fill('coastal-walk-003')
+
+    await expect(page.getByText('Filename')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Open coastal-walk-003.jpg' })).toBeVisible()
+    await expect(page.getByRole('button', { name: /^Open / })).toHaveCount(1)
+  })
+
+  test('empty scenario shows the empty library without the onboarding tour', async ({ page }) => {
+    await page.goto('/?scenario=empty')
+
+    await expect(page.getByText('No media found')).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Welcome' })).not.toBeVisible()
+  })
+
+  test('new-user scenario opens the onboarding tour on step 1', async ({ page }) => {
+    await page.goto('/?scenario=new-user')
+
+    await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible()
+    await expect(page.getByText('Step 1 of 8')).toBeVisible()
+  })
+
+  test('duplicates fixture data shows cached groups in Duplicate Finder', async ({ page }) => {
+    await page.goto('/?scenario=duplicates')
+
+    await page.getByText('Duplicates', { exact: true }).click()
+
+    await expect(page.getByRole('heading', { name: 'Duplicate Finder' })).toBeVisible()
+    await expect(page.getByText(/\d+ groups? · .* reclaimable/)).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Select all duplicates' })).toBeVisible()
+  })
+})
+
+test.describe("what's new", () => {
+  test('just-updated scenario shows the toast and opens the modal on click', async ({ page }) => {
+    await page.goto('/?scenario=just-updated')
+
+    const toastButton = page.getByRole('button', { name: "What's new" })
+    await expect(toastButton).toBeVisible()
+    await toastButton.click()
+
+    await expect(page.getByRole('heading', { name: /^Phokus v/ })).toBeVisible()
+  })
+
+  test('just-updated + unreleased changelog opens the modal with the section nav rail', async ({
+    page,
+  }) => {
+    await page.goto('/?scenario=just-updated&changelog=unreleased')
+
+    await page.getByRole('button', { name: "What's new" }).click()
+
+    await expect(page.getByRole('heading', { name: /^Phokus v/ })).toBeVisible()
+    const sectionRail = page.getByRole('navigation')
+    await expect(sectionRail.getByRole('button', { name: /Added/ })).toBeVisible()
+    await expect(sectionRail.getByRole('button', { name: /Changed/ })).toBeVisible()
+  })
+})