A construction photo log exposed two gaps in the media toolkit

⁠Build log series⁠: I give an AI that has never seen my design system @gunjo/ui only the public npm package and the gunjo.jp docs, and have it build real screens. Next came a ⁠construction photo log screen for a site supervisor⁠. The screen covers photos organized by date, type of work, and location, along with filters, a lightbox, before-and-after correction photos from inspections, and photo selection for reports.

Result: 4/5. Photo components covered most of a construction log

The finished photo log passes tsc and adapts to both mobile and desktop layouts.

⁠Components added to Gunjo for photo management (digital asset management) needed almost no adaptation for a construction photo log⁠. They were intended for managing an asset library, but they became the core of a photo log in a different industry.

• ⁠AssetGrid (photo grid)⁠ lays out thumbnails, supports multi-select, and exposes renderMeta, a render prop for badges showing the type or stage of work beneath each photo. It fit the log grid particularly well.
• ⁠AssetInspectorPanel (detail panel)⁠ accepts arbitrary fields, comments, and classification tags, so the desktop side panel displays the information board in the frame (project, work type, station, date) directly.
• ⁠MediaPickerDialog (multi-select dialog)⁠ supported the report workflow of "build a log from the selected photos" as-is.
• ⁠FileUploader (upload)⁠ already covers accepted file types, file count, size, and progress, so it handled photo intake with no changes.

The existing catalog covered the photo grid, filtering, upload, and report selection on its own.

What was missing: construction details in the lightbox and before-and-after photos

Two areas remained uncovered, and both have a clear scope.

1. ⁠The lightbox cannot show what is written on that board.⁠ MediaLightbox is already polished, with zoom, previous and next navigation, and support for portrait images, but ⁠the information shown beside it is hard-coded to file attributes (dimensions, type, size, creation date, and rating)⁠. A construction photo needs work information such as work type, station, location, and comments, but there is no way to pass that in. The agent hand-rolled a custom lightbox. The image viewer itself works well, so accepting work-specific details would close this gap.
2. ⁠There is no component for showing correction photos as a pair.⁠ The design called for the before and after photos to sit side by side for an issue found during an inspection, but there is no component for that. Similar components exist, but none are meant for comparing the same subject before and after a correction. The agent hand-rolled this part too.

That hand-rolled code was about 140 lines out of roughly 900 for the whole screen, so custom code accounted for only a modest share of the implementation. Most of the screen came together from existing components. Under the same rule of three, each gap is still only one of three.

Where the names and entry points got confusing

• ⁠The name Gallery is confusing.⁠ It sounds like a grid of photos, but the component is actually a single-item viewer with one large image and a strip of thumbnails. AssetGrid is the grid for a photo log. The agent initially chose Gallery, went down the wrong path, and lost time.
• ⁠The by-use-case table has no entry for photo, image, or media management.⁠ The photo management components at the center of this screen were not reachable through the by-use-case table, a static table that maps what you want to build to the components for it. The agent found them only after reading the type definitions. Someone who starts from the use case of building a photo screen cannot reach the main components. That guidance needs improvement.

Wrapping up

The agent built the foundation of this construction photo log from components designed for another purpose. Gunjo's media components crossed into construction cleanly, while the lightbox metadata and before-and-after comparison remained uncovered. Those two gaps define a focused next step for the media toolkit rather than a need for a construction-specific component set.