画面構成・UI要件 - AIオートマクロ仕様書

本システムはデスクトップアプリケーション（Python環境等を想定）として、Viewとビジネスロジックを明確に分離可能なマルチペイン構造を採用します。各画面の構成およびコンポーネントの要件は以下の通りです。

6.1. 全体レイアウト（ベース構造）

アプリケーションウィンドウは、ユーザーの視線移動を最適化し、操作の一貫性を保つために3つの主要領域で構成します。

6.2. 主要画面の要件

📁 ホーム / マクロ管理画面

新規マクロ生成導線: ユーザーが即座に記録を開始できるよう、「新規マクロ記録開始」のプライマリアクションボタンを最上部に強調配置。
マクロリストビュー: 過去に作成・生成されたマクロを一覧表示。各項目には、対応する「実行（再生）」「ビジュアル編集」「ログ解析」への個別ショートカットボタンを実装。
簡易ダッシュボード: 過去の実行成功率、エラーによる自己修復の発動回数など、システムの健全性を表す統計サマリーを出力。

🎥 記録モード（フローティング・ウィジェット）

ウィンドウコントロール: 「新規マクロ記録開始」押下時、メインウィンドウを自動的に最小化。ターゲットとなる業務アプリケーションの操作を妨げないよう、画面の隅に超小型のウィジェットとして常時最前面表示（TopMost属性）に移行。
操作インターフェース: 「録画停止」「一時停止」「録画終了（解析へ進む）」のミニマルなコントロールボタン群。
リアルタイムフィードバック: バックグラウンドでEvent Loggerが捕捉している最新のアクション（例: Click [1250, 300]）を1行のストリーミングテキストとして描画し、正常にフックされているかを可視化。

🔍 解析・生成・編集画面（2ペイン構成）

左ペイン（ビジュアルワークフロータイムライン）: 記録されたスクリーンショットと、YOLO/OCRエンジンが認識したUIのバウンディングボックス（境界枠）を重ねて描画。操作ステップが縦方向に連なるタイムライン形式を採用。
右ペイン（プロパティ＆コードエディタ）:
- 左ペインで選択されたステップのメタデータ（座標、認識テキスト、推定UI種別）を表示するプロパティパネル。
- AIコアによって自動生成された、ローカル環境用のマクロ実行コードを表示するプレビュー・編集エディタ（手動での微調整を許容）。

🚨 実行・自己修復モニター画面

フェーズインジケーター: 現在の処理フェーズ（ポーリング待機中、実行中、タイムアウト検出、修復フェーズ作動中）を色分けし、進捗バーとともに大きく視覚化。
Image Diff プレビュー: 記録時にEvent Loggerが保存した「基準画像（期待値）」と、Screen Capturerがリアルタイムに取得している「現在の画面（実績値）」を2画面で並列比較。自己修復（座標補正や動的コード生成）が走った場合、AIが再探索・決定したターゲット要素を画面上でハイライト。
ライブコンソールパネル: 下部にリアルタイムの内部ログ（ドライバ入出力、API通信状況、エラー詳細）をスクロール出力。

6.3. 画面遷移図

アプリケーション内における各画面の状態変化、および遷移のトリガーとなるユーザー操作・内部イベントのマッピング図です。

6. デスクトップアプリ画面構成・UI要件