A Gantt built for aircraft rotations worked as-is on a construction site
/construction-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
A Gantt built for aircraft rotations worked as-is on a construction site
Build log series: I give an AI that has never seen my design system
@gunjo/uionly the public npm package and the gunjo.jp docs, and have it build real screens. The series now moves into construction. The brief: a construction schedule screen for a site supervisor. The screen combines schedule bars for each type of work, progress and work completed, the contractor in charge, milestones, weather, and site operations.
Result: 4/5. The scheduling component crossed industries without modification
The construction schedule passes tsc and works at both mobile and desktop widths.
The Gantt scheduling component fit a construction schedule with almost no changes, even though it was not built for construction. This Gantt was originally added to Gunjo for aircraft rotations and production-line resource planning. Its rows and time axis, the today marker, the interaction for selecting a bar and opening its details, and even its ARIA labels carried straight over to a schedule of construction work.
The existing components also fit naturally outside the schedule itself.
-
Timeline handled milestones such as interim inspections, framing completion, and handover out of the box. -
Meter has a target and a higher-is-better flag, so overall completion against target mapped straight onto construction progress. -
DataTable supported both the list of work types and the detail view through clickable rows and small meters inside cells. -
StatGroup inverted the good/bad color mapping for a metric where an increase is bad, such as the number of delays.
Same components, different industry. Construction showed that the pattern holds.
What was missing: dependency lines and progress inside the schedule bars
At the same time, two construction-specific requirements exposed clear gaps in Gunjo. Both are missing features in the scheduling component.
- There is no way to connect predecessor and successor work with lines. The brief called for dependencies such as "the frame starts after the foundation is complete" to appear as lines between schedule bars, but
Ganttdoes not support them. The agent fell back to listing the preceding work as text in the detail panel. Dependencies are one of the most important parts of a construction schedule, so this is the largest gap. - There is no way to fill a bar to show progress (work completed). Each bar needed to show how far that type of work had progressed, but this is not available as a standard feature either. The agent borrowed a mechanism intended for another purpose as a substitute.
The agent also hand-rolled part of the color legend and the loading skeleton because the existing components did not cover either one. That hand-rolled code was about 80 lines out of roughly 870 for the whole screen, which kept the custom work limited. The agent assembled most of the screen from existing components.
I follow the rule of three: a missing component gets built for real and added to Gunjo only after three separate screens have needed it independently. This is only the first appearance of dependency lines and progress inside bars.
Where the names got confusing
The scheduling components have similar names, which made the choice unclear. ScheduleGrid looks like the leading candidate from its name alone, but it is a timetable organized by period and day of the week, not a project schedule. Gantt was the right component. The names were not enough to decide, and the purpose became clear only after reading each description. The entry point for finding components by use case needs to be more prominent.
Wrapping up
The strongest result was that Gantt, built for aircraft rotations and production lines, carried the construction schedule almost unchanged. Dependency lines and progress fills are the two construction requirements it still lacks.
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.