fix: restore static html files that were dropped during massive rename
Some checks failed
Deploy to OCIWP / deploy (push) Failing after 17s
Some checks failed
Deploy to OCIWP / deploy (push) Failing after 17s
This commit is contained in:
jade
347
dat-gateway/src/main/resources/static/catalog.html
Normal file
347
dat-gateway/src/main/resources/static/catalog.html
Normal file
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI Tool Catalog</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { font-family: 'Geist', sans-serif; }
|
||||
body { background-color: #09090b; color: #f4f4f5; }
|
||||
.geist-mono { font-family: 'Geist Mono', monospace; }
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
.btn-primary:hover { box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); transform: translateY(-1px); }
|
||||
|
||||
.tool-card {
|
||||
background: #18181b;
|
||||
border: 1px solid #3f3f46;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.tool-card:hover { border-color: #52525b; }
|
||||
|
||||
.param-table {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.param-table th {
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
border-bottom: 1px solid #3f3f46;
|
||||
font-size: 12px;
|
||||
}
|
||||
.param-table td {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
color: #d4d4d8;
|
||||
}
|
||||
.param-table tr:last-child td { border-bottom: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen" style="overflow-y: scroll;">
|
||||
|
||||
<header style="border-bottom: 1px solid #27272a; background: rgba(9,9,11,0.85); backdrop-filter: blur(16px);" class="sticky top-0 z-50">
|
||||
<div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-5">
|
||||
<a href="/index.html" class="flex items-center group">
|
||||
<div class="w-2 h-2 rounded-full mr-2" style="background:#3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.8);"></div>
|
||||
<span class="font-semibold tracking-tight text-sm" style="color:#f4f4f5;">AXHUB Gateway</span>
|
||||
</a>
|
||||
<div class="h-4 w-px" style="background:#27272a;"></div>
|
||||
<nav class="flex space-x-5 text-[13px] font-medium">
|
||||
<a href="/admin/scaffold.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Scaffold</a>
|
||||
<a href="/catalog.html" style="color:#ffffff;" class="font-semibold">Catalog</a>
|
||||
<a href="/playground.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Playground</a>
|
||||
<a href="/chat.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Chat</a>
|
||||
<a href="/tester.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Tester</a>
|
||||
<a href="/tool-test-console.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Console</a>
|
||||
<a href="/tool-report.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Report</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-[10px] uppercase tracking-widest px-2 py-1 rounded font-bold" style="background:rgba(59,130,246,0.1); color:#60a5fa; border:1px solid rgba(59,130,246,0.2);">v0.0.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-6 py-10">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-8">
|
||||
<div class="max-w-2xl w-full">
|
||||
<div class="flex items-center space-x-3 mb-2">
|
||||
<h1 class="text-3xl font-bold tracking-tight" style="color:#f4f4f5;">Registry Catalog</h1>
|
||||
<button onclick="openGuideModal()" class="w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white transition-colors" title="Connection Guide">?</button>
|
||||
</div>
|
||||
<p class="text-sm mb-6" style="color:#a1a1aa;">Currently integrated AI function tools across all modules. View parameters, descriptions, and integration types.</p>
|
||||
|
||||
<div class="relative max-w-md w-full">
|
||||
<input type="text" id="searchInput" placeholder="Search tools by name, description, or category..." class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-4 py-2.5 text-sm text-zinc-200 placeholder-zinc-500 focus:outline-none focus:border-blue-500 transition-colors">
|
||||
<svg class="w-4 h-4 absolute right-3 top-3 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 md:mt-0 flex space-x-3 w-full md:w-auto">
|
||||
<button id="copyJsonBtn" class="btn-primary flex items-center justify-center flex-1 md:flex-none" style="background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
|
||||
<span id="copyJsonText">Copy Client Config</span>
|
||||
</button>
|
||||
<button id="copyMdBtn" class="btn-primary flex items-center justify-center flex-1 md:flex-none">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
|
||||
<span id="copyBtnText">Copy Markdown Docs</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="catalogContainer" class="space-y-12 pb-16">
|
||||
<div class="flex justify-center py-20 text-sm geist-mono" style="color:#71717a;">
|
||||
<div class="w-4 h-4 border-2 border-t-blue-500 rounded-full animate-spin mr-3" style="border-color:#3f3f46; border-top-color:#3b82f6;"></div>
|
||||
Loading registry...
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Guide Modal -->
|
||||
<div id="guideModal" class="fixed inset-0 z-[100] hidden flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeGuideModal()"></div>
|
||||
<div class="relative bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl w-full max-w-2xl mx-4 overflow-hidden">
|
||||
<div class="p-5 border-b border-zinc-800 flex justify-between items-center bg-zinc-900/50">
|
||||
<h3 class="text-lg font-semibold text-zinc-100 flex items-center">
|
||||
<svg class="w-5 h-5 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
AI Agent Connection Guide
|
||||
</h3>
|
||||
<button onclick="closeGuideModal()" class="text-zinc-400 hover:text-white transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6 space-y-6 max-h-[70vh] overflow-y-auto text-sm text-zinc-300">
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-400 mb-3 flex items-center"><span class="w-5 h-5 rounded bg-blue-500/20 flex items-center justify-center mr-2 text-xs">1</span> Cursor IDE 연동</h4>
|
||||
<p class="mb-2">1. Cursor 설정 창 열기 (<kbd class="px-1.5 py-0.5 bg-zinc-800 border border-zinc-700 rounded text-xs text-zinc-300">Cmd/Ctrl + ,</kbd>)</p>
|
||||
<p class="mb-2">2. 사이드바에서 <strong>Features</strong> > <strong>MCP</strong> 메뉴로 이동</p>
|
||||
<p>3. <strong>+ Add New MCP Server</strong>를 클릭하고, 툴 카테고리의 [Copy SSE URL] 버튼으로 복사한 주소를 `SSE` 타입으로 붙여넣기 하세요.</p>
|
||||
</div>
|
||||
<div class="border-t border-zinc-800 pt-6">
|
||||
<h4 class="font-semibold text-orange-400 mb-3 flex items-center"><span class="w-5 h-5 rounded bg-orange-500/20 flex items-center justify-center mr-2 text-xs">2</span> Claude Desktop 연동</h4>
|
||||
<p class="mb-2">1. 아래 설정 파일을 텍스트 에디터로 엽니다:</p>
|
||||
<div class="bg-black/40 p-3 rounded-lg border border-zinc-800/80 font-mono text-xs mb-3 text-zinc-400">
|
||||
<div class="mb-1"><strong>Mac:</strong> ~/Library/Application Support/Claude/claude_desktop_config.json</div>
|
||||
<div><strong>Win:</strong> %APPDATA%\Claude\claude_desktop_config.json</div>
|
||||
</div>
|
||||
<p>2. 화면 우측 상단의 <strong>[Copy Client Config]</strong> 버튼을 누른 후, 복사된 JSON 코드를 이 파일 안에 그대로 붙여넣습니다.</p>
|
||||
</div>
|
||||
<div class="border-t border-zinc-800 pt-6">
|
||||
<h4 class="font-semibold text-emerald-400 mb-3 flex items-center"><span class="w-5 h-5 rounded bg-emerald-500/20 flex items-center justify-center mr-2 text-xs">3</span> 커스텀 Python/Node Agent 연동</h4>
|
||||
<p class="mb-2">1. MCP 공식 SDK를 설치합니다. <code class="text-xs bg-zinc-800 px-1.5 py-0.5 rounded text-zinc-300 border border-zinc-700">npm i @modelcontextprotocol/sdk</code></p>
|
||||
<p>2. SSE Client Transport를 사용하여 복사한 카테고리별 URL로 연결합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allTools = []; // 글로벌 변수로 툴 데이터 보관
|
||||
async function fetchTools() {
|
||||
try {
|
||||
const response = await fetch('/mcp/api/v1/tools/list');
|
||||
const data = await response.json();
|
||||
allTools = data.result?.tools || [];
|
||||
renderCatalog(allTools);
|
||||
} catch (err) {
|
||||
document.getElementById('catalogContainer').innerHTML = `
|
||||
<div style="padding:16px; border:1px solid #7f1d1d; background:rgba(127,29,29,0.15); color:#fca5a5; font-size:14px; border-radius:8px;">
|
||||
Failed to fetch tools from registry. Error: ${err.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderCatalog(tools) {
|
||||
const container = document.getElementById('catalogContainer');
|
||||
container.innerHTML = '';
|
||||
if (tools.length === 0) {
|
||||
container.innerHTML = '<div style="padding:32px; text-align:center; color:#71717a; border:1px dashed #3f3f46; border-radius:8px;">No tools registered.</div>';
|
||||
return;
|
||||
}
|
||||
const grouped = {};
|
||||
tools.forEach(tool => {
|
||||
const group = tool._meta?.category_key || 'Others';
|
||||
if (!grouped[group]) grouped[group] = [];
|
||||
grouped[group].push(tool);
|
||||
});
|
||||
Object.keys(grouped).sort().forEach(group => {
|
||||
const section = document.createElement('section');
|
||||
const header = document.createElement('div');
|
||||
header.style.cssText = 'margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid #27272a; display:flex; align-items:baseline; justify-content:space-between;';
|
||||
header.innerHTML = `
|
||||
<h2 style="font-size:20px; font-weight:600; color:#f4f4f5; text-transform:capitalize;">${group}</h2>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<span class="geist-mono" style="font-size:12px; color:#71717a;">${grouped[group].length} items</span>
|
||||
<button onclick="copySseUrl('${group.toLowerCase()}', this)" class="hover:text-blue-400 text-zinc-500 transition-colors p-1.5 rounded hover:bg-zinc-800/50" title="Copy SSE URL">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
section.appendChild(header);
|
||||
const grid = document.createElement('div');
|
||||
grid.style.cssText = 'display:grid; grid-template-columns:1fr; gap:12px;';
|
||||
grouped[group].forEach(tool => grid.appendChild(createToolCard(tool)));
|
||||
section.appendChild(grid);
|
||||
container.appendChild(section);
|
||||
});
|
||||
}
|
||||
|
||||
function createToolCard(tool) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'tool-card';
|
||||
|
||||
const isDirect = tool._meta?.integrationType === 'DIRECT';
|
||||
const badgeBg = isDirect ? 'rgba(59,130,246,0.15)' : 'rgba(249,115,22,0.15)';
|
||||
const badgeColor = isDirect ? '#60a5fa' : '#fb923c';
|
||||
const badgeBorder = isDirect ? 'rgba(59,130,246,0.3)' : 'rgba(249,115,22,0.3)';
|
||||
|
||||
let paramHtml = '';
|
||||
if (tool.parametersSchema && tool.parametersSchema.properties) {
|
||||
const props = tool.parametersSchema.properties;
|
||||
const required = tool.parametersSchema.required || [];
|
||||
if (Object.keys(props).length > 0) {
|
||||
paramHtml = `
|
||||
<div style="margin-top:16px; padding-top:16px; border-top:1px solid #27272a;">
|
||||
<div style="font-size:10px; font-weight:700; color:#71717a; margin-bottom:8px; letter-spacing:0.1em; text-transform:uppercase;">Parameters</div>
|
||||
<table class="param-table">
|
||||
<thead><tr><th style="width:25%;">Name</th><th style="width:15%;">Type</th><th>Description</th></tr></thead>
|
||||
<tbody>
|
||||
${Object.entries(props).map(([k,v]) => `
|
||||
<tr>
|
||||
<td class="geist-mono" style="color:#93c5fd;">${k}${required.includes(k) ? '<span style="color:#f87171; margin-left:4px;">*</span>' : ''}</td>
|
||||
<td class="geist-mono" style="color:#a1a1aa;">${v.type || 'string'}</td>
|
||||
<td style="color:#d4d4d8;">${v.description || '-'}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
let promptHtml = '';
|
||||
if (tool.actionPrompts && Object.keys(tool.actionPrompts).length > 0) {
|
||||
promptHtml = `
|
||||
<div style="margin-top:16px; padding-top:16px; border-top:1px solid #27272a;">
|
||||
<div style="font-size:10px; font-weight:700; color:#71717a; margin-bottom:8px; letter-spacing:0.1em; text-transform:uppercase;">Action Prompts</div>
|
||||
<ul style="list-style:disc; padding-left:20px; font-size:14px; color:#a1a1aa; space-y:2;">
|
||||
${Object.values(tool.actionPrompts).map(p => `<li style="margin-bottom:4px;">${p}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
card.innerHTML = `
|
||||
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex; align-items:center; margin-bottom:4px;">
|
||||
<h3 style="font-size:16px; font-weight:600; color:#f4f4f5;">${tool.title || tool.name}</h3>
|
||||
<span style="margin:0 8px; color:#3f3f46;">/</span>
|
||||
<span class="geist-mono" style="font-size:12px; color:#71717a;">${tool.name}</span>
|
||||
</div>
|
||||
<p style="font-size:14px; color:#a1a1aa;">${tool.description || 'No description provided.'}</p>
|
||||
</div>
|
||||
<div style="margin-left:16px; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; background:${badgeBg}; color:${badgeColor}; border:1px solid ${badgeBorder};" class="geist-mono">
|
||||
${tool._meta?.integrationType || 'DIRECT'}
|
||||
</div>
|
||||
</div>
|
||||
${paramHtml}
|
||||
${promptHtml}
|
||||
`;
|
||||
return card;
|
||||
}
|
||||
|
||||
document.getElementById('copyMdBtn').addEventListener('click', async (e) => {
|
||||
const btn = e.currentTarget;
|
||||
const textSpan = document.getElementById('copyBtnText');
|
||||
const originalText = textSpan.textContent;
|
||||
try {
|
||||
const res = await fetch('/mcp/api/v1/tools/docs/markdown');
|
||||
if(!res.ok) throw new Error('Failed to fetch markdown');
|
||||
const mdText = await res.text();
|
||||
await navigator.clipboard.writeText(mdText);
|
||||
textSpan.textContent = 'Copied!';
|
||||
setTimeout(() => { textSpan.textContent = originalText; }, 2000);
|
||||
} catch (err) {
|
||||
alert('Failed to copy markdown.');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('searchInput').addEventListener('input', (e) => {
|
||||
const query = e.target.value.toLowerCase();
|
||||
const filtered = allTools.filter(t =>
|
||||
(t.name && t.name.toLowerCase().includes(query)) ||
|
||||
(t.displayName && t.displayName.toLowerCase().includes(query)) ||
|
||||
(t.description && t.description.toLowerCase().includes(query)) ||
|
||||
(t.categoryKey && t.categoryKey.toLowerCase().includes(query))
|
||||
);
|
||||
renderCatalog(filtered);
|
||||
});
|
||||
|
||||
function copySseUrl(category, btnElement) {
|
||||
const url = `${window.location.origin}/mcp/sse/${category}`;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
const originalSvg = btnElement.innerHTML;
|
||||
btnElement.innerHTML = `<svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>`;
|
||||
setTimeout(() => { btnElement.innerHTML = originalSvg; }, 2000);
|
||||
}).catch(() => alert('Failed to copy.'));
|
||||
}
|
||||
|
||||
function openGuideModal() {
|
||||
document.getElementById('guideModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeGuideModal() {
|
||||
document.getElementById('guideModal').classList.add('hidden');
|
||||
}
|
||||
|
||||
document.getElementById('copyJsonBtn').addEventListener('click', () => {
|
||||
const groups = [...new Set(allTools.map(t => t.categoryKey || 'Others'))];
|
||||
const config = { mcpServers: {} };
|
||||
groups.forEach(g => {
|
||||
const safeKey = g.toLowerCase().replace(/[^a-z0-9]/g, '-');
|
||||
config.mcpServers[`axhub-${safeKey}`] = {
|
||||
"command": "node",
|
||||
"args": [],
|
||||
"env": {},
|
||||
"type": "sse",
|
||||
"url": `${window.location.origin}/mcp/sse/${g.toLowerCase()}`
|
||||
};
|
||||
// Note: Claude desktop expects command/args for stdio, but for SSE it usually accepts just url/type or requires specialized settings.
|
||||
// Adjusted to basic config.
|
||||
delete config.mcpServers[`axhub-${safeKey}`].command;
|
||||
delete config.mcpServers[`axhub-${safeKey}`].args;
|
||||
delete config.mcpServers[`axhub-${safeKey}`].env;
|
||||
});
|
||||
const textSpan = document.getElementById('copyJsonText');
|
||||
const originalText = textSpan.textContent;
|
||||
navigator.clipboard.writeText(JSON.stringify(config, null, 2)).then(() => {
|
||||
textSpan.textContent = 'Copied JSON!';
|
||||
setTimeout(() => { textSpan.textContent = originalText; }, 2000);
|
||||
}).catch(() => alert('Failed to copy JSON.'));
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', fetchTools);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
345
dat-gateway/src/main/resources/static/chat.html
Normal file
345
dat-gateway/src/main/resources/static/chat.html
Normal file
@@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AX HUB - ChatClient</title>
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
<script src="/vendor/marked.umd.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #0f1115; color: #e2e8f0; }
|
||||
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.message-enter { animation: fadeInUp 0.3s ease-out forwards; }
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.typing-dot { animation: typing 1.4s infinite ease-in-out; fill: #94a3b8; }
|
||||
.typing-dot:nth-child(1) { animation-delay: 0s; }
|
||||
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes typing {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-3px); }
|
||||
}
|
||||
|
||||
.markdown-content > :first-child { margin-top: 0; }
|
||||
.markdown-content > :last-child { margin-bottom: 0; }
|
||||
.markdown-content p { margin: 0.5rem 0; }
|
||||
.markdown-content ul, .markdown-content ol { margin: 0.5rem 0; padding-left: 1.5rem; }
|
||||
.markdown-content ul { list-style: disc; }
|
||||
.markdown-content ol { list-style: decimal; }
|
||||
.markdown-content a { color: #6ee7b7; text-decoration: underline; }
|
||||
.markdown-content code { padding: 0.125rem 0.3rem; border-radius: 0.25rem; background: #0f1115; color: #f1f5f9; }
|
||||
.markdown-content pre { margin: 0.75rem 0; padding: 0.75rem; overflow-x: auto; border-radius: 0.5rem; background: #0f1115; }
|
||||
.markdown-content pre code { padding: 0; background: transparent; }
|
||||
.markdown-content blockquote { margin: 0.5rem 0; padding-left: 0.75rem; border-left: 3px solid #34d399; color: #cbd5e1; }
|
||||
.markdown-content table { width: 100%; margin: 0.5rem 0; border-collapse: collapse; }
|
||||
.markdown-content th, .markdown-content td { padding: 0.4rem; border: 1px solid #475569; text-align: left; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-screen flex flex-col bg-[#0f1115]">
|
||||
<!-- Top Navigation -->
|
||||
<header style="border-bottom: 1px solid #27272a; background: rgba(9,9,11,0.85); backdrop-filter: blur(16px);" class="sticky top-0 z-50">
|
||||
<div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-5">
|
||||
<a href="/index.html" class="flex items-center group">
|
||||
<div class="w-2 h-2 rounded-full mr-2" style="background:#3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.8);"></div>
|
||||
<span class="font-semibold tracking-tight text-sm" style="color:#f4f4f5;">AXHUB Gateway</span>
|
||||
</a>
|
||||
<div class="h-4 w-px" style="background:#27272a;"></div>
|
||||
<nav class="flex space-x-5 text-[13px] font-medium">
|
||||
<a href="/admin/scaffold.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Scaffold</a>
|
||||
<a href="/catalog.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Catalog</a>
|
||||
<a href="/playground.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Playground</a>
|
||||
<a href="/chat.html" style="color:#ffffff;" class="font-semibold">Chat</a>
|
||||
<a href="/tester.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Tester</a>
|
||||
<a href="/tool-test-console.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Console</a>
|
||||
<a href="/tool-report.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Report</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-[10px] uppercase tracking-widest px-2 py-1 rounded font-bold" style="background:rgba(59,130,246,0.1); color:#60a5fa; border:1px solid rgba(59,130,246,0.2);">v0.0.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 flex flex-col items-center justify-center p-4 w-full">
|
||||
<!-- Chat Container -->
|
||||
<div class="w-full max-w-3xl w-full flex-1 max-h-[85vh] flex flex-col bg-[#16181d] rounded-2xl shadow-2xl overflow-hidden border border-white/5 relative">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="px-6 py-4 border-b border-white/5 flex items-center justify-between bg-[#16181d] z-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-sm font-semibold tracking-wide text-white">AX HUB Assistant</h1>
|
||||
<p class="text-[11px] text-slate-500">Powered by Mock Engine & MCP Tools</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<select id="model-select" class="bg-[#1e2128] text-slate-300 text-xs px-3 py-1.5 rounded-lg border border-white/10 focus:outline-none focus:border-emerald-500/50 cursor-pointer">
|
||||
<option value="inclusionai/ling-3.0-flash:free">Ling 3.0 Flash (무료 - 현재 제공 상태에 따라 제한될 수 있음)</option>
|
||||
<option value="openai/gpt-oss-20b:free">GPT-OSS 20B (무료 - OpenRouter)</option>
|
||||
<option value="google/gemma-4-31b-it:free">Gemma 4 31B (무료 - OpenRouter)</option>
|
||||
<option value="nvidia/nemotron-3-nano-30b-a3b:free">NVIDIA Nemotron Nano 30B (무료 - OpenRouter)</option>
|
||||
<option value="cohere/north-mini-code:free" selected>Cohere North Mini (기본 · 무료 - OpenRouter)</option>
|
||||
<option value="gemini-flash-latest">Gemini 1.5 Flash (직접 API - Google)</option>
|
||||
</select>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="relative flex h-2.5 w-2.5">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
|
||||
</span>
|
||||
<span class="text-xs text-slate-400">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Area -->
|
||||
<div id="chat-box" class="flex-1 overflow-y-auto p-6 flex flex-col gap-6 scrollbar-hide scroll-smooth">
|
||||
|
||||
<!-- System Greeting -->
|
||||
<div class="flex gap-4 message-enter">
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-500/10 flex-shrink-0 flex items-center justify-center mt-1 border border-emerald-500/20">
|
||||
<svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 max-w-[80%]">
|
||||
<span class="text-xs text-slate-500 ml-1 font-medium">Assistant</span>
|
||||
<div class="bg-[#1e2128] px-5 py-3.5 rounded-2xl rounded-tl-sm text-sm text-slate-200 leading-relaxed border border-white/5 shadow-sm">
|
||||
안녕하세요! 저는 AX HUB Assistant입니다. <br>
|
||||
채팅을 통해 MCP(도구)들을 직접 호출해보세요. <br><br>
|
||||
💡 <strong>예시:</strong> "오늘 서울 날씨 어때?"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Input Area -->
|
||||
<div class="p-4 bg-[#16181d] border-t border-white/5 relative">
|
||||
<div class="relative flex items-center w-full max-w-full mx-auto group">
|
||||
<input type="text" id="chat-input" placeholder="메시지를 입력하세요... (예: 서울 날씨 어때?)"
|
||||
class="w-full bg-[#1e2128] text-slate-200 text-sm px-5 py-4 rounded-xl border border-white/5 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all placeholder-slate-600 pr-12 shadow-inner"
|
||||
onkeypress="handleKeyPress(event)">
|
||||
<button onclick="sendMessage()" class="absolute right-2 p-2 rounded-lg bg-emerald-500 hover:bg-emerald-400 text-white transition-colors flex items-center justify-center shadow-lg shadow-emerald-500/20">
|
||||
<svg class="w-4 h-4 translate-x-[1px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 로딩 인디케이터 템플릿 -->
|
||||
<template id="loading-template">
|
||||
<div class="flex gap-4 message-enter" id="loading-indicator">
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-500/10 flex-shrink-0 flex items-center justify-center mt-1 border border-emerald-500/20">
|
||||
<svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 max-w-[80%]">
|
||||
<span class="text-xs text-slate-500 ml-1 font-medium">Assistant</span>
|
||||
<div class="bg-[#1e2128] px-5 py-4 rounded-2xl rounded-tl-sm border border-white/5 flex items-center gap-1 shadow-sm h-[48px]">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="typing-dot" cx="4" cy="12" r="3"/>
|
||||
<circle class="typing-dot" cx="12" cy="12" r="3"/>
|
||||
<circle class="typing-dot" cx="20" cy="12" r="3"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const chatBox = document.getElementById('chat-box');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const loadingTemplate = document.getElementById('loading-template');
|
||||
let isLoading = false;
|
||||
|
||||
function handleKeyPress(e) {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
}
|
||||
|
||||
function appendUserMessage(text) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'flex gap-4 justify-end message-enter';
|
||||
div.innerHTML = `
|
||||
<div class="flex flex-col gap-1 max-w-[80%] items-end">
|
||||
<span class="text-xs text-slate-500 mr-1 font-medium">You</span>
|
||||
<div class="bg-emerald-500/10 px-5 py-3.5 rounded-2xl rounded-tr-sm text-sm text-emerald-50 leading-relaxed border border-emerald-500/20 shadow-sm whitespace-pre-wrap">${escapeHtml(text)}</div>
|
||||
</div>
|
||||
`;
|
||||
chatBox.appendChild(div);
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
function appendBotMessageContainer() {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'flex gap-4 message-enter';
|
||||
div.innerHTML = `
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-500/10 flex-shrink-0 flex items-center justify-center mt-1 border border-emerald-500/20">
|
||||
<svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 max-w-[80%]">
|
||||
<span class="text-xs text-slate-500 ml-1 font-medium">Assistant</span>
|
||||
<div class="bg-[#1e2128] px-5 py-3.5 rounded-2xl rounded-tl-sm text-sm text-slate-200 leading-relaxed border border-white/5 shadow-sm markdown-content bot-text"></div>
|
||||
</div>
|
||||
`;
|
||||
chatBox.appendChild(div);
|
||||
scrollToBottom();
|
||||
return div.querySelector('.bot-text');
|
||||
}
|
||||
|
||||
function showLoading() {
|
||||
const clone = loadingTemplate.content.cloneNode(true);
|
||||
chatBox.appendChild(clone);
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
const loadingIndicator = document.getElementById('loading-indicator');
|
||||
if (loadingIndicator) {
|
||||
loadingIndicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
chatBox.scrollTo({ top: chatBox.scrollHeight, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function sanitizeRenderedHtml(html) {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = html;
|
||||
template.content.querySelectorAll('script, iframe, object, embed, style, link, meta').forEach(element => element.remove());
|
||||
template.content.querySelectorAll('*').forEach(element => {
|
||||
[...element.attributes].forEach(attribute => {
|
||||
const name = attribute.name.toLowerCase();
|
||||
const value = attribute.value.trim();
|
||||
if (name.startsWith('on') || name === 'style' ||
|
||||
(['href', 'src', 'xlink:href'].includes(name) && /^(javascript|data|vbscript):/i.test(value))) {
|
||||
element.removeAttribute(attribute.name);
|
||||
}
|
||||
});
|
||||
});
|
||||
return template.innerHTML;
|
||||
}
|
||||
|
||||
function normalizeMarkdown(markdown) {
|
||||
// 일부 모델은 문단 뒤의 제목 표기(예: "설명입니다.## 제목") 앞 줄바꿈을 생략한다.
|
||||
// 또한 "###제목", "###📝 제목"처럼 해시 뒤 공백을 생략하는 출력도 제목으로 보정한다.
|
||||
return markdown
|
||||
.replace(/\r\n?/g, '\n')
|
||||
.replace(/([^\n])((?:#{1,6})\s+)/g, '$1\n$2')
|
||||
.replace(/(^|\n)(#{1,6})([^\s#])/g, '$1$2 $3');
|
||||
}
|
||||
|
||||
function renderMarkdown(container, markdown) {
|
||||
// 프로젝트에 포함한 표준 GFM 렌더러가 제목, 강조, 표, 목록, 코드, 링크 등을 일괄 처리한다.
|
||||
const normalizedMarkdown = normalizeMarkdown(markdown);
|
||||
if (typeof marked !== 'undefined') {
|
||||
const html = marked.parse(normalizedMarkdown, { breaks: true, gfm: true });
|
||||
container.innerHTML = sanitizeRenderedHtml(html);
|
||||
return;
|
||||
}
|
||||
|
||||
// 로컬 라이브러리 로딩에 실패한 경우에는 안전한 일반 텍스트로 표시한다.
|
||||
container.textContent = normalizedMarkdown;
|
||||
}
|
||||
|
||||
function consumeSseEvents(buffer, onData) {
|
||||
// Spring SSE는 응답 본문의 줄바꿈을 여러 data: 줄로 전송한다.
|
||||
// data 줄을 단순 연결하면 Markdown 표의 행 구분이 사라지므로, 이벤트 단위로 복원한다.
|
||||
let eventEnd;
|
||||
while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
|
||||
const event = buffer.substring(0, eventEnd);
|
||||
buffer = buffer.substring(eventEnd + 2);
|
||||
const dataLines = event.split('\n')
|
||||
.filter(line => line.startsWith('data:'))
|
||||
.map(line => line.substring(5));
|
||||
|
||||
if (dataLines.length > 0) onData(dataLines.join('\n'));
|
||||
}
|
||||
return buffer;
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const text = chatInput.value.trim();
|
||||
if (!text || isLoading) return;
|
||||
|
||||
const selectedModel = document.getElementById('model-select').value;
|
||||
|
||||
// 1. 유저 메시지 추가
|
||||
appendUserMessage(text);
|
||||
chatInput.value = '';
|
||||
isLoading = true;
|
||||
|
||||
// 2. 로딩 애니메이션
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
// 3. 백엔드 통신 (SSE Stream)
|
||||
const response = await fetch('/api/chat', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Agent-Id': 'TESTER-DEV' // 권한 통과를 위한 테스트 Agent ID
|
||||
},
|
||||
body: JSON.stringify({ message: text, model: selectedModel })
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Network response was not ok');
|
||||
|
||||
// 4. 로딩 숨기고 봇 응답 컨테이너 생성
|
||||
hideLoading();
|
||||
const textContainer = appendBotMessageContainer();
|
||||
let responseText = '';
|
||||
|
||||
// 5. 스트림 읽기
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
let sseBuffer = '';
|
||||
|
||||
const appendResponse = (data) => {
|
||||
responseText += data;
|
||||
renderMarkdown(textContainer, responseText);
|
||||
scrollToBottom();
|
||||
};
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
sseBuffer += decoder.decode(value || new Uint8Array(), { stream: !done }).replace(/\r\n/g, '\n');
|
||||
sseBuffer = consumeSseEvents(sseBuffer, appendResponse);
|
||||
if (done) break;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
hideLoading();
|
||||
const textContainer = appendBotMessageContainer();
|
||||
textContainer.innerHTML = "서버와의 통신에 실패했습니다. Gateway가 켜져있는지 확인해주세요.";
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
215
dat-gateway/src/main/resources/static/index.html
Normal file
215
dat-gateway/src/main/resources/static/index.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AXHUB Gateway</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Geist', 'sans-serif'],
|
||||
mono: ['Geist Mono', 'monospace']
|
||||
},
|
||||
colors: {
|
||||
background: '#09090b', /* zinc-950 */
|
||||
panel: '#18181b', /* zinc-900 */
|
||||
foreground: '#f4f4f5', /* zinc-100 */
|
||||
muted: '#a1a1aa', /* zinc-400 */
|
||||
border: 'rgba(255,255,255,0.1)',
|
||||
primary: '#3b82f6', /* blue-500 */
|
||||
primaryHover: '#2563eb', /* blue-600 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: theme('colors.background');
|
||||
color: theme('colors.foreground');
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Subtle radial background for depth */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: radial-gradient(circle at 50% -20%, rgba(59, 130, 246, 0.15), transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.geist-mono { font-family: 'Geist Mono', monospace; }
|
||||
|
||||
.card-panel {
|
||||
background: rgba(24, 24, 27, 0.7); /* zinc-900 with transparency */
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid theme('colors.border');
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.card-panel:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 20px -8px rgba(0,0,0,0.6), 0 0 15px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
background: rgba(39, 39, 42, 0.8); /* zinc-800 */
|
||||
}
|
||||
|
||||
.premium-text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-panel:hover .icon-box {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
border-color: rgba(59, 130, 246, 0.4);
|
||||
color: #60a5fa; /* blue-400 */
|
||||
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col relative">
|
||||
|
||||
<!-- Header Navigation -->
|
||||
<header class="border-b border-border sticky top-0 bg-background/80 backdrop-blur-xl z-50">
|
||||
<div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-5">
|
||||
<div class="flex items-center">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.8)] mr-2"></div>
|
||||
<span class="font-semibold tracking-tight text-sm text-zinc-100">AXHUB Gateway</span>
|
||||
</div>
|
||||
<div class="h-4 w-px bg-white/10"></div>
|
||||
<nav class="flex space-x-5 text-[13px] font-medium">
|
||||
<a href="/admin/scaffold.html" class="text-zinc-400 hover:text-white transition-colors">Scaffold</a>
|
||||
<a href="/catalog.html" class="text-zinc-400 hover:text-white transition-colors">Catalog</a>
|
||||
<a href="/playground.html" class="text-zinc-400 hover:text-white transition-colors">Playground</a>
|
||||
<a href="/chat.html" class="text-zinc-400 hover:text-white transition-colors">Chat</a>
|
||||
<a href="/tester.html" class="text-zinc-400 hover:text-white transition-colors">Tester</a>
|
||||
<a href="/tool-test-console.html" class="text-zinc-400 hover:text-white transition-colors">Console</a>
|
||||
<a href="/tool-report.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Report</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-[10px] uppercase tracking-widest bg-blue-500/10 text-blue-400 px-2 py-1 rounded font-bold border border-blue-500/20">v0.0.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-grow max-w-6xl mx-auto px-6 py-20 w-full flex flex-col items-center justify-center relative z-10">
|
||||
|
||||
<div class="text-center mb-20 max-w-2xl">
|
||||
<div class="inline-flex items-center justify-center px-3 py-1 mb-6 text-xs font-medium rounded-full bg-white/5 border border-white/10 shadow-sm backdrop-blur-md">
|
||||
<span class="flex w-2 h-2 rounded-full bg-blue-400 shadow-[0_0_5px_rgba(96,165,250,0.8)] mr-2 animate-pulse"></span>
|
||||
<span class="text-zinc-300">System Operational</span>
|
||||
</div>
|
||||
<h1 class="text-5xl font-bold tracking-tight mb-6 premium-text-gradient leading-tight">AI Plugin Gateway</h1>
|
||||
<p class="text-[15px] text-zinc-400 leading-relaxed max-w-lg mx-auto">
|
||||
The central hub for managing, discovering, and testing AI tool integrations. High-performance tooling for the modern enterprise.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-6xl">
|
||||
<!-- Scaffold Card -->
|
||||
<a href="/admin/scaffold.html" class="card-panel p-8 group block">
|
||||
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Scaffold Tool</h2>
|
||||
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
||||
Generate boilerplate code for new AI tool integrations automatically. Select a target module and build your plugin structure in seconds.
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
||||
Launch Scaffold <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Catalog Card -->
|
||||
<a href="/catalog.html" class="card-panel p-8 group block">
|
||||
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Tool Catalog</h2>
|
||||
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
||||
Browse all active tool integrations. View JSON schemas, parameters, and action prompts registered across the entire AXHUB ecosystem.
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
||||
View Catalog <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Playground Card -->
|
||||
<a href="/playground.html" class="card-panel p-8 group block">
|
||||
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Playground</h2>
|
||||
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
||||
Test and execute tools directly from the browser. Verify RPC calls, test inputs, and inspect raw JSON responses before using them in code.
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
||||
Enter Playground <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Chat Card -->
|
||||
<a href="/chat.html" class="card-panel p-8 group block">
|
||||
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-3">AI Assistant</h2>
|
||||
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
||||
Interact with the MCP tool ecosystem through a natural language interface. Test your LLM routing logic in a premium chat UI.
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
||||
Start Chatting <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Tester Card -->
|
||||
<a href="/tester.html" class="card-panel p-8 group block">
|
||||
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Auto Tester</h2>
|
||||
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
||||
Batch execute all registered tools with auto-generated dummy data to verify stability. Export results to CSV for reporting.
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
||||
Run Tests <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Console Card -->
|
||||
<a href="/tool-test-console.html" class="card-panel p-8 group block">
|
||||
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Test Console</h2>
|
||||
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
||||
Advanced developer console for executing tools with custom JSON payloads. Monitor real-time logs and debug application state.
|
||||
</p>
|
||||
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
||||
Open Console <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
404
dat-gateway/src/main/resources/static/playground.html
Normal file
404
dat-gateway/src/main/resources/static/playground.html
Normal file
@@ -0,0 +1,404 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tool Playground</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { font-family: 'Geist', sans-serif; }
|
||||
body { background-color: #09090b; color: #f4f4f5; }
|
||||
.geist-mono { font-family: 'Geist Mono', monospace; }
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
background-color: #18181b;
|
||||
border: 1px solid #3f3f46;
|
||||
border-radius: 8px;
|
||||
color: #f4f4f5;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.input-field:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
.input-field::placeholder { color: #71717a; }
|
||||
|
||||
select.input-field {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.25em 1.25em;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
select.input-field option { background: #18181b; color: #f4f4f5; }
|
||||
select.input-field optgroup { background: #27272a; color: #a1a1aa; font-weight: 600; }
|
||||
|
||||
.btn-execute {
|
||||
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
.btn-execute:hover { box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); transform: translateY(-1px); }
|
||||
.btn-execute:disabled { background: #27272a; color: #52525b; box-shadow: none; transform: none; cursor: not-allowed; }
|
||||
|
||||
.card { background: #18181b; border: 1px solid #3f3f46; border-radius: 12px; }
|
||||
|
||||
.json-pre {
|
||||
background: #09090b;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #d4d4d8;
|
||||
}
|
||||
.json-key { color: #93c5fd; }
|
||||
.json-string { color: #86efac; }
|
||||
.json-number { color: #fbbf24; }
|
||||
.json-boolean { color: #f472b6; }
|
||||
.json-null { color: #71717a; }
|
||||
|
||||
#loadingOverlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(9,9,11,0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 12px;
|
||||
z-index: 10;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
#loadingOverlay.active { display: flex; }
|
||||
|
||||
.spinner {
|
||||
width: 24px; height: 24px;
|
||||
border: 2px solid #3f3f46;
|
||||
border-top-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen" style="overflow-y: scroll;">
|
||||
|
||||
<header style="border-bottom: 1px solid #27272a; background: rgba(9,9,11,0.85); backdrop-filter: blur(16px);" class="sticky top-0 z-50">
|
||||
<div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-5">
|
||||
<a href="/index.html" class="flex items-center group">
|
||||
<div class="w-2 h-2 rounded-full mr-2" style="background:#3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.8);"></div>
|
||||
<span class="font-semibold tracking-tight text-sm" style="color:#f4f4f5;">AXHUB Gateway</span>
|
||||
</a>
|
||||
<div class="h-4 w-px" style="background:#27272a;"></div>
|
||||
<nav class="flex space-x-5 text-[13px] font-medium">
|
||||
<a href="/admin/scaffold.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Scaffold</a>
|
||||
<a href="/catalog.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Catalog</a>
|
||||
<a href="/playground.html" style="color:#ffffff;" class="font-semibold">Playground</a>
|
||||
<a href="/chat.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Chat</a>
|
||||
<a href="/tester.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Tester</a>
|
||||
<a href="/tool-test-console.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Console</a>
|
||||
<a href="/tool-report.html" style="color:#a1a1aa;" class="hover:text-white transition-colors">Report</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<label class="text-xs" style="color:#71717a;">Agent ID:</label>
|
||||
<input type="text" id="agentId" value="TESTER-DEV" class="input-field" style="width:140px; padding:6px 10px; font-size:12px;">
|
||||
<span class="text-[10px] uppercase tracking-widest px-2 py-1 rounded font-bold" style="background:rgba(59,130,246,0.1); color:#60a5fa; border:1px solid rgba(59,130,246,0.2);">v0.0.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-4xl mx-auto px-6 py-10">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-2xl font-bold tracking-tight mb-2" style="color:#f4f4f5;">Test & Execute</h1>
|
||||
<p class="text-sm" style="color:#a1a1aa;">Simulate tool executions and view raw RPC responses. Select a tool to auto-generate the input schema.</p>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 relative mb-8">
|
||||
<div id="loadingOverlay">
|
||||
<div class="spinner mb-3"></div>
|
||||
<div class="text-sm font-medium" style="color:#a1a1aa;">Executing RPC Call...</div>
|
||||
</div>
|
||||
|
||||
<form id="mcpForm" class="space-y-6">
|
||||
<div>
|
||||
<label for="toolName" class="block text-sm font-semibold mb-2 flex items-center" style="color:#e4e4e7;">
|
||||
Select Tool
|
||||
<span id="integrationBadge" class="ml-3 px-2 py-0.5 rounded text-[10px] font-medium tracking-wide geist-mono hidden" style="background:#27272a; color:#a1a1aa; border:1px solid #3f3f46;"></span>
|
||||
</label>
|
||||
<select id="toolName" name="toolName" class="input-field">
|
||||
<option value="">Loading tools...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="dynamicFormContainer" class="hidden">
|
||||
<h3 class="text-sm font-semibold mb-3 pb-2" style="color:#e4e4e7; border-bottom: 1px solid #27272a;">Parameters</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4" id="dynamicFields"></div>
|
||||
</div>
|
||||
|
||||
<div id="manualInputContainer" class="hidden p-4 rounded-lg space-y-4" style="background:#0a0a0c; border:1px solid #27272a;">
|
||||
<h3 class="text-sm font-semibold" style="color:#e4e4e7;">Manual Override (Hidden Tool)</h3>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1" style="color:#a1a1aa;">Tool Name</label>
|
||||
<input type="text" id="manualToolName" class="input-field" value="get_template_file_url">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1" style="color:#a1a1aa;">JSON Parameters</label>
|
||||
<textarea id="manualToolArgs" rows="3" class="input-field geist-mono">{"templateId": "test_excel"}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="userPrompt" class="block text-sm font-semibold mb-2" style="color:#e4e4e7;">Mock User Prompt</label>
|
||||
<textarea id="userPrompt" name="userPrompt" rows="2" class="input-field" style="resize:none;" placeholder="Provide context for the execution log..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-4" style="border-top:1px solid #27272a;">
|
||||
<div class="flex items-center text-xs geist-mono">
|
||||
<span class="font-bold px-2 py-1 rounded mr-2" style="background:#27272a; color:#a1a1aa; border:1px solid #3f3f46;">POST</span>
|
||||
<span style="color:#71717a;">/mcp/api/v1/tools/call</span>
|
||||
</div>
|
||||
<button type="submit" class="btn-execute">Execute Tool</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="resultContainer" class="hidden">
|
||||
<h2 class="text-sm font-semibold tracking-tight mb-2 flex items-center justify-between" style="color:#e4e4e7;">
|
||||
Execution Result
|
||||
<span id="statusBadge" class="px-2 py-0.5 rounded text-[10px] font-medium tracking-wide geist-mono hidden"></span>
|
||||
</h2>
|
||||
<pre id="jsonResponse" class="json-pre geist-mono"></pre>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
let actionPrompts = {};
|
||||
let currentSchema = null;
|
||||
|
||||
const toolSelect = document.getElementById('toolName');
|
||||
const dynamicFormContainer = document.getElementById('dynamicFormContainer');
|
||||
const dynamicFields = document.getElementById('dynamicFields');
|
||||
|
||||
async function fetchTools() {
|
||||
try {
|
||||
const response = await fetch('/mcp/api/v1/tools/list');
|
||||
const data = await response.json();
|
||||
toolSelect.innerHTML = '<option value="" disabled selected>Select a tool to test...</option>';
|
||||
actionPrompts = {};
|
||||
const tools = data.result?.tools || [];
|
||||
const groupedTools = {};
|
||||
tools.forEach(tool => {
|
||||
const group = tool._meta?.category_key || 'Others';
|
||||
if (!groupedTools[group]) groupedTools[group] = [];
|
||||
groupedTools[group].push(tool);
|
||||
});
|
||||
Object.keys(groupedTools).sort().forEach(group => {
|
||||
const optgroup = document.createElement('optgroup');
|
||||
optgroup.label = group;
|
||||
groupedTools[group].forEach(tool => {
|
||||
const option = document.createElement('option');
|
||||
option.value = tool.name;
|
||||
option.textContent = tool.name;
|
||||
option.dataset.schema = JSON.stringify(tool.parametersSchema);
|
||||
option.dataset.prompts = JSON.stringify(tool.actionPrompts || {});
|
||||
option.dataset.integrationType = tool._meta?.integrationType || 'HTTP';
|
||||
optgroup.appendChild(option);
|
||||
if (tool.actionPrompts) Object.assign(actionPrompts, tool.actionPrompts);
|
||||
});
|
||||
toolSelect.appendChild(optgroup);
|
||||
});
|
||||
const optgroupManual = document.createElement('optgroup');
|
||||
optgroupManual.label = 'Advanced';
|
||||
const optionManual = document.createElement('option');
|
||||
optionManual.value = 'MANUAL_INPUT';
|
||||
optionManual.textContent = 'Custom/Hidden Tool';
|
||||
optionManual.dataset.schema = "null";
|
||||
optgroupManual.appendChild(optionManual);
|
||||
toolSelect.appendChild(optgroupManual);
|
||||
} catch (err) {
|
||||
toolSelect.innerHTML = '<option value="">Failed to load tools</option>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderDynamicForm() {
|
||||
dynamicFields.innerHTML = '';
|
||||
const selectedOption = toolSelect.options[toolSelect.selectedIndex];
|
||||
if (!selectedOption || !selectedOption.dataset.schema) { dynamicFormContainer.classList.add('hidden'); return; }
|
||||
const schemaStr = selectedOption.dataset.schema;
|
||||
if (schemaStr === "null") { dynamicFormContainer.classList.add('hidden'); currentSchema = null; return; }
|
||||
try {
|
||||
const schema = JSON.parse(schemaStr);
|
||||
currentSchema = schema;
|
||||
if (!schema.properties || Object.keys(schema.properties).length === 0) { dynamicFormContainer.classList.add('hidden'); return; }
|
||||
dynamicFormContainer.classList.remove('hidden');
|
||||
for (const [key, value] of Object.entries(schema.properties)) {
|
||||
const fieldDiv = document.createElement('div');
|
||||
const label = document.createElement('label');
|
||||
label.className = 'block text-xs font-medium mb-1.5';
|
||||
label.style.color = '#a1a1aa';
|
||||
label.textContent = `${key} ${value.description ? '— ' + value.description : ''}`;
|
||||
fieldDiv.appendChild(label);
|
||||
let input;
|
||||
if (value.type === 'boolean') {
|
||||
input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
input.id = 'param_' + key;
|
||||
} else {
|
||||
input = document.createElement('input');
|
||||
input.type = value.type === 'number' || value.type === 'integer' ? 'number' : 'text';
|
||||
input.id = 'param_' + key;
|
||||
input.className = 'input-field';
|
||||
input.placeholder = `Enter ${key}`;
|
||||
}
|
||||
fieldDiv.appendChild(input);
|
||||
dynamicFields.appendChild(fieldDiv);
|
||||
}
|
||||
} catch(e) { dynamicFormContainer.classList.add('hidden'); }
|
||||
}
|
||||
|
||||
function updatePrompt() {
|
||||
const toolName = toolSelect.value;
|
||||
const defaultPrompt = actionPrompts[toolName];
|
||||
document.getElementById('userPrompt').value = defaultPrompt ? defaultPrompt : "Test execution";
|
||||
}
|
||||
|
||||
toolSelect.addEventListener('change', () => {
|
||||
const integrationBadge = document.getElementById('integrationBadge');
|
||||
if (toolSelect.value === 'MANUAL_INPUT') {
|
||||
document.getElementById('manualInputContainer').classList.remove('hidden');
|
||||
dynamicFormContainer.classList.add('hidden');
|
||||
document.getElementById('userPrompt').value = "Manual force execution";
|
||||
integrationBadge.classList.add('hidden');
|
||||
} else {
|
||||
document.getElementById('manualInputContainer').classList.add('hidden');
|
||||
|
||||
// Show Integration Type Badge
|
||||
const selectedOption = toolSelect.options[toolSelect.selectedIndex];
|
||||
if (selectedOption && selectedOption.dataset.integrationType) {
|
||||
let itype = selectedOption.dataset.integrationType;
|
||||
integrationBadge.textContent = 'TYPE: ' + itype;
|
||||
integrationBadge.classList.remove('hidden');
|
||||
|
||||
// Add distinct colors for MCI/EAI
|
||||
if (itype === 'MCI') {
|
||||
integrationBadge.style.color = '#60a5fa'; // Blue
|
||||
integrationBadge.style.borderColor = 'rgba(59,130,246,0.3)';
|
||||
} else if (itype === 'EAI') {
|
||||
integrationBadge.style.color = '#34d399'; // Green
|
||||
integrationBadge.style.borderColor = 'rgba(52,211,153,0.3)';
|
||||
} else {
|
||||
integrationBadge.style.color = '#a1a1aa'; // Default Gray
|
||||
integrationBadge.style.borderColor = '#3f3f46';
|
||||
}
|
||||
} else {
|
||||
integrationBadge.classList.add('hidden');
|
||||
}
|
||||
|
||||
updatePrompt();
|
||||
renderDynamicForm();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', fetchTools);
|
||||
|
||||
function collectArguments() {
|
||||
if (!currentSchema || !currentSchema.properties) return {};
|
||||
const args = {};
|
||||
for (const [key, value] of Object.entries(currentSchema.properties)) {
|
||||
const input = document.getElementById('param_' + key);
|
||||
if (input) {
|
||||
if (value.type === 'boolean') args[key] = input.checked;
|
||||
else if (value.type === 'number' || value.type === 'integer') args[key] = input.value ? Number(input.value) : 0;
|
||||
else args[key] = input.value;
|
||||
}
|
||||
}
|
||||
return args;
|
||||
}
|
||||
|
||||
document.getElementById('mcpForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
if(!toolSelect.value) return;
|
||||
let finalToolName = toolSelect.value;
|
||||
let finalArguments = {};
|
||||
if (finalToolName === 'MANUAL_INPUT') {
|
||||
finalToolName = document.getElementById('manualToolName').value.trim();
|
||||
if (!finalToolName) return alert("Enter tool name");
|
||||
try { finalArguments = JSON.parse(document.getElementById('manualToolArgs').value.trim() || '{}'); }
|
||||
catch(err) { return alert("Invalid JSON format"); }
|
||||
} else { finalArguments = collectArguments(); }
|
||||
|
||||
const loadingOverlay = document.getElementById('loadingOverlay');
|
||||
const resultContainer = document.getElementById('resultContainer');
|
||||
const jsonResponse = document.getElementById('jsonResponse');
|
||||
const statusBadge = document.getElementById('statusBadge');
|
||||
const btn = this.querySelector('button[type="submit"]');
|
||||
resultContainer.classList.add('hidden');
|
||||
loadingOverlay.classList.add('active');
|
||||
btn.disabled = true;
|
||||
|
||||
const payload = { jsonrpc: "2.0", method: "tools/call", params: { name: finalToolName, arguments: finalArguments }, id: Date.now() };
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
const response = await fetch('/mcp/api/v1/tools/call', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Trace-Id': "MCP-REQ-" + Math.floor(Math.random() * 90000 + 10000),
|
||||
'X-Agent-Id': document.getElementById('agentId').value,
|
||||
'X-User-Prompt': encodeURIComponent(document.getElementById('userPrompt').value || '')
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const data = await response.json();
|
||||
const latency = Date.now() - startTime;
|
||||
let formattedJson = JSON.stringify(data, null, 2)
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||
let cls = '';
|
||||
if (/^"/.test(match)) { cls = /:$/.test(match) ? 'json-key' : 'json-string'; }
|
||||
else if (/true|false/.test(match)) { cls = 'json-boolean'; }
|
||||
else if (/null/.test(match)) { cls = 'json-null'; }
|
||||
else { cls = 'json-number'; }
|
||||
return '<span class="' + cls + '">' + match + '</span>';
|
||||
});
|
||||
jsonResponse.innerHTML = formattedJson;
|
||||
statusBadge.classList.remove('hidden');
|
||||
if(response.ok) {
|
||||
statusBadge.innerHTML = `200 OK · ${latency}ms`;
|
||||
statusBadge.style.cssText = 'background:rgba(34,197,94,0.15); color:#4ade80; border:1px solid rgba(34,197,94,0.3); padding:2px 8px; border-radius:4px; font-size:10px;';
|
||||
} else {
|
||||
statusBadge.innerHTML = `${response.status} ERR · ${latency}ms`;
|
||||
statusBadge.style.cssText = 'background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.3); padding:2px 8px; border-radius:4px; font-size:10px;';
|
||||
}
|
||||
} catch (error) {
|
||||
jsonResponse.textContent = "Error: " + error.message;
|
||||
statusBadge.innerHTML = `FAILED`;
|
||||
statusBadge.style.cssText = 'background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.3); padding:2px 8px; border-radius:4px; font-size:10px;';
|
||||
statusBadge.classList.remove('hidden');
|
||||
} finally {
|
||||
loadingOverlay.classList.remove('active');
|
||||
resultContainer.classList.remove('hidden');
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
512
dat-gateway/src/main/resources/static/static/index.html
Normal file
512
dat-gateway/src/main/resources/static/static/index.html
Normal file
@@ -0,0 +1,512 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Shinhan AI MCP Gateway</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Pretendard:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'sans-serif'],
|
||||
outfit: ['Outfit', 'sans-serif'],
|
||||
mono: ['Fira Code', 'monospace']
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
900: '#1e3a8a',
|
||||
950: '#172554',
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
'float': 'float 8s ease-in-out infinite',
|
||||
'float-delayed': 'float 8s ease-in-out 4s infinite',
|
||||
'spin-slow': 'spin 3s linear infinite',
|
||||
'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
'float': {
|
||||
'0%, 100%': { transform: 'translateY(0px) scale(1)' },
|
||||
'50%': { transform: 'translateY(-20px) scale(1.05)' },
|
||||
},
|
||||
'pulse-glow': {
|
||||
'0%, 100%': { opacity: 0.5, transform: 'scale(1)' },
|
||||
'50%': { opacity: 1, transform: 'scale(1.05)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #020617; /* slate-950 */
|
||||
color: #f8fafc;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Premium Dark Grid Background */
|
||||
.bg-grid {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-size: 40px 40px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
|
||||
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(15, 23, 42, 0.6); /* slate-900 */
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.input-premium {
|
||||
background: rgba(30, 41, 59, 0.5); /* slate-800 */
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #f8fafc;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.input-premium:focus {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), inset 0 2px 4px rgba(0,0,0,0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Styling the select options for a dark theme (browser native fallback) */
|
||||
select.input-premium option, select.input-premium optgroup {
|
||||
background: #1e293b;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.json-pre {
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.btn-glow {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
|
||||
background-size: 200% auto;
|
||||
z-index: -1;
|
||||
border-radius: 12px;
|
||||
filter: blur(10px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
animation: gradient-shift 3s linear infinite;
|
||||
}
|
||||
.btn-glow:hover::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@keyframes gradient-shift {
|
||||
0% { background-position: 0% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
|
||||
/* Loading Overlay Overlay */
|
||||
#loadingOverlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
#loadingOverlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* Modern Spinner */
|
||||
.modern-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(59, 130, 246, 0.1);
|
||||
border-top-color: #3b82f6;
|
||||
border-right-color: #8b5cf6;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); }
|
||||
::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.8); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 1); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased selection:bg-brand-500/30 selection:text-brand-50">
|
||||
|
||||
<div class="bg-grid"></div>
|
||||
|
||||
<!-- Premium Glowing Orbs -->
|
||||
<div class="fixed top-0 left-[20%] w-[500px] h-[500px] bg-brand-600/20 rounded-full mix-blend-screen filter blur-[120px] animate-float pointer-events-none"></div>
|
||||
<div class="fixed bottom-0 right-[20%] w-[600px] h-[600px] bg-purple-600/20 rounded-full mix-blend-screen filter blur-[150px] animate-float-delayed pointer-events-none"></div>
|
||||
|
||||
<div class="max-w-[850px] w-full px-5 z-10 relative flex flex-col">
|
||||
|
||||
<!-- Header (Luxurious) -->
|
||||
<div class="text-center space-y-4 mb-8 shrink-0 pt-6 relative">
|
||||
<!-- Agent ID Mini Badge -->
|
||||
<div class="absolute right-0 top-2 flex items-center bg-slate-800/50 border border-slate-700/50 rounded-lg px-3 py-1.5 shadow-sm">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
||||
<input type="text" id="agentId" name="agentId" value="AGENT-AI-1" class="bg-transparent border-none text-xs text-slate-300 font-mono focus:outline-none w-20 text-right" readonly>
|
||||
</div>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full border border-brand-500/30 bg-brand-500/10 text-brand-400 text-[10px] font-bold uppercase tracking-[0.2em] mb-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-brand-400 mr-2 animate-pulse"></span>
|
||||
Next-Gen Router
|
||||
</div>
|
||||
<h1 class="text-5xl font-outfit font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-br from-white via-slate-200 to-slate-500 drop-shadow-sm">
|
||||
신한라이프 AI MCP Gateway
|
||||
</h1>
|
||||
<p class="text-sm text-slate-400 font-medium tracking-wide">
|
||||
엔터프라이즈 환경을 위한 차세대 통합 라우팅 시스템
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Configuration Panel -->
|
||||
<div class="glass-panel rounded-[2rem] p-8 relative shrink-0">
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div id="loadingOverlay">
|
||||
<div class="relative w-16 h-16 mb-6">
|
||||
<div class="modern-spinner absolute inset-0"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-2 h-2 bg-brand-400 rounded-full animate-ping"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-outfit font-semibold text-white tracking-wider">처리중 입니다...</h3>
|
||||
<p class="text-slate-400 text-sm mt-2 font-medium">EIMS 시스템과 안전하게 통신 중입니다</p>
|
||||
</div>
|
||||
|
||||
<form id="mcpForm" class="space-y-6">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Target Tool Selection -->
|
||||
<div class="group">
|
||||
<label for="toolName" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
대상 툴 (Target Tool)
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select id="toolName" name="toolName" class="input-premium block w-full pl-4 pr-10 py-3 text-sm rounded-xl appearance-none cursor-pointer font-medium">
|
||||
<option value="">로딩 중...</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Target Action Selection -->
|
||||
<div class="group">
|
||||
<label for="toolAction" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
실행 함수 (Action)
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select id="toolAction" name="toolAction" class="input-premium block w-full pl-4 pr-10 py-3 text-sm rounded-xl appearance-none cursor-pointer font-medium">
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent ID moved to Header -->
|
||||
|
||||
<!-- User Prompt -->
|
||||
<div class="group">
|
||||
<label for="userPrompt" class="flex items-center text-xs font-bold text-slate-400 mb-2 uppercase tracking-widest transition-colors group-focus-within:text-brand-400">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
|
||||
사용자 프롬프트 (User Prompt)
|
||||
</label>
|
||||
<textarea id="userPrompt" name="userPrompt" rows="2" class="input-premium block w-full py-3 px-4 text-sm rounded-xl resize-none placeholder-slate-600 font-medium" placeholder="요청하실 내용을 자유롭게 입력하세요. (예: 김신한 고객 정보 조회)"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Action Area -->
|
||||
<div class="flex items-center justify-between pt-4 mt-2 border-t border-white/5">
|
||||
<div class="flex items-center">
|
||||
<div class="text-xs font-mono bg-slate-900/80 px-3 py-2 rounded-lg border border-slate-700/50 flex items-center shadow-inner">
|
||||
<span class="text-emerald-400 font-bold mr-2 text-[10px] tracking-wider">POST</span>
|
||||
<span class="text-slate-300">/mcp/api/v1/tools/call</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-glow">
|
||||
<button type="submit" class="relative inline-flex items-center px-8 py-3 text-sm font-bold rounded-xl text-white bg-gradient-to-r from-brand-600 to-indigo-600 hover:from-brand-500 hover:to-indigo-500 shadow-lg shadow-brand-500/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
Execute
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Result Panel -->
|
||||
<div id="resultContainer" class="hidden transition-all duration-500 ease-out opacity-0 translate-y-8 mt-6 pb-6">
|
||||
<div class="bg-[#0d1117] rounded-2xl shadow-2xl border border-slate-700/50 flex flex-col overflow-hidden relative group">
|
||||
<!-- Header -->
|
||||
<div class="bg-[#161b22] px-5 py-3 flex justify-between items-center border-b border-slate-800 shrink-0">
|
||||
<div class="flex space-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-[#ff5f56] border border-[#e0443e]"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-[#ffbd2e] border border-[#dea123]"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-[#27c93f] border border-[#1aab29]"></div>
|
||||
</div>
|
||||
<div class="text-[10px] font-mono font-medium text-slate-500 tracking-widest uppercase">Output_Terminal</div>
|
||||
<span id="statusBadge" class="inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono hidden"></span>
|
||||
</div>
|
||||
<!-- Payload Output -->
|
||||
<div class="p-6 relative">
|
||||
<pre id="jsonResponse" class="json-pre m-0 whitespace-pre-wrap font-mono relative z-10 font-medium"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let toolFunctions = {};
|
||||
let actionPrompts = {};
|
||||
|
||||
const toolSelect = document.getElementById('toolName');
|
||||
const toolActionSelect = document.getElementById('toolAction');
|
||||
|
||||
async function fetchTools() {
|
||||
try {
|
||||
const response = await fetch('/mcp/api/v1/tools/list', {
|
||||
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
toolSelect.innerHTML = '';
|
||||
toolFunctions = {};
|
||||
actionPrompts = {};
|
||||
|
||||
const tools = data.result?.tools || [];
|
||||
|
||||
if (tools.length === 0) {
|
||||
toolSelect.innerHTML = '<option value="">등록된 툴이 없습니다</option>';
|
||||
updateActionDropdown();
|
||||
return;
|
||||
}
|
||||
|
||||
const groupedTools = {};
|
||||
tools.forEach(tool => {
|
||||
const group = tool._meta?.category_key || '기타';
|
||||
if (!groupedTools[group]) {
|
||||
groupedTools[group] = [];
|
||||
}
|
||||
groupedTools[group].push(tool);
|
||||
});
|
||||
|
||||
Object.keys(groupedTools).sort().forEach(group => {
|
||||
const optgroup = document.createElement('optgroup');
|
||||
let label = group;
|
||||
if (group.toLowerCase().startsWith('group_')) {
|
||||
label = 'Group ' + group.split('_')[1];
|
||||
}
|
||||
optgroup.label = label;
|
||||
|
||||
groupedTools[group].forEach(tool => {
|
||||
const option = document.createElement('option');
|
||||
option.value = tool.name;
|
||||
const commType = tool._meta?.integrationType || 'HTTP';
|
||||
option.textContent = tool.description ? `[${commType}] ${tool.description} (${tool.name})` : `[${commType}] ${tool.name}`;
|
||||
option.dataset.schema = JSON.stringify(tool.inputSchema || tool.parametersSchema);
|
||||
option.dataset.prompts = JSON.stringify(tool.actionPrompts || {});
|
||||
optgroup.appendChild(option);
|
||||
|
||||
const enums = tool.parametersSchema?.properties?.action?.enum || [];
|
||||
const descStr = tool.parametersSchema?.properties?.action?.description || "";
|
||||
|
||||
let descMap = {};
|
||||
if(descStr.includes(":")) {
|
||||
const items = descStr.split(":")[1].split(",");
|
||||
items.forEach(item => {
|
||||
const parts = item.trim().split("(");
|
||||
if(parts.length > 1) {
|
||||
descMap[parts[0]] = parts[1].replace(")","");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toolFunctions[tool.name] = enums.map(e => {
|
||||
return { value: e, label: descMap[e] || e };
|
||||
});
|
||||
|
||||
if (tool.actionPrompts) {
|
||||
Object.assign(actionPrompts, tool.actionPrompts);
|
||||
}
|
||||
});
|
||||
|
||||
toolSelect.appendChild(optgroup);
|
||||
});
|
||||
|
||||
updateActionDropdown();
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch tools", err);
|
||||
toolSelect.innerHTML = '<option value="">데이터 로드 실패</option>';
|
||||
}
|
||||
}
|
||||
|
||||
function updateActionDropdown() {
|
||||
const toolName = toolSelect.value;
|
||||
const actions = toolFunctions[toolName] || [];
|
||||
|
||||
toolActionSelect.innerHTML = '';
|
||||
|
||||
if (actions.length === 0) {
|
||||
const defaultOption = document.createElement('option');
|
||||
defaultOption.value = 'default';
|
||||
defaultOption.textContent = '기본 동작';
|
||||
toolActionSelect.appendChild(defaultOption);
|
||||
document.getElementById('userPrompt').value = "";
|
||||
} else {
|
||||
actions.forEach(action => {
|
||||
const option = document.createElement('option');
|
||||
option.value = action.value;
|
||||
option.textContent = action.label;
|
||||
toolActionSelect.appendChild(option);
|
||||
});
|
||||
|
||||
updatePrompt(actions[0].value, toolName);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePrompt(actionValue, toolName) {
|
||||
let promptKey = actionValue;
|
||||
if (toolName === "customer_info_tool" && actionValue === "detail") {
|
||||
promptKey = "detail_cust";
|
||||
}
|
||||
document.getElementById('userPrompt').value = actionPrompts[promptKey] || "작업을 실행해주세요.";
|
||||
}
|
||||
|
||||
toolSelect.addEventListener('change', updateActionDropdown);
|
||||
|
||||
toolActionSelect.addEventListener('change', function() {
|
||||
updatePrompt(this.value, toolSelect.value);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', fetchTools);
|
||||
|
||||
document.getElementById('mcpForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const loadingOverlay = document.getElementById('loadingOverlay');
|
||||
const resultContainer = document.getElementById('resultContainer');
|
||||
const jsonResponse = document.getElementById('jsonResponse');
|
||||
const statusBadge = document.getElementById('statusBadge');
|
||||
|
||||
resultContainer.classList.add('opacity-0', 'translate-y-8');
|
||||
setTimeout(() => resultContainer.classList.add('hidden'), 300);
|
||||
|
||||
// Show Loading
|
||||
loadingOverlay.classList.add('active');
|
||||
|
||||
const payload = {
|
||||
traceId: "MCP-REQ-" + Math.floor(Math.random() * 90000 + 10000),
|
||||
agentId: document.getElementById('agentId').value,
|
||||
userPrompt: document.getElementById('userPrompt').value || document.getElementById('userPrompt').placeholder,
|
||||
toolName: document.getElementById('toolName').value,
|
||||
action: document.getElementById('toolAction').value
|
||||
};
|
||||
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
const response = await fetch('/mcp/api/v1/tools/call', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const latency = Date.now() - startTime;
|
||||
|
||||
// Dark theme optimized syntax highlighting
|
||||
let formattedJson = JSON.stringify(data, null, 4)
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||
let cls = 'text-slate-300';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) {
|
||||
cls = 'text-cyan-400 font-medium'; // Key
|
||||
} else {
|
||||
cls = 'text-emerald-400'; // String
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'text-amber-400 font-medium'; // Boolean
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'text-slate-500 italic'; // Null
|
||||
} else {
|
||||
cls = 'text-pink-400'; // Number
|
||||
}
|
||||
return '<span class="' + cls + '">' + match + '</span>';
|
||||
});
|
||||
|
||||
jsonResponse.innerHTML = formattedJson;
|
||||
|
||||
statusBadge.classList.remove('hidden');
|
||||
if(response.ok) {
|
||||
statusBadge.innerHTML = `200 OK <span class="ml-2 opacity-60 font-medium">${latency}ms</span>`;
|
||||
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20';
|
||||
} else {
|
||||
statusBadge.innerHTML = `${response.status} ERR <span class="ml-2 opacity-60 font-medium">${latency}ms</span>`;
|
||||
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-rose-500/10 text-rose-400 border border-rose-500/20';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
jsonResponse.textContent = "Error: " + error.message;
|
||||
statusBadge.innerHTML = `FAILED`;
|
||||
statusBadge.className = 'inline-flex items-center px-2.5 py-1 rounded-md text-[10px] font-bold font-mono bg-rose-500/10 text-rose-400 border border-rose-500/20';
|
||||
statusBadge.classList.remove('hidden');
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
loadingOverlay.classList.remove('active');
|
||||
resultContainer.classList.remove('hidden');
|
||||
void resultContainer.offsetWidth; // Force reflow
|
||||
resultContainer.classList.remove('opacity-0', 'translate-y-8');
|
||||
}, 800); // slightly longer loading effect for premium feel
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
206
dat-gateway/src/main/resources/static/tool-report.html
Normal file
206
dat-gateway/src/main/resources/static/tool-report.html
Normal file
@@ -0,0 +1,206 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>AXHUB Tool Report</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: "Geist", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; min-height: 100vh; background: #09090b; color: #f4f4f5; overflow-y: scroll; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #27272a; background: rgba(9,9,11,.86); backdrop-filter: blur(16px); }
|
||||
.nav-shell { max-width: 1152px; height: 56px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.nav-left, nav { display: flex; align-items: center; }
|
||||
.brand { display: flex; align-items: center; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
|
||||
.brand-dot { width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,.8); }
|
||||
.divider { width: 1px; height: 16px; margin: 0 20px; background: #27272a; }
|
||||
nav { gap: 20px; font-size: 13px; font-weight: 500; color: #a1a1aa; }
|
||||
nav a { transition: color .15s ease; white-space: nowrap; }
|
||||
nav a:hover { color: #fff; }
|
||||
nav .active { color: #fff; font-weight: 600; }
|
||||
.version { padding: 4px 8px; border: 1px solid rgba(59,130,246,.2); border-radius: 5px; background: rgba(59,130,246,.1); color: #60a5fa; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
|
||||
main { max-width: 1152px; margin: 0 auto; padding: 40px 24px 72px; }
|
||||
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
|
||||
h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.2; letter-spacing: -.035em; }
|
||||
.subtitle { margin: 0; color: #a1a1aa; font-size: 14px; line-height: 1.65; }
|
||||
.count-badge { padding: 7px 11px; border: 1px solid #27272a; border-radius: 8px; background: #18181b; color: #a1a1aa; font-family: "Geist Mono", Consolas, monospace; font-size: 12px; white-space: nowrap; }
|
||||
.panel { overflow: hidden; border: 1px solid #27272a; border-radius: 12px; background: #111113; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
|
||||
.toolbar { display: grid; grid-template-columns: minmax(260px,1fr) 190px auto auto; gap: 10px; padding: 16px; border-bottom: 1px solid #27272a; background: #111113; }
|
||||
input, select, button { min-height: 40px; border: 1px solid #3f3f46; border-radius: 7px; background: #18181b; color: #e4e4e7; padding: 8px 12px; font: inherit; font-size: 13px; outline: none; }
|
||||
input::placeholder { color: #71717a; }
|
||||
input:focus, select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
|
||||
button { cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
|
||||
button:hover { border-color: #52525b; background: #27272a; color: #fff; }
|
||||
button.primary { min-width: 174px; border-color: #2563eb; background: #2563eb; color: #fff; }
|
||||
button.primary:hover { background: #1d4ed8; }
|
||||
button:disabled { cursor: not-allowed; opacity: .45; }
|
||||
.table-wrap { max-height: 570px; overflow: auto; }
|
||||
table { width: 100%; min-width: 980px; border-collapse: collapse; }
|
||||
th, td { padding: 13px 15px; border-bottom: 1px solid #27272a; text-align: left; vertical-align: top; }
|
||||
th { position: sticky; top: 0; z-index: 2; background: #18181b; color: #a1a1aa; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
|
||||
td { color: #d4d4d8; font-size: 13px; line-height: 1.55; }
|
||||
tbody tr { transition: background .12s ease; }
|
||||
tbody tr:hover { background: rgba(39,39,42,.5); }
|
||||
td:first-child, th:first-child { width: 58px; text-align: center; }
|
||||
input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; accent-color: #3b82f6; }
|
||||
code { color: #60a5fa; font-family: "Geist Mono", Consolas, monospace; font-size: 12px; }
|
||||
.muted { color: #71717a; }
|
||||
.panel-footer { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border-top: 1px solid #27272a; background: #111113; }
|
||||
#message { color: #a1a1aa; font-size: 13px; }
|
||||
#message.error { color: #fca5a5; }
|
||||
.loading-row { padding: 42px !important; color: #71717a; text-align: center !important; }
|
||||
@media (max-width: 900px) {
|
||||
.nav-shell { overflow-x: auto; }
|
||||
.version { display: none; }
|
||||
nav { gap: 14px; }
|
||||
.toolbar { grid-template-columns: 1fr 1fr; }
|
||||
.page-heading { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav-shell">
|
||||
<div class="nav-left">
|
||||
<a id="gatewayHome" class="brand" href="#"><span class="brand-dot"></span><span>AXHUB Gateway</span></a>
|
||||
<div class="divider"></div>
|
||||
<nav>
|
||||
<a data-gateway-path="/admin/scaffold.html" href="#">Scaffold</a>
|
||||
<a data-gateway-path="/catalog.html" href="#">Catalog</a>
|
||||
<a data-gateway-path="/playground.html" href="#">Playground</a>
|
||||
<a data-gateway-path="/chat.html" href="#">Chat</a>
|
||||
<a data-gateway-path="/tester.html" href="#">Tester</a>
|
||||
<a data-gateway-path="/tool-test-console.html" href="#">Console</a>
|
||||
<a class="active" href="/tool-report.html">Report</a>
|
||||
</nav>
|
||||
</div>
|
||||
<span class="version">v0.0.1</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<h1>Tool Report</h1>
|
||||
<p class="subtitle">보고서에 포함할 MCP 툴을 선택하고, 소스 어노테이션과 전문 필드를 동일한 Excel 양식으로 생성합니다.</p>
|
||||
</div>
|
||||
<span id="summaryBadge" class="count-badge">Loading tools...</span>
|
||||
</div>
|
||||
|
||||
<section class="panel">
|
||||
<div class="toolbar">
|
||||
<input id="keyword" type="search" autocomplete="off" placeholder="툴명, 제목 또는 설명 검색">
|
||||
<select id="category"><option value="">전체 카테고리</option></select>
|
||||
<button id="selectAll" type="button">전체 선택</button>
|
||||
<button id="clearAll" type="button">전체 해제</button>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>선택</th><th>툴명</th><th>제목</th><th>카테고리</th><th>연계 ID</th><th>설명</th></tr></thead>
|
||||
<tbody id="tools"><tr><td class="loading-row" colspan="6">툴 목록을 불러오는 중입니다.</td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<span id="message">소스 인덱스를 준비하고 있습니다.</span>
|
||||
<button id="download" type="button" class="primary" disabled>Excel 보고서 생성</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const state = { tools: [], selected: new Set() };
|
||||
const el = id => document.getElementById(id);
|
||||
|
||||
const gateway = location.origin;
|
||||
el('gatewayHome').href = gateway + '/index.html';
|
||||
document.querySelectorAll('[data-gateway-path]').forEach(link => link.href = gateway + link.dataset.gatewayPath);
|
||||
|
||||
function filtered() {
|
||||
const keyword = el('keyword').value.trim().toLowerCase();
|
||||
const category = el('category').value;
|
||||
return state.tools.filter(tool => (!category || tool.categoryKey === category) &&
|
||||
(!keyword || [tool.name, tool.title, tool.description].join(' ').toLowerCase().includes(keyword)));
|
||||
}
|
||||
|
||||
function render() {
|
||||
const visible = filtered();
|
||||
el('tools').innerHTML = visible.length ? visible.map(tool => `<tr>
|
||||
<td><input type="checkbox" aria-label="${escapeHtml(tool.name)} 선택" data-name="${escapeHtml(tool.name)}" ${state.selected.has(tool.name) ? 'checked' : ''}></td>
|
||||
<td><code>${escapeHtml(tool.name)}</code></td><td>${escapeHtml(tool.title)}</td>
|
||||
<td>${escapeHtml(tool.categoryKey)}</td><td>${escapeHtml(tool.mappingId || '-')}</td><td class="muted">${escapeHtml(tool.description)}</td>
|
||||
</tr>`).join('') : '<tr><td class="loading-row" colspan="6">조건에 맞는 툴이 없습니다.</td></tr>';
|
||||
el('tools').querySelectorAll('input[type=checkbox]').forEach(box => box.addEventListener('change', event => {
|
||||
event.target.checked ? state.selected.add(event.target.dataset.name) : state.selected.delete(event.target.dataset.name);
|
||||
updateStatus();
|
||||
}));
|
||||
updateStatus();
|
||||
}
|
||||
|
||||
function updateStatus(text) {
|
||||
el('message').textContent = text || `전체 ${state.tools.length}개 중 ${state.selected.size}개 선택`;
|
||||
el('message').classList.remove('error');
|
||||
el('summaryBadge').textContent = `${state.tools.length} tools · ${state.selected.size} selected`;
|
||||
el('download').disabled = state.selected.size === 0;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '').replace(/[&<>'"]/g, char => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[char]));
|
||||
}
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const response = await fetch('/report/api/report-tools');
|
||||
const body = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
throw new Error(body?.error || body?.message || `툴 목록 조회에 실패했습니다. (${response.status})`);
|
||||
}
|
||||
const tools = Array.isArray(body) ? body : body?.result?.tools;
|
||||
if (!Array.isArray(tools)) {
|
||||
throw new Error('툴 목록 응답 형식이 올바르지 않습니다.');
|
||||
}
|
||||
state.tools = tools;
|
||||
[...new Set(state.tools.map(tool => tool.categoryKey))].sort().forEach(category => {
|
||||
const option = document.createElement('option');
|
||||
option.value = category; option.textContent = category; el('category').appendChild(option);
|
||||
});
|
||||
render();
|
||||
} catch (error) {
|
||||
el('tools').innerHTML = '<tr><td class="loading-row" colspan="6">툴 목록을 표시할 수 없습니다.</td></tr>';
|
||||
el('message').textContent = error.message; el('message').classList.add('error');
|
||||
el('summaryBadge').textContent = 'Load failed';
|
||||
}
|
||||
}
|
||||
|
||||
el('keyword').addEventListener('input', render);
|
||||
el('category').addEventListener('change', render);
|
||||
el('selectAll').addEventListener('click', () => { filtered().forEach(tool => state.selected.add(tool.name)); render(); });
|
||||
el('clearAll').addEventListener('click', () => { filtered().forEach(tool => state.selected.delete(tool.name)); render(); });
|
||||
el('download').addEventListener('click', async () => {
|
||||
el('download').disabled = true; updateStatus('소스를 분석하고 Excel을 생성하는 중입니다.');
|
||||
try {
|
||||
const response = await fetch('/report/api/tool-reports/excel', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({toolNames: [...state.selected]})
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = await response.json().catch(() => ({}));
|
||||
throw new Error(body.error || '보고서 생성에 실패했습니다.');
|
||||
}
|
||||
const blob = await response.blob();
|
||||
const url = URL.createObjectURL(blob); const anchor = document.createElement('a');
|
||||
anchor.href = url; anchor.download = 'tool-report.xlsx'; anchor.click(); URL.revokeObjectURL(url);
|
||||
updateStatus(`선택한 ${state.selected.size}개 툴의 보고서를 생성했습니다.`);
|
||||
} catch (error) {
|
||||
el('message').textContent = error.message; el('message').classList.add('error');
|
||||
} finally { el('download').disabled = state.selected.size === 0; }
|
||||
});
|
||||
|
||||
load();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user