# 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/` にあります。