[jbspeakr]

Requested by Jan · project thread

What this changes

Review follow-up 10: the decorative plate (WP8). Jan chose to build it, but only on /explorer/, /breaches/ and the 41 spec pages. /mcp/ and /standards/ already lead with a data view, so they get no drawing.

Second version. The first version put a network drawing on its own framed plate under the head, in one of eight hues. Jan's review said it read as something added on top, not part of the page. The drawing now uses the explorer's own vocabulary and the site's existing inks, and it sits inside the page head.

The drawing. src/lib/plate.ts is a pure generator. It hashes the page id and title and seeds a small generator from the hash. The result is a miniature delegation chain: 3 to 5 actor heads on lifelines and 4 to 6 messages. A chain of those messages is the highlighted path, where each message starts at the lane the previous one reached. One dashed trust boundary surrounds one or two lifelines. The same page always gets the same drawing. The SVG uses classes, with no colours and no text, and is aria-hidden. It is about 1.5 kB raw.

On the page. Plate.astro is the first child of header.page-head. From 64rem up it floats beside the title at 18rem wide, with no frame. Below 64rem it is left out, so phones keep the plain head. The colours are the existing tokens: --signal for the path, --boundary for the boundary dash (the plan's "trust boundary dashes"), and hairlines for the rest. No new tokens. The path draws in once with a halo that fades after, and its ends appear when the path reaches them (M4). Under reduced motion it is drawn complete.

Social cards. pnpm generate:brand also writes og-explorer.png and og-breaches.png, with the drawing beside the headline as in the page head. Base.astro takes an image prop for them. Spec pages keep the home card.

Docs. plan.md records the decision and how the build departs from the WP8 file list. tasks.md gets a WP8 section and R-10, and ticks W9-T07, because the baseline refresh on this PR covers the same pages. The accessibility statement lists the draw-in and its reduced-motion form.

Screenshots

From astro preview at 1440 px, 2 s after load, so the path has finished drawing. Phones look as they do on main.

	Before (main)	After
explorer
breaches
spec page, light
spec page, dark
social cards	(home card)

The screenshots were committed once for stable URLs and removed in the next commit, so the squashed diff has no images.

Code checklist

• pnpm check passes, and the enforced budgets pass.
• Pages still read fully without JavaScript. The plate adds no JavaScript.
• Both themes checked. plate.spec.ts passes in light, dark and phone (36 tests). It covers: in the head and hidden from assistive technology on the three page types; absent on home, /mcp/, /standards/ and a chain page; beside the title on wide screens and hidden on phones; the section cards; axe; the reduced-motion end state. Unit tests cover determinism (snapshot), distinct drawings, bounds, the path as a chain, and 4 kB per plate across 300 seeds.
• Baselines refresh through the refresh-screenshots label.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KKEUnk7StdtBTMTCACbji3