[C09] Page Header (component)

C09 is a component spec, not a screen — the second such entry after C07 Data Table. It is the canonical page header for the admin portal: the band that sits directly beneath the shell chrome and names the screen the operator is looking at.

Every admin-portal screen has a page header. As of 2026-08-26 no two agree. An audit of the fourteen routed screens found six distinct header idioms across three heading levels, and nine screens leaking a use-case ID (T03 · Stock return) into production markup. This page is the contract that ends that drift; the Angular component ap-page-header is its single implementation.

Actor: indirect — operators meet C09 on every screen; the component has no actor of its own.
Frequency: every page render.
Precondition: the consuming screen knows its own section and title. Nothing else.
Entry point: mounted by the screen as <ap-page-header>, immediately inside the router outlet, above all other content.

The portal has two headers stacked, and only one of them may be the document heading.

The component derives its own heading level from ScopeService; consumers never choose it. This is not a styling preference — it is the accessibility contract. Exactly one <h1> per page, and it is the most specific thing on screen that the operator navigated to.

The eyebrow answers "where am I?", so it must speak the same language as the thing the operator clicked to get here.

Nine screens shipped their use-case ID in the eyebrow. The provenance is traceable: the Claude Design canvases label each artboard with its ID — necessary there, because the canvas is a wall of twenty screens and the label is how you find one — and the implementation transcribed the artboard label as page content.

Decision (2026-08-26): the IDs are removed from the UI entirely. They are not rendered in development builds either. The affordance for cross-referencing a screen to its spec is the file, not the running app.

The rule is enforced, not merely documented, in two places. PageHeader strips a leading `<prefix><NN> · ` from any eyebrow handed to it, so a transcribed code cannot render. A unit test additionally scans component templates for the pattern and fails the build.

Anchor the test’s pattern at the start of the string. An unanchored [CETMSA]\d{0,2} · ` matches ordinary content — a timestamp ending `SAST · ` matches on the `T — and a guard that cries wolf gets deleted.

Three of these differ from the values first guessed in this spec (Inventory for T02/T03, Money for C06). That is the point of deriving rather than authoring: the guesses were plausible and wrong, because Inventory is not a sidebar group and orders sits in the Events group. The derivation is authoritative; where it reads oddly, the fix is the nav model, not the eyebrow.

T05 is the clearest case. Its old eyebrow named a section — Inventory — that does not exist in the sidebar at all, and the screen had already been moved to the Insights anchor in the 2026-08-14 rewire. Nothing flagged the mismatch because the string was typed by hand.

The C05 stage screens dropped Step N of 4 along with the code. The stage bar immediately below the header already carries the step, and an eyebrow is a section, not a progress indicator.

The E08 pair is worth noting on its own: the upload step says Import results and the summary step says Result import. Two labels, one flow, differing by word order — the kind of drift that only a shared component with a fixed vocabulary prevents.

Heading level is derived, not an input. There is deliberately no headingLevel prop: making it a choice makes it a per-screen decision, which is the problem this spec exists to remove.

Locked to the values import-page-shell already ships, which are the most-reviewed of the six current idioms:

The <h2> at instance scope renders at the same size as the <h1> at tenant scope. Demotion is semantic, not visual — the operator should see one consistent header treatment across the portal.

All fourteen routed screens, plus the four nested detail routes. import-page-shell retains the two-column body and right rail, and mounts ap-page-header for its band rather than drawing its own.

E05 and C03 are the two exemptions: E05’s Welcome back, {name} greeting is a personalised landing device, and C03 is a pre-auth marketing page outside the shell entirely. Both are documented exemptions, not drift.