letsauth.eu
`); await page.evaluate(() => document.fonts.ready); await page.screenshot({ path: "public/og.png" }); + + // The section roots that carry a decorative plate (WP8) get a card of their own: the same layout + // as the home card, with the page's drawing beside the headline as it sits in the page head. + for (const [id, section] of Object.entries(SECTION_PLATES)) { + await page.setContent(` +${section.eyebrow}
+letsauth.eu/${id}/
`); + await page.evaluate(() => document.fonts.ready); + await page.screenshot({ path: `public${sectionCard(id as keyof typeof SECTION_PLATES)}` }); + } } finally { await browser.close(); } diff --git a/specs/016-visual-redesign/plan.md b/specs/016-visual-redesign/plan.md index b866429..5b6a875 100644 --- a/specs/016-visual-redesign/plan.md +++ b/specs/016-visual-redesign/plan.md @@ -616,7 +616,17 @@ per page; the draw-in (M4) runs once and is static under reduced motion; the dra appears on a page that already has a data view above the fold (matrix, map, chain, report); a `plate: false` prop removes it. -Decision for Jan: ship this, or keep letsauth's visuals strictly data-derived. The plan +Decided (22 October 2026, review follow-up 10): Jan chose to ship it on `/explorer/`, +`/breaches/` and the spec pages only. `/mcp/` and `/standards/` keep their data view as the one +visual, so the drawing stays off them; the cards are per section root (explorer and breaches), +and spec pages keep the home card. As built, the drawing departs from the file list above: a +first version (a network on its own plate under the head, one of eight hues) read as added on +top, so it is a miniature delegation chain in the explorer's vocabulary and existing inks +(`--signal` path, `--boundary` dash, hairlines), floated beside the title inside the page head +on wide screens and left out below 64rem. A page leaves it out by not placing `Breach anatomy
diff --git a/src/pages/explorer/index.astro b/src/pages/explorer/index.astro index 2f4c7fe..47f35a6 100644 --- a/src/pages/explorer/index.astro +++ b/src/pages/explorer/index.astro @@ -1,8 +1,10 @@ --- +import Plate from "@/components/Plate.astro"; import Base from "@/layouts/Base.astro"; import { getDataset } from "@/lib/data"; import { scenarioList } from "@/lib/explorer"; import { TOGGLE_KIND_LABEL } from "@/lib/labels"; +import { SECTION_PLATES, sectionCard } from "@/lib/plate"; const data = getDataset(); const scenarios = scenarioList(data); @@ -23,9 +25,11 @@ for (const { scenario } of scenarios) { title="Delegation chain explorer" description={`${scenarios.length} scenarios of how authority moves through agent systems: ${stepCount} steps, each with the decoded token and the specification section it follows, and ${toggleCount} attack and misconfiguration toggles.`} path="/explorer/" + image={sectionCard("explorer")} >
Delegation chain explorer
diff --git a/src/pages/standards/[id].astro b/src/pages/standards/[id].astro index a719897..19be7fd 100644 --- a/src/pages/standards/[id].astro +++ b/src/pages/standards/[id].astro @@ -2,6 +2,7 @@ import Citation from "@/components/Citation.astro"; import Crumbs from "@/components/Crumbs.astro"; import MaturityTag from "@/components/MaturityTag.astro"; +import Plate from "@/components/Plate.astro"; import RelationList from "@/components/RelationList.astro"; import Base from "@/layouts/Base.astro"; import { ATLAS_SPEC } from "@/lib/atlas"; @@ -52,6 +53,7 @@ const repoFile = `https://github.com/letsauthlab/letsauth/blob/main/data/specs/$
{BODY_LABEL[spec.body]} / {FAMILY_LABEL[spec.family]}
{spec.summary}
diff --git a/tests/e2e/__screenshots__/breaches.spec.ts/breaches-dark.png b/tests/e2e/__screenshots__/breaches.spec.ts/breaches-dark.png index 9ab470d..fa41ccc 100644 Binary files a/tests/e2e/__screenshots__/breaches.spec.ts/breaches-dark.png and b/tests/e2e/__screenshots__/breaches.spec.ts/breaches-dark.png differ diff --git a/tests/e2e/__screenshots__/breaches.spec.ts/breaches-light.png b/tests/e2e/__screenshots__/breaches.spec.ts/breaches-light.png index 99a2dbd..45c1e1a 100644 Binary files a/tests/e2e/__screenshots__/breaches.spec.ts/breaches-light.png and b/tests/e2e/__screenshots__/breaches.spec.ts/breaches-light.png differ diff --git a/tests/e2e/__screenshots__/spec-page.spec.ts/spec-light.png b/tests/e2e/__screenshots__/spec-page.spec.ts/spec-light.png index 7037339..6607172 100644 Binary files a/tests/e2e/__screenshots__/spec-page.spec.ts/spec-light.png and b/tests/e2e/__screenshots__/spec-page.spec.ts/spec-light.png differ diff --git a/tests/e2e/plate.spec.ts b/tests/e2e/plate.spec.ts new file mode 100644 index 0000000..5bd73af --- /dev/null +++ b/tests/e2e/plate.spec.ts @@ -0,0 +1,76 @@ +import { expect, test } from "@playwright/test"; +import { expectEndStateUnderReducedMotion, expectNoSeriousA11yViolations } from "./helpers"; + +// The decorative plate (plan WP8): in the head of the explorer and breach indexes and every spec +// page, never on a page with a data view above the fold, hidden from assistive technology and on +// narrow screens. +const withPlate = ["/explorer/", "/breaches/", "/standards/rfc8693/"]; +const withoutPlate = ["/", "/mcp/", "/standards/", "/explorer/mcp-authorization/"]; + +test.describe("decorative plate (WP8)", () => { + for (const path of withPlate) { + test(`sits in the head of ${path}, hidden and labelless`, async ({ page }) => { + await page.goto(path); + const plate = page.locator("header.page-head > .decor"); + await expect(plate).toHaveCount(1); + await expect(plate.locator("svg")).toHaveAttribute("aria-hidden", "true"); + await expect(plate.locator("text")).toHaveCount(0); + expect((await plate.innerHTML()).length).toBeLessThan(4096); + }); + } + + for (const path of withoutPlate) { + test(`stays off ${path}`, async ({ page }) => { + await page.goto(path); + await expect(page.locator(".decor")).toHaveCount(0); + }); + } + + test("draws the same plate on every load", async ({ page }) => { + await page.goto("/standards/rfc8693/"); + const first = await page.locator(".decor").innerHTML(); + await page.reload(); + expect(await page.locator(".decor").innerHTML()).toBe(first); + }); + + test("gives the section roots their own social card", async ({ page }) => { + for (const id of ["explorer", "breaches"]) { + await page.goto(`/${id}/`); + await expect(page.locator('meta[property="og:image"]')).toHaveAttribute( + "content", + new RegExp(`/og-${id}\\.png$`), + ); + const card = await page.request.get(`/og-${id}.png`); + expect(card.ok()).toBe(true); + } + }); + + test("shows beside the title on wide screens only", async ({ page }) => { + await page.setViewportSize({ width: 1280, height: 800 }); + await page.goto("/standards/rfc8693/"); + const plate = page.locator(".decor"); + await expect(plate).toBeVisible(); + const box = await plate.boundingBox(); + const title = await page.locator(".page-head h1").boundingBox(); + expect(box && title && box.x > title.x + title.width / 2).toBe(true); + await page.setViewportSize({ width: 390, height: 800 }); + await expect(plate).toBeHidden(); + }); + + test("draws in once and passes axe", async ({ page }) => { + await page.setViewportSize({ width: 1280, height: 800 }); + await page.goto("/breaches/"); + const names = await page + .locator(".decor .pp") + .evaluate((el) => el.getAnimations().map((a) => (a as CSSAnimation).animationName)); + expect(names).toEqual(["plate-draw"]); + await expectNoSeriousA11yViolations(page); + }); + + test("is drawn complete under reduced motion (M4)", async ({ page }) => { + await page.setViewportSize({ width: 1280, height: 800 }); + await page.goto("/explorer/"); + await expectEndStateUnderReducedMotion(page, ".decor"); + await expect(page.locator(".decor .pp")).toHaveCSS("stroke-dasharray", "none"); + }); +}); diff --git a/tests/unit/__snapshots__/plate.test.ts.snap b/tests/unit/__snapshots__/plate.test.ts.snap new file mode 100644 index 0000000..fc7bca3 --- /dev/null +++ b/tests/unit/__snapshots__/plate.test.ts.snap @@ -0,0 +1,3 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`plate > draws the same plate for the same page 1`] = `""`; diff --git a/tests/unit/plate.test.ts b/tests/unit/plate.test.ts new file mode 100644 index 0000000..b686ae5 --- /dev/null +++ b/tests/unit/plate.test.ts @@ -0,0 +1,53 @@ +import { describe, expect, it } from "vitest"; +import { PLATE_HEIGHT, PLATE_WIDTH, plate, plateSvg } from "@/lib/plate"; + +describe("plate", () => { + it("draws the same plate for the same page", () => { + expect(plateSvg(plate("rfc8693", "OAuth 2.0 Token Exchange"))).toBe( + plateSvg(plate("rfc8693", "OAuth 2.0 Token Exchange")), + ); + expect(plateSvg(plate("explorer", "Delegation chains"))).toMatchSnapshot(); + }); + + it("draws different plates for different pages", () => { + const drawings = new Set( + ["explorer", "breaches", "rfc8693", "rfc9728", "aauth", "transaction-tokens"].map((id) => + plateSvg(plate(id, id)), + ), + ); + expect(drawings.size).toBe(6); + }); + + it("keeps every plate a chain in bounds and small", () => { + for (let i = 0; i < 300; i++) { + const p = plate(`page-${i}`, `Title ${i}`); + expect(p.lanes.length).toBeGreaterThanOrEqual(3); + expect(p.lanes.length).toBeLessThanOrEqual(5); + for (const x of p.lanes) { + expect(x).toBeGreaterThan(0); + expect(x).toBeLessThan(PLATE_WIDTH); + } + expect(p.messages.length).toBeGreaterThanOrEqual(4); + for (const m of p.messages) { + expect(m.from).not.toBe(m.to); + expect(m.y).toBeGreaterThan(0); + expect(m.y).toBeLessThan(PLATE_HEIGHT); + } + // the path hands on: each message on it starts where the previous one arrived + const path = p.messages.filter((m) => m.path); + expect(path.length).toBeGreaterThanOrEqual(2); + for (let k = 1; k < path.length; k++) expect(path[k]?.from).toBe(path[k - 1]?.to); + const { boundary: b } = p; + expect(b.x).toBeGreaterThanOrEqual(0); + expect(b.x + b.width).toBeLessThanOrEqual(PLATE_WIDTH); + expect(b.y + b.height).toBeLessThanOrEqual(PLATE_HEIGHT); + expect(Buffer.byteLength(plateSvg(p))).toBeLessThan(4096); + } + }); + + it("is hidden from assistive technology and carries no colour", () => { + const svg = plateSvg(plate("breaches", "Agent auth failures")); + expect(svg).toContain('aria-hidden="true"'); + expect(svg).not.toMatch(/fill=|stroke=|oklch|#[0-9a-f]{3}/i); + }); +});