Improve Agent Dropdown in Logs UI to Display Agent Names

[jkbrooks]

Issue Title: Improve Agent Dropdown in Logs UI to Display Agent Names

Describe the Issue

In the /logs UI, the "Select Agent" dropdown currently lists agents using their IDs (UUIDs). This makes it difficult for users to quickly identify and select the agent they are interested in, as Agent IDs are not user-friendly and recognizable.

Proposed Solution

Update the "Select Agent" dropdown in the /logs UI to display Agent Names instead of Agent IDs. The dropdown should be modified to fetch and display the name property from the agent data instead of the id.

Expected Outcome

• Users can easily identify and select agents in the /logs UI dropdown by their names.
• Improved user experience and easier navigation in the logs section.

Type

Feature Enhancement (or UI Improvement)

Labels (Optional)

• UI
• Enhancement
• Good First Issue (as it's a relatively simple UI task)

Detailed Implementation Checklist

To implement this feature, a developer should follow these steps:

• 1. Identify the Relevant UI Component:

  • Locate the React component responsible for rendering the "Select Agent" dropdown in the /ui/src/components/ui/logging/index.tsx file.
  • Identify the code section that fetches and renders the list of agents for the dropdown.

• 2. Review Current Data Fetching Logic:

  • Examine the data fetching logic within the component or its related hooks (likely using react-query based on the codebase structure).
  • Determine the API endpoint being called to fetch agent data (likely /api/agents or /agents).
  • Inspect the structure of the data returned by the API. Currently, it likely only includes Agent IDs.

• 3. Update API Endpoint (If Necessary):

  • Check API Response: Verify if the /api/agents endpoint already returns agent names in its response. If it does, proceed to step 4.
  • Modify API Controller (If Needed): If the API currently only returns Agent IDs, modify the relevant controller in the backend (clients/client-direct/src/api.ts within the get("/agents") route handler) to include the name property from the agent.character object in the response. Ensure the API response includes both id and name for each agent.

• 4. Modify the UI Component to Display Agent Names:

  • Update Dropdown Rendering: Modify the <select> element in ui/src/components/ui/logging/index.tsx to use agent.name instead of agent.id for display in the dropdown options. The value of the <option> should remain agent.id to ensure correct selection.

  // Example code snippet in ui/src/components/ui/logging/index.tsx (approximate line)
  <select
    className="..."
    value={selectedAgent || (uniqueAgents.length > 0 ? uniqueAgents[0] : "")}
    onChange={(e) => setSelectedAgent(e.target.value)}
  >
    <option value="" disabled className="text-gray-400">
      Select an Agent
    </option>
    {uniqueAgents.map((agent, index) => (
      // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
      <option key={index} value={agent.id} className="text-gray-900">
  -     {agent.id} {/* Original: Displaying Agent ID */}
  +     {agent.name} {/* Updated: Displaying Agent Name */}
      </option>
    ))}
  </select>

• 5. Update the Agent Type Definition (If Necessary):

  • If the API response is modified to include name, ensure the TypeScript type definition for the agent data (likely in ui/src/types/index.ts or a similar file) is updated to include the name property:

  // Example type definition (adjust path if needed)
  // ui/src/types/index.ts
  export interface Agent {
      id: string;
  +   name: string; // Add name property
      // ... other properties
  }

• 6. Test the Changes:

  • Run the UI locally (pnpm dev in the ui directory).
  • Navigate to the /logs URL.
  • Verify that the "Select Agent" dropdown now displays Agent Names instead of IDs.
  • Ensure that selecting an agent still works correctly and filters logs appropriately.
  • Check for any console errors in the browser's developer tools.

• 7. Commit and Create Pull Request:

  • Commit the code changes with a descriptive commit message (e.g., "feat(ui): Display Agent Names in Logs Dropdown").
  • Create a pull request to merge the changes into the main branch.

Additional Notes for Developer:

• Ensure to test the changes thoroughly in a local development environment before submitting a pull request.
• If modifying the API, ensure backward compatibility or clearly document any API changes.
• Consider adding unit tests for the UI component to ensure the dropdown rendering and data binding logic are working correctly.

By following these steps, a developer should be able to effectively update the Agent dropdown in the Logs UI to display Agent Names, improving the user experience and making the logs section more user-friendly.