Debug WebUI 機能カタログ

汎用 debug WebUI に追加すると効く機能を、安全・観測性・操作・記録・チーム・UX で分類。投資対効果と避けたいものも

要点: 汎用 debug WebUI に載せる機能を投資対効果順に整理。まず安全 (E-STOP + confirmation + watchdog)、次に Chart / Log stream / Bag record トリガーが対 Foxglove で差が出やすい。Command palette や drag & drop editor は工数の割に使われないため避ける。

カテゴリ別 #

安全 #

機能	効果
E-STOP バー	常時表示・確認なし・Space キー割当。全機能に優先
Confirmation dialog	`style: danger` widget は 1 段確認
Watchdog	一定時間操作なしで safe state (motor stop) を発行
Session lock	同時に操作できるユーザーは 1 人まで

リアルタイム観測 (rosbridge で完結)#

機能	効果
Chart widget	直近 N 秒の topic を折れ線。Debug ページ内で完結
Image widget	`sensor_msgs/CompressedImage` 表示
Bandwidth monitor	topic 別 Hz + bytes/sec
TF viewer	TF tree + frame 選択で相対姿勢
Node graph	動作中 node / topic 関係

操作の質 #

機能	効果
Preset save/load	slider 値の snapshot → 復元
Keyboard shortcuts	widget に数字キー割当
Sequence recorder	操作 record → 再生 (回帰テスト)
Command palette (Ctrl+K)	全 widget を検索実行

記録・分析への橋渡し #

機能	効果
Bag record トリガー	WebUI から `ros2 bag record` 開始/停止
Bag list + Foxglove ジャンプ	記録済み bag 一覧、選ぶと Foxglove で開く
Note attachment	bag に日本語メモ添付 (何を試した / 何が起きた)
Screenshot on trigger	button 押下時 state を JSON dump

観測パネル (rc26 / rc27_webui から抽象化)#

機能	効果
Rosout log stream	フィルタ付きログ
HSM state viewer	現在 state バッジ + 遷移ログ
Mechanism panel	機構別の cmd vs measured
Behavior tree viewer	BT tick 状況

Settings で type: hsm_state みたいな universal widget として抽象化できる。

チーム / 開発フロー #

機能	効果
Config auto-commit	Settings 保存で git push (誰が変えたか追える)
Session log	Debug 操作履歴 (誰が何時に何を)
Config profiles	「motor test」「field walk」「calibration」等の複数 config
Presentation mode	大画面 (試合本番) 用 layout

LLM 連携 #

機能	効果
Chat panel	「今 motor どう?」を LLM に投げると topic を見て答える
Anomaly alert	値の急変 (statistical outlier) を検知 → toast
Log summarization	rosout の直近を要約

UX 磨き #

機能	効果
Notification toast	service 結果・launch 起動の通知
Undo/Redo	Settings 編集で
Widget grouping	折りたたみ/展開
Dark/Light 切替	見た目
Widget drag & drop	Settings で配置編集 (今は JSON 直)

投資対効果ランキング #

優先高 (半日〜1 日、効果大):

E-STOP バー — 安全最優先、必ず入れる
Chart widget — Debug ページ内で追従が見える = Foxglove 起動不要が増える
Rosout log stream widget — rc27_webui から移植可
Bag record トリガー — launch spawner の応用
Preset save/load — slider 使う頻度で効いてくる

優先中 (工数 vs 効果、機体規模による):

HSM state viewer / Mechanism panel の universal 化
Bag list + Foxglove ジャンプ
Config auto-commit (git)
Keyboard shortcuts

避けたい:

機能	理由
Command palette	見た目良いが Debug UI では使わない (対象 widget 数が少ない)
Widget drag & drop editor	実装重い、JSON 直書きで十分
Grafana / MCAP viewer 埋込	責務逸脱、専用ツールに任せる
ノード内 3D 可視化	Foxglove の担当
Multi-tenant / user 管理	開発 UI で不要

実装順の判断基準 #

安全 → 観測 → 操作 → 記録 → UX の順で優先
rc27_webui / 既存 UI に類似機能があるなら移植優先、抽象化は後
Foxglove が既に得意な機能は追わない (3D 可視、bag 再生、複雑 plot)
rosbridge で完結する機能から (backend 実装が要らない)