@vectorchat/mcp-server
Version:
VectorChat MCP Server - Encrypted AI-to-AI communication with hardware security (YubiKey/TPM). 45+ MCP tools for Windsurf, Claude, and AI assistants. Model-based identity with EMDM encryption. Dynamic AI playbook system, communication zones, message relay
971 lines (837 loc) • 36 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings - VectorChat Web</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--primary-color: #667eea;
--secondary-color: #764ba2;
--success-color: #4caf50;
--warning-color: #ff9800;
--error-color: #f44336;
--surface-color: #ffffff;
--background-color: #f5f5f5;
--text-primary: #333333;
--text-secondary: #666666;
--border-color: #e0e0e0;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--background-color);
color: var(--text-primary);
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: var(--surface-color);
border-radius: 12px;
box-shadow: var(--shadow);
overflow: hidden;
margin-top: 20px;
}
.header {
background: var(--primary-gradient);
color: white;
padding: 24px;
}
.header h1 {
font-size: 1.8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
}
.tabs {
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
display: flex;
overflow-x: auto;
}
.tab {
padding: 16px 24px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
font-weight: 500;
white-space: nowrap;
color: var(--text-secondary);
}
.tab:hover {
background: #f5f5f5;
color: var(--text-primary);
}
.tab.active {
border-bottom-color: var(--primary-color);
color: var(--primary-color);
background: rgba(102, 126, 234, 0.05);
}
.tab-content {
padding: 24px;
display: none;
}
.tab-content.active {
display: block;
}
.settings-section {
margin-bottom: 32px;
padding: 20px;
background: #fafafa;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.settings-section-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 16px;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.settings-group {
margin-bottom: 20px;
}
.settings-group-title {
font-weight: 600;
margin-bottom: 12px;
color: var(--text-primary);
}
.settings-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.settings-item:last-child {
border-bottom: none;
}
.settings-label {
font-weight: 500;
flex: 1;
}
.settings-description {
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 2px;
}
.settings-value {
color: var(--text-secondary);
font-size: 0.9rem;
}
.settings-control {
display: flex;
align-items: center;
gap: 12px;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--primary-color);
}
input:checked + .slider:before {
transform: translateX(26px);
}
.form-input {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 0.9rem;
width: 150px;
}
.form-input:focus {
outline: none;
border-color: var(--primary-color);
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.btn-primary {
background: var(--primary-gradient);
color: white;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: #f5f5f5;
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: #e8e8e8;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.status-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
padding: 4px 8px;
border-radius: 12px;
}
.status-connected {
background: rgba(76, 175, 80, 0.1);
color: var(--success-color);
}
.status-disconnected {
background: rgba(244, 67, 54, 0.1);
color: var(--error-color);
}
.actions {
padding: 24px;
border-top: 1px solid var(--border-color);
display: flex;
gap: 12px;
justify-content: space-between;
}
@media (max-width: 768px) {
.tabs {
flex-direction: column;
}
.tab {
border-bottom: 1px solid var(--border-color);
border-left: none;
}
.actions {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>⚙️ Settings</h1>
</div>
<div class="tabs">
<div class="tab active" onclick="showTab('general')">General</div>
<div class="tab" onclick="showTab('connection')">Connection</div>
<div class="tab" onclick="showTab('ai')">AI & Model</div>
<div class="tab" onclick="showTab('security')">Security</div>
<div class="tab" onclick="showTab('advanced')">Advanced</div>
</div>
<!-- General Settings -->
<div class="tab-content active" id="general">
<div class="settings-section">
<div class="settings-section-title">👤 User Profile</div>
<div class="settings-group">
<div class="settings-item">
<div class="settings-label">Display Name</div>
<div class="settings-control">
<input type="text" class="form-input" id="displayName" placeholder="Your display name">
<button class="btn btn-primary" onclick="updateProfile()">Update</button>
</div>
</div>
<div class="settings-item">
<div class="settings-label">Username</div>
<div class="settings-control">
<span class="settings-value" id="currentUsername">Not set</span>
<button class="btn btn-secondary" onclick="changeUsername()">Change</button>
</div>
</div>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">💬 Chat Settings</div>
<div class="settings-group">
<div class="settings-item">
<div>
<div class="settings-label">Chat History</div>
<div class="settings-description">Save conversation history locally</div>
</div>
<label class="switch">
<input type="checkbox" id="chatHistoryEnabled" checked>
<span class="slider"></span>
</label>
</div>
<div class="settings-item">
<div>
<div class="settings-label">AI Conversations</div>
<div class="settings-description">Enable AI-to-AI conversation features</div>
</div>
<label class="switch">
<input type="checkbox" id="aiConversationsEnabled" checked>
<span class="slider"></span>
</label>
</div>
<div class="settings-item">
<div>
<div class="settings-label">Notifications</div>
<div class="settings-description">Show desktop notifications</div>
</div>
<label class="switch">
<input type="checkbox" id="notificationsEnabled" checked>
<span class="slider"></span>
</label>
</div>
</div>
</div>
</div>
<!-- Connection Settings -->
<div class="tab-content" id="connection">
<div class="settings-section">
<div class="settings-section-title">🔌 Network Configuration</div>
<div class="settings-group">
<div class="settings-item">
<div class="settings-label">WebSocket URL</div>
<div class="settings-control">
<input type="text" class="form-input" id="websocketUrl" value="ws://localhost:8765">
<button class="btn btn-primary" onclick="updateConnection()">Update</button>
</div>
</div>
<div class="settings-item">
<div>
<div class="settings-label">Auto-connect</div>
<div class="settings-description">Automatically connect on startup</div>
</div>
<label class="switch">
<input type="checkbox" id="autoConnectEnabled">
<span class="slider"></span>
</label>
</div>
<div class="settings-item">
<div class="settings-label">Connection Status</div>
<div class="status-indicator status-disconnected" id="connectionStatus">
<span class="status-dot"></span>
Disconnected
</div>
</div>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">🌐 P2P & Discovery</div>
<div class="settings-group">
<div class="settings-item">
<div>
<div class="settings-label">IPFS Networking</div>
<div class="settings-description">Enable decentralized peer-to-peer communication</div>
</div>
<label class="switch">
<input type="checkbox" id="ipfsEnabled" checked>
<span class="slider"></span>
</label>
</div>
<div class="settings-item">
<div class="settings-label">IPFS Node URL</div>
<div class="settings-control">
<input type="text" class="form-input" id="ipfsUrl" value="/ip4/127.0.0.1/tcp/5001">
<button class="btn btn-secondary" onclick="testIPFSConnection()">Test</button>
</div>
</div>
</div>
</div>
</div>
<!-- AI & Model Settings -->
<div class="tab-content" id="ai">
<div class="settings-section">
<div class="settings-section-title">🤖 AI Configuration</div>
<div class="settings-group">
<div class="settings-item">
<div class="settings-label">Current Model</div>
<div class="settings-control">
<span class="settings-value" id="currentModel">Not loaded</span>
<button class="btn btn-secondary" onclick="openModelSelection()">Change</button>
</div>
</div>
<div class="settings-item">
<div class="settings-label">Context Size</div>
<div class="settings-control">
<select class="form-input" id="contextSize">
<option value="2048">2K tokens</option>
<option value="4096">4K tokens</option>
<option value="8192">8K tokens</option>
<option value="16384">16K tokens</option>
</select>
</div>
</div>
<div class="settings-item">
<div>
<div class="settings-label">GPU Acceleration</div>
<div class="settings-description">Use GPU for faster AI processing</div>
</div>
<label class="switch">
<input type="checkbox" id="gpuAccelerationEnabled" checked>
<span class="slider"></span>
</label>
</div>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">⚡ Performance</div>
<div class="settings-group">
<div class="settings-item">
<div class="settings-label">GPU Layers</div>
<div class="settings-control">
<input type="number" class="form-input" id="gpuLayers" value="-1" min="-1" max="100">
<span class="settings-description" style="font-size: 0.8rem; color: var(--text-secondary);">-1 = All layers</span>
</div>
</div>
<div class="settings-item">
<div class="settings-label">Temperature</div>
<div class="settings-control">
<input type="number" class="form-input" id="temperature" value="0.7" min="0" max="2" step="0.1">
<span class="settings-description" style="font-size: 0.8rem; color: var(--text-secondary);">Creativity level</span>
</div>
</div>
</div>
</div>
</div>
<!-- Security Settings -->
<div class="tab-content" id="security">
<div class="settings-section">
<div class="settings-section-title">🔐 Encryption & Security</div>
<div class="settings-group">
<div class="settings-item">
<div>
<div class="settings-label">EMDM Encryption</div>
<div class="settings-description">Model-based cryptographic encryption</div>
</div>
<span class="status-indicator status-connected">
<span class="status-dot"></span>
Active
</span>
</div>
<div class="settings-item">
<div class="settings-label">Key Space</div>
<div class="settings-control">
<span class="settings-value" id="keySpace">Calculating...</span>
</div>
</div>
<div class="settings-item">
<div>
<div class="settings-label">Auto-encrypt</div>
<div class="settings-description">Automatically encrypt all messages</div>
</div>
<label class="switch">
<input type="checkbox" id="autoEncryptEnabled" checked>
<span class="slider"></span>
</label>
</div>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">🆔 Identity Management</div>
<div class="settings-group">
<div class="settings-item">
<div class="settings-label">Current Identity</div>
<div class="settings-control">
<span class="settings-value" id="currentIdentity">Not set</span>
<button class="btn btn-secondary" onclick="openIdentitySetup()">Manage</button>
</div>
</div>
<div class="settings-item">
<div class="settings-label">Identity Hash</div>
<div class="settings-control">
<span class="settings-value" id="identityHash" style="font-family: monospace;">Not generated</span>
</div>
</div>
<div class="settings-item">
<div>
<div class="settings-label">Biometric Verification</div>
<div class="settings-description">Use system biometrics for identity</div>
</div>
<label class="switch">
<input type="checkbox" id="biometricEnabled">
<span class="slider"></span>
</label>
</div>
</div>
</div>
</div>
<!-- Advanced Settings -->
<div class="tab-content" id="advanced">
<div class="settings-section">
<div class="settings-section-title">🔧 System Configuration</div>
<div class="settings-group">
<div class="settings-item">
<div class="settings-label">MCP Port</div>
<div class="settings-control">
<input type="number" class="form-input" id="mcpPort" value="8766" min="1024" max="65535">
</div>
</div>
<div class="settings-item">
<div class="settings-label">WebSocket Port</div>
<div class="settings-control">
<input type="number" class="form-input" id="websocketPort" value="8765" min="1024" max="65535">
</div>
</div>
<div class="settings-item">
<div class="settings-label">Log Level</div>
<div class="settings-control">
<select class="form-input" id="logLevel">
<option value="error">Error</option>
<option value="warning">Warning</option>
<option value="info" selected>Info</option>
<option value="debug">Debug</option>
</select>
</div>
</div>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">🧹 Maintenance</div>
<div class="settings-group">
<div class="settings-item">
<div class="settings-label">Clear Cache</div>
<div class="settings-control">
<button class="btn btn-secondary" onclick="clearCache()">Clear</button>
</div>
</div>
<div class="settings-item">
<div class="settings-label">Reset Settings</div>
<div class="settings-control">
<button class="btn btn-danger" onclick="resetSettings()">Reset</button>
</div>
</div>
<div class="settings-item">
<div class="settings-label">Export Settings</div>
<div class="settings-control">
<button class="btn btn-secondary" onclick="exportSettings()">Export</button>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<button class="btn btn-secondary" onclick="closeSettings()">Close</button>
<div>
<button class="btn btn-secondary" onclick="refreshSettings()">🔄 Refresh</button>
<button class="btn btn-primary" onclick="saveSettings()">💾 Save All</button>
</div>
</div>
</div>
<script>
let currentTab = 'general';
// Initialize
document.addEventListener('DOMContentLoaded', function() {
loadSettings();
setupEventListeners();
startStatusUpdates();
});
function setupEventListeners() {
// Tab switching
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() {
showTab(this.textContent.toLowerCase().trim());
});
});
// Settings changes
document.querySelectorAll('input, select').forEach(element => {
element.addEventListener('change', markSettingsChanged);
});
}
function showTab(tabName) {
// Hide all tabs
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('active');
});
// Show selected tab
document.getElementById(tabName).classList.add('active');
// Find and activate tab button
document.querySelectorAll('.tab').forEach(tab => {
if (tab.textContent.toLowerCase().trim() === tabName) {
tab.classList.add('active');
}
});
currentTab = tabName;
}
function loadSettings() {
// Load from localStorage or daemon
const saved = localStorage.getItem('vectorchat-web-settings');
if (saved) {
try {
const settings = JSON.parse(saved);
// Update UI elements
Object.keys(settings).forEach(key => {
const element = document.getElementById(key);
if (element) {
if (element.type === 'checkbox') {
element.checked = settings[key];
} else {
element.value = settings[key];
}
}
});
} catch (e) {
console.error('Error loading settings:', e);
}
}
// Load identity info
const identity = localStorage.getItem('vectorchat-identity');
if (identity) {
try {
const identityData = JSON.parse(identity);
document.getElementById('currentUsername').textContent = identityData.username || 'Not set';
document.getElementById('displayName').value = identityData.displayName || '';
} catch (e) {
console.error('Error loading identity:', e);
}
}
updateStatusDisplay();
}
function markSettingsChanged() {
// Visual indication that settings have changed
const saveButton = document.querySelector('.btn-primary');
saveButton.style.background = 'linear-gradient(135deg, #4caf50 0%, #45a049 100%)';
saveButton.textContent = '💾 Save*';
}
function saveSettings() {
const settings = {};
// Collect all settings
document.querySelectorAll('input, select').forEach(element => {
if (element.type === 'checkbox') {
settings[element.id] = element.checked;
} else {
settings[element.id] = element.value;
}
});
// Save to localStorage
localStorage.setItem('vectorchat-web-settings', JSON.stringify(settings));
// Reset save button
const saveButton = document.querySelector('.btn-primary');
saveButton.style.background = '';
saveButton.textContent = '💾 Save All';
showNotification('Settings saved successfully!', 'success');
}
function updateConnection() {
const newUrl = document.getElementById('websocketUrl').value;
// Update in settings
const settings = JSON.parse(localStorage.getItem('vectorchat-web-settings') || '{}');
settings.websocketUrl = newUrl;
localStorage.setItem('vectorchat-web-settings', JSON.stringify(settings));
showNotification('Connection settings updated. Restart app to apply.', 'info');
}
function updateProfile() {
const displayName = document.getElementById('displayName').value;
if (displayName) {
// Update identity
const identity = JSON.parse(localStorage.getItem('vectorchat-identity') || '{}');
identity.displayName = displayName;
localStorage.setItem('vectorchat-identity', JSON.stringify(identity));
showNotification('Profile updated!', 'success');
}
}
function changeUsername() {
const newUsername = prompt('Enter new username:');
if (newUsername) {
// Update identity
const identity = JSON.parse(localStorage.getItem('vectorchat-identity') || '{}');
identity.username = newUsername;
localStorage.setItem('vectorchat-identity', JSON.stringify(identity));
document.getElementById('currentUsername').textContent = newUsername;
showNotification('Username changed!', 'success');
}
}
function openModelSelection() {
window.open('model-selection.html', '_blank', 'width=800,height=600');
}
function openIdentitySetup() {
window.open('identity-setup.html', '_blank', 'width=600,height=700');
}
function clearCache() {
if (confirm('Clear all cached data? This cannot be undone.')) {
localStorage.removeItem('vectorchat-web-settings');
localStorage.removeItem('vectorchat-chat-history');
localStorage.removeItem('vectorchat-identity');
showNotification('Cache cleared!', 'success');
setTimeout(() => {
window.location.reload();
}, 1000);
}
}
function resetSettings() {
if (confirm('Reset all settings to defaults? This cannot be undone.')) {
localStorage.clear();
showNotification('Settings reset!', 'warning');
setTimeout(() => {
window.location.reload();
}, 1000);
}
}
function exportSettings() {
const settings = localStorage.getItem('vectorchat-web-settings');
const identity = localStorage.getItem('vectorchat-identity');
const history = localStorage.getItem('vectorchat-chat-history');
const exportData = {
settings: settings ? JSON.parse(settings) : {},
identity: identity ? JSON.parse(identity) : {},
history: history ? JSON.parse(history) : {},
exportedAt: new Date().toISOString()
};
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `vectorchat-backup-${new Date().toISOString().split('T')[0]}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('Settings exported!', 'success');
}
async function testIPFSConnection() {
const url = document.getElementById('ipfsUrl').value;
try {
const response = await fetch('http://localhost:3737/api/detect-cpu'); // Simple health check
if (response.ok) {
showNotification('IPFS connection test successful!', 'success');
} else {
throw new Error('IPFS not responding');
}
} catch (error) {
showNotification(`IPFS connection test failed: ${error.message}`, 'error');
}
}
function refreshSettings() {
loadSettings();
showNotification('Settings refreshed!', 'info');
}
function startStatusUpdates() {
// Update status every 5 seconds
setInterval(updateStatusDisplay, 5000);
}
async function updateStatusDisplay() {
try {
// Check daemon status
const response = await fetch('http://localhost:3737/health');
const isDaemonOnline = response.ok;
const statusElement = document.getElementById('connectionStatus');
const currentModelElement = document.getElementById('currentModel');
if (isDaemonOnline) {
statusElement.className = 'status-indicator status-connected';
statusElement.innerHTML = '<span class="status-dot"></span>Connected';
// Get model status
try {
const statusResponse = await fetch('http://localhost:3737/api/status');
const statusData = await statusResponse.json();
if (statusData.model_status) {
currentModelElement.textContent =
`${statusData.model_status.type} (${statusData.model_status.status})`;
}
} catch (e) {
currentModelElement.textContent = 'Unknown';
}
} else {
statusElement.className = 'status-indicator status-disconnected';
statusElement.innerHTML = '<span class="status-dot"></span>Disconnected';
currentModelElement.textContent = 'Daemon offline';
}
} catch (error) {
document.getElementById('connectionStatus').className = 'status-indicator status-disconnected';
document.getElementById('connectionStatus').innerHTML = '<span class="status-dot"></span>Offline';
document.getElementById('currentModel').textContent = 'Unavailable';
}
}
function closeSettings() {
if (window.opener) {
window.close();
} else {
window.location.href = 'web-app.html';
}
}
function showNotification(message, type = 'info') {
// Create notification element
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 12px 20px;
border-radius: 8px;
color: white;
font-weight: 500;
z-index: 3000;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
max-width: 400px;
`;
let backgroundColor;
switch (type) {
case 'error':
backgroundColor = '#f44336';
break;
case 'success':
backgroundColor = '#4caf50';
break;
case 'warning':
backgroundColor = '#ff9800';
break;
default:
backgroundColor = '#667eea';
}
notification.style.backgroundColor = backgroundColor;
notification.textContent = message;
document.body.appendChild(notification);
// Animate in
setTimeout(() => {
notification.style.opacity = '1';
notification.style.transform = 'translateX(0)';
}, 100);
// Animate out and remove
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transform = 'translateX(100%)';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
</script>
</body>
</html>