Name: ${tool.name}

@@ -576,13 +623,14 @@ async function viewTool(toolId) {

Description: ${tool.description || "N/A"}

Request Type: ${tool.requestType || "N/A"}

${authHTML} + ${renderAnnotations(tool.annotations)}

Headers: -

${JSON.stringify(tool.headers || {}, null, 2)}

${JSON.stringify(tool.headers || {}, null, 2)}

Input Schema: -

${JSON.stringify(tool.inputSchema || {}, null, 2)}

${JSON.stringify(tool.inputSchema || {}, null, 2)}

Metrics: @@ -607,6 +655,54 @@ async function viewTool(toolId) { } } +function protectInputPrefix(inputElement, protectedText) { + let lastValidValue = protectedText; + + // Set initial value + inputElement.value = protectedText; + + // Listen for input events + inputElement.addEventListener('input', function(e) { + const currentValue = e.target.value; + + // Check if protected text is still intact + if (!currentValue.startsWith(protectedText)) { + // Restore the protected text + e.target.value = lastValidValue; + // Move cursor to end of protected text + e.target.setSelectionRange(protectedText.length, protectedText.length); + } else { + // Save valid state + lastValidValue = currentValue; + } + }); + + // Prevent selection/editing of protected portion + inputElement.addEventListener('keydown', function(e) { + const start = e.target.selectionStart; + const end = e.target.selectionEnd; + + // Block edits that would affect protected text + if (start < protectedText.length) { + // Allow navigation keys + const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Tab']; + if (!allowedKeys.includes(e.key)) { + e.preventDefault(); + // Move cursor to end of protected text + e.target.setSelectionRange(protectedText.length, protectedText.length); + } + } + }); + + // Handle paste events + inputElement.addEventListener('paste', function(e) { + const start = e.target.selectionStart; + if (start < protectedText.length) { + e.preventDefault(); + } + }); +} + /** * Fetches tool details from the backend and populates the edit modal form, * including Request Type and Authentication fields, so that they are pre-filled for editing. @@ -621,6 +717,11 @@ async function editTool(toolId) { // Set form action and populate basic fields. document.getElementById("edit-tool-form").action = `${window.ROOT_PATH}/admin/tools/${toolId}/edit`; + // const toolNameInput = document.getElementById("edit-tool-name"); + // const protectedPrefix = tool.gatewaySlug + `${window.GATEWAY_TOOL_NAME_SEPARATOR}`; + // protectInputPrefix(toolNameInput, protectedPrefix); + // toolNameInput.value = protectedPrefix + (tool.name.startsWith(protectedPrefix) ? + // tool.name.substring(protectedPrefix.length) : tool.name); document.getElementById("edit-tool-name").value = tool.name; document.getElementById("edit-tool-url").value = tool.url; document.getElementById("edit-tool-description").value = @@ -664,10 +765,12 @@ async function editTool(toolId) { const headersJson = JSON.stringify(tool.headers || {}, null, 2); const schemaJson = JSON.stringify(tool.inputSchema || {}, null, 2); + const annotationsJson = JSON.stringify(tool.annotations || {}, null, 2); // Update the code editor textareas. document.getElementById("edit-tool-headers").value = headersJson; document.getElementById("edit-tool-schema").value = schemaJson; + document.getElementById("edit-tool-annotations").value = annotationsJson; if (window.editToolHeadersEditor) { window.editToolHeadersEditor.setValue(headersJson); window.editToolHeadersEditor.refresh(); @@ -903,28 +1006,47 @@ async function viewGateway(gatewayId) { authHTML = `

Authentication Type: None

`; } - document.getElementById("gateway-details").innerHTML = ` -

Name: ${gateway.name}

URL: ${gateway.url}

Description: ${gateway.description || "N/A"}

Transport: - ${gateway.transport === "STREAMABLEHTTP" ? "Streamable HTTP" : - gateway.transport === "SSE" ? "SSE" : "N/A"} -

Status: - - ${gateway.isActive ? "Active" : "Inactive"} - -

Last Seen: ${gateway.lastSeen || "Never"}

- ${authHTML} -

- Capabilities: -

${JSON.stringify(gateway.capabilities || {}, null, 2)}

+ document.getElementById("gateway-details").innerHTML = ` +

Name: ${gateway.name}

URL: ${gateway.url}

Description: ${gateway.description || "N/A"}

Transport: + ${gateway.transport === "STREAMABLEHTTP" ? "Streamable HTTP" : + gateway.transport === "SSE" ? "SSE" : "N/A"} +

+ Status: + + + ${gateway.enabled ? (gateway.reachable ? "Active" : "Offline") : "Inactive"} + ${gateway.enabled ? (gateway.reachable ? + `` : + ``) : + `` + } + +

- `; +

Last Seen: ${gateway.lastSeen || "Never"}

+ ${authHTML} +

+ Capabilities: +

${JSON.stringify(gateway.capabilities || {}, null, 2)}

+ `; openModal("gateway-modal"); } catch (error) { @@ -968,7 +1090,7 @@ async function viewServer(serverId) { // Otherwise, lookup the name using the mapping (fallback to the id itself) const name = mapping[item] || item; return ` - ${item}:${name} + ${name} `; } }; @@ -1063,11 +1185,38 @@ async function editServer(serverId) { server.description || ""; document.getElementById("edit-server-icon").value = server.icon || ""; // Fill in the associated tools field (already working) - document.getElementById("edit-server-tools").value = Array.isArray( - server.associatedTools, - ) - ? server.associatedTools.join(", ") - : ""; + const select = document.getElementById('edit-server-tools'); + const pillsBox = document.getElementById('selectedEditToolsPills'); + const warnBox = document.getElementById('selectedEditToolsWarning'); + + // mark every matching

Add New Server

Registered Tools

Registered Tools

Registered Tools

Available Resources

Aggregated Metrics

MCP Gateway diagnostics

MCP Gateway diagnostics