# 画面設計書 21-タスク一覧画面（非推奨）

## 概要

本ドキュメントは、Giselle Studioの旧バージョンのタスク一覧画面（非推奨）の設計仕様を記載したものです。

### 本画面の処理概要

この画面は、ユーザーが過去に実行したタスク（Acts）の一覧を表示・管理するための画面です。stageV2Flagが有効な場合にのみ表示され、新しいタスク管理UIへの移行過程で使用される非推奨画面となります。

**業務上の目的・背景**：AIワークフローの実行履歴を確認し、各タスクのステータスや使用されたLLMモデルを把握することで、ワークフローの実行状況を効率的に管理できます。また、失敗したタスクの再実行や、アーカイブ機能（未実装）を通じてタスクを整理することができます。

**画面へのアクセス方法**：メインナビゲーションの「Tasks」メニューから「/tasks/deprecated」パスにアクセスします。ただし、stageV2Flagが無効の場合は404エラーが返されます。

**主要な操作・処理内容**：
1. タスク一覧の表示と検索（ワークスペース名・チーム名での絞り込み）
2. ステータス別フィルタリング（Created、Running、Completed、Failed、Cancelled）
3. Open/Archivedタブでの切り替え（Archivedは現在未実装）
4. タスク詳細画面への遷移
5. 新規タスク作成（Playgroundへの遷移）
6. タスクの再読み込み

**画面遷移**：この画面からはタスク詳細画面（/stage/acts/{taskId}/{stepId}）、Playground画面（/stage）へ遷移できます。ログインが必要なため、未認証の場合はログイン画面にリダイレクトされます。

**権限による表示制御**：ログイン済みユーザーのみアクセス可能で、自分が実行したタスク（directorDbIdが現在のユーザーのdbIdと一致するもの）のみが表示されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 25 | タスク取得 | 主機能 | 旧バージョンのタスク一覧取得処理 |

## 画面種別

一覧

## URL/ルーティング

`/tasks/deprecated`

## 入出力項目

| 項目名 | 型 | 入出力 | 必須 | 説明 |
|--------|-----|--------|------|------|
| searchQuery | string | 入力 | - | 検索クエリ（is:open, is:archived, ワークスペース名、チーム名） |
| selectedStatuses | StatusFilter[] | 入力 | - | 選択されたステータスフィルター |
| activeTab | "open" \| "archived" | 入力 | - | アクティブなタブ |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| タスク一覧 | 実行されたタスクの一覧 | acts テーブル + SDKタスクデータ |
| ワークスペース名 | タスクが実行されたワークスペースの名前 | workspace.name |
| チーム名 | タスクが属するチームの名前 | teams テーブル |
| ステータス | タスクの実行状態（created/inProgress/completed/failed/cancelled） | SDKタスクステータス |
| 作成日時 | タスクが作成された日時 | acts.createdAt |
| LLMモデル | 使用されたLLMモデルの一覧 | workspace.nodes |
| Open/Archivedカウント | 各タブのタスク数 | 計算値 |

## イベント仕様

### 1-検索入力

ユーザーが検索ボックスに入力しEnterキーを押下すると、検索クエリがパースされ、一覧がフィルタリングされます。

- `is:open` タグ: オープン状態のタスクを表示
- `is:archived` タグ: アーカイブ済みタスクを表示（現在未実装のため常に0件）
- フリーテキスト: ワークスペース名・チーム名で部分一致検索

### 2-ステータスフィルター変更

ポップオーバーメニューからステータスを選択/解除すると、該当するステータスのタスクのみが表示されます。複数ステータスの同時選択が可能です。

### 3-タブ切り替え

Open/Archivedタブをクリックすると、対応するis:フィルターが検索クエリに自動追加され、一覧が更新されます。

### 4-タスク行クリック

タスク行をクリックすると、該当タスクの詳細画面（/stage/acts/{taskId}/{stepId}）に遷移します。stepIdはタスクのステータスに応じて適切なステップが選択されます。

### 5-リロードボタン押下

失敗したタスクのリロードボタン押下時、Server Actionを通じてページが再検証（revalidatePath）されます。

### 6-New taskボタン押下

新規タスク作成ボタン押下時、Playground画面（/stage）に遷移します。

### 7-アーカイブボタン押下

アーカイブボタン押下時、現在はアラート表示のみ（未実装機能）。

## データベース更新仕様

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | acts | SELECT | ユーザーのタスク一覧を取得 |
| リロード | - | - | キャッシュ再検証のみ（DB更新なし） |

### テーブル別更新項目詳細

#### acts

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | 全項目 | directorDbId = 現在ユーザーのdbId | 最大50件、createdAt降順 |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|----------|
| 空状態 | No tasks completed yet | タスクが0件の場合 |
| フィルター結果なし | No tasks match your filters | フィルター適用後に該当タスクがない場合 |
| アーカイブ未実装 | Archive task: {workspaceName} | アーカイブボタン押下時（アラート） |

## 例外処理

| 状態 | 処理 |
|------|------|
| stageV2Flag無効 | 404ページ（notFound）を表示 |
| SDKタスクデータ取得エラー | 該当タスクを一覧から除外（エラー無視） |
| チーム情報取得エラー | 該当タスクを一覧から除外（エラー無視） |
| ワークスペース情報取得エラー | 該当タスクを一覧から除外（エラー無視） |

## 備考

- この画面はstageV2Flagによる機能フラグ制御下にあり、フラグが有効な場合のみアクセス可能です
- 現在開発中の機能であり、データ構造の破壊的変更により過去データのパースが失敗する場合があります
- Server Actionの最大実行時間は800秒に設定されています（Vercel Fluid Compute）
- Archived機能は現在未実装であり、is:archivedフィルター適用時は常に0件が返されます

---

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

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

### 推奨読解順序

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

まず、タスク一覧で使用されるデータ構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `apps/studio.giselles.ai/app/(main)/tasks/types.ts` | ActWithNavigation型、StatusFilter型の定義 |
| 1-2 | schema.ts | `apps/studio.giselles.ai/db/schema.ts` | actsテーブルのスキーマ定義 |

**読解のコツ**: ActWithNavigationはSDKのタスクデータとナビゲーション情報を組み合わせた複合型です。

#### Step 2: エントリーポイントを理解する

サーバーコンポーネントとしてのページの処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `apps/studio.giselles.ai/app/(main)/tasks/deprecated/page.tsx` | サーバーサイドでのデータ取得とクライアントコンポーネントへの受け渡し |

**主要処理フロー**:
1. **行124-127**: stageV2Flagの確認と404処理
2. **行129-135**: ユーザーのタスク一覧をDBから取得（最大50件）
3. **行137-143**: 各タスクにナビゲーションデータを付与
4. **行18-115**: enrichActWithNavigationData関数でSDKタスクデータとワークスペース情報を取得

#### Step 3: クライアントコンポーネントを理解する

フィルタリングとUI表示のロジックを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | filterable-acts-list.tsx | `apps/studio.giselles.ai/app/(main)/tasks/components/filterable-acts-list.tsx` | GitHub風検索パーサー、フィルタリングロジック、テーブル表示 |

**主要処理フロー**:
- **行38-55**: parseSearchQuery関数で検索クエリをパース
- **行57-79**: matchesSearchFilters関数でフィルター条件とのマッチング
- **行136-184**: filteredActsのuseMemoでフィルタリング処理

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

```
page.tsx (Server Component)
    │
    ├─ stageV2Flag() - 機能フラグ確認
    │
    ├─ fetchUserTeams() - ユーザーのチーム一覧取得
    │
    ├─ fetchCurrentUser() - 現在ユーザー取得
    │
    ├─ db.query.acts.findMany() - タスク一覧取得
    │
    ├─ enrichActWithNavigationData() - 各タスクのナビゲーション情報取得
    │      ├─ giselle.getTask() - SDKタスクデータ取得
    │      └─ giselle.getWorkspace() - ワークスペースデータ取得
    │
    └─ FilterableActsList (Client Component)
           ├─ parseSearchQuery() - 検索クエリパース
           ├─ matchesSearchFilters() - フィルターマッチング
           └─ Table/TableRow - UI表示
```

### データフロー図

```
[入力]                      [処理]                         [出力]

acts テーブル ───────────▶ enrichActWithNavigationData() ───▶ ActWithNavigation[]
   │                              │                              │
   │                              ▼                              │
   │                       giselle.getTask()                    │
   │                       giselle.getWorkspace()               │
   │                              │                              │
   └─────────────────────────────▶├─────────────────────────────▶│
                                  ▼                              ▼
searchQuery ──────────────▶ parseSearchQuery() ─────────▶ フィルター済み一覧
selectedStatuses ─────────▶ matchesSearchFilters() ─────▶ テーブル表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(main)/tasks/deprecated/page.tsx` | ソース | サーバーコンポーネント、データ取得 |
| filterable-acts-list.tsx | `apps/studio.giselles.ai/app/(main)/tasks/components/filterable-acts-list.tsx` | ソース | クライアントコンポーネント、フィルタリングUI |
| types.ts | `apps/studio.giselles.ai/app/(main)/tasks/types.ts` | ソース | 型定義 |
| flags.ts | `apps/studio.giselles.ai/flags.ts` | ソース | stageV2Flagの定義 |
| giselle.ts | `apps/studio.giselles.ai/app/giselle.ts` | ソース | Giselleクライアントインスタンス |
| schema.ts | `apps/studio.giselles.ai/db/schema.ts` | ソース | DBスキーマ定義 |
