A station guide reused ListCard, but filters were still hand-rolled

⁠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 was the second deeper passenger-facing rail round⁠, a ⁠station guide and facility finder⁠ for exits, elevators, restrooms, lockers, and stores. It tested a new pattern beyond booking, purchasing, and status: finding a facility inside a place.

Result: 3.5/5

With no prior knowledge of Gunjo, the agent produced a screen that passed tsc and held together in a 375px mobile-first layout. It reported:

⁠ListCard was built for this. It is what made the screen work.⁠ Each facility row mapped cleanly onto an icon, name, location (floor and inside or outside the gates), availability or opening status, and walking time. The docstring explicitly names search results, properties, and status lists. Meter with direction="fill-is-good" fit locker availability, where more is better, and produced green, yellow, and red without custom thresholds. Sheet on the bottom, Badge, and Tag introduced no friction.

After booking, purchasing, and status screens, ListCard ⁠worked for a new pattern: finding facilities.⁠ That widened the range of another shared foundation.

The core observation: no horizontally scrolling category navigation

⁠Facility categories were the real difficulty. There was no strip of pills or horizontally scrolling chip navigation.⁠ ToggleGroup came closest, but its root used flex items-center justify-center and each item used w-fit. Eight categories centered and wrapped at 375px instead of scrolling. The agent hand-rolled overflow-x-auto, full-bleed edges, justify-start w-max on the root, and shrink-0 whitespace-nowrap on each item. "⁠A horizontally scrolling category filter defines consumer place-finding interfaces, from maps and restaurant guides to journey planners. It is the highest-value addition.⁠"

This shares a root cause with the SegmentedControl case in #115, where departures and arrivals needed two options: ⁠ToggleGroup was not serving as consumer navigation.⁠ It needed two variants: segmented for a few equal-width options with a filled active state, and filter-chips for many horizontally scrolling options with one selection, an icon, and a label. I added this as the second case on issue #365: segmented in #115 and filter chips here, now ⁠two of three⁠.

Other findings

• 🟢 ⁠The delivery vocabulary in RouteStops leaked into directions.⁠ Using it for a walking route required replacing labels such as undelivered, delivering, and absent. After the transit route in #110, this was the second case for neutral steps or a directions variant. I added it to issue #358.
• 🟢 The station map and place markers, mobile app bar, and facility icons were all thin spots. Tabler had no clear restroom, ATM, or smoking-area icon, so the agent substituted a toilet-paper icon. These are specific to place finding and to the warmer visual language of passenger screens.

⁠Nothing new was added under src this round.⁠ The 3.5/5 left FilterChips at two of three and expanded the evidence for ListCard in another pattern.

What I took away: one foundation widened while another gathered evidence

ListCard had already covered booking, purchasing, status, membership, and history. It also worked for ⁠finding facilities⁠, so the shared foundation kept carrying across patterns. This round also produced the ⁠second piece of evidence for FilterChips⁠, a consumer navigation foundation that had not yet settled. Going deeper had the same double benefit again: it widened the known range of shared pieces such as ListCard, while steadily filling the numerator for pieces still waiting on the rule of three (FilterChips, RadioCard, and TicketStub). The more completely I covered passenger-facing rail, the faster those cases accumulated.

Next up: build log #121

• Continue the passenger backlog with rail ticket purchasing, looking for the third RadioCard case, or with station recommendations and refunds. Air alternatives include an international e-ticket for a second TicketStub case, baggage tracking, or a terminal map for the third FilterChips case.

The run

• ⁠gunjo.jp⁠ / ⁠ListCard⁠ / the docs' by-use-case catalog ⁠/docs/by-use-case⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #119
• ⁠GunjoUI by UIXHERO⁠

ListCard stretched to another pattern, but horizontal categories still had no home. The second deeper rail screen moved an unsettled foundation one step closer.