The series' lowest score built its biggest missing component

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. This round covered a consumer-facing retail screen: a ⁠membership app⁠ (point balance, member tier, coupons, point history).

After airline miles in #116 and rail points in #117, retail points. The thing to watch this time: ⁠whether the hero block that shows balance and tier gets hand-rolled a third time⁠.

Result: 2.5/5, the lowest in the series. And the third sighting landed

Type checking passed, the phone-width layout held, and errors stayed at zero. But ⁠the score was the series' lowest at 2.5⁠, and ⁠that made it a goldmine of missing components⁠. The verdict from an agent that had never touched Gunjo:

⁠Staff-facing components are being bent onto a consumer screen.⁠ ⁠The points-and-tier hero block is entirely hand-rolled. That is the number one missing component.⁠ Not one component brings balance, points, and member tier together. "The part that is the face of the screen is all improvised handwork. ⁠The most important thing to add.⁠"

⁠Three in a row⁠: airline miles in #116, rail points in #117, and retail points here. ⁠Three separate cold agents each independently hand-rolled the membership hero block.⁠ The third sighting landed. ⁠I built it.⁠

Built: LoyaltySummaryCard, the membership summary card

<LoyaltySummaryCard tone="brand"        // a hero surface painted with the Gunjo gradient (or "default" for a plain card)
  meta="Happy's Drug Members"
  tier={<Badge variant="outline">Gold member</Badge>}
  balanceLabel="Point balance" balance="3,480" unit="P"
  secondary={[{ label: "Purchases this year", value: "¥86,200" }]}
  progress={{ value: 86200, max: 100000, label: "¥13,800 to Platinum", caption: "¥86,200 / ¥100,000" }}
  alert="200 P expire on 2026-06-30"
  action={<Button size="lg" variant="secondary" className="w-full">Show membership barcode</Button>} />

• A hero balance display plus a tier badge, secondary figures, ⁠progress to the next tier⁠ (more is better, so it never turns red like a depletion meter), an expiry warning, and an action button.
• ⁠With tone="brand" you get a hero surface painted in the Gunjo gradient⁠ (a showpiece face without hand-writing any colors). This directly advances the goal of raising the warmth of consumer screens (issue #367). "default" stays a plain card.
• Issue #364 closed (PR #368): verified at phone width on a real device, with the gradient surface, a screen-reader-ready progress bar, both looks, zero overflow, zero errors.

The docs component search got fixed too

The component search on the docs site had no entry at all for points or member tiers, and in #116, #117, and here it kept misdirecting hero balance displays toward StatGroup and AnalyticsCard. I added "points, balance, and tier hero display: LoyaltySummaryCard" and drew the line against StatGroup (numbers in a row) and AnalyticsCard (a trend chart).

⁠The code built this round is LoyaltySummaryCard⁠ (the third sighting made the case). ⁠ListCard was reused across industries once again⁠ for coupons and history (the agent: "the only component on this screen that truly fit").

What I took away: a low-scoring consumer round produced the third go-anywhere component

Staff-facing rounds turned StatGroup, AmountBreakdown, ActionQueue, and Gantt into components; consumer rounds did the same for SeatMap and ListCard. This round's LoyaltySummaryCard spans airline, rail, and retail: ⁠a basic component for nearly any consumer screen⁠. The hunch I recorded in #117 (rail needs points too) held up, the retail case here made three, and the build followed.

⁠The consumer deep dive (#112 through #118) produced two large components, SeatMap and LoyaltySummaryCard, and the latter stepped into warmth with the Gunjo gradient surface.⁠ The lowest-scoring round filled the largest gap. Low-scoring consumer rounds keep being where the missing components are found.

Components added to Gunjo so far

Next up: build log #119

• Consumer-facing bus or taxi (does SeatMap get discovered on its own in another industry), a membership barcode screen (a second TicketStub sighting), or consumer warmth (issue #367).

The run

• ⁠gunjo.jp⁠ / ⁠LoyaltySummaryCard⁠ / ⁠ListCard⁠ / npm @gunjo/ui / ⁠GitHub⁠
• ⁠GunjoUI by UIXHERO⁠

The membership hero card, hand-rolled three times over, became a component on the spot, Gunjo gradient included. The lowest score in the series filled its biggest gap.