# 機能設計書 94-アプリデザイナー

## 概要

本ドキュメントは、Giselleプラットフォームにおけるアプリ設定のためのデザイナーUI機能について記述する。

### 本機能の処理概要

**業務上の目的・背景**：ワークフローを公開アプリケーションとして設定・管理するためのUIを提供する。AppDesignerは、ワークスペースのワークフローをアプリとして公開する際の設定（入力パラメータ、アイコン、説明等）を行うための機能群を提供する。ワークフローデザイナーと連携し、同一のストア基盤を使用する。

**機能の利用シーン**：
- ワークフローをアプリとして公開する際の設定
- アプリ入力パラメータの定義
- アプリアイコン・説明文の設定
- 公開済みアプリの設定変更

**主要な処理内容**：
1. AppDesignerStoreによる状態管理（Zustandベース）
2. アプリスライス（AppSlice）でのアプリ関連状態管理
3. ワークスペーススライスとの連携
4. 永続化コントローラーによる自動保存
5. GiselleClientを通じたAPI連携
6. 接続状態の同期管理

**関連システム・外部連携**：
- Giselle API（アプリ設定の保存・読み込み）
- ワークフローデザイナー（共通ストア基盤）

**権限による制御**：ワークフローデザイナーと同様、editor/owner権限で編集可能。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | ワークフローエディタ画面 | 関連機能 | アプリ設定はエディタ内のパネルとして提供 |

## 機能種別

UI / 設定管理 / 状態管理

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| initialWorkspace | Workspace | Yes | 初期ワークスペースデータ | 有効なWorkspace型 |
| giselleClient | GiselleClient | Yes | APIクライアント | - |
| llmProviders | LanguageModelProvider[] | Yes | 言語モデルプロバイダー一覧 | - |
| debounceMs | number | No | 自動保存のdebounce時間 | デフォルト: 1500 |
| save | (payload: Workspace) => Promise<void> | Yes | 保存コールバック | - |
| saveBestEffort | (payload: Workspace) => void | No | ベストエフォート保存コールバック | - |

### 入力データソース

- ワークスペースデータ（Workspace型）
- 言語モデルプロバイダー設定

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| AppDesignerStoreState | AppDesignerStoreState | 統合された状態 |
| WorkspaceSlice | WorkspaceSlice | ワークスペース状態 |
| AppSlice | AppSlice | アプリ状態 |
| UiSlice | UiSlice | UI状態 |

### 出力先

- Giselle API（アプリ設定保存）
- Zustandストア（状態管理）

## 処理フロー

### 処理シーケンス

```
1. プロバイダー初期化
   └─ AppDesignerProvider → createAppDesignerStore → スライス初期化

2. 永続化設定
   └─ createAppDesignerPersistenceController → debounce設定 → save/saveBestEffort登録

3. 状態更新フロー
   └─ ユーザー操作 → usecase呼び出し → ストア更新 → 永続化トリガー

4. ルート変更/beforeunload時
   └─ flush/flushBestEffort → API保存
```

### フローチャート

```mermaid
flowchart TD
    A[AppDesignerProvider] --> B[createAppDesignerStore]
    B --> C[WorkspaceSlice初期化]
    B --> D[UiSlice初期化]
    B --> E[AppSlice初期化]

    C --> F[統合ストア]
    D --> F
    E --> F

    A --> G[createAppDesignerPersistenceController]
    G --> H[debounce設定]
    H --> I[保存コールバック登録]

    F --> J[コンテキスト提供]
    J --> K[GiselleClientProvider]
    K --> L[AppConnectionStateSyncProvider]
    L --> M[子コンポーネント]

    M --> N{ユーザー操作}
    N --> O[ストア更新]
    O --> P[永続化トリガー]
    P --> Q[API保存]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-001 | 統合ストア | WorkspaceSlice、AppSlice、UiSliceを統合して管理 | 常時 |
| BR-002 | 永続化制御 | debounce付きで自動保存、ルート変更・beforeunloadでflush | 常時 |
| BR-003 | ダーティフラグ | isDirty()で未保存変更を追跡 | 永続化制御時 |
| BR-004 | プロバイダー階層 | AppDesignerStoreContext → GiselleClientProvider → AppConnectionStateSyncProvider | 常時 |

### 計算ロジック

特になし

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

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

| 操作 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| アプリ設定保存 | workspaces/apps | UPDATE | アプリ設定の更新 |

※直接のDB操作はGiselle APIを通じて行われる

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| MISSING_PROVIDER | プロバイダー不在 | AppDesignerProviderがツリーにない | エラースロー |
| SAVE_FAILED | 保存失敗 | APIエラー | bestEffort保存を試行 |

### リトライ仕様

- flushBestEffortでsendBeacon/keepalive fetchを使用

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

- ローカルストア（Zustand）での状態管理
- 永続化はAPI呼び出しで非同期実行

## パフォーマンス要件

- debounceによるAPI呼び出し最適化（デフォルト1500ms）

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

- GiselleClientを通じた認証付きAPI呼び出し

## 備考

- ワークフローデザイナー（No.93）と共通のストア基盤を使用
- Zustandのスライスパターンで状態を分離管理

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | app-designer-store.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/app-designer-store.ts` | AppDesignerStoreState、AppDesignerStoreApiの定義 |
| 1-2 | app-slice.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/slices/app-slice.ts` | AppSliceの状態とアクション |
| 1-3 | workspace-slice.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/slices/workspace-slice.ts` | WorkspaceSliceの状態とアクション |
| 1-4 | ui-slice.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/slices/ui-slice.ts` | UiSliceの状態とアクション |

**読解のコツ**: Zustandのスライスパターンでは、各スライスが独立した状態とアクションを持ち、createStore内で合成される。

#### Step 2: プロバイダーを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | app-designer-provider.tsx | `internal-packages/workflow-designer-ui/src/app-designer/store/app-designer-provider.tsx` | AppDesignerProviderの実装 |
| 2-2 | giselle-client-provider.tsx | `internal-packages/workflow-designer-ui/src/app-designer/store/giselle-client-provider.tsx` | GiselleClientのコンテキスト提供 |
| 2-3 | app-connection-state-sync-provider.tsx | `internal-packages/workflow-designer-ui/src/app-designer/store/app-connection-state-sync-provider.tsx` | 接続状態の同期 |

**主要処理フロー**:
1. **58-77行目（provider）**: ストアと永続化コントローラーの初期化
2. **119-127行目**: プロバイダー階層の構築
3. **129-133行目**: useAppDesignerStoreApiフック

#### Step 3: 永続化を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | controller.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/persistence/controller.ts` | createAppDesignerPersistenceControllerの実装 |

#### Step 4: ユースケースを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | usecases/index.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/usecases/index.ts` | 各種ユースケースのエクスポート |
| 4-2 | use-add-node.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/usecases/use-add-node.ts` | ノード追加ユースケース例 |

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

```
AppDesignerProvider
    │
    ├─ [初期化]
    │      ├─ createAppDesignerStore(initialWorkspace, llmProviders)
    │      │      ├─ createWorkspaceSlice(initialWorkspace)
    │      │      ├─ createUiSlice({llmProviders, currentShortcutScope})
    │      │      └─ createAppSlice()
    │      │
    │      └─ createAppDesignerPersistenceController({store, debounceMs, save, saveBestEffort})
    │
    ├─ [ライフサイクル管理]
    │      ├─ useEffect(pathname) → flush("routeChange")
    │      ├─ useEffect(beforeunload) → flushBestEffort("beforeUnload")
    │      └─ useEffect(unmount) → dispose()
    │
    └─ [コンテキスト提供]
           │
           └─ AppDesignerStoreContext.Provider
                  │
                  └─ GiselleClientProvider
                         │
                         └─ AppConnectionStateSyncProvider
                                │
                                └─ children
```

### データフロー図

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

initialWorkspace ─────────┐
                          │
llmProviders ─────────────┼──▶ createAppDesignerStore ──▶ Zustand Store
                          │         │
                          │         ├──▶ WorkspaceSlice
                          │         │         └─ nodes, connections, ui
                          │         │
                          │         ├──▶ UiSlice
                          │         │         └─ llmProviders, shortcutScope
                          │         │
                          │         └──▶ AppSlice
                          │                   └─ apps state
                          │
save callback ────────────┼──▶ PersistenceController
                          │         │
saveBestEffort ───────────┘         ├──▶ debounced flush
                                    │
                                    └──▶ Giselle API
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.ts | `internal-packages/workflow-designer-ui/src/app-designer/index.ts` | ソース | パッケージエクスポート |
| app-designer-provider.tsx | `internal-packages/workflow-designer-ui/src/app-designer/store/app-designer-provider.tsx` | ソース | メインプロバイダー |
| app-designer-store.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/app-designer-store.ts` | ソース | ストア定義 |
| app-slice.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/slices/app-slice.ts` | ソース | アプリスライス |
| workspace-slice.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/slices/workspace-slice.ts` | ソース | ワークスペーススライス |
| ui-slice.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/slices/ui-slice.ts` | ソース | UIスライス |
| controller.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/persistence/controller.ts` | ソース | 永続化コントローラー |
| giselle-client-provider.tsx | `internal-packages/workflow-designer-ui/src/app-designer/store/giselle-client-provider.tsx` | ソース | APIクライアントプロバイダー |
| app-connection-state-sync-provider.tsx | `internal-packages/workflow-designer-ui/src/app-designer/store/app-connection-state-sync-provider.tsx` | ソース | 接続状態同期 |
| hooks.ts | `internal-packages/workflow-designer-ui/src/app-designer/store/hooks.ts` | ソース | ストアフック |
