System Architecture

Alius Agent Team adopts a modern layered architecture design, fully leveraging Tauri 2’s cross-platform capabilities and React 19’s declarative UI advantages. This chapter introduces the overall architecture design of the system.

Architecture Overview

Alius Agent Team’s architecture can be divided into the following layers:

┌─────────────────────────────────────────┐
│         User Interface Layer (UI Layer)   │
│    React 19 + TypeScript + CSS Modules   │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│      State Management Layer               │
│      Zustand / Redux Toolkit (Planned)  │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│      Core Business Logic Layer            │
│    Agent Management / Task Orchestration  │
│    / Team Management                      │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│      Tauri Backend Layer (Backend Layer) │
│   Rust + Tauri 2 Core + Plugin System   │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│     Platform Abstraction Layer            │
│    Windows / macOS / Linux / iOS / Pad   │
└─────────────────────────────────────────┘

Frontend Architecture

React 19 Application Architecture

The frontend is built with React 19, fully utilizing React 19’s new features:

  • Server Components (Planned): Reduce client bundle size
  • Concurrent Features: Provide smooth user experience
  • Suspense Improvements: More granular loading state control
  • use() Hook: Simplify asynchronous data fetching

Component Design Principles

src/
├── components/           # Generic components
│   ├── ui/             # Basic UI components
│   ├── layout/         # Layout components
│   └── feature/        # Feature-specific components
├── pages/              # Page components
├── hooks/              # Custom Hooks
├── stores/             # State management
├── services/           # API services
├── utils/              # Utility functions
└── types/              # TypeScript type definitions

Responsive Design Architecture

Alius Agent Team adopts a mobile-first responsive design:

  • Desktop: >= 1024px, full-featured layout
  • Tablet: 768px - 1023px, touch-adapted layout
  • Phone: < 768px, streamlined and efficient mobile layout

Responsive breakpoint management:

export const BREAKPOINTS = {
  phone: 0,
  tablet: 768,
  desktop: 1024,
  wide: 1440,
} as const;

Tauri 2 Backend Architecture

Why Choose Tauri 2

Alius Agent Team chose Tauri 2 as the desktop framework based on the following considerations:

  1. Small Size: Final application size typically < 10MB (compared to Electron’s > 100MB)
  2. High Performance: Rust backend provides near-native performance
  3. Security: Rust’s memory safety guarantees
  4. Cross-Platform: One codebase runs on Windows, macOS, Linux, iOS, and Android

Tauri Core Architecture

┌─────────────────────────────────────┐
│         WebView (Frontend UI)       │
│     HTML/CSS/JS - React Rendering  │
└──────────────┬──────────────────────┘
               │ HTTP / WebSocket
┌──────────────▼──────────────────────┐
│      Tauri Core (Rust)              │
│  ┌─────────────────────────────┐   │
│  │   Command Handler           │   │
│  ├─────────────────────────────┤   │
│  │   Event System              │   │
│  ├─────────────────────────────┤   │
│  │   Plugin System             │   │
│  └─────────────────────────────┘   │
└──────────────┬──────────────────────┘
               │ FFI / System APIs
┌──────────────▼──────────────────────┐
│     Operating System Native Capabilities│
│  File System / Network / Process     │
│  Management, etc.                    │
└─────────────────────────────────────┘

Core Plugin System

Tauri 2’s plugin system allows us to extend core functionality:

  • @tauri-apps/plugin-store: Persistent storage
  • @tauri-apps/plugin-http: HTTP client
  • @tauri-apps/plugin-notification: System notifications
  • @tauri-apps/plugin-autostart: Auto-start
  • Custom Plugins: Agent communication, Watch synchronization, etc.

Data Model Design

Core Entity Relationships

User 1──┐
        ├──* Agent
        ├──* Team (Member)
        └──* Notification

Agent 1──┐
         ├──* Task (Task)
         ├──* Session (Session)
         └──* Team (Belongs to Team)

Team 1──* Agent (Agents in Team)
Team 1──* User (Team Members)

Task 1──1 Agent (Executor)
Task 1──* Session (Related Sessions)

Session 1──1 Agent (Owning Agent)
Session 1──* Task (Tasks in Session)

Detailed Data Models

Agent Model

interface Agent {
  id: string;
  name: string;
  description: string;
  type: AgentType;
  status: AgentStatus;
  config: AgentConfig;
  createdAt: string;
  updatedAt: string;
  ownerId: string;
  teamId?: string;
  tags: string[];
  health: HealthStatus;
}

enum AgentStatus {
  Active = "active",
  Inactive = "inactive",
  Error = "error",
  Maintenance = "maintenance"
}

enum AgentType {
  General = "general",
  CodeGen = "codegen",
  DataAnalysis = "data_analysis",
  Custom = "custom"
}

Task Model

interface Task {
  id: string;
  title: string;
  description: string;
  status: TaskStatus;
  priority: Priority;
  agentId: string;
  createdBy: string;
  createdAt: string;
  updatedAt: string;
  completedAt?: string;
  result?: TaskResult;
  attachments?: Attachment[];
}

enum TaskStatus {
  Pending = "pending",
  Running = "running",
  Completed = "completed",
  Failed = "failed",
  Cancelled = "cancelled"
}

Team Model

interface Team {
  id: string;
  name: string;
  description: string;
  members: TeamMember[];
  agents: string[];  // Agent IDs
  createdAt: string;
  updatedAt: string;
  settings: TeamSettings;
}

interface TeamMember {
  userId: string;
  role: TeamRole;
  joinedAt: string;
}

enum TeamRole {
  Owner = "owner",
  Admin = "admin",
  Member = "member",
  Viewer = "viewer"
}

API Architecture

REST API Design

Alius Agent Team provides 34+ REST API endpoints, following RESTful design principles:

/api/v1/
├── auth/              # Authentication
│   ├── login/sms
│   ├── login/apple
│   ├── login/wechat
│   └── refresh
├── agents/            # Agent management
│   ├── GET    /
│   ├── POST   /
│   ├── GET    /:id
│   ├── PUT    /:id
│   ├── DELETE /:id
│   └── POST   /:id/actions/start
├── tasks/             # Task management
├── teams/             # Team management
├── sessions/          # Session management
├── notifications/    # Notification management
└── users/             # User management

Real-Time Communication

In addition to REST API, the system also supports real-time communication:

  • WebSocket: For real-time task status updates
  • Server-Sent Events (SSE): For notification push
  • Tauri Event System: For real-time communication between frontend and backend

Cross-Platform Implementation

Code Sharing Strategy

src/
├── core/              # Pure logic code (cross-platform shared)
│   ├── types/        # Type definitions
│   ├── utils/        # Utility functions
│   └── services/     # Business logic
├── platform/
│   ├── desktop/     # Desktop-specific code
│   ├── mobile/      # Mobile-specific code
│   └── watch/       # Watch-specific code
└── shared/           # Shared UI components

Platform Detection and Adaptation

export const Platform = {
  isDesktop: () => typeof window !== 'undefined' && !isMobile(),
  isMobile: () => /Android|iPhone|iPad|iPod/i.test(navigator.userAgent),
  isTablet: () => /iPad|Android(?=.*\bMobile\b)/i.test(navigator.userAgent),
  isWatch: () => /AppleWatch/i.test(navigator.userAgent),
  OS: {
    isWindows: () => /Win/i.test(navigator.userAgent),
    isMac: () => /Mac/i.test(navigator.userAgent),
    isLinux: () => /Linux/i.test(navigator.userAgent),
    isiOS: () => /iPhone|iPad|iPod/i.test(navigator.userAgent),
  }
} as const;

Security Architecture

Authentication Flow

User -> Login Request -> Server Verification -> Return Token
                            │
User <- Store Token <- Subsequent Requests Carry Token <- Server Verifies Token

Permission Control

Adopts RBAC (Role-Based Access Control) model:

User -> Role -> Permissions -> Resource

Permission granularity:

  • Resource Level: Access permissions to specific resources
  • Action Level: Specific actions on resources (read, write, delete, etc.)
  • Field Level: Access permissions to specific fields of resources (planned)

Performance Optimization Strategies

Frontend Performance

  • Code Splitting: Route-based lazy loading
  • Virtual Scrolling: Handle large Agent/task lists
  • Debounce/Throttle: Optimize user input and scroll events
  • Web Worker: Move time-consuming computations out of main thread

Backend Performance

  • Rust Concurrency: Leverage Rust’s async/await and tokio runtime
  • Connection Pooling: Database and HTTP connection reuse
  • Caching Strategy: Multi-level caching for frequently used data

Summary

Alius Agent Team’s architecture design fully considers cross-platform support, high performance, and extensibility. Tauri 2 enables true native cross-platform experience, React 19 provides modern user interface, and reasonable layered architecture ensures code maintainability and testability.