Frontend Structure

The SOIT frontend is route-centered. Workspace routes expose the main product areas, while shared components, services, hooks, stores, i18n resources, and types support those routes. The frontend carries no backend business rules — it renders what api/v1 returns.

Layer flow

root.tsx / routes.ts
  └─ layout (root layout · nav layout · sidebar)
       ├─ workspace routes (agents · chat · workflow · knowledge · tasks · observe)
       └─ admin routes (plugin/skill/mcp · model · setting/system · auth)
            ↓
        services (agent · knowledge · workflow · responses · security)
            ↓  REST / WS / SSE
          api/v1

Routes talk to typed service clients; state flows through Zustand stores and React Query; shared UI, styles, and i18n sit beneath everything.

Main folders

Product routes

• Workspace surfaces: /agents (agent workbench), /chat (threaded execution), /workflow (DAG design on React Flow), /knowledge (bases, documents, analytics), /tasks (execution queue and detail control), /observe (runs, approvals, feedback, audits).
• Admin surfaces: /plugin, /skill, /mcp (capability lifecycle), /model (ModelHub), /setting and /system (workspace and platform settings), /auth (sign-in), /notifications, and run detail views under /run and /observe/runs/{run_id}.

Conventions

• Streaming (chat, run progress) uses SSE/WebSocket connections managed in the services layer.
• API envelopes are stable; clients read data and surface run_id for jumps into Observe.
• All user-visible copy is i18next-managed.

For contribution rules and commands, see Frontend Development.