# 画面設計書 15-公開デザインセッション詳細画面

## 概要

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

### 本画面の処理概要

この画面では、公開共有されたデザインセッションを閲覧できる。認証不要でアクセス可能な読み取り専用の画面である。

**業務上の目的・背景**：
データベース設計のレビューや共有を促進するため、セッションを外部に公開できる機能が必要である。この画面により、チームメンバーや関係者が認証なしでセッションの設計結果を閲覧できる。ER図や分析結果を共有することで、設計のフィードバック収集やドキュメント化を効率化する。

**画面へのアクセス方法**：
- 公開URLを直接入力してアクセス
- 公開共有リンクをクリック
- URLパターンは `/public/design_sessions/:id`
- 検索エンジンにはインデックスされない（noindex設定）

**主要な操作・処理内容**：
1. 公開セッションの閲覧（チャット履歴は非表示）
2. スキーマのER図表示
3. スキーマ差分の確認
4. バージョン一覧の閲覧

**画面遷移**：
- 遷移元: 外部リンク、デザインセッション詳細画面からの共有
- 遷移先: なし（読み取り専用）

**権限による表示制御**：
認証不要でアクセス可能。ただし、public_share_settingsに該当セッションのレコードが存在する場合のみ表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 29 | デザインセッション | 主機能 | 公開共有されたデザインセッションの閲覧 |
| 32 | 共有機能 | 主機能 | 公開共有設定の確認と表示 |
| 1 | ER図表示 | 補助機能 | 公開セッションのスキーマをER図として表示 |
| 6 | スキーマ差分表示 | 補助機能 | スキーマの変更差分を視覚的に表示 |
| 39 | Supabaseクライアント | API連携 | 公開クライアントを使用した匿名アクセス |

## 画面種別

詳細 / ビューア（読み取り専用）

## URL/ルーティング

```
/public/design_sessions/:id
```

動的パラメータ:
- `id`: デザインセッションの一意識別子

## 入出力項目

### 入力項目

| 項目名 | 型 | 必須 | 説明 |
|--------|-----|------|------|
| id | string | Yes | URLパラメータ - デザインセッションID |

### 出力項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| initialSchema | Schema | 現在のスキーマ |
| baselineSchema | Schema | 初期スキーマスナップショット |
| versions | Version[] | バージョン一覧 |
| analyzedRequirements | AnalyzedRequirements | 分析された要件情報 |

## 表示項目

### 出力パネル

#### ERDタブ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| schema | Schema | 表示中のスキーマ |
| baselineSchema | Schema | 比較用ベースラインスキーマ |
| versions | Version[] | バージョン一覧 |

#### Artifactタブ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| analyzedRequirements | AnalyzedRequirements | 分析結果 |

### バージョン情報

| 項目名 | 型 | 説明 |
|--------|-----|------|
| id | string | バージョンID |
| number | number | バージョン番号 |
| created_at | string | 作成日時 |

## イベント仕様

### 1-バージョン選択

バージョン一覧から特定のバージョンを選択する（閲覧のみ）。

**処理フロー**:
1. バージョン選択UIを操作
2. 該当バージョンのスキーマを表示
3. ER図を更新

### 2-タブ切り替え

ERDタブとArtifactタブを切り替える。

**処理フロー**:
1. タブをクリック
2. 対応するコンテンツを表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | public_share_settings | SELECT | 公開設定の存在確認 |
| 画面表示 | design_sessions | SELECT | セッション情報取得 |
| 画面表示 | building_schemas | SELECT | スキーマ情報取得 |
| 画面表示 | building_schema_versions | SELECT | バージョン一覧取得 |

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

#### public_share_settings（取得）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | design_session_id | セッションID | 公開設定の存在確認用 |

取得条件:
- `design_session_id = :designSessionId`

#### design_sessions（取得）

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

取得条件:
- `id = :designSessionId`

#### building_schemas（取得）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | id | ビルディングスキーマID | - |
| SELECT | design_session_id | セッションID | - |
| SELECT | organization_id | 組織ID | - |
| SELECT | schema | 現在のスキーマ | - |
| SELECT | initial_schema_snapshot | 初期スキーマ | - |

取得条件:
- `design_session_id = :designSessionId`

#### building_schema_versions（取得）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | id | バージョンID | - |
| SELECT | building_schema_id | スキーマID | - |
| SELECT | number | バージョン番号 | - |
| SELECT | created_at | 作成日時 | - |
| SELECT | patch | 変更パッチ | - |
| SELECT | reverse_patch | 逆パッチ | - |

取得条件:
- `building_schema_id = :buildingSchemaId`
- `ORDER BY number DESC`

## メッセージ仕様

| メッセージID | 種別 | メッセージ | 表示条件 |
|------------|------|-----------|---------|
| - | - | - | 読み取り専用のため特記メッセージなし |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| パラメータバリデーションエラー | notFound()を呼び出し、404ページを表示 |
| 公開設定が存在しない | notFound()を呼び出し |
| セッション情報取得失敗 | notFound()を呼び出し |
| ビルディングスキーマ未発見 | notFound()を呼び出し |
| バージョン一覧が空 | notFound()を呼び出し |
| スキーマフォーマット不正 | notFound()を呼び出し |

## 備考

- サーバーコンポーネントとして実装
- `createPublicServerClient`で匿名アクセス用Supabaseクライアントを使用
- メタデータにnoindex設定（`robots: 'noindex, nofollow, noarchive'`）
- キャッシュ設定: 60秒でrevalidate（`revalidate = 60`）
- ViewModeProviderで'public'モードを設定
- チャット履歴（messages）は空配列として渡される（閲覧不可）
- PublicLayoutでラップされる
- デフォルトパネルサイズはDEFAULT_PANEL_SIZESを使用

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/apps/app/components/SessionDetailPage/types.ts` | Version型の定義 |

**読解のコツ**: 公開画面でもVersion型やSchema型は同じ構造を使用。ただしinitialMessagesは空配列。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `frontend/apps/app/app/public/design_sessions/[id]/page.tsx` | メタデータ設定とPublicSessionDetailPage呼び出し |

**主要処理フロー**:
1. **行6-8**: paramsSchemaでidをバリデーション
2. **行11-13**: metadataにnoindex設定
3. **行16**: revalidate = 60でキャッシュ設定
4. **行18-26**: パラメータ検証とPublicSessionDetailPage呼び出し

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | PublicSessionDetailPage.tsx | `frontend/apps/app/components/PublicSessionDetailPage/PublicSessionDetailPage.tsx` | 公開セッション表示ロジック |

**主要処理フロー**:
- **行23**: createPublicServerClientで匿名クライアント作成
- **行26-33**: public_share_settingsで公開設定確認、なければnotFound
- **行36-45**: design_sessionsからセッション情報取得
- **行48-62**: building_schemasからスキーマ取得
- **行66-74**: building_schema_versionsからバージョン取得
- **行77-80**: スキーマのバリデーション
- **行89-96**: ベースラインスキーマのバリデーション
- **行100-107**: getAnalyzedRequirementsで分析結果取得
- **行109-142**: PublicLayout + ViewModeProvider + SessionDetailPageClientでレンダリング
- **行115**: initialMessages = [] で空配列を渡す
- **行137**: initialIsPublic = true を固定

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

```
page.tsx (エントリーポイント)
    │
    └─ PublicSessionDetailPage.tsx
           │
           ├─ createPublicServerClient()
           │      └─ 匿名Supabaseクライアント
           │
           ├─ Supabase SELECT (public_share_settings)
           │      └─ 公開設定確認
           │
           ├─ Supabase SELECT (design_sessions)
           │      └─ セッション情報取得
           │
           ├─ Supabase SELECT (building_schemas)
           │      └─ スキーマ取得
           │
           ├─ Supabase SELECT (building_schema_versions)
           │      └─ バージョン一覧取得
           │
           ├─ getAnalyzedRequirements() (@liam-hq/agent)
           │      └─ 分析結果取得
           │
           └─ PublicLayout
                  └─ ViewModeProvider (mode="public")
                         └─ SessionDetailPageClient
                                └─ 読み取り専用UI
```

### データフロー図

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

URLパラメータ ───▶ page.tsx ───────────────▶ PublicSessionDetailPage
(id)               (バリデーション,
                    メタデータ設定)

セッションID ────▶ public_share_settings ──▶ 存在確認
                   (SELECT)                   └─ なければ404

セッションID ────▶ design_sessions ─────────▶ セッション情報
                   (SELECT)

セッションID ────▶ building_schemas ────────▶ スキーマ情報
                   (SELECT)

スキーマID ──────▶ building_schema_versions ▶ バージョン一覧
                   (SELECT)

コンフィグ ──────▶ getAnalyzedRequirements ─▶ 分析結果

全データ ────────▶ SessionDetailPageClient ─▶ 読み取り専用UI
                   (public mode)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `frontend/apps/app/app/public/design_sessions/[id]/page.tsx` | ソース | ページエントリーポイント |
| PublicSessionDetailPage.tsx | `frontend/apps/app/components/PublicSessionDetailPage/PublicSessionDetailPage.tsx` | ソース | 公開セッション表示コンポーネント |
| SessionDetailPageClient.tsx | `frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx` | ソース | 共通クライアントコンポーネント |
| PublicLayout.tsx | `frontend/apps/app/components/PublicLayout/PublicLayout.tsx` | ソース | 公開ページ用レイアウト |
| ViewModeContext.tsx | `frontend/apps/app/components/SessionDetailPage/contexts/ViewModeContext.tsx` | ソース | 表示モードコンテキスト |
| server.ts | `frontend/apps/app/libs/db/server.ts` | ソース | createPublicServerClient関数 |
| constants.ts | `frontend/apps/app/components/SessionDetailPage/constants.ts` | ソース | DEFAULT_PANEL_SIZES定義 |
