feat: Premium Dark Theme UI redesign for all admin pages
- index.html: Complete redesign with deep zinc-950 background, card-based dashboard, neon blue accents - catalog.html: Full rewrite with dark theme, styled parameter tables with visible borders, tool cards - playground.html: Full rewrite with dark theme, visible input fields, gradient Execute button with glow effect - scaffold.html: CSS variables updated to dark theme (zinc-900 backgrounds, zinc-100 text, blue accents) - ScaffoldingController.java: Added listModules API for dynamic module dropdown
This commit is contained in:
jade
@@ -4,6 +4,10 @@ import io.shinhanlife.axhub.common.util.PodScaffolder;
|
||||
import io.shinhanlife.axhub.common.util.ToolScaffolder;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import java.util.Map;
|
||||
import java.util.List;
|
||||
import java.util.Arrays;
|
||||
import java.util.stream.Collectors;
|
||||
import java.io.File;
|
||||
|
||||
@RestController
|
||||
@RequestMapping("/api/v1/scaffold")
|
||||
@@ -59,4 +63,21 @@ public class ScaffoldingController {
|
||||
return "오류 발생: " + e.getMessage();
|
||||
}
|
||||
}
|
||||
|
||||
@GetMapping("/modules")
|
||||
public List<String> listModules() {
|
||||
try {
|
||||
String sourceDir = System.getenv("AXHUB_SOURCE_DIR");
|
||||
if (sourceDir == null) sourceDir = System.getProperty("user.dir");
|
||||
|
||||
File dir = new File(sourceDir);
|
||||
File[] files = dir.listFiles(f -> f.isDirectory() && f.getName().startsWith("axhub-tool-") && !f.getName().equals("axhub-tool-core"));
|
||||
|
||||
if (files == null) return List.of("axhub-tool-other");
|
||||
|
||||
return Arrays.stream(files).map(File::getName).sorted().collect(Collectors.toList());
|
||||
} catch (Exception e) {
|
||||
return List.of("axhub-tool-other");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,87 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<html lang="ko" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>신한라이프 AXHUB Developer Portal</title>
|
||||
<!-- Google Fonts: Inter -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<title>AX HUB Developer Portal</title>
|
||||
<!-- Geist Fonts -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/400.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/500.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/600.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.0.1/400.css">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
||||
--surface-color: rgba(255, 255, 255, 0.95);
|
||||
--bg-color: #f3f4f6;
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--border-radius: 16px;
|
||||
--bg-color: #09090b;
|
||||
--surface-color: #18181b;
|
||||
--border-color: #3f3f46; /* zinc-700 */
|
||||
--text-primary: #f4f4f5; /* zinc-100 */
|
||||
--text-secondary: #a1a1aa; /* zinc-400 */
|
||||
--accent-color: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--link-color: #60a5fa; /* blue-400 */
|
||||
--radius-md: 6px;
|
||||
--radius-sm: 4px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, hsla(253,16%,7%,0.05) 0, transparent 50%),
|
||||
radial-gradient(at 50% 0%, hsla(225,39%,30%,0.05) 0, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(339,49%,30%,0.05) 0, transparent 50%);
|
||||
background-attachment: fixed;
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
padding: 4rem 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
max-width: 1000px; /* Tighter layout */
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Editorial / Tech Header */
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
text-align: left;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-weight: 700;
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.025em;
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
/* Clean Panel */
|
||||
.panel {
|
||||
background: var(--surface-color);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* Custom Tabs */
|
||||
/* Minimalist Tabs */
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||||
background: rgba(249, 250, 251, 0.5);
|
||||
padding: 0.5rem 1rem 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: #0f0f11;
|
||||
padding: 0 1.5rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item {
|
||||
@@ -92,120 +87,198 @@
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 1.05rem;
|
||||
font-size: 0.875rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color 0.15s ease;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link:hover {
|
||||
color: #4f46e5;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active {
|
||||
color: #4f46e5;
|
||||
background: transparent;
|
||||
border-bottom: 3px solid #4f46e5;
|
||||
color: var(--text-primary);
|
||||
border-bottom: 2px solid var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 2rem;
|
||||
padding: 2rem 1.5rem;
|
||||
background: var(--surface-color);
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
/* Dense Forms */
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s;
|
||||
background-color: #f9fafb;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
background-color: var(--surface-color);
|
||||
color: var(--text-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
||||
background-color: #fff;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
|
||||
background-color: var(--surface-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: var(--text-secondary);
|
||||
box-shadow: 0 0 0 1px var(--text-secondary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: #9ca3af;
|
||||
color: #a1a1aa; /* zinc-400 */
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-gradient {
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
.input-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
/* Utilitarian Button */
|
||||
.btn-action {
|
||||
background: var(--accent-color);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.025em;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2), 0 2px 4px -1px rgba(79, 70, 229, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
transition: background-color 0.1s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.btn-gradient:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3), 0 4px 6px -2px rgba(79, 70, 229, 0.15);
|
||||
color: white;
|
||||
.btn-action:hover {
|
||||
background: var(--accent-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-gradient:active {
|
||||
transform: translateY(0);
|
||||
.btn-action:active {
|
||||
transform: scale(0.98); /* Tactile feedback */
|
||||
}
|
||||
|
||||
/* Result Box */
|
||||
.btn-secondary-action {
|
||||
background: var(--surface-color);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.3rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-secondary-action:hover {
|
||||
background: #f4f4f5;
|
||||
}
|
||||
|
||||
/* Result Box - Terminal Style */
|
||||
#resultBox {
|
||||
display: none;
|
||||
margin-top: 2rem;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
white-space: pre-wrap;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
border: none;
|
||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
|
||||
background-color: #f8fafc;
|
||||
color: #334155;
|
||||
animation: fadeIn 0.4s ease forwards;
|
||||
font-family: 'Geist Mono', Consolas, monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
background-color: #09090b; /* zinc-950 */
|
||||
color: #e4e4e7; /* zinc-200 */
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
|
||||
#resultBox.success {
|
||||
border-left: 4px solid #10b981;
|
||||
border-top: 3px solid #10b981;
|
||||
}
|
||||
|
||||
#resultBox.error {
|
||||
border-left: 4px solid #ef4444;
|
||||
background-color: #fef2f2;
|
||||
color: #991b1b;
|
||||
border-top: 3px solid #ef4444;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
/* Dense Table */
|
||||
.table {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Input Groups */
|
||||
.input-icon-wrapper {
|
||||
position: relative;
|
||||
.table th {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.75rem;
|
||||
background: transparent;
|
||||
}
|
||||
.input-hint {
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.25rem;
|
||||
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
padding: 1rem 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.badge-mono {
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
padding: 0.25em 0.5em;
|
||||
border-radius: 4px;
|
||||
background: #f4f4f5;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
a.tool-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a.tool-link:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
/* Modal styling overrides */
|
||||
.modal-content {
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -213,20 +286,20 @@
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>신한라이프 AXHUB Developer Portal</h1>
|
||||
<p>No-Code 스캐폴딩 마법사로 모듈과 툴을 즉시 생성하세요</p>
|
||||
<h1>Developer Portal</h1>
|
||||
<p>AX HUB No-Code Scaffolding Wizard</p>
|
||||
</div>
|
||||
|
||||
<div class="glass-card">
|
||||
<div class="panel">
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="pod-tab" data-bs-toggle="tab" data-bs-target="#pod" type="button" role="tab">📦 Pod (모듈) 생성</button>
|
||||
<button class="nav-link active" id="pod-tab" data-bs-toggle="tab" data-bs-target="#pod" type="button" role="tab">Pod Module</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="tool-tab" data-bs-toggle="tab" data-bs-target="#tool" type="button" role="tab">⚙️ Tool (기능) 생성</button>
|
||||
<button class="nav-link" id="tool-tab" data-bs-toggle="tab" data-bs-target="#tool" type="button" role="tab">Tool Function</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#list" type="button" role="tab" onclick="loadToolList()">📋 등록된 Tool 목록</button>
|
||||
<button class="nav-link" id="list-tab" data-bs-toggle="tab" data-bs-target="#list" type="button" role="tab" onclick="loadToolList()">Registry</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -237,25 +310,27 @@
|
||||
<div class="tab-pane fade show active" id="pod" role="tabpanel">
|
||||
<form id="podForm">
|
||||
<div class="mb-4">
|
||||
<label class="form-label">새로운 모듈 이름</label>
|
||||
<input type="text" class="form-control" name="moduleName" placeholder="예: hr (입력 시 axhub-tool-hr 로 자동 변환)" required>
|
||||
<label class="form-label">Module Name</label>
|
||||
<input type="text" class="form-control" name="moduleName" placeholder="e.g. hr (will be prefixed with axhub-tool-)" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label">서비스 포트 번호</label>
|
||||
<input type="number" class="form-control" name="port" placeholder="예: 8086" required>
|
||||
<div class="input-hint">Gateway 라우팅 및 Local 실행 시 사용할 고유 포트 번호입니다.</div>
|
||||
<label class="form-label">Service Port</label>
|
||||
<input type="number" class="form-control" name="port" placeholder="e.g. 8086" required>
|
||||
<div class="input-hint">Unique port for Gateway routing and local development.</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">작성자 (선택)</label>
|
||||
<input type="text" class="form-control" name="author" placeholder="미입력 시 OS 사용자명">
|
||||
<label class="form-label">Author</label>
|
||||
<input type="text" class="form-control" name="author" placeholder="Defaults to OS user">
|
||||
</div>
|
||||
<div class="col-md-6 mt-3 mt-md-0">
|
||||
<label class="form-label">작성일 (선택)</label>
|
||||
<input type="text" class="form-control" name="date" placeholder="미입력 시 오늘 날짜">
|
||||
<label class="form-label">Date</label>
|
||||
<input type="text" class="form-control" name="date" placeholder="Defaults to today">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-gradient w-100">🚀 Pod 모듈 자동 생성</button>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button type="submit" class="btn-action">Generate Pod</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -264,104 +339,108 @@
|
||||
<form id="toolForm">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">기본 이름 (PascalCase)</label>
|
||||
<input type="text" class="form-control" name="baseName" placeholder="예: ExchangeRate" required>
|
||||
<div class="input-hint">클래스명 생성에 사용됩니다. (ExchangeRateService 등)</div>
|
||||
<label class="form-label">Base Name (PascalCase)</label>
|
||||
<input type="text" class="form-control" name="baseName" placeholder="e.g. ExchangeRate" required>
|
||||
<div class="input-hint">Used for class generation (ExchangeRateService).</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-3 mt-md-0">
|
||||
<label class="form-label">레거시 API 인터페이스 ID</label>
|
||||
<input type="text" class="form-control" name="interfaceId" placeholder="예: EXCH_001" required>
|
||||
<label class="form-label">Legacy Interface ID</label>
|
||||
<input type="text" class="form-control" name="interfaceId" placeholder="e.g. EXCH_001" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">기능 설명 (LLM 프롬프트용)</label>
|
||||
<input type="text" class="form-control" name="description" placeholder="예: 고객의 현재 환율을 조회합니다." required>
|
||||
<div class="input-hint">AI 에이전트가 이 설명을 보고 툴 호출 여부를 결정하므로 상세히 적어주세요.</div>
|
||||
<label class="form-label">Description (LLM Prompt)</label>
|
||||
<input type="text" class="form-control" name="description" placeholder="e.g. Fetch current exchange rates for customers." required>
|
||||
<div class="input-hint">Critical for AI agent intent matching. Be descriptive.</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">소속 도메인 그룹</label>
|
||||
<input type="text" class="form-control" name="categoryKey" pattern="^[a-z0-9][a-z0-9_-]*$" list="groupList" placeholder="선택 또는 직접 입력 (소문자)" oninput="this.value = this.value.toLowerCase()" required>
|
||||
<label class="form-label">Domain Category</label>
|
||||
<input type="text" class="form-control" name="categoryKey" pattern="^[a-z0-9][a-z0-9_-]*$" list="groupList" placeholder="e.g. common, hr, payment" oninput="this.value = this.value.toLowerCase()" required>
|
||||
<datalist id="groupList">
|
||||
<option value="COMMON">COMMON (공통)</option>
|
||||
<option value="CUSTOMER">CUSTOMER (고객)</option>
|
||||
<option value="CONTRACT">CONTRACT (계약)</option>
|
||||
<option value="CLAIM">CLAIM (보상)</option>
|
||||
<option value="common">common</option>
|
||||
<option value="customer">customer</option>
|
||||
<option value="contract">contract</option>
|
||||
<option value="claim">claim</option>
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="col-md-6 mt-3 mt-md-0">
|
||||
<label class="form-label">통신 프로토콜</label>
|
||||
<label class="form-label">Protocol</label>
|
||||
<select class="form-select" name="routingType">
|
||||
<option value="HTTP">HTTP (REST)</option>
|
||||
<option value="TCP">TCP (Socket)</option>
|
||||
<option value="MCI">MCI (대내외 연계)</option>
|
||||
<option value="EAI">EAI (내부 연계)</option>
|
||||
<option value="MCI">MCI (Legacy)</option>
|
||||
<option value="EAI">EAI (Internal)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">타겟 모듈명</label>
|
||||
<input type="text" class="form-control" name="moduleName" value="axhub-tool-other" required>
|
||||
<div class="input-hint">코드가 생성될 대상 프로젝트(Pod) 폴더명입니다.</div>
|
||||
<label class="form-label">Target Module</label>
|
||||
<select class="form-select" name="moduleName" id="targetModuleSelect" required>
|
||||
<option value="axhub-tool-other">axhub-tool-other</option>
|
||||
</select>
|
||||
<div class="input-hint">Destination Pod directory.</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-3 mt-md-0">
|
||||
<label class="form-label">레지스트리 등록 (register)</label>
|
||||
<label class="form-label">Gateway Registration</label>
|
||||
<select class="form-select" name="register">
|
||||
<option value="true">True (공개)</option>
|
||||
<option value="false">False (비공개)</option>
|
||||
<option value="true">True (Public)</option>
|
||||
<option value="false">False (Private)</option>
|
||||
</select>
|
||||
<div class="input-hint">Gateway에서 자동 라우팅될지 여부입니다.</div>
|
||||
<div class="input-hint">Controls dynamic routing exposure.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">작성자 (선택)</label>
|
||||
<input type="text" class="form-control" name="author" placeholder="미입력 시 OS 사용자명">
|
||||
<label class="form-label">Author</label>
|
||||
<input type="text" class="form-control" name="author" placeholder="Defaults to OS user">
|
||||
</div>
|
||||
<div class="col-md-6 mt-3 mt-md-0">
|
||||
<label class="form-label">작성일 (선택)</label>
|
||||
<input type="text" class="form-control" name="date" placeholder="미입력 시 오늘 날짜">
|
||||
<label class="form-label">Date</label>
|
||||
<input type="text" class="form-control" name="date" placeholder="Defaults to today">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-gradient w-100">✨ Tool 기능 자동 생성</button>
|
||||
<div class="d-flex justify-content-end mt-4">
|
||||
<button type="submit" class="btn-action">Generate Tool</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Tool List Form -->
|
||||
<div class="tab-pane fade" id="list" role="tabpanel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h5 class="mb-1 text-secondary">현재 시스템에 라우팅 가능한 Tool 목록입니다.</h5>
|
||||
<small class="text-muted">Redis에 등록되지 않은(비공개) Tool도 포함되어 조회됩니다.</small>
|
||||
<h5 class="mb-1" style="font-size: 1rem; font-weight: 600;">Active Tools</h5>
|
||||
<div class="input-hint mt-0">Tools dynamically registered in the Gateway.</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<select id="groupFilterSelect" class="form-select form-select-sm" style="width: auto; min-width: 140px;" onchange="filterTools()">
|
||||
<option value="ALL">ALL (전체 그룹)</option>
|
||||
<select id="groupFilterSelect" class="form-select" style="width: auto; min-width: 140px; padding: 0.25rem 0.5rem; font-size: 0.8rem; height: 30px;" onchange="filterTools()">
|
||||
<option value="ALL">All Categories</option>
|
||||
</select>
|
||||
<input type="text" id="toolFilter" class="form-control form-control-sm" placeholder="🔍 이름 또는 그룹 검색..." onkeyup="filterTools()">
|
||||
<button class="btn btn-sm btn-outline-primary text-nowrap" onclick="loadToolList()">🔄 새로고침</button>
|
||||
<input type="text" id="toolFilter" class="form-control" style="padding: 0.25rem 0.5rem; font-size: 0.8rem; height: 30px;" placeholder="Search..." onkeyup="filterTools()">
|
||||
<button class="btn-secondary-action text-nowrap" style="height: 30px;" onclick="loadToolList()">Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle" id="toolTable">
|
||||
<thead class="table-light">
|
||||
<table class="table align-middle" id="toolTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10%; min-width: 100px;">그룹</th>
|
||||
<th style="width: 20%; min-width: 150px;">서브툴 이름</th>
|
||||
<th style="width: 35%; min-width: 200px;">설명</th>
|
||||
<th style="width: 15%; min-width: 180px;">Pod 모듈</th>
|
||||
<th style="width: 20%; min-width: 150px;">인터페이스 (ID)</th>
|
||||
<th style="width: 10%;">Category</th>
|
||||
<th style="width: 20%;">Tool Name</th>
|
||||
<th style="width: 40%;">Description</th>
|
||||
<th style="width: 15%;">Pod</th>
|
||||
<th style="width: 15%;">Interface</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="toolListBody">
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-4 text-muted">데이터를 불러오는 중입니다...</td>
|
||||
<td colspan="5" class="text-center py-5 text-muted">Loading data...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -380,38 +459,38 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editToolModalLabel">Tool 소스 코드 수정</h5>
|
||||
<h5 class="modal-title" id="editToolModalLabel">Edit Tool Definition</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editToolForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">서브툴 이름 (수정불가)</label>
|
||||
<input type="text" class="form-control" id="editToolName" name="toolName" readonly>
|
||||
<label class="form-label">Tool Name</label>
|
||||
<input type="text" class="form-control" id="editToolName" name="toolName" readonly style="background-color: #f4f4f5; color: #a1a1aa;">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">소속 도메인 그룹</label>
|
||||
<label class="form-label">Category</label>
|
||||
<input type="text" class="form-control" id="editCategoryKey" name="categoryKey" pattern="^[a-z0-9][a-z0-9_-]*$" oninput="this.value = this.value.toLowerCase()">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">설명</label>
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-control" id="editDescription" name="description" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">레지스트리 등록 (register)</label>
|
||||
<label class="form-label">Registry Exposure</label>
|
||||
<select class="form-select" id="editRegister" name="register">
|
||||
<option value="true">True (공개)</option>
|
||||
<option value="false">False (비공개)</option>
|
||||
<option value="true">True (Public)</option>
|
||||
<option value="false">False (Private)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="alert alert-warning p-2" style="font-size: 0.85rem;">
|
||||
⚠️ <strong>주의</strong>: 수정을 적용하면 물리적인 자바 소스 코드가 변경됩니다. 반영을 위해서는 백엔드 컨테이너의 재빌드가 필요합니다!
|
||||
<div style="font-size: 0.8rem; color: #d97706; background: #fffbeb; padding: 0.75rem; border: 1px solid #fde68a; border-radius: var(--radius-sm); margin-top: 1rem;">
|
||||
<strong>Notice:</strong> Applying edits modifies the physical Java source code. A rebuild of the backend container is required for changes to take effect.
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
|
||||
<button type="button" class="btn btn-primary" onclick="submitToolUpdate()">소스 수정 적용</button>
|
||||
<button type="button" class="btn-secondary-action" data-bs-dismiss="modal" style="padding: 0.5rem 1rem; font-size: 0.875rem;">Cancel</button>
|
||||
<button type="button" class="btn-action" onclick="submitToolUpdate()">Apply Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -428,8 +507,9 @@
|
||||
const btn = this.querySelector('button[type="submit"]');
|
||||
const originalText = btn.innerHTML;
|
||||
|
||||
btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 생성 중...';
|
||||
btn.innerHTML = 'Processing...';
|
||||
btn.disabled = true;
|
||||
btn.style.opacity = '0.7';
|
||||
|
||||
fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
@@ -446,54 +526,64 @@
|
||||
resultBox.textContent = result;
|
||||
} else {
|
||||
resultBox.className = 'success';
|
||||
resultBox.textContent = result + "\n\n💡 변경사항 반영을 위해 IDE에서 반드시 Gradle 리로드(Sync)를 수행해주세요!";
|
||||
resultBox.textContent = result + "\n\n> Note: Please sync Gradle in your IDE to reflect source code generation.";
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
const resultBox = document.getElementById('resultBox');
|
||||
resultBox.style.display = 'block';
|
||||
resultBox.className = 'error';
|
||||
resultBox.textContent = "네트워크 오류 발생: " + error;
|
||||
resultBox.textContent = "Network error: " + error;
|
||||
})
|
||||
.finally(() => {
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
btn.style.opacity = '1';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
fetch('/api/v1/scaffold/modules')
|
||||
.then(res => res.json())
|
||||
.then(modules => {
|
||||
const select = document.getElementById('targetModuleSelect');
|
||||
if (modules && modules.length > 0) {
|
||||
select.innerHTML = modules.map(m => `<option value="${m}" ${m === 'axhub-tool-other' ? 'selected' : ''}>${m}</option>`).join('');
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Failed to load modules:', err));
|
||||
});
|
||||
|
||||
handleFormSubmit('podForm', '/api/v1/scaffold/pod');
|
||||
handleFormSubmit('toolForm', '/api/v1/scaffold/tool');
|
||||
|
||||
function loadToolList() {
|
||||
const tbody = document.getElementById('toolListBody');
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted"><span class="spinner-border spinner-border-sm"></span> 데이터를 불러오는 중입니다...</td></tr>';
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="text-center py-5 text-muted">Loading data...</td></tr>';
|
||||
|
||||
fetch('/mcp/api/v1/tools/list', {
|
||||
method: 'GET',
|
||||
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
let tools = data.result.tools || [];
|
||||
if (tools.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted">등록된 Tool이 없습니다.</td></tr>';
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="text-center py-5 text-muted">No tools registered.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 그룹명 기준으로 오름차순 정렬
|
||||
tools.sort((a, b) => {
|
||||
const gA = a.categoryKey || '';
|
||||
const gB = b.categoryKey || '';
|
||||
return gA.localeCompare(gB);
|
||||
});
|
||||
|
||||
// 그룹 필터 옵션 채우기
|
||||
const groupSet = new Set();
|
||||
tools.forEach(t => groupSet.add(t.categoryKey || 'UNKNOWN'));
|
||||
tools.forEach(t => groupSet.add(t.categoryKey || 'unknown'));
|
||||
const groupSelect = document.getElementById('groupFilterSelect');
|
||||
const currentSelectedGroup = groupSelect.value;
|
||||
groupSelect.innerHTML = '<option value="ALL">ALL (전체 그룹)</option>';
|
||||
groupSelect.innerHTML = '<option value="ALL">All Categories</option>';
|
||||
Array.from(groupSet).sort().forEach(g => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = g;
|
||||
@@ -505,30 +595,29 @@
|
||||
}
|
||||
|
||||
tbody.innerHTML = tools.map(t => {
|
||||
const isReg = t.registered !== false; // default true
|
||||
const badgeHtml = isReg ? '' : ' <span class="badge bg-warning text-dark border border-warning" title="Redis 미등록 (직접 호출만 가능)">비공개 (미등록)</span>';
|
||||
const isReg = t.registered !== false;
|
||||
const badgeHtml = isReg ? '' : ' <span class="badge-mono" style="color:#d97706;border-color:#fde68a;background:#fffbeb;">Private</span>';
|
||||
const escDesc = (t.description || '').replace(/'/g, "\\'").replace(/"/g, '"');
|
||||
|
||||
return `
|
||||
<tr class="tool-row">
|
||||
<td class="text-nowrap"><span class="badge bg-secondary tool-group">${t.categoryKey || 'UNKNOWN'}</span></td>
|
||||
<td class="fw-bold text-primary text-break tool-name">
|
||||
<a href="javascript:void(0)" onclick="openEditModal('${t.name}', '${t.categoryKey}', '${escDesc}', ${isReg})" class="text-decoration-none">
|
||||
<td><span class="badge-mono">${t.categoryKey || 'unknown'}</span></td>
|
||||
<td>
|
||||
<a href="javascript:void(0)" onclick="openEditModal('${t.name}', '${t.categoryKey}', '${escDesc}', ${isReg})" class="tool-link">
|
||||
${t.name}
|
||||
</a>
|
||||
${badgeHtml}
|
||||
</td>
|
||||
<td class="text-break">${t.description}</td>
|
||||
<td class="text-nowrap"><span class="badge bg-light text-dark border">${t.podUrl}</span></td>
|
||||
<td class="text-nowrap"><span class="badge bg-info text-dark">${t.integrationType}</span> <small class="text-muted ms-1">${t.mciServiceId || '-'}</small></td>
|
||||
<td class="text-secondary" style="font-size:0.8rem;">${t.description}</td>
|
||||
<td><span class="badge-mono">${t.podUrl}</span></td>
|
||||
<td><span class="badge-mono">${t.integrationType}</span> <span class="text-secondary ms-1" style="font-size:0.75rem;">${t.mciServiceId || '-'}</span></td>
|
||||
</tr>
|
||||
`}).join('');
|
||||
|
||||
// Re-apply filter if text is already present
|
||||
filterTools();
|
||||
})
|
||||
.catch(err => {
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="text-center py-4 text-danger">목록을 불러오는 중 오류가 발생했습니다: ${err.message}</td></tr>`;
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="text-center py-5 text-danger">Error loading data: ${err.message}</td></tr>`;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -538,8 +627,8 @@
|
||||
const rows = document.querySelectorAll('.tool-row');
|
||||
|
||||
rows.forEach(row => {
|
||||
const name = row.querySelector('.tool-name').textContent.toLowerCase();
|
||||
const group = row.querySelector('.tool-group').textContent;
|
||||
const name = row.cells[1].textContent.toLowerCase();
|
||||
const group = row.cells[0].textContent;
|
||||
|
||||
const matchText = name.includes(input) || group.toLowerCase().includes(input);
|
||||
const matchGroup = (selectedGroup === 'ALL' || group === selectedGroup);
|
||||
@@ -571,10 +660,11 @@
|
||||
const description = document.getElementById('editDescription').value;
|
||||
const register = document.getElementById('editRegister').value;
|
||||
|
||||
const btn = document.querySelector('#editToolModal .btn-primary');
|
||||
const btn = document.querySelector('#editToolModal .btn-action');
|
||||
const originalText = btn.innerHTML;
|
||||
btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 처리중...';
|
||||
btn.innerHTML = 'Processing...';
|
||||
btn.disabled = true;
|
||||
btn.style.opacity = '0.7';
|
||||
|
||||
fetch('/api/v1/scaffold/tool/update', {
|
||||
method: 'POST',
|
||||
@@ -589,19 +679,20 @@
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
if (result.includes('[오류]') || result.includes('오류 발생:')) {
|
||||
alert('수정 중 오류가 발생했습니다.\n' + result);
|
||||
alert('Error updating source:\n' + result);
|
||||
} else {
|
||||
alert('소스 코드가 성공적으로 수정되었습니다!\n반영을 위해 모듈(Pod)을 재빌드해주세요.');
|
||||
alert('Source code updated successfully.\nPlease rebuild the Pod container to reflect changes.');
|
||||
editModalInstance.hide();
|
||||
loadToolList(); // Refresh list
|
||||
loadToolList();
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
alert('네트워크 오류 발생: ' + err);
|
||||
alert('Network error: ' + err);
|
||||
})
|
||||
.finally(() => {
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
btn.style.opacity = '1';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,206 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark">
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Shinhan AI Tool Catalog</title>
|
||||
<title>AI Tool Catalog</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',
|
||||
},
|
||||
keyframes: {
|
||||
'float': {
|
||||
'0%, 100%': { transform: 'translateY(0px) scale(1)' },
|
||||
'50%': { transform: 'translateY(-20px) scale(1.05)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
body {
|
||||
background-color: #020617;
|
||||
color: #f8fafc;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
* { font-family: 'Geist', sans-serif; }
|
||||
body { background-color: #09090b; color: #f4f4f5; }
|
||||
.geist-mono { font-family: 'Geist Mono', monospace; }
|
||||
|
||||
.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%);
|
||||
.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); }
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
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);
|
||||
}
|
||||
|
||||
.card-premium {
|
||||
background: rgba(30, 41, 59, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-premium:hover {
|
||||
background: rgba(30, 41, 59, 0.7);
|
||||
border-color: rgba(96, 165, 250, 0.3);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.2);
|
||||
.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;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.param-table th {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
color: #94a3b8;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
border-bottom: 1px solid #3f3f46;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.param-table td {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
color: #cbd5e1;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #27272a;
|
||||
color: #d4d4d8;
|
||||
}
|
||||
|
||||
.param-table tr:last-child td { border-bottom: none; }
|
||||
|
||||
.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; }
|
||||
}
|
||||
|
||||
::-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">
|
||||
<body class="min-h-screen">
|
||||
|
||||
<div class="bg-grid"></div>
|
||||
|
||||
<div class="fixed top-0 left-[10%] 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-[10%] 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-[1200px] mx-auto w-full px-5 z-10 relative flex flex-col">
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center mb-10 pt-6">
|
||||
<div class="text-left space-y-2">
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full border border-purple-500/30 bg-purple-500/10 text-purple-400 text-[10px] font-bold uppercase tracking-[0.2em] mb-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mr-2 animate-pulse"></span>
|
||||
Live Dashboard
|
||||
</div>
|
||||
<h1 class="text-4xl md: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">
|
||||
AI Tool Catalog
|
||||
</h1>
|
||||
<p class="text-sm text-slate-400 font-medium tracking-wide flex items-center">
|
||||
현재 시스템에 연동된 모든 AI 플러그인의 실시간 명세서입니다.
|
||||
<span class="ml-3 text-xs bg-slate-800 px-2 py-0.5 rounded text-slate-300" id="totalCount">Loading...</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 md:mt-0 flex space-x-3">
|
||||
<a href="/playground.html" class="px-5 py-2.5 rounded-xl text-sm font-bold text-slate-300 bg-slate-800/80 border border-slate-700 hover:bg-slate-700 transition-colors flex items-center">
|
||||
<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="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="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
Playground
|
||||
<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="btn-glow">
|
||||
<button id="copyMdBtn" class="relative inline-flex items-center px-5 py-2.5 text-sm font-bold rounded-xl text-white bg-gradient-to-r from-purple-600 to-brand-600 hover:from-purple-500 hover:to-brand-500 shadow-lg shadow-purple-500/25 transition-all transform hover:-translate-y-0.5">
|
||||
<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</span>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
</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">
|
||||
<h1 class="text-3xl font-bold tracking-tight mb-2" style="color:#f4f4f5;">Registry Catalog</h1>
|
||||
<p class="text-sm" style="color:#a1a1aa;">Currently integrated AI function tools across all modules. View parameters, descriptions, and integration types.</p>
|
||||
</div>
|
||||
<div class="mt-4 md:mt-0">
|
||||
<button id="copyMdBtn" class="btn-primary flex items-center">
|
||||
<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">
|
||||
<!-- Loading State -->
|
||||
<div class="flex justify-center py-20">
|
||||
<div class="w-8 h-8 border-4 border-brand-500/30 border-t-brand-500 rounded-full animate-spin"></div>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
async function fetchTools() {
|
||||
try {
|
||||
const response = await fetch('/mcp/api/v1/tools/list', {
|
||||
|
||||
});
|
||||
const response = await fetch('/mcp/api/v1/tools/list');
|
||||
const data = await response.json();
|
||||
const tools = data.result?.tools || [];
|
||||
|
||||
document.getElementById('totalCount').textContent = `Total: ${tools.length}`;
|
||||
renderCatalog(tools);
|
||||
} catch (err) {
|
||||
document.getElementById('catalogContainer').innerHTML = `
|
||||
<div class="glass-panel p-8 text-center text-rose-400 rounded-2xl">
|
||||
데이터를 불러오는데 실패했습니다. 서버 상태를 확인해주세요.
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
@@ -209,45 +118,28 @@
|
||||
function renderCatalog(tools) {
|
||||
const container = document.getElementById('catalogContainer');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (tools.length === 0) {
|
||||
container.innerHTML = `<div class="glass-panel p-8 text-center text-slate-400 rounded-2xl">등록된 툴이 없습니다.</div>`;
|
||||
container.innerHTML = '<div style="padding:32px; text-align:center; color:#71717a; border:1px dashed #3f3f46; border-radius:8px;">No tools registered.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Group by domain
|
||||
const grouped = {};
|
||||
tools.forEach(tool => {
|
||||
const group = tool.categoryKey || '기타 (Others)';
|
||||
const group = tool.categoryKey || 'Others';
|
||||
if (!grouped[group]) grouped[group] = [];
|
||||
grouped[group].push(tool);
|
||||
});
|
||||
|
||||
// Render groups
|
||||
Object.keys(grouped).sort().forEach(group => {
|
||||
const section = document.createElement('section');
|
||||
section.className = 'glass-panel p-6 rounded-3xl';
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'flex items-center mb-6 pb-4 border-b border-white/5';
|
||||
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 = `
|
||||
<div class="w-10 h-10 rounded-xl bg-brand-500/20 text-brand-400 flex items-center justify-center mr-4">
|
||||
<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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-white tracking-wide">${group}</h2>
|
||||
<p class="text-xs text-slate-400 mt-1">${grouped[group].length} Tools available</p>
|
||||
</div>
|
||||
<h2 style="font-size:20px; font-weight:600; color:#f4f4f5; text-transform:capitalize;">${group}</h2>
|
||||
<span class="geist-mono" style="font-size:12px; color:#71717a;">${grouped[group].length} items</span>
|
||||
`;
|
||||
section.appendChild(header);
|
||||
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'grid grid-cols-1 lg:grid-cols-2 gap-5';
|
||||
|
||||
grouped[group].forEach(tool => {
|
||||
grid.appendChild(createToolCard(tool));
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
@@ -255,71 +147,64 @@
|
||||
|
||||
function createToolCard(tool) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card-premium rounded-2xl p-5 flex flex-col h-full relative overflow-hidden';
|
||||
card.className = 'tool-card';
|
||||
|
||||
// Top right badge
|
||||
const typeClass = tool.integrationType === 'DIRECT' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' : 'bg-amber-500/10 text-amber-400 border-amber-500/20';
|
||||
const isDirect = tool.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 || [];
|
||||
paramHtml = `
|
||||
<div class="mt-4 pt-4 border-t border-white/5">
|
||||
<div class="text-xs font-bold text-slate-400 mb-2 flex items-center">
|
||||
<svg class="w-3.5 h-3.5 mr-1" 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>
|
||||
PARAMETERS
|
||||
</div>
|
||||
<div class="overflow-x-auto rounded-lg border border-slate-700/50 bg-slate-900/50">
|
||||
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>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Req</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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="font-mono text-[11px] text-cyan-400">${k}</td>
|
||||
<td class="font-mono text-[11px] text-purple-400">${v.type || 'string'}</td>
|
||||
<td class="text-center">${required.includes(k) ? '<span class="text-rose-400 font-bold">*</span>' : ''}</td>
|
||||
<td class="text-xs text-slate-400">${v.description || ''}</td>
|
||||
<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>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
let promptHtml = '';
|
||||
if (tool.actionPrompts && Object.keys(tool.actionPrompts).length > 0) {
|
||||
promptHtml = `
|
||||
<div class="mt-4 pt-4 border-t border-white/5">
|
||||
<div class="text-xs font-bold text-slate-400 mb-2 flex items-center">
|
||||
<svg class="w-3.5 h-3.5 mr-1" 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>
|
||||
PROMPT EXAMPLES
|
||||
</div>
|
||||
<ul class="space-y-1.5">
|
||||
${Object.values(tool.actionPrompts).map(p => `
|
||||
<li class="text-xs bg-slate-800/80 px-3 py-2 rounded-lg text-slate-300 border border-slate-700/50 italic border-l-2 border-l-brand-500">"${p}"</li>
|
||||
`).join('')}
|
||||
<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 class="absolute top-4 right-4 px-2 py-0.5 rounded text-[9px] font-bold font-mono border tracking-wider ${typeClass}">
|
||||
${tool.integrationType || 'DIRECT'}
|
||||
<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.displayName || 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.integrationType || 'DIRECT'}
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-1 pr-16">${tool.displayName} <span class="text-xs text-slate-500 font-mono">(${tool.name})</span></h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed min-h-[40px]">${tool.description || '설명이 없습니다.'}</p>
|
||||
|
||||
${paramHtml}
|
||||
${promptHtml}
|
||||
`;
|
||||
@@ -330,26 +215,15 @@
|
||||
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);
|
||||
|
||||
// 성공 UI (초록색 반짝)
|
||||
btn.classList.remove('from-purple-600', 'to-brand-600');
|
||||
btn.classList.add('from-emerald-500', 'to-teal-500');
|
||||
textSpan.textContent = 'Copied!';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.classList.remove('from-emerald-500', 'to-teal-500');
|
||||
btn.classList.add('from-purple-600', 'to-brand-600');
|
||||
textSpan.textContent = originalText;
|
||||
}, 2000);
|
||||
setTimeout(() => { textSpan.textContent = originalText; }, 2000);
|
||||
} catch (err) {
|
||||
alert('마크다운 복사에 실패했습니다.');
|
||||
alert('Failed to copy markdown.');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -3,45 +3,26 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Shinhan AI MCP Gateway</title>
|
||||
<title>AXHUB 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">
|
||||
<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: ['Pretendard', 'sans-serif'],
|
||||
outfit: ['Outfit', 'sans-serif'],
|
||||
mono: ['Fira Code', 'monospace']
|
||||
sans: ['Geist', 'sans-serif'],
|
||||
mono: ['Geist Mono', '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)' },
|
||||
}
|
||||
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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -49,439 +30,140 @@
|
||||
</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;
|
||||
background-color: theme('colors.background');
|
||||
color: theme('colors.foreground');
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Premium Dark Grid Background */
|
||||
.bg-grid {
|
||||
/* Subtle radial background for depth */
|
||||
body::before {
|
||||
content: "";
|
||||
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);
|
||||
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: 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
filter: blur(10px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
animation: gradient-shift 3s linear infinite;
|
||||
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);
|
||||
}
|
||||
.btn-glow:hover::before {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@keyframes gradient-shift {
|
||||
0% { background-position: 0% center; }
|
||||
100% { background-position: 200% center; }
|
||||
.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 */
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.premium-text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 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">
|
||||
<body class="min-h-screen flex flex-col relative">
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
</nav>
|
||||
</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 (Flattened)
|
||||
<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>
|
||||
<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">
|
||||
함수 단위로 독립된 엔터프라이즈 통합 라우팅 시스템
|
||||
</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>
|
||||
|
||||
<!-- 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 class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-5xl">
|
||||
<!-- 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>
|
||||
<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 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>
|
||||
대상 함수 (Function 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
</form>
|
||||
<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>
|
||||
</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 actionPrompts = {};
|
||||
|
||||
const toolSelect = document.getElementById('toolName');
|
||||
|
||||
async function fetchTools() {
|
||||
try {
|
||||
const response = await fetch('/mcp/api/v1/tools/list', {
|
||||
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
toolSelect.innerHTML = '';
|
||||
actionPrompts = {};
|
||||
|
||||
const tools = data.result?.tools || [];
|
||||
|
||||
if (tools.length === 0) {
|
||||
toolSelect.innerHTML = '<option value="">등록된 툴이 없습니다</option>';
|
||||
return;
|
||||
}
|
||||
|
||||
const groupedTools = {};
|
||||
tools.forEach(tool => {
|
||||
const group = tool.categoryKey || '기타 그룹';
|
||||
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 === 'biz_core') {
|
||||
label = '핵심 업무 (Biz Core)';
|
||||
} else if (group === 'biz_channel') {
|
||||
label = '채널/고객 (Biz Channel)';
|
||||
} else if (group === 'biz_support') {
|
||||
label = '지원/인사 (Biz Support)';
|
||||
} else 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; // Now the function name
|
||||
const commType = tool.integrationType ? tool.integrationType : 'HTTP';
|
||||
option.textContent = tool.description ? `[${commType}] ${tool.description} (${tool.name})` : `[${commType}] ${tool.name}`;
|
||||
option.dataset.schema = JSON.stringify(tool.parametersSchema);
|
||||
option.dataset.prompts = JSON.stringify(tool.actionPrompts || {});
|
||||
optgroup.appendChild(option);
|
||||
|
||||
if (tool.actionPrompts) {
|
||||
Object.assign(actionPrompts, tool.actionPrompts);
|
||||
}
|
||||
});
|
||||
|
||||
toolSelect.appendChild(optgroup);
|
||||
});
|
||||
|
||||
updatePrompt();
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch tools", err);
|
||||
toolSelect.innerHTML = '<option value="">데이터 로드 실패</option>';
|
||||
}
|
||||
}
|
||||
|
||||
function updatePrompt() {
|
||||
const toolName = toolSelect.value;
|
||||
document.getElementById('userPrompt').value = actionPrompts[toolName] || "작업을 실행해주세요.";
|
||||
}
|
||||
|
||||
toolSelect.addEventListener('change', updatePrompt);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', fetchTools);
|
||||
|
||||
function generateDummyArguments(schemaStr) {
|
||||
try {
|
||||
if (!schemaStr || schemaStr === "null") return {};
|
||||
const schema = JSON.parse(schemaStr);
|
||||
if (!schema || !schema.properties) return {};
|
||||
|
||||
const dummy = {};
|
||||
for (const [key, value] of Object.entries(schema.properties)) {
|
||||
if (value.type === 'string') {
|
||||
dummy[key] = "test_" + key;
|
||||
} else if (value.type === 'number' || value.type === 'integer') {
|
||||
dummy[key] = 123;
|
||||
} else if (value.type === 'boolean') {
|
||||
dummy[key] = true;
|
||||
} else if (value.type === 'array') {
|
||||
dummy[key] = [];
|
||||
} else if (value.type === 'object') {
|
||||
dummy[key] = {};
|
||||
} else {
|
||||
dummy[key] = "test";
|
||||
}
|
||||
}
|
||||
return dummy;
|
||||
} catch (e) {
|
||||
console.warn("Failed to parse schema", e);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
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 selectedOption = toolSelect.options[toolSelect.selectedIndex];
|
||||
const dummyArguments = generateDummyArguments(selectedOption.dataset.schema);
|
||||
|
||||
const payload = {
|
||||
jsonrpc: "2.0",
|
||||
method: "tools/call",
|
||||
params: {
|
||||
name: toolSelect.value,
|
||||
arguments: dummyArguments
|
||||
},
|
||||
id: Math.floor(Math.random() * 10000)
|
||||
};
|
||||
|
||||
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 || document.getElementById('userPrompt').placeholder)
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const latency = Date.now() - startTime;
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,297 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko" class="dark">
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Shinhan AI Tool Playground</title>
|
||||
<title>Tool Playground</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>
|
||||
<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>
|
||||
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;
|
||||
}
|
||||
* { font-family: 'Geist', sans-serif; }
|
||||
body { background-color: #09090b; color: #f4f4f5; }
|
||||
.geist-mono { font-family: 'Geist Mono', monospace; }
|
||||
|
||||
.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%);
|
||||
.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;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
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);
|
||||
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);
|
||||
.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-premium option, select.input-premium optgroup {
|
||||
background: #1e293b;
|
||||
color: #f8fafc;
|
||||
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: transparent;
|
||||
color: #cbd5e1;
|
||||
background: #09090b;
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #d4d4d8;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
.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(15, 23, 42, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(9,9,11,0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 12px;
|
||||
z-index: 10;
|
||||
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;
|
||||
flex-direction: column;
|
||||
}
|
||||
#loadingOverlay.active { display: flex; }
|
||||
|
||||
.modern-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(59, 130, 246, 0.1);
|
||||
.spinner {
|
||||
width: 24px; height: 24px;
|
||||
border: 2px solid #3f3f46;
|
||||
border-top-color: #3b82f6;
|
||||
border-right-color: #8b5cf6;
|
||||
animation: spin 1s linear infinite;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
::-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); }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased selection:bg-brand-500/30 selection:text-brand-50">
|
||||
<body class="min-h-screen">
|
||||
|
||||
<div class="bg-grid"></div>
|
||||
|
||||
<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">
|
||||
|
||||
<div class="text-center space-y-4 mb-8 shrink-0 pt-6 relative">
|
||||
<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="TESTER-DEV" class="bg-transparent border-none text-xs text-slate-300 font-mono focus:outline-none w-20 text-right" readonly>
|
||||
<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>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full border border-purple-500/30 bg-purple-500/10 text-purple-400 text-[10px] font-bold uppercase tracking-[0.2em] mb-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mr-2 animate-pulse"></span>
|
||||
Developer Sandbox
|
||||
<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>
|
||||
<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">
|
||||
Tool Playground
|
||||
</h1>
|
||||
<p class="text-sm text-slate-400 font-medium tracking-wide">
|
||||
동적 파라미터 입력 및 실데이터 기반 연동 테스트 UI
|
||||
</p>
|
||||
</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="glass-panel rounded-[2rem] p-8 relative shrink-0">
|
||||
|
||||
<div class="card p-6 relative mb-8">
|
||||
<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">실데이터 기반 통신 중입니다</p>
|
||||
<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" style="color:#e4e4e7;">Select Tool</label>
|
||||
<select id="toolName" name="toolName" class="input-field">
|
||||
<option value="">Loading tools...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<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>
|
||||
테스트할 대상 툴 (Function 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 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>
|
||||
|
||||
<!-- NEW: Dynamic Form Container -->
|
||||
<div id="dynamicFormContainer" class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 p-5 bg-slate-900/40 rounded-xl border border-slate-700/50 hidden">
|
||||
<div class="col-span-full">
|
||||
<h3 class="text-sm font-bold text-slate-300 mb-2 border-b border-white/5 pb-2">파라미터 입력 (Parameters)</h3>
|
||||
</div>
|
||||
<!-- Fields will be dynamically injected here -->
|
||||
<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>
|
||||
|
||||
<!-- NEW: Manual Input Container for Hidden Tools -->
|
||||
<div id="manualInputContainer" class="grid grid-cols-1 gap-4 mt-4 p-5 bg-slate-900/40 rounded-xl border border-rose-500/30 hidden">
|
||||
<div class="col-span-full">
|
||||
<h3 class="text-sm font-bold text-rose-400 mb-2 border-b border-rose-500/20 pb-2">히든 툴 직접 입력 (Manual Override)</h3>
|
||||
</div>
|
||||
<div class="group">
|
||||
<label class="block text-xs font-bold text-slate-400 mb-2">실행할 툴 이름 (Tool Name)</label>
|
||||
<input type="text" id="manualToolName" class="input-premium block w-full py-2 px-3 text-sm rounded-lg" value="get_template_file_url" placeholder="예: get_template_file_url">
|
||||
</div>
|
||||
<div class="group">
|
||||
<label class="block text-xs font-bold text-slate-400 mb-2">파라미터 (JSON 형식)</label>
|
||||
<textarea id="manualToolArgs" rows="3" class="input-premium block w-full py-2 px-3 text-sm rounded-lg font-mono" placeholder='{"templateId": "test"}'>{"templateId": "test_excel"}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group pt-2">
|
||||
<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>
|
||||
가상 유저 프롬프트 (Mock User Prompt)
|
||||
</label>
|
||||
<textarea id="userPrompt" name="userPrompt" rows="1" class="input-premium block w-full py-3 px-4 text-sm rounded-xl resize-none placeholder-slate-600 font-medium" placeholder="[테스트용] 사용자 발화 내용을 입력하세요."></textarea>
|
||||
</div>
|
||||
|
||||
<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-purple-600 to-brand-600 hover:from-purple-500 hover:to-brand-500 shadow-lg shadow-purple-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 Test
|
||||
</button>
|
||||
<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 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">
|
||||
<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">Test Result</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>
|
||||
<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 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>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
let actionPrompts = {};
|
||||
@@ -299,130 +188,95 @@
|
||||
|
||||
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 response = await fetch('/mcp/api/v1/tools/list');
|
||||
const data = await response.json();
|
||||
|
||||
toolSelect.innerHTML = '<option value="" disabled selected>테스트할 툴을 선택하세요...</option>';
|
||||
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.categoryKey || '기타 그룹';
|
||||
const group = tool.categoryKey || '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.description ? `[${tool.integrationType || 'HTTP'}] ${tool.description} (${tool.name})` : tool.name;
|
||||
option.textContent = tool.name;
|
||||
option.dataset.schema = JSON.stringify(tool.parametersSchema);
|
||||
option.dataset.prompts = JSON.stringify(tool.actionPrompts || {});
|
||||
optgroup.appendChild(option);
|
||||
|
||||
if (tool.actionPrompts) {
|
||||
Object.assign(actionPrompts, tool.actionPrompts);
|
||||
}
|
||||
if (tool.actionPrompts) Object.assign(actionPrompts, tool.actionPrompts);
|
||||
});
|
||||
toolSelect.appendChild(optgroup);
|
||||
});
|
||||
|
||||
// Add Manual Input Option
|
||||
const optgroupManual = document.createElement('optgroup');
|
||||
optgroupManual.label = '고급 (Advanced)';
|
||||
optgroupManual.label = 'Advanced';
|
||||
const optionManual = document.createElement('option');
|
||||
optionManual.value = 'MANUAL_INPUT';
|
||||
optionManual.textContent = '🛠️ 비공개 툴 직접 입력 (Hidden Tool Test)';
|
||||
optionManual.textContent = 'Custom/Hidden Tool';
|
||||
optionManual.dataset.schema = "null";
|
||||
optgroupManual.appendChild(optionManual);
|
||||
toolSelect.appendChild(optgroupManual);
|
||||
|
||||
} catch (err) {
|
||||
toolSelect.innerHTML = '<option value="">데이터 로드 실패</option>';
|
||||
toolSelect.innerHTML = '<option value="">Failed to load tools</option>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderDynamicForm() {
|
||||
// Remove old fields except the header
|
||||
const fields = dynamicFormContainer.querySelectorAll('.dynamic-field');
|
||||
fields.forEach(f => f.remove());
|
||||
|
||||
dynamicFields.innerHTML = '';
|
||||
const selectedOption = toolSelect.options[toolSelect.selectedIndex];
|
||||
if (!selectedOption || !selectedOption.dataset.schema) {
|
||||
dynamicFormContainer.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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');
|
||||
fieldDiv.className = 'group dynamic-field';
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.className = 'flex items-center text-xs font-bold text-slate-400 mb-2 transition-colors group-focus-within:text-brand-400';
|
||||
label.textContent = `${key} ${value.description ? ' (' + value.description + ')' : ''}`;
|
||||
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;
|
||||
input.className = 'w-4 h-4 text-brand-500 bg-slate-800 border-slate-600 rounded focus:ring-brand-500 focus:ring-2 mt-2 block';
|
||||
} else {
|
||||
input = document.createElement('input');
|
||||
input.type = value.type === 'number' || value.type === 'integer' ? 'number' : 'text';
|
||||
input.id = 'param_' + key;
|
||||
input.className = 'input-premium block w-full py-2 px-3 text-sm rounded-lg placeholder-slate-600 font-medium';
|
||||
input.placeholder = `${key} 입력...`;
|
||||
input.className = 'input-field';
|
||||
input.placeholder = `Enter ${key}`;
|
||||
}
|
||||
fieldDiv.appendChild(input);
|
||||
dynamicFormContainer.appendChild(fieldDiv);
|
||||
dynamicFields.appendChild(fieldDiv);
|
||||
}
|
||||
} catch(e) {
|
||||
console.error("Schema parse error", e);
|
||||
dynamicFormContainer.classList.add('hidden');
|
||||
}
|
||||
} catch(e) { dynamicFormContainer.classList.add('hidden'); }
|
||||
}
|
||||
|
||||
function updatePrompt() {
|
||||
const toolName = toolSelect.value;
|
||||
document.getElementById('userPrompt').value = actionPrompts[toolName] || "테스트 실행";
|
||||
const defaultPrompt = actionPrompts[toolName];
|
||||
document.getElementById('userPrompt').value = defaultPrompt ? defaultPrompt : "Test execution";
|
||||
}
|
||||
|
||||
toolSelect.addEventListener('change', () => {
|
||||
if (toolSelect.value === 'MANUAL_INPUT') {
|
||||
document.getElementById('manualInputContainer').classList.remove('hidden');
|
||||
dynamicFormContainer.classList.add('hidden');
|
||||
document.getElementById('userPrompt').value = "숨겨진 툴 강제 호출 테스트";
|
||||
document.getElementById('userPrompt').value = "Manual force execution";
|
||||
} else {
|
||||
document.getElementById('manualInputContainer').classList.add('hidden');
|
||||
updatePrompt();
|
||||
@@ -438,13 +292,9 @@
|
||||
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;
|
||||
}
|
||||
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;
|
||||
@@ -452,108 +302,68 @@
|
||||
|
||||
document.getElementById('mcpForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
if(!toolSelect.value) {
|
||||
alert("테스트할 툴을 선택해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
if(!toolSelect.value) return;
|
||||
let finalToolName = toolSelect.value;
|
||||
let finalArguments = {};
|
||||
|
||||
if (finalToolName === 'MANUAL_INPUT') {
|
||||
finalToolName = document.getElementById('manualToolName').value.trim();
|
||||
if (!finalToolName) {
|
||||
alert("실행할 히든 툴의 이름을 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const argsVal = document.getElementById('manualToolArgs').value.trim();
|
||||
finalArguments = argsVal ? JSON.parse(argsVal) : {};
|
||||
} catch(err) {
|
||||
alert("JSON 파라미터 형식이 올바르지 않습니다.");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
finalArguments = collectArguments();
|
||||
}
|
||||
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');
|
||||
|
||||
resultContainer.classList.add('opacity-0', 'translate-y-8');
|
||||
setTimeout(() => resultContainer.classList.add('hidden'), 300);
|
||||
|
||||
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: Math.floor(Math.random() * 10000)
|
||||
};
|
||||
|
||||
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 || '테스트')
|
||||
'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, 4)
|
||||
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 = 'text-slate-300';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) cls = 'text-cyan-400 font-medium';
|
||||
else cls = 'text-emerald-400';
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'text-amber-400 font-medium';
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'text-slate-500 italic';
|
||||
} else {
|
||||
cls = 'text-pink-400';
|
||||
}
|
||||
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;
|
||||
|
||||
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';
|
||||
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 <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';
|
||||
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.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.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 {
|
||||
setTimeout(() => {
|
||||
loadingOverlay.classList.remove('active');
|
||||
resultContainer.classList.remove('hidden');
|
||||
void resultContainer.offsetWidth;
|
||||
resultContainer.classList.remove('opacity-0', 'translate-y-8');
|
||||
}, 800);
|
||||
loadingOverlay.classList.remove('active');
|
||||
resultContainer.classList.remove('hidden');
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user