From 3d5878980bbf178bc20f75f3628b51b1267df8bf Mon Sep 17 00:00:00 2001 From: Dotta <34892728+cryppadotta@users.noreply.github.com> Date: Tue, 3 Nov 2026 08:54:08 -0600 Subject: [PATCH] fix(ui): show agent avatars in the chat picker (#18709) ## Thinking Path > - Paperclip helps people manage AI agents and their work. > - Chat lets a person choose an agent for a conversation. > - The shared agent picker shows a role icon by default. > - An icon does not show the agent's saved visual identity. > - This pull request uses the shared avatar component in that picker. > - The picker now matches the avatar in the agent profile and chat sidebar. ## Linked Issues or Issue Description **What happened?** The chat header switcher and main sidebar picker show agent role icons. The conversation sidebar already supplies avatars through its existing render option. **Expected behavior** All chat pickers show the agent's saved avatar. Uploaded images and default appearances use the same shared component. **Steps to reproduce** 1. Open an agent conversation. 2. Use the agent switcher in the chat header. 3. Compare each choice with the agent's profile avatar. Related work: [chat header profile navigation](https://github.com/paperclipai/paperclip/pull/17169) changes profile links. [Task list avatars](https://github.com/paperclipai/paperclip/pull/18607) changes a separate surface. ## What Changed - Use `AgentAvatar` at size 32 as the default in `AgentChatPicker`. - Keep the existing custom render option and selection behavior. - Test custom and default avatars inside the picker. Test the custom render option. - Keep the feature map unchanged for this small UI fix. ## Verification - Passed: focused picker, avatar, sidebar, and chat page tests (36 tests across 6 files). - Regression proof: the new picker avatar test fails with the original icon rendering and passes with this fix. - Passed: `pnpm --filter @paperclipai/ui typecheck`. - Passed: `pnpm --filter @paperclipai/ui build`. - Passed: `pnpm check:token-gates`, `node scripts/check-maps.mjs`, and `git diff --check`. - Full local typecheck and build could not finish because this environment has no Rust `cargo` toolchain. - The full test run was stopped after concurrent validation exceeded the workspace memory limit. The first UI build and local server were killed. The UI build passed when run on its own. Focused tests passed before the full run. - Browser verification passed against a fresh local source-checkout instance with real API responses and embedded PostgreSQL. No agent runs were started. Chromium checked header and sidebar pickers, an uploaded custom image, role search, Enter selection, reload, and a 390-pixel mobile viewport. No page errors occurred. - Desktop, mobile, and sidebar screenshots were captured. They are not committed to the repository. - Previous head `9bf268c308e51113b0a10fb1314444cc99882b04`: all CI checks passed; Greptile was 5/5 with no outstanding findings. - Head `4e85eedd155ccf1624233009905d5ebfe8c3849b`: all 36 focused tests, UI typecheck/build, token gates, map checks and whitespace checks passed again after merging master. Fresh review gave 4/5 because this small fix added feature-map detail. - Current head `e13af2d5650e95ff552b1bfe392820c490eccf23`: removed all four added feature-map lines. The map matches the base version. Map checks and whitespace checks pass. The code and tests did not change. All 30 check runs are complete: 25 passed, 4 were skipped, and 1 was neutral. Build, typecheck, tests, all eight E2E shards, and both CI summary gates passed. The legacy commit status passed. Greptile gave 5/5 with no open findings. All review threads are resolved. The separate Paperclip review ended early with a neutral check; its prior map finding is fixed. ## Risks - Low risk. The change uses the existing avatar component and its image-error fallback. Picker rows now use the same avatar size as the conversation sidebar. ## Model Used - OpenAI Codex, GPT-6, with reasoning, repository editing, shell tools, and browser verification. The runtime does not expose a more specific model ID or context window size. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #123` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip --- ui/src/components/AgentChatPicker.test.tsx | 19 +++++++++++++++++++ ui/src/components/AgentChatPicker.tsx | 4 ++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/ui/src/components/AgentChatPicker.test.tsx b/ui/src/components/AgentChatPicker.test.tsx index 7c7abfd2697..0b1cf102061 100644 --- a/ui/src/components/AgentChatPicker.test.tsx +++ b/ui/src/components/AgentChatPicker.test.tsx @@ -3,6 +3,7 @@ import { act } from "react"; import { createRoot, type Root } from "react-dom/client"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import type { Agent } from "@paperclipai/shared"; +import { appearanceForPalette } from "@paperclipai/shared"; import { AgentChatPicker, type AgentChatPickerProps } from "./AgentChatPicker"; const agents = [ @@ -41,6 +42,24 @@ afterEach(async () => { }); describe("AgentChatPicker", () => { + it("shows saved custom avatars and default avatars in agent choices", async () => { + await render({ agents: [ + { ...agents[0], appearance: { ...appearanceForPalette("deep-tide"), customAvatarAssetId: "22222222-2222-4222-8222-222222222222" } }, + agents[1], + ] }); + const customImage = options()[0].querySelector("img"); + expect(customImage?.getAttribute("src")).toBe("/api/assets/22222222-2222-4222-8222-222222222222/content"); + expect(customImage?.getAttribute("width")).toBe("32"); + expect(options()[1].querySelector("img")?.getAttribute("src")).toMatch(/^\/api\/agent-avatars\/cap-v1\//); + }); + + it("lets a custom renderer replace the default avatar", async () => { + await render({ renderAgentIcon: agent => {agent.title} marker }); + expect(options()[0].textContent).toContain("Engineering Lead marker"); + expect(options()[1].textContent).toContain("Product Designer marker"); + expect(options().flatMap(option => [...option.querySelectorAll("img")])).toHaveLength(0); + }); + it("does not close a reopened picker when an earlier selection finishes", async () => { let finish!: () => void; await render({ onSelect: () => new Promise(resolve => { finish = resolve; }) }); diff --git a/ui/src/components/AgentChatPicker.tsx b/ui/src/components/AgentChatPicker.tsx index 1206d988eb9..6e3fc5a9334 100644 --- a/ui/src/components/AgentChatPicker.tsx +++ b/ui/src/components/AgentChatPicker.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState, type ReactNode } from "react"; import type { Agent } from "@paperclipai/shared"; -import { AgentIcon } from "@/components/AgentIconPicker"; +import { AgentAvatar } from "@/components/AgentAvatar"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"; @@ -97,7 +97,7 @@ function AgentChatPickerResults({ agents, onSelect, onComplete, loading, error, disabled={openingId !== null} className="gap-3 px-3 py-3" > - {renderAgentIcon ? renderAgentIcon(agent) : } + {renderAgentIcon ? renderAgentIcon(agent) : } {agent.name} {agent.title ?? agent.role}