git_workflow.htmlβ’10.9 kB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>μμ°μ΄ Git Workflow - MCP GitHub</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.input-section {
margin-bottom: 25px;
padding: 20px;
border: 2px solid #3498db;
border-radius: 8px;
background-color: #f8f9fa;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
}
input[type="text"], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
}
textarea {
height: 80px;
resize: vertical;
}
.execute-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
}
.execute-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.execute-btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.result-section {
margin-top: 25px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f8f9fa;
}
.result-content {
background: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 6px;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
max-height: 400px;
overflow-y: auto;
}
.status {
padding: 10px;
border-radius: 6px;
margin-bottom: 15px;
font-weight: 600;
}
.status.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.status.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.examples {
margin-top: 20px;
padding: 15px;
background-color: #e8f4f8;
border-radius: 6px;
border-left: 4px solid #3498db;
}
.examples h4 {
margin-top: 0;
color: #2c3e50;
}
.example-item {
margin: 8px 0;
padding: 8px;
background: white;
border-radius: 4px;
border: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.2s;
}
.example-item:hover {
background-color: #f0f0f0;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>π μμ°μ΄ Git Workflow - MCP GitHub</h1>
<div class="input-section">
<div class="input-group">
<label for="query">π¬ Git μμ
μ μμ°μ΄λ‘ μ
λ ₯νμΈμ:</label>
<textarea id="query" placeholder="μ: νμ¬ μ μ₯μ μνλ₯Ό νμΈνκ³ λ³κ²½μ¬νμ 컀λ°ν ν νΈμν΄μ£ΌμΈμ"></textarea>
</div>
<div class="input-group">
<label for="threadId">𧡠μ€λ λ ID (μ νμ¬ν):</label>
<input type="text" id="threadId" placeholder="μ: git-workflow-001" value="git-workflow-001">
</div>
<button class="execute-btn" onclick="executeGitWorkflow()">π μ€ννκΈ°</button>
</div>
<div class="examples">
<h4>π‘ μ¬μ© μμ (ν΄λ¦νλ©΄ μλ μ
λ ₯):</h4>
<div class="example-item" onclick="fillExample('νμ¬ μ μ₯μ μνλ₯Ό νμΈνκ³ λ³κ²½λ νμΌλ€μ 보μ¬μ£ΌμΈμ')">
π μ μ₯μ μν νμΈ
</div>
<div class="example-item" onclick="fillExample('λ³κ²½λ νμΌλ€μ μ€ν
μ΄μ§νκ³ μ»€λ°ν΄μ£ΌμΈμ')">
π λ³κ²½μ¬ν μ€ν
μ΄μ§ λ° μ»€λ°
</div>
<div class="example-item" onclick="fillExample('νμ¬ λΈλμΉλ₯Ό μ격 μ μ₯μμ νΈμν΄μ£ΌμΈμ')">
π μ격 μ μ₯μ νΈμ
</div>
<div class="example-item" onclick="fillExample('μ 체 Git μν¬νλ‘μ°λ₯Ό μ€νν΄μ£ΌμΈμ: μννμΈ β μ€ν
μ΄μ§ β μ»€λ° β νΈμ')">
π μ 체 μν¬νλ‘μ° μ€ν
</div>
<div class="example-item" onclick="fillExample('μ΅κ·Ό μ»€λ° νμ€ν 리λ₯Ό 보μ¬μ£ΌμΈμ')">
π μ»€λ° νμ€ν 리 νμΈ
</div>
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>Git μμ
μ μ€ννκ³ μμ΅λλ€...</p>
</div>
<div class="result-section" id="resultSection" style="display: none;">
<h3>π μ€ν κ²°κ³Ό</h3>
<div id="status" class="status info">μ€λΉλ¨</div>
<div class="result-content" id="resultContent">κ²°κ³Όκ° μ¬κΈ°μ νμλ©λλ€.</div>
</div>
</div>
<script>
const API_BASE = 'http://localhost:8081';
function fillExample(text) {
document.getElementById('query').value = text;
}
async function executeGitWorkflow() {
const query = document.getElementById('query').value.trim();
const threadId = document.getElementById('threadId').value.trim() || 'git-workflow-001';
if (!query) {
alert('Git μμ
μ μ
λ ₯ν΄μ£ΌμΈμ!');
return;
}
// UI μν λ³κ²½
const executeBtn = document.querySelector('.execute-btn');
const loading = document.getElementById('loading');
const resultSection = document.getElementById('resultSection');
const status = document.getElementById('status');
const resultContent = document.getElementById('resultContent');
executeBtn.disabled = true;
executeBtn.textContent = 'μ€ν μ€...';
loading.style.display = 'block';
resultSection.style.display = 'none';
try {
// MCP GitHub λꡬλ₯Ό ν΅ν΄ Git μμ
μ€ν
const response = await fetch(`${API_BASE}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: query,
thread_id: threadId
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
// κ²°κ³Ό νμ
if (result.status === 'success') {
status.className = 'status success';
status.textContent = 'β
μ±κ³΅μ μΌλ‘ μ€νλμμ΅λλ€!';
} else if (result.status === 'error') {
status.className = 'status error';
status.textContent = 'β μ€ν μ€ μ€λ₯κ° λ°μνμ΅λλ€.';
} else {
status.className = 'status info';
status.textContent = 'βΉοΈ μ€ν μλ£';
}
// μλ΅ λ΄μ© νμ
let displayContent = '';
if (result.response) {
displayContent += `π μλ΅:\n${result.response}\n\n`;
}
if (result.used_tools && result.used_tools.length > 0) {
displayContent += `π οΈ μ¬μ©λ λꡬλ€:\n${result.used_tools.join(', ')}\n\n`;
}
if (result.trace) {
displayContent += `π μ€ν μΆμ :\n${JSON.stringify(result.trace, null, 2)}`;
}
resultContent.textContent = displayContent || 'κ²°κ³Όκ° μμ΅λλ€.';
resultSection.style.display = 'block';
} catch (error) {
console.error('Error:', error);
status.className = 'status error';
status.textContent = 'β μ€λ₯κ° λ°μνμ΅λλ€: ' + error.message;
resultContent.textContent = `μ€λ₯ μμΈ:\n${error.stack || error.message}`;
resultSection.style.display = 'block';
} finally {
// UI μν 볡μ
executeBtn.disabled = false;
executeBtn.textContent = 'π μ€ννκΈ°';
loading.style.display = 'none';
}
}
// Enter ν€λ‘ μ€ν
document.getElementById('query').addEventListener('keypress', function(e) {
if (e.key === 'Enter' && e.ctrlKey) {
executeGitWorkflow();
}
});
// νμ΄μ§ λ‘λ μ ν¬μ»€μ€
window.addEventListener('load', function() {
document.getElementById('query').focus();
});
</script>
</body>
</html>