# 機能設計書 87-タスクストア

## 概要

本ドキュメントは、Giselleプラットフォームにおけるタスク状態管理ストアの設計を定義する。タスクストアは、Zustandを使用したReact向けのグローバル状態管理ストアであり、ワークフロー実行中のアクティブタスクと作成状態を管理する。

### 本機能の処理概要

**業務上の目的・背景**：ワークフロー実行時、UIコンポーネント間でタスクの状態を共有する必要がある。タスクストアは、現在実行中のタスク（activeTask）とタスク作成中の状態（creating）を一元管理し、プレイグラウンドやタスク詳細画面など複数のコンポーネントから参照・更新できるようにする。

**機能の利用シーン**：
- プレイグラウンドでタスクを実行する際のアクティブタスク管理
- タスク実行中のUI状態表示（ローディング、進行状況等）
- タスク作成処理中のUI制御

**主要な処理内容**：
1. activeTask: 現在実行中のタスクオブジェクトを保持
2. creating: タスク作成中かどうかのフラグを保持
3. setActiveTask: アクティブタスクを設定するアクション
4. setCreating: 作成中フラグを設定するアクション

**関連システム・外部連携**：
- Zustand（状態管理ライブラリ）
- @giselles-ai/protocol（Task型）

**権限による制御**：権限制御なし（クライアント側の状態管理のみ）

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 18 | プレイグラウンド画面 | 主機能 | タスク実行状態の管理 |
| 20 | タスク詳細画面 | 参照画面 | タスク情報の表示 |

## 機能種別

状態管理

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| task | Task \| undefined | No | 設定するアクティブタスク | - |
| creating | boolean | No | タスク作成中フラグ | - |

### 入力データソース

- Reactコンポーネントからのアクション呼び出し

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| activeTask | Task \| undefined | 現在のアクティブタスク |
| creating | boolean | タスク作成中フラグ |
| setActiveTask | function | アクティブタスク設定関数 |
| setCreating | function | 作成中フラグ設定関数 |

### 出力先

- Reactコンポーネントへの状態提供

## 処理フロー

### 処理シーケンス

```
1. ストア初期化
   └─ activeTask: undefined, creating: false
2. タスク作成開始
   └─ setCreating(true)
3. タスク作成完了
   └─ setActiveTask(task), setCreating(false)
4. タスク終了
   └─ setActiveTask(undefined)
```

### フローチャート

```mermaid
flowchart TD
    A[初期状態] --> B{タスク作成?}
    B -->|Yes| C[setCreating true]
    C --> D[タスク作成処理]
    D --> E{作成成功?}
    E -->|Yes| F[setActiveTask task]
    E -->|No| G[setCreating false]
    F --> H[setCreating false]
    H --> I[タスク実行中]
    G --> A
    I --> J{タスク完了?}
    J -->|Yes| K[setActiveTask undefined]
    K --> A
    J -->|No| I
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-87-01 | シングルアクティブタスク | 同時に1つのアクティブタスクのみ保持 | 常時 |
| BR-87-02 | 初期値 | activeTaskはundefined、creatingはfalseで初期化 | ストア初期化時 |

### 計算ロジック

特になし。

## データベース操作仕様

### 操作別データベース影響一覧

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| なし | - | - | クライアント側メモリ管理のみ |

### テーブル別操作詳細

データベースアクセスは発生しない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| なし | - | - | 状態管理のみのためエラー処理なし |

### リトライ仕様

リトライ不要（同期的な状態更新のみ）

## トランザクション仕様

トランザクション管理は不要（クライアント側メモリ管理のみ）

## パフォーマンス要件

- 状態更新: < 1ms
- Zustandのセレクタによる再レンダリング最適化

## セキュリティ考慮事項

- タスクデータにはセンシティブな情報が含まれる可能性があるため、適切なデータハンドリングが必要
- クライアント側でのデータ永続化は行わない

## 備考

- Zustandのcreate関数を使用してストアを作成
- useTaskStoreフックを通じてコンポーネントから利用

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

TaskStoreインターフェースの定義を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | store.ts | `packages/react/src/task/store.ts` | TaskStoreインターフェース定義（4-9行目） |

**読解のコツ**: Zustandストアのパターンを理解する。状態（activeTask、creating）とアクション（setActiveTask、setCreating）を1つのインターフェースで定義。

#### Step 2: ストア実装を理解する

create関数によるストア生成を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | store.ts | `packages/react/src/task/store.ts` | useTaskStoreの実装（11-20行目） |

**主要処理フロー**:
- **11行目**: create<TaskStore>でストア生成
- **12-13行目**: 初期状態の定義（activeTask: undefined、creating: false）
- **14-16行目**: setActiveTask関数の実装
- **17-19行目**: setCreating関数の実装

### プログラム呼び出し階層図

```
React Component
    │
    └─ useTaskStore()
           │
           ├─ activeTask (状態参照)
           │
           ├─ creating (状態参照)
           │
           ├─ setActiveTask() (状態更新)
           │
           └─ setCreating() (状態更新)
```

### データフロー図

```
[コンポーネント]              [TaskStore]

タスク作成開始
       │
       ▼
setCreating(true) ───────────▶ creating: true
       │
       ▼
タスク作成API呼び出し
       │
       ▼
setActiveTask(task) ─────────▶ activeTask: Task
       │
       ▼
setCreating(false) ──────────▶ creating: false
       │
       ▼
タスク完了
       │
       ▼
setActiveTask(undefined) ────▶ activeTask: undefined
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| store.ts | `packages/react/src/task/store.ts` | ソース | TaskStore定義と実装 |
| index.ts | `packages/react/src/task/index.ts` | ソース | エクスポート |
