@@ -568,6 +568,54 @@ async function viewTool(toolId) {
568568 authHTML = `<p><strong>Authentication Type:</strong> None</p>` ;
569569 }
570570
571+ // Helper function to create annotation badges
572+ const renderAnnotations = ( annotations ) => {
573+ if ( ! annotations || Object . keys ( annotations ) . length === 0 ) {
574+ return '<p><strong>Annotations:</strong> <span class="text-gray-500">None</span></p>' ;
575+ }
576+
577+ const badges = [ ] ;
578+
579+ // Show title if present
580+ if ( annotations . title ) {
581+ badges . push ( `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mr-1 mb-1">${ annotations . title } </span>` ) ;
582+ }
583+
584+ // Show behavior hints with appropriate colors
585+ if ( annotations . readOnlyHint === true ) {
586+ badges . push ( `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-1 mb-1">📖 Read-Only</span>` ) ;
587+ }
588+
589+ if ( annotations . destructiveHint === true ) {
590+ badges . push ( `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 mr-1 mb-1">⚠️ Destructive</span>` ) ;
591+ }
592+
593+ if ( annotations . idempotentHint === true ) {
594+ badges . push ( `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 mr-1 mb-1">🔄 Idempotent</span>` ) ;
595+ }
596+
597+ if ( annotations . openWorldHint === true ) {
598+ badges . push ( `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 mr-1 mb-1">🌐 External Access</span>` ) ;
599+ }
600+
601+ // Show any other custom annotations
602+ Object . keys ( annotations ) . forEach ( key => {
603+ if ( ! [ 'title' , 'readOnlyHint' , 'destructiveHint' , 'idempotentHint' , 'openWorldHint' ] . includes ( key ) ) {
604+ const value = annotations [ key ] ;
605+ badges . push ( `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mr-1 mb-1">${ key } : ${ value } </span>` ) ;
606+ }
607+ } ) ;
608+
609+ return `
610+ <div>
611+ <strong>Annotations:</strong>
612+ <div class="mt-1 flex flex-wrap">
613+ ${ badges . join ( '' ) }
614+ </div>
615+ </div>
616+ ` ;
617+ } ;
618+
571619 document . getElementById ( "tool-details" ) . innerHTML = `
572620 <div class="space-y-2 dark:bg-gray-900 dark:text-gray-100">
573621 <p><strong>Name:</strong> ${ tool . name } </p>
@@ -576,6 +624,7 @@ async function viewTool(toolId) {
576624 <p><strong>Description:</strong> ${ tool . description || "N/A" } </p>
577625 <p><strong>Request Type:</strong> ${ tool . requestType || "N/A" } </p>
578626 ${ authHTML }
627+ ${ renderAnnotations ( tool . annotations ) }
579628 <div>
580629 <strong>Headers:</strong>
581630 <pre class="mt-1 bg-gray-100 p-2 rounded dark:bg-gray-800 dark:text-gray-100">${ JSON . stringify ( tool . headers || { } , null , 2 ) } </pre>
@@ -717,10 +766,12 @@ async function editTool(toolId) {
717766
718767 const headersJson = JSON . stringify ( tool . headers || { } , null , 2 ) ;
719768 const schemaJson = JSON . stringify ( tool . inputSchema || { } , null , 2 ) ;
769+ const annotationsJson = JSON . stringify ( tool . annotations || { } , null , 2 ) ;
720770
721771 // Update the code editor textareas.
722772 document . getElementById ( "edit-tool-headers" ) . value = headersJson ;
723773 document . getElementById ( "edit-tool-schema" ) . value = schemaJson ;
774+ document . getElementById ( "edit-tool-annotations" ) . value = annotationsJson ;
724775 if ( window . editToolHeadersEditor ) {
725776 window . editToolHeadersEditor . setValue ( headersJson ) ;
726777 window . editToolHeadersEditor . refresh ( ) ;
0 commit comments