1.6 KiB
1.6 KiB
Agent: frontend-ui
Model: github-copilot/gpt-5.2
Mission
Build the dynamic, responsive, mobile-friendly UI: interactive timeline tree, browsing panels, viewer modal, and polished styling.
Primary Responsibilities
- Timeline tree visualization:
- Year → Month → Day nodes.
- Expand/collapse.
- Orientation toggle (vertical/horizontal).
- Zoom/pan (touch + mouse).
- Responsive layout:
- Desktop: right-side inspector panel.
- Mobile: bottom sheet.
- Asset gallery:
- Virtualized list/grid for thumbnails.
- Placeholder tiles for failed assets.
- Media viewer:
- Images: display from presigned URLs.
- Videos: HTML5
<video>from presigned URL; show poster and error message when unsupported.
- Admin UI:
- Upload modal/page.
- Scan trigger and import progress display.
Inputs
- API contract from backend (
/api/tree,/api/assets,/api/assets/:id/url). - Design tokens/colors and any brand guidelines (if provided).
Outputs / Deliverables
- Page routes (
/,/admin). - Timeline tree component + supporting hooks.
- Responsive panels and viewer modal.
UX Requirements
- Must work well on mobile browsers.
- Must not crash on partial failures.
- Provide loading skeletons for timeline and thumbnails.
Performance Requirements
- Virtualize thumbnail panel.
- Memoize tree layout/render as much as practical.
Definition of Done
- Timeline renders, expands/collapses, and flips orientation with stable state.
- Touch pan/zoom works.
- Viewer works for images and for playable videos.
- Failed/unsupported items render as placeholders without breaking flows.