[LKPR-137] chore: E2E + visual regression test suite (Playwright)

src/dashboard_v2/.gitignore

@@ -4,3 +4,9 @@ build/
 .env
 .env.*
 !.env.example
+
+
+# Playwright
+tests/visual-baseline/
+test-results/
+playwright-report/

src/dashboard_v2/package.json

@@ -12,10 +12,15 @@
 		"lint": "eslint src/",
 		"lint:css": "stylelint \"src/**/*.svelte\"",
 		"test": "vitest run",
-		"test:watch": "vitest"
+		"test:watch": "vitest",
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui",
+		"test:visual": "playwright test --grep @visual",
+		"test:visual:update": "playwright test --grep @visual --update-snapshots"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
+		"@playwright/test": "^1.61.1",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.20.6",
 		"@sveltejs/vite-plugin-svelte": "^5.1.1",

src/dashboard_v2/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+	testDir: './tests',
+	timeout: 30_000,
+	retries: 0,
+	use: {
+		baseURL: 'http://127.0.0.1:7777',
+		screenshot: 'only-on-failure',
+	},
+	projects: [
+		{
+			name: 'chromium',
+			use: {
+				...devices['Desktop Chrome'],
+				viewport: { width: 1440, height: 900 },
+			},
+		},
+	],
+	webServer: {
+		command: 'npm run build && npm run preview -- --port 7777',
+		url: 'http://127.0.0.1:7777',
+		reuseExistingServer: !process.env.CI,
+		timeout: 120_000,
+	},
+});

src/dashboard_v2/tests/home.spec.ts

@@ -0,0 +1,27 @@
+/**
+ * Home page E2E tests
+ * @see LKPR-137 ACs: health ring, stat tiles, activity feed
+ */
+import { test, expect } from '@playwright/test';
+
+test.describe('Home page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/');
+	});
+
+	test('loads health ring section', async ({ page }) => {
+		await expect(page.locator('[aria-labelledby="health-card-title"]')).toBeVisible({ timeout: 10_000 });
+	});
+
+	test('loads activity section', async ({ page }) => {
+		await expect(page.locator('[aria-labelledby="activity-heading"]')).toBeVisible({ timeout: 10_000 });
+	});
+
+	test('stat tiles are present', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		// Home renders 4 .stat-link tile wrappers — assert their presence directly
+		await expect(page.locator('.stat-link').first()).toBeVisible({ timeout: 10_000 });
+		const count = await page.locator('.stat-link').count();
+		expect(count).toBeGreaterThanOrEqual(4);
+	});
+});

src/dashboard_v2/tests/links.spec.ts

@@ -0,0 +1,60 @@
+/**
+ * Links page E2E tests
+ * @see LKPR-137 ACs: table loads, relationship drawer opens, delete confirms
+ */
+import { test, expect } from '@playwright/test';
+
+test.describe('Links page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/links');
+	});
+
+	test('loads links table', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const content = page.locator('[aria-label="Memory links table"], .empty-state, table');
+		await expect(content.first()).toBeVisible({ timeout: 10_000 });
+	});
+
+	test('opens relationship drawer on row click', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const rowLink = page.locator('[aria-label^="Open link:"]').first();
+		if (await rowLink.count() === 0) { test.skip(); return; }
+		await rowLink.click();
+		await expect(page.getByRole('dialog', { name: 'Relationship' })).toBeVisible({ timeout: 5_000 });
+	});
+
+	test('relationship drawer delete requires confirmation', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const rowLink = page.locator('[aria-label^="Open link:"]').first();
+		if (await rowLink.count() === 0) { test.skip(); return; }
+		await rowLink.click();
+		const drawer = page.getByRole('dialog', { name: 'Relationship' });
+		await expect(drawer).toBeVisible({ timeout: 5_000 });
+
+		// "Delete link" button must exist in an open drawer
+		const deleteBtn = drawer.locator('button').filter({ hasText: /delete link/i }).first();
+		await expect(deleteBtn).toBeVisible({ timeout: 3_000 });
+		await deleteBtn.click();
+		// Confirmation text should appear
+		await expect(drawer.locator('button').filter({ hasText: /delete this link/i })).toBeVisible({ timeout: 3_000 });
+	});
+
+	test('relationship drawer cancel restores normal state', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const rowLink = page.locator('[aria-label^="Open link:"]').first();
+		if (await rowLink.count() === 0) { test.skip(); return; }
+		await rowLink.click();
+		const drawer = page.getByRole('dialog', { name: 'Relationship' });
+		await expect(drawer).toBeVisible({ timeout: 5_000 });
+
+		const deleteBtn = drawer.locator('button').filter({ hasText: /delete link/i }).first();
+		await expect(deleteBtn).toBeVisible({ timeout: 3_000 });
+		await deleteBtn.click();
+		// Cancel button appears
+		const cancelBtn = drawer.getByRole('button', { name: /cancel/i });
+		await expect(cancelBtn).toBeVisible({ timeout: 3_000 });
+		await cancelBtn.click();
+		// Back to normal — "Delete link" button (not confirmation)
+		await expect(drawer.locator('button').filter({ hasText: /^delete link$/i })).toBeVisible();
+	});
+});

src/dashboard_v2/tests/memories.spec.ts

@@ -0,0 +1,65 @@
+/**
+ * Memories page E2E tests
+ * @see LKPR-137 ACs: data table loads, sort, paginate, row click → drawer, edit mode
+ */
+import { test, expect } from '@playwright/test';
+
+test.describe('Memories page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/memories');
+	});
+
+	test('loads data table', async ({ page }) => {
+		// Toolbar is a plain <div aria-label="Memory toolbar"> with no role="group"
+		await expect(page.locator('[aria-label="Memory toolbar"]')).toBeVisible({ timeout: 10_000 });
+		// Table renders — either rows or skeleton/empty state
+		const table = page.locator('table, [aria-label="Loading memories"], [aria-label*="memory"]');
+		await expect(table.first()).toBeVisible({ timeout: 10_000 });
+	});
+
+	test('sorts by column header click', async ({ page }) => {
+		// Click "Title" column header to sort
+		const titleHeader = page.getByRole('columnheader', { name: /Title/i });
+		await expect(titleHeader).toBeVisible({ timeout: 10_000 });
+		await titleHeader.click();
+		await expect(page).toHaveURL(/sort=title/);
+	});
+
+	test('pagination controls render when data present', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const hasRows = await page.locator('tbody tr').count();
+		if (hasRows === 0) {
+			// No data — just confirm empty state is shown
+			await expect(page.locator('table, .empty-state')).toBeVisible({ timeout: 10_000 });
+			return;
+		}
+		// Pagination component should be visible when rows exist
+		const pagination = page.locator('.pagination, [aria-label*="Pagination"], [aria-label*="page"]');
+		await expect(pagination.first()).toBeVisible({ timeout: 10_000 });
+	});
+
+	test('row click opens Memory detail drawer', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const firstRow = page.locator('tbody tr').first();
+		if (await firstRow.count() === 0) {
+			test.skip(); // no data in test environment
+			return;
+		}
+		await firstRow.click();
+		await expect(page.getByRole('dialog', { name: 'Memory detail' })).toBeVisible({ timeout: 5_000 });
+	});
+
+	test('memory detail drawer switches to edit mode', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const firstRow = page.locator('tbody tr').first();
+		if (await firstRow.count() === 0) { test.skip(); return; }
+		await firstRow.click();
+		const drawer = page.getByRole('dialog', { name: 'Memory detail' });
+		await expect(drawer).toBeVisible({ timeout: 5_000 });
+		// Edit mode reveals title input field — require edit button to be present
+		const editBtn = drawer.locator('button').filter({ hasText: /edit/i }).first();
+		await expect(editBtn).toBeVisible({ timeout: 3_000 });
+		await editBtn.click();
+		await expect(drawer.locator('#drawer-title')).toBeVisible();
+	});
+});

src/dashboard_v2/tests/metrics.spec.ts

@@ -0,0 +1,26 @@
+/**
+ * Metrics page E2E tests
+ * @see LKPR-137 ACs: heatmap renders, tooltip shows on hover
+ */
+import { test, expect } from '@playwright/test';
+
+test.describe('Metrics page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/metrics');
+	});
+
+	test('heatmap grid renders', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		const heatmap = page.locator('.heatmap-grid, .heatmap-card');
+		await expect(heatmap.first()).toBeVisible({ timeout: 10_000 });
+	});
+
+	test('heatmap cell tooltip shows on hover', async ({ page }) => {
+		await page.waitForLoadState('networkidle');
+		// Find first heatmap cell with data (role="button")
+		const cell = page.locator('.hm-cell[role="button"]').first();
+		if (await cell.count() === 0) { test.skip(); return; }
+		await cell.hover();
+		await expect(page.locator('[role="tooltip"]')).toBeVisible({ timeout: 3_000 });
+	});
+});