feat(code): add MCP servers entry to main sidebar under Skills (#2010)

Author: jonathanlab

apps/code/src/renderer/components/MainLayout.tsx

@@ -10,6 +10,7 @@ import { CommandMenu } from "@features/command/components/CommandMenu";
 import { CommandCenterView } from "@features/command-center/components/CommandCenterView";
 import { InboxView } from "@features/inbox/components/InboxView";
 import { useInboxDeepLink } from "@features/inbox/hooks/useInboxDeepLink";
+import { McpServersView } from "@features/mcp-servers/components/McpServersView";
 import { FolderSettingsView } from "@features/settings/components/FolderSettingsView";
 import { SettingsDialog } from "@features/settings/components/SettingsDialog";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
@@ -129,6 +130,8 @@ export function MainLayout() {
           {view.type === "command-center" && <CommandCenterView />}
 
           {view.type === "skills" && <SkillsView />}
+
+          {view.type === "mcp-servers" && <McpServersView />}
         </Box>
       </Flex>
 

…mponents/sections/McpServersSettings.tsx …cp-servers/components/McpServersView.tsxapps/code/src/renderer/features/settings/components/sections/McpServersSettings.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/McpServersView.tsx apps/code/src/renderer/features/settings/components/sections/McpServersSettings.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/McpServersView.tsx

@@ -1,4 +1,6 @@
-import { useMcpServers } from "@features/settings/hooks/useMcpServers";
+import { useMcpServers } from "@features/mcp-servers/hooks/useMcpServers";
+import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
+import { Plugs } from "@phosphor-icons/react";
 import {
   AlertDialog,
   Box,
@@ -14,18 +16,18 @@ import type {
 } from "@renderer/api/posthogClient";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { AddCustomServerForm } from "./mcp/AddCustomServerForm";
-import { MarketplaceView } from "./mcp/MarketplaceView";
-import { McpInstalledRail } from "./mcp/McpInstalledRail";
-import { ServerDetailView } from "./mcp/ServerDetailView";
+import { AddCustomServerForm } from "./parts/AddCustomServerForm";
+import { MarketplaceView } from "./parts/MarketplaceView";
+import { McpInstalledRail } from "./parts/McpInstalledRail";
+import { ServerDetailView } from "./parts/ServerDetailView";
 
 type SceneView =
   | { kind: "marketplace" }
   | { kind: "detail-installation"; installationId: string }
   | { kind: "detail-template"; templateId: string }
   | { kind: "add-custom" };
 
-export function McpServersSettings() {
+export function McpServersView() {
   const queryClient = useQueryClient();
   const [view, setView] = useState<SceneView>({ kind: "marketplace" });
   const [query, setQuery] = useState("");
@@ -43,6 +45,22 @@ export function McpServersSettings() {
     null,
   );
 
+  const headerContent = useMemo(
+    () => (
+      <Flex align="center" gap="2" className="w-full min-w-0">
+        <Plugs size={12} className="shrink-0 text-gray-10" />
+        <Text
+          className="truncate whitespace-nowrap font-medium text-[13px]"
+          title="MCP servers"
+        >
+          MCP servers
+        </Text>
+      </Flex>
+    ),
+    [],
+  );
+  useSetHeaderContent(headerContent);
+
   const {
     installations,
     installationsLoading,
@@ -254,7 +272,7 @@ export function McpServersSettings() {
   })();
 
   return (
-    <Flex className="min-h-0 w-full flex-1 overflow-hidden">
+    <Flex height="100%" className="min-h-0 overflow-hidden">
       <McpInstalledRail
         installations={installationList}
         templates={serverList}
@@ -266,12 +284,7 @@ export function McpServersSettings() {
       />
       <Box className="min-h-0 min-w-0 flex-1">
         <ScrollArea className="h-full w-full">
-          <Box
-            p="6"
-            mx="auto"
-            style={{ zIndex: 1 }}
-            className="relative max-w-[960px]"
-          >
+          <Box p="6" mx="auto" className="relative z-[1] max-w-[960px]">
             {mainContent}
           </Box>
         </ScrollArea>

…nts/sections/mcp/AddCustomServerForm.tsx …components/parts/AddCustomServerForm.tsxapps/code/src/renderer/features/settings/components/sections/mcp/AddCustomServerForm.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/parts/AddCustomServerForm.tsx apps/code/src/renderer/features/settings/components/sections/mcp/AddCustomServerForm.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/parts/AddCustomServerForm.tsx

@@ -1,7 +1,7 @@
 import {
   filterServersByCategory,
   filterServersByQuery,
-} from "@features/settings/hooks/mcpFilters";
+} from "@features/mcp-servers/hooks/mcpFilters";
 import { MagnifyingGlass, Plus, X } from "@phosphor-icons/react";
 import {
   Button,

…ponents/sections/mcp/MarketplaceView.tsx …ers/components/parts/MarketplaceView.tsxapps/code/src/renderer/features/settings/components/sections/mcp/MarketplaceView.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/parts/MarketplaceView.tsx apps/code/src/renderer/features/settings/components/sections/mcp/MarketplaceView.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/parts/MarketplaceView.tsx

@@ -1,4 +1,4 @@
-import { filterInstallationsByQuery } from "@features/settings/hooks/mcpFilters";
+import { filterInstallationsByQuery } from "@features/mcp-servers/hooks/mcpFilters";
 import { MagnifyingGlass, Plus, X } from "@phosphor-icons/react";
 import {
   Flex,

…onents/sections/mcp/McpInstalledRail.tsx …rs/components/parts/McpInstalledRail.tsxapps/code/src/renderer/features/settings/components/sections/mcp/McpInstalledRail.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/parts/McpInstalledRail.tsx apps/code/src/renderer/features/settings/components/sections/mcp/McpInstalledRail.tsx renamed to apps/code/src/renderer/features/mcp-servers/components/parts/McpInstalledRail.tsx

@@ -1,4 +1,4 @@
-import { useMcpInstallationTools } from "@features/settings/hooks/useMcpInstallationTools";
+import { useMcpInstallationTools } from "@features/mcp-servers/hooks/useMcpInstallationTools";
 import {
   ArrowClockwise,
   ArrowLeft,