diff --git a/.gitignore b/.gitignore
index 20a3f69..432e965 100644
--- a/.gitignore
+++ b/.gitignore
@@ -147,6 +147,7 @@ build/
 # Playwright
 test-results/
 playwright-report/
+e2e-results/
 playwright/.cache/
 e2e/.auth/
 
diff --git a/docs/superpowers/specs/2026-06-11-e2e-result-capture-index-design.md b/docs/superpowers/specs/2026-06-11-e2e-result-capture-index-design.md
new file mode 100644
index 0000000..96a2509
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-11-e2e-result-capture-index-design.md
@@ -0,0 +1,153 @@
+# E2E Per-Test Capture + Custom Result Index — Design
+
+**Date:** 2026-06-11
+**Status:** Approved (design); pending implementation plan
+**Scope:** Local-only tooling. No CI, backend, or app-code changes.
+
+## Problem
+
+The Playwright suite (182 tests) currently captures artifacts **only on failure**
+(`screenshot: 'only-on-failure'`, `video: 'retain-on-failure'`, `trace: 'on-first-retry'`).
+We want a visual record of **every** test case — passing and failing — usable for
+debugging, as a shareable deliverable, as living documentation, and as run evidence.
+
+## Goals
+
+- Capture video + screenshot + trace for **every** test (max fidelity, accepted cost).
+- Produce a **custom index page** that lists every test grouped by spec file, with
+  status, duration, an inline thumbnail, an inline playable video, and access to the trace.
+- Keep the output **self-contained and portable** (a folder that can be zipped and handed off).
+- Local only — runs from `bun run`/`npm run`; no CI wiring, no hosting.
+- **Zero new dependencies**; plain Node ESM script matching the repo's `scripts/*.mjs` convention.
+
+## Non-Goals
+
+- No CI workflow changes, no GitHub Pages / S3 publishing, no remote hosting.
+- No new runtime libraries, no template engine, no thumbnail-from-video (ffmpeg) step.
+- No changes to test specs, page objects, app code, or backend.
+
+## Chosen Approach
+
+**JSON reporter + standalone generator script** (decoupled, two-step).
+
+Playwright emits a JSON results file each run; a separate Node script reads it and
+builds the index. Decoupling means the index can be regenerated from the last run
+**without re-running the 182-test suite**, and the index page can be iterated cheaply.
+
+Rejected alternatives:
+- *Custom Playwright reporter class* — single-step but cannot regenerate without re-running
+  tests, and is coupled to the reporter API.
+- *Capture config only (built-in HTML report)* — under-delivers; the custom index was an
+  explicit requirement.
+
+## Design
+
+### 1. Capture config — `playwright.config.ts`
+
+Under `use`, change capture from failure-only to always-on; add a JSON reporter as the
+generator's data source.
+
+```ts
+reporter: [
+  ['list'],
+  ['html', { open: 'never' }],
+  ['json', { outputFile: 'e2e-results/results.json' }],   // NEW
+],
+use: {
+  // ...existing...
+  screenshot: 'on',   // was 'only-on-failure'  → end-of-test still used as thumbnail
+  video: 'on',        // was 'retain-on-failure' → .webm per test
+  trace: 'on',        // was 'on-first-retry'    → trace.zip per test
+},
+```
+
+- Local `retries: 0` is unchanged, so exactly one result/artifact set per test.
+- CI behavior (`retries: 2`, `workers: 1`) is unchanged; the generator picks the **last**
+  result per test, so retries degrade gracefully if ever run in CI.
+- **Cost (accepted):** video + trace across 182 tests materially increases runtime and disk
+  (expect hundreds of MB to ~1–2 GB per run).
+
+### 2. Generator script — `scripts/generate-e2e-index.mjs`
+
+Plain Node ESM, no dependencies. Behavior:
+
+1. Read `e2e-results/results.json`. If missing, exit with a clear message ("run the suite first").
+2. Walk `suites → (nested suites) → specs → tests → results → attachments`.
+   Take the **last** result per test.
+3. For each test, collect: spec file path, full test title, status
+   (`passed | failed | skipped | timedOut | interrupted`), duration, and attachment paths
+   by `name` (`video`, `screenshot`, `trace`).
+4. Copy attachments into `e2e-results/assets/<safe-test-id>/` with friendly names
+   (`thumb.png`, `video.webm`, `trace.zip`). `<safe-test-id>` is the Playwright test `id`
+   (or a slugified title fallback) sanitized to a filesystem-safe string. Copying makes
+   `e2e-results/` self-contained and zippable.
+5. Emit `e2e-results/index.html`.
+
+Edge cases:
+- **Skipped tests:** no media; render the row with a "skipped" badge and dashes for media.
+- **Missing attachment** (guard even though `'on'` should always produce them): omit that
+  cell gracefully; never crash.
+- **Title escaping:** HTML-escape all test titles / file paths.
+- **Stale assets:** clear/overwrite `e2e-results/assets/` and `index.html` at the start of
+  generation so the folder reflects only the latest run.
+
+### 3. Index page — `e2e-results/index.html`
+
+Single self-contained HTML file with inline CSS (no framework, no external assets beyond
+its own `assets/`). Lightly echoes the app's clean blue look; not theme-coupled.
+
+- **Header summary:** run timestamp, totals (total / passed / failed / skipped), total duration.
+- **Grouping:** sections per spec file (e.g. `cluster/ClusterManagement.spec.ts`), mirroring
+  the `e2e/tests/` layout.
+- **Per-test row:**
+  - status badge (pass = green/success, fail = destructive, skip = muted),
+  - full test title,
+  - duration,
+  - **thumbnail** — inline `<img src="assets/<id>/thumb.png">`,
+  - **video** — inline `<video controls src="assets/<id>/video.webm">`,
+  - **trace** access (see below).
+- **Trace handling** (`trace.zip` is not browser-viewable):
+  - (a) a copy-able command: `npx playwright show-trace e2e-results/assets/<id>/trace.zip`, and
+  - (b) a deep-link into the existing Playwright HTML report:
+    `../playwright-report/index.html#?testId=<id>` (its built-in trace viewer also shows
+    video + screenshots). If the report's testId differs, the link degrades to the report root.
+  - This keeps inline video/thumbnail shareable while preserving full step-level debugging.
+
+### 4. Wiring — `package.json` + `.gitignore`
+
+`package.json` scripts:
+```jsonc
+"test:e2e:index": "node scripts/generate-e2e-index.mjs",
+"test:e2e:full":  "npx playwright test; node scripts/generate-e2e-index.mjs"
+```
+- `test:e2e:full` uses `;` (not `&&`) so the index is generated **even when tests fail**.
+- `test:e2e:index` regenerates the page from the last run with no re-test.
+
+`.gitignore`: add `e2e-results/` (alongside existing `test-results/` and `playwright-report/`).
+
+## Verification
+
+1. Run the new config against **one small spec** (not the full suite).
+2. Run `node scripts/generate-e2e-index.mjs`.
+3. Open `e2e-results/index.html` and confirm:
+   - summary counts are correct,
+   - thumbnail renders,
+   - video plays inline,
+   - the trace command and report deep-link resolve,
+   - a skipped/failed row (if present) renders correctly.
+4. Then run the full suite once to confirm scale (grouping, disk, runtime) is acceptable.
+
+## Files Touched
+
+| File | Change |
+|------|--------|
+| `playwright.config.ts` | capture settings → `on`; add `json` reporter |
+| `scripts/generate-e2e-index.mjs` | **new** — generator |
+| `package.json` | add `test:e2e:index`, `test:e2e:full` scripts |
+| `.gitignore` | add `e2e-results/` |
+
+## Open Questions / Future (out of scope)
+
+- Optional CI publishing (GitHub Pages / S3) — deferred; design is local-only by choice.
+- Optional flag to reference `test-results/` in place instead of copying, to halve disk — not
+  built now; copying chosen for portability.
diff --git a/package.json b/package.json
index 77d9d9c..3a169bd 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,9 @@
     "test:e2e:ui": "npx playwright test --ui",
     "test:e2e:headed": "npx playwright test --headed",
     "test:e2e:debug": "npx playwright test --debug",
-    "test:e2e:report": "npx playwright show-report"
+    "test:e2e:report": "npx playwright show-report",
+    "test:e2e:index": "node scripts/generate-e2e-index.mjs",
+    "test:e2e:full": "npx playwright test; node scripts/generate-e2e-index.mjs"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
diff --git a/playwright.config.ts b/playwright.config.ts
index 380d0b4..1a14f21 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -12,14 +12,15 @@ export default defineConfig({
   reporter: [
     ['list'],
     ['html', { open: 'never' }],
+    ['json', { outputFile: 'e2e-results/results.json' }],
   ],
   use: {
     baseURL: process.env.BASE_URL || 'http://localhost:3100',
     headless: !!process.env.CI,
     ignoreHTTPSErrors: true,
-    screenshot: 'only-on-failure',
-    trace: 'on-first-retry',
-    video: 'retain-on-failure',
+    screenshot: 'on',
+    trace: 'on',
+    video: 'on',
     storageState: 'e2e/.auth/user.json',
   },
   projects: [
diff --git a/scripts/generate-e2e-index.mjs b/scripts/generate-e2e-index.mjs
new file mode 100644
index 0000000..e21bcb2
--- /dev/null
+++ b/scripts/generate-e2e-index.mjs
@@ -0,0 +1,68 @@
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  rmSync,
+  copyFileSync,
+  existsSync,
+} from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, extname } from 'node:path';
+import {
+  parseResults,
+  summarize,
+  renderIndexHtml,
+  safeId,
+} from './lib/e2e-index-format.mjs';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..');
+const outDir = join(root, 'e2e-results');
+const resultsPath = join(outDir, 'results.json');
+const assetsDir = join(outDir, 'assets');
+
+if (!existsSync(resultsPath)) {
+  console.error(
+    `No results at ${resultsPath}. Run the e2e suite first (e.g. bun run test:e2e:full).`
+  );
+  process.exit(1);
+}
+
+const report = JSON.parse(readFileSync(resultsPath, 'utf8'));
+const tests = parseResults(report);
+
+// Rebuild assets from scratch so the folder reflects only the latest run.
+rmSync(assetsDir, { recursive: true, force: true });
+mkdirSync(assetsDir, { recursive: true });
+
+// Playwright attachment name -> friendly basename in the index folder.
+const NAMES = { screenshot: 'thumb', video: 'video', trace: 'trace' };
+
+for (const test of tests) {
+  const id = safeId(test.id);
+  const dir = join(assetsDir, id);
+  test.assets = {};
+  let made = false;
+  for (const [attName, friendly] of Object.entries(NAMES)) {
+    const src = test.attachments[attName];
+    if (!src || !existsSync(src)) continue;
+    if (!made) {
+      mkdirSync(dir, { recursive: true });
+      made = true;
+    }
+    const ext = extname(src);
+    copyFileSync(src, join(dir, friendly + ext));
+    test.assets[friendly] = `assets/${id}/${friendly}${ext}`;
+  }
+}
+
+const summary = summarize(tests);
+const generatedAt = new Date().toISOString().replace('T', ' ').slice(0, 19);
+writeFileSync(
+  join(outDir, 'index.html'),
+  renderIndexHtml({ tests, summary, generatedAt })
+);
+
+console.log(
+  `Generated e2e-results/index.html — ${summary.total} test(s): ` +
+    `${summary.passed} passed, ${summary.failed} failed, ${summary.skipped} skipped.`
+);
diff --git a/scripts/lib/e2e-index-format.mjs b/scripts/lib/e2e-index-format.mjs
new file mode 100644
index 0000000..528392a
--- /dev/null
+++ b/scripts/lib/e2e-index-format.mjs
@@ -0,0 +1,178 @@
+// Pure helpers for building the E2E result index. No fs / I/O here.
+
+const FAIL_STATUSES = new Set(['failed', 'timedOut', 'interrupted']);
+
+export function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export function safeId(id) {
+  return String(id ?? 'unknown').replace(/[^a-zA-Z0-9_-]/g, '-');
+}
+
+export function formatDuration(ms) {
+  if (!ms) return '0ms';
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+// Recursively collect specs from the Playwright JSON report, tracking the
+// describe-title chain. The file-level suite title is the path, so the chain
+// starts empty and only accumulates nested describe() titles.
+export function parseResults(report) {
+  const tests = [];
+
+  const walkSuite = (suite, titleChain) => {
+    for (const spec of suite.specs ?? []) {
+      for (const test of spec.tests ?? []) {
+        const results = test.results ?? [];
+        const result = results[results.length - 1] ?? {};
+        const attachments = {};
+        for (const att of result.attachments ?? []) {
+          if (att.path && !attachments[att.name]) attachments[att.name] = att.path;
+        }
+        tests.push({
+          id: spec.id ?? `${spec.file}:${spec.line}`,
+          file: spec.file ?? suite.file ?? 'unknown',
+          titlePath: titleChain,
+          title: spec.title ?? '(untitled)',
+          status: result.status ?? 'unknown',
+          durationMs: result.duration ?? 0,
+          attachments,
+        });
+      }
+    }
+    for (const child of suite.suites ?? []) {
+      walkSuite(child, [...titleChain, child.title].filter(Boolean));
+    }
+  };
+
+  for (const fileSuite of report.suites ?? []) {
+    walkSuite(fileSuite, []);
+  }
+  return tests;
+}
+
+export function summarize(tests) {
+  const summary = { total: tests.length, passed: 0, failed: 0, skipped: 0, other: 0, durationMs: 0 };
+  for (const t of tests) {
+    summary.durationMs += t.durationMs || 0;
+    if (t.status === 'passed') summary.passed += 1;
+    else if (t.status === 'skipped') summary.skipped += 1;
+    else if (FAIL_STATUSES.has(t.status)) summary.failed += 1;
+    else summary.other += 1;
+  }
+  return summary;
+}
+
+function badge(status) {
+  const cls =
+    status === 'passed' ? 'pass'
+    : status === 'skipped' ? 'skip'
+    : FAIL_STATUSES.has(status) ? 'fail'
+    : 'other';
+  return `<span class="badge ${cls}">${escapeHtml(status)}</span>`;
+}
+
+function groupLabel(file) {
+  return escapeHtml(String(file).replace(/^.*e2e\/tests\//, ''));
+}
+
+function renderRow(test) {
+  const a = test.assets ?? {};
+  const thumb = a.thumb
+    ? `<img class="thumb" src="${escapeHtml(a.thumb)}" alt="thumbnail" loading="lazy">`
+    : '<span class="muted">—</span>';
+  const video = a.video
+    ? `<video class="vid" controls preload="none" src="${escapeHtml(a.video)}"></video>`
+    : '<span class="muted">—</span>';
+  const traceCmd = a.trace
+    ? `<code class="cmd">npx playwright show-trace ${escapeHtml(a.trace)}</code>`
+    : '<span class="muted">—</span>';
+  const reportLink = `<a href="../playwright-report/index.html#?testId=${escapeHtml(safeId(test.id))}" target="_blank" rel="noopener">open in report</a>`;
+  const name = [...(test.titlePath ?? []), test.title].map(escapeHtml).join(' › ');
+  return `
+    <tr>
+      <td>${badge(test.status)}</td>
+      <td class="name">${name}</td>
+      <td class="dur">${escapeHtml(formatDuration(test.durationMs))}</td>
+      <td>${thumb}</td>
+      <td>${video}</td>
+      <td class="trace">${traceCmd}<br>${reportLink}</td>
+    </tr>`;
+}
+
+export function renderIndexHtml({ tests, summary, generatedAt }) {
+  const groups = new Map();
+  for (const t of tests) {
+    if (!groups.has(t.file)) groups.set(t.file, []);
+    groups.get(t.file).push(t);
+  }
+  const sections = [...groups.entries()]
+    .map(
+      ([file, groupTests]) => `
+    <section>
+      <h2>${groupLabel(file)} <span class="count">(${groupTests.length})</span></h2>
+      <table>
+        <thead><tr><th>Status</th><th>Test</th><th>Duration</th><th>Thumbnail</th><th>Video</th><th>Trace</th></tr></thead>
+        <tbody>${groupTests.map(renderRow).join('')}</tbody>
+      </table>
+    </section>`
+    )
+    .join('');
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>E2E Results — ${escapeHtml(generatedAt)}</title>
+<style>
+  :root { --pass:#16a34a; --fail:#dc2626; --skip:#64748b; --primary:#2563eb; }
+  * { box-sizing: border-box; }
+  body { font-family: system-ui, -apple-system, sans-serif; margin: 0; color: #0f172a; background: #f8fafc; }
+  header { padding: 24px; background: #fff; border-bottom: 1px solid #e2e8f0; }
+  h1 { margin: 0 0 8px; font-size: 22px; }
+  .meta { color: #475569; font-size: 14px; }
+  .stats { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
+  .stat { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: #f1f5f9; }
+  .stat.pass { color: var(--pass); } .stat.fail { color: var(--fail); } .stat.skip { color: var(--skip); }
+  main { padding: 24px; }
+  section { margin-bottom: 32px; }
+  h2 { font-size: 16px; border-left: 3px solid var(--primary); padding-left: 10px; }
+  .count { color: #94a3b8; font-weight: 400; }
+  table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
+  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; font-size: 13px; }
+  th { background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; }
+  .badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: #fff; text-transform: uppercase; }
+  .badge.pass { background: var(--pass); } .badge.fail { background: var(--fail); } .badge.skip { background: var(--skip); } .badge.other { background: #a16207; }
+  .thumb { width: 160px; height: auto; border: 1px solid #e2e8f0; border-radius: 4px; }
+  .vid { width: 240px; height: auto; border-radius: 4px; background: #000; }
+  .name { font-weight: 500; }
+  .dur { color: #64748b; white-space: nowrap; }
+  .cmd { display: block; font-size: 11px; background: #f1f5f9; padding: 4px 6px; border-radius: 4px; word-break: break-all; }
+  .muted { color: #cbd5e1; }
+  a { color: var(--primary); }
+</style>
+</head>
+<body>
+<header>
+  <h1>E2E Test Results</h1>
+  <div class="meta">Generated ${escapeHtml(generatedAt)}</div>
+  <div class="stats">
+    <span class="stat">Total ${summary.total}</span>
+    <span class="stat pass">Passed ${summary.passed}</span>
+    <span class="stat fail">Failed ${summary.failed}</span>
+    <span class="stat skip">Skipped ${summary.skipped}</span>
+    <span class="stat">Duration ${escapeHtml(formatDuration(summary.durationMs))}</span>
+  </div>
+</header>
+<main>${sections || '<p>No test results found.</p>'}</main>
+</body>
+</html>`;
+}
diff --git a/scripts/lib/e2e-index-format.test.mjs b/scripts/lib/e2e-index-format.test.mjs
new file mode 100644
index 0000000..0ab5fc6
--- /dev/null
+++ b/scripts/lib/e2e-index-format.test.mjs
@@ -0,0 +1,119 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  parseResults,
+  summarize,
+  escapeHtml,
+  safeId,
+  formatDuration,
+} from './e2e-index-format.mjs';
+
+const fixture = {
+  suites: [
+    {
+      title: 'cluster/ClusterManagement.spec.ts',
+      file: 'e2e/tests/cluster/ClusterManagement.spec.ts',
+      specs: [
+        {
+          id: 'abc123',
+          title: 'lists clusters',
+          file: 'e2e/tests/cluster/ClusterManagement.spec.ts',
+          line: 10,
+          tests: [
+            {
+              results: [
+                {
+                  status: 'passed',
+                  duration: 1200,
+                  attachments: [
+                    { name: 'screenshot', path: '/tmp/test-finished-1.png' },
+                    { name: 'video', path: '/tmp/video.webm' },
+                    { name: 'trace', path: '/tmp/trace.zip' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      suites: [
+        {
+          title: 'filters',
+          specs: [
+            {
+              id: 'def456',
+              title: 'filters by status',
+              file: 'e2e/tests/cluster/ClusterManagement.spec.ts',
+              line: 20,
+              tests: [
+                { results: [{ status: 'skipped', duration: 0, attachments: [] }] },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+test('parseResults flattens specs across nested suites', () => {
+  const tests = parseResults(fixture);
+  assert.equal(tests.length, 2);
+  const [first, second] = tests;
+  assert.equal(first.title, 'lists clusters');
+  assert.deepEqual(first.titlePath, []);
+  assert.equal(first.status, 'passed');
+  assert.equal(first.attachments.video, '/tmp/video.webm');
+  assert.equal(second.title, 'filters by status');
+  assert.deepEqual(second.titlePath, ['filters']);
+  assert.equal(second.status, 'skipped');
+});
+
+test('summarize counts by status and sums duration', () => {
+  const s = summarize(parseResults(fixture));
+  assert.equal(s.total, 2);
+  assert.equal(s.passed, 1);
+  assert.equal(s.skipped, 1);
+  assert.equal(s.failed, 0);
+  assert.equal(s.durationMs, 1200);
+});
+
+test('escapeHtml and safeId sanitize input', () => {
+  assert.equal(escapeHtml('<b>"x"</b>'), '&lt;b&gt;&quot;x&quot;&lt;/b&gt;');
+  assert.equal(safeId('a/b c'), 'a-b-c');
+});
+
+test('formatDuration humanizes ms', () => {
+  assert.equal(formatDuration(0), '0ms');
+  assert.equal(formatDuration(500), '500ms');
+  assert.equal(formatDuration(1500), '1.5s');
+});
+
+import { renderIndexHtml } from './e2e-index-format.mjs';
+
+test('renderIndexHtml includes summary, groups, escaped names, media, trace', () => {
+  const parsed = parseResults(fixture);
+  const tests = parsed.map((t) => ({
+    ...t,
+    assets:
+      t.status === 'passed'
+        ? {
+            thumb: 'assets/abc123/thumb.png',
+            video: 'assets/abc123/video.webm',
+            trace: 'assets/abc123/trace.zip',
+          }
+        : {},
+  }));
+  const html = renderIndexHtml({
+    tests,
+    summary: summarize(tests),
+    generatedAt: '2026-06-11 10:00:00',
+  });
+  assert.match(html, /Passed 1/);
+  assert.match(html, /Skipped 1/);
+  assert.match(html, /ClusterManagement\.spec\.ts/);
+  assert.match(html, /assets\/abc123\/video\.webm/);
+  assert.match(html, /filters › filters by status/);
+  assert.match(html, /show-trace assets\/abc123\/trace\.zip/);
+  assert.match(html, /testId=abc123/);
+});