RouteStops gained multiday timestamps after the third agent abandoned it
/intl-shipmentCaptured 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
RouteStops gained multiday timestamps after the third agent abandoned it
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 third customer-facing trucking round covered an importer-facing international freight and customs portal: export clearance, loading, ocean transport, arrival, import clearance, domestic delivery, bills of lading, ETD, and ETA.
Result: 4/5, and multiday RouteStops settled on its third case
The dense desktop screen passed tsc. The agent reported:
This was a genuinely strong logistics and tracking library. Nearly every block had a purpose-built component, with Japanese defaults that fit almost uncannily well. The one-point deduction came from the central problem: a timeline spanning several weeks.
The core observation: abandoning RouteStops made the third case decisive
International freight crosses weeks, from export clearance on May 12 through ocean transport from May 16 to 29 and delivery on June 5. Earlier agents forced dates into metadata in #164 and #165. Here the agent gave up on RouteStops entirely:
RouteStopscannot put a date on each stage. It is strictly limited to same-dayHH:MM, andparseHMrejects anything else. A May 12 to June 5 timeline does not structurally fit, so I usedApprovalStepsinstead. Its timestamp accepts any React node, including2025/05/16 to 05/29. The ideal component combines the location, carrier, state, and actions fromRouteStopswith the free-form date fromApprovalSteps. The missing prop is a date, timestamp, ordateLabelon each stop.
This was the third case after the shipper portal and parcel tracking. I added:
dateLabel?: ReactNodeto eachRouteStopsitem for a free-form timestamp such asMay 16 to May 29,ETA May 30, orCustoms cleared June 2. When present, it appears on the time row and skipsHH:MMdelay calculation.- Full backward compatibility. Without
dateLabel, planned and actual times plus automaticDeltaremain unchanged for same-day delivery. - Updated catalog guidance that sends multiday parcel and international tracking to
RouteStopswithdateLabel, avoiding the oldHH:MMdead end.
PR#424 confirmed a multiday sequence from May 12 to planned delivery June 5, alongside the existing same-day planned-versus-actual times and early or late delta. Issue #422 closed.
What I took away: abandoning the right component can be sharper than hand-rolling
Earlier rule-of-three cases involved a missing component and hand-rolling. Here the agent found the right component, understood its structural limit, and escaped to another component. That is a sharper signal:
- Hand-rolling says a component is missing.
- Abandoning a plausible component says which axis is incomplete and often identifies the extension.
The agent even described the ideal result as the body of RouteStops plus the date freedom of ApprovalSteps. That evidence called for one field on an existing component, not another component. The progression from forcing dates into metadata to escaping entirely made the correct design increasingly clear.
What it flagged
- 🟡
OriginDestinationorRouteHeader for a horizontal origin-to-destination heading, recorded on issue #425. Similar route headings had been hand-rolled in #110 and #140. - 🟡 The catalog misdirected a shipment summary heading to
AnalyticsCard, which is a KPI trend card rather than an entity header. - ✅
ApprovalStepsfor customs filing, review, and clearance;MetadataListfor vessel, ETD, and ETA;SectionListfor documents; andActionQueueall fit directly.
What changed under src this round: RouteStops.dateLabel. The 4/5 settled multiday tracking and corrected the catalog.
📊 Component scoreboard (20 built, plus multiday RouteStops)
Three of the seven components and extensions added this session: LimitMonitor / SectionList / RouteStops with multiday timestamps. In progress: OriginDestination at one of three, Statistic goodWhen at two of three, and MatchCard at one of three.
📋 Mode progress
- ✈️ Air ✅ / 🚆 Rail ✅ / 🚕 Taxi ✅ / 🚌 Bus ✅
- 🚚 Trucking: five staff + three customer-facing screens (shipper portal, parcel, international freight)
Next up: build log #167
- Continue customer-facing trucking with shipper billing or personal delivery settings, moving toward five staff and four or five customer-facing screens.
The run
- gunjo.jp / RouteStops with
dateLabel/ ApprovalSteps / MetadataList / npm@gunjo/ui/ GitHub / previous rounds #1 through #165 - GunjoUI by UIXHERO
The agent abandoned RouteStops for ApprovalSteps, making the missing timestamp field unmistakable. The sharper the compromise, the clearer the extension.
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.