Admin UI kit — every component, every state.
Buttons
Badges & status
Severity (D4) — one source of truth
All five levels, in worst-first order. Colors and glyphs come only from SEVERITY — Error and Blocked deliberately share red, distinguished by icon alone (circle-! vs. octagon), never by a second red.
Blocked:The object has no signed-in approver and none is configured. Ask an admin to grant approval rights for this object.
Error:Publishing failed. Retry the step.
Needs you:Approve the pending release before it ships.
Info:The draft was saved automatically.
Success:The article was published.
Approval card & action row (D9/D3, T1.2)
One bordered block, at most two background colours (the card surface plus the icon chip's soft tint), no nested cards, no accordion — the Approve/Reject/Modify row is always visible. Click Reject or Modify below to see the row swap in-place to the reason textarea; the Error card's Retry deliberately fails, to show a rejected decision promise returning the row to rest and surfacing the error as a toast instead of leaving a button stuck spinning.
Publish “The Barrier Repair Guide”
Approve the pending release before it ships.
wolf@kugelbrands.comheld for 12m$0.42
Publishing the release failed
Publishing failed. Retry the step.
No signed-in approver
The article has no signed-in approver. Ask an admin to grant approval rights.
Run progress (D5 ambient tier, T1.2 — consumed by T3.1)
Cards & stats
Published
42
+3 this week
In review
7
2 awaiting you
Drafts
15
Object
The three-step routine
A card wraps any object summary. Header, body, and footer are all optional.
Forms
Shown in listings and the browser tab.
Use lowercase words separated by hyphens.
Voice dictation (T3.4)
Sits beside every chat composer's Send button. Renders nothing at all in a browser without the Web Speech API — this is a fixed idle/recording toggle for the gallery, not the live hook.
Avatars, skeletons, empty state
No drafts yet
Start a conversation with a CMS agent to create your first draft.
Navigation
Generated inspector fields go here.
Tree
Overlays & toasts
Locks & readiness
Checked out by Alex Rivera · 30m ago
You hold the edit lock · 5m ago
Content
Title
Present and within length.
Excerpt
Shorter than recommended.
Body sections
Intro, body, and conclusion detected.
SEO
Meta description
Add a meta description to publish.
Slug
Valid, unique slug.
Social image
Optional but recommended.
Data table
| Barrier Repair Guide | Product | Draft | 2026-07-15 |
| Interior page | Page template | Active | 2026-07-10 |
| The three-step routine | Article | Published | 2026-07-16 |
| Why This Blog Exists | Section | Archived | 2026-07-02 |
Click a sortable header to cycle asc → desc → unsorted.
No objects
This filter returned nothing.
Field diff
History timeline
Final Article (agent) published
2m ago
Wolf approved the changes
3h ago
Alex Rivera checked out
2d ago
Alex Rivera created
3d ago
Assistant markdown
A concise answer
Use a short list when several steps matter:
- Review the draft.
- Check the evidence.
- Approve only when it is ready.
Keep the reader's needs visible.
| State | Meaning |
|---|---|
| Draft | Still being revised |
| Published | Exported, not necessarily live |
Inline code stays quiet, while fenced code scrolls instead of wrapping:
a-very-long-value-that-demonstrates-horizontal-scrolling-without-breaking-the-chat-layout
Use the gallery theme switch above to verify this sample in light and dark.
Identity module — objectDisplayName across all ten types
| Type | Display name (shown) | Raw id (tooltip only) |
|---|---|---|
| Page | Page Not Found | page_404 |
| Section | Why This Blog Exists | sec_about_blog |
| Navigation | Footer navigation | nav_footer |
| Taxonomy | Taxonomy (category, tag) | tax_richard_creasey |
| Site | Richard Creasey | site_richard_creasey |
| Page template | Interior page | tpl_interior |
| Section template | Audience grid | stpl_audience_grid |
| Theme | Default theme | thm_richard_creasey_default |
| Product | The Barrier Repair Guide | prod_barrier |
| Article | The three-step routine that is genuinely enough | req_agent_minimal_routine_20260713_01 |