Magent/frontend/UI.md

Shared workspace layout

• Use app/ui/PageHeading.tsx for page titles. Keep the heading flat, with a short description and optional actions. Only record IDs belong in the optional eyebrow.
• Admin pages use AdminShell, which supplies the same heading and settings navigation.
• Authentication screens use AuthLayout; they do not render the signed-in navigation.
• app/workspace.css owns page width, gutters, title sizes and shared spacing. Feature styles own the content inside those pages. Do not add new page-specific hero panels or outer width overrides.
• Keep primary actions, secondary controls and destructive actions visually distinct. Do not fade or uppercase every span inside a button: cards also use buttons, often with nested text.
• Keep technical IDs and pipeline labels monospace. Use sentence case for ordinary labels and descriptions.
• Preserve the six-stage request pipeline: three columns on desktop, two on tablet, one on narrow screens. Issue reports remain a right-hand column on desktop and stack on smaller screens.
• A media repair starts a new collection cycle: preserve Requested/Approved and unaffected TV episodes, but do not reuse an old torrent or Jellyfin entry to mark the replacement ready. Show Pending → Downloading → Indexing → Available from collector/file evidence. Subtitle-only repairs must not reset video availability.
• Request action feedback uses a compact Latest activity card beside download status; full event history opens in a native modal dialog without expanding the page. Keep messages outcome-based and do not equate a successful service response with playable media.
• Issue acceptance uses ui/ResolutionChoice.tsx: large YES/NO choices at the top of issue details and on /issues/confirm/[id]. Email links only open that page; answers require an authenticated POST. A NO must wait for a new repair before automatic acceptance is proposed again.
• Desktop navigation stays at the top; mobile navigation stays at the bottom. Dialogs must remain clear of both.
• The guided issue form uses portal/IssueFlowStep.tsx: show one expanded step, collapse completed answers into Change rows, and keep repairs behind the final submit action. Movies use the selected title's managed file directly; only TV needs a season/episode picker. Multi-select controls must expose aria-pressed and a visible selected state.

Browser checks

Build the frontend before reviewing. The scripts in scripts/ run using Node and Playwright:

• review_layout_ui.cjs: page alignment, consistent headings, overflow, redirects, pipeline layout, invite tabs, and fixture-only recovery forms.
• review_account_ui.cjs: fixture-only login and profile interaction checks.
• review_issue_flow_ui.cjs: fixture-only movie/TV issue flow, multi-device report payloads, subtitle routing, permissions, and collapsed-step navigation.
• review_repair_pipeline_ui.cjs: fixture-only movie/TV replacement stages, old-cycle progress rejection, desktop/mobile layout and automatic availability transitions.
• review_activity_ui.cjs: fixture-only latest activity, desktop/tablet/mobile placement, modal history, keyboard dismissal and focus restoration.
• review_acceptance_ui.cjs: fixture-only acceptance choices, exact YES/NO submissions, email-link safety, permissions and sign-in return links.
• review_settings_ui.cjs: settings state, region-only saves, secret preservation, responsive controls and issue dialog placement.

The layout/settings reviews accept REVIEW_BASE, REVIEW_LIVE_BASE, REVIEW_PLAYWRIGHT, and REVIEW_DIR. Provide an authorised short-lived session through REVIEW_SESSION as { "name": "cookie-name", "token": "..." } in the process environment, never in a committed file. Live writes are blocked; submission checks use fixtures. Screenshots may contain account information and must stay outside the repository.