Improve Roles page UX and app-wide scroll performance

[Modsofthenation]

Summary

Roles previously led with catalog/edit and buried assignment at the bottom, so it was easy to try “add/edit roles” instead of assigning people. This also continues scroll-performance work after #62.

Changes

• Roles page: Assign people is step 1 (table with per-row Assign/Save). Catalog is step 2 (browse/edit definitions only). Extract/migrate stay under collapsed Advanced.
• Clearer header / NextStep copy that points at assignment, not catalog editing.
• Unassigned rows start with “Select role…”; Save enables when dirty or newly assigning.
• Fixed extract/import to use /api/roles/extract and /api/roles/import with the correct payload/response shapes.
• Scroll: Page section nav is click/hash-only (no IntersectionObserver scroll-spy). Removed content-visibility on sections (was causing scroll jumps/jank).

Verification

• pnpm --filter @prm/ui typecheck passes.

  

Summary by CodeRabbit

• New Features

  • Added editable per-person role assignments with current and next-role options.
  • Added direct-report filtering, row-level saving, and assignment status feedback.
  • Expanded level presets to include IC1–IC6 and L1–M3.
  • Grouped advanced role management tools into a collapsible section.

• Improvements

  • Improved section navigation using URL hashes and more predictable scrolling.
  • Restricted next-role selections according to configured progression paths.

[coderabbitai]

Warning

Review limit reached

@Modsofthenation, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 23 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 701ca8b2-aaeb-49d4-9149-ced4396734e8

📥 Commits

Reviewing files that changed from the base of the PR and between f21ba3d and 1f0e5e6.

📒 Files selected for processing (3)

• apps/ui/src/components/PageSectionNav.tsx
• apps/ui/src/pages/RolesPage.tsx
• apps/ui/src/styles.css

📝 Walkthrough

Walkthrough

The roles page now prioritizes direct-report role assignments with per-row saving and progression-aware selections. Catalog and framework tools move into separate sections. Page navigation now follows URL hashes instead of scroll observation.

Changes

Roles workflow and navigation

Layer / File(s)	Summary
Hash-driven section navigation apps/ui/src/components/PageSectionNav.tsx	Section navigation initializes from valid URL hashes, handles hashchange, and updates the URL before scrolling without IntersectionObserver.
Direct-report role assignments apps/ui/src/pages/RolesPage.tsx	The page adds per-person current and next-role drafts, row-level saving, assignment status, direct-report filtering, and progression-aware next-role options.
Catalog and advanced role tools apps/ui/src/pages/RolesPage.tsx, apps/ui/src/styles.css	Catalog editing remains available as a secondary section. Framework metadata, migration, extraction, preview, and import tools move into a collapsible Advanced section. Section content visibility declarations are removed.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

• Modsofthenation/PerformanceReviewManager#62: Both PRs modify PageSectionNav.tsx and section visibility styling.

Suggested reviewers: cursoragent

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/roles-page-ux-scroll-ebae

---

_{Comment @coderabbitai help to get the list of available commands.}