FE-M0-05 · The design preview, then merge pack A

ID FE-M0-05 · Level L0 · Run order row 24

Goal

/design-preview shows every ported component in light and dark when NEXT_PUBLIC_DESIGN_PREVIEW=1 and answers 404 otherwise; pack A is merged into main.

Before

FE-M0-04 is Done. You are on the branch web/design-system. Timeline row 13 is Done, so the pull request gets CI.

Run

1 · Copy the preview page and the apps/web guide for coding agents, which goes above Next.js's own block in AGENTS.md

cp -R ~/opleet-v2/packs/fe-pack-a/FE-M0-05/. .
cat apps/web/AGENTS.md >> apps/web/AGENTS.top.md
mv apps/web/AGENTS.top.md apps/web/AGENTS.md

2 · Look at the preview. Open http://localhost:3000/design-preview, compare it with ~/opleet-v2/packs/fe-pack-a/expected/design-preview-1280.png, narrow the window to phone width, then press Ctrl+C

NEXT_PUBLIC_DESIGN_PREVIEW=1 pnpm --filter web dev

3 · Without the flag the page is off. Open http://localhost:3000/design-preview again, then press Ctrl+C

pnpm --filter web dev

4 · Lint, typecheck, build and commit

pnpm lint
pnpm --filter web typecheck
pnpm --filter web build
git add -A apps/web
git commit -m "feat(web): add the design preview page"

5 · Push, open the pull request, merge. main changes only through a pull request (D26)

git push -u origin web/design-system
gh pr create --title "feat(web): the Opleet design system in apps/web" --body "FE pack A (FE-M0-02 to FE-M0-05), timeline row 24."
gh pr checks --watch
gh pr merge --squash --delete-branch
git switch main
git pull

Expect

Block 2: two panels, light then dark. Each has the wordmark, eight buttons, six badges (Lunas, Siap, Cicil, Terlambat, Terjadwal, Nonaktif), three tiles (1.248 / 1.410, 12, Rp 4,82 M), a table (B 1234 TOP, B 2210 MOP, L 8812 OP), four fields and three toasts. At phone width the page doesn't scroll sideways; only the table does.
Block 3: “404 This page could not be found.”
Block 4: the build lists /design-preview; then the commit line.
Block 5: checks and pr-title pass, then “✓ Squashed and merged pull request #…”.

Check

git log --oneline -1
git status --short

Expect: main's last commit is “feat(web): the Opleet design system in apps/web (#…)”; git status prints nothing.

If it fails

Block 2 shows the 404 page: the flag didn't reach Next. Stop the server and run block 2 again as one line.
A panel looks different from the screenshot in anything but the font: send the FE session a screenshot.
pr-title fails: run gh pr edit --title "feat(web): the Opleet design system in apps/web", then gh pr checks --watch again.

Undo

git switch main
git branch -D web/design-system

Before merging. After merging: revert it with a new pull request.

Runs

Done 2026-10-06 (zuki)