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>
This commit is contained in:
Matt Van Horn
2026-03-07 16:04:22 -08:00
parent 63a876ca3c
commit b886eb3cf0
2 changed files with 8 additions and 2 deletions

View File

@@ -25,6 +25,12 @@ const adapterLabels: Record<string, string> = {
http: "HTTP", 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 }) { function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
return ( return (
<div className="flex items-center gap-3 py-1.5"> <div className="flex items-center gap-3 py-1.5">
@@ -52,7 +58,7 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
<StatusBadge status={agent.status} /> <StatusBadge status={agent.status} />
</PropertyRow> </PropertyRow>
<PropertyRow label="Role"> <PropertyRow label="Role">
<span className="text-sm">{agent.role}</span> <span className="text-sm">{roleLabels[agent.role] ?? agent.role}</span>
</PropertyRow> </PropertyRow>
{agent.title && ( {agent.title && (
<PropertyRow label="Title"> <PropertyRow label="Title">

View File

@@ -231,7 +231,7 @@ export function Agents() {
<EntityRow <EntityRow
key={agent.id} key={agent.id}
title={agent.name} title={agent.name}
subtitle={`${agent.role}${agent.title ? ` - ${agent.title}` : ""}`} subtitle={`${roleLabels[agent.role] ?? agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
to={agentUrl(agent)} to={agentUrl(agent)}
leading={ leading={
<span className="relative flex h-2.5 w-2.5"> <span className="relative flex h-2.5 w-2.5">