---
import '../styles/live-ui-gallery.css';
import { LIVE_COMMANDS } from '../../skill/scripts/live/vocabulary.mjs';
const STATE_GROUPS = [
{
label: 'Global chrome',
states: [
['global-ready', 'Ready'],
['global-disconnected', 'Agent disconnected'],
['global-tools', 'Detect + DESIGN.md'],
['steer-expanded', 'Steer composing'],
['steer-processing', 'Steer processing'],
],
},
{
label: 'Selection',
states: [
['configure-replace', 'Configure selection'],
['action-picker', 'Action picker'],
['configure-listening', 'Voice input'],
['configure-locked', 'Apply locked'],
['annotation', 'Annotations'],
['insert-placeholder', 'Insert placeholder'],
],
},
{
label: 'Generation + review',
states: [
['generating', 'Generating'],
['generation-recovery', 'Recovery'],
['cycling-progressive', 'Variant 1 arrived'],
['cycling-second', 'Variant 2 arrived'],
['tune-open', 'Tune panel'],
['applying', 'Applying variant'],
['confirmed', 'Variant applied'],
],
},
{
label: 'Copy + support',
states: [
['edit-copy', 'Edit copy'],
['copy-pending', 'Copy edits pending'],
['copy-applying', 'Copy edits applying'],
['copy-attention', 'Apply needs attention'],
['design-panel', 'DESIGN.md panel'],
['toast-error', 'Error toast'],
],
},
];
const statePayload = STATE_GROUPS.flatMap((group) =>
group.states.map(([key, label]) => ({ key, label, group: group.label })),
);
const commandPayload = JSON.stringify(LIVE_COMMANDS).replace(/