# 画面設計書 38-GitHub連携完了画面

## 概要

GitHub Appのインストールが完了した際に表示されるコールバック画面。ポップアップウィンドウとして開かれ、インストール完了を通知後に自動的にウィンドウを閉じる。

### 本画面の処理概要

**業務上の目的・背景**：GiselleではGitHub Appを使用してGitHubリポジトリへのアクセス権を取得する。GitHub Appのインストールが完了した後、ユーザーにフィードバックを提供し、親ウィンドウ（設定画面など）に処理完了を通知する必要がある。本画面は、その通知とウィンドウクローズを担当する。

**画面へのアクセス方法**：GitHub App インストールフロー完了後、GitHubからのリダイレクトで自動的にアクセスされる。URLは `/github/installed`。通常、ポップアップウィンドウとして表示される。

**主要な操作・処理内容**：
1. インストール完了メッセージの表示：「GitHub Installation Completed」というメッセージを表示
2. 親ウィンドウへの通知：`postMessage` を使用して親ウィンドウにインストール完了を通知
3. 自動ウィンドウクローズ：600ミリ秒後に自動的にウィンドウを閉じる

**画面遷移**：
- 前画面：GitHub App インストールページ
- 後処理：ウィンドウクローズ（親ウィンドウに制御が戻る）

**権限による表示制御**：
- GitHub App インストールコールバックとしてのみアクセス可能
- 認証状態に関わらず表示される

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 38 | Webhookハンドリング | 補助機能 | GitHub App連携完了時のコールバック処理 |

## 画面種別

コールバック

## URL/ルーティング

`/github/installed`

## 入出力項目

本画面にはフォーム入力はない。

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| タイトル | string | "GitHub Installation Completed" |
| サブテキスト | string | "This window will close automatically." |

## イベント仕様

### 1-ページロード時

ページがマウントされた際に自動的に処理を実行する。

1. `useEffect` フックでマウント時処理を開始
2. `window.opener` が存在し、閉じられていないことを確認
3. `postMessage` で親ウィンドウに `{ type: "github-app-installed", success: true }` を送信
4. 600ミリ秒後に `window.close()` を実行
5. コンポーネントがアンマウントされた場合、タイマーをクリアアップ

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

本画面ではデータベース更新は行わない。GitHub App インストールの結果はサーバーサイドのWebhookハンドラーで処理される。

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|---------|
| 情報 | GitHub Installation Completed | 常に表示 |
| 情報 | This window will close automatically. | 常に表示 |

### postMessage メッセージ

| メッセージタイプ | ペイロード | 送信先 |
|-----------------|----------|--------|
| github-app-installed | `{ type: "github-app-installed", success: true }` | 親ウィンドウ（任意のオリジン） |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| 親ウィンドウが存在しない | postMessage はスキップされるが、ウィンドウクローズは実行 |
| 親ウィンドウが閉じている | postMessage はスキップされるが、ウィンドウクローズは実行 |
| window.close が失敗 | 画面は表示されたままになる（ユーザーが手動で閉じる必要あり） |

## 備考

- Client Component として実装されている（"use client"）
- 接続完了画面（/connected）とほぼ同一の実装だが、表示メッセージが異なる
- postMessage のターゲットオリジンは "*"（任意のオリジン）に設定されている
- 親ウィンドウ側で "github-app-installed" メッセージを受信して画面を更新する

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `apps/studio.giselles.ai/app/github/installed/page.tsx` | Client Component としての実装 |

**主要処理フロー**:
1. **行6**: useEffect でマウント時の処理を定義
2. **行8-12**: window.opener への postMessage 送信
3. **行14-16**: 600ms 後のウィンドウクローズタイマー設定
4. **行19-21**: クリーンアップ関数でタイマー解除
5. **行24-28**: メッセージ表示UI

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

```
GitHubInstalledPage (page.tsx)
    │
    └─ useEffect (マウント時)
           ├─ window.opener.postMessage() ──────────────▶ 親ウィンドウに通知
           │
           └─ setTimeout() ─────────────────────────────▶ 600ms後
                  └─ window.close() ────────────────────▶ ウィンドウクローズ
```

### データフロー図

```
[トリガー]                      [処理]                              [出力]

GitHub App                      ┌─────────────────────┐
インストール完了 ───────────▶   │ リダイレクト         │ ─────────▶ /github/installed
                                └─────────────────────┘
                                        │
                                        ▼
                                ┌─────────────────────┐
                                │ useEffect           │
                                │ (マウント時)        │
                                └─────────────────────┘
                                        │
                        ┌───────────────┴───────────────┐
                        ▼                               ▼
                ┌───────────────┐               ┌───────────────┐
                │ postMessage   │               │ setTimeout    │
                │ → 親ウィンドウ│               │ → 600ms       │
                └───────────────┘               └───────────────┘
                        │                               │
                        ▼                               ▼
                ┌───────────────┐               ┌───────────────┐
                │ 親ウィンドウで│               │ window.close  │
                │ 画面リフレッシュ              └───────────────┘
                └───────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/github/installed/page.tsx` | ソース | ページコンポーネント |
