From b886eb3cf0fe0b6ae3e21d9e902c5344249289e1 Mon Sep 17 00:00:00 2001
From: Matt Van Horn <mvanhorn@gmail.com>
Date: Sat, 7 Mar 2026 16:04:22 -0800
Subject: [PATCH] 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 <noreply@anthropic.com>
---
 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<string, string> = {
   http: "HTTP",
 };
 
+const roleLabels: Record<string, string> = {
+  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 (
     <div className="flex items-center gap-3 py-1.5">
@@ -52,7 +58,7 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
           <StatusBadge status={agent.status} />
         </PropertyRow>
         <PropertyRow label="Role">
-          <span className="text-sm">{agent.role}</span>
+          <span className="text-sm">{roleLabels[agent.role] ?? agent.role}</span>
         </PropertyRow>
         {agent.title && (
           <PropertyRow label="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() {
               <EntityRow
                 key={agent.id}
                 title={agent.name}
-                subtitle={`${agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
+                subtitle={`${roleLabels[agent.role] ?? agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
                 to={agentUrl(agent)}
                 leading={
                   <span className="relative flex h-2.5 w-2.5">