Persona Picker | Zyeon UI

Preview in your theme

variant='cards' — a radiogroup: Tab lands on the chosen card, arrows move and select in one step, Home/End jump to the ends. The panel underneath quotes the system-prompt fragment the selected persona will add, so a friendly face can't smuggle in instructions. Create appends a real persona and selects it.

What Everyday Assistant adds to your system prompt

You are a helpful, concise assistant. Prefer plain language over jargon, keep answers under three paragraphs unless asked, and say what you are unsure about instead of guessing.

no callback fired yet

variant='compact' — the same personas as a combobox + listbox in a composer toolbar: ↓/↑ move the active option (a listbox clamps at both ends), Enter commits, Escape closes and keeps the committed one, the panel flips above the trigger when there is no room below. 14 personas, so the list scrolls; the + button is a sibling of the trigger, not a row inside the listbox.

Draft a reply to the incident report…

Send

no callback fired yet

Edge personas. A 45-character name and a tagline that runs to several lines wrap inside the card instead of widening the grid (wrap-anywhere + min-w-0); seven tags fold into '+4' while all seven stay in the card's accessible name. The Contract Reviewer is listed with the reason it can't be picked — arrow keys still land on it so the reason is read out, clicking it commits nothing.

What Socratic Tutor adds to your system prompt

Never hand over the final answer on the first turn. Ask one guiding question at a time, confirm the learner's reasoning before moving on, and only give the answer outright if they ask for it twice.

A committed id that is no longer in the list (someone deleted the persona). The picker never silently reassigns your value — it says which id is missing and waits for a real choice; picking any card replaces it.

The selected persona persona-deleted-2f9cisn't in this list. Pick another one to replace it.

status='ready' — six personas in a single column, nothing clipped.

status='empty' — the create action is the whole point of the panel.

No personas yet

A persona bundles a voice, a job and the ground rules the assistant answers under.

status='loading' — three placeholder cards shaped like the real ones, plus an sr-only status line.

status='error' — the LIST failed to load, which is a different failure from a persona your plan can't use.

Couldn't load your personas

The persona service didn't answer in time. request-id: 9c41-b7e2

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro