← UI Rendering & SSR

UI RENDERING & SSR FEATURE

Reactive AI Task

Submit a task and watch the AI pipeline stages reveal one by one as the cron job processes it.

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

Submit a task and watch the AI pipeline stages reveal one by one as the cron job processes it.

Reactive Pipeline

Stage-by-stage processing

Submit a task and watch each processing stage reveal itself as background work completes.

Idle
Parse
→
Analyze
→
Generate
→
Format
DemoAiTask stage-by-stage refreshInterval: 2 user-triggered → cron pickup

Verified against Semitexa Ultimate 2026.09.19.1020

Reactive AI Task

Submit a task and watch the AI pipeline stages reveal one by one as the cron job processes it. The page stays SSR-first while background AI stages keep advancing on the server, so the sidebar and the live pipeline share one consistent page shell.

How it works

The user submits text through a form. The handler creates a DemoAiTask record with status pending. A cron job picks up pending tasks and processes them stage by stage, writing stage results into the task record as JSON. A reactive slot with refreshInterval: 2 holds its SSE connection open while the server re-renders the pipeline view every two seconds and pushes it, reading the latest stage results from the task record and showing each completed stage.

The flow

  1. User submits the form — a task record is created with status: pending.
  2. The cron worker picks up the task and starts advancing through stages.
  3. Each stage completion is written to stage_results as JSON.
  4. The reactive slot refreshes every two seconds, reading the updated stage data and rendering the current pipeline state as HTML.
  5. When all stages are complete, the slot shows the finished result.

Key mechanisms

  • DemoAiTask — the task record that carries status, stages, and stage results.
  • stage-by-stage — the cron processor advances one stage at a time and writes intermediate results.
  • refreshInterval: 2 — the server re-renders and pushes every two seconds; the browser never polls.
  • user-triggered → cron pickup — the form submission creates a task; the cron picks it up without a direct async handoff.

Why this matters

AI pipeline progress is a case where client-side state simulation is especially misleading — AI stage durations are unpredictable, so any client-side estimation is just fabricated progress. Letting the server own the stage results and reflecting them through a live slot gives the user accurate information throughout the processing run.

© Brian Kernighan: "Controlling complexity is the essence of computer programming."

ReactiveAiTaskSlot Secondary page region
<?phpdeclare(strict_types=1);use Examples\Rendering\Philosophy\Support\JobService;use Semitexa\Core\Attribute\InjectAsReadonly;use Semitexa\Ssr\Attribute\AsSlotHandler;use Semitexa\Ssr\Attribute\AsSlotResource;use Semitexa\Ssr\Application\Service\Http\Response\HtmlSlotResponse;#[AsSlotResource(    handle: 'imports_dashboard',    slot: 'job_status',    deferred: true,    refreshInterval: 3,)]final class ImportJobStatusSlot extends HtmlSlotResponse{    public function withStatus(string $status): self    {        return $this->with('status', $status);    }    public function withProgress(int $progress): self    {        return $this->with('progress', $progress);    }}#[AsSlotHandler(slot: ImportJobStatusSlot::class)]final class ImportJobStatusSlotHandler{    #[InjectAsReadonly]    protected JobService $jobs;    public function handle(ImportJobStatusSlot $slot): ImportJobStatusSlot    {        $run = $this->jobs->latestImportRun();        return $slot            ->withStatus($run->status())            ->withProgress($run->progressPercent());    }}// The slot keeps re-rendering server truth. No second client-side state machine is required.

Support Semitexa
Built for developers who prefer control over magic. Your support helps keep it fast, open, and evolving.

Donate via PayPal