Feature Guide

A quick orientation block that answers the essential questions: what this feature does, how it works, why it matters, and the key concepts behind it.

What this does

One browser action emits one backend event. Three listeners with different execution modes turn that same intent into three visibly different response lifecycles.

How it works

The page opens one SSE session, launches a mode-specific event, and then records proof from both sides: response timing from the launch request and stage-by-stage backend confirmations from the SSE stream.

Why it matters

This removes hand-wavy “Semitexa supports async” claims. The sync lane visibly blocks, the Swoole lane returns early and completes later, and the queued lane waits for a worker before finishing.

Key concepts

EventExecution::Sync: Runs the listener inline before the HTTP response is finished.
EventExecution::Async: Defers the listener with Swoole so the request can finish first.
EventExecution::Queued: Serializes the listener work into a transport for a queue worker to consume later.
SSE proof stream: A dedicated EventSource connection that receives backend stage confirmations in real time.

Proof-Driven Async Demo

One backend intent. Three execution lifecycles. Zero hand-waving.

Click any lane and watch Semitexa prove the difference between inline work, Swoole post-response work, and queue-backed background work. The response timings and SSE milestones come from the backend.

1 SSE proof stream

3 execution modes

∞ marketing ammo

Live Transport

Dedicated SSE proof stream

Connecting…

Opening one browser EventSource so every backend milestone lands in the same live audit trail.

EventSource text/event-stream session pending

The browser waits because the listener work stays inside the request lifecycle.

Response --

Backend dispatch --

Run id 019d94fe…

100% sync listener

Backend finished all proof steps.

Latest completed run finished at 2026-04-16T06:33:35+00:00.

The response returns first. The deferred listener continues after the request is flushed.

Response --

Backend dispatch --

Run id 019e1163…

100% swoole defer

Backend finished the staged timeline.

Latest completed run finished at 2026-05-10T10:16:10+00:00.

The request only emits a durable message. A worker finishes the side effect later.

Response --

Backend dispatch --

Run id 019e1163…

0% waiting for evidence

Ticket issued. Waiting for backend execution.

Waiting for the first live run.

Backend Audit Trail

The server narrates what actually happened

single live log

The SSE stream will append backend events here…

Queue lane requires worker bin/semitexa queue:work nats async

Verified against Semitexa Ultimate 2026.09.19.1020

Execution Arena

One browser action emits one backend event. Three listeners with different execution modes turn that same intent into three visibly different response lifecycles.

How it works

Why this matters

This removes hand-wavy "Semitexa supports async" claims. The sync lane visibly blocks, the Swoole lane returns early and completes later, and the queued lane waits for a worker before finishing.

Execution modes

EventExecution::Sync — runs the listener inline before the HTTP response is finished.
EventExecution::Async — defers the listener with Swoole so the request can finish first.
EventExecution::Queued — serializes the listener work into a transport for a queue worker to consume later.
SSE proof stream — a dedicated EventSource connection that receives backend stage confirmations in real time.

1<?php23declare(strict_types=1);45namespace App\Application\Payload\Event\Example;67final readonly class DemoExecutionShowcaseRequested8{9    public function __construct(10        public string $aggregateId,11        public string $actorId,12    ) {}13}

<?php

declare(strict_types=1);

namespace App\Application\Payload\Event\Example;

final readonly class DemoExecutionShowcaseRequested
{
    public function __construct(
        public string $aggregateId,
        public string $actorId,
    ) {}
}

1<?php23declare(strict_types=1);45namespace App\Application\Handler\DomainListener\Example;67final class DemoExecutionShowcaseSyncListener8{9    public function __invoke(object $event): void10    {11        // Trigger side effects here without bloating the request handler.12    }13}

<?php

declare(strict_types=1);

namespace App\Application\Handler\DomainListener\Example;

final class DemoExecutionShowcaseSyncListener
{
    public function __invoke(object $event): void
    {
        // Trigger side effects here without bloating the request handler.
    }
}

1<?php23declare(strict_types=1);45namespace App\Application\Handler\DomainListener\Example;67final class DemoExecutionShowcaseAsyncListener8{9    public function __invoke(object $event): void10    {11        // Trigger side effects here without bloating the request handler.12    }13}

<?php

declare(strict_types=1);

namespace App\Application\Handler\DomainListener\Example;

final class DemoExecutionShowcaseAsyncListener
{
    public function __invoke(object $event): void
    {
        // Trigger side effects here without bloating the request handler.
    }
}

1<?php23declare(strict_types=1);45namespace App\Application\Handler\DomainListener\Example;67final class DemoExecutionShowcaseQueuedListener8{9    public function __invoke(object $event): void10    {11        // Trigger side effects here without bloating the request handler.12    }13}

<?php

declare(strict_types=1);

namespace App\Application\Handler\DomainListener\Example;

final class DemoExecutionShowcaseQueuedListener
{
    public function __invoke(object $event): void
    {
        // Trigger side effects here without bloating the request handler.
    }
}

1/**2 * Execution Arena demo.3 */4(function () {5    'use strict';67    function init() {8        const root = document.getElementById('execution-arena');9        if (!root) {10            return;11        }1213        const launchEndpoint = root.getAttribute('data-launch-endpoint') || '/demo/events/arena/launch';14        const sseEndpoint = root.getAttribute('data-sse-endpoint') || '/sse';15        const streamStatus = document.getElementById('execution-arena-stream-status');16        const streamSummary = document.getElementById('execution-arena-stream-summary');17        const sessionPill = document.getElementById('execution-arena-session-pill');18        const logEl = document.getElementById('execution-arena-log');19        const lanes = {};20        let source = null;2122        root.querySelectorAll('.execution-lane').forEach(function (laneEl) {23            const mode = laneEl.getAttribute('data-mode');24            if (!mode) {25                return;26            }2728            lanes[mode] = {29                state: laneEl.querySelector('[data-role="lane-state"]'),30                responseSummary: laneEl.querySelector('[data-role="response-summary"]'),31                responseMs: laneEl.querySelector('[data-role="response-ms"]'),32                dispatchMs: laneEl.querySelector('[data-role="dispatch-ms"]'),33                runId: laneEl.querySelector('[data-role="run-id"]'),34                progressBar: laneEl.querySelector('[data-role="progress-bar"]'),35                progressLabel: laneEl.querySelector('[data-role="progress-label"]'),36                workerLabel: laneEl.querySelector('[data-role="worker-label"]'),37                message: laneEl.querySelector('[data-role="lane-message"]'),38                timeline: laneEl.querySelector('[data-role="timeline"]'),39                button: laneEl.querySelector('[data-action="launch"]'),40            };41        });4243        const sessionId = createSessionId();44        if (sessionPill) {45            sessionPill.textContent = 'session ' + shortId(sessionId);46        }4748        openStream(sessionId);4950        Object.keys(lanes).forEach(function (mode) {51            const lane = lanes[mode];52            if (!lane.button) {53                return;54            }5556            lane.button.addEventListener('click', function () {57                launch(mode, sessionId);58            });59        });6061        window.addEventListener('beforeunload', function () {62            if (source) {63                source.close();64            }65        });6667        function openStream(sessionId) {68            const streamUrl = new URL(sseEndpoint, window.location.origin);69            streamUrl.searchParams.set('session_id', sessionId);70            source = new EventSource(streamUrl.toString());7172            source.addEventListener('open', function () {73                setStreamStatus('SSE proof stream live', 'active');74                if (streamSummary) {75                    streamSummary.textContent = 'The browser is now listening to backend evidence on a dedicated SSE session.';76                }77                appendLog('stream.open', 'SSE proof stream connected for ' + shortId(sessionId));78            });7980            ['demo.execution.accepted', 'demo.execution.progress', 'demo.execution.completed', 'connected', 'ping'].forEach(function (eventName) {81                source.addEventListener(eventName, function (event) {82                    const payload = parsePayload(event.data);83                    if (eventName.indexOf('demo.execution.') === 0) {84                        applyExecutionEvent(eventName, payload);85                    } else if (eventName === 'connected') {86                        appendLog('connected', stringifyPayload(payload));87                    }88                });89            });9091            source.addEventListener('error', function () {92                setStreamStatus('Reconnecting…', 'warning');93                if (streamSummary) {94                    streamSummary.textContent = 'The SSE connection dropped. EventSource will retry automatically.';95                }96            });97        }9899        function launch(mode, sessionId) {100            const lane = lanes[mode];101            if (!lane) {102                return;103            }104105            const startedAt = performance.now();106            resetLaneTimeline(lane);107            setLaneState(lane, 'Launching…', 'warning');108            updateLaneMessage(lane, 'Sending launch request to the backend…');109            appendLaneTimeline(lane, 'Launch request sent from the browser.');110111            fetch(launchEndpoint, {112                method: 'POST',113                headers: {114                    'Accept': 'application/json',115                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',116                },117                body: new URLSearchParams({118                    mode: mode,119                    sessionId: sessionId,120                }),121            })122                .then(function (response) {123                    return response.json().then(function (payload) {124                        return { ok: response.ok, payload: unwrapResourceData(payload) };125                    });126                })127                .then(function (result) {128                    const roundtripMs = Math.round(performance.now() - startedAt);129                    if (!result.ok || !result.payload || result.payload.ok !== true) {130                        throw new Error(result.payload && result.payload.error ? result.payload.error : 'Launch failed');131                    }132133                    if (lane.responseMs) {134                        lane.responseMs.textContent = roundtripMs + ' ms';135                    }136                    if (lane.dispatchMs) {137                        lane.dispatchMs.textContent = result.payload.dispatchMs + ' ms';138                    }139                    if (lane.runId) {140                        lane.runId.textContent = shortId(result.payload.runId);141                    }142                    if (lane.workerLabel) {143                        lane.workerLabel.textContent = result.payload.executionLabel || 'accepted';144                    }145                    updateResponseSummary(lane, result.payload.responseSummary || result.payload.message || 'Launch accepted.');146                    updateLaneMessage(lane, result.payload.message || 'Launch accepted.');147                    appendLaneTimeline(lane, 'HTTP response returned in ' + roundtripMs + ' ms.');148                    appendLog(mode + '.launch', 'run ' + shortId(result.payload.runId) + ' accepted: ' + (result.payload.message || ''));149150                    if (mode === 'sync') {151                        setLaneState(lane, 'Response carried completion proof', 'success');152                    } else {153                        setLaneState(lane, 'Response returned early', 'active');154                    }155                })156                .catch(function (error) {157                    setLaneState(lane, 'Launch failed', 'error');158                    updateLaneMessage(lane, error.message || 'Launch failed.');159                    appendLaneTimeline(lane, 'Launch failed: ' + (error.message || 'Unknown error'));160                    appendLog(mode + '.error', error.message || 'Launch failed');161                });162        }163164        function applyExecutionEvent(eventName, payload) {165            if (!payload || typeof payload !== 'object') {166                return;167            }168169            const lane = lanes[payload.mode];170            if (!lane) {171                return;172            }173174            if (payload.run_id) {175                if (lane.runId) {176                    lane.runId.textContent = shortId(payload.run_id);177                }178            }179180            if (typeof payload.progress === 'number' && lane.progressBar && lane.progressLabel) {181                lane.progressBar.style.width = payload.progress + '%';182                lane.progressLabel.textContent = payload.progress + '%';183            }184185            if (payload.worker_model && lane.workerLabel) {186                lane.workerLabel.textContent = payload.worker_model;187            }188189            if (payload.message) {190                updateLaneMessage(lane, payload.message);191            }192193            if (eventName === 'demo.execution.accepted') {194                setLaneState(lane, 'Backend accepted ticket', 'active');195                appendLaneTimeline(lane, 'Backend accepted ticket for ' + shortId(payload.run_id) + '.');196            }197198            if (eventName === 'demo.execution.progress') {199                setLaneState(lane, 'Running on backend', 'active');200                appendLaneTimeline(lane, (payload.title || 'Progress update') + '.');201            }202203            if (eventName === 'demo.execution.completed') {204                setLaneState(lane, 'Completed', 'success');205                if (payload.duration_ms && lane.dispatchMs) {206                    lane.dispatchMs.textContent = payload.duration_ms + ' ms work';207                }208                appendLaneTimeline(lane, 'Completed at backend in ' + (payload.duration_ms || '?') + ' ms.');209            }210211            appendLog(eventName, '[' + (payload.mode_label || payload.mode || 'unknown') + '] ' + (payload.message || stringifyPayload(payload)));212        }213214        function resetLaneTimeline(lane) {215            if (lane.timeline) {216                lane.timeline.innerHTML = '';217            }218        }219220        function appendLaneTimeline(lane, text) {221            if (!lane.timeline) {222                return;223            }224225            const item = document.createElement('li');226            item.textContent = text;227            lane.timeline.appendChild(item);228229            while (lane.timeline.children.length > 5) {230                lane.timeline.removeChild(lane.timeline.firstChild);231            }232        }233234        function updateLaneMessage(lane, text) {235            if (lane.message) {236                lane.message.textContent = text;237            }238        }239240        function updateResponseSummary(lane, text) {241            if (lane.responseSummary) {242                lane.responseSummary.textContent = text;243            }244        }245246        function setLaneState(lane, text, variant) {247            if (!lane.state) {248                return;249            }250            lane.state.className = 'preview-pill preview-pill--' + variant;251            lane.state.textContent = text;252        }253254        function setStreamStatus(text, variant) {255            if (!streamStatus) {256                return;257            }258            streamStatus.className = 'preview-pill preview-pill--' + variant;259            streamStatus.textContent = text;260        }261262        function appendLog(name, text) {263            if (!logEl) {264                return;265            }266267            const placeholder = logEl.querySelector('.execution-arena__log-placeholder');268            if (placeholder) {269                placeholder.remove();270            }271272            const item = document.createElement('li');273            item.innerHTML =274                '<span>' + escapeHtml(name) + '</span>' +275                '<strong>' + escapeHtml(text) + '</strong>' +276                '<time>' + new Date().toLocaleTimeString() + '</time>';277            logEl.appendChild(item);278279            while (logEl.children.length > 16) {280                logEl.removeChild(logEl.firstChild);281            }282        }283284        function parsePayload(raw) {285            try {286                return JSON.parse(raw);287            } catch (_error) {288                return raw;289            }290        }291292        function unwrapResourceData(payload) {293            if (294                payload &&295                typeof payload === 'object' &&296                payload.content &&297                typeof payload.content === 'object' &&298                payload.content.data &&299                typeof payload.content.data === 'object'300            ) {301                return payload.content.data;302            }303304            return payload;305        }306307        function stringifyPayload(payload) {308            if (typeof payload === 'string') {309                return payload;310            }311312            try {313                return JSON.stringify(payload);314            } catch (_error) {315                return '[unserializable payload]';316            }317        }318319        function createSessionId() {320            if (globalThis.crypto && typeof globalThis.crypto.randomUUID === 'function') {321                return 'arena_' + globalThis.crypto.randomUUID();322            }323324            if (globalThis.crypto && typeof globalThis.crypto.getRandomValues === 'function') {325                const bytes = new Uint8Array(8);326                globalThis.crypto.getRandomValues(bytes);327328                return 'arena_' + Array.from(bytes, function (value) {329                    return value.toString(16).padStart(2, '0');330                }).join('') + '_' + Date.now().toString(36);331            }332333            return 'arena_' + Math.random().toString(36).slice(2, 10) + '_' + Date.now().toString(36);334        }335336        function shortId(value) {337            if (!value) {338                return '—';339            }340            return String(value).slice(0, 8) + '…';341        }342343        function escapeHtml(value) {344            return String(value)345                .replace(/&/g, '&amp;')346                .replace(/</g, '&lt;')347                .replace(/>/g, '&gt;')348                .replace(/"/g, '&quot;')349                .replace(/'/g, '&#39;');350        }351    }352353    if (document.readyState === 'loading') {354        document.addEventListener('DOMContentLoaded', init);355    } else {356        init();357    }358})();359

/**
 * Execution Arena demo.
 */
(function () {
    'use strict';

    function init() {
        const root = document.getElementById('execution-arena');
        if (!root) {
            return;
        }

        const launchEndpoint = root.getAttribute('data-launch-endpoint') || '/demo/events/arena/launch';
        const sseEndpoint = root.getAttribute('data-sse-endpoint') || '/sse';
        const streamStatus = document.getElementById('execution-arena-stream-status');
        const streamSummary = document.getElementById('execution-arena-stream-summary');
        const sessionPill = document.getElementById('execution-arena-session-pill');
        const logEl = document.getElementById('execution-arena-log');
        const lanes = {};
        let source = null;

        root.querySelectorAll('.execution-lane').forEach(function (laneEl) {
            const mode = laneEl.getAttribute('data-mode');
            if (!mode) {
                return;
            }

            lanes[mode] = {
                state: laneEl.querySelector('[data-role="lane-state"]'),
                responseSummary: laneEl.querySelector('[data-role="response-summary"]'),
                responseMs: laneEl.querySelector('[data-role="response-ms"]'),
                dispatchMs: laneEl.querySelector('[data-role="dispatch-ms"]'),
                runId: laneEl.querySelector('[data-role="run-id"]'),
                progressBar: laneEl.querySelector('[data-role="progress-bar"]'),
                progressLabel: laneEl.querySelector('[data-role="progress-label"]'),
                workerLabel: laneEl.querySelector('[data-role="worker-label"]'),
                message: laneEl.querySelector('[data-role="lane-message"]'),
                timeline: laneEl.querySelector('[data-role="timeline"]'),
                button: laneEl.querySelector('[data-action="launch"]'),
            };
        });

        const sessionId = createSessionId();
        if (sessionPill) {
            sessionPill.textContent = 'session ' + shortId(sessionId);
        }

        openStream(sessionId);

        Object.keys(lanes).forEach(function (mode) {
            const lane = lanes[mode];
            if (!lane.button) {
                return;
            }

            lane.button.addEventListener('click', function () {
                launch(mode, sessionId);
            });
        });

        window.addEventListener('beforeunload', function () {
            if (source) {
                source.close();
            }
        });

        function openStream(sessionId) {
            const streamUrl = new URL(sseEndpoint, window.location.origin);
            streamUrl.searchParams.set('session_id', sessionId);
            source = new EventSource(streamUrl.toString());

            source.addEventListener('open', function () {
                setStreamStatus('SSE proof stream live', 'active');
                if (streamSummary) {
                    streamSummary.textContent = 'The browser is now listening to backend evidence on a dedicated SSE session.';
                }
                appendLog('stream.open', 'SSE proof stream connected for ' + shortId(sessionId));
            });

            ['demo.execution.accepted', 'demo.execution.progress', 'demo.execution.completed', 'connected', 'ping'].forEach(function (eventName) {
                source.addEventListener(eventName, function (event) {
                    const payload = parsePayload(event.data);
                    if (eventName.indexOf('demo.execution.') === 0) {
                        applyExecutionEvent(eventName, payload);
                    } else if (eventName === 'connected') {
                        appendLog('connected', stringifyPayload(payload));
                    }
                });
            });

            source.addEventListener('error', function () {
                setStreamStatus('Reconnecting…', 'warning');
                if (streamSummary) {
                    streamSummary.textContent = 'The SSE connection dropped. EventSource will retry automatically.';
                }
            });
        }

        function launch(mode, sessionId) {
            const lane = lanes[mode];
            if (!lane) {
                return;
            }

            const startedAt = performance.now();
            resetLaneTimeline(lane);
            setLaneState(lane, 'Launching…', 'warning');
            updateLaneMessage(lane, 'Sending launch request to the backend…');
            appendLaneTimeline(lane, 'Launch request sent from the browser.');

            fetch(launchEndpoint, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                },
                body: new URLSearchParams({
                    mode: mode,
                    sessionId: sessionId,
                }),
            })
                .then(function (response) {
                    return response.json().then(function (payload) {
                        return { ok: response.ok, payload: unwrapResourceData(payload) };
                    });
                })
                .then(function (result) {
                    const roundtripMs = Math.round(performance.now() - startedAt);
                    if (!result.ok || !result.payload || result.payload.ok !== true) {
                        throw new Error(result.payload && result.payload.error ? result.payload.error : 'Launch failed');
                    }

                    if (lane.responseMs) {
                        lane.responseMs.textContent = roundtripMs + ' ms';
                    }
                    if (lane.dispatchMs) {
                        lane.dispatchMs.textContent = result.payload.dispatchMs + ' ms';
                    }
                    if (lane.runId) {
                        lane.runId.textContent = shortId(result.payload.runId);
                    }
                    if (lane.workerLabel) {
                        lane.workerLabel.textContent = result.payload.executionLabel || 'accepted';
                    }
                    updateResponseSummary(lane, result.payload.responseSummary || result.payload.message || 'Launch accepted.');
                    updateLaneMessage(lane, result.payload.message || 'Launch accepted.');
                    appendLaneTimeline(lane, 'HTTP response returned in ' + roundtripMs + ' ms.');
                    appendLog(mode + '.launch', 'run ' + shortId(result.payload.runId) + ' accepted: ' + (result.payload.message || ''));

                    if (mode === 'sync') {
                        setLaneState(lane, 'Response carried completion proof', 'success');
                    } else {
                        setLaneState(lane, 'Response returned early', 'active');
                    }
                })
                .catch(function (error) {
                    setLaneState(lane, 'Launch failed', 'error');
                    updateLaneMessage(lane, error.message || 'Launch failed.');
                    appendLaneTimeline(lane, 'Launch failed: ' + (error.message || 'Unknown error'));
                    appendLog(mode + '.error', error.message || 'Launch failed');
                });
        }

        function applyExecutionEvent(eventName, payload) {
            if (!payload || typeof payload !== 'object') {
                return;
            }

            const lane = lanes[payload.mode];
            if (!lane) {
                return;
            }

            if (payload.run_id) {
                if (lane.runId) {
                    lane.runId.textContent = shortId(payload.run_id);
                }
            }

            if (typeof payload.progress === 'number' && lane.progressBar && lane.progressLabel) {
                lane.progressBar.style.width = payload.progress + '%';
                lane.progressLabel.textContent = payload.progress + '%';
            }

            if (payload.worker_model && lane.workerLabel) {
                lane.workerLabel.textContent = payload.worker_model;
            }

            if (payload.message) {
                updateLaneMessage(lane, payload.message);
            }

            if (eventName === 'demo.execution.accepted') {
                setLaneState(lane, 'Backend accepted ticket', 'active');
                appendLaneTimeline(lane, 'Backend accepted ticket for ' + shortId(payload.run_id) + '.');
            }

            if (eventName === 'demo.execution.progress') {
                setLaneState(lane, 'Running on backend', 'active');
                appendLaneTimeline(lane, (payload.title || 'Progress update') + '.');
            }

            if (eventName === 'demo.execution.completed') {
                setLaneState(lane, 'Completed', 'success');
                if (payload.duration_ms && lane.dispatchMs) {
                    lane.dispatchMs.textContent = payload.duration_ms + ' ms work';
                }
                appendLaneTimeline(lane, 'Completed at backend in ' + (payload.duration_ms || '?') + ' ms.');
            }

            appendLog(eventName, '[' + (payload.mode_label || payload.mode || 'unknown') + '] ' + (payload.message || stringifyPayload(payload)));
        }

        function resetLaneTimeline(lane) {
            if (lane.timeline) {
                lane.timeline.innerHTML = '';
            }
        }

        function appendLaneTimeline(lane, text) {
            if (!lane.timeline) {
                return;
            }

            const item = document.createElement('li');
            item.textContent = text;
            lane.timeline.appendChild(item);

            while (lane.timeline.children.length > 5) {
                lane.timeline.removeChild(lane.timeline.firstChild);
            }
        }

        function updateLaneMessage(lane, text) {
            if (lane.message) {
                lane.message.textContent = text;
            }
        }

        function updateResponseSummary(lane, text) {
            if (lane.responseSummary) {
                lane.responseSummary.textContent = text;
            }
        }

        function setLaneState(lane, text, variant) {
            if (!lane.state) {
                return;
            }
            lane.state.className = 'preview-pill preview-pill--' + variant;
            lane.state.textContent = text;
        }

        function setStreamStatus(text, variant) {
            if (!streamStatus) {
                return;
            }
            streamStatus.className = 'preview-pill preview-pill--' + variant;
            streamStatus.textContent = text;
        }

        function appendLog(name, text) {
            if (!logEl) {
                return;
            }

            const placeholder = logEl.querySelector('.execution-arena__log-placeholder');
            if (placeholder) {
                placeholder.remove();
            }

            const item = document.createElement('li');
            item.innerHTML =
                '<span>' + escapeHtml(name) + '</span>' +
                '<strong>' + escapeHtml(text) + '</strong>' +
                '<time>' + new Date().toLocaleTimeString() + '</time>';
            logEl.appendChild(item);

            while (logEl.children.length > 16) {
                logEl.removeChild(logEl.firstChild);
            }
        }

        function parsePayload(raw) {
            try {
                return JSON.parse(raw);
            } catch (_error) {
                return raw;
            }
        }

        function unwrapResourceData(payload) {
            if (
                payload &&
                typeof payload === 'object' &&
                payload.content &&
                typeof payload.content === 'object' &&
                payload.content.data &&
                typeof payload.content.data === 'object'
            ) {
                return payload.content.data;
            }

            return payload;
        }

        function stringifyPayload(payload) {
            if (typeof payload === 'string') {
                return payload;
            }

            try {
                return JSON.stringify(payload);
            } catch (_error) {
                return '[unserializable payload]';
            }
        }

        function createSessionId() {
            if (globalThis.crypto && typeof globalThis.crypto.randomUUID === 'function') {
                return 'arena_' + globalThis.crypto.randomUUID();
            }

            if (globalThis.crypto && typeof globalThis.crypto.getRandomValues === 'function') {
                const bytes = new Uint8Array(8);
                globalThis.crypto.getRandomValues(bytes);

                return 'arena_' + Array.from(bytes, function (value) {
                    return value.toString(16).padStart(2, '0');
                }).join('') + '_' + Date.now().toString(36);
            }

            return 'arena_' + Math.random().toString(36).slice(2, 10) + '_' + Date.now().toString(36);
        }

        function shortId(value) {
            if (!value) {
                return '—';
            }
            return String(value).slice(0, 8) + '…';
        }

        function escapeHtml(value) {
            return String(value)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

Related features

How it works

Why it matters

This removes hand-wavy “Semitexa supports async” claims. The sync lane visibly blocks, the Swoole lane returns early and completes later, and the queued lane waits for a worker before finishing.

Key concepts

EventExecution::Sync: Runs the listener inline before the HTTP response is finished.
EventExecution::Async: Defers the listener with Swoole so the request can finish first.
EventExecution::Queued: Serializes the listener work into a transport for a queue worker to consume later.
SSE proof stream: A dedicated EventSource connection that receives backend stage confirmations in real time.

Find a concept, task, or command

Execution Arena

What this does

How it works

Why it matters

Key concepts

One backend intent. Three execution lifecycles. Zero hand-waving.

Dedicated SSE proof stream

Sync

Swoole Async

Queued Job

The server narrates what actually happened

Execution Arena

How it works

Why this matters

Execution modes

Related features

How it works

Why it matters

Key concepts