ft-scout 9.2.0 → 9.4.1

package/web/app.js

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   FrontTerrain Scout  Multi-Page Application Engine v9.2.0
+   FrontTerrain Scout  Multi-Page Application Engine v9.5.0
    ========================================================================== */
 
 const FIREBASE_CONFIG = {
@@ -1103,7 +1103,7 @@ function initTerminalSimulator() {
 `;
         } else if (lower.includes('status')) {
             response.innerHTML = `
-<span class="term-green">✔ Scout CLI Engine: v9.2.0 Online</span><br>
+<span class="term-green">✔ Scout CLI Engine: v9.5.0 Online</span><br>
 ↳ User: <strong>${escapeHtml(state.user ? state.user.name : 'Guest Session')}</strong><br>
 ↳ Active Subscription: <strong>${escapeHtml(TIER_DETAILS[state.currentTier].name)}</strong><br>
 ↳ Credit Quota: <strong>${state.byokEnabled ? 'BYOK Mode (Unlimited)' : `${state.creditsUsed} / ${state.creditsTotal} Credits Used`}</strong><br>
@@ -1881,19 +1881,187 @@ function updateUserUI() {
         }
     }
 
+    // Render multi-account switching list in dropdown
+    renderDropdownAccounts();
+
     // Refresh MCP servers scoped to active user
     if (typeof loadMcpData === 'function') {
         loadMcpData();
     }
 }
 
+function getSavedAccountsFromStorage() {
+    try {
+        const raw = localStorage.getItem('scout_accounts');
+        return raw ? JSON.parse(raw) : [];
+    } catch {
+        return [];
+    }
+}
+
+function saveAccountToStorageList(accountState) {
+    if (!accountState?.user?.email) return;
+    const accounts = getSavedAccountsFromStorage();
+    const key = accountState.user.email.toLowerCase();
+    const idx = accounts.findIndex(a => a.user?.email?.toLowerCase() === key);
+    const item = {
+        user: accountState.user,
+        token: accountState.token,
+        refreshToken: accountState.refreshToken,
+        currentTier: accountState.currentTier || 'free',
+        creditsUsed: accountState.creditsUsed ?? 0,
+        creditsTotal: accountState.creditsTotal ?? 100,
+        renewAt: accountState.renewAt,
+        paidTier: accountState.paidTier,
+        lastActiveAt: new Date().toISOString()
+    };
+    if (idx >= 0) {
+        accounts[idx] = item;
+    } else {
+        accounts.push(item);
+    }
+    localStorage.setItem('scout_accounts', JSON.stringify(accounts));
+}
+
+async function renderDropdownAccounts() {
+    const dropdown = getEl('user-dropdown');
+    if (!dropdown) return;
+
+    let container = getEl('dropdown-accounts-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'dropdown-accounts-container';
+        const logoutBtn = getEl('btn-dropdown-logout');
+        if (logoutBtn) {
+            dropdown.insertBefore(container, logoutBtn);
+        } else {
+            dropdown.appendChild(container);
+        }
+    }
+
+    let accounts = getSavedAccountsFromStorage();
+    if (state.serverConnected) {
+        try {
+            const res = await fetch(`${state.apiBaseUrl}/api/accounts`);
+            const data = await res.json();
+            if (data.success && Array.isArray(data.accounts)) {
+                accounts = data.accounts;
+                localStorage.setItem('scout_accounts', JSON.stringify(accounts));
+            }
+        } catch { }
+    }
+
+    const currentEmail = (state.user?.email || '').toLowerCase();
+    const otherAccounts = accounts.filter(a => (a.user?.email || '').toLowerCase() !== currentEmail);
+
+    let html = '<hr class="dropdown-divider">';
+    html += '<div class="dropdown-header" style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; padding-bottom: 4px;">Saved Accounts</div>';
+
+    if (otherAccounts.length > 0) {
+        otherAccounts.forEach(acc => {
+            const email = acc.user?.email || 'Unknown';
+            const tier = (acc.currentTier || 'free').toUpperCase();
+            html += `
+                <button type="button" class="dropdown-item btn-switch-account" data-email="${escapeHtml(email)}" style="display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;">
+                    <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><i class="fa-solid fa-circle-user" style="margin-right: 6px;"></i> ${escapeHtml(email)}</span>
+                    <span class="badge" style="font-size: 9px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.1);">${escapeHtml(tier)}</span>
+                </button>
+            `;
+        });
+    }
+
+    html += `
+        <a href="/auth?add_account=true" class="dropdown-item" id="btn-dropdown-add-account" style="color: var(--color-primary, #10b981);">
+            <i class="fa-solid fa-user-plus"></i> Add Another Account
+        </a>
+    `;
+
+    container.innerHTML = html;
+
+    container.querySelectorAll('.btn-switch-account').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const targetEmail = btn.dataset.email;
+            if (targetEmail) {
+                switchAccountWeb(targetEmail);
+            }
+        });
+    });
+}
+
+async function switchAccountWeb(targetEmail) {
+    showToast(`Switching active account to ${targetEmail}...`, 'info');
+    if (state.serverConnected) {
+        try {
+            const res = await fetch(`${state.apiBaseUrl}/api/accounts/switch`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: targetEmail })
+            });
+            const data = await res.json();
+            if (data.success && data.auth) {
+                state.user = data.auth.user;
+                state.token = data.auth.token;
+                state.refreshToken = data.auth.refreshToken || null;
+                state.currentTier = data.auth.currentTier || 'free';
+                state.creditsUsed = data.auth.creditsUsed ?? 0;
+                state.creditsTotal = data.auth.creditsTotal ?? 100;
+                state.renewAt = data.auth.renewAt || null;
+                state.byokEnabled = Boolean(data.auth.byokEnabled);
+                state.customLlmProvider = data.auth.customLlmProvider || 'nvidia';
+                state.customApiKey = data.auth.customApiKey || '';
+                state.customBaseUrl = data.auth.customBaseUrl || '';
+
+                saveSessionToStorage();
+                updateUserUI();
+                showToast(`Switched active account to ${targetEmail}`, 'success');
+                setTimeout(() => { window.location.reload(); }, 300);
+                return;
+            }
+        } catch { }
+    }
+
+    const accounts = getSavedAccountsFromStorage();
+    const target = accounts.find(a => (a.user?.email || '').toLowerCase() === targetEmail.toLowerCase());
+    if (target) {
+        state.user = target.user;
+        state.token = target.token;
+        state.refreshToken = target.refreshToken;
+        state.currentTier = target.currentTier || 'free';
+        state.creditsUsed = target.creditsUsed ?? 0;
+        state.creditsTotal = target.creditsTotal ?? 100;
+        state.renewAt = target.renewAt;
+
+        saveSessionToStorage();
+        updateUserUI();
+        showToast(`Switched active account to ${targetEmail}`, 'success');
+        setTimeout(() => { window.location.reload(); }, 300);
+    }
+}
+
 async function handleLogout() {
+    const currentEmail = (state.user?.email || '').toLowerCase();
+    let accounts = getSavedAccountsFromStorage();
+    accounts = accounts.filter(a => (a.user?.email || '').toLowerCase() !== currentEmail);
+    localStorage.setItem('scout_accounts', JSON.stringify(accounts));
+
     if (state.serverConnected) {
         try {
-            await fetch(`${state.apiBaseUrl}/api/logout`, { method: 'POST' });
+            await fetch(`${state.apiBaseUrl}/api/logout`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: currentEmail })
+            });
         } catch { }
     }
 
+    if (accounts.length > 0) {
+        const next = accounts[0];
+        switchAccountWeb(next.user.email);
+        showToast(`Logged out. Switched to ${next.user.email}.`, 'info');
+        return;
+    }
+
     state.user = null;
     state.token = null;
     state.refreshToken = null;
@@ -1929,6 +2097,7 @@ function saveSessionToStorage() {
     localStorage.setItem('scout_byok_provider', state.customLlmProvider);
     localStorage.setItem('scout_byok_key', state.customApiKey);
     localStorage.setItem('scout_byok_endpoint', state.customBaseUrl);
+    saveAccountToStorageList(state);
 }
 
 async function syncAuthWithServer() {
@@ -3352,6 +3521,153 @@ async function connectRemoteMcpInBrowser(server) {
     return { tools, latencyMs };
 }
 
+let mcpSyncPollerTimer = null;
+const FIRESTORE_MCP_BASE = `https://firestore.googleapis.com/v1/projects/${FIREBASE_CONFIG.projectId}/databases/(default)/documents/mcp_servers`;
+
+async function fetchCloudMcpServers(filterEmail) {
+    try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 4000);
+        const url = `${FIRESTORE_MCP_BASE}?key=${FIREBASE_CONFIG.apiKey}&pageSize=100`;
+        const res = await fetch(url, { signal: controller.signal });
+        clearTimeout(timeoutId);
+        if (!res.ok) return null;
+        const data = await res.json();
+        if (!data.documents || !Array.isArray(data.documents)) return [];
+        const servers = [];
+        const normEmail = filterEmail ? filterEmail.trim().toLowerCase() : '';
+        for (const doc of data.documents) {
+            try {
+                const fields = doc.fields || {};
+                const jsonStr = fields.dataJson?.stringValue;
+                if (!jsonStr) continue;
+                const server = JSON.parse(jsonStr);
+                const docEmail = (fields.userEmail?.stringValue || server.userEmail || '').trim().toLowerCase();
+                if (normEmail && docEmail && docEmail !== normEmail && docEmail !== 'global' && docEmail !== 'default') {
+                    continue;
+                }
+                servers.push(server);
+            } catch {}
+        }
+        return servers;
+    } catch (e) {
+        console.warn('[MCP Cloud] Failed to fetch cloud MCP servers:', e);
+        return null;
+    }
+}
+
+async function pushCloudMcpServer(server) {
+    try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000);
+        const docId = encodeURIComponent(server.id);
+        const url = `${FIRESTORE_MCP_BASE}/${docId}?key=${FIREBASE_CONFIG.apiKey}`;
+        const now = new Date().toISOString();
+        const payload = {
+            fields: {
+                id: { stringValue: server.id },
+                name: { stringValue: server.name || '' },
+                transport: { stringValue: server.transport || 'http' },
+                endpoint: { stringValue: server.endpoint || '' },
+                command: { stringValue: server.command || '' },
+                userEmail: { stringValue: server.userEmail || '' },
+                userId: { stringValue: server.userId || '' },
+                status: { stringValue: server.status || 'connected' },
+                toolCount: { integerValue: String(server.tools?.length || 0) },
+                updatedAt: { stringValue: now },
+                dataJson: { stringValue: JSON.stringify(server) }
+            }
+        };
+        const res = await fetch(url, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+            signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        return res.ok;
+    } catch (e) {
+        console.warn('[MCP Cloud] Failed to push MCP server to cloud:', e);
+        return false;
+    }
+}
+
+async function deleteCloudMcpServer(serverId) {
+    try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 4000);
+        const docId = encodeURIComponent(serverId);
+        const url = `${FIRESTORE_MCP_BASE}/${docId}?key=${FIREBASE_CONFIG.apiKey}`;
+        const res = await fetch(url, {
+            method: 'DELETE',
+            signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        return res.ok;
+    } catch (e) {
+        console.warn('[MCP Cloud] Failed to delete MCP server from cloud:', e);
+        return false;
+    }
+}
+
+async function getMcpApiBase() {
+    if (state.serverConnected && state.apiBaseUrl !== undefined) {
+        return state.apiBaseUrl;
+    }
+    const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' || window.location.protocol === 'file:';
+    if (isLocalhost) {
+        try {
+            const res = await fetch('/api/status', { method: 'GET' });
+            if (res.ok) {
+                const data = await res.json();
+                if (data && data.status === 'ok') {
+                    state.apiBaseUrl = '';
+                    state.serverConnected = true;
+                    return '';
+                }
+            }
+        } catch { }
+    }
+    const candidateHosts = ['http://localhost:9120', 'http://127.0.0.1:9120'];
+    for (const host of candidateHosts) {
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 800);
+            const res = await fetch(`${host}/api/status`, { method: 'GET', signal: controller.signal });
+            clearTimeout(timeoutId);
+            if (res.ok) {
+                const data = await res.json();
+                if (data && data.status === 'ok') {
+                    state.apiBaseUrl = host;
+                    state.serverConnected = true;
+                    return host;
+                }
+            }
+        } catch { }
+    }
+    return null;
+}
+
+function renderMcpSyncStatus() {
+    const container = getEl('mcp-sync-status-container');
+    if (!container) return;
+
+    container.innerHTML = `
+        <div class="mcp-sync-banner connected">
+            <div style="display: flex; align-items: center; gap: 10px;">
+                <span class="blink-dot" style="background-color: #10b981; width: 9px; height: 9px; border-radius: 50%; display: inline-block;"></span>
+                <span><strong>Cloud 2-Way CLI Sync Active:</strong> Synchronized with FrontTerrain Cloud Ecosystem. Changes instantly reflect in <code>scout mcp list</code>.</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 8px;">
+                <span style="font-size: 11px; opacity: 0.85;"><i class="fa-solid fa-arrows-rotate fa-spin" style="margin-right: 4px; color: #10b981;"></i> Cloud Sync</span>
+                <button class="btn btn-sm btn-outline" onclick="loadMcpData(true)" style="padding: 2px 8px; font-size: 11px;" title="Sync latest servers from Cloud">
+                    <i class="fa-solid fa-rotate-right"></i> Refresh
+                </button>
+            </div>
+        </div>
+    `;
+}
+
 const mcpState = {
     servers: (() => {
         try {
@@ -3368,10 +3684,11 @@ const mcpState = {
     loading: false
 };
 
-async function loadMcpData() {
+async function loadMcpData(forceProbe = false) {
     const userEmail = (state.user?.email || '').trim().toLowerCase();
     const storageKey = getAccountMcpStorageKey();
 
+    // 1. Instantly load local cache so UI is responsive
     try {
         const cached = localStorage.getItem(storageKey) || localStorage.getItem('scout_cached_mcp_servers');
         if (cached) {
@@ -3395,8 +3712,81 @@ async function loadMcpData() {
     renderMcpKpis();
     renderMcpServersList();
     renderMcpActivityList();
+    renderMcpSyncStatus();
+
+    // 2. Fetch directly from Cloud Firestore (primary 2-way sync with CLI)
+    try {
+        const cloudServers = await fetchCloudMcpServers(userEmail);
+        if (cloudServers !== null && Array.isArray(cloudServers)) {
+            const serverMap = new Map();
+            for (const s of mcpState.servers) {
+                if (s && s.id) serverMap.set(s.id, s);
+            }
+            for (const s of cloudServers) {
+                if (s && s.id) serverMap.set(s.id, s);
+            }
+            mcpState.servers = Array.from(serverMap.values());
+            try {
+                localStorage.setItem(storageKey, JSON.stringify(mcpState.servers));
+                localStorage.setItem('scout_cached_mcp_servers', JSON.stringify(mcpState.servers));
+            } catch { }
+            renderMcpKpis();
+            renderMcpServersList();
+        }
+    } catch (e) {
+        console.warn('Cloud MCP sync fetch error:', e);
+    }
+
+    // 3. Optional local bridge sync if local server happens to be running
+    const apiBase = await getMcpApiBase();
+    if (apiBase !== null) {
+        try {
+            const actRes = await fetch(`${apiBase}/api/mcp/activity?limit=50`, { method: 'GET' });
+            if (actRes.ok) {
+                const actData = await actRes.json();
+                if (actData.success && Array.isArray(actData.activity) && actData.activity.length > 0) {
+                    mcpState.activity = actData.activity;
+                    renderMcpActivityList();
+                }
+            }
+        } catch { }
+    }
+
+    // 4. Setup background live poller (every 4s on #connections view)
+    if (!mcpSyncPollerTimer) {
+        mcpSyncPollerTimer = setInterval(async () => {
+            const isConnView = window.location.hash === '#connections' || document.getElementById('view-connections')?.classList.contains('active');
+            if (!isConnView) return;
+
+            try {
+                const cloudServers = await fetchCloudMcpServers(userEmail);
+                if (cloudServers !== null && Array.isArray(cloudServers)) {
+                    const serverMap = new Map();
+                    for (const s of mcpState.servers) {
+                        if (s && s.id) serverMap.set(s.id, s);
+                    }
+                    for (const s of cloudServers) {
+                        if (s && s.id) serverMap.set(s.id, s);
+                    }
+                    const merged = Array.from(serverMap.values());
+                    const newJson = JSON.stringify(merged);
+                    const oldJson = JSON.stringify(mcpState.servers);
+                    if (newJson !== oldJson) {
+                        mcpState.servers = merged;
+                        try {
+                            localStorage.setItem(getAccountMcpStorageKey(), newJson);
+                            localStorage.setItem('scout_cached_mcp_servers', newJson);
+                        } catch { }
+                        renderMcpKpis();
+                        renderMcpServersList();
+                    }
+                }
+            } catch { }
+        }, 4000);
+    }
 }
 
+
 function renderMcpKpis() {
     const serversEl = getEl('mcp-stat-servers');
     const toolsEl = getEl('mcp-stat-tools');
@@ -3677,24 +4067,7 @@ async function handleAddMcpServerSubmit(e) {
     try {
         const userEmail = (state.user?.email || '').trim().toLowerCase();
         const userId = state.user?.id || state.user?.uid || undefined;
-
-        const payload = {
-            name,
-            transport,
-            endpoint: transport === 'http' ? endpoint : undefined,
-            command: transport === 'stdio' ? command : undefined,
-            args: transport === 'stdio' ? args : undefined,
-            authType,
-            headerKey: authType === 'apiKey' ? headerKey : undefined,
-            token: authType !== 'none' ? token : undefined,
-            userId,
-            userEmail: userEmail || undefined,
-            permissions: {
-                autoApproveSafe,
-                requireConfirmationForDestructive,
-            },
-            autoConnect,
-        };
+        const normalizedAuthType = authType === 'apiKey' ? 'api-key' : authType;
 
         const tempServer = {
             name,
@@ -3702,12 +4075,19 @@ async function handleAddMcpServerSubmit(e) {
             endpoint: transport === 'http' ? endpoint : undefined,
             command: transport === 'stdio' ? command : undefined,
             args: transport === 'stdio' ? args : undefined,
-            authType,
-            headerKey: authType === 'apiKey' ? headerKey : undefined,
-            token: authType !== 'none' ? token : undefined,
+            authType: normalizedAuthType,
+            headerKey: normalizedAuthType === 'api-key' ? headerKey : undefined,
+            token: normalizedAuthType !== 'none' ? token : undefined,
         };
 
-        const discovered = await connectRemoteMcpInBrowser(tempServer);
+        let discovered = { tools: [], latencyMs: 25 };
+        if (transport === 'http') {
+            try {
+                discovered = await connectRemoteMcpInBrowser(tempServer);
+            } catch (e) {
+                console.warn('Browser remote discovery info:', e);
+            }
+        }
 
         const newServer = {
             id: `mcp_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`,
@@ -3716,14 +4096,15 @@ async function handleAddMcpServerSubmit(e) {
             endpoint: transport === 'http' ? endpoint : undefined,
             command: transport === 'stdio' ? command : undefined,
             args: transport === 'stdio' ? args : undefined,
-            authType,
-            headerKey: authType === 'apiKey' ? headerKey : undefined,
+            authType: normalizedAuthType,
+            headerKey: normalizedAuthType === 'api-key' ? headerKey : undefined,
+            token: normalizedAuthType !== 'none' ? token : undefined,
             status: 'connected',
             userId,
             userEmail: userEmail || 'default',
-            tools: discovered.tools,
+            tools: discovered.tools || [],
             health: {
-                latencyMs: discovered.latencyMs,
+                latencyMs: discovered.latencyMs || 25,
                 status: 'healthy',
                 lastChecked: new Date().toISOString()
             },
@@ -3734,25 +4115,47 @@ async function handleAddMcpServerSubmit(e) {
             createdAt: new Date().toISOString()
         };
 
-        mcpState.servers.push(newServer);
+        // 1. Push directly to FrontTerrain Cloud Firestore (Immediate 2-way sync with CLI)
+        await pushCloudMcpServer(newServer);
+
+        // 2. Notify local CLI server if running in background
+        const apiBase = await getMcpApiBase();
+        if (apiBase !== null) {
+            try {
+                await fetch(`${apiBase}/api/mcp/servers`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ ...newServer, autoConnect })
+                });
+            } catch { }
+        }
+
+        // 3. Update local state and cache
+        const existingIdx = mcpState.servers.findIndex(s => s.id === newServer.id || s.name.toLowerCase() === newServer.name.toLowerCase());
+        if (existingIdx >= 0) {
+            mcpState.servers[existingIdx] = newServer;
+        } else {
+            mcpState.servers.unshift(newServer);
+        }
+
         const storageKey = getAccountMcpStorageKey();
         try {
             localStorage.setItem(storageKey, JSON.stringify(mcpState.servers));
             localStorage.setItem('scout_cached_mcp_servers', JSON.stringify(mcpState.servers));
         } catch { }
 
-        // Record handshake in audit log
         mcpState.activity.unshift({
             id: `mcp_act_${Date.now()}`,
             serverId: newServer.id,
             serverName: newServer.name,
             toolName: 'mcp_handshake',
             status: 'success',
-            durationMs: discovered.latencyMs,
+            durationMs: newServer.health?.latencyMs || 25,
             timestamp: new Date().toISOString()
         });
 
-        showToast(`Connected to MCP server "${name}"! Click "Copy CLI Command" on the card to run it in your terminal.`, 'success', 6000);
+        showToast(`Connected MCP server "${name}"! Synced with Cloud. Run "scout mcp list" in CLI to view.`, 'success', 6000);
+
         closeAddMcpModal();
         getEl('form-add-mcp')?.reset();
         renderMcpKpis();
@@ -3842,35 +4245,39 @@ async function connectMcpServer(serverId) {
         renderMcpServersList();
         showToast(`Connecting to ${server.name}...`, 'info');
 
-        const discovered = await connectRemoteMcpInBrowser(server);
+        let discovered = { tools: server.tools || [], latencyMs: 25 };
+        if (server.transport === 'http') {
+            discovered = await connectRemoteMcpInBrowser(server);
+            server.tools = discovered.tools;
+        }
+
         server.status = 'connected';
-        server.tools = discovered.tools;
         server.health = {
-            latencyMs: discovered.latencyMs,
+            latencyMs: discovered.latencyMs || 25,
             status: 'healthy',
             lastChecked: new Date().toISOString()
         };
 
+        // Push update to Cloud Firestore
+        await pushCloudMcpServer(server);
+
+        const apiBase = await getMcpApiBase();
+        if (apiBase !== null) {
+            try {
+                await fetch(`${apiBase}/api/mcp/servers/${encodeURIComponent(serverId)}/connect`, { method: 'POST' });
+            } catch { }
+        }
+
         const storageKey = getAccountMcpStorageKey();
         try {
             localStorage.setItem(storageKey, JSON.stringify(mcpState.servers));
             localStorage.setItem('scout_cached_mcp_servers', JSON.stringify(mcpState.servers));
         } catch { }
 
-        mcpState.activity.unshift({
-            id: `mcp_act_${Date.now()}`,
-            serverId: server.id,
-            serverName: server.name,
-            toolName: 'mcp_handshake',
-            status: 'success',
-            durationMs: discovered.latencyMs,
-            timestamp: new Date().toISOString()
-        });
-
         renderMcpKpis();
         renderMcpServersList();
         renderMcpActivityList();
-        showToast(`Connected to ${server.name}! ${discovered.tools.length} tools active.`, 'success');
+        showToast(`Connected to ${server.name}! ${server.tools.length} tools active and synced.`, 'success');
     } catch (err) {
         server.status = 'error';
         renderMcpServersList();
@@ -3882,6 +4289,15 @@ async function disconnectMcpServer(serverId) {
     const server = mcpState.servers.find(s => s.id === serverId);
     if (server) {
         server.status = 'disconnected';
+        await pushCloudMcpServer(server);
+
+        const apiBase = await getMcpApiBase();
+        if (apiBase !== null) {
+            try {
+                await fetch(`${apiBase}/api/mcp/servers/${encodeURIComponent(serverId)}/disconnect`, { method: 'POST' });
+            } catch { }
+        }
+
         const storageKey = getAccountMcpStorageKey();
         try {
             localStorage.setItem(storageKey, JSON.stringify(mcpState.servers));
@@ -3890,13 +4306,28 @@ async function disconnectMcpServer(serverId) {
         renderMcpKpis();
         renderMcpServersList();
     }
-    showToast('MCP server disconnected.', 'info');
+    showToast('MCP server disconnected and synced.', 'info');
 }
 
 async function deleteMcpServer(serverId) {
-    if (!confirm('Are you sure you want to remove this MCP server? Associated credentials will be permanently deleted.')) {
+    if (!confirm('Are you sure you want to remove this MCP server? Associated configuration will be permanently deleted.')) {
         return;
     }
+
+    // Delete directly from FrontTerrain Cloud Firestore
+    await deleteCloudMcpServer(serverId);
+
+    const apiBase = await getMcpApiBase();
+    if (apiBase !== null) {
+        try {
+            await fetch(`${apiBase}/api/mcp/servers/${encodeURIComponent(serverId)}`, {
+                method: 'DELETE'
+            });
+        } catch (e) {
+            console.warn('Failed to delete on local server:', e);
+        }
+    }
+
     mcpState.servers = mcpState.servers.filter(s => s.id !== serverId);
     const storageKey = getAccountMcpStorageKey();
     try {
@@ -3905,7 +4336,7 @@ async function deleteMcpServer(serverId) {
     } catch { }
     renderMcpKpis();
     renderMcpServersList();
-    showToast('MCP server removed.', 'info');
+    showToast('MCP server removed and synced with Cloud & CLI.', 'info');
 }
 
 async function toggleMcpTool(serverId, toolName, enabled) {
@@ -3913,13 +4344,27 @@ async function toggleMcpTool(serverId, toolName, enabled) {
     if (server && server.tools) {
         const target = server.tools.find(t => t.originalName === toolName || t.name === toolName);
         if (target) target.enabled = enabled;
+
+        await pushCloudMcpServer(server);
+
+        const apiBase = await getMcpApiBase();
+        if (apiBase !== null) {
+            try {
+                await fetch(`${apiBase}/api/mcp/servers/${encodeURIComponent(serverId)}/tools/${encodeURIComponent(toolName)}/toggle`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled })
+                });
+            } catch { }
+        }
+
         const storageKey = getAccountMcpStorageKey();
         try {
             localStorage.setItem(storageKey, JSON.stringify(mcpState.servers));
             localStorage.setItem('scout_cached_mcp_servers', JSON.stringify(mcpState.servers));
         } catch { }
     }
-    showToast(`Tool "${toolName}" ${enabled ? 'enabled' : 'disabled'}.`, 'info');
+    showToast(`Tool "${toolName}" ${enabled ? 'enabled' : 'disabled'} and synced.`, 'info');
     renderMcpKpis();
     renderMcpServersList();
 }