# 通知設計書 24-Provider connected

## 概要

本ドキュメントは、OpenCodeアプリケーションにおける「Provider connected」トースト通知の設計を定義する。

### 本通知の処理概要

この通知は、AIプロバイダー（Anthropic、OpenAI、Google等）の接続に成功した場合にユーザーに表示される成功通知である。

**業務上の目的・背景**：OpenCodeはマルチプロバイダー対応のAI開発環境であり、ユーザーは複数のAIプロバイダーを接続してモデルを利用できる。プロバイダー接続は重要な設定操作であり、成功時にフィードバックを提供することで、ユーザーは接続が正常に完了したことを確認でき、モデルが利用可能になったことを認識できる。

**通知の送信タイミング**：プロバイダー接続ダイアログでAPIキー認証またはOAuth認証が成功し、サーバー側でプロバイダー情報が更新された直後に表示される。具体的には、`globalSDK.client.auth.set`または`provider.oauth.callback`の成功後、`globalSDK.client.global.dispose`によるリフレッシュ完了時にトリガーされる。

**通知の受信者**：プロバイダー接続操作を実行したユーザー本人。

**通知内容の概要**：接続したプロバイダー名を含む成功メッセージと、そのプロバイダーのモデルが利用可能になったことを伝える説明文が表示される。成功を示すチェックアイコン付き。

**期待されるアクション**：ユーザーは通知を確認し、新しく接続されたプロバイダーのモデルを使用開始できる。接続ダイアログは自動的に閉じられる。

## 通知種別

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

## 送信仕様

### 基本情報

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

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

現在アクティブなアプリケーションウィンドウ内でトースト通知として表示。プロバイダー接続操作を実行したユーザーに対してのみ表示。

## 通知テンプレート

### トースト通知

| 項目 | 内容 |
|-----|------|
| タイトル | `provider.connect.toast.connected.title` |
| 説明 | `provider.connect.toast.connected.description` |
| アイコン | circle-check |
| バリアント | success |

### 本文テンプレート

```
タイトル: {{provider}} connected
説明: {{provider}} models are now available to use.
```

### 添付ファイル

なし

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| provider | プロバイダー名 | `provider().name`（接続ダイアログのコンテキスト） | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | APIキー認証成功 | `auth.set` API成功後 | APIキーによる接続 |
| 画面操作 | OAuth認証成功 | `provider.oauth.callback` API成功後 | OAuth認証による接続 |
| 画面操作 | カスタムプロバイダー登録成功 | `updateConfig` 成功後 | カスタムプロバイダー追加 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 認証失敗 | APIまたはOAuth認証が失敗した場合 |
| サーバー更新失敗 | `global.dispose`が失敗した場合 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[プロバイダー接続開始] --> B{認証方式}
    B -->|APIキー| C[auth.set API呼び出し]
    B -->|OAuth| D[OAuth認証フロー]
    B -->|カスタム| E[updateConfig呼び出し]
    C --> F{成功?}
    D --> F
    E --> F
    F -->|失敗| G[エラー処理]
    F -->|成功| H[global.dispose呼び出し]
    H --> I[showToast成功通知]
    I --> J[dialog.close]
    J --> K[終了]
    G --> K
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| なし | なし | クライアントサイド処理のみ |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| なし | なし | 通知表示のみ、サーバー側で認証情報は別途管理 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| N/A | この通知は成功時のみ表示 | 失敗時は別途エラー処理 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | N/A |
| リトライ間隔 | N/A |
| リトライ対象エラー | N/A |

## 配信設定

### レート制限

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

### 配信時間帯

制限なし（24時間表示可能）

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

- 通知にはプロバイダー名のみ表示、APIキーや認証情報は含めない
- 接続成功の事実のみを通知

## 備考

- 国際化対応（i18n）済み
- 日本語: タイトル「{{provider}}が接続されました」、説明「{{provider}}モデルが使用可能になりました。」
- 複数箇所から呼び出される（dialog-connect-provider.tsx、dialog-custom-provider.tsx）

---

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

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

### 推奨読解順序

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

トースト通知の成功バリアントを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | toast.tsx | `packages/ui/src/components/toast.tsx` | variant: "success"とicon指定の組み合わせを確認 |

**読解のコツ**: 成功通知は緑色のスタイルで表示され、circle-checkアイコンが付与される。

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

通知がトリガーされる複数の場所。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | dialog-connect-provider.tsx | `packages/app/src/components/dialog-connect-provider.tsx` | complete関数でのshowToast呼び出し |
| 2-2 | dialog-custom-provider.tsx | `packages/app/src/components/dialog-custom-provider.tsx` | save関数でのshowToast呼び出し |

**主要処理フロー（dialog-connect-provider.tsx）**:
1. **行182-191**: complete関数の定義
2. **行183**: global.dispose呼び出し
3. **行185-190**: showToast呼び出し

**主要処理フロー（dialog-custom-provider.tsx）**:
1. **行229-271**: save関数の定義
2. **行256-262**: showToast呼び出し

#### Step 3: 国際化リソースを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | en.ts | `packages/app/src/i18n/en.ts` | `provider.connect.toast.connected.*`キーの定義を確認 |
| 3-2 | ja.ts | `packages/app/src/i18n/ja.ts` | 日本語翻訳を確認 |

**主要処理フロー**:
- **en.ts 行153-154**: `provider.connect.toast.connected.title/description`
- **ja.ts 行139-140**: 日本語翻訳

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

```
DialogConnectProvider (dialog-connect-provider.tsx)
    │
    ├─ ApiAuthView
    │      └─ handleSubmit
    │             ├─ globalSDK.client.auth.set()
    │             └─ complete()
    │                    ├─ globalSDK.client.global.dispose()
    │                    ├─ dialog.close()
    │                    └─ showToast({
    │                         variant: "success",
    │                         icon: "circle-check",
    │                         title: i18n("provider.connect.toast.connected.title", {provider}),
    │                         description: i18n("provider.connect.toast.connected.description", {provider})
    │                       })
    │
    ├─ OAuthCodeView
    │      └─ handleSubmit → complete()
    │
    └─ OAuthAutoView
           └─ onMount → complete()

DialogCustomProvider (dialog-custom-provider.tsx)
    │
    └─ save
           ├─ globalSDK.client.auth.set() (optional)
           ├─ globalSync.updateConfig()
           ├─ dialog.close()
           └─ showToast({...})
```

### データフロー図

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

ProviderID + APIKey/OAuth
         │
         ▼
auth.set() or oauth.callback()
         │
         ▼
global.dispose() (リフレッシュ)
         │
         ▼
dialog.close()
         │
         ▼
showToast({
  variant: "success",
  icon: "circle-check",
  title: `${provider.name} connected`,
  description: `${provider.name} models are now available to use.`
})
         │
         ▼
[成功トースト通知表示]
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| dialog-connect-provider.tsx | `packages/app/src/components/dialog-connect-provider.tsx` | ソース | プロバイダー接続ダイアログ（通知トリガー元） |
| dialog-custom-provider.tsx | `packages/app/src/components/dialog-custom-provider.tsx` | ソース | カスタムプロバイダー追加ダイアログ（通知トリガー元） |
| toast.tsx | `packages/ui/src/components/toast.tsx` | ソース | トースト通知コンポーネント |
| en.ts | `packages/app/src/i18n/en.ts` | 設定 | 英語メッセージ定義 |
| ja.ts | `packages/app/src/i18n/ja.ts` | 設定 | 日本語メッセージ定義 |
