Round #166Score 4/5Transport: trucking

RouteStops gained multiday timestamps after the third agent abandoned it

Route: /intl-shipment
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

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 and . Here the agent gave up on RouteStops entirely:

RouteStops cannot put a date on each stage.⁠ It is strictly limited to same-day HH:MM, and parseHM rejects anything else. A May 12 to June 5 timeline does not structurally fit, so I used ApprovalSteps instead. Its timestamp accepts any React node, including 2025/05/16 to 05/29. The ideal component combines the location, carrier, state, and actions from RouteStops with the free-form date from ApprovalSteps. The missing prop is a date, timestamp, or dateLabel on each stop.

This was the third case after the shipper portal and parcel tracking. I added:

  • dateLabel?: ReactNode to each RouteStops item for a free-form timestamp such as May 16 to May 29, ETA May 30, or Customs cleared June 2. When present, it appears on the time row and skips HH:MM delay calculation.
  • Full backward compatibility. Without dateLabel, planned and actual times plus automatic Delta remain unchanged for same-day delivery.
  • Updated catalog guidance that sends multiday parcel and international tracking to RouteStops with dateLabel, avoiding the old HH:MM dead 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

  • 🟡 OriginDestination or RouteHeader for a horizontal origin-to-destination heading, recorded on issue #425. Similar route headings had been hand-rolled in and .
  • 🟡 The catalog misdirected a shipment summary heading to AnalyticsCard, which is a KPI trend card rather than an entity header.
  • ApprovalSteps for customs filing, review, and clearance; MetadataList for vessel, ETD, and ETA; SectionList for documents; and ActionQueue all 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

  • Continue customer-facing trucking with shipper billing or personal delivery settings, moving toward five staff and four or five customer-facing screens.

The run

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.

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