| UI app |
Next.js and React |
Pages, routing, rendering, client navigation |
Serve the app and support Next runtime endpoints if any are used |
| Language and build |
TypeScript |
Type-safe UI and service code |
None |
| UI components |
Material UI and Emotion |
UI components, theming, styling |
None |
| Auth framework |
NextAuth |
Session handling and auth wiring in the Next app |
Identity provider integration depending on configured providers |
| OIDC client |
oidc-client-ts and react-oidc-context |
OIDC login flows and token handling in the browser where used |
OIDC provider availability and configuration |
| Data sync and caching |
TanStack React Query |
Cache API results, refetch, retries, UI loading states |
Stable backend endpoints and consistent response shapes |
| Realtime transport |
SignalR client |
Connect to a hub for live updates if enabled in UI |
SignalR hub hosted server-side |
| App state |
Zustand |
Lightweight client state for UI flows |
None |
| Persistence client |
PocketBase JS SDK |
Read and update records used by UI (cards, files, timestamps, mappings) |
PocketBase server, schema, auth rules, file storage |
| Orchestration facade |
TemporalGenerationService (custom) |
Start jobs, poll job status, map status into UI states, cancel jobs, notify UI listeners |
A backend that exposes workflow HTTP endpoints and maps them to Temporal |
| Workflow engine |
Temporal (indirect, via HTTP) |
Frontend does not run Temporal SDK; it only tracks workflow ids and statuses |
Temporal server, workers, task queues, workflow definitions, activity execution |
| Job types tracked |
Single jobs and batch jobs |
Use a single tracking model: workflow ids, run ids, polling per workflow id, aggregate batch progress |
Backend creates multiple workflows for batch and returns ids for all of them |
| Job lifecycle sync |
Polling loop (client-side) |
Periodic status checks, error thresholding, stop on terminal state |
Status endpoint backed by Temporal workflow state |
| Error monitoring |
Sentry for Next.js |
Capture client and server runtime errors in the app |
Sentry project and DSN configuration |
| Rich text editing |
TipTap |
Editor UI and content editing |
Storage and validation of saved editor output |
| Forms and validation |
react-hook-form and Zod |
Client-side form state and schema validation |
Server-side validation still needed, but not shown here |
| Content rendering |
react-markdown and remark-gfm |
Render markdown content |
None |
| Media UX |
Dropzone, lightbox, carousel, DnD libs |
Upload UI, previews, drag-drop interactions |
Upload endpoints or PocketBase file handling |
| Charts |
Chart.js, Recharts |
Visualize metrics or summaries in UI |
Data endpoints that provide chartable data |
| Dates and time |
Luxon |
Date formatting and time handling |
None |
| Sanitization |
sanitize-html |
Sanitize HTML before rendering |
None |
| Logging |
pino |
Structured logs from the app runtime |
Log collection is external if desired |
| Testing |
Jest, Testing Library, MSW |
Unit tests and API mocking |
None |