システムアーキテクチャ

Alius Agent Teamは、最新の階層化アーキテクチャ設計を採用し、Tauri 2のクロスプラットフォーム機能とReact 19の宣言的UIの利点を十分に活用しています。この章では、システムの全体的なアーキテクチャ設計を紹介します。

アーキテクチャ概要

Alius Agent Teamのアーキテクチャは、以下の階層に分けることができます：

┌─────────────────────────────────────────┐
│         ユーザーインターフェース層 (UI層)  │
│    React 19 + TypeScript + CSS Modules  │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│       状態管理層 (State Management)      │
│      Zustand / Redux Toolkit (計画中)   │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│      コアビジネスロジック層              │
│    Agent管理 / タスクオーケストレーション │
│    / チーム管理                        │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│      Tauriバックエンド層 (Backend層)    │
│   Rust + Tauri 2 Core + プラグインシステム │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│        プラットフォーム抽象層              │
│    Windows / macOS / Linux / iOS / Pad  │
└─────────────────────────────────────────┘

フロントエンドアーキテクチャ

React 19アプリケーションアーキテクチャ

フロントエンドはReact 19で構築され、React 19の新機能を十分に活用しています：

  • サーバーコンポーネント（計画中）：クライアントバンドルサイズを削減
  • コンカレント機能：スムーズなユーザー体験を提供
  • サスペンスの改善：より細かいローディング状態制御
  • use()フック：非同期データ取得を簡素化

コンポーネント設計原則

src/
├── components/           # 汎用コンポーネント
│   ├── ui/             # 基本UIコンポーネント
│   ├── layout/         # レイアウトコンポーネント
│   └── feature/       # 機能固有のコンポーネント
├── pages/              # ページコンポーネント
├── hooks/              # カスタムフックス
├── stores/             # 状態管理
├── services/           # APIサービス
├── utils/              # ユーティリティ関数
└── types/             # TypeScript型定義

レスポンシブデザインアーキテクチャ

Alius Agent Teamは、モバイルファーストのレスポンシブデザインを採用しています：

  • デスクトップ：>= 1024px、フル機能レイアウト
  • タブレット：768px - 1023px、タッチ対応レイアウト
  • フォン：< 768px、簡素化された効率的なモバイルレイアウト

レスポンシブブレークポイント管理：

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

Tauri 2バックエンドアーキテクチャ

なぜTauri 2を選択したのか

Alius Agent Teamは、以下の考慮に基づいてデスクトップフレームワークとしてTauri 2を選択しました：

  1. 体積が小さい：最終的なアプリケーション体積は通常 < 10MB（Electronの > 100MBと比較）
  2. パフォーマンスが高い：Rustバックエンドはネイティブに近いパフォーマンスを提供
  3. セキュリティ：Rustのメモリ安全性保証
  4. クロスプラットフォーム：1つのコードベースでWindows、macOS、Linux、iOS、Androidを実行

Tauriコアアーキテクチャ

┌─────────────────────────────────────┐
│         WebView (フロントエンドUI)    │
│     HTML/CSS/JS - Reactレンダリング  │
└──────────────┬──────────────────────┘
               │ HTTP / WebSocket
┌──────────────▼──────────────────────┐
│      Tauri Core (Rust)              │
│  ┌─────────────────────────────┐   │
│  │   コマンドハンドラー          │   │
│  ├─────────────────────────────┤   │
│  │   イベントシステム            │   │
│  ├─────────────────────────────┤   │
│  │   プラグインシステム          │   │
│  └─────────────────────────────┘   │
└──────────────┬──────────────────────┘
               │ FFI / システムAPI
┌──────────────▼──────────────────────┐
│     オペレーティングシステムネイティブ機能│
│  ファイルシステム / ネットワーク / プロセス│
│  管理など                             │
└─────────────────────────────────────┘

コアプラグインシステム

Tauri 2のプラグインシステムにより、コア機能を拡張できます：

  • @tauri-apps/plugin-store：永続的ストレージ
  • @tauri-apps/plugin-http：HTTPクライアント
  • @tauri-apps/plugin-notification：システム通知
  • @tauri-apps/plugin-autostart：自動起動
  • カスタムプラグイン：Agent通信、Watch同期など

データモデル設計

コアエンティティ関係

User 1──┐
        ├──* Agent
        ├──* Team (メンバー)
        └──* Notification

Agent 1──┐
         ├──* Task (タスク)
         ├──* Session (セッション)
         └──* Team (所属チーム)

Team 1──* Agent (チーム内のAgent)
Team 1──* User (チームメンバー)

Task 1──1 Agent (実行者)
Task 1──* Session (関連セッション)

Session 1──1 Agent (所属Agent)
Session 1──* Task (セッション内のタスク)

詳細データモデル

Agentモデル

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モデル

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モデル

interface Team {
  id: string;
  name: string;
  description: string;
  members: TeamMember[];
  agents: string[];  // Agent ID
  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アーキテクチャ

REST API設計

Alius Agent Teamは、RESTful設計原則に従う34以上のREST APIエンドポイントを提供します：

/api/v1/
├── auth/              # 認証関連
│   ├── login/sms
│   ├── login/apple
│   ├── login/wechat
│   └── refresh
├── agents/            # Agent管理
│   ├── GET    /
│   ├── POST   /
│   ├── GET    /:id
│   ├── PUT    /:id
│   ├── DELETE /:id
│   └── POST   /:id/actions/start
├── tasks/             # タスク管理
├── teams/             # チーム管理
├── sessions/          # セッション管理
├── notifications/    # 通知管理
└── users/            # ユーザー管理

リアルタイム通信

REST APIに加えて、システムはリアルタイム通信もサポートします：

  • WebSocket：リアルタイムタスクステータス更新用
  • Server-Sent Events (SSE)：通知プッシュ用
  • Tauriイベントシステム：フロントエンドとバックエンド間のリアルタイム通信

クロスプラットフォーム実装

コード共有戦略

src/
├── core/              # 純粋なロジックコード（クロスプラットフォーム共有）
│   ├── types/        # 型定義
│   ├── utils/        # ユーティリティ関数
│   └── services/     # ビジネスロジック
├── platform/
│   ├── desktop/     # デスクトップ固有のコード
│   ├── mobile/      # モバイル固有のコード
│   └── watch/       # Watch固有のコード
└── shared/           # 共有UIコンポーネント

プラットフォーム検出と適応

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;

セキュリティアーキテクチャ

認証フロー

ユーザー -> ログインリクエスト -> サーバー検証 -> トークンを返す
                            │
ユーザー <- トークンを保存 <- 後続リクエストがトークンを携帯 <- サーバーがトークンを検証

権限制御

RBAC（ロールベースアクセス制御）モデルを採用：

ユーザー -> ロール -> 権限 -> リソース

権限粒度：

  • リソースレベル：特定のリソースへのアクセス権限
  • 操作レベル：リソースに対する特定の操作（読み取り、書き込み、削除など）
  • フィールドレベル：リソースの特定フィールドへのアクセス権限（計画中）

パフォーマンス最適化戦略

フロントエンドパフォーマンス

  • コード分割：ルートベースの遅延読み込み
  • 仮想スクロール：大量のAgent/タスクリストを処理
  • デバウンス/スロットル：ユーザー入力とスクロールイベントを最適化
  • Web Worker：時間のかかる計算をメインスレッドから移動

バックエンドパフォーマンス

  • Rust並行処理：Rustのasync/awaitとtokioランタイムを活用
  • 接続プール：データベースとHTTP接続の再利用
  • キャッシュ戦略：頻繁に使用されるデータの多層キャッシュ

まとめ

Alius Agent Teamのアーキテクチャ設計は、クロスプラットフォーム、高性能、拡張性を十分に考慮しています。Tauri 2により真のネイティブクロスプラットフォーム体験を実現し、React 19により最新のユーザーインターフェースを提供し、合理的な階層化アーキテクチャによりコードの保守性とテスト可能性を確保します。