@yancyyu/openhermit 1.6.37 → 1.6.38

package/src/renderer/api/httpClient.ts

@@ -6,6 +6,8 @@
  * to run in a regular browser connected to an HTTP server.
  */
 
+import { createDefaultCliExtensionCapabilities } from '@shared/utils/providerExtensionCapabilities';
+
 import type { DashboardRecentProjectsPayload } from '@features/recent-projects/contracts';
 import type {
   AddMemberRequest,
@@ -17,10 +19,13 @@ import type {
   BoardTaskExactLogSummariesResponse,
   BoardTaskLogStreamResponse,
   BoardTaskLogStreamSummary,
+  CcSession,
+  CcSessionDetail,
   ClaudeMdFileInfo,
   ClaudeRootFolderSelection,
   ClaudeRootInfo,
   CliInstallerAPI,
+  CollabTask,
   ConfigAPI,
   ContextInfo,
   ConversationGroup,
@@ -39,6 +44,7 @@ import type {
   MachineRuntimeProcess,
   MemberFullStats,
   MemberLogSummary,
+  MemberSpawnStatusesSnapshot,
   NotificationsAPI,
   NotificationTrigger,
   PaginatedSessionsResult,
@@ -65,6 +71,7 @@ import type {
   SshLastConnection,
   SubagentDetail,
   TaskComment,
+  TeamAgentRuntimeSnapshot,
   TeamChangeEvent,
   TeamClaudeLogsQuery,
   TeamClaudeLogsResponse,
@@ -95,26 +102,9 @@ import type {
   UpdateSchedulePatch,
   WaterfallData,
   WslClaudeRootCandidate,
-  MemberSpawnStatusesSnapshot,
-  TeamAgentRuntimeSnapshot,
-  CcSession,
-  CcSessionDetail,
-  CollabTask,
 } from '@shared/types';
-
-import type {
-  AgentChangeSet,
-  ApplyReviewResult,
-  ChangeStats,
-  ConflictCheckResult,
-  FileChangeWithContent,
-  HunkDecision,
-  RejectResult,
-  TaskChangeSetV2,
-} from '@shared/types/review';
-import type { CliProviderStatus } from '@shared/types/cliInstaller';
 import type { AgentConfig } from '@shared/types/api';
-import type { CliArgsValidationResult } from '@shared/utils/cliArgsParser';
+import type { CliProviderStatus } from '@shared/types/cliInstaller';
 import type { EditorAPI, ProjectAPI, WorkspaceListResponse } from '@shared/types/editor';
 import type {
   EnrichedPlugin,
@@ -122,6 +112,10 @@ import type {
   McpCatalogItem,
   McpCustomInstallRequest,
   McpInstallRequest,
+  McpLibraryEntry,
+  McpLibraryImportRequest,
+  McpLibraryImportResult,
+  McpLibraryUpsertRequest,
   McpSearchResult,
   McpServerDiagnostic,
   OperationResult,
@@ -136,8 +130,19 @@ import type {
   SkillUpsertRequest,
   SkillWatcherEvent,
 } from '@shared/types/extensions';
+import type {
+  AgentChangeSet,
+  ApplyReviewResult,
+  ChangeStats,
+  ConflictCheckResult,
+  FileChangeWithContent,
+  HunkDecision,
+  RejectResult,
+  TaskChangeSetV2,
+} from '@shared/types/review';
 import type { ApplyReviewRequest } from '@shared/types/review';
 import type { TerminalAPI } from '@shared/types/terminal';
+import type { CliArgsValidationResult } from '@shared/utils/cliArgsParser';
 
 export class HttpAPIClient implements ElectronAPI {
   private baseUrl: string;
@@ -166,7 +171,7 @@ export class HttpAPIClient implements ElectronAPI {
     };
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- event callbacks have varying signatures
+   
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- event callbacks have varying signatures
   private addEventListener(channel: string, callback: (...args: any[]) => void): () => void {
     this.initEventSource();
@@ -1873,7 +1878,41 @@ export class HttpAPIClient implements ElectronAPI {
             }
           })
         );
-        const providers = providerResults.filter((p): p is NonNullable<typeof p> => p !== null);
+        // The cc-connect sidecar backend does not implement per-provider status
+        // endpoints (they return an empty array), so drop any malformed entries
+        // and only keep real provider objects.
+        const validProviders = providerResults.filter(
+          (p): p is CliProviderStatus =>
+            p != null &&
+            typeof p === 'object' &&
+            !Array.isArray(p) &&
+            typeof (p).providerId === 'string'
+        );
+
+        // When the backend reports no provider capability data, fall back to a
+        // sane Anthropic provider so extension management (plugins/MCP/skills)
+        // is not falsely gated off. The backend remains the source of truth and
+        // will reject an install if the runtime genuinely cannot perform it.
+        const providers =
+          validProviders.length > 0
+            ? validProviders
+            : [
+                {
+                  providerId: 'anthropic',
+                  displayName: 'Anthropic',
+                  supported: true,
+                  authenticated: true,
+                  authMethod: null,
+                  verificationState: 'verified',
+                  models: [],
+                  canLoginFromUi: true,
+                  capabilities: {
+                    teamLaunch: true,
+                    oneShot: true,
+                    extensions: createDefaultCliExtensionCapabilities(),
+                  },
+                } satisfies CliProviderStatus,
+              ];
 
         return {
           flavor: 'agent_teams_orchestrator',
@@ -1887,7 +1926,7 @@ export class HttpAPIClient implements ElectronAPI {
           launchError: null,
           latestVersion: null,
           updateAvailable: false,
-          authLoggedIn: result.authenticated,
+          authLoggedIn: result.authenticated ?? true,
           authStatusChecking: true,
           authMethod: null,
           providers,
@@ -1914,7 +1953,21 @@ export class HttpAPIClient implements ElectronAPI {
     },
     getProviderStatus: async (providerId: string): Promise<CliProviderStatus | null> => {
       try {
-        return await this.get(`/api/cli/provider/${encodeURIComponent(providerId)}/status`);
+        const result = await this.get<unknown>(
+          `/api/cli/provider/${encodeURIComponent(providerId)}/status`
+        );
+        // The cc-connect sidecar returns an empty array for unimplemented
+        // provider endpoints. Treat any malformed payload as "no data" (null)
+        // so it does not overwrite the synthesized provider in getStatus().
+        if (
+          result == null ||
+          typeof result !== 'object' ||
+          Array.isArray(result) ||
+          typeof (result as CliProviderStatus).providerId !== 'string'
+        ) {
+          return null;
+        }
+        return result as CliProviderStatus;
       } catch {
         return null;
       }
@@ -2074,6 +2127,39 @@ export class HttpAPIClient implements ElectronAPI {
       if (!result.success) return {};
       return result.data ?? {};
     },
+    libraryList: async () => {
+      const result = await this.get<{
+        success: boolean;
+        data?: McpLibraryEntry[];
+        error?: string;
+      }>('/api/extensions/mcp/library');
+      if (!result.success) return [];
+      return result.data ?? [];
+    },
+    libraryUpsert: async (request: McpLibraryUpsertRequest) => {
+      const result = await this.post<{
+        success: boolean;
+        data?: McpLibraryEntry;
+        error?: string;
+      }>('/api/extensions/mcp/library', request);
+      if (!result.success || !result.data) throw new Error(result.error ?? 'Save failed');
+      return result.data;
+    },
+    libraryDelete: async (id: string) => {
+      const result = await this.delete<{ success: boolean; error?: string }>(
+        `/api/extensions/mcp/library/${encodeURIComponent(id)}`
+      );
+      if (!result.success) throw new Error(result.error ?? 'Delete failed');
+    },
+    libraryImport: async (request: McpLibraryImportRequest) => {
+      const result = await this.post<{
+        success: boolean;
+        data?: McpLibraryImportResult;
+        error?: string;
+      }>('/api/extensions/mcp/library/import', request);
+      if (!result.success) throw new Error(result.error ?? 'Import failed');
+      return result.data ?? { imported: [], skipped: [] };
+    },
   };
 
   skills = {

package/src/renderer/components/extensions/ExtensionStoreView.tsx

@@ -4,7 +4,7 @@
  * Global catalog data comes from Zustand store.
  */
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 // Stubs for removed codex-account feature
 function useCodexAccountSnapshot(_opts: { enabled: boolean; includeRateLimits?: boolean }) {
@@ -41,22 +41,16 @@ import { getRuntimeDisplayName } from '@renderer/utils/runtimeDisplayName';
 import { getCliProviderExtensionCapabilities } from '@shared/utils/providerExtensionCapabilities';
 import {
   AlertTriangle,
-  BookOpen,
   Info,
   Loader2,
-  Plus,
   Puzzle,
   RefreshCw,
-  Server,
   Sliders,
 } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
-import { CustomMcpServerDialog } from './mcp/CustomMcpServerDialog';
 import { EnvVarPanel } from './env/EnvVarPanel';
-import { McpServersPanel } from './mcp/McpServersPanel';
 import { PluginsPanel } from './plugins/PluginsPanel';
-import { SkillsPanel } from './skills/SkillsPanel';
 import { StoreExtensionToast } from './common/ExtensionToast';
 import { ExtensionsSubTabTrigger } from './ExtensionsSubTabTrigger';
 
@@ -124,18 +118,6 @@ const EXTENSION_SUB_TABS = [
     icon: Puzzle,
     description: 'Claude Code 私有扩展，增强运行时的能力与集成。',
   },
-  {
-    value: 'mcp-servers' as const,
-    label: 'MCP 服务器',
-    icon: Server,
-    description: '连接外部工具和应用，让运行时可以读取数据或执行本应用之外的操作。',
-  },
-  {
-    value: 'skills' as const,
-    label: '技能',
-    icon: BookOpen,
-    description: '面向常见任务的可复用指令，帮助运行时更稳定地处理重复工作。',
-  },
   {
     value: 'env-vars' as const,
     label: '环境变量',
@@ -145,16 +127,10 @@ const EXTENSION_SUB_TABS = [
 ] as const;
 
 export const ExtensionStoreView = (): React.JSX.Element => {
-  const tabId = useTabIdOptional();
   const {
     bootstrapCliStatus,
     fetchCliStatus,
     fetchPluginCatalog,
-    fetchSkillsCatalog,
-    mcpBrowse,
-    mcpFetchInstalled,
-    mcpBrowseLoading,
-    skillsLoading,
     cliStatus,
     cliStatusLoading,
     cliProviderStatusLoading,
@@ -168,12 +144,7 @@ export const ExtensionStoreView = (): React.JSX.Element => {
       bootstrapCliStatus: s.bootstrapCliStatus,
       fetchCliStatus: s.fetchCliStatus,
       fetchPluginCatalog: s.fetchPluginCatalog,
-      fetchSkillsCatalog: s.fetchSkillsCatalog,
       pluginCatalog: s.pluginCatalog,
-      mcpBrowse: s.mcpBrowse,
-      mcpFetchInstalled: s.mcpFetchInstalled,
-      mcpBrowseLoading: s.mcpBrowseLoading,
-      skillsLoading: s.skillsLoading,
       cliStatus: s.cliStatus,
       cliStatusLoading: s.cliStatusLoading,
       cliProviderStatusLoading: s.cliProviderStatusLoading,
@@ -229,6 +200,9 @@ export const ExtensionStoreView = (): React.JSX.Element => {
   const runtimeDisplayName = getRuntimeDisplayName(effectiveCliStatus, multimodelEnabled);
   const cliInstalled = effectiveCliStatus?.installed ?? true;
   const hasOngoingSessions = sessions.some((sess) => sess.isOngoing);
+
+  const tabState = useExtensionsTabState();
+  const tabId = useTabIdOptional();
   const extensionsTabProjectId = useStore((s) =>
     tabId
       ? (s.paneLayout.panes.flatMap((pane) => pane.tabs).find((tab) => tab.id === tabId)
@@ -236,8 +210,6 @@ export const ExtensionStoreView = (): React.JSX.Element => {
       : null
   );
 
-  const tabState = useExtensionsTabState();
-  const [customMcpDialogOpen, setCustomMcpDialogOpen] = useState(false);
   const resolvedProject = useMemo(
     () => resolveProjectPathById(extensionsTabProjectId, projects, repositoryGroups),
     [extensionsTabProjectId, projects, repositoryGroups]
@@ -254,42 +226,25 @@ export const ExtensionStoreView = (): React.JSX.Element => {
     });
   }, [bootstrapCliStatus, fetchCliStatus, multimodelEnabled]);
 
-  // Fetch MCP installed state on mount
-  useEffect(() => {
-    void mcpFetchInstalled(projectPath ?? undefined);
-  }, [mcpFetchInstalled, projectPath]);
-
   // Fetch Plugin catalog on mount / project change
   useEffect(() => {
     void fetchPluginCatalog(projectPath ?? undefined);
   }, [fetchPluginCatalog, projectPath]);
 
-  // Fetch Skills catalog on mount / project change
-  useEffect(() => {
-    void fetchSkillsCatalog(projectPath ?? undefined);
-  }, [fetchSkillsCatalog, projectPath]);
-
-  // Refresh all data (MCP + skills + runtime status)
+  // Refresh all data
   const handleRefresh = useCallback(() => {
     void refreshCliStatusForCurrentMode({
       multimodelEnabled,
       bootstrapCliStatus,
       fetchCliStatus,
     });
-    void mcpBrowse(); // re-fetch first page
-    void mcpFetchInstalled(projectPath ?? undefined);
-    void fetchSkillsCatalog(projectPath ?? undefined);
   }, [
     bootstrapCliStatus,
     fetchCliStatus,
-    fetchSkillsCatalog,
     multimodelEnabled,
-    mcpBrowse,
-    mcpFetchInstalled,
-    projectPath,
   ]);
 
-  const isRefreshing = effectiveCliStatusLoading || mcpBrowseLoading || skillsLoading;
+  const isRefreshing = effectiveCliStatusLoading;
   const cliStatusBanner = useMemo(() => {
     const providers = effectiveCliStatus?.providers ?? [];
     const visibleProviders = filterExtensionStoreProviders(
@@ -535,17 +490,6 @@ export const ExtensionStoreView = (): React.JSX.Element => {
                     />
                   ))}
                 </TabsList>
-                {tabState.activeSubTab === 'mcp-servers' && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setCustomMcpDialogOpen(true)}
-                    className="mb-1 whitespace-nowrap"
-                  >
-                    <Plus className="mr-1 size-3.5" />
-                    添加自定义
-                  </Button>
-                )}
               </div>
 
               <TabsContent value="plugins" className="mt-0 pt-4">
@@ -567,44 +511,10 @@ export const ExtensionStoreView = (): React.JSX.Element => {
                 />
               </TabsContent>
 
-              <TabsContent value="mcp-servers" className="mt-0 pt-4">
-                <McpServersPanel
-                  projectPath={projectPath}
-                  mcpSearchQuery={tabState.mcpSearchQuery}
-                  mcpSearch={tabState.mcpSearch}
-                  mcpSearchResults={tabState.mcpSearchResults}
-                  mcpSearchLoading={tabState.mcpSearchLoading}
-                  mcpSearchWarnings={tabState.mcpSearchWarnings}
-                  selectedMcpServerId={tabState.selectedMcpServerId}
-                  setSelectedMcpServerId={tabState.setSelectedMcpServerId}
-                  cliStatus={effectiveCliStatus}
-                  cliStatusLoading={effectiveCliStatusLoading}
-                />
-              </TabsContent>
-
-              <TabsContent value="skills" className="mt-0 pt-4">
-                <SkillsPanel
-                  projectPath={projectPath}
-                  projectLabel={projectLabel}
-                  skillsSearchQuery={tabState.skillsSearchQuery}
-                  setSkillsSearchQuery={tabState.setSkillsSearchQuery}
-                  skillsSort={tabState.skillsSort}
-                  setSkillsSort={tabState.setSkillsSort}
-                  selectedSkillId={tabState.selectedSkillId}
-                  setSelectedSkillId={tabState.setSelectedSkillId}
-                />
-              </TabsContent>
-
               <TabsContent value="env-vars" className="mt-0 pt-4">
                 <EnvVarPanel projectPath={projectPath} />
               </TabsContent>
             </Tabs>
-
-            {/* Custom MCP server dialog (lifted to store view level) */}
-            <CustomMcpServerDialog
-              open={customMcpDialogOpen}
-              onClose={() => setCustomMcpDialogOpen(false)}
-            />
           </div>
         </div>
       </div>

package/src/renderer/components/extensions/plugins/PluginCard.tsx

@@ -10,6 +10,7 @@ import {
   getPluginOperationKey,
   hasInstallationInScope,
   inferCapabilities,
+  isEssentialPlugin,
   normalizeCategory,
 } from '@shared/utils/extensionNormalizers';
 import { Tag } from 'lucide-react';
@@ -77,6 +78,13 @@ export const PluginCard = ({
           </div>
         </div>
       )}
+      {isEssentialPlugin(plugin) && (
+        <div className="pointer-events-none absolute -right-px -top-px size-16 overflow-hidden">
+          <div className="absolute right-[-24px] top-[4px] w-[80px] rotate-45 bg-amber-500/90 text-center text-[9px] font-semibold leading-[18px] text-white shadow-sm">
+            ⭐ 必装
+          </div>
+        </div>
+      )}
 
       {/* Header: name + status/meta */}
       <div className="flex items-start justify-between gap-2">

package/src/renderer/components/extensions/plugins/PluginsPanel.tsx

@@ -16,7 +16,11 @@ import {
   SelectValue,
 } from '@renderer/components/ui/select';
 import { useStore } from '@renderer/store';
-import { inferCapabilities, normalizeCategory } from '@shared/utils/extensionNormalizers';
+import {
+  inferCapabilities,
+  isEssentialPlugin,
+  normalizeCategory,
+} from '@shared/utils/extensionNormalizers';
 import { getCliProviderExtensionCapability } from '@shared/utils/providerExtensionCapabilities';
 import { ArrowUpDown, Filter, Puzzle, Search } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
@@ -100,9 +104,15 @@ function selectFilteredPlugins(
     result = result.filter((p) => p.isInstalled);
   }
 
-  // Sort
+  // Sort. Essential plugins (oh-my-claudecode, codex) are pinned to the top of
+  // the grid — installed or not — so the recommendation lives inside the store
+  // list itself (rather than a separate banner). Within each group the chosen
+  // sort field still applies.
   const direction = sort.order === 'asc' ? 1 : -1;
+  const recommendRank = (p: EnrichedPlugin): number => (isEssentialPlugin(p) ? 0 : 1);
   result = [...result].sort((a, b) => {
+    const rankDelta = recommendRank(a) - recommendRank(b);
+    if (rankDelta !== 0) return rankDelta;
     switch (sort.field) {
       case 'popularity':
         return (a.installCount - b.installCount) * direction;
@@ -134,12 +144,7 @@ export const PluginsPanel = ({
   cliStatus: cliStatusOverride,
   cliStatusLoading,
 }: PluginsPanelProps): React.JSX.Element => {
-  const {
-    catalog,
-    loading,
-    error,
-    cliStatus: storedCliStatus,
-  } = useStore(
+  const { catalog, loading, error, cliStatus: storedCliStatus } = useStore(
     useShallow((s) => ({
       catalog: s.pluginCatalog,
       loading: s.pluginCatalogLoading,

package/src/renderer/components/team/TeamDetailView.tsx

@@ -73,6 +73,7 @@ import {
   MoreHorizontal,
   Shield,
   Users,
+  Wrench,
 } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
@@ -106,6 +107,7 @@ import {
 } from './sidebar/teamSidebarUiState';
 import { CollapsibleTeamSection } from './CollapsibleTeamSection';
 import { ProcessesSection } from './ProcessesSection';
+import { ToolsSection } from './tools/ToolsSection';
 import { getLaunchJoinMilestonesFromMembers, getLaunchJoinState } from './provisioningSteps';
 import { TeamProvisioningBanner } from './TeamProvisioningBanner';
 import {
@@ -2279,6 +2281,19 @@ export const TeamDetailView = ({
                 />
               </CollapsibleTeamSection>
 
+              <CollapsibleTeamSection
+                sectionId="tools"
+                title="工具"
+                icon={<Wrench size={14} />}
+                defaultOpen={false}
+              >
+                <ToolsSection
+                  teamName={teamName}
+                  projectPath={data.config.projectPath ?? null}
+                  harnessType={data.harness}
+                />
+              </CollapsibleTeamSection>
+
               <CollapsibleTeamSection
                 sectionId="kanban"
                 title="外部派单"

package/src/renderer/components/team/tools/AddMcpInline.tsx

@@ -0,0 +1,47 @@
+/**
+ * AddMcpInline — opens CustomMcpServerDialog for adding a custom MCP server.
+ * Refreshes parent list when dialog closes (install may have occurred).
+ */
+
+import { useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { CustomMcpServerDialog } from '@renderer/components/extensions/mcp/CustomMcpServerDialog';
+
+interface AddMcpInlineProps {
+  projectPath: string | null;
+  harnessType: string;
+  onAdded: () => void;
+  onCancel: () => void;
+}
+
+export const AddMcpInline = ({
+  onAdded,
+  onCancel,
+}: AddMcpInlineProps): React.JSX.Element => {
+  const [dialogOpen, setDialogOpen] = useState(true);
+
+  const handleClose = () => {
+    setDialogOpen(false);
+    // Always refresh when dialog closes — install may have happened
+    onAdded();
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" className="h-7 gap-1 text-xs" onClick={() => setDialogOpen(true)}>
+          添加自定义 MCP
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onCancel} className="h-7 text-xs">
+          取消
+        </Button>
+      </div>
+
+      <CustomMcpServerDialog
+        open={dialogOpen}
+        onClose={handleClose}
+      />
+    </>
+  );
+};

package/src/renderer/components/team/tools/AddSkillInline.tsx

@@ -0,0 +1,61 @@
+/**
+ * AddSkillInline — inline compact form for adding a skill.
+ * Opens the existing SkillEditorDialog in create mode.
+ */
+
+import { useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { SkillEditorDialog } from '@renderer/components/extensions/skills/SkillEditorDialog';
+
+interface AddSkillInlineProps {
+  projectPath: string | null;
+  projectLabel?: string | null;
+  onAdded: () => void;
+  onCancel: () => void;
+}
+
+export const AddSkillInline = ({
+  projectPath,
+  projectLabel,
+  onAdded,
+  onCancel,
+}: AddSkillInlineProps): React.JSX.Element => {
+  const [editorOpen, setEditorOpen] = useState(true);
+
+  const handleClose = () => {
+    setEditorOpen(false);
+    onCancel();
+  };
+
+  const handleSaved = () => {
+    setEditorOpen(false);
+    onAdded();
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-7 gap-1 text-xs"
+        onClick={() => setEditorOpen(true)}
+      >
+        创建新 Skill
+      </Button>
+      <Button variant="ghost" size="sm" onClick={onCancel} className="h-7 text-xs">
+        取消
+      </Button>
+
+      <SkillEditorDialog
+        open={editorOpen}
+        onClose={handleClose}
+        onSaved={handleSaved}
+        mode="create"
+        projectPath={projectPath ?? null}
+        projectLabel={projectLabel ?? null}
+        detail={null}
+      />
+    </div>
+  );
+};

package/src/renderer/components/team/tools/McpChip.tsx

@@ -0,0 +1,42 @@
+/**
+ * McpChip — compact chip for an installed MCP server.
+ * Shows server name, status dot, and remove button on hover.
+ */
+
+import { X } from 'lucide-react';
+
+import type { InstalledMcpEntry, McpServerDiagnostic } from '@shared/types/extensions';
+
+interface McpChipProps {
+  entry: InstalledMcpEntry;
+  diagnostic?: McpServerDiagnostic;
+  onRemove: (entry: InstalledMcpEntry) => void;
+}
+
+export const McpChip = ({ entry, diagnostic, onRemove }: McpChipProps): React.JSX.Element => {
+  // Default to green ("connected"). Only show a problem color when diagnostics
+  // explicitly report a failure or an auth requirement; absent/unknown status
+  // (e.g. diagnostics endpoint unavailable) is treated as healthy.
+  const statusColor =
+    diagnostic?.status === 'failed'
+      ? 'bg-red-500'
+      : diagnostic?.status === 'needs-authentication'
+        ? 'bg-amber-500'
+        : 'bg-emerald-500';
+
+  return (
+    <div className="group inline-flex items-center gap-1.5 rounded-full bg-[var(--color-bg-secondary)] px-2.5 py-1 text-xs transition-colors hover:bg-[var(--color-bg-secondary-hover)]">
+      <span className={`size-2 shrink-0 rounded-full ${statusColor}`} title={diagnostic?.status ?? 'unknown'} />
+      <span className="max-w-[120px] truncate text-[var(--color-text)]">{entry.name}</span>
+      <button
+        type="button"
+        className="shrink-0 rounded-full p-0.5 opacity-0 transition-opacity hover:bg-red-500/20 group-hover:opacity-100"
+        onClick={() => onRemove(entry)}
+        aria-label={`删除 ${entry.name}`}
+        title="点击删除"
+      >
+        <X size={10} className="text-[var(--color-text-muted)] hover:text-red-400" />
+      </button>
+    </div>
+  );
+};