From b886eb3cf0fe0b6ae3e21d9e902c5344249289e1 Mon Sep 17 00:00:00 2001 From: Matt Van Horn Date: Sat, 7 Mar 2026 16:04:22 -0800 Subject: [PATCH 1/2] feat(ui): show human-readable role labels in agent list and properties Use roleLabels lookup in list view subtitle and AgentProperties panel instead of raw role strings. Fixes #180 Co-Authored-By: Claude Opus 4.6 --- ui/src/components/AgentProperties.tsx | 8 +++++++- ui/src/pages/Agents.tsx | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/ui/src/components/AgentProperties.tsx b/ui/src/components/AgentProperties.tsx index 4e1bc76e..db19d18d 100644 --- a/ui/src/components/AgentProperties.tsx +++ b/ui/src/components/AgentProperties.tsx @@ -25,6 +25,12 @@ const adapterLabels: Record = { http: "HTTP", }; +const roleLabels: Record = { + ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO", + engineer: "Engineer", designer: "Designer", pm: "PM", + qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General", +}; + function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) { return (
@@ -52,7 +58,7 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) { - {agent.role} + {roleLabels[agent.role] ?? agent.role} {agent.title && ( diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx index 40913804..dd5b5a0d 100644 --- a/ui/src/pages/Agents.tsx +++ b/ui/src/pages/Agents.tsx @@ -231,7 +231,7 @@ export function Agents() { From 2639184f46179427ff361d4ef93e021cc6e7860a Mon Sep 17 00:00:00 2001 From: Matt Van Horn Date: Sat, 7 Mar 2026 17:07:14 -0800 Subject: [PATCH 2/2] refactor: extract roleLabels to shared constants Move duplicated roleLabels map from AgentProperties.tsx, Agents.tsx, OrgChart.tsx, and agent-config-primitives.tsx into AGENT_ROLE_LABELS in packages/shared/src/constants.ts. Co-Authored-By: Claude Opus 4.6 --- packages/shared/src/constants.ts | 14 ++++++++++++++ packages/shared/src/index.ts | 1 + ui/src/components/AgentProperties.tsx | 8 ++------ ui/src/components/agent-config-primitives.tsx | 7 ++----- ui/src/pages/Agents.tsx | 8 ++------ ui/src/pages/OrgChart.tsx | 8 ++------ 6 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/shared/src/constants.ts b/packages/shared/src/constants.ts index c7f85b57..53758f67 100644 --- a/packages/shared/src/constants.ts +++ b/packages/shared/src/constants.ts @@ -49,6 +49,20 @@ export const AGENT_ROLES = [ ] as const; export type AgentRole = (typeof AGENT_ROLES)[number]; +export const AGENT_ROLE_LABELS: Record = { + ceo: "CEO", + cto: "CTO", + cmo: "CMO", + cfo: "CFO", + engineer: "Engineer", + designer: "Designer", + pm: "PM", + qa: "QA", + devops: "DevOps", + researcher: "Researcher", + general: "General", +}; + export const AGENT_ICON_NAMES = [ "bot", "cpu", diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 59ec9eb6..b860b04a 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -6,6 +6,7 @@ export { AGENT_STATUSES, AGENT_ADAPTER_TYPES, AGENT_ROLES, + AGENT_ROLE_LABELS, AGENT_ICON_NAMES, ISSUE_STATUSES, ISSUE_PRIORITIES, diff --git a/ui/src/components/AgentProperties.tsx b/ui/src/components/AgentProperties.tsx index db19d18d..762b374b 100644 --- a/ui/src/components/AgentProperties.tsx +++ b/ui/src/components/AgentProperties.tsx @@ -1,6 +1,6 @@ import { useQuery } from "@tanstack/react-query"; import { Link } from "@/lib/router"; -import type { Agent, AgentRuntimeState } from "@paperclipai/shared"; +import { AGENT_ROLE_LABELS, type Agent, type AgentRuntimeState } from "@paperclipai/shared"; import { agentsApi } from "../api/agents"; import { useCompany } from "../context/CompanyContext"; import { queryKeys } from "../lib/queryKeys"; @@ -25,11 +25,7 @@ const adapterLabels: Record = { http: "HTTP", }; -const roleLabels: Record = { - ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO", - engineer: "Engineer", designer: "Designer", pm: "PM", - qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General", -}; +const roleLabels = AGENT_ROLE_LABELS as Record; function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) { return ( diff --git a/ui/src/components/agent-config-primitives.tsx b/ui/src/components/agent-config-primitives.tsx index 9f1b3585..896033c1 100644 --- a/ui/src/components/agent-config-primitives.tsx +++ b/ui/src/components/agent-config-primitives.tsx @@ -15,6 +15,7 @@ import { import { Button } from "@/components/ui/button"; import { HelpCircle, ChevronDown, ChevronRight } from "lucide-react"; import { cn } from "../lib/utils"; +import { AGENT_ROLE_LABELS } from "@paperclipai/shared"; /* ---- Help text for (?) tooltips ---- */ export const help: Record = { @@ -60,11 +61,7 @@ export const adapterLabels: Record = { http: "HTTP", }; -export const roleLabels: Record = { - ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO", - engineer: "Engineer", designer: "Designer", pm: "PM", - qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General", -}; +export const roleLabels = AGENT_ROLE_LABELS as Record; /* ---- Primitive components ---- */ diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx index dd5b5a0d..b4e12781 100644 --- a/ui/src/pages/Agents.tsx +++ b/ui/src/pages/Agents.tsx @@ -18,7 +18,7 @@ import { PageTabBar } from "../components/PageTabBar"; import { Tabs } from "@/components/ui/tabs"; import { Button } from "@/components/ui/button"; import { Bot, Plus, List, GitBranch, SlidersHorizontal } from "lucide-react"; -import type { Agent } from "@paperclipai/shared"; +import { AGENT_ROLE_LABELS, type Agent } from "@paperclipai/shared"; const adapterLabels: Record = { claude_local: "Claude", @@ -31,11 +31,7 @@ const adapterLabels: Record = { http: "HTTP", }; -const roleLabels: Record = { - ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO", - engineer: "Engineer", designer: "Designer", pm: "PM", - qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General", -}; +const roleLabels = AGENT_ROLE_LABELS as Record; type FilterTab = "all" | "active" | "paused" | "error"; diff --git a/ui/src/pages/OrgChart.tsx b/ui/src/pages/OrgChart.tsx index 786b1f87..5d23d0c7 100644 --- a/ui/src/pages/OrgChart.tsx +++ b/ui/src/pages/OrgChart.tsx @@ -10,7 +10,7 @@ import { EmptyState } from "../components/EmptyState"; import { PageSkeleton } from "../components/PageSkeleton"; import { AgentIcon } from "../components/AgentIconPicker"; import { Network } from "lucide-react"; -import type { Agent } from "@paperclipai/shared"; +import { AGENT_ROLE_LABELS, type Agent } from "@paperclipai/shared"; // Layout constants const CARD_W = 200; @@ -422,11 +422,7 @@ export function OrgChart() { ); } -const roleLabels: Record = { - ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO", - engineer: "Engineer", designer: "Designer", pm: "PM", - qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General", -}; +const roleLabels = AGENT_ROLE_LABELS as Record; function roleLabel(role: string): string { return roleLabels[role] ?? role;