mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
dotta 2026-03-18 21:26:36 -05:00
parent 58a3cbd654
commit 9e21ef879f
4 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/ApprovalCard.tsx
View file

@ -2,7 +2,7 @@ import { CheckCircle2, XCircle, Clock } from "lucide-react";
import { Link } from "@/lib/router"; import { Link } from "@/lib/router";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Identity } from "./Identity"; import { Identity } from "./Identity";
import { typeLabel, typeIcon, defaultTypeIcon, ApprovalPayloadRenderer } from "./ApprovalPayload"; import { approvalLabel, typeIcon, defaultTypeIcon, ApprovalPayloadRenderer } from "./ApprovalPayload";
import { timeAgo } from "../lib/timeAgo"; import { timeAgo } from "../lib/timeAgo";
import type { Approval, Agent } from "@paperclipai/shared"; import type { Approval, Agent } from "@paperclipai/shared";
@ -32,7 +32,7 @@ export function ApprovalCard({
isPending: boolean; isPending: boolean;
}) { }) {
const Icon = typeIcon[approval.type] ?? defaultTypeIcon; const Icon = typeIcon[approval.type] ?? defaultTypeIcon;
const label = typeLabel[approval.type] ?? approval.type; const label = approvalLabel(approval.type, approval.payload as Record<string, unknown> | null);
const showResolutionButtons = const showResolutionButtons =
approval.type !== "budget_override_required" && approval.type !== "budget_override_required" &&
(approval.status === "pending" || approval.status === "revision_requested"); (approval.status === "pending" || approval.status === "revision_requested");

9
ui/src/components/ApprovalPayload.tsx
View file

@ -7,6 +7,15 @@ export const typeLabel: Record<string, string> = {
budget_override_required: "Budget Override", 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> = { export const typeIcon: Record<string, typeof UserPlus> = {
hire_agent: UserPlus, hire_agent: UserPlus,
approve_ceo_strategy: Lightbulb, approve_ceo_strategy: Lightbulb,

4
ui/src/pages/ApprovalDetail.tsx
View file

@ -8,7 +8,7 @@ import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys"; import { queryKeys } from "../lib/queryKeys";
import { StatusBadge } from "../components/StatusBadge"; import { StatusBadge } from "../components/StatusBadge";
import { Identity } from "../components/Identity"; import { Identity } from "../components/Identity";
import { typeLabel, typeIcon, defaultTypeIcon, ApprovalPayloadRenderer } from "../components/ApprovalPayload"; import { approvalLabel, typeIcon, defaultTypeIcon, ApprovalPayloadRenderer } from "../components/ApprovalPayload";
import { PageSkeleton } from "../components/PageSkeleton"; import { PageSkeleton } from "../components/PageSkeleton";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
@ -203,7 +203,7 @@ export function ApprovalDetail() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<TypeIcon className="h-5 w-5 text-muted-foreground shrink-0" /> <TypeIcon className="h-5 w-5 text-muted-foreground shrink-0" />
<div> <div>
<h2 className="text-lg font-semibold">{typeLabel[approval.type] ?? approval.type.replace(/_/g, " ")}</h2> <h2 className="text-lg font-semibold">{approvalLabel(approval.type, approval.payload as Record<string, unknown> | null)}</h2>
<p className="text-xs text-muted-foreground font-mono">{approval.id}</p> <p className="text-xs text-muted-foreground font-mono">{approval.id}</p>
</div> </div>
</div> </div>

4
ui/src/pages/Inbox.tsx
View file

@ -18,7 +18,7 @@ import { IssueRow } from "../components/IssueRow";
import { PriorityIcon } from "../components/PriorityIcon"; import { PriorityIcon } from "../components/PriorityIcon";
import { StatusIcon } from "../components/StatusIcon"; import { StatusIcon } from "../components/StatusIcon";
import { StatusBadge } from "../components/StatusBadge"; import { StatusBadge } from "../components/StatusBadge";
import { defaultTypeIcon, typeIcon, typeLabel } from "../components/ApprovalPayload"; import { approvalLabel, defaultTypeIcon, typeIcon } from "../components/ApprovalPayload";
import { timeAgo } from "../lib/timeAgo"; import { timeAgo } from "../lib/timeAgo";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
@ -253,7 +253,7 @@ function ApprovalInboxRow({
isPending: boolean; isPending: boolean;
}) { }) {
const Icon = typeIcon[approval.type] ?? defaultTypeIcon; const Icon = typeIcon[approval.type] ?? defaultTypeIcon;
const label = typeLabel[approval.type] ?? approval.type; const label = approvalLabel(approval.type, approval.payload as Record<string, unknown> | null);
const showResolutionButtons = const showResolutionButtons =
approval.type !== "budget_override_required" && approval.type !== "budget_override_required" &&
ACTIONABLE_APPROVAL_STATUSES.has(approval.status); ACTIONABLE_APPROVAL_STATUSES.has(approval.status);