2.6 KiB
2.6 KiB
Admin UI Kit
Agent Orchestrator 管理画面のハイファイ UI キット。ui/src/ の実装に対応します。
エントリ
index.html— 4画面シェル（Tasks / Schedules / Users / Settings）。TopBar のナビで切替。
コンポーネント
| ファイル | 役割 |
|---|---|
TopBar.jsx |
ロゴ + ワードマーク + セクションナビ（下線インジケータ）+ ユーザーアバター |
TaskList.jsx |
左パネル最上部の「新しい依頼」ボタン、カウント行、検索バー内にソートアイコン統合、ステータスフィルタ chip、タスクリスト |
ChatPane.jsx |
タスク詳細のチャット UI（user / assistant / ask / result / progress バブル） |
DetailPanel.jsx |
右側の詳細パネル（Overview / Progress タブ） |
SchedulesPage.jsx |
スケジュール一覧 + 詳細（Cron / Event トリガー、実行履歴） |
UsersPage.jsx |
ユーザー一覧 + ロール設定 / プロフィール |
SettingsPage.jsx |
左サイドバー + 中央フォーム（Provider, Pieces, Workers ほか） |
Primitives.jsx |
StatusBadge, StatChip, SVG アイコン、スピナー、pulse dot |
設計上の決定（v2）
- プライマリアクションは左パネル最上部 — 「新しい依頼」は TopBar 右上ではなく、タスクリスト文脈内の青いフル幅ボタン。
- カウントはプライマリアクション直下に統合 — 「合計 / 実行中 / 待機 / 失敗」は TaskList の冒頭に置き、TopBar 右側はアバターのみでスッキリ。
- ソートは検索バー内にアイコン化 —
selectを外し、検索バー右端の小さなアイコンボタンをクリックすると 3 つの並び順からドロップダウンで選べる。リストの縦領域が約 40px 広がる。 - 4画面で同じシェルを共有 — Tasks / Schedules / Users は「左リスト + 中央詳細」、Settings のみ「左サイドバー + 中央フォーム」。ヘッダー → サマリ chip → カードフォーム のリズムで操作導線を揃える。
- ナビは下線インジケータ — タブ的な視覚。アクティブ以外はコントラストを落とす。
実装との対応
ui/src/components/ 以下の同名コンポーネントにそのまま対応させる想定です。UI キットはあくまで意思決定のモック — 実 API は未接続、サンプルデータは index.html 内にインライン。
旧バージョン（移植前）は ../admin-legacy/ にあります。