Initial commit

.agents/frontend-ui.md

@@ -0,0 +1,49 @@
+# 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.