# 通知設計書 13-Failed to load file

## 概要

本ドキュメントは、OpenCodeアプリケーションにおける「Failed to load file」トースト通知の設計仕様を記載する。この通知はファイルの読み込みに失敗したときにユーザーに表示される。

### 本通知の処理概要

この通知は、ユーザーがファイルを開こうとしたり、ファイルタブでファイルを表示しようとしたときに、ファイルの読み込みに失敗した場合に表示されるエラー通知である。

**業務上の目的・背景**：OpenCodeはコードエディタ機能を持ち、ユーザーはプロジェクト内のファイルを閲覧・編集できる。ファイルの読み込みに失敗した場合、その原因をユーザーに伝えることで、ファイルのパス確認やアクセス権限の確認など、適切な対処を促すことが重要である。

**通知の送信タイミング**：ファイル読み込みAPI（sdk.client.file.read）が例外をスローしたとき、またはSVGファイルのBase64デコードに失敗したときに表示される。

**通知の受信者**：ファイルを開こうとしたユーザー自身。アプリケーション画面上にトースト通知として表示される。

**通知内容の概要**：タイトルとして「Failed to load file」が表示され、説明としてエラーメッセージ（例外のmessage）が表示される。これにより、ユーザーは読み込み失敗の具体的な原因を把握できる。

**期待されるアクション**：ユーザーはエラーメッセージを確認し、ファイルパスの確認、ファイルの存在確認、アクセス権限の確認などを行う。問題が解決したら再度ファイルを開く操作を試みる。

## 通知種別

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

## 送信仕様

### 基本情報

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

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

ファイル読み込みを試みたユーザーのアプリケーション画面に直接表示される。

## 通知テンプレート

### トースト通知

| 項目 | 内容 |
|-----|------|
| タイトル | Failed to load file |
| 説明 | {エラーメッセージ} |
| バリアント | error |

### 本文テンプレート

```
タイトル: {toast.file.loadFailed.title}
説明: {エラーメッセージ（動的）}
```

### 添付ファイル

該当なし

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| toast.file.loadFailed.title | 通知タイトル | i18n翻訳ファイル（en.ts） | Yes |
| message | エラーメッセージ | 例外オブジェクトのmessageプロパティ | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| API呼び出し | sdk.client.file.read失敗 | 例外がスローされたとき | ファイル読み込みAPIのエラー |
| データ処理 | SVG Base64デコード失敗 | デコード結果がundefinedのとき | SVGファイルのデコードエラー |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| ファイル読み込み成功 | 正常にファイル内容が取得された場合 |
| スコープ変更後 | ディレクトリ変更により現在のスコープと異なる場合 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ファイル読み込み開始] --> B[sdk.client.file.read呼び出し]
    B --> C{読み込み成功?}
    C -->|Yes| D[ファイル内容を表示]
    C -->|No - 例外発生| E[setLoadError呼び出し]
    E --> F[showToast: error variant]
    F --> G[トースト表示]
    G --> H[処理終了]
    D --> H
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| なし | - | APIを通じてファイルシステムから直接読み込み |

### テーブル別参照項目詳細

該当なし

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| ファイルストア（メモリ） | UPDATE | ファイル状態にエラー情報を設定 |

#### ファイルストア

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| UPDATE | loading | false | 読み込み中フラグをオフ |
| UPDATE | error | エラーメッセージ | エラー情報を設定 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| ファイル読み込み失敗 | sdk.client.file.readが例外をスロー | トースト通知を表示 |
| SVGデコード失敗 | Base64デコードがundefinedを返す | トースト通知を表示 |

### リトライ仕様

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

## 配信設定

### レート制限

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

### 配信時間帯

制限なし（ユーザー操作起点のため）

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

- エラーメッセージにファイルパスが含まれる可能性があるが、ローカルアプリケーションのため問題なし
- 機密ファイルのパスが表示される可能性があるが、操作者本人のみが閲覧可能

## 備考

- ファイル読み込みは非同期で行われ、読み込み中は「Loading...」が表示される
- スコープ（ディレクトリ）が変更された場合、進行中の読み込み結果は破棄される
- SVGファイルの場合は追加のデコード処理が行われる

---

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

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

### 推奨読解順序

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

通知に関連するi18nキーとファイル状態の構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | en.ts | `packages/app/src/i18n/en.ts` | L413: toast.file.loadFailed.titleの定義 |
| 1-2 | types.ts | `packages/app/src/context/file/types.ts` | FileState型の構造を確認 |

**読解のコツ**: FileState型にはloading, loaded, error, contentなどのプロパティがあり、ファイルの読み込み状態を管理している。

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

ファイル読み込みとエラーハンドリングの起点を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | file.tsx | `packages/app/src/context/file.tsx` | L142-156, L158-195: setLoadErrorとload関数 |

**主要処理フロー**:
1. **L142-156**: setLoadError関数 - エラー状態の設定とshowToast呼び出し
2. **L158-167**: load関数 - ファイル読み込みの開始
3. **L174-188**: sdk.client.file.read呼び出しとcatchブロックでのエラーハンドリング

#### Step 3: ファイルタブでのエラー表示を理解する

SVGファイルのデコードエラー処理を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | file-tabs.tsx | `packages/app/src/pages/session/file-tabs.tsx` | L70-87: svgDecodeFailed判定とトースト表示 |

**主要処理フロー**:
- **L70-76**: svgDecodeFailed判定ロジック
- **L78-87**: デコード失敗時のトースト表示（一度だけ表示するフラグ管理）

#### Step 4: トースト表示の実装を理解する

showToast関数の実装詳細を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | toast.tsx | `packages/ui/src/components/toast.tsx` | L118-158: showToast関数の実装 |

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

```
FileProvider (file.tsx)
    │
    ├─ load (L158-195)
    │      │
    │      ├─ sdk.client.file.read (L174-176)
    │      │
    │      └─ [エラー時] setLoadError (L142-156)
    │             │
    │             ├─ setStore (ファイル状態更新)
    │             │
    │             └─ showToast (toast.tsx L118-158)
    │                    └─ variant: "error"
    │
FileTabContent (file-tabs.tsx)
    │
    └─ svgDecodeFailed (L70-76)
           │
           └─ showToast (L83-86)
                  └─ variant: "error"
```

### データフロー図

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

ファイルパス         sdk.client.file.read            トースト通知
    │                      │                              │
    ▼                      ▼                              ▼
load()呼び出し    ───▶  APIエラー発生     ───▶    showToast
                           │                      title: "Failed to load file"
                           ▼                      description: エラーメッセージ
                    setLoadError                  variant: "error"
                    (ストア更新)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| file.tsx | `packages/app/src/context/file.tsx` | ソース | ファイル読み込みコンテキスト |
| file-tabs.tsx | `packages/app/src/pages/session/file-tabs.tsx` | ソース | ファイルタブ表示コンポーネント |
| toast.tsx | `packages/ui/src/components/toast.tsx` | ソース | トースト通知コンポーネント |
| en.ts | `packages/app/src/i18n/en.ts` | 設定 | 英語翻訳テキスト |
| types.ts | `packages/app/src/context/file/types.ts` | 型定義 | ファイル状態の型定義 |
