# 通知設計書 22-AIプロンプトコピー成功

## 概要

本ドキュメントは、LiamプロジェクトにおけるAIプロンプトコピー成功通知（UI通知・トースト）の設計仕様を定義する。

### 本通知の処理概要

AIエージェント向けのプロンプトをクリップボードにコピーする操作が成功した際に、ユーザーへ成功状態を視覚的にフィードバックするUI通知（トースト）を表示する機能である。

**業務上の目的・背景**：Liamアプリケーションでは、データベーススキーマ設計の結果をAIエージェント（Claude、ChatGPT等）に渡すためのプロンプトを自動生成する機能を提供している。このプロンプトには要件分析結果、SQLスキーママイグレーション、実装ガイダンスが含まれており、ユーザーがワンクリックでAIに渡せる形式でコピーできる。コピー成功時に視覚的なフィードバックを提供することで、ユーザーが確実に操作完了を認識でき、次のアクション（AIへの貼り付け）にスムーズに移行できる。

**通知の送信タイミング**：SessionDetailPageのExportドロップダウンメニューから「Prompt for AI Agent」を選択し、`navigator.clipboard.writeText()`によるクリップボードへの書き込みが成功した直後にトースト通知が表示される。

**通知の受信者**：コピー操作を実行したユーザー本人がブラウザ上で直接通知を受け取る。サーバーへの送信や他ユーザーへの通知は行われない。

**通知内容の概要**：タイトル「AI Prompt copied!」と説明「AI prompt has been copied to clipboard」が成功ステータスのトースト通知として表示される。

**期待されるアクション**：ユーザーは通知を確認後、コピーされたプロンプトをAIチャットインターフェース（Claude、ChatGPT等）に貼り付けて、データベース実装に関する指示を与えることが期待される。

## 通知種別

UI通知（トースト） - アプリ内通知

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（即時表示） |
| 優先度 | 中 |
| リトライ | なし |

### 送信先決定ロジック

コピー操作を実行したユーザーのブラウザ上に直接表示される。ユーザー認証状態やロールに関係なく、操作者本人にのみ通知される。

## 通知テンプレート

### UI通知（トースト）の場合

| 項目 | 内容 |
|-----|------|
| タイトル | AI Prompt copied! |
| 説明 | AI prompt has been copied to clipboard |
| ステータス | success |
| 表示位置 | header（画面上部） |

### 本文テンプレート

```
タイトル: AI Prompt copied!
説明: AI prompt has been copied to clipboard
ステータス: success
```

### 添付ファイル

該当なし（UI通知のため添付ファイルは存在しない）

## テンプレート変数

該当なし（固定メッセージのため変数は使用しない）

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | ExportドロップダウンでPrompt for AI Agent選択 | `navigator.clipboard.writeText()`成功 | AIプロンプトのクリップボードコピー成功時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| artifactDocが未設定 | `!artifactDoc`の場合、handleCopyAIPromptは早期リターンし通知されない |
| クリップボード書き込み失敗 | writeTextがエラーを返した場合、失敗通知（No.23）が表示される |
| ドロップダウンが無効 | `disabled`プロパティがtrueの場合、メニュー自体が開かない |
| cumulativeOperationsが空 | 操作履歴がない場合、メニュー項目自体が表示されない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがPrompt for AI Agent選択] --> B{artifactDoc存在?}
    B -->|No| C[処理終了]
    B -->|Yes| D[generateAIPrompt実行]
    D --> E[プロンプト文字列生成]
    E --> F[navigator.clipboard.writeText呼び出し]
    F --> G{書き込み結果}
    G -->|成功| H[AI Prompt copied!トースト表示]
    G -->|失敗| I[Copy failedトースト表示]
    H --> J[処理終了]
    I --> J
```

## データベース参照・更新仕様

### 参照テーブル一覧

該当なし（UI通知のためデータベースアクセスは発生しない）

### 更新テーブル一覧

該当なし（UI通知のためデータベース更新は発生しない）

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| クリップボード書き込み失敗 | writeTextがPromise.rejectを返した場合 | No.23「AIプロンプトコピー失敗」通知を表示 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0回（リトライなし） |
| リトライ間隔 | 該当なし |
| リトライ対象エラー | 該当なし |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

制限なし（ユーザー操作に応じて即時表示）

## セキュリティ考慮事項

- 本通知は個人情報を含まない固定メッセージである
- コピーされるプロンプトにはデータベーススキーマ設計情報が含まれるが、通知自体には機密情報は含まれない
- クリップボードへの書き込みはセキュアコンテキスト（HTTPS）環境で行われる

## 備考

- Radix UI Toastコンポーネントを使用して実装されている
- トースト通知は一定時間後に自動的に非表示となる（Radix UIのデフォルト動作）
- generateAIPrompt関数で生成されるプロンプトには、artifactDoc（要件分析結果）とcumulativeOperations（DDLマイグレーション）が含まれる
- メニュー項目「Prompt for AI Agent」はartifactDocとcumulativeOperationsの両方が存在する場合のみ表示される

---

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

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

### 推奨読解順序

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

まず、トースト通知で使用されるデータ構造とプロンプト生成に関わる型を理解することが重要である。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型とToastStatus型の定義を確認。statusが'success'となる |
| 1-2 | ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | Props型（schema, artifactDoc, cumulativeOperations）を確認 |

**読解のコツ**: TypeScriptの型定義を確認し、コンポーネントが受け取るプロパティとトースト通知に必要なプロパティを理解する。

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

処理の起点となるExportDropdownコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | handleCopyAIPrompt関数の実装 |

**主要処理フロー**:
1. **88行目**: handleCopyAIPrompt関数の定義開始
2. **89行目**: `if (!artifactDoc) return` - artifactDocの存在チェック
3. **91行目**: `generateAIPrompt(artifactDoc, cumulativeOperations)` - プロンプト生成
4. **92-94行目**: `fromPromise(navigator.clipboard.writeText(prompt))` - クリップボード書き込み
5. **96-103行目**: 成功時のトースト表示（title: 'AI Prompt copied!'）

#### Step 3: プロンプト生成ロジックを理解する

generateAIPrompt関数によるプロンプト生成ロジックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | generateAIPrompt関数（46-68行目） |

**主要処理フロー**:
- **46-48行目**: 関数シグネチャ - artifactDocとcumulativeOperationsを受け取る
- **50-51行目**: `generateCumulativeDDL(cumulativeOperations)` - DDL生成
- **53-67行目**: プロンプトテンプレートの構築（Markdown形式）

#### Step 4: DDL生成ロジックを理解する

generateCumulativeDDL関数によるDDL生成ロジックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | generateCumulativeDDL関数（33-44行目） |

**主要処理フロー**:
- **33行目**: 関数定義 - MigrationOperation配列を受け取る
- **36-41行目**: 各operationをpostgresqlMigrationOperationDeparserで変換
- **43行目**: DDL文を改行2つで結合

#### Step 5: トースト表示システムを理解する

トースト通知の表示メカニズムを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | useToastフックの実装 |
| 5-2 | Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | Radix UIを使用したトースト表示コンポーネント |

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

```
ExportDropdown (app/SessionDetailPage)
    │
    └─ handleCopyAIPrompt()
           │
           ├─ artifactDoc存在チェック
           │      └─ 未存在 → 早期リターン
           │
           ├─ generateAIPrompt(artifactDoc, cumulativeOperations)
           │      │
           │      └─ generateCumulativeDDL(cumulativeOperations)
           │             │
           │             └─ postgresqlMigrationOperationDeparser(operation)
           │
           └─ navigator.clipboard.writeText(prompt)
                  │
                  ├─ 成功 → toast({ title: 'AI Prompt copied!', status: 'success' })
                  │
                  └─ 失敗 → toast({ title: 'Copy failed', status: 'error' })
```

### データフロー図

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

artifactDoc ─────────┐
                     ├──▶ generateAIPrompt() ───▶ プロンプト文字列
cumulativeOperations ┘           │
                                 ▼
                     postgresqlMigrationOperationDeparser()
                                 │
                                 ▼
                     navigator.clipboard.writeText()
                                 │
                                 ▼
                     useToastフック呼び出し ───▶ トースト通知表示
                                                (AI Prompt copied!)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | ソース | AIプロンプトコピー機能のUIとロジック |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トースト表示フック |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト表示コンポーネント |
| types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ソース | トースト関連の型定義 |
| schema.ts | `frontend/packages/schema` | ソース | postgresqlMigrationOperationDeparser関数を提供 |
