[P1] frontend: Migrate legacy UI surfaces to mature workspace design

[Cataldir]

Problem inventory

Several frontend surfaces still use older demo/admin styling while the platform direction has moved to the mature role-aware workspace shell documented in docs/standalone-lifelong-learning-ux-ia.md and docs/adr/007-frontend-modernization.md.

Type: tech debt / UX regression risk

Evidence

• frontend/app/configuration/page.tsx uses a demo launcher grid with saturated gradient cards, repeated logo icons, hover scale effects, and broad marketing copy instead of the current operational shell language.
• frontend/app/configuration/questions/page.tsx and frontend/components/Forms/{Questions,Answers,Grader,Themes}.tsx use multi-color rounded cards and oversized form treatment that does not match the newer workspace surfaces.
• frontend/components/Configuration/Questions.tsx and frontend/components/Configuration/Theme.tsx duplicate older full-screen form implementations.
• frontend/components/Dashboard/E-commerce.tsx and frontend/components/Calender/index.tsx still contain TailAdmin/e-commerce/demo content and visual patterns that do not map to Tutor learning workflows.

Impact assessment

User impact: high. The old UI lowers product trust and makes pilot users feel they are moving between different products.
Blast radius: frontend-wide, concentrated in configuration/admin/form surfaces and unused legacy components.

Acceptance criteria

• Inventory legacy UI components and identify which are routed, imported, or safe to retire.
• Migrate routed configuration/admin surfaces to the mature role-aware workspace visual language already used by Header, Sidebar, WorkspaceHome, Breadcrumb, and EssaySubmission.
• Remove or clearly quarantine unused TailAdmin/demo surfaces so they cannot reappear through navigation.
• Replace toy gradients, repeated logo icons, hover-scale cards, and e-commerce/sample copy with dense operational Tutor-specific layouts.
• Keep all migrated forms accessible under WCAG 2.2 AA: labels, focus visibility, contrast, target size, status messages, keyboard operability.
• pnpm --dir frontend lint passes.
• pnpm --dir frontend build passes with NEXT_PUBLIC_APIM_BASE_URL configured.

Agent assignment

Primary specialist: UIDesigner
Supporting specialist: TypeScriptDeveloper

Dependency notes

This can start immediately, but it should consume the route/functionality map from the ADR-007 feature issue before deleting or renaming any surfaced route.

Related backlog

• # Issue Title: Build configuration service to track user activities and profiles #21 common dashboard work may overlap with dashboard retirement/replacement.
• [SEDUC][Frontend] Build Supervisor insights experience in Configuration UI #164 supervisor briefing dashboard should use the same mature UI primitives rather than legacy dashboard components.

[Cataldir]

Delegation status

Primary specialist: UIDesigner
Supporting specialist: TypeScriptDeveloper
Status: delegated; implementation not started.

Initial UI findings:

• First visible migration slice should be /configuration and question/admin flows.
• EssaySubmission, WorkspaceHome, Header, Sidebar, and Breadcrumb are the mature reference surfaces.
• Shared modal accessibility is a gate: add dialog semantics, focus management, Escape behavior, labelled titles, and live status messaging.
• Quarantine/remove TailAdmin/demo surfaces only after [P1] frontend: Complete ADR-007 feature route mapping #222 confirms route ownership.

Next PR slice:

1. Migrate /configuration landing to operational Tutor sections.
2. Normalize question/admin subnavigation and form/list styling.
3. Add WCAG-oriented modal/status-message fixes before bulk form migration.

[Cataldir]

Delegation status

Primary specialist: UIDesigner
Supporting specialist: TypeScriptDeveloper
Status: delegated; implementation not started.

Initial UI findings:

• First visible migration slice should be /configuration and question/admin flows.
• EssaySubmission, WorkspaceHome, Header, Sidebar, and Breadcrumb are the mature reference surfaces.
• Shared modal accessibility is a gate: add dialog semantics, focus management, Escape behavior, labelled titles, and live status messaging.
• Quarantine/remove TailAdmin/demo surfaces only after [P1] frontend: Complete ADR-007 feature route mapping #222 confirms route ownership.

Next PR slice:

1. Migrate /configuration landing to operational Tutor sections.
2. Normalize question/admin subnavigation and form/list styling.
3. Add WCAG-oriented modal/status-message fixes before bulk form migration.