Prd 5746

[sarah-inkeep]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
agents-api	Ready	Preview, Comment	Jan 29, 2026 2:33am
agents-docs	Ready	Preview, Comment	Jan 29, 2026 2:33am
agents-manage-ui	Ready	Preview, Comment	Jan 29, 2026 2:33am

[changeset-bot]

🦋 Changeset detected

Latest commit: 8e759c5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@inkeep/agents-manage-ui	Patch
@inkeep/agents-api	Patch
@inkeep/agents-cli	Patch
@inkeep/agents-core	Patch
@inkeep/agents-manage-mcp	Patch
@inkeep/agents-mcp	Patch
@inkeep/agents-sdk	Patch
@inkeep/ai-sdk-provider	Patch
@inkeep/create-agents	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[claude]

Claude finished @sarah-inkeep's task —— View job

---

TypeScript Staff Engineer PR Review

I've conducted a comprehensive review of this MCP servers UI refactoring PR. This is a well-structured refactor that significantly improves code organization and user experience.

Todo List:

• Read repository guidelines and understand codebase patterns
• Analyze the purpose and scope of the PR changes
• Review each changed file for code quality and architecture
• Evaluate system-level considerations and customer impact
• Provide comprehensive feedback and recommendations

---

Summary

This PR refactors the MCP (Model Context Protocol) servers UI to improve code modularity, reduce duplication, and enhance the user experience for tool management. The changes extract reusable components and add sophisticated tool comparison functionality.

Net Impact: 581 additions / 590 deletions - This is a true refactor with minimal net code increase while significantly improving maintainability.

---

Key Strengths

1. Excellent Component Extraction

The extraction of PropertyDisplay, ToolSelectorItem, and ToolOverrideDiff follows React best practices and creates reusable, focused components.

2. Significant Code Deduplication

• available-tools-card.tsx: 185 → 18 lines (-90%)
• active-tools-selector.tsx: 170 → 29 lines (-83%)
• tool-override-dialog.tsx: 234 → 157 lines (-33%)

This dramatic reduction indicates excellent refactoring work.

3. Enhanced UX with Tool Comparison

The new ToolOverrideDiff component provides side-by-side comparison of original vs modified tools - a sophisticated feature that improves user confidence when making overrides.

---

Areas for Consideration

🔴 Critical - Missing Changeset

This PR affects agents-manage-ui, which is a published package, but has no changeset. According to the repository guidelines:

pnpm bump patch --pkg agents-manage-ui "Refactor MCP servers UI components and add tool comparison"

🟡 Code Quality Issues

1. Incorrect React Directive (tool-selector-item.tsx:45)

'use memo'; // ❌ Invalid directive

Fix: Remove this line entirely or implement actual memoization:

export const ToolSelectorItem = memo(function ToolSelectorItem({...}) {
  // component logic
});

2. Type Safety in PropertyDisplay (property-display.tsx:27)

const indentClass = level > 0 ? `ml-${Math.min(level * 4, 8)}` : '';

Issue: Dynamic Tailwind classes may not be included in the bundle.
Fix: Use predefined classes or CSS-in-JS:

const indentClass = level > 0 ? {marginLeft: `${Math.min(level * 4, 8) * 0.25}rem`} : {};
// Then use style={indentClass} instead of className

3. Schema Validation Logic (tool-override-dialog.tsx:54-73)

The schema validation has a complex refine function that could be extracted for better testability:

const isValidToolSchema = (val: string): boolean => {
  if (!val.trim()) return true;
  try {
    const parsed = JSON.parse(val);
    if (typeof parsed !== 'object' || parsed === null) return false;
    if (parsed.type && !['string', 'number', 'boolean', 'object', 'array'].includes(parsed.type)) {
      return false;
    }
    return true;
  } catch {
    return false;
  }
};

🟡 Architecture Considerations

1. Type Imports Consistency

Some files use import type while others use regular imports for types. The repository guidelines specify using type imports consistently.

2. Error Boundary Considerations

The new components, especially ToolOverrideDiff, handle complex data transformations. Consider adding error boundaries or more robust error handling for malformed schemas.

🟢 Minor Improvements

1. Performance - Memoization Opportunities

The ToolSelectorItem component could benefit from proper memoization since it's rendered in lists:

export const ToolSelectorItem = memo(function ToolSelectorItem(props: ToolSelectorItemProps) {
  // existing logic
});

2. Accessibility

Consider adding ARIA labels to the comparison dialog sections for better screen reader support.

---

System-Level Considerations

✅ Positive Impact

1. Maintainability: Extracting shared components reduces future maintenance burden
2. Testability: Smaller, focused components are easier to unit test
3. User Experience: Tool comparison feature significantly improves usability
4. Code Organization: Better separation of concerns

⚠️ Potential Concerns

1. Bundle Size: New comparison dialog adds complexity - monitor bundle size impact
2. Type Safety: Dynamic Tailwind classes may not be included in production builds
3. Testing Gap: No tests added for the new components (required by repo guidelines)

---

Recommendations

Immediate Actions (Before Merge)

1. Add changeset: pnpm bump patch --pkg agents-manage-ui "Refactor MCP servers UI components and add tool comparison"
2. Fix React directive: Remove 'use memo'; from tool-selector-item.tsx:45
3. Fix Tailwind classes: Replace dynamic ml-${level} with static alternatives

Follow-up Work

1. Add unit tests for the new components (PropertyDisplay, ToolSelectorItem, ToolOverrideDiff)
2. Consider memoization for list-rendered components
3. Add error boundaries for schema parsing logic

Long-term Considerations

1. Design system: These components show patterns that could be generalized for other tool management UIs
2. Performance monitoring: Track bundle size impact of the new comparison functionality

---

Verdict

This is a high-quality refactor that significantly improves code organization and user experience. The component extraction is well-executed, and the tool comparison feature is a valuable addition.

The critical issues (missing changeset, React directive) are minor fixes. Once addressed, this PR represents excellent engineering work that advances the codebase's maintainability and user experience.

Recommended Action: ✅ Approve with minor fixes