A file browser turned earlier fixes into the library's strengths
/filesCaptured 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 file browser turned earlier fixes into the library's strengths
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 Finder or Google Drive-style file browser.
Only the shipped npm package and docs site were available to the agent. The assignment called for a folder tree, breadcrumbs, search and toolbar, a file collection with grid and list views, a context menu, inline renaming, a preview pane, and an empty state.
Result: 4.5/5
tsc and build passed, the console stayed clear, and the server and browser output matched with no hydration errors. The page had exactly one h1; files formed a listbox with role="option" and aria-selected; the tree worked from the keyboard; the context menu used role="menu"; nothing overflowed at 375px; and the grid wrapped to two columns.
The main result: earlier fixes had become library strengths
Everything the cold agent singled out as well-designed accessibility that worked from the start came from earlier rounds:
| What the cold agent praised | Round fixed |
|---|---|
Keyboard controls for FileTree and TreeView (arrows, Enter, and roving focus) | #16, issue #87 |
Bare numbers in Resizable becoming percentages, removing an easy sizing trap | #26, issue #133 |
EmptyState.headingLevel, CardTitle.as, and Badge.as, preventing invalid hierarchy and nesting | #20, #23, and #25 |
Img aspect ratio, fallback, and skeleton | #22, issue #113 |
ContextMenu with right-click, keyboard controls, and role="menu" | Already present |
The loop of finding a defect, fixing it, and testing it on the next screen had reached the point where a new agent praised the previous fixes as product strengths. TypeScript introduced no friction, and every required type was public.
Why it stopped at 4.5: still no collection with built-in selection
There was no selectable-grid component, extending issue #135 from lists to grids. The agent hand-rolled about 250 lines for selection shared by the grid and list: single click, Cmd-click multi-select, and Shift-click ranges, role="option", checkboxes, Enter to open, and double-click navigation.
One detail made the gap more specific: AssetGrid and AssetCard already had selection through selectedIds and selectionMode. But they were designed for a media library, assuming thumbnails and button/pressed semantics while offering no list view, checkboxes, folders, or menus. They did not fit a file manager, so the agent still had to build the behavior. A collection with built-in selection had now been requested twice, for a list in #26 and a grid here.
What I fixed this round, all backward-compatible source changes
- Issue #147,
TreeView: I gave the chevron its own click target, letting a folder expand without being selected. A browser check confirmed that clicking the chevron changed onlyaria-expanded. - Issue #148,
Breadcrumb: I addeditemsandmaxItemsso long paths collapse automatically, placing the omitted middle items in a menu. - Issue #149,
Checkbox: I addedlabelanddescription, following theSwitchpattern from issue #130 so consumers do not have to wire accessible labels themselves.
What I took away: the loop was producing cumulative returns
#1 through #27: find a defect, fix it in the source or design, and let the next cold agent verify it
#28: earlier fixes are now praised together as strengths of the design system
Remaining core: a collection with built-in selection for the list in #26 and the grid in #28
Each round's small fixes were not throwaway work. They accumulated into the reliability of the next screen. Round #28 made that cumulative payoff especially clear. The remaining substantial work was concentrated in missing core components: the scheduler in issue #142, typography in issue #110, and selectable collections in issue #135.
Next up: build log #29
- An error page, setup wizard, or dashboard settings screen.
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.