feat(web): letter avatars for custom model groups and agents (#31)

Co-authored-by: Alice <alice@prismshadow.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/features/agents/agents-page.tsx

@@ -197,7 +197,12 @@ export function AgentsPage() {
                   <div className="min-w-[14rem] flex-1">
                     {/* Title line: small avatar + name + agentId + active badge */}
                     <div className="flex items-center gap-2">
-                      <AgentAvatar id={a.agentId} size={18} className="shrink-0 rounded" />
+                      <AgentAvatar
+                        id={a.agentId}
+                        name={agentDisplayName(a)}
+                        size={18}
+                        className="shrink-0 rounded"
+                      />
                       {/* min-w-0: flex children don't shrink below their content by default; needed here to truncate overly long names */}
                       <span className="min-w-0 truncate text-base font-bold">
                         {agentDisplayName(a)}

packages/web/src/features/benchmark/benchmark-page.tsx

@@ -87,7 +87,7 @@ function AgentNode({
           aria-label={open ? S.nav.collapseGroup : S.nav.expandGroup}
           className="flex min-w-0 flex-1 items-center gap-1 rounded px-1 py-0.5 text-left transition-colors duration-150 hover:bg-gray-200/50 dark:hover:bg-gray-800/50"
         >
-          <AgentAvatar id={agentId} size={18} className="shrink-0 rounded" />
+          <AgentAvatar id={agentId} name={name} size={18} className="shrink-0 rounded" />
           <span className="min-w-0 truncate text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
             {name}
           </span>

packages/web/src/features/chat/draft-view.tsx

@@ -587,7 +587,12 @@ function AgentSelect({
           className={pillClass}
         >
           {selected ? (
-            <AgentAvatar id={selected.agentId} size={16} className="shrink-0 rounded" />
+            <AgentAvatar
+              id={selected.agentId}
+              name={agentDisplayName(selected)}
+              size={16}
+              className="shrink-0 rounded"
+            />
           ) : null}
           <span className="min-w-0 truncate">
             {selected ? agentDisplayName(selected) : S.common.loading}
@@ -613,7 +618,12 @@ function AgentSelect({
               }}
               className="flex w-full items-center gap-2.5 px-3 py-1.5 text-left transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800"
             >
-              <AgentAvatar id={a.agentId} size={20} className="shrink-0 rounded" />
+              <AgentAvatar
+                id={a.agentId}
+                name={agentDisplayName(a)}
+                size={20}
+                className="shrink-0 rounded"
+              />
               <span className="min-w-0 flex-1">
                 <span
                   className={`block truncate text-xs ${

packages/web/src/features/skills/skills-page.tsx

@@ -493,7 +493,7 @@ function InstallRow({
 }) {
   return (
     <div className="flex items-center gap-2 rounded-md px-1.5 py-1.5 transition-colors duration-150 hover:bg-gray-50 dark:hover:bg-gray-800/60">
-      <AgentAvatar id={agentId} size={22} className="shrink-0 rounded" />
+      <AgentAvatar id={agentId} name={name} size={22} className="shrink-0 rounded" />
       <span className="min-w-0 flex-1 truncate text-sm" title={agentId}>
         {name}
       </span>

packages/web/src/features/traces/traces-page.tsx

@@ -118,7 +118,7 @@ function AgentNode({
           aria-label={open ? S.nav.collapseGroup : S.nav.expandGroup}
           className="flex min-w-0 flex-1 items-center gap-1 rounded px-1 py-0.5 text-left transition-colors duration-150 hover:bg-gray-200/50 dark:hover:bg-gray-800/50"
         >
-          <AgentAvatar id={agentId} size={18} className="shrink-0 rounded" />
+          <AgentAvatar id={agentId} name={name} size={18} className="shrink-0 rounded" />
           <span className="min-w-0 truncate text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
             {name}
           </span>