Round #137Score 4.5/5Transport: bus

Crew tools held across three modes, while expiry emerged as a missing axis

Route: /bus-dispatch
Desktop preview
Mobile preview

Captured 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 and airline crews in .

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.⁠ ScheduleGrid for duty rosters, Meter for hours consumed against a limit, ReferenceValue with flagValue for thresholds, ActionQueue for work requiring attention, SignedRecord and CoSign for one- and two-person confirmation, and PersonCell for drivers ⁠all worked without friction. Not one caused trouble, and their mode-independent crew-operations purpose was obvious.⁠

Rail crews in , airline crews in , 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 , this was the second case.⁠ Without prompting, the agent described the gap as the library's missing ⁠third axis⁠:

ExpiryCell or CurrencyBadge (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 of Meter (a value against a limit) and ReferenceValue (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 worked

After 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 ScheduleGrid matrix 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

  • 🟡 ThresholdGate for a breathalyzer pass or fail.⁠ The agent forced alcohol detected versus 0.00 into ReferenceValue, 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 graduated StatusLevel on issue #376.
  • 🟡 ⁠A status grid between MetadataList and DataTable.⁠ The agent hand-rolled grid-cols for roll call and qualifications because a TanStack table was too heavy for five rows that must remain visible. This reconfirmed the pattern seen in and .

⁠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 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

  • 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

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.

業界別「AI指示書パック」、先行登録を受付中です。