ToolsTab: truncate tool descriptions for nicer rendering

Author: ksinder

client/src/components/ToolsTab.tsx

@@ -95,7 +95,7 @@ const ToolsTab = ({
           renderItem={(tool) => (
             <div className="flex flex-col items-start">
               <span className="flex-1">{tool.name}</span>
-              <span className="text-sm text-gray-500 text-left">
+              <span className="text-sm text-gray-500 text-left line-clamp-3">
                 {tool.description}
               </span>
             </div>
@@ -114,9 +114,12 @@ const ToolsTab = ({
           <div className="p-4">
             {selectedTool ? (
               <div className="space-y-4">
-                <p className="text-sm text-gray-600 dark:text-gray-400">
+                <div className="text-sm font-medium">Description</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap max-h-48 overflow-y-auto">
                   {selectedTool.description}
-                </p>
+                </div>
+                <hr className="border-t border-gray-300 my-4" />
+                <div className="text-sm font-medium">Inputs & Outputs</div>
                 {Object.entries(selectedTool.inputSchema.properties ?? []).map(
                   ([key, value]) => {
                     const prop = normalizeUnionType(value as JsonSchemaType);