d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-10 23:09:50 +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 { .tools-modal-content {
background-color: var(--vscode-editor-background); background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border); border: 1px solid var(--vscode-panel-border);
border-radius: 6px; border-radius: 8px;
width: 500px; width: 700px;
max-height: 600px; max-width: 90vw;
max-height: 80vh;
display: flex; display: flex;
flex-direction: column; 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 { .tools-modal-header {
@@ -1667,6 +1668,30 @@ const styles = `
overflow-y: auto; 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 { .tool-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -2310,20 +2335,26 @@ const styles = `
/* MCP Servers styles */ /* MCP Servers styles */
.mcp-servers-list { .mcp-servers-list {
margin-bottom: 20px; max-height: 500px;
max-height: 400px;
overflow-y: auto; overflow-y: auto;
padding: 4px;
} }
.mcp-server-item { .mcp-server-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 20px 24px;
border: 1px solid var(--vscode-panel-border); border: 1px solid var(--vscode-panel-border);
border-radius: 6px; border-radius: 8px;
margin-bottom: 8px; margin-bottom: 16px;
background-color: var(--vscode-editor-background); 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 { .server-info {
@@ -2332,33 +2363,35 @@ const styles = `
.server-name { .server-name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 16px;
color: var(--vscode-foreground); color: var(--vscode-foreground);
margin-bottom: 4px; margin-bottom: 8px;
} }
.server-type { .server-type {
display: inline-block; display: inline-block;
background-color: var(--vscode-badge-background); background-color: var(--vscode-badge-background);
color: var(--vscode-badge-foreground); color: var(--vscode-badge-foreground);
padding: 2px 6px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
font-size: 10px; font-size: 11px;
font-weight: 500; font-weight: 500;
margin-bottom: 4px; margin-bottom: 8px;
} }
.server-config { .server-config {
font-size: 12px; font-size: 13px;
color: var(--vscode-descriptionForeground); color: var(--vscode-descriptionForeground);
opacity: 0.8; opacity: 0.9;
line-height: 1.4;
} }
.server-delete-btn { .server-delete-btn {
padding: 4px 8px; padding: 8px 16px;
font-size: 12px; font-size: 13px;
color: var(--vscode-errorForeground); color: var(--vscode-errorForeground);
border-color: var(--vscode-errorForeground); border-color: var(--vscode-errorForeground);
min-width: 80px;
} }
.server-delete-btn:hover { .server-delete-btn:hover {
@@ -2368,19 +2401,26 @@ const styles = `
.mcp-add-server { .mcp-add-server {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 24px;
padding: 0 4px;
} }
.mcp-add-form { .mcp-add-form {
background-color: var(--vscode-editor-background); background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border); border: 1px solid var(--vscode-panel-border);
border-radius: 6px; border-radius: 8px;
padding: 16px; padding: 24px;
margin-top: 16px; margin-top: 20px;
max-height: 400px;
overflow-y: auto;
box-sizing: border-box;
width: 100%;
} }
.form-group { .form-group {
margin-bottom: 16px; margin-bottom: 20px;
box-sizing: border-box;
width: 100%;
} }
.form-group label { .form-group label {
@@ -2395,6 +2435,7 @@ const styles = `
.form-group select, .form-group select,
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
max-width: 100%;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid var(--vscode-input-border); border: 1px solid var(--vscode-input-border);
border-radius: 4px; border-radius: 4px;
@@ -2402,6 +2443,8 @@ const styles = `
color: var(--vscode-input-foreground); color: var(--vscode-input-foreground);
font-size: 13px; font-size: 13px;
font-family: var(--vscode-font-family); font-family: var(--vscode-font-family);
box-sizing: border-box;
resize: vertical;
} }
.form-group input:focus, .form-group input:focus,

30
src/ui.ts
View File

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