# 画面設計書 15-ロビー画面（V2）

## 概要

本ドキュメントは、Giselle Studio の「ロビー画面（V2）」に関する画面設計書である。新バージョンのロビー画面として、チュートリアル動画スペース、クイックアクション、テンプレートアプリを表示する画面を定義する。

### 本画面の処理概要

**業務上の目的・背景**：stageV2機能フラグにより制御される新バージョンのロビー画面。よりシンプルで直感的なレイアウトを提供し、ユーザーがすぐにエージェント作成やテンプレートアプリの利用を開始できるようにする。

**画面へのアクセス方法**：stageV2Flagが有効な場合、ルートパス（/）からアクセス可能。機能フラグが無効な場合は404エラーを返す。

**主要な操作・処理内容**：
1. チュートリアル動画の視聴（プレースホルダー）
2. クイックアクション（Create new agent、Try templates、Ask/Review anything）の選択
3. テンプレートアプリの閲覧
4. 新規ワークフロー作成

**画面遷移**：
- 遷移元：グローバルナビゲーション、ログイン後リダイレクト
- 遷移先：ワークスペース一覧画面（/workspaces）、（将来実装）各テンプレートアプリ

**権限による表示制御**：認証済みユーザーのみアクセス可能。さらにstageV2Flagが有効な場合のみ表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | ワークスペース作成 | 主機能 | チュートリアル、クイックアクションからの新規ワークスペース作成 |
| 61 | アプリ取得 | 補助機能 | テンプレートアプリの取得と表示 |

## 画面種別

ダッシュボード画面

## URL/ルーティング

`/` (ルートパス、(lobby)ルートグループ)

## 入出力項目

| 項目名 | 項目ID | 入出力 | 必須 | データ型 | 制約・バリデーション |
|--------|--------|--------|------|----------|---------------------|
| なし | - | - | - | - | この画面には入力項目なし |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| チュートリアル動画スペース | 動画表示用プレースホルダー | 固定UI |
| クイックアクション | 「where to start today?」セクション | 固定UI |
| テンプレートアプリ | 「Use Apps」セクション | 固定UI（プレースホルダー） |
| ワークフロー作成 | 「Create workflow」セクション | 固定UI |

## イベント仕様

### 1-Create new agent

**トリガー**: 「Create new agent」ボタンをクリック

**処理フロー**:
1. （現状は機能未実装、ボタンのみ表示）
2. 将来実装：新規ワークスペース作成処理

### 2-Try templates

**トリガー**: 「Try templates」ボタンをクリック

**処理フロー**:
1. （現状は機能未実装、ボタンのみ表示）
2. 将来実装：テンプレート一覧への遷移

### 3-Ask / Review anything

**トリガー**: 「Ask / Review anything」ボタンをクリック

**処理フロー**:
1. （現状は機能未実装、ボタンのみ表示）
2. 将来実装：Stage機能への遷移

### 4-ワークフロー作成

**トリガー**: 「+ create」リンクをクリック

**処理フロー**:
1. （現状は機能未実装、ボタンのみ表示）
2. 将来実装：新規ワークフロー作成画面への遷移

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | 現在の実装ではデータベース操作なし |

## メッセージ仕様

| 種別 | メッセージID | メッセージ内容 | 表示条件 |
|------|-------------|---------------|----------|
| ヘッダー | quick_action | where to start today? | 常時表示 |
| ヘッダー | use_apps | Use Apps | 常時表示 |
| ヘッダー | create_workflow | Create workflow | 常時表示 |
| プレースホルダー | tutorial_video | Tutorial video space | チュートリアル動画セクション |
| プレースホルダー | template_app | Template app | テンプレートアプリセクション |

## 例外処理

| 例外状況 | 処理内容 | ユーザーへの通知 |
|---------|---------|----------------|
| stageV2Flag無効 | notFound()を返す | 404ページを表示 |

## 備考

- この画面はstageV2Flag機能フラグにより制御される実験的なUIバージョン
- 現在の実装はプレースホルダーが中心で、実際の機能連携は今後実装予定
- チュートリアル動画、テンプレートアプリのコンテンツは固定プレースホルダー
- クイックアクションボタンはtype="button"で定義されており、現状ではonClick未実装

---

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

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

### 推奨読解順序

#### Step 1: 機能フラグを理解する

stageV2Flagの定義と評価方法を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | flags.ts | `apps/studio.giselles.ai/flags.ts` | stageV2Flag の定義と decide 関数 |

**読解のコツ**: 機能フラグは開発環境ではローカル環境変数、本番環境ではVercel Edge Configから値を取得する。

#### Step 2: ページコンポーネントを理解する

Server Componentとしてのページ構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `apps/studio.giselles.ai/app/(main)/(lobby)/page.tsx` | 機能フラグ判定（5-8行目）、UIレイアウト構造 |

**主要処理フロー**:
1. **5-6行目**: stageV2Flag()を呼び出し
2. **6-8行目**: フラグがfalseの場合notFound()を返す
3. **12-16行目**: チュートリアル動画プレースホルダー
4. **18-41行目**: クイックアクションセクション
5. **44-56行目**: テンプレートアプリセクション
6. **59-66行目**: ワークフロー作成セクション

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

```
page.tsx (Server Component)
    │
    ├─ stageV2Flag() ─── flags.ts
    │      └─ decide()
    │             ├─ development: takeLocalEnv()
    │             └─ production: get() from Edge Config
    │
    └─ JSXレンダリング（静的コンテンツ）
```

### データフロー図

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

リクエスト ─────────────▶ stageV2Flag() ──────────────▶ boolean
                             │
                    ┌────────┴────────┐
                    │                 │
                    ▼                 ▼
               true               false
                    │                 │
                    ▼                 ▼
            UIレンダリング      notFound()
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(main)/(lobby)/page.tsx` | ソース | ページエントリーポイント（Server Component） |
| flags.ts | `apps/studio.giselles.ai/flags.ts` | ソース | 機能フラグ定義 |
| layout.tsx | `apps/studio.giselles.ai/app/(main)/(lobby)/layout.tsx` | ソース | ルートグループレイアウト |
