A profile page found polish issues, not structural failures

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. This round covered a ⁠user profile page⁠.

The agent worked from the shipped package and docs, without access to the source. The /profile assignment called for a header (avatar, name, bio, and statistics), follow and edit actions, Posts, About, and Activity tabs, profile metadata, an activity timeline, and an edit form in a modal with validation.

Result: 4.5/5, tied for the series high

tsc and build passed, the page was statically generated at build time, the console stayed clear, the server and browser output matched with no hydration errors, and nothing overflowed at 375px. More important, ⁠no new class of problem appeared.⁠

What did not appear: every middle-layer component was real

Round #17 found Pagination and Badge looking like finished components while providing only presentational markup. This time ⁠every middle-layer component delivered a complete composition⁠:

• Statistic derives its tone from the change and adds the corresponding trend icon.
• MetadataList uses real <dl>, <dt>, and <dd> elements.
• Timeline uses <ol>, <li>, and <time>, with the marker and connecting line handled for the consumer.
• The "+N" control in AvatarGroup is a ⁠focusable Popover⁠ that reveals the full list.
• Tabs is built on Radix with tablist, tab, and tabpanel roles plus arrow-key navigation. I verified movement from Posts to About to Activity in a real browser.

The cold agent put it plainly: ⁠none of these were merely a div with classes. Their names matched what they delivered.⁠ The base components had also gone four rounds, from #15 through #18, without a new bug.

What it did find: minor polish and lagging docs

⁠1. Dialog reached both edges of a mobile screen and lost its rounded corners.⁠ The horizontal margin applied only when portalContainer was set. I logged issue #97.

⁠2. MetadataList always truncated values.⁠ Long URLs and email addresses were cut off with no tooltip. I logged issue #98.

⁠3. The docs lagged behind the implementation.⁠ The Statistic page had the wrong import path (@gunjoui/components), the MetadataList types were barely documented, and Form did not say that it was presentational only. Trusting that name could lead someone to ship an accessibility failure. I consolidated these under issue #50.

I fixed the first two in the source and shipped them in ⁠PR #99⁠. The third belonged to the docs work at the beta gate.

What I took away: each round was finding smaller problems

#3: one crash shared by about 28 components, a critical failure
#13 through #16: dedicated components missing the job their names promised, a structural problem
#17: finished-looking controls that stopped at presentational markup, incomplete assembly
#18: mobile-edge polish and lagging docs, finishing work

⁠The problems had steadily moved from critical failures to structural defects to polish.⁠ The cold agent's summary captured it: ⁠"The components are ahead of their docs. I never had to fight the component itself; the struggle was always with the documentation about it. That is the kind of failure you see near the finish line."⁠

I was not ready to say that nothing remained, because this round still found minor defects. But it was clear that ⁠the active work had moved from the components to keeping the docs and the single source of truth aligned.⁠ Put plainly, ⁠Gunjo was getting close.⁠

Next up: build log #19

• ⁠An error page, notification settings, or an empty dashboard⁠, tightening the test for whether new findings had stopped.

The run

• ⁠gunjo.jp⁠ / npm @gunjo/ui / ⁠GitHub⁠
• Earlier rounds: #1 through #17
• Overview: Gunjo (@gunjo/ui) / Why it exists: Design systems in the age of AI
• ⁠GunjoUI by UIXHERO⁠

Gunjo was still in early alpha at the time; issues are welcome.