Previews the actions element family at miniature scale: each language / runtime action renders as an <ElementHexagon> at its identity colour, the same shape every atom-form element uses on the canvas.
Readiness
complete
Preview
live
Props
1
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference as the actions-family overview
When not to use
For a single action's deep contract — use that element's own page
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Each tile's element type + state surfaces through the consuming surface's accessible name; state dots are decorative.
Notes: Element type carried by accessible name, never colour alone.
Props
Name
Type
Default
Description
family
string
—
Element family — 'actions'.
Examples
Action canvas tiles
The seven action element types as canvas hex tiles.
Previews the agents element family at miniature scale. On the canvas each agent is an <ElementHexagon> at its identity colour. claude-code, open-code, and codex additionally open a real PTY terminal session — the "terminal miniature" is that session card (mirrored from the live .terminal-tile). "Terminal miniatures" refers to these agent tiles; there is no element type named "terminal".
Readiness
complete
Preview
live
Props
1
Examples
2
Code
implementation mapped
When to use
In the element miniatures reference as the agents-family overview
When explaining what a CLI-agent terminal session card looks like
When not to use
For a single agent's deep contract — use that element's own page
When you need the live terminal — that is the terminal panel, not the miniature
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Each hex tile's element type + state is surfaced through the consuming surface's accessible name. The terminal cards are decorative specimens; their text content (status, command) is readable inline.
Notes: Terminal cards convey per-agent identity through both the accent colour AND the agent label text, never colour alone.
Props
Name
Type
Default
Description
family
string
—
Element family — 'agents'.
Examples
Agent canvas tiles
The five agent element types as canvas hex tiles at their identity colours.
Terminal session cards — the "terminal miniature" for the three PTY-capable CLI agents, each with its own accent. This is what an open agent session looks like in the terminal overview grid.
Previews the apps element family at miniature scale. `app` is a manifest form and `automation` is a compound form — both carry a connection handle on the canvas, which the hex tile shows via show_connection_handle. The automation sub-steps (condition/loop/wait) are atom-form tiles.
Readiness
complete
Preview
live
Props
1
Examples
2
Code
implementation mapped
When to use
In the element miniatures reference as the apps-family overview
When not to use
For the app/automation deep contract or composition — use those pages
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Element type + form + state surface through the accessible name; the connection-handle indicator is decorative.
Notes: Form (manifest/compound/atom) is structural, surfaced in the name.
Props
Name
Type
Default
Description
family
string
—
Element family — 'apps'.
Examples
App + automation tiles
app (manifest) and automation (compound) — both with connection handles.
Renders a `board` element's preview at miniature scale. On the canvas the board is an `<ElementHexagon>` carrying the board's display icon (view_kanban) and identity colour. The four board subtypes — board, planning-board, recruitment-board, sales-board — share the hex shape and differ by icon + colour, which is exactly how the periodic-table catalogue distinguishes them. The per-subtype colours shown here are each subtype's own identity; on the live canvas all four also inherit the boards-category accent via `ctx_to_display()`.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference alongside the other board subtypes
In any catalogue / palette that previews a board element by its canonical tile
When not to use
For planning-board, recruitment-board, or sales-board — each owns its own miniature YAML
When you need the board's columns/cards — that is the board panel, not the miniature
Accessibility
Role: img
No keyboard shortcuts
Screen reader: The element type and state are surfaced through the tile's accessible name in the consuming surface; the state dot is decorative (aria-hidden). State is conveyed by the data-state attribute plus the accessible name, never by colour alone.
Notes: The hex icon + colour are the only differentiators between board subtypes at miniature scale; the accessible name carries the specific subtype so colour is never the sole signal.
Props
Name
Type
Default
Description
kind*
string
—
Element type — 'board'.
state*
enum: none | active | error
none
Lifecycle signal rendered as the hex state dot.
Examples
Board tile — state vocabulary
State vocabulary — the board tile at the three lifecycle signals (provisioned / active / error). Icon and colour are constant; only the state dot changes.
Renders a `chromeless` element's preview at miniature scale inside any grid / overview / selection surface. The tile keeps its data-prep (the tab-model assembly and preview-source resolution) but its markup is now a `<BrowserChrome mode=Miniature>` over a `<BrowserViewport mode=Miniature>` — the same primitives the opened browser panel will compose at Full scale. That shape parity is exactly what lets the View Transitions API morph the miniature into the full panel (and back) when the user opens or closes a browser, preserving spatial context.
Readiness
complete
Preview
live
Props
6
Examples
5
Code
implementation mapped
When to use
In the Browser overview's tile grid (the canonical caller)
In the Library / catalogue's preview pane when a chromeless element is selected
Anywhere a 'pick which browser' palette wants live-shape previews
When not to use
When the user needs to interact with the browser — use the chromeless panel
When you need to show element metadata (intention, last activity, owner) — use the element card representation instead
For non-chromeless element types — each element type owns its own miniature shape
Accessibility
Role: button
Enter — Opens the browser (triggers the View Transition zoom)
Space — Same as Enter
Tab — Moves focus through the tile grid; the tile is a single tab stop
Screen reader: The outer button surfaces `aria-label=\"Open {ElementName}\"` and a `title=` with the same. The composed `<BrowserChrome>` tab strip is `role=tablist` and each tab `role=tab` + `aria-selected`, so SR users can inspect the tab structure even at miniature scale. The address row and viewport are decorative because the same information surfaces through the button's accessible name + tab titles. The ghost tab (synthesised when the browser has zero real tabs) inherits the element display name as its title.
Notes: When the visible tab cap (5) is exceeded, the surplus is surfaced ONLY through the tile's augmented aria-label — e.g. "Open My Browser (8 tabs, 3 not shown)". There is no visible +N overflow chip: Phase B removed the bespoke chip; the shared `<BrowserChrome>` simply renders the capped tab list and overflow is an accessible-name concern.
Props
Name
Type
Default
Description
element_id*
string
—
Element UUID — drives the per-tile view-transition-name (browser-tile-{id}).
element_name*
string
—
Display name. Used as the ghost-tab title when there are zero tabs.
tabs*
array
—
Ordered tab list (active first, then bg). Capped at 5 visible; remainder via aria-label only.
address*
string
—
Active tab URL. Empty renders the empty address bar so the silhouette is preserved for the morph.
viewport_state*
enum: live | cached | standby
—
Which BrowserViewport source resolved. `live`/`cached` → cached_frame still; otherwise standby.
active_loading
boolean
false
Active tab is navigating — paints the BrowserViewport top-edge loading sweep.
Examples
Canvas tile — idle
Canvas hex tile — the chromeless element as it appears on the workspace canvas: an ElementHexagon with the deployed_code icon at the Tools-violet identity. This is the real Mid-zoom canvas representation (Modifier form).
Opened-tile silhouette — BrowserChrome stacked over BrowserViewport at Miniature scale. This is the shape the View Transition morphs from the canvas tile into the full panel. Standby (no frame yet) → loading viewport.
Previews the data element family at miniature scale. Data elements are passive storage (data form); each renders as an <ElementHexagon> at its identity colour. A representative subset of the data category is shown.
Readiness
complete
Preview
live
Props
1
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference as the data-family overview
When not to use
As an exhaustive data list — representative subset
For a single data element's deep contract — use that element's own page
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Each tile's element type + state surfaces through the accessible name.
Notes: Element type carried by accessible name, never colour alone.
Props
Name
Type
Default
Description
family
string
—
Element family — 'data'.
Examples
Data canvas tiles
Six representative data element types as canvas hex tiles.
YAML
type: stack
props:
direction: row
gap: lg
children:
- type: element-hexagon
props:
kind: sql
symbol: Sq
name: SQL
category: data
icon_name: storage
icon_color: '#3B82F6'
form: data
state: none
show_connection_handle: false
- type: element-hexagon
props:
kind: vector
symbol: Ve
name: Vector
category: data
icon_name: hub
icon_color: '#10B981'
form: data
state: none
show_connection_handle: false
- type: element-hexagon
props:
kind: graph
symbol: Gr
name: Graph
category: data
icon_name: share
icon_color: '#8B5CF6'
form: data
state: none
show_connection_handle: false
- type: element-hexagon
props:
kind: timeseries
symbol: Ts
name: Timeseries
category: data
icon_name: timeline
icon_color: '#EF4444'
form: data
state: none
show_connection_handle: false
- type: element-hexagon
props:
kind: document
symbol: Do
name: Document
category: data
icon_name: description
icon_color: '#F59E0B'
form: data
state: none
show_connection_handle: false
- type: element-hexagon
props:
kind: contacts
symbol: Cn
name: Contacts
category: data
icon_name: person
icon_color: '#9333EA'
form: data
state: none
show_connection_handle: false
Previews the intelligence element family at miniature scale. `lab` is a compound form (carries a connection handle); brain, ears, and mouth are the atom-form sub-elements that compose inside it.
Readiness
complete
Preview
live
Props
1
Examples
2
Code
implementation mapped
When to use
In the element miniatures reference as the intelligence-family overview
When not to use
For the lab's composition or a brain/ears/mouth deep contract — use those pages
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Element type + form + state surface through the accessible name.
Notes: Compound vs atom form is surfaced in the accessible name.
Previews the io element family at miniature scale. The io category has 19 element types; this is a representative subset (one connector/channel per common integration shape). Each renders as an <ElementHexagon>.
Readiness
complete
Preview
live
Props
1
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference as the io-family overview
When not to use
As an exhaustive io list — this is a representative subset, not all 19 types
For a single io element's deep contract — use that element's own page
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Each tile's element type + state surfaces through the accessible name.
Notes: Subset is representative; the accessible name names each type.
Props
Name
Type
Default
Description
family
string
—
Element family — 'io'.
Examples
Io canvas tiles (subset)
Six representative io element types as canvas hex tiles.
Previews the modifiers element family at miniature scale. Modifiers are a distinct form (they attach to a container to modify its behaviour rather than executing standalone); each renders as a modifier-form <ElementHexagon>. A representative subset is shown.
Readiness
complete
Preview
live
Props
1
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference as the modifiers-family overview
When not to use
As an exhaustive modifiers list — representative subset
For a single modifier's deep contract — use that element's own page
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Each tile's element type + state surfaces through the accessible name; the modifier form is part of the name.
Notes: Modifier form is structural, surfaced in the accessible name.
Props
Name
Type
Default
Description
family
string
—
Element family — 'modifiers'.
Examples
Modifier canvas tiles
Five representative modifier element types as canvas hex tiles (modifier form).
Renders a `planning-board` element at miniature scale as an `<ElementHexagon>`. It shares the `view_kanban` icon with the generic board, so its amber identity colour is the primary visual discriminator. If the platform later assigns planning-board a distinct glyph, update `icon_name` here to match `ELEMENT_DISPLAY_MAP` — do not invent an icon that does not yet ship.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference alongside the other board subtypes
In any catalogue / palette that previews a planning-board by its canonical tile
When not to use
For board, recruitment-board, or sales-board — each owns its own miniature YAML
When you need the planning-board's columns/cards — that is the panel, not the miniature
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Because planning-board shares the view_kanban glyph with the generic board, the accessible name MUST carry the specific subtype — colour is not an accessible discriminator. State is conveyed by data-state plus the accessible name.
Notes: Shared-glyph case: the accessible name is load-bearing here, since amber-vs-grey is the only visual difference from the generic board.
Props
Name
Type
Default
Description
kind*
string
—
Element type — 'planning-board'.
state*
enum: none | active | error
none
Lifecycle signal rendered as the hex state dot.
Examples
Planning board tile — state vocabulary
State vocabulary — the planning-board tile at provisioned / active / error. Amber view_kanban; only the state dot changes.
Renders a `recruitment-board` element at miniature scale as an `<ElementHexagon>`. It carries its own `people` glyph (distinct from the board/planning-board view_kanban), so the icon is the primary visual discriminator, reinforced by the violet identity colour.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference alongside the other board subtypes
In any catalogue / palette that previews a recruitment-board by its canonical tile
When not to use
For board, planning-board, or sales-board — each owns its own miniature YAML
When you need the recruitment-board's columns/cards — that is the panel, not the miniature
Accessibility
Role: img
No keyboard shortcuts
Screen reader: The distinct people glyph plus the accessible name identify the subtype; state is conveyed by data-state plus the accessible name, never colour alone.
Notes: Distinct-glyph case: icon + accessible name both carry the subtype, so this tile is unambiguous even in monochrome.
Props
Name
Type
Default
Description
kind*
string
—
Element type — 'recruitment-board'.
state*
enum: none | active | error
none
Lifecycle signal rendered as the hex state dot.
Examples
Recruitment board tile — state vocabulary
State vocabulary — the recruitment-board tile at provisioned / active / error. Violet people glyph; only the state dot changes.
YAML
type: stack
props:
direction: row
gap: lg
children:
- type: element-hexagon
props:
kind: recruitment-board
symbol: Rb
name: Recruitment Board
category: boards
icon_name: people
icon_color: '#8B5CF6'
form: atom
state: none
show_connection_handle: false
- type: element-hexagon
props:
kind: recruitment-board
symbol: Rb
name: Recruitment Board
category: boards
icon_name: people
icon_color: '#8B5CF6'
form: atom
state: active
show_connection_handle: false
- type: element-hexagon
props:
kind: recruitment-board
symbol: Rb
name: Recruitment Board
category: boards
icon_name: people
icon_color: '#8B5CF6'
form: atom
state: error
show_connection_handle: false
Renders a `sales-board` element at miniature scale as an `<ElementHexagon>`. It carries its own `trending_up` glyph (distinct from the board/planning-board view_kanban), so the icon is the primary visual discriminator, reinforced by the green identity colour.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference alongside the other board subtypes
In any catalogue / palette that previews a sales-board by its canonical tile
When not to use
For board, planning-board, or recruitment-board — each owns its own miniature YAML
When you need the sales-board's columns/cards — that is the panel, not the miniature
Accessibility
Role: img
No keyboard shortcuts
Screen reader: The distinct trending_up glyph plus the accessible name identify the subtype; state is conveyed by data-state plus the accessible name, never colour alone.
Notes: Distinct-glyph case: icon + accessible name both carry the subtype, so this tile is unambiguous even in monochrome.
Props
Name
Type
Default
Description
kind*
string
—
Element type — 'sales-board'.
state*
enum: none | active | error
none
Lifecycle signal rendered as the hex state dot.
Examples
Sales board tile — state vocabulary
State vocabulary — the sales-board tile at provisioned / active / error. Green trending_up glyph; only the state dot changes.
Previews the tools element family at miniature scale as canvas <ElementHexagon> tiles. On the canvas the chromeless tile would overlay a JPEG screencast thumbnail when a live session exists, but that requires BrowserManager context unavailable in the stateless showcase — so the hex icon (deployed_code) is the correct static representation here. This is a family-overview row; chromeless additionally has its own deep miniature page (chromeless/miniature.yaml) documenting both of its surfaces.
Readiness
complete
Preview
live
Props
1
Examples
1
Code
implementation mapped
When to use
In the element miniatures reference as the tools-family overview
When not to use
For chromeless's deep contract / both surfaces — use chromeless/miniature
For a single tool's deep contract — use that element's own page
Accessibility
Role: img
No keyboard shortcuts
Screen reader: Each tile's element type + state surfaces through the accessible name.
Notes: Element type carried by accessible name, never colour alone.
