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:

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.

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/features/builder`	Agent canvas and workflow editing.
Chat	`src/features/chat`	Conversation list, messages, streaming feed.

Workspace navigation uses role_level:

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.