Round #163Score 4/5Transport: trucking

Recent components found new uses as staff-facing trucking reached five screens

Route: /truck-pl
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

Recent components found new uses as staff-facing trucking reached five screens

⁠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 ⁠fifth and final staff-facing trucking round⁠ covered a data-driven ⁠transport cost and profitability dashboard⁠: results by vehicle and shipper, cost composition, loaded-distance and cost ratios, and comparison with standard freight rates.

Result: 4/5, with recent builds independently validated

The dense desktop screen driven by live data passed tsc. The agent reported:

⁠The library was unusually complete for Japanese administrative finance.⁠ A new adopter built nearly the entire accessible profit-and-loss console from existing components. The one-point deduction came from missing semantics for inverted KPIs.

The first core observation: recent components worked in trucking finance

This session had produced Leaderboard in and LimitMonitor in . Another agent independently found both here:

  • Leaderboard fit top and bottom profitability. The caller controlled order, valueLabel formatted yen, row tone marked concerns, and deltaTones treated an increase as bad where required.
  • LimitMonitor compared actual freight rates against standard rates. direction="floor" plus a signed difference mapped cleanly to over and under. A component built for hours on duty generalized to price comparison.
  • StatGroup, LineChart, LabeledDonutCard, and Delta kept the analytics live, with no static mockups.

A component is not proven generic when it is built. A later agent has to find it in another domain. Trucking finance showed that the two recent components were shaped around reusable patterns, not their first industries.

The second core observation: inverted Statistic semantics reached two of three

A cost ratio is better when lower, while loaded-distance ratio is better when higher. The agent reported:

Statistic and StatGroup have no goodWhen or direction. Tone defaults from trend, so an upward arrow is always green.⁠ I manually separated trend, the actual direction of change, from tone, whether that change is good. Delta and Leaderboard already support tone by sign, so the omission in Statistic looks accidental. Its most valuable addition would be good-direction semantics.

I added the second focused case to issue #412, after operating ratio in . One more financial or operational KPI screen would trigger goodWhen="high" | "low", with an explicit tone still taking precedence. The severe-count color cases in and are a different feature, so I did not inflate the count.

What I took away: unexpected cross-industry reuse is the strongest validation

Component validation had deepened in three stages:

  1. A later screen in the same domain independently finds the component.
  2. Another mode finds it in its natural job.
  3. Another industry finds an ⁠unanticipated⁠ use because the structural pattern matches.

The third is strongest. LimitMonitor was built for regulated hours but worked for freight rates because both are a value against a named limit. A mature foundation produces fewer new components and more surprising reuse. Staff-facing trucking reached five screens without another build; instead, recent work was validated in new contexts.

What it flagged

  • 🟡 Statistic.goodWhen remained at two of three.
  • 🟡 ChartLegend lacked formatValue, unlike neighboring chart components, although its value accepts a React node.
  • 🟡 The LimitMonitor docs call it server-safe, but a function passed through formatValue from a server component can still fail in the Next.js build. The safety claim describes internal hooks, not arbitrary function props, and needs a note.
  • Delta fit profit, loss, and standard-rate differences through per-sign tones, while LabeledDonutCard fit cost composition directly.

⁠Nothing new was added under src this round.⁠ The 4/5 completed five staff trucking screens, validated Leaderboard and LimitMonitor across industries, and left Statistic.goodWhen at two of three.

📊 Component scoreboard (⁠20 built⁠)

Three of the six components added this session: LineChip / LimitMonitor / SectionList. In progress: Statistic goodWhen at two of three, MatchCard at one of three, and ValidityTimer at one of three.

📋 Mode progress

  • ✈️ Air ✅ / 🚆 Rail ✅ / 🚕 Taxi ✅ / 🚌 Bus ✅
  • 🚚 ⁠Trucking: five staff screens (dispatch, matching, fleet and labor, billing, profitability)⁠, staff coverage complete; customer-facing screens come next

Next up: build log

  • Open customer-facing trucking with a shipper pickup-request and freight-tracking screen, then deepen it toward symmetry.

The run

Staff-facing trucking finished as recent components found new uses. Unexpected reuse across industries is the strongest evidence that a component captured a shared pattern.

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指示書パック」、先行登録を受付中です。