Agent Demo Frontend

旅行マーケティング AI — フロントエンド設計ガイド

ビジュアルテーゼ

明るく落ち着いた、余白の多いプロフェッショナルな操作画面。 旅行会社のマーケ担当者が安心して使えるエンタープライズ品質。

コンポーネント構成（§6.2 準拠、16 コンポーネント）

frontend/src/
├── components/
│   ├── InputForm.tsx           # 自然言語入力・地域/季節/予算の選択
│   ├── PipelineStepper.tsx     # 5 ステップの進捗表示（Agent1〜4 + 承認）
│   ├── ToolEventBadges.tsx     # ツール使用状況のアニメーションバッジ
│   ├── AnalysisView.tsx        # Agent1 の分析グラフ・サマリ表示
│   ├── PlanApproval.tsx        # 企画書プレビュー + 承認/修正ボタン
│   ├── RegulationResults.tsx   # 規制チェック結果のハイライト表示
│   ├── BrochurePreview.tsx     # HTML ブローシャのプレビュー
│   ├── ImageGallery.tsx        # GPT Image 1.5 の生成画像表示
│   ├── ArtifactTabs.tsx        # 企画書/ブローシャ/画像のタブ切替
│   ├── VersionSelector.tsx     # 成果物バージョンの切替
│   ├── RefineChat.tsx          # マルチターン修正対話の入力
│   ├── SafetyBadge.tsx         # Content Safety 結果の動的バッジ
│   ├── MetricsBar.tsx          # 処理メトリクス（レイテンシ・トークン等）
│   ├── LanguageSwitcher.tsx    # 言語切替（日/英/中）
│   ├── ThemeToggle.tsx         # ダーク/ライト切替
│   └── ErrorRetry.tsx          # エラー表示 + リトライボタン
├── hooks/
│   ├── useSSE.ts              # SSE 接続管理
│   ├── useTheme.ts            # テーマ管理（system 連動）
│   └── useI18n.ts             # 多言語管理
└── lib/
    ├── sse-client.ts          # SSE クライアント
    └── i18n.ts                # 翻訳データ（ja/en/zh）