# datn-k21/action-agent-fe-v2 architecture

> Architecture diagram of the GitHub repository datn-k21/action-agent-fe-v2, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/datn-k21/action-agent-fe-v2
- Repository: https://github.com/datn-k21/action-agent-fe-v2

## Overview

Action Agent FE is a web client for authenticated AI-agent chat, with management interfaces for assistants, extensions, MCP servers, knowledge uploads, scheduled tasks, and administration. The main user flow is sign-in, open a chat, create or select a thread, and stream agent responses; the sampled store and service code supports this flow. Several management areas are represented by their exact tree paths but were not sampled, so their internal behavior and connections are not asserted.

Main entry points: [`store/chat-store.ts`](https://github.com/datn-k21/action-agent-fe-v2/blob/development/store/chat-store.ts) (Chat state and streaming), [`app/(chat)/assistant/_components/assistant-list.tsx`](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/assistant/_components/assistant-list.tsx) (Assistant management), [`services/auth-service.ts`](https://github.com/datn-k21/action-agent-fe-v2/blob/development/services/auth-service.ts) (Auth requests), [`app/(auth)/login/page.tsx`](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(auth)/login/page.tsx) (Sign-in pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_identity["Identity"]
  node_auth_pages["Sign-in pages<br/>[page.tsx]"]
  node_auth_forms["Login and signup<br/>[login-form.tsx]"]
  node_auth_config["Session auth<br/>[auth.ts]"]
  node_auth_service["Auth requests<br/>[auth-service.ts]"]
end

subgraph group_conversation["Agent chat"]
  node_chat_page["New chat route<br/>[page.tsx]"]
  node_chat_ui["Chat interface<br/>[chat.tsx]"]
  node_chat_state["Chat state and streaming<br/>[chat-store.ts]"]
  node_thread_service["Thread requests<br/>[thread-service.ts]"]
  node_stream_service["Agent stream<br/>[stream-service.ts]"]
end

subgraph group_configuration["Agent setup"]
  node_assistant_mgmt["Assistant management<br/>[assistant-list.tsx]"]
  node_extension_mgmt["Extension catalog<br/>[extension-list.tsx]"]
  node_mcp_mgmt["MCP server management"]
  node_knowledge["Knowledge uploads"]
end

subgraph group_operations["Tasks and admin"]
  node_scheduler["Scheduled tasks<br/>[task-list.tsx]"]
  node_admin["Admin dashboard<br/>[overview.tsx]"]
end

subgraph group_network["API services"]
  node_backend{{"Application API"}}
end

node_user(("User"))

node_user -->|"opens"| node_auth_pages
node_auth_pages -->|"renders"| node_auth_forms
node_auth_forms -->|"submits credentials"| node_auth_service
node_auth_config -->|"authenticates with"| node_auth_service
node_auth_service -->|"sends auth requests"| node_backend
node_user -->|"opens"| node_chat_page
node_chat_page -->|"renders"| node_chat_ui
node_chat_ui -->|"uses state"| node_chat_state
node_chat_state -->|"creates threads"| node_thread_service
node_chat_state -->|"requests streams"| node_stream_service
node_thread_service -->|"sends thread requests"| node_backend
node_user -.->|"manages assistants"| node_assistant_mgmt
node_assistant_mgmt -->|"loads extension data"| node_extension_mgmt
node_assistant_mgmt -->|"loads MCP data"| node_mcp_mgmt
node_extension_mgmt -->|"sends extension requests"| node_backend
node_mcp_mgmt -.->|"sends MCP requests"| node_backend
node_user -.->|"uploads knowledge"| node_knowledge
node_user -.->|"manages tasks"| node_scheduler
node_scheduler -.->|"requests task data"| node_backend
node_user -.->|"views overview"| node_admin
node_admin -.->|"requests metrics"| node_backend

click node_auth_pages "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(auth)/login/page.tsx"
click node_auth_forms "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(auth)/_components/login-form.tsx"
click node_auth_config "https://github.com/datn-k21/action-agent-fe-v2/blob/development/auth.ts"
click node_auth_service "https://github.com/datn-k21/action-agent-fe-v2/blob/development/services/auth-service.ts"
click node_chat_page "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/page.tsx"
click node_chat_ui "https://github.com/datn-k21/action-agent-fe-v2/blob/development/components/chat.tsx"
click node_chat_state "https://github.com/datn-k21/action-agent-fe-v2/blob/development/store/chat-store.ts"
click node_thread_service "https://github.com/datn-k21/action-agent-fe-v2/blob/development/services/thread-service.ts"
click node_stream_service "https://github.com/datn-k21/action-agent-fe-v2/blob/development/services/stream-service.ts"
click node_assistant_mgmt "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/assistant/_components/assistant-list.tsx"
click node_extension_mgmt "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/extensions/_components/extension-list.tsx"
click node_mcp_mgmt "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/mcp-server/_components/mcp-server-table.tsx"
click node_knowledge "https://github.com/datn-k21/action-agent-fe-v2/tree/development/app/(chat)/knowledge-base"
click node_scheduler "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/scheduler-tasks/_components/task-list.tsx"
click node_admin "https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/admin/dashboard/overview/_components/overview.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_auth_pages,node_auth_forms,node_auth_config,node_auth_service,node_user toneBlue
class node_chat_page,node_chat_ui,node_chat_state,node_thread_service,node_stream_service toneAmber
class node_assistant_mgmt,node_extension_mgmt,node_mcp_mgmt,node_knowledge toneMint
class node_scheduler,node_admin toneRose
class node_backend toneIndigo
```

## Components

### Identity

- [Sign-in pages](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(auth)/login/page.tsx): `app/(auth)/login/page.tsx`
- [Login and signup](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(auth)/_components/login-form.tsx): `app/(auth)/_components/login-form.tsx`
- [Session auth](https://github.com/datn-k21/action-agent-fe-v2/blob/development/auth.ts): `auth.ts`
- [Auth requests](https://github.com/datn-k21/action-agent-fe-v2/blob/development/services/auth-service.ts): `services/auth-service.ts`

### Agent chat

- [New chat route](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/page.tsx): `app/(chat)/page.tsx`
- [Chat interface](https://github.com/datn-k21/action-agent-fe-v2/blob/development/components/chat.tsx): `components/chat.tsx`
- [Chat state and streaming](https://github.com/datn-k21/action-agent-fe-v2/blob/development/store/chat-store.ts): `store/chat-store.ts`
- [Thread requests](https://github.com/datn-k21/action-agent-fe-v2/blob/development/services/thread-service.ts): `services/thread-service.ts`
- [Agent stream](https://github.com/datn-k21/action-agent-fe-v2/blob/development/services/stream-service.ts): `services/stream-service.ts`

### Agent setup

- [Assistant management](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/assistant/_components/assistant-list.tsx): `app/(chat)/assistant/_components/assistant-list.tsx`
- [Extension catalog](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/extensions/_components/extension-list.tsx): `app/(chat)/extensions/_components/extension-list.tsx`
- [MCP server management](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/mcp-server/_components/mcp-server-table.tsx): `app/(chat)/mcp-server/_components/mcp-server-table.tsx`
- [Knowledge uploads](https://github.com/datn-k21/action-agent-fe-v2/tree/development/app/(chat)/knowledge-base): `app/(chat)/knowledge-base`

### Tasks and admin

- [Scheduled tasks](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/(chat)/scheduler-tasks/_components/task-list.tsx): `app/(chat)/scheduler-tasks/_components/task-list.tsx`
- [Admin dashboard](https://github.com/datn-k21/action-agent-fe-v2/blob/development/app/admin/dashboard/overview/_components/overview.tsx): `app/admin/dashboard/overview/_components/overview.tsx`

### API services

- **Application API**

### Other components

- **User**

## Connections

- User → Sign-in pages: opens
- Sign-in pages → Login and signup: renders (evidence: `app/(auth)/login/page.tsx`)
- Login and signup → Auth requests: submits credentials (evidence: `app/(auth)/_components/login-form.tsx`)
- Session auth → Auth requests: authenticates with (evidence: `auth.ts`)
- Auth requests → Application API: sends auth requests (evidence: `services/auth-service.ts`)
- User → New chat route: opens
- New chat route → Chat interface: renders (evidence: `app/(chat)/page.tsx`)
- Chat interface → Chat state and streaming: uses state (evidence: `components/chat.tsx`)
- Chat state and streaming → Thread requests: creates threads (evidence: `store/chat-store.ts`)
- Chat state and streaming → Agent stream: requests streams (evidence: `store/chat-store.ts`)
- Thread requests → Application API: sends thread requests (evidence: `services/thread-service.ts`)
- User → Assistant management: manages assistants
- Assistant management → Extension catalog: loads extension data (evidence: `app/(chat)/assistant/_components/assistant-list.tsx`)
- Assistant management → MCP server management: loads MCP data (evidence: `app/(chat)/assistant/_components/assistant-list.tsx`)
- Extension catalog → Application API: sends extension requests
- MCP server management → Application API: sends MCP requests
- User → Knowledge uploads: uploads knowledge
- User → Scheduled tasks: manages tasks
- Scheduled tasks → Application API: requests task data
- User → Admin dashboard: views overview
- Admin dashboard → Application API: requests metrics