ARCODANGE Phase 1 - autonomous run via Mistral Vibe with ICM workspace at ~/Work/Vibe/workspaces/frontend-storybook-playwright-docs/. ~95 % autonomy; trainer (Claude) finalized commit/PR (Mistral hit max-turns at €3.87 with code complete).
🤖 Co-Authored-By: Mistral Vibe (devstral-2 / mistral-medium-3.5) + Claude Opus 4.7
## Summary
Three additions to make frontend PRs reviewable directly from the Gitea web UI (per user request 2026-05-03):
1. **Storybook 8** for Vue 3 components (with HealthDashboard story)
2. **Playwright config**: JSON reporter + screenshot on every test
3. **Auto-generated markdown docs** with breadcrumb navigation + embedded screenshots
User's framing: "rien que depuis l'interface gitea en ligne on puisse jauger du travail."
## What you can see in this PR (Gitea web UI demo)
- Browse to [`frontend/docs/e2e/README.md`](frontend/docs/e2e/README.md) — list of e2e tests
- Click [home-page-loads-and-shows-server-health-info.md](frontend/docs/e2e/home-page-loads-and-shows-server-health-info.md) — see test status, duration, embedded screenshot
- Use the breadcrumb `[<- Back to index]` to navigate back
## Try it locally
```bash
cd frontend
npm install
npm run storybook # http://localhost:6006
npm run docs:gen # runs Playwright + regenerates docs/e2e/*.md
```
## Files changed
- `.gitignore`: frontend exclusions (storybook-static, test-results, playwright-report)
- `frontend/.storybook/{main,preview}.ts`: Storybook 8 config
- `frontend/components/HealthDashboard.stories.ts`: 1 example story
- `frontend/playwright.config.ts`: JSON reporter + screenshots
- `frontend/tests/e2e/health.spec.ts`: explicit screenshot path
- `frontend/scripts/generate-test-docs.mjs`: doc generator
- `frontend/docs/README.md`: top-level frontend docs index
- `frontend/docs/e2e/README.md`: e2e index (auto-generated, committed)
- `frontend/docs/e2e/<test-slug>.md`: per-test docs (auto-generated, committed)
- `frontend/tests/e2e/screenshots/<slug>.png`: screenshots (committed for Gitea preview)
- `frontend/package.json` + `package-lock.json`: devDeps + scripts `docs:gen`, `docs:full`
## Out of scope
- Visual regression testing
- Storybook hosted preview deployment
- More e2e test coverage (only 1 test for now)
## Migration context
ARCODANGE Phase 1 - autonomous run via Mistral Vibe with ICM workspace at `~/Work/Vibe/workspaces/frontend-storybook-playwright-docs/`. ~95 % autonomy; trainer (Claude) finalized commit/PR (Mistral hit max-turns at €3.87 with code complete).
🤖 Co-Authored-By: Mistral Vibe (devstral-2 / mistral-medium-3.5) + Claude Opus 4.7
Adds three things to make frontend PRs reviewable directly from Gitea web UI:
1. Storybook 8 for Vue 3 components
- .storybook/main.ts + preview.ts
- HealthDashboard.stories.ts (1 example story)
- npm run storybook / npm run build-storybook
2. Playwright JSON reporter + screenshot on every test
- playwright.config.ts: json reporter + screenshot: 'on'
- health.spec.ts: explicit screenshot path
3. Auto-generated markdown docs with breadcrumbs
- scripts/generate-test-docs.mjs: reads results.json -> generates docs/e2e/<test>.md per test
- docs/README.md: top-level frontend docs index
- docs/e2e/README.md: e2e index with link to each test
- Each test markdown has breadcrumb [<- Back to index]
- Screenshots embedded via relative path
Companion to PR #25 (Nuxt scaffold).
Out of scope (future PRs):
- Visual regression testing
- Storybook deployment / hosted preview
- More e2e test coverage
🤖 Co-Authored-By: Mistral Vibe <[email protected]>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Summary
Three additions to make frontend PRs reviewable directly from the Gitea web UI (per user request 2026-05-03):
User's framing: "rien que depuis l'interface gitea en ligne on puisse jauger du travail."
What you can see in this PR (Gitea web UI demo)
frontend/docs/e2e/README.md— list of e2e tests[<- Back to index]to navigate backTry it locally
Files changed
.gitignore: frontend exclusions (storybook-static, test-results, playwright-report)frontend/.storybook/{main,preview}.ts: Storybook 8 configfrontend/components/HealthDashboard.stories.ts: 1 example storyfrontend/playwright.config.ts: JSON reporter + screenshotsfrontend/tests/e2e/health.spec.ts: explicit screenshot pathfrontend/scripts/generate-test-docs.mjs: doc generatorfrontend/docs/README.md: top-level frontend docs indexfrontend/docs/e2e/README.md: e2e index (auto-generated, committed)frontend/docs/e2e/<test-slug>.md: per-test docs (auto-generated, committed)frontend/tests/e2e/screenshots/<slug>.png: screenshots (committed for Gitea preview)frontend/package.json+package-lock.json: devDeps + scriptsdocs:gen,docs:fullOut of scope
Migration context
ARCODANGE Phase 1 - autonomous run via Mistral Vibe with ICM workspace at
~/Work/Vibe/workspaces/frontend-storybook-playwright-docs/. ~95 % autonomy; trainer (Claude) finalized commit/PR (Mistral hit max-turns at €3.87 with code complete).🤖 Co-Authored-By: Mistral Vibe (devstral-2 / mistral-medium-3.5) + Claude Opus 4.7