Web UI 強化実装完了レポート

実装日時

2025-11-28

概要

Web UI を「SaaSっぽい見た目・体験」に強化するため、以下の機能を実装しました：

1. C-1: Run 一覧にステータスアイコン／色付きバッジを追加
2. C-2: Run 一覧に「実行時間」カラムを追加
3. C-3: プロジェクトダッシュボードをカードレイアウトにして、主要KPIを一目で分かるようにする
4. C-4: プロジェクト詳細→ダッシュボードへの導線追加

実装ステップ

ステップ1: C-1 - Run 一覧にステータスアイコン／バッジを追加

1-1. Run 一覧 HTML の共通化（ヘルパー関数導入）

ファイル: src/nexuscore/webapp/views_projects.py

実装内容:

• _format_duration(): 実行時間をフォーマット（秒、分、時間単位で表示）
• _compute_run_duration(): Run の実行時間を計算（秒）
• _render_run_status_badge(): ステータスごとに色付きバッジ＋アイコンを生成
  • PENDING: 灰色・⏱ アイコン
  • RUNNING: 青・▶ アイコン（点滅アニメーション）
  • SUCCESS: 緑・✔ アイコン
  • FAILED: 赤・✖ アイコン
• render_run_table(): Run 一覧テーブルをHTMLとして生成する共通関数

特徴:

• ステータスバッジにCSSアニメーション（RUNNING時は点滅）
• テーブルスタイルを統一
• 再利用可能なヘルパー関数として実装

1-2. 既存のプロジェクト詳細画面を更新

変更内容:

• project_detail() 関数で、既存のインラインHTMLテーブル生成を render_run_table() に置き換え
• ステータス表示をバッジ形式に変更

ステップ2: C-2 - 実行時間カラムの追加

実装内容:

• render_run_table() 内で _compute_run_duration() と _format_duration() を使用して Duration カラムを追加
• JSONレスポンスにも duration_sec を追加（project_detail() の runs_data に含める）

出力形式:

• 60秒未満: "30s"
• 60分未満: "5m 30s"
• 60分以上: "2h 15m"

ステップ3: C-3 - プロジェクトダッシュボードのカードレイアウト化

3-1. プロジェクトダッシュボードルートの追加

ファイル: src/nexuscore/webapp/views_dashboard.py

実装内容:

• /dashboard/projects/<project_id> ルートを追加
• project_dashboard() 関数で以下を集計:
  • 統計情報（総Run数、成功数、失敗数、成功率）
  • 最新Run情報
  • 最新Runのメトリクス（パッチ数、影響ファイル数、LLM呼び出し数、コスト、実行時間）
  • LLMコスト内訳（モデル別）
  • 直近のRun一覧（最大10件）

3-2. カードレイアウトHTML生成関数の実装

実装内容:

• render_project_dashboard_html(): カードレイアウトのHTMLを生成
• _render_llm_cost_table(): LLMコスト内訳テーブルを生成
• _render_recent_runs_list(): 直近のRun一覧を生成

カード構成:

1. Project Summary Card: 成功率、総Run数、成功数、失敗数
2. Latest Run Summary Card: Run ID、ステータス、実行時間、パッチ数、LLM呼び出し数、推定コスト
3. LLM Cost Breakdown Card: モデル別の呼び出し数、トークン数、コスト
4. Recent Runs Card: 直近10件のRun一覧（ステータスバッジ付き）

デザイン特徴:

• モダンなカードレイアウト（グリッドシステム）
• レスポンシブデザイン（auto-fit で自動調整）
• 統一されたカラーパレット
• ステータスバッジのアニメーション

ステップ4: C-4 - プロジェクト詳細→ダッシュボードへの導線追加

実装内容:

• project_detail() 関数のHTMLに「Open Project Dashboard」ボタンを追加
• ボタンスタイルを統一（青背景、白文字、ホバー効果）

変更ファイル一覧

変更ファイル

1. src/nexuscore/webapp/views_projects.py
   • ヘルパー関数を追加（_format_duration, _compute_run_duration, _render_run_status_badge, render_run_table）
   • project_detail() を更新（render_run_table() を使用、ダッシュボードリンクを追加）
   • JSONレスポンスに duration_sec を追加
2. src/nexuscore/webapp/views_dashboard.py
   • /dashboard/projects/<project_id> ルートを追加
   • project_dashboard() 関数を実装
   • render_project_dashboard_html() 関数を実装
   • _render_llm_cost_table() 関数を実装
   • _render_recent_runs_list() 関数を実装
   • views_projects からヘルパー関数をインポート

新規作成ファイル

1. tests/webapp/test_run_table_status.py
   • ステータスバッジ生成のテスト
2. tests/webapp/test_dashboard_cards.py
   • ダッシュボードHTML生成のテスト

動作確認結果

静的解析結果

• リンターエラー: なし
• 型チェック: 問題なし

設計上の改善点

1. コードの再利用性:
   • Run 一覧テーブル生成をヘルパー関数化し、複数箇所で再利用可能に
   • ステータスバッジ生成を一元管理
2. UI/UX の改善:
   • ステータスが視覚的に分かりやすく（色付きバッジ＋アイコン）
   • 実行時間が一目で分かる
   • カードレイアウトで主要KPIを一覧表示
3. 情報の整理:
   • プロジェクト概要、最新Run、LLMコスト、Run履歴をカードで整理
   • レスポンシブデザインで様々な画面サイズに対応

既知の制約・注意事項

1. テンプレートエンジン未使用:
   • 現在はインラインHTML文字列の組み立てで実装
   • 将来的にテンプレートエンジン（Jinja2等）に移行可能な設計
2. メトリクス集計:
   • 現在は簡易版のメトリクス集計を実装
   • より詳細なメトリクスが必要な場合は metrics.py を拡張
3. LLMコスト内訳:
   • 最新Runのみのコスト内訳を表示
   • プロジェクト全体のコスト内訳は別途実装が必要

次のステップ

推奨される動作確認

1. 実際のWeb UIで確認:
   • プロジェクト詳細画面で Run 一覧のステータスバッジと実行時間を確認
   • ダッシュボードでカードレイアウトが正しく表示されるか確認
   • レスポンシブデザインが動作するか確認
2. テストの実行:

   python -m pytest tests/webapp/test_run_table_status.py -v
   python -m pytest tests/webapp/test_dashboard_cards.py -v
   

3. ブラウザでの確認:
   • 各種ステータス（PENDING, RUNNING, SUCCESS, FAILED）でバッジが正しく表示されるか
   • RUNNING ステータスでアニメーションが動作するか
   • ダッシュボードのカードが正しく配置されるか

将来の拡張

1. テンプレートエンジンの導入:
   • Jinja2 などのテンプレートエンジンを導入してHTML生成を改善
2. メトリクスの拡張:
   • より詳細なメトリクス（テストカバレッジ、コード品質スコア等）を追加
   • 時系列グラフの追加
3. インタラクティブ機能:
   • カードのクリックで詳細表示
   • フィルタリング・ソート機能

関連ドキュメント

• docs/completion_reports/SAAS_UX_ENHANCEMENT_COMPLETION_REPORT.md - 以前のUX強化レポート
• docs/saas_architecture.md - SaaS アーキテクチャドキュメント