feat: add tabbed interface with About and Tools tabs to server detail page

[peppescg]

Added tools definition in the detail page

Kapture.2026-02-11.at.19.17.52.mp4

[peppescg]

@claude succinct review

[claude]

Claude finished @peppescg's task in 57s —— View job

---

Code Review

• Read changed files and understand implementation
• Review code quality and adherence to guidelines
• Provide succinct feedback

---

Review Summary

Overall: Clean implementation with good adherence to project guidelines. A few minor suggestions for improvement.

Strengths:

• ✅ Proper TypeScript strict typing throughout (no any types)
• ✅ Client/Server component boundaries correctly applied ('use client' only where needed)
• ✅ Comprehensive test coverage for new components
• ✅ Zod schema validation for runtime safety
• ✅ Good UI patterns (empty states, sticky headers, responsive design)
• ✅ Follows existing project conventions

Suggestions:

1. src/lib/utils.ts:31 - Consider deduplicating tools if multiple transports provide the same tool:

   return Object.values(result.data).flatMap((t) => t.tool_definitions ?? []);
   // Could become:
   const allTools = Object.values(result.data).flatMap((t) => t.tool_definitions ?? []);
   return Array.from(new Map(allTools.map(tool => [tool.name, tool])).values());

2. src/app/catalog/[repoName]/[serverName]/[version]/components/server-tools-table.tsx:33 - Magic value max-h-[70vh] could be a CSS variable or constant for consistency.

3. Test coverage - Consider adding tests for:

   • getTools() and isVirtualMCPServer() edge cases (malformed metadata, missing fields)
   • Empty/null server objects

No blocking issues - ready to merge after considering the suggestions.

---

[Copilot]

Pull request overview

This PR adds a tabbed interface to the server detail page, enabling users to view both server information and available MCP tools. It introduces runtime validation using Zod to safely parse server metadata, extracts tool definitions from publisher-provided metadata, and displays them in a dedicated "Tools" tab.

Changes:

• Adds "About" and "Tools" tabs to the server detail page using a new ServerDetailTabs component
• Introduces Zod schemas for validating and parsing server metadata from the MCP registry
• Creates utility functions getTools() to extract tool definitions and refactors isVirtualMCPServer() to use the new schema-based parsing
• Adds comprehensive tests for the new tab component and utility functions
• Updates mock data to include an example server with tool definitions

Reviewed changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/lib/schemas/server-meta.ts	New Zod schemas for validating server metadata structure and tool definitions
src/lib/utils.ts	Refactored isVirtualMCPServer() and added getTools() to use schema-based parsing
src/lib/utils.test.ts	Updated tests to use structured test data and added tests for getTools()
src/app/catalog/[repoName]/[serverName]/[version]/page.tsx	Integrated tab component and extracted tools from server data
src/app/catalog/[repoName]/[serverName]/[version]/components/server-detail-tabs.tsx	New tabbed interface component for About/Tools tabs
src/app/catalog/[repoName]/[serverName]/[version]/components/server-tools-table.tsx	New table component for displaying MCP tools with empty state
src/app/catalog/[repoName]/[serverName]/[version]/components/tests/server-detail-tabs.test.tsx	Comprehensive tests for tab switching and tool display
src/app/catalog/components/servers-table.tsx	Adjusted padding for visual consistency across tables
src/mocks/fixtures/registry_v0_1_servers/get.ts	Added OSV server with tool definitions for testing
package.json, pnpm-lock.yaml	Added Zod v4 dependency

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[samuv]

⚙️