UI: approval detail page, agent hiring UX, costs breakdown, sidebar badges, and dashboard improvements

Add ApprovalDetail page with comment thread, revision request/resubmit flow,
and ApprovalPayload component for structured payload display. Extend AgentDetail
with permissions management, config revision history, and duplicate action.
Add agent hire dialog with permission-gated access. Rework Costs page with
per-agent breakdown table and period filtering. Add sidebar badge counts for
pending approvals and inbox items. Enhance Dashboard with live metrics and
sparkline trends. Extend Agents list with pending_approval status and bulk
actions. Update IssueDetail with approval linking. Various component improvements
to MetricCard, InlineEditor, CommentThread, and StatusBadge.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/StatusBadge.tsx

@@ -12,14 +12,17 @@ const statusColors: Record<string, string> = {
   failed: "bg-red-900/50 text-red-300",
   succeeded: "bg-green-900/50 text-green-300",
   error: "bg-red-900/50 text-red-300",
+  pending_approval: "bg-amber-900/50 text-amber-300",
   backlog: "bg-neutral-800 text-neutral-400",
   todo: "bg-blue-900/50 text-blue-300",
   in_progress: "bg-indigo-900/50 text-indigo-300",
   in_review: "bg-violet-900/50 text-violet-300",
   blocked: "bg-amber-900/50 text-amber-300",
   done: "bg-green-900/50 text-green-300",
+  terminated: "bg-red-900/50 text-red-300",
   cancelled: "bg-neutral-800 text-neutral-500",
   pending: "bg-yellow-900/50 text-yellow-300",
+  revision_requested: "bg-amber-900/50 text-amber-300",
   approved: "bg-green-900/50 text-green-300",
   rejected: "bg-red-900/50 text-red-300",
 };