タブ役割定義 (Tab Roles)

WingStats Manager のコントロールパネルには 9 つのタブ がある。各タブには明確な責務があり、新規機能を追加するときはまずどのタブに置くべきか をこのドキュメントで確認する。

責務がはみ出した状態（例: オーバーレイ設定タブにビルド情報を置く）は後の認知負荷を増やすため、避けること。

タブ一覧と責務

#	タブ名	コンポーネント	責務 (置く)	置かない
0	設定 (オーバーレイ)	`SettingsSubTabs`	OBS オーバーレイの見た目・配置・テーマ・パーツ ON/OFF / 自動起動 (UX)	開発者向け情報、デバッグ、内部状態
1	リアルタイム解析	`RealtimeAnalysisTab`	進行中の試合のライブ表示・現在の状態・現セッション統計	過去試合の集計、設定
2	DB 閲覧	`MatchListTab`	過去試合の一覧・詳細・キャラ統計など DB データのブラウズ	リアルタイム情報、設定
3	プレイヤー	`PlayerDashboardTab`	個別プレイヤー(自分含む) の累積戦績・キャラ別勝率・推移グラフ	リアルタイム、設定、他者のメモ
4	ブラウザ自動化	`BrowserAutomationTab`	ヘッドレス取得の操作・ログイン状況・取得試行ログ	DB ブラウズ、設定
5	ログ解析	`LogAnalysisTab`	ゲームログファイルを取り込んで一括解析・DB へ投入	リアルタイム監視、設定
6	使い方	`HelpTab`	エンドユーザー向け UI 説明・スクリーンショット	開発者向け情報
7	更新履歴	`ChangelogTab`	アプリのリリースノート (ユーザー向け視点)	開発者向けの実装ログ
8	デバッグ・性能	`DebugTab`	開発者 / トラブルシュート用の集約画面 — ビルド情報、FPS、CPU/Mem、状態 snapshot、内部設定	エンドユーザーが日常的に触る設定

配置の判断フロー

新しいカード / セクションを追加するときは、以下を順に問う：

エンドユーザー向け？開発者 / トラブルシュート向け？
- エンドユーザー → 設定 / 使い方 / リアルタイム / DB / プレイヤー
- 開発者・トラブルシュート → デバッグ・性能
オーバーレイの見た目・配置と関係する？
- Yes → 設定 (オーバーレイ)
- No → 別のタブを検討
リアルタイム情報？それとも過去データ？
- リアルタイム → リアルタイム解析
- 過去 → DB 閲覧 or プレイヤー
データ取り込み系？
- ファイル取り込み → ログ解析
- ヘッドレス取得 → ブラウザ自動化
アプリの状態・性能・識別情報？
- → デバッグ・性能 (必ずここ)

アンチパターン

❌ オーバーレイ設定タブ (「テーマ・OBS」サブタブ > 詳細設定) にデバッグ情報を置く

なぜダメか: タブ名が示す責務 (オーバーレイの見た目調整) から逸脱する。エンドユーザーがオーバーレイをいじるためにタブを開いたときに、関係のない情報が混ざる。

例: ビルド情報、CPU メトリクス、FPS、内部 IPC のデバッグ。 正しい配置: デバッグ・性能タブ。

❌ デバッグタブにユーザー設定を置く

なぜダメか: デバッグタブはトラブルシュート用なのに、日常的な設定変更が混在すると「触っていいのか」分からなくなる。

例: オーバーレイのテーマ切替、myUid 設定。 正しい配置: 設定タブ。

❌ 設定タブ「テーマ・OBS > 詳細設定」accordion に無関係な物を放り込む

なぜダメか: 「詳細設定」は オーバーレイ運用のうち上級者向けの設定 (自動起動 / BP ウィンドウデバッグ / OBS ガイド / 現在の設定プレビュー) のみを置く場所。
ここに「アプリのビルド identity」のような Settings ではないものを混ぜると、accordion の意味が壊れる。

「デバッグ・性能」タブに置くものの基準

DebugTab には以下のような immutable / 観測専用 / 開発者向け の情報のみを置く：

カテゴリ	例
Build identity	`BuildInfoCard` — gitSha / branch / builtAt / trigger / dirty 状態
性能メトリクス	`FpsCard` (renderer fps), `ProcessMetricsCard` (CPU/Mem per process)
状態 snapshot	`StateSnapshotCard` — store / 各機能の ON/OFF 一覧
内部設定の可視化	`BrowserAutomationSettingsCard`, `BroadcastSettingsCard` — 通常編集しないが見えると助かる設定

追加時のチェックリスト:

[ ] エンドユーザーが触る必要がない
[ ] トラブルシュート時に「これが分かると助かる」情報である
[ ] タブ非アクティブ時にコストがゼロ (DebugTab の規約: 計測は active フラグで止める)
[ ] そのまま情報をコピーして開発者に貼り付けられる (テキスト選択 / コピーボタン)

既存タブ内のサブ構造 (補足)

設定タブ (`SettingsSubTabs`)

設定タブ
├── サブタブ: テーマ・OBS
│   ├── ThemeSelector            — テーマ切替
│   ├── OverlayWindowSizeSection — オーバーレイ window サイズ
│   ├── OverlayMatchTypeFilterSection — Rank/Normal フィルタ
│   └── 詳細設定 (accordion)
│       ├── AutoLaunchSection          — Windows 自動起動 / トレイ / Steam
│       ├── BPOpponentWindowDebugPanel — BP 対戦相手ウィンドウのデバッグ
│       ├── OBSSettingsGuideCard       — OBS 設定方法ガイド
│       └── CurrentSettingsPreviewCard — 現在の設定プレビュー
├── サブタブ: パーツ設定
│   └── TextInputSection — オーバーレイ各 area のテキスト
└── サブタブ: レイアウト
    └── LayoutAdjustmentSection — オーバーレイ各 area の位置 / 表示切替

サブタブの責務: いずれも オーバーレイの操作・調整 に閉じる。アプリ全体の状態やデバッグはここに置かない。

デバッグ・性能タブ (`DebugTab`)

デバッグ・性能タブ
├── BuildInfoCard          ← buildId / gitSha / branch / builtAt / trigger / dirty
├── TelemetryCard          ← 過去 24h サマリ / 直近エラー / login-check 集計 / dir open
│                            "詳細を別ウィンドウで開く" → TelemetryDetailView (telemetry.html)
├── StateSnapshotCard      ← store の中身・各機能の ON/OFF
├── FpsCard                ← renderer FPS
├── ProcessMetricsCard     ← プロセス別 CPU/Mem
├── BrowserAutomationSettingsCard ← BA 関連の内部設定 (読み取り中心)
└── BroadcastSettingsCard  ← 配信系の内部設定 (読み取り中心)

タブ役割定義 (Tab Roles) ​

タブ一覧と責務 ​

配置の判断フロー ​

アンチパターン ​

❌ オーバーレイ設定タブ (「テーマ・OBS」サブタブ > 詳細設定) にデバッグ情報を置く ​

❌ デバッグタブにユーザー設定を置く ​

❌ 設定タブ「テーマ・OBS > 詳細設定」accordion に無関係な物を放り込む ​

「デバッグ・性能」タブに置くものの基準 ​

既存タブ内のサブ構造 (補足) ​

設定タブ (SettingsSubTabs) ​

デバッグ・性能タブ (DebugTab) ​

関連ドキュメント ​