ai-agent-router 0.2.0 → 0.2.2

package/src/app/ide/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import Nav from '../components/Nav';
 import { useToast } from '../components/ToastProvider';
 
@@ -31,7 +31,50 @@ interface ConfigStatus {
     opus?: string;
     default?: string;
     reasoning?: string;
-  }; // 临时配置模型映射
+  };
+  config?: Record<string, unknown>; // 当前配置文件完整内容，非 AAR 时用于展示
+  /** 当前网关地址（来自数据库），用于预览 */
+  currentGatewayAddress?: string;
+  /** 当前网关 API Key（来自数据库，未脱敏），用于预览 */
+  currentGatewayApiKey?: string;
+}
+
+interface OpenCodeStatus {
+  applied: boolean;
+  defaultModel?: string;
+  gatewayAddress?: string;
+  apiKey?: string;
+  lastUpdated?: string | null;
+  backupExists: boolean;
+  matchCurrentGateway?: boolean;
+  routerProvider?: string;
+  tempDefaultModel?: string;
+  providerName?: string;
+  modelsCount?: number;
+  /** 当前磁盘上 opencode.json 的完整内容，用于「生效中」展示 */
+  config?: Record<string, unknown> | null;
+}
+
+interface OpenClawStatus {
+  applied: boolean;
+  defaultModel?: string;
+  defaultFallbacks?: string[];
+  imageModel?: string;
+  imageFallbacks?: string[];
+  gatewayAddress?: string;
+  apiKey?: string;
+  lastUpdated?: string | null;
+  backupExists: boolean;
+  matchCurrentGateway?: boolean;
+  routerProvider?: string;
+  tempDefaultModel?: string;
+  tempDefaultFallbacks?: string[];
+  tempImageModel?: string;
+  tempImageFallbacks?: string[];
+  providerName?: string;
+  modelsCount?: number;
+  /** 当前磁盘上 openclaw.json 的完整内容，用于「生效中」展示 */
+  config?: Record<string, unknown> | null;
 }
 
 interface ModelMappingInput {
@@ -52,6 +95,7 @@ export default function IDEConfigPage() {
   const [reasoningModel, setReasoningModel] = useState('GLM-4.7');
   const [enabled, setEnabled] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
+  const [claudeConfigSubTab, setClaudeConfigSubTab] = useState<'current' | 'preview'>('preview');
   const [applying, setApplying] = useState(false);
   const [restoring, setRestoring] = useState(false);
   const [testing, setTesting] = useState(false);
@@ -60,10 +104,62 @@ export default function IDEConfigPage() {
   const [models, setModels] = useState<Record<string, Model[]>>({});
   const [loading, setLoading] = useState(true);
   const [testResult, setTestResult] = useState<null | any>(null);
+  
+  // OpenCode
+  const [opencodeDefaultModel, setOpencodeDefaultModel] = useState('GLM-4.7');
+  const [opencodeStatus, setOpencodeStatus] = useState<OpenCodeStatus | null>(null);
+  const [opencodeApplying, setOpencodeApplying] = useState(false);
+  const [opencodeRestoring, setOpencodeRestoring] = useState(false);
+  const [opencodeTesting, setOpencodeTesting] = useState(false);
+  const [opencodeSaving, setOpencodeSaving] = useState(false);
+  const [opencodeTestResult, setOpencodeTestResult] = useState<null | any>(null);
+  const [opencodeModels, setOpencodeModels] = useState<Record<string, Model[]>>({});
+  const [opencodePreviewConfig, setOpencodePreviewConfig] = useState<Record<string, unknown> | null>(null);
+  const [opencodePreviewText, setOpencodePreviewText] = useState<string>('');
+  const [opencodePreviewLoading, setOpencodePreviewLoading] = useState(false);
+  const [opencodeConfigSubTab, setOpencodeConfigSubTab] = useState<'current' | 'preview'>('current');
+
+  // OpenClaw
+  const [openclawDefaultModel, setOpenclawDefaultModel] = useState('GLM-4.7');
+  const [openclawDefaultFallbacks, setOpenclawDefaultFallbacks] = useState<string[]>([]);
+  const [openclawImageModel, setOpenclawImageModel] = useState('');
+  const [openclawImageFallbacks, setOpenclawImageFallbacks] = useState<string[]>([]);
+  const [openclawStatus, setOpenclawStatus] = useState<OpenClawStatus | null>(null);
+  const [openclawApplying, setOpenclawApplying] = useState(false);
+  const [openclawRestoring, setOpenclawRestoring] = useState(false);
+  const [openclawTesting, setOpenclawTesting] = useState(false);
+  const [openclawSaving, setOpenclawSaving] = useState(false);
+  const [openclawTestResult, setOpenclawTestResult] = useState<null | any>(null);
+  const [openclawModels, setOpenclawModels] = useState<Record<string, Model[]>>({});
+  const [openclawPreviewConfig, setOpenclawPreviewConfig] = useState<Record<string, unknown> | null>(null);
+  const [openclawPreviewText, setOpenclawPreviewText] = useState<string>('');
+  const [openclawPreviewLoading, setOpenclawPreviewLoading] = useState(false);
+  const [openClawDropdown, setOpenClawDropdown] = useState<'default' | 'defaultFallbacks' | 'image' | 'imageFallbacks' | null>(null);
+  const [openClawSearch, setOpenClawSearch] = useState('');
+  const [openclawConfigSubTab, setOpenclawConfigSubTab] = useState<'current' | 'preview'>('preview');
+  const openClawDropdownRef = useRef<HTMLDivElement | null>(null);
+
   const { showToast } = useToast();
 
+  const openclawModelsFlat = useMemo(() =>
+    Object.entries(openclawModels).flatMap(([provider, arr]) =>
+      arr.map((m) => ({ ...m, provider } as Model & { provider: string }))
+    ),
+    [openclawModels]
+  );
+  const openclawModelsFiltered = useMemo(() => {
+    const q = openClawSearch.trim().toLowerCase();
+    if (!q) return openclawModelsFlat;
+    return openclawModelsFlat.filter(
+      (m) =>
+        m.name.toLowerCase().includes(q) || m.model_id.toLowerCase().includes(q)
+    );
+  }, [openclawModelsFlat, openClawSearch]);
+
   // Abort controller for cancelling test
   const abortControllerRef = useRef<AbortController | null>(null);
+  const opencodeAbortRef = useRef<AbortController | null>(null);
+  const openclawAbortRef = useRef<AbortController | null>(null);
 
   const loadStatus = async () => {
     try {
@@ -100,11 +196,226 @@ export default function IDEConfigPage() {
     }
   };
 
+  const loadOpenCodeStatus = async () => {
+    try {
+      const res = await fetch('/api/ide/opencode/status');
+      const data: OpenCodeStatus = await res.json();
+      setOpencodeStatus(data);
+      const toUse = (data.matchCurrentGateway === false && data.tempDefaultModel)
+        ? data.tempDefaultModel
+        : data.defaultModel;
+      if (toUse) setOpencodeDefaultModel(toUse);
+      else if (data.defaultModel) setOpencodeDefaultModel(data.defaultModel);
+    } catch (error) {
+      console.error('Failed to load OpenCode status:', error);
+    }
+  };
+
+  const loadOpenCodeModels = async () => {
+    try {
+      const res = await fetch('/api/ide/opencode/available-models');
+      const data = await res.json();
+      setOpencodeModels(data.models || {});
+    } catch (error) {
+      console.error('Failed to load OpenCode models:', error);
+    }
+  };
+
+  const loadOpenClawStatus = async () => {
+    try {
+      const res = await fetch('/api/ide/openclaw/status');
+      const data: OpenClawStatus = await res.json();
+      setOpenclawStatus(data);
+
+      // Determine which values to use (temp or applied)
+      const useTemp = data.matchCurrentGateway === false && data.tempDefaultModel;
+
+      if (useTemp) {
+        setOpenclawDefaultModel(data.tempDefaultModel || 'GLM-4.7');
+        setOpenclawDefaultFallbacks(data.tempDefaultFallbacks || []);
+        setOpenclawImageModel(data.tempImageModel || '');
+        setOpenclawImageFallbacks(data.tempImageFallbacks || []);
+      } else {
+        setOpenclawDefaultModel(data.defaultModel || 'GLM-4.7');
+        setOpenclawDefaultFallbacks(data.defaultFallbacks || []);
+        setOpenclawImageModel(data.imageModel || '');
+        setOpenclawImageFallbacks(data.imageFallbacks || []);
+      }
+    } catch (error) {
+      console.error('Failed to load OpenClaw status:', error);
+    }
+  };
+
+  const loadOpenClawModels = async () => {
+    try {
+      const res = await fetch('/api/ide/openclaw/available-models');
+      const data = await res.json();
+      setOpenclawModels(data.models || {});
+    } catch (error) {
+      console.error('Failed to load OpenClaw models:', error);
+    }
+  };
+
   useEffect(() => {
     loadStatus();
     loadModels();
+    loadOpenCodeStatus();
+    loadOpenCodeModels();
+    loadOpenClawStatus();
+    loadOpenClawModels();
   }, []);
 
+  // OpenCode Preview
+  useEffect(() => {
+    if (activeTab !== 'opencode' || !opencodeDefaultModel) {
+      setOpencodePreviewConfig(null);
+      setOpencodePreviewText('');
+      return;
+    }
+    let cancelled = false;
+    setOpencodePreviewLoading(true);
+    setOpencodePreviewConfig(null);
+    setOpencodePreviewText('');
+    fetch(`/api/ide/opencode/preview?default_model=${encodeURIComponent(opencodeDefaultModel)}`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (!cancelled && data.config) {
+          setOpencodePreviewConfig(data.config);
+          setOpencodePreviewText(JSON.stringify(data.config, null, 2));
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setOpencodePreviewConfig(null);
+        if (!cancelled) setOpencodePreviewText('');
+      })
+      .finally(() => {
+        if (!cancelled) setOpencodePreviewLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeTab, opencodeDefaultModel]);
+
+  // OpenClaw Preview
+  useEffect(() => {
+    if (activeTab !== 'openclaw' || !openclawDefaultModel) {
+      setOpenclawPreviewConfig(null);
+      setOpenclawPreviewText('');
+      return;
+    }
+    let cancelled = false;
+    setOpenclawPreviewLoading(true);
+    setOpenclawPreviewConfig(null);
+    setOpenclawPreviewText('');
+
+    const params = new URLSearchParams({
+      default_model: openclawDefaultModel,
+      default_fallbacks: openclawDefaultFallbacks.join(','),
+    });
+    if (openclawImageModel) {
+      params.set('image_model', openclawImageModel);
+      if (openclawImageFallbacks.length > 0) {
+        params.set('image_fallbacks', openclawImageFallbacks.join(','));
+      }
+    }
+    fetch(`/api/ide/openclaw/preview?${params.toString()}`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (!cancelled && data.config) {
+          setOpenclawPreviewConfig(data.config);
+          setOpenclawPreviewText(JSON.stringify(data.config, null, 2));
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setOpenclawPreviewConfig(null);
+        if (!cancelled) setOpenclawPreviewText('');
+      })
+      .finally(() => {
+        if (!cancelled) setOpenclawPreviewLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeTab, openclawDefaultModel, openclawDefaultFallbacks, openclawImageModel, openclawImageFallbacks]);
+
+  useEffect(() => {
+    if (openClawDropdown == null) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (openClawDropdownRef.current && !openClawDropdownRef.current.contains(e.target as Node)) {
+        setOpenClawDropdown(null);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, [openClawDropdown]);
+
+  // 同步 Claude 下拉框默认值：确保状态值在可用模型列表中
+  useEffect(() => {
+    const allModels = Object.values(models).flat();
+    if (allModels.length === 0) return;
+    
+    const modelIds = allModels.map(m => m.model_id);
+    const firstModelId = allModels[0].model_id;
+    
+    // 如果当前状态值不在可用模型列表中，更新为第一个可用模型
+    if (!modelIds.includes(haikuModel)) {
+      setHaikuModel(firstModelId);
+    }
+    if (!modelIds.includes(sonnetModel)) {
+      setSonnetModel(firstModelId);
+    }
+    if (!modelIds.includes(opusModel)) {
+      setOpusModel(firstModelId);
+    }
+    if (!modelIds.includes(defaultModel)) {
+      setDefaultModel(firstModelId);
+    }
+    if (!modelIds.includes(reasoningModel)) {
+      setReasoningModel(firstModelId);
+    }
+  }, [models]);
+
+  // 同步 OpenCode 下拉框默认值
+  useEffect(() => {
+    const allModels = Object.values(opencodeModels).flat();
+    if (allModels.length === 0) return;
+    
+    const modelIds = allModels.map(m => m.model_id);
+    const firstModelId = allModels[0].model_id;
+    
+    if (!modelIds.includes(opencodeDefaultModel)) {
+      setOpencodeDefaultModel(firstModelId);
+    }
+  }, [opencodeModels]);
+
+  // 同步 OpenClaw 下拉框默认值
+  useEffect(() => {
+    const allModels = Object.values(openclawModels).flat();
+    if (allModels.length === 0) return;
+    
+    const modelIds = allModels.map(m => m.model_id);
+    const firstModelId = allModels[0].model_id;
+    
+    if (!modelIds.includes(openclawDefaultModel)) {
+      setOpenclawDefaultModel(firstModelId);
+    }
+    // 过滤无效的 fallback 模型
+    const validFallbacks = openclawDefaultFallbacks.filter(id => modelIds.includes(id));
+    if (validFallbacks.length !== openclawDefaultFallbacks.length) {
+      setOpenclawDefaultFallbacks(validFallbacks);
+    }
+    // 检查 image model
+    if (openclawImageModel && !modelIds.includes(openclawImageModel)) {
+      setOpenclawImageModel('');
+    }
+    // 过滤无效的 image fallback 模型
+    const validImageFallbacks = openclawImageFallbacks.filter(id => modelIds.includes(id));
+    if (validImageFallbacks.length !== openclawImageFallbacks.length) {
+      setOpenclawImageFallbacks(validImageFallbacks);
+    }
+  }, [openclawModels]);
+
+  // Claude Handlers
   const handleApply = async () => {
     setApplying(true);
     try {
@@ -145,6 +456,7 @@ export default function IDEConfigPage() {
       
       if (data.success) {
         showToast('配置已还原', 'success');
+        setClaudeConfigSubTab('current');
         await loadStatus();
       } else {
         showToast('还原失败: ' + (data.error || '未知错误'), 'error');
@@ -234,6 +546,228 @@ export default function IDEConfigPage() {
     }
   };
 
+  // OpenCode Handlers
+  const opencodeEnabled = opencodeStatus?.applied && opencodeStatus?.routerProvider === 'aar';
+
+  const handleOpenCodeApply = async () => {
+    setOpencodeApplying(true);
+    try {
+      const res = await fetch('/api/ide/opencode/apply', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          default_model: opencodeDefaultModel,
+          ...(opencodePreviewText.trim() ? { config: opencodePreviewText } : {}),
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        showToast(data.message || 'OpenCode 配置应用成功', 'success');
+        await loadOpenCodeStatus();
+      } else {
+        showToast('应用失败: ' + (data.error || '未知错误'), 'error');
+      }
+    } catch (error) {
+      console.error('Failed to apply OpenCode config:', error);
+      showToast('应用失败: 网络错误', 'error');
+    } finally {
+      setOpencodeApplying(false);
+    }
+  };
+
+  const handleOpenCodeRestore = async () => {
+    setOpencodeRestoring(true);
+    try {
+      const res = await fetch('/api/ide/opencode/restore', { method: 'POST' });
+      const data = await res.json();
+      if (data.success) {
+        showToast('OpenCode 配置已还原', 'success');
+        setOpencodeConfigSubTab('current');
+        await loadOpenCodeStatus();
+      } else {
+        showToast('还原失败: ' + (data.error || '未知错误'), 'error');
+      }
+    } catch (error) {
+      console.error('Failed to restore OpenCode config:', error);
+      showToast('还原失败: 网络错误', 'error');
+    } finally {
+      setOpencodeRestoring(false);
+    }
+  };
+
+  const handleOpenCodeTest = async () => {
+    if (opencodeAbortRef.current) {
+      opencodeAbortRef.current.abort();
+      opencodeAbortRef.current = null;
+    }
+    opencodeAbortRef.current = new AbortController();
+    setOpencodeTesting(true);
+    setOpencodeTestResult(null);
+    try {
+      const res = await fetch('/api/ide/opencode/test', { signal: opencodeAbortRef.current.signal });
+      const data = await res.json();
+      setOpencodeTestResult(data);
+      if (data.success) showToast('OpenCode 配置测试通过', 'success');
+      else showToast('配置验证失败: ' + (data.error || data.suggestion || '请检查配置'), 'error');
+    } catch (err: any) {
+      if (err.name === 'AbortError') showToast('测试已取消', 'info');
+      else {
+        showToast('测试失败: 网络错误', 'error');
+        setOpencodeTestResult({ error: 'Network error' });
+      }
+    } finally {
+      if (opencodeAbortRef.current?.signal.aborted === false) opencodeAbortRef.current = null;
+      setOpencodeTesting(false);
+    }
+  };
+
+  const handleOpenCodeSave = async () => {
+    setOpencodeSaving(true);
+    try {
+      const res = await fetch('/api/ide/opencode/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          default_model: opencodeDefaultModel,
+          ...(opencodePreviewText.trim() ? { config: opencodePreviewText } : {}),
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        showToast(data.saveType === 'temp' ? '配置已保存（临时）' : '配置已更新到 OpenCode', 'success');
+        await loadOpenCodeStatus();
+      } else {
+        showToast('保存失败: ' + (data.error || '未知错误'), 'error');
+      }
+    } catch (error) {
+      console.error('Failed to save OpenCode config:', error);
+      showToast('保存失败: 网络错误', 'error');
+    } finally {
+      setOpencodeSaving(false);
+    }
+  };
+
+  const handleOpenCodeCancelTest = () => {
+    if (opencodeAbortRef.current) {
+      opencodeAbortRef.current.abort();
+      opencodeAbortRef.current = null;
+    }
+  };
+
+  // OpenClaw Handlers
+  const openclawEnabled = openclawStatus?.applied && openclawStatus?.routerProvider === 'aar';
+
+  const handleOpenClawApply = async () => {
+    setOpenclawApplying(true);
+    try {
+      const res = await fetch('/api/ide/openclaw/apply', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          default_model: openclawDefaultModel,
+          default_fallbacks: openclawDefaultFallbacks,
+          image_model: openclawImageModel || undefined,
+          image_fallbacks: openclawImageFallbacks,
+          ...(openclawPreviewText.trim() ? { config: openclawPreviewText } : {}),
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        showToast(data.message || 'OpenClaw 配置应用成功', 'success');
+        await loadOpenClawStatus();
+      } else {
+        showToast('应用失败: ' + (data.error || '未知错误'), 'error');
+      }
+    } catch (error) {
+      console.error('Failed to apply OpenClaw config:', error);
+      showToast('应用失败: 网络错误', 'error');
+    } finally {
+      setOpenclawApplying(false);
+    }
+  };
+
+  const handleOpenClawRestore = async () => {
+    setOpenclawRestoring(true);
+    try {
+      const res = await fetch('/api/ide/openclaw/restore', { method: 'POST' });
+      const data = await res.json();
+      if (data.success) {
+        showToast('OpenClaw 配置已还原', 'success');
+        setOpenclawConfigSubTab('current');
+        await loadOpenClawStatus();
+      } else {
+        showToast('还原失败: ' + (data.error || '未知错误'), 'error');
+      }
+    } catch (error) {
+      console.error('Failed to restore OpenClaw config:', error);
+      showToast('还原失败: 网络错误', 'error');
+    } finally {
+      setOpenclawRestoring(false);
+    }
+  };
+
+  const handleOpenClawTest = async () => {
+    if (openclawAbortRef.current) {
+      openclawAbortRef.current.abort();
+      openclawAbortRef.current = null;
+    }
+    openclawAbortRef.current = new AbortController();
+    setOpenclawTesting(true);
+    setOpenclawTestResult(null);
+    try {
+      const res = await fetch('/api/ide/openclaw/test', { signal: openclawAbortRef.current.signal });
+      const data = await res.json();
+      setOpenclawTestResult(data);
+      if (data.success) showToast('OpenClaw 配置测试通过', 'success');
+      else showToast('配置验证失败: ' + (data.error || data.suggestion || '请检查配置'), 'error');
+    } catch (err: any) {
+      if (err.name === 'AbortError') showToast('测试已取消', 'info');
+      else {
+        showToast('测试失败: 网络错误', 'error');
+        setOpenclawTestResult({ error: 'Network error' });
+      }
+    } finally {
+      if (openclawAbortRef.current?.signal.aborted === false) openclawAbortRef.current = null;
+      setOpenclawTesting(false);
+    }
+  };
+
+  const handleOpenClawSave = async () => {
+    setOpenclawSaving(true);
+    try {
+      const res = await fetch('/api/ide/openclaw/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          default_model: openclawDefaultModel,
+          default_fallbacks: openclawDefaultFallbacks,
+          image_model: openclawImageModel || undefined,
+          image_fallbacks: openclawImageFallbacks,
+          ...(openclawPreviewText.trim() ? { config: openclawPreviewText } : {}),
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        showToast(data.saveType === 'temp' ? '配置已保存（临时）' : '配置已更新到 OpenClaw', 'success');
+        await loadOpenClawStatus();
+      } else {
+        showToast('保存失败: ' + (data.error || '未知错误'), 'error');
+      }
+    } catch (error) {
+      console.error('Failed to save OpenClaw config:', error);
+      showToast('保存失败: 网络错误', 'error');
+    } finally {
+      setOpenclawSaving(false);
+    }
+  };
+
+  const handleOpenClawCancelTest = () => {
+    if (openclawAbortRef.current) {
+      openclawAbortRef.current.abort();
+      openclawAbortRef.current = null;
+    }
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-slate-50/80">
@@ -257,7 +791,7 @@ export default function IDEConfigPage() {
               v1.0
             </span>
           </div>
-          <p className="text-sm text-slate-500">配置 Claude Code 和 Cursor 的模型代理设置</p>
+          <p className="text-sm text-slate-500">配置 Claude Code、OpenCode 和 OpenClaw 的模型代理设置</p>
         </div>
 
         <div className="bg-white/60 backdrop-blur-md rounded-xl border border-slate-200/50 shadow-sm">
@@ -277,12 +811,38 @@ export default function IDEConfigPage() {
                 )}
               </button>
               <button
-                onClick={() => setActiveTab('cursor')}
+                onClick={() => setActiveTab('opencode')}
+                className={`relative px-4 py-3.5 text-sm font-medium transition-all duration-200 ${
+                  activeTab === 'opencode'
+                    ? 'text-slate-900'
+                    : 'text-slate-400 hover:text-slate-600'
+                }`}
+              >
+                OpenCode
+                {activeTab === 'opencode' && (
+                  <span className="absolute bottom-0 left-4 right-4 h-[2px] bg-slate-900 rounded-full"></span>
+                )}
+              </button>
+              <button
+                onClick={() => setActiveTab('openclaw')}
+                className={`relative px-4 py-3.5 text-sm font-medium transition-all duration-200 ${
+                  activeTab === 'openclaw'
+                    ? 'text-slate-900'
+                    : 'text-slate-400 hover:text-slate-600'
+                }`}
+              >
+                OpenClaw
+                {activeTab === 'openclaw' && (
+                  <span className="absolute bottom-0 left-4 right-4 h-[2px] bg-slate-900 rounded-full"></span>
+                )}
+              </button>
+              <button
+                onClick={() => setActiveTab('picoclaw')}
                 disabled
                 className="relative px-4 py-3.5 text-sm font-medium text-slate-300 disabled:cursor-not-allowed"
               >
                 <div className="flex items-center gap-2">
-                  Cursor
+                  PicoClaw
                   <span className="px-2 py-0.5 text-[10px] font-medium text-slate-400 bg-slate-100/60 rounded-full border border-slate-200/50">
                     即将推出
                   </span>
@@ -316,13 +876,13 @@ export default function IDEConfigPage() {
                         <span className="text-sm font-medium text-slate-700">
                           {status.applied ? '已配置' : '未配置'}
                         </span>
-                        {status.applied && status.matchCurrentGateway !== undefined && (
+                        {status.applied && status.routerProvider === 'aar' && status.matchCurrentGateway !== undefined && (
                           <span className={`inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full border ${
                             status.matchCurrentGateway
                               ? 'bg-emerald-50/80 text-emerald-700 border-emerald-200/60'
                               : 'bg-amber-50/80 text-amber-700 border-amber-200/60'
                           }`}>
-                            {status.matchCurrentGateway ? '匹配当前网关' : '不匹配'}
+                            {status.matchCurrentGateway ? '匹配配置' : '不匹配'}
                           </span>
                         )}
                       </div>
@@ -455,15 +1015,11 @@ export default function IDEConfigPage() {
                   </div>
                 </div>
 
-                <div className="grid grid-cols-3 gap-3 pt-1">
+                <div className={`grid gap-3 pt-1 ${status?.backupExists ? 'grid-cols-3' : 'grid-cols-2'}`}>
                   <button
-                    onClick={enabled ? handleRestore : handleApply}
-                    disabled={applying || restoring}
-                    className={`w-full px-4 py-2.5 text-xs font-medium rounded-lg border transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 ${
-                      enabled
-                        ? 'bg-white border-slate-200/80 text-slate-700 hover:border-slate-300 hover:bg-slate-50'
-                        : 'bg-slate-900 border-slate-900 text-white hover:bg-slate-800'
-                    }`}
+                    onClick={handleApply}
+                    disabled={applying}
+                    className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-slate-900 bg-slate-900 text-white hover:bg-slate-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                   >
                     {applying ? (
                       <>
@@ -471,24 +1027,43 @@ export default function IDEConfigPage() {
                           <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
                           <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                         </svg>
-                        {enabled ? '还原中' : '应用中'}
+                        应用中
                       </>
                     ) : (
                       <>
-                        {enabled ? (
-                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                          </svg>
-                        ) : (
-                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                          </svg>
-                        )}
-                        {enabled ? '还原配置' : '应用配置'}
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                        {enabled ? '更新配置' : '应用配置'}
                       </>
                     )}
                   </button>
 
+                  {status?.backupExists && (
+                    <button
+                      onClick={handleRestore}
+                      disabled={restoring}
+                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-slate-200/80 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                      {restoring ? (
+                        <>
+                          <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                          还原中
+                        </>
+                      ) : (
+                        <>
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                          </svg>
+                          还原配置
+                        </>
+                      )}
+                    </button>
+                  )}
+
                   {testing ? (
                     <button
                       onClick={handleCancelTest}
@@ -511,57 +1086,7 @@ export default function IDEConfigPage() {
                       测试配置
                     </button>
                   )}
-
-                  {enabled ? (
-                    <button
-                      onClick={handleSave}
-                      disabled={saving}
-                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-emerald-200/80 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-                    >
-                      {saving ? (
-                        <>
-                          <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                          </svg>
-                          保存中
-                        </>
-                      ) : (
-                        <>
-                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
-                            <polyline points="17 21 17 13 7 13 7 21" />
-                          </svg>
-                          保存配置
-                        </>
-                      )}
-                    </button>
-                  ) : (
-                    <button
-                      onClick={handleSave}
-                      disabled={saving}
-                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-indigo-200/80 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-                    >
-                      {saving ? (
-                        <>
-                          <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                          </svg>
-                          保存中
-                        </>
-                      ) : (
-                        <>
-                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
-                            <polyline points="17 21 17 13 7 13 7 21" />
-                          </svg>
-                          保存配置
-                        </>
-                      )}
-                    </button>
-                  )}
-                </div>
+                </div>
 
                 {testResult && (
                   <div className={`rounded-lg border px-4 py-3 ${
@@ -692,46 +1217,421 @@ export default function IDEConfigPage() {
                   </div>
                 )}
 
-                <details className="group">
+                <details className="group" open>
                   <summary className="cursor-pointer text-[11px] text-slate-500 hover:text-slate-700 list-none flex items-center gap-1.5 py-1">
                     <svg className="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                     </svg>
-                    <span>配置预览</span>
+                    <span>配置</span>
                   </summary>
                   <div className="mt-3">
-                    <div className="relative overflow-hidden rounded-lg bg-slate-950 border border-slate-800">
-                      <div className="flex items-center gap-1.5 px-3 py-2 bg-slate-900 border-b border-slate-800">
-                        <div className="flex gap-1.5">
-                          <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
-                          <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
-                          <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                    <div className="flex border border-slate-200 rounded-t-lg overflow-hidden bg-slate-100/90">
+                      <button
+                        type="button"
+                        onClick={() => setClaudeConfigSubTab('preview')}
+                        className={`flex-1 px-4 py-2.5 text-[11px] transition-all ${
+                          claudeConfigSubTab === 'preview'
+                            ? 'bg-white text-slate-800 font-semibold shadow-sm'
+                            : 'text-slate-500 font-medium hover:bg-slate-200/80 hover:text-slate-600'
+                        }`}
+                      >
+                        预览
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setClaudeConfigSubTab('current')}
+                        className={`flex-1 px-4 py-2.5 text-[11px] transition-all ${
+                          claudeConfigSubTab === 'current'
+                            ? 'bg-white text-slate-800 font-semibold shadow-sm'
+                            : 'text-slate-500 font-medium hover:bg-slate-200/80 hover:text-slate-600'
+                        }`}
+                      >
+                        生效中
+                      </button>
+                    </div>
+                    <div className="relative overflow-hidden rounded-b-lg bg-slate-950 border border-slate-200 border-t-0">
+                      {claudeConfigSubTab === 'preview' ? (
+                        <>
+                          <div className="flex items-center gap-1.5 px-3 py-2 bg-slate-900 border-b border-slate-800">
+                            <div className="flex gap-1.5">
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                            </div>
+                            <span className="text-[10px] font-medium text-slate-400 ml-2">settings.json（仅当前网关相关，应用时会合并进现有配置）</span>
+                          </div>
+                          <pre className="w-full min-h-[12rem] p-3.5 text-[10px] text-slate-300 font-mono overflow-auto bg-slate-950 max-h-96 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-900 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full">
+                            {JSON.stringify(
+                              {
+                                router_provider: 'aar',
+                                env: {
+                                  ANTHROPIC_AUTH_TOKEN: status?.currentGatewayApiKey ?? 'your-gateway-api-key',
+                                  ANTHROPIC_BASE_URL: status?.currentGatewayAddress ?? 'http://localhost:1357',
+                                  ANTHROPIC_DEFAULT_HAIKU_MODEL: haikuModel,
+                                  ANTHROPIC_DEFAULT_SONNET_MODEL: sonnetModel,
+                                  ANTHROPIC_DEFAULT_OPUS_MODEL: opusModel,
+                                  ANTHROPIC_MODEL: defaultModel,
+                                  ANTHROPIC_REASONING_MODEL: reasoningModel,
+                                  API_TIMEOUT_MS: '3000000',
+                                  CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: 1,
+                                  hasCompletedOnboarding: true,
+                                },
+                              },
+                              null,
+                              2
+                            )}
+                          </pre>
+                        </>
+                      ) : (
+                        <>
+                          <div className="flex items-center gap-1.5 px-3 py-2 bg-slate-900 border-b border-slate-800">
+                            <div className="flex gap-1.5">
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                            </div>
+                            <span className="text-[10px] font-medium text-slate-400 ml-2">settings.json（当前磁盘内容，还原后即更新）</span>
+                          </div>
+                          {status?.config != null ? (
+                            <pre className="w-full min-h-[12rem] p-3.5 text-[10px] text-slate-300 font-mono overflow-auto bg-slate-950 max-h-96 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-900 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full">
+                              {JSON.stringify(status.config, null, 2)}
+                            </pre>
+                          ) : (
+                            <div className="p-3.5 text-[10px] text-slate-500 font-mono">暂无配置文件</div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </details>
+
+                <div className="rounded-lg border border-slate-200/50 bg-slate-50/60 px-4 py-3">
+                  <div className="flex items-center gap-2 mb-2.5">
+                    <svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <h3 className="text-xs font-semibold text-slate-700">使用说明</h3>
+                  </div>
+                  <ul className="space-y-1.5 text-[10px] text-slate-600">
+                    <li className="flex gap-2">
+                      <span className="text-slate-400">1.</span>
+                      <span>「生效中」为当前磁盘上的 settings.json；「预览」为应用后将写入的内容</span>
+                    </li>
+                    <li className="flex gap-2">
+                      <span className="text-slate-400">2.</span>
+                      <span>为每个模型类别选择路由模型后，在「预览」中查看，点击「应用配置」或「更新配置」写入</span>
+                    </li>
+                    <li className="flex gap-2">
+                      <span className="text-slate-400">3.</span>
+                      <span>配置文件位于 ~/.claude/settings.json</span>
+                    </li>
+                    <li className="flex gap-2">
+                      <span className="text-slate-400">4.</span>
+                      <span>若已应用过 AAR，会显示「更新配置」；有备份时「还原配置」可恢复，还原后请在「生效中」查看</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'opencode' && (
+              <div className="space-y-6">
+                {opencodeStatus && (
+                  <div className="flex items-center justify-between py-3 px-4 bg-white/60 rounded-lg border border-slate-200/50">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-6 h-6 rounded-full flex items-center justify-center ${
+                        opencodeStatus.applied
+                          ? 'bg-emerald-100 text-emerald-600'
+                          : 'bg-slate-100 text-slate-400'
+                      }`}>
+                        {opencodeStatus.applied ? (
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                          </svg>
+                        ) : (
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01" />
+                          </svg>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2.5">
+                        <span className="text-sm font-medium text-slate-700">
+                          {opencodeStatus.applied ? '已配置' : '未配置'}
+                        </span>
+                        {opencodeStatus.applied && opencodeStatus.matchCurrentGateway !== undefined && (
+                          <span className={`inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full border ${
+                            opencodeStatus.matchCurrentGateway
+                              ? 'bg-emerald-50/80 text-emerald-700 border-emerald-200/60'
+                              : 'bg-amber-50/80 text-amber-700 border-amber-200/60'
+                          }`}>
+                            {opencodeStatus.matchCurrentGateway ? '匹配当前网关' : '不匹配'}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {opencodeStatus.lastUpdated && (
+                      <div className="text-[11px] text-slate-400 font-mono">
+                        {new Date(opencodeStatus.lastUpdated).toLocaleString('zh-CN', {
+                          month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'
+                        })}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                <div>
+                  <h2 className="text-[11px] font-medium text-slate-400 mb-5">默认模型</h2>
+                  <div className="group relative bg-gradient-to-br from-white/50 to-transparent hover:from-slate-50/60 rounded-xl border border-slate-200/50 p-4 transition-all duration-300 hover:border-slate-300/60 hover:shadow-sm">
+                    <label htmlFor="opencode-default-model" className="cursor-pointer">
+                      <div className="flex items-center gap-2.5 mb-2.5">
+                        <div className="w-7 h-7 rounded-lg bg-slate-100/80 text-slate-600 flex items-center justify-center">
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                          </svg>
+                        </div>
+                        <span className="text-[11px] font-medium text-slate-700">OpenCode 使用的默认模型</span>
+                      </div>
+                      <div className="relative">
+                        <select
+                          id="opencode-default-model"
+                          value={opencodeDefaultModel}
+                          onChange={(e) => setOpencodeDefaultModel(e.target.value)}
+                          className="w-full appearance-none rounded-lg border border-slate-200/80 bg-white/90 backdrop-blur-sm px-3 py-2 pr-7 text-[11px] font-medium text-slate-700 shadow-sm transition-all duration-200 hover:border-slate-300/80 hover:bg-white focus:border-slate-400/80 focus:ring-2 focus:ring-slate-200/50 focus:outline-none cursor-pointer"
+                        >
+                          {Object.entries(opencodeModels).map(([provider, providerModels]) => (
+                            <optgroup key={provider} label={provider}>
+                              {providerModels.map((model) => (
+                                <option key={model.id} value={model.model_id}>
+                                  {model.name}
+                                </option>
+                              ))}
+                            </optgroup>
+                          ))}
+                        </select>
+                        <div className="absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none">
+                          <svg className="w-3 h-3 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                          </svg>
                         </div>
-                        <span className="text-[10px] font-medium text-slate-400 ml-2">settings.json</span>
                       </div>
-                      <pre className="p-3.5 text-[10px] text-slate-300 font-mono overflow-x-auto bg-slate-950">
-                        {JSON.stringify(
-                          {
-                            router_provider: 'aar',
-                            env: {
-                              ANTHROPIC_AUTH_TOKEN: status?.apiKey && status.apiKey !== 'your-gateway-api-key'
-                                ? '****' + status.apiKey.slice(-8)
-                                : 'your-gateway-api-key',
-                              ANTHROPIC_BASE_URL: status?.gatewayAddress || 'http://localhost:3000',
-                              ANTHROPIC_DEFAULT_HAIKU_MODEL: haikuModel,
-                              ANTHROPIC_DEFAULT_SONNET_MODEL: sonnetModel,
-                              ANTHROPIC_DEFAULT_OPUS_MODEL: opusModel,
-                              ANTHROPIC_MODEL: defaultModel,
-                              ANTHROPIC_REASONING_MODEL: reasoningModel,
-                              API_TIMEOUT_MS: '3000000',
-                              CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: 1,
-                              hasCompletedOnboarding: true,
-                            },
-                          },
-                          null,
-                          2
+                    </label>
+                  </div>
+                </div>
+
+                <div className={`grid gap-3 pt-1 ${opencodeEnabled ? 'grid-cols-3' : 'grid-cols-2'}`}>
+                  <button
+                    onClick={handleOpenCodeApply}
+                    disabled={opencodeApplying}
+                    className={`w-full px-4 py-2.5 text-xs font-medium rounded-lg border transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 ${
+                      opencodeEnabled
+                        ? 'bg-white border-slate-200/80 text-slate-700 hover:border-slate-300 hover:bg-slate-50'
+                        : 'bg-slate-900 border-slate-900 text-white hover:bg-slate-800'
+                    }`}
+                  >
+                    {opencodeApplying ? (
+                      <>
+                        <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        应用中
+                      </>
+                    ) : (
+                      <>
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                        {opencodeEnabled ? '更新配置' : '应用配置'}
+                      </>
+                    )}
+                  </button>
+
+                  {opencodeEnabled && (
+                    <button
+                      onClick={handleOpenCodeRestore}
+                      disabled={opencodeRestoring}
+                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-slate-200/80 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                      {opencodeRestoring ? (
+                        <>
+                          <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                          还原中
+                        </>
+                      ) : (
+                        <>
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                          </svg>
+                          还原配置
+                        </>
+                      )}
+                    </button>
+                  )}
+
+                  {opencodeTesting ? (
+                    <button
+                      onClick={handleOpenCodeCancelTest}
+                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-amber-200/80 bg-amber-50 text-amber-700 hover:bg-amber-100 transition-all duration-200 flex items-center justify-center gap-2"
+                    >
+                      <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      取消测试
+                    </button>
+                  ) : (
+                    <button
+                      onClick={handleOpenCodeTest}
+                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-slate-200/80 bg-white text-slate-700 hover:bg-slate-50 transition-all duration-200 flex items-center justify-center gap-2"
+                    >
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                      </svg>
+                      测试配置
+                    </button>
+                  )}
+                </div>
+
+                {opencodeTestResult && (
+                  <div className={`rounded-lg border px-4 py-3 ${
+                    opencodeTestResult.success
+                      ? 'bg-emerald-50/60 border-emerald-200/60'
+                      : 'bg-rose-50/60 border-rose-200/60'
+                  }`}>
+                    <div className="flex items-start gap-3">
+                      <div className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${
+                        opencodeTestResult.success ? 'bg-emerald-500' : 'bg-rose-500'
+                      }`}>
+                        {opencodeTestResult.success ? (
+                          <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                          </svg>
+                        ) : (
+                          <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        )}
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-xs font-medium mb-1">
+                          {opencodeTestResult.success ? '配置验证成功' : '配置验证失败'}
+                        </div>
+                        <p className={`text-[11px] ${opencodeTestResult.success ? 'text-emerald-700/80' : 'text-rose-700/80'}`}>
+                          {opencodeTestResult.success
+                            ? (opencodeTestResult.opencodeTest?.message || 'OpenCode 可以正常工作')
+                            : (opencodeTestResult.opencodeTest?.error || opencodeTestResult.error || opencodeTestResult.suggestion || '请检查配置')}
+                        </p>
+                        {opencodeTestResult.checks && (
+                          <div className="mt-3 pt-3 border-t border-white/40">
+                            <div className="grid grid-cols-3 gap-2">
+                              {Object.entries(opencodeTestResult.checks).map(([key, value]) => {
+                                const labels: Record<string, string> = {
+                                  hasBaseUrl: '网关',
+                                  hasApiKey: 'API Key',
+                                  hasDefaultModel: '默认模型',
+                                  hasModels: '模型列表',
+                                };
+                                return (
+                                  <div key={key} className="flex items-center gap-1.5">
+                                    {value ? (
+                                      <svg className="w-3 h-3 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                                      </svg>
+                                    ) : (
+                                      <svg className="w-3 h-3 text-rose-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                                      </svg>
+                                    )}
+                                    <span className="text-[10px] text-slate-600">{labels[key] || key}</span>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
                         )}
-                      </pre>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                <details className="group" open>
+                  <summary className="cursor-pointer text-[11px] text-slate-500 hover:text-slate-700 list-none flex items-center gap-1.5 py-1">
+                    <svg className="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                    <span>配置</span>
+                  </summary>
+                  <div className="mt-3">
+                    <div className="flex border border-slate-200 rounded-t-lg overflow-hidden bg-slate-100/90">
+                      <button
+                        type="button"
+                        onClick={() => setOpencodeConfigSubTab('preview')}
+                        className={`flex-1 px-4 py-2.5 text-[11px] transition-all ${
+                          opencodeConfigSubTab === 'preview'
+                            ? 'bg-white text-slate-800 font-semibold shadow-sm'
+                            : 'text-slate-500 font-medium hover:bg-slate-200/80 hover:text-slate-600'
+                        }`}
+                      >
+                        预览
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setOpencodeConfigSubTab('current')}
+                        className={`flex-1 px-4 py-2.5 text-[11px] transition-all ${
+                          opencodeConfigSubTab === 'current'
+                            ? 'bg-white text-slate-800 font-semibold shadow-sm'
+                            : 'text-slate-500 font-medium hover:bg-slate-200/80 hover:text-slate-600'
+                        }`}
+                      >
+                        生效中
+                      </button>
+                    </div>
+                    <div className="relative overflow-hidden rounded-b-lg bg-slate-950 border border-slate-200 border-t-0">
+                      {opencodeConfigSubTab === 'current' ? (
+                        <>
+                          <div className="flex items-center gap-1.5 px-3 py-2 bg-slate-900 border-b border-slate-800">
+                            <div className="flex gap-1.5">
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                            </div>
+                            <span className="text-[10px] font-medium text-slate-400 ml-2">opencode.json（当前磁盘内容，还原后即更新）</span>
+                          </div>
+                          {opencodeStatus?.config != null ? (
+                            <pre className="w-full min-h-[12rem] p-3.5 text-[10px] text-slate-300 font-mono overflow-auto max-h-96 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-900 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full">
+                              {JSON.stringify(opencodeStatus.config, null, 2)}
+                            </pre>
+                          ) : (
+                            <div className="p-3.5 text-[10px] text-slate-500 font-mono">暂无配置文件</div>
+                          )}
+                        </>
+                      ) : (
+                        <>
+                          <div className="flex items-center gap-1.5 px-3 py-2 bg-slate-900 border-b border-slate-800">
+                            <div className="flex gap-1.5">
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                            </div>
+                            <span className="text-[10px] font-medium text-slate-400 ml-2">opencode.json（应用后将写入的合并结果）</span>
+                          </div>
+                          {opencodePreviewLoading ? (
+                            <div className="p-3.5 text-[10px] text-slate-400 font-mono">加载中...</div>
+                          ) : (
+                            <textarea
+                              className="opencode-preview-textarea w-full min-h-[12rem] p-3.5 text-[10px] text-slate-300 font-mono bg-slate-950 border-0 focus:ring-0 focus:ring-offset-0 focus:outline-none resize-y max-h-96 overflow-y-auto placeholder:text-slate-500
+                                [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-900 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full"
+                              placeholder="暂无预览"
+                              spellCheck={false}
+                              value={opencodePreviewText}
+                              onChange={(e) => setOpencodePreviewText(e.target.value)}
+                            />
+                          )}
+                        </>
+                      )}
                     </div>
                   </div>
                 </details>
@@ -746,36 +1646,605 @@ export default function IDEConfigPage() {
                   <ul className="space-y-1.5 text-[10px] text-slate-600">
                     <li className="flex gap-2">
                       <span className="text-slate-400">1.</span>
-                      <span>为每个模型类别选择对应的路由模型</span>
+                      <span>「生效中」为当前磁盘上的 opencode.json；「预览」为点击应用后将写入的合并结果（含 AAR 网关）</span>
                     </li>
                     <li className="flex gap-2">
                       <span className="text-slate-400">2.</span>
-                      <span>下方配置预览会实时更新</span>
+                      <span>选择默认模型后，在「预览」中查看合并结果，点击「应用配置」写入</span>
                     </li>
                     <li className="flex gap-2">
                       <span className="text-slate-400">3.</span>
-                      <span>点击"保存配置"可临时保存当前选择</span>
+                      <span>配置文件位于 ~/.config/opencode/opencode.json（或 Windows %APPDATA%/opencode）</span>
                     </li>
                     <li className="flex gap-2">
                       <span className="text-slate-400">4.</span>
-                      <span>点击"应用配置"将设置写入 Claude Code</span>
+                      <span>「还原配置」恢复为应用前的备份；还原后请在「生效中」查看当前内容</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'openclaw' && (
+              <div className="space-y-6">
+                {openclawStatus && (
+                  <div className="flex items-center justify-between py-3 px-4 bg-white/60 rounded-lg border border-slate-200/50">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-6 h-6 rounded-full flex items-center justify-center ${
+                        openclawStatus.applied
+                          ? 'bg-emerald-100 text-emerald-600'
+                          : 'bg-slate-100 text-slate-400'
+                      }`}>
+                        {openclawStatus.applied ? (
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                          </svg>
+                        ) : (
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01" />
+                          </svg>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2.5">
+                        <span className="text-sm font-medium text-slate-700">
+                          {openclawStatus.applied ? '已配置' : '未配置'}
+                        </span>
+                        {openclawStatus.applied && openclawStatus.matchCurrentGateway !== undefined && (
+                          <span className={`inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full border ${
+                            openclawStatus.matchCurrentGateway
+                              ? 'bg-emerald-50/80 text-emerald-700 border-emerald-200/60'
+                              : 'bg-amber-50/80 text-amber-700 border-amber-200/60'
+                          }`}>
+                            {openclawStatus.matchCurrentGateway ? '匹配当前网关' : '不匹配'}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {openclawStatus.lastUpdated && (
+                      <div className="text-[11px] text-slate-400 font-mono">
+                        {new Date(openclawStatus.lastUpdated).toLocaleString('zh-CN', {
+                          month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'
+                        })}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4" ref={openClawDropdownRef}>
+                  {/* 默认模型 - 可搜索单选 */}
+                  <div className="bg-gradient-to-br from-white/50 to-transparent rounded-xl border border-slate-200/50 p-4 transition-all duration-300 hover:border-slate-300/60 hover:shadow-sm">
+                    <div className="flex items-center gap-2.5 mb-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-indigo-100/80 text-indigo-600 flex items-center justify-center">
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                        </svg>
+                      </div>
+                      <span className="text-[11px] font-medium text-slate-700">默认模型</span>
+                    </div>
+                    <div className="relative">
+                      <button
+                        type="button"
+                        onClick={() => { setOpenClawSearch(''); setOpenClawDropdown(openClawDropdown === 'default' ? null : 'default'); }}
+                        className="w-full text-left appearance-none rounded-lg border border-slate-200/80 bg-white/90 px-3 py-2 pr-8 text-[11px] font-medium text-slate-700 shadow-sm focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200/50 focus:outline-none cursor-pointer flex items-center justify-between"
+                      >
+                        <span className="truncate">
+                          {openclawModelsFlat.find((m) => m.model_id === openclawDefaultModel)?.name || openclawDefaultModel || '选择模型'}
+                        </span>
+                        <svg className="w-3 h-3 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                      {openClawDropdown === 'default' && (
+                        <div className="absolute z-20 mt-1 w-full rounded-lg border border-slate-200 bg-white shadow-lg py-1 max-h-56 overflow-hidden flex flex-col">
+                          <input
+                            type="text"
+                            placeholder="搜索模型..."
+                            value={openClawSearch}
+                            onChange={(e) => setOpenClawSearch(e.target.value)}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            className="mx-2 mb-1 px-2 py-1.5 text-[11px] border border-slate-200 rounded-md focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 focus:outline-none"
+                          />
+                          <ul className="overflow-y-auto overscroll-contain max-h-44">
+                            {openclawModelsFiltered.map((model) => (
+                              <li key={model.id}>
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    setOpenclawDefaultModel(model.model_id);
+                                    setOpenClawDropdown(null);
+                                    setOpenClawSearch('');
+                                  }}
+                                  className={`w-full text-left px-3 py-2 text-[11px] hover:bg-indigo-50 ${model.model_id === openclawDefaultModel ? 'bg-indigo-100 text-indigo-700 font-medium' : 'text-slate-700'}`}
+                                >
+                                  {model.name}
+                                  <span className="text-slate-400 ml-1">({model.provider})</span>
+                                </button>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                    <p className="text-[10px] text-slate-500 mt-2">主要使用的模型</p>
+                  </div>
+
+                  {/* 默认 Fallback - 可搜索多选，芯片展示，不可重复 */}
+                  <div className="bg-gradient-to-br from-white/50 to-transparent rounded-xl border border-slate-200/50 p-4 transition-all duration-300 hover:border-slate-300/60 hover:shadow-sm">
+                    <div className="flex items-center gap-2.5 mb-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-amber-100/80 text-amber-600 flex items-center justify-center">
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                      </div>
+                      <span className="text-[11px] font-medium text-slate-700">默认 Fallback</span>
+                    </div>
+                    <div className="relative">
+                      <div className="min-h-[38px] rounded-lg border border-slate-200/80 bg-white/90 px-3 py-2 flex flex-wrap gap-1.5 items-center">
+                        {openclawDefaultFallbacks.length === 0 ? (
+                          <span className="text-[11px] text-slate-400">从下方搜索并添加备用模型</span>
+                        ) : (
+                          openclawDefaultFallbacks.map((modelId) => {
+                            const m = openclawModelsFlat.find((x) => x.model_id === modelId);
+                            return (
+                              <span
+                                key={modelId}
+                                className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-amber-100 text-amber-800 text-[10px] font-medium"
+                              >
+                                {m?.name || modelId}
+                                <button
+                                  type="button"
+                                  onClick={() => setOpenclawDefaultFallbacks((prev) => prev.filter((id) => id !== modelId))}
+                                  className="hover:bg-amber-200 rounded p-0.5"
+                                  aria-label="移除"
+                                >
+                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                  </svg>
+                                </button>
+                              </span>
+                            );
+                          })
+                        )}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => { setOpenClawSearch(''); setOpenClawDropdown(openClawDropdown === 'defaultFallbacks' ? null : 'defaultFallbacks'); }}
+                        className="mt-1.5 w-full text-left px-3 py-1.5 text-[11px] text-slate-500 border border-dashed border-slate-200 rounded-md hover:border-amber-300 hover:text-amber-700 hover:bg-amber-50/50"
+                      >
+                        + 搜索并添加 Fallback 模型
+                      </button>
+                      {openClawDropdown === 'defaultFallbacks' && (
+                        <div className="absolute z-20 mt-1 w-full rounded-lg border border-slate-200 bg-white shadow-lg py-1 max-h-56 overflow-hidden flex flex-col">
+                          <input
+                            type="text"
+                            placeholder="搜索模型..."
+                            value={openClawSearch}
+                            onChange={(e) => setOpenClawSearch(e.target.value)}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            className="mx-2 mb-1 px-2 py-1.5 text-[11px] border border-slate-200 rounded-md focus:ring-2 focus:ring-amber-200 focus:border-amber-400 focus:outline-none"
+                          />
+                          <ul className="overflow-y-auto overscroll-contain max-h-44">
+                            {openclawModelsFiltered
+                              .filter((m) => !openclawDefaultFallbacks.includes(m.model_id))
+                              .map((model) => (
+                                <li key={model.id}>
+                                  <button
+                                    type="button"
+                                    onClick={() => {
+                                      setOpenclawDefaultFallbacks((prev) => (prev.includes(model.model_id) ? prev : [...prev, model.model_id]));
+                                      setOpenClawSearch('');
+                                    }}
+                                    className="w-full text-left px-3 py-2 text-[11px] text-slate-700 hover:bg-amber-50"
+                                  >
+                                    {model.name}
+                                    <span className="text-slate-400 ml-1">({model.provider})</span>
+                                  </button>
+                                </li>
+                              ))}
+                            {openclawModelsFiltered.filter((m) => !openclawDefaultFallbacks.includes(m.model_id)).length === 0 && (
+                              <li className="px-3 py-2 text-[11px] text-slate-400">无更多可选或已全部添加</li>
+                            )}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                    <p className="text-[10px] text-slate-500 mt-2">默认模型的备用模型，可多选，不可重复</p>
+                  </div>
+
+                  {/* 视觉模型 - 可搜索单选 */}
+                  <div className="bg-gradient-to-br from-white/50 to-transparent rounded-xl border border-slate-200/50 p-4 transition-all duration-300 hover:border-slate-300/60 hover:shadow-sm">
+                    <div className="flex items-center gap-2.5 mb-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-rose-100/80 text-rose-600 flex items-center justify-center">
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                        </svg>
+                      </div>
+                      <span className="text-[11px] font-medium text-slate-700">视觉模型</span>
+                    </div>
+                    <div className="relative">
+                      <button
+                        type="button"
+                        onClick={() => { setOpenClawSearch(''); setOpenClawDropdown(openClawDropdown === 'image' ? null : 'image'); }}
+                        className="w-full text-left appearance-none rounded-lg border border-slate-200/80 bg-white/90 px-3 py-2 pr-8 text-[11px] font-medium text-slate-700 shadow-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-200/50 focus:outline-none cursor-pointer flex items-center justify-between"
+                      >
+                        <span className="truncate">
+                          {openclawImageModel
+                            ? (openclawModelsFlat.find((m) => m.model_id === openclawImageModel)?.name || openclawImageModel)
+                            : '未设置'}
+                        </span>
+                        <svg className="w-3 h-3 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                      {openClawDropdown === 'image' && (
+                        <div className="absolute z-20 mt-1 w-full rounded-lg border border-slate-200 bg-white shadow-lg py-1 max-h-56 overflow-hidden flex flex-col">
+                          <input
+                            type="text"
+                            placeholder="搜索模型..."
+                            value={openClawSearch}
+                            onChange={(e) => setOpenClawSearch(e.target.value)}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            className="mx-2 mb-1 px-2 py-1.5 text-[11px] border border-slate-200 rounded-md focus:ring-2 focus:ring-rose-200 focus:border-rose-400 focus:outline-none"
+                          />
+                          <ul className="overflow-y-auto overscroll-contain max-h-44">
+                            <li>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  setOpenclawImageModel('');
+                                  setOpenClawDropdown(null);
+                                  setOpenClawSearch('');
+                                }}
+                                className={`w-full text-left px-3 py-2 text-[11px] hover:bg-rose-50 ${!openclawImageModel ? 'bg-rose-100 text-rose-700 font-medium' : 'text-slate-500'}`}
+                              >
+                                未设置
+                              </button>
+                            </li>
+                            {openclawModelsFiltered.map((model) => (
+                              <li key={model.id}>
+                                <button
+                                  type="button"
+                                  onClick={() => {
+                                    setOpenclawImageModel(model.model_id);
+                                    setOpenClawDropdown(null);
+                                    setOpenClawSearch('');
+                                  }}
+                                  className={`w-full text-left px-3 py-2 text-[11px] hover:bg-rose-50 ${model.model_id === openclawImageModel ? 'bg-rose-100 text-rose-700 font-medium' : 'text-slate-700'}`}
+                                >
+                                  {model.name}
+                                  <span className="text-slate-400 ml-1">({model.provider})</span>
+                                </button>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                    <p className="text-[10px] text-slate-500 mt-2">用于图像理解（可选）</p>
+                  </div>
+
+                  {/* 视觉 Fallback - 可搜索多选，芯片展示，不可重复 */}
+                  <div className="bg-gradient-to-br from-white/50 to-transparent rounded-xl border border-slate-200/50 p-4 transition-all duration-300 hover:border-slate-300/60 hover:shadow-sm">
+                    <div className="flex items-center gap-2.5 mb-2.5">
+                      <div className="w-7 h-7 rounded-lg bg-emerald-100/80 text-emerald-600 flex items-center justify-center">
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                        </svg>
+                      </div>
+                      <span className="text-[11px] font-medium text-slate-700">视觉 Fallback</span>
+                    </div>
+                    <div className="relative">
+                      <div className="min-h-[38px] rounded-lg border border-slate-200/80 bg-white/90 px-3 py-2 flex flex-wrap gap-1.5 items-center">
+                        {openclawImageFallbacks.length === 0 ? (
+                          <span className="text-[11px] text-slate-400">从下方搜索并添加备用模型</span>
+                        ) : (
+                          openclawImageFallbacks.map((modelId) => {
+                            const m = openclawModelsFlat.find((x) => x.model_id === modelId);
+                            return (
+                              <span
+                                key={modelId}
+                                className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-emerald-100 text-emerald-800 text-[10px] font-medium"
+                              >
+                                {m?.name || modelId}
+                                <button
+                                  type="button"
+                                  onClick={() => setOpenclawImageFallbacks((prev) => prev.filter((id) => id !== modelId))}
+                                  className="hover:bg-emerald-200 rounded p-0.5"
+                                  aria-label="移除"
+                                >
+                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                  </svg>
+                                </button>
+                              </span>
+                            );
+                          })
+                        )}
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => { setOpenClawSearch(''); setOpenClawDropdown(openClawDropdown === 'imageFallbacks' ? null : 'imageFallbacks'); }}
+                        className="mt-1.5 w-full text-left px-3 py-1.5 text-[11px] text-slate-500 border border-dashed border-slate-200 rounded-md hover:border-emerald-300 hover:text-emerald-700 hover:bg-emerald-50/50"
+                      >
+                        + 搜索并添加 Fallback 模型
+                      </button>
+                      {openClawDropdown === 'imageFallbacks' && (
+                        <div className="absolute z-20 mt-1 w-full rounded-lg border border-slate-200 bg-white shadow-lg py-1 max-h-56 overflow-hidden flex flex-col">
+                          <input
+                            type="text"
+                            placeholder="搜索模型..."
+                            value={openClawSearch}
+                            onChange={(e) => setOpenClawSearch(e.target.value)}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            className="mx-2 mb-1 px-2 py-1.5 text-[11px] border border-slate-200 rounded-md focus:ring-2 focus:ring-emerald-200 focus:border-emerald-400 focus:outline-none"
+                          />
+                          <ul className="overflow-y-auto overscroll-contain max-h-44">
+                            {openclawModelsFiltered
+                              .filter((m) => !openclawImageFallbacks.includes(m.model_id))
+                              .map((model) => (
+                                <li key={model.id}>
+                                  <button
+                                    type="button"
+                                    onClick={() => {
+                                      setOpenclawImageFallbacks((prev) => (prev.includes(model.model_id) ? prev : [...prev, model.model_id]));
+                                      setOpenClawSearch('');
+                                    }}
+                                    className="w-full text-left px-3 py-2 text-[11px] text-slate-700 hover:bg-emerald-50"
+                                  >
+                                    {model.name}
+                                    <span className="text-slate-400 ml-1">({model.provider})</span>
+                                  </button>
+                                </li>
+                              ))}
+                            {openclawModelsFiltered.filter((m) => !openclawImageFallbacks.includes(m.model_id)).length === 0 && (
+                              <li className="px-3 py-2 text-[11px] text-slate-400">无更多可选或已全部添加</li>
+                            )}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                    <p className="text-[10px] text-slate-500 mt-2">视觉模型的备用模型，可多选，不可重复</p>
+                  </div>
+                </div>
+
+                <div className={`grid gap-3 pt-1 ${openclawEnabled ? 'grid-cols-3' : 'grid-cols-2'}`}>
+                  <button
+                    onClick={handleOpenClawApply}
+                    disabled={openclawApplying}
+                    className={`w-full px-4 py-2.5 text-xs font-medium rounded-lg border transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 ${
+                      openclawEnabled
+                        ? 'bg-white border-slate-200/80 text-slate-700 hover:border-slate-300 hover:bg-slate-50'
+                        : 'bg-slate-900 border-slate-900 text-white hover:bg-slate-800'
+                    }`}
+                  >
+                    {openclawApplying ? (
+                      <>
+                        <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        应用中
+                      </>
+                    ) : (
+                      <>
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                        </svg>
+                        {openclawEnabled ? '更新配置' : '应用配置'}
+                      </>
+                    )}
+                  </button>
+
+                  {openclawEnabled && (
+                    <button
+                      onClick={handleOpenClawRestore}
+                      disabled={openclawRestoring}
+                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-slate-200/80 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                      {openclawRestoring ? (
+                        <>
+                          <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                          还原中
+                        </>
+                      ) : (
+                        <>
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                          </svg>
+                          还原配置
+                        </>
+                      )}
+                    </button>
+                  )}
+
+                  {openclawTesting ? (
+                    <button
+                      onClick={handleOpenClawCancelTest}
+                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-amber-200/80 bg-amber-50 text-amber-700 hover:bg-amber-100 transition-all duration-200 flex items-center justify-center gap-2"
+                    >
+                      <svg className="animate-spin w-3.5 h-3.5" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      取消测试
+                    </button>
+                  ) : (
+                    <button
+                      onClick={handleOpenClawTest}
+                      className="w-full px-4 py-2.5 text-xs font-medium rounded-lg border border-slate-200/80 bg-white text-slate-700 hover:bg-slate-50 transition-all duration-200 flex items-center justify-center gap-2"
+                    >
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                      </svg>
+                      测试配置
+                    </button>
+                  )}
+                </div>
+
+                {openclawTestResult && (
+                  <div className={`rounded-lg border px-4 py-3 ${
+                    openclawTestResult.success
+                      ? 'bg-emerald-50/60 border-emerald-200/60'
+                      : 'bg-rose-50/60 border-rose-200/60'
+                  }`}>
+                    <div className="flex items-start gap-3">
+                      <div className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${
+                        openclawTestResult.success ? 'bg-emerald-500' : 'bg-rose-500'
+                      }`}>
+                        {openclawTestResult.success ? (
+                          <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                          </svg>
+                        ) : (
+                          <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        )}
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-xs font-medium mb-1">
+                          {openclawTestResult.success ? '配置验证成功' : '配置验证失败'}
+                        </div>
+                        <p className={`text-[11px] ${openclawTestResult.success ? 'text-emerald-700/80' : 'text-rose-700/80'}`}>
+                          {openclawTestResult.success
+                            ? (openclawTestResult.openclawTest?.message || 'OpenClaw 可以正常工作')
+                            : (openclawTestResult.openclawTest?.error || openclawTestResult.error || openclawTestResult.suggestion || '请检查配置')}
+                        </p>
+                        {openclawTestResult.openclawTest?.stdout && (
+                          <div className="mt-2 text-[10px] text-slate-500 font-mono bg-white/50 p-2 rounded">
+                            {openclawTestResult.openclawTest.stdout}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                <details className="group" open>
+                  <summary className="cursor-pointer text-[11px] text-slate-500 hover:text-slate-700 list-none flex items-center gap-1.5 py-1">
+                    <svg className="w-3 h-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                    <span>配置</span>
+                  </summary>
+                  <div className="mt-3">
+                    <div className="flex border border-slate-200 rounded-t-lg overflow-hidden bg-slate-100/90">
+                      <button
+                        type="button"
+                        onClick={() => setOpenclawConfigSubTab('preview')}
+                        className={`flex-1 px-4 py-2.5 text-[11px] transition-all ${
+                          openclawConfigSubTab === 'preview'
+                            ? 'bg-white text-slate-800 font-semibold shadow-sm'
+                            : 'text-slate-500 font-medium hover:bg-slate-200/80 hover:text-slate-600'
+                        }`}
+                      >
+                        预览
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setOpenclawConfigSubTab('current')}
+                        className={`flex-1 px-4 py-2.5 text-[11px] transition-all ${
+                          openclawConfigSubTab === 'current'
+                            ? 'bg-white text-slate-800 font-semibold shadow-sm'
+                            : 'text-slate-500 font-medium hover:bg-slate-200/80 hover:text-slate-600'
+                        }`}
+                      >
+                        生效中
+                      </button>
+                    </div>
+                    <div className="relative overflow-hidden rounded-b-lg bg-slate-950 border border-slate-200 border-t-0">
+                      {openclawConfigSubTab === 'preview' ? (
+                        <>
+                          <div className="flex items-center gap-1.5 px-3 py-2 bg-slate-900 border-b border-slate-800">
+                            <div className="flex gap-1.5">
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                            </div>
+                            <span className="text-[10px] font-medium text-slate-400 ml-2">openclaw.json（应用后将写入的合并结果）</span>
+                          </div>
+                          {openclawPreviewLoading ? (
+                            <div className="p-3.5 text-[10px] text-slate-400 font-mono">加载中...</div>
+                          ) : (
+                            <textarea
+                              className="openclaw-preview-textarea w-full min-h-[12rem] p-3.5 text-[10px] text-slate-300 font-mono bg-slate-950 border-0 focus:ring-0 focus:ring-offset-0 focus:outline-none resize-y max-h-96 overflow-y-auto placeholder:text-slate-500
+                                [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-900 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full"
+                              placeholder="暂无预览"
+                              spellCheck={false}
+                              value={openclawPreviewText}
+                              onChange={(e) => setOpenclawPreviewText(e.target.value)}
+                            />
+                          )}
+                        </>
+                      ) : (
+                        <>
+                          <div className="flex items-center gap-1.5 px-3 py-2 bg-slate-900 border-b border-slate-800">
+                            <div className="flex gap-1.5">
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                              <div className="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
+                            </div>
+                            <span className="text-[10px] font-medium text-slate-400 ml-2">openclaw.json（当前磁盘内容，还原后即更新）</span>
+                          </div>
+                          {openclawStatus?.config != null ? (
+                            <pre className="w-full min-h-[12rem] p-3.5 text-[10px] text-slate-300 font-mono overflow-auto max-h-96 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-slate-900 [&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full">
+                              {JSON.stringify(openclawStatus.config, null, 2)}
+                            </pre>
+                          ) : (
+                            <div className="p-3.5 text-[10px] text-slate-500 font-mono">暂无配置文件</div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </details>
+
+                <div className="rounded-lg border border-slate-200/50 bg-slate-50/60 px-4 py-3">
+                  <div className="flex items-center gap-2 mb-2.5">
+                    <svg className="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <h3 className="text-xs font-semibold text-slate-700">使用说明</h3>
+                  </div>
+                  <ul className="space-y-1.5 text-[10px] text-slate-600">
+                    <li className="flex gap-2">
+                      <span className="text-slate-400">1.</span>
+                      <span>「生效中」为当前磁盘上的 openclaw.json；「预览」为应用后将写入的合并结果（含 AAR 网关）</span>
                     </li>
                     <li className="flex gap-2">
-                      <span className="text-slate-400">5.</span>
-                      <span>配置文件位于 ~/.claude/settings.json</span>
+                      <span className="text-slate-400">2.</span>
+                      <span>选择默认模型等后，在「预览」中查看合并结果，点击「应用配置」写入</span>
                     </li>
                     <li className="flex gap-2">
-                      <span className="text-slate-400">6.</span>
-                      <span>临时配置保存在 ~/.aar/settings.tmp.json</span>
+                      <span className="text-slate-400">3.</span>
+                      <span>配置文件位于 ~/.openclaw/openclaw.json</span>
                     </li>
                     <li className="flex gap-2">
-                      <span className="text-slate-400">7.</span>
-                      <span>点击"还原配置"可恢复到应用前的状态</span>
+                      <span className="text-slate-400">4.</span>
+                      <span>「还原配置」恢复为应用前的备份；还原后请在「生效中」查看当前内容</span>
                     </li>
                   </ul>
                 </div>
               </div>
             )}
+
+            {activeTab === 'picoclaw' && (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-4">
+                  <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                  </svg>
+                </div>
+                <h3 className="text-sm font-medium text-slate-900 mb-1">PicoClaw 支持即将推出</h3>
+                <p className="text-xs text-slate-500 max-w-xs">
+                  我们将很快添加对 PicoClaw 的支持，敬请期待。
+                </p>
+              </div>
+            )}
           </div>
         </div>
       </main>