Request flow · rechenkiste

Rechenkiste is a server-rendered Astro app (output: "server") on Cloudflare Workers. htmx and Alpine.js are bundled from npm and started in BaseLayout.astro; nothing loads from a CDN.

Layer	Job in Rechenkiste
Astro	Renders the pages, the API routes and – through the fragment renderer – every task, feedback and result fragment
htmx	Posts answers and swaps the returned HTML into the page
Alpine.js	Local UI state only: the grade and count tiles on the start page, the number pad, the character filter of the answer field
Tailwind CSS 4	Styling, via the Vite plugin

One practice run

Focus

Show all Browser Astro routes Session fragment-renderer

One practice run, request by request

Source: src/pages/api/test/start.ts, src/pages/test.astro, src/pages/api/test/answer.ts, src/pages/api/test/task.ts, src/services/task-renderer.ts

Show chart data

Data for One practice run, request by request
No.	From	To	Message	Kind	Fragment
1	Browser	Astro routes	POST /api/test/start	call
2	Astro routes	Session	store all tasks	call
3	Astro routes	Browser	redirect /test	reply
4	Browser	Astro routes	GET /test	call
5	Astro routes	fragment-renderer	first task	call
6	Astro routes	Browser	page	reply
7	Browser	Astro routes	hx-post /api/test/answer	call	loop [every task]
8	Astro routes	Session	load, check task	call	loop [every task]
9	Astro routes	Astro routes	validate, advance	call	loop [every task]
10	Astro routes	Session	save	call	loop [every task]
11	Astro routes	fragment-renderer	feedback	call	loop [every task]
12	Astro routes	Browser	fragment, HX-Trigger	reply	loop [every task]
13	Browser	Astro routes	GET /api/test/task	call	loop [every task]
14	Astro routes	fragment-renderer	next task	call	loop [every task]
15	Astro routes	Browser	fragment	reply	loop [every task]

Focus

Show all Browser Astro routes Session fragment-renderer

One practice run, request by request

Source: src/pages/api/test/start.ts, src/pages/test.astro, src/pages/api/test/answer.ts, src/pages/api/test/task.ts, src/services/task-renderer.ts

Show chart data

Data for One practice run, request by request
No.	From	To	Message	Kind	Fragment
1	Browser	Astro routes	POST /api/test/start	call
2	Astro routes	Session	store all tasks	call
3	Astro routes	Browser	redirect /test	reply
4	Browser	Astro routes	GET /test	call
5	Astro routes	fragment-renderer	first task	call
6	Astro routes	Browser	page	reply
7	Browser	Astro routes	hx-post /api/test/answer	call	loop [every task]
8	Astro routes	Session	load, check task	call	loop [every task]
9	Astro routes	Astro routes	validate, advance	call	loop [every task]
10	Astro routes	Session	save	call	loop [every task]
11	Astro routes	fragment-renderer	feedback	call	loop [every task]
12	Astro routes	Browser	fragment, HX-Trigger	reply	loop [every task]
13	Browser	Astro routes	GET /api/test/task	call	loop [every task]
14	Astro routes	fragment-renderer	next task	call	loop [every task]
15	Astro routes	Browser	fragment	reply	loop [every task]

Start. The start page submits grade, task count and the two options to /api/test/start. The route creates a session with all tasks, stores it in the Astro session (KV) and redirects to /test.
First task. test.astro loads the session and renders the current task on the server with renderTaskFragment() – the same function the API routes use.
Answer. The answer form carries htmx attributes:
```
<form
  id="answer-form"
  hx-post="/api/test/answer"
  hx-target="#feedback-container"
  hx-swap="innerHTML"
  hx-disabled-elt="find button[type='submit']"
>
```
/api/test/answer checks that the submission belongs to the current session and task (otherwise 409), validates the answer with the task’s own rules, advances the session and returns the rendered feedback fragment with the header HX-Trigger: feedbackShown.
Next task. After a correct answer the feedback waits 600 ms and fetches /api/test/task into #task-container via htmx.ajax. After a wrong answer the child reads the hint and presses Next task, an hx-get to the same route.
Result. When the run is complete, the feedback leads to /ergebnis, which renders the result fragment: score, a row of stamps and every task with both answers.

Fragment and page counter

The footer shows F:n P:n – fragment loads against page loads in the current session. It is refreshed by htmx from /api/test/counter whenever a task or feedback arrives, and shows how many requests of a run were answered with a fragment instead of a full page.