AI Implementation feature(863): Challenges Page and Challenge Solve Modal (#45)

docs/architecture/frontend-structure.md

@@ -2,8 +2,8 @@
 type: architecture
 title: Frontend Structure
 description: Angular routes, components, services, guards, interceptors, and authenticated SSE transport.
-tags: [architecture, frontend, angular, shell, sse]
-timestamp: 2026-07-22T10:32:00Z
+tags: [architecture, frontend, angular, shell, sse, challenges, notifications]
+timestamp: 2026-07-23T00:10:00Z
 ---
 
 # Routes
@@ -15,7 +15,7 @@ Routes live in `frontend/src/app/app.routes.ts`:
 | `/bootstrap` | `SetupCreateAdminComponent` | — | First-admin creation flow. |
 | `/login` | `LandingComponent` | `landingGuard` | Public landing and authentication modal. |
 | `/` | `HomeComponent` | `authGuard` | Authenticated shell and child outlet. |
-| `/challenges` | `ChallengesPage` | inherited | Placeholder challenges page. |
+| `/challenges` | `ChallengesPage` | inherited | Full challenges board (category columns, modal, flag submit, live SSE). |
 | `/scoreboard` | `ScoreboardPage` | inherited | Placeholder scoreboard page. |
 | `/blog` | `BlogPage` | inherited | Placeholder blog page. |
 | `/admin` | `AdminUsersComponent` | `adminGuard` | Admin-only child route. |
@@ -33,6 +33,12 @@ Routes live in `frontend/src/app/app.routes.ts`:
 | `AuthService` | `frontend/src/app/core/services/auth.service.ts` | Stores the access token used by the authenticated SSE transport; owns the cross-tab invalidation `BroadcastChannel` + `storage`-event fallback and exposes `clearAndBroadcast` / `onPeerInvalidation`. |
 | `UserStore` | `frontend/src/app/core/services/user.store.ts` | Hydrates the signed-in user and rank data. |
 | `auth-session-events.pure.ts` | `frontend/src/app/core/services/auth-session-events.pure.ts` | Pure cross-tab message encoding/validation and the namespaced channel / storage-key constants. |
+| `ChallengesStore` | `frontend/src/app/features/challenges/challenges.store.ts` | Signal store backing `/challenges`: board payload, event state, per-card solve listeners, SSE solve-frame mutation, submit response application. |
+| `ChallengesApiService` | `frontend/src/app/features/challenges/challenges.service.ts` | HTTP wrapper around `/api/v1/challenges/{board,status,:id,:id/solves}` returning `Observable<...>` and translating `HttpErrorResponse` into a typed `ApiErrorEnvelope`. |
+| `challenges.pure.ts` | `frontend/src/app/features/challenges/challenges.pure.ts` | Pure types + helpers for the challenges feature (`BoardCard`, `SolverRow`, `SolveEventPayload`, sorting, parsers, friendly error mapping, `formatDdHhMm`). |
+| `ChallengeCardComponent` / `CategoryColumnComponent` / `ChallengeModalComponent` | `frontend/src/app/features/challenges/` | Presentational components for the board grid, column, and detail modal. |
+| `NotificationService` | `frontend/src/app/core/services/notification.service.ts` | Root-provided signal-backed store of `{ id, kind, message, ts }` records; `error()` / `info()` push, `dismiss(id)` / `clear()` remove. |
+| `errorNotificationInterceptor` | `frontend/src/app/core/interceptors/error-notification.interceptor.ts` | Functional HTTP interceptor that pushes a friendly message into `NotificationService` for every `HttpErrorResponse`; suppresses duplicate toasts for endpoints with their own error UI (login form, `/challenges/status` snapshot). |
 
 # Authenticated SSE wiring
 
@@ -64,8 +70,11 @@ on destruction.
 |---|---|
 | `frontend/src/app/app.routes.ts` | Registers shell and child routes. |
 | `frontend/src/app/core/interceptors/auth.interceptor.ts` | Adds Bearer authentication to Angular HTTP requests. |
+| `frontend/src/app/core/interceptors/error-notification.interceptor.ts` | Translates `HttpErrorResponse` into friendly messages and pushes them to `NotificationService` (with suppression rules for login + `/challenges/status`). |
 | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Adds Bearer authentication to the browser SSE request, which does not use the Angular HTTP interceptor chain. |
 | `frontend/src/app/core/services/event-status.pure.ts` | Defines the event payload and transport interface. |
+| `frontend/src/app/features/challenges/challenges.page.ts` | `/challenges` smart page; owns gate logic, modal lifecycle, SSE wiring, and the countdown-zero reload. |
+| `frontend/src/app/features/challenges/challenges.store.ts` | Signal store backing `/challenges`: board, event state, per-card solve listeners, SSE solve-frame mutation, submit response application. |
 | `tests/frontend/authenticated-event-source.spec.ts` | Regression coverage for authenticated SSE transport behavior. |
 
 # Event-status pure helpers
@@ -111,4 +120,6 @@ for the full contract and tester matrix.
 
 - [Authenticated Shell](/guides/authenticated-shell.md)
 - [Event Window](/guides/event-window.md)
+- [Challenges Board](/guides/challenges-board.md)
+- [Notifications](/guides/notifications.md)
 - [System Overview](/architecture/overview.md)