# 画面設計書 22-ショーケース画面

## 概要

本ドキュメントは、Giselle Studioのショーケース画面の設計仕様を記載したものです。

### 本画面の処理概要

この画面は、公開されているアプリ（ワークフロー）をショーケース形式で一覧表示し、ユーザーがアプリを発見・実行・管理できるようにするための画面です。Apps、Playlist、Historyの3つのタブを持ち、アプリの検索・ソート、プレイリストの作成・管理、実行履歴の確認が可能です。

**業務上の目的・背景**：チーム内で作成されたAIワークフローを一覧で把握し、他のメンバーが作成したワークフローを発見・再利用することで、チーム全体の生産性向上を支援します。プレイリスト機能により、関連するアプリをグループ化して整理できます。

**画面へのアクセス方法**：メインナビゲーションから「Showcase」メニュー、または「/stage/showcase」パスに直接アクセスします。stageV2Flagが有効な場合にのみ表示されます。

**主要な操作・処理内容**：
1. アプリ一覧の表示（チームごとにグループ化）
2. アプリの検索（名前での絞り込み）
3. アプリのソート（名前昇順/降順、日付昇順/降順）
4. アプリの実行（Playボタン）
5. アプリの編集（Editボタン、ワークフローエディタへ遷移）
6. プレイリストの作成（New Playlist+ダイアログ）
7. 実行履歴の確認と再実行

**画面遷移**：この画面からはアプリ詳細画面（/stage/showcase/{appId}）、プレイリスト詳細画面（/stage/showcase/playlist/{id}）、ワークフローエディタ画面（/workspaces/{workspaceId}）、プレイグラウンド画面（/stage）へ遷移できます。

**権限による表示制御**：ログイン済みユーザーのみアクセス可能で、自分が所属するチームのアプリ・実行履歴のみが表示されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 61 | アプリ取得 | 主機能 | 公開アプリのショーケース一覧取得と表示 |

## 画面種別

一覧

## URL/ルーティング

`/stage/showcase`
- クエリパラメータ: `tab` (Apps | Playlist | History)

## 入出力項目

| 項目名 | 型 | 入出力 | 必須 | 説明 |
|--------|-----|--------|------|------|
| tab | string | 入力 | - | 表示するタブ（Apps/Playlist/History） |
| searchQuery | string | 入力 | - | 検索クエリ（アプリ名） |
| sortOption | SortOption | 入力 | - | ソートオプション（name-asc/name-desc/date-desc/date-asc） |
| playlistForm.title | string | 入力 | - | 新規プレイリストのタイトル |
| playlistForm.description | string | 入力 | - | 新規プレイリストの説明 |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| アプリ一覧 | チームのアプリ一覧 | flowTriggers + agents テーブル |
| アプリ名 | アプリの名前 | agents.name または flowTriggers.workspaceName |
| 更新日時 | アプリの最終更新日時 | agents.updatedAt |
| プレイリスト一覧 | プレイリストの一覧 | モックデータ（未実装） |
| 実行履歴一覧 | ユーザーの実行履歴 | acts テーブル |

## イベント仕様

### 1-タブ切り替え

TabNavigationコンポーネントでタブを切り替えると、URLのtabクエリパラメータが更新され、対応するコンテンツが表示されます。

### 2-検索入力

検索ボックスに入力すると、リアルタイムでアプリ名にマッチするものがフィルタリングされます（useMemoによる計算）。

### 3-ソート変更

ソートドロップダウンからオプションを選択すると、一覧が指定順序で再ソートされます。

### 4-アプリPlay押下

Playボタン押下時、/stage?appId={appId}に遷移し、プレイグラウンドでアプリを実行します。

### 5-アプリEdit押下

Editリンク押下時、/workspaces/{workspaceId}に遷移し、ワークフローエディタでアプリを編集します。

### 6-アプリ行クリック

アプリ行をクリックすると、/stage/showcase/{appId}のアプリ詳細画面に遷移します。

### 7-お気に入り押下

Starボタン押下時、お気に入り登録/解除を行います（現在未実装）。

### 8-New Playlist+押下

ダイアログが開き、タイトルと説明を入力してプレイリストを作成できます（現在未実装）。

### 9-プレイリスト押下

プレイリストカードを押下すると、/stage/showcase/playlist/{id}に遷移します。

### 10-履歴Re-run押下

Re-runボタン押下時、/stage?workspaceId={workspaceId}&teamId={teamId}に遷移してアプリを再実行します。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | flowTriggers, agents, acts | SELECT | アプリ一覧、履歴一覧を取得 |
| プレイリスト作成 | - | - | 未実装 |
| お気に入り登録 | - | - | 未実装 |

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

#### flowTriggers / agents / acts

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | flowTriggers全項目 | ユーザーが所属するチーム | fetchFlowTriggers関数で取得 |
| SELECT | agents.updatedAt, agents.name | workspaceIdで紐付け | 更新日時と名前を取得 |
| SELECT | acts全項目 | directorDbId = ユーザー && teamDbId = チーム | 実行履歴を取得 |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|----------|
| 空状態（Apps） | No apps yet. | アプリが0件の場合 |
| 空状態（Apps検索） | No apps found. | 検索結果が0件の場合 |
| 空状態（Playlist） | No playlists yet. | プレイリストが0件の場合 |
| 空状態（History） | No history yet. | 実行履歴が0件の場合 |
| 空状態（History検索） | No history found. | 履歴検索結果が0件の場合 |

## 例外処理

| 状態 | 処理 |
|------|------|
| stageV2Flag無効 | 404ページ（notFound）を表示 |
| agentデータ取得エラー | デフォルト値（Untitled、現在日時）を使用 |
| acts履歴取得エラー | デフォルト値を使用して表示 |

## 備考

- この画面はstageV2Flagによる機能フラグ制御下にあります
- プレイリスト機能は現在モックデータを使用しており、実際のDB保存は未実装です
- お気に入り機能も未実装です
- 実行履歴はactsテーブルから取得され、ワークスペース名はagentsテーブルから取得されます

---

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

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

### 推奨読解順序

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

サーバーコンポーネントで取得されるデータ構造を把握します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/page.tsx` | teamApps, teamHistory の構造 |
| 1-2 | showcase-client.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx` | App, Playlist インターフェース定義（行27-41） |

**読解のコツ**: teamAppsはチームIDをキーとしたアプリ配列のマップ、teamHistoryも同様の構造です。

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

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

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

**主要処理フロー**:
1. **行11-14**: stageV2Flagの確認と404処理
2. **行16-21**: ユーザーチーム一覧と実行可能アプリの取得
3. **行23-61**: チームごとにアプリをグループ化
4. **行66-114**: チームごとの実行履歴を取得
5. **行119-125**: ShowcaseClientコンポーネントにデータを渡す

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

UIとインタラクションの実装を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | showcase-client.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx` | タブ切り替え、検索、ソート、各タブのコンテンツ表示 |

**主要処理フロー**:
- **行79-93**: タブナビゲーション設定
- **行125-178**: 検索・ソートのuseMemo処理
- **行207-331**: Appsタブのコンテンツ表示
- **行334-487**: Playlistタブのコンテンツ表示
- **行489-585**: Historyタブのコンテンツ表示

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

```
page.tsx (Server Component)
    │
    ├─ stageV2Flag() - 機能フラグ確認
    │
    ├─ fetchUserTeams() - ユーザーのチーム一覧取得
    │
    ├─ fetchCurrentTeam() - 現在のチーム取得
    │
    ├─ fetchCurrentUser() - 現在ユーザー取得
    │
    ├─ fetchFlowTriggers() - 実行可能アプリ取得
    │      └─ flowTriggersテーブルから取得
    │
    ├─ db.select (agents) - 各アプリのagent情報取得
    │
    ├─ db.select (acts) - 実行履歴取得
    │
    └─ ShowcaseClient (Client Component)
           ├─ TabNavigation - タブUI
           ├─ SearchHeader - 検索・ソートUI
           ├─ Card - アプリ/履歴リスト
           └─ Dialog - プレイリスト作成
```

### データフロー図

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

flowTriggers テーブル ──────▶ fetchFlowTriggers() ───────────▶ teamApps
      │                              │                              │
agents テーブル ────────────▶ db.select() ─────────────────────▶│
      │                                                            │
acts テーブル ──────────────▶ db.select() ─────────────────────▶ teamHistory
                                    │                              │
                                    ▼                              ▼
searchQuery ────────────────▶ useMemo フィルタ ─────────────▶ filteredApps
sortOption ─────────────────▶ useMemo ソート ──────────────▶ sortedApps
                                    │                              │
                                    ▼                              ▼
                              Card コンポーネント ────────────▶ 画面表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/page.tsx` | ソース | サーバーコンポーネント、データ取得 |
| showcase-client.tsx | `apps/studio.giselles.ai/app/(main)/stage/showcase/showcase-client.tsx` | ソース | クライアントコンポーネント、UI表示 |
| services.ts | `apps/studio.giselles.ai/app/(main)/stage/(deprecated)/services.ts` | ソース | fetchFlowTriggers関数 |
| search-header.tsx | `apps/studio.giselles.ai/app/(main)/workspaces/components/search-header.tsx` | ソース | 検索・ソートUI共通コンポーネント |
| tab-navigation.tsx | `internal-packages/ui/src/tab-navigation/tab-navigation.tsx` | ソース | タブナビゲーションUI |
| flags.ts | `apps/studio.giselles.ai/flags.ts` | ソース | stageV2Flagの定義 |
