From 17524c588721d6a4b34f54bebdcfae2775410772 Mon Sep 17 00:00:00 2001
From: jade <jade.kimhs@gmail.com>
Date: Wed, 19 Aug 2026 09:40:51 +0900
Subject: [PATCH] feat(ui): Enhance Tools List JSON modal with search and
 Postman export

---
 .../src/main/resources/static/tester.html     | 90 +++++++++++++++++--
 1 file changed, 82 insertions(+), 8 deletions(-)

diff --git a/dap-gateway/src/main/resources/static/tester.html b/dap-gateway/src/main/resources/static/tester.html
index 2de91b23..064389c8 100644
--- a/dap-gateway/src/main/resources/static/tester.html
+++ b/dap-gateway/src/main/resources/static/tester.html
@@ -94,7 +94,8 @@
             </div>
             <div class="flex items-center gap-3">
                 <button id="exportJsonBtn" class="btn-sm flex items-center gap-2 h-10 px-4 text-sm" onclick="exportJson()">
-                    Export JSON
+                    <svg class="w-4 h-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
+                    Tools List JSON
                 </button>
                 <button id="exportCsvBtn" class="btn-sm flex items-center gap-2 h-10 px-4 text-sm" onclick="exportCsv()" style="display: none;">
                     Export CSV
@@ -229,7 +230,7 @@
 
     <!-- Modal for JSON Export -->
     <div id="jsonExportModal" class="modal-overlay">
-        <div class="modal-content">
+        <div class="modal-content" style="max-width: 1200px; height: 85vh;">
             <div class="modal-header">
                 <div>
                     <h3 class="text-lg font-semibold text-white">Tools List JSON</h3>
@@ -237,13 +238,17 @@
                 </div>
                 <button onclick="closeJsonExportModal()" class="text-zinc-400 hover:text-white">&times;</button>
             </div>
-            <div class="modal-body">
-                <textarea id="jsonExportViewer" class="code-textarea" readonly></textarea>
+            <div class="border-b border-[#3f3f46] px-6 py-3 flex gap-3 items-center bg-[#09090b]">
+                <input type="text" id="jsonSearchInput" placeholder="Filter JSON by tool name or description..." class="bg-[#18181b] border border-[#3f3f46] text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 outline-none" oninput="filterJsonExport()">
+                <button class="btn-sm whitespace-nowrap" onclick="downloadPostmanCollection()">Export Postman Collection</button>
+            </div>
+            <div class="modal-body" style="padding: 0;">
+                <textarea id="jsonExportViewer" class="code-textarea" style="height: 100%; border: none; border-radius: 0; padding: 20px;" readonly></textarea>
             </div>
             <div class="modal-footer">
                 <div class="flex-grow flex gap-2">
-                    <button class="btn-sm" onclick="copyJsonExport()">Copy to Clipboard</button>
-                    <button class="btn-sm" onclick="downloadJsonExport()">Download File</button>
+                    <button class="btn-sm" onclick="copyJsonExport()">Copy JSON to Clipboard</button>
+                    <button class="btn-sm" onclick="downloadJsonExport()">Download JSON File</button>
                 </div>
                 <button onclick="closeJsonExportModal()" class="btn-sm py-2 px-4">Close</button>
             </div>
@@ -914,6 +919,8 @@
             document.body.removeChild(link);
         }
 
+        let currentExportJson = [];
+
         function exportJson() {
             if (allTools.length === 0) {
                 alert("No tools loaded.");
@@ -929,11 +936,25 @@
                 delete clean._tempParsed;
                 return clean;
             });
-            const jsonContent = JSON.stringify({ tools: cleanTools }, null, 2);
-            document.getElementById('jsonExportViewer').value = jsonContent;
+            currentExportJson = cleanTools;
+            document.getElementById('jsonSearchInput').value = '';
+            document.getElementById('jsonExportViewer').value = JSON.stringify({ tools: currentExportJson }, null, 2);
             document.getElementById('jsonExportModal').style.display = 'flex';
         }
         
+        function filterJsonExport() {
+            const keyword = document.getElementById('jsonSearchInput').value.toLowerCase();
+            if (!keyword) {
+                document.getElementById('jsonExportViewer').value = JSON.stringify({ tools: currentExportJson }, null, 2);
+                return;
+            }
+            const filtered = currentExportJson.filter(t => 
+                (t.name && t.name.toLowerCase().includes(keyword)) || 
+                (t.description && t.description.toLowerCase().includes(keyword))
+            );
+            document.getElementById('jsonExportViewer').value = JSON.stringify({ tools: filtered }, null, 2);
+        }
+
         function closeJsonExportModal() {
             document.getElementById('jsonExportModal').style.display = 'none';
         }
@@ -957,6 +978,59 @@
             document.body.removeChild(link);
         }
 
+        function downloadPostmanCollection() {
+            if (allTools.length === 0) return;
+            const pmItems = currentExportJson.map(tool => {
+                const dummy = generateDummyPayload(tool);
+                return {
+                    name: tool.name,
+                    request: {
+                        method: "POST",
+                        header: [
+                            { key: "Content-Type", value: "application/json" },
+                            { key: "X-Agent-Id", value: "AUTO-TESTER" }
+                        ],
+                        body: {
+                            mode: "raw",
+                            raw: JSON.stringify({
+                                jsonrpc: "2.0",
+                                method: "tools/call",
+                                params: { name: tool.name, arguments: dummy },
+                                id: 1
+                            }, null, 2)
+                        },
+                        url: {
+                            raw: "{{baseUrl}}/mcp/api/v1/tools/call",
+                            host: ["{{baseUrl}}"],
+                            path: ["mcp", "api", "v1", "tools", "call"]
+                        },
+                        description: tool.description
+                    }
+                };
+            });
+
+            const collection = {
+                info: {
+                    name: "AXHUB MCP Tools API",
+                    description: "Auto-generated Postman Collection for testing MCP Tools",
+                    schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+                },
+                item: pmItems,
+                variable: [
+                    { key: "baseUrl", value: "http://localhost:8081" }
+                ]
+            };
+
+            const blob = new Blob([JSON.stringify(collection, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.setAttribute("href", url);
+            link.setAttribute("download", `AXHUB_MCP_Tools.postman_collection.json`);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
         document.addEventListener('DOMContentLoaded', fetchTools);
     </script>
 </body>