From 1b9d6ef57d42abc80a861339a172d3b7dbf18e34 Mon Sep 17 00:00:00 2001 From: jade Date: Sun, 12 Jul 2026 15:30:06 +0900 Subject: [PATCH] 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 --- .../presentation/ScaffoldingController.java | 21 + .../main/resources/static/admin/scaffold.html | 521 +++++++++------- .../src/main/resources/static/catalog.html | 354 ++++------- .../src/main/resources/static/index.html | 558 ++++------------- .../src/main/resources/static/playground.html | 566 ++++++------------ 5 files changed, 749 insertions(+), 1271 deletions(-) diff --git a/axhub-gateway/src/main/java/io/shinhanlife/axhub/biz/mcp/gateway/presentation/ScaffoldingController.java b/axhub-gateway/src/main/java/io/shinhanlife/axhub/biz/mcp/gateway/presentation/ScaffoldingController.java index 96dff74..639699e 100644 --- a/axhub-gateway/src/main/java/io/shinhanlife/axhub/biz/mcp/gateway/presentation/ScaffoldingController.java +++ b/axhub-gateway/src/main/java/io/shinhanlife/axhub/biz/mcp/gateway/presentation/ScaffoldingController.java @@ -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 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"); + } + } } diff --git a/axhub-gateway/src/main/resources/static/admin/scaffold.html b/axhub-gateway/src/main/resources/static/admin/scaffold.html index e65cbfb..6f6e778 100644 --- a/axhub-gateway/src/main/resources/static/admin/scaffold.html +++ b/axhub-gateway/src/main/resources/static/admin/scaffold.html @@ -1,87 +1,82 @@ - + - 신한라이프 AXHUB Developer Portal - - - - + AX HUB Developer Portal + + + + + @@ -213,20 +286,20 @@
-

신한라이프 AXHUB Developer Portal

-

No-Code 스캐폴딩 마법사로 모듈과 툴을 즉시 생성하세요

+

Developer Portal

+

AX HUB No-Code Scaffolding Wizard

-
+
@@ -237,25 +310,27 @@
- - + +
- - -
Gateway 라우팅 및 Local 실행 시 사용할 고유 포트 번호입니다.
+ + +
Unique port for Gateway routing and local development.
- - + +
- - + +
- +
+ +
@@ -264,104 +339,108 @@
- - -
클래스명 생성에 사용됩니다. (ExchangeRateService 등)
+ + +
Used for class generation (ExchangeRateService).
- - + +
- - -
AI 에이전트가 이 설명을 보고 툴 호출 여부를 결정하므로 상세히 적어주세요.
+ + +
Critical for AI agent intent matching. Be descriptive.
- - + + - - - - + + + +
- +
- - -
코드가 생성될 대상 프로젝트(Pod) 폴더명입니다.
+ + +
Destination Pod directory.
- + -
Gateway에서 자동 라우팅될지 여부입니다.
+
Controls dynamic routing exposure.
- - + +
- - + +
- +
+ +
-
+
-
현재 시스템에 라우팅 가능한 Tool 목록입니다.
- Redis에 등록되지 않은(비공개) Tool도 포함되어 조회됩니다. +
Active Tools
+
Tools dynamically registered in the Gateway.
- + - - + +
- - +
+ - - - - - + + + + + - +
그룹서브툴 이름설명Pod 모듈인터페이스 (ID)CategoryTool NameDescriptionPodInterface
데이터를 불러오는 중입니다...Loading data...
@@ -380,38 +459,38 @@
- +
- - + +
- +
- +
- +
-
- ⚠️ 주의: 수정을 적용하면 물리적인 자바 소스 코드가 변경됩니다. 반영을 위해서는 백엔드 컨테이너의 재빌드가 필요합니다! +
+ Notice: Applying edits modifies the physical Java source code. A rebuild of the backend container is required for changes to take effect.
- - + +
@@ -428,8 +507,9 @@ const btn = this.querySelector('button[type="submit"]'); const originalText = btn.innerHTML; - btn.innerHTML = ' 생성 중...'; + 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 => ``).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 = ' 데이터를 불러오는 중입니다...'; + tbody.innerHTML = 'Loading data...'; 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 = '등록된 Tool이 없습니다.'; + tbody.innerHTML = 'No tools registered.'; 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 = ''; + groupSelect.innerHTML = ''; 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 ? '' : ' 비공개 (미등록)'; + const isReg = t.registered !== false; + const badgeHtml = isReg ? '' : ' Private'; const escDesc = (t.description || '').replace(/'/g, "\\'").replace(/"/g, '"'); return ` - ${t.categoryKey || 'UNKNOWN'} - - + ${t.categoryKey || 'unknown'} + + ${t.name} ${badgeHtml} - ${t.description} - ${t.podUrl} - ${t.integrationType} ${t.mciServiceId || '-'} + ${t.description} + ${t.podUrl} + ${t.integrationType} ${t.mciServiceId || '-'} `}).join(''); - // Re-apply filter if text is already present filterTools(); }) .catch(err => { - tbody.innerHTML = `목록을 불러오는 중 오류가 발생했습니다: ${err.message}`; + tbody.innerHTML = `Error loading data: ${err.message}`; }); } @@ -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 = ' 처리중...'; + 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'; }); } diff --git a/axhub-gateway/src/main/resources/static/catalog.html b/axhub-gateway/src/main/resources/static/catalog.html index 97e9e6e..ed2e3a4 100644 --- a/axhub-gateway/src/main/resources/static/catalog.html +++ b/axhub-gateway/src/main/resources/static/catalog.html @@ -1,206 +1,115 @@ - + - Shinhan AI Tool Catalog + AI Tool Catalog - - + - + -
- -
-
- -
- -
-
-
- - Live Dashboard -
-

- AI Tool Catalog -

-

- 현재 시스템에 연동된 모든 AI 플러그인의 실시간 명세서입니다. - Loading... -

-
- -
- - - Playground +
+
+
+ +
+ AXHUB Gateway -
- -
+
+ +
+
+ v0.0.1 +
+
+
+ +
+
+
+

Registry Catalog

+

Currently integrated AI function tools across all modules. View parameters, descriptions, and integration types.

+
+
+
- -
-
+
+
+ Loading registry...
- -
+
- + - + -
+ +
+
+
+
+
+ AXHUB Gateway +
+
+ +
+
+ v0.0.1 +
+
+
- -
-
- -
+
- -
- -
- - +
+
+ + System Operational
-
- - Next-Gen Router (Flattened) -
-

- 신한라이프 AI MCP Gateway -

-

- 함수 단위로 독립된 엔터프라이즈 통합 라우팅 시스템 +

AI Plugin Gateway

+

+ The central hub for managing, discovering, and testing AI tool integrations. High-performance tooling for the modern enterprise.

- -
- - -
-
- -
-
-
+
+ + +
+
-

처리중 입니다...

-

EIMS 시스템과 안전하게 통신 중입니다

-
+

Scaffold Tool

+

+ Generate boilerplate code for new AI tool integrations automatically. Select a target module and build your plugin structure in seconds. +

+
+ Launch Scaffold +
+ -
- -
- -
- -
- -
- -
-
-
+ + +
+
+

Tool Catalog

+

+ Browse all active tool integrations. View JSON schemas, parameters, and action prompts registered across the entire AXHUB ecosystem. +

+
+ View Catalog +
+ - -
- - + + +
+
- - -
-
-
- POST - /mcp/api/v1/tools/call -
-
-
- -
+

Playground

+

+ Test and execute tools directly from the browser. Verify RPC calls, test inputs, and inspect raw JSON responses before using them in code. +

+
+ Enter Playground
- +
- - - - -
- - +
- \ No newline at end of file + diff --git a/axhub-gateway/src/main/resources/static/playground.html b/axhub-gateway/src/main/resources/static/playground.html index c934c8f..43ca880 100644 --- a/axhub-gateway/src/main/resources/static/playground.html +++ b/axhub-gateway/src/main/resources/static/playground.html @@ -1,297 +1,186 @@ - + - Shinhan AI Tool Playground + Tool Playground - - + - + -
- -
-
- -
- -
-
- - +
+
+
+ +
+ AXHUB Gateway + +
+
-
- - Developer Sandbox +
+ + + v0.0.1
-

- Tool Playground -

-

- 동적 파라미터 입력 및 실데이터 기반 연동 테스트 UI -

+
+
+ +
+
+

Test & Execute

+

Simulate tool executions and view raw RPC responses. Select a tool to auto-generate the input schema.

-
- +
-
- -
-
-
-
-

처리중 입니다...

-

실데이터 기반 통신 중입니다

+ +
Executing RPC Call...
- -
-
- -
- -
- -
-
+
+ + +
+ + + + - -