Round #35Score 4.5/5Finance

A later agent independently verified a fix it had no way to know about

Route: /loan
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

A later agent independently verified a fix it had no way to know about

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. Banking screen four: a ⁠mortgage pre-screening application⁠ (a loan simulator, an amortization schedule, the application form, document upload, the screening result).

Banking, layer by layer: forms, charts, tables, and this round the ⁠calculator layer⁠ (sliders that recompute the monthly payment on the spot) plus document upload and a screening result.

Result: 4.5/5

tsc and build passed, the console stayed clear, 375px switched the table to cards, the amortization schedule's balance reached exactly zero at maturity, and the page had a single h1.

The star this round: a bug fixed earlier was verified as gone by the next agent

In I fixed the hidden accessibility bug in Form (FormControl injecting aria-describedby on fields without a FormDescription, pointing at a nonexistent id) as issue #175. ⁠This round's agent verified that fix on its own⁠:

FormControl wires descriptionId only when a FormDescription actually exists.⁠ Checked in the browser: every invalid field's aria-describedby points at a message id that ⁠exists⁠, with ⁠no dangling references⁠. This is the strongest part of the library.

⁠Find the bug in , fix it in the same round, and in #35 a different agent confirms the fix held.⁠ The compounding loop now reaches the point where later rounds verify ⁠the absence of bugs fixed earlier⁠. Alongside that, formatCurrency (issue #180) "felt great" for the third round running⁠, and FileUploader (multiple files with per-file state), Statistic (tabular-nums, issue #188), Form, the Table th scope, and CardTitle and AlertTitle as all drew renewed praise.

The new gap: the calculator's core, the slider

  • 🟠 Slider has no value label, no unit, no yen wiring, no aria-valuetext (the biggest gap). It is a bare range input, so every calculator (principal and term sliders feeding a monthly payment) hand-rolls the value display, the yen formatting, and the announcement text. The track has no fill either (issue #193).
  • 🟠 Table also scrolls horizontally on mobile (a five-column amortization schedule), so the agent hand-rolled a card view (issue #190 reconfirmed, now for Table as well as DataTable).
  • 🟠 The loan math (equal payments, the principal-and-interest split, balance to zero) lived in the app, as it should: domain calculations are not a design system's job.
  • 🟡 Dark mode uses the .dark class approach, and the agent found and used ThemeProvider (issue #171). The one friction point is that it must be enabled explicitly.

What I fixed this round

Slider gained value display, announcements, and a filled track⁠ (PR #194):

  • formatValue feeds aria-valuetext (announcing "¥35,000,000" instead of "35000000") and formats the value label.
  • showValue and label render a value-and-label row above the track.
  • ⁠A filled track⁠ (primary color up to the thumb, drawn with an inline gradient so the classes never change: zero drift, and it works both externally controlled and self-managed).
  • Existing usage without the new props behaves as before. ⁠A browser check confirmed the gradient fill and that the default ARIA stays intact.⁠

Table-to-card (issue #190) widened to include Table and stayed on the list.

What I took away: compounding now covers the absence of bugs

#32: find Form's hidden bug, fix it immediately (issue #175)
#35: the next agent independently verifies there are no dangling references

I had already watched filled gaps turn into next-round strengths. This time, ⁠a later agent checked that a fixed bug stayed dead⁠. Banking has now been walked through four layers (forms, charts, tables, calculators), and every layer change produced different gaps and different verifications.

Next up: build log

  • ⁠Four banking layers down.⁠ One more with a card statement, or on to an adjacent money industry (accounting, payroll, POS).

The run

Gunjo was still in early alpha at the time; issues are welcome.

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