# 機能設計書 53-Web UI

## 概要

本ドキュメントは、OpenCodeのWeb UIについて、その設計仕様を記述するものである。

### 本機能の処理概要

Web UI機能は、SolidJSフレームワークを使用したWebベースのユーザーインターフェースを提供する機能である。ブラウザまたはデスクトップアプリのWebView内で動作し、AIコーディングアシスタントとの対話、プロジェクト管理、セッション操作、ファイル変更の表示などの機能を提供する。

**業務上の目的・背景**：AIコーディングアシスタントとの効率的な対話を実現するため、リッチなユーザーインターフェースが必要である。Web技術を使用することで、クロスプラットフォーム対応とモダンなUI/UXを両立させている。

**機能の利用シーン**：
- プロジェクトの選択と開始
- AIアシスタントとのチャット形式の対話
- ファイル編集差分のレビュー
- ターミナル操作の実行と確認
- セッション履歴の閲覧とフォーク
- 設定画面での各種設定変更

**主要な処理内容**：
1. SolidJSを用いたリアクティブUIのレンダリング
2. SSE（Server-Sent Events）によるリアルタイムイベント受信
3. グローバル状態管理（GlobalSyncProvider）
4. ルーティングとナビゲーション（@solidjs/router）
5. コンテキストプロバイダーによる機能モジュール化
6. レスポンシブレイアウトとサイドバー管理
7. 多言語対応（i18n）

**関連システム・外部連携**：OpenCode HTTPサーバー（REST API + SSE）、ローカルストレージ（設定永続化）

**権限による制御**：サーバー接続時の認証、権限プロンプト表示

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | ホーム画面 | 主機能 | プロジェクト一覧表示、プロジェクト選択 |
| 2 | セッション画面 | 主機能 | メッセージ表示、AIとの対話 |
| 3 | エラー画面 | 主機能 | エラーメッセージ表示 |
| 4 | レイアウト | 主機能 | サイドバー、ナビゲーション |
| 5 | ディレクトリレイアウト | 主機能 | プロジェクト固有レイアウト |

## 機能種別

UI基盤 / SPA（シングルページアプリケーション）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| defaultServer | ServerConnection.Key | Yes | デフォルトサーバー接続情報 | 有効な接続キー |
| servers | ServerConnection.Any[] | No | 利用可能なサーバー一覧 | - |

### 入力データソース

- OpenCode HTTPサーバー（REST API）
- SSE イベントストリーム
- ローカルストレージ（設定）
- ユーザー入力（キーボード、マウス）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| DOM | HTMLElement | レンダリングされたUI |
| localStorage | string | 永続化された設定 |

### 出力先

- ブラウザDOM
- ローカルストレージ
- サーバー（API呼び出し）

## 処理フロー

### 処理シーケンス

```
1. アプリケーション初期化
   └─ AppBaseProviders: テーマ、言語、ダイアログ等の基盤プロバイダー設定

2. サーバー接続
   └─ ServerProvider: サーバー接続確立、健全性チェック

3. グローバル状態初期化
   └─ GlobalSDKProvider + GlobalSyncProvider: APIクライアント作成、状態同期開始

4. ルーティング設定
   └─ Router: URLパスに基づくコンポーネント切り替え

5. シェルプロバイダー設定
   └─ AppShellProviders: 設定、権限、レイアウト、コマンド等

6. ページレンダリング
   └─ Home / Session: ルートに応じたコンポーネント表示
```

### フローチャート

```mermaid
flowchart TD
    A[アプリ起動] --> B[AppBaseProviders]
    B --> C[MetaProvider/Font/ThemeProvider]
    C --> D[LanguageProvider]
    D --> E[ServerProvider]
    E --> F{サーバー接続成功?}
    F -->|No| G[接続リトライ]
    G --> E
    F -->|Yes| H[GlobalSDKProvider]
    H --> I[GlobalSyncProvider]
    I --> J[Router]
    J --> K[AppShellProviders]
    K --> L{ルート判定}
    L -->|/| M[Home]
    L -->|/:dir| N[DirectoryLayout]
    N --> O[Session]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | サーバー健全性表示 | サーバー状態をドットカラーで表示 | Home画面 |
| BR-02 | 最近のプロジェクト | 直近5件を更新日時順で表示 | Home画面 |
| BR-03 | ディレクトリエンコード | Base64でURLエンコード | ルーティング |
| BR-04 | セッション永続化 | プロジェクトごとの最終セッションを記録 | ナビゲーション時 |
| BR-05 | ワークスペース管理 | ドラッグ&ドロップでセッション順序変更 | サイドバー |

### 計算ロジック

- ディレクトリパスエンコード: `base64Encode(directory)`
- デコード: `decode64(params.dir)`

## データベース操作仕様

### 操作別データベース影響一覧

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| - | - | - | Web UIはサーバーAPI経由でデータアクセス（直接DB操作なし） |

### テーブル別操作詳細

ローカルストレージを使用した設定永続化:
- `layout.page.v1`: レイアウト状態
- `permission.v3`: 権限設定
- `settings.v3`: ユーザー設定

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | サーバー接続エラー | サーバーに到達不能 | リトライ、エラー画面表示 |
| - | APIエラー | API呼び出し失敗 | Toast通知、エラーハンドリング |
| - | レンダリングエラー | コンポーネントエラー | ErrorBoundaryでキャッチ |

### リトライ仕様

- サーバー接続: 自動リトライ（exponential backoff）
- API呼び出し: retry()ユーティリティで制御

## トランザクション仕様

該当なし（クライアントサイドアプリケーション）

## パフォーマンス要件

- 初期表示: サーバー接続後即座にUI表示
- リアルタイム更新: SSEで100ms以内の反映

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

- Basic認証対応（サーバーパスワード）
- CSP設定（デスクトップアプリ時）
- 外部リンクは新規タブで開く

## 備考

- パッケージ名: @opencode-ai/app
- フレームワーク: SolidJS + @solidjs/router
- スタイリング: Tailwind CSS

---

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

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

### 推奨読解順序

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

アプリケーションの型定義とコンテキスト構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | server.tsx | `packages/app/src/context/server.tsx` | ServerConnection型の定義 |
| 1-2 | layout.tsx | `packages/app/src/context/layout.tsx` | LocalProject等の型定義 |

**読解のコツ**:
- SolidJSのcreateContext/useContextパターンを理解する
- createStore/setStoreによるリアクティブ状態管理

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

アプリケーションの起動フローを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | app.tsx | `packages/app/src/app.tsx` | プロバイダー階層、ルーティング定義 |

**主要処理フロー**:
1. **115-136行目**: `AppBaseProviders` - 基盤プロバイダー（Meta, Font, Theme, Language等）
2. **147-171行目**: `AppInterface` - サーバー接続後のメインコンポーネント
3. **157-165行目**: ルーティング定義（/, /:dir, /session/:id?）
4. **74-92行目**: `AppShellProviders` - シェル機能プロバイダー

#### Step 3: ページコンポーネントを理解する

主要なページコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | home.tsx | `packages/app/src/pages/home.tsx` | ホーム画面、プロジェクト一覧 |
| 3-2 | layout.tsx | `packages/app/src/pages/layout.tsx` | レイアウト、サイドバー |
| 3-3 | session.tsx | `packages/app/src/pages/session.tsx` | セッション画面 |

**主要処理フロー（home.tsx）**:
- **17-31行目**: プロジェクト一覧取得、ソート
- **40-44行目**: `openProject` - プロジェクト選択時の処理
- **71-100行目**: UI描画（Logo, サーバー状態, 最近のプロジェクト）

#### Step 4: コンテキストプロバイダーを理解する

状態管理のコンテキストを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | global-sync.tsx | `packages/app/src/context/global-sync.tsx` | グローバル状態同期 |
| 4-2 | global-sdk.tsx | `packages/app/src/context/global-sdk.tsx` | SDKクライアント管理 |
| 4-3 | command.tsx | `packages/app/src/context/command.tsx` | コマンドパレット |

**読解のコツ**:
- `createSimpleContext`ヘルパーを使用したコンテキスト定義パターン
- `persisted`でローカルストレージ永続化

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

```
app.tsx (AppInterface)
    │
    ├─ AppBaseProviders
    │      ├─ MetaProvider
    │      ├─ Font
    │      ├─ ThemeProvider
    │      ├─ LanguageProvider
    │      ├─ DialogProvider
    │      └─ MarkedProvider
    │
    ├─ ServerProvider
    │      └─ SDK/fetch設定
    │
    ├─ GlobalSDKProvider
    │      └─ createOpencodeClient()
    │
    ├─ GlobalSyncProvider
    │      └─ SSEイベント購読
    │
    └─ Router
           │
           ├─ Home (/)
           │
           └─ DirectoryLayout (/:dir)
                  │
                  └─ Session (/session/:id?)
                         │
                         ├─ TerminalProvider
                         ├─ FileProvider
                         ├─ PromptProvider
                         └─ CommentsProvider
```

### データフロー図

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

サーバーAPI
  REST/SSE ───────────▶ GlobalSyncProvider ──────────▶ store (状態)
     │                          │                          │
     │                          ▼                          ▼
     │                   GlobalSDKProvider               UI更新
     │                          │
     │                          ▼
ローカルストレージ            persisted()
  *.v1 ─────────────────────────────────────────────▶ 永続化状態
     │
ユーザー入力                 コマンド実行
  クリック/入力 ──────────▶ useCommand ──────────────▶ API呼び出し
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| app.tsx | `packages/app/src/app.tsx` | ソース | アプリケーションエントリー |
| home.tsx | `packages/app/src/pages/home.tsx` | ソース | ホーム画面 |
| layout.tsx | `packages/app/src/pages/layout.tsx` | ソース | レイアウト/サイドバー |
| session.tsx | `packages/app/src/pages/session.tsx` | ソース | セッション画面 |
| directory-layout.tsx | `packages/app/src/pages/directory-layout.tsx` | ソース | ディレクトリレイアウト |
| error.tsx | `packages/app/src/pages/error.tsx` | ソース | エラー画面 |
| server.tsx | `packages/app/src/context/server.tsx` | ソース | サーバー接続管理 |
| global-sync.tsx | `packages/app/src/context/global-sync.tsx` | ソース | グローバル状態同期 |
| global-sdk.tsx | `packages/app/src/context/global-sdk.tsx` | ソース | SDKクライアント |
| command.tsx | `packages/app/src/context/command.tsx` | ソース | コマンドパレット |
| language.tsx | `packages/app/src/context/language.tsx` | ソース | 多言語対応 |
| layout.tsx | `packages/app/src/context/layout.tsx` | ソース | レイアウト状態 |
| settings.tsx | `packages/app/src/context/settings.tsx` | ソース | 設定管理 |
