操作
バグ #946
未完了Claude会話履歴管理 - React Web UI実装 (Phase 5)
ステータス:
解決
優先度:
高め
担当者:
-
開始日:
2025-07-20
期日:
進捗率:
0%
予定工数:
説明
目的¶
Claude会話履歴管理システムのReact + TypeScript Web UIを実装し、history.call2arm.comでユーザフレンドリーなインターフェースを提供する
技術仕様¶
フロントエンド技術スタック¶
- Framework: React 18 + TypeScript 5
- Styling: TailwindCSS 3.4 + LINE Design Language
- Build: Vite 5
- State Management: Zustand + React Query
- Routing: React Router v6
主要機能¶
-
プロジェクト管理画面
- プロジェクト一覧・詳細表示
- 会話数・最終更新表示
- プロジェクト切り替え
-
会話一覧・検索
- FTS5全文検索インターフェース
- リアルタイム検索・フィルタリング
- タグ・日付範囲絞り込み
- 検索結果ハイライト
-
会話詳細表示
- メッセージ履歴表示
- アーティファクト表示・ダウンロード
- 構文ハイライト
- レスポンシブ対応
-
ナレッジベース機能
- プロジェクト知識表示
- 重要度スコア表示
- 関連会話リンク
UI/UX設計¶
レイアウト構成¶
┌─────────────────────────────────────────┐
│ Header (プロジェクト選択・検索バー) │
├─────────────┬───────────────────────────┤
│ Sidebar │ Main Content │
│ - Projects │ - Conversation List │
│ - Tags │ - Conversation Detail │
│ - Filters │ - Search Results │
└─────────────┴───────────────────────────┘
デザインシステム¶
- カラーパレット: LINE Design準拠
- コンポーネント: 再利用可能なUIライブラリ
- レスポンシブ: モバイル・タブレット対応
- アクセシビリティ: WCAG 2.1 AA準拠
API連携¶
使用エンドポイント¶
- GET /api/v1/projects - プロジェクト一覧
- GET /api/v1/projects/{id}/conversations - プロジェクト別会話
- GET /api/v1/conversations/{id} - 会話詳細
- GET /api/v1/search/conversations - 会話検索
データフロー¶
- React Query でAPI状態管理
- Zustand でUI状態管理
- エラーハンドリング・ローディング表示
- 楽観的更新・キャッシュ活用
実装フェーズ¶
Phase 5.1: 基盤構築¶
- 技術スタック選定
- プロジェクト初期化
- 基本コンポーネント作成
- ルーティング設定
Phase 5.2: 基本機能¶
- プロジェクト一覧画面
- 会話一覧画面
- 基本検索機能
- API連携
Phase 5.3: 高度機能¶
- 会話詳細表示
- アーティファクト表示
- 高度検索・フィルタ
- レスポンシブ対応
Phase 5.4: 最適化¶
- パフォーマンス最適化
- エラーハンドリング強化
- ユーザビリティ改善
- テスト実装
成果物¶
-
React Web Application
- /web/ ディレクトリ下に完全実装
- Docker統合・本番環境対応
-
UIコンポーネントライブラリ
- 再利用可能なコンポーネント群
- Storybook対応（オプション）
-
デプロイ環境
- Docker Compose統合
- Nginx設定更新
- history.call2arm.com 本番公開
前提条件¶
- FastAPI基盤完成（チケット#944 完了）
- SQLiteデータベース稼働
- Docker・Nginx環境準備完了
期待効果¶
- 直感的な会話履歴管理UI
- 高速検索・フィルタリング体験
- プロジェクト横断の知識共有促進
- 開発効率の大幅向上
操作