/_primitives · v1 set + v2 (Provenance · MarginNote · Telemetry)

Primitive showcase

The six display primitives that case pages compose from, plus three from the v2 set — <Provenance>, <MarginNote>, and <Telemetry>. Each is shown at two container widths where the layout differs — full-width on the left, narrow column on the right — so the container-query layout switches are visible side-by-side. Most content is illustrative; the Provenance and Telemetry demos render live build time, commit hash, and primitive count.

`<CodeChip>`

Evidence pill referencing a file, repo, dashboard, commit, or screenshot. Add a snippet slot to make it expandable.

In prose flow:

The skill catalogue is generated by build-catalog.py on every push, pushed to the marketplace via gitlab-ci/publish.yml, and verified end-to-end before release — commit a4f2b1c was the last passing run. Operational view in graylog · skills-prod.

Expandable (click to reveal snippet):

The renderer config lives at

renderers/blog/config.yaml

yaml

renderer: blog
target_lang: [en, uk, es, pt]
glossary: glossaries/landviewer.yaml
authors:
  default: editorial
  fallback: ml-summary
guards:
  max_words: 1800
  min_evidence: 2

and is read by every render job.

`<LiveCounter>`

Big numeric callout that counts up to its target on viewport entry. Driven by a registered @property --pf-count.

0 tests

across the suite

~0 records / week

enriched by the agent

0 skills

catalogued and live

`<Pipeline>`

Multi-stage flow with per-stage status. Lays out horizontally in wide containers, vertically in narrow. Status: live · in-progress · planned · failed · skipped.

Wide container (full page width):

skill lifecycle 4 stages · 14 skills live

● 01

discover

find candidate task
● 02

catalog

commit + describe
● 03

ship

CI publishes
◐ 04

use

team invokes

Narrow container (~340px):

skill lifecycle 4 stages

● 01

discover

find candidate task
● 02

catalog

commit + describe
● 03

ship

CI publishes
◐ 04

use

team invokes

Mixed statuses (full width):

● 01

normalize

detect language + clean
● 02

validate

12 rule docs
✕ 03

render

3 target formats
◐ 04

translate

EN → UK/PT/ES
○ 05

publish

GWS docs/drive

`<BeforeAfter>`

Two-column comparison: the system's state before vs after a change shipped. Stacks vertically in narrow containers.

Wide container:

how skill use changed 6 weeks after rollout

before

each writer wrote their own prompt
no shared review of agent output
no published catalogue of skills
each new request meant a new ad-hoc workflow

after

14 catalogued skills, single shared catalogue
CI publishes the catalogue + tests on every push
anyone invokes any skill via their own OAuth
meta-skill scaffolds new skills in <30 minutes

Narrow container:

before

writers wrote own prompts
no shared review
no published catalogue

after

14 catalogued skills
CI publishes on push
meta-skill scaffolds new

`<DecisionTable>`

N options × M criteria grid with one option marked chosen. Verdict tokens (yes, no, partial) colour-code automatically.

ranking model for the news-digest swarm chose: Gemini Flash

criterion	Gemini Flash chosen	GPT-4o mini	Llama 3.1 70B (self-hosted)
cost / 1k items	cheap	partial	no
latency (p95)	<1.5s	<2s	>4s
structured output	yes	yes	partial
fallback path	GPT-4o mini	Gemini Flash	—
ops surface	none (api)	none (api)	self-host

With no chosen option (review-in-progress):

repo shape decision pending

criterion	monorepo	polyrepo	git submodule
shared tooling	yes	no	partial
CI fan-out cost	linear	parallel	linear
PR review surface	wide	narrow	narrow

`<StabilityArc>`

Half-circle dial showing the green-run ratio, plus a sparkline of the same runs. Arc sweeps in on viewport entry by transitioning a registered @property --pf-arc-end.

Wide container:

CI · skills repo last 15 runs

87% green

green 13 flaky 1 red 1

Narrow container:

CI · recruiter last 12 runs

75% green

green 9 flaky 1 red 2

High-stress example (flaky build):

CI · prnewsbot last 20 runs

55% green

green 11 flaky 3 red 6

`<Provenance>`

The site's per-page authorship stamp — the v2 "Site As Its Own Provenance" primitive. Auto-injects build time and git short hash; the caller passes whichever optional fields apply (lastEdited, sourcedFrom, stack, contact, scope). Currently shipped to the home and every case page; the inline variant is exposed for future end-of-section essay use.

Full variant (page footer · home-page shape):

Full variant (case-page shape · with last-edited, sourced-from, and disclosure scope):

Inline variant (end-of-section · for future essay use):

`<MarginNote>`

Polyphonic annotation block from the v2 set. Voices come from a small closed set — past-max, future-max, hermes, devils-advocate, crossref — each with its own colour tint and label. Renders inline as a styled callout in this showcase. In essay pages with a reserved margin column (.has-margin-notes) the aside gets pushed out into the margin via CSS Anchor Positioning, where supported, falling back to inline.

Five voices, inline-callout fallback (no margin column on this showcase):

The site is intentionally built in public [future-max]

, with provenance stamps on every surface and its own telemetry panel rendering in the bottom-right corner. [hermes] The metaphor running through it — solar system, sun, orbits — could read as cute [devil's-advocate] if the case bodies didn't carry their weight. They do. [past-max] The whole register is metamodern — earnest without naïve, structured without rigid. [crossref]

`<Telemetry>`

The site's self-observability panel. Renders as a small fixed panel in the bottom-right corner of every standalone page, showing route, build time, commit, and a live count of primitive instances. Click to expand the full detail. MVP scope: static fields + DOM count. Runtime metrics (render time, bytes loaded, LCP / CLS) are deferred to a follow-up.

Look at the bottom-right of this very page — that panel is the <Telemetry /> primitive, live. Click the chip to expand. Same instance lives on the home, the cases index, every case page, and the primitives showcase.