Update Agent Selector

[JamesonRGrieve]

As a(n) User I want an improved agent selector interface so that I can easily distinguish between and select different types of agents.

Executive Summary

The current agent selector component needs several UI/UX improvements to properly display agent information, handle agent selection, and differentiate between team and personal agents. This includes fixing selection behavior, implementing proper categorization, and enhancing the visual display of agent images.

Acceptance Criteria

• Agent selection functionality:

  • Selected agent properly updates in UI when a different agent is chosen
  • Selection state persists correctly
  • Visual feedback indicates current selection

• Agent categorization:

  • Implement "Your Agents" section for user-owned agents (user_id present)
  • Implement team-specific sections labeled "$teamName Agents" for team agents (team_id present)
  • Proper visual separation between categories
  • Correct sorting of agents into respective categories based on user_id/team_id

• Agent image display:

  • Show agent images in compact format beside each agent in the list
  • Display selected agent's image in top left corner when available
  • Implement fallback to default icon when image_url is undefined
  • Ensure proper image sizing and formatting

In-Scope Files / Directories / Systems

Not Provided

Out-of-Scope Files / Directories / Systems

Not Provided

Issue Dependencies

N/A

Other Dependencies

• Agent API endpoint must return image_url, user_id, and team_id fields
• Default agent icon asset must be available

Description

The agent selector component has multiple UI/UX issues affecting agent selection, categorization, and image display functionality.

Pre-requisite

• Agents must exist in the system
• Agents must have either team_id or user_id (mutually exclusive)
• Some agents should have image_url defined

Steps to Reproduce

1. Navigate to any page with the agent selector component
2. Click on a different agent in the selector dropdown
3. Observe the selected agent display
4. Check the categorization of agents in the dropdown
5. Look for agent images in both the list and selected agent display

Actual Behavior

• Selected agent display does not update when a new agent is chosen from the dropdown
• All agents are shown in a single list without proper categorization between team and personal agents
• Agent images are not displayed beside each agent in the list
• When an agent has an image_url, it is not shown in the top left of the selector

Expected Behavior

• Selecting a different agent should immediately update the display to show the newly selected agent
• Agents should be properly categorized:
  • Personal agents under "Your Agents" heading
  • Team agents under their respective "$teamName Agents" headings
• Agent images should be displayed:
  • Small image beside each agent in the dropdown list
  • Selected agent's image in top left corner
  • Default icon should be shown when image_url is not defined

Impact

• Users cannot effectively switch between agents
• Difficult to distinguish between personal and team agents
• Poor visual representation of agents reduces user experience
• Missing visual cues make agent identification more difficult

Additional Context

The agent data structure includes:

• user_id or team_id (mutually exclusive)
• image_url (optional)
• name
• other agent properties

Screenshot / Media