feat: overhaul role-based UX and organization administration

[mrwrite]

Summary

Completes the role-based EchoEd UX overhaul across public, authentication, learner, teacher, Studio, Organization, and
Admin experiences. It introduces accessible shared controls, responsive role-aware navigation, production-ready
organization administration, scoped backend authorization, and comprehensive visual/accessibility regression coverage.

What changed?

Role-aware experience

• Added role-specific navigation, page titles, landing behavior, and route protection.
• Preserved legacy route compatibility while directing users toward the canonical role spaces.
• Replaced commercial and investor-oriented language with community learning and stewardship language.

Organization administration

• Added a guarded /organization experience for active organization administrators.
• Added organization overview, people, invitations, classes, class detail, available learning, and settings pages.
• Added privacy-minimized member views with search, filtering, aggregate metrics, and responsive layouts.
• Kept unsupported operations clearly unavailable instead of presenting nonfunctional controls.

Backend authorization

• Added scoped organization-member and section read contracts.
• Centralized section-scope resolution for rosters, assignments, enrollment, and analytics.
• Restricted enrollment targets to active members of the same organization.
• Added targeted organization authorization tests.
• No database migration or new lifecycle model was introduced.

Shared UI foundation

• Upgraded buttons, inputs, selects, textareas, checkboxes, radios, switches, and state panels.
• Added reusable search and responsive data-list components.
• Added consistent loading, empty, error, success, and permission-denied states.
• Improved labels, validation descriptions, status announcements, focus behavior, and touch targets.
• Normalized typography and removed duplicated styling that caused desktop label clipping.

Public and authentication flows

• Refined landing, public product, product detail, login, registration, and organization-onboarding experiences.
• Added explicit loading, retry, validation, and submission states.
• Improved responsive behavior and semantic heading structure.

Accessibility and visual coverage

• Added automated checks for public, authentication, student lesson, teacher class, and Admin user flows.
• Verified heading structure, landmarks, control names, keyboard focus, and responsive document bounds.
• Added representative desktop and mobile visual-regression baselines.
• Verified layouts at 390, 768, 1280, and 1440 CSS pixels.

Documentation

• Added organization role/capability, privacy, accessibility, responsive, data-contract, production-audit, and
  implementation documentation.
• Updated the backend gap register, route migration plan, and shared-component status.
• Completed all 33 OpenSpec implementation tasks.

Why is this change needed?

Type of Change

• Documentation
• Frontend
• Backend
• Tests
• Accessibility
• Demo
• Curriculum/community review
• Other

Test Plan

List the checks you ran.

• Backend tests
• Frontend build
• Frontend unit tests
• Demo smoke test
• Manual review
• Not run. Explain below.

If you could not run a check, explain why:

Screenshots

Add screenshots for visible UI changes.

Accessibility Check

Describe any accessibility impact, including keyboard, contrast, labels, readable text, and mobile layout where relevant.

Community or Curriculum Impact

Does this affect educator review, historical accuracy, source quality, learner experience, community language, or contribution flow?

Notes

Anything maintainers should know?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
echoed	Ready	Preview, Comment	Jul 22, 2026 9:06pm