primitives are contracts, not components
every primitive consumes the same role tokens. flip the skin and the entire catalog retints. swap the contract and every consumer follows. nothing is one-off, nothing is decorative.
seven new structural and editorial primitives
phase 11 added card tabs tag avatar kbd led quote to the canonical catalog. these are now the structural backbone for every deep surface on getzero.dev.
tabs
tag
avatar
kbd
led
quote
refusal is the default; signing is the rare event.
the brand glyph at three scales
key · leader · value · in every receipt
every signed decision lands as a receipt. dotted leaders link key to value. the layout is grammatical, not stylistic.
- pair
- sol-perp
- side
- short
- size
- 0.7x
- entry
- $184.21
- stop
- $188.06
- gates
- 3/3 · pass
- signed
- b39e02
five gates · the floor never adds
immune system armed · all gates monitored
categorical badges · status tags
tabular truth + editorial annotation
| name | value | note |
|---|---|---|
| spacing | --s-4 | 16px · 8pt rung |
| radius | --radius-1 | 1px · single corner |
| hairline | --hair-2 | divider rule |
ci:typography.tufte discipline · zero chartjunk
every chart is server-rendered svg. no client js. no third-party deps. data-ink only. direct labels. comparison built in.
primitives for agentic surfaces
tooltip, popover, dropdown, dialog, command palette, slash menu, tool-call card, plan surface, approval gate, async task, mcp panel, diff conversation, reasoning reveal, citation card, cost meter, confidence arc, trace flame, capability card, tick stream, evidence trail, channel switcher.
@zero/ui · catalog grows quarterly · every primitive has a dossier explaining its role, tokens, and states.every primitive · every state · every token
the gallery below iterates the PRIMITIVES array and renders one specimen per entry from the dossier. nothing is hand-curated. if a new primitive lands in @zero/uiwithout a demo, ci:getzero blocks the merge.
this gallery iterates the PRIMITIVES array exported by @zero/ui. every primitive ships a .meta dossier; this surface renders all of them with a live demo, the full state list, and the token set the primitive consumes. nothing is hand-curated; if a new primitive lands in @zero/ui/index.ts without a demo, ci:getzero fails the merge.
.btn / .btn.primary / .btn.ghost / .btn.danger / .btn.loading / .btn.errorbrand-signal surface (amber on default signature skin), ink-0 label, density-aware padding (--cell-px/--cell-py) and height (--row-h), motion-aware transitions (--t-fast). primary uses --brand-signal. danger variant paints --red border + bg + label (irreversible-action posture · ADR-060). error variant paints --red border + aria-invalid; loading variant paints amber-soft + aria-busy (warning posture).
.gate.{pass · breach · pending}5px dot · 3×8 padding · 10px tracked uppercase label · 2px radius. read-only.
.refuse-pillthe brand verb in pill form. ◆ glyph prefix in red. signals a journaled refuse.
.acid-signal6px acid dot, 2-7px outset glow tied to --breath. live data pulse paired with the brand-signal acid token.
.journal-entry · .je-verb.{refuse · decide · observe · event}grid-template-columns: auto auto 1fr auto · time / verb / body / hash.
.chip.{red · amber · green · blue · acid}tag-style label. used for banned word lists, regulatory tags, status flags.
[data-mark]16-unit grid · amber square + ink bar. 10 canonical states per CURSOR-ORGANISM-DOCTRINE ADR-152, plus 4 backward-compat aliases (observe→idle · decide→thinking · refuse→refused · event→partial). high-consequence carries a subtle frame. CC0.
.receipt-pre, .receipt[data-leader="dots"]14-line monospace box-drawing artifact (plain) OR grid-based dotted-leader receipt (dots, phase-4 default for new brand surfaces). bare mode drops the inner header band when nested inside a card that already carries a head. 50 columns wide. Survives plain-text paste.
.stat-celllabel + tabular-numeric value. ADR-060 narrows StatCell to the value-only role; full KPI cells (delta + sparkline + source + freshness) ship via KPICard (primitive 92). acid tone reserved for brand-signal data (paper PnL, gate-pass count).
.swatchtoken color rendered with name, hex, and use-case label. for chapter 05.
.calloutbordered note with amber left rule and uppercase head label.
.marker.{amber · red · green · blue}tracked numeric prefix for ordered lists. amber default. red for the negative covenant.
.hashmonospace hash chip · amber on dim ink panel · used inline in body copy.
.chapter · .chapter-num · .chapter-title · .chapter-ledeeditorial chapter container. number + title + lede. consumed by every book route.
.spec-tableeditorial table for token, type, and lexicon specs. bottom-rule rows, no fills.
.rewrite · .rewrite-input · .rewrite-grade · .rewrite-flaglive voice grader. consumes gradeSentence() from runtime. defines chapter 02.
.zero-tooltiphover/focus single-line label · 8px offset · floating-ui · escape dismisses
.zero-popoverclick-anchored rich panel · focus-trapped · dismiss on outside click + escape
.zero-dropdownselect-style menu · keyboard nav · typeahead · click outside / escape dismiss
.zero-dialogmodal panel · backdrop overlay · focus-trapped · scroll-locked · escape dismiss
.zero-toast .zero-toast-regiontransient inline announcement · 5-verb tone · ARIA live · auto-dismiss 4s · ADR-066 error verb for technical failures (distinct from refuse policy gate)
.drop-card / .drop-live · .drop-past · .drop-nextcomposes Chip + Hash. shows ZERO-NNN drop number, category, posture, Thursday 11:00 ET timestamp, signed-release hash. cross-references brand/drops/cadence.contract.json.
.tier-badge / .tier-public · .tier-card · .tier-nfs · .tier-mail-order · .tier-aoyamacomposes Mark with state mapped per tier. renders on /u/<handle> and /a/<shortId>. driven by on-chain attestation, not server claim. cross-references brand/tiers/ladder.contract.json.
.agent-artist-card / .posture-paper · .posture-livecomposes Mark, Hash, StatCell, TierBadge. renders an agent as a signed artist on the ZERO label. drives /a/<shortId> and /league. cross-references brand/label/agents.contract.json.
.skin-picker / .sp-item · .sp-swatch · .is-activesix-skin selector · live preview of brand-signal × ground for every canonical skin. wires data-skin to the active section. paired with PaletteRing in the standards page.
.palette-ring / .pr-svg · .pr-dot · .pr-roleOKLCH ring viz · 8 role swatches arranged as a clock around two concentric tracks. the geometry visualises the skin's hue distribution; close-grouped roles indicate a tight palette, spread roles indicate a wide one.
.tod-mark / .tod-dawn · .tod-day · .tod-dusk · .tod-nightclock-aware lighting indicator · 24h dial with phase color · pairs with skin auto-rotation (dawn/day = signature; dusk = bloomberg; night = midnight).
.posture-beacon / .pb-paper · .pb-live · .pb-refuse · .pb-ceremonyglobal state pill · paper (data-signal · steady) · live (brand-signal · breath-pulsing) · refuse (error · solid) · ceremony (brand-signal · ceremony-pulsing). the canonical "what is the engine doing right now" indicator. visible on every cockpit surface.
.card.{default · proof · covenant · compact}structural surface wrapper · numbered head, optional rightSlot, body, optional caption foot. ADR-066 render-state vocabulary (loading/empty/error/disabled) carries ARIA hooks and reduced-motion-safe skeleton.
.tabs > .tabs-tab[data-active]server-rendered tabbed nav · anchor-based · zero client JS · keyboard reachable. ADR-066 disabled state for tabs that exist but are policy-blocked.
.tag.{xs · sm}.{tag-active|tag-disabled}category / filter token · inline within prose · count-aware · pressed state · ADR-066 disabled state drops href + aria-disabled.
.avatar.{paper · live · retired} / [data-state=ready|loading]agent identity glyph · 4×4 procedural mark from sigilSeed · same seed always renders the same. ADR-066 loading state renders a reduced-motion-safe shimmer skeleton until the seed resolves.
.kbdkeyboard cap glyph · monospace, bordered, single-key visual. Used in shortcut hints and accessibility guides.
.led.{pass · hold · breach · live · dim}.{led-pulse}4-state status indicator · single-cell · pulses on live only. Posture vocabulary inherits from PostureBeacon.
.quote.{default · pull · block}pullquote with attribution · canonical 「 」 brand glyphs · serif voice · used in editorial folds.
.ambient-root > .ambient-tier-{a,b,c}four-tier capability-aware kinetic background renderer. SSR-safe default (tier A) hydrates to the highest tier the device + motion preferences support. Pauses when the tab is hidden. Reads --ambient-hue / --ambient-speed / --ambient-amplitude live from the cascade.
.glass.{thin · default · thick}[data-posture]liquid-glass surface · composes above AmbientEngine · backdrop-blur picks up ambient tint live · three thicknesses, three postures.
.capability-probe[data-state]read-only diagnostic surface · reports the chosen ambient tier and the underlying device capabilities. Used on /ambient and as a QA helper.
.shell[data-density] > .shell-header / .shell-row > .shell-rail + .shell-main / .shell-footer / .shell-bottom-tabcross-page chrome scaffold · arranges header + rail + content + footer + bottom-tab across six responsive breakpoints. The only legitimate carrier of cross-page chrome.
.bottom-tab-bar > .bottom-tab[data-active]mobile-only nav · five slots maximum · 44 px touch minimum · safe-area aware. Visible on XS · SM · MD; hidden on LG+.
.icon-rail[data-expanded] > .icon-rail-list > .icon-rail-item[data-active]LG+ vertical icon rail · 56 px collapsed / 240 px expanded · icon + optional label + active LED. Replaces bespoke gz-rail markup on every deep surface.
.zero-field > .zero-field-{label · control · hint · error}canonical form-control wrapper · renders label + control + hint + error in vertical rhythm. the only legitimate composition for labeled form controls in the zero universe.
.zero-formvalidation host · server-action friendly · progressive enhancement first. owns the form-level error summary as a refuse callout.
.zero-input.zero-input-{default · mono · numeric · refuse}single-line text · variants for sans · mono · numeric · refuse. carries the seven-state form grammar uniform across the form pack.
.zero-textarea.zero-textarea-{default · mono}multi-line text · auto-grows on the --s-7 stepped grid. shares the seven-state form grammar with Input.
.zero-select-host > .zero-select + .zero-select-caretsingle-value choose-one · v1 ships native select + zero caret. searchable combobox mode is the same primitive in v1.1.
.zero-checkbox · .zero-checkbox-row > .zero-checkbox-captionsingle boolean · 16px square · indeterminate (mixed) state shipped. amber check glyph on selected.
.zero-radiogroup > .zero-radio-row > .zero-radiosingle-of-N · group primitive only · roving tabindex per ARIA · amber inner dot on selected. labels are slots.
.zero-switch · .zero-switch-row > .zero-switch-captionbinary on/off · 32×18 track · 14 thumb · 220ms slide. amber on, ink-3 off — never green (signal economy).
.zero-slider-row > .zero-slider + .zero-slider-valuesingle value or paired range · 4px track · 14px thumb · no continuous-fill animation. drag publishes a pulse via consumer-bound onChange.
.zero-datepicker > .zero-datepicker-{input · caret · panel · grid}day · month · year · custom calendar grid · today marker is amber dot below glyph (never cell fill). disabled days fade to fg-subtle.
.zero-timepicker > .zero-timepicker-col + .zero-timepicker-sephour · minute · optional second · twin columns of mono numerals · 24h default, 12h opt-in. brand reads time in mono.
.zero-fileupload[data-state] > .zero-fileupload-{zone · list · item · remove}single file or multi · drop zone with explicit "drop here" caption (no icon-only state). multi-file mode renders staged list with per-file refuse handles.
.zero-colorpicker > .zero-colorpicker-{swatch · channels · readout}OKLCH-aware · operators choose by lightness · chroma · hue. hex is read-only readout. chroma capped to sRGB-safe band by default; unconstrained opt-in raises the cap to 0.4.
.zero-taginput > .zero-taginput-tag + .zero-taginput-inputmulti-value text + commit-on-enter · each value renders as Tag · paste of comma-separated text auto-splits · backspace removes last.
.zero-icon[data-icon][data-icon-category] · .zero-icon-tone-{default · brand-signal · amber · warn · success · error · info}the only legitimate way to render a glyph · 40-glyph baseline from @zero/icons (ADR-019) · 24×24 viewBox · 1.5px stroke · currentColor only · discrete size/strokeWidth unions force grid-correct usage.
.zero-table[data-density=compact|cozy|comfortable|touch][data-mode=paginated|infinite] · .zero-table-th[aria-sort] · .zero-table-td[data-state=idle|hover|focus|invalid|disabled|readonly|refuse]the canonical sortable table · four-tier density grammar (compact 28 / cozy 32 / comfortable 40 / touch 44 px · ADR-060) · sticky header opt-in · seven cell-states reused from form-pack · server-renderable without onSort · empty + loading slots default to EmptyState + Skeleton · infinite-scroll sentinel row (ADR-060) for streaming data.
.zero-pag · .zero-pag-cell[data-state=active|idle|disabled] · .zero-pag-num · .zero-pag-ellipsisnumeric pagination · prev/next/first/last + windowed numeric range · server-renderable via hrefFor or interactive via onPage · tabular numerals · active cell amber-tinted (not solid) per chrome-budget.
.zero-tree[role=tree] · .zero-tree-branch · .zero-tree-leaf · .zero-tree-row · .zero-tree-chevron[open]collapsible hierarchy on native <details>/<summary> · expand/collapse and keyboard navigation work without JS · chevron rotates on [open] via CSS · indentation one --s-3 per level · leaves render with a dot bullet from @zero/icons.
.zero-cal · .zero-cal-cell[data-state=idle|today|other] · .zero-cal-dot[data-tone]standalone month grid for date-keyed events · pure server render · marks today in amber · event dots in five tones (default/amber/success/warn/error) · weekStartsOn 0|1 · injectable todayIso for SSR consistency.
.zero-empty[data-state=empty] · .zero-empty-icon · .zero-empty-title · .zero-empty-body · .zero-empty-actionthe calm zero-state · centered icon + title + body + optional action · no exclamation marks, no emoji · icon prop is typed against @zero/icons (ADR-019).
.zero-skeleton[data-state=loading] · .zero-skeleton-{text · block · circle}breath-driven placeholder for loading content · three variants (text · block · circle) · reduced-motion safe · no rAF · subscribes to --breath from the four-clock organism via CSS only.
.zero-sheetedge-anchored slide-in panel · top or bottom · scroll-locked · casual dismissal · the mobile modal
.zero-drawervertical-edge-anchored panel · left or right · scroll-locked or persistent (desktop side-rail) · casual or manual dismissal
.zero-accordionmulti-section collapsible · single or multiple mode · pure SSR via <details>/<summary> · no JS
.zero-context-menuright-click-anchored menu · positions at cursor · keyboard nav · ESC + outside-click dismiss · refuse posture per item
.zero-alert-dialogconfirmation dialog · outside-press + escape do NOT dismiss · forces explicit confirm/cancel · refuse-tone variant defaults confirm label to brand verb
.zero-themereact-tree-level skin + substrate contract · substrate hard-coded dark by article I · emits data-skin + data-substrate · useTheme() hook for client consumers
.zero-motionreact-tree-level motion-tier contract · pivots --ease-step + --breath + --pulse via [data-motion] selectors · useMotion() hook for client consumers · honours prefers-reduced-motion as the explicit tier
.zero-density[data-density][data-semantic-density]react-tree-level density contract · four visual tiers (compact 28 · cozy 32 · comfortable 40 · touch 44 px) · four semantic tiers (ambient · contextual · on-demand · deep) · ADR-060 doctrine 5.5 · pivots --row-h + --cell-px + --cell-py via [data-density] selectors · useDensity() hook for client consumers
.zero-localereact-tree-level locale + direction contract · sets lang + dir on wrapper · useLocale() hook for client consumers · the React-tree counterpart to brand-runtime rewriteIn
script[type="application/ld+json"]JSON-LD emitter for the MX layer · schema.org graph (Organization, WebSite, WebPage, Article, SoftwareApplication, BreadcrumbList) · SSR-clean · ADR-030
.liquid-glass > .liquid-glass-spec + .liquid-glass-contentGPU specular highlights on top of the GlassLayer material · pointer-tracked WebGL fragment shader · CSS radial-gradient fallback · honors prefers-reduced-motion. Plan v15 ADR-164 promotes this primitive to MEMBRANE ENGINE substrate (Stack Doctrine Layer 3) — the rendering technique that gives membranes optical depth. NEVER invents meaning · only renders meaning defined by Constitutional Atmosphere + AG-UI Rooms layers above.
.zero-appshell[data-shell="appshell"]the seven-region operating-environment shell · AGI Terminal Doctrine · status strip + rail + workspace canvas + context panel + inspector + bottom console + command layer · single scroll region (canvas)
.zero-status-stripthe always-visible 32 px top strip of the AppShell · left brand+breadcrumb · center mode/ticker · right health+agents+clock
.zero-bottom-consolethe bottom band of AppShell · 32 px collapsed tab strip · 200-280 px expanded panel · agent log · journal feed · audit stream · command output
.zero-agent-dock-tile[data-state=default|active|focus|error]the rail-footer cluster of currently-spawned agents · 32 px avatar tiles + posture LED + optional spawn tile · ADR-066 per-tile state vocabulary (default/active/focus/error) drives ARIA + ring
.zero-shortcut-overlay > .zero-shortcut-dialogmodal overlay · groups every cockpit keyboard shortcut by surface · opens on ? · dismissed by esc or click outside
.zero-breadcrumb > .zero-breadcrumb-list > .zero-breadcrumb-iteminline ordered breadcrumb · last crumb marked aria-current · server-renderable · sits in StatusStrip or workspace canvas header
.zero-object-switcher-overlay > .zero-object-switcher-dialogcontext-scoped object jumper · fuzzy search across the surface's objects · cmd-P · sibling to cmd-K (which navigates surfaces)
body[data-cockpit-mode]six-mode cockpit state machine · spectate · operate · investigate · edit · simulate · approve · cycles on cmd-shift-m · URL-addressable · drives CSS via body[data-cockpit-mode]
.zero-mode-chip[data-mode]compact mode badge for StatusStrip · 6 mode variants · shows the cmd-shift-m cycle hint · SSR-clean
.zero-agent-state-chip[data-state]compact agent-state badge · 7 canonical states · optional autonomy L0-L4 + trust ladder · server-renderable
.zero-trust-signal[data-trust-signal]wraps every AI-generated value · 5 canonical provenance states · GENERATED (cyan) · VERIFIED (green) · PENDING (amber) · SIGNED (blue/brand) · REJECTED (red)
.zero-confidence[data-band]wraps ConfidenceArc with verbal label and dual 60% warn / 40% block thresholds · doctrine 7 · operator never sees a raw percentage without context. Wave 41 adds AGI-VIS §9 uncertainty decomposition · the optional `uncertaintyClasses` prop surfaces 1-N of the 8 canonical uncertainty classes (stale-evidence · sparse-evidence · conflicting-evidence · model-disagreement · untested-scenario · policy-ambiguity · low-benchmark-support · irreversible-consequence-risk) as chips below the arc with `data-uncertainty-class` declarations · backward compatible.
.zero-simulate[data-mode][data-state]doctrine 7 · dry-run gate · button or flow mode · keyboard S · displays outcome + rows + cost + latency · feeds ApprovalGate
.zero-audit-streamdoctrine 4 + 7 · append-only audit feed · 12-field reproduce contract · auto-scroll · click row to inspect
.zero-kpi-card / [data-state=ready|loading|empty|error|refused|stale]doctrine 5 · the canonical KPI cell · label 12 px · value 24 px · signed delta · 48×24 sparkline · source · freshness · MX attrs (data-metric, data-value, data-currency, data-timestamp) · ADR-066 render states (ready/loading/empty/error/refused/stale) · hoisted from book-private StatCard
.zero-chart-frame[data-state]doctrine 8 · standard frame for every chart · title + subtitle + actions + body + footer (source + freshness + sample count) · uniform error/empty/refused fallbacks + loading skeleton (ADR-066 state vocabulary)
.zero-error-state[data-state]doctrine 5 · canonical empty + error + refuse cell · single-sentence message · optional reason + action + article · used by ChartFrame, DataTable, inspector empty states
.zero-danger-button[data-state]doctrine 5 · irreversible-action button · typed-confirmation gate · refuses fire until the operator types the confirmation token · MX attrs (data-reversible="false", data-confirmation-required="true") · paired ghost cancel. Plan v17 Wave 258 climate enforcement: refuses to fire inside a spectacle-tier climate (data-climate-refused="true") · the visible affordance stays so the operator understands what would be possible at core tier, but no click can do harm.
.zero-operator-mode-chip[data-operator-mode]three-position chip controlling the operator’s engine control mode (ADR-110 · Article I.7). Maps to engine’s comfort+sport / track / paused-with-manual.
.zero-pause-button[data-paused]engine pause kill switch · always present in chrome (ADR-110). Halts new entries · existing positions kept · manual close still works (Article II.1 sovereign).
.zero-lease-status[data-host][data-lease-active]chrome chip showing engine host (sandbox/railway/docker/local) and live-lease state (ADR-111 · ADR-112). Operator can revoke active lease · Article II.1.
.zero-positions-panel[data-position-count]open positions panel with always-present close + override actions per position (ADR-110). Operator sovereignty (Article II.1) regardless of mode.
.zero-pending-panel[data-pending-count]engine pending-proposals queue with approve/reject buttons (ADR-110 · semi mode). Maps to MCP zero_pending_trades / zero_approve_trade / zero_reject_trade.
.zero-advisory-panel[data-advisory-count]engine intel as advisory cards · always visible · the only engine output in manual mode (ADR-110).
.zero-manual-order-padmanual buy/sell order pad · always present regardless of mode (ADR-110 · Article II.1 sovereign). Primary action in manual mode; secondary in auto/semi.
.streaming-cursor / .sc-{idle|streaming|complete|error|refused}1ch block character · breath-driven · marks the end of streaming text. idle is hidden, streaming pulses, complete fades to bone-3, error/refused render red (no pulse). reduced-motion-safe.
.tool-call / .tc-{pending|running|complete|error|refused}composes Chip + Hash. signed tool/MCP call artifact · same shape on the way out and the way back in. running is acid, complete is green, error is red (technical), refused is red (policy · ADR-066).
.plan-surface[data-state] / .plan-step.plan-{pending · running · complete · refused · skipped}numbered, monotonic plan with verb + status per step. mirrors the journal verb vocabulary (observe / decide / refuse / event). running highlights acid, refused highlights red. ADR-066 surface state (loading/error) carries skeleton rows + aria hooks.
.approval-gate / .ag-waiting · .ag-approved · .ag-refused · .ag-timeout · .ag-risk-low/medium/high/criticalcomposes Button + Hash + (optional) ConfidenceArc · operator approval surface · binds to a signed hash · doctrine fields · agentId · model · confidence · risk · parameters · alternative · simulate · modify · A/R/S/M/Esc keyboard contract · auto-refuse countdown when etaSeconds set · critical-risk requires 10s wait + typed confirmation
.async-task / .at-queued · .at-running · .at-suspended · .at-complete · .at-failedcomposes Hash. durable task indicator with progressbar. running paints acid, suspended paints amber, failed paints red. indeterminate state is bone-3 striped on --breath.
.mcp-panel / .mp-{connected|degraded|disconnected|loading|refused}composes Chip. MCP server status panel · connected (green) · degraded (amber, warning posture) · disconnected (red) · loading (blue, aria-busy) · refused (red dashed, aria-disabled · ADR-066). lists tools exposed by the server inline.
.diff-conversation / .dc-split · .dc-stackedcomposes Hash. before/after diff with signed-edit hash. before is red-tinted (refuse posture), after is acid-tinted (decide posture). split layout is the default.
.reasoning-reveal / .rr-summary · .rr-tracenative <details> wrapper · summary always visible, monospace trace revealed on click. server-render safe and reduced-motion safe by construction.
.cmd-palette / .cmd-input · .cmd-item · .cmd-shortcut · .cmd-group-header · .cmd-empty · .cmd-foot-meta⌘K spotlight surface · scope-aware fuzzy search · keyboard-first · the inline mouth that turns intent into action. composes with SlashMenu when invoked from inside a prompt. ADR-067 · accepts controlled query, EARL-ranked items with optional groupHeader, and onSelect / onItemHover callbacks so consumers can mount their own runtime contract on top of the canonical chrome.
.slash-menu / .slash-trigger · .slash-item · .is-activeinline `/` autocomplete attached to any prompt input. lists verbs (decide, refuse, observe, replay), agents (@<shortId>), surfaces (#<route>). filters as the operator types after the prefix.
.context-rail / .cr-group · .cr-item · .is-pinnedgrouped rail of open files / pinned snippets / available tools / conversation memory / docs. the agent can see what the operator has loaded; the operator can see what the agent has indexed.
.citation-card / .cite-source · .cite-excerpt · .cite-hashquoted-source artifact · every claim the agent makes that is grounded in evidence ships one of these. carries a hash + signed-at + origin badge. composes Hash. when origin is "oracle", border-leans on data-signal; when "journal", border-leans on brand-signal.
.cost-meter / .cm-cost · .cm-tokens · .cm-bar · .cm-spark · .is-overtoken usage + dollar cost + remaining budget + sparkline. the agent must always be visible to the operator at the cost layer; this primitive is the single canonical render. fill turns to error tone when budget is exceeded.
.confidence-arc / .ca-arc · .ca-threshold · .ca-pass · .ca-pendingcircular confidence indicator · 0..1 · with a ghost arc marking the threshold. the arc fills with brand-signal on pass and bone-3 on pending. paired with ApprovalGate when confidence falls below threshold.
.trace-flame / .tf-row · .tf-observe · .tf-decide · .tf-refuse · .tf-eventtiming waterfall for tool calls + agent steps. each row is a span; left/width are start/duration. depth indents nested calls. tone maps to journal verb.
.capability-card / .cap-item · .cap-granted · .cap-pending · .cap-revoked · .cap-unrequestedagent-facing capability tree · what an agent CAN do, with consent state per capability. operators read this to know exactly what they have authorized; capabilities default to unrequested and lift to granted only on explicit consent. Plan v21 cycle 53 wires AGI-VIS §156.3 8-class uncertainty decomposition at both agent and per-capability level.
.safety-shield / .ss-armed · .ss-engaged · .ss-clearedexplicit refusal posture surface · armed = ready to refuse · engaged = currently refusing · cleared = back to normal. composes Gate + Receipt vocabulary; pairs with RefusePill in the rail. Plan v21 cycle 53 wires AGI-VIS §156.3 8-class uncertainty decomposition · the refusal carries which classes triggered it.
.tick-stream / .ts-row · .ts-up · .ts-down · .ts-flathigh-frequency data ribbon · last 30 ticks · symbol / price / delta / volume. up = success-toned · down = error-toned · flat = bone. tabular-nums and slashed-zero are mandatory.
.evidence-trail / .et-link · .et-observe · .et-decide · .et-refuse · .et-eventchain of journal entries that led to a decision. each link carries verb / body / hash and arrows to the next. composes JournalEntry vocabulary; the canonical "show your work" surface.
.channel-switcher / .ch-item · .is-activemodel / provider selector · cost-per-million + capability badges. operators see what they are paying per channel and which features each supports. the active channel is brand-signal-bordered.
[data-wordmark="zero"]four pixel-block glyphs Z·E·R·O on a 31×9 unit grid · companion to <Mark> · inherits currentColor · ADR-120
[data-component="Lockup"]cursor-in-amber-square + ZERO pixel wordmark composed at chrome or editorial density · ADR-120
.zero-shell-lobbythe welcome plane rendered as the shell-as-product · 5 mode tiles + identity strip + doctrine-health + engine-snapshot strip · replaces the editorial Landing on / · Plan v4 §C thesis
.zero-global-chrome32px sticky top strip with brand mark + breadcrumb + 5-mode switcher + doctrine-health + ⌘K hint + visitor chip · always-on for product routes · hidden for specimens + login · Plan v4 §D Wave 58
.zero-tour-stepone card on the guided tour at /tour · ord chip + name + thesis + primary CTA + next-stop cross-link · Plan v4 Wave 66
.zero-mode-shellone canvas wrapper for /spectate · /delegate · /operate · /build · /govern + spectator routes · meta strip + hero h1 + lede + ModeSection children + footer next-step nav · replaces 10 different inline-padding wrappers · Plan v9 Wave 82
.zero-mode-sectionone section primitive used inside ModeShell · eyebrow + h2 (mono 12px lowercase) + optional source label + content slot · retires the 10 inline section header patterns that drifted across Plan v4-v7 mode routes
[data-component="Star"]concrete visual realization of UniverseRole role=star. SVG circle · signal magnitude drives radius (2-7px) · state drives fill + glow. Pulse animation on acting + high-consequence states. Composes into ConstellationField + universe-map canvas.
[data-component="Flare"]concrete visual realization of UniverseRole role=flare. SVG concentric rings · intensity drives ring count (2-5) + glow magnitude. One-shot radial-burst animation on mount (1.2s decay). Backing.id should point at journal event id.
[data-component="GravityWell"]concrete visual realization of UniverseRole role=gravity-well. SVG concentric rings + radial gradient · mass drives ring count (3-8) + outer radius (18-30 of 64-unit viewBox). Ambient rotation 12s linear loop. Backing.id should point at vault/pool/treasury id.
[data-component="OrbitPath"]concrete visual realization of UniverseRole role=orbit. SVG quadratic Bezier between two anchors · arc + strength + active props. Tracer animation traverses the path 4s linear when active. Returns <g> · use inside a parent <svg> viewBox.
[data-component="Constellation"]concrete visual realization of UniverseRole role=constellation. SVG <g> · positions N stars + draws hairline edges connecting them in caller-supplied order. Average signal drives edge opacity. Composes Star primitive. Returns <g> · use inside parent <svg>.
[data-component="Nebula"]concrete visual realization of UniverseRole role=nebula. Density (0..1) drives dot count (8-80) within width × height viewBox region. Seed-based deterministic dot placement · same id → same pattern. REQUIRES density · no decorative nebula per AP-23.
[data-component="VoidMarker"]concrete visual realization of UniverseRole role=void. Dashed-square boundary + diagonal cross-hatch indicating unmapped territory. Communicates known unknowns explicitly per BRAND-DOCTRINE §A.5 universe principle (no hand-waved empty space).
[data-component="ConstellationField"]scene-composition canvas · holds positioned cosmic primitives (Star · Constellation · OrbitPath · GravityWell · Flare · Nebula · VoidMarker) inside a single SVG viewBox with ambient radial-ink background + subtle reference grid. Responsive width default · returns a <figure> wrapping <svg>.
.zero-risk-dialnormalized 0-1 risk · operator envelope ceiling · 4 trend directions · breach state emits high-consequence cursor + urgent mood
.zero-take-oversovereign right to interrupt autonomous action · preserves state + evidence + reasoning · override is not restart · cursor in acting state at trust-surface-anchor zone
.zero-return-recapafter absence · 3 groups · 7 rows per group · memory citation declared · cursor in listening state at recap-marker zone
.zero-capital-memorypersistent capital memory · 7 classes cited per stratum · forget-affordance per stratum · data-memory-citation declared (no silent personalization)
.zero-capital-guardianalways-on ambient layer · 6 alert kinds · salience-tiered · cursor in listening when attending · temperament quiet · no theatrical attention
.zero-intent-layeroperator declares what capital should do · 3 axes (objective · horizon · risk ceiling) · commit is keyed-idempotent · cursor in thinking+curious during draft
.zero-opportunity-latticeranked deployment candidates · per-row data-system-object="Opportunity" + data-time-horizon · dense density · cursor thinking+curious
.zero-autonomous-treasuryplaced + idle buckets · weighted yield · per-allocation rebalance policy + reserve flag · cursor idle (ambient) · temperament quiet
.zero-evidence-rowsingle horizontal row · Mark + Chip(evidence class) + body + author + signed Hash + tabular ts. Used on every decision-bearing surface to answer "why this happened" in 32px. 6 evidence classes per PROVENANCE §3 · tone-mapped chip color.
.zero-pnl-bandnarrow horizontal band · label + signed value + optional percent · color via state · tabular-nums + slashed-zero defensive numeric. Used on every per-position read across cockpit + spectate.
[data-component="StrategyCard"]composes Card + 3 Chips (cost · risk · hold) + optional ConfidenceArc match-score + optional delegate CTA (T2 consequence). Replaces /delegate text-only SmallMultiples cells with richer summary per ZERO-OS-AGI §opportunity.
[data-component="ApprovalTimeline"]vertical timeline · per-step Mark + state-colored label + actor + body + signed Hash + tabular ts · connector spine between steps. Used by /operate, /cockpit, /tribunal to show approval lineage per PROVENANCE §3.
[data-component="PolicyEditor"]structured form · autonomy tier (paper/semi/auto) + risk ceiling slider (0-100%) + drawdown limit slider (0-50%) + venue allowlist chip toggles + commit button. Maps autonomy → consequence tier (T0/T1/T2). Used on /govern + /founder/control.
[data-component="SignerChain"]horizontal chain of signers · per-link Avatar + handle + role + state-colored LedDot + connector. Reviewing link gets ink-2 background highlight. Maps to CONSTITUTION Article V.3.1 sub-delegation chain.
[data-component="ReceiptDiff"]side-by-side Receipt before + Receipt after + diff spine + changed-fields summary list. Maps to /studio "diff is the proof" promise. Composes Receipt twice.
[data-component="RouteTrace"]linear sequence of route hops · per-hop ord + Mark + arrow + route path + body + signed Hash + tabular ts. Maps PROVENANCE §3 "how did we get here" affordance.
[data-component="VenueHealth"]single horizontal row · LedDot + label + tabular latency + depth + liquidity score · 4-state vocab maps to LedDot tones. Used everywhere a venue context is read.
[data-component="MarketDepth"]SVG mini-chart · cumulative bid wall (green) + ask wall (red) + mid-price line (acid). Compact depth view sized for order-pad context.
[data-component="FundingBasis"]label + signed-bps value + mini-sparkline · color-coded by sign · 8 history points typical. Used on operate canopy + spectate arena cells.
[data-component="OrderPad"]side toggle (buy/sell · green/red) + symbol select + size input + type toggle (market/limit) + optional limit price + submit button. Paper-default · T0 consequence. Live mode bumps to T2 + approval-gate archetype.
[data-component="PositionTable"]per-row symbol + side (long/short colored) + entry + size + PnLBand + risk-percent. Composes PnLBand. Used on /operate canopy + /cockpit floor.
[data-component="HedgeLeg"]horizontal row · symbol + side + size + "offsets X" caption + PnLBand + reduce (T1) + close (T2) buttons. Composes PnLBand.
[data-component="RotationPlan"]ordered step list · per-step ord + Mark + from→to regime arrow + trigger phrase + state label. 4 state vocab maps to Mark states.
[data-component="LossDistribution"]SVG histogram · 12-24 bars typical · color-coded by sign (green positive · red negative · bone breakeven) + dashed acid zero-line. Compact form.
[data-component="EnvelopeBreach"]red-inset row · Mark (refused) + BREACH label + envelope + rule + overshoot + actor + signed hash + tabular ts + acknowledge button. T3 consequence · high-consequence cursor.
[data-component="EnvelopeRecover"]amber-inset block · Mark (waiting) + RECOVER label + breach-ref + action + expected outcome + refuse/approve buttons with undo window. T2 act-with-undo per ADR-128.
[data-component="AgentMatcher"]composes Avatar + Chip (skills) + ConfidenceArc (match) + optional Hash (receipt) + optional red Chip blockers. Used in Studio agent-matching flow + Marketplace tile previews. Surfaces match score against operator policy envelope.
[data-component="StrategyComposer"]multi-step strategy chain · each step is a Mark + kind-tag + label chip · hairline edges between steps · header surfaces graph-valid status. Powers /build Studio composition. Step kinds: entry · sizing · hedge · exit · monitor · guard.
[data-component="SkillBundle"]composes Switch + Hash · skill rows with name + description + toggle · header surfaces attached count + version hash. Used in Studio agent authoring + Marketplace skill listings per ZERO-BUSINESS-MODEL §3.
[data-component="EvaluatorBundle"]composes Switch + Slider · evaluator rows with name + description + weight slider + attach toggle. Header surfaces normalized weight sum + balanced/unbalanced state. Used in Studio agent scoring authoring + Marketplace evaluator listings per ZERO-BUSINESS-MODEL §3.
[data-component="MarketplaceTile"]composes Chip (kind + status) + Hash (signed) · header has kind chip + author + signed hash, body has title + synopsis, footer has price + take-rate + status. 5 kinds: skill · signal · dataset · evaluator · agent-service per ZERO-BUSINESS-MODEL §3.
[data-component="TakeRateBand"]horizontal segment band · operator share (bone-1) + take share (brand-signal) · tabular numeric label above. Used on /marketplace tile detail + /pricing canopy. Maps to ZERO-BUSINESS-MODEL §3 marketplace take + §4 capital-products fees.
[data-component="BloodlineNode"]composes Avatar (20px) + Chip (generation) + Hash · compact node for lineage trees. Generation chip color maps to depth: g1=acid (founder) · g2-3=blue · g4+=amber. Powers BloodlineTree scene + /bloodlines lists.
[data-component="LineageBranch"]composes BloodlineNode + Mark (event) + Chip + SVG fork-path · renders parent node + N children with a curved-path connector + fork-reason chip + timestamp. Used on /bloodlines for explicit-fork list entries.
[data-component="BloodlineTree"]genealogy scene · agents as circles + parent→child as curved SVG paths · grouped by generation top-to-bottom. Posture drives node fill: live=acid, paper=bone-2, retired=bone-4. Declares data-universe-role="constellation".
[data-component="MarketHorizon"]stacked-rows scene · each venue is bid-band (green) ← inside-price → ask-band (red). Bands scale to the deepest venue. Declares data-universe-role="gravity-well" — liquidity concentration is the gravity well.
[data-component="ColiseumDuel"]side-by-side duel scene · left agent + right agent · lead bar in brand-signal (winner) vs bone-3 (loser) · state chip (running/resolved/contested). Declares data-universe-role="flare" — duels are adversarial flare events.
[data-component="AgentStream"]horizontal scrolling tape · each event is a pill with Avatar + agent + verb + subject + ts + Mark glyph. Reads like a financial tape · most-recent-first. Declares data-universe-role="orbit" — agent activity IS the orbital motion.
[data-component="ReplayRoom"]room-scale composite for /replay · 3 KPI cards (replays/forks/disputes) + replay-feed cards (Replay + RouteTrace + EvidenceRow per replay) + AuditStream footer. Used as the canonical wrapper for /replay route.
[data-component="MarketplaceRoom"]room-scale composite for /marketplace · 5 KPI cards + TakeRateBand strip (per plane) + filter-chip strip + responsive MarketplaceTile grid. Used as the canonical wrapper for /marketplace route. Maps to ZERO-BUSINESS-MODEL §3.
[data-component="BloodlinesRoom"]room-scale composite for /bloodlines · 3 KPI cards + dominant BloodlineTree scene + keyboard-navigable BloodlineNode list + recent LineageBranch fork events. Tree + list pairing per AGI-VIS §15.
[data-component="TribunalRoom"]room-scale composite for /tribunal · case list · each case carries an ApprovalTimeline + SignerChain + EvidenceRow stream. Status-tone left-border + consequence-tier chip. Declares high-consequence cursor per cursor-organism doctrine.
[data-component="ColiseumRoom"]room-scale composite for /coliseum · 3 KPI cards + vertical stack of ColiseumDuel scenes + tribunal-pending chip on contested duels. Empty state directs to /coliseum/queue.
[data-component="FounderControlRoom"]founder-shell control plane v1 · 4 KPI cards (mode · doctrines · gates · pending) + AgentDock + AuditStream. Cycle 7 retrofits with QueueRail + HorizonStrip + SovereignActionPad per FOUNDER-SHELL-DOCTRINE §6.
[data-component="FounderJudgmentRoom"]founder-shell judgment plane v1 · 3 KPI cards + ApprovalGate queue + EvidenceRow history. Cycle 7 retrofits with Decision + SovereignActionPad. Empty state recognizes clean queue.
[data-component="FounderVerificationRoom"]founder-shell verification plane v1 · 4 KPI cards + inline doctrine-health matrix (auto-fill grid, LedDot + name + gate) + regression list. Cycle 7 retrofits with DoctrineHealthMatrix + RegressionTriage primitives.
[data-component="QueueRail"]composes EvidenceRow + Chip + LedDot · founder queue rail with 10 canonical item classes (brand-veto · ship · doctrine · 1-way · resource · narrative · launch · incident · drift · activation). Declares high-consequence cursor when items pending. Powers FounderControlRoom.
[data-component="HorizonStrip"]4-button horizontal filter (now · next · future · all) · active state in brand-signal · per-horizon counts inline · time-band hint below label. Powers FounderControlRoom horizon-rail region.
[data-component="SovereignActionPad"]4×2 grid of 8 sovereign verb buttons (approve · refuse · veto · freeze · reroute · delegate · escalate · release) · veto + freeze are destructive (red border) and require T3 confirmation. Composes Mark per verb. Declares high-consequence cursor + confirmation-required.
[data-component="DoctrineHealthMatrix"]composes LedDot + Chip · auto-fill grid · each cell is one doctrine (name + gate + ADR) with status (pass/advisory/missing/breach) · header summarizes pass/total + breach count. Powers FounderVerificationRoom retrofit + /govern.
[data-component="RegressionTriage"]composes Mark + Chip + Hash · failing-gate rows with severity (critical/major/minor) · owner + retries + first-failure ts + optional hash. Empty state recognizes a green shell. Powers FounderVerificationRoom + /founder/verification.
[data-component="BenchmarkDriftWatch"]composes Chip + inline SVG sparkline · per-benchmark row with target-line (dashed) + sparkline (colored by direction) + current + delta + trend chip. EVALUATION-DOCTRINE §6 direction taxonomy: improving · holding · degrading · volatile.
[data-component="StrategicBetGrid"]composes Card + Chip · responsive grid of strategic-bet cards · each with title + horizon + thesis + optional kpi + conviction chip + status chip. Powers FounderFuturesRoom + /founder/futures.
[data-component="OneWayDoorRegistry"]composes EvidenceRow + Chip + Hash · per-entry: title + taken-at + signed-by + counterfactual + consequence + signed hash. Read-only ledger of irreversible founder decisions per CONSTITUTION §V.3.
[data-component="FounderFuturesRoom"]founder-shell futures plane · 3 KPI cards (active/realized/contested bets) + StrategicBetGrid + OneWayDoorRegistry. Powers /founder/futures.
[data-component="FounderLabRoom"]founder-shell lab plane · 3 KPI cards (branches/simulations/drafts) + branch grid (Card + Chip per state) + AuditStream. Exploration scratch space · branches never auto-promote to /founder/judgment.
[data-component="OrchestrationRoom"]cross-mode orchestration · 3 KPI cards (active/pending/modes) + AgentDock + per-mode rollup grid + AuditStream. The operator surveys 5 modes in one room.
[data-component="EvidenceRoom"]evidence gathering canopy · 3 KPI cards (total/signed/unsigned) + filter-chip strip (7 classes + all) + EvidenceRow stream + summary footer. Per PROVENANCE-DOCTRINE §3 evidence-class taxonomy.
[data-component="RecapRoom"]structured recap · ReturnRecap header + ordered Card sections (each with heading + caption + rich body). Voice softer than ops rooms (narrative). Per MEMORY-DOCTRINE §5.
[data-component="IntentRoom"]NL-first intent canopy · 3 KPI cards + IntentLayer composer + examples card + recent-intents card. Pre-Composer scaffold · Phase B (cycles 10-12) replaces with full AI Composer system.
[data-component="TribunalRound"]tribunal scene · 4 roles placed around a contested center (accuser N · defender S · evidence W · arbiter E) · each role is a state-colored circle linked to center by dashed hairlines. Declares data-universe-role="constellation".
[data-component="FlareStream"]horizontal timeline scene · events as flare bursts (stem + nucleus) with magnitude driving height + kind driving color. Axis hairline at bottom with reference gridlines. Declares data-universe-role="flare".
[data-component="OrbitLineage"]orbital lineage scene · founder at center, generations as concentric dashed rings, agents distributed around their generation’s ring at evenly-spaced angles. Posture drives node fill. Pairs with zero-bloodline-trace keyframe.
[data-component="RegimeShift"]regime-shift scene · horizontal two-tone band (prior=blue · current=acid) with vertical crossing line at shift position + transition gradient + shift-timestamp anchor + optional confidence. Declares data-universe-role="nebula".
[data-component="VenuePill"]16×16 single-letter venue identity chip · 8 canonical venues (H · B · D · O · Y · R · U · G) · color per venue family. Used in dense surfaces (Replay rows · audit · evidence) to declare venue without burning a label.
[data-component="RegimePill"]regime classifier · 6 canonical regimes (trend · mean-revert · neutral · stressed · vol-expansion · vol-compression) · color + dot indicator. Optional confidence drives subtle opacity. Per EVALUATION-DOCTRINE §6.
[data-component="ChainBadge"]chain identifier · 8 canonical chains (eth · arb · base · op · sol · sui · btc · polygon) · chain-family color on bottom border. Always-visible declaration per CHAIN-ABSTRACTION-AUDIT-TRAIL doctrine.
[data-component="PostureGlyph"]5-posture 12×12 SVG glyph · paper (outline) · live (filled) · paused (two bars) · take-over (opposing arrows) · refused (X). Read at a glance.
[data-component="DividerGlyph"]5-kind typographic separator (dot · em-dash · diamond · pipe · slash) · aria-hidden so screen readers skip · canonical per ZERO-TYPOGRAPHY-DOCTRINE §3.
[data-component="RiskGlyph"]risk class · 4 canonical (low = 1 bar · medium = 2 bars · high = 3 bars · breach = filled triangle). 12×12 SVG glyph readable at small sizes.
[data-component="AuthorityGlyph"]5-level authority icon · agent (dot) · operator (ring) · brand-veto (diamond) · compliance (shield) · founder (star). Per CONSTITUTION §V.3 + INTERVENTION §3.
[data-component="EvidenceGlyph"]7-class evidence icon · source (square) · inference (triangle) · memory (dot stack) · user-input (caret) · system-state (rings) · external-event (lightning) · lineage (chain links). Per PROVENANCE-DOCTRINE §3.
[data-component="OpportunityField"]opportunity density scene · cost (x) × expected return (y) · density-driven circles in brand-signal · denser regions read as gravity wells. Declares data-universe-role="gravity-well".
[data-component="EnvelopeMap"]envelope scene · cost × risk axes · bounded acid-tinted region for envelope · current point as dot (red on breach) · breach toggles data-cursor-state="high-consequence". Per INTERVENTION-DOCTRINE §3.
[data-component="LineageOrbit"]scrubbable orbital lineage · generation rings + sweep arc highlighting "now" position · nodes born before sweep render opaque, after render dim. Pairs with zero-bloodline-trace keyframe. Distinct from OrbitLineage (cycle 8 · static).
[data-component="BridgeFlow"]cross-chain bridge scene · per-hop chain badge connected by directional arrows · state-colored edges (pending dim · in-flight amber pulsing · settled green solid · refused red dashed). Amount banner top. Declares data-universe-role="flare".
[data-component="AnswerCard"]Composer surface for Observe/Explain jobs · headline + body + EvidenceRow stack + jump links. Read-only · R0 · no approval gate.
[data-component="ObjectSheet"]Composer surface · canonical profile for system-object · class chip + identifier + signed hash + KPI grid + EvidenceRow stream + verb buttons. Used by object-first invocation (right-click → composer).
[data-component="CompareBoard"]Composer surface · side-by-side comparison · N columns × M metrics · best-column highlighted acid · tabular-numeric per row. Read-only · R0.
[data-component="ScenarioWorkspace"]Composer surface · 2-column workspace · left=param sliders · right=outcome KPIs + run CTA · R1 advisory · no commit. Promote to R2+ via ExecutionReviewSheet.
[data-component="ExecutionReviewSheet"]Composer surface · universal "are you sure?" · risk-tier chip + ApprovalGate + payload preview + evidence basis + signed hash. T2-T3 consequence. Declares high-consequence cursor.
[data-component="WalletPanel"]Composer surface · wallet operations · balances strip + optional BridgeFlow route + policy-check list + STUBBED signer footer. T3 consequence. Per Plan v14 boundary, signer returns "would-sign" preview · real dispatch auth-walled (Plan v15+).
[data-component="InterventionConsole"]Composer surface · live-control strip · agent picker (LedDot per posture) + current-activity readout + 5-verb pad (pause/take-over/refuse/veto/freeze) · each verb declares reversibility. T3 consequence · high-consequence cursor.
[data-component="ReplayViewer"]Composer surface · single-replay viewer · composes Replay (with timeline) + RouteTrace + EvidenceRow + fork-from + rewind CTAs. Distinct from ReplayRoom (cycle 6 · multi-replay feed). R0 read-only · fork-from + rewind are R1.
[data-component="BuildSheet"]Composer surface · agent/strategy authoring · Avatar + StrategyComposer + SkillBundle + EvaluatorBundle + promote-to-studio CTA (disabled until strategy graph valid). R2 consequence.
[data-component="GovernanceSheet"]Composer surface · constitutional settings · risk chip header + EnvelopeMap + PolicyEditor + DoctrineHealthMatrix. Compose-time R2; sovereign actions (delegate/revoke) escalate to R3 via ExecutionReviewSheet.
[data-component="Composer"]the AI Composer · status strip (state + scope + modality toggle) + input form + modality hint + intent preview band. Pairs with book/lib/composer/{state,intent,risk,trace,verbs,objects}. NOT a chat bar — the shell-native interaction layer.
[data-component="SlashHint"]autocomplete hint chip · renders the canonical /verb object qualifier → surface pattern · highlights when active · click selects the hint. Composer slash modality.
[data-component="ScopeChip"]composer scope pill · 8 canonical kinds (agent · capital · policy · trace · thesis · opportunity · event · intervention) each with a typographic glyph · optional clear button when editable.
[data-component="RiskTierPill"]5-tier risk indicator (R0 green · R1 blue · R2 amber · R3 red · R4 red) · dot + label · default + large variants. Per book/lib/composer/risk.ts.
[data-component="IntentPreview"]restates the classified intent in canonical form · verb + ScopeChip + → + surface · RiskTierPill in header · optional confirm/cancel footer. Renders before the AG-UI surface mounts.
[data-component="ObjectPill"]inline pill for system-object references · class-toned dashed underline · onInvoke renders as button (right-click summons composer scoped to this object). Per source doc §object-first invocation.
[data-component="ContextualMenu"]positioned overlay menu · 1 row per verb · tier-toned left border · optional Mark glyph + kbd hint · Esc + click-outside dismiss. Right-click invocation modality for ObjectPill, replay frames, charts, alerts.
[data-component="ModalityToggle"]4-button radiogroup · nl · /slash · object · contextual · active in brand-signal · default + compact variants · title attribute carries modality hint.
[data-component="ApprovalStrip"]12-stage horizontal pipeline strip · each stage is a state-toned dot + label · connectors between · 5 states (pending/active/passed/failed/skipped) · skipped renders dim for tiers that bypass stages.
[data-component="OrientationCard"]welcome-plane card · italic-serif heading + narrative body + first-action prompts. Voice intentionally softer than cockpit-machine. Per ONBOARDING + PUBLIC-SHELL §welcome.
[data-component="OrchestrationPrompt"]Command-plane Composer entry · 5-mode radio bar (spectate · delegate · operate · build · govern) + large compose pad + orchestrate CTA. Delegates to the actual Composer once scope is picked.
[data-component="ManualFallback"]fallback surface when classifier cannot resolve intent · canonical verb list scoped to plane + mode · each verb declares risk tier and consequence-tier on dispatch. Per source doc §fallback · never strand the operator.
[data-component="PlaneBinding"]invisible wrapper · declares data-composer-plane on subtree so descendant Composer mounts adapt emphasis to the plane. display: contents · no rendered chrome. Per AGI-VIS §15 + PUBLIC-SHELL §planes.
[data-component="ModeBinding"]invisible wrapper · declares data-composer-mode + data-mode-families on subtree so descendant Composer mounts filter verbs to mode emphasis. Pairs with PlaneBinding. Per PUBLIC-SHELL §5-modes.
[data-component="AtmosphericField"]deep mineral background · the field layer per ADR-164 §5.1. 4 climate-tuned levels. Optional drift motion (zero-atmosphere-drift keyframe). Sits at the bottom of every room.
[data-component="MistLayer"]low-contrast interference between Field and Membrane per ADR-164 §5.2 · 3 opacity levels · slow drift motion · aria-hidden (atmospheric only).
[data-component="MembranePane"]translucent suspended surface · the primary interface layer per ADR-164 §5.3 · 4 thickness variants (thin/standard/thick/sealed) · backdrop-filter blur + edge border · optional suspend motion (zero-atmosphere-suspend). Replaces Card at room scale.
[data-component="SignalEmission"]bright-signal marker · 5 intensity levels L0-L4 mapped to consequence-tier T0-T3. 3 shapes (dot, bar, ring). Plan v17 Wave 257 reads climate context · clamps emission to climate signal-cap · pulse legal only at L3+ AND climate motion-budget allows it. Brightness earned by consequence per ADR-164 §6.
[data-component="EtchingLayer"]engraved typography surface per ADR-164 §5.5 · 3 weights (sub/base/ceremonial) · voice + role declared per ZERO-TYPOGRAPHY § · tabular-figures auto for metric/system roles.
[data-component="MembraneCanopy"]room-scale canopy · composes MembranePane (thickness) + EtchingLayer (ceremonial title + sub caption) · sticky-top · pairs with Climate wrappers (Plan v15 cycle 21). Every Room mounts one to declare identity.
[data-component="MembraneInspector"]side-rail telemetry membrane · composes MembranePane (thickness 2) + EtchingLayer (section-title + meta caption) · scrollable inner zone · default 320px width.
[data-component="MembraneRail"]vertical navigation membrane · composes MembranePane (thickness 1 default) · default 64px width · for primary mode navigation, agent dock, persistent shortcuts. Distinct from MembraneInspector (telemetry).
[data-component="MembraneCanvas"]main content membrane composing AtmosphericField (Layer 1) + MistLayer (Layer 2) + MembranePane (Layer 3). 7 per-room climate seeds map field/mist/membrane levels per ADR-164 §8. Replaces flat dashboard canvas with the full atmospheric stack.
[data-component="ExpressionToggle"]2-option radiogroup · sets data-atmosphere-expression on documentElement so descendant material primitives adjust signal-cap, membrane-thickness-bias, motion-amplitude per ADR-164 §13-14. Default spectacle (public) · operator can flip to core for depth.
[data-component="ProgressionPath"]4-step funnel ribbon · Watch → Understand → Join → Govern per ADR-163 §9 · active step in brand-signal · passed in green · future dim. Optional onSelect for navigation. Mounted at top of welcome-plane surfaces.
[data-component="AgentMarquee"]retail-front-door marquee · composes Avatar + Hash + Chip · 24h return (top-border tone) · current move + confidence + state + watch CTA. data-brightness-band="bright" · data-atmosphere-expression="spectacle" defaults.
[data-component="EventTicker"]single-event ticker · renders ONE event at a time with auto-rotation · ts + agent + 1-line body + position indicator. aria-live polite. data-brightness-band="mid".
[data-component="StakesBanner"]visible-stakes banner · label + sub + large amount · tone-toned left border · aria-live polite · data-brightness-band="bright" for focal attention. Pairs with EventTicker on retail surfaces.
[data-component="JoinPrompt"]single-CTA conversion entry · italic-serif headline + body + acid CTA · T1 consequence (sign-up · paper deploy) · NOT T2+ (live capital escalates to ExecutionReviewSheet downstream). data-brightness-band="bright".
[data-component="FloorClimate"]Floor room climate per ADR-164 §8.1 · publishes a ClimateContext (signal-cap L4 · 12s drift · 800ms pulse · curious cursor mood · ceremonial typography) · exposes CSS climate-motion vars · optional italic-serif crown band with live-tape aria-live region · composes MembraneCanvas(climate=floor) for the 3-layer substrate.
[data-component="ReplayClimate"]Replay sealed-chamber climate per ADR-164 §8.2 · publishes ClimateContext (signal-cap L3 · no drift · 1000ms slow pulse · uncertain cursor mood · base typography) · aria-live="off" enforces sealed posture · optional decision-id + scrub-position crown · darker root border + field-3 background lock the chamber visually · explicit drift={false} on MembraneCanvas overrides any inherited drift.
[data-component="GovernClimate"]Govern ceremonial climate per ADR-164 §8.3 · publishes ClimateContext (signal-cap L3 · no drift · 1200ms slow pulse · confident cursor mood · editorial density · ceremonial typography) · optional constitutional crown band (doctrine + citation in italic-serif + sovereign-action affordance label) · field-2 background tint · ceremonial 2px border under the crown · refuses drift inheritance.
[data-component="StudioClimate"]Studio constructive climate per ADR-164 §8.4 · publishes ClimateContext (signal-cap L3 · 10s subtle drift · 700ms pulse · curious cursor mood · operational density · base typography) · always-on toolbar crown listing canonical Studio verbs (compose · simulate · evaluate · promote) · draft-state pill turns amber when dirty · cascades data-dirty so unsaved-edit indicators downstream can synchronize.
[data-component="RecapClimate"]Recap editorial climate per ADR-164 §8.5 · publishes ClimateContext (signal-cap L2 · 16s slow drift · 900ms pulse · delighted cursor mood · editorial density · ceremonial typography) · italic-serif headline reads aria-live polite · editorial line-length clamp (68ch) on the inner canvas so narrative reads at ZERO-TYPOGRAPHY §line-length spec.
[data-component="TribunalClimate"]Tribunal adjudicative climate per ADR-164 §8.6 · publishes ClimateContext (signal-cap L4 · 14s slow drift · 800ms pulse · urgent cursor mood · dense density · ceremonial typography) · case-state-tinted 2px border (amber in-session · ink-3 ruled · ink-2 recess) · adversarial crown with case id + posture pill · optional rulings region renders italic-serif under aria-live="assertive" so screen readers hear verdicts · cascades data-tribunal-state to descendants.
[data-component="ColiseumClimate"]Coliseum spectator climate per ADR-164 §8.7 · publishes ClimateContext (signal-cap L4 · 10s drift · 650ms fast pulse · urgent cursor mood · operational density · ceremonial typography) · bout-state cascade (queued/live/sealed) · live state animates root border via zero-coliseum-live-pulse keyframe (reduced-motion override in styles.css) · optional italic-serif bout title in crown · live tape under aria-live="polite".
[data-component="RiskEnvelope"]risk-envelope band · 4 zones (safe/warn/breach/halt) per INTERVENTION-DOCTRINE §3 · exposure marker indicates current position.
[data-component="ExposureRing"]circular exposure 0-1 fill · 3 states · angle-encoded per AGI-VIS §6 · ring is read-only metric.
[data-component="AllocationGrid"]capital allocation table · rows of {label · pct · amount} · tabular figures · dense data-ink per Tufte.
[data-component="PositionPnL"]single-position pnl row · symbol + venue + size + entry + mark + pnl · color-coded sign per light-as-consequence.
[data-component="VenueLatency"]venue latency pill · ms readout + 3 states (good/warn/bad).
[data-component="SlippageBand"]slippage band · expected + worst-case (P95) bps · decomposed uncertainty per AGI-VIS §uncertainty-decomposition.
[data-component="RouteMap"]order-routing path · ordered hops with optional per-hop weight · horizontal arrow flow.
[data-component="LiquidityRibbon"]liquidity-depth ribbon · per-level stacked bid (green up) / ask (amber down) bars · compact horizontal density.
[data-component="CounterpartyBadge"]counterparty risk indicator · rating A-D + custody class + jurisdiction · per ZERO-OS-AGI-REDESIGN counterparty awareness.
[data-component="CustodyChain"]custody-evidence chain · ordered hash + signer + chain links · slashed-zero per PROVENANCE.
[data-component="PolicyDelta"]policy change diff · field + before → after · color-coded severity.
[data-component="ApprovalStamp"]approval-completed terminal stamp · ts + signer + risk tier + optional decision hash. The visible end-state of an ApprovalGate flow.
[data-component="SkillCard"]per-skill summary card · name + scope + version + score.
[data-component="StrategyTile"]per-strategy tile · name + risk class + horizon + win rate.
[data-component="EvaluatorScore"]per-evaluator composite score + 3-state pass/borderline/fail · for /coliseum + /studio.
[data-component="SimRunStrip"]single simulation-run row · seed + duration + outcome + pnl bps.
[data-component="PromptVersionBadge"]prompt version pill · vN + commit hash · 3 states (draft/active/archived).
[data-component="ListingPriceTag"]marketplace price pill · amount + currency + period.
[data-component="TakeRateRow"]per-plane take rate row · plane + percentage + volume · per ZERO-BUSINESS-MODEL §3.
[data-component="BidStack"]stacked bids for a marketplace listing · ranked with top bid emphasized.
[data-component="SellerReputation"]seller reputation display · handle + 0-5 stars + sales count + verified flag.
[data-component="ReplayFrame"]single replay frame row · index + ts + verb + payload preview · selectable.
[data-component="RouteTraceLine"]single route-trace line · from → to with optional venue + duration.
[data-component="EvidenceTag"]evidence-class chip · 4 classes (receipt/simulation/benchmark/doctrine) per PROVENANCE §3.
[data-component="OutcomeRibbon"]pre/post/diff outcome ribbon · three-cell horizontal display · color-coded polarity.
[data-component="CursorOrganism"]wraps <Mark> with motion grammar + emotional overlays per CURSOR-ORGANISM-DOCTRINE (ADR-152). 10 canonical states · 5 emotional moods · 8 motion verbs · 10 shell-integration zones · reduced-motion fallback. the visible tip of cognition · never decorative.
[data-component="UniverseRole"]declares the information-bearing role of any cosmic visual element per BRAND-DOCTRINE §3 universe principle (ADR-151). 7 canonical roles · nebula requires backing data (anti-pattern AP-23 prevention). visual rendering delegated to children · this primitive is the declaration contract.
.zero-role-chip[data-role]TEAM-SHELL-DOCTRINE §2 role indicator. emits data-role + data-team-archetype="role-chip". aria-label carries authority scope per §3. optional onSwitch for multi-role users per §7 (role-switcher grace).
.zero-delegation-grant[data-grant-source][data-grant-target]TEAM-SHELL §4 downward-only delegation chain. emits 5 required fields per §10 (source · target · scope · expiry · return-path) + MEMORY-DOCTRINE delegated-class wiring. revoke button is forget-affordance per MEMORY §6. ≤ 2 clicks to revoke.
.zero-escalation-routeTEAM-SHELL §5 · every delegated-role surface carries this in ≤ 1 click. emits data-team-archetype="escalation-route" + data-sovereign-action="escalate". MUST sit adjacent to a sovereign-action pair · ci:team-shell dim 6 enforces this. preserves context per INTERVENTION §7.
.zero-replaywalks the evidence chain of an autonomous action · 6 evidence classes · sealed when all hashes present · enforces AGENT-HANDOFF rule "every autonomous action must have replay and provenance"
.zero-provenance-panel6 lineage fields per §3 · audit linkage per §5 · cursor mood derived from uncertainty band · data-inference-only fires when sole evidence class is inference
.zero-policy-boundary4 policy tiers · operator-set or constitutional · per-action-class declared · data-system-object="Policy" connects to public-shell govern
.zero-constitutional-autonomy-controlsthe editable surface where the operator MAKES policy · 4 tiers (auto-permitted · requires-consent · requires-simulation · prohibited) per action class · data-system-object="Policy" · sits in govern mode + founder judgment plane
.zero-chain-abstraction-audit-trailintent-level by default · chain mechanics on demand · "chain complexity must be abstracted but not hidden from audit" · data-chain-abstracted toggles · per-step chain + venue + tx + gas declared when expanded
.zero-ambient-intelligence8 ambient task kinds · quiet temperament · journal channel attention · cursor listening · the "always at work" layer distinct from theatrical agents
.zero-intelligence-graph6 node kinds · maps to universe-role (constellation/orbit/flare/star) · the AGI graph distinct from social bloodlines · cursor thinking
.zero-operator-teamoperator-side multi-signer setup · distinct from internal TEAM-SHELL roles · per-member authority + tier ceiling · cosign threshold for T3
.zero-tax-compliance-memoryjournaled memory class · jurisdiction-aware · realized + unrealized + wash-sale tracking · cursor listening · audit-export ready
.zero-wallet-postureper-wallet chain + kind + value + risky-approval count + fragmentation detection · cursor high-consequence when risk present
.zero-counterparty-awareness6 counterparty kinds · per-row exposure + health + watch flag · concentration calculation in header · cursor high-consequence when any on watch
[data-component="PositionPortfolio"]positions room composite · title + summary header + N PositionPnL rows.
[data-component="RiskCanopy"]risk canopy room · composes RiskEnvelope + ExposureRing + SlippageBand into one adjacent-reading surface · same exposure value feeds envelope + ring · slippage decomposed P50/P95 · state cascades to root data-state.
[data-component="VenueMatrix"]cross-venue health matrix · VenueLatency pills in fluid grid · aggregate worst-of state in header · per AGI-VIS §6 small-multiples scan.
[data-component="OrderBookPanel"]order-book panel · symbol header with bid/ask/spread + LiquidityRibbon depth + RouteMap showing next routing · three siblings in one scan.
[data-component="CustodyVault"]per-asset custody vault · counterparty badge in header + custody chain in body + signer approval stamp in footer · the three-part constitutional read of "who holds, how, by whose signature".
[data-component="PolicyConsole"]policy change console · policy + author header + N PolicyDeltas (severity-tracked) + ApprovalStamp footer · root border tints critical · awaiting-signer state when no approval.
[data-component="StrategyShelf"]strategy shelf · fluid tile grid · StrategyTile + optional EvaluatorScore stacked per strategy · operator scans "what + how does it score" in one pass.
[data-component="SkillLibrary"]skill library · SkillCard grid with PromptVersionBadge per entry · header carries active/total count.
[data-component="SimulationLab"]simulation lab room · N SimRunStrip rows · EvaluatorScore aggregates (pass rate + doctrine fit) · OutcomeRibbon shows best vs worst envelope.
[data-component="MarketplaceStand"]single marketplace listing · title + description + seller reputation in header · price tag pinned right · per-plane take rates beside ranked bid stack · buyer reads the full economics in one stand.
[data-component="ReplayBoard"]sealed-chamber replay board · two-pane layout · ReplayFrame timeline left · RouteTraceLine + EvidenceTag for the selected frame right · honors the dark-replay climate per ADR-164 §8.2.
[data-component="EvidenceWall"]evidence wall · one row per evidence item · EvidenceTag + description + (for receipts) CustodyChain · header aggregates counts by class · receipts surface adjacent to their custody trail.
[data-component="TribunalDock"]tribunal dock · case + subject + role-tagged positions (prosecution/defense/arbiter with per-role color) + ApprovalStamp ruling · in-session vs ruled states.
[data-component="ColiseumArena"]coliseum duel surface · two contender columns · each carries composite score + sample runs + outcome envelope · winner cascades to data-winner attribute · spectacle expression.
[data-component="BloodlinesBoard"]agent lineage tree · left-aligned generations with depth indents · per-entry parent ref + descendants count + winrate delta · floor-spectacle climate.
[data-component="RecapRibbon"]return-recap ribbon · time-away header + italic-serif headline + N OutcomeRibbon entries · positive/negative/neutral tally · editorial density per recap climate.
[data-component="FounderControlBoard"]founder control plane · RiskCanopy + PositionPortfolio in primary column · recap + sovereign affordance reference in side column · presentation only · sovereign action wiring lives in InterventionConsole.
[data-component="FounderJudgmentBoard"]founder judgment plane · PolicyConsole over EvidenceWall · change + evidence in adjacent surfaces · founder reads both before signing · root state cascades pending/ruled.
[data-component="FounderVerificationBoard"]founder verification plane · N axes (doctrine gates / critic / regressions) each rendered as value + fill band · root state cascades worst-of · optional regression list below.
[data-component="FounderFuturesBoard"]founder futures plane · horizon strip across the top · strategic bet rows with conviction + horizon + stake + optional thesis · one-way-door bets highlighted with amber accent + glyph.
[data-component="LobbyTheater"]lobby conversion theater · italic-serif headline + lede + EventTicker live tape + N AgentMarquee tiles + StakesBanner + JoinPrompt · packages the canonical Watch → Understand → Join sequence as one reusable retail surface.
[data-component="OperatorDayBoard"]operator day surface · vertical stack of RiskCanopy (now) + PositionPortfolio (open) + RecapRibbon (since) · reads top-to-bottom as time-from-present to time-since-arrival.
.zero-uncertainty-banner.{advisory · block}Persistent banner declaring 1-N active uncertainty classes + 1-line reason. Used at the top of consequential surfaces when uncertainty decomposition surfaces ≥1 class. Closes blind-spot 2 of zero-blind-spots-audit.
.zero-degraded-badge.{partial · degraded · offline}Subsystem status badge · declares named subsystem (exchange/oracle/volatility/internal-service/venue/data-feed/multi-signer/evaluator) is in partial · degraded · or offline mode. Cross-links to incident playbook by id. Closes blind-spot 2.
.zero-staleness-chip.{fresh · aging · stale · expired}Temporal-freshness chip · bucket = fresh|aging|stale|expired by age/threshold ratio. Reads as "BTC/USD · 23s · aging". The consuming surface enforces cooldowns; the chip is read-only display. Closes blind-spot 2.
.zero-capital-header.{14-state-enum}Treasury room zone 1 · persistent top summary band per TREASURY-DOCTRINE §6.1. Declares CapitalAccount id + state + 4-8 KPI metrics + optional health pill. Mission-control density · NEVER casino glow.
.zero-capital-map.{graph · rows}Treasury room zone 2 · live dependency graph of capital movement per TREASURY-DOCTRINE §6.2. NOT a transactions table. 4 node kinds (bucket · agent-allocation · vault · subscription) × 9 flow classes (allocation · 5 x402 · royalty · reward · rebalance). Graph layout default · rows fallback for reduced-motion.
.zero-policy-rail.{freeze-active}Treasury room zone 3 · permanent governance side rail per TREASURY-DOCTRINE §6.3. Surfaces 6 signer types × 7 states + 7 budget classes + 6 emergency interactions. data-emergency-freeze=true when any freeze active.
.zero-treasury-activity-timelineTreasury room zone 4 · ordered activity log per TREASURY-DOCTRINE §6.4. 10 canonical activity kinds × 5 outcome tones. Every row carries traceId hook for Replay expansion · honors PROVENANCE-DOCTRINE.
.zero-treasury-composer.{14-state-UIB-enum}Treasury room zone 5 · native AI command surface per TREASURY-DOCTRINE §6.5 + SHELL-INTERACTION (ADR-157). 14-state UIB · resolves to one of 15 intent families (14 base + treasury-approve added cycle 93) · R3+ verbs auto-mount ExecutionReviewSheet preview.
.zero-approval-action-strip.{idle · cooling-off}8-verb approval action strip per TREASURY-DOCTRINE §8.1. Mounts inside ExecutionReviewSheet for PaymentIntent decisions. Honors operator role authority + disclosure stage (hides approve-if for operator-light) + cooling-off timer + climate refuse rule (R3+ refused in spectacle/floor/recap climates).
.zero-mandate-builder.{draft · validated · awaiting-approval · active · paused · archived}Studio mandate builder per v95 PRODUCT_SURFACE_ARCHITECTURE §Studio P0 · template select + mandate editor + validate + paper-sim + send-to-Control (UI/protocol-state only per user guardrail · engine handoff pending Codex). Consumes Mandate typed object (cycle 101).
.zero-mandate-validator.{ok · invalid · partial}Client-side validation outcome surface for a Mandate draft · presentational · per v95 Studio P0. Cross-validated by parent against VERB-AUTHORITY-MATRIX + risk-budget resolution. 8 canonical check fields (capitalIntent · permittedVerbs · riskBudgetId · policyId · evidenceRequirements · rationale · expiry · version).
.zero-lease-inspector.{idle · leased · expiring · expired · revoked · fallback-only}Control surface inspector for a single Lease typed object per v95 PRODUCT_SURFACE_ARCHITECTURE §Control P0 · authority status + scope fields + revoke + kill + open-in-Proof. Per user guardrail: revoke + kill are UI/protocol-state only (data-pending-*); engine call pending Codex ratification.
.zero-evidence-bundle-export.{draft · generated · verified · archived}Proof surface for downloading EvidenceBundle per v95 §Proof P0. Format picker (JSON ships cycle 102 · CBOR + PDF coming-soon chips per user guardrail) + 5-level redaction profile selector + client-side data-URI download. No network call.
.zero-proof-verifier.{verified · mismatched · malformed · unverified}Proof surface verifier · operator pastes or uploads an EvidenceBundle JSON · parent runs sha256-chain check · verdict surfaces as chip (verified · mismatched · malformed · unverified). Per v95 §Proof P0 verify-proof acceptance.
.zero-publisher-identity-card.{proposed · verified · flagged · suspended · revoked}Registry surface card surfacing PublisherIdentity + TrustLabel + permission scope per v95 §Registry P0. Install-to-Studio button gated on identity.state=verified AND trustTier ≠ flagged. UI/protocol-state only; engine handoff pending Codex.