AI Implementation feature(879): Authenticated Shell, Quick Tabs and Change Password 1.03 (#18)

docs/architecture/frontend-structure.md

@@ -3,7 +3,7 @@ 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-21T23:25:00Z
+timestamp: 2026-07-22T09:22:34Z
 ---
 
 # Routes
@@ -25,7 +25,7 @@ Routes live in `frontend/src/app/app.routes.ts`:
 | Symbol | Path | Responsibility |
 |---|---|---|
 | `HomeComponent` | `frontend/src/app/features/home/home.component.ts` | Smart shell; owns navigation signals, user hydration, change-password flow, and event-stream lifecycle. |
-| `ShellHeaderComponent` | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders title, active section, event LED/countdown, and user menu. |
+| `ShellHeaderComponent` | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders title, active section, event LED/countdown, and user menu; contains component-scoped LED styling. |
 | `QuickTabsComponent` | `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Emits navigation events for Challenges, Scoreboard, and Blog. |
 | `EventStatusStore` | `frontend/src/app/core/services/event-status.store.ts` | Applies event state frames and computes countdown text. |
 | `AuthenticatedEventSourceService` | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Opens authenticated SSE over `fetch`, parsing streamed frames into `EventSourceLike` events. |

docs/guides/authenticated-shell.md

@@ -3,7 +3,7 @@ type: guide
 title: Authenticated Shell
 description: How a signed-in user experiences the post-login shell, including authenticated event streaming.
 tags: [guide, shell, header, sse, navigation, tester]
-timestamp: 2026-07-22T09:03:53Z
+timestamp: 2026-07-22T09:22:34Z
 ---
 
 # When this view is available
@@ -35,11 +35,7 @@ before the shell mounts.
 
 # Event LED colors
 
-The LED is rendered by `ShellHeaderComponent` as a `<span class="led">`
-with one of four state classes attached via `[class.led-<state>]`. The
-visual styling lives in `frontend/src/styles.css` and is driven entirely
-by the existing theme color tokens — there is no per-state color in
-TypeScript.
+The LED is rendered by `ShellHeaderComponent` as a `<span class="led">` with one of four state classes attached via `[class.led-<state>]`. Its component-scoped styling is declared in `frontend/src/app/features/shell/header/shell-header.component.ts` and is driven entirely by the existing theme color tokens — there is no per-state color in TypeScript.
 
 | Event state       | CSS class             | Color token           | Approx. hex | Visual |
 |-------------------|-----------------------|-----------------------|-------------|--------|
@@ -81,8 +77,8 @@ error event. The shell retains the last event state until a later connection suc
 | `frontend/src/app/features/home/home.component.ts` | Hosts the shell and starts/stops the authenticated event stream. |
 | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Fetch-based authenticated SSE transport with abort and frame parsing. |
 | `frontend/src/app/core/services/event-status.store.ts` | Applies event frames and derives the live countdown. |
-| `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu. |
-| `frontend/src/styles.css` | Defines the `.led` base shape plus the four `.led-{state}` background-color rules keyed on theme tokens. |
+| `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu; owns the component-scoped LED shape and state color rules. |
+| `frontend/src/styles.css` | Defines the shared theme color tokens consumed by the shell LED. |
 | `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Renders the main navigation tabs. |
 | `tests/frontend/authenticated-event-source.spec.ts` | Verifies authorization headers, SSE frame delivery, and anonymous header omission. |
 

docs/index.md

@@ -11,7 +11,7 @@ scoreboard, an event window with a public countdown, theming, and admin
 controls.
 
 The docs below are organized by purpose so agents can pull just the slice
-they need. Last regenerated 2026-07-22T09:03:53Z.
+they need. Last regenerated 2026-07-22T09:22:34Z.
 
 # Architecture