Display VS Code tab first in MCP dialog (#12467)

Author: JamesNK

src/Aspire.Dashboard/Components/Dialogs/McpServerDialog.razor

@@ -18,33 +18,6 @@
             For more information, see <a href="https://aka.ms/aspire/mcp-getting-started" target="_blank">@Loc[nameof(Resources.Dialogs.McpServerDialogLearnMoreLink)]</a>.
         </p>
         <FluentTabs ActiveTabId="@($"tab-{_activeView}")" OnTabChange="@OnTabChangeAsync" Size="null">
-            <FluentTab LabelClass="tab-label"
-                       Id="@($"tab-{McpToolView.VisualStudio}")"
-                       Label="@Loc[nameof(Resources.Dialogs.McpServerDialogVisualStudioTab)]">
-                <div class="mcp-tool-tab">
-                    <p>
-                        @Loc[nameof(Resources.Dialogs.McpServerDialogQuicklyAddVisualStudio)]
-                    </p>
-                    <p>
-                        <a href="@($"vsweb+mcp:/install?{Uri.EscapeDataString(_mcpServerInstallButtonJson)}")">
-
-                            <svg xmlns="http://www.w3.org/2000/svg" width="251" height="20" role="img" aria-label="@Loc[nameof(Resources.Dialogs.McpServerDialogInstallButtonAriaLabelVisualStudio)]">
-                                <title>@Loc[nameof(Resources.Dialogs.McpServerDialogInstallButtonAriaLabelVisualStudio)]</title>
-                                <g shape-rendering="crispEdges"><rect width="100" height="20" fill="#555" /><rect x="100" width="151" height="20" fill="#8863c5" /></g>
-                                <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1vZGVsIENvbnRleHQgUHJvdG9jb2w8L3RpdGxlPjxwYXRoIGQ9Ik0xMy44NSAwYTQuMTYgNC4xNiAwIDAgMC0yLjk1IDEuMjE3TDEuNDU2IDEwLjY2YS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGw5LjQ0Mi05LjQ0MmEyLjQ5IDIuNDkgMCAwIDEgMy41NDEgMCAyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0MUw4LjU5IDEyLjk3bC0uMS4xYS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGwuMS0uMDk4IDcuMDMtNy4wMzRhMi40OSAyLjQ5IDAgMCAxIDMuNTQyIDBsLjA0OS4wNWEyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0bC04LjU0IDguNTRhMS45NiAxLjk2IDAgMCAwIDAgMi43NTVsMS43NTMgMS43NTNhLjgzNS44MzUgMCAwIDAgMS4xOCAwIC44MzUuODM1IDAgMCAwIDAtMS4xOGwtMS43NTMtMS43NTNhLjI2Ni4yNjYgMCAwIDEgMC0uMzk0bDguNTQtOC41NGE0LjE4NSA0LjE4NSAwIDAgMCAwLTUuOWwtLjA1LS4wNWE0LjE2IDQuMTYgMCAwIDAtMi45NS0xLjIxOGMtLjIgMC0uNDAxLjAyLS42LjA0OGE0LjE3IDQuMTcgMCAwIDAtMS4xNy0zLjU1MkE0LjE2IDQuMTYgMCAwIDAgMTMuODUgMG0wIDMuMzMzYS44NC44NCAwIDAgMC0uNTkuMjQ1TDYuMjc1IDEwLjU2YTQuMTg2IDQuMTg2IDAgMCAwIDAgNS45MDIgNC4xODYgNC4xODYgMCAwIDAgNS45MDIgMEwxOS4xNiA5LjQ4YS44MzUuODM1IDAgMCAwIDAtMS4xOC44MzUuODM1IDAgMCAwLTEuMTggMGwtNi45ODUgNi45ODRhMi40OSAyLjQ5IDAgMCAxLTMuNTQgMCAyLjQ5IDIuNDkgMCAwIDEgMC0zLjU0bDYuOTgzLTYuOTg1YS44MzUuODM1IDAgMCAwIDAtMS4xOC44NC44NCAwIDAgMC0uNTktLjI0NSIvPjwvc3ZnPg==" /><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="730">Visual Studio</text><text x="1745" y="140" transform="scale(.1)" fill="#fff" textLength="1410">Install Aspire MCP Server</text></g>
-                            </svg>
-                            @*
-                                Generated from:
-                                https://img.shields.io/badge/Visual_Studio-Install_Aspire_MCP_Server-8863C5?style=flat-square&logo=modelcontextprotocol&logoColor=white
-                            *@
-                        </a>
-                    </p>
-                    <p>
-                        @((MarkupString)string.Format(CultureInfo.CurrentCulture, Loc[nameof(Resources.Dialogs.McpServerDialogOtherOptionsVisualStudio)], "https://aka.ms/aspire/mcp-add-client-vs"))
-                    </p>
-                    <MarkdownRenderer Markdown="@GetJsonConfigurationMarkdown()" MarkdownProcessor="@_markdownProcessor" />
-                </div>
-            </FluentTab>
             <FluentTab LabelClass="tab-label"
                        Id="@($"tab-{McpToolView.VSCode}")"
                        Label="@Loc[nameof(Resources.Dialogs.McpServerDialogVSCodeTab)]">
@@ -100,6 +73,32 @@
                     }
                 </div>
             </FluentTab>
+            <FluentTab LabelClass="tab-label"
+                       Id="@($"tab-{McpToolView.VisualStudio}")"
+                       Label="@Loc[nameof(Resources.Dialogs.McpServerDialogVisualStudioTab)]">
+                <div class="mcp-tool-tab">
+                    <p>
+                        @Loc[nameof(Resources.Dialogs.McpServerDialogQuicklyAddVisualStudio)]
+                    </p>
+                    <p>
+                        <a href="@($"vsweb+mcp:/install?{Uri.EscapeDataString(_mcpServerInstallButtonJson)}")">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="251" height="20" role="img" aria-label="@Loc[nameof(Resources.Dialogs.McpServerDialogInstallButtonAriaLabelVisualStudio)]">
+                                <title>@Loc[nameof(Resources.Dialogs.McpServerDialogInstallButtonAriaLabelVisualStudio)]</title>
+                                <g shape-rendering="crispEdges"><rect width="100" height="20" fill="#555" /><rect x="100" width="151" height="20" fill="#8863c5" /></g>
+                                <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPk1vZGVsIENvbnRleHQgUHJvdG9jb2w8L3RpdGxlPjxwYXRoIGQ9Ik0xMy44NSAwYTQuMTYgNC4xNiAwIDAgMC0yLjk1IDEuMjE3TDEuNDU2IDEwLjY2YS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGw5LjQ0Mi05LjQ0MmEyLjQ5IDIuNDkgMCAwIDEgMy41NDEgMCAyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0MUw4LjU5IDEyLjk3bC0uMS4xYS44MzUuODM1IDAgMCAwIDAgMS4xOC44MzUuODM1IDAgMCAwIDEuMTggMGwuMS0uMDk4IDcuMDMtNy4wMzRhMi40OSAyLjQ5IDAgMCAxIDMuNTQyIDBsLjA0OS4wNWEyLjQ5IDIuNDkgMCAwIDEgMCAzLjU0bC04LjU0IDguNTRhMS45NiAxLjk2IDAgMCAwIDAgMi43NTVsMS43NTMgMS43NTNhLjgzNS44MzUgMCAwIDAgMS4xOCAwIC44MzUuODM1IDAgMCAwIDAtMS4xOGwtMS43NTMtMS43NTNhLjI2Ni4yNjYgMCAwIDEgMC0uMzk0bDguNTQtOC41NGE0LjE4NSA0LjE4NSAwIDAgMCAwLTUuOWwtLjA1LS4wNWE0LjE2IDQuMTYgMCAwIDAtMi45NS0xLjIxOGMtLjIgMC0uNDAxLjAyLS42LjA0OGE0LjE3IDQuMTcgMCAwIDAtMS4xNy0zLjU1MkE0LjE2IDQuMTYgMCAwIDAgMTMuODUgMG0wIDMuMzMzYS44NC44NCAwIDAgMC0uNTkuMjQ1TDYuMjc1IDEwLjU2YTQuMTg2IDQuMTg2IDAgMCAwIDAgNS45MDIgNC4xODYgNC4xODYgMCAwIDAgNS45MDIgMEwxOS4xNiA5LjQ4YS44MzUuODM1IDAgMCAwIDAtMS4xOC44MzUuODM1IDAgMCAwLTEuMTggMGwtNi45ODUgNi45ODRhMi40OSAyLjQ5IDAgMCAxLTMuNTQgMCAyLjQ5IDIuNDkgMCAwIDEgMC0zLjU0bDYuOTgzLTYuOTg1YS44MzUuODM1IDAgMCAwIDAtMS4xOC44NC44NCAwIDAgMC0uNTktLjI0NSIvPjwvc3ZnPg==" /><text x="595" y="140" transform="scale(.1)" fill="#fff" textLength="730">Visual Studio</text><text x="1745" y="140" transform="scale(.1)" fill="#fff" textLength="1410">Install Aspire MCP Server</text></g>
+                            </svg>
+                            @*
+                                Generated from:
+                                https://img.shields.io/badge/Visual_Studio-Install_Aspire_MCP_Server-8863C5?style=flat-square&logo=modelcontextprotocol&logoColor=white
+                            *@
+                        </a>
+                    </p>
+                    <p>
+                        @((MarkupString)string.Format(CultureInfo.CurrentCulture, Loc[nameof(Resources.Dialogs.McpServerDialogOtherOptionsVisualStudio)], "https://aka.ms/aspire/mcp-add-client-vs"))
+                    </p>
+                    <MarkdownRenderer Markdown="@GetJsonConfigurationMarkdown()" MarkdownProcessor="@_markdownProcessor" />
+                </div>
+            </FluentTab>
             <FluentTab LabelClass="tab-label"
                        Id="@($"tab-{McpToolView.Other}")"
                        Label="@Loc[nameof(Resources.Dialogs.McpServerDialogOtherTab)]">

src/Aspire.Dashboard/Components/Dialogs/McpServerDialog.razor.cs

@@ -144,8 +144,8 @@ private string GetJsonConfigurationMarkdown() =>
 
     public enum McpToolView
     {
-        VisualStudio,
         VSCode,
+        VisualStudio,
         Other
     }
 }