# frontend-designer — archive 2026-06.gist (L2 distill · 4-field · distill-gen 1)

> Coverage-gate: every gotcha#/lesson/file:line/root-cause/surprise in `2026-06.md` verbatim survives here (or N/A). Distilled @S96 (2026-07-01) from `2026-06.md`. FROZEN once written; re-distill bumps distill-gen.

### S66 hrm-2col-refine (2026-06-16)
- **task:** HRM Hồ sơ Nhân sự fe-user REFINE (anh prod-feedback): layout 3-cột→2-cột + tô màu detail (ACCENT 5-tone brand/teal/violet/amberx/greenx).
- **verdict:** build PASS 0 TS 495ms; 5 satellite CRUD + 15 api endpoint + 3 query keys VERBATIM (grep+tsc).
- **learned:** 2-col `lg:grid-cols-[22rem_1fr] xl:[24rem_1fr]`; left = tree(top, max-h-44%)+list(bottom) độc-lập-cuộn; Card `accent` prop → icon-chip tinted + head text-{x}-700 + rail pseudo.
- **surprise/gotcha:** accent palettes NO -800 (chỉ 50/100/500/600/700) → head -700 else silent no-class; rail pseudo cần `before:content-['']`; atomic-Write cả-file = anti-truncation #53.

### S65 hrm-3panel (2026-06-16)
- **task:** EmployeesListPage 1201→~1140 LOC → [Org tree | List | Detail 5-tab] master-detail (NamGroup-ref).
- **verdict:** build PASS 0 TS 6.13s; 5 CRUD + 16 api + query keys VERBATIM.
- **learned:** ONE atomic `Write` whole-file = anti-#53 (lands-fully-or-errors, no half-break); emit change-list BEFORE build; org-tree consume `/departments/tree` (DepartmentTreeNodeDto).
- **surprise/gotcha:** mojibake garbage token `网络Placeholder` in lucide import (autocomplete) → removed, node-checked 21 icons.

### S58 fe-user-redesign (2026-06-11)
- **task:** mirror fe-admin S55 design-system → 14 file fe-user, KEEP brand #1F7DC1.
- **verdict:** build ×2 PASS 0 TS; shipped `e959f72` (em-main PROXY — FD truncated #53 mid-run).
- **learned:** rubric = AI_INFRA `ui-ux-design-guide.md` 13-mục (density 14px/h32/radius-8/thead-sticky/action-luôn-hiện). **LESSON: 2× consecutive truncate at SAME point (start of FD2 screenshot rig) → EMIT file-list+build verdict BEFORE screenshot loop.**
- **surprise/gotcha:** #53 truncate at rig-entry (2nd consecutive); authed visual via deploy (rig gotcha #3 standing).

### S55 density-namgroup (2026-06-09)
- **task:** Phase-1 fe-admin redesign density-first (NAMGROUP-ref, 14 file), KEEP brand.
- **verdict:** build 0 TS; em-main proxy (truncated #53). → S58 mirrored to fe-user.
- **learned:** density ladder (Button h-7/8/10 brand-ring); brand #1F7DC1 + Be Vietnam Pro kept.
- **surprise/gotcha:** visual loop BLOCKED by authed-rig #3 → chỉ /login screenshot.

### S47 fd2-rig-verified (2026-06-02)
- **task:** first real spawn — run full FD2 visual-verification loop end-to-end on fe-user /login.
- **verdict:** loop REAL (screenshot 375+1440 → FD4 critique → 1-line contrast fix slate-500→600 → re-shot → build 0 TS); closes adap-report FD2 runtime proof.
- **learned:** Tailwind v4 CSS-first (no config.js; tokens in `index.css` @theme, brand-600=#1f7dc1); with_server.py rig pattern (Python Playwright not npm).
- **surprise/gotcha:** 2 Vite gotchas — (1) `networkidle` NEVER fires (HMR ws) → `domcontentloaded`+`wait_for_selector`; (2) first cold goto dep-optimize >15s → warm-up goto 60s timeout.