Generative UI without the stack

import { html, mount } from 'lemonadejs';

// AG-UI is an SSE stream of typed events. The client is a reducer:
// one event -> one state mutation. That is the entire integration.
const AgentView = (props, { state }) => {
    const status = state('idle');   // run lifecycle
    const log    = state('');       // streamed tokens
    const fields = state([]);       // the UI the agent builds, live

    const apply = (ev) => {
        if (ev.type === 'RUN_STARTED')              status.value = 'running';
        else if (ev.type === 'TEXT_MESSAGE_CONTENT') log.value += ev.delta;
        else if (ev.type === 'STATE_DELTA') {
            const next = fields.value.slice();
            const i = next.findIndex(f => f.key === ev.key);
            i < 0 ? next.push(ev) : (next[i] = ev);
            fields.value = next;     // assignment notifies, DOM patches delta-only
        }
        else if (ev.type === 'AWAIT_APPROVAL')      status.value = 'awaiting';
        else if (ev.type === 'RUN_FINISHED')        status.value = 'done';
    };

    // Production: const es = new EventSource('/agui');
    //             es.onmessage = (e) => apply(JSON.parse(e.data));
    return html`<div>
        <p>status: ${status}</p>
        <pre>${log}</pre>
        ${() => fields.value.map(f => html`<div><b>${f.key}</b> ${f.value}</div>`)}
        ${() => status.value === 'awaiting' &&
            html`<button onclick="${() => apply({ type: 'RUN_FINISHED' })}">Approve</button>`}
    </div>`;
};

mount(AgentView, document.getElementById('agent'));