# 画面設計書 14-ロビー画面

## 概要

本ドキュメントは、Giselle Studio の「ロビー画面」に関する画面設計書である。ダッシュボードとしてアプリ検索、機能紹介バナー、クイックアクション、アプリ・ワークフロー一覧を表示する画面を定義する。

### 本画面の処理概要

**業務上の目的・背景**：ユーザーがログイン後に最初に表示されるダッシュボード画面として、利用可能なアプリやワークフローへの素早いアクセスを提供する。また、新機能の紹介やチュートリアルを通じてユーザーのオンボーディングを支援する。

**画面へのアクセス方法**：ログイン後にリダイレクト、またはグローバルナビゲーションから「Lobby」を選択してアクセスする。

**主要な操作・処理内容**：
1. アプリ検索機能によるアプリの検索
2. 機能紹介バナーの表示
3. クイックアクション（Ask/Review、Create new agent）の選択
4. アプリタブとワークフロータブの切り替え
5. 各アプリ・ワークフローへの遷移

**画面遷移**：
- 遷移元：ログイン画面（/login）、メインナビゲーション
- 遷移先：ワークスペース一覧画面（/workspaces）、ワークフローエディタ画面（/workspaces/[workspaceId]）、ステージ画面（/stage）

**権限による表示制御**：認証済みユーザーのみアクセス可能。表示されるアプリ・ワークフローはユーザーが所属するチームに紐づく。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 2 | ワークスペース取得 | 主機能 | アプリ検索、ワークスペース一覧の取得と表示 |
| 61 | アプリ取得 | API連携 | アプリ一覧の非同期取得 |

## 画面種別

ダッシュボード画面

## URL/ルーティング

`/lobby`

## 入出力項目

| 項目名 | 項目ID | 入出力 | 必須 | データ型 | 制約・バリデーション |
|--------|--------|--------|------|----------|---------------------|
| アプリ検索キーワード | searchQuery | 入力 | 任意 | string | フリーテキスト |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| 機能紹介バナー | 新機能（Libraryなど）の紹介 | TextBannerコンポーネント（固定コンテンツ） |
| ユーザー名挨拶 | 「Hello, {username}」形式の挨拶 | getAccountInfo()から取得 |
| チュートリアルバナー | Stage機能や最新AIモデルの紹介 | TutorialVideoSectionコンポーネント |
| クイックアクションカード | Ask/Review、Create new agent | ActionCardコンポーネント |
| アプリタブコンテンツ | アプリ一覧（Recent/Featured） | 固定サンプルデータ（TODO: 実データ連携） |
| ワークフロータブコンテンツ | ワークフロー一覧（Recent/Featured） | 固定サンプルデータ（TODO: 実データ連携） |

## イベント仕様

### 1-アプリ検索

**トリガー**: 検索フィールドへの入力

**処理フロー**:
1. SearchInputコンポーネントでキーワードを入力
2. 現状は検索機能未実装（UIのみ）

### 2-クイックアクション: Ask/Review anything

**トリガー**: 「Ask / Review anything」カードをクリック

**処理フロー**:
1. handleAskReview関数を実行
2. /stage へルーター経由で遷移

### 3-クイックアクション: Create new agent

**トリガー**: 「Create new agent」カードをクリック

**処理フロー**:
1. handleCreateNewAgent関数を実行
2. POST /api/workspaces で新規ワークスペース作成
3. 成功時、返却されたredirectPathへ遷移
4. エラー時、コンソールにエラー出力

### 4-タブ切り替え（Use Apps / Create workflow）

**トリガー**: タブヘッダーをクリック

**処理フロー**:
1. activeTab ステートを更新（apps / workflow）
2. 対応するタブコンテンツを表示

### 5-サブタブ切り替え（Recent / Featured）

**トリガー**: サブタブをクリック

**処理フロー**:
1. activeAppTab または activeWorkflowTab ステートを更新
2. 対応するコンテンツを表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| Create new agent | workspaces | INSERT | 新規ワークスペース作成 |
| Create new agent | agents | INSERT | 新規エージェント作成 |

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

#### workspaces（POST /api/workspaces経由）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | id | 自動生成（WorkspaceId） | SDKで生成 |
| INSERT | teamDbId | 現在のチームのdbId | セッションから取得 |
| INSERT | name | デフォルト名 | 未指定の場合 |

## メッセージ仕様

| 種別 | メッセージID | メッセージ内容 | 表示条件 |
|------|-------------|---------------|----------|
| バナー | library_intro | Introducing Library: Bring your docs, code, and files to collaborate with Giselle and your team. | 常時表示 |
| エラー | create_failed | コンソールエラー出力 | ワークスペース作成失敗時 |

## 例外処理

| 例外状況 | 処理内容 | ユーザーへの通知 |
|---------|---------|----------------|
| ワークスペース作成失敗 | コンソールにエラー出力、作成中状態をリセット | なし（サイレント） |
| リダイレクトパス未取得 | エラーとしてスロー | なし |

## 備考

- 現在の実装では、アプリ一覧とワークフロー一覧はハードコードされたサンプルデータを表示している（TODO: Fetch from actual data source）
- hasRecentApps、hasRecentWorkflowsはfalse固定で、Recentサブタブは表示されない
- チュートリアルビデオセクションは複数のバナーをカルーセル形式で表示可能
- GreetingHeadingコンポーネントでユーザー名を表示

---

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

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

### 推奨読解順序

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

アカウント情報の取得方法を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | actions.ts | `apps/studio.giselles.ai/app/(main)/settings/account/actions.ts` | getAccountInfo関数の実装 |

**読解のコツ**: getAccountInfoはサーバーサイドでユーザー情報を取得し、displayNameやemailを返す。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `apps/studio.giselles.ai/app/(main)/lobby/page.tsx` | アカウント情報取得（7-8行目）、コンポーネント構成 |

**主要処理フロー**:
1. **7行目**: getAccountInfo()でアカウント情報取得
2. **8行目**: displayNameまたはemailからusernameを決定
3. **15-19行目**: TextBannerで機能紹介バナー表示
4. **30行目**: LobbyClientにusernameを渡す

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

インタラクティブなUI要素とイベントハンドリングを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | lobby-client.tsx | `apps/studio.giselles.ai/app/(main)/lobby/lobby-client.tsx` | ステート管理（19-27行目）、イベントハンドラ（51-74行目） |

**主要処理フロー**:
- **51-70行目**: handleCreateNewAgent関数でワークスペース作成
- **72-74行目**: handleAskReview関数で/stageへ遷移
- **141-155行目**: ActionCardによるクイックアクション表示
- **159-244行目**: タブ切り替えとコンテンツ表示

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

```
page.tsx (Server Component)
    │
    ├─ getAccountInfo() ─── settings/account/actions.ts
    │
    ├─ TextBanner ─── components/text-banner.tsx
    │
    └─ LobbyClient (Client Component) ─── lobby-client.tsx
           │
           ├─ GreetingHeading ─── greeting-heading.tsx
           │
           ├─ TutorialVideoSection ─── tutorial-video-section.tsx
           │
           ├─ ActionCard ─── action-card.tsx
           │      │
           │      ├─ handleCreateNewAgent()
           │      │      └─ POST /api/workspaces
           │      │
           │      └─ handleAskReview()
           │             └─ router.push("/stage")
           │
           ├─ SubTabs ─── sub-tabs.tsx
           │
           ├─ AppCard ─── app-card.tsx
           │
           └─ WorkflowCard ─── workflow-card.tsx
```

### データフロー図

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

セッション情報 ───────▶ getAccountInfo() ────────────▶ username
                             │
                             ▼
                       LobbyClient props ────────────▶ UI表示
                             │
                             ▼
Create new agent ─────▶ POST /api/workspaces ────────▶ redirectPath
クリック                      │
                             ▼
                       router.push() ────────────────▶ /workspaces/{id}
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(main)/lobby/page.tsx` | ソース | ページエントリーポイント（Server Component） |
| lobby-client.tsx | `apps/studio.giselles.ai/app/(main)/lobby/lobby-client.tsx` | ソース | メインクライアントコンポーネント |
| text-banner.tsx | `apps/studio.giselles.ai/app/(main)/lobby/components/text-banner.tsx` | ソース | 機能紹介バナー |
| tutorial-video-section.tsx | `apps/studio.giselles.ai/app/(main)/lobby/components/tutorial-video-section.tsx` | ソース | チュートリアルバナーセクション |
| action-card.tsx | `apps/studio.giselles.ai/app/(main)/lobby/components/action-card.tsx` | ソース | クイックアクションカード |
| sub-tabs.tsx | `apps/studio.giselles.ai/app/(main)/lobby/components/sub-tabs.tsx` | ソース | サブタブUI |
| app-card.tsx | `apps/studio.giselles.ai/app/(main)/lobby/components/app-card.tsx` | ソース | アプリカード |
| workflow-card.tsx | `apps/studio.giselles.ai/app/(main)/lobby/components/workflow-card.tsx` | ソース | ワークフローカード |
| greeting-heading.tsx | `apps/studio.giselles.ai/app/(main)/lobby/greeting-heading.tsx` | ソース | 挨拶ヘッディング |
