Frontend architecture

The frontend uses React, TanStack Router, TanStack Query, Zustand, shadcn/ui, and Rsbuild.

Route tree

Routes live in pinter-fe/src/routes.

Route area	Files	Purpose
App shell	`_app.tsx`, `__root.tsx`	Providers, app layout, protected shell.
Auth	`_auth/login.tsx`, `_auth/register.tsx`, `_auth/mfa.tsx`	Sign in, registration, MFA.
Chat	`_app/chat/`, `_app/embedded/`	Conversations and embedded chat.
Builder	`_app/builder/*`	Agent builder index and agent detail canvas.
Workspace	`_app/tools`, `_app/documents`, `_app/integrations`, `_app/mcp-servers`, `_app/evaluations`, `_app/marketplace`, `_app/api-studio`	Agent support workflows.
Admin	`_app/admin/*`	Users, models, quotas, usage, applications, approvals.

The app sidebar is the main navigation interface:

pinter-fe/src/shared/components/app-sidebar.tsx

It exposes:

New chat.
Claim code redemption.
My usage.
Workspace items filtered by role level.
Conversation history.
User menu.

Data access seam

Frontend API access goes through one seam:

pinter-fe/src/shared/auth/authenticated.ts

Use these exported functions instead of calling fetch directly:

Export	Use for
`api.get`, `api.post`, `api.put`, `api.delete`	JSON API calls.
`stream`	Authenticated SSE chat runs.
`upload`	Multipart file uploads.
`fetchObjectUrl`	Authenticated private attachments.
`AuthError`	User-facing API errors.

This module handles token refresh, 401 retry, logout on terminal auth failure, JSON errors, uploads, and streaming.

Conversation streaming

useAgentStream sends POST /api/conversations/{conversationId}/send through stream() with stream: true:

{
  "message": "Ringkas risiko bulan ini",
  "agent_id": "<agent_id>",
  "attachments": [],
  "stream": true
}

The backend defaults stream to false; the frontend opts in so it can consume SSE chunks with ReadableStream.getReader(). thinking events update the trace panel; text events update the answer bubble. The frontend also sends X-Pinter-Response-Format: blocks. It renders block events for complete one-line JSON blocks: html, flint_chart, image, and followup. Ordinary prose remains delta text. Do not split block JSON across SSE chunks or lines.

Domain packages

The canonical API is split into eight domains: identity, agents, conversations, knowledge, integrations, evaluations, governance, and content. Frontend domain code lives under src/apps; knowledge screens currently remain route-owned. A domain may import its own internals. Any other consumer must import from @/apps/<domain>, never @/apps/<domain>/...; ESLint enforces this boundary.

Domain	Public API prefix
Identity	`/api/identity`
Agents	`/api/agents`
Conversations	`/api/conversations`
Knowledge	`/api/knowledge`
Integrations	`/api/integrations`
Evaluations	`/api/evaluations`
Governance	`/api/governance`
Content	`/api/content`

State modules

State	Path	Purpose
Auth	`src/shared/stores/auth-store.ts`	JWT, refresh token, current user, persistence.
Query cache	`src/shared/lib/query-client.ts`	Server state cache.
Builder	`src/apps/agents`	Agent canvas and workflow editing.
Chat	`src/apps/conversations`	Conversation list, messages, streaming feed.

Role-aware UI

Workspace navigation uses role_level:

Role level	Meaning in UI
`1`	Super Admin.
`2`	Admin-level access.
`3`	Builder/workspace access.
`4`	Regular user.

Route guards live in:

pinter-fe/src/shared/auth/route-guards.ts

The frontend guard hides routes and redirects users. Backend route permissions remain the source of truth for security.

Get started

Architecture

Core workflows

Administration

Reference

Frontend architecture

Route tree

Navigation source

Data access seam

Conversation streaming

Domain packages

State modules

Role-aware UI

​Route tree

​Navigation source

​Data access seam

​Conversation streaming

​Domain packages

​State modules

​Role-aware UI

Route tree

Navigation source

Data access seam

Conversation streaming

Domain packages

State modules

Role-aware UI