feat(agents): add category and display fields to AgentTypeForm

Add new "Category & Display" card in Basic Info tab with:
- Category dropdown to select agent category
- Sort order input for display ordering
- Icon text input with Lucide icon name
- Color picker with hex input and visual color selector
- Typical tasks tag input for agent capabilities
- Collaboration hints tag input for agent relationships

Updates include:
- TAB_FIELD_MAPPING with new field mappings
- State and handlers for typical_tasks and collaboration_hints
- Fix tests to use getAllByRole for multiple Add buttons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-06 16:21:28 +01:00
parent 5717bffd63
commit 93cc37224c
2 changed files with 242 additions and 6 deletions

View File

@@ -199,7 +199,8 @@ describe('AgentTypeForm', () => {
const expertiseInput = screen.getByPlaceholderText(/e.g., system design/i);
await user.type(expertiseInput, 'new skill');
await user.click(screen.getByRole('button', { name: /^add$/i }));
// Click the first "Add" button (for expertise)
await user.click(screen.getAllByRole('button', { name: /^add$/i })[0]);
expect(screen.getByText('new skill')).toBeInTheDocument();
});
@@ -461,7 +462,8 @@ describe('AgentTypeForm', () => {
// Agent type already has 'system design'
const expertiseInput = screen.getByPlaceholderText(/e.g., system design/i);
await user.type(expertiseInput, 'system design');
await user.click(screen.getByRole('button', { name: /^add$/i }));
// Click the first "Add" button (for expertise)
await user.click(screen.getAllByRole('button', { name: /^add$/i })[0]);
// Should still only have one 'system design' badge
const badges = screen.getAllByText('system design');
@@ -472,7 +474,8 @@ describe('AgentTypeForm', () => {
const user = userEvent.setup();
render(<AgentTypeForm {...defaultProps} />);
const addButton = screen.getByRole('button', { name: /^add$/i });
// Click the first "Add" button (for expertise)
const addButton = screen.getAllByRole('button', { name: /^add$/i })[0];
await user.click(addButton);
// No badges should be added
@@ -485,7 +488,8 @@ describe('AgentTypeForm', () => {
const expertiseInput = screen.getByPlaceholderText(/e.g., system design/i);
await user.type(expertiseInput, 'API Design');
await user.click(screen.getByRole('button', { name: /^add$/i }));
// Click the first "Add" button (for expertise)
await user.click(screen.getAllByRole('button', { name: /^add$/i })[0]);
expect(screen.getByText('api design')).toBeInTheDocument();
});
@@ -496,7 +500,8 @@ describe('AgentTypeForm', () => {
const expertiseInput = screen.getByPlaceholderText(/e.g., system design/i);
await user.type(expertiseInput, ' testing ');
await user.click(screen.getByRole('button', { name: /^add$/i }));
// Click the first "Add" button (for expertise)
await user.click(screen.getAllByRole('button', { name: /^add$/i })[0]);
expect(screen.getByText('testing')).toBeInTheDocument();
});
@@ -509,7 +514,8 @@ describe('AgentTypeForm', () => {
/e.g., system design/i
) as HTMLInputElement;
await user.type(expertiseInput, 'new skill');
await user.click(screen.getByRole('button', { name: /^add$/i }));
// Click the first "Add" button (for expertise)
await user.click(screen.getAllByRole('button', { name: /^add$/i })[0]);
expect(expertiseInput.value).toBe('');
});