AI Implementation feature(917): Category Icons (#65)

docs/guides/challenges-board.md

@@ -3,7 +3,7 @@ type: guide
 title: Challenges Board
 description: How a signed-in player navigates the `/challenges` page, opens a challenge modal, submits a flag, and watches live solve updates.
 tags: [guide, challenges, board, flag, score, sse, tester]
-timestamp: 2026-07-23T04:05:00Z
+timestamp: 2026-07-23T16:10:00Z
 ---
 
 # When this view is available
@@ -55,7 +55,7 @@ category.
 
 | Element                                | Selector                                    | Expected                                                                                                        |
 |----------------------------------------|---------------------------------------------|-----------------------------------------------------------------------------------------------------------------|
-| Category column                         | `[data-testid="category-column-CR"]` (or any abbreviation) | Header shows the category `icon`, uppercase `abbreviation`, and full `name`; below it is a vertical list of cards. |
+| Category column                         | `[data-testid="category-column-CR"]` (or any abbreviation) | Header shows the category `icon`, uppercase `abbreviation`, and full `name`; below it is a vertical list of cards. The icon's `src` is `/uploads/icons/<KEY>.png` and is served by the backend's static middleware; on a freshly bootstrapped instance these PNGs are generated at startup by [`seedSystemCategoryIcons`](/architecture/system-category-icons.md) so the column headers never show broken images. |
 | Category column with no challenges     | Same                                        | The header renders but the body shows `No challenges yet.`                                                       |
 | Challenge card                          | `[data-testid="challenge-card-<uuid>"]`     | Rendered as a real `<button type="button">`. Keyboard activatable (Tab + Enter/Space), exposes `aria-pressed` and an accessible name `Challenge <name>, solved` / `Challenge <name>, not solved`, and `data-solved="true"\|"false"`. Click anywhere (or press Enter/Space) to open the modal. |
 | Difficulty pill                         | `.diff.diff-LOW` / `.diff-MEDIUM` / `.diff-HIGH` | Green / yellow / red pill matching the challenge difficulty.                                                     |
@@ -215,6 +215,7 @@ destruction of the page the SSE source is closed via
 - [Challenges Endpoints](/api/challenges.md)
 - [Challenge Tables](/database/challenges.md)
 - [System Endpoints](/api/system.md) (legacy `/events/status`)
+- [System Category Icon Seed](/architecture/system-category-icons.md) (how the column-header icon PNGs are guaranteed to exist on a fresh clone)
 - [Scoreboard Stream](/guides/scoreboard-stream.md)
 - [Authenticated Shell](/guides/authenticated-shell.md) (SSE transport)
 - [Per-User `solvedByMe` Across the Session Boundary](/guides/challenges-per-user-state.md) (logout/login, peer-tab, SSE-unauthorized reset)