diff --git a/.changeset/20260817145404-agents-library-row-icons.md b/.changeset/20260817145404-agents-library-row-icons.md new file mode 100644 index 00000000..b482fd9b --- /dev/null +++ b/.changeset/20260817145404-agents-library-row-icons.md @@ -0,0 +1,5 @@ +--- +'@truefoundry/trueforge-ui': patch +--- + +Agents Library rows: show connectors before skills, use the composer's lightbulb icon for skills, and reveal the connector/skill names in a tooltip on hover. diff --git a/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx b/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx index 93c051ce..e0a1755d 100644 --- a/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx +++ b/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx @@ -11,6 +11,7 @@ import { useSearchAgentsList } from './lib/useSearchAgentsList.js'; import { CenteredModal } from './primitives/CenteredModal.js'; import SearchInput from './primitives/SearchInput.js'; import { Skeleton } from './primitives/Skeleton.js'; +import { Tooltip } from './primitives/Tooltip.js'; export type AgentsLibraryProps = { open: boolean; @@ -36,6 +37,10 @@ function AgentLibraryRow({ agent, showEdit, onTry, onEdit }: AgentLibraryRowProp const modelName = spec?.model.name; const skillsCount = spec?.skills?.length ?? 0; const mcpCount = spec?.mcpServers?.length ?? 0; + const skillNames = (spec?.skills ?? []).map(s => (s as { name?: string }).name).filter(Boolean); + const mcpNames = (spec?.mcpServers ?? []).map(m => (m as { name?: string }).name).filter(Boolean); + const connectorsTitle = mcpNames.length ? `Connectors: ${mcpNames.join(', ')}` : `${mcpCount} connectors`; + const skillsTitle = skillNames.length ? `Skills: ${skillNames.join(', ')}` : `${skillsCount} skills`; return (
{displayModelLabel(modelName)} ) : null} - - - {skillsCount} - - - - {mcpCount} - + + + + {mcpCount} + + + + + + {skillsCount} + + ) : null} diff --git a/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx b/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx index 1f121d50..e82a6ccd 100644 --- a/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx +++ b/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx @@ -152,8 +152,8 @@ describe('AgentsLibrary', () => { await waitFor(() => { expect(screen.getByText('gpt-5-5')).toBeInTheDocument(); }); - expect(screen.getByLabelText('1 skills')).toBeInTheDocument(); - expect(screen.getByLabelText('1 MCP servers')).toBeInTheDocument(); + expect(screen.getByLabelText('Connectors: github')).toBeInTheDocument(); + expect(screen.getByLabelText('Skills: paint')).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Try agent bare' })).toBeInTheDocument(); expect(screen.queryByLabelText('0 skills')).not.toBeInTheDocument(); });