Customizing the Admin UI¶

// Theme is automatically saved to localStorage
localStorage.setItem('theme', 'dark');  // or 'light'

// Enable panel customization
const panelConfig = {
    virtualServers: {
        visible: true,
        order: 1,
        width: 'full'
    },
    tools: {
        visible: true,
        order: 2,
        width: 'half'
    },
    resources: {
        visible: true,
        order: 3,
        width: 'half'
    },
    prompts: {
        visible: false,
        order: 4,
        width: 'full'
    }
};

// Save layout preferences
localStorage.setItem('panel-layout', JSON.stringify(panelConfig));

// Widget configuration example
const dashboardWidgets = [
    {
        id: 'server-status',
        type: 'status-card',
        position: { x: 0, y: 0, w: 4, h: 2 },
        config: {
            title: 'Server Status',
            refreshInterval: 5000
        }
    },
    {
        id: 'recent-tools',
        type: 'list',
        position: { x: 4, y: 0, w: 4, h: 3 },
        config: {
            title: 'Recently Used Tools',
            limit: 10
        }
    },
    {
        id: 'metrics-chart',
        type: 'chart',
        position: { x: 0, y: 2, w: 8, h: 4 },
        config: {
            title: 'Request Metrics',
            chartType: 'line',
            dataSource: '/api/metrics'
        }
    }
];

// User profile structure
const userProfile = {
    username: 'admin',
    preferences: {
        theme: 'dark',
        language: 'en',
        fontSize: 'medium',
        highContrast: false,
        reducedMotion: false,
        keyboardShortcuts: true
    },
    layout: {
        // Panel configuration
    },
    quickActions: [
        'create-server',
        'refresh-tools',
        'export-config'
    ]
};

// Save profile
localStorage.setItem('user-profile', JSON.stringify(userProfile));

// Export current settings
function exportSettings() {
    const settings = {
        profile: JSON.parse(localStorage.getItem('user-profile')),
        theme: localStorage.getItem('theme'),
        layout: JSON.parse(localStorage.getItem('panel-layout')),
        widgets: JSON.parse(localStorage.getItem('dashboard-widgets'))
    };

    const blob = new Blob([JSON.stringify(settings, null, 2)],
                          { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'mcpgateway-ui-settings.json';
    a.click();
}

// Import settings
function importSettings(file) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const settings = JSON.parse(e.target.result);

        // Apply imported settings
        if (settings.profile) {
            localStorage.setItem('user-profile',
                               JSON.stringify(settings.profile));
        }
        if (settings.theme) {
            localStorage.setItem('theme', settings.theme);
        }
        if (settings.layout) {
            localStorage.setItem('panel-layout',
                               JSON.stringify(settings.layout));
        }

        // Reload UI to apply changes
        location.reload();
    };
    reader.readAsText(file);
}

// Define keyboard shortcuts
const keyboardShortcuts = {
    'ctrl+n': 'createNewServer',
    'ctrl+r': 'refreshAll',
    'ctrl+/': 'toggleSearch',
    'ctrl+d': 'toggleTheme',
    'ctrl+,': 'openSettings',
    'esc': 'closeModal'
};

// Quick action toolbar configuration
const quickActions = [
    {
        id: 'create-server',
        label: 'New Server',
        icon: 'plus',
        action: () => openModal('create-server')
    },
    {
        id: 'refresh-tools',
        label: 'Refresh Tools',
        icon: 'refresh',
        action: () => refreshToolList()
    }
];

// Font size preferences
const fontSizeOptions = {
    small: '14px',
    medium: '16px',
    large: '18px',
    xlarge: '20px'
};

function setFontSize(size) {
    document.documentElement.style.setProperty('--base-font-size',
                                               fontSizeOptions[size]);
    localStorage.setItem('font-size', size);
}

// Enhanced keyboard navigation
document.addEventListener('keydown', (e) => {
    // Tab navigation between sections
    if (e.key === 'Tab') {
        const focusableElements = document.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        // Handle focus management
    }

    // Arrow key navigation in lists
    if (e.key.startsWith('Arrow')) {
        const currentItem = document.activeElement;
        const items = Array.from(currentItem.parentElement.children);
        // Navigate through list items
    }
});

// Language configuration
const translations = {
    en: {
        'servers.title': 'Virtual Servers',
        'servers.create': 'Create Server',
        'servers.empty': 'No servers configured'
    },
    es: {
        'servers.title': 'Servidores Virtuales',
        'servers.create': 'Crear Servidor',
        'servers.empty': 'No hay servidores configurados'
    },
    fr: {
        'servers.title': 'Serveurs Virtuels',
        'servers.create': 'Créer un Serveur',
        'servers.empty': 'Aucun serveur configuré'
    }
};

// Apply translations
function setLanguage(lang) {
    const t = translations[lang];
    document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.dataset.i18n;
        if (t[key]) {
            el.textContent = t[key];
        }
    });
    localStorage.setItem('language', lang);
}

// Plugin registration
class CustomPlugin {
    constructor(config) {
        this.name = config.name;
        this.version = config.version;
    }

    init() {
        // Add custom functionality
        this.registerCustomPanel();
        this.addCustomMenuItems();
    }

    registerCustomPanel() {
        const panel = document.createElement('div');
        panel.className = 'custom-panel';
        panel.innerHTML = this.renderPanel();
        document.querySelector('#panels').appendChild(panel);
    }

    renderPanel() {
        return `
            <div class="panel">
                <h3>${this.name}</h3>
                <!-- Custom content -->
            </div>
        `;
    }
}

// Register plugin
const plugin = new CustomPlugin({
    name: 'Custom Analytics',
    version: '1.0.0'
});
plugin.init();

// Lazy load panels
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const panel = entry.target;
            loadPanelContent(panel.dataset.panelId);
            observer.unobserve(panel);
        }
    });
});

document.querySelectorAll('.lazy-panel').forEach(panel => {
    observer.observe(panel);
});

// Service Worker for offline support
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('ui-v1').then((cache) => {
            return cache.addAll([
                '/admin',
                '/static/admin.css',
                '/static/admin.js',
                '/static/icons/'
            ]);
        })
    );
});

// Cache API responses
const cacheAPI = async (url, data) => {
    const cache = await caches.open('api-cache');
    const response = new Response(JSON.stringify(data));
    await cache.put(url, response);
};

// Enable UI debug mode
localStorage.setItem('ui-debug', 'true');

// Debug logging
if (localStorage.getItem('ui-debug') === 'true') {
    console.log('Panel configuration:', panelConfig);
    console.log('Theme:', currentTheme);
    console.log('User preferences:', userProfile);
}

// Connect to SSE endpoint for real-time updates
const eventSource = new EventSource(
    `/servers/${serverId}/sse`,
    { headers: { 'Authorization': `Bearer ${token}` } }
);

eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Server update:', data);
};

eventSource.addEventListener('tool-invoked', (event) => {
    console.log('Tool invoked:', JSON.parse(event.data));
});

// WebSocket for bidirectional communication
const ws = new WebSocket(`ws://localhost:4444/ws`);

ws.onopen = () => {
    // Send authentication
    ws.send(JSON.stringify({
        type: 'auth',
        token: token
    }));

    // Subscribe to updates
    ws.send(JSON.stringify({
        jsonrpc: '2.0',
        method: 'subscribe',
        params: { topics: ['tools', 'servers'] },
        id: 1
    }));
};

ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
    console.log('WebSocket message:', message);
};

async function apiCall(url, options) {
    const response = await fetch(url, options);

    if (response.status === 429) {
        const retryAfter = response.headers.get('Retry-After');
        console.log(`Rate limited. Retry after ${retryAfter} seconds`);
        // Implement exponential backoff
        await sleep(retryAfter * 1000);
        return apiCall(url, options);
    }

    return response;
}

// Send custom metrics to the gateway
fetch('/metrics/custom', {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        metric: 'ui.page_view',
        value: 1,
        labels: {
            page: 'dashboard',
            user: 'admin'
        }
    })
});