feat(ui): home shell with a learning catalogue, roadmap briefing page and focused player

[OthmaneZ05]

Summary of Changes

A UI revamp of everything outside the canvas, plus a rework of the learning player's in-canvas surfaces. The goal was to fix the empty-canvas cold start — a new user landed on a bare project list with no idea what the app was for — and to make the guided roadmaps a first-class destination rather than a panel hidden inside a project.

A home shell with two views. The landing page is now a shell with a dark icon rail (SideRail) switching between Projects and Learning. Projects keeps project CRUD (extracted into ProjectsSection, ProjectCard, ProjectCardSkeleton, PageHeader) and shows a FirstRunHero only when the user has no projects yet. Learning is a real catalogue page: LearningHero, RoadmapShowcaseCard, WhyPanel, and a ResumeCard that surfaces the most recent play-through for returning users.

A roadmap briefing page. Picking a roadmap opens a detail page (a sub-page of Learning, with a breadcrumb back to the catalogue) before anything is launched: hero, stats strip, architecture preview, prerequisites, step outline, and a "what you'll verify" panel. Everything on it is derived from the roadmap's validators (roadmapTopology.ts, roadmapChecks.ts) — the v1 roadmap format is unchanged, no authoring burden added. Launching from there routes through a ProjectPickerModal (pick an existing project or create one) and carries a session-only LearningIntent into the canvas so the learning panel opens on the right roadmap. The intent is deliberately not persisted — a reload must not replay a past navigation.

The player, focused. RoadmapPlayer drops the full step list for the current step alone plus a ProgressBar and a Skip control. Validation verdicts moved out of the sidebar into a floating ValidationToast portalled over the canvas (StepValidationResults is deleted), showing one line of detail and a "+N more checks to fix" tail. Step hints are restyled as quiet marginalia — a rule plus mono hint 1/2 / solution markers — instead of lightbulb cards.

Design foundations. index.css gains a token layer (spacing, radii, type scale, shadows, rail/scrim colors, per-node accents) and new shared primitives land: Button, Receipt (including a structured checks variant with verdict/context/footer), ProgressBar, Skeleton. A de-flashing pass follows one rule throughout: the accent color means clickable, never decorative; panels are flat; no color on a fact that isn't a status.

Backend. One additive endpoint, GET /api/learning/progress, returning a summary per (projectId, roadmapId) play-through so the catalogue can show cross-project progress. It deliberately never emits the one-shot storeRecovered flag — that notice stays with the per-pair read the player uses. Documented in docs/learning-api.md.

Full EN/FR coverage for every new string. Dead assets (hero.png, react.svg) removed.

Types of Changes

• New feature / node type addition
• Bug fix (non-breaking change resolving an issue)
• Refactoring / structural cleanup
• Documentation update

Verification & Testing

Automated Checks

• Run npm run lint successfully with no errors
• Run npm run build successfully with no compilation errors
• Run npm test successfully (all tests pass)

Backend: 35 suites / 390 tests pass, tsc clean, lint clean. Frontend: 26 files / 270 tests pass, tsc -b && vite build clean, lint reports 0 errors (6 no-explicit-any warnings, all pre-existing on main). New test files cover ProjectsPage, RoadmapDetailPage, ValidationToast, Receipt, roadmapTopology, roadmapChecks, useLearningProgressSummaries, and the new progress endpoint on both controller and service.

Manual Verification

Driven against a real backend in a scratch HOME (so ~/.torollo starts empty), with Playwright for the browser flows:

• Cold start — empty project list shows the first-run hero; creating a project makes it collapse into the normal Projects view on the next visit.
• Learning catalogue → briefing → canvas — opened each catalogued roadmap's briefing, checked the topology/steps/checks panels match the roadmap JSON, launched into both an existing project and a newly created one, and confirmed the learning panel opens on the right roadmap and that a reload does not re-open it.
• Language switch — toggling EN/FR while a briefing is open swaps it for the translated roadmap, and leaves it in place when no translation exists (roadmaps hold one language per file).
• Player loop — ran a roadmap end to end: validation toast fires on both pass and fail, the failing verdict lists the first failing check with the "+N more" tail, dismissal is per-step and clears on the next Validate, the progress bar advances, Skip step works, hints reveal one rung at a time and the reveal count survives a reload.
• Resume — reopening Learning after partial progress shows the resume card pointing at the right roadmap and step.
• Docker down — with the Docker socket unreachable, the home shell still renders and reports the failure instead of hanging or blanking.

Checklist

• My code follows the repository's code style and lint standards
• I have updated the documentation or instructions if necessary
• All unit and integration tests are passing