Generic components worked, but the calendar layer did not exist
/scheduleCaptured at a 375px viewport. Long pages scroll inside the frame.
The screenshots stay in Japanese. Every round is a real screen for a real Japanese industry, so an English re-render would no longer be the screen the agent actually produced.
Write-up
Generic components worked, but the calendar layer did not exist
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 week-view calendar and scheduler with positioned events.
As before, I supplied the shipped npm package and docs site while keeping the source private. The assignment was a Google Calendar-style week view with a toolbar (week navigation, Day, Week, and Month switching, and New), a seven-day time grid, an all-day lane, event blocks positioned from start and end times, with overlaps arranged side by side and category colors, a current-time marker, an event-detail Popover, a creation Dialog from an empty slot, and a single-day or list view at 375px.
Result: 4.5/5, with polished generic components and no domain layer
tsc and build passed, the console stayed clear, and the server and browser output matched with no hydration errors because a mounted flag delayed the current-time marker. The page had exactly one h1; each event was a labeled button such as "title, 10:00 to 11:00"; today used both color and screen-reader-only "(Today)" text; overlapping events sat side by side; all-day events occupied the top lane; nothing overflowed at 375px; and dark mode worked throughout.
Everything around event placement composed cleanly: ToggleGroup in segmented mode with role="radio", Dialog with focus containment and automatic ARIA, Popover with an overridable width, and tone tokens using bg-{tone}-subtle for five category colors. The agent also praised CardTitle as from issue #116 for the fourth time. Earlier fixes kept paying off.
Why it stopped at 4.5: no scheduler-specific rendering layer
@gunjo/ui has no scheduler rendering layer (issue #142, major). It provides no time-axis grid, positioned event blocks, overlap packing, all-day lane, or current-time marker. Calendar is a date picker built on react-day-picker, with no formal API for displaying events on dates beyond class-name hooks. The agent therefore hand-rolled about 280 lines for the week-view content plus the complete overlap-layout algorithm.
The generic components, including Card, Popover, Dialog, Button, and the tone tokens, formed a strong frame around the hand-rolled grid. The calendar-domain layout itself was absent.
What I fixed this round
- Issue #141:
Calendarenabled Japanese public holidays by default, which was surprising for international consumers of the public npm package. I changedshowHolidaysto default tofalse, making holidays opt-in. - I revised the scope of issue #140: the duplicate
w-72 w-[288px]androunded-md rounded-lgclasses inPopoverwere required by two drift checks that expected different expressions. Removing them as a simple cleanup would break verification, so the follow-up needs to align the drift-check infrastructure. - Issue #106, semantic
Badgetones: withoutinfo,success, andwarning, badges could not carry category colors. This was the second report after the missingsuccesstone in #20. Because the work included.pen(the design-source files), the complete tone set went to the design-side change.
The scheduler component in issue #142 was substantial new work, so it went to the beta gate.
What I took away: a generic library and a domain rendering layer are different things
Generic layer (shells, forms, overlays, charts, and tone tokens): strong enough to frame almost any screen
Domain rendering layer (scheduler, calendar, and time-axis grid): absent, even though it carries the substance of this screen
Earlier gaps were component defects or missing props. Round #27 exposed a different scale of problem: an entire domain-specific rendering layer was absent. Gunjo's generic layer remained strong, and the agent produced sound accessibility by hand, but a library that claims scheduler coverage needs dedicated components. The stronger the generic layer became, the clearer that missing domain layer looked. This was the same pattern as PricingTemplate in issue #80, at a larger scale.
Next up: build log #28
- An error page, setup wizard, or file browser, continuing to test domain layers and higher-level composition.
The run
- gunjo.jp / npm
@gunjo/ui/ GitHub - Earlier rounds: #1 through #26
- 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.
This series is co-created with AI (Claude and Codex). A human designs the experiments, makes the calls, and fact-checks before publishing; the AI does the hands-on work and drafting.
Components from @gunjo/ui
The components this screen's source imports directly.
The code the agent actually wrote
Click a file to expand its source.