@yancyyu/openhermit 1.6.37 → 1.6.39

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 }) {
@@ -31,32 +31,16 @@ import { useStore } from '@renderer/store';
 import { createLoadingMultimodelCliStatus } from '@renderer/store/slices/cliInstallerSlice';
 import {
   filterExtensionStoreProviders,
-  formatCliExtensionCapabilityStatus,
   getVisibleMultimodelProviders,
   isMultimodelRuntimeStatus,
 } from '@renderer/utils/multimodelProviderVisibility';
 import { resolveProjectPathById } from '@renderer/utils/projectLookup';
 import { refreshCliStatusForCurrentMode } from '@renderer/utils/refreshCliStatus';
 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 { AlertTriangle, Info, Loader2, Puzzle, RefreshCw } 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';
 
@@ -87,7 +71,7 @@ const ProviderCapabilityCardSkeleton = ({
       </Badge>
     </div>
     <div className="mt-2 flex flex-wrap gap-1.5">
-      {Array.from({ length: 3 }, (_, index) => (
+      {Array.from({ length: 4 }, (_, index) => (
         <span
           key={index}
           className="h-7 w-28 animate-pulse rounded-md border border-border bg-surface"
@@ -124,37 +108,13 @@ 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: '环境变量',
-    icon: Sliders,
-    description: '管理运行时环境变量，启动 agent 时自动注入。',
-  },
 ] 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 +128,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 +184,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,14 +194,11 @@ 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]
   );
   const projectPath = resolvedProject?.path ?? null;
-  const projectLabel = resolvedProject?.name ?? null;
   const subTabs = EXTENSION_SUB_TABS;
 
   useEffect(() => {
@@ -254,42 +209,21 @@ 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,
-  ]);
+  }, [bootstrapCliStatus, fetchCliStatus, multimodelEnabled]);
 
-  const isRefreshing = effectiveCliStatusLoading || mcpBrowseLoading || skillsLoading;
+  const isRefreshing = effectiveCliStatusLoading;
   const cliStatusBanner = useMemo(() => {
     const providers = effectiveCliStatus?.providers ?? [];
     const visibleProviders = filterExtensionStoreProviders(
@@ -309,7 +243,7 @@ export const ExtensionStoreView = (): React.JSX.Element => {
           <div>
             <p className="text-sm font-medium text-text">正在检查扩展运行时可用性</p>
             <p className="mt-0.5 text-xs text-text-muted">
-              扩展需要配置好的运行时来管理 MCP 服务器、技能和提供商连接。
+              扩展需要配置好的运行时来管理插件和提供商连接。
             </p>
           </div>
         </div>
@@ -366,101 +300,7 @@ export const ExtensionStoreView = (): React.JSX.Element => {
       );
     }
 
-    if (isMultimodel) {
-      return (
-        <div className="bg-surface/70 mx-4 mt-3 rounded-md border border-border px-4 py-3">
-          <div className="flex items-start gap-3">
-            <Info className="mt-0.5 size-4 shrink-0 text-text-secondary" />
-            <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium text-text">多模型运行时能力</p>
-              <p className="mt-0.5 text-xs text-text-muted">
-                不同区域支持的提供商可能不同。只有运行时明确声明支持时，MCP 与技能能力才会显示。
-              </p>
-            </div>
-          </div>
-          {visibleProviders.length > 0 && (
-            <div className="mt-3 grid gap-2 md:grid-cols-2">
-              {visibleProviders.map((provider) => {
-                const providerLoading = cliProviderStatusLoading[provider.providerId] === true;
-                if (
-                  isProviderCapabilityCardLoading(provider, providerLoading) ||
-                  isCodexSnapshotPending(provider, codexSnapshotPending)
-                ) {
-                  return (
-                    <ProviderCapabilityCardSkeleton
-                      key={provider.providerId}
-                      providerId={provider.providerId}
-                      displayName={provider.displayName}
-                    />
-                  );
-                }
-
-                const statusTone = provider.authenticated
-                  ? 'border-emerald-500/30 bg-emerald-500/5 text-emerald-300'
-                  : provider.supported
-                    ? 'border-amber-500/30 bg-amber-500/5 text-amber-300'
-                    : 'border-border bg-surface-raised text-text-muted';
-                const statusLabel = provider.authenticated
-                  ? '已连接'
-                  : provider.supported
-                    ? '需要设置'
-                    : '不支持';
-                const extensionCapabilities = getCliProviderExtensionCapabilities(provider);
-
-                return (
-                  <div
-                    key={provider.providerId}
-                    className={`rounded-md border px-3 py-2 ${statusTone}`}
-                  >
-                    <div className="flex items-center justify-between gap-2">
-                      <div className="min-w-0">
-                        <p className="inline-flex items-center gap-2 text-sm font-medium">
-                          <ProviderBrandLogo
-                            providerId={provider.providerId}
-                            className="size-4 shrink-0"
-                          />
-                          <span>{provider.displayName}</span>
-                        </p>
-                        <p className="truncate text-[11px] text-text-muted">
-                          {provider.statusMessage ?? provider.backend?.label ?? '可配置'}
-                        </p>
-                      </div>
-                      <Badge variant="outline" className="shrink-0">
-                        {statusLabel}
-                      </Badge>
-                    </div>
-                    <div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
-                      <Badge variant="secondary">
-                        MCP: {formatCliExtensionCapabilityStatus(extensionCapabilities.mcp.status)}
-                      </Badge>
-                      <Badge variant="secondary">
-                        技能：{extensionCapabilities.skills.ownership}
-                      </Badge>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      );
-    }
-
-    return (
-      <div className="mx-4 mt-3 flex items-start gap-3 rounded-md border border-emerald-500/30 bg-emerald-500/5 px-4 py-3">
-        <Info className="mt-0.5 size-4 shrink-0 text-emerald-300" />
-        <div>
-          <p className="text-sm font-medium text-emerald-300">{runtimeDisplayName} 已就绪</p>
-          <p className="mt-0.5 text-xs text-text-muted">
-            可以从此页面管理 MCP 服务器与技能
-            {effectiveCliStatus.installedVersion
-              ? `，使用 ${runtimeDisplayName} ${effectiveCliStatus.installedVersion}`
-              : ''}
-            .
-          </p>
-        </div>
-      </div>
-    );
+    return null;
   }, [
     cliProviderStatusLoading,
     codexSnapshotPending,
@@ -470,7 +310,7 @@ export const ExtensionStoreView = (): React.JSX.Element => {
   ]);
 
   // Browser mode guard
-  if (!api.plugins && !api.mcpRegistry && !api.skills) {
+  if (!api.plugins) {
     return (
       <div className="flex flex-1 items-center justify-center">
         <div className="text-center">
@@ -535,17 +375,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">
@@ -566,45 +395,7 @@ export const ExtensionStoreView = (): React.JSX.Element => {
                   cliStatusLoading={effectiveCliStatusLoading}
                 />
               </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/ExtensionsSubTabTrigger.tsx

@@ -5,7 +5,7 @@ import { Info } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
 interface ExtensionsSubTabTriggerProps {
-  value: 'plugins' | 'mcp-servers' | 'skills' | 'env-vars';
+  value: 'plugins';
   label: string;
   description: string;
   icon: LucideIcon;

package/src/renderer/components/extensions/mcp/McpLibraryEnableDialog.tsx

@@ -0,0 +1,305 @@
+/**
+ * McpLibraryEnableDialog — enables a global MCP template as a project instance.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@renderer/components/ui/dialog';
+import { Input } from '@renderer/components/ui/input';
+import { Label } from '@renderer/components/ui/label';
+import { useStore } from '@renderer/store';
+import { Plus, Server, Trash2 } from 'lucide-react';
+
+import type { InstalledMcpEntry, McpHeaderDef, McpLibraryEntry } from '@shared/types/extensions';
+
+interface McpLibraryEnableDialogProps {
+  open: boolean;
+  entry: McpLibraryEntry | null;
+  projectPath: string | null;
+  installedServers?: InstalledMcpEntry[];
+  harnessType?: string;
+  onClose: () => void;
+  onEnabled: () => void;
+}
+
+interface EnvRow {
+  key: string;
+  value: string;
+}
+
+const SERVER_NAME_RE = /^[\w.-]{1,100}$/;
+
+function summarizeMcp(entry: McpLibraryEntry): string {
+  if (entry.installSpec.type === 'stdio') {
+    return `stdio · ${entry.installSpec.npmPackage}${entry.installSpec.npmVersion ? `@${entry.installSpec.npmVersion}` : ''}`;
+  }
+  return `${entry.installSpec.transportType} · ${entry.installSpec.url}`;
+}
+
+function envRowsFromRecord(record?: Record<string, string>): EnvRow[] {
+  return Object.entries(record ?? {}).map(([key, value]) => ({ key, value }));
+}
+
+function envRecordFromRows(rows: EnvRow[]): Record<string, string> {
+  return Object.fromEntries(
+    rows.map((row) => [row.key.trim(), row.value]).filter(([key]) => key.length > 0)
+  );
+}
+
+function cleanHeaders(headers: McpHeaderDef[]): McpHeaderDef[] {
+  return headers
+    .map((header) => ({ ...header, key: header.key.trim() }))
+    .filter((header) => header.key && header.value);
+}
+
+export const McpLibraryEnableDialog = ({
+  open,
+  entry,
+  projectPath,
+  installedServers = [],
+  harnessType,
+  onClose,
+  onEnabled,
+}: McpLibraryEnableDialogProps): React.JSX.Element => {
+  const installCustomMcpServer = useStore((s) => s.installCustomMcpServer);
+  const mcpFetchInstalled = useStore((s) => s.mcpFetchInstalled);
+  const runMcpDiagnostics = useStore((s) => s.runMcpDiagnostics);
+
+  const [serverName, setServerName] = useState('');
+  const [envRows, setEnvRows] = useState<EnvRow[]>([]);
+  const [headers, setHeaders] = useState<McpHeaderDef[]>([]);
+  const [installing, setInstalling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const installedNames = useMemo(
+    () => new Set(installedServers.map((server) => server.name.toLowerCase())),
+    [installedServers]
+  );
+  const trimmedName = serverName.trim();
+  const nameExists = Boolean(trimmedName) && installedNames.has(trimmedName.toLowerCase());
+  const canSubmit = Boolean(entry && projectPath && trimmedName && !nameExists && !installing);
+
+  useEffect(() => {
+    if (!open || !entry) return;
+    setServerName(entry.name);
+    setEnvRows(envRowsFromRecord(entry.envValues));
+    setHeaders(entry.headers ?? []);
+    setError(null);
+    setInstalling(false);
+  }, [entry, open]);
+
+  const addEnvRow = (): void => setEnvRows((prev) => [...prev, { key: '', value: '' }]);
+  const removeEnvRow = (index: number): void =>
+    setEnvRows((prev) => prev.filter((_, i) => i !== index));
+  const updateEnvRow = (index: number, field: keyof EnvRow, value: string): void =>
+    setEnvRows((prev) => prev.map((row, i) => (i === index ? { ...row, [field]: value } : row)));
+
+  const addHeader = (): void => setHeaders((prev) => [...prev, { key: '', value: '' }]);
+  const removeHeader = (index: number): void =>
+    setHeaders((prev) => prev.filter((_, i) => i !== index));
+  const updateHeader = (index: number, field: 'key' | 'value', value: string): void =>
+    setHeaders((prev) =>
+      prev.map((header, i) => (i === index ? { ...header, [field]: value } : header))
+    );
+
+  const handleEnable = async (): Promise<void> => {
+    if (!entry || !projectPath) return;
+
+    if (!trimmedName) {
+      setError('实例名称不能为空');
+      return;
+    }
+    if (!SERVER_NAME_RE.test(trimmedName)) {
+      setError('实例名称只能包含字母、数字、下划线、短横线和点号，最多 100 个字符');
+      return;
+    }
+    if (nameExists) {
+      setError('当前项目已存在同名实例，请改用其他实例名');
+      return;
+    }
+
+    setInstalling(true);
+    setError(null);
+    try {
+      await installCustomMcpServer({
+        serverName: trimmedName,
+        scope: 'project',
+        projectPath,
+        installSpec: entry.installSpec,
+        envValues: envRecordFromRows(envRows),
+        headers: cleanHeaders(headers),
+        harnessType: harnessType ?? 'claudecode',
+      });
+      await Promise.all([mcpFetchInstalled(projectPath), runMcpDiagnostics(projectPath)]);
+      onEnabled();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '添加项目实例失败');
+    } finally {
+      setInstalling(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && !installing && onClose()}>
+      <DialogContent className="max-h-[85vh] w-full max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <div className="flex size-8 items-center justify-center rounded-lg border border-border bg-surface-raised">
+              <Server className="size-4 text-text-muted" />
+            </div>
+            <div>
+              <DialogTitle>添加 MCP 项目实例</DialogTitle>
+              <DialogDescription>
+                从全局模板创建当前项目专属实例，可覆盖实例名、环境变量和请求头。
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {entry ? (
+          <div className="space-y-4">
+            <div className="bg-surface-raised/40 rounded-md border border-border px-3 py-2">
+              <div className="text-xs font-medium text-text">模板：{entry.name}</div>
+              <div className="mt-1 truncate font-mono text-[11px] text-text-muted">
+                {summarizeMcp(entry)}
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label htmlFor="mcp-enable-instance-name" className="text-xs">
+                项目实例名称
+              </Label>
+              <Input
+                id="mcp-enable-instance-name"
+                value={serverName}
+                onChange={(event) => setServerName(event.target.value)}
+                placeholder={entry.name}
+                className="h-8 font-mono text-sm"
+                autoFocus
+              />
+              <p
+                className={
+                  nameExists ? 'text-[11px] text-amber-300' : 'text-[11px] text-text-muted'
+                }
+              >
+                {nameExists
+                  ? '当前项目已存在同名实例，请改用其他实例名。'
+                  : '实例名只写入当前项目，可与模板名不同。'}
+              </p>
+            </div>
+
+            <div className="space-y-2 rounded-lg border border-border p-3">
+              <div className="flex items-center justify-between gap-2">
+                <div>
+                  <Label className="text-xs">项目环境变量</Label>
+                  <p className="text-[11px] text-text-muted">
+                    已预填模板默认值，可按当前项目覆盖。
+                  </p>
+                </div>
+                <Button variant="ghost" size="sm" onClick={addEnvRow} className="h-7 px-2 text-xs">
+                  <Plus className="mr-1 size-3" />
+                  添加
+                </Button>
+              </div>
+              {envRows.length > 0 ? (
+                <div className="space-y-2">
+                  {envRows.map((row, index) => (
+                    <div key={index} className="flex items-center gap-2">
+                      <Input
+                        value={row.key}
+                        onChange={(event) => updateEnvRow(index, 'key', event.target.value)}
+                        className="h-7 w-40 font-mono text-xs"
+                        placeholder="ENV_NAME"
+                      />
+                      <Input
+                        value={row.value}
+                        onChange={(event) => updateEnvRow(index, 'value', event.target.value)}
+                        className="h-7 flex-1 text-xs"
+                        placeholder="value"
+                      />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-7 text-red-400 hover:bg-red-500/10"
+                        onClick={() => removeEnvRow(index)}
+                      >
+                        <Trash2 className="size-3" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-[11px] text-text-muted">此模板没有环境变量默认值。</p>
+              )}
+            </div>
+
+            <div className="space-y-2 rounded-lg border border-border p-3">
+              <div className="flex items-center justify-between gap-2">
+                <div>
+                  <Label className="text-xs">项目请求头</Label>
+                  <p className="text-[11px] text-text-muted">HTTP/SSE 实例可用，stdio 通常忽略。</p>
+                </div>
+                <Button variant="ghost" size="sm" onClick={addHeader} className="h-7 px-2 text-xs">
+                  <Plus className="mr-1 size-3" />
+                  添加
+                </Button>
+              </div>
+              {headers.length > 0 ? (
+                <div className="space-y-2">
+                  {headers.map((header, index) => (
+                    <div key={index} className="flex items-center gap-2">
+                      <Input
+                        value={header.key}
+                        onChange={(event) => updateHeader(index, 'key', event.target.value)}
+                        className="h-7 w-40 text-xs"
+                        placeholder="Header-Name"
+                      />
+                      <Input
+                        value={header.value}
+                        onChange={(event) => updateHeader(index, 'value', event.target.value)}
+                        className="h-7 flex-1 text-xs"
+                        placeholder="value"
+                      />
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-7 text-red-400 hover:bg-red-500/10"
+                        onClick={() => removeHeader(index)}
+                      >
+                        <Trash2 className="size-3" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-[11px] text-text-muted">此模板没有请求头默认值。</p>
+              )}
+            </div>
+
+            {error && (
+              <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button variant="ghost" size="sm" onClick={onClose} disabled={installing}>
+                取消
+              </Button>
+              <Button size="sm" disabled={!canSubmit} onClick={() => void handleEnable()}>
+                {installing ? '添加中...' : '添加到当前项目'}
+              </Button>
+            </div>
+          </div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+};