Baggage tracking is where RouteStops finally fit after four wrong turns
/baggage-trackingCaptured 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
Baggage tracking is where RouteStops finally fit after four wrong turns
Build log series: For each round, an AI unfamiliar with Gunjo (
@gunjo/ui) receives the public npm package and the gunjo.jp docs, then builds a real screen. Continuing the deeper passenger-facing air work from the passenger backlog, this was baggage tracking, following a checked bag from acceptance through security screening, loading, transport, arrival, and ready for pickup.
Result: 4/5, high for this stretch, for one reason: RouteStops fit
The screen passed tsc and fit a 375px mobile-first layout. The agent reported:
RouteStopswas built for this and worked with no friction. It is the backbone of the status progression. Its states, "pending", "current", "completed", "failed", and "delayed", map almost one to one onto acceptance through pickup;plannedTimeandactualTimecompute late, early, or on time automatically as aDelta;aria-current="step"and a ring mark the current position. "A bag is another instance of an ordered stop flow. It fit, and not grudgingly. Timeline, Stepper, and ApprovalSteps are all worse."
The core observation: the boundary of RouteStops is now settled
Across the series RouteStops had been wrong four times: transit routes in #110, station directions in #120, airport directions in #122, and international legs in #123, each time leaking delivery vocabulary. This round was the first time it fit. The agent explained why:
Timeline is too open, leaving markers, states, a time column, and delay arithmetic to be assembled by hand. Stepper carries only
{label, state}, so it has no times, no delays, and no descriptions, and six stages packed across 375px overflow. ApprovalSteps encodes approval and send-back semantics that mean nothing for a bag. OnlyRouteStopsfit without a fight.
So RouteStops is right for tracking a state (a bag, a delivery, an order, a repair) and wrong for segment-centered routes and directions. That boundary was settled here and added to issue #358: a separate segment-centered TransitItinerary or FlightItinerary is needed, and RouteStops should not be stretched to cover routes. Establishing that one component is the centerpiece in one industry and a false lead in another took four misfits and one fit, which is what depth buys.
Logged and amended
- 🟢 A mobile app bar, logged as
PageHeader: back, title and subtitle, actions, at least 44px, sticky, and safe-area aware. The library'sHeaderis a desktop shell. Station navigation in #120 and baggage here were both hand-rolled, which puts it at two of three (issue #373). - 🟢
Button size="icon"is 36px and falls short of 44px, reinforcing issue #362. As the agent put it,ListCardadvertises at least 44px while the icon button never got the same treatment. - 🟢 The pickup notice needed a large heading for the arrival and the claim belt, which has no component, so it came out as
MetadataListwith a hand-written bold number.
No component was added under src this round. The 4/5 came from RouteStops fitting, and Tabs for multiple bags, StatGroup, Alert, and Accordion all needed no hand-rolling.
What I took away: settling a boundary is also an outcome
Building is not the only outcome. This round built nothing and still settled the boundary of RouteStops: right for tracking a state, wrong for routes and directions, on the strength of four misfits and one fit. That sharpens the table, keeps itineraries from being sent to the wrong component, and gives the future TransitItinerary a clear outline. Depth does not only find gaps; it establishes where the existing components actually belong. RouteStops owns status tracking while TicketStub and TransitItinerary are separate pieces, and that map is what the passenger work has been drawing.
📊 Component scoreboard (8 built)
AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips In progress: TicketStub at two of three, PageHeader at two of three, SegmentedControl, a success variant on StatusScreen, an hour axis on Gantt, and TransitItinerary.
Next up: build log #125
- More of the passenger backlog: air, with itinerary management or rebooking after a cancellation where alternate flights would use
RadioCard, or the rest of rail, with in-station recommendations or refunds. A screen that reaches a third case forPageHeaderorTicketStubis also in range.
The run
- gunjo.jp / RouteStops / the by-use-case table /docs/by-use-case / npm
@gunjo/ui/ GitHub / previous rounds #1 through #123 - GunjoUI by UIXHERO
Four misfits and one fit finally told me what RouteStops is for. Depth settles the right use as often as it exposes a missing one.
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.