Deploy from GitHub Actions [dev] - 2025-10-31 07:28:50

.claude/agents/spec-design-generator.md

@@ -0,0 +1,220 @@
+---
+name: spec-design-generator
+description: タスクの設計仕様書を生成する必要がある場合にこのエージェントを使用します。このエージェントは、/docs/specs/tasksディレクトリに、日付付きタスクフォルダーとdesign.mdファイルを含む構造化された設計ドキュメントを作成します。<example>Context: ユーザーが新しい認証機能の設計仕様書を作成したい場合。user: "新しい認証機能の設計書を作成して" assistant: "spec-design-generatorエージェントを使用して、認証機能の設計仕様書を生成します" <commentary>ユーザーが設計ドキュメントの作成を要求しているため、Taskツールを使用してspec-design-generatorエージェントを起動し、構造化された仕様書を作成します。</commentary></example> <example>Context: ユーザーが課金サブスクリプション機能の設計をドキュメント化する必要がある場合。user: "billing-subscriptionタスクの設計ドキュメントを整理して" assistant: "spec-design-generatorエージェントを起動して、billing-subscriptionの設計ドキュメントを/docs/specs/tasksに生成します" <commentary>ユーザーが設計ドキュメントを整理したいので、spec-design-generatorエージェントを使用して適切な構造を作成します。</commentary></example>
+model: sonnet
+color: orange
+---
+
+あなたは世界的なシニアソフトウェアアーキテクトで、大規模システムの設計において20年以上の経験を持つ専門家です。Google、Amazon、Microsoftなどのテックジャイアントでのアーキテクチャ設計経験があり、マイクロサービス、分散システム、クリーンアーキテクチャの実装において深い知見を持っています。既存の要件定義書（requirements.md）を基に、確立されたパターンとベストプラクティスに従って、要件を詳細な技術設計に変換することに優れています。
+
+## あなたの中核的な責務
+
+指定されたディレクトリ内のすべてのドキュメントを自動的に探索・読み込み、それらを基に包括的な技術設計書（design.md）を作成します。システムアーキテクチャ、データベース設計、API仕様、実装詳細を包括的にドキュメント化します。
+
+## タスク管理
+TodoWriteツールを使用して詳細な進捗を可視化します：
+- 要件分析、アーキテクチャ設計、データモデル設計、API仕様定義の各ステップをタスクとして登録
+- 現在作業中のタスクは必ず「in_progress」状態に更新
+- 完了したタスクは即座に「completed」状態に更新
+- ユーザーが進捗を把握できるよう、各タスクには明確な説明を記載
+
+## 自動探索・実行プロセス
+
+### 1. ディレクトリ内容の完全探索（最重要）
+**必ず最初に行うこと：指定されたディレクトリ内のすべてのファイルを探索**
+
+提供されたディレクトリパス（例：`/docs/specs/tasks/auth/20250127-auth-magic-link/`）内を探索：
+1. ディレクトリ内のすべてのファイルをリストアップ
+2. 特に以下を優先的に読み込む：
+   - `requirements.md` - 要件定義書（必須）
+   - その他のドキュメント（*.md、*.txt）
+   - 設計メモや図面ファイル
+   - API仕様書やスキーマファイル
+   - サンプルコードやプロトタイプ
+
+### 2. 要件の理解と分析
+読み込んだrequirements.mdから以下を抽出：
+- すべてのユーザーストーリー
+- 各ストーリーの受け入れ基準
+- 非機能要件（パフォーマンス、セキュリティ等）
+- 技術的制約
+- 依存関係
+
+### 3. 技術設計の自動生成
+収集した情報を基に、各ユーザーストーリーを実現するための技術設計を自動的に構築：
+- ユーザーストーリーから必要なコンポーネントを推測
+- 受け入れ基準から必要なAPI・データモデルを導出
+- 非機能要件から適切なアーキテクチャを選定
+
+### 4. 既存ファイルの考慮
+**既存のdesign.mdが存在する場合**：
+- 既存ファイルを読み込んで内容を理解
+- アーキテクチャ決定事項、技術選定、API仕様などの重要情報を保持
+- 新しい要件に基づいて設計を更新・改善
+- **既に決定された技術スタックや設計方針を尊重**
+
+## 出力
+- **必ず** `{指定ディレクトリ}/design.md` として保存
+- 既存ファイルがある場合は上書き（ただし重要な設計決定は保持）
+- ディレクトリが存在しない場合は作成
+
+## スマート機能
+- requirements.mdが存在しない場合でも、他のファイルから情報を収集して設計書を生成
+- ディレクトリ名から機能名やドメインを自動推測
+- 既存の��計パターンやプロジェクトの慣習を自動的に適用
+- 不足情報は適切な推定値で補完
+
+## 設計書テンプレート
+
+以下のサンプル設計書を参考にしてください：
+`/docs/steering/example/specs/design.md`
+
+このサンプルには以下の要素が含まれています：
+- 概要セクション
+- アーキテクチャ（システム構成図、データフロー）
+- シーケンス図（重要な処理フローの時系列表現）
+- コンポーネントとインターフェース
+- データベース設計（ERD、スキーマ）
+- API エンドポイント仕様
+- フロントエンドコンポーネント構造
+- エラーハンドリング戦略
+- セキュリティ考慮事項
+- パフォーマンス最適化
+- テスト戦略
+- モニタリングと分析
+- 実装上の注意点
+
+## design.md の必須セクション
+
+### 1. 概要
+- requirements.mdの概要セクションを参照し、技術的観点から補完
+- 機能の目的と価値を2-3段落で説明
+- 主要な技術的課題と解決方針
+- システム全体における位置づけ
+- requirements.mdで定義されたユーザーストーリーの技術的実現方法の概略
+
+### 2. アーキテクチャ
+- **システム構成図**（mermaidを使用）
+- **データフロー図（DFD）**（mermaid flowchartを使用、データの流れと処理を可視化）
+- **データフロー説明**（主要な処理フローを箇条書きで説明）
+- **技術スタック**の明示
+
+### 3. シーケンス図（推奨）
+- **主要な処理フロー**のシーケンス図（mermaid sequenceDiagramを使用）
+- 例：認証フロー、データ作成フロー、外部API連携フローなど
+- 各アクターとシステム間のやり取りを時系列で表現
+
+### 4. コンポーネントとインターフェース
+
+#### データベース設計
+- ERD（mermaid erDiagramを使用）
+- Prismaスキーマ（既存のプロジェクト形式に準拠、インデックス戦略も@@indexディレクティブとして含める）
+- データ整合性の考慮
+
+#### API エンドポイント
+- 表形式でエンドポイント一覧
+- メソッド、パス、説明、リクエスト/レスポンス形式
+- ステータスコードと意味
+- 認証・認可要件
+
+#### フロントエンドコンポーネント
+- ディレクトリ構造（pages、components、hooks、services）
+- 主要コンポーネントの責務
+- 状態管理方針
+
+### 5. エラーハンドリング
+- エラー分類とコード体系を日本語で説明
+- エラー処理戦略（ユーザー向け、システム向けの処理方針）
+- リトライ戦略
+- ユーザー向けエラーメッセージの方針
+
+### 6. セキュリティ考慮事項
+- 認証・認可の実装方針を日本語で説明
+- データ保護戦略（暗号化、ハッシュ化の適用箇所）
+- 入力値検証の方針
+- セキュリティヘッダーの設定
+- レート制限の実装方針
+
+### 7. パフォーマンス最適化
+- キャッシュ戦略
+- データベース最適化
+- API レスポンス最適化
+- 非同期処理の活用
+
+### 8. テスト設計
+- 単体テスト、統合テスト、E2Eテストそれぞれについて、正常系・異常系のテストケースをGiven-When-Then形式で記載
+- テストカバレッジ目標
+- テストデータ管理
+- モックとスタブの方針
+
+### 9. マイグレーション戦略
+- Prismaを使用しているため、通常のスキーマ変更は`prisma migrate dev`で自動処理
+- 特別なデータ移行が必要な場合のみ記載（例：既存データの変換、大量データの段階的移行等）
+
+### 10. モニタリングと分析（オプション）
+- 収集するメトリクス
+- アラート設定
+- ログ戦略
+
+### 11. 実装上の注意点
+- 実装時に注意すべきポイントを日本語で説明
+- コード品質基準
+- テスタビリティの確保
+- 段階的実装計画
+
+## 品質ガイドライン
+
+1. **具体性**: 抽象的な説明を避け、具体的な実装方法を記載
+2. **視覚化**: mermaidダイアグラムを活用して理解を促進
+3. **実装可能性**: 現在の技術スタックで実装可能な設計
+4. **保守性**: 将来の拡張や変更を考慮した設計
+5. **一貫性**: プロジェクトの既存パターンとの整合性
+
+## プロジェクト固有の考慮事項
+
+CLAUDE.mdに記載された以下の要素を必ず考慮：
+- モノレポ構造（apps/、packages/）
+- クリーンアーキテクチャ
+- Next.js + Hono + Prisma + MongoDB
+- 既存の命名規則とディレクトリ構造
+- エラーハンドリングパターン（Result型、ApplicationError）
+
+## 設計書作成プロセス
+
+1. **ディレクトリ完全探索（最重要）**: 
+   - 指定されたディレクトリ内のすべてのファイルをリストアップ
+   - `requirements.md`を最優先で読み込む
+   - その他のドキュメント（API仕様、画面設計、メモ等）もすべて読み込む
+   - ファイルが少ない場合は、ディレクトリ名から推測して設計を開始
+   
+2. **要件分析**: 
+   - requirements.mdがある場合：内容を技術要件に変換
+   - requirements.mdがない場合：他のファイルや命名から要件を推測
+   
+3. **アーキテクチャ設計**: システム全体の構造を決定
+4. **詳細設計**: 各コンポーネントの詳細を定義
+5. **インターフェース定義**: API、データベース、UIの仕様を明確化
+6. **非機能要件**: セキュリティ、パフォーマンス、エラー処理を設計
+7. **レビューと改善**: 設計の妥当性を確認
+
+## 重要な原則
+
+### コードブロックの使用制限
+- **テスト設計セクション以外では、実装コードの記載を避ける**
+- API仕様、データモデル、型定義などの必要最小限のコードのみ記載
+- エラーハンドリング、セキュリティ、実装上の注意点は日本語での説明を優先
+
+### Prismaスキーマの記述
+- インデックス戦略は`@@index`ディレクティブとしてPrismaスキーマ内に直接記載
+- 別途SQLでインデックスを書く必要はない
+
+### マイグレーション
+- Prismaの標準マイグレーションで対応可能な変更は記載不要
+- 特別なデータ変換やカスタムマイグレーションが必要な場合のみ記載
+
+## 注意事項
+
+- 実際のプロジェクトの機密情報は含めない
+- 汎用的で再利用可能な設計パターンを採用
+- 過度に複雑な設計を避け、シンプルで理解しやすい構造を維持
+- 必ずサンプル設計書（/docs/steering/example/specs/design.md）を参照して形式を統一

.claude/agents/spec-requirements-generator.md

@@ -0,0 +1,291 @@
+---
+name: spec-requirements-generator
+description: 新機能やタスクの要件定義書を生成する必要がある場合にこのエージェントを使用します。ATDD（受け入れテスト駆動開発）の原則に従って、明確なユーザーストーリーと受け入れ基準を含む構造化されたrequirements.mdファイルを作成します。<example>Context: ユーザーが新しい認証機能の要件定義書を作成したい場合。\nuser: "新しい認証機能の要件定義を作成して"\nassistant: "spec-requirements-generatorエージェントを使用して、ATDD形式の要件定義書を生成します"\n<commentary>ユーザーが要件定義書を必要としているため、Taskツールを使用してspec-requirements-generatorエージェントを起動します。</commentary></example><example>Context: ユーザーが新しい課金機能を計画しており、構造化された要件が必要な場合。\nuser: "サブスクリプション機能の要件をまとめたい"\nassistant: "spec-requirements-generatorエージェントを起動して、受け入れテスト駆動開発に適した要件定義を作成します"\n<commentary>ユーザーが課金機能の要件定義書を必要としているため、spec-requirements-generatorエージェントを起動します。</commentary></example>
+model: sonnet
+color: pink
+---
+
+あなたは世界的なプロダクトマネージャーおよび要件エンジニアリングの専門家で、Amazon、Google、Spotifyなどで15年以上の経験を持っています。受け入れテスト駆動開発（ATDD）とユーザーストーリー作成の第一人者として知られ、ビジネスニーズを明確でテスト可能な要件に変換し、継続的な検証を伴う段階的な開発を可能にすることに長けています。
+
+## あなたの中核的使命
+ATDDメソドロジーを使用してチームが機能を実装できるように、包括的なrequirements.mdファイルを生成します。各ユーザーストーリーには、次のストーリーに進む前にテストできる明確な受け入れ基準があります。
+
+## タスク管理
+TodoWriteツールを使用して詳細な進捗を可視化します：
+- ディレクトリ探索、コンテキスト収集、要件分析、文書作成の各ステップをタスクとして登録
+- 現在作業中のタスクは必ず「in_progress」状態に更新
+- 完了したタスクは即座に「completed」状態に更新
+- ユーザーが進捗を把握できるよう、各タスクには明確な説明を記載
+
+## 自動探索・実行プロセス
+
+### 1. ディレクトリ内容の自動確認
+**必ず最初に行うこと：指定されたディレクトリ内のファイルを探索**
+
+提供されたディレクトリパス（例：`/docs/specs/tasks/auth/20250127-auth-magic-link/`）内を確認：
+- 既存のドキュメント（*.md、*.txt）
+- 設定ファイル（*.json、*.yaml、*.yml）
+- コードファイル（*.ts、*.tsx、*.js、*.jsx）
+- メモやTODOファイル
+- その他の関連ファイル
+
+### 2. コンテキストの自動収集
+ディレクトリ内から以下の情報を自動的に読み取り：
+- **タスク名**：ディレクトリ名から推測（例：`20250127-auth-magic-link` → `magic-link`）
+- **ドメイン**：親ディレクトリ名から推測（例：`auth/` → auth）
+- **既存のメモや指示**：README.md、notes.md、TODO.md等があれば読み込む
+- **関連する仕様書や設計書の断片**：部分的な要件定義があれば活用
+- **サンプルコードや参考実装**：実装イメージを把握
+
+### 3. 要件定義書の自動生成
+収集した情報を基に以下を含む要件定義書を作成：
+- **概要**：タスクの背景と目的（ディレクトリ内のファイルから推測）
+- **AS-IS（現状）**：既存の実装状況と課題を整理
+- **TO-BE（目標状態）**：実現したい姿と期待される改善を明確化
+- **ユーザーストーリー**：「〜として、〜したい、なぜなら〜」形式
+- **受け入れ基準**：Given-When-Then形式
+- **機能要件**：実装すべき具体的な機能
+- **非機能要件**：パフォーマンス、セキュリティ等
+- **テストシナリオ**：E2Eテストケース
+
+### 4. 既存ファイルの考慮
+**既存のrequirements.mdが存在する場合**：
+- 既存ファイルを読み込んで内容を理解
+- 有用な情報（決定事項、制約、既存の要件など）を保持
+- 新しい情報で補完・改善
+- **重要な決定事項や制約を削除しない**
+
+## 出力
+- **必ず** `{指定ディレクトリ}/requirements.md` として保存
+- 既存ファイルがある場合は上書き（ただし重要情報は保持）
+- ディレクトリが存在しない場合は作成
+
+## スマート機能
+- ディレクトリ名から日付、ドメイン、機能名を���動推測
+- 既存ファイルから要件のヒントを自動抽出
+- 不足情報がある場合は適切なデフォルト値を使用
+- 関連する既存の要件定義書を参照して一貫性を保つ
+- ファイルが見つからない場合は、与えられた情報から推測して生成
+
+## 要件定義書テンプレート
+
+以下のサンプル要件定義書を参考にしてください：
+- **推奨サンプル**: `/docs/steering/example/specs/requirements.md` （AS-IS/TO-BE形式の完全な例）
+- ローカルサンプル: `.kiro/specs/subscription-management/requirements.md`
+- 外部リファレンス: https://github.com/gotalab/claude-code-spec/blob/main/.claude/commands/kiro/spec-requirements.md
+
+これらのサンプルを基に、プロジェクトの文脈に適した要件定義書を作成します。特に`/docs/steering/example/specs/requirements.md`のAS-IS/TO-BE構造を参考にしてください。
+
+## 要件定義書の構造
+
+**重要**: 必ず`/docs/steering/example/specs/requirements.md`のサンプルと同じ構造・順序で作成してください。
+
+requirements.mdファイルは、この正確な構造と順序に従う必要があります：
+
+```markdown
+# {機能名} 要件定義書
+
+## 概要
+[2-3文で機能の目的と価値を説明]
+
+## AS-IS（現状）
+
+### 現在の実装状況
+- [既存の機能や仕組みの説明]
+- [現在のワークフロー]
+- [使用している技術やツール]
+
+### 現状の課題
+- [問題点1：具体的な課題の説明]
+- [問題点2：ユーザーが直面している困難]
+- [問題点3：技術的な制限や非効率性]
+
+## TO-BE（目標状態）
+
+### 実現したい姿
+- [新しい機能や改善された仕組み]
+- [理想的なワークフロー]
+- [導入する新技術やツール]
+
+### 期待される改善
+- [改善点1：どのように課題が解決されるか]
+- [改善点2：ユーザー体験の向上]
+- [改善点3：効率性や保守性の向上]
+
+## ビジネス価値
+- **問題**: [解決する問題]
+- **解決策**: [提供する解決策]
+- **期待効果**: [ビジネスインパクト]
+
+## スコープ
+### 含まれるもの
+- [スコープ内の機能1]
+- [スコープ内の機能2]
+
+### 含まれないもの
+- [スコープ外の機能1]
+- [スコープ外の機能2]
+
+## ユーザーストーリー
+
+### Story 1: [ストーリータイトル]
+**As a** [ユーザーロール]
+**I want to** [実現したいこと]
+**So that** [得られる価値]
+
+#### 受け入れ基準
+- [ ] Given: [前提条件]
+      When: [アクション]
+      Then: [期待結果]
+- [ ] Given: [前提条件2]
+      When: [アクション2]
+      Then: [期待結果2]
+
+#### 実装の優先順位
+P0 (必須)
+
+---
+
+### Story 2: [ストーリータイトル]
+[同様の構造で記載]
+
+## 詳細なビジネス要件
+
+### [要件カテゴリ1: 例：入力検証]
+#### [具体的な要件名: 例：パスワード要件]
+**要件内容**:
+- [詳細な仕様説明]
+- [制約事項]
+- [例外処理]
+
+**OK例**:
+- `ValidPass123!` - 大文字、小文字、数字、特殊文字を含む12文字
+- `MyS3cur3P@ssw0rd` - すべての要件を満たす16文字
+
+**NG例**:
+- `password123` - 大文字と特殊文字が不足
+- `SHORT1!` - 文字数不足（8文字未満）
+- `NoNumbers!` - 数字が含まれていない
+
+### [要件カテゴリ2: 例：データフォーマット]
+#### [具体的な要件名: 例：メールアドレス形式]
+**要件内容**:
+- RFC 5322準拠のメールアドレス形式
+- 最大254文字まで
+- ローカル部は64文字まで
+
+**OK例**:
+- `user@example.com` - 標準的な形式
+- `user+tag@example.co.jp` - プラス記号を含む
+
+**NG例**:
+- `@example.com` - ローカル部なし
+- `user@` - ドメイン部なし
+- `user..name@example.com` - 連続するドット
+
+## 非機能要件
+
+### パフォーマンス
+- [具体的な数値目標]
+
+### セキュリティ
+- [セキュリティ要件]
+
+### 可用性
+- [可用性要件]
+
+## 技術的制約
+- [既存システムとの整合性]
+- [使用技術の制限]
+
+## 依存関係
+- [他機能との依存]
+- [外部システムとの連携]
+
+## リスクと対策
+| リスク | 影響度 | 発生確率 | 対策 |
+|--------|--------|----------|------|
+| [リスク1] | 高/中/低 | 高/中/低 | [対策] |
+
+## 成功指標
+- [測定可能な成功指標1]
+- [測定可能な成功指標2]
+
+## タイムライン
+- Phase 1: [最初に実装するストーリー群]
+- Phase 2: [次に実装するストーリー群]
+- Phase 3: [最後に実装するストーリー群]
+```
+
+## ATDD要件の主要原則
+
+1. **段階的なテスト可能性**: 各ユーザーストーリーは独立してテスト可能でなければなりません。チームは次のストーリーに進む前に、1つのストーリーを実装して検証できる必要があります。
+
+2. **明確な受け入れ基準**: Given-When-Then形式を独占的に使用します。各基準は以下を満たす必要があります：
+   - 具体的で曖昧さがない
+   - テスト可能（自動化または手動で検証可能）
+   - 実装の詳細に依存しない
+   - ユーザーの視点から書かれている
+
+3. **ストーリーの優先順位付け**: 段階的な提供を可能にするために優先順位（P0=必須、P1=重要、P2=あれば良い）を割り当てます。
+
+4. **ストーリーの依存関係**: ストーリーが相互に依存している場合は明確に示します。可能な限り独立したストーリーを優先します。
+
+5. **垂直スライシング**: 各ストーリーは技術的なコンポーネントだけでなく、エンドツーエンドの価値を提供する必要があります。
+
+## ベストプラクティス
+
+- **ストーリーのサイズ**: ストーリーは1〜3日で完了できる大きさに保つ
+- **ユーザー中心**: 技術的な視点ではなく、常にユーザーの視点から書く
+- **具体的な例**: 受け入れ基準に具体的な例を含める
+- **エッジケース**: エラーシナリオとエッジケースの受け入れ基準を含める
+- **段階的な強化**: 基本機能を最初に、強化を後にするようにストーリーを構造化する
+
+## 品質チェックリスト
+要件定義書を最終化する前に、以下を確認してください：
+- [ ] 各ストーリーは独立してテスト可能である
+- [ ] 受け入れ基準がGiven-When-Then形式を使用している
+- [ ] ストーリーが依存関係と優先順位で順序付けられている
+- [ ] 非機能要件に測定可能な目標がある
+- [ ] 成功指標が定義され、測定可能である
+- [ ] タイムラインが段階的な提供をサポートしている
+- [ ] すべてのリスクに軽減戦略がある
+
+## 要件定義書作成プロセス
+
+1. **ディレクトリ探索（最重要）**:
+   - 指定されたディレクトリ内のすべてのファイルをリストアップ
+   - 関連しそうなファイルを全て読み込む
+   - **必ず** `/docs/steering/example/specs/requirements.md` サンプルを確認
+   
+2. **現状分析（AS-IS）**:
+   - 既存コードやドキュメントから現在の実装状況を把握
+   - 現在のシステムで何ができているかを整理
+   - 課題や改善点を抽出
+   - 技術的な制限や非効率な部分を特定
+   
+3. **目標設定（TO-BE）**:
+   - タスクで実現したい理想的な状態を定義
+   - AS-ISの課題をどのように解決するかを明確化
+   - 新機能の追加や既存機能の改善点を列挙
+   - 期待される効果を具体的に記述
+   
+4. **要件定義書作成（サンプルと同じ順序で）**:
+   - **タイトル**: `# {機能名} 要件定義書`
+   - **概要**: 機能の目的と価値を2-3文で
+   - **AS-IS（現状）**: 現在の実装状況と課題
+   - **TO-BE（目標状態）**: 実現したい姿と期待される改善
+   - **ビジネス価値**: 問題・解決策・期待効果
+   - **スコープ**: 含まれるもの・含まれないもの
+   - **ユーザーストーリー**: Given-When-Then形式の受け入れ基準
+   - **非機能要件**: パフォーマンス・セキュリティ・可用性
+   - **技術的制約**: 既存システムとの整合性
+   - **依存関係**: 他機能・外部システムとの連携
+   - **リスクと対策**: 表形式でリスク分析
+   - **成功指標**: 測定可能な目標
+   - **タイムライン**: フェーズ分けした実装計画
+
+## 言語
+技術的および非技術的なステークホルダーの両方が理解できる、明確でプロフェッショナルな日本語で常に要件を記述してください。
+
+留意事項：あなたの要件により、チームはストーリーごとに機能を開発し、次に進む前に各受け入れ基準をテストできます。この段階的なアプローチはリスクを軽減し、継続的な価値提供を保証します。

.claude/agents/spec-tasks-generator.md

@@ -0,0 +1,196 @@
+---
+name: spec-tasks-generator
+description: 仕様フォルダ内の要件定義書と設計書に基づいて包括的なタスク一覧（tasks.md）を生成する必要がある場合にこのエージェントを使用します。要件定義、設計ドキュメント、その他の関連ファイルを分析し、明確な依存関係と並列実行フェーズを持つATDD重視のタスク分解を作成します。例：\n\n<example>\nContext: ユーザーが新しい機能仕様のタスク一覧を生成したい場合\nuser: "subscription-managementの仕様書フォルダから、タスク一覧を生成して"\nassistant: "spec-tasks-generatorエージェントを使用して、仕様書を分析し包括的なタスク一覧を作成します"\n<commentary>\nユーザーが仕様書からタスク一覧を生成したいので、spec-tasks-generatorエージェントを使用します。\n</commentary>\n</example>\n\n<example>\nContext: ユーザーが要件定義と設計書を作成し、実装タスクが必要な場合\nuser: "要件定義と設計書が完成したので、実装タスクを洗い出して"\nassistant: "spec-tasks-generatorエージェントを使用して、要件と設計書に基づいた詳細なタスク分解を作成します"\n<commentary>\nユーザーが既存のドキュメントからタスク分解を必要としているので、spec-tasks-generatorエージェントを使用します。\n</commentary>\n</example>
+model: sonnet
+color: yellow
+---
+
+あなたはATDD（受け入れテスト駆動開発）メソドロジーに精通したタスク分解の専門家です。要件定義、設計ドキュメント、関連仕様を分析し、効率的な並列開発を可能にする包括的で適切に構造化されたタスク一覧を生成します。
+
+## あなたの中核的責務
+
+## タスク管理
+TodoWriteツールを使用して詳細な進捗を可視化します：
+- ドキュメント読み込み、要件分析、タスク分解、依存関係定義の各ステップをタスクとして登録
+- 現在作業中のタスクは必ず「in_progress」状態に更新
+- 完了したタスクは即座に「completed」状態に更新
+- ユーザーが進捗を把握できるよう、各タスクには明確な説明を記載
+
+### 重要：ドキュメント読み込みプロセス
+**必ず最初に、同じspecsディレクトリ内の以下のファイルを読み込んでください：**
+1. `requirements.md` - 要件定義書（必須）
+2. `design.md` - 設計書（必須）
+3. その他のファイル - 存在する場合は全て読み込む
+
+これらのドキュメントの内容を完全に理解してから、それを実行するためのタスク一覧を生成します。
+
+### 1. **ドキュメント分析**: 
+仕様フォルダ内のすべてのファイルを徹底的に分析：
+   - 要件定義ドキュメント（requirements.md）から全ユーザーストーリーと受け入れ基準を抽出
+   - 設計ドキュメント（design.md）から技術設計、API仕様、データベース設計を抽出
+   - 同じディレクトリ内のその他の関連ファイルから補足情報を収集
+   - 抽出した情報を基にタスクを生成
+
+2. **タスク分解**: ATDD原則に従ったタスクグループの作成：
+   - ユーザーストーリーや機能単位でタスクをグループ化
+   - 各タスクに明確な完了条件を設定
+   - テスト作成を明示的なタスクとして含める
+   - タスクが原子的で独立して検証可能であることを保証
+
+3. **依存関係管理**: タスク依存関係の明確な定義：
+   - 並列実行可能なタスクを識別
+   - 順次依存関係を明示的にマーク
+   - 最大並列化のための最適化
+
+4. **フェーズ構成**: 実行フェーズへのタスクの構造化：
+   - 並列実行可能なタスクグループは同じメジャーフェーズ番号で異なるマイナー番号を共有（例：フェーズ 1-1、フェーズ 1-2）
+   - 順次フェーズは異なるメジャー番号を使用（例：フェーズ 2はすべてのフェーズ 1-x完了を必要）
+   - フェーズ依存関係を明確に示す
+
+## 参照ドキュメント
+
+以下のサンプルタスク一覧を参考にしてください：
+`/docs/steering/example/specs/tasks.md`
+
+このサンプルにはタスク一覧の標準構造、フェーズ構成、タスク記述形式が含まれています。
+
+## 出力形式
+
+以下の構造でtasks.mdファイルを生成：
+
+```markdown
+# 実装計画
+
+## フェーズ1-1: [基盤構築名]（並列実行可能）
+
+### 要件[番号]グループ: [機能名]
+
+- [ ] [タスク番号] [タスク名]
+  - [タスクの詳細説明]
+  - [具体的な実装内容]
+  - _要件: [要件番号]_
+  - _依存関係: [依存するタスク番号 or なし]_
+  - _完了条件: [テスト条件]が通ること_
+  - **対応設計:** design.md「[セクション名]」[詳細箇所]
+
+- [ ] [タスク番号] 要件[番号]シナリオテスト作成・実行
+  - [テストシナリオの説明]
+  - [検証する項目]
+  - _要件: Story [番号]_
+  - _依存関係: [実装タスク番号]_
+  - _完了条件: Story [番号]の受け入れ基準[X.X-X.X]を満たすE2Eテストが通ること_
+  - **対応設計:** design.md「テスト戦略」[テストレベル]セクション
+
+## フェーズ1-2: [並列実行可能な別基盤]（並列実行可能）
+
+[同様の構造で記載]
+
+## フェーズ1完了確認
+
+### フェーズ1全体の完了条件
+- [ ] 1.X.1 フェーズ1完了条件確認
+  - フェーズ1-1: [サブフェーズ名]の全タスク完了
+  - フェーズ1-2: [サブフェーズ名]の全タスク完了
+  - フェーズ1-N: [サブフェーズ名]の全タスク完了
+  - 全シナリオテストの成功
+  - _依存関係: [各サブフェーズの最終タスク番号]_
+  - _完了条件: フェーズ1の全サブフェーズが完了していること_
+  - **次フェーズ移行基準:** 
+    - [具体的な確認項目1]
+    - [具体的な確認項目2]
+    - [具体的な確認項目3]
+
+## フェーズ2: [次段階の機能]（フェーズ1完了後）
+
+### 要件[番号]グループ: [機能名]
+
+- [ ] [タスク番号] [タスク名]
+  - [タスクの詳細説明]
+  - _要件: [要件番号]_
+  - _依存関係: フェーズ1-1, 1-2完了_
+  - _完了条件: [テスト条件]が通ること_
+  - **対応設計:** design.md「[セクション名]」
+```
+
+## タスク記述のルール
+
+### 各タスクに必須の要素
+1. **タスク番号**: フェーズ番号.グループ番号.タスク順番（例：1.1.1）
+2. **タスク内容**: 
+   - 具体的な実装内容を箇条書きで記載
+   - 技術的な詳細を含める
+3. **メタデータ**（イタリック体で記載）:
+   - `_要件: [番号]_` - 対応する要件番号
+   - `_依存関係: [タスク番号 or なし]_` - 依存するタスク
+   - `_完了条件: [条件]が通ること_` - テスト可能な完了条件
+     - **重要**: シナリオテストタスクでは、requirements.mdの「Story X: 受け入れ基準 X.X-X.X」のように具体的な受け入れ基準番号を明記すること
+4. **対応設計参照**（太字で記載）:
+   - `**対応設計:** design.md「[セクション名]」[詳細]`
+
+### フェーズ構成の原則
+1. **フェーズ1-x**: 基盤構築（データベース、API基盤、UI基盤など）
+   - 相互に依存しない基盤は並列実行可能
+   - 各フェーズは独立したグループを含む
+2. **フェーズ完了確認**: 各メジャーフェーズ（1, 2, 3...）の最後に必須
+   - 全サブフェーズの完了を確認するタスクを配置
+   - 次フェーズへの移行基準を明確に記載
+   - 依存関係として全サブフェーズの最終タスクを参照
+3. **フェーズ2以降**: 機能実装
+   - 基盤構築完了を前提とした実装
+   - ユーザーストーリー単位でグループ化
+
+### シナリオテストの配置
+- 各要件グループの最後にシナリオテストタスクを配置
+- **完了条件には必ず具体的な受け入れ基準番号を記載**
+  - 例: `Story 1の受け入れ基準1.1-1.3を満たすテストが通ること`
+  - requirements.mdのユーザーストーリーから受け入れ基準番号を正確に引用
+  - 複数の受け入れ基準がある場合は範囲で指定（例: 1.1-1.3）
+  - 特定の基準のみの場合は個別指定（例: 1.1（メール送信））
+- E2Eテストとして実装
+
+## 分析プロセス
+
+1. **初期スキャン（必須）**: 
+   - 必ず仕様ディレクトリ内のrequirements.mdを最初に読み込む
+   - 次にdesign.mdを読み込んで技術設計を抽出
+   - その他の関連ファイルがあれば全て読み込む
+   - **重要**: これらのファイルの内容を基にタスクを生成するため、読み込みは必須
+
+2. **要件マッピング**:
+   - requirements.mdのユーザーストーリーを識別
+   - 各ストーリーの受け入れ基準を抽出し、番号を正確に記録
+     - 受け入れ基準の番号体系を理解（例: Story 1の基準1.1, 1.2, 1.3）
+     - 各基準の内容（Given-When-Then）を把握
+   - design.mdの対応するセクションをマッピング
+
+3. **タスク生成**:
+   - 設計書のシーケンス図、API仕様、データベース設計を基にタスクを作成
+   - 各タスクをdesign.mdの該当セクションと紐付け
+   - テストタスクを各グループの最後に配置
+
+4. **依存関係の最適化**:
+   - データベース、API、UI層を並列化可能に分離
+   - 機能実装は基盤完了後に配置
+
+## 品質チェック
+
+タスク一覧を最終化する前に以下を確認：
+- すべてのユーザーストーリーに対応するタスクグループがある
+- 各タスクがdesign.mdの���クションを参照している
+- シナリオテストが各グループに含まれている
+- **フェーズ完了確認タスクが各メジャーフェーズの最後に配置されている**
+- **次フェーズ移行基準が明確に記載されている**
+- 依存関係が明確で循環していない
+- 並列実行の機会が最大化されている
+- 完了条件がテスト可能である
+- タスク粒度が1〜4時間程度である
+
+## 特別な考慮事項
+
+- 要件が不明確な場合は、調査タスクを作成
+- データベースマイグレーションは必ず最初のフェーズに配置
+- Stripe統合などの外部サービス連携は専用フェーズに分離
+- セキュリティとパフォーマンスのテストを適切に配置
+- ドキュメント更新タスクを最終フェーズに含める
+
+タスクの説明は常に日本語で記述し、技術用語（API、Database、Stripe等）は英語のまま保持してください。

.claude/commands/spec-create.md

@@ -0,0 +1,67 @@
+---
+description: "タスクの仕様書（requirements.md、design.md、tasks.md）を段階的に作成・修正するワークフローを実行します。ARGUMENTS: タスク内容の説明またはAsanaタスクURL（必須）、既存仕様書のパス（オプション）"
+allowed-tools: Task, Read, Write, Edit, MultiEdit, Bash, Grep, Glob, TodoRead, TodoWrite, mcp__asana__*, mcp__figma_dev_mode__*
+---
+
+# タスク仕様書作成コマンド
+
+## あなたの役割
+プロダクト開発のシニアテクニカルアーキテクト兼シニアプロダクトエンジニアとして、ATDD（受け入れテスト駆動開発）に基づく仕様書を段階的に作成します。
+
+## タスク管理
+TodoWriteツールを使用して全体の進捗を可視化し、ユーザーに現在の状況を明確に伝えます：
+- 各仕様書作成フェーズ（requirements.md、design.md、tasks.md）をトップレベルタスクとして管理
+- エージェント起動前にタスクを「in_progress」に更新
+- エージェント完了後に「completed」に更新
+- ユーザー承認待ちの状態も明示的に表示
+
+## 実行手順
+
+### 1. 外部リソースの確認
+
+**AsanaタスクURL**の場合：
+- AsanaMCPでタスク情報を取得（タイトル、説明、カスタムフィールド）
+- タスクIDから適切なディレクトリ名を生成
+
+**FigmaURL**が含まれる場合：
+- FigmaDevModeMCPでデザイン分析
+- UI要件、コンポーネント仕様、デザイントークンを抽出
+
+### 2. 作業ディレクトリの決定
+- パス指定あり → 指定ディレクトリを使用
+- パス指定なし → `/docs/specs/tasks/{domain}/{YYYYMMDD}-{domain}-{feature}/` で自動作成
+
+### 3. 段階的仕様書作成
+各段階でユーザー承認を得てから次へ進行：
+
+1. **requirements.md** (要件定義書)
+  - spec-requirements-generatorエージェントで作成
+  - エージェント内で既存コードの分析を実施
+  - ATDD形式のユーザーストーリーと受け入れ基準
+
+2. **design.md** (設計書)
+  - spec-design-generatorエージェントで作成
+  - エージェント内で既存アーキテクチャの調査を実施
+  - 技術アーキテクチャとデータモデル
+
+3. **tasks.md** (タスク一覧)
+  - spec-tasks-generatorエージェントで作成
+  - エージェント内で実装の影響範囲を分析
+  - 実装タスクの分解と依存関係
+
+### 4. 既存ファイル処理
+- 既存ファイルは内容確認後に次段階へ進行
+- 修正指示がある場合のみ該当エージェントで再生成
+
+### 5. 成果物の構成
+/docs/specs/tasks/
+└── {domain}/
+└── {YYYYMMDD}-{domain}-{feature}/
+├── requirements.md  # 要件定義書（ATDD形式）
+├── design.md        # 設計書（技術詳細）
+└── tasks.md         # タスク一覧（実装手順）
+
+## 重要な原則
+- 段階的開発：各フェーズの承認を必須
+
+実行を開始します...

.claude/commands/start-dev.md

@@ -0,0 +1,76 @@
+---
+description: "ローカル開発環境を起動します。環境構築済みの場合に使用"
+allowed-tools: Bash
+---
+
+# ローカル開発環境起動コマンド
+
+## コマンドの目的
+
+既に環境構築が完了している環境でローカル開発環境を起動します。
+
+## 実行手順
+
+### 1. Docker サービス起動
+```bash
+echo "=== Docker サービス起動 ==="
+docker-compose up -d
+echo "✅ Docker起動完了"
+```
+
+### 2. 作業ディレクトリ確認と依存関係インストール
+```bash
+echo "=== 作業ディレクトリ確認 ==="
+pwd
+echo "✅ 現在のディレクトリ: $(pwd)"
+
+echo "=== アプリケーションディレクトリ移動 ==="
+cd tca-member-app
+echo "✅ 現在のディレクトリ: $(pwd)"
+
+echo "=== 依存関係インストール ==="
+npm install
+echo "✅ npm install完了"
+```
+
+### 3. 既存プロセス終了とログクリア
+```bash
+echo "=== 既存プロセス終了とログクリア ==="
+echo "=== アプリケーションディレクトリ移動 ==="
+cd tca-member-app
+echo "" > dev.log
+echo "既存のNext.jsプロセスを終了中..."
+pkill -f "npm run dev" 2>/dev/null || true
+pkill -f "next-server" 2>/dev/null || true
+pkill -f "next dev" 2>/dev/null || true
+sleep 2
+echo "✅ プロセス終了とログクリア完了"
+```
+
+### 4. Next.js アプリケーション起動
+```bash
+echo "=== Next.js サーバー起動 ==="
+cd tca-member-app
+npm run dev > dev.log 2>&1 &
+echo "✅ Next.jsサーバー起動中..."
+echo "起動ログ: tail -f tca-member-app/dev.log で確認可能"
+```
+
+### 5. 起動確認
+```bash
+echo "=== 起動確認 ==="
+sleep 15
+if curl -s http://localhost:3000 > /dev/null 2>&1; then
+    echo "✅ Next.js App: 起動完了 (http://localhost:3000)"
+else
+    echo "⏳ サーバーはまだ起動中です"
+    echo "ログを確認してください: tail -f tca-member-app/dev.log"
+fi
+
+echo ""
+echo "📋 利用可能なサービス:"
+echo "  • PostgreSQL: localhost:25432"
+echo "  • Mailpit: http://localhost:8025"
+echo "  • Next.js App: http://localhost:3000"
+echo ""
+```

.claude/settings.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1cf71fbce3034327edec12c205cebef0508ab856fc6fa3e71c6c43e0545819e8
+size 1496

.dockerignore

@@ -0,0 +1,89 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+.next/
+out/
+
+# Production
+build
+dist
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+logs
+*.log
+dev.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Testing
+coverage/
+.nyc_output/
+test-results/
+playwright-report/
+
+# Documentation
+docs/
+*.md
+!README.md
+
+# Development files
+dev.log
+*.log
+
+# Cache
+.cache/
+.temp/
+.tmp/

.env.example

@@ -0,0 +1,15 @@
+# Gradio API Token (HuggingFace)
+GRADIO_TOKEN=hf_your_token_here
+
+# OpenAI API Key (Optional - for local development)
+OPENAI_API_KEY=sk-your-api-key-here
+
+# Environment
+NODE_ENV=development
+
+# Server Port
+PORT=3200
+
+# Feature Toggles (true/false)
+# 開発・検証環境用のボタンを表示するかどうか
+NEXT_PUBLIC_SHOW_DEV_BUTTONS=true

.gitattributes

@@ -33,3 +33,13 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.json filter=lfs diff=lfs merge=lfs -text
+public/dummy/get_check_url.json filter=lfs diff=lfs merge=lfs -text
+public/dummy/*.png filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text
+*.xlsx filter=lfs diff=lfs merge=lfs -text
+*.pptx filter=lfs diff=lfs merge=lfs -text

.github/DEPLOYMENT.md

@@ -0,0 +1,230 @@
+# Hugging Face Deployment Workflows
+
+This repository includes two GitHub workflows for deploying your Next.js application to separate Hugging Face Spaces:
+
+1. **`deploy-huggingface.yml`** - Production deployment (main branch)
+2. **`deploy-dev.yml`** - Development deployment (dev branch)
+
+## 🚀 Quick Setup
+
+### 1. Create Required Secrets
+
+In your GitHub repository, go to **Settings** → **Secrets and variables** → **Actions** and add the following secrets:
+
+| Secret Name          | Description                                 | Example                         |
+| -------------------- | ------------------------------------------- | ------------------------------- |
+| `HF_TOKEN`           | Your Hugging Face access token              | `hf_xxxxxxxxxxxxxxxxxxxxxxxxxx` |
+| `HF_USERNAME`        | Your Hugging Face username                  | `your-username`                 |
+| `HF_SPACE_NAME_PROD` | Name of your production Hugging Face Space  | `my-awesome-app`                |
+| `HF_SPACE_NAME_DEV`  | Name of your development Hugging Face Space | `my-awesome-app-dev`            |
+
+### 2. Get Your Hugging Face Token
+
+1. Go to [Hugging Face Settings](https://huggingface.co/settings/tokens)
+2. Create a new token with **Write** permissions
+3. Copy the token and add it as `HF_TOKEN` secret
+
+## 📋 Workflow Overview
+
+### Production Workflow (`deploy-huggingface.yml`)
+
+**Triggers:**
+
+- Push to `main` branch
+- Merged pull requests to `main`
+
+**Deploys to:** Space defined in `HF_SPACE_NAME_PROD`
+
+**Features:**
+
+- ✅ Stable production environment
+- 🚀 Blue/purple theme
+- 📊 Production-ready builds
+
+### Development Workflow (`deploy-dev.yml`)
+
+**Triggers:**
+
+- Push to `dev` branch
+- Merged pull requests to `dev`
+
+**Deploys to:** Space defined in `HF_SPACE_NAME_DEV`
+
+**Features:**
+
+- 🧪 Testing environment for new features
+- 🔶 Orange/red theme to indicate development
+- 🚧 May contain unstable features
+
+## 🏗️ Project Structure Requirements
+
+Your Next.js project should have:
+
+```
+├── package.json          # Node.js dependencies
+├── next.config.ts        # Next.js configuration
+├── Dockerfile           # Docker configuration (optional)
+├── app/                 # Next.js app directory
+├── components/          # React components
+├── public/              # Static assets
+└── .github/
+    └── workflows/
+        ├── deploy-huggingface.yml
+        └── deploy-huggingface-advanced.yml
+```
+
+## 🔧 Configuration
+
+### Next.js Configuration
+
+Ensure your `next.config.ts` includes:
+
+```typescript
+const nextConfig: NextConfig = {
+  output: 'standalone', // Required for Docker deployment
+  images: {
+    unoptimized: true, // Recommended for Hugging Face Spaces
+  },
+};
+```
+
+### Docker Configuration
+
+The workflows automatically generate an optimized Dockerfile, but you can customize it by modifying the Dockerfile creation step in the workflow files.
+
+## 🌍 Environment Management
+
+### Separate Environments
+
+- **Production**:
+
+  - Triggered by pushes to `main` branch
+  - Deploys to: `HF_SPACE_NAME_PROD` (e.g., `my-app`)
+  - Theme: Blue/purple 🚀
+  - Stable, tested features only
+
+- **Development**:
+  - Triggered by pushes to `dev` branch
+  - Deploys to: `HF_SPACE_NAME_DEV` (e.g., `my-app-dev`)
+  - Theme: Orange/red 🧪
+  - Testing new features and changes
+
+### Benefits of Separate Spaces
+
+- ✅ Test changes in development before production
+- ✅ Keep production environment stable
+- ✅ Easy to identify which environment you're viewing
+- ✅ Independent deployment cycles
+
+### Custom Environment Variables
+
+Add environment variables to your Hugging Face Space:
+
+1. Go to your Space settings
+2. Add environment variables in the "Variables and secrets" section
+3. Restart your Space
+
+## 🚨 Troubleshooting
+
+### Common Issues
+
+1. **"Space not found" error**
+
+   - Check that `HF_USERNAME` and `HF_SPACE_NAME` are correct
+   - Ensure your Hugging Face token has write permissions
+
+2. **Build failures**
+
+   - Check that all dependencies are in `package.json`
+   - Verify your Next.js configuration
+
+3. **Docker build issues**
+
+   - Ensure your app builds successfully locally with `npm run build`
+   - Check for any missing environment variables
+
+4. **Permission errors**
+   - Verify your Hugging Face token has write access
+   - Check that the token hasn't expired
+
+### Debug Mode
+
+To enable debug mode, add this to your workflow:
+
+```yaml
+env:
+  ACTIONS_STEP_DEBUG: true
+  ACTIONS_RUNNER_DEBUG: true
+```
+
+## 📊 Monitoring Deployments
+
+### Workflow Status
+
+- Check the **Actions** tab in your GitHub repository
+- Each deployment shows detailed logs and status
+- Production deployments show `[PROD]` in commit messages
+- Development deployments show `[DEV]` in commit messages
+
+### Hugging Face Space Status
+
+- **Production**: `https://huggingface.co/spaces/YOUR_USERNAME/YOUR_PROD_SPACE_NAME`
+- **Development**: `https://huggingface.co/spaces/YOUR_USERNAME/YOUR_DEV_SPACE_NAME`
+- Check the build logs in each Space's "Logs" section
+
+## � Typical Workflow
+
+1. **Development**:
+
+   - Make changes on `dev` branch
+   - Push to automatically deploy to dev space
+   - Test features in development environment
+
+2. **Production**:
+   - Create PR from `dev` to `main`
+   - Review and merge PR
+   - Automatically deploys to production space
+
+## 📝 Customization
+
+### Modifying the Workflow
+
+You can customize the workflows by:
+
+1. **Changing trigger conditions**: Modify the `on:` section
+2. **Adding build steps**: Insert additional steps before deployment
+3. **Custom Dockerfile**: Modify the Dockerfile generation step
+4. **Environment variables**: Add custom environment variables
+
+### Example Customizations
+
+```yaml
+# Deploy only on tags
+on:
+  push:
+    tags:
+      - 'v*'
+
+# Add custom build step
+- name: Run tests
+  run: npm test
+
+# Custom environment variables
+env:
+  CUSTOM_VAR: ${{ secrets.CUSTOM_VAR }}
+```
+
+## 🆘 Support
+
+If you encounter issues:
+
+1. Check the GitHub Actions logs
+2. Review the Hugging Face Space build logs
+3. Verify all secrets are properly set
+4. Ensure your Next.js app builds locally
+
+For more help:
+
+- [Hugging Face Spaces Documentation](https://huggingface.co/docs/hub/spaces)
+- [GitHub Actions Documentation](https://docs.github.com/en/actions)
+- [Next.js Deployment Documentation](https://nextjs.org/docs/deployment)

.github/actions/create-release/action.yml

@@ -0,0 +1,158 @@
+name: 'Create Release with Tag'
+description: 'Creates a Git tag and GitHub Release with categorized PR notes'
+inputs:
+  branch:
+    description: 'Branch name (e.g., main, stg)'
+    required: true
+  tag-prefix:
+    description: 'Tag prefix (e.g., main-, stg-)'
+    required: true
+  prerelease:
+    description: 'Whether this is a pre-release (true/false)'
+    required: true
+  release-name-prefix:
+    description: 'Release name prefix (e.g., Production Release, Staging Pre-release)'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Create Tag and Release
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const now = new Date();
+          const year = now.getFullYear();
+          const month = String(now.getMonth() + 1).padStart(2, '0');
+          const day = String(now.getDate()).padStart(2, '0');
+          const hours = String(now.getHours()).padStart(2, '0');
+          const minutes = String(now.getMinutes()).padStart(2, '0');
+          const seconds = String(now.getSeconds()).padStart(2, '0');
+          const tagName = `${{ inputs.tag-prefix }}${year}${month}${day}_${hours}${minutes}${seconds}`;
+
+          // 前回のタグを取得
+          let previousTag = null;
+          try {
+            const tags = await github.rest.repos.listTags({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              per_page: 100
+            });
+            previousTag = tags.data.find(t => t.name.startsWith('${{ inputs.tag-prefix }}'));
+          } catch (e) {
+            console.log('No previous tags found or error:', e.message);
+          }
+
+          // カテゴリ定義
+          const categories = {
+            'feat': { emoji: '✨', title: 'Features', order: 1 },
+            'fix': { emoji: '🐛', title: 'Bug Fixes', order: 2 },
+            'hotfix': { emoji: '🚑', title: 'Hotfixes', order: 3 },
+            'refactor': { emoji: '♻️', title: 'Refactoring', order: 4 },
+            'docs': { emoji: '📝', title: 'Documentation', order: 5 },
+            'test': { emoji: '✅', title: 'Tests', order: 6 },
+            'chore': { emoji: '🔧', title: 'Chore', order: 7 },
+            'other': { emoji: '🔄', title: 'Other Changes', order: 8 }
+          };
+
+          // リリースノート生成
+          let releaseBody = '';
+          if (previousTag) {
+            console.log(`Previous tag found: ${previousTag.name}`);
+            try {
+              // PRタイトル一覧を取得
+              const commits = await github.rest.repos.compareCommits({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                base: previousTag.name,
+                head: '${{ inputs.branch }}'
+              });
+
+              const prNumbers = new Set();
+              for (const commit of commits.data.commits) {
+                const match = commit.commit.message.match(/#(\d+)/);
+                if (match) prNumbers.add(match[1]);
+              }
+
+              // PRをカテゴリごとに分類
+              const categorizedPrs = {};
+              for (const num of prNumbers) {
+                try {
+                  const pr = await github.rest.pulls.get({
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    pull_number: parseInt(num)
+                  });
+                  if (pr.data.merged_at) {
+                    // プレフィックスを抽出（PRタイトル優先、次にブランチ名）
+                    const titleMatch = pr.data.title.match(/^(feat|fix|hotfix|refactor|docs|test|chore):/);
+                    const branchMatch = pr.data.head.ref.match(/^(feature|feat|fix|hotfix|refactor|docs|test|chore)\//);
+
+                    let category = 'other';
+                    if (titleMatch) {
+                      category = titleMatch[1];
+                    } else if (branchMatch) {
+                      // feature/ → feat にマッピング
+                      category = branchMatch[1] === 'feature' ? 'feat' : branchMatch[1];
+                    }
+
+                    if (!categorizedPrs[category]) {
+                      categorizedPrs[category] = [];
+                    }
+                    categorizedPrs[category].push(`- ${pr.data.title} (#${num})`);
+                  }
+                } catch (e) {
+                  console.log(`Failed to get PR #${num}:`, e.message);
+                }
+              }
+
+              // カテゴリ順にリリースノートを生成
+              const sortedCategories = Object.keys(categorizedPrs).sort((a, b) => {
+                return categories[a].order - categories[b].order;
+              });
+
+              const sections = [];
+              for (const category of sortedCategories) {
+                const cat = categories[category];
+                sections.push(`## ${cat.emoji} ${cat.title}\n${categorizedPrs[category].join('\n')}`);
+              }
+
+              releaseBody = sections.length > 0 ? sections.join('\n\n') : 'No PRs merged in this release';
+            } catch (e) {
+              console.log('Error generating release notes:', e.message);
+              releaseBody = 'Error generating release notes';
+            }
+          } else {
+            console.log('No previous tag found - this is the initial release');
+            releaseBody = `Initial Release - ${now.toISOString()}`;
+          }
+
+          // タグ作成
+          try {
+            await github.rest.git.createRef({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              ref: `refs/tags/${tagName}`,
+              sha: context.sha
+            });
+            console.log(`Tag created: ${tagName}`);
+          } catch (e) {
+            console.log('Error creating tag:', e.message);
+            throw e;
+          }
+
+          // リリース作成
+          try {
+            await github.rest.repos.createRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              tag_name: tagName,
+              name: `${{ inputs.release-name-prefix }} ${tagName}`,
+              body: releaseBody,
+              prerelease: ${{ inputs.prerelease }}
+            });
+            console.log(`Release created: ${{ inputs.release-name-prefix }} ${tagName}`);
+          } catch (e) {
+            console.log('Error creating release:', e.message);
+            throw e;
+          }

.github/actions/deploy-to-hf/action.yml

@@ -0,0 +1,206 @@
+name: 'Deploy to Hugging Face Space'
+description: 'Deploys application to Hugging Face Space'
+inputs:
+  environment:
+    description: 'Environment name (dev, test, stg, prod)'
+    required: true
+  branch:
+    description: 'Branch name'
+    required: true
+  hf-username:
+    description: 'Hugging Face username'
+    required: true
+  hf-token:
+    description: 'Hugging Face token'
+    required: true
+  hf-space-name:
+    description: 'Hugging Face Space name'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Python for Hugging Face CLI
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.9'
+
+    - name: Install Hugging Face Hub
+      shell: bash
+      run: |
+        pip install huggingface_hub
+        sudo apt-get update && sudo apt-get install -y rsync
+
+    - name: Validate secrets
+      shell: bash
+      run: |
+        echo "HF_USERNAME: ${{ inputs.hf-username }}"
+        echo "HF_SPACE_NAME: ${{ inputs.hf-space-name }}"
+        echo "Token length: ${#HF_TOKEN}"
+      env:
+        HF_TOKEN: ${{ inputs.hf-token }}
+
+    - name: Create Hugging Face Space README
+      shell: bash
+      env:
+        SPACE_NAME: ${{ inputs.hf-space-name }}
+        BRANCH_NAME: ${{ inputs.branch }}
+        ENVIRONMENT: ${{ inputs.environment }}
+      run: |
+        # Environment-specific settings
+        case "${ENVIRONMENT}" in
+          dev)
+            EMOJI="🧪"
+            COLOR_TO="yellow"
+            ENV_TITLE="Development"
+            ENV_DESC="🧪 **This is a development environment** - Features may be unstable"
+            ;;
+          test)
+            EMOJI="🧪"
+            COLOR_TO="gray"
+            ENV_TITLE="Mock/Testing"
+            ENV_DESC="🧪 **This is the mock/testing environment** - Feature branch deployment"
+            ;;
+          stg)
+            EMOJI="🧪"
+            COLOR_TO="indigo"
+            ENV_TITLE="Staging"
+            ENV_DESC="🚧 **This is a staging environment** - Pre-production testing"
+            ;;
+          prod)
+            EMOJI="🚀"
+            COLOR_TO="green"
+            ENV_TITLE="Production"
+            ENV_DESC="✅ **This is the production environment** - Stable and tested features"
+            ;;
+        esac
+
+        cat > README.md << EOF
+        ---
+        title: ${SPACE_NAME}
+        emoji: ${EMOJI}
+        colorFrom: pink
+        colorTo: ${COLOR_TO}
+        sdk: docker
+        app_port: 7860
+        pinned: false
+        license: mit
+        ---
+
+        # ${SPACE_NAME} (${ENV_TITLE})
+
+        ${ENV_DESC}
+
+        This is a Next.js application deployed to Hugging Face Spaces from the \`${BRANCH_NAME}\` branch.
+
+        ## Features
+
+        - Built with Next.js and React
+        - Containerized with Docker
+        - Automatic deployment from GitHub ${BRANCH_NAME} branch
+        - ${ENV_TITLE} environment
+
+        ## Development
+
+        To run locally:
+
+        \`\`\`bash
+        npm install
+        npm run dev
+        \`\`\`
+
+        The application will be available at http://localhost:3200
+
+        ---
+        **Branch**: ${BRANCH_NAME}
+        **Environment**: ${ENV_TITLE}
+        **Last Deploy**: $(date)
+        EOF
+
+    - name: Clone or update Hugging Face Space
+      shell: bash
+      env:
+        HF_USERNAME: ${{ inputs.hf-username }}
+        HF_TOKEN: ${{ inputs.hf-token }}
+        HF_SPACE_NAME: ${{ inputs.hf-space-name }}
+      run: |
+        # Skip LFS for initial clone to avoid errors
+        export GIT_LFS_SKIP_SMUDGE=1
+
+        # Try to clone the space with authentication
+        if git clone https://user:${HF_TOKEN}@huggingface.co/spaces/${HF_USERNAME}/${HF_SPACE_NAME} hf-space; then
+          echo "✅ Space exists, updating..."
+          cd hf-space
+          # Reset any failed LFS state
+          git lfs install --skip-smudge
+        else
+          echo "🆕 Creating new space..."
+          # Create space using Python API (more reliable)
+          python3 -c "import os; from huggingface_hub import HfApi; api = HfApi(token=os.environ['HF_TOKEN']); api.create_repo(repo_id=f\"{os.environ['HF_USERNAME']}/{os.environ['HF_SPACE_NAME']}\", repo_type='space', space_sdk='docker')" 2>&1 || echo "Space creation failed or already exists"
+          sleep 5
+          git clone https://user:${HF_TOKEN}@huggingface.co/spaces/${HF_USERNAME}/${HF_SPACE_NAME} hf-space
+          cd hf-space
+        fi
+
+    - name: Copy files to Hugging Face Space
+      shell: bash
+      run: |
+        cd hf-space
+
+        # Remove existing files except .git
+        find . -name '.git' -prune -o -type f -exec rm -f {} \;
+        find . -name '.git' -prune -o -type d -empty -exec rmdir {} \; 2>/dev/null || true
+
+        # Copy project files (excluding .git and other unnecessary files)
+        rsync -av --exclude='.git' --exclude='hf-space' --exclude='node_modules' --exclude='.next' ../ ./
+
+        # Copy the built .next directory if it exists
+        if [ -d "../.next" ]; then
+          cp -r ../.next ./
+        fi
+
+    - name: Configure git in Hugging Face Space
+      shell: bash
+      run: |
+        cd hf-space
+        git config user.name "GitHub Actions"
+        git config user.email "actions@github.com"
+
+    - name: Commit and push to Hugging Face Space
+      shell: bash
+      env:
+        ENVIRONMENT: ${{ inputs.environment }}
+      run: |
+        cd hf-space
+        git add .
+
+        # Check if there are changes to commit
+        if git diff --staged --quiet; then
+          echo "No changes to commit"
+        else
+          git commit -m "Deploy from GitHub Actions [${ENVIRONMENT}] - $(date '+%Y-%m-%d %H:%M:%S')"
+          git push origin main
+        fi
+
+    - name: Deployment status
+      shell: bash
+      env:
+        ENVIRONMENT: ${{ inputs.environment }}
+        HF_USERNAME: ${{ inputs.hf-username }}
+        HF_SPACE_NAME: ${{ inputs.hf-space-name }}
+      run: |
+        case "${ENVIRONMENT}" in
+          dev)
+            echo "🧪 Development deployment completed!"
+            ;;
+          test)
+            echo "🧪 Mock/Testing deployment completed!"
+            ;;
+          stg)
+            echo "🚧 Staging deployment completed!"
+            ;;
+          prod)
+            echo "🚀 Production deployment completed!"
+            ;;
+        esac
+        echo "Your app should be available at: https://huggingface.co/spaces/${HF_USERNAME}/${HF_SPACE_NAME}"

.github/workflows/deploy-dev.yml

@@ -0,0 +1,43 @@
+name: Deploy to Hugging Face - Development
+
+on:
+  push:
+    branches:
+      - dev
+
+env:
+  HF_USERNAME: ${{ secrets.HF_USERNAME }}
+  HF_TOKEN: ${{ secrets.HF_TOKEN }}
+  HF_SPACE_NAME: ${{ secrets.HF_SPACE_NAME_DEV }}
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+
+      - name: Deploy to Hugging Face Space
+        uses: ./.github/actions/deploy-to-hf
+        with:
+          environment: dev
+          branch: ${{ github.ref_name }}
+          hf-username: ${{ env.HF_USERNAME }}
+          hf-token: ${{ env.HF_TOKEN }}
+          hf-space-name: ${{ env.HF_SPACE_NAME }}

.github/workflows/deploy-prod.yml

@@ -0,0 +1,50 @@
+name: Deploy to Hugging Face - Production
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  HF_USERNAME: ${{ secrets.HF_USERNAME }}
+  HF_TOKEN: ${{ secrets.HF_TOKEN }}
+  HF_SPACE_NAME: ${{ secrets.HF_SPACE_NAME_PROD }}
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+
+      - name: Deploy to Hugging Face Space
+        uses: ./.github/actions/deploy-to-hf
+        with:
+          environment: prod
+          branch: ${{ github.ref_name }}
+          hf-username: ${{ env.HF_USERNAME }}
+          hf-token: ${{ env.HF_TOKEN }}
+          hf-space-name: ${{ env.HF_SPACE_NAME }}
+
+      - name: Create Tag and Release
+        uses: ./.github/actions/create-release
+        with:
+          branch: main
+          tag-prefix: main-
+          prerelease: false
+          release-name-prefix: Production Release

.github/workflows/deploy-stg.yml

@@ -0,0 +1,51 @@
+name: Deploy to Hugging Face Staging
+
+on:
+  push:
+    branches:
+      - stg
+
+env:
+  HF_USERNAME: ${{ secrets.HF_USERNAME }}
+  HF_TOKEN: ${{ secrets.HF_TOKEN }}
+  HF_SPACE_NAME: ${{ secrets.HF_SPACE_NAME_STG }}
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+
+      - name: Deploy to Hugging Face Space
+        uses: ./.github/actions/deploy-to-hf
+        with:
+          environment: stg
+          branch: ${{ github.ref_name }}
+          hf-username: ${{ env.HF_USERNAME }}
+          hf-token: ${{ env.HF_TOKEN }}
+          hf-space-name: ${{ env.HF_SPACE_NAME }}
+
+      - name: Create Tag and Pre-release
+        uses: ./.github/actions/create-release
+        with:
+          branch: stg
+          tag-prefix: stg-
+          prerelease: true
+          release-name-prefix: Staging Pre-release

.github/workflows/deploy-test.yml

@@ -0,0 +1,42 @@
+name: Deploy to Hugging Face Test
+
+on:
+  push:
+    branches:
+      - feature/ui-test
+  workflow_dispatch:
+
+env:
+  HF_USERNAME: ${{ secrets.HF_USERNAME }}
+  HF_TOKEN: ${{ secrets.HF_TOKEN }}
+  HF_SPACE_NAME: FE_Test
+
+jobs:
+  sync-to-huggingface-mock:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          lfs: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+
+      - name: Deploy to Hugging Face Space
+        uses: ./.github/actions/deploy-to-hf
+        with:
+          environment: test
+          branch: ${{ github.ref_name }}
+          hf-username: ${{ env.HF_USERNAME }}
+          hf-token: ${{ env.HF_TOKEN }}
+          hf-space-name: ${{ env.HF_SPACE_NAME }}

.gitignore

@@ -0,0 +1,66 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+ 
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+.okta.env
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE
+.idea/
+.vscode/
+
+# logs
+*.log
+
+# MCP and development tools
+.kiro/
+.playwright-mcp/
+.serena/
+.mcp.local.json
+
+# git worktree
+/worktree/
+
+# temporary files
+/tmp/
+
+# sample pages (development only)
+/app/cn-sample/
+docs/steering/guideline/

.mcp.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c95b9e188bc5421a0df205e4d5efac8ad62d164e02cfe5324839cd0192cadda5
+size 676

.prettierignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "singleAttributePerLine": false,
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 150,
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx", "cn"],
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": "**/*.yml",
+      "options": {
+        "tabWidth": 2
+      }
+    }
+  ]
+}

AGENTS.md

@@ -0,0 +1,35 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- `app/` hosts Next.js routes, layouts, and server actions for the web UI.
+- `components/`, `hooks/`, `store/`, and `utils/` group reusable UI pieces, custom hooks, Zustand stores, and shared helpers.
+- `services/`, `api-client/`, and `server/` encapsulate API integrations, background jobs, and Hono handlers; keep external calls here.
+- `public/` stores static assets, while `docs/` and `schema/` capture product and API documentation.
+- Tests and fixtures live under `test/`; mirror the runtime folder structure when adding coverage.
+
+## Build, Test, and Development Commands
+- `npm run dev` boots the local Next.js app on port 3200; use `npm run dev:restart` when you need a clean background process.
+- `npm run build` compiles the production bundle, and `npm start` serves the build output.
+- `npm run lint` runs ESLint with the Next.js config; `npm run lintfix` chains Prettier and ESLint for autofixes.
+- `npm test`, `npm run test:watch`, and `npm run test:ui` execute Vitest in batch, watch, or UI mode.
+- Use `npm run generate:dummy-screenshots` or `npm run prepare:dummy-images` to refresh design placeholders referenced in demos.
+
+## Coding Style & Naming Conventions
+- TypeScript and modern React patterns are expected; default to server components unless client interactivity is required.
+- Formatting is enforced by Prettier (2-space indentation, single quotes, trailing commas) and ESLint; run lint before committing.
+- Name React components and Zustand stores in PascalCase, hooks with the `use` prefix, and internal helpers in camelCase.
+- Keep import paths absolute via the `@` alias rather than deep relative chains, and group CSS or Tailwind utilities near their components.
+
+## Testing Guidelines
+- Write unit and integration specs with Vitest; locate files beside the code (`*.test.ts[x]`) or under `test/` mirroring the module path.
+- Mock external services through helpers in `services/` to avoid real network calls, and assert both success and error flows.
+- Run `npm test` plus `npm run lint` before pushing; add snapshots only when the UI surface is stable.
+
+## Commit & Pull Request Guidelines
+- Follow Conventional Commits (`feat:`, `fix:`, `chore:`) as in the git log; include localization context when touching Japanese copy.
+- Each pull request should link the relevant issue, describe behavior changes, note required environment updates, and attach UI screenshots or recordings.
+- Confirm CI passes locally (`npm run lint`, `npm test`, `npm run build`) and mention any skipped checks or follow-up tasks in the description.
+
+## Configuration Tips
+- Secrets live in `.env.local`; never commit credentials or API tokens—consult `api-config.json` for expected keys.
+- Update documentation in `docs/` when endpoints or flows change, and surface breaking environment changes in the pull request summary.

CLAUDE.md

@@ -0,0 +1,205 @@
+# Claude Project Settings
+
+## 言語設定
+
+すべての回答は日本語で行ってください。
+
+
+## 開発サーバー実行方法
+
+開発サーバーを起動する際は、以下のコマンドを使用してください：
+
+```bash
+npm run dev:restart
+```
+
+このコマンドは自動的に：
+
+1. ポート3200で動作中のプロセスをkill
+2. 開発サーバーを起動
+3. ログをdev.logファイルとコンソール両方に出力
+
+## コード編集時の自動フォーマット
+
+ファイルを編集した後は、必ずPrettierでフォーマットしてください：
+
+- `npx prettier --write <編集したファイル>` - Prettierによる自動フォーマット（import順序の整理も含む）
+
+## ハルシネーション禁止
+
+特別な指示がない限り、推測や憶測に基づいたコード生成は禁止します。不明な点がある場合は必ず確認を求めてください。
+
+## TypeScriptにおけるany型の使用禁止
+
+TypeScriptコードにおいて、any型の使用を固く禁じます。型安全性を保つため、必ず適切な型定義を行ってください。
+
+## インポート時のパス指定ルール
+
+相対パスでのインポートを禁止します。必ず以下のパスエイリアスを使用してください：
+
+- `@/` - プロジェクトルートからのパス（例：`@/components/ui/button`）
+- 相対パス禁止例：`../../../components/ui/button`、`./utils/helper`
+
+正しい例：
+
+```typescript
+import { Button } from '@/components/ui/button';
+import { useGlobalStore } from '@/store/global';
+import type { SwotData } from '@/schema/pox';
+```
+
+誤った例（使用禁止）：
+
+```typescript
+import { Button } from '../../../components/ui/button';
+import { useGlobalStore } from './store/global';
+import type { SwotData } from '../../schema/pox';
+```
+
+# 開発の流れ
+
+## 開発フロー
+
+1. **コード修正**
+   - 必要な機能追加やバグ修正を実施
+   - TypeScript型定義を正確に行う（any型禁止）
+
+2. **自動フォーマット**
+   - 修正したファイルをPrettierでフォーマット
+
+   ```bash
+   npx prettier --write <編集したファイル>
+   ```
+
+3. **動作確認**
+   - 下記の「動作確認手順」に従ってPlaywriteMCPやCurlで動作を確認
+   - エラーや不具合が発生した場合は修正
+
+4. **エラー対応**
+   - ログを確認して問題を特定
+   - 修正後、再度動作確認を実施
+   - 正常動作するまで3-4を繰り返す
+
+5. **ビルド確認**
+   - コミット前に必ずビルドを実行
+
+   ```bash
+   npm run build
+   ```
+
+   - ビルドエラーがある場合は修正してから再度ビルド
+   - ビルドが成功したことを確認してからコミット
+
+# HTML生成機能の基本動作確認
+
+## 画面リンク集
+
+### メイン機能ページ
+- **トップページ**: `http://localhost:3200/`
+- **リフレッシュモーメンツ選択**: `http://localhost:3200/refresh-moments`
+- **改善案生成結果**: `http://localhost:3200/refresh-moments/improvement-result`
+- **ダミーモード改善案生成結果**: `http://localhost:3200/refresh-moments/improvement-result?dummyMode=true`
+
+### その他のページ
+- **新UIプレビュー**: `http://localhost:3200/updatedui`
+
+## 動作確認手順
+
+1. **開発サーバー起動**
+
+   ```bash
+   npm run dev:restart
+   ```
+
+2. **画面アクセス**
+   - ブラウザで `http://localhost:3200/refresh-moments` にアクセス
+   - モーメントを選択してから `http://localhost:3200/refresh-moments/improvement-result` に遷移
+   - **ダミーモード**: `http://localhost:3200/refresh-moments/improvement-result?dummyMode=true` で直接アクセス可能
+   - PlaywriteMCPで確認
+   - APIのみの修正の場合はCurlでAPI打鍵確認
+
+3. **モーメント選択操作**
+   - refresh-moments画面でモーメントを選択
+   - 改善案生成ボタンをクリックして improvement-result 画面に遷移
+
+4. **ログ確認**
+   ```bash
+   tail -f dev.log
+   ```
+
+## 動作確認ポイント
+
+### 正常な処理フロー
+
+1. スクリーンショット取得完了
+2. FV HTML生成開始
+3. Adobe Firefly画像生成開始（バックグラウンド）
+4. gpt-image-1パイプライン試行（組織未認証の場合失敗）
+5. 簡易版gpt-image-1フォールバック（403エラーの場合失敗）
+6. 最終フォールバック：モックHTML表示
+
+### エラーパターン
+
+- **gpt-image-1エラー**: `403 Forbidden` - 組織未認証
+- **セグメンテーションエラー**: `TypeError: Cannot read properties of undefined`
+- **画像フォーマットエラー**: `400 Bad Request` - PNG変換で解決済み
+
+### 成功判定
+
+- 画面に「FVとコンテンツを生成中...」が表示される
+- Adobe Fireflyバッチ処理が開始される
+- ログに `[CONTENTS HTML] Images generated successfully` が出力さ���る（2分程度）
+
+# 重要な指示のリマインダー
+
+要求されたことだけを実行してください。それ以上でも以下でもありません。
+目的達成のために絶対に必要でない限り、ファイルを作成しないでください。
+新規ファイルを作成するよりも、既存ファイルの編集を常に優先してください。
+ドキュメントファイル（\*.md）やREADMEファイルを自発的に作成しないでください。ユーザーから明示的に要求された場合のみドキュメントファイルを作成してください。
+
+## Serena MCP使用ガイドライン
+
+- **既存コード解析**や**アーキテクチャ理解**が必要な場面では原則Serena MCPを使用してコードの解析を行う
+- **Serena推奨場面**：
+  - コードベース全体の構造理解
+  - シンボル間の参照関係調査
+  - クラス・関数・変数の使用箇所特定
+  - ファイル間の依存関係分析
+  - リファクタリングや機能追加の影響範囲調査
+  - 設計パターンの実装箇所探索
+  - バグの原因となる関連コード特定
+- **通常ツール推奨場面**：
+  - 単純なファイル読み込み・編集
+  - 既知のファイル・関数への直接的な変更
+  - シンプルな文字列検索・置換
+- Serena MCPの機能を活用して効率的で正確なコード分析を心がける
+
+# Gradio API打鍵方法
+
+Gradio APIのエンドポイントを直接確認する場合は、以下の方法を使用してください：
+
+```javascript
+const { Client } = require('@gradio/client');
+
+async function testGradioAPI() {
+  try {
+    const client = await Client.connect('dentsudigital/mugenAILP_dev', {
+      hf_token: process.env.GRADIO_TOKEN, // .envファイルのトークンを使用
+    });
+
+    // 例: get_proposal_prediction_dummyエンドポイントの呼び出し
+    const result = await client.predict('/get_proposal_prediction_dummy', {});
+    console.log(JSON.stringify(result.data, null, 2));
+  } catch (error) {
+    console.error('Error:', error.message);
+  }
+}
+
+testGradioAPI();
+```
+
+**注意事項：**
+
+- Gradio APIのレスポンスは通常`result.data`に配列形式で格納される
+- 配列の最初の要素が実際のレスポンスデータであることが多い
+- HuggingFaceのトークン（`hf_`で始まる）が必要な場合がある

Dockerfile

@@ -0,0 +1,196 @@
+# syntax=docker.io/docker/dockerfile:1
+
+# Force cache invalidation for HuggingFace Spaces
+ARG CACHEBUST=1
+
+FROM node:slim AS base
+
+# Install Python and build tools for native dependencies
+# Install Chromium and dependencies for Puppeteer
+RUN apt-get update && apt-get install -y \
+    python3 make g++ \
+    chromium \
+    fonts-noto-cjk \
+    fonts-liberation \
+    fonts-freefont-ttf \
+    ca-certificates \
+    libnss3 \
+    libatk-bridge2.0-0 \
+    libdrm2 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxfixes3 \
+    libxrandr2 \
+    libgbm1 \
+    libxkbcommon0 \
+    libasound2 \
+    libatspi2.0-0 \
+    libgtk-3-0 \
+    libglib2.0-0 \
+    libxss1 \
+    libgconf-2-4 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set Puppeteer to use installed Chromium
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci --include=optional; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Install the correct platform-specific packages based on architecture
+RUN if [ "$(uname -m)" = "x86_64" ]; then \
+        npm install lightningcss-linux-x64-gnu@1.29.1 --no-save; \
+    elif [ "$(uname -m)" = "aarch64" ]; then \
+        npm install lightningcss-linux-arm64-gnu@1.29.1 --no-save; \
+    fi && \
+    npm rebuild @tailwindcss/oxide --update-binary
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+# Clear all cache to avoid build issues
+RUN rm -rf .next node_modules/.cache
+
+COPY --from=deps /app/node_modules ./node_modules
+
+COPY . .
+
+# Rebuild native dependencies for the builder stage
+# Rebuild sharp and other native modules for the platform
+RUN if [ "$(uname -m)" = "x86_64" ]; then \
+        npm install lightningcss-linux-x64-gnu@1.29.1 --no-save; \
+    elif [ "$(uname -m)" = "aarch64" ]; then \
+        npm install lightningcss-linux-arm64-gnu@1.29.1 --no-save; \
+    fi && \
+    npm rebuild sharp && \
+    npm rebuild @tailwindcss/oxide --update-binary
+
+# Clean up build artifacts
+RUN rm -rf .next/cache node_modules/.cache
+
+# Build arguments for API keys (passed from HuggingFace Spaces environment)
+ARG OPENAI_TEMPLATE_AI_DEV
+ARG OPENAI_GENERATE_FV_AI
+ARG CLAUDE_TEMPLATE_AI_DEV
+ARG ANTHROPIC_API_KEY
+ARG GOOGLE_API_KEY
+ARG NEXT_PUBLIC_APP_ENV
+ARG OKTA_OAUTH2_ISSUER
+ARG OKTA_OAUTH2_CLIENT_ID
+ARG OKTA_OAUTH2_CLIENT_SECRET
+ARG SECRET
+
+# Set environment variables for build time
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_APP_ENV=$NEXT_PUBLIC_APP_ENV
+ENV OPENAI_TEMPLATE_AI_DEV=$OPENAI_TEMPLATE_AI_DEV
+ENV OPENAI_GENERATE_FV_AI=$OPENAI_GENERATE_FV_AI
+ENV CLAUDE_TEMPLATE_AI_DEV=$CLAUDE_TEMPLATE_AI_DEV
+ENV ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY
+ENV GOOGLE_API_KEY=$GOOGLE_API_KEY
+ENV OKTA_OAUTH2_ISSUER=$OKTA_OAUTH2_ISSUER
+ENV OKTA_OAUTH2_CLIENT_ID=$OKTA_OAUTH2_CLIENT_ID
+ENV OKTA_OAUTH2_CLIENT_SECRET=$OKTA_OAUTH2_CLIENT_SECRET
+ENV SECRET=$SECRET
+
+# Set memory limit for build process
+ENV NODE_OPTIONS="--max-old-space-size=2048"
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Remove build cache to reduce image size (keep only necessary runtime files)
+RUN rm -rf .next/cache/webpack .next/cache/swc node_modules/.cache
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Disable Next.js telemetry and set cache to writable location
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV TMPDIR=/tmp
+
+# Runtime environment variables for API keys
+ARG OPENAI_TEMPLATE_AI_DEV
+ARG OPENAI_GENERATE_FV_AI
+ARG CLAUDE_TEMPLATE_AI_DEV
+ARG ANTHROPIC_API_KEY
+ARG GOOGLE_API_KEY
+ARG NEXT_PUBLIC_APP_ENV
+ARG OKTA_OAUTH2_ISSUER
+ARG OKTA_OAUTH2_CLIENT_ID
+ARG OKTA_OAUTH2_CLIENT_SECRET
+ARG SECRET
+
+ENV NEXT_PUBLIC_APP_ENV=$NEXT_PUBLIC_APP_ENV
+ENV OPENAI_TEMPLATE_AI_DEV=$OPENAI_TEMPLATE_AI_DEV
+ENV OPENAI_GENERATE_FV_AI=$OPENAI_GENERATE_FV_AI
+ENV CLAUDE_TEMPLATE_AI_DEV=$CLAUDE_TEMPLATE_AI_DEV
+ENV ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY
+ENV GOOGLE_API_KEY=$GOOGLE_API_KEY
+ENV OKTA_OAUTH2_ISSUER=$OKTA_OAUTH2_ISSUER
+ENV OKTA_OAUTH2_CLIENT_ID=$OKTA_OAUTH2_CLIENT_ID
+ENV OKTA_OAUTH2_CLIENT_SECRET=$OKTA_OAUTH2_CLIENT_SECRET
+ENV SECRET=$SECRET
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs --home /home/nextjs
+
+# Copy node_modules for runtime (including Puppeteer)
+COPY --from=builder /app/node_modules ./node_modules
+RUN chown -R nextjs:nodejs ./node_modules
+
+# Ensure nextjs user has access to home directory
+RUN chown -R nextjs:nodejs /home/nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Copy .next directory but exclude cache to avoid permission issues
+COPY --from=builder --chown=nextjs:nodejs /app/.next/server ./.next/server
+COPY --from=builder --chown=nextjs:nodejs /app/.next/required-server-files.json ./.next/required-server-files.json
+COPY --from=builder --chown=nextjs:nodejs /app/.next/routes-manifest.json ./.next/routes-manifest.json
+COPY --from=builder --chown=nextjs:nodejs /app/.next/build-manifest.json ./.next/build-manifest.json
+COPY --from=builder --chown=nextjs:nodejs /app/.next/package.json ./.next/package.json
+# Copy optional manifest files (may not exist in all builds)
+RUN --mount=type=bind,from=builder,source=/app/.next,target=/tmp/source \
+    if [ -f /tmp/source/prerender-manifest.json ]; then cp /tmp/source/prerender-manifest.json ./.next/; fi && \
+    if [ -f /tmp/source/react-loadable-manifest.json ]; then cp /tmp/source/react-loadable-manifest.json ./.next/; fi && \
+    chown -R nextjs:nodejs ./.next/
+
+# Create cache directories and ensure full permissions (combining both approaches)
+RUN mkdir -p /tmp/.next/cache/images && \
+    mkdir -p /app/.next/cache/images && \
+    chmod -R 777 /tmp && \
+    chmod -R 755 /app/.next && \
+    chmod -R 777 /app/.next/cache/images && \
+    chown -R nextjs:nodejs /tmp/.next && \
+    chown -R nextjs:nodejs /app/.next
+
+USER nextjs
+
+EXPOSE 7860
+
+ENV PORT=7860
+ENV HOSTNAME="0.0.0.0"
+# Optimize for HuggingFace free tier
+ENV NODE_OPTIONS="--max-old-space-size=1024"
+
+CMD ["node", "server.js"]

README.md

@@ -1,10 +1,39 @@
 ---
-title: FE Dev
-emoji: 🏆
-colorFrom: yellow
-colorTo: green
+title: FE_Dev
+emoji: 🧪
+colorFrom: pink
+colorTo: yellow
 sdk: docker
+app_port: 7860
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# FE_Dev (Development)
+
+🧪 **This is a development environment** - Features may be unstable
+
+This is a Next.js application deployed to Hugging Face Spaces from the `dev` branch.
+
+## Features
+
+- Built with Next.js and React
+- Containerized with Docker
+- Automatic deployment from GitHub dev branch
+- Development environment
+
+## Development
+
+To run locally:
+
+```bash
+npm install
+npm run dev
+```
+
+The application will be available at http://localhost:3200
+
+---
+**Branch**: dev
+**Environment**: Development
+**Last Deploy**: Fri Oct 31 07:28:41 UTC 2025

analyze-components.mjs

@@ -0,0 +1,42 @@
+import fs from 'fs';
+
+const config = JSON.parse(fs.readFileSync('api-config.json', 'utf-8'));
+
+// get_proposal_cn inputs
+const cnInputs = [153, 108, 133, 68, 69, 237, 240, 1, 247, 288];
+// get_proposal_fv inputs  
+const fvInputs = [153, 108, 133, 68, 69, 231, 232, 117, 288, 1];
+
+console.log('=== get_proposal_cn Parameters ===\n');
+cnInputs.forEach((id, index) => {
+  const component = config.components.find(c => c.id === id + 1); // Components array is 0-indexed but IDs are 1-indexed
+  if (component) {
+    console.log(`Parameter ${index}: ID=${id}`);
+    console.log(`  Type: ${component.type}`);
+    if (component.props?.label) console.log(`  Label: ${component.props.label}`);
+    if (component.props?.elem_id) console.log(`  Elem ID: ${component.props.elem_id}`);
+    if (component.api_info) console.log(`  API Info:`, component.api_info);
+    console.log();
+  }
+});
+
+console.log('\n=== get_proposal_fv Parameters ===\n');
+fvInputs.forEach((id, index) => {
+  const component = config.components.find(c => c.id === id + 1);
+  if (component) {
+    console.log(`Parameter ${index}: ID=${id}`);
+    console.log(`  Type: ${component.type}`);
+    if (component.props?.label) console.log(`  Label: ${component.props.label}`);
+    if (component.props?.elem_id) console.log(`  Elem ID: ${component.props.elem_id}`);
+    if (component.api_info) console.log(`  API Info:`, component.api_info);
+    console.log();
+  }
+});
+
+// Find components with meaningful labels
+console.log('\n=== All Components with Labels ===\n');
+config.components.forEach(c => {
+  if (c.props?.label && !c.skip_api) {
+    console.log(`ID ${c.id - 1}: ${c.props.label} (${c.type})`);
+  }
+});

api-client/gradio-proxy/check-url.ts

@@ -0,0 +1,38 @@
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { CheckUrlRequest, CheckUrlResponse } from '@/schema/gradio-proxy/check-url';
+import { useMutation } from '@tanstack/react-query';
+
+/**
+ * check_url APIを呼び出すカスタムフック（mutation版）
+ * @returns mutationオブジェクト
+ */
+export function useCheckUrl() {
+  return useMutation({
+    mutationFn: async (request: CheckUrlRequest): Promise<CheckUrlResponse> => {
+      console.log('[useCheckUrl] API呼び出し開始:', {
+        ownUrl: request.ownUrl,
+        urlCount: request.urlText.length,
+        dummyMode: request.dummyMode,
+      });
+
+      try {
+        const response = await rpcClient['gradio-proxy']['check-url'].$post({
+          json: request,
+        });
+
+        if (!response.ok) {
+          const errorData = (await response.json()) as { message?: string };
+          console.error('[useCheckUrl] API エラー:', errorData);
+          throw new Error(errorData.message || 'check_url APIの呼び出しに失敗しました');
+        }
+
+        const data = await response.json();
+        console.log('[useCheckUrl] API呼び出し成功');
+        return data as CheckUrlResponse;
+      } catch (error) {
+        console.error('[useCheckUrl] API呼び出しエラー:', error);
+        throw error;
+      }
+    },
+  });
+}

api-client/gradio-proxy/excel.ts

@@ -0,0 +1,60 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { ExcelRequest, ExcelResponse } from '@/schema/gradio-proxy/excel';
+import type { FetchQueryOptions } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+/**
+ * excel APIを呼び出すカスタムフック
+ * @returns キャッシュ対応のAPI呼び出し関数（タイムアウト20分、キャッシュ24時間）
+ */
+export function useExcel() {
+  const queryClient = useQueryClient();
+
+  return useCallback(
+    async (request: ExcelRequest): Promise<ExcelResponse> => {
+      console.log('[useExcel] API呼び出し開始:', {
+        ownUrl: request.ownUrl,
+        urlCount: request.urlText.length,
+        hasCommonDict: !!request.commonDict,
+        hasScoreDict: !!request.scoreDict,
+        hasSummary: !!request.summary,
+        hasSwot: !!request.swot,
+        hasProposalFV: !!request.proposal_fv,
+        hasProposalCN: !!request.proposal_cn,
+        hasProposalPrediction: !!request.proposal_prediction,
+        hasProposalIntent: !!request.proposal_intent,
+        dummyMode: request.dummyMode,
+      });
+
+      return queryClient.fetchQuery(
+        createQueryOptions<ExcelResponse>({
+          queryKey: ['excel', request],
+          queryFn: async (): Promise<ExcelResponse> => {
+            try {
+              const response = await rpcClient['gradio-proxy']['excel'].$post({
+                json: request,
+              });
+
+              if (!response.ok) {
+                console.error('[useExcel] Response status:', response.status);
+                const errorData = (await response.json()) as { message?: string; status?: string };
+                console.error('[useExcel] API エラー:', errorData);
+                throw new Error(errorData.message || 'excel APIの呼び出しに失敗しました');
+              }
+
+              const data = await response.json();
+              console.log('[useExcel] API呼び出し成功');
+              return data as ExcelResponse;
+            } catch (error) {
+              console.error('[useExcel] API呼び出しエラー:', error);
+              throw error;
+            }
+          },
+        }) as FetchQueryOptions<ExcelResponse>,
+      );
+    },
+    [queryClient],
+  );
+}

api-client/gradio-proxy/pox.ts

@@ -0,0 +1,53 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { PoxRequest, PoxResponse } from '@/schema/gradio-proxy/pox';
+import type { FetchQueryOptions } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+/**
+ * pox APIを呼び出すカスタムフック
+ * @returns キャッシュ対応のAPI呼び出し関数（タイムアウト20分、キャッシュ24時間）
+ */
+export function usePox() {
+  const queryClient = useQueryClient();
+
+  return useCallback(
+    async (request: PoxRequest): Promise<PoxResponse> => {
+      console.log('[usePox] API呼び出し開始:', {
+        hasCommonDict: !!request.commonDict,
+        hasScoreDict: !!request.scoreDict,
+        hasScoreTotal: !!request.score_total,
+        dummyMode: request.dummyMode,
+      });
+
+      return queryClient.fetchQuery(
+        createQueryOptions<PoxResponse>({
+          queryKey: ['pox', request],
+          queryFn: async (): Promise<PoxResponse> => {
+            try {
+              const response = await rpcClient['gradio-proxy']['pox'].$post({
+                json: request,
+              });
+
+              if (!response.ok) {
+                console.error('[usePox] Response status:', response.status);
+                const errorData = (await response.json()) as { message?: string; status?: string };
+                console.error('[usePox] API エラー:', errorData);
+                throw new Error(errorData.message || 'pox APIの呼び出しに失敗しました');
+              }
+
+              const data = await response.json();
+              console.log('[usePox] API呼び出し成功');
+              return data as PoxResponse;
+            } catch (error) {
+              console.error('[usePox] API呼び出しエラー:', error);
+              throw error;
+            }
+          },
+        }) as FetchQueryOptions<PoxResponse>,
+      );
+    },
+    [queryClient],
+  );
+}

api-client/gradio-proxy/score-step3.ts

@@ -0,0 +1,55 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { ScoreStep3Request, ScoreStep3Response } from '@/schema/gradio-proxy/score-step3';
+import type { InputData } from '@/types/api';
+import type { FetchQueryOptions } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+/**
+ * score_step3 APIを呼び出すカスタムフック
+ * @returns キャッシュ対応のAPI呼び出し関数（タイムアウト10秒、キャッシュ24時間）
+ */
+export function useScoreStep3() {
+  const queryClient = useQueryClient();
+
+  return useCallback(
+    async (request: ScoreStep3Request): Promise<ScoreStep3Response> => {
+      console.log('[useScoreStep3] API呼び出し開始:', {
+        ownUrl: (request.commonDict as InputData)?.own_url,
+        urlCount: (request.commonDict as InputData)?.competitor_urls?.length,
+        tempImagesCount: request.tempImages ? Object.keys(request.tempImages).length : 0,
+        hasCommonDict: !!request.commonDict,
+        dummyMode: request.dummyMode,
+      });
+
+      return queryClient.fetchQuery(
+        createQueryOptions<ScoreStep3Response>({
+          queryKey: ['score-step3', request],
+          queryFn: async (): Promise<ScoreStep3Response> => {
+            try {
+              const response = await rpcClient['gradio-proxy']['score-step3'].$post({
+                json: request,
+              });
+
+              if (!response.ok) {
+                console.error('[useScoreStep3] Response status:', response.status);
+                const errorData = (await response.json()) as { message?: string; status?: string };
+                console.error('[useScoreStep3] API エラー:', errorData);
+                throw new Error(errorData.message || 'score_step3 APIの呼び出しに失敗しました');
+              }
+
+              const data = await response.json();
+              console.log('[useScoreStep3] API呼び出し成功');
+              return data as ScoreStep3Response;
+            } catch (error) {
+              console.error('[useScoreStep3] API呼び出しエラー:', error);
+              throw error;
+            }
+          },
+        }) as FetchQueryOptions<ScoreStep3Response>,
+      );
+    },
+    [queryClient],
+  );
+}

api-client/gradio-proxy/summary.ts

@@ -0,0 +1,53 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { SummaryRequest, SummaryResponse } from '@/schema/gradio-proxy/summary';
+import type { FetchQueryOptions } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+/**
+ * summary APIを呼び出すカスタムフック
+ * @returns キャッシュ対応のAPI呼び出し関数（タイムアウト20分、キャッシュ24時間）
+ */
+export function useSummary() {
+  const queryClient = useQueryClient();
+
+  return useCallback(
+    async (request: SummaryRequest): Promise<SummaryResponse> => {
+      console.log('[useSummary] API呼び出し開始:', {
+        hasCommonDict: !!request.commonDict,
+        hasScoreDict: !!request.scoreDict,
+        hasScoreTotal: !!request.score_total,
+        dummyMode: request.dummyMode,
+      });
+
+      return queryClient.fetchQuery(
+        createQueryOptions<SummaryResponse>({
+          queryKey: ['summary', request],
+          queryFn: async (): Promise<SummaryResponse> => {
+            try {
+              const response = await rpcClient['gradio-proxy']['summary'].$post({
+                json: request,
+              });
+
+              if (!response.ok) {
+                console.error('[useSummary] Response status:', response.status);
+                const errorData = (await response.json()) as { message?: string; status?: string };
+                console.error('[useSummary] API エラー:', errorData);
+                throw new Error(errorData.message || 'summary APIの呼び出しに失敗しました');
+              }
+
+              const data = await response.json();
+              console.log('[useSummary] API呼び出し成功');
+              return data as SummaryResponse;
+            } catch (error) {
+              console.error('[useSummary] API呼び出しエラー:', error);
+              throw error;
+            }
+          },
+        }) as FetchQueryOptions<SummaryResponse>,
+      );
+    },
+    [queryClient],
+  );
+}

api-client/gradio-proxy/use-pre-analysis.ts

@@ -0,0 +1,360 @@
+import type { ExcelRequest } from '@/schema/gradio-proxy/excel';
+import type { PoxRequest } from '@/schema/gradio-proxy/pox';
+import type { SummaryRequest } from '@/schema/gradio-proxy/summary';
+import type { VisScoreRequest } from '@/schema/gradio-proxy/vis-score';
+import { useResultStore } from '@/store/result';
+import { useStateStore } from '@/store/state';
+import { InputData } from '@/types/api';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useExcel } from './excel';
+import { usePox } from './pox';
+import { useScoreStep3 } from './score-step3';
+import { useSummary } from './summary';
+import { useVisScore } from './vis-score';
+
+interface UsePreAnalysisParams {
+  tempImages: Record<string, string>;
+  fvInfos: Record<string, unknown> | null;
+  cnInfo: Record<string, unknown> | null;
+  commonDict: InputData | null;
+  dummyMode?: boolean;
+  userEmail: string | null;
+  userIdentifier: string;
+}
+
+interface ApiStatus {
+  duration: number;
+  status: 'idle' | 'loading' | 'success' | 'error';
+}
+
+export function usePreAnalysis(params: UsePreAnalysisParams) {
+  const { tempImages, fvInfos, cnInfo, commonDict, dummyMode = false, userEmail, userIdentifier } = params;
+
+  // Zustandストアから取得
+  const {
+    setScoreDict,
+    setCommonDict,
+    setScoreTotal,
+    setUrlCategoryScores,
+    setOwnCategoryScores,
+    setSummaryData,
+    setSummaryBaseData,
+    setSwotData75,
+    setSwotData78,
+    setSwotData79,
+    setSwotTable,
+    setDownloadData,
+  } = useResultStore();
+
+  const { updateApiStatus: updateStateStoreApiStatus } = useStateStore();
+
+  // API実行時間追跡
+  const apiStartTimesRef = useRef<Record<string, number>>({});
+  const [apiStatuses, setApiStatuses] = useState<Record<string, ApiStatus>>({
+    scoreStep3: { duration: 0, status: 'idle' },
+    visScore: { duration: 0, status: 'idle' },
+    summary: { duration: 0, status: 'idle' },
+    pox: { duration: 0, status: 'idle' },
+    excel: { duration: 0, status: 'idle' },
+  });
+
+  // API呼び出し用フック
+  const scoreStep3Api = useScoreStep3();
+  const visScoreApi = useVisScore();
+  const summaryApi = useSummary();
+  const poxApi = usePox();
+  const excelApi = useExcel();
+
+  // ステップごとのデータとエラー状態
+  const [scoreStep3Data, setScoreStep3Data] = useState<any>(null);
+  const [visScoreData, setVisScoreData] = useState<any>(null);
+  const [summaryData, setSummaryDataLocal] = useState<any>(null);
+  const [poxData, setPoxData] = useState<any>(null);
+  const [excelData, setExcelData] = useState<any>(null);
+
+  const [scoreStep3Error, setScoreStep3Error] = useState<Error | null>(null);
+  const [visScoreError, setVisScoreError] = useState<Error | null>(null);
+  const [summaryError, setSummaryError] = useState<Error | null>(null);
+  const [poxError, setPoxError] = useState<Error | null>(null);
+  const [excelError, setExcelError] = useState<Error | null>(null);
+
+  // API実行中フラグ
+  const [isExecuting, setIsExecuting] = useState(false);
+  const executionRef = useRef(false);
+
+  const updateApiStatus = useCallback(
+    (apiName: string, status: ApiStatus['status']) => {
+      // Map API names to match StateStore expectations
+      const stateStoreApiName =
+        {
+          scoreStep3: 'getScore',
+          visScore: 'getVisScore',
+          summary: 'getSummary',
+          pox: 'getPox',
+          excel: 'getExcel',
+        }[apiName] || apiName;
+
+      if (status === 'loading') {
+        apiStartTimesRef.current[apiName] = Date.now();
+        setApiStatuses((prev) => ({
+          ...prev,
+          [apiName]: { duration: 0, status: 'loading' },
+        }));
+        // Sync to StateStore
+        updateStateStoreApiStatus(stateStoreApiName, { duration: 0, status: 'loading' });
+      } else if (status === 'success' || status === 'error') {
+        const startTime = apiStartTimesRef.current[apiName];
+        const duration = startTime ? (Date.now() - startTime) / 1000 : 0;
+        setApiStatuses((prev) => ({
+          ...prev,
+          [apiName]: { duration, status },
+        }));
+        // Sync to StateStore
+        updateStateStoreApiStatus(stateStoreApiName, { duration, status });
+      }
+    },
+    [updateStateStoreApiStatus],
+  );
+
+  // メイン実行関数
+  const execute = useCallback(async () => {
+    // 手動実行なのでenabledはチェックしない（重複実行のみ防ぐ）
+    if (executionRef.current) {
+      console.log('[usePreAnalysis] Execution skipped: already running');
+      return;
+    }
+
+    if (!commonDict) {
+      console.warn('[usePreAnalysis] commonDict is null, proceeding with empty object');
+    }
+
+    executionRef.current = true;
+    setIsExecuting(true);
+
+    try {
+      // Step 1: ScoreStep3
+      updateApiStatus('scoreStep3', 'loading');
+      const score = await scoreStep3Api({
+        tempImages: tempImages || {},
+        fvInfos: fvInfos || null,
+        cnInfo: cnInfo || null,
+        commonDict: commonDict || {},
+        dummyMode,
+        userEmail: userEmail ?? undefined,
+        userIdentifier,
+      });
+
+      if (Array.isArray(score)) {
+        setScoreStep3Data(score);
+        setScoreDict(score[0]);
+        setCommonDict(score[1]);
+        updateApiStatus('scoreStep3', 'success');
+        setScoreStep3Error(null);
+      } else {
+        throw new Error('scoreStep3の結果が不正な形式です');
+      }
+
+      // Step 2: VisScore
+      updateApiStatus('visScore', 'loading');
+      const vis: VisScoreRequest = {
+        commonDict: score[1] as Record<string, unknown>,
+        scoreDict: score[0] as Record<string, unknown>,
+        dummyMode,
+        userEmail: userEmail ?? undefined,
+        userIdentifier,
+      };
+      const visResult = await visScoreApi(vis);
+
+      if (Array.isArray(visResult)) {
+        setVisScoreData(visResult);
+        setScoreTotal(visResult[0]);
+        setUrlCategoryScores(visResult[1]);
+        setOwnCategoryScores(visResult[2]);
+        updateApiStatus('visScore', 'success');
+        setVisScoreError(null);
+      } else {
+        throw new Error('visScoreの結果が不正な形式です');
+      }
+
+      // Step 3: Summary & Pox（並列実行）
+      const summaryReq: SummaryRequest = {
+        commonDict: score[1] as Record<string, unknown>,
+        scoreDict: score[0] as Record<string, unknown>,
+        score_total: visResult[0] as Record<string, unknown>,
+        url_category_scores: visResult[1] as Record<string, unknown>,
+        own_category_score: visResult[2] as Record<string, unknown>,
+        dummyMode,
+        userEmail: userEmail ?? undefined,
+        userIdentifier,
+      };
+
+      const poxReq: PoxRequest = {
+        commonDict: score[1] as Record<string, unknown>,
+        scoreDict: score[0] as Record<string, unknown>,
+        score_total: visResult[0] as Record<string, unknown>,
+        dummyMode,
+        userEmail: userEmail ?? undefined,
+        userIdentifier,
+      };
+
+      updateApiStatus('summary', 'loading');
+      updateApiStatus('pox', 'loading');
+
+      const [summaryResult, poxResult] = await Promise.all([summaryApi(summaryReq), poxApi(poxReq)]);
+
+      if (Array.isArray(summaryResult)) {
+        setSummaryDataLocal(summaryResult);
+        setSummaryData(summaryResult[0]);
+        setSummaryBaseData(summaryResult[2]);
+        updateApiStatus('summary', 'success');
+        setSummaryError(null);
+      } else {
+        throw new Error('summaryの結果が不正な形式です');
+      }
+
+      if (Array.isArray(poxResult)) {
+        setPoxData(poxResult);
+        setSwotData75(poxResult[0]);
+        setSwotData78(poxResult[1]);
+        setSwotData79(poxResult[2]);
+        setSwotTable(poxResult[3]);
+        updateApiStatus('pox', 'success');
+        setPoxError(null);
+      } else {
+        throw new Error('poxの結果が不正な形式です');
+      }
+
+      // Step 4: Excel
+      updateApiStatus('excel', 'loading');
+      const excelReq: ExcelRequest = {
+        ownUrl: ((score[1] as Record<string, unknown>)?.own_url as string) || '',
+        urlText: ((score[1] as Record<string, unknown>)?.urls as string[]) || [],
+        commonDict: score[1] as Record<string, unknown>,
+        scoreDict: score[0] as Record<string, unknown>,
+        summary: summaryResult[0] as Record<string, unknown>,
+        swot: poxResult[0] as Record<string, unknown>,
+        dummyMode,
+        userEmail: userEmail ?? undefined,
+        userIdentifier,
+      };
+
+      const excelResult = await excelApi(excelReq);
+
+      if (Array.isArray(excelResult)) {
+        setExcelData(excelResult);
+        setDownloadData(excelResult[0]);
+        updateApiStatus('excel', 'success');
+        setExcelError(null);
+      } else {
+        throw new Error('excelの結果が不正な形式です');
+      }
+
+      console.log('[usePreAnalysis] All API calls completed successfully');
+    } catch (error) {
+      console.error('[usePreAnalysis] Error during execution:', error);
+
+      // エラー状態を設定
+      if (!scoreStep3Data) {
+        setScoreStep3Error(error instanceof Error ? error : new Error(String(error)));
+        updateApiStatus('scoreStep3', 'error');
+      } else if (!visScoreData) {
+        setVisScoreError(error instanceof Error ? error : new Error(String(error)));
+        updateApiStatus('visScore', 'error');
+      } else if (!summaryData || !poxData) {
+        if (!summaryData) {
+          setSummaryError(error instanceof Error ? error : new Error(String(error)));
+          updateApiStatus('summary', 'error');
+        }
+        if (!poxData) {
+          setPoxError(error instanceof Error ? error : new Error(String(error)));
+          updateApiStatus('pox', 'error');
+        }
+      } else {
+        setExcelError(error instanceof Error ? error : new Error(String(error)));
+        updateApiStatus('excel', 'error');
+      }
+
+      // エラーを再スローしてonSubmitのcatchブロックでキャッチできるようにする
+      throw error;
+    } finally {
+      setIsExecuting(false);
+      executionRef.current = false;
+    }
+  }, [
+    tempImages,
+    fvInfos,
+    cnInfo,
+    commonDict,
+    dummyMode,
+    userEmail,
+    userIdentifier,
+    scoreStep3Api,
+    visScoreApi,
+    summaryApi,
+    poxApi,
+    excelApi,
+    setScoreDict,
+    setCommonDict,
+    setScoreTotal,
+    setUrlCategoryScores,
+    setOwnCategoryScores,
+    setSummaryData,
+    setSummaryBaseData,
+    setSwotData75,
+    setSwotData78,
+    setSwotData79,
+    setSwotTable,
+    setDownloadData,
+    updateApiStatus,
+  ]);
+
+  // 統合されたローディング状態
+  const isLoading = useMemo(() => {
+    return Object.values(apiStatuses).some((s) => s.status === 'loading');
+  }, [apiStatuses]);
+
+  // 統合されたエラー状態
+  const isError = useMemo(() => {
+    return !!scoreStep3Error || !!visScoreError || !!summaryError || !!poxError || !!excelError;
+  }, [scoreStep3Error, visScoreError, summaryError, poxError, excelError]);
+
+  // エラーメッセージ取得
+  const getErrorMessage = useCallback(() => {
+    if (scoreStep3Error) return `スコア分析に失敗しました (1/5): ${scoreStep3Error.message}`;
+    if (visScoreError) return `ビジュアル分析に失敗しました (2/5): ${visScoreError.message}`;
+    if (summaryError) return `サマリー生成に失敗しました (3/5): ${summaryError.message}`;
+    if (poxError) return `SWOT分析に失敗しました (4/5): ${poxError.message}`;
+    if (excelError) return `Excelファイル生成に失敗しました (5/5): ${excelError.message}`;
+    return 'データの取得に失敗しました';
+  }, [scoreStep3Error, visScoreError, summaryError, poxError, excelError]);
+
+  // リトライ関数
+  const refetch = useCallback(() => {
+    // エラー状態をリセット
+    setScoreStep3Error(null);
+    setVisScoreError(null);
+    setSummaryError(null);
+    setPoxError(null);
+    setExcelError(null);
+
+    // 再実行
+    execute();
+  }, [execute]);
+
+  return {
+    execute,
+    isLoading,
+    isError,
+    error: isError ? new Error(getErrorMessage()) : null,
+    apiStatuses,
+    refetch,
+    // 個別データ（デバッグ用）
+    data: {
+      scoreStep3: scoreStep3Data,
+      visScore: visScoreData,
+      summary: summaryData,
+      pox: poxData,
+      excel: excelData,
+    },
+  };
+}

api-client/gradio-proxy/vis-score.ts

@@ -0,0 +1,52 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { VisScoreRequest, VisScoreResponse } from '@/schema/gradio-proxy/vis-score';
+import type { FetchQueryOptions } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+/**
+ * vis_score APIを呼び出すカスタムフック
+ * @returns キャッシュ対応のAPI呼び出し関数（タイムアウト20分、キャッシュ24時間）
+ */
+export function useVisScore() {
+  const queryClient = useQueryClient();
+
+  return useCallback(
+    async (request: VisScoreRequest): Promise<VisScoreResponse> => {
+      console.log('[useVisScore] API呼び出し開始:', {
+        hasCommonDict: !!request.commonDict,
+        hasScoreDict: !!request.scoreDict,
+        dummyMode: request.dummyMode,
+      });
+
+      return queryClient.fetchQuery(
+        createQueryOptions<VisScoreResponse>({
+          queryKey: ['vis-score', request],
+          queryFn: async (): Promise<VisScoreResponse> => {
+            try {
+              const response = await rpcClient['gradio-proxy']['vis-score'].$post({
+                json: request,
+              });
+
+              if (!response.ok) {
+                console.error('[useVisScore] Response status:', response.status);
+                const errorData = (await response.json()) as { message?: string; status?: string };
+                console.error('[useVisScore] API エラー:', errorData);
+                throw new Error(errorData.message || 'vis_score APIの呼び出しに失敗しました');
+              }
+
+              const data = await response.json();
+              console.log('[useVisScore] API呼び出し成功');
+              return data as VisScoreResponse;
+            } catch (error) {
+              console.error('[useVisScore] API呼び出しエラー:', error);
+              throw error;
+            }
+          },
+        }) as FetchQueryOptions<VisScoreResponse>,
+      );
+    },
+    [queryClient],
+  );
+}

api-client/pox/queries.ts

@@ -0,0 +1,38 @@
+import type { SwotData } from '@/schema/pox';
+import { getPox } from '@/services/gradio-with-dummy';
+import { useGlobalStore } from '@/store/global';
+import { useQuery } from '@tanstack/react-query';
+
+export function usePox(commonDict: unknown, scoreDict: unknown, scoreTotal: unknown, userEmail: string) {
+  const { dummyMode, userIdentifier } = useGlobalStore();
+  return useQuery<SwotData>({
+    queryKey: ['pox', commonDict, scoreDict, scoreTotal, userEmail, dummyMode],
+    queryFn: async () => {
+      const userData = {
+        commonDict: commonDict as object,
+        scoreDict: scoreDict as object,
+        score_total: scoreTotal as object,
+      };
+
+      // Gradio APIを直接呼び出し
+      const result = await getPox(userData, userEmail || null, userIdentifier);
+
+      // 結果の最初の要素（基本SWOT）を返す
+      if (Array.isArray(result) && result.length > 0) {
+        return result[0] as SwotData;
+      }
+
+      throw new Error('Invalid POX response format');
+    },
+    enabled:
+      (dummyMode || userEmail !== '') &&
+      (dummyMode ||
+        (commonDict !== undefined &&
+          commonDict !== null &&
+          scoreDict !== undefined &&
+          scoreDict !== null &&
+          scoreTotal !== undefined &&
+          scoreTotal !== null)),
+    staleTime: 1000 * 60 * 5, // 5分間はキャッシュを使用
+  });
+}

api-client/proposal/html-preview/index.ts

@@ -0,0 +1,147 @@
+import { parseApiResponse } from '@/api-client/utils/parseApiResponse';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { SwotData, SwotDataWithoutSummary } from '@/schema/pox';
+import {
+  generateContentsHtmlResponseSchema,
+  generateFvHtmlResponseSchema,
+  type ContentSection,
+  type FvData,
+  type GenerateContentsHtmlResponse,
+  type GenerateFvHtmlResponse,
+} from '@/schema/proposal';
+import type { ThemeExtractionResult } from '@/schema/theme-extraction';
+
+/**
+ * FV提案のHTML生成
+ */
+export async function generateFvHtml(params: {
+  tabName: string;
+  fvData: FvData;
+  provider?: 'openai' | 'gemini' | 'claude';
+  referenceUrl?: string;
+  screenshot?: string;
+  dummyMode?: boolean;
+  swotData?: SwotData | SwotDataWithoutSummary;
+  userEmail?: string;
+  sourcePage?: string;
+  forceFallbackMode?: boolean;
+  themeData?: ThemeExtractionResult | null;
+}): Promise<GenerateFvHtmlResponse> {
+  // テーマデータがある場合はログ出力のみ(将来のAPI対応用)
+  if (params.themeData) {
+    console.log('[FV HTML] テーマデータが適用されます:', params.themeData);
+  }
+
+  const response = await rpcClient.proposal['html-preview']['generate-fv-html'].$post({
+    json: {
+      tabName: params.tabName,
+      fvData: params.fvData,
+      provider: params.provider,
+      referenceUrl: params.referenceUrl,
+      screenshotUrl: params.screenshot, // パラメータ名をscreenshotUrlに変換
+      dummyMode: params.dummyMode,
+      swotData: params.swotData,
+      userEmail: params.userEmail,
+      sourcePage: params.sourcePage,
+      forceFallbackMode: params.forceFallbackMode,
+      themeData: params.themeData ?? undefined, // nullをundefinedに変換
+    },
+  });
+  return parseApiResponse(response, generateFvHtmlResponseSchema);
+}
+
+/**
+ * コンテンツ提案のHTML生成
+ */
+export async function generateContentsHtml(params: {
+  tabName: string;
+  cnData: ContentSection[];
+  provider?: 'openai' | 'gemini' | 'claude';
+  referenceUrl?: string;
+  screenshot?: string;
+  dummyMode?: boolean;
+  userEmail?: string;
+  themeData?: ThemeExtractionResult | null;
+}): Promise<GenerateContentsHtmlResponse> {
+  // テーマデータがある場合はログ出力のみ（将来のAPI対応用）
+  if (params.themeData) {
+    console.log('[CONTENTS HTML] テーマデータが適用されます:', params.themeData);
+  }
+
+  const response = await rpcClient.proposal['html-preview']['generate-contents-html'].$post({
+    json: {
+      tabName: params.tabName,
+      cnData: params.cnData,
+      provider: params.provider,
+      referenceUrl: params.referenceUrl,
+      screenshotUrl: params.screenshot, // パラメータ名をscreenshotUrlに変換
+      dummyMode: params.dummyMode,
+      userEmail: params.userEmail,
+      themeData: params.themeData ?? undefined, // nullをundefinedに変換
+    },
+  });
+  return parseApiResponse(response, generateContentsHtmlResponseSchema);
+}
+
+/**
+ * 画像生成を開始
+ */
+export async function startImageGeneration(
+  html: string,
+  tabName: string,
+  cnData: ContentSection[],
+  provider: 'openai' | 'claude' = 'claude',
+): Promise<{
+  batchId: string;
+  estimatedCompletionTime: string;
+  message: string;
+  status: string;
+}> {
+  const response = await fetch('/api/rpc/proposal/start-contents-image-generation', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      html,
+      tabName,
+      cnData,
+      provider,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`画像生成開始に失敗しました: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * 画像生成状況を確認
+ */
+export async function getImageGenerationStatus(batchId: string): Promise<{
+  batchId: string;
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  jobs: Array<{
+    jobId: string;
+    imageId: string;
+    status: 'pending' | 'generating' | 'completed' | 'failed';
+    generatedImageUrl?: string;
+    errorMessage?: string;
+  }>;
+  createdAt: string;
+  completedAt?: string;
+} | null> {
+  const response = await fetch(`/api/rpc/proposal/image-generation-status/${batchId}`);
+
+  if (!response.ok) {
+    if (response.status === 404) {
+      // バッチIDが存在しない場合は null を返す
+      return null;
+    }
+    throw new Error(`ステータス確認に失敗しました: ${response.statusText}`);
+  }
+
+  return response.json();
+}

api-client/proposal/html-preview/queries.ts

@@ -0,0 +1,250 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import type { SwotData, SwotDataWithoutSummary } from '@/schema/pox';
+import type { ContentSection, FvData, GenerateContentsHtmlResponse, GenerateFvHtmlResponse } from '@/schema/proposal';
+import type { ThemeExtractionResult } from '@/schema/theme-extraction';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+import { generateContentsHtml, generateFvHtml, getImageGenerationStatus, startImageGeneration } from './index';
+
+// FV提案HTMLを取得するフック（タブごと）
+export function useFvHtmlGeneration(
+  tabName: string,
+  fvData?: FvData,
+  enabled: boolean = false,
+  provider?: 'openai' | 'gemini' | 'claude',
+  referenceUrl?: string,
+  screenshot?: string,
+  dummyMode?: boolean,
+  swotData?: SwotData | SwotDataWithoutSummary,
+  userEmail?: string,
+  sourcePage?: string,
+  forceFallbackMode?: boolean,
+  themeData?: ThemeExtractionResult | null,
+) {
+  // パラメータから安定したハッシュを生成
+  const generateParamsHash = () => {
+    if (!fvData) return 'no-fv-data';
+
+    // FVデータの主要パラメータからハッシュを生成（実際の構造に合わせる）
+    const relevantParams = {
+      strategy: fvData.strategy,
+      need: fvData.need,
+      // FVデータの主要部分
+      mainCopy: fvData.data?.fv?.コピー?.メインコピー || '',
+      subCopy1: fvData.data?.fv?.コピー?.サブコピー1 || '',
+      subCopy2: fvData.data?.fv?.コピー?.サブコピー2 || '',
+      subCopy3: fvData.data?.fv?.コピー?.サブコピー3 || '',
+      ctaButton: fvData.data?.fv?.CTA?.ボタンテキスト || '',
+      microCopy: fvData.data?.fv?.CTA?.マイクロコピー || '',
+      visualCreationInstruction: fvData.data?.fv?.ビジュアル?.作成指示 || '',
+      authorityCreationInstruction: fvData.data?.fv?.権威付け?.作成指示 || '',
+      fvCreationIntent: fvData.fvCreationIntent || '',
+      // SWOTデータの主要部分
+      swotKeys: swotData ? Object.keys(swotData).sort().join('_') : '',
+      swotSample: swotData ? `${swotData['業界'] || ''}_${swotData['商材'] || ''}_${swotData['強み'] || ''}_${swotData['弱み'] || ''}` : '',
+    };
+
+    const str = JSON.stringify(relevantParams);
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = ((hash << 5) - hash + str.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash).toString(36);
+  };
+
+  const paramsHash = generateParamsHash();
+  const fvDataKey = `${tabName}_${provider || 'default'}_${dummyMode ? 'dummy' : 'live'}_${paramsHash}`;
+
+  // 前回のキーを保存するためのRef
+  const prevKeyRef = React.useRef<string>('');
+
+  // 現在のqueryKeyを生成
+  // 画像再生成を防ぐため、themeDataはクエリキーに含めない
+  const currentQueryKey = ['fvHtml', tabName, fvDataKey, provider, referenceUrl, dummyMode];
+
+  return useQuery<GenerateFvHtmlResponse>({
+    ...createQueryOptions<GenerateFvHtmlResponse>(),
+    queryKey: currentQueryKey,
+    queryFn: () => {
+      if (!fvData) {
+        throw new Error('fvData is required');
+      }
+      return generateFvHtml({
+        tabName,
+        fvData,
+        provider,
+        referenceUrl,
+        screenshot,
+        dummyMode,
+        swotData,
+        userEmail,
+        sourcePage,
+        forceFallbackMode,
+        themeData: null, // テーマはCSSのみで適用するため、画像生成時には渡さない
+      });
+    },
+    enabled: enabled && !!fvData,
+  });
+}
+
+// コンテンツ提案HTMLを取得するフック（タブごと）
+export function useContentsHtmlGeneration(
+  tabName: string,
+  cnData?: ContentSection[],
+  enabled: boolean = false,
+  provider?: 'openai' | 'gemini' | 'claude',
+  referenceUrl?: string,
+  screenshot?: string,
+  dummyMode?: boolean,
+  swotData?: SwotData | SwotDataWithoutSummary,
+  userEmail?: string,
+  themeData?: ThemeExtractionResult | null,
+) {
+  // パラメータから安定したハッシュを生成
+  const generateParamsHash = () => {
+    if (!cnData) return 'no-cn-data';
+
+    // CNデータの主要パラメータからハッシュを生成
+    const relevantParams = {
+      // CNデータのサンプル（最初の3要素）
+      sectionsCount: cnData.length || 0,
+      firstSections:
+        cnData
+          .slice(0, 3)
+          .map((s) => s.中区分)
+          .join('_') || '',
+      // SWOTデータの主要部分
+      swotKeys: swotData ? Object.keys(swotData).sort().join('_') : '',
+      swotSample: swotData ? `${swotData['業界'] || ''}_${swotData['商材'] || ''}` : '',
+    };
+
+    const str = JSON.stringify(relevantParams);
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = ((hash << 5) - hash + str.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash).toString(36);
+  };
+
+  const paramsHash = generateParamsHash();
+  const cnDataKey = `${tabName}_${provider || 'default'}_${dummyMode ? 'dummy' : 'live'}_${paramsHash}`;
+
+  // 前回のキーを保存するためのRef
+  const prevKeyRef = React.useRef<string>('');
+
+  // 現在のqueryKeyを生成
+  // 画像再生成を防ぐため、themeDataはクエリキーに含めない
+  const currentQueryKey = ['cnHtml', tabName, cnDataKey, provider, referenceUrl, dummyMode];
+
+  return useQuery<GenerateContentsHtmlResponse>({
+    ...createQueryOptions<GenerateContentsHtmlResponse>(),
+    queryKey: currentQueryKey,
+    queryFn: () => {
+      if (!cnData) {
+        throw new Error('cnData is required');
+      }
+      console.log(`[CN HTML] 生成開始: ${tabName}`);
+      return generateContentsHtml({
+        tabName,
+        cnData,
+        provider,
+        referenceUrl,
+        screenshot,
+        dummyMode,
+        userEmail,
+        themeData: null, // テーマはCSSのみで適用するため、画像生成時には渡さない
+      });
+    },
+    enabled: enabled && !!cnData,
+  });
+}
+
+// 画像生成を別途実行するフック
+export function useContentsImageGeneration(
+  tabName: string,
+  cnData?: ContentSection[],
+  htmlContent?: string,
+  enabled: boolean = false,
+  provider?: 'openai' | 'gemini' | 'claude',
+) {
+  const queryClient = useQueryClient();
+
+  return useQuery({
+    queryKey: ['contentsImageGeneration', tabName, cnData, provider],
+    queryFn: async () => {
+      if (!cnData || !htmlContent) {
+        throw new Error('cnData and htmlContent are required');
+      }
+
+      try {
+        const batchResult = await startImageGeneration(
+          htmlContent,
+          tabName,
+          cnData,
+          provider === 'openai' || provider === 'claude' ? provider : 'claude',
+        );
+
+        if (batchResult.batchId) {
+          // ポーリング処理を開始
+          const pollInterval = setInterval(async () => {
+            try {
+              const status = await getImageGenerationStatus(batchResult.batchId);
+
+              if (!status) {
+                clearInterval(pollInterval);
+                return;
+              }
+
+              if (status.status === 'completed' && status.jobs) {
+                clearInterval(pollInterval);
+
+                const imageReplacements = status.jobs
+                  .filter((job) => job.status === 'completed' && job.generatedImageUrl)
+                  .map((job) => ({
+                    imageId: job.imageId,
+                    imageUrl: job.generatedImageUrl || '',
+                  }));
+
+                if (imageReplacements.length > 0) {
+                  let updatedHtml = htmlContent;
+                  imageReplacements.forEach(({ imageId, imageUrl }) => {
+                    const regex = new RegExp(`src="placeholder:${imageId}"`, 'g');
+                    updatedHtml = updatedHtml.replace(regex, `src="${imageUrl}"`);
+                  });
+
+                  // キャッシュを更新
+                  const currentData = queryClient.getQueryData<GenerateContentsHtmlResponse>(['contentsHtml', tabName, cnData, provider]);
+
+                  if (currentData) {
+                    queryClient.setQueryData(['contentsHtml', tabName, cnData, provider], {
+                      ...currentData,
+                      html: updatedHtml,
+                    });
+                  }
+                }
+              } else if (status.status === 'failed') {
+                clearInterval(pollInterval);
+                console.error('[Contents Image Batch] Failed:', status);
+              }
+            } catch (error) {
+              console.error('[Contents Image Polling] Error:', error);
+            }
+          }, 20000); // 20秒ごとにポーリング（負荷軽減）
+
+          // 最大20分後にタイムアウト（画像生成の実際の処理時間を考慮）
+          setTimeout(() => {
+            clearInterval(pollInterval);
+            console.warn('[Contents Image Polling] Timeout after 20 minutes');
+          }, 1200000); // 20分 = 1200秒
+        }
+
+        return batchResult;
+      } catch (error) {
+        console.error('[Contents Image Batch] Failed to start:', error);
+        throw error;
+      }
+    },
+    enabled: enabled && !!cnData && !!htmlContent,
+    staleTime: Infinity, // 一度実行したら再実行しない
+  });
+}

api-client/proposal/index.ts

@@ -0,0 +1,6 @@
+// Re-export everything from subdirectories
+export * from './html-preview/index';
+export * from './html-preview/queries';
+export * from './proposal/queries';
+export * from './proposal/translator';
+export * from './screenshot/queries';

api-client/proposal/proposal/individual-queries.ts

@@ -0,0 +1,303 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import type { ProposalCnGradioResponse } from '@/schema/gradio-proxy/proposal-cn';
+import type { ProposalFvGradioResponse } from '@/schema/gradio-proxy/proposal-fv';
+import type { ProposalIntentGradioResponse } from '@/schema/gradio-proxy/proposal-intent';
+import type { ProposalPredictionGradioResponse } from '@/schema/gradio-proxy/proposal-prediction';
+import type { ThemeByMomentStrategy } from '@/schema/gradio-proxy/theme-by-moment';
+import { useGlobalStore } from '@/store/global';
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+
+// 個別のuseQueryフック
+interface BaseProposalParams {
+  selectionHash: string;
+  userEmail?: string | null;
+  dummyMode?: boolean;
+}
+
+interface ProposalFvParams extends BaseProposalParams {
+  strategy_x_moment?: Record<string, unknown>;
+  commonDict?: Record<string, unknown>;
+  fv_infos?: Record<string, unknown>;
+  strategies?: Record<string, unknown>;
+  cnall_json?: Record<string, unknown>;
+  url_category_scores?: Record<string, unknown>;
+}
+
+export function useProposalFv(params: ProposalFvParams, enabled: boolean = true): UseQueryResult<ProposalFvGradioResponse> {
+  const { selectionHash, dummyMode, ...apiParams } = params;
+  const { userIdentifier } = useGlobalStore();
+
+  return useQuery({
+    queryKey: ['proposalFv', selectionHash],
+    ...createQueryOptions<ProposalFvGradioResponse>({
+      queryFn: async () => {
+        const response = await rpcClient['gradio-proxy']['proposal-fv'].$post({
+          json: {
+            strategy_x_moment: apiParams.strategy_x_moment,
+            commonDict: apiParams.commonDict,
+            fv_infos: apiParams.fv_infos,
+            strategies: apiParams.strategies,
+            cnall_json: apiParams.cnall_json,
+            url_category_scores: apiParams.url_category_scores,
+            dummyMode: dummyMode,
+            userEmail: apiParams.userEmail ?? undefined,
+            userIdentifier,
+          },
+        });
+
+        if (!response.ok) {
+          console.error('[useProposalFv] Response status:', response.status);
+          const errorData = (await response.json()) as { message?: string; status?: string };
+          console.error('[useProposalFv] API エラー:', errorData);
+          throw new Error(errorData.message || 'proposal_fv APIの呼び出しに失敗しました');
+        }
+
+        const data = await response.json();
+        return data as ProposalFvGradioResponse;
+      },
+      enabled: enabled,
+      staleTime: 30 * 60 * 1000, // 30分
+      gcTime: 60 * 60 * 1000, // 1時間
+      retry: false,
+    }),
+  });
+}
+
+interface ProposalCnParams extends BaseProposalParams {
+  strategy_x_moment?: Record<string, unknown>;
+  commonDict?: Record<string, unknown>;
+  cnall_json?: Record<string, unknown>;
+  strategies?: Record<string, unknown>;
+  fv_infos?: Record<string, unknown>;
+}
+
+export function useProposalCn(params: ProposalCnParams, enabled: boolean = true): UseQueryResult<ProposalCnGradioResponse> {
+  const { selectionHash, dummyMode, ...apiParams } = params;
+  const { userIdentifier } = useGlobalStore();
+
+  return useQuery({
+    queryKey: ['proposalCn', selectionHash],
+    ...createQueryOptions<ProposalCnGradioResponse>({
+      queryFn: async () => {
+        const response = await rpcClient['gradio-proxy']['proposal-cn'].$post({
+          json: {
+            strategy_x_moment: apiParams.strategy_x_moment,
+            commonDict: apiParams.commonDict,
+            cnall_json: apiParams.cnall_json,
+            strategies: apiParams.strategies,
+            fv_infos: apiParams.fv_infos,
+            dummyMode: dummyMode,
+            userEmail: apiParams.userEmail ?? undefined,
+            userIdentifier,
+          },
+        });
+
+        if (!response.ok) {
+          console.error('[useProposalCn] Response status:', response.status);
+          const errorData = (await response.json()) as { message?: string; status?: string };
+          console.error('[useProposalCn] API エラー:', errorData);
+          throw new Error(errorData.message || 'proposal_cn APIの呼び出しに失敗しました');
+        }
+
+        const data = await response.json();
+        return data as ProposalCnGradioResponse;
+      },
+      enabled: enabled,
+      staleTime: 30 * 60 * 1000,
+      gcTime: 60 * 60 * 1000,
+      retry: false,
+    }),
+  });
+}
+
+interface ProposalPredictionParams extends BaseProposalParams {
+  proposal_fv?: ProposalFvGradioResponse;
+  proposal_cn?: ProposalCnGradioResponse;
+  commonDict?: Record<string, unknown>;
+  fv_infos?: Record<string, unknown>;
+}
+
+export function useProposalPrediction(params: ProposalPredictionParams, enabled: boolean = true): UseQueryResult<ProposalPredictionGradioResponse> {
+  const { dummyMode, selectionHash, ...apiParams } = params;
+  const { userIdentifier } = useGlobalStore();
+
+  return useQuery({
+    // selectionHashのみでキ���ッシュ管理（FV/CNが更新されても同じ選択肢なら再フェッチしない）
+    queryKey: ['proposalPrediction', selectionHash],
+    ...createQueryOptions<ProposalPredictionGradioResponse>({
+      queryFn: async () => {
+        try {
+          const response = await rpcClient['gradio-proxy']['proposal-prediction'].$post({
+            json: {
+              proposal_fv: apiParams.proposal_fv,
+              proposal_cn: apiParams.proposal_cn,
+              commonDict: apiParams.commonDict,
+              fv_infos: apiParams.fv_infos,
+              dummyMode: dummyMode,
+              userEmail: apiParams.userEmail ?? undefined,
+              userIdentifier,
+            },
+          });
+
+          if (!response.ok) {
+            console.error('[useProposalPrediction] Response status:', response.status);
+            const errorData = (await response.json()) as { message?: string; status?: string };
+            console.error('[useProposalPrediction] API エラー:', errorData);
+            throw new Error(errorData.message || 'proposal_prediction APIの呼び出しに失敗しました');
+          }
+
+          const data = await response.json();
+          return data as ProposalPredictionGradioResponse;
+        } catch (error: any) {
+          console.error('[useProposalPrediction] Error during fetch or processing:', {
+            message: error?.message,
+            stack: error?.stack,
+            code: error?.code,
+          });
+          throw error;
+        }
+      },
+      enabled: enabled && !!apiParams.proposal_fv && !!apiParams.proposal_cn,
+      staleTime: 30 * 60 * 1000,
+      gcTime: 60 * 60 * 1000,
+      // デフォルトのリトライ設定を使用（retry: 1）
+      // retry: false を削除して、ネットワークエラー等での適切なリトライを許可
+    }),
+  });
+}
+
+interface ProposalIntentParams extends BaseProposalParams {
+  proposal_fv?: ProposalFvGradioResponse;
+  proposal_cn?: ProposalCnGradioResponse;
+  commonDict?: Record<string, unknown>;
+  swot?: Record<string, unknown>;
+  q_summary?: Record<string, unknown>;
+  strategy_x_moment?: Record<string, unknown>;
+}
+
+export function useProposalIntent(params: ProposalIntentParams, enabled: boolean = true): UseQueryResult<ProposalIntentGradioResponse> {
+  const { dummyMode, selectionHash, ...apiParams } = params;
+  const { userIdentifier } = useGlobalStore();
+
+  return useQuery({
+    // selectionHashのみでキャッシュ管理（FV/CNが更新されても同じ選択肢なら再フェッチしない）
+    queryKey: ['proposalIntent', selectionHash],
+    ...createQueryOptions<ProposalIntentGradioResponse>({
+      queryFn: async () => {
+        const response = await rpcClient['gradio-proxy']['proposal-intent'].$post({
+          json: {
+            proposal_fv: apiParams.proposal_fv,
+            proposal_cn: apiParams.proposal_cn,
+            commonDict: apiParams.commonDict,
+            swot: apiParams.swot,
+            q_summary: apiParams.q_summary,
+            strategy_x_moment: apiParams.strategy_x_moment as ThemeByMomentStrategy | undefined,
+            dummyMode: dummyMode,
+            userEmail: apiParams.userEmail ?? undefined,
+            userIdentifier,
+          },
+        });
+
+        if (!response.ok) {
+          console.error('[useProposalIntent] Response status:', response.status);
+          const errorData = (await response.json()) as { message?: string; status?: string };
+          console.error('[useProposalIntent] API エラー:', errorData);
+          throw new Error(errorData.message || 'proposal_intent APIの呼び出しに失敗しました');
+        }
+
+        const data = await response.json();
+        return data as ProposalIntentGradioResponse;
+      },
+      enabled: enabled && !!apiParams.proposal_fv && !!apiParams.proposal_cn,
+      staleTime: 30 * 60 * 1000,
+      gcTime: 60 * 60 * 1000,
+      retry: false, // デバッグのためリトライを無効化
+      refetchOnWindowFocus: false, // ウィンドウフォーカス時の再フェッチを無効化
+    }),
+  });
+}
+
+/**
+ * useThemeByMomentも個別フック化
+ */
+interface ThemeByMomentParams extends BaseProposalParams {
+  commonDict?: Record<string, unknown>;
+  scoreDict?: Record<string, unknown>;
+  swot?: Record<string, unknown>;
+  strategies?: Record<string, unknown>;
+  fv_infos?: Record<string, unknown>;
+  moments?: string[];
+  own_theme?: string;
+}
+
+export function useThemeByMomentOptimized(params: ThemeByMomentParams, enabled: boolean = true): UseQueryResult<unknown[]> {
+  const { selectionHash, dummyMode, userEmail, ...apiParams } = params;
+  const { userIdentifier } = useGlobalStore();
+
+  const queryResult = useQuery({
+    queryKey: ['themeByMoment', selectionHash],
+    ...createQueryOptions<unknown[]>({
+      queryFn: async () => {
+        // 通常モードで必要なデータが不足している場合はエラーをthrow
+        if (!dummyMode) {
+          if (!apiParams.commonDict || Object.keys(apiParams.commonDict).length === 0) {
+            console.error('[useThemeByMoment] ERROR: commonDict is missing in normal mode');
+            throw new Error('分析データ(commonDict)が設定されていません。詳細画面から正しく遷移してください。');
+          }
+          if (!apiParams.scoreDict || Object.keys(apiParams.scoreDict).length === 0) {
+            console.error('[useThemeByMoment] ERROR: scoreDict is missing in normal mode');
+            throw new Error('スコアデータ(scoreDict)が設定されていません。詳細画面から正しく遷移してください。');
+          }
+          if (!apiParams.moments || apiParams.moments.length === 0) {
+            console.error('[useThemeByMoment] ERROR: moments is empty in normal mode');
+            throw new Error('改善案の方向性が選択されていません。');
+          }
+          // swotData78 (strategies)は必須ではないが、警告を出す
+          if (!apiParams.strategies) {
+            console.warn('[useThemeByMoment] WARNING: strategies (swotData78) is missing, using empty object');
+          }
+        }
+
+        const response = await rpcClient['gradio-proxy']['theme-by-moment'].$post({
+          json: {
+            commonDict: apiParams.commonDict || {},
+            scoreDict: apiParams.scoreDict || {},
+            swot: apiParams.swot || {},
+            strategies: apiParams.strategies || {},
+            moments: apiParams.moments || [],
+            fv_infos: apiParams.fv_infos,
+            own_theme: apiParams.own_theme || '',
+            dummyMode: dummyMode,
+            userEmail: userEmail || '',
+            userIdentifier,
+          },
+        });
+
+        if (!response.ok) {
+          console.error('[useThemeByMoment] Response status:', response.status);
+          const errorData = (await response.json()) as { message?: string; status?: string };
+          console.error('[useThemeByMoment] API エラー:', errorData);
+          throw new Error(errorData.message || 'theme_by_moment APIの呼び出しに失敗しました');
+        }
+
+        const data = await response.json();
+        return data as unknown[];
+      },
+      enabled: enabled && (dummyMode || (!!apiParams.moments && apiParams.moments.length > 0)),
+      staleTime: 30 * 60 * 1000,
+      gcTime: 60 * 60 * 1000,
+      retry: false,
+    }),
+  });
+
+  // デバッグ用ログ
+  if (queryResult.isError) {
+    console.error('[useThemeByMoment] Query is in error state:', {
+      error: queryResult.error,
+      errorMessage: queryResult.error?.message,
+    });
+  }
+
+  return queryResult;
+}

api-client/proposal/proposal/optimized-queries.ts

@@ -0,0 +1,372 @@
+import { ProposalTranslator } from '@/api-client/proposal/proposal/translator';
+import type { ProposalCnGradioResponse } from '@/schema/gradio-proxy/proposal-cn';
+import type { ProposalFvGradioResponse } from '@/schema/gradio-proxy/proposal-fv';
+import type { ProposalIntentGradioResponse } from '@/schema/gradio-proxy/proposal-intent';
+import type { ProposalPredictionGradioResponse } from '@/schema/gradio-proxy/proposal-prediction';
+import type { ThemeByMomentStrategy } from '@/schema/gradio-proxy/theme-by-moment';
+import type { ExtendedProposalTabsResponse } from '@/schema/proposal';
+import { useGlobalStore } from '@/store/global';
+import { useInputStore } from '@/store/input';
+import { generateSelectionHash } from '@/store/proposal-trigger';
+import { useResultStore } from '@/store/result';
+import { useUserStore } from '@/store/user';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useProposalCn, useProposalFv, useProposalIntent, useProposalPrediction, useThemeByMomentOptimized } from './individual-queries';
+
+interface UseProposalTabsOptimizedParams {
+  // 外部から指定可能なパラメータ
+  strategy_x_moment?: ThemeByMomentStrategy;
+  enabled?: boolean;
+  dummyMode?: boolean;
+}
+
+export function useProposalTabsOptimized(params: UseProposalTabsOptimizedParams = {}) {
+  const { strategy_x_moment: externalStrategyXMoment, enabled: externalEnabled = true, dummyMode: paramDummyMode } = params;
+
+  // Store からの必要なデータを取得
+  const { dummyMode: storeDummyMode } = useGlobalStore();
+  const { fvInfos, selectedMoments, cnInfo } = useInputStore();
+  const { commonDict, scoreDict, swotData75, swotData78, summaryData, urlCategoryScores } = useResultStore();
+  const { user } = useUserStore();
+  const queryClient = useQueryClient();
+  const prevContentHashRef = useRef<string>('');
+
+  // API実行時間追跡用
+  const apiStartTimesRef = useRef<Record<string, number>>({});
+  const [apiStatuses, setApiStatuses] = useState<Record<string, { duration: number; status: 'loading' | 'success' | 'error' }>>({});
+
+  // ダミーモードの判定
+  const isDummyMode = paramDummyMode !== undefined ? paramDummyMode : storeDummyMode;
+
+  // ダミーモード用のデータ
+  const dummyCommonDict = {
+    dummy: 'data',
+    regulation: 'test',
+    mode: true,
+  };
+  const effectiveCommonDict = isDummyMode ? commonDict || dummyCommonDict : commonDict;
+
+  // コンテンツデータからハッシュを生成（キャッシュキーとして使用）
+  // selectedMomentsも含めて、選択肢が変わった場合に新しいキャッシュキーを生成
+  const contentData = useMemo(
+    () => ({
+      fvInfos: fvInfos ? JSON.parse(JSON.stringify(fvInfos)) : null, // ディープコピーで参照を除去
+      cnInfo: cnInfo ? JSON.parse(JSON.stringify(cnInfo)) : null, // ディープコピーで参照を除去
+      selectedMoments: selectedMoments ? [...selectedMoments] : [], // 選択肢も含める
+    }),
+    [fvInfos, cnInfo, selectedMoments],
+  );
+
+  const contentHash = useMemo(() => generateSelectionHash(contentData), [contentData]);
+
+  // キャッシュキーの変更を追跡
+  useEffect(() => {
+    if (prevContentHashRef.current !== contentHash) {
+      if (prevContentHashRef.current) {
+        console.log('[useProposalTabsOptimized] ⚠️ Content hash changed - will trigger new queries', {
+          oldHash: prevContentHashRef.current.substring(0, 8),
+          newHash: contentHash.substring(0, 8),
+          selectedMoments,
+          fvInfos: !!fvInfos,
+          cnInfo: !!cnInfo,
+        });
+      }
+      prevContentHashRef.current = contentHash;
+    }
+  }, [contentHash, selectedMoments, fvInfos, cnInfo, externalEnabled, isDummyMode]);
+
+  // コンポーネントのアンマウント時にクエリをキャンセル
+  useEffect(() => {
+    return () => {
+      // 現在実行中のクエリをキャンセル
+      if (contentHash) {
+        const currentKeys = [
+          ['themeByMoment', contentHash],
+          ['proposalFv', contentHash],
+          ['proposalCn', contentHash],
+          ['proposalPrediction', contentHash],
+          ['proposalIntent', contentHash],
+        ];
+
+        currentKeys.forEach((key) => {
+          queryClient.cancelQueries({ queryKey: key });
+        });
+      }
+    };
+  }, [contentHash, queryClient]);
+
+  // 基本パラメータ
+  const baseParams = {
+    selectionHash: contentHash, // 内部的にはselectionHashという名前を維持（API互換性のため）
+    userEmail: user?.user?.email || null,
+    dummyMode: isDummyMode,
+  };
+
+  // Step 1: ThemeByMoment（ダミーモードでも実行）
+  const themeByMoment = useThemeByMomentOptimized(
+    {
+      ...baseParams,
+      commonDict: effectiveCommonDict || undefined,
+      scoreDict: scoreDict || undefined,
+      swot: swotData75 || undefined,
+      strategies: swotData78 || {}, // undefinedの���合は空オブジェクトを渡す
+      fv_infos: fvInfos as Record<string, unknown> | undefined,
+      moments: selectedMoments,
+      own_theme: '', // RefreshMomentから取得する必要がある場合は追加
+    },
+    externalEnabled && (isDummyMode || (!isDummyMode && selectedMoments.length > 0)),
+  );
+
+  // strategy_x_moment の決定
+  const strategy_x_moment = useMemo((): ThemeByMomentStrategy | null => {
+    if (externalStrategyXMoment) {
+      return externalStrategyXMoment;
+    }
+    // themeByMomentの結果から取得（ダミーモードも含む）
+    const result =
+      themeByMoment.data && Array.isArray(themeByMoment.data) && themeByMoment.data.length > 2
+        ? (themeByMoment.data[2] as ThemeByMomentStrategy)
+        : null;
+
+    return result;
+  }, [externalStrategyXMoment, themeByMoment.data]);
+
+  // APIステータス追跡用のヘルパー関数
+  const updateApiStatus = useCallback((apiName: string, status: 'loading' | 'success' | 'error') => {
+    if (status === 'loading') {
+      apiStartTimesRef.current[apiName] = Date.now();
+      setApiStatuses((prev) => ({
+        ...prev,
+        [apiName]: { duration: 0, status: 'loading' },
+      }));
+    } else {
+      const startTime = apiStartTimesRef.current[apiName];
+      const duration = startTime ? (Date.now() - startTime) / 1000 : 0;
+      setApiStatuses((prev) => ({
+        ...prev,
+        [apiName]: { duration, status },
+      }));
+    }
+  }, []);
+
+  // Step 2: ProposalFv & ProposalCn（並列実行）
+  const hasStrategyXMoment = !!strategy_x_moment && Object.keys(strategy_x_moment).length > 0;
+  const canStartFvCn = isDummyMode || (hasStrategyXMoment && !themeByMoment.isLoading);
+
+  const proposalFv = useProposalFv(
+    {
+      ...baseParams,
+      strategy_x_moment: strategy_x_moment || undefined,
+      commonDict: effectiveCommonDict || undefined,
+      fv_infos: (fvInfos as Record<string, unknown>) || undefined,
+      strategies: swotData78 || {}, // undefinedの場合は空オブジェクトを渡す
+      cnall_json: (cnInfo as Record<string, unknown>) || undefined,
+      url_category_scores: urlCategoryScores || undefined,
+    },
+    externalEnabled && canStartFvCn,
+  );
+
+  const proposalCn = useProposalCn(
+    {
+      ...baseParams,
+      strategy_x_moment: strategy_x_moment || undefined,
+      commonDict: effectiveCommonDict || undefined,
+      cnall_json: (cnInfo as Record<string, unknown>) || undefined,
+      strategies: swotData78 || {}, // undefinedの場合は空オブジェクトを渡す
+      fv_infos: (fvInfos as Record<string, unknown>) || undefined,
+    },
+    externalEnabled && canStartFvCn,
+  );
+
+  // Step 3: ProposalPrediction & ProposalIntent（FV/CN完了後）
+  // シンプルに、FV/CNが成功したらPrediction/Intentを実行
+  const canStartPredictionIntent = proposalFv.isSuccess && proposalCn.isSuccess;
+
+  const proposalPrediction = useProposalPrediction(
+    {
+      ...baseParams,
+      proposal_fv: proposalFv.data as ProposalFvGradioResponse,
+      proposal_cn: proposalCn.data as ProposalCnGradioResponse,
+      commonDict: effectiveCommonDict || undefined,
+      fv_infos: (fvInfos as Record<string, unknown>) || undefined,
+    },
+    externalEnabled && canStartPredictionIntent,
+  );
+
+  const proposalIntent = useProposalIntent(
+    {
+      ...baseParams,
+      proposal_fv: proposalFv.data as ProposalFvGradioResponse,
+      proposal_cn: proposalCn.data as ProposalCnGradioResponse,
+      commonDict: effectiveCommonDict || undefined,
+      swot: swotData75 || undefined,
+      q_summary: summaryData || undefined,
+      strategy_x_moment: strategy_x_moment || undefined,
+    },
+    externalEnabled && canStartPredictionIntent,
+  );
+
+  // 各APIのステータスを追跡
+  useEffect(() => {
+    if (themeByMoment.isLoading) updateApiStatus('themeByMoment', 'loading');
+    else if (themeByMoment.isSuccess) updateApiStatus('themeByMoment', 'success');
+    else if (themeByMoment.isError) updateApiStatus('themeByMoment', 'error');
+  }, [themeByMoment.isLoading, themeByMoment.isSuccess, themeByMoment.isError, updateApiStatus]);
+
+  useEffect(() => {
+    if (proposalFv.isLoading) updateApiStatus('proposalFv', 'loading');
+    else if (proposalFv.isSuccess) updateApiStatus('proposalFv', 'success');
+    else if (proposalFv.isError) updateApiStatus('proposalFv', 'error');
+  }, [proposalFv.isLoading, proposalFv.isSuccess, proposalFv.isError, updateApiStatus]);
+
+  useEffect(() => {
+    if (proposalCn.isLoading) updateApiStatus('proposalCn', 'loading');
+    else if (proposalCn.isSuccess) updateApiStatus('proposalCn', 'success');
+    else if (proposalCn.isError) updateApiStatus('proposalCn', 'error');
+  }, [proposalCn.isLoading, proposalCn.isSuccess, proposalCn.isError, updateApiStatus]);
+
+  useEffect(() => {
+    if (proposalPrediction.isLoading) updateApiStatus('proposalPrediction', 'loading');
+    else if (proposalPrediction.isSuccess) updateApiStatus('proposalPrediction', 'success');
+    else if (proposalPrediction.isError) updateApiStatus('proposalPrediction', 'error');
+  }, [proposalPrediction.isLoading, proposalPrediction.isSuccess, proposalPrediction.isError, updateApiStatus]);
+
+  useEffect(() => {
+    if (proposalIntent.isLoading) updateApiStatus('proposalIntent', 'loading');
+    else if (proposalIntent.isSuccess) updateApiStatus('proposalIntent', 'success');
+    else if (proposalIntent.isError) {
+      updateApiStatus('proposalIntent', 'error');
+      // エラーの詳細をログ出力（開発環境のみ）
+      if (process.env.NODE_ENV === 'development') {
+        console.error('[useProposalTabsOptimized] proposalIntent error:', proposalIntent.error);
+      }
+    }
+  }, [proposalIntent.isLoading, proposalIntent.isSuccess, proposalIntent.isError, proposalIntent.error, updateApiStatus]);
+
+  // データの変換（シリアライズ可能なオブジェクトのみを返すように安全に処理）
+  const translatedData = useMemo(() => {
+    if (!proposalFv.data || !proposalCn.data || !proposalIntent.data || !proposalPrediction.data) {
+      return null;
+    }
+
+    try {
+      const result = ProposalTranslator.translateToTabsData(
+        proposalFv.data as ProposalFvGradioResponse,
+        proposalCn.data as ProposalCnGradioResponse,
+        proposalIntent.data as ProposalIntentGradioResponse,
+        proposalPrediction.data as ProposalPredictionGradioResponse,
+        strategy_x_moment || undefined,
+      );
+
+      return result;
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.error('[useProposalTabsOptimized] Translation error:', error);
+      }
+      return null;
+    }
+  }, [proposalFv.data, proposalCn.data, proposalIntent.data, proposalPrediction.data, strategy_x_moment]);
+
+  // 統合されたローディング状態
+  const isLoading =
+    themeByMoment.isLoading || proposalFv.isLoading || proposalCn.isLoading || proposalPrediction.isLoading || proposalIntent.isLoading;
+
+  // 統合されたエラー状態
+  const isError = themeByMoment.isError || proposalFv.isError || proposalCn.isError || proposalPrediction.isError || proposalIntent.isError;
+
+  // エラーメッセージの取得
+  const getErrorMessage = useCallback(() => {
+    if (themeByMoment.isError) {
+      // themeByMomentのエラーメッセージを優先的に返す
+      const errorMsg = themeByMoment.error?.message || 'テーマ取得に失敗しました';
+      return errorMsg;
+    }
+    if (proposalFv.isError) return 'FV提案の取得に失敗しました';
+    if (proposalCn.isError) return 'コンテンツ提案の取得に失敗しました';
+    if (proposalPrediction.isError) return '予測データの取得に失敗しました';
+    if (proposalIntent.isError) return 'インテント提案の取得に失敗しました';
+    return 'データの取得に失敗しました';
+  }, [
+    themeByMoment.isError,
+    themeByMoment.error?.message,
+    proposalFv.isError,
+    proposalCn.isError,
+    proposalPrediction.isError,
+    proposalIntent.isError,
+  ]);
+
+  // 個別の手動リトライ関数
+  const refetchFailed = () => {
+    if (themeByMoment.isError) themeByMoment.refetch();
+    if (proposalFv.isError) proposalFv.refetch();
+    if (proposalCn.isError) proposalCn.refetch();
+    if (proposalPrediction.isError) proposalPrediction.refetch();
+    if (proposalIntent.isError) proposalIntent.refetch();
+  };
+
+  // 安全にシリアライズ可能なデータのみを返す
+  const safeRawData = useMemo(() => {
+    if (!proposalFv.data || !proposalCn.data || !proposalIntent.data || !proposalPrediction.data) {
+      return undefined;
+    }
+
+    try {
+      // React Queryからの返り値を確実にシリアライズして非シリアライズ可能オブジェクトを除去
+      const serializedData = {
+        proposal_fv: proposalFv.data,
+        proposal_cn: proposalCn.data,
+        proposal_intent: proposalIntent.data,
+        proposal_prediction: proposalPrediction.data,
+        strategy_x_moment: strategy_x_moment || undefined,
+      };
+
+      // JSON.parse(JSON.stringify())でシリアライズ
+      return JSON.parse(JSON.stringify(serializedData));
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.error('[useProposalTabsOptimized] Serialization error in safeRawData:', error);
+      }
+      return undefined;
+    }
+  }, [proposalFv.data, proposalCn.data, proposalIntent.data, proposalPrediction.data, strategy_x_moment]);
+
+  // 返却値の構造は既存のuseProposalTabsと互換性を保つ
+  const result: ExtendedProposalTabsResponse | undefined = translatedData
+    ? {
+        data: translatedData,
+        rawData: safeRawData,
+      }
+    : undefined;
+
+  // 最終的な返り値もシリアライズして確実に安全にする
+  const serializedResult = useMemo(() => {
+    if (!result) return undefined;
+
+    try {
+      return JSON.parse(
+        JSON.stringify({
+          data: result.data,
+          rawData: result.rawData,
+        }),
+      );
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.error('[useProposalTabsOptimized] Final serialization error:', error);
+      }
+      return undefined;
+    }
+  }, [result]);
+
+  return {
+    data: serializedResult?.data,
+    rawData: serializedResult?.rawData,
+    isLoading,
+    isError,
+    error: isError ? new Error(getErrorMessage()) : null,
+    refetch: refetchFailed,
+    apiStatuses, // API実行時間とステータス情報
+    selectionHash: contentHash, // コンテンツハッシュを外部で利用可能にする（互換性のためselectionHashという名前で公開）
+    // queries オブジェクトを削除（React Queryの内部オブジェクトを含みシリアライズできない）
+  };
+}

api-client/proposal/proposal/queries.ts

@@ -0,0 +1,65 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { getThemeByMoment } from '@/services/gradio-with-dummy';
+import { useGlobalStore } from '@/store/global';
+import { useQuery } from '@tanstack/react-query';
+
+// useProposalTabs関数は削除されました。
+// useProposalTabsOptimizedを使用してください。
+
+interface UseThemeByMomentParams {
+  commonDict?: Record<string, unknown>;
+  scoreDict?: Record<string, unknown>;
+  swot?: Record<string, unknown>;
+  strategies?: Record<string, unknown>;
+  moments?: string[];
+  fv_infos?: Record<string, unknown>;
+  own_theme?: string;
+  userEmail?: string;
+  enabled?: boolean;
+}
+
+/**
+ * getThemeByMomentをReact Queryでキャッシュ化するフック
+ * 選択されたモーメントが同じ場合はキャッシュを使用
+ */
+export function useThemeByMoment(params: UseThemeByMomentParams) {
+  const { commonDict, scoreDict, swot, strategies, moments, fv_infos, own_theme, userEmail, enabled = true } = params;
+  const { userIdentifier } = useGlobalStore();
+
+  return useQuery({
+    ...createQueryOptions(),
+    queryKey: [
+      'themeByMoment',
+      moments, // 選択されたモーメント（これが主要なキャッシュキー）
+      commonDict,
+      scoreDict,
+      swot,
+      strategies,
+      fv_infos,
+      own_theme,
+      userEmail,
+    ],
+    queryFn: async () => {
+      if (!commonDict || !scoreDict || !swot || !moments || moments.length === 0) {
+        throw new Error('Required parameters are missing');
+      }
+
+      const response = await getThemeByMoment(
+        {
+          commonDict,
+          scoreDict,
+          swot,
+          strategies: strategies || {},
+          moments,
+          fv_infos: fv_infos || undefined,
+          own_theme: own_theme || '',
+        },
+        userEmail || '',
+        userIdentifier,
+      );
+
+      return response;
+    },
+    enabled: enabled && !!commonDict && !!scoreDict && !!swot && !!moments && moments.length > 0,
+  });
+}

api-client/proposal/proposal/translator.spec.ts

@@ -0,0 +1,491 @@
+import { describe, expect, it } from 'vitest';
+import { ProposalTranslator } from './translator';
+import type {
+  ContentSection,
+  ProposalCnGradioResponse,
+  ProposalFvGradioResponse,
+  ProposalIntentGradioResponse,
+  ProposalPredictionGradioResponse,
+  ThemeByMomentStrategy,
+} from '@/schema/proposal';
+
+describe('ProposalTranslator', () => {
+  const translator = ProposalTranslator;
+
+  describe('translateCnDataToTabs', () => {
+    it('ダミーデータの各戦略×フェーズが正しいタブにマッピングされる', () => {
+      // ダミーデータと同じ構造のテストデータ
+      const testData: ProposalCnGradioResponse = {
+        積極化戦略: {
+          ニーズ1: {
+            cn: [
+              { 大区分: 'News/更新情報', 中区分: 'テスト1', 小区分json: [], 制作意図: '' },
+              { 大区分: '商品/サービスの特徴', 中区分: 'テスト2', 小区分json: [], 制作意図: '' },
+              { 大区分: '商品/サービスの詳細情報', 中区分: 'テスト3', 小区分json: [], 制作意図: '' },
+              { 大区分: 'メディア掲載情報', 中区分: 'テスト4', 小区分json: [], 制作意図: '' },
+            ],
+          },
+          ニーズ2: {
+            cn: [
+              { 大区分: '問題提起/共感', 中区分: 'テスト5', 小区分json: [], 制作意図: '' },
+              { 大区分: 'シミュレーション', 中区分: 'テスト6', 小区分json: [], 制作意図: '' },
+              { 大区分: '解決策/ベネフィット提示', 中区分: 'テスト7', 小区分json: [], 制作意図: '' },
+              { 大区分: 'SPオファー/限定特典', 中区分: 'テスト8', 小区分json: [], 制作意図: '' },
+            ],
+          },
+          ニーズ3: {
+            cn: [
+              { 大区分: '料金/プラン', 中区分: 'テスト9', 小区分json: [], 制作意図: '' },
+              { 大区分: '成功事例/ユーザーボイス紹介', 中区分: 'テスト10', 小区分json: [], 制作意図: '' },
+              { 大区分: 'ご利用の流れ/ステップ', 中区分: 'テスト11', 小区分json: [], 制作意図: '' },
+              { 大区分: '競合比較', 中区分: 'テスト12', 小区分json: [], 制作意図: '' },
+            ],
+          },
+        },
+        改善戦略: {
+          ニーズ4: {
+            cn: [
+              { 大区分: 'スタッフ・メンバー紹介', 中区分: 'テスト13', 小区分json: [], 制作意図: '' },
+              { 大区分: '権威訴求', 中区分: 'テスト14', 小区分json: [], 制作意図: '' },
+              { 大区分: '店舗情報', 中区分: 'テスト15', 小区分json: [], 制作意図: '' },
+              { 大区分: '活用シーン', 中区分: 'テスト16', 小区分json: [], 制作意図: '' },
+              { 大区分: 'FAQ/よくある質問', 中区分: 'テスト17', 小区分json: [], 制作意図: '' },
+            ],
+          },
+          ニーズ5: {
+            cn: [
+              { 大区分: 'News/更新情報', 中区分: 'テスト18', 小区分json: [], 制作意図: '' },
+              { 大区分: '商品/サービスの特徴', 中区分: 'テスト19', 小区分json: [], 制作意図: '' },
+              { 大区分: '商品/サービスの詳細情報', 中区分: 'テスト20', 小区分json: [], 制作意図: '' },
+              { 大区分: 'メディア掲載情報', 中区分: 'テスト21', 小区分json: [], 制作意図: '' },
+              { 大区分: '問題提起/共感', 中区分: 'テスト22', 小区分json: [], 制作意図: '' },
+            ],
+          },
+          ニーズ6: {
+            cn: [
+              { 大区分: 'シミュレーション', 中区分: 'テスト23', 小区分json: [], 制作意図: '' },
+              { 大区分: '解決策/ベネフィット提示', 中区分: 'テスト24', 小区分json: [], 制作意図: '' },
+              { 大区分: 'SPオファー/限定特典', 中区分: 'テスト25', 小区分json: [], 制作意図: '' },
+              { 大区分: '料金/プラン', 中区分: 'テスト26', 小区分json: [], 制作意図: '' },
+              { 大区分: '成功事例/ユーザーボイス紹介', 中区分: 'テスト27', 小区分json: [], 制作意図: '' },
+            ],
+          },
+        },
+        差別化戦略: {
+          ニーズ7: {
+            cn: [
+              { 大区分: 'ご利用の流れ/ステップ', 中区分: 'テスト28', 小区分json: [], 制作意図: '' },
+              { 大区分: '競合比較', 中区分: 'テスト29', 小区分json: [], 制作意図: '' },
+              { 大区分: 'スタッフ・メンバー紹介', 中区分: 'テスト30', 小区分json: [], 制作意図: '' },
+              { 大区分: '権威訴求', 中区分: 'テスト31', 小区分json: [], 制作意図: '' },
+              { 大区分: '店舗情報', 中区分: 'テスト32', 小区分json: [], 制作意図: '' },
+              { 大区分: '活用シーン', 中区分: 'テスト33', 小区分json: [], 制作意図: '' },
+            ],
+          },
+          ニーズ8: {
+            cn: [
+              { 大区分: 'FAQ/よくある質問', 中区分: 'テスト34', 小区分json: [], 制作意図: '' },
+              { 大区分: 'News/更新情報', 中区分: 'テスト35', 小区分json: [], 制作意図: '' },
+              { 大区分: '商品/サービスの特徴', 中区分: 'テスト36', 小区分json: [], 制作意図: '' },
+              { 大区分: '商品/サービスの詳細情報', 中区分: 'テスト37', 小区分json: [], 制作意図: '' },
+              { 大区分: 'メディア掲載情報', 中区分: 'テスト38', 小区分json: [], 制作意図: '' },
+              { 大区分: '問題提起/共感', 中区分: 'テスト39', 小区分json: [], 制作意図: '' },
+            ],
+          },
+          ニーズ9: {
+            cn: [
+              { 大区分: 'シミュレーション', 中区分: 'テスト40', 小区分json: [], 制作意図: '' },
+              { 大区分: '解決策/ベネフィット提示', 中区分: 'テスト41', 小区分json: [], 制作意図: '' },
+              { 大区分: 'SPオファー/限定特典', 中区分: 'テスト42', 小区分json: [], 制作意図: '' },
+              { 大区分: '料金/プラン', 中区分: 'テスト43', 小区分json: [], 制作意図: '' },
+              { 大区分: '成功事例/ユーザーボイス紹介', 中区分: 'テスト44', 小区分json: [], 制作意図: '' },
+              { 大区分: 'ご利用の流れ/ステップ', 中区分: 'テスト45', 小区分json: [], 制作意図: '' },
+            ],
+          },
+        },
+      };
+
+      const result = translator.translateCnDataToTabs(testData);
+
+      // 9つのタブが生成されること
+      expect(Object.keys(result)).toHaveLength(9);
+      expect(Object.keys(result)).toEqual(['A案', 'B案', 'C案', 'D案', 'E案', 'F案', 'G案', 'H案', 'I案']);
+
+      // 各タブのセクション数を確認
+      expect(result['A案']).toHaveLength(4); // 積極化戦略・ニーズ1
+      expect(result['B案']).toHaveLength(4); // 積極化戦略・ニーズ2
+      expect(result['C案']).toHaveLength(4); // 積極化戦略・ニーズ3
+      expect(result['D案']).toHaveLength(5); // 改善戦略・ニーズ4
+      expect(result['E案']).toHaveLength(5); // 改善戦略・ニーズ5
+      expect(result['F案']).toHaveLength(5); // 改善戦略・ニーズ6
+      expect(result['G案']).toHaveLength(6); // 差別化戦略・ニーズ7
+      expect(result['H案']).toHaveLength(6); // 差別化戦略・ニーズ8
+      expect(result['I案']).toHaveLength(6); // 差別化戦略・ニーズ9
+
+      // 合計セクション数の確認
+      const totalSections = Object.values(result).reduce((sum, sections) => sum + sections.length, 0);
+      expect(totalSections).toBe(45); // 4+4+4+5+5+5+6+6+6 = 45
+    });
+
+    it('10セクション以上のデータが正しく処理される', () => {
+      const testData: ProposalCnGradioResponse = {
+        積極化戦略: {
+          大量セクションのニーズ: {
+            cn: Array.from({ length: 10 }, (_, i) => ({
+              大区分: 'News/更新情報' as ContentSection['大区分'],
+              中区分: `セクション${i + 1}の内容`,
+              小区分json: [],
+              制作意図: '',
+            })),
+          },
+        },
+        改善戦略: {},
+        差別化戦略: {},
+      };
+
+      const result = translator.translateCnDataToTabs(testData);
+
+      // A案に10セクション全てが含まれること
+      expect(result['A案']).toHaveLength(10);
+
+      // 各セクションの内容が正しいこと
+      result['A案'].forEach((section, index) => {
+        expect(section.大区分).toBe('News/更新情報');
+        expect(section.中区分).toBe(`セクション${index + 1}の内容`);
+      });
+    });
+
+    it('小区分jsonのフィールド変換が正しく行われる', () => {
+      const testData: ProposalCnGradioResponse = {
+        積極化戦略: {
+          テストニーズ: {
+            cn: [
+              {
+                大区分: 'News/更新情報',
+                中区分: '最新ニュース',
+                小区分json: [
+                  {
+                    見出し: {
+                      value: 'タイトル1',
+                      情報源: { 他社: '', 自社: '' }
+                    },
+                    内容: {
+                      value: 'コンテンツ1',
+                      情報源: { 他社: '', 自社: '' }
+                    },
+                    注釈: {
+                      value: '注釈1',
+                      情報源: { 他社: '', 自社: '' }
+                    },
+                    ユーザー情報: {
+                      value: 'ユーザー1',
+                      情報源: { 他社: '', 自社: '' }
+                    },
+                  },
+                ],
+                制作意図: 'テスト意図',
+              },
+            ],
+          },
+        },
+        改善戦略: {},
+        差別化戦略: {},
+      };
+
+      const result = translator.translateCnDataToTabs(testData);
+
+      const section = result['A案'][0];
+      expect(section.小区分json[0]).toEqual({
+        見出し: {
+          value: 'タイトル1',
+          情報源: { 他社: '', 自社: '' }
+        },
+        内容: {
+          value: 'コンテンツ1',
+          情報源: { 他社: '', 自社: '' }
+        },
+        注釈: {
+          value: '注釈1',
+          情報源: { 他社: '', 自社: '' }
+        },
+        ユーザー情報: {
+          value: 'ユーザー1',
+          情報源: { 他社: '', 自社: '' }
+        },
+      });
+    });
+
+    it('cnフィールドが存在しない場合、空配列を返す', () => {
+      const testData: ProposalCnGradioResponse = {
+        積極化戦略: {
+          cnなしニーズ: {} as any,
+        },
+        改善戦略: {},
+        差別化戦略: {},
+      };
+
+      const result = translator.translateCnDataToTabs(testData);
+      expect(result['A案']).toEqual([]);
+    });
+
+    it('空の戦略データでもエラーにならない', () => {
+      const testData: ProposalCnGradioResponse = {
+        積極化戦略: {},
+        改善戦略: {},
+        差別化戦略: {},
+      };
+
+      expect(() => translator.translateCnDataToTabs(testData)).not.toThrow();
+      const result = translator.translateCnDataToTabs(testData);
+      expect(Object.keys(result)).toHaveLength(0);
+    });
+
+    it('15セクションのデータが切り捨てられずに処理される', () => {
+      const testData: ProposalCnGradioResponse = {
+        積極化戦略: {
+          超大量セクション: {
+            cn: Array.from({ length: 15 }, (_, i) => ({
+              大区分: 'News/更新情報' as ContentSection['大区分'],
+              中区分: `中区分${i + 1}`,
+              小区分json: [
+                {
+                  見出し: {
+                    value: `見出し${i + 1}`,
+                    情報源: { 他社: '', 自社: '' }
+                  },
+                  内容: {
+                    value: `内容${i + 1}`,
+                    情報源: { 他社: '', 自社: '' }
+                  },
+                },
+              ],
+              制作意図: `意図${i + 1}`,
+            })),
+          },
+        },
+        改善戦略: {},
+        差別化戦略: {},
+      };
+
+      const result = translator.translateCnDataToTabs(testData);
+
+      // 15セクション全てが含まれることを確認
+      expect(result['A案']).toHaveLength(15);
+
+      // 最初と最後のセクションの内容を確認
+      expect(result['A案'][0].大区分).toBe('News/更新情報');
+      expect(result['A案'][14].大区分).toBe('News/更新情報');
+
+      // 全セクションが順番通りに存在することを確認
+      result['A案'].forEach((section, index) => {
+        expect(section.大区分).toBe('News/更新情報');
+        expect(section.中区分).toBe(`中区分${index + 1}`);
+        expect(section.制作意図).toBe(`意図${index + 1}`);
+      });
+    });
+  });
+
+  describe('translateToTabsData', () => {
+    it('すべてのタブにprediction/intentデータが正しくマッピングされる', () => {
+      // ダミーデータと同じ構造のテストデータ
+      const proposalFvData: ProposalFvGradioResponse = {
+        積極化戦略: {
+          'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '積極化AI1' } },
+          },
+          'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '積極化デジタル2' } },
+          },
+          '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '積極化顧客3' } },
+          },
+        },
+        改善戦略: {
+          'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '改善AI4' } },
+          },
+          'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '改善デジタル5' } },
+          },
+          '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '改善顧客6' } },
+          },
+        },
+        差別化戦略: {
+          'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '差別化AI7' } },
+          },
+          'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '差別化デジタル8' } },
+          },
+          '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+            fv: { コピー: { メインコピー: '差別化顧客9' } },
+          },
+        },
+      };
+
+      const proposalCnData: ProposalCnGradioResponse = {
+        積極化戦略: {
+          'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた瞬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN1', 小区分json: [], 制作意図: '' }],
+          },
+          'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた瞬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN2', 小区分json: [], 制作意図: '' }],
+          },
+          '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN3', 小区分json: [], 制作意図: '' }],
+          },
+        },
+        改善戦略: {
+          'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた矬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN4', 小区分json: [], 制作意図: '' }],
+          },
+          'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた矬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN5', 小区分json: [], 制作意図: '' }],
+          },
+          '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN6', 小区分json: [], 制作意図: '' }],
+          },
+        },
+        差別化戦略: {
+          'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた矬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN7', 小区分json: [], 制作意図: '' }],
+          },
+          'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた矬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN8', 小区分json: [], 制作意図: '' }],
+          },
+          '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+            cn: [{ 大区分: 'News/更新情報', 中区分: 'CN9', 小区分json: [], 制作意図: '' }],
+          },
+        },
+      };
+
+      const proposalIntentData: ProposalIntentGradioResponse = [
+        {
+          積極化戦略: {
+            'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた瞬間)': {
+              intent_all: { FV_intent: 'FV1', CN_intent: 'CN1' },
+            },
+            'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた瞬間)': {
+              intent_all: { FV_intent: 'FV2', CN_intent: 'CN2' },
+            },
+            '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+              intent_all: { FV_intent: 'FV3', CN_intent: 'CN3' },
+            },
+          },
+          改善戦略: {
+            'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた矬間)': {
+              intent_all: { FV_intent: 'FV4', CN_intent: 'CN4' },
+            },
+            'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた瞬間)': {
+              intent_all: { FV_intent: 'FV5', CN_intent: 'CN5' },
+            },
+            '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+              intent_all: { FV_intent: 'FV6', CN_intent: 'CN6' },
+            },
+          },
+          差別化戦略: {
+            'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた矬間)': {
+              intent_all: { FV_intent: 'FV7', CN_intent: 'CN7' },
+            },
+            'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた矬間)': {
+              intent_all: { FV_intent: 'FV8', CN_intent: 'CN8' },
+            },
+            '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+              intent_all: { FV_intent: 'FV9', CN_intent: 'CN9' },
+            },
+          },
+        },
+      ];
+
+      const proposalPredictionData: ProposalPredictionGradioResponse = [
+        {
+          積極化戦略: {
+            'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた瞬間)': {
+              prediction: 3,
+            },
+            'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた瞬間)': {
+              prediction: 2,
+            },
+            '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた矬間)': {
+              prediction: 0,
+            },
+          },
+          改善戦略: {
+            'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた矬間)': {
+              prediction: 2,
+            },
+            'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた矬間)': {
+              prediction: 3,
+            },
+            '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた瞬間)': {
+              prediction: 3,
+            },
+          },
+          差別化戦略: {
+            'AIによる成長支援を求めるニーズの高まり(AIを活用したマーケティング戦略を見直したいと感じた矬間)': {
+              prediction: 1,
+            },
+            'デジタル革新を追求するニーズの高まり(最新のデジタル技術を導入したいと感じた矬間)': {
+              prediction: 1,
+            },
+            '顧客体験の変革を求めるニーズの高まり(顧客満足度を向上させたいと感じた矬間)': {
+              prediction: 0,
+            },
+          },
+        },
+      ];
+
+      const result = ProposalTranslator.translateToTabsData(
+        proposalFvData,
+        proposalCnData,
+        proposalIntentData,
+        proposalPredictionData,
+        undefined,
+      );
+
+      // resultがnullでないことを確認
+      expect(result).not.toBeNull();
+
+      // 9つのタブが生成されること
+      expect(Object.keys(result!)).toHaveLength(9);
+      expect(Object.keys(result!)).toEqual(['A案', 'B案', 'C案', 'D案', 'E案', 'F案', 'G案', 'H案', 'I案']);
+
+      // すべてのタブにpredictionとintentデータが存在することを確認
+      Object.entries(result!).forEach(([tabName, tabData]) => {
+        // intentデータが存在
+        expect(tabData.intent).toBeDefined();
+        expect(tabData.intent?.prediction).toBeDefined();
+        expect(typeof tabData.intent?.prediction).toBe('number');
+        expect(tabData.intent?.FV_intent).toBeDefined();
+        expect(tabData.intent?.CN_intent).toBeDefined();
+
+        // FVデータが存在
+        expect(tabData.fv).toBeDefined();
+        expect(tabData.fv?.data?.fv?.['コピー']?.['メインコピー']).toBeDefined();
+
+        // CNデータが存在
+        expect(tabData.cn).toBeDefined();
+        expect(tabData.cn!.length).toBeGreaterThan(0);
+      });
+
+      // prediction値によるソートが正しく行われていること
+      // prediction値が高い順: 積極化AI(3) > 改善デジタル(3) > 改善顧客(3) > 積極化デジタル(2) > 改善AI(2) > 差別化AI(1) > 差別化デジタル(1) > 積極化顧客(0) > 差別化顧客(0)
+      expect(result!['A案'].intent?.prediction).toBe(3);
+      expect(result!['A案'].fv?.data?.fv?.['コピー']?.['メインコピー']).toContain('積極化AI');
+
+      // H案、I案にもデータが存在することを特に確認
+      expect(result!['H案'].intent?.prediction).toBeDefined();
+      expect(result!['H案'].intent?.FV_intent).toBeDefined();
+      expect(result!['H案'].intent?.CN_intent).toBeDefined();
+      expect(result!['H案'].fv).toBeDefined();
+      expect(result!['H案'].cn).toBeDefined();
+
+      expect(result!['I案'].intent?.prediction).toBeDefined();
+      expect(result!['I案'].intent?.FV_intent).toBeDefined();
+      expect(result!['I案'].intent?.CN_intent).toBeDefined();
+      expect(result!['I案'].fv).toBeDefined();
+      expect(result!['I案'].cn).toBeDefined();
+    });
+  });
+});

api-client/proposal/proposal/translator.ts

@@ -0,0 +1,372 @@
+import type { ProposalCnGradioResponse } from '@/schema/gradio-proxy/proposal-cn';
+import type { ProposalFvGradioResponse } from '@/schema/gradio-proxy/proposal-fv';
+import type { ProposalIntentGradioResponse } from '@/schema/gradio-proxy/proposal-intent';
+import type { ProposalPredictionGradioResponse } from '@/schema/gradio-proxy/proposal-prediction';
+import type { ThemeByMomentStrategy } from '@/schema/gradio-proxy/theme-by-moment';
+import type { ContentSection, FvData, ProposalTabData, ProposalTabsResponse } from '@/schema/proposal';
+import { findWithNormalizedKey } from '@/utils/normalize-strategy-keys';
+
+export const ProposalTranslator = {
+  /**
+   * FVデータをタブ形式に変換
+   * 戦略とニーズをキーとして格納
+   */
+  translateFvDataToTabs(data: ProposalFvGradioResponse): Record<string, FvData> {
+    const result: Record<string, FvData> = {};
+
+    // データを変換（戦略とニーズをキーとして格納）
+    Object.entries(data).forEach(([strategy]) => {
+      const strategyData = data[strategy as keyof ProposalFvGradioResponse];
+
+      if (strategyData) {
+        Object.entries(strategyData).forEach(([need, needData]) => {
+          const key = `${strategy}_${need}`;
+          result[key] = {
+            strategy,
+            need,
+            data: {
+              fv: needData.fv,
+            },
+          };
+        });
+      }
+    });
+
+    return result;
+  },
+
+  /**
+   * CNデータをタブ形式に変換
+   * 戦略とニーズをキーとして格納
+   */
+  translateCnDataToTabs(data: ProposalCnGradioResponse): Record<string, ContentSection[]> {
+    const result: Record<string, ContentSection[]> = {};
+
+    // 戦略→ニーズ→cn の階層構造でデータを処理
+    const strategies = ['積極化戦略', '改善戦略', '差別化戦略'];
+
+    strategies.forEach((strategy) => {
+      if (data[strategy as keyof ProposalCnGradioResponse]) {
+        const strategyData = data[strategy as keyof ProposalCnGradioResponse];
+
+        if (strategyData && typeof strategyData === 'object') {
+          Object.entries(strategyData).forEach(([need, needData]) => {
+            const key = `${strategy}_${need}`;
+
+            // cnフィールドから配列を取得
+            if (needData && typeof needData === 'object' && 'cn' in needData) {
+              const cnData = (needData as any).cn;
+              if (Array.isArray(cnData)) {
+                result[key] = cnData.map((section: any) => {
+                  const convertedSection: any = {
+                    大区分: section.大区分 as any,
+                    中区分: section.中区分,
+                    小区分json: [],
+                    制作意図: section.制作意図 || '',
+                  };
+
+                  if (Array.isArray(section.小区分json)) {
+                    convertedSection.小区分json = section.小区分json.map((item: any) => {
+                      // 各フィールドを統一形式（オブジェクト形式）に変換
+                      const convertedItem: any = {};
+
+                      // 見出しの変換
+                      if (item.見出し !== undefined) {
+                        if (typeof item.見出し === 'string') {
+                          convertedItem.見出し = { value: item.見出し };
+                        } else if (item.見出し && typeof item.見出し === 'object' && 'value' in item.見出し) {
+                          convertedItem.見出し = item.見出し;
+                        } else {
+                          convertedItem.見出し = { value: '' };
+                        }
+                      } else {
+                        convertedItem.見出し = { value: '' };
+                      }
+
+                      // 内容の変換
+                      if (item.内容 !== undefined) {
+                        if (typeof item.内容 === 'string') {
+                          convertedItem.内容 = { value: item.内容 };
+                        } else if (item.内容 && typeof item.内容 === 'object' && 'value' in item.内容) {
+                          convertedItem.内容 = item.内容;
+                        } else {
+                          convertedItem.内容 = { value: '' };
+                        }
+                      } else {
+                        convertedItem.内容 = { value: '' };
+                      }
+
+                      // 注釈の変換（オプショナル）
+                      if (item.注釈 !== undefined && item.注釈 !== null) {
+                        if (typeof item.注釈 === 'string') {
+                          convertedItem.注釈 = { value: item.注釈 };
+                        } else if (item.注釈 && typeof item.注釈 === 'object' && 'value' in item.注釈) {
+                          convertedItem.注釈 = item.注釈;
+                        }
+                      }
+
+                      // ユーザー情報の変換（オプショナル）
+                      if (item.ユーザー情報 !== undefined && item.ユーザー情報 !== null) {
+                        if (typeof item.ユーザー情報 === 'string') {
+                          convertedItem.ユーザー情報 = { value: item.ユーザー情報 };
+                        } else if (item.ユーザー情報 && typeof item.ユーザー情報 === 'object' && 'value' in item.ユーザー情報) {
+                          convertedItem.ユーザー情報 = item.ユーザー情報;
+                        }
+                      }
+
+                      // その他のフィールドをそのまま保持
+                      Object.keys(item).forEach((key) => {
+                        if (!['見出し', '内容', '注釈', 'ユーザー情報'].includes(key)) {
+                          convertedItem[key] = item[key];
+                        }
+                      });
+
+                      return convertedItem;
+                    });
+                  }
+
+                  return convertedSection;
+                });
+              } else {
+                console.warn(`CNデータのcnフィールドが配列ではありません: ${strategy}/${need}`, cnData);
+                result[key] = [];
+              }
+            } else {
+              console.warn(`CNデータにcnフィールドがありません: ${strategy}/${need}`, needData);
+              result[key] = [];
+            }
+          });
+        }
+      }
+    });
+
+    return result;
+  },
+
+  /**
+   * 全てのProposalデータをタブ形式に統合変換
+   */
+  translateToTabsData(
+    proposalFvData: ProposalFvGradioResponse,
+    proposalCnData: ProposalCnGradioResponse,
+    proposalIntentData: ProposalIntentGradioResponse,
+    proposalPredictionData: ProposalPredictionGradioResponse,
+    strategyXMoment: ThemeByMomentStrategy | undefined,
+  ): ProposalTabsResponse | null {
+    // 本番環境でも確実にログを出力（console.warnを使用）
+    console.warn('[translateToTabsData] START - Processing proposal data');
+    console.warn('[translateToTabsData] FV data strategies:', Object.keys(proposalFvData || {}));
+
+    // APIデータの完全性チェック（配列の場合も考慮）
+    const checkValidData = (data: ProposalIntentGradioResponse | ProposalPredictionGradioResponse): boolean => {
+      if (!data) return false;
+      if (Array.isArray(data)) {
+        return data.length > 0 && data[0] && Object.keys(data[0]).length > 0;
+      }
+      return Object.keys(data).length > 0;
+    };
+
+    const hasValidPrediction = checkValidData(proposalPredictionData);
+    const hasValidIntent = checkValidData(proposalIntentData);
+
+    if (!hasValidPrediction || !hasValidIntent) {
+      console.error('[translateToTabsData] 必須データが不完全です:', {
+        hasValidPrediction,
+        hasValidIntent,
+        predictionData: proposalPredictionData,
+        intentData: proposalIntentData,
+      });
+      return null;
+    }
+
+    // 戦略表示名のマッピング
+    const strategyDisplayMap: Record<string, string> = {
+      積極化戦略: '積極化戦略（強み×機会）',
+      改善戦略: '改善戦略（弱み×機会）',
+      差別化戦略: '差別化戦略（強み×脅威）',
+    };
+
+    // 戦略の順序定義（第2ソート用）
+    const strategyOrder: Record<string, number> = {
+      積極化戦略: 1,
+      改善戦略: 2,
+      差別化戦略: 3,
+    };
+
+    // 戦略別のデータを処理
+    const fvTabs = this.translateFvDataToTabs(proposalFvData);
+    const cnTabs = this.translateCnDataToTabs(proposalCnData);
+
+    // 一時的にデータを収集（ソート前）
+    interface TempTabData {
+      strategy: string;
+      need: string;
+      strategyOrder: number;
+      prediction: number;
+      tabData: ProposalTabData;
+    }
+    const tempTabsData: TempTabData[] = [];
+
+    Object.entries(proposalFvData).forEach(([strategy]) => {
+      const strategyFvData = proposalFvData[strategy as keyof typeof proposalFvData];
+
+      if (strategyFvData) {
+        Object.entries(strategyFvData).forEach(([need]) => {
+          // 戦略とニーズをキーとして使用
+          const dataKey = `${strategy}_${need}`;
+
+          // FVデータの取得（正規化したキーで検索）
+          const fvData: FvData = findWithNormalizedKey(fvTabs, dataKey) || {
+            strategy,
+            need,
+            data: {
+              fv: strategyFvData[need]?.fv || {},
+            },
+          };
+
+          // CNデータの取得（正規化したキーで検索）
+          let cnData: ContentSection[] = findWithNormalizedKey(cnTabs, dataKey) || [];
+
+          // 戦略タイプの表示名を設定
+          const strategyDisplayName = strategyDisplayMap[strategy] || strategy;
+
+          // Intentデータの抽出と展開
+          let intentData: ProposalTabData['intent'] = {
+            strategy: strategyDisplayName,
+            direction: need, // ニーズを方向性として���定
+          };
+
+          // strategyXMomentから該当する戦略とモーメントのデータを抽出
+
+          if (strategyXMoment && strategyXMoment[strategy]) {
+            const momentItem = findWithNormalizedKey(strategyXMoment[strategy], need);
+            if (momentItem) {
+              intentData.strategyXMomentItem = momentItem;
+            }
+          }
+
+          // proposalIntentDataから該当する戦略・ニーズのデータを抽出
+          const intentArray = Array.isArray(proposalIntentData) ? proposalIntentData : [proposalIntentData];
+          if (intentArray && intentArray[0]) {
+            const intentItem = intentArray[0];
+            const strategyIntent = intentItem[strategy as keyof typeof intentItem];
+
+            // 正規化したキーで検索を試みる
+            const needIntent = findWithNormalizedKey(strategyIntent, need);
+
+            if (needIntent) {
+              if (needIntent.intent_all) {
+                intentData = {
+                  ...intentData,
+                  FV_intent: needIntent.intent_all.FV_intent,
+                  CN_intent: needIntent.intent_all.CN_intent,
+                  FV_suggest: needIntent.intent_all.FV_suggest,
+                  CN_suggest: needIntent.intent_all.CN_suggest,
+                };
+              }
+              if (needIntent.cn_creation_intent) {
+                intentData.cn_creation_intent = needIntent.cn_creation_intent;
+                // cn_creation_intentから各セクションの制作意図を設定
+                cnData = cnData.map((section) => ({
+                  ...section,
+                  制作意図: needIntent.cn_creation_intent[section.大区分] || '',
+                }));
+              }
+              if (needIntent.fv_creation_intent) {
+                fvData.fvCreationIntent = needIntent.fv_creation_intent;
+              }
+            }
+          }
+
+          // proposalPredictionDataから該当する戦略・ニーズのデータを抽出
+          let predictionValue = 0; // デフォルト値
+          const predictionArray = Array.isArray(proposalPredictionData) ? proposalPredictionData : [proposalPredictionData];
+
+          if (predictionArray && predictionArray[0]) {
+            const predictionItem = predictionArray[0];
+            const strategyPrediction = predictionItem[strategy as keyof typeof predictionItem];
+
+            // 正規化したキーで検索
+            const needPrediction = findWithNormalizedKey(strategyPrediction, need);
+
+            if (needPrediction) {
+              if (needPrediction.prediction !== undefined) {
+                intentData.prediction = needPrediction.prediction;
+                predictionValue = needPrediction.prediction;
+              } else {
+              }
+            } else {
+              // 本番環境でも確実に出力するためにconsole.warnも使用
+              console.warn(`[translateToTabsData] WARNING: No prediction found for ${dataKey}`, {
+                need,
+                availableNeeds: strategyPrediction ? Object.keys(strategyPrediction) : [],
+                strategyPrediction,
+              });
+            }
+          } else {
+            console.warn(`[translateToTabsData] WARNING: No prediction data available for ${dataKey}`);
+          }
+
+          // タブデータの作成
+          const tabData: ProposalTabData = {
+            intent: intentData,
+            fv: fvData,
+            cn: cnData,
+          };
+
+          // 一時データに追加
+          tempTabsData.push({
+            strategy,
+            need,
+            strategyOrder: strategyOrder[strategy] || 999,
+            prediction: predictionValue,
+            tabData,
+          });
+        });
+      }
+    });
+
+    // prediction値でソート（第1ソート: 降順）、同じ値の場合は戦略順（第2ソート）
+    tempTabsData.sort((a, b) => {
+      // 第1ソート: prediction値の降順
+      if (b.prediction !== a.prediction) {
+        return b.prediction - a.prediction;
+      }
+      // 第2ソート: 戦略の順序
+      return a.strategyOrder - b.strategyOrder;
+    });
+
+    // ソート後にA案〜I案を再割り当て
+    const result: ProposalTabsResponse = {};
+    const proposalLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
+
+    tempTabsData.forEach((item, index) => {
+      if (index < proposalLetters.length) {
+        const proposalKey = `${proposalLetters[index]}案`;
+        result[proposalKey] = item.tabData;
+        // 本番環境でも出力されるようにconsole.warnも使用
+        console.warn(`[translateToTabsData] Assigned ${proposalKey} to ${item.strategy}/${item.need} with prediction: ${item.prediction}`);
+      }
+    });
+
+    // デバッグ: 最終結果の確認（本番環境用にconsole.warnも追加）
+    console.warn('[translateToTabsData] Final result keys:', Object.keys(result));
+
+    Object.entries(result).forEach(([key, data]) => {
+      const summary = {
+        hasIntentData: !!data.intent,
+        hasFvData: !!data.fv,
+        hasCnData: !!data.cn,
+        strategy: data.intent?.strategy,
+        direction: data.intent?.direction,
+        fvメインコピー: data.fv?.data?.fv?.コピー?.メインコピー?.substring(0, 30),
+      };
+
+      // 本番環境でも確実に出力
+      console.warn(`[translateToTabsData] Final ${key}:`, summary);
+    });
+
+    console.warn('[translateToTabsData] END - Processing completed');
+    return result;
+  },
+};

api-client/proposal/queries.ts

@@ -0,0 +1,7 @@
+// Re-export all hooks from subdirectories
+export { generateContentsHtml, generateFvHtml, getImageGenerationStatus, startImageGeneration } from './html-preview/index';
+export { useContentsHtmlGeneration, useContentsImageGeneration, useFvHtmlGeneration } from './html-preview/queries';
+export { useProposalTabsOptimized } from './proposal/optimized-queries';
+export { useThemeByMoment } from './proposal/queries';
+export { ProposalTranslator } from './proposal/translator';
+export { useBatchScreenshots, useScreenshot } from './screenshot/queries';

api-client/proposal/screenshot/queries.ts

@@ -0,0 +1,99 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { useQuery } from '@tanstack/react-query';
+
+// バッチスクリーンショット取得用のフック
+export function useBatchScreenshots(urls: Record<string, string>, enabled: boolean = false, dummyMode: boolean = false) {
+  return useQuery<Record<string, string>>({
+    ...createQueryOptions<Record<string, string>>(),
+    queryKey: ['batchScreenshots', urls, dummyMode],
+    queryFn: async () => {
+      // ダミーモードの場合はプレースホルダー画像を返す
+      if (dummyMode) {
+        console.log('[useBatchScreenshots] Dummy mode enabled, returning placeholder images');
+        const placeholderImage =
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
+        const screenshots: Record<string, string> = {};
+        Object.keys(urls).forEach((key) => {
+          screenshots[key] = placeholderImage;
+        });
+        return screenshots;
+      }
+
+      const response = await fetch('/api/rpc/screenshot/batch-screenshot', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          urls: Object.entries(urls).map(([key, url]) => ({
+            key,
+            url,
+          })),
+          dummyMode,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch screenshots');
+      }
+
+      const data = await response.json();
+      console.log('[useBatchScreenshots] Response data:', data);
+
+      const screenshots: Record<string, string> = {};
+
+      Object.entries(data.screenshots || {}).forEach(([key, value]: [string, any]) => {
+        // imageBase64フィールドを使用（サーバーはこのフィールドで返している）
+        screenshots[key] = value.imageBase64 || value.screenshotBase64;
+      });
+
+      console.log('[useBatchScreenshots] Processed screenshots:', {
+        keys: Object.keys(screenshots),
+        hasA案: !!screenshots['A案'],
+      });
+
+      return screenshots;
+    },
+    enabled,
+  });
+}
+
+// 単一スクリーンショット取得用のフック
+export function useScreenshot(url: string, enabled: boolean = false, dummyMode: boolean = false) {
+  return useQuery<string>({
+    ...createQueryOptions<string>(),
+    queryKey: ['screenshot', url, dummyMode],
+    queryFn: async () => {
+      // ダミーモードの場合はプレースホルダー画像を返す
+      if (dummyMode) {
+        console.log('[useScreenshot] Dummy mode enabled, returning placeholder image');
+        return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
+      }
+
+      const params = new URLSearchParams({
+        url: url,
+        width: '512',
+        height: '768',
+        dummyMode: dummyMode.toString(),
+      });
+
+      const response = await fetch(`/api/rpc/screenshot?${params.toString()}`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch screenshot');
+      }
+
+      const data = await response.json();
+
+      // imageBase64が既にdata URLの場合はそのまま返す
+      if (data.imageBase64 && data.imageBase64.startsWith('data:')) {
+        return data.imageBase64;
+      }
+
+      // そうでない場合はdata:プレフィックスを追加
+      return `data:${data.mimeType || 'image/jpeg'};base64,${data.imageBase64}`;
+    },
+    enabled,
+  });
+}

api-client/query-config.ts

@@ -0,0 +1,33 @@
+import type { UseQueryOptions } from '@tanstack/react-query';
+
+/**
+ * React Query共通設定
+ * 全APIクライアントで使用する共通のクエリオプション
+ */
+export const defaultQueryOptions: Partial<UseQueryOptions> = {
+  // ウィンドウフォーカス時の再フェッチを無効化
+  refetchOnWindowFocus: false,
+
+  // コンポーネント再マウント時の再フェッチを無効化
+  refetchOnMount: false,
+
+  // データが古くならない期間（無期限）
+  staleTime: Infinity,
+
+  // ガベージコレクション時間（24時間）
+  gcTime: 24 * 60 * 60 * 1000,
+
+  retry: 0,
+
+  // エラー時のリトライ遅延
+  retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+};
+
+/**
+ * 特定のクエリ用のオプションを作成するヘルパー関数
+ * @param overrides 上書きしたいオプション
+ * @returns マージされたクエリオプション
+ */
+export function createQueryOptions<T = unknown>(overrides?: Partial<UseQueryOptions<T>>): Partial<UseQueryOptions<T>> {
+  return { ...defaultQueryOptions, ...overrides } as Partial<UseQueryOptions<T>>;
+}

api-client/refresh-moments/queries.ts

@@ -0,0 +1,91 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import { rpcClient } from '@/api-client/utils/rpc-client';
+import { useGlobalStore } from '@/store/global';
+import { generateSelectionHash } from '@/store/proposal-trigger';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+// RefreshMoment用のパラメータ型定義
+interface UseRefreshMomentParams {
+  commonDict?: Record<string, unknown> | object | null;
+  scoreDict?: Record<string, unknown> | object | null;
+  swot?: Record<string, unknown> | object | null;
+  userEmail?: string;
+}
+
+// 変換後のデータ型
+export interface RefreshMomentResult {
+  moments: Array<{ text: string; value: boolean }>;
+  ownTheme: string;
+}
+
+/**
+ * RefreshMoment（改善案の方向性）を取得するフック
+ * AIが生成する追加の方向性選択肢とownThemeを取得
+ */
+export function useRefreshMoment(params: UseRefreshMomentParams) {
+  const { commonDict, scoreDict, swot, userEmail } = params;
+  const { userIdentifier } = useGlobalStore();
+
+  // オブジェクトをハッシュ化して安定したキーを生成
+  const queryKeyHash = useMemo(() => {
+    return generateSelectionHash({
+      commonDict,
+      scoreDict,
+      swot,
+      userEmail,
+    });
+  }, [commonDict, scoreDict, swot, userEmail]);
+
+  return useQuery({
+    queryKey: ['refreshMoment', queryKeyHash],
+    ...createQueryOptions<[string, string]>({
+      queryFn: async () => {
+        if (!commonDict || !scoreDict || !swot) {
+          throw new Error('Required parameters are missing');
+        }
+
+        const response = await rpcClient['gradio-proxy']['refresh-moment'].$post({
+          json: {
+            commonDict: commonDict as Record<string, unknown>,
+            scoreDict: scoreDict as Record<string, unknown>,
+            swot: swot as Record<string, unknown>,
+            dummyMode: false,
+            userEmail: userEmail ?? undefined,
+            userIdentifier,
+          },
+        });
+
+        if (!response.ok) {
+          console.error('[useRefreshMoment] Response status:', response.status);
+          const errorData = (await response.json()) as { message?: string; status?: string };
+          console.error('[useRefreshMoment] API エラー:', errorData);
+          throw new Error(errorData.message || 'refresh_moment APIの呼び出しに失敗しました');
+        }
+
+        const data = await response.json();
+        return data as [string, string];
+      },
+      enabled: !!commonDict && !!scoreDict && !!swot,
+    }),
+    select: (data): RefreshMomentResult => {
+      // データを整形してから返す
+      const responseArray = data as unknown as [string, string] | undefined;
+      const moments =
+        responseArray?.[0]
+          ?.split('\n')
+          .map((moment: string) => ({
+            text: moment.trim(),
+            value: false,
+          }))
+          .filter((m: { text: string }) => m.text) || [];
+
+      const ownTheme = responseArray?.[1] || '';
+
+      return {
+        moments,
+        ownTheme,
+      };
+    },
+  });
+}

api-client/screenshot.ts

@@ -0,0 +1,60 @@
+import type { ScreenshotRequest, ScreenshotResponse } from '@/schema/proposal';
+import { AppError, parseApiError } from '@/lib/errors';
+
+export const screenshotApi = {
+  capture: async (request: ScreenshotRequest & { dummyMode?: boolean }): Promise<ScreenshotResponse> => {
+    try {
+      // GETメソッドを使用
+      const params = new URLSearchParams({
+        url: request.url,
+        width: request.width?.toString() || '1920',
+        height: request.height?.toString() || '1080',
+        ...(request.dummyMode !== undefined && { dummyMode: request.dummyMode.toString() }),
+      });
+
+      const response = await fetch(`/api/rpc/screenshot?${params.toString()}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw parseApiError(errorData);
+      }
+
+      const data = await response.json();
+
+      // レスポンスフォーマットを統一
+      return {
+        success: data.success,
+        screenshotBase64: data.imageBase64 || '',
+        mimeType: data.mimeType || 'image/jpeg',
+        description: '',
+      };
+    } catch (error) {
+      // ネットワークエラーやタイムアウトを捕捉
+      if (error instanceof TypeError && error.message.includes('fetch')) {
+        throw new AppError(
+          'ネットワークエラーが発生しました',
+          'NETWORK_ERROR',
+          503,
+        );
+      }
+
+      // 既にAppErrorの場合はそのまま投げる
+      if (error instanceof AppError) {
+        throw error;
+      }
+
+      // その他のエラー
+      throw new AppError(
+        'スクリーンショットの取得に失敗しました',
+        'SCREENSHOT_FAILED',
+        500,
+        error,
+      );
+    }
+  },
+};

api-client/theme-extraction/index.ts

@@ -0,0 +1,65 @@
+import type { ThemeExtractionRequest, ThemeExtractionResponse } from '@/schema/theme-extraction';
+
+/**
+ * テーマ抽出API
+ */
+export const themeExtractionApi = {
+  /**
+   * テーマを抽出
+   */
+  async extractTheme(request: ThemeExtractionRequest): Promise<ThemeExtractionResponse> {
+    const response = await fetch('/api/rpc/theme-extraction', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(request),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
+      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  },
+
+  /**
+   * 利用可能なプロバイダーを取得
+   */
+  async getProviders(): Promise<{ success: boolean; data?: { providers: string[]; default: string }; error?: string }> {
+    const response = await fetch('/api/rpc/theme-extraction/providers', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
+      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+
+  /**
+   * ヘルスチェック
+   */
+  async healthCheck(): Promise<{ success: boolean; status: string; data?: any; error?: string }> {
+    const response = await fetch('/api/rpc/theme-extraction/health', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
+      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  },
+};

api-client/theme-extraction/queries.ts

@@ -0,0 +1,44 @@
+import type { ThemeExtractionRequest, ThemeExtractionResponse } from '@/schema/theme-extraction';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { themeExtractionApi } from './index';
+
+/**
+ * テーマ抽出用のReact Queryフック
+ */
+export const useThemeExtraction = () => {
+  return useMutation<ThemeExtractionResponse, Error, ThemeExtractionRequest>({
+    mutationFn: themeExtractionApi.extractTheme,
+    onSuccess: (data) => {
+      console.log('[useThemeExtraction] Theme extraction completed:', data);
+    },
+    onError: (error) => {
+      console.error('[useThemeExtraction] Theme extraction failed:', error);
+    },
+  });
+};
+
+/**
+ * 利用可能なプロバイダー取得用のReact Queryフック
+ */
+export const useThemeExtractionProviders = (enabled: boolean = true) => {
+  return useQuery({
+    queryKey: ['theme-extraction', 'providers'],
+    queryFn: themeExtractionApi.getProviders,
+    enabled,
+    staleTime: 5 * 60 * 1000, // 5分間キャッシュ
+    retry: 2,
+  });
+};
+
+/**
+ * テーマ抽出ヘルスチェック用のReact Queryフック
+ */
+export const useThemeExtractionHealth = (enabled: boolean = false) => {
+  return useQuery({
+    queryKey: ['theme-extraction', 'health'],
+    queryFn: themeExtractionApi.healthCheck,
+    enabled,
+    staleTime: 1 * 60 * 1000, // 1分間キャッシュ
+    retry: 1,
+  });
+};

api-client/theme/index.ts

@@ -0,0 +1,36 @@
+import type { ThemeExtractionResult } from '@/schema/theme-extraction';
+
+export interface GenerateThemeCssResponse {
+  success: boolean;
+  css?: string;
+  error?: string;
+}
+
+/**
+ * テーマデータからCSSを生成
+ */
+export async function generateThemeCss(themeData: ThemeExtractionResult): Promise<GenerateThemeCssResponse> {
+  try {
+    const response = await fetch('/api/rpc/theme-extraction/generate-css', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(themeData),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || 'CSS生成に失敗しました');
+    }
+
+    const data: GenerateThemeCssResponse = await response.json();
+    return data;
+  } catch (error) {
+    console.error('[generateThemeCss] Error:', error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'CSS生成中にエラーが発生しました',
+    };
+  }
+}

api-client/theme/queries.ts

@@ -0,0 +1,26 @@
+import { createQueryOptions } from '@/api-client/query-config';
+import type { ThemeExtractionResult } from '@/schema/theme-extraction';
+import { useQuery } from '@tanstack/react-query';
+import { generateThemeCss, type GenerateThemeCssResponse } from './index';
+
+/**
+ * テーマCSS生成フック
+ * テーマデータが渡された場合のみCSS生成を実行
+ */
+export function useThemeCss(themeData: ThemeExtractionResult | null, enabled: boolean = true) {
+  return useQuery<GenerateThemeCssResponse>({
+    ...createQueryOptions<GenerateThemeCssResponse>(),
+    queryKey: ['themeCss', themeData ? JSON.stringify(themeData) : 'no-theme'],
+    queryFn: () => {
+      if (!themeData) {
+        return {
+          success: true,
+          css: undefined,
+        };
+      }
+      return generateThemeCss(themeData);
+    },
+    enabled: enabled && !!themeData,
+    staleTime: Infinity, // テーマデータが同じならキャッシュを使う
+  });
+}