feat(ux): Phase 1 — onboarding, doctor, templates, navigation convergence

mateclaw-server/nul

@@ -1 +0,0 @@
-/bin/sh: wmic: command not found

mateclaw-server/pom.xml

@@ -6,7 +6,7 @@
 
     <groupId>vip.mate</groupId>
     <artifactId>mateclaw-server</artifactId>
-    <version>1.0.314</version>
+    <version>1.0.418-SNAPSHOT</version>
     <packaging>jar</packaging>
 
     <name>MateClaw Server</name>

mateclaw-server/src/main/java/vip/mate/agent/controller/TemplateController.java

@@ -0,0 +1,38 @@
+package vip.mate.agent.controller;
+
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.*;
+import vip.mate.agent.model.AgentEntity;
+import vip.mate.agent.model.TemplateDTO;
+import vip.mate.agent.service.TemplateService;
+import vip.mate.common.result.R;
+
+import java.util.List;
+
+/**
+ * Agent 模板接口
+ *
+ * @author MateClaw Team
+ */
+@Tag(name = "Agent Templates")
+@RestController
+@RequestMapping("/api/v1/templates")
+@RequiredArgsConstructor
+public class TemplateController {
+
+    private final TemplateService templateService;
+
+    @Operation(summary = "获取模板列表")
+    @GetMapping
+    public R<List<TemplateDTO>> list() {
+        return R.ok(templateService.listTemplates());
+    }
+
+    @Operation(summary = "应用模板创建Agent")
+    @PostMapping("/{id}/apply")
+    public R<AgentEntity> apply(@PathVariable String id) {
+        return R.ok(templateService.applyTemplate(id));
+    }
+}

mateclaw-server/src/main/java/vip/mate/agent/model/TemplateDTO.java

@@ -0,0 +1,33 @@
+package vip.mate.agent.model;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * Agent 模板 DTO
+ *
+ * @author MateClaw Team
+ */
+@Data
+public class TemplateDTO {
+
+    private String id;
+    private String name;
+    private String nameZh;
+    private String description;
+    private String descriptionZh;
+    private String icon;
+    private String agentType;
+    private String tags;
+    private Integer maxIterations;
+    private List<WorkspaceFileTemplate> workspaceFiles;
+
+    @Data
+    public static class WorkspaceFileTemplate {
+        private String filename;
+        private String content;
+        private Boolean enabled;
+        private Integer sortOrder;
+    }
+}

mateclaw-server/src/main/java/vip/mate/agent/service/TemplateService.java

@@ -0,0 +1,112 @@
+package vip.mate.agent.service;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import vip.mate.agent.AgentService;
+import vip.mate.agent.model.AgentEntity;
+import vip.mate.agent.model.TemplateDTO;
+import vip.mate.exception.MateClawException;
+import vip.mate.workspace.document.WorkspaceFileService;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.List;
+import java.util.stream.Collectors;
+
+/**
+ * Agent 模板服务
+ * <p>
+ * 扫描 classpath:templates/*.json 下的模板文件，
+ * 支持列出模板和应用模板创建 Agent。
+ *
+ * @author MateClaw Team
+ */
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class TemplateService {
+
+    private final AgentService agentService;
+    private final WorkspaceFileService workspaceFileService;
+    private final ObjectMapper objectMapper;
+
+    /**
+     * 列出所有可用模板
+     */
+    public List<TemplateDTO> listTemplates() {
+        List<TemplateDTO> templates = new ArrayList<>();
+        PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();
+
+        try {
+            Resource[] resources = resolver.getResources("classpath:templates/*.json");
+            for (Resource resource : resources) {
+                try (InputStream is = resource.getInputStream()) {
+                    TemplateDTO dto = objectMapper.readValue(is, TemplateDTO.class);
+                    templates.add(dto);
+                } catch (IOException e) {
+                    log.warn("Failed to parse template file: {}", resource.getFilename(), e);
+                }
+            }
+        } catch (IOException e) {
+            log.error("Failed to scan template files", e);
+        }
+
+        templates.sort(Comparator.comparing(TemplateDTO::getId));
+        return templates;
+    }
+
+    /**
+     * 应用模板创建 Agent 及其工作区文件
+     *
+     * @param templateId 模板 ID
+     * @return 创建的 AgentEntity
+     */
+    @Transactional
+    public AgentEntity applyTemplate(String templateId) {
+        TemplateDTO template = listTemplates().stream()
+                .filter(t -> t.getId().equals(templateId))
+                .findFirst()
+                .orElseThrow(() -> new MateClawException("模板不存在: " + templateId));
+
+        // 1. 创建 Agent
+        AgentEntity agent = new AgentEntity();
+        agent.setName(template.getName());
+        agent.setDescription(template.getDescription());
+        agent.setAgentType(template.getAgentType());
+        agent.setIcon(template.getIcon());
+        agent.setTags(template.getTags());
+        agent.setMaxIterations(template.getMaxIterations());
+        AgentEntity created = agentService.createAgent(agent);
+
+        // 2. 创建工作区文件
+        if (template.getWorkspaceFiles() != null && !template.getWorkspaceFiles().isEmpty()) {
+            for (TemplateDTO.WorkspaceFileTemplate wf : template.getWorkspaceFiles()) {
+                workspaceFileService.saveFile(created.getId(), wf.getFilename(), wf.getContent());
+            }
+
+            // 3. 启用指定文件并按 sortOrder 排序（setPromptFiles 用列表索引作为排序值）
+            List<String> enabledFilenames = template.getWorkspaceFiles().stream()
+                    .filter(wf -> Boolean.TRUE.equals(wf.getEnabled()))
+                    .sorted((a, b) -> {
+                        int sa = a.getSortOrder() != null ? a.getSortOrder() : 0;
+                        int sb = b.getSortOrder() != null ? b.getSortOrder() : 0;
+                        return Integer.compare(sa, sb);
+                    })
+                    .map(TemplateDTO.WorkspaceFileTemplate::getFilename)
+                    .toList();
+
+            if (!enabledFilenames.isEmpty()) {
+                workspaceFileService.setPromptFiles(created.getId(), enabledFilenames);
+            }
+        }
+
+        return created;
+    }
+}

mateclaw-server/src/main/java/vip/mate/system/controller/SetupController.java

@@ -8,6 +8,12 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.server.ResponseStatusException;
 import vip.mate.common.result.R;
 import vip.mate.config.DatabaseBootstrapRunner;
+import vip.mate.llm.service.ModelConfigService;
+import vip.mate.llm.service.ModelDiscoveryService;
+import vip.mate.llm.service.ModelProviderService;
+
+import java.util.List;
+import java.util.Map;
 
 /**
  * Setup API for first-run initialization.
@@ -23,6 +29,9 @@ import vip.mate.config.DatabaseBootstrapRunner;
 public class SetupController {
 
     private final DatabaseBootstrapRunner bootstrapRunner;
+    private final ModelConfigService modelConfigService;
+    private final ModelDiscoveryService modelDiscoveryService;
+    private final ModelProviderService modelProviderService;
 
     /**
      * Check whether the application has been initialized.
@@ -60,6 +69,39 @@ public class SetupController {
         return R.ok("Initialized with " + language);
     }
 
+    /**
+     * Onboarding status: whether the system has a usable model configured.
+     * Used by the frontend to decide whether to show the onboarding wizard.
+     */
+    @GetMapping("/onboarding-status")
+    public R<Map<String, Object>> getOnboardingStatus() {
+        boolean hasDefaultModel = false;
+        try {
+            modelConfigService.getDefaultModel();
+            hasDefaultModel = true;
+        } catch (Exception e) {
+            // no default model configured
+        }
+
+        boolean ollamaOnline = false;
+        try {
+            ollamaOnline = modelDiscoveryService.testConnection("ollama").isSuccess();
+        } catch (Exception e) {
+            // Ollama not available
+        }
+
+        List<String> configuredProviders = modelProviderService.listProviders().stream()
+                .filter(p -> Boolean.TRUE.equals(p.getConfigured()))
+                .map(p -> p.getId())
+                .toList();
+
+        return R.ok(Map.of(
+                "hasDefaultModel", hasDefaultModel,
+                "ollamaOnline", ollamaOnline,
+                "configuredProviders", configuredProviders
+        ));
+    }
+
     @Data
     public static class InitRequest {
         private String language;

mateclaw-server/src/main/java/vip/mate/system/controller/SystemHealthController.java

@@ -0,0 +1,30 @@
+package vip.mate.system.controller;
+
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import vip.mate.common.result.R;
+import vip.mate.system.service.SystemHealthService;
+
+/**
+ * System health check endpoint.
+ *
+ * @author MateClaw Team
+ */
+@Tag(name = "System Health")
+@RestController
+@RequestMapping("/api/v1/system")
+@RequiredArgsConstructor
+public class SystemHealthController {
+
+    private final SystemHealthService healthService;
+
+    @Operation(summary = "System health check")
+    @GetMapping("/health")
+    public R<SystemHealthService.HealthResponse> getHealth() {
+        return R.ok(healthService.check());
+    }
+}

mateclaw-server/src/main/java/vip/mate/system/service/SystemHealthService.java

@@ -0,0 +1,171 @@
+package vip.mate.system.service;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Service;
+import vip.mate.config.DatabaseBootstrapRunner;
+import vip.mate.exception.MateClawException;
+import vip.mate.llm.model.ProviderInfoDTO;
+import vip.mate.llm.service.ModelConfigService;
+import vip.mate.llm.service.ModelProviderService;
+import vip.mate.tool.mcp.model.McpServerEntity;
+import vip.mate.tool.mcp.runtime.McpClientManager;
+import vip.mate.tool.mcp.runtime.McpClientManager.ConnectionResult;
+import vip.mate.tool.mcp.service.McpServerService;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * System health check service.
+ * <p>
+ * Inspects default model, provider configurations, MCP server connections,
+ * and database initialization status.
+ *
+ * @author MateClaw Team
+ */
+@Slf4j
+@Service
+@RequiredArgsConstructor
+public class SystemHealthService {
+
+    private final ModelConfigService modelConfigService;
+    private final ModelProviderService modelProviderService;
+    private final McpClientManager mcpClientManager;
+    private final McpServerService mcpServerService;
+    private final DatabaseBootstrapRunner bootstrapRunner;
+
+    public HealthResponse check() {
+        List<HealthCheck> checks = new ArrayList<>();
+
+        // 1. Default model check
+        checks.add(checkDefaultModel());
+
+        // 2. Provider checks (only providers that require API keys)
+        checks.addAll(checkProviders());
+
+        // 3. MCP server checks (enabled servers only)
+        checks.addAll(checkMcpServers());
+
+        // 4. Database initialization check
+        checks.add(checkDatabase());
+
+        // Determine overall status
+        String overall = "healthy";
+        for (HealthCheck c : checks) {
+            if ("error".equals(c.status())) {
+                overall = "error";
+                break;
+            }
+            if ("warning".equals(c.status())) {
+                overall = "warning";
+            }
+        }
+
+        return new HealthResponse(overall, checks);
+    }
+
+    private HealthCheck checkDefaultModel() {
+        try {
+            var model = modelConfigService.getDefaultModel();
+            return new HealthCheck(
+                    "default-model",
+                    "healthy",
+                    "Default model: " + model.getName(),
+                    null
+            );
+        } catch (MateClawException e) {
+            return new HealthCheck(
+                    "default-model",
+                    "error",
+                    e.getMessage(),
+                    new HealthAction("Configure Model", "/settings/models")
+            );
+        }
+    }
+
+    private List<HealthCheck> checkProviders() {
+        List<HealthCheck> results = new ArrayList<>();
+        try {
+            List<ProviderInfoDTO> providers = modelProviderService.listProviders();
+            for (ProviderInfoDTO provider : providers) {
+                // Only check providers that require an API key
+                if (!Boolean.TRUE.equals(provider.getRequireApiKey())) {
+                    continue;
+                }
+                String providerId = provider.getId();
+                boolean configured = modelProviderService.isProviderConfigured(providerId);
+                if (!configured) {
+                    String reason = modelProviderService.getProviderUnavailableReason(providerId);
+                    results.add(new HealthCheck(
+                            "provider:" + providerId,
+                            "warning",
+                            provider.getName() + " - " + (reason != null ? reason : "Not configured"),
+                            new HealthAction("Configure", "/settings/models")
+                    ));
+                }
+            }
+        } catch (Exception e) {
+            log.warn("Failed to check providers: {}", e.getMessage());
+            results.add(new HealthCheck(
+                    "providers",
+                    "warning",
+                    "Unable to check providers: " + e.getMessage(),
+                    null
+            ));
+        }
+        return results;
+    }
+
+    private List<HealthCheck> checkMcpServers() {
+        List<HealthCheck> results = new ArrayList<>();
+        try {
+            List<McpServerEntity> servers = mcpServerService.listAll();
+            for (McpServerEntity server : servers) {
+                if (!Boolean.TRUE.equals(server.getEnabled())) {
+                    continue;
+                }
+                ConnectionResult cr = mcpClientManager.getConnectionResult(server.getId());
+                if (cr == null || !cr.success()) {
+                    String msg = server.getName() + " - "
+                            + (cr != null ? cr.message() : "Not connected");
+                    results.add(new HealthCheck(
+                            "mcp:" + server.getName(),
+                            "warning",
+                            msg,
+                            new HealthAction("View Servers", "/settings/mcp-servers")
+                    ));
+                }
+            }
+        } catch (Exception e) {
+            log.warn("Failed to check MCP servers: {}", e.getMessage());
+            results.add(new HealthCheck(
+                    "mcp-servers",
+                    "warning",
+                    "Unable to check MCP servers: " + e.getMessage(),
+                    null
+            ));
+        }
+        return results;
+    }
+
+    private HealthCheck checkDatabase() {
+        if (bootstrapRunner.isInitialized()) {
+            return new HealthCheck("database", "healthy", "Database initialized", null);
+        }
+        return new HealthCheck(
+                "database",
+                "error",
+                "Database not initialized",
+                new HealthAction("Setup", "/setup")
+        );
+    }
+
+    // ==================== Response Records ====================
+
+    public record HealthResponse(String overall, List<HealthCheck> checks) {}
+
+    public record HealthCheck(String name, String status, String message, HealthAction action) {}
+
+    public record HealthAction(String label, String route) {}
+}

mateclaw-server/src/main/resources/templates/code-reviewer.json

@@ -0,0 +1,37 @@
+{
+  "id": "code-reviewer",
+  "name": "Code Reviewer",
+  "nameZh": "代码审查员",
+  "description": "Expert code reviewer. Reads code, identifies issues, suggests improvements.",
+  "descriptionZh": "代码审查专家。阅读代码、发现问题、提出改进建议。",
+  "icon": "🔍",
+  "agentType": "react",
+  "tags": "code,review,developer",
+  "maxIterations": 10,
+  "workspaceFiles": [
+    {
+      "filename": "AGENTS.md",
+      "content": "## Role\nYou are a senior code reviewer. Your job is to:\n1. Read code thoroughly before commenting\n2. Identify bugs, security issues, and performance problems\n3. Suggest concrete improvements with code examples\n4. Be direct but constructive\n\n## Review Checklist\n- Logic errors and edge cases\n- Security vulnerabilities\n- Performance bottlenecks\n- Code readability and naming\n- Error handling completeness\n- Test coverage gaps\n",
+      "enabled": true,
+      "sortOrder": 0
+    },
+    {
+      "filename": "SOUL.md",
+      "content": "# Soul\n\nBe the reviewer you'd want on your own code.\nPoint out what's wrong, but also acknowledge what's done well.\nAlways provide the fix, not just the critique.\n",
+      "enabled": true,
+      "sortOrder": 1
+    },
+    {
+      "filename": "PROFILE.md",
+      "content": "## Project Context\n\n- Language/Framework:\n- Code style guide:\n- Testing framework:\n\n_Update as you learn about the codebase._\n",
+      "enabled": true,
+      "sortOrder": 2
+    },
+    {
+      "filename": "MEMORY.md",
+      "content": "## Code Review Memory\n\n### Recurring Issues\n- (none yet)\n\n### Project Conventions\n- (none yet)\n",
+      "enabled": true,
+      "sortOrder": 3
+    }
+  ]
+}

mateclaw-server/src/main/resources/templates/general-assistant.json

@@ -0,0 +1,37 @@
+{
+  "id": "general-assistant",
+  "name": "General Assistant",
+  "nameZh": "通用助手",
+  "description": "A versatile AI assistant for everyday tasks — search, write, analyze, and more.",
+  "descriptionZh": "通用 AI 助手，适合日常任务——搜索、写作、分析等。",
+  "icon": "🤖",
+  "agentType": "react",
+  "tags": "general,assistant,default",
+  "maxIterations": 10,
+  "workspaceFiles": [
+    {
+      "filename": "AGENTS.md",
+      "content": "## Memory\n\nYour memory is stored in workspace files:\n- `PROFILE.md`: stable user profile and preferences\n- `MEMORY.md`: long-term facts, lessons, recurring patterns\n- `memory/YYYY-MM-DD.md`: daily notes and temporary context\n\n## Guidelines\n- Read workspace memory before answering questions about past decisions\n- Write stable facts to MEMORY.md, temporary notes to daily files\n- Be helpful, concise, and proactive\n",
+      "enabled": true,
+      "sortOrder": 0
+    },
+    {
+      "filename": "SOUL.md",
+      "content": "# Soul\n\nActually help, don't perform. Have your own opinions.\nFigure things out yourself first — use tools, then ask.\nKeep it concise when it should be, detailed when it matters.\n",
+      "enabled": true,
+      "sortOrder": 1
+    },
+    {
+      "filename": "PROFILE.md",
+      "content": "## User Profile\n\n- Name:\n- Preferences:\n- Communication style:\n\n_Update this as you learn about the user._\n",
+      "enabled": true,
+      "sortOrder": 2
+    },
+    {
+      "filename": "MEMORY.md",
+      "content": "## Long-term Memory\n\n### Stable Facts\n- (none yet)\n\n### Lessons Learned\n- (none yet)\n",
+      "enabled": true,
+      "sortOrder": 3
+    }
+  ]
+}

mateclaw-server/src/main/resources/templates/research-analyst.json

@@ -0,0 +1,37 @@
+{
+  "id": "research-analyst",
+  "name": "Research Analyst",
+  "nameZh": "研究分析师",
+  "description": "Breaks down complex research tasks into steps. Uses web search and Wiki for deep analysis.",
+  "descriptionZh": "将复杂研究任务分解为步骤。使用网络搜索和 Wiki 进行深度分析。",
+  "icon": "📊",
+  "agentType": "plan_execute",
+  "tags": "research,analysis,planning",
+  "maxIterations": 20,
+  "workspaceFiles": [
+    {
+      "filename": "AGENTS.md",
+      "content": "## Role\nYou are a research analyst. For complex questions:\n1. Break the question into sub-questions\n2. Research each sub-question using available tools\n3. Synthesize findings into a coherent analysis\n4. Cite sources and note confidence levels\n\n## Research Process\n- Start with web search for recent information\n- Check Wiki knowledge base for existing analysis\n- Cross-reference multiple sources\n- Flag contradictions between sources\n",
+      "enabled": true,
+      "sortOrder": 0
+    },
+    {
+      "filename": "SOUL.md",
+      "content": "# Soul\n\nPrioritize accuracy over speed. Say \"I don't know\" when evidence is insufficient.\nDistinguish facts from opinions. Always cite your sources.\n",
+      "enabled": true,
+      "sortOrder": 1
+    },
+    {
+      "filename": "PROFILE.md",
+      "content": "## Research Context\n\n- Domain focus:\n- Preferred sources:\n- Output format preference:\n\n_Update as research topics become clear._\n",
+      "enabled": true,
+      "sortOrder": 2
+    },
+    {
+      "filename": "MEMORY.md",
+      "content": "## Research Memory\n\n### Key Findings\n- (none yet)\n\n### Source Quality Notes\n- (none yet)\n",
+      "enabled": true,
+      "sortOrder": 3
+    }
+  ]
+}

mateclaw-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mateclaw-ui",
-  "version": "1.0.314",
+  "version": "1.0.418-SNAPSHOT",
   "private": true,
   "type": "module",
   "description": "MateClaw - Personal AI Assistant Web Console",

mateclaw-ui/src/api/index.ts

@@ -259,6 +259,11 @@ export const oauthApi = {
   revoke: () => http.delete('/oauth/openai/revoke'),
 }
 
+// ==================== Setup ====================
+export const setupApi = {
+  onboardingStatus: () => http.get('/setup/onboarding-status'),
+}
+
 // ==================== Settings ====================
 export const settingsApi = {
   get: () => http.get('/settings'),

mateclaw-ui/src/i18n/locales/en-US.ts

@@ -188,6 +188,9 @@ export default {
     skills: 'Skills',
     wiki: 'Wiki KB',
     tools: 'Tools',
+    core: 'Core',
+    connect: 'Connect',
+    system: 'System',
     datasources: 'Datasources',
     mcpServers: 'MCP Servers',
     settingsGroup: 'Settings',
@@ -203,6 +206,16 @@ export default {
     roleUser: 'User',
     roleAdmin: 'Admin',
   },
+  doctor: {
+    title: 'System Diagnostics',
+    checking: 'Checking...',
+    allGood: 'All systems healthy',
+    hasWarnings: '{count} warning(s)',
+    hasErrors: '{count} issue(s)',
+    refresh: 'Re-check',
+    lastChecked: 'Checked {time} ago',
+    diagnose: 'Diagnose',
+  },
   settings: {
     title: 'Settings',
     sections: {
@@ -214,6 +227,7 @@ export default {
       music: 'Music Generation',
       video: 'Video Generation',
       about: 'About',
+      advanced: 'Advanced',
     },
     modelTitle: 'Model Management',
     modelDesc: 'Manage provider presets and default model selection',
@@ -1257,4 +1271,29 @@ export default {
       statusPending: 'Pending',
     },
   },
+  onboarding: {
+    title: 'Welcome to MateClaw',
+    subtitle: 'Set up your first AI model',
+    stepPath: 'Choose Path',
+    stepConfigure: 'Configure Model',
+    stepVerify: 'Verify',
+    localTitle: 'Local Model',
+    localDesc: 'Ollama installed? Enable local models in one click',
+    localDetected: 'Detected',
+    cloudTitle: 'Cloud API',
+    cloudDesc: 'Use cloud models like OpenAI, DashScope, etc.',
+    selectModel: 'Select Model',
+    setDefault: 'Set as Default',
+    enterApiKey: 'Enter API Key',
+    testConnection: 'Test Connection',
+    testSuccess: 'Connection Successful',
+    testFailed: 'Connection Failed',
+    saveAndContinue: 'Save & Continue',
+    verifyTitle: 'Verify Your Model',
+    verifyMessage: 'Hello! Tell me briefly about yourself.',
+    send: 'Send',
+    startUsing: 'Start Using MateClaw',
+    skip: 'Skip',
+    back: 'Back',
+  },
 } as const

mateclaw-ui/src/i18n/locales/zh-CN.ts

@@ -183,6 +183,9 @@ export default {
     control: '控制台',
     channels: '渠道',
     sessions: '会话',
+    core: '核心',
+    connect: '连接',
+    system: '系统',
     agent: '智能体',
     workspace: '工作区',
     skills: '技能',
@@ -214,6 +217,7 @@ export default {
       music: '音乐生成',
       video: '视频生成',
       about: '关于',
+      advanced: '高级',
     },
     modelTitle: '模型管理',
     modelDesc: '管理模型预设与默认模型选择',
@@ -941,6 +945,16 @@ export default {
       testFailed: '连接失败，请检查配置',
     },
   },
+  doctor: {
+    title: '系统诊断',
+    checking: '检查中...',
+    allGood: '所有系统正常',
+    hasWarnings: '{count} 个警告',
+    hasErrors: '{count} 个问题',
+    refresh: '重新检查',
+    lastChecked: '{time} 前检查',
+    diagnose: '诊断问题',
+  },
   wiki: {
     desc: 'AI 驱动的结构化知识库，自动消化原始材料为 Wiki 页面',
     createKB: '新建知识库',
@@ -1267,4 +1281,29 @@ export default {
       statusPending: '等待中',
     },
   },
+  onboarding: {
+    title: '欢迎使用 MateClaw',
+    subtitle: '配置你的第一个 AI 模型',
+    stepPath: '选择方式',
+    stepConfigure: '配置模型',
+    stepVerify: '验证',
+    localTitle: '本地模型',
+    localDesc: '已安装 Ollama？一键启用本地模型',
+    localDetected: '已检测到',
+    cloudTitle: '云端 API',
+    cloudDesc: '使用 OpenAI、DashScope 等云端模型',
+    selectModel: '选择模型',
+    setDefault: '设为默认',
+    enterApiKey: '输入 API Key',
+    testConnection: '测试连接',
+    testSuccess: '连接成功',
+    testFailed: '连接失败',
+    saveAndContinue: '保存并继续',
+    verifyTitle: '验证你的模型',
+    verifyMessage: '你好！简单介绍一下你自己。',
+    send: '发送',
+    startUsing: '开始使用 MateClaw',
+    skip: '跳过',
+    back: '返回',
+  },
 } as const

mateclaw-ui/src/router/index.ts

@@ -8,72 +8,45 @@ const router = createRouter({
       component: () => import('@/views/layout/MainLayout.vue'),
       redirect: '/chat',
       children: [
+        // ==================== Core ====================
         {
           path: 'chat',
           name: 'Chat',
           component: () => import('@/views/ChatConsole.vue'),
           meta: { title: 'Chat' },
         },
-        {
-          path: 'channels',
-          name: 'Channels',
-          component: () => import('@/views/Channels.vue'),
-          meta: { title: 'Channels' },
-        },
-        {
-          path: 'sessions',
-          name: 'Sessions',
-          component: () => import('@/views/Sessions.vue'),
-          meta: { title: 'Sessions' },
-        },
-        {
-          path: 'workspace',
-          name: 'Workspace',
-          component: () => import('@/views/AgentWorkspace.vue'),
-          meta: { title: 'Workspace' },
-        },
         {
           path: 'agents',
           name: 'Agents',
           component: () => import('@/views/Agents.vue'),
           meta: { title: 'Agents' },
         },
-        {
-          path: 'skills',
-          name: 'Skills',
-          component: () => import('@/views/SkillMarket.vue'),
-          meta: { title: 'Skills' },
-        },
         {
           path: 'wiki',
           name: 'Wiki',
           component: () => import('@/views/Wiki/index.vue'),
           meta: { title: 'Wiki' },
         },
+        // ==================== Connect ====================
+        {
+          path: 'channels',
+          name: 'Channels',
+          component: () => import('@/views/Channels.vue'),
+          meta: { title: 'Channels' },
+        },
+        {
+          path: 'skills',
+          name: 'Skills',
+          component: () => import('@/views/SkillMarket.vue'),
+          meta: { title: 'Skills' },
+        },
         {
           path: 'tools',
           name: 'Tools',
           component: () => import('@/views/Tools.vue'),
           meta: { title: 'Tools' },
         },
-        {
+        // ==================== Settings (absorbs advanced pages) ====================
-          path: 'datasources',
-          name: 'Datasources',
-          component: () => import('@/views/Datasources.vue'),
-          meta: { title: 'Datasources' },
-        },
-        {
-          path: 'mcp-servers',
-          name: 'McpServers',
-          component: () => import('@/views/McpServers.vue'),
-          meta: { title: 'MCP Servers' },
-        },
-        {
-          path: 'cron-jobs',
-          name: 'CronJobs',
-          component: () => import('@/views/CronJobs.vue'),
-          meta: { title: 'Cron Jobs' },
-        },
         {
           path: 'settings',
           component: () => import('@/views/Settings/Layout.vue'),
@@ -121,6 +94,37 @@ const router = createRouter({
               component: () => import('@/views/Settings/Video/index.vue'),
               meta: { title: 'Settings - Video' },
             },
+            // Advanced (absorbed from top-level nav)
+            {
+              path: 'workspace',
+              name: 'SettingsWorkspace',
+              component: () => import('@/views/AgentWorkspace.vue'),
+              meta: { title: 'Settings - Workspace' },
+            },
+            {
+              path: 'cron-jobs',
+              name: 'SettingsCronJobs',
+              component: () => import('@/views/CronJobs.vue'),
+              meta: { title: 'Settings - Cron Jobs' },
+            },
+            {
+              path: 'datasources',
+              name: 'SettingsDatasources',
+              component: () => import('@/views/Datasources.vue'),
+              meta: { title: 'Settings - Datasources' },
+            },
+            {
+              path: 'mcp-servers',
+              name: 'SettingsMcpServers',
+              component: () => import('@/views/McpServers.vue'),
+              meta: { title: 'Settings - MCP Servers' },
+            },
+            {
+              path: 'token-usage',
+              name: 'SettingsTokenUsage',
+              component: () => import('@/views/TokenUsage.vue'),
+              meta: { title: 'Settings - Token Usage' },
+            },
             {
               path: 'about',
               name: 'SettingsAbout',
@@ -129,6 +133,7 @@ const router = createRouter({
             },
           ],
         },
+        // ==================== Security ====================
         {
           path: 'security',
           component: () => import('@/views/Security/Layout.vue'),
@@ -154,12 +159,13 @@ const router = createRouter({
             },
           ],
         },
-        {
+        // ==================== Redirects (backward compatibility) ====================
-          path: 'token-usage',
+        { path: 'sessions', redirect: '/chat' },
-          name: 'TokenUsage',
+        { path: 'workspace', redirect: '/settings/workspace' },
-          component: () => import('@/views/TokenUsage.vue'),
+        { path: 'cron-jobs', redirect: '/settings/cron-jobs' },
-          meta: { title: 'Token Usage' },
+        { path: 'datasources', redirect: '/settings/datasources' },
-        },
+        { path: 'mcp-servers', redirect: '/settings/mcp-servers' },
+        { path: 'token-usage', redirect: '/settings/token-usage' },
       ],
     },
     {

mateclaw-ui/src/views/Doctor/DoctorDrawer.vue

@@ -0,0 +1,133 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="drawer-overlay" @click.self="emit('close')">
+      <div class="drawer-panel">
+        <div class="drawer-header">
+          <h2 class="drawer-title">{{ t('doctor.title') }}</h2>
+          <button class="drawer-close" @click="emit('close')">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Overall status banner -->
+        <div class="status-banner" :class="health?.overall || 'loading'">
+          <span class="status-dot"></span>
+          <span v-if="loading">{{ t('doctor.checking') }}</span>
+          <span v-else-if="health?.overall === 'healthy'">{{ t('doctor.allGood') }}</span>
+          <span v-else-if="health?.overall === 'warning'">{{ t('doctor.hasWarnings', { count: warningCount }) }}</span>
+          <span v-else-if="health?.overall === 'error'">{{ t('doctor.hasErrors', { count: errorCount }) }}</span>
+        </div>
+
+        <!-- Check list -->
+        <div class="check-list">
+          <div v-for="check in health?.checks" :key="check.name" class="check-item">
+            <span class="check-dot" :class="check.status"></span>
+            <div class="check-info">
+              <div class="check-name">{{ check.name }}</div>
+              <div class="check-message">{{ check.message }}</div>
+            </div>
+            <router-link
+              v-if="check.action && check.status !== 'healthy'"
+              :to="check.action.route"
+              class="check-action"
+              @click="emit('close')"
+            >
+              {{ check.action.label }}
+            </router-link>
+          </div>
+        </div>
+
+        <!-- Refresh -->
+        <div class="drawer-footer">
+          <button class="btn-secondary" @click="fetchHealth" :disabled="loading">
+            {{ loading ? t('doctor.checking') : t('doctor.refresh') }}
+          </button>
+          <span v-if="lastChecked" class="last-checked">{{ t('doctor.lastChecked', { time: lastCheckedText }) }}</span>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { http } from '@/api/index'
+
+interface HealthAction { label: string; route: string }
+interface HealthCheck { name: string; status: string; message: string; action?: HealthAction }
+interface HealthResponse { overall: string; checks: HealthCheck[] }
+
+const props = defineProps<{ visible: boolean }>()
+const emit = defineEmits<{ (e: 'close'): void; (e: 'status', overall: string): void }>()
+const { t } = useI18n()
+
+const health = ref<HealthResponse | null>(null)
+const loading = ref(false)
+const lastChecked = ref<Date | null>(null)
+
+const warningCount = computed(() => health.value?.checks.filter(c => c.status === 'warning').length || 0)
+const errorCount = computed(() => health.value?.checks.filter(c => c.status === 'error').length || 0)
+const lastCheckedText = computed(() => {
+  if (!lastChecked.value) return ''
+  const secs = Math.floor((Date.now() - lastChecked.value.getTime()) / 1000)
+  if (secs < 60) return `${secs}s`
+  return `${Math.floor(secs / 60)}m`
+})
+
+async function fetchHealth() {
+  loading.value = true
+  try {
+    const res: any = await http.get('/system/health')
+    health.value = res.data || res
+    lastChecked.value = new Date()
+    emit('status', health.value?.overall || 'healthy')
+  } catch (e) {
+    console.error('Health check failed', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.visible, (v) => {
+  if (v) fetchHealth()
+})
+</script>
+
+<style scoped>
+.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1500; display: flex; justify-content: flex-end; }
+.drawer-panel { width: 400px; max-width: 90vw; height: 100%; background: var(--mc-bg-elevated); border-left: 1px solid var(--mc-border); display: flex; flex-direction: column; animation: slide-in 0.2s ease; }
+@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
+
+.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--mc-border-light); }
+.drawer-title { font-size: 16px; font-weight: 600; color: var(--mc-text-primary); margin: 0; }
+.drawer-close { width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); display: flex; align-items: center; justify-content: center; border-radius: 6px; }
+.drawer-close:hover { background: var(--mc-bg-sunken); }
+
+.status-banner { display: flex; align-items: center; gap: 10px; padding: 12px 24px; font-size: 14px; font-weight: 500; }
+.status-banner.healthy { color: var(--mc-success); background: rgba(90,138,90,0.08); }
+.status-banner.warning { color: var(--mc-primary); background: var(--mc-primary-bg); }
+.status-banner.error { color: var(--mc-danger); background: var(--mc-danger-bg); }
+.status-banner.loading { color: var(--mc-text-secondary); background: var(--mc-bg-sunken); }
+.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
+
+.check-list { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
+.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--mc-bg); border-radius: 8px; border: 1px solid var(--mc-border-light); }
+.check-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
+.check-dot.healthy { background: var(--mc-success); }
+.check-dot.warning { background: var(--mc-primary); }
+.check-dot.error { background: var(--mc-danger); }
+.check-info { flex: 1; min-width: 0; }
+.check-name { font-size: 13px; font-weight: 500; color: var(--mc-text-primary); }
+.check-message { font-size: 12px; color: var(--mc-text-secondary); margin-top: 2px; }
+.check-action { font-size: 12px; color: var(--mc-primary); text-decoration: none; white-space: nowrap; padding: 4px 10px; border: 1px solid var(--mc-primary); border-radius: 6px; flex-shrink: 0; }
+.check-action:hover { background: var(--mc-primary-bg); }
+
+.drawer-footer { padding: 16px 24px; border-top: 1px solid var(--mc-border-light); display: flex; align-items: center; gap: 12px; }
+.btn-secondary { padding: 6px 14px; background: var(--mc-bg-elevated); color: var(--mc-text-primary); border: 1px solid var(--mc-border); border-radius: 6px; font-size: 13px; cursor: pointer; }
+.btn-secondary:hover { background: var(--mc-bg-sunken); }
+.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
+.last-checked { font-size: 11px; color: var(--mc-text-tertiary); }
+</style>

mateclaw-ui/src/views/Onboarding/OnboardingWizard.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="onboarding-overlay">
+    <div class="onboarding-card">
+      <!-- Step indicator -->
+      <div class="step-indicator">
+        <span
+          v-for="s in steps"
+          :key="s"
+          class="step-dot"
+          :class="{ active: s === step }"
+        ></span>
+      </div>
+
+      <!-- Header -->
+      <div class="onboarding-header">
+        <h2 class="onboarding-title">{{ t('onboarding.title') }}</h2>
+        <p class="onboarding-subtitle">{{ t('onboarding.subtitle') }}</p>
+      </div>
+
+      <!-- Step labels -->
+      <div class="step-labels">
+        <span
+          v-for="(s, i) in steps"
+          :key="s"
+          class="step-label"
+          :class="{ active: s === step }"
+        >{{ i + 1 }}. {{ t(`onboarding.step${s.charAt(0).toUpperCase() + s.slice(1)}`) }}</span>
+      </div>
+
+      <!-- Step content -->
+      <div class="step-content">
+        <StepPathSelect
+          v-if="step === 'path'"
+          :ollama-online="ollamaOnline"
+          @select="onPathSelect"
+        />
+        <StepConfigure
+          v-else-if="step === 'configure'"
+          :path="selectedPath"
+          @done="step = 'verify'"
+        />
+        <StepVerify
+          v-else-if="step === 'verify'"
+          @complete="onComplete"
+        />
+      </div>
+
+      <!-- Footer -->
+      <div class="onboarding-footer">
+        <button
+          v-if="step !== 'path'"
+          class="btn-back"
+          @click="goBack"
+        >{{ t('onboarding.back') }}</button>
+        <div class="footer-spacer"></div>
+        <button class="btn-skip" @click="onSkip">{{ t('onboarding.skip') }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { http, setupApi } from '@/api/index'
+import StepPathSelect from './StepPathSelect.vue'
+import StepConfigure from './StepConfigure.vue'
+import StepVerify from './StepVerify.vue'
+
+const { t } = useI18n()
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+const steps = ['path', 'configure', 'verify'] as const
+const step = ref<'path' | 'configure' | 'verify'>('path')
+const selectedPath = ref<'local' | 'cloud'>('local')
+const ollamaOnline = ref(false)
+
+onMounted(async () => {
+  try {
+    const res: any = await setupApi.onboardingStatus()
+    const data = res?.data || res
+    ollamaOnline.value = !!data?.ollamaOnline
+  } catch {
+    ollamaOnline.value = false
+  }
+})
+
+function onPathSelect(path: 'local' | 'cloud') {
+  selectedPath.value = path
+  step.value = 'configure'
+}
+
+function goBack() {
+  if (step.value === 'verify') {
+    step.value = 'configure'
+  } else if (step.value === 'configure') {
+    step.value = 'path'
+  }
+}
+
+function onSkip() {
+  localStorage.setItem('mc-onboarding-done', 'true')
+  emit('close')
+}
+
+function onComplete() {
+  localStorage.setItem('mc-onboarding-done', 'true')
+  emit('close')
+}
+</script>
+
+<style scoped>
+.onboarding-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.onboarding-card {
+  background: var(--mc-bg-elevated);
+  border-radius: 16px;
+  border: 1px solid var(--mc-border);
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 32px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+}
+
+.step-indicator {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.step-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--mc-border);
+  transition: background 0.2s ease;
+}
+
+.step-dot.active {
+  background: var(--mc-primary);
+}
+
+.onboarding-header {
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.onboarding-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--mc-text-primary);
+  margin: 0 0 6px 0;
+}
+
+.onboarding-subtitle {
+  font-size: 14px;
+  color: var(--mc-text-secondary);
+  margin: 0;
+}
+
+.step-labels {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.step-label {
+  font-size: 12px;
+  color: var(--mc-text-tertiary);
+  transition: color 0.2s ease;
+}
+
+.step-label.active {
+  color: var(--mc-primary);
+  font-weight: 600;
+}
+
+.step-content {
+  min-height: 200px;
+}
+
+.onboarding-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--mc-border-light);
+}
+
+.footer-spacer {
+  flex: 1;
+}
+
+.btn-back {
+  padding: 8px 16px;
+  border: 1px solid var(--mc-border);
+  background: var(--mc-bg);
+  color: var(--mc-text-secondary);
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-back:hover {
+  border-color: var(--mc-primary);
+  color: var(--mc-primary);
+}
+
+.btn-skip {
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  color: var(--mc-text-tertiary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.btn-skip:hover {
+  color: var(--mc-text-secondary);
+}
+</style>

mateclaw-ui/src/views/Onboarding/StepConfigure.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="step-configure">
+    <!-- Local path: Ollama model discovery -->
+    <template v-if="path === 'local'">
+      <h3 class="section-title">{{ t('onboarding.selectModel') }}</h3>
+
+      <div v-if="loading" class="loading-text">{{ t('common.loading') }}</div>
+      <div v-else-if="models.length === 0" class="empty-text">
+        {{ t('onboarding.localDesc') }}
+      </div>
+      <div v-else class="model-list">
+        <label
+          v-for="model in models"
+          :key="model"
+          class="model-radio"
+          :class="{ selected: selectedModel === model }"
+        >
+          <input
+            type="radio"
+            :value="model"
+            v-model="selectedModel"
+            class="radio-input"
+          />
+          <span class="model-name">{{ model }}</span>
+        </label>
+      </div>
+
+      <button
+        class="btn-primary"
+        :disabled="!selectedModel || applying"
+        @click="applyLocalModel"
+      >{{ applying ? t('common.loading') : t('onboarding.setDefault') }}</button>
+    </template>
+
+    <!-- Cloud path: provider cards -->
+    <template v-else>
+      <h3 class="section-title">{{ t('onboarding.cloudTitle') }}</h3>
+
+      <div class="provider-cards">
+        <div
+          v-for="p in providers"
+          :key="p.id"
+          class="provider-card"
+          :class="{ selected: selectedProvider === p.id }"
+          @click="selectedProvider = p.id"
+        >
+          <span class="provider-name">{{ p.name }}</span>
+          <span class="provider-hint">{{ p.keyHint }}</span>
+        </div>
+      </div>
+
+      <div v-if="selectedProvider" class="api-key-section">
+        <label class="input-label">{{ t('onboarding.enterApiKey') }}</label>
+        <input
+          v-model="apiKey"
+          type="password"
+          class="text-input"
+          :placeholder="providers.find(p => p.id === selectedProvider)?.keyHint"
+        />
+        <div class="action-row">
+          <button
+            class="btn-secondary"
+            :disabled="!apiKey || testing"
+            @click="testConnection"
+          >{{ testing ? t('common.loading') : t('onboarding.testConnection') }}</button>
+          <span v-if="testResult === 'success'" class="test-success">{{ t('onboarding.testSuccess') }}</span>
+          <span v-if="testResult === 'failed'" class="test-failed">{{ t('onboarding.testFailed') }}</span>
+        </div>
+        <button
+          class="btn-primary"
+          :disabled="!apiKey || saving"
+          @click="saveCloudConfig"
+        >{{ saving ? t('common.loading') : t('onboarding.saveAndContinue') }}</button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { modelApi } from '@/api/index'
+
+const props = defineProps<{ path: 'local' | 'cloud' }>()
+const emit = defineEmits<{ (e: 'done'): void }>()
+const { t } = useI18n()
+
+// Local path state
+const loading = ref(false)
+const models = ref<string[]>([])
+const selectedModel = ref('')
+const applying = ref(false)
+
+// Cloud path state
+const providers = [
+  { id: 'openai', name: 'OpenAI', keyHint: 'sk-...' },
+  { id: 'dashscope', name: 'DashScope', keyHint: 'sk-...' },
+  { id: 'deepseek', name: 'DeepSeek', keyHint: 'sk-...' },
+]
+const selectedProvider = ref('')
+const apiKey = ref('')
+const testing = ref(false)
+const testResult = ref<'' | 'success' | 'failed'>('')
+const saving = ref(false)
+
+onMounted(async () => {
+  if (props.path === 'local') {
+    loading.value = true
+    try {
+      const res: any = await modelApi.discoverModels('ollama')
+      // DiscoverResult: { discoveredModels: [...], newModels: [...] }
+      const discovered = res?.data?.discoveredModels || res?.data?.newModels || res?.discoveredModels || res?.newModels || []
+      if (Array.isArray(discovered)) {
+        models.value = discovered.map((m: any) => typeof m === 'string' ? m : m.modelId || m.modelName || m.id || m.name)
+      }
+    } catch {
+      // Ollama not available
+    } finally {
+      loading.value = false
+    }
+  }
+})
+
+async function applyLocalModel() {
+  if (!selectedModel.value) return
+  applying.value = true
+  try {
+    await modelApi.applyDiscoveredModels('ollama', [selectedModel.value])
+    await modelApi.setActive({ providerId: 'ollama', model: selectedModel.value })
+    emit('done')
+  } catch {
+    // Handle error silently, user can retry
+  } finally {
+    applying.value = false
+  }
+}
+
+async function testConnection() {
+  if (!selectedProvider.value || !apiKey.value) return
+  testing.value = true
+  testResult.value = ''
+  try {
+    // Save key first so test can use it
+    await modelApi.updateProviderConfig(selectedProvider.value, { apiKey: apiKey.value })
+    await modelApi.testConnection(selectedProvider.value)
+    testResult.value = 'success'
+  } catch {
+    testResult.value = 'failed'
+  } finally {
+    testing.value = false
+  }
+}
+
+async function saveCloudConfig() {
+  if (!selectedProvider.value || !apiKey.value) return
+  saving.value = true
+  try {
+    await modelApi.updateProviderConfig(selectedProvider.value, { apiKey: apiKey.value })
+    emit('done')
+  } catch {
+    // Handle error silently
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.step-configure {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--mc-text-primary);
+  margin: 0;
+}
+
+.loading-text,
+.empty-text {
+  font-size: 13px;
+  color: var(--mc-text-tertiary);
+  text-align: center;
+  padding: 24px 0;
+}
+
+.model-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.model-radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: var(--mc-bg);
+}
+
+.model-radio:hover {
+  border-color: var(--mc-primary);
+}
+
+.model-radio.selected {
+  border-color: var(--mc-primary);
+  background: var(--mc-primary-bg);
+}
+
+.radio-input {
+  accent-color: var(--mc-primary);
+}
+
+.model-name {
+  font-size: 14px;
+  color: var(--mc-text-primary);
+}
+
+.provider-cards {
+  display: flex;
+  gap: 10px;
+}
+
+.provider-card {
+  flex: 1;
+  padding: 16px 12px;
+  border: 2px solid var(--mc-border);
+  border-radius: 10px;
+  background: var(--mc-bg);
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.provider-card:hover {
+  border-color: var(--mc-primary);
+}
+
+.provider-card.selected {
+  border-color: var(--mc-primary);
+  background: var(--mc-primary-bg);
+}
+
+.provider-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--mc-text-primary);
+}
+
+.provider-hint {
+  font-size: 12px;
+  color: var(--mc-text-tertiary);
+}
+
+.api-key-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.input-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--mc-text-secondary);
+}
+
+.text-input {
+  padding: 10px 14px;
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  background: var(--mc-bg);
+  color: var(--mc-text-primary);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.text-input:focus {
+  border-color: var(--mc-primary);
+}
+
+.action-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.test-success {
+  font-size: 13px;
+  color: var(--mc-success);
+  font-weight: 500;
+}
+
+.test-failed {
+  font-size: 13px;
+  color: var(--mc-danger);
+  font-weight: 500;
+}
+
+.btn-primary {
+  padding: 10px 20px;
+  background: var(--mc-primary);
+  color: var(--mc-text-inverse);
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  align-self: flex-start;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--mc-primary-hover);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  padding: 8px 16px;
+  background: var(--mc-bg);
+  color: var(--mc-text-primary);
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  border-color: var(--mc-primary);
+  color: var(--mc-primary);
+}
+
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

mateclaw-ui/src/views/Onboarding/StepPathSelect.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="path-select">
+    <div
+      class="path-card"
+      @click="emit('select', 'local')"
+    >
+      <div class="path-icon">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="4" y="2" width="16" height="20" rx="2" />
+          <line x1="8" y1="6" x2="16" y2="6" />
+          <line x1="8" y1="10" x2="16" y2="10" />
+          <circle cx="12" cy="16" r="2" />
+        </svg>
+      </div>
+      <div class="path-info">
+        <div class="path-title-row">
+          <span class="path-title">{{ t('onboarding.localTitle') }}</span>
+          <span v-if="ollamaOnline" class="detected-badge">{{ t('onboarding.localDetected') }}</span>
+        </div>
+        <p class="path-desc">{{ t('onboarding.localDesc') }}</p>
+      </div>
+    </div>
+
+    <div
+      class="path-card"
+      @click="emit('select', 'cloud')"
+    >
+      <div class="path-icon">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" />
+        </svg>
+      </div>
+      <div class="path-info">
+        <span class="path-title">{{ t('onboarding.cloudTitle') }}</span>
+        <p class="path-desc">{{ t('onboarding.cloudDesc') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+defineProps<{ ollamaOnline: boolean }>()
+const emit = defineEmits<{ (e: 'select', path: 'local' | 'cloud'): void }>()
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.path-select {
+  display: flex;
+  gap: 16px;
+}
+
+.path-card {
+  flex: 1;
+  padding: 24px;
+  border: 2px solid var(--mc-border);
+  border-radius: 12px;
+  background: var(--mc-bg);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
+}
+
+.path-card:hover {
+  border-color: var(--mc-primary);
+  background: var(--mc-primary-bg);
+}
+
+.path-icon {
+  color: var(--mc-text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.path-card:hover .path-icon {
+  color: var(--mc-primary);
+}
+
+.path-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.path-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.path-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--mc-text-primary);
+}
+
+.detected-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--mc-success);
+  color: var(--mc-text-inverse);
+  font-weight: 500;
+}
+
+.path-desc {
+  font-size: 13px;
+  color: var(--mc-text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+</style>

mateclaw-ui/src/views/Onboarding/StepVerify.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="step-verify">
+    <h3 class="verify-title">{{ t('onboarding.verifyTitle') }}</h3>
+
+    <!-- Mini chat area -->
+    <div class="chat-area">
+      <!-- User message -->
+      <div v-if="sent" class="chat-msg user-msg">
+        <span>{{ message }}</span>
+      </div>
+
+      <!-- Assistant response -->
+      <div v-if="response" class="chat-msg assistant-msg">
+        <span>{{ response }}</span>
+      </div>
+
+      <!-- Loading indicator -->
+      <div v-if="streaming && !response" class="chat-msg assistant-msg">
+        <span class="loading-dots">...</span>
+      </div>
+    </div>
+
+    <!-- Input area -->
+    <div v-if="!sent" class="input-area">
+      <input
+        v-model="message"
+        class="text-input"
+        :placeholder="t('onboarding.verifyMessage')"
+        @keydown.enter="sendMessage"
+      />
+      <button
+        class="btn-send"
+        :disabled="!message.trim()"
+        @click="sendMessage"
+      >{{ t('onboarding.send') }}</button>
+    </div>
+
+    <!-- Complete button -->
+    <button
+      v-if="completed"
+      class="btn-start"
+      @click="emit('complete')"
+    >{{ t('onboarding.startUsing') }}</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const emit = defineEmits<{ (e: 'complete'): void }>()
+const { t } = useI18n()
+
+const message = ref(t('onboarding.verifyMessage'))
+const sent = ref(false)
+const streaming = ref(false)
+const response = ref('')
+const completed = ref(false)
+
+async function sendMessage() {
+  if (!message.value.trim()) return
+  sent.value = true
+  streaming.value = true
+
+  try {
+    const headers: Record<string, string> = {
+      Accept: 'text/event-stream',
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-cache',
+    }
+    const token = localStorage.getItem('token')
+    if (token) {
+      headers.Authorization = `Bearer ${token}`
+    }
+
+    const res = await fetch('/api/v1/chat/stream', {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        message: message.value,
+      }),
+    })
+
+    if (!res.ok || !res.body) {
+      response.value = 'Error: Unable to connect'
+      completed.value = true
+      streaming.value = false
+      return
+    }
+
+    const reader = res.body.getReader()
+    const decoder = new TextDecoder()
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+
+      const chunk = decoder.decode(value, { stream: true })
+      const lines = chunk.split('\n')
+
+      for (const line of lines) {
+        if (line.startsWith('data:')) {
+          const data = line.slice(5).trim()
+          if (data === '[DONE]') continue
+          try {
+            const parsed = JSON.parse(data)
+            if (parsed.content) {
+              response.value += parsed.content
+            } else if (parsed.result) {
+              response.value += parsed.result
+            } else if (typeof parsed === 'string') {
+              response.value += parsed
+            }
+          } catch {
+            // Not JSON, treat as raw text
+            if (data && data !== '[DONE]') {
+              response.value += data
+            }
+          }
+        }
+      }
+    }
+  } catch {
+    if (!response.value) {
+      response.value = 'Error: Connection failed'
+    }
+  } finally {
+    streaming.value = false
+    completed.value = true
+  }
+}
+</script>
+
+<style scoped>
+.step-verify {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.verify-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--mc-text-primary);
+  margin: 0;
+}
+
+.chat-area {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 120px;
+  max-height: 250px;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--mc-bg-sunken);
+  border-radius: 10px;
+  border: 1px solid var(--mc-border-light);
+}
+
+.chat-msg {
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-size: 14px;
+  line-height: 1.6;
+  max-width: 85%;
+  word-break: break-word;
+}
+
+.user-msg {
+  align-self: flex-end;
+  background: var(--mc-primary);
+  color: var(--mc-text-inverse);
+}
+
+.assistant-msg {
+  align-self: flex-start;
+  background: var(--mc-bg-elevated);
+  color: var(--mc-text-primary);
+  border: 1px solid var(--mc-border-light);
+}
+
+.loading-dots {
+  animation: blink 1.2s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+.input-area {
+  display: flex;
+  gap: 10px;
+}
+
+.text-input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--mc-border);
+  border-radius: 8px;
+  background: var(--mc-bg);
+  color: var(--mc-text-primary);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.text-input:focus {
+  border-color: var(--mc-primary);
+}
+
+.btn-send {
+  padding: 10px 20px;
+  background: var(--mc-primary);
+  color: var(--mc-text-inverse);
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  white-space: nowrap;
+}
+
+.btn-send:hover:not(:disabled) {
+  background: var(--mc-primary-hover);
+}
+
+.btn-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-start {
+  padding: 12px 24px;
+  background: var(--mc-primary);
+  color: var(--mc-text-inverse);
+  border: none;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  align-self: center;
+}
+
+.btn-start:hover {
+  background: var(--mc-primary-hover);
+}
+</style>

mateclaw-ui/src/views/Settings/Layout.vue

@@ -2,16 +2,18 @@
   <div class="settings-layout">
     <div class="settings-nav">
       <h2 class="nav-title">{{ t('settings.title') }}</h2>
-      <router-link
+      <template v-for="section in sections" :key="section.id">
-        v-for="section in sections"
+        <div v-if="section.isDivider" class="nav-divider">{{ section.label }}</div>
-        :key="section.id"
+        <router-link
-        :to="section.path"
+          v-else
-        class="nav-item"
+          :to="section.path"
-        :class="{ active: isActive(section.path) }"
+          class="nav-item"
-      >
+          :class="{ active: isActive(section.path) }"
-        <span class="nav-icon" v-html="section.icon"></span>
+        >
-        {{ section.label }}
+          <span class="nav-icon" v-html="section.icon"></span>
-      </router-link>
+          {{ section.label }}
+        </router-link>
+      </template>
     </div>
 
     <div class="settings-content">
@@ -71,6 +73,38 @@ const sections = computed(() => [
     label: t('settings.sections.video'),
     icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>',
   },
+  // Divider: Advanced
+  { id: 'divider-advanced', path: '', label: t('settings.sections.advanced'), icon: '', isDivider: true },
+  {
+    id: 'workspace',
+    path: '/settings/workspace',
+    label: t('nav.workspace'),
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>',
+  },
+  {
+    id: 'cron-jobs',
+    path: '/settings/cron-jobs',
+    label: t('nav.cronJobs'),
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
+  },
+  {
+    id: 'datasources',
+    path: '/settings/datasources',
+    label: t('nav.datasources'),
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>',
+  },
+  {
+    id: 'mcp-servers',
+    path: '/settings/mcp-servers',
+    label: t('nav.mcpServers'),
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>',
+  },
+  {
+    id: 'token-usage',
+    path: '/settings/token-usage',
+    label: t('nav.tokenUsage'),
+    icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
+  },
   {
     id: 'about',
     path: '/settings/about',
@@ -94,6 +128,7 @@ function isActive(path: string) {
 .nav-item + .nav-item { margin-top: 2px; }
 .nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
 .nav-icon :deep(svg) { width: 18px; height: 18px; display: block; }
+.nav-divider { font-size: 11px; font-weight: 600; color: var(--mc-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; padding: 16px 8px 6px; margin-top: 4px; }
 .settings-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px; }
 
 @media (max-width: 900px) {

mateclaw-ui/src/views/layout/MainLayout.vue

@@ -54,8 +54,13 @@
         </template>
       </nav>
 
-      <!-- 底部用户信息 -->
+      <!-- 底部 -->
       <div class="sidebar-footer">
+        <!-- Doctor 健康指示器 -->
+        <button class="health-indicator" :class="healthStatus" @click="showDoctor = true" :title="t('doctor.title')">
+          <span class="health-dot"></span>
+          <span v-if="!sidebarCollapsed" class="health-label">{{ t('doctor.title') }}</span>
+        </button>
         <!-- 主题切换 -->
         <div class="theme-toggle-row">
           <button
@@ -104,6 +109,9 @@
       </div>
       <router-view />
     </main>
+
+    <OnboardingWizard v-if="showOnboarding" @close="showOnboarding = false" />
+    <DoctorDrawer :visible="showDoctor" @close="showDoctor = false" @status="onHealthStatus" />
   </div>
 </template>
 
@@ -114,12 +122,32 @@ import { useI18n } from 'vue-i18n'
 import { useThemeStore } from '@/stores/useThemeStore'
 import { version as appVersion } from '../../../package.json'
 import type { ThemeMode } from '@/stores/useThemeStore'
+import { http, setupApi } from '@/api/index'
+import OnboardingWizard from '@/views/Onboarding/OnboardingWizard.vue'
+import DoctorDrawer from '@/views/Doctor/DoctorDrawer.vue'
 
 const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
 const themeStore = useThemeStore()
 const sidebarCollapsed = ref(localStorage.getItem('mc-sidebar-collapsed') === 'true')
+const showOnboarding = ref(false)
+const showDoctor = ref(false)
+const healthStatus = ref('unknown')
+
+function onHealthStatus(status: string) {
+  healthStatus.value = status
+}
+
+async function fetchHealthStatus() {
+  try {
+    const res: any = await http.get('/system/health')
+    const data = res?.data || res
+    healthStatus.value = data?.overall || 'healthy'
+  } catch {
+    healthStatus.value = 'unknown'
+  }
+}
 
 // 移动端状态
 const isMobile = ref(false)
@@ -131,10 +159,25 @@ function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
   if (!e.matches) mobileMenuOpen.value = false
 }
 
-onMounted(() => {
+onMounted(async () => {
   mobileQuery = window.matchMedia('(max-width: 768px)')
   handleMobileChange(mobileQuery)
   mobileQuery.addEventListener('change', handleMobileChange)
+
+  // Check onboarding status
+  if (!localStorage.getItem('mc-onboarding-done')) {
+    try {
+      const res: any = await setupApi.onboardingStatus()
+      if (res?.data && !res.data.hasDefaultModel) {
+        showOnboarding.value = true
+      }
+    } catch {
+      // If endpoint doesn't exist yet, skip onboarding
+    }
+  }
+
+  // Fetch initial health status for sidebar indicator
+  fetchHealthStatus()
 })
 
 onBeforeUnmount(() => {
@@ -171,97 +214,61 @@ const themeOptions = computed<{ value: ThemeMode; label: string; icon: string }[
 
 const navGroups = computed(() => [
   {
-    key: 'chat',
+    key: 'core',
-    label: t('nav.chat'),
+    label: t('nav.core'),
     items: [
       {
         path: '/chat',
         label: t('nav.chat'),
         icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`,
       },
+      {
+        path: '/agents',
+        label: t('nav.agents'),
+        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/></svg>`,
+      },
+      {
+        path: '/wiki',
+        label: t('nav.wiki'),
+        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/></svg>`,
+      },
     ],
   },
   {
-    key: 'control',
+    key: 'connect',
-    label: t('nav.control'),
+    label: t('nav.connect'),
     items: [
       {
         path: '/channels',
         label: t('nav.channels'),
         icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.73a16 16 0 0 0 6.29 6.29l1.62-1.62a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>`,
       },
-      {
-        path: '/sessions',
-        label: t('nav.sessions'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
-      },
-      {
-        path: '/cron-jobs',
-        label: t('nav.cronJobs'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`,
-      },
-    ],
-  },
-  {
-    key: 'agent',
-    label: t('nav.agent'),
-    items: [
-      {
-        path: '/workspace',
-        label: t('nav.workspace'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>`,
-      },
       {
         path: '/skills',
         label: t('nav.skills'),
         icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`,
       },
-      {
-        path: '/wiki',
-        label: t('nav.wiki'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/></svg>`,
-      },
       {
         path: '/tools',
         label: t('nav.tools'),
         icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>`,
       },
-      {
-        path: '/datasources',
-        label: t('nav.datasources'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`,
-      },
-      {
-        path: '/mcp-servers',
-        label: t('nav.mcpServers'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>`,
-      },
     ],
   },
   {
-    key: 'settings',
+    key: 'system',
-    label: t('nav.settingsGroup'),
+    label: t('nav.system'),
     items: [
       {
-        path: '/agents',
+        path: '/settings/models',
-        label: t('nav.agents'),
+        label: t('nav.settings'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/></svg>`,
+        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>`,
       },
       {
         path: '/security',
         label: t('nav.security'),
         icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
       },
-      {
-        path: '/token-usage',
-        label: t('nav.tokenUsage'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>`,
-      },
-      {
-        path: '/settings/models',
-        label: t('nav.settings'),
-        icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>`,
-      },
     ],
   },
 ])
@@ -474,6 +481,13 @@ function logout() {
   border-top: 1px solid var(--mc-border-light);
   padding: 10px 12px;
 }
+.health-indicator { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none; background: none; border-radius: 6px; cursor: pointer; color: var(--mc-text-secondary); font-size: 12px; margin-bottom: 6px; }
+.health-indicator:hover { background: var(--mc-bg-sunken); }
+.health-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.health-indicator.healthy .health-dot { background: var(--mc-success); }
+.health-indicator.warning .health-dot { background: var(--mc-primary); }
+.health-indicator.error .health-dot { background: var(--mc-danger); }
+.health-indicator.unknown .health-dot { background: var(--mc-text-tertiary); }
 
 /* 主题切换 */
 .theme-toggle-row {