# 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.