An inbox had the split-pane shell but no selectable list
/inboxCaptured 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 inbox had the split-pane shell but no selectable list
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 webmail-style inbox with a message list and detail view.
The agent worked only from the shipped npm package and docs site. The assignment called for a folder sidebar with unread counts; a message list with sender, subject, preview, unread and starred states, selection, and bulk actions; a detail pane with the message body and reply toolbar; a split desktop layout and a mobile layout that switches between list and detail with a Back button; plus empty and skeleton states. Unlike the notification center in #15 or the editor in #16, this tested a list-detail composition.
Result: 4/5
tsc and build passed, the console stayed clear, the page had exactly one h1, the listbox used aria-selected, and unread messages combined bold text, an accent bar, and screen-reader-only "Unread" text instead of relying on color. Nothing overflowed at 375px, the Back button switched between list and detail, and dark mode worked throughout.
The shell was strong: Sidebar and SidebarItem, with count for unread badges; Resizable, with a keyboard-operable role="separator" divider and arrow-key resizing; ScrollArea; Sheet for the mobile drawer; Checkbox; Toggle, with aria-pressed for starred messages; and TooltipButton.
Fixes from earlier rounds also paid off immediately:
Badge as="span" from issue #128 kept labels inline, EmptyState headingLevel from issue #104 preserved heading hierarchy, and the internal tooltip provider from issue #52 removed the need for a page-level provider.
A defect fixed in one round kept making the next screen easier to build.
Why it stopped at 4: no selectable-list component
1. There was no selectable-list component (issue #135, major). List and ListItem provided only visual markers such as dots, checks, and numbers. They had no selected, onSelect, role, or keyboard behavior. ListItem also forced its content into text-sm text-muted-foreground, which could not carry a dense inbox row. The docs explicitly told consumers to compose interactions from Checkbox or Toggle. The agent had to hand-roll the inbox's central behavior: listbox, option, aria-selected, roving focus, and arrow-key navigation.
2. Resizable treated numeric sizes as pixels by default (issue #133, nearly critical). maxSize={55} collapsed the pane to 55px because react-resizable-panels 4 interprets a bare number as pixels. The docs said only number, with no indication of pixels or percentages, so the layout failed silently. The agent worked around it with the string "38%".
What I fixed this round
- Issue #133:
ResizablePanelnow interprets a bare number as a percentage, matching the likely intent. Pixel values use a string such as"200px". - Issue #134: I connected the unread count in
SidebarItemto the button's accessible name, changing "Inbox 4" to "Inbox, 4", and addedcountLabelfor text such as "4 unread". The visible number is nowaria-hidden.
The selectable list in issue #135 and the list-detail composition in issue #136 were new components, so they went to the beta gate.
What I took away: the shell and the selectable content are separate
Shell (Sidebar, Resizable, ScrollArea, Sheet, and Toolbar): complete and strong
Content (a selectable row plus list-detail composition): missing, even though this is the core of the screen
Inboxes, search results, file lists, and admin tables all depend on a selectable list as the central interaction. The stronger the surrounding shell became, the more obvious this missing component was. The agent assembled sound accessibility by hand, but that behavior belongs in the design system.
Next up: build log #27
- An error page, calendar schedule, or setup wizard, continuing to test selectable lists and higher-level composition.
The run
- gunjo.jp / npm
@gunjo/ui/ GitHub - Earlier rounds: #1 through #25
- Overview: Gunjo (
@gunjo/ui) / Why it exists: Design systems in the age of AI - GunjoUI by UIXHERO
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.