Round #127Score 4/5Transport: air

An airport lounge screen found three of my new components at once

Route: /airport-lounge
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

An airport lounge screen found three of my new components at once

⁠Build log series⁠: I hand an AI that has never used Gunjo (@gunjo/ui) the public npm package and the gunjo.jp docs, then ask for a screen someone would really use. ⁠This closed the deeper passenger-facing air work from the passenger backlog, an ⁠airport lounge and priority services guide⁠ covering the lounge list, eligibility, occupancy, and priority boarding.

Result: 4/5, with three components discovered independently at once

The screen passed tsc and sat comfortably at 375px. The agent reported:

PageHeader had no friction and was built for this⁠, with onBack, subtitle, actions, sticky positioning, safe-area support, and at least 44px. ListCard was the single best match in the library, again with nothing to fight.⁠ It maps one to one onto a lounge row, the whole card is a button of at least 44px, and the severity band on the left carries eligibility. ⁠It was reused for the priority services list too.⁠ FilterChips went in clean.⁠ Its docstring names airport and station facilities outright, and it brought horizontal scrolling, counts, and arrow keys.

⁠Three passenger-facing foundations built during this stretch, PageHeader from , ListCard from , and FilterChips from , were all discovered independently in a single screen.⁠ Compounding reached its peak here: ⁠a passenger-facing air screen arrived at assembly with almost nothing hand-rolled.⁠

What was left: expressing a graded level

⁠Occupancy (quiet, filling up, busy) was hand-rolled⁠, with no entry in the table. Meter does not fit⁠: it is a capacity bar that turns red automatically near full, and three graded states are not a fill from 0 to 100. The agent used Badge instead, but ⁠there is no subtle variant of destructive even though info, success, and warning all have one, so it overrode bg-destructive-subtle by hand to get a soft red "busy" pill. "⁠A StatusLevel is needed: two to four graded levels, meaningful tones, an icon with a label, and no reliance on color alone. It repeats across occupancy, stock, wait times, and signal strength on consumer screens.⁠"

I recorded that on issue #376, together with a subtle destructive variant on Badge, an EntitlementCard, and an AmenityRow. Meter is right for capacity, where a fill along a continuum is the point, as in the locker availability in and , and StatusLevel is right for graded levels.⁠ That is the same split of responsibilities that RouteStops went through.

⁠No new component was added under src this round.⁠ The 4/5 closed the passenger-facing air work, and the outcome was three foundations found at once.

What I took away: compounding discovery is what closes a lap

I have now run ten passenger-facing air screens: booking, check-in, flight status, and booking management early on, then the six from the deeper backlog, which were the terminal guide, the e-ticket, baggage, rebooking, itinerary, and lounges. Early on, each screen hand-rolled its own centerpiece. ⁠By the last stretch, from through #127, the foundations I had built kept surfacing on the next screen, and this round found three at once⁠, so the screen came together almost entirely by assembly. That is what maturity looks like: ⁠fill the gaps, then settle the boundaries, then watch independent discovery compound, and new screens approach zero hand-rolling.⁠ The curve that administrative work traced across 14 industries is nearly complete on the passenger side as well.

📊 Component scoreboard (⁠10 built⁠)

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / FilterChips / PageHeader / Itinerary In progress: StatusLevel, TicketStub at two of three, SegmentedControl, a success variant on StatusScreen, and an hour axis on Gantt.

📋 Passenger backlog

  • ✈️ ⁠Air: all six screens done.⁠ Terminal, e-ticket, baggage, rebooking, itinerary, and lounges ✅
  • 🚆 Rail: commuter pass ✅ station navigation ✅ ticket purchase ✅. Remaining: in-station recommendations and refunds.

Next up: build log

  • The rest of passenger-facing rail, with in-station recommendations and outing suggestions where a membership card or a coupon could give TicketStub its third case, or refunds, to close the deeper passenger work. After that, the next mode: bus, taxi, or trucking, on both the staff and the passenger side.

The run

Three new components turned up in one screen and closed the air lap.

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