docs: Added dashboard screenshots and closed out Phase 6

Author: claude

CLAUDE.md

@@ -69,7 +69,7 @@ numbers, which drift):
 | `src/lib` helpers    | 67                               |
 | Schemas/repositories | 13 / 13                          |
 | Scheduled jobs       | 4                                |
-| Tests                | 2,985 across 192 suites          |
+| Tests                | 3,234 across 205 suites          |
 
 **There is no music system.** It was removed deliberately — see
 [§21](#21-decisions-already-made--do-not-relitigate). Do not add one back without reading that section.

README.md

@@ -85,7 +85,7 @@ The whole thing was rebuilt around the problems the old codebase actually had.
 | **Start-up**       | Command registration raced the login                                                   | Each step awaited in order; a malformed file names itself and stops the boot |
 | **Errors**         | Stack traces could reach chat                                                          | One error boundary — users get a plain apology, you get the full context     |
 | **Money**          | Read-modify-save, so balances could duplicate under load                               | Atomic database updates                                                      |
-| **Tests**          | A handful                                                                              | **2,985 tests**, with an enforced 80% coverage floor                         |
+| **Tests**          | A handful                                                                              | **3,234 tests**, with an enforced 80% coverage floor                         |
 | **Setup**          | Manual, including patching a file inside `node_modules`                                | `npm run setup`, and you are running                                         |
 
 Everything the old bot did is still here, apart from the integrations that needed paid or personal API keys
@@ -365,6 +365,17 @@ It follows your device's light or dark setting out of the box, and speaks **Engl
 French** — picked from the browser's own language, and changeable from the Appearance screen. Both are per
 browser: nothing you choose there affects anybody else on the server.
 
+<p align="center">
+  <img alt="The server overview: member counts, a permission warning, and which features are on" src="docs/dashboard/screenshots/overview.png">
+</p>
+
+|                                                                                                  |                                                                                                                        |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| <img alt="Levelling settings in the light theme" src="docs/dashboard/screenshots/levelling.png"> | <img alt="Server settings, each card a description beside its controls" src="docs/dashboard/screenshots/settings.png"> |
+| **Levelling**, in the light theme                                                                | **Server settings** — the switches with no screen of their own                                                         |
+| <img alt="The owner console's usage tab" src="docs/dashboard/screenshots/owner-console.png">     | <img alt="The appearance screen: theme, accent, motion and language" src="docs/dashboard/screenshots/appearance.png">  |
+| **Owner console** — usage counted, never logged                                                  | **Appearance** — theme, accent, motion and language                                                                    |
+
 ### Turning it on
 
 Four settings. `npm run setup` handles all of them: it asks for the client secret and the base URL, sets

docs/README.md

@@ -38,6 +38,7 @@ The web dashboard is a workspace of its own (`dashboard/`), with an API inside t
 | [`dashboard/guide.md`](dashboard/guide.md)                    | The practical guide: layout, components, the six edits a screen takes, the traps     |
 | [`dashboard/re-write.md`](dashboard/re-write.md)              | The UI rewrite plan — phases, invariants, exit criteria                              |
 | [`dashboard/design-plan/`](dashboard/design-plan/00-INDEX.md) | The original design documents: scope, auth, permissions, API, accessibility, roadmap |
+| [`dashboard/screenshots/`](dashboard/screenshots/README.md)   | The images the root README embeds, and how to retake one when a screen changes       |
 
 `CLAUDE.md` §24 wins wherever it and `dashboard/guide.md` disagree.
 

docs/dashboard/design-plan/13-ROADMAP-AND-RISKS.md

@@ -204,7 +204,7 @@ rather than a transport, which is a dozen lines. Three things it settled:
   shoulder than a terminal, and a line that was never stored with a connection string in it cannot leak one
   through a future endpoint.
 
-### Phase 6 — Polish (~1 week) — **partly done**
+### Phase 6 — Polish (~1 week) — **done, bar what needs a person or a Docker daemon**
 
 Terms and privacy pages are built, and they sit **outside** `RequireAuth`: somebody deciding whether to add the
 bot has to be able to read them before signing in. Both are written for a self-hosted bot — the operator is
@@ -234,8 +234,19 @@ pinning the four claims the code has to keep true.
   own loopback and a published port reaches nothing. The image has **not been built** — the environment it was
   written in has no Docker daemon — though the production-only install, the compiled layout and
   `docker compose config` were each verified directly.
-- README screenshots; `CONTRIBUTING.md` section.
-- Light theme, if wanted — cheap now that everything is tokens, but re-verify every contrast ratio.
+- **README screenshots — done.** Five, in [`../screenshots/`](../screenshots/README.md), captured from the
+  built bundle against stub responses so no real server or account is in one. Both themes appear deliberately.
+  `docs/contributing.md` already carries the dashboard section, including how to add a language.
+- **Light theme — done**, and it is not an afterthought: every colour in `index.css` is one `light-dark()` line
+  holding both schemes, and `contrast.test.ts` reads **both halves** and checks each against WCAG, so a light
+  value nobody looked at fails the build. The switch is `color-scheme` and nothing else.
+- **Appearance customisation — done**, beyond what this phase asked for: six accents, a motion override that
+  wins in both directions, and the language picker. All three are one `Preference` mechanism — an attribute on
+  the root element, a `localStorage` key, and a fallback that _removes_ the attribute so the CSS answers before
+  any script runs. Every accent is measured against both backgrounds.
+- **Narrow widths — done.** Ten routes at 390 and 820 CSS px carry no horizontal overflow and no page error.
+  Two defects that only exist on a phone were fixed there: the owner console's eight-tab strip cut with nothing
+  saying five tabs sat past the edge, and landing on a later tab left the strip at its start with none marked.
 
 Roughly eight to nine weeks of evenings. Phases 0–2 are the ones that must not be rushed; 3 is mechanical.
 
@@ -272,8 +283,12 @@ Worth deciding before phase 2, because each changes work later.
    "someone says it broke" and "here is the stack". Phase 5, or earlier if support load justifies it.
 4. **Kick and ban.** Deliberately excluded (`05-API.md`). Softban covers the reversible case. If you want them,
    they need a stronger confirmation than typing a name.
-5. **Light theme.** Phase 6 or never. Cheap to add, but every contrast ratio in `08-DESIGN.md` needs recomputing
-   against a light background, and an unverified light theme is worse than none.
+5. **Light theme.** ~~Phase 6 or never.~~ **Answered: built.** The worry was right — an unverified light theme
+   is worse than none — so `contrast.test.ts` reads both halves of every token out of `index.css` and checks
+   each against WCAG. Two things it caught are worth keeping in mind: a pair can pass for the wrong reason
+   (check the colour the component actually draws, not the token you assume it uses), and elevation cannot
+   simply be recoloured — a drop shadow reads as a smudge on near-black, an inset highlight is invisible on
+   paper, so `surface-edge` switches technique by theme.
 6. **Realtime.** Everything here is request/response. Live member counts or a live audit feed would want SSE
    (simpler than WebSockets, and one-directional is all this needs). Not in the POC; the polling in TanStack
    Query is enough.

docs/dashboard/screenshots/README.md

@@ -0,0 +1,27 @@
+# Dashboard screenshots
+
+The images the [root README](../../../README.md) embeds. Committed rather than hosted, so a fork carries them.
+
+They are captured from the **built** dashboard against stub API responses — never a live install, so no real
+server, account or snowflake appears in one. The signed-in account renders as `you` for the same reason.
+
+## Retaking them
+
+A screenshot that no longer matches the page is a document that lies, so retake the affected one whenever a
+screen changes shape. The recipe, rather than a script: adding Playwright as a dependency to this repository
+would cost every self-hoster a browser download for something only a maintainer runs.
+
+1. `npm run build` — the screenshots are of the production bundle, not the dev server.
+2. Serve `dashboard/dist` statically and intercept `/api/**` with stub responses.
+3. Load each route at **1280px** wide, in the theme listed below, and wait for the network to settle.
+
+| File                | Route                        | Theme |
+| ------------------- | ---------------------------- | ----- |
+| `overview.png`      | `/guilds/:guildId`           | dark  |
+| `levelling.png`     | `/guilds/:guildId/levelling` | light |
+| `settings.png`      | `/guilds/:guildId/settings`  | dark  |
+| `owner-console.png` | `/owner?tab=usage`           | dark  |
+| `appearance.png`    | `/appearance`                | light |
+
+Both themes appear on purpose: a reader deciding whether to run this should see that the light one is real
+rather than an afterthought.