d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-10 08:39:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

MCP Servers UI

Browse Source
This commit is contained in:
andrepimenta
2025-07-11 22:39:48 +01:00
parent cf46551f00
commit 03b0eb96fe
2 changed files with 82 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/ui-styles.ts
View File

@@ -1622,12 +1622,13 @@ const styles = `
.tools-modal-content {
background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
width: 500px;
max-height: 600px;
border-radius: 8px;
width: 700px;
max-width: 90vw;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.tools-modal-header {
@@ -1667,6 +1668,30 @@ const styles = `
overflow-y: auto;
}
/* MCP Modal content area improvements */
#mcpModal * {
box-sizing: border-box;
}
#mcpModal .tools-list {
padding: 24px;
max-height: calc(80vh - 120px);
overflow-y: auto;
width: 100%;
}
#mcpModal .mcp-servers-list {
padding: 0;
}
#mcpModal .mcp-add-server {
padding: 0;
}
#mcpModal .mcp-add-form {
padding: 12px;
}
.tool-item {
display: flex;
align-items: flex-start;
@@ -2310,20 +2335,26 @@ const styles = `
/* MCP Servers styles */
.mcp-servers-list {
margin-bottom: 20px;
max-height: 400px;
max-height: 500px;
overflow-y: auto;
padding: 4px;
}
.mcp-server-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
padding: 20px 24px;
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
margin-bottom: 8px;
border-radius: 8px;
margin-bottom: 16px;
background-color: var(--vscode-editor-background);
transition: all 0.2s ease;
}
.mcp-server-item:hover {
border-color: var(--vscode-focusBorder);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.server-info {
@@ -2332,33 +2363,35 @@ const styles = `
.server-name {
font-weight: 600;
font-size: 14px;
font-size: 16px;
color: var(--vscode-foreground);
margin-bottom: 4px;
margin-bottom: 8px;
}
.server-type {
display: inline-block;
background-color: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
padding: 2px 6px;
padding: 4px 8px;
border-radius: 4px;
font-size: 10px;
font-size: 11px;
font-weight: 500;
margin-bottom: 4px;
margin-bottom: 8px;
}
.server-config {
font-size: 12px;
font-size: 13px;
color: var(--vscode-descriptionForeground);
opacity: 0.8;
opacity: 0.9;
line-height: 1.4;
}
.server-delete-btn {
padding: 4px 8px;
font-size: 12px;
padding: 8px 16px;
font-size: 13px;
color: var(--vscode-errorForeground);
border-color: var(--vscode-errorForeground);
min-width: 80px;
}
.server-delete-btn:hover {
@@ -2368,19 +2401,26 @@ const styles = `
.mcp-add-server {
text-align: center;
margin-bottom: 20px;
margin-bottom: 24px;
padding: 0 4px;
}
.mcp-add-form {
background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
padding: 16px;
margin-top: 16px;
border-radius: 8px;
padding: 24px;
margin-top: 20px;
max-height: 400px;
overflow-y: auto;
box-sizing: border-box;
width: 100%;
}
.form-group {
margin-bottom: 16px;
margin-bottom: 20px;
box-sizing: border-box;
width: 100%;
}
.form-group label {
@@ -2395,6 +2435,7 @@ const styles = `
.form-group select,
.form-group textarea {
width: 100%;
max-width: 100%;
padding: 8px 12px;
border: 1px solid var(--vscode-input-border);
border-radius: 4px;
@@ -2402,6 +2443,8 @@ const styles = `
color: var(--vscode-input-foreground);
font-size: 13px;
font-family: var(--vscode-font-family);
box-sizing: border-box;
resize: vertical;
}
.form-group input:focus,

30
src/ui.ts
View File

@@ -155,13 +155,14 @@ const html = `<!DOCTYPE html>
<span>MCP Servers</span>
<button class="tools-close-btn" onclick="hideMCPModal()">✕</button>
</div>
<div class="mcp-servers-list" id="mcpServersList">
<!-- MCP servers will be loaded here -->
</div>
<div class="mcp-add-server">
<button class="btn outlined" onclick="showAddServerForm()" id="addServerBtn">+ Add MCP Server</button>
</div>
<div class="mcp-add-form" id="addServerForm" style="display: none;">
<div class="tools-list">
<div class="mcp-servers-list" id="mcpServersList">
<!-- MCP servers will be loaded here -->
</div>
<div class="mcp-add-server">
<button class="btn outlined" onclick="showAddServerForm()" id="addServerBtn">+ Add MCP Server</button>
</div>
<div class="mcp-add-form" id="addServerForm" style="display: none;">
<div class="form-group">
<label for="serverName">Server Name:</label>
<input type="text" id="serverName" placeholder="my-server" required>
@@ -169,28 +170,28 @@ const html = `<!DOCTYPE html>
<div class="form-group">
<label for="serverType">Server Type:</label>
<select id="serverType" onchange="updateServerForm()">
<option value="stdio">stdio</option>
<option value="http">HTTP</option>
<option value="sse">SSE</option>
<option value="stdio">stdio</option>
</select>
</div>
<div class="form-group" id="commandGroup">
<div class="form-group" id="commandGroup" style="display: none;">
<label for="serverCommand">Command:</label>
<input type="text" id="serverCommand" placeholder="/path/to/server">
</div>
<div class="form-group" id="urlGroup" style="display: none;">
<div class="form-group" id="urlGroup">
<label for="serverUrl">URL:</label>
<input type="text" id="serverUrl" placeholder="https://example.com/mcp">
</div>
<div class="form-group" id="argsGroup">
<div class="form-group" id="argsGroup" style="display: none;">
<label for="serverArgs">Arguments (one per line):</label>
<textarea id="serverArgs" placeholder="--api-key&#10;abc123" rows="3"></textarea>
</div>
<div class="form-group" id="envGroup">
<div class="form-group" id="envGroup" style="display: none;">
<label for="serverEnv">Environment Variables (KEY=value, one per line):</label>
<textarea id="serverEnv" placeholder="API_KEY=123&#10;CACHE_DIR=/tmp" rows="3"></textarea>
</div>
<div class="form-group" id="headersGroup" style="display: none;">
<div class="form-group" id="headersGroup">
<label for="serverHeaders">Headers (KEY=value, one per line):</label>
<textarea id="serverHeaders" placeholder="Authorization=Bearer token&#10;X-API-Key=key" rows="3"></textarea>
</div>
@@ -201,6 +202,7 @@ const html = `<!DOCTYPE html>
</div>
</div>
</div>
</div>
<!-- Settings modal -->
<div id="settingsModal" class="tools-modal" style="display: none;">
@@ -1608,7 +1610,7 @@ const html = `<!DOCTYPE html>
document.getElementById('serverArgs').value = '';
document.getElementById('serverEnv').value = '';
document.getElementById('serverHeaders').value = '';
document.getElementById('serverType').value = 'stdio';
document.getElementById('serverType').value = 'http';
updateServerForm();
}