# 画面設計書 13-デザインセッション新規作成画面

## 概要

本ドキュメントは、Liam DBアプリケーションにおけるデザインセッション新規作成画面の設計仕様を定義する。

### 本画面の処理概要

この画面では、AIを活用したデータベース設計セッションを新規に作成できる。最近使用したセッションの一覧も表示され、継続作業が容易になる。

**業務上の目的・背景**：
データベース設計作業を効率化するため、AIエージェントとの対話型設計セッションを開始する入口となる画面である。ユーザーは複数の方法（ゼロから作成、GitHubリポジトリ連携、ファイルアップロード、URL指定、ペースト入力）からセッションを開始できる。これにより、既存スキーマの改善や新規データベース設計を柔軟に行える。

**画面へのアクセス方法**：
- ルート画面（`/`）から認証済みの場合に自動リダイレクト
- ログイン成功後の遷移先
- グローバルナビゲーションの「New Session」リンクから直接アクセス
- URLパターンは `/design_sessions/new`

**主要な操作・処理内容**：
1. セッションモードの選択（scratch / github / upload / url / paste）
2. 各モードに応じた入力フォームの表示と入力
3. 新規デザインセッションの作成と遷移
4. 最近のセッション一覧の表示と選択

**画面遷移**：
- 遷移元: ルート画面（`/`）、ログイン画面（`/login`）、各種画面のナビゲーション
- 遷移先: デザインセッション詳細画面（`/design_sessions/:id`）

**権限による表示制御**：
認証済みユーザーのみアクセス可能。未認証の場合はログイン画面へリダイレクトされる。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 29 | デザインセッション | 主機能 | AIを活用したデータベース設計セッションを新規作成 |
| 27 | プロジェクト管理 | 補助機能 | 関連プロジェクト一覧の取得と選択 |
| 26 | 組織管理 | 補助機能 | 組織IDの取得と認証確認 |
| 39 | Supabaseクライアント | API連携 | 最近のセッション一覧の取得 |

## 画面種別

登録 / ホーム

## URL/ルーティング

```
/design_sessions/new
```

## 入出力項目

### 入力項目

| 項目名 | 型 | 必須 | 説明 |
|--------|-----|------|------|
| セッションモード | enum | Yes | scratch / github / upload / url / paste から選択 |
| プロジェクト選択 | string | No | GitHubモード時の関連プロジェクト選択 |
| スキーマファイル | File | No | uploadモード時のファイル |
| スキーマURL | string | No | urlモード時のURL |
| スキーマ内容 | string | No | pasteモード時のテキスト |

### 出力項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| projects | Projects | セッション作成フォーム用のプロジェクト一覧 |
| recentSessions | Session[] | 最近使用したセッション一覧 |

## 表示項目

### メインヘッダー

| 項目名 | 型 | 説明 |
|--------|-----|------|
| title | string | "How can I help you with Database Design?" |

### セッションモードセレクター

| 項目名 | 型 | 説明 |
|--------|-----|------|
| scratch | tab | ゼロからセッション開始 |
| github | tab | GitHubリポジトリ連携 |
| upload | tab | ファイルアップロード |
| url | tab | URL指定 |
| paste | tab | テキストペースト |

### 最近のセッション一覧

| 項目名 | 型 | 説明 |
|--------|-----|------|
| id | string | セッションID |
| name | string | セッション名 |
| created_at | string | 作成日時 |

## イベント仕様

### 1-セッション作成モード選択

ユーザーがセッションモードセレクターをクリックすると、対応するフォームが表示される。

**処理フロー**:
1. `handleModeChange`関数がトリガー
2. 150msのフェードアウトアニメーション
3. モード状態の更新
4. 300msの高さトランジション
5. フェードイン完了

### 2-Scratchモードでセッション作成

ゼロから新しいセッションを開始する。

**処理フロー**:
1. ScratchSessionFormを表示
2. ユーザー入力を受付
3. Server Actionでセッション作成
4. デザインセッション詳細画面へ遷移

### 3-GitHubモードでセッション作成

GitHubリポジトリのスキーマを基にセッションを開始する。

**処理フロー**:
1. GitHubSessionFormを表示
2. プロジェクト一覧から選択
3. スキーマファイルを選択
4. Server Actionでセッション作成
5. デザインセッション詳細画面へ遷移

### 4-最近のセッション選択

最近使用したセッションを選択して詳細画面へ遷移する。

**遷移先**: `/design_sessions/:id`

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | projects | SELECT | プロジェクト一覧を取得 |
| 画面表示 | design_sessions | SELECT | 最近のセッション一覧を取得 |
| セッション作成 | design_sessions | INSERT | 新規セッションレコード作成 |
| セッション作成 | building_schemas | INSERT | 初期スキーマレコード作成 |

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

#### design_sessions（取得）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | id | セッションID | - |
| SELECT | name | セッション名 | - |
| SELECT | created_at | 作成日時 | 降順でソート |

取得条件:
- 組織IDに紐づくセッション
- `ORDER BY created_at DESC`
- `LIMIT`あり（設定による）

## メッセージ仕様

| メッセージID | 種別 | メッセージ | 表示条件 |
|------------|------|-----------|---------|
| MSG-001 | 情報 | How can I help you with Database Design? | 常時表示（タイトル） |
| MSG-002 | 情報 | Recent Sessions | 最近のセッションがある場合 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 組織ID取得失敗 | ログイン画面へリダイレクト（エラーログ出力） |
| プロジェクト取得失敗 | 空の配列として処理 |
| 最近のセッション取得失敗 | セクション非表示 |

## 備考

- サーバーコンポーネントとクライアントコンポーネントのハイブリッド実装
- RecentSessionsSectionはSuspenseで遅延ロード
- セッションモード切り替えはアクセシビリティに配慮（`prefers-reduced-motion`対応）
- メインアプリケーション画面として位置づけられている

---

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

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

### 推奨読解順序

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

まず、プログラム間で受け渡されるデータ構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | getProjects.ts | `frontend/apps/app/components/CommonLayout/AppBar/ProjectsDropdownMenu/services/getProjects.ts` | Projects型とプロジェクト取得ロジック |

**読解のコツ**: Projectsはid, name等を持つプロジェクトの配列。組織IDでフィルタリングされる。

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

処理の起点となるファイル・関数を特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `frontend/apps/app/app/design_sessions/new/page.tsx` | シンプルなページエントリーポイント |

**主要処理フロー**:
1. **行1**: SessionsNewPageコンポーネントのインポート
2. **行3-5**: SessionsNewPageをレンダリング

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | SessionsNewPage.tsx | `frontend/apps/app/components/SessionsNewPage/SessionsNewPage.tsx` | メイン画面コンポーネント |

**主要処理フロー**:
- **行14-18**: getOrganizationIdで組織ID取得、失敗時はログイン画面へリダイレクト
- **行20-22**: getProjectsでプロジェクト一覧取得
- **行24-38**: UIレンダリング
  - タイトル表示
  - SessionFormContainer（セッション作成フォーム）
  - RecentSessionsSection（Suspenseでラップ）

#### Step 4: セッションフォームコンテナを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | SessionFormContainer.tsx | `frontend/apps/app/features/sessions/components/SessionFormContainer/SessionFormContainer.tsx` | セッション作成モードの切り替えロジック |

**主要処理フロー**:
- **行27**: 初期モードは'scratch'
- **行34-60**: handleModeChange - アニメーション付きモード切り替え
- **行63-107**: useEffect - 高さアニメーション制御
- **行124-176**: 各モードのフォームコンポーネントを条件付きレンダリング

#### Step 5: 最近のセッション表示を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | RecentSessionsSection.tsx | `frontend/apps/app/components/SessionsNewPage/RecentSessionsSection/RecentSessionsSection.tsx` | 最近のセッション一覧表示 |

**主要処理フロー**:
- **行12**: fetchRecentSessionsで最近のセッション取得
- **行14**: セッションが0件の場合はnullを返却（非表示）
- **行16-25**: セッション一覧のレンダリング

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

```
page.tsx (エントリーポイント)
    │
    └─ SessionsNewPage.tsx
           │
           ├─ getOrganizationId() (組織ID取得)
           │
           ├─ getProjects() (プロジェクト一覧取得)
           │
           ├─ SessionFormContainer.tsx (セッション作成フォーム)
           │      ├─ SessionModeSelector (モード選択UI)
           │      ├─ ScratchSessionForm
           │      ├─ GitHubSessionForm
           │      ├─ UploadSessionForm
           │      ├─ UrlSessionForm
           │      └─ PasteSessionForm
           │
           └─ RecentSessionsSection.tsx (Suspense)
                  └─ fetchRecentSessions()
                         └─ Supabase Client (design_sessions SELECT)
```

### データフロー図

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

認証情報 ─────────▶ getOrganizationId ─────▶ organizationId / redirect
                   (認証チェック)

組織ID ───────────▶ getProjects ────────────▶ projects[]
                   (プロジェクト取得)

組織ID ───────────▶ fetchRecentSessions ───▶ recentSessions[]
                   (最近のセッション取得)

プロジェクト一覧 ─▶ SessionFormContainer ──▶ UI表示
                   (フォーム表示)

最近のセッション ─▶ RecentSessionsSection ─▶ UI表示
                   (一覧表示)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `frontend/apps/app/app/design_sessions/new/page.tsx` | ソース | ページエントリーポイント |
| SessionsNewPage.tsx | `frontend/apps/app/components/SessionsNewPage/SessionsNewPage.tsx` | ソース | メイン画面コンポーネント |
| SessionFormContainer.tsx | `frontend/apps/app/features/sessions/components/SessionFormContainer/SessionFormContainer.tsx` | ソース | セッション作成フォームコンテナ |
| RecentSessionsSection.tsx | `frontend/apps/app/components/SessionsNewPage/RecentSessionsSection/RecentSessionsSection.tsx` | ソース | 最近のセッション表示 |
| ScratchSessionForm.tsx | `frontend/apps/app/features/sessions/components/ScratchSessionForm/ScratchSessionForm.tsx` | ソース | ゼロから作成フォーム |
| GitHubSessionForm.tsx | `frontend/apps/app/features/sessions/components/GitHubSessionForm/GitHubSessionForm.tsx` | ソース | GitHub連携フォーム |
| UploadSessionForm.tsx | `frontend/apps/app/features/sessions/components/UploadSessionForm/UploadSessionForm.tsx` | ソース | ファイルアップロードフォーム |
| UrlSessionForm.tsx | `frontend/apps/app/features/sessions/components/UrlSessionForm/UrlSessionForm.tsx` | ソース | URL指定フォーム |
| PasteSessionForm.tsx | `frontend/apps/app/features/sessions/components/PasteSessionForm/PasteSessionForm.tsx` | ソース | ペースト入力フォーム |
| SessionsNewPage.module.css | `frontend/apps/app/components/SessionsNewPage/SessionsNewPage.module.css` | スタイル | 画面スタイル定義 |
| fetchRecentSessions.ts | `frontend/apps/app/components/CommonLayout/GlobalNav/RecentsSection/fetchRecentSessions.ts` | ソース | 最近のセッション取得 |
| getOrganizationId.ts | `frontend/apps/app/features/organizations/services/getOrganizationId.ts` | ソース | 組織ID取得サービス |
