50 lines
1.6 KiB
Markdown
50 lines
1.6 KiB
Markdown
# 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.
|