feat: add semantic graph design for static code analysis

- Introduced a comprehensive design document for a Code Semantic Graph aimed at enhancing static analysis capabilities.
- Defined the architecture, core components, and implementation steps for analyzing function calls, data flow, and dependencies.
- Included detailed specifications for nodes and edges in the graph, along with database schema for storage.
- Outlined phases for implementation, technical challenges, success metrics, and application scenarios.

ccw/src/templates/dashboard-js/components/mcp-manager.js

@@ -87,15 +87,23 @@ async function toggleMcpServer(serverName, enable) {
   }
 }
 
-async function copyMcpServerToProject(serverName, serverConfig) {
+async function copyMcpServerToProject(serverName, serverConfig, configType = null) {
   try {
+    // If configType not specified, ask user to choose
+    if (!configType) {
+      const choice = await showConfigTypeDialog();
+      if (!choice) return null; // User cancelled
+      configType = choice;
+    }
+
     const response = await fetch('/api/mcp-copy-server', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         projectPath: projectPath,
         serverName: serverName,
-        serverConfig: serverConfig
+        serverConfig: serverConfig,
+        configType: configType  // 'claude' for .claude.json, 'mcp' for .mcp.json
       })
     });
 
@@ -105,7 +113,8 @@ async function copyMcpServerToProject(serverName, serverConfig) {
     if (result.success) {
       await loadMcpConfig();
       renderMcpManager();
-      showRefreshToast(`MCP server "${serverName}" added to project`, 'success');
+      const location = configType === 'mcp' ? '.mcp.json' : '.claude.json';
+      showRefreshToast(`MCP server "${serverName}" added to project (${location})`, 'success');
     }
     return result;
   } catch (err) {
@@ -115,6 +124,53 @@ async function copyMcpServerToProject(serverName, serverConfig) {
   }
 }
 
+// Show dialog to let user choose config type
+function showConfigTypeDialog() {
+  return new Promise((resolve) => {
+    const dialog = document.createElement('div');
+    dialog.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
+    dialog.innerHTML = `
+      <div class="bg-card border border-border rounded-lg shadow-lg p-6 max-w-md w-full mx-4">
+        <h3 class="text-lg font-semibold mb-4">${t('mcp.chooseInstallLocation')}</h3>
+        <div class="space-y-3 mb-6">
+          <button class="config-type-option w-full text-left px-4 py-3 border border-border rounded-lg hover:bg-accent hover:border-primary transition-all" data-type="claude">
+            <div class="font-medium">${t('mcp.installToClaudeJson')}</div>
+            <div class="text-sm text-muted-foreground mt-1">${t('mcp.claudeJsonDesc')}</div>
+          </button>
+          <button class="config-type-option w-full text-left px-4 py-3 border border-border rounded-lg hover:bg-accent hover:border-primary transition-all" data-type="mcp">
+            <div class="font-medium">${t('mcp.installToMcpJson')}</div>
+            <div class="text-sm text-muted-foreground mt-1">${t('mcp.mcpJsonDesc')}</div>
+          </button>
+        </div>
+        <button class="cancel-btn w-full px-4 py-2 border border-border rounded-lg hover:bg-accent transition-colors">${t('common.cancel')}</button>
+      </div>
+    `;
+    document.body.appendChild(dialog);
+
+    const options = dialog.querySelectorAll('.config-type-option');
+    options.forEach(btn => {
+      btn.addEventListener('click', () => {
+        resolve(btn.dataset.type);
+        document.body.removeChild(dialog);
+      });
+    });
+
+    const cancelBtn = dialog.querySelector('.cancel-btn');
+    cancelBtn.addEventListener('click', () => {
+      resolve(null);
+      document.body.removeChild(dialog);
+    });
+
+    // Close on backdrop click
+    dialog.addEventListener('click', (e) => {
+      if (e.target === dialog) {
+        resolve(null);
+        document.body.removeChild(dialog);
+      }
+    });
+  });
+}
+
 async function removeMcpServerFromProject(serverName) {
   try {
     const response = await fetch('/api/mcp-remove-server', {

ccw/src/templates/dashboard-js/i18n.js

@@ -431,7 +431,31 @@ const i18n = {
     'mcp.jsonFormatsHint': 'Supports {"servers": {...}}, {"mcpServers": {...}}, and direct server config formats.',
     'mcp.previewServers': 'Preview (servers to be added):',
     'mcp.create': 'Create',
-    
+    'mcp.chooseInstallLocation': 'Choose Installation Location',
+    'mcp.installToClaudeJson': 'Install to .claude.json',
+    'mcp.installToMcpJson': 'Install to .mcp.json (Recommended)',
+    'mcp.claudeJsonDesc': 'Save in root .claude.json projects section (shared config)',
+    'mcp.mcpJsonDesc': 'Save in project .mcp.json file (recommended for version control)',
+
+    // MCP Templates
+    'mcp.templates': 'MCP Templates',
+    'mcp.savedTemplates': 'saved templates',
+    'mcp.saveAsTemplate': 'Save as Template',
+    'mcp.enterTemplateName': 'Enter template name',
+    'mcp.enterTemplateDesc': 'Enter template description (optional)',
+    'mcp.enterServerName': 'Enter server name',
+    'mcp.templateSaved': 'Template "{name}" saved successfully',
+    'mcp.templateSaveFailed': 'Failed to save template: {error}',
+    'mcp.templateNotFound': 'Template "{name}" not found',
+    'mcp.templateInstalled': 'Server "{name}" installed successfully',
+    'mcp.templateInstallFailed': 'Failed to install template: {error}',
+    'mcp.deleteTemplate': 'Delete Template',
+    'mcp.deleteTemplateConfirm': 'Delete template "{name}"?',
+    'mcp.templateDeleted': 'Template "{name}" deleted successfully',
+    'mcp.templateDeleteFailed': 'Failed to delete template: {error}',
+    'mcp.toProject': 'To Project',
+    'mcp.toGlobal': 'To Global',
+
     // Hook Manager
     'hook.projectHooks': 'Project Hooks',
     'hook.projectFile': '.claude/settings.json',
@@ -1346,6 +1370,11 @@ const i18n = {
     'mcp.jsonFormatsHint': '支持 {"servers": {...}}、{"mcpServers": {...}} 和直接服务器配置格式。',
     'mcp.previewServers': '预览（将添加的服务器）:',
     'mcp.create': '创建',
+    'mcp.chooseInstallLocation': '选择安装位置',
+    'mcp.installToClaudeJson': '安装到 .claude.json',
+    'mcp.installToMcpJson': '安装到 .mcp.json（推荐）',
+    'mcp.claudeJsonDesc': '保存在根目录 .claude.json projects 字段下（共享配置）',
+    'mcp.mcpJsonDesc': '保存在项目 .mcp.json 文件中（推荐用于版本控制）',
     
     // Hook Manager
     'hook.projectHooks': '项目钩子',

ccw/src/templates/dashboard-js/views/mcp-manager.js

@@ -43,6 +43,9 @@ async function renderMcpManager() {
     await loadMcpConfig();
   }
 
+  // Load MCP templates
+  await loadMcpTemplates();
+
   const currentPath = projectPath.replace(/\//g, '\\');
   const projectData = mcpAllProjects[currentPath] || {};
   const projectServers = projectData.mcpServers || {};
@@ -269,6 +272,77 @@ async function renderMcpManager() {
         `}
       </div>
 
+      <!-- MCP Templates Section -->
+      ${mcpTemplates.length > 0 ? `
+      <div class="mcp-section mt-6">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-foreground flex items-center gap-2">
+            <i data-lucide="layout-template" class="w-5 h-5"></i>
+            ${t('mcp.templates')}
+          </h3>
+          <span class="text-sm text-muted-foreground">${mcpTemplates.length} ${t('mcp.savedTemplates')}</span>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          ${mcpTemplates.map(template => `
+            <div class="mcp-template-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all">
+              <div class="flex items-start justify-between mb-3">
+                <div class="flex-1 min-w-0">
+                  <h4 class="font-semibold text-foreground truncate flex items-center gap-2">
+                    <i data-lucide="layout-template" class="w-4 h-4 shrink-0"></i>
+                    <span class="truncate">${escapeHtml(template.name)}</span>
+                  </h4>
+                  ${template.description ? `
+                    <p class="text-xs text-muted-foreground mt-1 line-clamp-2">${escapeHtml(template.description)}</p>
+                  ` : ''}
+                </div>
+              </div>
+
+              <div class="mcp-server-details text-sm space-y-1 mb-3">
+                <div class="flex items-center gap-2 text-muted-foreground">
+                  <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">cmd</span>
+                  <span class="truncate text-xs" title="${escapeHtml(template.serverConfig.command)}">${escapeHtml(template.serverConfig.command)}</span>
+                </div>
+                ${template.serverConfig.args && template.serverConfig.args.length > 0 ? `
+                  <div class="flex items-start gap-2 text-muted-foreground">
+                    <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">args</span>
+                    <span class="text-xs font-mono truncate" title="${escapeHtml(template.serverConfig.args.join(' '))}">${escapeHtml(template.serverConfig.args.slice(0, 2).join(' '))}${template.serverConfig.args.length > 2 ? '...' : ''}</span>
+                  </div>
+                ` : ''}
+              </div>
+
+              <div class="mt-3 pt-3 border-t border-border flex items-center justify-between gap-2">
+                <div class="flex items-center gap-2">
+                  <button class="text-xs text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
+                          data-template-name="${escapeHtml(template.name)}"
+                          data-scope="project"
+                          data-action="install-template"
+                          title="${t('mcp.installToProject')}">
+                    <i data-lucide="download" class="w-3 h-3"></i>
+                    ${t('mcp.toProject')}
+                  </button>
+                  <button class="text-xs text-success hover:text-success/80 transition-colors flex items-center gap-1"
+                          data-template-name="${escapeHtml(template.name)}"
+                          data-scope="global"
+                          data-action="install-template"
+                          title="${t('mcp.installToGlobal')}">
+                    <i data-lucide="globe" class="w-3 h-3"></i>
+                    ${t('mcp.toGlobal')}
+                  </button>
+                </div>
+                <button class="text-xs text-destructive hover:text-destructive/80 transition-colors"
+                        data-template-name="${escapeHtml(template.name)}"
+                        data-action="delete-template"
+                        title="${t('mcp.deleteTemplate')}">
+                  <i data-lucide="trash-2" class="w-3 h-3"></i>
+                </button>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      </div>
+      ` : ''}
+
       <!-- All Projects MCP Overview Table -->
       <div class="mcp-section mt-6">
         <div class="flex items-center justify-between mb-4">
@@ -402,15 +476,25 @@ function renderProjectAvailableServerCard(entry) {
         ` : ''}
       </div>
 
-      <div class="mt-3 pt-3 border-t border-border flex items-center justify-between">
-        <button class="text-xs text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
-                data-server-name="${escapeHtml(name)}"
-                data-server-config="${escapeHtml(JSON.stringify(config))}"
-                data-scope="${source === 'global' ? 'global' : 'project'}"
-                data-action="copy-install-cmd">
-          <i data-lucide="copy" class="w-3 h-3"></i>
-          ${t('mcp.copyInstallCmd')}
-        </button>
+      <div class="mt-3 pt-3 border-t border-border flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <button class="text-xs text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
+                  data-server-name="${escapeHtml(name)}"
+                  data-server-config="${escapeHtml(JSON.stringify(config))}"
+                  data-scope="${source === 'global' ? 'global' : 'project'}"
+                  data-action="copy-install-cmd">
+            <i data-lucide="copy" class="w-3 h-3"></i>
+            ${t('mcp.copyInstallCmd')}
+          </button>
+          <button class="text-xs text-success hover:text-success/80 transition-colors flex items-center gap-1"
+                  data-server-name="${escapeHtml(name)}"
+                  data-server-config="${escapeHtml(JSON.stringify(config))}"
+                  data-action="save-as-template"
+                  title="${t('mcp.saveAsTemplate')}">
+            <i data-lucide="save" class="w-3 h-3"></i>
+            ${t('mcp.saveAsTemplate')}
+          </button>
+        </div>
         ${canRemove ? `
           <button class="text-xs text-destructive hover:text-destructive/80 transition-colors"
                   data-server-name="${escapeHtml(name)}"
@@ -617,4 +701,156 @@ function attachMcpEventListeners() {
       await copyMcpInstallCommand(serverName, serverConfig, scope);
     });
   });
+
+  // Save as template buttons
+  document.querySelectorAll('.mcp-server-card button[data-action="save-as-template"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const serverName = btn.dataset.serverName;
+      const serverConfig = JSON.parse(btn.dataset.serverConfig);
+      await saveMcpAsTemplate(serverName, serverConfig);
+    });
+  });
+
+  // Install from template buttons
+  document.querySelectorAll('.mcp-template-card button[data-action="install-template"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const templateName = btn.dataset.templateName;
+      const scope = btn.dataset.scope || 'project';
+      await installFromTemplate(templateName, scope);
+    });
+  });
+
+  // Delete template buttons
+  document.querySelectorAll('.mcp-template-card button[data-action="delete-template"]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const templateName = btn.dataset.templateName;
+      if (confirm(t('mcp.deleteTemplateConfirm', { name: templateName }))) {
+        await deleteMcpTemplate(templateName);
+      }
+    });
+  });
+}
+
+// ========================================
+// MCP Template Management Functions
+// ========================================
+
+let mcpTemplates = [];
+
+/**
+ * Load all MCP templates from API
+ */
+async function loadMcpTemplates() {
+  try {
+    const response = await fetch('/api/mcp-templates');
+    const data = await response.json();
+
+    if (data.success) {
+      mcpTemplates = data.templates || [];
+      console.log('[MCP Templates] Loaded', mcpTemplates.length, 'templates');
+    } else {
+      console.error('[MCP Templates] Failed to load:', data.error);
+      mcpTemplates = [];
+    }
+
+    return mcpTemplates;
+  } catch (error) {
+    console.error('[MCP Templates] Error loading templates:', error);
+    mcpTemplates = [];
+    return [];
+  }
+}
+
+/**
+ * Save MCP server configuration as a template
+ */
+async function saveMcpAsTemplate(serverName, serverConfig) {
+  try {
+    // Prompt for template name and description
+    const templateName = prompt(t('mcp.enterTemplateName'), serverName);
+    if (!templateName) return;
+
+    const description = prompt(t('mcp.enterTemplateDesc'), `Template for ${serverName}`);
+
+    const payload = {
+      name: templateName,
+      description: description || '',
+      serverConfig: serverConfig,
+      category: 'user'
+    };
+
+    const response = await fetch('/api/mcp-templates', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      showNotification(t('mcp.templateSaved', { name: templateName }), 'success');
+      await loadMcpTemplates();
+      await renderMcpManager(); // Refresh view
+    } else {
+      showNotification(t('mcp.templateSaveFailed', { error: data.error }), 'error');
+    }
+  } catch (error) {
+    console.error('[MCP] Save template error:', error);
+    showNotification(t('mcp.templateSaveFailed', { error: error.message }), 'error');
+  }
+}
+
+/**
+ * Install MCP server from template
+ */
+async function installFromTemplate(templateName, scope = 'project') {
+  try {
+    // Find template
+    const template = mcpTemplates.find(t => t.name === templateName);
+    if (!template) {
+      showNotification(t('mcp.templateNotFound', { name: templateName }), 'error');
+      return;
+    }
+
+    // Prompt for server name (default to template name)
+    const serverName = prompt(t('mcp.enterServerName'), templateName);
+    if (!serverName) return;
+
+    // Install based on scope
+    if (scope === 'project') {
+      await installMcpToProject(serverName, template.serverConfig);
+    } else if (scope === 'global') {
+      await addGlobalMcpServer(serverName, template.serverConfig);
+    }
+
+    showNotification(t('mcp.templateInstalled', { name: serverName }), 'success');
+    await renderMcpManager();
+  } catch (error) {
+    console.error('[MCP] Install from template error:', error);
+    showNotification(t('mcp.templateInstallFailed', { error: error.message }), 'error');
+  }
+}
+
+/**
+ * Delete MCP template
+ */
+async function deleteMcpTemplate(templateName) {
+  try {
+    const response = await fetch(`/api/mcp-templates/${encodeURIComponent(templateName)}`, {
+      method: 'DELETE'
+    });
+
+    const data = await response.json();
+
+    if (data.success) {
+      showNotification(t('mcp.templateDeleted', { name: templateName }), 'success');
+      await loadMcpTemplates();
+      await renderMcpManager();
+    } else {
+      showNotification(t('mcp.templateDeleteFailed', { error: data.error }), 'error');
+    }
+  } catch (error) {
+    console.error('[MCP] Delete template error:', error);
+    showNotification(t('mcp.templateDeleteFailed', { error: error.message }), 'error');
+  }
 }

ccw/src/templates/dashboard-js/views/rules-manager.js

@@ -588,9 +588,21 @@ function closeRuleCreateModal(event) {
 
 function selectRuleLocation(location) {
   ruleCreateState.location = location;
-  // Re-render modal
-  closeRuleCreateModal();
-  openRuleCreateModal();
+
+  // Update button styles without re-rendering modal
+  const buttons = document.querySelectorAll('.location-btn');
+  buttons.forEach(btn => {
+    const isProject = btn.querySelector('.font-medium')?.textContent?.includes(t('rules.projectRules'));
+    const isUser = btn.querySelector('.font-medium')?.textContent?.includes(t('rules.userRules'));
+
+    if ((isProject && location === 'project') || (isUser && location === 'user')) {
+      btn.classList.remove('border-border', 'hover:border-primary/50');
+      btn.classList.add('border-primary', 'bg-primary/10');
+    } else {
+      btn.classList.remove('border-primary', 'bg-primary/10');
+      btn.classList.add('border-border', 'hover:border-primary/50');
+    }
+  });
 }
 
 function toggleRuleConditional() {

ccw/src/templates/dashboard-js/views/skills-manager.js

@@ -569,9 +569,21 @@ function closeSkillCreateModal(event) {
 
 function selectSkillLocation(location) {
   skillCreateState.location = location;
-  // Re-render modal
-  closeSkillCreateModal();
-  openSkillCreateModal();
+
+  // Update button styles without re-rendering modal
+  const buttons = document.querySelectorAll('.location-btn');
+  buttons.forEach(btn => {
+    const isProject = btn.querySelector('.font-medium')?.textContent?.includes(t('skills.projectSkills'));
+    const isUser = btn.querySelector('.font-medium')?.textContent?.includes(t('skills.userSkills'));
+
+    if ((isProject && location === 'project') || (isUser && location === 'user')) {
+      btn.classList.remove('border-border', 'hover:border-primary/50');
+      btn.classList.add('border-primary', 'bg-primary/10');
+    } else {
+      btn.classList.remove('border-primary', 'bg-primary/10');
+      btn.classList.add('border-border', 'hover:border-primary/50');
+    }
+  });
 }
 
 function switchSkillCreateMode(mode) {