Crew tools held across three modes, while expiry emerged as a missing axis
/bus-dispatchCaptured 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
Crew tools held across three modes, while expiry emerged as a missing axis
Build log series: I give an AI that has never seen Gunjo (
@gunjo/ui) only the public npm package and the gunjo.jp docs, then ask it to build a real screen. This second staff-facing bus round covered a depot dispatch and driver management console: duty rosters, vehicle assignment, roll call and breathalyzer checks, hours on duty, and qualification expiry. It was the bus counterpart to rail crews in #107 and airline crews in #131.
Result: 4.5/5. The crew and dispatch foundation held in a third mode
The desktop-density screen passed tsc. The agent reported:
The administrative set was genuinely designed for bus crews rather than adapted after the fact.
ScheduleGridfor duty rosters,Meterfor hours consumed against a limit,ReferenceValuewithflagValuefor thresholds,ActionQueuefor work requiring attention,SignedRecordandCoSignfor one- and two-person confirmation, andPersonCellfor drivers all worked without friction. Not one caused trouble, and their mode-independent crew-operations purpose was obvious.
Rail crews in #107, airline crews in #131, and bus dispatch and drivers here made three modes with no structural hand-rolling in the crew foundation.
The first core observation: ExpiryBadge at two of three revealed a third axis
The agent hand-rolled a driver qualification matrix for commercial licenses, aptitude assessments, and medical exams, with valid, expiring soon, and lapsed states. It used a CSS grid of PersonCell against those three qualifications plus badges for days remaining. After airline crew qualifications in #131, this was the second case. Without prompting, the agent described the gap as the library's missing third axis:
ExpiryCellorCurrencyBadge(a badge for whether a license is still current, not money) maps a date against a deadline into valid, expiring soon, or lapsed, plus days remaining, without relying on color. It is the date-domain sibling ofMeter(a value against a limit) andReferenceValue(a value against a range). The library covers value against limit and value against range beautifully. The missing axis is value against deadline. Every mode needs it in crew, asset, and compliance consoles: rail licenses, airline qualifications, commercial bus licenses, and forklift certificates.
I added the second case to issue #383. Meter, ReferenceValue, and ExpiryBadge form a capacity, range, and deadline set. The gap had become an orthogonal axis, not an isolated component request.
The second core observation: the catalog fix from #131 worked
After #131 falsely directed qualification expiry to ReferenceValue, I clarified in PR#384 that ReferenceValue is numeric and that expiry should currently combine ScheduleGrid with a badge for days remaining. Here the agent said:
The library is honest. The catalog told me to use a
ScheduleGridmatrix and color-coded days-remaining badges. I did not waste time looking for a component that does not exist.
The catalog prevented a false lead. The component itself still waited at two of three. Accurately documenting a gap and accumulating enough evidence to build it happen at separate layers.
What it flagged
- 🟡
ThresholdGatefor a breathalyzer pass or fail. The agent forced alcohol detected versus 0.00 intoReferenceValue, overwriting every label to remove its clinical flavor. The core roll-call check borrowed a lab-value display. I added this binary gate as a relative of the graduatedStatusLevelon issue #376. - 🟡 A status grid between
MetadataListandDataTable. The agent hand-rolledgrid-colsfor roll call and qualifications because a TanStack table was too heavy for five rows that must remain visible. This reconfirmed the pattern seen in #133 and #134.
Nothing new was added under src this round. The 4.5/5 confirmed the foundation in a third mode and left ExpiryBadge at two of three.
What I took away: seeing the gap as an axis determines the design
ExpiryBadge first appeared in #131 and returned here. The important result was not just the count. The agent placed it alongside value against a limit (Meter) and value against a range (ReferenceValue) as value against a deadline. Once the gap is an axis, the API follows from its siblings: a date and thresholds produce three states plus days remaining, with cues beyond color. The third case still matters, but the design can mature while it waits. Stringline spent 30 rounds gathering enough evidence for a strong specification; this was another form of the same principle.
📊 Component scoreboard (12 built)
AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary / TicketStub / Stringline In progress: ExpiryBadge at two of three, StatusBoard at two of three, an intraday Gantt mode, StatusLevel or ThresholdGate, a status grid, and CheckboxCard.
📋 Mode progress
- ✈️ Air: five staff + six passenger screens ✅ / 🚆 Rail: five staff + six passenger screens ✅
- 🚌 Bus: two staff screens (operations and dispatch or crews) / remaining passenger routes, arrivals, and fares
Next up: build log #138
- A passenger-facing bus screen for stops, arrivals, fares, and boarding. It will test the cross-industry strength of the mobile consumer foundation in a third mode.
The run
- gunjo.jp / ScheduleGrid / Meter / ReferenceValue / npm
@gunjo/ui/ GitHub / previous rounds #1 through #136 - GunjoUI by UIXHERO
The foundation held in a third mode, and the gap pointed to the missing deadline axis beside Meter and ReferenceValue. Seeing an axis lets the specification mature before the third case arrives.
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.