Yuki Takei 9 месяцев назад
Родитель
Сommit
c14eedfa7b

+ 120 - 62
apps/app/src/features/openai/docs/plan/README.md

@@ -1,54 +1,59 @@
-# GROWI エディターアシスタント改修計画 - Plan Directory
+# GROWI エディターアシスタント改修計画 - クライアント・サーバー分離アーキテクチャ
 
 
-このディレクトリには、現在のGROWIエディターアシスタントをroo-codeの方式に倣って再実装するための包括的な改修計画が含まれています。
+このディレクトリには、現在のGROWIエディターアシスタントをroo-codeの方式に倣って**クライアント・サーバー分離アーキテクチャ**で再実装するための包括的な改修計画が含まれています。
 
 
 ## 📁 ファイル構成
 ## 📁 ファイル構成
 
 
 ### 📋 計画ドキュメント
 ### 📋 計画ドキュメント
 
 
 #### [`editor-assistant-refactoring-plan.md`](./editor-assistant-refactoring-plan.md)
 #### [`editor-assistant-refactoring-plan.md`](./editor-assistant-refactoring-plan.md)
-**メイン計画書** - 改修プロジェクト全体の概要
-- 📊 現状分析と課題の特定
-- 🎯 改修目標とroo-code方式の採用理由
-- 📝 5段階の実装計画
-- 📈 期待効果と品質指標
-- 🧪 検証計画
+**メイン計画書** - クライアント・サーバー分離による改修プロジェクト全体の概要
+- 📊 現状分析(全サーバーサイド処理)と課題の特定
+- 🎯 新アーキテクチャ目標とroo-code方式の適用
+- 🔄 段階別実装計画(Phase 2A/2B分離)
+- 📈 期待効果(パフォーマンス50%向上、ネットワーク80%削減)
+- ✅ 進捗状況(Phase 1完了、Phase 2A実装中)
 
 
 #### [`technical-implementation-details.md`](./technical-implementation-details.md)
 #### [`technical-implementation-details.md`](./technical-implementation-details.md)
-**技術実装詳細** - アーキテクチャと具体的な実装方法
-- 🏗️ アーキテクチャ変更のフロー図
-- 📦 ファイル構成と新規作成対象
-- 🔍 核心技術(MultiSearchReplaceProcessor、FuzzyMatcher等)
-- 🎛️ 設定とカスタマイズ方法
-- 🧪 テスト戦略
-- 📈 パフォーマンス考慮事項
+**技術実装詳細** - ハイブリッドアーキテクチャと具体的な実装方法
+- 🏗️ クライアント・サーバー責務分離のフロー図
+- 📦 新ファイル構成(client/server分離)
+- 🔍 核心技術の配置(ClientFuzzyMatcher、EditorDiffApplicator等)
+- 🎛️ ハイブリッド設定管理
+- 🧪 分散テスト戦略
+- 📈 ネットワーク・メモリ最適化
 
 
 #### [`implementation-tasks.md`](./implementation-tasks.md)
 #### [`implementation-tasks.md`](./implementation-tasks.md)
-**実装タスクリスト** - 具体的なタスクと進捗管理
-- ✅ Phase別の詳細タスク分解
-- ⏱️ 推定工数と優先度
-- 👥 担当者アサイン欄
-- 📊 進捗管理表
-- 🎯 次のアクション項目
+**実装タスクリスト** - クライアント・サーバー分離に基づく具体的なタスク
+- ✅ Phase 1: スキーマ更新(完了済み)
+- 🎯 Phase 2A: クライアントサイドエンジン実装(最優先・27時間)
+- 🔄 Phase 2B: サーバーサイド最適化(12時間)
+- 🔗 Phase 3: ハイブリッド統合(15時間)
+- 📊 総工数92時間、22タスクの詳細管理
 
 
 #### [`roo-code-investigation-supplement.md`](./roo-code-investigation-supplement.md)
 #### [`roo-code-investigation-supplement.md`](./roo-code-investigation-supplement.md)
-**roo-code調査レポート** - 詳細調査結果と計画への反映
-- 🧪 テスト戦略の分析(1186行のテストファイル調査)
-- 🛡️ エラーハンドリングパターン
-- 🎛️ 設定管理とカスタマイズ方法
-- 📝 文字正規化とパフォーマンス最適化
-- 📈 計画への反映事項と工数調整
+**roo-code調査レポート** - VSCode拡張アーキテクチャの詳細分析
+- 🧪 クライアントサイド処理パターンの調査
+- 🛡️ ブラウザ環境でのエラーハンドリング
+- 🎛️ リアルタイム設定管理とパフォーマンス
+- 📝 文字正規化のブラウザ実装
+- 📈 アーキテクチャ変更への反映(+11.5時間)
 
 
-## 🚀 改修概要
+## 🚀 改修概要 - 新アーキテクチャ
 
 
 ### 現在の課題
 ### 現在の課題
+- **全サーバーサイド処理**: パフォーマンス・プライバシー・拡張性の制約
 - **精度不足**: 単純な`replace`のみで誤った箇所を変更するリスク
 - **精度不足**: 単純な`replace`のみで誤った箇所を変更するリスク
-- **機能限界**: 複数変更の一括処理が困難
-- **エラー情報不足**: 失敗時の原因特定が困難
+- **ネットワーク負荷**: 全コンテンツのサーバー送信
+- **リアルタイム性欠如**: 処理中のフィードバック不足
 
 
-### 改修後の実現機能
-- **Search/Replace方式**: 正確な検索条件による安全な置換
-- **Fuzzy Matching**: Levenshtein距離による柔軟な類似度判定
+### 改修後の実現機能(ハイブリッドアーキテクチャ)
+
+#### 🖥️ **クライアントサイド処理**
+- **Search/Replace Engine**: ブラウザ内での高速Fuzzy Matching
+- **リアルタイム適用**: エディターへの即座diff適用
+- **プレビュー機能**: 変更前確認とキャンセル機能
+- **プライバシー強化**: ユーザーコンテンツの非送信
 - **複数diff処理**: 一つのリクエストで複数箇所の変更
 - **複数diff処理**: 一つのリクエストで複数箇所の変更
 - **詳細エラー報告**: 失敗原因と解決策の具体的な提示
 - **詳細エラー報告**: 失敗原因と解決策の具体的な提示
 
 
@@ -63,36 +68,68 @@ apps/app/src/features/openai/
 └── client/services/                # クライアント対応
 └── client/services/                # クライアント対応
 ```
 ```
 
 
-### 新規実装コンポーネント
-- **MultiSearchReplaceProcessor**: メイン処理エンジン
-- **FuzzyMatcher**: 類似度計算・検索機能
-- **DiffApplicationEngine**: 差分適用ロジック
-- **ErrorHandler**: 強化されたエラーハンドリング
+#### 🔧 **サーバーサイド専門化**
+- **LLM通信管理**: OpenAI APIとの効率的ストリーミング
+- **プロンプト最適化**: roo-code形式の指示生成
+- **セキュリティ**: 認証・認可・レート制限
+- **ネットワーク効率**: diff配列のみの転送
+
+### 新規実装コンポーネント(分散配置)
+
+#### クライアントサイド
+- **ClientFuzzyMatcher**: ブラウザ内類似度計算
+- **EditorDiffApplicator**: エディター直接統合
+- **ClientSearchReplaceProcessor**: ローカル処理エンジン  
+- **ClientErrorHandler**: リアルタイムエラー表示
+
+#### サーバーサイド
+- **LlmResponseProcessor**: OpenAI専門パーサー
+- **PromptGenerator**: roo-code形式生成
+- **ServerConfig**: システム設定管理
 
 
-## 🎯 実装優先順位
+## 🎯 実装優先順位 - 更新版
 
 
-### 🔴 高優先度 (Phase 1-2)
-1. スキーマ・インターフェース更新
-2. Search/Replace処理エンジン実装
-3. サーバーサイド統合
+### 🔴 **最高優先度** (Phase 2A - 27時間)
+1. **Client Fuzzy Matching Engine** - ブラウザ内高速検索  
+2. **Client Diff Application Engine** - エディター直接統合
+3. **Client Main Processor** - ローカル処理統合
+4. **Editor Integration** - useEditorAssistantフック更新
 
 
-### 🟡 中優先度 (Phase 3-4)  
-4. クライアントサイド対応
-5. 統合テスト
-6. プロンプト更新
+### 🟡 **中優先度** (Phase 2B, 3 - 27時間)
+5. **Server Optimization** - LLM専門化・軽量化
+6. **Hybrid Integration** - クライアント・サーバー連携
+7. **Real-time Feedback** - 処理状況の即座表示
 
 
-### 🟢 低優先度 (Phase 5-6)
-7. UI改善・最適化
-8. E2Eテスト
-9. ドキュメント整備
+### 🟢 **低優先度** (Phase 4, 5 - 34時間)
+8. **UI Enhancement** - プレビュー・設定画面
+9. **Documentation** - アーキテクチャ図・API仕様
+10. **Testing** - 単体・統合・E2Eテスト
 
 
-## 📈 期待効果
+## 📈 期待効果 - 新アーキテクチャ
 
 
 | 指標 | 現在 | 改修後 | 改善率 |
 | 指標 | 現在 | 改修後 | 改善率 |
 |------|------|--------|--------|
 |------|------|--------|--------|
 | **編集精度** | 60-70% | 90-95% | +30-35% |
 | **編集精度** | 60-70% | 90-95% | +30-35% |
-| **複雑変更対応** | 困難 | 対応可能 | - |
-| **エラー情報** | 限定的 | 詳細 | +200% |
+| **レスポンス時間** | 2-3秒 | 0.5-1秒 | **50-70%** |
+| **ネットワーク負荷** | 全コンテンツ | diff配列のみ | **80%** |
+| **サーバー負荷** | 高(全処理) | 低(LLMのみ) | **60%** |
+| **プライバシー** | 全送信 | 最小限 | **大幅改善** |
+
+## 📊 進捗状況
+
+### ✅ **完了** (Phase 1 - 4時間)
+- LlmEditorAssistantDiff スキーマ Search/Replace対応
+- SseFinalizedSchema エラー詳細拡張
+- 新型定義追加 (ProcessorConfig, DiffError等)
+
+### 🔄 **進行中** (アーキテクチャ見直し)
+- サーバーサイドプロトタイプ → クライアント実装への移行
+- 責務分離設計の確定
+
+### 📋 **次のアクション** (Phase 2A)
+- Client Fuzzy Matching Engine 実装開始
+- fastest-levenshtein ブラウザ対応確認
+- エディター統合テスト環境構築
 
 
 ## 🔗 参考資料
 ## 🔗 参考資料
 
 
@@ -103,15 +140,36 @@ apps/app/src/features/openai/
 
 
 ## 📝 使用方法
 ## 📝 使用方法
 
 
-### 計画書の読み順
-1. **まず**: [`editor-assistant-refactoring-plan.md`](./editor-assistant-refactoring-plan.md) で全体概要を把握
-2. **次に**: [`technical-implementation-details.md`](./technical-implementation-details.md) で技術詳細を理解
-3. **最後に**: [`implementation-tasks.md`](./implementation-tasks.md) で具体的なタスクを確認
+### 計画書の読み順(新アーキテクチャ対応)
+1. **まず**: [`editor-assistant-refactoring-plan.md`](./editor-assistant-refactoring-plan.md) でクライアント・サーバー分離の全体概要を把握
+2. **次に**: [`implementation-tasks.md`](./implementation-tasks.md) でPhase 2A(クライアント実装)の具体的なタスクを確認
+3. **詳細**: [`technical-implementation-details.md`](./technical-implementation-details.md) でハイブリッドアーキテクチャの技術詳細を理解
+4. **背景**: [`roo-code-investigation-supplement.md`](./roo-code-investigation-supplement.md) でアーキテクチャ変更の根拠を確認
+
+### 実装開始時(更新版)
+1. **Phase 2A**から着手: クライアントサイドエンジンの実装を最優先
+2. **段階的検証**: Fuzzy Matching → Diff Application → 統合の順序で進行
+3. **並行開発**: Phase 2Aと2Bを部分的に並行実装可能
+4. **進捗管理**: [`implementation-tasks.md`](./implementation-tasks.md) のチェックリストで管理
+
+## ⚠️ 重要な注意事項
+
+### アーキテクチャ変更による影響
+- **既存プロトタイプ**: サーバーサイドファイルは参考用(後で削除予定)
+- **依存関係**: `fastest-levenshtein`のブラウザ対応要確認
+- **テスト環境**: ブラウザ環境での単体テスト構築が必要
+- **パフォーマンス**: クライアント処理のメモリ使用量監視が重要
+
+### 開発時の注意点
+- **段階的移行**: 全機能を一度に移行せず、段階的な移行を推奨
+- **後方互換性**: 既存機能との共存を考慮した実装
+- **エラーハンドリング**: クライアントサイドエラーの適切な処理
+- **セキュリティ**: クライアント処理でもセキュリティ配慮が必要
+
+---
 
 
-### 実装開始時
-1. [`implementation-tasks.md`](./implementation-tasks.md) のPhase 1から着手
-2. 各フェーズ完了後、進捗を更新
-3. 技術的な詳細は [`technical-implementation-details.md`](./technical-implementation-details.md) を参照
+**最終更新**: クライアント・サーバー分離アーキテクチャへの設計変更完了
+**次のマイルストーン**: Phase 2A クライアントサイドエンジン実装開始
 
 
 ## ⚠️ 重要な注意事項
 ## ⚠️ 重要な注意事項
 
 

+ 236 - 78
apps/app/src/features/openai/docs/plan/editor-assistant-refactoring-plan.md

@@ -1,49 +1,108 @@
-# GROWI エディターアシスタント改修計画
+# GROWI エディターアシスタント改修計画 - クライアント・サーバー最適化
 
 
 ## 📋 概要
 ## 📋 概要
 
 
-現在のGROWIエディターアシスタントをroo-codeの方式に倣って再実装する改修計画。
+現在のGROWIエディターアシスタントをroo-codeの方式に倣って再実装し、適切なクライアント・サーバー責務分離を行う改修計画。
 
 
 ### 目的
 ### 目的
 - **精度向上**: Search/Replace方式による正確な編集
 - **精度向上**: Search/Replace方式による正確な編集
+- **パフォーマンス最適化**: クライアントサイド処理によるレスポンス時間短縮
+- **プライバシー強化**: ユーザーコンテンツのサーバー送信削減
+- **リアルタイム性**: 即座のフィードバックとプレビュー機能
 - **安全性向上**: Fuzzy matchingによる堅牢な処理
 - **安全性向上**: Fuzzy matchingによる堅牢な処理
 - **機能拡張**: 複数変更の一括処理
 - **機能拡張**: 複数変更の一括処理
-- **エラーハンドリング強化**: 詳細なフィードバック
 
 
 ## 🔍 現状分析
 ## 🔍 現状分析
 
 
-### 現在のアーキテクチャ
+### 現在のアーキテクチャ (All Server-side)
 ```
 ```
 [AiAssistantSidebar] 
 [AiAssistantSidebar] 
     ↓ useEditorAssistant
     ↓ useEditorAssistant
-[Client] → postMessage → [Server: edit/index.ts]
+[Client] → postMessage (全コンテンツ) → [Server: edit/index.ts]
     ↓ OpenAI Stream
     ↓ OpenAI Stream
 [LlmResponseStreamProcessor] → jsonrepair → parse
 [LlmResponseStreamProcessor] → jsonrepair → parse
     ↓ SseDetectedDiff
     ↓ SseDetectedDiff
 [useEditorAssistant] → setDetectedDiff → yText更新
 [useEditorAssistant] → setDetectedDiff → yText更新
 ```
 ```
 
 
-### 課題
-1. **単純置換**: `replace`のみで正確性に欠ける
-2. **エラー処理**: 失敗時の詳細情報不足
-3. **複数変更**: 安全な一括処理ができない
-4. **検索精度**: コンテキストなしの置換で誤変更リスク
+### 新アーキテクチャ (Client-Server Hybrid)
+```
+[AiAssistantSidebar] 
+    ↓ useEditorAssistant
+[Client] → リクエスト → [Server: edit/index.ts] 
+    ↓ OpenAI Stream
+[LlmResponseProcessor] → Search/Replace diff配列 
+    ↓ SSE Stream
+[ClientSearchReplaceProcessor] → Fuzzy Matching → Diff適用
+    ↓ リアルタイム
+[Editor] 更新 + プレビュー
+```
+
+### 課題と解決策
+| 現在の課題 | 新アーキテクチャでの解決 |
+|-----------|----------------------|
+| **全コンテンツ送信** | diff配列のみ転送 |
+| **サーバー負荷** | クライアントで処理分散 |
+| **レスポンス遅延** | ローカル処理で高速化 |
+| **単純置換** | Fuzzy Matching精度向上 |
+| **エラー処理不足** | 詳細フィードバック |
+| **複数変更リスク** | 安全な一括処理 |
 
 
 ## 🎯 改修目標
 ## 🎯 改修目標
 
 
-### roo-code方式の採用
+### 機能目標
+- **精度**: 95%以上のdiff適用成功率(roo-code基準)
+- **レスポンス**: 500ms以内のローカル処理完了
+- **安全性**: 意図しない変更の完全防止
+- **ユーザビリティ**: リアルタイムプレビューと詳細フィードバック
+
+### アーキテクチャ目標
+- **責務分離**: サーバーはLLM処理、クライアントは編集処理
+- **効率性**: 最小限のデータ転送とサーバー負荷
+- **拡張性**: 新機能の追加容易性
+- **保守性**: 明確なモジュール分割
+
+## ⭐ 進捗状況
+
+### ✅ 完了済み
+
+#### Phase 1: スキーマ・インターフェース更新
+- **LlmEditorAssistantDiffSchema**: Search/Replace形式に対応(`search`, `replace`, `startLine`, `endLine`)
+- **SseFinalizedSchema**: 詳細エラーレポート(`applicationResult.failedParts`)
+- **型定義**: `ProcessorConfig`, `DiffError`, `MatchResult`等の追加
+
+#### Phase 2 (Prototype): サーバーサイドエンジン実装
+- **テキスト正規化**: Unicode正規化、roo-code互換パターン
+- **設定管理**: 環境変数、階層設定、バリデーション  
+- **ファジーマッチング**: Levenshtein距離、中央アウト検索
+- **エラーハンドリング**: 6種類のエラー型、修正提案
+- **Diff適用エンジン**: インデント保持、行デルタ追跡
+- **メインプロセッサー**: 複数diff統合、位置ソート
+
+### 🔄 現在の作業: アーキテクチャ修正
+
+サーバーサイドプロトタイプからクライアントサイド実装への移行準備完了
+
+### roo-code方式の適用とクライアント・サーバー最適化
 - **Search/Replace形式**: 正確な検索条件による置換
 - **Search/Replace形式**: 正確な検索条件による置換
-- **Fuzzy Matching**: Levenshtein距離による類似度判定
+- **クライアントサイド処理**: Fuzzy Matching、Diff適用をブラウザで実行
+- **サーバー専門化**: LLM通信、プロンプト生成、セキュリティに特化
+- **リアルタイムフィードバック**: 即座の処理状況表示とプレビュー
 - **複数diff処理**: 一つのリクエストで複数箇所変更
 - **複数diff処理**: 一つのリクエストで複数箇所変更
 - **詳細エラー報告**: 失敗原因と解決策の提示
 - **詳細エラー報告**: 失敗原因と解決策の提示
 
 
+### パフォーマンス目標
+- **レスポンス時間**: 50%短縮(ローカル処理)
+- **ネットワーク**: 80%削減(diff配列のみ転送)
+- **サーバー負荷**: 60%削減(処理分散)
+
 ## 📝 段階別実装計画
 ## 📝 段階別実装計画
 
 
-### Phase 1: スキーマ・インターフェース更新
+### Phase 1: スキーマ・インターフェース更新 (完了)
 
 
-#### 1.1 新しいDiffスキーマ
+#### 新しいDiffスキーマ (実装済み)
 ```typescript
 ```typescript
-// apps/app/src/features/openai/interfaces/editor-assistant/llm-response-schemas.ts
+// LlmEditorAssistantDiffSchema
 export const LlmEditorAssistantDiffSchema = z.object({
 export const LlmEditorAssistantDiffSchema = z.object({
   search: z.string().describe('正確に検索する内容(空白・インデント含む)'),
   search: z.string().describe('正確に検索する内容(空白・インデント含む)'),
   replace: z.string().describe('置換後の内容'),
   replace: z.string().describe('置換後の内容'),
@@ -52,8 +111,9 @@ export const LlmEditorAssistantDiffSchema = z.object({
 });
 });
 ```
 ```
 
 
-#### 1.2 処理結果型の拡張
+#### 処理結果型の拡張 (実装済み)
 ```typescript
 ```typescript
+// SseFinalizedSchema with applicationResult
 type DiffApplicationResult = {
 type DiffApplicationResult = {
   success: boolean;
   success: boolean;
   appliedCount: number;
   appliedCount: number;
@@ -61,89 +121,182 @@ type DiffApplicationResult = {
     search: string;
     search: string;
     error: string;
     error: string;
     suggestions?: string;
     suggestions?: string;
+    similarity?: number;
   }>;
   }>;
   content?: string;
   content?: string;
 };
 };
 ```
 ```
 
 
-### Phase 2: Search/Replace処理エンジン
+### 🔄 Phase 2A: クライアントサイドエンジン実装 (次の優先タスク)
 
 
-#### 2.1 新しい処理クラス
+#### 2A.1 クライアントサイド処理クラス
 ```typescript
 ```typescript
-// apps/app/src/features/openai/server/services/editor-assistant/multi-search-replace-processor.ts
-export class MultiSearchReplaceProcessor {
-  private fuzzyThreshold = 0.8; // 類似度閾値
-  private bufferLines = 40; // コンテキスト行数
-  
-  async applyDiffs(
-    originalContent: string,
-    diffs: LlmEditorAssistantDiff[]
-  ): Promise<DiffApplicationResult>
-}
+// apps/app/src/client/services/editor-assistant/
+// - FuzzyMatchingEngine.ts      (ブラウザ最適化)
+// - DiffApplicationEngine.ts    (エディター直接統合)
+// - TextNormalization.ts        (ローカル処理)
+// - ErrorHandler.ts             (リアルタイムフィードバック)
+// - ClientSearchReplaceProcessor.ts (クライアント統合)
 ```
 ```
 
 
-#### 2.2 主要機能
-- **Fuzzy Matching**: `fastest-levenshtein`による類似度計算
-- **Middle-out Search**: 効率的な検索アルゴリズム
-- **インデント保持**: 元のインデントを維持した置換
-- **エラー詳細化**: 失敗原因の具体的な報告
+#### 2A.2 主要機能 (クライアントサイド)
+- **ローカルFuzzy Matching**: `fastest-levenshtein`のブラウザ版
+- **リアルタイム適用**: エディターへの直接更新
+- **即座のフィードバック**: 処理状況のリアルタイム表示
+- **プレビュー機能**: 変更前の確認機能
 
 
-### Phase 3: サーバーサイド統合
+### Phase 2B: サーバーサイド最適化
 
 
-#### 3.1 LlmResponseStreamProcessor更新
+#### 2B.1 サーバー責務の絞り込み
 ```typescript
 ```typescript
-// apps/app/src/features/openai/server/services/editor-assistant/llm-response-stream-processor.ts
-// Search/Replace形式のパース対応
-// 新しいコールバック定義
+// apps/app/src/features/openai/server/services/editor-assistant/
+// - LlmResponseProcessor.ts     (パース専門)
+// - PromptGenerator.ts          (roo-code形式)
+// - ServerConfig.ts             (システム設定)
+```
+
+#### 2B.2 サーバー専門機能
+- **LLM通信管理**: OpenAI APIとの効率的通信
+- **プロンプト最適化**: roo-code形式のプロンプト生成
+- **セキュリティ処理**: 認証・認可・レート制限
+
+### Phase 3: ハイブリッド処理フロー統合
+
+#### 3.1 新しい処理フロー
+```
+[Client] リクエスト → [Server] LLM通信 → diff配列生成
+    ↓
+[Client] Fuzzy Matching + Diff適用 → エディタ更新
 ```
 ```
 
 
-#### 3.2 edit/index.ts改修
+#### 3.2 edit/index.ts統合
 ```typescript
 ```typescript
 // apps/app/src/features/openai/server/routes/edit/index.ts
 // apps/app/src/features/openai/server/routes/edit/index.ts
-// プロンプト更新(roo-code形式)
-// 新しい処理エンジンとの統合
+// roo-code形式プロンプト採用
+// diff配列レスポンス最適化
 ```
 ```
 
 
-### Phase 4: クライアントサイド対応
-
-#### 4.1 useEditorAssistant更新
+#### 3.3 useEditorAssistant統合  
+```typescript
+#### 3.1 処理フロー統合
 ```typescript
 ```typescript
-// apps/app/src/features/openai/client/services/editor-assistant.tsx
-// 新しいdiff形式への対応
-// エラーハンドリング強化
+// apps/app/src/client/services/editor-assistant.tsx
+// ClientSearchReplaceProcessor統合
+// ハイブリッド処理フロー実装
 ```
 ```
 
 
-#### 4.2 UI改善
-- より詳細なエラー表示
-- 部分適用結果の表示
-- 進捗状況の可視化
-
-### Phase 5: プロンプト更新
-
-#### 5.1 roo-code形式の採用
 ```
 ```
-<<<<<<< SEARCH
-:start_line: (required) 検索開始行番号
--------
-[正確な検索内容(空白・インデント含む)]
-=======
-[置換後の内容]
->>>>>>> REPLACE
+[Client Request] → [Server: LLM Processing] → [SSE Stream] 
+    ↓
+[Client: Search/Replace Processor] → [Real-time Editor Update]
 ```
 ```
 
 
-#### 5.2 指示の詳細化
-- マーカーのエスケープ規則
-- 複数diffブロックの処理
-- エラー時の対処方法
+#### 3.2 SSE統合
+- サーバーからdiff配列をストリーミング
+- クライアントでリアルタイム処理・適用
+- 処理結果の即座フィードバック
+
+### Phase 4: UI・UX改善
+
+#### 4.1 リアルタイムフィードバック
+- 処理状況の即座表示
+- diff適用のプレビュー機能  
+- キャンセル・再試行機能
+
+#### 4.2 詳細エラー表示
+- 失敗原因の具体的説明
+- 修正提案の表示
+- 部分適用結果の確認
+
+### Phase 5: ドキュメント更新
+
+#### 5.1 アーキテクチャ図
+- クライアント・サーバー責務分離図
+- データフロー図
+- エラーハンドリングフロー
+
+#### 5.2 API仕様書  
+- 新しいSSE形式
+- クライアントサイドAPI
+- 設定オプション
+
+### Phase 6: テスト・検証
+
+#### 6.1 単体テスト
+- FuzzyMatcher精度テスト
+- DiffApplicationEngine検証
+- エラーハンドリング確認
+
+#### 6.2 統合テスト
+- エンドツーエンドフロー
+- パフォーマンス測定
+- ユーザビリティ検証
 
 
 ## 🔧 技術実装詳細
 ## 🔧 技術実装詳細
 
 
-### Fuzzy Matching アルゴリズム
+### 現在実装済みのプロトタイプ(サーバーサイド)
+
+#### Fuzzy Matching アルゴリズム(→クライアント移行予定)
 - **ライブラリ**: `fastest-levenshtein`
 - **ライブラリ**: `fastest-levenshtein`
-- **閾値**: 80%以上で一致判定
+- **閾値**: 80%以上で一致判定  
 - **検索方式**: Middle-out search(中央から外側へ)
 - **検索方式**: Middle-out search(中央から外側へ)
 
 
-### エラーハンドリング戦略
+#### エラーハンドリング(→クライアント移行予定)
+```typescript
+enum DiffErrorType {
+  SEARCH_NOT_FOUND = 'search_not_found',
+  MULTIPLE_MATCHES = 'multiple_matches', 
+  CONTENT_MISMATCH = 'content_mismatch',
+  LINE_RANGE_INVALID = 'line_range_invalid',
+  SIMILARITY_TOO_LOW = 'similarity_too_low',
+  PROCESSING_ERROR = 'processing_error'
+}
+```
+
+### 新アーキテクチャの技術仕様
+
+#### クライアントサイド処理
+```typescript
+// ブラウザ最適化されたFuzzy Matching
+class ClientFuzzyMatcher {
+  private threshold = 0.8;
+  
+  findBestMatch(searchText: string, content: string): MatchResult {
+    // fastest-levenshtein のブラウザ版使用
+    // リアルタイム類似度計算
+  }
+}
+
+// エディター直接統合
+class EditorDiffApplicator {
+  applyToEditor(diffs: LlmEditorAssistantDiff[]): Promise<ApplicationResult> {
+    // yText への直接更新
+    // インデント保持
+    // アンドゥ対応
+  }
+}
+```
+
+#### サーバーサイド専門化
+```typescript
+// LLM専門処理
+class LlmResponseProcessor {
+  parseStreamToDiffs(stream: ReadableStream): AsyncGenerator<LlmEditorAssistantDiff[]> {
+    // ストリーミングパース
+    // roo-code形式対応
+  }
+}
+
+// プロンプト最適化
+class PromptGenerator {
+  generateSearchReplacePrompt(context: string): string {
+    // roo-code形式指示
+    // 複数diff対応
+  }
+}
+```
+
+### エラーハンドリング戦略(クライアント実装予定)
 ```typescript
 ```typescript
 type DiffError = {
 type DiffError = {
   type: 'SEARCH_NOT_FOUND' | 'SIMILARITY_TOO_LOW' | 'MULTIPLE_MATCHES';
   type: 'SEARCH_NOT_FOUND' | 'SIMILARITY_TOO_LOW' | 'MULTIPLE_MATCHES';
@@ -158,35 +311,40 @@ type DiffError = {
 ```
 ```
 
 
 ### パフォーマンス最適化
 ### パフォーマンス最適化
-- **メモリ効率**: 大きなファイルでの文字列処理最適化
-- **ストリーミング**: 段階的JSONパース継続
-- **UI更新**: 必要最小限のDOM操作
+- **クライアント処理**: ローカル実行による高速化
+- **ネットワーク最適化**: diff配列のみ転送
+- **メモリ効率**: ストリーミング処理継続
+- **UI応答性**: リアルタイムフィードバック
 
 
 ## 📊 期待効果
 ## 📊 期待効果
 
 
 | 項目 | 現在 | 改修後 | 改善率 |
 | 項目 | 現在 | 改修後 | 改善率 |
 |------|------|--------|--------|
 |------|------|--------|--------|
 | **編集精度** | 60-70% | 90-95% | +30-35% |
 | **編集精度** | 60-70% | 90-95% | +30-35% |
+| **レスポンス時間** | 2-3秒 | 0.5-1秒 | 50-70% |
+| **ネットワーク負荷** | 全コンテンツ | diff配列のみ | 80% |
+| **サーバー負荷** | 高(全処理) | 低(LLMのみ) | 60% |
 | **複雑変更対応** | 困難 | 対応可能 | - |
 | **複雑変更対応** | 困難 | 対応可能 | - |
 | **エラー情報詳細度** | 低 | 高 | +200% |
 | **エラー情報詳細度** | 低 | 高 | +200% |
 | **Fuzzy matching** | なし | あり (0.8閾値) | - |
 | **Fuzzy matching** | なし | あり (0.8閾値) | - |
 | **複数diff処理** | 困難 | 効率的 | - |
 | **複数diff処理** | 困難 | 効率的 | - |
-| **テキスト正規化** | なし | roo-code互換 | - |
-| **段階的バリデーション** | なし | あり | - |
+| **リアルタイム性** | なし | あり | - |
 
 
 ## 🔍 roo-code調査結果の反映
 ## 🔍 roo-code調査結果の反映
 
 
 ### 主要な学習ポイント
 ### 主要な学習ポイント
 - **テスト戦略**: 1186行の包括的テストケース参考
 - **テスト戦略**: 1186行の包括的テストケース参考
-- **エラーハンドリング**: 段階的バリデーションと詳細エラーメッセージ
+- **エラーハンドリング**: 段階的バリデーションと詳細エラーメッセージ  
 - **設定管理**: 階層化設定と環境変数対応
 - **設定管理**: 階層化設定と環境変数対応
 - **文字正規化**: スマートクォート・Unicode正規化
 - **文字正規化**: スマートクォート・Unicode正規化
 - **パフォーマンス**: Middle-out検索と早期終了最適化
 - **パフォーマンス**: Middle-out検索と早期終了最適化
+- **アーキテクチャ**: クライアント・サーバー責務分離の重要性
 
 
 ### 計画への反映
 ### 計画への反映
-- **総工数**: 73.5時間 → **77時間** (+3.5時間)
-- **タスク数**: 18個 → **20個** (+2個)
-- **新規追加**: テキスト正規化、設定管理システム
+- **総工数**: 73.5時間 → **85時間** (+11.5時間)
+- **タスク数**: 18個 → **22個** (+4個)  
+- **新規追加**: クライアントサイド実装、アーキテクチャ分離、テスト強化
+- **優先度変更**: Phase 2A(クライアント実装)を最優先に
 
 
 ## 🎯 実装優先順位
 ## 🎯 実装優先順位
 
 

+ 449 - 143
apps/app/src/features/openai/docs/plan/implementation-tasks.md

@@ -1,188 +1,418 @@
-# 実装タスクリスト
+# 実装タスクリスト - クライアント・サーバー分離アーキテクチャ
 
 
-## 📋 Phase 1: スキーマ・インターフェース更新
+## 📋 Phase 1: スキーマ・インターフェース更新 ✅ 完了
 
 
 ### ✅ 完了タスク
 ### ✅ 完了タスク
-- [ ] 既存スキーマの分析と理解
+- [x] `LlmEditorAssistantDiffSchema`をSearch/Replace形式に更新
+- [x] `SseFinalizedSchema`にエラー詳細情報追加  
+- [x] 新しい型定義の追加 (`ProcessorConfig`, `DiffError`, `MatchResult`等)
+- [x] バックワード互換性の確保
+- [x] TypeScript型定義の更新
+
+### 完了ファイル
+- ✅ `apps/app/src/features/openai/interfaces/editor-assistant/llm-response-schemas.ts`
+- ✅ `apps/app/src/features/openai/interfaces/editor-assistant/sse-schemas.ts`  
+- ✅ `apps/app/src/features/openai/interfaces/editor-assistant/types.ts`
+
+**総工数**: 4時間 (完了)
+
+---
+
+## 📋 Phase 2A: クライアントサイドEngine実装 🎯 最優先
+
+### アーキテクチャ方針
+**roo-code方式**: パフォーマンス・プライバシー・リアルタイム性を重視し、Fuzzy MatchingとDiff適用をクライアントサイドで実行
 
 
 ### 🎯 実装タスク
 ### 🎯 実装タスク
 
 
-#### 1.1 LLM Response Schemas更新
-- [ ] **ファイル**: `apps/app/src/features/openai/interfaces/editor-assistant/llm-response-schemas.ts`
-- [ ] **タスク**: 
-  - [ ] `LlmEditorAssistantDiffSchema`をSearch/Replace形式に更新
-  - [ ] バックワード互換性の確保
-  - [ ] TypeScript型定義の更新
-- [ ] **推定工数**: 2時間
+#### 2A.1 Client Fuzzy Matching Engine
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/fuzzy-matching.ts` (新規)
+- [ ] **タスク**:
+  - [ ] `fastest-levenshtein`の依存関係追加 (ブラウザ対応版)
+  - [ ] `ClientFuzzyMatcher`クラス実装
+  - [ ] Middle-out検索アルゴリズム (ブラウザ最適化)
+  - [ ] 類似度計算とthreshold判定
+  - [ ] リアルタイム処理最適化
+- [ ] **推定工数**: 4時間
+- [ ] **担当者**: 未定  
+- [ ] **優先度**: 最高
+
+#### 2A.2 Client Diff Application Engine  
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/diff-application.ts` (新規)
+- [ ] **タスク**:
+  - [ ] `EditorDiffApplicator`クラス実装
+  - [ ] エディター(yText)への直接統合
+  - [ ] インデント保持ロジック
+  - [ ] アンドゥ・リドゥ対応
+  - [ ] 行デルタ追跡
+- [ ] **推定工数**: 5時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 最高
+
+#### 2A.3 Client Text Normalization
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/text-normalization.ts` (新規)
+  - [ ] `FuzzyMatcher`クラスの実装
+  - [ ] 類似度計算ロジック (ブラウザ最適化)
+  - [ ] Middle-out検索アルゴリズム
+  - [ ] パフォーマンス最適化 (Web Workers対応準備)
+- [ ] **推定工数**: 5時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
-#### 1.2 SSE Schemas更新  
-- [ ] **ファイル**: `apps/app/src/features/openai/interfaces/editor-assistant/sse-schemas.ts`
+#### 2A.2 Diff適用エンジン (クライアント)
+- [ ] **ファイル**: `apps/app/src/features/openai/client/services/search-replace/diff-application.ts` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] 新しいDiff形式に対応したSSEスキーマ
-  - [ ] エラー詳細情報の追加
-- [ ] **推定工数**: 1時間
+  - [ ] エディタ直接統合 (CodeMirror/Monaco)
+  - [ ] リアルタイムdiff適用
+  - [ ] インデント保持機能
+  - [ ] Undo/Redo対応
+  - [ ] プレビューモード実装
+- [ ] **推定工数**: 6時間
+- [ ] **担当者**: 未定  
+- [ ] **優先度**: 高
+
+#### 2A.3 Client Text Normalization
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/text-normalization.ts` (新規)
+- [ ] **タスク**:
+  - [ ] `ClientTextNormalizer`クラス実装
+  - [ ] スマートクォート・タイポグラフィ文字の正規化
+  - [ ] Unicode正規化機能(NFC)
+  - [ ] ブラウザ最適化処理
+  - [ ] roo-code互換の正規化マップ実装
+- [ ] **推定工数**: 3時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
-#### 1.3 新しい型定義の追加
-- [ ] **ファイル**: `apps/app/src/features/openai/interfaces/editor-assistant/types.ts` (新規)
+#### 2A.4 Client Error Handling
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/error-handling.ts` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] `DiffApplicationResult`型の定義
-  - [ ] `DiffError`型の定義
-  - [ ] `ProcessorConfig`型の定義
-- [ ] **推定工数**: 1時間
+  - [ ] `ClientErrorHandler`クラスの実装
+  - [ ] リアルタイムエラー表示
+  - [ ] 詳細なエラー情報とサジェスション
+  - [ ] ユーザーフレンドリーなメッセージ
+  - [ ] エラー復旧機能
+- [ ] **推定工数**: 4時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
+#### 2A.5 Client Main Processor
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/processor.ts` (新規)
+- [ ] **タスク**:
+  - [ ] `ClientSearchReplaceProcessor`クラスの実装
+  - [ ] 複数diff処理オーケストレーション
+  - [ ] リアルタイム進捗フィードバック
+  - [ ] 処理キャンセル機能
+  - [ ] バッチ処理最適化
+- [ ] **推定工数**: 6時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 最高
+
+#### 2A.6 Editor Integration
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/editor-integration.ts` (新規)
+- [ ] **タスク**:
+  - [ ] useEditorAssistantフックの更新
+  - [ ] クライアントサイド処理フローの統合
+  - [ ] リアルタイム状態管理
+  - [ ] プレビューモード実装
+- [ ] **推定工数**: 5時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 最高
+
+**Phase 2A 総工数**: 27時間
+
 ---
 ---
 
 
-## 📋 Phase 2: Search/Replace処理エンジン実装
+## 📋 Phase 2B: サーバーサイド最適化 🎯 中優先度
+
+### アーキテクチャ方針  
+**専門化**: LLM通信、プロンプト生成、セキュリティに特化し、テキスト処理はクライアントに移管
 
 
 ### 🎯 実装タスク
 ### 🎯 実装タスク
 
 
-#### 2.1 Fuzzy Matching ユーティリティ
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/fuzzy-matching.ts` (新規)
+#### 2B.1 LLM Response Processor (サーバー専門化)
+- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/llm-response-processor.ts` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] `fastest-levenshtein`の依存関係追加
-  - [ ] `FuzzyMatcher`クラスの実装
-  - [ ] 類似度計算ロジック
-  - [ ] Middle-out検索アルゴリズム
-  - [ ] 文字列正規化機能
-- [ ] **推定工数**: 6時間
+  - [ ] OpenAI ストリーミングレスポンス専門処理
+  - [ ] Search/Replace形式のパース
+  - [ ] SSEストリーミング最適化
+  - [ ] エラーハンドリング簡素化 (LLM通信エラーのみ)
+- [ ] **推定工数**: 4時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
-- [ ] **優先度**: 高
+- [ ] **優先度**: 
 
 
-#### 2.2 Diff適用エンジン
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/diff-application-engine.ts` (新規)
+#### 2B.2 Prompt Generator (roo-code形式)
+- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/prompt-generator.ts` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] 単一diff適用ロジック
-  - [ ] インデント保持機能
-  - [ ] 行番号管理
-  - [ ] 置換実行ロジック
-- [ ] **推定工数**: 4時間
-- [ ] **担当者**: 未定  
-- [ ] **優先度**: 高
+  - [ ] roo-code SEARCH/REPLACE形式プロンプト生成
+  - [ ] 複数diff指示の効率的記述
+  - [ ] コンテキスト最適化
+  - [ ] エスケープ処理とエラー防止
+- [ ] **推定工数**: 3時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 中
+
+#### 2B.3 Server Configuration
+- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/server-config.ts` (新規)
+- [ ] **タスク**:
+  - [ ] システム設定管理
+  - [ ] 環境変数統合
+  - [ ] セキュリティポリシー設定
+  - [ ] レート制限設定
+- [ ] **推定工数**: 2時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
 
 
-#### 2.3 エラーハンドリング
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/error-handlers.ts` (新規)
+#### 2B.4 API Route Updates
+- [ ] **ファイル**: `apps/app/src/pages/api/v3/openai/editor-assistant/edit/index.ts`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] `ErrorHandler`クラスの実装
-  - [ ] エラー詳細情報の生成
-  - [ ] 推奨アクションの提供
-  - [ ] ログ出力機能
+  - [ ] 新しいレスポンス形式への対応
+  - [ ] クライアント処理前提の軽量化
+  - [ ] エラーハンドリング簡素化
+  - [ ] パフォーマンス監視追加
 - [ ] **推定工数**: 3時間
 - [ ] **推定工数**: 3時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 中
 - [ ] **優先度**: 中
 
 
-#### 2.4 メイン処理エンジン
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/multi-search-replace-processor.ts` (新規)
+**Phase 2B 総工数**: 12時間
+
+---
+
+## 📋 Phase 3: ハイブリッド処理フロー統合 🎯 中優先度
+
+### 🎯 実装タスク
+
+#### 3.1 Client-Server Integration
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant/integration.ts` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] `MultiSearchReplaceProcessor`クラスの実装
-  - [ ] 複数diff処理ロジック
-  - [ ] バリデーション機能
-  - [ ] パフォーマンス最適化
-  - [ ] 設定管理
-- [ ] **推定工数**: 8時間
+  - [ ] SSEストリーム受信処理
+  - [ ] クライアントエンジンとの連携
+  - [ ] エラー伝播・復旧機能
+  - [ ] 処理状態の同期
+- [ ] **推定工数**: 4時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
-#### 2.5 テキスト正規化ユーティリティ
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/text-normalization.ts` (新規)
+#### 3.2 useEditorAssistant Hook Update
+- [ ] **ファイル**: `apps/app/src/client/services/editor-assistant.tsx`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] スマートクォート・タイポグラフィ文字の正規化
-  - [ ] Unicode正規化機能(NFC)
-  - [ ] 空白文字の正規化
-  - [ ] roo-code互換の正規化マップ実装
-- [ ] **推定工数**: 2時間
+  - [ ] 新しいクライアント処理フローの統合
+  - [ ] 状態管理の最適化
+  - [ ] エラーステート管理
+  - [ ] ローディング状態の詳細化
+- [ ] **推定工数**: 5時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
-#### 2.6 設定管理システム
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/config.ts` (新規)
+#### 3.3 Real-time Feedback System
+- [ ] **ファイル**: `apps/app/src/client/components/AiAssistantSidebar/feedback-system.tsx` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] EditorAssistantConfig型の定義
-  - [ ] 環境変数からの設定読み込み
-  - [ ] デフォルト値の階層化管理
-  - [ ] 設定値のバリデーショ
-- [ ] **推定工数**: 1.5時間
-- [ ] **担当者**: 未定
+  - [ ] リアルタイム処理状況表示
+  - [ ] プログレスバー・ステップ表示
+  - [ ] エラー詳細の表示UI
+  - [ ] キャンセル・再試行ボタ
+- [ ] **推定工数**: 6時間
+- [ ] **担当者**: 未定  
 - [ ] **優先度**: 中
 - [ ] **優先度**: 中
 
 
-#### 2.7 単体テスト
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/__tests__/` (新規ディレクトリ)
+**Phase 3 総工数**: 15時間
+
+---
+
+## 📋 Phase 4: UI・UX改善 🎯 低優先度
+
+### 🎯 実装タスク
+
+#### 4.1 Preview Mode Implementation
+- [ ] **ファイル**: `apps/app/src/client/components/AiAssistantSidebar/preview-mode.tsx` (新規)
+- [ ] **タスク**:
+  - [ ] 変更プレビューの表示
+  - [ ] Diff表示機能
+  - [ ] 適用前の確認UI
+  - [ ] 部分適用選択機能
+- [ ] **推定工数**: 6時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
+
+#### 4.2 Enhanced Error Display
+- [ ] **ファイル**: `apps/app/src/client/components/AiAssistantSidebar/error-display.tsx` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] `fuzzy-matching.test.ts`
-  - [ ] `text-normalization.test.ts`
-  - [ ] `diff-application-engine.test.ts`
-  - [ ] `multi-search-replace-processor.test.ts`
-  - [ ] roo-code互換のテストケース実装
+  - [ ] 詳細エラー情報の視覚化
+  - [ ] 修正提案の表示
+  - [ ] エラー原因の説明
+  - [ ] 復旧アクションボタン
+- [ ] **推定工数**: 4時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
+
+#### 4.3 Settings Panel
+- [ ] **ファイル**: `apps/app/src/client/components/AiAssistantSidebar/settings-panel.tsx` (新規)
+- [ ] **タスク**:
+  - [ ] クライアント設定UI
+  - [ ] Fuzzy matching閾値調整
+  - [ ] プレビューモード設定
+  - [ ] デバッグモード切替
+- [ ] **推定工数**: 3時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
+
+**Phase 4 総工数**: 13時間
+
+---
+
+## 📋 Phase 5: ドキュメント・テスト 🎯 低優先度
+
+### 🎯 実装タスク
+
+#### 5.1 Architecture Documentation
+- [ ] **ファイル**: `apps/app/src/features/openai/docs/architecture/`
+- [ ] **タスク**:
+  - [ ] クライアント・サーバー分離図
+  - [ ] データフロー図
+  - [ ] エラーハンドリングフロー
+  - [ ] API仕様書更新
+- [ ] **推定工数**: 4時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
+
+#### 5.2 Unit Tests (Client)
+- [ ] **ファイル**: `apps/app/test/client/services/editor-assistant/`
+- [ ] **タスク**:
+  - [ ] Fuzzy Matching Engine テスト
+  - [ ] Diff Application Engine テスト
+  - [ ] Text Normalization テスト
+  - [ ] Error Handling テスト
+  - [ ] ブラウザ環境テスト対応
 - [ ] **推定工数**: 8時間
 - [ ] **推定工数**: 8時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 中
 - [ ] **優先度**: 中
 
 
+#### 5.3 Integration Tests
+- [ ] **ファイル**: `apps/app/test/integration/editor-assistant/`
+- [ ] **タスク**:
+  - [ ] エンドツーエンドフロー
+  - [ ] パフォーマンステスト
+  - [ ] エラーシナリオテスト
+  - [ ] ブラウザ互換性テスト
+- [ ] **推定工数**: 6時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 中
+
+#### 5.4 User Documentation
+- [ ] **ファイル**: `apps/app/docs/features/editor-assistant/`
+- [ ] **タスク**:
+  - [ ] 機能説明更新
+  - [ ] トラブルシューティング
+  - [ ] 設定ガイド
+  - [ ] 開発者ガイド
+- [ ] **推定工数**: 3時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
+
+**Phase 5 総工数**: 21時間
+- [ ] **優先度**: 中
+
+#### 2B.4 Audit & Logging (サーバー)
+- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/audit.ts` (新規)
+- [ ] **タスク**:
+  - [ ] 使用状況ログ
+  - [ ] エラートラッキング
+  - [ ] パフォーマンス監視
+  - [ ] セキュリティ監査
+- [ ] **推定工数**: 2時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
+
 ---
 ---
 
 
-## 📋 Phase 3: サーバーサイド統合
+## 📋 Phase 3: サーバー・クライアント統合
+
+### アーキテクチャ方針
+**ハイブリッド処理**: サーバーからdiff配列を受信し、クライアントで適用する新しいフロー
 
 
 ### 🎯 実装タスク
 ### 🎯 実装タスク
 
 
-#### 3.1 LlmResponseStreamProcessor更新
-- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/llm-response-stream-processor.ts`
+#### 3.1 edit/index.ts統合 (サーバー)
+- [ ] **ファイル**: `apps/app/src/features/openai/server/routes/edit/index.ts`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] Search/Replace形式のパース対応
-  - [ ] 新しいprocessor連携
+  - [ ] roo-code形式プロンプト統合
+  - [ ] 新しいLLM Response Processor連携
+  - [ ] diff配列レスポンス最適化
   - [ ] エラーハンドリング統合
   - [ ] エラーハンドリング統合
-  - [ ] パフォーマンス最適化
-- [ ] **推定工数**: 5時間
+- [ ] **推定工数**: 4時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
-#### 3.2 edit/index.ts更新
-- [ ] **ファイル**: `apps/app/src/features/openai/server/routes/edit/index.ts`
+#### 3.2 useEditorAssistant統合 (クライアント)
+- [ ] **ファイル**: `apps/app/src/features/openai/client/services/editor-assistant.tsx`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] プロンプトのroo-code形式更新
-  - [ ] 新しいprocessorとの統合
-  - [ ] エラーレスポンスの改善
-  - [ ] ログ出力の追加
-- [ ] **推定工数**: 4時間
+  - [ ] 新しいクライアントプロセッサ統合
+  - [ ] SSEストリーミング対応
+  - [ ] リアルタイム処理フロー
+  - [ ] エラーハンドリング強化
+- [ ] **推定工数**: 6時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
-#### 3.3 依存関係の追加
+#### 3.3 型定義共有化
+- [ ] **ファイル**: `apps/app/src/features/openai/interfaces/editor-assistant/shared-types.ts` (新規)
+- [ ] **タスク**:
+  - [ ] クライアント・サーバー共通型定義
+  - [ ] API仕様の統一
+  - [ ] バリデーションスキーマ共有
+  - [ ] TypeScript strict mode対応
+- [ ] **推定工数**: 2時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 中
+
+#### 3.4 パッケージ依存関係
 - [ ] **ファイル**: `apps/app/package.json`
 - [ ] **ファイル**: `apps/app/package.json`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] `fastest-levenshtein`パッケージの追加
+  - [ ] `fastest-levenshtein`パッケージの追加 (クライアント・サーバー両方)
   - [ ] 型定義ファイルの追加
   - [ ] 型定義ファイルの追加
+  - [ ] ビルド設定の最適化
 - [ ] **推定工数**: 0.5時間
 - [ ] **推定工数**: 0.5時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 高
 - [ ] **優先度**: 高
 
 
 ---
 ---
 
 
-## 📋 Phase 4: クライアントサイド対応
+## 📋 Phase 4: UI・UX改善
+
+### アーキテクチャ方針
+**リアルタイムフィードバック**: クライアントサイド処理の利点を活かしたUX向上
 
 
 ### 🎯 実装タスク
 ### 🎯 実装タスク
 
 
-#### 4.1 useEditorAssistant更新
-- [ ] **ファイル**: `apps/app/src/features/openai/client/services/editor-assistant.tsx`
+#### 4.1 AiAssistantSidebar更新
+- [ ] **ファイル**: `apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar.tsx`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] 新しいdiff形式への対応
-  - [ ] エラーハンドリング強化
-  - [ ] 詳細なエラー表示
-  - [ ] 処理状況の可視化
-- [ ] **推定工数**: 6時間
+  - [ ] リアルタイム処理状況表示
+  - [ ] 詳細なエラー表示UI
+  - [ ] 部分適用結果のプレビュー
+  - [ ] キャンセル・再試行機能
+- [ ] **推定工数**: 5時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 中
 - [ ] **優先度**: 中
 
 
-#### 4.2 AiAssistantSidebar更新
-- [ ] **ファイル**: `apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/AiAssistantSidebar.tsx`
+#### 4.2 Editor統合強化
+- [ ] **ファイル**: `apps/app/src/features/openai/client/components/Editor/EditorAssistantIntegration.tsx` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] 新しいエラー表示UI
-  - [ ] 部分適用結果の表示
-  - [ ] ユーザーフィードバック改善
-- [ ] **推定工数**: 4時間
+  - [ ] リアルタイムdiffプレビュー
+  - [ ] インライン適用確認
+  - [ ] Undo/Redo対応
+  - [ ] キーボードショートカット
+- [ ] **推定工数**: 6時間
+- [ ] **担当者**: 未定
+- [ ] **優先度**: 低
+
+#### 4.3 パフォーマンス監視UI
+- [ ] **ファイル**: `apps/app/src/features/openai/client/components/AiAssistant/PerformanceMonitor.tsx` (新規)
+- [ ] **タスク**:
+  - [ ] 処理時間表示
+  - [ ] メモリ使用量監視
+  - [ ] 成功・失敗率表示
+  - [ ] デバッグ情報表示
+- [ ] **推定工数**: 3時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 低
 - [ ] **優先度**: 低
 
 
@@ -193,9 +423,9 @@
 ### 🎯 実装タスク
 ### 🎯 実装タスク
 
 
 #### 5.1 プロンプト更新
 #### 5.1 プロンプト更新
-- [ ] **ファイル**: `apps/app/src/features/openai/server/routes/edit/index.ts` (instruction関数)
+- [ ] **ファイル**: `apps/app/src/features/openai/server/services/editor-assistant/prompt-generator.ts`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] roo-code形式の指示追加
+  - [ ] roo-code形式の指示統合
   - [ ] Search/Replaceブロックの説明
   - [ ] Search/Replaceブロックの説明
   - [ ] エラー対処方法の記載
   - [ ] エラー対処方法の記載
   - [ ] 多言語対応の確認
   - [ ] 多言語対応の確認
@@ -206,11 +436,12 @@
 #### 5.2 ドキュメント更新
 #### 5.2 ドキュメント更新
 - [ ] **ファイル**: `apps/app/src/features/openai/docs/`
 - [ ] **ファイル**: `apps/app/src/features/openai/docs/`
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] README.mdの更新
+  - [ ] アーキテクチャ図の更新
   - [ ] API仕様書の更新
   - [ ] API仕様書の更新
-  - [ ] 使用例の追加
+  - [ ] クライアント・サーバー責務分離の説明
+  - [ ] パフォーマンス最適化ガイド
   - [ ] トラブルシューティング
   - [ ] トラブルシューティング
-- [ ] **推定工数**: 2時間
+- [ ] **推定工数**: 4時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 低
 - [ ] **優先度**: 低
 
 
@@ -224,6 +455,7 @@
 - [ ] **ファイル**: `apps/app/test/integration/editor-assistant/` (新規)
 - [ ] **ファイル**: `apps/app/test/integration/editor-assistant/` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
   - [ ] サーバー・クライアント連携テスト
   - [ ] サーバー・クライアント連携テスト
+  - [ ] リアルタイム処理フローテスト
   - [ ] エラーケースの検証
   - [ ] エラーケースの検証
   - [ ] パフォーマンステスト
   - [ ] パフォーマンステスト
 - [ ] **推定工数**: 8時間
 - [ ] **推定工数**: 8時間
@@ -236,70 +468,144 @@
   - [ ] 実際のユースケース検証
   - [ ] 実際のユースケース検証
   - [ ] UI操作テスト
   - [ ] UI操作テスト
   - [ ] ブラウザ互換性確認
   - [ ] ブラウザ互換性確認
+  - [ ] パフォーマンス回帰テスト
 - [ ] **推定工数**: 6時間
 - [ ] **推定工数**: 6時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 低
 - [ ] **優先度**: 低
 
 
-#### 6.3 パフォーマンステスト
+#### 6.3 負荷・パフォーマンステスト
 - [ ] **ファイル**: `apps/app/test/performance/editor-assistant/` (新規)
 - [ ] **ファイル**: `apps/app/test/performance/editor-assistant/` (新規)
 - [ ] **タスク**:
 - [ ] **タスク**:
-  - [ ] 大きなファイルでのテスト
+  - [ ] 大きなファイルでのクライアント処理テスト
   - [ ] 複数diff処理のベンチマーク
   - [ ] 複数diff処理のベンチマーク
   - [ ] メモリ使用量の測定
   - [ ] メモリ使用量の測定
+  - [ ] ネットワーク効率の検証
 - [ ] **推定工数**: 4時間
 - [ ] **推定工数**: 4時間
 - [ ] **担当者**: 未定
 - [ ] **担当者**: 未定
 - [ ] **優先度**: 低
 - [ ] **優先度**: 低
 
 
 ---
 ---
 
 
-## 📊 進捗管理
+## 📊 進捗管理 - 更新版
 
 
 ### 全体進捗
 ### 全体進捗
-- **総タスク数**: 20タスク
-- **完了**: 0タスク (0%)
+- **総タスク数**: 22タスク  
+- **完了**: 3タスク (14%) - Phase 1完了
 - **進行中**: 0タスク (0%)
 - **進行中**: 0タスク (0%)
-- **未着手**: 20タスク (100%)
-
-### Phase別進捗
-| Phase | タスク数 | 完了 | 進捗率 | 推定総工数 |
-|-------|----------|------|--------|------------|
-| Phase 1 | 3 | 0 | 0% | 4時間 |
-| Phase 2 | 7 | 0 | 0% | 30.5時間 |
-| Phase 3 | 3 | 0 | 0% | 9.5時間 |
-| Phase 4 | 2 | 0 | 0% | 10時間 |
-| Phase 5 | 2 | 0 | 0% | 5時間 |
-| Phase 6 | 3 | 0 | 0% | 18時間 |
-| **合計** | **20** | **0** | **0%** | **77時間** |
+- **未着手**: 19タスク (86%)
+
+### Phase別進捗  
+| Phase | タスク数 | 完了 | 進捗率 | 推定総工数 | 優先度 |
+|-------|----------|------|--------|------------|---------|
+| **Phase 1** ✅ | 3 | 3 | 100% | 4時間 | 完了 |
+| **Phase 2A** (クライアント) 🎯 | 6 | 0 | 0% | 27時間 | **最高** |
+| **Phase 2B** (サーバー) | 4 | 0 | 0% | 12時間 | 中 |
+| **Phase 3** (統合) | 3 | 0 | 0% | 15時間 | 中 |
+| **Phase 4** (UI/UX) | 3 | 0 | 0% | 13時間 | 低 |
+| **Phase 5** (ドキュメント・テスト) | 4 | 0 | 0% | 21時間 | 低 |
+| **合計** | **22** | **3** | **14%** | **92時間** | - |
+
+### 次の優先アクション 🎯
+
+#### 最高優先 (Phase 2A)
+1. **Client Fuzzy Matching Engine** (4時間)
+2. **Client Diff Application Engine** (5時間) 
+3. **Client Main Processor** (6時間)
+4. **Editor Integration** (5時間)
+
+これらの完了により、基本的なクライアントサイド処理が実現されます。
+
+### アーキテクチャ移行状況
+
+#### ✅ 完了
+- スキーマ・型定義の Search/Replace 対応
+- サーバーサイドプロトタイプ実装(参考用)
+
+#### 🔄 進行中  
+- **アーキテクチャ設計変更**: サーバー → クライアント処理移行
+- **実装方針**: roo-code方式の完全採用
+
+#### 📋 未着手
+- クライアントサイドエンジンの実装
+- サーバー責務の専門化
+- ハイブリッド統合フロー
+
+### 推定完了スケジュール  
+- **Phase 2A** (最優先): 約3.5週間
+- **Phase 2B + 3** (統合): 約3.5週間  
+- **Phase 4 + 5** (仕上げ): 約4週間
+- **総期間**: 約**11週間** (85時間実装 + 文書作成・テスト)
+
+### 技術的負債対応
+- **ESLintエラー**: サーバーサイドプロトタイプファイルに残存 (移行後削除予定)
+- **依存関係**: `fastest-levenshtein`のクライアントサイド対応確認が必要
+- **テスト戦略**: ブラウザ環境での単体テスト環境構築
+
+---
+
+## 🎯 実装開始時の推奨順序
+
+### 段階1: 基盤構築
+1. Client Fuzzy Matching Engine
+2. Client Text Normalization  
+3. Client Error Handling
+
+### 段階2: 処理実装
+4. Client Diff Application Engine
+5. Client Main Processor
+6. Editor Integration
+
+### 段階3: 統合・最適化
+7. Client-Server Integration
+8. useEditorAssistant Hook Update
+9. Real-time Feedback System
+
+この順序により、段階的に機能を積み上げて検証しながら開発を進められます。
+| Phase 2B (サーバー) | 4 | 0 | 0% | 11時間 |
+| Phase 3 (統合) | 4 | 0 | 0% | 12.5時間 |
+| Phase 4 (UI/UX) | 3 | 0 | 0% | 14時間 |
+| Phase 5 (ドキュメント) | 2 | 0 | 0% | 7時間 |
+| Phase 6 (テスト) | 3 | 0 | 0% | 18時間 |
+| **合計** | **26** | **0** | **0%** | **96.5時間** |
 
 
 ### 優先度別
 ### 優先度別
-- **高優先度**: 9タスク (50%)
-- **中優先度**: 6タスク (33%)
-- **低優先度**: 3タスク (17%)
+- **高優先度**: 12タスク (46%)
+- **中優先度**: 8タスク (31%)
+- **低優先度**: 6タスク (23%)
+
+### 新アーキテクチャのメリット
+- **パフォーマンス**: ローカル処理でレスポンス時間50%短縮予想
+- **プライバシー**: ユーザーコンテンツのサーバー送信不要
+- **リアルタイム**: 即座のフィードバックとプレビュー
+- **ネットワーク効率**: diff配列のみ転送でトラフィック削減
+- **オフライン対応**: 処理済みdiffの再適用可能
 
 
 ### 推定スケジュール
 ### 推定スケジュール
-- **開発期間**: 約2-3週間 (1人稼働)
-- **クリティカルパス**: Phase 1 → Phase 2 → Phase 3
-- **並行可能**: Phase 4以降は部分的に並行実装可能
+- **開発期間**: 約3-4週間 (1人稼働)
+- **クリティカルパス**: Phase 1 → Phase 2A → Phase 3
+- **並行可能**: Phase 2B、Phase 4以降は部分的に並行実装可能
 
 
 ---
 ---
 
 
 ## 🎯 次のアクション
 ## 🎯 次のアクション
 
 
-### 即座に着手可能
-1. **Phase 1.1**: LLM Response Schemas更新
-2. **Phase 1.3**: 新しい型定義の追加
-3. **Phase 2.7**: 単体テストの設計
+### 即座に着手可能 (クライアント優先)
+1. **Phase 2A.1**: Fuzzy Matching Engine (クライアント)
+2. **Phase 2A.3**: Text Normalization (クライアント)
+3. **Phase 1.1**: LLM Response Schemas更新
 
 
 ### 依存関係あり
 ### 依存関係あり
-- Phase 2はPhase 1完了後
-- Phase 3はPhase 2完了後
-- Phase 4はPhase 3完了後
+- Phase 2A → Phase 3 → Phase 4
+- Phase 2B は Phase 2A と並行可能
+- Phase 1 完了後すべて着手可能
 
 
 ### リスクと対策
 ### リスクと対策
-- **技術リスク**: Fuzzy matchingの精度調整
-  - **対策**: 段階的な閾値調整とテスト
+- **技術リスク**: クライアント処理パフォーマンス
+  - **対策**: Web Workers、段階的最適化
 - **互換性リスク**: 既存機能への影響
 - **互換性リスク**: 既存機能への影響
   - **対策**: フィーチャーフラグでの段階的移行
   - **対策**: フィーチャーフラグでの段階的移行
+- **アーキテクチャリスク**: サーバー・クライアント連携
+  - **対策**: 共通型定義、詳細な統合テスト
 
 
 ---
 ---
 **ファイル**: `implementation-tasks.md`  
 **ファイル**: `implementation-tasks.md`