feat: add predefined agents library with search and filtering

[baryhuang]

Summary

Implemented a comprehensive predefined agents library that allows users to easily discover and add specialized AI agents with advanced filtering capabilities.

Key Features

• Created 12 specialized agents across 7 categories
• Advanced search and filtering by category, difficulty, and tags
• "Add from Library" flow integrated into Settings modal
• Default agents.claudecode.run endpoint integration
• Rich agent metadata with capabilities, prerequisites, and examples
• Responsive modal design with dark mode support

Technical Implementation

• Enhanced agent data structure with specialized metadata
• Comprehensive filtering and search utilities
• Modal component with sidebar filters and agent grid
• Seamless integration with existing agent configuration system

Closes #7

🤖 Generated with Claude Code

[claude]

Claude finished @baryhuang's task —— View job

---

Code Review Complete ✅

I've thoroughly reviewed the predefined agents library implementation. Here's my detailed feedback:

Review Checklist:

• Read and analyze all changed files
• Review code quality and best practices
• Check for potential bugs or issues
• Assess performance considerations
• Identify security concerns
• Evaluate test coverage
• Provide constructive feedback

---

🔍 Code Quality & Best Practices

✅ Strengths

• Excellent TypeScript typing: Well-defined interfaces with comprehensive agent metadata
• Clean component architecture: Proper separation of concerns between modal, config, and data layers
• Responsive design: Good mobile and desktop support with grid layouts
• Accessibility: Proper semantic HTML, keyboard navigation, and ARIA attributes
• Code organization: Logical file structure and clear naming conventions

⚠️ Areas for Improvement

1. Hardcoded Values in predefinedAgents.ts

• All agents use the same default endpoint http://agents.claudecode.run
• Working directories are hardcoded to /tmp/* paths
• Consider making these configurable or environment-specific

2. Search Performance (lines 321-336 in predefinedAgents.ts)

// Current implementation does case-insensitive search on every filter
const matchesQuery = 
  agent.name.toLowerCase().includes(queryLower) ||
  agent.description.toLowerCase().includes(queryLower) ||
  // ... multiple toLowerCase() calls

For larger datasets, consider memoizing lowercase strings or using a search library.

3. Tag Filtering Logic (lines 332-333)

const matchesTags = !tags || tags.length === 0 || 
  tags.some(tag => agent.tags.includes(tag.toLowerCase()));

This uses some() which means ANY tag match shows the agent. Consider if this should be ALL tags must match for more precise filtering.

---

🐛 Potential Issues

1. Modal State Management (PredefinedAgentsModal.tsx:24-25)

const [customEndpoint, setCustomEndpoint] = useState("");
const [selectedAgent, setSelectedAgent] = useState<PredefinedAgent | null>(null);

Issue: These states aren't reset when the modal closes, potentially causing stale data.
Fix: Reset states in useEffect when isOpen changes.

2. Input Validation (PredefinedAgentsModal.tsx:318-322)

<input
  type="text"
  value={customEndpoint}
  onChange={(e) => setCustomEndpoint(e.target.value)}
  placeholder={selectedAgent.defaultApiEndpoint}

Issue: No URL validation for custom endpoints
Risk: Invalid URLs could cause runtime errors
Fix: Add URL validation before allowing submission

3. Array Bounds Safety (PredefinedAgentsModal.tsx:180)

{popularTags.slice(0, 12).map(tag => (

Issue: No check if popularTags is empty before slicing
Risk: Could cause issues if getPopularTags() returns undefined

---

🚀 Performance Considerations

1. Expensive Re-computations

Issue: Several useMemo hooks recalculate on every filter change:

• filteredAgents (lines 29-48)
• categoryStats (lines 50-56)
• difficultyStats (lines 58-64)

Optimization: Consider memoizing these more aggressively or moving stats calculation to module level.

2. Tag Display Logic (lines 384-398)

{agent.tags.slice(0, 3).map(tag => (
  // render tag
))}
{agent.tags.length > 3 && (
  <span>+{agent.tags.length - 3}</span>
)}

Performance: Good - efficiently shows only first 3 tags + count

---

🔒 Security Concerns

1. Endpoint Configuration

Risk: Custom API endpoints accept any URL without validation
Impact: Could lead to SSRF attacks or connection to malicious endpoints
Recommendation: Add URL allowlist or validation patterns

2. XSS Prevention

Status: ✅ Good - No dangerouslySetInnerHTML usage
Note: All dynamic content is properly escaped through React

---

🧪 Test Coverage

Missing Tests

The implementation lacks comprehensive test coverage. Recommended test areas:

1. Unit Tests for Utility Functions:

   • searchAgents() with various query combinations
   • getPopularTags() tag counting logic
   • convertPredefinedToAgent() transformation

2. Component Tests:

   • Modal open/close behavior
   • Filter state management
   • Agent selection flow

3. Integration Tests:

   • End-to-end agent addition from library
   • Search and filter interactions

---

📋 Minor Improvements

1. Magic Numbers

// Line 180: Should be a constant
{popularTags.slice(0, 12).map(tag => (

// Line 385: Should be a constant  
{agent.tags.slice(0, 3).map(tag => (

2. Error Handling

Add try-catch blocks around agent conversion and add operations to handle malformed data gracefully.

3. Loading States

Consider adding loading indicators for the agent library modal to improve UX.

---

🎯 Overall Assessment

This is a well-implemented feature with good architecture and user experience. The code quality is high with proper TypeScript usage and React patterns. The main areas for improvement are around input validation, performance optimization for larger datasets, and test coverage.

Recommendation: ✅ Approve with minor improvements suggested

The feature successfully addresses the requirements and provides a solid foundation for agent discovery and management.

[baryhuang]

@claude why this change? const DEFAULT_AGENTS: Agent[] = [
{
id: "orchestrator",
name: "Orchestrator Agent",
name: "Claude Code Orchestrator",

[claude]

Claude finished @baryhuang's task —— View job

---

Analysis Tasks

• Read the relevant files to find the duplicate name field
• Understand the code structure and identify if this is intentional or a bug
• Provide explanation of the change

---

Explanation

Good catch! Looking at your question, it seems like you might have seen this pattern in your editor or somewhere:

const DEFAULT_AGENTS: Agent[] = [
  {
    id: "orchestrator",
    name: "Orchestrator Agent",
    name: "Claude Code Orchestrator",

However, this is NOT what's actually in the code. Looking at the actual git diff, here's what really changed:

const DEFAULT_AGENTS: Agent[] = [
  {
    id: "orchestrator",
-    name: "Orchestrator Agent",
+    name: "Claude Code Orchestrator",
    workingDirectory: "/tmp/orchestrator",
    color: "bg-gradient-to-r from-blue-500 to-purple-500",
-    description: "Intelligent orchestrator that coordinates multi-agent workflows",
+    description: "Intelligent orchestrator that coordinates multi-agent workflows and manages complex projects",
-    apiEndpoint: "https://api.claudecode.run",
+    apiEndpoint: "http://agents.claudecode.run",
    isOrchestrator: true
  }
];

The change was simply:

• Name updated: "Orchestrator Agent" → "Claude Code Orchestrator"
• Description enhanced: Added "and manages complex projects"
• API endpoint changed: https://api.claudecode.run → http://agents.claudecode.run

What you might have seen:

• A diff view that shows both the old and new name field side by side
• A merge conflict marker during development
• An IDE that temporarily showed both versions during editing

The final code only has one name field with the value "Claude Code Orchestrator" as you can see in the current file at line 20.

---