fix(web): improve MCP resource navigation and dialog

- move MCP below Skills in the resources list
- keep empty MCP resources selected without showing stale details
- simplify and align the Add MCP Server dialog

Author: RussellLuo

web/app/src/hooks/workspace/useWorkspaceController.ts

@@ -630,6 +630,8 @@ export function useWorkspaceController() {
   const selectMCPServer = useCallback(
     (item: MCPServer | null | undefined) => {
       if (!item?.name) {
+        setSelectedHubResourceType("mcp");
+        setSelectedMCPServerName("");
         selectHub();
         return;
       }

web/app/src/hooks/workspace/useWorkspaceMCPSelection.ts

@@ -52,10 +52,6 @@ export function useWorkspaceMCPSelection({
   }, [mcpServers, setSelectedMCPServerName]);
 
   useEffect(() => {
-    if (selectedHubResourceType === "mcp" && !mcpServers.length) {
-      setSelectedHubResourceType(skillCount ? "skill" : "template");
-      return;
-    }
     if (selectedHubResourceType === "skill" && !skillCount) {
       setSelectedHubResourceType(mcpServers.length ? "mcp" : "template");
       return;

web/app/src/pages/HubPage/components/HubDetailPane/HubDetailPane.tsx

@@ -18,6 +18,7 @@ import { localizeTemplateSourceTag } from "@/shared/i18n";
 import { ModelsIcon } from "@/components/ui/Icons";
 import {
   Button,
+  DialogBody,
   DialogCloseButton,
   DialogContent,
   DialogDescription,
@@ -268,12 +269,14 @@ function parseMCPServerDocument(value: string, t: TranslateFn): MCPServerDocumen
 }
 
 function JSONConfigEditor({
+  hideLabel = false,
   invalid = false,
   label,
   minRows = 12,
   onChange,
   value,
 }: {
+  hideLabel?: boolean;
   invalid?: boolean;
   label: string;
   minRows?: number;
@@ -343,7 +346,7 @@ function JSONConfigEditor({
       className={`hub-json-editor${invalid ? " is-invalid" : ""}`}
       style={{ "--hub-json-editor-min-height": minHeight } as CSSProperties}
     >
-      <label className="hub-json-editor-label" htmlFor={editorId}>
+      <label className={`hub-json-editor-label${hideLabel ? " sr-only" : ""}`} htmlFor={editorId}>
         {label}
       </label>
       <div className="hub-json-editor-shell" ref={editorParentRef} aria-invalid={invalid || undefined} />
@@ -437,10 +440,10 @@ export function HubDetailPane({
   const canDeleteSkill = Boolean(selectedSkill && !isReadonlySkill(selectedSkill));
   const skillEntries = skillTree?.entries ?? EMPTY_WORKSPACE_ENTRIES;
   const activeResourceType = useMemo(() => {
-    if (selectedResourceType === "mcp" && mcpServers.length) {
+    if (selectedResourceType === "mcp") {
       return "mcp";
     }
-    if (selectedResourceType === "skill" && skills.length) {
+    if (selectedResourceType === "skill") {
       return "skill";
     }
     if (templates.length) {
@@ -796,7 +799,13 @@ export function HubDetailPane({
                 *
               </span>
               <strong>
-                {templates.length || skills.length || mcpServers.length ? t("resourcesLoading") : t("resourcesEmpty")}
+                {activeResourceType === "mcp"
+                  ? t("resourcesMCPEmpty")
+                  : activeResourceType === "skill"
+                    ? t("resourcesSkillsEmpty")
+                    : templates.length || skills.length || mcpServers.length
+                      ? t("resourcesLoading")
+                      : t("resourcesEmpty")}
               </strong>
             </div>
           )}
@@ -848,8 +857,9 @@ export function HubDetailPane({
             </div>
             <DialogCloseButton label={t("close")} size="sm" variant="tertiaryGray" />
           </DialogHeader>
-          <div className="mcp-form">
+          <DialogBody className="mcp-form">
             <JSONConfigEditor
+              hideLabel
               label={t("resourcesMCPServerDocumentJSONLabel")}
               value={mcpDraftDocument}
               onChange={handleMCPDraftDocumentChange}
@@ -859,7 +869,7 @@ export function HubDetailPane({
             {mcpFormError || mcpMutationError ? (
               <div className="form-error hub-json-editor-error">{mcpFormError || mcpMutationError}</div>
             ) : null}
-          </div>
+          </DialogBody>
           <DialogFooter className="hub-skill-delete-dialog-actions">
             <Button variant="secondaryGray" size="sm" disabled={mcpMutationBusy} onClick={closeMCPFormDialog}>
               {t("cancel")}

web/app/src/pages/WorkspacePage/components/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -285,21 +285,6 @@ export function WorkspaceSidebar({
               onSelectHub();
             },
           },
-          {
-            active: activeContextSectionId === WorkspaceContextSectionIds.mcpServers,
-            badge: badgeCount(hub?.mcpServers?.length),
-            groupId: WorkspaceContextSectionIds.mcpServers,
-            icon: navigationIcon(Server),
-            id: "mcp-servers",
-            label: t("resourcesMCPLabel"),
-            onSelect: () => {
-              if (firstMCPServer && onSelectMCPServer) {
-                onSelectMCPServer(firstMCPServer);
-                return;
-              }
-              onSelectHub();
-            },
-          },
           {
             active: activeContextSectionId === WorkspaceContextSectionIds.hubSkills,
             badge: badgeCount(hub?.skills.length),
@@ -315,6 +300,21 @@ export function WorkspaceSidebar({
               onSelectHub();
             },
           },
+          {
+            active: activeContextSectionId === WorkspaceContextSectionIds.mcpServers,
+            badge: badgeCount(hub?.mcpServers?.length),
+            groupId: WorkspaceContextSectionIds.mcpServers,
+            icon: navigationIcon(Server),
+            id: "mcp-servers",
+            label: t("resourcesMCPLabel"),
+            onSelect: () => {
+              if (onSelectMCPServer) {
+                onSelectMCPServer(firstMCPServer);
+                return;
+              }
+              onSelectHub();
+            },
+          },
           {
             active: activeContextSectionId === WorkspaceContextSectionIds.models,
             badge: badgeCount(modelProviders?.providers.length),

web/app/src/pages/WorkspacePage/components/WorkspaceSidebar/WorkspaceTabPanels.tsx

@@ -1129,8 +1129,8 @@ export function WorkspaceTabPanels({
       ) : workspaceTab === WorkspaceTabs.hub ? (
         <div className={styles.panel} role="tabpanel" aria-label={t("resourcesTab")}>
           {renderHubTemplateSection()}
-          {renderMCPSection()}
           {renderHubSkillSection()}
+          {renderMCPSection()}
           {renderModelProviderSection()}
           {renderSkillUploadDialog()}
         </div>

web/app/src/shared/i18n/messages.ts

@@ -171,7 +171,7 @@ export const messages = {
     resourcesMCPDelete: "删除",
     resourcesMCPCreateTitle: "添加 MCP Server",
     resourcesMCPEditTitle: "编辑 MCP Server",
-    resourcesMCPFormDescription: "配置会保存到全局 MCP catalog state.json 的 mcpServers 中。",
+    resourcesMCPFormDescription: "添加可供智能体使用的 MCP server 配置。",
     resourcesMCPNameLabel: "名称",
     resourcesMCPNamePlaceholder: "例如 filesystem",
     resourcesMCPServerDocumentJSONLabel: "MCP server JSON",
@@ -1189,7 +1189,7 @@ export const messages = {
     resourcesMCPDelete: "Delete",
     resourcesMCPCreateTitle: "Add MCP Server",
     resourcesMCPEditTitle: "Edit MCP Server",
-    resourcesMCPFormDescription: "This config is saved into mcpServers in the global MCP catalog state.json.",
+    resourcesMCPFormDescription: "Add an MCP server configuration that agents can use.",
     resourcesMCPNameLabel: "Name",
     resourcesMCPNamePlaceholder: "For example filesystem",
     resourcesMCPServerDocumentJSONLabel: "MCP server JSON",

web/app/tests/components/HubDetailPane.test.tsx

@@ -22,6 +22,7 @@ function t(key: string, params: Record<string, string | number> = {}) {
       "MCP server definition must be an mcpServers JSON object with exactly one server.",
     resourcesMCPDelete: "Delete",
     resourcesMCPDeleteConfirmMessage: 'Delete MCP server "{name}"?',
+    resourcesMCPEmpty: "No MCP servers available yet.",
     resourcesMCPLoading: "Loading MCP servers",
     resourcesMCPSave: "Save",
     resourcesMCPSaving: "Saving...",
@@ -65,7 +66,7 @@ const template = {
   },
 };
 
-function renderHubDetailPane() {
+function renderHubDetailPane(selectedResourceType: "mcp" | "skill" | "template" = "template") {
   return render(
     <HubDetailPane
       locale="en"
@@ -81,7 +82,10 @@ function renderHubDetailPane() {
           onSelectSkillFile: vi.fn(),
           onSelectTemplate: vi.fn(),
           onSelectWorkspaceFile: vi.fn(),
-          selectedResourceType: "template",
+          mcpServers: [],
+          selectedMCPServer: null,
+          selectedMCPServerName: "",
+          selectedResourceType,
           selectedSkill: null,
           selectedSkillPath: "",
           selectedTemplate: template,
@@ -230,6 +234,13 @@ function renderMCPDetailPane() {
 }
 
 describe("HubDetailPane", () => {
+  it("keeps the MCP empty state visible when templates are available", () => {
+    renderHubDetailPane("mcp");
+
+    expect(screen.getByText("No MCP servers available yet.")).toBeInTheDocument();
+    expect(screen.queryByText("demo-template")).not.toBeInTheDocument();
+  });
+
   it("opens markdown files in a dialog with preview and code modes", async () => {
     const user = userEvent.setup();
     renderHubDetailPane();

web/app/tests/components/WorkspaceSidebar.test.tsx

@@ -27,6 +27,7 @@ const labels: Record<string, string> = {
   notificationsSection: "Notifications",
   resourcesModelProvidersSection: "Model Providers",
   resourcesSkillsLabel: "Skills",
+  resourcesMCPLabel: "MCP",
   resourcesTab: "Resources",
   resourcesTemplatesSection: "Templates",
   scheduledTasksTab: "Scheduled",
@@ -168,6 +169,31 @@ function renderSidebar(overrides: Partial<WorkspaceSidebarProps> = {}) {
 }
 
 describe("WorkspaceSidebar", () => {
+  it("selects the MCP resource type when the MCP list is empty", () => {
+    const onSelectMCPServer = vi.fn();
+
+    renderSidebar({
+      hub: {
+        loaded: true,
+        listError: "",
+        mcpServers: [],
+        selectedHubResourceType: "skill",
+        selectedHubSkillName: "shell",
+        selectedHubTemplateId: "",
+        skills: [{ name: "shell", description: "Shell helpers" }],
+        skillsError: "",
+        templates: [],
+        uploadBusy: false,
+        uploadError: "",
+      } as unknown as WorkspaceSidebarProps["hub"],
+      onSelectMCPServer,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "MCP" }));
+
+    expect(onSelectMCPServer).toHaveBeenCalledWith(null);
+  });
+
   it("uses primary resource navigation to show the selected resource list", () => {
     const onToggleWorkspaceGroup = vi.fn();
     const onSelectModelProvider = vi.fn();