Astra MCP Server

import { Tool } from '@/lib/astraClient'; interface ToolListProps { tools: Tool[]; selectedTool: Tool | null; onSelectTool: (tool: Tool) => void; onNewTool: () => void; } export default function ToolList({ tools, selectedTool, onSelectTool, onNewTool }: ToolListProps) { return ( <div className="w-80 border-r border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 h-screen overflow-y-auto"> <div className="p-4 border-b border-gray-300 dark:border-gray-700"> <div className="flex justify-between items-center mb-2"> <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">Tools</h2> </div> <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{tools.length} tool{tools.length !== 1 ? 's' : ''}</p> <button onClick={onNewTool} className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm font-medium" > + New Tool </button> </div> <div className="p-2"> {tools.length === 0 ? ( <div className="p-4 text-center text-gray-500 dark:text-gray-400"> No tools found </div> ) : ( <div className="space-y-1"> {tools.map((tool) => ( <button key={tool._id || tool.name} onClick={() => onSelectTool(tool)} className={`w-full text-left p-3 rounded-lg transition-colors ${ selectedTool?._id === tool._id || selectedTool?.name === tool.name ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100' : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700' } ${tool.enabled === false ? 'opacity-60' : ''}`} > <div className="flex items-center justify-between"> <div className="font-medium">{tool.name}</div> {tool.enabled === false && ( <span className="text-xs px-2 py-0.5 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300"> Disabled </span> )} </div> {tool.description && ( <div className="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-2"> {tool.description} </div> )} {tool.tags && tool.tags.length > 0 && ( <div className="flex flex-wrap gap-1 mt-2"> {tool.tags.map((tag, idx) => ( <span key={idx} className="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300" > {tag} </span> ))} </div> )} </button> ))} </div> )} </div> </div> ); }