# 通知設計書 23-AIプロンプトコピー失敗

## 概要

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

### 本通知の処理概要

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

**業務上の目的・背景**：Liamアプリケーションでは、データベーススキーマ設計の結果をAIエージェントに渡すためのプロンプトを自動生成し、クリップボードにコピーする機能を提供している。クリップボードへの書き込みは、ブラウザのセキュリティポリシー、パーミッション拒否、メモリ不足など様々な理由で失敗する可能性がある。失敗時にユーザーへ明確なエラーフィードバックを提供することで、ユーザーが問題を認識し、代替手段（手動コピー、ブラウザ設定の確認など）を検討できるようにすることを目的とする。

**通知の送信タイミング**：SessionDetailPageのExportドロップダウンメニューから「Prompt for AI Agent」を選択し、`navigator.clipboard.writeText()`がPromise.rejectを返した（エラーが発生した）直後にトースト通知が表示される。

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

**通知内容の概要**：タイトル「Copy failed」と説明「Failed to copy AI prompt to clipboard: {エラーメッセージ}」がエラーステータスのトースト通知として表示される。説明にはエラーの詳細情報が動的に挿入される。

**期待されるアクション**：ユーザーは通知を確認後、エラー内容を確認し、ブラウザのクリップボードパーミッションを確認する、ページを再読み込みする、または手動でテキストを選択してコピーするなどの代替手段を検討することが期待される。

## 通知種別

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

## 送信仕様

### 基本情報

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

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

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

## 通知テンプレート

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

| 項目 | 内容 |
|-----|------|
| タイトル | Copy failed |
| 説明 | Failed to copy AI prompt to clipboard: {error.message} |
| ステータス | error |
| 表示位置 | header（画面上部） |

### 本文テンプレート

```
タイトル: Copy failed
説明: Failed to copy AI prompt to clipboard: {エラーメッセージ}
ステータス: error
```

### 添付ファイル

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

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| error.message | エラーメッセージ | clipboard.writeText()のエラーオブジェクト | Yes |

## 送信トリガー・条件

### トリガー一覧

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

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| クリップボード書き込み成功 | writeTextが成功した場合、成功通知（No.22）が表示される |
| artifactDocが未設定 | `!artifactDoc`の場合、handleCopyAIPromptは早期リターンし通知されない |

## 処理フロー

### 送信フロー

```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[エラーログをコンソール出力]
    I --> J[Copy failedトースト表示]
    H --> K[処理終了]
    J --> K
```

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

### 参照テーブル一覧

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

### 更新テーブル一覧

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

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| NotAllowedError | ユーザーがクリップボードパーミッションを拒否 | エラートースト表示、ユーザーにパーミッション確認を促す |
| SecurityError | セキュリティポリシー違反 | エラートースト表示 |
| DataError | 書き込みデータが大きすぎる | エラートースト表示 |
| その他のエラー | 予期しないエラー | エラートースト表示、コンソールにエラーログ出力 |

### リトライ仕様

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

## 配信設定

### レート制限

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

### 配信時間帯

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

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

- 本通知にはエラーメッセージが含まれるが、システムの機密情報は含まれない
- エラーメッセージはブラウザが提供する標準的なエラー情報のみ
- コンソールへのエラーログ出力はデバッグ目的であり、サーバーには送信されない

## 備考

- Radix UI Toastコンポーネントを使用して実装されている
- トースト通知は一定時間後に自動的に非表示となる（Radix UIのデフォルト動作）
- エラー情報は`console.error`でコンソールにも出力される
- `fromPromise`（neverthrowライブラリ）を使用してPromiseのエラーをResult型に変換している

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型とToastStatus型の定義を確認。statusが'error'となる |

**読解のコツ**: TypeScriptの型定義を確認し、トースト通知に必要なプロパティ（title, description, status）を理解する。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | handleCopyAIPrompt関数のエラーハンドリング部分 |

**主要処理フロー**:
1. **92-94行目**: `fromPromise(navigator.clipboard.writeText(prompt))` - クリップボード書き込み
2. **96行目**: `clipboardResult.match()` - 結果のパターンマッチング
3. **104-112行目**: 失敗時の処理
4. **105行目**: `console.error('Failed to copy AI prompt to clipboard:', error)` - コンソールログ出力
5. **106-110行目**: エラートースト表示

#### Step 3: エラーハンドリングパターンを理解する

fromPromiseによるエラーハンドリングパターンを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | neverthrowのfromPromise使用パターン |

**主要処理フロー**:
- **92-94行目**: fromPromiseでPromiseをResultに変換
- **96行目**: match()メソッドで成功/失敗を分岐
- **104行目**: 第2引数のコールバックでエラーをハンドリング

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

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

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

**主要処理フロー**:
- **30-35行目** (Toast.tsx): statusに応じたスタイリング適用（errorの場合styles.error）

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

```
ExportDropdown (app/SessionDetailPage)
    │
    └─ handleCopyAIPrompt()
           │
           ├─ artifactDoc存在チェック
           │      └─ 未存在 → 早期リターン
           │
           ├─ generateAIPrompt(artifactDoc, cumulativeOperations)
           │
           └─ navigator.clipboard.writeText(prompt)
                  │
                  └─ fromPromise()でResult型に変換
                         │
                         └─ match()
                                │
                                ├─ 成功 → toast({ title: 'AI Prompt copied!', status: 'success' })
                                │
                                └─ 失敗 → console.error()
                                           │
                                           └─ toast({ title: 'Copy failed', description: エラー詳細, status: 'error' })
```

### データフロー図

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

navigator.clipboard.writeText()
         │
         ▼
    Promise reject ───▶ fromPromise() ───▶ Err(Error)
                              │
                              ▼
                         match() 第2引数
                              │
                              ├─▶ console.error出力 ───▶ ブラウザコンソール
                              │
                              └─▶ useToastフック呼び出し ───▶ トースト通知表示
                                                              (Copy failed + エラー詳細)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| 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` | ソース | トースト関連の型定義 |
| neverthrow | `@liam-hq/neverthrow` | ライブラリ | fromPromise関数を提供するResult型ライブラリ |
