@@ -569,6 +569,54 @@ async function viewTool(toolId) {
569569 authHTML = `<p><strong>Authentication Type:</strong> None</p>` ;
570570 }
571571
572+ // Helper function to create annotation badges
573+ const renderAnnotations = ( annotations ) => {
574+ if ( ! annotations || Object . keys ( annotations ) . length === 0 ) {
575+ return '<p><strong>Annotations:</strong> <span class="text-gray-500">None</span></p>' ;
576+ }
577+
578+ const badges = [ ] ;
579+
580+ // Show title if present
581+ if ( annotations . title ) {
582+ 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>` ) ;
583+ }
584+
585+ // Show behavior hints with appropriate colors
586+ if ( annotations . readOnlyHint === true ) {
587+ 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>` ) ;
588+ }
589+
590+ if ( annotations . destructiveHint === true ) {
591+ 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>` ) ;
592+ }
593+
594+ if ( annotations . idempotentHint === true ) {
595+ 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>` ) ;
596+ }
597+
598+ if ( annotations . openWorldHint === true ) {
599+ 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>` ) ;
600+ }
601+
602+ // Show any other custom annotations
603+ Object . keys ( annotations ) . forEach ( key => {
604+ if ( ! [ 'title' , 'readOnlyHint' , 'destructiveHint' , 'idempotentHint' , 'openWorldHint' ] . includes ( key ) ) {
605+ const value = annotations [ key ] ;
606+ 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>` ) ;
607+ }
608+ } ) ;
609+
610+ return `
611+ <div>
612+ <strong>Annotations:</strong>
613+ <div class="mt-1 flex flex-wrap">
614+ ${ badges . join ( '' ) }
615+ </div>
616+ </div>
617+ ` ;
618+ } ;
619+
572620 document . getElementById ( "tool-details" ) . innerHTML = `
573621 <div class="space-y-2">
574622 <p><strong>Name:</strong> ${ tool . name } </p>
@@ -577,6 +625,7 @@ async function viewTool(toolId) {
577625 <p><strong>Description:</strong> ${ tool . description || "N/A" } </p>
578626 <p><strong>Request Type:</strong> ${ tool . requestType || "N/A" } </p>
579627 ${ authHTML }
628+ ${ renderAnnotations ( tool . annotations ) }
580629 <div>
581630 <strong>Headers:</strong>
582631 <pre class="mt-1 bg-gray-100 p-2 rounded overflow-auto">${ JSON . stringify ( tool . headers || { } , null , 2 ) } </pre>
@@ -665,10 +714,12 @@ async function editTool(toolId) {
665714
666715 const headersJson = JSON . stringify ( tool . headers || { } , null , 2 ) ;
667716 const schemaJson = JSON . stringify ( tool . inputSchema || { } , null , 2 ) ;
717+ const annotationsJson = JSON . stringify ( tool . annotations || { } , null , 2 ) ;
668718
669719 // Update the code editor textareas.
670720 document . getElementById ( "edit-tool-headers" ) . value = headersJson ;
671721 document . getElementById ( "edit-tool-schema" ) . value = schemaJson ;
722+ document . getElementById ( "edit-tool-annotations" ) . value = annotationsJson ;
672723 if ( window . editToolHeadersEditor ) {
673724 window . editToolHeadersEditor . setValue ( headersJson ) ;
674725 window . editToolHeadersEditor . refresh ( ) ;
0 commit comments