Show agent name in inbox approval labels (e.g. "Hire Agent: Designer")

Instead of the generic "Hire Agent" label, display the agent's name from
the approval payload for hire_agent approvals across inbox, approval card,
and approval detail views.

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

ui/src/components/ApprovalPayload.tsx

@@ -7,6 +7,15 @@ export const typeLabel: Record<string, string> = {
   budget_override_required: "Budget Override",
 };
 
+/** Build a contextual label for an approval, e.g. "Hire Agent: Designer" */
+export function approvalLabel(type: string, payload?: Record<string, unknown> | null): string {
+  const base = typeLabel[type] ?? type;
+  if (type === "hire_agent" && payload?.name) {
+    return `${base}: ${String(payload.name)}`;
+  }
+  return base;
+}
+
 export const typeIcon: Record<string, typeof UserPlus> = {
   hire_agent: UserPlus,
   approve_ceo_strategy: Lightbulb,