@yancyyu/openhermit 1.6.4 → 1.6.6

package/src/renderer/components/settings/sections/GeneralSection.tsx

@@ -15,27 +15,31 @@ import { Check, Copy, FolderOpen, Laptop, Loader2, RotateCcw } from 'lucide-reac
 import { useShallow } from 'zustand/react/shallow';
 
 import { Button } from '@renderer/components/ui/button';
-import { SettingRow, SettingsSectionHeader, SettingsToggle } from '../components';
+import { SettingRow, SettingsSectionHeader, SettingsSelect, SettingsToggle } from '../components';
 
 import type { SafeConfig } from '../hooks/useSettingsConfig';
 import type { ClaudeRootInfo, WslClaudeRootCandidate } from '@shared/types';
 import type { HttpServerStatus } from '@shared/types/api';
 import type { AppConfig } from '@shared/types/notifications';
 
-// Theme options
 const THEME_OPTIONS = [
   { value: 'dark', label: '深色' },
   { value: 'light', label: '浅色' },
   { value: 'system', label: '跟随系统' },
 ] as const;
 
-const CC_LANGUAGE_OPTIONS = ['en', 'zh', 'zh-TW', 'ja', 'es'] as const;
-const CC_LOG_LEVEL_OPTIONS = ['debug', 'info', 'warn', 'error'] as const;
+const CC_LOG_LEVEL_OPTIONS = [
+  { value: 'debug', label: 'Debug' },
+  { value: 'info', label: 'Info' },
+  { value: 'warn', label: 'Warn' },
+  { value: 'error', label: 'Error' },
+];
+
 const CC_ATTACHMENT_OPTIONS = [
   { value: '', label: '默认' },
   { value: 'on', label: '开启' },
   { value: 'off', label: '关闭' },
-] as const;
+];
 
 interface CcGlobalSettingsState {
   language: string;
@@ -52,6 +56,38 @@ interface CcGlobalSettingsState {
   rate_limit_window_secs: number;
 }
 
+/** Compact number input for SettingRow right side */
+const CompactNum = ({
+  value,
+  onChange,
+  onSave,
+  min,
+  className,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  onSave: () => void;
+  min?: number;
+  className?: string;
+}): React.JSX.Element => (
+  <input
+    type="number"
+    min={min}
+    value={value}
+    onChange={(e) => onChange(Number(e.target.value) || 0)}
+    onBlur={onSave}
+    onKeyDown={(e) => {
+      if (e.key === 'Enter') onSave();
+    }}
+    className={cn(
+      'h-8 w-24 rounded-md border bg-transparent px-2 text-right text-xs tabular-nums',
+      'focus:outline-none focus:ring-1 focus:ring-zinc-700',
+      className
+    )}
+    style={{ borderColor: 'var(--color-border-subtle)', color: 'var(--color-text)' }}
+  />
+);
+
 interface GeneralSectionProps {
   readonly safeConfig: SafeConfig;
   readonly saving: boolean;
@@ -75,7 +111,6 @@ export const GeneralSection = ({
   const [serverError, setServerError] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
-  // Claude Root state
   const { connectionMode, fetchProjects, fetchRepositoryGroups } = useStore(
     useShallow((s) => ({
       connectionMode: s.connectionMode,
@@ -105,10 +140,7 @@ export const GeneralSection = ({
     rate_limit_window_secs: 60,
   });
   const [ccSettingsLoading, setCcSettingsLoading] = useState(false);
-  const [ccSettingsSaving, setCcSettingsSaving] = useState(false);
-  const [ccSettingsMessage, setCcSettingsMessage] = useState<string | null>(null);
 
-  // Fetch server status and Claude root info on mount
   useEffect(() => {
     void api.httpServer
       .getStatus()
@@ -136,8 +168,8 @@ export const GeneralSection = ({
     try {
       const settings = await api.ccSettings.get();
       setCcSettings((prev) => ({ ...prev, ...(settings as Partial<CcGlobalSettingsState>) }));
-    } catch (error) {
-      setCcSettingsMessage(error instanceof Error ? error.message : '加载运行设置失败');
+    } catch {
+      // best-effort
     } finally {
       setCcSettingsLoading(false);
     }
@@ -151,19 +183,17 @@ export const GeneralSection = ({
     setCcSettings((prev) => ({ ...prev, ...patch }));
   }, []);
 
-  const saveCcSettings = useCallback(async () => {
-    setCcSettingsSaving(true);
-    setCcSettingsMessage(null);
-    try {
-      await api.ccSettings.patch(ccSettings as unknown as Record<string, unknown>);
-      setCcSettingsMessage('已保存');
-      setTimeout(() => setCcSettingsMessage(null), 2500);
-    } catch (error) {
-      setCcSettingsMessage(error instanceof Error ? error.message : '保存失败');
-    } finally {
-      setCcSettingsSaving(false);
-    }
-  }, [ccSettings]);
+  const autoSaveCcSetting = useCallback(
+    async <K extends keyof CcGlobalSettingsState>(key: K, value: CcGlobalSettingsState[K]) => {
+      patchCcSettings({ [key]: value });
+      try {
+        await api.ccSettings.patch({ [key]: value } as unknown as Record<string, unknown>);
+      } catch {
+        // silent
+      }
+    },
+    [patchCcSettings]
+  );
 
   const handleServerToggle = useCallback(async (enabled: boolean) => {
     setServerLoading(true);
@@ -186,7 +216,6 @@ export const GeneralSection = ({
     setTimeout(() => setCopied(false), 2000);
   }, [serverUrl]);
 
-  // Claude Root handlers
   const resetWorkspaceForRootChange = useCallback((): void => {
     useStore.setState({
       projects: [],
@@ -369,8 +398,20 @@ export const GeneralSection = ({
     []
   );
 
+  const saveRateLimit = useCallback(async () => {
+    try {
+      await api.ccSettings.patch({
+        rate_limit_max_messages: ccSettings.rate_limit_max_messages,
+        rate_limit_window_secs: ccSettings.rate_limit_window_secs,
+      } as Record<string, unknown>);
+    } catch {
+      // silent
+    }
+  }, [ccSettings.rate_limit_max_messages, ccSettings.rate_limit_window_secs]);
+
   return (
     <div>
+      {/* Language */}
       <SettingsSectionHeader title="Agent 语言" />
       <SettingRow label="语言" description={agentLanguageDescription}>
         <Combobox
@@ -386,6 +427,7 @@ export const GeneralSection = ({
         />
       </SettingRow>
 
+      {/* Appearance */}
       <SettingsSectionHeader title="外观" />
       <SettingRow label="主题" description="选择你偏好的界面主题">
         <div className="inline-flex rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-0.5">
@@ -417,6 +459,8 @@ export const GeneralSection = ({
           disabled={saving}
         />
       </SettingRow>
+
+      {/* Server Status */}
       <SettingsSectionHeader title="服务状态" />
       <div
         className="mb-2 flex items-center gap-3 rounded-md px-3 py-2.5"
@@ -456,192 +500,110 @@ export const GeneralSection = ({
         当前为 Web 控制台模式。服务由 Hermit 后端托管，不能在浏览器内启动或关闭。
       </p>
 
+      {/* Runtime Settings */}
       <SettingsSectionHeader title="运行设置" />
-      <div className="space-y-3 rounded-md border border-[var(--color-border)] p-3">
-        {ccSettingsLoading ? (
-          <div className="flex items-center gap-2 text-xs text-[var(--color-text-muted)]">
-            <Loader2 className="size-3.5 animate-spin" />
-            正在加载运行设置...
-          </div>
-        ) : (
-          <>
-            <div className="grid gap-3 md:grid-cols-2">
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  语言
-                </label>
-                <select
-                  value={ccSettings.language}
-                  onChange={(event) => patchCcSettings({ language: event.target.value })}
-                  className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                >
-                  {CC_LANGUAGE_OPTIONS.map((language) => (
-                    <option key={language} value={language}>
-                      {language}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  附件回传
-                </label>
-                <select
-                  value={ccSettings.attachment_send}
-                  onChange={(event) => patchCcSettings({ attachment_send: event.target.value })}
-                  className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                >
-                  {CC_ATTACHMENT_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  空闲超时（分钟）
-                </label>
-                <input
-                  type="number"
-                  min={0}
-                  value={ccSettings.idle_timeout_mins}
-                  onChange={(event) =>
-                    patchCcSettings({ idle_timeout_mins: Number(event.target.value) || 0 })
-                  }
-                  className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  日志等级
-                </label>
-                <select
-                  value={ccSettings.log_level}
-                  onChange={(event) => patchCcSettings({ log_level: event.target.value })}
-                  className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                >
-                  {CC_LOG_LEVEL_OPTIONS.map((level) => (
-                    <option key={level} value={level}>
-                      {level}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-
-            <div className="grid gap-2 md:grid-cols-2">
-              <SettingsToggle
-                enabled={ccSettings.thinking_messages}
-                onChange={(value) => patchCcSettings({ thinking_messages: value })}
-              />
-              <span className="text-xs text-[var(--color-text-secondary)]">显示 Thinking 消息</span>
-              <SettingsToggle
-                enabled={ccSettings.tool_messages}
-                onChange={(value) => patchCcSettings({ tool_messages: value })}
+      {ccSettingsLoading ? (
+        <div className="flex items-center gap-2 py-3 text-xs text-[var(--color-text-muted)]">
+          <Loader2 className="size-3.5 animate-spin" />
+          正在加载...
+        </div>
+      ) : (
+        <>
+          <SettingRow label="附件回传" description="控制是否将对话中的附件文件回传给 Agent">
+            <SettingsSelect
+              value={ccSettings.attachment_send}
+              options={CC_ATTACHMENT_OPTIONS}
+              onChange={(v) => void autoSaveCcSetting('attachment_send', v)}
+            />
+          </SettingRow>
+          <SettingRow label="空闲超时" description="Agent 空闲多久后自动断开（分钟）">
+            <CompactNum
+              value={ccSettings.idle_timeout_mins}
+              onChange={(v) => patchCcSettings({ idle_timeout_mins: v })}
+              onSave={() =>
+                void autoSaveCcSetting('idle_timeout_mins', ccSettings.idle_timeout_mins)
+              }
+              min={0}
+            />
+          </SettingRow>
+          <SettingRow label="日志等级" description="cc-connect 日志输出级别">
+            <SettingsSelect
+              value={ccSettings.log_level}
+              options={CC_LOG_LEVEL_OPTIONS}
+              onChange={(v) => void autoSaveCcSetting('log_level', v)}
+            />
+          </SettingRow>
+          <SettingRow label="显示 Thinking 消息" description="在对话中展示 Agent 的思考过程">
+            <SettingsToggle
+              enabled={ccSettings.thinking_messages}
+              onChange={(v) => void autoSaveCcSetting('thinking_messages', v)}
+            />
+          </SettingRow>
+          <SettingRow label="显示工具进度" description="在对话中展示 Agent 调用工具的详细信息">
+            <SettingsToggle
+              enabled={ccSettings.tool_messages}
+              onChange={(v) => void autoSaveCcSetting('tool_messages', v)}
+            />
+          </SettingRow>
+          <SettingRow label="启用流式预览" description="实时预览 Agent 的流式输出内容">
+            <SettingsToggle
+              enabled={ccSettings.stream_preview_enabled}
+              onChange={(v) => void autoSaveCcSetting('stream_preview_enabled', v)}
+            />
+          </SettingRow>
+          <SettingRow label="Thinking 最大长度" description="截断展示的 Thinking 消息最大字符数">
+            <CompactNum
+              value={ccSettings.thinking_max_len}
+              onChange={(v) => patchCcSettings({ thinking_max_len: v })}
+              onSave={() => void autoSaveCcSetting('thinking_max_len', ccSettings.thinking_max_len)}
+              min={0}
+            />
+          </SettingRow>
+          <SettingRow label="工具消息最大长度" description="截断展示的工具消息最大字符数">
+            <CompactNum
+              value={ccSettings.tool_max_len}
+              onChange={(v) => patchCcSettings({ tool_max_len: v })}
+              onSave={() => void autoSaveCcSetting('tool_max_len', ccSettings.tool_max_len)}
+              min={0}
+            />
+          </SettingRow>
+          <SettingRow label="预览间隔" description="流式预览刷新间隔（毫秒）">
+            <CompactNum
+              value={ccSettings.stream_preview_interval_ms}
+              onChange={(v) => patchCcSettings({ stream_preview_interval_ms: v })}
+              onSave={() =>
+                void autoSaveCcSetting(
+                  'stream_preview_interval_ms',
+                  ccSettings.stream_preview_interval_ms
+                )
+              }
+              min={100}
+            />
+          </SettingRow>
+          <SettingRow label="频率限制" description="限制时间窗口内发送的最大消息数">
+            <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-muted)]">
+              <CompactNum
+                value={ccSettings.rate_limit_max_messages}
+                onChange={(v) => patchCcSettings({ rate_limit_max_messages: v })}
+                onSave={() => void saveRateLimit()}
+                min={0}
+                className="w-20"
               />
-              <span className="text-xs text-[var(--color-text-secondary)]">显示工具进度</span>
-              <SettingsToggle
-                enabled={ccSettings.stream_preview_enabled}
-                onChange={(value) => patchCcSettings({ stream_preview_enabled: value })}
+              <span>条 /</span>
+              <CompactNum
+                value={ccSettings.rate_limit_window_secs}
+                onChange={(v) => patchCcSettings({ rate_limit_window_secs: v })}
+                onSave={() => void saveRateLimit()}
+                min={1}
+                className="w-20"
               />
-              <span className="text-xs text-[var(--color-text-secondary)]">启用流式预览</span>
-            </div>
-
-            <div className="grid gap-3 md:grid-cols-2">
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  Thinking 最大长度
-                </label>
-                <input
-                  type="number"
-                  min={0}
-                  value={ccSettings.thinking_max_len}
-                  onChange={(event) =>
-                    patchCcSettings({ thinking_max_len: Number(event.target.value) || 0 })
-                  }
-                  className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  工具消息最大长度
-                </label>
-                <input
-                  type="number"
-                  min={0}
-                  value={ccSettings.tool_max_len}
-                  onChange={(event) =>
-                    patchCcSettings({ tool_max_len: Number(event.target.value) || 0 })
-                  }
-                  className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  预览间隔（毫秒）
-                </label>
-                <input
-                  type="number"
-                  min={100}
-                  value={ccSettings.stream_preview_interval_ms}
-                  onChange={(event) =>
-                    patchCcSettings({
-                      stream_preview_interval_ms: Number(event.target.value) || 100,
-                    })
-                  }
-                  className="h-8 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                />
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-medium text-[var(--color-text-secondary)]">
-                  频率限制（条/窗口）
-                </label>
-                <div className="grid grid-cols-2 gap-2">
-                  <input
-                    type="number"
-                    min={0}
-                    value={ccSettings.rate_limit_max_messages}
-                    onChange={(event) =>
-                      patchCcSettings({ rate_limit_max_messages: Number(event.target.value) || 0 })
-                    }
-                    className="h-8 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                    placeholder="数量"
-                  />
-                  <input
-                    type="number"
-                    min={1}
-                    value={ccSettings.rate_limit_window_secs}
-                    onChange={(event) =>
-                      patchCcSettings({ rate_limit_window_secs: Number(event.target.value) || 1 })
-                    }
-                    className="h-8 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2 text-xs text-[var(--color-text)]"
-                    placeholder="秒"
-                  />
-                </div>
-              </div>
+              <span>秒</span>
             </div>
+          </SettingRow>
+        </>
+      )}
 
-            <div className="flex items-center gap-3">
-              <Button size="sm" onClick={() => void saveCcSettings()} disabled={ccSettingsSaving}>
-                {ccSettingsSaving ? <Loader2 className="mr-1.5 size-3.5 animate-spin" /> : null}
-                保存运行设置
-              </Button>
-              {ccSettingsMessage ? (
-                <span
-                  className={`text-xs ${
-                    ccSettingsMessage === '已保存' ? 'text-emerald-400' : 'text-red-400'
-                  }`}
-                >
-                  {ccSettingsMessage}
-                </span>
-              ) : null}
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Privacy / Telemetry — only visible when Sentry DSN is baked into the build */}
+      {/* Privacy */}
       {import.meta.env.VITE_SENTRY_DSN && (
         <>
           <SettingsSectionHeader title="隐私" />

package/src/renderer/components/settings/sections/TaskBusSection.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { SettingRow, SettingsSectionHeader, SettingsToggle } from '../components';
+import type { TaskBusConfig } from '@shared/types/team';
+import { Loader2, Radio, Wifi, WifiOff } from 'lucide-react';
+
+export function TaskBusSection(): React.JSX.Element {
+  const [enabled, setEnabled] = useState(false);
+  const [host, setHost] = useState('127.0.0.1');
+  const [port, setPort] = useState(6379);
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [connecting, setConnecting] = useState(false);
+  const [connected, setConnected] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/settings/task-bus')
+      .then((r) => r.json())
+      .then((data: TaskBusConfig) => {
+        setEnabled(data.enabled);
+        if (data.redis) {
+          setHost(data.redis.host ?? '127.0.0.1');
+          setPort(data.redis.port ?? 6379);
+          setPassword(data.redis.password ?? '');
+        }
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const save = async (connectRedis = false) => {
+    setMessage(null);
+    if (connectRedis) setConnecting(true);
+    const config: TaskBusConfig = {
+      enabled,
+      redis: { host, port, password: password || undefined },
+    };
+    try {
+      const res = await fetch('/api/settings/task-bus', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+      });
+      const data = await res.json();
+      if (connectRedis) {
+        setConnected(!!data.connected);
+        setMessage(
+          data.connected ? 'Redis 连接成功，分布式派发已启用' : 'Redis 连接失败，仅本地派发'
+        );
+      } else {
+        setConnected(false);
+        setMessage(enabled ? '已开启，指令已注入到团队工作目录' : '已关闭');
+      }
+    } catch (err) {
+      setMessage(`操作失败: ${err}`);
+    } finally {
+      setConnecting(false);
+    }
+  };
+
+  const toggle = (value: boolean) => {
+    setEnabled(value);
+    const config: TaskBusConfig = {
+      enabled: value,
+      redis: { host, port, password: password || undefined },
+    };
+    fetch('/api/settings/task-bus', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(config),
+    })
+      .then((r) => r.json())
+      .then(() => setMessage(value ? '已开启，指令已注入到团队工作目录' : '已关闭'))
+      .catch(() => setMessage('操作失败'));
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 size={16} className="animate-spin text-[var(--color-text-muted)]" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SettingsSectionHeader title="任务总线" icon={<Radio size={12} />} />
+
+      <SettingRow
+        label="启用任务总线"
+        description="开启后自动为所有团队注入跨团队任务派发指令到 CLAUDE.md"
+      >
+        <SettingsToggle enabled={enabled} onChange={toggle} />
+      </SettingRow>
+
+      {/* Redis */}
+      <SettingRow label="Redis" description="可选，配置后启用跨主机分布式派发">
+        <div className="flex items-center gap-2">
+          {connected ? (
+            <span className="flex items-center gap-1 text-xs text-emerald-500">
+              <Wifi size={12} />
+              已连接
+            </span>
+          ) : enabled ? (
+            <span className="flex items-center gap-1 text-xs text-[var(--color-text-muted)]">
+              <WifiOff size={12} />
+              本地模式
+            </span>
+          ) : null}
+        </div>
+      </SettingRow>
+
+      {enabled && (
+        <div className="border-b pb-4" style={{ borderColor: 'var(--color-border-subtle)' }}>
+          <div className="space-y-3 px-1 pt-2">
+            <div className="flex gap-3">
+              <div className="flex-1">
+                <label className="mb-1 block text-xs text-[var(--color-text-muted)]">主机</label>
+                <input
+                  type="text"
+                  value={host}
+                  onChange={(e) => setHost(e.target.value)}
+                  className="w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-2.5 py-1.5 text-sm outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/30"
+                  placeholder="127.0.0.1"
+                />
+              </div>
+              <div className="w-24">
+                <label className="mb-1 block text-xs text-[var(--color-text-muted)]">端口</label>
+                <input
+                  type="number"
+                  value={port}
+                  onChange={(e) => setPort(Number(e.target.value))}
+                  className="w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-2.5 py-1.5 text-sm outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/30"
+                  placeholder="6379"
+                />
+              </div>
+            </div>
+            <div>
+              <label className="mb-1 block text-xs text-[var(--color-text-muted)]">密码</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] px-2.5 py-1.5 text-sm outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/30"
+                placeholder="可选"
+              />
+            </div>
+            <div className="flex items-center gap-3 pt-1">
+              <Button
+                size="sm"
+                onClick={() => save(true)}
+                disabled={connecting}
+                className="gap-1.5"
+              >
+                {connecting && <Loader2 size={12} className="animate-spin" />}
+                {connecting ? '连接中...' : '测试连接'}
+              </Button>
+              {message && <span className="text-xs text-[var(--color-text-muted)]">{message}</span>}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!enabled && message && (
+        <div
+          className="border-b py-2 text-xs text-[var(--color-text-muted)]"
+          style={{ borderColor: 'var(--color-border-subtle)' }}
+        >
+          {message}
+        </div>
+      )}
+    </div>
+  );
+}