[Feature] Add preview feature flagging, gate MCP Server behind it, move MCP icon to activity bar footer (#589)

Copilot · Power-Maverick · commit 41bdcab9fdf2 · 2026-06-27T20:26:25.000-04:00
* Add preview feature flagging and move MCP button to activity bar footer

* Rename mcpBtn to mcpButton for consistency

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
diff --git a/src/common/types/settings.ts b/src/common/types/settings.ts
@@ -96,4 +96,5 @@ export interface UserSettings {
     environmentColorThickness?: number; // Thickness in pixels of the environment color border around the tool panel
     mcpAccessToken?: string; // Access token for local MCP server authentication
     splitDividerRatio?: number; // Persisted position of the split-pane divider (0.15–0.85)
+    enablePreviewFeatures?: boolean; // Show preview/experimental features in the UI
 }
diff --git a/src/main/managers/settingsManager.ts b/src/main/managers/settingsManager.ts
@@ -38,6 +38,7 @@ export class SettingsManager {
                 toolSecondaryConnections: {}, // Map of toolId to secondary connectionId
                 connectionsSort: "last-used",
                 restoreSessionOnStartup: true, // Reopen previously open tools on app start
+                enablePreviewFeatures: false, // Show preview/experimental features in the UI
             },
         });
 
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -32,9 +32,6 @@
                     <button class="activity-item" id="global-search-btn" title="Global Search (Ctrl+Shift+P)">
                         <img id="search-icon" src="icons/dark/search.svg" alt="Search Icon" class="activity-icon" />
                     </button>
-                    <button class="activity-item" id="agent-invocation-logs-btn" title="MCP Server">
-                        <img id="logs-icon" src="icons/dark/mcp.svg" alt="MCP Icon" class="activity-icon" />
-                    </button>
                     <button class="activity-item" data-sidebar="links" title="Community Resources">
                         <img id="links-icon" src="icons/dark/bookmark.svg" alt="Links Icon" class="activity-icon" />
                     </button>
@@ -43,6 +40,9 @@
                     </button>
                 </nav>
                 <nav class="activity-bar-footer">
+                    <button class="activity-item" id="agent-invocation-logs-btn" title="MCP Server (Preview)">
+                        <img id="logs-icon" src="icons/dark/mcp.svg" alt="MCP Icon" class="activity-icon" />
+                    </button>
                     <button class="activity-item" id="settings-activity-btn" title="Settings">
                         <img id="settings-icon" src="icons/dark/settings.svg" alt="Settings Icon" class="activity-icon" />
                     </button>
diff --git a/src/renderer/modules/initialization.ts b/src/renderer/modules/initialization.ts
@@ -34,7 +34,7 @@ import { initNotificationHistoryPanel, setDefaultNotificationDuration, showPPTBN
 import { openSettingsTab } from "./settingsManagement";
 import { switchSidebar } from "./sidebarManagement";
 import { handleTerminalClosed, handleTerminalCommandCompleted, handleTerminalCreated, handleTerminalError, handleTerminalOutput, setupTerminalPanel } from "./terminalManagement";
-import { applyDebugMenuVisibility, applyTerminalFont, applyTheme } from "./themeManagement";
+import { applyDebugMenuVisibility, applyPreviewFeaturesVisibility, applyTerminalFont, applyTheme } from "./themeManagement";
 import {
     applyAppearanceSettings,
     closeAllTools,
@@ -646,6 +646,7 @@ async function loadInitialSettings(): Promise<void> {
     applyTheme(settings.theme);
     applyTerminalFont(settings.terminalFont || DEFAULT_TERMINAL_FONT);
     applyDebugMenuVisibility(settings.showDebugMenu ?? false);
+    applyPreviewFeaturesVisibility(settings.enablePreviewFeatures ?? false);
     setDefaultNotificationDuration(settings.notificationDuration ?? DEFAULT_NOTIFICATION_DURATION);
     applyAppearanceSettings(
         settings.showCategoryColor ?? DEFAULT_SHOW_CATEGORY_COLOR,
diff --git a/src/renderer/modules/settingsManagement.ts b/src/renderer/modules/settingsManagement.ts
@@ -17,7 +17,7 @@ import {
 import type { SettingsState } from "../types/index";
 import { loadMarketplace } from "./marketplaceManagement";
 import { setDefaultNotificationDuration } from "./notifications";
-import { applyDebugMenuVisibility, applyTerminalFont, applyTheme } from "./themeManagement";
+import { applyDebugMenuVisibility, applyPreviewFeaturesVisibility, applyTerminalFont, applyTheme } from "./themeManagement";
 import { applyAppearanceSettings, openLocalPageAsTab, registerCloseGuard } from "./toolManagement";
 import { loadSidebarTools } from "./toolsSidebarManagement";
 
@@ -42,6 +42,7 @@ export async function loadSettings(): Promise<void> {
     const showEnvironmentColorCheck = document.getElementById("sidebar-show-environment-color-check") as HTMLInputElement | null;
     const categoryColorThicknessInput = document.getElementById("sidebar-category-color-thickness") as HTMLInputElement | null;
     const environmentColorThicknessInput = document.getElementById("sidebar-environment-color-thickness") as HTMLInputElement | null;
+    const enablePreviewFeaturesCheck = document.getElementById("sidebar-enable-preview-features-check") as HTMLInputElement | null;
 
     if (themeSelect && autoUpdateCheck && showDebugMenuCheck && deprecatedToolsSelect && toolDisplayModeSelect && terminalFontSelect) {
         const settings = await window.toolboxAPI.getUserSettings();
@@ -60,6 +61,7 @@ export async function loadSettings(): Promise<void> {
             showEnvironmentColor: settings.showEnvironmentColor ?? DEFAULT_SHOW_ENVIRONMENT_COLOR,
             categoryColorThickness: settings.categoryColorThickness ?? DEFAULT_CATEGORY_COLOR_THICKNESS,
             environmentColorThickness: settings.environmentColorThickness ?? DEFAULT_ENVIRONMENT_COLOR_THICKNESS,
+            enablePreviewFeatures: settings.enablePreviewFeatures ?? false,
         };
 
         themeSelect.value = settings.theme;
@@ -87,6 +89,9 @@ export async function loadSettings(): Promise<void> {
         if (environmentColorThicknessInput) {
             environmentColorThicknessInput.value = String(settings.environmentColorThickness ?? DEFAULT_ENVIRONMENT_COLOR_THICKNESS);
         }
+        if (enablePreviewFeaturesCheck) {
+            enablePreviewFeaturesCheck.checked = settings.enablePreviewFeatures ?? false;
+        }
 
         const terminalFont = settings.terminalFont || DEFAULT_TERMINAL_FONT;
 
@@ -132,6 +137,7 @@ export async function saveSettings(): Promise<void> {
     const showEnvironmentColorCheck = document.getElementById("sidebar-show-environment-color-check") as HTMLInputElement | null;
     const categoryColorThicknessInput = document.getElementById("sidebar-category-color-thickness") as HTMLInputElement | null;
     const environmentColorThicknessInput = document.getElementById("sidebar-environment-color-thickness") as HTMLInputElement | null;
+    const enablePreviewFeaturesCheck = document.getElementById("sidebar-enable-preview-features-check") as HTMLInputElement | null;
 
     if (!themeSelect || !autoUpdateCheck || !showDebugMenuCheck || !deprecatedToolsSelect || !toolDisplayModeSelect || !terminalFontSelect) return;
 
@@ -151,6 +157,7 @@ export async function saveSettings(): Promise<void> {
     const environmentColorThickness = environmentColorThicknessInput
         ? Math.min(MAX_COLOR_BORDER_THICKNESS, Math.max(MIN_COLOR_BORDER_THICKNESS, Number(environmentColorThicknessInput.value) || DEFAULT_ENVIRONMENT_COLOR_THICKNESS))
         : DEFAULT_ENVIRONMENT_COLOR_THICKNESS;
+    const enablePreviewFeatures = enablePreviewFeaturesCheck ? enablePreviewFeaturesCheck.checked : false;
 
     const currentSettings = {
         theme: themeSelect.value,
@@ -165,6 +172,7 @@ export async function saveSettings(): Promise<void> {
         showEnvironmentColor,
         categoryColorThickness,
         environmentColorThickness,
+        enablePreviewFeatures,
     };
 
     // Only include changed settings in the update
@@ -206,6 +214,9 @@ export async function saveSettings(): Promise<void> {
     if (currentSettings.environmentColorThickness !== originalSettings.environmentColorThickness) {
         changedSettings.environmentColorThickness = currentSettings.environmentColorThickness;
     }
+    if (currentSettings.enablePreviewFeatures !== (originalSettings.enablePreviewFeatures ?? false)) {
+        changedSettings.enablePreviewFeatures = currentSettings.enablePreviewFeatures;
+    }
 
     // Only save and emit event if something changed
     if (Object.keys(changedSettings).length > 0) {
@@ -215,6 +226,7 @@ export async function saveSettings(): Promise<void> {
         applyTheme(currentSettings.theme);
         applyTerminalFont(currentSettings.terminalFont);
         applyDebugMenuVisibility(currentSettings.showDebugMenu);
+        applyPreviewFeaturesVisibility(currentSettings.enablePreviewFeatures);
         setDefaultNotificationDuration(currentSettings.notificationDuration);
         applyAppearanceSettings(currentSettings.showCategoryColor, currentSettings.showEnvironmentColor, currentSettings.categoryColorThickness, currentSettings.environmentColorThickness);
 
@@ -267,6 +279,7 @@ function hasUnsavedChanges(): boolean {
     const showEnvironmentColorCheck = document.getElementById("sidebar-show-environment-color-check") as HTMLInputElement | null;
     const categoryColorThicknessInput = document.getElementById("sidebar-category-color-thickness") as HTMLInputElement | null;
     const environmentColorThicknessInput = document.getElementById("sidebar-environment-color-thickness") as HTMLInputElement | null;
+    const enablePreviewFeaturesCheck = document.getElementById("sidebar-enable-preview-features-check") as HTMLInputElement | null;
 
     // If the DOM elements aren't present the settings panel isn't rendered — no unsaved changes
     if (!themeSelect || !autoUpdateCheck || !showDebugMenuCheck || !deprecatedToolsSelect || !toolDisplayModeSelect || !terminalFontSelect) {
@@ -296,6 +309,7 @@ function hasUnsavedChanges(): boolean {
         const val = Math.min(MAX_COLOR_BORDER_THICKNESS, Math.max(MIN_COLOR_BORDER_THICKNESS, Number(environmentColorThicknessInput.value) || DEFAULT_ENVIRONMENT_COLOR_THICKNESS));
         if (val !== (originalSettings.environmentColorThickness ?? DEFAULT_ENVIRONMENT_COLOR_THICKNESS)) return true;
     }
+    if (enablePreviewFeaturesCheck && enablePreviewFeaturesCheck.checked !== (originalSettings.enablePreviewFeatures ?? false)) return true;
 
     return false;
 }
@@ -513,6 +527,23 @@ export function renderSettingsContent(panel: HTMLElement): void {
                 </div>
             </section>
 
+            <section id="settings-section-preview" class="settings-vscode-section">
+                <h2 class="settings-vscode-section-title">Preview Features</h2>
+
+                <div class="settings-vscode-item">
+                    <div class="settings-vscode-item-info">
+                        <label class="settings-vscode-item-label" for="sidebar-enable-preview-features-check">Enable Preview Features</label>
+                        <p class="settings-vscode-item-description">Show experimental and preview features in the UI. These features are still in development and may change or be removed. Currently includes: MCP Server.</p>
+                    </div>
+                    <div class="settings-vscode-item-control">
+                        <label class="settings-vscode-checkbox-label">
+                            <input type="checkbox" id="sidebar-enable-preview-features-check" class="settings-vscode-checkbox" />
+                            <span>Enable</span>
+                        </label>
+                    </div>
+                </div>
+            </section>
+
             <div class="settings-vscode-actions">
                 <button id="sidebar-save-settings-btn" class="fluent-button fluent-button-primary">Save Settings</button>
                 <span class="settings-vscode-item-description">Changes apply instantly after saving.</span>
diff --git a/src/renderer/modules/themeManagement.ts b/src/renderer/modules/themeManagement.ts
@@ -317,3 +317,14 @@ export function applyDebugMenuVisibility(showDebugMenu: boolean): void {
         debugActivityItem.style.display = showDebugMenu ? "" : "none";
     }
 }
+
+/**
+ * Apply preview features visibility setting
+ * Controls visibility of preview-gated items (e.g. the MCP Server button)
+ */
+export function applyPreviewFeaturesVisibility(enablePreviewFeatures: boolean): void {
+    const mcpButton = document.getElementById("agent-invocation-logs-btn") as HTMLElement | null;
+    if (mcpButton) {
+        mcpButton.style.display = enablePreviewFeatures ? "" : "none";
+    }
+}
diff --git a/src/renderer/types/index.ts b/src/renderer/types/index.ts
@@ -62,6 +62,7 @@ export interface SettingsState {
     showEnvironmentColor?: boolean;
     categoryColorThickness?: number;
     environmentColorThickness?: number;
+    enablePreviewFeatures?: boolean;
 }
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -96,4 +96,5 @@ export interface UserSettings {`
`96`	`96`	`environmentColorThickness?: number; // Thickness in pixels of the environment color border around the tool panel`
`97`	`97`	`mcpAccessToken?: string; // Access token for local MCP server authentication`
`98`	`98`	`splitDividerRatio?: number; // Persisted position of the split-pane divider (0.15–0.85)`
	`99`	`+ enablePreviewFeatures?: boolean; // Show preview/experimental features in the UI`
`99`	`100`	`}`
Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@ export interface SettingsState {`
`62`	`62`	`showEnvironmentColor?: boolean;`
`63`	`63`	`categoryColorThickness?: number;`
`64`	`64`	`environmentColorThickness?: number;`
	`65`	`+ enablePreviewFeatures?: boolean;`
`65`	`66`	`}`
`66`	`67`
`67`	`68`	`/**`